/* CTLG Phase 61 - PWA Menü V3: App-Launcher
   Diese Datei wird als LETZTE CSS-Datei geladen.
   Desktop-Menü bleibt wie Phase 58/teamfinder, Mobile/PWA ist komplett neu.
*/

:root {
    --ctlg-menu-height: 138px;
    --ctlg-menu-pad-x: 96px;
    --ctlg-logo-width: 278px;
    --ctlg-nav-offset: 76px;
    --ctlg-nav-gap: 30px;
    --ctlg-nav-font: 13px;
    --ctlg-action-height: 66px;
    --ctlg-dashboard-width: 212px;
    --ctlg-logout-width: 170px;
    --ctlg-bell-width: 66px;
    --ctlg-action-font: 15px;
}

html body .ctlg-header.site-header {
    box-sizing: border-box !important;
    width: 100% !important;
    height: var(--ctlg-menu-height) !important;
    min-height: var(--ctlg-menu-height) !important;
    max-height: var(--ctlg-menu-height) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 5000 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 0 var(--ctlg-menu-pad-x) !important;
    margin: 0 !important;
    background: rgba(0,0,0,.94) !important;
    border-bottom: 1px solid rgba(255,204,77,.12) !important;
    backdrop-filter: blur(14px) !important;
    overflow: visible !important;
}

