/* ECA Module: Gestaltung 1:1 aus dem Entwurf (entwurf/css/buehne.css).
   Tokens (--c-*, --fs-*, --f-*) kommen aus dem Child-Theme; die Fallbacks halten das Modul auch ohne Child-Theme lesbar. */

/* === Leistungs-Bühne === */

/* Die Divi-Section, in der die Bühne steht, wird dunkel. Eine eigene Hintergrundfarbe an der Section gewinnt. */
body .et_pb_section:where(:has(.eca_leistungs_buehne)) {
  background: linear-gradient(160deg, var(--c-navy-tief, #0f1d33) 0%, var(--c-navy, #172a46) 100%);
  padding-block: var(--abschnitt, clamp(3rem, 2rem + 3.5vw, 5.5rem));
}

.eca_leistungs_buehne { color: #dce4f1; }
.eca_leistungs_buehne :is(h2, p, ul, li) { margin: 0; padding: 0; }
/* Divi setzt Listen über „#left-area ul“; :not(#eca) hebt die Spezifität über die ID, ohne !important. */
.eca_leistungs_buehne ul:not(#eca) { list-style: none; padding: 0; line-height: inherit; }
.eca_leistungs_buehne ul:not(#eca) > li { list-style: none; }

.eca_leistungs_buehne .lb-raster {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto 1fr;
  gap: 2rem clamp(2rem, 1rem + 4vw, 5rem);
}
.eca_leistungs_buehne .lb-links { grid-column: 1; grid-row: 1 / span 2; display: grid; gap: 2rem; align-self: start; }
@media (min-width: 64.01rem) {
  .eca_leistungs_buehne .lb-links { position: sticky; top: calc(var(--kopf-hoehe, 5.25rem) + 2rem); }
}
.eca_leistungs_buehne .lb-kopf { grid-column: 1; }
.eca_leistungs_buehne .lb-kopf h2 {
  margin-bottom: 1rem; font-family: var(--f-titel, Georgia, serif); font-size: var(--fs-h2, 2.5rem);
  font-weight: 450; line-height: 1.12; letter-spacing: -.01em; color: var(--c-weiss, #fff);
}
.eca_leistungs_buehne .lb-kopf p { max-width: 30rem; font-size: var(--fs-body, 1.0625rem); line-height: 1.65; color: #c6d2e6; }

.eca_leistungs_buehne .lb-bild {
  grid-column: 1; grid-row: 2; position: relative; align-self: start; aspect-ratio: 5 / 4;
  overflow: hidden; border-radius: var(--radius-karte, .5rem); background: var(--c-navy, #172a46);
}
.eca_leistungs_buehne .lb-bild img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.06); transition: opacity .7s var(--ease, ease), transform 2.6s var(--ease, ease);
}
.eca_leistungs_buehne .lb-bild img.ist-aktiv { opacity: 1; transform: scale(1); }

.eca_leistungs_buehne .lb-liste { grid-column: 2; grid-row: 1 / span 2; align-self: start; border-top: 1px solid rgb(255 255 255 / .14); }
.eca_leistungs_buehne .lb-liste > li { border-bottom: 1px solid rgb(255 255 255 / .14); }
.eca_leistungs_buehne .lb-liste a {
  display: grid; grid-template-columns: minmax(0, 1fr) 2.75rem; gap: 1.5rem; align-items: center;
  padding: clamp(1.1rem, .8rem + 1vw, 1.6rem) .25rem; text-decoration: none; color: inherit;
}
.eca_leistungs_buehne .lb-inhalt { display: block; min-width: 0; }
.eca_leistungs_buehne .lb-mini { display: none; height: auto; }
.eca_leistungs_buehne .lb-titel {
  display: block; margin: 0 0 .35rem; font-family: var(--f-titel, Georgia, serif); font-size: var(--fs-h2, 2.5rem);
  font-weight: 400; line-height: 1.12; color: var(--c-weiss, #fff); opacity: .62;
  transition: opacity .35s var(--ease, ease), color .35s var(--ease, ease);
}
.eca_leistungs_buehne .lb-text { display: block; font-size: var(--fs-body, 1.0625rem); line-height: 1.65; color: #b9c7de; opacity: .8; transition: opacity .35s var(--ease, ease); }
.eca_leistungs_buehne .lb-pfeil {
  position: relative; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  border: 1px solid rgb(255 255 255 / .28);
  transition: background-color .35s var(--ease, ease), border-color .35s var(--ease, ease), transform .45s var(--ease, ease);
}
.eca_leistungs_buehne .lb-pfeil::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: .55rem; height: .55rem;
  border-right: 1.5px solid var(--c-weiss, #fff); border-bottom: 1.5px solid var(--c-weiss, #fff);
  transform: translate(-65%, -50%) rotate(-45deg);
}
.eca_leistungs_buehne .lb-liste > li.ist-aktiv .lb-titel,
.eca_leistungs_buehne .lb-liste a:focus-visible .lb-titel { opacity: 1; }
.eca_leistungs_buehne .lb-liste > li.ist-aktiv .lb-text { opacity: 1; }
.eca_leistungs_buehne .lb-liste > li.ist-aktiv .lb-pfeil { background: var(--c-akzent, #1f56d1); border-color: var(--c-akzent, #1f56d1); transform: translateX(.35rem); }
.eca_leistungs_buehne .lb-liste a:focus-visible { outline: 3px solid var(--c-akzent-hell, #a9c2f2); outline-offset: 2px; }

@media (max-width: 64rem) {
  .eca_leistungs_buehne .lb-raster { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .eca_leistungs_buehne .lb-links { grid-row: auto; }
  .eca_leistungs_buehne .lb-bild { display: none; }
  .eca_leistungs_buehne .lb-liste { grid-column: 1; grid-row: auto; border-top: 0; display: grid; gap: .75rem; }
  .eca_leistungs_buehne .lb-liste > li { border: 0; }
  .eca_leistungs_buehne .lb-liste a {
    grid-template-columns: 5.5rem minmax(0, 1fr) 2.25rem; gap: 1rem; padding: .6rem;
    background: rgb(255 255 255 / .05); border-radius: var(--radius-karte, .5rem);
  }
  .eca_leistungs_buehne .lb-mini { display: block; width: 5.5rem; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-button, .25rem); }
  .eca_leistungs_buehne .lb-titel { font-size: var(--fs-h3, 1.45rem); opacity: 1; }
  .eca_leistungs_buehne .lb-text { font-size: var(--fs-small, .9375rem); opacity: 1; }
  .eca_leistungs_buehne .lb-pfeil { width: 2.25rem; height: 2.25rem; }
  .eca_leistungs_buehne .lb-liste > li.ist-aktiv .lb-pfeil { transform: none; background: transparent; border-color: rgb(255 255 255 / .28); }
}
@media (max-width: 30rem) {
  .eca_leistungs_buehne .lb-liste a { grid-template-columns: 4.25rem minmax(0, 1fr); }
  .eca_leistungs_buehne .lb-mini { width: 4.25rem; }
  .eca_leistungs_buehne .lb-pfeil { display: none; }
}
@media (max-width: 24rem) {
  .eca_leistungs_buehne .lb-titel { font-size: var(--fs-h4, 1.125rem); }
}
@media (prefers-reduced-motion: reduce) {
  .eca_leistungs_buehne :is(.lb-bild img, .lb-titel, .lb-text, .lb-pfeil) { transition: none; }
  .eca_leistungs_buehne .lb-bild img { transform: none; }
}

/* === Insights-Kopf und Kontaktbühne bringen Rahmen und Abstand des Entwurfs selbst mit:
   ihre Divi-Section und Row geben keine eigenen Abstände oder Breiten dazu === */
body .et_pb_section:not(#eca):has(:is(.eca_insights_kopf, .eca_kontaktbuehne, .eca-vollbreite)) { padding: 0; }
body .et_pb_section:not(#eca):has(:is(.eca_insights_kopf, .eca_kontaktbuehne, .eca-vollbreite)) :is(.et_pb_row, .et_pb_column) { width: 100%; max-width: none; padding: 0; margin: 0; }
:is(.eca_insights_kopf, .eca_kontaktbuehne, .eca-vollbreite) { margin: 0; }

/* Vorschau im Visual Builder: Die Hülle der Vorschau zählt im Layout nicht mit, damit etwa h2 und Text
   einer Zeile direkt im Raster von .artikel-zeile stehen. */
.eca-vorschau { display: contents; }

/* Divi gibt Modulen in einer Spalte unter 981 px „margin-bottom: 30px“ (.et_pb_column .et_pb_module).
   Zeilen, Zielgruppen und Leistungen sind Kindmodule im Raster des Entwurfs, ihre Abstände regelt eca.css. */
.et_pb_column :is(.eca_textzeile, .eca_zielgruppe, .eca_leistung, .eca_merkmal).et_pb_module { margin-bottom: 0; }

/* Insights-Übersicht: Abstand wie section.abschnitt im Entwurf */
body .et_pb_section:not(#eca):has(.eca_insights_raster) { padding-block: var(--abschnitt); }
body .et_pb_section:not(#eca):has(.eca_insights_raster) .et_pb_row { padding-block: 0; }