
main h2 {
	display: flex;
	justify-content: center;
}
main h3 {
	font-weight: bold;
}

/*------------------------------------------------------------------------*/

#ueber {
	margin-top: 1rem;
	margin-bottom: 2rem;
}

/*----------------------------------*/

#leistungen {
	margin-bottom: 2rem;
}

#about {
	background-image: url("/images/photos/about2_bg.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 0% 60%;
}
#about > div {
	backdrop-filter: brightness(25%);
	-webkit-backdrop-filter: brightness(25%);
	display: flex;
	align-items: center;
}
#about > div > div:nth-child(1) { flex: 1 1 auto; margin: 1rem; }
#about > div > div:nth-child(2) { flex: 0 1; }
#about > div > div:nth-child(2) img {
	margin: 1rem;
	width: 6rem;
	border-radius: 5px;
	transition: transform 0.25s ease-out;
}
#about > div > div:nth-child(2) img:hover {
	transform: scale(1.2);
	transition: transform 0.25s ease-in;
}


#cast {
	background-image: url("/images/photos/cast2_bg.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 0% 30%;
	margin-bottom: 2rem;
}
#cast > div {
	backdrop-filter: brightness(25%);
	-webkit-backdrop-filter: brightness(25%);
	display: flex;
	align-items: center;
}
#cast > div > div:nth-child(2) { flex: 1 1 auto; margin: 1rem; }
#cast > div > div:nth-child(1) { flex: 0 1; }
#cast > div > div:nth-child(1) img {
	margin: 1rem;
	width: 6rem;
	border-radius: 5px;
	transition: transform 0.25s ease-out;
}
#cast > div > div:nth-child(1) img:hover {
	transform: scale(1.2);
	transition: transform 0.25s ease-in;
}


#weld {
	background-image: url("/images/photos/weld1_bg.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 0% 60%;
	margin-bottom: 2rem;
}
#weld > div {
	backdrop-filter: brightness(25%);
	-webkit-backdrop-filter: brightness(25%);
	display: flex;
	align-items: center;
}
#weld > div > div:nth-child(1) { flex: 1 1 auto; margin: 1rem; }
#weld > div > div:nth-child(2) { flex: 0 1; }
#weld > div > div:nth-child(2) img {
	margin: 1rem;
	width: 6rem;
	border-radius: 5px;
	transition: transform 0.25s ease-out;
}
#weld > div > div:nth-child(2) img:hover {
	transform: scale(1.2);
	transition: transform 0.25s ease-in;
}


#repair {
	background-image: url("/images/photos/repair1_bg.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 0% 45%;
	margin-bottom: 2rem;
}
#repair > div {
	backdrop-filter: brightness(25%);
	-webkit-backdrop-filter: brightness(25%);
	display: flex;
	align-items: center;
}
#repair > div > div:nth-child(2) { flex: 1 1 auto; margin: 1rem; }
#repair > div > div:nth-child(1) { flex: 0 1; }
#repair > div > div:nth-child(1) img {
	margin: 1rem;
	width: 6rem;
	border-radius: 5px;
	transition: transform 0.25s ease-out;
}
#repair > div > div:nth-child(2) img:hover {
	transform: scale(1.2);
	transition: transform 0.25s ease-in;
}


#mobile {
	background-image: url("/images/photos/mobile2_bg.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 0% 15%;
}
#mobile > div {
	backdrop-filter: brightness(25%);
	-webkit-backdrop-filter: brightness(25%);
	display: flex;
	align-items: center;
}
#mobile > div > div:nth-child(1) { flex: 1 1 auto; margin: 1rem; }
#mobile > div > div:nth-child(2) { flex: 0 1; }
#mobile > div > div:nth-child(2) img {
	margin: 1rem;
	width: 6rem;
	border-radius: 5px;
	transition: transform 0.25s ease-out;
}
#mobile > div > div:nth-child(1) img:hover {
	transform: scale(1.2);
	transition: transform 0.25s ease-in;
}

/*----------------------------------*/

#einsaetze {
	margin-left: 1rem;
	margin-right: 1rem;
	_margin-bottom: 2rem;
}

#wurzer,
#einbaeck,
#strabag {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
}

#wurzer > div > img,
#einbaeck > div > img,
#strabag > div > img {
	margin: 1rem;
	width: 6rem;
	border-radius: 5px;
}

/*----------------------------------*/

#kontakt {
	margin: 0 1rem;
	margin-bottom: 2rem;
}

dl {
	margin-top: 1.5rem;
}
dt {
	font-weight: bold;
}
dd {
	padding: 0.25rem;
	margin-bottom: 0.5rem;
}
#spam1 > a,
#spam2 > a {
	font-size: 1.25rem;
	font-weight: bold;
}

#formular {
	display: grid;
	grid-template-areas:
	"from phone"
	"text text"
	"captcha captchaGroup"
	"sendGroup sendGroup";
	align-items: baseline;
	gap: 1.0rem;
}
@media screen and (max-width: 550px) {
	#formular  {
		grid-template-areas:
		"phone"
		"from"
		"text"
		"captchaGroup"
		"captcha"
		"sendGroup";
	}
}

#from { grid-area: from; }
#phone { grid-area: phone; }
#subject { grid-area: subject; }
#text { grid-area: text; }
#captcha { grid-area: captcha; }
#captchaGroup {
	grid-area: captchaGroup;
	height: calc(2rem + 3px);
	display: flex;
}
#captchaGroup > span > img {
	height: calc(2rem + 3px);
	margin-right: 0.25rem;
}
#sendGroup { grid-area: sendGroup; }
#sendGroup > span {
	font-size: 0.75rem;
	_color: var(--grey-color);
}
#send {
	margin-top: 1rem;
}
#send img,
#captchaImg img {
	height: 1rem;
	border-radius: 5px;
}

/*------------------------------------------------------------------------*/

#viewer {
	position: fixed;
	top: 0;
	left: 0;
	transform: translate(calc(50vw - 50%), calc(50vh - 50%));
	max-width: 90vw;
	visibility: hidden;
	z-index: 2;
}
@media screen and (orientation: landscape) {
	#viewer {
		max-width: 90vh;
	}
}

#viewer > a {
	position: absolute;
	z-index: 3;
}

#viewer > a:nth-child(1) {
	top: 1rem;
	right: 1rem;
}
#viewer > a:nth-child(2) {
	top: calc(50% - 2rem);
	left: 1rem;
}
#viewer > a:nth-child(3) {
	top: calc(50% - 2rem);
	right: 1rem;
}
#viewer > a {
	color: #fff;
	_font-family: monospace;
	font-size: 2rem;
}

#viewer > div > img {
	max-width: 100%;
	border-radius: 5px;
}

/*----------------------------------*/

#backdrop {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: 0.5;
	z-index: 1;
	display: none;
}

/*----------------------------------*/

#loading {
	position: fixed;
	top: 0;
	left: 0;
	transform: translate(calc(50vw - 50%), calc(50vh - 50%));
	z-index: 5;
	display: none;
}
#loading > img {
	height: 3rem;
}
