.hero-row {
	margin-top: 20px;
	background-color: black;
}

.hero-cols {
    display: grid;
    grid-template-columns: 1fr 4fr;
}

.hero-cols .hero-col2{
    display: grid;
    grid-template-columns: 1fr;
	background: url(../imgs/header.jpg) right/contain;
	background-repeat: no-repeat;
}

.menue-toggle{
	float: right;
	background-color: transparent;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 12px;
	cursor: pointer;
	margin-right: 10px;
}

.hamburger,
.hamburger::before,
.hamburger::after{
	content: '';
	background-color: white;
	display: block;
	height: 3px;
	width: 1.5em;
	border-radius: 3px;
	margin-top: 15px;
	transition: all ease-in-out 500ms;
}

.hamburger::before{
	transform: translateY(-6px);
}

.hamburger::after{
	transform: translateY(-12px);
}

.open .hamburger{
	transform: rotate(45deg);
}

.open .hamburger::before{
	opacity: 0;
}

.open .hamburger::after{
	transform: translateY(-17px) rotate(-90deg);
}

.main-nav{
	position: absolute;
	right: 15px;
}

.site-nav{
	margin-top: 30px;
	zindex: 10;
	background-color: transparent;
	padding-top: 0px;
/*	height: 0px;
	overflow: hidden; */
	clip-path: circle(0px at top right);
	transition: all ease-in-out 700ms;
}

.site-nav--open{
	/*height: auto;*/
	clip-path: circle(150% at top right);
}

.site-nav ul {
	margin-top: 0px;
	padding: 0;
	list-style: none;
 	background-color: rgba(0,0,0,0.62);
}

.site-nav li{
	border-bottom: 1px solid rgba(253,143,3,0.27);
	list-style: none;
	-webkit-box-shadow: 0px 0px;
	box-shadow: 0px 0px;
	background-color: rgba(0,0,0,0.7);
	border-top-color: rgba(253,143,3,0.27);
	border-right-color: rgba(253,143,3,0.27);
	border-left-color: rgba(253,143,3,0.27);
}

.site-nav li:last-child{
	border-bottom: none;
}

.site-nav a{
	color: white;
	text-decoration: none;
	display: block;
	padding: 1em 5em;
	padding-left: 7em;
}

.site-nav a:hover, .site-nav a:focus{
	color: rgba(46,255,3,0.69);
	text-decoration: none;
	display: block;
	padding: 1em 5em;
	background-color: rgba(244,244,251,0.05);
	padding-left: 7em;
}



.leistung-cols{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 25px;
	width: 97.5%;
	margin: 0 auto;
	padding-top: 20px;

}

.leistung-col1, .leistung-col2, .leistung-col3
{
	background-color: #151515;
}





.beratung-row{
		display: grid;
		column-gap: 3rem;
		grid-template-columns: 40% 30% 30%;
		grid-template-rows: auto auto;
		grid-template-areas: "ber_cell_1 ber_cell_2 ber_cell_3"
							 "ber_cell_4 ber_cell_4 leer";
}

.beratung-1{
	grid-area: ber_cell_1;
}

.beratung-2{
	grid-area: ber_cell_2;
}

.beratung-3{
	grid-area: ber_cell_3;
}

.beratung-4{
	grid-area: ber_cell_4;
}





.content-row, .content-row-impressum {
	display: grid;
	grid-gap: 25px;
	grid-template-columns: 3fr 1fr;
	width: 97.5%;
	margin: 0 auto;
	padding-top: 20px;
}


.content-cols-i{
	display: grid;
	grid-gap: 25px;
	grid-template-columns: 1fr 1fr;
	width: 100%;
	margin: 0 auto;
	padding-top: 20px;

}


.footer-row{
	display: grid;
	grid-template-columns: 25% 20% 20% 15% 20%; 
	grid-template-rows: auto auto;
	grid-template-areas: "bbb bbb ccc ddd eee"
						 "fff fff fff fff aaa";
					
}

.footer_col1{
	grid-area: aaa;
}

.footer_col2{
	grid-area: bbb;
}

.footer_col3{
	grid-area: ccc;
}

.footer_col4{
	grid-area: ddd;
}

.footer_col5{
	grid-area: eee;
}

.footer-col6{
	grid-area: fff;
}

.footer-col6 {
	text-align: center;
}

.footer-col6 p {
	margin-bottom: 5px;;
}



.unsereleistung-row{
	margin-left: 15px;
	display: grid;
	grid-column-gap: 15px;
	grid-template-columns: 35% 35% 30%;
	grid-template-rows: auto auto auto;
	grid-template-areas: "content1 content2 content3"
						 "content1 content5 content3"
						 "content6 content5 content3";
}

