/* ==========================================================================
   Van Croonenburg IT-Consultancy - website vcitc.nl
   Dezelfde opbouw als de AureaDesk-site, met het goud uit de huisstijl:
   #C8A24A op een lichte achtergrond en #D4AF5F op een donkere. Zo staan de
   dienstensite en het product zichtbaar in een gezin, zonder dat ze op elkaar
   lijken. Als tekstkleur op licht is dat goud te licht (2,3:1); daarvoor
   staat --accent op #8a6a16, een donkerder tint uit dezelfde reeks.
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */

:root {
  /* De site heeft alleen een donkere weergave. De lichte variant is in
     september 2026 vervallen; wie zijn systeem op licht heeft staan krijgt
     dus toch dit palet. */
  color-scheme: dark;

  --page-bg: #0d0d0d;
  --surface: #1a1a19;
  --surface-2: #201f1e;
  --surface-raised: #242322;
  --text-primary: #ffffff;
  --text-secondary: #c3c2b7;
  --text-muted: #8f8d86;
  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);

  /* Op donker haalt het huisstijlgoud #D4AF5F een contrast van 9,3:1; het kan
     hier dus gewoon als tekstkleur mee, anders dan op een lichte achtergrond. */
  --accent: #D4AF5F;
  --accent-strong: #E5C888;
  --accent-soft: #383017;
  --accent-soft-2: #241f10;
  --brand-gold: #D4AF5F;
  --brand-gold-hover: #E5C888;
  --brand-gold-deep: #8a6b1a;

  --good: #0ca30c;
  --warning: #fab219;
  --critical: #d03b3b;

  --shadow-s: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -12px rgba(0, 0, 0, 0.5);
  --shadow-l: 0 2px 8px rgba(0, 0, 0, 0.4), 0 40px 80px -30px rgba(0, 0, 0, 0.75);

  --nav-bg: rgba(13, 13, 13, 0.72);

  --breedte: 1200px;
  --breedte-smal: 760px;
  --radius: 16px;
  --radius-l: 22px;

  --sectie-y: clamp(64px, 8vw, 112px);
}


/* Deze klasse gaf secties een donker palet terwijl de rest van de site licht
   was. Nu de hele site donker is, hoeft hij alleen nog de achtergrond en de
   tekstkleur te zetten; de tokens komen uit :root. De klasse blijft bestaan
   omdat de fragmenten hem gebruiken om een sectie visueel af te bakenen. */
.vlak--donker {
  background: var(--page-bg);
  color: var(--text-primary);
}

/* --- 2. Basis ----------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--text-primary);
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, picture { max-width: 100%; display: block; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

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

.overslaan {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--surface);
  color: var(--text-primary);
  padding: 12px 18px;
  border-radius: 8px;
  z-index: 200;
}
.overslaan:focus { left: 12px; top: 12px; }

.verborgen-visueel {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- 3. Typografie ------------------------------------------------------ */

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  text-wrap: balance;
}

/* Handmatige regelafbrekingen zijn bedoeld voor brede schermen;
   op een telefoon breekt de tekst beter vanzelf. */
@media (max-width: 700px) {
  br.alleen-breed { display: none; }
}

.display {
  font-size: clamp(2.6rem, 6.6vw, 5rem);
  letter-spacing: -0.038em;
  line-height: 1.02;
}

h2, .h2 {
  font-size: clamp(1.95rem, 4.2vw, 3.25rem);
  letter-spacing: -0.032em;
}

h3, .h3 {
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  letter-spacing: -0.02em;
  line-height: 1.25;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: clamp(1.1rem, 1.9vw, 1.45rem);
  line-height: 1.5;
  color: var(--text-secondary);
  letter-spacing: -0.015em;
  text-wrap: pretty;
}

.opschrift {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}

.zacht { color: var(--text-secondary); }
.gedempt { color: var(--text-muted); font-size: 0.9rem; }

/* --- 4. Opmaakhulpen ---------------------------------------------------- */

.omhulsel {
  width: 100%;
  max-width: var(--breedte);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 40px);
}

.omhulsel--smal { max-width: var(--breedte-smal); }

.vlak {
  padding-block: var(--sectie-y);
  position: relative;
}

.vlak--strak { padding-block: clamp(56px, 7vw, 96px); }

.midden { text-align: center; }
.midden h2, .midden .h2 { margin-bottom: 18px; }
.midden .lead { margin-inline: auto; max-width: 62ch; }

.scheiding { border-top: 1px solid var(--border); }

/* --- 5. Knoppen --------------------------------------------------------- */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  padding: 15px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.knop:hover { text-decoration: none; transform: translateY(-1px); }
.knop:active { transform: translateY(0); }

.knop--primair {
  background: var(--brand-gold);
  color: #1a1400;
  border-color: var(--brand-gold);
}
.knop--primair:hover { background: var(--brand-gold-hover); border-color: var(--brand-gold-hover); }

.knop--rand {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.knop--rand:hover { border-color: var(--text-primary); }

.knop--klein { padding: 10px 18px; font-size: 0.9rem; }

.knoprij {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.midden .knoprij { justify-content: center; }

.pijllink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 1rem;
}
.pijllink::after {
  content: "›";
  font-size: 1.25em;
  line-height: 1;
  transition: transform .18s ease;
}
.pijllink:hover { text-decoration: none; }
.pijllink:hover::after { transform: translateX(3px); }

/* --- 6. Navigatie ------------------------------------------------------- */

.navbalk {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--nav-bg);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.navbalk[data-gescrold="ja"] { border-bottom-color: var(--border); }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 64px;
}

