/**
 * @author      Tanja Fritz
 * @package     Joomla 3
 * @link        http://www.tanja-fritz.com
 * @email       info@tanja-fritz.com
 * @copyright   Tanja Fritz
 *
 * Copyright (C) 2017 Tanja Fritz
 *
**/
/* ************** ALLGEMEINE FORMATIERUNGEN *********************
*****************************************************************/
@font-face {
        font-family: 'Insider';
        src: url("../fonts/1FD652_0_0.eot");
        src: local('Insider'), local('Insider'),
                url("../fonts/1FD652_0_0.otf") format("opentype"),
                url("../fonts/1FD652_0_0.woff") format("woff");
}


*{
        margin: 0px;
        padding: 0px;
}

html, body{
          background:url(../images/bg.jpg);
          background-repeat: repeat;
}


/* ************************** TYPO ****************************
*****************************************************************/
body{
        font-family: Verdana, sans-serif;
        font-size: 12px;
        line-height: 15px;
        color: #000;
}


p{
        margin-top: 20px;
}


h1 {
        font-family: 'Insider', Helvetica, Arial, sans-serif;
        font-size: 42px;
        font-weight: 400;
        line-height: 48px;
        color: #FFF;
        text-shadow: 1px 1px 4px #000000;
}

h2 {
        font-family: 'Insider', Helvetica, Arial, sans-serif;
        font-size: 30px;
        font-weight: 400;
        font-style: normal;
        line-height: 40px;
        color: #FFF;
}
h3 {
        font-family: 'Insider', Helvetica, Arial, sans-serif;
        font-size: 24px;
        font-weight: 400;
        font-style: normal;
        line-height: 24px;
        color: #000000;
}




/* ************************** LAYOUT ****************************
*****************************************************************/

#wrapper{
  width: 70%;
  background-color: white;
  margin: 5% auto;
  height:auto !important;
  border: 1px solid #43536b;
        -webkit-box-shadow: 0px 0px 20px #616161;
        -moz-box-shadow: 0px 0px 20px #616161;
        box-shadow: 0px 0px 20px #616161;
     overflow: hidden !important; /* FF Scroll-leiste */
}

#kopf{
          width: 100%;
          height: 120px;
          margin: 0px auto;
          margin-top: 20px;
}

#logo{
          width: 30%;
          height: 100px;
          float:left;
          background-repeat:no-repeat;
          margin-top: 30px;
          margin-left: 50px;
}


#inhalt{
         width: 100%;
        min-height: 498px;
        float:left;
        background: #aab5cf;
        border-bottom: 1px solid #43536b;
        border-top: 1px solid #43536b;
}
#foto {
        width:50%;
        float:left;
        color: #6b9ff3;
        overflow: hidden;
        height: 498px;
   }
#foto img{
        width:100%;
   }


#text{
          width: 50%;
          float:left;
          margin: 0px auto;
          line-height: 20px;
          font-size: 14px;
          color: black;
          z-index: 5;
}
#text p{
          padding: 10px 30px 10px 60px;
}
#text ul{
          padding: 0px 30px 0px 75px;
}
#text h2, #text h3{
          padding: 25px 30px 0px 60px;
}

footer{
         width: 100%;
        margin-top: 25px;
        float:left;
        height: 100px;
        line-height: 17px;
        font-size: 13px;
        color: white;
        border-top: 1px solid #43536b;
        background:url(../images/bg_footer.jpg);
        background-repeat: repeat;
}
footer a{
        line-height: 20px;
        font-size: 14px;
        color: white;
        list-style: none;
        text-decoration: none;
}

#impressum{
          width: 50%;
          height: 45px;
          color: white;
          float:right;
          line-height: 20px;
          font-size: 14px;
}
#impressum p{
          padding: 20px 0px 20px 60px;
          line-height: 20px;
          font-size: 14px;
          float:left;
}
#telefon{
          width: 50%;
          height: 45px;
          float:left;
          line-height: 20px;
          font-size: 14px;
}
#telefon p{
          padding: 20px 0px 20px 50px;
}



