/* Zelf gehost (OFL) i.p.v. Google Fonts: sneller en geen bezoekers-IP naar Google. Enkel de Latijnse set. */
@font-face {
  font-family: 'Anybody';
  font-style: normal;
  font-weight: 300 900;
  font-stretch: 50% 150%;
  font-display: swap;
  src: url('fonts/anybody.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Martian Mono';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 112.5%;
  font-display: swap;
  src: url('fonts/martian-mono.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/schibsted-grotesk-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/schibsted-grotesk.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Foodoo · plat ontwerp · Ground Control (12 kolommen, φ-spacing, k·em + C)
   Concept: het schrapmenu. Inox van de pas, witte bonnen, zwarte inkt, één gele markeerstift. */

:root {
  /* neutralen: inox van de pas (koel staal), niet de boiler-default */
  --bg: #DFE2DE;
  --bg-warm: #D3D7D2;
  --bg-subtle: #C8CDC7;
  --bon: #FBFBF7;           /* thermisch bonpapier */
  --ink: #121412;
  --ink-2: #454A45;
  --ink-3: #5C625C;            /* ≥ 4,5:1 op inox (#DFE2DE) en bonpapier */
  --lijn: rgba(18, 20, 18, .12);
  --lijn-2: rgba(18, 20, 18, .22);
  --lijn-3: rgba(18, 20, 18, .4);
  --nacht: #121412;
  --nacht-2: #1D201D;
  --geel: #FFD02E;          /* markeerstift, het enige accent (voorstel eigen merk) */

  --f-head: "Anybody", "Arial Narrow", sans-serif;
  --f-ui: "Schibsted Grotesk", system-ui, sans-serif;
  --f-mono: "Martian Mono", ui-monospace, monospace;

  /* rode reeks */
  --s4: 4px; --s8: 8px; --s13: 13px; --s21: 21px; --s24: 24px; --s34: 34px; --s40: 40px; --s55: 55px; --s80: 80px; --s89: 89px;
  /* blauwe reeks */
  --col: clamp(31.25px, calc(100vw / 12), 133.33px);
  --col-half: calc(var(--col) / 1.618);
  --col-phi: calc(var(--col) * 1.618);
  --col-2: calc(var(--col) * 2);

  --t-label: 11px; --t-small: 13px; --t-body: 16px; --t-lead: 21px; --t-h4: 21px;
  --t-h3: clamp(21px, 2.5vw, 34px);
  --t-h2: clamp(34px, 4.5vw, 55px);
  --t-h1: clamp(56px, 8vw, 144px);          /* .h1--display van de boiler */
  --t-h1-sectie: clamp(42px, 6vw, 89px);     /* .h1--section van de boiler */
  --lh-kop: calc(.86em + 4px);

  --r4: 4px; --r8: 8px; --r13: 13px; --r21: 21px; --rrond: 999px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --t: .28s;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--s89); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--t-body)/1.618 var(--f-ui); overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
mark { background: none; color: inherit; }
small { font-size: var(--t-small); } /* nooit de browserstandaard 'smaller' (10,8 px): enkel maten van de schaal */
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--bon); padding: var(--s8) var(--s13); z-index: 99; }
.skip:focus { left: var(--s8); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── grid ─────────────────────────────────────────── */
.g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); max-width: 1600px; margin-inline: auto; }
.g > * { grid-column: var(--s, 1) / var(--e, 13); min-width: 0; }
@media (max-width: 1023px) {
  .g { column-gap: var(--s21); padding-inline: var(--s21); }
  .g > * { grid-column: var(--ts, var(--s, 1)) / var(--te, var(--e, 13)); }
}
@media (max-width: 767px) {
  .g { grid-template-columns: minmax(0, 1fr); column-gap: 0; padding-inline: var(--s21); }
  .g > * { grid-column: 1 / -1; }
}

.rij { padding-block: var(--col-phi); }
.rij-krap { padding-block: var(--col); }
.rij-nacht { background: var(--nacht); color: var(--bon); }
.rij-geel { background: var(--geel); }
.rij-warm { background: var(--bg-warm); }
@media (max-width: 767px) { .rij { padding-block: var(--s89); } .rij-krap { padding-block: var(--s55); } }

/* ── typografie ───────────────────────────────────── */
.kicker, .mono { font: 500 var(--t-label)/2 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; font-variation-settings: "wdth" 87.5; }
.kicker { display: block; margin-bottom: var(--s21); color: var(--ink-2); }
.rij-nacht .kicker { color: rgba(251, 251, 247, .62); }
.rij-geel .kicker { color: var(--ink); }
.h1 { font: 850 var(--t-h1)/var(--lh-kop) var(--f-head); font-stretch: 62%; font-variation-settings: "wdth" 62; letter-spacing: -.02em; text-transform: uppercase; }
.h2 { font: 800 var(--t-h2)/var(--lh-kop) var(--f-head); font-variation-settings: "wdth" 75; letter-spacing: -.02em; }
.h3 { font: 750 var(--t-h3)/var(--lh-kop) var(--f-head); font-variation-settings: "wdth" 80; letter-spacing: -.02em; }
.h4 { font: 700 var(--t-h4)/var(--lh-kop) var(--f-head); font-variation-settings: "wdth" 90; }
.lead { font-size: var(--t-lead); line-height: 1.618; color: var(--ink-2); }
.rij-nacht .lead { color: rgba(251, 251, 247, .78); }
.rij-geel .lead { color: var(--ink); }
.klein { font-size: var(--t-small); color: var(--ink-2); }
.tekst p + p { margin-top: var(--s13); }
.tekst { color: var(--ink-2); }
.rij-nacht .tekst { color: rgba(251, 251, 247, .78); }
/* de markeerstift: enkel op wat overblijft */
.geel { background: linear-gradient(var(--geel), var(--geel)) 0 88% / 100% .62em no-repeat; padding-inline: .06em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.rij-nacht .geel { background: none; color: var(--geel); }

/* ── knoppen ──────────────────────────────────────── */
.knop { display: inline-flex; align-items: center; gap: var(--s8); min-height: 55px; padding: 0 var(--s24); border: 2px solid var(--ink); border-radius: var(--r8); background: var(--ink); color: var(--bon); font: 700 var(--t-body)/1 var(--f-ui); text-decoration: none; transition: background var(--t) var(--ease), color var(--t) var(--ease), transform var(--t) var(--ease); }
.knop:hover { transform: translateY(-2px); }
.knop span { transition: transform var(--t) var(--ease); }
.knop:hover span { transform: translateX(4px); }
.knop-geel { background: var(--geel); border-color: var(--geel); color: var(--ink); }
.knop-lijn { background: transparent; color: var(--ink); }
.knop-lijn:hover { background: var(--ink); color: var(--bon); }
.rij-nacht .knop-lijn { color: var(--bon); border-color: var(--bon); }
.rij-nacht .knop-lijn:hover { background: var(--bon); color: var(--ink); }
.knoppen { display: flex; flex-wrap: wrap; gap: var(--s13); margin-top: var(--s34); }
.pijl-link { font: 600 var(--t-body)/1.4 var(--f-ui); text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 2px; }
.pijl-link:hover { border-bottom-color: var(--geel); }

/* ── merk: het woordmerk in svg (één lijndikte, twee bezette tafels in geel) ── */
.merk { display: inline-flex; align-items: center; line-height: 0; color: inherit; }
.merk svg { height: 30px; width: auto; overflow: visible; }
.merk .bezet { fill: var(--geel); }
.merk-klein svg { height: 18px; }

/* ── top ──────────────────────────────────────────── */
.top { position: relative; z-index: 10; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; height: var(--s89); max-width: 1600px; margin-inline: auto; }
.top-merk { grid-column: 2 / 4; text-decoration: none; justify-self: start; }
.top-nav { grid-column: 4 / 10; display: flex; gap: var(--s34); }
.top-nav a { display: inline-flex; align-items: baseline; gap: var(--s8); text-decoration: none; font-weight: 600; font-size: var(--t-body); padding-block: var(--s8); border-bottom: 2px solid transparent; }
.top-nav .nr { font: 500 var(--t-label)/1 var(--f-mono); color: var(--ink-3); }
.top-nav a:hover, .top-nav a[aria-current] { border-bottom-color: var(--ink); }
.top-rechts { grid-column: 10 / 12; display: flex; align-items: center; justify-content: flex-end; gap: var(--s21); }
.top-login { font: 500 var(--t-label)/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--ink-2); }
.top-login:hover { color: var(--ink); text-decoration: underline; }
/* de aanvraagknop is een bon die aan de rail hangt, geen pil */
.top-aanvraag { position: relative; align-self: start; padding: calc(var(--s21) + 8px) var(--s13) var(--s13); background: var(--bon); font: 700 var(--t-small)/1.2 var(--f-ui); text-decoration: none; white-space: nowrap; transition: padding var(--t) var(--ease); border-inline: 1px solid var(--lijn-2); }
.top-aanvraag::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: var(--ink); }
.top-aanvraag::after { content: ""; position: absolute; left: -1px; right: -1px; bottom: -6px; height: 6px; background: linear-gradient(-45deg, transparent 4px, var(--bon) 0) 0 0 / 8px 6px, linear-gradient(45deg, transparent 4px, var(--bon) 0) 0 0 / 8px 6px; }
.top-aanvraag:hover { padding-top: calc(var(--s34) + 8px); }
@media (max-width: 1023px) {
  .top { grid-template-columns: auto 1fr auto; column-gap: var(--s21); padding-inline: var(--s21); }
  .top-merk { grid-column: 1; }
  .top-nav { grid-column: 2; gap: var(--s21); justify-content: center; }
  .top-rechts { grid-column: 3; }
}
@media (max-width: 767px) {
  .top { grid-template-columns: 1fr auto; height: auto; row-gap: 0; padding-top: var(--s13); }
  .top-merk .merk svg { height: 24px; }
  .top-nav { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; gap: var(--s8); padding-block: var(--s13); border-bottom: 1px solid var(--lijn-2); overflow-x: auto; }
  .top-nav a { font-size: var(--t-small); white-space: nowrap; }
  .top-rechts { grid-column: 2; grid-row: 1; }
  .top-login { display: none; }
  .top-aanvraag { padding-top: calc(var(--s13) + 8px); margin-top: calc(-1 * var(--s13)); }
  .top-aanvraag:hover { padding-top: calc(var(--s13) + 8px); }
}

