/* Einstellungen für die Überschrift */
@font-face {
    font-family: 'MeineEigeneSchriftart';
    src: url('/Schriftart/Aileron-Regular.otf') format('opentype');
}

:root{
    --background-color: #f8991c;
    --background-colorShine: rgb(248, 153, 28, 1);
    --darker-background-color: #964c0b;
    --accent-color: #392001;
    --text-Color: #964c0b;
    --backgroundWhite:  rgb(255, 255, 240);
    --backgroundWhiteShine:  rgb(255, 255, 240, 1);
    --navbar-height: 70px/*70px*/;
    color: var(--text-Color);
}

#burger-toggle {
    display: none;
}
.burger-menu-content{
    display: none;
}

.burger-menu {
    display: none;
}

html{
    height: 100%;
    color: var(--text-Color);
}

*{
    margin: 0;
    padding: 0;
}
body {
    font-family: 'MeineEigeneSchriftart';
    margin: 0;
    padding: 20px;
    box-sizing: border-box;
    color: var(--text-Color);
}

nav {
    width: 100%;
    height: var(--navbar-height);
    background-color: var(--backgroundWhite);
    box-shadow: 2px 2px 4px var(--darker-background-color);
    color: var(--text-Color);        
    margin: 0px auto; /* Hinzugefügt: automatisches Zentrieren */
    text-align: center; /* Hinzugefügt: Zentriert den Text innerhalb des Nav */
    overflow: hidden;
}

nav a {
    display: inline-block;
    overflow: hidden;
    margin: 10px auto;
    vertical-align: top; /* Fügt eine vertikale Ausrichtung hinzu, um sicherzustellen, dass alle Elemente auf der gleichen Höhe sind */
    color: var(--text-Color);
    text-align: center;
    padding: 13px 16px;
    text-decoration: none;
    background-color: var(--background-color);
    font-weight: bold; /* Hier die Änderung */
    border-top: 2px solid ; /* Hinzugefügt: Transparenter oberer Strich */
    border-bottom: 2px solid ;
}

.dropdown {
    display: inline-block; /* Verhalten zu inline-block ändern */
    overflow: hidden;
    margin: 10px auto; /* Optional: Füge Abstand zwischen den Menüelementen hinzu */
    vertical-align: top; /* Fügt eine vertikale Ausrichtung hinzu, um sicherzustellen, dass alle Elemente auf der gleichen Höhe sind */
    color: var(--text-Color);
    border-top: 2px solid; /* Hinzugefügt: Transparenter oberer Strich */
    border-bottom: 2px solid;
}

.dropdown .dropbtn {
    font-size: 16px;
    border: none;
    outline: none;
    text-decoration: none;
    color: var(--text-Color);
    padding: 14px 16px;
    background-color: var(--background-color);
    box-shadow: 2px 2px 4px var(--background-color);
    font-weight: bold; /* Hier die Änderung */
    margin: 0;
}

nav a:hover, .dropdown:hover .dropbtn {
    background-color: var(--darker-background-color);
    color: var(--background-color);
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--background-color);
    text-align: left; /* Optional: Setze den Text im Dropdown-Menü nach links ausgerichtet */
    color: var(--text-Color);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px var(--background-color);
    z-index: 1;
}


.dropdown-content a {
    float: none;
    color:var(--text-Color);
    padding: 14px 16px;
    text-decoration: none;
    border-top: 1px none; /* Hinzugefügt: Transparenter oberer Strich */
    border-bottom: 1px none;
    font-weight: bold; /* Hier die Änderung */
    display: block;
    text-align: center;       
}

.dropdown-content a:hover {
    background-color: var(--darker-background-color);
    color: var(--background-color);
    border-top: 0px solid; /* Hinzugefügt: Transparenter oberer Strich */
    border-bottom: 0px solid;
}

.dropdown:hover .dropdown-content {
    display: block;
    color: var(--background-Color);
}

.burger-toggle {
    display: none;
}

.TopHeader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    flex-direction: column;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--backgroundWhiteShine); /* Hintergrundfarbe anpassen */
    color: var(--text-color); /* Textfarbe über Variable setzen */
}


