/* ============================================================
   Feestkanaal — homepage
   ------------------------------------------------------------
   Wat de homepage nodig heeft bovenop tokens.css en ds.css.
   Afgeleid van ontwerp/voorzet-stijl.css (15 sep 2026), zonder de
   variantbalk. Geen losse hexjes: alles via var(--…).
   ============================================================ */

.sec { padding: var(--sec-y) 0; }
.wrap, .wrap-narrow { margin: 0 auto; padding: 0 var(--gutter); }
.wrap { max-width: var(--wrap); }
.wrap-narrow { max-width: var(--wrap-narrow); }

h2 { font-family: var(--font-head); font-weight: var(--head-weight);
     letter-spacing: var(--head-track); font-size: var(--t-h2);
     line-height: var(--lh-tight); margin: 0 0 var(--s5); max-width: var(--measure-h); }
h3 { font-family: var(--font-head); font-weight: var(--head-weight); font-size: var(--t-h3); margin: 0 0 6px; }
p { margin: 0 0 var(--s4); max-width: var(--measure); }
.lead { font-size: var(--t-lead); color: var(--soft); }
.sec > .wrap > .lead, .sec > .wrap-narrow > .lead { margin-bottom: var(--s8); }

.hero .photo { background-size: cover; background-position: center; display: block; }
.why-strip { margin-top: var(--s9); }
.why-strip .wrap { grid-template-columns: repeat(3, 1fr); }

/* ── het icoon: een bol die half over de bovenrand van de kaart hangt ──
   Keuze Dave 17 sep 2026 uit ontwerp/iconen-kleur.html: variant A2, in het
   accentverloop, op alle kaarten dezelfde kleur, gecentreerd. Wat hier stond
   was een rondje van 44px linksboven in de kaart met de merkkleur op 12% —
   precies het patroon dat elke softwarepagina heeft, en daarmee de grootste
   bron van "het leest als een inhoudsopgave in plaats van als een feest".
   Rouleren per kaart is bewust niet gedaan: dan gaat de kleur beweren dat
   kaart 2 bij kanaal 2 hoort, en dat is niet waar. */
.ico { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
       width: 68px; height: 68px; border-radius: 50%;
       display: grid; place-items: center; margin: 0;
       background: var(--verloop-accent); color: #fff;
       border: 5px solid var(--surface);
       box-shadow: 0 8px 20px color-mix(in srgb, var(--accent-2) 30%, transparent); }
.ico svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.7;
           stroke-linecap: round; stroke-linejoin: round; }
/* ── de lijn tekent zichzelf ─────────────────────────────────
   Keuze Dave, 20 sep 2026, uit ontwerp/iconen-tekenen.html. Naar de kaart
   "Iconen die Zichzelf Tekenen" van design.aanpak.ai: dashoffset van len naar
   0, daar even stilstaan, en door naar -len zodat de lijn er weer uitloopt in
   plaats van hard te verdwijnen. 2.6s.

   Een keer tekenen, bij binnenkomst, en daarna zachtjes wiegen. Daar zijn
   twee rondes aan voorafgegaan, dus draai ze niet terug:
   - eerst met een trapje van .18s per kaart. Dat las als verspringen: drie
     lijnen die net niet samen lopen trekken het oog heen en weer. Geen
     animation-delay dus.
   - daarna doorlopend tekenen, alle iconen tegelijk. Te druk (Dave, 20 sep
     2026), en de kaart waarschuwt er zelf voor: hoogstens een per scherm, en
     nooit naast tekst die gelezen moet worden. Op de homepage staan er acht.
   Het tekenen hangt daarom aan .rv.in, de onthulling die de site al heeft:
   het gebeurt op het moment dat je de strip in beeld krijgt, en daarna niet
   meer. Geen infinite op fk-teken.

   De lengte verschilt per icoon en een vaste dasharray van 60 tekent het ene
   half en het andere twee keer. De waarden hieronder zijn eenmalig gemeten
   met getTotalLength() op het langste onderdeel van elk symbool, plus twee
   eenheden lucht zodat de lijn bij aanvang zeker helemaal weg is. Nieuw
   icoon erbij? Meet hem en zet hem in dit lijstje; een script op de pagina
   is hier niet voor nodig.

   De regels staan op het <use>-element en niet op het <svg>: de vormen zitten
   in een <symbol> en zijn met CSS niet los te pakken, maar stroke-dasharray
   en stroke-dashoffset erven, dus vanaf de <use> komen ze er vanzelf in. */
.ico use { stroke-dasharray: var(--len, 60); stroke-dashoffset: var(--len, 60); }
.rv.in .ico use { animation: fk-teken 1.1s ease-out forwards; }
.ico use[href="#i-tag"]       { --len: 60; }
.ico use[href="#i-box"]       { --len: 61; }
.ico use[href="#i-power"]     { --len: 40; }
.ico use[href="#i-head"]      { --len: 34; }
.ico use[href="#i-radio"]     { --len: 46; }
.ico use[href="#i-cable"]     { --len: 19; }
.ico use[href="#i-plus"]      { --len: 50; }
.ico use[href="#i-return"]    { --len: 58; }
.ico use[href="#i-route"]     { --len: 31; }   /* gemeten 29, plus twee lucht */
.ico use[href="#i-heenterug"] { --len: 22; }
.ico use[href="#i-dj"]        { --len: 28; }
.ico use[href="#i-wa"]        { --len: 57; }
.ico use[href="#i-tel"]       { --len: 64; }
.ico use[href="#i-mail"]      { --len: 63; }
@keyframes fk-teken {
  from { stroke-dashoffset: var(--len, 60); }
  to   { stroke-dashoffset: 0; }
}

