/* ═══════════════════════════════════════════════════════
   PAKKETPUNT WAALWIJK
   Motief: verzendlabel — streepjescode, gestreepte randen,
   strak logistiek raster. Neutrale chrome, want de logo's
   van de vervoerders brengen zelf al genoeg kleur mee.
   ═══════════════════════════════════════════════════════ */

:root{
  /* Huisstijl Pakketpunt Waalwijk: donkerblauw, merkblauw en goud uit het logo */
  --ink:#0A1B36;
  --ink-2:#12294A;
  --ink-3:#2E4062;
  --mut:#61708C;
  --paper:#fff;
  --paper-2:#F2F5F9;
  --paper-3:#E3E9F1;
  --line:rgba(10,27,54,.13);
  --line-2:rgba(10,27,54,.07);
  --acc:#F3B12A;
  --acc-dark:#1B4A8E;      /* tekstaccent: merkblauw leest beter dan goud */
  --blauw:#1B4A8E;
  --blauw-licht:#2C67B8;
  --groen:#0F9D58;
  --rood:#D6455C;
  --r:14px;
  --r-s:9px;
  --schaduw:0 1px 2px rgba(10,27,54,.06),0 8px 28px -12px rgba(10,27,54,.18);
  --schaduw-l:0 2px 4px rgba(10,27,54,.06),0 24px 60px -24px rgba(10,27,54,.35);
  --f-disp:'Space Grotesk',system-ui,sans-serif;
  --f-body:'Inter',system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--f-body);color:var(--ink);background:var(--paper);
  font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--f-disp);line-height:1.12;letter-spacing:-.02em;margin:0 0 .5em}