html body .ctlg-header.site-header .ctlg-brand.brand {
    width: var(--ctlg-logo-width) !important;
    min-width: var(--ctlg-logo-width) !important;
    max-width: var(--ctlg-logo-width) !important;
    flex: 0 0 var(--ctlg-logo-width) !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body .ctlg-header.site-header .ctlg-brand.brand img {
    width: 100% !important;
    height: auto !important;
    max-height: 92px !important;
    display: block !important;
    object-fit: contain !important;
}

html body .ctlg-header.site-header .ctlg-main-nav.main-nav {
    height: var(--ctlg-menu-height) !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: var(--ctlg-nav-gap) !important;
    flex: 1 1 auto !important;
    margin: 0 0 0 var(--ctlg-nav-offset) !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

html body .ctlg-header.site-header .ctlg-main-nav.main-nav a {
    height: var(--ctlg-menu-height) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #f2f2f2 !important;
    font-size: var(--ctlg-nav-font) !important;
    font-weight: 900 !important;
    letter-spacing: .12em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    position: relative !important;
    text-decoration: none !important;
}

html body .ctlg-header.site-header .ctlg-main-nav.main-nav a.active::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 34px !important;
    height: 4px !important;
    background: linear-gradient(90deg,#e3a21c,#ffd56d) !important;
    box-shadow: 0 0 18px #e3a21c !important;
}

html body .ctlg-header.site-header .ctlg-header-actions.header-actions {
    height: var(--ctlg-menu-height) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 16px !important;
    flex: 0 0 auto !important;
    margin: 0 0 0 30px !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

html body .ctlg-header.site-header .notification-pill {
    width: var(--ctlg-bell-width) !important;
    min-width: var(--ctlg-bell-width) !important;
    height: var(--ctlg-action-height) !important;
    border-radius: 5px !important;
}

html body .ctlg-header.site-header .ctlg-header-actions.header-actions .btn,
html body .ctlg-header.site-header .ctlg-header-actions.header-actions .btn-primary,
html body .ctlg-header.site-header .ctlg-header-actions.header-actions .btn-secondary,
html body .ctlg-header.site-header .ctlg-header-actions.header-actions .btn-ghost,
html body .ctlg-header.site-header .ctlg-header-actions.header-actions .btn-gold {
    width: auto !important;
    height: var(--ctlg-action-height) !important;
    min-height: var(--ctlg-action-height) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 28px !important;
    border-radius: 5px !important;
    font-size: var(--ctlg-action-font) !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

html body .ctlg-header.site-header .ctlg-header-actions.header-actions .btn-ghost { min-width: var(--ctlg-dashboard-width) !important; }
html body .ctlg-header.site-header .ctlg-header-actions.header-actions .btn-gold { min-width: var(--ctlg-logout-width) !important; }
html body .ctlg-header.site-header .ctlg-nav-toggle.nav-toggle { display: none !important; }

@media (max-width: 1580px) and (min-width: 981px) {
    :root {
        --ctlg-menu-height: 132px;
        --ctlg-menu-pad-x: 58px;
        --ctlg-logo-width: 250px;
        --ctlg-nav-offset: 54px;
        --ctlg-nav-gap: 24px;
        --ctlg-nav-font: 12px;
        --ctlg-action-height: 58px;
        --ctlg-dashboard-width: 174px;
        --ctlg-logout-width: 132px;
        --ctlg-bell-width: 58px;
        --ctlg-action-font: 13px;
    }
    html body .ctlg-header.site-header .ctlg-header-actions.header-actions { margin-left: 22px !important; gap: 12px !important; }
    html body .ctlg-header.site-header .ctlg-header-actions.header-actions .btn,
    html body .ctlg-header.site-header .ctlg-header-actions.header-actions .btn-primary,
    html body .ctlg-header.site-header .ctlg-header-actions.header-actions .btn-secondary,
    html body .ctlg-header.site-header .ctlg-header-actions.header-actions .btn-ghost,
    html body .ctlg-header.site-header .ctlg-header-actions.header-actions .btn-gold { padding: 0 22px !important; }
}

/* ==============================
   MOBILE / PWA - V3 APP LAUNCHER
   ============================== */
@media (max-width: 2050px) {
    html, body {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    html body .ctlg-header.site-header {
        height: auto !important;
        min-height: 104px !important;
        max-height: none !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        column-gap: 14px !important;
        padding: 14px 18px !important;
        background: rgba(0,0,0,.96) !important;
        box-shadow: 0 14px 32px rgba(0,0,0,.38) !important;
    }

    html body .ctlg-header.site-header .ctlg-brand.brand {
        width: 214px !important;
        min-width: 0 !important;
        max-width: calc(100vw - 124px) !important;
        flex: none !important;
    }

    html body .ctlg-header.site-header .ctlg-main-nav.main-nav,
    html body .ctlg-header.site-header .ctlg-header-actions.header-actions {
        display: none !important;
    }

    /* Kein klassisches Burger-Icon mehr: App-Launcher mit 4 Punkten + MENU-Label */
    html body .ctlg-header.site-header .ctlg-nav-toggle.nav-toggle {
        display: grid !important;
        grid-template-columns: 22px auto !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        width: 88px !important;
        height: 54px !important;
        margin: 0 !important;
        padding: 0 14px !important;
        border: 1px solid rgba(234,176,50,.72) !important;
        border-radius: 999px !important;
        background: linear-gradient(180deg, rgba(28,30,32,.96), rgba(7,8,10,.98)) !important;
        box-shadow: 0 12px 28px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.10) !important;
        cursor: pointer !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
        position: relative !important;
        z-index: 10020 !important;
    }

    html body .ctlg-header.site-header .ctlg-nav-toggle.nav-toggle::before {
        content: "" !important;
        width: 22px !important;
        height: 22px !important;
        display: block !important;
        background:
            radial-gradient(circle, #ffd56d 0 4px, transparent 5px) 0 0/11px 11px,
            radial-gradient(circle, #ffd56d 0 4px, transparent 5px) 11px 0/11px 11px,
            radial-gradient(circle, #ffd56d 0 4px, transparent 5px) 0 11px/11px 11px,
            radial-gradient(circle, #ffd56d 0 4px, transparent 5px) 11px 11px/11px 11px !important;
        filter: drop-shadow(0 0 8px rgba(234,176,50,.35)) !important;
    }

    html body .ctlg-header.site-header .ctlg-nav-toggle.nav-toggle::after {
        content: "MENÜ" !important;
        color: #fff !important;
        font-size: 11px !important;
        font-weight: 1000 !important;
        letter-spacing: .10em !important;
        line-height: 1 !important;
    }

    html body .ctlg-header.site-header .ctlg-nav-toggle.nav-toggle span {
        display: none !important;
    }

    html body .ctlg-header.site-header .ctlg-nav-toggle.nav-toggle.is-active::before {
        background: none !important;
        width: 22px !important;
        height: 22px !important;
        position: relative !important;
    }

    html body .ctlg-header.site-header .ctlg-nav-toggle.nav-toggle.is-active::before,
    html body .ctlg-header.site-header .ctlg-nav-toggle.nav-toggle.is-active::after {
        content: "" !important;
    }

    html body .ctlg-header.site-header .ctlg-nav-toggle.nav-toggle.is-active::before {
        position: absolute !important;
        left: 20px !important;
        top: 50% !important;
        width: 22px !important;
        height: 3px !important;
        border-radius: 999px !important;
        background: #fff !important;
        transform: translateY(-50%) rotate(45deg) !important;
    }

    html body .ctlg-header.site-header .ctlg-nav-toggle.nav-toggle.is-active::after {
        position: absolute !important;
        left: 20px !important;
        top: 50% !important;
        width: 22px !important;
        height: 3px !important;
        border-radius: 999px !important;
        background: #fff !important;
        transform: translateY(-50%) rotate(-45deg) !important;
    }

    .ctlg-app-menu[hidden] { display: none !important; }

    .ctlg-app-menu {
        position: fixed !important;
        inset: 0 !important;
        z-index: 10000 !important;
        display: block !important;
        pointer-events: none !important;
    }

    .ctlg-app-menu.is-open { pointer-events: auto !important; }

    .app-menu-backdrop {
        position: absolute !important;
        inset: 0 !important;
        background: rgba(0,0,0,.78) !important;
        backdrop-filter: blur(13px) saturate(1.08) !important;
        opacity: 0 !important;
        transition: opacity .24s ease !important;
    }

    .ctlg-app-menu.is-open .app-menu-backdrop { opacity: 1 !important; }

    /* V3: Fullscreen App-Launcher statt alter langer Kartenliste */
    .app-menu-panel {
        position: absolute !important;
        left: 12px !important;
        right: 12px !important;
        top: calc(18px + env(safe-area-inset-top)) !important;
        bottom: calc(14px + env(safe-area-inset-bottom)) !important;
        max-height: none !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 16px !important;
        border: 1px solid rgba(234,176,50,.34) !important;
        border-radius: 34px !important;
        background:
            radial-gradient(circle at 85% 0, rgba(234,176,50,.20), transparent 32%),
            radial-gradient(circle at 0 100%, rgba(130,16,16,.18), transparent 36%),
            linear-gradient(180deg, rgba(24,26,29,.98), rgba(4,5,7,.985)) !important;
        box-shadow: 0 30px 120px rgba(0,0,0,.80), inset 0 1px 0 rgba(255,255,255,.09) !important;
        transform: translateY(22px) scale(.96) !important;
        opacity: 0 !important;
        transition: transform .26s cubic-bezier(.2,.85,.2,1), opacity .22s ease !important;
    }

    .ctlg-app-menu.is-open .app-menu-panel {
        transform: translateY(0) scale(1) !important;
        opacity: 1 !important;
    }

    .app-menu-head {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 54px !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 0 0 14px !important;
        margin: 0 0 14px !important;
        border-bottom: 1px solid rgba(255,255,255,.10) !important;
    }

    .app-menu-logo { width: 220px !important; max-width: 100% !important; }
    .app-menu-title { display: none !important; }

    .app-menu-close {
        width: 54px !important;
        height: 54px !important;
        border-radius: 18px !important;
        border: 1px solid rgba(255,255,255,.14) !important;
        background: rgba(255,255,255,.07) !important;
        color: transparent !important;
        font-size: 0 !important;
        position: relative !important;
        display: grid !important;
        place-items: center !important;
    }

    .app-menu-close::before,
    .app-menu-close::after {
        content: "" !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        width: 25px !important;
        height: 3px !important;
        border-radius: 999px !important;
        background: #fff !important;
    }
    .app-menu-close::before { transform: translate(-50%, -50%) rotate(45deg) !important; }
    .app-menu-close::after { transform: translate(-50%, -50%) rotate(-45deg) !important; }

    .app-menu-links {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .app-menu-links a {
        min-height: 112px !important;
        display: grid !important;
        grid-template-rows: auto 1fr !important;
        align-items: end !important;
        gap: 12px !important;
        padding: 16px !important;
        border: 1px solid rgba(255,255,255,.11) !important;
        border-radius: 26px !important;
        background:
            radial-gradient(circle at 100% 0, rgba(234,176,50,.13), transparent 46%),
            rgba(255,255,255,.045) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.055) !important;
        color: #fff !important;
        text-decoration: none !important;
        overflow: hidden !important;
    }

    .app-menu-links a.active {
        border-color: rgba(234,176,50,.72) !important;
        background:
            radial-gradient(circle at 100% 0, rgba(255,213,109,.30), transparent 52%),
            linear-gradient(180deg, rgba(234,176,50,.18), rgba(255,255,255,.045)) !important;
        box-shadow: 0 0 24px rgba(234,176,50,.13), inset 0 1px 0 rgba(255,255,255,.09) !important;
    }

    .app-menu-links a i {
        display: grid !important;
        place-items: center !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 16px !important;
        background: rgba(234,176,50,.16) !important;
        color: #ffd56d !important;
        font-size: 19px !important;
    }

    .app-menu-links a span {
        display: block !important;
        align-self: end !important;
        color: #fff !important;
        font-size: 13px !important;
        font-weight: 1000 !important;
        letter-spacing: .09em !important;
        line-height: 1.08 !important;
        text-transform: uppercase !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .app-menu-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        margin-top: 14px !important;
        padding-top: 14px !important;
        border-top: 1px solid rgba(255,255,255,.10) !important;
    }

    .app-menu-actions .btn,
    .app-menu-actions a {
        min-height: 58px !important;
        border-radius: 20px !important;
        font-size: 13px !important;
        letter-spacing: .08em !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 9px !important;
        text-align: center !important;
    }

    .app-menu-actions .btn-gold {
        background: linear-gradient(180deg,#ffd56d,#d89a19) !important;
        color: #050505 !important;
    }
}

@media (max-width: 390px) {
    .app-menu-links a { min-height: 102px !important; padding: 14px !important; }
    .app-menu-links a span { font-size: 12px !important; letter-spacing: .07em !important; }
    .app-menu-actions { grid-template-columns: 1fr !important; }
    html body .ctlg-header.site-header .ctlg-brand.brand { width: 184px !important; }
    html body .ctlg-header.site-header .ctlg-nav-toggle.nav-toggle { width: 76px !important; }
    html body .ctlg-header.site-header .ctlg-nav-toggle.nav-toggle::after { display: none !important; }
}


/* CTLG Phase 73 - PWA Menü: Icons/Text sauber zentriert */
@media (max-width: 2050px) {
    html body .ctlg-header.site-header .ctlg-nav-toggle.nav-toggle {
        display: grid !important;
        grid-template-columns: 1fr !important;
        place-items: center !important;
        width: 78px !important;
        height: 58px !important;
        padding: 0 !important;
    }

    html body .ctlg-header.site-header .ctlg-nav-toggle.nav-toggle::before {
        margin: 0 auto !important;
        transform: none !important;
    }

    html body .ctlg-header.site-header .ctlg-nav-toggle.nav-toggle::after {
        display: none !important;
    }

    html body .ctlg-header.site-header .ctlg-nav-toggle.nav-toggle span {
        display: none !important;
    }

    .app-menu-links a {
        display: grid !important;
        grid-template-rows: 1fr auto !important;
        justify-items: center !important;
        align-items: center !important;
        text-align: center !important;
        padding: 18px 12px !important;
    }

    .app-menu-links a i {
        margin: 0 auto !important;
        display: grid !important;
        place-items: center !important;
        text-align: center !important;
        line-height: 1 !important;
    }

    .app-menu-links a span {
        width: 100% !important;
        align-self: center !important;
        text-align: center !important;
        white-space: normal !important;
    }
}


/* CTLG Phase 76 - PWA Icon-Zentrierung auch auf alten Teamfinder-Seiten */
@media (max-width: 2050px) {
    .nav-toggle, .ctlg-nav-toggle, .mobile-menu-toggle, .hamburger, button[aria-label*="Menü"], button[aria-label*="Navigation"] {
        display: grid !important;
        place-items: center !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }
    .nav-toggle::before, .ctlg-nav-toggle::before, .mobile-menu-toggle::before, .hamburger::before,
    .nav-toggle span, .ctlg-nav-toggle span, .mobile-menu-toggle span, .hamburger span {
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }
    .app-menu-links a, .mobile-nav a, .mobile-menu a, .ctlg-mobile-menu a {
        justify-items: center !important;
        align-items: center !important;
        text-align: center !important;
    }
    .app-menu-links a i, .mobile-nav a i, .mobile-menu a i, .ctlg-mobile-menu a i {
        display: grid !important;
        place-items: center !important;
        margin: 0 auto 10px !important;
        line-height: 1 !important;
        text-align: center !important;
    }
}


/* CTLG Data Center Admin-Menü 1.0 */
.ctlg-main-nav .ctlg-nav-group{
    position:relative;
    display:flex;
    align-items:center;
}
.ctlg-main-nav .ctlg-nav-group>summary{
    min-height:42px;
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:0 12px;
    border-radius:10px;
    color:inherit;
    cursor:pointer;
    list-style:none;
    white-space:nowrap;
    user-select:none;
}
.ctlg-main-nav .ctlg-nav-group>summary::-webkit-details-marker{display:none}
.ctlg-main-nav .ctlg-nav-group>summary>i:first-child{color:#e7b133}
.ctlg-main-nav .ctlg-nav-group-arrow{margin-left:2px;font-size:9px;transition:transform .18s ease}
.ctlg-main-nav .ctlg-nav-group[open] .ctlg-nav-group-arrow{transform:rotate(180deg)}
.ctlg-main-nav .ctlg-nav-group.active>summary,
.ctlg-main-nav .ctlg-nav-group>summary:hover{
    background:rgba(231,177,51,.10);
    color:#efc663;
}
.ctlg-nav-submenu{
    position:absolute;
    top:calc(100% + 10px);
    right:0;
    z-index:120;
    width:260px;
    display:grid;
    gap:5px;
    padding:9px;
    border:1px solid #303944;
    border-radius:14px;
    background:rgba(9,12,16,.98);
    box-shadow:0 22px 65px rgba(0,0,0,.52);
    backdrop-filter:blur(18px);
}
.ctlg-nav-submenu:before{
    content:"";
    position:absolute;
    right:25px;
    bottom:100%;
    border:8px solid transparent;
    border-bottom-color:#303944;
}
.ctlg-nav-submenu a{
    min-height:42px;
    display:flex!important;
    align-items:center;
    gap:10px;
    padding:0 11px!important;
    border-radius:10px;
    color:#dbe1e6!important;
    text-decoration:none;
}
.ctlg-nav-submenu a i{
    width:20px;
    color:#8d98a3;
    text-align:center;
}
.ctlg-nav-submenu a:hover,
.ctlg-nav-submenu a.active{
    background:rgba(231,177,51,.10)!important;
    color:#efc663!important;
}
.ctlg-nav-submenu a:hover i,
.ctlg-nav-submenu a.active i{color:#e7b133}

.ctlg-mobile-nav-group{
    display:block;
    border:1px solid transparent;
    border-radius:13px;
}
.ctlg-mobile-nav-group>summary{
    min-height:48px;
    display:grid;
    grid-template-columns:28px minmax(0,1fr) 18px;
    align-items:center;
    gap:10px;
    padding:0 13px;
    border-radius:12px;
    color:#eef2f5;
    cursor:pointer;
    list-style:none;
}
.ctlg-mobile-nav-group>summary::-webkit-details-marker{display:none}
.ctlg-mobile-nav-group>summary>i:first-child{
    color:#e7b133;
    text-align:center;
}
.ctlg-mobile-nav-arrow{
    font-size:10px;
    transition:transform .18s ease;
}
.ctlg-mobile-nav-group[open] .ctlg-mobile-nav-arrow{transform:rotate(180deg)}
.ctlg-mobile-nav-group.active,
.ctlg-mobile-nav-group[open]{
    border-color:rgba(231,177,51,.24);
    background:rgba(231,177,51,.045);
}
.ctlg-mobile-nav-children{
    display:grid;
    gap:4px;
    padding:0 8px 8px 35px;
}
.ctlg-mobile-nav-children a{
    min-height:42px!important;
    padding:0 11px!important;
    border-left:1px solid #303944;
    border-radius:0 10px 10px 0!important;
    background:#090d12!important;
}
.ctlg-mobile-nav-children a.active{
    border-left-color:#e7b133;
    background:rgba(231,177,51,.10)!important;
    color:#efc663!important;
}