/*!
 * onlion® Dot — Frontend
 * Liquid-Glass-Schnellnavigation, floatend unten zentriert.
 * (c) onlion® Studio — GPL-2.0-or-later
 */

:root {
  --od-accent: #7697ff;
  --od-radius-base: 120px;
  --od-radius: var(--od-radius-base);
  --od-size: 60px;
  --od-item-size: 52px;
  --od-z: 99990;

  /* Light glass */
  --od-glass-bg: rgba(255, 255, 255, 0.55);
  --od-glass-bg-strong: rgba(255, 255, 255, 0.72);
  --od-glass-border: rgba(255, 255, 255, 0.75);
  --od-glass-inner: rgba(255, 255, 255, 0.9);
  --od-glass-shadow: 0 8px 32px rgba(22, 28, 47, 0.18), 0 2px 8px rgba(22, 28, 47, 0.1);
  --od-ink: #161c2f;
  --od-label-bg: rgba(255, 255, 255, 0.85);
}

/* Dark tokens */
.od[data-od-theme="dark"],
.od-layer[data-od-theme="dark"] {
  --od-glass-bg: rgba(20, 25, 40, 0.55);
  --od-glass-bg-strong: rgba(20, 25, 40, 0.72);
  --od-glass-border: rgba(255, 255, 255, 0.18);
  --od-glass-inner: rgba(255, 255, 255, 0.28);
  --od-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
  --od-ink: #d4d7d1;
  --od-label-bg: rgba(20, 25, 40, 0.85);
}

@media (prefers-color-scheme: dark) {
  .od[data-od-theme="auto"],
  .od-layer[data-od-theme="auto"] {
    --od-glass-bg: rgba(20, 25, 40, 0.55);
    --od-glass-bg-strong: rgba(20, 25, 40, 0.72);
    --od-glass-border: rgba(255, 255, 255, 0.18);
    --od-glass-inner: rgba(255, 255, 255, 0.28);
    --od-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
    --od-ink: #d4d7d1;
    --od-label-bg: rgba(20, 25, 40, 0.85);
  }
}

/* ---------- Container ---------- */

.od {
  position: fixed;
  left: 50%;
  bottom: calc(var(--od-bottom, 18px) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: var(--od-z);
  font-family: inherit;
  transition: transform 0.55s cubic-bezier(0.34, 1.3, 0.4, 1);
  will-change: transform;
}

/* Full circle: hub floats up so the ring fits on screen */
.od[data-od-mode="full"].od--open {
  transform: translateX(-50%) translateY(calc(-1 * var(--od-radius) - 12px));
}

/* ---------- Toggle (Hub) ---------- */

.od__toggle {
  position: relative;
  width: var(--od-size);
  height: var(--od-size);
  border-radius: 50%;
  border: 1px solid var(--od-glass-border);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 45%),
    var(--od-glass-bg-strong);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
  box-shadow:
    var(--od-glass-shadow),
    inset 0 1px 0 var(--od-glass-inner);
  cursor: pointer;
  padding: 0;
  margin: 0;
  display: grid;
  place-items: center;
  color: var(--od-ink);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.od__toggle:hover {
  transform: scale(1.06);
}

.od__toggle:active {
  transform: scale(0.94);
}

.od__toggle:focus-visible {
  outline: 2px solid var(--od-accent);
  outline-offset: 3px;
}

/* Three dots -> X morph */
.od__dots {
  position: relative;
  width: 26px;
  height: 26px;
  display: block;
}

.od__dots i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 3px;
  background: currentColor;
  transition:
    transform 0.4s cubic-bezier(0.34, 1.3, 0.4, 1),
    width 0.4s cubic-bezier(0.34, 1.3, 0.4, 1),
    opacity 0.25s ease;
}

.od__dots i:nth-child(1) { transform: translateX(-9px); }
.od__dots i:nth-child(3) { transform: translateX(9px); }

.od--open .od__dots i:nth-child(1) {
  width: 22px;
  margin-left: -11px;
  transform: rotate(45deg);
  height: 3px;
  margin-top: -1.5px;
}

.od--open .od__dots i:nth-child(2) {
  opacity: 0;
  transform: scale(0.3);
}

.od--open .od__dots i:nth-child(3) {
  width: 22px;
  margin-left: -11px;
  transform: rotate(-45deg);
  height: 3px;
  margin-top: -1.5px;
}

/* ---------- Ring ---------- */

.od__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

.od--open .od__ring {
  pointer-events: auto;
}

.od__item {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--od-item-size);
  height: var(--od-item-size);
  margin: calc(var(--od-item-size) / -2) 0 0 calc(var(--od-item-size) / -2);
  transform: translate(0, 0) scale(0.4);
  opacity: 0;
  transition:
    transform 0.55s cubic-bezier(0.34, 1.3, 0.4, 1),
    opacity 0.3s ease;
  transition-delay: calc(var(--od-i) * 28ms);
}

/* Rad: 360°, Start oben */
.od[data-od-mode="full"].od--open .od__item {
  --od-angle: calc(90deg - (360deg / var(--od-n)) * var(--od-i));
  transform:
    translate(
      calc(cos(var(--od-angle)) * var(--od-radius)),
      calc(sin(var(--od-angle)) * var(--od-radius) * -1)
    )
    scale(1);
  opacity: 1;
}

/* Fallback without CSS trig support: vertical stack above the hub */
@supports not (transform: translate(calc(cos(45deg) * 1px), 0)) {
  .od--open .od__item {
    transform: translate(0, calc((var(--od-i) + 1) * (var(--od-item-size) + 10px) * -1)) scale(1) !important;
    opacity: 1;
  }
}

/* ---------- Items ---------- */

.od__link {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid var(--od-glass-border);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 50%),
    var(--od-glass-bg);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  box-shadow:
    var(--od-glass-shadow),
    inset 0 1px 0 var(--od-glass-inner);
  color: var(--od-ink);
  text-decoration: none;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.od__link:hover,
.od__link:focus-visible {
  transform: scale(1.12);
  color: var(--od-accent);
}

.od__link:focus-visible {
  outline: 2px solid var(--od-accent);
  outline-offset: 3px;
}

.od__icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
}

.od__icon svg,
.od__icon img {
  width: 22px;
  height: 22px;
  display: block;
}