.merk {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* De naam staat voluit in de balk en mag nooit over twee regels vallen;
     daarom nowrap en flex:none, anders knijpt de flexbox hem samen. */
  flex: none;
  white-space: nowrap;
  font-weight: 800;
  font-size: 0.99rem;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.merk:hover { text-decoration: none; }

/* Het woordmerk bepaalt zijn eigen breedte; de hoogte is het ankerpunt. Van
   die hoogte is maar 64% de letters "VCITC" en 14% de ondertitel, met lucht
   ertussen. Op 32px oogde het lockup daardoor kleiner dan de menu-items
   ernaast, ook al waren de letters op papier groter; 44px houdt het in
   verhouding. */
.merk picture { display: block; flex: none; }
.merk img { height: 44px; width: auto; flex: none; display: block; }
.merk--voet img { height: 56px; }

@media (max-width: 1249px) { .merk img { height: 38px; } }
@media (max-width: 560px) { .merk img { height: 32px; } .merk--voet img { height: 44px; } }

/* Op een smal scherm past de naam voluit niet naast de menuknop; daar staat
   alleen "Van Croonenburg". De statutaire naam staat sowieso in de voettekst. */
/* Het menu-item met de oproep is er alleen voor het uitklapmenu; in de brede
   balk staat die oproep al als knop rechts. */
.navlink-cta { display: none; }

@media (max-width: 560px) {
  /* Naam, taalwissel, knop en menuknop passen samen niet meer op één regel.
     De knop verhuist dan naar het uitklapmenu; de taalwissel blijft staan,
     want die is anders niet te vinden. */
  .navacties .knop--primair { display: none; }
  .navlink-cta { display: block; }
  .navlink-cta a { color: var(--accent); font-weight: 650; }
}

.navlinks {
  display: flex;
  align-items: center;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.navlinks a {
  color: var(--text-secondary);
  font-size: 0.95rem;
  white-space: nowrap;
  font-weight: 500;
}
.navlinks a:hover { color: var(--text-primary); text-decoration: none; }

.navacties { display: flex; align-items: center; gap: 10px; flex: none; }
.navacties .knop { white-space: nowrap; }


/* Taalwissel: twee korte codes naast elkaar, de actieve uitgelicht. */
.taalkeuze {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px;
  background: var(--surface);
}
.taalkeuze a {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  line-height: 1;
}
.taalkeuze a:hover { color: var(--text-primary); text-decoration: none; }
.taalkeuze a[aria-current="true"] {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.navknop {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
  color: var(--text-primary);
}
.navknop svg { width: 22px; height: 22px; }

/* "Managed Services" is breder dan het oude "Beheer". Tussen 1250 en 1340
   pixels past de balk daardoor net niet op een regel. Wat minder ruimte
   tussen de links lost dat op, zonder het menu achter een knop te stoppen. */
@media (min-width: 1250px) and (max-width: 1340px) {
  .navlinks { gap: 13px; }
  .nav { gap: 18px; }
}

@media (max-width: 1249px) {
  .navlinks, .navacties .knop--rand { display: none; }
  .navknop { display: inline-flex; }

  /* De knop in de balk mag nooit over twee regels vallen. */
  .navacties { gap: 6px; }
  .navacties .knop--primair { white-space: nowrap; padding: 9px 14px; font-size: 0.86rem; }
  .taalkeuze a { padding: 5px 7px; font-size: 0.72rem; }
  .navknop { padding: 8px 0 8px 8px; }
  .nav { gap: 12px; }

  .navbalk[data-open="ja"] .navlinks {
    display: flex;
    position: absolute;
    inset: 64px 0 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 16px clamp(20px, 5vw, 40px) 24px;
    background: var(--page-bg);
    border-bottom: 1px solid var(--border);
  }
  .navbalk[data-open="ja"] .navlinks a {
    display: block;
    width: 100%;
    padding: 10px 0;
    font-size: 1.05rem;
    color: var(--text-primary);
  }
}

/* --- 7. Hero ------------------------------------------------------------ */

.hero {
  padding-top: clamp(56px, 8vw, 104px);
  padding-bottom: 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: -30% 50% auto;
  width: 120vw;
  height: 620px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--brand-gold) 16%, transparent), transparent);
  pointer-events: none;
  z-index: 0;
}

.hero > * { position: relative; z-index: 1; }

.hero .display { margin-bottom: 22px; }
.hero .lead { max-width: 60ch; margin-inline: auto; margin-bottom: 30px; }

.hero-noot {
  margin-top: 18px;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.hero-beeld {
  margin-top: clamp(44px, 6vw, 76px);
  perspective: 1600px;
}

/* --- 8. Productbeeld ---------------------------------------------------- */

.venster {
  border-radius: var(--radius-l);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-l);
}

.venster img { width: 100%; height: auto; }

.venster-balk {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 15px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.venster-stip {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--border-strong);
  flex: none;
}
.venster-adres {
  margin-left: 10px;
  font-size: 0.76rem;
  color: var(--text-muted);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- 9. Feitenstrook ---------------------------------------------------- */

.feiten {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 40px);
}

.feit .feit-kop {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 6px;
}
.feit p { font-size: 0.94rem; color: var(--text-secondary); margin: 0; }

@media (max-width: 820px) {
  .feiten { grid-template-columns: repeat(2, 1fr); }
}

/* --- 10. Kenmerkblokken ------------------------------------------------- */

.kenmerk {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.kenmerk + .kenmerk { margin-top: clamp(72px, 9vw, 128px); }

.kenmerk--omgedraaid .kenmerk-tekst { order: 2; }

.kenmerk-tekst h3 {
  font-size: clamp(1.6rem, 3vw, 2.35rem);
  letter-spacing: -0.03em;
  margin-bottom: 16px;
}

.kenmerk-tekst .lead { font-size: 1.08rem; margin-bottom: 20px; }

/* Voor brede, liggende uitsneden: tekst boven, beeld over de volle
   breedte eronder. In twee kolommen zou zo'n beeld te klein worden. */
.kenmerk--gestapeld {
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 44px);
}
.kenmerk--gestapeld .kenmerk-tekst { max-width: 70ch; }

@media (max-width: 880px) {
  .kenmerk { grid-template-columns: 1fr; }
  .kenmerk--omgedraaid .kenmerk-tekst { order: 0; }
}

/* --- 11. Lijstjes ------------------------------------------------------- */

.vinklijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
/* Het vinkje staat absoluut in plaats van als eigen kolom. Met een grid
   werd elk kind van de <li> een eigen rij, waardoor "<strong>2 uur</strong>
   beheer per maand" over twee regels brak. Zo blijft de tekst gewoon
   doorlopen, ongeacht hoeveel elementen erin staan. */
.vinklijst li {
  position: relative;
  padding-left: 30px;
  color: var(--text-secondary);
  font-size: 1rem;
}
.vinklijst li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.65;
}
.vinklijst li strong { color: var(--text-primary); font-weight: 650; }

/* --- 12. Kaartraster ---------------------------------------------------- */

.raster {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.kaart {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-s);
}

.kaart h2,
.kaart h3 { font-size: 1.15rem; line-height: 1.35; margin-bottom: 10px; }
.kaart p { color: var(--text-secondary); font-size: 0.98rem; margin: 0; }
.kaart p + p { margin-top: 12px; }

.kaart-pictogram {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  margin-bottom: 18px;
}
.kaart-pictogram svg { width: 21px; height: 21px; }

/* --- 13. Klikbare demo -------------------------------------------------- */

.demo-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 26px;
}

.demo-tab {
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 9px 17px;
  cursor: pointer;
  transition: all .16s ease;
}
.demo-tab:hover { color: var(--text-primary); border-color: var(--border-strong); }
.demo-tab[aria-selected="true"] {
  background: var(--brand-gold);
  border-color: var(--brand-gold);
  color: #1a1400;
}

.demo-paneel[hidden] { display: none; }

.demo-bijschrift {
  margin-top: 20px;
  text-align: center;
  color: var(--text-secondary);
  max-width: 66ch;
  margin-inline: auto;
  font-size: 1rem;
}
.demo-bijschrift strong { color: var(--text-primary); font-weight: 650; }

/* --- 14. Stappen -------------------------------------------------------- */

.stappen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 48px);
  counter-reset: stap;
}

.stap { counter-increment: stap; }

.stap::before {
  content: counter(stap);
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 800;
  font-size: 0.98rem;
  margin-bottom: 16px;
}

.stap h3 { margin-bottom: 8px; }
.stap p { color: var(--text-secondary); font-size: 0.98rem; margin: 0; }

@media (max-width: 820px) { .stappen { grid-template-columns: 1fr; } }

/* --- 15. Prijzen -------------------------------------------------------- */

.prijsraster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: start;
}


.prijskaart {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-shadow: var(--shadow-s);
}

.prijskaart--uitgelicht {
  border-color: var(--brand-gold);
  box-shadow: var(--shadow-l);
  position: relative;
}

.prijslabel {
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  background: var(--brand-gold);
  color: #1a1400;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: 999px;
  white-space: nowrap;
}

.prijskaart h3 { font-size: 1.3rem; margin-bottom: 4px; }
.prijskaart .prijs-sub { color: var(--text-muted); font-size: 0.92rem; margin-bottom: 22px; }

.prijs {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
}
.prijs-bedrag {
  font-size: clamp(2.2rem, 3.6vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
}
.prijs-eenheid { color: var(--text-muted); font-size: 0.95rem; font-weight: 500; }
.prijs-noot { color: var(--text-muted); font-size: 0.84rem; margin-bottom: 24px; }

.prijskaart .knop { width: 100%; margin-bottom: 24px; }

.modulelijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
  align-content: start;
  font-size: 0.95rem;
}
.modulelijst li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 9px;
  align-items: start;
  color: var(--text-secondary);
}
.modulelijst li svg { width: 15px; height: 15px; margin-top: 5px; flex: none; }
.modulelijst .aan svg { color: var(--good); }
.modulelijst .uit { color: var(--text-muted); opacity: 0.62; }
.modulelijst .uit svg { color: var(--text-muted); }

/* Onderbouwing onder de prijzen: waarom het duurste pakket zich terugverdient. */
.waarde {
  margin-top: clamp(36px, 5vw, 56px);
  padding: clamp(28px, 4vw, 40px);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  background:
    radial-gradient(120% 160% at 50% 0%, color-mix(in srgb, var(--brand-gold) 10%, transparent), transparent 60%),
    var(--surface);
}
.waarde > h3 {
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  margin-bottom: 12px;
}
.waarde > p { color: var(--text-secondary); max-width: 76ch; }

.waarde-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(20px, 3vw, 36px);
  margin-top: 24px;
}
.waarde-raster h4 {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 8px;
  color: var(--accent);
}
.waarde-raster p { color: var(--text-secondary); font-size: 0.98rem; margin: 0; }

/* De ondertitels zijn niet even lang, waardoor prijs, knop en modulelijst
   anders op verschillende hoogtes zouden beginnen. Met subgrid deelt elke
   kaart dezelfde rijhoogtes, zodat alles netjes op één lijn staat.
   Browsers zonder subgrid houden de flex-opbouw hieronder; die ziet er
   prima uit, alleen zonder die uitlijning. */
@media (min-width: 901px) {
  @supports (grid-template-rows: subgrid) {
    .prijsraster {
      align-items: stretch;
      grid-template-rows: auto auto auto auto auto auto;
    }
    .prijskaart {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 6;
    }
  }
}

.prijs-voet {
  margin-top: 32px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.92rem;
}

@media (max-width: 900px) {
  .prijsraster { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  /* Onder elkaar houden we de prijsvolgorde aan; het uitgelichte pakket
     naar voren halen zou de opbouw van goedkoop naar duur breken. */
}

/* --- 16. Veelgestelde vragen ------------------------------------------- */

.vragen { border-top: 1px solid var(--border); }

.vraag {
  border-bottom: 1px solid var(--border);
}

.vraag summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  cursor: pointer;
  font-weight: 650;
  font-size: 1.08rem;
  letter-spacing: -0.015em;
  list-style: none;
}
.vraag summary::-webkit-details-marker { display: none; }

