/* =========================================================
SNIPPET: 85 - ACCORDION (Elementor) — LIST DEFAULT
V2 / CLEAN ARCHITECTURE / SURFACE + OUTLINE + RADIUS + SHADOW READY

WOFÜR
- Einheitliches Accordion Styling für Elementor Accordion Widget
- Default = LIST (Separatoren, kein Item-Gap)
- Optional: Card-Variante via Modifier

SYSTEM-LOGIK
Surface  -> sf-* / Accordion-Bridge
Flow     -> --flow-*      (Content Rhythm)
UI Gap   -> --ui-gap-*    (Icon Gap)
Radius   -> ro-*          (Radius Utilities)
Outline  -> ol / ol-1 / ol-2
Shadow   -> sh* / glo* / shgl* / hover-*

DEFAULT
- Liste mit Separator-Look
- kein Gap zwischen Items
- Trennung über border-bottom

MODIFIER
- acc-s / acc-m / acc-l
- acc-compact
- acc-card
- acc-icon-r
- acc-open
========================================================= */


/* =========================================================
0) DEFAULT TOKENS
========================================================= */

.elementor .elementor-widget-accordion.acc{
  --acc-item-gap: 0;

  --acc-pad-y:    var(--flow-s);
  --acc-pad-x:    var(--flow-l);
  --acc-cont-pad: var(--flow-l);
  --acc-flow:     var(--flow-s);
  --acc-icon-gap: var(--ui-gap-s);

  --acc-radius: 0;
  --acc-border-w: 1px;
  --acc-border-color: var(--c-border);

  --acc-item-bg: transparent;
  --acc-item-bg-hover: transparent;
  --acc-item-bg-open: transparent;

  --acc-title-bg-hover: color-mix(in srgb, var(--c-text) 4%, transparent);

  --acc-speed: var(--hover-speed);
  --acc-ease:  var(--hover-ease);
}


/* =========================================================
1) SURFACE BRIDGE
Nur Hintergrundlogik, keine Borderlogik
========================================================= */

.elementor .elementor-widget-accordion.acc.sf-subtle{
  --acc-item-bg:       var(--c-surface-subtle);
  --acc-item-bg-hover: var(--c-surface-subtle-hover);
  --acc-item-bg-open:  var(--c-surface-subtle-active);
}

.elementor .elementor-widget-accordion.acc.sf-card{
  --acc-item-bg:       var(--c-surface-card);
  --acc-item-bg-hover: var(--c-surface-card-hover);
  --acc-item-bg-open:  var(--c-surface-card-active);
}

.elementor .elementor-widget-accordion.acc.sf-elevated{
  --acc-item-bg:       var(--c-surface-elevated);
  --acc-item-bg-hover: var(--c-surface-elevated-hover);
  --acc-item-bg-open:  var(--c-surface-elevated-active);
}

.elementor .elementor-widget-accordion.acc.sf-strong{
  --acc-item-bg:       var(--c-surface-strong);
  --acc-item-bg-hover: color-mix(in srgb, var(--c-surface-strong) 92%, var(--c-text) 8%);
  --acc-item-bg-open:  color-mix(in srgb, var(--c-surface-strong) 86%, var(--c-text) 14%);
}

.elementor .elementor-widget-accordion.acc.sf-inverse{
  --acc-item-bg:       var(--c-surface-inverse);
  --acc-item-bg-hover: color-mix(in srgb, var(--c-surface-inverse) 94%, white 6%);
  --acc-item-bg-open:  color-mix(in srgb, var(--c-surface-inverse) 88%, white 12%);
}


/* =========================================================
2) OUTLINE BRIDGE
Nur Borderfarbe
========================================================= */

.elementor .elementor-widget-accordion.acc.ol{
  --acc-border-color: var(--c-border);
}

.elementor .elementor-widget-accordion.acc.ol-1{
  --acc-border-color: color-mix(in srgb, var(--c-accent) 38%, transparent);
}

