/* ============================================================
   Feestkanaal — binnenpagina's (hoe-werkt-het, met-dj, contact)
   ------------------------------------------------------------
   Bovenop tokens.css, ds.css en home.css. Hier alleen wat een
   gewone tekstpagina extra nodig heeft.
   ============================================================ */

/* Geen eigen bovenmarge, en de sectie eromheen krijgt hieronder ook minder.
   Samen stond er eerst 160px wit boven de h1 (Dave, 23 sep 2026). */
.kop { padding: 0 0 var(--s8); }
/* De eerste sectie van een tekstpagina begint dicht onder de balk. 88px is het
   ritme tussen twee secties midden op een pagina; bovenaan is het een gat. */
.sec:has(> .wrap > .kop) { padding-top: var(--s7); }
.kop h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); margin-bottom: var(--s4); max-width: 22ch; }
/* Geen leesbreedte op de inleiding: hij loopt tot de rand van de kolom. Dat is een
   uitdrukkelijke keuze van Dave, 23 sep 2026, na 58ch, 70ch en 66 procent alle drie
   te hebben afgekeurd als "maar een halve pagina". De typografische regel dat een
   regel rond de 70 tekens hoort te blijven geldt hier dus niet; zet er geen ch-maat
   terug in zonder het hem te vragen. */
.kop .lead { margin: 0; max-width: none; font-size: 1.12rem; }
.kop .knoppen { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s6); }

/* hero met foto voor de dj-pagina */
.hero-dj { position: relative; color: #fff; background: var(--ink-surf); overflow: hidden; }
.hero-dj .photo { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .45; }
.hero-dj .wrap { position: relative; padding-top: var(--s11); padding-bottom: var(--s11); }
.hero-dj h1 { color: #fff; font-size: clamp(2.2rem, 4.6vw, 3.6rem); max-width: 20ch; margin-bottom: var(--s4); }
.hero-dj .lead { color: rgba(255,255,255,.88); max-width: 56ch; margin: 0 0 var(--s6); }
.hero-dj .price { font-family: var(--font-head); font-weight: var(--head-weight); font-size: var(--t-num);
                  letter-spacing: var(--head-track); margin: 0 0 var(--s5); }
.hero-dj .price small { font-family: var(--font-body); font-weight: var(--w-body); font-size: var(--t-sm);
                        color: rgba(255,255,255,.7); letter-spacing: 0; margin-left: var(--s2); }

/* proza: 600 woorden moeten prettig lezen */
.proza { max-width: var(--measure); display: grid; gap: var(--s4); }
.proza p { margin: 0; }
.proza h3 { margin-top: var(--s4); }

/* twee kolommen tekst met een foto */
/* Twee kolommen tekst zijn zelden even lang, en met align-items:center
   zweefde de korte kolom in het midden zodat de twee koppen niet meer
   op een lijn stonden. Tekst lijnt dus boven uit; alleen als er een foto
   in staat blijft het midden kloppen, want dan hoort de tekst naast het
   hart van het beeld. (Gezien op /zakelijk/, 18 sep 2026.) */
.tweeluik { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s8); align-items: start; }
.tweeluik:has(.photo) { align-items: center; }
.tweeluik .photo { aspect-ratio: 4 / 3; border-radius: var(--r-lg); background-size: cover; background-position: center; max-width: 100%; }

/* ── contact: hulppaneel met foto ────────────────────────────
   Naar de opzet van compressiekousen.store/pages/contact (21 sep 2026):
   een paneel in plaats van drie losse kaarten. Links de drie kanalen als
   rijen, rechts de helpdeskfoto die tot de rand van het paneel doorloopt —
   daarom geen radius op het beeld zelf en overflow:hidden op het paneel. */
.hulppaneel { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
              align-items: stretch; background: var(--surface); border: 1px solid var(--line);
              border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); }
.hulppaneel .tekst { padding: var(--s8); display: flex; flex-direction: column; justify-content: center; }
.hulppaneel .tekst h2 { margin: 0 0 var(--s3); }
.hulppaneel .tekst .lead { margin: 0 0 var(--s6); color: var(--soft); max-width: 44ch; font-size: 1rem; }
.hulppaneel .beeld { position: relative; background: var(--wash); }
/* min-height houdt de foto overeind als de kanalenkolom kort is. */
/* Op de donkere band zweeft de kaart boven een sfeerfoto: dat is dezelfde
   opbouw als de configurator op de groene band en de dj-band op de homepage.
   Drie witte secties onder elkaar lazen koud - "het ziet er niet uit als een
   feestje" (Dave, 21 sep 2026). */
