/* 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 1em 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.20em;
    font-weight: bold;
    font-family: 'Arial';
    text-transform: uppercase;
   text-decoration: underline;
  }

  h3 {
    color: #595959;
    font-size: 1.20em;
    font-weight: bold;
    font-family: 'Arial';
    text-decoration: underline;
  }
  
  .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 */
  }