.startbuehne {
  position: relative;
  margin-bottom: 80px;
}

@media (min-width: 992px) {
  .startbuehne {
    margin-bottom: 200px;
  }
}

/* ------------------------------------------------------------- sections */
.startbuehne-sections {
  position: relative;
  z-index: 2;
  clear: both;
}

.startbuehne-headline {
  line-height: 1.2;
}

@media (min-width: 520px) {
  .startbuehne-headline {
    margin-left: 50px;
  }
}

@media (min-width: 768px) {
  .startbuehne-headline {
    margin-left: 105px;
  }
}

@media (min-width: 1200px) {
  .startbuehne-headline {
    margin-left: 20px;
  }
}

.startbuehne-headline span {
  font-weight: 400;
  font-style: italic;
  font-size: 24px;
}

.startbuehne-headline h3 {
  font-weight: 600;
  font-size: 24px;
}

.startbuehne-content:after {
  content: "";
  display: table;
  clear: both;
}

.authorAndBook {
  position: relative;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: end;
          align-items: flex-end;
  margin-bottom: 20px;
}

@media (min-width: 521px) {
  .authorAndBook {
    margin-bottom: 60px;
  }
}

@media (min-width: 961px) {
  .authorAndBook {
    margin-bottom: 0;
  }
}

.authorAndBook .portrait {
  -webkit-box-flex: 0;
          flex: 0 1 280px;
  margin-left: -70px;
}

@media (min-width: 521px) {
  .authorAndBook .portrait {
    -webkit-box-flex: 0;
            flex: 0 0 280px;
    margin-left: 160px;
  }
}

@media (min-width: 768px) {
  .authorAndBook .portrait {
    margin-left: 240px;
  }
}

@media (min-width: 1200px) {
  .authorAndBook .portrait {
    margin-left: 180px;
  }
}

.authorAndBook .bookCover {
  -webkit-box-flex: 0;
          flex: 0 2 150px;
  margin-left: -50px;
}

.authorAndBook img {
  width: 100%;
}

.startbuehne .sliderArrows {
  height: 60px;
  width: 240px;
  position: absolute;
  top: 60px;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  z-index: 20;
}

@media (min-width: 521px) {
  .startbuehne .sliderArrows {
    display: none;
  }
}

.startbuehne .sliderArrows-prev, .startbuehne .sliderArrows-next {
  width: 70px;
  height: 100%;
  font-size: 54px;
  line-height: 54px;
  text-align: center;
  color: white;
}

.startbuehne .sliderArrows-prev {
  float: left;
  margin-left: -25px;
}

.startbuehne .sliderArrows-next {
  float: right;
  margin-right: -25px;
}

@media (min-width: 521px) {
  .startbuehne-content .text {
    padding-right: 50px;
    margin-left: 50px;
  }
}

@media (min-width: 768px) {
  .startbuehne-content .text {
    padding-left: 0;
    padding-right: 250px;
  }
}

@media (min-width: 961px) {
  .startbuehne-content .text {
    position: absolute;
    bottom: -20px;
    right: 0;
    padding-right: 0;
    width: calc(100% - 650px);
  }
}

@media (min-width: 1200px) {
  .startbuehne-content .text {
    width: calc(100% - 590px);
  }
}

.startbuehne-content .autorname {
  font-weight: 300;
  margin-bottom: 10px;
  font-size: 22px;
}

.startbuehne-content .quote {
  font-style: italic;
  margin-bottom: 20px;
}

.startbuehne-pixelpattern {
  position: absolute;
  left: 20px;
  top: -130px;
  overflow: hidden;
  width: 100%;
  z-index: -1;
}

/* ------------------------------------------------------------- switch toggles */
.startbuehne-navigation {
  position: absolute;
  height: 335px;
  width: 375px;
  right: 0;
  top: 60px;
  z-index: 5;
  -webkit-transform-origin: right top;
          transform-origin: right top;
  -webkit-transform: scale(0.5) translate(30px, 0);
          transform: scale(0.5) translate(30px, 0);
}

