@charset "utf-8";



/*
* CSS-Design
* legerhenne-website
 *
*/




/* Farbwerte 

schwarz: rgba(21, 21, 20, 1) #151514
hellgrau: rgba(245, 245, 245, 1) #f5f5f5
orange: rgba(255, 126, 34, 1) #ff7e22 
*/




/* Webfonts-Einbindung */
@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100;400;700&family=Quicksand:wght@300;400;600&display=swap');*
{
margin: 0;
 padding: 0;
 -mozbox-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
}






/* Basisformatierung */


body {font-size: 18px; font-family: 'Quicksand', sans-serif; font: 600 1.125rem/1.55 'Quicksand', sans-serif;
line-height: 28px; color: #151514; font-weight: 400; background: #f5f5f5;}


img {
max-width: 100%;
 height: auto; border-radius: 10px 25%; 
}
#logo {
max-height: 80px;
}






/* Layout */


.wrapper {
max-width: 1250px;
 padding: 0 25px;
 margin: 0 auto;
}


.column {
float: left;
 margin: 25px 0 25px 5%;
}


.column:first-child {
margin-left: 0;
}


section {
padding: 75px 0;
}


.dark {
background: 

rgba(21, 21, 20, 1);}
.light {
background: rgba(245, 245, 245, .1); 
padding: 0;
 margin: 75px auto;
}


.light .column {
/* margin: 0; */
}


.no-gutter.column {
margin: 0;
 padding: 60px;
}


.no-gutter .col_1_2 {
width: 50%;
}


.no-gutter .col_1_3 {
width: 33.33%;
}

.no-gutter .col_2_3 {
width: 66.66%;
}


.no-gutter .col_1_4 {width: 25%;
}

.no-gutter .col_3_4 {
width: 75%;
}





/* Clearfix */


.row:before,
.row:after {
content: " ";
 display: table;
}


.row::after {
clear: both;
}





/* Spalten */


.col_1 {
width: 100%;
}


.col_1_2 {
width: 47.5%;
}


.col_1_3 {
width: 30%;
}


.col_2_3 {
width: 65%;
}


.col_1_4 {
width: 21.25%;
}


.col_3_4 {
width: 73.75%;
}


.width-800 {
max-width: 800px;
}





/* Navigation */


#navigation {
float: right;
 margin-top: 43px;
}


#navigation li {
display: inline;
 list-style: none;
 margin-left: 35px;
}


#navigation li a {
text-decoration: none;
 text-transform: uppercase;
 font-size: 1.25rem;
	/* 20px; */
 font-weight: 300;
 color: #f5f5f5;
 padding: 15px 0;
}


#navigation li a:hover,

#navigation li a.active {
color: #f5f5f5;
}


/* Typo */


h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'League Spartan', sans-serif;
 font-style: none;
 font-weight: 400;
 margin-bottom: 20px;
 color: #ff7e22;
 line-height: 1.6;
}


h1 {
font-size: 3.625rem;
 /* 58px; */
 margin-bottom: 25px;
 font-weight: 600;
 line-height: 1.2;
}


h2 {
font-size: 2.125rem;
 /* 34px; */
 font-weight: 600;
	/* letter-spacing: 0.05em; */
}


h3 {
font-size: 1.75rem;
	/* 28px; */
}


h4 {
font-size: 1.5rem;
 /* 24px; */
}


h5 {
font-size: 1.375rem;
 /* 22px; */
}


h6 {
font-size: 1.250rem;
 /* 20px; */
}


p {
margin: 0 0 15px;
}


a {
color: #151514;
 text-decoration: none;
}


a:hover {
text-transform: uppercase;}


blockquote {
font-family: 'Quicksand';
 font-style: italic;
 font-size: 30px;
 font-weight: 400;
 margin-bottom: 20px;
 color: #ff7e22; margin: 40px 50px;
}


.button {
background: #ff7e22;
 border: 1px solid #f5f5f5;
 padding: 10px 20px 8px;
 text-decoration: none;
 text-transform: lowercase;
 letter-spacing: 1px;
 color: #f5f5f5;
 margin: 20px 25px 20px 0;
 display: inline-block;
	transition: all 0.15s ease-out 0s;
 /* 	border-radius:15px; */
}


.button:hover {
background: #f5f5f5;
 color: #ff7e22;
 border: 1px solid #ff7e22; text-decoration: none;
}


.headline {
color: #ff7e22;
 text-transform: uppercase;
}


.subline {
color: #151514;
 font-style: none; text-transform: none;
}