/* ************************** NAVIGATION ************************
*****************************************************************/

#navi {
         width: 60%;
         height: 30px;
         float: right;
         position: relative;
        background: none;
        margin-top: 90px;
        z-index: 2;
}
#navi:after {
        content:"";
        display: table;
        clear: both;
}
#navi li {
        list-style: none;
        display:inline;
}
#navi ul {
            margin: 0;
        text-align: center;
        line-height: 30px;
}
#navi a {
        height: 100%;
        padding:0 15px;
        font-family: 'Insider', Helvetica, Arial, sans-serif;
        font-size: 21px;
        font-weight: 400;
        text-decoration: none;
        color: #37507d;

       line-height: 30px;
        margin-right: auto;
        margin-left: auto;

        webkit-transition: all 200ms ease-in;
        -moz-transition: all 200ms ease-in;
        -ms-transition: all 200ms ease-in;
        -o-transition: all 200ms ease-in;
        transition: all 200ms ease-in;
}
#navi a:hover {
        color: #9faeca;
            height: 100%;
        padding:0 15px;
            line-height: 30px;
        background-color: none;
        -webkit-transition: all 400ms ease-in;
        -moz-transition: all 400ms ease-in;
        -ms-transition: all 400ms ease-in;
        -o-transition: all 400ms ease-in;
        transition: all 400ms ease-in;
}
#navi ul ul {
        display: none;
        position: absolute;
        top: 50px;
        margin-left: -200px;
        background-color: rgba(23, 41, 131, 0.5);
}


/* Klappmenu */
#navi ul li:hover > ul {
        display: inherit;
        list-style: none;
        background-color: rgba(23, 41, 131, 0.0);
}
/* 1. Ebene*/
#navi ul ul li {
        width: 230px;
        float: none;
        display: list-item;
        text-align: center;
        position: relative;
    background-color: rgba(23, 41, 131, 0.5);
        z-index: 1;
}
#navi ul ul li:hover {
        background-color: rgba(23, 41, 131, 0.5);
}
#navi ul ul li a {
        color: white;
}
#navi ul ul li a:hover {
        background-color: rgba(23, 41, 131, 0.0);
}
.menue-button {
        display: none;
}
@media screen and (min-width:1279px) and (max-width:1689px) {
#wrapper{
  width: 90%;
  background-color: white;
  margin: 2% auto;
  height:auto !important;
  border: 1px solid #43536b;
        -webkit-box-shadow: 0px 0px 20px #616161;
        -moz-box-shadow: 0px 0px 20px #616161;
        box-shadow: 0px 0px 20px #616161;
     overflow: hidden !important; /* FF Scroll-leiste */
}

#kopf{
          width: 100%;
          height: 110px;
          margin: 0px auto;
          margin-top: 20px;
}

#logo{
          width: 30%;
          height: 100px;
          float:left;
          background-repeat:no-repeat;
          margin-top: 30px;
          margin-left: 50px;
}

#inhalt{
         width: 100%;
        min-height: 400px;
        float:left;
        background: #aab5cf;
        border-bottom: 1px solid #43536b;
        border-top: 1px solid #43536b;
}
#foto {
        width:40%;
        float:left;
        color: #6b9ff3;
        overflow: hidden;
        height: 400px;
   }
#foto img{
        width:90%;
        margin-left: 0px;
   }
.flexslider {
        background: #aab5cf!important;
        z-index: 1;
   }