@media (min-width: 451px) {
  .startbuehne-navigation {
    top: -40px;
    -webkit-transform: scale(0.6);
            transform: scale(0.6);
  }
}

@media (min-width: 521px) {
  .startbuehne-navigation {
    width: 375px;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
    position: absolute;
    left: 3px;
    right: auto;
    top: 130px;
    -webkit-transform-origin: left top;
            transform-origin: left top;
    background: url("../../img/svg-source/background-hexagonswitches.svg") no-repeat 6px 0;
  }
}

@media (min-width: 768px) {
  .startbuehne-navigation {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
    left: 0;
    top: 100px;
  }
}

@media (min-width: 1200px) {
  .startbuehne-navigation {
    -webkit-transform: scale(1);
            transform: scale(1);
    left: -95px;
    top: 80px;
    position: absolute;
  }
}

.startbuehne-switches {
  position: absolute;
  width: 100%;
  top: 140px;
  height: 190px;
  display: none;
}

@media (min-width: 521px) {
  .startbuehne-switches {
    display: block;
  }
}

.startbuehne-switches .switch {
  cursor: pointer;
  position: absolute;
  margin-right: 0;
}

.startbuehne-switches .outline {
  z-index: 12;
  fill: none;
  stroke-miterlimit: 10;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.startbuehne-activeswitch {
  display: block;
  position: absolute;
  top: 40px;
  left: 145px;
  z-index: 3;
}

.startbuehne-activeswitch [class^=hexicon-] {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  -webkit-transform: scale(0);
          transform: scale(0);
}

/* ------------------------------------------------------------- switches neutral position for desktop */
.startbuehne-switches .switch.jura {
  top: 10px;
  left: 10px;
}

.startbuehne-switches .switch.psychologie {
  top: 10px;
  left: 100px;
}

.startbuehne-switches .switch.pflege {
  top: 10px;
  left: 190px;
}

.startbuehne-switches .switch.naturwissenschaft {
  top: 10px;
  left: 280px;
}

.startbuehne-switches .switch.kultur {
  top: 88px;
  left: 235px;
}

.startbuehne-switches .switch.medizin {
  top: 88px;
  left: 145px;
}

.startbuehne-switches .switch.maudrich {
  top: 88px;
  left: 54px;
}

.startbuehne-switches .switch.lehre {
  top: 166px;
  left: 100px;
}

/* ------------------------------------------------------------- states active hexagons */
.startbuehne-switches .is-active [class^=hexicon-] {
  visibility: hidden;
}

.startbuehne-switches .is-active {
  pointer-events: none;
  cursor: default;
}

.startbuehne-switches .switch:not(.is-active):hover .outline {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
  -webkit-transition: -webkit-transform 0.2s;
  transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
  transition: transform 0.2s, -webkit-transform 0.2s;
}

.startbuehne-activeswitch .is-active {
  opacity: 1;
  -webkit-transform: scale(1.6);
          transform: scale(1.6);
  -webkit-transition: all 0.6s cubic-bezier(1, 1, 0.19, 1.2);
  transition: all 0.6s cubic-bezier(1, 1, 0.19, 1.2);
}

.startbuehne-sections h3 {
  -webkit-transform: translate(40px, 0);
          transform: translate(40px, 0);
}

.startbuehne-sections .is-active h3 {
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
  -webkit-transition: all 0.8s;
  transition: all 0.8s;
}

.startbuehne-sections .portrait {
  -webkit-transform: translate(-40px, 0);
          transform: translate(-40px, 0);
}

.startbuehne-sections .is-active .portrait {
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
  -webkit-transition: all 0.6s;
  transition: all 0.6s;
}

.startbuehne-sections .bookCover {
  -webkit-transform: translate(0, 60px);
          transform: translate(0, 60px);
}

.startbuehne-sections .is-active .bookCover {
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
  -webkit-transition: all 0.6s ease-out;
  transition: all 0.6s ease-out;
}

/* ------------------------------------------------------------- colors */
.startbuehne[data-active='psychologie'] .startbuehne-pixelpattern {
  -webkit-filter: hue-rotate(250deg);
          filter: hue-rotate(250deg);
}

.startbuehne[data-active='pflege'] .startbuehne-pixelpattern {
  -webkit-filter: hue-rotate(320deg);
          filter: hue-rotate(320deg);
}

.startbuehne[data-active='naturwissenschaft'] .startbuehne-pixelpattern {
  -webkit-filter: hue-rotate(250deg);
          filter: hue-rotate(250deg);
}

.startbuehne[data-active='maudrich'] .startbuehne-pixelpattern {
  -webkit-filter: hue-rotate(450deg);
          filter: hue-rotate(450deg);
}

.startbuehne[data-active='medizin'] .startbuehne-pixelpattern {
  -webkit-filter: hue-rotate(300deg);
          filter: hue-rotate(300deg);
}

.startbuehne[data-active='kultur'] .startbuehne-pixelpattern {
  -webkit-filter: hue-rotate(520deg);
          filter: hue-rotate(520deg);
}

.startbuehne[data-active='lehre'] .startbuehne-pixelpattern {
  -webkit-filter: hue-rotate(520deg);
          filter: hue-rotate(520deg);
}

.switch.jura .outline {
  stroke: rgb(0,58,120);
}

.switch.psychologie .outline {
  stroke: #b9d33e;
}

.switch.pflege .outline {
  stroke: #02cac3;
}

.switch.naturwissenschaft .outline {
  stroke: #1b9d30;
}

.switch.maudrich .outline {
  stroke: #a672af;
}

.switch.medizin .outline {
  stroke: #00a79b;
}

.switch.kultur .outline {
  stroke: #f8aa00;
}

.switch.lehre .outline {
  stroke: #d20a10;
}

section.jura h3 {
  color: rgb(0,58,120);
}

section.psychologie h3 {
  color: #b9d33e;
}

section.pflege h3 {
  color: #02cac3;
}

section.naturwissenschaft h3 {
  color: #1b9d30;
}

section.maudrich h3 {
  color: #a672af;
}

section.medizin h3 {
  color: #00a79b;
}

section.kultur h3 {
  color: #f8aa00;
}

section.lehre h3 {
  color: #d20a10;
}

.startbuehne-navigation[data-active='jura'] .sliderArrows-prev,
.startbuehne-navigation[data-active='jura'] .sliderArrows-next {
  background-color: rgb(0,58,120);
}

.startbuehne-navigation[data-active='psychologie'] .sliderArrows-prev,
.startbuehne-navigation[data-active='psychologie'] .sliderArrows-next {
  background-color: #b9d33e;
}

.startbuehne-navigation[data-active='pflege'] .sliderArrows-prev,
.startbuehne-navigation[data-active='pflege'] .sliderArrows-next {
  background-color: #02cac3;
}

.startbuehne-navigation[data-active='naturwissenschaft'] .sliderArrows-prev,
.startbuehne-navigation[data-active='naturwissenschaft'] .sliderArrows-next {
  background-color: #1b9d30;
}

.startbuehne-navigation[data-active='maudrich'] .sliderArrows-prev,
.startbuehne-navigation[data-active='maudrich'] .sliderArrows-next {
  background-color: #a672af;
}

.startbuehne-navigation[data-active='medizin'] .sliderArrows-prev,
.startbuehne-navigation[data-active='medizin'] .sliderArrows-next {
  background-color: #00a79b;
}

.startbuehne-navigation[data-active='kultur'] .sliderArrows-prev,
.startbuehne-navigation[data-active='kultur'] .sliderArrows-next {
  background-color: #f8aa00;
}

.startbuehne-navigation[data-active='lehre'] .sliderArrows-prev,
.startbuehne-navigation[data-active='lehre'] .sliderArrows-next {
  background-color: #d20a10;
}