body {
background-color: #e0f2ff; /* Hellblauer Hintergrund */
font-family: 'Open Sans', sans-serif; /* Moderne Sans-Serif-Schriftart */
color: #333; /* Dunkler Text */
}

.container {
background-color: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
max-width: 800px; /* Begrenzte Breite für Responsivität */
margin: 0 auto; /* Zentriert den Container */
}

h1 {
text-align: center;
margin-bottom: 20px;
color: #007bff; /* Primärfarbe für Überschriften */
}

p {
text-align: center;
color: #666; /* Grauer Text für Textkörper */
line-height: 1.6; /* Zeilenabstand */
}

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

.input-field {
width: 85px;
padding: 15px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
margin-bottom: 10px;
text-align: center;
margin: 0 10px; /* Horizontale Abstände für bessere Lesbarkeit */
}

.button {
background-color: #007bff; /* Primärfarbe für Buttons */
color: #fff;
padding: 15px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}

.button:hover {
background-color: #0056b3; /* Dunklere Variante der Primärfarbe */
}

.error-message {
visibility: hidden;
color: red; /* Red text */
font-weight: bold; /* Bold font */
font-size: 16px; /* Slightly larger font size */
background-color: rgba(255, 0, 0, 0.1); /* Light red background */
border: 1px solid red; /* Red border */
padding: 10px; /* Padding for spacing */
margin-top: 10px; /* Margin for separation */
}