/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++ STARTBILD GANZES FENSTER +++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/*
#head
   {
   background-image: url("../images/global/background.jpg");
   }
*/
      	      	      	
   #feld_container
      {
      display: -webkit-flex;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      flex-direction: column;
      -webkit-align-items: center;
      align-items: center;
      align-content: center;
      -webkit-justify-content: center;
      justify-content: center;
      width: 100%;
      min-height: 50%;
      background-position: center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      -moz-background-size: cover;
      -o-background-size: cover;
      -webkit-background-size: cover;
      background-size: cover;
      }
      	      	      	
   #feld_content
      {
      display: -webkit-flex;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-align-items: center;
      align-items: center;
      align-content: flex-start;
      -webkit-justify-content: space-around;
      justify-content: space-around;
      }
      @media only screen and (max-width: 399px) { #feld_content{flex-direction: column; width: 95%;} }
      @media only screen and (min-width: 400px) and (max-width: 769px) { #feld_content{flex-direction: column; width: 90%;} }
      @media only screen and (min-width: 770px) and (max-width: 1199px) { #feld_content{flex-direction: row; width: 80%;} }
      @media only screen and (min-width: 1200px) { #feld_content{flex-direction: row; width: 80%;} }
      	      	      	
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++ WEITERER INHALT +++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
#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: 100%;
   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%;
      }
      @media only screen and (max-width: 399px) { #content{width: 95%;} }
      @media only screen and (min-width: 400px) and (max-width: 769px) { #content{width: 90%;} }
      @media only screen and (min-width: 770px) and (max-width: 1199px) { #content{width: 45%;} }
      @media only screen and (min-width: 1200px) { #content{width: 45%;} }
      	      	      	
   #content_text_100
      {
      display: -webkit-flex;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      flex-direction: column;
      -webkit-align-items: center;
      align-items: center;
      align-content: center;
      -webkit-justify-content: center;
      justify-content: center;
      box-sizing: border-box;
      padding-left: 2%;
      padding-right: 2%;
      padding-top: 1%;
      padding-bottom: 1%;
      overflow: hidden;
      width: 100%;
      }
      	      	      	
      #content_text_100 h1
      	{
      	text-align: center;
      	}
      	@media only screen and (max-width: 399px) { #content_text_100 h1{font-size: 100%;} }
      	@media only screen and (min-width: 400px) and (max-width: 769px) { #content_text_100 h1{font-size: 130%;} }
      	@media only screen and (min-width: 770px) and (max-width: 1199px) { #content_text_100 h1{font-size: 170%;} }
      	@media only screen and (min-width: 1200px) { #content_text_100 h1{font-size: 200%;} }
      	      	      	
      #content_text_100 h2, #content_text_100 h3
      	{
      	text-align: center;
      	}
      	@media only screen and (max-width: 399px) { #content_text_100 h2{font-size: 90%;} }
      	@media only screen and (min-width: 400px) and (max-width: 769px) { #content_text_100 h2{font-size: 110%;} }
      	@media only screen and (min-width: 770px) and (max-width: 1199px) { #content_text_100 h2{font-size: 150%;} }
      	@media only screen and (min-width: 1200px) { #content_text_100 h2{font-size: 180%;} }
      	@media only screen and (max-width: 399px) { #content_text_100 h3{font-size: 80%;} }
      	@media only screen and (min-width: 400px) and (max-width: 769px) { #content_text_100 h3{font-size: 95%;} }
      	@media only screen and (min-width: 770px) and (max-width: 1199px) { #content_text_100 h3{font-size: 135%;} }
      	@media only screen and (min-width: 1200px) { #content_text_100 h3{font-size: 155%;} }
      	      	      	
      #content_text_100 p
      	{
      	text-align: justify;
      	width: 100%;
      	}
      	      	      	
      	#content_text_100 p sup
      	   {
      	   
      	   }
      	      	      	
      #content_text_100 a
      	{
      	text-align: center;
      	}
      	      	      	
      #content #content_text_100 h3
      	{
      	margin-bottom: 0px;
      	}
      	      	      	
      #content #content_text_100 p
      	{
      	margin-top: 2px;
      	margin-bottom: 2px;
      	text-align: center;
      	}
      	      	      	
/* ############################### Kontaktformular ############################### */
   #content_formular
      {
      
      }
      @media only screen and (min-width: 769px) {#content_formular_1{width: 45%;}}
      @media only screen and (max-width: 768px) {#content_formula_1{width: 100%;}}
      	      	      	
#kontaktformular
   {
   
   }
      	      	      	
   a#anker
      {
      cursor: default;
      margin-bottom: 25px;
      font-weight: bold;
      }
      	      	      	
      a#anker:hover
      	{
      	cursor: default;
      	margin-bottom: 25px;
      	}
      	      	      	
   input.button
      {
      background-color: rgb(255,255,255);
      color: rgb(48,81,160);
      width: 100px;
      height: 25px;
      padding-left: 3px;
      padding-right: 3px;
      padding-top: 1px;
      padding-bottom: 1px;
      border-style: solid;
      border-width: 2px;
      border-top-color: rgb(200,200,200);
      border-left-color: rgb(200,200,200);
      border-bottom-color: rgb(100,100,100);
      border-right-color: rgb(100,100,100);
      // border-radius: 5px;
      font-size: 100%;
      font-weight: bold;
      }
      	      	      	
      input.button:hover
      	{
      	background: rgb(200,200,200);
      	border-top-color: rgb(100,100,100);
      	border-left-color: rgb(100,100,100);
      	border-bottom-color: rgb(200,200,200);
      	border-right-color: rgb(200,200,200);
      	cursor: pointer;
      	}
      	      	      	
   /* ----------------------------- Standardeinstellung ----------------------------- */
   .eingabefeld
      {
      position: relative;
      }
      	      	      	
      .eingabefeld input, .eingabefeld select, .eingabefeld textarea
      	{
      	outline: none;
      	border-style: solid;
      	border-width: 2px;
      	border-left-color: rgb(48,81,160);
      	border-top-color: rgb(48,81,160);
      	border-right-color: rgba(48,81,160,0.5);
      	border-bottom-color: rgba(48,81,160,0.5);
      	box-shadow: none;
      	font-size: 90%;
      	}
      	      	      	
      .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;
      	resize: none;
      	}
      	      	      	
      .eingabefeld label
      	{
      	pointer-events: none;
      	position: absolute;
      	color: rgba(48,81,160,0.7);
      	background-color: rgba(255,255,255,0);
      	border-top-style: solid;
      	border-top-width: 2px;
      	border-top-color: rgb(48,81,160);
      	border-radius: 10px;
      	padding-left: 5px;
      	padding-right: 5px;
      	left: 15px;
      	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: -5px;
      	   }
      	      	      	
      	.eingabefeld label#pflicht
      	   {
      	   // color: rgba(0,0,0,1);
      	   }
      	      	      	
      	.eingabefeld label#optional
      	   {
      	   color: rgba(48,81,160,0.7);
      	   }
      	      	      	
      	/* ----------------------------- Pflichtfelder Auswahl/Eingabe ----------------------------- */
      	input.pflicht:invalid + label, select.pflicht:invalid + label, textarea.pflicht:invalid + label
      	   {
      	   color: rgba(48,81,160,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(48,81,160,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(48,81,160,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);
      	   }
      	   @media only screen and (max-width: 399px) { #fehlermeldung h3{font-size: 150%;} }
      	   @media only screen and (min-width: 400px) and (max-width: 769px) { #fehlermeldung h3{font-size: 150%;} }
      	   @media only screen and (min-width: 770px) and (max-width: 1199px) { #fehlermeldung h3{font-size: 180%;} }
      	   @media only screen and (min-width: 1200px) { #fehlermeldung h3{font-size: 200%;} }
      	      	      	
      	#fehlermeldung strong
      	   {
      	   
      	   }