@charset "UTF-8";
/* ==========================================================================
   Roscom BV
   Huisstijl uit hun eigen logoplaat: rood #ED1C24 en bijna zwart. Opzet naar
   het patroon van taurus-security: wit met een koele grijstint, vlak, grote
   vette koppen en één accentkleur. Het beeld komt uit hun eigen loods.

   Twee eigen motieven uit de stellingenwereld:
   - de maatlijn (|<-- 6.000 m2 -->|), zoals op een technische tekening
   - het juk, het vakwerk van een palletstellingframe, als streep op een naad
   ========================================================================== */

/* ---------- Fonts (zelfgehost) ------------------------------------------ */
/* Koppen in Archivo, iets smaller gezet. Het woordmerk "Roscom B.V." is een
   zware, smalle grotesk; Archivo op 800 en 90% breedte heeft datzelfde
   industriële gewicht zonder het logo na te doen. Tekst in Source Sans 3. */
@font-face{
  font-family:Archivo;src:url(../fonts/archivo-var.woff2) format("woff2");
  font-weight:100 900;font-stretch:62% 125%;font-display:swap;
}
@font-face{
  font-family:SourceSans;src:url(../fonts/sourcesans-var.woff2) format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;
}

/* ---------- Tokens ------------------------------------------------------- */
:root{
  /* #ED1C24 is het rood van het logo en van de oude stylesheet. Wit daarop
     haalt 4,4:1, net te weinig voor gewone tekst. De knop loopt daarom binnen
     dat rood naar een iets diepere kant, en rode tekst op wit gebruikt de
     donkere variant (5,9:1). */
  --rood:#ED1C24;
  --rood-diep:#C8141B;
  --rood-tekst:#C4131A;
  --rood-tint:#FDEDEE;
  --rood-op-donker:#FF7A7F;

  --wit:#FFFFFF;
  --grond:#F4F5F7;
  --inkt:#17191C;
  --grijs:#474D57;
  --grijs-licht:#626874;     /* 5,6:1 op wit, 5,2:1 op de grijze grond */
  --lijn:#E4E6EA;
  --schets:#A3A9B3;

  /* Donker is het zwart van het woordmerk, iets opgewarmd naar staal. */
  --staal:#16181B;
  --staal-op:#22262B;
  --staal-lijn:rgba(255,255,255,.12);
  --op-donker:#C9CDD3;

  --kop:Archivo,"Helvetica Neue",Arial,sans-serif;
  --tekst:SourceSans,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  --wrap:1320px;
  --marge:clamp(20px,5vw,44px);
  --rond:16px;
  --rond-klein:10px;
}

/* ---------- Reset -------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{
  margin:0;background:var(--wit);color:var(--inkt);
  font:400 clamp(15.5px,.4vw + 14.4px,17px)/1.65 var(--tekst);
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
picture{display:block}
img{height:auto}
a{color:inherit}
h1,h2,h3,h4{
  margin:0;font-family:var(--kop);font-weight:800;font-stretch:90%;
  letter-spacing:-.018em;line-height:1.1;
}
h3{font-weight:700;letter-spacing:-.01em}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
ul,ol{margin:0;padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--rood);outline-offset:3px;border-radius:6px}

.overslaan{
  position:absolute;left:-9999px;top:0;z-index:100;background:var(--staal);color:#fff;
  padding:.75em 1.3em;border-radius:0 0 var(--rond-klein) 0;font-weight:600;text-decoration:none;
}
.overslaan:focus{left:0}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--marge)}
.midden{text-align:center;margin-inline:auto}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Typografie --------------------------------------------------- */
.t-xxl{font-size:clamp(2.1rem,4.6vw,3.6rem);line-height:1.02;letter-spacing:-.026em}
.t-xl{font-size:clamp(1.85rem,3.4vw,2.75rem);letter-spacing:-.022em}
.t-lg{font-size:clamp(1.4rem,2.1vw,1.8rem)}
h1 em,h2 em{font-style:normal;color:var(--rood)}
.lood{font-size:clamp(1.03rem,1.1vw,1.16rem);line-height:1.6;color:var(--grijs);max-width:58ch}
.midden .lood{margin-inline:auto}
.fijndruk{font-size:.9rem;color:var(--grijs-licht)}

