/* =====================================
   BaustellenApp - Hauptdesign
   Mobile First
===================================== */


/* Grundsystem */

* {
    box-sizing: border-box;
}


html,
body {

    margin:0;

    padding:0;

    min-height:100%;

    font-family:
    Arial,
    Helvetica,
    sans-serif;

    background:#f1f3f5;

    color:#212529;

}


/* =====================================
   Allgemeine Container
===================================== */

.app-container {

    width:100%;

    max-width:600px;

    margin:auto;

    padding:20px;

}


/* =====================================
   Karten
===================================== */

.app-card {

    background:white;

    border-radius:18px;

    padding:20px;

    margin-bottom:20px;

    box-shadow:
    0 5px 20px rgba(0,0,0,.08);

}


/* =====================================
   Login
===================================== */

.login-page {

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px;

    background:

    linear-gradient(
        rgba(0,0,0,.55),
        rgba(0,0,0,.55)
    ),

    url("../img/baustelle.jpg");


    background-size:cover;

    background-position:center;

}



.login-box {


    width:100%;

    max-width:420px;

    background:white;

    padding:35px 25px;

    border-radius:25px;

    box-shadow:

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

    text-align:center;

}



.login-logo {

    font-size:50px;

    margin-bottom:10px;

}


.login-box h1 {

    font-size:30px;

    margin-bottom:5px;

}



.login-box p {

    color:#777;

    margin-bottom:30px;

}



/* =====================================
   Formulare
===================================== */


.form-control,
select,
textarea,
input {


    width:100%;

    padding:15px;

    border-radius:12px;

    border:1px solid #ccc;

    font-size:17px;

    margin-bottom:15px;

}


.form-control:focus,
input:focus,
textarea:focus {


    border-color:#198754;

    outline:none;

}



/* =====================================
   Buttons
===================================== */


.app-button {


    display:block;

    width:100%;

    padding:16px;

    border-radius:14px;

    border:none;

    font-size:18px;

    font-weight:bold;

    text-align:center;

    text-decoration:none;

    cursor:pointer;

}



.btn-green {

    background:#198754;

    color:white;

}


.btn-blue {

    background:#0d6efd;

    color:white;

}


.btn-red {

    background:#dc3545;

    color:white;

}



/* =====================================
   Dashboard
===================================== */


.dashboard-title {


    font-size:28px;

    font-weight:bold;

    margin-bottom:20px;

}



.dashboard-grid {


    display:grid;

    grid-template-columns:1fr 1fr;

    gap:15px;

}



.dashboard-box {


    background:white;

    border-radius:18px;

    padding:25px 10px;

    text-align:center;

    box-shadow:

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

}



.dashboard-box h2 {


    font-size:35px;

    margin:0;

    color:#198754;

}


/* =====================================
   Tabellen mobil
===================================== */


.table-responsive {


    overflow-x:auto;

}


/* =====================================
   Bilder
===================================== */


img {


    max-width:100%;

    height:auto;

    border-radius:12px;

}


/* =====================================
   Mobile Anpassung
===================================== */


@media(max-width:480px){


    .app-container {

        padding:15px;

    }


    .dashboard-grid {

        grid-template-columns:1fr;

    }


    .login-box {

        padding:30px 20px;

    }


    h1 {

        font-size:25px;

    }


}



/* =====================================
   Desktop
===================================== */


@media(min-width:768px){


    .app-container {

        margin-top:40px;

    }


}