@charset "utf-8";
/* CSS Document */

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0
}
body {
	width: 100%;
	font-family: Roboto, sans-serif;
	font-style: normal;
	font-size: clamp(1em, 1.8vw, 1.1em);
	line-height: 1.4;
}
h3 {
	font-size: 2.3em;
	font-weight: 400;
}
h4 {
	font-size: 1.5em;
	font-weight: 400;
	padding-bottom: 10px;
	text-transform: uppercase
}
strong {
	font-weight: 400;
}
a {
	text-decoration: none;
	color: #000
}
a:hover {
	text-decoration: underline
}
img {
	display: block;
	border: none
}
/*farben*/

.hbeige {
	background-color: #ebe8e1;
}/*Farben*/
.f-white {
	background-color: #fff
}
.f-blue {
	color: #fff;
	background-color: #7596a9
}
.f-gelb {
	background-color: #edd221;
	color: #000
}
.f-f2 {
	color: #000;
	background-color: #f2f2f2
}
.f-1a, .f-1a a {
	color: #ddd6cd;
	background-color: #1a1e21
}
.f-turkis {
	background-color: #d9e3da
}
.f-beige {
	background-color: #f1e7d1
}
.f-rosa {
	background-color: #d6b6a1
}
.f-hblau {
	background-color: #ced1d9
}
.f-grau {
	background-color: #b8bcc5
}
.f-hrosa {
	background-color: #e1d3cc
}
/*logo*/

.logo {
	width: 100%;
	height: 40vh;
	margin: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding: 0px 20px
}
.logo h3 {
	font-size: 1.4em;
	font-weight: 400;
	padding-top: 30px
}
.meta {
	color: #666;
	padding-top: 10px;
}
/*stiky-header*/

#myHeader {
	display: none;
	background: white;box-shadow: 3px 2px 6px hsla(0,0%,0%,0.3);
}
#myHeader.sticky {
	height: 50px;
	background-color: #fff;
	font-size: 16px;
	position: fixed;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
	opacity: 1;
}
#myHeader a {
	padding-right: 15px;
	color: #333;
	text-decoration: none;
}
.nosmall {
	display: none
}
.center {
	margin: auto
}

/*duo*/

[class*=duo-] {
display: flex;
flex-direction: column;
margin-bottom:20px;
overflow:hidden;
}
 [class*=duo-revers] {
display: flex;
flex-direction:column-reverse;
overflow:hidden;
}
[class*=duo-] .foto {
	padding: 20px
}
[class*=duo-] .text {
	padding: 20px 20px
}
.foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.flexall {
	display: flex;
	flex-direction: row;
}
.columnall {
	display: flex;
	flex-direction: column;
}
.zwei {
	display: flex;
	flex-direction: column;
	padding: 0px 20px 10px 20px
}
.text {
	flex: 1;
	padding-bottom: 20px
}
.zwei ul {
	padding-left: 14px
}
ul li {
	list-style-type: circle;
}
.marker {
	padding-left: 14px
}
.full {
	padding: 20px;
	margin-bottom: 5vh
}
.main {
	padding-bottom: 200px
}
/*formular*/

.formular {
	width: 100%;
	max-width: 600px;
	padding: 0px;
	box-sizing: border-box;
	font-family: Arial, sans-serif;
}
.form-group {
	position: relative;
	margin-bottom: 20px;
}
/* Inputs + Textarea */

.form-group input,  .form-group textarea {
	width: 100%;
	padding: 18px 14px 8px;
	font-size: 16px;
	border: 2px solid #fff;
	background: #f2f2f2;
	color: #111;
	box-sizing: border-box;
	outline: none;
	transition: 0.2s ease;
	font-family: inherit;
}
.form-group textarea {
	min-height: 140px;
	resize: vertical;
}
/* Fokus */

.form-group input:focus,  .form-group textarea:focus {
	border-color: #7596a9;
	box-shadow: 0 0 0 3px rgba(0,0,0,0.05);
}
/* Floating Label */

.form-group label {
	position: absolute;
	top: 15px;
	left: 14px;
	color: #666;
	font-size: 16px;
	background: #f2f2f2;
	padding: 0 6px;
	pointer-events: none;
	transition: 0.2s ease;
}



/* Wenn aktiv / ausgefüllt */

.form-group input:focus + label,  .form-group input:valid + label,  .form-group textarea:focus + label,  .form-group textarea:valid + label {
 top: -9px;
 left: 10px;
 font-size: 12px;
 color: #000;
}
/* Button */

