@charset "utf-8";
/* CSS Document */


html, body {
	height:auto;
	margin:0;
	padding:0;
}

body {
	background-color:#565656;
	background-color:#fff;
}

.wrapper {
	max-width:920px;
	min-width:240px;
	height:auto;
	margin-left:auto;
	margin-right:auto;
	/*box-shadow:0px 0px 32px rgba(50,50,50,0.35);*/
}

.wrapper_header {
	max-width:1060px;
	min-width:240px;
	height:auto;
	margin-left:auto;
	margin-right:auto;
	/*box-shadow:0px 0px 32px rgba(50,50,50,0.35);*/
}


.content_image_container {
	position:relative;
	width:100%;
	height:160px;
}
.content_image {
	position:relative;
	width:100%;
	height:160px;
	overflow:hidden;
	text-align:center;
	overflow:hidden;
	background-image:url(../images/Fachwerk.png);
	background-size:920px auto;
	background-repeat:no-repeat;
}
.content_image_low {
	background-position:50% 98%;
}
.content_image_med {
	background-position:50% 60%;
}
.content_image_high {
	background-position:50% -1%;
}
.content_image_text_container {
	position:relative;
	width:100%;
	height:200px;
	z-index:10;
}
.content_image_text {
	width:100%;
	height:200px;
	overflow:hidden;
	text-align:center;
}
.image_holzmaserung {
	width:100%;
	height:auto;
}
.content_image_label {
	width:100%;
	height:auto;
	text-align:center;
	padding-top:16px;
	padding-bottom:16px;
}
.abgedunkelt {
	filter: brightness(70%);
	/* Aktuell nicht benoetigt */
}
.content_arrow_container {
	width:48px;
	height:auto;
	margin-left:auto;
	margin-right:auto;
	padding-bottom:24px;
	display:block;
}
.content_arrow {
	width:48px;
	height:48px;
	cursor:pointer;
}
.arrow_hover {
	cursor:pointer;
}
.hoverable {
	cursor:pointer;
}
.klapp_text {
	display:block;
	width:auto;
	height:0px;
	overflow:hidden;
	transition: margin-bottom 1.2s ease-in-out, height 1.2s ease;
}
.headline_left_container {
	position:relative;
	height:auto;
	margin-right:50%;
}
.headline_left_content {
	position:relative;
	height:30px;
	margin-right:80px;
	padding:2px 0px;
	padding-right:16px;
	font-family:Cinzel, Arial, sans-serif;
	text-align:right;
	background-color:#6c3701;
	background-color:#5f3b2f;
	color:#FFF;
	font-size:24px;
}

.off_center_container {
	position:relative;
	width:100%;
	height:200px;;
}
.off_center_left_container {
	position:relative;
	float:left;
	max-width:348px;
	height:auto;
	overflow:hidden;
}
.off_center_right_container {
	position:relative;
	float:left;
	max-width:484px;
	padding-left:24px;
	padding-top:0px;
	height:auto;
	clear:none;
}

.off_center_left_content {
	float:right;
	width:auto;
	height:auto;
}
.off_center_right_content {
	float:left;
	height:auto;
	width:auto;
	text-align:left;
	vertical-align:top;
}

.selectableImage_mainImage {
	width:100%;
	height:auto;
	object-fit:cover;
}
.selectableImage_container {
	float:left;
	cursor:pointer;
	margin-right:16px;
	margin-top:24px;
}
.selectableImage_image {
	width:140px;
	height:81px;
	object-fit:cover;
}

.picBG {
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background-color:#333;
	background: rgba(0,0,0,0.85);
	z-index:82;
	display:none;
	/*transition: background 2s ease-in-out;*/
	/*
	opacity:0.8;
	transition:opacity 2.3s;
	*/
}
.pictureContainer {
	position:fixed;
	width:100%;
	height:100%;
}

.header {
	width:100%;
	height:auto;
	background-color:#FFF;
}

.header_navi_container {
	position:relative;
	width:100%;
	height:55px;
}

.header_image_container {
	position:relative;
	width:100%;
	height:325px;
}

.header_image {
	position:absolute;
	width:100%;
	height:325px;
	overflow:hidden;
	background-image:url(../images/SV_Holzbau_Titel_Home.jpg);
	background-position:center;
	background-size:1060px auto;
}
.header_image_logo {
	position:absolute;
	width:auto;
	height:auto;
	margin-left:52px;
	margin-top:-5px;
	padding-top:5px;
	padding-left:4px;
	padding-right:4px;
	padding-bottom:4px;
	background-color:#FFF;
	border-radius:0px 0px 2px 2px;
}
.header_image_label {
	position:absolute;
	width:auto;
	height:auto;
	right:104px;
	top:230px;
	padding-top:5px;
	padding-left:12px;
	padding-right:12px;
	padding-bottom:6px;
	background-color:#FFF;
	border-radius:2px 2px 2px 2px;
}