.band-dj .hulppaneel { box-shadow: 0 30px 70px rgba(0, 0, 0, .45); border-color: transparent; }
.band-dj .hulppaneel .tekst h2 { color: var(--ink); }
.band-dj .hulppaneel .tekst .lead { color: var(--soft); }
.band-dj .hulppaneel .kanaal { color: var(--ink); }

.hulppaneel .beeld img { display: block; width: 100%; height: 100%; min-height: 100%;
                         object-fit: cover; object-position: 62% center; }

.kanalen { display: grid; gap: 12px; }
.kanaal { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto;
          grid-template-areas: "ico titel cta" "ico oms cta" "ico meta cta";
          column-gap: var(--s4); row-gap: 2px; padding: 14px 18px;
          border: 1px solid var(--line); border-radius: var(--r); background: var(--bg);
          color: inherit; text-decoration: none; transition: border-color .15s, background .15s; }
.kanaal:hover { border-color: var(--soft); background: var(--wash); }
/* Dezelfde bol als de icoonbadges elders, alleen klein genoeg voor een rij. */
.kanaal .kico { grid-area: ico; align-self: center; width: 42px; height: 42px; border-radius: 50%;
                display: grid; place-items: center; background: var(--verloop-accent); color: #fff;
                box-shadow: 0 6px 14px color-mix(in srgb, var(--accent-2) 28%, transparent); }
.kanaal .kico svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.75;
                    stroke-linecap: round; stroke-linejoin: round; }
.kanaal b    { grid-area: titel; font-size: 1rem; }
.kanaal .oms { grid-area: oms;  color: var(--soft); font-size: var(--t-sm); }
.kanaal .meta{ grid-area: meta; color: var(--soft); font-size: var(--t-xs); margin-top: 2px; }
/* De hele rij is de link; de knop is puur visueel, anders vangt hij de hover. */
.kanaal .cta { grid-area: cta; align-self: center; justify-self: end; pointer-events: none;
               padding: 11px 18px; border-radius: var(--r-pill); background: var(--brand);
               color: var(--on-brand); font-size: var(--t-sm); font-weight: 600; white-space: nowrap;
               /* Alle drie even breed: anders leest de rij als drie losse knoppen
                  in plaats van als een kolom. Breedte volgt de langste tekst. */
               min-width: 152px; text-align: center; }
