html,body
   {
   width: 100%;
   margin-left: auto;
   margin-right: auto;
   background-color: rgb(255,255,255);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: bottom right;
   background-attachment: fixed;
   color: rgb(0,0,0);
   font-family: Verdana;
   font-size: 90%;
   text-align: center;
   }
   @media only screen and (min-width: 1201px) {html,body {background-image: url("bg.jpg");}}
   @media only screen and (max-width: 1200px) {html,body {background-image: url("bg.jpg");}}
   @media only screen and (max-width: 720px) {html,body {background-image: url("bg.jpg");}}
   @media only screen and (max-width: 400px) {html,body {background-image: url("bg.jpg");}}
      	      	      	
   h2
      {
      text-align: center;
      color: rgb(30,59,117);
      text-shadow: 0.1em 0.1em 0.1em rgb(100,100,100);
      font-size: 180%;
      margin-top: 0%;
      }
      	      	      	
      h2 img
      	{
      	width: auto;
      	height: auto;
      	}
      	@media only screen and (min-width: 1201px) {h2 img { max-width: 35%; max-height: 70px; }}
      	@media only screen and (max-width: 1200px) {h2 img { max-width: 50%; max-height: 60px; }}
      	@media only screen and (max-width: 720px) {h2 img { max-width: 60%; max-height: 50px; }}
      	@media only screen and (max-width: 400px) {h2 img { max-width: 80%; max-height: 40px; }}
      	      	      	
   hr
      {
      width: 95%;
      }
      	      	      	
   a
      {
      color: rgb(0,0,255);
      // text-shadow: 1px 1px 1px rgb(0,0,0);
      text-decoration: underline;
      font-weight: bold;
      }
      	      	      	
      a:hover
      	{
      	color: rgb(0,0,180);
      	// text-shadow: 0px 0px 1px rgb(0,0,0);
      	}
      	      	      	
   ul
      {
      list-style-type: none;
      }
      	      	      	
