/* Grundlayout */



/* Menü */

.custom-menu {
    /* Stellt sicher, dass der Container die volle Breite nutzt */
    width: 100%; 
    /* Setzt Ränder/Abstände zurück, falls sie dort gesetzt wurden */
    margin: 0; 
    padding: 0; 
    /* WICHTIG: Erzeugt oft Probleme bei 100% Breite */
    box-sizing: border-box; 
}

.custom-menu .menu {
  list-style: none;
  display: flex;
  margin: 0;

  justify-content: flex-end;
  align-items: center;
  padding: 10px 35px 10px 0;
  background: #d86520; /* NEU: Dunkles Orange für den Hintergrund */
  font-family: Arial, sans-serif;
  font-size: 18px;
  font-weight: bold;
  text-shadow: 1px 1px 0px #000000;
  height: 51px;
  border-top: 1px solid white; /* Weiße Linie oben */
  border-bottom: 1px solid white; /* Weiße Linie unten */
  box-sizing: border-box;
}
.custom-menu li {
  position: relative;
}
.custom-menu li a {
  display: block;
  padding: 10px 15px;
  color: white;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.2s ease;
}
.custom-menu li a:hover {
  background: #555;
}

/* Desktop-Submenu */
.custom-menu .submenu {
  position: absolute;
  top: 100%;
  left: -20px;
  background: #fff;
  color: #333;
  font-weight: normal;
  text-shadow: none;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  min-width: 180px;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  pointer-events: none;
  z-index: 1000;
    box-sizing: border-box;
}
.custom-menu li:hover > .submenu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;

}
.custom-menu .submenu li a {
  padding: 10px;
  color: #333;
  border-bottom: 1px solid lightgrey; /* Weiße Linie unten */
}
.custom-menu .submenu li a:hover {
  background: #ddd;
}

/* Pfeil */
.custom-menu .arrow {
  margin-left: 2px;
  font-size: 22px;
  transition: transform 0.3s ease;
}

/* Mobile */
.menu-toggle {
  display: none;
  cursor: pointer;
    box-sizing: border-box;

}

@media (max-width: 768px) {
  
    /* 1. Toggle-Button anzeigen */
    .menu-toggle {
        display: block; /* Zeigt das Burger-Icon an */
        color: white; /* Farbe an den Hintergrund anpassen */
        font-size: 50px;
				
        cursor: pointer;
        /* Positionierung anpassen, falls nötig (z.B. links) */
        position: absolute; 
        right: 18px;
        top: 218px;
        z-index: 1001; 
    }

    /* 2. Hauptmenü verstecken und vertikal anordnen */
    .custom-menu .menu {
        display: flex; 
        flex-direction: column; /* 🚀 NEU: Menüpunkte untereinander anordnen */
				font-size: 20px;
        align-items: flex-start; /* Punkte linksbündig ausrichten */
        justify-content: flex-start; 
        
        /* Das Menü standardmäßig verstecken (Höhe 0) */
        max-height: 0;
				background: #666;
        overflow: hidden;
        
        /* Layout-Anpassungen für Mobile */
        width: 100%;
        padding: 0; /* Optional: Entfernt das Padding für volle Breite */
        height: auto;
        
        /* Setzt den Übergang für die Öffnungs-/Schließ-Animation */
        transition: max-height 0.3s ease-out;
        
        /* Optional: Fügt einen Schatten hinzu, wenn das Menü öffnet */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
    }

    /* 3. Menü anzeigen, wenn die Klasse "show" aktiv ist (via JavaScript) */
    .custom-menu .menu.show {
        max-height: 500px; /* Hoch genug, um alle Punkte anzuzeigen */
        overflow: visible;
    }
    
    /* 4. Submenü-Anpassungen für Mobile (kein Dropdown, sondern ausklappbar) */
    .custom-menu .submenu {
        position: relative; /* 🚀 NICHT ABSOLUT: Fließt in den Hauptmenü-Block ein */
        top: auto; 
        left: -20px; 
        right: auto;
        
        /* Versteckt das Submenü standardmäßig */
        max-height: 0;
        overflow: hidden;
        transition: none;
        
        min-width: 100%; /* Das Submenü soll die volle Breite des Menüs einnehmen */
        background: #f0f0f0; /* Hellere Farbe für Submenü-Items */
    }
    
    /* 5. Submenü anzeigen, wenn die Klasse "show" aktiv ist (via JavaScript) */
    .custom-menu li.has-submenu .submenu.show {
        max-height: 400px; 
		transition: max-height 0.3s ease-out;
    }

    /* 6. Links anpassen (Abstand) */
    .custom-menu li a {
        padding: 10px 20px; /* Erhöhtes Padding, um das Klicken zu erleichtern */
        width: 100%;
		 border-bottom: 1px solid lightgrey; /* Weiße Linie unten */
        box-sizing: border-box;
    }
    
    /* Optional: Submenü-Links etwas einrücken */
    .custom-menu .submenu li a {
        padding-left: 40px; 
        color: #333;
    }
		.custom-menu .arrow {
  margin-left: 4px;
  font-size: 24px;
  transition: transform 0.3s ease;
}
}