.secret-passage {
    position: relative;
    display: inline-block;
}

.secret-passage .sparkles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
}

/* Vier Sternchen an verschiedenen Positionen */
.secret-passage .sparkles::before,
.secret-passage .sparkles::after {
    position: absolute;
    font-size: 1rem;
    color: #ffd700;
    opacity: 0;
    text-shadow:
            0 0 4px #fff,
            0 0 8px #ffd700,
            0 0 12px #ffaa00;
    animation: sparkle 6s ease-in-out infinite;
}

.secret-passage .sparkles::before {
    content: '✦';
    top: 10%;
    right: 12%;
    animation-delay: 0s;
}

.secret-passage .sparkles::after {
    content: '✧';
    bottom: 15%;
    left: 10%;
    animation-delay: 1s;
}

/* Zwei weitere Sternchen über das Parent-Element */
.secret-passage::before,
.secret-passage::after {
    position: absolute;
    font-size: 0.9rem;
    color: #fffacd;
    opacity: 0;
    pointer-events: none;
    text-shadow:
            0 0 3px #fff,
            0 0 6px #ffd700;
    animation: sparkle 6s ease-in-out infinite;
    z-index: 10;
}

.secret-passage::before {
    content: '✦';
    top: 45%;
    right: 20%;
    animation-delay: 2s;
}

.secret-passage::after {
    content: '✧';
    top: 30%;
    left: 18%;
    animation-delay: 3s;
}

/* 6s Zyklus: 4s Sternchen + 2s Pause */
@keyframes sparkle {
    0%, 100% {
        opacity: 0;
        transform: scale(0.5) rotate(0deg);
    }
    3% {
        opacity: 0;
    }
    7% {
        opacity: 1;
        transform: scale(1.2) rotate(15deg);
    }
    10% {
        opacity: 0.8;
        transform: scale(1) rotate(-10deg);
    }
    13% {
        opacity: 1;
        transform: scale(1.3) rotate(5deg);
    }
    17% {
        opacity: 0;
        transform: scale(0.8) rotate(0deg);
    }
    20%, 100% {
        opacity: 0;
    }
}