.elementor .elementor-widget-accordion.acc.ol-2{
  --acc-border-color: color-mix(in srgb, var(--c-accent-2) 38%, transparent);
}


/* =========================================================
3) CONTAINER
========================================================= */

.elementor .elementor-widget-accordion.acc .elementor-accordion{
  display: flex;
  flex-direction: column;
  gap: var(--acc-item-gap);
}


/* =========================================================
4) ITEM BASE
Nur gemeinsame Basis
========================================================= */

.elementor .elementor-widget-accordion.acc .elementor-accordion-item{
  position: relative;
  background: var(--acc-item-bg) !important;
  border: 0 !important;
  border-radius: var(--acc-radius) !important;
  overflow: hidden;
  transition:
    background-color var(--acc-speed) var(--acc-ease),
    box-shadow var(--acc-speed) var(--acc-ease),
    transform var(--acc-speed) var(--acc-ease),
    border-color var(--acc-speed) var(--acc-ease)
    !important;
}


/* =========================================================
5) LIST MODE (DEFAULT)
========================================================= */

.elementor .elementor-widget-accordion.acc:not(.acc-card) .elementor-accordion-item{
  border-bottom: var(--acc-border-w) solid var(--acc-border-color) !important;
}

.elementor .elementor-widget-accordion.acc:not(.acc-card) .elementor-accordion-item:last-child{
  border-bottom: 0 !important;
}


/* =========================================================
6) CARD MODE
========================================================= */

.elementor .elementor-widget-accordion.acc.acc-card{
  --acc-item-gap: var(--flow-s);
  --acc-radius: var(--radius-l);
}

.elementor .elementor-widget-accordion.acc.acc-card .elementor-accordion-item{
  border: var(--acc-border-w) solid var(--acc-border-color) !important;
}


/* =========================================================
7) TITLE
========================================================= */

.elementor .elementor-widget-accordion.acc .elementor-tab-title{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--acc-icon-gap) !important;

  padding: var(--acc-pad-y) var(--acc-pad-x) !important;

  background: transparent !important;
  border: 0 !important;

  transition:
    background-color var(--acc-speed) var(--acc-ease),
    color var(--acc-speed) var(--acc-ease)
    !important;
}

.elementor .elementor-widget-accordion.acc .elementor-tab-title:hover{
  background: var(--acc-title-bg-hover) !important;
}


/* =========================================================
8) ICON
Default = links
acc-icon-r = rechts
========================================================= */

.elementor .elementor-widget-accordion.acc .elementor-tab-title{
  flex-direction: row-reverse;
}

.elementor .elementor-widget-accordion.acc .elementor-accordion-icon{
  flex: 0 0 auto;
  margin-right: var(--acc-icon-gap);
}

.elementor .elementor-widget-accordion.acc.acc-icon-r .elementor-tab-title{
  flex-direction: row;
}

.elementor .elementor-widget-accordion.acc.acc-icon-r .elementor-accordion-icon{
  margin-right: 0;
  margin-left: var(--acc-icon-gap);
}


/* =========================================================
9) CONTENT
========================================================= */

.elementor .elementor-widget-accordion.acc .elementor-tab-content{
  padding: 0 var(--acc-pad-x) var(--acc-cont-pad) !important;
  border: 0 !important;
  background: transparent !important;
}

.elementor .elementor-widget-accordion.acc .elementor-tab-content > :where(* + *){
  margin-top: var(--acc-flow) !important;
}


/* =========================================================
10) OPEN / HOVER ITEM STATES
========================================================= */

.elementor .elementor-widget-accordion.acc .elementor-accordion-item:hover{
  background: var(--acc-item-bg-hover) !important;
}

.elementor .elementor-widget-accordion.acc .elementor-accordion-item:has(> .elementor-tab-title.elementor-active){
  background: var(--acc-item-bg-open) !important;
}

