:root
{ --hue-color: 225;
  --first-color: hsl(var(--hue-color), 48%, 35%);
  --title-color: hsl(var(--hue-color), 48%, 22%);
  --text-color: hsl(var(--hue-color), 12%, 35%);
  --body-color: hsl(var(--hue-color), 49%, 98%);
  --container-color: #FFF;
}

#akkordeon
{ display: grid;
  align-content: right;
  height: auto;
  row-gap: 1rem;
  width: 468px;      /* fkh! */
  margin-top:-85px;
  margin-bottom:5px;
  margin-left:0px;
  margin-right:0px;
}

.accTitle
{ font-size: 1.1rem;
  color: var(--title-color);
  font-weight: 400;
  margin: 10px 0px 10px 20px;
}

.accHeader
{ display: flex;
  column-gap: .5rem;
  padding: 0px 0px 0px 0px;
  cursor: pointer;
}

.accInfo
{ padding: 0 0rem 0rem 0rem;
  font-size: .9rem;
}

.accArrow {
  position:absolute; 
  right:10px; 
  top:20px;
  height: 8px;
  width: 16px;
}

.accArrowDown {
  background: url(../../images/arrowDown.png) center center no-repeat;
}

.accArrowUp {
  background: url(../../images/arrowUp.png) center center no-repeat;
}

.accIcon {
  height: 32px;
  width : 32px;
  margin-top:5px;
  margin-left:8px;
  transition: .5s;
}

.accIconActive
  {   background: url(../../images/heart1.png) center center no-repeat;
  }

.accIconInactive
  {   background: url(../../images/heart0.png) center center no-repeat;
  }

.accOpen .accIcon 
  {   transform: rotate(360deg);  
  }

.accItem
{ margin: auto;
  padding-top:4px;
  box-shadow: 0 2px 6px rgba(38, 38, 38, 0.2);
  border-radius: 0.7rem;
  position: relative;
  transition: all 1.25s ease;
  width: 468px;
}

.accItem::after
{ content: '';
  background-color: var(--first-color);
  width: 100%;
  height: 6px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 0.7rem 0.7rem 0 0;
  padding-bottom:-4px;
}

/* old
.accItem:nth-child(1)        { background-color: #FFCCD2; } 
.accItem:nth-child(2)        { background-color: #E7D4F9; }
.accItem:nth-child(3)        { background-color: #D8F2FF; }
.accItem:nth-child(4)        { background-color: #DBFFD8; }
.accItem:nth-child(5)        { background-color: #FFE8D8; }

.accItem:nth-child(1)::after { background-color: #C40D1E; }
.accItem:nth-child(2)::after { background-color: #9013FE; }
.accItem:nth-child(3)::after { background-color: #1F90CC; }
.accItem:nth-child(4)::after { background-color: #49CB40; }
.accItem:nth-child(5)::after { background-color: #FF6C00; }
*/

/* new background all white*/
.accItem:nth-child(1)        { background-color: #FFFFFF; } 
.accItem:nth-child(2)        { background-color: #FFFFFF; }
.accItem:nth-child(3)        { background-color: #FFFFFF; }
.accItem:nth-child(4)        { background-color: #FFFFFF; }
.accItem:nth-child(5)        { background-color: #FFFFFF; }

.accItem:nth-child(1)::after { background-color: #416172; }
.accItem:nth-child(2)::after { background-color: #416172; }
.accItem:nth-child(3)::after { background-color: #4983A2; }
.accItem:nth-child(4)::after { background-color: #51A9D8; }
.accItem:nth-child(5)::after { background-color: #81C7EC; }

/*#416172', '#4983A2', '#51A9D8', '#81C7EC*/

.accInhalt
{ overflow: hidden;
  height: 0;
  margin:auto 20px;
  transition: all .45s ease;
}

@media screen and (min-width: 576px)
{ .accHeader { padding: 0rem; }
  .accInfo { padding: 0m 2rem 0 2rem; }
}

@media screen and (min-width: 968px)
  { .container
      { margin-left: auto;
        margin-right: auto;
      }
  }

.accOpen .accTitle
  { font-style: italic;
    font-weight: 600;
  }