/* ==========================================================
   EVENTS4TRUCKS CMS
   Layout
========================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{

    width:100%;
    min-height:100%;
    height:auto;
    overflow-x:hidden;
    overflow-y:auto;

    font-family:Inter,"Segoe UI",sans-serif;

    background:#12161d;

    color:#fff;

}

.wrapper{

    width:100%;
    min-height:100vh;
    height:auto;

    display:grid;

    gap:22px;

    padding:22px;

    grid-template-columns:

        280px

        1fr

        360px;

    grid-template-rows:

        90px

        1fr;

}

/* ================= HEADER ================= */

.header{

    grid-column:1 / 4;

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:#1b212b;

    border-radius:22px;

    padding:18px 28px;

    border:1px solid #2d3644;

    box-shadow:

        0 15px 40px rgba(0,0,0,.35);

}

.brand{

    display:flex;

    align-items:center;

    gap:28px;

}

.brand img{

    height:52px;

    width:auto;

    transition:.25s;

}

.brand img:hover{

    transform:scale(1.05);

}

.topbar{

    display:flex;

    align-items:center;

    gap:18px;

}

/* ================= SEARCH ================= */

.searchbox{

    width:340px;

    height:48px;

    display:flex;

    align-items:center;

    gap:14px;

    padding:0 18px;

    border-radius:14px;

    background:#252d39;

}

.searchbox i{

    color:#ff9500;

}

.searchbox input{

    width:100%;

    border:none;

    outline:none;

    background:none;

    color:white;

}

.searchbox input::placeholder{

    color:#8b97aa;

}

/* ================= ICONS ================= */

.circle{

    width:48px;

    height:48px;

    border:none;

    border-radius:50%;

    background:#252d39;

    color:white;

    transition:.25s;

}

.circle:hover{

    background:#ff9500;

    transform:translateY(-3px);

}

.profile{

    width:48px;

    height:48px;

    border-radius:50%;

    object-fit:cover;

    border:2px solid #ff9500;

}


.profile-placeholder{
    display:grid;
    place-items:center;
    overflow:hidden;
    background:#303948;
    color:#ffae36;
    font-size:22px;
    font-weight:800;
    line-height:1;
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
}
.profile-placeholder.has-photo{
    color:transparent;
}
.role-menu summary{
    list-style:none;
}
.role-menu summary::-webkit-details-marker{
    display:none;
}

/* ================= SIDEBAR ================= */

.sidebar{

    background:#1b212b;

    border-radius:22px;

    padding:24px;

    border:1px solid #2d3644;

    display:flex;

    flex-direction:column;

    gap:8px;

}

.menu-title{

    color:#8b97aa;

    font-size:12px;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:15px;

}

.menu{

    display:flex;

    align-items:center;

    gap:16px;

    padding:15px 18px;

    border-radius:14px;

    cursor:pointer;

    transition:.25s;

    text-decoration:none;

    color:white;

}

.menu i{

    font-size:20px;

}

.menu:hover{

    background:#ff9500;

    transform:translateX(8px);

}

.menu.active{

    background:#ff9500;

}

/* ================= MAIN ================= */

.main{

    display:flex;

    flex-direction:column;

    gap:22px;

}

/* ================= RIGHT ================= */

.right{

    display:flex;

    flex-direction:column;

    gap:22px;

}
/* Logo-Größen: Events4Trucks bleibt, Partnerlogos besser lesbar */
.brand img:nth-child(1){height:52px;max-width:220px;object-fit:contain}
.brand img:nth-child(2){height:68px;max-width:235px;object-fit:contain}
.brand img:nth-child(3){height:82px;max-width:255px;object-fit:contain}
@media(max-width:1100px){.brand{gap:14px}.brand img:nth-child(2){height:58px}.brand img:nth-child(3){height:68px}}
/* V9: verlinkte Markenlogos */
.brand a{display:flex;align-items:center;justify-content:center;text-decoration:none}
.brand a:nth-child(1) img{height:52px;max-width:220px;object-fit:contain}
.brand a:nth-child(2) img{height:68px;max-width:235px;object-fit:contain}
.brand a:nth-child(3) img{height:82px;max-width:255px;object-fit:contain}


/* ==========================================================
   V24 – Mobile Startseite / iPhone Safari
   Desktop-Layout bleibt unverändert.
========================================================== */
.mobile-menu-toggle{display:none}

