/* ==========================================================================
   Vormgeving Redactioneel (sinds september 2026 de vormgeving van de site)
   De rust van een luxe magazine: enorme koppen met strakke letterafstand,
   veel zwart om de tekst heen, dunne lijnen als scheiding, kleine gouden
   opschriften, grote cijfers naast een korte regel. Typografie draagt het
   ontwerp; kaders alleen waar een beeld er een nodig heeft.
   Laadt na site.css en overschrijft alleen de visuele laag.
   ========================================================================== */

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

.variant-redactioneel,
.variant-redactioneel .vlak--donker {
  --page-bg: #0c0c0c;
  --surface: #0c0c0c;
  --surface-2: #121211;
  --surface-raised: #171716;
  --text-secondary: #c9c8bd;
  --text-muted: #949289;
  --border: rgba(255, 255, 255, 0.13);
  --border-strong: rgba(255, 255, 255, 0.30);
  --shadow-s: none;
  --shadow-l: none;
  --nav-bg: rgba(12, 12, 12, 0.82);
  --radius: 2px;
  --radius-l: 2px;
  --sectie-y: clamp(72px, 9vw, 128px);

  /* Eigen tokens van deze variant. */
  --goud: #e3b93e;
  --goud-dof: #cfa93a;
  --lijn: rgba(255, 255, 255, 0.13);
  --lijn-sterk: rgba(255, 255, 255, 0.30);
  --lijn-goud: rgba(227, 185, 62, 0.55);
  --kolomrand: clamp(20px, 5vw, 40px);
  /* Linkerrand van de tekstkolom, ook buiten de .omhulsel (openingsblok). */
  --rand: max(var(--kolomrand), calc((100% - var(--breedte)) / 2 + var(--kolomrand)));
}

.variant-redactioneel { background: var(--page-bg); }

/* Fijne korrel over de hele pagina, als papier. Eén keer gerasterd, dus goedkoop. */
.variant-redactioneel::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='k'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23k)'/></svg>");
  background-size: 180px 180px;
}

.variant-redactioneel ::selection { background: var(--goud); color: #1a1400; }

.variant-redactioneel :focus-visible { border-radius: 0; outline-offset: 4px; }

/* --- 2. Typografie ------------------------------------------------------ */

.variant-redactioneel h1,
.variant-redactioneel h2,
.variant-redactioneel h3,
.variant-redactioneel h4 {
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.02;
}

.variant-redactioneel h2,
.variant-redactioneel .h2 {
  font-size: clamp(2.2rem, 4.2vw, 4.2rem);
  letter-spacing: -0.042em;
  line-height: 0.98;
}

.variant-redactioneel h3,
.variant-redactioneel .h3 {
  font-size: clamp(1.25rem, 1.9vw, 1.5rem);
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.variant-redactioneel .lead {
  font-size: clamp(1.08rem, 1.5vw, 1.25rem);
  line-height: 1.55;
  letter-spacing: -0.008em;
  color: var(--text-secondary);
}

/* Opschrift: klein, goud, met een korte gouden haarlijn ervoor. */
.variant-redactioneel .opschrift {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--goud);
  margin-bottom: 28px;
}
.variant-redactioneel .opschrift::before {
  content: "";
  flex: none;
  width: 28px;
  height: 1px;
  background: var(--goud);
}

.variant-redactioneel .zacht { color: var(--text-secondary); }
.variant-redactioneel .gedempt { color: var(--text-muted); }

/* Alles staat links: een magazine centreert niet. Blokken die een
   gecentreerde inline-marge meekregen, komen ook aan de linkerkant te staan. */
.variant-redactioneel .midden { text-align: left; }
.variant-redactioneel .midden .lead { margin-inline: 0; max-width: 62ch; }
.variant-redactioneel .midden .knoprij { justify-content: flex-start; }
.variant-redactioneel .midden[style],
.variant-redactioneel p.midden[style],
.variant-redactioneel #weergaven .omhulsel > div[style] {
  margin-inline: 0 !important;
  text-align: left !important;
}

/* --- 3. Knoppen --------------------------------------------------------- */

.variant-redactioneel .knop {
  border-radius: 2px;
  font-weight: 600;
  font-size: 0.94rem;
  letter-spacing: 0.01em;
  padding: 16px 28px;
}
.variant-redactioneel .knop--klein { padding: 11px 18px; font-size: 0.86rem; }
.variant-redactioneel .knop--rand { border-color: var(--lijn-sterk); }
.variant-redactioneel .knop--rand:hover { border-color: var(--text-primary); background: rgba(255, 255, 255, 0.04); }
.variant-redactioneel .knop--primair:hover { background: var(--accent-strong); }

.variant-redactioneel .pijllink { font-weight: 500; color: var(--text-primary); }
.variant-redactioneel .pijllink::after { color: var(--goud); }

/* --- 4. Menubalk -------------------------------------------------------- */

.variant-redactioneel .navbalk { background: var(--nav-bg); }
.variant-redactioneel .navbalk[data-gescrold="ja"] { border-bottom-color: var(--lijn); }
/* Op een telefoon geen vervagingsfilter achter de menubalk: dat filter wordt
   elk frame opnieuw berekend terwijl het openingsblok eronder beweegt, en dat
   maakte het scrollen schokkerig (1 okt 2026). Een bijna dekkende balk
   oogt hetzelfde. */
@media (max-width: 700px) {
  .variant-redactioneel .navbalk {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(12, 12, 12, 0.96);
  }
}
.variant-redactioneel .nav { height: 68px; }

.variant-redactioneel .merk { font-weight: 600; letter-spacing: 0.01em; }

.variant-redactioneel .navlinks a { color: #b7b6ac; font-weight: 500; }
.variant-redactioneel .navlinks a:hover { color: var(--text-primary); }

.variant-redactioneel .taalkeuze > summary {
  border-radius: 2px;
  background: transparent;
  border-color: var(--lijn-sterk);
}
.variant-redactioneel .taalkeuze-lijst {
  border-radius: 2px;
  background: #141413;
  border-color: var(--lijn-sterk);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.8);
}
.variant-redactioneel .taalkeuze-lijst a { border-radius: 2px; }
.variant-redactioneel .taalkeuze-lijst a[aria-current="true"] { background: rgba(227, 185, 62, 0.12); }

@media (max-width: 1000px) {
  .variant-redactioneel .navbalk[data-open="ja"] .navlinks {
    inset: 68px 0 auto;
    gap: 0;
    padding-top: 8px;
    padding-bottom: 20px;
    border-bottom-color: var(--lijn);
  }
  .variant-redactioneel .navbalk[data-open="ja"] .navlinks li { width: 100%; }
  .variant-redactioneel .navbalk[data-open="ja"] .navlinks a {
    padding: 14px 0;
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    border-top: 1px solid var(--lijn);
  }
}

/* --- 5. Openingsblok ---------------------------------------------------- */

/* De gloed achter het beeld zonder vervagingsfilter: een zacht verloop is genoeg. */
.variant-redactioneel .cinema-toneel::before {
  filter: none;
  width: min(1400px, 96vw);
  background: radial-gradient(closest-side, rgba(227, 185, 62, 0.34), rgba(227, 185, 62, 0.08) 45%, transparent 72%);
  opacity: calc(var(--beeld-op, 0) * 0.42);
}

/* De kop staat links, uitgelijnd op de tekstkolom van de rest van de pagina. */
.variant-redactioneel .cinema-tekst {
  align-items: flex-start;
  text-align: left;
  padding-left: var(--rand);
  padding-right: var(--kolomrand);
}
.variant-redactioneel .cinema-tekst h1 {
  font-size: clamp(2.75rem, 8.4vw, 7.6rem);
  font-weight: 700;
  letter-spacing: -0.052em;
  line-height: 0.94;
  max-width: 14ch;
  margin-bottom: 30px;
}
.variant-redactioneel .cinema-tekst h1::before {
  content: "";
  display: block;
  width: 64px;
  height: 1px;
  background: var(--goud);
  margin-bottom: clamp(24px, 3vw, 40px);
}
.variant-redactioneel .cinema-tekst .lead {
  max-width: 46ch;
  font-size: clamp(1.08rem, 1.55vw, 1.32rem);
  line-height: 1.5;
}
.variant-redactioneel .cinema-tekst .knoprij { justify-content: flex-start; margin-top: 34px; }
.variant-redactioneel .hero-noot {
  margin-top: 30px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--goud-dof);
}

/* Het productbeeld beeldvullend, zonder kader. De randen van de opname
   hebben al het zwart van de pagina; alleen de onderrand, waar het
   dashboard afgesneden is, loopt zacht over. Het beeld zelf blijft heel. */
.variant-redactioneel .cinema-beeld {
  width: min(1600px, 100vw, 158svh);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.variant-redactioneel .cinema-beeld::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 0%, transparent 88%, rgba(12, 12, 12, 0.5) 96%, rgba(12, 12, 12, 0.9) 100%);
}
/* Onderin het toneel een smalle overgang naar het zwart, zodat het beeld
   niet op een harde rand stuit wanneer het openingsblok wegscrolt. */
.variant-redactioneel .cinema-toneel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 96px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(12, 12, 12, 0.85));
}

.variant-redactioneel .scrolhint {
  left: var(--rand);
  translate: 0 0;
  bottom: 30px;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}

/* Op een telefoon vult de telefoonopname het scherm zelf. De opname heeft
   rondom het zwart van de pagina, dus er hoeft niets verhuld te worden;
   alleen de onderrand loopt licht over, zodat de menubalk daaronder niet
   op een harde snede stuit. */
@media (max-width: 700px) {
  .variant-redactioneel .cinema-beeld {
    width: min(100vw, 46svh);
    border-radius: 0;
  }
  .variant-redactioneel .cinema-beeld::after {
    background:
      linear-gradient(180deg, transparent 0%, transparent 92%, rgba(12, 12, 12, 0.6) 100%);
  }
  .variant-redactioneel .cinema-toneel::after { height: 56px; }
}

/* Op een staand tablet stond de tekst precies in het midden en bleef het
   bovenste derde leeg; iets boven het midden leest als een omslag. */
@media (min-width: 701px) and (max-aspect-ratio: 1/1) {
  .variant-redactioneel .cinema-tekst { padding-bottom: 16svh; }
}

/* --- 6. Secties en folio ------------------------------------------------ */

/* Elke sectie opent met een haarlijn en een klein gouden nummer, als de
   folio in een magazine. De lijn staat in de ruimte tussen twee secties. */
.variant-redactioneel { counter-reset: sectie; }

.variant-redactioneel .vlak { padding-top: 0; padding-bottom: var(--sectie-y); }
.variant-redactioneel .vlak.scheiding { border-top: 0; }

.variant-redactioneel .vlak > .omhulsel:first-child::before {
  counter-increment: sectie;
  content: counter(sectie, decimal-leading-zero);
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  font-variant-numeric: tabular-nums;
  color: var(--goud);
  line-height: 1;
  padding: 26px 0 0;
  margin-bottom: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--lijn);
}

/* De kerncijferstrook is geen hoofdstuk: geen nummer, wel de lijn. Die lijn
   blijft, zoals elke andere, binnen de tekstkolom. */
.variant-redactioneel .vlak:has(.tellers) { padding-top: 0; border-top: 0; }
.variant-redactioneel .vlak:has(.tellers) > .omhulsel:first-child::before {
  counter-increment: none;
  content: "";
  padding: 0;
  height: clamp(56px, 7vw, 96px);
  margin-bottom: 0;
}

/* Kop links, tekst rechts: de klassieke spread. Alleen als er rechts ook
   iets staat; een kop die alleen staat, krijgt de hele breedte. De
   linkerkolom is nooit smaller dan het langste woord van de kop, zodat
   een woord nooit halverwege afbreekt. */
@media (min-width: 961px) {
  .variant-redactioneel .vlak .omhulsel > .midden:has(> h2):has(> :not(.opschrift):not(h2)) {
    display: grid;
    grid-template-columns: minmax(min-content, 7fr) minmax(0, 5fr);
    column-gap: clamp(40px, 6vw, 96px);
    row-gap: 0;
    align-items: start;
  }
  .variant-redactioneel .midden:has(> h2) > .opschrift { grid-column: 1 / -1; }
  .variant-redactioneel .midden:has(> h2) > h2 { grid-column: 1; grid-row: 2 / span 8; margin-bottom: 0; }
  .variant-redactioneel .midden:has(> h2) > :not(.opschrift):not(h2) { grid-column: 2; }
  .variant-redactioneel .midden:has(> h2) > .lead:first-of-type { margin-top: 0.35em; }
  .variant-redactioneel .midden:has(> h2) > .termijnkeuze { justify-self: start; }
  .variant-redactioneel .midden:has(> h2) > .termijn-uitleg { margin-inline: 0; }
  /* Een korte kop hangt scheef tegenover een lange rechterkolom; hier is de
     kop daarom twee regels en krijgt de tekstkolom de ruimte (5/7 in plaats
     van 7/5), zodat lead, termijnkeuze en uitleg ademen. */
  .variant-redactioneel #prijzen .midden:has(> h2) {
    grid-template-columns: minmax(min-content, 5fr) minmax(0, 7fr);
  }
  /* min-width: een woord langer dan 6em (fr "Raccordement") breekt anders midden in het woord af (4 okt 2026). */
  .variant-redactioneel #prijzen .midden > h2 { max-width: 6em; min-width: min-content; overflow-wrap: normal; }
}

/* --- 7. Kerncijfers ----------------------------------------------------- */

.variant-redactioneel .tellers {
  text-align: left;
  gap: clamp(28px, 4vw, 56px);
}
.variant-redactioneel .teller {
  border-top: 1px solid var(--lijn);
  padding-top: 22px;
}
.variant-redactioneel .teller-getal {
  font-size: clamp(3.2rem, 5.6vw, 5rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--text-primary);
  padding-bottom: 0;
  margin-bottom: 0;
}
.variant-redactioneel .teller-na {
  font-size: 0.36em;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--goud);
  -webkit-text-fill-color: currentColor;
}
.variant-redactioneel .teller p {
  margin-top: 14px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 24ch;
}
/* Op een tablet passen er drie naast elkaar en blijft het vierde cijfer als
   wees achter; twee bij twee houdt de strook in evenwicht. */
@media (min-width: 621px) and (max-width: 900px) {
  .variant-redactioneel .tellers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Een lang achtervoegsel (en: "languages") past op een tablet net niet in de kolom. */
@media (min-width: 621px) and (max-width: 900px) {
  .variant-redactioneel .teller-na--lang { font-size: 0.3em; }
}
@media (max-width: 620px) {
  .variant-redactioneel .teller-getal { display: block; }
  .variant-redactioneel .teller-na { position: static; margin-left: 0.14em; color: var(--goud); }
}

/* --- 8. Kaartrasters: geen kaders, wel lijnen en nummers ---------------- */

.variant-redactioneel .raster {
  gap: 0 clamp(32px, 4vw, 56px);
  counter-reset: kaart;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
@media (min-width: 1000px) {
  .variant-redactioneel .raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Vier kaarten: twee naast elkaar in plaats van drie plus een wees. */
@media (min-width: 640px) {
  .variant-redactioneel .raster:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.variant-redactioneel .kaart {
  background: none;
  border: 0;
  border-top: 1px solid var(--lijn);
  border-radius: 0;
  padding: 26px 0 40px;
  box-shadow: none;
}
.variant-redactioneel .kaart::before {
  counter-increment: kaart;
  content: counter(kaart, decimal-leading-zero);
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  font-variant-numeric: tabular-nums;
  color: var(--goud);
  margin-bottom: 26px;
}
.variant-redactioneel .kaart:has(.kaart-pictogram)::before { display: none; }
.variant-redactioneel .kaart h3 { font-size: 1.35rem; font-weight: 600; margin-bottom: 12px; }
.variant-redactioneel .kaart p { font-size: 0.98rem; line-height: 1.62; }

.variant-redactioneel .kaart-pictogram {
  display: block;
  place-items: start;
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  color: var(--goud);
  margin-bottom: 24px;
}
.variant-redactioneel .kaart-pictogram svg { width: 26px; height: 26px; }

/* Gestaffeld in beeld komen, rustig. */
.variant-redactioneel .onthul {
  transform: translateY(16px);
  transition-duration: 0.9s, 0.9s;
}
.variant-redactioneel .raster > .onthul:nth-child(2),
.variant-redactioneel .prijsraster > .onthul:nth-child(2),
.variant-redactioneel .artikelraster > .onthul:nth-child(2),
.variant-redactioneel .stappen > .onthul:nth-child(2) { transition-delay: 0.08s; }
.variant-redactioneel .raster > .onthul:nth-child(3),
.variant-redactioneel .prijsraster > .onthul:nth-child(3),
.variant-redactioneel .artikelraster > .onthul:nth-child(3),
.variant-redactioneel .stappen > .onthul:nth-child(3) { transition-delay: 0.16s; }
.variant-redactioneel .raster > .onthul:nth-child(4) { transition-delay: 0.24s; }
.variant-redactioneel .raster > .onthul:nth-child(5) { transition-delay: 0.32s; }
.variant-redactioneel .raster > .onthul:nth-child(6) { transition-delay: 0.40s; }

/* --- 9. De acht weergaven ----------------------------------------------- */

.variant-redactioneel .toneel-nummer {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  color: var(--goud);
}
.variant-redactioneel .toneel-nummer b { color: var(--goud); }
.variant-redactioneel .toneel-naam {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--text-primary);
}
.variant-redactioneel .toneel-balk { height: 1px; background: var(--lijn); border-radius: 0; }
.variant-redactioneel .toneel-balk i { background: var(--goud); }

.variant-redactioneel .toneel-beeld img {
  border-radius: 0;
  border: 0;
  box-shadow: none;
}
/* De opnamen hebben zelf al het zwart van de pagina aan de randen, dus het
   beeld hoeft niet verhuld te worden. Alleen een lichte verzachting in de
   uiterste hoeken, zodat het zonder kader rustig op het zwart ligt; de
   menubalk en de zijkolom van het dashboard blijven leesbaar. */
.variant-redactioneel .toneel-beeld figure::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 72% 72% at 50% 50%, transparent 66%, rgba(12, 12, 12, 0.14) 90%, rgba(12, 12, 12, 0.32) 100%);
}

.variant-redactioneel .toneel-tekst { counter-reset: weergave; }
.variant-redactioneel .toneel-tekst h3 {
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  margin-bottom: 18px;
}
.variant-redactioneel .toneel-tekst p { font-size: 1.02rem; line-height: 1.62; max-width: 44ch; }
.variant-redactioneel .toneel-tekst p strong { color: var(--text-primary); font-weight: 500; font-size: 1.1rem; }

@media (min-width: 901px) {
  .variant-redactioneel .toneel-tekst > div::before {
    counter-increment: weergave;
    content: counter(weergave, decimal-leading-zero);
    display: block;
    width: 44px;
    padding-bottom: 12px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--lijn-goud);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    font-variant-numeric: tabular-nums;
    color: var(--goud);
  }
}