.vraag summary::after {
  content: "+";
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1;
  flex: none;
  transition: transform .2s ease;
}
.vraag[open] summary::after { transform: rotate(45deg); }

.vraag-antwoord {
  padding-bottom: 24px;
  color: var(--text-secondary);
  max-width: 76ch;
}

/* --- 17. Contact -------------------------------------------------------- */

.contactraster {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

@media (max-width: 880px) { .contactraster { grid-template-columns: 1fr; } }

.contactkanaal {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}
.contactkanaal:last-of-type { border-bottom: 0; }
.contactkanaal svg { width: 20px; height: 20px; color: var(--accent); flex: none; margin-top: 3px; }
.contactkanaal .kanaal-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.contactkanaal a, .contactkanaal span { font-size: 1.05rem; font-weight: 600; color: var(--text-primary); }
.contactkanaal a:hover { color: var(--accent); }

.formulier {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: clamp(24px, 3.5vw, 36px);
  box-shadow: var(--shadow-s);
}

.veldrij {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 620px) { .veldrij { grid-template-columns: 1fr; } }

.veld { margin-bottom: 16px; }

.veld label {
  display: block;
  font-size: 0.86rem;
  font-weight: 650;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.veld input,
.veld textarea,
.veld select {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  color: var(--text-primary);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 12px 14px;
}
.veld textarea { resize: vertical; min-height: 116px; }
.veld input:focus, .veld textarea:focus, .veld select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: transparent;
}

.honingpot {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.formulier .knop { width: 100%; margin-top: 6px; }

.formulier-noot {
  margin-top: 14px;
  font-size: 0.84rem;
  color: var(--text-muted);
  text-align: center;
}

.melding {
  border-radius: 10px;
  padding: 13px 15px;
  font-size: 0.94rem;
  margin-bottom: 18px;
}
.melding--ok {
  background: color-mix(in srgb, var(--good) 12%, transparent);
  color: var(--good);
  border: 1px solid color-mix(in srgb, var(--good) 30%, transparent);
}
.melding--fout {
  background: color-mix(in srgb, var(--critical) 12%, transparent);
  color: var(--critical);
  border: 1px solid color-mix(in srgb, var(--critical) 30%, transparent);
}
.melding[hidden] { display: none; }

/* --- 18. Slotoproep ----------------------------------------------------- */

/* De knop staat in een flexrij; die erft text-align niet, dus zonder deze
   regel plakt hij links terwijl kop en tekst gecentreerd staan. */
.slot .knoprij { justify-content: center; }

.slot {
  text-align: center;
  border-radius: var(--radius-l);
  padding: clamp(48px, 7vw, 88px) clamp(24px, 5vw, 64px);
  background:
    radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--brand-gold) 16%, transparent), transparent 62%),
    var(--surface);
  border: 1px solid var(--border);
}

/* --- 18b. Telefoonopnamen ---------------------------------------------- */

.telefoons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(18px, 3vw, 44px);
}

.telefoon {
  margin: 0;
  width: min(260px, 66vw);
  text-align: center;
}

.telefoon img {
  width: 100%;
  height: auto;
  border-radius: 26px;
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-l);
}

.telefoon figcaption {
  margin-top: 12px;
  font-size: 0.88rem;
  color: var(--text-muted);
}

@media (max-width: 700px) {
  /* Op een telefoon zelf is één toestel naast de tekst genoeg. */
  .telefoons .telefoon:nth-child(n+3) { display: none; }
}

/* --- 19. Inzichten (artikelen) ------------------------------------------ */

.artikelraster {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}

.artikelkaart {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-s);
  transition: transform .18s ease, box-shadow .18s ease;
  color: inherit;
}
.artikelkaart:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--shadow-l);
}
.artikelkaart .artikel-meta {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 12px;
}
.artikelkaart h2 { font-size: 1.2rem; line-height: 1.3; margin-bottom: 10px; }
.artikelkaart p { color: var(--text-secondary); font-size: 0.97rem; margin: 0 0 18px; }
.artikelkaart .pijllink { margin-top: auto; font-size: 0.95rem; }

/* Losse artikelpagina */
.artikel {
  max-width: 72ch;
  margin-inline: auto;
}
.artikel h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin: 2.2em 0 0.6em;
}
.artikel h3 {
  font-size: clamp(1.15rem, 1.9vw, 1.35rem);
  margin: 1.8em 0 0.5em;
}
.artikel p, .artikel li { font-size: 1.06rem; color: var(--text-secondary); line-height: 1.72; }
.artikel strong { color: var(--text-primary); font-weight: 650; }
.artikel ul, .artikel ol { padding-left: 1.3em; margin: 0 0 1.3em; }
.artikel li { margin-bottom: 0.5em; }

.artikel blockquote {
  margin: 1.8em 0;
  padding: 20px 24px;
  border-left: 3px solid var(--brand-gold);
  background: var(--surface);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.artikel blockquote p { margin: 0; color: var(--text-primary); font-size: 1.08rem; }

.artikelkop { text-align: center; margin-bottom: clamp(36px, 5vw, 60px); }
.artikelkop h1 {
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  margin-bottom: 18px;
}
.artikel-datum {
  font-size: 0.88rem;
  color: var(--text-muted);
}

.kruimels {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 28px;
}
.kruimels a { color: var(--text-muted); }
.kruimels a:hover { color: var(--accent); }

/* --- 20. Voettekst ------------------------------------------------------ */

.voet {
  border-top: 1px solid var(--border);
  padding-block: clamp(48px, 6vw, 72px) 36px;
}

.voetraster {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: clamp(28px, 4vw, 56px);
  margin-bottom: 44px;
}

@media (max-width: 880px) {
  .voetraster { grid-template-columns: 1fr 1fr; }
  .voetraster > *:first-child { grid-column: 1 / -1; }
}

/* De voettekstkoppen zijn h2 en niet h4: na de h1 van de pagina sloeg h4
   twee niveaus over, wat schermlezers laat struikelen. Het formaat blijft
   gelijk; alleen het element verandert. */
.voet .voet-kop {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-muted);
  margin-bottom: 14px;
  font-weight: 700;
}

.voetlijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.voetlijst a { color: var(--text-secondary); font-size: 0.95rem; }
.voetlijst a:hover { color: var(--text-primary); text-decoration: none; }

.voet-intro { max-width: 34ch; color: var(--text-secondary); font-size: 0.95rem; margin-top: 14px; }

.voet-onder {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  justify-content: space-between;
  align-items: center;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  font-size: 0.87rem;
  color: var(--text-muted);
}
.voet-onder p { margin: 0; }

/* --- 21. Onthullen bij scrollen ---------------------------------------- */

/* Zonder JavaScript nooit iets verbergen. */
html:not(.js) .onthul { opacity: 1; transform: none; }

.onthul {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.onthul.zichtbaar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .onthul { opacity: 1; transform: none; transition: none; }
  .knop:hover { transform: none; }
  .artikelkaart:hover { transform: none; }
}

/* --- 22. Dienstlijnen --------------------------------------------------- */

/* De twee lijnen (Beheer as a Service en Expertise Desk) staan op de
   homepage naast elkaar. Ze zijn bewust even zwaar opgemaakt: de bezoeker
   moet kiezen op inhoud, niet op wat het hardst roept. */
.lijnen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.lijn {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: clamp(28px, 3.4vw, 40px);
  box-shadow: var(--shadow-s);
}

.lijn .opschrift { margin-bottom: 12px; }
.lijn h3 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); margin-bottom: 12px; }
.lijn > p { color: var(--text-secondary); }
.lijn .vinklijst { margin: 20px 0 26px; }
.lijn .knoprij { margin-top: auto; }

.lijn-voor {
  display: inline-block;
  font-size: 0.86rem;
  font-weight: 650;
  color: var(--text-primary);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: 18px;
}

@media (max-width: 880px) { .lijnen { grid-template-columns: 1fr; } }

/* --- 23. Tabellen ------------------------------------------------------- */

/* Brede tabellen mogen nooit de pagina zelf laten schuiven; ze schuiven
   binnen hun eigen kader. */
.tabelhuls {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}

.tabel {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 0.97rem;
}

.tabel th,
.tabel td {
  text-align: left;
  padding: 15px 18px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  color: var(--text-secondary);
}

.tabel thead th {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 700;
  white-space: nowrap;
  background: var(--surface-2);
}

.tabel tbody tr:last-child td { border-bottom: 0; }
.tabel th[scope="row"] { color: var(--text-primary); font-weight: 650; }
.tabel .nadruk { color: var(--text-primary); font-weight: 650; }

.tabel .ja { color: var(--good); font-weight: 700; }
.tabel .nee { color: var(--text-muted); }

.tabel-noot {
  margin-top: 14px;
  font-size: 0.88rem;
  color: var(--text-muted);
}

/* --- 24. Notitieblok ---------------------------------------------------- */

.notitie {
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand-gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--surface);
  padding: 22px 26px;
  color: var(--text-secondary);
}
.notitie h2,
.notitie h3 { font-size: 1.1rem; line-height: 1.35; margin-bottom: 8px; color: var(--text-primary); }
.notitie p:last-child { margin-bottom: 0; }

/* --- 25. Sectoren ------------------------------------------------------- */