#container
   {
   display: -webkit-flex;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   -webkit-align-items: stretch;
   align-items: stretch;
   align-content: flex-start;
   -webkit-justify-content: space-between;
   justify-content: space-between;
   box-sizing: border-box;
   position: relative;
   background-color: rgba(200,200,200,0.7);
   margin-left: auto;
   margin-right: auto;
   padding-left: 0.2em;
   padding-right: 0.2em;
   text-align: center;
   border-style: solid;
   border-radius: 1.5em;
   border-color: rgb(0,0,255);
   }
   @media only screen and (max-width: 400px) {#container {width: 98%;}}
   @media only screen and (min-width: 401px)  and (max-width: 720px) {#container {width: 95%;}}
   @media only screen and (min-width: 721px)  and (max-width: 1400px) {#container {width: 90%; max-width: 1200px;}}
   @media only screen and (min-width: 1401px) {#container {width: 1300px;}}
      	      	      	
   #container h3
      {
      width: 100%;
      }
      	      	      	
   #top_info
      {
      display: -webkit-flex;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      -webkit-align-items: stretch;
      align-items: stretch;
      align-content: flex-start;
      -webkit-justify-content: space-between;
      justify-content: space-between;
      box-sizing: border-box;
      text-align: center;
      width: 100%;
      margin-top: 5px;
      }
      	      	      	
   #top_info hr
      {
      width: 98%;
      }
      	      	      	
   #aktueller_user
      {
      display: -webkit-flex;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      -webkit-align-items: flex-start;
      align-items: flex-start;
      align-content: flex-start;
      -webkit-justify-content: flex-start;
      justify-content: flex-start;
      box-sizing: border-box;
      padding-left: 10px;
      }
      @media only screen and (min-width: 1201px) {#aktueller_user {width: 45%;}}
      @media only screen and (max-width: 1200px) {#aktueller_user {width: 45%;}}
      @media only screen and (max-width: 720px) {#aktueller_user {width: 45%;}}
      @media only screen and (max-width: 400px) {#aktueller_user {width: 45%;}}
      	      	      	
      #aktueller_user div
      	{
      	text-align: left;
      	}
      	      	      	
   #menue
      {
      display: -webkit-flex;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      -webkit-align-items: center;
      align-items: center;
      align-content: flex-end;
      -webkit-justify-content: flex-start;
      justify-content: flex-start;
      box-sizing: border-box;
      padding-right: 10px;
      }
      @media only screen and (min-width: 1201px) {#menue {width: 45%;}}
      @media only screen and (max-width: 1200px) {#menue {width: 45%;}}
      @media only screen and (max-width: 720px) {#menue {width: 45%;}}
      @media only screen and (max-width: 400px) {#menue {width: 45%;}}
      	      	      	
      #menue form input
      	{
      	margin-bottom: 5px;
      	font-weight: bold;
      	}
      	@media only screen and (min-width: 1201px) {#menue form input {width: auto;}}
      	@media only screen and (max-width: 1200px) {#menue form input {width: auto;}}
      	@media only screen and (max-width: 720px) {#menue form input {padding: 5px; 15px; font-size: 110%;}}
      	@media only screen and (max-width: 400px) {#menue form input {padding: 5px; 15px; font-size: 110%;}}
      	      	      	
    #menue_mobil
      	{
      	z-index: 900;
      	display: -webkit-flex;
      	display: -webkit-box;
      	display: -ms-flexbox;
      	display: flex;
      	flex-direction: column;
      	flex-wrap: wrap;
      	-webkit-align-items: center;
      	align-items: center;
      	align-content: center;
      	-webkit-justify-content: flex-start;
      	justify-content: flex-start;
      	position: relative;
      	height: 10%;
      	margin-top: 20px;
      	margin-bottom: 0;
      	padding-top: 2px;
      	padding-bottom: 0px;
      	font-weight: bold;
      	}
      	      	      	
      	#menue_mobil input#strg_menue_mobil
      	   {
      	   display: none;
      	   }
      	      	      	
      	#menue_mobil label#label_menue_mobil 
      	   {
      	   position: relative;
      	   margin-top: -10px;
      	   border-radius: 5px;
      	   cursor: pointer;
      	   font-size: 80%;
      	   color: rgb(255,255,255);
      	   }
      	      	      	
      	   #menue_mobil label#label_menue_mobil:hover
      	      {
      	      
      	      }
      	      	      	
      	   label#label_menue_mobil::after
      	      {
      	      position: relative;
      	      content: url("menue.png");
      	      }
      	      	      	
      	   #menue_mobil input#strg_menue_mobil:not(:checked) ~ .steuerung
      	      {
      	      display: none;
      	      }
      	      	      	
      	   #menue_mobil input#strg_menue_mobil:checked ~ label#label_menue_mobil:after, label#label_menue_mobil2
      	      {
      	      content: url("menue_leer.png");
      	      cursor: default;
      	      }
      	      	      	
      	   label#label_menue_mobil2
      	      {
      	      content: url("menue_zu.png");
      	      cursor: pointer;
      	      position: absolute;
      	      margin-top: -5px;
      	      margin-right: 5px;
      	      right: 0;
      	      -webkit-user-select: none;
      	      -moz-user-select: -moz-none;
      	      -ms-user-select: none;
      	      user-select: none;
      	      }
      	      	      	
      	   #menue_mobil input#strg_menue_mobil:checked ~ .steuerung
      	      {
      	      display: flex;
      	      margin-bottom: 0px;
      	      }
      	      	      	
      	#strg
      	   {
      	   float: right;
      	   position: fixed;
      	   right: 0;
      	   top: 0;
      	   display: -webkit-flex;
      	   display: -webkit-box;
      	   display: -ms-flexbox;
      	   display: flex;
      	   flex-direction: column;
      	   flex-wrap: wrap;
      	   -webkit-align-items: flex-start;
      	   align-items: flex-start;
      	   align-content: stretch;
     	   -webkit-justify-content: stretch;
      	   justify-content: stretch;
      	   box-sizing: border-box;
      	   background-color: rgba(255,255,255,0.8);
      	   width: auto;
      	   padding: 10px;
      	   }
      	   @media only screen and (min-width: 1201px) {#strg {width: auto; height: auto; box-shadow: -1px 1px 1px rgb(0,0,0);}}
      	   @media only screen and (max-width: 1200px) {#strg {width: auto; height: auto; box-shadow: -1px 1px 1px rgb(0,0,0);}}
      	   @media only screen and (max-width: 720px) {#strg {width: 100%; height: 100%; box-shadow: none;}}
      	   @media only screen and (max-width: 400px) {#strg {width: 100%; height: 100%; box-shadow: none;}}
      	      	      	
      	   #strg #menue_mobil_rahmen_ol
      	      {
      	      margin-top: 10px;
      	      margin-right: 0px;
      	      text-align: left;
      	      box-sizing: border-box;
      	      width: 100%;
      	      }
      	      @media only screen and (min-width: 1201px) {#strg #menue_mobil_rahmen_ol {text-align: left;}}
      	      @media only screen and (max-width: 1200px) {#strg #menue_mobil_rahmen_ol {text-align: left;}}
      	      @media only screen and (max-width: 720px) {#strg #menue_mobil_rahmen_ol {text-align: center;}}
      	      @media only screen and (max-width: 400px) {#strg #menue_mobil_rahmen_ol {text-align: center;}}
      	      	      	
      	   #strg #menue_mobil_rahmen_mlm
      	      {
      	      margin-top: 5px;
      	      margin-right: 0px;
      	      padding: 10px;
      	      box-sizing: border-box;
      	      width: 100%;
      	      color: rgb(0,0,255);
      	      background-color: rgb(224,224,224);
      	      box-shadow: 1px 1px 1px rgb(200,200,200), -1px -1px 1px rgb(0,0,0);
      	      }
      	      @media only screen and (min-width: 1201px) {#strg #menue_mobil_rahmen_mlm {text-align: left;}}
      	      @media only screen and (max-width: 1200px) {#strg #menue_mobil_rahmen_mlm {text-align: left;}}
      	      @media only screen and (max-width: 720px) {#strg #menue_mobil_rahmen_mlm {text-align: center;}}
      	      @media only screen and (max-width: 400px) {#strg #menue_mobil_rahmen_mlm {text-align: center;}}
      	      	      	
      	   #strg #menue_mobil_rahmen_ml
      	      {
      	      margin-top: 5px;
      	      margin-right: 0px;
      	      text-align: left;
      	      box-sizing: border-box;
      	      width: 100%;
      	      color: rgb(255,255,255);
      	      text-shadow: 1px 1px 1px rgb(0,0,0);
      	      background-color: rgb(0,0,255);
      	      box-shadow: -1px -1px 1px rgb(200,200,200), 1px 1px 1px rgb(0,0,0);
      	      }
      	      @media only screen and (min-width: 1201px) {#strg #menue_mobil_rahmen_ml {text-align: left;}}
      	      @media only screen and (max-width: 1200px) {#strg #menue_mobil_rahmen_ml {text-align: left;}}
      	      @media only screen and (max-width: 720px) {#strg #menue_mobil_rahmen_ml {text-align: center;}}
      	      @media only screen and (max-width: 400px) {#strg #menue_mobil_rahmen_ml {text-align: center;}}
      	      	      	
      	      #strg #menue_mobil_rahmen_ml:hover
      	      	{
      	      	box-shadow: 1px 1px 1px rgb(75,75,75), -1px -1px 1px rgb(0,0,0);
      	      	}
      	      	      	
      	      	#strg #menue_mobil_rahmen_ml a, #strg #menue_mobil_rahmen_ml a:hover
      	      	   {
      	      	   color: rgb(0,0,255);
      	      	   background-color: rgb(255,255,255);
      	      	   text-decoration: none;
      	      	   }
      	      	      	
      	      	#strg #menue_mobil_rahmen_ml:hover > a
      	      	   {
      	      	   color: rgb(0,0,255);
      	      	   background-color: rgb(255,255,255);
      	      	   text-shadow: 1px 1px 1px rgb(0,0,0);
      	      	   font-weight: bold;
      	      	   }
      	      	      	
      	      #strg #menue_mobil_rahmen_ml a #menue_mobil_innen
      	      	{
      	      	padding: 10px;
      	      	color: rgb(255,255,255);
      	      	}
      	      	      	
   #links
      {
      
      }
      @media only screen and (min-width: 1201px) {#links {width: 20%;}}
      @media only screen and (max-width: 1200px) {#links {width: 20%;}}
      @media only screen and (max-width: 720px) {#links {width: 20%;}}
      @media only screen and (max-width: 400px) {#links {width: 0%;}}
      	      	      	
   #mitte
      {
      display: -webkit-flex;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      -webkit-align-items: stretch;
      align-items: stretch;
      align-content: flex-start;
      -webkit-justify-content: space-between;
      justify-content: space-between;
      }
      @media only screen and (min-width: 1201px) {#mitte {width: 50%;}}
      @media only screen and (max-width: 1200px) {#mitte {width: 50%;}}
      @media only screen and (max-width: 720px) {#mitte {width: 50%;}}
      @media only screen and (max-width: 400px) {#mitte {width: 100%;}}
      	      	      	
   #rechts
      {
      padding-right: 10px;
      }
      @media only screen and (min-width: 1201px) {#rechts {width: 20%;}}
      @media only screen and (max-width: 1200px) {#rechts {width: 20%;}}
      @media only screen and (max-width: 720px) {#rechts {width: 20%;}}
      @media only screen and (max-width: 400px) {#rechts {width: 100%; padding-bottom: 10px;}}
      	      	      	
   #container form
      {
      margin-left: auto;
      margin-right: auto;
      }
      	      	      	
#content
   {
   position: relative;
   width: 95%;
   margin-left: auto;
   margin-right: auto;
   padding-right: 5px;
   padding-bottom: 10px;
   box-sizing: border-box;
   text-align: justify;
   vertical-align: top;
   }
      	      	      	
   #content h3
      {
      margin-top: 0%;
      text-align: center;
      }
      	      	      	
   #fehlermeldung
      {
      color: rgb(190,0,0);
      // font-weight: bold;
      // font-style: italic;
      width: 100%;
      text-align: left;
      border-style: solid;
      border-width: 2px;
      border-color: rgb(190,0,0);
      padding-left: 3px;
      padding-right: 3px;
      }
      	      	      	
   #fehlermeldung2
      {
      color: rgb(190,0,0);
      width: 100%;
      text-align: left;
      }
      	      	      	
      #fehlermeldung h4,#fehlermeldung2 h4
      	{
      	text-align: center;
      	border-color: rgb(190,0,0);
      	}
      	      	      	
      #fehlermeldung ul,#fehlermeldung2 ul
      	{
      	list-style: none;
      	font-style: normal;
      	font-weight: normal;
      	width: auto;
      	max-width: 90%;
      	margin-left: 20px;
      	margin-right: 20px;
      	text-align: justify;
      	}
      	      	      	
      	#fehlermeldung ul li,#fehlermeldung2 ul li
      	   {
      	   color: rgb(0,0,0);
      	   width: auto;
      	   height: auto;
      	   text-align: justify;
      	   vertical-align: middle;
      	   }
      	      	      	
      	   #fehlermeldung ul li img#klein,#fehlermeldung2 ul li img#klein
      	      {
      	      width: auto;
      	      max-width: 100px;
      	      height: auto;
      	      max-height: 80px;
      	      margin-bottom: 5px;
      	      margin-right: 10px;
      	      vertical-align: middle;
      	      }
      	      	      	
      #fehlermeldung_input
      	{
      	color: rgb(190,0,0);
      	font-style: italic;
      	width: 100%;
      	text-align: left;
      	}
      	      	      	
	#fehlermeldung_input i#Euro
      	   {
      	   color: rgb(0,0,0);
      	   font-style: normal;
      	   }
      	      	      	
   #bestaetigungsmeldung
      {
      color: rgb(50,150,77);
      font-weight: bold;
      font-style: italic;
      width: auto;
      text-align: center;
      }
      	      	      	
      #bestaetigungsmeldung span
      	{
      	text-align: justify;
      	}
      	      	      	
      #bestaetigungsmeldung a
      	{
      	text-align: left;
      	}
      	      	      	
      #bestaetigungsmeldung span ul
      	{
      	list-style: none;
      	font-style: normal;
      	font-weight: normal;
      	width: auto;
      	max-width: 90%;
      	margin-left: 20px;
      	margin-right: 20px;
      	text-align: left;
      	}
      	      	      	
      	#bestaetigungsmeldung span ul li
      	   {
      	   color: rgb(0,0,0);
      	   width: auto;
      	   height: auto;
      	   text-align: left;
      	   vertical-align: middle;
      	   }
      	      	      	
      	   #bestaetigungsmeldung span ul li img#klein
      	      {
      	      width: auto;
      	      max-width: 100px;
      	      height: auto;
      	      max-height: 80px;
      	      margin-bottom: 5px;
      	      margin-right: 10px;
      	      vertical-align: middle;
      	      }
      	      	      	
   #hinweis
      {
      font-size: 10px;
      font-style: italic;
      width: 100%;
      text-align: justify;
      }
      	      	      	
   #content img
      {
      max-width: 100%;
      }
      	      	      	
   #content form
      {
      text-align: left;
      width: 95%;
      }
      	      	      	
      #content form h4
      	{
      	text-align: center;
     	font-size: 14px;
      	color: rgb(195,35,40);
      	text-shadow: 0.1em 0.1em 0.1em rgb(255,255,255);
      	}
      	      	      	
      #content form p
      	{
      	text-align: justify;
      	}
      	      	      	
      #content form ol
      	{
      	width: auto;
      	max-width: 100%;
      	list-style: arabic;
      	text-align: justify;
      	}
      	      	      	
      	#content form ol li
      	   {
      	   width: auto;
      	   text-align: justify;
      	   }
      	      	      	
      #content form ul
      	{
      	width: auto;
      	max-width: 90%;
      	list-style: none;
      	text-align: justify;
      	}
      	      	      	
      	#content form ul li
      	   {
      	   width: auto;
      	   height: auto;
      	   text-align: justify;
      	   vertical-align: middle;
      	   }
      	      	      	
      	   #content form ul li a.infobox img#klein
      	      {
      	      width: auto;
      	      max-width: 100px;
      	      height: auto;
      	      max-height: 80px;
      	      margin-bottom: 5px;
      	      margin-right: 10px;
      	      vertical-align: middle;
      	      }
      	      	      	
      	   a.infobox span div
      	      {
      	      visibility:hidden;
      	      position: absolute;
      	      z-index: 4;
      	      top: auto;
      	      margin-top: -50px;
      	      left: auto;
      	      margin-left: -200px;
      	      min-height: 1px;
      	      height: auto;
      	      max-height: 210px;
      	      width: auto;
      	      text-decoration:none;
      	      text-align: center;
      	      vertical-align: middle;
      	      overflow: auto;
      	      }
      	      	      	
      	      img#gross
      	      	{
      	      	height: auto;
      	      	max-height: 200px;
      	      	width:auto;
      	      	max-width: 250px;
      	      	text-decoration:none;
      	      	text-align: center;
      	      	vertical-align: middle;
      	      	}
      	      	      	
      	      a.infobox:focus span div
      	      	{
      	      	visibility:visible;
      	      	}
      	      	      	
      #rahmen_column
      	{
      	display: -webkit-flex;
      	display: -webkit-box;
      	display: -ms-flexbox;
      	display: flex;
      	flex-direction: column;
      	flex-wrap: wrap;
      	-webkit-align-items: stretch;
      	align-items: stretch;
      	align-content: space-around;
      	-webkit-justify-content: space-around;
      	justify-content: space-around;
      	box-sizing: border-box;
      	padding: 5px;
      	margin-top: 5px;
      	margin-bottom: 10px;
      	background-color: rgba(255,255,255,0.5);
      	box-shadow: 1px 1px 1px rgb(0,0,0);
	}
      	      	      	
      	#rahmen_column input
      	   {
	   margin-top: 2px;
      	   margin-bottom: 10px;
	   }
      	      	      	
      #rahmen_row
      	{
      	display: -webkit-flex;
      	display: -webkit-box;
      	display: -ms-flexbox;
      	display: flex;
      	flex-direction: row;
      	flex-wrap: wrap;
      	-webkit-align-items: stretch;
      	align-items: stretch;
      	align-content: flex-start;
      	-webkit-justify-content: space-around;
      	justify-content: space-around;
      	box-sizing: border-box;
      	padding: 5px;
      	background-color: rgba(255,255,255,0.5);
      	box-shadow: 2px 2px 2px rgb(0,0,0);
	}
      	      	      	
      	#rahmen_row div#rahmen_row_innen
      	   {
      	   display: -webkit-flex;
      	   display: -webkit-box;
      	   display: -ms-flexbox;
      	   display: flex;
      	   flex-direction: column;
      	   flex-wrap: wrap;
      	   -webkit-align-items: flex-start;
      	   align-items: flex-start;
      	   align-content: flex-start;
      	   -webkit-justify-content: flex-start;
      	   justify-content: flex-start;
      	   margin-top: 10px;
      	   margin-bottom: 15px;
	   }
      	   @media only screen and (max-width: 400px) {#rahmen_row div#rahmen_row_innen {width: 300px;}}
      	   @media only screen and (min-width: 401px) and (max-width: 720px) {#rahmen_row div#rahmen_row_innen {width: 300px;}}
      	   @media only screen and (min-width: 721px) and (max-width: 1400px) {#rahmen_row div#rahmen_row_innen {width: 300px;}}
      	   @media only screen and (min-width: 1401px) {#rahmen_row div#rahmen_row_innen {width: 350px;}}
      	      	      	
      	   #rahmen_row div#rahmen_row_innen textarea
      	      {
      	      width: 95%;
	      height: 150px;
      	      max-width: 300px;
      	      resize: none;
	      }
      	      	      	
      	   #rahmen_row div input
      	      {
      	      margin-bottom: 15px;
	      }
      	      	      	
      #content form input
      	{
	
	}
      	      	      	
      	#content form input#radio
      	   {
      	   width: auto;
      	   vertical-align: bottom;
      	   }
      	      	      	
      	#content form input#radio_button
      	   {
      	   width: auto;
      	   margin-top: -4px;
      	   vertical-align: middle;
      	   }
      	      	      	
      	#content form input#radio_button_bilder
      	   {
      	   width: auto;
      	   margin-top: -2px;
      	   vertical-align: middle;
      	   }
      	      	      	
      	#content form input#checkbox
      	   {
      	   width: auto;
      	   }
      	      	      	
      	#content form input#bearbeiten
      	   {
      	   width: auto;
      	   }
      	      	      	
      	#content form#button
      	   {
      	   
      	   }
      	   @media only screen and (min-width: 1201px) {#content form #button {width: auto;}}
      	   @media only screen and (max-width: 1200px) {#content form #button {width: auto;}}
      	   @media only screen and (max-width: 720px) {#content form #button {width: 100%; text-align: center;}}
      	   @media only screen and (max-width: 400px) {#content form #button {width: 100%; text-align: center;}}
      	      	      	
      	#content form input#button
      	   {
      	   margin-top: 15px;
      	   font-weight: bold;
      	   }
      	   @media only screen and (min-width: 1201px) {#content form input#button {width: auto;}}
      	   @media only screen and (max-width: 1200px) {#content form input#button {width: auto;}}
      	   @media only screen and (max-width: 720px) {#content form input#button {padding: 5px; 15px; font-size: 110%;}}
      	   @media only screen and (max-width: 400px) {#content form input#button {padding: 10px 25px; font-size: 120%;}}
      	      	      	
	#content form textarea {
/*
			       width: 60%;
			       height: 150px;
*/
			       }
      	      	      	
      	#content form input#name
      	   {
      	   width: 95%;
      	   max-width: 250px;
      	   }
      	      	      	
      	#content form input#mail
      	   {
      	   width: 95%;
      	   max-width: 250px;
      	   }
      	      	      	
      	#content form input#datum
      	   {
      	   width: 95%;
      	   max-width: 90px;
      	   }
      	      	      	
      	#content form input#nr
      	   {
      	   width: 95%;
      	   max-width: 50px;
      	   }
      	      	      	
      	#content form input#zeiten
      	   {
      	   width: 95%;
      	   max-width: 150px;
      	   }
      	      	      	
      	#content form input#ueberschrift
      	   {
      	   width: 95%;
      	   max-width: 350px;
      	   }
      	      	      	
img#kreuz_haken
   {
   height: 16px;
   }
      	      	      	
img#klein_logo
   {
   height: auto;
   max-height: 100px;
   text-decoration:none;
   text-align: center;
   vertical-align: middle;
   }
      	      	      	
img#klein
   {
   height: auto;
   max-height: 150px;
   width: auto;
   max-width: 200px;
   text-decoration:none;
   text-align: center;
   vertical-align: middle;
   margin-bottom: 5px;
   }
      	      	      	
#auswahl_abteilungen_einzeln
   {
   display: -webkit-flex;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   line-height: 20px;
   }
      	      	      	
   #auswahl_abteilungen_einzeln_name
      {
      margin-right: 5px;
      text-align: right;
      }
      	      	      	
   #auswahl_abteilungen_einzeln_radio
      {
      text-align: left;
      }
      	      	      	
#berechtigungen
   {
   display: -webkit-flex;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   line-height: 20px;
   }
      	      	      	
   #berechtigungen_name
      {
      margin-right: 5px;
      text-align: right;
      }
      	      	      	
   #berechtigungen_radio
      {
      text-align: left;
      }
      	      	      	
#zweispaltig
   {
   position: relative;
   display: -webkit-flex;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   width: 100%;
   margin-left: auto;
   margin-right: auto;
   }
      	      	      	
   #linke_seite
      {
      width: 49%;
      margin-right: 1%;
      }
      	      	      	
   #rechte_seite
      {
      width: 49%;
      margin-left: 1%;
      }
      	      	      	
/* ########################################################### */
/* #################### BUTTONS fuer Auswahl #################### */
/* ########################################################## */
      	#rahmen_auswahl
      	   {
      	   display: -webkit-flex;
      	   display: -webkit-box;
      	   display: -ms-flexbox;
      	   display: flex;
      	   flex-direction: row;
      	   flex-wrap: wrap;
      	   -webkit-align-items: stretch;
      	   align-items: stretch;
      	   align-content: center;
      	   -webkit-justify-content: space-around;
      	   justify-content: space-around;
      	   box-sizing: border-box;
      	   width: 100%;
      	   margin-top: 5px;
      	   }
      	      	      	
      	   .toggle-buttons input[type="radio"],.toggle-buttons input[type="checkbox"], .toggle-buttons_breit input[type="radio"],.toggle-buttons_breit input[type="checkbox"]
      	      {
      	      display:none;
      	      }
      	      	      	
      	      .toggle-buttons label#label_button
      	      	{
      	      	display: -webkit-flex;
      	      	display: -webkit-box;
      	      	display: -ms-flexbox;
      	      	display: flex;
      	      	flex-direction: column;
      	      	flex-wrap: wrap;
      	      	-webkit-align-items: center;
      	      	align-items: center;
      	      	align-content: center;
      	      	-webkit-justify-content: center;
      	      	justify-content: center;
      	      	box-sizing: border-box;
      	      	margin: 10px 5px;
      	      	background-color: rgb(255,255,255);
      	      	color: rgb(0,0,0);
      	      	text-align: center;
      	      	-moz-hyphens: auto;
      	      	-o-hyphens: auto;
      	      	-webkit-hyphens: auto;
      	      	-ms-hyphens: auto;
      	      	hyphens: auto;
      	      	word-wrap: break-word;
      	      	border-radius: 5px;
      	      	box-shadow: 2px 2px 1px rgba(0,0,0,1), -1px -1px 1px rgba(0,0,0,0.4);
      	      	padding: 5px 2px;
      	      	cursor: pointer;
      	      	transition: background-color ease 0.5s;
      	      	}
      	      	@media only screen and (min-width: 1201px) {.toggle-buttons label#label_button {width: 17%; font-size: 100%;}}
      	      	@media only screen and (max-width: 1200px)  {.toggle-buttons label#label_button {width: 22%; font-size: 100%;}}      	      	@media only screen and (max-width: 720px)  {.toggle-buttons label#label_button {width: 30%; font-size: 90%;}}
      	      	@media only screen and (max-width: 400px)  {.toggle-buttons label#label_button {width: 45%; font-size: 80%;}}
      	      	      	
      	      .toggle-buttons label#label_button:hover, .toggle-buttons label#label_button:focus, .toggle-buttons label#label_button:active
      	      	{
      	      	background-color: rgb(255,255,255);
      	      	color: rgb(0,0,0);
      	      	box-shadow: 1px 1px 1px rgba(0,0,0,0.4), -1px -1px 1px rgba(0,0,0,1);
      	      	transition: background-color ease 0.5s;
      	      	}
      	      	      	
      	      .toggle-buttons input:checked + label#label_button
      	      	{
      	      	background-color: rgb(240,255,240);
      	      	color: rgb(0,0,0);
      	      	box-shadow: 1px 1px 1px rgba(0,0,0,0.4), -1px -1px 1px rgba(0,0,0,1);
      	      	transition: background-color ease 0.5s;
      	      	}
      	      	      	
      	#rahmen_auswahl_links
      	   {
      	   display: -webkit-flex;
      	   display: -webkit-box;
      	   display: -ms-flexbox;
      	   display: flex;
      	   flex-direction: row;
      	   flex-wrap: wrap;
      	   -webkit-align-items: stretch;
      	   align-items: stretch;
      	   align-content: center;
      	   box-sizing: border-box;
      	   width: 100%;
      	   margin-top: 5px;
      	   }
      	   @media only screen and (min-width: 1201px) {#rahmen_auswahl_links {-webkit-justify-content: center; justify-content: center;}}
      	   @media only screen and (max-width: 1200px)  {#rahmen_auswahl_links {-webkit-justify-content: center; justify-content: center;}}      	   @media only screen and (max-width: 720px)  {#rahmen_auswahl_links {-webkit-justify-content: center; justify-content: center;}}
      	   @media only screen and (max-width: 400px)  {#rahmen_auswahl_links {-webkit-justify-content: center; justify-content: center;}}
      	      	      	
      	      .toggle-buttons_breit label#label_button
      	      	{
      	      	display: -webkit-flex;
      	      	display: -webkit-box;
      	      	display: -ms-flexbox;
      	      	display: flex;
      	      	flex-direction: column;
      	      	flex-wrap: wrap;
      	      	-webkit-align-items: center;
      	      	align-items: center;
      	      	align-content: center;
      	      	-webkit-justify-content: center;
      	      	justify-content: center;
      	      	box-sizing: border-box;
      	      	margin: 5px auto;
      	      	background-color: rgb(255,255,255);
      	      	color: rgb(0,0,0);
      	      	text-align: center;
      	      	-moz-hyphens: auto;
      	      	-o-hyphens: auto;
      	      	-webkit-hyphens: auto;
      	      	-ms-hyphens: auto;
      	      	hyphens: auto;
      	      	word-wrap: break-word;
      	      	border-radius: 5px;
      	      	box-shadow: 2px 2px 1px rgba(0,0,0,1), -1px -1px 1px rgba(0,0,0,0.4);
      	      	padding: 5px 2px;
      	      	cursor: pointer;
      	      	transition: background-color ease 0.5s;
      	      	}
      	      	@media only screen and (min-width: 1201px) {.toggle-buttons_breit label#label_button {width: 70%; font-size: 100%;}}
      	      	@media only screen and (max-width: 1200px)  {.toggle-buttons_breit label#label_button {width: 75%; font-size: 100%;}}      	      	@media only screen and (max-width: 720px)  {.toggle-buttons_breit label#label_button {width: 85%; font-size: 90%;}}
      	      	@media only screen and (max-width: 400px)  {.toggle-buttons_breit label#label_button {width: 95%; font-size: 80%;}}
      	      	      	
      	      .toggle-buttons_breit label#label_button:hover, .toggle-buttons_breit label#label_button:focus, .toggle-buttons_breit label#label_button:active
      	      	{
      	      	background-color: rgb(255,255,255);
      	      	color: rgb(0,0,0);
      	      	box-shadow: 1px 1px 1px rgba(0,0,0,0.4), -1px -1px 1px rgba(0,0,0,1);
      	      	transition: background-color ease 0.5s;
      	      	}
      	      	      	
      	      .toggle-buttons_breit input:checked + label#label_button
      	      	{
      	      	background-color: rgb(240,255,240);
      	      	color: rgb(0,0,0);
      	      	box-shadow: 1px 1px 1px rgba(0,0,0,0.4), -1px -1px 1px rgba(0,0,0,1);
      	      	transition: background-color ease 0.5s;
      	      	}
      	      	      	
      #radio_rahmen
      	{
      	display: -webkit-flex;
      	display: -webkit-box;
      	display: -ms-flexbox;
      	display: flex;
      	flex-direction: column;
      	flex-wrap: wrap;
      	-webkit-align-items: stretch;
      	align-items: stretch;
      	align-content: space-around;
      	-webkit-justify-content: space-around;
      	justify-content: space-around;
      	box-sizing: border-box;
      	width: 100%;
      	padding: 5px;
	}
      	      	      	
      	#radio_rahmen #radio_rahmen_ueberschrift
      	   {
      	   display: -webkit-flex;
      	   display: -webkit-box;
      	   display: -ms-flexbox;
      	   display: table;
      	   flex-direction: row;
      	   flex-wrap: wrap;
      	   -webkit-align-items: center;
      	   align-items: center;
      	   align-content: center;
      	   -webkit-justify-content: space-between;
      	   justify-content: space-between;
      	   box-sizing: border-box;
	   width: 100%;
      	   margin-bottom: 5px;
      	   font-weight: bold;
	   }
      	      	      	
      	   #radio_rahmen #radio_rahmen_ueberschrift #rru1, #radio_rahmen #radio_rahmen_ueberschrift #rru2, #radio_rahmen #radio_rahmen_ueberschrift #rru3
      	      {
      	      display: table-cell;
      	      padding-left: 5px;
      	      padding-right: 5px;
      	      vertical-align: middle;
	      }
	      #radio_rahmen #radio_rahmen_ueberschrift #rru1 {text-align: left; width: 30%; max-width: 200px;}
	      #radio_rahmen #radio_rahmen_ueberschrift #rru2 {text-align: left;}
	      #radio_rahmen #radio_rahmen_ueberschrift #rru3 {text-align: right; width: 10%; max-width: 35px;}
      	      	      	
      	#radio_rahmen_icons
      	   {
      	   display: -webkit-flex;
      	   display: -webkit-box;
      	   display: -ms-flexbox;
      	   display: flex;
      	   flex-direction: row;
      	   flex-wrap: wrap;
      	   -webkit-align-items: stretch;
      	   align-items: stretch;
      	   align-content: flex-start;
      	   -webkit-justify-content: space-around;
      	   justify-content: space-around;
      	   box-sizing: border-box;
      	   width: 100%;
	   }
      	      	      	
      	   #radio_rahmen_icons img, #radio_rahmen_ueberschrift img
      	      {
      	      width: auto;
      	      margin-left: 5px;
      	      margin-right: 5px;
      	      opacity: 0.7;
	      }
      	      @media only screen and (min-width: 1201px) {#radio_rahmen_icons img {height: 20px;} #radio_rahmen_ueberschrift img {height: 15px;}}
      	      @media only screen and (max-width: 1200px)  {#radio_rahmen_icons img {height: 20px;} #radio_rahmen_ueberschrift img {height: 15px;}}
      	      @media only screen and (max-width: 720px)  {#radio_rahmen_icons img {height: 15px;} #radio_rahmen_ueberschrift img {height: 12px;}}
      	      @media only screen and (max-width: 400px)  {#radio_rahmen_icons img {height: 10px;} #radio_rahmen_ueberschrift img {height: 10px;}}
      	      	      	
      	      #radio_rahmen_ueberschrift #rru1 img
      	      	{
      	      	width: auto;
      	      	height: auto;
      	      	max-width: 105px;
      	      	max-height: 70px;
      	      	opacity: 1;
	      }
      	      	      	
      	#radio_rahmen_icons_auge
      	   {
      	   display: -webkit-flex;
      	   display: -webkit-box;
      	   display: -ms-flexbox;
      	   display: flex;
      	   flex-direction: row;
      	   flex-wrap: wrap;
      	   -webkit-align-items: center;
      	   align-items: center;
      	   align-content: center;
      	   -webkit-justify-content: center;
      	   justify-content: center;
      	   box-sizing: border-box;
      	   width: 100%;
	   }
      	      	      	
      	   #radio_rahmen_icons img, #radio_rahmen_ueberschrift img, #radio_rahmen_icons_auge img, .radio_rahmen_icons_auge img
      	      {
      	      width: auto;
      	      margin-left: 5px;
      	      margin-right: 5px;
      	      opacity: 0.7;
	      }
      	      @media only screen and (min-width: 1201px) {#radio_rahmen_icons img {height: 20px;} #radio_rahmen_ueberschrift img, #radio_rahmen_icons_auge img {height: 15px;}}
      	      @media only screen and (max-width: 1200px)  {#radio_rahmen_icons img {height: 20px;} #radio_rahmen_ueberschrift img, #radio_rahmen_icons_auge img {height: 15px;}}
      	      @media only screen and (max-width: 720px)  {#radio_rahmen_icons img {height: 15px;} #radio_rahmen_ueberschrift img, #radio_rahmen_icons_auge img {height: 12px;}}
      	      @media only screen and (max-width: 400px)  {#radio_rahmen_icons img {height: 10px;} #radio_rahmen_ueberschrift img, #radio_rahmen_icons_auge img {height: 10px;}}
      	      	      	
      	#radio_rahmen_text
      	   {
      	   display: -webkit-flex;
      	   display: -webkit-box;
      	   display: -ms-flexbox;
      	   display: flex;
      	   flex-direction: row;
      	   flex-wrap: wrap;
      	   -webkit-align-items: center;
      	   align-items: center;
      	   align-content: center;
      	   -webkit-justify-content: flex-start;
      	   justify-content: flex-start;
      	   box-sizing: border-box;
      	   width: 100%;
      	   padding-left: 5px;
      	   padding-right: 5px;
	   }
      	      	      	
      	   #radio_rahmen_text img
      	      {
      	      width: auto;
      	      margin-left: 5px;
      	      margin-right: 5px;
      	      opacity: 0.7;
	      }
      	      @media only screen and (min-width: 1201px) {#radio_rahmen_text img {height: 10px;}}
      	      @media only screen and (max-width: 1200px)  {#radio_rahmen_text img {height: 10px;}}
      	      @media only screen and (max-width: 720px)  {#radio_rahmen_text img {height: 9px;}}
      	      @media only screen and (max-width: 400px)  {#radio_rahmen_text img {height: 8px;}}
      	      	      	
/* ########################################################### */
/* ################## Bilder-BUTTONS fuer Auswahl ################# */
/* ########################################################## */
      	#rahmen_auswahl_bilder
      	   {
      	   display: -webkit-flex;
      	   display: -webkit-box;
      	   display: -ms-flexbox;
      	   display: flex;
      	   flex-direction: row;
      	   flex-wrap: wrap;
      	   -webkit-align-items: center;
      	   align-items: center;
      	   align-content: center;
      	   -webkit-justify-content: space-around;
      	   justify-content: space-around;
      	   box-sizing: border-box;
      	   width: 100%;
      	   margin-top: 5px;
      	   }
      	      	      	
      	   .toggle-buttons input[type="radio"], .toggle-buttons input[type="checkbox"], .toggle-buttons_breit input[type="radio"], .toggle-buttons_breit input[type="checkbox"]
      	      {
      	      display:none;
      	      }
      	      	      	
      	      .toggle-buttons label#label_button_bilder
      	      	{
      	      	display: -webkit-flex;
      	      	display: -webkit-box;
      	      	display: -ms-flexbox;
      	      	display: flex;
      	      	flex-direction: column;
      	      	flex-wrap: wrap;
      	      	-webkit-align-items: center;
      	      	align-items: center;
      	      	align-content: center;
      	      	-webkit-justify-content: center;
      	      	justify-content: center;
      	      	box-sizing: border-box;
      	      	margin: 10px 5px;
      	      	color: rgb(255,255,255);
      	      	text-align: center;
      	      	-moz-hyphens: auto;
      	      	-o-hyphens: auto;
      	      	-webkit-hyphens: auto;
      	      	-ms-hyphens: auto;
      	      	hyphens: auto;
      	      	word-wrap: break-word;
      	      	border-radius: 5px;
      	      	padding: 1px 1px;
      	      	cursor: pointer;
      	      	}
      	      	@media only screen and (min-width: 1201px) {.toggle-buttons label#label_button_bilder {width: 17%; height: 100px; font-size: 100%;}}
      	      	@media only screen and (max-width: 1200px)  {.toggle-buttons label#label_button_bilder {width: 22%; height: 100px; font-size: 100%;}}
      	      	@media only screen and (max-width: 720px)  {.toggle-buttons label#label_button_bilder {width: 30%; height: 120px; font-size: 90%;}}
      	      	@media only screen and (max-width: 400px)  {.toggle-buttons label#label_button_bilder {width: 45%; height: 120px; font-size: 80%;}}
      	      	      	
      	      .toggle-buttons label#label_button_bilder img
      	      	{
      	      	height: auto;
      	      	width: auto;
      	      	max-height: 100%;
      	      	max-width: 100%;
      	      	border-style: solid;
      	      	border-width: 5px;
      	      	border-color: rgba(0,0,0,0);
      	      	border-radius: 5px;
      	      	transition: border-color ease 0.5s;
      	      	}
      	      	      	
      	      .toggle-buttons label#label_button_bilder:hover img, .toggle-buttons label#label_button_bilder:focus img, .toggle-buttons label#label_button_bilder:active img
      	      	{
      	      	border-color: rgb(0,155,205);
      	      	transition: border-color ease 0.5s;
      	      	}
      	      	      	
      	      .toggle-buttons input:checked + label#label_button_bilder img
      	      	{
      	      	border-color: rgb(0,125,190);
      	      	color: rgb(0,0,0);
      	      	transition: border-color ease 0.5s;
      	      	}
      	      	      	
/* ################################################################ */
/* #################### Switch-BUTTONS fuer Auswahl #################### */
/* ################################################################ */
#switch
   {
   display: -webkit-flex;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   flex-direction: row;
   flex-wrap: no-wrap;
   -webkit-align-items: stretch;
   align-items: stretch;
   align-content: flex-start;
   -webkit-justify-content: flex-start;
   justify-content: flex-start;
   box-sizing: border-box;
   width: auto;
   margin-bottom: 5px;
   }
      	      	      	
   #switch label
      {
      display: -webkit-flex;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      flex-direction: row;
      flex-wrap: no-wrap;
      -webkit-align-items: center;
      align-items: center;
      align-content: flex-start;
      -webkit-justify-content: flex-start;
      justify-content: flex-start;
      box-sizing: border-box;
      width: auto;
      }
      	      	      	
      #switch label strong
      	{
      	margin-top: -2px;
      	}
      	      	      	
#switch input[type="checkbox"]
   { 
   display: none;
   }
      	      	      	
   /* Normal Track */
   #switch input[type="checkbox"].ios-switch + div
      {
      vertical-align: middle;
      width: 40px;
      height: 20px;
      border: 1px solid rgba(0,0,0,.4);
      border-radius: 999px;
      background-color: rgba(0, 0, 0, 0.1);
      -webkit-transition-duration: .4s;
      -webkit-transition-property: background-color, box-shadow;
      box-shadow: inset 0 0 0 0px rgba(0,0,0,0.4);
      margin: 0px 5px 0px 10px;
      }
      	      	      	
      /* Checked Track (Red) */
      #switch input[type="checkbox"].ios-switch:checked + div
      	{
      	width: 40px;
      	background-position: 0 0;
      	background-color: rgb(255,0,50);
      	border: 1px solid rgb(0,0,0);
      	box-shadow: inset 0 0 0 10px rgba(255,0,50,1);
      	}
      	      	      	
      /* Green Track */
      #switch input[type="checkbox"].green.ios-switch:checked + div
      	{
      	background-color: rgb(0,227,89);
      	border: 1px solid rgba(0,0,0,1);
      	box-shadow: inset 0 0 0 10px rgba(0,227,89,1);
      	}
      	      	      	
   /* Normal Knob */
   #switch input[type="checkbox"].ios-switch + div > div
      {
      // float: left;
      width: 18px;
      height: 18px;
      border-radius: inherit;
      background: rgb(255,255,255);
      -webkit-transition-timing-function: cubic-bezier(.54,1.85,.5,1);
      -webkit-transition-duration: 0.4s;
      -webkit-transition-property: transform, background-color, box-shadow;
      -moz-transition-timing-function: cubic-bezier(.54,1.85,.5,1);
      -moz-transition-duration: 0.4s;
      -moz-transition-property: transform, background-color;
      box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3), 0px 0px 0 1px rgba(0, 0, 0, 0.4);
      pointer-events: none;
      margin-top: 1px;
      margin-left: 1px;
      content: url("Nein");
      }
      	      	      	
      /* Checked Knob (Red Style) */
      #switch input[type="checkbox"].ios-switch:checked + div > div
      	{
      	-webkit-transform: translate3d(20px, 0, 0);
      	-moz-transform: translate3d(20px, 0, 0);
      	background-color: rgb(255,255,255);
      	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3), 0px 0px 0 1px rgba(8, 80, 172,1);
      	}
      	      	      	
      /* Green Knob */
      #switch input[type="checkbox"].green.ios-switch:checked + div > div
      	{
      	box-shadow: 0px 2px 5px rgba(0,0,0,0.3), 0 0 0 1px rgba(0,162,63,1);
      	}
      	      	      	
   /* Text */
   #switch_nein
      {
      display: flex;
      }
   #switch_ja
      {
      display: none;
      }
   #switch input[type="checkbox"].ios-switch:checked ~ #switch_nein
      {
      display: none;
      }
   #switch input[type="checkbox"].ios-switch:checked ~ #switch_ja
      {
      display: flex;
      }