.bouwen, .werkstuk { padding-top: 2.5rem; padding-bottom: 1rem; }

.werkstukken { margin-top: 2rem; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .werkstukken { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }
.werkstuk-kaart { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 1.5rem; }
.werkstuk-kaart .werkstuk-beeld { width: 6rem; height: 6rem; margin-bottom: 1.25rem; color: var(--azul); }
.werkstuk-kaart-tekst { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; width: 100%; }
.werkstuk-kaart .stap-titel { font-size: clamp(20px, 3vw, 22px); }
.werkstuk-zin { margin-top: .5rem; color: var(--zacht); overflow-wrap: anywhere; }
.werkstuk-kaart .werkstuk-stand { margin-top: auto; padding-top: 1.1rem; }

.terug { margin-top: -.5rem; margin-bottom: .5rem; }
.terug-pijl { transform: scaleX(-1); }
.werkstuk-kop { display: grid; gap: 1rem; align-items: center; padding-bottom: 0; }
.werkstuk-beeld-groot { width: 6rem; height: 6rem; color: var(--azul); }
.werkstuk-kop-tekst { min-width: 0; }
.werkstuk-kop h1 { margin-top: 0; }
.werkstuk-stand { margin-top: 1rem; }
.werkstuk-kop .werkstuk-stand { padding-top: 0; }
.werkstuk-stand .stempel { margin-left: 0; }
@media (min-width: 768px) {
  .werkstuk-kop { grid-template-columns: 10rem minmax(0, 1fr); gap: 2.5rem; }
  .werkstuk-beeld-groot { width: 10rem; height: 10rem; }
}
.werkstuk-tekst { max-width: 40rem; margin-top: 2.5rem; }
.werkstuk-tekst h2 { font-size: clamp(22px, 4.2vw, 28px); }
.werkstuk-colofon { max-width: 40rem; margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--lijn);
  font: 400 14px/1.5 var(--font-label, var(--font-sans)); font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--stil); }

.werkstuk-prestige .werkstuk-kop, .werkstuk-showcase .werkstuk-kop { grid-template-columns: minmax(0, 1fr); }
.werkstuk-prestige .werkstuk-kop h1, .werkstuk-showcase .werkstuk-kop h1 { max-width: 22ch; text-wrap: balance; }
.werkstuk-prestige .ondertitel, .werkstuk-showcase .ondertitel { max-width: 40rem; }
.prestige-beeld { margin: 2rem 0 0; padding: clamp(1rem, 3vw, 2rem); background: var(--veld); border-radius: 0 6px 6px 6px; }
.prestige-svg { display: block; width: 100%; height: auto; color: var(--azul); }
html.zwerm-aan #hoofd { position: relative; }
.zwerm-doek { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 0; pointer-events: none; z-index: 0; }
html.zwerm-aan .werkstuk > * { position: relative; z-index: 1; }
html.zwerm-aan .werkstuk > .prestige-beeld { z-index: 0; height: 360px; margin-top: 1rem; padding: 0; background: none; border-radius: 0; }
html.zwerm-aan .prestige-svg { display: none; }
.prestige-blok { margin-top: 3.5rem; }
.prestige-blok > h2 { font: 500 clamp(22px, 4.2vw, 28px)/1.2 var(--font-heading); letter-spacing: -.01em; color: var(--inkt); margin: 0 0 1.25rem; }
.prestige-blok h3 { font: 600 17px/1.3 var(--font-sans); color: var(--inkt); margin: 0; }
.team-lid p, .route-tekst p, .voor-jou-punt p, .voorbeeld-tekst { margin: .4rem 0 0; color: var(--zacht); }
.rij-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }

@media (min-width: 768px) { .cijferlijst { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; gap: 1.5rem; } }
.cijfer { display: flex; flex-direction: column; gap: .35rem; padding-top: 1rem; border-top: 2px solid var(--azul); }
.cijfer-waarde { font: 600 clamp(34px, 6vw, 48px)/1 var(--font-heading); letter-spacing: -.02em; color: var(--azul); font-variant-numeric: tabular-nums; }
.cijfer-label { color: var(--zacht); overflow-wrap: anywhere; }
.cijfer-datum { font: 400 13px/1.5 var(--font-label); font-variant-numeric: tabular-nums; color: var(--stil); }
.cijfers-noot { margin: 1rem 0 0; font: 400 14px/1.5 var(--font-label); font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--stil); }

