/* accordion.css */
/* Basierend auf User-Upload (perfekte Version) */
/* Version 6 - NUR Farbwerte durch CSS-Variablen ersetzt */

/* Fallback-Variablen (Werte aus deiner Original-Datei) */
:root {
  --fallback-white: #fff;
  --fallback-light-cyan: #edf6f9;      /* Für border-top */
  --fallback-button-bg: #ff6b6b;
  --fallback-button-hover: #ff5151;
  --fallback-acc-inactive-bg: #d2b3a1; /* Original Inaktiv */
  --fallback-acc-active-bg: #b1653b;  /* Original Aktiv */
  --fallback-acc-inactive-text: rgba(0, 0, 0, 0.85); /* Dunkler Text (Fallback) */
  --fallback-acc-active-text: rgba(255, 255, 255, 0.9); /* Heller Text (Fallback) */
  --fallback-acc-radius: 30px;
  --fallback-accordion-bg-hover-color: #dbbcaa; /* Original Hover */
}

.accordion-wrapper {
  max-width: 1000px;
  padding: 0 20px; /* Original */
  margin: 0 auto;   /* Original */
  /* margin-bottom wird von style.css gesteuert */
}

.accordion-wrapper ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.accordion-wrapper li {
  position: relative;
  padding: 0 30px 30px; /* Original */
  cursor: pointer;
  border-top-left-radius: var(--fallback-acc-radius); /* Original */
  border-top-right-radius: var(--fallback-acc-radius); /* Original */
  /* FARBANPASSUNG: Inaktiver Hintergrund */
  background: var(--acc-inactive-bg, var(--fallback-acc-inactive-bg));
  transition: background 0.2s ease-out; /* Original */
}

.accordion-wrapper li:not(:first-child) {
  margin-top: -60px; /* Original */
  /* FARBANPASSUNG: Trennlinie (bleibt bei festem Wert oder nimm Kontrast?) */
  border-top: 1px solid var(--fallback-light-cyan); /* Original */
  /* Alternative: border-top: 1px solid var(--acc-inactive-svg, var(--fallback-acc-inactive-text)); */
}

.accordion-wrapper li:last-child {
  padding-bottom: 0; /* Original */
}

/* Original-Regeln für untere Radien */
.accordion-wrapper li:nth-last-child(2),
.accordion-wrapper li:last-child {
  border-bottom-left-radius: var(--fallback-acc-radius);
  border-bottom-right-radius: var(--fallback-acc-radius);
}

.accordion-wrapper li:hover {
  /* FARBANPASSUNG: Feste Hover-Farbe aus Original */
background: var(--acc-inactive-hover-bg, var(--fallback-accordion-bg-hover-color));
}

.accordion-wrapper:not([data-multiple="true"]) li.active {
  /* FARBANPASSUNG: Aktiver Hintergrund als Border */
  border-top-color: var(--acc-active-bg, var(--fallback-acc-active-bg));
}

.accordion-wrapper li.active {
  cursor: default;
  /* FARBANPASSUNG: Aktiver Hintergrund */
  background: var(--acc-active-bg, var(--fallback-acc-active-bg));
}

.accordion-wrapper .accordion-title {
  display: flex; align-items: center; justify-content: flex-start;
  line-height: 1.2; padding: 20px 0 40px 0; margin: 0; /* Original */
  position: relative; z-index: 2; /* Hinzugefügt aus letzter Version, sinnvoll für Überlappung */
}

.accordion-wrapper li.active .accordion-title {
  /* FARBANPASSUNG: Farbe des Titels = Inaktiver Hintergrund */
  color: var(--acc-active-title, var(--fallback-acc-inactive-bg));
}

.accordion-wrapper li:not(.active) .accordion-title {
  /* FARBANPASSUNG: Farbe des Titels = Aktiver Hintergrund */
  color: var(--acc-inactive-title, var(--fallback-acc-active-bg));
}

.accordion-wrapper .accordion-title button {
  cursor: pointer; background: none; border: none; margin-left: auto; padding: 0; /* Original */
}

/* --- SVG Styling --- */
.accordion-wrapper li.active svg circle {
  /* FARBANPASSUNG: Stroke = Inaktiver Hintergrund */
  stroke: var(--acc-active-svg, var(--fallback-acc-inactive-bg));
}
.accordion-wrapper li.active svg text {
  /* FARBANPASSUNG: Fill = Inaktiver Hintergrund */
  fill: var(--acc-active-svg, var(--fallback-acc-inactive-bg));
}
.accordion-wrapper li:not(.active) svg circle {
  /* FARBANPASSUNG: Stroke = Aktiver Hintergrund */
  stroke: var(--acc-inactive-svg, var(--fallback-acc-active-bg));
}
.accordion-wrapper li:not(.active) svg text {
  /* FARBANPASSUNG: Fill = Aktiver Hintergrund */
  fill: var(--acc-inactive-svg, var(--fallback-acc-active-bg));
}

.accordion-wrapper .accordion-content {
  max-height: 0; overflow: hidden; transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Original */
  position: relative; z-index: 1; /* Hinzugefügt aus letzter Version */
  /* FARBANPASSUNG: Textfarbe im aktiven Zustand */
  color: var(--acc-active-content-text, var(--fallback-acc-active-text));
}

/* max-height wird per JS gesetzt */
/* .accordion-wrapper li.active .accordion-content { max-height: 1000px; } */ /* Original auskommentiert */

.accordion-wrapper li:last-child .accordion-title {
  padding-bottom: 20px; /* Original */
}

.accordion-wrapper .inner {
  padding-bottom: 40px; /* Original */
}

/* Original-Button-Styling */
.accordion-wrapper .inner a {
  display: inline-block; border-radius: 30px; padding: 14px 20px;
  text-decoration: none; min-width: 120px; line-height: 1; text-align: center;
  color: var(--fallback-white); /* Feste Button-Farbe */
  background: var(--fallback-button-bg); /* Feste Button-Farbe */
  transition: background 0.3s;
}
.accordion-wrapper .inner a:hover {
  background: var(--fallback-button-hover); /* Feste Button-Hover-Farbe */
}
/* Styling für normale Links im aktiven Content (verwenden Kontrastfarbe) */
.accordion-wrapper li.active .inner a:not([class*="button"]) {
    color: var(--acc-active-content-text, var(--fallback-acc-active-text));
    text-decoration: underline;
    opacity: 0.85;
}
.accordion-wrapper li.active .inner a:not([class*="button"]):hover {
    opacity: 1;
}

.accordion-wrapper .inner *:first-child {
  margin-top: 0; /* Original */
}


/* --- Anpassungen für Zwei-Spalten-Layout --- */
/* Original-Regel für Wrapper im 2-Spalten-Layout */
.two-col-container .col-2 .accordion-wrapper {
  max-width: 100%; width: 100%; padding: 0; margin: 0 !important;
}

/* KORREKTUR: Reduziert unteren Abstand des letzten Accordion-Items,
   damit der col-2 gap (10px) wirkt */
/* Diese Regel ist notwendig, um den Abstand unten zu korrigieren,
   aber sie *sollte* die Rundung nicht beeinflussen */
.two-col-container .col-2 .accordion-wrapper ul > li:last-child {
    padding-bottom: 0 !important;
}
/* Ggf. Padding im .inner des letzten Elements reduzieren */
.two-col-container .col-2 .accordion-wrapper ul > li:last-child .inner {
     padding-bottom: 10px; /* Kleiner Abstand oder 0 */
}
/* WICHTIG: Die Regeln, die explizit den border-radius unten entfernt haben, sind WEG */