/* Tectontool — de site.
 *
 * Zelfde palet als de app (src/styles.css), zodat wie van de site naar
 * app.tectontool.com gaat niet in een ander programma denkt te zijn beland.
 *
 * Geen webfont van buiten: de app gebruikt Inter met een systeemstapel erachter,
 * en een site voor installateurs die hun telefoon op de werf bovenhaalt, is
 * beter af met een pagina die meteen staat dan met een letter die nog moet komen.
 */

:root {
  color-scheme: light dark;

  --bg: #f6f6f3;
  --vlak: #ffffff;
  --vlak-2: #f0efeb;
  --lijn: #e2e1dc;
  --lijn-sterk: #cfcec8;

  --tekst: #191917;
  --tekst-2: #52514e;
  --tekst-3: #7b7a75;

  --merk: #166534;
  --merk-sterk: #14532d;
  --merk-zacht: #e7f3eb;
  --vonk: #facc15;

  /* De knop apart van --merk. In het donker moet --merk omhoog om leesbaar
     te zijn als TEKST, maar dan is het te licht om wit op te zetten. Twee
     taken, twee tokens - anders moet er een losse .knop-regel in het
     donkerblok, en die verliest het van de gewone .knop-regel verderop
     omdat die later staat. Precies dat ging hier mis. */
  --knop: var(--merk);
  --knop-hover: var(--merk-sterk);

  --r: 10px;
  --schaduw: 0 1px 2px rgb(0 0 0 / 0.04), 0 2px 8px rgb(0 0 0 / 0.04);
  --gutter: 1rem;
  --breed: 1080px;
}

/* ============================================================ donker

   Alleen de tokens worden hier opnieuw gezet; geen enkel onderdeel krijgt
   een eigen donkere regel. Zo kan er geen stuk overblijven dat de ene kleur
   uit het ene thema met de achtergrond van het andere combineert - en dat
   is precies hoe een pagina onleesbaar wordt in het thema dat je zelf niet
   gebruikt.

   Het merkgroen van de app (#166534) is te donker om op een donkere grond
   te lezen. Voor tekst en vinkjes gaat het dus omhoog; de knop houdt een
   vollere groen waar wit op leest. De bliksemgele streep blijft dezelfde:
   die werkt op allebei de gronden, en het is het enige accent op de pagina.

   De grijzen houden dezelfde warme afwijking als in het licht - een
   neutraal grijs naast dit groen leest koud. */
/* Drie standen, niet twee.

   De bezoeker heeft er drie: hij koos niets (dan telt zijn systeem), hij koos
   licht, of hij koos donker. Wie alleen de mediaquery schrijft, kan de keuze
   van de knop niet laten winnen van een systeem dat het tegenovergestelde
   zegt. Vandaar twee blokken met dezelfde tokens:

     - de mediaquery, met :not([data-theme="light"]) zodat een uitdrukkelijke
       keuze voor licht wint van een donker systeem;
     - [data-theme="dark"], zodat de knop ook de andere kant op wint.

   De twee lijsten staan dus dubbel. Dat is lelijk maar het is de enige manier
   die werkt zonder script dat kleuren zet - veranderen hoort op BEIDE
   plaatsen te gebeuren. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #161614;
    --vlak: #1e1e1b;
    --vlak-2: #262622;
    --lijn: #32322d;
    --lijn-sterk: #45443e;

    --tekst: #f2f1ed;
    --tekst-2: #b9b7b0;
    --tekst-3: #8a8881;

    --merk: #67c48a;
    --merk-sterk: #8ad4a6;
    --merk-zacht: #1b3326;

    /* Op een donkere grond doet een schaduw niets; de rand draagt het vlak. */
    --schaduw: 0 1px 2px rgb(0 0 0 / 0.4);

    /* Voller groen dan --merk, want hier moet wit op leesbaar zijn. */
    --knop: #1f7a45;
    --knop-hover: #279252;
  }
}

