/* Ensure dropdowns are not clipped by any container */
.custom-navbar,
.navbar-container,
.navbar-menu {
 overflow: visible;
}

:root {
 --primary-bg: #1a1a2e;
 --secondary-bg: #d7e3f4;
 --text-color-light: #E0E0E0;
 --text-color-dark: #1a1a2e;
 --accent-color: #0f3460;
 --highlight-color: #e94560;

 --primary-color: #5865f2;
 --primary-light: #768fff;
 --primary-dark: #0039cb;

 --navbar-height:70px;
 --menu-breakpoint:768px;

 --transition-fast:0.2s ease;
 --transition-normal:0.3s ease;
 --transition-slow:0.5s ease;
}

body {
 margin:0;
 font-family: sans-serif;
 padding-top: var(--navbar-height);
}

.navbar-container {
 max-width:1200px;
 margin:0 auto;
 display: flex;
 justify-content: space-between;
 align-items: center;
 height:100%;
 padding:020px;
 position: relative;
 z-index:2;
}

.custom-navbar {
 /* Mehrschichtiger Farbverlauf als Basis */
 background: linear-gradient(135deg, #1a1d290%, #0f1117100%);
 color: #FFFFFF;
 height: var(--navbar-height);
 position: fixed;
 top:0;
 left:0;
 width:100%;
 z-index:1000;
 box-shadow:02px20px rgba(0,0,0,0.5);
 backdrop-filter: blur(10px);
 border-bottom:1px solid rgba(88,101,242,0.3);
 /* Wichtig: Dropdown nicht abschneiden */
 overflow: visible;
}

 /* Hexagonal Pattern Layer1 */
 .custom-navbar::before {
 content: '';
 position: absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 background-image: 
 repeating-linear-gradient(0deg, transparent, transparent30px, rgba(88,101,242,0.2)30px, rgba(88,101,242,0.2)32px),
 repeating-linear-gradient(60deg, transparent, transparent30px, rgba(88,101,242,0.2)30px, rgba(88,101,242,0.2)32px),
 repeating-linear-gradient(120deg, transparent, transparent30px, rgba(88,101,242,0.2)30px, rgba(88,101,242,0.2)32px);
 opacity:0.3;
 pointer-events: none;
 z-index:0;
 }

 /* Gradient Glow Layer2 */
 .custom-navbar::after {
 content: '';
 position: absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 background: radial-gradient(circle at20%50%, rgba(88,101,242,0.25), transparent50%),
 radial-gradient(circle at80%50%, rgba(0,217,255,0.2), transparent50%),
 radial-gradient(circle at50%50%, rgba(123,104,238,0.2), transparent60%);
 opacity:0.6;
 pointer-events: none;
 z-index:0;
 animation: navGlowPulse8s ease-in-out infinite;
 }

@keyframes navGlowPulse {
0%,100% {
 opacity:0.5;
 }
50% {
 opacity:0.7;
 }
}

.navbar-logo {
 color: #FFFFFF;
 text-decoration: none;
 font-size:1.5em;
 font-weight: bold;
 position: relative;
 z-index:2;
 text-shadow:02px10px rgba(0,0,0,0.8),0020px rgba(88,101,242,0.3);
 transition: all0.3s ease;
}

 .navbar-logo:hover {
 color: var(--primary-light);
 text-shadow:0025px rgba(88,101,242,0.9),02px10px rgba(0,0,0,0.8);
 }

.navbar-menu {
 list-style: none;
 margin:0;
 padding:0;
 display: flex;
 position: relative;
 z-index:2;
}

 .navbar-menu li {
 position: relative;
 }

 .navbar-menu li a {
 color: #FFFFFF;
 text-decoration: none;
 padding:015px;
 display: flex;
 align-items: center;
 height: var(--navbar-height);
 position: relative;
 transition: color0.3s ease, background-color0.3s ease;
 font-weight:500;
 text-shadow:02px8px rgba(0,0,0,0.8),0015px rgba(88,101,242,0.2);
 }

 .navbar-menu li a::before {
 content: '';
 position: absolute;
 bottom:0;
 left:0;
 width:100%;
 height:3px;
 background: linear-gradient(90deg, var(--primary-color), var(--primary-light), var(--accent-color));
 transform: scaleX(0);
 transform-origin: center;
 transition: transform0.3s ease-out;
 z-index: -1;
 box-shadow:0015px rgba(88,101,242,0.6);
 }

 .navbar-menu li a:hover {
 color: #FFFFFF;
 text-shadow:0020px rgba(88,101,242,0.9),02px8px rgba(0,0,0,0.8);
 }

 .navbar-menu li a:hover::before {
 transform: scaleX(1);
 }


.navbar-dropdown .arrow {
 font-size:0.7em;
 margin-left:5px;
 transition: transform0.3s ease;
}

.navbar-dropdown:hover .arrow {
 transform: rotate(180deg);
}

/* Support Klick-Öffnen per JS auch auf Desktop */
.navbar-dropdown > a.is-open .arrow {
 transform: rotate(180deg);
}

.dropdown-content.is-open {
 display: block;
 opacity:1;
 visibility: visible;
 transform: translateY(0);
}

.dropdown-content {
 display: none;
 position: absolute;
 top:100%;
 left:0;
 background: linear-gradient(135deg, #1a1d290%, #0f1117100%);
 list-style: none;
 padding:10px0;
 margin:0;
 min-width:200px;
 box-shadow:08px20px rgba(0,0,0,0.6);
 border-radius:008px8px;
 opacity:0;
 visibility: hidden;
 transform: translateY(10px);
 transition: opacity0.3s ease, visibility0.3s ease, transform0.3s ease;
 z-index:1001;
 border:1px solid rgba(88,101,242,0.3);
 border-top: none;
 backdrop-filter: blur(10px);
 overflow: hidden;
}

 /* Mehrschichtige Verläufe für Dropdown */
 .dropdown-content::before {
 content: '';
 position: absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 background: radial-gradient(circle at50%0%, rgba(88,101,242,0.25), transparent70%),
 radial-gradient(circle at0%50%, rgba(0,217,255,0.15), transparent60%);
 opacity:0.6;
 pointer-events: none;
 z-index:0;
 }

 .dropdown-content::after {
 content: '';
 position: absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 background-image: 
 repeating-linear-gradient(45deg, transparent, transparent20px, rgba(88,101,242,0.15)20px, rgba(88,101,242,0.15)22px);
 opacity:0.2;
 pointer-events: none;
 z-index:0;
 }

.navbar-dropdown:hover > .dropdown-content {
 display: block;
 opacity:1;
 visibility: visible;
 transform: translateY(0);
}

.dropdown-content li a {
 color: #FFFFFF;
 padding:12px20px;
 display: block;
 height: auto;
 white-space: nowrap;
 background-color: transparent;
 text-shadow:02px8px rgba(0,0,0,0.8),0010px rgba(88,101,242,0.2);
 transition: all0.3s ease;
 position: relative;
 z-index:1;
}

 .dropdown-content li a::before {
 display: none;
 }

 .dropdown-content li a:hover {
 background: linear-gradient(90deg, rgba(88,101,242,0.4), rgba(88,101,242,0.2), rgba(0,217,255,0.2));
 color: #FFFFFF;
 text-shadow:0015px rgba(88,101,242,0.8),02px8px rgba(0,0,0,0.8);
 padding-left:25px;
 }

.navbar-toggle {
 display: none;
 background: none;
 border: none;
 cursor: pointer;
 padding:10px;
 position: relative;
 z-index:2;
}

 .navbar-toggle .icon-bar {
 display: block;
 width:25px;
 height:3px;
 background: linear-gradient(90deg, var(--primary-light), var(--primary-color), var(--accent-color));
 margin:5px0;
 transition: transform0.3s ease, opacity0.3s ease;
 box-shadow:0010px rgba(88,101,242,0.6);
 }

 .navbar-toggle.is-active .icon-bar:nth-child(1) {
 transform: translateY(8px) rotate(45deg);
 }

 .navbar-toggle.is-active .icon-bar:nth-child(2) {
 opacity:0;
 }

 .navbar-toggle.is-active .icon-bar:nth-child(3) {
 transform: translateY(-8px) rotate(-45deg);
 }



@media (max-width:768px) {
 .navbar-container {
 padding:015px;
 }

 .navbar-menu {
 display: block;
 position: absolute;
 top: var(--navbar-height);
 left:0;
 width:100%;
 background: linear-gradient(135deg, #1a1d290%, #0f1117100%);
 flex-direction: column;
 padding:10px0;
 box-shadow:08px20px rgba(0,0,0,0.6);
 max-height:0;
 overflow: hidden;
 transition: max-height0.5s ease-out;
 border-bottom:1px solid rgba(88,101,242,0.3);
 }

 .navbar-menu::before {
 content: '';
 position: absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 background: radial-gradient(circle at50%0%, rgba(88,101,242,0.2), transparent70%),
 radial-gradient(circle at0%100%, rgba(0,217,255,0.15), transparent60%);
 opacity:0.6;
 pointer-events: none;
 z-index:0;
 }

 .navbar-menu::after {
 content: '';
 position: absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 background-image: 
 repeating-linear-gradient(45deg, transparent, transparent20px, rgba(88,101,242,0.15)20px, rgba(88,101,242,0.15)22px);
 opacity:0.2;
 pointer-events: none;
 z-index:0;
 }

 .navbar-menu.is-active {
 display: flex;
 max-height:80vh; /* mehr Platz für geöffnete Dropdowns */
 }

 .navbar-menu li {
 width:100%;
 text-align: center;
 position: relative;
 z-index:1;
 }

 .navbar-menu li a {
 height: auto;
 padding:15px20px;
 justify-content: center;
 border-bottom:1px solid rgba(88,101,242,0.2);
 color: #FFFFFF;
 text-shadow:02px8px rgba(0,0,0,0.8),0010px rgba(88,101,242,0.2);
 }

 .navbar-menu li:last-child a {
 border-bottom: none;
 }

 .navbar-menu li a:hover::before {
 display: none;
 }

 .navbar-menu li a:hover {
 background: linear-gradient(90deg, rgba(88,101,242,0.4), rgba(88,101,242,0.2), rgba(0,217,255,0.2));
 color: #FFFFFF;
 text-shadow:0015px rgba(88,101,242,0.8),02px8px rgba(0,0,0,0.8);
 }


 .navbar-dropdown:hover > .dropdown-content {
 display: none;
 }

 .dropdown-content {
 position: static;
 display: none;
 background: rgba(0,0,0,0.3);
 box-shadow: none;
 border-radius:0;
 padding:0;
 margin:0;
 width:100%;
 opacity:1;
 visibility: visible;
 transform: none;
 transition: none;
 max-height:0;
 overflow: hidden;
 transition: max-height0.4s ease-in-out;
 border: none;
 }

 .dropdown-content::before,
 .dropdown-content::after {
 display: none;
 }

 .dropdown-content.is-open {
 display: block;
 max-height:300px;
 }

 .dropdown-content li a {
 padding:12px30px;
 justify-content: center;
 background-color: transparent;
 border-bottom:1px solid rgba(88,101,242,0.2);
 color: #FFFFFF;
 text-shadow:02px8px rgba(0,0,0,0.8),0010px rgba(88,101,242,0.2);
 }

 .dropdown-content li a:hover {
 padding-left:30px;
 background: linear-gradient(90deg, rgba(88,101,242,0.4), rgba(88,101,242,0.2));
 color: #FFFFFF;
 text-shadow:0015px rgba(88,101,242,0.8),02px8px rgba(0,0,0,0.8);
 }

 .dropdown-content li:last-child a {
 border-bottom: none;
 }

 .navbar-dropdown .arrow {
 display: inline-block;
 transition: transform0.3s ease;
 }

 .navbar-dropdown > a.is-open .arrow {
 transform: rotate(180deg);
 }


 .navbar-toggle {
 display: inline-block;
 }
}

.content {
 padding:40px20px;
 max-width:1160px;
 margin:0 auto;
}