nav {
    background-color: rgba(192, 31, 31, 0.938); /* Sanfte rote Hintergrundfarbe */
    padding: 10px; /* Abstand um die Navigationsleiste herum */
    border-radius: 5px; /* Abgerundete Ecken */
    border: 4px solid black; /* Dicker schwarzer Rand */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Leichter Schatten für Tiefe */
}

nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

nav li {
    position: relative; /* Erlaubt dem Submenü, sich relativ zum übergeordneten Element zu positionieren */
    display: inline-block; /* Listenelemente nebeneinander anzeigen */
    margin-right: 20px;
}

nav a {
    display: inline-block; /* Anordnung in einer Linie */
    text-decoration: none;
    color: rgb(253, 253, 253);
    font-size: 18px; /* Schriftgröße */
    font-family: Arial, sans-serif; /* Schriftart */
    padding: 12px 20px; /* Mehr Abstand innerhalb der Links */
    font-weight: bold; /* Schrift fett */
    transition: transform 0.3s ease, color 0.3s ease; /* Weicher Übergang beim Vergrößern und Farbwechsel */
}

nav a:hover,
nav a:focus {
    text-decoration: underline;
    transform: scale(1.2); /* Vergrößert das Element um 20% beim Hover oder Fokus */
    color: #FFD700; /* Helle Goldfarbe für bessere Sichtbarkeit beim Hover */
    outline: none; /* Entfernt den standardmäßigen blauen Rahmen */
}

body {
    background-color: #ffffff; /* Weißer Hintergrund */
    color: #333; /* Dunkles Grau für den Text */
    font-family: Arial, sans-serif; /* Gleiche Schriftart */
}

/* Untermenü zunächst unsichtbar machen */
nav ul.submenu {
    display: none;
    position: absolute; /* Positioniert das Submenü absolut relativ zum übergeordneten Element */
    top: 100%; /* Positioniert das Untermenü direkt unter dem Hauptmenüpunkt */
    left: 0;
    background-color: rgba(192, 31, 31, 0.938); /* Hintergrundfarbe für das Untermenü */
    padding-top: 5px; /* Abstand zwischen Hauptlink und Dropdown-Menü */
    z-index: 1000; /* Stellt sicher, dass das Dropdown über anderen Inhalten liegt */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Schatten für das Dropdown */
}

nav ul.submenu li {
    display: block; /* Elemente im Untermenü untereinander anzeigen */
    margin: 0; /* Kein zusätzlicher Abstand zwischen den Untermenüpunkten */
}

nav li:hover > ul.submenu {
    display: block;
}

nav ul.submenu a {
    padding: 12px; /* Mehr Innenabstand für Dropdown-Links */
    display: block;
    color: white;
    text-decoration: none;
    font-size: 18px; /* Gleiche Schriftgröße wie im Hauptmenü */
    font-family: Arial, sans-serif; /* Gleiche Schriftart wie im Hauptmenü */
    font-weight: bold; /* Gleiche Schriftstärke wie im Hauptmenü */
}

nav ul.submenu a:hover {
    background-color: rgb(150, 30, 30); /* Farbe beim Hover über die Untermenüpunkte */
}

/* Content-Container mit dickem schwarzen Rand und Schatten */
/* Für die vertikale Anordnung */
#content {
    margin-top: 20px;
    padding: 20px;
    background-color: #f9f9f9;
    border: 4px solid black;
    border-radius: 5px;
    font-family: Arial, sans-serif;
    font-size: 16px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex; /* Verwendung von Flexbox */
    flex-direction: row;
    gap: 20px; /* Abstand zwischen den vertikalen Baugruppen */
}

/* Für die vertikale Anordnung innerhalb einer Gruppe */
.vertical-group {
    display: flex; /* Verwendung von Flexbox */
    flex-direction: column; /* Vertikal anordnen */
    gap: 10px; /* Abstand zwischen den horizontalen Gruppen */
    margin: 10px;
    font-size: 16px;
    font-family: Arial, sans-serif;
    font-weight: bold;
    text-align: left;
}

/* Für die vertikale Anordnung der Formularelemente */
.form-group {
    display: flex;
    flex-direction: row;
    gap: 10px; /* Abstand zwischen Label und Eingabefeld */
    align-items: center; /* Elemente in der Mitte der Zeile ausrichten */
    flex-wrap: wrap; /* Hilft, die Elemente besser zu handhaben, wenn sie nicht nebeneinander passen */
}

.form-group label {
    margin-bottom: 5px; /* Abstand zwischen Label und Eingabefeld */
    font-weight: bold;
    text-align: left; /* Links Ausrichtung der Labels */
}

.form-group input[type="text"],
.form-group input[type="date"] {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 16px;
    box-sizing: border-box; /* Box-Größe berücksichtigt Padding und Border */
}

