/* =========================================================================
   budi-esf-promo — ESF+ Promo Popup
   Popup Maker (#popmake-2583, theme-569) + WPBakery shortcode output.
   Built from the Figma dev-mode exports + screenshots shared 2026-08-14.

   SCOPING NOTE: classes like .budi-headline, .budi-content-box__wrapper,
   .wpb_text_column, .wpb_image_grid_ul, .pum-close etc. are shared widgets
   used elsewhere on the site. Every rule below is nested under
   .budi-esf-promo (or the popup's own #popmake-2583 for the parts that
   live outside the .budi-esf-promo markup, e.g. the close button) so
   nothing here leaks out and affects those widgets on other pages/popups.

   ⚠️ Items marked "ASSUMPTION" were not given an explicit value in the
   Figma export and were estimated from the screenshots. Please confirm
   or send the real value and I'll swap it in.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Card container + background
   Mobile-first. Desktop breakpoint = 992px (matches the card's own
   radius/padding/max-width change). 768px is left as the existing
   Bootstrap "md" breakpoint that already swaps the bg image via the
   d-none/d-block utility classes in the markup — no extra CSS needed there.
   ------------------------------------------------------------------------- */
.budi-esf-promo {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 20px;
  padding: 55px 20px 30px;
  color: #fff;
  font-family: "Barlow", sans-serif;
  max-width: 1150px;
  margin: 0 auto;
}

@media (min-width: 992px) {
  .budi-esf-promo {
    border-radius: 35px;
    padding: 60px;
  }
}

/* Background photo, absolutely positioned + cover, with the purple
   gradient overlay applied on ::before so it sits above the photo but
   behind the content rows. */
.budi-esf-promo .budi-esf-promo__bg {
  position: absolute !important;
  inset: 0;
  z-index: 0;
}

.budi-esf-promo .budi-esf-promo__bg * {
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

.budi-esf-promo .budi-esf-promo__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.budi-esf-promo .budi-esf-promo__bg::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  z-index: 1;
  background: linear-gradient(241deg, rgb(138 64 141 / 70%) 5%, rgb(94 50 106 / 90%) 25%, #322447 50%);
}

/* Every content row needs an explicit stacking context above the bg,
   otherwise the absolutely-positioned __bg (z-index:auto) paints on top
   of normal-flow content per CSS stacking rules. */
.budi-esf-promo .budi-esf-promo__lead,
.budi-esf-promo .budi-esf-promo__stats,
.budi-esf-promo .budi-esf-promo__cta,
.budi-esf-promo .budi-esf-promo__partners {
  position: relative;
  z-index: 1;
}

/* -------------------------------------------------------------------------
   2. Lead: logo lockup, badges, headline, description
   All shared classes (.wpb_single_image, .budi-headline*, .wpb_text_column)
   are scoped through .budi-esf-promo .budi-esf-promo__lead so the same
   [budi_heading] / WPBakery widgets elsewhere on the site are untouched.
   ------------------------------------------------------------------------- */
.budi-esf-promo .budi-esf-promo__lead .wpb_single_image {
  margin: 0 0 24px;
}

.budi-esf-promo .budi-esf-promo__lead .wpb_single_image img {
    padding-right: 32px;
}

.budi-esf-promo .budi-esf-promo__lead .budi-esf-promo__lead-sub {
    margin-bottom: 35px !important;
}

.budi-esf-promo .budi-esf-promo__lead .budi-esf-promo__lead-sub p {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.budi-esf-promo .budi-esf-promo__lead .budi-esf-promo__lead-sub span {
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    padding: 8px 14px;
    background-color: rgba(248, 248, 248, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 999px;
}

.budi-esf-promo .budi-esf-promo__lead .budi-esf-promo__lead-sub span:first-child {
    font-weight: 800;
    color: #322447 !important;
    background-color: #DEB1E1;
    border: 1px solid #DEB1E1;
}

.budi-esf-promo .budi-esf-promo__lead .budi-esf-promo__lead-sub span:first-child:before {
    display: none;
}

.budi-esf-promo .budi-esf-promo__lead .budi-esf-promo__lead-sub span:before {
    content: "";
    position: relative;
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 100px;
    margin-right: 10px;
    margin-bottom: 2px;
    background-color: #D39AD6;
}

.budi-esf-promo .budi-esf-promo__lead .budi-headline {
  gap: 20px; /* ASSUMPTION: gap between badge row and title */
  margin-bottom: 16px;
}

/* Badge row. Assumes .budi-headline__subtitle renders two <span> children
   (one per pill) — matches what the screenshots show, but the raw markup
   you pasted showed the subtitle as one escaped text string, so please
   confirm the live DOM actually has 2 <span> elements here; if it doesn't,
   these selectors will need to change. */
.budi-esf-promo .budi-esf-promo__lead .budi-headline__subtitle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
}

.budi-esf-promo .budi-esf-promo__lead .budi-headline__subtitle span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 100px;
  font-size: 16px;
  line-height: 19px;
  white-space: nowrap;
}

/* Pill 1 — "ESF+-Projekt" */
.budi-esf-promo .budi-esf-promo__lead .budi-headline__subtitle span:first-child {
  background: #deb1e1;
  color: #322447;
  font-weight: 800;
  letter-spacing: 0.66px;
}

/* Pill 2 — "Nur noch wenige Plätze verfügbar" */
.budi-esf-promo .budi-esf-promo__lead .budi-headline__subtitle span:last-child {
  background: rgba(248, 248, 248, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  font-weight: 600;
}

.budi-esf-promo .budi-esf-promo__lead .budi-headline__subtitle span:last-child::before {
  content: "";
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #d39ad6;
}

.budi-esf-promo .budi-esf-promo__lead .budi-headline__title {
  margin: 0;
  font-style: italic;
  text-transform: uppercase;
  font-weight: 900;
  color: #fff;
  font-size: 35px;
  line-height: normal; 
  filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.40)) !important;
}

