/* Kippschalter-Design */
/* Grundlegendes Schalter-Design */

/* Verstecken der Radio-Buttons */
input[type="radio"] {
  display: none;
}

/* Gestaltung des äußeren Teils des Kippschalters */
.switch {
  position: relative;
  display: inline-block;
  width: 42px; /* Breite des Schalters */
  height: 20px; /* Höhe des Schalters vorher 34px */
}

/* Gestaltung des inneren Teils des Kippschalters */
.switch .slider {
  position: absolute;
  transform: translateY(17%); /* Verschiebt Position des Schalters leicht nach unten */
  cursor: pointer;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 34px;
  border: 2px solid black; /* Fügt eine feine schwarze Linie um den Slider hinzu */
}

/* Gestaltung des inneren Teils des Kippschalters, wenn er ausgewählt ist */
input:checked + .slider {
   background-color: #2196F3;
}


/* Gestaltung des "Knopfes" des Kippschalters */
.slider:before {
  content: "7"; /* Nummer, die auf dem Schalter angezeigt wird */
  font-size: 12px;
  font-weight: bold;
  position: absolute;
  height: 16px;
  width: 16px;
  left: 1px;   /* Horizontale Position des Textes innerhalb des Kreises */
  bottom: 0px; /* Vertikale Position des Textes innerhalb des Kreises */
  background-color: white;
  transition: .4s;
  border-radius: 45%;
  display: flex;
  align-items: center; /* Zentriert den Inhalt vertikal */
  justify-content: center; /* Zentriert den Inhalt horizontal */
  line-height: 1; /* Stellt sicher, dass die Höhe der Schriftzeile der Höhe des Elements entspricht */
}





/* Spezifische Schalterstile basierend auf der Level-Nummer */
/* Schalter für Level 10 */
#id_level-10 + .slider:before {
  content: "10";
}

/* Schalter für Level 9 */
#id_level-9 + .slider:before {
  content: "9";
}

/* Schalter für Level 8 */
#id_level-8 + .slider:before {
  content: "8";
}

/* Schalter für Level 7 */
#id_level-7 + .slider:before {
  content: "7";
}

/* Schalter für Level 6 */
#id_level-6 + .slider:before {
  content: "6";
}

/* Schalter für Level 5 */
#id_level-5 + .slider:before {
  content: "5";
}

/* Schalter für Level 4 */
#id_level-4 + .slider:before {
  content: "4";
}

/* Schalter für Level 3 */
#id_level-3 + .slider:before {
  content: "3";
}

/* Schalter für Level 2 */
#id_level-2 + .slider:before {
  content: "2";
}

/* Schalter für Level 1 */
#id_level-1 + .slider:before {
  content: "1";
}


/* Stiländerung bei "ein" */
input:checked + .slider:before {
  transform: translateX(20px);
}