/* =====================================================================
   FAIST Overlap Accordion (faist_overlap_accordion)
   Abhängig von assets/css/tokens.css (faist-tokens).

   Vollbreite ohne JS: der Tab (button.faist-accord-trigger) bleibt im normalen
   Fluss und ist genau so breit wie der Container-Inhalt. Hintergrund und Schatten
   zeichnet ein ::before, das links/rechts um 100vw über den Container hinausragt;
   der äußere Elementor-Container schneidet es am Viewport ab (overflow-x: clip).
   Der Inhalt steht damit bündig am Container-Inhalt (= Seitenrand --faist-gutter,
   das Padding liefert der Container) – ohne --faist-sbw, ohne Resize-Handler.

   Control-Werte (Elementor, {{WRAPPER}} …) überschreiben die Basiswerte hier;
   die Werte in dieser Datei sind Fallbacks, mit denen das Widget auch ohne
   Elementor-CSS sinnvoll aussieht.
   ===================================================================== */

/* ---------- Container / Wrapper ---------- */
.faist-accord-item { position: relative; }

/* Der äußere Elementor-Container clippt die Vollbreiten-Tabs am Viewport.
   clip statt hidden: erzeugt keinen Scroll-Container, position: sticky
   innerhalb der Sektion funktioniert weiter. */
.e-parent:has(.faist-accord) { overflow-x: clip; }

/* Gesamtes Accordion: Overlap-Steuerung und Tab-Farbe */
.faist-accord {
  position: relative;
  --overlap: 22px;
  --tab-bg: var(--faist-white, #fff);              /* auch Fade-Hintergrund des Titels */
  --tab-shadow: 0 -6px 10px rgba(0, 0, 0, 0.05);   /* 5 % Schwarz – kein Token vorhanden, Wert 1:1 */
  --faist-active-title: inherit;                   /* Control active_title_color setzt den Wert */
}

/* ---------- Tab (Header) ---------- */
/* Reset gegen Theme-Button-Styles (hello-elementor theme.css: border, padding,
   background/color bei :hover/:focus, transition: all). */
.faist-accord .faist-accord-trigger,
.faist-accord .faist-accord-trigger:hover,
.faist-accord .faist-accord-trigger:focus,
.faist-accord .faist-accord-trigger:active {
  position: relative;
  z-index: 3;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: none;
}
.faist-accord .faist-accord-trigger:focus { outline: none; }
.faist-accord .faist-accord-trigger:focus-visible {
  outline: 2px solid var(--faist-red, #FF0827);
  outline-offset: -2px;
}

/* Vollbreiten-Fläche des Tabs: Hintergrund + Schatten, hinter dem Inhalt */
.faist-accord .faist-accord-trigger::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -100vw;
  right: -100vw;
  z-index: -1;
  background: var(--tab-bg);
  box-shadow: var(--tab-shadow);
  pointer-events: none;
}
/* Erster Tab ohne Schatten */
.faist-accord .faist-accord-item:first-child .faist-accord-trigger::before { box-shadow: none; }

/* Überlappung: jeder weitere Tab schiebt sich über das vorherige Panel */
.faist-accord .faist-accord-item + .faist-accord-item .faist-accord-trigger {
  margin-top: calc(-1.7 * var(--overlap));
}

/* Tab-Inhalt: liegt bündig am Container-Inhalt (keine eigene max-width/Zentrierung) */
.faist-accord-trigger-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: clamp(16px, 2.6vw, 24px) 16px;        /* Control header_padding überschreibt */
  color: inherit;
  font-size: var(--faist-fs-title, clamp(20px, 2.2vw, 28px)); /* Control title_typo überschreibt */
  font-weight: 600;
  line-height: 1.2;
}

/* ---------- Titel: Fade (geschlossen) / zwei Zeilen (offen) ---------- */
.faist-accord .faist-accord-title,
.faist-accord .faist-accord-title:hover,
.faist-accord .faist-accord-title:focus {
  display: block;
  position: relative;
  color: inherit;
  line-height: 1.2;
  margin-left: -2px;                 /* optischer Ausgleich zum linken Rand */
}

/* GESCHLOSSEN: einzeilig + Fade nach rechts */
.faist-accord .faist-accord-item[aria-open="false"] .faist-accord-title {
  white-space: nowrap;
  overflow: hidden;
  --fade-width: 56px;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--fade-width)), transparent 100%);
          mask-image: linear-gradient(to right, #000 calc(100% - var(--fade-width)), transparent 100%);
  padding-right: var(--fade-width);
}
/* Fallback-Overlay ohne mask-Unterstützung (läuft in var(--tab-bg) aus) */
.faist-accord .faist-accord-item[aria-open="false"] .faist-accord-title::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--fade-width, 56px);
  pointer-events: none;
  background: linear-gradient(to right, transparent, var(--tab-bg) 80%);
}

