html {
  scroll-padding-top: 96px;
  scroll-padding-bottom: calc(var(--tab,0px) + 16px);
  text-size-adjust: 100%;
}
.burger {
  align-items: stretch !important;
  border: 0 !important;
}
.tab {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding-left: max(4px, env(safe-area-inset-left));
  padding-right: max(4px, env(safe-area-inset-right));
}
.tab a {
  font-size: 12px;
  padding: 6px 1px;
  min-width: 0;
}
@media (max-width:820px) {
  body:has(input:not([type=range]):not([type=checkbox]):not([type=radio]):focus, textarea:focus, select:focus) .tab {
    display: none;
  }
}
.rg,
.kantel,
.k3-h,
.scrol,
.voet h2,
.dr-rail span,
.dn small,
.dd-k li,
.cv {
  font-size: 12px;
}
.tab a,
.voet h2 {
  letter-spacing: .01em;
}
.lap-vs > .cv {
  font-size: 12px;
  top: 4px;
  right: 4px;
  left: 4px;
  text-align: right;
  letter-spacing: 0;
  line-height: 1.1;
}
.lap-vs .lb {
  font-size: 12px;
  letter-spacing: .02em;
  padding: 3px 5px;
  text-transform: none;
}
@container (max-width:640px) {
  .lap-st {
    display: none;
  }
  .lap-vs .vs-knop {
    width: 32px;
    height: 32px;
    margin: -16px;
  }
}
@container (max-width:460px) {
  .lap-in {
    grid-template-columns: minmax(0, 1fr);
    padding: 2.4cqw;
  }
  .lap-th {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    margin-bottom: 6px;
  }
  .lap-th button {
    min-height: 44px;
    aspect-ratio: auto;
  }
}
.voet-g > div > a:not(.logo) {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 2px 0;
}
.voet p a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.taal summary {
  min-width: 44px;
  justify-content: center;
}
.rg-sw button {
  min-width: 44px;
}
.kantel {
  min-height: 44px;
}
.dh-l a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 0;
}
.streep button {
  width: 44px;
}
.thema-k {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
}
html:root body .demo-bar .thema-k {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
}
.cf-at,
.at-v1 {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
button.sw {
  position: relative;
}
button.sw::after {
  content: "";
  position: absolute;
  inset: -8px -6px;
}
.held .lb-l {
  left: max(10px, calc(var(--p) - 118px));
}
.held .lb-r {
  left: min(calc(var(--p) + 22px), calc(100% - 118px));
}
h1,
h2 {
  overflow-wrap: break-word;
}
html[lang=de] h1,
html[lang=de] h2 {
  -webkit-hyphens: auto;
  hyphens: auto;
}
@media (max-width:360px) {
  html[lang=de] .pk-t h1 {
    font-size: 34px;
    overflow-wrap: anywhere;
  }
}
@media (max-width:820px) {
  body:has(.tab) .fb-k {
    bottom: calc(var(--tab,61px) + 12px) !important;
  }
}
.tl-canvas {
  touch-action: pan-y pinch-zoom;
}
.tl-canvas .tl-loep {
  display: block;
  width: 120px;
  height: 120px;
}
.tl-canvas .tl-loep[hidden] {
  display: none;
}
@media (max-width:430px) {
  .tl-steps li:not(.on) {
    font-size: 0;
    gap: 0;
  }
}
html:root body .cfg-studio .btn {
  white-space: normal;
}
span.btn,
label.btn {
  max-width: 100%;
  white-space: normal;
  text-align: center;
}
@media (max-width:349px) {
  html:root body .cfg-studio .stage :is(.tools, .cf-modus) button:not(#_) {
    min-width: 34px !important;
    padding: 0 6px !important;
    font-size: 13px !important;
  }
  html:root body .cfg-studio .cf-bar:not(#_) {
    gap: 4px !important;
    padding-inline: 6px !important;
  }
  html:root body .cf-bar-l:not(#_) {
    gap: 6px !important;
  }
  html:root body .cfg-studio .stage .cf-schuif:not(#_) {
    padding: 0 7px !important;
    font-size: 13px !important;
  }
}
@media (max-width:640px) {
  html:root body .demo-bar:not(#_) {
    position: relative;
    justify-content: flex-start;
    padding-right: 58px;
    text-align: left;
  }
  html:root body .demo-bar:not(#_) .thema-k {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
  }
}
@media (max-width:1000px) {
  .k3-v {
    height: 54svh;
    min-height: 260px;
  }
}
@media (orientation:landscape) and (max-height:520px) {
  .k3 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(270px, 38%);
    height: calc(100svh - 90px - var(--tab,0px));
    min-height: 260px;
  }
  .k3-v {
    height: auto;
    min-height: 0;
  }
  .k3-p {
    overflow: auto;
    padding: 12px;
    border-left: 1px solid rgba(231, 196, 140, .14);
    -webkit-overflow-scrolling: touch;
  }
  .k3-d {
    margin-inline: 0;
    padding-inline: 0;
  }
  .k3-t {
    order: 3;
  }
}
.k3-m {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 12px;
  z-index: 3;
  margin: 0;
  padding: 10px 14px;
  background: rgba(10, 8, 7, .88);
  border: 1px solid rgba(231, 196, 140, .3);
  color: #efe7db;
  font: 500 13px/1.35 var(--sans);
  text-align: center;
}
.k3-m[hidden] {
  display: none;
}
@media (orientation:landscape) {
  :root {
    --rand:max(clamp(16px,4vw,56px),env(safe-area-inset-left),env(safe-area-inset-right));
  }
  .wrap {
    padding-left: max(clamp(18px, 4vw, 40px), env(safe-area-inset-left));
    padding-right: max(clamp(18px, 4vw, 40px), env(safe-area-inset-right));
  }
}
@media (min-width:900px) {
  .at-voorbeeld {
    top: var(--at-kop,65px);
    height: calc(100vh - var(--at-kop,65px));
  }
  .at-blad {
    top: var(--at-kop,65px);
    max-height: calc(100vh - var(--at-kop,65px));
  }
}
@media (orientation:landscape) and (max-height:520px) {
  .k3-p > * {
    flex: none;
  }
}
@media (pointer:coarse) and (min-width:821px) {
  .demo {
    min-height: 44px;
    padding-block: 0;
  }
  .demo a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  body.over .kop {
    top: 44px;
  }
  body.over.ver .kop {
    top: 0;
  }
}
.pi-t a {
  pointer-events: auto;
}
.pi-f {
  padding-inline: var(--rand);
}
.rg-k3 .rg-2 {
  flex-wrap: wrap;
}
.lap-vs > .cv {
  overflow-wrap: anywhere;
}
@media (pointer:coarse) {
  .kantel {
    top: auto;
    bottom: 10px;
    left: var(--rand);
  }
  .scrol {
    display: none;
  }
}
html:root body .cfg-studio .cf-steps button:not(#_) {
  font-size: 12px;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
html:root body .stage .tools button:not(#_),
html:root body .stage .cf-schuif:not(#_) {
  min-height: 44px;
  height: 44px;
}
html:root body .btn:not(#_),
html:root body .btn-s:not(#_) {
  min-height: 44px;
}
.lang button,
.lang a {
  min-width: 44px;
  min-height: 44px;
}
button.sw::after {
  inset: -10px -6px;
}
.pk-t li a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.portaal a.logo,
.beheer a.logo,
.rl-top .lg,
.at-merk {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.at-top {
  min-height: 65px;
}
@media (max-width:640px) {
  html:root body .demo-bar:not(#_) {
    min-height: 46px;
  }
}
html:root body .rl-top nav a:not(#_) {
  min-height: 44px;
}
@media (max-width:639px) and (max-height:620px) {
  html.cf-studio {
    --cf-h:clamp(256px,42svh,270px);
  }
}
.demo a {
  min-width: 44px;
  justify-content: center;
}
.kantel {
  z-index: 5;
}
html:root body .cfg-studio .stage :is(.tools, .cf-modus) button:not(#_) {
  min-width: 44px;
}
@media (max-width:349px) {
  html:root body .cfg-studio .stage :is(.tools, .cf-modus) button:not(#_) {
    min-width: 34px !important;
  }
}
html:root body .stage .tools button:not(#_) {
  min-width: 44px;
}
html:root body .demo-bar a:not(#_) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
@media (orientation:landscape) {
  .fb-k {
    right: max(16px, env(safe-area-inset-right)) !important;
  }
  html:root body .cf-studio-sec:not(#_),
  html:root body.portaal .main:not(#_) {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
}
@media (orientation:landscape) and (max-height:520px) {
  html:root body .cf-kop:not(#_) {
    padding-left: max(0px, calc(env(safe-area-inset-left) - 16px));
  }
}
@media (min-width:900px) {
  .at-voorbeeld {
    justify-content: flex-start;
    overflow: auto;
  }
}
.tl-eerlijk {
  color: var(--on-dark-2);
  font-size: .9rem;
  line-height: 1.4;
}
html:root body .btn:not(#_) {
  white-space: normal;
  max-width: 100%;
}
.kpi small {
  overflow-wrap: anywhere;
}
#als {
  font-size: 16px;
  min-height: 44px;
}
body.beheer td a,
body.portaal td a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
@media (max-width:999px) and (min-height:601px), (max-width:639px), (min-width:640px) and (max-height:600px) and (orientation:landscape) {
  html.cf-studio .kop {
    position: relative;
  }
}
@media (orientation:landscape) {
  html:root body.portaal #app:not(#_) {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  html:root body.portaal .demo-bar:not(#_) {
    padding-right: max(16px, env(safe-area-inset-right));
  }
}
@media (min-width:821px) and (max-height:820px) and (pointer:coarse) {
  .held {
    height: auto;
    max-height: none;
    align-items: flex-start;
    min-height: calc(100svh - 148px);
  }
  .held-t {
    padding-top: 96px;
    padding-bottom: 178px;
  }
  .dh {
    height: auto;
    max-height: none;
    align-items: flex-start;
  }
  .dh-t {
    padding-top: 110px;
    padding-bottom: 128px;
  }
}
@media (min-width:821px) and (max-height:520px) and (pointer:coarse) {
  .held h1 {
    font-size: 2.5rem;
  }
  .held-t {
    width: min(460px, 52vw);
  }
  .held .lead {
    font-size: 15px;
    margin-bottom: 0;
  }
}
.held .lb {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
html:root body .cfg-studio .stage .cf-hist:not(#_) {
  min-width: 44px;
}
html:root body .cfg-studio .cf-bar:not(#_) {
  flex-wrap: wrap;
}
.cfg summary,
.cfg details > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
}
@media (max-width:639px) and (min-height:621px) {
  html.cf-studio {
    --cf-h:clamp(256px,min(45svh,110vw),640px);
  }
}
.kh-res,
.kh-res > *,
.kh-body,
.kh-body li {
  min-width: 0;
  overflow-wrap: anywhere;
}
.at-stapper input {
  min-width: 0;
}
.at-stapper > div {
  min-width: 0;
}
.gw,
.gw * {
  min-width: 0;
  overflow-wrap: anywhere;
}
.gdemo {
  max-width: 100%;
  white-space: normal;
}
@media (max-width:820px) {
  .held .lb {
    bottom: max(17%, 60px);
  }
}
.held.lb-l-weg .lb-l,
.held.lb-r-weg .lb-r {
  opacity: 0;
  pointer-events: none;
}
.rg-sw {
  position: relative;
  z-index: 1;
}
html:root body .cfg-studio .stage .cf-hist:not(#_) {
  min-width: 44px;
  width: 44px !important;
}
@media (max-width:349px) {
  html:root body .cfg-studio .cf-bar:not(#_) {
    flex-wrap: nowrap;
  }
}
@media (max-width:980px) {
  .kh-res {
    grid-template-columns: minmax(0, 1fr);
  }
}
.kh-card,
.kh-card * {
  min-width: 0;
}
@media (max-width:374px) {
  .tl-seg.n {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .tl-seg.n button + button {
    border-left: 0;
  }
}
.at-stapper > div button {
  min-width: 44px;
}
a.lg {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.cfg select {
  min-height: 44px;
}
.kh-card {
  align-items: stretch;
}
.kh-body {
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.tl-mbl {
  font-size: 12px;
}
@media (max-width:349px) {
  html:root body .cfg-studio .stage .cf-hist:not(#_) {
    display: none;
  }
}
.voet-g > div > a:not(.logo) {
  min-width: 44px;
}
html:root body .rg-sw button {
  min-width: 44px;
  text-align: center;
}
.dh .rg {
  z-index: 4;
}