/*
Theme Name: Dutch Dutch Customs 2026
Theme URI: https://dutch-dutch.nl
Author: Dutch Dutch Customs
Description: Mobile-first thema voor Dutch Dutch Customs. Carwrapping, PPF, privacy glass, signing, velgen coaten, chrome delete en remklauwen spuiten. Werkt samen met het bestaande systeem in /wp-content/uploads/ddc-mailer/ zonder dat aan te passen.
Version: 1.0.1
Requires at least: 6.0
Requires PHP: 7.4
License: Alle rechten voorbehouden
Text Domain: ddc2026
*/

/* Throw My Hands Up in the Air — Kimberly Geswein.
   Let op: commerciele licentie vereist voor zakelijk gebruik. */
@font-face{font-family:'ThrowMyHands';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/throwmyhands-regular.woff2') format('woff2')}
@font-face{font-family:'ThrowMyHands';font-style:normal;font-weight:700;font-display:swap;
  src:url('assets/fonts/throwmyhands-bold.woff2') format('woff2')}

/* ============ TOKENS ============ */
:root{
  /* huisstijl: kleuren uit DDC.svg */
  --bg:#0B0C0F;
  --bg-2:#101218;
  --card:#15171D;
  --card-2:#1B1E26;
  --line:rgba(217,218,218,.10);
  --line-2:rgba(217,218,218,.18);
  --txt:#EEEEEE;
  --muted:#9A9C9F;
  --silver:#D9DADA;
  --orange:#EF8C1A;
  --orange-2:#F49A32;
  --orange-dk:#D0671F;
  --grad:linear-gradient(135deg,#D0671F 0%,#F49A32 100%);
  --font-display:'Bebas Neue',Impact,'Haettenschweiler','Arial Narrow',sans-serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-script:'ThrowMyHands','Kaushan Script','Brush Script MT',cursive;
  --r:20px;
  --r-lg:28px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --nav-h:68px;
  --bar-h:66px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--txt);
  font-family:var(--font-body);
  font-size:16px;line-height:1.6;letter-spacing:-.011em;
  overflow-x:hidden;
  padding-bottom:calc(var(--bar-h) + var(--safe-b));
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--orange);color:#fff}

/* ============ LAYOUT ============ */
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}
section{padding:64px 0}
.eyebrow{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin-bottom:14px}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--grad);border-radius:2px;flex:none}
h1,h2,h3{font-family:var(--font-display);font-weight:400;line-height:.92;letter-spacing:.005em}
h1{font-size:clamp(46px,11.5vw,92px)}
h2{font-size:clamp(36px,8.6vw,62px)}
h3{font-size:clamp(23px,5.2vw,30px);letter-spacing:.015em}
/* script-accent — staat voor "Throw My Hands Up in the Air" uit je huisstijl */
.script{font-family:var(--font-script);text-transform:none;letter-spacing:0;line-height:1.15;
  font-weight:400;display:inline-block;padding-right:.08em}
.lead{color:var(--muted);font-size:clamp(15px,3.9vw,18px);max-width:62ch}
.grad-txt{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ============ HEADER ============ */
header{
  position:sticky;top:0;z-index:60;height:var(--nav-h);
  background:rgba(11,12,15,.72);backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid var(--line);overflow:visible;
}
.hd{display:flex;align-items:center;gap:20px;height:100%}
/* de leus naast het logo — alleen op grotere schermen */
.tagline-hd{display:none;height:52px;width:auto;flex:none}
/* de gouden award-penning, mag onder de balk uitsteken */
.badge-hd{display:none;height:130px;width:auto;flex:none;margin:6px 0 -46px auto;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.55))}
.logo{display:flex;flex-direction:column;align-items:flex-start;gap:0;line-height:1}
/* het logo is één geheel — mark + woordmerk, exact zoals DDC.svg. Nooit opsplitsen. */
header .logo svg.ddc{height:36px;width:auto;flex:none;display:block}
footer .logo svg.ddc{height:104px;width:auto;flex:none;display:block}
.logo .tl{display:block;font-family:var(--font-display);font-size:13px;letter-spacing:.13em;
  color:var(--muted);font-weight:400;margin-top:14px;line-height:1.6}
header .logo .tl{display:none}
/* ---- beeld ---- */
.ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-visual .ph-img{z-index:0}
.hero-visual .shine,.hero-visual .cap{z-index:2}
.pf .fill img{width:100%;height:100%;object-fit:cover;display:block}
/* Wij werken met — logo als het bestand er is, anders de naam gezet */
.merken{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:8px;
  padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--card)}
.merken li{display:grid;place-items:center;min-height:58px;padding:10px 8px;
  border-radius:10px;background:var(--bg-2);transition:.25s}
.merken li:hover{background:var(--card-2)}
.merken span{font-family:var(--font-display);font-size:clamp(19px,4.4vw,25px);
  letter-spacing:.055em;line-height:1;color:var(--silver);white-space:nowrap;opacity:.82}
.merken li:hover span{opacity:1}
.merken img{max-height:32px;width:auto;object-fit:contain;
  filter:grayscale(1) brightness(1.9) contrast(.85);opacity:.8;transition:.25s}