.budi-esf-promo .budi-esf-promo__lead .budi-headline__title span {
  /* ASSUMPTION: accent color for "mittelstand." — reused the ESF+-Projekt
     pill's lavender (#deb1e1) since no explicit fill was set on this text
     node in the Figma export. Swap if you have the exact hex. */
  color: #DEB1E1 !important;
}

@media (min-width: 992px) {
  .budi-esf-promo .budi-esf-promo__lead .budi-headline__title {
    font-size: 50px;
  }
}

.budi-esf-promo .budi-esf-promo__lead .wpb_text_column p {
  margin: 16px 0 0;
  max-width: 480px;
  font-size: 16px;
  line-height: 26px;
  color: rgba(255, 255, 255, 0.8);
}

@media (min-width: 992px) {
  .budi-esf-promo .budi-esf-promo__lead .wpb_text_column p {
    max-width: 600px;
    font-size: 18px;
  }
}

/* -------------------------------------------------------------------------
   3. Stats / funding card
   Mobile: 3 stacked rows, number+label side by side, horizontal dividers.
   Desktop: 3 columns, centered, vertical dividers.
   All rules scoped through .budi-esf-promo .budi-esf-promo__stats so the
   [budi_content_box] shortcode used elsewhere on the site is unaffected.
   ------------------------------------------------------------------------- */
.budi-esf-promo .budi-esf-promo__stats .wpb_wrapper {
  display: flex;
  flex-direction: column;
  margin-top: 0;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 14px;
  background: linear-gradient(220deg, rgb(255 255 255 / 10%) 0%, rgb(138 64 141 / 10%) 100%);
  box-shadow: 0 4px 20px 0 rgb(60 0 100 / 18%);
}

@media (min-width: 992px) {
  .budi-esf-promo .budi-esf-promo__stats .wpb_wrapper {
    flex-direction: row;
    max-width: 835px;
  }
}

.budi-esf-promo .budi-esf-promo__stats .budi-content-box__wrapper {
    display: flex;
    flex: 1;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 0;
    margin: 0 20px;
}

.budi-esf-promo .budi-esf-promo__stats .budi-content-box__wrapper .budi-content-box__content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.budi-esf-promo .budi-esf-promo__stats .budi-content-box__wrapper:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

@media (min-width: 992px) {
  .budi-esf-promo .budi-esf-promo__stats .budi-content-box__wrapper {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: center;
    padding: 0 26px;
    margin: 19px 0;
  }

  .budi-esf-promo .budi-esf-promo__stats .budi-content-box__wrapper:not(:last-child) {
    border-bottom: none;
    border-right: 1px solid rgba(255, 255, 255, 0.5);
  }

    .budi-esf-promo .budi-esf-promo__stats .budi-content-box__wrapper .budi-content-box__content {
        display: flex;
        flex-direction: column;
        gap: 0;
        align-items: flex-start;
    }
}

.budi-esf-promo .budi-esf-promo__stats .budi-content-box__title {
  margin: 0;
  font-style: italic;
  font-weight: 900;
  color: #fff;
  font-size: 28px; /* ASSUMPTION: mobile size, Figma gave 38px/35px line-height for desktop */
  line-height: 1;
  filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.40)) !important;
}

@media (min-width: 992px) {
  .budi-esf-promo .budi-esf-promo__stats .budi-content-box__title {
    font-size: 38px;
    line-height: 35px;
    margin-bottom: 6px;
    text-align: left;
  }
}

.budi-esf-promo .budi-esf-promo__stats .budi-content-box__description p {
  margin: 0;
  font-size: 16px; /* ASSUMPTION: mobile size, Figma gave 18px for desktop */
  color: #fff;
}

@media (min-width: 992px) {
  .budi-esf-promo .budi-esf-promo__stats .budi-content-box__description p {
    font-size: 18px;
  }
}

