/* De voorbeeldomgeving. Alle kleur komt uit het palet bovenin site.css; hier
   staat geen enkele losse kleurwaarde. De "aan"-staat gebruikt het accent,
   want een groen stoplicht bestaat niet in dit palet en er komt er geen bij. */

.db-scherm{max-width:var(--maat);margin:0 auto;
  padding:clamp(30px,4vw,54px) var(--gutter) clamp(10px,1.4vw,18px)}

/* Het venster. Eén rand, één schaduw, verder niets: het moet lijken op een
   scherm zonder een browser na te doen die het niet is. */
.db-venster{display:grid;grid-template-columns:210px minmax(0,1fr);
  background:var(--vlak);border:1px solid var(--lijn);border-radius:10px;overflow:hidden;
  box-shadow:0 1px 2px rgb(0 0 0 / .04),0 12px 32px -18px rgb(0 0 0 / .18)}
@media(max-width:760px){.db-venster{grid-template-columns:1fr}}

.db-zij{background:var(--grond);border-right:1px solid var(--lijn-fijn);
  padding:clamp(16px,2vw,22px)}
@media(max-width:760px){.db-zij{border-right:0;border-bottom:1px solid var(--lijn-fijn)}}
.db-bedrijf{font-weight:700;font-size:14px;letter-spacing:-.015em;line-height:1.3}
.db-nav{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
@media(max-width:760px){.db-nav{flex-direction:row;flex-wrap:wrap;gap:4px 6px}}
.db-nav li{font-size:14px;color:var(--inkt-vaag);padding:7px 9px;border-radius:5px}
.db-nav li[aria-current]{background:var(--grond-diep);color:var(--inkt);font-weight:600}

.db-hoofd{padding:clamp(18px,2.4vw,28px);min-width:0}
.db-kop{font-size:12px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--inkt-vaag);font-weight:600;margin:clamp(24px,3vw,34px) 0 12px}
.db-kop:first-child{margin-top:0}

/* Deze week. Getallen groot, labels klein: het getal is het nieuws. */
.db-cijfers{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media(max-width:560px){.db-cijfers{grid-template-columns:1fr}}
.db-cijfers li{background:var(--grond);border:1px solid var(--lijn-fijn);
  border-radius:7px;padding:14px 15px}
.db-cijfers b{display:block;font-size:clamp(24px,3vw,30px);font-weight:600;
  letter-spacing:-.03em;line-height:1}
.db-cijfers span{display:block;margin-top:5px;font-size:14px;color:var(--inkt-zacht);line-height:1.35}

/* Wacht op jou. Dit is het hart van het scherm, dus het enige blok met het
   accent eromheen. */
.db-wacht{border:1px solid var(--accent);border-radius:7px;
  background:var(--accent-zacht);padding:clamp(14px,1.8vw,18px)}
.db-wacht-regel{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline;
  justify-content:space-between}
.db-wacht-wat{font-weight:700;font-size:16px;letter-spacing:-.015em}
.db-wacht-bedrag{font-weight:700;font-size:16px;letter-spacing:-.015em;white-space:nowrap}
.db-wacht-uitleg{margin-top:7px;font-size:14px;line-height:1.55;color:var(--inkt-zacht);max-width:56ch}
.db-wacht-knoppen{margin-top:14px;display:flex;flex-wrap:wrap;gap:9px}
/* Geen echte knoppen: er valt niets te bedienen en dan hoort er ook niets in
   de tabvolgorde te staan. */
.db-knop{display:inline-flex;align-items:center;border-radius:5px;padding:8px 15px;
  font-size:14px;font-weight:600;border:1px solid var(--lijn);
  background:var(--vlak);color:var(--inkt-zacht)}
.db-knop--ja{background:var(--accent-vlak);border-color:var(--accent-vlak);color:var(--inkt)}

/* Wat er draait. Vier regels, geen kaartjes. */
.db-lijst{list-style:none;margin:0;padding:0;border-top:1px solid var(--lijn-fijn)}
.db-lijst li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 14px;
  align-items:center;padding:13px 0;border-bottom:1px solid var(--lijn-fijn)}
.db-staat{grid-row:span 2;align-self:start;margin-top:2px;font-size:12px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--accent);
  border:1px solid var(--accent);border-radius:4px;padding:3px 7px;white-space:nowrap}
.db-lijst .is-uit .db-staat,.db-lijst li.is-uit .db-staat{color:var(--inkt-vaag);border-color:var(--lijn)}
.db-naam{font-weight:600;font-size:16px;letter-spacing:-.015em}
.db-laatst{font-size:14px;color:var(--inkt-vaag);line-height:1.4}
.db-lijst li.is-uit .db-naam{color:var(--inkt-zacht)}

.db-onder{max-width:var(--maat);margin:14px auto 0}

/* De drie blokken eronder. */
.db-uitleg{max-width:var(--maat);margin:0 auto;padding:clamp(40px,5vw,68px) var(--gutter) 0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.4vw,48px)}
@media(max-width:760px){.db-uitleg{grid-template-columns:1fr;gap:26px}}
.db-blok h2{font-size:19px;letter-spacing:-.022em;margin-bottom:9px}
.db-blok p{font-size:16px;line-height:1.62;color:var(--inkt-zacht)}