:root {
  --line-ui:#8f8571;
  --b-ok:#357a42;
  --b-ok-h:#2d6838;
  --b-err:#b3261e;
  --b-err-h:#9c2019;
  --err-ui:var(--err);
  --ring:0 0 0 3px var(--bg),0 0 0 5px var(--focus);
}
:root[data-theme=light] {
  --line-ui:#857b67;
  --b-ok:#2f6b3a;
  --b-ok-h:#255530;
  --b-err:#b3261e;
  --b-err-h:#931f18;
}
.lux,
.pghero,
.macro,
.stage,
.cf-room,
.cf-3d,
.lb,
.vn,
.lv,
.room,
.fx,
.hall,
.altijd-donker {
  --line-ui:#8f8571;
  --b-ok:#357a42;
  --b-ok-h:#2d6838;
  color: var(--text);
}
html:root body :is(.btn, .gbtn, .rl-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: 3px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color .18s,
    border-color .18s,
    color .18s,
    box-shadow .18s;
}
html:root body :is(.btn, .gbtn, .rl-btn) svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}
html:root body :is(.btn-s) {
  min-height: 40px;
  padding: 8px 14px;
  font-size: 14px;
}
html:root body :is(.btn-g, .btn-primary, .rl-btn.g, .tl-go) {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
  box-shadow: none;
}
html:root body :is(.btn-g, .btn-primary, .rl-btn.g):hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-text);
}
html:root body :is(.btn-o, .btn-secondary, .rl-btn.o) {
  background: transparent;
  color: var(--text);
  border-color: var(--line-ui);
}
html:root body :is(.btn-o, .btn-secondary, .rl-btn.o):hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--text-strong);
}
html:root body :is(.btn-d) {
  background: var(--text-strong);
  color: var(--bg);
  border-color: var(--text-strong);
}
html:root body :is(.btn-d):hover {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}
html:root body :is(.btn-ok, .btn-success, .gbtn.ok) {
  background: var(--b-ok);
  color: #fff;
  border-color: var(--b-ok);
  box-shadow: none;
}
html:root body :is(.btn-ok, .btn-success, .gbtn.ok):hover {
  background: var(--b-ok-h);
  border-color: var(--b-ok-h);
  color: #fff;
}
html:root body :is(.btn-af, .btn-danger, .gbtn.af) {
  background: transparent;
  color: var(--err-ui);
  border-color: var(--err-ui);
}
html:root body :is(.btn-af, .btn-danger, .gbtn.af):hover {
  background: var(--err-bg);
  color: var(--err-ui);
}
html:root body .btn-danger-s {
  background: var(--b-err);
  color: #fff;
  border-color: var(--b-err);
}
html:root body .btn-danger-s:hover {
  background: var(--b-err-h);
  border-color: var(--b-err-h);
}
html:root body :is(.btn-q, .btn-quiet, .btn-link) {
  background: transparent;
  border-color: transparent;
  color: var(--accent-ink);
  padding-inline: 6px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
html:root body :is(.btn-q, .btn-quiet, .btn-link):hover {
  color: var(--text-strong);
}
html:root body :is(.btn, .gbtn, .rl-btn):active {
  transform: translateY(1px);
}
html:root body :is(.btn, .gbtn, .rl-btn, .thema-k, .fb-k, button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  box-shadow: var(--ring);
}
html:root body :is(.btn, .gbtn, .rl-btn):is([disabled], [aria-disabled=true]) {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
html:root body .nav a.btn:after {
  display: none;
}
@media (prefers-reduced-motion:reduce) {
  html:root body :is(.btn, .gbtn, .rl-btn) {
    transition: none;
  }
}
label[for],
.form label,
.fld > label,
.veld > label {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0;
  text-transform: none;
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
select,
textarea {
  font-family: var(--sans);
  font-size: 16px;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line-ui);
  border-radius: 3px;
  min-height: 46px;
}
textarea {
  min-height: 110px;
}
input::placeholder,
textarea::placeholder {
  color: var(--text-faint);
  opacity: 1;
}
input:hover:not(:focus),
select:hover:not(:focus),
textarea:hover:not(:focus) {
  border-color: var(--text-muted);
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--focus);
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}
input[type=checkbox],
input[type=radio] {
  accent-color: var(--accent);
  width: 18px;
  height: 18px;
}
.demo-bar,
.demo-bar a,
.grp,
.bdg,
.badge,
em.badge,
.pill,
th,
.eyebrow,
.pt-eyebrow,
.hint,
.lang button,
.kpi small,
.tabbar a,
.tabbar button,
.st,
.tag,
.chip,
small:not(.logo small) {
  font-size: 13px;
}
.grp,
.eyebrow,
.pt-eyebrow,
th {
  letter-spacing: .08em;
}
.bdg,
.badge,
em.badge,
.pill {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  font-style: normal;
  line-height: 1.3;
}
.bdg,
.badge,
em.badge {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
}
.num,
td.num,
th.num,
.kpi b,
.kpi strong,
.bedrag,
[class*=bedrag],
.prijs,
.totaal,
.sum b,
.sum td,
output,
.cf-sum b,
.cf-m2 b,
.tl-prijs,
.kh-prijs {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums lining-nums;
  font-style: normal;
}
.bedrag,
[class*=bedrag],
td.num,
.prijs,
.totaal {
  white-space: nowrap;
}
.ico {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  display: inline-block;
  vertical-align: -4px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico-s {
  width: 16px;
  height: 16px;
  flex-basis: 16px;
  vertical-align: -3px;
}
.ico-l {
  width: 24px;
  height: 24px;
  flex-basis: 24px;
}
.demo-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  flex-wrap: wrap;
  padding: 8px 16px;
  line-height: 1.45;
  text-align: center;
  letter-spacing: .01em;
  background: var(--surface);
  color: var(--text-muted);
  border-bottom: 1px solid var(--line);
}
.demo-bar a {
  color: var(--accent-ink);
  text-underline-offset: 2px;
}
.demo-bar .thema-k {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  margin-left: 4px;
}
.demo-bar > .dt {
  flex: 1 1 220px;
  min-width: 0;
}
.thema-vast {
  top: auto;
  bottom: 16px;
  right: auto;
  left: 16px;
}
.fb-k {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border: 1px solid var(--line-ui) !important;
}
.fb-k:hover {
  border-color: var(--accent) !important;
  color: var(--accent-ink) !important;
}
body.has-tabbar .fb-k {
  bottom: 88px !important;
}
.note:empty,
.err:empty,
.msg:empty,
[role=alert]:empty,
[role=status]:empty,
.foutmelding:empty,
.cf-f:empty,
.cf-l:empty {
  display: none !important;
}
.login .vis img {
  opacity: 1;
  object-position: 62% 50%;
}
.login .vis:after {
  background:
    linear-gradient(
      90deg,
      rgba(13, 10, 8, 0) 55%,
      rgba(13, 10, 8, .55));
}
html:root body .login .fm {
  background: var(--bg);
  color: var(--text);
}
.login .fm h1 {
  color: var(--text-strong);
}
.login .fm h2 {
  font-family: var(--sans) !important;
  font-weight: 650;
  font-size: 1.15rem !important;
  color: var(--text-strong);
  letter-spacing: 0;
}
.login .form {
  gap: 18px;
}
.login .form .btn {
  width: 100%;
}
.login #lerr {
  margin: 0;
  background: var(--err-bg);
  color: var(--err);
  border-left: 3px solid var(--err);
  padding: 10px 14px;
  font-size: 15px;
}
.ww {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1em;
  color: var(--accent-text);
  background: var(--accent);
  padding: 1px 9px;
  border-radius: 3px;
  letter-spacing: .02em;
}
.demo-acc button {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px 14px;
  width: 100%;
}
.demo-acc button b {
  font-size: 16px;
  color: var(--text-strong);
}
.demo-acc button span {
  grid-column: 1;
  font-size: 14px;
  color: var(--text-muted);
}
.demo-acc button i {
  grid-column: 2;
  grid-row: 1/span 2;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  color: var(--accent-ink);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.demo-acc button:hover,
.demo-acc button:focus-visible {
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}
@media (max-width:600px) {
  .demo-acc button {
    grid-template-columns: 1fr;
  }
  .demo-acc button i {
    grid-column: 1;
    grid-row: auto;
    margin-top: 6px;
  }
}
.main {
  min-width: 0;
}
.top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
}
.top > div:first-child {
  flex: 1 1 280px;
  min-width: 0;
}
.top .sp {
  display: none;
}
.top .alsrol {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}
.top .alsrol label {
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.top .alsrol select {
  min-width: 0;
  max-width: min(320px, 100%);
  width: auto;
}
.top .btn {
  flex: 0 0 auto;
}
.panel,
.gk,
.kaart,
.kpi {
  min-width: 0;
}
.gk {
  flex-wrap: wrap;
}
.gk {
  grid-template-columns: auto minmax(0, 1fr) auto;
}
.gk .ic {
  background: var(--surface-3);
  color: var(--accent-ink);
}
.gk .ic .ico {
  width: 22px;
  height: 22px;
}
.gk .bedrag {
  font-family: var(--sans);
  font-weight: 650;
  font-size: 1.45rem;
  letter-spacing: -.01em;
  white-space: nowrap;
  min-width: max-content;
}
@media (max-width:1100px) {
  .gk {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .gk .bedrag {
    grid-column: 2;
    grid-row: auto;
    text-align: left;
    order: -1;
  }
}
.gk .bij span,
.bijl button {
  font-size: 14px;
}
:is(.gk .bij span, .bijl button):before {
  content: "" !important;
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  background: currentColor;
  -webkit-mask: var(--m-clip) center/contain no-repeat;
  mask: var(--m-clip) center/contain no-repeat;
}
:root {
  --m-clip:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E");
  --m-stop:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.86 2h8.28L22 7.86v8.28L16.14 22H7.86L2 16.14V7.86z'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E");
}
.blok:before {
  content: "" !important;
  display: inline-block;
  width: 20px;
  height: 20px;
  background: var(--err);
  -webkit-mask: var(--m-stop) center/contain no-repeat;
  mask: var(--m-stop) center/contain no-repeat;
}
.side a {
  display: flex;
  align-items: center;
  gap: 12px;
}
.side a > span:first-child {
  display: inline-flex;
  width: 20px;
  justify-content: center;
  flex: 0 0 20px;
  color: var(--text-muted);
}
.side a.on > span:first-child,
.side a:hover > span:first-child {
  color: var(--accent-ink);
}
.side .bdg,
.side .badge {
  margin-left: auto;
}
.side .me {
  color: var(--text-muted);
}
.tabbar span .ico {
  width: 22px;
  height: 22px;
}
.mob-top [data-menu] .ico {
  width: 24px;
  height: 24px;
}
.fb-k .ico {
  width: 20px;
  height: 20px;
}
.login .vis {
  background: #141411;
}
.login-cap {
  position: absolute;
  left: 16px;
  bottom: 14px;
  z-index: 2;
  color: #efe6d8;
  background: rgba(13, 10, 8, .55);
  padding: 4px 10px;
  font-size: 13px;
  letter-spacing: .04em;
}
@media (max-width:900px) {
  .login .vis {
    height: 260px;
  }
  .login .vis img {
    object-position: 50% 30% !important;
  }
}
.logo svg,
.lg svg,
svg.merk {
  width: auto !important;
  height: 34px !important;
  aspect-ratio: 46/60;
  color: var(--accent);
  flex: 0 0 auto;
}
.logo {
  gap: 14px;
}
html:root body :is(h1, h2):not(#_) {
  font-family: var(--serif) !important;
  font-weight: 500 !important;
  letter-spacing: -.012em !important;
  font-optical-sizing: auto;
}
html:root body h3:not(#_) {
  font-family: var(--sans) !important;
  font-weight: 650 !important;
  letter-spacing: -.005em !important;
}
html:root body :is(h1, h2) :is(.num, .bedrag, b.num) {
  font-family: var(--sans) !important;
}
html:root body .taalbar {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  max-width: none;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 6px 16px;
  background: var(--surface-3);
  color: var(--text);
  border: 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.35;
  z-index: 41;
}
html:root body .taalbar span {
  flex: 0 1 auto;
  min-width: 0;
}
html:root body .taalbar .btn {
  min-height: 34px;
  padding: 4px 12px;
  font-size: 14px;
}
@media (max-width:760px) {
  .lux {
    display: block;
    min-height: 0;
    --hb:min(54svh,500px);
  }
  .lux-i {
    position: relative;
    inset: auto;
    height: var(--hb);
    z-index: 0;
  }
  .lux-i img {
    object-position: 74% 50%;
  }
  .lux:after {
    inset: 0 0 auto 0;
    height: var(--hb);
    z-index: 0;
    background:
      linear-gradient(
        0deg,
        rgba(20, 20, 17, .92) 0%,
        rgba(20, 20, 17, .35) 22%,
        rgba(20, 20, 17, 0) 45%);
  }
  .lux-in {
    position: static;
    display: block;
    padding-top: 20px;
    padding-bottom: 28px;
    background: #141411;
  }
  .lux-sw {
    position: absolute;
    z-index: 2;
    left: 16px;
    right: 16px;
    top: calc(var(--hb) - 66px);
    justify-content: flex-start;
  }
  .lux h1 {
    font-size: clamp(2.3rem, 10.5vw, 3rem);
  }
  .lux .lead {
    font-size: 1.06rem;
  }
  .lux .row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .lux .row .btn {
    flex: 1 1 auto;
  }
  .lux-cap {
    margin-top: 16px;
  }
}
@media (max-width:600px) {
  .fb-k {
    width: 46px !important;
    height: 46px !important;
    right: 12px !important;
    bottom: 12px !important;
  }
}
.ft .logo {
  margin-bottom: 6px;
}
.ft h4 {
  font-family: var(--sans) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.4;
  margin: 0 0 14px;
  color: var(--text-strong);
}
.ft a {
  font-size: 15px;
}
.ft .grid {
  gap: 32px 40px;
}
.rl-top {
  background: color-mix(in srgb, var(--bg) 90%, transparent) !important;
  border-bottom-color: var(--line) !important;
}
.rl-top .lg {
  color: var(--text-strong);
}
.rl-top nav a {
  color: var(--text-muted);
  font-size: 15px;
}
.rl-top nav a:hover,
.rl-top nav a.on {
  color: var(--text-strong);
  background: var(--surface-3);
}
@media (max-width:760px) {
  .rl-top .in {
    gap: 6px 10px;
    padding: 8px 16px;
  }
  .rl-top nav {
    order: 3;
    flex: 1 0 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 -16px;
    padding: 0 16px 4px;
    gap: 2px;
    scrollbar-width: none;
    -webkit-mask-image:
      linear-gradient(
        90deg,
        #000 88%,
        transparent);
  }
  .rl-top nav::-webkit-scrollbar {
    display: none;
  }
  .rl-top nav a {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 8px 12px;
  }
}
html:root body .pill {
  background: var(--surface-3);
  color: var(--text);
}
html:root body .p-ok {
  background: var(--ok-bg);
  color: var(--ok);
}
html:root body .p-warn {
  background: var(--warn-bg);
  color: var(--warn);
}
html:root body .p-err {
  background: var(--err-bg);
  color: var(--err);
}
html:root body .p-info {
  background: var(--info-bg);
  color: var(--info);
}
html:root body .p-gold {
  background: var(--accent-soft);
  color: var(--accent-ink);
}
html:root body .ev {
  background: var(--accent-soft);
  color: var(--text);
  font-size: 13px;
}
html:root body .ev :is(b, small) {
  color: inherit;
}
html:root body .ev.montage {
  background: var(--ok-bg);
  color: var(--text);
}
html:root body .ev.showroom {
  background: var(--info-bg);
  color: var(--text);
}
html:root body .ev.productie {
  background: var(--surface-3);
  color: var(--text);
}
html:root body .ev.levering {
  background: var(--surface-3);
  color: var(--text);
}
html:root body .demo-bar {
  background: var(--surface);
  color: var(--text-muted);
  font-size: 13px;
}
html:root body .demo-bar a {
  color: var(--accent-ink);
}
@media (max-width:900px) {
  html:root body .tabbar {
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    border-top: 1px solid var(--line);
  }
  html:root body .tabbar :is(a, button) {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
  }
  html:root body .tabbar a.on {
    color: var(--accent-ink);
  }
  html:root body .tabbar a em {
    font-size: 13px;
    min-width: 20px;
    height: 20px;
  }
}
.pghero {
  background: #141411;
}
html:root body :is(.cf-steps button b, .kpi b, body.portaal .kpi b, .gc .bd, .gdet .bedr, .fase .nr, .rev .nr, .idx-n, .gk .bedrag, .sc .lt, .acties .actie b, .acties .actie span) {
  font-family: var(--sans) !important;
  font-variant-numeric: tabular-nums lining-nums;
  font-style: normal;
  font-weight: 650;
  letter-spacing: -.01em;
}
.dz button span,
.cf-dz button span {
  color: #f5f1e9;
}
@media (max-width:1320px) {
  html:root body .hd .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    bottom: auto;
    max-height: calc(100svh - 120px);
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .5);
  }
  html:root body .hd .nav:not(.open) {
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  html:root body .hd .nav.open {
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: opacity .25s, transform .25s;
  }
}
.dz button span {
  font-size: 13px;
}
html:root body :is(.tl-tag, .design span, .tile span, .proj figcaption, .lb-x, .vn-l, .vn-r, .dz button span, .stage .tools button, .cf-cam button, .login-cap) {
  color: #f5f1e9;
}
html:root body .tl-tag {
  background: rgba(20, 20, 17, .78);
  font-size: 13px;
  letter-spacing: .12em;
}
html:root body .tl-drop {
  background: var(--surface-2);
  border-color: var(--line-ui);
  color: var(--text);
}
html:root body .tl-drop.over,
html:root body .tl-drop:focus-visible {
  background: var(--accent-soft);
  border-color: var(--accent);
}
html:root body .kh-o {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--line-ui);
}
html:root body .kh-o:hover {
  border-color: var(--accent);
}
html:root body .kh-o.on {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
html:root body .tl-warn {
  color: var(--warn);
  background: var(--warn-bg);
  border-left-color: var(--warn);
}
html:root body .ctl {
  background: var(--bg);
}
html:root body .inlog .kaart {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--line);
}
html:root body :is(.btn-d) {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
}
html:root body :is(.btn-d):hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-text);
}
.ghero h1 em {
  font-family: var(--sans) !important;
  font-style: normal;
  font-weight: 650;
  color: var(--accent-ink);
}
html:root body .pt-hero .licht {
  background: rgba(20, 20, 17, .72);
  color: #f5f1e9;
  border-color: rgba(245, 241, 233, .35);
  font-size: 13px;
}
html:root body .tegel .lg {
  color: #fff;
  font-size: 19px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
}
html:root body .badge-dk {
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 13px;
}
@media (min-width:1321px) and (max-width:1500px) {
  html:root body .hd .wrap {
    gap: 12px;
  }
  html:root body .nav a:not(.btn) {
    padding-inline: 7px;
    font-size: 14.5px;
  }
  html:root body .lang button {
    padding-inline: 8px;
    min-width: 0;
  }
  html:root body .hd .btn {
    padding-inline: 14px;
    margin-left: 4px;
  }
}
.leesbalk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 18px;
  padding: 8px 16px;
  background: var(--surface-3);
  color: var(--text);
  font-size: 14px;
  border-bottom: 1px solid var(--line);
}
.leesbalk a {
  color: var(--accent-ink);
  font-weight: 600;
}
.leesbalk .talen {
  display: inline-flex;
  gap: 10px;
}
.leesbalk .talen a[aria-current] {
  color: var(--text-strong);
  text-decoration: none;
}
.leesbalk-root {
  max-width: var(--max);
  margin: 0 auto;
  padding: 16px;
}
.alles section {
  margin: 28px 0;
}
.alles ul {
  columns: 2 320px;
  padding-left: 18px;
}
.alles li {
  margin: 4px 0;
  break-inside: avoid;
}
.alles a {
  color: var(--accent-ink);
}
.proc-l {
  padding-left: 20px;
  margin: 14px 0 0;
}
.proc-l li {
  margin: 10px 0;
}
.meer-info details {
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
}
.meer-info summary {
  cursor: pointer;
  font-weight: 600;
}
.uitleg {
  max-width: var(--max,1280px);
  margin: 0 auto;
  padding: 20px 16px;
  border-bottom: 1px solid var(--line);
}
.uitleg h2 {
  font-size: 1.4rem;
  margin: 0 0 8px;
}
.uitleg p {
  max-width: 80ch;
  color: var(--text-muted);
}
.pl {
  flex-wrap: wrap;
}
.veld-fout {
  flex: 1 0 100%;
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--err);
}
.veld-fout:empty {
  display: none;
}
input[aria-invalid=true] {
  border-color: var(--err) !important;
  outline: 2px solid var(--err);
  outline-offset: 1px;
}
html:root body :is(.stage .tools button, .cf-cam button) {
  background: rgba(20, 20, 17, .82);
  color: #f5f1e9;
  border: 1px solid rgba(245, 241, 233, .35);
}
html:root body :is(.stage .tools button, .cf-cam button):hover {
  border-color: #d4b078;
}
html:root body :is(.stage .tools button, .cf-cam button)[aria-pressed=true] {
  background: #d4b078;
  color: #181916;
  border-color: #d4b078;
}
html:root body :is(.side .grp, .panel th, body.portaal th, th, .bdg, .badge, em.badge, .kpi small, .trend, .kpi i, .ft .legal span, .mob-top em, .bel em, .cf-steps small, .tabbar em, figcaption, legend, .hint, .lang a, .lang button):not(#_) {
  font-size: max(13px, 1em);
}
html:root body :is(.side .grp, .panel th, body.portaal th, th, .bdg, .badge, em.badge, .kpi small, .trend, .kpi i, .ft .legal span, .mob-top em, .bel em, .tabbar em, .hint, .lang a, .lang button):not(#_) {
  font-size: 13px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.matrixen .matrix th[scope=row] {
  font-weight: 500;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  color: var(--text);
}
.matrixen .matrix td.nvt {
  color: var(--text-faint);
}
.matrixen .matrix th[scope=col] {
  white-space: normal;
  line-height: 1.25;
}
.funsch {
  border-left: 3px solid var(--accent);
}
html:root body .matrixen {
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
@media (min-width:1700px) {
  html:root body .matrixen {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.matrixen .panel {
  min-width: 0;
  overflow-x: auto;
}
html:root body .matrixen .matrix th[scope=col] {
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  min-width: 84px;
}
.matrixen .matrix {
  width: 100%;
  min-width: 600px;
}
.matrixen .panel {
  position: relative;
}
.matrixen .matrix td {
  position: relative;
}
html:root body .okbox {
  background: var(--ok-bg);
  color: var(--ok);
  border-color: var(--ok);
}
html:root body .blok {
  background: var(--err-bg);
  color: var(--err);
  border-color: var(--err);
}
html:root body :is(.tl-err, .gblok, .offl, .st.af) {
  color: var(--err);
}
html:root body .rev .diff del {
  color: var(--err);
}
html:root body .sig .lbl {
  color: var(--text-muted);
}
html:root body.portaal .pill.p-warn:not(#_) {
  background: var(--warn-bg);
  color: var(--warn);
}
html:root body.portaal .pill.p-info:not(#_) {
  background: var(--info-bg);
  color: var(--info);
}
html:root body.portaal .pill.p-err:not(#_) {
  background: var(--err-bg);
  color: var(--err);
}
html:root body .weekcal .ev:not(#_) {
  color: var(--text);
}
html:root body .cf-f:not(#_) {
  background: var(--err-bg);
  color: var(--err);
}
html:root body .pl {
  display: grid;
  grid-template-columns: auto minmax(96px, 1fr) auto auto;
}
html:root body .pl input {
  width: 100%;
  min-width: 96px;
}
html:root body .veld-fout {
  grid-column: 1/-1;
  margin: 0;
}
.cf-modus {
  display: inline-flex;
  gap: 0;
}
.stage .tools button[hidden] {
  display: none;
}
.stage .hint[hidden] {
  display: none;
}
.cf-room[hidden],
.cf-3d[hidden] {
  display: none;
}
.cf-room {
  padding-bottom: 64px;
}
html:root body .tegel .lg {
  border: 1px solid var(--line-ui);
}
html:root body .btn.btn-d:not(#_) {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
}
html:root body .btn.btn-d:not(#_):is(:hover, :focus-visible) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-text);
}
html:root body .btn.btn-g:not(#_):is(:hover, :focus-visible) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-text);
}
html:root body .btn.btn-o:not(#_):is(:hover, :focus-visible) {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--text-strong);
}
html:root body .btn.btn-ok:not(#_):is(:hover, :focus-visible) {
  background: var(--b-ok-h);
  border-color: var(--b-ok-h);
  color: #fff;
}
html:root body .cf-room .seg:not(#_) {
  border: 0;
  gap: 8px;
  flex-wrap: wrap;
}
html:root body .cf-room .seg button:not(#_) {
  min-height: 44px;
  padding: 0 18px;
  background: rgba(245, 241, 233, .06);
  color: #f5f1e9;
  border: 1px solid #8f8571;
  border-radius: 3px;
  font-size: 15px;
  font-weight: 600;
}
html:root body .cf-room .seg button:not(#_):hover {
  border-color: #d4b078;
}
html:root body .cf-room .seg button[aria-pressed=true]:not(#_) {
  background: #d4b078;
  color: #181916;
  border-color: #d4b078;
}
html:root body .cf-cam:not([hidden]):not(#_) {
  position: static;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px 64px;
  background: #141411;
  inset: auto;
  transform: none;
  width: auto;
  max-width: none;
  pointer-events: auto;
}
html:root body .cf-cam > span {
  flex: 0 0 8px;
}
html:root body .sw:not(#_) {
  min-height: 0;
  padding: 0;
  box-sizing: border-box;
  flex: 0 0 auto;
}
html:root body .cf-licht .sw:not(#_) {
  width: 52px;
  height: 30px;
  flex: 0 0 52px;
}
html:root body .cf-licht .sw i:not(#_) {
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
}
html:root body input.sr:not(#_) {
  position: absolute;
  width: 1px;
  min-width: 0;
  height: 1px;
  min-height: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
html:root body .stage:not(#_) {
  display: flex;
  flex-direction: column;
}
html:root body .stage > canvas {
  flex: none;
}
html:root body .stage .hint:not(#_) {
  position: static;
  order: 10;
  max-width: none;
  display: block;
  background: none;
  padding: 10px 12px 62px;
  font-size: 13px;
  line-height: 1.4;
  color: #d8d1c3;
}
html:root body .stage .hint[hidden]:not(#_) {
  display: none;
}
.cf-pl th {
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
.cf-pl th,
.cf-pl td {
  padding-inline: 8px;
}
.panel:has(.cf-pl) {
  min-width: 0;
}
.panel:has(.cf-pl) .tbl-w {
  overflow-x: auto;
  scrollbar-width: thin;
  max-width: 100%;
}
.cfg > div {
  min-width: 0;
}
@media (min-width:1000px) {
  .cf-pl th,
  .cf-pl td {
    padding-inline: 5px;
  }
  .cf-pl {
    font-size: 14px;
  }
}
html:root body .cf-pl th:not(#_) {
  letter-spacing: 0;
  text-transform: none;
  font-size: 13px;
}
@media (min-width:1000px) {
  html:root body .cf-pl :is(th, td):not(#_) {
    padding-inline: 5px;
    font-size: 13px;
  }
}
html:root body .stage > .cf-licht:not(#_) {
  position: static;
  order: 20;
  align-self: flex-start;
  margin: 0 12px 12px;
  max-width: calc(100% - 24px);
  flex-wrap: wrap;
}
html:root body .stage .hint:not(#_) {
  padding: 10px 12px;
}
html:root body .cf-room:not(#_) {
  padding-bottom: 12px;
}
html:root body .cf-cam:not([hidden]):not(#_) {
  padding-bottom: 10px;
}
.betaalstand {
  width: 100%;
  margin: 0 0 12px;
}
.betaalstand td {
  padding: 4px 0;
}
html:root body .betaal-t :is(th, td):not(#_) {
  padding-inline: 4px;
  white-space: normal;
  letter-spacing: 0;
  text-transform: none;
}
html:root body .betaal-t .btn:not(#_) {
  padding-inline: 8px;
  min-width: 0;
  white-space: nowrap;
}
.betaal-t td.num {
  white-space: nowrap;
}
.betaal-t .pill {
  white-space: nowrap;
}
html:root body .login .fm:not(#_) {
  padding-bottom: 96px;
}
html:root body :is(.design span, .tile span, .macro p):not(#_) {
  background: rgba(20, 20, 17, .72);
  padding: 4px 10px;
  color: #f5f1e9;
}
html:root body .betaal-t td:first-child:not(#_) {
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 64px;
}
@media (min-width:901px) {
  html:root body:has(.login) .fb-k:not(#_) {
    left: 16px;
    right: auto;
  }
}
@media (max-width:600px) {
  html:root body .betaal-t :is(th, td):first-child:not(#_) {
    display: none;
  }
}
@media screen {
  html:root body table.kaartvorm:not(#_),
  html:root body table.kaartvorm:not(#_) tfoot {
    display: block;
    width: 100%;
    min-width: 0;
  }
  html:root body table.kaartvorm:not(#_) thead,
  html:root body table.kaartvorm:not(#_) tr.kop {
    display: none;
  }
  html:root body table.kaartvorm:not(#_) tbody {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 12px;
  }
  html:root body table.kaartvorm:not(#_) tr {
    display: block;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 6px 14px;
    background: transparent;
  }
  html:root body table.kaartvorm:not(#_) tr td,
  html:root body table.kaartvorm:not(#_) tr:hover td {
    background: transparent;
  }
  html:root body table.kaartvorm:not(#_) td,
  html:root body table.kaartvorm:not(#_) tfoot th {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding: 7px 0;
    border: 0;
    text-align: right;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  html:root body table.kaartvorm:not(#_) td[data-l]::before {
    content: attr(data-l);
    flex: 0 0 auto;
    max-width: 45%;
    text-align: left;
    font-size: 13px;
    color: var(--text-faint);
  }
  html:root body table.kaartvorm:not(#_) td[data-l=""]::before {
    content: none;
  }
  html:root body table.kaartvorm:not(#_) td[data-l=""],
  html:root body table.kaartvorm:not(#_) td[data-vol] {
    display: block;
    text-align: left;
  }
  html:root body table.kaartvorm:not(#_) td:first-child {
    display: block;
    text-align: left;
    font-weight: 600;
    font-size: 16px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--line);
  }
  html:root body table.kaartvorm:not(#_) td:first-child::before {
    content: none;
  }
  html:root body table.kaartvorm:not(#_) td:last-child {
    padding-bottom: 9px;
  }
}
@media (max-width:640px) {
  html:root body.beheer .demo-bar:not(#_) {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    overflow-x: auto;
    padding: 7px 12px;
  }
  html:root body.beheer .demo-bar:not(#_) .db-t {
    display: none;
  }
}
@media screen and (min-width:641px) {
  html:root body .panel.tbl-w:has(> table.kaartvorm):not(#_) {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
  }
}
@media screen and (max-width:640px) {
  html:root body .panel:has(table.kaartvorm):not(#_) {
    padding: 12px 14px 4px;
  }
  html:root body table.kaartvorm:not(#_) tbody {
    display: block;
  }
  html:root body table.kaartvorm:not(#_) tr {
    border: 0;
    border-radius: 0;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
  }
  html:root body table.kaartvorm:not(#_) tbody tr:last-child {
    border-bottom: 0;
  }
  html:root body table.kaartvorm:not(#_) td:first-child {
    border-bottom: 0;
    padding-bottom: 3px;
  }
  html:root body table.kaartvorm:not(#_) td {
    padding: 4px 0;
  }
  html:root body table.kaartvorm:not(#_) tr.k-rij {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    row-gap: 3px;
    align-items: center;
    min-height: 56px;
  }
  html:root body table.kaartvorm:not(#_) tr.k-rij td {
    display: block;
    padding: 0;
    border: 0;
    font-size: inherit;
    font-weight: 400;
    text-align: left;
    min-width: 0;
  }
  html:root body table.kaartvorm:not(#_) tr.k-rij td::before {
    content: none;
  }
  html:root body table.kaartvorm:not(#_) tr.k-rij td.k-x {
    display: none;
  }
  html:root body table.kaartvorm:not(#_) tr.k-rij td.k-t {
    grid-column: 1;
    grid-row: 1;
    font-weight: 600;
    font-size: 16px;
  }
  html:root body table.kaartvorm:not(#_) tr.k-rij td.k-s {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }
  html:root body table.kaartvorm:not(#_) tr.k-rij td.k-m {
    grid-column: 1;
    grid-row: 2;
    font-size: 13px;
    color: var(--text-faint);
  }
  html:root body table.kaartvorm:not(#_) tr.k-rij td.k-m a {
    color: inherit;
    text-decoration: none;
  }
  html:root body table.kaartvorm:not(#_) tr.k-rij td.k-b {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  html:root body table.kaartvorm:not(#_) tr.k-rij td.k-x:has(.btn-g, .btn-ok) {
    display: block;
    grid-column: 1/-1;
    margin-top: 8px;
  }
  html:root body table.kaartvorm:not(#_) tr.k-rij.open td.k-x:has(button, .btn) {
    display: block;
    grid-column: 1/-1;
    margin-top: 8px;
  }
  html:root body table.kaartvorm:not(#_) tr.k-rij.open td.k-x {
    display: flex;
    grid-column: 1/-1;
    justify-content: space-between;
    gap: 14px;
    text-align: right;
    padding-top: 6px;
  }
  html:root body table.kaartvorm:not(#_) tr.k-rij.open td.k-x[data-l]:not([data-l=""])::before {
    content: attr(data-l);
    font-size: 13px;
    color: var(--text-faint);
    text-align: left;
    flex: 0 0 auto;
    max-width: 45%;
  }
  html:root body table.kaartvorm:not(#_) tr.k-klap {
    cursor: pointer;
  }
  html:root body table.kaartvorm:not(#_) tr.k-klap td.k-m::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 0 2px 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform .2s;
  }
  html:root body table.kaartvorm:not(#_) tr.k-klap.open td.k-m::after {
    transform: rotate(-135deg) translate(-2px, -2px);
  }
  html:root body table.kaartvorm:not(#_) tr.k-klap:focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: 2px;
  }
}
@media (max-width:1100px) {
  html:root body .cfg:not(#_) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  html:root body .cfg:not(#_) > div:first-child {
    display: contents;
  }
  html:root body .cfg:not(#_) > div:first-child > .stage {
    order: 1;
    width: 100%;
  }
  html:root body .cfg:not(#_) > div:last-child {
    order: 2;
    width: 100%;
  }
  html:root body .cfg:not(#_) > div:first-child > .panel {
    order: 3;
    margin-top: 0 !important;
    width: 100%;
  }
}
@media (max-width:640px) {
  html:root body .demo-bar:not(#_) {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow-x: auto;
    padding: 7px 12px;
  }
  html:root body .demo-bar:not(#_) .db-t {
    display: none;
  }
  html:root body:not(.beheer) .demo-bar:not(#_)::before,
  html:root body.beheer .demo-bar:not(#_):has(+ .inlog)::before {
    content: "Demo · fictieve data ·";
  }
  html:root body .mob-top [data-menu]:not(#_) {
    display: none;
  }
  html:root body .mob-top:not(#_) {
    padding-top: 6px;
    padding-bottom: 6px;
  }
}
@media (max-width:640px) {
  html:root body .stage .hint:not(#_) {
    display: none;
  }
}
@media (max-width:900px) {
  html:root body .matrix:not(#_) :is(td, th):first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--card);
  }
}
.pk-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr));
  gap: 14px;
}
.pk-plaat {
  margin: 0;
  min-width: 0;
}
.pk-c canvas {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--line);
}
.pk-plaat figcaption {
  font-size: 13px;
  line-height: 1.5;
  margin-top: 6px;
  overflow-wrap: anywhere;
}
.syncd {
  max-width: min(520px, calc(100vw - 32px));
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
}
.syncd::backdrop {
  background: rgba(0, 0, 0, .6);
}
.syncd h2 {
  font-size: 1.4rem;
  margin: 0 0 8px;
}
.syncd .inp {
  width: 100%;
  min-height: 44px;
  margin: 8px 0 12px;
  padding: 8px 10px;
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
}
.syncd-k {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.proef-fout {
  color: var(--err);
  font-weight: 600;
}
@media (max-width:640px) {
  html:root body table.kaartvorm.heel:not(#_) td:first-child {
    font-size: 13px;
    color: var(--text-faint);
    font-weight: 400;
  }
}
.vp-lang {
  margin: 14px 0 0;
  width: max-content;
  max-width: 100%;
}
.login .fm .vp-lang {
  margin-top: 18px;
}
@media (pointer:coarse) {
  html:root body .stage:not(#_),
  html:root body .stage canvas:not(#_) {
    touch-action: pan-y pinch-zoom;
  }
  html:root body .stage.verschuif:not(#_),
  html:root body .stage.verschuif canvas:not(#_) {
    touch-action: none;
  }
  html:root body .stage.verschuif canvas:not(#_) {
    outline: 2px solid var(--heat);
    outline-offset: -2px;
  }
}
html:root body .cf-schuif:not(#_) {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  min-height: 40px;
  padding: 0 14px;
  background: rgba(20, 20, 17, .82);
  border: 1px solid rgba(255, 255, 255, .18);
  color: var(--heat);
  font: 600 .8125rem/1 var(--sans);
  cursor: pointer;
}
html:root body .cf-schuif[aria-pressed=true]:not(#_) {
  background: var(--heat);
  color: var(--soot);
}
html:root body .cf-schuif[hidden]:not(#_) {
  display: none;
}
@media (max-width:640px) {
  html:root body .stage:not(#_) {
    padding-top: 52px;
  }
  html:root body .stage .tools:not(#_) {
    right: 8px;
    left: 8px;
    top: 6px;
    gap: 4px;
    justify-content: flex-end;
  }
  html:root body .stage .tools button:not(#_) {
    min-width: 40px;
    height: 40px;
    padding: 0 9px;
    font-size: .95rem;
  }
  html:root body .cf-licht:not(#_) {
    left: 8px;
    bottom: 8px;
    padding: 4px 8px;
    gap: 6px;
    font-size: .75rem;
  }
  html:root body .cf-licht .sw:not(#_) {
    width: 44px;
    height: 26px;
  }
  html:root body .cf-licht .sw i:not(#_) {
    width: 18px;
    height: 18px;
  }
  html:root body .cf-licht .sw[aria-checked=true] i:not(#_) {
    transform: translateX(18px);
  }
  html:root body .cf-licht .cf-dim:not(#_) {
    width: 70px;
  }
  html:root body .cf-steps button:not(#_) {
    min-height: 50px;
    padding: 6px 2px;
    font-size: .75rem;
  }
}
@media (max-width:640px) {
  html:root body .stage:not(#_) {
    padding-top: 0;
  }
  html:root body .stage .tools:not(#_) {
    left: auto;
    right: 6px;
    top: 6px;
    gap: 3px;
  }
  html:root body .stage .tools button:not(#_) {
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    font-size: .8125rem;
  }
  html:root body .stage .tools [data-z]:not(#_) {
    display: none;
  }
  html:root body .stage.verschuif .tools [data-z]:not(#_) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  html:root body .cf-schuif:not(#_) {
    min-height: 36px;
    padding: 0 12px;
    right: 6px;
    bottom: 6px;
  }
  html:root body .cf-licht:not(#_) {
    left: 6px;
    bottom: 6px;
  }
}
html:root body .stage .tools [data-groot]:not(#_)[hidden] {
  display: none;
}
html:root body .cf-mini:not(#_) {
  position: fixed;
  left: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: block;
  padding: 4px;
  margin: 0;
  background: #141411;
  border: 1px solid rgba(212, 176, 120, .55);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .55);
  cursor: pointer;
  line-height: 0;
  min-height: 0;
}
html:root body .cf-mini[hidden]:not(#_) {
  display: none;
}
html:root body .cf-mini canvas:not(#_) {
  display: block;
  width: auto;
  height: auto;
  max-width: 128px;
  max-height: 96px;
}
html:root body:has(input:focus, select:focus, textarea:focus) .cf-mini:not(#_) {
  display: none;
}
html.cf-groot-open,
html.cf-groot-open body {
  overflow: hidden;
}
html:root body .stage.groot:not(#_) {
  position: fixed !important;
  inset: 0;
  z-index: 1000;
  width: 100vw;
  height: 100dvh;
  padding: 0;
  margin: 0;
  top: 0;
  background: #0d0a08;
  display: block;
}
html:root body .stage.groot .tools:not(#_) {
  position: absolute;
  top: 8px;
  right: 8px;
  left: auto;
}
html:root body .stage.groot .hint:not(#_) {
  display: none;
}
html:root body .stage.groot > .cf-licht:not(#_) {
  position: absolute;
  left: 10px;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  margin: 0;
  z-index: 3;
}
html:root body .stage.groot .cf-schuif:not(#_) {
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}
html:root body .stage .tools:not(#_) {
  z-index: 5;
}
html.cf-studio {
  --cf-top:85px;
  --cf-stage:calc(100dvh - 97px);
  --cf-h:clamp(280px,min(50svh,110vw),640px);
}
html:root body .cf-studio-sec:not(#_) {
  padding-top: clamp(14px, 2vw, 26px);
  padding-bottom: 40px;
}
html:root body .cf-studio-sec > .wrap:not(#_) {
  max-width: 1680px;
  width: 100%;
  padding-inline: clamp(12px, 2vw, 28px);
}
.cf-kop {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: clamp(10px, 1.4vw, 18px);
}
html:root body .cf-kop h1:not(#_) {
  font-size: clamp(1.5rem, 2.6vw, 2.3rem);
  margin: 0;
  line-height: 1.15;
}
html:root body .cf-kop .lead:not(#_) {
  margin: 4px 0 0;
  font-size: .95rem;
  max-width: 64ch;
}
html:root body .cf-at:not(#_) {
  flex: none;
  font-size: .875rem;
  font-weight: 600;
  color: var(--accent-ink,var(--amber));
  text-decoration: underline;
  text-underline-offset: 3px;
}
html:root body .cfg-studio .stage:not(#_) {
  height: var(--cf-stage);
  padding: 0;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(
      70% 60% at 50% 100%,
      #2c1910 0%,
      #140e0a 55%,
      #0b0807 100%);
  border: 1px solid rgba(245, 241, 233, .1);
}
html:root body .cfg-studio .stage > canvas:not(#_) {
  flex: none;
  width: 100%;
}
html:root body .cfg-studio .stage .hint:not(#_) {
  position: absolute;
  left: 50%;
  bottom: 66px;
  top: auto;
  transform: translateX(-50%);
  order: 0;
  width: max-content;
  max-width: calc(100% - 24px);
  padding: 7px 12px;
  background: rgba(13, 10, 8, .78);
  font-size: 13px;
  display: block;
  transition: opacity .5s;
  pointer-events: none;
  text-align: center;
}
html:root body .cfg-studio .stage .hint.weg:not(#_),
html:root body .cfg-studio .stage .hint[hidden]:not(#_) {
  opacity: 0;
  display: block;
  visibility: hidden;
}
html:root body .cfg-studio .cf-bar:not(#_) {
  position: relative;
  z-index: 6;
  flex: none;
  margin-top: auto;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  background: #141411;
  border-top: 1px solid rgba(245, 241, 233, .12);
}
html:root body .cf-bar-l:not(#_) {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
html:root body .cfg-studio .stage .tools:not(#_) {
  position: static;
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
  left: auto;
  right: auto;
  top: auto;
}
html:root body .cfg-studio .stage :is(.tools, .cf-modus) button:not(#_) {
  min-width: 40px;
  height: 44px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  background: transparent;
  border-color: rgba(245, 241, 233, .22);
  color: #f5f1e9;
}
html:root body .cfg-studio .stage .cf-modus button:not(#_) {
  border-radius: 0;
  margin-left: -1px;
}
html:root body .cfg-studio .stage :is(.tools, .cf-modus) button[aria-pressed=true]:not(#_) {
  background: #d4b078;
  color: #181916;
  border-color: #d4b078;
}
html:root body .cfg-studio .stage .tools button[hidden]:not(#_) {
  display: none;
}
html:root body .cfg-studio .stage .tools button:disabled:not(#_) {
  opacity: .35;
  cursor: default;
}
html:root body .cfg-studio .stage .tools .cf-hist:not(#_) {
  min-width: 40px;
  padding: 0;
  border-color: transparent;
}
.cf-zpct {
  min-width: 44px;
  text-align: center;
  font: 600 13px var(--sans);
  font-variant-numeric: tabular-nums;
  color: #d8d1c3;
}
.cf-zpct[hidden] {
  display: none;
}
html:root body .cfg-studio .stage .cf-schuif:not(#_) {
  position: static;
  min-height: 0;
  font: 600 14px var(--sans);
}
html:root body .cfg-studio .cf-licht:not(#_) {
  position: static;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: none;
  flex-wrap: nowrap;
  color: #d8d1c3;
  font-size: 13px;
}
html:root body .cfg-studio .cf-dim:not(#_) {
  width: clamp(70px, 8vw, 120px);
  min-height: 0;
}
html:root body .cfg-studio .cf-room:not([hidden]):not(#_) {
  flex: 1;
  min-height: 0;
  padding: 0;
  container-type: size;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
html:root body .cfg-studio .cf-room-i:not(#_) {
  width: min(100cqw, calc((100cqh - 56px)*1.49));
  aspect-ratio: 900/604;
  margin: 0 auto;
  flex: none;
}
html:root body .cfg-studio .cf-room .seg:not(#_) {
  flex: none;
  justify-content: center;
  margin: 0;
}
html:root body .cfg-studio .cf-room .seg button:not(#_) {
  min-height: 44px;
  padding: 0 14px;
  font-size: 14px;
}
html:root body .cfg-studio .cf-3d:not(#_) {
  flex: 1;
  min-height: 0;
  position: relative;
}
html:root body .cfg-studio .cf-cam:not([hidden]):not(#_) {
  position: absolute;
  z-index: 4;
  left: 8px;
  right: 8px;
  top: 8px;
  padding: 0;
  background: none;
  gap: 4px;
}
html:root body .cfg-studio .cf-cam button:not(#_) {
  min-height: 40px;
  padding: 0 10px;
  font-size: 13px;
}
html:root body .cfg-studio .stage.plaats canvas:not(#_) {
  touch-action: none;
  cursor: move;
}
@media (pointer:coarse) {
  html:root body .cfg-studio .stage:not(.verschuif):not(.plaats):not(#_),
  html:root body .cfg-studio .stage:not(.verschuif):not(.plaats) canvas:not(#_) {
    touch-action: pan-y;
  }
}
html:root body .cfg-studio .stage.groot:not(#_) {
  position: fixed !important;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  display: flex;
  z-index: 1000;
  border: 0;
  margin: 0;
}
html:root body .cfg-studio .stage.groot .tools:not(#_) {
  position: static;
}
html:root body .cfg-studio .stage.groot > .cf-bar .cf-licht:not(#_) {
  position: static;
}
html.cf-groot-open .cfg-studio > div:first-child {
  z-index: 1000 !important;
}
html:root body .cfg-studio .cf-steps:not(#_) {
  position: sticky;
  top: var(--cf-top);
  z-index: 20;
  margin: 0 0 10px;
  background: var(--card);
}
html:root body .cfg-studio .cf-steps button:not(#_) {
  min-height: 52px;
  padding: 6px 2px;
  font-size: 12.5px;
}
html:root body .cfg-studio .cf-steps button b:not(#_) {
  font-size: 1rem;
  line-height: 1.1;
}
html:root body .cfg-studio > div:last-child > .panel:not(#_) {
  padding: 16px;
  margin-bottom: 10px;
}
html:root body .cfg-studio .panel h3:not(#_) {
  margin: 0 0 10px;
  font-size: 1.15rem;
}
html:root body .cfg-studio .cf-warn:not(:empty):not(#_) {
  margin: 0 0 10px;
}
html:root body .cfg-studio .cf-warn p:not(#_) {
  margin: 0 0 6px;
}
html:root body .cfg-studio .cf-nav:not(#_) {
  display: none;
}
html:root body .cfg-studio .cf-dz:not(#_) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  max-height: none;
  overflow: visible;
  padding: 2px;
}
html:root body .cfg-studio .cf-dz button:not(#_) {
  aspect-ratio: 1;
  min-width: 0;
}
html:root body .cfg-studio .cf-dz button img:not(#_) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
html:root body .cfg-studio .panel.opt:not(#_) {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
.cf-keus {
  display: grid;
  gap: 6px;
  margin-top: 4px;
}
html:root body .cf-keus button:not(#_) {
  min-height: 46px;
  padding: 8px 12px;
  text-align: left;
  background: transparent;
  border: 1px solid var(--line-ui,var(--line));
  border-radius: 3px;
  color: var(--ink);
  font: 500 14px/1.25 var(--sans);
  cursor: pointer;
}
html:root body .cf-keus button:hover:not(#_) {
  border-color: var(--amber);
}
html:root body .cf-keus button[aria-pressed=true]:not(#_) {
  border-color: var(--amber);
  box-shadow: inset 0 0 0 1px var(--amber);
  font-weight: 700;
}
.cf-wand {
  margin: 0 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
html:root body .cf-wand h4:not(#_) {
  margin: 0 0 6px;
  font-size: .85rem;
}
.cf-wand-r {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: end;
}
html:root body .cf-wand-r .btn:not(#_) {
  grid-column: 1/-1;
  justify-content: center;
}
html:root body .cf-wand p:not(#_) {
  margin: 8px 0 0;
  font-size: .8125rem;
}
html:root body .cf-u-kop:not(#_) {
  margin-bottom: 2px;
  color: var(--stone);
}
html:root body .cf-ov summary:not(#_),
.cf-tech summary {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
  min-height: 28px;
  font-weight: 600;
  list-style-position: inside;
}
html:root body .cf-ov .tbl-w:not(#_) {
  margin-top: 8px;
}
html:root body .cf-ov:not(#_) {
  padding-block: 12px;
}
html:root body .cfg-studio .cf-pl :is(th, td):nth-child(6):not(#_) {
  display: none;
}
.cf-tech {
  margin-top: 10px;
}
.cf-tech .row {
  margin-top: 8px !important;
}
html:root body .cfg-studio .sum:not(#_) {
  padding: 16px;
  margin-bottom: 10px;
}
html:root body .cf-balk:not(#_) {
  position: sticky;
  bottom: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 64px;
  padding: 9px 12px;
  padding-bottom: calc(9px + env(safe-area-inset-bottom, 0px));
  background: var(--card);
  border: 1px solid var(--line-strong,var(--line));
  box-shadow: 0 -10px 24px rgba(0, 0, 0, .28);
}
.cf-balk-t {
  min-width: 0;
  line-height: 1.25;
}
html:root body .cf-balk-t b:not(#_) {
  display: block;
  font-size: 14px;
  color: var(--ink);
  white-space: nowrap;
}
html:root body .cf-balk-t small:not(#_) {
  display: block;
  font-size: 12.5px;
  color: var(--stone);
  white-space: nowrap;
}
.cf-balk-k {
  display: flex;
  gap: 6px;
  flex: none;
  align-items: center;
}
.cf-balk-k [hidden] {
  display: none !important;
}
.cf-beind {
  display: inline-flex;
}
html:root body .cf-balk .btn:not(#_) {
  min-height: 44px;
  white-space: nowrap;
}
html:root body .cf-balk .cf-bterug:not(#_) {
  min-width: 44px;
  padding: 0;
  justify-content: center;
}
html.cf-studio .fb-k {
  bottom: 88px !important;
}
@media (min-width:1000px), (min-width:640px) and (max-height:600px) and (orientation:landscape) {
  html:root body .cfg.cfg-studio:not(#_) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(320px, 29vw, 430px);
    gap: clamp(12px, 1.6vw, 22px);
    align-items: start;
  }
  html:root body .cfg.cfg-studio:not(#_) > div:first-child {
    display: block;
    position: sticky;
    top: var(--cf-top);
    min-width: 0;
  }
  html:root body .cfg.cfg-studio:not(#_) > div:last-child {
    min-width: 0;
    width: auto;
  }
}
@media (min-width:640px) and (max-height:600px) and (orientation:landscape) {
  html.cf-studio {
    --cf-top:6px;
    --cf-stage:calc(100dvh - 12px);
  }
  html.cf-studio .hd {
    position: relative;
  }
  .cf-kop .lead {
    display: none;
  }
  html:root body .cfg-studio .cf-dim:not(#_),
  html:root body .cfg-studio .cf-licht > span:not(#_) {
    display: none;
  }
}
@media (max-width:999px) and (min-height:601px), (max-width:639px) {
  html.cf-studio {
    --cf-top:var(--cf-h);
    --cf-stage:var(--cf-h);
  }
  html.cf-studio .hd {
    position: relative;
  }
  html:root body .cf-studio-sec:not(#_) {
    padding-top: 12px;
  }
  html:root body .cf-at:not(#_) {
    font-size: .8125rem;
  }
  .cf-kop {
    flex-wrap: wrap;
    gap: 4px 16px;
  }
  html:root body .cfg.cfg-studio:not(#_) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  html:root body .cfg.cfg-studio:not(#_) > div:first-child {
    display: contents;
  }
  html:root body .cfg-studio > div:first-child > .stage:not(#_) {
    position: sticky;
    top: 0;
    z-index: 30;
    margin-inline: calc(-1*clamp(12px, 2vw, 28px));
    width: auto;
    border-inline: 0;
    order: 1;
  }
  html:root body .cfg.cfg-studio:not(#_) > div:last-child {
    order: 2;
    width: 100%;
    padding-top: 10px;
  }
  html:root body .cfg-studio .cf-steps:not(#_) {
    top: var(--cf-h);
    margin-inline: calc(-1*clamp(12px, 2vw, 28px));
    border-inline: 0;
  }
  html:root body .cf-balk:not(#_) {
    margin-inline: calc(-1*clamp(12px, 2vw, 28px));
    border-inline: 0;
  }
  html:root body .cfg-studio .stage .hint:not(#_) {
    bottom: 64px;
  }
}
@media (max-width:999px) and (min-width:640px) and (min-height:601px) {
  html:root body .cfg-studio .cf-dz:not(#_) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media (max-width:639px) {
  .cf-kop .lead {
    display: none;
  }
  html:root body .cfg-studio .stage .tools [data-z]:not(#_),
  html:root body .cfg-studio .stage.verschuif .tools [data-z]:not(#_),
  .cf-zpct,
  html:root body .cfg-studio .stage .tools .cf-hist:not(#_) {
    display: none;
  }
  html:root body .cfg-studio .cf-dim:not(#_),
  html:root body .cfg-studio .cf-licht > span:not(#_) {
    display: none;
  }
  html:root body .cfg-studio .stage.groot .cf-dim:not(#_) {
    display: block;
  }
  html:root body .cfg-studio .cf-bar:not(#_) {
    padding-inline: 6px;
    gap: 4px;
  }
  html:root body .cfg-studio .stage :is(.tools, .cf-modus) button:not(#_) {
    padding: 0 8px;
    font-size: 13.5px;
  }
  html:root body .cfg-studio .cf-steps button:not(#_) {
    min-height: 46px;
    font-size: 11.5px;
  }
  html:root body .cfg-studio .cf-dz:not(#_) {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    gap: 8px;
    padding: 2px 2px 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  html:root body .cfg-studio .cf-dz button:not(#_) {
    flex: 0 0 108px;
    scroll-snap-align: start;
  }
  html:root body .cfg-studio .cf-pl :is(th, td):nth-child(2):not(#_) {
    display: none;
  }
}
html:root body .cfg-studio .stage .hint:not(#_) {
  bottom: 112px;
  white-space: nowrap;
}
html:root body .cfg-studio input[data-psp]:not(#_) {
  width: 28px !important;
  height: 28px !important;
}
@media (min-width:640px) and (max-height:600px) and (orientation:landscape) {
  html:root body .cfg-studio .stage .tools [data-z]:not(#_),
  html:root body .cfg-studio .stage .tools .cf-hist:not(#_),
  .cf-zpct {
    display: none;
  }
}
@media (max-width:999px) and (min-height:601px), (max-width:639px) {
  html:root body .cfg-studio:not([data-stap="5"]) .sum:not(#_),
  html:root body .cfg-studio:not([data-stap="5"]) .cf-ov:not(#_) {
    display: none;
  }
}
html:root body .cfg-studio .stage:not(.verschuif):not(.plaats):not(#_),
html:root body .cfg-studio .stage:not(.verschuif):not(.plaats) canvas:not(#_) {
  touch-action: pan-y;
}
.cfg-studio :is(input, select, button, .panel) {
  scroll-margin-top: calc(var(--cf-top) + 62px);
  scroll-margin-bottom: 84px;
}
@media (max-width:639px) {
  html.cf-studio:has(.cfg-studio input[type=number]:focus) {
    --cf-h:clamp(150px,24svh,220px);
  }
  html:root body:has(.cfg-studio input[type=number]:focus) .cfg-studio .cf-bar:not(#_),
  html:root body:has(.cfg-studio input[type=number]:focus) .cf-balk:not(#_),
  html:root body:has(.cfg-studio input[type=number]:focus) .fb-k:not(#_) {
    display: none;
  }
}
html.cf-studio {
  --cf-st:73px;
}
html:root body .cfg-studio .cf-steps:not(#_) {
  top: var(--cf-st);
}
@media (min-width:640px) and (max-height:600px) and (orientation:landscape) {
  html.cf-studio {
    --cf-st:0px;
  }
}
@media (max-width:999px) and (min-height:601px), (max-width:639px) {
  html.cf-studio {
    --cf-st:var(--cf-h);
  }
}
html.cf-studio {
  --cf-h:clamp(300px,min(56svh,118vw),640px);
}
@media (max-width:639px) {
  html:root body .cfg-studio .cf-bar:not(#_) {
    min-height: 52px;
    padding-block: 4px;
  }
  html:root body .cfg-studio .stage .hint:not(#_) {
    bottom: 96px;
  }
}
html:root body .fb-k:not(#_) {
  width: auto !important;
  min-width: 44px;
  height: 44px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  font-size: .8125rem !important;
  line-height: 1;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
}
html:root body .fb-k:not(#_) .fb-t {
  font-size: inherit;
}
html:root body :is(.toast, .gtoast):not(#_) {
  pointer-events: none;
}
html:root body .cf-steps button:not(#_) {
  -webkit-hyphens: auto;
  hyphens: auto;
}
@media (max-width:360px) {
  html:root body .fb-k:not(#_):not(.fb-kop) {
    padding: 0 12px !important;
    font-size: .75rem !important;
    letter-spacing: 0;
  }
}