/* Label tooltip */
.od__label {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--od-label-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--od-glass-border);
  color: var(--od-ink);
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.od__link:hover .od__label,
.od__link:focus-visible .od__label {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .od,
  .od__toggle,
  .od__item,
  .od__link,
  .od__dots i,
  .od__label {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}

/* ---------- Small screens: clamp radius ---------- */

@media (max-width: 480px) {
  .od {
    --od-radius: min(var(--od-radius-base), 34vw);
  }
}

/* Print: hide entirely */
@media print {
  .od {
    display: none !important;
  }
}

/* ================================================================== */
/* Liquid-Glass-Verfeinerung (inspiriert von ybouane/liquidglass)     */
/* Refraktionskante, chromatische Aberration, Specular Highlight —    */
/* rein per CSS, ohne WebGL.                                          */
/* ================================================================== */

.od__toggle,
.od__link {
  box-shadow:
    var(--od-glass-shadow),
    inset 0 1px 0 var(--od-glass-inner),
    inset 0 -10px 18px -12px rgba(255, 255, 255, 0.55),
    inset 1px 0 1px -0.5px rgba(120, 180, 255, 0.35),
    inset -1px 0 1px -0.5px rgba(255, 120, 150, 0.28);
}

.od[data-od-theme="dark"] .od__toggle,
.od[data-od-theme="dark"] .od__link {
  box-shadow:
    var(--od-glass-shadow),
    inset 0 1px 0 var(--od-glass-inner),
    inset 0 -10px 18px -12px rgba(255, 255, 255, 0.18),
    inset 1px 0 1px -0.5px rgba(120, 180, 255, 0.25),
    inset -1px 0 1px -0.5px rgba(255, 120, 150, 0.2);
}

/* Specular sweep on the hub */
.od__toggle::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.12) 22%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0) 78%,
    rgba(255, 255, 255, 0.18) 100%
  );
  opacity: 0.75;
  pointer-events: none;
}

/* ================================================================== */
/* Fullscreen compose layer                                            */
/* ================================================================== */

.od-no-scroll,
.od-no-scroll body {
  overflow: hidden !important;
}

.od-layer {
  position: fixed;
  inset: 0;
  z-index: calc(var(--od-z) + 5);
  display: grid;
  place-items: center;
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  font-family: inherit;
}

.od-layer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 14, 26, 0.35);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.od-layer--open .od-layer__backdrop {
  opacity: 1;
}

.od-layer__dialog {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 24px;
  border: 1px solid var(--od-glass-border);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0) 45%),
    var(--od-glass-bg-strong);
  -webkit-backdrop-filter: blur(24px) saturate(1.7);
  backdrop-filter: blur(24px) saturate(1.7);
  box-shadow:
    var(--od-glass-shadow),
    inset 0 1px 0 var(--od-glass-inner),
    inset 1px 0 1px -0.5px rgba(120, 180, 255, 0.3),
    inset -1px 0 1px -0.5px rgba(255, 120, 150, 0.24);
  color: var(--od-ink);
  padding: 28px 24px 24px;
  transform: translateY(24px) scale(0.96);
  opacity: 0;
  transition:
    transform 0.35s cubic-bezier(0.34, 1.3, 0.4, 1),
    opacity 0.25s ease;
}

.od-layer--open .od-layer__dialog {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.od-layer__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--od-glass-border);
  background: var(--od-glass-bg);
  color: var(--od-ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.od-layer__close:hover {
  transform: scale(1.08);
}

.od-layer__close:focus-visible {
  outline: 2px solid var(--od-accent);
  outline-offset: 2px;
}

.od-layer__title {
  margin: 0 32px 18px 0;
  font-family: inherit;
  font-size: clamp(20px, 4.5vw, 26px);
  line-height: 1.2;
  color: var(--od-ink);
}

/* Form grid */
.od-layer__form {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
  margin: 0;
}

.od-field {
  margin: 0 0 14px;
  flex: 1 1 100%;
  min-width: 0;
}

@media (min-width: 560px) {
  .od-field--half {
    flex: 1 1 calc(50% - 8px);
  }
}

.od-field__label {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: 400;
  color: var(--od-ink);
}

.od-field__label--required {
  font-weight: 600;
}

.od-field__optional {
  font-weight: 400;
  opacity: 0.65;
  font-size: 0.86em;
}

.od-field input,
.od-field select,
.od-field textarea {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 16px; /* prevents iOS zoom */
  color: var(--od-ink);
  background: var(--od-glass-bg);
  border: 1px solid var(--od-glass-border);
  border-radius: 12px;
  padding: 10px 14px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.od-field textarea {
  resize: vertical;
  min-height: 110px;
}

.od-field input:focus-visible,
.od-field select:focus-visible,
.od-field textarea:focus-visible {
  outline: none;
  border-color: var(--od-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--od-accent) 30%, transparent);
}

/* Honeypot */
.od-field--hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.od-layer__actions {
  flex: 1 1 100%;
  margin: 4px 0 0;
}

.od-btn {
  font: inherit;
  font-weight: 600;
  font-size: 16px;
  color: var(--od-ink);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 50%),
    color-mix(in srgb, var(--od-accent) 35%, var(--od-glass-bg-strong));
  border: 1px solid var(--od-glass-border);
  border-radius: 999px;
  padding: 12px 26px;
  cursor: pointer;
  width: 100%;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
  box-shadow: inset 0 1px 0 var(--od-glass-inner);
  -webkit-tap-highlight-color: transparent;
}

.od-btn:hover:not(:disabled) {
  transform: scale(1.02);
}

.od-btn:active:not(:disabled) {
  transform: scale(0.98);
}

.od-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

.od-btn:focus-visible {
  outline: 2px solid var(--od-accent);
  outline-offset: 3px;
}

.od-layer__note {
  flex: 1 1 100%;
  margin: 12px 0 0;
  font-size: 14px;
  min-height: 1.4em;
  color: var(--od-ink);
}

.od-layer__note--error {
  color: #e5484d;
  font-weight: 600;
}

/* Desktop: Senden-Button behält die volle Breite des Input-Feldes */