#text{
          width: 60%;
          float:left;
          margin: 0px auto;
          line-height: 20px;
          font-size: 14px;
          color: black;
          z-index: 5;
}
footer{
         width: 100%;
        margin-top: 15px;
        float:left;
        height: 60px;
        line-height: 17px;
        font-size: 13px;
        color: white;
        border-top: 1px solid #43536b;
        background:url(../images/bg_footer.jpg);
        background-repeat: repeat;
}
#impressum{
          width: 50%;
          height: 25px;
          color: white;
          float:right;
          line-height: 20px;
          font-size: 14px;
}
#impressum p{
          padding: 0px 0px 20px 60px;
          line-height: 20px;
          font-size: 14px;
          float:left;
}
#telefon{
          width: 50%;
          height: 25px;
          float:left;
          line-height: 20px;
          font-size: 14px;
}
#telefon p{
          padding: 0px 0px 20px 50px;
}

}
@media screen and (min-width:768px) and (max-width:1139px) and (orientation:landscape) {
html, body{
          background:none;
          background-repeat: repeat;
}
#wrapper{
  width: 100%;
  margin: 0 auto;
  border: 0px solid #43536b;
          -webkit-box-shadow: 0px 0px 0px #616161;
        -moz-box-shadow: 0px 0px 0px #616161;
        box-shadow: 0px 0px 0px #616161;
  height:auto !important;
}

#kopf{
          width: 100%;
          height: 100px;
          margin: 0px auto;
          margin-top: 10px;
}

#logo{
          width: 30%;
          height: 100px;
          float:left;
          background-repeat:no-repeat;
          margin-top: 20px;
          margin-left: 30px;
}
#inhalt{
         width: 100%;
        min-height: 490px;
        float:left;
        background: #aab5cf;
        border-bottom: 1px solid #43536b;
        border-top: 1px solid #43536b;
}
#foto {
        width:50%;
        float:left;
        color: #6b9ff3;
        overflow: hidden;
        height: 490px;
   }
#foto img{
        width:105%;
        margin-left: 0px;
   }
#text{
          width: 50%;
          float:left;
          margin: 0px auto;
          line-height: 20px;
          font-size: 14px;
          color: black;
          z-index: 5;
}
#text p{
          padding: 10px 30px 10px 60px;
}
#text ul{
          padding: 0px 20px 0px 75px;
}
#text h2, #text h3{
          padding: 25px 30px 0px 60px;
}
/* ************************** NAVIGATION ************************
*****************************************************************/

#navi {
         width: 60%;
         height: 30px;
         float: right;
         position: relative;
        background: none;
        margin-top: 80px;
        z-index: 2;
}
#navi:after {
        content:"";
        display: table;
        clear: both;
}
#navi li {
        list-style: none;
        display:inline;
}
#navi ul {
            margin: 0;
        text-align: center;
        line-height: 30px;
}
#navi a {
        height: 100%;
        padding:0 15px;
        font-family: 'Insider', Helvetica, Arial, sans-serif;
        font-size: 21px;
        font-weight: 400;
        text-decoration: none;
        color: #37507d;

       line-height: 30px;
        margin-right: auto;
        margin-left: auto;

        webkit-transition: all 200ms ease-in;
        -moz-transition: all 200ms ease-in;
        -ms-transition: all 200ms ease-in;
        -o-transition: all 200ms ease-in;
        transition: all 200ms ease-in;
}
#navi a:hover {
        color: #9faeca;
            height: 100%;
        padding:0 15px;
            line-height: 30px;
        background-color: none;
        -webkit-transition: all 400ms ease-in;
        -moz-transition: all 400ms ease-in;
        -ms-transition: all 400ms ease-in;
        -o-transition: all 400ms ease-in;
        transition: all 400ms ease-in;
}
#navi ul ul {
        display: none;
        position: absolute;
        top: 50px;
        margin-left: -200px;
        background-color: rgba(23, 41, 131, 0.5);
}


/* Klappmenu */
#navi ul li:hover > ul {
        display: inherit;
        list-style: none;
        background-color: rgba(23, 41, 131, 0.0);
}
/* 1. Ebene*/
#navi ul ul li {
        width: 230px;
        float: none;
        display: list-item;
        text-align: center;
        position: relative;
    background-color: rgba(23, 41, 131, 0.5);
        z-index: 1;
}
#navi ul ul li:hover {
        background-color: rgba(23, 41, 131, 0.5);
}
#navi ul ul li a {
        color: white;
}
#navi ul ul li a:hover {
        background-color: rgba(23, 41, 131, 0.0);
}
.menue-button {
        display: none;
}
}

