/*** Custom CSS Rules ISTOGU Template Joomla 4 ***/

/**** FONTS ****/
@font-face {
    font-family: 'OpenSans-Extrabold';
    src: local('Open Sans Extrabold'), local('OpenSans-Extrabold'),
		url('../../../fonts/OpenSans-Extrabold.woff2') format('woff2'),
        url('../../../fonts/OpenSans-Extrabold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
	font-family: 'Calibri';
	src: local('Calibri Light'), local('Calibri-Light'),
		url('../../../Calibri-Light.woff2') format('woff2'),
		url('../../../Calibri-Light.woff') format('woff');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Calibri';
	src: local('Calibri Bold'), local('Calibri-Bold'),
		url('../../../Calibri-Bold.woff2') format('woff2'),
		url('../../../Calibri-Bold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
	font-family: 'OpenSans-Extrabold';
    font-weight: normal;
    font-style: normal;
}
p, span, li, input, label {
	font-family: 'Calibri';
	font-weight: 300;
	font-style: normal;
}
strong, b, a {
	font-family: 'Calibri';
	font-weight: bold;
	font-style: normal;
}
.layout-boxed .body-innerwrapper {
	margin: 0 auto;
	box-shadow: 0 0 25px rgba(0, 0, 0, 0.25);
}
/**** HEADER ****/
#sp-redbar {
	max-height: 10px;
	background-color: #C01718;
}
#sp-header {
	height: 85px;
}
#sp-header .logo {
	height: 85px;
}
#sp-header .sp-module {
	margin-left: 0px;
}
#sp-header .headerkontakt {
	display: flex;
}
#sp-header .headerkontakt li {
	margin-right: 20px;
}
#sp-header .headerkontakt .konblock {
	display: flex;
	margin-bottom: 0px;
	list-style: none;
	padding-left: 0px;
}
#sp-header .headerkontakt .konblock .kontext {
	line-height: 15px;
	font-weight: bold;
}
#sp-header .headerkontakt .konblock img {
	width: 30px;
	height: 30px;
	margin-right: 5px;
}
#sp-header .headerkontakt .konblock a {
	display: flex;
	align-content: center;
	align-items: center;
}
#sp-header #sp-menu #offcanvas-toggler {
	display: none !important;
}

/**** HERO ****/
#hero h1 {
	color: #fff;
	text-transform: uppercase;
	font-size: 23px;
	padding-left: 15px;
}
#hero h1::before {
	content: '';
	width: 8px;
	height: 20px;
	position: absolute;
	background-color: #C01718;
	margin-left: -15px;
	margin-top: 5px;
}
#hero p {
	margin-bottom: 0px;
	color: #fff;
}
#hero-anfrage {
	padding: 15px 25px 15px 35px;
	display: block;
	position: absolute;
	right: 0;
	bottom: -100px;
	background: #C01718;
}
#hero-anfrage span {
	font-family: 'OpenSans-Extrabold';
	text-transform: uppercase;
	color: #fff;
	cursor: pointer;
}
#hero-anfrage::before {
	content: '';
	background: url("../../../images/icon-hand-button.gif") no-repeat;
	background-size: contain;
	height: 60px;
	width: 43px;
	position: absolute;
	margin-left: -50px;
	margin-top: 0px;
}
/**** LEISTUNGEN ****/
h2.borderleft {
	text-transform: uppercase;
	font-size: 23px;
	padding-left: 15px;
}
h2.borderleft::before {
	content: '';
	width: 8px;
	height: 20px;
	position: absolute;
	background-color: #C01718;
	margin-left: -15px;
	margin-top: 3px;
}
.lblocke {
	display: flex;
	justify-content: space-between;
}
.lblocke .lblock {
	padding: 15px;
	flex: 0 0 32%;
	background: url(../../../images/pattern-3.gif) repeat #f1f1f1;
	background-size: 5px;
	cursor: pointer;
}
.lblocke .lblock .schatten {
	width: 380px;
	height: 120px;
	z-index: -1;
	background-color: #0005;
	filter: blur(15px);
	border-radius: 100%;
	opacity: 0;
	transition: all 300ms ease-in-out;
	position: absolute;
	margin-top: -130px;
}
.lblocke .lblock:hover .schatten {
	margin-top: -100px;
	opacity: 1;
}
.lblocke .lblock .limage {
	margin-bottom: 10px;
}
.lblocke .lblock h3 {
	margin-bottom: 0px;
	font-size: 20px;
	text-transform: uppercase;
}

