/* GEGENEREERD door huisstijl/w15.py -- niet met de hand bewerken.
   De opmaak van beide varianten, elk onder een eigen prefix (.variant-1, .variant-2), plus
   de glas-CSS van een variant die een eigen glasbestand heeft. Kleuren en maten uit tokens.css. */

.variant { margin: var(--ruimte-8) 0; }
.variant-kop {
  font-family: var(--letter-display);
  font-size: var(--tekst-xl);
  line-height: var(--regel-strak);
  letter-spacing: var(--spatiering-kop);
  color: var(--kleur-inkt-gedempt);
  margin: 0 0 var(--ruimte-4);
  padding-bottom: var(--ruimte-2);
  border-bottom: 1px solid var(--kleur-rand);
}
.merk-naam { font-family: var(--letter-display); font-weight: var(--gewicht-vet); letter-spacing: var(--spatiering-kop); }

/* ---------- glas-CSS van variant 1 (eigen glasbestand van de bouwer) ---------- */
/* Glas is versiering: deze dekkende vlakken dragen tekst en contrast zelfstandig. */
:root {
  --glas-vlak-doorschijnend: oklch(27.215% 0.02303 284.464 / 0.92);
}

:root[data-thema="licht"] {
  --glas-vlak-doorschijnend: oklch(96.500% 0.00400 284.464 / 0.92);
}

.glas-nav,
.glas-kaart,
.glas-cta {
  color: var(--kleur-inkt);
  background-color: var(--kleur-vlak-1);
  border: 1px solid var(--kleur-rand);
  box-shadow: var(--schaduw-m);
}

.glas-nav {
  position: sticky;
  z-index: 10;
  top: var(--ruimte-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ruimte-4);
  max-width: var(--maat-pagina);
  margin: var(--ruimte-3) auto 0;
  padding: var(--ruimte-3) var(--ruimte-4);
  border-radius: var(--radius-rond);
}

.glas-kaart,
.glas-cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-l);
}

.glas-kaart {
  padding: var(--ruimte-6);
}

.glas-kaart::before {
  position: absolute;
  inset: -45% 25% 45% -25%;
  border-radius: 50%;
  background: radial-gradient(circle, oklch(73.993% 0.12154 201.689 / 0.16), transparent 68%);
  content: "";
  pointer-events: none;
  transform: translate3d(-8%, -6%, 0);
  transition: transform var(--duur) var(--curve);
}

.glas-kaart > * {
  position: relative;
}

.glas-kaart:hover::before,
.glas-kaart:focus-within::before {
  transform: translate3d(30%, 18%, 0);
}

.glas-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ruimte-6);
  padding: var(--ruimte-6);
}

.glas-knop {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  padding: var(--ruimte-3) var(--ruimte-5);
  color: var(--kleur-accent-inkt);
  background-color: var(--kleur-accent);
  border: 1px solid var(--kleur-accent);
  border-radius: var(--radius-rond);
  font: inherit;
  font-weight: var(--gewicht-vet);
  text-decoration: none;
}

.glas-knop:focus-visible {
  outline: 3px solid var(--kleur-focus);
  outline-offset: 3px;
}

@supports (backdrop-filter: blur(1px)) {
  .glas-nav,
  .glas-kaart,
  .glas-cta {
    background-color: var(--glas-vlak-doorschijnend);
    backdrop-filter: blur(18px) saturate(135%);
  }
}

/* Een Chromium-extra: het SVG-filter verandert alleen het beeld achter het vlak. */
@supports (backdrop-filter: url("#glas-breking")) {
  .glas-nav,
  .glas-cta {
    backdrop-filter: url("#glas-breking") blur(18px) saturate(135%);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .glas-nav,
  .glas-kaart,
  .glas-cta {
    background-color: var(--kleur-vlak-1);
    backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .glas-kaart::before {
    transform: none;
    transition: none;
  }
}

@media (max-width: 42rem) {
  .glas-nav {
    margin-inline: var(--ruimte-3);
  }

  .glas-cta {
    grid-template-columns: 1fr;
  }
}

/* ---------- variant 1 ---------- */
.variant-1 {
  box-sizing: border-box;
  min-height: 100vh;
  padding: var(--ruimte-sectie) max(var(--ruimte-5), calc((100% - var(--maat-pagina)) / 2));
  color: var(--kleur-inkt);
  background:
    radial-gradient(circle at 50% 18%, var(--sier-gloed), transparent 34rem),
    var(--kleur-grond);
  font-family: var(--letter-tekst);
  line-height: var(--regel-tekst);
}

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

.variant-1 .variant-1__kop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--ruimte-6);
  margin-bottom: var(--ruimte-7);
}