/* En daarna blijft hij zachtjes wiegen: tien graden naar links, tien naar
   rechts, vier seconden heen en weer. Stond eerst op vijf; dat was te braaf
   om op te vallen (Dave, 21 sep 2026). Draaien, niet schuiven - dat stond hier
   eerst als translateX en dat was het niet (Dave, 20 sep 2026). Een icoon dat
   opzij schuift leest als een hapering; een icoon dat kantelt leest als leven.
   Het draaipunt is het midden van het icoon, niet de bovenkant: vanaf de
   bovenkant wordt het een slinger en die vraagt meer aandacht dan dit mag.
   De vertraging is gelijk aan de tekenduur, zodat het wiegen begint op het
   moment dat de lijn af is. */
.rv.in .ico svg { animation: fk-wieg 4s 1.1s infinite;
                  transform-origin: 50% 50%; }
/* Begint en eindigt op nul, niet op -5. Dat stond hier eerst wel en dan
   springt het icoon op het moment dat de lijn af is in een klap naar links
   (Dave, 21 sep 2026: "heel snel naar links, dat klopt niet"). Nu loopt hij
   vanuit zijn ruststand weg.

   De keerpunten liggen op 25% en 75%, de doorgangen op 0, 50 en 100. Daarom
   staat de versnelling per keyframe en niet in een enkele ease-in-out op de
   animatie: bij een keerpunt hoort stilstand, bij een doorgang juist de
   hoogste snelheid. Eén ease-in-out over het geheel remt ook af op de
   doorgangen, en dan hapert hij midden in de slag. */
@keyframes fk-wieg {
  0%   { transform: rotate(0deg);  animation-timing-function: ease-out; }
  25%  { transform: rotate(-10deg); animation-timing-function: ease-in; }
  50%  { transform: rotate(0deg);  animation-timing-function: ease-out; }
  75%  { transform: rotate(10deg); animation-timing-function: ease-in; }
  100% { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .rv.in .ico use, .rv.in .ico svg { animation: none; }
  .ico use { stroke-dashoffset: 0; }
}

/* Op een donkere band draagt de bol geen verloop: daar is het vlak zelf al kleur. */
.ico.licht { background: color-mix(in srgb, var(--on-ink) 14%, transparent); color: var(--on-ink);
             border-color: transparent; box-shadow: none; }

/* De kaart maakt ruimte voor de overhang en centreert mee. */
.feat-grid article:has(> .ico),
.bento article:has(> .ico),
.vraagkeuze .vraagtegel:has(> .ico) {
  position: relative; margin-top: 34px;
  padding-top: calc(var(--s6) + 26px); text-align: center; }
.feat-grid article:has(> .ico) p,
.vraagkeuze .vraagtegel:has(> .ico) p,
.bento article:has(> .ico) p { margin-inline: auto; max-width: 34ch; }

/* De brede tegel in de bento draagt een langere alinea over twee kolommen en
   krijgt daarom een ruimere leesbreedte. Verder is hij precies dezelfde kaart
   als de andere vier: zelfde wit, zelfde rand, icoon in het midden. Een eigen
   stijl (grijs vlak, tekst links) maakte het raster rommelig (Dave, 22 sep). */
.bento .breed:has(> .ico) p { max-width: 52ch; }

/* ── drie zekerheden als kaarten ─────────────────────────────── */
.feat { padding-top: var(--s10); padding-bottom: 0; }
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.feat-grid article, .bento article {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s6) var(--s6) var(--s5); box-shadow: var(--shadow-sm); }
.feat-grid h3, .bento h3 { font-size: 1.08rem; margin-bottom: var(--s2); }
.feat-grid p, .bento p { margin: 0; color: var(--soft); font-size: var(--t-sm); line-height: var(--lh-snug); }

/* ── dit krijg je: het raster past zich aan het aantal tegels aan ───
   Het basisraster is drie kolommen met een brede tegel die er twee pakt. Twee
   pagina's wijken af en dragen daarom een eigen klasse; zet het aantal kolommen
   niet op .bento zelf, want dat raster wordt op vijf pagina's gebruikt en dan
   valt er ergens anders een kaart alleen op een regel (23 sep 2026).

   .vier  = homepage. Vier dingen die je uitpakt, dus vier gelijke tegels. Was
            een brede tegel plus vijf; de brede droeg "drie kanalen tegelijk" en
            dat is geen ding dat je krijgt maar hoe het werkt (Dave, 23 sep).
   .pakket = hoe werkt het. Twee fototegels van gelijke breedte boven elkaar de
            koptelefoon en de zender, en daaronder de drie kleine dingen naast
            elkaar: kabels, reserve, retourlabel (Dave, 23 sep). Zes kolommen,
            dus 3+3 op de eerste regel en 2+2+2 op de tweede. */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.bento.vier { grid-template-columns: repeat(4, 1fr); }
.bento.pakket { grid-template-columns: repeat(12, 1fr); }
.bento.pakket .foto-tegel { grid-column: span 6; }
.bento.pakket article:not(.foto-tegel) { grid-column: span 4; }
/* Vier kleine tegels onder de twee fototegels in plaats van drie: dj-pagina. */
.bento.pakket.kwart article:not(.foto-tegel) { grid-column: span 3; }
.bento .breed { grid-column: span 2; }
.bento .breed p { max-width: 52ch; }