h1{font-size:clamp(2.1rem,5.2vw,3.4rem);font-weight:700}
h2{font-size:clamp(1.6rem,3.4vw,2.3rem);font-weight:700}
h3{font-size:1.13rem;font-weight:600;letter-spacing:-.01em}
p{margin:0 0 1em}
svg{width:1.15em;height:1.15em;flex:none}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Niet met left:-9999px verbergen: in RTL rekt dat de pagina 10.000px op */
.skip{position:absolute;inset-inline-start:8px;top:0;transform:translateY(-200%);background:var(--ink);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{transform:translateY(8px)}
:focus-visible{outline:3px solid var(--acc);outline-offset:2px;border-radius:4px}

.wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:20px}
.wrap--smal{max-width:800px}
.section{padding:clamp(48px,7vw,84px) 0}
.section--alt{background:var(--paper-2)}
.section--dark{background:var(--ink);color:#DDE3ED}
.section--dark h2{color:#fff}

.eyebrow{
  display:inline-block;font-family:var(--f-disp);font-size:.73rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.16em;color:var(--acc-dark);margin-bottom:.7em;
}
.eyebrow--licht{color:var(--acc)}
.lead{font-size:1.09rem;color:var(--ink-3)}
.section--dark .lead{color:#B9C3D4}
.sec-head{max-width:640px;margin-bottom:clamp(28px,4vw,44px)}
.sec-head p{color:var(--mut);margin-bottom:0}

/* ── Knoppen ───────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--f-disp);font-weight:600;font-size:.95rem;letter-spacing:-.01em;
  padding:13px 20px;border-radius:var(--r-s);border:1.5px solid transparent;
  text-decoration:none;cursor:pointer;transition:transform .12s,box-shadow .18s,background .18s;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--acc);color:#10233F;box-shadow:0 6px 18px -8px rgba(243,177,42,.9)}
.btn--primary:hover{background:#FFC24D}
.btn--ghost{border-color:var(--line);background:var(--paper);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink);background:var(--paper)}
.section--dark .btn--ghost{background:transparent;border-color:rgba(255,255,255,.28);color:#fff}
.btn--full{width:100%}
.btn--sm{padding:10px 15px;font-size:.88rem}

/* ── Topbar ────────────────────────────────────────── */
.topbar{background:var(--ink);color:#AFBACD;font-size:.82rem}
.topbar__in{display:flex;align-items:center;gap:14px;min-height:38px;flex-wrap:wrap}
.topbar__detail{color:#8B99AF}
.topbar__adres{margin-left:auto;color:#8B99AF}
@media(max-width:720px){.topbar__adres{display:none}}

.status{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-family:var(--f-disp)}
.status--open{color:#4ADE80}
.status--dicht{color:#F98F9F}
.status__dot{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 0 currentColor;animation:puls 2.4s infinite}
@keyframes puls{0%{box-shadow:0 0 0 0 rgba(255,255,255,.45)}70%{box-shadow:0 0 0 7px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
@media(prefers-reduced-motion:reduce){.status__dot{animation:none}}

/* ── Navigatie ─────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-2)}
.nav__in{display:flex;align-items:center;gap:16px;min-height:66px}
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none}
.brand__mark{
  width:38px;height:38px;border-radius:10px;background:var(--ink);color:var(--acc);
  display:grid;place-items:center;flex:none;
}
.brand__mark svg{width:21px;height:21px;stroke-width:1.7}
.brand__logo{height:54px;width:auto;flex:none}
.brand--foot .brand__logo{height:58px}
.brand__txt{display:flex;flex-direction:column;font-family:var(--f-disp);line-height:1.08}
.brand__txt strong{font-size:1.12rem;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.brand__txt span{font-size:.73rem;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:var(--blauw-licht)}
.nav__menu{display:flex;align-items:center;gap:26px;margin-left:auto}
.nav__menu a{text-decoration:none;font-weight:500;font-size:.94rem;color:var(--ink-3)}
.nav__menu a:hover{color:var(--ink)}
.nav__menu .btn{color:#10233F}
.nav__burger{display:none;margin-left:auto;background:none;border:0;padding:10px;cursor:pointer}
.nav__burger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:.2s}
.nav__burger span+span{margin-top:5px}
.nav__burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__burger[aria-expanded=true] span:nth-child(2){opacity:0}
.nav__burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:900px){
  .nav__burger{display:block}
  .nav__menu{
    position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--line);
    flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 18px;display:none;box-shadow:var(--schaduw);
  }
  .nav__menu.open{display:flex}
  .nav__menu a{padding:13px 0;border-bottom:1px solid var(--line-2);font-size:1rem}
  .nav__menu .btn{margin-top:12px;border-bottom:0}
}

/* ── Illustraties ──────────────────────────────────── */
.scene{margin:0 0 clamp(28px,4vw,44px);border-radius:var(--r);overflow:hidden}
.scene img{width:100%;height:auto;display:block}
.scene--dock{margin:0;border:1px solid var(--line);background:var(--paper)}
.scene--zoek{max-width:520px;margin-inline:auto;margin-bottom:8px}
@media(min-width:940px){.scene--balie{max-width:900px;margin-inline:auto}}

/* Achtergrondtekening in de hero: lijnwerk, blijft ver achter de tekst */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:url('/img/scenes/hero-patroon.webp') center top/cover no-repeat;
  opacity:.5;mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);
}
.hero>*{position:relative;z-index:1}
@media(prefers-reduced-motion:no-preference){
  .hero::before{animation:drijf 32s ease-in-out infinite alternate}
}
@keyframes drijf{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-14px,8px,0) scale(1.03)}}

/* ── Eigen illustratie-iconen ──────────────────────────
   Vervangen de lijn-iconen op de plekken waar ze groot genoeg
   staan om te lezen. Kleine UI-glyphs blijven inline SVG. */
/* Standaard gedraagt een illustratie zich als het lijn-icoon dat het vervangt:
   meeschalen met de tekst. Grotere plekken zetten hun eigen maat hieronder. */
.ikoon{display:inline-block;width:1.3em;height:1.3em;flex:none;object-fit:contain;vertical-align:-.25em}
.btn .ikoon{width:1.2em;height:1.2em;vertical-align:-.2em}

/* Op donkere vlakken krijgt de illustratie een licht plaatje onder zich,
   anders verdwijnt het donkerblauwe lijnwerk in de achtergrond. */
.section--dark .ikoon,.bulk-blok .ikoon,.foot .ikoon,.section--dark .btn--ghost .ikoon{
  background:var(--paper-2);border-radius:7px;padding:2px;box-sizing:border-box;
}
.route__feiten .ikoon{width:34px;height:34px;margin-top:-3px}
.bulk-blok>.ikoon{width:36px;height:36px;margin-top:2px}
.foot__note>.ikoon{width:26px;height:26px;margin-top:2px}
.hero__usps .ikoon{width:40px;height:40px}
.weetjes>li>.ikoon{width:28px;height:28px;margin-top:1px}
.matrix td .ikoon{width:26px;height:26px}
.pill .ikoon{width:17px;height:17px;background:none;padding:0}
.duo__kaart h3 .ikoon,.niet__col h3 .ikoon{width:26px;height:26px}
.tt-blok>.ikoon{width:28px;height:28px}
.stappen__ico .ikoon,.regels__ico .ikoon,.feiten__ico .ikoon{width:100%;height:100%}
.regels__ico:has(.ikoon){background:none;width:58px;height:58px;border-radius:0}
.feiten__ico:has(.ikoon){background:none;width:38px;height:38px;border-radius:0}
.stappen__ico .ikoon{width:56px;height:56px}




/* zachte beweging op de illustraties */
@media(prefers-reduced-motion:no-preference){
  .stappen__ico .ikoon,.regels__ico .ikoon,.feiten__ico .ikoon{transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
  .stappen li:hover .ikoon{transform:translateY(-6px) rotate(-3deg)}
  .regels li:hover .ikoon{transform:scale(1.08) rotate(2deg)}
  .feiten li:hover .ikoon{transform:translateY(-3px)}
}

/* ── Onthullen bij scrollen ────────────────────────── */
@media(prefers-reduced-motion:no-preference){
  .onthul{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s cubic-bezier(.22,.61,.36,1)}
  .onthul.is-zichtbaar{opacity:1;transform:none}
}

/* ── Taalkiezer ────────────────────────────────────── */
.taalkiezer{position:relative}
.taalkiezer__knop{
  display:inline-flex;align-items:center;gap:6px;background:none;border:1.5px solid var(--line);
  border-radius:var(--r-s);padding:8px 12px;cursor:pointer;font-family:var(--f-disp);
  font-weight:600;font-size:.85rem;color:var(--ink-3);
}
.taalkiezer__knop:hover{border-color:var(--ink);color:var(--ink)}
.taalkiezer__knop svg{width:16px;height:16px}
.taalkiezer__lijst{
  position:absolute;right:0;top:calc(100% + 6px);min-width:170px;margin:0;padding:6px;
  list-style:none;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-s);
  box-shadow:var(--schaduw);display:none;z-index:80;
}
.taalkiezer__lijst.open{display:block}
.taalkiezer__lijst a{display:block;padding:9px 12px;border-radius:6px;text-decoration:none;font-size:.92rem}
.taalkiezer__lijst a:hover{background:var(--paper-2)}
.taalkiezer__lijst a.is-actief{color:var(--blauw);font-weight:600}
@media(max-width:900px){
  .taalkiezer{margin-top:8px}
  .taalkiezer__knop{display:none}
  .taalkiezer__lijst{position:static;display:block;border:0;box-shadow:none;padding:0;min-width:0}
  .taalkiezer__lijst a{padding:11px 0;border-bottom:1px solid var(--line-2);border-radius:0}
}

/* ── RTL (Arabisch) ────────────────────────────────── */
[dir=rtl] .regels li,[dir=rtl] .tt-blok{border-left:1px solid var(--line);border-right:5px solid var(--acc)}
[dir=rtl] .uitslag--ja{border-left:1px solid var(--line);border-right:5px solid var(--groen)}
[dir=rtl] .uitslag--nee{border-left:1px solid var(--line);border-right:5px solid var(--rood)}
[dir=rtl] .uitslag--info{border-left:1px solid var(--line);border-right:5px solid var(--acc)}
[dir=rtl] .duo__kaart ul{padding-left:0;padding-right:20px}
[dir=rtl] .topbar__adres,[dir=rtl] .nav__menu{margin-left:0;margin-right:auto}
[dir=rtl] .taalkiezer__lijst{right:auto;left:0}
[dir=rtl] .stappen__n{left:auto;right:22px}
/* Tijdvakken als "10:00 - 18:30" niet laten omdraaien door de bidi-algoritmes */
[dir=rtl] .tijden li span:last-child,
[dir=rtl] .foot__dag span:last-child,
[dir=rtl] .route__feiten div,
[dir=rtl] .feiten__tekst strong{unicode-bidi:isolate}
[dir=rtl] .tijden li span:last-child,
[dir=rtl] .foot__dag span:last-child{direction:ltr}

/* ── Hero ──────────────────────────────────────────── */
.hero{
  position:relative;padding-top:clamp(38px,5vw,64px);
  background:
    radial-gradient(900px 380px at 12% -8%,rgba(243,177,42,.16),transparent 65%),
    linear-gradient(var(--paper-2),var(--paper));
}
.hero__in{display:grid;gap:clamp(28px,4vw,52px);padding-bottom:clamp(36px,5vw,56px)}
@media(min-width:960px){.hero__in{grid-template-columns:1.25fr .85fr;align-items:start}}
/* markeerstift-effect onder de laatste regel */
.hero h1 em{
  font-style:normal;color:var(--ink);
  background-image:linear-gradient(transparent 58%,rgba(243,177,42,.55) 58%,rgba(243,177,42,.55) 92%,transparent 92%);
}
.hero__txt .lead{max-width:56ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:11px;margin:26px 0 24px}
.hero__usps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px 28px;font-size:.92rem;color:var(--ink-3)}
.hero__usps li{display:flex;align-items:center;gap:8px}
.hero__usps svg{color:var(--blauw)}
/* czwarty USP = druk etykiet: link, zlote tlo, zeby wyroznial sie od faktow o punkcie */
.hero__usp-nieuw a{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);
  background:rgba(243,177,42,.18);border:1px solid rgba(243,177,42,.55);border-radius:999px;
  padding:6px 14px 6px 8px;font-weight:600;
}
.hero__usp-nieuw a:hover{background:rgba(243,177,42,.32)}
.hero__usp-nieuw svg{color:var(--ink)}

/* verzendlabel-kaart */
.hero__card,.chero__card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--schaduw-l);padding:20px;position:relative;overflow:hidden;
}
.hero__card::before,.chero__card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:7px;
  background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 7px,transparent 7px 11px,var(--ink) 11px 12px,transparent 12px 16px);
  opacity:.85;
}
.hero__card-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:6px;margin-bottom:14px}
.hero__card-top .status--open{color:var(--groen)}
.hero__card-top .status--dicht{color:var(--rood)}
.hero__card-detail{font-size:.86rem;color:var(--mut)}
.hero__card-note{display:flex;gap:8px;align-items:center;font-size:.84rem;color:#8A5B00;background:rgba(243,177,42,.16);padding:9px 12px;border-radius:var(--r-s);margin:12px 0}
.hero__card-adres{display:flex;gap:8px;align-items:center;font-size:.9rem;color:var(--ink-3);margin:14px 0 0}
.hero__card-adres svg{color:var(--blauw)}
.hero__card .btn{margin-top:14px}

.tijden{list-style:none;margin:0;padding:0;border-top:1px dashed var(--line)}
.tijden li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:.93rem}
.tijden li span:first-child{color:var(--ink-3)}
.tijden li.is-dicht{color:var(--mut)}
.tijden li.is-vandaag{
  background:rgba(243,177,42,.13);margin-inline:-10px;padding-inline:10px;border-radius:6px;
  border-bottom-color:transparent;font-weight:600;
}
.tijden li.is-vandaag span:first-child{color:var(--ink)}

