/* ============================================
   /prijzen/ — sectie-omhulsels en hero (post-3487.css). De prijstabellen zitten in componenten.
   ============================================ */

/* Hero (92dae2e): donker, tekstkolom 55%, schakelaar met vier knoppen */
.prijzen-hero { background-color: var(--color-primary); padding: 80px 0; }
.prijzen-hero__inner { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 72px; }
.prijzen-hero__tekst { display: flex; flex-direction: column; justify-content: center; gap: 24px; width: 55%; min-width: 0; flex-shrink: 0; }
.prijzen-hero__titel {
  margin: 0; font-family: var(--font-heading); font-size: var(--h-primary-size); font-weight: 800;
  line-height: var(--h-primary-lh); letter-spacing: normal; color: var(--color-white);
}
.prijzen-hero__intro {
  font-family: var(--font-ui); font-size: var(--body-size); font-weight: 400; line-height: var(--body-lh);
  color: var(--color-white);
}
.prijzen-hero__label {
  margin-top: 20px; font-family: var(--font-heading); font-size: 22px; font-weight: 700; line-height: 1.2em;
  letter-spacing: 0; color: var(--color-white);
}

/* Schakelaar Website / Lokale SEO / Google Ads / Review Management (eigen HTML-widget).
   Knoppen krijgen in het origineel de kit-knopmaat (16px, 13px 26px); ≤768px 12px en 9px 14px. */
.prijs-toggle {
  display: inline-flex; align-self: flex-start; gap: 8px;
  padding: 4px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
}
.prijs-toggle__knop {
  flex-shrink: 0; padding: 13px 26px; border: none; border-radius: 7px;
  background: transparent; box-shadow: none;
  font-family: var(--font-ui); font-size: 16px; font-weight: 600; line-height: 1.4em; text-align: center; white-space: nowrap;
  color: rgba(255, 255, 255, 0.55); cursor: pointer; transition: all 0.2s;
}
.prijs-toggle__knop.is-active { background: var(--color-white); color: var(--color-primary); }
@media (hover: hover) {
  .prijs-toggle__knop:not(.is-active):hover { background: rgba(255, 255, 255, 0.1); color: var(--color-white); }
}

/* Prijstabellen (d0736da, fdcecae, debc05c): crème, 80px boven/onder; Review Management (5477742) zonder padding */
.prijzen-tab { background-color: var(--color-cream); padding: 80px 0; }
.prijzen-tab--rc { padding: 0; }

/* Reviews (b9edd75) */
.prijzen-reviews { background-color: var(--color-primary); padding: 80px 0; }
.prijzen-reviews__inner { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 24px; }

/* Resultaten (9571451) */
.prijzen-cases { background-color: var(--color-white); padding: 80px 0; }

@media (max-width: 1024px) {
  .prijzen-hero { padding: 50px 30px 75px; }
}

@media (max-width: 768px) {
  .prijs-toggle__knop { padding: 9px 14px; font-size: 12px; }
}

@media (max-width: 767px) {
  .prijzen-hero { padding: 30px 20px 60px; }
  .prijzen-hero__inner { flex-direction: column; justify-content: center; align-items: flex-start; gap: 50px; }
  .prijzen-hero__tekst { width: 100%; justify-content: flex-start; align-items: flex-start; align-self: flex-start; }
  .prijzen-hero__titel { max-width: 339px; }
  .prijzen-hero__intro { width: 100%; }
  .prijzen-hero__label { font-size: 18px; line-height: 1.12em; }
  .prijzen-tab { padding: 60px 20px; }
  .prijzen-reviews { padding: 60px 20px 0; }
  .prijzen-reviews__inner { gap: 20px; }
  .prijzen-cases { padding: 60px 20px; }
}