#header-border-wrap {
    position: relative;
    padding: 2px; /* Das ist die Dicke deines Rahmens */
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1); /* Standard-Rahmenfarbe */
    overflow: hidden;
}

/* Der Fortschrittsbalken als umlaufender Rahmen */
#progress-bar {
    position: absolute;
    /* Wir starten oben links */
    top: 0;
    left: 0;
    height: 100%;
    width: 0%; /* Wird per JS gesteuert */
    
    /* RGB Gradient für den Rahmen */
    background: linear-gradient(90deg, #00fbff, #007bff, #ff00c1, #00fbff);
    background-size: 200% auto;
    
    z-index: -1; /* Hinter der Navigation */
    transition: width 0.2s ease-out;
    filter: blur(2px); /* Macht den Rahmen weicher/leuchtender */
}

/* Wenn fertig: RGB Animation für den ganzen Rahmen */
.finished-flash {
    width: 100% !important;
    animation: flow_rainbow 3s linear infinite !important;
    filter: blur(4px) brightness(1.5);
}

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

/* Die Navigation braucht einen festen Hintergrund, um den Rahmen zu verdecken */
.tile-nav {
    background: rgba(0, 0, 0, 0.9) !important;
    border: none !important; /* Den alten Border entfernen wir */
}