html, body {
    height: 100%;  /* Stellt sicher, dass der Body die volle Höhe des Viewports einnimmt */
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body {
    font-family: 'Arial', sans-serif;
    background: #303030;
    color: #f4f4f4;
    flex-direction: column;
    height: 100%;  /* Stellt sicher, dass der Body die volle Höhe des Viewports ausfüllt */
}

header {
    display: flex;
    align-items: center;
    margin: 20px;
    background: #383838;
    border-radius: 8px;
    height: 5VH;
    flex-direction: row;
    justify-content: space-between;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    padding-right: 0px;
}

.header-info{
color: #fff; /* Weißer Text */
background-color: crimson ;/* Hintergrundfarbe für den Text */
border-radius: 11px; /* Abgerundete Ecken für ein schöneres Design */
padding: 3px; /* Padding, um den Text hervorzuheben */
padding-left: 10px;
padding-right: 10px;
display: block; /* Macht das <strong> zu einem Block-Element, damit margin-bottom wirkt */
text-align: right;
}

.header-info2{
    color: #fff; /* Weißer Text */
    border-radius: 11px; /* Abgerundete Ecken für ein schöneres Design */
    padding: 3px; /* Padding, um den Text hervorzuheben */
    padding-left: 10px;
    padding-right: 10px;
    display: block; /* Macht das <strong> zu einem Block-Element, damit margin-bottom wirkt */
    text-align: right;
    }

h1 {
    flex-grow: 1;
    font-size: 200%;
    color: #fff;
    text-align: left;

}

h3 {
    flex-grow: 1;
    font-size: 200%;
    color: #fff;
text-align: center;

}




.btn:hover {
    background-color: #0056b3;
}



h2 {
    text-align: center;
    color: #fff;
    background: #383838;
    margin: 0;
    padding: 10px;
    font-size: 4rem;
}

.table-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 30px;
    padding: 0px 20px;
    height: 60vh;
}

.table-wrapper {
    flex: 1;
    background: #474747;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    overflow-y: hidden; /* Wenn die Tabelle zu groß wird, wird sie scrollbar */
    height: 100%;  /* Stellt sicher, dass die Tabelle den gesamten Container füllt */
}

/* Matrix-Tabelle */
.matrix-table {
    width: 100%;
    border-collapse: collapse;
    background: #474747;
    border-radius: 10px;
    overflow: hidden;
    table-layout: fixed;  /* Fixiertes Layout für gleichmäßige Spaltenbreiten */
    height: 100%;  /* Stellt sicher, dass die Tabelle die gesamte Höhe des Wrappers einnimmt */
}

.matrix-table th {
    background-color: #4b72a6;
    color: #ffffff;
    font-weight: bold;
    padding: 0px;
    text-align: center;
    border: 1px solid #383838;
}


/* Kopfzeilen der Tabelle */
.matrix-table th,
.matrix-table td {
    border: 1px solid #383838;
    padding: 0px;  /* Erhöht das Padding für mehr Höhe */
    color: #fff;
    text-align: left;
    transition: background-color 0.3s ease;
    font-weight: bold;
  }

/* Zeilen in der Tabelle */

.matrix-table th:not(:first-child),
.matrix-table td:not(:first-child) {
    text-align: center;
}

.matrix-table tr:nth-child(even) {
    background-color: #505050;
}

.matrix-table tr:hover {
    background-color: #636363;
}

/* Spaltenanpassung */


.matrix-table th:first-child {
    width: 20%;  /* Breite der ersten Spalte */
    padding: 16px;
}

.matrix-table td:first-child {
    text-align: left;
    font-weight: bold;
    padding-left: 16px; /* Etwas mehr Padding für eine breitere Zelle */
}

/* Anpassung für die Badge-Elemente */

.badge {
    display: flex;                /* Flexbox aktivieren */
    flex-direction: column;
    justify-content: center;      /* Horizontal zentrieren */
    align-items: center;          /* Vertikal zentrieren */
    width: 100%;
    border-radius: 0px;
    font-weight: bold;
    text-align: center;
    transition: background-color 0.3s ease;
    overflow-wrap: break-word;
    word-break: break-word;
    height: 100%;  /* Höhe der Badge anpassen */
}



.badge.done {

    color: rgb(255, 255, 255); /*    background-color: #d4edda;*/
}

