/* Blokken die op meer pagina's terugkomen: donker videoblok met glaskaarten, prijskaarten,
   veelgestelde vragen en de donkere afsluiter. Verhuisd uit voorpagina.css (Taak 5). */

.sectie--krap { padding-block: clamp(24px, 4vw, 48px); }

/* ---------- 3. Donker videoblok ---------- */
.video-blok { position: relative; isolation: isolate; }
.video-blok__beeld { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; }
.video-blok__beeld video {
  position: absolute;
  inset: -14% 0;
  width: 100%;
  height: 128%;
  max-width: none;
  object-fit: cover;
  opacity: .55;
}
.video-blok__beeld::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 12, 43, .5) 0%, rgba(18, 12, 43, .88) 70%); }
.video-blok__kop { max-width: 640px; }
.glasraster { display: grid; gap: var(--s-6); margin: var(--s-7) 0 0; padding: 0; list-style: none; }
.glaskaart h3 { margin-bottom: var(--s-3); }
.glaskaart p { margin: 0; }
.glaskaart__nummer { margin: 0 0 var(--s-5) !important; font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .08em; color: var(--violet-200) !important; }
.video-blok__link { margin: var(--s-7) 0 0; }
.video-blok__link a { color: var(--op-donker); font-weight: 700; text-decoration: none; }
.video-blok__link a:hover { color: var(--op-donker); text-decoration: underline; }
@media (min-width: 640px) { .glasraster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .glasraster { grid-template-columns: repeat(4, 1fr); gap: var(--s-5); } }

/* ---------- 9. Prijzen ---------- */
.prijzen { display: grid; gap: var(--s-5); }
.prijs { display: flex; flex-direction: column; border: 1px solid var(--lijn); }
.prijs h3 { margin-bottom: var(--s-1); }
.prijs__wat { margin: 0 0 var(--s-6); color: var(--ink-zacht); }
.prijs__bedrag { margin: auto 0 var(--s-2); font-size: clamp(2.25rem, 4vw, 3rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.prijs__vanaf, .prijs__per { font-size: var(--t-klein); font-weight: 600; letter-spacing: 0; color: var(--ink-zacht); }
.prijs__vanaf { display: block; margin-bottom: var(--s-2); }
.prijs__opzet { margin: 0; font-size: var(--t-klein); color: var(--ink-zacht); }
.prijs--donker { border-color: transparent; background: var(--nacht); box-shadow: var(--sch-violet); }
.prijs--donker .prijs__wat, .prijs--donker .prijs__vanaf, .prijs--donker .prijs__per, .prijs--donker .prijs__opzet { color: var(--op-donker-zacht); }
.prijsregels { display: grid; gap: var(--s-2) var(--s-6); margin: var(--s-7) 0 0; padding: 0; list-style: none; color: var(--ink-zacht); font-size: var(--t-klein); }
.prijsregels li { position: relative; padding-left: 22px; }
.prijsregels li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--verloop); }
.prijsregels strong { color: var(--ink); }
.prijzen__link { margin: var(--s-6) 0 0; }
@media (min-width: 960px) {
  .prijzen { grid-template-columns: repeat(3, 1fr); }
  .prijsregels { grid-template-columns: 1fr 1fr; }
  .prijsregels li:first-child { grid-column: 1 / -1; }
}

/* ---------- 10. Vragen ---------- */
.vragen { display: grid; gap: var(--s-6); }
.vragen__lijst { border-top: 1px solid var(--lijn); }
.vraag { border-bottom: 1px solid var(--lijn); }
.vraag summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  font-size: 1.0625rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary::after {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--chip);
  font-family: var(--f-mono);
  transition: transform var(--d-mid) var(--ease-uit), background-color var(--d-snel);
}
.vraag summary:hover::after { background: var(--violet-50); }
.vraag[open] summary::after { transform: rotate(45deg); background: var(--ink); color: var(--papier); }
.vraag p { margin: 0 0 var(--s-5); color: var(--ink-zacht); }
@media (min-width: 960px) { .vragen { grid-template-columns: 4fr 7fr; gap: var(--s-8); } }

