/* huisstijl/proef/proef.css — de opmaak van de proefpagina zelf (WP-002-02, WT-04).
   Alleen lay-out en de onderdelen die niet in glas.css horen; kleuren en maten komen
   uit tokens.css. Geen JavaScript nodig. */

html { overflow-x: clip; }

body {
  margin: 0;
  background-color: var(--kleur-grond);
  color: var(--kleur-inkt);
  font-family: var(--letter-tekst);
  font-size: var(--tekst-m);
  line-height: var(--regel-tekst);
  font-weight: var(--gewicht-tekst);
}

code { font-size: 0.92em; }

.filters { position: absolute; width: 0; height: 0; }

.banner {
  margin: 0;
  padding: var(--ruimte-2) var(--ruimte-4);
  font-size: var(--tekst-s);
  color: var(--kleur-inkt-gedempt);
  background-color: var(--kleur-vlak-2);
  border-bottom: 1px solid var(--kleur-rand);
  text-align: center;
}

.pagina {
  max-width: var(--maat-pagina);
  margin: 0 auto;
  padding: var(--ruimte-3) var(--ruimte-4) var(--ruimte-8);
  overflow-x: clip;  /* de gloed van de hero steekt rechts uit; zonder clip telt dat mee als scrollbreedte (§ F, 19-09: 494 px op een 400 px-venster) */
}

/* ---------- navigatiebalk: inhoud ---------- */

.merk { display: inline-flex; align-items: center; gap: var(--ruimte-3); color: var(--kleur-inkt); }
.merk .monogram { width: 2.4rem; height: 1.7rem; }
.merk .woordmerk { width: 5.92rem; height: 1.25rem; }  /* 341 : 72 */
.links { display: flex; gap: var(--ruimte-4); margin-left: auto; }
.thema { display: flex; align-items: center; gap: var(--ruimte-2); }
.thema-melding { font-size: var(--tekst-xs); color: var(--kleur-inkt-gedempt); max-width: 9rem; line-height: 1.25; }

.thema-knop {
  font: inherit;
  font-size: var(--tekst-s);
  font-weight: var(--gewicht-halfvet);
  color: var(--kleur-inkt);
  background-color: transparent;
  border: 1.5px solid var(--kleur-rand-sterk);
  border-radius: var(--radius-rond);
  padding: var(--ruimte-1) var(--ruimte-3);
  cursor: pointer;
}

/* ---------- hero met de cyaan gloed (sier; inkt erop is gemeten) ---------- */

.hero {
  position: relative;
  padding: var(--ruimte-sectie) 0 var(--ruimte-7);
  max-width: var(--maat-tekst);
}

.hero .gloed {
  position: absolute;
  inset: -20% -30% auto -10%;
  height: 120%;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(45% 55% at 30% 40%, var(--sier-gloed), transparent 70%);
}

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

h1 {
  font-family: var(--letter-display);
  font-size: var(--tekst-4xl);
  line-height: var(--regel-strak);
  letter-spacing: var(--spatiering-kop);
  font-weight: var(--gewicht-vet);
  margin: 0 0 var(--ruimte-4);
}

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

.intro { font-size: var(--tekst-l); color: var(--kleur-inkt-gedempt); margin: 0 0 var(--ruimte-5); }
.acties { display: flex; flex-wrap: wrap; gap: var(--ruimte-3); margin: 0; }

/* ---------- kaarten en tekst ---------- */

.kaarten, .tekst { padding: var(--ruimte-7) 0; }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--ruimte-5); }
.tekst { max-width: var(--maat-tekst); }
.tekst p { margin: 0; }

.glas--cta { margin-top: var(--ruimte-7); }

.voet {
  margin-top: var(--ruimte-8);
  padding-top: var(--ruimte-5);
  border-top: 1px solid var(--kleur-rand);
  font-size: var(--tekst-s);
  color: var(--kleur-inkt-gedempt);
}
.voet p { margin: 0; }
.voet a { color: var(--kleur-accent-tekst); }

@media (max-width: 40rem) {
  .glas--nav { flex-wrap: wrap; gap: var(--ruimte-3); border-radius: var(--radius-l); }
  .links { margin-left: 0; width: 100%; flex-wrap: wrap; row-gap: var(--ruimte-2); }  /* zes links passen anders niet in 400 px (§ F, 19-09) */
}

/* ---------- WT-07: de proefpagina af ---------- */

.stalen, .typo, .knoppen, .formulier, .merk-blok { padding: var(--ruimte-7) 0; }
.uitleg { color: var(--kleur-inkt-gedempt); max-width: var(--maat-tekst); margin: calc(-1 * var(--ruimte-3)) 0 var(--ruimte-5); }

