@import url("fontawesome-all.min.css");
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,700,900");

@import url ("https://fonts.googleapis.com/css2?family=Reenie+Beanie>amp;display=swap"); 

html, body, div, span, applet, object, dropbtn,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: inherit;}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
        display: block;}



 @keyframes einblenden {
    from { opacity:0; }
    to { opacity:1; }
}

@-moz-keyframes einblenden { /* F>Atilde;>frac14;r Firefox */
    from { opacity:0; }
    to { opacity:1; }
}

@-webkit-keyframes einblenden { /* F>Atilde;>frac14;r Safari und Chrome */
    from { opacity:0; }
    to { opacity:1; }
}

@-o-keyframes einblenden { /* F>Atilde;>frac14;r Opera */
    from { opacity:0; }
    to { opacity:1; }
}


  @-ms-viewport {
                width: device-width;
        }
    html {
                box-sizing: border-box;
        }

        *, *:before, *:after {
                box-sizing: inherit;
        }

body {

font-family: 'Source Sans Pro', sans-serif;
font-size: 1em;
letter-spacing: 0.5em;
background-color: whitesmoke;
animation: einblenden 1.5s;
-moz-animation: einblenden 1.5s; /* F>Atilde;>frac14;r Firefox */
-webkit-animation: einblenden 1.5s; /* F>Atilde;>frac14;r Safari und Chrome */
-o-animation: einblenden 1.5s; /* F>Atilde;>frac14;r Opera */

}

  a {
                -moz-transition: color .25s ease-in-out;
                -webkit-transition: color .25s ease-in-out;
                -ms-transition: color .25s ease-in-out;
                transition: color .25s ease-in-out;
                text-decoration: none;
                color: #f1e9e2;
        }

                a:hover {
                        text-decoration: none;  color: #ed1a3b;
                }
p {
    text-align: center;
    color: white;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 0.7em;
    letter-spacing: 0.3em;
	line-height: ;    
    
}

h3 {
    text-align: inherit;
    color: white;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 1.5em;
    letter-spacing: 0.3em;
	line-height: 4;  
    text-transform: uppercase; font-weight: 600;
    
}


li {list-style: unset;}



.container{
margin: 0 auto;
height:100vh; 
display: grid;
grid-template-columns: 10% 15% 65% 10%;
grid-template-rows: 30vh 25vh 5vh 35vh 0vh; 
align-self: stretch;
    
   
} 


.box {
  background-color: whitesmoke;
    background:  url("../images/computer.png")  top center;
    background-size: cover;
    background-repeat: no-repeat; z-index: 1;
}

.box_edv {
  background-color: whitesmoke;
    background:  url("../images/edv.png")  center center;
    background-size: cover;
    background-repeat: no-repeat; z-index: 1;
}

.box_social {
  background-color: whitesmoke;
    background:  url("../images/social.png")  center center;
    background-size: cover;
    background-repeat: no-repeat; z-index: 1;
}

.box_online {
  background-color: whitesmoke;
    background:  url("../images/online.png")  center center;
    background-size: cover ;
    background-repeat: no-repeat; z-index: 1;
}
.box_komm {
  background-color: whitesmoke;
    background:  url("../images/komm.png")  center center;
    background-size: cover;
    background-repeat: no-repeat; z-index: 1;
}

.box_mental {
  background-color: whitesmoke;
    background:  url("../images/mental.png")  center center;
    background-size: cover;
    background-repeat: no-repeat; z-index: 1;
}

.box_motivation {
  background-color: whitesmoke;
    background:  url("../images/motivation.png")  center center;
    background-size: cover;
    background-repeat: no-repeat; z-index: 1;
}

.box_tanz {
  background-color: whitesmoke;
    background:  url("../images/tanz.png")  center center;
    background-size: cover;
    background-repeat: no-repeat; z-index: 1; 
}



.logo { 
    
grid-column: 1/6;
grid-row: 2/3;
text-align: center;
background:  url("../images/logo.svg")  center center;
background-size: auto 100%; 
background-repeat: no-repeat;
margin-top: 0em;
margin-right:0em; z-index:22; opacity: 0.8;
box-shadow: 10px 10px 15px silver ;             
}