/* Small screens: bottom sheet feel */
@media (max-width: 559px) {
  .od-layer {
    place-items: end center;
    padding: 0;
  }

  .od-layer__dialog {
    width: 100%;
    max-height: calc(100dvh - 24px);
    border-radius: 24px 24px 0 0;
    padding: 24px 18px calc(20px + env(safe-area-inset-bottom, 0px));
    transform: translateY(40px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .od-layer__backdrop,
  .od-layer__dialog,
  .od-layer__close,
  .od-btn {
    transition-duration: 0.01ms !important;
  }
}

/* ================================================================== */
/* hidden-Attribut hart durchsetzen (Klassen-display würde sonst      */
/* gewinnen und der unsichtbare Layer läge über der Seite)            */
/* ================================================================== */

.od-layer[hidden],
.od-layer [hidden],
.od__ring[hidden] {
  display: none !important;
}

/* ================================================================== */
/* Bildschirmtastatur (iOS/Android): JS begrenzt den Layer per        */
/* visualViewport auf den sichtbaren Bereich über der Tastatur.       */
/* ================================================================== */

.od-layer--vv {
  place-items: end center;
  padding: 0;
}

.od-layer--vv .od-layer__dialog {
  width: 100%;
  max-height: 100dvh;
  margin: 0;
  border-radius: 24px 24px 0 0;
  transform: none;
  /* Sheet läuft hinter Tastatur und System-UI weiter; der Innenabstand
     hält den Inhalt oberhalb der Tastatur, scroll-padding sorgt dafür,
     dass fokussierte Felder beim Scrollen darüber landen. */
  padding-bottom: calc(24px + var(--od-kb, 0px));
  scroll-padding-bottom: calc(24px + var(--od-kb, 0px));
}

/* ================================================================== */
/* Entrance-Animation + Cookie-Banner-Koexistenz (Borlabs)            */
/* ================================================================== */

/* Startzustand: unter den Viewport geschoben, unsichtbar.
   JS blendet ein: Desktop nach Load, Mobil beim ersten Scrollen. */
.od {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(calc(100% + 32px));
  transition:
    transform 0.7s cubic-bezier(0.34, 1.3, 0.4, 1),
    opacity 0.45s ease;
}

.od.od--in {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Vollkreis-Lift gilt weiterhin (höhere Spezifität als .od--in) */

/* Cookie-Banner offen: Circle weicht aus, egal in welchem Zustand */
.od.od--suppressed {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(-50%) translateY(calc(100% + 32px)) !important;
}

@media (prefers-reduced-motion: reduce) {
  .od {
    transition-duration: 0.01ms !important;
  }
}

/* Kein JS (oder JS blockiert): Circle trotzdem nutzbar */
.no-js .od,
html.no-js .od {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* ================================================================== */
/* v1.3.0 — ClickWheel: geschlossenes Rad statt einzelner Icons        */
/* ================================================================== */

.od-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.od {
  --od-disc: calc(var(--od-radius) * 2 + var(--od-item-size) + 28px);
  --od-hole: calc(var(--od-size) / 2 + 12px);
}

/* Die Scheibe: ein zusammenhängender Glass-Donut hinter den Icons */
.od__disc {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--od-disc);
  height: var(--od-disc);
  margin: calc(var(--od-disc) / -2) 0 0 calc(var(--od-disc) / -2);
  border-radius: 50%;
  /* Nur der Außenschatten liegt auf dem Parent — er wird nicht maskiert
     und landet dadurch nie im Donut-Loch. */
  box-shadow: 0 14px 36px rgba(10, 15, 30, 0.22);
  opacity: 0;
  transform: scale(0.25) rotate(-14deg);
  transform-origin: center;
  transition:
    transform 0.6s cubic-bezier(0.34, 1.3, 0.4, 1),
    opacity 0.3s ease;
  pointer-events: none;
}

.od--open .od__disc {
  opacity: 1;
  transform: scale(1) rotate(0deg);
  pointer-events: auto;
}

/* Glasfläche mit Donut-Maske */
.od__disc::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.02) 45%, rgba(255, 255, 255, 0.12) 100%),
    var(--od-glass-bg);
  -webkit-backdrop-filter: blur(20px) saturate(1.7);
  backdrop-filter: blur(20px) saturate(1.7);
  border: 1px solid var(--od-glass-border);
  box-shadow:
    inset 0 1px 0 var(--od-glass-inner),
    inset 0 -14px 28px -18px rgba(255, 255, 255, 0.5),
    inset 2px 0 2px -1px rgba(120, 180, 255, 0.3),
    inset -2px 0 2px -1px rgba(255, 120, 150, 0.24);
  -webkit-mask: radial-gradient(circle at center, transparent calc(var(--od-hole) - 1px), #000 var(--od-hole));
  mask: radial-gradient(circle at center, transparent calc(var(--od-hole) - 1px), #000 var(--od-hole));
}

/* Dezente Kante am Donut-Loch */
.od__disc::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--od-hole) * 2);
  height: calc(var(--od-hole) * 2);
  margin: calc(var(--od-hole) * -1) 0 0 calc(var(--od-hole) * -1);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: inset 0 2px 6px rgba(10, 15, 30, 0.1);
  pointer-events: none;
}

/* Lift des Rads: Hub wird zum Zentrum, Rad bleibt komplett im Viewport */
.od[data-od-mode="full"].od--open {
  transform: translateX(-50%) translateY(calc(-1 * (var(--od-radius) + var(--od-item-size) / 2 + 26px)));
}

/* Icons liegen flach auf dem Rad — Chips erst bei Hover/Fokus */
.od__link {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.od__link:hover,
.od__link:focus-visible {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 50%),
    var(--od-glass-bg-strong);
  border-color: var(--od-glass-border);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 var(--od-glass-inner);
}

.od__icon svg,
.od__icon img {
  width: 24px;
  height: 24px;
}

/* Items poppen mit Stagger auf das Rad */
.od__item {
  transition-delay: calc(60ms + var(--od-i) * 24ms);
}

/* Offen sitzt der Hub AUF dem Rad: flacher Schatten statt Schwebe-Schatten */
.od--open .od__toggle {
  box-shadow:
    0 3px 10px rgba(10, 15, 30, 0.16),
    inset 0 1px 0 var(--od-glass-inner),
    inset 1px 0 1px -0.5px rgba(120, 180, 255, 0.35),
    inset -1px 0 1px -0.5px rgba(255, 120, 150, 0.28);
}