.kanaal:hover .cta { background: var(--brand-d); }
.kanaal.wa .kico { background: var(--wa); color: #06301a; box-shadow: none; }
.kanaal.wa .cta  { background: var(--wa); color: #06301a; }
.kanaal.wa:hover .cta { background: #1eb955; }

/* ── kies waar je vraag over gaat ─────────────────────────────
   De tegels uit compressiekousen.store/pages/contact: je kiest een
   categorie en de vragenlijst eronder toont alleen die groep. Het zijn
   knoppen, geen links: de vragen staan op deze pagina zelf. */
.kop.midden { text-align: center; }
/* .kop h1 draagt elders een max-width en die trok hem naar links. */
.kop.midden h1 { margin-inline: auto; }
.kop.midden .lead { margin-inline: auto; }
.oog { display: block; font-size: var(--t-xs); font-weight: 600; letter-spacing: .12em;
       text-transform: uppercase; color: var(--accent); margin-bottom: var(--s3); }

.vraagkeuze { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin-top: var(--s6); }
/* De tegel is dezelfde kaart als in de bento op de homepage: de icoonbol hangt
   over de bovenrand, tekent zichzelf en wiegt daarna. De overhang en het
   centreren komen uit home.css, zodat het één systeem blijft. */
.vraagtegel { 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);
              color: inherit; font: inherit; cursor: pointer;
              transition: border-color .15s, box-shadow .15s, transform .15s; }
.vraagtegel:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: transparent; }
.vraagtegel[aria-pressed="true"] { border-color: transparent; background: var(--wash); box-shadow: var(--shadow); }
.vraagtegel h3 { font-size: 1.08rem; margin-bottom: var(--s2); }
.vraagtegel p { margin: 0; color: var(--soft); font-size: var(--t-sm); line-height: var(--lh-snug); }

/* ── de vragenlijst in twee lagen ─────────────────────────────
   Twintig vragen onder elkaar met een kopje ertussen las als een rommeltje
   (Dave, 21 sep 2026): de groepskoppen stonden klem tussen de scheidingslijnen
   van de vragen eromheen. Nu is de groep zelf een <details>. Je ziet zes
   dichte balken, klapt er een open en klapt daarbinnen een antwoord uit.
   De basisregels voor details/summary staan in ds.css; hieronder alleen wat
   de twee lagen uit elkaar houdt. */
.faqlijst { display: grid; gap: 12px; margin-top: var(--s6); }

.faq .faqgroep { border: 1px solid var(--line); border-bottom: 1px solid var(--line);
                 border-radius: var(--r); background: var(--surface); padding: 0;
                 transition: border-color .15s, box-shadow .15s; }
.faq .faqgroep:hover { border-color: var(--soft); }
.faq .faqgroep[open] { border-color: var(--brand); box-shadow: var(--shadow-sm); }
.faq .faqgroep > summary { padding: 18px var(--s6); align-items: center; gap: var(--s4); }
.faq .faqgroep > summary h3 { margin: 0; font-size: 1.12rem; }
.faq .faqgroep > summary .tel { margin-left: auto; color: var(--soft); font-size: var(--t-xs);
                               font-family: var(--font-body); font-weight: 400; }
.faq .faqgroep > summary::after { font-size: 1.5rem; }

/* laag twee: de vragen binnen een open groep */
.faq .vragen { padding: 0 var(--s6) 6px; }
.faq .vragen details { border: 0; border-top: 1px solid var(--line); padding: 14px 0; }
.faq .vragen summary { font-size: 1rem; font-weight: var(--w-semi); font-family: var(--font-body); }
.faq .vragen summary::after { font-size: 1.15rem; }
.faq .vragen p { margin: 10px 0 2px; }
@media (max-width: 560px) {
  .faq .faqgroep > summary { padding: 16px var(--s5); }
  .faq .faqgroep > summary .tel { display: none; }
  .faq .vragen { padding: 0 var(--s5) 6px; }
}
@media (max-width: 860px) { .vraagkeuze { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .vraagkeuze { grid-template-columns: 1fr; } }

/* formulier */
/* ── het formulier: witte kaart op een getinte band ─────────────
   Keuze van Dave, 23 sep 2026, uit drie varianten. Wat er stond waren losse
   velden op wit, 640px breed in een kolom van 860, zonder vlak of rand eromheen.
   Zijn oordeel: "het is een soort kaal, je scrolt langs en je ziet het niet".
   De band geeft het blok een grond en de kaart maakt er een ding van. De maat
   van 640px is weg: de kaart vult de kolom, want twee derde was de tweede
   klacht. */
.sec#formulier { background: var(--wash); }
.formulier { max-width: none; display: grid; gap: var(--s5);
             background: var(--surface); border: 1px solid var(--line);
             border-radius: var(--r-lg); box-shadow: var(--shadow);
             padding: var(--s7); }
@media (max-width: 720px) { .formulier { padding: var(--s5); } }
.formulier label { display: grid; gap: 6px; }
.formulier label > span { font-size: var(--t-xs); color: var(--soft); }
.formulier .rij2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.formulier textarea { width: 100%; min-height: 120px; font: inherit; padding: 12px 14px; border: 1px solid var(--line);
                      border-radius: var(--r); background: var(--surface); color: var(--ink); resize: vertical; }
.formulier select { width: 100%; height: 48px; font: inherit; padding: 0 12px; border: 1px solid var(--line);
                    border-radius: var(--r); background: var(--surface); color: var(--ink); }
.formulier .vink { display: flex; gap: 10px; align-items: flex-start; font-size: var(--t-sm); color: var(--soft); }
.formulier .vink input { margin-top: 4px; accent-color: var(--brand); }
.formulier .noot { font-size: var(--t-xs); color: var(--soft); margin: 0; }

.gegevens { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6); font-size: var(--t-sm); color: var(--soft); }
.gegevens b { display: block; color: var(--ink); margin-bottom: 4px; }

@media (max-width: 860px) {
  .tweeluik, .gegevens { grid-template-columns: 1fr; }
  /* Foto bóven de kanalen: onder een lap tekst wordt hij niet meer gezien. */
  .hulppaneel { grid-template-columns: 1fr; }
  .hulppaneel .tekst { order: 2; padding: var(--s6) var(--s5); }
  .hulppaneel .beeld { order: 1; }
  .hulppaneel .beeld img { aspect-ratio: 16 / 9; height: auto; min-height: 0; object-position: 62% 30%; }
}
@media (max-width: 560px) {
  .formulier .rij2 { grid-template-columns: 1fr; }
  /* Drie kolommen in 340px geeft afgeknepen tekst: terug naar stapelen. */
  .kanaal { display: flex; flex-direction: column; gap: 6px; padding: 18px; }
  .kanaal .kico { align-self: flex-start; }
  .kanaal .cta { align-self: stretch; text-align: center; margin-top: 8px; }
}

.hero-dj .knoppen { display: flex; gap: var(--s3); flex-wrap: wrap; margin: 0; }

/* ── stappen onder elkaar, om en om beeld en tekst ───────────── */
.stappen-lang { display: grid; gap: var(--s9); }
.stap-lang { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s8); align-items: center; }
.stap-lang:nth-child(even) .photo { order: 2; }
.stap-lang .photo { aspect-ratio: 4 / 3; border-radius: var(--r-lg); background-size: cover; background-position: center; max-width: 100%; }
/* schermafdruk van onze eigen interface: helemaal tonen, niet bijsnijden */
.stap-lang .photo.ui { background-size: contain; background-repeat: no-repeat; background-color: #fff; border: 1px solid var(--lijn, #e6e9f0); }
/* Stapnummers in het merkverloop, alle vier hetzelfde. Ze liepen tot 22 sep
   2026 door ch1/ch2/ch3 heen; dan beweert de kleur dat stap 2 bij kanaal 2
   hoort, en dat is niet waar. Zelfde redenering als bij .ico in home.css. */
.stap-lang .nr { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
                 background: var(--verloop-accent); color: #fff; font-family: var(--font-head); font-weight: var(--head-weight);
                 box-shadow: 0 6px 16px color-mix(in srgb, var(--accent-2) 26%, transparent);
                 margin-bottom: var(--s4); }
.stap-lang h3 { font-size: 1.5rem; margin-bottom: var(--s3); }
/* 62ch in plaats van 48: de tekstkolom van een stap is ongeveer 520px breed en
   bij 48ch bleef daar een strook van leeg (Dave, 23 sep 2026). */
.stap-lang p { margin: 0 0 var(--s3); color: var(--soft); max-width: 62ch; }
.stap-lang p:last-child { margin-bottom: 0; }

/* ── stap 3 op /hoe-werkt-het/: de technische stap ────────────
   Vastgelegd 22 sep 2026 (Dave). De pagina beantwoordde alleen "wat gebeurt er
   na mijn bestelling": ik bestel, ik ontvang, ik stuur terug. Wat iemand
   tegenhoudt is de andere vraag: hoe werkt dat ding, en wat heb ik nodig als ik
   twee kanalen wil. Die stap staat daarom over de volle breedte, met een
   tekening in plaats van een foto: geen van de referentiesites (stillewillys,
   silentdiscokoptelefoons) tekent bron -> zender -> koptelefoon, terwijl dat de
   vraag in een keer beantwoordt. Plan: dossier/HOE-WERKT-HET-PLAN.md.

   Eerst was het een brede tekening met drie rijen naast elkaar. Die paste niet
   op een telefoon: op 390px viel de helft buiten beeld en een schuifbalk is
   geen antwoord. Nu drie kaarten, een per aantal kanalen, zodat de kaart "twee
   kanalen" letterlijk twee ketens laat zien. Dat is ook inhoudelijk beter: het
   beeld zegt nu hetzelfde als de tekst eronder. */
.stap-breed { grid-template-columns: 1fr; gap: var(--s6); }
/* Volle kolombreedte, zie de noot bij .kop .lead. */
.stap-breed .stap-in { max-width: none; }
.stap-breed .stap-in p { max-width: none; }
.kanaalkeuze { list-style: none; margin: 0; padding: 0; display: grid;
               grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.kanaalkeuze li { border: 1px solid var(--line); border-radius: var(--r-lg);
                  overflow: hidden; background: var(--surface); }
/* Alle drie de tekeningen zijn even hoog (drie ketens), ook die met er een, en
   de ketens staan verticaal gecentreerd. Anders springen de kopjes eronder op
   drie verschillende hoogtes. */
.kanaalkeuze .keten { background: var(--wash); padding: var(--s4) var(--s5); }
.kanaalkeuze .ketensvg { width: 100%; height: auto; display: block; }
.kanaalkeuze h4 { font-size: 1.02rem; margin: var(--s5) var(--s5) var(--s2); }
.kanaalkeuze p { color: var(--soft); font-size: var(--t-sm);
                 line-height: var(--lh-snug); margin: 0 var(--s5) var(--s5); }
@media (max-width: 720px) { .kanaalkeuze { grid-template-columns: 1fr; } }

/* ── wat is een silent disco: kort blok boven de stappen ────── */
.watis { max-width: none; margin: 0 0 var(--s9); }
.watis h2 { font-size: 1.5rem; margin-bottom: var(--s3); }
.watis p { color: var(--soft); margin: 0; }

/* ── bento-tegel met foto in plaats van icoon ───────────────── */
.bento .foto-tegel { padding: 0; overflow: hidden; display: grid; grid-template-rows: 1fr auto; }
/* aspect-ratio zet de minimale hoogte; height vult de rest van de kaart als de
   buurkaart langer is. Anders staat er wit onder de foto (22 sep 2026). */
.bento .foto-tegel .photo { aspect-ratio: 16 / 10; height: 100%; background-size: cover; background-position: center; }
.bento .foto-tegel .tekst { padding: var(--s5) var(--s6); }
.bento .foto-tegel.todo-foto .photo { display: grid; place-items: center; background: var(--wash); }

@media (max-width: 860px) {
  .stap-lang { grid-template-columns: 1fr; }
  .stap-lang:nth-child(even) .photo { order: 0; }
}

/* ── prijsstaffel (/prijzen/) ────────────────────────────────
   De enige tabel met bedragen op de site. bouw.py rendert hem uit
   data/prijzen.json; zie staffel_tabel(). Nooit met de hand vullen. */
.staffel { max-width: 640px; margin: 0 auto; }
.staffel table { width: 100%; border-collapse: collapse; }
.staffel th {
  text-align: left; font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: .08em; color: var(--soft); font-weight: 600;
  padding: 0 var(--s4) var(--s3); border-bottom: 1px solid var(--line);
}
.staffel td {
  padding: var(--s4); border-bottom: 1px solid var(--line);
  font-size: var(--t-md);
}
.staffel tr:last-child td { border-bottom: 0; }
.staffel td:last-child { text-align: right; white-space: nowrap; }
.staffel td b { font-size: 1.15em; }
.staffel .klein { padding: 0 var(--s4); }

@media (max-width: 520px) {
  .staffel th, .staffel td { padding-left: 0; padding-right: 0; }
  .staffel .klein { padding: 0; }
}

/* ── lijsten in prozablokken ─────────────────────────────────
   De productpagina's zetten hun bewijs in korte lijstjes; zonder dit
   erven die de browsermarges en vallen ze uit het grid-ritme. */
.proza ul { margin: 0; padding-left: 1.15em; display: grid; gap: var(--s3); }
.proza li { line-height: var(--lh-snug); }
.proza li::marker { color: var(--soft); }


/* ── vlak achter beeld (P1) ──────────────────────────────────
   Keuze Dave 17 sep 2026: een vlak in de accentkleur ligt verschoven achter
   de foto. Geen kader, geen rand, een tweede vorm die eronder uitkomt.

   Uitgevoerd als harde box-shadow in plaats van een extra element: op een
   strook van 14px is een verloop niet te zien (dezelfde reden waarom de knop
   liever een echte kleur heeft dan een gradient), en zo hoeft er nergens een
   wrapper om een foto heen. Het schuift mee met de kant waar de foto staat,
   zodat het vlak altijd naar het midden van de pagina wijst.

   Alleen op de grote, losse beelden van /hoe-werkt-het/. Om elke foto een
   vlak zetten maakt er een sjabloon van. */
.stap-lang .photo {
  box-shadow: 14px 14px 0 0 var(--accent-2);
}
.stap-lang:nth-child(even) .photo {
  box-shadow: -14px 14px 0 0 var(--accent-2);
}
@media (max-width: 860px) {
  /* Op één kolom staat de foto altijd links en is er minder ruimte. */
  .stap-lang .photo,
  .stap-lang:nth-child(even) .photo { box-shadow: 8px 8px 0 0 var(--accent-2); }
}