@charset "utf-8";
/* CSS Document */

* {margin: 0; padding: 0;}

input {position: absolute; visibility: hidden;}

body {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 100%;
	-moz-hyphens: auto;
   	-o-hyphens: auto;
   	-webkit-hyphens: auto;
   	-ms-hyphens: auto;
   	hyphens: auto;
	background-color: #f7f7f7;
	color: #2D2D2D;
}

a {outline: none; color: #009fe3;}

.site {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 5em repeat(3,auto);
	grid-template-areas:
	"nav-oben"
	"header"
	"main"
	"footer";
	transition: all ease-in-out 0.8s;
}

.nav-oben {
	grid-area: nav-oben;
	display: grid;
	grid-template-columns: 1fr 5em 5em 5em;
	grid-template-rows: 1fr;
	grid-template-areas:
	". untis belwue its";
	background-color: #f7f7f7;
}

.nav-oben a {
	width: 100%;
	height: 100%;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.untis {
	grid-area: untis;
	background-image: url(../images/log-in/thumbs/web-untis-logo-grau.png);
}

.its {
	grid-area: its;
	background-image: url(../images/log-in/thumbs/itsl-logo-grau.png);
}

.belwue {
	grid-area: belwue;
	background-image: url(../images/log-in/thumbs/mail-logo.png);
}

nav {
	display: grid;
	grid-template-columns: 24em;
	grid-template-rows: repeat(7, 5em) 1fr;
	position: fixed;
	left: -24em;
	top: 0;
	height: 100%;
	transition: all ease-in-out 0.8s;
	z-index: 1000;
}

#nav-label {
	width: 29em;
	background-image: url(../images/nav-symbol/menu.png);
	background-size: contain;
	background-position: right;
	background-repeat: no-repeat;
	background-color: #2d2d2d;
	cursor: pointer;
}	

/*#nav-overlay {
	position: fixed;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background-color: rgba(51,51,51,0.6);
	transition: all ease-in-out 0.2s;
	z-index: 999;
}

#nav-open:checked~.site #nav-overlay {left: 0;}*/

.menu-text {
	position: relative;
	display: grid;
	padding: 0 1em 0 1em;
	align-items: center;
	color: #f7f7f7;
	font-variant: small-caps;
	letter-spacing: 0.1em;
	font-size: 2em;
	text-decoration: none;
	background-color: #2d2d2d;
	overflow: hidden;	
}

nav a:before {
	content: "";
  	position: absolute;
  	width: 100%;
  	height: 2px;
	bottom: 0;
  	left: 0;
  	background-color: #f7f7f7;
  	visibility: hidden;
  	-webkit-transform: scaleX(0);
  	transform: scaleX(0);
  	-webkit-transition: all 0.3s ease-in-out 0s;
  	transition: all 0.3s ease-in-out 0s;
}

nav a:hover:before {
	visibility: visible;
  	-webkit-transform: scaleX(1);
  	transform: scaleX(1);
}

#nav-open:checked~.site nav {left: 0;}
#nav-open:checked~.site {margin-left: 24em;}

#nav-open:checked~.site main .wrapper .box article p, #nav-open:checked~.site main .wrapper .box article div, #nav-open:checked~.site main .wrapper .text-without-box p {
	font-size: 0.7em;
}

#nav-open:checked~.site main .wrapper .box article h3 {font-size: 0.9em;}

header { 
	grid-area: header;
	display: grid; 
	grid-template-columns: repeat(6, 1fr);
	grid-template-rows: auto;
	overflow: hidden;
}

.headerSlider {
	display: grid;
	grid-area: headerSlider;
	grid-column: 2 / 7;
	grid-row: 1;
}

.headerSlider .headerBild {
	grid-area: headerBild;
	grid-column: 1;
	grid-row: 1;
	width: 100%;
}