.Logo_Link{
    text-decoration: none; /* Entfernt die unterstrichene Textdekoration */
    color: inherit; /* Vererbt die Textfarbe von übergeordneten Elementen */
    max-width: auto; /* Hier die maximale Breite des Logos anpassen */
    height: auto; /* Automatische Anpassung der Höhe */
    margin: 0;
    float: left;
    background-color: transparent; /* Macht den Hintergrund transparent */
    border: none; 
    height: var(--navbar-height);
    background-color: var(--backgroundWhite);
    box-shadow:none;     
}
.Logo_LinkVFO{
    text-decoration: none; /* Entfernt die unterstrichene Textdekoration */
    color: inherit; /* Vererbt die Textfarbe von übergeordneten Elementen */
    max-width: auto; /* Hier die maximale Breite des Logos anpassen */
    height: auto; /* Automatische Anpassung der Höhe */
    margin: 0;
    float: right;
    background-color: transparent; /* Macht den Hintergrund transparent */
    border: none;
    height: var(--navbar-height);
    background-color: var(--backgroundWhite);
    box-shadow: none;      
}

.Logo{
    margin-top: -10px;
    max-width: 70px; /* Hier die maximale Breite des Logos anpassen */
    height: auto; /* Automatische Anpassung der Höhe */
    z-index: 100;
}

.LogoVFO {
    max-width: 70px; /* Passen Sie die Breite des Logos nach Bedarf an */
    height: auto; /* Automatische Anpassung der Höhe */
    margin-top: -12px; /* Abstand zwischen dem Logo und anderen Elementen */ 
    z-index: 100;   
}

.Logo_Link:hover{
    background-color: inherit;
    color: inherit;
    opacity: 0.7;
}

.Logo_LinkVFO:hover{
    background-color: inherit;
    color: inherit;
    opacity: 0.7;
}

#holiday-banner {
    background-color: #f2dede;
    color: #a94442;
    padding: 10px;
    position: fixed;
    top: 0;
    width: 100%;
    text-align: center;
    z-index: 9999;
}

#close-banner {
    background-color: #d9534f;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
}

/* Media Query für kleine Bildschirme */
@media screen and (max-width: 600px) {
nav a, .dropdown .dropbtn {
    display: none;
}

.nav {    
    background-color: var(--background-color);    
    height: var(--navbar-height);
    color: var(--text-Color);
    border-top: 2px solid transparent; 
    border-bottom: 2px solid transparent;
}

.burger-menu {
    display: flex;
    font-size: 30px; /* Reduziere die Schriftgröße */
    align-items: center; /* Zentriert vertikal */
    justify-content: center; /* Zentriert horizontal */
    width: 100%;
    color: var(--text-Color);
}

.burger-menu::before {
    content: '\2261'; /* Unicode für das Burger-Symbol */
    display: flex;
    position: absolute;    
    margin-top: -80px ; 
    transform: translate(-50%, -50%);
    color: var(--text-Color);
}

.burger-menu-content a {
    display: block;
    padding: 10px 16px; /* Reduziere das Padding */
    text-decoration: none;
    color: var(--text-Color);
    border-top: none; 
    border-bottom: none;
}
.burger-menu-content {
    position: relative;
    overflow-y: auto; /* Hier das Scrollen aktivieren, wenn der Inhalt die maximale Höhe überschreitet */
}


.burger-toggle {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    cursor: pointer;
    color: var(--text-Color);
}

.burger-menu-content a:hover {
    background-color: var(--darker-background-color);
    color: var(--background-color);
}

.burger-toggle:checked ~ .burger-menu-content {
    display: block;
    flex-direction: column;
    align-items: center;
    position: absolute;
    border-top: none; 
    border-bottom: none;
    color: var(--text-Color);
    background-color: var(--background-color);
    width: 100%;
    top: var(--navbar-height);
    box-shadow: 2px 2px 4px var(--darker-background-color);
    z-index: 2;
}   

.burger-toggle:checked ~ .burger-menu::before {
    content: 'X'; /* Ändern Sie dies auf das Symbol oder Text, den Sie als "X" verwenden möchten */
    font-size: 25px; /* Hier die gewünschte Schriftgröße festlegen */
    color: var(--text-Color);
    vertical-align: middle; /* Stellt sicher, dass das Pseudo-Element vertikal zentriert ist */
}

    .Logo_Link {
        display: block;
        float: left;
        text-align: center;
        margin-top: 0px;
    }
    .Logo_LinkVFO {
        display: block;
        float: right;
        text-align: center;
        margin-top: -97px;
    }
}

/* Einstellungen für die Überschrift ende */