.elementor .elementor-widget-accordion.acc.acc-open .elementor-tab-title.elementor-active{
  color: var(--c-accent) !important;
}

.elementor .elementor-widget-accordion.acc.acc-open.acc-card .elementor-accordion-item:has(> .elementor-tab-title.elementor-active){
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc-border-color) 88%, transparent);
}

.elementor .elementor-widget-accordion.acc.acc-open:not(.acc-card) .elementor-accordion-item:has(> .elementor-tab-title.elementor-active){
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--acc-border-color) 88%, transparent);
}


/* =========================================================
11) SIZE SCALE
========================================================= */

.elementor .elementor-widget-accordion.acc.acc-s{
  --acc-pad-y:    var(--flow-xs);
  --acc-pad-x:    var(--flow-m);
  --acc-cont-pad: var(--flow-m);
  --acc-flow:     var(--flow-xs);
  --acc-icon-gap: var(--ui-gap-xs);
}

.elementor .elementor-widget-accordion.acc.acc-m{
  --acc-pad-y:    var(--flow-s);
  --acc-pad-x:    var(--flow-l);
  --acc-cont-pad: var(--flow-l);
  --acc-flow:     var(--flow-s);
  --acc-icon-gap: var(--ui-gap-s);
}

.elementor .elementor-widget-accordion.acc.acc-l{
  --acc-pad-y:    var(--flow-m);
  --acc-pad-x:    var(--flow-xl);
  --acc-cont-pad: var(--flow-xl);
  --acc-flow:     var(--flow-m);
  --acc-icon-gap: var(--ui-gap-m);
}


/* =========================================================
12) COMPACT
========================================================= */

.elementor .elementor-widget-accordion.acc.acc-compact{
  --acc-pad-y:    var(--flow-xs);
  --acc-cont-pad: var(--flow-s);
  --acc-flow:     var(--flow-xs);
  --acc-icon-gap: var(--ui-gap-xs);
}


/* =========================================================
13) RADIUS UTILITIES
Radius wirkt bewusst nur dann sichtbar, wenn nötig
(vor allem in acc-card oder mit Surface)
========================================================= */

.elementor .elementor-widget-accordion.acc.ro-xxs{ --acc-radius: var(--radius-xxs); }
.elementor .elementor-widget-accordion.acc.ro-xs { --acc-radius: var(--radius-xs);  }
.elementor .elementor-widget-accordion.acc.ro-s  { --acc-radius: var(--radius-s);   }
.elementor .elementor-widget-accordion.acc.ro-m  { --acc-radius: var(--radius-m);   }
.elementor .elementor-widget-accordion.acc.ro-l  { --acc-radius: var(--radius-l);   }
.elementor .elementor-widget-accordion.acc.ro-xl { --acc-radius: var(--radius-xl);  }
.elementor .elementor-widget-accordion.acc.ro-xxl{ --acc-radius: var(--radius-xxl); }


/* =========================================================
14) SHADOW / GLOW BRIDGE
Greift immer auf .elementor-accordion-item
========================================================= */

/* Neutral Shadow */
.elementor .elementor-widget-accordion.acc:is(.shadow,.sh,.shadow-m,.sh-m) .elementor-accordion-item{
  box-shadow: var(--shadow-m) rgba(0,0,0,var(--shadow-alpha-m)) !important;
}
.elementor .elementor-widget-accordion.acc:is(.shadow-s,.sh-s) .elementor-accordion-item{
  box-shadow: var(--shadow-s) rgba(0,0,0,var(--shadow-alpha-s)) !important;
}
.elementor .elementor-widget-accordion.acc:is(.shadow-l,.sh-l) .elementor-accordion-item{
  box-shadow: var(--shadow-l) rgba(0,0,0,var(--shadow-alpha-l)) !important;
}

