li {
  padding-left: 20px;
  position: relative;
}

li::before {
  content: '–';
  display: block;
  position: absolute;
  left: 0;
}

.fachgebiete {
  position: relative;
  min-height: 980px;
  height: 110vh;
  max-height: 1200px;
  overflow: hidden;
  background-color: #fbfbfb;
}

.fachgebiete > section {
  width: 95%;
  width: calc(100% - 120px);
}

.fachgebiete__navigation {
  position: relative;
  height: 100%;
  max-width: 1160px;
  padding: 120px 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}


.fachgebiete__navigation::before {
  content: '';
  display: block;
  width: 110px;
  -ms-flex-negative: 20;
      flex-shrink: 20;
}

.fachgebiete__navigation > * {
  z-index: 1;
  opacity: 0;
}

.fachgebiete__navigation > *,
.fachgebiete__navigation::after {
  -webkit-transform: translate3d(-15px,0,0);
          transform: translate3d(-15px,0,0);
  -webkit-transition: opacity .25s, -webkit-transform .25s;
  transition: opacity .25s, -webkit-transform .25s;
  -o-transition: opacity .25s, transform .25s;
  transition: opacity .25s, transform .25s;
  transition: opacity .25s, transform .25s, -webkit-transform .25s;
}

.nojs .fachgebiete__navigation > *,
.fachgebiete__navigation.target > * {
  opacity: 1;
}

.nojs .fachgebiete__navigation > *,
.fachgebiete__navigation.target > *,
.fachgebiete__navigation.target::after {
  -webkit-transform: translate3d(0,0,0);
          transform: translate3d(0,0,0);
}