.variant-1 .variant-1__kop > div:first-child {
  max-width: 48rem;
}

.variant-1 .variant-1__bovenkop,
.variant-1 .variant-1__label {
  margin: 0 0 var(--ruimte-3);
  color: var(--kleur-accent-tekst);
  font-size: var(--tekst-xs);
  font-weight: var(--gewicht-vet);
  letter-spacing: var(--spatiering-label);
  text-transform: uppercase;
}

.variant-1 h2,
.variant-1 h3 {
  margin: 0;
  font-family: var(--letter-display);
  line-height: var(--regel-strak);
  letter-spacing: var(--spatiering-kop);
}

.variant-1 h2 {
  max-width: 18ch;
  font-size: var(--tekst-3xl);
}

.variant-1 h3 {
  min-height: 2.2em;
  font-size: var(--tekst-xl);
}

.variant-1 .variant-1__intro {
  max-width: var(--maat-tekst);
  margin: var(--ruimte-4) 0 0;
  color: var(--kleur-inkt-gedempt);
  font-size: var(--tekst-l);
}

.variant-1 .variant-1__thema {
  display: grid;
  justify-items: end;
  gap: var(--ruimte-1);
}

.variant-1 .variant-1__themaknop {
  min-height: 2.75rem;
  padding: var(--ruimte-2) var(--ruimte-4);
  color: var(--kleur-inkt);
  background: var(--kleur-vlak-2);
  border: 1px solid var(--kleur-rand-sterk);
  border-radius: var(--radius-rond);
  font: inherit;
  font-weight: var(--gewicht-halfvet);
  cursor: pointer;
}

.variant-1 .variant-1__thema small,
.variant-1 .variant-1__btw,
.variant-1 .variant-1__slot {
  color: var(--kleur-inkt-gedempt);
}

.variant-1 .variant-1__raster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ruimte-5);
  align-items: stretch;
}

.variant-1 .variant-1__kaart {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.variant-1 .variant-1__kaart--uitgelicht {
  border-color: var(--kleur-accent);
  transform: translateY(calc(-1 * var(--ruimte-3)));
}

.variant-1 .variant-1__keuze {
  align-self: flex-start;
  margin: calc(-1 * var(--ruimte-3)) 0 var(--ruimte-4);
  padding: var(--ruimte-1) var(--ruimte-3);
  color: var(--kleur-accent-inkt);
  background: var(--kleur-accent);
  border-radius: var(--radius-rond);
  font-size: var(--tekst-xs);
  font-weight: var(--gewicht-vet);
  letter-spacing: var(--spatiering-label);
  text-transform: uppercase;
}

.variant-1 .variant-1__prijs {
  display: flex;
  align-items: baseline;
  gap: var(--ruimte-2);
  margin: var(--ruimte-5) 0 0;
  color: var(--kleur-inkt-gedempt);
}

.variant-1 .variant-1__prijs span {
  color: var(--kleur-inkt);
  font: var(--gewicht-vet) var(--tekst-3xl)/1 var(--letter-display);
  letter-spacing: var(--spatiering-kop);
}

.variant-1 .variant-1__btw {
  margin: var(--ruimte-1) 0 var(--ruimte-5);
  font-size: var(--tekst-xs);
}

.variant-1 ul {
  display: grid;
  gap: var(--ruimte-3);
  margin: 0 0 var(--ruimte-6);
  padding: 0;
  list-style: none;
}

.variant-1 li {
  position: relative;
  padding-left: var(--ruimte-5);
  color: var(--kleur-inkt-gedempt);
}

.variant-1 li::before {
  position: absolute;
  left: 0;
  color: var(--kleur-accent-tekst);
  content: "✓";
  font-weight: var(--gewicht-vet);
}

.variant-1 .variant-1__knop {
  width: 100%;
  margin-top: auto;
}

.variant-1 .variant-1__slot {
  display: flex;
  justify-content: center;
  gap: var(--ruimte-5);
  margin-top: var(--ruimte-6);
  text-align: center;
  font-size: var(--tekst-s);
}

.variant-1 .variant-1__slot p {
  margin: 0;
}

.variant-1 .variant-1__themaknop:focus-visible,
.variant-1 .variant-1__knop:focus-visible {
  outline: 3px solid var(--kleur-focus);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .variant-1 .variant-1__kaart--uitgelicht {
    transform: none;
  }
}

@media (max-width: 52rem) {
  .variant-1 .variant-1__kop {
    grid-template-columns: 1fr;
  }

  .variant-1 .variant-1__thema {
    justify-items: start;
  }

  .variant-1 .variant-1__raster {
    grid-template-columns: 1fr;
  }

  .variant-1 .variant-1__kaart--uitgelicht {
    transform: none;
  }

  .variant-1 .variant-1__slot {
    flex-direction: column;
    gap: var(--ruimte-2);
  }
}

@media (max-width: 25rem) {
  .variant-1 {
    padding-inline: var(--ruimte-4);
  }

  .variant-1 .variant-1__kaart {
    padding: var(--ruimte-5);
  }
}

/* ---------- variant 2 ---------- */
/* huisstijl/proef/pakketten-claude.css — de pakketten-sectie van W15-light, Claude-versie
   (WP-002-02, WT-08a). Alleen selectors onder `.variant-2`, zodat de sectie samen met de
   andere variant op één pagina kan staan (w15.html, WT-08c) zonder elkaar te raken. Kleuren
   en maten komen uit tokens.css; de plaat en de knop uit glas.css (`.glas--knopplaat`: een
   kaart met een knop erop gebruikt de cta-plaat, want daar is het knopvlak op gemeten).
   Geen JavaScript. */

.variant-2 { padding: var(--ruimte-7) 0; }

.variant-2 .pakketten-label {
  font-size: var(--tekst-xs);
  font-weight: var(--gewicht-halfvet);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kleur-accent-tekst);
  margin: 0 0 var(--ruimte-2);
}

