/*
 * MZ Auszeichnungen: runde Badges mit dem handgezeichneten Kreis der Seite.
 *
 * Anpassen ueber CSS-Variablen, z. B. im Element-CSS des Loopers:
 *   --mz-aw-groesse           Durchmesser (Standard 100px)
 *   --mz-aw-abstand           Abstand zwischen den Badges (Standard 12 % des Durchmessers)
 *   --mz-aw-farbe             Textfarbe (Standard #000)
 *   --mz-aw-schrift-punkte    Schrift der Punkte (Standard montserrat-semibold)
 *   --mz-aw-schrift-text      Schrift des Textes (Standard montserrat)
 *   --mz-aw-sperrung-text     Buchstabenabstand des Textes (Standard 0)
 *   --mz-aw-logo              Groesse eines Bildes im Kreis (Standard 62 %)
 *
 * Die Schriftgroessen haengen am Durchmesser (Container-Einheit cqi), Text
 * waechst und schrumpft also mit dem Badge.
 */

.mz-aw.mz-aw {
	--mz-aw-groesse: 100px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--mz-aw-abstand, calc(var(--mz-aw-groesse) * 0.12));
	margin: 0;
	padding: 0;
	list-style: none;
}

.mz-aw.mz-aw--zeile {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
}

.mz-aw.mz-aw--spalte.mz-aw--mitte  { align-items: center; }
.mz-aw.mz-aw--spalte.mz-aw--rechts { align-items: flex-end; }
.mz-aw.mz-aw--zeile.mz-aw--mitte   { justify-content: center; }
.mz-aw.mz-aw--zeile.mz-aw--rechts  { justify-content: flex-end; }

.mz-aw .mz-aw__badge {
	box-sizing: border-box;
	position: relative;
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: var(--mz-aw-groesse);
	height: auto;
	aspect-ratio: 1 / 1;
	margin: 0;
	padding: 0;
	list-style: none;
	container-type: inline-size;
	color: var(--mz-aw-farbe, #000);
	text-align: center;
	line-height: 1;
}

.mz-aw .mz-aw__badge--text,
.mz-aw .mz-aw__badge--kreis {
	background: url("kreis.svg") center / 100% 100% no-repeat;
}

.mz-aw .mz-aw__punkte {
	display: block;
	font-family: var(--mz-aw-schrift-punkte, "montserrat-semibold", "Montserrat", sans-serif);
	font-weight: var(--mz-aw-gewicht-punkte, 400);
	font-size: calc(var(--mz-aw-groesse) * var(--mz-aw-f, 0.34));
	font-size: calc(100cqi * var(--mz-aw-f, 0.34));
	line-height: 1;
	letter-spacing: var(--mz-aw-sperrung-punkte, 0);
	white-space: nowrap;
}

.mz-aw .mz-aw__text {
	display: block;
	max-width: 74%;
	margin-top: 4cqi;
	font-family: var(--mz-aw-schrift-text, "montserrat", sans-serif);
	font-weight: var(--mz-aw-gewicht-text, 400);
	font-size: calc(var(--mz-aw-groesse) * var(--mz-aw-f, 0.15));
	font-size: calc(100cqi * var(--mz-aw-f, 0.15));
	line-height: 1.1;
	letter-spacing: var(--mz-aw-sperrung-text, 0);
	overflow-wrap: anywhere;
	text-wrap: balance;
}

.mz-aw .mz-aw__punkte:only-child,
.mz-aw .mz-aw__text:only-child {
	margin-top: 0;
}

.mz-aw .mz-aw__bild {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: contain;
}

.mz-aw .mz-aw__badge--kreis .mz-aw__bild {
	width: var(--mz-aw-logo, 62%);
	height: var(--mz-aw-logo, 62%);
}