/* ==========================================================
   Webdesign Berlin – Funnel-CTA-Button
   Frontend Styles (Elementor-CSS-Variablen als Standard,
   Fallback auf die tatsaechlichen Marken-Farben von
   webdesign-berlin.org, ueber Widget-Style-Controls
   ueberschreibbar)
   ========================================================== */

.wdbfunnelcta-widget {
    --wdbfunnelcta-primary: var(--e-global-color-primary, #680f00);
    --wdbfunnelcta-text-on: #ffffff;
    --wdbfunnelcta-offset: 24px;
    font-family: var(--e-global-typography-primary-font-family, inherit);
    box-sizing: border-box;
}

.wdbfunnelcta-widget *,
.wdbfunnelcta-widget *::before,
.wdbfunnelcta-widget *::after { box-sizing: border-box; }

.wdbfunnelcta-inner {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
}

/* ---------- Inline-Modus ---------- */
.wdbfunnelcta-inline { display: block; text-align: center; }

/* ---------- Schwebender Modus ---------- */
.wdbfunnelcta-floating {
    position: fixed;
    bottom: var(--wdbfunnelcta-offset, 24px);
    z-index: 9999;
}

.wdbfunnelcta-floating.wdbfunnelcta-pos-right { right: var(--wdbfunnelcta-offset, 24px); }
.wdbfunnelcta-floating.wdbfunnelcta-pos-left  { left:  var(--wdbfunnelcta-offset, 24px); }

.wdbfunnelcta-floating .wdbfunnelcta-inner {
    background: #fff;
    padding: 14px 16px;
    border-radius: 18px;
    box-shadow: 0 10px 34px rgba(0, 0, 0, .18);
}

@media (max-width: 767px) {
    .wdbfunnelcta-hide-mobile { display: none !important; }
    .wdbfunnelcta-floating { bottom: 14px; }
    .wdbfunnelcta-floating.wdbfunnelcta-pos-right { right: 14px; }
    .wdbfunnelcta-floating.wdbfunnelcta-pos-left  { left: 14px; }
}

/* ---------- Schließen-Kreuz (nur schwebender Modus) ---------- */
.wdbfunnelcta-dismiss {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    color: #555;
    border: 1px solid rgba(0, 0, 0, .12);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
    font-size: 15px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.wdbfunnelcta-dismiss:hover { background: #f5f5f5; color: #222; }

/* ---------- Label / Badge ---------- */
.wdbfunnelcta-badge {
    display: inline-block;
    background: #f6ece9;
    color: var(--wdbfunnelcta-primary);
    font-size: .78rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 50px;
    white-space: nowrap;
}

/* ---------- Button ---------- */
.wdbfunnelcta-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--wdbfunnelcta-primary);
    color: var(--wdbfunnelcta-text-on);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    padding: 16px 32px;
    border-radius: 50px;
    overflow: visible;
    isolation: isolate;
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}

.wdbfunnelcta-button:hover { color: var(--wdbfunnelcta-text-on); box-shadow: 0 12px 30px rgba(0, 0, 0, .2); }

.wdbfunnelcta-button-text,
.wdbfunnelcta-icon {
    position: relative;
    z-index: 1;
}

.wdbfunnelcta-icon { display: inline-flex; align-items: center; }
.wdbfunnelcta-icon svg { width: 1em; height: 1em; fill: currentColor; }

/* ---------- Puls-Ring ---------- */
.wdbfunnelcta-pulse-ring {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: var(--wdbfunnelcta-primary);
    animation: wdbfunnelcta-pulse 2.4s ease-out infinite;
    pointer-events: none;
}

@keyframes wdbfunnelcta-pulse {
    0%   { transform: scale(1);    opacity: .55; }
    70%  { transform: scale(1.55); opacity: 0; }
    100% { transform: scale(1.55); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .wdbfunnelcta-pulse-ring { animation: none; display: none; }
}