/* Gebouwd door server/deploy_beheer.py: merk/tokens.css (bron van waarheid voor kleur, font en maat) gevolgd door beheer/public/stijl.css. Niet met de hand wijzigen. */
/* Verbeter Mijn Website — huisstijl-tokens (richting C "De Meetlat", gekozen 2026-08-30)
   Bron van waarheid: merk/huisstijl.md. Elk middel (pdf, site, paneel, dashboard) laadt dit bestand.
   Fonts: Archivo (koppen) + Public Sans (tekst), Google Fonts, OFL.
   De marketingsite host ze sinds ruling 23 zélf (site/static/fonts/, @font-face
   staat in site/static/stijl.css) — geen verzoek meer naar een derde partij.
   Andere middelen die dit bestand laden regelen hun eigen fontbron. */
:root {
  /* kernkleuren */
  --vmw-kobalt:  #2447C7;  /* primair: knoppen, links, logo, nieuwe cijfers — wit erop 7,5:1 */
  --vmw-oranje:  #E8600A;  /* accent: alleen groot/grafisch (oude cijfers, meetpunt) — nooit kleine tekst (3,4:1) */
  --vmw-inkt:    #232A35;  /* alle lopende tekst — op wit 14:1 */
  --vmw-wit:     #FFFFFF;  /* achtergrond */
  --vmw-mist:    #EDF1F6;  /* rustvlakken, tabelzebra's, kaders */
  --vmw-lijn:    #DCE3EC;  /* randen, scheidingen */

  /* afgeleiden */
  --vmw-kobalt-donker: #1C38A0;  /* hover/active van kobalt */
  --vmw-gedempt:       #5B6472;  /* bijschriften, secundaire tekst — op wit 6,0:1 */
  /* Voet: inkt (#232A35) verder ingekookt tot een donkere grond, zodat de
     laatste sectie van een pagina een echte afsluiting krijgt in plaats van
     nog een wit vlak. Geen nieuwe merkkleur — een afgeleide van inkt, zoals
     kobalt-donker dat van kobalt is. Contrast nagemeten: wit erop 15,5:1,
     --vmw-voet-tekst erop 8,0:1 (beide ruim boven de 4,5:1 die WCAG AA
     vraagt). Kobalt erop haalt maar 2,1:1, dus links in de voet zijn wit. */
  --vmw-voet:          #1A2233;  /* donkere grond: de voet en de donkere banden (site en rapport) */
  --vmw-voet-tekst:    #AEB9CA;  /* secundaire tekst op de voet — 8,0:1 */
  /* Kobalt zelf haalt op de donkere grond maar 2,1:1. Voor het haalbare
     cijfer en de nadruk op de donkere banden van de site (meetlat, citaat,
     sinds 27-09-2026) dus kobalt opgelicht: op --vmw-voet 7,8:1. */
  --vmw-kobalt-licht:  #9DB2FF;

  /* statuskleuren — alleen dashboard & klantpaneel, nooit marketing */
  --vmw-inorde:  #1E7A46;  /* check geslaagd, "alles in orde" — op wit 4,9:1 */
  --vmw-letop:   #B45309;  /* waarschuwing — op wit 4,5:1 */
  --vmw-fout:    #BE2D1F;  /* storing, gezakt cijfer — op wit 5,4:1 */

  /* typografie */
  --vmw-kop:   'Archivo', 'Segoe UI', system-ui, sans-serif;
  --vmw-tekst: 'Public Sans', 'Segoe UI', system-ui, sans-serif;
  /* schaal ×1,25 (px): 13 etiket · 16 tekst · 20 tussenkop · 25 kop3 · 31 kop2 · 39 kop1 · 49 held */
  --vmw-r-13:13px; --vmw-r-16:16px; --vmw-r-20:20px; --vmw-r-25:25px;
  --vmw-r-31:31px; --vmw-r-39:39px; --vmw-r-49:49px;

  /* vorm */
  --vmw-radius: 6px;          /* knoppen, kaarten; nooit ronder dan 8px */
  --vmw-schaduw: 0 1px 3px rgba(35,42,53,.08);
}
/* basisregels */
.vmw-etiket { font: 600 var(--vmw-r-13)/1.3 var(--vmw-tekst); letter-spacing:.12em; text-transform:uppercase; color:var(--vmw-gedempt); }
.vmw-cijfer { font-family:var(--vmw-kop); font-weight:800; font-variant-numeric:tabular-nums; }
.vmw-knop   { font:600 var(--vmw-r-16)/1 var(--vmw-tekst); background:var(--vmw-kobalt); color:#fff;
              border-radius:var(--vmw-radius); padding:12px 20px; border:0; }
