/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++ STARTBILD GANZES FENSTER +++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
#head
   {
   background-image: url("../images/global/background.jpg");
   }
      	      	      	
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++ WEITERER INHALT +++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
#container
   {
   background-color: rgb(255,255,255);
   height: auto;
   }
      	      	      	
   #content_ueberschrift
      {
      display: -webkit-flex;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      flex-direction: row;
      -webkit-align-items: center;
      align-items: center;
      align-content: center;
      -webkit-justify-content: center;
      justify-content: center;
      width: 96%;
      height: 80px;
      padding-left: 2%;
      padding-right: 2%;
      padding-top: 5%;
      padding-bottom: 5%;
      background-color: rgb(255,255,255);
      font-weight: bold;
      font-size: 150%;
      text-align: center;
      }
      	      	      	
   #content_ueberschrift_text
      {
      
      }
      	      	      	
#rahmen
   {
   display: -webkit-flex;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   -webkit-align-items: flex-start;
   align-items: flex-start;
   align-content: center;
   -webkit-justify-content: space-around;
   justify-content: space-around;
   height: auto;
   width: 96%;
   max-width: 1200px;
   min-height: 50%;
   padding-left: 2%;
   padding-right: 2%;
   padding-top: 0%;
   padding-bottom: 5%;
   }
      	      	      	
   #content
      {
      display: -webkit-flex;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      flex-direction: column;
      -webkit-align-items: flex-start;
      align-items: flex-start;
      align-content: flex-start;
      -webkit-justify-content: flex-start;
      justify-content: flex-start;
      overflow: hidden;
      width: 45%;
      }
      	      	      	
   #content_text
      {
      width: 100%;
      margin-top: 10px;
      }
      	      	      	
      #content_text h2
      	{
      	text-align: center;
      	}
      	      	      	
      #content_text p
      	{
      	
      	}
      	      	      	
      	#content_text p sup
      	   {
      	   
      	   }
      	      	      	
      #content_text h3
      	{
      	text-align: center;
      	font-size: 120%;
      	font-weight: bold;
      	color: rgb(255,255,255);
      	text-shadow: -2px -2px 2px rgb(0,0,0), -2px 2px 2px rgb(0,0,0), 2px -2px 2px rgb(0,0,0), 2px 2px 2px rgb(0,0,0);
      	}
      	      	      	
      #content_text img
      	{
      	height: auto;
      	width: auto;
      	max-width: 100%;
      	}
      	      	      	
