@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(./fonts/Open_Sans_italic_300_800.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(./fonts/Open_Sans_normal_300_800.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



/* ---------------------------------------------- */
* {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  color: rgba(255,255,255,1);
}

*, *:before, *:after { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin: 0; padding: 0; position: relative; border: none; outline: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }  
img { vertical-align: middle; }
html { font-size: 1px; }
body { font-size: 20rem; line-height: 1.5; font-weight: normal; }
html, body { min-height: 100%; height: 100%; }


.row { width: 100%; display: flex; flex-flow: row wrap; justify-content: space-between; margin-bottom: 16rem; }
.column {  } .column:first-child {  } .column:last-child {  }
.column_1_1 { width: 100%; }
.column_1_2 { width: 50%; } .column_2_2 { width: 100%; }
.column_1_3 { width: 33.33%; } .column_2_3 { width: 66.66%; } .column_3_3 { width: 100%; } 
.column_1_4 { width: 25%; } .column_2_4 { width: 50%; } .column_3_4 { width: 75%; } .column_4_4 { width: 100%; }
.column_1_5 { width: 20%; } .column_2_5 { width: 40%; } .column_3_5 { width: 60%; } .column_4_5 { width: 80%; } .column_5_5 { width: 100%; }
.column_1_6 { width: 16.66%; } .column_2_6 { width: 33.33%; } .column_3_6 { width: 50%; } .column_4_6 { width: 66.66%; } .column_5_6 { width: 83.33%; } .column_6_6 { width: 100%; }
.column_1_7 { width: 14.29%; } .column_2_7 { width: 28.57%; } .column_3_7 { width: 42.86%; } .column_4_7 { width: 57.14%; } .column_5_7 { width: 71.42%; } .column_6_7 { width: 85.71%; } .column_7_7 { width: 100%; }
.column_1_8 { width: 12.5%; } .column_2_8 { width: 25%; } .column_3_8 { width: 37.5%; } .column_4_8 { width: 50%; } .column_5_8 { width: 62.5%; } .column_6_8 { width: 75%; } .column_7_8 { width: 87.5%; } .column_8_8 { width: 100%; }

.boxed { width: 92%; max-width: 1300px; margin: 0 auto; }
.full { width: 100%; }
.fixed { position: fixed; z-index: 1000; }

.align_left { text-align: left; }
.align_center { text-align: center; }
.align_right { text-align: right; }


/* ----------------------------------------------------------- */
.bg_weiss 		{ background-color: rgba(255,255,255,1); }
.weiss 			{ color: rgba(255,255,255,1); }
.bg_orange 		{ background-color: rgba(220,145,27,1); }
.orange 		{ color: rgba(220,145,27,1); }

.hintergrund { position: absolute; top: 0; left: 0; background-color: rgba(255,255,255,1); width: 100vw; min-width: 100vw; min-height: 100vh; height: 100vh; background-image: url('PROFITECH-Metall-Elektro-Heizung---Hintergrund.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; z-index: -1; }

.header { padding-top: 5vh; }
.logo { max-width: 350px; height: auto; }
.info { font-size: 16px; text-align: right; }

.inhalt { position: absolute; top: 50%; transform: translateY(-50%); }
.inhalt h1 { font-size: 50rem; font-weight: 600; font-style: normal; line-height: 1.4; margin: 0px; }
.inhalt p { padding-top: 40px; }

.inhalt_info { display: none; font-size: 14rem; }

.button { font-size: 18rem; text-decoration: none; display: inline-block; padding: 10px 30px; color: rgba(255,255,255,1); background-color: rgba(255,255,255,0); border-radius: 30px; border: 1px rgba(255,255,255,1) solid; transition: all 0.3s; }
.button:hover { background-color: rgba(220,145,27,0); color: rgba(220,145,27,1); text-decoration: none; border: 1px rgba(220,145,27,1) solid;}
.button_link strong { transition: all 0.3s; }
.button_link:hover,
.button_link:hover strong { color: rgba(220,145,27,0); }

.footer { position: absolute; bottom: 5vh; left: 0; }
.footer, 
.footer * { font-size: 14rem; text-decoration: none; }
.footer a:hover { color: rgba(220,145,27,1); }
.footer img { width: auto; height: 15rem; }

/* --------- */
.icons { position: absolute; top: 50%; right: 0; transform: translateY(-75%); background-color: transparent; }
.icons, 
.icons * { color: transparent; font-size: 1px; } 
.icons a {
	display: block; width: 50px; height: 50px; content: ''; /*border: 1px #FFF solid; border-radius: 50%;*/
	background-size: 100%  100%; background-position: center; background-repeat: no-repeat;
}
.icons a:hover {  /*border: 1px rgba(220,145,27,1) solid; border-radius: 50%;*/ }
/* --------- */
.icon_mail { background-image: url('mail.svg'); margin-bottom: 20px; }
.icon_mail:hover { background-image: url('mail_orange.svg'); }
.icon_tel { background-image: url('telefon.svg'); }
.icon_tel:hover { background-image: url('telefon_orange.svg'); }

/* --------- */
.icons_header { display: none; position: absolute; top: 50%; right: 0; transform: translateY(-75%); background-color: transparent; }
.icons_header, 
.icons_header * { color: transparent; font-size: 1px; }
.icons_header a { 
	display: block; width: 35px; height: 35px; content: ''; /*border: 1px #FFF solid; border-radius: 50%;*/
	background-size: 100%  100%; background-position: center; background-repeat: no-repeat;
}
.icons_header a:hover { /* border: 1px rgba(220,145,27,1) solid; border-radius: 50%; */ }





/* --------- */
@media (max-width: 1024px) {
	.logo { max-width: 250px; }
	.info { font-size: 14px; }
	.inhalt h1 { font-size: 40rem; }
	.button { font-size: 14rem; }
	.icons a { width: 40px; height: 40px; }
	.footer, .footer * { font-size: 11rem; }
	.footer img { height: 12rem; }
}

@media (max-width: 800px) {
	.logo { max-width: 200px; }
	.info { font-size: 12px; }
	.inhalt h1 { font-size: 30rem; }
	.footer, .footer * { font-size: 10rem; }
	.footer img { height: 11rem; }
}

.hide_on_mobile { display: block; }
.hide_on_mobile.inline { display: inline-block; }
.show_on_mobile { display: none; }
.show_on_mobile.inline { display: none; }

@media (max-width: 620px) {
	.hide_on_mobile { display: none; }
	.hide_on_mobile.inline { display: none; }
	.show_on_mobile { display: block; }
	.show_on_mobile.inline { display: inline-block; }
	.info { display: none; }
	.icons { display: none; }
	.icons_header { display: block; margin-top: 10px; }
	.icons_header a { display: inline-block; margin: 0px 0px 0px 15px; }
}

@media (max-width: 420px) {
	.icons_header a { width: 30px; height: 30px; }
	.inhalt h1 { font-size: 19rem; }
	.button { font-size: 13rem; padding: 3px 15px; }
	.inhalt_info { display: block; font-size: 9rem; margin-top: 40px; }
	.inhalt p { padding-top: 20px; }
}