:root {
	--spaceBetweenDefault: 20px;
	--baseWidth: 92%;
	--maxWidth: 1160px;
	/* reduced width is two-thirds of maxWidth */
	--reducedWidth: calc(var(--maxWidth) * 2/3);
	/*--mainColor: #5A767B;*/
	--mainColor: #437066;
	--secondColor: #BFD2D0;
	--fontColor: #000;
	--contrastColorInverted: #fff;
	--backgroundColor: #f1f1f1;
	--fontfamily: 'Martel Sans', Arial, Verdana, Sans-serif;
	--fontfamilyheadline: 'Kanit', Arial, Verdana, Sans-serif;
	--h1FontSize: clamp(2rem, 1.6111111111rem + 0.8888888889vw, 2.5rem);
  	--h2FontSize: clamp(1.625rem, 1.1875rem + 1vw, 2.1875rem);
	--h3FontSize: 24px;
	--h4FontSize: 20px;
	--baseFontSize: 15.75px;
	--baseLineHeight: 160%;
	--baseFontWeight: 300;
}

html {
	scroll-behavior: smooth;
}

article,
aside,
dialog,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
	display: block
}

.clearL,
.clearR,
.clear {
	clear: both;
}

.clearfix:after {
	content: "";
	display: block;
	clear: both;
}

H1,
H2,
H3,
H4,
H5,
H6 {
	font-size: 18px;
	line-height: 120%;
	color: var(--fontColor);
	padding: 10px 0 0;
	font-family: var(--fontfamilyheadline);
	font-weight: var(--baseFontWeight);
	font-style: normal;
}

H1 {
	font-size: var(--h1FontSize);
	margin-bottom: 30px;
	color: var(--fontColor);
}

.banner_content h1 {
	padding: 0;
	margin: 24px 0;
}

H2 {
	font-size: var(--h2FontSize);
	padding: 0;
	margin: 0 0 24px 0;
}

H3 {
	font-size: var(--h3FontSize);
	padding: 0;
	margin: 15px 0;
}

H4 {
	font-size: var(--h4FontSize);
	padding: 0;
	margin: 15px 0;
}

H1+H1,
H1+H2,
H1+H3,
H1+H4,
H1+H5,
H2+H1,
H2+H2,
H2+H3,
H2+H4,
H2+H5,
H3+H1,
H3+H2,
H3+H3,
H3+H4,
H3+H5,
H4+H1,
H4+H2,
H4+H3,
H4+H4,
H4+H5,
H5+H1,
H5+H2,
H5+H3,
H5+H4,
H5+H5 {
	padding: 0;
}

P {
	margin: 17px 0;
	color: var(--fontColor);
	line-height: var(--baseLineHeight);
	font-size: var(--baseFontSize);
	font-family: var(--fontfamily);
}

A {
	text-decoration: none;
	color: var(--mainColor);
}


#contactform .field.privacy A {
	color: var(--fontColor);
}

::-moz-selection {
	background: var(--mainColor);
	text-shadow: none;
	color: var(--contrastColorInverted);
}

::selection {
	background: var(--mainColor);
	text-shadow: none;
	color: var(--contrastColorInverted);
}

hr {
	display: block;
	height: 1px;
	background: var(--backgroundColor);
	margin: 1em 0;
	border: none;
}
table {
	width:auto;
	border-collapse: collapse;
	border-spacing: 0;
}

img, embed, object, video {
	max-width: 100%;
	height: auto;
	width: auto;
}


TEXTAREA,
INPUT,
BUTTON,
SELECT {
	resize: none;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
	border-radius: 0px;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	-webkit-font-smoothing: inherit;
	font: var(--baseFontSize) var(--fontfamily);
	color: var(--fontColor);
	padding: 10px;
	border: 0;
	border: 1px solid #000;
	background: transparent;
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;
	appearance: none;
}

SELECT {
	position: relative;
	cursor: pointer;
	outline: none;
	-o-text-overflow: '';
	text-overflow: '';
}

select::-ms-expand {
	display: none;
}

BUTTON {
	border: none;
	cursor: pointer;
}

