/* Ontwerppagina — de dingen die je niet ziet op een screenshot.
   Bouwt voort op lab.css; hier staat alleen wat deze pagina extra nodig heeft. */

.ontwerp .intro h1{font-size:clamp(2.25rem,6.5vw,4rem);line-height:1.06}
.terugnaar{margin-left:auto;font-size:.875rem;text-decoration:none;
  border-bottom:1px solid rgba(232,206,115,.4);padding-bottom:2px}

.blok{width:var(--breed);margin:0 auto;padding:clamp(3rem,8vh,5.5rem) 0;
  border-top:1px solid var(--lijn)}
.blokkop{max-width:52ch;margin-bottom:clamp(2rem,5vh,3rem)}
.blokkop h2{font-size:clamp(1.625rem,3.6vw,2.25rem);margin:.5rem 0 1rem}
.blokkop p{color:var(--deeg-zacht);font-size:.9375rem}

/* ── 01 schaal ── */
.schaal{display:grid;gap:clamp(1.5rem,4vh,2.5rem)}
.schaal > div{display:grid;gap:.375rem;
  grid-template-columns:1fr;align-items:baseline}
@media(min-width:820px){.schaal > div{grid-template-columns:7rem 1fr 16rem;gap:1.5rem}}
.maat{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--goud)}
.waar{font-size:.8125rem;color:rgba(201,191,175,.7)}
.schaal p{margin:0;font-family:var(--kop);color:var(--deeg);line-height:1.1}
.t1{font-size:clamp(2.5rem,7vw,4.5rem)}
.t2{font-size:clamp(1.75rem,4vw,2.75rem)}
.t3{font-size:clamp(1.375rem,2.6vw,1.75rem)}
.t4{font-family:var(--tekst) !important;font-size:1.0625rem;color:var(--deeg-zacht) !important}
.t5{font-family:var(--tekst) !important;font-size:.9375rem;color:var(--deeg-zacht) !important}
.t6{font-family:var(--tekst) !important;font-size:.75rem;letter-spacing:.16em;
  color:var(--goud-licht) !important}

/* ── 02 kleur ── */
/* De tabel liep op 390px twee pixels buiten beeld doordat de kolommen niet
   verder wilden krimpen. Op smalle schermen mag hij zelf schuiven binnen zijn
   eigen kader in plaats van de pagina mee te trekken. */
