body {
    font-family: 'Arial', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #006400; /* Nadelgrün */
}

.calendar {
    list-style-type: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}

.door {
    width: 40px;
    height: 40px;
    background-color: #e0e0e0;
    margin: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5em;
    cursor: pointer;
    border: 2px solid #ccc;
    position: relative;
}

/* Positionierung für Türchen 1 bis 24 in Gruppen von jeweils 4 nebeneinander */
#door1, #door2, #door3, #door4 { top: 0; left: 0; }
#door2 { left: 25%; }
#door3 { left: 50%; }
#door4 { left: 75%; }

#door5, #door6, #door7, #door8 { top: 100px; left: 0; }
#door6 { left: 25%; }
#door7 { left: 50%; }
#door8 { left: 75%; }

#door9, #door10, #door11, #door12 { top: 200px; left: 0; }
#door10 { left: 25%; }
#door11 { left: 50%; }
#door12 { left: 75%; }

#door13, #door14, #door15, #door16 { top: 300px; left: 0; }
#door14 { left: 25%; }
#door15 { left: 50%; }
#door16 { left: 75%; }

#door17, #door18, #door19, #door20 { top: 400px; left: 0; }
#door18 { left: 25%; }
#door19 { left: 50%; }
#door20 { left: 75%; }

#door21, #door22, #door23, #door24 { top: 500px; left: 0; }
#door22 { left: 25%; }
#door23 { left: 50%; }
#door24 { left: 75%; }