@charset "utf-8";
/* ============================================================================
   DrumFire — drumfire.be
   Alle kleuren zijn uit bron/logo-drumfire-1600.png geprikt, niet gegokt.
   Geen enkel extern verzoek: geen webfont, geen CDN, geen icoonlettertype.
   ========================================================================= */

:root {
  /* --- kleuren, gemeten uit het logo ------------------------------------ */
  --ink:        #151011;   /* merkachtergrond                                */
  --ink-2:      #1c1516;   /* afwisselende sectie                            */
  --ink-3:      #241b1c;   /* kaart / paneel                                 */
  --line:       #332728;   /* hairline                                       */
  --line-warm:  #4a3226;   /* hairline met warmte — alleen decoratief        */
  /* Rand van alles wat je kunt aantikken. WCAG 2.2 SC 1.4.11 vraagt 3:1 voor
     de zichtbare begrenzing van een bedienbaar element; --line-warm haalt maar
     1,59:1 op --ink. Deze haalt 4,27:1 op --ink en 3,81:1 op --ink-3.        */
  --line-ui:    #96705a;

  --cream:      #f5efe6;   /* "DRUM"            16.5:1 op --ink              */
  --body:       #c6bcb0;   /* lopende tekst     10.1:1 op --ink              */
  --brass:      #c89b5a;   /* "LIVE PERCUSSION"  7.4:1 op --ink              */
  --flame:      #f76707;   /* "FIRE"             6.2:1 op --ink              */
  --flame-hi:   #ff7a1f;
  --flame-deep: #d9480f;   /* buitenring vlam — enkel als lijn/vlak          */
  --amber:      #ffa12f;   /* onderkant vlamdruppel  9.3:1 op --ink          */
  --gold:       #ffd43b;   /* bovenkant vlamdruppel 13.2:1 op --ink          */

  /* --- letters: uitsluitend systeemletters, geen enkele download --------- */
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --font-display: "Avenir Next", Avenir, "Futura", "Century Gothic",
          ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  /* --- schaal ----------------------------------------------------------- */
  --fs-h1:    clamp(2rem, 7.6vw, 3.25rem);
  --fs-h2:    clamp(1.625rem, 5vw, 2.375rem);
  --fs-h3:    clamp(1.0625rem, 2.2vw, 1.1875rem);
  --fs-lead:  clamp(1.0625rem, 3.1vw, 1.25rem);
  --fs-body:  1.0625rem;
  --fs-small: 0.9375rem;

  --sp-sec:   clamp(3.25rem, 8vw, 6rem);
  --radius:   10px;
  --radius-l: 16px;
  --tap:      44px;         /* kleinste raakvlak */
  --kop-h:    3.75rem;      /* hoogte vaste kopbalk */
  --balk-h:   5.25rem;      /* hoogte vaste boekingsbalk op telefoon */
}

/* ---------------------------------------------------------------- basis -- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--kop-h) + 1rem);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--body);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  padding-bottom: calc(var(--balk-h) + env(safe-area-inset-bottom, 0px));
}

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--cream);
  line-height: 1.12;
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -.015em; }
h2 { font-size: var(--fs-h2); font-weight: 800; letter-spacing: -.01em; }
h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: .005em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
strong { color: var(--cream); font-weight: 700; }

a { color: var(--amber); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--gold); }

img { max-width: 100%; height: auto; display: block; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap { width: min(100% - 2.5rem, 66rem); margin-inline: auto; }

/* icoonvoorraad onzichtbaar houden zonder display:none — dat laatste breekt
   <use> in enkele browsers */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.ico { width: 1.3em; height: 1.3em; flex: none; }

/* vast, niet absoluut: anders staat de sprongknop bovenaan het document en
   is ze onzichtbaar zodra de bezoeker al gescrold heeft */
.skip {
  position: fixed; left: 0; top: 0; z-index: 100;
  transform: translateY(-120%);
  background: var(--flame); color: var(--ink);
  padding: .85rem 1.25rem; font-weight: 700;
  text-decoration: none;
}
.skip:focus { transform: translateY(0); color: var(--ink); }

