/**
 * Grundgestaltung der Pro-Blocktypen (B6: Akkordeon).
 *
 * Liegt im Pro-Bundle und nicht im Free-Stylesheet: der Typ existiert ohne
 * Lizenz gar nicht, also gehören auch seine Regeln nicht ins Free-Plugin.
 *
 * Alles erbend gehalten (`currentColor`), damit das Akkordeon auf hellem wie
 * dunklem Grund lesbar bleibt — die Lehre aus B8-3, wo feste Weisstöne ein
 * Element unsichtbar machten. Die Werte aus dem Design-Editor kommen als
 * Inline-Style und gewinnen ohnehin.
 *
 * Dieselbe Datei wird im Frontend UND auf dem Editor-Canvas geladen: Editor
 * und Frontend sollen dasselbe zeigen.
 */

.f12-accordion {
  display: block;
  overflow: hidden;
}

.f12-accordion__item + .f12-accordion__item {
  border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}

.f12-accordion__title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

/* Standard-Dreieck weg — wir zeichnen ein eigenes, das sich mitdreht. */
.f12-accordion__title::-webkit-details-marker {
  display: none;
}

.f12-accordion__title::after {
  content: '';
  margin-left: auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s ease;
}

.f12-accordion__item[open] > .f12-accordion__title::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

/* Tastaturbedienung sichtbar machen: <summary> ist fokussierbar. */
.f12-accordion__title:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}

.f12-accordion__content {
  padding: 0 14px 14px;
}

.f12-accordion__content > :first-child { margin-top: 0; }
.f12-accordion__content > :last-child { margin-bottom: 0; }

/* Nur im Editor sichtbar: ein Akkordeon ohne Abschnitte. */
.f12-accordion--empty {
  padding: 12px 14px;
  opacity: 0.6;
  font-style: italic;
}

@media (prefers-reduced-motion: reduce) {
  .f12-accordion__title::after {
    transition: none;
  }
}