/*Text zum aufklappen

 <details class="klapptext">
  <summary>Info</summary>
     <p>Der aufklappende Text</p>
    </details> 

*/

details summary {
cursor: pointer; 
font-family: Roboto-bold, sans-serif; Arial, Verdana !important; 
font-size:15px; 
color:#000;
text-decoration: none; /* Unterstreichung wie ein Link */
list-style: none;
}
  
details summary::-webkit-details-marker {
display: none;
}

.klapptext {
 padding-top: 12px;
 padding-bottom: 15px;
 transition: all 0.3s ease;
}

.klapptext summary {
 font-family: Roboto-bold, sans-serif; Arial, Verdana !important; 
 font-size:15px; 
 color:#000;
 cursor: pointer;
 outline: none; /* Entfernt den blauen Rahmen beim Klicken */
 user-select: none; /* Verhindert das Markieren des Textes */
}

.klapptext summary::-webkit-details-marker {
 display: none;
}

.klapptext summary::after {
 position:relative;
 content: "+";
 //content: "▼";
 float: right;
 margin-top: -3px;
 margin-right: 15px;
 font-size: 21px; //0.8em;
 color:#000; //#c1c1c1;
 font-family: Roboto-light, sans-serif; Arial, Verdana !important;
 transition: transform 0.3s ease;
}

.klapptext[open] summary::after {
  transform: rotate(180deg);
}

.klapptext[open] p {
  animation: fadeIn 0.4s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}