/* ------------------------------------------------------------- kopbalk -- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--ink);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex; align-items: center; gap: .75rem;
  min-height: var(--kop-h);
}

/* flex: 0 1 auto + min-width: 0 + overflow: hidden is de harde garantie dat de
   merknaam nóóit onder het menu door schuift: bij plaatsgebrek krimpt en knipt
   het merkblok, in plaats van dat de twee teksten over elkaar lopen. */
.brand {
  display: inline-flex; align-items: center; gap: .55rem;
  text-decoration: none;
  flex: 0 1 auto; min-width: 0; overflow: hidden;
  padding: .35rem .1rem;
  min-height: var(--tap);
}
/* Het kopbalklogo is het woordmerk zonder ondertitel — die is op deze hoogte
   toch onleesbaar. Verhouding 900 × 209, dus ruim 4:1: sturen op BREEDTE, niet
   op hoogte, anders loopt het bij een kleine hoogtewijziging meteen over het
   menu heen. Bij 320 px is 26vw = 83 px breed; "Formules" en "Boeken" samen
   vragen ±130 px, dus dat past met marge. */
.brand__logo { width: clamp(5.5rem, 26vw, 8.5rem); height: auto; flex: none; }

/* menu: op telefoon blijven alleen Formules en Boeken staan (zie index.html),
   vanaf 768 px komen de andere vier erbij. Geen JavaScript nodig. */
/* Geen overflow-eigenschap op .mainnav: die zou de focus-omranding van een
   menu-item wegknippen. Het menu past altijd, want op smalle schermen staan
   er maar twee items in. */
.mainnav { flex: 1 1 auto; min-width: 0; }
.mainnav ul {
  display: flex; align-items: center; gap: .25rem;
  justify-content: flex-end; flex-wrap: nowrap;
}
.mainnav .breed { display: none; }
.mainnav a {
  display: inline-flex; align-items: center;
  min-height: var(--tap); padding: 0 .7rem;
  border-radius: var(--radius);
  color: var(--body); text-decoration: none;
  font-size: .9375rem; font-weight: 600; white-space: nowrap;
}
.mainnav a:hover { color: var(--cream); background: var(--ink-3); }
.mainnav__cta { color: var(--amber) !important; }
.mainnav__cta:hover { color: var(--gold) !important; }

/* ---------------------------------------------------------------- hero -- */
.hero {
  background:
    radial-gradient(115% 74% at 50% 4%,  rgba(247,103,7,.20), rgba(247,103,7,0) 60%),
    radial-gradient(70%  46% at 50% -4%, rgba(255,212,59,.12), rgba(255,212,59,0) 60%),
    var(--ink);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(2.25rem, 6vw, 4rem) clamp(3rem, 7vw, 5rem);
  text-align: center;
}
.hero__inner { display: flex; flex-direction: column; align-items: center; }
.hero__logo {
  /* Horizontaal woordmerk, 1400 × 405 (≈ 3,46:1). Breed sturen; het is veel
     lager dan het vroegere verticale logo, wat de hero korter maakt — precies
     wat de hoofdknop boven de vouw houdt op een korte telefoon. */
  width: min(90%, clamp(15rem, 76vw, 32rem)); height: auto;
  /* margin-inline: auto is hier geen opsmuk maar noodzaak. Het <picture> eromheen
     is een blokelement dat de volle breedte van de hero inneemt; align-items op de
     flexcontainer centreert dát blok, niet de afbeelding erbinnen. Zonder deze regel
     staat het logo tegen de linkerrand — gemeten op 1440 px: picture 1056 px breed,
     img 512 px, allebei op left = 192. */
  margin-inline: auto;
  margin-bottom: clamp(1rem, 2.6vw, 1.5rem);
}
.hero h1 { max-width: 18ch; }
.hero__lead {
  font-size: var(--fs-lead); line-height: 1.55;
  max-width: 46ch; margin-bottom: clamp(1.5rem, 4vw, 2rem);
  color: var(--body);
}
.hero__meta {
  margin: 1.5rem 0 0; font-size: var(--fs-small);
  color: var(--brass); letter-spacing: .02em;
  max-width: 40ch;
}
/* Geen derde knop — de hero houdt er twee — maar wel een raakvlak van 44 px
   hoog, zodat de prijs op een telefoon vlot aan te tikken is. */
