/* Grundlegende Stile für den Körper der Seite */
body {
    font-family: Arial, sans-serif; /* Schriftart für den gesamten Text */
    display: flex; /* Flexbox-Layout aktivieren */
    justify-content: center; /* Horizontale Zentrierung des Inhalts */
    align-items: center; /* Vertikale Zentrierung des Inhalts */
    height: 100vh; /* Höhe des Körpers auf 100% der Viewport-Höhe setzen */
    background-color: #FFFFCC; /* Hintergrundfarbe der Seite */
	-webkit-user-select: none; /* Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* Internet Explorer/Edge */
    user-select: none;         /* Nicht spezifiziert */
}

/* Stile für die Quizüberschrift */
/*.quiz-title {
/*   font-size: 1.0em;*/ /* Schriftgröße für die Überschrift */
/*    margin-bottom: 10px;*/ /* Abstand unten zur Karte */
/*    color: #333;*/ /* Schriftfarbe */
/*}*/


/* Stile für den Footer */
.quiz-footer {
    margin-top: 5px; /* Abstand oben zur Karte */
    font-size: 0.8em; /* Kleinere Schriftgröße für den Footer */
    color: #555; /* Schriftfarbe für den Footer */
    padding: 5px 0; /* Innenabstand (Padding) */
}

/* Container für das Quiz */
.quiz-container {
    text-align: center; /* Text innerhalb des Containers zentrieren */
	    width: 100%; /* Vollständige Breite für flexibles Layout */
    max-width: 400px; /* Maximalbreite von 400px auf großen Bildschirmen */
	perspective: 1000px; /* Perspektive für 3D-Drehung der Karte */
	margin-top: 0px;
}

/* Stil für die Karte */
.card {
    width: 100%; /* Breite auf 100% setzen, um sich anzupassen */
    height: 460px; /* Höhe der Karte */
    margin: 20px auto; /* Margin oben und unten 20px, horizontal zentrieren */
}

/* Innerer Container für die Karte, der die Front- und Rückseite enthält */
.card-inner {
    position: relative; /* Relatives Positionieren für das Innere der Karte */
    width: 100%; /* Breite auf 100% der Karte setzen */
    height: 100%; /* Höhe auf 100% der Karte setzen */
    transition: transform 0.6s; /* Übergang für die Drehung der Karte */
    transform-style: preserve-3d; /* 3D-Darstellung der Kinder-Elemente ermöglichen */
	transform-origin: center; /* Setze den Drehpunkt in die Mitte der Karte */
}
* {
    box-sizing: border-box;
}
/* Stil für die Vorderseite der Karte */
.card-front, .card-back {
    position: absolute; /* Absolute Positionierung für die Vorder- und Rückseite */
    width: 100%; /* Breite auf 100% setzen */
    height: 100%; /* Höhe auf 100% setzen */
    backface-visibility: hidden; /* Rückseite der Karte unsichtbar machen, wenn sie gedreht ist */
    display: flex; /* Flexbox-Layout aktivieren */
    justify-content: center; /* Inhalt horizontal zentrieren */
    align-items: center; /* Inhalt vertikal zentrieren */
    flex-direction: column; /* Inhalte in einer Spalte anordnen */
    font-size: 1em; /* Schriftgröße flexibel einstellen */
    color: white; /* Textfarbe auf weiß setzen */
/*	padding: 0;*/ /* Padding entfernt */
}

/* Stil für die Vorderseite der Karte (Frage) */
.card-front {
    background-color: #5B9BD5; /* Hintergrundfarbe der Vorderseite (dunkelblau) */
	   /* border: 1px #FFFFCC;*/ /* Sichtbare Grenze für die Fehlersuche */
	padding: 1px; /* Padding hinzufügen für Abstand zum Rand */
}

/* Stil für die Rückseite der Karte (Antwort) */
.card-back {
    background-color: #43CD80; /* Hintergrundfarbe der Rückseite (grün) */
    transform: rotateY(180deg); /* Rückseite um 180 Grad drehen */
	/*border: 1px #FFFFCC;*/ /* Sichtbare Grenze für die Fehlersuche */
	padding: 15px; /* Padding hinzufügen für Abstand zum Rand */

}

/* Stil für die Karte, wenn sie gedreht ist */
.card.flipped .card-inner {
    transform: rotateY(180deg); /* Vorderseite um 180 Grad drehen, wenn sie flipped ist */
}

/* Stil für Bilder in der Karte */
img {
    max-width: 90%; /* Maximale Breite des Bildes auf 80% der Kartenbreite setzen */
    max-height: 70%; /* Maximale Höhe des Bildes auf 60% der Kartenhöhe setzen */
    margin-top: 10px; /* Abstand oben zum Bild hinzufügen */
	margin-bottom: 2px; /* Abstand oben zum Bild hinzufügen */
    display: block; /* Bild als Block-Element anzeigen */
    margin-left: auto; /* Automatische Margins, um das Bild horizontal zu zentrieren */
    margin-right: auto; /* Automatische Margins, um das Bild horizontal zu zentrieren */
}

/* Stil für den Button */
button {
    margin-top: 10px; /* Abstand oben zum Button hinzufügen */
    padding: 5px 10px; /* Innenabstand (Padding) für den Button */
    font-size: 1em; /* Schriftgröße flexibel einstellen */
    cursor: pointer; /* Mauszeiger als Hand anzeigen, wenn über den Button gehovert wird */
}