INPUT[type=text],
INPUT[type=tel],
TEXTAREA,
INPUT[type=password],
INPUT[type=email],
SELECT,
BUTTON {
	width: 100%;
}


INPUT[type=checkbox] {
	border: 1px solid #d6d6d6;
	padding: 0;
	width: 25px;
	height: 25px;
	overflow: hidden;
}

INPUT[type=checkbox]:focus {
	border-bottom-color: #d6d6d6;
}

INPUT[type=checkbox]:checked {
	border-color: #000;
	position: relative;
}

INPUT[type=checkbox]:checked:after,
INPUT[type=checkbox]:checked:before {
	content: "";
	display: block;
	width: 1px;
	height: 19px;
	background: #000;
	position: absolute;
	top: 2px;
	left: 11px;
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

INPUT[type=checkbox]:checked:before {
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

INPUT[type=radio] {
	padding: 4px;
	line-height: normal;
	vertical-align: middle;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	border-radius: 100%;
}

INPUT[type=submit],
INPUT[type=reset],
.button {
	display: inline-block;
	border: 1px solid var(--mainColor);
	color: #fff;
	background-color: var(--mainColor);
	line-height: var(--baseLineHeight);
	margin-top: 0;
	padding: 10px 15px;
	cursor: pointer;
	border-radius: 6px;
	line-height: 120%;
}

.button.secondary {
	background-color: var(--contrastColorInverted);
	color: var(--mainColor);
}

INPUT:focus,
SELECT:focus {
	border-bottom-color: var(--mainColor);
}

INPUT:-webkit-autofill,
TEXTAREA:-webkit-autofill {
	box-shadow: 0 0 0 1000px #FFF inset;
	-webkit-box-shadow: 0 0 0 1000px #FFF inset;
	-webkit-text-fill-color: #000;
}

::-webkit-input-placeholder {
	color: #666;
}

:-moz-placeholder {
	opacity: 1;
	color: #666;
}

::-moz-placeholder {
	opacity: 1;
	color: #666;
}

:-ms-input-placeholder {
	color: #666;
}

/*Blockstile*/
P.align-center,
H1.align-center,
H2.align-center,
H3.align-center,
H4.align-center,
H5.align-center,
A.align-center,
P A.align-center {
	text-align: center;
}

P.align-right,
H1.align-right,
H2.align-right,
H3.align-right,
H4.align-right,
H5.align-right,
A.align-right,
P A.align-right {
	text-align: right;
}

P.align-justify,
H1.align-justify,
H2.align-justify,
H3.align-justify,
H4.align-justify,
H5.align-justify,
A.align-justify,
P A.align-justify {
	text-align: justify;
}

/*Textstile*/


.smalltext {
	font-size: 15px;
}

.facebook,
.instagram,
.button,
#kontaktform {
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

/*Template*/
BODY {
	font: var(--baseFontSize) var(--fontfamily);
	line-height: 27px;
	color: var(--mainColor);
	background: #fff;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	min-height: 100vh;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	-moz-box-orient: vertical;
	-moz-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
}

#site {
	-webkit-box-flex: 1;
	-webkit-flex: 1 0 auto;
	-moz-box-flex: 1;
	-ms-flex: 1 0 auto;
	flex: 1 0 auto;
}

/*container fade*/

.fadeInUp {
  opacity: 0;
  transform: translateY(100px);
}

.fadeInUp.go {
  animation: fadeInUp 1s ease forwards;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


/*Subhead*/
.subhead {
	width: 100%;
	position: relative;
	line-height: 0;
	max-width: 1160px;
	margin: 0 auto;
}

.banner_wrapper {
	display: flex;
}

.banner_left {
	max-width: 65%;
}

.banner_content {
	padding: 4.75em 4em;
}

.banner_right {
	display: flex;
	align-items: center;
}

.subhead .frame IMG {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 6px;
	max-height: 780px;
}

/* .subhead:before {
	content: "";
	display: block;
	height: 10px;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.05) 0%, rgba(255, 255, 255, 0) 100%);
	background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.05) 0%, rgba(255, 255, 255, 0) 100%);
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.05)), to(rgba(255, 255, 255, 0)));
	background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.05) 0%, rgba(255, 255, 255, 0) 100%);
	background: -o-linear-gradient(top, rgba(0, 0, 0, ‚0.05) 0%, rgba(255, 255, 255, 0) 100%);
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 0%, rgba(255, 255, 255, 0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0d000000', endColorstr='#00ffffff', GradientType=0);
} */

/*Logo*/
#logo {
	background: url("../img/logo.svg") no-repeat left top;
	-webkit-background-size: 100% auto;
	-moz-background-size: 100% auto;
	-o-background-size: 100% auto;
	background-size: 100% auto;
	width: 480px;
	height: 450px;
}

#logo A {
	display: block;
	width: 100%;
	height: 100%;
}

