.accordion--classic {
  --accordion-gap: 0.5rem;
  --accordion-border: 1px solid var(--base);

  --accordion-radius: 0.5rem;
  --accordion-padding-inline: 1rem;
  --accordion-padding-block: 1rem;

  --accordion-bg: transparent;
  --accordion-bg-open: var(--primary-ultra-light);
}

.accordion--classic {
  position: relative;
}

.accordion--classic__bg-figure {
  position: absolute;
  display: flex;
  inset: 0;
  z-index: -1;
}

.accordion--classic__bg-img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/*section heading*/
.accordion--classic__heading {
  text-align: center;
}

/* Stack */
.accordion--classic__accordion-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--accordion-gap);
}

/* Item */
.accordion--classic__item {
  border-radius: var(--accordion-radius);
  background: var(--accordion-bg);
}

/* Summary */
.accordion--classic__frage {
  display: flex;
  justify-content: space-between;
  align-items: center;

  width: 100%;
  padding: var(--accordion-padding-block) var(--accordion-padding-inline);

  cursor: pointer;
  list-style: none;
  font-weight: 500;

  border: var(--accordion-border);
  border-radius: var(--accordion-radius);

  /*transition für aktives*/
}

/* Default marker entfernen */
.accordion--classic__frage::-webkit-details-marker {
  display: none;
}

.accordion--classic__frage::marker {
  display: none;
}

/* Open State – Summary unten nicht abrunden */
.accordion--classic__item[open] .accordion--classic__frage {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background: var(--accordion-bg-open);
  color: var(--text-light);
}

/* Antwort */
.accordion--classic__antwort-wrapper {
  padding: var(--accordion-padding-block) var(--accordion-padding-inline);
}

/* Open State – Antwort bekommt Rahmen (oben abgeschnitten) */
.accordion--classic__item[open] .accordion--classic__antwort-wrapper {
  border-left: var(--accordion-border);
  border-right: var(--accordion-border);
  border-bottom: var(--accordion-border);

  border-bottom-left-radius: var(--accordion-radius);
  border-bottom-right-radius: var(--accordion-radius);
}

/* Icon */
.accordion--classic__icon {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

/* Rotation bei open */
.accordion--classic__item[open] .accordion--classic__icon {
  transform: rotate(180deg);
}

/* Kleine weiche Einblendung */
.accordion--classic__item[open] .accordion--classic__antwort-wrapper {
  animation: accordionFadeIn 0.2s ease;
}

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

@media (prefers-reduced-motion: reduce) {
  .accordion--classic__icon {
    transition: none;
  }

  .accordion--classic__item[open] .accordion--classic__antwort-wrapper {
    animation: none;
  }
}