.klimbord {
  --klim-kleur: #a8863a;
  position: relative;
  display: flex;
  align-items: baseline;
  gap: calc(7px * var(--hud, 1));
  max-width: min(calc(620px * var(--hud, 1)), calc(100vw - 24px));
  padding: calc(4px * var(--hud, 1)) calc(14px * var(--hud, 1)) calc(5px * var(--hud, 1)) calc(12px * var(--hud, 1));
  border-radius: 999px;
  overflow: hidden;
  white-space: nowrap;
  background: rgba(10, 12, 18, .66);
  backdrop-filter: blur(6px);
  box-shadow: inset 3px 0 0 var(--klim-kleur);
  font-size: calc(12px * var(--hud, 1));
  color: #fff;
  pointer-events: none;
}
.klimbord[hidden] {
  display: none;
}
.klimbord::before {
  content: "";
  align-self: center;
  flex: none;
  width: calc(12px * var(--hud, 1));
  height: calc(9px * var(--hud, 1));
  background: var(--klim-kleur);
  clip-path: polygon(0 100%, 42% 12%, 58% 40%, 72% 0, 100% 100%);
}
.klim-kop {
  font-size: calc(9px * var(--hud, 1));
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .7;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(170px * var(--hud, 1));
}
.klimbord b {
  font-family: ui-monospace, monospace;
  font-size: calc(14px * var(--hud, 1));
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.klim-naam {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.klim-naam:empty {
  display: none;
}
.klim-info {
  opacity: .85;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.klim-naam::before,
.klim-info::before {
  content: "·";
  margin-right: calc(7px * var(--hud, 1));
  opacity: .55;
}
.klim-balk {
  display: none;
}
.klimbord.klim-op .klim-balk {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgba(255, 255, 255, .14);
}
.klim-balk i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--klim-kleur);
  transition: width .4s linear;
}
.klimbord.klim-op .klim-kop {
  opacity: .95;
  font-weight: 700;
}
.klimbord.klim-nieuw {
  animation: klim-nieuw 1.2s ease-out;
}
@keyframes klim-nieuw {
  0% {
    background: color-mix(in srgb, var(--klim-kleur) 55%, rgba(10, 12, 18, .66));
  }
  100% {
    background: rgba(10, 12, 18, .66);
  }
}
@media (max-width: 760px) {
  .klimbord {
    align-self: center;
    max-width: calc(100vw - 16px);
  }
  .klim-naam {
    display: none;
  }
}
@media (max-height: 480px) {
  .klimbord {
    font-size: 11px;
    padding: 2px 10px 3px 9px;
    gap: 5px;
  }
  .klimbord b {
    font-size: 12px;
  }
  .klim-kop {
    font-size: 8px;
  }
}
html.foto .klimbord {
  display: none;
}