#fullMenuDisplay {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

body.isMobile #fullMenuDisplay {
    align-items: center;
}

#menuIcon {
    background-image: url("../images/icons/menu.png");
    background-repeat: no-repeat;
    display: block;
    height: 50px;
    width: 50px;
    background-position: -75px 1px;
    opacity: 0.4;
}

body:not(.isMobile) #fullMenuDisplay:hover > #menuIcon {
    background-position: -18px 1px;
}

#currentMenu {
    color: darkgrey;
    line-height: 50px;
    font-size: 20px;
    margin-top: 2px;
    padding: 0 10px;
    white-space: nowrap;
}

body:not(.isMobile) #fullMenuDisplay:hover > #currentMenu {
    color: grey;
}

/* === Keyframe-Animationen === */
@keyframes menuBackdropIn {
    from { opacity: 0; }
}
@keyframes menuBackdropOut {
    to { opacity: 0; }
}
@keyframes menuPanelIn {
    from { transform: scale(0.97) translateY(-0.5rem); }
}
@keyframes menuPanelOut {
    to { transform: scale(0.97) translateY(-0.5rem); }
}

#menuBackground.is-opening {
    animation: menuBackdropIn 0.22s ease-out both;
}
#menuBackground.is-opening #menu {
    animation: menuPanelIn 0.2s ease-out both;
}

#menuBackground.is-closing {
    animation: menuBackdropOut 0.15s ease-in both;
}
#menuBackground.is-closing #menu {
    animation: menuPanelOut 0.15s ease-in both;
}

/* Overlay-Hintergrund: weichgezeichnet, klickbar zum Schließen */
#menuBackground {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(0.5rem);
    -webkit-backdrop-filter: blur(0.5rem);
    z-index: 1000;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: 0 2rem 2rem 2rem;
    box-sizing: border-box;
}

/* === Paletten-Definitionen (eine Stelle für alle Farben) === */
#menu {
    /* Paletten-Farben: bg / hover / Textfarbe */
    --menu-c1:  #bdbebfdd; --menu-c1h: #bdbebf; --menu-c1t: white;
    --menu-c2:  #b2cbe4dd; --menu-c2h: #b2cbe4; --menu-c2t: white;
    --menu-c3:  #5283c3dd; --menu-c3h: #5283c3; --menu-c3t: white;
    --menu-c4:  #e5e4e7dd; --menu-c4h: #e5e4e7; --menu-c4t: #34384699;
    --menu-c5:  #84b1d8dd; --menu-c5h: #84b1d8; --menu-c5t: white;
    --menu-c6:  #343846dd; --menu-c6h: #343846; --menu-c6t: white;

    /* Gesamt-Grid: weißes Panel */
    width: fit-content;
    max-width: calc(100vw - 8rem);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 10.5rem));
    justify-content: center;
    gap: 1rem;
    align-items: start;
    background-color: white;
    padding: 1rem;
    margin: 2rem;
    border-radius: 1rem;
    font-weight: bold;
    box-shadow: 0 0 4rem 2rem rgba(255, 255, 255, 0.8);
}

/* Jede Kategorie = eigener Block */
.menuCat {
    display: grid;
    gap: 1rem;
}

/* Kachelfarben + Textfarbe pro Kategorie-Spalte (Desktop) */
.menuCat:nth-child(1), .menuCat:nth-child(7)  { --_tile-bg: var(--menu-c1); --_tile-bg-hover: var(--menu-c1h); --_tile-color: var(--menu-c1t); }
.menuCat:nth-child(2), .menuCat:nth-child(8)  { --_tile-bg: var(--menu-c2); --_tile-bg-hover: var(--menu-c2h); --_tile-color: var(--menu-c2t); }
.menuCat:nth-child(3), .menuCat:nth-child(9)  { --_tile-bg: var(--menu-c3); --_tile-bg-hover: var(--menu-c3h); --_tile-color: var(--menu-c3t); }
.menuCat:nth-child(4), .menuCat:nth-child(10) { --_tile-bg: var(--menu-c4); --_tile-bg-hover: var(--menu-c4h); --_tile-color: var(--menu-c4t); }
.menuCat:nth-child(5), .menuCat:nth-child(11) { --_tile-bg: var(--menu-c5); --_tile-bg-hover: var(--menu-c5h); --_tile-color: var(--menu-c5t); }
.menuCat:nth-child(6), .menuCat:nth-child(12) { --_tile-bg: var(--menu-c6); --_tile-bg-hover: var(--menu-c6h); --_tile-color: var(--menu-c6t); }

