/* Echte Drehregler; der Range-Input dient nur als unsichtbare Bedienebene. */
.knob {
  --size: 68px;
  position: relative;
  width: var(--size);
  height: var(--size);
  flex: 0 0 var(--size);
  border: 2px solid #56615c;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #4c5752 0 6%, #29312e 32%, #121715 74%);
  box-shadow: inset -7px -8px 13px #090c0b, inset 4px 4px 8px #68736d55, 0 4px 0 #090c0b;
}

.knob::before {
  content: "";
  position: absolute;
  inset: -7px;
  z-index: -1;
  border-radius: 50%;
  background: conic-gradient(from 225deg, var(--acid) 0 calc(var(--p, 50) * 2.7deg), #3b4541 0 270deg, transparent 0);
}

.knob-indicator {
  position: absolute;
  top: 7px;
  left: 50%;
  width: 7px;
  height: 7px;
  border: 1px solid #0a0d0c;
  border-radius: 50%;
  background: var(--cream);
  box-shadow: 0 0 4px #000;
  transform: translateX(-50%) rotate(var(--angle, 0deg));
  transform-origin: 50% calc(var(--size) / 2 - 7px);
  pointer-events: none;
}

.knob-control .knob input {
  position: absolute;
  inset: -7px;
  width: calc(100% + 14px);
  height: calc(100% + 14px);
  margin: 0;
  opacity: 0;
  transform: none;
  background: none;
  cursor: ns-resize;
}

.knob-control .knob input::-webkit-slider-thumb {
  appearance: none;
  width: 1px;
  height: 1px;
  background: transparent;
  transform: none;
}

.knob-control .knob input::-moz-range-thumb {
  width: 1px;
  height: 1px;
  border: 0;
  background: transparent;
}

.knob:focus-within { outline: 2px solid #fff; outline-offset: 3px; }
.knob-control output { margin-top: 10px; }
.mini-controls .knob { --size: 58px; }

@media (max-width: 480px) {
  .knob { --size: 58px; }
}