button {
	width: 100%;
	padding: 14px;
	border: none;
	border-radius: 10px;
	background: #f2f2f2;
	color: #333;
	font-size: 16px;
	cursor: pointer;
	transition: 0.2s ease;
}
button:hover {
	background-color: #B9AE97
}
.senden {
	color: #666;
	padding-bottom: 15px
}
 @media only screen and (min-width:720px) {
.logo {
	padding: 0px 50px
}
.logo h3 {
	font-size: 1.7em;
}
.main {
	padding: 0px 50px 500px 50px
}
/*sticky-header*/

#myHeader {
	padding-right: 25px;
	box-shadow: 3px 2px 6px hsla(0,0%,0%,0.3);
}
#myHeader.sticky {
	justify-content: space-between;
}
.schatten {
  box-shadow: 3px 5px 10px hsla(0,0%,0%,0.5);
}
.nosmall {
	display: block;
	padding-left: 50px
}
 [class*=duo-] {
display: flex;
flex-direction:row;
margin-bottom:20px
}
[class*=duo-]  .foto {
	flex: 1
}
[class*=duo-]  .text {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 20px
}
.under {
	height: 20px;
	border-bottom: 1px solid #ccc;
}
.end {
	height: 20px;
	border-top: 1px solid #ccc;
	margin-bottom: 20px
}
/*zwei*/

.zwei {
	display: flex;
	flex-direction: row;
}
.text {
	flex: 1;
	padding-top: 30px
}
.text.right {
	padding-left: 40px
}
.marker {
	padding-left: 0px;
}



/*vh*/

[class*=vh-] {
display:flex
}
.vh-fit {
	height: calc(100vh - 60px)
}
.vh-5 {
	height: 5vh
}
.vh-10 {
	height: 10vh
}
.vh-15 {
	height: 15vh
}
.vh-20 {
	height: 20vh
}
.vh-25 {
	height: 25vh
}
.vh-30 {
	height: 30vh
}
.vh-35 {
	height: 35vh
}
.vh-40 {
	height: 40vh
}
.vh-45 {
	height: 45vh
}
.vh-50 {
	height: 50vh
}
.vh-60 {
	height: 60vh
}
.vh-70 {
	height: 70vh
}
.vh-75 {
	height: 75vh
}
.vh-80 {
	height: 80vh
}
.vh-90 {
	height: 90vh
}
.vh-95 {
	height: 95vh
}
.vh-100 {
	height: 100vh
}
/*Prozente*/

.pro-5 {
	width: 5%
}
.pro-10 {
	width: 10%
}
.pro-15 {
	width: 15%
}
.pro-20 {
	width: 20%
}
.pro-25 {
	width: 25%
}
.pro-30 {
	width: 30%
}
.pro-35 {
	width: 35%
}
.pro-40 {
	width: 40%
}
.pro-45 {
	width: 45%
}
.pro-50 {
	width: 50%
}
.pro-60 {
	width: 60%
}
.pro-70 {
	width: 70%
}
.pro-75 {
	width: 75%
}
.pro-80 {
	width: 80%
}
.pro-90 {
	width: 90%
}
.pro-100 {
	width: 100%
}
/*row*/

.flex {
	display: flex;
	flex-direction: row;
}
.row-C {
	justify-content: center
}
.row-R {
	justify-content: flex-end
}
.row-M {
	align-items: center
}
.row-B {
	align-items: flex-end
}
.row-LT {
	justify-content: flex-start;
	align-items: flex-start
}
.row-LM {
	justify-content: flex-start;
	align-items: center
}
.row-LB {
	justify-content: flex-start;
	align-items: flex-end
}
.row-CT {
	justify-content: center;
	align-items: flex-start
}
.row-CM {
	justify-content: center;
	align-items: center
}
.row-CB {
	justify-content: center;
	align-items: flex-end
}
.row-RT {
	justify-content: flex-end;
	align-items: flex-start
}
.row-RM {
	justify-content: flex-end;
	align-items: center
}
.row-RB {
	justify-content: flex-end;
	align-items: flex-end
}
/*co*/

.flexcolumn {
	display: flex;
	flex-direction: column;
}
.co-C {
	align-items: center
}
.co-R {
	align-items: flex-end
}
.co-M {
	justify-content: center
}
.co-B {
	justify-content: flex-end
}
.co-TL {
	justify-content: flex-start;
	align-items: flex-start
}
.co-TC {
	justify-content: flex-start;
	align-items: center
}
.co-TR {
	justify-content: flex-start;
	align-items: flex-end
}
.co-ML {
	justify-content: center;
	align-items: flex-start
}
.co-MC {
	justify-content: center;
	align-items: center
}
.co-MR {
	justify-content: center;
	align-items: flex-end
}
.co-BL {
	justify-content: flex-end;
	align-items: flex-start
}
.co-BC {
	justify-content: flex-end;
	align-items: center
}
.co-BR {
	justify-content: flex-end;
	align-items: flex-end
}
.reverse {
	flex-direction: row-reverse
}
.c-reverse {
	flex-direction: column-reverse
}
.space-between {
	justify-content: space-between
}
.space-around {
	justify-content: space-around
}
.space-evenly {
	justify-content: space-evenly
}
.stretch {
	align-items: stretch;
}
.end {
	flex-grow: 1;
	align-self: flex-end;
}
}