/* ----------------------------------------------
   Farbvariablen – zentral definieren
------------------------------------------------*/
:root {
    --color-bg-dark: #000;
    --color-text-light: #ffffff;
    --color-accent-green: #40fe58;
    --color-accent-blue: #078df1;
    --color-border: #ffffff;
    --color-dropdown-hover-bg: #111;
    --color-dropdown-border: #333;
}

/* ----------------------------------------------
   Grundstruktur/Layout
------------------------------------------------*/
html,
body,
main,
header,
footer,
.container,
.container-fluid,
.navbar-nav {
    background-color: var(--color-bg-dark);
    color: var(--color-text-light);
    width: 100%;
    
}

html {
    font-size: 12px;
}

@media (min-width: 768px) {
    html {
        font-size: clamp(14px, 1.5vw, 14px);
    }
}


.header-banner {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
    padding: 0;
    margin: 0;
}

    .header-banner img {
        height: 100px;
        width: 100%;
        display: block;
        background-repeat:repeat-x;
    }




header {
    width: 100%;
    background-color: transparent;
}


body {
    display: grid;
    place-items: center;
    min-height: 100vh;
}




footer {
    width: 100vw; /* oder alternativ 100% */
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    border-left: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    background-color: #111 !important;
}
.footer-grid {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(6, 200px); /* 6 Spalten mit fester Breite */
    /*grid-template-rows: repeat(2, 100px); /* 2 Zeilen mit fester Höhe */
    gap: 0;
    color: white;
    text-align: center;
    overflow-x: auto;
}

    .footer-grid > div {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }



        .footer-grid > div:nth-child(6n) {
            border-right: none; /* letzte Spalte jeder Zeile ohne rechten Rand */
        }





main {

}

 


/* ----------------------------------------------
   Navbar Menüpunkt-Styling
------------------------------------------------*/

.nav {
  
    width: 100%;
}



.navbar {
 
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    height: fit-content;
    width:auto;
    /*Hier dunkelgraugrau als*/
    background-color: #111 !important;
  
}

.navbar-nav .nav-link {
    color: #159bdb;
    background-color: black!important;
    transition: color 0.3s ease;
}

    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link:focus,
    .navbar-nav .nav-link.active {
        color: var(--color-text-light);
        
    }


@media (max-width: 991.98px) {
    .navbar-collapse {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr); /* 3 Spalten */
        grid-auto-rows: minmax(10px, auto); /* flexible Reihenhöhe */
        gap: 0.5rem;
        padding: 1rem;
    }

    .navbar-nav {
        display: contents; /* Inhalt direkt ins Grid einspeisen */
    }

        .navbar-nav .nav-item {
            border: 1px solid #444;
            text-align: center;
            background-color: black;
            padding: 0.5rem;
        }
}

.navbar .dropdown-menu {
    background-color: var(--color-bg-dark) !important;
}


.navbar-collapse {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr); /* z. B. 2 Spalten */
    gap: 0.5rem;
    background-color: #000;
    padding: 1rem;
}

.navbar-nav .nav-item {
    border: 1px solid #444;
    text-align: center;
}

.navba.nav
/* ----------------------------------------------
   Dropdown-Menü Styling
------------------------------------------------*/
.dropdown-menu {
    border: 1px solid var(--color-dropdown-border);
    box-shadow: none !important;
    backdrop-filter: none !important;
    //background-color: var(--color-bg-dark) !important;
}

.dropdown-item {
    color: var(--color-accent-green);
}

    .dropdown-item:hover {
        background-color: var(--color-dropdown-hover-bg);
        color: var(--color-accent-blue);
    }