@media screen and (min-width:768px) and (max-width:1139px) and (orientation:portrait) {
 html, body{
          background:none;
          background-repeat: repeat;
}
#wrapper{
  width: 100%;
  margin: 0 auto;
  border: 0px solid #43536b;
          -webkit-box-shadow: 0px 0px 0px #616161;
        -moz-box-shadow: 0px 0px 0px #616161;
        box-shadow: 0px 0px 0px #616161;
  height:auto !important;
}

#kopf{
          width: 100%;
          height: 100px;
          margin: 0px auto;
          margin-top: 10px;
}

#logo{
          width: 30%;
          height: 100px;
          float:left;
          background-repeat:no-repeat;
          margin-top: 20px;
          margin-left: 30px;
}
#inhalt{
         width: 100%;
        min-height: 490px;
        float:left;
        background: #aab5cf;
        border-bottom: 1px solid #43536b;
        border-top: 1px solid #43536b;
}
#foto {
        width:50%;
        float:left;
        color: #6b9ff3;
        overflow: hidden;
        height: 490px;
   }
#foto img{
        width:105%;
        margin-left: 0px;
   }
.flexslider {
        background: #aab5cf!important;
        z-index: 1;
   }
#text{
          width: 50%;
          float:left;
          margin: 0px auto;
          line-height: 20px;
          font-size: 14px;
          color: black;
          z-index: 5;
}
#text p{
          padding: 10px 20px 30px 30px;
}
#text ul{
          padding: 0px 20px 0px 45px;
}
#text h2, #text h3{
          padding: 25px 20px 0px 30px;
}


#navi {
        float: left;
        width: 100%;
        height: 290px;
        position: absolute;
        display: none;
        padding-left: 0px;
        margin-top: 95px;
        background: #0070b7;
        z-index: 10;
}
#navi:after {
        content:"";
        display: table;
        clear: both;
}
#navi a {
        height: 100%;
        padding:0 15px;
        font-family: 'Insider', Helvetica, Arial, sans-serif;
        font-size: 21px;
        font-weight: 400;
        text-decoration: none;
        color: white;

       line-height: 30px;
        margin-right: auto;
        margin-left: auto;

        webkit-transition: all 200ms ease-in;
        -moz-transition: all 200ms ease-in;
        -ms-transition: all 200ms ease-in;
        -o-transition: all 200ms ease-in;
        transition: all 200ms ease-in;
}
#navi a:hover {
        color: #004a79;
            height: 100%;
        padding:0 15px;
            line-height: 30px;
        background-color: none;
        -webkit-transition: all 400ms ease-in;
        -moz-transition: all 400ms ease-in;
        -ms-transition: all 400ms ease-in;
        -o-transition: all 400ms ease-in;
        transition: all 400ms ease-in;
}
#navi li {
        list-style: none;
        display:list-item;
        padding-right: 0px;
        padding-left: 0px;
}
#navi ul {
         margin: 0;
         margin-top: 20px;
        text-align: left;
        line-height: 50px;
}

#navi ul ul {
        display: none;
        position: absolute;
        top: 0px;
        margin-left: 100px;
        background-color: #0070b7;
}

/* Klappmenu */
#navi ul li:hover > ul {
        display: inherit;
        list-style: none;
        background-color: #0070b7;
}
/* 1. Ebene*/
#navi ul ul li {
        width: 230px;
        float: none;
        display: list-item;
        text-align: center;
        position: relative;
        background-color: #0070b7;
        z-index: 1;
}
#navi ul ul li:hover {
        background-color: rgba(23, 41, 131, 0.5);
}
#navi ul ul li a {
        color: white;
}
#navi ul ul li a:hover {
        background-color: rgba(23, 41, 131, 0.0);
}

.menue-button {
        background-color: none;
        display: block;
        position: absolute;
        right: 0.5em;
        top: 0.3em;
        padding: 0.4em;
        color: #0070b7;
        font-size: 20px;
        cursor: pointer;
        text-decoration: none;
        z-index: 10;
}
.fa-navicon {
         content:"\f0c9";
}
.fa {
         display: inline-block;
         font: normal normal normal 14px/1 FontAwesome;}

