/* ---------------------------------------------------
 *  Spendenaktion-Störer
 *  Sticky Pop-up-Button (Default-Icon -> Active-Störer)
 * --------------------------------------------------- */

.sfc-stoerer {
    position: fixed;
    z-index: 99990;
    bottom: 24px;
    left: 24px;
    line-height: 0;
    /* nicht klickbare Bereiche durchlassen */
    pointer-events: none;
}

.sfc-stoerer--bottom-right {
    left: auto;
    right: 24px;
}

.sfc-stoerer__icon,
.sfc-stoerer__active {
    pointer-events: auto;
}

/* ---------- Default-Status: Icon ---------- */
.sfc-stoerer__icon {
    display: block;
    margin: 0;
    padding: 0;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    cursor: pointer;
    line-height: 0;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .25));
    transition: transform .2s ease;
}

.sfc-stoerer__icon:hover,
.sfc-stoerer__icon:focus,
.sfc-stoerer__icon:focus-visible,
.sfc-stoerer__icon:active {
    background: none !important;
    box-shadow: none !important;
    transform: scale(1.08);
    outline: none;
}

.sfc-stoerer__icon svg {
    display: block;
    width: 64px;
    height: 64px;
}

/* dezentes Wackeln, um auf das Icon aufmerksam zu machen */
.sfc-stoerer__icon {
    animation: sfc-stoerer-nudge 4s ease-in-out 2s infinite;
}

@keyframes sfc-stoerer-nudge {
    0%, 88%, 100% { transform: rotate(0); }
    91%           { transform: rotate(-7deg); }
    94%           { transform: rotate(7deg); }
    97%           { transform: rotate(-4deg); }
}

/* ---------- Active-Status: Störer ---------- */
.sfc-stoerer__active {
    position: relative;
    display: none;
    line-height: 0;
    transform-origin: bottom left;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .28));
}

.sfc-stoerer--bottom-right .sfc-stoerer__active {
    transform-origin: bottom right;
}

.sfc-stoerer__link {
    display: block;
    cursor: pointer;
    line-height: 0;
    transition: transform .2s ease;
}

.sfc-stoerer__link:hover {
    transform: scale(1.04);
}

.sfc-stoerer__link svg {
    display: block;
    width: 150px;
    height: 150px;
}

/* Schließen-Button = der echte X-Achteck-Block aus der SVG, oben rechts deckungsgleich */
.sfc-stoerer__close {
    position: absolute;
    top: 9.5%;
    left: 80.5%;
    width: 19%;
    height: 19%;
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    cursor: pointer;
    line-height: 0;
    z-index: 2;
    transition: transform .15s ease;
}

.sfc-stoerer__close svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.sfc-stoerer__close-bg {
    transition: fill .15s ease;
}

.sfc-stoerer__close-x {
    transition: stroke .15s ease;
}

/* Hover direkt auf den SVG-Formen: Achteck füllt sich rot, X wird hell */
.sfc-stoerer__close:hover,
.sfc-stoerer__close:focus,
.sfc-stoerer__close:focus-visible,
.sfc-stoerer__close:active {
    background: none !important;
    box-shadow: none !important;
    transform: scale(1.12);
    outline: none;
}

.sfc-stoerer__close:hover .sfc-stoerer__close-bg,
.sfc-stoerer__close:focus-visible .sfc-stoerer__close-bg {
    fill: #B01632;
}

.sfc-stoerer__close:hover .sfc-stoerer__close-x,
.sfc-stoerer__close:focus-visible .sfc-stoerer__close-x {
    stroke: #F5EEE9;
}

/* ---------- Umschalten der Zustände ---------- */
.sfc-stoerer.is-open .sfc-stoerer__icon {
    display: none;
}

.sfc-stoerer.is-open .sfc-stoerer__active {
    display: block;
    animation: sfc-stoerer-pop .6s cubic-bezier(.18, .89, .32, 1.28) both;
}

/* bouncy Aufpopp-Animation */
@keyframes sfc-stoerer-pop {
    0%   { transform: scale(0);    opacity: 0; }
    55%  { transform: scale(1.12); opacity: 1; }
    75%  { transform: scale(.94); }
    90%  { transform: scale(1.04); }
    100% { transform: scale(1); }
}

/* ---------- Einklappen ---------- */
/* Während des Einklappens bleibt der Störer sichtbar und schrumpft in die Ecke */
.sfc-stoerer.is-closing .sfc-stoerer__icon {
    display: none;
}

.sfc-stoerer.is-closing .sfc-stoerer__active {
    display: block;
    pointer-events: none;
    animation: sfc-stoerer-collapse .38s cubic-bezier(.5, 0, .75, .2) both;
}

/* kurze Vorholung, dann sauber in die Ecke schrumpfen */
@keyframes sfc-stoerer-collapse {
    0%   { transform: scale(1);    opacity: 1; }
    20%  { transform: scale(1.06); opacity: 1; }
    100% { transform: scale(0);    opacity: 0; }
}

/* Icon poppt nach dem Einklappen kurz zurück ins Bild */
.sfc-stoerer.is-reopen .sfc-stoerer__icon {
    animation: sfc-stoerer-icon-in .42s cubic-bezier(.18, .89, .32, 1.28) both;
}

@keyframes sfc-stoerer-icon-in {
    0%   { transform: scale(0); }
    60%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
    .sfc-stoerer {
        bottom: 16px;
        left: 16px;
    }
    .sfc-stoerer--bottom-right {
        left: auto;
        right: 16px;
    }
    .sfc-stoerer__icon svg {
        width: 54px;
        height: 54px;
    }
    .sfc-stoerer__link svg {
        width: 124px;
        height: 124px;
    }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .sfc-stoerer__icon {
        animation: none;
    }
    .sfc-stoerer.is-open .sfc-stoerer__active {
        animation: sfc-stoerer-fade .25s ease both;
    }
    @keyframes sfc-stoerer-fade {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
    .sfc-stoerer.is-closing .sfc-stoerer__active {
        animation: sfc-stoerer-fade-out .2s ease both;
    }
    @keyframes sfc-stoerer-fade-out {
        from { opacity: 1; }
        to   { opacity: 0; }
    }
    .sfc-stoerer.is-reopen .sfc-stoerer__icon {
        animation: none;
    }
}