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

/*
Theme Name: CK Autoglas
Theme URI: https://ck-autoglas.de
Description:  Eine Spalte Responsive mit Headerbild
Author: Beate Eckert-Kraft
Author URI: http://www.contrastmedia.de
Tags: fixed width, three columns, valid XHTML, widgets
*/



/*-------------------------Allgemein--------------------*/
* {
  box-sizing: border-box;
}
body {
    font-family: "Rubik", sans-serif;
    font-size: 1em;
    font-style: normal;
    line-height: 1.5em;
    color: #2e2e2e  ;
  }
  h1, h4 {
  font-family: "Yanone Kaffeesatz", sans-serif;
  }
   h1 {
    font-size: 2.2em;
    font-weight: 600;
    line-height: 1.2em;
    text-transform: uppercase;
    font-style: normal;
    color: #fdef1e;
  }
  h2 {
    font-size: 1.9em;
    font-weight: 500;
    line-height: 1.3em;
    text-transform: uppercase;
    color: #2e2e2e;
  }
  h3 {
    font-size: 1.6em;
    text-transform: uppercase;
    line-height: 1.3em;
    font-weight: 400;
    color: #2e2e2e;
  }
  h3.ea-header a{
    color: #ffffff;
  }
  h4 {
    font-size: 1.6em;
    text-transform: uppercase;
    line-height: 1.3em;
    font-weight: 400;
    color: #818184;
  }
  .dark h2 {
    color:#818184;
  }
  .dark h3 {
    color: #818184;
  }
  h5 {
    font-size: 1.8em;
    line-height: 1.3em;
    color: #2e2e2e;
  }
  a:link {
    color: #fdef1e;
  }
  a:visited {
    color:#2e2e2e;
  }
  a:hover {
    color: #f1e761;
  }
  img {
    max-width: 100%;
    height: auto;
  }
/*-------------------------Layout--------------------*/
 #header {
  position: fixed;
  top: 0.2em  ;
  z-index: 100;
  width: 100%;
  padding: 2.8em 1.8em 2em 1.8em;
  background-color: #dddddf;
  -webkit-box-shadow: 0px 0px 20px 2px rgba(0,0,0,0.09); 
  box-shadow: 0px 0px 20px 2px rgba(0,0,0,0.09);
  color: #ffffff;
 }
 .header-top {
  position: relative;
  list-style: none;
}
.header-top ul {
  padding: 0;
  position: absolute;
  top: -0.3em;
  right: 0;
  margin: 0;
}
.header-top li {
  display: inline-block;
  margin: 0 0.3em;
}

.header-top a.wp-element-button {
  background-color: #fdef1e;
  border: none;
  font-size: 1.2em;
  font-weight: 400;
  line-height: 1em;
  text-transform: uppercase;
  color: #2e2e2e;
  padding: 1em 1em 0.5em 1em;
  border-radius: 0 0 10px 10px;
}
.header-mid {
  height: 4em;
  display: flex;
  flex-basis: 100%;
  flex-flow: row nowrap;
}
.logobox {
  flex-shrink: 0;
  margin: 2.5em 2em 1em 0;
  width: 12em;
}
.custom-header {
  display: none;
}
#main {
  margin-top:5em;
  padding: 0 3em 1.8em ;
 }
 #main-start {
  margin-top:5em;
  padding: 0 1.8em 3em 1.8em;
 }
.container {
  width: 100%;
  position: relative;
  top: 5.5em;
}
.title {
  background-color:rgba(46,46,46,0.3);
  padding: 0.5em 1.8em;
}
 #footer {
  padding: 1.8em;
  background-color: #dddddf;
  -webkit-box-shadow: 0px 0px 15px 2px rgba(0,0,0,0.09); 
  box-shadow: 0px 0px 15px 2px rgba(0,0,0,0.09);
  color: #2e2e2e;
 }

