.elementor-7137 .elementor-element.elementor-element-5e0124d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7137 .elementor-element.elementor-element-d55e01f{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}/* Start custom CSS for html, class: .elementor-element-d55e01f *//* =========================================================
   WEBFIRE – EMPTY STATE (Dashboard Button Match) ✅ FIXED
   - 100% responsive
   - Buttons on mobile NOT full width
   - CTA never spans whole screen unless you want it
========================================================= */

:root{
  --wf-text: rgba(255,255,255,.92);
  --wf-muted: rgba(255,255,255,.72);
  --wf-faint: rgba(255,255,255,.56);

  --wf-line: rgba(255,255,255,.10);
  --wf-blur: 18px;
  --wf-radius: 22px;

  --wf-shadow-soft: 0 14px 34px rgba(0,0,0,.42);

  /* Dashboard-konform */
  --wf-accent-grad: linear-gradient(120deg,#f97316,#fb923c,#fed7aa);
  --wf-btn-dark: #0b1120;

  /* Button sizing */
  --wf-btn-pad-y: .52rem;
  --wf-btn-pad-x: 1.10rem;
}

/* Wrapper */
#wfEmpty{
  max-width: 980px;
  margin: clamp(40px, 6vw, 96px) auto;
  padding: 0 clamp(14px, 3vw, 22px);
  font-family: "Sora", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--wf-text);
}

/* Card */
#wfEmpty .wf-empty__wrap{
  position: relative;
  overflow: hidden;

  border-radius: var(--wf-radius);
  border: 1px solid var(--wf-line);

  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
  backdrop-filter: blur(var(--wf-blur));
  -webkit-backdrop-filter: blur(var(--wf-blur));

  padding: clamp(18px, 3.4vw, 40px);
  box-shadow: var(--wf-shadow-soft);
}

#wfEmpty .wf-empty__wrap::before{
  content:"";
  position:absolute;
  inset:-160px -80px -120px -80px;
  pointer-events:none;
  background:
    radial-gradient(560px 280px at 15% 0%, rgba(99,102,241,.18), transparent 62%),
    radial-gradient(560px 280px at 85% 10%, rgba(249,115,22,.18), transparent 64%),
    radial-gradient(620px 320px at 40% 115%, rgba(34,197,94,.10), transparent 60%);
  opacity:.95;
  filter: blur(2px);
}

#wfEmpty .wf-empty__wrap > *{ position:relative; z-index:1; }

/* Badge */
#wfEmpty .wf-empty__badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  color: rgba(255,255,255,.88);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .01em;
}

#wfEmpty .wf-empty__dot{
  width:10px;
  height:10px;
  border-radius: 999px;
  background: rgba(249,115,22,.95);
  box-shadow: 0 0 0 5px rgba(249,115,22,.14);
}

/* Text */
#wfEmpty .wf-empty__title{
  margin: 16px 0 8px;
  font-size: clamp(22px, 5vw, 38px);
  font-weight: 950;
  letter-spacing: -.02em;
  line-height: 1.08;
}

#wfEmpty .wf-empty__sub{
  margin: 0;
  max-width: 62ch;
  color: var(--wf-muted);
  font-size: clamp(14px, 2.6vw, 15px);
  line-height: 1.55;
}

/* Actions */
#wfEmpty .wf-empty__actions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 22px;
}

/* =========================================================
   ✅ Buttons: Dashboard Match (scoped)
========================================================= */
#wfEmpty .wf-btn-primary,
#wfEmpty .wf-btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding: var(--wf-btn-pad-y) var(--wf-btn-pad-x);
  border-radius: 999px;

  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;

  text-decoration: none !important;
  line-height: 1;

  border: 1px solid rgba(255,255,255,.14);
  transition: filter .18s ease, transform .18s ease, box-shadow .18s ease, background .18s ease;
  -webkit-tap-highlight-color: transparent;

  /* ✅ prevents theme from stretching anchors */
  width: auto;
  max-width: 100%;
}

/* Primary */
#wfEmpty .wf-btn-primary{
  background: var(--wf-accent-grad);
  color: var(--wf-btn-dark) !important;
  box-shadow:
    0 10px 24px rgba(0,0,0,.35),
    inset 0 0 1.2em -0.6em rgba(15,23,42,.85);
}
#wfEmpty .wf-btn-primary:hover{
  filter: brightness(1.03);
  transform: translateY(-1px);
}
#wfEmpty .wf-btn-primary:active{
  transform: translateY(0px);
  filter: brightness(1.01);
}

