/* inter-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/inter-v20-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('../fonts/inter-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/inter-v20-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/inter-v20-latin-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/inter-v20-latin-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/inter-v20-latin-regular.svg#Inter') format('svg'); /* Legacy iOS */
}

/* ### Main-Styles ##################################################################*/
    
body,table,td,div,form,input,pre {
    font-family: 'Inter'; 
    font-size: 24px; 
    color: #0e0e0d; 
    vertical-align: top;
    }
    
#seite {
    margin:auto;
    width: 100%;
    background: #FFF;
    }
    
/* ### Kopf-Styles ##################################################################*/
    
#kopf { 
    width:auto;
    height:130px;
    }

#kopf img { 
    width:340px;
    height:auto;
    margin:25px 0px 0px 65px;
    }

@media (max-width:600px) { 
    #kopf { text-align:center; }
    #kopf img { margin:25px 0px 0px 0px; }
}  
@media (max-width:360px) { 
    #kopf img {width:100%;}
    #kopf { padding:0px 25px; }
} 

#headerbild { 
    position: relative;
    }

#headerbild img { 
    width:100%;
    height:auto;
    padding:0px;
    vertical-align: bottom;
    }

.pflanzenicon {
    position: absolute;
    bottom:-105px;
    left:24%;
    width:267px!important;
    height:auto;
}
@media (max-width:1850px) { .pflanzenicon { left:15%; } } 
@media (max-width:1420px) { .pflanzenicon { left:5%; } } 
@media (max-width:1140px) { .pflanzenicon { width:200px!important; bottom:-70px; } } 
@media (max-width:900px) { .pflanzenicon { bottom:7%; } } 
@media (max-width:540px) { .pflanzenicon { width:150px!important; } } 
@media (max-width:380px) { .pflanzenicon { width:120px!important; } } 

/* ### K�rper-Styles ##################################################################*/ 
    
#koerper { 
    width:auto;
    padding:50px 20px 60px 20px;
    text-align: center;
    background-color: #f2ede6;
    }

@media (max-width:560px) { #koerper p, #fuss p { font-size:20px; } } 
    
#koerper.datenschutz { text-align: left; padding:50px 20% 60px 20%; } 
@media (max-width:900px) { #koerper.datenschutz { padding:50px 5% 60px 5%; } } 

/* ### Fuss-Styles ##################################################################*/
    
#fuss { 
    position: relative;
    width:auto;
    text-align: center;
    padding:40px 20px 140px 20px;
    }

.impbox {
    position: absolute;
    bottom:50px;
    right:80px;
    display:inline-block;
    font-size: 16px;
}
@media (max-width:768px) { 
.impbox {
    bottom:50px;
    right:0px;
    width:100%;
    display:block;
}

} 
    
/* ### Standard-Styles ##################################################################*/ 
    
h1 { font-size:30px; color:#fff; margin-bottom:15px;display:flex; flex-direction: column; }
h1 span { align-self: center; background-color: #000; padding:6px 20px; margin-bottom:7px; }

h2 { font-size:26px; }
h3 { font-size:23px; }
h4 { font-size:20px; }

@media (max-width:560px) { 
    h1 { font-size:20px; } 
    h2 { font-size:19px; }
    h3 { font-size:18px; }
    h4 { font-size:17px; }
} 


#koerper p , #fuss p { line-height: 35px; }
#koerper.datenschutz p, #koerper.datenschutz ul li { font-size:16px; line-height: 24px; } 

a, a:link, a:visited, a:active, a:focus { color: #0e0e0d; }
.impbox a, .impbox a:link, .impbox a:visited, .impbox a:active, .impbox a:focus {
    font-size: 16px;
    text-decoration: none;
    color: #0e0e0d; 
}


p, h1, h2, h3, h4, h1 span {
   -moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;
   word-wrap: break-word;
}   





/* ### Navigation ##################################################################*/

/* ### Sonstige-Styles ##################################################################*/

/* ### Responsive-Styles ##################################################################*/ 

/* ab 781 bis 1024 sichtbar */
@media screen and (min-width: 781px) and (max-width: 973px) {

}

/* ab 1024 sichtbar */
@media screen and (min-width: 1024px) {

}

/* bis 1024 sichtbar */
@media screen and (max-width: 1024px) {

}


/* for high resolution display */
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {

}

/* ### Noscript-Styles ##################################################################*/ 
    
#noscript-bg {
position:fixed;
width:100%;
height:60px;
z-index:9999;
background:#ffff99;
border:1px solid #000;
}

#noscript-warnung {
width:690px;
height:45px;
margin:7px auto;
background:url('../img/noscript_warnung.gif') left top no-repeat;
padding:3px 0px 0px 60px;
font-size:12px;
line-height:1.5em;
color:#000000;
}

#noscript-warnung a {color:#ff0000;}
#noscript-warnung a:hover {color:#ff0000;}
#noscript-warnung b{font-size:16px;}

/* ### Responsive-Styles ##################################################################*/ 

@media screen and (min-width: 911px) and (max-width: 1023px) {

}

@media screen and (min-width: 751px) and (max-width: 910px) {

}

@media screen and (min-width: 480px) and (max-width: 750px) {

}

@media screen and (min-width: 320px) and (max-width: 479px) {

}

@media screen and (min-width: 240px) and (max-width: 319px) {

}