.pil{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.42em .95em .42em .8em;border-radius:999px;
  background:var(--wit);color:var(--inkt);border:1px solid var(--lijn);
  font-size:.845rem;font-weight:600;line-height:1.4;
}
.pil::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--rood);flex:none}
.sectie--wit .pil{background:var(--grond)}
.pil.pil--donker{background:rgba(255,255,255,.07);border-color:var(--staal-lijn);color:#fff}

.kopgroep{max-width:660px}
.kopgroep .pil{margin-bottom:1.1rem}
.kopgroep .lood{margin-top:1rem}
.sectie .kopgroep{margin-bottom:clamp(30px,3.6vw,48px)}
.kopgroep.midden{max-width:62ch}

/* ---------- Secties ------------------------------------------------------ */
.sectie{padding-block:clamp(64px,8.5vw,120px)}
.sectie--wit{background:var(--wit)}
.sectie--grond{background:var(--grond)}
/* Twee paddings op een kleurnaad tellen op; aan weerskanten daarvan krapper. */
.sectie--wit + .sectie--grond,.sectie--grond + .sectie--wit,
.sectie--wit + .juknaad + .sectie--grond,.sectie--grond + .juknaad + .sectie--wit,
.paginakop + .sectie{padding-top:clamp(48px,6vw,84px)}
.sectie--wit:has(+ .sectie--grond),.sectie--grond:has(+ .sectie--wit),
.sectie--wit:has(+ .juknaad + .sectie--grond),.sectie--grond:has(+ .juknaad + .sectie--wit){padding-bottom:clamp(48px,6vw,84px)}

/* ---------- Knoppen ------------------------------------------------------ */
.knop{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--tekst);font-weight:700;font-size:.99rem;line-height:1;
  padding:1.02em 1.55em;border-radius:12px;border:1.5px solid transparent;
  background-origin:border-box;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease,filter .15s ease;
}
.knop svg{width:18px;height:18px;flex:none}
.knop--rood{background-image:linear-gradient(180deg,#E81B23,var(--rood-diep));color:#fff}
.knop--rood:hover{filter:brightness(.92)}
.knop--rand{border-color:var(--lijn);background-color:var(--wit);color:var(--inkt)}
.knop--rand:hover{border-color:var(--inkt)}
.knop--licht{border-color:rgba(255,255,255,.34);color:#fff;background:rgba(255,255,255,.04)}
.knop--licht:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.knop--breed{width:100%}
.knoprij{display:flex;flex-wrap:wrap;gap:.75rem}

.tekstlink{
  display:inline-flex;align-items:center;gap:.4rem;padding-block:.35rem;
  font-weight:700;color:var(--rood-tekst);text-decoration:none;
}
.tekstlink svg{width:16px;height:16px;transition:transform .15s ease}
.tekstlink:hover svg{transform:translateX(3px)}
.tekst a:not(.knop):not(.tekstlink){color:var(--rood-tekst);text-underline-offset:3px}

/* ---------- Kopbalk ------------------------------------------------------ */
.kop-balk{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--lijn);
}
.kop-balk__rij{display:flex;align-items:center;gap:.9rem;min-height:80px;position:relative}
.merk{display:flex;align-items:center;margin-right:clamp(1.6rem,3.4vw,3rem);padding-block:.3rem}
.merk img{height:58px;width:auto}

.menu{display:flex;align-items:center;gap:.15rem}
.menu > a,.menu__knop{
  font-weight:600;font-size:1rem;text-decoration:none;color:var(--inkt);
  padding:.6em .85em;border-radius:10px;transition:color .15s ease,background-color .15s ease;
}
.menu > a:hover,.menu__knop:hover{background:var(--grond)}
.menu > a[aria-current=page],.menu__knop[aria-current=page]{color:var(--rood-tekst);background:var(--rood-tint)}

.menu__uitklap{display:flex;align-items:center;position:relative}
.menu__knop{padding-right:.45em}
.menu__pijl{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:34px;margin-left:-.3em;padding:0;border:0;background:none;
  color:var(--grijs);cursor:pointer;border-radius:8px;
}
.menu__pijl svg{width:14px;height:14px;transition:transform .2s ease}
.menu__uitklap[data-open=true] .menu__pijl svg{transform:rotate(180deg)}
@media (min-width:1141px){
  .menu__uitklap{border-radius:10px;padding-right:.5em;transition:background-color .15s ease}
  .menu__uitklap:hover{background:var(--grond)}
  .menu__uitklap .menu__knop:hover{background:none}
  .menu__uitklap:has(.menu__knop[aria-current=page]){background:var(--rood-tint)}
  .menu__uitklap .menu__knop[aria-current=page]{background:none}
}
.menu__paneel{
  position:absolute;top:calc(100% + 14px);left:0;z-index:70;width:max-content;
  background:var(--wit);border:1px solid var(--lijn);border-radius:var(--rond);
  padding:14px;box-shadow:0 18px 44px rgba(20,22,26,.12);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
.menu__paneel::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.menu__uitklap[data-open=true] > .menu__paneel{opacity:1;visibility:visible;transform:none}
@media (hover:hover) and (min-width:1141px){
  .menu__uitklap:hover > .menu__paneel,.menu__uitklap:focus-within > .menu__paneel{opacity:1;visibility:visible;transform:none}
}
.menu__paneel ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.15rem .4rem}
.menu__paneel li a{
  display:flex;align-items:center;gap:.8rem;padding:.55rem .75rem .55rem .55rem;border-radius:10px;
  text-decoration:none;color:var(--inkt);transition:background-color .14s ease;
}
.menu__paneel li a:hover{background:var(--grond)}
.menu__paneel li b{display:block;font-weight:600;font-size:.95rem;line-height:1.25;white-space:nowrap}
.menu__paneel li small{display:block;font-size:.82rem;color:var(--grijs-licht);line-height:1.3;white-space:nowrap}
.menu__paneel .menu__schets{
  width:52px;height:40px;flex:none;border-radius:8px;background:var(--grond);
  color:var(--grijs-licht);padding:5px 6px;
}
.menu__paneel li a:hover .menu__schets{color:var(--rood)}
.menu__paneel .menu__schets .sl{stroke-width:2.6}
.menu__voet{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:.55rem;padding:.8rem .75rem .2rem;border-top:1px solid var(--lijn);font-size:.9rem;
}
.menu__voet span{color:var(--grijs-licht)}
.menu__voet a{font-weight:700;color:var(--rood-tekst);text-decoration:none;white-space:nowrap}

.kop-balk__acties{display:flex;align-items:center;gap:.6rem;margin-left:auto}
.kop-bel{
  display:inline-flex;align-items:center;gap:.5rem;padding:.6em .7em;border-radius:10px;
  font-weight:700;text-decoration:none;white-space:nowrap;
}
.kop-bel svg{width:17px;height:17px;color:var(--rood)}
.kop-bel:hover{background:var(--grond)}
.hamburger{
  display:none;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:var(--rond-klein);border:1px solid var(--lijn);background:var(--wit);cursor:pointer;
}
.hamburger svg{width:22px;height:22px}
.menu__voet-la{display:none}

@media (max-width:1300px){.kop-bel span{display:none}}
@media (max-width:1140px){
  .hamburger{display:inline-flex}
  .merk{margin-right:0}
  .kop-bel{display:none}
  .menu{
    display:none;position:fixed;left:0;right:0;top:var(--balkhoogte,80px);bottom:0;
    overflow-y:auto;overscroll-behavior:contain;flex-direction:column;align-items:stretch;gap:.15rem;
    background:var(--wit);border-top:1px solid var(--lijn);
    padding:.7rem var(--marge) calc(1.2rem + env(safe-area-inset-bottom));
  }
  .menu[data-open=true]{display:flex}
  html[data-menu-open=true] .kop-balk{backdrop-filter:none;background:var(--wit)}
  .menu > a,.menu__knop{padding:.85em 1em;font-size:1.04rem}
  .menu__uitklap{flex-direction:column;align-items:stretch}
  .menu__knop + .menu__pijl{position:absolute;right:.4rem;top:5px;width:44px;height:44px;margin:0}
  .menu__paneel{
    position:static;width:auto;border:0;border-radius:0;box-shadow:none;padding:0 0 .4rem .4rem;
    display:none;opacity:1;visibility:visible;transform:none;transition:none;
  }
  .menu__uitklap[data-open=true] > .menu__paneel{display:block}
  .menu__paneel ul{grid-template-columns:1fr}
  .menu__paneel li b,.menu__paneel li small{white-space:normal}
  .menu__voet{flex-direction:column;align-items:flex-start;gap:.3rem}
  .menu__voet-la{
    display:flex;flex-direction:column;gap:.7rem;margin-top:auto;padding-top:1.2rem;border-top:1px solid var(--lijn);
  }
  .menu__voet-la img{align-self:flex-start;height:34px;width:auto}
  .menu__bel{display:flex;align-items:center;gap:.7rem;text-decoration:none;padding:.35rem 0}
  .menu__bel svg{width:18px;height:18px;color:var(--rood);flex:none}
  .menu__bel b{display:block;font-weight:700}
  .menu__bel small{display:block;font-size:.82rem;color:var(--grijs-licht)}
  .menu__voet-la .knop{width:100%}
}
@media (max-width:620px){
  .kop-balk__rij{min-height:68px}
  .merk img{height:38px}
  .knop--kop{padding:.8em 1em;font-size:.88rem}
  .hamburger{width:40px;height:40px}
  .kop-balk__acties{gap:.4rem}
}
@media (max-width:400px){
  .merk img{height:29px}
  .knop--kop{padding:.72em .8em;font-size:.8rem}
}

/* ---------- Hero --------------------------------------------------------- */
/* Donker, met de loods rechts tot aan de paginarand. De grootste eigen foto is
   726 px breed: over het hele scherm zou hij zacht worden, over de helft staat
   hij scherp. De sluier zit alleen aan de tekstkant en valt naar rechts weg,
   zodat het één beeld blijft en geen foto naast een vlak. */
.hero{position:relative;background:var(--staal);color:#fff;overflow:hidden;isolation:isolate}
.hero__foto{
  position:absolute;top:0;bottom:0;right:0;width:min(56vw,860px);z-index:-1;
}
.hero__foto picture,.hero__foto img{width:100%;height:100%}
.hero__foto img{object-fit:cover;object-position:50% 60%}
.hero__foto::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--staal) 0%,rgba(22,24,27,.72) 22%,rgba(22,24,27,.18) 52%,rgba(22,24,27,0) 72%),
             linear-gradient(0deg,rgba(22,24,27,.55) 0%,rgba(22,24,27,0) 30%);
}
.hero__inhoud{
  min-height:clamp(540px,44vw,660px);display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(56px,7vw,96px);
}
.hero__tekst{max-width:560px}
.hero h1{color:#fff}
.hero .lood{color:var(--op-donker);margin-top:1.25rem;max-width:46ch}
.hero .knoprij{margin-top:2rem}
.hero__motto{
  display:inline-flex;align-items:center;gap:.7rem;margin-bottom:1.3rem;
  font-weight:600;font-size:.95rem;color:#fff;
}
.hero__motto i{display:block;width:26px;height:3px;background:var(--rood);border-radius:2px}

/* De maatlijn onder in de foto, als op een tekening. */
.maatlijn{
  display:flex;align-items:center;gap:.7rem;color:currentColor;font-size:.85rem;font-weight:600;white-space:nowrap;
}
.maatlijn::before,.maatlijn::after{
  content:"";flex:1;height:9px;min-width:18px;
  background:linear-gradient(currentColor,currentColor) 0 50%/100% 1.5px no-repeat;
  border-inline:1.5px solid currentColor;
}
.hero .maatlijn{position:absolute;right:var(--marge);bottom:clamp(20px,2.6vw,34px);width:min(38vw,520px);color:rgba(255,255,255,.9)}

@media (max-width:860px){
  .hero__foto{width:100%}
  .hero__foto::after{background:linear-gradient(170deg,rgba(22,24,27,.9) 0%,rgba(22,24,27,.8) 45%,rgba(22,24,27,.55) 100%)}
  .hero__inhoud{min-height:0;padding-block:64px 92px}
  .hero .maatlijn{left:var(--marge);right:var(--marge);width:auto}
}

/* ---------- Cijfers met maatlijn ----------------------------------------- */
.cijfers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(22px,3vw,44px)}
.cijfer b{
  display:block;font-family:var(--kop);font-weight:800;font-stretch:90%;
  font-size:clamp(2rem,3.4vw,2.7rem);line-height:1;letter-spacing:-.02em;
}
.cijfer b small{font-size:.55em;letter-spacing:0;margin-left:.1em}
.cijfer .maatlijn{margin:.9rem 0 .7rem;color:var(--schets)}
.cijfer .maatlijn::before{flex:1}
.cijfer .maatlijn::after{display:none}
.cijfer span{display:block;color:var(--grijs);font-size:.95rem;line-height:1.45}
.sectie--cijfers{padding-block:clamp(40px,5vw,64px)}
@media (max-width:860px){.cijfers{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:34px}}