/*TEXTBLÖCKE*/
.leblock {
	margin-top: 0px;
	opacity: 0;
	visibility: hidden;
	height: 0px;
	transition: all 250ms ease-in-out;
}
.leblock.aktiv {
	margin-top: 30px;
	opacity: 1;
	visibility: visible;
	height: auto;
}
.leblock .leblock-headline {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
}
.leblock .leblock-headline img {
	width: 35px;
	margin-right: 10px;
}
.leblock .leblock-headline h2 {
	text-transform: uppercase;
	font-size: 23px;
	margin-bottom: 0px;
}
.leblock .leblock-headline h2 span {
	font-family: 'OpenSans-Extrabold';
	color: #C01718;
}
.leblock .leblock-zusatz {
	padding: 20px;
	background: url(../../../images/pattern-3.gif) repeat #f1f1f1;
	background-size: 5px;
	margin-top: 30px;
	display: flex;
	align-items: center;
}
.leblock .leblock-zusatz img {
	margin-right: 20px;
	height: 98px;
}
.leblock .leblock-zusatz p {
	margin-bottom: 0px;
}
/**** BILDER VERGLEICH GALERIE ****/
.img-wrap {
	position: relative;
	height: 450px;
	overflow: hidden;
	border: 2px solid #000;
}
.img-one-bg {
	background: url("../../../images/galerie/istogu-galerie-vergleich-vorher.jpg") no-repeat center center;
	height: 450px;
	display: inline-block;
	width: 100%;
	position: absolute;
	clip: rect(0px, 315px, 630px, 0px);
	z-index: 1;
	background-size: cover;
}
.img-two-bg {
	background: url("../../../images/galerie/istogu-galerie-vergleich-nachher.jpg") no-repeat center center;
	height: 450px;
	display: inline-block;
	width: 100%;
	position: absolute;
	background-size: cover;
}
.split span {
	background: url(../../../images/galerie/vert-scroll-arrow.gif) #000;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 60%;
	cursor: ew-resize;
	position: absolute;
	width: 30px;
	height: 30px;
	content: "";
	display: block;
	top: calc(50% - 16px);
	left: calc(50% - 16px);
}
.split {
	height: 100%;
	position: absolute;
	top: 0;
	z-index: 20;
	left: 50%;
}
.split::before {
	background-color: #000;
	content: "";
	display: block;
	height: 100%;
	width: 2px;
}
.sppb-gallery li {
	flex-basis: 33.3%;
	margin: 0px !important;
	padding: 10px;
}
.sppb-gallery {
	display: flex;
	justify-content: space-between !important;
}

