.mobile-footer-nav {
        display: none;
        position: fixed; left: 0; right: 0; bottom: 0;
        height: 50px;
        background: #a70909;
        z-index: 500;
        align-items: stretch;
        justify-content: space-around;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.25);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        /* Verhindert das Gleiten/Flackern der Leiste beim Scrollen auf iOS
           Safari: erzwingt eine eigene GPU-Compositing-Ebene, statt die
           Leiste bei jedem Scroll-Frame neu einzuzeichnen. */
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        will-change: transform;
    }
    .mobile-footer-nav .mfn-item {
        flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 2px; color: #fff; text-decoration: none; font-size: 0.6rem; font-weight: 600;
        background: none; border: none; font-family: inherit; cursor: pointer; padding: 0;
    }
    .mobile-footer-nav .mfn-item i { font-size: 1.05rem; }
    .mobile-footer-nav .mfn-icon-wrap { position: relative; display: inline-flex; }
    .mobile-footer-nav .mfn-badge {
        position: absolute; top: -4px; right: -7px;
        background: #fff; color: #a70909; border-radius: 9px;
        padding: 0 4px; font-size: 0.56rem; font-weight: 700;
        line-height: 13px; min-width: 13px; text-align: center;
    }
    .mobile-footer-nav .mfn-label-klein {
        font-size: 0.48rem; line-height: 1.1; max-width: 60px; text-align: center;
    }
    .mobile-footer-nav .mfn-plus-wrap {
        flex: 0 0 58px; display: flex; align-items: flex-start; justify-content: center;
    }
    .mobile-footer-nav .mfn-plus {
        width: 42px; height: 42px; margin-top: -16px;
        /* !important, weil einzelne Unterseiten (z. B. Themen-Ansicht) eine
           allgemeinere Button-Regel mit border-radius: 8px mitbringen, die
           unseren Kreis sonst eckig macht. So bleibt er IMMER rund. */
        border-radius: 50% !important; background: #fff; color: #a70909;
        border: 3px solid #a70909; font-size: 1.1rem;
        display: flex; align-items: center; justify-content: center;
        box-shadow: 0 2px 10px rgba(0,0,0,0.35);
        cursor: pointer; text-decoration: none;
    }
    .mobile-footer-nav .mfn-plus:active { transform: scale(0.94); }

    /* ===== Große Benachrichtigungs-Glocke (mittig, statt "+") ===== */
    .mobile-footer-nav .mfn-glocke-gross { position: relative; }
    .mobile-footer-nav .mfn-glocke-gross i { transform-origin: 50% 12%; }
    .mobile-footer-nav .mfn-badge-gross {
        position: absolute; top: -3px; right: -3px;
        background: #a70909; color: #fff; border: 2px solid #fff;
        border-radius: 10px; padding: 0 5px; font-size: 0.6rem; font-weight: 700;
        line-height: 15px; min-width: 15px; text-align: center;
    }
    /* Wackeln + sanftes Pulsieren, sobald eine neue Benachrichtigung da ist */
    .mobile-footer-nav .mfn-glocke-gross.hat-neue {
        animation: mfnGlockePuls 2.4s ease-in-out infinite;
    }
    .mobile-footer-nav .mfn-glocke-gross.hat-neue i {
        animation: mfnGlockeWackeln 2.4s ease-in-out infinite;
    }
    @keyframes mfnGlockeWackeln {
        0%, 45%, 100% { transform: rotate(0deg); }
        5%  { transform: rotate(16deg); }
        10% { transform: rotate(-14deg); }
        15% { transform: rotate(12deg); }
        20% { transform: rotate(-10deg); }
        25% { transform: rotate(8deg); }
        30% { transform: rotate(-6deg); }
        35% { transform: rotate(4deg); }
        40% { transform: rotate(-2deg); }
    }
    @keyframes mfnGlockePuls {
        0%, 45%, 100% { box-shadow: 0 2px 10px rgba(0,0,0,0.35); }
        20% { box-shadow: 0 2px 10px rgba(0,0,0,0.35), 0 0 0 5px rgba(167,9,9,0.25); }
    }
    @media (prefers-reduced-motion: reduce) {
        .mobile-footer-nav .mfn-glocke-gross.hat-neue,
        .mobile-footer-nav .mfn-glocke-gross.hat-neue i { animation: none; }
    }

    @media (max-width: 768px) {
        .mobile-footer-nav { display: flex; }
        /* body padding entfernt: das triggert Scrolling bei Keyboard-Popup
           und hebt position:fixed des Footer auf. Footer überlagert jetzt
           Content am unteren Ende, aber das ist besser als broken fixation. */

        /* Der eigentliche Footer (Impressum/Datenschutz/Kontakt-Links) rutscht
           dadurch unter die fixe untere Menüleiste (50px + safe-area). Anders
           als beim body-padding oben betrifft das NUR den Footer selbst -
           kein Risiko fürs Keyboard-Popup-Scrolling weiter oben auf der Seite -
           also hier gefahrlos Platz reservieren, damit die Links sichtbar bleiben. */
        .site-footer { padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px)); }
    }

    /* ===== SCHMALE DESKTOP-VARIANTE DER FUSS-NAV (nur eingeloggt) =====
       Glocke/PN/"Menü" bleiben bewusst NUR oben im Header (dort bereits als
       eigene Icons sichtbar) - unten kommen auf Desktop stattdessen Foren,
       Neues Thema, Artikel, Wettbewerbe und Live Spiele. .mfn-immer-sichtbar wird nur bei
       eingeloggten Nutzern gesetzt (siehe <nav> weiter unten), Gäste haben
       oben im Header bereits alles (Anmelden/Registrieren/Menü) und bekommen
       daher auf Desktop keine zusätzliche Leiste.
       WICHTIG: .mfn-plus-wrap/.mfn-item haben oben eigene "display"-Regeln
       mit höherer Selektor-Spezifität (.mobile-footer-nav .mfn-item) als ein
       einfaches ".mfn-mobil-only{display:none}" - ohne !important gewinnt
       sonst die Basis-Regel und das Element bleibt sichtbar (genau der Bug,
       der die Glocke auf Desktop nicht verschwinden ließ). Deshalb hier
       durchgehend !important. */
    .mfn-desktop-only { display: none !important; }
    .mobile-footer-nav.mfn-immer-sichtbar { display: flex; }
    @media (min-width: 769px) {
        .mfn-mobil-only {
            display: none !important;
        }
        .mobile-footer-nav.mfn-immer-sichtbar .mfn-desktop-only {
            display: flex !important;
        }
        @media (any-hover: hover) {
            .mobile-footer-nav.mfn-immer-sichtbar .mfn-item:hover {
                background: rgba(255,255,255,0.12);
            }
        }
        /* Andere unten fixierte Elemente müssen der neuen Desktop-Leiste
           ausweichen, genau wie sie es auf Mobile schon für die 50px hohe
           Leiste tun. */
        body:has(.mobile-footer-nav.mfn-immer-sichtbar) .site-footer {
            padding-bottom: calc(50px + env(safe-area-inset-bottom, 0px));
        }
        body:has(.mobile-footer-nav.mfn-immer-sichtbar) .admin-impersonate-switch {
            bottom: calc(60px + env(safe-area-inset-bottom, 0px));
        }
    }