@charset "UTF-8";
/* CSS Document */

p {
font-size: 14px;
color: #104E8B;
}

h1 { font-size: 24px;
  color: #104E8B;
  text-decoration: none;
  /* text-shadow: 1px 2px 2px #104E8B;*/
}

h2 { font-size: 18px;
  color: #104E8B;
  text-decoration: none;
}

h3 { font-size: 16px;
  color: #104E8B;
  text-decoration: none;
}

h4 { font-size: 14px;
  color: #104E8B;
  text-decoration: none;
}

a:link {
  color: #104E8B;
  text-decoration: none;
}

/* visited link */
a:visited {
  color: #104E8B;
  text-decoration: none;
}

/* mouse over link */
a:hover {
  color: #A4D3EE;
  text-decoration: none;
}

/* selected link */
a:active {
  color: white;
  text-decoration: none;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #104E8B;
  /* background-image: linear-gradient(#104E8B, #A4D3EE 20%, #483D8B, #104E8B);*/
  background-image: linear-gradient(#EBF2F6, #EBF2F6 20%, #EBF2F6, #EBF2F6);
}

li {
  float: left;
  border-right:1px solid #bbb;
}

li:last-child {
  border-right: none;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 12px 14px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #483D8B;
  color: #A4D3EE;
}

.active {
  background-color: #5394CF;
  /* background-image: linear-gradient(#483D8B, #5394CF 20%, #483D8B, #483D8B);*/
  background-image: linear-gradient(#C4DAE6, #C4DAE6 20%, #C4DAE6, #C4DAE6);
}

@media only screen and (max-width: 500px) {

  p {
  font-size: 14px;
  }

  h1 { font-size: 18px;
  }
/* Menüpunktbreite ganz einfach */

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 5px 5px;
  text-decoration: none;
  border-bottom: 1px solid #5394CF;
}

  li {
    float: left;
    border-right:1px solid #bbb;
    width: 100%;
    font-size: 14px;
  }
}