/* ==========================================================================
   AureaDesk - website
   Dezelfde kleur- en typografietokens als de applicatie zelf, zodat de site
   en het product als een geheel aanvoelen.
   ========================================================================== */

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

:root {
  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);

  --accent: #e3b93e;
  --accent-strong: #f0cc6b;
  --accent-soft: #3a2f12;
  --accent-soft-2: #241d0c;
  --brand-gold: #e3b93e;
  --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(80px, 11vw, 152px);
}


/* Secties die altijd donker zijn, ongeacht het thema van de bezoeker.
   Zo houden we de productbeelden in hun eigen, rustige omgeving staan. */
.vlak--donker {
  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);

  --accent: #e3b93e;
  --accent-strong: #f0cc6b;
  --accent-soft: #3a2f12;
  --accent-soft-2: #241d0c;
  --brand-gold: #e3b93e;

  --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);

  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 h3 { margin-bottom: 14px; }
.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(--accent-strong); border-color: var(--accent-strong); }

.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;
  font-weight: 800;
  font-size: 1.06rem;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.merk:hover { text-decoration: none; }
.merk svg { width: 26px; height: 26px; flex: none; }

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

/* Tussen 1000 en 1200 px past het menu wel, maar krap. Iets minder ruimte
   tussen de items houdt de balk daar op één regel. */
@media (max-width: 1200px) {
  .navlinks { gap: 20px; }
}
.navlinks a:hover { color: var(--text-primary); text-decoration: none; }

.navacties { display: flex; align-items: center; gap: 10px; }
/* De demoknop in de balk hoort op elke breedte op één regel te staan. */
.navacties .knop--primair { 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);
}

/* Schakelaar maandelijks / jaarlijks boven de prijskaarten. Zelfde vorm als
   de taalkeuze in de kop, maar met knoppen omdat er niets genavigeerd wordt. */
.termijnkeuze {
  display: inline-flex;
  align-items: 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 17px;
  border-radius: 999px;
  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);
}
.termijn-uitleg strong { color: var(--accent-strong); font-weight: 700; }

.navknop {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
  color: var(--text-primary);
}
/* max-width: none, anders maakt de algemene regel svg { max-width: 100% } het
   icoon samendrukbaar en drukt flexbox de menuknop op een volle balk plat. */
.navknop svg { width: 22px; height: 22px; max-width: none; }

/* De volledige knoptekst past pas naast het hele menu vanaf ongeveer 1120 px.
   Daaronder toont de balk de korte variant, zodat alles op één regel blijft. */
.cta-kort { display: none; }
@media (max-width: 1120px) {
  .cta-lang { display: none; }
  .cta-kort { display: inline; }
}

@media (max-width: 1000px) {
  .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);
  }
}

/* Onder 410 px passen logo met naam, taalkeuze, demoknop en menuknop niet
   naast elkaar. Dan vervalt de naam en blijft het logo; de link houdt zijn
   aria-label. De naam is een losse tekstnode, vandaar font-size: 0. */
@media (max-width: 409px) {
  .navbalk .merk { font-size: 0; gap: 0; }
}

/* --- 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; }

/* Twee liggende uitsneden naast elkaar; de kolomverhouding volgt de
   beelden (heatmap is breder dan de werkvoorraad-grafiek). */
.tweeluik { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(16px, 2vw, 28px); align-items: start; }
@media (max-width: 880px) { .tweeluik { grid-template-columns: 1fr; } }

@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;
}
.vinklijst li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
  color: var(--text-secondary);
  font-size: 1rem;
}
.vinklijst li::before {
  content: "\2713";
  color: var(--accent);
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.55;
}
/* De tekst hoort altijd rechts van het vinkje, ook als er per ongeluk
   meerdere elementen in een <li> staan. */
.vinklijst li > * { grid-column: 2; }
.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 h3 { margin-bottom: 10px; }
.kaart p { color: var(--text-secondary); font-size: 0.98rem; margin: 0; }

.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); }

