/* ==========================================================================
   richting C · horeca.css · de horeca-pagina
   Bovenop c.css, sheet.css en audit.css. Beweging die een gebaar volgt staat niet hier maar in
   horeca.js (Motion.spring): een CSS-transition kun je niet vastpakken. Hier staat alleen directe
   feedback bij aanraken en het wisselen van toestanden zonder vinger erachter.
   Klassen op <html>, gezet voor de eerste verf (kop van horeca.html):
   hc = JavaScript draait · hc-live = er mag beweging zijn · static = geen beweging.
   Let op: .wrap draagt de zijmarges. Zet op een element met .wrap nooit een padding-shorthand.
   ========================================================================== */

/* Het smalle koplettertype komt later binnen dan de brede terugval; zonder deze tussenstap breekt de kop
   bij het laden in meer regels en verspringt de held (zelfde aanpak als op de hub en de kiezer). */
@font-face{font-family:"Archivo terugval";src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Bold"),local("Helvetica-Bold"),local("Arial");font-weight:600 900;size-adjust:76%}
:root{--display:'Archivo','Archivo terugval',sans-serif;
  --hc-red:#FF8B8B} /* opzeggen: het rood van de site, iets zachter zodat het naast lime en amber past */
html.static .pulse{animation:none}
.nowrap{white-space:nowrap}

/* ---------- wat de hub ook heeft: de knop met zijn geruststelling, de beloftes, de afsluiter per sectie ---------- */
.nav-note{display:none;font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-55);white-space:nowrap;margin-right:6px}
@media(min-width:1280px){.nav-note{display:inline}}
@media(max-width:700px){.nav-cta-m{display:none!important}} /* op een telefoon staat de knop al vast onderin */
.cta-note{font:500 11.5px/1.7 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-55)}
.cta-proof{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;font:500 13px/1.65 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg)}
.cta-proof .led{margin-right:12px;transform:translateY(-1px)}
.cta-proof-t > span{white-space:nowrap}
.cta-proof-t > span:not(:last-child):not([hidden])::after{content:"·";margin-left:.8em;margin-right:.3em;color:var(--fg-55)} /* het scheidingsteken sluit een regel af, het begint er nooit een */
.cta-proof-t > span:nth-last-child(2):has(+ [hidden])::after{content:none}
.cta-proof [hidden]{display:none}
@media(max-width:560px){.cta-proof-t > span{display:block}.cta-proof-t > span::after{content:none!important}} /* op een telefoon elke belofte op een eigen regel, zonder los scheidingsteken */
@media(max-width:400px){.cta-proof{font-size:12px;letter-spacing:.04em}.cta-proof-t > span{white-space:normal}}
.promises{list-style:none;margin:clamp(22px,2.6vw,32px) 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.promises li{display:grid;grid-template-columns:20px minmax(0,1fr);align-items:baseline;font-family:var(--display);font-weight:700;font-stretch:84%;font-variation-settings:'wdth' 84;
  text-transform:uppercase;letter-spacing:.015em;font-size:clamp(20px,1.9vw,27px);line-height:1.12}
.promises li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px rgba(198,242,78,.16);transform:translateY(-.18em)}
.cta-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px clamp(24px,4vw,64px);align-items:center;
  margin-top:clamp(36px,4.6vw,72px);padding-top:clamp(24px,3vw,40px);border-top:1px solid var(--line)}
.cta-line{font-family:var(--display);font-weight:800;font-stretch:76%;font-variation-settings:'wdth' 76;text-transform:uppercase;letter-spacing:.008em;
  font-size:clamp(26px,3vw,44px);line-height:1;max-width:24ch;text-wrap:balance}