#logo A SPAN {
	display: none;
}

.cont {
	padding: 0;
}

/*Layouts -----------------------------------------*/
.foot > .inner,
.head > .inner {
	width: var(--baseWidth);
	max-width: var(--maxWidth);
	margin-left: auto;
	margin-right: auto;
}
.cont > .frame {
	box-sizing: border-box;
	padding: 4.75em 4em;
	width: var(--baseWidth);
	max-width: var(--maxWidth);
	margin-left: auto;
	margin-right: auto;
}

.cont > .frame.small {
	max-width: var(--reducedWidth);
	margin-bottom: 20px;
	position: relative;
}

.frame.small .frame-bg {
  position: absolute;
  right: -130px;
  top: 50%; 
  transform: translateY(-50%) rotate(15deg); 
  width: 300px; 
  pointer-events: none; 
  z-index: 0;
  display: none;
}

.frame.small > *:not(.frame-bg) {
  position: relative;
  z-index: 1;
}

.cont > .frame.full_width {
	max-width: none;
	width: 100%;
}
.cont > .frame.full_width_limit_content {
	max-width: none;
	width: 100%;
}
.cont > .frame.full_width_limit_content > .inner {
	width: var(--baseWidth);
	max-width: var(--maxWidth);
	margin-left: auto;
	margin-right: auto;
}

/*textmedia*/

.textmedia_wrapper {
	display: flex;
}


.textmedia_text > div {
	padding: 0 15px 0 0;
}

.textmedia_image {
	padding: 0 0 0 15px;
	width: 175%;
}

.textmedia_image img {
	border-radius: 6px;
	margin-top: 10px;
}

/*gridrow*/

.gridrow_wrapper {
	display: flex;
}

.gridrow_text > div {
	padding: 0 15px 0 0;
}

.gridrow_text:last-of-type > div {
	padding: 0 0 0 15px;
}


/*Contactfortm*/

.contact_container {
	margin: 65px auto 0;
	padding: 70px 35px;
	background: var(--secondColor);
}

.contact_wrapper {
	max-width: var(--maxWidth);
	margin: 0 auto;
	display: flex;
}

.contact {
	width: 48%;
}

.contact_wrapper > .frame {
	width: 48%;
	margin-left: 4%;
}

.contact p {
	padding: 3px 0;
	margin: 0;
	font-style: normal;
}

.contact h1 {
	margin: 0 0 20px 0;
	padding: 0;
}

/*formular*/
.no-js #contactform {
	display: none;
}

#contactform {
	margin-top: 30px;
}
#contactform h3 {
	margin-bottom: 30px;
	text-align: center;
}
#contactform .field {
	margin: 5px 0;
	width: 100%;
}
#contactform .field.privacy INPUT {
	margin-right: 5px;
}
#contactform .field.privacy INPUT:hover {
	cursor: pointer;
}
#contactform .field.privacy span {
	color: var(--fontColor);
}

#contactform .field.privacy a {
	text-decoration: underline;
	color:  var(--mainColor);
}

.success_mail H3,
.noscript_mail H3 {
	padding: 50px 4%;
	background: var(--backgroundColor);
}

/*Foot*/
.foot {
	background: var(--contrastColorInverted);
	font-size: 15px;
}

.footer_container {
	display: flex;
	align-items: center;
}

.footer_left,
.footer_right {
	width: 48%;
}

