/* Allgemeine Stile */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Roboto', 'Arial', sans-serif; /* Moderne Schriftart hinzufügen */
    background-color: #f4f4f93d;
    color: #333;
    overflow: hidden; /* Verhindert das Scrollen des gesamten Dokuments */
    background-size: cover; /* Hintergrundbild über die gesamte Seite */
    background-repeat: no-repeat;
    background-position: center;
    transition: background 0.5s ease; /* Sanfter Übergang beim Wechsel des Hintergrundbilds */
}

/* Hintergrundbild für den gesamten Body */
body {
    background-color: rgb(255, 255, 255); /* Reduziere die Transparenz für mehr Sichtbarkeit */
    background-size: cover; /* Hintergrundbild über die gesamte Seite */
    background-repeat: no-repeat;
    background-position: center;
    transition: background 0.5s ease; /* Sanfter Übergang beim Wechsel des Hintergrundbilds */
}

/* Titelframe */
h1 {
    font-size: 2.5rem; /* Vergrößere die Schriftgröße */
    color: #0057b3;
    margin: 0;
    text-align: center;
    padding: 2px 0;
    color: rgba(255, 255, 255, 0.178);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    animation: fadeIn 2s ease-in-out; /* Füge eine Fade-In-Animation hinzu */
}

/* Animation für den Titel */
@keyframes fadeIn {
    0% {
        opacity: 0; /* Start mit unsichtbarem Text */
        transform: translateY(-20px); /* Leicht nach oben verschoben */
    }
    100% {
        opacity: 1; /* Voll sichtbar */
        transform: translateY(0); /* Zurück zur ursprünglichen Position */
    }
}

/* Farbverlauf für den Topframe */
#topframe {
    height: 10%; /* Verkleinere die Höhe des Topframes */
    background: linear-gradient(to bottom, #0268f7, #d1d0d0); /* Modernes Blau zu modernem Silber */
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    box-sizing: border-box;
    position: fixed; /* Fixiere die Frames */
    width: 100%; /* Volle Breite */
    z-index: 10; /* Sicherstellen, dass sie über dem Inhalt liegen */
    top: 0; /* Oben fixieren */
}

/* Titel ohne Hintergrund */
#topframe h1 {
    font-size: 2rem;
    color: rgba(255, 255, 255, 0);
    margin: 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* Sprachmenü */
#language-selector {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 10px;
}

#language-selector button {
    background-color: #ffffff;
    color: #033e91;
    border: 1px solid #033e91;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    margin-left: 5px; /* Abstand zwischen Buttons */
}

#language-selector button:hover {
    background-color: #d53a3a;
    color: white;
}

/* Menü */
#menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* Menü horizontal ausrichten */
    justify-content: space-around;
    align-items: center; /* Zentriere die Menüpunkte vertikal */
    height: 100%; /* Fülle die reduzierte Höhe des Menüs */
    background-color: #d1d0d000;
    color: white;
}

#menu li {
    padding: 5px 10px; /* Reduziere den Abstand innerhalb der Menüpunkte */
    text-align: center;
}

#menu li a {
    color: rgb(8, 0, 0);
    text-decoration: none;
    font-size: 1.1rem; /* Erhöhe die Schriftgröße */
    display: block;
    transition: all 0.3s ease;
}

#menu li a:hover {
        text-decoration: underline;
}

/* Hauptinhalt */
#content {
    padding: 20px;
    font-size: 1.1rem;
    line-height: 1.6;
    background-color: rgba(255, 255, 255, 0.158);
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(165, 164, 164, 0);
    margin: 25px;
    position: relative; /* Text bleibt über dem Hintergrund */
    z-index: 1; /* Höhere Priorität als das Hintergrundbild */
    background-color: rgba(255, 255, 255, 0.144); /* Leicht transparenter Hintergrund für den Text */
    padding: 5%;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Footer */
footer {
    text-align: center;
    padding: 10px;
    color: rgba(252, 251, 251, 0);
    font-size: 0.9rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0);
}

/* Farbverlauf für den Menüframe */
#menuframe {
    height: 8%; /* Verkleinere die Höhe des Menüs */
    background: linear-gradient(to bottom, #d1d0d0, #ffffff); /* Übergang von modernem Silber nach Weiß */
    padding: 10px; /* Reduziere das Padding */
    box-sizing: border-box;
    overflow: visible; /* Sicherstellen, dass das Untermenü nicht abgeschnitten wird */
    position: relative; /* Basis für absolute Positionierung */
    position: fixed; /* Fixiere die Frames */
    width: 100%; /* Volle Breite */
    z-index: 10; /* Sicherstellen, dass sie über dem Inhalt liegen */
    top: 10%; /* Direkt unter dem Topframe */
}

