@charset "utf-8";

html {
  background: #000;
  color: #eee;	
  font-family: Arial;
}

body {
  margin: 1em auto;
  max-width: 80em;
}

h1, main, aside, main svg {
  padding: 1em;
  margin: 1em;
}

h1, h2 {
  color: hsl(73,100%,55%);
  background: linear-gradient(to right, transparent, hsl(73,100%,55%));
  font-family: Audiowide;
}

article img {
  width: 33%;
  float: right;
  margin-left: 0.5em;
}

figure {
  display: inline-block;
  width: 30%;
  margin: 0.2em;
}

figure img {
  width: 100%;
}

figure figcaption {
  font-style: italic;
}

section {
  border-color: slateblue;
}

#menu_left {
  text-align: center;
}

#menu_left  ul {
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
}

#menu_left a {
  width: 9em;
  margin-bottom: 0.2em;
  background: radial-gradient(hsl(73,100%,55%), transparent 80%);
  color: black;
  border: 0;
}

#menu_left  a:hover, #menu_left  a:focus {
  background: radial-gradient(hsl(73,100%,55%), transparent );
}

nav input[type="submit"] {
  background: radial-gradient(hsl(73,100%,55%), transparent 50%);
  color: black;
  font-size: 1.3em;
  padding-top: 0.3em;
  padding-bottom: 0.3em;
}

nav input[type="submit"]:hover, nav input[type="submit"]:focus {
  background: radial-gradient(hsl(73,100%,55%), transparent 80%);
}

.head_menu_item {
  text-align: center;
}

nav a[aria-current=page] {
	color:white;
	border-color: black;
}

a {
  color: skyblue;
}

a:hover,
a:focus {
  background: #e6f2f7;
}

/* Buttons */

input[type="button"] {
  width: 9em;
  margin-bottom: 0.2em;
  background: radial-gradient(hsl(73,100%,55%), transparent 80%);
  color: black;
  border: 0;
  cursor: pointer;
}

input[type="button"]:hover {
  background: radial-gradient(hsl(73,100%,55%), transparent );
}

.submit_button {
  width: 9em;
  margin-bottom: 0.2em;
  background: radial-gradient(hsl(73,100%,55%), transparent 80%);
  color: black;
  border: 0;
  cursor: pointer;
}

.submit_button:hover {
  background: radial-gradient(hsl(73,100%,55%), transparent );
}

.function_button {
  width: 16em;
  margin-bottom: 0.2em;
  background: radial-gradient(hsl(73,100%,55%), transparent 80%);
  color: black;
  border: 0;
  cursor: pointer;
}

.function_button:hover {
  background: radial-gradient(hsl(73,100%,55%), transparent );
}

.function_button2 {
  width: 25em;
  margin-bottom: 0.2em;
  background: radial-gradient(hsl(73,100%,55%), transparent 80%);
  color: black;
  border: 0;
  cursor: pointer;
}

.function_button:hover2 {
  background: radial-gradient(hsl(73,100%,55%), transparent );
}

.paging_button {
  width: 4em;
  margin-bottom: 0.2em;
  background: radial-gradient(hsl(73,100%,55%), transparent 80%);
  color: black;
  border: 0;
  cursor: pointer;
}

.order_button {
  width: 2em;
  margin-bottom: 0.2em;
  background: radial-gradient(hsl(73,100%,55%), transparent 80%);
  color: black;
  border: 0;
  cursor: pointer;
}

.submit_button:disabled, .submit_button[disabled=disabled], .order_button:disabled {
  background: radial-gradient(hsl(73,100%,55%), transparent 80%);
  color: #585858;
  cursor: none;
}

/* Input text */

input[type="text"] {
  background-color: hsl(73,100%,55%);
  color: black;
  border: 0;
  border-radius: 1em;
  padding-left: 0.3em;
  padding-right: 0.3em;
  width: 20em;
}

input[type="text"]:disabled {
  background-color: #BDBDBD;
  color: #585858;
}

input[type="password"] {
  background-color: hsl(73,100%,55%);
  color: black;
  border: 0;
  border-radius: 1em;
  padding-left: 0.3em;
  padding-right: 0.3em;
  width: 20em;
}