/* Container für Unterpunkte */
.menuCatItems {
    display: grid;
    gap: 0.75rem;
    min-width: 0;
}

.menuItemImg {
    height: 4.5rem;
    max-width: 100%;
}

/* Menü-Kachel */
.menuItemTile {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: column;
    background-color: var(--_tile-bg, var(--atlantis-blue));
    color: var(--_tile-color, white);
    text-decoration: none;
    padding: 1rem;
    border-radius: 1rem;
    width: 100%;
    aspect-ratio: 1;
    box-sizing: border-box;
    transition: background-color 0.15s ease;
}

/* Platzhalter-Kachel */
.menuItemTile--ghost {
    background-color: var(--_tile-bg, var(--atlantis-blue));
    opacity: 0.2;
    pointer-events: none;
}

.menuItemText {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.25rem;
    font-size: 1rem;
}

.menuItemTile:not(.menuItemTile--ghost):hover {
    background-color: var(--_tile-bg-hover, var(--atlantis-blue-hover));
}

.menuItemTile:focus-visible {
    outline: 0.25rem solid #1f6feb;
    outline-offset: 0.25rem;
}

@media (max-width: 900px) {
    .menuItemTile {
        border-radius: 1rem;
    }
}

@media (max-width: 600px) {
    #menuBackground {
        padding: 0 0.75rem 1rem 0.75rem;
    }

    #menu {
        display: block;
        column-count: 2;
        column-gap: 0.75rem;
        max-width: calc(100vw - 1.5rem);
        margin: 0.75rem;
        padding: 0.75rem;
        border-radius: 0.75rem;
    }

    .menuCat {
        break-inside: avoid;
        margin-bottom: 0.5rem;
        gap: 0.5rem;
    }

    .menuItemTile--ghost {
        display: none;
    }

    /* Kachelfarben Mobile: linke Spalte → Palette A (c1–c3), rechte → Palette B (c4–c6) */
    /* Zuweisung via JS (data-mobile-col + data-mobile-pos) */
    .menuCat[data-mobile-col="left"][data-mobile-pos="0"]  { --_tile-bg: var(--menu-c1); --_tile-bg-hover: var(--menu-c1h); --_tile-color: var(--menu-c1t); }
    .menuCat[data-mobile-col="left"][data-mobile-pos="1"]  { --_tile-bg: var(--menu-c2); --_tile-bg-hover: var(--menu-c2h); --_tile-color: var(--menu-c2t); }
    .menuCat[data-mobile-col="left"][data-mobile-pos="2"]  { --_tile-bg: var(--menu-c3); --_tile-bg-hover: var(--menu-c3h); --_tile-color: var(--menu-c3t); }
    .menuCat[data-mobile-col="right"][data-mobile-pos="0"] { --_tile-bg: var(--menu-c4); --_tile-bg-hover: var(--menu-c4h); --_tile-color: var(--menu-c4t); }
    .menuCat[data-mobile-col="right"][data-mobile-pos="1"] { --_tile-bg: var(--menu-c5); --_tile-bg-hover: var(--menu-c5h); --_tile-color: var(--menu-c5t); }
    .menuCat[data-mobile-col="right"][data-mobile-pos="2"] { --_tile-bg: var(--menu-c6); --_tile-bg-hover: var(--menu-c6h); --_tile-color: var(--menu-c6t); }

    .menuCatItems {
        gap: 0.5rem;
    }

    .menuItemTile {
        padding: 0.75rem;
        border-radius: 0.75rem;
    }

    .menuItemText {
        font-size: 0.875rem;
        line-height: 1.1rem;
    }
}