.vmw-knop:hover { background:var(--vmw-kobalt-donker); }

/* Dashboardstijl van beheer.verbetermijnwebsite.nl.
 *
 * TOKENS: dit bestand bevat GEEN kleurwaarden. merk/tokens.css is de bron van
 * waarheid en wordt er bij het uitrollen vóóraan geplakt, precies zoals
 * site/build.py dat doet voor de marketingsite (dist/stijl.css = tokens +
 * static/stijl.css). Eén bestand, één verzoek, en de tokens kunnen niet uit de
 * pas lopen met het merk. De deploy in taak 6 doet de samenvoeging; wat je
 * hier leest is dus alleen de dashboardhelft. Budget voor de som: 20 kB.
 *
 * STATUSKLEUREN: merk/huisstijl.md staat --vmw-inorde/letop/fout uitsluitend
 * toe in het dashboard en het klantpaneel. Hier dus wel, en alleen voor
 * statussen — nooit voor cijfers (die volgen de cijferlogica: oud oranje,
 * nieuw kobalt).
 *
 * GEEN WEBFONTS: het dashboard laadt Archivo en Public Sans niet zelf. De
 * tokens hebben een fallbackstack ('Segoe UI', system-ui), en dat is voor een
 * intern paneel ruim genoeg. Scheelt twee bestanden op elke pagina en houdt de
 * Content-Security-Policy strak (default-src 'self', niets van buiten).
 *
 * DICHTHEID: huisstijl.md staat het dashboard hogere dichtheid toe dan de
 * site. Vandaar de kleinere regelhoogtes en compactere tabelcellen.
 */

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

