body {
	font-family: 'Open Sans', sans-serif;
	text-align: center;
	background-color: #222222;
	color: white;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column; /* Elemente untereinander anordnen */
	align-items: center; /* Horizontal zentrieren */
	justify-content: center; /* Vertikal zentrieren */
	min-height: 100vh;
}

.container {
	width: 80%; /* Beispiel: Hauptcontainer ist 80% der Bildschirmbreite */
	max-width: 1200px; /* Maximale Breite für den Hauptcontainer */
	padding: 20px; /* Innenabstand für den Container */
	box-sizing: border-box; /* Padding wird zur Breite hinzugefügt */
	text-align: left; /* Linksbündige Ausrichtung des Inhalts im Container */
	margin: 20px auto; /* Äußerer Abstand zwischen Containern */
}

img#loesung {
	width: 400px;
	max-width: 100%; /* Bild auf Container-Breite begrenzen */
	height: auto; /* Automatische Höhe beibehalten */
	display: block;
	margin: 0 auto 20px; /* Zentriert das Bild horizontal und fügt unten Platz hinzu */
}

input[type=text], button {
	border-radius: 10px;
	padding: 10px;
	margin: 10px;
	border: none;
	background-color: #0077CC;
	color: white;
	font-size: 20px;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
	width: auto; /* Automatische Breite basierend auf Inhalt */
	max-width: 100%; /* Maximale Breite auf 100% des Elterncontainers begrenzen */
	box-sizing: border-box; /* Padding wird zur Breite hinzugefügt */
}

button:focus {
	outline: none;
}

button.pruefen {
	width: 100px;
}

button.tipp {
	background-color: #0077CC;
	display: none;
	margin: 0 auto;
	color: white;
}

button:hover {
	transform: scale(1.1);
	box-shadow: 0px 5px 0px rgba(0, 0, 0, 0.2);
}

#ergebnis {
	margin-top: 20px;
	font-size: 24px;
	font-weight: bold;
}

#logo {
	width: 180px;
	display: block;
	margin: 0 auto 20px; /* Zentriert das Logo horizontal und fügt unten Platz hinzu */
}

#vertical-spacer1 {
	margin-bottom: 30px;
}

#thema {
	color: #999999;
	font-weight: bold;
	margin-bottom: 50px;
}

.header-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* Media Query für Tablet und Smartphone */
@media (max-width: 1024px) {
	.container {
		width: 90%;
		padding: 10px;
	}
}