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

:root{
	--HeaderHeight: 95px;
	--BannerHeight: 60px;
	--MainMinHeight: 700px;
	
	--ColorBlack: #000000; /* var(--ColorBlack); */
	--ColorWhite: #FFFFFF; /* var(--ColorWhite); */
	--ColorDarkMode: #282828; /* var(--ColorDarkMode); */
	--ColorGreen: #22d749; /* var(--ColorGreen); */
}

body, html {
	margin: 0 auto;
	font-family: 'Open Sans', sans-serif;
	background-color: var(--ColorBlack);
	line-height: 1.6;
}

header{
	background-color: var(--ColorBlack);
    position: fixed;
    width: 100%;
    z-index: 5;
	height: var(--HeaderHeight);
	top: 0px;
}

main{
	background-color: var(--ColorWhite);
	min-height: var(--MainMinHeight);
	margin-top: var(--HeaderHeight);
	padding-top: var(--BannerHeight);
	
	transition: background-color 0.3s, color 0.3s;
}

	main.dark-mode{
		background-color: var(--ColorDarkMode);
		min-height: var(--MainMinHeight);
		margin-top: var(--HeaderHeight);
		padding-top: var(--BannerHeight);
		color: var(--ColorWhite);
	}

footer{
	min-height:60px;
	color:#707070;
	background-color: var(--ColorBlack);
	text-align: center;
	padding: 3px;
}

/* Allgemein */

a{
	text-decoration:none;
	color:#707070;
	transition: 0.4s;
}

	a:hover{
		text-decoration:none;
		color: var(--ColorGreen);
	}

hr{
	color: var(--ColorGreen);
	width: 30%;
}

/* ID's */


#Main{
	margin: 50px;
	padding: 20px;
	
	border: 2px solid var(--ColorGreen);
	border-radius: 20px;
	
	box-shadow: 2px 2px 1px 0px silver;
	
	transition: 1.5s;
}

	#Main:hover{
		box-shadow: 2px 5px 10px 15px silver;
		
		transition: 1.5s;
	}

#TransitionBottom{
	/* background-image: url(../images/wb.png); */
	background-image: linear-gradient(180deg, rgba(255,255,255,1) 0%, black 100%);
	height: 50px;
}

	#TransitionBottom.dark-mode{
		/* background-image: url(../images/wb.png); */
		background-image: linear-gradient(180deg, var(--ColorDarkMode) 0%, black 100%);
		height: 50px;
	}

/* Classses */

.ColGreen{
	color: var(--ColorGreen);
}

.MainLogo{
	float: left;
	/* padding-top:20px; */
	width: 75px;
	height: 118px;
}

.FlexCenter{
	display: flex;
	align-items: center;
}

.Kontakt{
	flex-direction: column;
	border: 2px solid var(--ColorGreen);
	border-radius: 5px;
	margin: 0 15%;

	transition: 1.5s;
}

	.Kontakt:hover{
		box-shadow: 1px 3px 6px 9px silver;
		
		transition: 1.5s;
	}

.BackImg1{
	background-image: url('../images/Person.png');
	background-repeat: no-repeat;
	background-position: bottom;
	background-size: 300px;
}

.BackImg2{
	background-image: url('../images/Datastorage.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 300px;
}

.BackImg3{
	background-image: url('../images/PC.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 300px;
}

.BackImg4{
	background-image: url('../images/Smart.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 300px;
}

.BackImg5{
	background-image: url('../images/Internet.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 300px;
}

.BackImg6{
	background-image: url('../images/Kontakt.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 300px;
}

.WrapperHeader{
	margin: 5px 15% 0 15%;
	height: 90px;
}

	.WrapperHeader a{
		display: inline-block;
	}
	
	.WrapperHeader p{
		display: inline-block;
		text-decoration:none;
		color:#707070;
		cursor: default;
	}

	.WrapperHeader .Menu a{
		font-size: 170%;
		margin: 0px 30px 0px 30px;
	}
	
	.WrapperHeader .Menu p{
		font-size: 170%;
		margin: 0px 10px 0px 30px;
	}

.WrapperMain{
	margin: 5px 15% 0 15%;
	min-height: var(--MainMinHeight);
	padding-bottom: 5px;
}

nav{
	width: auto;
	float: right;
	
	padding: 26px 0px 26px 10px;
	position: relative;
	outline: 0;
}

.Banner{
	/* background-image: url(../images/bt.png); */
	background-image: linear-gradient(180deg, black 0%, rgba(255,255,255,0) 100%);
	background-repeat: no-repeat;
	background-size: 100%;
	width: 100%;
	height: var(--BannerHeight);
	position: fixed;
	top: var(--HeaderHeight);
	z-index: 1;
}

.Grid{
	display: grid;
	grid-template-columns: 50% 50%;

	margin: 10px;
	padding: 20px;
}

	.Grid > div {
		margin: 10px;
		padding: 20px;
		border: 2px solid var(--ColorGreen);
		border-radius: 20px;
		
		box-shadow: 2px 2px 1px 0px silver;
		
		transition: 1.5s;
	}

	.Grid > div:hover{
		box-shadow: 1px 3px 6px 9px silver;
		
		transition: 1.5s;
	}

	.Grid .GridRow1b3{
		grid-row-start: 1;
		grid-row-end: 3;
	}

.switch {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 34px;
	font-size: 170%;
}

	.switch input {
		opacity: 0;
		width: 0;
		height: 0;
	}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 34px;
}

	.slider:before {
		position: absolute;
		content: "";
		height: 26px;
		width: 26px;
		border-radius: 50%;
		left: 4px;
		bottom: 4px;
		background-color: white;
		transition: 0.4s;
	}

/* When checked (Dark Mode) */
input:checked + .slider {
    background-color: #4CAF50;
}

input:checked + .slider:before {
    transform: translateX(26px);
}


/* Media Qäcks */

@media (min-width:3000px){

}

@media (min-width:1900px){

}

@media (max-width: 1200px) {

}

@media (max-width: 1000px) {

.WrapperHeader{
	margin: 5px 5% 0 5%;
	height: 90px;
}

	.WrapperHeader a{
		display: inline-block;
	}
	
	.WrapperHeader p{
		display: inline-block;
		text-decoration:none;
		color:#707070;
		cursor: default;
	}

	.WrapperHeader .Menu a{
		font-size: 170%;
		margin: 0px 30px 0px 30px;
	}
	
	.WrapperHeader .Menu p{
		font-size: 170%;
		margin: 0px 10px 0px 30px;
	}

.WrapperMain{
	margin: 5px 5% 0 5%;
	min-height: var(--MainMinHeight);
	padding-bottom: 5px;
}

}

@media (min-width: 875px) {

}

@media (max-width: 874px) {

}

@media (max-width: 700px){

.Grid{
	display: grid;
	grid-template-columns: 100%;

	margin: 10px;
	padding: 20px;
}

}

@media (max-width:650px) {

}


/* SMARTPHONE */
@media (max-width: 520px) {

}

@media (max-width:390px) {

}