@charset "utf-8";
/* CSS Document */
 html{
	scroll-behavior: smooth;/*sanft zum Linkziel scrollen*/
}
/*HEADER-LOGO - links*/
body{
			background-color: #dadbdf;
}
@media (prefers-color-scheme: dark) {
body {
    	background-color: #000 !important;
}

#oben .wrapper_form h1,
#oben .wrapper_form .col_2_4 p,
#oben .wrapper_form .col_2_4 #form1 p label{
	 	color: #fff !important;
}

#oben .wrapper_form .col_1_4right .vr{
	 	color: #fff !important;
}
#oben .wrapper_form .col_2_4 #form1 .daten .dsg{
	 	color: #fff !important;
}
#oben .site-footer nav ul li h2,
#oben .site-footer nav ul li h3,	 
#oben .site-footer p {
    	color: #fff !important;
}
}
/*HEADER-LOGO - links*/
.logo{
			display: block;/*Siehe HTML*/
			height: 108px;/*Siehe HTML*/
			margin: 15px 0 10px 15px;/*siehe aside -logo*/		
}
/*KONTAKT*/
.wrapper_form {
			max-width: 100%;
			overflow: hidden;
			padding-top: 20px;	  
}

/*KONTAKT der Titel h1*/
.wrapper_form h1 {
	  		color: #010101; /*#333;*/
	  		font-family: 'Dancing Script', cursive;
  			font-style: normal;
  			font-weight: 500;
  			font-size: 4rem; /*54px*/
	  		line-height: 3.75rem; /*60px*/
	  
	  		padding-top: 50px;
	  		margin: 0% 0% 0% 13%;/*10% width(col_1_4left) + 3% margin right(col_2_4)*/
}
/*KONTAKT - Spalte LINKS*/
.wrapper_form .col_1_4left {
	  		width: 10%;
	  		margin: 4% 0% 3% 0%;
	  		float: left;
}
/*KONTAKTFORMULAR - MITTE - 2 Spalten*/
.wrapper_form .col_2_4 {
	  		width: 49%;
	  		margin: 4% 6% 3% 3%;
	  		float: left;
}
/*KONTAKT - RECHTS - Adresse*/
.wrapper_form .col_1_4right {
	  		width: 30%;
	  		margin: 4% 0% 3% 0%;   
	  		float: left;
} 
/*KONTAKT - RECHTS - Mail-Adresse*/
.wrapper_form .col_1_4right .vr a{/* e-amil adresse -rechts*/
			color:#F03;
			font-weight:500;
			text-decoration: none;		
}

.wrapper_form .col_1_4right .vr a:hover,
.wrapper_form .col_1_4right .vr a:focus{
			color: #010101; 
			font-weight:500;
			background-color:#fff;
}

/*KONTAKTFORMULAR - MITTE - 2 Spalten*/
.wrapper_form .col_2_4 p{	
	  		font: 500 17px/28px 'Lato', sans-serif;
			color:#010101; 
}

/*KONTAKTFORMULAR - MITTE - FORMULAR*/
form {
			margin-top: 30px;/*Abstand zw. den Balken*/
}
label {
			display: block;
	  		cursor: pointer;		/*Maus wird beim überfahren des Labeltextes zur Hand*/

	  		margin-bottom: 6px; 	/*Abstand zw. Name-Vorname und Feld*/
	  		color:#000;			/*Abstand zw. Name-Vorname und Feld*/
}
input[type='text'],
textarea {
	  		width: 100%;
	  		border: 1px solid #f03;
	  		padding: 5px;
	  		margin-bottom: 24px;
	  		font: 500 17px/24px 'Lato', sans-serif;	/*Grösse der Schrift in den Balken*/
}
textarea {
			height: 120px;
}
input:hover, 
input:focus,/*Überfahren mit der Maus Rand wird rot*/
textarea:hover, 
textarea:focus /*Text eingabe Feld wird dunkler*/ {
			border: 1px solid #ff6666;	  
}

