// Darstellung Frage in Seitenliste und auf der FAQ-Seite

.dmos10_faq,
.list_dmos10_faq {
  display: block;

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

  li {
    list-style-type: disc;
  }
}

.question_container {
  position: relative;
  width: 4*$column_width + 3*$gutter;
  transition: width .3s;

  .kompass_new {
    @extend %new-flag;

    position: absolute;
    right: -10px;
    top: -10px;
    font-size: 1.3em;
    z-index: 3;
  }

  .active & {
    width: 5*$column_width + 4*$gutter;

    .richtext {
      display: none;
    }

    .richtext_full {
      display: block !important;
    }
  }

  max-width: 100%;
  margin-bottom: $gutter;

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

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

  .richtext,
  .richtext_full {
    font-style: italic;
  }
}

// Abweichungen Fragendarstellung in der Seitenliste der Themenseite

.list_dmos10_faq {
  @include clearfix;

  .bg_wrap {
    .answer_link {
      @extend %corner_button;

      right: 0;
      border-right: 0;
    }
  }
}

// Abweichungen Fragendarstellung auf der FAQ-Seite selbst

.faq .page_body_question {
  @extend .dmos10_faq;

  .co {
    @extend .question_container;
    width: 6*$column_width + 5*$gutter;
  }
}

// Darstellung der Antwort auf der FAQ-Seite

.page_body_answer,
.answer_container {
  position: relative;
  width: 6*$column_width + 5*$gutter;
  max-width: 100%;
  float: right;
  margin-bottom: $gutter;

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

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

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

    > .extra_link {
      float: right;
      padding-top: 2*$gutter;
    }
  }
}

.answer_container {
  .co.first {
    .img_container {
      float: none !important;
    }

    .co_head h2 {
      max-width: 70%;
    }
  }
}

.faq_close {
  @extend %corner_button;

  top: -2px;
  right: -2px;
  bottom: auto;
  border-bottom-width: 2px;
}

.tags {
  .co_body + & {
    padding-top: 20px;
  }

  .article_tags_prefix {
    font-weight: bold;

    &:after {
      content: ":";
    }
  }

  ul,
  li {
    display: inline-block;
  }

  li {
    &:after {
      content: ",";
    }

    &:last-child:after {
      content: "";
    }
    padding-right: 5px;
  }
}