.hero__prijs { margin: 0 0 .75rem; }
.hero__prijs a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem; padding-inline: .5rem;
  color: var(--gold); font-weight: 700; font-size: var(--fs-small);
  letter-spacing: .01em;
}

/* Op telefoon staan de twee knoppen onder elkaar en even breed; dat leest
   rustiger dan twee blokken van ongelijke lengte. */
.btnrow {
  display: flex; flex-direction: column; gap: .75rem;
  align-items: stretch; margin: 0; width: 100%; max-width: 22rem;
}
/* knoppenrij die niet in een gecentreerd blok staat (bv. de fiche-download) */
.btnrow--links { align-items: flex-start; margin-top: 1.5rem; }

/* -------------------------------------------------------------- knoppen -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3.25rem; min-width: var(--tap);
  padding: .75rem 1.4rem;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 700; letter-spacing: .01em;
  text-decoration: none; cursor: pointer;
  border: 2px solid transparent;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn--primary { background: var(--flame); color: var(--ink); }
.btn--primary:hover { background: var(--flame-hi); color: var(--ink); }
.btn--ghost { border-color: var(--line-ui); color: var(--cream); background: transparent; }
.btn--ghost:hover { border-color: var(--flame); color: var(--cream); background: rgba(247,103,7,.08); }

/* -------------------------------------------------------------- secties -- */
.section { padding-block: var(--sp-sec); }
.section--alt {
  background: var(--ink-2);
  border-block: 1px solid var(--line);
}
.section--boeken {
  background:
    radial-gradient(100% 70% at 50% 100%, rgba(247,103,7,.16), rgba(247,103,7,0) 65%),
    var(--ink);
  border-top: 1px solid var(--line);
}

.eyebrow {
  font-family: var(--font-display);
  font-size: .8125rem; font-weight: 700;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 .85rem;
}
/* hoort bij een gecentreerd blok, zoals de reel-plaatshouder */
.eyebrow--midden { text-align: center; }
.section__lead {
  font-size: var(--fs-lead); line-height: 1.6;
  max-width: 62ch; color: var(--body);
}

/* --------------------------------------------------------------- kaarten -- */
.cards { display: grid; gap: 1rem; margin-top: clamp(1.75rem, 4vw, 2.5rem); }

.card {
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: 1.5rem 1.375rem;
}
.card h3 { margin-bottom: .45em; }
.card p { font-size: var(--fs-small); line-height: 1.6; }
.card__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; margin-bottom: 1rem;
  border-radius: 50%;
  background: rgba(247,103,7,.14);
  color: var(--amber);
}
.card__ico .ico { width: 1.4rem; height: 1.4rem; }

/* ----------------------------------------------------------------- reel -- */
.reel {
  border: 2px dashed var(--line-warm);
  border-radius: var(--radius-l);
  background: rgba(21,16,17,.5);
  padding: clamp(1.75rem, 5vw, 3rem) clamp(1.25rem, 4vw, 2.5rem);
  text-align: center;
  max-width: 46rem; margin-inline: auto;
}
/* Bewust kleiner dan een gewone sectiekop: dit blok mag eerlijk zijn over wat
   er nog niet is, maar het mag niet het onderwerp van de pagina worden. */
.reel h2 { margin-bottom: .6em; font-size: clamp(1.375rem, 3.4vw, 1.75rem); }
/* De lopende tekst staat links uitgelijnd: een gecentreerde alinea van vijf
   regels leest op een smal scherm slecht. Kop, icoon en knop blijven midden. */
.reel p { max-width: 52ch; margin-inline: auto; font-size: var(--fs-small); text-align: left; }
.reel p + p { margin-top: 1em; }
.reel .btnrow { margin-inline: auto; }
.reel__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.25rem; height: 3.25rem; margin-bottom: 1.25rem;
  border-radius: 50%;
  background: rgba(247,103,7,.14); color: var(--amber);
}
.reel__ico .ico { width: 1.6rem; height: 1.6rem; }
.reel .btnrow { margin-top: 1.75rem; }

/* ------------------------------------------------------------- muzikant -- */
.muzikant { margin-top: .5rem; }
.muzikant__tekst { max-width: 62ch; }

