/* ========================================================================== */
/* 🟢 STEUERUNG & VERWALTUNG                                                  */
/* BLOCK-ID:          CSS-COUPON-BANNER-20                                    */
/* TITEL:             Promo Banner Button | Eigenständiges Pillen-Design      */
/* WICHTIG:           TEIL 1/2 (CSS) – Gehört zwingend zu Teil 2/2:          */
/*                    PHP-COUPON-01 in inc/promo-system/promo-system.php      */
/* BESCHREIBUNG:      Definiert Form, Rahmen, Paddings, globale Typografie,   */
/*                    Hover (nur Maus) sowie den 5-Sekunden-Status            */
/*                    (.is-copied) ohne Touchscreen Sticky-Hover-Effekt.      */
/* KLASSE:            .promo-banner-btn-pill, .is-copied                      */
/* TYPO-REFERENZ ID:  223ba38                                                 */
/* FARB-REFERENZ ID:  14ef391 (BG_Cr_dl / Hintergrund & Rand normal)          */
/*                    57c8da2 (SI_Cr_hl / Schriftfarbe normal)                */
/*                    54698a5 (Fh_Cl_Acc1 / Hintergrund & Rand Gelb)          */
/*                    796c53c (SI_Cr_dl / Schriftfarbe Schwarz)               */
/* ========================================================================== */

/* 1. Grundzustand des Promo-Buttons (Schwarz / Weiß) */
body .promo-banner-btn-pill,
body a.promo-banner-btn-pill,
body button.promo-banner-btn-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    cursor: pointer !important;
    line-height: 1.2 !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;

    /* 🟠 Typografie (Global Elementor 223ba38) */
    font-family: var(--e-global-typography-223ba38-font-family), Sans-serif !important;
    font-size: var(--e-global-typography-223ba38-font-size) !important;
    font-weight: var(--e-global-typography-223ba38-font-weight) !important;

    /* 🟠 Abmessungen, Form & Innenabstände */
    border-radius: 999rem !important;
    border: 1px solid var(--e-global-color-14ef391) !important;
    padding-top: 12px !important;
    padding-right: 24px !important;
    padding-bottom: 12px !important;
    padding-left: 24px !important;

    /* 🟠 Farben Normalzustand */
    background-color: var(--e-global-color-14ef391) !important;
    color: var(--e-global-color-57c8da2) !important;

    /* 🟠 Weicher Übergang */
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease !important;
}

/* Vererbung an innenliegende Elemente (Spans, Icons, Texte) */
body .promo-banner-btn-pill *,
body .promo-banner-btn-pill span,
body .promo-banner-btn-pill p {
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}

/* 2. Hover nur bei echten Zeigegeräten (verhindert Touch Sticky-Hover) */
@media (hover: hover) and (pointer: fine) {
    body .promo-banner-btn-pill:hover,
    body a.promo-banner-btn-pill:hover,
    body button.promo-banner-btn-pill:hover {
        background-color: var(--e-global-color-54698a5) !important;
        border-color: var(--e-global-color-54698a5) !important;
        color: var(--e-global-color-796c53c) !important;
        transform: translateY(-1px);
    }
}

/* 3. Aktiver Klick-Status (Gelb / Schwarz für exakt 5 Sekunden) */
body .promo-banner-btn-pill.is-copied,
body a.promo-banner-btn-pill.is-copied,
body button.promo-banner-btn-pill.is-copied {
    /* 🟠 Farben während des 5-Sekunden-Status */
    background-color: var(--e-global-color-54698a5) !important;
    border-color: var(--e-global-color-54698a5) !important;
    color: var(--e-global-color-796c53c) !important;
    transform: translateY(-1px);
}

/* 🛑 ⛔ [STOP] ENDE DIESES ABSCHNITTS: Promo Banner Button Pill-Design / CSS-COUPON-BANNER-20 ⛔ 🛑 */