/* Refraktion (SVG-Linsenfilter), aktiviert per JS-Feature-Detection */
html.od-refract .od__disc::before {
  -webkit-backdrop-filter: url(#od-lens) blur(18px) saturate(1.7);
  backdrop-filter: url(#od-lens) blur(18px) saturate(1.7);
}

html.od-refract .od__toggle {
  -webkit-backdrop-filter: url(#od-lens) blur(16px) saturate(1.6);
  backdrop-filter: url(#od-lens) blur(16px) saturate(1.6);
}

html.od-refract .od-layer__dialog {
  -webkit-backdrop-filter: url(#od-lens) blur(22px) saturate(1.7);
  backdrop-filter: url(#od-lens) blur(22px) saturate(1.7);
}

@media (prefers-reduced-motion: reduce) {
  .od__disc {
    transition-duration: 0.01ms !important;
  }
}

/* ================================================================== */
/* v1.3.1 — Icon-Zentrierung im Ringband, Accent-Highlight,           */
/* Safari-Fix: kein Hub-backdrop-filter bei offenem Rad               */
/* ================================================================== */

/* Icons in die Mitte des Ringbands (zwischen Loch und Außenkante) */
.od {
  --od-item-r: calc((var(--od-disc) / 2 + var(--od-hole)) / 2);
}

.od[data-od-mode="full"].od--open .od__item {
  transform:
    translate(
      calc(cos(var(--od-angle)) * var(--od-item-r)),
      calc(sin(var(--od-angle)) * var(--od-item-r) * -1)
    )
    scale(1);
}

/* Flache Icons auf dem Rad — schlägt auch die Dark-Theme-Bubble-Regel */
.od .od__link,
.od[data-od-theme="dark"] .od__link {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

@media (prefers-color-scheme: dark) {
  .od[data-od-theme="auto"] .od__link {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }
}

/* Highlight: gefüllte Akzentfläche hinter dem Icon (wie App-Launcher) */
.od .od__link:hover,
.od .od__link:focus-visible,
.od .od__link:active,
.od[data-od-theme="dark"] .od__link:hover,
.od[data-od-theme="dark"] .od__link:focus-visible,
.od[data-od-theme="dark"] .od__link:active {
  background: var(--od-accent);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--od-accent) 45%, transparent);
  transform: scale(1.08);
}

/* Hub bei offenem Rad: liegt AUF dem geblurten Donut — eigener
   backdrop-filter ist unnötig und triggert auf iOS Safari einen
   versetzt gerenderten Filter-Patch (der "Blob"). */
.od--open .od__toggle,
html.od-refract .od--open .od__toggle {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 45%),
    var(--od-glass-bg-strong);
}

/* ================================================================== */
/* v1.3.2 — Highlight als Tortenstück-Segment im Ring (ClickWheel)    */
/* ================================================================== */

.od {
  --od-seg-n: 6;
  --od-seg-rot: 0deg;
  --od-seg-half: calc(180deg / var(--od-seg-n));
}

.od__seg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--od-disc);
  height: var(--od-disc);
  margin: calc(var(--od-disc) / -2) 0 0 calc(var(--od-disc) / -2);
  border-radius: 50%;
  /* Tortenstück um 12 Uhr, per Rotation zum aktiven Icon gedreht */
  background: conic-gradient(
    from calc(-1 * var(--od-seg-half)),
    var(--od-accent) 0deg,
    var(--od-accent) calc(var(--od-seg-half) * 2 - 1.5deg),
    transparent calc(var(--od-seg-half) * 2)
  );
  /* Gleiche Donut-Maske wie die Scheibe */
  -webkit-mask: radial-gradient(circle at center, transparent calc(var(--od-hole) - 1px), #000 var(--od-hole));
  mask: radial-gradient(circle at center, transparent calc(var(--od-hole) - 1px), #000 var(--od-hole));
  opacity: 0;
  transform: rotate(var(--od-seg-rot));
  transition:
    transform 0.4s cubic-bezier(0.34, 1.3, 0.4, 1),
    opacity 0.2s ease;
  pointer-events: none;
}

.od--open.od--seg-on .od__seg {
  opacity: 0.92;
}

/* Icon auf dem Segment: keine eigene Kreisfläche mehr, nur weiß + Pop */
.od .od__link:hover,
.od .od__link:focus-visible,
.od .od__link:active,
.od[data-od-theme="dark"] .od__link:hover,
.od[data-od-theme="dark"] .od__link:focus-visible,
.od[data-od-theme="dark"] .od__link:active {
  background: transparent;
  box-shadow: none;
  color: #fff;
  transform: scale(1.12);
}

.od .od__link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .od__seg {
    transition-duration: 0.01ms !important;
  }
}

/* ================================================================== */
/* v1.4.0 — Optionale ClickWheel-Bedienung (Smartphone)               */
/* ================================================================== */

/* Rotations-Offset des Rads fließt in die Winkelberechnung ein,
   die Icons selbst bleiben dabei aufrecht */
.od[data-od-mode="full"].od--open .od__item {
  --od-angle: calc(90deg - (360deg / var(--od-n)) * var(--od-i) + var(--od-wheel-rot, 0deg));
}

/* Während der Drehgeste keine Item-Transitions (folgt dem Finger 1:1) */
.od--dragging .od__item {
  transition: none !important;
}

.od--dragging .od__seg {
  transition: opacity 0.2s ease !important;
}

/* Geste auf dem offenen Rad gehört dem Rad, nicht der Seite */
.od[data-od-wheel="1"].od--open {
  touch-action: none;
}

/* Selektiertes Item (oberste Position): Label dauerhaft sichtbar */
.od__item--sel .od__label {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.od__item--sel .od__link {
  color: #fff;
}

/* ================================================================== */
/* v1.4.1 — Layer-UI nach shadcn/ui-Designsprache                     */
/* (Geometrie, Borders, Focus-Rings, Muted-Töne; Glass-Shell und      */
/* Theme-Schrift bleiben unverändert)                                  */
/* ================================================================== */

.od-layer {
  /* shadcn-Tokens, auf die OD-Themes gemappt */
  --od-ui-radius: 8px;                    /* --radius: 0.5rem */
  --od-ui-radius-md: 6px;                 /* rounded-md */
  --od-ui-border: rgba(22, 28, 47, 0.16); /* border-input */
  --od-ui-ring: var(--od-accent);
  --od-ui-muted: rgba(22, 28, 47, 0.55);  /* muted-foreground */
  --od-ui-destructive: #e5484d;
}

.od-layer[data-od-theme="dark"] {
  --od-ui-border: rgba(255, 255, 255, 0.16);
  --od-ui-muted: rgba(212, 215, 209, 0.6);
}

@media (prefers-color-scheme: dark) {
  .od-layer[data-od-theme="auto"] {
    --od-ui-border: rgba(255, 255, 255, 0.16);
    --od-ui-muted: rgba(212, 215, 209, 0.6);
  }
}

/* Label: text-sm font-medium leading-none */
.od-layer .od-field__label {
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 8px;
}

.od-layer .od-field__label--required {
  font-weight: 600;
}

.od-layer .od-field__optional {
  font-weight: 400;
  color: var(--od-ui-muted);
}

/* Input / Select / Textarea: border-input, bg-transparent, shadow-xs,
   focus-visible ring-[3px] */
.od-layer .od-field input,
.od-layer .od-field select,
.od-layer .od-field textarea {
  height: 40px;
  padding: 8px 12px;
  font-size: 16px;
  border: 1px solid var(--od-ui-border);
  border-radius: var(--od-ui-radius-md);
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 1px 2px rgba(10, 15, 30, 0.05);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.od-layer .od-field textarea {
  height: auto;
  min-height: 110px;
  padding: 10px 12px;
}

.od-layer .od-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 34px;
}

.od-layer .od-field input::placeholder,
.od-layer .od-field textarea::placeholder {
  color: var(--od-ui-muted);
  -webkit-text-fill-color: var(--od-ui-muted);
}

/* Eingabetext immer in der normalen Textfarbe des Layers, auch bei Fokus.
   !important und text-fill-color schirmen gegen Theme-Regeln ab, die
   Formularfeldern eine eigene (zu kontrastarme) Farbe geben. */
.od-layer .od-field input,
.od-layer .od-field select,
.od-layer .od-field textarea,
.od-layer .od-field input:focus,
.od-layer .od-field select:focus,
.od-layer .od-field textarea:focus {
  color: var(--od-ink) !important;
  -webkit-text-fill-color: var(--od-ink);
  caret-color: var(--od-ink);
}

.od-layer .od-field input:focus-visible,
.od-layer .od-field select:focus-visible,
.od-layer .od-field textarea:focus-visible {
  outline: none;
  border-color: var(--od-ui-ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--od-ui-ring) 50%, transparent);
}

/* Invalid nach Interaktion: destructive ring */
.od-layer .od-field input:user-invalid,
.od-layer .od-field select:user-invalid,
.od-layer .od-field textarea:user-invalid {
  border-color: var(--od-ui-destructive);
}

/* Button: default-Variante — bg-primary, rounded-md, h-10, font-medium */
.od-layer .od-btn {
  height: 44px;
  padding: 0 20px;
  font-size: 15px;
  font-weight: 500;
  border: none;
  border-radius: var(--od-ui-radius-md);
  background: var(--od-accent);
  color: #fff;
  box-shadow: 0 1px 2px rgba(10, 15, 30, 0.1);
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.od-layer .od-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--od-accent) 90%, #000);
  transform: none;
}

.od-layer .od-btn:active:not(:disabled) {
  transform: scale(0.98);
}

.od-layer .od-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--od-ui-ring) 50%, transparent);
}

