/* ============================================================
   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; }
/* 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),
.contact-grid article:has(> .ico) {
  position: relative; margin-top: 34px;
  padding-top: calc(var(--s6) + 26px); text-align: center; }
.feat-grid article:has(> .ico) p,
.contact-grid article:has(> .ico) p,
.bento article:has(> .ico) p { margin-inline: auto; max-width: 34ch; }

/* Uitzondering: de brede tegel in de bento draagt een langere alinea over twee
   kolommen. Gecentreerd valt die uit elkaar, dus daar blijft alles links. */
.bento .breed:has(> .ico) { text-align: left; }
.bento .breed:has(> .ico) .ico { left: var(--s6); transform: translate(0, -50%); }
.bento .breed:has(> .ico) p { margin-inline: 0; 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: bento, één brede tegel en vijf gewone ─────── */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.bento .breed { grid-column: span 2; background: var(--wash); border-color: transparent; }
.bento .breed p { max-width: 52ch; }

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

@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. */
.bar { background: transparent; border-bottom: 0;
       transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.bar .wrap { position: relative; }
.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. */
.bar.klein {
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent);
}
.bar.klein::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg,
    var(--ch1) 0 33.333%, var(--ch2) 0 66.666%, var(--ch3) 0);
}
/* 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. Op de homepage blijft hij staan,
   want daar is de balk in de bovenstand groot. */
.channelline:has(+ .bar.klein) { 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.klein { background: 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 .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:not(.klein) { background: linear-gradient(to bottom, rgba(0,0,0,.62), rgba(0,0,0,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: 0; margin: 0 0 var(--s10); }
.strook .baan { display: flex; gap: var(--s4); width: max-content;
                animation: strook 70s linear infinite; }
.strook:hover .baan { animation-play-state: paused; }
.strook figure { margin: 0; position: relative; flex: none; width: 460px; aspect-ratio: 4 / 3;
                 border-radius: var(--r-lg); overflow: hidden; }
.strook .photo { position: absolute; inset: 0; background-size: cover; background-position: center; }
.strook 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)); }
@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 */
.bar:not(.klein) .wrap { height: 112px; }
.bar:not(.klein) .logo.midden { top: 14px; }
.hero { margin-top: -112px; }
.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 input[type=date] { height: 60px; }
@media (max-width: 1000px) {
  .boekstart { grid-template-columns: 1fr; }
  .bar:not(.klein) .wrap { height: 90px; }
  .hero { margin-top: -90px; } .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; } }