body {
  margin: 0;
  font: 400 var(--vmw-r-16)/1.5 var(--vmw-tekst);
  color: var(--vmw-inkt);
  background: var(--vmw-wit);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1 { font: 700 var(--vmw-r-31)/1.2 var(--vmw-kop); margin: 0 0 16px; }
h2 { font: 700 var(--vmw-r-25)/1.25 var(--vmw-kop); margin: 32px 0 12px; }
h3 { font: 600 var(--vmw-r-20)/1.3 var(--vmw-kop); margin: 24px 0 8px; }
a { color: var(--vmw-kobalt); }
a:hover { color: var(--vmw-kobalt-donker); }

.omhulsel { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* Springt pas in beeld bij toetsenbordfocus. */
.overslaan {
  position: absolute; left: -9999px; top: 0;
  background: var(--vmw-kobalt); color: var(--vmw-wit);
  padding: 10px 16px; border-radius: 0 0 var(--vmw-radius) 0;
}
.overslaan:focus { left: 0; z-index: 10; color: var(--vmw-wit); }

/* --------------------------------------------------------------------------
   Kop
   -------------------------------------------------------------------------- */

.kop { border-bottom: 1px solid var(--vmw-lijn); background: var(--vmw-wit); }
.kop-binnen {
  display: flex; align-items: center; gap: 32px;
  min-height: 64px; padding-top: 10px; padding-bottom: 10px;
}
.merk { display: inline-flex; line-height: 0; }
.merk svg { display: block; }

.menu { flex: 1; }
.menu ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.menu a {
  display: block; padding: 8px 14px; border-radius: var(--vmw-radius);
  font: 600 var(--vmw-r-16)/1 var(--vmw-tekst);
  color: var(--vmw-inkt); text-decoration: none;
}
.menu a:hover { background: var(--vmw-mist); color: var(--vmw-kobalt-donker); }
.menu a[aria-current="page"] { background: var(--vmw-kobalt); color: var(--vmw-wit); }

.afmelden { margin: 0; }

/* --------------------------------------------------------------------------
   Inhoud
   -------------------------------------------------------------------------- */

main { flex: 1; padding: 32px 24px 48px; }
.uitleg { color: var(--vmw-gedempt); max-width: 62ch; }

/* --------------------------------------------------------------------------
   Tabellen: zebra in mist, cijfers uitgelijnd
   -------------------------------------------------------------------------- */

.lijst {
  width: 100%; border-collapse: collapse;
  font-size: var(--vmw-r-16); margin-bottom: 20px;
}
.lijst th, .lijst td {
  text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--vmw-lijn);
  vertical-align: top;
}
.lijst thead th {
  font: 600 var(--vmw-r-13)/1.3 var(--vmw-tekst);
  letter-spacing: .12em; text-transform: uppercase; color: var(--vmw-gedempt);
  border-bottom: 2px solid var(--vmw-lijn); white-space: nowrap;
}
/* De zebra: rustvlakken in mist, zoals huisstijl.md voorschrijft. */
.lijst tbody tr:nth-child(even) { background: var(--vmw-mist); }
.lijst tbody tr:hover { background: var(--vmw-mist); }
.lijst .getal { text-align: right; font-variant-numeric: tabular-nums; }
.lijst .leeg td { color: var(--vmw-gedempt); padding: 20px 12px; }
.lijst .leeg { background: var(--vmw-wit); }

/* --------------------------------------------------------------------------
   Statuschips
   -------------------------------------------------------------------------- */

.chip {
  display: inline-block; white-space: nowrap;
  font: 600 var(--vmw-r-13)/1.4 var(--vmw-tekst);
  padding: 2px 9px; border-radius: var(--vmw-radius);
  background: var(--vmw-mist); border: 1px solid var(--vmw-lijn);
  color: var(--vmw-inkt);
}
.chip-inorde  { color: var(--vmw-inorde); border-color: var(--vmw-inorde); }
.chip-letop   { color: var(--vmw-letop);  border-color: var(--vmw-letop); }
.chip-fout    { color: var(--vmw-fout);   border-color: var(--vmw-fout); }
.chip-kobalt  { color: var(--vmw-wit);    background: var(--vmw-kobalt); border-color: var(--vmw-kobalt); }
.chip-inkt    { color: var(--vmw-inkt);   border-color: var(--vmw-gedempt); }
.chip-gedempt { color: var(--vmw-gedempt); }

/* --------------------------------------------------------------------------
   Knoppen en formulieren
   -------------------------------------------------------------------------- */

.knop {
  display: inline-block; cursor: pointer;
  font: 600 var(--vmw-r-16)/1 var(--vmw-tekst);
  background: var(--vmw-kobalt); color: var(--vmw-wit);
  border: 0; border-radius: var(--vmw-radius); padding: 12px 20px;
}
.knop:hover { background: var(--vmw-kobalt-donker); }

.knop-kaal {
  cursor: pointer; background: none; border: 1px solid var(--vmw-lijn);
  border-radius: var(--vmw-radius); padding: 7px 14px;
  font: 600 var(--vmw-r-16)/1 var(--vmw-tekst); color: var(--vmw-gedempt);
}
.knop-kaal:hover { border-color: var(--vmw-kobalt); color: var(--vmw-kobalt); }

label {
  display: block; margin: 16px 0 4px;
  font: 600 var(--vmw-r-13)/1.3 var(--vmw-tekst);
  letter-spacing: .12em; text-transform: uppercase; color: var(--vmw-gedempt);
}
input[type="text"], input[type="password"], input[type="email"], textarea, select {
  width: 100%; padding: 10px 12px;
  font: 400 var(--vmw-r-16)/1.4 var(--vmw-tekst); color: var(--vmw-inkt);
  background: var(--vmw-wit);
  border: 1px solid var(--vmw-lijn); border-radius: var(--vmw-radius);
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--vmw-kobalt); outline-offset: 1px; border-color: var(--vmw-kobalt);
}

/* --------------------------------------------------------------------------
   Inloggen
   -------------------------------------------------------------------------- */

.inlogvak {
  max-width: 380px; margin: 48px auto;
  padding: 28px; background: var(--vmw-wit);
  border: 1px solid var(--vmw-lijn); border-radius: var(--vmw-radius);
  box-shadow: var(--vmw-schaduw);
}
.inlogvak .knop { width: 100%; margin-top: 24px; }

