.stx-float{
  position: fixed;
  left: 50%;
  bottom: clamp(12px, 3vh, 28px);
  transform: translateX(-50%);
  z-index: 3;                 /* über Threads & Content */
  display: flex;
  gap: 12px;
  pointer-events: none;       /* nur Pills klickbar */
}
.stx-dd{ position: relative; pointer-events: auto; }

/* Transparente „Pill“ mit Blur */
.stx-pill{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--card) 45%, transparent);
  border: 1px solid color-mix(in oklab, var(--border) 75%, transparent);
  color: var(--text);
  backdrop-filter: blur(8px) saturate(1.1);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  cursor: pointer; user-select: none; text-decoration: none;
}
.stx-pill:hover{ background: color-mix(in oklab, var(--card) 62%, transparent); }
.stx-pill-label{ font-weight: 600; font-size: 14px; }

/* Mini-Status-Punkt für Theme */
.stx-pill-dot{ width: 10px; height: 10px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--border) 80%, transparent);
}
.stx-pill[data-mode="dark"]  .stx-pill-dot{ background:#0f172a; }
.stx-pill[data-mode="light"] .stx-pill-dot{ background:#ffffff; }

/* Dropdown-Menü */
.stx-menu{
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(100% + 8px);
  min-width: 200px;
  background: color-mix(in oklab, var(--card) 85%, transparent);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.35);
  display: none; z-index: 10;
}
.stx-dd.open .stx-menu{ display: block; }

.stx-menu button, .stx-menu a{
  display: block; width: 100%; text-align: left;
  background: transparent; border: 0; color: var(--text);
  padding: 8px 10px; border-radius: 8px;
  text-decoration: none; font-size: 14px; cursor: pointer;
}
.stx-menu button:hover, .stx-menu a:hover{
  background: color-mix(in oklab, var(--primary) 18%, transparent);
}
.stx-menu a.is-active{
  background: color-mix(in oklab, var(--primary) 28%, transparent);
}

@media (max-width: 480px){
  .stx-menu{ min-width: 160px; }
  .stx-pill-label{ font-size: 13px; }
}

/* Unten mittig schweben (über dem Band) */
.floating-controls{
  position: fixed;
  left: 50%;
  bottom: clamp(10px, 3vh, 28px);
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 3;
}

/* Trigger-Pills: feste Breite (IDs ODER Klasse) */
.floating-controls .pill,
.floating-controls #theme-switch,
.floating-controls #lang-switch{
  width: var(--pill-width, 220px) !important;
  box-sizing: border-box;
  text-align: center;
}

/* Dropdown-Menüs: exakt gleiche Breite wie die jeweilige Pill */
.floating-controls .pill-menu,
.floating-controls .dropdown-menu,
.floating-controls #theme-menu,
.floating-controls #lang-menu{
  width: var(--pill-width, 220px) !important;
  min-width: var(--pill-width, 220px) !important;
  max-width: var(--pill-width, 220px) !important;
  box-sizing: border-box;
}

/* Menü optional zentriert unter dem Trigger (wenn absolut positioniert) */
.floating-controls .pill-menu[data-align="center"],
.floating-controls .dropdown-menu[data-align="center"]{
  left: 50%;
  transform: translateX(-50%);
}

/* Fixe Breite für Pills unten mittig */
.stx-pill{
  width: var(--pill-width, 220px);
  justify-content: center;     /* Label zentrieren */
  text-align: center;
}

/* Menüs exakt gleich breit wie die jeweilige Pill */
.stx-menu{
  width: var(--pill-width, 220px) !important;
  min-width: var(--pill-width, 220px) !important;
  max-width: var(--pill-width, 220px) !important;
  box-sizing: border-box;
}