.notification-bell {
	--bell-alert-color: #e53935;

	display: block;
	width: var(--bell-size, 24px);
	height: var(--bell-size, 24px);
	/* Der Korpus schwingt um die Aufhängung, nicht um die Icon-Mitte. */
	transform-origin: 50% 8%;
	/* Der Klöppel tritt beim Ausschlag über die viewBox hinaus. */
	overflow: visible;
}

/* Ohne ungelesene Nachrichten: ruhige Kontur in Textfarbe. */
.notification-bell.is-idle {
	color: var(--app-font-color);
}

.notification-bell.is-idle .notification-bell-body {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.9;
	stroke-linejoin: round;
}

.notification-bell.is-idle .notification-bell-clapper {
	stroke: currentColor;
}

/* Mit ungelesenen Nachrichten: gefüllte Signalfläche, weißer Zähler. */
.notification-bell.is-ringing .notification-bell-body {
	fill: var(--bell-alert-color);
}

.notification-bell-clapper {
	fill: none;
	stroke: var(--bell-alert-color);
	stroke-width: 1.9;
	stroke-linecap: round;
	transform-box: view-box;
	transform-origin: 12px 20px;
}

.notification-bell-count {
	fill: #fff;
	font-family: var(--app-font-family);
	font-weight: 700;
	font-size: 9.5px;
	letter-spacing: -0.3px;
	text-anchor: middle;
	font-variant-numeric: tabular-nums;
	transform-box: view-box;
	transform-origin: 12px 10.5px;
	/* Die Zahl ist Teil des aria-labels; als Grafik doppelt sie sich sonst. */
	user-select: none;
}

.notification-bell-count.is-wide {
	font-size: 8px;
	letter-spacing: -0.6px;
}

.notification-bell-count.is-xwide {
	font-size: 6.6px;
	letter-spacing: -0.5px;
}

.notification-bell.is-ringing {
	animation: notification-bell-ring 3.6s ease-in-out infinite;
}

.notification-bell.is-ringing .notification-bell-clapper {
	animation: notification-bell-clapper 3.6s ease-in-out infinite;
}

/* Dreht die Ziffer gegen den Korpus zurück, damit sie aufrecht stehen bleibt. */
.notification-bell.is-ringing .notification-bell-count {
	animation: notification-bell-count 3.6s ease-in-out infinite;
}

@keyframes notification-bell-ring {
	0%,
	62%,
	100% {
		transform: rotate(0);
	}
	64% {
		transform: rotate(13deg);
	}
	67% {
		transform: rotate(-11deg);
	}
	70% {
		transform: rotate(8deg);
	}
	73% {
		transform: rotate(-6deg);
	}
	76% {
		transform: rotate(3.5deg);
	}
	79% {
		transform: rotate(-1.5deg);
	}
	82% {
		transform: rotate(0);
	}
}

@keyframes notification-bell-clapper {
	0%,
	62%,
	100% {
		transform: rotate(0);
	}
	65% {
		transform: rotate(-15deg);
	}
	69% {
		transform: rotate(12deg);
	}
	73% {
		transform: rotate(-8deg);
	}
	77% {
		transform: rotate(4deg);
	}
	82% {
		transform: rotate(0);
	}
}

@keyframes notification-bell-count {
	0%,
	62%,
	100% {
		transform: rotate(0);
	}
	64% {
		transform: rotate(-13deg);
	}
	67% {
		transform: rotate(11deg);
	}
	70% {
		transform: rotate(-8deg);
	}
	73% {
		transform: rotate(6deg);
	}
	76% {
		transform: rotate(-3.5deg);
	}
	79% {
		transform: rotate(1.5deg);
	}
	82% {
		transform: rotate(0);
	}
}

/* Zähler und Signalfläche bleiben sichtbar, nur die Bewegung entfällt. */
@media (prefers-reduced-motion: reduce) {
	.notification-bell,
	.notification-bell .notification-bell-clapper,
	.notification-bell .notification-bell-count {
		animation: none;
	}
}