/* Stylesheet für TippStart.de Standardseiten  */

/* ====================================   GLOBAL   ==================================== */

/* Alternatives Boxmodell */

html {
  box-sizing: border-box;
}

*,
::before,
::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  font: normal 1em Tahoma, Liberation Sans, sans-serif;
  /* Keine Mindestschriftgröße! Dies wird dem Browser bzw. dem Nutzer überlassen! */
  color: #333333;
  background-color: #aaaaaa
}

/* ====================================   HEADER   ==================================== */

[role="banner"] {
  background: url("../img/logots670.png") no-repeat right,
  #000000 repeating-linear-gradient(-45deg, black, #151515 8em);
  background-size: contain, auto;
  padding: 0 0 0.5em;
}

@media screen and (max-width: 40em) {
  /* Normalerweise werden solche responsiven Layout-Einstellungen gesondert am Schluss notiert.
     Hier sollen die Mulitple Backgrounds aber gleich anfangs gezeigt werden.
     Auf zu kleinen Bildschirmen wird das Bild jedoch ausgeblendet. */
  [role="banner"] {
    background-image: none;
  }
}

[role="banner"] h1,
[role="banner"] p {
  max-width: 60em;
  margin: 0 auto;
  padding-left: 5%;
  font-family: 'Roboto', sans-serif;
  font-variant: small-caps;
  font-weight: bold;
  font-size: 2em;
  color: #eeeeee;
}

[role="banner"] p {
  padding: 1em 5%;
  color: white;
}

[role="banner"] img {
  float: right;
  height: 15em;
}

/* ====================================   NAV   ==================================== */

nav {
  max-width: 40em;
  margin: 0 auto;
}

nav ul {
  text-align: center;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

nav a {
  background: #28729a;
  color: #dddddd;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
  padding: 1em 0em 1em;
}

nav a:hover,
nav a:focus {
  background: #28729a;
  color: #dddddd;
}

nav a:hover::after,
nav a:focus::after {
  color: transparent;
}

/* ====================================   CONTENT   ==================================== */

main {
  background-color: #eeeeee
}

a,
.akzentfarbe1 {
  color: #666666;
}

.akzentfarbe2 {
  color: #cccccc;
}

h2 {
  color: #28729a;
  font-size: 1.2em;
  font-weight: bold;
  font-family: 'Tauri', serif;
  text-transform: uppercase;
}

.smallteaser {
  background: #ffffff;
  padding: 0.5em 0.5em;
}

.smallteaser h2 {
  display: flex;
  border-bottom: 2px solid;
  align-items: flex-end;
}

.smallteaser h2 img {
  margin-left: auto;
}

.smallteaser header p {
  border-bottom: 1px #888888 solid;
}

a.more {
  float: right;
  padding: 0.5em 0.5em;
  margin-top: 0.25em;
  background: #28729a;
  color: white;
}

a.more:hover,
a.more:focus {
  background-color: #909090;
}

aside,
.bigteaser {
  background: #28729a;
  padding: 0.5em;
  color: white;
}

aside a,
.bigteaser a {
  color: white;
}

.bigteaser a.more {
  background: white;
  color: #28729a;
}

/* ====================================   FOOTER   ==================================== */

footer {
  background: #666666 repeating-linear-gradient(-45deg, black, #151515 8em);
  padding: 1em 2em;
  color: #666666;
}

footer * {
  flex: 1 1 16em;
  text-align: center;
}

footer .branding {
  text-align: right;
}

/* ====================================   LAYOUT   ==================================== */

/* Responsives Layout mit Flexbox */
/* Alle Blöcke haben 100%, Navigation unten */

body {
  padding: 0 0em;
}

main {
  max-width: 65em;
  margin: 0 auto;
  padding: 0em 0em 0;
}

/* Navigationselemente werden untereinander angezeigt */

nav ul {
  display: flex;
  flex-direction: column;
}

nav li {
  margin: 0.3em 0;
  flex: 1 1 100%;
}

nav a {
  width: 95%;
  margin: 0 0;
  border-radius: 0.5em;
}

[aria-current=page] {
  color: black;
  font-weight: bold;
}

[aria-current=page]:hover,
[aria-current=page]:focus {
  color: black;
}

/* 2-Spaltenlayout mit breiterem aside */
@media screen and (min-width: 40em) {

/* Navigation wird nebeneinander ausgerichtet */

body {
  padding: 0;
}

/* Navigation wird nebeneinander ausgerichtet */

nav ul {
  flex-direction: row;
  background: transparent;
}

nav li {
  margin: 0;
  flex: 1 1 0%;
}

nav a {
  background: transparent;
}

[aria-current=page] {
  color: #28729a;
}
}

/* Main wird zum Flex-Container */

main,
footer {
  display: flex;
  flex-flow: row wrap;
}

main > * {
  flex: 1 1 18em;
  margin: 1em;
}

.bigteaser {
  flex: 1 1 18em;
}

/* Alle Unterseiten [nicht die Startseiten, also :not(.home)] */

:not(.home) article {
  flex: 2 2 32em;   /* Hauptartikel zur Seitenspalte im Verhältnis ca. 2:1, so vorhanden */
  max-width: 100%;  /* Begrenzt die Zeilen nicht */
}

:not(.home) article + aside {
  flex: 1 1 16em;   /* Seitenleiste zum Hauptartikel im Verhältnis ca. 1:2, Summe derzeit 48em */
  max-width: 40em;  /* Begrenzt die Zeilen auf eine gut lesbare Länge */
}

/* Grundsätzlich alle Seiten auch im HKF mit 360x800 und im QF mit 800x360 prüfen! */