.melding {
  padding: 10px 14px; border-radius: var(--vmw-radius);
  background: var(--vmw-mist); border-left: 3px solid var(--vmw-lijn);
  font-size: var(--vmw-r-16);
}
.melding-fout { color: var(--vmw-fout); border-left-color: var(--vmw-fout); }
.melding-letop { color: var(--vmw-letop); border-left-color: var(--vmw-letop); }

/* --------------------------------------------------------------------------
   Voet: smal en inktdonker, zodat de pagina een bodem heeft
   -------------------------------------------------------------------------- */

.voet {
  background: var(--vmw-voet); color: var(--vmw-voet-tekst);
  font-size: var(--vmw-r-13); padding: 12px 0;
}
.voet-binnen { display: flex; align-items: center; gap: 10px; }
.voet p { margin: 0; }
.voet a { color: var(--vmw-wit); }

/* --------------------------------------------------------------------------
   Prospects: lijstacties, zoekvorm, formulier, detail
   -------------------------------------------------------------------------- */

.lijst-acties {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.zoekvorm { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.zoekvorm input[type="text"] { width: auto; min-width: 260px; }
.verborgen-label {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap;
}
.archiefvlag {
  display: flex; align-items: center; gap: 6px; margin: 0;
  text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--vmw-inkt);
}
.archiefvlag input { width: auto; }

.prospectvorm { max-width: 520px; }
.checkboxlabel {
  display: flex; align-items: center; gap: 8px; margin: 16px 0 4px;
  text-transform: none; letter-spacing: 0;
  font: 400 var(--vmw-r-16)/1.4 var(--vmw-tekst); color: var(--vmw-inkt);
}
.checkboxlabel input { width: auto; }

/* M6 (eindreview golf 9): dezelfde override als .checkboxlabel hierboven,
   maar zonder de flex-rij — voor een label dat GEEN input omsluit (de
   janee-labels in klant_blok.php staan los vóór hun checkbox, niet eromheen).
   De globale `label`-regel zet ALLES in kapitalen; voor een label dat een
   hele zin is (bijvoorbeeld een sjabloonomschrijving) leest dat als
   schreeuwen. */
.label-zin {
  text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--vmw-inkt);
}

.detail-acties { margin: 12px 0 24px; }
.velden { display: grid; grid-template-columns: 160px 1fr; gap: 6px 16px; max-width: 640px; margin-bottom: 24px; }
.velden dt {
  color: var(--vmw-gedempt); font: 600 var(--vmw-r-13)/1.4 var(--vmw-tekst);
  text-transform: uppercase; letter-spacing: .1em;
}
.velden dd { margin: 0; }
/* Alleen notities is een vrij-tekstveld waar Tim regels in typt (taak 2,
   reviewronde 1) — pre-wrap staat daarom op een eigen klasse, niet op
   ".velden dd" in het algemeen. De korte velden (bedrijf, website, e-mail,
   telefoon, bron, data) zijn allemaal één regel en hebben geen enkele reden
   om opgeslagen witruimte te bewaren; zou pre-wrap daar ook gelden, dan kan
   een toevallige dubbele spatie in bijvoorbeeld een adresregel het label
   opeens laten meebreken. */
.veld-meerregelig { white-space: pre-wrap; }
.statusknoppen { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }

/* --------------------------------------------------------------------------
   Audits: cijferkleurregel (taak 4) — EEN ANDERE regel dan de statuschips
   hierboven. >=7,5 kobalt / 5,5-7,4 inkt / <5,5 oranje, nooit "in orde"-groen.
   -------------------------------------------------------------------------- */
.cijfer { font: 800 var(--vmw-r-20)/1 var(--vmw-kop); font-variant-numeric: tabular-nums; }
.cijfer-kobalt { color: var(--vmw-kobalt); }
.cijfer-inkt   { color: var(--vmw-inkt); }
.cijfer-oranje { color: var(--vmw-oranje); }

