/* Landingspagina's: intochten en bedrijfsfeesten */

/* Feitenstrip */
.feiten { border-bottom: 1px solid var(--kleur-rand); padding-block: 1.75rem; }
.feiten__rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.5rem; }
.feit { display: flex; align-items: center; gap: .875rem; color: var(--kleur-goud); }
.feit > div { display: flex; flex-direction: column; min-width: 0; }
.feit strong { color: var(--kleur-creme); font-size: .9375rem; }
.feit span { color: var(--kleur-tekst); font-size: .84375rem; }
.feit svg { flex-shrink: 0; }
@media (max-width: 780px) { .feiten__rij { grid-template-columns: 1fr; gap: 1rem; } }

/* Programma */
.programma__binnen { display: grid; grid-template-columns: .85fr 1.15fr; gap: 4.5rem; align-items: start; }
.programma__beeld { position: relative; border-radius: 24px; overflow: hidden; border: 1.5px solid var(--kleur-goud); }
.programma__beeld img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 20%; display: block; }
.programma__tekst h2 { margin: .75rem 0 .875rem; }
.programma__intro { color: var(--kleur-tekst); margin-bottom: 1.5rem; max-width: 35rem; }
.stappen { list-style: none; margin: 0; padding: 0; }
.stap { display: flex; gap: 1.5rem; align-items: flex-start; border-top: 1px solid var(--kleur-rand); padding: 1.375rem 0; }
.stap:last-child { border-bottom: 1px solid var(--kleur-rand); }
.stap__nr { font-family: var(--font-kop); font-size: 1.75rem; color: var(--kleur-goud); min-width: 3.25rem; line-height: 1.1; }
.stap__tekst { display: flex; flex-direction: column; gap: .375rem; }
.stap__tekst strong { color: var(--kleur-creme); font-size: 1.0625rem; }
.stap__tekst span { color: var(--kleur-tekst); font-size: .9375rem; line-height: 1.6; max-width: 33rem; }
@media (max-width: 900px) { .programma__binnen { grid-template-columns: 1fr; gap: 2rem; } }

/* Afstemmen en prijzen */
/* Let op de selector: alleen op de omhulsel, niet op een sectie.
   Op de bedrijfsfeestenpagina staat afstemmen op de omhulsel met de twee
   kolommen als direct kind, en dan klopt dit raster. Op de intochtenpagina
   stond de klasse op de sectie, met daarbinnen nog een eigen raster. Die
   sectie werd dan een raster met maar een kind: dat kind belandde in de
   eerste kolom van 1,15fr en de hele rechterhelft bleef leeg, met een
   prijskaart die over de linkerkolom heen viel. */
.omhulsel.afstemmen { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.afstemmen__links h2 { margin-top: 0; }
.afstemmen__links p { color: var(--kleur-tekst); line-height: 1.75; }
.afstemmen__links a { color: var(--kleur-goud); text-decoration: underline; text-underline-offset: 3px; }
.afstemmen__rechts {
  display: flex; flex-direction: column; gap: 1.25rem;
  background: var(--kleur-paneel); border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-kaart); padding: clamp(1.5rem, 3vw, 2.25rem);
}
.afstemmen__rechts h3 { margin: 0; font-size: 1.25rem; }
@media (max-width: 900px) { .omhulsel.afstemmen { grid-template-columns: 1fr; } }
.vinkjes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.vinkjes li { display: flex; align-items: flex-start; gap: .75rem; color: var(--kleur-creme); font-size: .9375rem; }
.vinkjes svg { color: var(--kleur-goud); flex-shrink: 0; margin-top: .1875rem; }
.prijslijst { list-style: none; margin: 0; padding: 0; }
.prijslijst li { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; border-top: 1px solid var(--kleur-rand); padding: .75rem 0; }
.prijslijst li:last-child { border-bottom: 1px solid var(--kleur-rand); }
.prijslijst span { color: var(--kleur-creme); font-size: .9375rem; }
.prijslijst strong { color: var(--kleur-goud); font-size: .9375rem; white-space: nowrap; }
.pblok .klein { color: var(--kleur-tekst); font-size: .875rem; margin-top: 1rem; }
.klein-kop { font-size: 1.375rem !important; }

