*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Inter,sans-serif;
}

body{

    margin:0;

    background:#090909;

    color:white;

    font-family:Arial,sans-serif;

    overflow:hidden;

}
.background{

    position:fixed;
    inset:0;

    background-image:url("../images/hintergrund.png");
    background-size:cover;
    background-position:center;

    filter:brightness(.25) blur(2px);

    z-index:-2;

}

.background::after{

    content:"";

    position:absolute;
    inset:0;

    background:linear-gradient(
        135deg,
        rgba(0,0,0,.80),
        rgba(0,0,0,.55)
    );

}

.app{

    display:flex;

    height:100vh;

}

/* SIDEBAR */

.sidebar{

    width:300px;

    background:rgba(15,15,15,.82);

    backdrop-filter:blur(20px);

    border-right:1px solid rgba(255,215,120,.15);

    padding:30px;

    animation:slideLeft .7s;

}

.logoBox{

    text-align:center;

    margin-bottom:45px;

}

.logoBox img{

    width:95px;

    margin-bottom:15px;

}

.logoBox h1{

    font-size:34px;

    color:#f2c14f;

    letter-spacing:4px;

}

.logoBox span{

    color:#888;

    font-size:14px;

}

.sidebar nav{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.sidebar button{

    height:52px;

    border:none;

    border-radius:14px;

    background:rgba(255,255,255,.03);

    color:white;

    font-size:15px;

    text-align:left;

    padding-left:22px;

    cursor:pointer;

    transition:.25s;

}

.sidebar button:hover{

    background:#d8aa38;

    color:black;

    transform:translateX(6px);

}

.sidebar button.active{

    background:#d8aa38;

    color:black;

    font-weight:700;

}

/* CONTENT */

.content{

    flex:1;

    overflow-y:auto;

    overflow-x:hidden;

    height:100%;

    padding:40px;

    box-sizing:border-box;

}
header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:45px;

}

header h2{

    font-size:34px;

}

.user{

    padding:14px 22px;

    border-radius:14px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,215,120,.18);

}

/* DASHBOARD */

.dashboard{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

}

.card{

    background:rgba(15,15,15,.82);

    backdrop-filter:blur(20px);

    border:1px solid rgba(255,215,120,.18);

    border-radius:22px;

    padding:30px;

    transition:.25s;

}

.card:hover{

    transform:translateY(-8px);

    border-color:#d8aa38;

    box-shadow:0 0 40px rgba(216,170,56,.25);

}

.card h3{

    color:#999;

    margin-bottom:18px;

    font-weight:500;

}

.card h1{

    font-size:34px;

    color:#f2c14f;

}

/* ANIMATIONEN */

@keyframes slideLeft{

    from{

        transform:translateX(-80px);

        opacity:0;

    }

    to{

        transform:translateX(0);

        opacity:1;

    }

}