/* ---------- Het juk: vakwerk van een stellingframe ----------------------- */
/* Twee staanders plat gelegd met de diagonalen ertussen, zoals een juk van een
   palletstelling er van opzij uitziet. Het begint tegen de paginarand en loopt
   ongeveer veertig procent door, om en om links en rechts. De lengte is een
   veelvoud van één vak, zodat hij altijd eindigt met een hele staander. */
.juknaad{position:relative;height:0;z-index:2}
.juk{
  position:absolute;top:-14px;height:28px;width:calc(var(--vakken,12) * 36px + 3px);
  max-width:calc(100vw - 20px);color:var(--inkt);overflow:hidden;
}
.juk--links{left:0}
.juk--rechts{right:0;transform:scaleX(-1)}
.juk svg{width:1083px;max-width:none;height:28px}
@media (max-width:700px){.juk{width:calc(8 * 36px + 3px)}}

/* ---------- Lijntekeningen ---------------------------------------------- */
.schets{width:100%;height:auto;color:var(--schets)}
.sl{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sl-v{fill:currentColor;stroke:none;opacity:.22}

/* ---------- Assortimentkaarten ------------------------------------------ */
.kaarten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.kaart{
  position:relative;display:flex;flex-direction:column;
  background:var(--wit);border:1px solid var(--lijn);border-radius:var(--rond);
  padding:clamp(22px,2.2vw,30px);text-decoration:none;transition:border-color .15s ease;
}
.sectie--wit .kaart{background:var(--grond);border-color:transparent}
.kaart:hover{border-color:var(--inkt)}
.kaart .schets{width:96px;margin:-4px 0 1.1rem -4px}
.kaart:hover .schets{color:var(--rood)}
.kaart h3{font-size:1.28rem;margin-bottom:.45rem}
.kaart p{color:var(--grijs);font-size:.97rem;margin-bottom:1.1rem}
.kaart .tekstlink{margin-top:auto}
.kaart__label{position:absolute;top:clamp(22px,2.2vw,30px);right:clamp(22px,2.2vw,30px);font-size:.78rem;font-weight:700;color:var(--grijs-licht)}
.kaart--donker{background:var(--staal)!important;border-color:var(--staal)!important;color:#fff}
.kaart--donker p{color:var(--op-donker)}
.kaart--donker .schets{color:#6C737D}
.kaart--donker .tekstlink{color:var(--rood-op-donker)}
.kaart--donker:hover{border-color:var(--rood)!important}
@media (max-width:900px){.kaarten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.kaarten{grid-template-columns:1fr}}

/* ---------- Duo: tekstvlak naast foto ----------------------------------- */
.duos{display:grid;gap:clamp(40px,5vw,72px)}
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);align-items:stretch}
.duo__tekst{
  background:var(--grond);border-radius:var(--rond);padding:clamp(28px,3.6vw,52px);
  display:flex;flex-direction:column;justify-content:center;
}
.sectie--grond .duo__tekst{background:var(--wit)}
.duo__tekst .pil{align-self:flex-start;margin-bottom:1rem}
.duo__tekst h3{font-size:clamp(1.45rem,2.2vw,1.9rem);font-weight:800;letter-spacing:-.018em;margin-bottom:.85rem}
.duo__tekst p{color:var(--grijs)}
.duo__tekst .tekstlink{margin-top:.6rem;align-self:flex-start}
.duo__beeld{position:relative;border-radius:var(--rond);overflow:hidden;min-height:300px;background:var(--grond)}
.duo__beeld picture,.duo__beeld img{position:absolute;inset:0;width:100%;height:100%}
.duo__beeld img{object-fit:cover}
.duo--om .duo__beeld{order:-1}
@media (max-width:820px){
  .duo{grid-template-columns:1fr}
  .duo--om .duo__beeld{order:0}
  .duo__beeld{min-height:0;aspect-ratio:4/3}
}

/* ---------- Merken ------------------------------------------------------- */
.merken{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:.4rem clamp(18px,2.6vw,38px)}
.merken li{
  font-family:var(--kop);font-weight:800;font-stretch:88%;font-size:clamp(1.25rem,2vw,1.7rem);
  color:#B9BEC6;letter-spacing:-.01em;
}
.merken li.merken__nieuw{color:var(--inkt)}
.merken-uitleg{margin-top:1.4rem;text-align:center;font-size:.92rem;color:var(--grijs-licht)}
.merken-uitleg i{display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--inkt);margin:0 .35rem 0 .2rem;vertical-align:-1px}