/* ── Vervoerderslogo's ─────────────────────────────────
   Blokvormige merken (DPD, UPS) mogen hoger dan brede
   woordmerken, anders ogen ze naast elkaar te klein. */
.logo{width:auto;object-fit:contain;--h:26px;--hb:38px}
.logo--woord{max-height:var(--h)}
.logo--blok{max-height:var(--hb)}
/* logo + plakietka (Mondial Relay = InPost) */
.logo-wrap{display:inline-flex;align-items:center;gap:8px;min-width:0}
.logo-badge{
  flex:none;background:#FFCB04;color:var(--ink);font-family:var(--f-disp);font-weight:700;
  font-size:.7rem;letter-spacing:.04em;padding:3px 7px;border-radius:6px;line-height:1.2;
}
.logostrip__item .logo-badge{font-size:.62rem;padding:2px 5px}

/* ── Logostrip ─────────────────────────────────────── */
.logostrip{border-block:1px solid var(--line);background:var(--paper)}
.logostrip__in{
  display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding-block:14px;
}
@media(min-width:760px){.logostrip__in{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}}
.logostrip__item{
  display:grid;place-items:center;padding:12px 8px;border-radius:var(--r-s);
  filter:grayscale(1);opacity:.62;transition:.2s;
}
.logostrip__item:hover{filter:none;opacity:1;background:var(--paper-2)}
.logostrip__item .logo{--h:28px;--hb:44px}

