:root{

  --color-ci:       #009ecc;
  --color-dark:     #7a726f;
  --color-mid:      #f4f4f4;
  --color-light:    #ffffff;

  --maintrans: .3s all ease-in-out;
  --mainpadding: 2em;
}

*{
  scroll-behavior: smooth;
}


/*PopUp*/
.wp-popup{

  background-color: rgb(122, 114, 111, .5);

  .wp-popup-content{

    &::before{
      content: 'Neuigkeiten';
      background-color: var(--color-ci);
      display: block;
      padding: var(--mainpadding);
      color: var(--color-light);
      font-family: "NeuzeitSLTStd-BookHeavy";
    }

    max-width: 768px;
    padding: 0;

    .wp-popup-close{
      color: var(--color-light);
      padding: var(--mainpadding);
    }

    .wp-popup-inner{

      h2:first-of-type{
        margin-top: 0;
        hyphens: none;
      }

      padding: var(--mainpadding);

      .wp-block-separator{
        width: 100%;
        margin: 1em 0;
      }


      .wp-block-button__link{
        border-radius: 5px;
        background-color: var(--color-mid);
        color: var(--color-ci);
        transition: var(--maintrans);
        font-size: 1em;
        font-family: "NeuzeitSLTStd-BookHeavy";
        text-decoration: none;

        &:hover{
          background-color: var(--color-ci);
          color: var(--color-light);
          text-decoration: none;
        }
      }


    }
  }

}


/*Barrierefreiheit*/

figure.opener{
  width: 90%;
  margin: 140px auto 0 auto;
  
  img{
    aspect-ratio: 100 / 36;
    object-fit: cover;
    width: 100%;
    height: auto;
  }

  figcaption{
    font-size: .75em;
    opacity: .5;
    padding: .5em 1em;
    transition: var(--maintrans);
    position: absolute;
  }

  &:hover{
    figcaption{
      opacity: 1;
    }
  }
}

@media screen and (max-width: 1200px){
  figure.opener{
    margin-top: 1em;
    margin-bottom: 1em;

    figcaption{
      position: relative;
    }
  }
}

figure.prevbox{
  overflow: hidden;
  aspect-ratio: 16 / 8;
  position: relative;

  img{
    aspect-ratio: 16 / 8;
    object-fit: cover;
    transition: var(--maintrans);
    filter: grayscale(0.2);
  }
}

.news, .thema{
  &:hover{
    figure.prevbox{
      img{
        transform: scale(1.02);
        filter: grayscale(0);
      }
    }
  }
}

.modal{
  figure.header{
    position: relative;

    img{
      object-fit: cover;
      aspect-ratio: 16 / 6;
      object-position: center center;
      max-width: unset;
      width: 100%;
      height: auto;
    }

    .desc{
      position: absolute;
      right: 0;
      top: 0;
      font-size: .75em;
      padding: .5em 1em;
      mix-blend-mode: screen;
    }

    figcaption{
      position: absolute;
      left: 0;
      bottom: 0;
      background: var(--color-ci);
      padding: 2% 5%;

      h4{
        color: #ffffff;
        font-size: 1.3em;
        margin-bottom: 0;
      }
    }
  }
}


.sliderbox .metaslider .caption-wrap{
  position: absolute;
  left: 0;
  top: auto;
  transform: none;
  bottom: -2em;
  width: auto;
  font-size: .75em;
  padding: 0;
 /* mix-blend-mode: screen;*/
  background: transparent !important;
  color: var(--wp--preset--color--text);
}

.sliderbox .metaslider .caption-wrap .caption{
  padding: 0 1em;
  opacity: .5;
  transition: var(--maintrans);
}

.ms-image:hover .caption-wrap .caption{
  opacity: 1;
}

.sliderbox .metaslider .caption-wrap .caption::before{
  content: '© ';
}

@media screen and (max-width: 768px) {
  .sliderbox .metaslider .slides li .caption-wrap {
    display: block;
    bottom: 0;
    padding: .5em 0;
  }
}

.newsmodal .modal-dialog .modal-content .modal-header{
  background: none;
  padding: 0;
  height: auto;

  h4{
    position: relative;
  }
}

[id^="chapter"] {
  scroll-margin-top: 2em;
}

.dotnavimain{
  .h3{
    font-family: "NeuzeitSLTStd-BookHeavy";
    font-size: 1em;
    margin-bottom: 1em;
    display: block;
  }
}

.dotnaviwrap.vanilla .nav-tabs li a::before{
  margin-right: .5em;
}

@media screen and (max-width: 990px){
  .dotnaviwrap{
    display: none;
  }

  .spacer.newsspace{
    margin-top: 0;
  }
}

.navbar-default .navbar-toggle{
  z-index: 1000;
}

/*Gutenberg*/

.wp-block-button__link,
.wp-block-file__button{
    background-color: var(--wp--preset--color--text);
    border-radius: 5em;
    border-width: 0px;
    color: var(--wp--preset--color--base);
    text-align: left;
    font-family: var(--wp--preset--font-family--main);
    font-weight: normal;
    padding-top: .5em;
    padding-right: 2em;
    padding-bottom: .5em;
    padding-left: 2em;
    transition: var(--maintrans);
    text-decoration: none;

    &:hover{
      background-color: var(--wp--preset--color--accent);
      color: var(--wp--preset--color--base);
      text-decoration: none;
    }
}

@media screen and (max-width: 990px){
  .wp-block-spacer{
    height: 1em !important;
  }
}


/*FAQ Update*/

details{
  
    &:not(:first-of-type){
      margin-top: 1em;
    }


    padding-bottom: 1em;
    border-bottom: 2px solid var(--color-mid);

    &:last-of-type{
      border-bottom: 0;
    }
    summary{
        
        list-style: none;
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;

        strong{
          width: 90%;
        }
       

        &::marker{
            content: '';
        }

        h3{
            font-size: 1.8rem;
        }

        svg {
            transition: var(--maintrans);
            width: .75em;
            height: auto;

            path{
                fill: var(--color-ci);
            }
        }
    }

    p{
      margin-block-start: .5em !important;
    }


    &[open]{
        summary{
            svg{
                rotate: -180deg;
            }
        }
    }
}