/* kleuren */
.staalrij { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--ruimte-4); }
.staalrij li { display: grid; gap: var(--ruimte-1); font-size: var(--tekst-s); }
.staalrij .staal { display: block; height: 3.25rem; border-radius: var(--radius-s); border: 1px solid var(--kleur-rand); }
.staalrij b { font-weight: var(--gewicht-halfvet); }
.staalrij small { color: var(--kleur-inkt-gedempt); font-size: var(--tekst-xs); }

/* type-schaal */
.schaal { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ruimte-4); }
.schaal li { display: grid; grid-template-columns: 3.5rem 1fr; align-items: baseline; gap: var(--ruimte-3); border-bottom: 1px solid var(--kleur-rand); padding-bottom: var(--ruimte-3); }
.schaal .maat { font-size: var(--tekst-xs); color: var(--kleur-inkt-gedempt); letter-spacing: var(--spatiering-label); text-transform: uppercase; }
.schaal .display { font-family: var(--letter-display); font-weight: var(--gewicht-vet); line-height: var(--regel-strak); letter-spacing: var(--spatiering-kop); }
.schaal .xl4 { font-size: var(--tekst-4xl); }
.schaal .xl3 { font-size: var(--tekst-3xl); }
.schaal .xl2 { font-size: var(--tekst-2xl); }
.schaal .xl1 { font-size: var(--tekst-xl); font-weight: var(--gewicht-halfvet); }
.schaal .l { font-size: var(--tekst-l); }
.schaal .m { font-size: var(--tekst-m); }
.schaal .s { font-size: var(--tekst-s); }
.schaal .xs { font-size: var(--tekst-xs); }
.schaal .vet { font-weight: var(--gewicht-vet); }
.label-voorbeeld { font-weight: var(--gewicht-halfvet); letter-spacing: var(--spatiering-label); text-transform: uppercase; color: var(--kleur-accent-tekst); }

/* knoppen */
.knoprij { display: grid; gap: var(--ruimte-3); }
.knopvlak { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-3); padding: var(--ruimte-4); border-radius: var(--radius-m); border: 1px solid var(--kleur-rand); }
.knopvlak small { width: 100%; font-size: var(--tekst-xs); color: var(--kleur-inkt-gedempt); }
.knop--klein { padding: var(--ruimte-1) var(--ruimte-3); font-size: var(--tekst-s); }

/* het formulier op donker: themavast, met color-scheme: dark (kennis/UI-KENNIS-2026.md § 5) */
.donker-blok {
  color-scheme: dark;
  background-color: var(--donker-vlak-1);
  color: var(--donker-inkt);
  border: 1px solid var(--donker-rand);
  border-radius: var(--radius-l);
  padding: var(--ruimte-6);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--ruimte-4);
}
.donker-blok .veld { display: grid; gap: var(--ruimte-1); }
.donker-blok .veld--breed { grid-column: 1 / -1; }
.donker-blok label { font-size: var(--tekst-s); font-weight: var(--gewicht-halfvet); color: var(--donker-inkt); }
.donker-blok input, .donker-blok select, .donker-blok textarea {
  font: inherit;
  color: var(--donker-inkt);
  background-color: var(--donker-grond);
  border: 1.5px solid var(--donker-rand-veld);
  border-radius: var(--radius-s);
  padding: var(--ruimte-2) var(--ruimte-3);
  width: 100%;
  box-sizing: border-box;
}
.donker-blok ::placeholder { color: var(--donker-inkt-gedempt); opacity: 1; }
.donker-blok :is(input, select, textarea):focus-visible { outline: 2px solid var(--donker-focus); outline-offset: 2px; }
.donker-blok .keuze { grid-template-columns: auto 1fr; align-items: center; gap: var(--ruimte-2); }
.donker-blok .keuze input { width: 1.1rem; height: 1.1rem; accent-color: var(--donker-accent); }
.donker-blok .keuze label { font-weight: var(--gewicht-tekst); }
.donker-blok a { color: var(--donker-accent-tekst); }
.donker-blok .acties { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-3); }
.donker-blok .acties small { color: var(--donker-inkt-gedempt); font-size: var(--tekst-xs); }
.donker-blok .knop { color: var(--donker-accent-inkt); background-color: var(--donker-accent); border: 0; font: inherit; font-weight: var(--gewicht-halfvet); cursor: pointer; }

/* het merk */
.merkrij { display: grid; gap: var(--ruimte-5); }
.woordmerk-groot { width: min(100%, 24rem); height: auto; color: var(--kleur-inkt); }
.monogrammen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-6); }
.monogram-groot { width: 8.5rem; height: 6rem; color: var(--kleur-inkt); }
.monogram-rijk { width: 12.25rem; height: auto; }
.favicons { display: inline-flex; align-items: flex-end; gap: var(--ruimte-3); }