/*** Variablen ***/

:root {
        --main-bg-color:        rgba(247,245,241,1);
        --main-red:             rgba(200,21,23,1);
	--main-red-light:             rgba(200,21,23,0.4);
        --main-grey:            rgba(79,79,79,1);
	--main-grey-light:	rgba(79,79,79,0.4);
        --main-font:            Courier New, Courier, Lucida Sans Typewriter, Lucida Typewriter, monospace;

        --header-height:        7vh;
        --footer-height:        10vh;
}


/*** HTML - Bereich ***/

html {
        height:         100%;
}

/*** Body ***/

body {
        background-color:       var(--main-bg-color);
        animation:              FadeIn 0.75s ease-in-out forwards;
        padding:                0;
        margin:                 0;
        height:                 100%;
	font-family:		var(--main-font);

/*** Content ***/
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


@keyframes FadeIn {
        20%     { background-color: #fff;}
        100%    { background-color:var(--main-bg-color); }
}

@keyframes FadeInRed {
	20%     { background-color: var(--main-red-light);}
	100%    { background-color:var(--main-red); }
}



/*** Header ***/

header {
        position:               fixed;
        top:                    0px;
        background-color:       var(--main-bg-color);
        height:                 var(--header-height);
        min-height:             60px;
        animation:              FadeIn 0.75s ease-in-out forwards;
        width:                  100vw;
        box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
	z-index:100;
}





#headContainer {
        display:                flex;
        width:                  90vw;
        height:                 var(--header-height);
        justify-content:        space-between;
	margin-left:            auto; 
	margin-right:           auto;
        align-items:            center;
        min-height:             60px;
}

#logo {
	width:          12vw;
        min-width:      150px;
        max-width:      200px;
	margin-top:	0.5vw;
}

#login {
	width:          68vw;
	display:	flex;
	margin: 0 ;
	padding: 0;
	justify-content:        end;
}

#login a {
  width: 4vh;
  min-width: 30px;
  height: 4vh;
  min-height: 30px;
  background-color: #fff;
  text-align: center;
  line-height: 3vh;
  font-size: 1vh;
  margin: 2vh 0 2vh 1vh;
  display: block;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  border: 3px solid #fff;
  z-index: 1;
}

#login a .icon {
  position: relative;
  color: #262626;
  transition: 1.5s;
  z-index: 3;
  top: 0.4vh;
  width: 2.8vh;
  min-width: 25px;
}

#login a:hover .icon {
  color: #fff;
}

#login a:before {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 100%;
	background: #f00;
	transition: .5s;
	z-index: 2;
}

#login a:hover:before {
	top: 0;
}

#login a:before{
	background: var(--main-red-light);
}

/*** Main ***/

main {
	position:		absolute;
	top:			10vh; 
/*	top:			calc(var(--header-height) + 2vh); */
	width:			100vw;
/*	display:                grid;	*/
	display:		flex;
	justify-content:        center;
        margin-left:            auto;
        margin-right:           auto;

/*	grid-template-columns: [first] auto [line2] 19vw [line3] auto [col4-start] 19vw [five] auto [end];*/
/*	grid-template-columns: repeat(auto-fill, 189px); */
/*	grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line]; */

}

#mainContainer {
        display:                flex;
	flex-wrap:	wrap; 
	justify-content:	space-between; 
        width:                  78vw;
/*	grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); */


/*	grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line]; */
/*	background: #ccc; */


/*  --grid-layout-gap: 10px; */
/*  --grid-column-count: 5; */
/*   --grid-item--min-width: 175px; */

/*  --gap-count: calc(var(--grid-column-count) - 1); */
/*  --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));  */
/*   --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--grid-column-count)); */



/* grid-template-columns: repeat(auto-fit, minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr)); */

/* grid-template-columns: repeat(auto-fit,  minmax(175px, 1fr));  */

/ *grid-template-columns: repeat(auto-fill, 20em); */


}

#mainContainer .div4 { 
	flex-basis: 20%; 
	min-width: 175px; 
	order: 1; 
	}

#mainContainer .spruch {
        flex-basis: 20%;  
        min-width: 50px; 
/*	grid-area:   grid-area: 1 / 1 / span 2 / span 3;	*/
/* background: green; */
	order:1; 
        }





.image:hover {
 animation: shake 1.5s cubic-bezier(.35,.08,.15,.95) both;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-3px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(3px, 0, 0);
  }
}











/*** Footer und Navigation ***/

footer {
        position:               fixed !important;
        bottom:                 0px;
	background-color:       var(--main-bg-color);
/*      border-top:             thin solid var(--main-grey);  */
/*      box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px; */
        box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
        height:                 var(--footer-height);
        min-height:             60px;
        width:                  100vw;
        animation:              FadeInRed 0.75s ease-in-out forwards;

}

#footContainer {
        display:                flex; 
        width:                  80vw;
        height:                 var(--footer-height);
        justify-content:        center;
        margin-left:            auto;
        margin-right:           auto;
        align-items:            center;
        min-height:             60px;
/*	background-color:       var(--main-red);  */
}


#unav {
        width:          80vw;
        display:        flex;
        margin: 0 ;
        padding: 0;
        justify-content:        center;
}

#unav a {
  width: 5vh;
  min-width: 40px;
  height: 5vh;
  min-height: 40px;
  background-color: #fff;
/* background-color: var(--main-grey-light);  */
  text-align: center;
  line-height: 4vh;
  font-size: 1vh;
  margin: 2vh 0 2vh 1vh;
  display: block;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  border: 3px solid #fff;
  z-index: 1;
}

#unav a .icon {
  position: relative;
  color: #262626;
  transition: 1.5s;
  z-index: 3;
  top: 0.8vh;
  width: 3.3vh;
  min-width: 30px;
}

#unav a:hover .icon {
  color: #fff;
/*  transform: rotateY(360deg);  */
}

#unav a:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f00;
  transition: .5s;
  z-index: 2;
}

#unav a:hover:before {
  top: 0;
}

#unav a:before{
/* background: rgba(200,21,23,.2); */
/*background: var(--main-red-light); */
background: var(--main-grey-light);
}



/*** Screen-Anpassungen ***/

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

        #headContainer {
                width: 80vw;
		max-width: 2040px;
        }

	#mainContainer {
                width: 76vw;
                max-width: 1940px;
        }


	#footContainer {
                width: 80vw;
		max-width: 2040px;
        }


}


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

        #headContainer {
                width: 95vw; 
        }

	#mainContainer {
		width: 94vw;
	}

	#footContainer {
                width: 95vw;
        }


}