:root {
  --purple: #a34ffb;
  --accent: #0685b9;
  --accent_hover: #43a3c9;
  --blue: #00a9cc;
  --dark: #0c0e1a;
  --white: #ffffff;
  --accordion-bg_head: #212248;
  --accordion-bg_text: #212248;
  --accordion-accent_head: #a34ffb;
  --accordion-accent_text: #0685b9;
}

/* ############################### */

/* Grundstil */
.accordion-button {
  position: relative; /* Icon-Positionierung */
  background-color: var(--accordion-bg_head) !important;
  color: var(--white);
  border: none;
  border-radius: 0;
  transition: box-shadow 1.3s ease, border-bottom-color 1.3s ease !important;
}

/* remove bootstrap default arrow */
.accordion-button::after {
  display: none;
}

/* 2.2 Icon rechtsbündig */
.accordion-icon {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%) rotate(0deg);
  transition: transform 0.2s ease-out, color 0.2s;
  color: #ffffff !important;
}

.accordion-item {
  border: none !important;
}

/* 2.3 Closed Tabs – Border-Bottom */
/* Hauptpunkte (mit mt-3 auf .accordion-item) */
.accordion-item.mt-3 .accordion-button.collapsed {
  border-bottom: 1px solid var(--accordion-accent_head);
  transition: box-shadow 0.2s ease, border-bottom-color 0.2s ease !important;
}
/* Unterpunkte (ohne mt-3) */
.accordion-item:not(.mt-3) .accordion-button.collapsed {
  border-bottom: 1px solid var(--accordion-accent_text) !important;
  transition: box-shadow 0.2s ease, border-bottom-color 0.2s ease !important;
}

/* 2.4 Open Tabs – Box-Shadow & Icon-Rotation */
/* Hauptpunkte */
.accordion-item.mt-3 .accordion-button:not(.collapsed) {
  border-bottom: none !important;
  box-shadow: inset 0 0px 5px 1px var(--accordion-accent_head);
  transition: box-shadow 0.2s ease, border-bottom-color 0.2s ease !important;
  color: var(--purple);
}
/* Unterpunkte */
.accordion-item:not(.mt-3) .accordion-button:not(.collapsed) {
  border-bottom: none !important;
  box-shadow: inset 0 -1px 5px var(--accordion-bg_text);
  transition: box-shadow 0.2s ease, border-bottom-color 0.2s ease !important;
  color: var(--accent);
}

.accordion-item.subpoint .accordion-button.collapsed {
  border-bottom: 1px solid var(--accordion-accent_text);
  color: var(--white);
}

.accordion-item.subpoint .accordion-button:not(.collapsed) {
  border-bottom: none !important;
  box-shadow: inset 0 0px 5px 1px var(--accordion-accent_text);
  transition: box-shadow 0.2s ease, border-bottom-color 0.2s ease !important;
  color: var(--accent);
}

/* Icon dreht sich beim Öffnen */
.accordion-button:not(.collapsed) .accordion-icon {
  transform: translateY(-50%) rotate(180deg);
  color: var(--purple) !important;
}

.accordion-button:not(.collapsed) .accordion-icon_head {
  transform: translateY(-50%) rotate(180deg);
  color: var(--purple) !important;
}

.accordion-button:not(.collapsed) .accordion-icon_text {
  transform: translateY(-50%) rotate(180deg);
  color: var(--accent) !important;
}

/* Body-Styling */
.accordion-body {
  background-color: var(--accordion-bg_text);
  color: var(--white);
}

/* Entfernt zusammenhängende Border-Bottom, wenn der geöffnete Punkt ein Unterpunkt ist */
.accordion-button.no-border.collapsed {
  border-bottom: none !important;
}

/* 1. Übergänge in der Grundregel */
.accordion-button {
  transition: box-shadow 0.2s ease, border-bottom-color 0.2s ease !important;
}

/* 2. Icon-Übergänge */
.accordion-icon {
  transition: transform 0.2s ease-out, color 0.2s ease-out !important;
}

/* Für eingerückte Buttons (.ps-4) ersetzen wir die normale Border durch ein ::after */
.accordion-button.ps-4.collapsed {
  border-bottom: none !important;
}

.accordion-button.ps-4.collapsed::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 1rem; /* entspricht genau der ps-4-Einrückung */
  right: 0;
  height: 1px;
  background-color: var(--accordion-accent_text) !important;
  transition: background-color 1.3s ease, width 1.3s ease;
}

.accordion-button:not(.collapsed) .accordion-icon_head_accent {
  transform: translateY(-50%) rotate(180deg);
  color: var(--accent) !important;
}