@charset "utf-8";
@font-face { 
	font-family: 'sonfon'; 
	src: url('../media/fonts/sonfon2.ttf');
}


.sheadlint {
	background-color: var(--colordark1);
	padding: 4px;
}

.sfoodint {
	background-color: var(--colordark2);
	padding: 4px;
}

.topnav {
    background-color: var(--mainbgcolor2);
}

.imglogo {
	margin-top:16px;
	margin-bottom:0;
	width: 1140px;
}

.boxtit {
	margin-top: 64px;
	font-size: 56px;
	color: var();
	text-shadow:  1px  1px 0px var(--mainbgcolor3),
				 -1px -1px 0px var(--mainbgcolor3),
				  1px -1px 0px var(--mainbgcolor3),
				 -1px  1px 0px var(--mainbgcolor3);
}

.starttit {
	font-size: 32px;
}

.ddmain {
	background-color: var(--bc1t75);	
	border: 1px solid var(--maincolor);
	-webkit-box-shadow: 0px 0px 0px 2px #193e73, 0px 0px 0px 5px #3067af, 0px 0px 0px 7px #193e73;
	box-shadow: 0px 0px 0px 2px #193e73, 0px 0px 0px 5px #3067af, 0px 0px 0px 7px #193e73;
	border-radius: 8px;
	padding: 8px;
}

.ddmain a {
	line-height: 40px;
	font-size: 22px;
	font-weight: 600;
	min-width: calc(100% - 32px);		
	margin: 16px;
	border-radius: 8px;
	transition: .5s;
}

.ddmain a:hover {
	background-color: var(--bcdk75);
	color: var(--mainbgcolor2);
}

.fullkon {
	border-radius: 8px;
}

.home_rnd {
	background-image: var(--url);
	background-size: cover;
	background-position: center center;
}

.flogo {
	width: 320px;
	height: auto;
}

.sfood {
	color: var(--mainbgcolor2);
}
.sfood a {
	color: var(--mainbgcolor2);
	font-size: 18px;
	line-height: 32px;
	margin: 12px;
}
.sfood a:hover {
	color: var(--mainbgcolor3);
}
.sfood div.row div {
	min-height: 100%;
	display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 32px;
}
.sfood ul {
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    list-style-type: none;
    padding: 0;
}
.sfood li {
    padding: 8px;
    font-size: 20px;
    font-weight: 600;
}


.home_drbg {	
	background-image: url('../media/web/dachreinigung.jpg');
	background-size: cover;
	background-position: bottom;
}

.home_drin {
	background-image: url('../media/web/dachinspekl.jpg');
	background-size: cover;
	background-position: bottom;
}

.home_drrn {
	background-image: url('../media/web/dachreinigung.jpg');
	background-size: cover;
	background-position: bottom;
}

.home_drbs {
	background-image: url('../media/web/farbtabelle.jpg');
	background-size: cover;
	background-position: bottom;
}

.home_fsbg {
	background-image: url('../media/web/fassade.jpg');
	background-size: cover;
	background-position: bottom;
}

.home_pfbg {
	background-image: url('../media/web/pflaster.jpg');
	background-size: cover;
	background-position: bottom;
}

.home_fsin {
	background-image: url('../media/web/fassgutacht.jpg');
	background-size: cover;
	background-position: bottom;
}

.home_fskl {
	background-image: url('../media/web/fassklink.jpg');
	background-size: cover;
	background-position: bottom;
}

.home_fslo {
	background-image: url('../media/web/lotus.jpg');
	background-size: cover;
	background-position: bottom;
}

.home_pfin {
	background-image: url('../media/web/pflasterinsp.jpg');
	background-size: cover;
	background-position: bottom;
}

.home_pfrn {
	background-image: url('../media/web/pflasterrein.jpg');
	background-size: cover;
	background-position: bottom;
}

.home_pfvf {
	background-image: url('../media/web/pflaster01sandbeige.jpg');
	background-size: cover;
	background-position: bottom;
}

.home_pflo {
	background-image: url('../media/web/pflaster01lotus.jpg');
	background-size: cover;
	background-position: bottom;
}