/* Hauptinhalt bleibt weiß */
#mainframe {
    position: absolute; /* Ermöglicht flexibles Layout */
    top: 12%; /* Erhöhe den Abstand, z. B. von 3% auf 12% */
    bottom: 4%; /* Oberhalb des Bottomframes */
    width: 100%; /* Volle Breite */
    overflow-y: scroll; /* Scrollen im Mainframe aktivieren */
    background-color: rgba(255, 255, 255, 0); /* Hintergrund leicht transparent machen */
    padding: 20px;
    box-sizing: border-box;
    border-radius: 5px; /* Optional: Abgerundete Ecken */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Optional: Leichter Schatten */
}

/* Farbverlauf für den Bottomframe */
#bottomframe {
    height: 4%; /* Halbe Höhe des Menüs (8% / 2) */
    background: linear-gradient(to bottom, #ffffff, #d1d0d0); /* Übergang von Weiß zu Blau */
    color: white;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
    position: fixed; /* Fixiere die Frames */
    width: 100%; /* Volle Breite */
    z-index: 10; /* Sicherstellen, dass sie über dem Inhalt liegen */
    bottom: 0; /* Unten fixieren */
}

.logo img {
    height: 50px; /* Höhe des Logos */
    width: auto;  /* Automatische Breite, um das Seitenverhältnis beizubehalten */
}

/* Header-Styling */
.header {
    display: flex;
    justify-content: space-between; /* Elemente werden gleichmäßig verteilt */
    align-items: center;
    padding: 10px;
    box-sizing: border-box;
    width: 100%; /* Nimmt die gesamte Breite des Bildschirms ein */
}

.header .logo {
    flex: 0 0 auto; /* Fixiere die Breite des Logos */
    text-align: left;
}

.header .title {
    flex: 1; /* Nutze den verfügbaren Platz */
    text-align: center;
}

.header .language-menu {
    flex: 0 0 auto; /* Fixiere die Breite des Menüs */
    text-align: right;
}

.header .language-menu button {
    margin-left: 5px; /* Abstand zwischen Buttons */
}

/* Horizontal ausgerichtetes Menü */
.horizontal-menu {
    display: flex;
    justify-content: space-around; /* Gleichmäßige Verteilung der Menüpunkte */
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #d1d0d0; /* Hintergrundfarbe des Menüs */
    position: relative; /* Basis für absolute Positionierung der Untermenüs */
    z-index: 10; /* Sicherstellen, dass das Menü über anderen Elementen liegt */
}

.horizontal-menu > li {
    position: relative; /* Für das absolute Positionieren der Untermenüs */
    padding: 10px 20px; /* Abstand innerhalb der Menüpunkte */
}

/* Hauptmenü-Links */
.horizontal-menu > li > a {
    text-decoration: none;
    color: #333; /* Textfarbe */
    font-size: 1rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /* Füge einen Textschatten hinzu */
    transition: color 0.3s ease, text-shadow 0.3s ease, background-color 0.3s ease; /* Übergänge für Hover-Effekte */
}

.horizontal-menu > li > a:hover {
    color: #e6e7e900; /* Ändere die Textfarbe beim Hover */
    text-shadow: none; /* Entferne den Textschatten beim Hover */
    background-color: #fefeff8e; /* Entferne die Hintergrundfarbe beim Hover */
}

.horizontal-menu > li > a {
    text-decoration: none;
    color: #333; /* Textfarbe */
    font-size: 1rem;
    transition: color 0.3s ease;
}

.horizontal-menu > li > a:hover {
    color: #ffffff; /* Farbe beim Hover */
}

/* Untermenü */
.horizontal-menu > li > ul {
    display: none; /* Verstecke das Untermenü standardmäßig */
    position: absolute; /* Positioniere das Untermenü relativ zum Hauptmenüpunkt */
    top: 100%; /* Direkt unter dem Hauptmenüpunkt */
    left: 0;
    list-style: none;
    background-color: #ffffff; /* Setze die Hintergrundfarbe auf Weiß */
    padding: 10px; /* Füge Innenabstand hinzu */
    margin: 0;
    border-radius: 0; /* Entferne die abgerundeten Ecken */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Füge einen leichten Schatten hinzu */
    z-index: 999; /* Höherer Wert, um sicherzustellen, dass das Untermenü sichtbar ist */
}

.horizontal-menu > li:hover > ul {
    display: block; /* Zeige das Untermenü, wenn die Maus über dem Hauptmenüpunkt ist */
    visibility: visible; /* Sichtbarkeit sicherstellen */
    opacity: 1; /* Voll sichtbar */
    transition: visibility 0.3s ease, opacity 0.3s ease; /* Sanfter Übergang */
}

