/* Demo-pagina chrome. De kaarten zelf komen uit werk.css — dezelfde bron als
   de werkplek, meegekopieerd door build-demo.mjs. Hier staat alleen wat de
   pagina eromheen nodig heeft. */

main{max-width:760px;margin:0 auto;padding:34px 18px 40px}

.kop{border-bottom:1px solid var(--lijn);padding-bottom:22px;margin-bottom:22px}
.kop .merk{font-family:Georgia,"Times New Roman",serif;font-weight:600;
  letter-spacing:.14em;font-size:1.05rem;margin:0 0 12px}
.kop h1{font-family:Georgia,serif;font-weight:600;font-size:1.75rem;line-height:1.25;margin:0 0 12px}
.lead{margin:0 0 12px;color:var(--inkt-zacht);font-size:1rem}
.stand{margin:0;font-size:.82rem;color:var(--inkt-zacht);
  border-left:3px solid var(--wacht);padding:9px 0 9px 13px;background:var(--steen-2);
  border-radius:0 6px 6px 0}

.bewegingen{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.bewegingen button{font:inherit;font-size:.9rem;padding:9px 17px;border-radius:999px;
  border:1px solid var(--lijn);background:var(--wit);color:var(--inkt-zacht);cursor:pointer}
.bewegingen button:hover{color:var(--inkt);border-color:var(--inkt-zacht)}
.bewegingen button[aria-current="true"]{background:var(--patina);border-color:var(--patina);
  color:#fff;font-weight:600}

.beweging h2{font-family:Georgia,serif;font-weight:600;font-size:1.3rem;margin:0 0 6px}
.vraag{margin:0 0 18px;font-size:.95rem;color:var(--inkt-zacht);font-style:italic}

.voet{margin-top:34px;padding-top:20px;border-top:1px solid var(--lijn);
  font-size:.76rem;color:var(--inkt-zacht)}
.voet p{margin:0 0 8px}
.voet a{color:var(--patina)}

@media (max-width:560px){
  .kop h1{font-size:1.45rem}
  .bewegingen button{flex:1 1 42%}
}