/* generated by scripts/css-min.php from ../configurator.css — edit the source, never this file */
.vonnik-cfg { color: var(--vonnik-navy); max-width: none; } .vonnik-cfg button { font-family: inherit; } .vonnik-cfg-stepper { list-style: none; margin: 0 0 var(--vonnik-space-3); padding: var(--vonnik-space-7) 0 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--vonnik-space-3); } .vonnik-cfg-stepper li { border-top: var(--vonnik-border-edge) solid var(--vonnik-border); padding-top: var(--vonnik-space-4); font-size: var(--vonnik-text-s); font-weight: var(--vonnik-weight-bold); text-transform: uppercase; color: var(--vonnik-border-control); line-height: 1.3; } .vonnik-cfg-stepper li.is-done { border-color: var(--vonnik-navy); color: var(--vonnik-navy); } .vonnik-cfg-stepper li.is-now { border-color: var(--vonnik-blue); color: var(--vonnik-blue); } .vonnik-cfg-stepper-n::after { content: " ·"; } .vonnik-cfg-stepline { display: none; } .vonnik-cfg-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--vonnik-space-6); align-items: start; padding: var(--vonnik-space-3) 0 var(--vonnik-space-10); } .vonnik-cfg-aside { position: sticky; top: var(--vonnik-space-6); } .vonnik-cfg-done { display: flex; align-items: center; gap: var(--vonnik-space-5); margin: 0 0 var(--vonnik-stack-s); } .vonnik-cfg-done-label { width: var(--vonnik-kv-label); flex: 0 0 var(--vonnik-kv-label); } .vonnik-cfg-done-value { font-size: var(--vonnik-text-l); font-weight: var(--vonnik-weight-bold); flex: 1 1 auto; } .vonnik-cfg-done-value small { font-size: var(--vonnik-text-s); font-weight: var(--vonnik-weight-medium); color: var(--vonnik-ink-soft); margin-left: var(--vonnik-space-2); } .vonnik-cfg-wijzig { border: 0; background: transparent; color: var(--vonnik-blue); font-size: var(--vonnik-text-s); font-weight: var(--vonnik-weight-bold); cursor: pointer; padding: 0; min-height: var(--vonnik-control-tap); display: inline-flex; align-items: center; } .vonnik-cfg-wijzig:hover { color: var(--vonnik-navy); text-decoration: underline; } .vonnik-cfg-step { padding: var(--vonnik-space-6) 0 var(--vonnik-space-4); } .vonnik-cfg-step.is-reopened { outline: var(--vonnik-border-select) solid var(--vonnik-blue); outline-offset: var(--vonnik-space-3); } .vonnik-cfg-step-head { display: flex; align-items: center; gap: var(--vonnik-gap-control); margin: 0 0 var(--vonnik-space-2); } .vonnik-cfg-num { --vonnik-disc-size: var(--vonnik-space-8); background: var(--vonnik-blue); color: var(--vonnik-on-action); font-size: var(--vonnik-text-l); font-weight: var(--vonnik-weight-black); } .vonnik-cfg-num.is-done { --vonnik-disc-size: var(--vonnik-space-7); background: var(--vonnik-navy); font-size: 0; } .vonnik-cfg-num.is-done::after { content: ""; width: var(--vonnik-space-4); height: var(--vonnik-space-4); background-image: var(--vonnik-check); background-position: center; background-size: var(--vonnik-space-4); background-repeat: no-repeat; } .vonnik-cfg-step-head h2 { margin: 0; font-size: var(--vonnik-text-xxl); font-weight: var(--vonnik-weight-black); text-transform: uppercase; line-height: var(--vonnik-line-tight); } .vonnik-cfg-hint { margin: 0 0 var(--vonnik-space-5) var(--vonnik-space-10); font-size: var(--vonnik-text-l); line-height: 1.6; color: var(--vonnik-ink-soft); } .vonnik-cfg-hint--gap { margin-top: var(--vonnik-space-3); } .vonnik-cfg-hint.vonnik-notice { margin-left: 0; font-size: var(--vonnik-text-m); } .vonnik-cfg-grouplabel { margin: var(--vonnik-space-5) 0 var(--vonnik-space-3); } .vonnik-cfg-sub { padding: var(--vonnik-space-4) 0 var(--vonnik-space-1); border-top: var(--vonnik-border-hairline) solid var(--vonnik-border); margin-top: var(--vonnik-space-4); } .vonnik-cfg-sub h3 { margin: 0 0 var(--vonnik-space-2); font-size: var(--vonnik-text-l); font-weight: var(--vonnik-weight-black); text-transform: uppercase; } .vonnik-cfg-sub .vonnik-cfg-hint { margin-left: 0; margin-bottom: var(--vonnik-space-4); font-size: var(--vonnik-text-s); } .vonnik-cfg-opts { display: flex; flex-wrap: wrap; gap: var(--vonnik-space-4); } .vonnik-cfg-opt { display: flex; flex-direction: column; align-items: flex-start; gap: var(--vonnik-space-1); text-align: left; font-size: var(--vonnik-text-l); font-weight: var(--vonnik-weight-bold); min-height: var(--vonnik-control-height-touch); } .vonnik-cfg-opt small { font-size: var(--vonnik-text-s); font-weight: var(--vonnik-weight-regular); color: var(--vonnik-ink-soft); line-height: 1.3; } .vonnik-cfg-opt--price { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; } .vonnik-cfg-opt--price > span { grid-column: 1; } .vonnik-cfg-opt-price { grid-column: 2; grid-row: 1; justify-self: end; font-style: normal; font-weight: var(--vonnik-weight-black); font-variant-numeric: tabular-nums; } .vonnik-cfg-opt--price small { grid-column: 1 / -1; } .vonnik-cfg-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--vonnik-space-6); } .vonnik-cfg-card { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: var(--vonnik-space-2); } .vonnik-cfg-card-thumb { display: block; width: 100%; height: calc(var(--vonnik-space-10) * 2); background: var(--vonnik-surface); margin-bottom: var(--vonnik-space-2); } .vonnik-cfg-card-thumb svg, .vonnik-cfg-card-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; } .vonnik-cfg-card-logo { display: block; height: var(--vonnik-icon); width: auto; } .vonnik-cfg-card-logo--tall { height: calc(var(--vonnik-icon) * 1.5); } .vonnik-cfg-card-title { font-size: var(--vonnik-text-xl); font-weight: var(--vonnik-weight-black); text-transform: uppercase; line-height: var(--vonnik-line-tight); } .vonnik-cfg-card-text { font-size: var(--vonnik-text-s); line-height: 1.45; color: var(--vonnik-ink-soft); } .vonnik-cfg-card-price { font-size: var(--vonnik-text-xl); font-weight: var(--vonnik-weight-black); margin-top: var(--vonnik-space-2); } .vonnik-cfg-scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--vonnik-space-3); padding-top: var(--vonnik-space-4); } .vonnik-cfg-scale-item { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--vonnik-space-1); } .vonnik-cfg-scale-chip { position: absolute; top: calc(var(--vonnik-space-4) * -1); left: 50%; transform: translateX(-50%); } .vonnik-cfg-scale-n { font-size: var(--vonnik-text-title); font-weight: var(--vonnik-weight-black); line-height: 1; } .vonnik-cfg-scale-label { line-height: var(--vonnik-line-tight); margin-top: var(--vonnik-space-1); } .vonnik-cfg-scale-price { font-size: var(--vonnik-text-xl); font-weight: var(--vonnik-weight-black); color: var(--vonnik-ink); } .vonnik-cfg-scale-code { font-size: var(--vonnik-text-xs); font-weight: var(--vonnik-weight-medium); color: var(--vonnik-ink-soft); text-transform: none; } .vonnik-cfg-scale-size { font-size: var(--vonnik-text-xs); color: var(--vonnik-ink-soft); } .vonnik-cfg-scale-use { font-size: var(--vonnik-text-s); color: var(--vonnik-ink-soft); line-height: 1.3; } .vonnik-cfg-meten { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--vonnik-space-4); } input.vonnik-cfg-num-input[type="number"] { --vonnik-cfg-field-width: 150px; width: var(--vonnik-cfg-field-width); } .vonnik-cfg-x { font-size: var(--vonnik-text-xxxl); font-weight: var(--vonnik-weight-black); line-height: var(--vonnik-control-tap); } .vonnik-cfg-meet-hint { display: none; margin: var(--vonnik-space-3) 0 0; } .vonnik-cfg-meet-hint.is-shown { display: block; } .vonnik-cfg-suggest { margin-top: var(--vonnik-space-5); border-color: var(--vonnik-blue); border-width: var(--vonnik-border-select); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--vonnik-space-1) var(--vonnik-space-5); align-items: center; } .vonnik-cfg-suggest .vonnik-chip { grid-column: 1; justify-self: start; } .vonnik-cfg-suggest-title { grid-column: 1; font-size: var(--vonnik-text-xxxl); font-weight: var(--vonnik-weight-black); text-transform: uppercase; } .vonnik-cfg-suggest-text { grid-column: 1; margin: 0; font-size: var(--vonnik-text-s); color: var(--vonnik-ink-soft); line-height: 1.45; } .vonnik-cfg-suggest .vonnik-cfg-bereken { grid-column: 2; grid-row: 1 / 4; } .vonnik-cfg-allsizes { margin-top: var(--vonnik-space-5); border-top: var(--vonnik-border-hairline) solid var(--vonnik-border); } .vonnik-cfg-allsizes summary { list-style: none; cursor: pointer; padding: var(--vonnik-space-4) 0; font-size: var(--vonnik-text-l); font-weight: var(--vonnik-weight-bold); text-transform: uppercase; display: flex; justify-content: space-between; } .vonnik-cfg-allsizes summary::-webkit-details-marker { display: none; } .vonnik-cfg-allsizes summary::after { content: "+"; font-size: var(--vonnik-text-xxl); } .vonnik-cfg-allsizes[open] summary::after { content: "–"; } .vonnik-cfg-maten { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--vonnik-space-3); padding-bottom: var(--vonnik-space-3); } .vonnik-cfg-maten .vonnik-cfg-opt { align-items: center; text-align: center; padding: var(--vonnik-space-4) var(--vonnik-space-3); font-size: var(--vonnik-text-m); min-height: 0; } .vonnik-cfg-maten .vonnik-cfg-opt small { font-size: var(--vonnik-text-s); } .vonnik-cfg-aanbevolen { margin-top: var(--vonnik-space-5); } .vonnik-cfg-aanb-head { display: flex; align-items: center; gap: var(--vonnik-stack-s); font-size: var(--vonnik-text-l); font-weight: var(--vonnik-weight-black); text-transform: uppercase; margin-bottom: var(--vonnik-stack-s); } .vonnik-cfg-aanb-ic { --vonnik-disc-size: var(--vonnik-space-7); background: var(--vonnik-navy); color: var(--vonnik-on-action); font-size: var(--vonnik-text-m); font-weight: var(--vonnik-weight-black); } .is-warn .vonnik-cfg-aanb-ic { background: var(--vonnik-yellow); color: var(--vonnik-navy); } .vonnik-cfg-aanbevolen p { margin: 0 0 var(--vonnik-space-2); font-size: var(--vonnik-text-m); line-height: 1.5; } .vonnik-cfg-aanb-sub { font-size: var(--vonnik-text-s); color: var(--vonnik-ink-soft); } .vonnik-cfg-line { display: flex; flex-direction: column; gap: var(--vonnik-space-3); } .vonnik-cfg-check { display: grid; grid-template-columns: var(--vonnik-icon) minmax(0, 1fr) auto; gap: var(--vonnik-gap-control); align-items: center; } .vonnik-cfg-check-info strong { font-size: var(--vonnik-text-l); font-weight: var(--vonnik-weight-bold); } .vonnik-cfg-maat { font-size: var(--vonnik-text-s); color: var(--vonnik-ink-soft); } .vonnik-cfg-check-info small { display: block; font-size: var(--vonnik-text-s); color: var(--vonnik-ink-soft); margin-top: var(--vonnik-space-1); } .vonnik-cfg-check-price { font-size: var(--vonnik-text-xl); font-weight: var(--vonnik-weight-black); font-variant-numeric: tabular-nums; } .vonnik-cfg-check.is-off { opacity: var(--vonnik-disabled); cursor: default; } .vonnik-cfg-opt.is-off { opacity: var(--vonnik-disabled); cursor: default; } .vonnik-cfg-check-extra { grid-column: 2 / -1; display: grid; gap: var(--vonnik-space-3); margin-top: var(--vonnik-space-2); padding: var(--vonnik-space-4) var(--vonnik-space-4); background: var(--vonnik-grey-card); } .vonnik-cfg-extra-row { display: grid; grid-template-columns: minmax(110px, auto) minmax(0, 1fr) auto; gap: var(--vonnik-space-4); align-items: center; font-size: var(--vonnik-text-s); } .vonnik-cfg-extra-row span { font-weight: var(--vonnik-weight-bold); } .vonnik-cfg-extra-row small { display: block; font-size: var(--vonnik-text-xs); font-weight: var(--vonnik-weight-regular); color: var(--vonnik-ink-soft); } .vonnik-cfg-extra-row em { font-style: normal; font-weight: var(--vonnik-weight-bold); font-variant-numeric: tabular-nums; white-space: nowrap; } .vonnik-cfg-select { max-width: 100%; } .vonnik-cfg-note { line-height: 1.5; margin: var(--vonnik-space-4) 0 0; } .vonnik-cfg-result { margin-top: var(--vonnik-space-7); padding-top: var(--vonnik-space-7); border-top: var(--vonnik-border-hairline) solid var(--vonnik-border); } .vonnik-cfg-eyebrow { margin: 0 0 var(--vonnik-space-3); } .vonnik-cfg-result h2 { font-size: var(--vonnik-text-display); font-weight: var(--vonnik-weight-black); letter-spacing: var(--vonnik-tracking-display); text-transform: uppercase; line-height: var(--vonnik-line-tight); margin: 0 0 var(--vonnik-stack-m); } .vonnik-cfg-sizes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--vonnik-space-4); margin-bottom: var(--vonnik-space-5); } .vonnik-cfg-sizes > div { background: var(--vonnik-grey-card); padding: var(--vonnik-card-pad); display: flex; flex-direction: column; gap: var(--vonnik-space-1); } .vonnik-cfg-sizes span { font-size: var(--vonnik-text-s); font-weight: var(--vonnik-weight-medium); letter-spacing: var(--vonnik-tracking-text); text-transform: uppercase; color: var(--vonnik-ink-soft); } .vonnik-cfg-sizes strong { font-size: var(--vonnik-text-xxxl); font-weight: var(--vonnik-weight-black); } .vonnik-cfg-sizes .vonnik-cfg-prov strong { color: var(--vonnik-blue); } .vonnik-cfg-uitv { font-size: var(--vonnik-text-s); color: var(--vonnik-ink-soft); margin: 0 0 var(--vonnik-space-4); } .vonnik-cfg-result-card { border-top: var(--vonnik-border-hairline) solid var(--vonnik-border); } .vonnik-cfg-card-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 120px; gap: var(--vonnik-space-4); align-items: center; padding: var(--vonnik-space-4) 0; border-bottom: var(--vonnik-border-hairline) solid var(--vonnik-border); } .vonnik-cfg-card-row > span { font-size: var(--vonnik-text-s); font-weight: var(--vonnik-weight-bold); text-transform: uppercase; color: var(--vonnik-ink-soft); } .vonnik-cfg-card-row > strong { font-size: var(--vonnik-text-l); font-weight: var(--vonnik-weight-bold); } .vonnik-cfg-card-row > em { font-style: normal; text-align: right; font-size: var(--vonnik-text-l); font-weight: var(--vonnik-weight-bold); font-variant-numeric: tabular-nums; } .vonnik-cfg-result .vonnik-cfg-aanbevolen { margin: 0 0 var(--vonnik-space-5); } .vonnik-cfg-loading { padding: var(--vonnik-space-7) 0; color: var(--vonnik-ink-soft); } @media (min-width: 690px) { .vonnik-cfg-summary { background: var(--vonnik-grey-card); padding: var(--vonnik-space-6); } } .vonnik-cfg-sum-title { margin: 0 0 var(--vonnik-stack-s); font-size: var(--vonnik-text-xxl); font-weight: var(--vonnik-weight-black); text-transform: uppercase; } .vonnik-cfg-sum-row { display: flex; justify-content: space-between; gap: var(--vonnik-gap-control); padding: var(--vonnik-stack-s) 0; border-bottom: var(--vonnik-border-hairline) solid var(--vonnik-border); font-size: var(--vonnik-text-m); } .vonnik-cfg-sum-row.is-empty { color: var(--vonnik-border-control); } .vonnik-cfg-sum-k { font-weight: var(--vonnik-weight-medium); color: var(--vonnik-ink-soft); flex: 0 0 auto; } .vonnik-cfg-sum-v { text-align: right; } .vonnik-cfg-sum-total { display: flex; justify-content: space-between; align-items: baseline; padding: var(--vonnik-stack-m) 0 var(--vonnik-space-2); font-size: var(--vonnik-text-l); font-weight: var(--vonnik-weight-bold); } .vonnik-cfg-sum-total strong { font-size: var(--vonnik-text-xxxl); font-weight: var(--vonnik-weight-black); } .vonnik-cfg-sum-note { margin: 0 0 var(--vonnik-space-4); font-size: var(--vonnik-text-s); color: var(--vonnik-ink-soft); line-height: 1.45; } @media (max-width: 999.98px) { .vonnik-cfg-grid { grid-template-columns: minmax(0, 1fr); } .vonnik-cfg-aside { position: static; } .vonnik-cfg-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--vonnik-space-4); } .vonnik-cfg-scale { grid-template-columns: repeat(3, minmax(0, 1fr)); } .vonnik-cfg-maten { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 689.98px) { .vonnik-cfg-stepper { display: none; } .vonnik-cfg-stepline { display: flex; align-items: center; gap: var(--vonnik-space-4); padding: var(--vonnik-space-5) 0 var(--vonnik-space-1); font-size: var(--vonnik-text-s); font-weight: var(--vonnik-weight-bold); text-transform: uppercase; color: var(--vonnik-ink-soft); } .vonnik-cfg-stepline-bar { flex: 1 1 auto; height: var(--vonnik-space-1); background: var(--vonnik-border); position: relative; } .vonnik-cfg-stepline-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--vonnik-blue); } .vonnik-cfg-step-head h2 { font-size: var(--vonnik-text-xxl); } .vonnik-cfg-hint { margin-left: 0; font-size: var(--vonnik-text-m); } .vonnik-cfg-done { gap: var(--vonnik-space-3); padding: var(--vonnik-space-3) var(--vonnik-space-4); } .vonnik-cfg-done-label { display: none; } .vonnik-cfg-done-value { font-size: var(--vonnik-text-m); min-width: 0; line-height: var(--vonnik-line-tight); } .vonnik-cfg-done-value small { display: none; } .vonnik-cfg-opts { display: grid; grid-template-columns: minmax(0, 1fr); } .vonnik-cfg-cards { grid-template-columns: minmax(0, 1fr); } .vonnik-cfg-card-thumb { display: none; } .vonnik-cfg-scale { grid-template-columns: minmax(0, 1fr); gap: var(--vonnik-space-4); } .vonnik-cfg-scale-item { display: grid; grid-template-columns: var(--vonnik-space-9) minmax(0, 1fr) auto; gap: var(--vonnik-space-1) var(--vonnik-space-4); align-items: baseline; text-align: left; padding: var(--vonnik-space-5) var(--vonnik-space-4) var(--vonnik-space-4); } .vonnik-cfg-scale-n { grid-row: 1 / span 3; align-self: center; } .vonnik-cfg-scale-label { grid-column: 2; margin-top: 0; } .vonnik-cfg-scale-price { grid-column: 3; grid-row: 1; } .vonnik-cfg-scale-size, .vonnik-cfg-scale-use { grid-column: 2 / -1; } .vonnik-cfg-scale-chip { left: var(--vonnik-space-4); transform: none; } .vonnik-cfg-maten { grid-template-columns: repeat(3, minmax(0, 1fr)); } input.vonnik-cfg-num-input[type="number"] { --vonnik-cfg-field-width: 120px; } .vonnik-cfg-suggest { grid-template-columns: minmax(0, 1fr); } .vonnik-cfg-suggest .vonnik-cfg-bereken { grid-column: 1; grid-row: auto; justify-self: start; } .vonnik-cfg-sizes { grid-template-columns: minmax(0, 1fr); } .vonnik-cfg-check-extra { grid-column: 1 / -1; margin-top: var(--vonnik-space-3); } .vonnik-cfg-extra-row { grid-template-columns: minmax(0, 1fr) auto; } .vonnik-cfg-extra-row span { grid-column: 1 / -1; } .vonnik-cfg-card-row { grid-template-columns: minmax(0, 1fr) 90px; } .vonnik-cfg-card-row > span { grid-column: 1 / -1; padding-bottom: 0; } .vonnik-cfg-grid { padding-bottom: var(--vonnik-section); } .vonnik-cfg-aside { display: none; } .vonnik-cfg-aside.is-ready { display: block; position: fixed; top: auto; left: 0; right: 0; bottom: var(--vonnik-dock-h); z-index: 8999; } .vonnik-cfg-summary { display: flex; align-items: center; justify-content: space-between; gap: var(--vonnik-space-4); padding: var(--vonnik-space-4) var(--vonnik-space-5); } .vonnik-cfg-sum-title, .vonnik-cfg-sum-row, .vonnik-cfg-sum-note { display: none; } .vonnik-cfg-sum-total { padding: 0; flex-direction: column; align-items: flex-start; gap: 0; font-size: var(--vonnik-text-s); text-transform: uppercase; color: var(--vonnik-ink-soft); } .vonnik-cfg-sum-total strong { font-size: var(--vonnik-text-xxl); color: var(--vonnik-navy); white-space: nowrap; } .vonnik-cfg-bereken { width: 100%; } .vonnik-cfg-sum-btn { width: auto; white-space: nowrap; } }