.menue-button:hover {
        color: black;
        background: none;
}

#kopf:target #navi {
        display: block;
}
#kopf:target .menue-button-beschr-open {
        display: none;
}
 }
@media screen and (min-width:320px) and (max-width:767px) and (orientation:portrait) {

h1 {
        font-family: 'Insider', Helvetica, Arial, sans-serif;
        font-size: 42px;
        font-weight: 400;
        line-height: 48px;
        color: #FFF;
        text-shadow: 1px 1px 4px #000000;
}

h2 {
        font-family: 'Insider', Helvetica, Arial, sans-serif;
        font-size: 30px;
        font-weight: 400;
        font-style: normal;
        line-height: 40px;
        color: #FFF;
}
h3 {
        font-family: 'Insider', Helvetica, Arial, sans-serif;
        font-size: 24px;
        font-weight: 400;
        font-style: normal;
        line-height: 24px;
        color: #000000;
}
 html, body{
          background:none;
          background-repeat: repeat;
}
#wrapper{
  width: 100%;
  margin: 0 auto;
  border: 0px solid #43536b;
          -webkit-box-shadow: 0px 0px 0px #616161;
        -moz-box-shadow: 0px 0px 0px #616161;
        box-shadow: 0px 0px 0px #616161;
  height:auto !important;
}
#kopf{
        width: 100%;
        height: 80px;
        position: relative;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0px;
        z-index: 2;
}

#logo {
        width: 100%;
        height: 80px;
        margin-left: auto;
        margin-right: auto;
        padding-top: 0px;
        position: relative;
        float:left;
        z-index: 2;
}
#logo img {
        width: 80%;
        margin-left: 30px;
}
#inhalt{
         width: 100%;
        min-height: 490px;
        float:left;
        background: #aab5cf;
        border-bottom: 1px solid #43536b;
        border-top: 1px solid #43536b;
}
#foto {
        width:100%;
        float:left;
        color: #6b9ff3;
        overflow: hidden;
        height: 290px;
   }

#foto img{
        width:105%;
        margin-left: 0px;
   }
.flexslider {
        background: #aab5cf!important;
        z-index: 1;
   }
#text{
          width: 100%;
          float:left;
          margin: 0px auto;
          line-height: 20px;
          font-size: 14px;
          color: black;
          z-index: 5;
}
#text p{
          padding: 10px 20px 30px 30px;
}
#text ul{
          padding: 0px 20px 0px 45px;
}
#text h2, #text h3{
          padding: 25px 20px 0px 30px;
}
footer{
         width: 100%;
        margin-top: 25px;
        float:left;
        height: 130px;
        line-height: 17px;
        font-size: 13px;
        color: white;
        border-top: 1px solid #43536b;
        background:url(../images/bg_footer.jpg);
        background-repeat: repeat;
}
footer a{
        line-height: 20px;
        font-size: 14px;
        color: white;
        list-style: none;
        text-decoration: none;
}

#impressum{
          width: 100%;
          height: 45px;
          color: white;
          float:right;
          line-height: 20px;
          font-size: 14px;
}
#impressum p{
          padding: 5px 0px 5px 30px;
          line-height: 20px;
          font-size: 14px;
          float:left;
}
#telefon{
          width: 100%;
          height: 45px;
          float:left;
          line-height: 20px;
          font-size: 14px;
}
#telefon p{
          padding: 5px 0px 25px 30px;
}



