.dmos10_smallfaq {
  position: absolute;
  left: 0;
  right: 0;

  &:not(.hidden) {
    position: relative;
  }

  .question,
  .answer {
    width: 3*$column_width + 2*$gutter;
    max-width: 90%;
    @include border-gradient;
    position: relative;
    margin-bottom: $gutter;

    .bg_wrap {
      @include background-gradient-bright;
      padding: $gutter;
      position: relative;
      z-index: 2;
    }
  }

  .question {
    float: left;

    &:before {
      @include svgpseudoelem('sprites-bubble_arrow_bottom_right');

      position: absolute;
      bottom: -10px;
      right: -32px;
      left: auto;
    }
  }

  .answer {
    clear: left;
    float: right;

    &:before {
      @include svgpseudoelem('sprites-bubble_arrow_top_left');

      position: absolute;
      top: -10px;
      left: -32px;
    }
  }

  .extra_link {
    clear: both;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;

    > a {
      margin-bottom: $gutter;
    }

    .browse_faq {
      text-transform: none;
      background: $bright;
      color: $color-accent-contrast;
      border-color: $color-accent;
      font-size: .9em;

      &:hover,
      &:focus,
      &:active {
        text-decoration: underline;
      }
    }
  }

  @media screen and (min-width: $break_medium) {
    .question,
    .answer,
    .extra_link {
      width: 4*$column_width + 3*$gutter;
    }

    .extra_link {
      float: right;
      justify-content: space-between;
    }
  }

  // Anzeige bei Blättern
  opacity: 0;

  &:nth-of-type(1),
  &:target,
  &:not(.hidden) {
    z-index: 2;
    opacity: 1;
  }

  &.hidden {
    opacity: 0;
    z-index: 1;
  }

  // solange wir keine Lösung haben, wie wir ohne Hintergrundfarben das erste Element überblenden können,
  // deaktivieren wir das Blättern ohne JavaScript

  html.nothasjs & .browse_faq {
    display: none;
  }
}