/* Tekenen en rekenen op de site (/ontwerp/): het 3D-model, de tekening en de berekening. Kleuren uit de tokens van site.css. */
.ow-let{display:grid;gap:6px;margin:28px 0 32px;padding:18px 20px;border-radius:var(--r-m);background:var(--blue-soft);border-left:4px solid var(--blue);max-width:880px}
.ow-let b{font-family:var(--f-display);font-stretch:108%;font-size:18px}
.ow-let p{margin:0;color:var(--ink)}
.ow-3d-blok{display:grid;gap:10px}
.ow-3d{position:relative;aspect-ratio:16/10;border:1px solid var(--line-2);border-radius:var(--r-m);overflow:hidden;background:#EEEDE8;box-shadow:var(--shadow);touch-action:none}
.ow-3d img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ow-3d canvas{display:block;width:100%;height:100%}
.ow-3d .btn{position:absolute;left:50%;bottom:20px;transform:translateX(-50%)}
.ow-3d.actief img,.ow-3d.actief .btn{display:none}
.ow-3d .laden{position:absolute;inset:0;display:grid;place-items:center;margin:0;color:#4D555A;font-weight:600}
.ow-opm{margin:0;font-size:14px;color:var(--ink-3)}
.ow-tekening{margin:24px 0 18px;padding:8px;background:#fff;border:1px solid var(--line-2);border-radius:var(--r-m);box-shadow:var(--shadow);overflow-x:auto}
.ow-tekening svg{display:block;width:100%;min-width:720px;height:auto}
.ow-knoppen{display:flex;flex-wrap:wrap;gap:10px 14px;margin:0}
.ow-ber{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin:28px 0 24px}
@media (min-width:980px){.ow-ber{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ow-ond{display:grid;gap:12px;align-content:start;min-width:0;padding:20px;background:var(--sheet);border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--shadow-1)}
.ow-ond h3{font-size:19px;font-stretch:108%}
.ow-keuze{font-family:var(--f-display);font-variant-numeric:tabular-nums;font-weight:750;font-size:24px;line-height:1.1}
.ow-uc{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}
.ow-uc svg{display:block;width:100%;height:10px}
.ow-uc .achter{fill:var(--sheet-2)}
.ow-uc .voor{fill:var(--green)}
.ow-uc .voor.krap{fill:var(--signal)}
.ow-uc .streep{stroke:var(--line-2);stroke-width:.6}
.ow-uc b{font-family:var(--f-display);font-variant-numeric:tabular-nums;font-size:17px}
.ow-ond table{width:100%;border-collapse:collapse;font-size:14.5px}
.ow-ond th,.ow-ond td{padding:7px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.ow-ond th{font-size:13px;font-weight:600;color:var(--ink-3)}
.ow-ond td.r,.ow-ond th.r{text-align:right;white-space:nowrap;padding-left:10px;font-variant-numeric:tabular-nums}
.ow-ond .klein{display:block;font-size:13px;color:var(--ink-3);line-height:1.4}
.ow-ond ul{margin:0;padding-left:18px;font-size:14.5px;color:var(--ink-2)}
.ow-ond ul li{margin:2px 0}
.ow-aannames{max-width:880px;margin:0 0 24px}
.ow-aannames ul{padding-left:20px}
.ow-stappen{display:grid;gap:18px;margin:28px 0 0;padding:0;list-style:none;counter-reset:stap}
@media (min-width:860px){.ow-stappen{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ow-stappen li{counter-increment:stap;padding-top:14px;border-top:3px solid var(--ink)}
.ow-stappen li::before{content:counter(stap);display:block;font-family:var(--f-display);font-weight:780;font-size:28px;line-height:1;margin-bottom:8px}
.ow-stappen h3{font-size:19px;margin-bottom:6px}
.ow-stappen p{margin:0;color:var(--ink-2);font-size:16px}
@media (max-width:520px){.ow-ond{padding:16px}.ow-ond table{font-size:13.5px}.ow-ond td.r,.ow-ond th.r{white-space:normal;padding-left:8px}}
/* de materiaallijst van het voorbeeld */
.ow-mat-opbouw{max-width:880px;margin:28px 0 22px}
.ow-mat-opbouw ul{padding-left:20px;margin:8px 0 10px}
.ow-mat-opbouw li{margin:4px 0}
.ow-mat-opbouw .klein{font-size:14px;color:var(--ink-2);margin:0}
.ow-mat{columns:2 440px;column-gap:18px}
.ow-mat-g{break-inside:avoid;display:block;margin:0 0 18px;padding:18px 20px;background:var(--sheet);border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--shadow-1)}
.ow-mat-g h3{font-size:18px;font-stretch:108%;margin:0 0 6px;display:flex;gap:8px;align-items:baseline}
.ow-mat-g h3 span{font-family:var(--f-body);font-size:14px;font-weight:600;color:var(--ink-3)}
.ow-mat-g ul{list-style:none;margin:0;padding:0}
.ow-mat-g li{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;padding:8px 0;border-top:1px solid var(--line)}
.ow-mat-g li:first-child{border-top:0}
.ow-mat-g .n{text-align:right;white-space:nowrap;font-size:13px;color:var(--ink-3)}
.ow-mat-g .n b{font-family:var(--f-display);font-variant-numeric:tabular-nums;font-size:17px;color:var(--ink)}
.ow-mat-g .o{display:grid;gap:2px;min-width:0}
.ow-mat-g .o b{font-weight:600;font-size:15px;overflow-wrap:anywhere}
.ow-mat-g .o small{font-size:13px;color:var(--ink-3);line-height:1.4;overflow-wrap:anywhere}
@media (max-width:520px){.ow-mat-g{padding:14px 14px}.ow-mat-g li{grid-template-columns:58px minmax(0,1fr);gap:10px}}
@media (min-width:860px){.ow-stappen{grid-template-columns:repeat(5,minmax(0,1fr))}}