.divminhbg {
	min-height: 300px;
}

.whitebg {
	background: rgba(255, 255, 255, 0.75);
}

.glanztit {
	margin-top: 96px;
	font-size: 72px;
	color: var(--mainbgcolor1);
	text-shadow:  2px  2px 4px var(--colordark2),
				 -2px -2px 4px var(--colordark2),
				  2px -2px 4px var(--colordark2),
				 -2px  2px 4px var(--colordark2);
}

.gonjatit {
	font-size: 40px;
	margin-top: 96px;
	margin-bottom: 96px;
	color: var(--mainbgcolor2);
	text-shadow:  1px  1px 0px var(--mainbgcolor3),
				 -1px -1px 0px var(--mainbgcolor3),
				  1px -1px 0px var(--mainbgcolor3),
				 -1px  1px 0px var(--mainbgcolor3);
}

.sublink {
	font-size: 20px;
}

.subnavlink {
	font-size: 20pt;
	font-weight: 600;
	border-bottom: 3px solid transparent;
	transition: 0.5s;
}
.subnavlink:hover {
	border-bottom: 3px solid var(--colordark2);
}

.pointernavsubnavlink {
	font-size: 20pt;
	font-weight: 600;
	border-bottom: 3px solid var(--colordark2);
}
.pointernavsubnavlink:hover {
	border-bottom: 3px solid var(--mainbgcolor3);
}

.note {
	position: fixed;
	top: 150px;
	left: 25vw;
	width: 50vw;
	z-index: 1000;
}

.multicolimg {
	columns: 4 300px;
    column-gap: 0em;
    text-align: justify;
}

.imagebackedopt {
padding-left: 26px;
background-repeat: no-repeat;
}

.imgbgcasecol {
	background-image: url("media/dummy.gif");
    background-repeat:no-repeat;
    background-size:cover;
    background-position: center center;
	min-height: 90px;
	text-align: center;
	cursor: pointer;
	color: var(--colordark2);
}

.imgbgcasecol:hover {
	background-image: url("media/dummy.gif");
    background-repeat:no-repeat;
    background-size:cover;
    background-position: center center;
	min-height: 90px;
	text-align: center;
	cursor: pointer;
	color: var();
}


.rsteps {
	position: relative;
	display: flex;
    flex-wrap: wrap;
}
.rsteps::before {
	content: '';
	position: absolute;
	top: 50px;
    background-color: var(--mainbgcolor3);
    width: 100%;
    height: 1px;
}
.rsteps::after {
	content: '';
	position: absolute;
	top: 50px;
    background-color: var(--colordark2);
    width: 0%;
    height: 3px;
    animation-name: rstepsline;
    animation-duration: 6s;
    animation-delay: 0s;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
}
@keyframes rstepsline {
  	from {
  	    width: 0%;
	} to {
		width: 100%;
	}
}
.steps {
	position: relative;
	margin-top: 100px;
}
.steps::after {
	content: var(--cttx);
	position: absolute;
	top: -60px;
	left: calc(50% - 17px);
	border: 1px solid var(--mainbgcolor3);
	background-color: var(--mainbgcolor1);
	font-weight: 600;
	font-size: 24px;
	z-index: 100;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: flex;
	color:transparent;
	padding-bottom: 6px;
    justify-content: center;
    align-items: center;
    animation-name: rstepscircle;
    animation-duration: .3s;
    animation-delay: var(--delay);
    animation-fill-mode: forwards;
}
@keyframes rstepscircle {
  	from {
  	    border: 1px solid var(--mainbgcolor3);
		color:transparent;
		top: -60px;
		left: calc(50% - 17px);
		width: 24px;
		height: 24px;
		font-size: 24px;
	} to {
		border: 3px solid var(--colordark2);
		color: var(--colordark1);
		top: -80px;
		left: calc(50% - 32px);
		width: 64px;
		height: 64px;
		font-size: 32px;
	}
}


