.rfc-quantum-wrapper {
    position: fixed;
    right: 15px;
    top: 134px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 60px;
    opacity: 0;
    transform: translateX(150px) rotate(20deg);
    animation: rfc-widget-swipe 1.2s cubic-bezier(0.23, 1, 0.32, 1) forwards;
    animation-delay: 0.6s;
}

@keyframes rfc-widget-swipe {
    to {
        opacity: 1;
        transform: translateX(0) rotate(0deg);
    }
}

.rfc-quantum-core {
    width: 25px;
    height: 25px;
    background: var(--neon);
    border-radius: 50%;
    cursor: pointer;
    z-index: 1010;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
}

.rfc-quantum-pulse {
    position: absolute;
    width: 44px;
    height: 44px;
    pointer-events: none;
}

    .rfc-quantum-pulse::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 2.5px dotted var(--neon);
        opacity: 0.8;
        animation: rfc-orbital-rotate 5s linear infinite;
    }

    .rfc-quantum-pulse::after {
        content: '';
        position: absolute;
        inset: 5px;
        border-radius: 50%;
        border: 2px solid var(--neon);
        opacity: 0.2;
        animation: rfc-orbital-rotate 4s linear infinite reverse;
    }

.rfc-energy-rail {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 15px 0;
    margin-top: 5px;
    pointer-events: none;
    z-index: 1000;
}

.rfc-energy-node {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    opacity: 0;
    position: relative;
    transform: translateY(-50px) scale(0);
    transition: transform 0.5s cubic-bezier(0.75, 0, 0.175, 1), opacity 0.4s ease-in, scale 0.4s cubic-bezier(0.75, 0, 0.175, 1);
    display: flex;
    justify-content: center;
    align-items: center;
}


@media (hover: hover) and (pointer: fine) {
    .rfc-quantum-wrapper:hover .rfc-energy-node {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: all;
        transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.3), opacity 0.2s ease-out, scale 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.2);
    }

    .rfc-quantum-wrapper:hover .rfc-energy-rail {
        pointer-events: all !important;
    }
}


.rfc-quantum-wrapper.rfc-touch-open .rfc-energy-node {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.3), opacity 0.2s ease-out, scale 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.2);
}

.rfc-quantum-wrapper.rfc-touch-open .rfc-energy-rail {
    pointer-events: all !important;
}

.rfc-energy-node::after {
    content: '';
    position: absolute;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid transparent;
    border-top: 1.5px solid currentColor;
    border-bottom: 2.5px dotted currentColor;
    opacity: 0;
    transition: opacity 0.2s ease;
    animation: rfc-orbital-rotate 1.5s linear infinite;
}

.rfc-energy-node:hover::after {
    opacity: 1;
}

.rfc-energy-node:nth-child(1) {
    transition-delay: 0.00s;
}

.rfc-energy-node:nth-child(2) {
    transition-delay: 0.04s;
}

.rfc-energy-node:nth-child(3) {
    transition-delay: 0.08s;
}

.rfc-energy-node:nth-child(4) {
    transition-delay: 0.12s;
}

.rfc-energy-node:nth-child(5) {
    transition-delay: 0.16s;
}

.rfc-yellow {
    background-color: #e1ff00 !important;
    color: #e1ff00;
}

.rfc-orange {
    background-color: #fb951d !important;
    color: #fb951d;
}

.rfc-cyan {
    background-color: #0fd6f3 !important;
    color: #0fd6f3;
}

.rfc-green {
    background-color: #39ff14 !important;
    color: #39ff14;
}

.rfc-purple {
    background-color: #f85ef3 !important;
    color: #f85ef3;
}

@keyframes rfc-orbital-rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}



body.rfc-color-changing * {
    transition: color var(--theme-transition), 
                background-color var(--theme-transition), 
                border-color var(--theme-transition), 
                filter var(--theme-transition),
                box-shadow var(--theme-transition) !important;
}



/* Während der User das Theme umschaltet, wird die harte Keyframe-Berechnung sanft abgefangen */
body.rfc-color-changing .pulse-dot {
    transition: filter var(--theme-transition), 
                fill var(--theme-transition) !important;
}



/* Zwingt das Logo und die Pfade innerhalb der Stroke-Gruppe zu einer weichen Transition beim Farbwechsel */
body.rfc-color-changing #h-rfc-diamond-svg,
body.rfc-color-changing #h-rfc-diamond-svg g[stroke] path {
    transition: stroke var(--theme-transition), 
                filter var(--theme-transition) !important;
}


/* Nutzt die zentrale Variable für den synchronen und regulierbaren Übergang */
body.rfc-color-changing .support-button,
body.rfc-color-changing .energy-wave,
body.rfc-color-changing .energy-crown-svg,
body.rfc-color-changing .diamond-paths,
body.rfc-color-changing .diamond-paths path,
body.rfc-color-changing .support-outer-decoration svg,
body.rfc-color-changing .support-outer-decoration * {
    transition: stroke var(--theme-transition), 
                fill var(--theme-transition), 
                border-color var(--theme-transition), 
                background var(--theme-transition), 
                box-shadow var(--theme-transition), 
                filter var(--theme-transition), 
                color var(--theme-transition) !important;
}


/* Zwingt das Navigations-Badge, den Hintergrund und alle enthaltenen Pfade zum weichen Übergang */
body.rfc-color-changing #nav-about-logo,
body.rfc-color-changing .rfc-brand-badge,
body.rfc-color-changing .rfc-brand-badge g,
body.rfc-color-changing .rfc-brand-badge path {
    transition: fill var(--theme-transition),
                background-color var(--theme-transition),
                stroke var(--theme-transition),
                filter var(--theme-transition) !important;
}



/* Synchronisiert alle Tabs, Unterstriche, den Copy-Button und Footer-Texte beim Theme-Wechsel */
body.rfc-color-changing .tab,
body.rfc-color-changing .tab::after,
body.rfc-color-changing .tab::before,
body.rfc-color-changing .copy-btn,
body.rfc-color-changing .copy-btn::after,
body.rfc-color-changing .copy-btn::before,
body.rfc-color-changing .showcase-footer,
body.rfc-color-changing .effect-name,
body.rfc-color-changing .refresh-btn {
    transition: color var(--theme-transition),
                background-color var(--theme-transition),
                border-color var(--theme-transition),
                transform var(--theme-transition),
                background var(--theme-transition),
                box-shadow var(--theme-transition),
                filter var(--theme-transition) !important;
}



/* Synchronisiert die Tabs, aktiven Unterlinien und Footer-Texte des Live-Editors beim Theme-Wechsel */
body.rfc-color-changing .rfc-pg-tab,
body.rfc-color-changing .rfc-pg-tab::after,
body.rfc-color-changing .rfc-pg-tab::before,
body.rfc-color-changing .rfc-pg-footer-title,
body.rfc-color-changing .rfc-pg-engine-tag {
    transition: color var(--theme-transition),
                background-color var(--theme-transition),
                border-color var(--theme-transition),
                transform var(--theme-transition),
                box-shadow var(--theme-transition),
                filter var(--theme-transition) !important;
}


/* Ergänzung für die Synchronisation des Kopier-Buttons */
body.rfc-color-changing .rfc-pg-btn-copy {
    transition: color var(--theme-transition, 0.8s ease),
                border-color var(--theme-transition, 0.8s ease),
                box-shadow var(--theme-transition, 0.8s ease) !important;
}