.cta-act{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.cta-act .cta-note{max-width:44ch}
@media(max-width:860px){.cta-row{grid-template-columns:minmax(0,1fr)}.cta-act .btn{width:100%}}
.zone-ivory .btn-lime{background:var(--ink);color:var(--ivory)} /* op ivoor draagt inkt de knop; lime houdt daar geen rand */
@media(hover:hover) and (pointer:fine){.zone-ivory .btn-lime:hover{box-shadow:0 14px 30px -14px rgba(10,14,22,.75)}}
.zone-ivory .led{background:var(--cobalt-deep);box-shadow:0 0 0 3px rgba(20,54,245,.14)}
.zone-ivory .stamp-vb{border-color:rgba(20,54,245,.55)}
.sec-head .aside{min-width:0}
.sticky-cta .btn{flex-direction:column;gap:3px;min-height:54px;line-height:1.1}
.sticky-cta .btn small{font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;opacity:.72}
.sticky-cta.is-hot{will-change:transform}
/* een donker instrument in een leeszone: de kleuren van het donker terug, binnen dit ene vlak */
.hc-dark{--fg:#F4F3EF;--fg-70:rgba(244,243,239,.74);--fg-55:rgba(244,243,239,.6);--line:rgba(140,162,255,.2);--line-soft:rgba(140,162,255,.11);--panel:#0E1420;--panel-2:#131B2B;--peri:#8CA2FF;
  color:var(--fg);color-scheme:dark}
.zone-ivory .panel.hc-dark{background:linear-gradient(180deg,#121A2A,#0C111B);border-color:rgba(10,14,22,.9);box-shadow:inset 0 1px 0 rgba(244,243,239,.1),0 44px 90px -44px rgba(10,14,22,.7),0 18px 36px -24px rgba(10,14,22,.5)}
.zone-ivory .hc-dark .num{color:var(--lime)}
.zone-ivory .hc-dark .stamp-vb{border-color:rgba(140,162,255,.7)}
.zone-ivory .hc-dark :focus-visible{outline-color:var(--lime)}
/* de ene eerlijke regel van deze pagina: rustig, niet weggestopt */
.hc-eerlijk{margin-top:clamp(18px,2vw,26px);max-width:74ch;font-size:15px;line-height:1.55;color:var(--fg-70);padding-left:16px;border-left:2px solid var(--line)}

/* ==========================================================================
   1 · held
   ========================================================================== */
.hc-hero{position:relative;isolation:isolate;padding-bottom:clamp(44px,5vw,88px)}
.hc-hero-plane{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(244,243,239,.06),rgba(244,243,239,.014));
  border-bottom:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(244,243,239,.06)}
.hc-hero .hero-grid{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(28px,4vw,72px);align-items:center}
.hc-hero h1{font-size:clamp(46px,6.1vw,98px);margin-top:18px}
.hc-hero .lede{margin-top:clamp(18px,2.2vw,28px)}
.hc-hero .cta-proof{margin-top:20px}
.hc-hero .cta-note{margin-top:8px}
@media(max-width:940px){.hc-hero .hero-grid{grid-template-columns:minmax(0,1fr)}.hc-hero h1{font-size:clamp(46px,12.4vw,96px)}}
@media(max-width:560px){.hc-hero .hero-ctas .btn{width:100%}}

/* de stroom: drie banen, één per zaak, die van rechts naar links langs een leeslijn lopen.
   Wat links van de lijn staat is gelezen. De band zelf verschuift in horeca.js met één transform. */
.st{margin:0;min-width:0;--cw:196px;--lh:112px;--tagh:28px;--scan:64%}
.st-panel{overflow:hidden;box-shadow:inset 0 1px 0 rgba(244,243,239,.08),0 50px 100px -50px rgba(20,54,245,.5),0 30px 60px -44px rgba(0,0,0,.9)}
.st-bar{display:flex;align-items:center;gap:8px 12px;padding:12px 14px 12px 18px;border-bottom:1px solid var(--line-soft);font:500 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-70)}
.st-bar-t{display:inline-flex;align-items:center;gap:10px;margin-right:auto;white-space:nowrap}
.st-bar-t b{font-weight:500;color:var(--fg-55)}
.st-pause{display:none}
html.hc-live .st-pause{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px 0 12px;border:1px solid var(--line);border-radius:999px;background:rgba(10,14,22,.55);color:var(--fg-70);
  font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;flex:none;cursor:pointer;position:relative;transition:transform .1s ease-out,color .15s,border-color .15s}
.st-pause::after{content:"";position:absolute;inset:-6px}
.st-pause svg{width:10px;height:10px;fill:currentColor;flex:none}
.st-pause .ic-play,.st-pause[data-state="paused"] .ic-pause{display:none}
.st-pause[data-state="paused"] .ic-play{display:block}
.st-pause:active{transform:scale(.96)}
@media(hover:hover) and (pointer:fine){.st-pause:hover{color:var(--fg);border-color:rgba(140,162,255,.5)}}

.st-view{position:relative;overflow:hidden;height:calc(var(--lh) * 3);outline-offset:-3px;background:
  linear-gradient(180deg,transparent calc(var(--lh) - 1px),var(--line-soft) calc(var(--lh) - 1px),var(--line-soft) var(--lh),transparent var(--lh)) 0 0/100% var(--lh)}
html.hc .st-view{touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.st-track{position:absolute;left:0;top:0;display:grid;grid-template-rows:repeat(3,var(--lh))}
.st.is-hot .st-track{will-change:transform}
.st-lane{display:flex;height:var(--lh)}
.st-cell{position:relative;flex:none;width:var(--cw);height:var(--lh);padding:calc(var(--tagh) + 8px) 14px 0 16px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto;align-content:start;gap:1px 10px;
  border-left:1px solid var(--line-soft)}
.st-cell i{font:500 10.5px/1.5 var(--mono);font-style:normal;letter-spacing:.06em;color:var(--fg-55);white-space:nowrap}
.st-cell i + i{text-align:right;letter-spacing:.02em}
.st-cell b{grid-column:1/3;font:600 14.5px/1.3 var(--body);color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-cell > span{font-size:12.5px;line-height:1.4;color:var(--fg-55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-cell em{font:500 13px/1.4 var(--mono);font-style:normal;font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--fg-70);white-space:nowrap;text-align:right}
/* een treffer: het vlak krijgt kleur, het bedrag ook, en het label staat erboven. Een toestand, geen gebaar: korte overgang. */
.st-cell::before{content:"";position:absolute;left:5px;right:4px;top:calc(var(--tagh) + 2px);bottom:6px;border-radius:8px;border:1px solid transparent;opacity:0;transition:opacity .35s ease;pointer-events:none}
.st-cell[data-g="a"]::before,.st-cell[data-g="c"]::before{background:rgba(198,242,78,.09);border-color:rgba(198,242,78,.55)}
.st-cell[data-g="b"]::before{background:rgba(255,178,36,.09);border-color:rgba(255,178,36,.55)}
.st-cell.is-lit::before{opacity:1}
.st-cell.is-lit em{color:var(--lime)}
.st-cell[data-g="b"].is-lit em{color:var(--amber)}
.st-cell.is-lit i + i{color:var(--fg)}
.st-tag{position:absolute;top:4px;right:4px;z-index:2;text-decoration:none;font:600 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;padding:6px 8px 5px;border-radius:3px;
  opacity:0;transform:translateY(5px);transition:opacity .3s ease,transform .45s var(--ease)}
.st-tag-lime{background:var(--lime);color:var(--ink)}
.st-tag-amber{background:var(--amber);color:var(--ink);right:auto;left:5px}
.st-cell.is-lit .st-tag{opacity:1;transform:none}
html.static .st-cell::before,html.static .st-tag{transition:none}
/* de namen van de zaken staan vast, de boekingen lopen eronderdoor */
.st-names{position:absolute;left:0;top:0;bottom:0;z-index:3;display:grid;grid-template-rows:repeat(3,var(--lh));pointer-events:none}
.st-names span{align-self:start;margin:5px 0 0 0;padding:5px 10px 4px 16px;font:600 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--peri);white-space:nowrap;
  background:linear-gradient(90deg,#0F1626 78%,rgba(15,22,38,0));padding-right:28px}
.st-unread{position:absolute;top:0;bottom:0;left:var(--scan);right:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(12,17,28,.5),rgba(12,17,28,.78))}
.st-scan{position:absolute;top:0;bottom:0;left:var(--scan);width:2px;margin-left:-1px;z-index:2;pointer-events:none;background:var(--lime);box-shadow:0 0 14px rgba(198,242,78,.7)}
.st-scan::before,.st-scan::after{content:"";position:absolute;left:-4px;border:5px solid transparent}
.st-scan::before{top:0;border-top-color:var(--lime)}
.st-scan::after{bottom:0;border-bottom-color:var(--lime)}
.st-foot{display:flex;align-items:center;gap:6px 18px;flex-wrap:wrap;padding:12px 18px;border-top:1px solid var(--line-soft);font:500 10.5px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-55)}
.st-count b{display:inline-block;min-width:3ch;font-weight:500;color:var(--fg);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.st-count + .st-count b{color:var(--lime);min-width:2ch}
.st-hint{margin-left:auto;white-space:nowrap}
.st-hint-s{display:none}
html:not(.hc) .st-hint,html:not(.hc) .st-count{display:none}
@media(max-width:560px){
  .st{--cw:164px;--lh:96px;--scan:72%}
  .st-bar{padding:10px 12px 10px 14px;flex-wrap:wrap}
  .st-bar .stamp{order:3;flex-basis:100%;justify-content:flex-start;border:0;padding:0;background:none;letter-spacing:.1em;white-space:normal}
  .st-cell{padding-left:14px;padding-right:12px}
  .st-cell b{font-size:14px}
  .st-names span{padding-left:14px}
  .st-foot{padding:10px 14px;gap:6px 14px}
  .st-hint-l{display:none}.st-hint-s{display:inline}
}

/* ==========================================================================
   2 · speel de audit
   ========================================================================== */
.za-legend{flex-direction:row!important;gap:18px!important;font:500 11px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-70);padding-bottom:6px}
.za-legend span{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.za-dot{width:9px;height:9px;border-radius:50%;flex:none;display:inline-block}
.za-dot-lime{background:var(--lime);box-shadow:0 0 0 3px rgba(198,242,78,.16)}
.za-dot-amber{background:var(--amber);box-shadow:0 0 0 3px rgba(255,178,36,.18)}

.za{--rh:42px;--rows:15;padding:0;overflow:hidden;box-shadow:inset 0 1px 0 rgba(244,243,239,.08),0 50px 100px -56px rgba(20,54,245,.45),0 30px 60px -44px rgba(0,0,0,.9)}
.za-top{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:14px clamp(24px,3.4vw,56px);align-items:end;padding:clamp(18px,2.2vw,28px) clamp(18px,2.4vw,32px);border-bottom:1px solid var(--line-soft)}
.za-tot{display:flex;flex-direction:column;gap:6px;min-width:0}
.za-tot-l{font:500 10.5px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-55);white-space:nowrap}
.za-tot-n{font-size:clamp(30px,3.4vw,52px);white-space:nowrap;display:inline-block;min-width:calc(8 * (1ch - .04em))} /* de breedte ligt vast: het tellen verschuift niets */
.za-tot-f .za-tot-n{min-width:calc(1 * (1ch - .04em));color:var(--fg)}
.za-tot-f{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;align-items:baseline}
.za-tot-f .za-tot-l{grid-column:1/3}
.za-tot-s{font:500 11px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-55)}
.za-stamp{align-self:start;justify-self:end}
.za-body{display:grid;grid-template-columns:minmax(0,348px) minmax(0,1fr)}
.za-rules-w{padding:clamp(16px,1.8vw,24px) clamp(18px,2.4vw,32px) clamp(18px,2vw,28px);border-right:1px solid var(--line-soft);min-width:0}
.za-h{font:500 10.5px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-55);margin-bottom:6px}
.za-rules{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.za-rules li + li{border-top:1px solid var(--line-soft)}

/* de schakelaar: de hele regel is de knop, de knop rechts is het ding dat je verschuift.
   De stand van de knop loopt op een veer in horeca.js; hier staat alleen wat er direct bij aanraken gebeurt. */
.za-sw{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:center;width:100%;padding:15px 0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:pan-y;-webkit-user-select:none;user-select:none;border-radius:6px}
.za-sw-t{display:flex;flex-direction:column;gap:5px;min-width:0}
.za-sw-t b{font-family:var(--display);font-weight:700;font-stretch:84%;font-variation-settings:'wdth' 84;text-transform:uppercase;letter-spacing:.015em;font-size:19px;line-height:1.1;color:var(--fg-70);transition:color .18s}
.za-sw-t small{font-size:13.5px;line-height:1.45;color:var(--fg-55)}
.za-sw[aria-checked="true"] .za-sw-t b{color:var(--fg)}
.za-sw-track{position:relative;display:block;width:52px;height:32px;border-radius:16px;flex:none;background:rgba(244,243,239,.13);box-shadow:inset 0 0 0 1px var(--line)}
.za-sw-fill{position:absolute;inset:0;border-radius:inherit;background:var(--lime);opacity:0}
.za-sw-knob{position:absolute;left:3px;top:3px;width:26px;height:26px;border-radius:13px;background:var(--ivory);box-shadow:0 2px 6px rgba(0,0,0,.5);transform-origin:50% 50%}
.za-sw[aria-checked="true"] .za-sw-knob{background:var(--ink)}
@media(hover:hover) and (pointer:fine){.za-sw:hover .za-sw-t b{color:var(--fg)}.za-sw:hover .za-sw-track{box-shadow:inset 0 0 0 1px rgba(140,162,255,.5)}}
html:not(.hc) .za-sw-track{display:none}
html:not(.hc) .za-sw{cursor:default}

/* het grootboek: rijen die op een veer van plek wisselen. De hoogte ligt vast, dus er verspringt niets;
   wat door de zeef valt, zakt onder de rand uit beeld. */
.za-led{position:relative;min-width:0;display:flex;flex-direction:column;background:#0C111B} /* een eigen, dichte ondergrond: rijen die elkaar kruisen dekken elkaar af in plaats van door elkaar heen te lopen */
.za-cols,.za-row{display:grid;grid-template-columns:78px 116px 58px minmax(0,1fr) 104px;gap:0 14px;align-items:center;padding:0 clamp(16px,2vw,28px) 0 clamp(18px,2vw,28px)}
.za-cols{height:40px;font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-55);border-bottom:1px solid var(--line-soft);flex:none}
.za-cols span:last-child{text-align:right}
.za-stage{position:relative;overflow:hidden;display:none}
html.hc .za-stage{display:block;height:calc(var(--rh) * var(--rows) + 96px)} /* vijftien treffers met hun tussenruimtes passen erin als alle zes regels aan staan */
.za-stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:44px;z-index:4;pointer-events:none;background:linear-gradient(180deg,rgba(12,17,27,0),rgba(12,17,27,.97))}
html.hc .za-static{display:none}
html:not(.hc) .za-cols{display:none}
.za-static{list-style:none;margin:0;padding:6px clamp(18px,2vw,28px) 18px;display:flex;flex-direction:column}
.za-static li{display:grid;gap:6px;padding:16px 0;border-top:1px solid var(--line-soft);justify-items:start}
.za-static li:first-child{border-top:0}
.za-static b{font-family:var(--display);font-weight:700;font-stretch:84%;font-variation-settings:'wdth' 84;text-transform:uppercase;letter-spacing:.015em;font-size:18px}
.za-static span:not(.stamp){font-size:15px;line-height:1.5;color:var(--fg-70);max-width:70ch}

.za-row{position:absolute;left:0;right:0;top:0;height:var(--rh);background:#0C111B;border-bottom:1px solid var(--line-soft);font-size:14px;color:var(--fg-70);transform-origin:50% 50%}
.za-stage.is-moving .za-row{will-change:transform,opacity}
.za-row.is-hit{z-index:2} /* een treffer schuift over de rest heen naar voren */
.za-row > *{position:relative;z-index:1;min-width:0}
.za-d,.za-b,.za-z{font:500 12.5px/1 var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.za-d{color:var(--fg-55);letter-spacing:.02em}
.za-z{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--peri)}
.za-b{text-align:right;font-size:13px;letter-spacing:-.02em;color:var(--fg)}
.za-l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.za-l b{font-weight:600;color:var(--fg);margin-right:8px}
/* de gloed onder een treffer: de dekking volgt de veer van de rij (horeca.js) */
.za-glow{position:absolute!important;inset:0 0 -1px 0;z-index:0!important;opacity:0;pointer-events:none;background:linear-gradient(90deg,rgba(198,242,78,.16),rgba(198,242,78,.05) 46%,rgba(198,242,78,.02));box-shadow:inset 3px 0 0 var(--lime)}
/* het boekstuknummer: bij een treffer een knop. Altijd hetzelfde vak, dus er verschuift niets als hij aan gaat. */
.za-bs{justify-self:start;display:inline-flex;align-items:center;gap:7px;height:28px;margin-left:-9px;padding:0 9px;border-radius:6px;border:1px solid transparent;background:none;
  font:500 12.5px/1 var(--mono);letter-spacing:.01em;font-variant-numeric:tabular-nums;color:var(--fg-55);white-space:nowrap;cursor:default;-webkit-tap-highlight-color:transparent;
  transition:color .18s,border-color .18s,background .18s,transform .08s ease-out}
.za-bs::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.4;flex:none;transition:background .18s,opacity .18s}
.za-bs::after{content:"";position:absolute;inset:-8px -4px} /* raakvlak van 44 px hoog */
.za-row.is-hit .za-bs{color:var(--fg);border-color:rgba(198,242,78,.6);background:rgba(198,242,78,.1);cursor:pointer}
.za-row.is-hit .za-bs::before{background:var(--lime);opacity:1}
.za-row.is-hit[data-st="k"] .za-bs::before{background:var(--amber)}
.za-row.is-hit .za-bs:active{transform:scale(.95)}
.za-row.is-open .za-bs{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.za-row.is-open .za-bs::before{background:var(--ink)!important}
@media(hover:hover) and (pointer:fine){.za-row.is-hit .za-bs:hover{background:rgba(198,242,78,.2)}.za-row.is-open .za-bs:hover{background:var(--lime)}}

/* de kaart met het bewijs klapt open onder de rijen van de vondst. Openen en sluiten loopt op één veer. */
.za-card{position:absolute;left:0;right:0;top:0;z-index:3;padding:6px clamp(16px,2vw,28px) 12px clamp(18px,2vw,28px);transform-origin:50% 0;visibility:hidden;outline:none}
.za-card.is-on{visibility:visible}
.za-card-in{position:relative;border-radius:12px;border:1px solid rgba(198,242,78,.4);border-top:2px solid var(--lime);background:#0C1220;box-shadow:0 30px 60px -30px rgba(0,0,0,.9);
  padding:clamp(16px,1.8vw,22px) clamp(16px,2vw,26px) clamp(16px,1.8vw,22px);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:14px clamp(20px,3vw,44px)}
.za-card[data-st="k"] .za-card-in{border-color:rgba(255,178,36,.4);border-top-color:var(--amber)}
.za-card-h{grid-column:1/3;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-right:44px}
.za-card-h h3{font-size:clamp(21px,1.9vw,27px);line-height:1.04;letter-spacing:.01em;max-width:28ch}
.za-card .stamp{flex:none;margin-top:2px}
.za-card-x{position:absolute;right:8px;top:8px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:rgba(244,243,239,.05);color:var(--fg);font:400 20px/1 var(--body);cursor:pointer;transition:transform .08s ease-out,background .15s}
.za-card-x:active{transform:scale(.92)}
.za-ev{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.za-ev li{display:grid;grid-template-columns:74px minmax(0,1fr) auto;gap:0 12px;align-items:baseline;padding:8px 0;border-top:1px solid var(--line-soft);font:500 12.5px/1.4 var(--mono);font-variant-numeric:tabular-nums;color:var(--fg-70)}
.za-ev li:last-child{border-bottom:1px solid var(--line-soft)}
.za-ev li b{font-weight:500;color:var(--fg)}
.za-ev li span:last-child{color:var(--fg);text-align:right;white-space:nowrap}
.za-card-t{display:flex;flex-direction:column;gap:10px;min-width:0}
.za-card-t p{font-size:14.5px;line-height:1.5;color:var(--fg-70)}
.za-card-t p b{color:var(--fg);font-weight:600}
.za-card-t .za-op{font:500 12px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--lime)}
.za-card-t a{color:var(--fg);text-underline-offset:3px;text-decoration-color:var(--lime)}

.za-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px clamp(20px,4vw,64px);align-items:center;padding:clamp(18px,2vw,26px) clamp(18px,2.4vw,32px);border-top:1px solid var(--line-soft)}
.za-kern{font-family:var(--display);font-weight:700;font-stretch:84%;font-variation-settings:'wdth' 84;text-transform:uppercase;letter-spacing:.012em;font-size:clamp(18px,1.7vw,24px);line-height:1.12;max-width:44ch;text-wrap:balance}
.za-hint{display:flex;align-items:center;gap:12px;font-size:13.5px;line-height:1.4;color:var(--fg-55);max-width:34ch}
.za-hint-bs{flex:none;display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 9px;border-radius:6px;border:1px solid rgba(198,242,78,.6);background:rgba(198,242,78,.1);font:500 12px/1 var(--mono);color:var(--fg)}
.za-hint-bs::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime)}
html:not(.hc) .za-hint,html:not(.hc) .za-tot{display:none} /* zonder JavaScript valt er niets te tellen: dan staan alleen de regels en hun voorbeeldvondst er */
html:not(.hc) .za-top{grid-template-columns:minmax(0,1fr)}
html:not(.hc) .za-stamp{justify-self:start}

