.styled-select {
	appearance: none;
}

.styled-checkbox {
	appearance: none;
	width: 1.2rem;
	height: 1.2rem;
	border: 1px solid #000000;
	border-radius: 4px;
	background-color: #ffffff;

	/* richtet sich mittig zur Textzeile/Nachbarelementen aus */
	vertical-align: middle;
	/* dient als Anker für absolute Kinder */
	position: relative;
}

.styled-checkbox:checked {
	background-color: #000000;
	border-color: #ffffff;
}

.styled-checkbox:checked::after {
	/* Häkchen-Symbol */
	content: "\2713";
	color: #ffffff;
	font-size: 1rem;


	/* Position relativ zum nächsten positionierten Eltern-Element */
	position: absolute;
	/* obere Kante in die Mitte (50%) des Eltern-Elements setzen */
	top: 50%;
	/* linke Kante in die Mitte (50%) des Eltern-Elements setzen */
	left: 50%;
	/* sich selbst um 50% der eigenen Breite/Höhe zurückschieben → exakt zentriert */
	transform: translate(-50%, -50%);
}

.styled-radio {
	appearance: none;
	width: 1.2rem;
	height: 1.2rem;
	border: 1px solid #000;
	border-radius: 50%;
	background-color: #ffffff;

	/* richtet sich mittig zur Textzeile/Nachbarelementen aus */
	vertical-align: middle;
	/* dient als Anker für absolute Kinder */
	position: relative;
}

.styled-radio:checked {
	border-color: #ffffff;
	background-color: #000000;
}

.styled-radio:checked::after {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	background-color: #ffffff;
	border-radius: 50%;

	/* Position relativ zum nächsten positionierten Eltern-Element */
	position: absolute;
	/* obere Kante in die Mitte (50%) des Eltern-Elements setzen */
	top: 50%;
	/* linke Kante in die Mitte (50%) des Eltern-Elements setzen */
	left: 50%;
	/* sich selbst um 50% der eigenen Breite/Höhe zurückschieben → exakt zentriert */
	transform: translate(-50%, -50%);
}