/* ============================================================
   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.
   ============================================================ */

.kop { padding: var(--s10) 0 var(--s8); }
.kop h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); margin-bottom: var(--s4); max-width: 22ch; }
.kop .lead { margin: 0; max-width: 58ch; 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: drie manieren + persoon */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s4); }
.contact-grid article { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
                        padding: var(--s6); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--s2); }
.contact-grid h3 { font-size: 1.08rem; margin: 0; }
.contact-grid p { margin: 0; color: var(--soft); font-size: var(--t-sm); }
.contact-grid .btn { align-self: flex-start; margin-top: var(--s3); }
.persoon { display: grid; grid-template-columns: 180px 1fr; gap: var(--s7); align-items: center;
           background: var(--wash); border-radius: var(--r-lg); padding: var(--s7); margin-bottom: var(--s6); }
.persoon .foto { aspect-ratio: 1; border-radius: 50%; background: var(--surface); border: 1px solid var(--line);
                 display: grid; place-items: center; text-align: center; padding: var(--s4); max-width: 100%; }
.persoon .kop { padding: 0; font-family: var(--font-head); font-weight: var(--head-weight); font-size: 1.3rem; margin-bottom: var(--s2); }
.persoon p { margin: 0; color: var(--soft); }

/* formulier */
.formulier { max-width: 640px; display: grid; gap: 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, .contact-grid, .persoon, .gegevens { grid-template-columns: 1fr; }
  .persoon .foto { max-width: 160px; }
}
@media (max-width: 560px) { .formulier .rij2 { grid-template-columns: 1fr; } }

.hero-dj .knoppen { display: flex; gap: var(--s3); flex-wrap: wrap; margin: 0; }
.persoon .foto .todo { white-space: normal; line-height: 1.3; }

/* ── 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%; }
.stap-lang .nr { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
                 background: var(--ink); color: var(--bg); font-family: var(--font-head); font-weight: var(--head-weight);
                 margin-bottom: var(--s4); }
.stap-lang:nth-child(1) .nr { background: var(--ch1); color: #0f1216; }
.stap-lang:nth-child(2) .nr { background: var(--ch2); color: #fff; }
.stap-lang:nth-child(3) .nr { background: var(--ch3); color: #fff; }
.stap-lang h3 { font-size: 1.5rem; margin-bottom: var(--s3); }
.stap-lang p { margin: 0 0 var(--s3); color: var(--soft); max-width: 48ch; }
.stap-lang p:last-child { margin-bottom: 0; }

/* ── bento-tegel met foto in plaats van icoon ───────────────── */
.bento .foto-tegel { padding: 0; overflow: hidden; display: grid; grid-template-rows: 1fr auto; }
.bento .foto-tegel .photo { aspect-ratio: 16 / 10; 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); }
}