.logo_hg { 
    
grid-column: 1/6;
grid-row: 2/3;
background-color: #171c1c;
opacity: 0.2;
                
}

.unten_hg { 
z-index: 0;
grid-column: 1/6; 
grid-row: 4/8;
background-color:#171c1c;
opacity: 0.5;
border:0;
 
}

.unten_text {
grid-column: 2/4;
grid-row: 4/6;
font-size: 0.9em;
letter-spacing: 0.2em;
line-height: 1.3em;
text-align: center;

opacity: 1; z-index: 21;
color:white;
margin-top:1em;
    
}

.unten_linkstext {
grid-column: 3/4;
grid-row: 4/6;
font-size: 0.9em;
letter-spacing: 0.2em;
line-height: 1.3em;
text-align: left;
opacity: 1; z-index: 21;
color:white;
margin-top:0.5em;
margin-left:3em;
margin-right:3em; 
   
}

.unten_bild {
grid-column: 2/3;
grid-row: 4/6;
text-align: left;
opacity: 1; 
margin-top:0em;
z-index: 21;
overflow:hidden;
    
}

.copy {
grid-column: 2/5;
grid-row: 7/7;
font-size: 0.7em;
letter-spacing: 0.1em;
line-height: 1.3em;
text-align: left;
color:whitesmoke;
margin-top:1em;
opacity: 0.8;
    
}
.copyred {
grid-column: 2/5;
grid-row: 7/7;
font-size: 0.7em;
letter-spacing: 0.1em;
line-height: 1.3em;
text-align: left;
color:red;
margin-top:1em;
opacity: 0.8;
    
}

.copyred p {
	color: #ed1a3b;
}
.copyred a {
	color: #ed1a3b;
}


.navi {
grid-column: 1/6;
grid-row: 3/4;    
vertical-align: middle;
text-align: center;
z-index:20; height:5vh;
box-shadow: 10px 10px 10px silver ;
}

.navi_hg {
height:5vh;
grid-column: 1/6;
grid-row: 3/4;
vertical-align: middle;
border:solid 1px #171c1c; 
background-color: whitesmoke;
opacity: 0.7;

}



 #nav > input, nav > label {
display: none; /* Label und Checkbox ausblenden*/
     font-size: 5em; text-align:center;  color:#ed1a3b;
}
#nav > label {
width: 100%; 
}




                #nav > ul {
                    align-self: center;
                    width: 100%; 

                }

                        #nav > ul > li {
                                display: inline-block; 
                                text-align:center; 
                              
                            width: 12%; height:5vh;
                            
                        }

                                #nav > ul > li > ul {
                                        display: block;
                                }

                               #nav > ul > li > a, nav > ul > li > span {
                                   
                                       display: inline-block;
                                       text-align:center;
                                        color:black;
                                        text-transform: uppercase;
                                        text-decoration: none;
                                        font-size: 0.85em;
                                        letter-spacing: 0.15em;
                                   font-weight: 550;
                                        height: 5vh;
                                    line-height: 4em;
                                         -moz-transition: all .25s ease-in-out;
                                        -webkit-transition: all .25s ease-in-out;
                                        -o-transition: all .25s ease-in-out;
                                        -ms-transition: all .25s ease-in-out;
                                        transition: all .25s ease-in-out;
                                        

                                }

                                #nav > ul > li:hover > a {
                                     
                                       color: #fff; background-color:#171c1c;   
                                       padding-left: 1em; padding-right: 1em;
                                       font-size: 0.85em;
                                       height: 5vh; 
                                       transform: translateX(0%) translateY(0%);
                                        line-height: 4em;
                                       -moz-transition: all .8s ease-in-out;
                                        -webkit-transition: all .8s ease-in-out;
                                        -o-transition: all .8s ease-in-out;
                                        -ms-transition: all .8s ease-in-out;
                                        transition: all .8s ease-in-out;
                                       
                                        
                                }

                                #nav > ul > li.active > a, #nav > ul > li.active > span {
                                        color: #ed1a3b; 
                                       -moz-transition: all .8s ease-in-out;
                                        -webkit-transition: all .8s ease-in-out;
                                        -o-transition: all .8s ease-in-out;
                                        -ms-transition: all .8s ease-in-out;
                                        transition: all .8s ease-in-out;
                                        
                                }




