#meta_navigation,
#foot_navigation {
  li {
    display: inline-block;
  }

  .separator {
    padding: 0 5px;
  }

  a {
    text-decoration: none;
    line-height: 30px;

    &:hover,
    &:focus,
    &:active {
      border-bottom: 1px solid $text;
    }

    img {
      margin-right: 8px;
      position: relative;
      top: -5px;
    }
  }
}

#meta_navigation {
  position: absolute;
  top: 45px;
  right: 4*$column_width + 6*$gutter;

  li {
    vertical-align: middle;
  }

  a {
    line-height: 30px;
  }

  @media screen and (max-width: $break_wide) {
    right: 1*$column_width + 2*$gutter;
  }

  @media screen and (max-width: $break_medium) {
    display: none;
  }
}

.access_navigation {
  position: relative;

  a {
    &:hover,
    &:focus,
    &:active {
      border: 2px solid $color-accent-contrast;
      color: $color-accent-contrast;
      background: $bg_white;
      padding: 3px $gutter;
      display: inline-block;
      white-space: nowrap;
      text-decoration: none;

      position: absolute;
      top: $gutter;
      left: 9999em;
    }
  }
}

/* Hauptnavigation */

@mixin nav_activestate {
  border: 2px solid $color-main;
  background: $bright;
}

.page_head_nav .nested_pagelist {
  position: relative;
  border-bottom: 1px solid $color-text;

  @media screen and (max-width: $break_medium - 1) {
    position: fixed;

    top: 0;
    height: 0;
    width: 100%;
    left: 0;
    z-index: 10;

    opacity: 0;
    transition: opacity .3s;

    .nav_container {
      width: 0;
      overflow: scroll;
      float: right;
      height: 100vh;
      padding-top: 100px;
      background: $bright;

      transition: width .3s;

      border-left: 7px solid $color-main;
      border-image: linear-gradient(to bottom, $color-main, $color-accent) 5 repeat;

      ul {
        list-style-type: none;
      }

      .sublevel_description,
      .sub_close {
        display: none !important;
      }

      .metanav {
        margin-top: 25px;
        border-top: 2px solid $color-accent;
        padding-top: 15px;

        a {
          color: $color-main-contrast;
          text-decoration: none;
          padding: 5px $gutter;
          display: block;
        }
      }
    }

    .npl_level_1 {
      display: block;
      width: 293px;

      .nav_level1_anchor {
        display: block;
        @include background-gradient;
        margin-bottom: 2px;
        padding: 10px $gutter;
        text-transform: uppercase;
        text-decoration: none;
        position: relative;

        &:after {
          @include svgpseudoelem('sprites-icon_down');
        }

        &.active:after {
          @include svgpseudoelem('sprites-icon_up');
        }

        &:after {
          left: auto !important;
          right: $gutter;
          top: 6px;
          border: 2px solid $color-accent-contrast;
          box-shadow: 0 0 0 1px #fff;
        }
      }
    }

    .npl_level_2 {
      height: 0;
      overflow: hidden;
      transition: height .3s;

      &.active {
        height: auto;
      }

      a {
        color: $color-main-contrast;
        text-decoration: none;
        padding: 5px $gutter;
        display: block;
      }

      ul {
        padding: 5px 0;
      }
    }

    // Mobilnavigation
    &.active {
      height: auto;
      bottom: 0;
      background: rgba(0, 0, 0, .4);
      opacity: 1;

      .nav_container {
        width: 300px;
      }
    }
  }

  // Desktop-Navigation

  @media screen and (min-width: $break_medium) {
    .npl_level_1 {
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-around;

      > li {
        display: block;

        &.id-18779 { // Betreuungswesen
          .nav_level1_anchor {
            color: $color-accent-contrast;

            &:hover,
            &:focus,
            &:active {
              border-color: $color-accent;
            }
          }
        }
      }

      .nav_level1_anchor {
        display: block;
        padding: 5px $gutter;
        text-transform: uppercase;
        font-size: 1.5em;
        text-decoration: none;
        border: 2px solid transparent;
        color: $color-main-contrast;

        &:hover,
        &:focus,
        &:active {
          @include nav_activestate;
        }

        &.active {
          @include nav_activestate;
          border-bottom-color: $bright;
          z-index: 5;
          position: relative;
        }

        @media screen and (max-width: $break_wide - 1) {
          font-size: 1.3em;
        }
      }
    }

    .npl_level_2 {
      position: absolute;
      display: none;
      padding: $gutter;
      margin-top: -2px;
      @include nav_activestate;
      @include border-gradient;
      box-shadow: 0 2px 3px 1px rgba(0, 0, 0, .3);

      &.active,
      &:target {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-around;

        > * {
          margin: 0 $gutter/2;
        }
      }

      .sublevel_description {
        width: 3*$column_width + 2*$gutter;

        @media screen and (min-width: $break_wide) {
          width: 4*$column_width + 3*$gutter;
        }
      }

      ul {
        width: 2*$column_width + $gutter;
        border-left: 1px solid $color-text;
        padding: 5px 0;

        @media screen and (min-width: $break_wide) {
          width: 3*$column_width + 2*$gutter;
        }

        li {
          display: block;
          padding: 3px $gutter;

          a {
            display: inline-block;
            color: $color-accent-contrast;
            text-decoration: none;
            border-bottom: 1px solid transparent;
            padding: 3px 0 0;

            &:hover,
            &:focus,
            &:active {
              border-bottom-color: $color-accent-contrast;
            }
          }
        }
      }
    }

    // Position des Submenüs
    .npl_level_1 > li {

      &:nth-of-type(1),
      &:nth-of-type(2),
      &:nth-of-type(3) {
        .npl_level_2 {
          left: 0;
        }
      }

      @media screen and (min-width: $break_wide) {
        &:nth-of-type(3) {
          .npl_level_2 {
            left: $column-width + $gutter;
          }
        }
      }

      &:nth-of-type(4),
      &:nth-of-type(5),
      &:nth-of-type(6),
      &:nth-of-type(7) {
        .npl_level_2 {
          right: 0;
        }
      }
    }

    // Schließen-Button
    .sub_close {
      display: block;
      height: 2*$gutter;
      width: 2*$gutter;
      background: $color-accent-contrast;
      color: $text_white;
      position: absolute;
      right: $gutter;
      top: $gutter;
      text-align: center;
      font-size: 1.8em;
      line-height: 2*$gutter - 4px;
      text-decoration: none;
      border: 2px solid $color-accent-contrast;

      &:hover,
      &:focus,
      &:active {
        background: $bright;
        color: $color-accent-contrast;
      }
    }
  }
}

.lang_variant_switch {
  @extend %button;
  padding-left: 40px;
  position: relative;
  margin-bottom: 2*$gutter;

  @media screen and (min-width: $break_medium) {
    position: absolute;
    top: 16px;
    left: calc(100% - #{3*$column_width + 3*$gutter});
  }

  &:before {
    @include svgpseudoelem('sprites-leichte-sprache-white');
    left: 7px;
    top: 1px;
  }

  &:hover,
  &:focus,
  &:active {
    &:before {
      @include svgpseudoelem('sprites-leichte-sprache-purple');
      left: 7px;
      top: 1px;
    }
  }
}