/*reset- submit*/
input[type='submit'],
input[type='reset'] {
	  		cursor: pointer;/*Maus ==> Hand*/
	  		margin-right: 20px;
	  		padding: 4px 10px;
	  		
	  		font-size: 1rem;/*16px font-size: inherit; übernimmt Schriftgrösse von den umliegenden Elemenenten*/
	  		font-weight: 600;
	  		border-radius: 4px;
	  		background: #fff;
	  		color: #f03;
	  		border: 1px solid #f03;
			transition: 200ms all ease-in;
}
input[type='submit']:hover, 
input[type='submit']:focus, 	    
input[type='reset']:hover, 
input[type='reset']:focus{
	  		background: #f03;
	  		color: #000;
	  		font-weight:600;
} 

.wrapper_form .col_1_4right .vr{
	  		font-size: 1.188rem;/*19px;*/
	  		color: #f03;
	  		
	  		margin-bottom: 19px;
	  		text-align: right;
} 
/*KONTAKT -RECHTS -Adresse unten Titel - p*/  
.startseite .wrapper_form .col_1_4right  p {
	  		font-size: 1rem;/*16px;*/
			color: #010101; /*#333;*/
	  		font-weight:500;
			margin: 0 0 15px; /* oben=0-- rechts und links sind Null-- unten ist 15px*/
}
/* MAIL- BUTTON  -Linker Rand*/
#mail-btn{
			display: block;
			width: 40px;
			height: 170px;
			position: absolute;								/* Plazierung  vorher relativ = bewegt sich*/
			top: 300px;
			left: 0;
			z-index: 1;										/* Reihenfolge der Elemente */
			transition: background 0.6s;					/* Animation - weiche Übergänge */
			background-image:url(../images/mail_btn_en.png);	/* Mit dem Wert url("") lassen sich auch Bilder als Hintergrund einfügen. */
			background-repeat: no-repeat;
}  
#mail-btn:hover,
#mail-btn:focus{
			background-image:url(../images/mail_btn_en.png);
			background-repeat: no-repeat;
			background-position: -40px 0px;
}

/*dsg*/
.wrapper_form .col_2_4 #form1 p label #dsgvo{
	 		margin-top: 3em;
}
.wrapper_form .col_2_4 #form1 .daten{
	 		font-size:14px;
	 		font-size:0.9rem;
}
.wrapper_form .col_2_4 #form1 p .dsg{
			color:#010101; 
}
.wrapper_form .col_2_4 #form1 p .dsg:hover, 
.wrapper_form .col_2_4 #form1 p .dsg:focus{
			background-color:#ff6666;
}


/*SCROLL TO TOP ==> Klick nach Oben*/
#oben .startseite .wrapper_form .col_2_4 #form1 p .top{   	
		color: #fff;
    	background: #f03;
    	text-decoration: none;
    	text-transform: lowercase;
    	font-size: 1.125rem; /*18px*/
    	line-height: 1.75rem;/*30px*/
		border: 2px solid #dadbdf;
		/*border-radius: 15px;*/
    	padding: 6px 12px 3px 12px ;
    	
}
#oben .startseite .wrapper_form .col_2_4 #form1 p .top:hover,
#oben .startseite .wrapper_form .col_2_4 #form1 p .top:focus{   
    	color: #fff;
    	background: #000;
    	text-decoration: none;
    	text-transform: lowercase;
    	font-size: 1.125rem; /*18px*/
    	line-height: 1.75rem;/*30px*/
		border: 2px solid #dadbdf;
		/*border-radius: 15px;*/
    	padding: 6px 12px 3px 12px ;
}

	 
@media screen and (max-width: 1420px) {
/*KONTAKTFORMULAR - MITTE - 2 Spalten*/
.wrapper_form .col_2_4 p{	
	  		font: 500 17px/28px 'Lato', sans-serif;
}
/*KONTAKTFORMULAR - MITTE - FORMULAR*/
input[type='text'],
textarea {
    		font: 500 17px/24px 'Lato', sans-serif;
}
/*reset- submit*/
input[type='submit'],
input[type='reset'] {
	 		font-size: 1.063rem; /*17px*/
			font-weight:600;	 
}
 
/*KONTAKT -RECHTS -Adresse unten Titel -h2*/
.wrapper_form .col_1_4right .vr{
	  		font-size: 1.125rem;/*18px*/
}
/*KONTAKT -RECHTS -Adresse unten Titel - p*/    
.wrapper_form .col_1_4right  p {
	  		font-size: 1rem;/*16px*/
}
}

