.container {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex ;
  flex-direction: column;
  height:auto ;
  width:100%;
flex-wrap: wrap;
justify-content: flex-start ;
align-items:left;
margin:0% 0% 0 0%;
padding:0% 0% 0% 0%;
background:  ;
}

/*
.suche{
 display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
 /* display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
   /*display: -ms-flexbox;      /* TWEENER - IE 10 */
  /* display: -webkit-flex;     /* NEW - Chrome */
  /*
  display: flex ;
  flex-direction: column;
  float: left;
  height:auto ;
  width:90%;
  font-size: 1em;
  font-weight: bold;
flex-wrap: wrap;
flex-grow: 1;
  flex-shrink: 2;
  flex-basis: auto;
justify-content: flex-start;
align-items:flex-start;
margin:0% 0% 0% 0%;
padding:0% 0% 0% 0%;
background:;
}
*/
.item{
 display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex ;
  flex-direction: column;
  float: left;
  height:auto ;
  width:90%;
flex-wrap: wrap;
flex-grow: ;
  flex-shrink: ;
  flex-basis: auto;
justify-content: flex-start;
align-items:flex-start;
margin:0% 0% 0% 0%;
padding:0% 0% 0% 0%;
background:;
}

img{ /*logo*/
        display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex ;
  flex-direction: column;
  float: left;
  height: auto;
  width:;
  font-size: ;
flex-wrap: ;
flex-grow: ;
  flex-shrink: ;
  flex-basis: auto;
justify-content: flex-start;
align-items:flex-start;
margin:0% 0% 0% 0%;
padding:0% 0% 0% 0%;
background:;
}

.logo  /*item Logo*/
{
 display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex ;
  flex-direction: column;
  float: left;
  height: ;
  width:%;
justify-content: flex-start;
align-items:flex-start;
margin:0% 0% 0% 0%;
padding:0% 0% 0% 0%;
background-color: ; }

#logo
{
height: auto;
width: 80%;
padding-bottom: 10;
background-color: ;
}

figure
{float: left;
padding:0 0 0 0;
margin: 0 0 0 0;
}

figcaption  {
flex-direction: column;
text-align: left;
font-family: sans-serif;
color: white;
font-size: 0.5em;
float:left;
padding-top: 10;
}

a{
      display: flex;
      width: 60%;
      height: auto;
      padding: 0.2em;
      margin: 0 0 1em 0;
      text-decoration: none;
      font-size: 1.5em ;
      font-family: sans-serif;
      font-style: oblique;
      border: 1px solid black;
      border-radius: 5px;
      color: white;
      background-color: #171717;
    }

a:hover
{background-color: grey;}
a:active
{ background-color: grey; }



@media only screen and ( max-width: 600px ) {
/* mobile Geräte */

.item{font-size: 0.7em;
margin-bottom: 5%;
  }
img{
        width: 90%;
height: auto;
}
.logo
{width: 100%;
height: auto;
margin-bottom: 10%;}
 a{
      display: flex;
      shrink-flex: ;
      width: 100%;
      height: auto;
      padding: 0.2em;
      margin: 0 0 1em 0;
      text-decoration: none;
      font-size: 1.2em ;
      font-family: sans-serif;
      font-style: oblique;
      border: 1px solid grey;
      border-radius: 5px;
      color: white;
      background-color: ;
    }

a:hover
{background-color: grey;}
a:active
{ background-color: grey; }
.container
{padding: 0%;
}
}


@media only screen and ( min-width: 440px ) and ( max-width: 950px )
{
/* Tablets und mittlere Bildschirme */
img
{width: 50%;
height: auto;}
.logo
{width: 50%;
height: auto;}
.item
{
font-size: 1em;
}
}




 @media only screen and ( min-width: 950px )
{
/* breites Browserfenster */

.item{
 display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex ;
  flex-direction: column;
  float: left;
  height:auto ;
  width:90%;
  font-size: 2em;
flex-wrap: wrap;
flex-grow: ;
  flex-shrink: ;
  flex-basis: auto;
justify-content: flex-start;
align-items:flex-start;
margin:0% 0% 0% 0%;
padding:0% 0% 0% 0%;
background:;
}

img
{width: 50%;
height: auto;}
.logo
{width: 50%;
height: auto;}
a{
      display: flex;
      width: 60%;
      height: auto;
      padding: 0.2em;
      margin: 0 0 1em 0;
      text-decoration: none;
      font-size: 1.7em ;
      font-family: sans-serif;
      font-style: oblique;
      border: 1px solid black;
      border-radius: 5px;
      color: white;
      background-color: #171717;
    }

a:hover
{background-color: grey;}
a:active
{ background-color: grey; }

}