/* Floating Bar (top-left) – jitter-free hover via sibling selectors */
.floating-bar {
  position: fixed;
  top: 250px;       /* justierbar */
  left: 0;
  height: min(78vh, 560px);
  z-index: 1000;
  pointer-events: none; /* wrapper selbst nicht interaktiv */
}

/* Schmales Hover-Fenster entlang der linken Kante */
.floating-bar__hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;     /* Peek + Toleranz */
  height: 100%;
  pointer-events: auto;
}

/* Panel – faehrt nach rechts ein/aus */
.floating-bar__panel {
  --peek: 14px;         /* sichtbar im collapsed */
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;         /* Panelbreite */
  height: 100%;
  padding: 14px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 28px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25), 0 2px 0 rgba(255,255,255,.8) inset;
  transform: translateX(calc(-100% + var(--peek))); /* collapsed default */
  opacity: 0;
  transition: transform .45s cubic-bezier(.22,.61,.36,1), opacity .3s ease;
  pointer-events: auto;  /* interaktiv */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

/* Sichtbar */
.floating-bar--visible .floating-bar__panel {
  opacity: 1;
}

/* Beim automatischen Erscheinen voll ausfahren (mit Bounce) */
.floating-bar--expanded .floating-bar__panel {
  transform: translateX(0);
  animation: floatingBounceIn .55s cubic-bezier(.34,1.56,.64,1) both;
}

/* Nach Timeout zusammenklappen */
.floating-bar--collapsed .floating-bar__panel {
  transform: translateX(calc(-100% + var(--peek)));
  animation: none !important;
}

/* HOVER – entkoppelt von JS, kein Flackern */
.floating-bar__hover:hover ~ .floating-bar__panel,
.floating-bar__panel:hover {
  transform: translateX(0);
}

/* Bounce von links */
@keyframes floatingBounceIn {
  0%   { transform: translateX(-110%) rotate(-6deg); }
  70%  { transform: translateX(4%) rotate(1deg); }
  100% { transform: translateX(0) rotate(0deg); }
}

/* Groessere Icons */
.floating-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  transition: transform .15s ease;
}
.floating-link img { width: 48px; height: 48px; pointer-events: none; }
.floating-link:hover { transform: scale(1.05); }

/* Desktop only */
@media (max-width: 1050px) {
  .floating-bar { display: none; }
}

/* Snap-Collapse (ohne Transition) */
.floating-bar--snap .floating-bar__panel { transition: none !important; }

/* ensure icon swap stays smooth */
.floating-link::after{display:none !important;content:none !important;}
.floating-link img{transition:opacity 180ms ease;}