#kennzeichen {
    width: 450px; /* Breite des Kennzeichens */
    font-size: 3em; /* Größere Schrift für bessere Lesbarkeit */
    height: 80px; /* Höhe des Kennzeichens */
    background-color: #f7f7f7; /* Helle Hintergrundfarbe, ähnlich wie bei einem Kennzeichen */
    border: 3px solid black; /* Schwarzer Rahmen */
    border-radius: 10px; /* Abgerundete Ecken für eine authentische Optik */
    display: flex; /* Flexbox für saubere Ausrichtung der Eingabefelder */
    justify-content: space-evenly; /* Gleichmäßiger Abstand zwischen den Feldern */
    align-items: center; /* Vertikale Zentrierung */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Leichter Schatten für 3D-Effekt */
    padding: 5px;
    font-family: Arial, sans-serif; /* Schriftart ähnlich wie bei Kennzeichen */
}

#kennzeichen input {
    width: 90px; /* Einheitliche Breite der Eingabefelder */
    height: 60px; /* Höhe der Felder */
    text-transform: uppercase; /* Automatische Großbuchstaben */
    text-align: center; /* Zentrierter Text */
    font-size: 3em; /* Größere Schrift für bessere Lesbarkeit */
    font-weight: bold; /* Fett für den Text */
    border: 1px dotted black; /* Schwarzer Rand für Eingabefelder */
    border-radius: 5px; /* Leichte Rundung der Ecken */
    box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.1); /* Tiefe für Eingabefelder */
}

#kennzeichen b {
    font-size: 2.5em; /* Größe des Bindestrichs */
    margin: 0 10px; /* Abstand zwischen Feldern */
    line-height: 60px; /* Vertikale Zentrierung */
    font-weight: bold;
}
@media (max-width: 600px) {
    #kennzeichen input {
        width: 30%; /* relative Breite, damit sie auf kleinen Bildschirmen passen */
    }
    #kennzeichen {
        display: flex; /* um die Felder nebeneinander darzustellen */
        justify-content: center; /* zentriert sie auf dem Bildschirm */
    }
}

#controls {
    display: flex; /* Aktiviert Flexbox */
    flex-wrap: wrap; /* Erzwingt Umbruch, falls der Platz knapp wird */
    gap: 10px; /* Abstand zwischen den Elementen */
    justify-content: center; /* Zentriert die Inhalte auf schmalen Displays */
    align-items: center; /* Vertikale Zentrierung */
    margin-top: 5px; /* Platz nach oben */
}

#controls input, #controls button {
    flex: 1; /* Optionale Anpassung: Teilt den verfügbaren Platz gleichmäßig auf */
    max-width: 150px; /* Begrenzte Breite für jedes Element */
    padding: 10px; /* Optional: für bessere Darstellung */
    font-size: 1em; /* Einheitliche Schriftgröße */
}

label {margin-top:5px;
    display: inline-flex; /* Flexbox aktivieren */
    justify-content: center; /* Horizontal zentrieren */
    align-items: center; /* Vertikal zentrieren */
    width: 80px; 
    height: 65px;
    border-radius: 5px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    color: rgb(75, 75, 75); /* Textfarbe */
    font-size: 16px; /* Beispiel Schriftgröße */
    font-weight: bold;
}

/* Styling für ausgewählte Labels */
input[type="checkbox"]:checked + label {
    background-color: rgb(255, 250, 252); /* Auswahlfarbe */
    background-image: url('../img/kja2.png');
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: none; /* Entfernt den Schatten */
    
}

/* Styling für nicht ausgewählte Labels */
input[type="checkbox"]:not(:checked) + label {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    background-image: url('../img/knein2.png'); 
    background-position: center;
    background-repeat: no-repeat;
}
input[type="checkbox"]{display:none;}