@media (max-width: 900px){
    html,
    body{
        width:100%;
        min-height:100%;
        height:auto;
        overflow-x:hidden;
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
    }

    body.menu-open{overflow:hidden}

    body::before{
        content:"";
        position:fixed;
        inset:0;
        z-index:1490;
        background:rgba(5,8,12,.68);
        opacity:0;
        visibility:hidden;
        transition:opacity .22s ease,visibility .22s ease;
        pointer-events:none;
    }

    body.menu-open::before{
        opacity:1;
        visibility:visible;
        pointer-events:auto;
    }

    .wrapper{
        width:100%;
        min-height:100vh;
        height:auto;
        padding:10px;
        gap:14px;
        display:grid;
        grid-template-columns:minmax(0,1fr);
        grid-template-rows:auto auto auto;
    }

    .header{
        grid-column:1;
        width:100%;
        min-width:0;
        position:sticky;
        top:8px;
        z-index:1200;
        padding:10px 12px;
        border-radius:16px;
        flex-direction:column;
        align-items:stretch;
        gap:10px;
    }

    .brand{
        width:100%;
        gap:8px;
        justify-content:space-between;
        min-width:0;
    }

    .brand a{
        flex:1 1 0;
        min-width:0;
    }

    .brand a:nth-child(1){flex:1.35 1 0}

    .brand a:nth-child(1) img,
    .brand a:nth-child(2) img,
    .brand a:nth-child(3) img{
        width:100%;
        max-width:100%;
        height:42px;
        object-fit:contain;
    }

    .brand a:nth-child(2) img{height:46px}
    .brand a:nth-child(3) img{height:48px}

    .topbar{
        width:100%;
        min-width:0;
        gap:8px;
        justify-content:flex-end;
    }

    .mobile-menu-toggle{
        display:inline-grid;
        place-items:center;
        flex:0 0 44px;
        width:44px;
        height:44px;
        font-size:24px;
        background:#ff9500;
        color:#171b20;
    }

    .searchbox{
        flex:1 1 auto;
        width:auto;
        min-width:0;
        height:44px;
    }

    .topbar>.circle:not(.mobile-menu-toggle),
    .current-role{
        display:none!important;
    }

    .topbar>.btn-warning{
        flex:0 0 auto;
        min-height:44px;
        white-space:nowrap;
    }

    .profile{
        width:44px;
        height:44px;
    }

    .role-menu-panel{
        position:fixed;
        top:116px;
        right:12px;
        max-width:calc(100vw - 24px);
    }

    .sidebar{
        position:fixed;
        top:0;
        left:0;
        bottom:0;
        z-index:1500;
        width:min(86vw,340px);
        max-width:340px;
        height:100dvh;
        overflow-y:auto;
        overscroll-behavior:contain;
        border-radius:0 22px 22px 0;
        padding:24px 18px calc(32px + env(safe-area-inset-bottom));
        transform:translateX(-105%);
        transition:transform .24s ease;
        box-shadow:20px 0 60px rgba(0,0,0,.5);
    }

    body.menu-open .sidebar{transform:translateX(0)}

    .menu{
        padding:14px 15px;
        min-height:52px;
    }

    .menu:hover{transform:none}

    .main,
    .right{
        width:100%;
        min-width:0;
        overflow:visible;
    }

    .main{grid-column:1;grid-row:2}
    .right{grid-column:1;grid-row:3}

    .hero{
        width:100%;
        height:auto;
        min-height:260px;
        max-height:none;
    }

    .hero img{
        min-height:260px;
        object-fit:cover!important;
    }

    .hero-overlay{
        left:20px;
        right:20px;
        bottom:20px;
        max-width:none;
    }

    .hero-overlay h1{
        font-size:clamp(30px,10vw,42px);
        overflow-wrap:anywhere;
    }

    .hero-overlay p{font-size:16px}

    .dashboard-grid,
    .dashboard-overview,
    .role-dashboard-grid{
        grid-template-columns:minmax(0,1fr)!important;
    }

    .section-title{
        align-items:flex-start;
        gap:10px;
        flex-wrap:wrap;
    }

    .right-card,
    .card,
    .dashboard-overview a{
        min-width:0;
        overflow-wrap:anywhere;
    }
}

@media (max-width: 520px){
    .wrapper{padding:8px}
    .header{top:6px;padding:9px}
    .searchbox{display:none}
    .topbar{justify-content:space-between}
    .topbar>.btn-warning{margin-left:auto}
    .brand a:nth-child(1) img{height:36px}
    .brand a:nth-child(2) img{height:40px}
    .brand a:nth-child(3) img{height:42px}
    .hero,.hero img{min-height:230px}
    .hero-overlay{left:16px;right:16px;bottom:16px}
    .dashboard-overview a{padding:17px}
}


/* V26 Header logo tuning */
.brand{display:flex;align-items:center;gap:20px}
.brand a:nth-child(1) img{height:56px}
.brand a:nth-child(2){
background:rgba(255,255,255,.10);
padding:8px 14px;
border-radius:14px;
backdrop-filter:blur(6px);
}
.brand a:nth-child(2) img{height:46px}
.brand a:nth-child(3) img{height:78px}
@media(max-width:768px){
.brand{gap:10px}
.brand a:nth-child(1) img{height:42px}
.brand a:nth-child(2){padding:4px 8px}
.brand a:nth-child(2) img{height:34px}
.brand a:nth-child(3) img{height:54px}
}

/* ==========================================================
   V31 – zuverlässiges Seitenscrollen auf Desktop und Mobil
========================================================== */
html,
body {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: scroll !important;
    overscroll-behavior-y: auto;
}

body {
    position: static !important;
    touch-action: pan-y;
}

.wrapper,
.wrapper.module-wrapper {
    height: auto !important;
    min-height: 100vh !important;
    max-height: none !important;
    grid-template-rows: 90px auto !important;
    overflow: visible !important;
}

.main,
.right,
.module-main,
.module-right {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

.sidebar {
    align-self: start;
}

@media (min-width: 901px) {
    body.menu-open {
        overflow-y: scroll !important;
    }
}