/* GamesTalente – Akkordeon (FAQ, Mitwirken)
 *
 * Ersetzt seit 09/2026 das Plugin „Ultimate Blocks" (Content Toggle). Die
 * Seiten nutzen jetzt den WordPress-Kernblock „Details" (<details>/<summary>)
 * innerhalb einer Gruppe mit der Klasse .gt-akkordeon (Nachfahren-Selektoren,
 * weil WordPress die Gruppe je nach Markup-Version in einen
 * .wp-block-group__inner-container wickelt). Kein JavaScript nötig: Auf-/Zu-
 * klappen macht der Browser, Tastatur- und Screenreader-Bedienung inklusive.
 *
 * Optik = alter Content-Toggle PLUS das Customizer-CSS der Site, das damals
 * auf .wp-block-ub-content-toggle-accordion-title-wrap zielte: türkise
 * Titelzeile (--gta-highlight), 2-px-Rahmen und harter 4-px-Schatten in
 * --gta-dark, 8 px Radius, Inhalt mit 25 px Abstand oben. Die Variablen kommen
 * aus dem Customizer; die Fallbacks entsprechen den dort gesetzten Werten.
 */

.gt-akkordeon .wp-block-details {
    border: 1px solid #f1f1f1;
    border-radius: var(--gta-border-radius, 8px);
    margin: 0 0 10px;
    overflow: hidden;
    background: #fff;
}

.gt-akkordeon .wp-block-details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    background-color: var(--gta-highlight, rgb(0 253 255));
    border: 2px solid var(--gta-dark, #181919);
    box-shadow: 4px 4px 0 var(--gta-dark, #181919);
    color: #000;
    font-family: "Exo semi-bold", "Exo", sans-serif;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.gt-akkordeon .wp-block-details > summary::-webkit-details-marker { display: none; }
.gt-akkordeon .wp-block-details > summary:focus-visible {
    outline: 2px solid var(--gta-blue, #4582E5);
    outline-offset: 2px;
}

/* Chevron rechts – dreht sich beim Öffnen */
.gt-akkordeon .wp-block-details > summary::after {
    content: "";
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin: -4px 6px 0 0;
    transition: transform .2s ease;
}
.gt-akkordeon .wp-block-details[open] > summary::after {
    transform: rotate(-135deg);
    margin: 4px 6px 0 0;
}

/* Inhalt: 25 px oben (wie das alte Customizer-CSS), 4 % seitlich */
.gt-akkordeon .wp-block-details > :not(summary) {
    margin-left: 4%;
    margin-right: 4%;
}
.gt-akkordeon .wp-block-details > summary + * { margin-top: 25px; }
.gt-akkordeon .wp-block-details > :last-child:not(summary) { margin-bottom: 16px; }
.gt-akkordeon .wp-block-details ul,
.gt-akkordeon .wp-block-details ol { padding-left: 1.4em; }