/* =====================================================
   Sicherheitsdatenblätter MAX AG
   style.css
   ===================================================== */



/* ==========================
   Grunddesign
   ========================== */


* {

    box-sizing: border-box;

}



body {

    margin: 0;

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

    background:
    #f5faff;

    color:
    #1c2b39;

}



a {

    text-decoration: none;

}





/* ==========================
   Kopfbereich
   ========================== */


header {

    background:
    linear-gradient(
        135deg,
        #006fb9,
        #003b73
    );

    color:white;

    padding:
    30px 20px 25px;

}



.header {

    max-width:1200px;

    margin:auto;

}



.header h1 {

    margin:0;

    font-size:34px;

}



.header p {

    margin-top:8px;

    font-size:17px;

    opacity:.9;

}






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


.dashboard {

    max-width:1200px;

    margin:25px auto 0;

    display:grid;

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

    gap:15px;

}



.dashboard-card {


    background:white;

    color:#003b73;

    border-radius:15px;

    padding:18px;

    display:flex;

    align-items:center;

    gap:15px;

    box-shadow:
    0 4px 12px rgba(0,0,0,.15);


}



.dashboard-card span {

    font-size:32px;

}



.dashboard-card strong {

    display:block;

    font-size:28px;

}



.dashboard-card label {

    color:#555;

    font-size:14px;

}







/* ==========================
   Suche
   ========================== */


.search-box {

    max-width:1200px;

    margin:
    25px auto 0;

}



.search-box input {


    width:100%;

    padding:15px 20px;

    border-radius:30px;

    border:none;

    font-size:16px;


    box-shadow:
    0 3px 10px rgba(0,0,0,.15);


}



.search-box input:focus {


    outline:

    3px solid #9bd5f5;


}






/* ==========================
   Hauptbereich
   ========================== */


.container {

    max-width:1200px;

    margin:

    30px auto;

    padding:
    0 20px;


}







/* ==========================
   Herstellerkarten
   ========================== */


.manufacturer {


    background:white;

    margin-bottom:20px;

    border-radius:18px;

    overflow:hidden;


    box-shadow:

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


}





.manufacturer-title {


    width:100%;

    padding:20px;

    border:none;

    background:

    #eaf5fc;


    color:#003b73;

    font-size:20px;

    font-weight:bold;


    display:flex;

    justify-content:space-between;

    cursor:pointer;


}



.manufacturer-title:hover {


    background:#d7edfb;


}






.manufacturer-content {


    display:none;

    padding:20px;


    animation:

    slideDown .3s ease;


}





@keyframes slideDown {


from {

    opacity:0;

    transform:translateY(-10px);

}


to {

    opacity:1;

    transform:translateY(0);

}


}








/* ==========================
   Tabelle
   ========================== */


table {


    width:100%;

    border-collapse:collapse;


}



thead {


    background:#003b73;

    color:white;


}



th {


    padding:12px;

    text-align:left;


}



td {


    padding:12px;

    border-bottom:

    1px solid #ddd;


}



tr:hover {


    background:#f1f9ff;


}





.highlight {


    background:#fff4bd;


}








/* ==========================
   PDF Button
   ========================== */


.pdf-button {


    display:inline-block;

    background:#d92323;

    color:white;

    padding:

    8px 14px;


    border-radius:8px;

    font-weight:bold;


}



.pdf-button:hover {


    background:#a90000;


}







/* ==========================
   Herstellerlink
   ========================== */


.manufacturer-link {


    color:#006fb9;

    font-weight:bold;


}



.manufacturer-link:hover {


    text-decoration:underline;


}







/* ==========================
   Statusanzeigen
   ========================== */


.status {


    padding:

    5px 10px;


    border-radius:20px;

    font-size:13px;

    font-weight:bold;


}



.status-ok {


    background:#d7f5dd;

    color:#18752a;


}



.status-warning {


    background:#fff2bf;

    color:#8a6500;


}



.status-old {


    background:#ffd6d6;

    color:#a00000;


}








/* ==========================
   Schliessen Button
   ========================== */


.close-button {


    margin-top:20px;


    background:#006fb9;

    color:white;


    border:none;


    padding:

    10px 20px;


    border-radius:20px;


    cursor:pointer;


}




.close-button:hover {


    background:#003b73;


}








/* ==========================
   Fehleranzeige
   ========================== */


.error-box {


    background:#ffdede;

    color:#900;

    padding:20px;

    border-radius:10px;


}







/* ==========================
   Footer
   ========================== */


footer {


    text-align:center;

    padding:20px;

    color:#666;


}







/* ==========================
   Mobile Ansicht
   ========================== */


@media(max-width:900px){



.dashboard {


    grid-template-columns:

    repeat(2,1fr);


}




}



@media(max-width:600px){



.header h1 {


    font-size:26px;


}




.dashboard {


    grid-template-columns:

    1fr;


}



table {


    font-size:14px;


}



th:nth-child(5),
td:nth-child(5){


    display:none;


}



}