/* ── opening: het schrapmenu ──────────────────────── */
.schrap { padding-top: var(--col-half); padding-bottom: var(--col); align-items: start; }
.schrap-kop { grid-row: 1; }
.schrap-lijst { grid-row: 2; }
.schrap-lijst li { position: relative; width: fit-content; max-width: 100%; font: 850 var(--t-h2)/var(--lh-kop) var(--f-head); font-variation-settings: "wdth" 62; letter-spacing: -.02em; text-transform: uppercase; color: var(--ink); padding-block: .04em; transition: color .6s var(--ease); }
.schrap-lijst li s { text-decoration: none; }
.schrap-lijst li:not(.blijft)::after { content: ""; position: absolute; left: -.08em; right: -.08em; top: 52%; height: .13em; background: var(--ink); border-radius: 2px; transform-origin: left center; transform: scaleX(1) rotate(-1.2deg); }
.schrap-lijst li:nth-child(even):not(.blijft)::after { transform: scaleX(1) rotate(.8deg); }
.schrap-lijst li:not(.blijft) { color: var(--ink-3); }
.schrap-lijst .blijft { margin-top: var(--s13); font-size: var(--t-h1); font-variation-settings: "wdth" 62; }
.schrap-lijst .blijft mark { background: linear-gradient(var(--geel), var(--geel)) 0 85% / 100% .7em no-repeat; padding-inline: .04em; }
.schrap-opnieuw { margin-top: var(--s21); border: 0; background: none; padding: 0; font: 500 var(--t-label)/2 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.schrap-opnieuw:hover { color: var(--ink); }
/* animatie enkel met JS en zonder reduced motion */
.js .schrap.is-klaar-om .schrap-lijst li:not(.blijft) { color: var(--ink); }
.js .schrap.is-klaar-om .schrap-lijst li:not(.blijft)::after { transform: scaleX(0) rotate(-1.2deg); }
.js .schrap.is-klaar-om .schrap-lijst .blijft mark { background-size: 0% .7em; }
.js .schrap.is-klaar-om .schrap-lijst .blijft { opacity: 0; transform: translateY(21px); }
.js .schrap .schrap-lijst li:not(.blijft)::after { transition: transform .42s var(--ease) var(--vertraging, 0s); }
.js .schrap .schrap-lijst li:not(.blijft) { transition: color .42s var(--ease) var(--vertraging, 0s); }
.js .schrap .schrap-lijst .blijft { transition: opacity .6s var(--ease) var(--vertraging, 0s), transform .6s var(--ease) var(--vertraging, 0s); }
.js .schrap .schrap-lijst .blijft mark { transition: background-size .6s var(--ease) calc(var(--vertraging, 0s) + .35s); }

.schrap-onder { grid-row: 3; margin-top: var(--s55); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s34); align-items: end; border-top: 2px solid var(--ink); padding-top: var(--s24); }
.schrap-onder .lead { max-width: 34em; color: var(--ink); }
.schrap-onder .knoppen { margin-top: 0; }
@media (max-width: 1023px) { .schrap-onder { grid-template-columns: 1fr; } }