@media (max-width: 900px) {
  .variant-redactioneel .toneel-blokbeeld {
    border-radius: 0;
    border: 1px solid var(--lijn);
    box-shadow: none;
    margin-bottom: 22px;
  }
  .variant-redactioneel .toneel-beeld {
    background: var(--page-bg);
    border-bottom: 1px solid var(--lijn);
    padding: 12px 0 10px;
  }
}

/* --- 10. Beeld in kader ------------------------------------------------- */

.variant-redactioneel .venster {
  border-radius: 0;
  border: 1px solid var(--lijn);
  background: var(--page-bg);
  box-shadow: none;
}
.variant-redactioneel .venster-balk {
  background: transparent;
  border-bottom: 1px solid var(--lijn);
  padding: 10px 14px;
  gap: 6px;
}
.variant-redactioneel .venster-stip { width: 7px; height: 7px; background: var(--lijn-sterk); }
.variant-redactioneel .venster-adres { font-size: 0.72rem; letter-spacing: 0.04em; margin-left: 8px; }
.variant-redactioneel .venster figcaption { border-top: 1px solid var(--lijn); line-height: 1.55; }
.variant-redactioneel .venster figcaption strong { color: var(--text-secondary); font-weight: 600; }

/* --- 11. Kenmerkblokken: kop links, tekst rechts, beeld eronder --------- */

.variant-redactioneel .kenmerk--gestapeld { gap: clamp(32px, 5vw, 64px); }
.variant-redactioneel .kenmerk--gestapeld .kenmerk-tekst { max-width: none; }
.variant-redactioneel .kenmerk + .kenmerk {
  margin-top: clamp(64px, 8vw, 112px);
  padding-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--lijn);
}

.variant-redactioneel .kenmerk-tekst h3 {
  font-size: clamp(1.8rem, 3.2vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.0;
  margin-bottom: 20px;
}
.variant-redactioneel .kenmerk-tekst .lead { font-size: 1.1rem; line-height: 1.6; margin-bottom: 22px; }

@media (min-width: 961px) {
  .variant-redactioneel .kenmerk--gestapeld .kenmerk-tekst {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(40px, 6vw, 96px);
    row-gap: 0;
    align-items: start;
  }
  .variant-redactioneel .kenmerk--gestapeld .kenmerk-tekst > .opschrift { grid-column: 1 / -1; }
  .variant-redactioneel .kenmerk--gestapeld .kenmerk-tekst > h3 { grid-column: 1; grid-row: 2 / span 12; margin-bottom: 0; }
  .variant-redactioneel .kenmerk--gestapeld .kenmerk-tekst > :not(.opschrift):not(h3) { grid-column: 2; }
  .variant-redactioneel .kenmerk--gestapeld .kenmerk-tekst > .lead:first-of-type { margin-top: 0.3em; }
}

/* Vinklijst als geregelde rijen met een gouden streepje. */
.variant-redactioneel .vinklijst { gap: 0; }
.variant-redactioneel .vinklijst li {
  grid-template-columns: 26px 1fr;
  gap: 8px;
  padding: 13px 0;
  border-top: 1px solid var(--lijn);
  font-size: 0.98rem;
  line-height: 1.58;
}
.variant-redactioneel .vinklijst li:last-child { border-bottom: 1px solid var(--lijn); }
.variant-redactioneel .vinklijst li::before {
  content: "";
  width: 14px;
  height: 1px;
  background: var(--goud);
  margin-top: 0.78em;
}
.variant-redactioneel .vinklijst li strong { font-weight: 600; }

.variant-redactioneel .tweeluik { gap: clamp(16px, 2vw, 28px); }

/* Het kleine menubeeld bij het Wallboard staat links, zoals alles op de pagina. */
.variant-redactioneel #wallboard .venster[style*="max-width"] { margin-inline: 0 !important; }

/* --- 12. Telefoons ------------------------------------------------------ */

.variant-redactioneel .telefoons { justify-content: flex-start; gap: clamp(20px, 3vw, 48px); }
.variant-redactioneel .telefoon { text-align: left; }
.variant-redactioneel .telefoon img {
  border-radius: 22px;
  border: 1px solid var(--lijn-sterk);
  box-shadow: none;
}
.variant-redactioneel .telefoon figcaption {
  margin-top: 14px;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--goud);
  font-weight: 600;
}

/* --- 13. Stappen -------------------------------------------------------- */

.variant-redactioneel .stappen { gap: clamp(28px, 4vw, 56px); }
.variant-redactioneel .stap {
  border-top: 1px solid var(--lijn);
  padding-top: 24px;
}
.variant-redactioneel .stap::before {
  display: block;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: var(--goud);
  font-size: clamp(2.6rem, 3.4vw, 3.4rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: 26px;
}
.variant-redactioneel .stap h3 { font-size: 1.3rem; margin-bottom: 10px; }
.variant-redactioneel .stap p { line-height: 1.62; }

.variant-redactioneel .prijs-voet {
  text-align: left;
  max-width: 78ch;
  font-size: 0.92rem;
  line-height: 1.6;
}

/* --- 14. Prijzen: kolommen met lijnen, prijs als groot cijfer ----------- */

.variant-redactioneel .termijnkeuze {
  border-radius: 2px;
  background: transparent;
  border-color: var(--lijn-sterk);
  padding: 3px;
  margin-top: 26px;
}
.variant-redactioneel .termijnkeuze button { border-radius: 2px; font-weight: 600; }
.variant-redactioneel .termijnkeuze button[aria-pressed="true"] {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}
.variant-redactioneel .termijn-uitleg { margin-top: 20px; font-size: 0.96rem; }
.variant-redactioneel .termijn-uitleg strong { color: var(--goud); }

.variant-redactioneel .prijsraster { gap: 0; }

.variant-redactioneel .prijskaart {
  background: none;
  border: 0;
  border-top: 1px solid var(--lijn);
  border-radius: 0;
  padding: 44px 28px 0 0;
  box-shadow: none;
}
.variant-redactioneel .prijskaart--uitgelicht { border-top-color: var(--goud); }

@media (min-width: 901px) {
  .variant-redactioneel .prijskaart + .prijskaart { border-left: 1px solid var(--lijn); padding-left: 28px; }
  .variant-redactioneel .prijskaart + .prijskaart .prijslabel { left: 28px; }
  .variant-redactioneel .prijskaart:last-child { padding-right: 0; }
}
@media (max-width: 900px) {
  .variant-redactioneel .prijsraster { max-width: 560px; margin-inline: 0; }
  .variant-redactioneel .prijskaart { padding-right: 0; }
  .variant-redactioneel .prijskaart + .prijskaart { margin-top: 40px; }
}

.variant-redactioneel .prijslabel {
  top: 16px;
  left: 0;
  transform: none;
  background: none;
  color: var(--goud);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  padding: 0;
  border-radius: 0;
}

.variant-redactioneel .prijskaart h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: 0; margin-bottom: 8px; }
.variant-redactioneel .prijskaart .prijs-sub { font-size: 0.92rem; line-height: 1.5; margin-bottom: 26px; }

.variant-redactioneel .prijs { gap: 10px; margin-bottom: 6px; }
.variant-redactioneel .prijs-bedrag {
  font-size: clamp(2.8rem, 3.8vw, 3.6rem);
  font-weight: 500;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}
.variant-redactioneel .prijs-eenheid { font-size: 0.82rem; letter-spacing: 0.06em; color: var(--goud-dof); white-space: nowrap; } /* 4 okt 2026: "pro Monat" brak af naast 1.200 € */
.variant-redactioneel .prijs-noot { font-size: 0.82rem; margin-bottom: 26px; }
.variant-redactioneel .prijskaart .knop { margin-bottom: 30px; }

.variant-redactioneel .modulelijst { gap: 0; font-size: 0.93rem; }
.variant-redactioneel .modulelijst li { padding: 9px 0; border-top: 1px solid var(--lijn); }
.variant-redactioneel .modulelijst .aan svg { color: var(--goud); }
.variant-redactioneel .modulelijst .taal svg { color: var(--goud); }
.variant-redactioneel .modulelijst .extra svg { color: var(--goud); }
.variant-redactioneel .modulelijst .omgeving svg { color: var(--goud); }
.variant-redactioneel .modulelijst .server svg, .variant-redactioneel .modulelijst .pluspunt svg, .variant-redactioneel .modulelijst .basis svg { color: var(--goud); }
/* Niet inbegrepen: gedempt maar leesbaar (ruim 4,5:1); het kruisje en de
   kleur maken het verschil, niet een halfdoorzichtige regel. */
.variant-redactioneel .modulelijst .uit { opacity: 1; color: var(--text-muted); }
.variant-redactioneel .modulelijst .uit svg { color: rgba(255, 255, 255, 0.42); }
.variant-redactioneel .modulelijst .bij { margin-top: 0; padding-top: 14px; border-top: 1px solid var(--lijn-goud); }

.variant-redactioneel .pakketbalk {
  margin-top: clamp(48px, 6vw, 80px);
  background: none;
  border: 0;
  border-top: 1px solid var(--lijn);
  border-radius: 0;
  box-shadow: none;
  padding: 36px 0 0;
  gap: 48px;
}
.variant-redactioneel .pakketbalk-tekst h3 { font-size: clamp(1.6rem, 2.4vw, 2.2rem); letter-spacing: -0.035em; margin-bottom: 12px; }
.variant-redactioneel .pakketbalk-actie { border-left-color: var(--lijn); padding-left: 48px; }
.variant-redactioneel .pakketbalk-prijs { font-weight: 500; font-size: 1.7rem; letter-spacing: -0.04em; }
/* Enterprise met vast bedrag (4 okt 2026): maand/jaar-wissel als de kaarten, toevoegingen eronder. */
/* Tweede label in een veld (Extra TOPdesk-omgevingen, 4 okt 2026). */
.formulier .label-onder { display: block; margin-top: 12px; }
#omgevingen-rij select { margin-top: 6px; }
/* Grensregel onder de lijst van Pro (4 okt 2026): zonder icoon, over de volle breedte van de regel. */
/* Kop boven de toelichting onder de prijsblokken (4 okt 2026): hoort bij alle pakketten. */
.variant-redactioneel .pakket-toelichting, :where(.hp-product) .pakket-toelichting { max-width: 58ch; margin: 40px 0 0; font-size: 0.96rem; }   /* links uitgelijnd (6 okt 2026) */
.variant-redactioneel .pakket-toelichting-kop, :where(.hp-product) .pakket-toelichting-kop { margin: 0 0 8px; font-size: 1.05rem; font-weight: 600; letter-spacing: 0; }
.variant-redactioneel .pakket-toelichting .termijn-uitleg, :where(.hp-product) .pakket-toelichting .termijn-uitleg { max-width: none; margin: 0; font-size: inherit; }
.variant-redactioneel .modulelijst .grens { display: block; color: var(--text-muted); font-size: 0.86rem; line-height: 1.5; }
.variant-redactioneel .modulelijst .grens span { display: block; }
:where(.hp-product) .pakket-grens { margin: 14px 0 0; font-size: 0.86rem; line-height: 1.5; color: var(--text-muted); }
@media (max-width: 860px) {
  .variant-redactioneel .pakketbalk { padding: 28px 0 0; gap: 24px; }
  .variant-redactioneel .pakketbalk-actie { border-top-color: var(--lijn); padding-left: 0; }
}

.variant-redactioneel .waarde {
  margin-top: clamp(48px, 6vw, 80px);
  padding: 36px 0 0;
  border: 0;
  border-top: 1px solid var(--lijn);
  border-radius: 0;
  background: none;
}
.variant-redactioneel .waarde > h3 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); letter-spacing: -0.035em; margin-bottom: 14px; }
.variant-redactioneel .waarde-raster { margin-top: 32px; gap: 28px clamp(24px, 3vw, 40px); }
.variant-redactioneel .waarde-actie, :where(.hp-product) .hp-terugverdienen-actie { margin: 12px 0 0; }
.variant-redactioneel .waarde-raster > div { border-top: 1px solid var(--lijn); padding-top: 18px; }
.variant-redactioneel .waarde-raster h4 {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--goud);
  margin-bottom: 12px;
}
.variant-redactioneel .waarde-raster p { line-height: 1.6; }

/* --- 15. Veelgestelde vragen ------------------------------------------- */

/* Dezelfde kolom als de rest van de pagina: folio, lijn en kop staan links
   op de tekstrand. Op een breed scherm staat de kop in de linkerkolom en
   lopen de vragen rechts, als een spread; de kop blijft in beeld zolang de
   lijst scrolt. */
.variant-redactioneel #vragen .omhulsel--smal { max-width: var(--breedte); }
@media (min-width: 961px) {
  .variant-redactioneel #vragen .omhulsel {
    display: grid;
    grid-template-columns: minmax(min-content, 5fr) minmax(0, 7fr);
    column-gap: clamp(40px, 6vw, 96px);
    row-gap: 0;
    align-items: start;
  }
  .variant-redactioneel #vragen .omhulsel::before { grid-column: 1 / -1; }
  .variant-redactioneel #vragen .midden { grid-column: 1; align-self: stretch; margin-bottom: 0 !important; }
  .variant-redactioneel #vragen .midden h2 { position: sticky; top: 108px; margin-top: -0.06em; }
  .variant-redactioneel #vragen .vragen { grid-column: 2; }
}

.variant-redactioneel .vragen { border-top: 1px solid var(--lijn); counter-reset: vraag; }
.variant-redactioneel .vraag { border-bottom-color: var(--lijn); }
.variant-redactioneel .vraag summary {
  justify-content: flex-start;
  align-items: flex-start;
  gap: 22px;
  padding: 26px 0;
  font-size: 1.18rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.variant-redactioneel .vraag summary::before {
  counter-increment: vraag;
  content: counter(vraag, decimal-leading-zero);
  flex: none;
  width: 34px;
  margin-top: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  font-variant-numeric: tabular-nums;
  color: var(--goud);
}
.variant-redactioneel .vraag summary::after {
  margin-left: auto;
  margin-top: 3px;
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--goud);
}
.variant-redactioneel .vraag summary:hover { color: var(--goud); }
.variant-redactioneel .vraag-antwoord { padding: 0 0 30px 56px; line-height: 1.65; }
@media (max-width: 600px) {
  .variant-redactioneel .vraag summary { gap: 14px; font-size: 1.06rem; }
  .variant-redactioneel .vraag summary::before { width: 26px; }
  .variant-redactioneel .vraag-antwoord { padding-left: 0; }
}

/* --- 16. Inzichten ------------------------------------------------------ */

.variant-redactioneel .artikelraster { gap: 0 clamp(32px, 4vw, 56px); }
.variant-redactioneel .artikelkaart {
  background: none;
  border: 0;
  border-top: 1px solid var(--lijn);
  border-radius: 0;
  padding: 26px 0 36px;
  box-shadow: none;
  transition: border-color 0.25s ease;
}
.variant-redactioneel .artikelkaart:hover { transform: none; box-shadow: none; border-top-color: var(--goud); }
.variant-redactioneel .artikelkaart .artikel-meta { font-size: 0.7rem; letter-spacing: 0.22em; margin-bottom: 22px; }
.variant-redactioneel .artikelkaart h3 { font-size: 1.4rem; margin-bottom: 12px; }
.variant-redactioneel .artikelkaart p { line-height: 1.6; }

/* --- 17. Demo aanvragen ------------------------------------------------- */

.variant-redactioneel .contactraster { gap: clamp(48px, 6vw, 96px); }
.variant-redactioneel #demo h2 { font-size: clamp(2rem, 3.6vw, 3.2rem); }

.variant-redactioneel .contactkanaal { border-bottom-color: var(--lijn); padding: 20px 0; }
.variant-redactioneel .contactkanaal:first-of-type { border-top: 1px solid var(--lijn); }
.variant-redactioneel .contactkanaal:last-of-type { border-bottom: 1px solid var(--lijn); }
.variant-redactioneel .contactkanaal svg { color: var(--goud); width: 18px; height: 18px; }
.variant-redactioneel .contactkanaal .kanaal-label { font-size: 0.68rem; letter-spacing: 0.2em; color: var(--goud); margin-bottom: 4px; }
.variant-redactioneel .contactkanaal a,
.variant-redactioneel .contactkanaal span { font-weight: 500; }