.unsereleistung-row p{
	text-align: left;
}

.unsereleistung-row h2{
	margin-top: 10px;
}

.unsereleistung-col1{
	grid-area: content1;
}

.unsereleistung-col2{
	grid-area: content2;
}

.unsereleistung-col3{

	grid-area: content3;
}

.unsereleistung-col3 h2{

	padding-left: 30px;
}

.unsereleistung-col4{
	grid-area: content4;
}

.unsereleistung-col5{
	grid-area: content5;
}

.unsereleistung-col6{
	grid-area: content6;
}


.webdesign-row{
	margin-left: 15px;
	display: grid;
	padding-right: 90px;
	grid-template-columns: 55% 45%;
	grid-template-rows: auto auto auto;
	grid-template-areas: "content1 content2"
						 "content1 content2"
						 "content1 content2";
}

.webdesign-col1{ grid-area: content1; padding-right: 80px;}
.webdesign-col1 img{ width: 95%; 
					 margin: 1.5em 0 1.5em 0;	
				}
.webdesign-col1 p, .webdesign-col2 p{ 
					text-align: justify !important;
				}
.webdesign-col2{ grid-area: content2; }


.webdesign-row p, .webdesign-row h2{ text-align: left;}

@media (min-width: 1100px){
	.menue-toggle{
		display: none;
	}
	
	.site-nav {
		height: auto;
		max-width: 1200px;
		background-color: transparent;
		margin-top: 5px;
		margin-left: auto;
		margin-right: auto;
		clip-path: initial;
	}
	
	.site-nav ul{
		float: right;
	}
	
	.site-nav li {
	display: inline-block;
	border: none;
	background-color: rgba(0,0,0,0.2);
	}
	
	.site-nav a, .site-nav a:hover, .site-nav a:focus{
		padding: 20px 23px;
	}
	
	.main-nav {
		width: 100%;
		background-color: transparent;
	
	}


}



@media (max-width: 950px){
	
	.leistung-cols{
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto;
		grid-template-areas: "zeile1 zeile2"
							 "zeile3 zeile3";
	}
	
	.leistung-col1{
		grid-area: zeile1;
	}

	.leistung-col2{
		grid-area: zeile2;
	}

	.leistung-col3{
		grid-area: zeile3;
	}
	

	.beratung-row{
			display: grid;
			column-gap: 3rem;
			grid-template-columns: 40% 30% 30%;
			grid-template-rows: auto auto;
			grid-template-areas: "ber_cell_1 ber_cell_2 ber_cell_3"
								 "ber_cell_4 ber_cell_4 ber_cell_4";
	}
	
	.dummy{
		margin-right: 90px;
	}
	
	.content-row, .content-row-impressum {
		display: grid;
		grid-gap: 25px;
		grid-template-columns: 1fr 1fr;
		width: 97.5%;
		margin: 0 auto;
		padding-top: 20px;
	}
	
	
}


@media (max-width: 850px){
	
	
.footer-row{
	display: grid;
	grid-template-columns: 25% 27% 20% 28%; 
	grid-template-rows: auto auto;
	grid-template-areas: 
		"glos-edv glos-web navigation kontakt"
		"logo copyright copyright copyright";
					
}

	.footer-col1 {
		grid-area: logo;
	}

	.footer_col2{
		grid-area: glos-edv;
	}

	.footer_col3{
		grid-area: glos-web;
	}

	.footer_col4{
		grid-area: navigation;
	}

	.footer_col5{
		grid-area: kontakt;
	}

	.footer-col6{
	grid-area: copyright;
}

	.footer-col6 {
		text-align: center;
	}

	.footer-col6 p {
		margin-bottom: 5px;
	}
	
	.spacer {
		width: 100%;
		height: 20%;
	}

}

@media (max-width: 800px){
	
	.beratung-row{
			display: grid;
			grid-gap: 1rem;
			grid-template-columns: 1fr 1fr 1fr 22%;
			grid-template-rows: auto auto;
			grid-template-areas: "ber_cell_1 ber_cell_1 ber_cell_2 ber_cell_2"
								 "ber_cell_4 ber_cell_4 ber_cell_4 ber_cell_3";
	}
	
	.dummy{
		padding-right: 0px;
		margin-right: 0px;
	
	}
	
	
}