.zentrieren {text-align: center;
}


ul,
ol {
	margin: 0 0 15px 20px;
}


hr {
border: 1px solid #f5f5f5;
	margin: 35px auto;
 max-width: 300px;
}


.alignright {
float: right;
 margin: 5px 0 15px 15px;
}


.alignleft {
float: left;
 margin: 5px 15px 15px 0;
}


h2.line {
position: relative;
 margin-bottom: 45px;
}


h2.line:after {
	position: absolute;
 top: 115%;
 content: "";
 height: 3px;
 background-color: #f5f5f5;
 width: 60px;
 left: 0;
}


.linien_liste {
margin: 15px 0;
	border-top: 1px solid #f5f5f5;
}


.linien_liste li {
list-style: none;
 padding: 12px 0;
 border-bottom: 1px solid #f5f5f5;
}





/* Hero-Teaser */


.hero h1,
.hero h2 {
color: #f5f5f5;
}


.hero h1 {
margin-top: 0px;
}


.hero h2 {
margin-bottom: 30px;
	font-weight: 400;
}





/* Leistungen */
.leistungen h2 {
color: #ff7e22;
}

.leistungen {
text-align: center;
 background: f5f5f5;}


.leistungen p {
text-align: left;
}


.leistungen img {
margin-bottom: 20px;
}


/* Projekte */


.projekte {
text-align: center;
}


.projekte img {
	margin-bottom: 20px;
 -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ filter: grayscale(100%); contrast(.7);
 transition: all .2s ease-in-out;
}


.projekte img:hover {
filter: none;
}

.hero-projekte {
background: #f5f5f5 url('../img/glühbirne.jpeg') center center no-repeat;
 background-size: cover;
 background-attachment: fixed;
 min-hight: 600px;
}


.hero-projekte h1 {
color: #f5f5f5;
 text-align: center;
	padding: 85px 0 0;
}


.hero-projekte blockquote,
.hero-projekte p,
.hero-projekte .subline {
color: #151514;
 max-width: 700px;
 margin: 0 auto 30px;
 text-align: center;
}


.hero-projekte blockquote {
margin-top: 60px;
}





/* Kundenstimme */


.zitat {
text-align: center;
}


.zitat blockquote {
max-width: 900px;
 margin: 30px auto;
}





/* Footer */


footer {
background: rgba(255, 126, 34, 1);
 color: #f5f5f5;
 padding: 50px 0;
}


footer a {
color: #fff;
}


footer h2 {
color: #fff;
}


footer .col_1 {
	text-align: center;
 font-size: 14px;
 color: rgba(255, 255, 255, .7);
 margin: 0;
}


/* Über uns */


.ueber h1 {
margin-top: 30px;
}


.ueber h2 {
font-size: 34px;
 font-size: 2.125rem;
 line-height: 1.6;
 font-weight: 300;
 color: #151514;
}


.team {
text-align: center;
 padding: 75px 0;
}


.team .col_2_3 {
margin: 0 auto;
}


.width-900 {
max-width: 900px;
 margin: 0 auto 50px;
 color: #151514;
}


.team img {
 -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ filter: grayscale(100%); contrast(.7);
 transition: all .2s ease-in-out;
}


.team img:hover {
filter: none;
}





/* Akkordeon – https://codepen.io/vinsongrant/pen/qbGKed  */


.accordion {
margin: 30px auto;
}


.toggle {
display: none;
}


.option {
position: relative;
}


.title,
.content {
-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translateZ(0);
 transform: translateZ(0);
	-webkit-transition: all 0.2s;
 transition: all 0.2s;
}


.title {
background: #151514;
 padding: 10px 0 10px 30px;
	display: flex;
	color: rgba(245, 245, 245, 1);
	font-weight: bold;
}


.title:after,
.title:before {
content: '';
 position: absolute;
	left: 15px;
	top: 17px;
 width: 3px;
 height: 0.75em;
 background-color: #ff7e22;
	transition: all 0.2s;
}


.title:after {
-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}

.content {
max-height: 0;
 overflow: hidden;
 background-color: #151514;
}


.content p {color: rgba(245, 245, 245, 1); margin: 0;
 padding: 0 0 1em;
 font-size: 0.9em;
 line-height: 1.5;
}


.toggle:checked+.title+.content {max-height: 500px;
}


.toggle:checked+.title:before {
	-webkit-transform: rotate(90deg) !important;
 transform: rotate(90deg) !important;
} 