@media(max-width:1080px){
  .za-body{grid-template-columns:minmax(0,1fr)}
  .za-rules-w{border-right:0;border-bottom:1px solid var(--line-soft)}
  .za-rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 22px}
  .za-rules li + li{border-top:0}
  .za-rules li:nth-child(n+4){border-top:1px solid var(--line-soft)}
  .za-sw{grid-template-columns:minmax(0,1fr);align-content:space-between;gap:12px;height:100%;padding:14px 0}
  .za-sw-t small{display:none}
  .za-sw-t b{font-size:17px}
}
@media(max-width:860px){
  .za-top{grid-template-columns:auto minmax(0,1fr);align-items:start}
  .za-tot-f{grid-column:1/3;grid-template-columns:auto auto minmax(0,1fr);align-items:baseline}
  .za-tot-f .za-tot-l{grid-column:auto}
  .za-tot-f .za-tot-n{font-size:20px}
  .za-stamp{grid-column:1/3;justify-self:start;order:-1}
  .za-foot{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:720px){
  /* op een telefoon: twee regels per boeking en negen rijen hoog; de nieuwste treffers staan altijd bovenaan */
  .za{--rh:58px;--rows:9}
  .za-rules{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
  .za-rules li:nth-child(n+3){border-top:1px solid var(--line-soft)}
  .za-sw{padding:12px 0;min-height:96px}
  .za-sw-t b{font-size:16px;line-height:1.08}
  .za-cols{display:none}
  .za-row{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;align-content:center;gap:3px 12px;font-size:14px}
  .za-l{grid-column:1;grid-row:1}
  .za-l b{display:block;margin:0;overflow:hidden;text-overflow:ellipsis}
  .za-l span{display:none}
  .za-b{grid-column:2;grid-row:1;font-size:13.5px}
  .za-meta{grid-column:1/3;grid-row:2;display:flex;align-items:center;gap:10px}
  .za-bs{height:24px;margin-left:-7px;padding:0 7px;font-size:11.5px}
  .za-bs::after{inset:-12px -4px}
  .za-d{font-size:11.5px}
  .za-card-in{grid-template-columns:minmax(0,1fr)}
  .za-card-h{grid-column:1;flex-direction:column;gap:8px}
  .za-ev li{grid-template-columns:minmax(0,1fr) auto;font-size:11.5px;gap:0 10px}
  .za-ev li span:first-child{display:none} /* de datum staat al in de rijen erboven */
  .za-card-t p{font-size:14px}
}
@media(min-width:721px){.za-meta{display:contents}}
@media(max-width:400px){.za-tot-n{font-size:27px}.za-top{gap:12px 18px}}
@media(max-width:360px){.za-tot-n{font-size:22px}.za-sw-t b{font-size:14.5px;-webkit-hyphens:auto;hyphens:auto}}

/* ==========================================================================
   3 · zelfde werk, drie tarieven
   ========================================================================== */
.tf-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(28px,5vw,88px);align-items:center}
.tf-copy h2{font-size:clamp(40px,5.2vw,84px);margin-top:14px;max-width:10ch}
.tf-p{margin-top:clamp(16px,1.8vw,22px);color:var(--fg-70);font-size:clamp(16px,1.15vw,18.5px);line-height:1.55;max-width:46ch}
.tf-eerlijk{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 14px;align-items:baseline;margin-top:clamp(22px,2.6vw,32px);padding-top:clamp(18px,2vw,24px);border-top:1px solid var(--line);
  font-family:var(--display);font-weight:700;font-stretch:84%;font-variation-settings:'wdth' 84;text-transform:uppercase;letter-spacing:.015em;font-size:clamp(20px,1.9vw,27px);line-height:1.12;max-width:24ch}
.tf-eerlijk .led{transform:translateY(-.18em)}
@media(max-width:940px){.tf-grid{grid-template-columns:minmax(0,1fr)}.tf-copy h2{max-width:none}}

.tf{--ch:340px;--max:140;--knob:136px;padding:clamp(18px,2.2vw,30px);box-shadow:inset 0 1px 0 rgba(244,243,239,.08),0 50px 100px -56px rgba(20,54,245,.45),0 30px 60px -44px rgba(0,0,0,.9);min-width:0}
.tf-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px 18px;flex-wrap:wrap}
.tf-sum{display:flex;flex-direction:column;gap:6px}
.tf-sum-l{font:500 10.5px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-55)}
.tf-sum-n{font-size:clamp(44px,5.4vw,84px);display:inline-block;min-width:calc(8 * (1ch - .04em));white-space:nowrap}
.tf-head-r{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.tf-chart{position:relative;height:var(--ch);margin-top:clamp(40px,4vw,56px);margin-right:clamp(0px,1vw,12px);padding-left:46px}
.tf-grid-lines span{position:absolute;left:0;right:0;bottom:calc(var(--g) / var(--max) * 100%);height:0;border-top:1px dashed var(--line-soft)}
.tf-grid-lines span:last-child{border-top:1px solid var(--line)}
.tf-grid-lines b{position:absolute;left:0;top:-7px;font:500 10.5px/1 var(--mono);letter-spacing:.04em;color:var(--fg-55);background:transparent}
.tf-bars{position:absolute;left:46px;right:var(--knob);top:0;bottom:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,3vw,40px);align-items:end;padding:0 clamp(8px,2vw,28px)}
.tf-bar{position:relative;height:calc(var(--v) / var(--max) * 100%);min-width:0}
.tf-fill{position:absolute;inset:0;border-radius:8px 8px 0 0;background:linear-gradient(180deg,rgba(244,243,239,.2),rgba(244,243,239,.07));box-shadow:inset 0 1px 0 rgba(244,243,239,.3),inset 0 0 0 1px rgba(140,162,255,.16)}
.tf-bar-low .tf-fill{background:linear-gradient(180deg,rgba(198,242,78,.34),rgba(198,242,78,.1));box-shadow:inset 0 2px 0 var(--lime),inset 0 0 0 1px rgba(198,242,78,.28)}
/* wat boven de lijn uitsteekt ligt op tafel: een amber vlak dat van bovenaf groeit (alleen transform) */
.tf-over{position:absolute;left:0;right:0;top:0;height:calc(var(--o) / var(--v) * 100%);border-radius:8px 8px 0 0;transform-origin:50% 0;transform:scaleY(0);
  background:repeating-linear-gradient(135deg,rgba(255,178,36,.5) 0 6px,rgba(255,178,36,.26) 6px 12px);box-shadow:inset 0 0 0 1px rgba(255,178,36,.7)}
