*{
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
}

html, body {
    height: 100%; /* Stellt sicher, dass HTML und Body mindestens die Viewport-Höhe einnehmen */
    margin: 0;
    padding: 0;
}

body {
    display: flex;             /* Macht den Body zu einem Flex-Container */
    flex-direction: column;    /* Ordnet die Inhalte des Body vertikal an */
    min-height: 100vh;         /* Stellt sicher, dass der Body mindestens die Höhe des Viewports hat */
}

/* Hauptinhaltsbereiche, die den Footer nach unten drücken sollen */
/* Dies gilt für den Hauptinhalt auf allen Unterseiten */
.inhalt, /* Für Seiten, die '.inhalt' als Hauptcontainer verwenden (z.B. Ferienprogramm) */
.inhalt-bilder { /* Für die Bilderseite, die '.inhalt-bilder' verwendet */
    flex-grow: 1;              /* Lässt diesen Bereich den gesamten verfügbaren Platz einnehmen */
}

/* Optionale Anpassung für Navigationsleiste und Footer, damit sie nicht wachsen/schrumpfen */
/* Je nachdem, wie Ihr nav.php und die JavaScript-Includes genau aussehen, können dies Ihre <nav>-Tags oder spezifische IDs/Klassen sein */
nav-leiste, /* Wenn Sie ein benutzerdefiniertes Element oder eine globale Klasse für die Navigation haben */
#navleiste, /* Wenn die ID 'navleiste' auf der Navigation direkt sitzt */
#bottom /* Die ID Ihres Footers */
{
    flex-shrink: 0; /* Verhindert, dass Header und Footer kleiner werden */
}

body {
    background: var(--light-grey-bg);
}

body {
    min-height: 100vh;
    font-family: 'Patrick Hand';
}

.campo-verde {
    font-family: 'Dancing Script';
    font-size: 30px;
    font-weight: 900;
    text-shadow: 1px 1px 1px#53950F;
    text-decoration: none;
}


/*Nav Style*/

nav-leiste {
    font-size: 22px;
    font-weight: 700;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    height: var(--navbar-height);
    background: var(--background-color-2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 1;
    color: var(--link-color);
}

.logo img{
    width: 170px;
    height: 100px;
    padding: 20px;
    margin-left: 30px;
}

.logo img:hover {
    opacity: 80%;
}

nav-leiste ul {
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    list-style: none;
    margin-right: 30px;
    z-index: 2;
}

nav-leiste li {
    height: 100%;
    width: 200px;
    text-align: center;
    position: relative;
}

nav-leiste li:hover {
    background: var(--dropdown-color);
    transition: background var(--nav-text-hover-color-transition);
}

nav-leiste ul a{
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--link-color);
}

.dropdown{
    height: min-content;
    width: 290px;
    background: var(--background-color-2);
    padding: 0;
    display: none;
    flex-direction: column;
    position: absolute;
    left: 0;
    top: var(--navbar-height);
}

.dropdown li {
    height: 70px;
    width: 100%;
}

.dropdown li a {
    justify-content: flex-start;
    padding-left: 30px;
    width: calc(100% - 30px);
}

nav-leiste li:hover .dropdown {
    display: flex;
}

nav-leiste input[type="checkbox"] {
    display: none;
}
.expandable_li {
    display: flex;
    justify-content: center;
    align-items: center;
}

.toggle_button {
    width: 30px;
    height: 23px;

    position: absolute;
    top: 25px;
    right: 25px;

    display: none;
    flex-direction: column;
    justify-content: space-between;
}

.bar {
    height: 4px;
    width: 100%;
    background: var(--link-color);
    border-radius: 100px;
}

@media(max-width: 850px) {
    .toggle_button {
        display: flex;
        cursor: pointer;
    }

    nav-leiste ul {
        height: min-content;
        width: 100%;
        background: var(--background-color-2);
        padding: 0;
        display: none;
        position: absolute;
        top: var(--navbar-height);
    }

    nav-leiste li {
        height: min-content;
        width: 100%;
    }

    nav-leiste ul a {
        padding: 30px 0;
    }

    .expandable_li {
        display: block;
    }

    .expandable_li label {
        padding: 30px 0;
        cursor: pointer;
        display: block;
    }

    .expandable_li:hover .dropdown {
        display: none;
    }

    .expandable_li input[type="checkbox"]:checked ~ .dropdown {
        display: block;
    }

    .dropdown {
        position: static;
        width: 100%;
    }

    .dropdown li {
        padding: 0;
        display: block;
        position: static;
        background: var(--background-color-3);
    }

    .dropdown li a {
        width: 100%;
        padding: 0;
        justify-content: center;
    }

    #toggle_button:checked ~ ul {
        display: block;
    }
}
  

@media(max-width: 768px) {
    .logo img {
        width: 150px;
        height: 80px;
        padding: 0px;
        margin-left: 20px;
    }
}








/*Footer Css*/

footer, #bottom {
    background-color: var(--background-color-2);
}


footer {
    padding-top: 30px;
    padding-bottom: 30px;
}

.inhalt-bottom {
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    flex-wrap: wrap;
}

.inhalt-bottom h3 {
    color: var(--footer-überschriften-color);
}

.inhalt-bottom a {
    text-decoration: none;
}

.inhalt-bottom h5 {
    color: var(--link-color);
    padding-top: 15px;
    padding-left: 10px;
}

.inhalt-bottom h5:hover {
    transition: var(--transition-link-h5-hover);
    color: var(--footer-link-h5-hover-color);
}

.footer-kategorie {
    padding: 20px;
}


copy {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-top: var(--copy-border-top);
}

copy h5{
    color: var(--link-color);
    padding-left: 20px;
}

copy h6 {
    padding-top: 1px;
    color: var(--link-color);
    padding-right: 20px;
}

copy a {
    text-decoration: none;
    color: var(--link-color);
    font-size: 12px;
    transition: 1s;
}

#copyV a:hover {
    color: var(--link-color-a-hover);
    transition: 0.5s;
}

.Teknikator:hover {
    color: var(--link-color-a-hover);
}


.not-available h5 {
    color: rgb(255, 0, 0);
}


@media(max-width: 550px) {
    #copyV {
        display: none;
    }

    #copyh5 {
        padding-left: 0;
    }

    #copyD {
        padding-right: 0;
    }
}





/*Scrollbar CSS*/


::-webkit-scrollbar {
    width: 0.9em;             /*größe*/
    background: var(--background-scrollbar);
}


/*Hintergrund Scrollbar*/

::-webkit-scrollbar-track {         
    background: var(--background-scrollbar-track);
    border-radius: 100vw;
    margin-block: .3em;
}


/*Scroller Farbe*/

::-webkit-scrollbar-thumb {
    background: var(--background-scrollbar-thumb);
    border: .25em solid var(--background-scrollbar-track);
    border-radius: 100vw;
}


/*Scroller Hover-Farbe*/

::-webkit-scrollbar-thumb:hover {
    background: var(--background-scrollbar-thumb-hover);
}




@supports (scrollbar-color: var(--background-scrollbar-thumb) var(--background-scrollbar-track)) {
    *{
        scrollbar-color: var(--background-scrollbar-thumb) var(--background-scrollbar-track);
        scrollbar-width: thin;
    }
}