@charset "utf-8";

/* cookie-regular - latin */
@font-face {
  font-family: 'roboto';
  font-style: normal;
  font-weight: 400;
  src: local(''),
      url('roboto.woff2') format('woff2'), /* Super Modern Browsers */

}



html { background: transparent!important; background-color:pink;}

body { background: linear-gradient(to right, #903 0%,#e6c 53%,#903 100%);
	margin: 1em auto;
	max-width: 65em;
  font-family: 'roboto', sans-serif;
	color: #333;
}

main, aside, main svg {
	border-radius: 8px;
	border: 1px solid;
	padding:0.3em;
	margin:0.3em;
}

h1 a {color:#ddf;font-size:80%;}
h1 { margin-left:1%; color:#fff; margin-top:0px;margin-bottom:3px;}

h1::after {
  content: '';
}
.adresse { margin:10px 0 0 55%; color:#fff; max-width:60%; }
.adresse a { color:#eff;}

article img { max-width:90%; height:auto;}

figure {
  display: inline-block;
  width: 30%;
  margin: 0.2em;
}
figure img {
  width: 100%;
}
figure figcaption {
  font-style: italic;
}

#logo {
  display: inline-block;
  width:150px;
  height: 150px;
  border: 1px solid transparent; font: 0/0 a; text-shadow: none; color: transparent;
}

main {
	display: block;     /* für IE */	
	min-height: 400px;
}

aside{
	background: #bbd;
	border-color: #789;
} 


#hinweis {                    /* für Container */

	border-left: 5px solid #bbd;
}

.hinweis {                    /* für Textzeile */
        color: #c32e04; 
        font-style: italic; 
        border-bottom: 1px dotted; 
        display:inline-block; 
}

/* responsives Layout */

body {
  display: flex;
  flex-flow: row wrap;
}

/* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */

nav { margin-top:3em;  flex: 1 100%;  }

nav a, article, section, aside {
  border-radius:0.4em;
  border: 1px solid;
  padding:.3em;
  margin:1em .4em;
  flex: 1 100%;
}
article, aside { min-height:340px;}      

header {
  background: #822 url("../img/shopinghall.jpg") no-repeat;
  border-color: #d5d5d5;
  border-radius:1em;
  padding:.1em;
  margin:.2em;
  display: flex;
  flex-flow: row wrap;
 
}
header { flex: 1 100%;  margin: 0 0.5em;}
header img {  flex: 0 0 150px;    margin-right: 20px;}

nav ul, nav li{
  margin:0 0.1em;     
  list-style-type: none;
  padding: 0.1em;
  border: 0;
}
nav ul {
  display: flex;
  flex-direction: column;
}
nav li {
  list-style-type:none;
  margin: .1em 0;
  flex: 1 1 50%;
}
nav a {
  display:inline-block;
  width:70%;
  background:hsla(330,50%,50%,0.7); 
  border: 1px solid #da2;
  text-decoration: none;
  text-align: center; 
  margin:0 3px;
  padding:3px 6px 3px 6px;
  color:#fff;  
}
nav a:hover, nav a:focus {
  background-color: #1e4;
}

nav a[aria-current=page] {
	color:black;
	font-weight:bold;
}
section {
  background: #F1F3F4;
  border-color: slateblue;
}
article {
  background: #fee;
  border-color: #d62;
  text-align:center;
}
aside {
  background: #ebf5d7;
  border-color: #8db243;
}
button {min-width:120px;}


/* Smart Phones und Tablets mit mittlerer Auflösung */
@media all and (min-width: 35em) {
h1 { margin-left:10%; color:#fff; margin-top:0px;margin-bottom:9px;}
header img { margin-right:50px; }
nav ul { flex-direction: row; }
nav li { flex: 1 1 0%; margin: 0 5px; }

article { order: 2; }
#news { flex: 1 auto; order: 3; line-height:1.8  }
aside {
/* durch auto werden die beiden asides in eine Zeile gesetzt */
  flex: 1 auto; order: 4;
}
footer { order: 5; }
}

/* Large screens */
@media all and (min-width: 50em) {
h1 { margin-left:5%; color:#fff; margin-top:0px;margin-bottom:9px;}
  article {    /* Der Article wird 2.5x so breit wie die beiden asides! */
    order: 3;
    flex: 3 1 0%;
  }
  aside { flex: 1 1 0%; }
  #news { flex: 1 1 0%; order: 2; height:21em; 
  }
}

caption {
	caption-side: bottom;
	padding-top: 2em;
	font-style: italic;
}