.tabelhoes{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.kleurtabel{width:100%;min-width:26rem;border-collapse:collapse;font-size:.9375rem;
  table-layout:fixed}
.kleurtabel td:last-child,.kleurtabel th:last-child{white-space:normal}
.kleurtabel th,.kleurtabel td{padding:.75rem .5rem;border-bottom:1px solid var(--lijn);
  text-align:left;color:var(--deeg-zacht)}
.kleurtabel th{color:var(--deeg);font-weight:600;font-size:.8125rem;
  letter-spacing:.08em;text-transform:uppercase}
.kleurtabel td:first-child{color:var(--deeg);white-space:nowrap}
.staal{display:inline-block;width:16px;height:16px;border-radius:4px;
  margin-right:.625rem;vertical-align:-3px;border:1px solid rgba(243,235,221,.2)}

/* ── 03 toestanden ── */
.toestanden{display:flex;flex-wrap:wrap;gap:clamp(1rem,3vw,2rem);margin-bottom:1.5rem}
.toestanden > div{display:grid;gap:.5rem;justify-items:start}
.toestanden span{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(201,191,175,.7)}
.k{font:inherit;font-size:.9375rem;font-weight:600;border-radius:999px;
  padding:.8125rem 1.5rem;border:1px solid transparent;cursor:pointer;
  transition:background-color .2s ease,border-color .2s ease,transform .1s ease}
.k.klein{padding:.625rem 1.125rem;font-size:.875rem}
.k-goud{background:var(--goud);color:#17130C}
.k-goud:hover,.k-goud.is-hover{background:var(--goud-licht)}
.k-goud.is-actief{background:#A8871F;transform:translateY(1px)}
.k-lijn{background:transparent;color:var(--deeg);border-color:rgba(243,235,221,.4)}
.k-lijn:hover,.k-lijn.is-hover{background:var(--deeg);color:var(--grond);border-color:var(--deeg)}
.k-lijn.is-actief{background:var(--deeg-zacht);color:var(--grond);transform:translateY(1px)}
.k:focus-visible,.k.is-focus{outline:2px solid var(--goud-licht);outline-offset:3px}
/* Uitgeschakeld haalt 4,96:1 en blijft daarmee boven de norm: iemand moet nog
   kunnen lezen wat hij niet mag doen. Stond eerst op #9A9186 en dat gaf 3,96 —
   nagemeten op de gerenderde pixels, niet op mijn aanname. */
.k[disabled]{background:#3A342C;color:#ADA398;border-color:transparent;
  cursor:not-allowed;transform:none}

/* ── 04 drie schermen ── */
.drie{display:grid;gap:clamp(1.25rem,3vw,2rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.scherm,.variant{display:flex;flex-direction:column}
.schermlabel{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--goud);margin-bottom:.625rem}
.schermvlak{background:var(--grond-op);border:1px solid var(--lijn);border-radius:12px;
  padding:1.5rem;min-height:14rem;display:flex;flex-direction:column;gap:.625rem}
.leeg{align-items:center;text-align:center;justify-content:center}
.leeg svg{width:44px;height:44px;color:var(--goud);opacity:.6}
.leegkop{margin:.5rem 0 0;font-family:var(--kop);font-size:1.125rem;color:var(--deeg)}
.leeguit{margin:0 0 .75rem;font-size:.875rem;color:var(--deeg-zacht);max-width:26ch}
.skelet{background:linear-gradient(90deg,#221C17,#2E2721,#221C17);
  background-size:200% 100%;border-radius:6px;animation:glans 1.4s ease-in-out infinite}
.r1{height:14px;width:70%}.r2{height:14px;width:90%}.r3{height:14px;width:55%}
.skelet.blok{height:5rem;margin-top:.5rem}
@keyframes glans{0%{background-position:100% 0}100%{background-position:-100% 0}}
.foutkop{margin:0;font-family:var(--kop);font-size:1.125rem;color:var(--deeg)}
.foutuit{margin:0 0 .5rem;font-size:.875rem;color:var(--deeg-zacht)}
.foutknoppen{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:auto}
.oordeel{margin:.875rem 0 0;font-size:.8125rem;line-height:1.55;
  color:rgba(201,191,175,.8)}
.oordeel b{color:var(--deeg)}

/* ── 05 velden ── */
.velden{display:grid;gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.velden label{display:block;margin-bottom:.375rem;font-size:.875rem;
  font-weight:500;color:var(--deeg)}
.velden input{width:100%;padding:.8125rem 1rem;background:#100D0B;color:var(--deeg);
  border:1px solid rgba(243,235,221,.24);border-radius:10px;font:inherit;font-size:1rem}
.velden input.is-focus{outline:2px solid var(--goud-licht);outline-offset:2px}
.velden input.is-fout{border-color:#E08B7A}
.velden input.is-goed{border-color:#8FBF86}
.hint,.fout,.goed{display:block;margin-top:.375rem;font-size:.8125rem}
.hint{color:rgba(201,191,175,.75)}
/* Niet alleen rood: kleur alleen is onbruikbaar voor wie kleurenblind is,
   dus de fout staat er ook in woorden en met aria-invalid in de code. */
.fout{color:#E8A99A}
.goed{color:#A8CFA0}

/* ── 06 drie kaarten ── */
.kaart{background:var(--grond-op);border:1px solid var(--lijn);border-radius:12px;
  overflow:hidden}
.kaart img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.kaart.a{padding-bottom:1.25rem}
.kaart.a > :not(img){margin-left:1.25rem;margin-right:1.25rem}
.kaartlabel{margin:1rem 0 .375rem;font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--goud-licht)}
.kaart h3{font-family:var(--kop);font-weight:400;font-size:1.375rem;margin:0 0 .5rem;
  color:var(--deeg)}
.kaarttekst{margin:0 0 .875rem;font-size:.875rem;color:var(--deeg-zacht)}
.kaartprijs{margin:0;font-family:var(--kop);font-size:1.25rem;color:var(--deeg)}
.kaart.b{position:relative}
.kaart.b img{aspect-ratio:1}
.bopschrift{position:absolute;inset:auto 0 0 0;padding:1rem 1.25rem;
  background:linear-gradient(to top,rgba(10,8,6,.94),rgba(10,8,6,.72) 60%,transparent);
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.bopschrift h3{margin:0;font-size:1.125rem}
.kaart.c{display:grid;grid-template-columns:6.5rem 1fr;align-items:center}
.kaart.c img{aspect-ratio:1;height:100%}
.ctekst{padding:1rem 1.25rem 1rem 1rem}
.ctekst .kaartlabel{margin-top:0}
.ctekst h3{font-size:1.125rem}
.ctekst .kaarttekst{font-size:.8125rem;margin-bottom:.5rem}
.ctekst .kaartprijs{font-size:1.0625rem}

/* ── 07 ritme ── */
.ritme{display:grid;gap:1rem}
.ritme > div{display:grid;grid-template-columns:7rem 3rem 1fr;gap:1rem;
  align-items:center;font-size:.875rem;color:var(--deeg-zacht)}
.rbalk{display:block;height:10px;background:var(--goud);border-radius:2px;opacity:.85}
.ritme span:nth-child(2){font-family:var(--kop);color:var(--deeg);font-size:1rem}
.ritme em{font-style:normal;color:rgba(201,191,175,.75)}

@media(prefers-reduced-motion:reduce){
  .skelet{animation:none;background:#2A241E}
}