/* ============================================
   BELIVO ACCORDION – Hover, Active & Separator Fix
   Ergänzt/überschreibt das bestehende Stylesheet
   ============================================ */

:root {
  --b-green:       #007148;  /* Primär */
  --b-green-600:   #005a36;  /* Dunkler Text auf grünem Untergrund */
  --b-green-100:   #e9f6f0;  /* Aktiver Hintergrund (hellgrün) */
  --b-green-050:   #f4fbf7;  /* Sehr dezentes Grün für Hover */
  --b-focus-ring:  rgba(0, 113, 72, 0.25);
  --b-border:      #e5e5e5;  /* Trennlinien */
}

/* Grund-Button-Zustand */
#profileAccordion .accordion-button {
  background-color: #f8f9f8;
  color: var(--b-green);
  transition: background-color .25s ease, color .25s ease, box-shadow .2s ease, border-left-color .25s ease;
  border-left: 4px solid transparent;
  box-shadow: none !important;
}

/* Hover-Zustand (auch im aktiven Zustand leicht abdunkeln) */
#profileAccordion .accordion-button:hover,
#profileAccordion .accordion-button.collapsed:hover {
  background-color: var(--b-green-050);
  color: var(--b-green-600);
}

/* Fokus für Tastatur-Nutzer */
#profileAccordion .accordion-button:focus,
#profileAccordion .accordion-button:focus-visible {
  box-shadow: 0 0 0 .15rem var(--b-focus-ring);
  outline: none;
}

/* Aktives Akkordeon (offen) – dezentes Hellgrün */
#profileAccordion .accordion-button:not(.collapsed) {
  background-color: var(--b-green-100);
  color: var(--b-green-600);
  border-left-color: var(--b-green);
  box-shadow: none;
}

/* Pfeil/Indicator farblich anpassen (aktiv & hover) */
#profileAccordion .accordion-button::after {
  filter: invert(35%) sepia(95%) saturate(600%) hue-rotate(100deg);
  transition: filter .25s ease;
}
#profileAccordion .accordion-button:hover::after,
#profileAccordion .accordion-button:not(.collapsed)::after {
  filter: invert(25%) sepia(95%) saturate(800%) hue-rotate(95deg);
}

/* === Separator-Fix: saubere Trennlinien, auch beim ersten geöffneten Item === */
#profileAccordion .accordion-item {
  border-bottom: 1px solid var(--b-border);
  background: transparent;
}
#profileAccordion .accordion-item:last-child {
  border-bottom: none;
}
/* Linie zwischen Header und Body */
#profileAccordion .accordion-item .accordion-collapse {
  border-top: 1px solid var(--b-border);
}
/* Untere Linie bleibt sichtbar, wenn geöffnet */
#profileAccordion .accordion-item .accordion-collapse.show {
  border-bottom: 1px solid var(--b-border);
}
/* Dezente Hover-Fläche für das gesamte Item */
#profileAccordion .accordion-item:hover {
  background-color: #fcfdfc;
}

/* Aktiver Body-Bereich leicht betonen */
#profileAccordion .accordion-collapse.show .accordion-body {
  background-color: #ffffff; /* weißer Body für Klarheit */
  box-shadow: inset 0 2px 0 0 var(--b-green-100);
}

/* Badge-Kontrast im Header-Button */
#profileAccordion .accordion-button .badge {
  transition: filter .25s ease, opacity .25s ease;
}
#profileAccordion .accordion-button:hover .badge {
  opacity: .95;
}
#profileAccordion .accordion-button:not(.collapsed) .badge.bg-success {
  background-color: #00a05a !important;
}
#profileAccordion .accordion-button:not(.collapsed) .badge.bg-danger {
  background-color: #d9333f !important;
}

/* Tooltips/Info-Icon im grünen Farbspektrum */
#profileAccordion .info-icon {
  color: var(--b-green);
  transition: color .2s ease, transform .2s ease;
}
#profileAccordion .info-icon:hover {
  color: var(--b-green-600);
  transform: translateY(-1px);
}

/* Form-Fokus in Akkordeon konsistent (dezent grün) */
#profileAccordion .form-control:focus,
#profileAccordion .form-select:focus {
  border-color: var(--b-green);
  box-shadow: 0 0 0 .15rem var(--b-focus-ring);
}



/* Erzwingt dein Akkordeon-Design auch im Elementor-Editor */
.elementor-editor-active #profileAccordion .accordion-item,
.elementor-editor-active #profileAccordion .accordion-button {
  background-color: #fff !important;     /* oder var(--b-green-100) o. ä. */
  border-left-color: var(--b-green) !important;
  color: var(--b-green-600) !important;
}
/* Container */
#feature-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;            /* mehr Abstand zwischen den Tags */
  margin-bottom: 10px !important;  /* Luft zum Input-Feld */
}

/* Tag / Badge */
.feature-tag {
  display: inline-flex !important;
  align-items: center !important;
  background: #f1f1f1 !important;
  border-radius: 999px !important; /* schön rund */
  padding: 8px 14px !important;    /* MEHR Luft im Tag */
  font-size: 14px !important;
  line-height: 1.2 !important;
}

/* Text im Tag */
.feature-tag span {
  margin-right: 6px !important;
}

/* X */
.feature-tag .remove-feature {
  all: unset !important;
  cursor: pointer !important;
  font-size: 14px !important;
  color: #aaa !important;
}

.feature-tag .remove-feature:hover {
  color: #e63946 !important;
}
/* =========================================
   FIELDSET – CLEAN & HARMONISCH
   echter Rahmen + Text darübergelegt
   ========================================= */

.fieldset-styled {
    position: relative !important;
    border: 1.5px solid #d0d4da !important;
    border-radius: 10px !important;
    padding: 36px 20px 20px !important;
    margin-bottom: 30px !important;
    background: #fff !important;
}

/* Legend = Label über dem Rahmen */
.fieldset-legend {
    position: absolute !important;
    top: 0 !important;
    left: 24px !important;
    transform: translateY(-50%) !important;

    padding: 0 12px !important;
    background: #fff !important;

    font-weight: 600 !important;
    font-size: 14px !important;
    color: #2c3338 !important;

    line-height: 1 !important;
    white-space: nowrap;
    z-index: 2 !important;

    /* Bootstrap reset */
    float: none !important;
    width: auto !important;
    display: inline-block !important;
}
#profileAccordion .accordion-body {
    overflow: visible !important;
}