/* Stil für den Button */
button {
    padding: 10px 20px;
    font-size: 16px;
    font-family: Arial, sans-serif;
    font-weight: bold;
    color: white;
    background-color: rgba(192, 31, 31, 0.938);
    border: none;
    border-radius: 5px;
    cursor: pointer; /* Zeigt beim Hover den Zeiger an */
    transition: background-color 0.3s ease; /* Weicher Übergang für Hintergrundfarbe */
}

.selected-row {
    background-color: #a17474; /* Dunkelweiß */
}

/* Tabelle im #table-container */
#table-container table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

#table-container th,
#table-container td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
}

#table-container th {
    background-color: #f2f2f2;
    font-weight: bold;
}

#qr-reader {
    width: 300px;
    margin: auto;
}

#qr-reader-results {
    margin-top: 10px;
    text-align: right;
    font-size: 1.2em;
}

/* Für mobile Geräte */
@media (max-width: 768px) {
    #content {
        flex-direction: column; /* Vertikal anordnen auf mobilen Geräten */
    }

    nav ul {
        display: block; /* Navigation wird vertikal angezeigt */
        text-align: center;
    }

    nav li {
        display: block;
        margin: 10px 0;
    }

    .form-group {
        gap: 10px; /* Abstand zwischen Label und Eingabefeld reduziert */
        flex-wrap: nowrap;
    }

    .form-group label,
    .form-group input[type="text"],
    .form-group input[type="date"] {
        width: 100%; /* Eingabefelder und Labels nehmen die volle Breite ein */
    }

    #table-container table,
    #table-container thead,
    #table-container tbody,
    #table-container th,
    #table-container td,
    #table-container tr {
        display: block;
    }

    #table-container tr {
        margin-bottom: 10px;
    }

    #table-container th {
        background-color: rgba(192, 31, 31, 0.938);
        color: black;
    }

    #table-container td {
        text-align: right;
        padding-left: 50%;
        position: relative;
    }

    #table-container td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 45%;
        padding-left: 10px;
        font-weight: bold;
        text-align: left;
    }
}

/* Tabelle im #pro-table-container */
#pro-table-container table,
#pro-table-such table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

#pro-table-container th,
#pro-table-container td,
#pro-table-such th,
#pro-table-such td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
}

#pro-table-container th,
#pro-table-such th {
    background-color: #f2f2f2;
    font-weight: bold;
}

/* Für mobile Geräte */
@media (max-width: 768px) {
    #pro-table-container table,
    #pro-table-container thead,
    #pro-table-container tbody,
    #pro-table-container th,
    #pro-table-container td,
    #pro-table-container tr,
    #pro-table-such table,
    #pro-table-such thead,
    #pro-table-such tbody,
    #pro-table-such th,
    #pro-table-such td,
    #pro-table-such tr {
        display: block; /* Tabelle wird vertikal dargestellt */
    }

    #pro-table-container tr,
    #pro-table-such tr {
        margin-bottom: 10px; /* Abstand zwischen den Zeilen */
    }

    #pro-table-container th,
    #pro-table-such th {
        background-color: rgba(192, 31, 31, 0.938);
        color: black;
    }

    #pro-table-container td,
    #pro-table-such td {
        text-align: right;
        padding-left: 50%;
        position: relative;
    }

    #pro-table-container td::before,
    #pro-table-such td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 45%;
        padding-left: 10px;
        font-weight: bold;
        text-align: left;
    }
}

/* Tabelle im #table-such */
#table-such table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

#table-such th,
#table-such td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
}

#table-such th {
    background-color: #f2f2f2;
    font-weight: bold;
}

/* Für mobile Geräte */
@media (max-width: 768px) {
    #table-such table,
    #table-such thead,
    #table-such tbody,
    #table-such th,
    #table-such td,
    #table-such tr {
        display: block; /* Tabelle wird vertikal dargestellt */
    }

    #table-such tr {
        margin-bottom: 10px; /* Abstand zwischen den Zeilen */
    }

    #table-such th {
        background-color: rgba(192, 31, 31, 0.938);
        color: black;
    }

    #table-such td {
        text-align: right;
        padding-left: 50%;
        position: relative;
    }

    #table-such td::before {
        content: attr(data-label); /* Daten-Label aus Attribut */
        position: absolute;
        left: 0;
        width: 45%;
        padding-left: 10px;
        font-weight: bold;
        text-align: left;
    }
}

.centered-container {
    padding: 25px;
    text-align: center;
  }
  
  .centered-image {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    padding: 25px;
}

@media (max-width: 768px) {
    .centered-image {
        width: 90%;
        height: auto;
        display: block;
        margin: 0 auto;
    }
}