html { padding: 0 2% 0px; }

body {
     display: -webkit-flex;
     display: flex;
     -webkit-flex-flow: row wrap;
     flex-flow: row wrap;
     background-image: url(../bilder/index_bg.jpg);
     background-position: top center;
     background-attachment: scrolled;
     background-repeat: no-repeat;
     background-color: #215da5;
     margin: 0px auto;
     max-width: 52em;            /* 800px Gesamtbreite der Website */
     font-family: verdana;
     font-size: 0.9em;
     line-height: 1.3em;
     color: #EEEEEE;
}

main, header {
     -webkit-flex: 1 100%;
     flex: 1 100%;
     width:100%;
     text-align:center;
 }

header{
     color: white;
     text-align:center;
}

.flags {
     position:relative;
     margin-top:180px;
}

.slogan {
     padding-top: 20px;
}

.text_flaggen_seite {
     margin-top:190px;
     text-align:center;
     font-family: arial;
     font-size: 6px;
     line-height: 1em;
     color: #08498c;
}


p.text_sprachen_seite {
     margin-top:25px;
     text-align:center;
     font-family: arial;
     font-size: 6px;
     line-height: 1em;
     color: #08498c;
}


/*------- IFRAME -------------------------------*/


.inhalt {
     position: relative;
     width: 100%;
     height: 100%;
     border-radius: 5px 5px 5px 5px;
     margin: 0px 0px 10px 0px;
     color: #4C4C4C;
     background-color: #e7e7e7;
 }

.scroll {
     -webkit-overflow-scrolling: touch !important;
     overflow-y: scroll !important;
     display: inline-block;
     position: relativ;
     width: 100%;
     height: 440px;
     padding-bottom: 0%;
     padding-top: 1%;
  }

.scroll iframe {
     width: 100%;
     height: 99%;
     border:0;
  }

/*--------------------------------------------------*/

footer{
     margin-top:0px; /* vertikaler abstand 2. menü */
}


a {  text-decoration: none;
     color:#ffffff;}

h1 {
     font-size: 2em;
     font-weight:bold;
     line-height: 1em;
     color: #EEEEEE;
     margin-bottom: -5px;
}

h2 {
     font-size: 1.4em;
     font-weight:bold;
     line-height: 1em;
     margin-bottom: -1px;
     color: #EEEEEE;
}

h3 {
     font-size: 0.9 em;
     font-weight:bold;
     line-height: 1em;
}

#logo {
     color: #EEEEEE;
}

.shadow {
     text-shadow: 0px 0px 10px black;
     color: #EEEEEE;
}


/*------ MENÜ ---------------------------------------*/

/* onClick=”return true” für iPad */

nav {
   -webkit-flex: 1 100%;
   flex: 1 100%;
     text-align:center;
}

nav a {
   -webkit-flex: 1 100%;
   flex: 1 100%;
     margin: 1px 3px 1px 2px;  /* menüfläche höhe/breite */
}

nav ul {
     list-style: none;
     position: relative;
     display: inline-table;
     font-family: verdana;
     font-size:14px;
     padding: 0px 0px;           /* zentrierung menüpunkte */
     z-index: 1;
}

nav ul:after {
content: ""; clear: both; display: block;
}

nav ul li {
     float: left;
     text-align:center;

     background: #f0f0f0;
     background-image: -webkit-linear-gradient(top, #f0f0f0, #9e9e9e);
     background-image: -moz-linear-gradient(top, #f0f0f0, #9e9e9e);
     background-image: -ms-linear-gradient(top, #f0f0f0, #9e9e9e);
     background-image: -o-linear-gradient(top, #f0f0f0, #9e9e9e);
     background-image: linear-gradient(to bottom, #f0f0f0, #9e9e9e);

     -webkit-border-radius: 5;
     -moz-border-radius: 5;
     border-radius: 5px;
     border: solid #b0adaa 1px;
     text-shadow: 1px 1px 0px #666666;
     font-family: verdana;
     font-size: 14px;

     padding: 1px 5px 1px 5px;
     text-decoration: none;
     }

nav ul li a {
     width:130px;                  /* breite hauptmenü */
     white-space: nowrap;
  }

nav ul li a {
     display: block;
     color: #000000;               /* textfarbe menü */
     text-decoration: none;
     }
nav ul li a:hover {
     color: #ffffff;               /* textfarbe hover menü */
     }


/*---SUBMENÜ--------*/
nav ul ul {
     position: absolute;
     left: -9999em;                /* lösung für touchpads */
     }

nav ul li:hover > ul {
     left: auto;                   /* lösung für touchpads */
     display:inherit;              /* Versatz für Chrome,iPad */
     }

nav ul ul li {                     /* submenü */
     float: none;
     position: relative;
     text-align:left;
     background: #f0f0f0;
     background-image: -webkit-linear-gradient(top, #f0f0f0, #9e9e9e);
     background-image: -moz-linear-gradient(top, #f0f0f0, #9e9e9e);
     background-image: -ms-linear-gradient(top, #f0f0f0, #9e9e9e);
     background-image: -o-linear-gradient(top, #f0f0f0, #9e9e9e);
     background-image: linear-gradient(to bottom, #f0f0f0, #9e9e9e);
     text-decoration: none;
     width:160px;                  /* breite dropdown */
     white-space: nowrap;
     /*margin-left:-20px;  versatz dropdown */
}

/* ---=========== Smart Phones und Tablets ========---*/

@media all and (max-width: 765px) {

     .scroll {
     height: 410px;
     padding-bottom: 0%;
     padding-top: 1%;
     }

/* ---=========== Smart Phones und Tablets ========---*/

@media all and (max-width: 480px) {

     .scroll {
     height: 380px;
     padding-bottom: 0%;
     padding-top: 1%;
     }

h1 {
     font-size: 1.5em;
     font-weight:bold;
     line-height: 0.5em;
     color: #EEEEEE;
}

h2 {
     font-size: 0.9em;
     font-weight:bold;
     line-height: 1em;
     color: #EEEEEE;
}

header, nav, nav a, footer {
        -webkit-flex: 1 100%;
        flex: 1 100%;
}

.slogan {
          padding-top: 20px;
}

.flags {
     position:relative;
     margin-top:190px;
}

/* ----MENÜ ------ */

nav ul {
     display: -webkit-flex;
     -webkit-flex-direction: column;
     display: flex;
     flex-direction: column;
     width:150px;
}

nav li {
    list-style: none;
    position: relative;
    margin: 0;
    padding: 0;
  }

nav ul ul {
     display: none;
     position: absolute;
  }

nav ul ul li {           /* submenü */
     margin-left:120px;  /* versatz dropdown */
     width:140px;        /* breite submenü */
}


nav ul li:hover > ul {
     display: block;
     top: -1px;               /* vertikaler submenü abstand zu menü */
}

}


/* ---=========== Smart Phones und Tablets ========---*/

 @media all and (max-width: 20em) {


nav ul ul {
     display: none;
     position: absolute;
     left: 5em; /* horizontaler abstand submenü zu menü */
  }

nav ul ul li {           /* submenü */
     margin-left:120px;  /* hor. abstand submenü */
     width:120px;        /* breite submenü */
}

nav ul li:hover > ul {
     display: block;
     }

}