/* Container bleibt 80px breit, sitzt rechts */
#amd-sticky-bar{
  position: fixed !important;
  right: 100 !important;
  bottom: 20% !important;
  z-index: 1050 !important;
  width: 80px !important;
  overflow: visible !important; /* kann so bleiben */
}

#amd-sticky-bar ul.mod-sticky-menu{
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important; /* rechts ausrichten */
}

/* WICHTIG: li ist immer 250px breit, aber im Normalzustand nach rechts rausgeschoben */
#amd-sticky-bar ul.mod-sticky-menu > li{
  width: 250px !important;
  height: 80px !important;
  background: #1a1a1a !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.1) !important;
  overflow: hidden !important;

  transform: translateX(170px); /* 250-80=170 -> nur 80px (Icon) bleiben sichtbar */
  transition: transform .3s cubic-bezier(0.4,0,0.2,1), background-color .2s ease !important;
  will-change: transform;
}

/* Hover/Fokus: fährt rein */
#amd-sticky-bar ul.mod-sticky-menu > li:hover,
#amd-sticky-bar ul.mod-sticky-menu > li:focus-within{
  transform: translateX(0);
  background: #252525 !important;
}

/* Link nimmt komplette Breite */
#amd-sticky-bar ul.mod-sticky-menu > li > a{
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: row-reverse !important; /* Icon rechts */
  align-items: center !important;
  text-decoration: none !important;
}

/* Icon-Spalte fix 80 */
#amd-sticky-bar ul.mod-sticky-menu > li .icon{
  width: 80px !important;
  min-width: 80px !important;
  height: 80px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#amd-sticky-bar ul.mod-sticky-menu > li .title{
  flex: 1 !important;
  text-align: right !important;
  padding-right: 15px !important;
  color: #fff !important;
  opacity: 0 !important;
  white-space: nowrap !important;
  transition: opacity .15s ease !important;
}

#amd-sticky-bar ul.mod-sticky-menu > li:hover .title,
#amd-sticky-bar ul.mod-sticky-menu > li:focus-within .title{
  opacity: 1 !important;
}

/* Sonderfarben bleiben wie gehabt */
#amd-sticky-bar ul.mod-sticky-menu > li.bg-red-a { background-color: #d32f2f !important; }
#amd-sticky-bar ul.mod-sticky-menu > li.bg-red-a:hover,
#amd-sticky-bar ul.mod-sticky-menu > li.bg-red-a:focus-within { background-color: #b71c1c !important; }

#amd-sticky-bar ul.mod-sticky-menu > li.bg-green-a { background-color: #2e7d32 !important; }
#amd-sticky-bar ul.mod-sticky-menu > li.bg-green-a:hover,
#amd-sticky-bar ul.mod-sticky-menu > li.bg-green-a:focus-within { background-color: #1b5e20 !important; }