.headerSlider .headerBild1 {animation: headerBild1sichtbar 48s ease-in-out infinite;}
.headerSlider .headerBild2 {animation: headerBild2sichtbar 48s ease-in-out infinite;}
.headerSlider .headerBild3 {animation: headerBild3sichtbar 48s ease-in-out infinite;}
.headerSlider .headerBild4 {animation: headerBild4sichtbar 48s ease-in-out infinite;}
.headerSlider .headerBild5 {animation: headerBild5sichtbar 48s ease-in-out infinite;}
.headerSlider .headerBild6 {animation: headerBild6sichtbar 48s ease-in-out infinite;}
.headerSlider .headerBild7 {animation: headerBild7sichtbar 48s ease-in-out infinite;}
.headerSlider .headerBild8 {animation: headerBild8sichtbar 48s ease-in-out infinite;}

@keyframes headerBild1sichtbar {
	0%  { opacity: 1; } 
   	8.33334%  { opacity: 1; } 
   	12.5% { opacity: 0; }
   	95.83334% { opacity: 0;} 
   	100% {opacity: 1;}
}

@keyframes headerBild2sichtbar {
	0%  { opacity: 1; } 
   	20.83333%  { opacity: 1; } 
   	24.99993% { opacity: 0; }
   	95.83334% { opacity: 0;} 
   	100% {opacity: 1;}
}

@keyframes headerBild3sichtbar {
	0%  { opacity: 1; } 
   	33.33333%  { opacity: 1; } 
   	37.49997% { opacity: 0; }
   	99.99999% { opacity: 0;} 
   	100% {opacity: 1;}
}

@keyframes headerBild4sichtbar {
	0%  { opacity: 1; } 
   	45.8333%  { opacity: 1; } 
   	49.99996% { opacity: 0; }
   	99.99999% { opacity: 0;} 
   	100% {opacity: 1;}
}

@keyframes headerBild5sichtbar {
	0%  { opacity: 1; } 
   	58.33333%  { opacity: 1; } 
   	62.49999% { opacity: 0; }
   	99.99999% { opacity: 0;} 
   	100% {opacity: 1;}
}

@keyframes headerBild6sichtbar {
	0%  { opacity: 1; } 
   	70.83333%  { opacity: 1; } 
   	74.99999% { opacity: 0; }
   	99.99999% { opacity: 0;} 
   	100% {opacity: 1;}
}

@keyframes headerBild7sichtbar {
	0%  { opacity: 1; } 
   	83.33333%  { opacity: 1; } 
   	87.49999% { opacity: 0; }
   	99.99999% { opacity: 0;} 
   	100% {opacity: 1;}
}

.headerLogo {
	grid-area: headerLogo;
	display: grid;
	grid-column: 1 / 3;
	grid-row: 1;
	grid-template-columns:   0.15fr 20vw 1fr;
	grid-template-rows: 1fr 20vw 1fr;
	grid-template-areas:
	". . ."
	". logo ."
	". . .";
	z-index: 2;
}

.logo {
	grid-area: logo;
	width:100%;
	height: 100%;
	background-color: #fff;
	border: 1px solid #009fe3;
	z-index: 2;
}

main {
	grid-area: main;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
}

.seitenUeberschrift {
	margin: 0.3em 0 0.3em 0;
	display: grid;
	grid-column: 1 / 4;
	grid-template-rows: auto auto;
	grid-gap: 0.3em;
}

.seitenUeberschrift h1{
	padding: 0.3em 0 0.3em 2vw;
	font-size: 1.5em;
	color: #f7f7f7;
	background-color: #009fe3;
}

.wrapper {
	margin: 5vh 2vw 5vh 2vw;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(1fr);
	grid-gap: 1vw;
}

.wrapperDreiSpalten {
	margin: 5vh 2vw 5vh 2vw;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(1fr);
	grid-gap: 1vw;
}

.wrapper>h3, .wrapper>p, .wrapper>.text-without-box, .wrapper>ul, .wrapper>ol
.wrapperDreiSpalten>h3, .wrapperDreiSpalten>p, .wrapperDreiSpalten>.text-without-box, .wrapperDreiSpalten>ul, .wrapperDreiSpalten>ol{
	grid-column: span 4;
	text-align: justify;
}

.wrapperDreiSpalten>h3, .wrapperDreiSpalten>p, .wrapperDreiSpalten>.text-without-box, .wrapperDreiSpalten>ul, .wrapperDreiSpalten>ol{
	grid-column: span 3;
	text-align: justify;
}

.wrapper>.text-without-box-zwei-spalten {
	grid-column: span 2;
	text-align: justify;
}