/* Het formulier zonder kader. Elk veld is een licht vlak met een onderlijn:
   duidelijk een invoerveld, maar zonder de ronde kaders van de basis. */
.variant-redactioneel .formulier {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.variant-redactioneel .veldrij { gap: 0 32px; }
.variant-redactioneel .veld { margin-bottom: 24px; }
.variant-redactioneel .veld label,
.variant-redactioneel .veld--groep legend {
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.variant-redactioneel .veld label .gedempt { font-size: inherit; font-weight: 500; letter-spacing: inherit; }
.variant-redactioneel .veld input:not([type="radio"]):not([type="checkbox"]),
.variant-redactioneel .veld textarea,
.variant-redactioneel .veld select {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid transparent;
  border-bottom: 1px solid var(--lijn-sterk);
  border-radius: 2px 2px 0 0;
  padding: 13px 14px;
  font-size: 1.02rem;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.variant-redactioneel .veld textarea {
  margin-top: 0;
  min-height: 116px;
}
.variant-redactioneel .veld input:not([type="radio"]):not([type="checkbox"]):hover,
.variant-redactioneel .veld textarea:hover,
.variant-redactioneel .veld select:hover { background: rgba(255, 255, 255, 0.07); }
.variant-redactioneel .veld input:not([type="radio"]):not([type="checkbox"]):focus,
.variant-redactioneel .veld textarea:focus,
.variant-redactioneel .veld select:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.07);
  border-color: transparent;
  border-bottom-color: var(--goud);
  box-shadow: 0 1px 0 0 var(--goud);
}
.variant-redactioneel .veld--groep { margin: 6px 0 24px; }
.variant-redactioneel .veld--groep legend { margin-bottom: 14px; }
.variant-redactioneel .veld--keuze label { font-weight: 400; letter-spacing: 0; font-size: 0.98rem; color: var(--text-secondary); }
.variant-redactioneel .veld.veld--keuze label { font-size: 0.98rem; letter-spacing: 0; font-weight: 400; color: var(--text-secondary); }
.variant-redactioneel .formulier .knop { margin-top: 12px; }
.variant-redactioneel .formulier-noot { text-align: left; margin-top: 18px; line-height: 1.6; }
.variant-redactioneel .melding { border-radius: 0; }

/* --- 18. Voettekst ------------------------------------------------------ */

.variant-redactioneel .voet {
  border-top: 1px solid var(--lijn);
  padding-block: clamp(56px, 7vw, 96px) 36px;
}
.variant-redactioneel .voetraster { margin-bottom: clamp(48px, 6vw, 80px); }
.variant-redactioneel .voet h4 {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  color: var(--goud);
  margin-bottom: 18px;
}
.variant-redactioneel .voetlijst { gap: 10px; }
.variant-redactioneel .voetlijst a { color: var(--text-secondary); }
.variant-redactioneel .voet-intro { margin-top: 18px; line-height: 1.6; }
.variant-redactioneel .voet-adres img { border-radius: 0; border-color: var(--lijn-sterk); }
.variant-redactioneel .voet-onder { border-top-color: var(--lijn); padding-top: 24px; font-size: 0.8rem; letter-spacing: 0.01em; }

/* --- 19. Cookiebalk ----------------------------------------------------- */

/* Gelaagde banner (25 sept 2026, besluit via de juridische sessie): kop, uitleg,
   categorieën en drie gelijkwaardige knoppen. Geen sluitknop: de banner gaat
   alleen weg na een keuze. Weigeren, alleen statistieken en accepteren hebben
   dezelfde maat en stijl. Compact ("kan het niet kleiner"): op brede
   schermen een lage balk met drie kolommen, op smalle schermen kleinere tekst. */
.variant-redactioneel .cookiebalk {
  inset: auto 0 0 0;
  padding: 0 12px 12px;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.variant-redactioneel .cookiepaneel {
  max-width: 1180px;
  margin: 0 auto;
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  padding: 16px 20px;
  background: #111110;
  border: 1px solid var(--lijn-sterk);
  border-radius: 12px;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.85);
}
.variant-redactioneel .cookie-kop {
  margin: 0 0 2px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--goud);
}
.variant-redactioneel .cookie-subkop {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
}
.variant-redactioneel .cookie-uitleg p,
.variant-redactioneel .cookie-uitleg li {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.variant-redactioneel .cookie-uitleg p { margin: 0 0 6px; max-width: none; }
.variant-redactioneel .cookie-uitleg strong { color: var(--text-primary); font-weight: 600; }
.variant-redactioneel .cookie-uitleg a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; }
.variant-redactioneel .cookie-categorieen { margin: 0 0 6px; padding: 0; list-style: none; }
.variant-redactioneel .cookie-categorieen li { position: relative; margin: 0 0 3px; padding-left: 14px; }
.variant-redactioneel .cookie-categorieen li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0.72em;
  width: 6px;
  height: 1px;
  background: var(--goud);
}
.variant-redactioneel .cookiepaneel .cookiebalk-knoppen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.variant-redactioneel .cookiepaneel .cookiebalk-knoppen .knop {
  width: 100%;
  padding: 9px 8px;
  font-size: 0.82rem;
  white-space: normal;
  text-align: center;
  line-height: 1.2;
}
/* Breed scherm: kop en inleiding links, categorieën en slot in het midden,
   de knoppen rechts onder elkaar. */
@media (min-width: 1000px) {
  .variant-redactioneel .cookiepaneel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 188px;
    grid-template-rows: auto auto 1fr;
    column-gap: 28px;
    align-items: start;
    padding: 18px 22px;
  }
  .variant-redactioneel .cookie-kop { grid-column: 1; grid-row: 1; }
  .variant-redactioneel .cookie-subkop { grid-column: 1; grid-row: 2; }
  .variant-redactioneel .cookie-uitleg {
    grid-column: 1; grid-row: 3;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 28px;
  }
  .variant-redactioneel .cookie-uitleg > p:first-child { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
  .variant-redactioneel .cookie-uitleg > .cookie-categorieen { grid-column: 2; grid-row: 1; }
  .variant-redactioneel .cookie-uitleg > p:last-child { grid-column: 2; grid-row: 2; margin: 0; }
  .variant-redactioneel .cookiepaneel .cookiebalk-knoppen {
    grid-column: 2; grid-row: 1 / span 3;
    grid-template-columns: 1fr;
    align-self: center;
    margin-top: 0;
  }
}
@media (max-width: 440px) {
  .variant-redactioneel .cookiebalk { padding: 0 8px 8px; }
  .variant-redactioneel .cookiepaneel { padding: 14px 14px 12px; }
  .variant-redactioneel .cookiepaneel .cookiebalk-knoppen .knop { padding: 8px 4px; font-size: 0.78rem; }
}

/* --- 20. Minder beweging ------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .variant-redactioneel .onthul { transition: none; transition-delay: 0s; transform: none; }
  .variant-redactioneel .artikelkaart,
  .variant-redactioneel .veld input:not([type="radio"]):not([type="checkbox"]),
  .variant-redactioneel .veld textarea,
  .variant-redactioneel .veld select { transition: none; }
  /* Het openingsblok staat dan stil in de stroom; geen extra ruimte eronder.
     Het beeld wordt daar niet afgesneden, dus ook de onderrand loopt niet over. */
  .variant-redactioneel .cinema-tekst { padding-bottom: 0; }
  .variant-redactioneel .cinema-beeld::after,
  .variant-redactioneel .cinema-toneel::after { display: none; }
}

/* --- 16. Korte homepage met subpagina's (23 sept) ----------------------- */

/* Geen nummering meer: niet per hoofdstuk, niet per kaart, niet per vraag.
   De haarlijn boven elke sectie blijft. */
.variant-redactioneel .vlak > .omhulsel:first-child::before {
  content: "";
  counter-increment: none;
  padding: 0;
  height: 0;
  margin-bottom: clamp(48px, 6vw, 80px);
}
.variant-redactioneel .kaart::before { display: none; }
.variant-redactioneel .vraag summary::before { display: none; }
.variant-redactioneel .vraag summary { gap: 16px; }

/* Prijzen als blokken, zoals op de huidige site: paneel met rand, ronde
   hoeken en het gouden label bovenop. De typografie blijft die van deze variant. */
.variant-redactioneel .prijsraster { gap: 20px; }
.variant-redactioneel .prijskaart,
.variant-redactioneel .prijskaart + .prijskaart {
  background: #141413;
  border: 1px solid var(--lijn-sterk);
  border-radius: 22px;
  padding: 32px 28px;
  margin-top: 0;
  box-shadow: none;
}
.variant-redactioneel .prijskaart--uitgelicht { border-color: var(--goud); }
.variant-redactioneel .prijslabel {
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--goud);
  color: #1a1400;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 5px 13px;
  border-radius: 999px;
}
.variant-redactioneel .prijskaart .knop { width: 100%; }
.variant-redactioneel .modulelijst li:first-child { border-top: 0; }
@media (max-width: 900px) {
  .variant-redactioneel .prijsraster { max-width: 560px; margin-inline: auto; }
  .variant-redactioneel .prijskaart + .prijskaart { margin-top: 0; }
}

/* Tegels: de belangrijkste onderdelen bovenaan de homepage, elk met een
   beeld, een kop en een regel. Lijn erboven, geen kader. */
