#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;

    /* Weißes Panel (Träger des Kachel-Grids ist #menuGrid) */
    width: fit-content;
    max-width: calc(100vw - 8rem);
    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);
}

/* Kachel-Grid als eigener Träger: ein panelbreites Geschwister (#pwaInstallHint) belegt
   sonst jede auto-fit-Spur und verhindert den Kollaps der überzähligen Spalten.
   max-width MUSS hier stehen (definite Max-Size): #menu hat width: fit-content, also
   sieht #menuGrid ohne eigene max-width eine indefinite Breite — repeat(auto-fit, …)
   wird dann genau EINMAL wiederholt ⇒ eine einzige Spalte (zweifach gemessen, Phase 2 A/C).
   Herleitung der 10rem: 2×2rem Overlay-Padding (#menuBackground) + 2×2rem Panel-Margin
   (#menu) + 2×1rem Panel-Padding (#menu).
   KEIN width: fit-content hier — das ist ebenfalls indefinit und reproduziert den Kollaps. */
#menuGrid {
    max-width: calc(100vw - 10rem);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 10.5rem));
    justify-content: center;
    gap: 1rem;
    align-items: start;
}

/* 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 {
    position: relative;   /* anchor for .menuItemStar */
    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;
}

/* Start-Menü-Stern (Gate-C: desktop unmarked invisible, appears on tile hover,
   marked star permanently visible; mobile always visible) */
.menuItemStar {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--_tile-color, white);
    opacity: 0;               /* desktop: unmarked invisible (Gate-C decision) */
    cursor: pointer;
}

.menuItemStar svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.menuItemTile:hover .menuItemStar {   /* tile hover fades the star in */
    opacity: 0.45;
}

.menuItemTile .menuItemStar:hover,
.menuItemTile .menuItemStar:focus-visible {   /* direct hover / keyboard focus; must outweigh the tile-hover rule above */
    opacity: 1;
}

.menuItemTile.isStartMenu .menuItemStar {
    opacity: 1;               /* marked star permanently visible */
}

.menuItemTile.isStartMenu .menuItemStar svg {
    fill: currentColor;
}

body.isMobile .menuItemStar {   /* no hover on touch → always visible (AK 8) */
    top: 0;
    right: 0;
    padding: 0.5rem;          /* grows the tap target to 3rem while the icon stays 2rem */
    width: 2rem;
    height: 2rem;
    opacity: 0.45;
}

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

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

    #menu {
        max-width: calc(100vw - 1.5rem);
        margin: 0.75rem;
        padding: 0.75rem;
        border-radius: 0.75rem;
    }

    /* Träger des Spalten-Layouts ist jetzt #menuGrid. display: block ist PFLICHT:
       column-count ist auf dem aus der Desktop-Regel geerbten display: grid wirkungslos —
       sonst bleibt mobil das Grid aktiv, die Zweispaltigkeit verschwindet und die
       data-mobile-col-Farbzuordnung aus assignMobileMenuColumns() läuft ins Leere.
       max-width: none ist ebenfalls PFLICHT, sonst klemmt die geerbte Desktop-Breite
       die Spaltenbox ein (gemessen: 215px Grid in 301px Panel). */
    #menuGrid {
        display: block;
        column-count: 2;
        column-gap: 0.75rem;
        max-width: none;
    }

    .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;
    }
}

/* === PWA-Install-Hinweis (Fußzeile im Menü-Panel) ===
   display: none bis pwaInstall.js Installierbarkeit feststellt (dann flex).
   Der Hinweis ist ein Block-Geschwister von #menuGrid (kein Grid-/Spalten-Item mehr)
   und rendert deshalb von sich aus über die volle Panelbreite. */
#pwaInstallHint {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding: 0.25rem 0.75rem 0 0.75rem;
    border-top: 1px solid var(--atlantis-lightgrey);
    color: var(--atlantis-blue-text);
    font-size: 1rem;
}

/* Bedienelemente von Fußzeile (#pwaInstall*) und Toast (#pwaInstallToast*): baugleich
   (gleiches Icon, gleicher Text, gleiches Dismiss-X), deshalb EINE Regelgruppe für beide.
   Die Textfarbe wird bewusst nicht hier gesetzt, sondern vom jeweiligen Container geerbt
   (#pwaInstallHint: blue-text · #pwaInstallToast: anthracite). */
#pwaInstallAction,
#pwaInstallToastAction {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 3.15rem;   /* Touch-Target 44,1px — Root-Font ist 14px (design_2026.css:53) */
}
#pwaInstallAction:hover,
#pwaInstallAction:focus-visible,
#pwaInstallToastAction:hover,
#pwaInstallToastAction:focus-visible {
    text-decoration: underline;
}
/* Tap-Rückmeldung: auf Touch gibt es keinen :hover, ohne :active bleibt der Tap
   bis zum Öffnen des Dialogs bzw. des nativen Prompts völlig unquittiert. */
#pwaInstallAction:active,
#pwaInstallDismiss:active,
#pwaInstallToastAction:active,
#pwaInstallToastDismiss:active {
    opacity: 0.6;
}
#pwaInstallAction:focus-visible,
#pwaInstallDismiss:focus-visible,
#pwaInstallToastAction:focus-visible,
#pwaInstallToastDismiss:focus-visible {
    outline: 0.25rem solid #1f6feb;   /* wie .menuItemTile:focus-visible */
    outline-offset: 0.25rem;
}

