/* ========================= */
/* NAV GRUNDLAGEN */
/* ========================= */


:root {
  --nav-height: 50px; /* ggf. hier einen festen wert 50px auto kann auch gehen eingeben für die NAV Leiste oben*/

  --nav-padding-left: clamp(120px, 8vw + 80px, 230px);


}

nav.firstNav {
    position: relative;
    z-index:        1000;
    background:     #dedede;
    border-bottom:  1px solid #c2c2c2;
    height:         var(--nav-height);              /* ← WICHTIG */
    white-space:    nowrap;
/*    overflow:       hidden; */
    text-overflow:  ellipsis;
    font-stretch:   clamp(90%, 98%, 100%);
    letter-spacing: clamp(-0.01rem, -0.005rem, 0rem);

    /* Horizontaler Versatz | Vertikaler Versatz | Unschärfe | Ausbreitung | Farbe */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
    z-index: 1000;
}

 nav.firstNav .container {
    display:     flex;
    align-items: center;
    height:      100%;
    padding:     0 20px;
    position: relative;
}

.nav {
    display:      flex;
    height:       100%;          /* wichtig */
    align-items:  center;   /* ← DAS ist der Hauptpunkt */
    margin:       0;
	padding-left: var(--nav-padding-left);
    list-style:   none;
	font-size:    clamp(0.8rem, 1.3vw, 1.25rem);
    line-height:  1;
    max-width:    1920px;
    


}


.nav > li {
    position:    relative;
    height:      100%;
    display:     flex;
    align-items: center;
}

/* Senkrechter Trennstrich zwischen den Menüpunkten (nicht am Anfang) */
.nav > li + li::before {
    content:   "";
    display:   block;
    width:     1px;                     /* Strichbreite */
    height:    40%;                     /* Höhe des Striches */
    background-color: rgba(0,0,0,0.15); 
    margin:    0 0;                     /* Abstand links und rechts */
}

nav.firstNav .nav ul, 
nav.firstNav .nav li {    
    list-style: 	 none;
    list-style-type: none;
}


.nav > li > a {
    display:     flex;
    align-items: center;

    height:     100%;
/*    padding: .3rem .8rem; */

    padding:    0.3rem clamp(0.5rem, 1.1vw, 1.1rem); 

    text-decoration: none;
    color:      #222;
}

.nav > li > a:hover {
    color:      #a30aa0;
/*    background: rgba(255,255,255,0.3); 
     Optional: Leichter Hover-Effekt */
}

/* ========================= */
/* MEGA OWN (DESKTOP) */
/* ========================= */

.mega-dropdown {
    position:       absolute;
    top:            100%;
    left:           0;
    right:          0;
/*  padding:        1.5rem 2rem; */
/*  padding-left:   225px; */
    padding:        20px calc(var(--nav-padding-left) + 20px) 20px 20px ;
    margin-inline:  20px; 



    background:     #e0e0e0;
    border-top:     1px solid #c2c2c2;
    box-shadow:     0 12px 30px rgba(0,0,0,0.12);

    opacity:        0;
    visibility:     hidden;
    pointer-events: none;
    transform:      translateY(15px);

    transition:
        opacity     .3s ease,
        transform   .3s ease,
        visibility   0s linear .3s;

    z-index:         3002;
}


.mega-dropdown.is-active {
    opacity:          1;
    visibility:       visible;
    pointer-events:   auto;
    transform:        translateY(0);
    transition-delay: 0s;
}

/* Grid */
.dropdown-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 2rem;
}

/* Spalten */
.dropdown-column {
    background:    #f6f6f6;
    padding:       1rem !important;    
    line-height:   1;
    border-radius: .25rem;
}

.dropdown-column a:hover {
    color:          #a30aa0;
}

.dropdown-column ul,
.dropdown-column li {
    list-style: 	   none;
    list-style-type:   none;
    }

.column-title {
    margin-bottom:  .5rem;
    display:        block;
    color:          #111;
}

.dropdown-column ul {
    list-style: none;
    padding-left: 0;
    margin-top: .5rem;
    border-top: 1px solid #bbb;
}

.dropdown-column ul li a {
    display: block;
    padding: .35rem 0;
    font-size: .9rem;
    color: #444;
}

.dropdown-column ul li a:hover {
    color:     #a30aa0;
    transform: translateX(4px);
}