@media (min-width: 640px) and (max-width: 1023px) { .teamlijst { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .teamlijst { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; } }
@media (min-width: 768px) { .voor-jou-lijst { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; gap: 1.5rem; } }
.voor-jou-punt { padding: 1.25rem; }
.werkstuk { --zwerm-schild: var(--azul); --zwerm-schild-ik: var(--papier); }
[data-theme="dark"] .werkstuk { --zwerm-schild: var(--schicht); }
.team-lid { padding: .5rem 0 0; background: none; border: 0; box-shadow: none; }
.zwerm-schild { position: relative; display: grid; place-items: center; width: 64px; height: 56px; margin: 10px 0 1.1rem 10px; color: var(--zwerm-schild-ik); }
.zwerm-schild::before, .zwerm-schild::after { content: ""; position: absolute; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.zwerm-schild::before { inset: -9px -10px; background: var(--zwerm-schild); opacity: .12; }
.zwerm-schild::after { inset: 0; background: var(--zwerm-schild); }
.zwerm-schild .ik { position: relative; z-index: 1; width: 26px; height: 26px; }

.routelijst { gap: 0; }
.route-stap { position: relative; display: grid; grid-template-columns: 2.9rem minmax(0, 1fr); align-content: start; gap: 1rem; padding-bottom: 1.5rem; }
.route-stap:not(:last-child)::before { content: ""; position: absolute; left: calc(1.45rem - 1px); top: 2.5rem; bottom: 0; width: 2px; background: var(--lijn); }
.route-nr { position: relative; z-index: 0; display: flex; align-items: center; justify-content: center; width: 2.9rem; height: 2.5rem;
  font: 600 16px/1 var(--font-label); font-variant-numeric: tabular-nums; color: var(--zwerm-schild); }
.route-nr::before, .route-nr::after { content: ""; position: absolute; z-index: -1; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.route-nr::before { inset: 0; background: var(--zwerm-schild); }
.route-nr::after { inset: 2px 2.4px; background: var(--papier); }
.route-stap:last-child .route-nr { color: var(--zwerm-schild-ik); }
.route-stap:last-child .route-nr::after { background: var(--zwerm-schild); }
.route-tekst { padding-top: .45rem; min-width: 0; }
@media (min-width: 1024px) {
  .routelijst { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; gap: 1.5rem; }
  .route-stap { grid-template-columns: minmax(0, 1fr); gap: .9rem; padding-bottom: 0; }
  .route-stap:not(:last-child)::before { left: 2.9rem; right: -1.5rem; top: calc(1.25rem - 1px); bottom: auto; width: auto; height: 2px; }
  .route-tekst { padding-top: 0; }
}

.handeling { padding: 1.5rem; }
.handeling .handeling-datum { margin: 0; font: 500 13px/1.5 var(--font-label); font-variant-numeric: tabular-nums; text-transform: uppercase; letter-spacing: .1em; color: var(--stil); }
.handeling dl { margin: 1rem 0 0; display: grid; gap: 1rem; }
.handeling-veld dt { font: 600 15px/1.4 var(--font-sans); color: var(--inkt); }
.handeling-veld dd { margin: .25rem 0 0; color: var(--zacht); max-width: 46rem; }
@media (min-width: 768px) { .handeling dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 2rem; } }

@media (min-width: 1024px) { .voorbeeldlijst { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; gap: 1.5rem; } }
.voorbeeld { padding: 1.5rem; }
.voorbeeld .showcase-label { margin: 0; }
.voorbeeld .showcase-label .stempel { margin-left: 0; }
.voorbeeld h3 { margin-top: .9rem; font: 600 18px/1.3 var(--font-heading); }
.voorbeeld .voorbeeld-kop { margin: 1.1rem 0 0; font: 600 13px/1.4 var(--font-label); text-transform: uppercase; letter-spacing: .08em; color: var(--stil); }
.voorbeeld .voorbeeld-kop + .voorbeeld-tekst { margin-top: .3rem; }
.balkaart { margin-top: 1rem; padding: 1rem 1.1rem 1.1rem; background: var(--papier); border: 1px solid var(--lijn); border-radius: 0 10px 10px 10px; }
.balkaart .voorbeeld-kop:first-child { margin-top: 0; }
.balkaart .balkaart-vraag { margin: .4rem 0 0; font: 600 16px/1.4 var(--font-sans); color: var(--inkt); }
.balkaart-opties { list-style: none; margin: .75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.balkaart-opties li { padding: .3rem .75rem; border: 1px dashed var(--lijn); border-radius: 999px; font: 500 14px/1.4 var(--font-sans); color: var(--inkt); }
.balkaart .voorbeeld-tekst { font-size: 14px; }

.prestige-verhaal { margin: 4rem 0 0; padding-top: 1rem; border-top: 1px solid var(--lijn); font: 500 13px/1.5 var(--font-label); text-transform: uppercase; letter-spacing: .1em; color: var(--stil); }
.werkstuk-prestige .werkstuk-tekst, .werkstuk-showcase .werkstuk-tekst { margin-top: 1rem; }