/* Losse module die je per pakket kunt bijkopen; staat los onder de lijst. */
.modulelijst .bij {
  margin-top: 5px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.modulelijst .bij {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 9px;
  align-items: start;
}
.modulelijst .bij svg { color: var(--brand-gold); }
.modulelijst .bij em { font-style: normal; font-weight: 700; white-space: nowrap; }

/* 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;
    }
  }
}

/* Enterprise als zichtbare vierde regel. Een vierde kaart zou de andere drie
   te smal maken en de subgrid-uitlijning breken; een balk eronder niet. */
.pakketbalk {
  margin-top: 20px;
  /* Enterprise staat op hetzelfde niveau als de drie kaarten: opgetild vlak,
     dezelfde schaduw als Pro. Het goud zit in de rand en in een zachte was
     vanaf links, niet in een losse streep aan de zijkant. */
  position: relative;
  background:
    linear-gradient(100deg,
      color-mix(in srgb, var(--brand-gold) 7%, transparent) 0%,
      transparent 55%),
    var(--surface-raised);
  border: 1px solid color-mix(in srgb, var(--brand-gold) 32%, var(--border-strong));
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-l);
  padding: 32px 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.pakketbalk-tekst { flex: 1 1 440px; min-width: 0; }
.pakketbalk-tekst .opschrift { margin-bottom: 8px; }
.pakketbalk-tekst h3 { font-size: 1.35rem; margin-bottom: 8px; }
.pakketbalk-tekst p { color: var(--text-secondary); margin: 0; max-width: 62ch; }

.pakketbalk-actie {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  flex: none;
  padding-left: 40px;
  border-left: 1px solid var(--border);
  align-self: stretch;
  justify-content: center;
}
.pakketbalk-prijs {
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.pakketbalk-prijs small {
  display: block;
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text-muted);
  margin-top: 2px;
}

@media (max-width: 860px) {
  .pakketbalk { padding: 26px 24px; gap: 24px; }
  .pakketbalk-actie {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--border);
    padding-top: 22px;
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    /* Past de knop niet naast de prijs, dan eronder in plaats van buiten de kaart. */
    flex-wrap: wrap;
  }
}

.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 ----------------------------------------------------- */

.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 h3 { 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); }

/* --- 19b. Release notes -------------------------------------------------- */

.release-maand { margin-bottom: 56px; }
.release-maand:last-child { margin-bottom: 0; }
.release-maand h2 {
  font-size: 1.5rem;
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
/* Eén lijst per maand, over de volle breedte (de dagdatums worden sinds
   14 sept. 2026 niet meer getoond, dus geen datumkolom meer). */
.release-dag {
  padding-block: 6px 0;
}
.release-dag:last-child { border-bottom: none; }
.release-datum {
  color: var(--text-muted);
  font-size: 0.92rem;
  font-weight: 600;
  margin: 0;
}
.release-punten {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.release-punten li {
  position: relative;
  padding-left: 20px;
  color: var(--text-secondary);
}
.release-punten li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.release-punten strong { color: var(--text-primary); }


/* --- 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; }
  /* De contactkolom staat al alleen op de laatste rij. Over de volle breedte
     past servicedesk@aureadesk.com ook op een smal scherm. */
  .voetraster > *:first-child,
  .voetraster > *:last-child { grid-column: 1 / -1; }
}

.voet h4 {
  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; }
}

/* --- 19. Scrollcinema: hero, weergaven en kerncijfers ------------------- */

/* Hero: de kop staat er eerst alleen; bij het scrollen vervaagt hij en
   groeit het dashboard in beeld. Zo botsen ze nooit met elkaar. */
.cinema { height: 270svh; }
.cinema-toneel {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
}
/* Zachte gloed achter het dashboard; komt mee op met het beeld zelf. */
.cinema-toneel::before {
  content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: min(1180px, 88vw); aspect-ratio: 16 / 9; border-radius: 50%;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--accent) 30%, transparent), transparent 72%);
  filter: blur(80px); opacity: calc(var(--beeld-op, 0) * .5);
  z-index: 0; pointer-events: none;
}

