html {
     font-size: 100%;
     }


body {
     background-color: #F4F4DC;
     }


.container {
           background-color: #F4F4F4;
           font-family: charm , Helvetica, Roboto, sans-serif;
           font-size: 1.2rem;
           color: #002200;
           margin: 2rem;
           padding: 1rem;
           border-width: 0.125rem;
           border-style: solid;
           border-radius: 1.25rem;
           box-shadow: 0.5rem 0.5rem 0.5rem #606060;
           }     


.navbar {
	position: sticky;
        top: 0;
        margin-bottom: 1.5rem;
        text-align: left;
        background-color: #F4F4F4;
        font-size: 2rem;
        }

.navbar ul {
           list-style-type:none;
           padding-left: 1.5rem;
           margin-top: 1.5rem;
           margin-bottom: 1.5rem;
           display: flex;
           flex-direction: row;
           flex-wrap: wrap;
           }

.navbar ul li {
              margin: 0;
              padding-left: 2.5rem;
              }

.navbar ul li a {
	        color: #002200;
	        display: block;
	        text-decoration: none;
	        }

.navbar ul li a:visited {
	                color: #FFB6C1;
	                display: block;
	                text-decoration: none;
 	                }

.navbar ul li a:hover {
	              color: #6495ED;
	              display: block;
	              text-decoration: none;
	              }

.navbar ul ul {
	      position: absolute;
	      top: 0.5em;
	      display: none;
	      }

.navbar ul ul li {
	         display: block;
	         }

.navbar li:hover ul {
	            display: block;
	            }

	
.navbar ul ul li a {
                   color: #002200;
                   background-color: #F4F4F4;
                   } 



.navbar ul ul li a:visited {
	                   color: #FFB6C1;
	                   }


.navbar ul ul li a:hover {
	color: #6495ED;
	}






.bildwatt {
               display: block;
               width: 99%;
               margin: auto;
               border-radius: 1.25rem;
               }




.grafstarth {
     background-image: url("grafstarth.png"); 
     background-repeat: no-repeat;
     border-radius: 1.25rem;
     
}


.grafstartv {
     background-image: url("grafstartv.png"); 
     background-repeat: no-repeat;
     border-radius: 1.25rem;
     width: 66rem;
     height: 108rem;  
     margin: 0 auto;
             }


.grafkontakth {
     background-image: url("grafkontakth.png"); 
     background-repeat: no-repeat;
     border-radius: 1.25rem;
     padding-top: 3rem;
}


.grafkontaktv {
     background-image: url("grafkontaktv.webp"); 
     background-repeat: no-repeat;
     border-radius: 1.25rem;
     width: 60rem;
     height: 108rem; 
     margin: 0 auto;
     padding-top: 10rem;
}



.grafuebermichh {
     background-image: url("grafuebermichh.png"); 
     background-repeat: no-repeat;
     border-radius: 1.25rem;
     padding-top: 3rem;
}


.grafuebermichv {
     background-image: url("grafuebermichv.webp"); 
     background-repeat: no-repeat;
     border-radius: 1.25rem;
     width: 60rem;
     height: 108rem;  
     margin: 0 auto; 
     padding-top: 30rem;
}


.grafangeboth {
     background-image: url("grafangeboth.png"); 
     background-repeat: no-repeat;
     border-radius: 1.25rem;
     padding-top: 3rem;
}


.grafangebotv {
     background-image: url("grafangebotv.webp"); 
     background-repeat: no-repeat;
     border-radius: 1.25rem;
     width: 60rem;
     height: 108rem;  
     margin: 0 auto;
     padding-top: 16rem;
}


.grafberufh {
     background-image: url("grafberufh.png"); 
     background-repeat: no-repeat;
     border-radius: 1.25rem;
     padding-top: 3rem;
}


.grafberufv {
     background-image: url("grafberufv.png"); 
     background-repeat: no-repeat;
     border-radius: 1.25rem;
     width: 60rem;
     height: 108rem;  
     margin: 0 auto;
     padding-top: 2rem; 
}


h1  {   
    color: #002200;
    font-size: 1.8rem;
    text-align: center;
}


h2  {   
    color: #002200;
    font-size: 1.6rem;
    text-align: center;
}


.datenschutz {
             font-family: Helvetica, Roboto, sans-serif; 
             margin-left: 4rem;
             }
  
.datenschutz h1 {   
                color: #002200;
                text-align: left;
                }

.datenschutz h2 {   
                color: #002200;
                text-align: left;
                }


        
.impressum   {
             font-family: Helvetica, Roboto, sans-serif; 
             margin-left: 4rem; 
             }

.impressum h1 {   
              color: #002200;
              text-align: left;
              }

.impressum h2 {   
              color: #002200;
              text-align: left;
              }


.imp {
  padding: 0rem;
  margin: 0rem;
  text-align: left;
  font-size: 2rem;
}


.imp ul {
  margin: 0;
  display: flex;
  flex-direction: row; 
}


.imp li {
  list-style: none;
  margin: 0;
  padding: 1.5rem;
}


.copyright {
           padding: 0rem;
           margin-left: 4rem;
           text-align: left;
           font-size: 1.250rem;
           }


figcaption {
           font-size: 0.8rem;
           margin-bottom: 0.8rem;
}


a  {   
   text-decoration: none;
   color: #002200;
}


a:visited {
        color: #FFB6C1;
}


a:hover {
        color: #6495ED;
}



@font-face {
  font-display: swap; 
  font-family: 'charm';
  font-style: normal;
  font-weight: 400;
  src: local(''),
  url('charm-v11-latin-700.woff2') format('woff2'); 
}


.schriftg {
    font-family: charm, Helvetica, Roboto, sans-serif;
    text-align: center;
    font-size: 3rem;
}


.schriftm {
    font-family: charm , Helvetica, Roboto, sans-serif;
    text-align: center;
    font-size: 2rem;
}


.schriftk {
    margin-bottom: 2.5rem;
    margin-top: 1.25rem;
    text-align: center;
    font-family: charm , Helvetica, Roboto, sans-serif;
    font-size: 1.25rem;
}







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


body {
     background-image: url("grafstarth.png"); 
     background-repeat: no-repeat;
     
     }

.container {
           border: 0;
           box-shadow: none;
           margin: 0.125rem;
           background-color: transparent;
           }

.navbar {
        position: static;
        
        } 


.navbar ul {
           display: flex;
           flex-direction: column;
           
           padding-left: 0.125rem;
           }

.navbar ul li {
              margin: 0;
              padding-left: 0.125rem;
              }

.grafstarth {
     background-image: none; 
            }

.imp ul {
        flex-direction: column; 
        padding: 0.125rem;
}

.imp li {
        padding: 0.125rem;
}


.copyright {
           margin-left: 0.125rem;
           }

}