.variant-2 h3 {
  font-family: var(--letter-display);
  font-size: var(--tekst-3xl);
  line-height: var(--regel-strak);
  letter-spacing: var(--spatiering-kop);
  margin: 0 0 var(--ruimte-3);
}

.variant-2 .pakketten-intro {
  font-size: var(--tekst-l);
  color: var(--kleur-inkt-gedempt);
  max-width: var(--maat-tekst);
  margin: 0 0 var(--ruimte-6);
}

.variant-2 .pakketten-raster {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--ruimte-5);
  align-items: stretch;
}

.variant-2 .pakket {
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-3);
}

.variant-2 .pakket h4 { margin: 0; }

.variant-2 .pakket-prijs {
  font-family: var(--letter-display);
  font-size: var(--tekst-2xl);
  line-height: var(--regel-strak);
  color: var(--kleur-inkt);
  margin: 0;
}

.variant-2 .pakket-prijs span {
  font-family: var(--letter-tekst);
  font-size: var(--tekst-s);
  font-weight: var(--gewicht-tekst);
  color: var(--kleur-inkt-gedempt);
  margin-left: var(--ruimte-1);
}

.variant-2 .pakket-voor { min-height: 2.6em; }

.variant-2 .pakket-lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--ruimte-2);
  font-size: var(--tekst-s);
  color: var(--kleur-inkt);
}

.variant-2 .pakket-lijst li { padding-left: 1.4em; position: relative; }

.variant-2 .pakket-lijst li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--kleur-accent-tekst);
  font-weight: var(--gewicht-vet);
}

.variant-2 .pakket-lijst .pakket-plus {
  padding-left: 0;
  color: var(--kleur-inkt-gedempt);
  font-weight: var(--gewicht-halfvet);
}

.variant-2 .pakket-lijst .pakket-plus::before { content: none; }

.variant-2 .pakket .knop { margin-top: auto; align-self: flex-start; }

/* De uitgelichte kaart: een cyaan rand (3:1 op de plaat, gemeten als "accent (knopvlak)
   op plaat" in kleuren.py) en een badge in de knopkleuren. */
.variant-2 .pakket--uitgelicht { border-color: var(--kleur-accent); }

.variant-2 .pakket-badge {
  position: absolute;
  top: var(--ruimte-4);
  right: var(--ruimte-4);
  margin: 0;
  font-size: var(--tekst-xs);
  font-weight: var(--gewicht-halfvet);
  color: var(--kleur-accent-inkt);
  background-color: var(--kleur-accent);
  padding: var(--ruimte-1) var(--ruimte-3);
  border-radius: var(--radius-rond);
}

.variant-2 .pakketten-voet {
  font-size: var(--tekst-s);
  color: var(--kleur-inkt-gedempt);
  max-width: var(--maat-tekst);
  margin: var(--ruimte-5) 0 0;
}

@media (max-width: 40rem) {
  .variant-2 .pakketten-raster { grid-template-columns: 1fr; }
  .variant-2 .pakket-voor { min-height: 0; }
}