/* --- HERO LOGO & RINGE MOUNT --- */
.hero-logo-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 550px;
    height: 550px;
    margin: 50px auto 30px auto;
    z-index: 20;
}

.hero-ring-element {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 2px solid transparent; 
    border-radius: 50%;
    width: var(--sz);
    height: var(--sz);
    opacity: var(--op, 0.9) !important; 
    background: linear-gradient(90deg, #ff0000, #00fbff, #007bff, #ff00c1, #ff0000);
    background-size: 200% auto;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: heroRotateRing var(--d) linear infinite, heroBorderFlow 3s linear infinite;
    box-shadow: 0 0 30px rgba(0, 251, 255, 0.6);
}

.hero-ring-dashed {
    border-style: dashed !important;
    background: none !important;
    border-color: #00fbff !important;
    -webkit-mask: none !important;
}

.hero-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 400px;
    width: 100%; 
    height: auto;
    margin: 0 !important;
    filter: drop-shadow(0 15px 35px rgba(0,0,0,0.7));
    z-index: 25;
    animation: logoPulse 6s ease-in-out infinite;
}

/* --- ANIMATIONEN --- */
@keyframes logoPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.15); }
}

@keyframes heroRotateRing {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes heroBorderFlow {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}