/* Basta Accordion Columns v1.0.6 */

/* Columns Layout */
/* ============ Feste Spalten ohne Springen ============ */
/* Der JS teilt die Items in echte Spalten .basta-col auf */
.basta-acc-grid {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

/* Spalte: stapelt ihre Items untereinander, kein Reflow in andere Spalten */
.basta-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 24px; /* vertikaler Abstand zwischen den Karten */
  min-width: 0;
}
/* Farben & Größen aus Variablen */
.basta-acc-item{
  background: var(--basta-bg, #fff);
  padding: 1rem;
  border-radius: .5rem;
}
.basta-acc-subhead{
  font-size: var(--basta-fs-sub, 1.2em);
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 1.45rem;
  letter-spacing: 0.0525em;
  opacity: 1;
  text-transform: uppercase;
}
.basta-acc-separator{
  display:block;
  height:3px;
	width: 15%;
  color: #ff3366;
  margin:.45rem 0 .5rem;
  background: currentColor; /* per CSS überschreibbar */
  opacity: 1;
}
.basta-acc-title{
  color: var(--basta-title-color, #fff);
  font-size: var(--basta-fs-title, 1.8em);
	font-weight: 800;
  display:flex; align-items:center; gap:.5rem;
  cursor:pointer;
	text-transform: uppercase;
}
.basta-acc-title .basta-acc-toggle{
  margin-left:auto;
  font-weight:700;
  line-height:1;
  display:inline-block;
  transform: translateY(-1px);
}
.basta-acc-panel{
  font-size: var(--basta-fs-text, 0.8em);
  background: var(--basta-text-bg, transparent);
  padding: .75rem;
}

/* Responsive: wir lassen JS die Spaltenanzahl anpassen; CSS muss nur gut aussehen */
@media (max-width:1024px) {
  .basta-acc-grid { gap: 24px; }
}
@media (max-width:768px) {
  .basta-acc-grid { gap: 20px; }
  .basta-col { gap: 20px; }
}
@media (max-width:480px) {
  .basta-acc-grid { gap: 16px; }
  .basta-col { gap: 16px; }
}

/* ============ Karten / Accordion ============ */
.basta-acc-item{
  border:0px solid #000;
  border-radius: 0px;
  box-sizing:border-box;
  transition:box-shadow .2s ease;
}
.basta-acc-item:hover{ box-shadow: 1px 1px 1px 1px rgba(255,51,102,1); }


.basta-acc-plus{ font-weight:700; font-size:20px; transition:transform .25s ease; }
.basta-acc-title[aria-expanded="true"] .basta-acc-plus{ transform:rotate(45deg); }

/* Optionales PNG-Icon rechts: rotiert beim Öffnen nach unten */
.basta-acc-icon{ width:20px; height:20px; object-fit:contain; transition:transform .25s ease; }
.basta-acc-title[aria-expanded="true"] .basta-acc-icon{ transform:rotate(90deg); }

/* Panel */
.basta-acc-panel{
  max-height:0;
  overflow:hidden;
  background: var(--basta-text-bg, transparent);	
  transition:max-height .35s ease-in-out, opacity .25s ease-in-out;
}
.basta-acc-panel[data-open="true"]{ opacity:1; }
/* Nur der Inhaltsbereich bekommt optionalen Hintergrund + eigene Textfarbe */
/* Panel wirklich ausblenden, selbst wenn Themes etwas injizieren */
.basta-acc-panel[hidden] { display: none !important; }

/* Verhindert, dass Padding/Margins „durchscheinen“ */
/* Panel wirklich zu + sanfte Animation */
.basta-acc-panel{
  max-height: 0;
  overflow: hidden;
  transition: max-height 300ms ease;
  margin: 0; padding: 0; border: 0;
}
/* Inhalt wie gehabt */
.basta-acc-panel-inner{
  background: var(--basta-text-bg, transparent);
  color: var(--basta-text-color, inherit);
  padding: .75rem;
  border-radius: .375rem;
}

/* Links und Headings im Textbereich sollen die eingestellte Farbe übernehmen */
.basta-acc-panel-inner a,
.basta-acc-panel-inner :is(h1,h2,h3,h4,h5,h6),
.basta-acc-panel-inner :is(p,li,span,em,strong){
  color: inherit;
}