.tf-val{position:absolute;left:0;right:0;bottom:100%;margin-bottom:10px;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;white-space:nowrap}
.tf-val b{font:500 clamp(20px,2vw,28px)/1 var(--mono);letter-spacing:-.04em;color:var(--fg);font-variant-numeric:tabular-nums}
.tf-val small{min-height:14px;font:500 10.5px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--amber)}
.tf-bar-low .tf-val small{color:var(--lime)}
.tf-val small i{font-style:normal}
.tf-val{flex-direction:column-reverse}
.tf-name{position:absolute;left:-8px;right:-8px;top:100%;margin-top:12px;text-align:center;text-wrap:balance;font-family:var(--display);font-weight:700;font-stretch:84%;font-variation-settings:'wdth' 84;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(14px,1.3vw,18px);line-height:1.1}
/* de lijn: een strook over de hele breedte die met transform omlaag schuift. Met een muis pak je hem overal,
   met een vinger alleen aan de greep: de rest van het vlak blijft van de pagina, zodat je er gewoon overheen scrolt. */
.tf-line{position:absolute;left:34px;right:0;top:0;height:44px;margin-top:-22px;z-index:3;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}
.tf-line.is-hot{will-change:transform}
.tf-rule{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--lime);box-shadow:0 0 14px rgba(198,242,78,.7)}
.tf-line.is-held .tf-rule{box-shadow:0 0 22px rgba(198,242,78,.95)}
.tf-knob{position:absolute;right:0;top:50%;height:44px;margin-top:-22px;padding:0 14px 0 10px;border-radius:22px;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;cursor:grab;touch-action:none;
  background:rgba(10,14,22,.94);border:1.5px solid var(--lime);box-shadow:0 12px 30px -8px rgba(0,0,0,.85),inset 0 1px 0 rgba(244,243,239,.12);color:var(--fg)}
