@media screen and (max-width: 599px){
	#header-nav ul.level_1{
	display: none !important;
	}
	#selectnav::before {
	content: no-close-quote;
	}
	.row, [class*="make-columns"] {
	margin-left: inherit;
	margin-right: inherit;
	}
	#selectnav::after {
	background: #555;
	}
}



/* ==========================================================================
   1. GRUND-RESET & CONTAINER (Damit Contao-Standard-Styles überschrieben werden)
   ========================================================================== */
#header-nav, 
#header-nav #main-nav, 
#header-nav ul {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    list-style: none;
}

#header-nav {
    width: 100%;
    background-color: #000000; /* Hintergrundfarbe der gesamten Menüzeile (z.B. Schwarz) */
    font-family: Arial, Helvetica, sans-serif; /* Deine gewünschte Schriftart */
}

/* ==========================================================================
   2. LEVEL 1 - HAUPTMENÜ (Horizontale Anordnung)
   ========================================================================== */
#header-nav ul.level_1 {
    display: flex;
    flex-wrap: nowrap; /* Erzwingt, dass alle Punkte in einer Zeile bleiben */
    align-items: center;
    width: 100%;
}

#header-nav ul.level_1 > li {
    position: relative; /* Extrem wichtig, damit Level 2 sich hieran ausrichtet */
    display: block;
}

/* GEMEINSAMES STYLING für normale Links (a) und aktive Texte (strong) */
#header-nav ul.level_1 > li > a,
#header-nav ul.level_1 > li > strong {
    display: block;
    padding: 15px 20px;
    color: #ffffff; /* Weiße Schriftfarbe im Hauptmenü */
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase; /* Macht den Text edel in Großbuchstaben (optional) */
    white-space: nowrap; /* Verhindert Zeilenumbruch innerhalb eines Menüpunkts */
    cursor: pointer;
}

/* ==========================================================================
   3. HOVER- & AKTIV-ZUSTÄNDE (Level 1)
   ========================================================================== */
/* Standard-Hover für alle normalen Punkte */
#header-nav ul.level_1 > li:hover > a,
#header-nav ul.level_1 > li:hover > strong {
    background-color: #333333; /* Dunkelgrauer Hover-Effekt */
    color: #ffffff;
}

/* Spezifischer Fix für dein "Togo" (colorful-header) */
#header-nav ul.level_1 > li.colorful-header > a,
#header-nav ul.level_1 > li.colorful-header > strong {
    background-color: #a62626; /* Dunkelrot als Togo-Akzentfarbe */
    color: #ffffff;
}

/* Wenn man über den aktiven Bereich (z.B. Togo) hovert */
#header-nav ul.level_1 > li.colorful-header:hover > a,
#header-nav ul.level_1 > li.colorful-header:hover > strong {
    background-color: #ce2029; /* Etwas helleres Rot bei Hover */
}

/* ==========================================================================
   4. LEVEL 2 - UNTERMENÜ (Das fehlerfreie Dropdown)
   ========================================================================== */
#header-nav ul.level_1 > li ul.level_2 {
    position: absolute;
    top: 100%; /* Exakt unterhalb der Level-1-Zeile */
    left: 0;
    width: 250px; /* Feste Breite des Dropdowns */
    background-color: #2a373a;
    border: 1px solid #cccccc;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
    padding: 5px 0;
    z-index: 99999; /* Schiebt sich über jeden anderen Inhalt der Webseite */
    
    /* Unsichtbar im Normalzustand */
    display: none; 
}

/* Untermenü-Punkte untereinander darstellen */
#header-nav ul.level_2 > li {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
}

/* Links im Untermenü */
#header-nav ul.level_2 > li > a {
    display: block;
    padding: 10px 15px;
    color: #333333; /* Dunkle Schrift auf weißem Grund */
    text-decoration: none;
    font-size: 13px;
    font-weight: normal;
    text-transform: none; /* Keine Großbuchstaben im Untermenü */
    text-align: left;
}

/* Hover-Effekt im Untermenü */
#header-nav ul.level_2 > li > a:hover {
    background-color: #f5f5f5; /* Leichter Grauton bei Hover */
    color: #a62626; /* Text färbt sich rot */
}

.active.first {
  display: block;
  padding: 10px 15px;
  padding-top: 10px;
  padding-bottom: 10px;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: normal;
  text-transform: none;
  text-align: left;
}


/* ==========================================================================
   5. DER TRIGGER (Blendet das Untermenü beim Hovern ein)
   ========================================================================== */
#header-nav ul.level_1 > li:hover > ul.level_2 {
    display: block; /* Zeigt das Menü exakt dann an, wenn die Maus darüber ist */
}

/* ==========================================================================
   6. CONTAO SYSTEM-KLASSEN (Unsichtbare Elemente verstecken)
   ========================================================================== */
#header-nav .invisible {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}