/* ── geluid: het verhaal links, de foto rechts ─────────────────────
   Verving 22 sep 2026 de vergelijking gewone-tegen-onze koptelefoon. Die
   beweerde een verschil dat je op een tekening niet kunt zien; het verhaal van
   de luistertest kan dat wel. Waarom dit blok er staat: dossier/WAAROM-DEZE-BLOKKEN.md */
.geluid-in { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--s7); align-items: center; }
.geluid-tekst h2 { margin-bottom: var(--s4); }
.geluid-tekst p { margin: 0 0 var(--s4); color: var(--soft); max-width: 58ch; }
.geluid-tekst p:last-child { margin-bottom: 0; }
.geluid-tekst em { font-style: normal; font-weight: 600; color: var(--ink); }
.geluid-slot { color: var(--ink) !important; font-weight: 600; }
.geluid-foto { aspect-ratio: 4 / 3; border-radius: var(--r-lg); background-size: cover;
               background-position: center; box-shadow: var(--shadow-sm); }
@media (max-width: 860px) { .geluid-in { grid-template-columns: 1fr; gap: var(--s6); } }

/* ── galerij: één groot links, twee klein rechts, bijschrift over de foto ── */
.galerij-sec { padding-top: 0; }
.galerij { display: grid; grid-template-columns: 1.6fr 1fr; grid-template-rows: 1fr 1fr; gap: var(--s4); }
.galerij figure { margin: 0; position: relative; border-radius: var(--r-lg); overflow: hidden;
                  aspect-ratio: 4 / 3; max-width: 100%; }
.galerij .groot { grid-row: span 2; aspect-ratio: auto; }
.galerij .photo { position: absolute; inset: 0; background-size: cover; background-position: center;
                  transition: transform var(--dur) var(--ease); }
.galerij figure:hover .photo { transform: scale(1.03); }
.galerij figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 44px var(--s5) var(--s5);
                      color: #fff; font-family: var(--font-head); font-weight: var(--w-semi); font-size: 1.05rem;
                      background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0)); }
.galerij .groot figcaption { font-size: 1.35rem; }

/* ── dj-band met foto op de achtergrond ──────────────────────── */
.band-dj { position: relative; color: var(--on-ink); background: var(--ink-surf); overflow: hidden; }
.band-dj .photo { position: absolute; inset: 0; background-size: cover; background-position: center;
                  opacity: .38; }
.band-dj .wrap { position: relative; }
.band-dj h2, .band-dj p { color: var(--on-ink); }
.band-dj .price { font-family: var(--font-head); font-weight: var(--head-weight); font-size: var(--t-num);
                  letter-spacing: var(--head-track); margin: var(--s4) 0; }
.band-dj .price small { font-family: var(--font-body); font-weight: var(--w-body); font-size: var(--t-sm);
                        color: var(--ink-soft-on); letter-spacing: 0; margin-left: var(--s2); }
.band-dj .los { color: var(--ink-soft-on); }
.band-dj .los a { color: var(--on-ink); }

