/* Allgemeine Stile */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* 100% der Viewport-Höhe */
    margin: 0;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

/*Header*/
header {
    display:flex;
    flex-wrap: nowrap;
    align-items: center;
    gap:2em;
    background-color: rgba(208, 208, 208, 0.87);
}
#kg_logo_container{
    padding-left: 5%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 250px;
    width: 30%;
}
header img {
    width: 100%;
    flex-shrink: 0;
    mix-blend-mode: multiply;
}
nav{
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}
nav ul {
    height: 100%;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0px;
    padding-left: 0;
}

nav ul li {
    white-space: nowrap;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5%;
}

nav li:hover {
    background-color: rgb(229, 229, 229);
}


nav ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%; 
    text-decoration: none;
    padding: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

nav ul li a:visited {
    color:black;
  }

nav ul li a:link {
    color:black;
    text-decoration: none;
  }

/* Responsive: Stack elements for smaller screens */
@media (max-width: 768px) {
    header {
        padding-top: 5%;
        flex-direction: column; /* Stack logo, title, and menu */
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    #kg_logo_container{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30%;
        min-width: 250px;
    }

    nav {
        width: 100%;
    }

    nav ul {
        flex-direction: column;
        align-items: center;
    }
}



/*About*/
#wrapper_kontakt {
    display: flex;
    gap: 5%;
}
#intro {
    display: flex;
    align-items: center;
    padding: 5%;
    gap: 4em;
}

#intro text{
    flex: 1; /* Allows text to fill remaining space */
    min-width: 200px; /* Ensures text remains readable */
}
#kontaktdaten {
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 2%;
    padding-bottom: 2%;
    background-color: #eebc597e;
}

#logo_container{
    display:flex;
    padding-right: 0em;
    width: 50%;
    max-width: 100%; /* Ensures it scales properly */
}

#logo_container img{
    flex: 0 1 30%;
    max-width: 100%;
    max-height: 100%;
    width:100%;
}

@media (max-width: 768px) {
    #intro {
        flex-direction: column; /* Stack image on top */
        text-align: center;
        justify-content: center;
    }

    #logo_container {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 80%;
        max-width: 300px;
    }
}

/*Impressum*/

#impressum{
    padding: 5%;
}

/*Informationspflicht*/

#informationspflicht{
    padding: 5%;
    padding-top: 3%;
}

/*Zertifizierung*/

#tüv{
    background-color: #eebc597e;
    padding: 5%;
}
#zertifizierung{
    padding: 5%;
}

#tuev_heading_container{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2em;
}

#tuev_heading{
    flex: 1; /* Allows text to fill remaining space */
    min-width: 200px; /* Ensures text remains readable */
    width: 85%;
}

#tuev_logo_container{
    width: 15%;
    padding-right: 5%;
    min-width: 150px;
}
#tuev_logo_container img{
    min-width: 150px;
    width: 100%;
    height: 100%;
}

/*Datenschutz*/

#datenschutz{
    padding: 5%;
    padding-top: 3%;
}

/* Spezifische Stile für Abschnitte */
section {
    margin-bottom: 20px;
}

address {
    font-style: normal;
}

#kehrgebiete{
    padding: 5%;
    padding-top: 2%;
}

#gebiet3{
    padding-bottom: 20px;
}

#gebiet15{
    padding-top: 20px;
    padding-bottom: 20px;
}

footer {
    background-color: rgba(208, 208, 208, 0.87);
    text-align: center;
    padding: 10px 0;
}
footer img{
    mix-blend-mode: multiply;
    max-width: 250px;
}

/*h2 { font-size: 6vw }
h3{font-size: 5vw;}
p { font-size: 5vw; }
@media ( orientation:landscape ) {
	h2 { font-size: 4vmax }
    h3 {font-size: 2.2vmax;}
	p { font-size: 2.2vmax; }
}
@media ( min-width: 680px ) {
	h2 { font-size: 3vmax }
    h3 { font-size: 2vmax; }
	p { font-size: 2vmax; }
}
@media screen and ( min-width: 1024px )  {
	h2 { font-size: 5em }
    h3 { font-size: 1.3em; }
	p { font-size: 1.3em; }
}*/
/* Base font size for the document */


html {
    font-size: 16px; /* Default size for normal screens */
}

/* Heading & Paragraph Defaults */
h1 { font-size: 2.5rem; } /* 40px */
h2 { font-size: 2rem; }   /* 32px */
h3 { font-size: 1.75rem; } /* 28px */
h4 { font-size: 1.5rem; }  /* 24px */
p  { font-size: 1.2rem; }    /* 16px */
small { font-size: 0.875rem; } /* 14px */

.large_p{font-size: 1.2rem}
/* Responsive Adjustments */
@media (max-width: 1200px) { /* Large tablets & small desktops */
    html { font-size: 15px; }
    h1 { font-size: 2.25rem; } /* 36px */
    h2 { font-size: 1.85rem; } /* 30px */
    h3 { font-size: 1.6rem; }  /* 26px */
    .large_p{font-size: 1.2rem;}
}

@media (max-width: 992px) { /* Tablets */
    html { font-size: 14px; }
    h1 { font-size: 2rem; } /* 32px */
    h2 { font-size: 1.75rem; } /* 28px */
    h3 { font-size: 1.5rem; }  /* 24px */
    .large_p{font-size: 1.2rem;}
}

@media (max-width: 768px) { /* Mobile landscape */
    html { font-size: 13px; }
    h1 { font-size: 1.75rem; } /* 28px */
    h2 { font-size: 1.5rem; } /* 24px */
    h3 { font-size: 1.35rem; } /* 22px */
    .large_p{font-size: 1.2rem;}
}

@media (max-width: 480px) { /* Mobile portrait */
    html { font-size: 12px; }
    h1 { font-size: 1.5rem; } /* 24px */
    h2 { font-size: 1.25rem; } /* 20px */
    h3 { font-size: 1.15rem; } /* 18px */
    .large_p{font-size: 1.2rem;}
}

.notbold{
    font-weight: normal;
}