/***** KONTAKTFELDER *****/
#kontaktfelder {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
}
#kontaktfelder .kontaktfeld {
	width: 32%;
	overflow: hidden;
	background: url(../../../images/pattern-3.gif) repeat #f1f1f1;
	background-size: 5px;
}
#kontaktfelder .kontaktfeld a {
	display: flex;
	align-content: center;
	align-items: center;
	padding: 20px;
}
#kontaktfelder .kontaktfeld a img {
	height: 40px;
	margin-right: 10px;
}
#kontaktfelder .kontaktfeld .kontext {
	font-size: 1.3rem;
	line-height: 20px;
	color: #000;
	font-weight: bold;
}
#kontaktfelder .kontaktfeld .streifen {
	height: 100%;
	width: 130px;
	position: relative;
	float: right;
	top: -80px;
	background: url("../../../images/header-bg-striche.png") no-repeat;
	background-size: contain;
	background-position: right center;
	transform: translateX(150px);
	transition: transform 300ms ease-in-out;
}
#kontaktfelder .kontaktfeld .schatten {
	width: 360px;
	height: 50px;
	position: absolute;
	margin-top: -65px;
	margin-left: 25px;
	z-index: -1;
	background-color: #0005;
	filter: blur(10px);
	border-radius: 100%;
	opacity: 0;
	transition: all 300ms ease-in-out;	
}
#kontaktfelder .kontaktfeld:hover .schatten {
	margin-top: -45px;
	opacity: 1;
}
#kontaktfelder .kontaktfeld:hover .streifen {
	transform: translateX(0);
}
.konblock .sppb-btn {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	font-weight: bold;
	text-transform: uppercase;
	border-radius: 0px;
	cursor: pointer;
}
.btn-primary, .sppb-btn-primary {
	background-color: #C01718;
	border-color: #C01718;
}
.btn-primary:hover, .sppb-btn-primary:hover {
	border-color: #991A21;
	background-color: #991A21;
}
.sppb-btn-secondary {
	color: #fff;
	background-color: #525151;
	border-color: #525151;
}
.sppb-btn-secondary:hover {
	background-color: #606060;
	border-color: #606060;
}
.konblock .sppb-btn img {
	height: 30px;
	margin-right: 10px;
}
#column-wrap-id-1667482475297, #column-id-1667482475296 {
	margin-top: 35px;
}
/***** TRENNLINIE ****/
.trennlinie hr {
	border: 1px solid #000;
	opacity: 1;
}
.trennlinie .blocks-mitte {
	width: 20px;
	height: 20px;
	position: absolute;
	left: 49.1%;
	background: #fff;
	border: 2px solid #000;
	transform: rotate(45deg);
	margin-top: -27px;
}
.trennlinie .blocks-mitte::after {
	content: '';
	width: 12px;
	height: 12px;
	position: absolute;
	background-color: #fff;
	border: 2px solid #000;
	top: 2px;
	left: 2px;
}
.trennlinie .blocks-links {
	width: 12px;
	height: 12px;
	position: absolute;
	left: 0;
	background: #fff;
	border: 2px solid #000;
	transform: rotate(45deg);
	margin-top: -23px;
}
.trennlinie .blocks-links::before {
	content: '';
	width: 20px;
	height: 20px;
	position: absolute;
	left: 4px;
	background: #fff;
	border: 2px solid #000;
	margin-top: -16px;
}
.trennlinie .blocks-rechts {
	width: 12px;
	height: 12px;
	position: absolute;
	right: 0;
	background: #fff;
	border: 2px solid #000;
	transform: rotate(45deg);
	margin-top: -23px;
}
.trennlinie .blocks-rechts::before {
	content: '';
	width: 20px;
	height: 20px;
	position: absolute;
	right: 4px;
	background: #fff;
	border: 2px solid #000;
	margin-top: 4px;
}
/**** FORMS ****/
.convertforms .cf-content-wrap, .convertforms .cf-form-wrap {
	padding: 0px;
}
#kontaktform, #anfrageform {
	display: none;
}
#kontaktform.aktiv, #anfrageform.aktiv {
	display: block;
}
/**** FOOTER ****/
#sp-footer, #sp-bottom {
	background: #fff;
	color: #000;
}
#sp-footer .container-inner {
	padding: 0px 0px 15px !important;
}
#sp-footer a, #sp-bottom a {
	color: #555;
}
#sp-footer a:hover, #sp-footer a:active, #sp-footer a:focus, #sp-bottom a:hover, #sp-bottom a:active, #sp-bottom a:focus {
	color: #000;
}
.article-ratings-social-share {
	display: none !important;
}
.leistungenzahlung {
	padding-left: 0px;
	display: flex;
	list-style: none;
	flex-wrap: wrap;
	margin-bottom: 0px;
}
.leistungenzahlung li {
	margin-right: 10px;
	margin-bottom: 10px;
	padding: 7px 12px;
	border: 1px solid #991A21;
	border-radius: 3px;
	font-weight: bold;
}
.leistungenzahlung li:last-child {
	border-width: 0px;
}
.leistungenzahlung li i {
	font-size: 12px;
	margin-right: 5px;
	color: #991A21;
}