@media screen and (max-width: 1000px) {
/*KONTAKT der Titel h1*/
.wrapper_form h1 {
	  		font-size: 2.813rem;/*45px*/
	  		line-height: 3.125rem;/*50px*/
}
}
/*Wenn das Browser-Fenster 945px oder kleiner ist, ändert sich etwas*/
@media screen and (max-width: 945px) {
/*dsg*/
.wrapper_form .col_2_4 #form1 .daten{
	 		font-size:0.844rem;/*1.5px*/
}
}

@media screen and (max-width: 769px) {
/*KONTAKT - Spalte LINKS*/
.wrapper_form .col_1_4left {
	  		width: 8%;
}
/*KONTAKTFORMULAR - MITTE - 2 Spalten*/
.wrapper_form .col_2_4 {
	  		width: 51%;
}
/*KONTAKT - RECHTS - Adresse*/
.wrapper_form .col_1_4right {
	  		width: 30%;
}	
/*KONTAKT der Titel h1*/
.wrapper_form h1 {
	  		font-size: 2.5rem;/*40px*/
	  		line-height: 2.813rem;/*45px*/
	  		padding-top: 30px;
	  		margin: 0% 0% 0% 11%;/*8% width(col_1_4left) + 3% margin right(col_2_4)*/
}
/*KONTAKTFORMULAR - MITTE - 2 Spalten*/
.wrapper_form .col_2_4 p{	
	  		font: 400 16px/26px 'Lato', sans-serif;
	  		color:#010101; /*#333;*/
}
/*KONTAKTFORMULAR - MITTE - FORMULAR*/
input[type='text'],
  textarea {
	  		font: 400 16px/24px 'Lato', sans-serif;/*Grösse der Schrift in den Balken*/
}
/*reset- submit*/
input[type='submit'],
input[type='reset'] {
	  		font-size: 0.938rem;/*15px*/
	  		font-weight: 300;	 
}
/*KONTAKT -RECHTS -Adresse unten Titel - h2*/
.wrapper_form .col_1_4right .vr{
	  		font-size: 1rem;/*16px*/
	  		font-weight:500;
} 

/*KONTAKT -RECHTS -Adresse unten Titel - p*/  
.wrapper_form .col_1_4right  p {
	  		font-size: 0.938rem;/*15px*/
	  		font-weight:500;/*480 ist nicht gültig*/
}
/*dsg*/
.wrapper_form .col_2_4 #form1 .daten{
	 		font-size:0.813rem;/*13px*/
}
}

@media screen and (max-width: 667px) {
/*KONTAKTFORMULAR - MITTE - 2 Spalten*/
.wrapper_form .col_2_4 {
	  		width: 80%;
			margin: 4% 3% 3% 6%;			
}
/*KONTAKT - RECHTS - Adresse*/
.wrapper_form .col_1_4right {
	  		display:none; /*das Element nicht angezeigt  und nimmt auch keinen Platz ein*/ 
}
/*KONTAKT der Titel h1*/
.wrapper_form h1 {
	  		font-size: 2.5rem; /*40px*/
	 		line-height: 2.813rem;/*45px*/
	  		padding-top: 30px;
	  		margin: 0% 0% 0% 14%;/*8% width(col_1_4left) + 6% margin right(col_2_4)*/
}
/*KONTAKTFORMULAR - MITTE - 2 Spalten*/
.wrapper_form .col_2_4 p{	
	  		font: 400 15px/25px 'Lato', sans-serif;
	  		color:#010101; /*#333;*/
}
/*KONTAKTFORMULAR - MITTE - FORMULAR*/
input[type='text'],
textarea {
	  		font: 400 15px/24px 'Lato', sans-serif;/*Grösse der Schrift in den Balken*/
}
/*reset- submit*/
input[type='submit'],
input[type='reset'] {
	  		font-size: 0.875rem;/*14px*/
	  		font-weight: 300;	 
}
/*KONTAKT -RECHTS -Adresse unten Titel - h2*/
.wrapper_form .col_1_4right .vr{
	  		font-size: 0.938rem;/*15px*/
	  		font-weight:500;/*520 ist nicht gültig*/
} 
/*KONTAKT -RECHTS -Adresse unten Titel - p*/  
.wrapper_form .col_1_4right  p {
	  		font-size: 0.875rem;/*14px*/
	  		font-weight:500;/*460 ist nicht gültig*/
}
/*dsg*/
.wrapper_form .col_2_4 #form1 .daten{
	 		font-size:0.75rem;/*12px*/
}
}