.koppelvorm { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.koppelvorm label { margin: 0; }
.koppelvorm select { width: auto; min-width: 260px; }

.actielijst { list-style: none; margin: 0 0 24px; padding: 0; max-width: 720px; }
.actiepunt {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 0; border-bottom: 1px solid var(--vmw-lijn);
}
.actiepunt form { margin: 0; flex-shrink: 0; }
.actiepunt-afgevinkt .actiepunt-tekst { color: var(--vmw-gedempt); text-decoration: line-through; }

/* --------------------------------------------------------------------------
   Mailflow (taak 5): de gele testbanner, de verzendkaarten
   -------------------------------------------------------------------------- */

/* Geel = "let op", de statuskleur die huisstijl.md voor het dashboard
   toestaat. De banner staat boven de inhoud op elke pagina zolang de
   testmodus aan staat. */
.testbanner {
  background: var(--vmw-letop); color: var(--vmw-wit);
  font-size: var(--vmw-r-13); padding: 8px 0;
}
.testbanner a { color: var(--vmw-wit); }

/* A01-03 (review 26-09): rood = een echte storing, in tegenstelling tot de
   gele "let op"-kleur van de testbanner hierboven. */
.migratiefoutbanner {
  background: var(--vmw-fout); color: var(--vmw-wit);
  font-size: var(--vmw-r-13); padding: 8px 0;
}

.instellingen-link { font: 600 var(--vmw-r-13)/1 var(--vmw-tekst); color: var(--vmw-gedempt); }

.mailkaart {
  border: 1px solid var(--vmw-lijn); border-radius: var(--vmw-radius);
  padding: 16px 20px; margin-bottom: 20px; background: var(--vmw-wit);
}
/* Wat aan de beurt is, springt eruit met een kobaltrand — geen extra kleur,
   alleen nadruk. */
.mailkaart-nu { border-color: var(--vmw-kobalt); box-shadow: var(--vmw-schaduw); }
.mailkaart-kop {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 8px;
}
.mailkaart-voet {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-top: 12px;
}
.mailkaart-voet p { margin: 0; }
/* Reviewronde 1, Important-1: waarschuwing op een mail die via het
   10-minuten-herstelpad is teruggezet — mogelijk al verstuurd, dus geen
   fout-rood (dat impliceert een storing) maar dezelfde "let op"-kleur als de
   testbanner en de "nu aan de beurt"-chip. */
.mailkaart-waarschuwing {
  border: 1px solid var(--vmw-letop); border-radius: var(--vmw-radius);
  color: var(--vmw-letop); font-size: var(--vmw-r-13);
  padding: 8px 12px; margin-bottom: 12px;
}
.mailvorm textarea { font-family: var(--vmw-tekst); }
.mailvorm .knop-kaal { margin-top: 12px; }
.gedempt { color: var(--vmw-gedempt); }
.instelvorm { margin-bottom: 24px; }
.mailflowvorm { margin-bottom: 12px; }

/* --------------------------------------------------------------------------
   Teksteditor (golf 9, fixronde 1 — B3): Jodit zet zichzelf op elk
   [data-tekstveld]-element en zet DAT bronelement daarbij op display:none
   (geverifieerd: getComputedStyle(...).display === 'none' zodra Jodit
   klaar is) — Jodit's eigen UI staat er los naast, met zijn eigen classes
   uit jodit.min.css. .editorknoppen (de oude handmatige knoppenrij) is
   verwijderd uit klant_tekst.php: Jodit's eigen toolbar vervangt 'm, dus die
   regel is hier ook weg. .editorvak zelf blijft WEL staan, met opzet: hij
   geeft het bronelement (vóór Jodit's script — defer — is uitgevoerd) een
   vaste hoogte/rand, zodat de pagina niet zichtbaar springt tussen de eerste
   verf en het moment waarop Jodit het overneemt. De :focus- en
   h2/h3-subregels zijn wél weg: die golden voor tekst/interactie ÍN het
   bronelement, en dat element ontvangt nooit meer focus of inhoud zodra
   Jodit draait. */
.editorvak {
  min-height: 160px; margin-top: 6px; padding: 10px 12px;
  border: 1px solid var(--vmw-lijn); border-radius: var(--vmw-radius);
  background: var(--vmw-wit);
}
.tekstvoorbeeld {
  margin-top: 6px; padding: 8px 12px;
  border-left: 3px solid var(--vmw-lijn); background: var(--vmw-mist);
}

/* --------------------------------------------------------------------------
   Controles (golf 6, taak 2): één kaart per klant, met de onderdelen en de
   problemenlijst achter een <details> — zelfde inklap-gedachte als de
   teksteditor-voorbeelden, maar hier zonder javascript nodig (script-src
   'none' blijft gelden): <details>/<summary> is kale HTML.
   -------------------------------------------------------------------------- */
.checkkaart {
  border: 1px solid var(--vmw-lijn); border-radius: var(--vmw-radius);
  padding: 16px 20px; margin-bottom: 16px; background: var(--vmw-wit);
}
.checkkaart-kop {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 4px;
}
.checkkaart-kop h2, .checkkaart-kop h3 { margin: 0; font-size: var(--vmw-r-20); }
.checkkaart details { margin-top: 10px; }
.checkkaart summary { cursor: pointer; font-weight: 600; color: var(--vmw-kobalt); }
.onderdelenlijst, .problemenlijst {
  margin: 8px 0 0; padding-left: 20px; font-size: var(--vmw-r-16);
}
.onderdelenlijst li, .problemenlijst li { padding: 3px 0; }

/* Pagina's (golf 9, taak 4) + de hulpregel op elk klantscherm. */
.knop-klein {
  cursor: pointer; background: none; border: 1px solid var(--vmw-lijn);
  border-radius: var(--vmw-radius); padding: 5px 10px;
  font: 600 var(--vmw-r-13)/1 var(--vmw-tekst); color: var(--vmw-gedempt);
}
.knop-klein:hover { border-color: var(--vmw-kobalt); color: var(--vmw-kobalt); }
.paginakaart {
  border: 1px solid var(--vmw-lijn); border-radius: var(--vmw-radius);
  padding: 16px 20px; margin-bottom: 24px; background: var(--vmw-wit);
}
.paginakaart h2 { margin: 0 0 2px; font-size: var(--vmw-r-20); }
.paginakaart-pad { color: var(--vmw-gedempt); font-size: var(--vmw-r-13); margin: 0 0 12px; }
.bloklijst { list-style: none; margin: 0; padding: 0; }
.blokrij {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 0; border-bottom: 1px solid var(--vmw-lijn);
}
.blokrij:last-child { border-bottom: 0; }
.greep { cursor: grab; color: var(--vmw-gedempt); font-size: var(--vmw-r-20); line-height: 1; user-select: none; }
.blokrij[data-vast] .greep { visibility: hidden; }
.blok-info { flex: 1; min-width: 220px; }
.blok-info strong { display: block; }
.blok-info span { color: var(--vmw-gedempt); font-size: var(--vmw-r-13); }
.blok-acties { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.blok-acties form { margin: 0; }
.opslaanvorm { margin-top: 12px; }
.hulp { border-top: 1px solid var(--vmw-lijn); margin-top: 40px; padding-top: 20px; }
.hulp h2 { margin-top: 0; }

/* Demobalk (golf 10, besluit 38): de regel die boven élk demoscherm staat en
   zegt dat het bedrijf verzonnen is. Opvallend maar niet schreeuwerig — het
   signaalkleur-lijntje links (zoals .melding-letop), een rustig vlak, en op
   mobiel gewoon boven de inhoud in plaats van ernaast. */
.demobalk {
  margin: 16px 0 0; padding: 10px 14px; border-radius: var(--vmw-radius);
  background: var(--vmw-mist); border-left: 3px solid var(--vmw-oranje);
  color: var(--vmw-inkt); font-size: var(--vmw-r-16); max-width: 78ch;
}

@media (max-width: 720px) {
  .kop-binnen { flex-wrap: wrap; gap: 12px; }
  .menu ul { flex-wrap: wrap; }
  .lijst { font-size: var(--vmw-r-13); }
}

/* --------------------------------------------------------------------------
   Aanbodpagina (besluit 66): de publieke, persoonlijke pagina met het cijfer,
   de opties en het keuzeformulier. Eigen laag (aanbod_basis.php), maar hetzelfde
   stijlblad en dezelfde tokens. Smaller leesblok dan het dashboard: dit is een
   leespagina, geen tabel.
   -------------------------------------------------------------------------- */
.aanbod-inhoud { max-width: 760px; margin: 0 auto; padding-top: 32px; padding-bottom: 56px; }
.aanbod-intro { font-size: var(--vmw-r-20); max-width: 62ch; }

.aanbod-cijfer {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  margin: 24px 0; padding: 20px 24px;
  background: var(--vmw-mist); border-radius: var(--vmw-radius);
}
.aanbod-cijfer-getal { font: 800 var(--vmw-r-31)/1 var(--vmw-kop); color: var(--vmw-kobalt); margin: 0; font-variant-numeric: tabular-nums; }
.aanbod-cijfer-uitleg { margin: 0; max-width: 52ch; }

.aanbodvorm { margin-top: 32px; display: flex; flex-direction: column; gap: 24px; }
.aanbod-opties { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.aanbod-opties legend { font: 600 var(--vmw-r-20)/1.3 var(--vmw-kop); padding: 0; margin-bottom: 4px; }

/* .aanbod-optie is een <label>, dus het erft de dashboard-labelstijl
   (hoofdletters, letterspacing, gedempte kleur, klein). Voor deze klantpagina
   met lopende tekst zetten we dat terug naar gewoon leesbaar proza. */
.aanbod-optie {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 0; padding: 16px; border: 1px solid var(--vmw-lijn); border-radius: var(--vmw-radius);
  cursor: pointer;
  font: 400 var(--vmw-r-16)/1.5 var(--vmw-tekst);
  letter-spacing: 0; text-transform: none; color: var(--vmw-inkt);
}
.aanbod-optie:hover { border-color: var(--vmw-kobalt); }
.aanbod-optie input { width: auto; margin-top: 4px; }
.aanbod-optie-tekst { display: flex; flex-direction: column; gap: 2px; }
.aanbod-optie-titel { font-weight: 600; font-size: var(--vmw-r-20); }
.aanbod-optie-prijs { color: var(--vmw-kobalt); font-weight: 600; }

.aanbod-gegevens { display: flex; flex-direction: column; }
/* Ook de veldlabels vriendelijk (geen dashboard-hoofdletters) op de klantpagina. */
.aanbod-gegevens label {
  font: 600 var(--vmw-r-16)/1.4 var(--vmw-tekst);
  letter-spacing: 0; text-transform: none; color: var(--vmw-inkt);
  margin-top: 12px; margin-bottom: 4px;
}

.aanbodvorm .knop { align-self: flex-start; }

.aanbod-bedankt-keuze { font-size: var(--vmw-r-20); }
.aanbod-ondertekening { margin-top: 24px; }

/* Uitsplitsing per onderdeel op de aanbodpagina (besluit 66): het cijfer per
   onderdeel in gewone taal, gevolgd door de knop naar het volledige rapport. */
.aanbod-onderdelen { margin: 24px 0; }
.aanbod-onderdelen h2 { font: 600 var(--vmw-r-20)/1.3 var(--vmw-kop); margin: 0 0 12px; }
.aanbod-onderdelen-lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.aanbod-onderdeel {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 16px; border: 1px solid var(--vmw-lijn); border-radius: var(--vmw-radius);
}
.aanbod-onderdeel-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.aanbod-onderdeel-label { font-weight: 600; }
.aanbod-onderdeel-uitleg { color: var(--vmw-gedempt); font-size: var(--vmw-r-13); }
/* De bevinding (diep rapport, besluit 66): de concrete zin over wat er op dit
   onderdeel speelt, in de gewone tekstkleur onder de korte uitleg. */
.aanbod-onderdeel-bevinding { margin-top: 4px; }
.aanbod-rapport-knop { margin: 4px 0 0; }

/* De vier ontwerp-voorbeelden op de aanbodpagina (besluit 64/66): een rooster
   van klikbare thumbnails (elk opent het beeld op volledige grootte). */
.aanbod-ontwerpen { margin: 32px 0; }
.aanbod-ontwerpen h2 { font: 600 var(--vmw-r-20)/1.3 var(--vmw-kop); margin: 0 0 8px; }
.aanbod-ontwerpen-rooster {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 16px;
}
.aanbod-ontwerp {
  display: block; line-height: 0;
  border: 1px solid var(--vmw-lijn); border-radius: var(--vmw-radius); overflow: hidden;
}
.aanbod-ontwerp:hover { border-color: var(--vmw-kobalt); }
.aanbod-ontwerp img { width: 100%; height: auto; display: block; }
@media (max-width: 520px) { .aanbod-ontwerpen-rooster { grid-template-columns: 1fr; } }