.wrapper>h3, .wrapperDreiSpalten>h3 {
	margin: 2em 0 1em 0;
}

.wrapper>ul, .wrapper>ul ul, .wrapper>.text-without-box ul, .wrapper>ol, .wrapper>ol ol, .wrapper>.text-without-box ol, .wrapper>ol li ul {
	margin: 1em 4em 0 2em;
}

.wrapper>ul li, .wrapper>.text-without-box ul li, .wrapper>ol li, .wrapper>.text-without-box ol li {
	margin-bottom: 1em;
}

.wrapper>ol {
  counter-reset: item
}
.wrapper>ol>li {
  display: block
}
.wrapper>ol>li:before {
  content: counters(item, ".") " ";
  counter-increment: item
}


.wrapper>div .box {margin: 0 2em 2em 0; width: 40vw; height: 40vw;}

.zwischenueberschrift {
	grid-column: span 4;
	padding: 0.3em 0 0.3em 0;
	margin: 0.6em 0 0.6em 0;
	text-align: center;
	font-size: 2em;
	letter-spacing: 0.2em;
	font-variant: small-caps;
	color: #f7f7f7;
	background-color: #009fe3;
}

.autor {
	font-style: italic;
}

.boxGross {
	grid-column: span 2;
	grid-row: span 2;
}

.boxKleinBreit {
	grid-column: span 2;
	grid-row: span 1;
}

.boxKleinKompletteBreite{
	grid-column: span 4;
	grid-row: span 1;
}

.boxGrossKompletteBreite{
	grid-column: span 4;
	grid-row: span 2;
}

video {width: 100%;}

.box {
	position: relative;
	box-shadow: 0 0 15px rgba(0,0,0,0.2);
	background-color: #fff;
	cursor: pointer;
	overflow: hidden;
	float: left;
}

.box .boxBild {
	width: 100%;
	height: 100%;
}

.box video {
	position: relative;
	width: 100%;
	height: 100%;
}

.box iframe {
	position: absolute;
	width: 100%;
	height: 100%;
}

.box article {
	position: absolute;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto 1fr;
	top: 80%;
	height: 100%;
	width: 100%;
	background-color: #fff;
	color: #2d2d2d;
	opacity: 0.8;
	transition: all ease-in-out 0.8s;
}

.box .text-on-top {top: 0; height: 20%;}

.box article .pfeil-box {
	position: absolute;
	margin-left: -1.5em;
	top: -1.5em;
	left: 50%;
	width: 3em;
	border-radius: 50%;
	background-color: #fff;
	transition: all ease-in-out 0.8s;
	z-index: 1;
}

.box article h3 {
	align-self: center;
	margin: 0.9em 1em 0 1em;
	font-size: 1vw;
	z-index: 2;
	transition: all ease-in-out 0.8s;
}

.text-without-box h3 {
	margin: 0em 1em 0 1em;
	font-size: 2vw;
	font-variant: small-caps;
	text-align: left;
}

.box article p, .box article div, .box article ol, .text-without-box p {
	margin: 1em 1em 0 1em;
	font-size: 0.84vw;
	text-align: justify;
	transition: all ease-in-out 0.8s;
}

.box article ol{
	padding-left:1em;
	list-style-type: decimal;
}

.box article ol li{
	padding-right: 1em;
}

.wrapper>label>article .newsTextMobil, .wrapper>div>article .newsTextMobil {position: absolute; visibility: hidden;}

input:checked+label article {top: 0; opacity: 1;}
input:checked+label article .pfeil-box {top:0; transform: rotate(180deg);}
input:checked+label article h3 {margin-top: 2.5em;}

input:checked+.seitenLink article h3 {margin-top: 2em;}
input:checked+.seitenLink article p {margin-top: 2.5em;}

.seitenLink article {
	grid-template-rows: 20% 1fr;
}

.seitenLink article h3 {
	margin: 0;
	justify-self: center;
	font-size: 2vw;
	font-variant: small-caps;
}

.textbox article{
	top: 0;
	grid-template-rows: 15% 1fr;
}

.textbox article div ul {margin: 1em 0em 1em 1.5em;}
.textbox article div ul li {margin: 0.3em 0 0.3em 0;}