.tf-knob svg{width:10px;height:18px;fill:none;stroke:var(--lime);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.tf-knob b{font:500 15px/1 var(--mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums;display:inline-block;min-width:5ch}
.tf-knob small{font:500 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-55)}
.tf-knob:focus-visible{outline:2px solid var(--ivory);outline-offset:4px;border-radius:22px}
@media(hover:none) and (pointer:coarse){.tf-line{pointer-events:none}.tf-knob{pointer-events:auto}}
html:not(.hc) .tf-line,html:not(.hc) .tf-sum{display:none}
.tf-sub{margin-top:54px;font:500 10.5px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-55);text-align:center}
.tf-foot{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;margin-top:clamp(16px,2vw,24px);padding-top:clamp(14px,1.8vw,20px);border-top:1px solid var(--line-soft)}
.tf-btns{display:flex;flex-wrap:wrap;gap:6px}
.tf-btns button{font:600 13px var(--body);min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--fg);cursor:pointer;transition:background .15s,border-color .15s,color .15s,transform .08s ease-out}
.tf-btns button:active{transform:scale(.96)}
.tf-btns button[aria-pressed="true"]{background:var(--lime);border-color:var(--lime);color:var(--ink)}
@media(hover:hover) and (pointer:fine){.tf-btns button:not([aria-pressed="true"]):hover{background:rgba(244,243,239,.07)}}
.tf-days{display:flex;align-items:center;gap:6px}
.tf-days legend{float:left;margin-right:10px;padding:0;font:500 10.5px/40px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-55)}
.tf-days label{position:relative;display:inline-flex;cursor:pointer}
.tf-days input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.tf-days span{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);font:500 14px/1 var(--mono);transition:background .12s,color .12s,border-color .12s,transform .08s ease-out}
.tf-days label:active span{transform:scale(.94)}
.tf-days input:checked + span{background:var(--ivory);border-color:var(--ivory);color:var(--ink)}
.tf-days input:focus-visible + span{outline:2px solid var(--lime);outline-offset:3px}
html:not(.hc) .tf-foot{display:none}
.tf-aanname{margin-top:14px;font-size:13.5px;line-height:1.5;color:var(--fg-55)}
@media(max-width:560px){
  .tf{--ch:280px;--knob:88px}
  .tf-chart{padding-left:38px}
  .tf-bars{left:38px;gap:8px;padding:0 8px 0 4px}
  .tf-line{left:28px}
  .tf-knob{padding:0 10px 0 8px;gap:6px}
  .tf-knob small{display:none}
  .tf-name{font-size:12.5px;left:-6px;right:-6px;margin-top:10px}
  .tf-val small{font-size:9.5px;letter-spacing:.03em}
  .tf-val small i{display:none}
  .tf-btns{width:100%}
  .tf-btns button{flex:1 1 auto;padding:0 10px}
}

@media(max-width:360px){.tf{--knob:80px}.tf-chart{padding-left:30px}.tf-bars{left:30px;gap:6px;padding:0 6px 0 2px}.tf-line{left:22px}.tf-name{font-size:11px;letter-spacing:0}.tf-val b{font-size:17px}.tf-val small{font-size:9px;letter-spacing:.02em}}

/* ==========================================================================
   4 · de afvinklijst
   ========================================================================== */
.av-how{color:var(--fg)}
html:not(.hc) .av-how{display:none}
.av{--full:156px;--mini:50px;--gap:8px;padding:clamp(16px,2vw,28px);box-shadow:inset 0 1px 0 rgba(244,243,239,.08),0 50px 100px -56px rgba(20,54,245,.45),0 30px 60px -44px rgba(0,0,0,.9);overflow:hidden}
.av-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px clamp(16px,2.4vw,32px);align-items:center;margin-bottom:clamp(14px,1.8vw,22px)}
.av-prog{display:flex;align-items:baseline;gap:10px;font:500 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-55);white-space:nowrap}
.av-prog .num{font-size:clamp(28px,2.6vw,40px);display:inline-block;min-width:1ch;text-align:right}
.av-bar{position:relative;height:6px;border-radius:3px;background:rgba(244,243,239,.12);overflow:hidden}
.av-bar i{position:absolute;inset:0;border-radius:3px;background:linear-gradient(90deg,var(--cobalt),var(--lime));transform-origin:0 50%;transform:scaleX(0)}
html:not(.hc) .av-head,html:not(.hc) .av-foot{display:none}

