/* =============================================
   MOBILE.CSS - Universal Mobile Framework
   Desktop-First: Nur @media (max-width: 768px)

   WICHTIG: Diese Datei enthält NUR Rahmen-Elemente
   aus index.php (#kopfzeile, #content, nav, etc.)

   Plugin-spezifische Styles gehören in die
   jeweiligen Plugin-CSS-Dateien!
   ============================================= */

@media (max-width: 768px) {

    /* =============================================
       KOPFZEILE - Responsive Container
       ============================================= */

    #kopfzeile {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0 16px;
        box-sizing: border-box;
        height: auto;
        min-height: 80px;
        background-size: 100px auto;  /* Vergrößert von 50px auf 100px */
        background-position: 16px 16px;
    }

    /* Logo responsive positionieren */
    #logo_top {
        left: auto;
        right: 16px;
        top: 16px;
        width: 128px;  /* Angepasst für größeres Logo */
        height: 50px;  /* Von 38px auf 50px */
        background-size: contain;
        background-repeat: no-repeat;
    }

    /* =============================================
       HAMBURGER-MENÜ Button
       ============================================= */

    #showmenu {
        display: block !important;
        position: absolute;
        top: 20px;
        left: 20px;  /* Etwas mehr Abstand zum Signet */
        z-index: 1001;
        width: 44px;
        height: 44px;
    }

    #showmenu a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        background: rgba(45, 173, 99, 0.9);  /* Leicht transparent für Integration ins Signet */
        border-radius: 6px;
        text-decoration: none;
        transition: background 0.3s;
    }

    #showmenu a:hover {
        background: #0a9f46;
    }

    #showmenu span {
        font-size: 28px;
        color: white;
        line-height: 1;
    }

    /* Hamburger-Menü auf Login-Seite ausblenden (wenn kein Menü vorhanden) */
    body:not(:has(nav a)) #showmenu {
        display: none !important;
    }

    /* =============================================
       NAVIGATION - Slide-In Drawer
       ============================================= */

    nav {
        display: block !important;
        position: fixed;
        top: 0;
        left: -100%;
        width: 80%;
        max-width: 320px;
        height: 100vh;
        background: white;
        z-index: 1000;
        overflow-y: auto;
        transition: left 0.3s ease;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
        padding-top: 80px;
        padding-bottom: 200px; /* Platz für Account-Bereich */
        box-sizing: border-box;
    }

    nav.show {
        left: 0;
    }

    /* Body-Scroll blockieren beim geöffneten Menü */
    body.menu-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }

    /* Overlay beim geöffneten Menü */
    body.menu-open::after {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
    }

    /* Ebene 1 - Hauptmenü vertikal */
    nav ul {
        display: block;
        position: static;
        left: auto;
        top: auto;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0;
        border: none;
    }

    nav li {
        display: block;
        width: 100%;
        height: auto;
        padding: 0;
    }

    nav a {
        display: block;
        padding: 14px 20px;
        min-height: 48px;
        line-height: 20px;
        box-sizing: border-box;
        white-space: normal;
    }

    nav span.trenner {
        display: none;
    }

    /* Ebene 2 - Untermenü */
    nav ul ul {
        display: none;  /* Initial ausgeblendet */
        position: static;
        top: auto;
        left: auto;
        width: 100%;
        height: auto;
        min-width: auto;
        background-color: #e5e7e3;
        padding: 0;
        margin: 0;
        line-height: normal;
        border-radius: 0;
    }

    /* Untermenü anzeigen, wenn Parent .open oder .selected hat */
    nav ul li.open > ul,
    nav ul li.selected > ul {
        display: block;
    }

    nav ul li ul li {
        display: block;
        padding: 0;
    }

    nav ul li ul li a {
        padding-left: 40px;
        font-size: 14px;
    }

    /* Ebene 3 - Untermenü */
    nav ul ul ul {
        display: none;  /* Initial ausgeblendet */
        position: static;  /* Desktop-absolute überschreiben */
        top: auto;
        left: auto;
        width: 100%;
        height: auto;
        min-width: auto;
        background-color: #cbe8d9;
        padding: 0;
        margin: 0;
        line-height: normal;
        border-radius: 0;
    }

    /* Ebene 3 anzeigen, wenn Ebene-2-Parent .open oder .selected hat */
    nav ul li.open > ul li.open > ul,
    nav ul li.open > ul li.selected > ul,
    nav ul li.selected > ul li.open > ul,
    nav ul li.selected > ul li.selected > ul {
        display: block;
    }

    nav ul ul li ul li a {
        padding-left: 60px;
        font-size: 13px;
        color: #000 !important;
    }

    /* =============================================
       ACCOUNT-BEREICH - Ins Mobile Menü integriert
       ============================================= */

    #account {
        position: fixed;
        z-index: 1001;  /* Über dem nav (z-index 1000) */
        left: -100%;
        right: auto;
        top: auto;
        bottom: 0;
        width: 80%;  /* Gleiche Breite wie nav */
        max-width: 320px;
        height: auto;
        min-height: 120px;
        text-align: left;
        background: #e5e7e3;
        padding: 16px 20px;
        font-size: 14px;
        border-radius: 0;
        border-top: 2px solid #9d9d95;
        transition: left 0.3s ease;
        box-sizing: border-box;
    }

    /* Account mit Menü einblenden */
    nav.show ~ #account {
        left: 0;
    }

    #account.selected {
        background: #e5e7e3;
    }

    #account.pic {
        background-image: none;
    }

    #account.pic .portrait {
        position: absolute;
        width: 56px;
        height: 56px;
        top: 16px;
        left: 20px;
        background-size: cover;
        border-radius: 50%;
        border: 3px solid white;
    }

    #account.abwesend {
        background: #e5e7e3;
    }

    /* Account-Icon für Nutzer mit Portrait */
    #account.pic::before {
        content: '';
        display: block;
        width: 56px;
        height: 56px;
        margin-bottom: 12px;
        background: url('/images/icon_account.png?t=1') center center / 40px 40px no-repeat #9d9d95;
        border-radius: 50%;
    }

    #account.pic.abwesend::before {
        background-image: url('/images/icon_account_abw.png?t=1');
        background-color: #c20000;
    }

    /* Account-Text anzeigen */
    #account a {
        display: block;
        font-size: 13px;
        line-height: 1.3;
        color: #000;
        padding: 4px 0;
        white-space: normal;
    }

    #account a:hover {
        color: #2dad63;
    }

    /* Logout-Button prominent */
    #account a.logout {
        display: inline-block;
        position: static;
        width: auto;
        margin: 12px 0 0 0;
        height: 44px;
        line-height: 44px;
        padding: 0 24px;
        background-color: #2dad63;
        color: white;
        text-transform: uppercase;
        font-weight: 600;
        font-size: 14px;
        text-align: center;
        border-radius: 6px;
        transition: background 0.3s;
    }

    #account a.logout:hover {
        background-color: #0a9f46;
        color: white;
    }

    /* Nutzer ohne Portrait */
    #account:not(.pic)::before {
        content: '';
        display: block;
        width: 56px;
        height: 56px;
        margin-bottom: 12px;
        background: url('/images/icon_account.png?t=1') center center / 40px 40px no-repeat #9d9d95;
        border-radius: 50%;
    }

    #account:not(.pic).abwesend::before {
        background-image: url('/images/icon_account_abw.png?t=1');
        background-color: #c20000;
    }

    /* =============================================
       CONTENT - Responsive Container
       ============================================= */

    #content {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 16px;
        box-sizing: border-box;
        min-height: calc(100vh - 80px);
    }

    /* =============================================
       TOPLINK (Scroll to Top)
       ============================================= */

    #toplink {
        left: auto;
        right: 16px;
        bottom: 16px;
        width: 44px;
        height: 44px;
        background-size: contain;
    }

    /* =============================================
       MESSAGE (Benachrichtigungen)
       ============================================= */

    #message {
        top: 50%;
        transform: translateY(-50%);
        padding: 16px;
        font-size: 14px;
        line-height: 150%;
    }
}