/* Drehregler (Fizzy knobs.css, Optik übernommen): Knopf mit Verlauf und Kante, Zeiger, Marken im
   Bogen, darunter ein echter Schieberegler für Tastatur und Screenreader. Logik: regler_controller.js. */
@layer bausteine {
  .regler { display: flex; flex-direction: column; align-items: center; gap: .3rem; width: 11rem; }
  .regler-rad { position: relative; width: 9rem; height: 8rem; }
  .regler-knopf {
    position: absolute; left: 50%; top: 55%; width: 4.4rem; height: 4.4rem; margin: -2.2rem 0 0 -2.2rem; border-radius: 50%;
    background: linear-gradient(to top, var(--ton-4), var(--ton-1)), var(--flaeche);
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, .1), 0 2px 4px rgba(0, 0, 0, .15), 0 2px 8px rgba(0, 0, 0, .2);
    transform: rotate(var(--winkel, 0deg)); transition: transform var(--dauer) var(--kurve);
  }
  .regler-knopf::before { content: ""; position: absolute; inset: .35rem; border-radius: 50%; background: linear-gradient(to bottom, var(--ton-3), var(--ton-1)), var(--flaeche); box-shadow: 0 -1px 0 rgba(255, 255, 255, .25), inset 0 -1px 0 rgba(255, 255, 255, .25); }
  .regler-zeiger { position: absolute; left: 50%; top: .45rem; width: .24rem; height: 1.4rem; margin-left: -.12rem; border-radius: .2rem; background: CanvasText; z-index: 1; }
  .regler-skala { position: absolute; inset: 0; }
  .regler-marke { --k-grund: transparent; --k-text: inherit; --k-rand: transparent; position: absolute; left: 50%; top: 55%; width: 2.2rem; margin: -.7rem 0 0 -1.1rem; padding: 0; opacity: .55; font-size: .85rem; text-align: center; transform: rotate(var(--winkel)) translateY(-3.6rem) rotate(calc(-1 * var(--winkel))); }
  .regler-marke::before { content: ""; position: absolute; left: 50%; bottom: -.55rem; width: 2px; height: .5rem; margin-left: -1px; background: var(--ton-5); transform: rotate(var(--winkel)); }
  .regler-marke:hover { opacity: 1; filter: none; background: transparent; }
  .regler-marke.aktiv { opacity: 1; font-weight: 700; color: var(--d-akzent); }
  .regler-wert { font-size: var(--winzig); text-transform: uppercase; letter-spacing: .04em; opacity: .7; }
  .regler-wert output { font-size: 1rem; font-weight: 700; opacity: 1; font-family: inherit; }
  .regler input[type=range] { width: 9rem; margin: 0; }
  .einstellung-form { align-items: flex-end; gap: 1rem; }
  .popover-form .regler { align-self: center; }
}