@media screen and (max-width: 570px) {
/*KONTAKT - Spalte LINKS*/
.wrapper_form .col_1_4left {
	  		width: 8%;
			margin: 4% 0% 3% 0%;
}
/*KONTAKTFORMULAR - MITTE - 2 Spalten*/
.wrapper_form .col_2_4 {
	  		width: 80%;
			margin: 4% 3% 3% 6%;			
}
/*KONTAKT - RECHTS - Adresse*/
.wrapper_form .col_1_4right {
	  		display:none; /*das Element nicht angezeigt  und nimmt auch keinen Platz ein*/ 
}
/*KONTAKT der Titel h1*/
.wrapper_form h1 {
	  	 	margin: 0% 0% 0% 14%;/*8% width(col_1_4left) + 6% margin right(col_2_4)*/
}
}

@media screen and (max-width: 545px) {
/*HEADER-LOGO - links*/
.logo{
			margin: 15px 0 10px 0;/*siehe aside -logo*/		
}	
/*KONTAKT - Spalte LINKS*/
.wrapper_form .col_1_4left {
	  		width: 8%;
			margin: 4% 0% 3% 0%;
}
/*KONTAKTFORMULAR - MITTE - 2 Spalten*/
.wrapper_form .col_2_4 {
	  		width: 80%;
			margin: 4% 3% 3% 6%;			
}
/*KONTAKT - RECHTS - Adresse*/
.wrapper_form .col_1_4right {
			display:none; /*das Element nicht angezeigt  und nimmt auch keinen Platz ein*/ 
}
/*KONTAKT der Titel h1*/
.wrapper_form h1 {
			margin: 0% 0% 0% 14%;/*8% width(col_1_4left) + 6% margin right(col_2_4)*/
}
}

@media screen and (max-width: 418px) {
/*KONTAKT - Spalte LINKS*/
.wrapper_form .col_1_4left {
	  		width: 7%;
			margin: 4% 0% 3% 0%;
}
/*KONTAKTFORMULAR - MITTE - 2 Spalten*/
.wrapper_form .col_2_4 {
	  		width: 80%;
			margin: 4% 3% 3% 8%;			
}
/*KONTAKT - RECHTS - Adresse*/
.wrapper_form .col_1_4right {
			display:none; /*das Element nicht angezeigt  und nimmt auch keinen Platz ein*/ 
}
/*KONTAKT der Titel h1*/
.wrapper_form h1 {
			 margin: 0% 0% 0% 15%;/*7% width(col_1_4left) + 8% margin right(col_2_4)*/
}	
}

@media screen and (max-width: 370px) {
/*KONTAKT - Spalte LINKS*/
.wrapper_form .col_1_4left {
	  		width: 7%;
			margin: 4% 0% 3% 0%;
}
/*KONTAKTFORMULAR - MITTE - 2 Spalten*/
.wrapper_form .col_2_4 {
	  		width: 80%;
			margin: 4% 1% 3% 12%;			
}
/*KONTAKT - RECHTS - Adresse*/
.wrapper_form .col_1_4right {
			display:none; /*das Element nicht angezeigt  und nimmt auch keinen Platz ein*/ 
}
/*KONTAKT der Titel h1*/
.wrapper_form h1 {
			margin: 0% 0% 0% 16%;/*7% width(col_1_4left) + 9% margin right(col_2_4)*/
}		
}