.fachgebiete__detail > article {
  opacity: .2;
  -webkit-transition: opacity .25s;
  -o-transition: opacity .25s;
  transition: opacity .25s;
  max-width: 960px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

@supports not (flex-wrap: wrap) {
  .fachgebiete__detail > article {
    display: block;
  }

  .fachgebiete__detail > article > * {
    display: inline-block;
    vertical-align: top;
  }
}

.fachgebiete__detail.hover > article,
.nojs.notouch .fachgebiete__detail:hover > article {
  opacity: 0.7;
}

.fachgebiete__detail:target > article,
.notouch .fachgebiete__detail:target:hover > article,
.fachgebiete__detail.target > article {
  opacity: 1;
}

/*.fachgebiete__navigation::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  
  height: 100%;
  min-width: 540px;
  width: 100%;
  max-width: 1000px;
  
  background-image: url(https://gruetze.at/img/kosch/scales.jpg);
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: left bottom;

  opacity: .1;
  z-index: 0;
  pointer-events:none;
}*/

.fachgebiete__navigation .bg {
  position: absolute;
  bottom: 0;
  left: 0;
  
  height: 100%;
  min-width: 540px;
  width: 100%;
  max-width: 1000px;
  
  opacity: .1;
  z-index: 0;
  pointer-events:none;
}

.fachgebiete__navigation .bg img {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.fachgebiete .selflink,
.fachgebiete__detail:target ~ .selflink, 
.fachgebiete__detail.target ~ .selflink {
  position: absolute;
  display: block;
  top: 0; bottom: 0; left: 0; right: 0;
  opacity: 1;
  visibility: visible;
  -webkit-transition: visibility 0s linear 0s, opacity .5s;
  -o-transition: visibility 0s linear 0s, opacity .5s;
  transition: visibility 0s linear 0s, opacity .5s;
  color: transparent;
  z-index:2;
}

.fachgebiete section:target .selflink,
.fachgebiete section.target .selflink,
.fachgebiete > .selflink {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: visibility 0s linear .5s, opacity .5s;
  -o-transition: visibility 0s linear .5s, opacity .5s;
  transition: visibility 0s linear .5s, opacity .5s;
}

.fachgebiete > .selflink {
  pointer-events: none;
}

.resetlabel {
  display: block;
  position: absolute;
  right: 100%;
  top: 0;
  padding: 0 80px;
  -webkit-transform-origin: right top;
      -ms-transform-origin: right top;
          transform-origin: right top;
  font-size: 19px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  color: #909192;
  -webkit-transform: translateX(38px) rotate(-90deg);
      -ms-transform: translateX(38px) rotate(-90deg);
          transform: translateX(38px) rotate(-90deg);
}

.fachgebiete__beschreibung {
  -webkit-box-flex: 2;
      -ms-flex-positive: 2;
          flex-grow: 2;
  max-width: 510px;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
}

.fachgebiete__beschreibung h1 {
  font-size: 45px;
  font-weight: 100;
  margin-bottom: .9em;
  max-width: 410px;
  color: rgb(76,122,114);
  line-height: 1.25;
}

.fachgebiete__beschreibung p {
  color: #544D51;
  font-size: 19px;
  font-weight: 100;
}

.fachgebiete__liste {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  text-transform: uppercase;
  max-width: 300px;
  margin-left: 60px;
  margin-top: auto;
  margin-bottom: auto;
  height: 100%;
  max-height: 900px;
}

.fachgebiete__liste li {
  padding:0;
}

.fachgebiete__liste li::before {
  border-style: solid;
  border-width: 1px 1px 0 0;
  content: '';
  position: absolute;
  height: 7px;
  width: 7px;
  left: 0;
  top: 7px;
  -webkit-transform: translateX(-15px) rotate(45deg);
      -ms-transform: translateX(-15px) rotate(45deg);
          transform: translateX(-15px) rotate(45deg);
  opacity: 0;
  -webkit-transition: opacity .3s, -webkit-transform .5s;
  transition: opacity .3s, -webkit-transform .5s;
  -o-transition: transform .5s, opacity .3s;
  transition: transform .5s, opacity .3s;
  transition: transform .5s, opacity .3s, -webkit-transform .5s;
}

.notouch .fachgebiete__liste li:hover::before {
  opacity: 1;
  -webkit-transform: translateX(0) rotate(45deg);
      -ms-transform: translateX(0) rotate(45deg);
          transform: translateX(0) rotate(45deg);
}

.fachgebiete__liste li a {
  text-decoration: none;
  color: #544D51;
  font-weight: 300;
  display: inline-block;
  -webkit-transition: color .5s, -webkit-transform .5s;
  transition: color .5s, -webkit-transform .5s;
  -o-transition: color .5s, transform .5s;
  transition: color .5s, transform .5s;
  transition: color .5s, transform .5s, -webkit-transform .5s;
}

.notouch .fachgebiete__liste:hover li a {
  color: #ACABAB;
}

.notouch .fachgebiete__liste li:hover a {
  -webkit-transform: translateX(15px);
      -ms-transform: translateX(15px);
          transform: translateX(15px);
  color: #544D51;
}

.fachgebiete__detail {
  position: absolute;
  min-height: 100%;
  padding: 120px 160px 120px 40px;
  top: 0;
  left: 0;
  -webkit-transform: translateX(100vw);
      -ms-transform: translateX(100vw);
          transform: translateX(100vw);
  background: #F6F6F6;
  border-left: 1px solid #dedede;
  overflow: hidden;
  -webkit-transition: padding 0s linear .1s, -webkit-transform .25s;
  transition: padding 0s linear .1s, -webkit-transform .25s;
  -o-transition: transform .25s, padding 0s linear .1s;
  transition: transform .25s, padding 0s linear .1s;
  transition: transform .25s, padding 0s linear .1s, -webkit-transform .25s;
  z-index: 2;
}

.nojs .fachgebiete__detail {
  height: 100%;
  overflow:auto;
}

.notouch .fachgebiete__detail:hover {
  -webkit-transform: translateX(calc(100% - 15px));
      -ms-transform: translateX(calc(100% - 15px));
          transform: translateX(calc(100% - 15px));
}

.fachgebiete .fachgebiete__detail:nth-child(2),
.fachgebiete__detail.prevTarget {
  z-index: 3;
}

.fachgebiete__detail:target,
.fachgebiete__detail.target,
.fachgebiete__detail.target.hover,
.notouch .fachgebiete__detail.target:hover,
.notouch .fachgebiete__detail:target:hover {
  z-index: 4;
  -webkit-transform: translateX(120px);
      -ms-transform: translateX(120px);
          transform: translateX(120px);
  padding: 120px 100px;
}

.fachgebiete__navigation.hover ~ .fachgebiete__detail.target,
.fachgebiete__navigation.hover ~ .fachgebiete__detail:target,
.nojs.notouch .fachgebiete__navigation:hover ~ .fachgebiete__detail.target,
.nojs.notouch .fachgebiete__navigation:hover ~ .fachgebiete__detail:target{
  -webkit-transform: translateX(135px);
      -ms-transform: translateX(135px);
          transform: translateX(135px);
}

.fachgebiete__detail header {
  width: 100%;
}

.fachgebiete__detail header h1 {
  font-weight: 700;
  font-size: 30px;
  margin-bottom: .83em;
}

.fachgebiete__detail main {
  margin-right: 60px;
  max-width: 540px;
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}


.fachgebiete__detail main p,
.fachgebiete__detail main ul,
.fachgebiete__detail main ol {
  margin-bottom: 1em;
}

.fachgebiete__detail aside {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
  margin-bottom: 1em;
}

.fachgebiete__detail aside h1 {
  max-width: 220px;
  margin-bottom: 1em;
}

.fachgebiete__detail aside a {
  text-decoration: none;
  font-weight: 700;
  color: rgb(76,122,114);
}

.fachgebiete__detail aside li::before {
  border-style: solid;
  border-width: 1px 1px 0 0;
  content: '';
  position: absolute;
  height: 9px;
  width: 9px;
  left: 0;
  top: 47%;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transform-origin: right top;
      -ms-transform-origin: right top;
          transform-origin: right top;
}

.resetlabel.sticky {
  position:fixed;
}

.resetlabel.sticky-end {
  position:absolute;
  right: auto;
  left:0;
  top: auto;
  bottom: 0;
  -webkit-transform-origin: left bottom;
      -ms-transform-origin: left bottom;
          transform-origin: left bottom;
  -webkit-transform: translateX(38px) rotate(-90deg) translateY(100%);
      -ms-transform: translateX(38px) rotate(-90deg) translateY(100%);
          transform: translateX(38px) rotate(-90deg) translateY(100%);
}

@media all and (max-width: 1023px) {
  .fachgebiete {
    min-height: 0;
    height: auto;
    max-height: none;
  }
  
  .fachgebiete__navigation {
    display: block;
    padding: 40px;
  }
  
  .fachgebiete__navigation::before {
    display:none;
  }
  
  .fachgebiete__beschreibung h1 {
    margin-bottom: .66em;
  }
  
  .fachgebiete__beschreibung p {
    margin-bottom: 1.25em;
  }
  
  .fachgebiete__liste {
    display: block;
    margin: 0;
  }
  
  .fachgebiete__liste li {
    margin-bottom: .625em;
  }
  
  .fachgebiete__detail {
    padding: 40px !important;
  }
 
  .fachgebiete__detail aside h1 {
    max-width: none;
  }
}

@media all and (max-width:600px) {
  .fachgebiete > section {
    width: calc(100% - 50px);
  }
  
  .fachgebiete__detail:target,
  .fachgebiete__detail.target,
  .fachgebiete__detail.target.hover,
  .notouch .fachgebiete__detail.target:hover,
  .notouch .fachgebiete__detail:target:hover {
    -webkit-transform: translateX(50px);
        -ms-transform: translateX(50px);
            transform: translateX(50px);
  }
  
  .fachgebiete__navigation.hover ~ .fachgebiete__detail.target,
  .fachgebiete__navigation.hover ~ .fachgebiete__detail:target,
  .nojs.notouch .fachgebiete__navigation:hover ~ .fachgebiete__detail.target,
  .nojs.notouch .fachgebiete__navigation:hover ~ .fachgebiete__detail:target {
    -webkit-transform: translateX(65px);
        -ms-transform: translateX(65px);
            transform: translateX(65px);
  }
  
  .fachgebiete__detail main {
    margin-right: 0;
  }
  
  .resetlabel {
    -webkit-transform: translateX(5px) rotate(-90deg);
        -ms-transform: translateX(5px) rotate(-90deg);
            transform: translateX(5px) rotate(-90deg);
  }
  
  .resetlabel.sticky-end {
    -webkit-transform: translateX(5px) rotate(-90deg) translateY(100%);
        -ms-transform: translateX(5px) rotate(-90deg) translateY(100%);
            transform: translateX(5px) rotate(-90deg) translateY(100%);
  }
}

@media all and (max-width:480px) {
  
  .fachgebiete > section {
    width: calc(100% - 30px);
    padding: 20px !important;
  }
  
  .fachgebiete__beschreibung h1,
  .fachgebiete__detail header h1  {
    margin-top: 3rem;
    font-size: 4rem;
  }
  
  .fachgebiete__liste {
    margin-top: 5rem;
    margin-bottom: 5rem;
  }
  
  .fachgebiete__liste, .fachgebiete__detail {
    font-size: 12px;
  }
  
  .fachgebiete__detail:target,
  .fachgebiete__detail.target,
  .fachgebiete__detail.target.hover,
  .notouch .fachgebiete__detail.target:hover,
  .notouch .fachgebiete__detail:target:hover  {
    -webkit-transform: translateX(30px);
        -ms-transform: translateX(30px);
            transform: translateX(30px);
  }
  
  .fachgebiete__navigation.hover ~ .fachgebiete__detail.target,
  .fachgebiete__navigation.hover ~ .fachgebiete__detail:target,
  .nojs.notouch .fachgebiete__navigation:hover ~ .fachgebiete__detail.target,
  .nojs.notouch .fachgebiete__navigation:hover ~ .fachgebiete__detail:target {
    -webkit-transform: translateX(45px);
        -ms-transform: translateX(45px);
            transform: translateX(45px);
  }
  
  .resetlabel {
    padding: 0 20px;
    font-size: 16px;
    -webkit-transform: translateX(3px) rotate(-90deg);
        -ms-transform: translateX(3px) rotate(-90deg);
            transform: translateX(3px) rotate(-90deg);
  }
  
  .resetlabel.sticky-end {
    -webkit-transform: translateX(3px) rotate(-90deg) translateY(100%);
        -ms-transform: translateX(3px) rotate(-90deg) translateY(100%);
            transform: translateX(3px) rotate(-90deg) translateY(100%);
  }
}

.nojs .fachgebiete__navigation {
  opacity: 1 !important;
}

.nojs .fachgebiete .selflink {
  background: rgba(255,255,255,0.9);
}

.nojs .fachgebiete__detail {
  -webkit-transition: all 0s;
  -o-transition: all 0s;
  transition: all 0s;
}

.nojs .fachgebiete > .selflink {
  pointer-events: auto;
}

.nojs .fachgebiete__navigation > .selflink {
  display: none;
}

.nojs .fachgebiete__navigation > * {
  -webkit-transform: translate3d(0,0,0);
          transform: translate3d(0,0,0);
}