/***MEDIAQUERIES****/
@media screen and (max-width:1399px) {
	.lblocke .lblock .schatten {
		width: 325px;
	}
	.leblock .leblock-headline h2 {
		font-size: 20px;
	}
	.leblock .leblock-zusatz img {
		margin-right: 10px;
	}
	.img-wrap {
		height: 390px;
	}
	.img-one-bg {
		height: 390;
		clip: rect(0px, 270px, 540px, 0px);
	}
	.img-two-bg {
		height: 390px;
	}
	#kontaktfelder .kontaktfeld:hover .streifen {
		transform: translateX(50px);
	}
	#kontaktfelder .kontaktfeld .schatten {
		width: 300px;
	}
	.cf-checkbox-group .cf-label {
		font-size: 13px;
	}
}
@media screen and (max-width:1199px) {
	#imgclip {
		margin-top: 10px;
	}
	.img-wrap {
		height: 315px;
	}
	.img-two-bg {
		height: 315px;
	}
	.img-one-bg {
		height: 315px;
		clip: rect(0px, 225px, 315px, 0px);
	}
	.lblocke .lblock .schatten {
		width: 267px;
	}
	.lblocke .lblock h3 {
		font-size: 16px;
	}
	.lblocke .lblock span {
		line-height: 18px;
	}
	#kontaktfelder .kontaktfeld .kontext {
		font-size: 16px;
		line-height: 16px;
	}
	#kontaktfelder .kontaktfeld a img {
		height: 30px;
	}

}
@media screen and (max-width:991px) {
	#sp-header .headerkontakt .konblock img {
		display: none;
	}
	#mod-custom113 {
		position: absolute;
		top: 0;
		right: -45px;
	}
	#sp-header .headerkontakt li {
		margin-right: 30px;
	}
	#sp-header .headerkontakt li:last-child {
		margin-right: 0px;
	}
	.lblocke .lblock .schatten {
		width: 191px;
	}
	.img-wrap {
		height: 230px;
	}
	.img-one-bg {
		height: 230px;
		clip: rect(0px, 163px, 230px, 0px);
	}
	.img-two-bg {
		height: 230px;
	}
	#kontaktfelder .kontaktfeld {
		width: 33%;
	}
	#kontaktfelder .kontaktfeld a img {
		display: none;
	}
	#kontaktfelder .kontaktfeld .schatten {
		width: 187px;
		margin-left: 20px;
	}
	#column-wrap-id-1667482475136 {
		margin-bottom: 35px;
	}
	#column-wrap-id-1667482475296, #column-wrap-id-1667482475297 { /* Fix Columns Form-Buttons */
		max-width: 100% !important;
		flex-basis: 100% !important;
	}
	.konblock .sppb-addon-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.konblock p {
		margin-bottom: 0px;
	}
}
@media screen and (max-width:767px) {
	#mod-custom113 {
		right: -35px;
		z-index: -1;
	}
	#mod-custom113 img {
		height: 65px !important;
	}
	#sp-header {
		height: 65px;
	}
	#sp-header .logo {
		height: 65px;
	}
	#sp-header .headerkontakt .konblock .kontext{
		display: none;
	}
	#sp-header .headerkontakt .konblock img {
		display: block;
	}
	#sp-header .headerkontakt li {
		margin-right: 10px;
	}
	#sp-header .headerkontakt li:last-child {
		margin-right: 35px;
	}
	.lblocke {
		flex-wrap: wrap;
	}
	.lblocke .lblock {
		flex: 0 0 100%;
		margin-bottom: 20px;
	}
	.lblocke .lblock .limage {
		display: none;
	}
	.lblocke .lblock .schatten {
		width: 90%;
		height: 60px;
		margin-top: -50px;
		margin-left: 2%;
	}
	.lblocke .lblock:hover .schatten {
		margin-top: -40px;
	}
	.img-one-bg {
		clip: initial;
	}
	#imgclip {
		margin-bottom: 20px;
	}
	.sppb-gallery li {
		padding: 0px;
	}
	#kontaktfelder {
		flex-wrap: wrap;
	}
	#kontaktfelder .kontaktfeld {
		width: 100%;
		margin-bottom: 20px;
	}
	#kontaktfelder .kontaktfeld a img {
		display: block;
	}
	#kontaktfelder .kontaktfeld .streifen {
		width: 130px;
		top: -73px;
	}
	#kontaktfelder .kontaktfeld:hover .streifen {
		transform: translateX(-40px);
	}
	#kontaktfelder .kontaktfeld .schatten {
		width: 90%;
		margin-left: 5%;
	}
	.konblock .sppb-addon-content {
		align-items: baseline;
		flex-direction: column;
	}
	.konblock .sppb-btn {
		margin-top: 10px;
	}
	#anfrageform, #kontaktform {
		padding-top: 0px !important;
	}
	#sp-footer1, #sp-footer2 {
		text-align: center !important;
	}
	.convertforms .cf-one-third, .convertforms .cf-two-sixths {
		width: 100%;
	}
}
@media screen and (max-width:500px) {
	.trennlinie .blocks-mitte {
		left: 47%;
	}
}