:root[data-theme="dark"] {
  --bg: #161614;
  --vlak: #1e1e1b;
  --vlak-2: #262622;
  --lijn: #32322d;
  --lijn-sterk: #45443e;

  --tekst: #f2f1ed;
  --tekst-2: #b9b7b0;
  --tekst-3: #8a8881;

  --merk: #67c48a;
  --merk-sterk: #8ad4a6;
  --merk-zacht: #1b3326;

  /* Op een donkere grond doet een schaduw niets; de rand draagt het vlak. */
  --schaduw: 0 1px 2px rgb(0 0 0 / 0.4);

  /* Voller groen dan --merk, want hier moet wit op leesbaar zijn. */
  --knop: #1f7a45;
  --knop-hover: #279252;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--tekst);
  font-family: Inter, 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: var(--merk); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--merk-sterk); }
:focus-visible { outline: 2px solid var(--merk); outline-offset: 2px; border-radius: 4px; }

h1, h2, h3 { text-wrap: balance; line-height: 1.2; margin: 0; }

/* ------------------------------------------------------------------- de kop */

.kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  max-width: var(--breed);
  margin: 0 auto;
  padding: 1rem var(--gutter);
}

.merk {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 650;
  font-size: 1.05rem;
  color: var(--tekst);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.kop nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

/* :not(.knop), anders wint deze regel van .knop - 0,1,2 tegen 0,1,0 - en
   staat er donkergrijze tekst op de donkergroene knop. */
.kop nav a:not(.knop) {
  color: var(--tekst-2);
  text-decoration: none;
  font-size: 0.94rem;
}
.kop nav a:not(.knop):hover { color: var(--tekst); }

/* --------------------------------------------------------------- de knoppen */

.knop {
  display: inline-block;
  background: var(--knop);
  color: #fff;
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  font-weight: 560;
  font-size: 0.94rem;
  text-decoration: none;
  box-shadow: var(--schaduw);
}
.knop:hover { background: var(--knop-hover); color: #fff; }

.knop.groot { padding: 0.7rem 1.3rem; font-size: 1rem; }

/* ------------------------------------------------------ zon en maan */

.thema {
  display: inline-grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  border: 1px solid var(--lijn);
  border-radius: 8px;
  background: var(--vlak);
  color: var(--tekst-2);
  cursor: pointer;
}
.thema:hover { color: var(--tekst); border-color: var(--lijn-sterk); }
.thema svg { width: 1.05rem; height: 1.05rem; display: block; }

/* Toon waar je NAARTOE gaat, niet waar je bent: in het licht een maan. De
   twee iconen volgen dezelfde drie standen als de kleuren hierboven. */
.thema .zon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .thema .zon { display: block; }
  :root:not([data-theme="light"]) .thema .maan { display: none; }
}
:root[data-theme="dark"] .thema .zon { display: block; }
:root[data-theme="dark"] .thema .maan { display: none; }
:root[data-theme="light"] .thema .zon { display: none; }
:root[data-theme="light"] .thema .maan { display: block; }

/* -------------------------------------------------------------------- hero */

.hero {
  max-width: var(--breed);
  margin: 0 auto;
  padding: 3.5rem var(--gutter) 3rem;
}

.eyebrow {
  margin: 0 0 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--merk);
}

.hero h1 {
  font-size: clamp(2rem, 6vw, 3.4rem);
  letter-spacing: -0.025em;
  font-weight: 700;
  margin-bottom: 1.25rem;
}

/* Een streep onder de kop in de kleur van de bliksem uit het icoon: één accent
   op de hele pagina, en verder niets. */
.hero h1::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 4px;
  margin-top: 1.25rem;
  border-radius: 2px;
  background: var(--vonk);
}

.lead {
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  color: var(--tekst-2);
  max-width: 60ch;
  margin: 0 0 2rem;
}
.lead em { font-style: normal; font-weight: 650; color: var(--tekst); }

.acties {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0;
}

.klein { font-size: 0.88rem; color: var(--tekst-3); }

/* ------------------------------------------------------------------- banden */

.band {
  max-width: var(--breed);
  margin: 0 auto;
  padding: 3rem var(--gutter);
}

