/* CSS für die klickbaren Bereiche */
.area-highlight {
    opacity: 0.5; /* Verringert die Deckkraft, um den Bereich hervorzuheben */
    background-color: #FF5733; /* Hintergrundfarbe des hervorgehobenen Bereichs */
    position: absolute; /* Position absolut für die z-index-Einstellung */
    z-index: 1; /* Stapelreihenfolge, um den Bereich über dem Bild anzuzeigen */
    /* border: 1px solid; */
    top: 39px; /* Die Top-Position anpassen, um den Bereich innerhalb des Bildes zu platzieren */
    left: 40px; /* Die Left-Position anpassen, um den Bereich innerhalb des Bildes zu platzieren */
}

/* CSS für den Hover-Effekt auf die klickbaren Bereiche */
.area-highlight:hover {
    opacity: 1; /* Bei Hover volle Deckkraft wiederherstellen */
    z-index: 2; /* Stapelreihenfolge erhöhen, um den Bereich über andere zu bringen */
}

/* CSS für das Container-Element */
.image-container {
    position: relative; /* Position relativ für die z-index-Einstellung des Containers */
}

/* CSS für das Menü */
.menu {
    display: none; /* Menü standardmäßig ausblenden */
    position: absolute;
    background-color: #fff;
    border: 1px solid #fff;
    color: #fff;
    padding: 10px;
}

.menu ul {
    list-style: none;
    padding: 0;
}

.menu li {
    margin: 5px 0;
}

/* CSS für das geöffnete Menü */
.menu.active {
    display: block;
}