/* Unter-Untermenü */
.horizontal-menu > li > ul > li > ul {
    visibility: hidden; /* Verstecke das Unter-Untermenü standardmäßig */
    opacity: 0; /* Unsichtbar machen */
    position: absolute; /* Positioniere das Unter-Untermenü relativ zum Untermenüpunkt */
    top: 0; /* Gleiche Höhe wie das Untermenü */
    left: 100%; /* Rechts vom Untermenü */
    list-style: none;
    background-color: #ffffff; /* Setze die Hintergrundfarbe auf Weiß */
    padding: 10px; /* Füge Innenabstand hinzu */
    margin: 0;
    border-radius: 0; /* Entferne die abgerundeten Ecken */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Füge einen leichten Schatten hinzu */
    z-index: 999; /* Höherer Wert, um sicherzustellen, dass das Unter-Untermenü sichtbar ist */
    transition: visibility 0.3s ease, opacity 0.3s ease; /* Animation hinzufügen */
}

.horizontal-menu > li > ul > li:hover > ul {
    visibility: visible; /* Zeige das Unter-Untermenü */
    opacity: 1; /* Sichtbar machen */
    display: block; /* Zeige das Unter-Untermenü bei Hover */
    visibility: visible; /* Sichtbarkeit sicherstellen */
    opacity: 1; /* Voll sichtbar */
}

/* Stile für Links im Untermenü */
.horizontal-menu ul li a {
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    color: #333;
    font-size: 0.9rem;
    transition: background-color 0.3s ease, color 0.3s ease;
    border-radius: 5px; /* Runde die Ecken der Links ab */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Füge einen leichten Schatten hinzu */
}

.horizontal-menu ul li a:hover {
    background-color: #0268f7;
    color: #ffffff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Verstärke den Schatten beim Hover */
}

/* Burger-Menü */
#burger-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #333;
    z-index: 1000;
    padding: 10px;
    box-sizing: border-box;
}

#burger-toggle {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
}

#burger-nav {
    display: flex;
    flex-direction: column;
    background-color: #444;
    margin-top: 10px;
    border-radius: 5px;
    overflow: hidden;
}

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

#burger-nav li {
    position: relative; /* Ermöglicht Untermenüs */
    border-bottom: 1px solid #555;
}

#burger-nav a {
    color: white;
    text-decoration: none;
    padding: 10px;
    display: block;
    transition: background-color 0.3s ease;
}

#burger-nav a:hover {
    background-color: #555;
}

/* Untermenü im Burger-Menü */
#burger-nav li ul {
    display: none; /* Verstecke Untermenüs standardmäßig */
    position: relative;
    background-color: #333;
    padding-left: 20px; /* Einrückung für Untermenüs */
}

#burger-nav li:hover > ul {
    display: block; /* Zeige Untermenü bei Hover */
}

/* Entferne spezifische Handy-Stile */
@media (max-width: 768px) {
    #language-selector {
        flex-direction: row; /* Zurück zur Standardausrichtung */
        align-items: center;
        gap: 10px;
    }

    #language-selector button {
        width: auto; /* Standardbreite wiederherstellen */
        text-align: center;
    }

    #menu {
        display: flex; /* Standardmenü wieder anzeigen */
    }

    #burger-menu {
        display: none; /* Burger-Menü ausblenden */
    }

    /* Menü für Handy-Version scrollbar machen */
    #menu {
        display: flex;
        flex-wrap: nowrap; /* Verhindert Zeilenumbruch */
        overflow-x: auto; /* Ermöglicht horizontales Scrollen */
        -webkit-overflow-scrolling: touch; /* Sanftes Scrollen auf mobilen Geräten */
    }

    #menu li {
        flex: 0 0 auto; /* Elemente behalten ihre Größe */
    }

    #menu::-webkit-scrollbar {
        height: 8px; /* Höhe des Scrollbalkens */
    }

    #menu::-webkit-scrollbar-thumb {
        background: #ccc; /* Farbe des Scrollbalkens */
        border-radius: 4px; /* Abgerundete Ecken */
    }

    #menu::-webkit-scrollbar-thumb:hover {
        background: #aaa; /* Farbe beim Hover */
    }

    #menu li {
        position: relative; /* Ermöglicht das Öffnen von Untermenüs */
    }

    #menu li ul {
        display: none; /* Verstecke Untermenüs standardmäßig */
        position: absolute;
        top: 100%; /* Direkt unter dem Hauptmenüpunkt */
        left: 0;
        background-color: #ffffff;
        padding: 10px;
        list-style: none;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        z-index: 999;
    }

    #menu li.open > ul {
        display: block; /* Zeige Untermenü, wenn die Klasse "open" hinzugefügt wird */
    }

    #menu li a {
        cursor: pointer; /* Zeige an, dass das Menü interaktiv ist */
    }
}

/* Entferne alle Burger-Menü-Stile */
#burger-menu {
    display: none;
}