/*--------
BUTTONS
---------*/

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  inline-size: fit-content;
  max-inline-size: max-content;

  font-size: var(--text-s);
  font-weight: 500;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;

  padding-block: var(--space-s);
  padding-inline: var(--space-xl);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-s);

  border: none;
  background: tranparent;
  color: inherit;

  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease,
    transform 0.1s ease;

  :is(.btn, a.btn, button.btn) {
    display: inline-flex;
    flex: 0 0 auto;
    align-self: start;
    justify-self: start;
  }
}

.btn--primary {
  background-color: var(--primary);
  color: var(--text-light);
  font-size: var(--text-l);
}

.btn--primary:hover {
  background-color: var(--primary);
}

.btn--secondary {
  background-color: var(--secondary);
  color: var(--text-light);
  font-size: var(--text-s);
}

.btn--secondary:hover {
  background-color: var(--secondary-light);
}

/*-----------------
AKKORDION
-----------------*/
.faq-item {
  margin-bottom: var(--space-xs);
}

.faq-item h3 {
  font-family: var(--font-base);
  font-weight: 400;
  font-size: var(--text-m);
  text-shadow: var(--shadow-s);

  margin-bottom: 0rem; /* Weil wir ja global margin bottom auf h haben */
}

.faq-item h3 button {
  appearance: none;
  background: none;
  border: none;

  width: 100%;
  text-align: left;

  cursor: pointer;

  display: flex;
  justify-content: space-between;
  align-items: center;

  padding-block: var(--space-xs);
  padding-inline: var(--space-l);
  background-color: var(--primary-ultra-light);
  color: var(--text-dark);
  box-shadow: var(--shadow-s);
  border-radius: var(--radius-xs);
  font-size: var(--text-m);
  font-weight: 400;
}


.faq-item h3 button:focus {
  outline: 1px solid var(--primary);
}

.faq-item__antwort p {
  /* Wir haben global margin bottom auf p */
  margin-bottom: 0rem;
}

.faq-item__antwort,
.faq-item .faq-item-antwort {
  padding-block: var(--space-s);
  padding-inline: var(--space-l);
  margin-bottom: var(--space-xs);
  background-color: var(--white-dark);
  box-shadow: var(--shadow-xs);
}