@media screen and (min-width: 2300px) {


#nav > ul > li > a, nav > ul > li > span {
font-size: 1.1em;
line-height: 4em;
}

#nav > ul > li:hover > a {
font-size: 1.1em;
line-height: 4em;
}

  }




@media (max-width: 1024px) {
#nav > ul > li > a, nav > ul > li > span {
font-size: 0.7em;
line-height: 4em;
}

#nav > ul > li:hover > a {
font-size: 0.7em;
line-height: 4em;
}  
.unten_linkstext {
overflow-y:scroll;

    
}   
}    
    
@media (max-width: 768px) {
  .box_edv {
  background-color: whitesmoke;
    background:  url("../images/edv.png")  center right;
    background-size: cover;
    background-repeat: no-repeat; z-index: 1;
}


.box_online {
  background-color: whitesmoke;
    background:  url("../images/online.png")  center left;
    background-size: cover ;
    background-repeat: no-repeat; z-index: 1;
}


.box_mental {
  background-color: whitesmoke;
    background:  url("../images/mental.png")  center center;
    background-size: cover;
    background-position: -20em 0em;
    background-repeat: no-repeat; z-index: 1;
}
    
 .container{
grid-template-columns: 6% 20% 68% 6%;
grid-template-rows: 30vh 25vh 0vh 40vh 0vh; 
 
}    
    
.navi_hg {
display: none;
}  
    
.navi {
position: absolute;
top: 0; left:4vh; right:4vh; z-index:22;
box-shadow: none;  
}	
    
 #nav > label,  ul > li > ul {
display: block;
margin-top: 0em; z-index:30;   
}
  
#nav > ul { color: black; 
position: relative;
opacity: 0;
clear: both;
-webkit-transition:all .5s ease;
-moz-transition:all .5s ease;
transition:all .5s ease;  
}
    
#nav > ul > li {
    
background-color: dimgrey; 
min-width: 100%; 
max-width: 100%;
display: list;
border:solid 1px white;  
color: #171c1c; height:8vh;
}
    
#nav > ul > li > a, nav > ul > li > span {
                                   
display: inline-block;
text-align:center;
color:whitesmoke;
font-size: 1.1em;
line-height: 5em;
}

#nav > ul > li:hover > a {
 color: black;    
font-size: 1.1em;
line-height: 5em;
}    
    
    
#nav > input:checked + ul {
opacity: 1;
height: auto; 
} 
  
  }



@media (max-width: 640px) {
    
.container{
display: grid;    
grid-template-columns: 6% 28% 60% 6%;
grid-template-rows: 25vh 30vh 0vh 40vh 0fr;  
  
} 
    




    
.logo { 

grid-column: 1/5;
grid-row: 2/3;
margin-top:4em;
background:  url("../images/logo.png")  center center;
background-size: 100% auto ; 
background-repeat: no-repeat; z-index: 20;
                
}
    
.logo_hg { 

grid-column: 1/5;
grid-row: 2/3;
margin-top:4em;            
}

.unten_text {
overflow-y: scroll;
    
}

.unten_linkstext {
overflow-y: scroll;
    margin-left:1em; margin-right:0em; 
    margin-top: 0em;
    
}       
 	
.navi {
position: absolute;
top: 0; left:4vh; right:4vh; z-index:22;
  
}	
#nav > ul > li {
    
height: 8vh;
}
    
 #nav > label,  ul > li > ul {

margin-top: 0em; z-index:30;   
}
   
#nav > ul > li > a, nav > ul > li > span {
                                   
font-size: 0.8em;
line-height: 4em;
}

#nav > ul > li:hover > a {
   
font-size: 0.8em;
line-height: 4em;
}        
}