.band.wissel {
  max-width: none;
  background: var(--vlak);
  border-top: 1px solid var(--lijn);
  border-bottom: 1px solid var(--lijn);
}
.band.wissel > * { max-width: var(--breed); margin-left: auto; margin-right: auto; }

.band h2 {
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}

.inleiding {
  color: var(--tekst-2);
  max-width: 65ch;
  margin: 0 0 2rem;
}

/* -------------------------------------------------------------- de vier stappen */

.keten {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

/* Vier stappen horen 2x2 of 1x4 te staan. Met auto-fit rekent de browser
   zelf uit hoeveel kolommen passen, en op een scherm van 800 zijn dat er
   drie - dan staat stap 4 alleen op een rij alsof ze er niet bij hoort. */
@media (min-width: 560px) { .keten { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .keten { grid-template-columns: repeat(4, 1fr); } }

.keten li {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--r);
  padding: 1.25rem;
  box-shadow: var(--schaduw);
}
.band.wissel .keten li { background: var(--bg); }

.stap {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--merk-zacht);
  color: var(--merk-sterk);
  font-size: 0.85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.75rem;
}

.keten h3, .raster h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.keten p, .raster p { margin: 0; color: var(--tekst-2); font-size: 0.95rem; }

/* ------------------------------------------------------------------ raster */

/* Hoogstens twee kolommen: dit zijn alinea’s, geen kaartjes, en vier naast
   elkaar maakt er kolommen van zes woorden breed. */
.raster {
  display: grid;
  gap: 1.75rem 2.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .raster { grid-template-columns: repeat(2, 1fr); } }
.raster article { max-width: 46ch; }

/* ----------------------------------------------------- twee kolommen lijstjes */

.twee {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.klein-kop {
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tekst-3);
  margin-bottom: 0.9rem;
}

.vinkjes { list-style: none; margin: 0; padding: 0; }

.vinkjes li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.42rem 0;
  border-bottom: 1px solid var(--lijn);
  font-size: 0.97rem;
}
.vinkjes li:last-child { border-bottom: 0; }

.vinkjes li::before {
  flex: none;
  font-weight: 700;
  font-size: 0.9rem;
}
.vinkjes li.ja::before { content: "\2713"; color: var(--merk); }
.vinkjes li.straks::before { content: "\2013"; color: var(--tekst-3); }

.vinkjes li.straks { color: var(--tekst-3); }

.vinkjes li span {
  margin-left: auto;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tekst-3);
  background: var(--vlak-2);
  border: 1px solid var(--lijn);
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
  white-space: nowrap;
}
.band.wissel .vinkjes li span { background: var(--bg); }

/* ------------------------------------------------------------------- prijzen */

.prijskaarten {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  max-width: 620px;
  margin: 0 0 2rem;
}

.prijs {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--r);
  padding: 1.4rem;
  box-shadow: var(--schaduw);
}
.prijs.uit { background: transparent; box-shadow: none; border-style: dashed; }

.prijs h3 {
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tekst-3);
  margin-bottom: 0.6rem;
}

.bedrag {
  margin: 0 0 0.5rem;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.bedrag span {
  display: block;
  font-size: 0.88rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--tekst-3);
}

.prijs .klein { margin: 0; }

/* --------------------------------------------------------------------- voet */

.voet {
  border-top: 1px solid var(--lijn);
  margin-top: 1rem;
  padding: 2rem var(--gutter);
  max-width: var(--breed);
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.voet p { margin: 0.5rem 0 0; }
.voet nav { display: flex; gap: 1.1rem; flex-wrap: wrap; align-items: flex-start; }
.voet nav a { color: var(--tekst-2); text-decoration: none; }
.voet nav a:hover { color: var(--tekst); }

@media (min-width: 640px) {
  :root { --gutter: 1.5rem; }
}

/* ===================================================== meerdere pagina’s

   De kop staat op elke pagina en moet het huidige blad aanwijzen: wie niet
   ziet waar hij staat, klikt terug om het te weten. */

.kop { border-bottom: 1px solid var(--lijn); max-width: none; }
.kopbinnen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
  max-width: var(--breed);
  margin: 0 auto;
  width: 100%;
}