.lbox {
	position: relative;
	width: 100%;
	/* min-height: 100%; */
	padding: 32px;
	border: 1px solid var(--bcdk75);
}
.lbox .info {
	width: 100%;
	padding: 16px;
	font-weight: 600;
	text-align: center;
	font-size: 16px;
	display: flex;
  	justify-content: flex-end;
}


.tli {
	margin-left: 24px;
}

@media only screen and (min-width: 1200px) {
.boxtit {
	font-size: 64px;
}

.starttit {
	font-size: 32px;
}

.glanztit {
	margin-top: 96px;
	font-size: 72px;
}

.gonjatit {
	font-size: 40px;
	margin-top: 96px;
	margin-bottom: 96px;
}

}

/*		Wide Mobile Layout: 720px.   */

@media only screen and (min-width: 768px) and (max-width: 1199px) {
	.boxtit {
		font-size: 6.0vw;
	}
	
	.starttit {
		font-size: 2.6vw;
	}
	
	.glanztit {
		margin-top: 9.6vw;
		font-size: 7.2vw;
	}
	
	.gonjatit {
		font-size: 4.0vw;
		margin-top: 9.6vw;
		margin-bottom: 9.6vw;
	}
	
	.imglogo {
		width: 95vw;
	}
	.flogo {
		width: 20vw;
		height: auto;
	}

}

/*		Small Mobile Layout: 480px.   */

@media only screen and (max-width: 767px) {
	.tnav, .fnav {
			line-height: 40px;
			font-size: 22px;
			margin: 16px;
	}
		
	.boxtit {
		font-size: 8.2vw;
	}
	
	.starttit {
		font-size: 4.2vw;
	}
	
	.glanztit {
		margin-top: 9.6vw;
		font-size: 7.2vw;
	}
	
	.gonjatit {
		font-size: 4.0vw;
		margin-top: 9.6vw;
		margin-bottom: 9.6vw;
	}
	.imglogo {
		margin-top:8px;
		margin-bottom:0;
		position:absolute;
		right: 48px;
		top: 0px;
		width: 176px;
	}
	.flogo {
		width: 80vw;
		height: auto;
	}

	.rsteps {
		position: relative;
		display: flex;
	    flex-wrap: wrap;
		width: calc(100vw - 120px) !important;
	}
	.rsteps::before {
		content: '';
		position: absolute;
		left: 50px;
	    background-color: var(--mainbgcolor3);
	    height: 80%;
	    width: 0px;
	}
	.rsteps::after {
		content: '';
		position: absolute;
		left: 50px;
	    background-color: var(--colordark2);
	    height: 0%;
	    width: 0px;
	    animation-name: rstepsline;
	    animation-duration: 6s;
	    animation-delay: 0s;
	    animation-fill-mode: forwards;
	    animation-timing-function: linear;
	}
	@keyframes rstepsline {
	  	from {
	  	    height: 0%;
		} to {
			height: 80%;
		}
	}
	.steps {
		position: relative;
		margin-top: 0px;
		margin-left: 100px;
		padding: 32px;
		width: calc(100vw - 120px) !important;
		min-width: calc(100vw - 120px) !important;
	}
	.steps::after {
		content: var(--cttx);
		position: absolute;
		left: -60px;
		top: calc(50% - 17px);
		border: 1px solid var(--mainbgcolor3);
		background-color: var(--mainbgcolor1);
		font-weight: 600;
		font-size: 24px;
		z-index: 100;
		width: 24px;
		height: 24px;
		border-radius: 50%;
		display: flex;
		color:transparent;
		padding-bottom: 6px;
	    justify-content: center;
	    align-items: center;
	    animation-name: rstepscircle;
	    animation-duration: .3s;
	    animation-delay: var(--delay);
	    animation-fill-mode: forwards;
	}
	@keyframes rstepscircle {
	  	from {
	  	    border: 1px solid var(--mainbgcolor3);
			color:transparent;
			left: -60px;
			top: calc(50% - 17px);
			width: 24px;
			height: 24px;
			font-size: 24px;
		} to {
			border: 3px solid var(--colordark2);
			color: var(--colordark1);
			left: -80px;
			top: calc(50% - 32px);
			width: 64px;
			height: 64px;
			font-size: 32px;
		}
	}

}