@font-face {font-display: swap; font-family: 'Ubuntu'; font-style: normal; font-weight: 300; src: url('./fonts/Ubuntu-Light.woff2') format('woff2');}
@font-face {font-display: swap; font-family: 'Ubuntu'; font-style: normal; font-weight: 400; src: url('./fonts/Ubuntu-Regular.woff2') format('woff2');}
@font-face {font-display: swap; font-family: 'fa_regular'; font-style: normal; font-weight:400; src: url('./fonts/icon-fa-regular-400.woff2') format('woff2');}
@font-face {font-display: swap; font-family: 'fa_solid'; font-style: normal; font-weight:900; src: url('./fonts/icon-fa-solid-900.woff2') format('woff2');}
@font-face {font-display: swap; font-family: 'fa_brands'; font-style: normal; font-weight:400; src: url('./fonts/icon-fa-brands-400.woff2') format('woff2');}

body {margin:0px;}
/*Abschnitt Heater*/
#heater {width:100%; background-image:url('./image/img_heater.webp'); background-repeat:no-repeat; background-size:2100px 100%; background-color:#ffa500;}
/* für <solgan die schönsten Carports für den Norden */
.font_slogan {font-family:'Ubuntu';	font-weight:400; font-size:1.4rem; line-height: 110%; margin-left:10px; margin-right:10px; margin-top:5px; margin-bottom:5px;}
.font_description {	font-family:'Ubuntu'; font-weight:300; font-size:1.2rem; line-height:110%; margin-left:10px; margin-right:10px; margin-top:0px;}
.contain_fullwidth { display:flex; width:100%; justify-content:center;}
.contain_heater_respo { width:65%; display:flex; justify-content:space-between; flex-wrap:wrap; flex-direction:row;	padding-top:10px;}
.img_company { width:240px; height:127px; margin-left:10px;}
.item_slogan { flex:1; color:black;	margin-left:10px; margin-right:10px; margin-top:0px; margin-bottom:0px;	max-width:800px;}
.slanted_strip_noa {background-image:url('./image/img_strip_noa.webp');background-position:center; background-repeat:no-repeat; background-size:100% 60px; height:60px;width:100%;}
.navigation {position:fixed;z-index:500;width:100%;}
.contain_usual_respo {width:65%; display:flex; flex-direction:row; flex-wrap: wrap; justify-content:space-between; align-items: stretch;}
/*listen*/
/* Listenbeginn für alle listen*/
.ul_list_header { list-style-type:none; padding-left:10px;}
.ul_list { list-style-type:none; padding-left:10px;}
/* Abschnitt Liste für Aufzählungen im Kopfbereich, grüner Haken*/
.li_header {font-family:"Ubuntu"; font-size:1.2rem; font-weight:300; line-height:110%;}
.li_header::before {content:"\f00c" ; color:#000000; font-family:"fa_solid";font-weight:bold; font-size:1.1rem; padding-right:10px;}
/*menu*/
.font_menu {font-family:'Ubuntu'; font-weight:300; font-size:1.2rem; line-height:170%; color:#000000}

/*menu*/
.nav_menu {position:fixed;z-index:500;width:100%;}
/*hamburger menu */
.checkbox {display: none;} 
.button_ham {position:relative; background-color:#ffa500; height: 60px; width: 60px; border-radius: 5%; position: fixed; top: 46px; right: 50px; z-index: 2000; text-align: center; cursor: pointer;}
.background {height: 64px; width: 64px; border-radius: 5%; position: fixed; top: 44px; right: 48px; z-index: 1000; background-color:white; opacity: 0.5; transition: transform 0.8s cubic-bezier(0.86, 0, 0.07, 1);}
.nav {height: 100vh; position: fixed; top: 0; right: -60vw; z-index: 1500; opacity: 0; width: 0; transition: all 0.8s;}
.list {position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); list-style: none; text-align: center; width: 100%; background-color:#ffa500;}
.item {margin: 1rem; font-size: 36px;}
/* functionality */
.checkbox:checked ~ .background {transform: scale(80);}
.checkbox:checked ~ .nav {opacity: 1; width: 100%; right: 0;}
/* styling icon */
.icon {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.icon,
.icon::before,
.icon::after {width: 30px; height: 5px; background-color:black; display: inline-block;}
.icon::before,
.icon::after {content: ""; position: absolute; left: 0; transition: all 0.2s;}
.icon::before {top: -0.8rem;}
.icon::after {top: 0.8rem;}
.button_ham:hover icon:before {top: -1rem;}
.button_ham:hover icon::after {top: 1rem;}
.checkbox:checked + .button_ham .icon {background-color: transparent;}
.checkbox:checked + .button_ham .icon::before {top: 0; transform: rotate(135deg);}
.checkbox:checked + .button_ham .icon::after {top: 0; transform: rotate(-135deg);}
a:link, a:visited {text-decoration: none;}


/*footer*/
#footer {width:100%; background-image:url('./image/img_footer.webp');}
.slanted_strip_nob {background-image:url('./image/img_strip_nob.webp');background-position:center; background-repeat:no-repeat; background-size:100% 60px; height:60px;width:100%;}

.contain_fooder_respo {width:65%; display:flex; flex-direction:row; flex-wrap: wrap; justify-content:space-between; align-items: stretch;	}
.item_fooder {flex:1; margin:10px; color:#000000; min-width:250px;}

/* ul list fooder */
.font_fooder_headline {font-family:'Ubuntu'; font-weight:400; font-size:1.1rem; line-height: 110%; margin-left:10px; margin-right:10px;}
.li_fooder, .li_fooder_phone, .li_fooder_mail, .li_fooder_pdf {font-family:"Ubuntu"; color:#000000; font-size:1rem; font-weight:300; line-height:130%;}
.li_fooder_phone::before {content:"\f095" ; font-family:"fa_solid"; font-weight:900; font-size:1rem; padding-right:10px;}
.li_fooder_mail::before {content:"\f0e0" ; font-family:"fa_solid"; font-weight:900; font-size:1rem; padding-right:10px;}
.li_fooder_pdf::before {content:"\f1c1" ; font-family:"fa_solid"; font-weight:900; font-size:1rem; padding-right:10px;}



.a_fooder_facebook { }
.a_fooder_facebook::before {content:"\f09a" ; font-family:"fa_brands"; font-weight:400; font-size:2.5rem; color:#3b5998; margin-left:10px;}

.a_black {color:#000000; font-weight:400; line-height:180%;}	

#product_carport {width:100%; background-image:url('./image/img_carport.webp'); background-repeat:no-repeat; background-size:cover; background-position:right;}
#product_carport_optionen {width:100%; background-image:url('image/carport_optionen.webp'); background-repeat:no-repeat; background-size:cover; background-position:right;}


.contain_product_respo {width:65%; display:flex; flex-direction:column; flex-wrap: wrap; justify-content:space-between; align-items:stretch;}

.item_product {width:60%; flex:1; margin:10px; background: rgba(255,255,255,0.7); border-top: 5px solid white; border-bottom:5px solid white}
.item_basic_equipment {width:60%; flex:1; margin:10px; background: rgba(255,255,255,0.7); border-top: 5px solid white; border-bottom:5px solid white; padding-bottom:20px;}

.img_icon_einzelcarport {height:40px; width:182px; margin-left:10px; margin-top:10px;}

.img_icon_doppelcarport {height:40px; width:318px; margin-left:10px; margin-top:10px;}

.img_icon_reihencarport {height:40px; width:207px; margin-left:10px; margin-top:10px;}

.img_icon_terrassendach {height:40px; width:103px; margin-left:10px; margin-top:10px;}

.img_qr_phone {height:200px; width:200px;}

.img_stefan {height:200px; width:250px; margin:10px;}

.font_h3 {font-family:'Ubuntu';	font-weight:400; font-size:1.4rem; line-height: 110%; margin-left:10px; margin-right:10px; margin-top:5px; margin-bottom:4px;}
.font_text {font-family:'Ubuntu';	font-weight:300; font-size:1.2rem; line-height: 110%; margin-left:10px; margin-right:10px; margin-top:0px; margin-bottom:5px;}
.font_text_flies {font-family:'Ubuntu';	font-weight:300; font-size:1.2rem; line-height: 140%; margin-left:10px; margin-right:10px; margin-top:0px; margin-bottom:5px;}
.font_h4 {font-family:'Ubuntu';	font-weight:400; font-size:1.2rem; line-height: 110%; margin-left:10px; margin-right:10px; margin-top:10px; margin-bottom:4px;}
.font_h5 {font-family:'Ubuntu';	font-weight:300; font-size:1.2rem; line-height: 110%; margin-left:10px; margin-right:10px; margin-top:4px; margin-bottom:4px;}

/*listen product*/
.ul_list_basic { list-style-type:none; padding-left:10px; margin-top:5px;}
.li_basic {font-family:"Ubuntu"; font-size:1.2rem; font-weight:300; line-height:110%;}
.li_basic::before {content:"\f00c" ; color:#000000; font-family:"fa_solid";font-weight:bold; font-size:1.1rem; padding-right:10px;}


/*abschnitt detail und optionen*/

#carport_detail {width:100%; background-image:url('./image/img_carport2.webp');background-repeat:no-repeat; background-size:cover; background-position:right;}
.item_detail {width:auto; flex:1; margin:10px; background: rgba(255,255,255,0.7); border-top: 5px solid white; border-bottom:5px solid white}


/* Call Button */
.callbutton {background-color:#A30000; border-radius:28px; display:inline-block; cursor:pointer; color:white; font-family:"Ubuntu"; font-size:1.3rem; font-weight:400; padding:14px;                      
	text-decoration:none; margin:10px;}

.callbutton::before {content:"\f095" ; font-family:"fa_solid"; font-size:1.3rem; padding:14px; color:white; margin-left:5px;}
.callbutton:hover {background-color:rgb(0, 97, 0);}
.callbutton:active {position:relative;top:1px;}
/* Ende */




#product_terrassendach {width:100%; background-image:url('./image/img_terrassendach.webp'); 
background-repeat:no-repeat; background-size:cover; background-position:right;
}



/*Button Detail und Optionen */
.button_detail {

  border: none;
  
  font-family:'Ubuntu', Arial, Helvetica, sans-serif;
	font-weight: 400;
	font-style:normal;
	font-size:1.2rem;
    line-height: 150%; 	
    letter-spacing:normal; 

   
  
  background-color:#508fef;
  color:black;
  text-decoration: none;
  padding: 12px;
  border-radius: 3px;
  border-bottom: 2px solid rgba(0, 0, 0, 0);
  margin-top:10px;
  margin-left:10px;
}

.button_detail:hover, button_detail:focus {
  cursor: pointer;
  opacity: 0.75;
}


/*abschnitt Konatkt*/
#kontakt {width:100%; background-image:url('./image/img_kontakt.webp'); background-repeat:no-repeat; background-size:cover; background-position:right;}


.li_phone_kontakt {font-family:"Ubuntu"; font-size:1.2rem; font-weight:400; line-height:110%; margin-top:10px;}
.li_phone_kontakt::before {content:"\f095" ; color:#000000; font-family:"fa_solid";font-weight:bold; font-size:1.1rem; padding-right:10px;}


.li_mail_kontakt {font-family:"Ubuntu"; font-size:1.2rem; font-weight:400; line-height:110%; margin-top:10px;}
.li_mail_kontakt::before {content:"\f0e0" ; color:#000000; font-family:"fa_solid";font-weight:bold; font-size:1.1rem; padding-right:10px;}




/*reprosive*/
/*Breite*/


/*reprosive*/
/*Breite*/
@media only screen and (min-width: 240px) and (max-width: 801px) {.contain_heater_respo, .contain_usual_respo, .contain_fooder_respo, .contain_product_respo {width:99%;}
.item_product, .item_basic_equipment{width:auto; }


}
@media only screen and (min-width: 802px) and (max-width: 1225px) {.contain_heater_respo, .contain_usual_respo, .contain_fooder_respo, .contain_product_respo {width:90%;}}
@media only screen and (min-width: 1925px) and (max-width: 3000px) {.contain_heater_respo, .contain_usual_respo, .contain_fooder_respo, .contain_product_respo {width:65%;}}
/*logo und menubutton*/
@media only screen and (min-width: 240px) and (max-width: 321px) {.img_company {width:185px; height:95px;} .button_ham {height: 50px; width: 50px; top: 34px; right: 34px;}
.background {height: 54px; width: 54px; top: 32px; right: 32px;}
}

@media only screen and (min-width: 322px) and (max-width: 410px) {.img_company {width:210px; height:111px;} .button_ham {height: 50px; width: 50px; top: 43px; right: 34px;}
.background {height: 54px; width: 54px; top: 41px; right: 32px;}
}

@media only screen and (min-width: 240px) and (max-width: 420px) {
.ul_list_header {display:none;}
.font_description {display:none;}
.slanted_strip_noa, .slanted_strip_nob {background-size:100% 30px; height:30px;width:100%;}
#product_carport {background-image:url('./image/img_carport2_mobile.webp')}
#product_terrassendach {background-image:url('./image/img_terrassendach_mobile.webp'); }
#carport_detail {background-image:url('./image/img_carport_mobile.webp');}
#kontakt {background-image:url('./image/img_kontakt_mobile.webp')}
.img_icon_einzelcarport {height:34px; width:155px;}
.img_icon_doppelcarport {height:34px; width:270px;}
.img_icon_reihencarport {height:34px; width:176px;}
.img_icon_terrassendach {height:34px; width:88px;}
.img_qr_phone {display:none;}
}