/* ---------- 11. Afsluiter ---------- */
.slot { position: relative; isolation: isolate; display: grid; gap: var(--s-7); }
.slot .gloed { z-index: -1; }
.slot h2 { font-size: var(--t-h1); line-height: 1.04; letter-spacing: -.035em; }
.slot .knoppen { margin-top: var(--s-6); }
.slot__contact { align-self: end; padding: var(--s-5); border: 1px solid var(--glas-rand); border-radius: var(--r-kaart); background: var(--glas); }
.slot__contactkop { margin: 0 0 var(--s-3); font-weight: 700; color: var(--op-donker) !important; }
.slot__contact ul { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.slot__contact a { color: var(--op-donker); text-decoration: none; overflow-wrap: anywhere; }
.slot__contact a:hover { text-decoration: underline; color: var(--op-donker); }
@media (min-width: 960px) { .slot { grid-template-columns: 2fr 1fr; align-items: end; } }

/* Verhuisd uit voorpagina.css (Taak 8): ook gebruikt op oplossingen- en branchepagina's. */
/* ---------- 4. Oplossingen (stapel) ---------- */
.stapel { display: grid; gap: var(--s-5); padding-bottom: var(--s-6); }
.oplossing {
  display: grid;
  gap: var(--s-5);
  padding: var(--s-4);
  border: 1px solid var(--lijn);
  box-shadow: 0 1px 0 var(--lijn), 0 24px 60px -36px rgba(18, 12, 43, .35);
}
.oplossing__tekst { padding: var(--s-3) var(--s-3) var(--s-2); }
.oplossing__nummer { margin: 0 0 var(--s-4); font-family: var(--f-mono); font-size: var(--t-label); letter-spacing: .08em; color: var(--violet); }
.oplossing h3 { font-size: clamp(1.5rem, 3vw, 2.25rem); letter-spacing: -.03em; }
.oplossing p:not([class]) { color: var(--ink-zacht); }
.oplossing__link { display: inline-flex; gap: var(--s-2); font-weight: 700; text-decoration: none; }
.oplossing__link span { transition: transform var(--d-snel) var(--ease-uit); }
.oplossing__link:hover span { transform: translateX(3px); }
.oplossing__beeld { position: relative; overflow: hidden; border-radius: var(--r-sm); aspect-ratio: 16 / 10; background: var(--nacht-700); }
.oplossing__beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 960px) {
  .oplossing { grid-template-columns: 1fr 1fr; align-items: stretch; min-height: 380px; padding: var(--s-5); }
  .oplossing__tekst { align-self: center; padding: var(--s-5); }
  .oplossing__beeld { aspect-ratio: auto; min-height: 320px; }
}

/* ---------- 5. Voor en na ---------- */
.voorna { display: grid; gap: var(--s-3); }
.voorna__kop { display: none; }
.voorna__rij {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-2) var(--s-4);
  padding: var(--s-5);
  border-radius: var(--r-kaart);
  background: var(--papier);
  box-shadow: var(--sch-kaart);
}
.voorna__nr {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-xs);
  background: var(--nacht);
  color: var(--violet-200);
  font-family: var(--f-mono);
  font-size: var(--t-label);
}
.voorna__rij p { margin: 0; }
.voorna__voor { color: var(--ink-zacht); text-decoration: line-through; text-decoration-color: rgba(85, 86, 95, .45); }
.voorna__na { font-weight: 700; }
.voorna__na::before { content: "→ "; font-family: var(--f-mono); color: var(--violet); }
@media (min-width: 960px) {
  .voorna__kop {
    display: grid;
    grid-template-columns: 40px 1fr 1fr;
    gap: var(--s-5);
    padding: 0 var(--s-5) var(--s-2);
    font-family: var(--f-mono);
    font-size: var(--t-label);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-zacht);
  }
  .voorna__kop span:first-child { grid-column: 2; }
  .voorna__rij { grid-template-columns: 40px 1fr 1fr; align-items: center; gap: var(--s-5); }
  .voorna__nr { grid-row: auto; }
  .voorna__na::before { content: ""; }
  .voorna__rij p { font-size: 1.0625rem; }
}

/* ---------- 8. Branches ---------- */
.branches { display: grid; gap: var(--s-5); }
.branche { display: flex; flex-direction: column; padding: var(--s-3); }
.branche__beeld { overflow: hidden; border-radius: var(--r-sm); aspect-ratio: 4 / 3; margin-bottom: var(--s-5); background: var(--nacht-700); }
.branche__beeld img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-traag) var(--ease-uit); }
.branche:hover .branche__beeld img { transform: scale(1.04); }
.branche h3, .branche p { padding-inline: var(--s-3); }
.branche p { margin: 0 0 var(--s-3); color: var(--ink-zacht); font-size: var(--t-klein); }
.branche h3::after { content: " →"; font-family: var(--f-mono); color: var(--violet); }
@media (min-width: 640px) { .branches { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .branches { grid-template-columns: repeat(4, 1fr); } }