/* -------------------------------------------------------------------------
   4. CTA — left as-is per request, no rules added here.
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   5. Partners footer
   Scoped through .budi-esf-promo .budi-esf-promo__partners so the shared
   .wpb_text_column / .wpb_image_grid_ul (WPBakery gallery) styling doesn't
   bleed into other pages using the same shortcodes.
   ------------------------------------------------------------------------- */


.budi-esf-promo .budi-esf-promo__partners > .wpb_column > .vc_column-inner > .wpb_wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.budi-esf-promo .budi-esf-promo__partners {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.15); /* ASSUMPTION: divider color/weight */
}

.budi-esf-promo .budi-esf-promo__partners .wpb_text_column {
    margin-bottom: 0px !important;
}

.budi-esf-promo .budi-esf-promo__partners .wpb_text_column p {
  margin: 0 0 16px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1.68px;
  color: rgba(255, 255, 255, 0.66);
  max-width: 450px;
  padding-right: 20px;
  margin-bottom: 0px !important;
  text-transform: uppercase;
}

/* WPBakery's "image_grid" gallery lays the 2 logos out with Isotope,
   which injects absolute inline positions via JS (see the inline
   style="position:absolute;top:...;left:..." on the <li> in the markup
   you pasted). !important is needed here specifically to override those
   JS-set inline styles — there's no other reliable way to force a static
   flex row without swapping the gallery type in the shortcode itself.
   Scoped to .budi-esf-promo__partners only, so other image_grid galleries
   on the site keep their normal Isotope layout. */


.budi-esf-promo .budi-esf-promo__partners .wpb_gallery {
    margin-bottom: 0 !important;
}

.budi-esf-promo .budi-esf-promo__partners .wpb_image_grid_ul {
  position: relative !important;
  height: auto !important;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 12px 20px;
  list-style: none;
  background: #fff;
  border-radius: 10px;
}

.budi-esf-promo .budi-esf-promo__partners .wpb_image_grid_ul li.isotope-item {
  position: static !important;
  top: auto !important;
  left: auto !important;
}

.budi-esf-promo .budi-esf-promo__partners .wpb_image_grid_ul img {
  display: block;
  width: auto;
  height: 28px; /* ASSUMPTION: logo height inside the white bar */
}

@media (max-width: 992px) {
    .budi-esf-promo .budi-esf-promo__partners > .wpb_column > .vc_column-inner > .wpb_wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}

/* -------------------------------------------------------------------------
   6. Close button
   The close button sits OUTSIDE the .budi-esf-promo markup (it's a sibling
   of .pum-content inside Popup Maker's own container), so it can't be
   scoped with a .budi-esf-promo ancestor selector. Instead it's scoped to
   this popup's own container ID (#popmake-2583) rather than the shared
   .pum-theme-569 class, so it won't touch the close button on any other
   Popup Maker popup on the site — even ones using the same theme.
   NOTE: if this popup is ever deleted and recreated in wp-admin, Popup
   Maker will assign it a new ID and this selector will need updating.
   ------------------------------------------------------------------------- */
#popmake-2583.pum-container {
  position: relative;
  margin-top: 80px !important;
  margin-bottom: 60px !important;
}

#popmake-2583 .pum-close.popmake-close {
  position: absolute;
  top: 50px !important;
  right: 50px !important;
  width: 20px !important;
  height: 20px !important;
  padding: 0 !important;
  border: 0 !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M11.8323%209.99995L19.6199%202.21211C20.1267%201.70554%2020.1267%200.886492%2019.6199%200.379925C19.1133%20-0.126642%2018.2943%20-0.126642%2017.7877%200.379925L9.99989%208.16777L2.21229%200.379925C1.70548%20-0.126642%200.88667%20-0.126642%200.380103%200.379925C-0.126701%200.886492%20-0.126701%201.70554%200.380103%202.21211L8.16771%209.99995L0.380103%2017.7878C-0.126701%2018.2944%20-0.126701%2019.1134%200.380103%2019.62C0.632556%2019.8727%200.964494%2019.9996%201.29619%2019.9996C1.62789%2019.9996%201.9596%2019.8727%202.21229%2019.62L9.99989%2011.8321L17.7877%2019.62C18.0404%2019.8727%2018.3721%2019.9996%2018.7038%2019.9996C19.0355%2019.9996%2019.3672%2019.8727%2019.6199%2019.62C20.1267%2019.1134%2020.1267%2018.2944%2019.6199%2017.7878L11.8323%209.99995Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E") !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  cursor: pointer !important;
  z-index: 5 !important;
}

#popmake-2583 .pum-close.popmake-close::before {
    display: none !important;
}

@media (max-width: 991px) {
    #popmake-2583.pum-container {
        top: unset !important;
        transform: unset !important;
    }

    #popmake-2583 .pum-close.popmake-close {
        top: 20px !important;
        right: 20px !important;
    }
}

.budi-esf-promo__cta div.budi-button-container a.btn {
    font-size: 16px !important;
}

@media (min-width: 992px) {
  .budi-esf-promo__cta div.budi-button-container a.btn {
    font-size: 18px !important;
  }
}