.sectoren {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.sector {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 9px 18px;
  background: var(--surface);
}

/* --- 26. Tijdlijn (werkwijze) ------------------------------------------ */

.tijdlijn {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: fase;
  max-width: 78ch;
}

.tijdlijn > li {
  counter-increment: fase;
  position: relative;
  padding: 0 0 34px 62px;
}

.tijdlijn > li::before {
  content: counter(fase);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 800;
  font-size: 1rem;
}

/* De lijn tussen de bolletjes; bij de laatste stap houdt hij op. */
.tijdlijn > li::after {
  content: "";
  position: absolute;
  left: 19.5px;
  top: 48px;
  bottom: 8px;
  width: 1px;
  background: var(--border-strong);
}
.tijdlijn > li:last-child { padding-bottom: 0; }
.tijdlijn > li:last-child::after { display: none; }

.tijdlijn h2 { font-size: 1.15rem; line-height: 1.35; margin-bottom: 8px; padding-top: 7px; }
.tijdlijn p { color: var(--text-secondary); margin-bottom: 0; }
.tijdlijn .doorlooptijd {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.85rem;
  font-weight: 650;
  color: var(--accent);
}

@media (max-width: 620px) {
  .tijdlijn > li { padding-left: 52px; }
  .tijdlijn > li::before { width: 34px; height: 34px; font-size: 0.92rem; }
  .tijdlijn > li::after { left: 16.5px; top: 42px; }
}

/* --- 27. Losse diensten en tarieven ------------------------------------ */

.tariefrij {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  /* Niet baseline: het bedrag staat groter dan de kop, en op een gedeelde
     basislijn steekt het er zichtbaar bovenuit. Met gelijke regelhoogtes
     beginnen beide regels op dezelfde hoogte. */
  align-items: start;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}
.tariefrij:last-child { border-bottom: 0; }
.tariefrij h3 { font-size: 1.08rem; margin-bottom: 5px; }
.tariefrij p { color: var(--text-secondary); font-size: 0.95rem; margin: 0; max-width: 62ch; }
.tariefrij .bedrag {
  font-size: 1.25rem;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.02em;
  white-space: nowrap;
  /* Rechts uitlijnen, anders eindigt "gratis" ergens anders dan "in overleg"
     en staan de bedragen niet onder elkaar. */
  text-align: right;
}
.tariefrij .bedrag small {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0;
  text-align: right;
}

@media (max-width: 620px) {
  .tariefrij { grid-template-columns: 1fr; gap: 8px; }
  .tariefrij .bedrag small { text-align: left; }
}

/* --- 28. Over: persoon -------------------------------------------------- */

.persoon {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(28px, 4vw, 52px);
  align-items: start;
}
.persoon-beeld {
  border-radius: var(--radius-l);
  border: 1px solid var(--border);
  background: var(--surface);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.persoon-beeld img { width: 100%; height: 100%; object-fit: cover; }
.persoon-beeld svg { width: 46%; height: auto; opacity: 0.5; }

@media (max-width: 720px) {
  .persoon { grid-template-columns: 1fr; }
  .persoon-beeld { max-width: 200px; }
}

/* --- 29. Kleine varianten ---------------------------------------------- */

.prijsraster--vier { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) and (min-width: 901px) {
  .prijsraster--vier { grid-template-columns: repeat(2, 1fr); }
}

/* Vier kaarten naast elkaar: iets krapper, anders wordt de kolom te smal
   voor het bedrag. */
.prijsraster--vier .prijskaart { padding: 28px 22px; }
.prijsraster--vier .prijs-bedrag { font-size: clamp(1.9rem, 2.8vw, 2.4rem); }

@media (min-width: 901px) {
  @supports (grid-template-rows: subgrid) {
    .prijsraster--vier { grid-template-rows: auto auto auto auto auto auto; }
  }
}

/* Fully Managed heeft één maat plus maatwerk, dus twee kaarten. Zonder
   maximumbreedte worden die twee onnodig breed op een groot scherm. */
.prijsraster--twee { grid-template-columns: repeat(2, 1fr); max-width: 800px; margin-inline: auto; }

/* Fully Managed is één pakket met een prijs op maat; die kaart staat alleen. */
.prijsraster--een { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }

/* De algemene mobiele regel voor .prijsraster staat eerder in dit bestand en
   heeft dezelfde specificiteit; zonder deze herhaling zouden de varianten
   hierboven op een telefoon vier respectievelijk twee kolommen houden. */
@media (max-width: 900px) {
  .prijsraster--vier,
  .prijsraster--twee {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin-inline: auto;
  }
}

.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
@media (max-width: 820px) { .duo { grid-template-columns: 1fr; } }

.paginakop { max-width: 66ch; }
.paginakop h1 { font-size: clamp(2.1rem, 4.8vw, 3.4rem); margin-bottom: 20px; }

/* --- 30. Drie niveaus naast elkaar -------------------------------------- */

.raster--drie { grid-template-columns: repeat(3, 1fr); align-items: stretch; }

@media (max-width: 1000px) {
  .raster--drie { grid-template-columns: 1fr; max-width: 540px; margin-inline: auto; }
}

/* Het middelste niveau is het meest gekozen en krijgt daarom het label en
   de rand — maar niet meer ruimte, want de keuze moet inhoudelijk blijven. */
.lijn--uitgelicht {
  position: relative;
  border-color: var(--brand-gold);
  box-shadow: var(--shadow-l);
}
.lijn--uitgelicht .prijslabel { top: -12px; left: 50%; }

.raster--drie .lijn h3 { font-size: clamp(1.5rem, 2.6vw, 1.95rem); }

/* Twee niveaus naast elkaar: zelfde opbouw, maar smaller uitgelijnd zodat
   twee kaarten niet over de volle breedte uitrekken. */
.raster--twee { grid-template-columns: repeat(2, 1fr); align-items: stretch; max-width: 900px; margin-inline: auto; }

@media (max-width: 860px) {
  .raster--twee { grid-template-columns: 1fr; max-width: 540px; }
}

.raster--twee .lijn h3 { font-size: clamp(1.5rem, 2.6vw, 1.95rem); }

/* --- 31. Wat er buiten scope valt --------------------------------------- */

/* Tegenhanger van de vinklijst. Een pakket wordt pas concreet als er ook
   staat wat er níét in zit; dat is de vraag die elke inkoper stelt. */
.kruislijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.kruislijst li {
  position: relative;
  padding-left: 30px;
  color: var(--text-muted);
  font-size: 1rem;
}
.kruislijst li::before {
  content: "\00D7";
  position: absolute;
  left: 2px;
  top: 0;
  color: var(--text-muted);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.5;
}
.kruislijst li strong { color: var(--text-secondary); font-weight: 650; }

/* Scopeblok: wat er wel en niet in zit, naast elkaar. */
.scope {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3.5vw, 44px);
  padding: clamp(26px, 3.5vw, 38px);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  background: var(--surface);
}
.scope h3 {
  font-size: 1.05rem;
  margin-bottom: 14px;
}
.scope-uit h3 { color: var(--text-muted); }

@media (max-width: 780px) { .scope { grid-template-columns: 1fr; } }

/* Regieblok: wat er hoe dan ook bij de opdrachtgever blijft. */
.regie {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-l);
  padding: clamp(24px, 3.5vw, 34px);
  background:
    radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--brand-gold) 8%, transparent), transparent 62%),
    var(--surface);
}
.regie h3 { font-size: 1.15rem; margin-bottom: 12px; }
.regie p { color: var(--text-secondary); }

.lijn-ondertitel {
  display: block;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.01em;
  margin: -6px 0 12px;
}

/* --- 32. Startroute ------------------------------------------------------ */

/* De drie stappen van gratis quickscan naar draaiend. Staat hoog op de
   pagina, omdat het de goedkoopste eerste stap is die iemand kan zetten. */
.route {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  background: var(--surface);
  overflow: hidden;
}

.route-stap {
  padding: clamp(26px, 3.4vw, 38px);
  position: relative;
  counter-increment: routestap;
}
.route-stap + .route-stap { border-left: 1px solid var(--border); }

.route { counter-reset: routestap; }

.route-nummer {
  display: inline-grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--brand-gold);
  color: #1a1400;
  font-weight: 800;
  font-size: 0.95rem;
  margin-bottom: 16px;
}

.route-stap h3 { font-size: 1.2rem; margin-bottom: 8px; }
.route-stap p { color: var(--text-secondary); font-size: 0.97rem; margin: 0; }