#navi {
        float: left;
        width: 100%;
        height: 290px;
        position: absolute;
        display: none;
        padding-left: 0px;
        margin-top: 95px;
        background: #0070b7;
        z-index: 1;
}
#navi:after {
        content:"";
        display: table;
        clear: both;
}
#navi a {
        height: 100%;
        padding:0 15px;
        font-family: 'Insider', Helvetica, Arial, sans-serif;
        font-size: 21px;
        font-weight: 400;
        text-decoration: none;
        color: white;

       line-height: 30px;
        margin-right: auto;
        margin-left: auto;

        webkit-transition: all 200ms ease-in;
        -moz-transition: all 200ms ease-in;
        -ms-transition: all 200ms ease-in;
        -o-transition: all 200ms ease-in;
        transition: all 200ms ease-in;
}
#navi a:hover {
        color: #004a79;
            height: 100%;
        padding:0 15px;
            line-height: 30px;
        background-color: none;
        -webkit-transition: all 400ms ease-in;
        -moz-transition: all 400ms ease-in;
        -ms-transition: all 400ms ease-in;
        -o-transition: all 400ms ease-in;
        transition: all 400ms ease-in;
}
#navi li {
        list-style: none;
        display:list-item;
        padding-right: 0px;
        padding-left: 0px;
}
#navi ul {
         margin: 0;
         margin-top: 20px;
        text-align: left;
        line-height: 50px;
}

#navi ul ul {
        display: none;
        position: absolute;
        top: 0px;
        margin-left: 100px;
        background-color: #0070b7;
}

/* Klappmenu */
#navi ul li:hover > ul {
        display: inherit;
        list-style: none;
        background-color: #0070b7;
                z-index: 1;
}
/* 1. Ebene*/
#navi ul ul li {
        width: 230px;
        float: none;
        display: list-item;
        text-align: center;
        position: relative;
        background-color: #0070b7;
        z-index: 1;
}
#navi ul ul li:hover {
        background-color: rgba(23, 41, 131, 0.5);
}
#navi ul ul li a {
        color: white;
}
#navi ul ul li a:hover {
        background-color: rgba(23, 41, 131, 0.0);
}




.menue-button {
        background-color: none;
        display: block;
        position: absolute;
        right: 0.3em;
        top: 0.1em;
        padding: 0.4em;
        color: #0070b7;
        font-size: 20px;
        cursor: pointer;
        text-decoration: none;
        z-index: 10;
}
.fa-navicon {
         content:"\f0c9";
}
.fa {
         display: inline-block;
         font: normal normal normal 14px/1 FontAwesome;}

.menue-button:hover {
        color: black;
        background: none;
}

#kopf:target #navi {
        display: block;
}
#kopf:target .menue-button-beschr-open {
        display: none;
}
}
@media screen and (min-width:320px) and (max-width:767px) and (orientation:landscape) {

h1 {
        font-family: 'Insider', Helvetica, Arial, sans-serif;
        font-size: 42px;
        font-weight: 400;
        line-height: 48px;
        color: #FFF;
        text-shadow: 1px 1px 4px #000000;
}

h2 {
        font-family: 'Insider', Helvetica, Arial, sans-serif;
        font-size: 30px;
        font-weight: 400;
        font-style: normal;
        line-height: 40px;
        color: #FFF;
}
h3 {
        font-family: 'Insider', Helvetica, Arial, sans-serif;
        font-size: 24px;
        font-weight: 400;
        font-style: normal;
        line-height: 24px;
        color: #000000;
}
 html, body{
          background:none;
          background-repeat: repeat;
}
#wrapper{
  width: 100%;
  margin: 0 auto;
  border: 0px solid #43536b;
          -webkit-box-shadow: 0px 0px 0px #616161;
        -moz-box-shadow: 0px 0px 0px #616161;
        box-shadow: 0px 0px 0px #616161;
  height:auto !important;
}
#kopf{
        width: 100%;
        height: 80px;
        position: relative;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0px;
        z-index: 2;
}

#logo {
        width: 60%;
        height: 120px;
        margin-left: auto;
        margin-right: auto;
        padding-top: 0px;
        position: relative;
        float:left;
        z-index: 2;
}
#logo img {
        width: 80%;
        margin-left: 30px;
}
#inhalt{
         width: 100%;
        min-height: 490px;
        float:left;
        background: #aab5cf;
        border-bottom: 1px solid #43536b;
        border-top: 1px solid #43536b;
}
#foto {
        width:100%;
        float:left;
        color: #6b9ff3;
        overflow: hidden;
        height: 490px;
   }
#foto img{
        width:105%;
        margin-left: 0px;
   }