footer {
	grid-area: footer;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: 1fr;
	grid-gap: 1em;
	grid-template-areas:
	"logo-footer kontakt partner impressum";
	background-color: #009fe3;
}

footer .kontakt h3, footer .partner h3, footer .impressum h3{
	margin: 1em 0 0.5em 0;
	padding-left: 1em;
	color: #f7f7f7;
	border-bottom: 1px solid #f7f7f7;
}

footer .kontakt p, footer .impressum p {
	margin: 0 1em 1em 1em;
	color: #f7f7f7;
}

.footer-logo {
	grid-area: logo-footer;
	margin: 2em;
	background-image: url(../images/logo-weiss.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

footer .kontakt {grid-area: kontakt;}

.partner a {
	position: relative;
	margin: 0 1em 1em 1em;
	height: 3.5em;
	width: 3.5em;
	background-size: cover;
	float: left;
}

.partner .linkGVV {
	background-image: url(../images/footer/gvv-logo.png);
}

.partner .linkKemmlit {
	background-image: url(../images/footer/kemmlit-logo.png);
	width:7em;
}

.partner .linkCHT {
	background-image: url(../images/footer/cht-logo.png);
}

/* Responsive */

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

	.site {grid-template-rows: 10em repeat(3,auto);}
	
	nav {
		grid-template-rows: repeat(7, 10em) 1fr;
		grid-template-columns: 40em;
		left: -40em;
	}
	
	.site .nav-oben {grid-template-columns: 1fr 10em 10em 10em;}
	
	#nav-label {width: 50em;}
	
	.menu-text {font-size: 2.8em;}
	
	#nav-open:checked~.site {margin-left: 0;}
	#nav-open:checked~.site main .wrapper .box article p, #nav-open:checked~.site main .wrapper .box article div, #nav-open:checked~.site main .wrapper .text-without-box p {
	font-size: 1.8em;
	}
	#nav-open:checked~.site main .wrapper .box article h3 {font-size: 2em;}
	
	header {grid-template-rows: 1fr auto;}

	.headerSlider {grid-column: 1 / 7; grid-row: 2 / 3;}

	.headerLogo {
		grid-area: headerLogo;
		display: grid;
		grid-column: 1 / 7;
		grid-row: 1 / 2;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
		grid-template-areas:
		"logo";
		z-index: 2;
	}

	.logo {	width:100%; height: auto; border: none; background-color: #f7f7f7;}
	
	.seitenUeberschrift h1 {font-size: 1.8em;}
	
	.wrapper, .wrapperDreiSpalten {
		grid-template-columns: 1fr;
		grid-gap: 5vh;
	}
	
	.wrapper>.text-without-box .box {margin: 0 0 1em 0; width: 100%; height: 94vw;}
	
	.wrapper>.text-without-box-zwei-spalten {grid-column: span 1;}
	
	.boxGross, .boxKleinBreit, .boxKleinKompletteBreite, .boxGrossKompletteBreite {
		grid-column: span 1;
		grid-row: span 1;
	}
	
	
	.box video {position:relative}
	
	.zwischenueberschrift {grid-column: span 1;}
	
	.box article h3, .text-without-box h3 {font-size: 2em;}

	.box article p, .box article div, .box article ol, .text-without-box p {font-size: 2.2vw;}

	.wrapper>label>article>.newsTextDesktop, .wrapper>div>article .newsTextDesktop {position: absolute; visibility: hidden;}
	.wrapper>label>article>.newsTextMobil, .wrapper>div>article .newsTextMobil {position: relative; visibility: visible;}
	
	.seitenLink article h3 {font-size: 6vw;}
	
	.autor {font-size: 2.2vw;}
	
	.wrapper>h3, .wrapper>p, .wrapper>.text-without-box, .wrapper>ul {grid-column: 1;}
	
	footer {
	grid-template-columns: 1fr;
	grid-template-rows: 1fr 1fr auto auto;
	grid-template-areas:
	"logo-footer" 
	"kontakt" 
	"partner" 
	"impressum";
	background-color: #009fe3;
	}
	
	.partner a {
	height: 7em;
	width: 7em;
	}
	.partner .linkKemmlit {
		width:14em;
	}
}