.c-accordion-item {
    width: 98%;
  	padding: 0;
}

.c-accordion-item p{
    width: 85%;
    padding-left: 0.6em;
  	padding-top: 0.6em;
}

.c-accordion-item p:last-child {
    /* border-bottom: none; */
  	border-bottom: 1px solid #375d95;
}

.c-accordion-title {
    text-align: left;
    display: block;
    position: relative;
    /* width: 100%; pk 4.11.2025 - 70% sieht eleganter aus! */
    width: 85%;
  	color: #fff;
    box-sizing: border-box;
    padding: .3em 10px .3em 10px;;
    font-size: 1.2em;
    font-weight: 400;
    transition: all .3s;
  	border-radius: 7px;
  	background: #265ba8;
}

.c-accordion-title .iconpack {
    margin-right: 10px;
    padding-right: 10px;
      /* 1rem; */
}

.c-accordion-title:hover {
    cursor: pointer;
  	background: #72a0e0;
}

.c-accordion-title::after,
.c-accordion-title::before {
    top: 1.1em;
    position: absolute;
    content: '';
    background: #fff;
    transition: all .3s
}

.c-accordion-title::before {
    height: 0.9em;
    width: 2px;
    right: 1.4em;
    margin-right: -1px;
    margin-top: -0.45em
}

.c-accordion-title::after {
    width: 0.9em;
    height: 2px;
    right: 1em;
    margin-top: -1px
}

.c-accordion-item.act .c-accordion-title::before {
    transition: all .3s ease;
    height: 0;
    margin-top: 0
}

.c-accordion-item.act .c-accordion-title {
  	background: #72a0e0;  
}
 /* pk 4.11.2025 - vielleicht doch verwirrend.
    Eventuell könnte man das zeitgesteuert einfärben.

.c-accordion-item.act .c-accordion-title:hover {
  	background: #265ba8;  
}
*/
.c-accordion-content {
    transition: all .3s ease;
    overflow: hidden;
    max-height: 0;
    visibility: hidden;
}

.c-accordion-item.act .c-accordion-content {
    max-height: var(--max-height);
    margin-bottom: 1em;
    visibility: visible;
}

.c-accordion-content div:first-child header {
    display: none
}