/* Brand Shadow 1 */
.elementor .elementor-widget-accordion.acc:is(.shadow-1,.sh-1,.shadow-1-m,.sh-1-m) .elementor-accordion-item{
  box-shadow: var(--shadow-m) color-mix(in srgb, var(--shadow-color-1) var(--sh-tint), transparent) !important;
}
.elementor .elementor-widget-accordion.acc:is(.shadow-1-s,.sh-1-s) .elementor-accordion-item{
  box-shadow: var(--shadow-s) color-mix(in srgb, var(--shadow-color-1) var(--sh-tint), transparent) !important;
}
.elementor .elementor-widget-accordion.acc:is(.shadow-1-l,.sh-1-l) .elementor-accordion-item{
  box-shadow: var(--shadow-l) color-mix(in srgb, var(--shadow-color-1) var(--sh-tint), transparent) !important;
}

/* Brand Shadow 2 */
.elementor .elementor-widget-accordion.acc:is(.shadow-2,.sh-2,.shadow-2-m,.sh-2-m) .elementor-accordion-item{
  box-shadow: var(--shadow-m) color-mix(in srgb, var(--shadow-color-2) var(--sh-tint), transparent) !important;
}
.elementor .elementor-widget-accordion.acc:is(.shadow-2-s,.sh-2-s) .elementor-accordion-item{
  box-shadow: var(--shadow-s) color-mix(in srgb, var(--shadow-color-2) var(--sh-tint), transparent) !important;
}
.elementor .elementor-widget-accordion.acc:is(.shadow-2-l,.sh-2-l) .elementor-accordion-item{
  box-shadow: var(--shadow-l) color-mix(in srgb, var(--shadow-color-2) var(--sh-tint), transparent) !important;
}

/* Neutral Glow */
.elementor .elementor-widget-accordion.acc:is(.glo,.glo-m) .elementor-accordion-item{
  box-shadow: var(--glow-m) rgba(0,0,0,var(--shadow-alpha-m)) !important;
}
.elementor .elementor-widget-accordion.acc.glo-s .elementor-accordion-item{
  box-shadow: var(--glow-s) rgba(0,0,0,var(--shadow-alpha-s)) !important;
}
.elementor .elementor-widget-accordion.acc.glo-l .elementor-accordion-item{
  box-shadow: var(--glow-l) rgba(0,0,0,var(--shadow-alpha-l)) !important;
}

/* Brand Glow 1 */
.elementor .elementor-widget-accordion.acc:is(.glo-1,.glo-1-m) .elementor-accordion-item{
  box-shadow: var(--glow-m) color-mix(in srgb, var(--shadow-color-1) var(--gl-tint), transparent) !important;
}
.elementor .elementor-widget-accordion.acc.glo-1-s .elementor-accordion-item{
  box-shadow: var(--glow-s) color-mix(in srgb, var(--shadow-color-1) var(--gl-tint), transparent) !important;
}
.elementor .elementor-widget-accordion.acc.glo-1-l .elementor-accordion-item{
  box-shadow: var(--glow-l) color-mix(in srgb, var(--shadow-color-1) var(--gl-tint), transparent) !important;
}

/* Brand Glow 2 */
.elementor .elementor-widget-accordion.acc:is(.glo-2,.glo-2-m) .elementor-accordion-item{
  box-shadow: var(--glow-m) color-mix(in srgb, var(--shadow-color-2) var(--gl-tint), transparent) !important;
}
.elementor .elementor-widget-accordion.acc.glo-2-s .elementor-accordion-item{
  box-shadow: var(--glow-s) color-mix(in srgb, var(--shadow-color-2) var(--gl-tint), transparent) !important;
}
.elementor .elementor-widget-accordion.acc.glo-2-l .elementor-accordion-item{
  box-shadow: var(--glow-l) color-mix(in srgb, var(--shadow-color-2) var(--gl-tint), transparent) !important;
}

