/* De website van ScreenWatch.
 *
 * Eén stijlblad voor alle pagina's. De kleuren en de maatvoering komen uit
 * statisch/stijl.css van het paneel: --accent is hetzelfde getal, zodat de
 * site en het product dezelfde kleur hebben. Verandert die daar, dan hier ook
 * (test_website.py bewaakt dat).
 *
 * Geen npm en geen bouwstap -- dezelfde afspraak als in het paneel.
 * Mediaqueries staan ONDERAAN: een mediaquery bovenin wordt door de gewone
 * regel erna overschreven, en dan is hij half toegepast. Dat kostte ons
 * 5 oktober een halve ronde (F13).
 */

:root {
  --accent: 258 89% 65%;
  --accent-tekst: 0 0% 100%;
  --achtergrond: 240 20% 98%;
  --voorgrond: 240 10% 3.9%;
  --kaart: 0 0% 100%;
  --gedempt: 240 5% 96%;
  --gedempte-tekst: 240 4% 42%;
  --rand: 240 6% 90%;
  --donker: 240 10% 7%;
  --donker-tekst: 0 0% 98%;
  --radius: 0.65rem;
  /* John, 7 oktober 2026: "de breedte minimaal 1600 px maar goed responsive".
     100 rem is 1600 px; daaronder krimpt alles gewoon mee. */
  --breed: 100rem;

  /* Meer kleur dan alleen het paars van het paneel (John, zelfde dag). De
     magenta komt uit het woordmerk zelf -- "Watch" loopt daar van paars naar
     magenta -- de rest ligt er in de kleurenkring omheen. Bewust GEEN groen
     en geen rood: die betekenen in dit huis "speelt" en "stuk", en die
     betekenis moeten ze houden. */
  --accent2: 322 84% 58%;
  --accent3: 199 89% 46%;
  --accent4: 28 92% 55%;
  --accent5: 243 75% 62%;
  --accent6: 172 66% 40%;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --achtergrond: 240 10% 6%;
    --voorgrond: 0 0% 98%;
    --kaart: 240 10% 10%;
    --gedempt: 240 6% 14%;
    --gedempte-tekst: 240 5% 68%;
    --rand: 240 6% 18%;
    --donker: 240 10% 10%;
    --accent2: 322 84% 66%;
    --accent3: 199 89% 58%;
    --accent4: 28 92% 62%;
    --accent5: 243 80% 72%;
    --accent6: 172 60% 50%;
  }
}
:root[data-theme="dark"] {
  --achtergrond: 240 10% 6%;
  --voorgrond: 0 0% 98%;
  --kaart: 240 10% 10%;
  --gedempt: 240 6% 14%;
  --gedempte-tekst: 240 5% 68%;
  --rand: 240 6% 18%;
  --donker: 240 10% 10%;
  --accent2: 322 84% 66%;
  --accent3: 199 89% 58%;
  --accent4: 28 92% 62%;
  --accent5: 243 80% 72%;
  --accent6: 172 60% 50%;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: hsl(var(--achtergrond));
  color: hsl(var(--voorgrond));
  font: 18px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.binnen { max-width: var(--breed); margin: 0 auto; padding-left: 16px; padding-right: 16px; }
.binnen.smal { max-width: 52rem; }
h1, h2, h3 { line-height: 1.18; letter-spacing: -.025em; text-wrap: balance; margin: 0; }
p, ul, ol { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid hsl(var(--accent)); outline-offset: 2px; }

/* --------------------------------------------------------------- menubalk */
header.balk {
  position: sticky; top: 0; z-index: 20;
  background: hsl(var(--achtergrond) / .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid hsl(var(--rand));
}
header.balk .binnen { display: flex; align-items: center; gap: 1rem; min-height: 4.75rem; }
.merk {
  font-weight: 700; font-size: 30px; text-decoration: none; letter-spacing: -.03em;
  display: inline-block;
}
.merk b { color: hsl(var(--accent)); font-weight: 700; }
.hoofdmenu { margin-left: auto; display: flex; align-items: center; gap: .35rem; }
.hoofdmenu a.punt {
  color: hsl(var(--gedempte-tekst)); text-decoration: none; font-size: 17px;
  padding: .45rem .7rem; border-radius: calc(var(--radius) - 3px);
}
.hoofdmenu a.punt:hover { color: hsl(var(--voorgrond)); background: hsl(var(--gedempt)); }
.hoofdmenu a.punt[aria-current="page"] { color: hsl(var(--accent)); font-weight: 500; }
.menuknop {
  display: none; margin-left: auto; width: 2.6rem; height: 2.6rem;
  align-items: center; justify-content: center;
  background: none; border: 1px solid hsl(var(--rand));
  border-radius: calc(var(--radius) - 3px); color: inherit; cursor: pointer;
}

/* ----------------------------------------------------------------- knoppen */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  height: 3rem; padding: 0 1.35rem; border-radius: calc(var(--radius) - 2px);
  border: 1px solid transparent; background: hsl(var(--accent));
  color: hsl(var(--accent-tekst)); font: inherit; font-weight: 500;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.knop { background: linear-gradient(135deg, hsl(var(--accent)), hsl(var(--accent2))); }
.knop:hover { filter: brightness(1.08); }
.knop.stil {
  background: hsl(var(--kaart)); border-color: hsl(var(--rand)); color: hsl(var(--voorgrond));
}
.knop.stil:hover { background: hsl(var(--gedempt)); filter: none; }
.knop.stil svg { color: hsl(var(--accent)); }
.knop.groot { height: 3.4rem; padding: 0 1.8rem; font-size: 19px; }
.knoprij { display: flex; flex-wrap: wrap; gap: .75rem; }

/* -------------------------------------------------------------------- hero */
.hero {
  padding: clamp(3rem, 8vw, 5.5rem) 0 0;
  position: relative;
}
/* Twee zachte vlekken achter de hero in plaats van een vlakke band: een
   verloop over de hele breedte wordt op 1600 px een strook, en dit blijft op
   elke maat een beeld. Ze staan achter de inhoud en vangen geen klikken. */
.hero::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  /* Over de hele breedte van het venster en tot boven in de sectie. In het
     cms staat de hero BINNEN de tekstkolom (.binnen), en met inset 0 werden
     de vlekken een rechthoek met harde randen links, rechts en boven (John,
     18 oktober 2026: "achtergrond wordt afgekapt"). De sectie knipt wat
     erbuiten valt, zodat er geen zijwaartse schuifbalk komt. */
  inset: 0 calc(50% - 50vw);
  /* Zacht uitvloeien naar onder: zonder dit hield het verloop strak bij de
     onderrand van de hero op, en die rand las als een lijn onder de knop. */
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
          mask-image: linear-gradient(to bottom, #000 55%, transparent);
  background:
    radial-gradient(60rem 28rem at 12% -12%, hsl(var(--accent) / .20), transparent 60%),
    radial-gradient(44rem 24rem at 88% -20%, hsl(var(--accent2) / .16), transparent 62%);
}
.hero h1 { font-size: clamp(38px, 6vw, 76px); max-width: 17ch; }
.hero .lead {
  margin-top: 1.3rem; font-size: clamp(19px, 2.1vw, 24px);
  color: hsl(var(--gedempte-tekst)); max-width: 54ch;
}
.hero .knoprij { margin-top: 2rem; }
.vlagje {
  display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.3rem;
  padding: .4rem .9rem; border-radius: 999px; font-size: 15px; font-weight: 500;
  background: hsl(var(--accent) / .12);
  color: hsl(var(--accent));
  border: 1px solid hsl(var(--accent) / .22);
}
.onderhero {
  margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: .4rem 1.5rem;
  color: hsl(var(--gedempte-tekst)); font-size: 16px;
}
.onderhero span { display: inline-flex; align-items: center; gap: .4rem; }
.onderhero svg { color: hsl(var(--accent)); flex: none; }

/* Het doek waar een schermafdruk op ligt: één schaduw, niet overal. */
.doek {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  border: 1px solid hsl(var(--rand)); border-radius: var(--radius);
  overflow: hidden; background: hsl(var(--kaart));
  box-shadow: 0 24px 60px -24px hsl(var(--voorgrond) / .28);
}
.doek img { width: 100%; }
figure { margin: 0; }
figcaption {
  padding: .8rem 1.1rem; font-size: 15px; color: hsl(var(--gedempte-tekst));
  border-top: 1px solid hsl(var(--rand)); background: hsl(var(--gedempt));
}

/* ----------------------------------------------------------------- secties */
section { padding: clamp(2.75rem, 7vw, 4.75rem) 0; }
section.gedempt {
  background:
    linear-gradient(hsl(var(--accent) / .05), hsl(var(--accent2) / .05)),
    hsl(var(--gedempt));
}
.kopje { font-size: clamp(28px, 4vw, 44px); }
.onderkopje { margin-top: .8rem; color: hsl(var(--gedempte-tekst)); max-width: 62ch; font-size: 20px; }
.opschrift {
  font-size: 14px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: hsl(var(--kleur, var(--accent))); margin-bottom: .6rem;
}

.raster { display: grid; gap: 1rem; margin-top: 2.25rem; }

.kaart {
  background: hsl(var(--kaart)); border: 1px solid hsl(var(--rand));
  border-radius: var(--radius); padding: 1.4rem;
}
.kaart h3 { font-size: 20px; margin-bottom: .5rem; }
.kaart p { color: hsl(var(--gedempte-tekst)); font-size: 17px; }
.kaart > svg { color: hsl(var(--accent)); margin-bottom: .9rem; }

/* Het icoon in een gekleurd vakje. --kleur zet de kaart zelf (.k1 .. .k6), en
   valt terug op het accent als er niets staat -- zo blijft een nieuwe kaart
   zonder klasse gewoon goed. */
.icoonvak {
  --kleur: var(--accent);
  width: 2.75rem; height: 2.75rem; border-radius: calc(var(--radius) - 2px);
  display: grid; place-items: center; margin-bottom: 1rem;
  background: hsl(var(--kleur) / .14); color: hsl(var(--kleur));
}
.icoonvak svg { display: block; }
.k1 .icoonvak { --kleur: var(--accent); }
.k2 .icoonvak { --kleur: var(--accent2); }
.k3 .icoonvak { --kleur: var(--accent3); }
.k4 .icoonvak { --kleur: var(--accent4); }
.k5 .icoonvak { --kleur: var(--accent5); }
.k6 .icoonvak { --kleur: var(--accent6); }
/* Een streepje in de kleur van de kaart langs de bovenrand: genoeg om de
   kaarten uit elkaar te houden, niet zoveel dat het een kermis wordt. */
.raster.gekleurd .kaart { position: relative; overflow: hidden; }
.raster.gekleurd .kaart::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: hsl(var(--kleur, var(--accent)));
}
.raster.gekleurd .k1 { --kleur: var(--accent); }
.raster.gekleurd .k2 { --kleur: var(--accent2); }
.raster.gekleurd .k3 { --kleur: var(--accent3); }
.raster.gekleurd .k4 { --kleur: var(--accent4); }
.raster.gekleurd .k5 { --kleur: var(--accent5); }
.raster.gekleurd .k6 { --kleur: var(--accent6); }

/* Afwisselend beeld en tekst: de rij draait om op even blokken. */
.duo { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; margin-top: 2.5rem; }
.duo h3 { font-size: clamp(23px, 2.8vw, 32px); }
.duo p { margin-top: .7rem; color: hsl(var(--gedempte-tekst)); }
.duo ul { margin-top: 1rem; padding-left: 1.1rem; color: hsl(var(--gedempte-tekst)); }
.duo li + li { margin-top: .35rem; }

/* Tekst met een schermafdruk eronder. Bewust NIET naast elkaar: een afdruk
   van het paneel wordt op halve breedte 534 px en dan is de tabel onleesbaar.
   Gemeten op 1280 px: naast de tekst 534 px breed, eronder 1216 px. */
.toon + .toon { margin-top: clamp(2.5rem, 6vw, 4rem); }
.toon .uitleg { max-width: 62ch; }
.toon .uitleg h3 { font-size: clamp(23px, 2.8vw, 32px); }
.toon .uitleg p { margin-top: .7rem; color: hsl(var(--gedempte-tekst)); }
.toon .uitleg ul { margin-top: 1rem; padding-left: 1.1rem; color: hsl(var(--gedempte-tekst)); }
.toon .uitleg li + li { margin-top: .35rem; }
.toon .doek { margin-top: 1.75rem; }

/* Stappen: genummerd omdat het echt een volgorde is. */
ol.stappen { list-style: none; counter-reset: stap; padding: 0; display: grid; gap: 1.25rem; margin-top: 2.25rem; }
ol.stappen li { counter-increment: stap; position: relative; padding-left: 3.1rem; }
ol.stappen li::before {
  content: counter(stap); position: absolute; left: 0; top: -.15rem;
  width: 2.2rem; height: 2.2rem; display: grid; place-items: center;
  border-radius: 999px; background: hsl(var(--kleur, var(--accent)));
  color: hsl(var(--accent-tekst)); font-weight: 600; font-size: 15px;
}
ol.stappen li:nth-child(1) { --kleur: var(--accent); }
ol.stappen li:nth-child(2) { --kleur: var(--accent5); }
ol.stappen li:nth-child(3) { --kleur: var(--accent2); }
ol.stappen h3 { font-size: 20px; margin-bottom: .35rem; }
ol.stappen p { color: hsl(var(--gedempte-tekst)); font-size: 17px; }

/* Plekken, los van een kaart: het is een opsomming, geen zes objecten. */
.plekken { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.75rem; }
.plekken span {
  padding: .5rem .95rem; border-radius: 999px; font-size: 16px;
  border: 1px solid hsl(var(--kleur, var(--accent)) / .3);
  background: hsl(var(--kleur, var(--accent)) / .1);
  color: hsl(var(--kleur, var(--accent)));
}
.plekken span:nth-child(6n+1) { --kleur: var(--accent); }
.plekken span:nth-child(6n+2) { --kleur: var(--accent2); }
.plekken span:nth-child(6n+3) { --kleur: var(--accent3); }
.plekken span:nth-child(6n+4) { --kleur: var(--accent4); }
.plekken span:nth-child(6n+5) { --kleur: var(--accent5); }
.plekken span:nth-child(6n+6) { --kleur: var(--accent6); }

/* Tabellen (apparaten, vergelijking). Alleen de tabel rolt, nooit de pagina. */
.rolbaar { overflow-x: auto; margin-top: 1.75rem; }
table.lijstje { width: 100%; border-collapse: collapse; font-size: 17px; }
table.lijstje th, table.lijstje td {
  text-align: left; padding: .85rem .7rem; border-bottom: 1px solid hsl(var(--rand)); vertical-align: top;
}
table.lijstje th {
  font-size: 13px; text-transform: uppercase; letter-spacing: .05em;
  color: hsl(var(--gedempte-tekst)); font-weight: 600; white-space: nowrap;
}
table.lijstje td:first-child { font-weight: 500; }
table.lijstje td.grijs { color: hsl(var(--gedempte-tekst)); }

/* Vragen: <details>, dus hij werkt ook zonder javascript. */
.vragen { margin-top: 2rem; border-top: 1px solid hsl(var(--rand)); }
.vragen details { border-bottom: 1px solid hsl(var(--rand)); }
.vragen details:last-child { border-bottom: 0; }
.vragen summary {
  padding: 1.2rem 2rem 1.2rem 0; cursor: pointer; font-weight: 500; font-size: 19px; position: relative;
  list-style: none;
}
.vragen summary::-webkit-details-marker { display: none; }
.vragen summary::after {
  content: ""; position: absolute; right: .4rem; top: 1.45rem;
  width: .55rem; height: .55rem; border-right: 2px solid hsl(var(--accent));
  border-bottom: 2px solid hsl(var(--accent)); transform: rotate(45deg);
  transition: transform .15s;
}
.vragen details[open] summary::after { transform: rotate(-135deg); top: 1.7rem; }
.vragen p { padding: 0 2rem 1.2rem 0; color: hsl(var(--gedempte-tekst)); }

/* Afsluiter */
.afsluiter {
  background:
    radial-gradient(40rem 20rem at 20% 0%, hsl(var(--accent) / .55), transparent 65%),
    radial-gradient(36rem 20rem at 85% 110%, hsl(var(--accent2) / .45), transparent 60%),
    hsl(var(--donker));
  color: hsl(var(--donker-tekst));
  border-radius: var(--radius); padding: clamp(2rem, 5vw, 3.5rem); text-align: center;
}
.afsluiter h2 { font-size: clamp(26px, 3.6vw, 38px); }
.afsluiter p { margin-top: .8rem; font-size: 19px; color: hsl(0 0% 100% / .78); max-width: 52ch; margin-inline: auto; }
.afsluiter .knoprij { justify-content: center; margin-top: 1.8rem; }
.afsluiter .knop.stil { background: transparent; border-color: hsl(0 0% 100% / .25); color: hsl(var(--donker-tekst)); }
.afsluiter .knop.stil:hover { background: hsl(0 0% 100% / .1); }

/* Voet */
footer.voet { border-top: 1px solid hsl(var(--rand)); padding: 3rem 0; font-size: 16px; }
footer.voet .kolommen { display: grid; gap: 1.75rem; }
footer.voet .merk { font-size: 24px; }
footer.voet h4 { margin: 0 0 .7rem; font-size: 14px; text-transform: uppercase; letter-spacing: .05em; color: hsl(var(--gedempte-tekst)); }
footer.voet ul { list-style: none; padding: 0; display: grid; gap: .4rem; }
footer.voet a { color: hsl(var(--gedempte-tekst)); text-decoration: none; }
footer.voet a:hover { color: hsl(var(--voorgrond)); }
footer.voet .slot {
  margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid hsl(var(--rand));
  color: hsl(var(--gedempte-tekst));
}

/* ------------------------------------------------- secties uit het cms
 * Sinds het cms (1.102.0) kiest de redacteur per sectie de achtergrond, de
 * breedte, de ruimte eromheen en het aantal kolommen. Die keuzes staan in het
 * schema (cms/secties.py); hier staat wat ze doen. Eén plek, zoals altijd:
 * een eigen variant naast een huisregel loopt er altijd van weg.
 */
section.sectie { padding: var(--ruimte, 4rem) 0; }
/* De sectie met de hero heeft op ELKE pagina dezelfde maat (John, 18 oktober
   2026: "verschillende hoogte van teksten in de hero, het is nergens
   consistent"). Bij het invoeren kreeg elke pagina een eigen "ruimte", van 0
   tot 4 rem; de hero regelt zijn lucht nu zelf, boven en onder, en de
   instelling ruimte geldt hier niet. Boven iets krapper dan onder: John wilde
   minder ruimte tussen de menubalk en de kop. */
/* De lucht ONDER komt van de sectie en niet van de hero, zodat het niet
   uitmaakt of er een schermafdruk onder staat (de voorpagina) of niet. Eerst
   hing dat aan een regel "hero direct gevolgd door een doek"; op de live site
   stond het doek daardoor strak tegen de volgende sectie, met een streep
   ertussen. */
section.sectie:has(> .binnen > .hero) { overflow: clip; padding: 0 0 clamp(3.5rem, 7vw, 5rem); }
section.sectie:has(> .binnen > .hero) .hero { padding: clamp(2.5rem, 5vw, 4rem) 0 0; }
section.sectie.gedempt {
  background:
    linear-gradient(hsl(var(--accent) / .05), hsl(var(--accent2) / .05)),
    hsl(var(--gedempt));
}
section.sectie.donker {
  background: hsl(var(--donker)); color: hsl(var(--donker-tekst));
}
/* De afsluiter in een donkere baan: het verloop hoort op de BAAN, over de
   hele breedte. Als kaart in de baan bleef er rondom een zwarte rand over
   en las het als een achtergrond die niet vult (John, 18 oktober 2026). Op
   een lichte baan blijft hij de kaart die hij altijd was. */
section.sectie.donker:has(> .binnen > .afsluiter) {
  background:
    radial-gradient(48rem 24rem at 20% 0%, hsl(var(--accent) / .55), transparent 65%),
    radial-gradient(44rem 24rem at 85% 110%, hsl(var(--accent2) / .45), transparent 60%),
    hsl(var(--donker));
}
section.sectie.donker .afsluiter { background: none; border-radius: 0; padding-inline: 0; }
section.sectie.donker .onderkopje,
section.sectie.donker .lopend { color: hsl(0 0% 100% / .75); }
section.sectie.verloop {
  background:
    radial-gradient(50rem 24rem at 12% 0%, hsl(var(--accent) / .18), transparent 62%),
    radial-gradient(40rem 22rem at 88% 100%, hsl(var(--accent2) / .14), transparent 60%),
    hsl(var(--achtergrond));
}
.binnen.ruim { max-width: min(110rem, 100%); }

.uit-midden { text-align: center; }
.uit-midden .lead, .uit-midden .onderkopje { margin-inline: auto; }
.uit-midden .knoprij, .uit-midden .onderhero { justify-content: center; }
.uit-rechts { text-align: right; }
.uit-rechts .knoprij, .uit-rechts .onderhero { justify-content: flex-end; }

.lopend { max-width: 65ch; }
.lopend p + p { margin-top: 1rem; }
.lopend ul, .lopend ol { margin: 1rem 0 1rem 1.2rem; }
.lopend li + li { margin-top: .3rem; }
.lopend a { color: hsl(var(--accent)); }
.naraster { margin-top: 2rem; }

/* Prijzen (cms-1.3.0, in de stijl van OptiSigns sinds 1.4.0): schakelaar
   bovenaan, het uitgelichte pakket met een tab erboven, de centen klein, een
   kop boven de functies, vinkjes in een rondje en een supportvak onderaan.
   De schakelaar per jaar / per maand zet data-periode op .prijzen (site.js). */
.prijzen { margin-top: 2.25rem; }
.periodekeus {
  display: inline-flex; gap: .3rem; padding: .3rem; margin-bottom: 1.75rem;
  border: 1px solid hsl(var(--rand)); border-radius: calc(var(--radius) + 4px); background: hsl(var(--kaart));
}
.periodekeus button {
  font: inherit; font-size: 17px; font-weight: 600; border: 0; cursor: pointer; line-height: 1.15;
  min-width: 9rem; padding: .65rem 1.4rem; border-radius: var(--radius);
  background: hsl(var(--gedempt)); color: hsl(var(--gedempte-tekst));
}
.periodekeus button small { display: block; font-size: 13px; font-weight: 500; }
.periodekeus button.hier { background: hsl(var(--accent)); color: #fff; }
.pakketten { display: grid; gap: 1.25rem; text-align: left; }
.pakket {
  position: relative; display: flex; flex-direction: column;
  background: hsl(var(--kaart)); border: 1px solid hsl(var(--rand));
  border-radius: var(--radius); padding: 1.75rem 1.5rem 1.5rem;
}
.pakket.uitgelicht {
  border-color: hsl(var(--accent) / .45);
  background: linear-gradient(hsl(var(--accent) / .07), hsl(var(--accent2) / .03)), hsl(var(--kaart));
  box-shadow: 0 24px 60px -30px hsl(var(--accent) / .55);
}
/* Het label is een badge IN het pakket, rechtsboven. Als tab erboven stak
   het uitgelichte pakket boven de andere uit (John, 18 oktober 2026: "alle
   drie even hoog"). */
.pakketlabel {
  position: absolute; top: 1.4rem; right: 1.4rem; padding: .3rem .8rem;
  border-radius: 999px; font-size: 13px; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, hsl(var(--accent)), hsl(var(--accent2)));
}
.pakket.heeftlabel h3 { padding-right: 9rem; }
.pakket h3 { font-size: clamp(24px, 2.4vw, 30px); }
/* Altijd twee regels hoog, ook als de uitleg er één is: dan staan de prijzen
   en de knoppen van alle pakketten op dezelfde hoogte. */
.pakketuitleg { color: hsl(var(--gedempte-tekst)); font-size: 17px; margin-top: .3rem; min-height: 3.4em; min-height: 2lh; }
.prijs { margin-top: 1rem; }
.prijs .bedrag { font-size: clamp(44px, 4.6vw, 58px); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.prijs .munt { font-size: .5em; vertical-align: .62em; margin-right: .1em; font-weight: 700; }
.prijs .centen { font-size: .5em; letter-spacing: 0; font-weight: 700; }
.prijs .eenheid { color: hsl(var(--gedempte-tekst)); font-size: 16px; margin-top: .5rem; }
.prijs .eenheid span { display: block; font-size: 14px; }
.pakket .knop { width: 100%; justify-content: center; margin-top: 1.5rem; }
.kopfuncties { font-weight: 700; margin-top: 1.75rem; }
.functies { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .8rem; font-size: 16px; }
/* Een gevuld rondje met een wit vinkje, zoals in vrijwel elke prijstabel:
   één svg in het sjabloon, op de eerste regel van de tekst gecentreerd. */
.functies li { display: grid; grid-template-columns: 1.25rem 1fr; gap: .75rem; line-height: 1.45; }
.functies .vink { width: 1.25rem; height: 1.25rem; margin-top: calc((1.45em - 1.25rem) / 2); }
.functies .vink circle { fill: hsl(var(--accent)); }
.functies .vink path { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.functies li.leeg { display: block; color: hsl(var(--gedempte-tekst)); font-style: italic; }
/* Het supportvak is bij elk pakket gelijk: een zacht paars verloop met
   dikke letters. Eerst fel paars met witte tekst; dat schreeuwde harder dan
   de knop erboven (John, 18 oktober 2026: "toch wat rustiger maken maar
   misschien lettertype wat dikker"). */
.supportvak {
  margin-top: auto; padding: .9rem; border-radius: calc(var(--radius) - 2px); text-align: center;
  font-size: 16px; font-weight: 600; color: hsl(var(--voorgrond));
  background: linear-gradient(135deg, hsl(var(--accent) / .12), hsl(var(--accent2) / .12));
  border: 1px solid hsl(var(--accent) / .2);
}
.pakket > .functies { margin-bottom: 1.75rem; }
.supportvak .supportkop { display: block; font-weight: 700; color: hsl(var(--accent));
  font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.prijzen[data-periode="jaar"] [data-alleen="maand"],
.prijzen[data-periode="maand"] [data-alleen="jaar"] { display: none; }

/* Producten (cms-1.8.0): de hardwarepagina. Dezelfde kaart, label, prijs en
   knop als bij de prijzen; erbij een foto bovenaan en de specificaties als
   rijtje "naam -- waarde". */
.producten { display: grid; gap: 1.25rem; margin-top: 2.25rem; }
.product {
  position: relative; display: flex; flex-direction: column;
  background: hsl(var(--kaart)); border: 1px solid hsl(var(--rand));
  border-radius: var(--radius); padding: 1.5rem;
}
.product.uitgelicht {
  border-color: hsl(var(--accent) / .45);
  background: linear-gradient(hsl(var(--accent) / .07), hsl(var(--accent2) / .03)), hsl(var(--kaart));
  box-shadow: 0 24px 60px -30px hsl(var(--accent) / .55);
}
.productfoto {
  margin: 0 0 1.25rem; border-radius: calc(var(--radius) - 2px); overflow: hidden;
  background: #fff; aspect-ratio: 16 / 9; display: grid; place-items: center;
}
.productfoto img { width: 100%; height: 100%; object-fit: contain; }
.product h3 { font-size: clamp(24px, 2.4vw, 30px); }
.product.uitgelicht .pakketlabel, .product .pakketlabel { top: 1rem; right: 1rem; z-index: 1; }
.product .pakketuitleg { min-height: 0; }
.product .knop { width: 100%; justify-content: center; margin-top: 1.25rem; }
.specs { margin: 1.5rem 0 0; display: grid; }
.specs > div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding: .6rem 0;
  border-top: 1px solid hsl(var(--rand)); font-size: 15px; }
.specs dt { color: hsl(var(--gedempte-tekst)); }
.specs dd { margin: 0; }

/* Kaarten: het aantal kolommen komt uit de sectie. */
.raster.kolommen-2, .raster.kolommen-3, .raster.kolommen-4 { grid-template-columns: 1fr; }
a.kaart { text-decoration: none; display: block; }
a.kaart:hover { border-color: hsl(var(--accent) / .5); }

/* Tekst met beeld: onder, of ernaast. */
.duo.plek-onder { display: block; }
.duo.plek-onder .doek { margin-top: 1.75rem; }

/* Galerij */
.galerij { display: grid; gap: 1rem; margin-top: 2rem; grid-template-columns: 1fr; }
.galerij figure { margin: 0; }
.galerij img {
  width: 100%; border-radius: var(--radius); border: 1px solid hsl(var(--rand));
  display: block;
}
.galerij.vorm-vierkant img { aspect-ratio: 1; object-fit: cover; }
.galerij.vorm-breed img { aspect-ratio: 16 / 9; object-fit: cover; }
.galerij.vorm-staand img { aspect-ratio: 3 / 4; object-fit: cover; }
.galerij figcaption { margin-top: .5rem; font-size: 15px; color: hsl(var(--gedempte-tekst)); }

/* Citaat */
.citaat { margin: 0; text-align: center; max-width: 52rem; margin-inline: auto; }
.citaat .portret {
  width: 5rem; height: 5rem; border-radius: 999px; object-fit: cover;
  margin: 0 auto 1.2rem;
}
.citaat blockquote {
  margin: 0; font-size: clamp(22px, 3vw, 32px); line-height: 1.3;
  letter-spacing: -.02em; text-wrap: balance;
}
.citaat figcaption { margin-top: 1.2rem; display: grid; gap: .1rem; }
.citaat figcaption span { color: hsl(var(--gedempte-tekst)); font-size: 16px; }

/* Formulier. De valstrik staat BUITEN beeld en niet op display:none --
   sommige robots vullen juist alleen in wat verborgen is, en een leesbril
   mag hem ook niet voorlezen (vandaar aria-hidden in het sjabloon). */
.cmsformulier { display: grid; gap: 1rem; max-width: 40rem; margin-top: 2rem; }
.cmsformulier label { display: grid; gap: .35rem; }
.cmsformulier label span { font-size: 15px; font-weight: 500; }
.cmsformulier input, .cmsformulier textarea {
  font: inherit; padding: .7rem .9rem; border: 1px solid hsl(var(--rand));
  border-radius: calc(var(--radius) - 2px); background: hsl(var(--kaart));
  color: inherit; width: 100%;
}
.cmsformulier .valstrik {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}
.cmsformulier button { justify-self: start; }

/* Film: pas laden als iemand klikt. */
.film {
  position: relative; margin-top: 2rem; border-radius: var(--radius);
  overflow: hidden; background: hsl(var(--gedempt)); aspect-ratio: 16 / 9;
}
.film img, .film iframe { width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }
.film .afspelen {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: hsl(240 10% 4% / .25); border: 0; color: #fff; cursor: pointer;
}
.film .afspelen:hover { background: hsl(240 10% 4% / .35); }
.geenbeeld {
  display: grid; place-items: center; min-height: 10rem; color: hsl(var(--gedempte-tekst));
  border: 1px dashed hsl(var(--rand)); border-radius: var(--radius);
}
.voetregel { margin-top: .6rem; color: hsl(var(--gedempte-tekst)); max-width: 30ch; }

/* ------------------------------------------------------- mediaqueries, laatst */
@media (min-width: 46rem) {
  .raster.twee { grid-template-columns: repeat(2, 1fr); }
  .raster.kolommen-2 { grid-template-columns: repeat(2, 1fr); }
  .raster.kolommen-3 { grid-template-columns: repeat(3, 1fr); }
  /* Vier kaarten in drie kolommen geeft drie en een losse eronder (John:
     "bij het probleem staan 4 vlakken"). Dan twee bij twee. */
  .raster.kolommen-3:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }
  .raster.kolommen-4 { grid-template-columns: repeat(2, 1fr); }
  .galerij.kolommen-2 { grid-template-columns: repeat(2, 1fr); }
  .galerij.kolommen-3 { grid-template-columns: repeat(3, 1fr); }
  .galerij.kolommen-4 { grid-template-columns: repeat(2, 1fr); }
  .duo.plek-rechts, .duo.plek-links { grid-template-columns: 1fr 1fr; }
  .duo.plek-links .doek { order: -1; }
  .raster.drie { grid-template-columns: repeat(3, 1fr); }
  ol.stappen { grid-template-columns: repeat(3, 1fr); }
  .duo { grid-template-columns: 1fr 1fr; }
  .duo.omgekeerd .beeld { order: -1; }
  /* Het merk breed, en daarna zoveel kolommen als er groepen in het menu van
     de voet staan: met Branches erbij (18 oktober 2026) viel de vijfde
     groep anders naar een tweede rij. */
  footer.voet .kolommen { grid-template-columns: 2fr repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; }
}
@media (min-width: 60rem) {
  .raster.vier { grid-template-columns: repeat(4, 1fr); }
  .raster.kolommen-4 { grid-template-columns: repeat(4, 1fr); }
  .pakketten.aantal-2 { grid-template-columns: repeat(2, 1fr); }
  .producten.aantal-2, .producten.aantal-4 { grid-template-columns: repeat(2, 1fr); }
  .producten.aantal-3 { grid-template-columns: repeat(3, 1fr); }
  .pakketten.aantal-3 { grid-template-columns: repeat(3, 1fr); }
  .pakketten.aantal-4 { grid-template-columns: repeat(4, 1fr); }
  .galerij.kolommen-4 { grid-template-columns: repeat(4, 1fr); }
}
/* Het menu klapt in tot 70rem. Met zeven punten (Branches en Prijzen erbij,
   18 oktober 2026) had het 1050 px nodig, en tussen 832 en 1050 px schoof de
   hele pagina daardoor 26 px zijwaarts. */
@media (max-width: 70rem) {
  .hoofdmenu {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: .25rem;
    padding: .75rem 16px 1.1rem;
    background: hsl(var(--achtergrond)); border-bottom: 1px solid hsl(var(--rand));
  }
  .hoofdmenu.open { display: flex; }
  .hoofdmenu .knop { margin-top: .4rem; }
  .menuknop { display: inline-flex; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}
/* Thema van deze site. Door het cms gezet; hier niets met de hand wijzigen. */
:root {
  --accent: 258 89% 65%;
  --accent2: 322 84% 58%;
  --accent3: 199 89% 46%;
  --accent4: 28 92% 55%;
  --accent5: 243 75% 62%;
  --accent6: 172 66% 40%;
}
:root {
  --radius: 0.65rem;
  --breed: 100rem;
}
body { font-size: 18px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
:root[data-theme="light"] {
  --achtergrond: 240 20% 98%;
  --voorgrond: 240 10% 3.9%;
  --kaart: 0 0% 100%;
  --rand: 240 6% 90%;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --achtergrond: 240 20% 98%;
    --voorgrond: 240 10% 3.9%;
    --kaart: 0 0% 100%;
    --rand: 240 6% 90%;
  }
}