/**
 * Warenkorb-Zeichen in der Kopfleiste.
 *
 * Erscheint nur, wenn etwas im Korb liegt — einen leeren Zustand gibt es
 * also nicht zu gestalten.
 */

.pe-korb {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--color-cream-dim);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.pe-korb:hover,
.pe-korb:focus-visible { color: var(--color-primary); }

.pe-korb__symbol { display: block; }

.pe-korb__zahl {
	position: absolute;
	top: 2px;
	inset-inline-end: 0;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: var(--weight-bold);
	line-height: 18px;
	text-align: center;
	color: var(--color-ink);
	background: var(--color-primary);
	border-radius: 999px;
}

/* Im ausgeklappten Menü steht es als Zeile, nicht als Symbol allein. */
.pe-korb--mobil {
	width: auto;
	height: auto;
	justify-content: flex-start;
	gap: var(--space-sm);
	padding: var(--space-sm) 0;
	color: var(--color-cream);
}

.pe-korb--mobil .pe-korb__zahl {
	position: static;
	inset-inline-end: auto;
	top: auto;
}