.center-helper-container
{

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 25vh;
    width: 100%;

}



.top-bar-container
{

    position: relative;
    top: 6vw;
    
    
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    row-gap: 0;
    column-gap: 2vw;

    margin: 1%;

}



.nav-item 
{
    
    background-color: var(--webpage-background-color-button-green);
    color: var(--webpage-text-color-page-button);
    
    border-radius: clamp(4px, var(--radius-dynamic), 12px);
    padding: 8px clamp(10px, 2vw, 20px);
    
    text-decoration: none;

    font-weight: var(--weight-black);
    font-size: var(--size-text-1);

    width: var(--elemnt-width-big);
    aspect-ratio: 5 / 1;
    
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;

}


.nav-subitem 
{
    
    color: var(--webpage-text-color-page-button);
    
    border-radius: clamp(4px, var(--radius-dynamic), 12px);
    padding: 8px clamp(5px, 2vw, 15px);
    
    text-decoration: none;

    font-weight: var(--weight-black);
    font-size: var(--size-text-2);
    

    width: var(--elemnt-width-big);
    aspect-ratio: 5 / 1;

    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;

    width: 100%;

}



.dropdown-content 
{

    display: none;

    top: 100%; 
    left: 0;
    
    background-color: var(--webpage-background-color-main);
    border-radius: 12px;
    padding: 10px 0;
    
    /* Schwebt über ALLEM anderen */
    z-index: 9999; 
    
    /* Verhindert, dass Text umbricht oder die Box verformt */
    white-space: nowrap; 


    /* 1px Breite, durchgezogene Linie, helle Farbe */
    border: 1px solid rgba(255, 255, 255, 0.15); 
    
    /* Optional: Ein leichter Glow-Effekt passend zum Rahmen */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    
    /* Wichtig: Wenn du border-radius nutzt, bleibt der Rahmen bündig */
    border-radius: 12px;

    
    margin-top: 15px;

    width: var(--elemnt-width-big);
    aspect-ratio: 5 / 1;

}



/* Der Anker-Punkt */
.nav-dropdown 
{

    position: relative; /* Wichtig: Das Menü orientiert sich an diesem Punkt */
    display: inline-block;
    height: 50px; /* Gleiche Höhe wie dein nav-item */
    margin: 0%;

}



.dropdown-content:hover 
{
    border-color: rgba(255, 255, 255, 0.4);
}




/* ZEIGEN: Wenn die Maus über dem Container ist (Button ODER Menü) */
.nav-dropdown:hover .dropdown-content
{
    
    display: block;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

}



/* WICHTIG: Die "Brücke" */
/* Falls du einen Abstand zwischen Button und Menü hast (z.B. margin-top), 
   kann das Menü zuklappen. Dieser Puffer verhindert das: */
.dropdown-content::before 
{

    content: '';
    position: absolute;
    top: -15px; /* Schließt die Lücke zum Button */
    left: 0;
    width: 100%;
    height: 15px;

}



.dropdown-padding
{

    position: absolute;
    width: 100%;
    height: 15px;
    background-color: transparent;

}



@media (max-width: 1500px) 
{

    .center-helper-container
    {

        padding-top: 20vh;

        margin-bottom: 15vh;

    }   


    
    .top-bar-container
    {

        position: relative;
        
        width: 100%;

        flex-direction: row;

    }

}



@media (max-width: 1000px) 
{

    .center-helper-container
    {

        padding-top: 20vw;

        margin-bottom: 16vh;

    }   


    
    .top-bar-container
    {

        position: relative;
        
        width: 100%;

        flex-direction: column;

        row-gap: 6vh;

    }



    .nav-dropdown:hover .dropdown-content
    {
        display: none;
    }



    .nav-item 
    {

        font-size: var(--size-title-small);
        width: var(--elemnt-width-big2);

    }


    .nav-subitem 
    {
        
        font-size: var(--size-text-1);
        width: var(--elemnt-width-big2);

    }



    .dropdown-content 
    {
        width: var(--elemnt-width-big2);
    }

}



@media (max-width: 680px) 
{

    .center-helper-container
    {

        padding-top: 2vh;

        margin-bottom: 12vh;

    }



    .top-bar-container
    {

        margin-top: 20vh;
        width: 100%;

        row-gap: 8vh;

    }

}



@media (max-width: 580px) 
{

    .center-helper-container
    {

        padding-top: 24vh;

        margin-bottom: 32vh;

    }



    .top-bar-container
    {

        position: absolute;
        width: 100%;

        margin-top: 20vh;
        row-gap: 3vh;

    }



    .nav-item 
    {

        font-size: var(--size-text-2);
        width: var(--elemnt-width-big3);

    }


    .nav-subitem 
    {
        
        font-size: var(--size-text-3);
        width: var(--elemnt-width-big3);

    }



    .dropdown-content 
    {
        width: var(--elemnt-width-big3);
    }

}