/* Stylesheet für Selfhtml Design 02
  responsives Layout mit Flexbox ab Z. 248   */

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

/* alternatives Boxmodell */

html {
    box-sizing: border-box;
    -webkit-box-sizing: border-box !important;
    background-color: #dceefa;
    color: #595959;
    ;
  }

  *, *::before, *::after {
    box-sizing: border-box;
    -webkit-box-sizing:border-box !important;
  }



  body {
    margin: 0;
    font: normal 1.0em Arial, sans-serif;
    /* Keine Mindestschriftgröße! Dies wird dem Browser, bzw. dem Nutzer überlassen! */
        color: #595959;

    background-color: #dceefa;
  }



 .titellink{
     color:#D90000;
     size:16px;
     padding: 20px;
 }

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

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

  }

  nav a {

    color:#595959;
    text-decoration: none;
    display: inline-block;
    padding: 1em 0 1em 1em;
  }

  nav a:hover,
  nav a:focus {
    color: white;
  }

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

  a,
  .akzentfarbe1 {
    color: #28729a;
  }

  .akzentfarbe2 {
    color: #ccc;
  }

  h1,
  h2 {
    color: #D90000;
    font-size: 1.15em;
    font-weight: bold;
    font-family: 'Arial';
    text-transform: uppercase;
   text-decoration: underline;
  }

  h3 {
    color: #595959;
    font-size: 1.0em;
    font-weight: bold;
    font-family: 'Arial';
    text-decoration: underline;
  }
  h4{
    color:#595959;
    font-size: 1.0em;
    font-weight: bold;
    font-family: 'Arial';
    margin-top:15px;
    margin-bottom:10px;
  }

  li{line-height:22px;}
  ul{padding-bottom:15px; margin-top:7px}

  .smallteaser {
    padding: 0em 0.5em 0em 0.5em;
  }

  .smallteaser h2 {
    display: flex;
    align-items: flex-end;
  }

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



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


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

  aside,
  .bigteaser {
    background: none;
    padding: 0em 0.1em 0em 0.9em;
    font-size: 0.8em;
    line-height: 1.2em;
    color: #595959;
    min-height: 100px;
  }



  aside a,
  .bigteaser a {
    color:#595959;
    line-height:25px ;
  }

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

  /* ==================================== footer ===========================  */

  footer {
    background-color: #3a3939;
    padding: 0.5em 1em 0;
    margin-top: 1em;
    color: white;
  }

  footer > * {
    flex:  1 1 20em;
  }

  footer .branding {
    text-align: right;
  }


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

  /* Mobile first ! alle Blöcke haben 100%, Navigation unten*/

  body {
    padding: 0 1em;
    background-color: #dceefa;
  }

  main {
    max-width: 65em;
    margin: 0 auto;
    padding: 1em 0;
    background-color: #dceefa;;
      }

  /* Navigationselemente werden untereinander angezeigt */

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

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

  nav a {
    width: 95%;
    margin: 0 5%;
    border-radius: .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;
  }
  .smallteaser {
    flex: 1 1 18em;
  }


  }


  /* 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 Startseite also :not(.home)) */

  :not(.home) h1 {
    flex: 0 0 100%; /* Überschrift über dem Hauptbereich über die gesamte Breite */
  }

  :not(.home) article {
    flex: 2 2 30em;   /* Hauptartikel zur Seitenspalte im Verhältnis 2:1 */
    max-width: 40em;  /* Begrenzt die Zeilen auf eine gut lesbare Länge */
  }

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