.header_navi {
	width:auto;
	height:auto;
	float:right;
	padding-top:24px;
	padding-right:16px;
	z-index:11;
	display:block;
}
.header_navi_element {
	width:auto;
	height:auto;
	float:right;
	padding-left:32px;
	padding-bottom:12px;
	z-index:12;
}





.section_headline {
	width:100%;
	height:auto;
	text-align:center;
	display:block;
	padding-top:16px;
}

.trenner {
	margin:32px 32px;
	border-top:2px solid #5f3b2f;
}





.titlePic {
}

.naviContainer {
	float:left;
	padding:12px 8px 10px 32px;
	background-color:#f7901e;
	background-color:#f7a31e;
}

.content {
	background-color:#FFF;
}

.content_Trenner {
	margin-top:64px;
	background-color:#FFF;
	border-top:2px solid #5f3b2f;
}

.section {
	width:auto;
	height:auto;
	padding:32px 32px 32px 32px;
	display:block;
}
.section_half {
	float:left;
	width:50%;
	height:auto;
}
.section_left_txt {
	float:left;
	width:40%;
	height:auto;
}
.section_middle_img {
	float:left;
	width:20%;
	height:auto;
}
.section_right_txt {
	float:left;
	width:40%;
	height:auto;
}

.navi_button {
	float:left;
	padding:6px 32px 6px 0px;
}

.navi_pic_area_full {
	max-width:892px;
}
.navi_pic_area_half {
	float:left;
	width:50%;
}
.navi_pic_container {
	position:relative;
	max-width:396px;
	min-width:280px;
	height:168px;
	margin-right:64px;
	margin-bottom:64px;
}
.navi_pic_cut {
	width:100%;
	height:100%;
	overflow:hidden;
	z-index:1;
	cursor:pointer;
}
.navi_pic_img {
	width:100%;
	height:auto;
}
.navi_pic_offset_label {
	position:relative;
	float:left;
	top:-16px;
	left:-32px;
	width:auto;
	height:auto;
	padding:6px 12px;
	background-color:#5f3b2f;
	z-index:2;
	cursor:pointer;
}

.contact_bar {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:center;
	align-items:flex-start;
	align-content:flex-start;
	position:relative;
	width:auto;
	height:auto;
	display:block;
	padding:32px;
}

.contact_bar_section {
	display:flex;
	flex-grow:1;
	width:auto;
	height:auto;
	display:block;
	text-align:center;
	padding:16px;
}
.contact_bar_section_start {
	width:220px;
	height:220px;
	display:inline-block;
	vertical-align:middle;
	text-align:center;
	color:#f7901e;
	font-family:Verdana, Geneva, sans-serif;
	font-family:"Arial Black", Gadget, sans-serif;
	font-size:38px;
	font-weight:bold;
	border:2px solid #f7901e;
}
.contact_bar_section_start:hover {
	cursor:pointer;
	background-color:#f7901e;
	color:#FFF;
}
.contact_bar_block_headline {
	padding-top:24px;
}
.contact_bar_block {
	padding-top:8px;
}
.contact_bar_headline {
	font-family:Verdana, Geneva, sans-serif;
	font-size:34px;
	font-weight:lighter;
	color:#936234;
	text-decoration:underline;
	text-underline-offset:14px;
	line-height:60px;
}
.contact_bar_text {
	font-family:Verdana, Geneva, sans-serif;
	font-size:18px;
	color:#4f4b47;
	line-height:30px;
}
.contact_bar_text_mail {
	font-family:Verdana, Geneva, sans-serif;
	font-size:18px;
	color:#4f4b47;
	line-height:30px;
	text-decoration:none;
}
.contact_bar_text_mail:hover {
	cursor:pointer;
	color:#f7901e;
}


ul {
	line-height:22px;
}

li {
	list-style:disc;
	font-size:20px;
	color:#5f3b2f;
}
.circleSelectable {
	list-style:circle;
	font-size:22px;
	color:#f7901e;
}

.circleSelectable:hover {
	list-style:disc;
	cursor:pointer;
}