input[type="date"] {
  background-color: hsl(73,100%,55%);
  color: black;
  border: 0;
  border-radius: 1em;
  padding-left: 0.3em;
  padding-right: 0.3em;
}

input[class="loginbox"] {
  width: 9em;
}

input[class="input_street"] {
  width: 16em;
  margin-right: 0.5em;
}

input[class="input_housenumber"] {
  width: 3em;
}

input[class="input_zip"] {
  width: 4em;
  margin-right: 0.5em;
}

input[class="input_town"] {
  width: 15em;
}

input[class="input_money"] {
  width: 6em;
}

/* Input select */

select {
  border: 0;
  border-radius: 1em;
  cursor: pointer;
  background-color: hsl(73,100%,55%);
  color: black;
  padding-left: 0.3em;
  width: 20.5em;
}

.lang_select {
  width: 9em;
  margin-bottom: 0.2em;
  border: 0;
}

.page_select {
  width: 5em;
  margin-bottom: 0.2em;
  border: 0;
}

// Anzeige

.ErrorMessage {
	color: red;
  FONT-WEIGHT: bold
}
td.ErrorMessage {
	color: red;
  FONT-WEIGHT: bold
}
.SuccessMessage {
	COLOR: #008000;
  FONT-WEIGHT: bold
}
td.SuccessMessage {
	COLOR: #008000;
  FONT-WEIGHT: bold
}

/* responsives Layout */

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

/* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */
header, nav, nav a, article, section, aside, footer {
  padding: 1em;
  margin: 1em;
  flex: 1 100%;
}

header {
  display: flex;
  flex-flow: row wrap;
}
header * {
  flex: 1 1 0%;
}
header img {
  flex: 0 0 150px;
  margin-right: 20px;
}
header nav {
  flex: 1 1 100%;
}
nav, nav ul, nav li{
  margin: 0;
  padding: 0;
  border: none;
}
nav ul {
  display: flex;
  flex-direction: column;
}
nav li {
  list-style-type: none;
  margin: 1.3em 0;
  flex: 1 1 100%;
}
nav a {
  display: inline-block;
  width: 95%;
  margin: 0;
  text-decoration: none;
  text-align: center;
}

.error_box {
  display: flex;
  flex-flow: row wrap;
  padding: 1em;
  margin: 1em;
  flex: 2 100%;
}

aside a {
  display: inline-block;
  width: 95%;
  margin: 0;
  text-decoration: none;
  text-align: center;
}

footer {
  display: flex;
  flex-flow: row wrap;
}
footer * {
  flex: 1 1 0%;
}
footer p {
  text-align: center;
}


/* Smart Phones und Tablets mit mittlerer Auflösung */
@media all and (min-width: 35em) {
  header img {
    margin-right: 50px;
  }
  nav ul {
    flex-direction: row;
  }
  nav li {
    margin: 0 1em;
    flex: 1 1 0%;
  }
  article {
    order: 2;
  }
  #news {
    flex: 1 auto;
    order: 3;
  }
  aside {
    /* durch auto werden die beiden asides in eine Zeile gesetzt */
    flex: 1 auto;
    order: 1;
  }
  footer {
    order: 5;
  }
}

/* Large screens */
@media all and (min-width: 50em) {
 article {
    /* Der Article wird 3x so breit wie die beiden asides! */
    order: 3;
    flex: 3 1 0%;
  }
  aside {
    flex: 1 1 0%;
  }
  #news {
    flex: 1 1 0%;	
    order: 2;
    align-self: center;
    height: 12em;
  }
  #foot_menu {
    flex: 1 1 1000%;	
    order: 31;
    align-self: center;
    height: 12em;
  }
  #foot_line {
    flex: 1 1 1000%;	
    order: 32;
    align-self: center;
    height: 12em;
  }
}

@keyframes ants { to { background-position: 100% 100% } }

article {
	padding: 1em;
	border: 1em solid transparent;
	background: linear-gradient(black, black) padding-box,
	            repeating-linear-gradient(-45deg, black 0, black 25%, orange 0, orange 50%) 0 / 2em 2em;
	animation: ants 9s linear infinite;
}