.variant-redactioneel .tegels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 0 clamp(28px, 4vw, 56px);
}
@media (min-width: 1000px) {
  .variant-redactioneel .tegels { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.variant-redactioneel .tegel {
  display: block;
  border-top: 1px solid var(--lijn);
  padding: 22px 0 40px;
  color: inherit;
  text-decoration: none;
}
.variant-redactioneel .tegel img,
.variant-redactioneel .tegel-leeg {
  display: block;
  width: 100%;
  height: auto;          /* de hoogte komt uit de verhouding, niet uit het height-attribuut */
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: left top;
  border: 1px solid var(--lijn);
  border-radius: 2px;
  background: #000;
  margin-bottom: 18px;
  transition: border-color .25s ease;
}
.variant-redactioneel .tegel-leeg {
  background:
    linear-gradient(135deg, rgba(227, 185, 62, 0.16), transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 22px, rgba(255, 255, 255, 0.05) 22px 23px),
    #0f0f0e;
}
.variant-redactioneel .tegel strong {
  display: block;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-bottom: 8px;
  transition: color .2s ease;
}
.variant-redactioneel .tegel-tekst > span { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.55; }
.variant-redactioneel .tegel:hover strong,
.variant-redactioneel .tegel:focus-visible strong { color: var(--goud); }
.variant-redactioneel .tegel:hover img,
.variant-redactioneel .tegel:hover .tegel-leeg { border-color: var(--lijn-goud); }
.variant-redactioneel .alle-onderdelen {
  border-top: 1px solid var(--lijn);
  padding-top: 18px;
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--text-muted);
  max-width: none;
}
.variant-redactioneel .alle-onderdelen a { color: var(--text-secondary); text-decoration: none; border-bottom: 1px solid var(--lijn-sterk); }
.variant-redactioneel .alle-onderdelen a:hover { color: var(--goud); border-bottom-color: var(--goud); }

/* Subpagina's: kruimelpad bovenaan, verder-blok onderaan. */
.variant-redactioneel #pagina-kop { padding-top: 28px; padding-bottom: 0; }
.variant-redactioneel #pagina-kop > .omhulsel:first-child::before { display: none; }
.variant-redactioneel .kruimel {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 clamp(40px, 5vw, 64px);
}
.variant-redactioneel .kruimel a { color: var(--goud); text-decoration: none; }
.variant-redactioneel .kruimel span { margin: 0 8px; }
.variant-redactioneel #verder { padding-bottom: clamp(48px, 6vw, 80px); }
.variant-redactioneel .verder {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}
.variant-redactioneel .verder a {
  display: block;
  color: var(--text-primary);
  text-decoration: none;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.variant-redactioneel .verder a .opschrift { display: block; margin-bottom: 6px; }
.variant-redactioneel .verder-volgende { text-align: right; margin-left: auto; }
.variant-redactioneel .verder a:hover { color: var(--goud); }
@media (max-width: 560px) {
  .variant-redactioneel .verder { flex-direction: column; }
  .variant-redactioneel .verder-volgende { text-align: left; margin-left: 0; }
}

/* Voettekst: de langere lijst met onderdelen mag nooit de pagina verbreden;
   een lang woord (Behandelaarslicentiebeheer) breekt op een smal scherm. */
.variant-redactioneel .voetraster > * { min-width: 0; }
.variant-redactioneel .voetlijst li,
.variant-redactioneel .alle-onderdelen { overflow-wrap: anywhere; }
/* Het gouden label hoort in het midden van het blok, ook op het tweede en derde blok. */
@media (min-width: 901px) {
  .variant-redactioneel .prijskaart + .prijskaart .prijslabel { left: 50%; }
}
/* Ook de acht weergaven zonder eigen nummer per blok; de voortgang "01 / 08"
   van de site zelf blijft. */
.variant-redactioneel .toneel-tekst > div::before { display: none; }

/* Verkorte prijsstrook op de homepage: per pakket een regel met naam, wat
   erin zit en het maandbedrag; de volledige pakketten staan op de prijspagina. */
.variant-redactioneel .prijsstrook { border-top: 1px solid var(--lijn-sterk); }
.variant-redactioneel .prijsregel {
  display: grid;
  /* vaste kolommen, gelijk voor elke regel: naam, omschrijving, bedrag */
  grid-template-columns: minmax(0, 4fr) minmax(0, 9fr) minmax(0, 4fr);
  column-gap: clamp(20px, 3vw, 48px);
  align-items: baseline;
  padding: 22px 0;
  border-bottom: 1px solid var(--lijn);
  color: inherit;
  text-decoration: none;
}
.variant-redactioneel .prijsregel-naam { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; transition: color .2s ease; }
.variant-redactioneel .prijsregel-sub { color: var(--text-secondary); font-size: 0.96rem; line-height: 1.55; }
.variant-redactioneel .prijsregel-bedrag {
  font-size: 1.55rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  white-space: normal;
  text-align: right;
}
.variant-redactioneel .prijsregel-bedrag small { white-space: nowrap; }
/* Enterprise: de uitleg bij het bedrag op een eigen regel eronder. */
.variant-redactioneel .prijsregel--enterprise .prijsregel-bedrag small { display: block; margin-top: 6px; letter-spacing: 0.04em; }
.variant-redactioneel .prijsregel-bedrag small { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; color: var(--goud-dof); }
.variant-redactioneel .prijsregel:hover .prijsregel-naam,
.variant-redactioneel .prijsregel:focus-visible .prijsregel-naam { color: var(--goud); }
@media (max-width: 760px) {
  /* Op een telefoon: naam links en bedrag rechts op een regel, de omschrijving eronder. */
  .variant-redactioneel .prijsregel { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; align-items: baseline; }
  .variant-redactioneel .prijsregel-naam { grid-column: 1; grid-row: 1; }
  .variant-redactioneel .prijsregel-bedrag { grid-column: 2; grid-row: 1; font-size: 1.35rem; }
  .variant-redactioneel .prijsregel-sub { grid-column: 1 / -1; grid-row: 2; }
}

/* Tegels zonder productbeeld krijgen een lijntekening in goud op een donker
   vlak, in dezelfde verhouding als de beelden ernaast. */
.variant-redactioneel .tegel-beeld {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--lijn);
  border-radius: 2px;
  margin-bottom: 18px;
  color: var(--goud);
  /* effen donker vlak met een zachte gouden gloed achter het teken; geen strepen */
  background:
    radial-gradient(60% 70% at 50% 50%, rgba(227, 185, 62, 0.16), transparent 70%),
    #111110;
  transition: border-color .25s ease;
}
.variant-redactioneel .tegel-beeld svg { width: 62%; height: auto; filter: drop-shadow(0 0 10px rgba(227, 185, 62, 0.35)); }
.variant-redactioneel .tegel:hover .tegel-beeld { border-color: var(--lijn-goud); }
.variant-redactioneel .tegels--drie .tegel-beeld { aspect-ratio: 16 / 7; }
.variant-redactioneel .tegels--drie .tegel-beeld svg { width: 50%; }

/* Drie prijsblokken naast elkaar: Standaard, Pro en Enterprise (Starter vervallen 5 okt 2026). */
/* Vier naast elkaar alleen als er ruimte is; daaronder twee, op telefoons een.
   Het bedrag krijgt in vier kolommen een kleinere maat, zodat ook het
   jaarbedrag (bijvoorbeeld 1.698,60) in de kolom past. */
.variant-redactioneel .prijskaart { min-width: 0; }
.variant-redactioneel .prijs-bedrag { white-space: nowrap; }
.variant-redactioneel .prijs-noot { overflow-wrap: anywhere; }
@media (min-width: 1280px) {
  .variant-redactioneel .prijsraster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .variant-redactioneel .prijskaart, .variant-redactioneel .prijskaart + .prijskaart { padding: 28px 22px; }
  .variant-redactioneel .prijs-bedrag,
  .variant-redactioneel .prijskaart--enterprise .prijs-bedrag { font-size: clamp(1.7rem, 2.2vw, 2.4rem); }
  .variant-redactioneel .prijs { flex-wrap: nowrap; }
  /* Het bedrag schaalt mee met de breedte van het blok, zodat bedrag en eenheid
     (bijvoorbeeld 1.698,60 p/jaar) altijd samen op een regel passen. */
  @supports (container-type: inline-size) {
    /* Op .prijs, niet op de kaart: een container op de kaart zet de gedeelde
       rijen (subgrid) uit, en dan smeert Enterprise zijn inhoud over de hoogte uit. */
    .variant-redactioneel .prijskaart .prijs { container-type: inline-size; }
    .variant-redactioneel .prijs-bedrag,
    .variant-redactioneel .prijskaart--enterprise .prijs-bedrag { font-size: min(2.4rem, 12.5cqi); }
  }
  /* Grotere bedragen (24 sept 2026), met "p/mnd" of "p/jaar" erachter.
     Per maand zijn de bedragen kort en staan ze groot; per jaar zijn ze langer
     (1.698,60) en krijgen ze een kleinere maat, zodat bedrag en eenheid samen
     op een regel blijven (site.js zet data-termijn op de pagina). */
  .variant-redactioneel .prijs-bedrag { font-size: 2.75rem; }
  :root[data-termijn="jaar"] .variant-redactioneel .prijs-bedrag:not(.prijs-bedrag--tekst) { font-size: 1.9rem; }
  @supports (container-type: inline-size) {
    .variant-redactioneel .prijs-bedrag,
    .variant-redactioneel .prijskaart--enterprise .prijs-bedrag { font-size: min(2.75rem, 19.5cqi); }
  }
}
@media (min-width: 701px) and (max-width: 1279px) {
  .variant-redactioneel .prijsraster { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
}
.variant-redactioneel .prijs-noot--onder { margin: 18px 0 0; font-size: 0.82rem; line-height: 1.55; color: var(--text-muted); }
.variant-redactioneel .prijs-vanaf { font-size: 0.95rem; font-weight: 500; color: var(--text-secondary); letter-spacing: 0; }
.variant-redactioneel .prijskaart--enterprise .prijs-noot { line-height: 1.5; }

/* --- 17. Subpagina's: kruimelpad met de paginanaam als kop --------------- */
.variant-redactioneel .kruimel h1 {
  display: inline;
  font: inherit;
  letter-spacing: inherit;
  color: var(--text-secondary);
  margin: 0;
}
/* Per jaar zijn de bedragen langer (1.698,60): op elke breedte schaalt het
   bedrag mee met het blok, zodat "p/jaar" erachter past (site.js zet
   data-termijn op de pagina; 24 sept 2026). */
@supports (container-type: inline-size) {
  .variant-redactioneel .prijskaart .prijs { container-type: inline-size; }
  :root[data-termijn="jaar"] .variant-redactioneel .prijs-bedrag:not(.prijs-bedrag--tekst) { font-size: min(2.8rem, 14cqi); }
}
/* Bij "per jaar" staat bij Enterprise "Op aanvraag" in plaats van een bedrag. */
.variant-redactioneel .prijskaart .prijs-bedrag.prijs-bedrag--tekst { font-size: clamp(1.3rem, 1.6vw, 1.6rem); letter-spacing: -0.02em; white-space: normal; }

/* --- 18. Pagina Weergaven en de knoppen onderaan naar de andere pagina's
   (23 sept) ------------------------------------------------------------- */

.variant-redactioneel #verder .opschrift { margin-bottom: 18px; }
.variant-redactioneel .verder-knoppen {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.variant-redactioneel .verder-knop {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 22px;
  border: 1px solid var(--lijn-sterk); border-radius: var(--radius);
  background: #141413;
  color: var(--text-primary); text-decoration: none;
  font-size: 1.08rem; font-weight: 600; letter-spacing: -0.015em;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.variant-redactioneel .verder-knop svg { width: 22px; height: 22px; flex: none; color: var(--goud); transition: transform .2s ease; }
.variant-redactioneel .verder-knop:hover,
.variant-redactioneel .verder-knop:focus-visible { border-color: var(--goud); color: var(--goud); background: #17160f; }
.variant-redactioneel .verder-knop:hover svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .variant-redactioneel .verder-knop, .variant-redactioneel .verder-knop svg { transition: none; }
}
/* De uitleg bij het Enterprise-bedrag mag op een telefoon afbreken. */
.variant-redactioneel .prijsregel--enterprise .prijsregel-bedrag small { white-space: normal; }

/* Prijsstrook: "vanaf" klein, zoals op de prijspagina. */
.variant-redactioneel .prijsregel-vanaf { font-size: 0.82rem; font-weight: 500; letter-spacing: 0; color: var(--text-secondary); }

/* --- 19. Pagina Weergaven: de tien weergaven onder elkaar (23 sept) ------
   Per weergave: de naam met de korte omschrijving, het schermbeeld, en
   daaronder wat je op dat tabblad ziet. */
.variant-redactioneel .weergave-beeld { margin: clamp(32px, 4vw, 56px) 0 0; }
.variant-redactioneel .weergave-delen {
  margin-top: clamp(64px, 8vw, 112px);
  padding-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--lijn);
}
/* Een onderdeel met alleen een opschrift (SLA-horizon, nalevingsmatrix):
   het beeld volgt direct. */
.variant-redactioneel .kenmerk-tekst > .opschrift:only-child { margin-bottom: 0; }
@media (min-width: 961px) {
  /* Zonder eigen kop staat het opschrift links en de tekst rechts. */
  .variant-redactioneel .kenmerk--gestapeld .kenmerk-tekst:not(:has(> h3)) > .opschrift { grid-column: 1; grid-row: 1 / span 12; }
}

/* --- 20. Homepage: blok In beeld en kerncijfers (23 sept) ---------------
   Het openingsblok werkt weer als op de live site (sectie 5 en site.css):
   eerst alleen de kop, bij het scrollen groeit het dashboard in beeld. */

/* De kop staat gecentreerd in de ruimte onder de menubalk. Past hij niet
   (een laag scherm, een lange Franse of Duitse kop), dan begint hij onder de
   balk in plaats van er bovenaan onder weg te vallen. */
/* Het toneel zit vast onder de menubalk (die staat zelf bovenaan in de pagina)
   en is precies zo hoog als wat eronder overblijft; anders valt de onderkant
   van het openingsblok buiten beeld. site.js zet --navhoogte. */
@media (prefers-reduced-motion: no-preference) {
  .variant-redactioneel .cinema-toneel { top: var(--navhoogte, 69px); height: calc(100svh - var(--navhoogte, 69px)); }
}
.variant-redactioneel .cinema-tekst { justify-content: safe center; padding-top: 24px; padding-bottom: 24px; }
/* Op een laag laptopscherm (bijvoorbeeld een browservenster van 1000 bij 550)
   schaalt de kop ook met de hoogte mee, zodat kop, tekst en knoppen samen in
   beeld passen en de scrollcinema blijft werken. */
.variant-redactioneel .cinema-tekst h1 { font-size: clamp(2.5rem, min(8.4vw, 11.5svh), 7.6rem); }
@media (min-width: 701px) and (max-height: 700px) {
  .variant-redactioneel .cinema-tekst { padding-top: 14px; padding-bottom: 12px; }
  .variant-redactioneel .cinema-tekst h1 { font-size: clamp(2.4rem, min(8.4vw, 10.5svh), 7.6rem); margin-bottom: 16px; }
  .variant-redactioneel .cinema-tekst h1::before { margin-bottom: 14px; }
  .variant-redactioneel .cinema-tekst .lead { max-width: 62ch; font-size: 1.05rem; }
  .variant-redactioneel .cinema-tekst .knoprij { margin-top: 20px; }
  .variant-redactioneel .hero-noot { margin-top: 14px; }
}
/* Past kop, tekst en knoppen samen niet in het scherm, dan geen scrollcinema
   maar kop en beeld onder elkaar (site.js zet .cinema--statisch); anders
   zouden de knoppen buiten beeld blijven. */
.variant-redactioneel .cinema--statisch { height: auto; }
.variant-redactioneel .cinema--statisch .cinema-toneel { position: static; top: auto; height: auto; overflow: visible; padding-bottom: 56px; }
.variant-redactioneel .cinema--statisch .cinema-toneel::before,
.variant-redactioneel .cinema--statisch .cinema-toneel::after { display: none; }
.variant-redactioneel .cinema--statisch .cinema-tekst { position: static; opacity: 1; transform: none; padding-top: 48px; }
.variant-redactioneel .cinema--statisch .cinema-beeld { position: static; translate: none; transform: none; opacity: 1; margin: 36px auto 0; }
.variant-redactioneel .cinema--statisch .scrolhint { display: none; }
/* Kleine telefoons (bijvoorbeeld 320 bij 568): minder lucht en een iets kleinere kop
   en inleiding, zodat de demoknop in het eerste scherm blijft (24 sept 2026). */
@media (max-width: 360px) and (max-height: 640px) {
  .variant-redactioneel .cinema--statisch .cinema-tekst { padding-top: 16px; }
  .variant-redactioneel .cinema-tekst h1 { font-size: 2rem; margin-bottom: 16px; }
  .variant-redactioneel .cinema-tekst h1::before { margin-bottom: 16px; }
  .variant-redactioneel .cinema-tekst .lead { font-size: 1rem; line-height: 1.45; }
  .variant-redactioneel .cinema-tekst .knoprij { margin-top: 18px; }
}

/* Blok In beeld: de tien weergaven als rijen (tekst 5, beeld 7), het beeld
   afwisselend rechts en links; op een telefoon het beeld boven de tekst.
   Daarna de telefoons. */
.variant-redactioneel #in-beeld .in-beeld-rij { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.variant-redactioneel #in-beeld .in-beeld-rij.kenmerk--omgedraaid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.variant-redactioneel #in-beeld .in-beeld-rij .kenmerk-tekst h3 { font-size: clamp(1.45rem, 2.2vw, 2.05rem); line-height: 1.12; letter-spacing: -0.03em; max-width: none; margin-bottom: 16px; }
.variant-redactioneel #in-beeld .in-beeld-rij .opschrift { margin-bottom: 18px; }
@media (max-width: 880px) {
  .variant-redactioneel #in-beeld .in-beeld-rij,
  .variant-redactioneel #in-beeld .in-beeld-rij.kenmerk--omgedraaid { grid-template-columns: minmax(0, 1fr); }
  .variant-redactioneel #in-beeld .in-beeld-rij .in-beeld-beeld { order: -1; }
}
/* Onder de weergaven: knoppen naar de andere onderwerpen. */
.variant-redactioneel #ontdek .opschrift { margin-bottom: 18px; }
.variant-redactioneel #ontdek .alle-onderdelen { margin-top: 28px; }

.variant-redactioneel #in-beeld .in-beeld-item { margin-top: clamp(64px, 8vw, 112px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--lijn); }
.variant-redactioneel .in-beeld-knop { margin-top: 22px; }
.variant-redactioneel .in-beeld-beeld { margin: 0; }
.variant-redactioneel #in-beeld .kenmerk-tekst h3 { max-width: 16ch; }

/* Kerncijfers: ook op een tablet en een telefoon vier naast elkaar. Het getal
   schaalt mee met de breedte van de strook, zodat "12 mnd" altijd in zijn
   kolom past; het bijschrift wordt op een telefoon kleiner en mag afbreken. */
.variant-redactioneel .tellers { container-type: inline-size; grid-template-columns: repeat(3, minmax(0, 1fr)); }  /* drie kerncijfers sinds 8 okt 2026  */
.variant-redactioneel .teller-getal { font-size: min(5rem, 10.4cqi); }
@media (max-width: 900px) {
  .variant-redactioneel .tellers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 2.4vw, 24px); }
}
/* Op een telefoon staan de vier kerncijfers onder elkaar (23 sept),
   elk met het bijschrift eronder, zonder afgebroken woorden. */
@media (max-width: 620px) {
  .variant-redactioneel .tellers { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .variant-redactioneel .teller { padding: 18px 0 22px; }
  .variant-redactioneel .teller-getal { display: block; font-size: clamp(2.6rem, 13vw, 3.4rem); }
  .variant-redactioneel .teller p {
    margin-top: 8px; font-size: 0.95rem; line-height: 1.5; max-width: 34ch;
    hyphens: manual; -webkit-hyphens: manual;
  }
}

/* --- 21. Afwerking na de hertoetsing (23 sept, avond) ---------------------
   Voorstellen van de beoordelaars, elk in de preview getest in vier talen van
   320 tot 1920 px. Alleen opmaak en werking; geen tekst. */

/* Openingsblok: kop en dashboard nooit tegelijk half zichtbaar; het beeld
   past bij volle groei in het toneel onder de menubalk; op een staand tablet
   de staande opname (zie ook de source in home.*.html). */
.variant-redactioneel .cinema-tekst,
.variant-redactioneel .scrolhint { opacity: clamp(0, calc(var(--tekst-op, 1) * 1.3 - 0.3), 1); }
.variant-redactioneel .cinema-beeld { opacity: clamp(0, calc(var(--beeld-op, 0) * 2.2 - 1.2), 1); }
@media (prefers-reduced-motion: no-preference) {
  .variant-redactioneel .cinema:not(.cinema--statisch) .cinema-beeld { width: min(1600px, 100vw, calc((100svh - var(--navhoogte, 69px)) * 1.58)); }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 700px) {
  .variant-redactioneel .cinema:not(.cinema--statisch) .cinema-beeld { width: min(100vw, calc((100svh - var(--navhoogte, 69px)) * 0.46)); }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 701px) and (max-aspect-ratio: 4/5) {
  .variant-redactioneel .cinema:not(.cinema--statisch) .cinema-beeld { width: min(70vw, calc((100svh - var(--navhoogte, 69px)) * 0.46)); }
}
/* Kerncijfers: een lijn per teller, geen tweede erboven. */
.variant-redactioneel .vlak:has(.tellers) > .omhulsel:first-child::before { border-top: 0; }

/* Sprong naar een anker: de 88 px scroll-padding van site.css volstaat. */
.variant-redactioneel .vlak[id],
.variant-redactioneel .weergave [id] { scroll-margin-top: 0; }

/* Prijzen */
@media (max-width: 1279px) {
  .variant-redactioneel .prijs { flex-wrap: wrap; row-gap: 2px; }
}
@media (min-width: 701px) and (max-width: 900px) {
  @supports (grid-template-rows: subgrid) {
    .variant-redactioneel .prijsraster { align-items: stretch; }
    .variant-redactioneel .prijskaart { display: grid; grid-template-rows: subgrid; grid-row: span 6; }
  }
}
@media (min-width: 701px) {
  .variant-redactioneel .prijskaart .prijs { align-self: baseline; }
  .variant-redactioneel .waarde-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.variant-redactioneel .prijskaart { grid-template-columns: minmax(0, 1fr); }
.variant-redactioneel .prijskaart .knop { padding-inline: 16px; text-align: center; line-height: 1.25; }
.variant-redactioneel .prijs-noot,
.variant-redactioneel .prijskaart .prijs-sub { text-wrap: pretty; }
@media (max-width: 400px) {
  .variant-redactioneel .termijnkeuze button { line-height: 1.25; padding-inline: 12px; }
}
.variant-redactioneel .vraag-antwoord { padding-left: 0; }
/* Een spread zonder opschrift: kop in de eerste rij, naast de tekst. */
@media (min-width: 961px) {
  .variant-redactioneel .midden:has(> h2):not(:has(> .opschrift)) > h2 { grid-row: 1 / span 8; }
}

/* Weergaven */
.variant-redactioneel .weergave > .omhulsel:first-child::before { border-top-color: var(--lijn-goud); }
.variant-redactioneel .weergave.vlak--donker { background: #121211; }
.variant-redactioneel .weergave-delen .kenmerk-tekst h3 { font-size: clamp(1.5rem, 2.4vw, 2.2rem); }
.variant-redactioneel .weergave-kop h2 .kop-bij { display: block; font-size: .42em; font-weight: 500; letter-spacing: 0; line-height: 1.3; color: var(--text-secondary); margin-top: .5em; }
.variant-redactioneel .weergave-kop:not(:has(> p)) + .weergave-delen { margin-top: clamp(24px, 3vw, 40px); padding-top: 0; border-top: 0; }
.variant-redactioneel .kenmerk--gestapeld:has(> .kenmerk-tekst > .opschrift:only-child) { gap: clamp(14px, 1.6vw, 20px); }
.variant-redactioneel #weergave-meldingen .kenmerk-tekst > .vinklijst + p.zacht { font-size: .88rem; line-height: 1.6; color: var(--text-muted); max-width: 68ch; }
.variant-redactioneel #weergave-wallboard .venster[style*="max-width"] { margin-inline: 0 !important; }
@media (max-width: 960px) {
  .variant-redactioneel .weergave-kop > p,
  .variant-redactioneel .weergave-delen .kenmerk-tekst > p,
  .variant-redactioneel .weergave-delen .kenmerk-tekst > ul { max-width: 68ch; }
}
.variant-redactioneel .tweeluik { align-items: stretch; }
.variant-redactioneel .tweeluik > .venster { display: flex; flex-direction: column; }
.variant-redactioneel .tweeluik > .venster > figcaption { flex: 1; }
.variant-redactioneel .weergave-delen :is(.kenmerk, .tweeluik) > .venster:has(> figcaption) { border-color: transparent; background: transparent; }
.variant-redactioneel .weergave-delen :is(.kenmerk, .tweeluik) > .venster:has(> figcaption) > figcaption { padding-inline: 0 !important; }
/* Uitsneden die onaf eindigen lopen zacht uit (tot er nieuwe opnamen zijn). */
.variant-redactioneel .venster img[src*="assets-per-asset-donker"],
.variant-redactioneel .venster img[src*="wallboard-notificaties-donker"] {
  -webkit-mask-image: linear-gradient(180deg, #000 90%, transparent); mask-image: linear-gradient(180deg, #000 90%, transparent);
}
@media (min-width: 961px) {
  .variant-redactioneel #mobiel .midden:has(> h2) { grid-template-columns: minmax(min-content, 5fr) minmax(0, 7fr); }
  .variant-redactioneel #mobiel .midden > .lead ~ .lead { font-size: 1.05rem; }
}
@media (min-width: 701px) {
  .variant-redactioneel .telefoons { flex-wrap: nowrap; }
  .variant-redactioneel .telefoon { flex: 0 1 260px; min-width: 0; }
}
@media (max-width: 880px) {
  .variant-redactioneel .kenmerk { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 380px) {
  .variant-redactioneel .kenmerk-tekst > .opschrift { letter-spacing: 0.12em; }
}
.variant-redactioneel .opschrift { text-wrap: balance; }
.variant-redactioneel .aaneen { white-space: nowrap; }
@media (max-width: 480px) {
  .variant-redactioneel h2 .aaneen { white-space: normal; }
}

/* Knoppen naar de andere pagina's: geen wees op een tweede rij. */
@media (min-width: 1000px) {
  .variant-redactioneel .verder-knoppen { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .variant-redactioneel .verder-knop { padding: 18px; gap: 12px; }
}
@media (min-width: 561px) and (max-width: 999px) {
  .variant-redactioneel .verder-knoppen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 561px) {
  /* zes knoppen (homepage): twee rijen van drie */
  .variant-redactioneel .verder-knoppen:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .variant-redactioneel .verder-knoppen { grid-template-columns: minmax(0, 1fr); }
}

/* Contact, Over, In gebruik nemen, Beveiliging, formulieren */
.variant-redactioneel .overportret img { aspect-ratio: 704 / 720; object-position: 0 50%; }
.variant-redactioneel .overnaam { margin-bottom: 0; }
@media (max-width: 760px) {
  .variant-redactioneel .overportret { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 18px; align-items: center; }
  .variant-redactioneel .overportret img { grid-row: 1 / span 2; }
  .variant-redactioneel .overnaam { align-self: end; }
  .variant-redactioneel .overportret .gedempt { align-self: start; }
}
.variant-redactioneel .bedrijfsgegevens { border: 0; border-top: 1px solid var(--lijn); border-radius: 0; background: none; padding: clamp(26px, 3vw, 32px) 0 0; }
@media (min-width: 600px) and (max-width: 999px) {
  .variant-redactioneel .raster:has(> :nth-child(3):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .variant-redactioneel .raster:has(> :nth-child(3):last-child) > :last-child { grid-column: 1 / -1; max-width: 62ch; }
}
.variant-redactioneel #demo h2,
.variant-redactioneel .contactraster h1 { font-size: clamp(2rem, 3.6vw, 3.2rem); }
@media (min-width: 961px) {
  .variant-redactioneel #beveiliging .midden > h2 { font-size: clamp(2.2rem, 3.6vw, 3.5rem); }
}
@media (min-width: 821px) {
  .variant-redactioneel .stappen { row-gap: 0; }
  .variant-redactioneel .stap { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
}
.variant-redactioneel .veld select,
.variant-redactioneel .veld select:hover,
.variant-redactioneel .veld select:focus {
  appearance: none; -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23949289' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px 16px;
}
.variant-redactioneel .veld--keuze input[type="radio"],
.variant-redactioneel .veld--keuze input[type="checkbox"] { margin-left: 0; }
.variant-redactioneel .veld--keuze label strong { white-space: nowrap; }

/* Kruimelpad zoals op de andere subpagina's: klein, in hoofdletters, goud,
   direct onder de balk en zonder haarlijn erboven. Geldt ook voor Contact en Over. */
.variant-redactioneel .kruimels {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 clamp(40px, 5vw, 64px);
}
.variant-redactioneel .kruimels a { color: var(--goud); text-decoration: none; }
.variant-redactioneel main > .vlak:first-child:has(> .omhulsel > .kruimels) { padding-top: 28px; }
.variant-redactioneel main > .vlak:first-child > .omhulsel:first-child:has(> .kruimels)::before { display: none; }

/* Kop van een artikel of juridisch stuk: links, de h1 in de maat van de
   andere paginakoppen, een haarlijn eronder. */
.variant-redactioneel .artikelkop {
  text-align: left;
  margin: 0 0 clamp(48px, 6vw, 80px);
  padding-bottom: clamp(32px, 4vw, 48px);
  border-bottom: 1px solid var(--lijn);
}
.variant-redactioneel .artikelkop h1 {
  font-size: clamp(2rem, 4.2vw, 4.2rem);
  letter-spacing: -0.042em;
  line-height: 0.98;
  margin-bottom: 22px;
}
/* TOPdesk-API blijft heel (span.aaneen wordt bij het bouwen gezet). */
.variant-redactioneel .artikelkop h1 .aaneen { white-space: nowrap; }
@media (max-width: 560px) {
  /* Op een telefoon breekt "TOPdesk-rapportage" dan niet op het koppelteken als het woord past. */
  .variant-redactioneel .artikelkop h1 { text-wrap: pretty; }
}

/* Lopende tekst: een kolom van ongeveer 72 tekens op de linkerrand,
   tussenkoppen ruim kleiner dan de h1, met een haarlijn erboven. */
.variant-redactioneel .artikel { max-width: 62ch; margin-inline: 0; }
.variant-redactioneel .artikel h2 {
  font-size: clamp(1.45rem, 2.3vw, 1.9rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 2.2em 0 0.7em;
  padding-top: 1em;
  border-top: 1px solid var(--lijn);
}
.variant-redactioneel .artikel > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.variant-redactioneel .artikel h3 { font-size: clamp(1.12rem, 1.6vw, 1.3rem); }
.variant-redactioneel .artikel li::marker { color: var(--goud); }
.variant-redactioneel .artikel ol > li::marker { font-weight: 600; font-variant-numeric: tabular-nums; }
.variant-redactioneel .artikel code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.86em;
  color: var(--text-primary);
}

/* Slotoproep: links en zonder kader, zoals de andere secties. */
.variant-redactioneel .slot { text-align: left; background: none; border: 0; border-radius: 0; padding: 0; }
.variant-redactioneel .slot h2 { font-size: clamp(2rem, 3.6vw, 3.2rem); max-width: 18ch; }
.variant-redactioneel .slot .lead[style] { margin-inline: 0 !important; }

/* Release notes: maandblok op dezelfde linkerrand als de kop; de maandkop
   als tussenkop, zonder eigen onderlijn. */
.variant-redactioneel .vlak > .omhulsel--smal:has(> .release-maand) { max-width: var(--breedte); }
.variant-redactioneel .release-maand { max-width: 62ch; }
.variant-redactioneel .release-maand h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  line-height: 1.1;
  border-bottom: 0;
  padding-bottom: 0;
}

/* Inzichten: geen haarlijn boven de kaarten; hun eigen bovenlijn is de scheiding. */
.variant-redactioneel .vlak > .omhulsel:first-child:has(> .artikelraster)::before { display: none; }

/* Menu, taalkeuze, voettekst en pop-up */
.variant-redactioneel .taalkeuze > summary { min-height: 38px; }
.variant-redactioneel .taalkeuze > summary svg { flex: none; max-width: none; }
@media (max-width: 440px) {
  .variant-redactioneel .nav { gap: 6px; }
  .variant-redactioneel .taalkeuze > summary { padding: 5px 4px 5px 7px; gap: 2px; }
  .variant-redactioneel .taalkeuze > summary svg { width: 12px; height: 12px; }
}
@media (max-width: 1000px) {
  /* Het open menu past altijd in het scherm en scrolt zelf; de pagina eronder
     is gedempt en staat stil (body.menu-open, site.js). */
  .variant-redactioneel .navbalk[data-open="ja"] .navlinks {
    max-height: calc(100vh - 68px);
    max-height: calc(100dvh - 68px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .variant-redactioneel .navbalk[data-open="ja"]::after {
    content: ""; position: absolute; left: 0; right: 0; top: 100%;
    height: 100vh; height: 100dvh;
    background: rgba(0, 0, 0, 0.62); z-index: -1;
  }
  body.menu-open { overflow: hidden; }
  .variant-redactioneel .taalkeuze-lijst a { padding: 12px 14px; font-size: 0.95rem; }
  .variant-redactioneel .navbalk[data-open="ja"] .navlinks a[aria-current="page"] { color: var(--goud); box-shadow: none; }
}
.variant-redactioneel .navknop .icoon-dicht { display: none; }
.variant-redactioneel .navknop[aria-expanded="true"] .icoon-open { display: none; }
.variant-redactioneel .navknop[aria-expanded="true"] .icoon-dicht { display: inline; }
.variant-redactioneel .navlinks a[aria-current="page"] { color: var(--text-primary); box-shadow: inset 0 -1px 0 var(--goud); }

.variant-redactioneel .voetlijst { gap: 14px; }
.variant-redactioneel .voetlijst li { line-height: 1.4; }
.variant-redactioneel .voetlijst a[href^="mailto:"] { white-space: nowrap; }
.variant-redactioneel .voetlijst li > .gedempt { display: block; font-size: 0.82rem; margin-top: 2px; }
@media (min-width: 881px) {
  .variant-redactioneel .voetraster { grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)) minmax(13.75rem, 1fr); }
}
@media (min-width: 881px) and (max-width: 1180px) {
  .variant-redactioneel .voetraster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .variant-redactioneel .voetraster > :first-child { grid-column: 1 / -1; }
}

/* Melding onder een veld dat niet klopt. */
.variant-redactioneel .veld-fout { margin: 8px 0 0; font-size: 0.86rem; line-height: 1.45; color: var(--critical); }
.variant-redactioneel .veld-fout[hidden] { display: none; }
.variant-redactioneel .veld input[aria-invalid="true"] { border-color: color-mix(in srgb, var(--critical) 60%, transparent); }
/* Veld dat nog niet klopt (25 sept 2026): label en onderrand rood, tekst eronder. */
.variant-redactioneel .veld--fout > label { color: var(--critical); }
.variant-redactioneel .veld--fout input:not([type="radio"]):not([type="checkbox"]),
.variant-redactioneel .veld--fout input:not([type="radio"]):not([type="checkbox"]):focus {
  background: color-mix(in srgb, var(--critical) 8%, transparent);
  border-bottom-color: var(--critical);
  box-shadow: 0 1px 0 0 var(--critical);
}


/* Contact: op een breed scherm links de inleiding met daaronder de kanalen,
   rechts het formulier; op een telefoon komt het formulier direct na de
   inleiding, voor de kanalen en de foto. */
@media (min-width: 881px) {
  .variant-redactioneel .contactraster:has(> .contact-intro) { grid-template-areas: "intro form" "kanalen form"; grid-template-rows: auto 1fr; row-gap: 0; }
  .variant-redactioneel .contact-intro { grid-area: intro; }
  .variant-redactioneel .contactraster:has(> .contact-intro) > .formulier { grid-area: form; }
  .variant-redactioneel .contact-kanalen { grid-area: kanalen; }
}
.variant-redactioneel .contact-intro > .lead:last-child { margin-bottom: 1.1em; }
@media (max-width: 880px) {
  .variant-redactioneel .contactraster:has(> .contact-intro) { row-gap: 0; }
  .variant-redactioneel .contactraster:has(> .contact-intro) > .formulier { margin: 12px 0 48px; }
  .variant-redactioneel .adresfoto { max-width: 460px; }
}

/* Enterprise (23 sept): de bovenkant loopt gelijk met de andere drie
   blokken (naam, prijs, knop op een lijn), maar het blok stopt na de richtprijs
   in plaats van de hele hoogte van de modulelijsten te vullen. Het paneel is
   het ::before-vlak tot en met de knop, en de richtprijs maakt het af. */
/* --pk-x: binnenruimte van de kaart; --rij-gap: ruimte tussen de rijen van het prijsraster. */
.variant-redactioneel .prijskaart--enterprise { --pk-x: 28px; --rij-gap: 20px; }
@media (min-width: 1280px) {
  .variant-redactioneel .prijskaart--enterprise { --pk-x: 22px; --rij-gap: 16px; }
}
/* Enterprise is sinds 4 okt 2026 een gewone vierde kaart : geen apart paneel meer. */

/* --- 22. Homepage in de vorm hp-product (keuze 23 sept 2026) ------
   Het thema blijft (kleur, letter, lijn); dit deel regelt alleen de opbouw
   van de homepage: het gecentreerde openingsblok, de twee schuifbare reeksen,
   de panelen met meerwaarde, de prijsblokken in de vorm "Alles uit ..., plus"
   en het demopaneel. Steeds opschrift, kop, inleiding en inhoud, met vaste
   ruimte tussen de secties. Alles geldt alleen onder main.hp-product (de
   homepage); :where() houdt de specificiteit gelijk aan die van de losse
   klassen. Werking: assets/js/homepage.js. */

.hp-product {
  --hp-y: clamp(64px, 6.7vw, 96px);
  --hp-kop-na: clamp(36px, 3.4vw, 48px);
  --hp-kaart: var(--surface-raised, #171716);
  --hp-paneel: var(--surface-2, #121211);
}

/* Onthullen bij scrollen eindigt op de eigen plek. In redactioneel.css wint
   ".variant-redactioneel .onthul" (translateY 16px) van ".onthul.zichtbaar"
   in site.css, waardoor alles wat in beeld kwam 16 px te laag bleef staan:
   de ruimte onder de panelen en onder het terugverdienblok werd zo 16 px
   krapper dan bedoeld. */
.hp-product .onthul.zichtbaar { transform: none; }

/* --- Openingsblok -------------------------------------------------------- */

/* Kortere scrollweg: eerst de kop, daarna groeit het dashboard in beeld. */
@media (prefers-reduced-motion: no-preference) {
  .hp-product .cinema:not(.cinema--statisch) { height: 200svh; }
}
/* Geen gouden gloed achter het dashboard. */
.hp-product .cinema-toneel::before { display: none; }

/* Kop, tekst, knoppen en noot gecentreerd, zoals de secties eronder. De
   scrollwerking verandert niet: site.js zet nog
   steeds --tekst-op en --beeld-op, en meet de noot voor .cinema--statisch. */
.hp-product .cinema-tekst {
  align-items: center;
  text-align: center;
  padding-left: var(--kolomrand);
  padding-right: var(--kolomrand);
}
.hp-product .cinema-tekst h1 { text-wrap: balance; }
.hp-product .cinema-tekst h1::before { margin-inline: auto; }
.hp-product .cinema-tekst .lead { margin-inline: auto; text-wrap: pretty; }
.hp-product .cinema-tekst .knoprij { justify-content: center; }
.hp-product .scrolhint { left: 50%; translate: -50% 0; }
/* Op een telefoon staan de twee knoppen onder elkaar; even breed, zodat ze
   gecentreerd als een blok lezen. */
@media (max-width: 560px) {
  .hp-product .cinema-tekst .knoprij {
    flex-direction: column;
    align-items: stretch;
    width: min(100%, 300px);
  }
}

/* Op een liggend scherm staat het dashboard in een dun kader met ronde
   hoeken, met wat lucht rondom; de zachte onderrand is dan niet meer nodig. */
@media (min-width: 701px) and (min-aspect-ratio: 801/1000) {
  .hp-product .cinema-beeld {
    border: 1px solid var(--lijn);
    border-radius: 12px;
    overflow: hidden;
    background: #0c0c0c;
  }
  .hp-product .cinema-beeld::after,
  .hp-product .cinema-toneel::after { display: none; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 701px) and (min-aspect-ratio: 801/1000) {
  .hp-product .cinema:not(.cinema--statisch) .cinema-beeld {
    width: min(1480px, calc(100vw - 48px), calc((100svh - var(--navhoogte, 69px) - 48px) * 1.6));
  }
}

/* --- Kerncijfers --------------------------------------------------------- */

.hp-product .vlak:has(.tellers) { padding-block: 56px; }
.hp-product .vlak:has(.tellers) > .omhulsel:first-child::before { display: none; }
@media (min-width: 621px) {
  .hp-product .tellers { gap: 0; }
  .hp-product .teller {
    border-top: 0;
    padding: 6px clamp(12px, 2.2vw, 32px);
    text-align: center;
  }
  .hp-product .teller + .teller { border-left: 1px solid var(--lijn); }
  .hp-product .teller p { margin-inline: auto; }
}
@media (max-width: 620px) {
  .hp-product .vlak:has(.tellers) { padding-block: 32px 40px; }
}
/* Op een tablet zijn "12 Mon." en "12 mois" breder dan hun kolom en raken ze
   de scheidingslijn; in het Duits en Frans zijn de cijfers daar iets kleiner. */
@media (min-width: 621px) and (max-width: 900px) {
  .variant-redactioneel .hp-product .teller-getal:is(:lang(de), :lang(fr)) { font-size: min(5rem, 8.8cqi); }
}

/* --- Secties en koppen --------------------------------------------------- */

:where(.hp-product) .hp-sectie {
  position: relative;
  padding-bottom: var(--hp-y);
}
/* Dunne lijn als scheiding, binnen de tekstkolom, dan vaste ruimte. */
:where(.hp-product) .hp-sectie > .omhulsel:first-child::before {
  content: "";
  display: block;
  height: 1px;
  background: var(--lijn);
  margin-bottom: var(--hp-y);
}

:where(.hp-product) .hp-kop {
  max-width: 980px;
  margin: 0 auto var(--hp-kop-na);
  text-align: center;
}
:where(.hp-product) .hp-kop .opschrift { justify-content: center; margin-bottom: 22px; }
:where(.hp-product) .hp-kop .opschrift::after {
  content: "";
  flex: none;
  width: 28px;
  height: 1px;
  background: var(--goud);
}
:where(.hp-product) .hp-kop h2 { margin: 0; text-wrap: balance; }
:where(.hp-product) .hp-kop-zacht { color: var(--text-muted); }
/* Op een telefoon blijft TOPdesk-inzichten heel, zolang het woord past. */
@media (min-width: 360px) and (max-width: 480px) {
  .variant-redactioneel :where(.hp-product) .hp-kop h2 .aaneen { white-space: nowrap; }
}
/* Het Duitse TOPdesk-Erkenntnisse is 360px breed en past pas vanaf 400px;
   daaronder mag het na het koppelteken afbreken. */
@media (max-width: 399px) {
  .variant-redactioneel :where(.hp-product) .hp-kop h2 .aaneen:lang(de) { white-space: normal; }
}
:where(.hp-product) .hp-kop .lead { margin: 18px auto 0; max-width: 60ch; }
:where(.hp-product) #in-beeld .hp-kop .lead { text-wrap: balance; }
:where(.hp-product) .hp-kop > .lead + .termijnkeuze { margin-top: 28px; }

/* Label met haarlijnen aan beide kanten, als tussenkop binnen een sectie. */
.hp-product .hp-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 0 0 32px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--goud);
}
.hp-product .hp-label::before,
.hp-product .hp-label::after {
  content: "";
  flex: 1 1 0;
  height: 1px;
  background: var(--lijn);
}

:where(.hp-product) .hp-tussenkop { margin: 0 0 32px; }
.hp-product .hp-tussenkop .hp-label { margin-bottom: 14px; }
:where(.hp-product) .hp-tussenkop p {
  margin: 0 auto;
  max-width: 60ch;
  text-align: center;
  font-size: 0.97rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

:where(.hp-product) .hp-actie { margin: 40px 0 0; text-align: center; }
:where(.hp-product) .hp-afsluiting { margin: clamp(40px, 5vw, 56px) auto 0; max-width: 60ch; text-align: center; }
:where(.hp-product) .hp-afsluiting h3 { margin: 0; font-size: clamp(1.25rem, 2.2vw, 1.5rem); line-height: 1.25; }
:where(.hp-product) .hp-afsluiting p { margin: 10px 0 0; color: var(--text-secondary); }
:where(.hp-product) .hp-afsluiting + .hp-actie { margin-top: 22px; }

.hp-product .pijllink { color: var(--text-primary); text-decoration: none; transition: color .2s ease; }
.hp-product .pijllink:hover,
.hp-product .pijllink:focus-visible { color: var(--goud); }

/* --- Schuifbare reeksen -------------------------------------------------- */

/* De baan loopt van de linkerrand van de tekstkolom door tot de rand van het
   scherm; die rand snijdt de volgende dia af, zodat zichtbaar is dat er meer is. */
:where(.hp-product) .reeks-baan {
  position: relative;
  display: flex;
  gap: 24px;
  margin: 0;
  padding-inline: var(--rand);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--rand);
  scrollbar-width: none;
}
:where(.hp-product) .reeks-baan::-webkit-scrollbar { display: none; }
:where(.hp-product) .reeks-baan:focus { outline: none; }
:where(.hp-product) .reeks-baan:focus-visible { outline: 1px solid var(--goud); outline-offset: -1px; }
:where(.hp-product) .reeks-baan > * { scroll-snap-align: start; min-width: 0; }
:where(.hp-product) .reeks-baan > .is-deels { cursor: pointer; }

/* Weergaven: groot schermbeeld met naam, kernzin en link eronder. */
:where(.hp-product) .dia { flex: 0 0 min(880px, 76vw); }
:where(.hp-product) .dia-beeld {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--lijn);
  border-radius: 12px;
  overflow: hidden;
  background: #0c0c0c;
  transition: border-color .25s ease;
}
:where(.hp-product) .dia-beeld img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
:where(.hp-product) .dia.is-deels:hover .dia-beeld { border-color: var(--lijn-sterk); }
:where(.hp-product) .dia-tekst { padding: 24px 2px 0; max-width: 700px; }
:where(.hp-product) .dia-kop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  /* even hoog als het label, zodat de kernzin in elke dia op dezelfde hoogte
     begint, ook bij Overzicht (zonder label) */
  min-height: 26px;
  margin-bottom: 14px;
}
.hp-product .dia-kop .opschrift { margin: 0; min-width: 0; }
/* Pakketlabel: klein, met een rand, zoals op de prijsblokken. */
:where(.hp-product) .pakket-label {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--lijn-sterk);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--text-secondary);
  white-space: nowrap;
}
:where(.hp-product) .dia-tekst h3 {
  margin: 0 0 14px;
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  line-height: 1.25;
  letter-spacing: -0.022em;
  text-wrap: pretty;
}
:where(.hp-product) .dia-tekst .pijllink { font-size: 0.95rem; font-weight: 500; }

/* Uitgelicht in de weergaven: kaarten met de uitsnede, een regel met de
   weergave en het pakket, de naam en een zin. */
:where(.hp-product) .reeks--uitgelicht { margin-top: clamp(56px, 6vw, 88px); }
:where(.hp-product) .reeks--uitgelicht .reeks-baan { gap: 20px; }
:where(.hp-product) .onderdeel {
  flex: 0 0 440px;
  display: flex;
  flex-direction: column;
  padding: 12px;
  background: var(--hp-kaart);
  border: 1px solid var(--lijn);
  border-radius: 16px;
}
:where(.hp-product) .onderdeel-beeld {
  position: relative;
  aspect-ratio: 2 / 1;
  border-radius: 12px;
  background: #0c0c0c;
  overflow: hidden;
}
:where(.hp-product) .onderdeel-beeld img {
  position: absolute;
  inset: 12px;
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  object-fit: contain;
}
/* Een licht beeld (export in Word) op een lichte achtergrond. */
:where(.hp-product) .onderdeel-beeld--licht { background: #f4f1ea; }
/* Een volledig scherm: de rechterbovenhoek, uitvergroot. */
:where(.hp-product) .onderdeel-beeld--detail img {
  inset: 0 0 auto auto;
  width: 170%;
  height: auto;
  object-fit: fill;
}
:where(.hp-product) .onderdeel-tekst { padding: 20px 10px 10px; }
/* "In Meldingenbeheer · vanaf Standaard": breekt alleen na de punt, nooit in
   een naam. */
:where(.hp-product) .onderdeel-plek {
  margin: 0 0 10px;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text-secondary);
}
:where(.hp-product) .plek-deel { white-space: nowrap; }
:where(.hp-product) .onderdeel h4 {
  margin: 0 0 8px;
  font-size: 1.22rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
:where(.hp-product) .onderdeel p:not(.onderdeel-plek) {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.58;
  color: var(--text-secondary);
}

/* Bediening, gelijk voor beide reeksen: voortgang, dan de knoppen. */
:where(.hp-product) .reeks-voortgang {
  position: relative;
  height: 2px;
  margin-top: 32px;
  background: var(--lijn);
  border-radius: 2px;
  overflow: hidden;
}
:where(.hp-product) .reeks-duim {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 20%;
  background: var(--goud);
  border-radius: 2px;
}
:where(.hp-product) .reeks-bediening {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}
:where(.hp-product) .reeks-pijl {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--lijn-sterk);
  border-radius: 50%;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, opacity .2s ease;
}
:where(.hp-product) .reeks-pijl svg { width: 20px; height: 20px; }
:where(.hp-product) .reeks-pijl:hover:not(:disabled),
:where(.hp-product) .reeks-pijl:focus-visible { border-color: var(--goud); color: var(--goud); }
:where(.hp-product) .reeks-pijl:disabled { opacity: 0.35; cursor: default; }
.hp-product .reeks-alle { min-height: 48px; padding-block: 0; }
html:not(.js) :where(.hp-product) .reeks-pijl,
html:not(.js) :where(.hp-product) .reeks-voortgang { display: none; }

/* --- Meerwaarde: zes panelen --------------------------------------------- */

:where(.hp-product) .hp-panelen {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
}
/* Drie panelen per rij (elk twee van de zes kolommen). Sinds 13 okt 2026 zes panelen zonder breed
   paneel eronder (Beheer staat op Waarom AureaDesk): twee volle rijen. */
:where(.hp-product) .hp-paneel { grid-column: span 2; }
/* Beheer en doorontwikkeling: een paneel over de hele breedte onder de vijf (1 okt 2026). */
:where(.hp-product) .hp-paneel--breed { grid-column: 1 / -1; }
:where(.hp-product) .hp-paneel {
  padding: 28px;
  background: var(--hp-kaart);
  border: 1px solid var(--lijn);
  border-radius: 16px;
}
/* Het motief van het opschrift: een korte gouden haarlijn, geen icoon of nummer. */
:where(.hp-product) .hp-paneel::before {
  content: "";
  display: block;
  width: 28px;
  height: 1px;
  margin-bottom: 22px;
  background: var(--goud);
}
:where(.hp-product) .hp-paneel h3 {
  margin: 0 0 12px;
  font-size: clamp(1.25rem, 1.6vw, 1.44rem);
  line-height: 1.2;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
:where(.hp-product) .hp-paneel p {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.65;
  color: var(--text-secondary);
}
/* Kop en tekst beginnen in elke rij op dezelfde hoogte, ook als een kop op
   een regel past en de buurman er twee nodig heeft. */
@supports (grid-template-rows: subgrid) {
  :where(.hp-product) .hp-paneel {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 0;
    align-content: start;
  }
}
:where(.hp-product) .hp-panelen > .onthul:nth-child(3n+2) { transition-delay: .08s; }
:where(.hp-product) .hp-panelen > .onthul:nth-child(3n) { transition-delay: .16s; }

/* --- Prijzen ------------------------------------------------------------- */

/* Kop: opschrift, kop, de twee zinnen van de site, de termijnkeuze en de
   uitleg over looptijd en overstappen, gecentreerd zoals de andere secties. */
:where(.hp-product) .hp-kop > .lead + .lead { margin-top: 12px; }
.hp-product .hp-kop .termijnkeuze { margin-top: 28px; }
/* Termijnkeuze: de gekozen termijn wit gevuld, zodat meteen zichtbaar is welke geldt. */
.hp-product .termijnkeuze { padding: 4px; border: 1px solid var(--lijn-sterk); border-radius: 3px; background: transparent; }
.hp-product .termijnkeuze button { min-height: 40px; padding: 0 18px; border-radius: 2px; font-size: 0.9rem; font-weight: 600; color: var(--text-secondary); }
.hp-product .termijnkeuze button:hover { color: var(--text-primary); }
.hp-product .termijnkeuze button[aria-pressed="true"] { background: #fff; color: #0c0c0c; }
.hp-product .termijnkeuze .korting { color: var(--goud); opacity: 1; }
.hp-product .termijnkeuze button[aria-pressed="true"] .korting { color: #5c4508; }
@media (max-width: 400px) {
  .hp-product .termijnkeuze button { padding: 0 11px; font-size: 0.86rem; }
}
.variant-redactioneel :where(.hp-product) .hp-termijnuitleg .termijn-uitleg {
  margin: 0 auto;
  max-width: 66ch;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-secondary);
  text-wrap: pretty;
}
/* De uitleg over looptijd en opzegtermijn staat onder de blokken (23 sept
   2026): op een telefoon begint de sectie zo met de keuze en de blokken. */
:where(.hp-product) .hp-termijnuitleg { margin-top: clamp(28px, 3vw, 40px); text-align: center; }
:where(.hp-product) .hp-termijnuitleg .termijn-uitleg a { color: var(--goud); text-decoration: none; border-bottom: 1px solid var(--lijn-goud); }
:where(.hp-product) .hp-termijnuitleg .termijn-uitleg a:hover { border-bottom-color: var(--goud); }

/* Vier blokken in de vorm "Alles uit ..., plus": Starter toont wat
   erin zit, Standaard en Pro alleen wat erbij komt ("Alles uit ..., plus"),
   in dezelfde groepen en zonder kruisjes. Enterprise is het vierde, kleinere
   blok: de bovenkant loopt gelijk, het stopt na de richtprijs. De rijen
   (naam, omschrijving, prijs, noot, knop, inhoud) lopen via subgrid gelijk;
   dat regelt het deel hierboven. Hier alleen de aankleding op de homepage:
   het kaartvlak, een dunne lijn en een hoek van 16 px, zoals de panelen. */
.hp-product .pakketten .prijskaart,
.hp-product .pakketten .prijskaart + .prijskaart {
  background: var(--hp-kaart);
  border: 1px solid var(--lijn);
  border-radius: 16px;
}
.hp-product .pakketten .prijskaart.prijskaart--uitgelicht { border-color: var(--goud); }
.hp-product .pakketten .prijskaart h3 { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.02em; }
.hp-product .pakketten .prijs-bedrag { font-weight: 600; }

/* Twee aan twee (701 tot 1279 px): het label "Meeste waarde" steekt boven
   Pro uit en raakte bijna het blok Starter erboven. Meer ruimte tussen de
   twee rijen; binnen een blok blijft de rijafstand 20 px (de blokken delen
   hun rijen via subgrid, en het vlak van Enterprise rekent met die 20 px). */
@media (min-width: 701px) and (max-width: 1279px) {
  .hp-product .pakketten .prijsraster { row-gap: 44px; }
  .hp-product .pakketten .prijskaart { row-gap: 20px; }
}

/* Inhoud van een blok. */
.hp-product .pakketinhoud {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  font-size: 0.9rem;
}
/* Aantal gebruikers: eigenschap van het pakket, daarom los boven de groepen. */
.hp-product .pakket-gebruikers {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--lijn);
  color: var(--text-primary);
  font-size: 0.95rem;
  line-height: 1.3;
}
.hp-product .pakket-gebruikers svg { width: 18px; height: 18px; color: var(--goud); }
.hp-product .pakket-gebruikers strong { font-weight: 600; }
/* Talen van het dashboard: direct onder het aantal gebruikers, zelfde opzet;
   de scheidingslijn schuift dan naar onder de talen. */
.hp-product .pakket-gebruikers--met-talen { padding-bottom: 8px; border-bottom: 0; }
.hp-product .pakket-talen {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--lijn);
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.4;
}
.hp-product .pakket-talen svg { width: 18px; height: 18px; margin-top: 1px; color: var(--goud); }
/* Extra gebruikers: direct onder het aantal inbegrepen gebruikers, zelfde opzet
   als de talen, zonder eigen scheidingslijn (24 sept 2026). */
.hp-product .pakket-extra {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin: 0;
  padding-bottom: 8px;
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.4;
}
.hp-product .pakket-extra svg { width: 18px; height: 18px; margin-top: 1px; color: var(--goud); }
.hp-product .pakket-omgeving {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin: 0;
  padding-bottom: 8px;
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.4;
}
.hp-product .pakket-omgeving svg { width: 18px; height: 18px; margin-top: 1px; color: var(--goud); }
.hp-product .pakket-server {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin: 0;
  padding-bottom: 8px;
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.4;
}
.hp-product .pakket-server svg { width: 18px; height: 18px; margin-top: 1px; color: var(--goud); }
/* "Alles uit Starter, plus": het vorige pakket in een regel. */
.hp-product .pakket-basis {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin: 0;
  padding: 9px 12px;
  border: 1px solid var(--lijn-goud);
  border-radius: 12px;
  background: rgba(227, 185, 62, 0.06);
  color: var(--goud);
  font-weight: 600;
  font-size: 0.88rem;
  line-height: 1.3;
}
.hp-product .pakket-basis svg { width: 18px; height: 18px; }
/* Past de regel niet (Engels in vier kolommen), dan twee even lange regels
   in plaats van "plus" alleen op de tweede. */
.hp-product .pakket-basis span { text-wrap: balance; }
/* Groepen: klein opschrift, daaronder de modules zonder lijnen ertussen. */
.hp-product .modulegroep { min-width: 0; }
.hp-product .groepkop {
  margin: 0 0 7px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--text-muted);
}
.hp-product .groeplijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.hp-product .groeplijst li {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  color: var(--text-secondary);
  line-height: 1.42;
}
.hp-product .groeplijst li > span { min-width: 0; overflow-wrap: break-word; }
.hp-product .groeplijst li svg { width: 13px; height: 13px; margin-top: 4px; color: var(--goud); }
.hp-product .groeplijst .heel { white-space: nowrap; }
/* Uitbreiding: volgt direct op de groepen (sinds 6 okt 2026 geen margin-top: auto meer,
   dat gaf een gat onder Signalen bij Pro nu Dienst en beheer eronder staat). */
.hp-product .modulegroep--uitbreiding {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--lijn-goud);
}
.hp-product .groeplijst .bij em {
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
  color: var(--text-primary);
}

/* De pakketkeuze hoort bij de veegbare reeks en bestaat alleen op een telefoon. */
.hp-product .pakketkeuze { display: none; }

/* Hoe Pro zich kan terugverdienen: paneel onder de prijzen, kop links en de
   vier punten rechts; de slotzin sluit de punten af. */
:where(.hp-product) .hp-terugverdienen {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 32px 56px;
  margin: 48px auto 0;
  padding: 48px;
  background: var(--hp-paneel);
  border: 1px solid var(--lijn);
  border-radius: 24px;
  scroll-margin-top: 96px;
}
:where(.hp-product) .hp-terugverdienen-kop h3 {
  margin: 0 0 16px;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}
:where(.hp-product) .hp-terugverdienen-kop p { margin: 0; line-height: 1.65; color: var(--text-secondary); }
:where(.hp-product) .hp-terugverdienen-kop strong { color: var(--text-primary); font-weight: 600; }
:where(.hp-product) .hp-terugverdienen-punten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 32px;
}
:where(.hp-product) .hp-terugverdienen-punten > div { padding-top: 16px; border-top: 1px solid var(--lijn); min-width: 0; }
:where(.hp-product) .hp-terugverdienen-punten h4 {
  margin: 0 0 10px;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--goud);
  hyphens: manual;
}
:where(.hp-product) .hp-terugverdienen-punten p { margin: 0; font-size: 0.94rem; line-height: 1.6; color: var(--text-secondary); }
:where(.hp-product) .hp-terugverdienen-slot {
  grid-column: 2;
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid var(--lijn-goud);
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--text-primary);
  text-wrap: pretty;
}