@keyframes fade{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* LOGIN */

.loginBody{

display:flex;

justify-content:center;

align-items:center;

height:100vh;

overflow:hidden;

}

.loginBackground{

position:fixed;

inset:0;

background-image:url("../images/hintergrund.png");

background-size:cover;

background-position:center;

filter:blur(3px) brightness(.18);

z-index:-2;

}

.loginCard{

width:430px;

padding:55px;

border-radius:26px;

background:rgba(15,15,15,.82);

backdrop-filter:blur(20px);

border:1px solid rgba(255,215,120,.18);

text-align:center;

animation:fade .8s;

}

.loginCard img{

width:120px;

margin-bottom:20px;

}

.loginCard h1{

font-size:34px;

letter-spacing:4px;

color:#f2c14f;

margin-bottom:10px;

}

.loginCard p{

color:#888;

margin-bottom:40px;

}

.loginCard input{

width:100%;

height:56px;

background:#111;

border:1px solid rgba(255,215,120,.18);

border-radius:14px;

padding-left:18px;

font-size:16px;

color:white;

margin-bottom:20px;

outline:none;

transition:.25s;

}

.loginCard input:focus{

border-color:#d8aa38;

box-shadow:0 0 20px rgba(216,170,56,.25);

}

.loginCard button{

width:100%;

height:56px;

border:none;

border-radius:14px;

background:#d8aa38;

font-size:17px;

font-weight:700;

cursor:pointer;

transition:.25s;

}

.loginCard button:hover{

transform:translateY(-3px);

box-shadow:0 0 25px rgba(216,170,56,.35);

}

.fadePage{

animation:fadePage .25s;

}

@keyframes fadePage{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.cashPage{

display:flex;

flex-direction:column;

gap:25px;

}

.cashTop{

display:flex;

justify-content:space-between;

align-items:center;

}

.cashTabs{

display:flex;

gap:12px;

}

.cashTab{

padding:12px 24px;

border:none;

border-radius:12px;

background:#181818;

color:white;

cursor:pointer;

transition:.2s;

}

.cashTab.active{

background:#d8aa38;

color:black;

}

.cashOverview{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:20px;

}

.overviewCard{

padding:28px;

border-radius:18px;

background:rgba(15,15,15,.82);

border:1px solid rgba(255,215,120,.15);

}

.overviewCard h3{

color:#999;

margin-bottom:10px;

}

.green h1{

color:#34d86b;

}

.red h1{

color:#b22b2b;

}

.gold h1{

color:#d8aa38;

}

.cashToolbar{

display:flex;

justify-content:space-between;

gap:15px;

}

.cashToolbar input{

flex:1;

height:48px;

background:#111;

border:1px solid rgba(255,215,120,.15);

border-radius:12px;

padding-left:18px;

color:white;

}

.cashToolbar button{

width:220px;

border:none;

border-radius:12px;

background:#d8aa38;

font-weight:bold;

cursor:pointer;

}

.cashTable{

background:rgba(15,15,15,.82);

border-radius:18px;

overflow:hidden;

border:1px solid rgba(255,215,120,.15);

}

.tableHead{

display:grid;

grid-template-columns:70px 180px 160px 1fr 180px 180px;

padding:18px;

background:#131313;

font-weight:bold;

border-bottom:1px solid rgba(255,215,120,.12);

}

.tableRow{

display:grid;

grid-template-columns:70px 180px 160px 1fr 180px 180px;

padding:12px 18px;

gap:12px;

align-items:center;

border-bottom:1px solid rgba(255,255,255,.05);

}

.tableRow input{

height:42px;

border:none;

background:#111;

color:white;

border-radius:10px;

padding:0 12px;

}

.tableRow select{

height:42px;

border:none;

background:#111;

color:white;

border-radius:10px;

padding:0 12px;

}

.cashTable{

    max-height:none;

}

#cashTableBody{

    overflow:visible;

}

.storagePage{

    padding-bottom:150px;

}

/* ===========================
   FRAKTIONSLAGER
=========================== */

.storageHeader{

display:flex;

justify-content:space-between;

align-items:flex-start;

margin-bottom:35px;

}

.weaponCounter{

margin-top:8px;

font-size:18px;

color:#d8aa38;

}

.weaponCounter span{

font-weight:bold;

font-size:22px;

color:white;

}

.lastChange{

background:rgba(15,15,15,.82);

border:1px solid rgba(255,215,120,.15);

border-radius:16px;

padding:18px 24px;

min-width:240px;

text-align:center;

}

.lastChange div{

margin-top:8px;

color:#999;

}

.storageGrid{

display:grid;

grid-template-columns:repeat(5, 270px);

gap:16px;

align-items:start;

justify-content:flex-start;

}
.storageCard{

display:flex;

flex-direction:column;

min-height:auto;

}
.storageCardBody{

flex:1;

padding:10px 16px;

overflow:hidden;

}
.storageCard{

background:rgba(15,15,15,.82);

backdrop-filter:blur(20px);

border:1px solid rgba(255,215,120,.12);

border-radius:18px;

overflow:hidden;

transition:.25s;

}

.storageCard:hover{

transform:translateY(-5px);

border-color:#d8aa38;

box-shadow:0 0 30px rgba(216,170,56,.18);

}

.storageCardHeader{

padding:13px 16px;

font-size:20px;

font-weight:700;

color:white;

}
.storageCardBody{

padding:14px;

}

.storageRow{

display:grid;

grid-template-columns:1fr 58px;

align-items:center;

gap:8px;

padding:4px 0;

}
.storageName{

font-size:12px;

font-weight:500;

color:#ddd;

}
.storageInput{

width:58px;

height:30px;

background:#111;

border:1px solid rgba(255,215,120,.12);

border-radius:8px;

color:white;

font-size:14px;

font-weight:700;

text-align:center;

outline:none;

transition:.2s;

}
.storageInput:focus{

border:1px solid #d8aa38;

box-shadow:0 0 10px rgba(216,170,56,.25);

}

/* ===========================
   FRAKTIONSLAGER V2
=========================== */

.storageTop{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:30px;

}

.weaponInfo{

width:240px;

padding:20px;

background:rgba(15,15,15,.82);

border:1px solid rgba(255,215,120,.15);

border-radius:18px;

text-align:center;

backdrop-filter:blur(20px);

}

.weaponInfo h3{

font-size:16px;

color:#999;

margin-bottom:10px;

}

.weaponInfo h1{

font-size:42px;

color:#d8aa38;

}

.storageLayout{

display:grid;

grid-template-columns:2fr 1fr;

gap:25px;

margin-bottom:25px;

align-items:start;

}

.storageBottom{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:25px;

align-items:start;

}

/* ===========================
   TABELLEN
=========================== */

.storageCard{

background:rgba(15,15,15,.82);

border:1px solid rgba(255,215,120,.15);

border-radius:25px;

backdrop-filter:blur(20px);

overflow:hidden;

transition:.25s;

}

.storageCard:hover{

border-color:#d8aa38;

box-shadow:0 0 20px rgba(216,170,56,.15);

}

.storageCardHeader{

padding:16px 20px;

font-size:25px;

font-weight:700;

color:white;

letter-spacing:.5px;

}

.storageCardBody{

padding:7px 13px 13px;

}

.storageRow{

display:grid;

grid-template-columns:1fr 70px;

align-items:center;

gap:14px;

padding:6px 0;

}

.storageRow:not(:last-child){

border-bottom:1px solid rgba(255,255,255,.05);

}

.storageName{

font-size:13px;

font-weight:500;

color:#ddd;

}
.storageInput{

width:70px;

height:34px;

background:#111;

border:1px solid rgba(255,215,120,.12);

border-radius:10px;

color:white;

font-size:15px;

font-weight:700;

text-align:center;

outline:none;

transition:.2s;

}

.storageInput:focus{

border-color:#d8aa38;

box-shadow:0 0 10px rgba(216,170,56,.25);

transform:scale(1.05);

}

.storageInput::-webkit-inner-spin-button,
.storageInput::-webkit-outer-spin-button{

display:none;

}