/* ==========================================
   Gemeindepflege-Animation: Stapel-Effekt
   Texte fallen nacheinander von oben
   und stapeln sich von unten nach oben.
   Letzter Text (gp10) ist der Link oben.
   ========================================== */

.gp-animation-wrapper.gp-petition {
    position: relative;
    display: flex;
    flex-direction: column-reverse; /* letzter Text (gp10) oben im Stapel */
    justify-content: flex-end;
    gap: 0.4rem;
    padding: 1.5rem;
    min-height: 260px;              /* je nach Fontgröße anpassen */
    background: #3b03b0;
    color: #fff;
    border-radius: 8px;
    overflow: hidden;
}

/* Hintergrund bleibt hinten, egal wo er im Flex-Flow sitzt */
.gp-animation-wrapper.gp-petition .gp-animation-bg {
    position: absolute;
    inset: 0;
    opacity: 0.15;
    background: radial-gradient(circle at 0 0, #ffffff 0, transparent 60%),
                radial-gradient(circle at 100% 100%, #ffdd88 0, transparent 60%);
    z-index: 0;
}

/* Grundstil aller Texte im Stapel */
.gp-animation-wrapper.gp-petition .gp-text {
    position: relative;
    z-index: 1;
    opacity: 0;
    transform: translateY(-40px);        /* Start: etwas oberhalb */
    animation-name: gpDropIn;
    animation-duration: 4s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;       /* nach der Animation sichtbar bleiben */
    text-align: center;
    font-size: 1.1rem;
    line-height: 1.3;
}

/* Link oben: optisch wie Button hervorheben */
.gp-animation-wrapper.gp-petition .gp10 {
    font-weight: 700;
    text-decoration: none;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    border: 2px solid #fff;
    display: inline-flex;
    align-self: center;                  /* mittig im Container */
    justify-content: center;
    align-items: center;
	color: #fff011;
}

.gp-animation-wrapper.gp-petition .gp10:hover {
    background: #fff;
    color: #3b03b0;
}

/* Keyframes: von oben „fallen“ und einblenden */
@keyframes gpDropIn {
    0% {
        opacity: 0;
        transform: translateY(-40px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Zeitliche Staffelung der einzelnen Zeilen
   — gp1 zuerst (ganz unten), gp10 zuletzt (ganz oben) */

.gp-animation-wrapper.gp-petition .gp1  { animation-delay: 0.0s; }
.gp-animation-wrapper.gp-petition .gp2  { animation-delay: 2.0s; }
.gp-animation-wrapper.gp-petition .gp3  { animation-delay: 4.0s; }
.gp-animation-wrapper.gp-petition .gp4  { animation-delay: 6.0s; }
.gp-animation-wrapper.gp-petition .gp5  { animation-delay: 8.0s; }
.gp-animation-wrapper.gp-petition .gp6  { animation-delay: 10.0s; }
.gp-animation-wrapper.gp-petition .gp7  { animation-delay: 12.0s; }
.gp-animation-wrapper.gp-petition .gp8  { animation-delay: 14.0s; }
.gp-animation-wrapper.gp-petition .gp9  { animation-delay: 16.0s; }
.gp-animation-wrapper.gp-petition .gp10 { animation-delay: 18.0s; }

/* Responsive Feinheiten für kleinere Bildschirme */
@media (max-width: 768px) {
    .gp-animation-wrapper.gp-petition {
        min-height: 220px;
        padding: 1rem;
    }
    .gp-animation-wrapper.gp-petition .gp-text {
        font-size: 1rem;
    }
}