label {
 cursor: pointer;
	margin: 10px 0 10px;
}




@media only screen and (max-width: 950px) 
{
.col_1_2,
 .col_1_3,
 .col_2_3,
 .col_1_4,
 .col_3_4,
 .no-gutter .col_1_2,
	.no-gutter .col_1_3,
 .no-gutter .col_2_3,
	.no-gutter .col_1_4,
 .no-gutter .col_3_4 {
width: 100%;}
	
.column {
margin-left: 0;
}
	
section {
padding: 40px 0;
}

.light {
margin: 40px 0;
}
	
/* html{ font-size: 85%; } */
	
.hero h1 {
font-size: 12vw;
 /* 48px; */
}
	
.hero h2 {
font-size: 1.875rem;
 /* 30px; */
}
	
.news .column,
	footer .wrapper .column {
max-width: 360px;
 margin: 25px auto 50px;
 float: none;
	}

#nav nav {height: auto;}
.main-nav li { list-style: none; margin: 10px; }


/* Responsive Navigation */
	
nav {
height: 0;
 transition:height .2s ease-in-out;
 overflow: hidden;
}

.nav-toggle {
display: flex;
}
 
#nav-open:target .nav-closed {
display: block;
}
	.nav-closed,
	
#nav-closed:target .nav-closed,
	
#nav-open:target .nav-open {
display: none;
}
	
#nav-open:target nav {
height: 500px;
}
	
#navigation {
margin-top: 15px;
	float: none;
 border-bottom: 1px solid #ccc;
}

#navigation li {
display: flex;
	margin-left: 0;
	text-align: left;
 border-top: 1px solid #ccc;
}
	
#navigation li a {
margin-left: 0;
 display: flex;
 padding: 15px 30px;}
	
#navigation ul {
position: relative;
 display: block;
 top: 0;
 left: 0;
 box-shadow: 0 0 0 rgba(0, 0, 0, 0);
		width: 100%;
 margin-bottom: 0;
}
	
#navigation ul li a {
border-bottom: 0;
 padding: 15px 15px 15px 60px;
}
	
header .col_3_4 {
margin-top: 0;
	}
}





/* One Pager */
.main-nav { display: flex; justify-content:space-evenly; flex-wrap: wrap;}
.main-nav li { list-style: none; margin: 10px; }
#nav {
position: sticky; top: 0;
box-shadow: 0px 10px 15px 0 rgba(0, 0, 0, .1);
z-index: 9999;
background: #f5f5f5;
padding: 15px 0;}
.main-nav a {border-radius: 5px; background: #ff7e22; background: rgba(255, 126, 34, 1); border: 1px solid rgba(255, 255, 255, 0.3); color: #f5f5f5; display: inline-block; padding: 5px 25px; transition: all 0.2s;}
ul.main-nav { margin-bottom: 0; }
.nach-oben { margin: 40px 0 -300px; }

#hero{ margin-bottom: 200px; }

#leistungen .column { box-shadow: 0px 10px 20px 0 rgba(0, 0, 0, .1); padding: 35px 35px 25px; border-radius: 10px; transition: all 0.15s ease-out 0s; flex-grow: 1; flex-shrink: 1; /* margin: 25px 2% 25px 2%;*/ }
#leistungen .column:hover {box-shadow: 0px 0px 40px rgba(0, 0, 0, .3); transform: translateY(-5px);  }
#leistungen .row { display: flex; flex-wrap: wrap;}

html {scroll-behavior:smooth;}
#totop {display:none; position: fixed; right:30px; bottom:30px;
background: #ff7e22;
color: #f5f5f5;
padding: 15px;
border: 1px solid #f5f5f5;
border-radius: 15px;
font-size: 30px;
line-height: 1;}
#totop:hover { text-decoration: none; background: #151514; }
/** Wollte man den Button nur im Footer am rechten Rand platzieren, müsste man folgendes ergänzen:
footer{ position: relative; }
#totop{ position: absolute; right: 30px; bottom: 30px; } **/


/* Fullheight */
#full { background: #ecf4f6; height: 100vh; display: flex;
justify-content: center; align-items: center; }


/* Druckformatierung */
@media print {
header, footer {
display: none;
}
p, blockquote{ 
font-family: Arial, sans-serif;
font-size: 10pt;
} 
h1, h2, h3, h4, h5, h6 { 
font-family: Arial, sans-serif; 
font-size: 18pt; 
color: #000;
font-style: normal;
}
section{
padding: 0;
}
}