/* Emmcee Circle Badge – garantiert runder Kreis bei jeder Breite */

.emmcee-circle-badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	box-sizing: border-box;
	border-radius: 50%;

	/*
	 * Der entscheidende Unterschied zu einem Elementor-Container:
	 * aspect-ratio + min-height:0 sitzen hier in EINER eigenen Klasse,
	 * ohne dass eine andere Elementor-Regel mit gleicher Spezifität
	 * dagegen ankämpft. Dadurch entsteht IMMER ein exaktes Quadrat,
	 * unabhängig vom Inhalt.
	 */
	aspect-ratio: 1 / 1;
	height: auto;
	min-height: 0;
	min-width: 0;

	/* Falls Text/Icons doch mal knapp werden: sauber abschneiden statt verzerren */
	overflow: hidden;

	background-color: #C97C4B;
	padding: 20px;
	text-decoration: none;
	flex-shrink: 0;
}

.emmcee-circle-badge-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.emmcee-circle-badge-icon--top {
	margin-bottom: 0.5em;
}

.emmcee-circle-badge-icon--bottom {
	margin-top: 0.5em;
}

.emmcee-circle-badge-text {
	font-size: 16px;
	line-height: 1.3;
	color: #FFFFFF;
}