/* Aanvraagformulier */
.aanvraag__binnen { display: grid; grid-template-columns: .9fr 1.1fr; gap: 4.5rem; align-items: start; }
.aanvraag__tekst h2 { margin: .75rem 0 .875rem; }
.aanvraag__tekst p { color: var(--kleur-tekst); max-width: 28rem; }
.contactregels { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.contactregels li { display: flex; align-items: center; gap: .625rem; color: var(--kleur-tekst); font-size: .9375rem; }
.contactregels svg { color: var(--kleur-goud); flex-shrink: 0; }
.aanvraagform { background: var(--kleur-diep); border: 1px solid var(--kleur-rand); border-radius: var(--radius-kaart); padding: 2.25rem; }
.formrij { display: block; margin-bottom: 1rem; }
.formrij--twee { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.aanvraagform label { display: flex; flex-direction: column; gap: .375rem; }
.aanvraagform label > span { color: var(--kleur-tekst); font-size: .8125rem; font-weight: 700; }
.aanvraagform input, .aanvraagform select, .aanvraagform textarea {
  background: var(--kleur-paneel); border: 1.5px solid var(--kleur-rand); color: var(--kleur-creme);
  border-radius: var(--radius-klein); padding: .875rem 1rem; font: inherit; font-size: .9375rem; width: 100%; min-height: 48px;
}
.aanvraagform textarea { min-height: 6rem; resize: vertical; }
.aanvraagform input::placeholder, .aanvraagform textarea::placeholder { color: var(--kleur-placeholder); }
.aanvraagform input:focus, .aanvraagform select:focus, .aanvraagform textarea:focus { border-color: var(--kleur-goud); outline: none; }
.aanvraagform__knop { width: 100%; margin-top: .75rem; }
.aanvraagform__klein { color: var(--kleur-placeholder); font-size: .8125rem; text-align: center; margin: .75rem 0 0; }
.formval { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formmelding { border-radius: var(--radius-klein); padding: .875rem 1rem; margin-bottom: 1.25rem; font-size: .9375rem; }
.formmelding--goed { background: rgba(143, 211, 160, .12); border: 1px solid var(--kleur-bevestiging); color: var(--kleur-bevestiging); }
.formmelding--fout { background: rgba(240, 166, 174, .1); border: 1px solid #F0A6AE; color: #F0A6AE; }
@media (max-width: 900px) { .aanvraag__binnen { grid-template-columns: 1fr; gap: 2rem; } .formrij--twee { grid-template-columns: 1fr; } .aanvraagform { padding: 1.5rem; } }

/*
 * Een patroon voor alle binnenpagina-hero's: gelijke hoogte, tekst gecentreerd
 * onderin, hetzelfde verloop en dezelfde schaduw. Per pagina verschilt alleen
 * de beelduitsnede, zodat het onderwerp boven de tekst uitkomt.
 */
.hero--pagina {
  min-height: clamp(22rem, 44vw, 34rem);
  display: flex;
  align-items: flex-end;
}
.hero--pagina .hero__inhoud {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
  padding-bottom: clamp(2rem, 4vw, 3.25rem);
}
.hero--pagina .hero__waas {
  background:
    linear-gradient(to top, rgba(12,8,26,.95) 0%, rgba(12,8,26,.82) 32%, rgba(12,8,26,.4) 62%, rgba(12,8,26,.3) 100%);
}
.hero--pagina .hero__kop,
.hero--pagina .hero__tekst,
.hero--pagina .kicker {
  text-shadow: 0 2px 18px rgba(0,0,0,.78), 0 1px 3px rgba(0,0,0,.6);
}
@media (max-width: 720px) {
  .hero--pagina { min-height: 26rem; }
  .hero--pagina .hero__waas {
    background: linear-gradient(to top, rgba(12,8,26,.97) 0%, rgba(12,8,26,.9) 40%, rgba(12,8,26,.55) 70%, rgba(12,8,26,.35) 100%);
  }
}

.hero--bedrijf .hero__media { object-position: center 30%; }
@media (max-width: 899px) { .hero--bedrijf .hero__media { object-position: center 20%; } }

/* ---- Bedrijfsfeesten ---- */

/* Tijdlijn van de middag: een gouden lijn met tijdstippen ernaast */
.tijdlijn { list-style: none; margin: 0 auto; padding: 0; max-width: 46rem; position: relative; }
.tijdlijn::before {
  content: ""; position: absolute; top: .75rem; bottom: 1.5rem; left: 7.5rem;
  width: 2px; background: linear-gradient(to bottom, var(--kleur-goud), rgba(217,179,106,.15));
}
.tijdstip { display: grid; grid-template-columns: 6.25rem 1fr; gap: 0 2.75rem; padding-bottom: 2rem; position: relative; }
.tijdstip:last-child { padding-bottom: 0; }
.tijdstip::before {
  content: ""; position: absolute; left: 7.5rem; top: .5rem;
  width: 11px; height: 11px; margin-left: -4.5px; border-radius: 50%;
  background: var(--kleur-goud); box-shadow: 0 0 0 4px var(--kleur-achtergrond);
}
.tijdstip__tijd {
  text-align: right; color: var(--kleur-goud);
  font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding-top: .125rem; white-space: nowrap;
}
/* De duur staat onder de tijd, niet erachter. Achter de tijd werd het label te
   breed voor de kolom en liep het onder de bolletjes van de tijdlijn door. */
.tijdstip__tijd small {
  display: block; margin-top: .125rem;
  font-size: .75rem; font-weight: 400; letter-spacing: .04em;
  text-transform: none; color: var(--kleur-tekst);
}
.tijdstip__tekst strong { display: block; color: var(--kleur-creme); font-size: 1.125rem; margin-bottom: .375rem; }
.tijdstip__tekst p { margin: 0; color: var(--kleur-tekst); font-size: .9375rem; line-height: 1.7; }
@media (max-width: 700px) {
  .tijdlijn::before { left: 5px; }
  .tijdstip { grid-template-columns: 1fr; gap: .25rem; padding-left: 1.75rem; }
  .tijdstip::before { left: 5px; top: .375rem; }
  .tijdstip__tijd { text-align: left; }
  .tijdstip__tijd small { display: inline; margin-left: .5rem; }
}

/* Programmaonderdelen om uit te kiezen */
.onderdelen { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.25rem; }
.onderdeel {
  background: var(--kleur-achtergrond); border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-kaart); padding: 1.75rem;
  transition: border-color .25s ease, transform .3s var(--soepel);
}
.onderdeel:hover { border-color: var(--kleur-goud); transform: translateY(-3px); }
.onderdeel__vink {
  display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 1rem;
  border-radius: var(--radius-pil); background: rgba(217,179,106,.12); color: var(--kleur-goud);
}
.onderdeel h3 { font-size: 1.1875rem; margin: 0 0 .5rem; }
.onderdeel p { margin: 0; color: var(--kleur-tekst); font-size: .90625rem; line-height: 1.65; }

/* Wie regelt wat */
.verdeling { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.verdeelblok {
  background: var(--kleur-paneel); border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-kaart); padding: clamp(1.5rem, 3vw, 2.25rem);
}
.verdeelblok h3 { font-size: 1.375rem; margin: 0 0 1.25rem; }
.vinkjes--rustig li svg { color: var(--kleur-tekst); }
@media (max-width: 820px) { .verdeling { grid-template-columns: 1fr; } }

/* Prijsindicatie */
.prijsindicatie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.prijskaart {
  background: var(--kleur-achtergrond); border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-kaart); padding: 1.75rem; text-align: center;
}
.prijskaart--midden { border-color: var(--kleur-goud); box-shadow: var(--schaduw-rust); }
.prijskaart__label { color: var(--kleur-goud); font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 .5rem; }
.prijskaart__bedrag { font-family: var(--font-kop); font-size: 1.625rem; color: var(--kleur-creme); margin: 0 0 .75rem; }
.prijskaart p:last-child { margin: 0; color: var(--kleur-tekst); font-size: .90625rem; line-height: 1.6; }
.prijsnoot { max-width: 44rem; margin: 1.75rem auto 0; text-align: center; color: var(--kleur-tekst); font-size: .84375rem; line-height: 1.6; }
@media (max-width: 820px) { .prijsindicatie { grid-template-columns: 1fr; } }

/* Lange hero-koppen mogen breder breken dan de leestekst eronder, anders valt
   er een los woord op een derde regel. De alinea blijft wel smal en leesbaar. */
.hero--pagina .hero__kop { max-width: 100%; margin-inline: auto; }
.hero--pagina .hero__tekst { max-width: 40rem; margin-inline: auto; }
@media (min-width: 900px) {
  .hero--pagina .hero__inhoud { max-width: 60rem; }
  .hero--pagina .hero__kop { max-width: 52rem; }
}

/* Mobiele hero: alleen de titels over het beeld
 *
 * Op een telefoon stond de hele hero-tekst over de foto: kicker, kop, intro en
 * knop. Dat legt een dichte laag over precies het beeld waar het om gaat. Op
 * mobiel houden we de kicker en de kop over de foto en laten we de intro en de
 * knop eronder vallen, op de gewone achtergrond.
 *
 * Hoe: het beeld houdt zijn absolute positie maar krijgt een vaste hoogte, en
 * .hero__titel krijgt precies diezelfde hoogte als minimum met de inhoud
 * onderin. De titels staan daardoor altijd onderin de foto en alles daarna
 * begint altijd precies onder de foto, of de kop nu een of drie regels is.
 * Een vaste padding werkte hier niet: koppen verschillen per pagina in hoogte,
 * waardoor de kop over de beeldrand stak of de intro juist over de foto viel.
 */
/* Dit blok hoort in landing.css en niet in home.css: landing.css wordt na
   home.css geladen en zet daar .hero--pagina op flex met een eigen
   min-height, wat een gelijke regel in home.css overschreef. */
@media (max-width: 720px) {
  .hero,
  .hero--pagina {
    min-height: 0;
    display: block;
    --hero-beeld: 24rem;
  }
  .hero--pagina { --hero-beeld: 20rem; }

  .hero .hero__media,
  .hero--pagina .hero__media,
  .hero .hero__waas,
  .hero--pagina .hero__waas {
    height: var(--hero-beeld);
    bottom: auto;
  }

  .hero .hero__inhoud,
  .hero--pagina .hero__inhoud {
    padding-top: 0;
    padding-bottom: clamp(2rem, 6vw, 2.75rem);
  }

  .hero__titel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 1.125rem;
    align-self: stretch;
    min-height: var(--hero-beeld);
    padding-bottom: 1.5rem;
  }

  /* Onder het beeld is er geen foto meer om tegen af te steken. */
  .hero__tekst,
  .hero__inhoud .knop { text-shadow: none; }
}

/* Pagina niet gevonden
 *
 * De melding krijgt bewust geen hero-foto: een 404 moet direct laden en meteen
 * duidelijk zijn. De blokken eronder komen uit home.css, dat is dezelfde
 * opmaak als op de homepage.
 */
.fout404 {
  padding-top: clamp(3.5rem, 9vw, 6.5rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
  text-align: center;
}
.fout404__melding {
  max-width: 44rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.125rem;
}
.fout404__kop {
  margin: 0;
  color: var(--kleur-creme);
  font-size: var(--tekst-sectie);
  line-height: 1.1;
}
.fout404__tekst {
  margin: 0;
  color: var(--kleur-tekst);
  font-size: var(--tekst-intro);
  max-width: 36rem;
}

/* Fotocarrousel met echte beelden van eerdere feesten
 *
 * Een rij vierkanten die horizontaal scrollt met scroll-snap. De rij loopt
 * bewust door tot de rand van het scherm, zodat je ziet dat er meer staat.
 */
.fotos__rij {
  display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 1.75rem clamp(1.25rem, 4vw, 3.25rem) .5rem;
  scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth;
}
.fotos__rij::-webkit-scrollbar { display: none; }
.fotos__rij:focus-visible { outline: 2px solid var(--kleur-goud); outline-offset: -4px; }
.fotos__foto {
  flex: 0 0 auto; margin: 0; scroll-snap-align: center;
  width: clamp(15rem, 68vw, 22rem); aspect-ratio: 1 / 1;
  border-radius: var(--radius-kaart); overflow: hidden;
  border: 1px solid var(--kleur-rand); background: var(--kleur-paneel);
}
.fotos__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 900px) { .fotos__foto { width: 22rem; } }

.fotos__knoppen { display: flex; gap: .75rem; justify-content: center; padding-top: 1.25rem; }
.fotos__pijl {
  width: 46px; height: 46px; border-radius: var(--radius-pil); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--kleur-paneel); border: 1.5px solid var(--kleur-goud); color: var(--kleur-goud);
  transition: background .2s ease, color .2s ease;
}
.fotos__pijl:hover { background: var(--kleur-goud); color: var(--kleur-op-goud); }
.fotos__pijl:disabled { opacity: .35; cursor: default; }
/* Zonder JavaScript hebben de pijlen geen functie, dan veeg je gewoon. */
html:not(.js) .fotos__knoppen { display: none; }

