/* Zigarren-Wichteln: Menüeintrag in der Navigationsleiste
   Dezenter Eye-Catcher: wackelndes Geschenk-Icon und pulsierendes Badge.
   Die Animation läuft nur einige Male und pausiert dann, damit sie nicht nervt. */

.navbar-default .navbar-nav > li.wichteln-menu > a {
	color: #c62828;
	font-weight: bold;
}

.navbar-default .navbar-nav > li.wichteln-menu > a:hover,
.navbar-default .navbar-nav > li.wichteln-menu > a:focus {
	color: #8e0000;
	background-color: #fdecea;
}

.wichteln-icon {
	display: inline-block;
	margin-right: 3px;
	transform-origin: 50% 90%;
	animation: wichteln-wackeln 4s ease-in-out 0.5s 5;
}

.wichteln-menu a:hover .wichteln-icon {
	animation: wichteln-wackeln 1s ease-in-out infinite;
}

.label.wichteln-badge {
	background-color: #c62828;
	color: #fff;
	margin-left: 4px;
	font-size: 70%;
	vertical-align: middle;
	animation: wichteln-puls 2s ease-out 0.5s 10;
}

/* Wackeln: kurze Bewegung, danach Ruhe bis zum nächsten Durchlauf */
@keyframes wichteln-wackeln {
	0%, 20%, 100% { transform: rotate(0deg); }
	4%  { transform: rotate(-14deg); }
	8%  { transform: rotate(12deg); }
	12% { transform: rotate(-8deg); }
	16% { transform: rotate(5deg); }
}

/* Puls: weicher Ring um das Badge */
@keyframes wichteln-puls {
	0%   { box-shadow: 0 0 0 0 rgba(198, 40, 40, 0.6); }
	70%  { box-shadow: 0 0 0 7px rgba(198, 40, 40, 0); }
	100% { box-shadow: 0 0 0 0 rgba(198, 40, 40, 0); }
}

/* Benutzer, die reduzierte Bewegung eingestellt haben, bekommen keine Animation */
@media (prefers-reduced-motion: reduce) {
	.wichteln-icon,
	.wichteln-menu a:hover .wichteln-icon,
	.label.wichteln-badge {
		animation: none;
	}
}