/* CSS Document */


@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;600&display=swap');
@import url('/assets/css/coco.css');
@import url('/assets/css/fontawesome.css');
@import url('/assets/css/navi.css');

*						{ margin: 0; padding: 0; }

html 				{ color: #2d484d; font-family: 'Barlow', sans-serif; font-size: 16px; font-weight: 300; }
body				{ background: #f8f8f8; }
h2					{ color: #254282; font-size: 2rem; font-weight: 600; margin-bottom: 2rem; text-align: center; }
h2:after		{ border: 2px solid #3ea8c7; border-radius: 0.125rem; content: ""; display: block; margin: 1rem auto; width: 3rem; }
h3					{ color: #3ea8c7; font-size: 1.75rem; font-weight: 300; margin-bottom: 2.5rem; }
h4					{ color: #507c9f; font-size: 1.25rem; font-weight: 600; margin-bottom: 1.5rem; text-transform: uppercase; }
h5					{ color: #3ea8c7; font-size: 1.25rem; font-weight: 600; margin-bottom: 1.5rem; }
a 					{ text-decoration: none; color: #3ea8c7; cursor: pointer; }
hr					{ border: 2px solid #3ea8c7; border-radius: 0.25rem; margin: 2rem auto; width: 25%; }
img 				{ border-radius: 0.125rem; display: block; max-width: 100%; }
p						{ font-size: 1.25rem; line-height: 1.35; margin-bottom: 1rem; text-align: justify; }
strong			{ font-weight: 600; }
section			{ margin: 1rem 0 2rem; }


header 			{ background: #ffffff; padding: 2rem 0 0; width: 100%; }
.logo				{ margin-bottom: 2rem; }
.logo img	 	{ max-height: 7rem; margin: 0 auto 1rem; }
.logo span	{ color: #eeeeee; font-size: 1.25rem; font-weight: 600; display: block; margin: 0 auto; text-align: center; text-transform: uppercase; }

nav 				{ box-shadow: 0 15px 10px 2px #cccccc; width: 100%; }
nav ul 			{ list-style: none; }
nav ul li a { color: #ffffff; display: block; margin-bottom: 0.5rem; padding: 1rem 2rem 0.5rem; text-transform: uppercase; }
nav ul li.current a	{ font-weight: 600; }
nav ul li a:hover		{ color: #ffffff; }
nav ul li a:after,
nav ul li a:before	{ transition: width ease .5s; }

nav.stroke ul li a	{ position: relative; }
nav.stroke ul li a:after	{ position: absolute; bottom: 0; left: 0; right: 0; margin: auto; width: 0%; content: '.'; color: transparent; background: #ffffff; height: 1px; }
nav.stroke ul li a:hover:after { width: 70%; }

main				{ background: url('/data/site/grundriss-02.png') top 8rem left no-repeat fixed; padding: 2rem 0 5rem; }
main img		{ box-shadow: 0 0 5px 2px #cccccc; }
main ul						{ font-size: 1.25rem; margin-bottom: 1rem; list-style: none; }
main ul li					{ margin: 0 0 0.5rem 1rem; }
main ul li:before	{ color: #3ea8c7; content: "•"; margin: 0 0.5rem 0 -1rem; }

footer 			{ box-shadow: 0 -3px 10px 2px #cccccc; color: #ffffff; padding: 0 1rem; width: 100%; }
footer h4		{ color: #ffffff; font-weight: 300; }
footer img	{ margin-bottom: 2rem; max-width: 80%; }
footer p		{ font-size: 1rem; font-weight: 300; line-height: 1.35; }
footer ul 	{ list-style: none; margin-bottom: 1rem; }
footer ul li a { color: #ffffff; display: block; padding: 0.125rem; margin-bottom: 0.25rem; transition: ease 0.5s; width: 100%; }
footer ul li a:hover { color: #dddddd; transition: ease 0.5s; }
footer i		{ color: #ffffff; }
.slide			{ background: #ffffff; width: 100%; }
.slide img	{ box-shadow: 0 -5px 10px 2px #cccccc; margin-bottom: 0; opacity: 0.70; }

.content		{ margin: 0 auto; max-width: 1200px; width: 90%; }
.flex 			{ display: flex; flex-wrap: wrap; }
.flexcenter { display: flex; flex-wrap: wrap; justify-content: center; }
.bx					{ box-sizing: border-box!important; -webkit-box-sizing: border-box!important; }
.bx100			{ padding: 1rem 1rem; width: 100%; }
.bx33				{ padding: 2.5rem 1rem; width: 38.2%; }
.bx66				{ padding: 2.5rem 1rem; width: 61.8%; }
.bx25				{ padding: 2.5rem 1rem; width: 25%; }
.bx50				{ padding: 2.5rem 1rem; width: 50%; }

.gradient 	{ background: rgb(62,168,199); background: linear-gradient(135deg, rgba(62,168,199,1) 10%, rgba(37,66,130,1) 40%, rgba(37,66,130,1) 60%, rgba(80,124,159,1) 100%); }

/* Startseite */

.teaser				{ margin: 0 auto; max-width: 960px; }
.teaser .item	{ background: #ffffff; border-radius: 0.125rem; box-shadow: 0 0 10px 2px #cccccc; margin: 0 auto 1rem; padding: 2rem 1rem; text-align: center; width: 30%; }
.teaser .item img { box-shadow: none !important; margin: 0 auto 1.5rem; width: 50%; }
.teaser .item span { color: #aaaaaa; }

/* Leistungen */

.service			{ background: #fefefe; border-radius: 0.125rem; box-shadow: 0 0 15px 2px #cccccc; margin: 0 auto; max-width: 960px; padding: 2rem; }
.service ul		{ font-size: 1.375rem; }

/* Objekte */

.object			{ margin: 0 auto; max-width: 960px; }
.object .item { background: #fefefe; border-radius: 0.125rem; box-shadow: 0 0 10px 2px #cccccc; margin-bottom: 2rem; padding: 0.5rem; }
.object .item .image { padding: 1rem; position: relative; width: 38.2%; }
.object .item .info { padding: 1.5rem 1rem 6rem; position: relative; width: 61.8%; }
.object .item .info .details { box-shadow: 0 10px 3px -10px #cccccc; margin-bottom: 1rem; }
.object .item .info .entry { margin-bottom: 2rem; text-align: center; width: 33%; }
.object .item .info .entry span { display: block; }
.object .item .info .entry span:first-child { color: #254282; font-size: 2rem; margin-bottom: 0.5rem; }
.object .item .info .entry span:last-child { color: #aaaaaa;}
.object .item .info .price {  bottom: 1.5rem; padding: 0.5rem 1rem; position: absolute; right: 2rem; width: 50%; }
.object .item .info .price span { display: block; text-align: right; }
.object .item .info .price span i { color: #254282; font-size: 1rem; margin-right: 0.5rem; }
.object .item .info .price span:first-child { font-size: 1.75rem; font-weight: 600; }
.object .item .info .price span:last-child { color: #aaaaaa; text-transform: uppercase; }

.ribbon { background: #cf1b1b; color: #ffffff; font-size: 1.125rem; font-weight: 600; height: 1.5rem; left: 0.25rem; letter-spacing: 1px; line-height: 1; padding: 1rem 0 1rem 1rem ; position: absolute; top: 2rem; text-transform: uppercase; z-index: 1; }
.ribbon:after { content: ""; position: absolute; display: block; bottom: 0; border: 1.75rem solid #cf1b1b; border-right-color: transparent; right: -3rem; z-index: -1; }
.ribbon-content {  }
.ribbon .ribbon-content:before { border-color: #900d0d transparent transparent transparent; border-style: solid; border-width: 0.75rem 0 0 0.75rem; bottom: -0.75rem; content: ""; display: block; left: 0; position: absolute; }


/* KONTAKT */

.contact			{ background: #fefefe; border-radius: 0.125rem; box-shadow: 0 0 15px 2px #cccccc; margin: 0 auto; max-width: 900px; padding: 1rem; }

form				{  width: 100%; }
form input,
form textarea{  box-sizing: border-box!important; -webkit-box-sizing: border-box!important; }
form input[type='text'],
form input[type='email'],
form input[type='date'],
form input[type='tel'],
form textarea,
form select { background: #ffffff; border: 1px solid #cccccc; border-radius: 0.125rem; color: #555555; font-family: 'Barlow', sans-serif; font-size: 1.125rem; font-weight: 300; margin: 0 0 1.25rem; padding: 1.25rem; width: 100%; }
form input[type='submit'] { background: #254282; border: none; border-radius: 0.125rem; cursor: pointer; font-family: 'Barlow', sans-serif; font-size: 1.125rem; font-weight: 400; height: 70px; margin: 0 0 1.25rem; padding: 1.5rem; width: 100%; color: #ffffff; text-transform: uppercase; letter-spacing: 1px;  }
form input[type='submit']:disabled { background: #999999; color: #666666; cursor: default; }
form select	{ width: 100%; border-color: #cccccc!important; border-radius: 0; border-top-left-radius: 0.125rem; border-bottom-left-radius: 0.125rem; }
form a			{ font-size: 1rem; }

.block			{ margin: 0 auto; width: 31.333%; overflow: auto; }
.blocklong	{ margin: 0 auto; width: 98%; }
.fieldapprove { border: 1px solid #3ea8c7; border-radius: 0.125rem; text-align: left; margin: 0 0 1.5rem; padding: 1rem; }
.fieldapprove input { margin: 0 0 0; }
.fieldapprove a { color: #3ea8c7; display: inline-block; }
.fielddate table { margin: 0; width: 100%; }
.fielddate table tbody, .fielddate table tr, .fielddate table td { display: block; width: 100%; }
.fielddate select { display: inline-block; width: 32%; }
.captchapic img { border: none; box-shadow: none; height: 70px; margin: 0 0 2rem; width: 100%; }
.captchafield input { height: 70px; float: left; width: 100%; margin: 0 0 2rem 3%; }
.required:after { content: '*'; color: #8c8c8c; float: right; font-size: 1.375rem; line-height: 1rem; padding: 0.375rem 0 0 0.375rem; }

.slide img	{ box-shadow: 0 -5px 10px 2px #cccccc; margin-bottom: 0; opacity: 0.70; }
.light img	{  opacity: 0.70;}

@media only screen and (max-width: 960px) {

	.bx25				{ padding: 1rem; width: 50%; }
	.bx50				{ padding: 1rem 0; width: 100%; }

	.object .item .info .entry { width: 50%; }

}


@media only screen and (max-width: 720px) {
h2					{ font-size: 1.5rem; }
p						{ font-size: 1rem; }
main ul						{ font-size: 1rem; }
	.service ul		{ font-size: 1.125rem; }
	nav ul li { width: 100%; }

	.object .item .image { width: 50%; }
	.object .item .info { width: 50%; }

}

@media only screen and (max-width: 640px) {
	
	.logo span	{ font-size: 1rem; }

	.teaser .item	{ width: 100%; }
	.bx25					{ width: 100%; }

	.object .item .image	{ width: 100%; }
	.object .item .info		{ width: 100%; }

}