.kop nav a[aria-current="page"] {
  color: var(--tekst);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--vonk);
}

/* ------------------------------------------------------- de paginakop */

.paginakop {
  max-width: var(--breed);
  margin: 0 auto;
  padding: 2.75rem var(--gutter) 1.5rem;
}
.paginakop h1 {
  font-size: clamp(1.8rem, 4.2vw, 2.6rem);
  letter-spacing: -0.025em;
  margin-bottom: 0.9rem;
}
.paginakop .lead { margin-bottom: 0; }

/* ------------------------------------------------- lijst met kenmerken */

.spec { margin: 0; display: grid; gap: 0; }
.spec > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.15rem 1.5rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--lijn);
}
.spec > div:last-child { border-bottom: 1px solid var(--lijn); }
.spec dt { font-weight: 600; }
.spec dd { margin: 0; color: var(--tekst-2); }
@media (min-width: 680px) {
  .spec > div { grid-template-columns: 14rem 1fr; }
}

/* ------------------------------------------------------------- roadmap */

.stappenlijst { list-style: none; margin: 0; padding: 0; }
.stappenlijst li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.9rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--lijn);
}
.stappenlijst li:last-child { border-bottom: 1px solid var(--lijn); }
.stappenlijst b { grid-column: 2; }
.stappenlijst p { grid-column: 2; margin: 0; color: var(--tekst-2); font-size: 0.95rem; }

.merkje {
  grid-row: span 2;
  align-self: start;
  display: inline-grid;
  place-items: center;
  min-width: 5.6rem;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--lijn);
  background: var(--vlak-2);
  color: var(--tekst-3);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.merkje.nu { background: var(--merk-zacht); color: var(--merk-sterk); border-color: transparent; }
.band.wissel .merkje { background: var(--bg); }
.band.wissel .merkje.nu { background: var(--merk-zacht); }

/* ----------------------------------------------------------------- faq */

.faq { margin: 0; max-width: 70ch; }
.faq dt { font-weight: 600; margin-top: 1.4rem; }
.faq dt:first-child { margin-top: 0; }
.faq dd { margin: 0.35rem 0 0; color: var(--tekst-2); }

/* --------------------------------------------------------- de voet */

.voet {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  justify-content: initial;
}
@media (min-width: 680px) {
  .voet { grid-template-columns: 1.4fr 1fr 1fr; }
}
.voet h2 {
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tekst-3);
  margin-bottom: 0.7rem;
}
.voet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.voet ul a { color: var(--tekst-2); text-decoration: none; font-size: 0.94rem; }
.voet ul a:hover { color: var(--tekst); }
.voet .klein { max-width: 36ch; }

/* Drie plannen naast elkaar. De kaarten zijn smal genoeg om te passen; de
   max-width van twee kaarten zou de derde op een eigen rij duwen. */
.prijskaarten.drie { max-width: var(--breed); grid-template-columns: 1fr; }
@media (min-width: 700px) {
  /* Drie of een, nooit twee: bij auto-fit past er op een scherm van 760 maar
     twee kaarten naast elkaar, en dan staat het derde plan er alleen onder
     alsof het iets anders is dan de andere twee. */
  .prijskaarten.drie { grid-template-columns: repeat(3, 1fr); }
}

/* Een tweede kop binnen dezelfde band: die hoort lucht te krijgen, anders
   plakt hij aan de alinea erboven alsof hij erbij hoort. */
.band h2.tweede { margin-top: 2.5rem; }

/* Wat nog ingevuld moet worden, en dat je niet per ongeluk online zet.
   Opzichtig met opzet: een juridische pagina met een gat erin hoort te schreeuwen,
   niet discreet te zijn. */
.invullen {
  background: #fde68a;
  color: #713f12;
  padding: 0.05rem 0.4rem;
  border-radius: 4px;
  font-weight: 600;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.invullen::before { content: "\27A4 "; }