.cinema-tekst {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding-inline: clamp(24px, 6vw, 76px);
  opacity: var(--tekst-op, 1);
  transform: translateY(calc(var(--p, 0) * -80px));
  will-change: opacity, transform;
}
.cinema-tekst h1 {
  font-size: clamp(2.8rem, 7.6vw, 6rem);
  letter-spacing: -.045em; line-height: .99; margin-bottom: 20px; max-width: 18ch;
}
.cinema-tekst .lead { max-width: 54ch; }
.cinema-tekst .knoprij { margin-top: 30px; justify-content: center; }

.cinema-beeld {
  position: absolute; left: 50%; top: 50%; z-index: 1;
  width: min(1240px, 92vw); translate: -50% -50%;
  transform: scale(var(--groei, .5));
  opacity: var(--beeld-op, 0);
  border-radius: 20px; overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 50px 130px -45px rgba(0,0,0,.75);
  will-change: transform, opacity;
}
.cinema-beeld img { width: 100%; height: auto; display: block; }

.scrolhint {
  position: absolute; left: 50%; bottom: 34px; translate: -50% 0; z-index: 3;
  font-size: .8rem; color: var(--text-muted); letter-spacing: .04em;
  opacity: var(--tekst-op, 1);
}

/* Vastgezet toneel: beeld blijft staan, de tekst ernaast loopt door */
.toneel { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(32px, 4vw, 64px); align-items: start; }
/* Het beeld staat midden in beeld vastgezet, op dezelfde hoogte waar de
   waarnemer het tekstpaneel actief maakt. Anders staan ze uit het lood. */
.toneel-beeld {
  position: sticky; top: 0; height: 100svh;
  display: flex; flex-direction: column; justify-content: center; gap: 16px;
}

.toneel-meta { display: flex; align-items: center; gap: 14px; }
.toneel-nummer {
  font-variant-numeric: tabular-nums; font-size: .82rem; letter-spacing: .06em;
  color: var(--text-muted);
}
.toneel-nummer b { color: var(--text-primary); font-weight: 700; }
.toneel-naam { font-size: .82rem; font-weight: 700; color: var(--accent); letter-spacing: .02em; }
.toneel-balk { flex: 1; height: 2px; background: var(--border); border-radius: 2px; overflow: hidden; }
.toneel-balk i {
  display: block; height: 100%; width: 100%; background: var(--accent);
  transform-origin: left; transform: scaleX(var(--vul, 0));
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.toneel-beeld figure { margin: 0; position: relative; }
.toneel-beeld img {
  /* height: auto is nodig: anders wint het height-attribuut van de <img>
     en wordt het scherm verticaal uitgerekt. */
  width: 100%; height: auto; border-radius: var(--radius-l); border: 1px solid var(--border);
  box-shadow: var(--shadow-l);
  position: absolute; inset: 0; opacity: 0; transform: scale(1.015);
  transition: opacity .5s ease, transform .8s cubic-bezier(.22,.61,.36,1);
}
.toneel-beeld img:first-child { position: relative; }
.toneel-beeld img.actief { opacity: 1; transform: scale(1); }

.toneel-tekst > div {
  min-height: 62svh; display: flex; flex-direction: column; justify-content: center;
  opacity: .3; transition: opacity .45s ease;
}
.toneel-tekst > div.actief { opacity: 1; }
/* Het laatste paneel hoeft geen volle scrollruimte meer: dat laat
   anders een groot leeg vlak achter voor de volgende sectie. */
.toneel-tekst > div:last-child { min-height: 44svh; }
.toneel-tekst h3 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); margin-bottom: 14px; }
.toneel-tekst p { color: var(--text-secondary); font-size: 1.06rem; max-width: 42ch; }

@media (max-width: 700px) {
  /* Zelfde maatvoering als de telefoonopnamen elders op de site. */
  .cinema-beeld { width: min(260px, 66vw); border-radius: 26px; }
}

/* Elk tekstblok heeft in de markup zijn eigen beeld (.toneel-blokbeeld). Op
   een breed scherm blijft dat verborgen - en wordt het dus ook niet geladen -
   omdat daar het podium het beeld laat wisselen. */
.toneel-blokbeeld { display: none; }