.note {
  display: flex; align-items: flex-start; gap: .7rem;
  margin-top: 1.5rem; padding: 1rem 1.125rem;
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-left: 3px solid var(--flame-deep);
  border-radius: var(--radius);
  font-size: var(--fs-small); line-height: 1.55;
}
.note .ico { color: var(--amber); margin-top: .18em; width: 1.15rem; height: 1.15rem; }

.muzikant__lead {
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
  border-radius: var(--radius-l); overflow: hidden;
  border: 1px solid var(--line);
}
.muzikant__lead img { width: 100%; height: auto; }

.galerij {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(2, 1fr);
  margin-top: .75rem;
}
.galerij figure { margin: 0; position: relative; }
.galerij img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--ink-3);
}
.galerij figcaption {
  margin-top: .5rem;
  font-size: .8125rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--brass);
}

/* -------------------------------------------------------------- prijzen -- */
/* Op telefoon staat de naam links en het bedrag rechts: compacter en sneller
   te scannen dan drie hoge blokken onder elkaar. */
.prijzen .card--prijs {
  position: relative; overflow: hidden;
  padding-top: 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.card--prijs::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--flame-deep), var(--flame), var(--gold));
}
.card--prijs h3 { margin: 0; color: var(--body); font-weight: 600; letter-spacing: .02em; }
/* De selector moet .card p (0,1,1) verslaan, anders erft het bedrag de kleine
   kaartletter en rendert het op 15 px in plaats van 28-36 px. */
.card p.prijs {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 5.5vw, 2.25rem); font-weight: 800;
  color: var(--cream); line-height: 1.1; margin: 0; text-align: right;
}
.prijs__vanaf {
  display: block;
  font-size: .75rem; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--brass);
  margin-bottom: .25rem;
}

/* ------------------------------------------------------ panelen & lijsten -- */
.duo { display: grid; gap: 1rem; margin-top: 1rem; }
.panel {
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: 1.5rem 1.375rem;
}
.panel h3 { margin-bottom: 1rem; }

.lijst li {
  display: flex; align-items: flex-start; gap: .7rem;
  font-size: var(--fs-small); line-height: 1.55;
  padding: .45rem 0;
}
.lijst .ico { color: var(--flame); margin-top: .2em; width: 1.05rem; height: 1.05rem; }

.feiten {
  display: flex; flex-wrap: wrap; gap: .625rem;
  margin: 0 0 clamp(1.75rem, 4vw, 2.25rem);
}
.feiten li {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem .9rem;
  border: 1px solid var(--line-ui); border-radius: 999px;
  font-size: .875rem; color: var(--body);
}

/* doorverwijzing onderaan een sectie, bv. van Formules naar Praktisch */
.doorlink { margin: 1.5rem 0 0; }
.doorlink a {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: var(--tap); font-weight: 700; font-size: var(--fs-small);
}
.doorlink .ico { width: 1.05rem; height: 1.05rem; }
.feiten .ico { color: var(--amber); width: 1.05rem; height: 1.05rem; }

/* -------------------------------------------------------------- contact -- */
.contact {
  display: grid; gap: .875rem;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}
.contactkaart {
  display: flex; align-items: center; gap: 1rem;
  min-height: 4.75rem; padding: 1rem 1.25rem;
  background: var(--ink-3);
  border: 1px solid var(--line-ui);
  border-radius: var(--radius-l);
  text-decoration: none; color: var(--cream);
  transition: border-color .18s ease, background-color .18s ease;
}
.contactkaart:hover { border-color: var(--flame); background: rgba(247,103,7,.08); color: var(--cream); }
.contactkaart__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; flex: none;
  border-radius: 50%; background: var(--flame); color: var(--ink);
}
.contactkaart__ico .ico { width: 1.35rem; height: 1.35rem; }
.contactkaart__tekst { display: flex; flex-direction: column; min-width: 0; }
.contactkaart__label {
  font-size: .75rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--brass);
}
.contactkaart__waarde {
  font-family: var(--font-display);
  font-size: 1.375rem; font-weight: 800; letter-spacing: .01em;
  line-height: 1.25;
}
/* Het mailadres brak eerder midden in het domein af ("…@telen / et.be").
   Drie dingen samen lossen dat op:
   1. de letter krimpt mee met het scherm, zodat het adres op een telefoon op
      één regel blijft;
   2. in index.html staat een <wbr> vóór de @, zodat een breuk — als hij toch
      moet — op het enige logische punt valt: naam / @domein;
   3. word-break: break-word is weg; dat gaf de browser toestemming om overal
      te breken, ook midden in "telenet".                                     */