.route-merk {
  display: inline-block;
  margin-top: 14px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

@media (max-width: 860px) {
  .route { grid-template-columns: 1fr; }
  .route-stap + .route-stap { border-left: 0; border-top: 1px solid var(--border); }
}

/* --- 33. Opdrachtgevers -------------------------------------------------- */

/* Namen in plaats van logo's: overheidsorganisaties staan derden niet toe hun
   beeldmerk te voeren, en een naam met de opdracht erbij zegt meer dan een
   grijs plaatje. */
.opdrachtgevers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.opdrachtgever {
  background: var(--surface);
  padding: 22px 24px;
}
.opdrachtgever strong {
  display: block;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 4px;
}
.opdrachtgever span { color: var(--text-muted); font-size: 0.9rem; }

/* --- 34. Beeld in een kader ---------------------------------------------- */

.beeldkader {
  border-radius: var(--radius-l);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-l);
}
.beeldkader img { width: 100%; height: auto; display: block; }

.beeld-bijschrift {
  margin-top: 14px;
  font-size: 0.88rem;
  color: var(--text-muted);
  text-align: center;
}

/* --- 35. Hero met pakketladder ------------------------------------------- */
/* De homepage opent niet met een productplaatje maar met de vraag én het
   antwoord naast elkaar: links waarom je hier bent, rechts wat het kost. Dat
   is wat een inkoper als eerste wil weten, en het scheelt een klik naar de
   tarievenpagina. */

.hero--gedeeld {
  text-align: left;
  padding-bottom: var(--sectie-y);
}
.hero--gedeeld .omhulsel {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(36px, 5vw, 76px);
  align-items: center;
}
.hero--gedeeld .display { margin-bottom: 20px; }
.hero--gedeeld .lead { margin-inline: 0; max-width: 46ch; }
.hero--gedeeld .knoprij { justify-content: flex-start; }
.hero--gedeeld .hero-noot { max-width: 46ch; }

/* De ladder zelf: drie treden die oplopen in wat je uit handen geeft. De
   lijn links loopt door alle drie, zodat het één reeks blijft en geen drie
   losse kaarten. */
.ladder {
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  background: var(--surface);
  padding: clamp(18px, 2.2vw, 26px);
}
.ladder-kop {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.ladder-kop h2 {
  font-size: 0.82rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-secondary); margin: 0;
}
.ladder-kop a { font-size: 0.86rem; }

.ladder-trede {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  align-items: baseline;
  padding: 16px 0 16px 20px;
  position: relative;
  border-top: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
}
.ladder-trede:first-of-type { border-top: 0; }

/* Het bolletje op de doorlopende lijn. */
.ladder-trede::before {
  content: "";
  position: absolute; left: 3px; top: 22px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--border-strong);
}
.ladder-trede::after {
  content: "";
  position: absolute; left: 6px; top: 29px; bottom: -16px;
  width: 1px; background: var(--border);
}
.ladder-trede:last-of-type::after { display: none; }

.ladder-trede[data-nadruk="ja"]::before {
  background: var(--brand-gold);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-gold) 22%, transparent);
}

.ladder-naam { font-weight: 650; color: var(--text-primary); }
.ladder-prijs { font-weight: 700; color: var(--text-primary); white-space: nowrap; }
.ladder-prijs small { font-weight: 500; color: var(--text-muted); font-size: 0.78em; }
.ladder-uitleg {
  grid-column: 1 / -1;
  margin: 0; font-size: 0.92rem; color: var(--text-secondary); max-width: 42ch;
}

.ladder-trede:hover .ladder-naam,
.ladder-trede:focus-visible .ladder-naam { color: var(--accent); }
.ladder-trede:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 10px;
}

.ladder-voet {
  margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--border);
  font-size: 0.86rem; color: var(--text-muted);
}

@media (max-width: 900px) {
  .hero--gedeeld { text-align: left; }
  .hero--gedeeld .omhulsel { grid-template-columns: 1fr; gap: 34px; }
}

/* --- 36. Weergavekiezer --------------------------------------------------- */
/* Vier weergaven van het dashboard onder knoppen in plaats van achter een
   scrolltruc: je kiest zelf wat je bekijkt, en het werkt met het toetsenbord.
   Zonder JavaScript staan de vier beelden gewoon onder elkaar. */

.kiezer-kop { max-width: 66ch; }
.kiezer-kop h2 { margin-bottom: 16px; }

.kiezer-knoppen {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: clamp(18px, 2.4vw, 26px);
}
.kiezer-knop {
  font: inherit; font-size: 0.9rem; font-weight: 600;
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--border); background: transparent;
  color: var(--text-secondary); cursor: pointer;
  transition: color .15s, border-color .15s, background-color .15s;
}
.kiezer-knop:hover { color: var(--text-primary); border-color: var(--border-strong); }
.kiezer-knop[aria-selected="true"] {
  background: var(--brand-gold); border-color: var(--brand-gold); color: #1a1508;
}
.kiezer-knop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.kiezer-paneel + .kiezer-paneel { margin-top: clamp(28px, 4vw, 44px); }
html.js .kiezer-paneel[hidden] { display: none; }

.kiezer-beeld {
  border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
  background: var(--surface);
  box-shadow: 0 34px 80px -40px rgba(0,0,0,.7);
}
.kiezer-beeld img { display: block; width: 100%; height: auto; }

.kiezer-tekst { margin-top: 16px; max-width: 62ch; }
.kiezer-tekst h3 { font-size: 1.12rem; margin-bottom: 6px; }
.kiezer-tekst p { color: var(--text-secondary); margin: 0; }

@media (min-width: 901px) {
  .kiezer-paneel { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(28px, 3.5vw, 48px); align-items: center; }
  .kiezer-tekst { margin-top: 0; }
}

/* --- 37. Klantlogo's ------------------------------------------------------ */
/* Logo's van derden staan op een witte tegel. Dat is niet decoratief: een
   merk heeft vaste kleuren, en die moeten in de lichte én de donkere weergave
   kloppen. Zonder tegel verdwijnt de zwarte slagschaduw van Jumbo in het
   donker, en dat is precies het soort verminking waar een merkeigenaar
   bezwaar tegen maakt. */