.badge.warn {
    background-color: #ffe9a2;
    color: #855c04;
}

.badge.fail {
    background-color: #ffa2aa;
    color: #721c24;
}

.badge.pending {
    color: #6c757d;
}

.badge:hover {
    opacity: 0.8;
}

.badge div:first-child {
    font-size: 1em; /* Ablaufdatum groß */
}

.badge div:last-child {
    font-size: 0.7em; /* Abschlussdatum kleiner */
    color: #aaa;      /* Dezente graue Farbe */
    margin-top: 2px;
}



.name-cell.done {
    background-color: #d4edda;
    color: rgb(21, 87, 36);
}

.name-cell.warn {
    background-color: #ffe9a2;
    color: #855c04;
    font-style: italic;
}

.name-cell.fail {
    background-color: #ffa2aa;
    color: #721c24;
    text-decoration: line-through;

}


.dlk-info {
    background: #383838;
    padding: 0px 20px;
    border-radius: 10px;
    margin: 30px 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    height: 25vh;
    overflow: hidden;

}


.dlk-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 gleichmäßige Spalten */
    grid-template-rows: repeat(2, 1fr);    /* 2 gleichmäßige Zeilen */
    gap: 20px; /* Abstand zwischen den Zellen */
}

.dlk-column {
    flex: 1 1 0; /* drei Spalten gleich breit */
    box-sizing: border-box;
}




.dlk-column strong {
    color: #fff; /* Weißer Text */
    background-color: #2373a8; /* Hintergrundfarbe für den Text */
    padding: 3px; /* Padding, um den Text hervorzuheben */
    border-radius: 3px; /* Abgerundete Ecken für ein schöneres Design */
    display: block; /* Macht das <strong> zu einem Block-Element, damit margin-bottom wirkt */
    margin-bottom: -15px; /* Abstand zwischen dem <strong> und dem Text */
}





.form-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    flex-direction: column;
    gap: 20px;
}   

.btn {
    padding: 12px 20px;
    background-color: #ff2600;
    color: white;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    margin: 4px 2px;
    cursor: pointer;
    border: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    font-weight: bold;
    border: 2px solid #007bff;
    border-radius: 6px;
    transition: background-color 0.3s ease;
}

.form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px; /* Abstand zwischen den Feldern im Formular */
}

.form div {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Label + Input schön linksbündig */
    width: 100%;
    max-width: 300px; /* Breite steuern */
}

.form label {
    margin-bottom: 8px; /* Abstand Label -> Input */
    font-weight: bold;
    color: white; /* falls Hintergrund dunkel bleibt */
}

.form input,
.form select {
    width: 100%;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

.header-logo {
    display: flex;
    justify-content: center;
    padding: 20px;
    align-items: center;

}

.logo {
    width: 100%;
    height: auto;
    max-width: 300px;

}

.header-title {
    display: flex;
    align-items: center;
    gap: 15px;
}

.qr-code {
    height: 60px;     /* passt gut zu h1 */
    width: auto;
    background: #fff; /* falls QR transparent ist */
    padding: 4px;
    border-radius: 6px;
}


@media (max-width: 768px) {
    /* Stellt sicher, dass die Tabellen untereinander auf mobilen Geräten angezeigt werden */
    .table-container {
        display: flex;
        flex-direction: column; /* Tabellen untereinander anzeigen */
        gap: 20px; /* Abstand zwischen den Tabellen */
        padding: 10px;
        height: auto; /* Flexibilität in der Höhe */
    }

    /* Tabellencontainer passt sich der Bildschirmbreite an */
    .table-wrapper {
        width: 100%; /* Tabellen füllen den Container aus */
        height: auto; /* Keine feste Höhe */
        padding: 10px;
    }

    /* Überschriften in Tabellen können an kleinere Bildschirme angepasst werden */
    h1 {
        font-size: 1.5rem; /* Kleinere Schriftgröße für Überschrift */
    }

    h2 {
        font-size: 2rem; /* Kleinere Schriftgröße für den zweiten Header */
    }

    /* Formulare anpassen, um den Platz besser zu nutzen */
    .form-container {
        padding: 15px;
    }

    .form div {
        max-width: 100%; /* Flexibilität bei Formularfeldern */
    }

    .btn {
        width: 100%; /* Button nimmt die volle Breite ein */
        padding: 14px;
    }
}