.av-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.av-post{position:relative}
.av-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 28px;align-items:center;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:#101829}
.av-id{display:flex;flex-direction:column;gap:5px;min-width:0}
.av-id b{overflow-wrap:anywhere;font-family:var(--display);font-weight:700;font-stretch:84%;font-variation-settings:'wdth' 84;text-transform:uppercase;letter-spacing:.015em;font-size:clamp(20px,1.9vw,26px);line-height:1.06}
.av-id span{font:500 11px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-55)}
.av-years{display:grid;grid-template-columns:repeat(3,auto);gap:0 clamp(16px,2.4vw,36px);margin:0}
.av-years div{display:flex;flex-direction:column;gap:5px;align-items:flex-end}
.av-years dt{font:500 10px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-55);white-space:nowrap}
.av-years dd{margin:0;font:500 clamp(15px,1.4vw,19px)/1 var(--mono);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--fg);white-space:nowrap}

/* met JavaScript: een podium met vaste hoogte. De post die aan de beurt is staat groot bovenaan, de rest wacht
   eronder als regel; wat beoordeeld is zakt naar onderen. Elke post staat op een veer (horeca.js). */
html.hc .av-list{display:block;position:relative;height:calc(var(--full) + 7 * (var(--mini) + var(--gap)));touch-action:pan-y}
html.hc .av-post{position:absolute;left:0;right:0;top:0;height:var(--mini)}
html.hc .av-post.is-active{height:var(--full);z-index:2}
html.hc .av-post.is-leaving{height:var(--full);z-index:3}
.av-list.is-moving .av-post{will-change:transform}
.av-mini,.av-reveal,.av-choices,.av-done{display:none}
html.hc .av-card{position:absolute;inset:0 0 auto 0;height:var(--full);grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;align-content:space-between;padding:18px 20px 16px;
  box-shadow:inset 0 1px 0 rgba(244,243,239,.08),0 24px 48px -28px rgba(0,0,0,.9);touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  opacity:0;visibility:hidden;transition:opacity .22s ease,visibility 0s linear .22s}
html.hc .av-post.is-active .av-card,html.hc .av-post.is-leaving .av-card{opacity:1;visibility:visible;transition:opacity .22s ease;cursor:grab}
.av-post.is-hot .av-card{will-change:transform}
.av-post.is-held .av-card{border-color:rgba(140,162,255,.6);cursor:grabbing} /* direct bij aanraken, niet pas als hij beweegt */
html.hc .av-choices{grid-column:1/3;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.av-ch{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 10px;border-radius:10px;border:1.5px solid var(--line);background:rgba(10,14,22,.5);color:var(--fg);
  font:600 14.5px/1.1 var(--body);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .12s,border-color .12s,color .12s,transform .08s ease-out}
.av-ch::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c);flex:none}
.av-ch:active{transform:scale(.97);background:var(--c);border-color:var(--c);color:var(--ink)}
.av-ch:active::before{background:var(--ink)}
.av-ch[data-ch="houden"]{--c:var(--lime)}.av-ch[data-ch="opzeggen"]{--c:var(--hc-red)}.av-ch[data-ch="heronderhandelen"]{--c:var(--peri)}.av-ch[data-ch="uitzoeken"]{--c:var(--amber)}
@media(hover:hover) and (pointer:fine){.av-ch:hover{border-color:var(--c)}}
/* onder de kaart: wat een veeg betekent. Rechts vegen laat links Houden zien, links vegen laat rechts Opzeggen zien. */
html.hc .av-reveal{display:flex;position:absolute;inset:0 0 auto 0;height:var(--full);border-radius:14px;align-items:center;justify-content:space-between;padding:0 clamp(18px,3vw,36px);overflow:hidden;
  opacity:0;visibility:hidden}
html.hc .av-post.is-active .av-reveal,html.hc .av-post.is-leaving .av-reveal{visibility:visible}
.av-reveal span{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-stretch:76%;font-variation-settings:'wdth' 76;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(22px,2.4vw,32px);color:var(--ink);opacity:0}
.av-reveal[data-side="r"]{background:var(--lime)}
.av-reveal[data-side="l"]{background:var(--hc-red)}
.av-reveal[data-side="r"] .av-rv-r,.av-reveal[data-side="l"] .av-rv-l{opacity:1}
.av-reveal[data-side="r"][data-ch="uitzoeken"]{background:var(--amber)}
.av-reveal[data-side="l"][data-ch="heronderhandelen"]{background:var(--peri)}
.av-reveal em{font-style:normal}
.av-reveal span i{font-style:normal;display:inline-block;transition:transform .16s var(--ease)}
.av-reveal.is-locked span i{transform:scale(1.25)}
/* de post als regel: wachtend (grijs) of beoordeeld (met stempel en een weg terug) */
html.hc .av-mini{position:absolute;inset:0 0 auto 0;height:var(--mini);display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:0 16px;align-items:center;padding:0 8px 0 18px;border:1px solid var(--line-soft);border-radius:12px;
  background:rgba(244,243,239,.025);transition:opacity .22s ease,visibility 0s}