@media (max-width: 768px){
		.unsereleistung-row{
			margin-left: 15px;
			display: grid;
			grid-column-gap: 15px;
			grid-template-columns: 30% 30% 40%;
			grid-template-rows: auto auto auto;
			grid-template-areas: "content1 content1 content3"
								 "content6 content6 content6"
								 "content2 content2 content2"
								 "content5 content5 content5";
		}
		.webdesign-row{
			display: grid;
			padding-left: 70px;
			padding-right: 60px;
			grid-template-columns: 95%;
			grid-template-rows: auto auto;
			grid-template-areas: "content1"
								 "content2";
		}
}


@media (max-width: 680px){
	
.footer-row{
		grid-template-columns: 32% 35% 33%; 
		grid-template-areas:
		"edv_1 web_1 fkontakt_1"
		"logo_1 logo_1 links_1"
		"fcopyr_1 fcopyr_1 fcopyr_1";
	}

	
	.footer-col1 {               /*  Logo   */
		grid-area: logo_1;
	}

	.footer_col2{				/*  Glossar EDV   */
		grid-area: edv_1;
	}

	.footer_col3{				/*  Glossar Webdesign   */
		grid-area: web_1;
	}

	.footer_col4{				/*  Links   */
		grid-area: links_1;
	}

	.footer_col5{				/*  Kontakt   */
		grid-area: fkontakt_1;
	}

	.footer-col6{				/*  Copyright   */
		grid-area: fcopyr_1;
}

	.footer-col6 {
		text-align: center;
	}

	.footer-col6 p {
		margin-bottom: 5px;
	}
	
	.spacer {
		width: 100%;
		height: 20%;
	}
	
	

}


@media (max-width: 650px){
	
	.beratung-row{
			display: grid;
			grid-gap: 1rem;
			grid-template-columns: 1fr 1fr 1fr 25%;
			grid-template-rows: auto auto;
			grid-template-areas: "ber_cell_1 ber_cell_1 ber_cell_2 ber_cell_2"
								 "ber_cell_4 ber_cell_4 ber_cell_4 ber_cell_3";
	}
	
	.leistung-cols{
		display: grid;
		grid-row-gap: 1rem;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
		grid-template-areas: "zeile1"
							 "zeile2"
							 "zeile3";
	}
	
	.dummy{
		padding-right: 0px;
		margin-right: 0px;
	
	}
	
		.webdesign-row{
			display: grid;
			padding-left: 40px;
			padding-right: 30px;
			grid-template-columns: 95%;
		}
}

@media (max-width: 550px){
	
	.beratung-row{
			display: grid;
			grid-gap: 1rem;
			grid-template-columns: 1fr 1fr 1fr 28%;
			grid-template-rows: auto auto;
			grid-template-areas: "ber_cell_1 ber_cell_1 ber_cell_2 ber_cell_2"
								 "ber_cell_4 ber_cell_4 ber_cell_4 ber_cell_3";
	}
	
	.footer-row{
			grid-template-columns: 55% 45%; 
			grid-template-areas:
			"edv_1 web_1"
			"links_1 fkontakt_1 "
			"logo_1 logo_1"
			"fcopyr_1 fcopyr_1";
		}
	
	.footer-col1{
		margin-left: auto;
		margin-right: auto;
	}
}


@media (max-width: 500px){
	
	.beratung-row{
			display: grid;
			grid-gap: 1rem;
			grid-template-columns: 1fr;
			grid-template-rows: auto auto auto auto;
			grid-template-areas: "ber_cell_1"
								 "ber_cell_2"
								 "ber_cell_4"
								 "ber_cell_3";
	}
		.webdesign-row{
			display: grid;
			padding-left: 20px;
			padding-right: 10px;
			grid-template-columns: 98%;
		}
}

@media (max-width: 470px){
		.unsereleistung-row{
			margin-left: 0px;
			padding-left: 10px;
			padding-right: 40px;
			display: grid;
			grid-column-gap: 15px;
			grid-template-columns: 30% 30% 40%;
			grid-template-rows: auto auto auto auto;
			grid-template-areas: "content1 content1 content1"
								 "content6 content6 content6"
								 "content2 content2 content2"
								 "content5 content5 content5"
								 "content3 content3 content3";
		}
}

@media (max-width: 400px){
	.footer-row{
			grid-template-columns: 100%; 
			grid-template-areas:
				"edv_1"
				"web_1"
				"links_1"
				"fkontakt_1"
				"logo_1"
				"fcopyr_1";
				
		}
	
	.footer-col1{
		padding-top: 10px;
	}

	.box{
		text-align: center;
	}
	
		.webdesign-row{
			display: grid;
			padding-left: 10px;
			padding-right: 10px;
			grid-template-columns: 99%;
		}
	
	
}