/* FX-Layer über der Seite */
.lvl-fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 9999; }

/* Eine Bubble */
.lvl-fx-bubble{
  position: absolute; width: 14px; height: 14px; border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, #84a9ff, #2575fc 60%, #6a11cb);
  filter: drop-shadow(0 2px 6px rgba(37,117,252,.45));
  opacity: .95; will-change: transform, opacity, background;
}

/* Nutzer wünscht weniger Bewegung -> FX aus */
@media (prefers-reduced-motion: reduce){
  .lvl-fx-layer { display: none !important; }
}








.menu-item-lvlbar{display:flex;align-items:center;margin-left:12px}
.lvlbar{display:flex;align-items:center;gap:10px}
.lvlbar--compact .lvlbar-badge{
  font-size:13px;font-weight:700;color:#5c1a4b;padding:4px 8px;border-radius:6px;
  background:linear-gradient(90deg,#f7e8ff,#efc8ff)
}
.lvlbar-points{display:flex;gap:6px;align-items:center;font-weight:600;font-size:13px}
.lvlbar-points-amount{font-size:13px}
.lvlbar-progress{width:140px;height:8px;margin:0;border-radius:999px;background:#e9e9ee;position:relative}
.lvlbar-progress-bar{height:100%;width:0;border-radius:999px;background:#4caf50;transition:width .5s}
.lvlbar-progress-text{font-size:11px;line-height:8px;position:absolute;top:-18px;left:50%;transform:translateX(-50%);color:#444}
@media (max-width:640px){ .lvlbar-progress{display:none} }

/* Brand + Levelbar nebeneinander */
.brand-with-level { display:flex; align-items:center; gap:12px; }
.site-branding { display:flex; align-items:center; gap:12px; } /* falls vorhanden */

/* Levelbar kompakt links vom Logo-Menü */
.lvlbar { display:flex; align-items:center; gap:10px; white-space:nowrap; }

/* Neue Badge: Pill mit Farb-Rahmen */
.lvlbar-badge{
  font-size:12px; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
  padding:3px 10px; border-radius:999px; background:#fff; line-height:1.2;
  border:2px solid transparent;
  background-image: linear-gradient(#fff,#fff), linear-gradient(90deg,#8a2be2,#ff4d9d);
  background-origin: border-box; background-clip: padding-box, border-box;
  box-shadow:0 1px 6px rgba(0,0,0,.06);
  min-width:72px; text-align:center; flex:0 0 auto;
}

/* Nur Balken (keine Punkte/Prozent) */
.lvlbar-points, .lvlbar-progress-text { display:none !important; }

/* Schlanker Progress */
.lvlbar-progress{
  width:180px; height:6px; margin:0; border-radius:999px; background:#f1f3f5; position:relative; flex:0 0 180px;
}
.lvlbar-progress-bar{
  height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg,#4caf50,#2e7d32);
  transition:width .5s ease-in-out;
}

/* Sehr schmal: nur Badge zeigen */
@media (max-width:640px){ .lvlbar-progress{ display:none; } }



















.lvl-fx-layer{position:fixed;inset:0;pointer-events:none;z-index:9999}
.lvl-fx-bubble{position:absolute;width:14px;height:14px;border-radius:999px;filter:drop-shadow(0 2px 6px rgba(37,117,252,.45));opacity:.95;will-change:transform,opacity,background}
@media (prefers-reduced-motion: reduce){.lvl-fx-layer{display:none!important}}