


@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: 300; */
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  color: rgba(0,0,0,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%; }

.boxed { width: 90%; max-width: 1000px; 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; }

.uppercase { text-transform: uppercase; }

a { text-decoration: none; }

strong { font-weight: 600; }


/* ---------------------------------------------------------- */
.content_wrapper {
	width: 100%;
	height: auto;
	min-height: 100vh;
	background-image: url('TT-Handels-GmbH-Hintergrund.jpg'); 
	background-size: cover; 
	/*background-position: right center; */
	/* background-position: left center; */
	background-position: center; 
	background-repeat: no-repeat; 
}

.header { 
	width: 100%;
	height: auto;
	padding: 30px 0;
	background-color: rgba(255,255,255,1);
	z-index: 1;
}

.logo {
	max-width: 200px;
	height: auto;
}

.info {
	position: absolute;
	bottom: -150px;
	right: 0;
	/*z-index: 1;*/
}

.lang_wrapper {
	position: absolute;
	top: -5px;
	right: 10px;
}

.lang_wrapper,
.lang_wrapper * {
	font-weight: 600;
}
.lang_wrapper span,
.lang_wrapper a {
	opacity: 0.3;
	transition: opacity 0.3s; 
}
.lang_wrapper a.aktiv {
	opacity: 1;
}
.lang_wrapper a:hover{
	opacity: 1;
}


.inhalt {
	
}
.inhalt span.bg_wrapper {
	background-color: rgba(244, 244, 244, 0.85) !important;
	box-shadow: 0 0 50px 65px rgba(244, 244, 244, 0.85);
	
	background-color: rgba(255, 255, 255, 0.87) !important;
	box-shadow: 0 0 100px 100px rgba(255, 255, 255, 0.9);
	/**/
	display: inline-block;
}

.inhalt .column_1_1 {
	padding-left: 97px;
}
 
.inhalt h1 { 
	font-size: 40rem; 
	font-weight: 300; 
	font-style: normal; 
	line-height: 1.4; 
	letter-spacing: 1px;
	margin: 0px;
}

.inhalt p { 
	max-width: 600px; 
}

.footernavigation {
	font-size: 14px;
}


/* -------------------------------------------------- */
@media (max-width: 900px) {
	
	.info {
		width: 160px;
		height: auto;
		position: absolute;
		bottom: -100px;
		right: 0;
	}
	
	.inhalt .column_1_1 {
		padding-left: 0px;
	}
	
	.inhalt p { 
		max-width: 100%; 
	}
	
}

@media (max-width: 600px) {
	
	.logo {
		max-width: 170px;
	}
	
	.info {
		width: 120px;
		bottom: -60px;
	}
	
	.header_spacer {
		height: 50px !important;
	}
	
	.content_wrapper {
		background-position: -650px center;
	}
	
}


@media (max-width: 425px) {
	
	.logo {
		max-width: 140px;
	}
	
	.info {
		width: 100px;
		bottom: -60px;
	}
	
}

