/* ============================================================
   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 <img>, 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; }
.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] { -webkit-appearance: none; appearance: none;
               width: 100%; height: 6px; border-radius: var(--r-pill);
               background: linear-gradient(90deg, var(--ch1), var(--ch2), var(--ch3));
               margin: 0 0 var(--s5); }
.reken input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none;
               width: 28px; height: 28px; border-radius: 50%; background: #fff;
               border: 2px solid var(--ink); box-shadow: 0 2px 6px rgba(0,0,0,.18);
               cursor: grab; }
.reken input[type=range]::-moz-range-thumb {
               width: 28px; height: 28px; border-radius: 50%; background: #fff;
               border: 2px solid var(--ink); box-shadow: 0 2px 6px rgba(0,0,0,.18);
               cursor: grab; }
.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; }
.reken-noot { color: var(--soft); font-size: var(--t-sm); max-width: var(--measure);
              margin: var(--s3) 0 var(--s6); min-height: 3em; }

/* Op een gekleurde band erft het blok de bandkleuren. */
.band1 .reken-label, .band1 .reken-noot { color: var(--b1-soft); }
.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; }
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); }

footer.site { border-top: 1px solid var(--line); padding: 52px 0 38px; font-size: .93rem; color: var(--soft); }
.fgrid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--s8); }
footer.site h4 { font-size: .8rem; letter-spacing: .09em; text-transform: uppercase;
                 color: var(--ink); margin-bottom: 13px; }
footer.site ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
footer.site a { text-decoration: none; }
footer.site a:hover { color: var(--ink); }
/* Wettelijke regel onder de kolommen: adres, KvK, btw. Hoort op elke
   pagina te staan, dus hij komt uit BEDRIJF in bouw.py. */
.fbot { margin: var(--s7) 0 0; padding-top: var(--s6); border-top: 1px solid var(--line);
        font-size: var(--t-xs); color: var(--soft); }

/* ── 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); }
  .fgrid { grid-template-columns: 1fr 1fr; }
}

/* ── 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; }