/* In einem ersten Schritt bekommt der Switch seine Form. */
.switch {                   /* Das label-Element */ 
	position: relative; /* Um im nächsten Schritt den runden Button mit position:absolute festzusetzen */ 
	width: 32px;
	height: 17px;
	display: inline-block;
}

.switch span {		    /* Der graue Untergrund des Schalters */ 
	position: absolute;
	background-color: #ccc;
	border-radius: 8.5px;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	transition: background-color .4s; /* unverändert */
}

/* Der runde Button innerhalb des Switch entsteht durch einen ::before-Selektor. */
.switch span::before {    /* Der kreisrunde Button im Switch */ 
	background-color: white;
	border-radius: 50%;               /* unverändert */
	content: "";
	position: absolute;
	left: 2px;
	bottom: 2px;
	height: 13px;
	width: 13px;
}

/*Damit der Schalter bei einem Klick nach rechts rutscht, kommt die Checkbox zum Einsatz. Der Hintergrund des Schalters wird bei einem Klick Grün und der runde Button bewegt sich nach rechts.*/
input:checked + span {
  background-color: darkgreen;
}

input:checked + span::before {
  transform: translateX(15px);
}

/* Das input-Element des Switch muss noch verborgen werden. */
.switch input {
	display: none;
}

/* Um allerdings auch den Text Einstellung zum Switch zu ändern, wird der Switch von display: inline-block zu einem Grid-Container mit zwei Grid-Elementen in einer grid-template-area. */
.switch {
	position: relative;
	display: grid;
	grid-template-columns: 115px 32px;
	grid-template-rows: 17px;
	grid-template-areas: "settings switch";
}

/* Dem Switch die zweite grid-area (switch) zuweisen und das Verhalten beim :checked-Zustand festlegen. */
.switch span {
	background-color: #ccc;
	…
	transition: .4s;      /* unverändert */
	grid-area: switch;
}

.switch p { 
	text-transform: uppercase; 
	letter-spacing: 1px;                   /* unverändert */
	height: 15px;
	margin-top: 0;
}


input:checked + p::before {
	content: "Ein";
}

input:checked ~ p::after {
	content: " Ein"

}