/*-------------------------Klassen--------------------*/
.slogan {
  color: #2e2e2e;
  font-size: 1.3em;
  line-height: 1.3em;
  margin-bottom: 1em;
}
.content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.5em 1.8em 2em 1.8em;
}
.dark {
  width: 100%;
	padding:1em;
	background-color:#2e2e2e;
	color:#ffffff;
}
.backbox {
  width: 100%;
	padding:1em;
  background-color: #ffffff;
  -webkit-box-shadow: 0px 0px 11px 2px rgba(0,0,0,0.09); 
  box-shadow: 0px 0px 11px 2px rgba(0,0,0,0.09);
}
.box {
  width: 100%;
	padding:1em;
}

#sp-ea-103.sp-easy-accordion > .sp-ea-single > .ea-header a {
	color: #ababab;
}
#sp-ea-327.sp-easy-accordion > .sp-ea-single > .ea-header a {
	color: #ababab;
}
#sp-ea-352.sp-easy-accordion > .sp-ea-single > .ea-header a {
	color: #ababab;
}

.iconbox {
  margin: 0 auto;
  padding: 1em 1.8em;
  display: flex;
  flex-basis: 100%;
  flex-direction: row;
  flex-wrap: wrap;
}
.iconbox-left {
  display: grid;
  grid-template-columns: 80% auto;
  justify-content: center;
  text-align: center;
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	text-align:center;*/
}
.icontext-left {
  order:2;
	width:80%;
  
}
.icon-left {
  justify-content: center;
  order:1;
	width:10%;
}
.iconbox-right {
  width: 100%;
	display:flex;	
	flex-direction:row;
	flex-wrap:nowrap;
	text-align: center;*/
  } 
  .icontext-right {
    order:2;
    width:80%;
  }
  .icon-right {
    justify-content: center;
    order:1;
    width:10%;
  } 
  .infobox {
    text-align: left;
  }
  .teaserbox {

  }
  .teaser {
    box-sizing: content-box;
    padding: 0 1em 0.8em 1em;
    background-color: #2e2e2e;
    color: #ffffff;
    text-align: center;
  }
 .contactbox {
  text-align: center;
 } 
 .mid-text {
  font-size: 1.3em;
  line-height: 1.5em;
 }
 .mid-text a {
  color: #2e2e2e;
  text-decoration: none;
 }
 
 .large-text {
  font-size: 1.7em;
  line-height: 1.8em;
 }
a.wp-block-button__link {
  background-color: #fdef1e;
  border: none;
  font-size: 1.2em;
  font-weight: 400;
  line-height: 1em;
  text-transform: uppercase;
  color: #2e2e2e;
  padding: 0.9em 1em 0.5em 1em;
  border-radius: 10px;
}

