/* De pakketten-sectie van de site: Variant 1 van W15 (keuze Bart-Jan, 04-10-2026, DEC-rij
   van die datum). Overgenomen uit huisstijl/proef/w15.css r. 18-376 op d49aeb1, ongewijzigd. */

/* ---------- 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: var(--glas-nav); /* WT-02: was oklch(27.215% 0.02303 284.464 / 0.92), gelijk aan het token */
}

:root[data-thema="licht"] {
  --glas-vlak-doorschijnend: var(--glas-nav); /* WT-02: was oklch(96.500% 0.00400 284.464 / 0.92), gelijk aan het token */
}

.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, color-mix(in oklch, var(--merk-cyaan) 16%, transparent), 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);
  }
}