.flexslider {
        background: #aab5cf!important;
        z-index: 1;
   }
#text{
          width: 100%;
          float:left;
          margin: 0px auto;
          line-height: 20px;
          font-size: 14px;
          color: black;
          z-index: 5;
}
#text p{
          padding: 10px 20px 30px 30px;
}
#text ul{
          padding: 0px 20px 0px 45px;
}
#text h2, #text h3{
          padding: 25px 20px 0px 30px;
}
footer{
         width: 100%;
        margin-top: 25px;
        float:left;
        height: 130px;
        line-height: 17px;
        font-size: 13px;
        color: white;
        border-top: 1px solid #43536b;
        background:url(../images/bg_footer.jpg);
        background-repeat: repeat;
}
footer a{
        line-height: 20px;
        font-size: 14px;
        color: white;
        list-style: none;
        text-decoration: none;
}

#impressum{
          width: 100%;
          height: 45px;
          color: white;
          float:right;
          line-height: 20px;
          font-size: 14px;
}
#impressum p{
          padding: 5px 0px 5px 30px;
          line-height: 20px;
          font-size: 14px;
          float:left;
}
#telefon{
          width: 100%;
          height: 45px;
          float:left;
          line-height: 20px;
          font-size: 14px;
}
#telefon p{
          padding: 5px 0px 25px 30px;
}




#navi {
        float: left;
        width: 100%;
        height: 290px;
        position: absolute;
        display: none;
        padding-left: 0px;
        margin-top: 95px;
        background: #0070b7;
        z-index: 10;
}
#navi:after {
        content:"";
        display: table;
        clear: both;
}
#navi a {
        height: 100%;
        padding:0 15px;
        font-family: 'Insider', Helvetica, Arial, sans-serif;
        font-size: 21px;
        font-weight: 400;
        text-decoration: none;
        color: white;

       line-height: 30px;
        margin-right: auto;
        margin-left: auto;

        webkit-transition: all 200ms ease-in;
        -moz-transition: all 200ms ease-in;
        -ms-transition: all 200ms ease-in;
        -o-transition: all 200ms ease-in;
        transition: all 200ms ease-in;
}
#navi a:hover {
        color: #004a79;
            height: 100%;
        padding:0 15px;
            line-height: 30px;
        background-color: none;
        -webkit-transition: all 400ms ease-in;
        -moz-transition: all 400ms ease-in;
        -ms-transition: all 400ms ease-in;
        -o-transition: all 400ms ease-in;
        transition: all 400ms ease-in;
}
#navi li {
        list-style: none;
        display:list-item;
        padding-right: 0px;
        padding-left: 0px;
}
#navi ul {
         margin: 0;
         margin-top: 20px;
        text-align: left;
        line-height: 50px;
}

#navi ul ul {
        display: none;
        position: absolute;
        top: 0px;
        margin-left: 100px;
        background-color: #0070b7;
}

/* Klappmenu */
#navi ul li:hover > ul {
        display: inherit;
        list-style: none;
        background-color: #0070b7;
}
/* 1. Ebene*/
#navi ul ul li {
        width: 230px;
        float: none;
        display: list-item;
        text-align: center;
        position: relative;
        background-color: #0070b7;
        z-index: 1;
}
#navi ul ul li:hover {
        background-color: rgba(23, 41, 131, 0.5);
}
#navi ul ul li a {
        color: white;
}
#navi ul ul li a:hover {
        background-color: rgba(23, 41, 131, 0.0);
}




.menue-button {
        background-color: none;
        display: block;
        position: absolute;
        right: 0.3em;
        top: 0.1em;
        padding: 0.4em;
        color: #0070b7;
        font-size: 20px;
        cursor: pointer;
        text-decoration: none;
        z-index: 10;
}
.fa-navicon {
         content:"\f0c9";
}
.fa {
         display: inline-block;
         font: normal normal normal 14px/1 FontAwesome;}

.menue-button:hover {
        color: black;
        background: none;
}

#kopf:target #navi {
        display: block;
}
#kopf:target .menue-button-beschr-open {
        display: none;
}
 }