h1 {
    color: black;
    font-size: 36px;
    font-family: Verdana, Helvetica, sans-serif;
}

h2 {
    color: black;
    font-size: 24px;
    font-family: Verdana, Helvetica, sans-serif;
    white-space: nowrap;
}

input[type="checkbox"] {
    width: 35px;
    height: 35px;
}

.button {
    background-color: #a8a8dc;
    border: 3px solid black;
    border-radius: 12px;
    color: black;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 22px;
    margin: 0.5% 0.5%;
    cursor: pointer;
    white-space: nowrap;
    height: 80px;
}

.button3 { width: 32%; }
.button2 { width: 200px; }
.button4 { width: 24%; }
.button5 { width: 19%; }
.button11 { width: 24%; background-color: #77d594; }
.button12 { width: 24%; background-color: #bf4c6c; }
.button13 { width: 24%; position: absolute; right: 10px;}

button.clicked {
    background-color: #282781;
    color: white;
}

button.inactive {
    background-color: #b8b8bc;    
}

/* Sorten-Buttons */
.sorten-btn {
    width: 15%;        /* feste Breite */
    margin-right: 5px;   /* Abstand zum K-Button */
    display: inline-block;
    vertical-align: middle;
}

/* K-Button */
.buttonK {
    width: 80px;
    padding: 0;
    vertical-align: middle;
    margin-right: 15px;  /* Abstand zur nächsten Sorte */
    margin-left: 5px;
    cursor: pointer;     /* jetzt klickbar */
}

/* Wrapper für Sorte + K-Button */
.sorten-wrapper {
    display: inline-block;  /* verhindert Umbruch zwischen Sorte und K-Button */
    margin-bottom: 5px;     /* Abstand zur nächsten Zeile */
}