/* De regel onder de blokken: wat bij elk pakket hoort. */
.variant-redactioneel .hp-product .prijs-voet {
  max-width: 82ch;
  margin: 28px auto 0;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-muted);
  text-wrap: pretty;
}
.hp-product .prijs-voet strong { color: var(--text-secondary); font-weight: 600; }
.hp-product .prijs-voet a { color: var(--text-secondary); text-decoration: none; border-bottom: 1px solid var(--lijn-sterk); }
.hp-product .prijs-voet a:hover { color: var(--goud); border-bottom-color: var(--goud); }

/* Telefoon: de vier blokken naast elkaar in een veegbare reeks, een blok in
   beeld en de buren half zichtbaar, met de pakketkeuze erboven die ook laat
   zien waar je bent (homepage.js zet Pro bij binnenkomst in het midden). */
@media (max-width: 700px) {
  .hp-product .pakketten { --kijkje: 14px; --tussen: 12px; }
  .hp-product .pakketkeuze {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin: 0 0 6px;
  }
  .hp-product .pakketkeuze a {
    display: block;
    padding: 12px 2px 10px;
    border-bottom: 2px solid var(--lijn);
    color: var(--text-muted);
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: color .2s ease, border-color .2s ease;
  }
  .hp-product .pakketkeuze a:hover { color: var(--text-primary); }
  .hp-product .pakketkeuze a[aria-current="true"] {
    color: var(--text-primary);
    border-bottom-color: var(--goud);
  }
  .hp-product .pakketten .prijsraster {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: var(--tussen);
    max-width: none;
    margin: 0 calc(-1 * var(--kolomrand));
    padding: 18px var(--kolomrand) 6px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--kolomrand);
    scrollbar-width: none;
  }
  .hp-product .pakketten .prijsraster::-webkit-scrollbar { display: none; }
  .hp-product .pakketten .prijskaart,
  .hp-product .pakketten .prijskaart + .prijskaart {
    flex: 0 0 min(calc(100% - 2 * var(--kijkje)), 420px);
    height: auto;
    margin: 0;
    padding: 26px 20px;
    scroll-snap-align: center;
  }
  /* Even hoge blokken; Enterprise stopt na de richtprijs, zoals op een groot scherm. */
  .hp-product .pakketten .prijskaart--enterprise { align-self: flex-start; }
  .hp-product .pakketten .pakketinhoud { flex: 1 0 auto; }
  /* Een blok dat opzij staat, hoeft niet eerst in beeld te schuiven. */
  .hp-product .pakketten .prijsraster > .onthul { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 360px) {
  .hp-product .pakketten { --kijkje: 10px; --tussen: 10px; }
  .hp-product .pakketkeuze { gap: 4px; }
  .hp-product .pakketkeuze a { font-size: 0.78rem; }
  .hp-product .pakketten .prijskaart,
  .hp-product .pakketten .prijskaart + .prijskaart { padding: 24px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .hp-product .pakketkeuze a { transition: none; }
}

/* --- Demo: het bestaande formulier in een afgerond slotpaneel ------------ */

.hp-product #demo { padding-top: 0; padding-bottom: clamp(64px, 6.7vw, 96px); }
.hp-product #demo > .omhulsel:first-child::before { display: none; }
.hp-product #demo .contactraster {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 56px;
  padding: 48px;
  background: var(--hp-paneel);
  border: 1px solid var(--lijn);
  border-radius: 28px;
}
.hp-product #demo h2 { font-size: clamp(2rem, 3.1vw, 2.75rem); }
.hp-product #demo .veld textarea { min-height: 0; height: calc(3 * 1.5em + 28px); }
@media (min-width: 621px) {
  .hp-product #demo .veld--groep { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
  .hp-product #demo .veld--groep .veld--keuze + .veld--keuze { margin-top: 0; }
}