/* Neutral Shadow + Glow */
.elementor .elementor-widget-accordion.acc:is(.shadow-glow,.shgl,.shadow-glow-m,.shgl-m) .elementor-accordion-item{
  box-shadow:
    var(--shadow-m) rgba(0,0,0,var(--shadow-alpha-m)),
    var(--glow-m) rgba(0,0,0,var(--shadow-alpha-m))
  !important;
}
.elementor .elementor-widget-accordion.acc:is(.shadow-glow-s,.shgl-s) .elementor-accordion-item{
  box-shadow:
    var(--shadow-s) rgba(0,0,0,var(--shadow-alpha-s)),
    var(--glow-s) rgba(0,0,0,var(--shadow-alpha-s))
  !important;
}
.elementor .elementor-widget-accordion.acc:is(.shadow-glow-l,.shgl-l) .elementor-accordion-item{
  box-shadow:
    var(--shadow-l) rgba(0,0,0,var(--shadow-alpha-l)),
    var(--glow-l) rgba(0,0,0,var(--shadow-alpha-l))
  !important;
}

/* Brand Shadow + Glow 1 */
.elementor .elementor-widget-accordion.acc:is(.shadow-glow-1,.shgl-1,.shgl-1-m) .elementor-accordion-item{
  box-shadow:
    var(--shadow-m) color-mix(in srgb, var(--shadow-color-1) var(--sh-tint), transparent),
    var(--glow-m) color-mix(in srgb, var(--shadow-color-1) var(--gl-tint), transparent)
  !important;
}
.elementor .elementor-widget-accordion.acc.shgl-1-s .elementor-accordion-item{
  box-shadow:
    var(--shadow-s) color-mix(in srgb, var(--shadow-color-1) var(--sh-tint), transparent),
    var(--glow-s) color-mix(in srgb, var(--shadow-color-1) var(--gl-tint), transparent)
  !important;
}
.elementor .elementor-widget-accordion.acc.shgl-1-l .elementor-accordion-item{
  box-shadow:
    var(--shadow-l) color-mix(in srgb, var(--shadow-color-1) var(--sh-tint), transparent),
    var(--glow-l) color-mix(in srgb, var(--shadow-color-1) var(--gl-tint), transparent)
  !important;
}

/* Brand Shadow + Glow 2 */
.elementor .elementor-widget-accordion.acc:is(.shadow-glow-2,.shgl-2,.shgl-2-m) .elementor-accordion-item{
  box-shadow:
    var(--shadow-m) color-mix(in srgb, var(--shadow-color-2) var(--sh-tint), transparent),
    var(--glow-m) color-mix(in srgb, var(--shadow-color-2) var(--gl-tint), transparent)
  !important;
}
.elementor .elementor-widget-accordion.acc.shgl-2-s .elementor-accordion-item{
  box-shadow:
    var(--shadow-s) color-mix(in srgb, var(--shadow-color-2) var(--sh-tint), transparent),
    var(--glow-s) color-mix(in srgb, var(--shadow-color-2) var(--gl-tint), transparent)
  !important;
}
.elementor .elementor-widget-accordion.acc.shgl-2-l .elementor-accordion-item{
  box-shadow:
    var(--shadow-l) color-mix(in srgb, var(--shadow-color-2) var(--sh-tint), transparent),
    var(--glow-l) color-mix(in srgb, var(--shadow-color-2) var(--gl-tint), transparent)
  !important;
}

/* Hover Lift */
.elementor .elementor-widget-accordion.acc:is(.hover-lift-s,.hl-s,.hover-lift-m,.hl-m) .elementor-accordion-item{
  will-change: transform;
}
.elementor .elementor-widget-accordion.acc:is(.hover-lift-s,.hl-s) .elementor-accordion-item:hover{
  transform: var(--lift-s) !important;
}
.elementor .elementor-widget-accordion.acc:is(.hover-lift-m,.hl-m) .elementor-accordion-item:hover{
  transform: var(--lift-m) !important;
}