html.hc .av-post.is-active .av-mini{opacity:0;visibility:hidden;transition:opacity .22s ease,visibility 0s linear .22s}
html.hc .av-post.is-leaving .av-mini{opacity:0;visibility:hidden;transition:none}
.av-mini-t{display:flex;align-items:baseline;gap:12px;min-width:0;white-space:nowrap;overflow:hidden}
.av-mini-t b{font-weight:600;font-size:15px;color:var(--fg-70);overflow:hidden;text-overflow:ellipsis}
.av-mini-t span{font:500 10.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-55);overflow:hidden;text-overflow:ellipsis}
.av-mini-n{font:500 13px/1 var(--mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--fg-55);white-space:nowrap;padding-right:10px}
.av-mini .stamp,.av-back{display:none}
.av-post.is-done .av-mini{border-style:solid;background:transparent}
.av-post.is-done .av-mini-t b{color:var(--fg)}
.av-post.is-done .av-mini-n{display:none}
.av-post.is-done .av-mini .stamp{display:inline-flex;color:var(--c);border-color:var(--c);background:transparent}
.av-post.is-done .av-back{display:inline-flex;align-items:center;min-height:38px;padding:0 12px;border:0;border-radius:8px;background:none;color:var(--fg-55);font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:color .15s,transform .08s ease-out}
.av-back:active{transform:scale(.95)}
@media(hover:hover) and (pointer:fine){.av-back:hover{color:var(--fg)}}
.av-post[data-ch="houden"]{--c:var(--lime)}.av-post[data-ch="opzeggen"]{--c:var(--hc-red)}.av-post[data-ch="heronderhandelen"]{--c:var(--peri)}.av-post[data-ch="uitzoeken"]{--c:var(--amber)}
html.hc-live .av-post.is-done .av-mini .stamp{animation:stamp-land .34s cubic-bezier(.2,1.4,.4,1) both}
/* alles beoordeeld: op de plek van de grote kaart staat wat je net deed */
html.hc .av-done{display:flex;position:absolute;left:0;right:0;top:0;height:var(--full);flex-direction:column;justify-content:center;gap:10px;padding:0 4px;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}
html.hc .av-done.is-on{opacity:1;visibility:visible;transition:opacity .3s ease .2s}
.av-done b{font-family:var(--display);font-weight:800;font-stretch:76%;font-variation-settings:'wdth' 76;text-transform:uppercase;letter-spacing:.008em;font-size:clamp(28px,3.2vw,46px);line-height:1}
.av-done-r{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.av-done-r .stamp{color:var(--c);border-color:var(--c)}
.av-done-r [data-k="houden"]{--c:var(--lime)}.av-done-r [data-k="opzeggen"]{--c:var(--hc-red)}.av-done-r [data-k="heronderhandelen"]{--c:var(--peri)}.av-done-r [data-k="uitzoeken"]{--c:var(--amber)}
.av-again{min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--fg);font:600 13px var(--body);cursor:pointer;transition:background .15s,transform .08s ease-out}
.av-again:active{transform:scale(.96)}
.av-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;margin-top:clamp(14px,1.8vw,22px);padding-top:clamp(14px,1.8vw,20px);border-top:1px solid var(--line-soft);min-height:64px}
.av-quote{font-family:var(--display);font-weight:600;font-stretch:90%;font-variation-settings:'wdth' 90;font-size:clamp(17px,1.5vw,21px);line-height:1.25;color:var(--fg);max-width:44ch;opacity:0;transition:opacity .5s ease}
.av-quote.is-on{opacity:1}
html.static .av-quote{transition:none}
.av-undo{min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--fg);font:600 13px var(--body);cursor:pointer;transition:opacity .2s,background .15s,transform .08s ease-out;margin-left:auto}
.av-undo:disabled{opacity:.35;cursor:default}
.av-undo:not(:disabled):active{transform:scale(.96)}
@media(max-width:720px){
  .av{--full:252px;--mini:52px}
  .av-head{grid-template-columns:auto minmax(0,1fr)}
  .av-head .stamp{grid-column:1/3;justify-self:start;order:-1}
  .av-card{grid-template-columns:minmax(0,1fr);gap:12px}
  html.hc .av-card{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;padding:16px 14px 14px}
  .av-years{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 10px;width:100%}
  .av-years div{align-items:flex-start}
  html.hc .av-choices{grid-column:1;grid-template-columns:repeat(2,minmax(0,1fr))}
  .av-ch{min-height:44px;font-size:13.5px;gap:6px;padding:0 6px}
  html.hc .av-mini{grid-template-columns:minmax(0,1fr) auto auto;padding:0 4px 0 14px;gap:0 8px}
  .av-mini-t{flex-direction:column;gap:1px;align-items:flex-start}
  .av-mini-t b{font-size:14.5px;max-width:100%}
  .av-mini-t span{font-size:9.5px;max-width:100%}
  .av-post.is-done .av-mini-t span{display:none}
  .av-back{padding:0 8px!important}
  .av-mini .stamp{font-size:9.5px;letter-spacing:.08em;padding:5px 6px 4px}
  .av-undo{margin-left:0;width:100%}
}
@media(max-width:380px){.av{--full:262px}.av-ch{font-size:13px;padding:0 4px;gap:5px}}
@media(max-width:340px){html.hc .av-card{padding:14px 10px 12px}html.hc .av-choices{gap:6px}.av-ch::before{display:none}}

/* ==========================================================================
   5 · leeszone: wat het niet is, wat je krijgt
   ========================================================================== */
.wt{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,6vw,112px);align-items:start}
.wt h2{font-size:clamp(40px,4.6vw,72px);margin-top:14px}
.wt-wel h2{margin-top:calc(14px + 17px)} /* lijnt uit met de kop links, die een kicker boven zich heeft */
.wt-geen,.wt-krijgt{list-style:none;margin:clamp(22px,2.6vw,36px) 0 0;padding:0;display:flex;flex-direction:column}
.wt-geen li{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 12px;padding:clamp(18px,2vw,24px) 0;border-top:1px solid var(--line)}
.wt-geen li:last-child{border-bottom:1px solid var(--line)}
/* een kruis waar rechts een nummer staat: dit staat niet op de lijst */
.wt-geen li::before,.wt-geen li::after{content:"";position:absolute;left:1px;top:calc(clamp(18px,2vw,24px) + .62em);width:15px;height:2px;border-radius:1px;background:var(--fg-55)}
.wt-geen li::before{transform:rotate(45deg)}.wt-geen li::after{transform:rotate(-45deg)}
.wt-geen b{grid-column:2;font-family:var(--display);font-weight:700;font-stretch:84%;font-variation-settings:'wdth' 84;text-transform:uppercase;letter-spacing:.015em;font-size:clamp(21px,1.9vw,27px);line-height:1.1}
.wt-geen span{grid-column:2;font-size:16px;line-height:1.55;color:var(--fg-70);max-width:48ch}
.wt-krijgt{counter-reset:k}
.wt-krijgt li{counter-increment:k;display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 12px;padding:clamp(18px,2vw,24px) 0;border-top:1px solid var(--line)}
.wt-krijgt li:last-child{border-bottom:1px solid var(--line)}
.wt-krijgt li::before{content:counter(k,decimal-leading-zero);grid-row:1/3;font:500 12px/1.9 var(--mono);letter-spacing:.1em;color:var(--cobalt-deep)}
.wt-krijgt b{font-family:var(--display);font-weight:700;font-stretch:84%;font-variation-settings:'wdth' 84;text-transform:uppercase;letter-spacing:.015em;font-size:clamp(21px,1.9vw,27px);line-height:1.1}
.wt-krijgt p{grid-column:2;font-size:16px;line-height:1.55;color:var(--fg-70);max-width:52ch}
@media(max-width:900px){.wt{grid-template-columns:minmax(0,1fr)}.wt-wel h2{margin-top:0}}

/* ==========================================================================
   6 · de vragen
   ========================================================================== */
.hc-vragen{border-top-color:transparent}
.hc-vragen .sec-in{padding-top:clamp(12px,2vw,32px)}
.faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:clamp(28px,5vw,96px);align-items:start}
.faq-head h2{font-size:clamp(40px,4.6vw,72px);margin-top:14px;max-width:11ch}
.faq-list{margin:0;display:flex;flex-direction:column}
.faq-list > div{padding:clamp(18px,2vw,26px) 0;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:8px clamp(16px,2.4vw,40px)}
.faq-list > div:last-child{border-bottom:1px solid var(--line)}
.faq-list dt{font-family:var(--display);font-weight:700;font-stretch:84%;font-variation-settings:'wdth' 84;text-transform:uppercase;letter-spacing:.015em;font-size:clamp(19px,1.6vw,23px);line-height:1.12}
.faq-list dd{margin:0;font-size:16px;line-height:1.6;color:var(--fg-70);max-width:56ch}
.faq-meer{grid-column:2;margin-top:0;font-size:16px;line-height:1.55;color:var(--fg-70)}
.faq-meer a{color:var(--fg);font-weight:600;text-decoration:underline;text-decoration-color:var(--cobalt-deep);text-underline-offset:4px;text-decoration-thickness:1.5px;white-space:nowrap}
@media(max-width:900px){.faq{grid-template-columns:minmax(0,1fr)}.faq-head h2{max-width:none}.faq-meer{grid-column:1}}
@media(max-width:600px){.faq-list > div{grid-template-columns:minmax(0,1fr)}}

/* ==========================================================================
   7 · het aanbod, groot (zelfde opzet als op de hub)
   ========================================================================== */
