/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 20 version
*/

/* Farben
 primäres Blau #335170
 primäres Weiß #F4F4F9
 Sekundäres Weiß #f3f3f3
 Dunkles Grau #31393C
 Hellblau #B2DCE6
 Timberwolf #685B50
 Umber #938274
*/

/* Generell */

html{
  font-family:Verdana, Tahoma, sans-serif;
  background: #F4F4F9;
  color:#31393C;
}

body{
  padding-top:100px;
}

h1,h3,h5{
  color:#335170;
}

h2,h4,h6{
  color:#F4F4F9;
  margin:0;
  padding:0;
}

h1{
  font-size: 1.5em;
  font-style:italic;
  padding-left:10px;
}

h2{    
  font-style:italic;
}

h3{
  font-size: 1.8em;
}

h2,h4{
  padding:10px 0;
}

header{
  align-items: center;
}

ul{
  padding-left:20px;
}

a{
  color:#335170;
  text-decoration: none;
  padding-top:3px;
  padding-bottom:3px;
}

a:hover,a:focus{
  text-decoration:none;
  background:#335170;
  color:#F4F4F9;
}

a.nohover:hover, a.nohover:focus{
  background:none;
}

/* Input-Elemente */

input,textarea,fieldset{
  border:1px solid transparent;
}

select{
  width:200px;
}

input:hover,select:hover,textarea:hover{
  border:1px solid #335170;
}
input:focus,select:focus,textarea:focus{
  border:1px solid #335170;
}

:required{
  border:1px solid firebrick;
}

label{
  min-width:150px;
  display:inline-block;
}

.required label:after,#label:after{
  content:" " "*";
  color:firebrick;
}

#required,#warn,.warn{
  color:firebrick;
}

[type="submit"],[type="button"],[type="file"],button{
  background:#335170;
  color:#F4F4F9;
  padding:5px;
  margin-top:10px;
}

.button:hover{
  font-weight: bolder;
}

fieldset div{
  padding-top:5px;
}  

#zeichenzaehler{
  color:lightgrey;
}

/* Leiste oben */

#top{
  position: fixed;
  width:100%;
  top:0;
  left:0;
  background: #F4F4F9;
  z-index: 1;
  -webkit-box-shadow: 5px 2px 2px #31393C;
          box-shadow: 5px 2px 2px #31393C;
}

#top>div{
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
}

/* Logo */

#logo img{
  width:72px;
  height:auto;
  padding-left:10px;
}

#logo h2{
  color:#335170;
  font-weight: lighter;
  padding:0;
}

#logo a:hover,a:focus{
  background:transparent;
}

#title{
  margin-left:20px;
}

/* Leiste oben rechts */

#call{ 
  font-size: 0.7em;
  line-height: 150%;
  text-align: right;
}

/* Menü */

nav ul{
  list-style:none;
}

nav ul li{
  padding: 2px 10px;
}

nav ul li:last-child{
  padding-right: 0;
}

#nav ul li a:hover, #nav ul li a:focus{
  background: #335170;
  color:#F4F4F9;
}

.current{
  font-weight: bold;
  pointer-events: none;
}

.close,.open{display:none;}

/* User-Menü*/
#user_menue ul{
  padding-left:0;
}

#user_menue ul li a{
  font-weight: bold;
  text-decoration: underline;
}

.current_user a{
  font-weight: lighter !important;
  text-decoration: none !important;
  pointer-events: none;
}

/* Banner */

#banner_bg{
  background: #335170;
}

#banner{    
  position: relative;
  background-image: url(../img/geld.jpg);
  background-color:#335170;
  background-repeat: no-repeat;
  width:100%;
  height:400px;
  z-index: 0;
}

#slogan{
  background: rgba(51, 81, 112, 0.8);
  width:100%;
  position: absolute;
  bottom: 0;
}

/* Content Startseite */

#start_content h3{
  text-align: center;
  padding:20px 0;
}

#start_content h4{
  color: #335170;
  padding-bottom:0;
  text-align: center;
}

#imp{
  margin-top:50px;
  margin-bottom:50px;
}

/* Content */

main{
  padding-top:20px;
}

#content h3{
  padding:0;
  margin-left: 10px;
  margin-right:10px;
}

#content h4{
  color: #335170;
  padding-bottom:0;
}

.background_border{
  background: rgba(210,213,221,.3);
  padding:10px;    
  -webkit-border-radius: 5px;    
          border-radius: 5px;
  margin-top:20px;
  margin-bottom:20px;
}

.main_content{
  margin-left:10px;
  margin-right:10px;
  line-height:150%;
}

.main_content img{
  max-width:640px;
  width:100%;
  height:auto;
}

#kanzlei1,#kanzlei2{
  padding:10px 20px;
  width:100%;
  max-width: 400px;
  height:auto;
}

/* Mitarbeiter-Daten */

.user_field{
  border-bottom: 1px solid #685B50;
}

.user_field p{
  margin-top:0;
}

.profil{
  align-items: flex-end;
}

#logout_button{
  margin-top:10px;
}

/* Download-Management-Bereich*/
.download_field{
  line-height: 2em;
}

table{
  margin-right:10px;
  border:1px solid lightgray;
}

td{
  padding:10px;  
  border-bottom: 1px solid lightgray;
}

tr:last-child td{
  border-bottom: none;
}

/* Impressum */
.list_unstyled{
  list-style-type: none;
  padding-left:0;
}

/* Footer */
#footer_contact{
  width:100%;
  background:#335170;
  color:#F4F4F9;
  padding-top:30px;
  padding-bottom:30px;
}

#footer_contact a{
  color:#F4F4F9;
}

#footer_contact a:hover, #footer_contact a:focus{
  color:#31393C;
  background: #F4F4F9;
}

#footer_contact>div{
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

#portrait img{
  display: block;
  margin-left:auto;
  margin-right:auto;
  -webkit-border-radius: 5px;
          border-radius: 5px;
  width:100%;
  height:auto;
}

#opening h5{
  color:#F4F4F9;
}


#footer_links{
  color:#335170;
  text-align:center;
  margin-top:30px;
  margin-bottom: 30px;
}

#footer_links a{
  display:inline-block;
  color:#335170;
  padding: 10px 20px;
}

#footer_links a:hover,#footer_links a:focus{
  color:#F4F4F9;
  background:#335170;
}