/* OFFEN: ohne Fade, Titel maximal zwei Zeilen, Farbe aus Control */
.faist-accord .faist-accord-item[aria-open="true"] .faist-accord-title {
  -webkit-mask-image: none;
          mask-image: none;
  white-space: normal;
  padding-right: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: visible;
  color: var(--faist-active-title, inherit);
}

/* ---------- Panel ---------- */
.faist-accord-panel {
  position: relative;
  z-index: 1;
  overflow: hidden;
  will-change: height, opacity, transform;
}
/* Auf-/Zuklappen: nur height/opacity/transform, Dauer und Easing wie bisher */
.faist-accord-panel.is-opening { transition: height .32s ease, opacity .28s ease, transform .28s ease; }
.faist-accord-panel.is-closing { transition: height .28s ease, opacity .24s ease, transform .24s ease; }

/* Panel-Inhalt */
.faist-accord-panel-inner {
  width: 100%;

  --panel-base-pad: clamp(18px, 2.4vw, 22px);
  --panel-extra-bottom: var(--overlap);

  padding:
    var(--panel-pad-top, 12px)
    var(--panel-pad-right, 16px)
    calc(var(--panel-pad-bottom, var(--panel-base-pad)) + var(--panel-extra-bottom, 0px))
    var(--panel-pad-left, 16px);

  color: inherit;
  font-size: var(--faist-fs-body, clamp(15px, 1.2vw, 18px)); /* Control content_typo überschreibt */
  background: var(--faist-white, #fff);
}

.faist-accord-panel-inner .faist-eyebrow {
  color: var(--faist-eyebrow, var(--faist-red, #FF0827));
  font-weight: 600;
  letter-spacing: .02em;
}
.faist-accord-panel-inner .faist-main { margin-bottom: var(--faist-desc-links-mb, 16px); }

/* ---------- Link-Liste ---------- */
.faist-accord-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem 2rem;
}

/* Klickbarer Link: Pfeil erscheint bei Hover (Desktop) */
.faist-accord-links a {
  display: inline-flex;
  align-items: center;
  gap: 0;
  text-decoration: none;
  position: relative;
  color: inherit;
  transition: color .15s ease;
  --icon-scale: .9;
  --hover-shift: 8px;
}
.faist-accord-links a::after {
  content: "";
  display: inline-block;
  height: calc(1em * var(--icon-scale));
  aspect-ratio: 59 / 53;
  width: auto;
  margin-left: .15em;
  margin-top: -6px;
  opacity: 0;
  transform: translateX(4px);
  transition: opacity .15s ease, transform .15s ease;
  background-color: currentColor;
  -webkit-mask: var(--faist-arrow-mask) no-repeat center / contain;
          mask: var(--faist-arrow-mask) no-repeat center / contain;
}
.faist-accord-links a:hover::after,
.faist-accord-links a:focus-visible::after {
  opacity: 1;
  transform: translateX(var(--hover-shift));
}
.faist-accord-links a:focus { outline: none; }
.faist-accord-links a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Nicht klickbar (ohne URL) */
.faist-accord-links .no-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  position: relative;
  color: inherit;
  cursor: default;
}
.faist-accord-links .no-link::after,
.faist-accord-links .no-link::before { content: none; }

/* ---------- Bewegung aus ---------- */
@media (prefers-reduced-motion: reduce) {
  .faist-accord-panel.is-opening,
  .faist-accord-panel.is-closing,
  .faist-accord-links a,
  .faist-accord-links a::after { transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .faist-accord .faist-accord-title { margin-left: 0; }
}

/* Nur Mobil: Link = zwei Spalten (roter Pfeil links, Text rechts) */
@media (max-width: 768px) {
  .faist-accord-wrap .faist-accord-links a,
  .faist-accord-wrap .faist-accord-links .no-link {
    display: grid;
    grid-template-columns: 1.25em auto;
    column-gap: .5em;
    align-items: center;
  }

  /* nur echte Links bekommen den roten Pfeil */
  .faist-accord-wrap .faist-accord-links a::before {
    content: "";
    grid-column: 1;
    justify-self: center;
    align-self: center;
    height: 1em;
    aspect-ratio: 59 / 53;
    width: auto;
    background-color: var(--faist-red, #FF0827);
    -webkit-mask: var(--faist-arrow-mask) no-repeat center / contain;
            mask: var(--faist-arrow-mask) no-repeat center / contain;
  }

  .faist-accord-wrap .faist-accord-links a .sc-text,
  .faist-accord-wrap .faist-accord-links .no-link .sc-text {
    grid-column: 2;
    line-height: 1.35;
  }

  /* Desktop-Pfeil (::after) auf Mobil aus */
  .faist-accord-wrap .faist-accord-links a::after { content: none; }

  /* no-link weiterhin ohne Icon */
  .faist-accord-wrap .faist-accord-links .no-link::before,
  .faist-accord-wrap .faist-accord-links .no-link::after { content: none; }
}