.okc {
--groen: #0e7a3a; --groend: #0b6230; --groenl: #e8f3ec; --zand: #f5efe6; --zandd: #ece3d5;
--ink: #1b1f1c; --grijs: #5e655f; --lijn: #e6e0d6; --lijnd: #d6cdbf; --bruin: #8b5e34; --oranje: #9a5d06;
--rood: #b42318; --wit: #ffffff; --kijk: #e9edf0;
--schaduw: 0 1px 2px rgba(27, 31, 28, .06), 0 8px 24px rgba(27, 31, 28, .08);
--zweef: 0 18px 48px rgba(27, 31, 28, .18), 0 2px 8px rgba(27, 31, 28, .08);
color-scheme: light;
}
.okc, .okc * { box-sizing: border-box; }
.okc { color: var(--ink); font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
.okc button, .okc input, .okc select, .okc textarea { font: inherit; color: inherit; }
.okc button { cursor: pointer; }
.okc h1, .okc h2, .okc h3, .okc h4, .okc p { margin: 0; }
.okc a { color: inherit; text-decoration: none; }
.okc img { display: block; max-width: 100%; }
.okc .ok-ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.okc [hidden] { display: none !important; }
.okc .ok-tool { display: grid; grid-template-columns: minmax(0, 1fr) 448px; height: calc(100vh - var(--okc-kop, 112px)); min-height: 720px; background: #fff; container-type: inline-size; container-name: tool; }
.okc .ok-kijk { position: relative; background: var(--kijk); overflow: hidden; min-width: 0; }
.okc .ok-kijk__3d, .okc .ok-kijk__2d { position: absolute; inset: 0; }
.okc .ok-kijk__3d canvas { display: block; outline: none; }
.okc .ok-kijk__3d::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(20, 24, 22, .16) 100%); }
.okc .ok3d-labels { position: absolute; inset: 0; pointer-events: none; }
.okc .ok3d-maat { background: #fff; color: var(--ink); font-size: 13px; font-weight: 800; padding: 3px 8px; border-radius: 6px; box-shadow: 0 1px 4px #0003; white-space: nowrap; }
.okc .ok-kijk__2d { background: #fbfaf7; display: grid; place-items: center; overflow: auto; }
.okc .ok-kijk__2d svg { max-width: 100%; height: auto; }
.okc .ok-kijk__laden { position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; color: var(--grijs); font-weight: 700; }
.okc .ok-zweef { position: absolute; display: flex; gap: 8px; z-index: 3; }
.okc .ok-zweef--lb { left: 16px; top: 16px; right: 84px; flex-wrap: wrap; align-items: center; gap: 10px; pointer-events: none; }
.okc .ok-zweef--lb > * { pointer-events: auto; }
.okc .ok-zweef--rb { right: 16px; top: 16px; flex-direction: column; align-items: flex-end; }
.okc .ok-zweef--lo { left: 16px; bottom: 16px; right: 16px; justify-content: space-between; align-items: flex-end; pointer-events: none; }
.okc .ok-zweef--lo > * { pointer-events: auto; }
.okc .ok-wissel { display: inline-flex; background: #fff; border-radius: 10px; padding: 4px; box-shadow: var(--schaduw); }
.okc .ok-wissel button { height: 36px; padding: 0 14px; border: 0; border-radius: 7px; background: transparent; font-size: 15px; font-weight: 700; color: var(--grijs); white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.okc .ok-wissel button.ok-wissel--aan { background: var(--ink); color: #fff; }
.okc .ok-wissel .ok-ico { width: 18px; height: 18px; }
.okc .ok-gereedschap { display: inline-flex; flex-direction: column; background: #fff; border-radius: 10px; padding: 4px; box-shadow: var(--schaduw); gap: 2px; }
.okc .ok-gereedschap button { width: 40px; height: 40px; border: 0; border-radius: 7px; background: transparent; display: grid; place-items: center; color: var(--ink); position: relative; }
.okc .ok-gereedschap button:hover { background: var(--zand); }
.okc .ok-gereedschap button.ok-gereedschap--aan { background: var(--groenl); color: var(--groend); }
.okc .ok-gereedschap hr { border: 0; border-top: 1px solid var(--lijn); margin: 2px 6px; }
.okc .ok-tool--vol { height: auto; flex: 1 1 auto; min-height: 0; }
.okc .ok-tool--tel.ok-tool--vol { flex: none; }
.okc .ok-tool--tel.ok-tool--vol .ok-kijk { height: max(330px, 52vh); }
.okc .ok-balk { position: sticky; top: 0; z-index: 8; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 6px 10px 6px 20px; background: #fff; border-bottom: 1px solid var(--lijn); }
.okc .ok-balk__naam { font-size: 15px; font-weight: 800; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.okc .ok-balk__sluit { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px solid var(--lijn); border-radius: 9px; background: #fff; font-size: 15px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.okc .ok-balk__sluit:hover { background: var(--zand); }
.okc .ok-balk__sluit .ok-ico { width: 18px; height: 18px; }
@media (max-width: 480px) {
.okc .ok-balk { padding: 6px 8px 6px 14px; gap: 8px; }
.okc .ok-balk__naam { font-size: 14px; }
.okc .ok-balk__sluit { height: 36px; padding: 0 10px; gap: 6px; font-size: 14px; }
.okc .ok-balk__sluit .ok-ico { width: 16px; height: 16px; }
}
.okc .ok-start { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 32px; max-width: 1180px; margin: 24px auto; padding: 24px; background: #fff; border: 1px solid var(--lijn); border-radius: 16px; box-shadow: var(--schaduw); }
.okc .ok-start__beeld { aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: var(--kijk); }
.okc .ok-start__beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.okc .ok-start__label { font-size: 14px; font-weight: 800; color: var(--groend); letter-spacing: .02em; }
.okc .ok-start h2 { font-size: 30px; font-weight: 800; line-height: 1.15; margin: 6px 0 10px; text-wrap: balance; }
.okc .ok-start p { font-size: 16px; color: var(--grijs); line-height: 1.5; }
.okc .ok-start .ok-knop { margin-top: 18px; }
@media (max-width: 720px) {
.okc .ok-start { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 16px; margin: 16px; }
.okc .ok-start h2 { font-size: 24px; }
}
.okc .ok-standen { display: inline-flex; background: #fff; border-radius: 10px; padding: 4px; box-shadow: var(--schaduw); gap: 2px; }
.okc .ok-standen button { height: 32px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; font-size: 13px; font-weight: 700; color: var(--grijs); white-space: nowrap; }
.okc .ok-standen button:hover { background: var(--zand); color: var(--ink); }
.okc .ok-kenmerk { display: flex; flex-wrap: wrap; gap: 6px; max-width: 70%; }
.okc .ok-kenmerk span { background: #ffffffe8; backdrop-filter: blur(6px); border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 700; white-space: nowrap; box-shadow: 0 1px 3px #0002; }
.okc .ok-kenmerk span b { font-weight: 800; }
.okc .ok-mini { position: relative; width: 260px; height: 170px; padding: 0; border: 0; border-radius: 12px; background: #fbfaf7; box-shadow: var(--schaduw); overflow: hidden; display: grid; }
.okc .ok-mini svg { width: 100%; height: 100%; pointer-events: none; }
.okc .ok-mini span { position: absolute; left: 10px; top: 8px; font-size: 13px; font-weight: 800; color: var(--ink); background: #fffffff0; padding: 2px 8px; border-radius: 6px; }
.okc .ok-mini:hover { box-shadow: 0 0 0 2px var(--groen), var(--schaduw); }
.okc .ok-tip3d { position: absolute; z-index: 5; pointer-events: none; background: var(--ink); color: #fff; border-radius: 8px; padding: 8px 12px; font-size: 13px; line-height: 1.35; box-shadow: var(--zweef); max-width: 280px; transform: translate(14px, 14px); }
.okc .ok-tip3d b { display: block; font-size: 15px; }
.okc .ok-tip3d span { color: #c9d1cb; }
.okc .ok-lagen { background: #fff; border-radius: 12px; box-shadow: var(--schaduw); padding: 12px 16px 10px; display: grid; gap: 8px; min-width: 520px; }
.okc .ok-lagen__kop { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 800; gap: 12px; }
.okc .ok-lagen__kop button { border: 0; background: var(--groen); color: #fff; border-radius: 7px; height: 30px; padding: 0 12px; font-size: 13px; font-weight: 800; display: inline-flex; align-items: center; gap: 6px; }
.okc .ok-lagen__rij { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
.okc .ok-lagen__rij button { border: 0; background: var(--zand); border-radius: 6px; padding: 6px 4px; font-size: 13px; font-weight: 700; color: var(--grijs); line-height: 1.2; min-height: 44px; }
.okc .ok-lagen__rij button.ok-lagen--aan { background: var(--groen); color: #fff; }
.okc .ok-lagen__rij button.ok-lagen--nu { box-shadow: inset 0 0 0 2px var(--groend); }
.okc .ok-paneel { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; border-left: 1px solid var(--lijn); min-height: 0; background: #fff; }
.okc .ok-paneel__kop { padding: 16px 24px 12px; }
.okc .ok-paneel__label { font-size: 13px; font-weight: 700; color: var(--bruin); letter-spacing: .01em; }
.okc .ok-paneel__titel { font-size: 20px; font-weight: 800; line-height: 1.25; margin-top: 1px; letter-spacing: -.01em; }
.okc .ok-paneel__zin { font-size: 14px; line-height: 1.45; color: var(--grijs); margin-top: 4px; }
.okc .ok-paneel[data-paneelstap]:not([data-paneelstap="0"]) .ok-paneel__zin { display: none; }
.okc .ok-stappen { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, auto); justify-content: stretch; column-gap: 3px; padding: 0 24px; border-bottom: 1px solid var(--lijn); }
.okc .ok-stappen button { border: 0; background: transparent; padding: 9px 2px 8px; font-size: 13px; font-weight: 600; color: #8a8f8b; border-bottom: 3px solid var(--zandd); margin-bottom: -1px; min-width: 0; white-space: nowrap; text-align: center; transition: color .15s, border-color .15s; }
.okc .ok-stappen button:hover { color: var(--ink); }
.okc .ok-stappen button.ok-stappen--klaar { color: var(--ink); font-weight: 600; border-bottom-color: #9fcfb1; }
.okc .ok-stappen button.ok-stappen--aan { color: var(--ink); font-weight: 800; border-bottom-color: var(--groen); }
.okc .ok-stap { overflow-y: auto; padding: 18px 24px 24px; display: grid; gap: 20px; align-content: start; scrollbar-width: thin; }
.okc .ok-stap > .ok-blok + .ok-blok { padding-top: 20px; border-top: 1px solid var(--lijn); }
.okc .ok-blok { display: grid; gap: 10px; }
.okc .ok-blok__kop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.okc .ok-blok__kop h3 { font-size: 16px; font-weight: 800; letter-spacing: -.005em; }
.okc .ok-blok__kop span { font-size: 13px; color: var(--grijs); font-weight: 500; text-align: right; }
.okc .ok-uitleg { font-size: 14px; line-height: 1.5; color: var(--grijs); }
.okc .ok-kaarten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.okc .ok-kaarten--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.okc .ok-kaarten--1 { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.okc .ok-kaart { position: relative; border: 1px solid var(--lijn); border-radius: 10px; background: #fff; padding: 0; text-align: left; display: grid; grid-template-rows: auto 1fr; overflow: hidden; min-width: 0; }
.okc .ok-kaart:hover { border-color: var(--lijnd); box-shadow: 0 1px 3px rgba(27, 31, 28, .06); }
.okc .ok-kaart.ok-kaart--aan { border-color: var(--groen); box-shadow: 0 0 0 1px var(--groen), 0 2px 8px rgba(14, 122, 58, .10); }
.okc .ok-kaart__beeld { aspect-ratio: 16 / 10; background: var(--zand); display: grid; place-items: center; overflow: hidden; }
.okc .ok-kaart__beeld img { width: 100%; height: 100%; object-fit: cover; }
.okc .ok-kaart__beeld[data-duim]:empty { background: linear-gradient(100deg, var(--zand) 40%, #fbf7f0 50%, var(--zand) 60%) var(--zand); background-size: 220% 100%; animation: ok-glans 1.6s linear infinite; }
@keyframes ok-glans { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) {
.okc .ok-kaart__beeld[data-duim]:empty { animation: none; }
}
.okc .ok-kaart:not(:has(.ok-kaart__beeld)) .ok-kaart__tekst > b { padding-right: 26px; }
.okc .ok-kaart__beeld--foto img { object-fit: contain; padding: 8px; mix-blend-mode: multiply; }
.okc .ok-kaart__tekst { padding: 9px 11px 11px; display: grid; gap: 2px; align-content: start; }
.okc .ok-kaart__tekst b { font-size: 15px; font-weight: 700; line-height: 1.3; }
.okc .ok-kaart__tekst small { font-size: 13px; color: var(--grijs); line-height: 1.35; }
.okc .ok-kaart__prijs { font-size: 13px; font-weight: 700; color: var(--grijs); margin-top: 4px; }
.okc .ok-kaart__prijs--nu { color: var(--groend); }
.okc .ok-kaart__vink { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--groen); color: #fff; display: none; place-items: center; }
.okc .ok-kaart--aan .ok-kaart__vink { display: grid; }
.okc .ok-kaart__vink .ok-ico { width: 14px; height: 14px; stroke-width: 3; }
.okc .ok-kaart--rij { grid-template-rows: none; grid-template-columns: 64px minmax(0, 1fr); align-items: center; }
.okc .ok-kaart--rij .ok-kaart__beeld { aspect-ratio: auto; width: 64px; height: 100%; min-height: 64px; }
.okc .ok-kaarten > .ok-kaart--rij:only-child { grid-column: 1 / -1; }
.okc .ok-kaart--rij .ok-kaart__tekst > b { padding-right: 26px; }
.okc .ok-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); background: var(--zand); border-radius: 9px; padding: 3px; gap: 3px; }
.okc .ok-seg button { min-height: 38px; border: 0; border-radius: 7px; background: transparent; font-size: 14px; font-weight: 600; color: var(--grijs); padding: 6px 8px; line-height: 1.25; }
.okc .ok-seg button:hover { color: var(--ink); }
.okc .ok-seg button.ok-seg--aan { background: #fff; color: var(--ink); font-weight: 700; box-shadow: 0 1px 2px rgba(27, 31, 28, .14), 0 0 0 1px rgba(27, 31, 28, .04); }
.okc .ok-seg button small { display: block; font-size: 13px; font-weight: 600; color: var(--grijs); }
.okc .ok-maat { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; }
.okc .ok-maat__veld { display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px; height: 40px; border: 1px solid var(--lijnd); border-radius: 8px; overflow: hidden; background: #fff; }
.okc .ok-maat__veld:focus-within { border-color: var(--groen); box-shadow: 0 0 0 3px var(--groenl); }
.okc .ok-maat__veld button { border: 0; background: transparent; display: grid; place-items: center; color: var(--grijs); }
.okc .ok-maat__veld button:hover { background: var(--zand); color: var(--ink); }
.okc .ok-maat__veld button .ok-ico { width: 16px; height: 16px; stroke-width: 2; }
.okc .ok-maat__veld label { display: flex; align-items: baseline; justify-content: center; gap: 3px; font-size: 17px; font-weight: 700; padding-top: 1px; }
.okc .ok-maat__veld input { width: 4.2ch; border: 0; outline: 0; text-align: right; font-weight: 700; background: transparent; padding: 0; }
.okc .ok-maat__veld label span { font-size: 13px; color: var(--grijs); font-weight: 600; }
.okc .ok-maat__naam { font-size: 15px; font-weight: 700; }
.okc .ok-maat__naam small { display: block; font-size: 13px; color: var(--grijs); font-weight: 500; }
.okc .ok-maat__schuif { grid-column: 1 / -1; width: 100%; height: 20px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.okc .ok-maat__schuif::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--groen) 0 var(--vul, 50%), var(--zandd) var(--vul, 50%) 100%); }
.okc .ok-maat__schuif::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: #fff; border: 2px solid var(--groen); box-shadow: 0 1px 3px rgba(27, 31, 28, .22); }
.okc .ok-maat__schuif::-moz-range-track { height: 4px; border-radius: 2px; background: var(--zandd); }
.okc .ok-maat__schuif::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--groen); }
.okc .ok-maat__schuif::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--groen); box-shadow: 0 1px 3px rgba(27, 31, 28, .22); }
.okc .ok-maat__schuif:focus-visible { outline: none; }
.okc .ok-maat__schuif:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--groenl), 0 1px 3px rgba(27, 31, 28, .22); }
.okc .ok-maat__schuif:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--groenl); }
.okc .ok-chips { display: flex; flex-wrap: wrap; gap: 6px; grid-column: 1 / -1; }
.okc .ok-chip { height: 30px; padding: 0 11px; border: 1px solid var(--lijn); border-radius: 999px; background: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; }
.okc .ok-chip:hover { border-color: var(--lijnd); }
.okc .ok-chip.ok-chip--aan { background: var(--groenl); border-color: var(--groen); color: var(--groend); font-weight: 700; }
.okc .ok-melding { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 9px; padding: 9px 12px; border-radius: 8px; background: #faf7f2; border: 1px solid #efe8dc; font-size: 13.5px; line-height: 1.45; }
.okc .ok-melding > .ok-ico { width: 16px; height: 16px; }
.okc .ok-melding .ok-ico { margin-top: 2px; color: var(--bruin); }
.okc .ok-melding--let { background: #fdf6ea; border-color: #f3e2c4; }
.okc .ok-melding--let .ok-ico { color: var(--oranje); }
.okc .ok-melding--fout { background: #fdf1f0; border-color: #f4d3cf; }
.okc .ok-melding--fout .ok-ico { color: var(--rood); }
.okc .ok-melding--tip { background: #f1f8f3; border-color: #d3e9da; }
.okc .ok-melding--tip .ok-ico { color: var(--groend); }
.okc .ok-melding button { border: 0; background: none; padding: 0; color: var(--groend); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.okc .ok-feiten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--lijn); border-radius: 10px; overflow: hidden; }
.okc .ok-feiten div { padding: 10px 12px; display: grid; gap: 2px; border-right: 1px solid var(--lijn); }
.okc .ok-feiten div:last-child { border-right: 0; }
.okc .ok-feiten b { font-size: 16px; font-weight: 800; white-space: nowrap; }
.okc .ok-feiten span { font-size: 13px; color: var(--grijs); font-weight: 500; }
.okc .ok-wanden { display: grid; border: 1px solid var(--lijn); border-radius: 10px; overflow: hidden; }
.okc .ok-wanden__rij { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--lijn); background: #fff; text-align: left; border-left: 0; border-right: 0; border-top: 0; width: 100%; }
.okc .ok-wanden__rij:last-child { border-bottom: 0; }
.okc .ok-wanden__rij.ok-wanden--aan { background: var(--groenl); }
.okc .ok-wanden__rij b { display: block; font-size: 15px; font-weight: 700; }
.okc .ok-wanden__rij small { display: block; font-size: 13px; color: var(--grijs); }
.okc .ok-wanden__rij .ok-ico { width: 18px; height: 18px; color: var(--grijs); }
.okc .ok-leeg { border: 1px dashed var(--lijnd); border-radius: 10px; padding: 16px; text-align: center; font-size: 14px; color: var(--grijs); }
.okc .ok-bewerk { border: 1.5px solid var(--groen); border-radius: 12px; padding: 14px; display: grid; gap: 14px; }
.okc .ok-bewerk__kop { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.okc .ok-bewerk__kop b { font-size: 16px; font-weight: 800; }
.okc .ok-link { border: 0; background: none; padding: 0; font-size: 15px; font-weight: 700; color: var(--groend); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.okc .ok-link .ok-ico { width: 18px; height: 18px; }
.okc .ok-link--rood { color: var(--rood); }
.okc .ok-rij2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.okc .ok-select { height: 40px; border: 1px solid var(--lijnd); border-radius: 8px; padding: 0 12px; font-size: 15px; font-weight: 600; background: #fff; width: 100%; }
.okc .ok-label { font-size: 13px; font-weight: 800; color: var(--grijs); margin-bottom: 4px; display: block; }
.okc .ok-schakel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 13px; border: 1px solid var(--lijn); border-radius: 10px; background: #fff; text-align: left; width: 100%; }
.okc .ok-schakel b { font-size: 15px; font-weight: 700; display: block; }
.okc .ok-schakel small { font-size: 13px; color: var(--grijs); display: block; line-height: 1.4; }
.okc .ok-schakel i { width: 44px; height: 26px; border-radius: 13px; background: var(--lijnd); position: relative; transition: background .15s; }
.okc .ok-schakel i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px #0003; transition: transform .15s; }
.okc .ok-schakel.ok-schakel--aan { border-color: var(--groen); box-shadow: 0 0 0 1px var(--groen); }
.okc .ok-schakel.ok-schakel--aan i { background: var(--groen); }
.okc .ok-schakel.ok-schakel--aan i::after { transform: translateX(18px); }
.okc .ok-voet { border-top: 1px solid var(--lijn); padding: 12px 24px 13px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; background: #fff; box-shadow: 0 -6px 16px rgba(27, 31, 28, .04); }
.okc .ok-voet__prijs { flex: 1 1 140px; min-width: 0; }
.okc .ok-voet > .ok-knop { flex: none; margin-left: auto; }
.okc .ok-voet__prijs small { display: block; font-size: 13px; color: var(--grijs); font-weight: 500; line-height: 1.35; }
.okc .ok-voet__prijs b { display: block; font-size: 22px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; white-space: nowrap; }
.okc .ok-knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 18px; border-radius: 8px; font-size: 15px; font-weight: 700; border: 1px solid transparent; white-space: nowrap; }
.okc .ok-knop--groen { background: var(--groen); color: #fff; }
.okc .ok-knop--groen:hover { background: var(--groend); }
.okc .ok-knop--wit { background: #fff; border-color: var(--lijnd); color: var(--ink); }
.okc .ok-knop--klein { height: 40px; font-size: 14px; padding: 0 14px; }
.okc .ok-knop .ok-ico { width: 18px; height: 18px; }
.okc .ok-voet__acties { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13px; color: var(--grijs); }
.okc .ok-voet__acties button { border: 0; background: none; padding: 0; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--grijs); font-size: 13px; }
.okc .ok-voet__acties button:hover { color: var(--ink); }
.okc .ok-tool--tel .ok-voet__lang, .okc .ok-tool--tel .ok-voet__stap { display: none; }
.okc .ok-voet__acties .ok-ico { width: 16px; height: 16px; }
.okc .ok-stalen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.okc .ok-stalen__kop { grid-column: 1 / -1; font-size: 13px; font-weight: 800; color: var(--grijs); letter-spacing: .02em; margin-top: 4px; }
.okc .ok-staal { position: relative; display: grid; grid-template-rows: auto auto auto 1fr; align-content: start; text-align: left; padding: 0 0 8px; border: 1.5px solid var(--lijn); border-radius: 10px; background: #fff; overflow: hidden; min-width: 0; }
.okc .ok-staal:hover { border-color: var(--lijnd); }
.okc .ok-staal.ok-staal--aan { border-color: var(--groen); box-shadow: 0 0 0 1px var(--groen); }
.okc .ok-staal--aan .ok-kaart__vink { display: grid; }
.okc .ok-staal__beeld { aspect-ratio: 5 / 3; background: var(--zand); display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid var(--lijn); }
.okc .ok-staal__beeld img { width: 100%; height: 100%; object-fit: contain; padding: 6px; mix-blend-mode: multiply; }
.okc .ok-staal__beeld img.ok-staal__foto { object-fit: cover; padding: 0; transform: scale(1.32); transform-origin: 52% 56%; mix-blend-mode: normal; }
.okc .ok-staal__beeld .ok-ico { width: 34px; height: 34px; color: var(--grijs); stroke-width: 1.4; }
.okc .ok-staal__naam { font-size: 13px; font-weight: 800; line-height: 1.3; padding: 6px 8px 0; overflow-wrap: break-word; hyphens: auto; }
.okc .ok-staal__sub { font-size: 13px; color: var(--grijs); line-height: 1.3; padding: 2px 8px 0; overflow-wrap: break-word; hyphens: auto; }
.okc .ok-staal__prijs { font-size: 13px; font-weight: 700; line-height: 1.3; padding: 4px 8px 0; align-self: end; }
.okc .ok-staal__prijs small { display: block; font-size: 13px; font-weight: 600; color: var(--grijs); }
.okc .ok-staal__prijs small.ok-staal--voorraad { color: var(--groend); }
.okc .ok-doorsnede { display: grid; gap: 8px; padding: 12px; background: var(--zand); border-radius: 10px; }
.okc .ok-doorsnede__kop { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.okc .ok-doorsnede__kop b { font-weight: 800; }
.okc .ok-doorsnede__kop span { color: var(--grijs); font-weight: 700; }
.okc .ok-doorsnede svg { width: 100%; height: auto; display: block; }
.okc .ok-doorsnede__kant { font-size: 13px; font-weight: 700; fill: var(--grijs); }
.okc .ok-doorsnede ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.okc .ok-doorsnede li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 8px; align-items: start; font-size: 13px; line-height: 1.4; }
.okc .ok-doorsnede li i { width: 14px; height: 14px; border-radius: 3px; margin-top: 2px; border: 1px solid #0002; }
.okc .ok-doorsnede li i.ok-doorsnede__open { background: repeating-linear-gradient(90deg, #ead7b9 0 3px, transparent 3px 6px); }
.okc .ok-seg--kant button { min-height: 52px; }
.okc .ok-kijk2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.okc .ok-kijk2 .ok-knop { justify-content: center; }
.okc .ok-wanden__stalen { display: grid; grid-template-rows: 1fr 1fr; gap: 3px; height: 38px; }
.okc .ok-wanden__staal { width: 14px; border-radius: 3px; display: block; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(27, 31, 28, .15); }
.okc .ok-wanden__staal--leeg { background: repeating-linear-gradient(0deg, #d9c9b1 0 3px, transparent 3px 6px); border: 1px solid var(--lijnd); }
.okc .ok-plek { display: grid; gap: 8px; }
.okc .ok-plek__schuif { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; border: 1.5px solid var(--lijn); border-radius: 10px; background: #fff; }
.okc .ok-plek__schuif button { height: 40px; border: 0; background: transparent; display: grid; place-items: center; color: var(--groend); }
.okc .ok-plek__schuif span { text-align: center; font-size: 13px; font-weight: 700; color: var(--grijs); }
.okc .ok-verdeling { display: grid; align-items: stretch; gap: 0; border: 1.5px solid var(--lijn); border-radius: 10px; overflow: hidden; background: #fff; }
.okc .ok-verdeling__vak { display: grid; place-items: center; gap: 0; padding: 10px 4px; text-align: center; min-width: 0; }
.okc .ok-verdeling__vak b { font-size: 15px; font-weight: 800; }
.okc .ok-verdeling__vak small { font-size: 13px; color: var(--grijs); }
.okc .ok-verdeling__paal { display: grid; grid-template-columns: auto 10px auto; align-items: center; background: var(--zand); padding: 0 2px; }
.okc .ok-verdeling__paal i { width: 10px; height: 100%; background: #8b5e34; }
.okc .ok-verdeling__paal button { width: 30px; height: 44px; border: 0; background: transparent; display: grid; place-items: center; color: var(--groend); padding: 0; }
.okc .ok-verdeling__paal .ok-verdeling__plek { width: 30px; height: 44px; }
.okc .ok-verdeling__paal .ok-ico { width: 16px; height: 16px; stroke-width: 2.4; }
.okc .ok-galerij__kop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 6px 0 2px; }
.okc .ok-galerij__kop b { font-size: 15px; font-weight: 800; }
.okc .ok-galerij__kop span { font-size: 13px; color: var(--grijs); }
.okc .ok-galerij__filters { margin: 2px 0 6px; }
.okc .ok-galerij__filters .ok-chip { display: inline-flex; align-items: center; gap: 6px; }
.okc .ok-chip__aantal { font-size: 13px; font-weight: 600; color: var(--grijs); }
.okc .ok-chip--aan .ok-chip__aantal { color: var(--groend); }
.okc .ok-kaart__labels { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.okc .ok-kaart__labels i { font-style: normal; font-size: 13px; line-height: 1.2; padding: 2px 7px; border-radius: 999px; background: var(--zand); color: var(--ink); }
.okc .ok-kleuren { display: grid; gap: 6px; margin-top: 8px; }
.okc .ok-chip--kleur { display: inline-flex; align-items: center; gap: 6px; }
.okc .ok-chip--kleur i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(27, 31, 28, .25); flex: none; }
.okc .okp-stalen__kop { grid-column: 1 / -1; font-size: 13px; font-weight: 800; color: var(--grijs); margin-top: 4px; }
.okc .okp-rij--kleur { align-items: start; }
.okc .ok3d-zijnaam { font: 700 13px "Manrope", system-ui, sans-serif; color: #fff; background: rgba(27, 31, 28, .72); padding: 4px 10px; border-radius: 999px; pointer-events: none; white-space: nowrap; }
.okc .okl-zagen { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 14px 16px; border-top: 1px solid var(--lijn); align-items: baseline; }
.okc .okl-zagen > b { font-size: 15px; font-weight: 800; }
.okc .okl-zagen > span { font-size: 13px; color: var(--grijs); }
.okc .okl-zagen .ok-kaarten { grid-column: 1 / -1; }
.okc .ok-zobouw { display: grid; gap: 10px; }
.okc .ok-zobouw b { font-size: 13px; font-weight: 800; display: block; }
.okc .ok-zobouw p { font-size: 13px; color: var(--grijs); line-height: 1.45; }
.okc .okl-keuzes { display: grid; gap: 6px; padding: 14px 16px; border-top: 1px solid var(--lijn); }
.okc .okl-keuzes > b { font-size: 15px; font-weight: 800; margin-bottom: 2px; }
.okc .okl-keuzes > div { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; font-size: 13px; line-height: 1.4; }
.okc .okl-keuzes > div > span:first-child { color: var(--grijs); font-weight: 700; }
.okc .okl-keuzes .ok-link { font-size: 13px; }
.okc .okl { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; padding: 28px 40px 64px; max-width: 1440px; margin: 0 auto; background: #fff; }
.okc .okl-kop { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.okc .okl-kop h1 { font-size: 36px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; }
.okc .okl-kop p { font-size: 17px; color: var(--grijs); margin-top: 6px; max-width: 760px; }
.okc .okl-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--lijn); margin-bottom: 8px; flex-wrap: wrap; }
.okc .okl-tabs button { border: 0; background: none; height: 46px; padding: 0 14px; font-size: 15px; font-weight: 800; color: var(--grijs); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.okc .okl-tabs button.okl-tabs--aan { color: var(--ink); border-bottom-color: var(--groen); }
.okc .okl-tabs button span { font-weight: 700; color: var(--grijs); margin-left: 4px; }
.okc .okl-groep { margin-top: 22px; }
.okc .okl-groep__kop { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 8px; border-bottom: 2px solid var(--ink); }
.okc .okl-groep__kop h2 { font-size: 20px; font-weight: 800; }
.okc .okl-groep__kop span { font-size: 15px; font-weight: 800; }
.okc .okl-rij { display: grid; grid-template-columns: 72px minmax(0, 1fr) 92px 104px 112px 40px; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--lijn); }
.okc .okl-rij--uit { opacity: .45; }
.okc .okl-rij--uit .okl-rij__totaal { text-decoration: line-through; }
.okc .okl-rij__foto { width: 72px; height: 54px; border-radius: 6px; background: var(--zand); overflow: hidden; display: grid; place-items: center; }
.okc .okl-rij__foto img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.okc .okl-rij__foto svg { width: 100%; height: 100%; }
.okc .okl-rij__naam b { font-size: 15px; font-weight: 800; display: block; line-height: 1.35; }
.okc .okl-rij__naam small { font-size: 13px; color: var(--grijs); display: block; line-height: 1.4; }
.okc .okl-rij__voor { display: block; font-size: 14px; color: var(--ink); line-height: 1.45; margin-top: 2px; }
.okc .okl-groep__kop h2 small { display: block; font-size: 13px; font-weight: 500; color: var(--grijs); margin-top: 2px; letter-spacing: 0; }
.okc .okl-voorraad { font-size: 13px; font-weight: 700; color: var(--groen); display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; }
.okc .okl-voorraad::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.okc .okl-voorraad--lev { color: var(--grijs); }
.okc .okl-rij__aantal { font-size: 17px; font-weight: 800; text-align: right; white-space: nowrap; }
.okc .okl-rij__aantal small { display: block; font-size: 13px; color: var(--grijs); font-weight: 600; }
.okc .okl-rij__stuk { font-size: 13px; color: var(--grijs); text-align: right; white-space: nowrap; font-weight: 600; }
.okc .okl-rij__totaal { font-size: 17px; font-weight: 800; text-align: right; white-space: nowrap; }
.okc .okl-rij__meer { border: 0; background: none; width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; color: var(--grijs); }
.okc .okl-rij__meer:hover { background: var(--zand); color: var(--ink); }
.okc .okl-zaag { grid-column: 2 / -1; display: grid; gap: 6px; padding: 4px 0 6px; }
.okc .okl-zaag__balk { display: grid; grid-template-columns: 76px minmax(0, 1fr) 88px; gap: 12px; align-items: center; font-size: 13px; font-weight: 700; }
.okc .okl-zaag__balk > span:first-child { color: var(--grijs); white-space: nowrap; }
.okc .okl-zaag__staaf { display: flex; height: 30px; border-radius: 4px; overflow: hidden; background: repeating-linear-gradient(45deg, #efe6d8, #efe6d8 5px, #e4d7c3 5px, #e4d7c3 10px); }
.okc .okl-zaag__stuk { background: #d9b48b; border-right: 3px solid #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: #4a2f17; white-space: nowrap; min-width: 0; container-type: inline-size; }
.okc .okl-zaag__stuk span { display: none; }
@container (min-width: 70px) {
.okc .okl-zaag__stuk span.okl-zaag__m { display: inline; }
}
@container (min-width: 180px) {
.okc .okl-zaag__stuk span.okl-zaag__l { display: inline; margin-right: 6px; }
}
.okc .okl-zaag__rest { color: var(--grijs); text-align: right; white-space: nowrap; }
.okc .okl-zij { position: sticky; top: 72px; align-self: start; display: grid; gap: 16px; }
.okc .okl-kaart { border-radius: 14px; background: var(--zand); padding: 20px; display: grid; gap: 14px; }
.okc .okl-kaart__beeld { border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--kijk); }
.okc .okl-kaart__beeld img { width: 100%; height: 100%; object-fit: cover; }
.okc .okl-kaart__maat { font-size: 15px; font-weight: 800; }
.okc .okl-kaart__maat small { display: block; font-size: 13px; color: var(--grijs); font-weight: 600; }
.okc .okl-som { display: grid; gap: 6px; font-size: 15px; }
.okc .okl-som div { display: flex; justify-content: space-between; gap: 12px; }
.okc .okl-som div span:last-child { font-weight: 700; white-space: nowrap; }
.okc .okl-som .okl-som__totaal { border-top: 1px solid var(--lijnd); padding-top: 10px; margin-top: 4px; font-size: 15px; }
.okc .okl-som .okl-som__totaal b { font-size: 28px; font-weight: 800; }
.okc .okl-knoppen { display: grid; gap: 8px; }
.okc .okl-knoppen .ok-knop { width: 100%; }
.okc .okl-zeker { display: grid; gap: 8px; font-size: 13px; color: var(--grijs); }
.okc .okl-zeker div { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; }
.okc .okl-zeker .ok-ico { width: 16px; height: 16px; color: var(--groen); margin-top: 2px; }
.okc .okl-uitleg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; margin-top: 18px; }
.okc .okl-uitleg div { border-top: 2px solid var(--ink); padding-top: 10px; }
.okc .okl-uitleg b { font-size: 15px; font-weight: 800; display: block; margin-bottom: 4px; }
.okc .okl-uitleg p { font-size: 15px; color: var(--grijs); line-height: 1.5; }
.okc .okl-tekening { display: grid; gap: 20px; margin-top: 18px; }
.okc .okl-tekening figure { margin: 0; border: 1px solid var(--lijn); border-radius: 12px; overflow: hidden; background: #fbfaf7; }
.okc .okl-tekening figcaption { padding: 10px 16px; font-size: 13px; font-weight: 800; border-top: 1px solid var(--lijn); background: #fff; }
.okc .okl-tekening svg { width: 100%; height: auto; display: block; }
.okc .ok2d { font-family: "Manrope", system-ui, sans-serif; }
.okc .ok2d .ok2d-ml { stroke: #3d443f; stroke-width: 1; }
.okc .ok2d .ok2d-mt { font-size: 13px; font-weight: 800; fill: var(--ink); }
.okc .ok2d .ok2d-mt--k { font-weight: 700; fill: #3d443f; }
.okc .ok2d .ok2d-mt--l { font-weight: 700; fill: var(--grijs); }
.okc .ok2d .ok2d-huis { font-size: 13px; font-weight: 800; fill: #6c6152; }
.okc .ok2d .ok2d-afschot { font-size: 13px; font-weight: 800; fill: var(--groend); }
.okc .ok2d .ok2d-vaknaam { font-size: 13px; font-weight: 800; fill: var(--groend); }
.okc .ok2d .ok2d-schaal text { font-size: 13px; font-weight: 700; fill: var(--grijs); }
.okc .ok2d-rand { cursor: pointer; outline: none; }
.okc .ok2d-rand__lijn { stroke: var(--groen); stroke-width: 3; stroke-dasharray: 6 6; opacity: .55; }
.okc .ok2d-rand__plus circle { fill: #fff; stroke: var(--groen); stroke-width: 2; }
.okc .ok2d-rand__plus path { stroke: var(--groen); stroke-width: 2.2; fill: none; stroke-linecap: round; }
.okc .ok2d-rand--heeft .ok2d-rand__lijn { opacity: 0; }
.okc .ok2d-rand--heeft .ok2d-rand__plus circle { fill: var(--groen); }
.okc .ok2d-rand--heeft .ok2d-rand__plus path { stroke: #fff; }
.okc .ok2d-rand:hover .ok2d-rand__lijn, .okc .ok2d-rand:focus .ok2d-rand__lijn { opacity: 1; stroke-dasharray: none; stroke-width: 5; }
.okc .ok2d-rand:hover .ok2d-rand__plus circle, .okc .ok2d-rand:focus .ok2d-rand__plus circle { fill: var(--groen); }
.okc .ok2d-rand:hover .ok2d-rand__plus path, .okc .ok2d-rand:focus .ok2d-rand__plus path { stroke: #fff; }
.okc .ok2d-rand--aan .ok2d-rand__plus circle { fill: var(--ink); stroke: var(--ink); }
.okc .ok2d-rand--aan .ok2d-rand__plus path { stroke: #fff; }
.okc .ok2d-wand--aan { filter: drop-shadow(0 0 4px #0e7a3a); }
.okc .ok2d-zijnaam { font: 700 13px "Manrope", system-ui, sans-serif; fill: #5e655f; }
.okc .ok2d-vak { cursor: pointer; outline: none; }
.okc .ok2d-vak rect { fill: #ffffff; fill-opacity: .55; stroke: var(--groen); stroke-width: 2; stroke-dasharray: 6 5; }
.okc .ok2d-vak text { font-size: 15px; font-weight: 800; fill: var(--groend); }
.okc .ok2d-vak:hover rect, .okc .ok2d-vak:focus rect { fill: var(--groenl); fill-opacity: .9; stroke-dasharray: none; }
.okc .ok2d-vak--aan rect { fill: var(--groen); fill-opacity: .16; stroke-dasharray: none; }
.okc .ok-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 10px; font-size: 15px; font-weight: 700; box-shadow: var(--zweef); z-index: 300; display: flex; gap: 10px; align-items: center; }
.okc .ok-toast .ok-ico { color: #6fce93; }
.okc .ok-venster { position: fixed; inset: 0; background: #1b1f1c80; z-index: 250; display: grid; place-items: center; padding: 16px; }
.okc .ok-venster__in { background: #fff; border-radius: 16px; width: min(520px, 100%); box-shadow: var(--zweef); padding: 24px; display: grid; gap: 14px; }
.okc .ok-venster__in h2 { font-size: 24px; font-weight: 800; }
.okc .ok-venster__in p { font-size: 15px; color: var(--grijs); }
.okc .ok-venster__rij { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 15px; }
.okc .ok-venster__rij img { width: 56px; height: 42px; object-fit: cover; border-radius: 6px; background: var(--zand); mix-blend-mode: multiply; }
.okc .ok-venster__knoppen { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
@container tool (max-width: 600px) {
.okc .ok-tool { display: block; height: auto; min-height: 0; }
}
.okc .ok-tool--tel { display: block; height: auto; min-height: 0; }
.okc .ok-tool--tel .ok-kijk { height: 330px; }
.okc .ok-tool--tel .ok-zweef--lb { left: 10px; top: 10px; }
.okc .ok-tool--tel .ok-wissel button { height: 32px; padding: 0 10px; font-size: 13px; }
.okc .ok-tool--tel .ok-zweef--rb { right: 10px; top: 10px; }
.okc .ok-tool--tel .ok-gereedschap button { width: 36px; height: 36px; }
.okc .ok-tool--tel .ok-zweef--lo { left: 10px; right: 10px; bottom: 10px; }
.okc .ok-tool--tel .ok-kenmerk { max-width: 100%; }
.okc .ok-tool--tel .ok-standen, .okc .ok-tool--tel .ok-lagen { display: none; }
.okc .ok-tool--tel .ok-paneel { border-left: 0; display: block; }
.okc .ok-tool--tel .ok-paneel__kop { padding: 16px 16px 10px; }
.okc .ok-tool--tel .ok-paneel__titel { font-size: 20px; }
.okc .ok-tool--tel .ok-stappen { position: sticky; top: var(--ok-balk, 0px); z-index: 4; background: #fff; padding: 0 8px; column-gap: 2px; }
.okc .ok-tool--tel .ok-stap { padding: 16px 16px 120px; overflow: visible; }
.okc .ok-tool--tel .ok-stappen { grid-auto-columns: minmax(18px, 1fr); }
.okc .ok-tool--tel .ok-stappen button:not(.ok-stappen--aan) .ok-stappen__naam { display: none; }
.okc .ok-tool--tel .ok-stappen button { padding: 10px 2px 8px; min-height: 40px; }
.okc .ok-tool--tel .ok-stappen button.ok-stappen--aan { grid-column: span 3; }
.okc .ok-tool--tel .ok-voet { position: sticky; bottom: 0; z-index: 6; padding: 12px 16px 22px; box-shadow: 0 -6px 18px #0000000f; }
.okc .ok-tool--tel .ok-voet__prijs b { font-size: 22px; }
.okc .ok-tool--tel .ok-voet .ok-knop { height: 48px; font-size: 15px; padding: 0 16px; }
.okc .ok-tool--tel .ok-voet__acties { display: none; }
.okc .ok-tool--tel .ok-kaarten--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.okc .ok-tool--tel .ok-tip3d { display: none; }
.okc .okb { --b-grond: #f5f6f8; --b-vlak: #fff; --b-was: #f0f2f5; --b-lijn: #e5e8ee; --b-rand: #d5d9e1; --b-inkt: #141821; --b-sub: #525c6e; --b-stil: #667085; --b-accent: #5a43d6; --b-accent-zacht: #efecfd; --b-groen: #17984b; --b-groen-bg: #e8f5ed; --b-groen-inkt: #11632c; --b-oranje-bg: #fdf3e5; --b-oranje-inkt: #8f4e05; --b-rood-bg: #fdeeee; --b-rood-inkt: #b42318;
display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: calc(100vh - 48px); background: var(--b-grond); color: var(--b-inkt); font-family: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif; font-size: 14px; line-height: 20px; font-feature-settings: "cv11", "ss01"; }
.okc .okb-zij { background: #121521; color: #c9cfdb; padding: 14px 12px; display: flex; flex-direction: column; gap: 4px; }
.okc .okb-zij__logo { display: flex; align-items: center; gap: 8px; color: #fff; font-weight: 800; font-size: 18px; padding: 6px 10px 18px; }
.okc .okb-zij__logo i { width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(135deg, #7c63f2, #5a43d6); display: grid; place-items: center; color: #fff; font-style: normal; font-size: 15px; }
.okc .okb-zij h4 { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #8b93a7; padding: 14px 10px 6px; font-weight: 700; }
.okc .okb-zij a { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-radius: 8px; font-size: 14px; font-weight: 600; color: #c9cfdb; }
.okc .okb-zij a.okb-zij--aan { background: #23283a; color: #fff; }
.okc .okb-zij a.okb-zij--sub { padding-left: 36px; font-weight: 500; }
.okc .okb-zij .ok-ico { width: 16px; height: 16px; }
.okc .okb-werk { display: grid; grid-template-rows: 56px minmax(0, 1fr); min-width: 0; }
.okc .okb-balk { display: flex; align-items: center; gap: 16px; padding: 0 24px; background: #fff; border-bottom: 1px solid var(--b-lijn); }
.okc .okb-balk__winkel { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.okc .okb-balk__zoek { flex: 1; max-width: 480px; height: 36px; border: 1px solid var(--b-rand); border-radius: 8px; display: flex; align-items: center; gap: 8px; padding: 0 12px; color: var(--b-stil); }
.okc .okb-balk__wie { margin-left: auto; width: 32px; height: 32px; border-radius: 50%; background: var(--b-was); display: grid; place-items: center; font-weight: 700; font-size: 12px; }
.okc .okb-inhoud { padding: 24px 32px 64px; overflow-y: auto; display: grid; gap: 20px; align-content: start; }
.okc .okb-inhoud > *, .okc .okb-raster > *, .okc .okb-raster > div > * { min-width: 0; }
.okc .okb-kaart { overflow-x: auto; }
.okc .okb-kruimel { color: var(--b-stil); display: flex; gap: 6px; align-items: center; }
.okc .okb-titel { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.okc .okb-titel h1 { font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -.01em; }
.okc .okb-titel p { color: var(--b-sub); margin-top: 4px; max-width: 760px; }
.okc .okb-knop { height: 36px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--b-rand); background: #fff; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 14px; }
.okc .okb-knop--hoofd { background: var(--b-accent); border-color: var(--b-accent); color: #fff; }
.okc .okb-knop--klein { height: 30px; padding: 0 10px; font-size: 13px; }
.okc .okb-tabs { display: flex; gap: 18px; border-bottom: 1px solid var(--b-lijn); flex-wrap: wrap; }
.okc .okb-tabs button { border: 0; background: none; padding: 0 0 10px; font-weight: 600; color: var(--b-sub); border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: 14px; white-space: nowrap; }
.okc .okb-tabs button.okb-tabs--aan { color: var(--b-inkt); border-bottom-color: var(--b-inkt); }
.okc .okb-tabs button span { color: var(--b-stil); margin-left: 4px; font-weight: 500; }
.okc .okb-raster { display: grid; grid-template-columns: minmax(0, 1fr) 312px; gap: 20px; align-items: start; }
.okc .okb-kaart { background: #fff; border: 1px solid var(--b-lijn); border-radius: 12px; box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }
.okc .okb-kaart__kop { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--b-lijn); }
.okc .okb-kaart__kop h2 { font-size: 15px; font-weight: 700; }
.okc .okb-kaart__kop p { font-size: 13px; color: var(--b-stil); }
.okc .okb-kaart__in { padding: 16px 18px; display: grid; gap: 14px; }
.okc .okb-velden { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.okc .okb-veld { display: grid; gap: 6px; align-content: start; }
.okc .okb-veld--breed { grid-column: 1 / -1; }
.okc .okb-veld label { font-size: 13px; font-weight: 600; color: var(--b-sub); }
.okc .okb-veld input, .okc .okb-veld select { height: 36px; border: 1px solid var(--b-rand); border-radius: 8px; padding: 0 10px; font-size: 14px; background: #fff; width: 100%; }
.okc .okb-veld small { font-size: 12px; color: var(--b-stil); }
.okc .okb-invoer { display: flex; align-items: center; border: 1px solid var(--b-rand); border-radius: 8px; height: 36px; overflow: hidden; background: #fff; }
.okc .okb-invoer input { border: 0; height: 34px; outline: 0; padding: 0 10px; width: 100%; min-width: 4ch; font-size: 14px; field-sizing: content; }
.okc .okb-invoer span { padding: 0 10px; color: var(--b-stil); border-left: 1px solid var(--b-lijn); height: 100%; display: grid; place-items: center; background: var(--b-was); font-size: 13px; white-space: nowrap; }
.okc .okb-tabel { width: 100%; border-collapse: collapse; }
.okc .okb-tabel th { text-align: left; font-size: 12px; font-weight: 600; color: var(--b-stil); text-transform: uppercase; letter-spacing: .04em; padding: 10px 12px; border-bottom: 1px solid var(--b-lijn); white-space: nowrap; }
.okc .okb-tabel td { padding: 10px 12px; border-bottom: 1px solid var(--b-lijn); vertical-align: middle; }
.okc .okb-tabel tr:last-child td { border-bottom: 0; }
.okc .okb-tabel td small { display: block; color: var(--b-stil); font-size: 12px; }
.okc .okb-tabel input[type="text"], .okc .okb-tabel input[type="number"] { height: 32px; border: 1px solid var(--b-rand); border-radius: 7px; padding: 0 8px; width: 100%; min-width: 150px; font-size: 14px; field-sizing: content; max-width: 100%; }
.okc .okb-art { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: center; border: 1px solid var(--b-rand); border-radius: 8px; padding: 4px 8px 4px 4px; background: #fff; text-align: left; width: 100%; min-width: 260px; }
.okc .okb-art img { width: 40px; height: 32px; object-fit: cover; border-radius: 5px; background: #f5efe6; }
.okc .okb-art b { font-size: 13px; font-weight: 600; display: block; line-height: 17px; }
.okc .okb-art small { font-size: 12px; color: var(--b-stil); display: block; }
.okc .okb-pil { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.okc .okb-pil--groen { background: var(--b-groen-bg); color: var(--b-groen-inkt); }
.okc .okb-pil--oranje { background: var(--b-oranje-bg); color: var(--b-oranje-inkt); }
.okc .okb-pil--grijs { background: var(--b-was); color: var(--b-sub); }
.okc .okb-pil--rood { background: var(--b-rood-bg); color: var(--b-rood-inkt); }
.okc .okb-schakel { width: 36px; height: 20px; border-radius: 10px; background: var(--b-rand); position: relative; border: 0; flex: none; }
.okc .okb-schakel::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px #0003; transition: transform .15s; }
.okc .okb-schakel.okb-schakel--aan { background: var(--b-groen); }
.okc .okb-schakel.okb-schakel--aan::after { transform: translateX(16px); }
.okc .okb-proef { gap: 10px; }
.okc .okb-proef__rij { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--b-lijn); }
.okc .okb-proef__rij:last-child { border-bottom: 0; }
.okc .okb-proef__rij span:last-child { font-weight: 600; white-space: nowrap; }
.okc .okb-keur { display: grid; gap: 8px; }
.okc .okb-keur div { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; font-size: 13px; }
.okc .okb-keur .ok-ico { width: 16px; height: 16px; margin-top: 2px; }
.okc .okb-zoeklijst { position: absolute; z-index: 20; width: 420px; background: #fff; border: 1px solid var(--b-rand); border-radius: 12px; box-shadow: 0 16px 40px rgba(16, 24, 40, .14); padding: 8px; display: grid; gap: 2px; }
.okc .okb-zoeklijst input { height: 36px; border: 1px solid var(--b-rand); border-radius: 8px; padding: 0 10px; margin-bottom: 6px; font-size: 14px; }
.okc .okb-zoeklijst button { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; border: 0; background: none; padding: 6px; border-radius: 8px; text-align: left; }
.okc .okb-zoeklijst button:hover { background: var(--b-was); }
.okc .okb-zoeklijst img { width: 40px; height: 32px; object-fit: cover; border-radius: 5px; background: #f5efe6; }
.okc .okb-zoeklijst b { font-size: 13px; font-weight: 600; display: block; }
.okc .okb-zoeklijst small { font-size: 12px; color: var(--b-stil); }
.okc .okb-melding { display: flex; gap: 10px; align-items: flex-start; background: var(--b-groen-bg); color: var(--b-groen-inkt); border-radius: 10px; padding: 10px 14px; font-weight: 600; }
.okc .okb-richting { display: inline-grid; grid-auto-flow: column; gap: 4px; }
.okc .okb-richting button { height: 30px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--b-rand); background: var(--b-vlak); font-size: 13px; font-weight: 600; color: var(--b-sub); }
.okc .okb-richting button.okb-richting--aan { background: var(--b-accent-zacht); border-color: var(--b-accent); color: var(--b-accent); }
.okc .okb-stapel { display: grid; gap: 6px; justify-items: start; }
.okc .okb-stapel > .okb-art, .okc .okb-stapel > input { width: 100%; }
.okc .okb-stapel__rij { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 8px; width: 100%; font-size: 13px; color: var(--b-stil); }
.okc .okb-stapel__rij .okb-invoer { max-width: 120px; }
.okc .okb-profielen { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.okc .okb-profielen label { display: grid; gap: 2px; font-size: 12px; color: var(--b-stil); }
.okc .okb-kies { min-width: 104px; height: 32px; border: 1px solid var(--b-rand); border-radius: 6px; padding: 0 8px; font-size: 13px; background: var(--b-vlak); color: var(--b-inkt); }
@media (max-width: 1280px) {
.okc .okb-velden { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
.okc .ok-tool { display: block; height: auto; min-height: 0; }
.okc .ok-kijk { height: 58vh; min-height: 320px; }
.okc .ok-standen, .okc .ok-mini, .okc .ok-lagen { display: none; }
.okc .ok-paneel { border-left: 0; }
.okc .ok-stap { overflow: visible; }
.okc .ok-voet { position: sticky; bottom: 0; z-index: 6; }
.okc .okl { grid-template-columns: minmax(0, 1fr); padding: 20px 16px 48px; }
.okc .okl-zij { position: static; }
.okc .okl-rij { grid-template-columns: 56px minmax(0, 1fr) auto; }
.okc .okl-rij__stuk, .okc .okl-rij__meer { display: none; }
.okc .okl-uitleg { grid-template-columns: minmax(0, 1fr); }
.okc .okb { grid-template-columns: minmax(0, 1fr); }
.okc .okb-zij { display: none; }
.okc .okb-inhoud { padding: 16px; }
.okc .okb-raster { grid-template-columns: minmax(0, 1fr); }
.okc .okb-kaart { overflow-x: auto; }
.okc .okb-velden { grid-template-columns: minmax(0, 1fr); }
.okc .okb-titel { flex-wrap: wrap; }
}
@media (max-width: 520px) {
.okc .ok-wissel button:not(.ok-wissel--aan) .ok-wissel__tekst { display: none; }
.okc .okb-balk { padding: 0 16px; gap: 10px; }
.okc .okb-balk__zoek { display: none; }
.okc .okb-titel h1 { font-size: 22px; line-height: 28px; }
.okc .ok-kenmerk span:nth-child(n+3) { display: none; }
.okc .ok-kaarten--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.okc .ok-voet__stap, .okc .ok-voet__lang { display: none; }
.okc .ok-stappen { grid-auto-columns: minmax(18px, 1fr); }
.okc .ok-stappen button { min-height: 40px; }
.okc .ok-stappen button:not(.ok-stappen--aan) .ok-stappen__naam { display: none; }
.okc .ok-stappen button.ok-stappen--aan { grid-column: span 3; }
}
.okc .okp { position: absolute; z-index: 8; top: 12px; left: 12px; width: 456px; max-width: calc(100% - 24px); max-height: calc(100% - 24px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: #fff; border: 1px solid var(--lijn); border-radius: 10px; box-shadow: var(--zweef); overflow: hidden; font-size: 14px; line-height: 1.4; animation: okp-in .14s ease-out; }
.okc .okp:focus { outline: none; }
.okc .okp-kop { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 16px; border-bottom: 1px solid var(--lijn); background: #fff; transition: box-shadow .15s; }
.okc .okp-kop__tekst { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; }
.okc .okp-kop__titel { font-size: 16px; font-weight: 800; line-height: 1.3; letter-spacing: -.005em; }
.okc .okp-kop__sub { font-size: 13px; font-weight: 600; color: var(--grijs); }
.okc .okp-sluit { flex: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--grijs); display: grid; place-items: center; }
.okc .okp-sluit:hover { background: var(--zand); color: var(--ink); }
.okc .okp-romp { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 16px 12px; display: grid; gap: 10px; align-content: start; scrollbar-width: thin; }
.okc .okp-deel { display: grid; gap: 6px; min-width: 0; }
.okc .okp-deel__kop { font-size: 13px; font-weight: 800; color: var(--grijs); }
.okc .okp-deel__sub { font-size: 13px; font-weight: 700; color: var(--grijs); margin-top: 3px; }
.okc .okp-rij { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; align-items: center; }
.okc .okp-noot { font-size: 13px; font-weight: 600; line-height: 1.45; color: var(--grijs); }
.okc .okp .ok-uitleg, .okc .okp .ok-melding { font-size: 13px; font-weight: 600; }
.okc .okp-vorm .ok-seg button { display: grid; justify-items: center; align-content: start; gap: 1px; padding: 6px 4px 5px; font-size: 13px; }
.okc .okp-vorm .ok-seg button .ok-ico { width: 20px; height: 20px; margin-bottom: 2px; stroke-width: 1.6; }
.okc .okp-vorm .ok-seg button.ok-seg--aan small { color: var(--groend); }
.okc .okp-vorm .ok-seg:has(> :nth-child(5)) { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.okc .okp .ok-seg--kant button { min-height: 48px; padding: 5px 4px; }
.okc .okp .ok-seg--kant:has([data-okp-kant="iso"]) { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 5fr); }
.okc .okp-paneel { display: grid; gap: 10px; min-width: 0; }
.okc .okp-stalen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 6px; }
.okc .okp-staal { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 9px; align-items: center; min-width: 0; min-height: 38px; padding: 3px 8px 3px 3px; border: 1px solid var(--lijn); border-radius: 8px; background: #fff; text-align: left; }
.okc .okp-staal:hover { border-color: var(--lijnd); }
.okc .okp-staal.okp-staal--aan { border-color: var(--groen); box-shadow: 0 0 0 1px var(--groen); background: var(--groenl); }
.okc .okp-staal__naam { font-size: 13px; font-weight: 700; line-height: 1.25; overflow-wrap: break-word; hyphens: auto; }
.okc .okp-staal__beeld { position: relative; width: 44px; height: 30px; border-radius: 5px; overflow: hidden; background: var(--zand); }
.okc .okp-staal__beeld::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(27, 31, 28, .18); }
.okc .okp-staal__beeld img.okp-staal__foto { width: 100%; height: 100%; object-fit: cover; transform: scale(1.6); transform-origin: 52% 56%; display: block; }
.okc .ok-staalsvg { display: block; width: 100%; height: 100%; }
.okc .okp-staal__beeld--open { display: grid; place-items: center; background: var(--zand); color: var(--grijs); }
.okc .okp-staal__beeld--open::before { content: none; }
.okc .okp-staal__beeld--open .ok-ico { width: 17px; height: 17px; stroke-width: 1.5; }
.okc .okp-voet { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 7px 8px 7px 16px; border-top: 1px solid var(--lijn); background: #fff; transition: box-shadow .15s; }
.okc .okp-voet__prijs { display: grid; min-width: 0; }
.okc .okp-voet__prijs small { font-size: 13px; font-weight: 600; color: var(--grijs); line-height: 1.3; }
.okc .okp-voet__prijs b { font-size: 17px; font-weight: 800; line-height: 1.25; white-space: nowrap; }
.okc .okp-voet .ok-knop { margin-left: auto; }
.okc .okp--hoger .okp-kop { box-shadow: 0 10px 16px -10px rgba(27, 31, 28, .3); }
.okc .okp--meer .okp-voet { box-shadow: 0 -10px 16px -10px rgba(27, 31, 28, .3); }
.okc .okp-tip { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-weight: 600; }
.okc .okp-tip .ok-ico { width: 15px; height: 15px; color: #6fce93; }
.okc .okp.okp--vel { position: relative; z-index: 1; top: auto; left: auto; width: auto; max-width: none; max-height: none; overflow: visible; border-width: 1px 0; border-radius: 14px 14px 0 0; box-shadow: 0 -10px 24px rgba(27, 31, 28, .14); animation-name: okp-op; }
.okc .okp--vel .okp-kop { padding-top: 16px; border-radius: 14px 14px 0 0; }
.okc .okp--vel .okp-kop::before { content: ""; position: absolute; top: 6px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--lijnd); }
.okc .okp--vel .okp-romp { overflow: visible; padding-bottom: 16px; }
.okc .ok-paneel:has(> .okp--vel:not([hidden])) { display: block; }
@keyframes okp-in { from { opacity: 0; transform: translateY(4px); } }
@keyframes okp-op { from { transform: translateY(24px); opacity: .4; } }
@media (prefers-reduced-motion: reduce) {
.okc .okp { animation: none; }
}
.okc .wt { margin-top: 18px; }
.okc .wt-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.okc .wt-vel { border: 1px solid var(--ink); background: #fff; padding: 12px 12px 0; display: grid; gap: 10px; }
.okc .wt-rij { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); gap: 10px; align-items: start; }
.okc .wt-aanzicht { margin: 0; border: 1px solid #cfc9bf; background: #fff; }
.okc .wt-aanzicht svg { display: block; width: 100%; height: auto; }
.okc .wt-aanzicht figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 10px; border-top: 1px solid #cfc9bf; font-size: 13px; line-height: 1.35; }
.okc .wt-aanzicht figcaption b, .okc .wt-stuk__kop b { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.okc .wt-aanzicht figcaption span, .okc .wt-stuk__kop span { color: var(--grijs); text-align: right; }
.okc .wt-deel { fill: #f3e9d9; stroke: #2a2620; stroke-width: .8; stroke-linejoin: round; transition: fill .15s; }
.okc .wt-deel--snede { fill: url(#wtKops); stroke-width: 1; }
.okc .wt-grond { stroke: var(--ink); stroke-width: 1.4; }
.okc .wt-as { stroke: #77736b; stroke-width: .6; stroke-dasharray: 14 3 2 3; }
.okc .wt-asbol circle { fill: #fff; stroke: var(--ink); stroke-width: .8; }
.okc .wt-asbol text { font-size: 13px; font-weight: 800; fill: var(--ink); }
.okc .wt-maat line { stroke: var(--ink); stroke-width: .6; }
.okc .wt-maat__tik { stroke: var(--ink); stroke-width: 1.1; }
.okc .wt-maat__tekst { font-size: 13px; fill: var(--ink); }
.okc .wt-hoek path { fill: none; stroke: var(--ink); stroke-width: .7; }
.okc .wt-hoek text, .okc .wt-label { font-size: 13px; font-weight: 800; fill: var(--ink); }
.okc .wt-ballon line { stroke: var(--ink); stroke-width: .6; }
.okc .wt-ballon circle { fill: #fff; stroke: var(--ink); stroke-width: .9; }
.okc .wt-ballon circle.wt-ballon__punt { fill: var(--ink); stroke: none; }
.okc .wt-ballon text { font-size: 13px; font-weight: 800; fill: var(--ink); }
.okc .wt-snede line { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 16 3 2 3; }
.okc .wt-snede path { fill: none; stroke: var(--ink); stroke-width: 1.3; }
.okc .wt-snede text { font-size: 13px; font-weight: 800; fill: var(--ink); }
.okc .wt-deel.wt-aan { fill: #f6c56f; stroke: #7a4a10; }
.okc .wt-ballon.wt-aan circle:not(.wt-ballon__punt) { fill: var(--ink); }
.okc .wt-ballon.wt-aan text { fill: #fff; }
.okc tr.wt-aan td { background: #fbf1df; }
.okc .wt-stuk { border: 1px solid #cfc9bf; min-width: 0; }
.okc .wt-stuk__kop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 10px; border-bottom: 1px solid #cfc9bf; font-size: 13px; }
.okc .wt-tabelvak { overflow-x: auto; }
.okc .wt-tabel { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.35; }
.okc .wt-tabel th { text-align: left; font-size: 13px; font-weight: 800; color: var(--grijs); padding: 6px 8px; border-bottom: 1px solid var(--ink); white-space: nowrap; }
.okc .wt-tabel td { padding: 6px 8px; border-bottom: 1px solid #ece7de; vertical-align: top; }
.okc .wt-tabel td small { display: block; color: var(--grijs); font-size: 13px; margin-top: 1px; }
.okc .wt-tabel th.wt-getal, .okc .wt-getal { text-align: right; white-space: nowrap; }
.okc .wt-pos { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 5px; border: 1px solid var(--ink); border-radius: 12px; font-size: 13px; font-weight: 800; background: #fff; }
.okc .wt-noot { padding: 8px 10px; font-size: 13px; color: var(--grijs); }
.okc .wt-titel { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--ink); margin: 0 -12px; }
.okc .wt-titel > div { padding: 8px 12px; border-left: 1px solid #cfc9bf; display: grid; gap: 1px; font-size: 13px; line-height: 1.35; min-width: 0; }
.okc .wt-titel > div:first-child { border-left: 0; }
.okc .wt-titel small { color: var(--grijs); font-size: 13px; }
.okc .wt-titel__merk b { font-size: 15px; }
.okc .wt-schets { display: block; }
.okc .wt-schets__vorm { fill: #f3e9d9; stroke: #2a2620; stroke-width: .9; stroke-linejoin: round; }
.okc .wt-schets__breuk { fill: none; stroke: #2a2620; stroke-width: .9; }
.okc .wt-schets__hoek { font-size: 13px; font-weight: 800; fill: var(--ink); }
@media (max-width: 1180px) {
.okc .wt-rij { grid-template-columns: minmax(0, 1fr); }
.okc .wt-titel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.okc .wt-titel > div:nth-child(4) { border-left: 0; }
}
.okc .okz .wt-tabelvak { margin-top: 10px; }
.okc .okz-tabel td:nth-child(2) b { font-weight: 800; }
.okc .okz-tabel th:nth-child(3), .okc .okz-tabel th:nth-child(4) { text-align: right; }
.okc .okz-schets { width: 176px; }
.okc .okz-plan { margin-top: 14px; display: grid; gap: 6px; }
.okc .okz-plan__kop { font-size: 13px; font-weight: 800; color: var(--grijs); letter-spacing: .04em; }
.okc .okl-zaag__stuk b { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 10px; background: #fff; color: #4a2f17; font-size: 13px; font-weight: 800; margin-right: 5px; flex: none; }
.okc .okl-rij__pos { display: block; font-size: 13px; color: var(--grijs); margin-top: 2px; }
.okc .okl--breed { grid-template-columns: minmax(0, 1fr); }
.okc .okl--breed .okl-zij { position: static; max-width: 520px; }
.okc .wt-asletter { font-size: 13px; font-weight: 800; fill: var(--ink); }
.okc .wt-kern { border: 1px solid #cfc9bf; min-width: 0; display: flex; flex-direction: column; }
.okc .wt-kern dl { margin: 0; padding: 4px 10px 8px; display: grid; gap: 0; }
.okc .wt-kern dl > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; padding: 7px 0; border-bottom: 1px solid #ece7de; font-size: 13px; line-height: 1.4; }
.okc .wt-kern dt { color: var(--grijs); font-weight: 700; }
.okc .wt-kern dd { margin: 0; }
.okc .wt-legenda { margin-top: auto; display: grid; gap: 6px; padding: 10px; border-top: 1px solid #cfc9bf; font-size: 13px; color: var(--grijs); }
.okc .wt-legenda span { display: flex; align-items: center; gap: 8px; }
.okc .wt-legenda__as { width: 28px; height: 0; border-top: 1px dashed #77736b; }
.okc .wt-legenda__snede { width: 18px; height: 12px; border: 1px solid #2a2620; background: repeating-linear-gradient(45deg, #f3e9d9 0 3px, #6b5a45 3px 4px); }
.okc .wt-legenda__ballon { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--ink); border-radius: 50%; font-style: normal; font-size: 13px; font-weight: 800; color: var(--ink); }
.okc .wt-snede path.wt-snede__eind { stroke-width: 3; }
@media (max-width: 680px) {
.okc .wt-tabel thead { display: none; }
.okc .wt-tabel, .okc .wt-tabel tbody { display: block; }
.okc .wt-tabel tr { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-areas: "pos naam lengte" "pos maat stuks" "pos zagen zagen" "pos schets schets"; column-gap: 10px; row-gap: 2px; padding: 9px 0; border-bottom: 1px solid #ece7de; }
.okc .wt-tabel td { border: 0; padding: 0; min-width: 0; }
.okc .wt-c-pos { grid-area: pos; }
.okc .wt-c-naam { grid-area: naam; }
.okc .wt-c-maat { grid-area: maat; color: var(--grijs); }
.okc .wt-c-lengte { grid-area: lengte; }
.okc .wt-c-stuks { grid-area: stuks; }
.okc .wt-c-zagen { grid-area: zagen; }
.okc .wt-c-schets { grid-area: schets; width: auto; }
.okc .wt-c-lengte::after { content: " mm"; }
.okc .wt-c-stuks::after { content: " stuks"; color: var(--grijs); }
.okc .wt-c-maat:empty, .okc .wt-c-schets:empty { display: none; }
.okc .wt-titel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.okc .wt-titel > div { border-left: 0; border-top: 1px solid #cfc9bf; }
.okc .wt-kern dl > div { grid-template-columns: 84px minmax(0, 1fr); }
}
.okc .ok3d-pos { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 5px; border-radius: 12px; background: #fff; border: 1.5px solid var(--ink); font: 800 13px "Manrope", system-ui, sans-serif; color: var(--ink); box-shadow: 0 2px 6px rgba(27, 31, 28, .18); pointer-events: auto; cursor: default; }
.okc .ok-tip3d__pos { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 4px; margin-right: 6px; border-radius: 11px; border: 1.5px solid currentColor; font-style: normal; font-size: 13px; font-weight: 800; vertical-align: 1px; }
.okc .ok-overstek { display: grid; gap: 8px; margin-top: 10px; }
.okc .ok-overstek__rij { display: grid; grid-template-columns: 60px minmax(0, 1fr); align-items: center; gap: 8px; }
.okc .ok-overstek__rij .ok-label { margin: 0; }
.okc .okw-ontwerp { position: sticky; top: 0; z-index: 30; background: #efecfd; border-bottom: 1px solid #d9d2fb; }
.okc .okw-ontwerp__in { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; padding: 10px 24px; }
.okc .okw-ontwerp__kop { display: grid; gap: 2px; flex: 1 1 220px; min-width: 0; }
.okc .okw-ontwerp__kop b { font-size: 14px; color: #3b2b9e; }
.okc .okw-ontwerp__kop span { font-size: 13px; color: #525c6e; }
.okc .okw-ontwerp__veld { display: grid; gap: 3px; flex: 0 1 220px; min-width: 160px; }
.okc .okw-ontwerp__veld--breed { flex: 1 1 320px; }
.okc .okw-ontwerp__veld span { font-size: 13px; color: #525c6e; font-weight: 600; }
.okc .okw-ontwerp__veld input { height: 36px; border: 1px solid #d5d9e1; border-radius: 8px; padding: 0 10px; font: inherit; font-size: 14px; background: #fff; min-width: 0; width: 100%; }
.okc .okw-ontwerp__veld input:focus, .okc .okw-ontwerp__veld textarea:focus { outline: none; border-color: #5a43d6; }
.okc .okw-ontwerp__veld textarea { min-height: 36px; border: 1px solid #d5d9e1; border-radius: 8px; padding: 7px 10px; font: inherit; font-size: 14px; line-height: 1.4; background: #fff; min-width: 0; width: 100%; resize: none; field-sizing: content; }
.okc .okw-ontwerp__vink { display: flex; align-items: center; gap: 8px; height: 36px; font-size: 14px; color: #141821; }
.okc .okw-ontwerp__vink input { width: 16px; height: 16px; accent-color: #5a43d6; }
.okc .okw-ontwerp__knoppen { display: flex; gap: 8px; margin-left: auto; }
.okc .okw-ontwerp__knop { height: 36px; padding: 0 14px; border-radius: 8px; border: 1px solid #d5d9e1; background: #fff; font-weight: 600; font-size: 14px; white-space: nowrap; cursor: pointer; }
.okc .okw-ontwerp__knop--hoofd { background: #5a43d6; border-color: #5a43d6; color: #fff; }
@media (max-width: 700px) {
.okc .okw-ontwerp__in { padding: 10px 16px; }
.okc .okw-ontwerp__veld { flex: 1 1 100%; }
.okc .okw-ontwerp__knoppen { margin-left: 0; width: 100%; }
.okc .okw-ontwerp__knop { flex: 1; }
}
.okc .okb-tabelvak { overflow-x: auto; }
.okc .okb-tabel--ontwerpen td { vertical-align: middle; }
.okc .okb-duim { display: block; width: 112px; height: 70px; border-radius: 6px; overflow: hidden; background: var(--b-was); }
.okc .okb-duim img { width: 100%; height: 100%; object-fit: cover; display: block; }
.okc .okb-duim small { display: grid; place-items: center; height: 100%; font-size: 13px; color: var(--b-stil); text-align: center; }
.okc .okb-ontwerp { display: grid; gap: 4px; min-width: 240px; }
.okc .okb-ontwerp textarea { width: 100%; resize: none; field-sizing: content; min-height: 0; font: inherit; font-size: 14px; line-height: 1.35; padding: 6px 8px; border: 1px solid var(--b-rand); border-radius: 6px; background: #fff; color: var(--b-inkt); }
.okc .okb-ontwerp textarea:focus { outline: none; border-color: var(--b-accent); }
.okc .okb-ontwerp__naam { font-weight: 600; }
.okc .okb-ontwerp__zin { color: var(--b-sub); font-size: 13px !important; }
.okc .okb-ontwerp__maat { white-space: nowrap; }
.okc .okb-ontwerp__maat small { display: block; color: var(--b-stil); font-size: 13px; }
.okc .okb-volg { display: flex; gap: 4px; }
.okc .okb-volg i { width: 30px; height: 30px; flex: none; }
.okc .okb-volg .okb-knop { width: 30px; padding: 0; justify-content: center; }
.okc .okb-volg .okb-knop svg { transform: rotate(-90deg); }
.okc .okb-volg .okb-volg--neer svg { transform: rotate(90deg); }
.okc .okb-acties { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.okc .okb-acties > span { font-size: 13px; color: var(--b-rood-inkt); font-weight: 600; }
.okc .okb-knop--rood { background: var(--b-rood-inkt); border-color: var(--b-rood-inkt); color: #fff; }
.okc .okb-rij--uit .okb-duim, .okc .okb-rij--uit .okb-ontwerp, .okc .okb-rij--uit .okb-ontwerp__maat { opacity: .55; }
@media (max-width: 640px) {
.okc .okb-kaart__kop--stapel { flex-direction: column; align-items: flex-start; }
}
.okc .okpk-intro { display: flex; gap: 12px; align-items: flex-start; background: var(--groenl); border-radius: 12px; padding: 14px 16px; margin-top: 14px; font-size: 15px; line-height: 1.5; }
.okc .okpk-intro > .ok-ico { color: var(--groen); margin-top: 2px; }
.okc .okpk-intro__meer { display: block; margin-top: 6px; color: var(--groend); font-weight: 600; }
.okc .okpk-intro__meer .ok-link { font-size: 15px; }
.okc .okpk-lijst { list-style: none; margin: 0; padding: 0; }
.okc .okpk-lijst li { display: grid; grid-template-columns: minmax(150px, 260px) minmax(0, 1fr); gap: 4px 20px; padding: 11px 0; border-bottom: 1px solid var(--lijn); font-size: 15px; line-height: 1.45; }
.okc .okpk-lijst li b { font-weight: 800; }
.okc .okpk-lijst li span { color: var(--ink); }
.okc .okpk-als { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; background: #fff7e8; border: 1px solid #f0d9a8; color: var(--oranje); border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; font-size: 14px; font-weight: 600; }
.okc .okpk-als .ok-link { color: var(--oranje); font-size: 14px; }
@media (max-width: 640px) {
.okc .okpk-lijst li { grid-template-columns: minmax(0, 1fr); }
}
.okc .okh { display: grid; gap: 18px; margin-top: 14px; }
.okc .okh-intro { font-size: 15px; line-height: 1.5; color: var(--ink); }
.okc .okh-inhoud { display: flex; flex-wrap: wrap; gap: 6px; }
.okc .okh-inhoud button { height: 32px; padding: 0 12px; border: 1px solid var(--lijn); border-radius: 999px; background: #fff; font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.okc .okh-inhoud button:hover { border-color: var(--groen); color: var(--groend); }
.okc .okh-stap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px; padding: 18px 0; border-top: 1px solid var(--lijn); scroll-margin-top: 64px; }
.okc .okh-stap__beeld { aspect-ratio: 64 / 42; border-radius: 12px; overflow: hidden; background: var(--kijk); display: grid; place-items: center; max-width: 100%; }
.okc .okh-stap__beeld img { width: 100%; height: 100%; object-fit: cover; }
.okc .okh-laden { font-size: 13px; color: var(--grijs); }
.okc .okh-stap__tekst { display: grid; gap: 8px; align-content: start; min-width: 0; }
.okc .okh-stap__tekst h2 { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; }
.okc .okh-nr { width: 30px; height: 30px; border-radius: 50%; background: var(--groen); color: #fff; display: grid; place-items: center; font-size: 15px; font-weight: 800; flex: none; }
.okc .okh-stap__tekst p { font-size: 14px; line-height: 1.55; color: var(--ink); }
.okc .okh-kop { font-size: 13px; font-weight: 800; color: var(--grijs); letter-spacing: .02em; margin-top: 6px; }
.okc .okh-delen { width: 100%; border-collapse: collapse; font-size: 14px; }
.okc .okh-delen td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.okc .okh-delen td small { display: block; color: var(--grijs); font-size: 13px; }
.okc .okh-delen .wt-getal { text-align: right; white-space: nowrap; }
.okc .okh-lijst { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.55; }
.okc .okh-klein { font-size: 14px; color: var(--ink); }
.okc .okh-tip { display: flex; gap: 8px; align-items: flex-start; background: var(--zand); border-radius: 9px; padding: 9px 12px; font-size: 14px; line-height: 1.5; margin-top: 4px; }
.okc .okh-tip .ok-ico { color: var(--bruin); width: 18px; height: 18px; margin-top: 2px; }
@media (max-width: 860px) {
.okc .okh-stap { grid-template-columns: minmax(0, 1fr); }
}
.okc .ok-mijn__lijst { display: grid; gap: 8px; }
.okc .ok-mijn__kaart { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 12px; align-items: center; border: 1px solid var(--lijn); border-radius: 10px; padding: 8px; background: #fff; }
.okc .ok-mijn__beeld { width: 88px; height: 56px; border-radius: 7px; overflow: hidden; background: var(--kijk); display: grid; place-items: center; color: var(--grijs); }
.okc .ok-mijn__beeld img { width: 100%; height: 100%; object-fit: cover; }
.okc .ok-mijn__tekst { display: grid; gap: 1px; min-width: 0; }
.okc .ok-mijn__tekst b { font-size: 15px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.okc .ok-mijn__tekst small { font-size: 13px; color: var(--grijs); line-height: 1.35; }
.okc .ok-mijn__knoppen { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.okc .ok-knop--rood { background: var(--rood); color: #fff; }
@media (max-width: 480px) {
.okc .ok-mijn__kaart { grid-template-columns: 72px minmax(0, 1fr); }
.okc .ok-mijn__beeld { width: 72px; height: 48px; }
.okc .ok-mijn__knoppen { grid-column: 1 / -1; justify-content: flex-start; }
}
.okc .ok-venster__in { max-height: calc(100vh - 32px); overflow-y: auto; }
.okc .ok-form { display: grid; gap: 12px; }
.okc .ok-form__rij { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.okc .ok-form__veld { display: grid; gap: 5px; min-width: 0; }
.okc .ok-form__veld > span { font-size: 14px; font-weight: 700; color: var(--ink); }
.okc .ok-form__veld > span i { font-style: normal; font-weight: 500; color: var(--grijs); }
.okc .ok-form__veld input, .okc .ok-form__veld textarea { width: 100%; border: 1px solid var(--lijnd); border-radius: 8px; padding: 9px 12px; font-size: 15px; background: #fff; }
.okc .ok-form__veld input { height: 44px; }
.okc .ok-form__veld textarea { resize: vertical; min-height: 84px; line-height: 1.45; }
.okc .ok-form__veld input:focus, .okc .ok-form__veld textarea:focus { outline: none; border-color: var(--groen); box-shadow: 0 0 0 3px var(--groenl); }
.okc .ok-form__fout { color: var(--rood) !important; font-weight: 700; font-size: 14px !important; }
.okc .ok-form__goed { display: flex; align-items: center; gap: 6px; color: var(--groend) !important; font-weight: 700; font-size: 14px !important; }
.okc .ok-noot { font-size: 13px !important; color: var(--grijs); background: var(--zand); border-radius: 8px; padding: 8px 12px; }
.okc .ok-seg--klein { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
.okc .ok-seg--klein button { min-height: 40px; font-size: 14px; }
.okc .ok-offerte__ontwerp { display: grid; gap: 2px; background: var(--zand); border-radius: 10px; padding: 10px 14px; }
.okc .ok-offerte__ontwerp b { font-size: 15px; font-weight: 800; }
.okc .ok-offerte__ontwerp small { font-size: 13px; color: var(--grijs); }
.okc .ok-deel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.okc .ok-deel__link { border: 1px solid var(--lijnd); border-radius: 8px; padding: 9px 12px; font-size: 13px; line-height: 1.45; background: var(--zand); min-width: 0; width: 100%; resize: none; field-sizing: content; min-height: 44px; overflow-wrap: anywhere; word-break: break-all; font-family: inherit; color: var(--ink); }
.okc .ok-deel .ok-knop { height: 44px; }
.okc .ok-deel__qr { display: flex; align-items: center; gap: 14px; }
.okc .ok-deel__qr [data-qrbeeld] { width: 176px; height: 176px; flex: none; background: #fff; border: 1px solid var(--lijn); border-radius: 10px; padding: 6px; }
.okc .ok-deel__qr svg { width: 100%; height: 100%; display: block; }
.okc .ok-deel__qr span { font-size: 14px; color: var(--grijs); line-height: 1.5; }
@media (max-width: 520px) {
.okc .ok-form__rij { grid-template-columns: minmax(0, 1fr); }
.okc .ok-deel { grid-template-columns: minmax(0, 1fr); }
.okc .ok-deel__qr { flex-direction: column; align-items: flex-start; }
}
.okc .ok-kaartvak { position: relative; display: grid; min-width: 0; }
.okc .ok-kaartvak > .ok-kaart, .okc .ok-kaartvak > .ok-staal { height: 100%; }
.okc .ok-kaarten > .ok-kaartvak--rij:only-child { grid-column: 1 / -1; }
.okc .ok-kaart--details .ok-kaart__tekst { padding-bottom: 40px; }
.okc .ok-kaart--rij.ok-kaart--details .ok-kaart__tekst { padding-bottom: 36px; }
.okc .ok-staal--details { padding-bottom: 40px; }
.okc .ok-details { position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px 0 8px; border: 1px solid var(--lijn); border-radius: 999px; background: #fff; font-size: 13px; font-weight: 700; color: var(--groend); }
.okc .ok-details:hover { border-color: var(--groen); background: var(--groenl); }
.okc .ok-details .ok-ico { width: 15px; height: 15px; }
.okc .ok-venster--details .ok-venster__in { padding: 20px 22px; }
.okc .ok-details__kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.okc .ok-details__kop small { display: block; font-size: 13px; color: var(--grijs); margin-top: 2px; }
.okc .ok-details__sluit { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--lijn); background: #fff; display: grid; place-items: center; flex: none; }
.okc .ok-details__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.okc .ok-details__fotos { display: grid; gap: 8px; min-width: 0; }
.okc .ok-details__groot { aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--zand); display: grid; place-items: center; max-width: 100%; }
.okc .ok-details__groot img { width: 100%; height: 100%; object-fit: cover; }
.okc .ok-details__groot--leeg .ok-ico { width: 40px; height: 40px; color: var(--grijs); }
.okc .ok-details__duimen { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.okc .ok-details__duimen button { aspect-ratio: 1; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: var(--zand); }
.okc .ok-details__duimen button.ok-details__duim--aan { border-color: var(--groen); }
.okc .ok-details__duimen img { width: 100%; height: 100%; object-fit: cover; }
.okc .ok-details__tekst { display: grid; gap: 12px; min-width: 0; }
.okc .ok-details__lead { font-size: 15px !important; color: var(--ink) !important; font-weight: 600; }
.okc .ok-details__plus { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.okc .ok-details__plus li { display: flex; gap: 8px; align-items: flex-start; }
.okc .ok-details__plus .ok-ico { color: var(--groen); width: 17px; height: 17px; margin-top: 2px; }
.okc .ok-details__jouw { background: var(--groenl); border-radius: 10px; padding: 10px 14px; display: grid; gap: 4px; }
.okc .ok-details__jouw b { font-size: 14px; font-weight: 800; color: var(--groend); }
.okc .ok-details__jouw p { font-size: 14px !important; color: var(--ink) !important; }
.okc .ok-details__lang { display: grid; gap: 8px; font-size: 14px; line-height: 1.55; }
.okc .ok-details__lang h3 { font-size: 15px; font-weight: 800; margin-top: 4px; }
.okc .ok-details__lang p { font-size: 14px !important; color: var(--ink) !important; }
.okc .ok-details__lang ul { margin: 0; padding-left: 18px; }
.okc .ok-details__gekozen { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 8px; background: var(--groenl); color: var(--groend); font-weight: 800; font-size: 14px; }
.okc .ok-details__kan { font-size: 14px; color: var(--oranje); font-weight: 600; max-width: 420px; }
.okc .ok-knop small { font-weight: 600; opacity: .85; }
@media (max-width: 760px) {
.okc .ok-details__raster { grid-template-columns: minmax(0, 1fr); }
}
.okc .ok-kaart__actie { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; justify-self: start; margin-top: 6px; padding: 2px 8px; border-radius: 6px; background: #fdecea; color: var(--rood); font-size: 13px; font-weight: 800; }
.okc .ok-kaart__actie small { font-size: 13px; font-weight: 600; color: var(--rood); }
.okc .ok-kaart__prijs s { font-weight: 600; color: var(--grijs); margin-right: 4px; }
.okc .ok-voet__prijs small.ok-voet__actie { color: var(--rood); font-weight: 700; }
.okc .ok-voet__actie span { white-space: nowrap; }
.okc .okl-rij--korting .okl-rij__foto { background: #fdecea; color: var(--rood); }
.okc .okl-rij--korting .okl-rij__totaal { color: var(--rood); }
.okc .okl-knoppen__twee { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.okc .okb-actiecel { min-width: 150px; }
.okc .okb-actiecel > div { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.okc .okb-actiecel > div + div { margin-top: 8px; }
.okc .okb-actierij td { background: var(--b-was); }
.okc .okb-actie { display: grid; gap: 12px; padding: 4px 0; }
.okc .okb-actie > b { font-size: 14px; }
.okc .okb-actie .okb-acties { justify-content: flex-start; }
.okc .okb-fout { color: var(--b-rood-inkt); font-weight: 600; font-size: 13px; }
.okc .okb-keus { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.okc .okb-keus__optie { display: grid; gap: 2px; text-align: left; border: 1px solid var(--b-rand); border-radius: 10px; background: #fff; padding: 10px 12px; }
.okc .okb-keus__optie b { font-size: 14px; font-weight: 600; }
.okc .okb-keus__optie small { font-size: 13px; color: var(--b-stil); }
.okc .okb-keus__optie--aan { border-color: var(--b-accent); background: var(--b-accent-zacht); box-shadow: 0 0 0 1px var(--b-accent); }
.okc .okb-groepen { display: grid; gap: 6px; }
.okc .okb-groepen > span { font-size: 13px; font-weight: 600; color: var(--b-sub); }
.okc .okb-groepen small { font-size: 13px; color: var(--b-stil); }
.okc .okb-ja { display: inline-flex; align-items: center; gap: 4px; color: var(--b-groen-inkt); font-weight: 600; font-size: 13px; }
.okc .okb-ja .ok-ico { width: 16px; height: 16px; }
.okc .okb-nee { color: var(--b-stil); font-size: 13px; }
.okc .okb-opsom { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; }
.okc .okb-tabel--inzage td small { font-size: 13px; }
.okc .okb-aanvraag--nieuw td:first-child { box-shadow: inset 3px 0 0 var(--b-accent); }
.okc .okb-aanvraag__klant, .okc .okb-aanvraag__ontwerp { min-width: 180px; }
.okc .okb-aanvraag__klant small, .okc .okb-aanvraag__ontwerp small { font-size: 13px !important; }
.okc .okb-aanvraag__ontwerp p { font-size: 13px; color: var(--b-sub); margin-top: 4px; max-width: 360px; }
.okc .okb-tabel--aanvragen td .okb-kies { min-width: 150px; }
.okc .okb-tabel td.okb-getal, .okc .okb-getal { text-align: right; white-space: nowrap; }
.okc .okb-tabel td.okb-getal small { font-size: 13px; }
.okc .okb-trechter { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.okc .okb-trechter__stap { display: grid; grid-template-rows: auto 1fr auto auto; gap: 2px; border: 1px solid var(--b-lijn); border-radius: 10px; padding: 12px; }
.okc .okb-trechter__stap b { font-size: 24px; font-weight: 700; line-height: 1.2; }
.okc .okb-trechter__stap span { font-size: 13px; color: var(--b-sub); font-weight: 600; }
.okc .okb-trechter__stap small { font-size: 13px; color: var(--b-stil); }
.okc .okb-balkje { display: block; height: 6px; border-radius: 3px; background: var(--b-was); overflow: hidden; margin-top: 6px; min-width: 60px; }
.okc .okb-balkje i { display: block; height: 100%; background: var(--b-accent); border-radius: 3px; }
.okc .okb-keuzecijfers { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.okc .okb-keuzecijfer { display: grid; gap: 6px; align-content: start; }
.okc .okb-keuzecijfer h3 { font-size: 14px; font-weight: 700; display: flex; justify-content: space-between; }
.okc .okb-keuzecijfer h3 small { font-size: 13px; color: var(--b-stil); font-weight: 500; }
.okc .okb-keuzecijfer__rij { display: grid; grid-template-columns: minmax(0, 1fr) 80px 28px; gap: 8px; align-items: center; font-size: 13px; }
.okc .okb-keuzecijfer__rij .okb-balkje { margin-top: 0; }
.okc .okb-keuzecijfer__rij b { text-align: right; }
.okc .okb-leeg { font-size: 13px; color: var(--b-stil); }
.okc .okl-erbij { display: grid; gap: 18px; padding: 16px 0; border-top: 1px solid var(--lijn); }
.okc .okl-erbij__blok { display: grid; gap: 8px; }
.okc .okl-erbij__kop { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.okc .okl-erbij__kop b { font-size: 15px; font-weight: 800; }
.okc .okl-erbij__kop span { font-size: 13px; color: var(--grijs); text-align: right; }
.okc .okl-erbij .ok-chips { gap: 6px; }
.okc .okl-erbij .ok-chip { height: auto; min-height: 30px; padding: 4px 11px; white-space: normal; text-align: left; line-height: 1.3; }
.okc .okl-rij__foto .ok-ico { width: 26px; height: 26px; color: var(--grijs); }
.okc .okb--motor { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.okc .okb--motor .okb-werk { grid-template-rows: auto; }
.okc .okb--motor .okb-inhoud { overflow: visible; padding: 20px 16px 48px; }
.okc .okb-artikelen { display: grid; gap: 6px; }
.okc .okb-artikelen > span { font-size: 13px; font-weight: 600; color: var(--b-sub); margin-top: 6px; }
.okc .okb-diensten { display: grid; gap: 8px; margin-bottom: 14px; }
.okc .okb-dienst { display: grid; grid-template-columns: minmax(180px, 260px) minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.okc .okb-dienst .okb-art { min-width: 0; }
.okc .okb-dienst__naam b { display: block; font-size: 13px; font-weight: 600; line-height: 17px; }
.okc .okb-dienst__naam small { display: block; font-size: 13px; color: var(--b-stil); line-height: 17px; }
.okc .okb-uitleg { margin: 0 0 4px; font-size: 13px; line-height: 19px; color: var(--b-sub); max-width: 76ch; }
.okc .okb-art--leeg { border-style: dashed; }
.okc .okb-art--leeg .ok-ico { width: 20px; height: 20px; justify-self: center; color: var(--b-stil); }
.okc .okb-let { margin: 0 0 12px; padding: 8px 12px; border-radius: 8px; background: var(--b-oranje-bg); color: var(--b-oranje-inkt); font-size: 13px; line-height: 19px; }
.okc .okb-zoeklijst__zin { margin: 4px 6px; font-size: 13px; color: var(--b-stil); }
@media (max-width: 760px) {
.okc .okb-dienst { grid-template-columns: minmax(0, 1fr); }
}
.okc .ok-zonvak { position: absolute; top: 16px; right: 76px; z-index: 6; width: min(372px, calc(100% - 100px)); }
.okc .ok-zon { background: #fff; border-radius: 14px; box-shadow: var(--zweef); padding: 14px 16px 16px; display: grid; gap: 12px; max-height: calc(100% - 32px); overflow-y: auto; }
.okc .ok-zon__kop { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.okc .ok-zon__kop b { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; }
.okc .ok-zon__kop b .ok-ico { color: var(--oranje); }
.okc .ok-zon__sluit { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--lijn); background: #fff; display: grid; place-items: center; }
.okc .ok-zon__kompas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.okc .ok-zon__dagen { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 4px; }
.okc .ok-zon__kompas button, .okc .ok-zon__dagen button { min-height: 34px; padding: 4px 3px; border: 1px solid var(--lijn); border-radius: 8px; background: #fff; font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.okc .ok-zon__dagen button small { display: block; font-size: 13px; font-weight: 500; color: var(--grijs); }
.okc .ok-zon__kompas button.ok-zon--aan, .okc .ok-zon__dagen button.ok-zon--aan { border-color: var(--groen); background: var(--groenl); color: var(--groend); }
.okc .ok-zon__tijd { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.okc .ok-zon__tijd input[type="range"] { width: 100%; accent-color: var(--groen); }
.okc .ok-zon__tijd .ok-knop { height: 36px; padding: 0 10px; font-size: 13px; }
.okc .ok-zon__zin { font-size: 14px; line-height: 1.5; color: var(--ink); background: var(--zand); border-radius: 9px; padding: 8px 12px; }
.okc .ok-zon .ok-link { font-size: 14px; justify-self: start; }
.okc .ok-zonvak--onder { position: static; width: auto; margin: 10px 12px 0; }
.okc .ok-zonvak--onder .ok-zon { max-height: none; box-shadow: none; border: 1px solid var(--lijn); }
.okc .ok-venster--tuin .ok-venster__in { padding: 20px 22px; }
.okc .ok-tuin__tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--lijn); flex-wrap: wrap; }
.okc .ok-tuin__tabs button { border: 0; background: none; height: 42px; padding: 0 12px; font-size: 15px; font-weight: 800; color: var(--grijs); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.okc .ok-tuin__tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--groen); }
.okc .ok-tuin__vak { display: grid; gap: 12px; justify-items: center; min-height: 200px; }
.okc .ok-tuin__kies { width: 100%; display: grid; justify-items: center; gap: 6px; text-align: center; border: 2px dashed var(--lijnd); border-radius: 14px; padding: 36px 16px; cursor: pointer; background: var(--zand); font: inherit; color: var(--ink); }
.okc .ok-tuin__kies--over { border-color: var(--groen); background: var(--groenl); }
.okc .ok-tuin__kies + input[type="file"] { display: none; }
.okc .ok-tuin__kies b { font-size: 17px; font-weight: 800; }
.okc .ok-tuin__kies span { font-size: 14px; color: var(--grijs); }
.okc .ok-tuin__kiesicoon .ok-ico { width: 34px; height: 34px; color: var(--groen); }
.okc .ok-tuin__kies:focus-visible { border-color: var(--groen); }
.okc .ok-tuin__tips { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.6; color: var(--grijs); justify-self: start; }
.okc .ok-tuin__podium { position: relative; max-width: 100%; border-radius: 12px; overflow: hidden; background-size: 100% 100%; background-position: center; touch-action: none; }
.okc .ok-tuin__podium canvas { display: block; }
.okc .ok-tuin__bediening { display: grid; gap: 8px; width: 100%; }
.okc .ok-tuin__knoppen { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.okc .ok-tuin__knoppen button { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 12px; border: 1px solid var(--lijnd); border-radius: 8px; background: #fff; font-size: 14px; font-weight: 700; }
.okc .ok-tuin__knoppen button .ok-ico { width: 16px; height: 16px; }
.okc .ok-tuin__live { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 18px; width: 100%; align-items: start; }
.okc .ok-tuin__mv { aspect-ratio: 4 / 3; border-radius: 12px; background: var(--kijk); display: grid; place-items: center; overflow: hidden; max-width: 100%; }
.okc .ok-tuin__mv model-viewer { width: 100%; height: 100%; }
.okc .ok-tuin__arknop { position: absolute; bottom: 12px; right: 12px; }
.okc .ok-tuin__livetekst { display: grid; gap: 8px; font-size: 14px; line-height: 1.55; }
.okc .ok-tuin__livetekst b { font-size: 16px; font-weight: 800; }
@media (max-width: 760px) {
.okc .ok-tuin__live { grid-template-columns: minmax(0, 1fr); }
}
.okc .ok-zon__kort { display: none; }
@media (max-width: 760px) {
.okc .ok-zon { gap: 8px; padding: 12px; }
.okc .ok-zon__kompas { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.okc .ok-zon__lang { display: none; }
.okc .ok-zon__kort { display: inline; }
.okc .ok-zon__dagen { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.okc .ok-zon__dagen button small { display: none; }
.okc .ok-zon .ok-label { margin-bottom: 2px; }
}
.okc .ok-venster__in:focus { outline: none; }
.okc .okb-tekstvak { width: 100%; resize: none; field-sizing: content; min-height: 0; font: inherit; font-size: 14px; line-height: 1.4; padding: 6px 10px; border: 1px solid var(--b-rand); border-radius: 8px; background: #fff; color: var(--b-inkt); }
.okc .okb-tekstvak:focus { outline: none; border-color: var(--b-accent); }
.okc .okb-tabel--keuzes td { vertical-align: top; }
.okc .okb-tabel--keuzes td input[type="text"] { min-width: 180px; }
.okc .okb-tabel--keuzes .okb-tekstvak { min-width: 220px; }
.okc .okb-stappen { gap: 16px; }
.okc .okb-stap { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; padding-bottom: 14px; border-bottom: 1px solid var(--b-lijn); }
.okc .okb-stap:last-child { border-bottom: 0; padding-bottom: 0; }
.okc .okb-stap > b { width: 28px; height: 28px; border-radius: 50%; background: var(--b-accent-zacht); color: var(--b-accent); display: grid; place-items: center; font-size: 13px; }
.okc .okb-titel .okb-acties { flex-wrap: wrap; justify-content: flex-end; }