.klantlogos {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 1.8vw, 22px);
  align-items: stretch;
}

.klantlogo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 168px;
  min-height: 104px;
  padding: 18px 26px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  flex: 0 1 auto;
}
.klantlogo img {
  display: block;
  width: auto;
  max-width: 150px;
  max-height: 76px;
  object-fit: contain;
}
/* Een breed woordmerk vult zijn tegel al bij een kleine hoogte; zonder deze
   grens staat Jumbo naast Zinzia als een reclamebord. */
.klantlogo img[alt="Jumbo"] { max-height: 44px; }

@media (max-width: 560px) {
  .klantlogo { min-width: 140px; min-height: 88px; padding: 14px 18px; }
  .klantlogo img { max-width: 116px; max-height: 52px; }
}

/* --- 38. Betaaltermijn: per maand of het jaar vooruit --------------------- */
/* Overgenomen van de AureaDesk-site, zodat beide sites de keuze op dezelfde
   manier tonen. De bedragen staan in data-attributen; site.js wisselt ze. */
.termijnkeuze {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  background: var(--surface);
  margin-top: 22px;
}
.termijnkeuze button {
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1;
  padding: 9px 15px;
  border-radius: 999px;
  white-space: nowrap;
  color: var(--text-muted);
}
.termijnkeuze button:hover { color: var(--text-primary); }
.termijnkeuze button[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.termijnkeuze .korting { font-weight: 600; opacity: 0.8; }

/* De regel onder de schakelaar wisselt mee. Bij een jaartermijn staat daar de
   afspraak die het bezwaar wegneemt: je zit er niet meteen een jaar aan vast.
   Die hoort niet in voetnootgrijs. */
.termijn-uitleg {
  margin-top: 18px;
  margin-inline: auto;
  max-width: 58ch;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* --- 39. Contactgegevens onder het formulier --------------------------- */

/* Het formulier is waar mensen naartoe komen; de gegevens staan eronder als
   naslag, in een strook in plaats van een kolom. */
.contactgegevens {
  margin-top: clamp(24px, 3.5vw, 40px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: clamp(18px, 2.6vw, 26px) clamp(22px, 3.2vw, 32px);
}

.kanalenraster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px clamp(20px, 3vw, 36px);
}

.kanalenraster .contactkanaal { border-bottom: 0; padding: 10px 0; }

.kanalen-noot {
  margin-top: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 0.92rem;
}

@media (max-width: 640px) {
  .kanalenraster { grid-template-columns: 1fr; gap: 0; }
  .kanalenraster .contactkanaal { border-bottom: 1px solid var(--border); }
  .kanalenraster .contactkanaal:last-child { border-bottom: 0; }
}

/* --- 40. IJkpunt bij de prijzen ---------------------------------------- */

/* Eén regel die het maandbedrag afzet tegen wat inhuur op locatie kost. Hij
   staat bewust boven de kleine lettertjes en niet ertussen; het is het
   argument, niet een voetnoot. */
.ijkpunt {
  margin: clamp(20px, 2.6vw, 28px) 0 clamp(14px, 1.8vw, 20px);
  padding: 16px 20px;
  border-left: 3px solid var(--brand-gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--accent-soft-2);
  color: var(--text-secondary);
  font-size: 0.98rem;
  line-height: 1.55;
  max-width: 78ch;
}
.ijkpunt strong { color: var(--text-primary); }
/* Het kader bevat sinds september 2026 twee alinea's; de laatste hoort
   geen extra ruimte onderin het kader te laten staan. */
.ijkpunt p { margin-bottom: 0.7em; }
.ijkpunt p:last-child { margin-bottom: 0; }

/* --- 41. Cookiebanner ---------------------------------------------------- */
/* Verschijnt alleen als er nog geen keuze is gemaakt. Hij ligt onderin beeld
   en dekt de inhoud niet af, zodat iemand de site kan lezen voordat hij
   beslist. Weigeren en toestaan hebben bewust hetzelfde gewicht: de AVG
   vraagt dat afwijzen net zo makkelijk is als accepteren, en een grijze
   nee-knop naast een gouden ja-knop is dat niet. */
.koekjes {
  position: fixed;
  z-index: 60;
  left: 16px;
  right: 16px;
  bottom: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  margin: 0 auto;
  max-width: 560px;
  padding: 22px 24px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-l);
  background: var(--surface-raised);
  box-shadow: var(--shadow-l);
  color: var(--text-secondary);
}

.koekjes-kop {
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.koekjes-tekst {
  margin: 0 0 18px;
  font-size: 0.94rem;
  line-height: 1.55;
}

.koekjes-knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* Beide knoppen delen deze vorm; alleen de rand van de ja-knop is iets
   sterker, zodat de banner niet stuurloos oogt zonder de nee-knop weg te
   drukken. */
.koekjes-knop {
  flex: 1 1 auto;
  min-width: 120px;
  font-family: inherit;
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1;
  padding: 13px 20px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}
.koekjes-knop:hover { border-color: var(--text-primary); }
.koekjes-knop--ja { border-color: var(--brand-gold); background: var(--accent-soft-2); }
.koekjes-knop--ja:hover { background: var(--accent-soft); border-color: var(--brand-gold); }

.koekjes-meer {
  flex: 0 0 auto;
  font-size: 0.88rem;
  color: var(--text-secondary);
}

/* De knop in de voettekst waarmee iemand zijn keuze herziet. Hij moet
   opgaan in de lijst met voetlinks eromheen. */
.voetknop {
  font: inherit;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
}
.voetknop:hover { text-decoration: underline; }
/* Zonder JavaScript laadt Analytics niet en valt er niets te herzien. */
html:not(.js) .koekjes-herzien { display: none; }

@media (max-width: 520px) {
  .koekjes { padding: 20px; }
  .koekjes-knop { flex: 1 1 100%; }
  .koekjes-meer { width: 100%; margin-top: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .koekjes-knop { transition: none; }
}