.faq details { border-top: 1px solid var(--line); padding: var(--s5) 0; }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary { font-family: var(--font-head); font-weight: var(--head-weight);
               font-size: 1.05rem; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq p { margin: 12px 0 0; color: var(--soft); }

.slot { text-align: center; }
.slot h2, .slot .lead { margin-inline: auto; }
.slot .knoppen { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; max-width: none; }

.voet { background: var(--wash); border-top: 1px solid var(--line); padding: var(--s10) 0 var(--s8); }
.voet .kol { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: var(--s7); }
.voet h4 { font-size: var(--t-2xs); letter-spacing: .1em; text-transform: uppercase;
           color: var(--soft); margin: 0 0 12px; }
.voet a { display: block; color: var(--ink); text-decoration: none; font-size: .93rem; padding: 3px 0; }
.voet a:hover { color: var(--brand); }
/* Het logo in de voet is ook een <a>, en .voet a zette er display:block en
   font-size:.93rem op. Daarmee kwam de letterlijke linktekst "feestkanaal"
   boven het getekende woordmerk te staan: twee keer hetzelfde woord, over
   elkaar heen. (Dave, 17 sep 2026, screenshot van de voet op de telefoon.)
   .logo zelf zet font-size:0 maar verliest het van de dubbele klasse. */
.voet .logo { display: inline-block; font-size: 0; line-height: 0; }
/* .voet a:hover verft de link blauw, en het logo is getekend met
   currentColor als vulling: dan wordt het hele merk blauw. Dat is geen
   link die oplicht maar een logo in de verkeerde kleur. (Dave, 17 sep) */
.voet .logo:hover { color: inherit; }
/* p.klein, niet .klein: de balk op elke binnenpagina heet <header class="bar
   klein"> - daar betekent 'klein' de gekrompen stand van de balk, hier de
   kleine lettertjes. Zonder de p erbij erfde die header dus grijs (het logo
   staat op color:inherit, dus dat werd lichter - Dave zag het, 18 sep),
   een kleinere basisletter, en 40px margin-top waardoor de balk 40px van
   de bovenkant af stond. Twee betekenissen van hetzelfde woord. */
p.klein { font-size: var(--t-xs); color: var(--soft); margin-top: var(--s8); }
/* De regel met adres, KvK en btw brak op twee regels door de leesbreedte
   uit `p { max-width: var(--measure) }`. Die grens is er voor lopende
   tekst; een adresregel hoort op één regel te staan zolang hij past. */
.voet > .wrap > p.klein { max-width: none; }

@media (max-width: 860px) {
  .why-strip .wrap { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr 1fr; }
  .feat-grid, .bento { grid-template-columns: 1fr; }
  .bento .breed { grid-column: auto; }
  .galerij { grid-template-columns: 1fr; grid-template-rows: auto; }
  .galerij .groot { grid-row: auto; aspect-ratio: 4 / 3; }
  .voet .kol { grid-template-columns: 1fr 1fr; }
  .bar .nav, .bar .tel { display: none; }
}
@media (max-width: 560px) {
  .timeline { grid-template-columns: 1fr; }
  /* De voet bleef ook op een telefoon twee koloms (Dave, 17 sep): vier
     kopjes onder elkaar is een halve meter scrollen voor een rijtje links.
     Het logoblok pakt de volle breedte, de vier lijstjes delen de rest. */
  .voet .kol { grid-template-columns: 1fr 1fr; gap: var(--s6) var(--s5); }
  .voet .kol > :first-child { grid-column: 1 / -1; }
}

/* ── de twee voorstelpaletten uit de voorzetten, zodat de keuze doorwerkt ── */
[data-pal="nacht-goud"] {
  --bg: #0b0d10;
  --surface: #14171c;
  --wash: #1a1e25;
  --ink: #f4f5f7;
  --soft: #9aa2ae;
  --line: #262b33;
  --brand: #e8b74a;
  --brand-d: #f0c766;
  --on-brand: #16120a;
  --ink-surf: #14171c;
  --on-ink: #f4f5f7;
  --ink-soft-on: #9aa2ae;
  --ch1: #2ee88a;
  --ch2: #ff4d5e;
  --ch3: #3ec8ff;
  --wa: #25d366;
  --shadow: 0 1px 0 rgba(255,255,255,.05), 0 24px 60px rgba(0,0,0,.6);
  --shadow-sm: 0 1px 0 rgba(255,255,255,.05);
}
[data-pal="b11"] {
  --bg: #ffffff; --surface: #ffffff; --wash: #fdf4f9;
  --ink: #16121a; --soft: #5f5866; --line: #eddfe8;
  --brand: #c2185b; --brand-d: #a91450; --on-brand: #ffffff;
  --brand-vol: #e6249a;
  --ink-surf: #16121a; --on-ink: #ffffff; --ink-soft-on: #b3aab1;
  --ch1: #28ab62; --ch2: #e6249a; --ch3: #22b8d6;
  --shadow: 0 1px 2px rgba(26,10,20,.05), 0 12px 34px rgba(26,10,20,.09);
  --shadow-sm: 0 1px 2px rgba(26,10,20,.06);
}
[data-pal="b11"] .btn:not(.line):not(.wa) {
  background: linear-gradient(100deg, var(--brand) 0%, var(--brand-vol) 55%, var(--ch3) 140%);
}
[data-pal="b11"] .btn:not(.line):not(.wa):hover {
  background: linear-gradient(100deg, var(--brand-d) 0%, var(--brand) 55%, var(--ch3) 150%);
}

/* ── voorzet C: groot logo midden over de hero, krimpt en reist naar links bij scrollen (keuze Dave, 15 sep) ── */
/* Variant C - groot logo midden over de hero, dat bij scrollen naar
   links krimpt en in de balk gaat staan.
   Laadt bovenop voorzet-stijl.css. Verschil met B: B krimpt op zijn
   plek in het midden, C reist ook naar links. */

/* ── de balk ligt over de hero ───────────────────────────────
   Anders kan het logo nergens overheen hangen. De hero schuift
   dus de hoogte van de balk omhoog. */
/* flow-root: anders klapt de negatieve marge van .wrap (zie "hogere balk
   bovenaan", verderop) samen met de negatieve margin-top van de hero en doet
   hij niets. */
.bar { background: transparent; border-bottom: 0; box-shadow: none; display: flow-root; }
/* z-index 1: de balk heeft twee achtergrondlagen als pseudo-element (zie
   hieronder) en ::after zou anders óver de inhoud vallen — pseudo's staan
   in de DOM-volgorde vóór en ná .wrap. */
.bar .wrap { position: relative; z-index: 1; }
.hero { margin-top: -76px; }
.hero .veil { padding-top: 76px; }

/* ── het logo ────────────────────────────────────────────────
   Bovenaan: groot, gecentreerd, wit met een schaduw over de foto.
   Gekrompen: klein, tegen de linkerkant van de wrap, in inktkleur.
   left blijft 50%; de reis zit in de translate, zodat er maar een
   eigenschap hoeft te animeren en hij niet gaat schokken. */
.logo.midden {
  position: absolute; left: 50%; top: 6px;
  width: 336px; height: 96px;
  transform: translateX(-50%);
  color: #fff;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,.45));
  transition: width var(--dur) var(--ease), height var(--dur) var(--ease),
              top var(--dur) var(--ease), left var(--dur) var(--ease),
              transform var(--dur) var(--ease), color var(--dur) var(--ease),
              filter var(--dur) var(--ease);
}
/* ── de gepinde balk: glas met de kanaalstreep erop ──────────────
   Besluit Dave, 17 sep 2026, variant B3 van ontwerp/header.html. Hiervoor
   was de balk in de kleine stand volledig wit met een haarlijn, en dan
   verdwijnt het merk precies op het moment dat iemand begint te lezen.
   De streep is een ::before, geen extra element, zodat alle 62 pagina's
   hem krijgen zonder dat de markup verandert.

   21 sep 2026: de twee standen zijn nu twee lagen die over elkaar heen
   vervagen, in plaats van één background die omklapt. Een verloop en een
   kleur zijn niet naar elkaar te animeren, dus sprong de balk hard om op
   het moment dat het logo aan zijn reis begon — precies het geflikker dat
   Dave zag. De streep zit mee in de glaslaag als tweede background. */
.bar::before, .bar::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
/* de glaslaag van de gepinde balk */
.bar::before {
  opacity: 0;
  background:
    linear-gradient(90deg,
      var(--ch1) 0 33.333%, var(--ch2) 0 66.666%, var(--ch3) 0) top left / 100% 4px no-repeat,
    color-mix(in srgb, var(--bg) 72%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent);
}
/* De blur staat bewust alleen op de kleine stand. Een backdrop-filter die
   altijd meedraait - ook op een laag met opacity 0 - zet de hele pagina in een
   compositielaag en laat Chrome de tekst in grijswaarden anti-aliasen in plaats
   van subpixel. Dan staat alle tekst op de homepage net iets waziger. */
.bar.klein::before {
  opacity: 1;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}
/* Op een binnenpagina staat de balk altijd in de kleine stand, en dan stonden
   er twee strepen onder elkaar met een witte kier ertussen: de losse
   .channelline uit de markup én die van de balk. De losse gaat weg zodra de
   balk er direct onder al een streep draagt.

   Alleen wáár de balk statisch klein is: op de homepage (.bar.thuis) schakelt
   .klein tijdens het scrollen, en dan verdween hier 4px documenthoogte op
   precies de drempel — een layoutsprong die de schakelaar weer kon omzetten.
   Daar is de losse streep allang weggescrold zodra de balk pint. */
.channelline:has(+ .bar.klein:not(.thuis)) { display: none; }
/* Zonder blur zou de balk halfdoorzichtig en dus onleesbaar zijn. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .bar::before {
    background:
      linear-gradient(90deg,
        var(--ch1) 0 33.333%, var(--ch2) 0 66.666%, var(--ch3) 0) top left / 100% 4px no-repeat,
      var(--bg);
  }
}
/* left is absoluut binnen .wrap en slaat de padding van de wrap dus over:
   met left:0 plakte het logo in de gepinde balk tegen de schermrand, nul
   pixels marge, terwijl al het andere op de goot staat. (Dave, 17 sep) */
.bar.klein .logo.midden {
  left: var(--gutter); top: 18px;
  width: 154px; height: 44px;
  transform: translateX(0);
  color: var(--ink); filter: none;
}

/* De navigatie maakt plaats zodra het logo links landt. 154px logo
   plus ruimte; in de grote stand staat de nav gewoon links. */
.bar .nav { transition: margin-left var(--dur) var(--ease); }
.bar.klein .nav { margin-left: calc(154px + var(--s6)); }

.bar .nav, .bar .right { position: relative; z-index: 2; }

/* In de bovenstand ligt de navigatie op de foto en moet hij wit zijn. */
.bar:not(.klein) .nav a,
.bar:not(.klein) .tel { color: rgba(255,255,255,.88); text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.bar:not(.klein) .nav a:hover { color: #fff; }
.bar:not(.klein) .tel b { color: #fff; }

@media (max-width: 900px) {
  .logo.midden { width: 200px; height: 58px; }
  .bar.klein .logo.midden { width: 120px; height: 34px; top: 21px; }
  .bar .nav { display: none; }
  .bar.klein .nav { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .logo.midden, .bar, .bar::before, .bar::after, .bar .nav { transition: none; }
}

/* Bovenstand: een donker verloop onder de balk, anders staat witte tekst
   op een lichte plek in de foto. (Dave, 15 sep: "niet duidelijk leesbaar") */
.bar::after { background: linear-gradient(to bottom, rgba(0,0,0,.62), rgba(0,0,0,0)); opacity: 1; }
.bar.klein::after { opacity: 0; }
.bar:not(.klein) .nav a, .bar:not(.klein) .tel, .bar:not(.klein) .tel b { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }

/* ── 15 sep, ronde 3 (Dave): spacing, menu, fotostrook, scrollanimatie ── */

/* de boekbalk hing over de laatste regel van de hero heen */
.hero-in { padding-bottom: calc(var(--s8) + 56px); }
.feat { padding-bottom: var(--s10); }

/* menu mag dikker en groter */
.nav { font-size: 1rem; gap: 26px; }
.nav a { font-weight: var(--w-semi); color: var(--ink); }
.bar:not(.klein) .nav a { color: #fff; }

/* ── fotostrook: volle breedte, schuift langzaam van rechts naar links ── */
.strook { overflow: hidden; padding: var(--s9) 0; margin: 0 0 var(--s9); }
/* De baan bevat de set twee keer en schuift precies een helft op, daarna
   springt hij terug naar het begin. Dat is alleen onzichtbaar als de eerste
   helft tot op de pixel even breed is als de tweede. Met gap ging dat mis:
   twaalf foto's hebben elf tussenruimtes, dus de helft viel een halve
   tussenruimte te kort en de strook verschoot 16 px (Dave, 22 sep 2026).
   Daarom zit de tussenruimte nu als marge aan elke foto vast: elke helft is
   dan exact zes keer (foto + marge).

   En de set moet een even aantal foto's hebben. Bij vijf per helft stond na
   de sprong elke foto opeens de andere kant op gedraaid, want de om-en-om
   draai gaat op nth-child. Zes per helft, dus twaalf in de baan. */
.strook .baan { display: flex; width: max-content;
                align-items: center;
                animation: strook 140s linear infinite; }
/* Geen pauze op hover (Dave, 23 sep 2026). De baan is een sfeerstrook en geen
   bediening: er valt niets te lezen of aan te klikken, dus stilstaan levert de
   bezoeker niets op en het leest als een hapering zodra je muis er toevallig
   overheen gaat. */
.strook figure { margin: 0 var(--s7) 0 0; position: relative; flex: none; width: 460px; aspect-ratio: 4 / 3;
                 border-radius: var(--r-lg); overflow: hidden; }
/* Tien graden scheef, om en om (Dave, 20 sep 2026). Een rij kaarsrechte
   rechthoeken leest als een productgalerij; scheef leest als foto's die
   iemand op tafel heeft gelegd. Om en om, want allemaal dezelfde kant op
   ziet eruit als een fout in de opmaak.

   De strook krijgt er hoogte bij omdat een gedraaide rechthoek hoger wordt
   dan hij was: 460 bij 345 wordt onder tien graden 420 hoog. Zonder die
   ruimte snijdt overflow:hidden de hoeken eraf. */
.strook figure:nth-child(odd)  { transform: rotate(-10deg); }
.strook figure:nth-child(even) { transform: rotate(10deg); }
.strook figure { box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.strook .photo { position: absolute; inset: 0; background-size: cover; background-position: center; }
/* Geen bijschriften meer op de strook (Dave, 21 sep 2026). De beelden staan
   er voor de sfeer; een regel tekst eroverheen maakte er zes beweringen van
   die je in het voorbijgaan toch niet leest. De omschrijving voor een
   schermlezer zit in de aria-label van .photo en blijft dus staan. */
@keyframes strook { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 720px) { .strook figure { width: 300px; } }
@media (prefers-reduced-motion: reduce) { .strook .baan { animation: none; } }

/* ── verschijnen bij scrollen: zacht, kort, één keer ── */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.rv:nth-child(2) { transition-delay: .08s; } .rv:nth-child(3) { transition-delay: .16s; }
.rv:nth-child(4) { transition-delay: .24s; } .rv:nth-child(5) { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }

/* ── 15 sep, ronde 4 (Dave): lucht in de hero, hogere balk, boekbalk in verhouding ── */

/* hogere balk bovenaan, logo iets lager; de hero schuift evenveel mee.
   De extra 36px hangt met een negatieve marge buiten de flow: de balk zelf
   blijft in beide standen 76px hoog. Anders kromp het document precies op het
   moment van pinnen, sprong alles eronder 36px omhoog en vuurde dat een nieuw
   scroll-event af dat de schakelaar weer kon omzetten - de tweede oorzaak van
   het flikkerende logo. (Dave, 21 sep 2026) */
.bar:not(.klein) .wrap { height: 112px; margin-bottom: -36px; }
.bar:not(.klein) .logo.midden { top: 14px; }
/* De sluier dekt de hele bovenstand, niet alleen de 76px in de flow. */
.bar::after { bottom: auto; height: 112px; }
.hero { margin-top: -76px; }
.hero .veil { padding-top: 112px; }

/* H1 op twee regels: bredere kolom, iets kleiner */
.hero-in { max-width: 760px; }
.hero h1 { font-size: clamp(2.2rem, 4.2vw, 3.5rem); }
.hero .lede { max-width: 58ch; }

/* boekbalk: aantal ruimer, datum smaller, knop groter */
.boekstart { grid-template-columns: 1.25fr 1fr auto; gap: var(--s5); padding: 22px; }
.boekstart .btn.lg { padding: 20px 34px; font-size: 1.1rem; }
.boekstart .stepper input { font-size: 1.35rem; }
.boekstart .stepper button, .boekstart .stepper input { height: 60px; }
.boekstart .kal-veld { height: 60px; font-size: 1.05rem; }
@media (max-width: 1000px) {
  .boekstart { grid-template-columns: 1fr; }
  .bar:not(.klein) .wrap { height: 90px; margin-bottom: -14px; }
  .bar::after { height: 90px; }
  .hero { margin-top: -76px; } .hero .veil { padding-top: 90px; }
}
.hero-in { max-width: 900px; }
.hero h1 .nw { white-space: nowrap; }
@media (max-width: 900px) { .hero h1 .nw { white-space: normal; } }


/* ══════════════════════════════════════════════════════════════
   De rekenband en het slot, 21 sep 2026
   ══════════════════════════════════════════════════════════════
   Drie klachten van Dave over de homepage, met dank aan Codex voor het
   aanwijzen van de oorzaak onder de tweede:
     1. de rekenband is veel te donker, er moet iets op de achtergrond;
     2. de slider is te statisch, "hij doet het gewoon net niet";
     3. het slot en de voet zijn samen een groot wit ziekenhuis.
   Punt 2 zit in ds/ds.css, want dat rekenblok staat op vijftig pagina's.
   Hieronder staat wat alleen de homepage raakt. De keuzes zijn gemaakt op
   ontwerp/band-keuze.html, waar de standen naast elkaar staan. */

/* De ondergrond mengt 40 procent van de kleur van het kanaal waar de slider
   staat door het bestaande bijna-zwart; reken.js zet --live mee. Eerst stond
   dat op 28 procent met een verloop tussen de kanalen door, maar dan zit je
   op 60 koptelefoons in khaki (Dave, 21 sep 2026: "zo'n foute kleur"). Nu
   zijn het twee vakken en een steviger menging: groen tot de helft van de
   schuif, daarboven blauw. Rood doet niet mee - groen dat naar rood loopt is
   het stoplicht, en dat oordeel wil je niet onder een prijs (Dave, 21 sep
   2026). Nagemeten met wit erop: groen 8,68:1, blauw 11,84:1. AA vraagt 4,5. */
.band1 {
  --live: var(--ch3);   /* start blauw, wordt groen boven de helft (reken.js) */
  position: relative;
  isolation: isolate;
  /* De bollaag hieronder is ruimer dan de band en kantelt; zonder dit steekt
     hij eruit. */
  overflow: hidden;
  background: color-mix(in srgb, var(--live) 40%, var(--ink-surf));
  transition: background-color .25s linear;
}
/* Het merk zelf als vorm op het vlak, groot en half buiten beeld. Wit op
   zeven procent: alles daarboven gaat met de tekst concurreren. */
/* De bol wiegt zachtjes heen en weer (Dave, 21 sep 2026). Tweeëneenhalve
   graad, twintig seconden heen en terug: op een vlak van deze maat is dat al
   goed te zien, en meer wordt een draaiende plaat die de aandacht van het
   bedrag wegtrekt. Het draaipunt ligt in het hart van de bol, rechts half
   buiten beeld, niet in het midden van de band - anders schuift hij op en neer
   in plaats van te kantelen.

   De laag steekt 30 procent boven en onder de band uit, want de achtergrond
   wordt geclipt op de box van het element zelf en die kantelt mee: met inset 0
   snijdt de gekantelde rand een schuine lijn dwars door de bol. Links en
   rechts blijft de laag precies zo breed als de band, anders verschuift de
   bol - background-position rekent in procenten van de vrije ruimte, en die
   verandert met de breedte van de laag. De 150% hoogte van vroeger is daarom
   93,75% van deze hogere laag; overflow:hidden op .band1 houdt de overhang
   binnen. */
.band1::before {
  content: ""; position: absolute; inset: -30% 0; z-index: -1; pointer-events: none;
  background: url("/ds/logo/feestkanaal-merk.svg") no-repeat;
  background-position: right -14% center;
  background-size: auto 93.75%;
  filter: brightness(0) invert(1);
  opacity: .07;
  transform-origin: 82% 50%;
  animation: fk-bol 20s ease-in-out infinite;
}
@keyframes fk-bol {
  0%   { transform: rotate(-2.5deg); }
  50%  { transform: rotate(2.5deg); }
  100% { transform: rotate(-2.5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .band1::before { animation: none; }
}
/* De toelichting stond op --b1-soft, een grijs dat tegen de lichtste stand
   van de ondergrond maar 3,3:1 haalt. Op een gekleurde band moet hij wit. */
.band1 .reken-label, .band1 .reken-noot { color: var(--on-ink); }

/* De knop stond in de merkkleur blauw. Zolang de band groen was viel dat op,
   maar sinds de band boven de helft van de schuif zelf blauw wordt (21 sep
   2026) stond blauw op blauw. Wit werkt tegen allebei de standen: 11,8:1 op
   blauw, 8,7:1 op groen. */
.band1 .btn:not(.line) { background: var(--on-ink); color: var(--ink); }
.band1 .btn:not(.line):hover { background: color-mix(in srgb, var(--on-ink) 88%, var(--live)); }

@media (prefers-reduced-motion: reduce) {
  .band1 { transition: none; }
}

/* ── het slot en de voet ─────────────────────────────────────────
   "Het contactblok en de voet is een groot wit ziekenhuis": twee bleke
   vlakken onder elkaar met een haarlijn ertussen, samen ruim negenhonderd
   pixels. De eerste poging was het slot in kanaalgroen en de voet in een
   tint daarvan; dat was hetzelfde bleke vlak in een andere kleur.

   Dit haalt de naad ertussen weg: de vraag en de kleine letters zitten in
   hetzelfde donkere vlak, met alleen een haarlijn ertussen in plaats van
   een heel nieuw blok. Dat scheelt ruim driehonderd pixels staart. De knop
   is kanaalgroen, dus er staat nog steeds kleur op het eind.

   Bovenaan loopt de kanaalstreep van 4px die ook bovenaan de pagina staat:
   de pagina sluit met hetzelfde teken waarmee hij opent. */
.slot, .voet { position: relative; }
.band3.slot {
  background: var(--ink-surf); color: var(--on-ink);
  padding: var(--s9) 0 var(--s7);
}
.band3.slot::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg,
    var(--ch1) 0 33.33%, var(--ch2) 33.33% 66.66%, var(--ch3) 66.66% 100%);
}
.band3.slot h2 { color: var(--on-ink); }
.band3.slot .lead { color: color-mix(in srgb, var(--on-ink) 80%, transparent); }
.band3.slot .btn { background: var(--ch1); color: var(--ink); }
.band3.slot .btn:hover { background: color-mix(in srgb, var(--ch1) 86%, var(--on-ink)); }
.band3.slot .btn.line {
  background: transparent; color: var(--on-ink);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--on-ink) 46%, transparent);
}
.band3.slot .btn.line:hover { background: color-mix(in srgb, var(--on-ink) 12%, transparent); }

.voet {
  background: var(--ink-surf); color: var(--on-ink);
  border-top: 1px solid color-mix(in srgb, var(--on-ink) 12%, transparent);
  padding: var(--s7) 0;
}
/* 62 procent wit op dit zwart is 7,0:1, ruim boven de 4,5 die AA vraagt
   voor kleine letters. De adresregel staat op 72 procent. */
.voet h4 { color: color-mix(in srgb, var(--on-ink) 62%, transparent); }
.voet a { color: var(--on-ink); }
.voet a:hover { color: var(--ch1); }
.voet p.klein { color: color-mix(in srgb, var(--on-ink) 72%, transparent); }

/* ── ritme in het wit ────────────────────────────────────────────
   "De website is over het algemeen nog steeds vrij wit" (Dave, 21 sep 2026).
   Het probleem is niet dat er te weinig kleur is - de hero, de rekenband en
   de dj-band dragen genoeg - maar dat er vier witte vlakken achter elkaar
   staan: dit krijg je, de tijdlijn, de fotostrook en de vragen. Zonder rand
   ertussen leest dat als een lange witte pagina.

   Om en om is genoeg. De tijdlijn en de vragen staan op --wash, dat in het
   kanaalpalet een spoor kanaalblauw draagt (#f3f6ff, vijf procent). Dat is
   net geen wit - je ziet het als een vlak, niet als een kleur - en inkt
   erop haalt nog 15,7:1. Geen randen, geen lijnen: het vlak doet het werk. */
.sec#hoe, .sec.faq { background: var(--wash); }

/* ── de naden schuin ─────────────────────────────────────────────
   "Misschien zijn die horizontale snijlijnen en de blokken gewoon te recht
   toe recht aan" (Dave, 21 sep 2026). De vlakken op deze pagina lagen alle
   vier als kaarsrechte balken onder elkaar; dat is de opmaak van een
   inhoudsopgave, niet van een feest.

   Elke gekleurde of getinte band is nu een parallellogram: de boven- en
   onderrand lopen onder dezelfde lichte helling, en de witte secties
   ertussen vullen de driehoeken vanzelf. De hoek loopt dezelfde kant op als
   de scheve foto's in de strook, zodat het één gebaar blijft en niet twee.

   1,3 graden bij 1440 breed - net genoeg om te zien dat het niet waterpas
   ligt, weinig genoeg om niet als een effect te lezen. De hoek zit in
   pixels en niet in graden, want een schuine rand van een vast aantal
   graden wordt op een breed scherm een helling van honderd pixels.

   De inhoud krijgt de schuinte er als padding bij: zonder dat loopt de
   eerste regel tekst in de punt. */
.band1, .band-dj, .sec#hoe, .sec.faq, .sec#formulier {
  --schuin: clamp(16px, 2.2vw, 34px);
  clip-path: polygon(0 var(--schuin), 100% 0, 100% calc(100% - var(--schuin)), 0 100%);
  padding-block: calc(var(--sec-y) + var(--schuin));
  /* De band grijpt met de schuinte over zijn buren heen; zonder deze marge
     staat er een witte wig tussen twee banden die elkaar raken. */
  margin-block: calc(var(--schuin) * -0.5);
}
/* Binnenpagina's zetten de sectie na een blok vaak op padding-top:0. Na een
   schuine band schuift de kop dan onder de rand (23 sep 2026); daarom wint
   hier de gewone sectieruimte van die inline stijl. */
:is(.band1, .band-dj, .sec#hoe, .sec.faq, .sec#formulier) + .sec { padding-top: var(--sec-y) !important; }
@supports not (clip-path: polygon(0 0, 1px 0, 1px 1px)) {
  .band1, .band-dj, .sec#hoe, .sec.faq, .sec#formulier { clip-path: none; margin-block: 0; }
}


/* ── het stapnummer naast de kop in plaats van erboven ──────────
   Vastgelegd 23 sep 2026 (Dave). Het nummer stond als losse bol boven de kop en
   dan lees je eerst een cijfer in het niets. Naast de kop hoort het bij die kop
   en scheelt het een regel hoogte per stap. */
.stapkop { display: flex; align-items: center; gap: var(--s4); margin-bottom: var(--s3); }
.stapkop .nr { flex: 0 0 auto; }
.stapkop h3 { margin: 0; }

/* ── pakket op een telefoon ──────────────────────────────────────
   De twaalf kolommen van .bento.pakket wonnen van de 1fr-regel hierboven
   (hogere specificiteit), dus op een telefoon stonden de vier kleine tegels
   naast elkaar en brak de tekst per woord af (Dave, 28 sep 2026). Nu: de
   fototegels over de volle breedte, de kleine tegels twee aan twee. */
@media (max-width: 860px) {
  .bento.pakket, .bento.pakket.kwart { grid-template-columns: 1fr 1fr; }
  .bento.pakket .foto-tegel { grid-column: 1 / -1; }
  .bento.pakket article:not(.foto-tegel),
  .bento.pakket.kwart article:not(.foto-tegel) { grid-column: auto; }
}
@media (max-width: 420px) {
  .bento.pakket article:not(.foto-tegel),
  .bento.pakket.kwart article:not(.foto-tegel) { grid-column: 1 / -1; }
}

/* H1 is alleen de zoekterm; de staart staat ernaast in een <p> en ziet er hetzelfde uit (7 okt 2026) */
.hero h1:has(+ .h1-staart) { margin-bottom: 0; }
.hero .h1-staart { font-family: var(--font-head); font-weight: var(--head-weight);
  letter-spacing: var(--head-track); line-height: var(--lh-tight);
  font-size: clamp(2.2rem, 4.2vw, 3.5rem); color: #fff; margin: 0 0 18px; white-space: nowrap; }
@media (max-width: 900px) { .hero .h1-staart { white-space: normal; } }