/* Secondary */
#wfEmpty .wf-btn-secondary{
  background: rgba(15,23,42,.55);
  border: 1px solid rgba(148,163,184,.32);
  color: rgba(249,250,251,.92) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04);
}
#wfEmpty .wf-btn-secondary:hover{
  background: rgba(15,23,42,.75);
  border-color: rgba(148,163,184,.45);
  transform: translateY(-1px);
}

/* Hard lock link states */
#wfEmpty .wf-btn-primary:visited,
#wfEmpty .wf-btn-primary:hover,
#wfEmpty .wf-btn-primary:focus,
#wfEmpty .wf-btn-primary:active{
  color: var(--wf-btn-dark) !important;
}
#wfEmpty .wf-btn-secondary:visited,
#wfEmpty .wf-btn-secondary:hover,
#wfEmpty .wf-btn-secondary:focus,
#wfEmpty .wf-btn-secondary:active{
  color: rgba(249,250,251,.92) !important;
}

/* Focus */
#wfEmpty .wf-btn-primary:focus-visible,
#wfEmpty .wf-btn-secondary:focus-visible{
  outline: 2px solid rgba(249,115,22,.55);
  outline-offset: 4px;
}

/* Meta pills */
#wfEmpty .wf-empty__meta{
  margin-top: 18px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

#wfEmpty .wf-empty__pill{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  font-size: 13px;
  white-space: nowrap;
}

#wfEmpty .wf-empty__k{
  opacity: .65;
  font-weight: 900;
  letter-spacing: .02em;
}

#wfEmpty .wf-empty__v{
  font-weight: 950;
  opacity: .95;
}

/* Mail link */
#wfEmpty .wf-empty__link{
  color: rgba(249,250,251,.92) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(249,250,251,.55);
  background: transparent !important;
}
#wfEmpty .wf-empty__link:hover{
  text-decoration-color: rgba(249,250,251,.85);
  filter: brightness(1.03);
  background: transparent !important;
}

/* =========================================================
   ✅ Responsive (no full-width CTA)
========================================================= */
@media (max-width: 640px){
  /* Title spacing tighter */
  #wfEmpty .wf-empty__title{ margin-top: 14px; }

  /* Actions: wrap + center, but never full width */
  #wfEmpty .wf-empty__actions{
    gap: 10px;
    justify-content: flex-start;
  }

  /* ✅ Buttons stay auto width; optional max width so they don't look huge */
  #wfEmpty .wf-btn-primary,
  #wfEmpty .wf-btn-secondary{
    padding: .64rem 1.12rem;
    max-width: 320px;   /* stops “covers full screen” feel */
  }

  /* Meta pills stack */
  #wfEmpty .wf-empty__meta{
    flex-direction: column;
    align-items: stretch;
  }
  #wfEmpty .wf-empty__pill{
    width: 100%;
    justify-content: space-between;
  }
}

/* =========================================================
   FIX: Buttons gleiche Höhe / gleiche Luft / gleiche Linie
========================================================= */

/* Actions sauber ausrichten */
#wfEmpty .wf-empty__actions{
  align-items: center;          /* gleiche Höhe im Row */
}

/* Beide Buttons exakt gleich hoch + gleiches Innenleben */
#wfEmpty .wf-btn-primary,
#wfEmpty .wf-btn-secondary{
  min-height: 44px;             /* ✅ gleiche Button-Höhe */
  padding: 0 .95rem;            /* ✅ gleiche horizontale Luft */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Falls Theme irgendwo margins setzt */
#wfEmpty .wf-empty__actions a{
  margin: 0 !important;
}

/* Secondary bekommt oft “optisch weniger Luft” durch Border/Background:
   das gleicht es etwas an */
#wfEmpty .wf-btn-secondary{
  box-shadow:
    0 10px 22px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.04);
}

/* =========================================================
   FIX: Mobile Support-Mail zweizeilig (Support oben, Mail darunter)
========================================================= */

@media (max-width: 560px){

  /* Pill allgemein: linksbündig, kein “side by side” */
  #wfEmpty .wf-empty__pill{
    white-space: normal;
    align-items: flex-start;
  }

  /* Nur die Support-Pill (die mit der Mail) zweizeilig machen:
     (funktioniert, weil du in der Mail einen <a.wf-empty__link> hast) */
  #wfEmpty .wf-empty__pill:has(.wf-empty__link){
    flex-direction: column;
    gap: 6px;
  }

  /* Label + Value als Zeilen behandeln */
  #wfEmpty .wf-empty__pill:has(.wf-empty__link) .wf-empty__k{
    display: block;
  }

  #wfEmpty .wf-empty__pill:has(.wf-empty__link) .wf-empty__link{
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;     /* ✅ bricht lange Mail sauber */
    word-break: break-word;
  }
}/* End custom CSS */