.contactkaart__waarde--mail {
  font-size: clamp(.8125rem, 4vw, .9375rem);
  letter-spacing: 0;
}
/* Onder 360 px is elke pixel breedte nodig: kaartrand en icoon iets krapper. */
@media (max-width: 22.4375em) {
  .contactkaart { padding: 1rem; gap: .75rem; }
  .contactkaart__ico { width: 2.5rem; height: 2.5rem; }
}

.note--regio { margin-top: 1.25rem; }
.note--afspraak { margin-top: 1.25rem; }

/* ------------------------------------------------------ SOCIALE KNOPPEN -- */
/* De opmaak staat klaar; de knoppen zelf staan in index.html uitgeschakeld
   tot de profielen @drumfire.be bestaan. Niets hier hoeft te veranderen. */
.socials { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.social {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: var(--tap); padding: .6rem 1.1rem;
  border: 1px solid var(--line-ui); border-radius: 999px;
  color: var(--cream); text-decoration: none; font-weight: 600; font-size: .9375rem;
}
.social:hover { border-color: var(--flame); background: rgba(247,103,7,.08); color: var(--cream); }
.social .ico { color: var(--amber); width: 1.2rem; height: 1.2rem; }

/* ------------------------------------------------------------- voettekst -- */
.site-footer {
  background: var(--ink-2);
  border-top: 1px solid var(--line);
  padding-block: clamp(2rem, 5vw, 3rem);
  font-size: var(--fs-small);
}
.site-footer__inner { display: flex; flex-direction: column; gap: .35rem; }
.site-footer p { margin: 0; }
.site-footer__merk { color: var(--cream); font-family: var(--font-display); letter-spacing: .04em; }
.site-footer a { color: var(--body); }
.site-footer a:hover { color: var(--gold); }
/* elk contactraakvlak minstens 44 px hoog */
.site-footer__contact { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.site-footer__contact a {
  display: inline-flex; align-items: center; min-height: 2.75rem;
}
.site-footer__klein { margin-top: .75rem !important; color: #a3988c; font-size: .8125rem; }

/* -------------------------------------------------------- boekingsbalk -- */
.boekbalk {
  position: fixed; z-index: 50;
  left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: 1fr auto; gap: .625rem;
  padding: .625rem 1rem calc(.625rem + env(safe-area-inset-bottom, 0px));
  background: rgba(21,16,17,.94);
  border-top: 1px solid var(--line-ui);
}
@supports (backdrop-filter: blur(10px)) {
  .boekbalk { background: rgba(21,16,17,.86); backdrop-filter: blur(10px); }
}
/* white-space: nowrap is hier niet cosmetisch. Brak het label over twee regels,
   dan werd de balk 102 px hoog terwijl body er maar 84 px (--balk-h) voor
   vrijhoudt — en dan verdween de onderste voettekst achter de balk. */
.boekbalk .btn { min-height: 3.25rem; font-size: 1rem; white-space: nowrap; }
.boekbalk__mail { padding-inline: 1rem; min-width: 3.25rem; }
.boekbalk__mail .ico { width: 1.4rem; height: 1.4rem; }
@media (max-width: 22.4375em) {
  .boekbalk { padding-inline: .625rem; }
  .boekbalk .btn { font-size: .9375rem; padding-inline: .75rem; }
  .boekbalk .btn .ico { width: 1.15em; height: 1.15em; }
}

/* ============================================================ ≥ 560 px == */
@media (min-width: 35em) {
  .galerij { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .contact { grid-template-columns: 1fr 1fr; }
  .btnrow {
    flex-direction: row; flex-wrap: wrap; justify-content: center;
    max-width: none; width: auto;
  }
  .btnrow .btn { min-width: 12rem; }
  .btnrow--links { justify-content: flex-start; }
  .reel p { text-align: center; }
  .reel .btnrow { justify-content: center; }
}

/* ============================================================ ≥ 768 px == */
@media (min-width: 48em) {
  body { padding-bottom: 0; }
  .boekbalk { display: none; }

  .cards--3 { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
  .duo { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
  /* het rechterpaneel bij Formules heeft maar twee regels: smaller maken
     zodat er geen groot leeg vlak overblijft */
  .duo--formules { grid-template-columns: 1.45fr 1fr; }

  .mainnav { overflow: visible; }
  .mainnav .breed { display: block; }
  .mainnav a { padding: 0 .8rem; }
  .brand__logo { width: clamp(7rem, 12vw, 9.5rem); }

  .card, .panel { padding: 1.75rem 1.625rem; }

  /* prijskaart terug rechtop: naam boven, bedrag groot eronder */
  .prijzen .card--prijs {
    flex-direction: column; align-items: flex-start;
    justify-content: flex-start; gap: .35rem;
    padding-top: 1.75rem;
  }
  .card p.prijs { text-align: left; }
}

/* ============================================================ ≥ 900 px == */
@media (min-width: 56.25em) {
  .muzikant {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start;
  }
  .muzikant__lead { margin-top: 0; }
  .muzikant__lead img { aspect-ratio: 4 / 3; object-fit: cover; }
  .galerij { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
}

/* ======================================= korte telefoonschermen ========= */
/* Op een echte telefoon is er onder de adresbalk vaak maar 550 tot 680 px
   hoog over, en daar gaat ook nog de vaste belbalk van af. De hero moet dan
   krimpen, anders zakt de knop "Boek DrumFire" onder de vouw — precies het
   verkeerde signaal voor een act die het van vertrouwen moet hebben.
   De volgorde in index.html helpt mee: prijs en hoofdknop staan vooraan. */
@media (max-width: 47.99em) and (max-height: 46em) {
  .hero { padding-block: 1.5rem 2.25rem; }
  .hero__logo { width: min(88%, clamp(12rem, 62vw, 20rem)); margin-bottom: .75rem; }
  .hero h1 { font-size: clamp(1.75rem, 6.8vw, 2.5rem); }
  .hero__lead { margin-bottom: .875rem; }
  .hero__meta { margin-top: 1.125rem; }
}
@media (max-width: 47.99em) and (max-height: 37.5em) {
  .hero { padding-block: 1rem 1.75rem; }
  .hero__logo { width: min(84%, clamp(10rem, 52vw, 16rem)); margin-bottom: .5rem; }
  .hero h1 { font-size: 1.625rem; }
  .hero__lead { font-size: 1rem; line-height: 1.45; margin-bottom: .75rem; }
  .hero__prijs { margin-bottom: .5rem; }
  .hero__prijs a { min-height: 2.5rem; }
}

/* ========================================================= 404-pagina === */
/* Stond eerst als <style>-blok in 404.html. Dat werkte lokaal, maar de
   Content-Security-Policy uit .htaccess (style-src 'self', zonder
   'unsafe-inline') blokkeert inline opmaak in productie: de pagina viel
   dan uit elkaar. Daarom staat het hier. Zet géén 'unsafe-inline' in de
   CSP — dat haalt precies de bescherming weg die het .htaccess opbouwt. */
body.pagina-404 {
  padding-bottom: 0;
  display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100svh;
}
.fout {
  flex: 1 1 auto; display: flex; align-items: center;
  padding-block: clamp(3rem, 10vw, 6rem); text-align: center;
}
.fout__inner { display: flex; flex-direction: column; align-items: center; }
.fout__code {
  font-family: var(--font-display);
  font-size: .8125rem; font-weight: 700;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--brass); margin: 0 0 .85rem;
}
.fout__logo { width: clamp(6.5rem, 22vw, 9rem); height: auto; margin-bottom: 1.75rem;
  margin-inline: auto;
}
.fout p.lead { font-size: var(--fs-lead); max-width: 42ch; color: var(--body); }
.fout .btnrow { margin-top: 1.75rem; }

/* ================================================== bewegingsvoorkeur === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================== afdruk == */
@media print {
  .site-header, .boekbalk, .skip { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
  h1, h2, h3, strong { color: #000; }
  .section, .hero, .section--alt, .section--boeken { background: none; padding-block: 1.25rem; }
  .card, .panel, .reel, .contactkaart, .note { border: 1px solid #999; background: none; }
  a { color: #000; }
}