/* ############################### Kontaktformular ############################### */
   #content_formular_1
      {
      
      }
      @media only screen and (min-width: 769px) {#content_formular_1{width: 45%;}}
      @media only screen and (max-width: 768px) {#content_formula_1{width: 100%;}}
      	      	      	
   #content_formular_2
      {
      width: 100%;
      }
      	      	      	
#kontaktformular
   {
   
   }
      	      	      	
   a#anker
      {
      color: rgb(0,0,0);
      cursor: default;
      margin-bottom: 25px;
      font-weight: bold;
      }
      	      	      	
      a#anker:hover
      	{
      	color: rgb(0,0,0);
      	cursor: default;
      	margin-bottom: 25px;
      	}
      	      	      	
   input.button
      {
      background-color: rgb(130,130,130);
      color: rgb(230,140,30);
      width: 100px;
      height: 30px;
      padding-left: 5px;
      padding-right: 5px;
      padding-top: 2px;
      padding-bottom: 2px;
      border-radius: 5px;
      font-size: 100%;
      font-weight: bold;
      transition: background-color 1s, color 1s;
      }
      	      	      	
      input.button:hover
      	{
      	color: rgb(0,70,230);
      	background: rgb(230,140,30);
      	transition: background-color 0.5s, color 0.5s;
      	}
      	      	      	
   /* ----------------------------- Standardeinstellung ----------------------------- */
   .eingabefeld
      {
      position: relative;
      }
      	      	      	
      .eingabefeld input, .eingabefeld select, .eingabefeld textarea
      	{
      	outline: none;
      	border-style: solid;
      	border-width: 2px;
      	border-left-color: rgb(100,100,100);
      	border-top-color: rgb(100,100,100);
      	border-right-color: rgb(175,175,175);
      	border-bottom-color: rgb(175,175,175);
      	box-shadow: none;
      	font-size: 100%;
      	}
      	      	      	
      .eingabefeld select
      	{
      	width: 100px;
      	height: 25px;
      	}
      	      	      	
      .eingabefeld input#gross
      	{
      	width: 300px;
      	height: 22px;
      	padding-left: 3px;
      	padding-right: 3px;
      	}
      	      	      	
      .eingabefeld input#klein
      	{
      	width: 150px;
      	height: 22px;
      	padding-left: 3px;
      	padding-right: 3px;
      	}
      	      	      	
      .eingabefeld textarea
      	{
      	width: 300px;
      	height: 150px;
      	padding-top: 10px;
      	padding-left: 3px;
      	padding-right: 3px;
      	padding-bottom: 3px;
      	}
      	      	      	
      .eingabefeld label
      	{
      	pointer-events: none;
      	position: absolute;
      		// font-size: 100%;
      	color: rgba(0,0,0,0.5);
      	background-color: rgba(255,255,255,0);
      	border-radius: 10px;
      		// left: 5px;
      		// top: 3px;
      	padding-left: 5px;
      	padding-right: 5px;
      	   	left: 15px;
      	   	// top: -6px;
      	   	font-size: 60%;
      	   	background-color: rgba(255,255,255,1);
      	   	font-weight: bold;
      	transition: all 0.5s ease;
      	}
      	      	      	
      	.eingabefeld input + label, .eingabefeld select + label
      	   {
      	   top: -6px;
      	   }
      	      	      	
      	.eingabefeld textarea + label
      	   {
      	   top: -4px;
      	   }
      	      	      	
      	.eingabefeld label#pflicht
      	   {
      	   // color: rgba(0,0,0,1);
      	   }
      	      	      	
      	.eingabefeld label#optional
      	   {
      	   color: rgba(0,0,0,0.5);
      	   }
      	      	      	
      	/* ----------------------------- Pflichtfelder Auswahl/Eingabe ----------------------------- */
      	input.pflicht:invalid + label, select.pflicht:invalid + label, textarea.pflicht:invalid + label
      	   {
      	   color: rgba(0,0,0,1);
      	   }
      	      	      	
      	input.pflicht:valid + label, select.pflicht:valid + label, textarea.pflicht:valid + label
      	   {
      	   color: rgba(50,150,77,1);
      	   transition: all 0.5s ease;
      	   }
/*
      	input.pflicht:focus + label, input.pflicht:active + label, input.pflicht:valid + label, select.pflicht:focus + label, select.pflicht:active + label, select.pflicht:valid + label
      	   {
      	   left: 15px;
      	   top: -6px;
      	   font-size: 60%;
      	   color: rgba(0,0,0,1);
      	   background-color: rgba(255,255,255,1);
      	   transition: all 0.5s ease;
      	   }
      	      	      	
      	   input.pflicht:invalid + label, select.pflicht:invalid + label, textarea.pflicht:invalid + label
      	      {
      	      // color: rgba(200,0,0,0.5);
      	      }
      	      	      	
      	   input.pflicht:valid + label, select.pflicht:valid + label, textarea.pflicht:valid + label
      	      {
      	      color: rgba(50,150,77,1);
      	      font-weight: bold;
      	      }
      	      	      	
      	textarea.pflicht:focus + label, textarea.pflicht:active + label, textarea.pflicht:valid + label
      	   {
      	   left: 15px;
      	   top: -4px;
      	   font-size: 60%;
      	   background-color: rgba(255,255,255,1);
      	   transition: all 0.5s ease;
      	   }
*/
      	      	      	
      	/* ----------------------------- Optionale Felder Auswahl/Eingabe ----------------------------- */
      input.optional
      	{
      	
      	}
      	      	      	
/*
      	input.optional:focus + label, input.optional:active + label, input.optional:valid + label
      	   {
      	   left: 15px;
      	   top: -6px;
      	   font-size: 60%;
      	   color: rgba(0,0,0,1);
      	   background-color: rgba(255,255,255,1);
      	   transition: all 0.5s ease;
      	   }
      	      	      	
      	input.optional:valid + label
      	   {
      	   font-weight: bold;
      	   }
*/
      	      	      	
   /* ----------------------------- Nachricht erfolgreich/nicht erfolgreich ----------------------------- */
      #erfolgreich
      	{
      	font-size: 70%;
      	}
      	      	      	
      	#erfolgreich strong
      	   {
      	   
      	   }
      	      	      	
      #fehlermeldung
      	{
      	font-size: 70%;
      	border-style: solid;
      	border-width: 2px;
      	border-color: rgba(195,35,40,0.8);
      	padding-top: 5px;
      	padding-left: 5px;
      	padding-right: 5px;
      	padding-bottom: 5px;
      	}
      	      	      	
      	#fehlermeldung h3
      	   {
      	   color: rgba(195,35,40,0.8);
      	   }
      	      	      	
      	#fehlermeldung strong
      	   {
      	   
      	   }