/* ============================================================
Feestkanaal — componenten
------------------------------------------------------------
Uit site/mockups/v2.html getrokken, ontdubbeld (.panel en
.chan stonden er twee keer in) en op de tokens gezet.
Geen losse hexjes: alles via var(--…) uit tokens.css.
============================================================ */
/* ── merkteken ─────────────────────────────────────────────
Het getekende logo: discobal met koptelefoon plus woordmerk.
Als mask, niet als ![]()
, zodat hij zijn kleur van de context
erft — donker op wit, wit op een donkere band, zonder tweede
bestand. Het tekstmerk met drie gekleurde stippen is vervallen
(DESIGNSYSTEM par. 6) en staat nergens meer in de markup. */
/* ── logo: twee lagen, want het merk beweegt en het woord niet ──────
Variant F (slingeren), besluit Dave 17 sep 2026. Het logo kwam hiervoor
uit één mask met het hele liggende lockup erin; bij rotatie kantelt het
woordmerk dan mee en dat leest als een scheef logo in plaats van als een
slingerend merk. Dus ::before is het merk en ::after het woord, elk met
zijn eigen bestand. De percentages komen uit de compositie van
feestkanaal-liggend.svg: merk 47 van 154 breed over de volle hoogte,
woord 104 breed en 28 hoog, met 3px ertussen. Elke .logo-maat op de site
heeft dezelfde 3,5:1-verhouding (154x44 in de balk, 336x96 op de hero),
dus procenten kloppen in beide standen. */
.logo { display: inline-block; width: 154px; height: 44px; flex: none;
position: relative;
font-size: 0; line-height: 0; color: inherit; text-decoration: none; }
.logo::before, .logo::after {
content: ""; position: absolute; background-color: currentColor;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
-webkit-mask-size: contain; mask-size: contain; }
.logo::before { left: 0; top: 0; width: 30.52%; height: 100%;
-webkit-mask-image: url(/ds/logo/feestkanaal-merk.svg);
mask-image: url(/ds/logo/feestkanaal-merk.svg);
transform-origin: 50% 84%; }
/* ⚠️ feestkanaal-woord.svg, NOOIT feestkanaal-woord-swoosh.svg. De streep
onder het woord is er bewust afgehaald en komt niet terug (Dave, 18 sep
2026: "dat ding hebben we weggehaald, die klopt niet, gebruik die streep
nooit meer"). De bron en de staande uitsnede hebben hem nog wel - dat is
geen aanwijzing dat hij moet blijven, dat is oud materiaal. Wie hem
terugzet omdat de bron elf paden heeft, zet hem voor de tweede keer
terug; dat is op 18 sep 2026 al een keer gebeurd. */
.logo::after { left: 32.47%; top: 18.18%; width: 67.53%; height: 63.64%;
-webkit-mask-image: url(/ds/logo/feestkanaal-woord.svg);
mask-image: url(/ds/logo/feestkanaal-woord.svg); }
.logo.merk { width: 47px; height: 44px; }
.logo.merk::before { width: 100%; }
.logo.merk::after { display: none; }
.logo.groot { width: 267px; height: 70px; }
/* De slinger zelf: 5 graden linksom naar 5 graden rechtsom en terug, met de
dreun op het moment dat hij aan het eind van zijn slag komt. Daar valt de
tel. Letterlijk overgenomen uit variant F op ontwerp/logo-beweging.html,
zodat de site doet wat die pagina belooft. */
@keyframes fk-slinger {
0% { transform: rotate(-5deg) scale(1, 1); }
4% { transform: rotate(-5deg) scale(1.06, .94); }
12% { transform: rotate(-4.4deg) scale(.99, 1.02); }
46% { transform: rotate(4.4deg) scale(1, 1); }
50% { transform: rotate(5deg) scale(1, 1); }
54% { transform: rotate(5deg) scale(1.06, .94); }
62% { transform: rotate(4.4deg) scale(.99, 1.02); }
96% { transform: rotate(-4.4deg) scale(1, 1); }
100% { transform: rotate(-5deg) scale(1, 1); }
}
/* Overal doorlopend: in de balk in beide standen en in de voet. Tot 17 sep
2026 slingerde alleen het grote logo over de hero en stond hij in de
gepinde balk stil, met het idee dat bewegen naast leestekst een tic is.
Dave wil hem standaard laten bewegen - het merk is een discobal - dus die
uitzondering is eraf. Hover blijft niets extra's doen; hij liep al. */
.logo::before { animation: fk-slinger 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
.logo::before { animation: none; }
}
.channelline { display: flex; height: 4px; }
.channelline i { flex: 1; }
.channelline i:nth-child(1) { background: var(--ch1); }
.channelline i:nth-child(2) { background: var(--ch2); }
.channelline i:nth-child(3) { background: var(--ch3); }
/* ── knoppen ───────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px;
border: 0; border-radius: var(--r-btn); padding: 15px 26px; cursor: pointer;
font: inherit; font-weight: var(--w-bold); text-decoration: none; text-align: center;
background: var(--brand); color: var(--on-brand);
transition: background var(--dur-fast), transform .12s; }
.btn:hover { background: var(--brand-d); }
.btn:active { transform: translateY(1px); }
.btn.sm { padding: 10px 18px; font-size: var(--t-sm); border-radius: var(--r-sm); }
.btn.lg { padding: 18px 30px; font-size: 1.06rem; }
.btn.block { width: 100%; }
.btn.line { background: none; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn.line:hover { background: var(--wash); box-shadow: inset 0 0 0 1px var(--soft); }
/* WhatsApp-groen haalt met wit 1,98:1 — de tekst is daarom donker */
.btn.wa { background: var(--wa); color: #06301a; }
.btn.wa:hover { background: #1eb955; }
/* ── header ────────────────────────────────────────────────── */
.bar { position: sticky; top: 0; z-index: 60; background: var(--bg); border-bottom: 1px solid var(--line); }
.bar .wrap { display: flex; align-items: center; gap: var(--s6); height: 76px; }
.nav { display: flex; gap: 22px; font-size: var(--t-sm); margin-left: 10px; }
.nav a { text-decoration: none; color: var(--soft); }
.nav a:hover { color: var(--ink); }
.bar .right { margin-left: auto; display: flex; align-items: center; gap: var(--s4); }
.tel { text-decoration: none; font-size: .93rem; color: var(--soft); white-space: nowrap; }
.tel b { color: var(--ink); font-weight: var(--w-bold); }
/* ── mobiel menu ───────────────────────────────────────────────
Onder 1000px verdwenen .nav en .tel en kwam er niets voor terug: op een
telefoon stond er alleen een logo en de prijsknop, en was geen enkele
andere pagina te bereiken. (Dave, 17 sep 2026: "geen menu op mobiel".)
Een schakelaar zónder javascript — een checkbox die de balk openklapt.
Zo krijgen alle 62 pagina's hem uit dit ene bestand, ook de twee
handgeschreven pagina's (/ en /bestellen/), en doet hij het ook als een
script niet laadt. De checkbox staat vóór .nav in de markup, want de
schakeling loopt over ~ ; de knop reist met order naar rechts.
De drie streepjes dragen de drie kanaalkleuren: dezelfde drie kanalen
als in de streep boven de balk en in de koptelefoon zelf. */
.navschakel { display: none; }
.navknop { display: none; }
.navtel { display: none; }
@media (max-width: 1000px) {
.bar .wrap { position: relative; }
/* Weggeschoven maar wél bereikbaar met tab: de spatiebalk schakelt hem. */
.navschakel { display: block; position: absolute; left: -9999px;
width: 1px; height: 1px; }
.navknop { display: grid; place-items: center; order: 9;
width: 44px; height: 44px; flex: none; margin-right: -9px;
cursor: pointer; border-radius: var(--r-sm); }
.navknop span,
.navknop span::before,
.navknop span::after {
content: ""; display: block; width: 24px; height: 3px; border-radius: 2px;
background: var(--ch2);
transition: transform var(--dur) var(--ease),
background var(--dur-fast) linear; }
.navknop span { position: relative; }
.navknop span::before { position: absolute; top: -8px; background: var(--ch1); }
.navknop span::after { position: absolute; top: 8px; background: var(--ch3); }
/* Open: de buitenste twee kruisen, de middelste valt weg. Niet met
opacity op de span — die neemt de twee ::-lijnen mee. */
.navschakel:checked + .navknop span { background: transparent; }
.navschakel:checked + .navknop span::before { transform: translateY(8px) rotate(45deg); }
.navschakel:checked + .navknop span::after { transform: translateY(-8px) rotate(-45deg); }
.navschakel:focus-visible + .navknop { outline: var(--focus-w) solid var(--focus-c);
outline-offset: 2px; }
/* In de bovenstand van de homepage ligt de balk over de hero; daar staan
drie dunne streepjes op een drukke foto. Dezelfde schaduw als de nav. */
.bar:not(.klein) .navknop { filter: drop-shadow(0 1px 8px rgba(0, 0, 0, .6)); }
/* De balk moest passen: logo 154 + knop 150 + hamburger 44 + goten 48 is
396px en een telefoon is er 390. De knop brak daardoor over twee regels
en werd hoger dan de balk. Alles een maatje kleiner en de knop op een
regel houden scheelt 40px. */
.bar .logo { width: 128px; height: 37px; }
.bar .right { gap: var(--s3); }
.bar .right .btn.sm { white-space: nowrap; padding: 9px 14px; font-size: .87rem; }
/* Op de homepage staat het logo groot en gecentreerd over de hero (variant
C, besluit Dave 15 sep) en dat is absoluut gepositioneerd: de knop rechts
schuift er dus dwars overheen. Boven de vouw heeft de hero zijn eigen
rekenkaart met dezelfde knop, dus daar kan de balkknop weg; zodra de balk
gepind is staat het logo klein links en past hij weer. Zo blijft het
gecentreerde logo heel. Alleen daar: de stadspagina's hebben een gewoon
logo links in de flow en houden hun knop dus in beide standen. */
.bar:not(.klein) .logo.midden ~ .right .btn { display: none; }
/* Het paneel. Vier klassen diep omdat home.css later laadt en daar
.bar .nav en .bar.klein .nav staan; met drie zou het gelijkspel zijn. */
.bar .wrap .navschakel ~ .nav {
display: none; position: absolute; top: 100%; left: 0; right: 0;
flex-direction: column; gap: 0; margin: 0;
padding: var(--s1) var(--gutter) var(--s3);
background: var(--bg); border-bottom: 1px solid var(--line);
box-shadow: 0 20px 34px -20px rgba(10, 12, 18, .4); }
.bar .wrap .navschakel:checked ~ .nav { display: flex; }
/* In de bovenstand van de homepage is de balknavigatie wit met een
schaduw; in het paneel staat hij op wit en moet hij inkt zijn. */
.bar .wrap .navschakel ~ .nav a {
display: block; color: var(--ink); text-shadow: none;
font-size: 1.02rem; padding: 14px 2px;
border-bottom: 1px solid var(--line); }
.bar .wrap .navschakel ~ .nav a:last-child { border-bottom: 0; }
.bar .wrap .navschakel ~ .nav .navtel { display: block; }
.bar .wrap .navschakel ~ .nav .navtel b { color: var(--ink);
font-weight: var(--w-bold); }
}
@media (prefers-reduced-motion: reduce) {
.navknop span, .navknop span::before, .navknop span::after { transition: none; }
}
/* ── hero ──────────────────────────────────────────────────── */
.hero { position: relative; }
.hero video { display: block; width: 100%; height: clamp(460px, 62vh, 620px);
object-fit: cover; background: #0b0d13; }
.hero .photo { min-height: 560px; border: 0; border-radius: 0;
background:
radial-gradient(60% 80% at 78% 22%, color-mix(in srgb, var(--ch3) 55%, transparent), transparent 70%),
radial-gradient(50% 70% at 22% 82%, color-mix(in srgb, var(--ch2) 45%, transparent), transparent 70%),
radial-gradient(40% 60% at 55% 50%, color-mix(in srgb, var(--ch1) 22%, transparent), transparent 70%),
#0b0d13; }
.hero .photo span { align-self: end; margin-bottom: 12px; opacity: .55; color: rgba(255,255,255,.72); }
.hero .veil { position: absolute; inset: 0; display: flex; align-items: center;
background: linear-gradient(100deg,
color-mix(in srgb, var(--ink) var(--hero-veil), transparent) 0%,
color-mix(in srgb, var(--ink) calc(var(--hero-veil) - 26%), transparent) 62%,
transparent 100%); }
.hero-in { max-width: 640px; color: #fff; padding: var(--s8) 0; }
.hero h1 { font-size: var(--t-h1); margin: 22px 0 18px; color: #fff; text-wrap: balance; }
.hero .lede { font-size: clamp(1.05rem, 1.6vw, 1.24rem); color: rgba(255,255,255,.9);
margin: 0; max-width: 44ch; }
.anchor { margin: 26px 0 0; font-size: var(--t-sm); color: rgba(255,255,255,.84); }
.anchor b { color: #fff; }
/* ── boekbalk ──────────────────────────────────────────────── */
.boekstart { background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
box-shadow: var(--shadow); padding: 18px; display: grid;
grid-template-columns: 210px 1fr auto; gap: 14px; align-items: end;
max-width: var(--wrap); margin: -46px auto 0; position: relative; z-index: 5; }
/* zonder min-width:0 weigert een tekstveld te krimpen onder zijn
contentbreedte en duwt het de datumvelden uit de balk */
.boekstart .bs-f, .boekstart .bs-row > *, .stepper input { min-width: 0; }
.boekstart .stepper { width: 100%; }
.boekstart .stepper button { width: 46px; }
.boekstart .stepper input { width: 0; flex: 1 1 0; }
.bs-f { display: grid; gap: 7px; }
.bs-f > span { font-size: var(--t-2xs); font-weight: var(--w-bold); letter-spacing: .07em;
text-transform: uppercase; color: var(--soft); }
.bs-row { display: flex; gap: 10px; }
.bs-row > * { flex: 1; }
.bs-note { grid-column: 1 / -1; margin: 4px 0 0; font-size: .88rem; color: var(--soft); }
/* ── formulier ─────────────────────────────────────────────── */
input[type=date], input[type=text], input[type=email], input[type=tel], select {
width: 100%; height: 50px; padding: 0 13px; font: inherit; color: var(--ink);
background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-fld); }
.fld + .fld { margin-top: 30px; }
.fld > label, .fld > .lab { display: block; font-weight: var(--w-semi); font-size: 1.02rem; margin-bottom: 11px; }
.fld .hint { font-weight: var(--w-body); color: var(--soft); font-size: .89rem; }
.stepper { display: flex; gap: 10px; }
.stepper button { width: 50px; height: 52px; flex: none; border: 1px solid var(--line);
background: var(--surface); color: var(--ink); border-radius: var(--r-fld);
font-size: 21px; cursor: pointer; }
.stepper button:hover { border-color: var(--soft); }
.stepper input { flex: 1; height: 52px; text-align: center; font: inherit; font-size: 1.4rem;
font-weight: var(--w-bold); font-variant-numeric: tabular-nums; color: var(--ink);
background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-fld); }
.presets { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.preset { border: 1px solid var(--line); background: var(--surface); color: var(--soft);
border-radius: var(--r-pill); padding: 7px 16px; font: inherit; font-size: .9rem; cursor: pointer; }
.preset:hover { border-color: var(--ink); color: var(--ink); }
.preset[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.opt { display: flex; gap: 13px; align-items: flex-start; border: 1px solid var(--line);
border-radius: 13px; padding: var(--s4); cursor: pointer; }
.opt + .opt { margin-top: 10px; }
.opt:hover { border-color: var(--soft); }
.opt input { width: 20px; height: 20px; margin: 3px 0 0; flex: none; accent-color: var(--brand); }
.opt b { display: block; font-weight: var(--w-semi); }
.opt small { display: block; color: var(--soft); font-size: .89rem; line-height: var(--lh-snug); margin-top: 2px; }
.opt .amt { margin-left: auto; font-weight: var(--w-semi); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* ── prijskaart / samenvatting ─────────────────────────────── */
.conf-grid { display: grid; grid-template-columns: 1.12fr .88fr; border: 1px solid var(--line);
border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); background: var(--surface); }
.conf-l { padding: 34px; }
.conf-r { padding: 34px; background: var(--wash); border-left: 1px solid var(--line); }
.sum-h { font-size: var(--t-2xs); font-weight: var(--w-bold); letter-spacing: .1em;
text-transform: uppercase; color: var(--soft); margin: 0 0 18px; }
.line { display: flex; justify-content: space-between; gap: 14px; padding: var(--s2) 0; font-size: .99rem; }
.line .k { color: var(--soft); }
.line .v { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* De gemiddelde stuksprijs onder het aantal, niet ernaast als '60 x EUR 2,79':
dat vermenigvuldigt sinds de glijdende staffel niet meer terug naar het
bedrag ernaast (22 sep 2026). */
.line .perstuk { display: block; font-size: .86em; opacity: .75; }
.tot { display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); }
.tot .k { font-weight: var(--w-semi); }
.tot .v { font-family: var(--font-head); font-weight: var(--head-weight); font-size: 2rem;
letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.per { text-align: right; color: var(--soft); font-size: .9rem; margin: 2px 0 0; }
.tip { margin: 18px 0 0; padding: 13px 15px; background: var(--surface); border: 1px solid var(--line);
border-radius: var(--r-fld); font-size: .92rem; line-height: var(--lh-snug); color: var(--soft); }
.tip b { color: var(--ink); }
.reassure { margin: 14px 0 0; font-size: var(--t-xs); color: var(--soft); line-height: 1.55; }
/* ── kanaalkiezer ──────────────────────────────────────────── */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
padding: 26px; box-shadow: var(--shadow); --live: var(--ch1); }
.panel[data-active="2"] { --live: var(--ch2); }
.panel[data-active="3"] { --live: var(--ch3); }
.panel-h { display: flex; justify-content: space-between; align-items: baseline; margin: 4px 0 16px; }
.panel-h b { font-family: var(--font-head); font-size: 1rem; }
.panel-h small { color: var(--soft); }
.panel-foot { margin: 18px 0 0; padding-top: var(--s4); border-top: 1px solid var(--line);
font-size: .91rem; color: var(--soft); line-height: 1.55; }
.chan { display: flex; align-items: center; gap: 15px; padding: 14px 16px; border-radius: 13px;
border: 1px solid var(--line); background: var(--surface); width: 100%;
font: inherit; text-align: left; cursor: pointer;
transition: border-color var(--dur), background var(--dur); }
.chan + .chan { margin-top: 9px; }
.chan:hover { border-color: var(--soft); }
.chan[aria-pressed="true"] { border-color: var(--live);
background: color-mix(in srgb, var(--live) 9%, transparent); }
/* het cijfer staat op een kanaalkleur → altijd donkere tekst, nooit wit */
.chan .n { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center;
font-family: var(--font-head); font-weight: var(--w-bold); font-size: .92rem; color: #08101a; }
.chan .meta b { display: block; font-weight: var(--w-semi); font-size: .99rem; }
.chan .meta span { font-size: var(--t-xs); color: var(--soft); }
.eq { margin-left: auto; display: flex; align-items: flex-end; gap: 3px; height: 24px; }
.eq i { width: 4px; border-radius: 2px; background: currentColor; opacity: .38; height: 48%;
transition: opacity .2s; }
.chan[aria-pressed="true"] .eq i { opacity: .9;
animation: level .7s var(--ease) infinite alternate; }
.chan[aria-pressed="true"] .eq i:nth-child(2) { animation-delay: .12s }
.chan[aria-pressed="true"] .eq i:nth-child(3) { animation-delay: .26s }
.chan[aria-pressed="true"] .eq i:nth-child(4) { animation-delay: .05s }
.chan[aria-pressed="true"] .eq i:nth-child(5) { animation-delay: .33s }
.chan[aria-pressed="true"] .eq i:nth-child(6) { animation-delay: .19s }
@keyframes level { from { height: 22% } to { height: 100% } }
@media (prefers-reduced-motion: reduce) {
.chan[aria-pressed="true"] .eq i { animation: none; height: 70% }
}
.sound { display: flex; align-items: center; gap: var(--s3); margin: 18px 0 0; padding-top: var(--s4);
border-top: 1px solid var(--line); }
.sound button { border: 1px solid var(--line); background: var(--surface); color: var(--ink);
border-radius: var(--r-pill); padding: 9px 17px; font: inherit; font-size: .92rem;
font-weight: var(--w-semi); cursor: pointer; white-space: nowrap; }
.sound button:hover { border-color: var(--soft); }
.sound button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.sound p { margin: 0; font-size: var(--t-xs); color: var(--soft); line-height: var(--lh-snug); }
/* ── secties en koppen ─────────────────────────────────────── */
.h2 { font-size: var(--t-h2); max-width: var(--measure-h); text-wrap: balance; }
.lead { color: var(--soft); font-size: var(--t-lead); margin: var(--s5) 0 0; max-width: var(--measure); }
/* ── strook van redenen ────────────────────────────────────── */
.why-strip { border-bottom: 1px solid var(--line); }
.why-strip .wrap { display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; padding: 34px var(--gutter); }
.why-strip b { display: block; font-family: var(--font-head); font-weight: var(--head-weight);
font-size: 1.02rem; letter-spacing: -.01em; margin-bottom: 5px; }
.why-strip span { color: var(--soft); font-size: .92rem; line-height: var(--lh-snug); }
.why-strip .pip { display: block; width: 22px; height: 2px; margin-bottom: var(--s3); }
/* ── banden ────────────────────────────────────────────────── */
.band1 { background: var(--b1-bg); color: var(--b1-fg); }
.band1 .lead { color: var(--b1-soft); }
.band2 { background: var(--b2-bg); color: var(--b2-fg); }
.band2 p { color: var(--b2-soft); }
.band2 .price { font-family: var(--font-head); font-weight: var(--head-weight);
font-size: var(--t-num); letter-spacing: -.04em; margin: 26px 0 4px; }
.band2 .btn { background: var(--b2-fg); color: var(--b2-bg); }
.band2 .btn:hover { background: color-mix(in srgb, var(--b2-fg) 86%, transparent); }
[data-int="rustig"] .band2 { border-top: 1px solid var(--line); }
[data-int="rustig"] .band2 .price { color: var(--brand); }
[data-int="rustig"] .band2 .btn { background: var(--brand); color: var(--on-brand); }
.band3 { background: var(--b3-bg); color: var(--b3-fg); }
.band3 .lead { color: var(--b3-soft); }
.band3 .todo { color: var(--b3-fg); background: color-mix(in srgb, var(--b3-fg) 15%, transparent); }
/* de rekening — vorm van sectie "wat zit erbij" */
.ledger { margin: 0; max-width: 780px; }
.ledger div { display: grid; grid-template-columns: 1fr auto; gap: var(--s5); align-items: baseline;
padding: 19px 0; border-bottom: 1px solid color-mix(in srgb, var(--b1-fg) 18%, transparent); }
.ledger div:first-child { border-top: 1px solid color-mix(in srgb, var(--b1-fg) 18%, transparent); }
.ledger dt { font-family: var(--font-head); font-weight: var(--head-weight); font-size: 1.14rem;
letter-spacing: -.01em; }
.ledger dt small { display: block; font-family: var(--font-body); font-weight: var(--w-body);
letter-spacing: 0; font-size: .93rem; color: var(--b1-soft); margin-top: 4px; max-width: 52ch; }
.ledger dd { margin: 0; font-size: var(--t-sm); color: var(--b1-soft); white-space: nowrap; }
.ledger .amount { font-family: var(--font-head); font-weight: var(--head-weight); font-size: 1.14rem;
color: var(--b1-fg); font-variant-numeric: tabular-nums; }
/* ── tijdlijn ──────────────────────────────────────────────── */
.timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 26px; }
.timeline article { padding-top: 18px; border-top: 3px solid var(--line); }
.timeline article:nth-child(1) { border-top-color: var(--ch1); }
.timeline article:nth-child(2) { border-top-color: var(--ch2); }
.timeline article:nth-child(3) { border-top-color: var(--ch3); }
.timeline article:nth-child(4) { border-top-color: var(--ch1); }
.timeline article:nth-child(5) { border-top-color: var(--ch2); }
.timeline .when { font-size: var(--t-2xs); font-weight: var(--w-bold); color: var(--soft); margin: 0 0 9px; }
.timeline h3 { font-size: var(--t-h3); margin-bottom: 9px; }
.timeline p { margin: 0; color: var(--soft); font-size: var(--t-sm); }
/* ── vergelijking en specs ─────────────────────────────────── */
/* ── het rekenblok: op elke stadspagina, niet alleen op /bestellen/
(besluit 10 sep 2026). Het bedrag is het beeld van dit blok, dus
dat staat groot; de schuif eronder is de enige knop. ───────── */
.reken { max-width: 620px; }
.reken-label { display: block; font-size: var(--t-sm); color: var(--soft);
margin-bottom: var(--s3); }
.reken input[type=range] {
/* De vulling loopt tot --cut, en reken.js zet die mee met de stand. Dat is
de hele reparatie van "de slider doet het gewoon net niet" (Dave, 21 sep
2026): het verloop stond over de hele track, ongeacht waar je stond, dus
vijf zag er precies zo uit als tweehonderdvijftig. Geen gebrek aan
beweging maar aan terugkoppeling.
De rail rechts is dekkend en niet doorschijnend: een halfdoorzichtige
rail laat het verloop eronder doorschemeren en dan lijkt de track nog
steeds overal gevuld. */
--cut: 22%;
--rail: color-mix(in srgb, var(--ink) 14%, var(--bg));
--omtrek: color-mix(in srgb, var(--ink) 20%, transparent);
-webkit-appearance: none; appearance: none;
display: block; width: 100%; height: 44px;
padding: 0; margin: 0 0 var(--s4); border: 0;
background: transparent; cursor: grab;
}
.reken input[type=range]:active { cursor: grabbing; }
/* WebKit en Firefox hebben elk hun eigen naam voor de track en delen geen
enkele selector: wat in een lijst staat met een pseudo-element dat de
browser niet kent, gooit hij in zijn geheel weg. Vandaar twee keer
hetzelfde blok.
De rail liep van kanaalgroen via kanaalrood naar kanaalblauw. Rood is eruit
(Dave, 21 sep 2026): groen dat naar rood loopt is het stoplicht, en onder
een prijsschuif leest dat als "pas op, dit wordt duur" terwijl een groter
feest juist minder per koptelefoon kost. Nu groen naar blauw, de merkkleur
waar ook de knop in staat - en onderweg geen khaki meer. */
.reken input[type=range]::-webkit-slider-runnable-track {
height: 8px; border: 0; border-radius: var(--r-pill);
box-shadow: 0 0 0 1px var(--omtrek);
background:
linear-gradient(90deg, transparent var(--cut), var(--rail) var(--cut)),
linear-gradient(90deg, var(--ch3), var(--ch1));
}
.reken input[type=range]::-moz-range-track {
height: 8px; border: 0; border-radius: var(--r-pill);
box-shadow: 0 0 0 1px var(--omtrek);
background:
linear-gradient(90deg, transparent var(--cut), var(--rail) var(--cut)),
linear-gradient(90deg, var(--ch3), var(--ch1));
}
/* Firefox tekent hier standaard een eigen vulling overheen. Uit. WebKit kent
dit pseudo-element niet, daar doet --cut het werk. */
.reken input[type=range]::-moz-range-progress { background: transparent; border: 0; }
.reken input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none;
box-sizing: border-box;
width: 32px; height: 32px; margin-top: -12px; border-radius: 50%;
background: #fff; border: 3px solid var(--ink);
cursor: grab; transition: transform var(--dur-fast) cubic-bezier(.2,.8,.2,1); }
.reken input[type=range]::-moz-range-thumb {
box-sizing: border-box;
width: 32px; height: 32px; border-radius: 50%;
background: #fff; border: 3px solid var(--ink);
cursor: grab; transition: transform var(--dur-fast) cubic-bezier(.2,.8,.2,1); }
.reken input[type=range]:active::-webkit-slider-thumb { transform: scale(1.14); cursor: grabbing; }
.reken input[type=range]:active::-moz-range-thumb { transform: scale(1.14); cursor: grabbing; }
.reken input[type=range]:focus-visible { outline: var(--focus-w) solid var(--brand);
outline-offset: 6px; }
.reken-uit { display: flex; align-items: baseline; justify-content: space-between;
gap: var(--s5); flex-wrap: wrap; }
.reken-uit b { font-family: var(--font-head); font-weight: var(--head-weight);
font-size: var(--t-h3); }
.reken-som { font-family: var(--font-head); font-weight: var(--head-weight);
letter-spacing: var(--head-track); font-size: var(--t-num);
line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Het bedrag krijgt een korte tik bij loslaten, geen optelling. De reden
daarvoor is op 22 sep 2026 vervallen: met tredes DAALDE het bedrag op drie
grenzen als je koptelefoons bij schoof (45 naar 50, 95 naar 100, 245 naar
250) en een teller die omhoog loopt naar een lager getal is een onwaarheid.
Met de glijdende staffel stijgt het altijd, dus een optelling mag nu wel.
Nog niet gedaan: de tik doet het werk en een teller op elke pixel van de
schuif wordt onrustig. */
.reken-som { display: inline-block; transform-origin: right center; }
.reken-som.tik { animation: fk-tik .16s cubic-bezier(.2,.8,.2,1); }
@keyframes fk-tik {
from { transform: translateY(-2px) scale(1.03); }
to { transform: none; }
}
/* De noot is drie regels zolang er nog een staffel boven je zit en twee
zodra je op 250 staat, en daar sprong de knop eronder omhoog. (Dave,
21 sep 2026.) min-height in em hielp niet: drie regels tekst zijn geen
3em, en op 375px breken ze heel anders af. reken.js legt daarom alle
mogelijke noten onzichtbaar op elkaar in hetzelfde grid-vak, zodat de
hoogte altijd die van de langste variant is. */
.reken-noot { color: var(--soft); font-size: var(--t-sm); max-width: var(--measure);
margin: var(--s3) 0 var(--s6); display: grid; }
.reken-noot > span { grid-area: 1 / 1; }
.reken-noot .maat { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
.reken input[type=range]::-webkit-slider-thumb,
.reken input[type=range]::-moz-range-thumb { transition: none; }
.reken-som.tik { animation: none; }
}
/* Op een gekleurde band erft het blok de bandkleuren. */
.band1 .reken-label, .band1 .reken-noot { color: var(--b1-soft); }
.band1 .reken input[type=range] {
--rail: color-mix(in srgb, var(--on-ink) 24%, var(--ink));
--omtrek: color-mix(in srgb, var(--on-ink) 55%, transparent);
}
.band1 .reken input[type=range]::-webkit-slider-thumb { border-color: var(--b1-fg); }
.band1 .reken input[type=range]::-moz-range-thumb { border-color: var(--b1-fg); }
.vs { display: grid; gap: var(--s3); }
.vs .row { display: flex; justify-content: space-between; align-items: center; gap: 18px;
padding: 17px 20px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.vs .row.ours { border-color: var(--ch1); background: color-mix(in srgb, var(--ch1) 9%, var(--surface)); }
.vs .row span { color: var(--soft); }
.vs .row.ours span { color: var(--ink); font-weight: var(--w-med); }
.vs .row b { font-family: var(--font-head); font-size: 1.45rem; font-variant-numeric: tabular-nums; }
.specs { list-style: none; margin: 28px 0 0; padding: var(--s6) 0 0; border-top: 1px solid var(--line);
display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.specs b { display: block; font-family: var(--font-head); font-weight: var(--head-weight);
font-size: 1.5rem; letter-spacing: -.03em; }
.specs span { font-size: .9rem; color: var(--soft); }
/* ── gelegenheden, steden, FAQ, footer ─────────────────────── */
.occasions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.occasions a { text-decoration: none; color: inherit; display: flex; justify-content: space-between;
align-items: baseline; gap: 14px; padding: var(--s5) 22px; border: 1px solid var(--line);
border-radius: var(--r); background: var(--surface); }
.occasions a:hover { border-color: var(--brand); }
.occasions b { font-family: var(--font-head); font-weight: var(--head-weight); font-size: 1.08rem; }
.occasions span { color: var(--soft); font-size: .89rem; white-space: nowrap; }
details { border-bottom: 1px solid var(--line); padding: var(--s5) 0; }
summary { cursor: pointer; font-weight: var(--w-semi); font-size: 1.06rem; list-style: none;
display: flex; justify-content: space-between; gap: var(--s5); }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; color: var(--soft); font-size: 1.3rem; line-height: 1; }
/* Kindselector: sinds de vragenlijst op /contact/ uit details in details
bestaat, gaf de nakomelingsvorm elke dichte vraag binnen een open groep
een minteken. */
details[open] > summary::after { content: '\2212'; }
details p { margin: 13px 0 0; color: var(--soft); max-width: 70ch; }
.cities { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.cities a { text-decoration: none; color: var(--soft); font-size: .95rem;
border-bottom: 1px solid var(--line); padding: 2px 0; }
.cities a:hover { border-color: var(--brand); color: var(--brand); }
/* Wettelijke regel onder de kolommen: adres, KvK, btw. Hoort op elke
pagina te staan, dus hij komt uit BEDRIJF in bouw.py. */
/* ── markeringen: eerlijk zijn over wat nog niet vaststaat ──
Dit is een merkregel, geen versiering. Zie CLAIMS.md:
wat geen bron heeft, staat als leeg vak, niet als mooie zin. */
.todo { display: inline-block; font-size: .76rem; font-weight: var(--w-bold); letter-spacing: .04em;
text-transform: uppercase; color: var(--brand); vertical-align: 2px;
background: color-mix(in srgb, var(--brand) 13%, transparent);
border-radius: 5px; padding: 2px 7px; margin-left: 6px; white-space: nowrap; }
.unproven { border: 2px dashed color-mix(in srgb, var(--b3-fg, var(--ink)) 34%, transparent);
border-radius: 15px; padding: 0 var(--s6) 26px; }
.unproven-tag { display: inline-block; transform: translateY(-13px);
background: var(--b3-bg, var(--bg)); padding: 0 10px; margin: 0; font-size: var(--t-2xs);
font-weight: var(--w-bold); letter-spacing: .08em; text-transform: uppercase;
color: var(--b3-fg, var(--ink)); }
.unproven-tag i { font-style: normal; opacity: .62; font-weight: 500; letter-spacing: 0; text-transform: none; }
/* ── beeldplaatshouder: eerlijk over wat er nog niet is ────── */
.photo { position: relative; display: grid; place-items: center; overflow: hidden;
border: 1px solid var(--line);
background:
linear-gradient(135deg, color-mix(in srgb, var(--ch3) 22%, transparent), transparent 55%),
linear-gradient(300deg, color-mix(in srgb, var(--ch2) 22%, transparent), transparent 55%),
var(--wash); }
.photo span { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--soft);
font-weight: var(--w-med); text-align: center; padding: var(--s3); }
/* ── volvlaks fotoband ─────────────────────────────────────── */
.band-photo { position: relative; height: clamp(220px, 26vw, 340px); overflow: hidden; }
.band-photo .photo { position: absolute; inset: 0; border: 0; border-radius: 0;
background:
radial-gradient(60% 90% at 30% 25%, color-mix(in srgb, var(--ch1) 26%, transparent), transparent 70%),
radial-gradient(60% 90% at 75% 70%, color-mix(in srgb, var(--ch3) 34%, transparent), transparent 70%),
#14171f; }
.band-photo .photo span { align-self: start; margin-top: var(--s3); color: rgba(255,255,255,.55); }
.band-photo .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 0;
background: linear-gradient(transparent, rgba(8,10,16,.72)); }
.band-photo .cap p { margin: 0; color: #fff; font-family: var(--font-head);
font-weight: var(--head-weight); font-size: clamp(1.1rem, 2.2vw, 1.7rem);
letter-spacing: -.02em; max-width: 30ch; }
/* ── responsive ────────────────────────────────────────────── */
@media (max-width: 1000px) {
.nav, .tel { display: none; }
.boekstart { grid-template-columns: 1fr; margin: -30px var(--gutter) 0; }
.timeline, .conf-grid, .occasions, .why-strip .wrap { grid-template-columns: 1fr; }
.conf-r { border-left: 0; border-top: 1px solid var(--line); }
}
/* ── ingevuld beeld ────────────────────────────────────────── */
/* Zodra een .photo een inline background-image krijgt, is het geen
plaatshouder meer: verloop en bijschrift weg, foto vullend. Zo hoeft
er per slot maar één ding gezet te worden, in de HTML of in bouw.py. */
.photo[style*="background-image"] {
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
border-color: transparent; }
.photo[style*="background-image"] > span { display: none; }
/* ── kalender ───────────────────────────────────────────────────────
Gedeeld door /bestellen/ en de boekbalk op de homepage; de logica staat
in ds/kalender.js. Geen : die opent de kiezer van de
browser en die weet niets van bezorgen en retour. Deze schildert de hele huur op de
maand, zodat de klant zijn feestdag kiest en de rest ziet gebeuren. */
.kal-wrap { position: relative; }
.kal-veld { display: flex; align-items: center; gap: var(--s3); width: 100%; height: 52px;
padding: 0 var(--s4); cursor: pointer; font: inherit; text-align: left;
border: 1px solid var(--line); border-radius: var(--r-fld);
background: var(--surface); color: var(--ink); }
.kal-veld:hover { border-color: var(--soft); }
.kal-veld[aria-expanded="true"] { border-color: var(--brand); }
.kal-veld b { flex: 1; font-weight: var(--w-med); }
.kal-veld svg { flex: none; color: var(--soft); }
.kal-veld .pijl { transition: transform var(--dur) var(--ease); }
.kal-veld[aria-expanded="true"] .pijl { transform: rotate(180deg); }
.kal { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: 330px; max-width: 100%;
border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
padding: var(--s4) var(--s4) var(--s3); box-shadow: var(--shadow); }
.kal[hidden] { display: none; }
.kal-kop { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s3); }
.kal-kop b { font-family: var(--font-head); font-weight: var(--w-semi); font-size: 1.05rem;
letter-spacing: var(--head-track); }
.kal-kop button { width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer;
border: 1px solid var(--line); border-radius: var(--r-sm);
background: var(--surface); color: var(--ink); }
.kal-kop button:hover:not(:disabled) { border-color: var(--soft); }
.kal-kop button:disabled { opacity: .3; cursor: default; }
.kal-namen { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: var(--s1); }
.kal-namen span { text-align: center; font-size: var(--t-2xs); color: var(--soft); }
.kal-net { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: var(--s1); }
.kal-net button { position: relative; height: 40px; padding: 0; cursor: pointer;
border: 0; background: none; font: inherit; color: var(--ink);
display: flex; flex-direction: column; align-items: center; justify-content: center;
border-radius: var(--r-sm); transition: background var(--dur-fast) var(--ease); }
.kal-net button i { font-style: normal; font-variant-numeric: tabular-nums;
font-size: var(--t-sm); line-height: 1; }
.kal-net button u { text-decoration: none; font-size: 8.5px; letter-spacing: .03em;
line-height: 1; margin-top: 2px; color: var(--soft); }
.kal-net button:hover:not(:disabled):not(.feest) { background: var(--wash); }
.kal-net .uit i { color: var(--soft); opacity: .5; }
.kal-net .weg { opacity: .25; cursor: default; }
.kal-net .vandaag i { font-weight: var(--w-bold); }
.kal-net .vandaag::after { content: ''; position: absolute; bottom: 7px; width: 4px; height: 4px;
border-radius: 50%; background: var(--soft); }
.kal-net .vandaag:is(.feest, .bezorg, .retour)::after { display: none; }
/* De feestdagen zijn één band, niet losse blokjes: zo zie je in één keer
dat een feest van twee dagen aan elkaar vast zit. */
.kal-net .feest { background: var(--brand); color: var(--on-brand); border-radius: 0; }
.kal-net .feest u { color: rgba(255,255,255,.72); }
.kal-net .feest.eerste { border-top-left-radius: var(--r-sm); border-bottom-left-radius: var(--r-sm); }
.kal-net .feest.laatste { border-top-right-radius: var(--r-sm); border-bottom-right-radius: var(--r-sm); }
.kal-net .bezorg { box-shadow: inset 0 0 0 2px var(--ch1); }
.kal-net .bezorg u { color: var(--ch1); }
.kal-net .retour { box-shadow: inset 0 0 0 2px var(--line); }
/* Te kort dag voor de gewone post. Niet blokkeren: met een koerier lukt het
vaak alsnog, en het blok rechts legt dat uit zodra je hem kiest. */
.kal-net .krap:not(.feest) i { text-decoration: underline dotted var(--ch2);
text-underline-offset: 3px; }
.kal-legenda { display: flex; flex-wrap: wrap; gap: var(--s4); margin: var(--s4) 0 var(--s1);
padding-top: var(--s3); border-top: 1px solid var(--line);
font-size: var(--t-2xs); color: var(--soft); }
.kal-legenda .lg { display: inline-flex; align-items: center; gap: 6px; }
.kal-legenda .lg::before { content: ''; width: 10px; height: 10px; border-radius: 3px; }
.kal-legenda .bezorg::before { box-shadow: inset 0 0 0 2px var(--ch1); }
.kal-legenda .feest::before { background: var(--brand); }
.kal-legenda .retour::before { box-shadow: inset 0 0 0 2px var(--line); }