.infobox {
  text-align: center;
}
.infobox a.wp-block-button__link {
  background-color: #fdef1e;
  border: none;
  font-size: 1em;
  font-weight: 400;
  line-height: 1em;
  text-transform: uppercase;
  color: #2e2e2e;
  padding: 0.8em 1em 0.5em 1em;
  border-radius: 10px;
}
.wawp {
  : linear-gradient(to bottom,  #3dff7b 0%,#26a034 83%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  border: none;background-color: #3dff7b;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#3dff7b+0,26a034+83 */
  background
  font-size: 1.5em;
  font-weight: 400;
  line-height: 1.7em;
  text-transform: none;
  color: #ffffff;
  padding: 0.2em 1em 0.2em 1.2em;
  border-radius: 10px;
  cursor:pointer;
}
.tel-top {
  background-color: #fdef1e;
  border: none;
  padding: 0.5em 1em 0 0.8em;
  border-radius: 0 0 10px 10px;
}
.wawp-top {
  : linear-gradient(to bottom,  #3dff7b 0%,#26a034 83%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  border: none;background-color: #3dff7b;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#3dff7b+0,26a034+83 */
  background: #26a034;
  color: #ffffff;
  padding: 0.7em 1em 0.3em 1em;
  border-radius: 0 0 10px 10px;
  cursor:pointer;
}
.wa .wp-block-button__link {
  background-color: #3dff7b;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#3dff7b+0,26a034+83 */
  background: linear-gradient(to bottom,  #3dff7b 0%,#26a034 83%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  border: none;
  font-size: 1.3em;
  font-weight: 400;
  line-height: 1em;
  text-transform: none;
  color: #ffffff;
  padding: 0.8em 1em 0.5em 1.2em;
  border-radius: 10px;
}
/*-------------------------SVG--------------------*/
.ebene_1 {
  width:30%;
padding-top:1.5em;
}
.st01 {
  fill: #818184;
}
.ebene_2 {width:30%;}
.st0 {
  fill: #fdef1e;
}
.ebene_3 {
  width:15%;
  }
.graph {
	padding-left:4em;
}
  
/*-------------------------Menu--------------------*/

.headertext{
  display:none;
}
.mainnav {
  width:70%;
}
.mainnav ul {
  padding: 0;
  text-align: right;
}
.mainnav li {
  display: inline-block;
  padding-right: 1em; 
}
.mainnav li a:link, .mainnav li a:visited {
  display: block;
  font-size: 1em;
  text-decoration: none;
  text-transform: uppercase;
  color: #2e2e2e;
}
.mainnav li a:hover {
  color: #ff0000;
}
.current_page_item a {
  color:#ff0000;
  !important;
  }
  .main-navigation .current-menu-item a {
    color: #ff0000;
  }
.metanav {
  width: 100%;
  min-width: 280px;
}
.metanav ul {
  padding-left: 0;
  list-style: none;
}
.metanav ul li {
  margin-bottom: 0.5em;
}
.metanav li a:link, .metanav li a:visited {
  color: #2e2e2e;
  text-decoration: none;

}
.metanav li a:hover {
  color: #818184;
  text-decoration: underline;
}
.metanav ul li h4 {

}
/*-----------------------Widgets--------------------*/

.widgets {
  width:100%;
  display: flex;
  flex-flow: row wrap;
}
.foot {
  width:100%;
  list-style: none;

}
.foot ul {
  list-style: none;
  padding-left: 0;
}

/*-------------------------Form--------------------*/

.wp-forms-button {
  background-color: var( #3dff7b;)
}

/*-------------------min-width 600px--------------------*/
@media only screen and (min-width: 600px) {
  h1 {
    font-size: 2.7em;
  }
  header-top ul {
    top: 0;
  }
  .logobox {
    margin: 0 2em 1em 0;
  }
}

/*-------------------min-width 781px--------------------*/

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

#header {
  padding-bottom: 0;
  }
.container {
  position: relative;
  top: -123px;
}
.custom-header {
  padding-top: 1em;
  display: block;
	width: 100%;
	height: auto;
} 

/*.header-top ul {
  top:-3em;
  left: 30em;
}
.header-top a.wp-element-button {
  padding: 0.8em 1em 0.5em 1em;

}*/
#main-start {
  margin-top:-7em;
 }
  ..widgets ul {
  width:33%;
 }
 .foot {
  width: 33%;
   }
.iconbox-left {
  width: 50%;
	text-align:right;
}
.icontext-left {
  width: 90em;
	order:1;
}
.icon-left {
  width: 10%;
	order:2;
}
.iconbox-right {
  width: 50%;
  text-align: left;
}
.icontext-left {
  width: 70%;
}
.icon-left {
  width: 30%;
}
.infotext {
  height:25em;
}
.metanav, .foot {
  display: block;
  width: 30%;
}
}
/*-------------------min-width 1200px--------------------*/

@media only screen and (min-width: 1200px) {
  
  #header {
    top: 0;
  }
  .header-top ul {
    top: -3.2em;
  }
  /*.logobox {
    margin: 0 2em 1em 0;
  }*/
  /*.header-top ul {
    top: -3em;
    left: 20em;

  }
  .header-top a.wp-element-button {
     padding: 1em 1em 0.5em 1em;
  }*/
  /*.custom-header {
    padding-top: 1em;
  }*/
}