/* --- Tussenmaten ---------------------------------------------------------- */

@media (max-width: 1100px) {
  .hp-product #demo .contactraster { padding: 40px; gap: 40px; }
}
@media (max-width: 999px) {
  :where(.hp-product) .hp-panelen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :where(.hp-product) .hp-paneel { grid-column: span 1; }
  :where(.hp-product) .hp-paneel--breed { grid-column: 1 / -1; }
  :where(.hp-product) .hp-terugverdienen { grid-template-columns: minmax(0, 1fr); padding: 40px; }
  :where(.hp-product) .hp-terugverdienen-slot { grid-column: auto; }
}
@media (max-width: 880px) {
  .hp-product #demo .contactraster { grid-template-columns: minmax(0, 1fr); }
}

/* --- Telefoon ------------------------------------------------------------- */

@media (max-width: 700px) {
  :where(.hp-product) .reeks-baan { gap: 12px; }
  :where(.hp-product) .reeks--uitgelicht .reeks-baan { gap: 12px; }
  :where(.hp-product) .dia { flex-basis: calc(100vw - var(--kolomrand) - 56px); }
  :where(.hp-product) .dia-tekst { padding-top: 18px; }
  /* Op een smal scherm het pakketlabel onder de naam, in elke dia op dezelfde
     plek; zo begint de kernzin overal op dezelfde hoogte. */
  :where(.hp-product) .dia-kop { flex-direction: column; align-items: flex-start; min-height: 51px; }
  :where(.hp-product) .onderdeel { flex-basis: 272px; }
  :where(.hp-product) .onderdeel-beeld img { inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); }
  :where(.hp-product) .onderdeel-beeld--detail img { inset: 0 0 auto auto; width: 170%; height: auto; }
  :where(.hp-product) .onderdeel-tekst { padding: 16px 6px 6px; }
  :where(.hp-product) .onderdeel h4 { font-size: 1.12rem; }
  :where(.hp-product) .reeks-voortgang { margin-top: 24px; }
  :where(.hp-product) .reeks-bediening { gap: 10px; margin-top: 20px; }
  :where(.hp-product) .reeks-pijl { width: 44px; height: 44px; }
  .hp-product .reeks-alle { min-height: 44px; padding-inline: 18px; }
}
@media (max-width: 640px) {
  :where(.hp-product) .hp-panelen { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  :where(.hp-product) .hp-paneel,
  :where(.hp-product) .hp-paneel--breed { grid-column: auto; }
  :where(.hp-product) .hp-paneel { padding: 24px; }
  :where(.hp-product) .hp-paneel::before { margin-bottom: 18px; }
  :where(.hp-product) .hp-terugverdienen { padding: 28px 24px; gap: 28px; border-radius: 20px; margin-top: 32px; }
  :where(.hp-product) .hp-terugverdienen-punten { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .hp-product #demo .contactraster { padding: 28px 20px; gap: 28px; border-radius: 20px; }
}
@media (max-width: 380px) {
  .hp-product .reeks-alle { padding-inline: 14px; font-size: 0.86rem; }
  :where(.hp-product) .hp-kop .opschrift { gap: 10px; letter-spacing: 0.14em; }
  :where(.hp-product) .hp-kop .opschrift::before,
  :where(.hp-product) .hp-kop .opschrift::after { width: 18px; }
  :where(.hp-product) .reeks-bediening { gap: 8px; }
}

/* Afwerking na de controle van 23 sept 2026 (avond). */
/* De pijlknoppen van de reeksen blijven rond bij focus via het toetsenbord;
   de algemene regel voor :focus-visible zet de hoeken anders recht. */
.variant-redactioneel :where(.hp-product) .reeks-pijl:focus-visible { border-radius: 50%; }
/* Loopt de linktekst onder een dia over twee regels, dan blijft het pijltje
   achter het laatste woord staan in plaats van los naast de regels. */
.hp-product .dia-tekst .pijllink { display: inline; }
.hp-product .dia-tekst .pijllink::after { display: inline-block; margin-left: 6px; }
/* Link naar de volledige pakketbeschrijving, onderaan elk prijsblok. */
.hp-product .pakket-volledig { margin: 18px 0 0; font-size: 0.9rem; }
.hp-product .pakket-volledig .pijllink { font-size: inherit; display: inline; }
.hp-product .pakket-volledig .pijllink::after { display: inline-block; margin-left: 6px; }
.hp-product .prijskaart--enterprise .pakket-volledig-ent { display: block; margin-top: 14px; font-size: 0.9rem; color: var(--text-primary); }
.hp-product .prijskaart--enterprise .pakket-volledig-ent::after { margin-left: 6px; }
/* Het pijltje van deze links zit met een vaste spatie aan het laatste woord
   vast: het breekt dan mee met dat woord en staat nooit alleen op een regel. */
.hp-product .dia-tekst .pijllink::after,
.hp-product .pakket-volledig .pijllink::after,
.hp-product .prijskaart--enterprise .pakket-volledig-ent::after { display: inline; content: "\00a0\203a"; margin-left: 0; }
/* Regel dat de gegevens op de schermafbeeldingen verzonnen zijn (homepage en
   pagina Weergaven). */
.variant-redactioneel .voorbeeldgegevens { margin: 20px 0 0; font-size: 0.82rem; line-height: 1.5; color: var(--text-muted); text-align: center; }
.variant-redactioneel #weergaven .voorbeeldgegevens { text-align: left; margin-top: 16px; }

/* Links naar artikelen: onder "Meer" op de subpagina's en onder elk artikel (24 sept 2026). */
.variant-redactioneel .artikellinks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.variant-redactioneel .artikellinks li { margin: 0; }
.variant-redactioneel .verder-artikelen { margin-top: clamp(32px, 4vw, 48px); }
.variant-redactioneel #verder .verder-artikelen .opschrift { margin-bottom: 14px; }
.variant-redactioneel .artikel-verder { max-width: 62ch; margin-top: clamp(40px, 5vw, 64px); padding-top: 28px; border-top: 1px solid var(--lijn); }
.variant-redactioneel .artikel-verder .opschrift { margin-bottom: 14px; }
.variant-redactioneel .artikel-verder-product { margin: 20px 0 0; color: var(--text-secondary); }
.variant-redactioneel .artikel-verder-product a { color: var(--text-primary); }

/* Licht en donker (25 sept 2026): hetzelfde Overzicht twee keer, even groot
   naast elkaar met ruimte ertussen, zonder omlijning; op een telefoon onder
   elkaar. Op de homepage onder de kerncijfers en onderaan Weergaven. */
.thema-paar { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); }
.thema-paar > * { min-width: 0; }
@media (max-width: 760px) { .thema-paar { grid-template-columns: 1fr; } }
.thema-paneel { margin: 0; }
.thema-paneel img { display: block; width: 100%; height: auto; border-radius: 10px; }
.thema-paneel figcaption { margin-top: 14px; text-align: center; font-weight: 600; font-size: .95rem; }

/* --- Openingsblok op een telefoon: geen scrollcinema ----------------------
   Kop, tekst en knoppen, daaronder de telefoonopname; niets dat per frame
   beweegt. 1 okt 2026: de scrollcinema schokte in Safari op de iPhone
   en in Chrome leek het scherm stil te staan. site.js zet op een telefoon
   ook .cinema--statisch; deze regels gelden ook zonder script. */
@media (max-width: 700px) {
  .variant-redactioneel .cinema.cinema { height: auto; }
  .variant-redactioneel .cinema.cinema .cinema-toneel { position: static; top: auto; height: auto; overflow: visible; padding-bottom: 40px; }
  .variant-redactioneel .cinema.cinema .cinema-toneel::before,
  .variant-redactioneel .cinema.cinema .cinema-toneel::after { display: none; }
  .variant-redactioneel .cinema.cinema .cinema-tekst { position: static; opacity: 1; transform: none; will-change: auto; padding-top: 40px; padding-bottom: 0; }
  .variant-redactioneel .cinema.cinema .cinema-beeld {
    position: static; translate: none; transform: none; opacity: 1; will-change: auto;
    width: min(72vw, 300px); margin: 32px auto 0;
  }
  .variant-redactioneel .cinema.cinema .cinema-beeld::after { display: none; }
  .variant-redactioneel .cinema.cinema .scrolhint { display: none; }
  /* Geen korrellaag over het hele scherm: op een iPhone wordt die bij elke
     in- en uitklap van de werkbalk opnieuw getekend (SVG-filter). */
  .variant-redactioneel::before { content: none; }
  /* Geen vaste compositinglagen voor elk onthul-blok (prijskaarten, panelen,
     formulier): dat liep op een telefoon tegen de geheugengrens van de
     browser. De overgang zelf promoveert het blok tijdelijk; dat volstaat. */
  .variant-redactioneel .onthul { will-change: auto; }
}

/* --- 23. Hoogtepunten (release analyse en lagen, 2 okt 2026) ------------
   Acht kaarten met een beeld bovenin, het pakketlabel, een titel en twee
   zinnen; breed vier naast elkaar, op een tablet twee, op een telefoon een. */
:where(.hp-product) .hp-hoogtepunten {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1100px) { :where(.hp-product) .hp-hoogtepunten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { :where(.hp-product) .hp-hoogtepunten { grid-template-columns: minmax(0, 1fr); } }
:where(.hp-product) .hp-hoogtepunt {
  display: flex;
  flex-direction: column;
  padding: 0 0 26px;
  background: var(--hp-kaart);
  border: 1px solid var(--lijn);
  border-radius: 16px;
  overflow: hidden;
}
:where(.hp-product) .hp-hoogtepunt-beeld,
:where(.hp-product) .hp-hoogtepunt-plaats {
  margin: 0;
  aspect-ratio: 2 / 1;
  background: #0b0b0b;
  border-bottom: 1px solid var(--lijn);
}
:where(.hp-product) .hp-hoogtepunt-beeld img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
}
:where(.hp-product) .hp-hoogtepunt-beeld--licht { background: #ece8df; padding: 14px; box-sizing: border-box; }
:where(.hp-product) .hp-hoogtepunt-beeld--licht img { object-fit: contain; object-position: center top; background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); }
:where(.hp-product) .hp-hoogtepunt-plaats { display: grid; place-items: center; color: var(--text-muted); font-size: 0.78rem; letter-spacing: 0.04em; }
:where(.hp-product) .hp-pakket {
  display: block;
  margin: 22px 24px 10px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--goud);
}
:where(.hp-product) .hp-hoogtepunt h3 {
  margin: 0 24px 10px;
  font-size: clamp(1.1rem, 1.35vw, 1.3rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
:where(.hp-product) .hp-hoogtepunt p {
  margin: 0 24px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-secondary);
}
:where(.hp-product) .hp-hoogtepunten-slot {
  max-width: 82ch;
  margin: 28px auto 0;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-muted);
}

