/*** LOGO Definition ***/
.logo-container img {
    width: 300px; /* Setzt die Breite des Logos */
    height: auto; /* Behält das Seitenverhältnis des Logos bei */
}
/*** ENDE LOGO Definition ***/

/*** Wasserzeichen Definition ***/
.watermark {
    pointer-events: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 10%;
    left: 10%;
    z-index: -1; /* Hinter andere Elemente positionieren */
    font-size: 7em;
    color: rgba(0, 0, 0, 0.2); /* Transparente Farbe für das Wasserzeichen */
    transform: rotate(-30deg); /* Optional: Wasserzeichen drehen */
    transform-origin: center; /* Optional: Drehung um das Zentrum */
    opacity: 0.5; /* Optional: Deckkraft des Wasserzeichens einstellen */
    overflow: hidden; /* Optional: Überlauf verstecken, falls der Text zu groß ist */
}
/*** ENDE Wasserzeichen Definition ***/

/*** Button Definition ***/
.button-link {
    font-family: Arial, sans-serif;
    font-size: 16px;
    display: inline-block;
    padding: 10px 20px; /* Innenabstand */
    background-color: #007bff; /* Hintergrundfarbe */
    color: #fff; /* Textfarbe */
    text-decoration: none; /* Keine Unterstreichung */
    border-radius: 5px; /* Abgerundete Ecken */
    margin-top: 20px; /* Abstand nach oben */
}
.button-link:hover {
    background-color: #0056b3; /* Hintergrundfarbe bei Hover */
}

.default-button {
    font-family: Arial, sans-serif;
    color: #000; /* Textfarbe */
    border-radius: 10px; /* Abgerundete Ecken */
    padding: 5px 10px; /* Innenabstand */
    display: inline-block;
}
.default-button:hover {
    background-color: red; /* Hintergrundfarbe bei Hover */
    color: #fff; /* Textfarbe */
}

.menu-button {
    font-family: Arial, sans-serif;
    font-weight: bold; /* Fettschrift hinzufügen */
    font-size: 16px;
    color: #000; /* Textfarbe */
    border-radius: 10px; /* Abgerundete Ecken */
    padding: 10px 15px; /* Innenabstand */
    display: inline-block;
}
.menu-button:hover {
    background-color: red; /* Hintergrundfarbe bei Hover */
    color: #fff; /* Textfarbe */
}

.red-button {
    background-color: red;
    font-family: Arial, sans-serif;
    color: #fff; /* Textfarbe */
    border-radius: 10px; /* Abgerundete Ecken */
    padding: 5px 10px; /* Innenabstand */
    display: inline-block;
}
.red-button:hover {
    background-color: #fff; /* Hintergrundfarbe */
    color: #000; /* Textfarbe */
}

.blue-button {
    font-family: Arial, sans-serif;
    font-size: 14px;
    background-color: #007bff; /* Hintergrundfarbe */
    color: #fff; /* Textfarbe */
    border-radius: 5px; /* Abgerundete Ecken */
    padding: 10px 20px; /* Innenabstand */
    display: inline-block;
}
.blue-button:hover {
    background-color: #0056b3; /* Hintergrundfarbe */
}

/**** ENDE Button Definition ****/

/*** Body Definition ***/
body {
    font-family: Arial, sans-serif;
}

.container {
    text-align: center;
    width: 80%; /* Breite des Inhaltsbereichs */
    margin: 0 auto; /* Zentrierung des Inhaltsbereichs */
    padding: 50px 50px;
    border-radius: 5px;
}

.entry-container {
    text-align: center;
    width: 80%; /* Breite des Inhaltsbereichs */
    margin: 0 auto; /* Zentrierung des Inhaltsbereichs */
    padding: 50px 50px;
    border-radius: 5px;
}

.logo-container {
    text-align: left;
    right: 0;
    top: 0;
    z-index: 1000; /* Stellt sicher, dass das Logo über anderen Elementen schwebt */
    margin-bottom: 20px; /* Abstand zum nächsten Element */
}

.header {
    margin-top: 0px; /* Abstand zum vorherigen Element */
    margin-bottom: 20px; /* Abstand unter der Überschrift */
    background-color: #f2f2f2; /* Leicht grauer Hintergrund */
    padding: 10px; /* Innenabstand für die Überschrift */
}

.link-container {
    text-align: center;
    margin-top: 20px; /* Abstand zum vorherigen Element */
}

.form-container {
    display: grid;
    place-items: center; /* Zentriert Kinder sowohl horizontal als auch vertikal */
    text-align: right;
    width: 90%;
    margin: 10px auto;
}

.message {
    color: #31708f; /* Textfarbe */
    background-color: #d9edf7; /* Hintergrundfarbe */
    border: 1px solid #bce8f1; /* Rahmen */
    padding: 10px; /* Innenabstand */
    border-radius: 5px; /* Abgerundete Ecken */
    margin: 10px 0; /* Außenabstand oben und unten */
}

.center-align {
    text-align: center; /* Zentriert den Text innerhalb des Links */
}

table {
    width: 100%; /* Volle Breite der Tabelle */
    border-collapse: collapse; /* Rahmen um Zellen zusammenfassen */
    margin-bottom: 20px; /* Abstand zum nächsten Element */
}

th, td {
    padding: 10px; /* Zellpadding */
    text-align: left; /* Text links ausrichten */
    border-bottom: 1px solid #ddd; /* Untere Rahmenfarbe */
}

