@font-face {
    font-family: 'Roboto';
    font-style:  normal;
    font-weight: 500;
    src:         url('../Fonts/roboto-v50-latin-500.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    font-style:  normal;
    font-weight: 700;
    src:         url('../Fonts/roboto-v50-latin-700.woff2') format('woff2');
    font-display: swap;
}


:root {
    
    
    
    --color-primary-dark:    #052838;  
    --color-primary-medium  :#597480;  
    --color-primary-light:   #cfdfe6;  
    --color-active-blue:     #60a3bf;  
    --color-light-blue:      #b6dfee;  

    
    --color-brown-medium:    #806b59;
    --color-beige-light:     #e6d9cf;
    
    --color-olive-dark:      #807759;
    --color-beige-creme:     #e6e0cf;
    
    --color-violet-medium:   #635b80;
    --color-lavender-light:  #d5d0e6;
    
    
    --color-footer-bg:       #206A5D;  
    --color-accent-yellow:   #f7cb1b;  
    
    
    --color-white:           #ffffff;
    --color-light-gray:      #f0f0f0;
    --color-gray:            #a9a9a9;
    --color-black:           #000000;
    
    --color-accent: #84e821;           
    --color-accent-hover: #a0ff3d; 
     --color-text-light: #fcfcfc;
    
    
    
    
    --fs-h1:   clamp(1.75rem, 1.5rem + 1.25vw, 3rem);        
    --fs-h2:   clamp(1.5rem, 1.3rem + 1vw, 2.5rem);          
    --fs-h3:   clamp(1.375rem, 1.25rem + 0.625vw, 2rem);     
    --fs-h4:   clamp(1.25rem, 1.15rem + 0.5vw, 1.75rem);     
    --fs-h5:   clamp(1.125rem, 1.05rem + 0.375vw, 1.5rem);   
    
    
    --fs-p:    clamp(1rem, 0.95rem + 0.25vw, 1.25rem);       
    --fs-nav:  clamp(0.875rem, 0.825rem + 0.25vw, 1.125rem); 
}





* {
    margin: 0;
    padding: 0;
    
    box-sizing: border-box; 
}

html {
    scroll-behavior: smooth; 
    font-size: 16px;         
}

body {
    font-family: 'Roboto', sans-serif;
    color: var(--myColor-2);
    background-color: var(--myColor-1);
    line-height: 1.6;        
}




a {
  color: inherit; 
  text-decoration: none; 
}


a:hover {
  text-decoration: underline; 
}

ul {
    list-style: none;
}

img {
    max-width: 100%;    
    display: block;     
    border-radius: 4px;
}





.container {   
    width: 100%;
    padding: 0 1.2rem;
    margin: 0 auto;
}

.underline {
    text-decoration: underline;
}




h1 {
    font-size: var(--fs-h1);
} 

h2 {
    font-size: var(--fs-h2);
}                

h3 {
    font-size: var(--fs-h3);
}

h4 {
    font-size: var(--fs-h4);
    margin-top: 0.3rem;
}  

.h4_nav {
    margin-top: 0 ;
    margin-bottom: 0.3rem;
}  

h5 {
    font-size: var(--fs-h5);
    margin-top: 1em;
}  

p {
    font-size: var(--fs-p);
}




   





@media screen and (min-width: 0px) and (max-width: 1200px) {
    .container {
        width: 100%;
        padding: 0 0.1rem;
    }
}









footer {
    margin-top: clamp(0.25rem, 2vw, 0.5rem);
    margin-bottom: 1rem;
}



.footer-grid {
    display: grid;
    max-width: 98vw; 
    margin: 0 auto; 
    grid-template-columns: 15% 35% 25% 25%;
    background-color: var(--color-footer-bg); 
    border-radius: 8px; 
    overflow: hidden; 
}



.logo-f {
    display: flex;
    padding: 2.5rem 2rem;
}

.logo-f img {
    height: 6rem;
    background-color:var(--color-footer-bg);
}


.address,
.zeiten,
.daten {
    padding: 2rem 2rem;
    text-align: left;
    color: var(--color-white); 
}

.ul-adress {
    text-align: left;
}



.list-address,
.list {
    color: var(--color-white); 
    list-style-type: none;
    text-decoration: none;
    padding: 0.8rem;
    transition: color 0.6s ease-in-out;
}

.list a {
    color: var(--color-white); 
    text-decoration: none;
    padding: 0.5rem;
    transition: color 0.6s ease-in-out;
}



.list a:hover {
    color: var(--color-accent-yellow); 
}

.list a.active {
    color: var(--color-accent-yellow); 
    font-weight: bold;
} 

footer p {
    margin: 1rem;
    color: var(--color-footer-bg); 
    text-align: center;
}



@media (max-width: 980px) {
    footer {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    .logo-f {
        justify-content: center;
        padding: 1rem;
    }
    
    .footer-grid {
        display: grid;
        max-width: 94vw;
        grid-template-columns: 1fr; 
    }
    
    .address,
    .zeiten,
    .daten {
        padding: 0.5rem 1rem; 
        margin: 0; 
        text-align: center;
    }
    
    .ul-adress {
        text-align: center;
    }
    
    .list-address,
    .list {
        padding: 0.4rem; 
    }
    
    .list a {
        color: var(--color-white); 
        padding: 0.5rem;
    }
    
    .list a:hover,
    .list a.active {
        color: var(--color-accent-yellow); 
    }
    footer p {
    margin: 1rem;
    color: var(--color-primary-dark);  
    text-align: center;
    }
}




.anchor-offset {
    padding-top: 5.5rem;  
    margin-top: -5.5rem;
}

@media screen and (max-width: 768px) {
    .anchor-offset {
        padding-top: 6.5rem;
        margin-top: -6.5rem;
    }
}