@media (max-width: 900px) {
  .toneel { grid-template-columns: 1fr; }
  /* Op een smal scherm staat alles onder elkaar: elk tekstblok toont zijn
     eigen beeld en het podium met de gestapelde beelden verdwijnt. Puur CSS,
     dus ook zonder JavaScript en ongeacht wat de browser nog in cache had. */
  .toneel-blokbeeld {
    display: block; width: 100%; height: auto; margin-bottom: 18px;
    border-radius: var(--radius-l); border: 1px solid var(--border);
    box-shadow: var(--shadow-l);
  }
  .toneel-beeld figure { display: none; }
  /* De teller ("03 / 08 Wijzigingsbeheer") blijft onder de navigatiebalk
     plakken terwijl je door de acht blokken scrolt, net als op een breed
     scherm; de waarnemer in site.js werkt het nummer en de naam bij. */
  .toneel-beeld {
    position: sticky; top: 64px; z-index: 5; height: auto; display: block;
    background: var(--surface); padding: 10px 0 8px;
  }
  .toneel-meta { margin-bottom: 0; }
  .toneel-tekst > div { min-height: 0; opacity: 1; margin-bottom: 40px; }
  .toneel-tekst > div:first-child { margin-top: 18px; }
}

/* Cijfers die oplopen */
.tellers { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: clamp(24px, 4vw, 56px); text-align: center; }
.teller-na {
  font-size: 0.46em; font-weight: 700; letter-spacing: -0.01em;
  margin-left: 0.16em;
}

/* Op een smal scherm staat elke teller alleen op een rij, met het bijschrift
   eronder. Dan hoort het getal zelf in het midden te staan; het achtervoegsel
   hangt er rechts naast en telt niet mee voor het midden. In de rij van vier
   op een breed scherm valt dat verschil niet op en blijft het paar samen
   gecentreerd staan. */
@media (max-width: 620px) {
  .teller-getal { position: relative; display: inline-block; }
  .teller-na {
    position: absolute; left: 100%; bottom: 0.52em; margin-left: 0.18em;
    /* Buiten het vak van het getal wordt het verloop niet meer geverfd,
       dus krijgt het achtervoegsel hier een eigen kleur. */
    color: color-mix(in srgb, var(--text-primary) 62%, transparent);
    -webkit-text-fill-color: currentColor;
  }
}

/* Getal en achtervoegsel blijven op één regel (zie white-space hieronder);
   daardoor zijn alle getallen even hoog en lijnen de bijschriften vanzelf uit. */
.teller-getal {
  font-size: clamp(2.6rem, 6vw, 4.4rem); font-weight: 800; letter-spacing: -0.04em;
  line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap;
  padding-bottom: 0.22em; margin-bottom: -0.22em;
  background: linear-gradient(180deg, var(--text-primary) 0, color-mix(in srgb, var(--text-primary) 55%, transparent) 1em);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.teller p { margin-top: 10px; color: var(--text-secondary); font-size: 0.96rem; }

@media (prefers-reduced-motion: reduce) {
  .cinema { height: auto; }
  .cinema-toneel { position: static; height: auto; padding-block: 10svh; }
  .cinema-tekst { position: static; opacity: 1; transform: none; margin-bottom: 48px; }
  .cinema-beeld { position: static; translate: none; transform: none; opacity: 1; margin-inline: auto; }
  .scrolhint { display: none; }
  .toneel-tekst > div { opacity: 1; transition: none; }
  /* Het beeld wisselt nog wel mee met het tekstblok (dat is een toestand,
     geen beweging), maar zonder overgang en zonder schaal-effect. */
  .toneel-beeld img { transition: none; transform: none; }
  .toneel-balk i { transition: none; }
}

/* Keuzevakje in het formulier, bijvoorbeeld voor een losse module. */
/* Groep met keuzerondjes: fieldset zonder eigen kader, legend als veldlabel. */
.veld--groep { border: 0; padding: 0; margin: 0 0 16px; }
.veld--groep legend {
  display: block; padding: 0; margin-bottom: 10px;
  font-size: 0.86rem; font-weight: 650; color: var(--text-secondary);
}
.veld--groep .veld--keuze + .veld--keuze { margin-top: 10px; }

.veld--keuze {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  align-items: start;
}
.veld--keuze input {
  width: 18px; height: 18px; margin-top: 2px;
  accent-color: var(--brand-gold);
}
.veld--keuze label { font-weight: 500; line-height: 1.45; }
.veld--keuze label .gedempt { display: block; margin-top: 4px; font-size: 0.86rem; }

/* --- 20. Cookiebalk ----------------------------------------------------- */

.cookiebalk {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 300;
  background: var(--surface);
  border-top: 1px solid var(--border-strong);
  box-shadow: 0 -12px 40px -20px rgba(0, 0, 0, 0.5);
  padding: 18px 0;
}
.cookiebalk[hidden] { display: none; }

.cookiebalk-inhoud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 40px);
  flex-wrap: wrap;
}
.cookiebalk p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--text-secondary);
  max-width: 68ch;
}
/* Weigeren en accepteren zijn even makkelijk: zelfde maat, zelfde stijl, naast elkaar.
   Op een smal scherm staan de drie knoppen onder elkaar, alle drie even breed. */