th {
    background-color: #f2f2f2; /* Hintergrundfarbe der Kopfzeile */
}

tr:hover {
    background-color: #f2f2f2; /* Hervorhebung bei Hover */
}
/*** ENDE Body Definition ***/

/*** Scriften Definition ***/
h1 {
    margin-top: 10px; /* Abstand zum vorherigen Element */
    margin-bottom: 20px; /* Abstand zum nächsten Element */
}

h2 {
    margin-bottom: 20px; /* Abstand zum nächsten Element */
}

h3 {
    margin-top: 50px; /* Abstand zum vorherigen Element */
    margin-bottom: 5px; /* Abstand zum nächsten Element */
}

.red-text {
            color: red; /* Stil für roten Text */
        }

.hinweise {
        font-size: 0.8em; /* Setzt eine kleinere Schriftgröße */
        font-style: italic; /* Setzt den Schriftstil auf kursiv */
            
/*** ENDE Scriften Definition ***/

/* Admin-Tabellen */
.admin-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-table th, .admin-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.admin-table th {
    background-color: #f2f2f2;
    color: #333;
}

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

.admin-table tr:hover {
    background-color: #f2f2f2;
}
/*** ENDE Admin-Tabellen ***/



/*** CSS-Stile für die Tabelle ohne Trennlinien ***/
.table_no_line {
    width: 100%;
    border-collapse: collapse;
}

.table_no_line td, .table_no_line th {
    padding: 8px;
    text-align: center; /* Zentral ausrichten */
}

.table_no_line button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    border-radius: 4px;
}

.table_no_line button:hover {
    background-color: #45a049;
}
/*** ENDE CSS-Stile für die Tabelle ohne Trennlinien ***/

/*** CSS-Stile für die Zeilen ohne Trennlinien ***/
.no-line td {
    border: none;
    text-align: center; /* Zentral ausrichten */

}

/* CSS-Stile für den unteren Bereich der Seite */
.bottom-section {
    position: relative;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center; /* Zentrieren des Inhalts */
    width: 90%; /* oder eine spezifische Breite in px */
    max-width: 1200px; /* Optional, für größere Bildschirme */
}

.bottom-links {
    color: #333; /* Farbe des Links */
    text-decoration: none; /* Unterstreichung entfernen */
    display: block;
    margin: 50px auto 0 auto; /* Zentriert das Element horizontal */
    text-align: center; /* Zentriert den Text im Link */
}

.bottom-link {
    display: block; /* Macht den Link zu einem Block-Element */
    margin: 10px auto; /* Zentriert den Link horizontal */
    text-align: center; /* Zentriert den Text innerhalb des Links */
    color: #333; /* Farbe des Links */
    text-decoration: none; /* Unterstreichung entfernen */
}

/* BEREICH für das Video-Fenster */
#video-container {
    position: relative; /* Ermöglicht die korrekte Positionierung des Buttons */
    max-width: 100vw; /* maximale Breite des Containers auf die Breite des Viewports setzen */
    max-height: 100vh; /* maximale Höhe des Containers auf die Höhe des Viewports setzen */
    overflow: hidden; /* verhindert das Überlaufen des Inhalts aus dem Container */
    display: flex; /* ermöglicht flexibles Layout für die Inhalte */
    justify-content: center; /* zentriert den Inhalt horizontal */
    align-items: center; /* zentriert den Inhalt vertikal */
}

#fullscreenButton {
     position: absolute;
     left: 50%;
     bottom: 50px;
     transform: translateX(-50%);
     display: none; /* Verstecken Sie den Button standardmäßig */
     z-index: 9999;
     padding: 5px;
}

video {
    max-width: 50%; /* stellt sicher, dass das Video maximal die Breite des Containers einnimmt */
    max-height: 50%; /* stellt sicher, dass das Video maximal die Höhe des Viewports einnimmt */
    object-fit: contain; /* behält das Seitenverhältnis bei und stellt sicher, dass das gesamte Video sichtbar ist */
}

.overlay-text {
     position: absolute;
     background-color: red;
     top: 0;
     left: 0;
     width: 100%;
     color: mediumgray;
     background-color: rgba(255, 255, 255, 0.5);
     text-align: center;
     padding: 5px;
     pointer-events: none; /* Stellt sicher, dass Klicks durch das Overlay hindurchgehen */
     }
.hinweis-text {
     color: red;
     text-align: center;
     width: 20%; /* Nimmt die volle Breite des Containers ein */
     text-align: center; /* Zentriert den Text */
     margin-top: 10px; /* Abstand zum Video */

}

/* Vollbild-spezifische Stile */
.video-container.fullscreen {
     max-width: none;
     width: 100%;
     height: 90%;
     margin: 0;
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     z-index: 9999;
     background: black;
}

.verzeichnisliste {
    text-align: center;
    border: 1px solid #ddd;
    padding: 10px;
    max-width: 80%; /* oder eine spezifische Breite */
    margin: 0 auto; /* Zentriert das Element horizontal */
}


/*** NUTZUNGSBEDINGUNGEN ***/
#modal {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    display: none; /* Initially hidden */
    }

#modal-content {
    background: white;
    padding: 50px 50px;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    overflow-y: auto;
    }

#modal-content p {
    margin: 0 0 20px 0;
    }
/*** ENDE NUTZUNGSBEDINGUNGEN ***/