/* de rekening rechts: een bon die uit de printer komt */
.rekening-plek { grid-row: 1 / span 3; align-self: start; position: relative; padding-left: var(--col-half); max-width: calc(340px + var(--col-half)); justify-self: end; width: 100%; }
.printer { height: 13px; background: var(--ink); border-radius: var(--r4) var(--r4) 0 0; position: relative; }
.printer::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 3px; height: 2px; background: #000; }
.rekening-mask { overflow: hidden; }
.bon { position: relative; background: var(--bon); color: var(--ink); font: 400 var(--t-small)/1.8 var(--f-mono); font-variation-settings: "wdth" 80; padding: var(--s21) var(--s21) var(--s34); }
.bon::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 8px; background: linear-gradient(-45deg, transparent 5px, var(--bon) 0) 0 0 / 10px 8px, linear-gradient(45deg, transparent 5px, var(--bon) 0) 0 0 / 10px 8px; }
.bon-kop { text-align: center; padding-bottom: var(--s13); margin-bottom: var(--s13); border-bottom: 1px dashed var(--lijn-3); }
.bon-kop .merk svg { height: 24px; }
.bon-kop p { font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.bon-regel { display: flex; gap: var(--s8); font-size: var(--t-small); }
.bon-regel span:first-child { flex: 0 1 auto; }
.bon-regel::after { content: none; }
.bon-regel .stip { flex: 1 1 auto; border-bottom: 1px dotted var(--lijn-3); margin-bottom: .55em; min-width: 13px; }
.bon-regel b { font-weight: 700; white-space: nowrap; }
.bon-totaal { display: flex; justify-content: space-between; align-items: baseline; margin-top: var(--s13); padding-top: var(--s13); border-top: 2px solid var(--ink); font-weight: 700; }
.bon-totaal b { font: 850 var(--t-h2)/var(--lh-kop) var(--f-head); font-variation-settings: "wdth" 62; }
.bon-totaal b small { font: 500 var(--t-small)/1 var(--f-mono); }
.bon-voet { margin-top: var(--s13); font-size: var(--t-label); color: var(--ink-2); text-align: center; }
.bon .knop { width: 100%; justify-content: center; margin-top: var(--s21); }
.js .rekening-plek .bon { transform: translateY(-101%); transition: transform 1.1s cubic-bezier(.45, .05, .2, 1) .3s; }
.js .rekening-plek.is-geprint .bon { transform: none; }
@media (max-width: 767px) {
  .rekening-plek { grid-row: auto; margin-top: var(--s55); padding-left: 0; justify-self: stretch; }
  .schrap-kop, .schrap-lijst, .schrap-onder { grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .js .rekening-plek .bon, .js .schrap * { transition: none !important; }
}

/* ── probeer het zelf (speeltuin) ─────────────────── */
.speel-kop { margin-bottom: var(--s55); }
.speel-kop .h2 { max-width: 12em; }
.speel-widget { align-self: start; }
.speel-ctl { align-self: start; }
.ctl { display: grid; gap: var(--s24); }
.ctl-veld { display: grid; gap: var(--s8); }
.ctl-l { font: 500 var(--t-label)/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(251, 251, 247, .62); display: flex; justify-content: space-between; gap: var(--s13); }
.ctl-l output { color: var(--bon); }
.ctl input[type=text] { width: 100%; background: transparent; border: 0; border-bottom: 2px solid rgba(251, 251, 247, .3); padding: var(--s8) 0; font: 700 var(--t-lead)/1.3 var(--f-ui); color: var(--bon); border-radius: 0; }
.ctl input[type=text]:focus { outline: none; border-bottom-color: var(--geel); }
.stalen { display: flex; flex-wrap: wrap; gap: var(--s8); }
.staal { width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(251, 251, 247, .25); background: var(--c); padding: 0; position: relative; }
.staal[aria-pressed=true] { box-shadow: none; outline: 2px solid var(--bon); outline-offset: 3px; }
.staal-eigen { display: grid; place-items: center; background: conic-gradient(#e0412f, #ffd02e, #3aa65b, #2c6fd6, #8a4bd1, #e0412f); overflow: hidden; }
.staal-eigen input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.seg { display: inline-flex; border: 2px solid rgba(251, 251, 247, .3); border-radius: var(--r8); overflow: hidden; width: fit-content; flex-wrap: wrap; }
.seg button { border: 0; background: none; padding: var(--s8) var(--s13); font: 600 var(--t-small)/1.4 var(--f-ui); color: rgba(251, 251, 247, .78); min-height: 40px; }
.seg button + button { border-left: 1px solid rgba(251, 251, 247, .2); }
.seg button[aria-pressed=true] { background: var(--bon); color: var(--ink); }
.ctl input[type=range] { width: 100%; margin: 0; accent-color: var(--geel); }
.code { position: relative; padding-right: 89px !important; background: var(--nacht-2); border: 1px solid rgba(251, 251, 247, .14); border-radius: var(--r8); padding: var(--s13) var(--s13) var(--s13); font: 400 var(--t-label)/1.8 var(--f-mono); color: rgba(251, 251, 247, .8); word-break: break-all; }
.code b { color: var(--geel); font-weight: 500; }
.code-knop { position: absolute; top: var(--s8); right: var(--s8); border: 1px solid rgba(251, 251, 247, .3); background: var(--nacht); color: var(--bon); border-radius: var(--r4); font: 500 var(--t-label)/1 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; padding: var(--s8); }
.speel-noot { margin-top: var(--s34); font-size: var(--t-small); color: rgba(251, 251, 247, .62); }
.speel-noot a { color: var(--bon); }
@media (max-width: 767px) { .speel-widget { margin-bottom: var(--s55); } }

/* ── de widget (fw) ───────────────────────────────── */
.fw-plek { width: 100%; max-width: 440px; }
.fw { --fw-ink: #121412; --fw-2: #5B605B; --fw-lijn: #E3E5E1; background: #fff; color: var(--fw-ink); border-radius: var(--fw-r, 13px); border: 1px solid var(--fw-lijn); font: 400 16px/1.618 var(--f-ui); overflow: hidden; text-align: left; }
.fw-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s13); padding: var(--s21) var(--s21) 0; }
.fw-naam { display: block; font-size: 16px; font-weight: 700; line-height: 1.2; }
.fw-top small { font-size: var(--t-small); color: var(--fw-2); }
.fw-talen { display: flex; gap: 4px; }
.fw-talen button { border: 0; background: none; min-width: 32px; min-height: 32px; border-radius: calc(var(--fw-r) / 2); font: 600 13px/1 var(--f-ui); text-transform: uppercase; color: var(--fw-2); }
.fw-talen button[aria-pressed=true] { background: var(--a); color: var(--a-ink); }
.fw-demo { margin: var(--s8) var(--s21) 0; font-size: 13px; color: var(--fw-2); }
.fw-chips { display: flex; flex-wrap: wrap; gap: var(--s8); padding: var(--s13) var(--s21) 0; }
.fw-chip { display: inline-flex; gap: var(--s8); align-items: center; border: 0; background: color-mix(in srgb, var(--a) 16%, #fff); color: var(--fw-ink); border-radius: var(--rrond); padding: 4px var(--s13); font: 600 var(--t-small)/1.6 var(--f-ui); }
.fw-chip span { opacity: .55; }
.fw-chip:hover span { opacity: 1; }
.fw-stap { padding: var(--s21); min-height: 316px; }
.fw-v { font-size: 16px; font-weight: 700; margin-bottom: var(--s13); line-height: 1.3; }
.fw-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s8); }
.fw-n, .fw-uur, .fw-dag { border: 1px solid var(--fw-lijn); background: #fff; border-radius: calc(var(--fw-r) * .6); font-weight: 600; transition: background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease); }
.fw-n { height: 55px; font-size: 16px; }
.fw-n:hover, .fw-uur:hover:not([disabled]), .fw-dag:hover:not([disabled]) { background: var(--a); border-color: var(--a); color: var(--a-ink); }
.fw-klein { margin-top: var(--s13); font-size: var(--t-small); color: var(--fw-2); line-height: 1.5; }
.fw-maand { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s8); }
.fw-maand b { text-transform: capitalize; font-size: 16px; }
.fw-pijl { width: 34px; height: 34px; border: 1px solid var(--fw-lijn); background: #fff; border-radius: 50%; font-size: 16px; line-height: 1; }
.fw-pijl[disabled] { opacity: .3; cursor: default; }
.fw-kal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.fw-kal i { font: 600 11px/2 var(--f-ui); font-style: normal; text-align: center; color: var(--fw-2); text-transform: lowercase; }
.fw-dag { aspect-ratio: 1; font-size: var(--t-small); padding: 0; }
.fw-dag.is-nu { border-color: var(--fw-ink); }
.fw-dag[disabled] { background: #F2F3F1; border-color: transparent; color: #A9AEA9; cursor: default; text-decoration: line-through; }
.fw-leg { margin-top: var(--s13); display: flex; align-items: center; gap: var(--s8); font-size: 13px; color: var(--fw-2); }
.fw-leg-v { width: 13px; height: 13px; border-radius: 3px; background: #F2F3F1; }
.fw-dienst { font: 700 11px/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--fw-2); margin: var(--s13) 0 var(--s8); }
.fw-dienst:first-of-type { margin-top: 0; }
.fw-uren { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s8); }
.fw-uur { height: 40px; font-size: 13px; }
.fw-uur[disabled] { background: #F2F3F1; border-color: transparent; color: #A9AEA9; text-decoration: line-through; cursor: default; }
.fw-form { display: grid; gap: var(--s13); }
.fw-form label { display: grid; gap: 4px; font-size: var(--t-small); font-weight: 600; }
.fw-form small { font-weight: 400; color: var(--fw-2); }
.fw-form input, .fw-form select, .fw-form textarea { width: 100%; border: 1px solid #D3D6D2; border-radius: calc(var(--fw-r) * .5); padding: 11px 13px; font: 400 16px/1.4 var(--f-ui); background: #fff; }
.fw-form input:focus, .fw-form select:focus, .fw-form textarea:focus { outline: 2px solid var(--a); outline-offset: 0; border-color: transparent; }
.fw-go { width: 100%; min-height: 48px; border: 0; border-radius: calc(var(--fw-r) * .6); background: var(--a); color: var(--a-ink); font: 700 16px/1 var(--f-ui); margin-top: var(--s8); }
.fw-go:hover { filter: brightness(.94); }
.fw-link { border: 0; background: none; padding: 0; margin-top: var(--s13); text-decoration: underline; font-size: var(--t-small); color: var(--fw-2); }
.fw-klaar { text-align: center; }
.fw-vink { width: 55px; height: 55px; margin: 0 auto var(--s13); border-radius: 50%; background: var(--a); color: var(--a-ink); display: grid; place-items: center; font-size: 21px; font-weight: 800; }
.fw-bon { display: grid; gap: 4px; margin: var(--s13) 0; padding: var(--s13); border: 1px dashed #C9CDC8; border-radius: calc(var(--fw-r) * .5); font: 400 13px/1.6 var(--f-mono); }
.fw-bon b { font-family: var(--f-ui); font-size: 16px; }
.fw-bon span:first-of-type { text-transform: capitalize; }
.fw-voet { border-top: 1px solid var(--fw-lijn); padding: var(--s13) var(--s21); text-align: center; }
.fw-voet a { font-size: 13px; color: var(--fw-2); text-decoration: none; }
.fw-voet a:hover { text-decoration: underline; }

/* ── de rail met bonnen ───────────────────────────── */
.rail-kop { margin-bottom: var(--s55); }
.rail-wrap { position: relative; }
.rail { position: relative; display: flex; gap: var(--s21); overflow-x: auto; padding: 0 var(--col) var(--s34) 0; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.rail-wrap::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 21px; background: #B4BAB3; border-top: 3px solid #EEF0ED; border-bottom: 2px solid #8E948D; z-index: 2; }
.rail li { flex: 0 0 min(280px, 78vw); scroll-snap-align: start; position: relative; background: var(--bon); padding: calc(21px + var(--s21)) var(--s21) var(--s34); font: 400 var(--t-small)/1.7 var(--f-mono); font-variation-settings: "wdth" 80; transform-origin: top center; }
.rail li:nth-child(odd) { transform: rotate(-.8deg); }
.rail li:nth-child(3n) { transform: rotate(.9deg); margin-top: var(--s8); }
.rail li::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 8px; background: linear-gradient(-45deg, transparent 5px, var(--bon) 0) 0 0 / 10px 8px, linear-gradient(45deg, transparent 5px, var(--bon) 0) 0 0 / 10px 8px; }
.rail-tijd { display: flex; justify-content: space-between; border-bottom: 1px dashed var(--lijn-3); padding-bottom: var(--s8); margin-bottom: var(--s13); font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.rail h3 { font: 800 var(--t-h4)/var(--lh-kop) var(--f-head); font-variation-settings: "wdth" 80; margin-bottom: var(--s8); }
.rail p { font-family: var(--f-ui); font-size: var(--t-small); line-height: 1.618; color: var(--ink-2); }
.rail .stempel { display: inline-block; margin-top: var(--s13); padding: 4px var(--s8); border: 2px solid var(--ink); font: 700 var(--t-label)/1.6 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; transform: rotate(-3deg); }
.rail .stempel.geel { border-color: var(--ink); background: var(--geel); padding-inline: var(--s8); }
@media (max-width: 767px) { .rail { padding-right: var(--s21); } }

/* ── wél nodig: genummerde lijst ──────────────────── */
.nodig { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-half); border-top: 2px solid var(--ink); }
.nodig li { display: grid; grid-template-columns: 55px minmax(0, 1fr); gap: 0 var(--s13); padding: var(--s24) 0 var(--s34); border-bottom: 1px solid var(--lijn-2); }
.nodig .nr { font: 500 var(--t-label)/2.2 var(--f-mono); color: var(--ink-3); grid-row: span 3; }
.nodig h3 { margin-bottom: var(--s8); }
.nodig p { color: var(--ink-2); }
.frag { margin-top: var(--s13); width: fit-content; max-width: 100%; background: var(--bon); padding: var(--s8) var(--s13); font: 400 var(--t-small)/1.7 var(--f-mono); font-variation-settings: "wdth" 80; border-left: 3px solid var(--ink); }
.frag s { color: var(--ink-3); }
.frag mark { background: var(--geel); padding-inline: 4px; }
@media (max-width: 767px) { .nodig { grid-template-columns: 1fr; } .nodig li { grid-template-columns: 34px 1fr; } }

/* ── niet op de kaart ─────────────────────────────── */
.niet { display: flex; flex-wrap: wrap; gap: var(--s8) var(--s24); margin-top: var(--s34); }
.niet li { font: 800 var(--t-h3)/var(--lh-kop) var(--f-head); font-variation-settings: "wdth" 70; text-transform: uppercase; text-decoration: line-through; text-decoration-thickness: .12em; color: var(--ink-3); }

/* ── rekenvoorbeeld ───────────────────────────────── */
.reken { background: var(--bon); padding: var(--s34); font-family: var(--f-mono); font-variation-settings: "wdth" 80; position: relative; }
.reken::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 8px; background: linear-gradient(-45deg, transparent 5px, var(--bon) 0) 0 0 / 10px 8px, linear-gradient(45deg, transparent 5px, var(--bon) 0) 0 0 / 10px 8px; }
.reken-in { display: grid; gap: var(--s21); padding-bottom: var(--s24); border-bottom: 1px dashed var(--lijn-3); }
.reken-in label { display: grid; gap: var(--s8); font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.reken-in label output { font: 800 var(--t-h3)/var(--lh-kop) var(--f-head); font-variation-settings: "wdth" 70; letter-spacing: 0; color: var(--ink); text-transform: none; }
.reken-in input[type=range] { accent-color: var(--ink); width: 100%; margin: 0; }
.reken-in .seg { border-color: var(--ink); }
.reken-in .seg button { color: var(--ink); font-family: var(--f-ui); }
.reken-in .seg button + button { border-left-color: var(--lijn-2); }
.reken-in .seg button[aria-pressed=true] { background: var(--ink); color: var(--bon); }
.check { display: flex !important; grid-auto-flow: column; align-items: center; gap: var(--s8) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: var(--t-small) !important; font-family: var(--f-ui); color: var(--ink) !important; }
.check input { width: 21px; height: 21px; accent-color: var(--ink); }
.reken-uit { padding-top: var(--s21); display: grid; gap: var(--s8); font-size: var(--t-small); }
.reken-rij { display: flex; gap: var(--s8); align-items: baseline; }
.reken-rij .stip { flex: 1; border-bottom: 1px dotted var(--lijn-3); }
.reken-rij b { font-weight: 700; }
.reken-rij.is-f b { background: var(--geel); padding-inline: 4px; }
.reken-verschil { margin-top: var(--s13); padding-top: var(--s13); border-top: 2px solid var(--ink); font-family: var(--f-ui); }
.reken-verschil strong { display: block; font: 850 var(--t-h2)/var(--lh-kop) var(--f-head); font-variation-settings: "wdth" 62; }
.reken-verschil p { color: var(--ink-2); font-size: var(--t-small); margin-top: var(--s8); }
.reken-noot { margin-top: var(--s21); font-size: var(--t-label); color: var(--ink-2); font-family: var(--f-mono); }

/* ── CTA-rij ──────────────────────────────────────── */
.slot .h1 { font-size: var(--t-h1-sectie); }
.slot .knoppen { margin-top: var(--s34); }

/* ── voet ─────────────────────────────────────────── */
.voet { background: var(--nacht); color: var(--bon); padding-block: var(--col) var(--s55); }
.voet-zin { font: 850 var(--t-h1)/var(--lh-kop) var(--f-head); font-variation-settings: "wdth" 62; text-transform: uppercase; letter-spacing: -.02em; font-size: var(--t-h1-sectie); }
.voet-zin mark { color: var(--geel); }
.voet-cta { align-self: end; display: grid; gap: var(--s13); justify-items: start; }
.voet-cta p { font-size: var(--t-small); color: rgba(251, 251, 247, .7); }
.voet-lijst { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s13) var(--s34); margin-top: var(--s89); padding-top: var(--s24); border-top: 1px solid rgba(251, 251, 247, .2); font-size: var(--t-small); }
.voet-lijst a { text-decoration: none; color: rgba(251, 251, 247, .8); }
.voet-lijst a:hover { color: var(--bon); text-decoration: underline; }
.voet-mt { margin-left: auto; color: rgba(251, 251, 247, .55); }
@media (max-width: 767px) { .voet-cta { margin-top: var(--s34); } .voet-mt { margin-left: 0; } }

/* zwevende bon-CTA */
.bon-cta { position: fixed; right: var(--s21); bottom: 0; z-index: 40; width: 200px; visibility: hidden; background: var(--bon); border: 1px solid var(--lijn-2); border-bottom: 0; padding: var(--s13) var(--s13) var(--s13); text-decoration: none; display: grid; gap: 4px; font: 400 var(--t-label)/1.5 var(--f-mono); font-variation-settings: "wdth" 80; transform: translateY(calc(100% + 13px)); transition: transform .6s var(--ease), visibility 0s .6s; }
.bon-cta::before { content: ""; position: absolute; left: -1px; right: -1px; top: -8px; height: 8px; background: linear-gradient(-135deg, transparent 5px, var(--bon) 0) 0 0 / 10px 8px, linear-gradient(135deg, transparent 5px, var(--bon) 0) 0 0 / 10px 8px; }
.bon-cta.is-zichtbaar { transform: translateY(0); visibility: visible; transition: transform .6s var(--ease), visibility 0s; }
.bon-cta:hover { transform: translateY(-8px); }
.bon-cta-l { letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); border-bottom: 1px dashed var(--lijn-3); padding-bottom: 4px; }
.bon-cta-p { font: 850 34px/var(--lh-kop) var(--f-head); font-variation-settings: "wdth" 62; padding-top: 4px; }
.bon-cta-p small { font: 500 var(--t-label) var(--f-mono); }
.bon-cta-k { background: var(--geel); padding: var(--s8); font: 700 var(--t-small)/1 var(--f-ui); text-align: center; margin-top: 4px; }
@media (max-width: 767px) {
  .bon-cta { left: var(--s13); right: var(--s13); width: auto; grid-template-columns: auto 1fr; align-items: center; column-gap: var(--s13); padding: var(--s8) var(--s13); }
  .bon-cta-l { display: none; }
  .bon-cta-p { font-size: 21px; padding: 0; }
  .bon-cta-k { margin: 0; }
}

/* ontwerp-label */
.mock { position: fixed; left: var(--s13); bottom: var(--s13); z-index: 50; display: flex; gap: var(--s8); align-items: center; background: var(--ink); color: var(--bon); border-radius: var(--rrond); padding: 4px var(--s13) 4px 4px; font-size: 13px; }
.mock-l { background: var(--geel); color: var(--ink); border-radius: var(--rrond); padding: 4px var(--s8); font: 600 11px/1.6 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; }

/* reveal */
.js .reveal { opacity: 0; transform: translateY(21px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal-1 { transition-delay: .1s; } .js .reveal-2 { transition-delay: .2s; } .js .reveal-3 { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

/* ── werking: paneelschermen ──────────────────────── */
.pkop { padding-top: var(--col-half); padding-bottom: var(--col); }
.pkop .h1 { max-width: 9em; }
.pkop .lead { margin-top: var(--s34); max-width: 30em; color: var(--ink); }
.inhoud-lijst { display: flex; flex-wrap: wrap; gap: var(--s8); margin-top: var(--s34); }
.inhoud-lijst a { display: inline-flex; gap: var(--s8); align-items: baseline; text-decoration: none; background: var(--bon); padding: var(--s8) var(--s13); font-weight: 600; font-size: var(--t-small); border: 1px solid var(--lijn-2); }
.inhoud-lijst a span { font: 500 var(--t-label)/1 var(--f-mono); color: var(--ink-3); }
.inhoud-lijst a:hover { border-color: var(--ink); }

.scherm { background: #fff; border: 1px solid var(--lijn-2); border-radius: var(--r8); overflow: hidden; font-size: var(--t-small); }
.scherm-top { display: flex; align-items: center; gap: var(--s13); padding: var(--s8) var(--s13); border-bottom: 1px solid var(--lijn); background: #F6F7F5; font: 500 var(--t-label)/2 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.scherm-top .merk { color: var(--ink); }
.scherm-top .merk svg { height: 14px; }
.scherm-tabs { display: flex; gap: 4px; margin-left: auto; }
.scherm-tabs span { padding: 0 var(--s8); border-radius: var(--r4); }
.scherm-tabs span.is-actief { background: var(--ink); color: #fff; }
.scherm-in { padding: var(--s21); }
.scherm-h { font: 800 var(--t-h4)/var(--lh-kop) var(--f-head); font-variation-settings: "wdth" 85; margin-bottom: var(--s13); display: flex; justify-content: space-between; align-items: baseline; gap: var(--s13); }
.scherm-h small { font: 500 var(--t-label)/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }

.uitleg-blok + .uitleg-blok { margin-top: var(--col); }
.uitleg .h2 { margin-bottom: var(--s21); }
.uitleg .tekst { max-width: 30em; }
.uitleg ul.vinkjes { margin-top: var(--s21); display: grid; gap: var(--s8); }
.vinkjes li { position: relative; padding-left: var(--s24); color: var(--ink-2); }
.vinkjes li::before { content: "✓"; position: absolute; left: 0; font-weight: 800; color: var(--ink); }
.rij-nacht .vinkjes li { color: rgba(251, 251, 247, .8); }
.rij-nacht .vinkjes li::before { color: var(--geel); }
.probeer { display: inline-block; margin-top: var(--s21); font: 500 var(--t-label)/1.6 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; background: var(--geel); color: var(--ink); padding: 4px var(--s8); }

/* uren */
.uren { display: grid; gap: var(--s8); }
.uren-as { display: grid; grid-template-columns: 55px 1fr 55px; font: 400 11px/1 var(--f-mono); color: var(--ink-3); }
.uren-as div { position: relative; height: 13px; }
.uren-as div span { position: absolute; transform: translateX(-50%); }
.uur-rij { display: grid; grid-template-columns: 55px 1fr 55px; align-items: center; gap: 0; }
.uur-dag { border: 0; background: none; text-align: left; padding: 0; font-weight: 700; font-size: var(--t-small); text-decoration: underline dotted var(--lijn-3); text-underline-offset: 3px; }
.uur-balk { position: relative; height: 34px; background: repeating-linear-gradient(90deg, #F2F3F1 0 calc(100% / 13 - 1px), #fff calc(100% / 13 - 1px) calc(100% / 13)); border-radius: var(--r4); }
.uur-blok { position: absolute; top: 4px; bottom: 4px; background: var(--ink); color: #fff; border-radius: 3px; font: 500 11px/26px var(--f-mono); padding-inline: var(--s8); overflow: hidden; white-space: nowrap; transition: opacity var(--t) var(--ease); }
.uur-rij.is-dicht .uur-blok { opacity: 0; }
.uur-dicht { font: 500 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); text-align: right; opacity: 0; }
.uur-rij.is-dicht .uur-dicht { opacity: 1; }
.uur-rij.is-dicht .uur-dag { color: var(--ink-3); }
.uitz { margin-top: var(--s13); display: grid; gap: var(--s8); }
.uitz li { display: flex; gap: var(--s13); align-items: center; padding: var(--s8) var(--s13); background: #F6F7F5; border-radius: var(--r4); }
.uitz b { font: 700 var(--t-label)/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; background: var(--geel); padding: 4px var(--s8); border-radius: 2px; }
.uitz b.dicht { background: var(--ink); color: #fff; }

/* tafels */
.tafels { display: flex; flex-wrap: wrap; gap: var(--s13) var(--s21); align-items: center; padding: var(--s13) 0; }
.tafel { position: relative; display: grid; place-items: center; background: #F2F3F1; border: 2px solid var(--ink); font: 700 var(--t-label)/1 var(--f-mono); transition: background var(--t) var(--ease); }
.tafel[data-z="2"] { width: 40px; height: 40px; border-radius: 50%; }
.tafel[data-z="4"] { width: 55px; height: 55px; border-radius: var(--r4); }
.tafel[data-z="6"] { width: 89px; height: 55px; border-radius: var(--r4); }
.tafel.is-past { background: var(--geel); }
.tafel.bezet { background: var(--ink); color: #fff; opacity: .35; }
.tafel-uit { min-height: 3.2em; padding: var(--s8) var(--s13); border-left: 3px solid var(--ink); background: #F6F7F5; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--lijn-3); border-radius: var(--r8); overflow: hidden; }
.stepper button { width: 40px; height: 40px; border: 0; background: #fff; font-size: 16px; font-weight: 700; }
.stepper output { min-width: 55px; text-align: center; font: 800 var(--t-h4)/var(--lh-kop) var(--f-head); font-variation-settings: "wdth" 80; }
.stepper-rij { display: flex; flex-wrap: wrap; gap: var(--s13); align-items: center; margin-bottom: var(--s13); }

/* aankomstrem */
.rem { overflow: hidden; display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s8); align-items: end; height: 160px; margin-top: var(--s13); border-bottom: 2px solid var(--ink); position: relative; }
.rem-k { display: flex; flex-direction: column-reverse; height: 100%; position: relative; }
.rem-in { background: var(--ink); transition: height .42s var(--ease); }
.rem-over { background: repeating-linear-gradient(135deg, var(--geel) 0 4px, transparent 4px 8px); border: 1px dashed var(--ink); border-bottom: 0; transition: height .42s var(--ease); }
.rem-lijn { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--ink); transition: bottom .42s var(--ease); }
.rem-lijn span { position: absolute; right: 0; top: -21px; font: 500 11px/1 var(--f-mono); background: #fff; padding: 4px; }
.rem-as { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s8); font: 400 11px/2 var(--f-mono); color: var(--ink-3); text-align: center; }
.rem-leg { display: flex; flex-wrap: wrap; gap: var(--s13); margin-top: var(--s8); font-size: 13px; color: var(--ink-2); }
.rem-leg i { display: inline-block; width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px; background: var(--ink); }
.rem-leg i.o { background: repeating-linear-gradient(135deg, var(--geel) 0 3px, transparent 3px 6px); border: 1px dashed var(--ink); }
.rem-ctl { margin-top: var(--s13); display: grid; gap: 4px; font: 500 var(--t-label)/1.6 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.rem-ctl input { accent-color: var(--ink); }

/* dagoverzicht */
.dag-tot { display: flex; gap: var(--s24); flex-wrap: wrap; margin-bottom: var(--s13); }
.dag-tot div { font: 500 var(--t-label)/1.4 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.dag-tot b { display: block; font: 850 var(--t-h3)/var(--lh-kop) var(--f-head); font-variation-settings: "wdth" 62; color: var(--ink); letter-spacing: 0; }
.dag-lijst { display: grid; }
.dag-r { display: grid; grid-template-columns: 55px 34px minmax(0, 1.4fr) minmax(0, 1.6fr) auto; gap: var(--s13); align-items: center; padding: var(--s8) 0; border-top: 1px solid var(--lijn); transition: opacity var(--t) var(--ease); }
.dag-r .u { font: 700 var(--t-small)/1 var(--f-mono); }
.dag-r .p { font: 800 var(--t-h4)/var(--lh-kop) var(--f-head); font-variation-settings: "wdth" 70; text-align: center; }
.dag-r .n b { display: block; }
.dag-r .n small { color: var(--ink-3); }
.tag { display: inline-block; font: 600 11px/1.6 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--ink); padding: 0 var(--s8); border-radius: 2px; margin: 4px 4px 0 0; white-space: nowrap; }
.tag.g { background: var(--geel); border-color: var(--geel); }
.tag.z { background: var(--ink); color: #fff; }
.dag-knop { display: flex; gap: 4px; }
.dag-knop button { border: 1px solid var(--lijn-3); background: #fff; border-radius: var(--r4); padding: 4px var(--s8); font: 600 13px/1.4 var(--f-ui); }
.dag-knop button[aria-pressed=true].k { background: var(--ink); color: #fff; border-color: var(--ink); }
.dag-knop button[aria-pressed=true].x { background: var(--geel); border-color: var(--ink); }
.dag-r.is-weg { opacity: .45; }
@media (max-width: 767px) {
  .dag-r { grid-template-columns: 44px 28px 1fr; }
  .dag-r .t { grid-column: 3; }
  .dag-r .dag-knop { grid-column: 3; }
}

/* gastenboek */
.zoek { width: 100%; border: 1px solid var(--lijn-3); border-radius: var(--r8); padding: 11px var(--s13); margin-bottom: var(--s13); background: #fff; }
.gasten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s8); }
.gast { border: 1px solid var(--lijn); border-radius: var(--r8); padding: var(--s13); }
.gast b { display: block; font-size: var(--t-body); }
.gast small { display: block; color: var(--ink-3); margin-bottom: 4px; }
.gast[hidden] { display: none; }
@media (max-width: 767px) { .gasten { grid-template-columns: 1fr; } }

/* mails */
.mails { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s21); }
.mail { background: #fff; color: var(--ink); border-radius: var(--r8); overflow: hidden; font-size: var(--t-small); }
.mail-kop { padding: var(--s13); border-bottom: 1px solid var(--lijn); display: grid; gap: 4px; font: 400 var(--t-label)/1.6 var(--f-mono); color: var(--ink-2); }
.mail-kop b { font-family: var(--f-ui); font-size: var(--t-small); color: var(--ink); }
.mail-in { padding: var(--s13) var(--s13) var(--s21); display: grid; gap: var(--s8); }
.mail-knop { display: inline-block; width: fit-content; padding: var(--s8) var(--s13); background: var(--ink); color: #fff; border-radius: var(--r4); font-weight: 700; font-size: 13px; }
.mail-knop.l { background: #fff; color: var(--ink); border: 1px solid var(--ink); }
.mail-ics { display: flex; align-items: center; gap: var(--s8); padding: var(--s8); border: 1px dashed var(--lijn-3); border-radius: var(--r4); font: 400 var(--t-label)/1.4 var(--f-mono); }
.mail-ics span { width: 28px; height: 32px; border: 2px solid var(--ink); border-top-width: 7px; border-radius: 3px; display: grid; place-items: center; font: 800 11px/var(--lh-kop) var(--f-head); }
@media (max-width: 1023px) { .mails { grid-template-columns: 1fr; } }

/* twee manieren */
.manieren { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s21); }
.manier { background: var(--bon); padding: var(--s34); display: grid; gap: var(--s13); align-content: start; }
.manier .code { background: var(--nacht); color: rgba(251, 251, 247, .85); }
.url { font: 500 var(--t-small)/1.6 var(--f-mono); background: #fff; border: 1px solid var(--lijn-2); border-radius: var(--r4); padding: var(--s8) var(--s13); }
.url b { background: var(--geel); font-weight: 600; }
@media (max-width: 767px) { .manieren { grid-template-columns: 1fr; } }

/* installatie-tijdlijn */
.tijd { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.tijd li { padding: var(--s21) var(--s21) 0 0; position: relative; }
.tijd li::before { content: ""; position: absolute; top: -8px; left: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--ink); }
.tijd li:last-child::before { background: var(--geel); border: 2px solid var(--ink); width: 21px; height: 21px; top: -13px; }
.tijd b { display: block; font: 850 var(--t-h3)/var(--lh-kop) var(--f-head); font-variation-settings: "wdth" 62; margin-bottom: var(--s8); }
.tijd p { font-size: var(--t-small); color: var(--ink-2); }
@media (max-width: 767px) { .tijd { grid-template-columns: 1fr; border-top: 0; border-left: 2px solid var(--ink); } .tijd li { padding: 0 0 var(--s24) var(--s24); } .tijd li::before { left: -8px; top: 4px; } .tijd li:last-child::before { left: -13px; top: 0; } }

/* ── voorbeelden ──────────────────────────────────── */
.vb-tabs { display: flex; flex-wrap: wrap; gap: var(--s8); margin-bottom: var(--s34); }
.vb-tabs button { border: 2px solid var(--ink); background: transparent; padding: var(--s8) var(--s21); font: 700 var(--t-small)/1.4 var(--f-ui); border-radius: var(--r8); display: grid; text-align: left; }
.vb-tabs button small { font: 500 11px/1.6 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.vb-tabs button[aria-selected=true] { background: var(--ink); color: var(--bon); }
.vb-tabs button[aria-selected=true] small { color: rgba(251, 251, 247, .6); }
.vb { display: none; }
.vb.is-actief { display: grid; }
.vb-site { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0; border: 1px solid var(--lijn-2); overflow: hidden; }
.vb-links { padding: var(--s55) var(--s40); display: grid; align-content: space-between; gap: var(--s34); min-height: 620px; position: relative; }
.vb-rechts { padding: var(--s40); display: grid; place-items: center; }
.vb-nav { display: flex; justify-content: space-between; gap: var(--s13); font-size: var(--t-small); }
.vb-nav span:first-child { font-weight: 800; }
.vb-titel { max-width: 11em; }
.vb-meta { display: flex; flex-wrap: wrap; gap: var(--s24); font-size: var(--t-small); }
.vb-meta b { display: block; font-size: var(--t-label); text-transform: uppercase; letter-spacing: .1em; opacity: .7; }
/* het anker: brasserie, petrol + messing */
.vb-anker .vb-links { background: #17363A; color: #F3EBDD; }
.vb-anker .vb-rechts { background: #EDE5D6; }
.vb-anker .vb-titel { font: italic 400 var(--t-h2)/1 Georgia, "Times New Roman", serif; }
/* kaito: sushibar, zwart + rood */
.vb-kaito .vb-links { background: #F4F2EF; color: #151515; }
.vb-kaito .vb-rechts { background: #151515; }
.vb-kaito .vb-titel { font: 300 var(--t-h2)/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; }
.vb-kaito .vb-stip { position: absolute; right: var(--s40); top: 45%; width: 89px; height: 89px; border-radius: 50%; background: #C8102E; }
/* mon ami: bistro, olijf + crème, frans */
.vb-monami .vb-links { background: #E9E4CF; color: #2F3319; }
.vb-monami .vb-rechts { background: #5D6B2F; }
.vb-monami .vb-titel { font: 800 var(--t-h2)/var(--lh-kop) var(--f-head); font-variation-settings: "wdth" 120; }
.vb-uitleg { margin-top: var(--s34); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s21); border-top: 2px solid var(--ink); padding-top: var(--s21); }
.vb-uitleg dt { font: 500 var(--t-label)/1.6 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.vb-uitleg dd { font-weight: 600; }
@media (max-width: 1023px) { .vb-site { grid-template-columns: 1fr; } .vb-links { min-height: 0; } }
@media (max-width: 767px) { .vb-uitleg { grid-template-columns: 1fr; } .vb-links, .vb-rechts { padding: var(--s24) var(--s21); } .vb-kaito .vb-stip { width: 55px; height: 55px; top: var(--s24); right: var(--s21); } }

.eigen-pagina { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s34); align-items: center; }
.browser { background: #fff; border: 1px solid var(--lijn-2); border-radius: var(--r8); overflow: hidden; }
.browser-balk { display: flex; align-items: center; gap: var(--s8); padding: var(--s8) var(--s13); background: #F2F3F1; border-bottom: 1px solid var(--lijn); }
.browser-balk i { width: 11px; height: 11px; border-radius: 50%; background: #C8CDC7; }
.browser-balk span { flex: 1; margin-left: var(--s8); background: #fff; border-radius: var(--r4); padding: 4px var(--s8); font: 400 var(--t-label)/1.8 var(--f-mono); }
.browser-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--s21); padding: var(--s21); background: #F7F7F4; }
.browser-in h4 { font: 800 var(--t-h4)/var(--lh-kop) var(--f-head); font-variation-settings: "wdth" 80; }
.browser-in .klein { margin-top: var(--s8); }
.browser-uren { margin-top: var(--s13); background: #fff; border: 1px solid var(--lijn); border-radius: var(--r8); padding: var(--s13); font-size: 13px; }
.browser-uren b { display: block; font: 600 11px/1.6 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.browser-in .fw-plek { max-width: none; }
.browser-in .fw-stap { min-height: 0; }
@media (max-width: 1023px) { .eigen-pagina { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .browser-in { grid-template-columns: 1fr; } }

/* ── aanvragen ────────────────────────────────────── */
.prijs-groot { font: 850 var(--t-h1)/var(--lh-kop) var(--f-head); font-variation-settings: "wdth" 55; letter-spacing: -.02em; display: flex; align-items: flex-start; }
.prijs-groot sup { font-size: var(--t-h3); margin-top: .12em; margin-right: .04em; }
.prijs-groot small { font: 500 var(--t-small)/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; align-self: flex-end; margin: 0 0 .9em var(--s13); }
.inbegrepen { display: grid; gap: 0; border-top: 2px solid var(--ink); }
.inbegrepen li { display: flex; gap: var(--s13); padding: var(--s8) 0; border-bottom: 1px solid var(--lijn-2); font-weight: 600; }
.inbegrepen li::before { content: "✓"; font-weight: 800; }
.inbegrepen li.extra { font-weight: 400; color: var(--ink-2); }
.inbegrepen li.extra::before { content: "+"; }

.form { background: var(--bon); padding: var(--s55) var(--s40); position: relative; }
.form-rij { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s21); }
.form fieldset { border: 0; padding: 0; margin: 0 0 var(--s40); }
.form legend { font: 800 var(--t-h3)/var(--lh-kop) var(--f-head); font-variation-settings: "wdth" 75; margin-bottom: var(--s21); padding: 0; display: flex; gap: var(--s13); align-items: baseline; }
.form legend span { font: 500 var(--t-label)/1 var(--f-mono); color: var(--ink-3); }
.veld { display: grid; gap: var(--s8); margin-bottom: var(--s21); }
.veld > span { font-weight: 600; font-size: var(--t-small); }
.veld > span small { font-weight: 400; color: var(--ink-3); }
.veld input, .veld select, .veld textarea { width: 100%; border: 0; border-bottom: 2px solid var(--lijn-3); background: transparent; padding: var(--s8) 0; font: 500 var(--t-lead)/1.4 var(--f-ui); border-radius: 0; }
.veld textarea { font-size: var(--t-body); border: 2px solid var(--lijn-3); padding: var(--s8); border-radius: var(--r4); }
.veld input:focus, .veld select:focus, .veld textarea:focus { outline: none; border-color: var(--ink); background: linear-gradient(transparent 70%, color-mix(in srgb, var(--geel) 45%, transparent) 0); }
.keuzes { display: flex; flex-wrap: wrap; gap: var(--s8); }
.keuzes label { position: relative; }
.keuzes input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.keuzes span { display: inline-block; padding: var(--s8) var(--s13); border: 2px solid var(--ink); border-radius: var(--r8); font-weight: 600; font-size: var(--t-small); }
.keuzes .dot { display: inline-block; width: 13px; height: 13px; border-radius: 50%; background: var(--c); margin-right: var(--s8); vertical-align: -1px; border: 1px solid rgba(255,255,255,.5); }
.keuzes input:checked + span { background: var(--ink); color: var(--bon); }
.keuzes input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }
.voorproef { background: #fff; border: 1px solid var(--lijn-2); border-radius: var(--r8); padding: var(--s21); display: grid; gap: var(--s13); }
.voorproef-knop { display: inline-flex; width: fit-content; padding: var(--s13) var(--s21); border-radius: var(--r8); background: var(--a, var(--geel)); color: var(--a-ink, var(--ink)); font-weight: 700; }
.form-verstuur { display: flex; flex-wrap: wrap; gap: var(--s21); align-items: center; border-top: 2px solid var(--ink); padding-top: var(--s24); }
.form-verstuur p { flex: 1 1 240px; font-size: var(--t-small); color: var(--ink-2); }
.form-bedankt { display: none; text-align: center; padding: var(--s55) 0; }
.form.is-verstuurd .form-bedankt { display: block; }
.form.is-verstuurd form { display: none; }
.form-bedankt .h2 { margin: var(--s13) 0; }
.form-bedankt .bon { max-width: 340px; margin: var(--s34) auto 0; text-align: left; border: 1px solid var(--lijn-2); }
@media (max-width: 767px) { .form { padding: var(--s34) var(--s21); } .form-rij { grid-template-columns: 1fr; gap: 0; } }

.faq { border-top: 2px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--lijn-2); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--s21); padding: var(--s21) 0; font: 800 var(--t-h4)/var(--lh-kop) var(--f-head); font-variation-settings: "wdth" 85; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--f-mono); font-weight: 400; transition: transform var(--t) var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 var(--s21); color: var(--ink-2); max-width: 40em; }
@media (max-width: 767px) {
  .scherm-top > span:not(.scherm-tabs) { display: none; }
  .dag-tot { gap: var(--s13); }
  .dag-tot b { font-size: var(--t-h4); }
}

/* en verder: uitbreidbare lijst */
.meer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-half); border-top: 2px solid var(--ink); }
.meer li { padding: var(--s21) 0 var(--s24); border-bottom: 1px solid var(--lijn-2); }
.meer h3 { margin-bottom: var(--s8); }
.meer p { color: var(--ink-2); font-size: var(--t-body); }
.meer .mono { font-size: var(--t-small); background: var(--geel); padding: 0 4px; text-transform: none; letter-spacing: 0; }
@media (max-width: 1023px) { .meer { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .meer { grid-template-columns: 1fr; } }
.gast-filters { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: var(--s13); }
.gast-filters span { font: 600 13px/1.6 var(--f-ui); border: 1px solid var(--lijn-2); border-radius: var(--rrond); padding: 4px var(--s8); }
.gast-filters span.is-actief { background: var(--ink); color: #fff; border-color: var(--ink); }
.mail-in .mail-knop + .mail-knop { margin-top: -4px; }
.fw-walkin { font-size: var(--t-small); color: var(--fw-2); padding: var(--s8) var(--s13); background: #F2F3F1; border-radius: calc(var(--fw-r) * .5); }

/* ── werking: tafels per zone ── */
.zone-naam { font: 700 var(--t-small)/1.4 var(--f-ui); margin-top: var(--s13); }
.zone-naam small { font: 500 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-left: var(--s8); }
.tf, .combo { display: inline-grid; place-items: center; border: 2px solid var(--ink); background: #fff; font: 700 var(--t-label)/1 var(--f-mono); padding: 0; transition: background var(--t) var(--ease); }
.tf[data-z="2"] { width: 40px; height: 40px; border-radius: 50%; }
.tf[data-z="4"] { width: 55px; height: 55px; border-radius: var(--r4); }
.tf[data-z="6"] { width: 89px; height: 55px; border-radius: var(--r4); }
.combo { height: 34px; padding: 0 var(--s13); border-style: dashed; border-radius: var(--r4); }
.tf.bezet { background: var(--ink); color: #fff; opacity: .35; }
.tf.is-past, .combo.is-past { background: var(--geel); }
.tafels.is-offline .tf { border-style: dashed; color: var(--ink-3); border-color: var(--ink-3); }

/* ── werking: zaalplan ── */
.plan-kop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s13); margin-bottom: var(--s13); }
.plan-uur { display: flex; align-items: center; gap: var(--s13); font-weight: 700; font-size: var(--t-small); }
.plan-uur output { font: 700 var(--t-h4)/var(--lh-kop) var(--f-head); font-variation-settings: "wdth" 70; min-width: 3.2em; }
.plan-uur input { accent-color: var(--ink); width: min(240px, 40vw); }
.plan-walkin { border: 2px solid var(--ink); background: #fff; border-radius: var(--r8); padding: var(--s8) var(--s13); font: 700 var(--t-small)/1 var(--f-ui); }
.plan-walkin[aria-pressed=true] { background: var(--geel); }
.plan { position: relative; aspect-ratio: 1000 / 640; background: #F6F7F5; border: 2px solid var(--ink); border-radius: var(--r4); overflow: hidden; }
.plan.is-kies .pt.s-vrij, .plan.is-kies .pt.s-straks { outline: 3px solid var(--geel); outline-offset: 2px; }
.decor { position: absolute; font: 500 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); display: grid; place-items: center; }
.decor.toog { right: 4%; top: 6%; width: 9%; height: 70%; background: #E3E6E2; border: 1px solid var(--lijn-2); writing-mode: vertical-rl; }
.decor.raam { left: 0; top: 10%; width: 6px; height: 60%; background: #C9D8E0; color: transparent; }
.decor.deur { left: 40%; bottom: 0; width: 14%; height: 8px; background: var(--ink-3); color: transparent; }
.decor.plant { right: 18%; bottom: 8%; width: 34px; height: 34px; border-radius: 50%; background: #B9C7B3; }
.pt { position: absolute; display: grid; place-items: center; align-content: center; gap: 0; border: 2px solid var(--ink); background: #fff; color: var(--ink); padding: 0; font: 700 var(--t-small)/1.1 var(--f-mono); transition: background var(--t) var(--ease), color var(--t) var(--ease); z-index: 1; }
.pt small { font: 500 11px/1 var(--f-mono); min-height: 11px; }
.pt.z2 { width: 9%; aspect-ratio: 1; border-radius: 50%; }
.pt.z4 { width: 13%; aspect-ratio: 1; border-radius: var(--r4); }
.pt.z6 { width: 18%; aspect-ratio: 1.4; border-radius: var(--r4); }
.pt.s-vrij { background: #fff; }
.pt.s-straks { background: #E1E4E0; }
.pt.s-verwacht { background: var(--geel); }
.pt.s-laat { background: var(--geel); border-style: dashed; }
.pt.s-tafel { background: var(--ink); color: #fff; }
.pt-lijn { position: absolute; width: 4px; margin-left: -2px; background: var(--ink); transform-origin: top center; z-index: 0; display: none; pointer-events: none; }
.pt { touch-action: none; cursor: grab; }
.pt.is-sleep { z-index: 5; outline: 3px solid var(--geel); outline-offset: 2px; cursor: grabbing; }
.plan-scherm.is-bewerk .plan { background-color: #fff; background-image: linear-gradient(var(--lijn) 1px, transparent 1px), linear-gradient(90deg, var(--lijn) 1px, transparent 1px); background-size: 2% 3.125%; }
.plan-scherm.is-bewerk .pt { background: #fff; color: var(--ink); border-style: solid; }
.plan-scherm.is-bewerk .plan-walkin { opacity: .35; pointer-events: none; }
.plan-modus { display: inline-flex; border: 2px solid var(--ink); border-radius: var(--r8); overflow: hidden; }
.plan-modus button { border: 0; background: #fff; padding: var(--s8) var(--s13); font: 700 13px/1 var(--f-ui); }
.plan-modus button[aria-pressed=true] { background: var(--ink); color: #fff; }
.plan-terug { border: 1px solid var(--lijn-3); background: #fff; border-radius: var(--r8); padding: var(--s8) var(--s13); font: 600 13px/1 var(--f-ui); display: none; }
.plan-scherm.is-bewerk .plan-terug { display: inline-block; }
.plan-terug[disabled] { opacity: .4; }
.plan-knoppen { display: flex; gap: var(--s8); flex-wrap: wrap; }
.plan-leg { display: flex; flex-wrap: wrap; gap: var(--s8) var(--s13); margin-top: var(--s13); font-size: 13px; color: var(--ink-2); }
.plan-leg i { display: inline-block; width: 13px; height: 13px; border: 1.5px solid var(--ink); border-radius: 3px; vertical-align: -2px; margin-right: 4px; }
.plan-leg .s-vrij { background: #fff; } .plan-leg .s-straks { background: #E1E4E0; } .plan-leg .s-verwacht { background: var(--geel); }
.plan-leg .s-laat { background: var(--geel); border-style: dashed; } .plan-leg .s-tafel { background: var(--ink); }
.plan-info { margin-top: var(--s13); min-height: 3.2em; padding: var(--s8) var(--s13); border-left: 3px solid var(--ink); background: #F6F7F5; font-size: var(--t-small); }

/* ── werking: tijdlijn ── */
.tl { display: grid; gap: 4px; user-select: none; -webkit-user-select: none; }
.tl-as, .tl-rij { display: grid; grid-template-columns: 34px 1fr; align-items: center; }
.tl-as div { position: relative; height: 21px; }
.tl-as i { position: absolute; transform: translateX(-50%); font: 400 11px/2 var(--f-mono); font-style: normal; color: var(--ink-3); }
.tl-t { font: 700 var(--t-label)/1 var(--f-mono); }
.tl-baan { position: relative; height: 30px; background: repeating-linear-gradient(90deg, #F2F3F1 0 calc(100% / 22 - 1px), #fff calc(100% / 22 - 1px) calc(100% / 22)); border-radius: 3px; }
.tl-blok { position: absolute; top: 4px; bottom: 4px; background: var(--ink); color: #fff; border-radius: 3px; font: 500 11px/24px var(--f-mono); padding: 0 var(--s8); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: grab; touch-action: none; }
.tl-blok.is-vast { background: var(--ink-2); cursor: default; }
.tl-blok.is-sleep { background: var(--geel); color: var(--ink); z-index: 5; cursor: grabbing; outline: 2px solid var(--ink); }
.tl-melding { min-height: 3.2em; margin-top: var(--s13); font-size: var(--t-small); }
.tl-melding button { margin: 4px var(--s8) 0 0; border: 1px solid var(--ink); background: #fff; border-radius: var(--r4); padding: 4px var(--s8); font: 600 13px/1.4 var(--f-ui); }
.tl-melding button:first-child { background: var(--ink); color: #fff; }

/* ── werking: gastenboek-filters en mailing ── */
.gast-filters button { font: 600 13px/1.6 var(--f-ui); border: 1px solid var(--lijn-2); border-radius: var(--rrond); padding: 4px var(--s8); background: #fff; }
.gast-filters button[aria-pressed=true] { background: var(--ink); color: #fff; border-color: var(--ink); }
.mailing { margin-top: var(--s21); padding-top: var(--s13); border-top: 1px dashed var(--lijn-3); display: grid; gap: var(--s8); --a: var(--geel); --a-ink: var(--ink); --fw-r: 13px; }
.mailing-kop { font-weight: 700; }
.mailing-let { font-size: 13px; color: var(--ink-2); }
.mailing .zoek { margin-bottom: 0; font: inherit; font-size: var(--t-small); }
.mailing-go { margin-top: 0; }
.merk-30 .merk svg { height: 30px; } .merk-18 .merk svg { height: 18px; } .merk-11 .merk svg { height: 11px; }
[style*="--h:"] > .merk svg, .merk[style*="--h:"] svg { height: var(--h); }
.fw-check { display: flex !important; grid-auto-flow: column; gap: var(--s8) !important; align-items: flex-start; font-weight: 400 !important; color: var(--fw-2); }
.fw-check input { width: 18px !important; height: 18px; margin-top: 2px; accent-color: var(--a); flex: none; }
.plan-tot { margin-left: var(--s8); border: 1px solid var(--ink); background: var(--ink); color: #fff; border-radius: var(--r4); padding: 4px var(--s8); font: 600 13px/1.6 var(--f-ui); }

/* ── gsm (≤767): nagekeken op 375 px ── */
@media (max-width: 767px) {
  /* doorhaalstreep per regel: een lange regel mag afbreken zonder dat de streep tussen twee regels valt */
  .schrap-lijst li:not(.blijft)::after { content: none; }
  .schrap-lijst li:not(.blijft) s { background: linear-gradient(var(--ink), var(--ink)) 0 58% / 100% .11em no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .42s var(--ease) var(--vertraging, 0s); }
  .js .schrap.is-klaar-om .schrap-lijst li:not(.blijft) s { background-size: 0% .11em; }
  /* uitleg vóór het scherm, ook waar ze op desktop afwisselen */
  .uitleg > :has(> .kicker) { order: -1; }
  .uitleg > .reveal { margin-top: var(--s34); }
  /* knoppengroepen vullen de breedte */
  .seg { width: 100%; }
  .seg button { flex: 1 1 auto; }
  /* paneelschermen */
  .uur-blok { color: transparent; }
  .pt.z2 small { display: none; }
  .tl-uur { display: none; }
  .fw-talen button { min-width: 40px; min-height: 40px; }
  /* aanraakdoelen: minstens 40 px voor een duim */
  .schrap-opnieuw, .uur-dag, .gast-filters button, .plan-modus button, .plan-walkin, .plan-terug, .tl-melding button, .dag-knop button, .code-knop { min-height: 40px; }
  .gast-filters button { padding-inline: var(--s13); }
  .pt.z2 { width: 11%; }
  /* ontwerp-label klein linksonder, €19-bon compact rechtsonder: ze raken elkaar niet */
  .mock { left: var(--s13); right: auto; bottom: var(--s13); padding-right: var(--s8); }
  .mock a { font-size: 0; }
  .mock a::after { content: "uitleg"; font-size: 13px; }
  .bon-cta { left: auto; right: var(--s13); width: auto; }
}
.form-melding { flex-basis: 100%; font-weight: 600; color: var(--ink); background: var(--geel); padding: var(--s8) var(--s13); }
.form-melding:empty { display: none; }

/* afdrukken: alles zichtbaar, geen zwevende elementen */
@media print {
  .js .reveal, .js .rekening-plek .bon { opacity: 1 !important; transform: none !important; }
  .bon-cta, .mock { display: none !important; }
}
.voet-mt a, .speel-noot a, .klein a { text-decoration: underline; text-underline-offset: 3px; }