/* ===== Accordion (abergin-Style, angepasst) ===== */
.abg-accordion { max-width: 1024px; margin: 20px 0 40px; }
.abg-item { border-top: 1px solid #efeeee; }
.abg-item:last-child { border-bottom: 1px solid #efeeee; }

/* Toggle input verstecken (aber zugänglich lassen) */
.abg-toggle {
  position: absolute !important;
  opacity: 0;
  pointer-events: none;
}

/* Trigger/Label */
.abg-label {
  display: block;
  position: relative;
  padding: 16px 48px 16px 12px;
  cursor: pointer;
  user-select: none;
  font-size: 1em;
  color: #5b5b5a;
  letter-spacing: .02em;
}

.abg-label:focus,
.abg-label:focus-visible {
  outline: 3px dashed #2fad66;
  outline-offset: 3px;
}

/* Plus/Minus Icon */
.abg-icon {
  position: absolute; right: 12px; top: 50%;
  width: 18px; height: 18px; transform: translateY(-50%);
}
.abg-icon::before, .abg-icon::after {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 18px; height: 3px; background: #2fad66; transform: translateY(-50%);
}
.abg-icon::after { transform: translateY(-50%) rotate(90deg); } /* Plus */
.abg-toggle:checked + .abg-label .abg-icon::after { opacity: 0; }  /* Minus */

/* Aktiver Trigger (linke grüne Leiste, wie zuvor) */
.abg-toggle:checked + .abg-label {
  border-left: 4px solid #2fad66;
  padding-left: 8px;
}

/* Panel */
.abg-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
  padding: 0 12px;
  color: #5b5b5a;
}
.abg-content p, .abg-content li { line-height: 1.5; }

/* geöffnet: max-height groß genug (Accordion aus dem Pen nutzt festen Wert) */
.abg-toggle:checked + .abg-label + .abg-content {
  max-height: 1000px; /* bei langen Inhalten ggf. erhöhen */
  padding-top: 14px; 
  padding-bottom: 16px;
}


/* ===== Accordion: Panel-Inhalt über volle Breite ===== */
.abg-accordion .abg-content p,
.abg-accordion .abg-content ul,
.abg-accordion .abg-content ol,
.abg-accordion .abg-content li {
  float: none !important;
  width: 100% !important;   /* statt 50% */
  max-width: none !important;
  display: block;
  margin-right: 0;
}

/* Falls deine 50%-Regeln erst im Desktop-Breakpoint greifen: hier zusätzlich überschreiben */
@media (min-width: 800px) {
  .abg-accordion .abg-content p,
  .abg-accordion .abg-content ul,
  .abg-accordion .abg-content ol,
  .abg-accordion .abg-content li {
    float: none !important;
    width: 100% !important;
  }
}


/* --- CTA Duo robust: Desktop nebeneinander --- */
.btn-wrapper.btn-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

.btn-wrapper.btn-row .btn-new {
  /* Reset gegen alte Regeln */
  display: inline-flex !important;
  float: none !important;
  white-space: normal;
  align-items: center;
  gap: 10px;
}

/* Icons sicher weiß halten */
.btn-wrapper.btn-row .btn-ico path {
  fill: #fff !important;
}


/* ===== Accordion Hover-Feedback ===== */
.abg-label {
  display: block;
  position: relative;
  padding: 16px 48px 16px 12px;
  cursor: pointer;            /* Cursor immer als Hand */
  user-select: none;
  font-family: 'ikaros_sans_regularregular', sans-serif;
  font-size: 1.15em;
  color: #5b5b5a;
  letter-spacing: .02em;
  transition: background-color 0.2s ease;  /* sanfter Hover-Effekt */
}

/* Hover-State: leichtes Grau */
.abg-label:hover {
  background-color: #f2f2f2;  /* sehr helles Grau, passt zu deinem Design */
}

/* Auch Fokus sichtbar lassen */
.abg-label:focus,
.abg-label:focus-visible {
  outline: 2px dashed #2fad66;
  outline-offset: 2px;
}