/****** Akkordeon v1.4 2023-06**********************************/
/*
--akkordeon-titelbg: linear-gradient(160deg,#1577cf,#004482);
--akkordeon-TitelColor:#fff
--akkordeon-bg:#fff
--akkordeon-radius:0px
*/
.Akkordeon {box-shadow:2px 2px 10px rgba(0,0,0,0.3);border-radius:var(--akkordeon-radius,0);background-color:var(--akkordeon-bg,#fff);}    
/* Titelblock */
.Akkordeon>LABEL>DIV:first-child{
  box-sizing: border-box;
  display: block;
  padding: 0.9em 3em 0.9em 1em;
  background: var(--akkordeon-titelbg,linear-gradient(160deg,#1577cf,#004482));
  color:var(--akkordeon-TitelColor,#fff);
  line-height: 1.2;
  cursor: pointer;
  margin-bottom:1px;
  text-align:left;
  border-radius:var(--akkordeon-radius,0);
}
.Akkordeon>LABEL>DIV:first-child:hover{opacity:0.9;}
.Akkordeon>LABEL:last-child DIV:first-child{margin-bottom:0;} /*Kein Zwischenraum bei letztem Element*/


/* Aufklappbarer Textblock  */
.Akkordeon>LABEL>input + DIV,
.Akkordeon>LABEL>input + SPAN + DIV {     /*Mit optionalem Icon span*/
  padding:1em;
  cursor: pointer;
  box-sizing: border-box;  /*position: relative;*/
  overflow: hidden;
}
/* Aufklappbarer Textblock -> Zugeklappt  */
.Akkordeon>LABEL>input:not(:checked) + DIV, 
.Akkordeon>LABEL>input:not(:checked) + SPAN +  DIV {   /*Mit optionalem Icon span*/
  box-sizing: border-box;
  max-height: 0px;
  height: 0px;
  padding-top:0;
  padding-bottom:0;
  transition:padding-top 0.3s ease-out,padding-bottom 0.3s ease-out;
}
/* Aufklappbarer Textblock -> Aufgeklappt */
.Akkordeon>LABEL>input:checked + DIV, 
.Akkordeon>LABEL>input:checked + SPAN +  DIV {   /*Mit optionalem Icon span*/
  max-height: auto;
  padding-top:1em;
  padding-bottom:1em;
  transition:padding-top 0.3s ease-out,padding-bottom 0.3s ease-out;
}

/* Inputelement */
.Akkordeon>LABEL>input{display:none;}

.Akkordeon label{margin:0;position: relative;}
.Akkordeon label[for=nothing]{width:100%;}

/* X - ICON */
.Akkordeon>label{/*position: relative;*/display:block;}
.Akkordeon>LABEL>input+SPAN{display:inline;}
.Akkordeon>LABEL>input+SPAN:after {
  position: absolute;
  right: 0em;
  top: 0em;
  display: block;
  width: 3em;
  height: 3em;
  line-height: 3;
  text-align: center;
  color:#fff;
  cursor: pointer;
  transition: transform 0.5s;
  content: "\00271A";
}

.Akkordeon>LABEL>input[type=checkbox]:checked+SPAN:after,
.Akkordeon>LABEL>input[type=radio]:checked+SPAN:after {
  transform: rotate(315deg);
}