.text-heighlight 
{

    color: var(--webpage-text-color-page-button); /* Deine Basisfarbe */
    transition: all 0.3s ease-in-out; /* Sanfter Übergang */
    text-decoration: none;
    display: inline-block;

    display: flex;
    align-items: center;
    justify-content: center;

}



.text-heighlight:hover 
{

    /* 1. Macht die Farbe extrem hell/weißlich */
    filter: brightness(1.0); 
    
    /* 2. Erzeugt den "Shiny"-Effekt durch mehrere Schichten Leuchten */
    text-shadow: 
        0 0 10px rgba(255, 255, 255, 0.8),  /* Weißer Kern-Glow */
        0 0 20px var(--webpage-text-color-page-button), /* Farbeigener Glow */
        0 0 30px var(--webpage-text-color-page-button); /* Weite Ausstrahlung */
    
    /* 3. Ein leichter Zoom verstärkt den Effekt oft (optional) */
    transform: scale(1.05);

    color: #00ff88;
    text-shadow: 0 0 15px rgba(0, 255, 136, 0.6); /* Loki-Glow Effekt für Schrift */
    
}



.text-heighlight-darker 
{

    color: var(--webpage-text-color-page-button); /* Deine Basisfarbe */
    transition: all 0.3s ease-in-out; /* Sanfter Übergang */
    text-decoration: none;
    display: inline-block;

    display: flex;
    align-items: center;
    justify-content: center;

}



.text-heighlight-darker:hover 
{

    /* 1. Macht die Farbe extrem hell/weißlich */
    filter: brightness(1); 
    
    /* 2. Erzeugt den "Shiny"-Effekt durch mehrere Schichten Leuchten */
    text-shadow: 
        0 0 1px rgba(52, 52, 52, 0.8),  /* Weißer Kern-Glow */
        0 0 11px var(--webpage-text-color-page-button), /* Farbeigener Glow */
        0 0 21px var(--webpage-text-color-page-button); /* Weite Ausstrahlung */
    
    /* 3. Ein leichter Zoom verstärkt den Effekt oft (optional) */
    transform: scale(1.05);

    color: #00ff88;
    text-shadow: 0 0 15px rgba(0, 255, 136, 0.6); /* Loki-Glow Effekt für Schrift */
    
}



.rainbow-hover-text 
{

    display: flex;
    align-items: center;
    justify-content: center;

    width: 90%;
    font-size: var(--size-title-small);
    color: var(--webpage-text-color-title);

    font-weight: var(--weight-black);

    justify-content: left;

    cursor: pointer;
    transition: all 0.3s ease; /* Macht den Übergang beim Hover weich */

}



/* Der Hover-Effekt */
.rainbow-hover-text:hover 
{

    color: rgb(255, 255, 255);

    /* 1. Regenbogen-Verlauf als Hintergrund anlegen */
    background: linear-gradient(
        to right, 
        #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3
    );
    
    /* 2. Den Hintergrund NUR auf den Text clippen */
    -webkit-background-clip: text;
    background-clip: text;
    
    /* 3. Den eigentlichen Text transparent machen, damit der Verlauf sichtbar wird */
    -webkit-text-fill-color: transparent;
    
    /* 4. Das Leuchten hinzufügen (drop-shadow funktioniert perfekt mit geklipptem Text) */
    /*filter: drop-shadow(0 0 8px rgba(255, 0, 0, 0.6))
            drop-shadow(0 0 15px rgba(0, 0, 255, 0.4));*/
    
    /* Optional: Animation für einen fließenden Regenbogen-Effekt starten */
    background-size: 200% auto;
    animation: rainbow-flow 3s linear infinite;

}



/* Animation für den fließenden Farbeffekt */
@keyframes rainbow-flow 
{

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

}