/* ── Checker ───────────────────────────────────────── */
.checker__opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.checker__opt{
  display:flex;align-items:center;justify-content:center;gap:9px;min-height:62px;padding:10px;
  background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-s);cursor:pointer;
  font-family:var(--f-disp);font-weight:600;font-size:.9rem;color:var(--ink);transition:.15s;
}
.checker__opt:hover{border-color:var(--ink);transform:translateY(-2px)}
.checker__opt.is-actief{border-color:var(--acc);background:rgba(243,177,42,.1);box-shadow:0 0 0 3px rgba(243,177,42,.2)}
.checker__opt .logo{--h:26px;--hb:40px}
.checker__opt span{display:none}
.checker__opt .checker__word{display:block}
@media(max-width:520px){.checker__opt{min-height:56px}}
.checker__out{margin-top:16px}
.checker__out:empty{display:none}
.uitslag{
  display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--paper);box-shadow:var(--schaduw);
}
.uitslag--ja{border-left:5px solid var(--groen)}
.uitslag--nee{border-left:5px solid var(--rood)}
.uitslag--info{border-left:5px solid var(--acc)}
.uitslag__ico{width:38px;height:38px;display:grid;place-items:center;flex:none;color:#fff}
.uitslag__ico img{width:100%;height:100%;object-fit:contain}
.uitslag__ico:not(:has(img)){border-radius:50%}
.uitslag--ja .uitslag__ico:not(:has(img)){background:var(--groen)}
.uitslag--nee .uitslag__ico:not(:has(img)){background:var(--rood)}
.uitslag--info .uitslag__ico:not(:has(img)){background:var(--acc);color:#231700}
.uitslag h3{margin-bottom:.25em}
.uitslag p{margin-bottom:.5em;color:var(--ink-3);font-size:.95rem}
.uitslag a{color:var(--acc-dark);font-weight:600}

/* ── Matrix ────────────────────────────────────────── */
/* position:relative is nodig: anders ontsnappen de .vh-spans in de tabel aan
   de overflow-clip en rekken ze de hele pagina op mobiel op. */
.matrix-scroll{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
.matrix{width:100%;border-collapse:collapse;min-width:560px}
.matrix th,.matrix td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line-2)}
.matrix thead th{
  font-family:var(--f-disp);font-size:.74rem;text-transform:uppercase;letter-spacing:.13em;
  color:var(--mut);font-weight:600;background:var(--paper-2);white-space:nowrap;
}
.matrix tbody tr:last-child th,.matrix tbody tr:last-child td{border-bottom:0}
.matrix tbody tr:hover{background:var(--paper-2)}
/* logo w stałym pudełku: same loga (nazwa tylko dla czytników), wiersze
   równo niezależnie od szerokości znaku */
.matrix thead th:first-child,.matrix tbody th{width:176px}
.matrix tbody th a{display:flex;align-items:center;height:38px;text-decoration:none}
.matrix tbody th .logo{--h:26px;--hb:38px;flex:none;max-width:132px}
.matrix td.ja{color:var(--groen)}
.matrix td.nee{color:#C3CAD6}
.matrix td svg{width:20px;height:20px;stroke-width:2.4}
.matrix__go a{color:var(--mut);display:inline-flex}
.matrix__go a:hover{color:var(--ink)}

.niet{display:grid;gap:16px;margin-top:22px}
@media(min-width:800px){.niet{grid-template-columns:1fr 1fr}}
.niet__col{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.niet__col h3{display:flex;align-items:center;gap:9px}
.niet__col:first-child h3 svg{color:var(--rood)}
.niet__col:last-child h3 svg{color:var(--blauw)}
.niet__col p{color:var(--ink-3);font-size:.95rem}

/* ── Feiten per vervoerder ─────────────────────────── */
.feiten{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:10px}
@media(min-width:640px){.feiten{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}}
.feiten li{
  display:flex;gap:11px;align-items:flex-start;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-s);padding:13px 15px;
}
.feiten__ico{
  width:30px;height:30px;border-radius:8px;flex:none;display:grid;place-items:center;
  background:rgba(27,74,142,.1);color:var(--blauw);
}
.feiten__ico svg{width:17px;height:17px}
.feiten__tekst{display:flex;flex-direction:column;gap:2px}
.feiten__tekst strong{font-family:var(--f-disp);font-size:.93rem}
.feiten__tekst span{font-size:.83rem;color:var(--mut);line-height:1.45}

/* ── Huisregels ────────────────────────────────────── */
.regels{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:14px}
.regels li{
  display:flex;gap:16px;align-items:flex-start;background:var(--paper);
  border:1px solid var(--line);border-left:5px solid var(--acc);border-radius:var(--r);padding:20px 22px;
}
.section--alt .regels li{background:var(--paper)}
.regels__ico{
  width:38px;height:38px;border-radius:10px;background:rgba(243,177,42,.16);color:var(--acc-dark);
  display:grid;place-items:center;flex:none;
}
.regels__ico svg{width:20px;height:20px}
.regels h3{margin-bottom:.3em}
.regels p{margin:0;color:var(--ink-3);font-size:.95rem}

/* ── Twee kolommen: meenemen / let op ──────────────── */
.duo{display:grid;gap:14px;margin:26px 0}
@media(min-width:720px){.duo{grid-template-columns:1fr 1fr}}
.duo__kaart{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px}
/* cennik do Polski: dwie karty z tabelka */
.tarief__sub{color:var(--mut);font-size:.88rem;margin:-4px 0 10px}
.tarief{width:100%;border-collapse:collapse;font-size:.95rem}
.tarief td{padding:8px 0;border-bottom:1px solid var(--line-2)}
.tarief tr:last-child td{border-bottom:0}
.tarief td:last-child{text-align:end;font-weight:700;font-family:var(--f-disp);white-space:nowrap}
.tarief__bron{color:var(--mut);font-size:.86rem;margin-top:6px}
.duo__kaart h3{display:flex;align-items:center;gap:9px;margin-bottom:.7em}
.duo__kaart h3 svg{color:var(--groen)}
.duo__kaart--letop h3 svg{color:#B57400}
.duo__kaart ul{margin:0;padding-left:20px;display:grid;gap:9px}
.duo__kaart li{color:var(--ink-3);font-size:.93rem}

/* ── Bulk aanleveren ───────────────────────────────── */
.bulk-blok{
  display:flex;gap:14px;align-items:flex-start;margin-top:18px;padding:20px 22px;
  border-radius:var(--r);background:var(--ink);color:#C3CDDD;
}
.bulk-blok>svg{color:var(--acc);width:24px;height:24px;margin-top:2px}
.bulk-blok strong{color:#fff;font-family:var(--f-disp);font-size:1.05rem}
.bulk-blok p{font-size:.94rem;margin:.4em 0 .6em}
.bulk-blok a{display:inline-flex;align-items:center;gap:6px;color:var(--acc);font-weight:600;font-size:.93rem;text-decoration:none}
.bulk-blok a svg{width:16px;height:16px}

/* ── Stappen ───────────────────────────────────────── */
.stappen{list-style:none;margin:0;padding:0;display:grid;gap:18px;counter-reset:s}
@media(min-width:820px){.stappen{grid-template-columns:repeat(3,1fr);gap:22px}}
.stappen li{position:relative;background:var(--paper-2);border-radius:var(--r);padding:26px 22px 22px}
.stappen__n{
  position:absolute;top:-14px;left:22px;width:34px;height:34px;border-radius:50%;
  background:var(--ink);color:var(--acc);display:grid;place-items:center;
  font-family:var(--f-disp);font-weight:700;font-size:.95rem;
}
.stappen__ico{display:block;color:var(--blauw);margin:8px 0 12px}
.stappen__ico svg{width:28px;height:28px}
.stappen p{color:var(--ink-3);font-size:.94rem;margin-bottom:0}

/* ── Route ─────────────────────────────────────────── */
.route{display:grid;gap:clamp(26px,4vw,44px)}
@media(min-width:940px){.route{grid-template-columns:1fr 1fr;align-items:center}}
.route__feiten{list-style:none;margin:22px 0;padding:0;display:grid;gap:14px}
.route__feiten li{display:flex;gap:13px;align-items:flex-start;font-size:.94rem;color:#B9C3D4}
.route__feiten svg{color:var(--acc);margin-top:2px}
.route__feiten strong{display:block;color:#fff;font-family:var(--f-disp);font-weight:600;font-size:.95rem}
.route__cta{display:flex;flex-wrap:wrap;gap:11px}
.route__map{border-radius:var(--r);overflow:hidden;border:1px solid rgba(255,255,255,.14);background:#1B2740}
.route__map{position:relative}
.route__map iframe{width:100%;height:380px;border:0;display:block}
.route__profiel{
  display:flex;align-items:center;justify-content:center;gap:7px;padding:11px;
  background:rgba(255,255,255,.08);color:#fff;text-decoration:none;font-size:.9rem;font-weight:600;
  font-family:var(--f-disp);
}
.route__profiel:hover{background:rgba(255,255,255,.16)}
.route__profiel svg{color:var(--acc)}

/* ── Zakelijk teaser ───────────────────────────────── */
.zak-teaser__in{display:grid;gap:26px;align-items:center}
@media(min-width:880px){.zak-teaser__in{grid-template-columns:1.1fr .9fr;gap:48px}}
.zak-teaser p{color:var(--ink-3)}
.zak-teaser__lijst{list-style:none;margin:0;padding:22px;display:grid;gap:12px;background:var(--paper-2);border-radius:var(--r);border:1px solid var(--line-2)}
.zak-teaser__lijst li{display:flex;gap:11px;align-items:center;font-size:.95rem;font-weight:500}
.zak-teaser__lijst svg{color:var(--groen);stroke-width:2.6}

/* ── FAQ ───────────────────────────────────────────── */
.faq details{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-s);margin-bottom:9px;overflow:hidden}
.faq summary{
  padding:15px 44px 15px 18px;cursor:pointer;font-family:var(--f-disp);font-weight:600;
  font-size:1rem;position:relative;list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:18px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--mut);border-bottom:2px solid var(--mut);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq details[open] summary{background:var(--paper-2)}
.faq div{padding:4px 18px 18px}
.faq p{margin:0;color:var(--ink-3);font-size:.95rem}

/* ── Vervoerderspagina ─────────────────────────────── */
.kruimels{font-size:.83rem;color:var(--mut);margin-bottom:18px}
.kruimels a{text-decoration:none}
.kruimels a:hover{text-decoration:underline}
.kruimels span[aria-hidden]{margin-inline:6px;opacity:.5}
.chero{
  padding:clamp(26px,4vw,40px) 0 clamp(40px,5vw,56px);
  background:linear-gradient(var(--paper-2),var(--paper));
  border-bottom:1px solid var(--line-2);
}
.chero__in{display:grid;gap:clamp(26px,4vw,44px)}
@media(min-width:960px){.chero__in{grid-template-columns:1.2fr .8fr;align-items:start}}
.chero__logo{--h:44px;--hb:66px;margin-bottom:18px}
.chero h1{font-size:clamp(1.85rem,4.2vw,2.8rem)}
.chero__badges{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 22px}
.pill{
  display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:99px;
  font-size:.85rem;font-weight:600;font-family:var(--f-disp);
}
.pill svg{width:15px;height:15px;stroke-width:2.6}
.pill--ja{background:rgba(15,157,88,.12);color:#0B7C45}
.pill--nee{background:var(--paper-3);color:var(--mut)}
.chero__cta{display:flex;flex-wrap:wrap;gap:11px}
.chero__adres{display:flex;gap:9px;align-items:flex-start;font-size:.9rem;margin:14px 0 0;color:var(--ink-3)}
.chero__adres svg{color:var(--blauw);margin-top:3px}
.chero__adres>span{display:flex;flex-direction:column;gap:2px}
.chero__adres span span{color:var(--mut);font-size:.85rem}

.weetjes{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:13px}
.weetjes li{display:flex;gap:12px;align-items:flex-start;color:var(--ink-3)}
.weetjes svg{color:var(--groen);stroke-width:2.4;margin-top:4px}
.weetjes--klein li{font-size:.92rem}
.weetjes--klein svg{width:16px;height:16px}
.weetjes a{color:var(--acc-dark);font-weight:600}

.tt-blok{
  display:flex;gap:14px;align-items:flex-start;background:var(--paper-2);
  border:1px solid var(--line);border-left:5px solid var(--acc);border-radius:var(--r);padding:20px;
}
.tt-blok>svg{color:#B57400;width:24px;height:24px;margin-top:2px}
.tt-blok p{font-size:.94rem;color:var(--ink-3);margin:.4em 0 .6em}
.tt-blok a{display:inline-flex;align-items:center;gap:6px;color:var(--blauw);font-weight:600;font-size:.93rem}
.tt-blok a svg{width:16px;height:16px}

.andere{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}
.andere__kaart{
  display:block;padding:20px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r);text-decoration:none;transition:.16s;
}
.andere__kaart:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:var(--schaduw)}
.andere__kaart .logo{--h:26px;--hb:40px;margin-bottom:12px}
.andere__kaart strong{display:block;font-family:var(--f-disp);margin-bottom:3px}
.andere__kaart span{font-size:.87rem;color:var(--mut);line-height:1.5}
.andere__kaart--postnl{border-style:dashed}

/* ── Uitleg / twee kaarten ─────────────────────────── */
.uitleg h1{margin-bottom:.4em}
.uitleg__slot{color:var(--ink-3);font-size:.96rem;margin-top:26px}
.uitleg__slot a{color:var(--acc-dark);font-weight:600}
.twee{display:grid;gap:16px;margin:28px 0}
@media(min-width:780px){.twee{grid-template-columns:1fr 1fr}}
.twee__kaart{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:24px}
.twee__kaart--acc{border-color:var(--acc);box-shadow:0 0 0 3px rgba(243,177,42,.15)}
.twee__label{
  display:inline-block;font-family:var(--f-disp);font-size:.7rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;color:var(--mut);margin-bottom:.8em;
}
.twee__kaart h2{font-size:1.3rem}
.twee__kaart p{font-size:.94rem;color:var(--ink-3)}

/* ── Zakelijke pagina ──────────────────────────────── */
.zak-hero{background:linear-gradient(var(--paper-2),var(--paper));padding-top:clamp(26px,4vw,40px)}
.zak-hero__in{display:grid;gap:clamp(26px,4vw,44px)}
@media(min-width:940px){.zak-hero__in{grid-template-columns:1.15fr .85fr;align-items:center}}
.zak-hero__cijfers{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.zak-hero__cijfers li{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.zak-hero__cijfers strong{display:block;font-family:var(--f-disp);font-size:1.75rem;font-weight:700;color:var(--acc-dark);line-height:1}
.zak-hero__cijfers span{display:block;font-size:.85rem;color:var(--mut);margin-top:6px}


/* ── Footer ────────────────────────────────────────── */
.foot{background:var(--ink);color:#9FACC2;font-size:.9rem;padding-top:clamp(40px,5vw,60px)}
.foot__grid{display:grid;gap:30px;padding-bottom:34px}
@media(min-width:820px){.foot__grid{grid-template-columns:1.5fr 1fr 1.1fr 1fr}}
.foot h3{color:#fff;font-size:.82rem;text-transform:uppercase;letter-spacing:.13em;margin-bottom:1.1em}
.foot__col{display:flex;flex-direction:column;gap:8px}
.foot__col a{text-decoration:none;color:#9FACC2}
.foot__col a:hover{color:var(--acc)}
.foot__col p{margin:0;line-height:1.6}
.brand--foot .brand__mark{background:rgba(255,255,255,.08)}
.brand--foot .brand__txt strong{color:#fff}
.brand--foot .brand__txt span{color:var(--acc)}
.brand--foot{margin-bottom:6px}
.foot__contact{color:#8FA0BC;font-size:.86rem}
.foot__dag{display:flex;justify-content:space-between;gap:12px}
.foot__dag.is-vandaag{color:#fff;font-weight:600}
.foot__note{
  display:flex;gap:12px;align-items:flex-start;border-top:1px solid rgba(255,255,255,.1);
  padding:20px 20px 22px;font-size:.86rem;line-height:1.6;
}
.foot__note svg{color:var(--acc);width:20px;height:20px;margin-top:2px;flex:none}
.foot__note p{margin:0}
.foot__note strong{color:#fff}
.foot__bottom{border-top:1px solid rgba(255,255,255,.1);padding:16px 0;font-size:.83rem}
.foot__bottom-in{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between}
.foot__bottom a{color:var(--acc);text-decoration:none}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ── label printen teaser ── */
/* baner "nieuw": druk etykiet zaraz pod hero, dwie kolumny na desktopie */
.section--nieuw{padding:clamp(36px,5vw,56px) 0;background:linear-gradient(120deg,var(--ink) 0%,var(--ink-2) 55%,var(--blauw) 100%)}
.nieuw__in{display:grid;gap:26px;align-items:center}
@media(min-width:860px){.nieuw__in{grid-template-columns:1.15fr 1fr;gap:56px}}
.nieuw__txt h2{margin:14px 0 10px}
.nieuw__txt .lead{margin:0}
.badge-nieuw{
  display:inline-block;background:var(--acc);color:var(--ink);font-family:var(--f-disp);
  font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;
}
.section--nieuw .print-chips{margin-bottom:18px}
.section--nieuw .print-chips li{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#B9C3D4}
.section--nieuw .print-chips strong{color:#fff}
.section--nieuw .print-app{color:#B9C3D4}

.print-chips{display:flex;flex-wrap:wrap;gap:12px;list-style:none;padding:0;margin:0 0 22px}
.print-chips li{background:var(--paper-2);border:1px solid var(--line-2);border-radius:12px;padding:12px 18px;font-size:.95rem;color:var(--mut)}
.print-chips strong{color:var(--ink);font-size:1.15rem;margin-inline-end:6px}
.print-app{color:var(--mut);font-size:.9rem;margin-top:14px}

/* ── popup: nieuw, zelf labels printen ── */
.popup{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:18px}
.popup[hidden]{display:none}
.popup__achter{position:absolute;inset:0;background:rgba(10,27,54,.55)}
.popup__kaart{position:relative;background:var(--paper);border-radius:var(--r);box-shadow:var(--schaduw-l);max-width:430px;width:100%;padding:26px 26px 24px;text-align:center;max-height:calc(100vh - 36px);overflow:auto}
.popup__x{position:absolute;top:10px;inset-inline-end:10px;width:38px;height:38px;border:0;border-radius:50%;background:var(--paper-2);color:var(--ink);font-size:22px;line-height:1;cursor:pointer}
.popup__x:hover{background:var(--paper-3)}
.popup__beeld{width:180px;height:auto;margin:2px auto 12px;border-radius:var(--r-s)}
.popup__badge{display:inline-block;background:var(--acc);color:var(--ink);font-family:var(--f-disp);font-weight:700;font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;padding:4px 13px;border-radius:99px;margin-bottom:10px}
.popup__kaart h2{font-size:1.4rem;margin-bottom:.35em}
.popup__kaart p{color:var(--mut);font-size:.95rem}
.popup__cta{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.popup__cta .btn{justify-content:center}
html.popup-open{overflow:hidden}
@media(prefers-reduced-motion:no-preference){
  .popup__kaart{animation:popIn .35s cubic-bezier(.34,1.4,.64,1)}
  @keyframes popIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
}

/* ── printen-pagina ── */
.phero{padding-top:clamp(26px,4vw,46px)}
.phero__in{display:grid;gap:32px;align-items:center;margin-top:10px}
@media(min-width:940px){.phero__in{grid-template-columns:1.05fr .95fr;gap:44px}}
.phero .print-chips{margin-top:22px}
.scene--print,.scene--thuis{margin:0;border:1px solid var(--line);background:var(--paper)}
@media(min-width:820px){.stappen.stappen--vier{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.stappen.stappen--vier{grid-template-columns:repeat(4,1fr)}}
.hoe-noot{display:flex;gap:10px;align-items:flex-start;justify-content:center;color:var(--mut);font-size:.95rem;margin:26px auto 0;max-width:640px}
.hoe-noot .ikoon,.hoe-noot svg{width:22px;height:22px;flex:none}
.print-feats{list-style:none;margin:0;padding:0;display:grid;gap:18px}
@media(min-width:820px){.print-feats{grid-template-columns:repeat(2,1fr);gap:22px}}
.print-feats li{display:flex;gap:16px;background:var(--paper-2);border-radius:var(--r);padding:20px}
.print-feats__ico{flex:none;width:52px;height:52px}
.print-feats__ico .ikoon,.print-feats__ico svg{width:100%;height:100%}
.print-feats h3{margin-bottom:.25em}
.print-feats p{margin:0;color:var(--mut);font-size:.95rem}
.thuis{display:grid;gap:30px;align-items:center}
@media(min-width:940px){.thuis{grid-template-columns:1fr 1fr;gap:48px}}
.slot-cta{text-align:center}
.slot-cta p{color:#DDE3ED}
.btn--groot{font-size:1.06rem;padding:15px 28px}
.slot-cta__noot{font-size:.9rem;opacity:.75;margin-top:14px}
.print-knoppen{display:flex;gap:12px;flex-wrap:wrap}

/* ── DHL: duidelijk doorgestreept - hebben we NIET, maar wel klikbaar (klik toont uitleg) ── */
.checker__opt--dhl{background:var(--paper-2);border-style:dashed;color:var(--mut)}
.checker__opt--dhl .checker__word{text-decoration:line-through;text-decoration-color:var(--rood);text-decoration-thickness:2px}
.checker__opt--dhl::before{content:'✕';color:var(--rood);font-weight:700;font-size:.85em}
.checker__opt--dhl:hover{border-color:var(--rood)}
.checker__opt--dhl.is-actief{border-color:var(--rood);background:rgba(214,69,92,.07);box-shadow:0 0 0 3px rgba(214,69,92,.15)}

/* ── credit bouwer ── */
.foot__made{opacity:.7}
.foot__made a{border-bottom:1px solid transparent}
.foot__made a:hover{border-bottom-color:var(--acc)}