*################
AKKORDEON / HANDORGEL & ELEMENTGRUPPE
#################*/

:root {
    --nav-breakpoint: 1024;
    --nav-color: #445566;
    --nav-active-color: #f5970e;
    --nav-item-line-height: 1.5;
    --nav-font-size: 1.21rem;
    --nav-font-weight: 500;
    --nav-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="%2300d2d2" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 34 34"><path d="m9 18 6-6-6-6"/></svg>');
      --nav-icon-home: "\f0fd";
    --nav-icon-background: transparent;
     /* --nav-icon-background: cyan; */
    --nav-mobile-background: #172b3b;
    --nav-mobile-color: #d3d6da;
    --nav-mobile-active-background: #172b3b;
    --nav-mobile-active-color: #f47c00;
    --nav-mobile-active-border-color: #f47c00;
    --nav-mobile-btn-clr: #f47c00;
    --nav-mobile-separator-color: hsla(0,0%,100%,.1);
    --nav-mobile-padding: 120px 20px 20px;
    --nav-mobile-font-size: 18px;
    --nav-mobile-backdrop-height: 80px;
    --nav-mobile-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="none" stroke="%23fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>');
    --nav-submenu-background: #fff;
    --nav-burger-line-color: #f57a00;
    --skip-background: #172b3b;
    --skip-color: #d3d6da;
    --skip-focus-border-color: #f47c00
}

body.navigation-open {
    overflow: hidden;
    /* overflow: visible; */
}

.block {
    overflow: visible;

}

.content-accordion  .handorgel__header {
    
    margin-bottom: 0rem;
    display: block;
  }

.handorgel__header__button {
    display: flex;
    width: 100%;
    position: relative;
    cursor: pointer;
    transition:color ease-in-out .2s;
    padding:1.5rem calc(2rem + 2rem + 1.5rem) 1.5rem 0rem;
    display: block;
    width: 100%;
    margin: 0;
    border: none;
    border-top: 0px solid #eee;
    background-color: #fff;
    border-radius: 0;
    /* text-align: left; */
    transition: background-color 0.2s ease;
    user-select: none;
}


.handorgel__header__button:after,
.handorgel__header__button:before {
    transition:opacity ease-in-out .2s;
    position:absolute;
    /* top:1.8rem; */
    right:1.5rem;
    z-index:5;
    width:2rem;
    height:2rem;
    background: var(--nav-icon) no-repeat center;
    background-size: 2.5rem ;
    transform: rotateX(180deg) rotate(-90deg);
    content:"";
}

.handorgel__header__button:before {
    opacity:1;
    content: "";
}

.handorgel__header__button:after {
    opacity:0;
   background: var(--nav-icon) no-repeat center;
    background-size: 2.5rem ;
    transform: rotateX(0deg) rotate(-90deg);
    content: "";
}

.handorgel__header--open .handorgel__header__button:before {
    opacity:0
}

.handorgel__header--open .handorgel__header__button:after {
    opacity:1;
}

.handorgel__content {
    background-color: #e8ebea;
}

  .content-accordion {
    border-bottom: 0px solid #eee;
}

.handorgel__header {
    display: block;
    margin: 0;
    width: calc(30% + 5rem);
}


.handorgel__header__button::-moz-focus-inner {
    border: 0;
}

.handorgel__content {
    display: none;
    overflow: hidden;
    height: 0;
    border-top: 0px solid #eee;
    background-color: #fff;
    transition: height 0.1s ease 0.1s;
}

.handorgel__content--open {
    display: block;
    transition: height 0.2s ease;
}

.handorgel__content--opened {
    overflow: visible;
}

.handorgel__content__inner {
    padding: 0;
    opacity: 0;
    transition: opacity 0.1s ease;
}

.handorgel__content--opened .handorgel__content__inner {
    opacity: 1;
    transition: opacity 0.3s ease;
}