.cookiebalk-knoppen { display: flex; gap: 10px; flex: none; }
.cookiebalk-knoppen .knop { white-space: nowrap; }

@media (max-width: 640px) {
  .cookiebalk-inhoud { flex-direction: column; align-items: stretch; }
  .cookiebalk-knoppen { flex-direction: column; }
  .cookiebalk-knoppen .knop { flex: 1; }
}

/* Knop in de voettekst om de keuze te herzien; leest als een link. */
.voet-knop {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.voet-knop:hover { color: var(--text-primary); }

/* --- Over AureaDesk ----------------------------------------------------- */

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

.overportret img {
  width: 100%;
  /* Zonder height:auto wint het height-attribuut uit de html (720) van
     aspect-ratio, en wordt het portret een meter hoog. */
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-l);
  border: 1px solid var(--border);
  display: block;
}
.overnaam {
  margin-top: 16px;
  font-weight: 600;
  color: var(--text-primary);
}
.overportret .gedempt { margin-top: 2px; font-size: 0.92rem; }

.bedrijfsgegevens {
  margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(28px, 3vw, 36px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
}
.bedrijfsgegevens h3 { margin-bottom: 20px; }
.bedrijfsgegevens dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px 32px;
}
.bedrijfsgegevens dt {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 3px;
}
.bedrijfsgegevens dd { color: var(--text-primary); margin-inline-start: 0; }

@media (max-width: 760px) {
  .overraster { grid-template-columns: 1fr; }
  .overportret { display: flex; align-items: center; gap: 18px; }
  .overportret img { width: 96px; flex: none; }
  .overnaam { margin-top: 0; }
}

/* --- 21. Afdrukken ------------------------------------------------------- */
/* De site is donker, maar browsers drukken achtergronden standaard niet af.
   Zonder deze regels komt witte tekst op wit papier. Bij afdrukken pakken we
   daarom de lichte set terug, ook voor de secties die anders altijd donker zijn. */

@media print {
  :root,
  .vlak--donker {
    color-scheme: light;
    --page-bg: #f9f9f7;
    --surface: #fcfcfb;
    --surface-2: #ffffff;
    --surface-raised: #ffffff;
    --text-primary: #0b0b0b;
    --text-secondary: #52514e;
    --text-muted: #898781;
    --border: rgba(11, 11, 11, 0.10);
    --border-strong: rgba(11, 11, 11, 0.16);
    --accent: #a87900;
    --accent-strong: #7a5a02;
    --accent-soft: #f4e6c2;
    --accent-soft-2: #faf1de;
    --brand-gold: #c09c18;
    --brand-gold-deep: #7a5c0a;
    --shadow-s: 0 1px 2px rgba(11, 11, 11, 0.04), 0 8px 24px -12px rgba(11, 11, 11, 0.10);
    --shadow-l: 0 2px 8px rgba(11, 11, 11, 0.06), 0 40px 80px -30px rgba(11, 11, 11, 0.28);
    --nav-bg: rgba(249, 249, 247, 0.72);
    --shadow-s: none;
    --shadow-l: none;
  }

  body { background: #ffffff; }
  .cookiebalk { display: none; }
}