.footer_right {
	margin-left: 4%;
}

.footer_logo {
	background: url("../img/logo_footer.jpg") no-repeat left top;
	-webkit-background-size: 100% auto;
	-moz-background-size: 100% auto;
	-o-background-size: 100% auto;
	background-size: 100% auto;
	width: 120px;
	height: 120px;
}

.foot .inner {
	padding: 30px 0;
}

.foot A {
	color: var(--fontColor);
}

.foot A:first-of-type {
	margin-right: 5px;
}

.foot A:last-of-type {
	margin-left: 5px;
}

.foot P {
	padding: 0;
}

.footnav {
	display: flex;
	max-width: 400px;
	flex-wrap: wrap;
	color: var(--fontColor);
	font-size: 18px;
	font-weight: 400;
}

.copy {
	width: 100%;
}

.foot .col1 {
	line-height: 40px;
}

.foot .col1 .footnav A {
	padding: 7px 20px;
	display: inline-block;
}

.foot A.social {
	display: inline-block;
	width: 40px;
	height: 40px;
	background: url(../img/social.svg) no-repeat 0 0;
	-webkit-background-size: auto 40px;
	-moz-background-size: auto 40px;
	-o-background-size: auto 40px;
	background-size: auto 40px;
}

.foot A.social:hover {
	opacity: 0.8;
}

.foot A.social span {
	display: none;
}

.foot A.social.instagram {
	background-position: -47px 0;
	margin-left: 20px;
}

/*Listen*/
.allcont UL {
	margin: 5px 0px 10px 25px;
}

.allcont UL LI {
	list-style-type: disc;
	font-style: normal;
	padding: 3px 0px;
	color: var(--fontColor);
}

.allcont OL {
	margin: 5px 0px 10px 18px;
}

.allcont OL LI {
	list-style-type: decimal;
	padding: 3px 0px;
}


	/* CSS Mobile Reset */
	/* Responsive Gridelements */
	/* breakpoint normal screen*/


@media all and (max-width: 1200px) {

	.banner_wrapper {
		flex-direction: column;
		margin: 0 auto;
		max-width: 920px;
	}

	.banner_left {
		max-width: unset;
	}

	.banner_content {
		padding: 2.5em 2em;
	}

	.cont > .frame,
	.contact_wrapper {
		margin: 0 auto;
		max-width: 920px;
		padding: 2.5em 2em;
		box-sizing: border-box;
	}

	.contact_wrapper .button {
		width: 100%;
	}

	.textmedia_wrapper,
	.gridrow_wrapper {
		flex-direction: column;
	}

	.textmedia_text > div,
	.gridrow_text > div {
		padding: 0;
	}

	.gridrow_text:last-of-type > div {
		padding: 0;
		margin-top: 15px;
	}

	.textmedia_image {
		padding: 0;
		width: 100%;
	}

	#logo {
		margin: 0 auto;
	}

	.button {
		display: block;
		text-align: center;
		padding: 5px 15px;
	}

	.button.secondary {
		margin-top: 10px;
	}

	.subhead .frame IMG {
		max-height: 366px;
	}
}

	/* breakpoint break grid*/
@media all and (max-width: 860px) {

	.contact_wrapper {
		flex-direction: column;
	}

	.footer_container {
		flex-direction: column;
		align-items: center;
		flex-wrap: wrap;
	}
	
	.footnav {
		margin: 20px auto 0;
		text-align: center;
  		justify-content: center;
	}

	.contact,
	.contact_wrapper > .frame,
	.footer_left,
	.footer_right {
		width: 100%;
		margin: 0;
	}

	.footer_logo {
		margin: 0 auto;
	}
}

/* breakpoint break mobile*/
@media screen and (max-width: 600px) {

	#logo {
		width: 80%;
		height: 350px;
	}

}

/*Ab hier springt er auf 100% breite Elemente (320px)*/
@media all and (max-width: 470px) {

	.cont {
		padding: 20px 0 20px;
	}

	h1 {
		margin-bottom: 0;
	}

	#logo {
		width: 60%;
		height: 230px;
	}
}