.lightweight-accordion {
    margin-bottom: 0.4em;
}

summary.lightweight-accordion-title {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    color: #000000;
    background-color: #ffffff !important;
    border: 1px solid #000000;
    padding: 12px 16px;
    font-weight: normal;
    font-size: 1.1em;
    border-radius: 3px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    list-style: none;
}

summary.lightweight-accordion-title:hover {
    color: #c2e550;
    background-color: #ffffff;
    border-color: #9ec22a;
}

/* Pfeil nach rechts standardmäßig */
summary.lightweight-accordion-title::before {
    content: "▸";
    font-size: 1.2em;
    color: #9ec22a;
    transition: transform 0.3s ease;
    display: inline-block; /* sehr wichtig */
    margin-right: 8px;    /* optional Abstand zum Text */
}

/* Pfeil nach unten, wenn geöffnet */
.lightweight-accordion details[open] > summary.lightweight-accordion-title::before {
    transform: rotate(90deg);
    border-top: none;
}

.lightweight-accordion-body {
    padding: 20px 16px;
    border-top: none;
    margin-top: 8px;
}

.lightweight-accordion a {
    color: #9ec22a;
}

.lightweight-accordion a:hover {
    color: #c2e550;
}

/* Alle Überschriften im Accordion-Title auf die gewünschte Farbe anpassen */
summary.lightweight-accordion-title h1,
summary.lightweight-accordion-title h4,
summary.lightweight-accordion-title h5,
summary.lightweight-accordion-title h6 {
    display: inline;        /* wichtig für Pfeil-Darstellung */
    font-weight: normal;    /* optional: überschreibt Standard fett */
    font-size: inherit;     /* Schriftgröße vom Summary übernehmen */
    color: #000000;         /* gewünschte Farbe */
    margin: 0;              /* Standard-Margin der Überschrift entfernen */
}

summary.lightweight-accordion-title h2 {
    font-size: 30px !important; /* gewünschte Größe */
    line-height: 1.2; /* optional für besseren Abstand */
}

/* H3 im Accordion-Title */
summary.lightweight-accordion-title h3 {
    font-size: 20px !important;      /* gewünschte Größe */
    line-height: 1.2;     /* optional */
}

/* Hover-Effekt für alle Überschriften im Accordion-Title */
summary.lightweight-accordion-title h1,
summary.lightweight-accordion-title h2,
summary.lightweight-accordion-title h3,
summary.lightweight-accordion-title h4,
summary.lightweight-accordion-title h5,
summary.lightweight-accordion-title h6 {
    transition: color 0.3s ease; /* sanfte Farbänderung beim Hover */
}

/* Farbe ändern beim Hover über das Summary */
summary.lightweight-accordion-title:hover h1,
summary.lightweight-accordion-title:hover h2,
summary.lightweight-accordion-title:hover h3,
summary.lightweight-accordion-title:hover h4,
summary.lightweight-accordion-title:hover h5,
summary.lightweight-accordion-title:hover h6 {
    color: #9ec22a; /* gewünschte Hover-Farbe */
}