.merken li:hover img{filter:none;opacity:1}
@media(min-width:620px){.merken{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.merken{grid-template-columns:repeat(6,1fr)}}
.creating{width:min(420px,80%);display:block;margin-bottom:22px}
.band-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.band-bg+*{position:relative}
.nav-d{display:none}
.burger{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);display:grid;place-items:center;gap:4px;background:var(--card)}
.burger i{display:block;width:16px;height:1.8px;background:var(--txt);border-radius:2px;transition:.25s}
.burger.on i:nth-child(1){transform:translateY(5.8px) rotate(45deg)}
.burger.on i:nth-child(2){opacity:0}
.burger.on i:nth-child(3){transform:translateY(-5.8px) rotate(-45deg)}

/* mobile sheet menu */
.sheet{
  position:fixed;inset:0;z-index:59;background:rgba(11,12,15,.97);
  backdrop-filter:blur(20px);padding:calc(var(--nav-h) + 24px) 20px 40px;
  transform:translateY(-100%);transition:transform .34s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;
}
.sheet.on{transform:translateY(0)}
.sheet a{display:flex;align-items:center;justify-content:space-between;padding:15px 0;border-bottom:1px solid var(--line);
  font-family:var(--font-display);font-size:30px;font-weight:400;letter-spacing:.04em;line-height:1}
.sheet a span{color:var(--muted);font-family:var(--font-body);font-size:13px;font-weight:500;letter-spacing:0}
.sheet .sub{font-family:var(--font-body)!important;font-size:16px!important;letter-spacing:0!important}
.sheet .sub{font-size:16px;font-weight:600;padding:13px 0;color:var(--muted)}
.sheet-cta{margin-top:26px;display:grid;gap:10px}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:16px 26px 13px;border-radius:14px;transition:.2s;white-space:nowrap;
  font-family:var(--font-display);font-weight:400;font-size:19px;
  letter-spacing:.055em;line-height:1;
}
.btn-p{background:var(--grad);color:#0B0C0F;box-shadow:0 8px 26px -8px rgba(239,140,26,.65)}
.btn-p:active{transform:scale(.97)}
.btn-s{background:var(--card);border:1px solid var(--line-2);color:var(--txt)}
.btn-s:active{transform:scale(.97)}
.btn-full{width:100%}

/* ============ HERO ============ */
.hero{position:relative;padding:44px 0 56px;overflow:hidden}
.hero::before{
  content:"";position:absolute;top:-180px;left:50%;transform:translateX(-50%);
  width:min(720px,140vw);height:520px;
  background:radial-gradient(ellipse at center,rgba(239,140,26,.20),transparent 66%);
  filter:blur(30px);pointer-events:none;
}
.hero-inner{position:relative}
.badge{
  display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 8px;
  border-radius:999px;background:var(--card);border:1px solid var(--line-2);
  font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:20px;
}
.badge b{color:var(--txt);font-weight:700}
.badge .dot{width:20px;height:20px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-size:11px;flex:none}
.hero h1{margin-bottom:16px}
.hero .lead{margin-bottom:26px}
.hero-cta{display:grid;gap:10px;margin-bottom:32px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat b{display:block;font-family:var(--font-display);font-size:clamp(30px,8vw,42px);font-weight:400;letter-spacing:.02em;line-height:1}
.stat span{font-size:12.5px;color:var(--muted);letter-spacing:.02em}

.hero-visual{
  margin-top:30px;border-radius:var(--r-lg);overflow:hidden;position:relative;
  aspect-ratio:4/3;border:1px solid var(--line);
  background:linear-gradient(150deg,#1B2440,#0C0E15 55%,#2A1508);
}
.hero-visual .shine{position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.09) 47%,transparent 60%)}
.hero-visual .cap{position:absolute;left:0;right:0;bottom:0;padding:20px;background:linear-gradient(transparent,rgba(11,12,15,.92));font-size:13px;color:var(--muted)}
.hero-visual .cap b{display:block;color:var(--txt);font-size:16px;font-weight:700;letter-spacing:-.02em}
.carsvg{position:absolute;inset:0;display:grid;place-items:center;opacity:.9}
.carsvg svg{width:78%;height:auto}

/* ============ SERVICE GRID ============ */
.svc-grid{display:grid;gap:12px;grid-template-columns:1fr}
.svc{
  position:relative;display:block;padding:22px;border-radius:var(--r);
  background:var(--card);border:1px solid var(--line);overflow:hidden;transition:.22s;
}
.svc:active{transform:scale(.985)}
.svc .ico{width:44px;height:44px;border-radius:13px;background:var(--card-2);border:1px solid var(--line);display:grid;place-items:center;margin-bottom:16px}
.svc .ico svg{width:22px;height:22px;stroke:var(--orange);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.svc h3{margin-bottom:7px}
.svc p{color:var(--muted);font-size:14.5px;line-height:1.55}
.svc .from{display:flex;align-items:center;justify-content:space-between;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.svc .from span{font-size:13px;color:var(--muted)}
.svc .from b{font-family:var(--font-display);font-size:24px;line-height:1;color:var(--orange);font-weight:400;letter-spacing:.02em}
.svc .arrow{position:absolute;top:22px;right:22px;color:var(--muted);transition:.22s}
.svc:active .arrow{color:var(--orange);transform:translateX(3px)}
.svc.feat{background:linear-gradient(150deg,#1C1206,var(--card) 60%);border-color:rgba(239,140,26,.28)}
.tagline{position:absolute;top:20px;right:56px;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#0B0C0F;background:var(--grad);padding:4px 9px;border-radius:6px}

/* ============ PORTFOLIO ============ */
.chips{display:flex;gap:8px;overflow-x:auto;padding:4px 20px 18px;margin:0 -20px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:none;padding:12px 18px;border-radius:999px;font-size:13.5px;font-weight:600;
  background:var(--card);border:1px solid var(--line);color:var(--muted);transition:.2s;
}
.chip.on{background:var(--grad);color:#0B0C0F;border-color:transparent;font-weight:700}
.pf-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;grid-auto-flow:dense}
/* Hogere specificiteit dan .pf alleen: er draaien plugins mee die
   aspect-ratio terugzetten naar auto, en dan klapte de tegel dicht tot
   een streepje. De ::before is een tweede vangnet voor dezelfde hoogte. */
.pf-grid .pf, .pf{
  position:relative;border-radius:16px;overflow:hidden;aspect-ratio:3/4;
  border:1px solid var(--line);display:block;
}
.pf-grid .pf::before{content:"";display:block;padding-top:133.33%}
.pf-grid .pf.pf-groot::before{padding-top:68.75%}
.pf-grid .pf.pf-groot{grid-column:span 2;aspect-ratio:16/11}
/* wikkels van plugins mogen de rasterindeling niet breken */
.pf-grid > div[data-wrap]{display:contents}
.pf .fill{position:absolute;inset:0}
.pf .gloss{position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.16),transparent 42%,rgba(0,0,0,.35))}
.pf .meta{position:absolute;left:0;right:0;bottom:0;padding:14px;background:linear-gradient(transparent,rgba(0,0,0,.85))}
.pf .meta b{display:block;font-family:var(--font-display);font-size:21px;font-weight:400;letter-spacing:.03em;line-height:1.02;margin-top:2px}
.pf .meta span{font-size:12px;color:rgba(255,255,255,.7);letter-spacing:.03em;text-transform:uppercase;font-weight:600}
.pf:active{transform:scale(.98)}

/* Fotostrook op de projectpagina — naast elkaar, niet onder elkaar */
.pj-strook{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;margin-bottom:8px;cursor:zoom-in}
.pj-strook::-webkit-scrollbar{display:none}
.pj-dia{flex:0 0 88%;scroll-snap-align:center;margin:0;border-radius:16px;overflow:hidden;
  border:1px solid var(--line);aspect-ratio:4/3;background:var(--card)}
.pj-dia img{width:100%;height:100%;object-fit:cover;display:block}
@media(min-width:768px){ .pj-dia{flex-basis:56%} }

/* ============ LIGHTBOX MET SLIDER ============
   Klik op een projecttegel en de foto's schuiven in beeld, zonder dat
   de bezoeker de pagina verlaat. Sluiten met Escape, de kruisknop of
   een klik naast de foto. Op de telefoon kun je swipen. */
.lb{position:fixed;inset:0;z-index:9999;background:rgba(6,7,10,.94);
  display:none;flex-direction:column;
  opacity:0;transition:opacity .22s ease}
.lb.open{display:flex}
.lb.zichtbaar{opacity:1}
.lb-kop{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:16px 18px;flex:none}
.lb-titel b{display:block;font-family:var(--font-display);font-size:clamp(22px,5.4vw,32px);
  font-weight:400;letter-spacing:.02em;line-height:1.05}
.lb-titel span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);font-weight:700}
.lb-dicht{flex:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2);
  background:var(--card);display:grid;place-items:center;font-size:20px;line-height:1;color:var(--txt)}
.lb-dicht:active{background:var(--card-2)}

/* min-height:0 is hier het hele eiereten. Zonder die regel weigert een
   flexbox-kind kleiner te worden dan zijn inhoud, en steken staande
   foto's onder het scherm uit. */
.lb-baan{flex:1 1 auto;min-height:0;display:flex;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.lb-baan::-webkit-scrollbar{display:none}
.lb-dia{flex:0 0 100%;min-width:0;height:100%;scroll-snap-align:center;
  display:flex;align-items:center;justify-content:center;padding:0 14px;box-sizing:border-box}
.lb-dia img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  border-radius:14px;display:block}

.lb-voet{flex:none;display:flex;align-items:center;justify-content:center;gap:14px;
  padding:14px 18px calc(16px + var(--safe-b))}
.lb-pijl{width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);
  background:var(--card);display:grid;place-items:center;color:var(--txt);font-size:18px;flex:none}
