/* =====================
   GRUNDLAGEN
===================== */

*{
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}


body{

    margin:0;

    background:#e8dfd2;

    color:#333;

}



/* =====================
   LAYOUT
===================== */


.layout{

    display:flex;

    min-height:100vh;

}



.content{

    margin-left:260px;

    width:calc(100% - 260px);

    padding-bottom:60px;

}





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


.sidebar{

    position:fixed;

    left:0;

    top:0;

    bottom:0;

    width:260px;


    background:

    linear-gradient(
        180deg,
        #ff5555,
        #dc2626,
        #991b1b
    );


    padding:20px;

    overflow-y:auto;


    box-shadow:

    5px 0 15px rgba(0,0,0,.25);

}



.sidebar a{


    display:block;

    color:white;

    text-decoration:none;

    padding:12px 15px;

    margin-bottom:8px;

    border-radius:10px;


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


    font-size:15px;


}



.sidebar a:hover{


    background:white;

    color:#dc2626;

}




.bereich{

    color:white;

    font-weight:bold;

    font-size:13px;

    margin-top:25px;

    margin-bottom:10px;

    padding-bottom:8px;


    border-bottom:

    2px solid rgba(255,255,255,.5);

}



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


.header{


    height:110px;


    background:

    linear-gradient(
        180deg,
        #ff5555,
        #dc2626,
        #991b1b
    );


    border-bottom:4px solid #7f1d1d;


    display:flex;

    align-items:center;

    padding:10px 25px;


    box-shadow:

    0 4px 12px rgba(0,0,0,.3);

}



.header-logo{


    display:flex;

    align-items:center;

    gap:25px;

}



.header-logo img{


    height:85px;

    width:auto;

    max-width:250px;

    object-fit:contain;

}



.header-title{


    color:white;

    font-size:32px;

    font-weight:bold;


    text-shadow:

    0 2px 4px rgba(0,0,0,.4);

}





/* =====================
   INHALT
===================== */


.container{

    padding:25px;

}



.box{


    background:white;

    border-radius:12px;

    padding:25px;


    box-shadow:

    0 4px 12px rgba(0,0,0,.15);

}



h1{

    color:#dc2626;

}





/* =====================
   FORMULARE
===================== */


label{

    display:block;

    font-weight:bold;

    margin-top:15px;

}



input,
select,
textarea{


    width:100%;

    padding:12px;

    border:1px solid #ccc;

    border-radius:8px;

}



textarea{

    min-height:120px;

}




/* =====================
   BUTTONS
===================== */


button,
.btn{


    background:

    linear-gradient(
        180deg,
        #ff5555,
        #dc2626
    );


    color:white;

    border:none;


    padding:12px 18px;


    border-radius:10px;


    cursor:pointer;


    font-weight:bold;


    box-shadow:

    0 3px 8px rgba(0,0,0,.25);

}



button:hover,
.btn:hover{

    background:#991b1b;

}





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


table{

    width:100%;

    border-collapse:collapse;

    margin-top:20px;

}



th{


    background:#dc2626;

    color:white;

    padding:12px;

}



td{

    padding:10px;

    border-bottom:1px solid #ddd;

}





/* =====================
   DASHBOARD
===================== */


.dashboard{


    display:grid;


    grid-template-columns:

    repeat(auto-fit,minmax(220px,1fr));


    gap:25px;


}



.karte{


    background:white;


    padding:25px;


    border-radius:15px;


    text-align:center;


    border-top:6px solid #dc2626;


    box-shadow:

    0 6px 15px rgba(0,0,0,.18);


}



.karte h2{


    color:#991b1b;

    font-size:18px;

}



.karte strong{


    display:block;


    font-size:42px;


    color:#dc2626;


}





/* =====================
   FOOTER
===================== */


.footer{


    position:fixed;


    bottom:0;


    left:260px;


    right:0;


    background:#dc2626;


    color:white;


    text-align:center;


    padding:10px;


}





/* =====================
   LOGIN
===================== */


.login-box{


    width:400px;


    margin:100px auto;


    background:white;


    padding:30px;


    border-radius:12px;


}





/* =====================
   MOBILE
===================== */


@media(max-width:900px){


.sidebar{

    position:relative;

    width:100%;

}


.content{

    margin-left:0;

    width:100%;

}


.layout{

    display:block;

}


.footer{

    left:0;

}


.header-title{

    font-size:22px;

}


.header-logo img{

    height:65px;

}


}