/* --- 24. Word- en PowerPoint-beelden bij Rapportage (2 okt 2026) ---------
   Lichte documenten op de donkere achtergrond: een lichte rand, de Word-pagina
   staand naast de PowerPoint-dia, onder het beeld van het menu Rapportage. */
.variant-redactioneel .exportbeelden { margin: 20px 0 0; }
.variant-redactioneel .exportbeelden-rij {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* 4 okt 2026: beide beelden liggend, met de grafiek groot */
  gap: 14px;
  align-items: start;
}
.variant-redactioneel .exportbeelden-rij img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  background: #fff;
}
.variant-redactioneel .exportbeelden figcaption { margin-top: 12px; font-size: 0.86rem; }

/* Vroege upload (5 okt 2026): demozin tot de release en het label "vanaf 10 oktober 2026". */
.vroeg-zin { margin: 14px 0 0; padding: 10px 14px; border: 1px solid var(--goud-dof); border-radius: 10px; font-size: 0.92rem; line-height: 1.5; color: var(--text-secondary); }
.vanaf-label { display: inline-block; margin-left: 6px; padding: 1px 7px; border: 1px solid var(--goud-dof); border-radius: 999px; font-size: 0.74em; letter-spacing: 0.02em; color: var(--goud); white-space: nowrap; vertical-align: 1px; }
.plek-vanaf { color: var(--goud); }

