/**
 * Elementor Presets (Klassen, die du in Elementor an Sections/Containern/Widgets vergeben kannst)
 * Ziel: Das Mockup schnell und "pixel-nah" nachbauen.
 *
 * Nutzung:
 * - In Elementor bei einem Abschnitt/Container -> Erweitert -> CSS-Klassen:
 *   ba-hero, ba-featurebar, ba-cards, ba-iconrow, ba-impressions, ba-footer-cta ...
 */

.ba-section{
  padding-block: clamp(38px, 6vw, 72px);
}
.ba-section--tight{ padding-block: clamp(22px, 4vw, 46px); }

.ba-section-title .elementor-heading-title{
  font-weight: 600;
  letter-spacing: .2px;
}

/* HERO */
.ba-hero{
  position: relative;
  min-height: 76vh;
  display: grid;
  place-items: center;
  color: #fff;
  text-align: center;
}
.ba-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.48));
  pointer-events:none;
}
.ba-hero > .elementor-container,
.ba-hero > .e-con,
.ba-hero > .e-con-inner{
  position: relative;
  z-index: 1;
}

.ba-hero .elementor-heading-title{
  text-shadow: 0 8px 22px rgba(0,0,0,.25);
}
.ba-hero .elementor-widget-text-editor{
  text-shadow: 0 6px 16px rgba(0,0,0,.18);
}

.ba-hero .ba-btn,
.ba-btn .elementor-button{
  border-radius: 14px !important;
  padding: 14px 22px !important;
  font-weight: 500 !important;
  box-shadow: 0 10px 20px rgba(0,0,0,.18);
}
.ba-btn--primary .elementor-button{
  background: var(--ba-green) !important;
  border-color: rgba(0,0,0,0) !important;
}
.ba-btn--primary .elementor-button:hover{ background: var(--ba-green-dark) !important; }
.ba-btn--secondary .elementor-button{
  background: rgba(255,255,255,.90) !important;
  color: #1f1f1f !important;
  border-color: rgba(255,255,255,.0) !important;
}
.ba-btn--secondary .elementor-button:hover{ background: rgba(255,255,255,1) !important; }

/* Feature bar (Icons + Text auf dunklem Balken) */
.ba-featurebar{
  background: rgba(0,0,0,.55);
  color: #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.ba-featurebar .elementor-icon-list-items{
  display:flex !important;
  flex-wrap: wrap;
  gap: 26px;
  justify-content: center;
}
.ba-featurebar .elementor-icon-list-item{
  padding: 10px 0 !important;
}
.ba-featurebar .elementor-icon-list-text{
  font-size: 14px;
  opacity: .95;
}

/* Cards (z.B. Elementor "Call to Action" Widget) */
.ba-cta .elementor-cta{
  border-radius: var(--ba-radius);
  overflow: hidden;
  box-shadow: var(--ba-shadow-soft);
}
.ba-cta .elementor-cta__bg-overlay{
  background: linear-gradient(0deg, rgba(0,0,0,.62), rgba(0,0,0,.10)) !important;
  opacity: 1 !important;
}
.ba-cta .elementor-cta__content{
  padding: 22px !important;
}
.ba-cta .elementor-cta__title{
  font-weight: 600;
  margin-bottom: 6px !important;
}
.ba-cta .elementor-cta__description{
  opacity: .95;
}
.ba-cta .elementor-cta__button{
  margin-top: 14px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.9) !important;
  color: #1f1f1f !important;
  border: 0 !important;
  padding: 10px 16px !important;
}

/* Icon row (3 Icons mit Text darunter) */
.ba-iconrow{
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.55));
}
.ba-iconrow .elementor-icon{
  color: var(--ba-green);
}
.ba-iconrow .elementor-icon-box-title{
  font-weight: 600;
}
.ba-iconrow .elementor-icon-box-description{
  color: var(--ba-muted);
}

/* Impressions gallery */
.ba-impressions .elementor-image img{
  border-radius: var(--ba-radius);
  box-shadow: var(--ba-shadow-soft);
}

/* Footer CTA */
.ba-footer-cta{
  position: relative;
  color: #fff;
}
.ba-footer-cta::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
}
.ba-footer-cta > .elementor-container,
.ba-footer-cta > .e-con,
.ba-footer-cta > .e-con-inner{
  position: relative;
  z-index: 1;
}
.ba-footer-cta .elementor-button{
  border-radius: 14px !important;
  padding: 12px 20px !important;
  background: var(--ba-green) !important;
}
.ba-footer-cta .elementor-button:hover{ background: var(--ba-green-dark) !important; }