/* Stylesheet für Selfhtml Design 01
  responsives Layout mit Flexbox ab Z. 247 */

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

/* alternatives Boxmodell */

*, ::before, ::after {
    box-sizing: border-box;
  }
  
  body {
    max-width: 65em;
    margin: 0 auto;
    padding: 0;
    font: normal 1em Arial, sans-serif;
    color: darkblue; /* wird als currentColor für die Akzentfarbe verwendet. */
    background-color: #ffffff;
  
  }
  
  p, ol, ul, dl {color: #333;}
    /* ====================================================  MW  ==================================================== */


  dd       { font-style: italic;
            font-weight: bold;
          color: red;
        font-size: 1.2em;}

 
  
  
  .fixiert {
    position:fixed;
    
    top:0px;
    max-width:65em;
    /*height:80px;*/
    z-index:999;
    
  }
  .fixiert2 {
    padding-top: 15px;
    position:fixed;
    
    top:0px;
    width:65em;
    height:340px;
    z-index:999;
    background-color: #e7e8ee;
  }
  .abstand {
    padding-top: 90px;
    
    z-index:980;
    
  }
  .abstand2 {
    padding-top: 1em;
    
    z-index:990;
    
  }
  

.abstand3 {
  padding-top: 0.2em;
  
  z-index:990;
  
}


  /* ====================================================  HEADER  ==================================================== */
  
  header {
    margin: 0;
    
    background-color: #e7e8ee;

    box-shadow: 0 .4em 0.4em 0 rgba(0, 0, 0, .50); /*MW*/
  }


  header p {
    
    font-variant: small-caps;
    font-size: 2em;
    
    background-color: #e7e8ee;
  }
  
  header span {
    font-weight: bold;
  }
  
  .akzentfarbe1 {
    color:orange;
  }
  
  .akzentfarbe2 {
    color: darkred;
  }


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

  h1, h2 {
    color: currentColor;
  }
  
  h3 {
    color: #999;
  }
  
  a {
    color: currentColor;
    /*font-weight: bold;*/
  }
  b {
    color: currentColor;
    font-size: 1.2em;
    font-weight: bold;
  }


  a:hover, a:focus {
    color: #888;
  }
  
  a:focus,
  a:hover {
    /*background-color:gold;*/
    background-color:rgb(0, 183, 255);
    color: white;
    font-style: normal;
  }
  
  a.more {
    float: right;
  }
  a.more::before {
    content: url('../img/more.svg');
    margin-right: .5em;
  }
  a.more:hover, a.more:focus {
    color: black;
  }
  a.more:hover::before, a.more:focus::before {
    color: white;
  }
  
  h2.img {
    padding-left: 2.5em;
  }
  .img.about {
    background: url('../images/about.svg') left no-repeat;
    background-size: 2.5em;
  }
  .img.cash {
    background: url('../img/cash.svg') left no-repeat;
    background-size: 1.25em;
  }
  .img.group {
    background: url('../images/about.svg') left no-repeat;
    background-size: 2.5em;
  }
  
  img, a img {
    border: 0 none;
  }
  
  article > h2 {
    clear: both;
  }
  article > h2 + p > img {
      width: 33%;
    float: left;
    margin: .15em 1.5em 1.5em 0;
  }
  article > h2:nth-of-type(odd) + p > img {
    float: right;
    margin: .15em 0 1.5em 1.5em;
  }
  
  dl {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 1em 2em;
    margin-bottom: 3em;
  }
  dl > * {
    margin: 0;
    padding: 0;
  }
  dt {
    font-weight: bold;
  }
  dt::after {
    content: ":";
  }
  
  .news {
    padding-top: 8px;
    /*background: no-repeat top .5em right .5em #eee;
    padding: 0 1em 1em;*/

    line-height: 15px; /*MW*/

    vertical-align: middle;
    font-style: italic;
    font-weight: bold;
    color: red;
  }
  


  .news h3 {
    /*color: #666;*/
    color: darkblue;
    box-shadow: 0 .4em 0.4em 0 rgba(0, 0, 0, .50); /*MW*/
    padding: 0;
    vertical-align: middle;
  }
  
  .news.consultation {
    background-image: url('../img/phone.svg');
  }
  .news.info {
    background-image: url('../img/letter.svg');
  }
  
  aside ul,
  .news ul {
    margin: 2em 0;
    padding: 0;
    color: orange;
    list-style-position: inside;
  }
  aside li,
  .news li {
    font-weight: bold;
    padding: .5em 0;
  }
  .news li span {
    color: #474747;
  }
  aside ul {
    color: #333;
  }
  
 

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

 

  nav ul {
    /*box-shadow: 0 .6em .3em 0 rgba(0, 0, 0, .75);*/
    text-align: center;
    margin: 0;
    padding: 0;
    list-style-type: none;
    position: relative;
  top: 0;
  }
  
  nav a {
    background-color: darkblue;
    color: white;
    text-decoration: none;
    display: inline-block;
    width: 95%;
    margin: .5em 0;
    padding: 0.5em 1em;
    border-radius: .5em;
  }
  
  nav a[aria-current="page"]{
   /*color: orange;*/
   background-color: #e7e8ee;
   color: black;
   font-weight: bold;
  }
  
  nav a[aria-current="pic"]{
    /*color: orange;*/
    background-color: transparent;
    display: inline-block;
    width: 95%;
    margin: .5em 0;
    padding: 0 0;
    
  }

  nav a:hover,
  nav a:focus {
    background-color: rgb(0, 183, 255);
    color: white;
  }
  
  nav a[aria-current="page"]:hover {
    background-color: transparent;
    color: black;
  }

  nav a[aria-current="pic"]:hover {
    background-color: transparent;
    
  }

  nav a:hover::after ,
  nav a:focus::after{
    color: transparent;
  }
    /* ====================================================  MW  ==================================================== */
  nav c {
    background-color: darkblue;
    color: white;
    text-decoration: none;
    display: inline-block;
    width: 95%;
    margin: .5em 0;
    padding: 0.5em 2.5em;
    border-radius: .5em;
  }
  nav c[aria-current="page"]{
    color: orange;
   
    font-weight: bold;
   }
   
  
nav c:hover,
nav c:focus {
  background-color: rgb(0, 183, 255);
  color: white;
}

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

  /* ====================================================  FOOTER  ==================================================== */
  
  footer {
    font-size: 0.8em;
    /*margin: 2em 0;*/
    display: flex;
    color: #989898;
  }
  
  footer ul,
  footer p {
    flex: 1 1 100%;
  }
  
  footer ul {
    padding-left: 0;
    margin-left: 0;
  }
  
  footer li  {
    list-style-type: none;
    display: inline-block;
    border-left: .2em solid #989898;
  }
  footer li:first-child  {
    border-left-color: transparent;
  }
  footer a {
    color: #999;
  }
  footer a:hover, footer a:focus {
    color: #333;
  }
  footer li a {
    padding: 0 .5em 0 .7em;
  }
  footer p {
    margin-top: 0;
    padding-top: 0;
    text-align: right;
  }
  
  
  /* ====================================================  LAYOUT  ==================================================== */
  
  /* Mobile first ! alle Blöcke haben 100%, Navigation unten*/
  main  {
    padding: 1em 0;
    margin: 2em 0;
  }
  
  /* Navigationselemente werden untereinander angezeigt */
  nav ul {
    display: flex;
    flex-direction: column;
  }
  
  /* 2-Spaltenlayout mit breiterem aside */
  @media screen and (min-width: 25em) {
    header {
  /*  height: 17em; */
    }
    


  
  


  /* 2-Spaltenlayout mit breiterem aside */
  @media screen and (min-width: 45em) {
    header {
      background: #e7e8ee url('../img/header.png') no-repeat right bottom ;
      background-size: contain;
    }
  
    /* Navigation wird nebeneinander ausgerichtet. */
    nav ul {
      flex-direction: row;
      /*background-color: darkred;*/
    }
  
    nav li {
      margin: 0;
      flex: 1 1 0%;
    }
  
    /* Main wird zum Flex-Container */
    main {
      display: flex;
      flex-flow: row wrap;
    }
  
    main > * {
      flex: 1 100%;  /* Alle Kindelemente werden über die volle Breite dargestellt */
    }
  
    section {
      flex: 1 48%;  /* Diese Elemente erhalten eine halbe Breite */
      margin: 1%;
    }
  }
  
  /* 2-Spaltenlayout mit breiterem aside */
  @media screen and (min-width: 58em) {
    section, aside {
      flex: 1 31%;  /* Diese Elemente erhalten eine Breite von 1/3.  */
      margin: 1%;
    }
  
    article {
      flex: 0 0 100%;
      margin: 1%;
    }
  
  /*   article p, */
    article li,
    article blockquote {
      max-width: 40em;
    }
  
    #about {
      flex: 1 30%;
      margin: 1%;	  
      background-color: #eee;
      border: 1px solid darkred;
      padding: 1em;
      height: 22em;
    }
    
    #impressum {
      flex: 1 60%;
      margin: 1%;
  }
  
    aside p {
      margin-bottom: 3em;
    }
    aside p:last-child {
      margin-bottom: 1.2em;
    }
  }
  /*Kopiert aus Forum ab hier*/
/*
  .as-nav-background {
    background-color: #fff;
    width: 80%;
    position: fixed;
    z-index: 999;
    /*box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.12);*/
}
/*

input#responsive-nav,
label.responsive-nav-label {
        display: none;
}

label.responsive-nav-label {
        position: relative;
        display: block;
        cursor: pointer;
}

nav {
        position: absolute;
        top: -9999px;
}

input#responsive-nav[type=checkbox]:checked ~ nav {
    position: relative;
    top: 0;
  }
*/
 /*Kopiert aus Forum bis hier*/