.od-layer .od-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Note: text-sm, muted; Fehler destructive */
.od-layer .od-layer__note {
  font-size: 14px;
  color: var(--od-ui-muted);
}

.od-layer .od-layer__note--error {
  color: var(--od-ui-destructive);
  font-weight: 500;
}

/* Feld-Abstände wie shadcn-Formulare (gap-Statt-Margin-Gefühl) */
.od-layer .od-field {
  margin-bottom: 16px;
}

@media (min-width: 560px) {
  .od-layer .od-field input,
  .od-layer .od-field select {
    font-size: 14px; /* text-sm ab Desktop; mobil 16px gegen iOS-Zoom */
    height: 36px;    /* h-9 */
  }

  .od-layer .od-field textarea {
    font-size: 20px;
  }

  .od-layer .od-btn {
    width: 100%;
    height: 56px;
    font-size: 20px;
  }
}

/* ================================================================== */
/* v1.4.2 — Selektion statt :hover: Farbe, Label und Vergrößerung     */
/* hängen am JS-Zustand (fixt Sticky-Hover auf Touch), Dwell-Anim.    */
/* ================================================================== */

/* :hover/:focus färben nicht mehr selbst — das erledigt die Selektion */
.od .od__link:hover,
.od .od__link:focus-visible,
.od .od__link:active,
.od[data-od-theme="dark"] .od__link:hover,
.od[data-od-theme="dark"] .od__link:focus-visible,
.od[data-od-theme="dark"] .od__link:active {
  color: var(--od-ink);
  transform: none;
}

/* Label nur bei aktiver Selektion (nicht mehr an :hover gekoppelt) */
.od__item--sel .od__label,
.od__link:hover .od__label,
.od__link:focus-visible .od__label {
  opacity: 0;
  transform: translateX(-50%) translateY(4px);
}

.od--seg-on .od__item--sel .od__label {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Selektiertes Icon: weiß und weich vergrößert (auch beim Drehen) */
.od__link {
  transition:
    transform 0.35s cubic-bezier(0.34, 1.3, 0.4, 1),
    color 0.2s ease;
}

.od--seg-on .od__item--sel .od__link,
.od[data-od-theme="dark"].od--seg-on .od__item--sel .od__link {
  color: #fff;
  transform: scale(1.28);
}

/* Dwell (ClickWheel): Icon wächst während der Aktivierungs-Wartezeit
   langsam weiter — sichtbarer Countdown bis zur Auslösung */
.od--arming.od--seg-on .od__item--sel .od__link {
  transform: scale(1.5);
  transition: transform 1.1s linear, color 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .od--seg-on .od__item--sel .od__link,
  .od--arming.od--seg-on .od__item--sel .od__link {
    transition-duration: 0.01ms !important;
  }
}

/* ================================================================== */
/* v1.5.0 — Layer-UI-Stil "Material Design 3" (Backend wählbar,      */
/* Standard bleibt shadcn/ui; Glass-Shell unverändert)                */
/* ================================================================== */

.od-layer[data-od-ui="md3"] {
  --od-md3-field-bg: rgba(22, 28, 47, 0.07);
  --od-md3-underline: rgba(22, 28, 47, 0.45);
  --od-md3-label: rgba(22, 28, 47, 0.65);
}

.od-layer[data-od-ui="md3"][data-od-theme="dark"] {
  --od-md3-field-bg: rgba(255, 255, 255, 0.09);
  --od-md3-underline: rgba(255, 255, 255, 0.5);
  --od-md3-label: rgba(212, 215, 209, 0.7);
}

@media (prefers-color-scheme: dark) {
  .od-layer[data-od-ui="md3"][data-od-theme="auto"] {
    --od-md3-field-bg: rgba(255, 255, 255, 0.09);
    --od-md3-underline: rgba(255, 255, 255, 0.5);
    --od-md3-label: rgba(212, 215, 209, 0.7);
  }
}

/* Filled-Textfields: Label wandert in das Feld */
.od-layer[data-od-ui="md3"] .od-field {
  position: relative;
  margin-bottom: 18px;
}

.od-layer[data-od-ui="md3"] .od-field__label {
  position: absolute;
  top: 7px;
  left: 16px;
  z-index: 1;
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  color: var(--od-md3-label);
  pointer-events: none;
}

.od-layer[data-od-ui="md3"] .od-field__label--required {
  font-weight: 500;
}

.od-layer[data-od-ui="md3"] .od-field__optional {
  font-size: 1em;
  color: inherit;
}

.od-layer[data-od-ui="md3"] .od-field input,
.od-layer[data-od-ui="md3"] .od-field select,
.od-layer[data-od-ui="md3"] .od-field textarea {
  height: 56px;
  padding: 24px 16px 8px;
  font-size: 16px;
  background: var(--od-md3-field-bg);
  border: none;
  border-bottom: 1px solid var(--od-md3-underline);
  border-radius: 4px 4px 0 0;
  box-shadow: none;
}

.od-layer[data-od-ui="md3"] .od-field textarea {
  height: auto;
  min-height: 120px;
  padding-top: 26px;
}

.od-layer[data-od-ui="md3"] .od-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='%23888888'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 44px;
}

.od-layer[data-od-ui="md3"] .od-field input:focus-visible,
.od-layer[data-od-ui="md3"] .od-field select:focus-visible,
.od-layer[data-od-ui="md3"] .od-field textarea:focus-visible {
  outline: none;
  border-bottom: 2px solid var(--od-accent);
  padding-bottom: 7px;
  box-shadow: none;
}

.od-layer[data-od-ui="md3"] .od-field input:user-invalid,
.od-layer[data-od-ui="md3"] .od-field select:user-invalid,
.od-layer[data-od-ui="md3"] .od-field textarea:user-invalid {
  border-bottom-color: var(--od-ui-destructive);
}

/* Filled-Button als Pill mit Elevation */
.od-layer[data-od-ui="md3"] .od-btn {
  height: 44px;
  padding: 0 24px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.1px;
  border: none;
  border-radius: 999px;
  background: var(--od-accent);
  color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.15);
}

.od-layer[data-od-ui="md3"] .od-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--od-accent) 92%, #fff);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.15);
}

.od-layer[data-od-ui="md3"] .od-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--od-accent) 45%, transparent);
}

