* { padding: 0; margin: 0; text-decoration:none; box-sizing: border-box;  }

@font-face {     font-family: 'Saira-Medium'; src: url('Saira-Medium.ttf'); }

img {   max-width:100%; height:auto; border:1px solid #6f75aa; }

body     { background: #4b528d; font-family: 'Saira',Verdana,Helvetica, sans-serif; font-weight: 400; }

@media screen and (min-width: 768px) {

  main {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; justify-content: center; }

  article {
    order: 2;
    flex-basis: 61%;
  }
  .info1 {
    order: 1;
    flex-basis: 20%;
  }
  .info2 {
    order: 3;
    flex-basis: 15%;
  }

  nav ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; justify-content: center; }
  nav ul li {
    flex: 1 1 170px; }

  #impressum {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; }

  .box {
    flex: 1 1 22%; }

  .bilder {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; }
}


main { margin: 0 auto; max-width: 1200px; }

header  { background:#263da8; }
.unterzeile  { background: #0a185a; }


nav    { background: #fff; }
.menu    { margin: 0 auto; padding:0; text-align:center; max-width: 1175px; }
.menu li { background:#fff; list-style-type:none;  }
.menu a { font-size:0.9em; color:#1b3668; display: block; letter-spacing: 2px;
         line-height:0.9em; text-align:center; padding:1.2em 0.3em; }
.menu a:hover { color:#ffffff; background-color:#232e87; transition:background 0.4s; -webkit-transition:background 0.4s; }


.impre    { margin: 0 auto; text-align:center; background:#fff; margin:0.6em; }
.impre a { font-size:0.9em; color:#1b3668; display: block; letter-spacing: 2px;
         line-height:0.9em; text-align:center; padding:1.2em 0.3em; }
.impre a:hover { color:#ffffff; background:#5a64b9; transition:background 0.4s; -webkit-transition:background 0.4s; }

article   { background-image: linear-gradient(to top, #373ea6 0%, #101869 50%); padding: 0.5em 1em 1.5em 1em; margin:0.6em 0; }
.adresse { background: #fff; margin:0.6em; padding:0.5em; }
aside    { background: #111d63; margin:0.6em; }
.bild { margin:0.6em; }
.info2   { padding:0.6em; }
.info2 img { margin-bottom:0.2em; }


p    {font-size:1em; font-weight: 400; color:#F4EEEF; line-height:1.4em; padding:0.4em 0;}
h1  { font-size:1em; font-weight: 400; color:#12183C; line-height:1.7em; text-align:center; }
h2 { color:#fff; font-weight: 400; font-size:3em; line-height:2em; text-align:center; padding:0.5em; }
h3 { color:#ffffff; font-weight: 400; font-size:1.2em; line-height:0.9em; padding:0.4em 0; }
h4 { color:#260f13; font-weight: 400; font-size:0.9em; text-align:center; letter-spacing:1.1px;}
.uz  { color:#fff; font-weight: 400; font-size:1.2em; text-align:center; line-height:1.2em; }
h5  { font-size:1em; font-weight: 400; color:#1b3668; line-height:1.7em; text-align:center; }
.klein   { font-size:0.8em; }

ol    { font-size:1em; font-weight: 400; color:#F4EEEF; line-height:1.4em; padding-left: 40px;}
ul    { font-size:1em; font-weight: 400; color:#F4EEEF; line-height:1.4em; padding-left: 40px; list-style-type:square; }


.oben    { text-align: right; }
.oben a   { font-size:1.8em; color:#d4d9f3; line-height:0.6em; }
.oben a:hover   { color:#fff; transition: 0.4s; }

a.text:link    { color:#F4EEEF; font-size:1em; line-height:0.8em; }
a.text:hover   { color:#fff; }
a.fuss:visited { color:#fff; }
a.fuss:active  { color:#fff; }

a.fuss:link    {color:#1d315b; font-size:1em; line-height:0.8em; }
a.fuss:visited {color:#1d315b; }
a.fuss:hover   {color:#365caa; }
a.fuss:active  {color:#1d315b; }

.ra { margin-left:0.7em; }

footer  { background-color:#d1dbe5; padding:1em; }
#impressum { max-width:1175px; margin: 0 auto; }
footer p    { font-size:0.8em; color:#1d315b; font-weight:400; line-height:1.5em; }

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

     .menubar {  display: inline-block; cursor: pointer; }
     h2, .unterzeile {display:none;}
     h1  { font-size:1.2em; text-align:center; }
     nav {display:none;}
     .menu {width:100%; margin:0 auto; text-align:center; margin:0; padding: 0; }
     .adresse {width:100%; margin:0 auto; text-align:center; }
     .impre    { margin:0.6em 0; }
     .weg {display:none;}
     .bild { width:100%; padding:0; margin:0; }
     .bilder img { width:100%; height:auto; margin:0.2em auto; }
}