/* Videoblok met een opname van een echt optreden */
.videoblok__speler {
  position: relative; max-width: 56rem; margin: 1.75rem auto 0;
  aspect-ratio: 16 / 9; border-radius: var(--radius-kaart); overflow: hidden;
  border: 1px solid var(--kleur-rand); background: var(--kleur-paneel);
}
.videoblok__start {
  display: block; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer;
  background: none; position: relative;
}
.videoblok__speler img, .videoblok__speler iframe {
  width: 100%; height: 100%; object-fit: cover; display: block; border: 0;
}
.videoblok__knop {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 76px; height: 76px; border-radius: var(--radius-pil);
  display: flex; align-items: center; justify-content: center;
  background: var(--kleur-goud); color: var(--kleur-op-goud);
  box-shadow: 0 10px 30px rgba(10,6,24,.45);
  transition: transform .25s var(--soepel);
}
.videoblok__start:hover .videoblok__knop { transform: translate(-50%, -50%) scale(1.08); }
.videoblok__start:focus-visible { outline: 2px solid var(--kleur-goud); outline-offset: -4px; }

/* Mededeling boven aan een pagina, voor een dienst die tijdelijk niet geleverd
   wordt. Bewust rustig en niet alarmerend: een goudkleurige rand links, geen
   rood, want dit is geen fout maar een mededeling. */
.mededeling {
  background: var(--kleur-paneel);
  border: 1px solid var(--kleur-rand);
  border-left: 4px solid var(--kleur-goud);
  border-radius: var(--radius-kaart);
  padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 2rem);
  margin: 0 0 2rem;
}
.mededeling p:first-child { margin-top: 0; }
.mededeling p:last-child { margin-bottom: 0; }
.mededeling strong { color: var(--kleur-goud); }