html,
body {
 margin: 0;
  min-height: 100%;
 background: #ffffff;
 color: #111111;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 overflow: hidden;
}

canvas {
 display: block;
}

.anzeige {
  position: fixed;
 top: 16px;
 left: 16px;
 z-index: 10;
 pointer-events: none;
  font-size: 13px;
 line-height: 1.2;
 letter-spacing: 0.01em;
 color: rgba(17, 17, 17, 0.82);
 opacity: 0;
 transform: translateY(-4px);
  transition: opacity 120ms ease, transform 120ms ease;
}

.anzeige.sichtbar {
 opacity: 1;
  transform: translateY(0);
}

.dock {
 position: fixed;
 right: 16px;
  bottom: 16px;
 z-index: 10;
 width: 112px;
 height: 24px;
}

.dock input {
 position: absolute;
 inset: 0;
 margin: 0;
 width: 100%;
  height: 24px;
 appearance: none;
 background: transparent;
 cursor: pointer;
}

.dock input::-webkit-slider-runnable-track {
 height: 1px;
 background: rgba(17, 17, 17, 0.16);
}

.dock input::-moz-range-track {
 height: 1px;
 background: rgba(17, 17, 17, 0.16);
  border: 0;
}

.dock input::-webkit-slider-thumb {
 appearance: none;
 width: 9px;
  height: 9px;
 border-radius: 50%;
  background: #111111;
  margin-top: -4px;
}

.dock input::-moz-range-thumb {
 width: 9px;
 height: 9px;
 border: 0;
 border-radius: 50%;
 background: #111111;
}

.wert {
 position: absolute;
 right: 0;
 bottom: 18px;
 font-size: 12px;
 color: rgba(17, 17, 17, 0.78);
 opacity: 0;
 transition: opacity 120ms ease;
  pointer-events: none;
}

.wert.sichtbar { opacity: 1; }

.signatur {
 position: fixed;
 left: 16px;
 bottom: 16px;
  z-index: 10;
 pointer-events: none;
  font-size: 11px;
 letter-spacing: 0.02em;
  color: rgba(17, 17, 17, 0.5);
}

@media (max-width: 700px) {
  .anzeige {
   top: 14px;
    left: 14px;
  }

  .dock {
   right: 14px;
   bottom: 14px;
  }

  .signatur {
   left: 14px;
   bottom: 14px;
  }
}