.list_dreieck {
	font-size:22px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:16px;
	color:#231f20;
	padding-bottom:6px;
}
.list_dreieck:hover {
	cursor:pointer;
	color:#f59602;
}
.dreieck_Symbol {
	float:left;
	width:0px;
	height:0px;
	-webkit-transform:rotate(360deg);
	border-style:solid;
	border-width:5px 0px 5px 8.6px;
	border-color:transparent transparent transparent #f59602;
	margin-top:5px;
	margin-right:8px;
}
.pfeil_runter {
	float:left;
	box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(var(--ggs,1));
    width: 22px;
    height: 22px;
    border: 2px solid transparent;
    border-radius: 100px;
	margin-right:4px;
	color:#f59602;
}
.pfeil_runter::after {
	content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    width: 10px;
    height: 10px;
    border-bottom: 2px solid;
    border-right: 2px solid;
    transform: rotate(45deg);
    left: 4px;
    top: 2px;
}
.pfeil_rechts {
	float:left;
    box-sizing: border-box;
    position: relative;
    display: block;
    transform: scale(var(--ggs,1));
    width: 22px;
    height: 22px;
    border: 2px solid transparent;
    border-radius: 100px;
	margin-right:4px;
	color:#f59602;
}
.pfeil_rechts::after {
	content: "";
    display: block;
    box-sizing: border-box;
    position: absolute;
    width: 10px;
    height: 10px;
    border-bottom: 2px solid;
    border-right: 2px solid;
    transform: rotate(-45deg);
    right: 6px;
    top: 4px;
}

.dreieck_Symbol_ausgeklappt {
	float:left;
	width:0px;
	height:0px;
	-webkit-transform:rotate(360deg);
	border-style:solid;
	border-width:8.5px 5px 0px 5px;
	border-color:#f59602 transparent transparent transparent;
	margin-top:6px;
	margin-right:8px;
	margin-left:-2px;
}
.aufklapptext {
}

.certificate_container {
	width:100%;
	height:auto;
	overflow: auto;
}

.section_center {
	float:left;
	width:100%;
	height:auto;
	display:block;
	margin-top:40px;
	margin-bottom:64px;
}
.center_content {
	width:auto;
	height:auto;
	display:block;
}

.certificate_thumbnail {
	float:left;
	width:320px;
	height:auto;
	/*box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);*/
	box-shadow: 2px 2px 6px silver;
	margin:32px;
	display:block;
}

.footer {
	position:relative;
	width:100%;
	height:auto;
}

.footer_logo {
	width:160px;
	height:auto;
	margin-left:auto;
	margin-right:auto;
	overflow:hidden;
}
.footer_logo_mit_FW {
	width:420px;
	height:151px;
	margin-left:auto;
	margin-right:auto;
	overflow:hidden;
}
.footerBalken {
	position:releative;
	bottom:0px;
	width:100%;
	margin-top:-31px;
	height:31px;
	background-color:#ddc7b3;
	display:block;
}
.footer_extension {
	float:left;
	width:100%;
	height:auto;
	min-height:64px;
	background-color:#f8bf00;
	background-color:#f7a31e;
	padding-bottom:32px;
	background: linear-gradient(to bottom, rgba(247,163,30,1), rgba(248,191,0,1));
}
table, tr, td {
	padding-right: 8px;
	padding-top: 4px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:16px;
	color:#231f20;
	border:none;
	vertical-align:top;
	vertical-align:text-top;
	padding:6px 6px;
	border-radius:6px;
}
.table_color_yellow {
	background-color:#fded9f;
	background-color:#FEA;
}
.table_color_light_blue {
	background-color:#e1efff;
}
.rund {
	border-radius: 100%;
	-webkit-border-radius:100%;
	-moz-border-radius:100%;
}
.gruppeUebung {
	width:288px;
	height:auto;
	float:right;
	margin:0px 8px 8px 8px;
	border:2px solid #231f20;
}
.mobile_wrap {
	clear:none;
}
.desktop_version {
	display:block;
}
.mobile_version {
	display:none;
}
#header_top_navi_container {
	position:fixed;
	width:340px;
	height:auto;
	top:16px;
	left:-296px;
	z-index:80;
	transition: left 0.5s;
	display:none;
}
.header_top_navi {
	width:292px;
	height:auto;
	float:left;
	padding-top:16px;
	padding-bottom:16px;
	background-color:#f8bf00;
	background-color:#565656;
	text-align:center;
	transition: right 0.5s;
	border-radius:0px 0px 10px 0px;
	box-shadow:4px 4px 3px rgba(0, 0, 0, 0.2);
}
.header_top_navi_button {
	width:40px;
	height:40px;
	padding:4px;
	float:left;
	background-color:#f8bf00;
	background-color:#565656;
	border-radius:0px 6px 6px 0px;
	/*box-shadow:4px 4px 5px rgba(0, 0, 0, 0.3);*/
	box-shadow:4px 4px 3px rgba(0, 0, 0, 0.2);
}
.header_top_navi_button:hover {
	cursor:pointer;
}
.flexImagesContainer {
	display:flex;
	flex-direction:row;
	justify-content:center;
	justify-content:space-around;
	align-items:flex-start;
	flex-wrap: wrap;
}
.flexImages {
	flex-grow:0;
	flex-shrink:0;
	flex-basis:auto;
	padding:8px;
}