#infos                  {   border: 2px solid brown;
                            border-radius: 100%;
                            font-family: "Lora", serif;
                            font-optical-sizing: auto;
                            font-weight: 400;
                            font-style: italic;
                            font-size: clamp(20px, 4vw, 40px);
                            font-family: "Lora", serif;
                            padding-left: 20px; padding-right: 20px; padding-top: 1px; padding-bottom: 1px;
                            margin: 2px;
                            transition: 1s;}
#infos:hover            {   transform: scale(1.5);}




 /*-----Setzt den List-Style auf Null und possitioniert ein Bild vor den Text-----------*/             
 .custom-list    {
    list-style: none; /* Entfernt die Standard-Bulletpoints */
    padding-left: 20px; /* Platz für das benutzerdefinierte Bild */
}

.custom-list li {
    position: relative; /* Um das Pseudoelement richtig zu positionieren */
    padding-left: 30px; /* Platz für das Bild */
}

.custom-list li::before {               
    content: ''; /* Keine Text-Inhalte */
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-50%, -50%); /*Mittig zum Text und Abstand zum Text*/
    width: 40px; /* Größe des Bildes */
    height: 40px;
    background-image: url('bilder/check-mark.png'); /* Dein benutzerdefiniertes Bild */
    background-size: cover;
    filter: drop-shadow(2px 4px 5px rgb(211, 209, 209)); /* Schatten hinzufügen */
}

/*-----Ende -------Setzt den List-Style auf Null und possitioniert ein Bild vor den Text-----------*/ 

 /*-----Setzt den List-Style auf Null und possitioniert ein Bild vor den Text-----------*/             
 .custom-list-kl    {
    list-style: none; /* Entfernt die Standard-Bulletpoints */
    padding-left: 20px; /* Platz für das benutzerdefinierte Bild */
}

.custom-list-kl li {
    position: relative; /* Um das Pseudoelement richtig zu positionieren */
    padding-left: 30px; /* Platz für das Bild */
}

.custom-list-kl li::before {               
    content: ''; /* Keine Text-Inhalte */
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-50%, -50%); /*Mittig zum Text und Abstand zum Text*/
    width: 20px; /* Größe des Bildes */
    height: 20px;
    background-image: url('bilder/check-mark.png'); /* Dein benutzerdefiniertes Bild */
    background-size: cover;
    filter: drop-shadow(2px 4px 5px rgb(211, 209, 209)); /* Schatten hinzufügen */
}

/*-----Ende -------Setzt den List-Style auf Null und possitioniert ein Bild vor den Text-----------*/