/* Voorstel 6 okt 2026: prijskaarten geclusterd per module. */
.modulelijst li.kop { display: block; grid-template-columns: none; list-style: none; margin: 18px 0 4px; padding: 0 0 4px; border-bottom: 1px solid rgba(255,255,255,.08); font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-gold, #d4af37); }
.modulelijst li.kop span { display: block; width: auto; }
.modulelijst li.kop svg { display: none; }
.variant-redactioneel .modulelijst li.kop { display: block; color: var(--goud, #d4af37); }
.modulelijst li.module > span:last-of-type { font-weight: 600; }
.modulelijst .rij-sub { display: block; font-weight: 400; font-size: .92em; color: var(--text-muted, #8a8f98); margin-top: 2px; }
.modulelijst li.sub { padding-left: 26px; }
.modulelijst li.los { color: var(--text-muted, #8a8f98); }
.modulelijst li.los svg { opacity: .7; }
.modulelijst li.sub svg { width: 14px; height: 14px; opacity: .85; }
.modulelijst li.module .rij-noot, .groeplijst .rij-noot { display: block; font-weight: 400; font-size: .92em; color: var(--text-muted, #8a8f98); margin-top: 2px; }
.hp-product .groeplijst .rij-sub, .groeplijst .rij-sub { display: block; font-weight: 400; font-size: .9em; color: var(--text-muted, #8a8f98); margin-top: 2px; }
.modulelijst li.module em + .rij-sub, .groeplijst em + .rij-sub { margin-top: 4px; }

/* Voorstel 6 okt 2026: prijskaarten geclusterd per module. */
.modulelijst li.kop { display: block; grid-template-columns: none; list-style: none; margin: 18px 0 4px; padding: 0 0 4px; border-bottom: 1px solid rgba(255,255,255,.08); font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-gold, #d4af37); }
.modulelijst li.kop span { display: block; width: auto; }
.modulelijst li.kop svg { display: none; }
.variant-redactioneel .modulelijst li.kop { display: block; color: var(--goud, #d4af37); }
.modulelijst li.module > span:last-of-type { font-weight: 600; }
.modulelijst .rij-sub { display: block; font-weight: 400; font-size: .92em; color: var(--text-muted, #8a8f98); margin-top: 2px; }
.modulelijst li.sub { padding-left: 26px; }
.modulelijst li.los { color: var(--text-muted, #8a8f98); }
.modulelijst li.los svg { opacity: .7; }
.modulelijst li.sub svg { width: 14px; height: 14px; opacity: .85; }
.modulelijst li.module .rij-noot, .groeplijst .rij-noot { display: block; font-weight: 400; font-size: .92em; color: var(--text-muted, #8a8f98); margin-top: 2px; }
.hp-product .groeplijst .rij-sub, .groeplijst .rij-sub { display: block; font-weight: 400; font-size: .9em; color: var(--text-muted, #8a8f98); margin-top: 2px; }
.modulelijst li.module em + .rij-sub, .groeplijst em + .rij-sub { margin-top: 4px; }

/* Voorstel 6 okt 2026: prijskaarten geclusterd per module. */
.modulelijst li.kop { display: block; grid-template-columns: none; list-style: none; margin: 18px 0 4px; padding: 0 0 4px; border-bottom: 1px solid rgba(255,255,255,.08); font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-gold, #d4af37); }
.modulelijst li.kop span { display: block; width: auto; }
.modulelijst li.kop svg { display: none; }
.variant-redactioneel .modulelijst li.kop { display: block; color: var(--goud, #d4af37); }
.modulelijst li.module > span:last-of-type { font-weight: 600; }
.modulelijst .rij-sub { display: block; font-weight: 400; font-size: .92em; color: var(--text-muted, #8a8f98); margin-top: 2px; }
.modulelijst li.sub { padding-left: 26px; }
.modulelijst li.los { color: var(--text-muted, #8a8f98); }
.modulelijst li.los svg { opacity: .7; }
.modulelijst li.sub svg { width: 14px; height: 14px; opacity: .85; }
.modulelijst li.module .rij-noot, .groeplijst .rij-noot { display: block; font-weight: 400; font-size: .92em; color: var(--text-muted, #8a8f98); margin-top: 2px; }
.hp-product .groeplijst .rij-sub, .groeplijst .rij-sub { display: block; font-weight: 400; font-size: .9em; color: var(--text-muted, #8a8f98); margin-top: 2px; }
.modulelijst li.module em + .rij-sub, .groeplijst em + .rij-sub { margin-top: 4px; }

/* Dienst en beheer op de prijskaarten (5 okt 2026). */
.modulelijst li.dienstkop { display: block; grid-template-columns: none; list-style: none; margin: 18px 0 4px; padding: 0 0 4px; border-bottom: 1px solid rgba(255,255,255,.08); font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-gold, #d4af37); }
.modulelijst li.dienstkop span { display: block; width: auto; }
.modulelijst li.dienst svg { color: var(--brand-gold, #d4af37); }
.variant-redactioneel .modulelijst li.dienstkop { display: block; color: var(--goud, #d4af37); }
.variant-redactioneel .modulelijst li.dienst svg { color: var(--goud); }

/* Site stap 2 (6 okt 2026): een los lijstblok onder een weergave loopt over de volle tekstbreedte, niet alleen de rechterkolom. */
.variant-redactioneel .weergave-delen .kenmerk[data-lijst] .kenmerk-tekst > ul { grid-column: 1 / -1; }

/* Slotkop van "Hoe Pro en Enterprise zich kunnen terugverdienen" als gouden opschrift, tekst eronder (6 okt 2026).
   De punt achter de kop staat in de bron en blijft voor voorleessoftware weg: .stil. */
:where(.hp-product) .hp-terugverdienen-slot > strong {
  display: block;
  margin: 0 0 10px;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--goud);
}
/* Op Prijzen in de stijl van de vier kopjes daar (.waarde-raster h4: geen kapitalen). */
.variant-redactioneel .waarde p.gedempt > strong {
  display: block;
  margin: 0 0 12px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--goud);
}
.hp-terugverdienen-slot > strong .stil,
.waarde p.gedempt > strong .stil { display: none; }

/* Asset Management op Weergaven: de vier analyses als beelden met bijschrift, twee naast elkaar (6 okt 2026). */
.vier-beelden { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); align-items: start; margin-top: clamp(16px, 2vw, 28px); }
@media (max-width: 880px) { .vier-beelden { grid-template-columns: 1fr; } }

/* Uitgelicht: op telefoons krijgt elke kaart zijn eigen hoogte in plaats van die van de langste kaart (6 okt 2026). */
@media (max-width: 880px) { :where(.hp-product) .reeks--uitgelicht .reeks-baan { align-items: flex-start; } }   /* eigen hoogte op telefoons */

/* Uitgelicht: grotere beelden op telefoons (6 okt 2026): bredere kaart, minder rand om het beeld. */
@media (max-width: 880px) {
  :where(.hp-product) .reeks--uitgelicht .onderdeel { flex-basis: min(86vw, 400px); padding: 8px; }
  :where(.hp-product) .reeks--uitgelicht .onderdeel-beeld img { inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); }
}   /* grotere beelden op telefoons */

/* --- PowerPoint-export (7 okt 2026): reeks van zes dia's op Weergaven en het blok Van dashboard naar presentatie
   op de homepage. Lichte dia's op de donkere achtergrond, zoals de exportbeelden: lichte rand, schaduw. */
.variant-redactioneel .ppt-galerij { grid-column: 1 / -1; margin: 28px 0 0; }
.variant-redactioneel .ppt-galerij-rij { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
.variant-redactioneel .ppt-galerij-rij figure { margin: 0; }
.variant-redactioneel .ppt-galerij-rij img,
:where(.hp-product) .hp-ppt img {
  display: block; width: 100%; height: auto; border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.22); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45); background: #fff;
}
.variant-redactioneel .ppt-galerij-rij figcaption,
:where(.hp-product) .hp-ppt figcaption { margin-top: 10px; font-size: 0.86rem; color: var(--text-secondary); }
.variant-redactioneel .ppt-galerij > figcaption { margin-top: 14px; font-size: 0.86rem; }
@media (max-width: 880px) { .variant-redactioneel .ppt-galerij-rij { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .variant-redactioneel .ppt-galerij-rij { grid-template-columns: minmax(0, 1fr); } }
:where(.hp-product) .hp-ppt-rij { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 28px); align-items: start; }
:where(.hp-product) .hp-ppt:first-child { grid-row: span 2; }
:where(.hp-product) .hp-ppt { margin: 0; }
:where(.hp-product) .hp-ppt:nth-child(2) { transition-delay: .08s; }
:where(.hp-product) .hp-ppt:nth-child(3) { transition-delay: .16s; }
:where(.hp-product) .hp-ppt-actie { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center; }
@media (max-width: 700px) {
  :where(.hp-product) .hp-ppt-rij { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 6px; }
  :where(.hp-product) .hp-ppt { flex: 0 0 84vw; scroll-snap-align: start; }
}

/* Rij met drie artikelen op de homepage (11 okt 2026): tot 1080 px onder elkaar, daarboven drie naast elkaar,
   zodat er op een tablet geen losse derde kaart onder twee andere staat en lange woorden in de kolom passen. */
:where(.hp-product) #artikelen .artikelraster { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1081px) {
  :where(.hp-product) #artikelen .artikelraster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* De kaarten vloeien in zoals de andere blokken van de homepage; de overgang van de bovenlijn blijft. */
.variant-redactioneel :where(.hp-product) #artikelen .artikelkaart.onthul {
  transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1), border-color .25s ease;
}
@media (prefers-reduced-motion: reduce) {
  .variant-redactioneel :where(.hp-product) #artikelen .artikelkaart.onthul { transition: none; }
}
/* Link naar het passende artikel onder de tekst van een weergave (11 okt 2026): loopt de tekst over twee
   regels, dan blijft het pijltje achter het laatste woord. */
.variant-redactioneel .weergave-kop .pijllink { display: inline; }
.variant-redactioneel .weergave-kop .pijllink::after { display: inline; content: "\00a0\203a"; margin-left: 0; }
/* Openingsblok op een telefoon (11 okt 2026): dezelfde liggende opname als op de computer, kleiner, binnen
   de marge van de tekst en in hetzelfde dunne kader met ronde hoeken. Een staand tablet houdt de staande opname. */
@media (max-width: 700px) {
  .variant-redactioneel .cinema.cinema .cinema-beeld { width: min(calc(100% - 40px), 640px); border: 1px solid var(--lijn); border-radius: 12px; overflow: hidden; background: #0c0c0c; }
}
/* Vier kerncijfers sinds 11 okt 2026 ("1 API-account"): vanaf 1200 px vier naast elkaar ("1 API-account" past
   pas vanaf daar in zijn kolom), daaronder tot 621 px twee bij twee (geen losse vierde), op een telefoon onder elkaar zoals voorheen. */
@media (min-width: 1200px) {
  .variant-redactioneel .tellers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hp-product .teller { padding-inline: clamp(10px, 1.2vw, 18px); }
}
@media (min-width: 621px) and (max-width: 1199px) {
  .variant-redactioneel .tellers { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .hp-product .teller:nth-child(odd) { border-left: 0; }
}
/* Label onder het cijfer (11 okt 2026: "€ 0 aansluitkosten", "90 dagen vooruit"): op een eigen regel,
   in dezelfde gouden letter als voorheen, zodat ook de langere labels in een kolom van vier passen. */
.variant-redactioneel .teller-getal .teller-label { display: block; margin-left: 0; margin-top: 0.12em; line-height: 1.2; white-space: normal; text-wrap: balance; }

/* Meer grip als veegrij (minder scrollen op de telefoon). Tot 640 px staan de panelen naast
   elkaar in een rij om door te vegen, zoals de weergaven; dezelfde tekst als op de desktop, niets verborgen. */
@media (max-width: 640px) {
  :where(.hp-product) .hp-panelen {
    display: flex; gap: 12px; margin-inline: calc(-1 * var(--rand)); padding-inline: var(--rand);
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--rand); scrollbar-width: none;
  }
  :where(.hp-product) .hp-panelen::-webkit-scrollbar { display: none; }
  :where(.hp-product) .hp-panelen > .hp-paneel { flex: 0 0 84%; scroll-snap-align: start; min-width: 0; }
  :where(.hp-product) .hp-terugverdienen-link { margin-top: 24px; }
  /* Artikelen op de homepage ook als veegrij (13 okt 2026). */
  :where(.hp-product) #artikelen .artikelraster {
    display: flex; gap: 12px; margin-inline: calc(-1 * var(--rand)); padding-inline: var(--rand);
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--rand); scrollbar-width: none;
  }
  :where(.hp-product) #artikelen .artikelraster::-webkit-scrollbar { display: none; }
  :where(.hp-product) #artikelen .artikelraster > .artikelkaart { flex: 0 0 84%; scroll-snap-align: start; min-width: 0; }
  /* In een veegrij direct zichtbaar: het onthullen bij scrollen werkt alleen verticaal en zou kaarten die je
     snel voorbij veegt onzichtbaar laten. */
  .variant-redactioneel :where(.hp-product) .hp-panelen > .onthul,
  .variant-redactioneel :where(.hp-product) #artikelen .artikelraster > .onthul,
  .variant-redactioneel :where(.hp-product) #artikelen .artikelkaart.onthul { opacity: 1; transform: none; transition: none; }
  /* Presentatie (13 okt 2026): de volgende dia moet zichtbaar uitsteken, zodat duidelijk is dat je kunt vegen. */
  :where(.hp-product) .hp-ppt-rij { margin-inline: calc(-1 * var(--rand)); padding-inline: var(--rand); scroll-padding-inline: var(--rand); overscroll-behavior-x: contain; scrollbar-width: none; }
  :where(.hp-product) .hp-ppt-rij::-webkit-scrollbar { display: none; }
  :where(.hp-product) .hp-ppt { flex: 0 0 84%; }
  .variant-redactioneel :where(.hp-product) .hp-ppt-rij > .onthul { opacity: 1; transform: none; transition: none; }
  /* Licht en donker als veegrij (13 okt 2026): dezelfde twee beelden, naast elkaar om door te vegen. */
  .thema-paar {
    display: flex; gap: 12px; margin-inline: calc(-1 * var(--rand)); padding-inline: var(--rand);
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--rand); scrollbar-width: none;
  }
  .thema-paar::-webkit-scrollbar { display: none; }
  .thema-paar > .thema-paneel { flex: 0 0 84%; scroll-snap-align: start; }
}
:where(.hp-product) .hp-terugverdienen-link { margin: 32px 0 0; }
:where(.hp-product) .hp-terugverdienen-link + .hp-terugverdienen-link { margin-top: 12px; }

/* --- Panelen met pictogram (Waarom AureaDesk, 13 okt 2026) --------------- */
:where(.hp-product) .hp-paneel:has(> .kaart-pictogram)::before { display: none; }
:where(.hp-product) .hp-paneel > .kaart-pictogram { margin-bottom: 22px; }
/* Deze panelen hebben vier rijen (pictogram, kop, belofte, lijst) in plaats van drie. */
@supports (grid-template-rows: subgrid) {
  :where(.hp-product) .hp-paneel:has(> .kaart-pictogram) { grid-row: span 4; }
}
:where(.hp-product) .hp-paneel > .vinklijst { margin-top: 18px; align-self: start; align-content: start; }
:where(.hp-product) .hp-paneel > .paneel-pakket { margin: 0 0 10px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--goud); }
@supports (grid-template-rows: subgrid) {
  :where(.hp-product) .hp-paneel:has(> .paneel-pakket) { grid-row: span 4; }
}

/* --- Cookiebalk: knoppen altijd in beeld (13 okt 2026) ------------------- */
.variant-redactioneel .cookiepaneel .cookiebalk-knoppen {
  position: sticky; bottom: -12px; z-index: 1;
  background: inherit; padding-bottom: 12px; padding-top: 8px; margin-bottom: -12px;
}
@media (min-width: 1000px) {
  .variant-redactioneel .cookiepaneel .cookiebalk-knoppen { position: static; padding: 0; margin-bottom: 0; }
}

/* Firefox 71 t/m 120 (o.a. ESR 115) kent subgrid wel en :has() niet: dan valt span 4 weg en delen kop en tekst een rij. Daar de gewone opbouw zonder subgrid. */
@supports (grid-template-rows: subgrid) and (not selector(:has(*))) {
  :where(.hp-product) .hp-paneel { display: block; grid-row: auto; }
}
/* Prijzen: de kop "Een vaste prijs per maand. Gratis aangesloten." over de volle breedte, inleiding eronder. */
.variant-redactioneel #prijzen > .omhulsel > .midden { grid-template-columns: minmax(0, 1fr); }
.variant-redactioneel #prijzen > .omhulsel > .midden > * { grid-column: 1; grid-row: auto; }
.variant-redactioneel #prijzen > .omhulsel > .midden > h2 { max-width: none; text-wrap: balance; margin-bottom: 18px; }

/* --- Homepage-hero: kop in het oorspronkelijke korps, tweede regel kleiner (13 okt 2026) */
.variant-redactioneel .cinema-tekst h1 .hero-sub { display: block; color: var(--text-primary); opacity: 0.82; font-size: max(0.36em, 1.25rem); line-height: 1.2; letter-spacing: -0.02em; margin-top: 0.35em; }
/* Op de telefoon: tweede kopregel iets groter, lead iets kleiner, voor de verhouding (13 okt 2026). */
@media (max-width: 700px) {
  .variant-redactioneel .cinema-tekst h1 .hero-sub { font-size: 1.4rem; }
  .variant-redactioneel .cinema-tekst .lead { font-size: 1rem; }
}
/* Op brede schermen staat de tweede regel op een regel (13 okt 2026). */
@media (min-width: 701px) {
  .variant-redactioneel .cinema-tekst h1 .hero-sub { white-space: nowrap; width: max-content; position: relative; left: 50%; transform: translateX(-50%); }
  .variant-redactioneel .cinema-tekst .lead { max-width: 78ch; }
}