@media (min-width: 560px) {
  .od-layer[data-od-ui="md3"] .od-field input,
  .od-layer[data-od-ui="md3"] .od-field select {
    height: 52px;
    font-size: 15px;
  }

  .od-layer[data-od-ui="md3"] .od-btn {
    width: 100%;
    height: 56px;
    font-size: 20px;
  }
}

/* ================================================================== */
/* v1.5.1 — Keine Schatten hinter Buttons, WCAG-AA-Kontraste          */
/* ================================================================== */

/* Buttons ohne Schatten (Fokus-Ring bleibt eigenständig erhalten) */
.od-layer .od-btn,
.od-layer[data-od-ui="md3"] .od-btn {
  box-shadow: none;
}

.od-layer .od-btn:hover:not(:disabled),
.od-layer[data-od-ui="md3"] .od-btn:hover:not(:disabled) {
  box-shadow: none;
}

.od-layer .od-btn:focus-visible,
.od-layer[data-od-ui="md3"] .od-btn:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--od-accent) 50%, transparent);
}

/* Text/Icon auf Akzentflächen: automatisch berechnete Kontrastfarbe
   (Weiß nur, wenn die Akzentfarbe 4.5:1 hergibt, sonst dunkle Ink) */
.od-layer .od-btn,
.od-layer[data-od-ui="md3"] .od-btn {
  color: var(--od-on-accent, #161c2f);
}

.od--seg-on .od__item--sel .od__link,
.od[data-od-theme="dark"].od--seg-on .od__item--sel .od__link {
  color: var(--od-on-accent, #161c2f);
}

.od .od__link:focus-visible {
  outline-color: var(--od-on-accent, #161c2f);
}

/* Segment voll deckend, damit der berechnete Kontrast verlässlich gilt */
.od--open.od--seg-on .od__seg {
  opacity: 1;
}

/* Muted-Töne auf AA angehoben */
.od-layer {
  --od-ui-muted: rgba(22, 28, 47, 0.72);
  --od-ui-border: rgba(22, 28, 47, 0.35);
}

.od-layer[data-od-theme="dark"] {
  --od-ui-muted: rgba(212, 215, 209, 0.78);
  --od-ui-border: rgba(255, 255, 255, 0.35);
}

@media (prefers-color-scheme: dark) {
  .od-layer[data-od-theme="auto"] {
    --od-ui-muted: rgba(212, 215, 209, 0.78);
    --od-ui-border: rgba(255, 255, 255, 0.35);
  }
}

.od-layer[data-od-ui="md3"] {
  --od-md3-label: rgba(22, 28, 47, 0.76);
  --od-md3-underline: rgba(22, 28, 47, 0.55);
}

.od-layer[data-od-ui="md3"][data-od-theme="dark"] {
  --od-md3-label: rgba(212, 215, 209, 0.8);
  --od-md3-underline: rgba(255, 255, 255, 0.6);
}

@media (prefers-color-scheme: dark) {
  .od-layer[data-od-ui="md3"][data-od-theme="auto"] {
    --od-md3-label: rgba(212, 215, 209, 0.8);
    --od-md3-underline: rgba(255, 255, 255, 0.6);
  }
}

/* Tooltip-Label am Rad: ebenfalls AA-fester Text */
.od__label {
  font-weight: 500;
}

/* ================================================================== */
/* v1.6.0 — Reduzierter Modus: nur Platzhalter, barrierefrei          */
/* Labels bleiben für Screenreader im DOM; gefüllte Felder blenden    */
/* ein Mikro-Label ein, damit die Beschriftung nicht verloren geht.   */
/* ================================================================== */

.od-layer[data-od-labels="placeholders"] .od-field {
  position: relative;
}

/* Label visuell versteckt, aber zugänglich (sr-only) */
.od-layer[data-od-labels="placeholders"] .od-field:not(.od-field--static) .od-field__label {
  position: absolute;
  top: -8px;
  left: 10px;
  z-index: 2;
  margin: 0;
  padding: 2px 8px;
  font-size: 12px;
  line-height: 1.2;
  border-radius: 999px;
  background: var(--od-label-bg);
  border: 1px solid var(--od-glass-border);
  color: var(--od-ink);
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.3, 0.4, 1);
  /* Für Screenreader bleibt das Label auch unsichtbar erreichbar,
     opacity versteckt es nicht vor Assistenztechnik. */
}

/* Sobald das Feld Inhalt hat: Mikro-Label einblenden */
.od-layer[data-od-labels="placeholders"] .od-field:not(.od-field--static):has(input:not(:placeholder-shown)) .od-field__label,
.od-layer[data-od-labels="placeholders"] .od-field:not(.od-field--static):has(textarea:not(:placeholder-shown)) .od-field__label {
  opacity: 1;
  transform: translateY(0);
}

/* Select und Kalender kennen keine Platzhalter: festes Mini-Label */
.od-layer[data-od-labels="placeholders"] .od-field--static .od-field__label {
  font-size: 12px;
  margin-bottom: 6px;
}

/* Platzhalter tragen die Beschriftung: AA-fester Kontrast */
.od-layer[data-od-labels="placeholders"] .od-field input::placeholder,
.od-layer[data-od-labels="placeholders"] .od-field textarea::placeholder {
  color: var(--od-ui-muted);
  opacity: 1;
}

/* MD3 + reduziert: Label nutzt seine In-Feld-Position, Feld kompakter */
.od-layer[data-od-ui="md3"][data-od-labels="placeholders"] .od-field:not(.od-field--static) .od-field__label {
  top: 7px;
  left: 16px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--od-md3-label);
}

.od-layer[data-od-ui="md3"][data-od-labels="placeholders"] .od-field:not(.od-field--static):not(:has(input:not(:placeholder-shown))):not(:has(textarea:not(:placeholder-shown))) input,
.od-layer[data-od-ui="md3"][data-od-labels="placeholders"] .od-field:not(.od-field--static):not(:has(textarea:not(:placeholder-shown))):not(:has(input:not(:placeholder-shown))) textarea {
  padding-top: 8px;
  height: 48px;
}

.od-layer[data-od-ui="md3"][data-od-labels="placeholders"] .od-field textarea {
  height: auto;
}

@media (prefers-reduced-motion: reduce) {
  .od-layer[data-od-labels="placeholders"] .od-field__label {
    transition-duration: 0.01ms !important;
  }
}

/* ================================================================== */
/* v1.6.1 — Schließ-Choreografie: erst die Icons, dann die Scheibe    */
/* ================================================================== */

/* Basiszustand = Schließrichtung: Icons sofort und zügig ausblenden,
   ohne Stagger, leicht nach innen gezogen */
.od__item {
  transition:
    transform 0.28s cubic-bezier(0.4, 0, 0.6, 1),
    opacity 0.2s ease;
  transition-delay: 0ms;
}

/* Öffnungsrichtung behält Spring-Easing und Stagger */
.od--open .od__item {
  transition:
    transform 0.55s cubic-bezier(0.34, 1.3, 0.4, 1),
    opacity 0.3s ease;
  transition-delay: calc(60ms + var(--od-i) * 24ms);
}

/* Scheibe wartet beim Schließen kurz, bis die Icons weg sind */
.od__disc {
  transition:
    transform 0.45s cubic-bezier(0.4, 0, 0.6, 1) 140ms,
    opacity 0.3s ease 140ms;
}

.od--open .od__disc {
  transition:
    transform 0.6s cubic-bezier(0.34, 1.3, 0.4, 1),
    opacity 0.3s ease;
  transition-delay: 0ms;
}

/* Auch der Vollkreis-Lift des Containers folgt erst nach den Icons */
.od[data-od-mode="full"] {
  transition-delay: 120ms;
}

.od[data-od-mode="full"].od--open {
  transition-delay: 0ms;
}

@media (prefers-reduced-motion: reduce) {
  .od__item,
  .od--open .od__item,
  .od__disc,
  .od--open .od__disc,
  .od[data-od-mode="full"] {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}

/* ================================================================== */
/* v1.6.2 — Stacking: Tooltip immer oben, OC immer oberste Ebene      */
/* ================================================================== */

/* OC über allem auf der Website (Layer nochmal darüber) */
:root {
  --od-z: 2147483600;
}

/* Ring-Items stapeln sonst in DOM-Reihenfolge — das aktive Item
   (Hover, Fokus, Selektion) hebt sich samt Tooltip über die Nachbarn */
.od__item {
  z-index: 1;
}

.od__item:hover,
.od__item:focus-within,
.od__item--sel {
  z-index: 10;
}

/* Tooltip zusätzlich über allem im Rad (auch über dem Hub) */
.od__label {
  z-index: 20;
}

/* ================================================================== */
/* v1.6.3 — Exakte Zentrierung: Senden-Button-Text und Schließen-X    */
/* (Theme-line-height aus font:inherit rutschte den Inhalt nach unten) */
/* ================================================================== */

.od-layer .od-btn,
.od-layer[data-od-ui="md3"] .od-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding-top: 0;
  padding-bottom: 0;
}

.od-layer__close {
  padding: 0;
  line-height: 1;
}

.od-layer__close span {
  display: block;
  line-height: 1;
  font-size: 20px;
  /* optischer Ausgleich: das × sitzt in den meisten Fonts minimal tief */
  transform: translateY(-1px);
}

/* Hub-X und Rad-Icons ebenfalls gegen Theme-line-height absichern */
.od__toggle,
.od__link {
  line-height: 1;
}

/* ================================================================== */
/* v1.7.2 — Blur-Hof als Element im Rad-Container statt Fullscreen-   */
/* Scrim: sitzt damit auch bei Theme-Transforms exakt hinterm Rad     */
/* ================================================================== */

/* Scrim aus altem, gecachtem Markup stilllegen */
.od-scrim {
  display: none !important;
}

.od__halo {
  --od-halo-d: calc(var(--od-disc) + 340px);
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--od-halo-d);
  height: var(--od-halo-d);
  margin: calc(var(--od-halo-d) / -2) 0 0 calc(var(--od-halo-d) / -2);
  border-radius: 50%;
  background: rgba(10, 14, 26, 0.1);
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
  backdrop-filter: blur(20px) saturate(1.15);
  /* Voll hinterm Rad, dann weich auslaufend bis zum Elementrand */
  -webkit-mask: radial-gradient(
    circle at center,
    #000 calc(var(--od-disc) / 2 + 20px),
    rgba(0, 0, 0, 0.55) calc(var(--od-disc) / 2 + 110px),
    transparent calc(var(--od-halo-d) / 2)
  );
  mask: radial-gradient(
    circle at center,
    #000 calc(var(--od-disc) / 2 + 20px),
    rgba(0, 0, 0, 0.55) calc(var(--od-disc) / 2 + 110px),
    transparent calc(var(--od-halo-d) / 2)
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease 100ms;
}

.od--open .od__halo {
  opacity: 1;
  transition-delay: 0ms;
}

@media (prefers-reduced-motion: reduce) {
  .od__halo {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}

/* ================================================================== */
/* v1.8.0 — Puls, CTA-Pill beim ersten Besuch, Scroll-Progress-Ring,  */
/* halbierte Dwell-Zeit                                                */
/* ================================================================== */

/* Dwell auf 0,55s halbiert */
.od--arming.od--seg-on .od__item--sel .od__link {
  transition: transform 0.55s linear, color 0.2s ease;
}

/* --- Sanfter Puls im geschlossenen Zustand --- */
@keyframes od-pulse {
  0%   { transform: scale(1.08); opacity: 0.4; }
  70%  { transform: scale(1.4); opacity: 0; }
  100% { transform: scale(1.4); opacity: 0; }
}

.od__toggle::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 1.5px solid var(--od-accent);
  opacity: 0;
  pointer-events: none;
}

.od--in:not(.od--open):not(.od--suppressed) .od__toggle::after {
  animation: od-pulse 3.2s cubic-bezier(0.4, 0, 0.4, 1) infinite;
}

/* --- CTA-Pill beim ersten Besuch --- */
.od__cta {
  display: none;
  font-size: var(--od-cta-size, 15px);
  font-weight: var(--od-cta-weight, 600);
  line-height: 1;
  white-space: nowrap;
  color: var(--od-ink);
}

.od--cta .od__toggle {
  width: auto;
  min-width: var(--od-size);
  padding: 0 24px;
  border-radius: 999px;
}

.od--cta .od__cta {
  display: block;
}

.od--cta .od__dots {
  display: none;
}

/* Pill zentriert wie die Bubble: Nav bleibt bottom-center verankert */
.od--cta .od__ring,
.od--cta .od__disc,
.od--cta .od__halo,
.od--cta .od__seg {
  display: none;
}

/* --- Scroll-Progress-Ring in Akzentfarbe --- */
.od__progress {
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  background: conic-gradient(
    var(--od-accent) var(--od-scroll-deg, 0deg),
    color-mix(in srgb, var(--od-accent) 18%, transparent) 0deg
  );
  /* 3px-Ring per Donut-Maske */
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  mask: radial-gradient(closest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  opacity: 1;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

/* Bei offenem Rad ausblenden, im CTA-Zustand komplett raus
   (die Ring-Maske erzeugt auf der Pill-Form Artefakte) */
.od--open .od__progress {
  opacity: 0;
}

.od--cta .od__progress {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .od--in:not(.od--open):not(.od--suppressed) .od__toggle::after {
    animation: none;
  }
}

/* ================================================================== */
/* v1.10.0 — MD3-Skin für das gesamte Rad (OS-Weiche: Android/Chrome  */
/* OS). Tonale, solide Flächen mit Elevation statt Liquid Glass.      */
/* ================================================================== */

.od[data-od-skin="md3"] {
  --od-md3-surface: #ece9f1;        /* surface-container */
  --od-md3-surface-high: #f6f4fa;   /* surface-container-high (Hub) */
  --od-md3-outline: rgba(22, 28, 47, 0.12);
}

.od[data-od-skin="md3"][data-od-theme="dark"] {
  --od-md3-surface: #2a2a33;
  --od-md3-surface-high: #383842;
  --od-md3-outline: rgba(255, 255, 255, 0.12);
}

@media (prefers-color-scheme: dark) {
  .od[data-od-skin="md3"][data-od-theme="auto"] {
    --od-md3-surface: #2a2a33;
    --od-md3-surface-high: #383842;
    --od-md3-outline: rgba(255, 255, 255, 0.12);
  }
}

/* Scheibe: solide tonale Fläche, MD3-Elevation, kein Glas */
.od[data-od-skin="md3"] .od__disc {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.2);
}

.od[data-od-skin="md3"] .od__disc::before {
  background: var(--od-md3-surface);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: none;
  box-shadow: none;
}

.od[data-od-skin="md3"] .od__disc::after {
  border-color: var(--od-md3-outline);
  box-shadow: none;
}

/* Kein Blur-Hof — MD3 arbeitet mit Elevation statt Materialtiefe */
.od[data-od-skin="md3"] .od__halo {
  display: none;
}

/* Hub: solide surface-high, kleiner Elevation-Schatten */
.od[data-od-skin="md3"] .od__toggle {
  background: var(--od-md3-surface-high);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.od[data-od-skin="md3"] .od__toggle::before {
  display: none; /* kein Specular-Glanz */
}

.od[data-od-skin="md3"].od--open .od__toggle {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

html.od-refract .od[data-od-skin="md3"] .od__disc::before,
html.od-refract .od[data-od-skin="md3"] .od__toggle {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Tooltips: solide MD3-Plain-Tooltips */
.od[data-od-skin="md3"] .od__label {
  background: var(--od-md3-surface-high);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-color: var(--od-md3-outline);
}

/* CTA-Pill als solide Extended-FAB-Fläche */
.od[data-od-skin="md3"].od--cta .od__toggle {
  background: var(--od-md3-surface-high);
}

/* ================================================================== */
/* v1.11.0 — CTA-Typografie: direkter Schriftschnitt + Letterspacing  */
/* ================================================================== */

.od__cta {
  font-family: var(--od-cta-font, inherit);
  letter-spacing: var(--od-cta-lsp, 0px);
}

/* ================================================================== */
/* v1.11.2 — Saubere Buttonkante: kein Hintergrund-Bleed unter der    */
/* halbtransparenten Border                                            */
/* ================================================================== */

.od__toggle {
  background-clip: padding-box;
}

/* ================================================================== */
/* v1.11.3 — iOS-Fix: Halo läuft am unteren Viewport-Rand weich aus   */
/* (iOS rendert backdrop-filter nur im Viewport — der Überhang des    */
/* Halo-Kreises erzeugte dort eine harte Abschnittkante)              */
/* ================================================================== */

.od__halo {
  /* Wie weit der Halo im geöffneten Zustand unter die Unterkante ragt */
  --od-halo-overflow: max(0px, calc(
    var(--od-halo-d) / 2
    - (var(--od-bottom, 18px) + var(--od-size) / 2
       + var(--od-radius) + var(--od-item-size) / 2 + 26px)
  ));
  -webkit-mask-image:
    radial-gradient(
      circle at center,
      #000 calc(var(--od-disc) / 2 + 20px),
      rgba(0, 0, 0, 0.55) calc(var(--od-disc) / 2 + 110px),
      transparent calc(var(--od-halo-d) / 2)
    ),
    linear-gradient(
      to top,
      transparent 0,
      transparent var(--od-halo-overflow),
      #000 calc(var(--od-halo-overflow) + 90px)
    );
  mask-image:
    radial-gradient(
      circle at center,
      #000 calc(var(--od-disc) / 2 + 20px),
      rgba(0, 0, 0, 0.55) calc(var(--od-disc) / 2 + 110px),
      transparent calc(var(--od-halo-d) / 2)
    ),
    linear-gradient(
      to top,
      transparent 0,
      transparent var(--od-halo-overflow),
      #000 calc(var(--od-halo-overflow) + 90px)
    );
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* ================================================================== */
/* v1.12.0 — Layer-Feinschliff: halber Abstand vor dem Senden-Button, */
/* Schließen-X als SVG exakt zentriert, CTA-Schrift auch im Layer     */
/* ================================================================== */

/* Inline-Descender-Spalt unter Textarea/Input entfernen */
.od-layer .od-field input,
.od-layer .od-field select,
.od-layer .od-field textarea {
  display: block;
}

/* Abstand Feld → Senden-Button halbieren (vorher 16px + 4px + Spalt) */
.od-layer .od-field:has(+ .od-layer__actions) {
  margin-bottom: 6px;
}

.od-layer .od-layer__actions {
  margin-top: 4px;
}

/* Fallback ohne :has(): im Messenger-Formular gibt es nur ein Feld */
#od-messenger-form .od-field {
  margin-bottom: 6px;
}

/* Schließen-X: SVG statt Font-Glyphe — sitzt in jedem Theme-Font
   exakt mittig, kein optischer Ausgleich mehr nötig */
.od-layer__close svg {
  display: block;
  width: 14px;
  height: 14px;
}

.od-layer__close span {
  transform: none;
}

/* CTA-Schriftschnitt und -Letterspacing gelten auch für die
   Layer-Headline und den Senden-Button */
.od-layer__title,
.od-layer .od-btn,
.od-layer[data-od-ui="md3"] .od-btn {
  font-family: var(--od-cta-font, inherit);
  letter-spacing: var(--od-cta-lsp, 0px);
}

/* ================================================================== */
/* v2.1.0 — Bubble-Icon (Menü-Balken/-Switcher) statt der drei Punkte */
/* + globaler Icon-Stil (outline/fill, serverseitig gerendert)        */
/* ================================================================== */

/* Das Icon liegt zentriert über den Dots; die Dots bleiben im Markup
   und liefern beim Öffnen weiterhin den X-Morph. */
.od__bicon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  display: block;
  color: currentColor;
  transition:
    opacity 0.3s ease,
    transform 0.4s cubic-bezier(0.34, 1.3, 0.4, 1);
}

.od__bicon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Geschlossen: Icon sichtbar, Dots unsichtbar (Bubble-Icon-Variante) */
.od[data-od-bicon="menu-bars"]:not(.od--open) .od__dots i,
.od[data-od-bicon="menu-switcher"]:not(.od--open) .od__dots i,
.od[data-od-bicon="onlion-dot"]:not(.od--open) .od__dots i {
  opacity: 0;
}

/* Offen: X-Morph übernimmt, Icon dreht sich weich heraus */
.od--open .od__bicon {
  opacity: 0;
  transform: scale(0.5) rotate(90deg);
  pointer-events: none;
}

/* CTA-Pill zeigt nur den Text */
.od--cta .od__bicon {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .od__bicon {
    transition-duration: 0.01ms;
  }
}