.offer-head h2{font-size:clamp(40px,6vw,96px);margin-top:14px;max-width:19ch}
.offer-head .sub{margin-top:clamp(18px,2vw,26px);max-width:62ch;color:var(--fg-70);font-size:clamp(17px,1.3vw,20px);line-height:1.5}
.offer-grid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(28px,5vw,88px);align-items:start;margin-top:clamp(36px,5vw,80px)}
.offer-steps{list-style:none;margin:0;padding:0;counter-reset:s;display:flex;flex-direction:column}
.offer-steps li{counter-increment:s;display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 12px;padding:clamp(18px,2vw,26px) 0;border-top:1px solid var(--line-soft)}
.offer-steps li:last-child{border-bottom:1px solid var(--line-soft)}
.offer-steps li::before{content:counter(s,decimal-leading-zero);grid-row:1/3;font:500 12px/1.9 var(--mono);letter-spacing:.1em;color:var(--lime)}
.offer-steps b{font-family:var(--display);font-weight:700;font-stretch:84%;font-variation-settings:'wdth' 84;text-transform:uppercase;letter-spacing:.015em;font-size:clamp(21px,1.9vw,27px);line-height:1.1}
.offer-steps p{grid-column:2;font-size:16px;line-height:1.55;color:var(--fg-70);max-width:40ch}
/* het register zoals je het terugkrijgt: papier op het donker, met een tweede vel eronder */
.doc{margin:0;min-width:0}
.doc-title{margin-bottom:14px}
.doc-paper{--fg:#0A0E16;--fg-70:rgba(10,14,22,.74);--fg-55:rgba(10,14,22,.62);--line:rgba(10,14,22,.16);--line-soft:rgba(10,14,22,.1);--peri:#1436F5;
  position:relative;isolation:isolate;color:var(--fg);background:#F7F6F2;border-radius:14px;padding:clamp(20px,2.6vw,36px);
  box-shadow:0 50px 100px -40px rgba(0,0,0,.9),0 30px 60px -36px rgba(20,54,245,.45)}
.doc-paper::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:#DDDBD3;transform:rotate(1.4deg) translate(6px,8px)}
.doc-paper::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:#F7F6F2}
.doc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding-bottom:clamp(14px,1.6vw,20px);border-bottom:2px solid var(--fg)}
.doc-head b{display:block;font-family:var(--display);font-weight:800;font-stretch:76%;font-variation-settings:'wdth' 76;text-transform:uppercase;letter-spacing:.01em;font-size:clamp(26px,2.6vw,36px);line-height:1}
.doc-head div span{display:block;margin-top:8px;font-size:14px;line-height:1.4;color:var(--fg-70)}
.doc-head .stamp{transform:rotate(-3deg);border-color:rgba(20,54,245,.6);flex:none}
.reg-cols,.reg-rows li{display:grid;grid-template-columns:26px minmax(0,1fr) 112px 104px;gap:0 14px;align-items:center}
.reg-cols{padding:12px 0 8px;font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-55)}
.reg-cols span:first-child{grid-column:1/3}
.reg-rows{list-style:none;margin:0;padding:0}
.reg-rows li{padding:clamp(12px,1.3vw,16px) 0;border-top:1px solid var(--line)}
.reg-n{font:500 12px/1 var(--mono);color:var(--fg-55)}
.reg-what{font-weight:600;font-size:clamp(15px,1.15vw,17px);line-height:1.3}
.reg-bs{font:500 12px/1.3 var(--mono);letter-spacing:.01em;font-variant-numeric:tabular-nums;color:var(--fg-70);white-space:nowrap}
.reg-st{display:inline-flex;align-items:center;gap:8px;font:600 10.5px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg)}
.reg-st::before{content:"";width:8px;height:8px;border-radius:50%;flex:none;background:#2F8A1F}
.reg-st[data-st="k"]::before{background:#C57F00}
.doc-note{margin-top:22px;font:500 10.5px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-55)}
@media(max-width:480px){.doc-head{flex-direction:column-reverse;gap:12px}.doc-head .stamp{white-space:normal;line-height:1.35}}
/* de regels landen één voor één als het vel in beeld komt (horeca.js zet .landed). Zonder JavaScript en bij minder beweging staan ze er direct. */
html.hc-live [data-land] .reg-rows li{opacity:0;transform:translateY(8px);transition:opacity .45s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--i) * 130ms + 120ms)}
html.hc-live [data-land].landed .reg-rows li{opacity:1;transform:none}
@media(max-width:560px){
  .reg-cols{display:none}
  .reg-rows li{grid-template-columns:22px minmax(0,1fr) auto;gap:6px 10px;align-items:start}
  .reg-what{grid-column:2/4}
  .reg-bs{grid-column:2}.reg-st{grid-column:3;justify-self:end}
  .reg-n{padding-top:4px}
}
.offer-act{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(28px,4vw,64px);align-items:start;margin-top:clamp(40px,6vw,96px);padding-top:clamp(32px,4vw,64px);border-top:1px solid var(--line)}
.offer-form{min-width:0}
.offer-btn{min-height:64px;padding:0 34px;font-size:clamp(18px,1.5vw,21px)}
.offer-form .cta-note{margin-top:16px}
/* wat je stuurt: drie nuchtere regels onder de beloftes, zodat de stap klein en concreet blijft */
.stuur{margin:clamp(26px,3vw,40px) 0 0;padding-top:clamp(18px,2vw,24px);border-top:1px solid var(--line-soft);display:grid;grid-template-columns:minmax(0,170px) minmax(0,1fr);gap:12px clamp(16px,2.4vw,32px);max-width:640px}
.stuur dt{font:500 11px/1.7 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--peri);padding-top:2px}
.stuur dd{margin:0;font-size:15.5px;line-height:1.55;color:var(--fg-70)}
@media(max-width:560px){.stuur{grid-template-columns:minmax(0,1fr);gap:4px}.stuur dd{margin-bottom:10px}}
/* wie je spreekt: de naamkaarten staan in c/wie.css, hier alleen de indeling naast de tekst */
.team{display:flex;flex-direction:column;gap:clamp(18px,2vw,26px);min-width:0}
.team-text h3{font-size:clamp(28px,2.7vw,40px);max-width:16ch}
.team-text p{margin-top:14px;font-size:16.5px;line-height:1.55;color:var(--fg-70);max-width:42ch}
@media(max-width:960px){
  .offer-grid,.offer-act{grid-template-columns:minmax(0,1fr)}
  .team{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);align-items:center;gap:clamp(20px,4vw,40px)}
}
@media(max-width:620px){.team{grid-template-columns:minmax(0,1fr)}.offer-btn{width:100%}}

/* ---------- 8 · andere branches en de merkregel ---------- */
.others-in{padding-top:clamp(36px,4vw,56px)}
.others-in > .kicker{margin-bottom:16px}
.merkregel .sec-in{padding-top:clamp(44px,6vw,96px);padding-bottom:clamp(44px,6vw,96px)}
.merkregel .h-cond{font-size:clamp(40px,6.4vw,108px);max-width:14ch}
.merkregel .h-cond em{font-style:normal;color:var(--lime)}

/* ---------- het blad "export": wat audit.css nog niet heeft ---------- */
.au-set + .au-set{margin-top:4px}
.au-set.is-err .au-chip span{border-color:var(--au-red)}

/* minder beweging: wat op een veer liep staat er direct; de wissel krijgt een korte vervaging */
@keyframes hc-fade{from{opacity:.35}to{opacity:1}}
html.static .hc-fade{animation:hc-fade .2s ease both}
@media(prefers-reduced-motion:reduce){html.static .hc-fade{animation:hc-fade .2s ease both!important}}