body {
    background-color: #e0e0e0;
    padding: 0;
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-image: url("../assets/8.jpg");
}   

/* implement parallax-effect for images
.parallax {
    height: 100vh;

    overflow-x: hidden;
    overflow-y: auto;
  
    perspective: 1px;
}

.parallax-layer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  
  .layer1 {
    transform: translateZ(0);
  }
  
  .layer2 {
    transform: translateZ(-1px);
  }
  
  .layer3 {
    transform: translateZ(-2px);
  }

  .parallax-layer.layer1 {
    width: 100%;
    height: 100px;
    top: 400px;
  
    background-color: red;
  }
  
  .parallax-layer.layer2 {
    top: 0px;
  
    width: 100%;
    height: 200px;
  
    background-color: green;
  }
  
  .parallax-layer.layer3 {
    top:0px;
  
    width: 100%;
    height: 300px;
  
    background-color: blue;
  }
*/

/*
#wrapper {
    
}
*/
/*
header {
    filter: blur(5px);
    
}
*/
nav {
    position: fixed;
    top: 0;
    z-index: 1000;
    background-color: #ffffff;
    box-shadow: 0px 4px 6px #a0a0a0;
    padding: 5px;
    width: 100%;
    text-align: center;
}


a {
    margin-left: 10px;
    margin-right: 10px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

a:link.navlink {
    color: #404040;
    text-decoration: none;
    font-size: medium;
}
a:visited.navlink {
    color: #404040;
    text-decoration: none;
    font-size: medium;
}
a:hover.navlink {
    color: #000000;
    text-decoration: none;
    font-size: medium;
    border-radius: 15px;
    background-color: #f0f0f0;
}
a:selected.navlink {
    color: #404040;
    text-decoration: none;
    font-size: medium;
}

a:link.footerlink {
    color: #a0a0a0;
    text-decoration: none;
    font-size: medium;
}
a:visited.footerlink {
    color: #a0a0a0;
    text-decoration: none;
    font-size: medium;
}
a:hover.footerlink {
    color: #ffffff;
    text-decoration: none;
    font-size: medium;
}
a:selected.footerlink {
    color: #a0a0a0;
    text-decoration: none;
    font-size: medium;
}

div {
    padding: 40px;
}

div#contact {
    margin-right: 20px;
}


#content {
    background-color: #f0f0f0;
    margin-top: 20px;
    margin-bottom: 20px;
}

footer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    background-color: #000000;
    opacity: 0.9;
    color: #ffffff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 10px;
    padding-bottom: 50;
}

img.icon{
    width: 40px;
    height: 40px;
    margin: 5px;
}

h1{
    color: #a0a0a0;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif ;
    text-align: center;
}


/* Referenzen: Tooltipeinblendung für den Text */

.ttip {
    position: relative;
    display: inline-block;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin-left: 20px;
    margin-right: 20px;
    padding: 20px;
    text-align: center;
    width: 300px;
}

.ttip .ttiptext {
    visibility: hidden;
    width: 300px;
    background-color: #000000;
    opacity: 0.8;
    color: #ffffff;
    text-align: justify;
    border-radius: 6px;
    padding: 10px;

    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 100;
}

.ttip:hover .ttiptext {
    visibility: visible;
}

.ttip:hover {
    color:#a0a0a0
}
.reference-container {
    display: flex;
    flex-direction:row;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-left: 60px;
    padding-right: 60px;
}


a:link.ttiplink {
    color: #9eae12;
    text-decoration: none;
    font-size: medium;
}
a:visited.ttiplink {
    color: #9eae12;
    text-decoration: none;
    font-size: medium;
}
a:hover.ttiplink {
    color: #ffffff;
    text-decoration: none;
    font-size: medium;
}
a:selected.ttiplink {
    color: #9eae12;
    text-decoration: none;
    font-size: medium;
}

a:link.link_greendark {
    color: #9eae12;
    text-decoration: none;
    font-size: medium;
}
a:visited.link_greendark {
    color: #9eae12;
    text-decoration: none;
    font-size: medium;
}
a:hover.link_greendark {
    color: #404040;
    text-decoration: none;
    font-size: medium;
}
a:selected.link_greendark {
    color: #9eae12;
    text-decoration: none;
    font-size: medium;
}


a:link.linkicon {
    text-decoration: none;
}
a:visited.linkicon {
    text-decoration: none;
}
a:hover.linkicon {
    text-decoration: none;
    opacity: 0.7;
}
a:selected.linkicon {
    text-decoration: none;
}

/* Dropdown Navigationsleiste*/
.dropdown {
    position: relative;
    display: inline-block;
    padding: 0;
    margin: 0;
  }
  
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f0f0f0;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    margin: 0;
    padding: 0;
    border-radius: 15px;
  }
  
  .dropdown-content a {
    color: black;
    text-decoration: none;
    font-size: small;
    display: block;
    margin: 3px;
    padding: 2px;
  }
  
  .dropdown-content a:hover {
  background-color: #ddd;
  border-radius: 15px;
  }
  
  .dropdown:hover .dropdown-content {display: block;}
  

  
/* Akkordeon-Funktion */
.acc { 
    width: 100%;
    padding:0;
    }
    .acc .choice {
    padding:0;
       display: grid;
       grid-template-columns: 1fr 1fr;
       grid-template-areas: "name action"
                            "panel panel";
    }
    
    .acc label:nth-child(odd) { grid-area: name;}
    .acc label:nth-child(even) { grid-area: action;}
    .acc .panel { grid-area: panel; }
    .acc input[name="ac"] { display:none }
    
    .acc .panel {
      margin: 0;
      height: 0;
      overflow:hidden;
      border-radius: 25px;
      background-color: #e0e0e0;
      box-sizing: border-box;
      transition: 0.5s;
    }
    /*
    .acc .panel div{
        display: flex;
        flex-direction:row;
        flex-wrap: wrap;
        justify-content: space-between;
        padding:0;
        margin:0;
    }
    */
    
    .acc input.open:checked~.panel {
      height: auto;
      padding: 2rem;
      transition: 0.5s;
      overflow:visible;
    }
    
    .acc label {
      cursor: pointer;
      padding: 1em;
      box-sizing: border-box;
      z-index: 100;
      }
    
    .acc label:nth-child(odd)::after  { 
       content: "zeige alle";
       color: #9eae12;
       float:right;
       font-size: 25px;
       font-weight: bold;
       margin-top:0;
    }
    .acc input.open:checked ~ label:nth-child(odd)::after { content: ""; }
    .acc input.open:checked ~ label.close::after { 
    content: "zeige weniger"; 
    font-size: 25px;
    color: #363666;
    font-weight:bold;
    margin-top:0;
    }