.lb-pijl:active{background:var(--orange);color:#0B0C0F}
.lb-pijl[disabled]{opacity:.3}
.lb-stippen{display:flex;gap:7px;align-items:center}
.lb-stip{width:7px;height:7px;border-radius:50%;background:var(--line-2);transition:.2s}
.lb-stip.aan{background:var(--orange);transform:scale(1.35)}
.lb-tel{font-size:13px;color:var(--muted);min-width:44px;text-align:center}
body.lb-open{overflow:hidden}

/* ============ BEFORE / AFTER ============ */
.ba{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:16/11;border:1px solid var(--line);touch-action:none;user-select:none}
.ba .layer{position:absolute;inset:0}
.ba .after{clip-path:inset(0 0 0 50%)}
.ba .handle{
  position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;
  box-shadow:0 0 18px rgba(0,0,0,.6);
}
.ba .knob{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;background:#fff;color:#0B0C0F;
  display:grid;place-items:center;font-size:15px;font-weight:800;
}
.ba .lbl{position:absolute;bottom:12px;padding:5px 11px;border-radius:8px;background:rgba(11,12,15,.75);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;backdrop-filter:blur(8px)}
.ba .l1{left:12px}
.ba .l2{right:12px;color:var(--orange)}

/* ============ CARDS / MISC ============ */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px}
.rev-scroll{display:flex;gap:12px;overflow-x:auto;margin:0 -20px;padding:0 20px 8px;scroll-snap-type:x mandatory;scrollbar-width:none}
.rev-scroll::-webkit-scrollbar{display:none}
.rev{flex:none;width:min(300px,82vw);scroll-snap-align:start;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.stars{color:var(--orange);font-size:14px;letter-spacing:2px;margin-bottom:12px}
.rev p{font-size:14.5px;color:var(--txt);line-height:1.6;margin-bottom:16px}
.rev .who{display:flex;align-items:center;gap:11px;padding-top:14px;border-top:1px solid var(--line)}
.rev .av{width:34px;height:34px;border-radius:50%;background:var(--card-2);border:1px solid var(--line);display:grid;place-items:center;font-size:12px;font-weight:800;color:var(--orange);flex:none}
.rev .who b{font-size:13.5px;display:block}
.rev .who span{font-size:12.5px;color:var(--muted)}

.brands{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;align-items:center}
.brand{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;display:grid;place-items:center;height:78px;font-weight:800;letter-spacing:-.02em;color:var(--muted);font-size:15px}

/* ---- fotovariant dienstenkaart (schakelbaar) ---- */

.svc{padding:0;overflow:hidden}
.svc .shot{display:block;position:relative;aspect-ratio:16/9;overflow:hidden}
.svc .shot img{width:100%;height:100%;object-fit:cover;display:block;transition:.4s}
.svc:hover .shot img{transform:scale(1.05)}
.svc .shot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(transparent 35%,var(--card))}
.svc .body{padding:0 22px 22px;margin-top:-34px;position:relative}
.svc .ico{display:none}
.svc .arrow{top:auto;bottom:22px;right:22px}
.svc.feat{background:var(--card)}
.calc-cta{background:linear-gradient(150deg,#1C1206,var(--card) 62%);border-color:rgba(239,140,26,.3)}
.ptab{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--card)}
.prow{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 18px;border-bottom:1px solid var(--line)}
.prow:last-child{border-bottom:0}
.prow span{font-size:14.5px;color:var(--muted)}
.prow b{font-family:var(--font-display);font-weight:400;font-size:22px;letter-spacing:.02em;color:var(--orange);white-space:nowrap;line-height:1}
.acc{border:1px solid var(--line);border-radius:16px;background:var(--card);overflow:hidden;margin-bottom:8px}
.acc summary{padding:18px 20px;font-weight:650;font-size:15.5px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";color:var(--orange);font-size:22px;line-height:1;font-weight:400;flex:none;transition:.2s}
.acc[open] summary::after{transform:rotate(45deg)}
.acc .body{padding:0 20px 20px;color:var(--muted);font-size:14.5px}

.steps{display:grid;gap:12px;counter-reset:s}
.step{display:flex;gap:16px;padding:20px;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.step .n{width:32px;height:32px;border-radius:10px;background:var(--grad);color:#0B0C0F;display:grid;place-items:center;font-weight:900;font-size:14px;flex:none}
.step b{display:block;margin-bottom:4px;font-size:16px;letter-spacing:-.02em}
.step p{color:var(--muted);font-size:14px}

/* ============ CTA BAND ============ */
.band{
  border-radius:var(--r-lg);padding:34px 24px;position:relative;overflow:hidden;
  background:linear-gradient(150deg,#20140A,#0D0F16 62%);border:1px solid rgba(239,140,26,.24);
}
.band::before{content:"";position:absolute;top:-90px;right:-60px;width:280px;height:280px;background:radial-gradient(circle,rgba(239,140,26,.28),transparent 68%);filter:blur(18px)}
.band > *{position:relative}

/* ============ FOOTER ============ */
footer{border-top:1px solid var(--line);padding:44px 0 30px;background:var(--bg-2)}
.f-grid{display:grid;gap:32px}
.f-col h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;font-weight:700}
.f-col a,.f-col p{display:block;color:var(--txt);font-size:15px;padding:9px 0;opacity:.85}
.f-bot{margin-top:32px;padding-top:20px;border-top:1px solid var(--line);font-size:13px;color:var(--muted);display:grid;gap:8px}
.socials{display:flex;gap:10px;margin-top:6px}
.socials a{width:44px;height:44px;border-radius:12px;background:var(--card);border:1px solid var(--line);display:grid;place-items:center}
.socials svg{width:18px;height:18px;fill:var(--txt)}

/* ============ STICKY ACTION BAR (mobile) ============ */
.actionbar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;height:calc(var(--bar-h) + var(--safe-b));
  padding:8px 12px calc(8px + var(--safe-b));
  background:rgba(11,12,15,.9);backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);border-top:1px solid var(--line);
  display:grid;grid-template-columns:1fr 1fr 1.35fr;gap:8px;
}
.ab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:13px;background:var(--card-2);border:1px solid var(--line);font-size:12.5px;font-weight:650}
.ab svg{width:19px;height:19px;stroke:var(--txt);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ab.wa{background:#1E2A22;border-color:rgba(37,211,102,.3)}
.ab.wa svg{stroke:#25D366}
.ab.main{background:var(--grad);color:#0B0C0F;border-color:transparent;font-weight:800;font-size:13px;flex-direction:row}
.ab.main svg{stroke:#0B0C0F}

/* ============ PAGES ============ */
/* De router uit het HTML-voorbeeld is hier niet nodig: elke pagina is een echte URL.
   .page mocht sowieso niet blijven staan — WordPress zet die klasse op <body>. */
.back{display:inline-flex;align-items:center;gap:7px;font-size:14px;color:var(--muted);font-weight:600;margin-bottom:22px}

/* ============ ADMIN DEMO ============ */
.phone{
  max-width:340px;margin:0 auto;border-radius:38px;border:9px solid #1A1D26;
  background:var(--bg);overflow:hidden;box-shadow:0 30px 70px -20px rgba(0,0,0,.8);
}
.phone-top{height:26px;display:grid;place-items:center}
.phone-top i{width:78px;height:5px;border-radius:99px;background:#232733;display:block}
.ph-body{padding:14px 16px 22px}
.ph-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.ph-h b{font-size:16px;letter-spacing:-.02em}
.ph-h span{font-size:12px;color:var(--orange);font-weight:700}
.upl{border:1.6px dashed var(--line-2);border-radius:16px;padding:26px 16px;text-align:center;margin-bottom:14px;background:var(--card)}
.upl svg{width:28px;height:28px;stroke:var(--orange);fill:none;stroke-width:1.6;margin:0 auto 10px;display:block}
.upl b{font-size:14px;display:block}
.upl span{font-size:12px;color:var(--muted)}
.thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:16px}
.thumbs div{aspect-ratio:1;border-radius:10px;border:1px solid var(--line)}
.fld{margin-bottom:13px}
.fld label{font-size:13px;color:var(--muted);font-weight:650;display:block;margin-bottom:6px;letter-spacing:.02em}
.fld .inp{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:12px 14px;font-size:16px;
  width:100%;color:var(--txt);font-family:var(--font-body);display:block;outline:none;transition:.18s}
.fld input.inp:focus{border-color:var(--orange);background:var(--card-2)}
/* De kentekenplaat moet geel blijven, ook tijdens het typen. De regel
   hierboven geldt voor alle velden en is specifieker dan .fld .inp.kt,
   dus zonder deze regel werd de plaat donker zodra je erin klikte.
   Dat je het veld gekozen hebt zie je aan de gloed eromheen. */
.fld input.inp.kt:focus{background:#F0C000;color:#0B0C0F;border-color:#0B0C0F;
  outline:none;box-shadow:0 0 0 3px rgba(239,140,26,.55)}
.fld input.inp::placeholder{color:var(--muted)}
.fld .inp.kt{font-family:var(--font-display);font-size:22px;letter-spacing:.14em;text-align:center;text-transform:uppercase;
  background:#F0C000;color:#0B0C0F;border-color:#0B0C0F;padding:11px 14px}
/* Het voorbeeldtekstje op de gele kentekenplaat. Stond op grijs, en grijs
   op geel is niet te lezen. Solide donkere kleur, met opacity:1 omdat
   sommige browsers placeholders standaard doorzichtig maken. En met
   input in de selector, zodat hij het wint van de algemene regel. */
.fld input.inp.kt::placeholder{color:#5A4A00;opacity:1}
.fld input.inp.kt::-webkit-input-placeholder{color:#5A4A00;opacity:1}
.fld input.inp.kt::-moz-placeholder{color:#5A4A00;opacity:1}
.fld .inp.ph{color:var(--muted)}
.pills{display:flex;flex-wrap:wrap;gap:6px}
.pill{padding:11px 15px;border-radius:99px;font-size:13px;font-weight:600;background:var(--card);border:1px solid var(--line);color:var(--muted)}
.pill.on{background:var(--grad);color:#0B0C0F;border-color:transparent;font-weight:700}
.note{font-size:12.5px;color:var(--muted);background:var(--card);border:1px solid var(--line);border-left:3px solid var(--orange);border-radius:10px;padding:12px 14px;margin-top:18px}

/* ============ IG FEED ============ */
.ig{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.ig div{aspect-ratio:1;border-radius:9px;position:relative;overflow:hidden;border:1px solid var(--line)}
.ig div::after{content:"";position:absolute;inset:0;background:linear-gradient(130deg,rgba(255,255,255,.12),transparent 50%)}

@media(max-width:360px){
  header .logo svg.ddc{height:30px}
  .wrap{padding:0 16px}
}
/* ============ DESKTOP ============ */
@media(min-width:768px){
  section{padding:88px 0}
  .hero{padding:70px 0 80px}
  .hero-cta{display:flex;gap:12px}
  .svc-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .pf-grid{grid-template-columns:repeat(3,1fr);gap:14px}
  /* mozaïek: om de zes tegels één brede, en elke derde een liggende.
     Zie ddc_tegel_vorm() in template-parts/projecttegel.php */
  .pf-grid .pf.pf-groot{grid-column:span 2;aspect-ratio:16/10}
  .pf-grid .pf.pf-groot::before{padding-top:62.5%}
  .pf-grid .pf.pf-breed{grid-column:span 2;aspect-ratio:16/9}
  .pf-grid .pf.pf-breed::before{padding-top:56.25%}
  .pf-grid .pf.pf-hoog{grid-row:span 2;aspect-ratio:3/5}
  .pf-grid .pf.pf-hoog::before{padding-top:166.66%}
  .brands{grid-template-columns:repeat(4,1fr)}
  .f-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}
  .f-bot{grid-template-columns:1fr auto;align-items:center}
}
@media(min-width:1000px){
  :root{--nav-h:96px}
  body{padding-bottom:0}
  .actionbar{display:none}
  .burger{display:none}
  .nav-d{display:flex;align-items:center;gap:6px;margin-left:auto}
  .tagline-hd{display:block}
  .badge-hd{display:block}
  .nav-d a{padding:9px 13px;border-radius:10px;font-size:14.5px;font-weight:600;color:var(--muted);transition:.18s;white-space:nowrap}
  .nav-d a:hover{color:var(--txt);background:var(--card)}
  .nav-d .btn{margin-left:10px;padding:13px 20px 10px;font-size:17px;white-space:nowrap}
  /* .nav-d a hierboven zet alle menulinks op grijs en is specifieker dan
     .btn-p. Daardoor werd de knoptekst grijs op oranje: slecht leesbaar.
     Deze twee regels zetten dat recht. */
  .nav-d a.btn-p{color:#0B0C0F}
  .nav-d a.btn-s{color:var(--txt)}
  .nav-d a.btn-p:hover,.nav-d a.btn-p:focus{color:#0B0C0F;background:var(--grad)}
  .logo{font-size:17px}
  header .logo svg.ddc{height:44px}
  .svc-grid{grid-template-columns:repeat(3,1fr)}
  .svc:hover{border-color:var(--line-2);transform:translateY(-3px)}
  .hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
  .hero-visual{margin-top:0;aspect-ratio:4/5}
  .stats{grid-template-columns:repeat(3,1fr)}
  .split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
  .band{padding:56px 48px;display:grid;grid-template-columns:1.3fr auto;gap:36px;align-items:center}
}

/* ============ WORDPRESS-SPECIFIEK ============ */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--orange);color:#0B0C0F;
  padding:12px 20px;border-radius:0 0 10px 0;font-weight:700}
.skip:focus{left:0}

.note.fout{border-left-color:#E8716B;color:#F0B4B0}

/* lopende tekst uit de WordPress-editor */
.prose{color:var(--muted);font-size:16px;line-height:1.7}
.prose > * + *{margin-top:1.1em}
.prose h2{font-size:clamp(28px,7vw,44px);color:var(--txt);margin-top:1.5em}
.prose h3{color:var(--txt);margin-top:1.4em}
.prose p{color:var(--muted)}
.prose strong{color:var(--txt)}
.prose a{color:var(--orange);text-decoration:underline;text-underline-offset:3px}
.prose ul,.prose ol{padding-left:1.3em}
.prose li+li{margin-top:.5em}
.prose img{border-radius:var(--r);margin:1.4em 0}
.prose blockquote{border-left:3px solid var(--orange);padding-left:18px;font-style:italic}
.prose figure{margin:1.6em 0}
.prose figcaption{font-size:13.5px;color:var(--muted);margin-top:8px}

/* paginering */
.pagination .nav-links{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.page-numbers{display:grid;place-items:center;min-width:44px;height:44px;padding:0 12px;
  border-radius:12px;background:var(--card);border:1px solid var(--line);
  font-family:var(--font-display);font-size:19px;letter-spacing:.03em;color:var(--muted)}
.page-numbers.current{background:var(--grad);color:#0B0C0F;border-color:transparent}
.page-numbers:hover{color:var(--txt)}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* beheerbalk van WordPress niet over de kop laten vallen */
.admin-bar header{top:32px}
@media(max-width:782px){.admin-bar header{top:46px}}

/* tussenformaat: leus tonen zodra er ruimte is, penning pas op groot scherm */
@media(min-width:1180px){ .tagline-hd{height:58px} }
@media(max-width:1279px){ .badge-hd{display:none} }
@media(max-width:999px){ .tagline-hd{display:none} }

/* labels 1 · 2 · 3 in het offerteformulier */
.stap{font-size:12px;color:var(--muted);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;display:block;margin-bottom:12px}

/* ============ CONFIGURATOR ============ */
.cfg-stap{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);
  padding:24px 20px;margin-bottom:16px}
.cfg-kop{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.cfg-n{width:34px;height:34px;border-radius:11px;background:var(--grad);color:#0B0C0F;
  display:grid;place-items:center;font-family:var(--font-display);font-size:20px;line-height:1;flex:none}
.cfg-kop h2{font-size:clamp(26px,6vw,34px);margin:0}
.cfg-hint{font-size:13.5px;color:var(--muted);line-height:1.5}
.cfg-label{display:block;font-size:12px;color:var(--muted);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;margin:22px 0 12px}
.cfg-twee{display:grid;gap:0}

/* keuzeknoppen */
.cfg-keuzes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cfg-keuze{padding:14px 12px;border-radius:14px;background:var(--bg-2);border:1px solid var(--line);
  text-align:left;transition:.16s;min-height:56px}
.cfg-keuze b{display:block;font-size:14px;font-weight:600;color:var(--txt);line-height:1.25}
.cfg-keuze span{display:block;font-size:12px;color:var(--muted);margin-top:3px}
.cfg-keuze.on{background:var(--grad);border-color:transparent}
.cfg-keuze.on b,.cfg-keuze.on span{color:#0B0C0F}
.cfg-keuze:active{transform:scale(.98)}

/* dienstenkeuze */
.cfg-diensten{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cfg-dienst{padding:16px 14px;border-radius:14px;background:var(--bg-2);border:1px solid var(--line);
  text-align:left;transition:.16s;min-height:64px}
.cfg-dienst b{display:block;font-family:var(--font-display);font-size:19px;letter-spacing:.03em;
  color:var(--txt);line-height:1.05}
.cfg-dienst span{display:block;font-size:12px;color:var(--muted);margin-top:4px}
.cfg-dienst.on{background:var(--grad);border-color:transparent}
.cfg-dienst.on b,.cfg-dienst.on span{color:#0B0C0F}
.cfg-dienst:active{transform:scale(.98)}

/* opties */
.cfg-optieblok{margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.cfg-optieblok h3{margin-bottom:12px}
.cfg-opties{display:grid;gap:8px;margin-top:10px}
.cfg-optie{display:block;padding:14px 16px;border-radius:14px;background:var(--bg-2);
  border:1px solid var(--line);text-align:left;transition:.16s}
.cfg-optie b{display:block;font-size:14.5px;font-weight:600;color:var(--txt)}
.cfg-optie span{display:block;font-size:12.5px;color:var(--muted);margin-top:3px}
.cfg-optie i{display:block;font-family:var(--font-display);font-style:normal;font-size:20px;
  letter-spacing:.02em;color:var(--orange);margin-top:7px}
.cfg-optie.on{border-color:var(--orange);background:rgba(239,140,26,.10)}
.cfg-optie.on i{color:var(--orange-2)}
.cfg-optie:active{transform:scale(.99)}

/* aantal */
.cfg-aantal{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 16px;border-radius:14px;background:var(--bg-2);border:1px solid var(--line);margin-top:8px}
.cfg-aantal b{display:block;font-size:14.5px;font-weight:600}
.cfg-aantal span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.cfg-aantal.on{border-color:var(--orange)}
.cfg-teller{display:flex;align-items:center;gap:4px;flex:none}
.cfg-teller button{width:44px;height:44px;border-radius:12px;background:var(--card-2);
  border:1px solid var(--line-2);font-size:20px;color:var(--txt);line-height:1}
.cfg-teller button:active{background:var(--orange);color:#0B0C0F}
.cfg-teller span{min-width:34px;text-align:center;font-family:var(--font-display);font-size:22px}

/* prijs */
.cfg-regels{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--bg-2)}
.cfg-regel{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:13px 16px;border-bottom:1px solid var(--line)}
.cfg-regel:last-child{border-bottom:0}
.cfg-regel span{font-size:14px;color:var(--muted)}
.cfg-regel b{font-family:var(--font-display);font-weight:400;font-size:20px;letter-spacing:.02em;
  color:var(--txt);white-space:nowrap;line-height:1}
.cfg-regel b em{font-family:var(--font-body);font-style:normal;font-size:13px;color:var(--muted)}
.cfg-totaal{margin-top:14px;padding:20px;border-radius:16px;
  background:linear-gradient(150deg,#1C1206,var(--card-2) 62%);border:1px solid rgba(239,140,26,.3)}
.cfg-totaal span{display:block;font-size:12px;color:var(--muted);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase}
.cfg-totaal b{display:block;font-family:var(--font-display);font-weight:400;
  font-size:clamp(38px,10vw,54px);letter-spacing:.02em;line-height:1.05;color:var(--orange);margin-top:6px}
.cfg-totaal i{display:block;font-style:normal;font-size:13px;color:var(--muted);margin-top:4px}

textarea.inp{resize:vertical;min-height:84px;font-family:var(--font-body)}

@media(min-width:640px){
  .cfg-stap{padding:30px 28px}
  .cfg-twee{grid-template-columns:1fr 1fr;gap:0 16px}
  .cfg-keuzes{grid-template-columns:repeat(3,1fr)}
  .cfg-diensten{grid-template-columns:repeat(3,1fr)}
}

/* miniaturen van meegestuurde foto's */
.off-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;margin-top:12px}
.off-thumb{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.off-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.off-thumb button{position:absolute;top:5px;right:5px;width:28px;height:28px;border-radius:50%;
  background:rgba(11,12,15,.85);color:#fff;font-size:17px;line-height:1;display:grid;place-items:center}
.off-thumb button:active{background:var(--orange);color:#0B0C0F}

/* Instagram-strook */
.ig{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.ig a{position:relative;display:block;aspect-ratio:1;border-radius:9px;overflow:hidden;
  border:1px solid var(--line);background:var(--card)}
.ig img{width:100%;height:100%;object-fit:cover;display:block;transition:.3s}
.ig a:hover img{transform:scale(1.05)}
.ig a::after{content:"";position:absolute;inset:0;
  background:linear-gradient(130deg,rgba(255,255,255,.10),transparent 50%)}
.ig-video{position:absolute;top:7px;right:8px;z-index:2;font-size:12px;color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.7)}

/* Smash Balloon binnen onze opmaak houden */
#sb_instagram{padding-bottom:0 !important}
#sb_instagram .sbi_photo_wrap a{border-radius:9px;overflow:hidden}
#sb_instagram .sb_instagram_header,#sb_instagram #sbi_load{display:none !important}

/* ---------- Google reviews ---------- */
.sterren{display:inline-flex;gap:2px;font-size:14px;line-height:1;flex:none}
.sterren .ster{color:var(--line-2)}
.sterren .ster.aan{color:var(--orange)}

/* score naast de badge in de hero */
.badges{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:20px}
.badges .badge{margin-bottom:0}
.gscore{
  display:inline-flex;align-items:center;gap:8px;padding:7px 14px;
  border-radius:999px;background:var(--card);border:1px solid var(--line-2);
  font-size:12.5px;color:var(--muted);text-decoration:none;transition:.2s;
}
a.gscore:hover{border-color:var(--orange);color:var(--txt)}
.gscore b{color:var(--txt);font-weight:700;font-size:13.5px}
/* op smalle schermen alleen sterren en cijfer, anders wordt de rij te lang */
.gscore-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(min-width:560px){
  .gscore-t{position:static;width:auto;height:auto;overflow:visible;clip:auto}
}

/* het blok verderop */
.rev-kop{display:grid;gap:16px;margin-bottom:26px}
.rev-score{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;
  background:var(--card);border:1px solid var(--line);width:fit-content}
.rev-score b{font-family:var(--font-display);font-size:26px;line-height:1;letter-spacing:.01em}
.rev-score span{font-size:12.5px;color:var(--muted)}
.rev-grid{display:grid;gap:10px}
.rev{margin:0;padding:20px;border-radius:14px;background:var(--card);border:1px solid var(--line);
  display:flex;flex-direction:column;gap:12px}
.rev blockquote{margin:0;font-size:15px;line-height:1.62;color:var(--txt)}
.rev figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;
  padding-top:12px;border-top:1px solid var(--line);margin-top:auto}
.rev figcaption b{font-size:14px}
.rev figcaption span{font-size:12px;color:var(--muted)}

@media(min-width:760px){
  .rev-kop{grid-template-columns:1fr auto;align-items:end}
  .rev-grid{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:1080px){
  .rev-grid{grid-template-columns:repeat(3,1fr)}
}


/* ---------- Algemene voorwaarden ----------
   Lange juridische tekst leest alleen als je hem lucht geeft. Genummerde
   leden, een duidelijke inhoudsopgave en artikelkoppen die je kunt
   aanklikken en delen. */
.vw-toc{margin:0 0 40px;padding:22px 24px;border-radius:var(--r);
  background:var(--card);border:1px solid var(--line)}
.vw-toc b{display:block;font-family:var(--font-display);font-size:20px;
  letter-spacing:.03em;margin-bottom:12px}
.vw-toc ol{margin:0;padding-left:1.25em;color:var(--muted);font-size:15px}
.vw-toc li+li{margin-top:7px}
.vw-toc a{color:var(--muted);text-decoration:none}
.vw-toc a:hover,.vw-toc a:focus-visible{color:var(--orange);text-decoration:underline;
  text-underline-offset:3px}

.vw-deel{font-size:clamp(26px,6vw,40px);margin:52px 0 18px;padding-top:26px;
  border-top:1px solid var(--line-2);scroll-margin-top:90px}
.vw-deel:first-of-type{border-top:0;padding-top:0}

.prose h3[id]{scroll-margin-top:90px}
.prose .vw-leden{padding-left:0;list-style:none;counter-reset:lid}
.prose .vw-leden li{position:relative;padding-left:2.4em;counter-increment:lid}
.prose .vw-leden li+li{margin-top:.85em}
.prose .vw-leden li::before{content:counter(lid);position:absolute;left:0;top:.1em;
  width:1.75em;text-align:center;font-family:var(--font-display);font-size:14px;
  line-height:1.5;color:var(--orange);background:var(--card-2);
  border:1px solid var(--line);border-radius:7px}

/* Deel B is lange branchetekst — iets kleiner, zodat deel A het zwaartepunt
   blijft en de pagina niet als een muur oogt. */
.vw-sibon{font-size:15px}
.vw-sibon h3{font-size:20px}

.vw-gegevens{padding:24px;border-radius:var(--r);background:var(--card);
  border:1px solid var(--line)}
.vw-gegevens dl{display:grid;grid-template-columns:1fr;gap:2px 18px;margin:0;font-size:15px}
.vw-gegevens dt{font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted)}
.vw-gegevens dd{margin:0 0 12px;color:var(--txt)}
.vw-gegevens dd a{color:var(--orange);text-decoration:none}
.vw-gegevens dd a:hover{text-decoration:underline;text-underline-offset:3px}
.vw-versie{margin:14px 0 0;padding-top:14px;border-top:1px solid var(--line);
  font-size:13px;color:var(--muted)}

@media(min-width:700px){
  .vw-gegevens dl{grid-template-columns:170px 1fr;align-items:baseline}
  .vw-gegevens dt{padding-top:2px}
}

/* ---------- Spelregels boven de verzendknop ----------
   Moet opvallen zonder te schreeuwen: een omrande kaart met een oranje
   randje links, zodat het niet leest als de kleine lettertjes. */
.spelregels{margin:26px 0 18px;padding:20px 22px;border-radius:var(--r);
  background:var(--card);border:1px solid var(--line-2);
  border-left:3px solid var(--orange)}
.spelregels > b{display:block;font-family:var(--font-display);font-size:19px;
  letter-spacing:.03em;margin-bottom:14px}
.spelregels ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.spelregels li{display:flex;gap:13px;align-items:flex-start;
  font-size:15px;line-height:1.55;color:var(--txt)}
.spelregels li > span{flex:0 0 auto;min-width:46px;padding:5px 8px;text-align:center;
  font-family:var(--font-display);font-size:17px;line-height:1.15;
  color:var(--orange);background:var(--card-2);border:1px solid var(--line);
  border-radius:9px}
.spelregels p{margin:14px 0 0;padding-top:13px;border-top:1px solid var(--line);
  font-size:13.5px;line-height:1.6;color:var(--muted)}
.spelregels a{color:var(--orange);font-weight:600;text-decoration:underline;
  text-underline-offset:3px}