/* ==========================================================================
   Startpagina: hero "de mix" en het bord 'Machineplanning' (alleen geladen op de startpagina, na styles.css).
   Goedgekeurd voorbeeld: ontwerp-merk/hero-interactief/c-mix (stijl.css). Maten en kleuren zijn daaruit overgenomen;
   lettertypen, --accent, --dark, --ink, --muted-dark, --rand en de knopklassen komen uit styles.css.
   Het bord staat al in de HTML (tools/build-site.py, bord_html); assets/js/bord.js maakt het bedienbaar.
   Zonder JavaScript (geen html.js) is het bord verborgen en staat de tabel uit <noscript> er.
   ========================================================================== */
:root {
  --rand-bord: clamp(12px, 1.4vw, 36px);
  --kop-h: 70px;
  /* schaaleenheid voor bord en ordervenster (bordmaat zoals goedgekeurd in c-mix) */
  --u: clamp(.78px, calc(100vw / 1850), 1.03px);
  --blauw: #3b82f6; --blok: #18243a; --blok-rand: #2c3f62; --oranje-blok: #3a2414; --groen: #4cc882; --groen-tekst: #8be6b2; --groen-blok: #14291f;
  --lab: calc(var(--rand) - var(--rand-bord) + 112 * var(--u)); --dag: calc(118 * var(--u));
}
.hero-mix [hidden] { display: none !important; }
.hero-mix .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- hero: kop links, smalle kolom rechts tegen de rand ---------- */
.hero-mix { position: relative; overflow: hidden; color: #fff; padding: clamp(36px, 3.6vw, 84px) 0 clamp(40px, 4.4vw, 110px);   /* ruimte onder het bord: het wordt niet meer afgesneden */
  background: radial-gradient(44vw 30vw at 86% 6%, rgba(255,106,26,.18), transparent 68%), radial-gradient(50vw 34vw at 4% 98%, rgba(96,128,184,.14), transparent 70%), linear-gradient(180deg, #11141a 0%, var(--dark) 55%, #0c0e12 100%); }
.hero-mix::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle, rgba(255,255,255,.9) 1px, transparent 1.4px); background-size: 30px 30px; opacity: .06;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 30%, #000 20%, transparent 78%); mask-image: radial-gradient(ellipse 75% 70% at 50% 30%, #000 20%, transparent 78%); }
.hero-boven { position: relative; z-index: 1; padding: 0 var(--rand); display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, clamp(320px, 27vw, 640px)); column-gap: clamp(40px, 6vw, 180px); align-items: end; transition: opacity .3s; }
.hero-links { display: flex; flex-direction: column; align-items: flex-start; }
.hero-mix .pill { order: -1; font-size: clamp(12px, calc(7.5px + .36vw), 17px); color: var(--accent); margin-bottom: .9em; }
.hero-mix h1 { color: #fff; font-size: clamp(40px, calc(18px + 3vw), 100px); letter-spacing: -.02em; max-width: 15ch; }
.hero-mix h1 em { font-style: normal; color: #fff; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: .05em; text-underline-offset: .2em; text-decoration-skip-ink: none; }
.hero-mix .hero-knoppen { margin-top: clamp(24px, 2vw, 44px); display: flex; gap: 12px; flex-wrap: wrap; }
.hero-mix .knop-groot { padding: .95em 1.75em; font-size: clamp(16px, calc(11px + .42vw), 21px); }
.hero-mix .knop:not(.knop-accent) { border-color: rgba(255,255,255,.55); color: #fff; }
.hero-mix .knop:not(.knop-accent):hover { background: #fff; color: var(--ink); border-color: #fff; }
.hero-rechts { padding-bottom: .2em; }
.hero-mix .hero-tekst { margin: 0; max-width: none; font-size: clamp(16px, calc(11px + .45vw), 22px); color: #d3d8e0; }
.hero-mix .hero-feiten { list-style: none; margin: 1.1em 0 0; padding: .95em 0 0; border-top: 1px solid rgba(255,255,255,.1); display: grid; gap: .5em; font-size: clamp(14px, calc(9px + .4vw), 19px); }
.hero-mix .hero-feiten li { display: flex; align-items: center; gap: .55em; color: #e6e9ee; font-size: 1em; font-weight: 600; line-height: 1.3; }
.hero-mix .hero-feiten li::before { width: 1.15em; height: 1.15em; background-size: 72%; }
.hero-mix .hero-feiten strong { font-weight: 600; }
.hero-mix.focus .hero-rechts { opacity: .25; transition: opacity .3s; }

/* ---------- planbord: gecentreerd, ongeveer driekwart van de breedte ---------- */
.bord-wrap { position: relative; z-index: 1; margin-top: clamp(32px, 3.2vw, 76px); padding: 0 var(--rand-bord); max-width: calc(1500 * var(--u) + 2 * var(--rand-bord)); margin-left: auto; margin-right: auto; }
.bord-wrap::before { content: ""; position: absolute; left: 20%; right: 20%; top: 2%; height: 40%; background: rgba(255,106,26,.45); filter: blur(70px); opacity: .32; border-radius: 50%; pointer-events: none; }
.bord { position: relative; background: #0f1218; border-radius: calc(16 * var(--u));   /* alle hoeken rond */ box-shadow: 0 0 0 1px rgba(255,255,255,.13), 0 1px 0 rgba(255,255,255,.16) inset, 0 30px 80px -30px rgba(0,0,0,.8); }
.bord-balk { display: flex; align-items: center; gap: calc(14 * var(--u)); padding: calc(14 * var(--u)) calc(18 * var(--u)) calc(12 * var(--u)) calc(var(--rand) - var(--rand-bord)); border-bottom: 1px solid rgba(255,255,255,.07); min-height: calc(58 * var(--u)); }
.bord-titel { font-size: calc(21 * var(--u)); font-weight: 700; line-height: 1.08; }
.bord-week { display: inline-flex; align-items: center; gap: calc(10 * var(--u)); font: 600 calc(13.5 * var(--u))/1 var(--sans); color: #e6e9ee; white-space: nowrap; }
.bord-week i { font-style: normal; font-size: calc(10 * var(--u)); color: var(--muted-dark); border: 1px solid rgba(255,255,255,.18); border-radius: 7px; padding: calc(6 * var(--u)) calc(8 * var(--u)); }
.bord-tag { font: 700 calc(11 * var(--u))/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #ffb37f; border: 1px solid rgba(255,140,70,.45); border-radius: 999px; padding: calc(5 * var(--u)) calc(9 * var(--u)); white-space: nowrap; }
/* volgstrook: order W26-0511 loopt door de werkplaats (alleen met JavaScript) */
.volg { margin-left: auto; display: flex; align-items: center; gap: calc(8 * var(--u)); font: 600 calc(12.5 * var(--u))/1 var(--sans); color: var(--muted-dark); min-width: 0; }
.volg-nr { color: #fff; font-weight: 700; white-space: nowrap; }
.volg-hint { white-space: nowrap; }
.volg ol { list-style: none; display: flex; align-items: center; margin: 0; padding: 0; }
.volg li { display: flex; align-items: center; gap: calc(5 * var(--u)); white-space: nowrap; padding: calc(5 * var(--u)) calc(8 * var(--u)); border-radius: 999px; transition: background-color .25s, color .25s; }
.volg li + li::before { content: ""; width: calc(10 * var(--u)); height: 1px; background: rgba(255,255,255,.2); margin: 0 calc(6 * var(--u)) 0 calc(-8 * var(--u)); }
.volg li i { width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%; border: 1.5px solid rgba(255,255,255,.35); flex: none; transition: background-color .25s, border-color .25s; }
.volg li.s1 { color: #ffd2b5; background: rgba(255,106,26,.16); } .volg li.s1 i { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 3px rgba(255,106,26,.25); }
.volg li.s2 { color: var(--groen-tekst); } .volg li.s2 i { border-color: var(--groen); background: var(--groen); }
.volg.gestart .volg-hint { display: none; }
.volg:not(.gestart) ol { opacity: .55; }

.bord-scroll { position: relative; }
@media (min-width: 641px) { .bord-scroll { overflow: clip; } }
.bord-raster { position: relative; display: grid; grid-template-columns: var(--lab) repeat(5, minmax(var(--dag), 1fr)) repeat(2, minmax(calc(64 * var(--u)), .42fr)); padding: calc(6 * var(--u)) calc(10 * var(--u)) 0 0; perspective: 900px; }
.kol-kop { font: 600 calc(12.5 * var(--u))/1 var(--sans); color: var(--muted-dark); text-align: center; padding: calc(8 * var(--u)) 0 calc(10 * var(--u)); white-space: nowrap; }
.kol-kop.vandaag { color: #fff; } .kol-kop i { color: var(--accent); font-style: normal; }
.kol-kop.weekend { color: #8a92a1; }
.rij-kop { padding: calc(10 * var(--u)) 8px calc(10 * var(--u)) calc(var(--rand) - var(--rand-bord)); border-top: 1px solid rgba(255,255,255,.07); }
.rij-kop b { display: block; font: 600 calc(14 * var(--u))/1.2 var(--sans); }
.rij-kop small { font-size: calc(12 * var(--u)); color: var(--muted-dark); }
.cel { display: flex; flex-direction: column; gap: calc(5 * var(--u)); padding: calc(6 * var(--u)) calc(5 * var(--u)) calc(8 * var(--u)); border-top: 1px solid rgba(255,255,255,.07); border-left: 1px solid rgba(255,255,255,.05); min-height: calc(92 * var(--u)); container-type: inline-size; }
.cel.weekend { background: rgba(255,255,255,.025); }
.cap { margin-top: auto; padding-top: 2px; }
.cap-b { display: block; height: 3px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; }
.cap-b i { display: block; height: 100%; background: var(--groen); transform-origin: left; }
.cap.vol .cap-b i { background: var(--accent); }
.cap small { display: block; text-align: right; font-size: calc(11 * var(--u)); color: var(--muted-dark); margin-top: 3px; font-variant-numeric: tabular-nums; }

/* blokken (knoppen) */
.blok { position: relative; display: block; width: 100%; text-align: left; padding: calc(7 * var(--u)) calc(10 * var(--u)) calc(9 * var(--u)) calc(12 * var(--u)); border: 1px solid var(--blok-rand); border-left: 3px solid var(--blauw); border-radius: calc(7 * var(--u)); background: var(--blok); color: #fff; font: calc(12.5 * var(--u))/1.25 var(--sans); cursor: pointer; overflow: hidden;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .22s, background-color .3s, border-color .3s, box-shadow .22s; transform-style: preserve-3d; will-change: transform; }
.bord-raster .blok { margin: 0; } /* styles.css heeft een andere .blok (secties op /beveiliging/) met margin-top */
.blok b { display: block; font-size: calc(13 * var(--u)); font-weight: 700; letter-spacing: .01em; }
.blok span, .blok small { display: block; color: #c9d1dd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: calc(14 * var(--u)); }
.blok small { display: none; font-size: calc(11.5 * var(--u)); color: #aab2bf; margin-top: 1px; }
@container (min-width: 230px) { .blok small { display: block; } } /* brede schermen: ruimte voor de klantnaam */
.blok-vg { position: absolute; left: calc(10 * var(--u)); right: calc(8 * var(--u)); bottom: 3px; height: 2px; background: rgba(255,255,255,.08); border-radius: 2px; overflow: hidden; }
.blok-vg i { display: block; height: 100%; background: var(--groen); transform-origin: left; transition: transform .25s linear; }
.blok-vink { position: absolute; right: calc(6 * var(--u)); top: calc(7 * var(--u)); width: calc(13 * var(--u)); height: calc(13 * var(--u)); border-radius: 50%; opacity: 0; transform: scale(.4); transition: opacity .25s, transform .3s cubic-bezier(.3,1.6,.5,1);
  background: var(--groen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f1115' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 12 10 16 18 8'/%3E%3C/svg%3E") center/77% no-repeat; }
.blok-laser { text-decoration: none; }
.blok.spoed { border-left-color: var(--accent); }
.blok.st-1 { background: var(--oranje-blok); border-color: #6a3c1d; border-left-color: var(--accent); }
.blok.st-2 { background: var(--groen-blok); border-color: #285240; border-left-color: var(--groen); }
.blok.st-2 .blok-vink { opacity: 1; transform: none; }
.blok.extern { border-style: dashed; border-left-style: solid; border-left-color: #8a94a6; background: #1a1e27; }
.blok.extern.st-2 { background: var(--groen-blok); border-color: #285240; border-left-color: var(--groen); }
.blok:hover, .blok.aan { box-shadow: 0 10px 22px -10px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.22); }
.blok:focus-visible { outline: 3px solid #ffb37f; outline-offset: 2px; z-index: 2; }
.blok.volgt { border-color: #ff8a4c; box-shadow: 0 0 0 1px #ff8a4c, 0 0 18px -2px rgba(255,106,26,.55); }
.dim .blok:not(.aan) { opacity: .5; }
.blok-laser { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.blok-laser::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: #ff8a4c; box-shadow: 0 0 10px 2px rgba(255,106,26,.8); }
.blok.scant .blok-laser { opacity: 1; animation: veeg .6s cubic-bezier(.5,0,.5,1) 2 alternate; }
.blok.licht { animation: licht .85s ease-out 3; border-color: #ff8a4c; }
@keyframes veeg { from { transform: translateX(0); } to { transform: translateX(100%); } }
@keyframes licht { 0% { box-shadow: 0 0 0 0 rgba(255,106,26,.95), 0 0 18px rgba(255,106,26,.6); } 100% { box-shadow: 0 0 0 12px rgba(255,106,26,0), 0 0 18px rgba(255,106,26,0); } }

/* zachte puls op één blok tot de bezoeker iets doet (geen demo-cursor) */
.lok { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; border-radius: calc(9 * var(--u)); opacity: 0; transition: opacity .4s; }
.lok::before, .lok::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; border: 2px solid rgba(255,138,76,.9); opacity: 0; }
.lok.aan { opacity: 1; }
.lok.aan::before { animation: lok 2.4s cubic-bezier(.3,0,.3,1) infinite; }
.lok.aan::after { animation: lok 2.4s cubic-bezier(.3,0,.3,1) 1.2s infinite; }
@keyframes lok { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.12, 1.4); } }

/* intro: blokken schuiven gespreid op hun plek, daarna één scan-puls.
   Tot bord.js start (.bord-wacht) staan de blokken al klaar voor de intro; het vangnet maakt ze na 3 s zichtbaar als het script niet draait. */
.js-anim .bord-wacht .blok, .intro-uit .blok { opacity: 0; transform: translate3d(22px,8px,0) scale(.96); transition: none; }
.js-anim .bord-wacht .blok { animation: bord-vangnet .3s ease-out 3s forwards; }
@keyframes bord-vangnet { to { opacity: 1; transform: none; } }
.intro-loopt .blok { transition: transform .7s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 32ms), opacity .45s ease-out calc(var(--i) * 32ms); }
.puls-laag { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.puls-laag i { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; transform: translateX(-10%); opacity: 0; }
.puls-laag i::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 90px; background: linear-gradient(90deg, transparent, rgba(255,106,26,.16) 70%, rgba(255,140,70,.75) 98%, transparent); }
.puls-laag.gaan i { animation: puls 1.3s cubic-bezier(.45,0,.3,1) forwards; }
@keyframes puls { 0% { opacity: 0; transform: translateX(-10%); } 10% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(100%); } }

/* detailkaartje bij hover of toetsenbordfocus */
.kaart { position: absolute; left: 0; top: 0; z-index: 5; width: calc(228 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); border-radius: 12px; pointer-events: none;
  background: rgba(22,26,34,.97); border: 1px solid rgba(255,255,255,.16); box-shadow: 0 18px 40px -14px rgba(0,0,0,.85); font-size: calc(12.5 * var(--u)); line-height: 1.35;
  opacity: 0; visibility: hidden; transition: opacity .16s ease-out, visibility 0s .16s; }
.kaart.aan { opacity: 1; visibility: visible; transition: opacity .16s ease-out; }
.k-nr { font-weight: 700; color: #fff; } .k-nr span { color: #ffb37f; font-weight: 600; }
.k-titel { font: 600 calc(15 * var(--u))/1.25 var(--kop); margin-top: 2px; }
.k-klant, .k-bew { color: #c9d1dd; }
.k-bew { margin-top: 6px; }
.kaart dl { display: flex; gap: calc(18 * var(--u)); margin: 6px 0 8px; }
.kaart dt { color: var(--muted-dark); font-size: calc(11.5 * var(--u)); } .kaart dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.status-pil { display: inline-block; white-space: nowrap; flex: none; font: 700 calc(11.5 * var(--u))/1 var(--sans); padding: calc(5 * var(--u)) calc(9 * var(--u)); border-radius: 999px; background: rgba(59,130,246,.18); color: #b3cdfa; }
.status-pil.s1 { background: rgba(255,106,26,.18); color: #ffb37f; }
.status-pil.s2 { background: rgba(76,200,130,.18); color: var(--groen-tekst); }

.bord-meer { display: none; }

/* ---------- zonder JavaScript: bord verborgen, tabel uit <noscript> ---------- */
html:not(.js) .bord-raster, html:not(.js) .volg { display: none; }
.bord-statisch { padding: 8px calc(18 * var(--u)) 22px calc(var(--rand) - var(--rand-bord)); overflow-x: auto; }
.bord-statisch table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: calc(13 * var(--u)); }
.bord-statisch caption { text-align: left; color: var(--muted-dark); padding: 6px 0 12px; font-size: calc(13.5 * var(--u)); }
.bord-statisch th, .bord-statisch td { text-align: left; vertical-align: top; padding: 10px 8px; border-top: 1px solid rgba(255,255,255,.08); }
.bord-statisch thead th { color: var(--muted-dark); font-weight: 600; border-top: 0; }
.bord-statisch tbody th { font-weight: 600; white-space: nowrap; }
.bord-statisch td span { display: block; margin-bottom: 5px; padding: 6px 9px; border-radius: 7px; background: var(--blok); border-left: 3px solid var(--blauw); }
.bord-statisch td span.s1 { background: var(--oranje-blok); border-left-color: var(--accent); }
.bord-statisch td span.s2 { background: var(--groen-blok); border-left-color: var(--groen); }
.bord-statisch em { font-style: normal; color: var(--muted-dark); }

/* ---------- ordervenster ---------- */
.order { position: fixed; z-index: 20; top: calc(var(--kop-h) + 20px); right: var(--rand); width: calc(380 * var(--u)); max-height: calc(100vh - var(--kop-h) - 40px); overflow: auto; padding: calc(20 * var(--u)) calc(20 * var(--u)) calc(16 * var(--u)); border-radius: calc(18 * var(--u));
  background: #14181f; color: #fff; border: 1px solid rgba(255,255,255,.16); box-shadow: 0 1px 0 rgba(255,255,255,.1) inset, 0 30px 70px -20px rgba(0,0,0,.9); font-size: calc(14 * var(--u)); line-height: 1.5;
  opacity: 0; transform: translate3d(40px,0,0); transition: transform .38s cubic-bezier(.2,.8,.2,1), opacity .25s ease-out; }
.order.open { opacity: 1; transform: none; }
.order-achter { display: none; }
.order-kop { display: flex; justify-content: space-between; gap: 12px; }
.order-nr { font: 700 calc(12 * var(--u))/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #ffb37f; }
.order-titel { font-size: calc(24 * var(--u)); margin-top: 6px; }
.order-klant { color: #c9d1dd; font-size: calc(14 * var(--u)); margin-top: 2px; }
.order-sluit { flex: none; width: calc(40 * var(--u)); height: calc(40 * var(--u)); min-width: 40px; min-height: 40px; border-radius: 10px; border: 1px solid rgba(255,255,255,.25); background: none; color: #fff; font-size: calc(24 * var(--u)); line-height: 1; cursor: pointer; }
.order-sluit:hover { background: rgba(255,255,255,.08); }
.order-status { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: calc(14 * var(--u)); font-size: calc(12 * var(--u)); text-align: right; color: #c9d1dd; font-variant-numeric: tabular-nums; }
.order-balk { height: calc(6 * var(--u)); border-radius: 4px; background: rgba(255,255,255,.08); margin-top: calc(10 * var(--u)); overflow: hidden; }
.order-balk span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #ff9a5c); transform-origin: left; transform: scaleX(0); transition: transform .3s linear; }
.bew-lijst { list-style: none; margin: calc(14 * var(--u)) 0 0; padding: 0; }
.bew { position: relative; display: grid; grid-template-columns: calc(26 * var(--u)) minmax(0,1fr) auto calc(22 * var(--u)); align-items: center; gap: calc(10 * var(--u)); padding: calc(10 * var(--u)) 6px; border-top: 1px solid rgba(255,255,255,.08); overflow: hidden; }
.bew.gekozen { background: rgba(255,255,255,.04); }
.bew-code { height: calc(24 * var(--u)); background: repeating-linear-gradient(90deg, #dfe4ea 0 2px, transparent 2px 4px, #dfe4ea 4px 5px, transparent 5px 7px, #dfe4ea 7px 10px, transparent 10px 11px); opacity: .75; border-radius: 2px; }
.bew-naam { font-weight: 600; font-size: calc(14.5 * var(--u)); line-height: 1.2; }
.bew-naam small { display: block; font-weight: 400; font-size: calc(12 * var(--u)); color: var(--muted-dark); margin-top: 2px; }
.bew-tijd { font-size: calc(12.5 * var(--u)); color: var(--muted-dark); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bew-tijd b { color: #fff; }
.bew-vink { width: calc(20 * var(--u)); height: calc(20 * var(--u)); border-radius: 50%; border: 1.5px solid rgba(255,255,255,.25); transition: background-color .2s, border-color .2s, transform .3s cubic-bezier(.3,1.6,.5,1); }
.bew.s1 .bew-vink { border-color: var(--accent); border-style: dashed; animation: draai 1.4s linear infinite; }
.bew.s2 .bew-vink { border-color: var(--groen); background: var(--groen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f1115' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 12 10 16 18 8'/%3E%3C/svg%3E") center/65% no-repeat; }
.bew.s1 { background: rgba(255,106,26,.07); }
.bew.extern { opacity: .7; } .bew.extern .bew-code { opacity: .2; } .bew.extern .bew-vink { border-style: dotted; }
.bew-laser { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.bew-laser i { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; }
.bew-laser i::before { content: ""; position: absolute; top: 2px; bottom: 2px; left: 0; width: 2px; background: #ff8a4c; box-shadow: 0 0 12px 3px rgba(255,106,26,.75); }
.bew.scant .bew-laser { opacity: 1; } .bew.scant .bew-laser i { animation: veeg .52s cubic-bezier(.5,0,.5,1) forwards; }
@keyframes draai { to { transform: rotate(360deg); } }
.order-acties { display: flex; gap: 10px; margin-top: calc(16 * var(--u)); }
.order-acties .knop { padding: .72em 1.05em; font-size: calc(14.5 * var(--u)); }
.order .knop svg { width: 1.15em; height: 1.15em; }
#scan-knop { flex: 1; }
#scan-knop.klaar { background: var(--groen); border-color: var(--groen); }
.order .knop-licht { border-color: rgba(255,255,255,.4); color: #fff; }
.order .knop-licht:hover { background: #fff; color: var(--ink); border-color: #fff; }
.order .knop:focus-visible, .order-sluit:focus-visible, .opnieuw:focus-visible, .bord-meer:focus-visible { outline: 3px solid #ffb37f; outline-offset: 2px; }
.opnieuw { display: inline-flex; align-items: center; gap: 7px; margin-top: calc(12 * var(--u)); padding: 6px 2px; min-height: 36px; border: 0; background: none; color: #ffb37f; font: 600 calc(13.5 * var(--u))/1.2 var(--sans); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,179,127,.4); }
.opnieuw:hover { color: #fff; }
.opnieuw svg { width: 1.1em; height: 1.1em; }
.order-voetnoot { margin-top: calc(8 * var(--u)); font-size: calc(11.5 * var(--u)); color: var(--muted-dark); }

/* ---------- tussenmaten ---------- */
@media (max-width: 1060px) {
  .hero-boven { grid-template-columns: minmax(0, 1fr); row-gap: 26px; }
  .hero-rechts { max-width: 60ch; }
  .volg-hint { display: none; }
}
@media (max-width: 860px) {
  :root { --kop-h: 64px; }
  .bord-balk { flex-wrap: wrap; }
  .volg { order: 5; width: 100%; margin-left: 0; }
}

/* ---------- telefoon: compacte opzet, bord zijwaarts te vegen, ordervenster als onderlade ---------- */
@media (max-width: 640px) {
  :root { --rand: 20px; --rand-bord: 0px; --lab: 92px; --dag: 116px; --u: 1px; }
  .hero-mix { padding-top: 26px; }
  .hero-mix .pill { font-size: 12px; margin-bottom: 12px; }
  .hero-mix h1 { font-size: 38px; }
  .hero-mix .hero-knoppen { margin-top: 20px; width: 100%; } .hero-mix .hero-knoppen .knop { width: 100%; padding: 14px 20px; font-size: 16px; }
  .hero-mix .hero-tekst { font-size: 16px; }
  .hero-mix .hero-feiten { display: none; } /* ruimte voor het bord */
  .bord-wrap { margin-top: 28px; margin-bottom: 28px; padding: 0 12px; max-width: none; margin-left: 0; margin-right: 0; }   /* telefoon: gelijke marge links en rechts, ruimte eronder */
  .bord-wrap::before { display: none; }
  .bord { padding-bottom: 14px; border-radius: 14px; }   /* telefoon: alle hoeken rond, het bord is een nette kaart */
  .bord-balk { gap: 6px 10px; padding: 12px 14px 10px; }
  .bord-titel { font-size: 18px; } .bord-week { font-size: 12px; order: 3; width: 100%; } .bord-week i { padding: 4px 6px; }
  .volg { order: 6; gap: 6px; }
  .volg li { padding: 4px 5px; } .volg li + li::before { width: 6px; margin: 0 4px 0 -5px; }
  .volg li:not(.s1) span { display: none; } /* alleen de lopende stap met naam */
  .volg:not(.gestart) li:first-child span { display: inline; }
  .bord-scroll { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain; }
  .bord-scroll { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent); }   /* zachte rand rechts: er is meer te zien door te vegen */
  .bord-scroll::-webkit-scrollbar { display: none; }
  .bord-raster { width: max-content; grid-template-columns: var(--lab) repeat(7, var(--dag)); padding-left: 0; perspective: none; }
  .rij-kop, .kol-kop.leeg { position: sticky; left: 0; z-index: 4; background: #0f1218; padding-left: 12px; }
  .rij-kop b { font-size: 13px; } .rij-kop small { font-size: 11px; }
  .cel { scroll-snap-align: start; scroll-margin-left: var(--lab); min-height: 80px; }
  .bord-raster:not(.alle) .niet-mob { display: none; }
  .js .bord-meer { display: block; margin: 10px 14px 0; padding: 10px 14px; min-height: 44px; border-radius: 10px; border: 1px solid rgba(255,255,255,.25); background: none; color: #fff; font: 600 14px/1 var(--sans); cursor: pointer; }
  .bord-statisch { padding-left: 12px; }
  .order { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 84vh; border-radius: 20px 20px 0 0; padding: 12px 18px 20px; transform: translate3d(0,100%,0); opacity: 1; }
  .order::before { content: ""; display: block; width: 44px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.3); margin: 0 auto 12px; }
  .order.open { transform: none; }
  .order-achter { display: block; position: fixed; inset: 0; z-index: 19; background: rgba(0,0,0,.55); opacity: 0; transition: opacity .3s; }
  .order-achter.open { opacity: 1; }
  .order-titel { font-size: 21px; }
  .order-acties .knop { min-height: 48px; }
  .opnieuw { min-height: 44px; }
}

/* ---------- minder beweging: geen intro, puls, kanteling of scan-veeg; het scroll-verhaal staat uit (bord.js) ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-mix *, .hero-mix *::before, .hero-mix *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .blok:hover, .blok.aan { transform: none !important; background: #22324f; }
  .blok.st-1:hover { background: #4a2e18; } .blok.st-2:hover { background: #1a3628; }
  .puls-laag, .lok { display: none; }
}