/* ---------- Stappen ------------------------------------------------------ */
.stappen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;counter-reset:stap}
.stap{border-top:3px solid var(--inkt);padding-top:1.2rem}
.stap::before{
  counter-increment:stap;content:"0" counter(stap);display:block;margin-bottom:.7rem;
  font-family:var(--kop);font-weight:800;font-size:.95rem;color:var(--rood-tekst);
}
.stap h3{font-size:1.2rem;margin-bottom:.4rem}
.stap p{color:var(--grijs);font-size:.97rem}
@media (max-width:760px){.stappen{grid-template-columns:1fr;gap:1.6rem}}

/* ---------- Locatie ------------------------------------------------------ */
.locatie{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(14px,1.6vw,22px);margin-top:clamp(56px,6.5vw,96px)}
.locatie__kaart{
  background:var(--staal);color:#fff;border-radius:var(--rond);padding:clamp(28px,3.6vw,52px);
  position:relative;overflow:hidden;
}
.locatie__kaart h2{color:#fff;margin:1rem 0 .9rem}
.locatie__kaart p{color:var(--op-donker)}
.locatie__adres{font-size:1.15rem;color:#fff;font-weight:600;line-height:1.5;margin:1.3rem 0 1.6rem}
.locatie__kaart .embleem{position:absolute;right:-50px;bottom:-50px;width:250px;opacity:.07}
@media (max-width:820px){.locatie{grid-template-columns:1fr}}

/* ---------- Paginakop ---------------------------------------------------- */
.paginakop{
  position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(120% 140% at 0% 0%,#2C3137 0%,var(--staal-op) 45%,var(--staal) 100%);
  padding-block:clamp(44px,6vw,84px) clamp(48px,6.4vw,92px);
}
.paginakop h1{color:#fff;max-width:20ch}
.paginakop .lood{color:var(--op-donker);margin-top:1rem}
.kruimels{display:flex;flex-wrap:wrap;gap:.45rem;font-size:.87rem;color:#AEB4BC;margin:0 0 1.3rem}
.kruimels a{text-decoration:none;color:#DDE0E4}
.kruimels a:hover{color:#fff}
.kruimels li + li::before{content:"/";margin-right:.45rem;color:#6C737D}
/* Twee staanders met de druppelgaten van een Stow-juk, rechts in de kop. */
.paginakop__staander{
  position:absolute;top:0;bottom:0;right:clamp(20px,9vw,150px);width:88px;opacity:.1;
  background:url(../img/staander.svg) 0 0/88px 44px repeat-y;
}
.paginakop .schets{
  position:absolute;right:clamp(30px,12vw,210px);bottom:clamp(30px,4vw,56px);width:clamp(120px,15vw,200px);
  color:rgba(255,255,255,.55);
}
@media (max-width:760px){.paginakop .schets,.paginakop__staander{display:none}}

/* ---------- Lopende tekst en zijkaart ----------------------------------- */
.indeling{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(30px,4.5vw,64px);align-items:start}
@media (max-width:960px){.indeling{grid-template-columns:1fr}}
.tekst{max-width:68ch}
.tekst h2{font-size:clamp(1.5rem,2.3vw,1.95rem);margin:2.2rem 0 .8rem}
.tekst h2:first-child{margin-top:0}
.tekst h3{font-size:1.2rem;margin:1.6rem 0 .5rem}
.tekst p,.tekst li{color:var(--grijs)}
.tekst strong{color:var(--inkt)}
.vinkjes{display:grid;gap:.55rem;margin:1rem 0 1.4rem}
.vinkjes li{position:relative;padding-left:1.8rem}
.vinkjes li::before{
  content:"";position:absolute;left:0;top:.42em;width:16px;height:16px;border-radius:5px;background:var(--rood);
  -webkit-mask:url(../img/vinkje.svg) center/12px no-repeat;mask:url(../img/vinkje.svg) center/12px no-repeat;
}
.vinkjes--vlak li::before{background:var(--inkt)}

.zijkaart{
  position:sticky;top:104px;background:var(--grond);border-radius:var(--rond);padding:clamp(24px,2.4vw,32px);
}
.zijkaart h2{font-size:1.35rem;margin-bottom:.6rem}
.zijkaart p{color:var(--grijs);font-size:.97rem}
.zijkaart .knop{width:100%;margin-top:1.1rem}
.belregel{
  display:flex;align-items:center;gap:.8rem;margin-top:.7rem;padding:.8rem .9rem;border-radius:12px;
  background:var(--wit);text-decoration:none;
}
.belregel svg{width:20px;height:20px;color:var(--rood);flex:none}
.belregel b{display:block;font-weight:700;font-size:1.05rem;line-height:1.2}
.belregel small{display:block;color:var(--grijs-licht);font-size:.83rem}
.belregel:hover{outline:1.5px solid var(--inkt)}
.zijkaart__foto{border-radius:12px;overflow:hidden;margin:-4px 0 1.2rem}
.gegevens{display:grid;gap:.9rem;margin-top:1.2rem}
.gegevens dt{font-size:.8rem;font-weight:600;color:var(--grijs-licht)}
.gegevens dd{margin:0;font-weight:600}
.gegevens a{text-decoration:none}
.gegevens a:hover{color:var(--rood-tekst)}

/* ---------- Maattabel ---------------------------------------------------- */
.maten{width:100%;border-collapse:collapse;margin:1rem 0 .6rem;font-size:.96rem}
.maten caption{text-align:left;font-weight:700;padding-bottom:.6rem;color:var(--inkt)}
.maten th,.maten td{text-align:left;padding:.62rem .9rem .62rem 0;border-bottom:1px solid var(--lijn);vertical-align:top}
.maten thead th{font-size:.82rem;font-weight:600;color:var(--grijs-licht)}
.maten tbody th{font-weight:600;color:var(--inkt);white-space:nowrap}
.maten td{color:var(--grijs);font-variant-numeric:tabular-nums}
.tabelschuif{overflow-x:auto;-webkit-overflow-scrolling:touch}
.chips{display:flex;flex-wrap:wrap;gap:.35rem}
.chips span{display:inline-block;padding:.12em .6em;border-radius:6px;background:var(--grond);color:var(--inkt);font-weight:600;font-size:.9rem;font-variant-numeric:tabular-nums}

/* ---------- Foto's ------------------------------------------------------- */
.beeld{margin:0}
.beeld__omhulsel{position:relative;border-radius:var(--rond);overflow:hidden;background:var(--grond)}
.beeld__omhulsel img{width:100%;height:100%;object-fit:cover}
.beeld figcaption{margin-top:.6rem;font-size:.87rem;color:var(--grijs-licht)}
.galerij{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.2vw,16px);margin:1.4rem 0 .4rem}
.galerij .beeld__omhulsel{aspect-ratio:4/3}
.galerij--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:640px){.galerij{grid-template-columns:repeat(2,minmax(0,1fr))}.galerij:not(.galerij--2) > :nth-child(3){display:none}}
.beeld--breed{margin:1.4rem 0 1.8rem}
.beeld--klein{max-width:340px;margin:1.2rem 0 .4rem}
.beeld--breed .beeld__omhulsel{aspect-ratio:16/9}

/* ---------- Accessoires ------------------------------------------------- */
.rijtjes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:1.2rem 0 1.6rem}
.rijtje{background:var(--grond);border-radius:14px;padding:1.2rem 1.3rem;display:flex;gap:1rem;align-items:flex-start}
.rijtje .schets{width:64px;flex:none;color:var(--grijs-licht)}
.rijtje h3{margin:0 0 .25rem;font-size:1.06rem}
.rijtje p{font-size:.93rem;margin:0}
@media (max-width:640px){.rijtjes{grid-template-columns:1fr}}

/* ---------- Maatkiezer --------------------------------------------------- */
.kiezer{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(14px,1.6vw,22px);
}
.kiezer__keuzes{background:var(--wit);border-radius:var(--rond);padding:clamp(24px,3vw,40px)}
.sectie--wit .kiezer__keuzes{background:var(--grond)}
.kiezer__tekening{
  background:var(--wit);border-radius:var(--rond);padding:clamp(18px,2.4vw,34px);
  display:flex;flex-direction:column;justify-content:center;border:1px solid var(--lijn);
}
.kiezer__tekening > svg{width:100%;height:auto;max-height:440px}
.kiezer__tekening > .knop{align-self:center}
.kiezer__samenvatting{margin-top:1rem;font-size:.95rem;color:var(--grijs);text-align:center}
.kiezer__samenvatting b{color:var(--inkt)}
@media (max-width:900px){.kiezer{grid-template-columns:minmax(0,1fr)}}
.maatgroep{border:0;margin:0 0 1.2rem;padding:0}
.maatgroep legend{font-weight:700;font-size:.95rem;margin-bottom:.5rem;padding:0}
.maatgroep legend small{font-weight:500;color:var(--grijs-licht);margin-left:.3rem}
.maatknoppen{display:flex;flex-wrap:wrap;gap:.4rem;min-width:0}
.maatknoppen label{position:relative}
.maatknoppen input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.maatknoppen span{
  display:inline-block;padding:.5em .85em;border-radius:10px;border:1.5px solid var(--lijn);background:var(--wit);
  font-weight:600;font-size:.94rem;font-variant-numeric:tabular-nums;cursor:pointer;
  transition:border-color .14s ease,background-color .14s ease,color .14s ease;
}
.maatknoppen label:hover span{border-color:var(--inkt)}
.maatknoppen input:checked + span{background:var(--inkt);border-color:var(--inkt);color:#fff}
.maatknoppen input:focus-visible + span{outline:2px solid var(--rood);outline-offset:2px}
.teller{display:inline-flex;align-items:center;border:1.5px solid var(--lijn);border-radius:10px;background:var(--wit)}
.teller button{width:40px;height:40px;border:0;background:none;font-size:1.2rem;font-weight:700;cursor:pointer;border-radius:8px}
.teller button:hover{background:var(--grond)}
.teller output{min-width:2.4ch;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.tellers{display:flex;flex-wrap:wrap;gap:1.4rem}

/* De tekening zelf */
.tk-staal{stroke:#8E959F;stroke-width:6;fill:none}
.tk-juk{stroke:#B8BDC5;stroke-width:1.6;fill:none}
.tk-ligger{stroke:#E8661D;stroke-width:6;fill:none;stroke-linecap:butt}
.tk-bord{fill:#E9DCC4;stroke:none}
.tk-vloer{stroke:var(--inkt);stroke-width:1.5}
.tk-maat{stroke:var(--inkt);stroke-width:1.2;fill:none}
.tk-maattekst{font:600 15px var(--tekst);fill:var(--inkt)}
.tk-maattekst--rood{fill:var(--rood-tekst)}

/* ---------- Formulier ---------------------------------------------------- */
.formulier{display:grid;gap:clamp(26px,3vw,38px)}
.formblok{background:var(--wit);border-radius:var(--rond);padding:clamp(22px,3vw,40px);border:1px solid var(--lijn)}
.sectie--wit .formblok{background:var(--grond);border-color:transparent}
.formblok > h2{font-size:1.3rem;margin-bottom:.35rem;display:flex;align-items:center;gap:.7rem}
.formblok > h2 i{
  display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--inkt);color:#fff;
  font:800 .85rem var(--kop);font-style:normal;
}
.formblok > p{color:var(--grijs);font-size:.95rem;margin-bottom:1.2rem}
.formblok[hidden]{display:none}
.tegels{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:.6rem}
.tegels--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:560px){.tegels--3{grid-template-columns:1fr}}
/* Zes soorten stelling: 3 bij 2 over de hele breedte, op een telefoon 2 bij 3.
   Lange woorden als "archiefstelling" mogen afbreken in plaats van uit de tegel
   te lopen. */
@media (max-width:560px){.tegels--soort{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tegel > span{min-width:0}
.tegel b,.tegel small{overflow-wrap:break-word}
@media (max-width:400px){.tegels--soort{gap:.5rem}.tegels--soort .tegel > span{padding:.85rem .75rem}.tegels--soort .tegel b{font-size:.9rem}}
.tegel{position:relative;display:block}
.tegel input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.tegel > span{
  display:flex;flex-direction:column;gap:.35rem;height:100%;padding:.95rem 1rem;border-radius:12px;
  background:var(--wit);border:1.5px solid var(--lijn);cursor:pointer;
  transition:border-color .14s ease,box-shadow .14s ease;
}
.tegel .schets{width:64px;color:var(--grijs-licht);margin-bottom:.2rem}
.tegel b{font-weight:700;line-height:1.25}
.tegel small{color:var(--grijs-licht);font-size:.86rem;line-height:1.35}
.tegel:hover > span{border-color:var(--inkt)}
.tegel input:checked + span{border-color:var(--rood);box-shadow:inset 0 0 0 1px var(--rood)}
.tegel input:checked + span .schets{color:var(--rood)}
.tegel input:focus-visible + span{outline:2px solid var(--rood);outline-offset:2px}

.velden{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 1.1rem}
.velden--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:760px){.velden--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.velden{grid-template-columns:1fr}.velden--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.veld--breed{grid-column:1/-1}
.veld label{display:block;font-weight:600;font-size:.93rem;margin-bottom:.35rem}
.veld label small{font-weight:400;color:var(--grijs-licht)}
.veld label abbr{color:var(--rood-tekst);text-decoration:none;margin-left:.15rem}
.veld input,.veld select,.veld textarea{
  width:100%;padding:.78em .9em;border-radius:10px;border:1.5px solid var(--lijn);background:var(--wit);
  transition:border-color .14s ease;
}
.veld textarea{min-height:130px;resize:vertical}
.veld select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:2.6rem;
  background:var(--wit) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23626874' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right .85rem center/16px no-repeat;
}
.veld input:hover,.veld textarea:hover,.veld select:hover{border-color:#C3C7CE}
.veld input:focus,.veld textarea:focus,.veld select:focus{outline:none;border-color:var(--inkt)}
.veld ::placeholder{color:#7A808A}
.veld__eenheid{position:relative}
.veld__eenheid input{padding-right:3rem}
.veld__eenheid span{position:absolute;right:.9rem;top:50%;transform:translateY(-50%);color:var(--grijs-licht);font-size:.9rem;pointer-events:none}
.veld[data-fout] input,.veld[data-fout] textarea{border-color:var(--rood)}
.veld__fout{display:none;margin-top:.35rem;font-size:.86rem;font-weight:600;color:var(--rood-tekst)}
.veld[data-fout] .veld__fout{display:block}
.spamval{position:absolute;left:-9999px}

.vink{display:flex;gap:.75rem;align-items:flex-start;cursor:pointer;font-size:.95rem;color:var(--grijs)}
.vink input{
  appearance:none;-webkit-appearance:none;flex:none;width:22px;height:22px;margin:.05rem 0 0;border-radius:6px;
  border:1.5px solid #B7BCC4;background:var(--wit);display:grid;place-content:center;cursor:pointer;
}
.vink input::before{
  content:"";width:12px;height:12px;background:#fff;transform:scale(0);transition:transform .12s ease;
  clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%);
}
.vink input:checked{background:var(--rood);border-color:var(--rood)}
.vink input:checked::before{transform:scale(1)}
.vink a{color:var(--rood-tekst)}
.vink[data-fout] input{border-color:var(--rood)}
.formulier__verzend{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem}
.melding{
  display:none;padding:1rem 1.2rem;border-radius:12px;background:var(--rood-tint);color:var(--rood-tekst);font-weight:600;
}
.melding[data-zichtbaar]{display:block}

/* ---------- Voet --------------------------------------------------------- */
.voet{background:var(--staal);color:var(--op-donker);padding-block:clamp(56px,6.5vw,88px) 28px;font-size:.96rem}
.voet__rij{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.1fr;gap:clamp(28px,4vw,56px)}
.voet__merk img{height:50px;width:auto;margin-bottom:1.2rem}
.voet__merk p{max-width:34ch}
.voet h2{font:600 .82rem var(--tekst);color:#8C939C;margin:0 0 .9rem;letter-spacing:0}
.voet ul{display:grid;gap:.15rem}
.voet a{text-decoration:none;color:#fff;display:inline-flex;align-items:center;gap:.6rem;padding-block:.3rem}
.voet a:hover{color:var(--rood-op-donker)}
.voet a svg{width:16px;height:16px;color:#8C939C;flex:none}
.voet__onder{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 1.4rem;margin-top:clamp(40px,5vw,64px);
  padding-top:22px;border-top:1px solid var(--staal-lijn);font-size:.85rem;color:#8C939C;
}
.voet__onder a{color:#C9CDD3;padding:0}
@media (max-width:900px){.voet__rij{grid-template-columns:1fr 1fr}.voet__merk{grid-column:1/-1}}
@media (max-width:520px){.voet__rij{grid-template-columns:1fr}}

/* ---------- Kleine hulpklassen ------------------------------------------ */
.ruimte-boven{margin-top:clamp(28px,3.4vw,44px)}
.ruimte-boven-s{margin-top:1.1rem}
.min0{min-width:0}
.fout404{min-height:50vh;display:flex;align-items:center}

/* ---------- Belastingbord (nagezet) ------------------------------------- */
/* Het bord dat bij een Stow-sectie hangt, in de vormtaal van de site in plaats
   van een scheve telefoonfoto ervan. */
.bord{
  margin:1.3rem 0 .8rem;border:1.5px solid var(--lijn);border-radius:var(--rond);
  padding:clamp(20px,2.6vw,32px);background:var(--wit);
}
.bord__kop{display:flex;justify-content:space-between;gap:1.5rem;align-items:flex-start}
.tekst .bord__label{
  display:inline-flex;align-items:center;gap:.5rem;margin:0 0 .35rem;
  font-size:.82rem;font-weight:700;color:var(--rood-tekst);
}
.bord__label::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--rood)}
.tekst .bord__titel{font-family:var(--kop);font-weight:800;font-stretch:90%;font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.15;color:var(--inkt);margin:0}
.bord__tekening{width:118px;flex:none;margin-top:-4px}
.bb-vloer{stroke:var(--inkt);stroke-width:1.5}
.bb-staal{stroke:#1F4E9C;stroke-width:5}
.bb-ligger{stroke:#E8661D;stroke-width:4}
.bb-pallet{fill:#E9DCC4}
.bb-palletvoet{stroke:#B89C6E;stroke-width:3}
.bb-maat{stroke:var(--grijs-licht);stroke-width:1.2;fill:none}
.bb-maattekst{font:600 13px var(--tekst);fill:var(--grijs)}
.bord__gegevens{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem 1.2rem;margin:1.2rem 0 1.4rem;
  padding:1rem 1.1rem;border-radius:12px;background:var(--grond);
}
.bord__gegevens dt{font-size:.8rem;font-weight:600;color:var(--grijs-licht)}
.bord__gegevens dd{margin:0;font-weight:700;color:var(--inkt);font-variant-numeric:tabular-nums}
.bord__tabel{margin:0}
.bord__tabel td:last-child{font-weight:700;color:var(--inkt)}
.bord__totaal{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin:1.1rem 0 0;
  padding:1rem 1.2rem;border-radius:12px;background:var(--staal);color:#fff;
}
.tekst .bord__totaal span{font-weight:600;color:var(--op-donker)}
.bord__totaal b{color:#fff;white-space:nowrap;font-family:var(--kop);font-weight:800;font-stretch:90%;font-size:clamp(1.4rem,2.2vw,1.8rem);font-variant-numeric:tabular-nums}
@media (max-width:560px){
  .bord__gegevens{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bord__tekening{width:84px}
  .bord__totaal{flex-direction:column;gap:.2rem}
}

/* ---------- Keuzelijst in huisstijl ------------------------------------- */
.keuze{position:relative}
.keuze__echt{position:absolute;inset:0;opacity:0;pointer-events:none}
.keuze__knop{
  display:block;width:100%;text-align:left;cursor:pointer;
  padding:.78em 2.6rem .78em .9em;border-radius:10px;border:1.5px solid var(--lijn);
  background:var(--wit) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23626874' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right .85rem center/16px no-repeat;
  transition:border-color .14s ease;
}
.keuze__knop:hover{border-color:#C3C7CE}
.keuze__knop:focus-visible,.keuze[data-open] .keuze__knop{outline:none;border-color:var(--inkt)}
.keuze__lijst{
  position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;margin:0;padding:6px;
  max-height:260px;overflow-y:auto;background:var(--wit);border:1px solid var(--lijn);border-radius:12px;
  box-shadow:0 18px 44px rgba(20,22,26,.12);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .14s ease,transform .14s ease,visibility .14s;
}
.keuze__lijst:focus{outline:none}
.keuze[data-open] .keuze__lijst{opacity:1;visibility:visible;transform:none}
.keuze__lijst li{
  position:relative;padding:.62em 2.2rem .62em .75em;border-radius:8px;cursor:pointer;font-weight:500;
}
.keuze__lijst li.is-actief{background:var(--grond)}
.keuze__lijst li[aria-selected=true]{font-weight:700;color:var(--inkt)}
.keuze__lijst li[aria-selected=true]::after{
  content:"";position:absolute;right:.8rem;top:50%;width:16px;height:16px;margin-top:-8px;background:var(--rood);
  -webkit-mask:url(../img/vinkje.svg) center/13px no-repeat;mask:url(../img/vinkje.svg) center/13px no-repeat;
}

/* ---------- Foto's uploaden --------------------------------------------- */
.upload{position:relative}
.upload__input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.upload__vlak{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;text-align:center;
  padding:clamp(26px,3.4vw,40px) 1.2rem;border:2px dashed #CBD0D7;border-radius:14px;background:var(--grond);
  cursor:pointer;transition:border-color .15s ease,background-color .15s ease;
}
.sectie--wit .upload__vlak{background:var(--wit)}
.upload__vlak:hover,.upload[data-sleep] .upload__vlak{border-color:var(--rood);background:var(--rood-tint)}
.upload__input:focus-visible + .upload__vlak{outline:2px solid var(--rood);outline-offset:3px}
.upload__teken{
  display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--wit);
  color:var(--rood);margin-bottom:.35rem;border:1px solid var(--lijn);
}
.upload__teken svg{width:26px;height:26px}
.upload__vlak b{font-weight:700;font-size:1.02rem}
.upload__vlak u{color:var(--rood-tekst);text-underline-offset:3px}
.upload__vlak small{color:var(--grijs-licht);font-size:.88rem}
.upload[data-bezig] .upload__teken{animation:upload-puls 1s ease-in-out infinite}
@keyframes upload-puls{50%{opacity:.45}}
.upload__melding{margin:.6rem 0 0;font-size:.88rem;font-weight:600;color:var(--rood-tekst)}
.upload__melding:empty{display:none}
.upload__lijst{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:.6rem;margin-top:.9rem}
.upload__lijst:empty{display:none}
.upload__foto{position:relative;border-radius:10px;overflow:hidden;background:var(--grond);aspect-ratio:1}
.upload__foto img{width:100%;height:100%;object-fit:cover}
.upload__foto span{
  position:absolute;left:6px;bottom:6px;padding:.1em .45em;border-radius:6px;
  background:rgba(22,24,27,.72);color:#fff;font-size:.72rem;font-weight:600;
}
.upload__weg{
  position:absolute;top:6px;right:6px;width:28px;height:28px;border-radius:8px;border:0;cursor:pointer;
  display:grid;place-items:center;background:rgba(22,24,27,.72);color:#fff;
}
.upload__weg:hover{background:var(--rood)}
.upload__weg svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}