#pwaInstallAction img,
#pwaInstallToastAction img {
    width: 1.5rem;
    height: 1.5rem;
}

#pwaInstallDismiss,
#pwaInstallToastDismiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.15rem;    /* Touch-Target 44,1px, Aktion ist permanent (localStorage) */
    min-height: 3.15rem;
    color: #8a8d90;        /* >=3:1 auf Weiß (WCAG 1.4.11), darkgrey wäre zu blass */
    font-size: 1.25rem;
    line-height: 1;
}
#pwaInstallDismiss:hover,
#pwaInstallToastDismiss:hover {
    color: var(--atlantis-anthracite);
}

/* Nur der Toast-Dismiss trägt einen sichtbaren Text ("Nicht mehr anzeigen", Fix 4) statt
   des × — die Fußzeile behält das ×. Deshalb hier ausschließlich #pwaInstallToastDismiss:
   - font-size runter (Label, keine Glyphe) und line-height für den Umbruch;
   - white-space: normal + begrenzte max-width ⇒ der Text bricht ZWEIzeilig um
     ("Nicht mehr" / "anzeigen") und verbreitert den Toast (width: max-content) auf breiten
     Geräten nicht unnötig — die max-width kappt den max-content-Beitrag dieses Kindes;
   - box-sizing: border-box + max-width 4.5rem (= 63px inkl. allem): der Dismiss bleibt
     unter ~70px, damit die Aktion neben ihm ab 360px noch EINzeilig passt (Fix-2-Kriterium)
     — sonst schöbe der breitere Dismiss die Aktion schon bei 360px in den Umbruch;
   - color #727578 statt #8a8d90: als sichtbarer Text greift jetzt WCAG 1.4.3 (4,5:1),
     #727578 = 4,63:1, #8a8d90 (3,34:1) würde als Fließtext durchfallen;
   - min-width/height 3.15rem (Touch-Target 44,1px) bleiben aus der gemeinsamen Regel. */
#pwaInstallToastDismiss {
    box-sizing: border-box;
    max-width: 4.5rem;
    color: #727578;
    font-size: 0.75rem;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
}

#pwaIosInstallHelp li {
    margin-bottom: 0.25rem;
}

/* === PWA-Install-Toast (nach dem Login, nur Mobil/Tablet) ===
   Sichtbarkeit über .show (Opacity-Transition) — kein display-Wechsel, damit die
   Transition ohne Reflow-Trick läuft. pointer-events erst mit .show, sonst fängt der
   unsichtbare Toast Klicks ab.
   visibility ist PFLICHT und nicht durch opacity ersetzbar: ein Element mit opacity: 0
   bleibt fokussierbar und damit im Tab-Flow — der unsichtbare Toast fing sonst am Desktop
   Tastatur-Fokus ab, Enter öffnete den iOS-Anleitungsdialog und der nächste Tab-Stopp
   (Dismiss) setzte pwaInstallHintDismissed dauerhaft, ohne dass je etwas sichtbar war.
   Der transition-Eintrag "visibility 0s linear 0.25s" (nur in der Basisregel, in .show
   ohne Verzögerung) schaltet visibility erst NACH dem Ausblenden um — sonst verschwände
   der Toast schlagartig statt auszublenden.
   z-index 1100: über #menuBackground (1000), damit ein geöffnetes Menü-Overlay den
   Toast weder verdeckt noch seine Klicks abfängt; bewusst unter #dsgToast (10000).
   width: max-content ist PFLICHT und NICHT durch fit-content ersetzbar: mit nur EINER
   gesetzten Kante (left: 50%) ist der Shrink-to-fit-Raum eines fixierten Elements
   100vw − 50vw = 50vw, der Kasten klemmt also auf halber Viewportbreite und bricht auf
   jedem Phone im Hochformat dreizeilig um. fit-content löst wie auto gegen genau diesen
   verfügbaren Raum auf und brächte den Defekt zurück; nur max-content ignoriert ihn.
   Die max-width darüber ist ab jetzt die einzige Bremse (320px: 292px, kein Querscrollen)
   und darf nicht als redundant entfallen.
   cursor: pointer, weil der ganze Toast-Körper die Install-Aktion auslöst (Klick-Handler
   in pwaInstall.js), nicht nur der Text. */
#pwaInstallToast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(1rem);
    z-index: 1100;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: max-content;
    max-width: calc(100vw - 2rem);
    box-sizing: border-box;
    cursor: pointer;
    background-color: white;
    border: var(--atlantis-std-border);
    border-radius: 1rem;
    box-shadow: 0 0.5rem 2.5rem rgba(52, 56, 70, 0.22);
    padding: 0.75rem 1rem;
    color: var(--atlantis-anthracite);
    font-size: 1rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}

#pwaInstallToast.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0s;
}

/* #pwaInstallToastAction / #pwaInstallToastDismiss werden oben gemeinsam mit den
   baugleichen Bedienelementen der Menü-Fußzeile gestylt. */