/*
==============================================================================
LUVEX THEME v3.3 - UI COMPONENTS (Layout-Reparatur)
==============================================================================
Description: Enthält alle wiederverwendbaren UI-Komponenten, universelle
             Form-Elemente UND alle Animationen.
Dependencies: _variables.css, _core.css
Last Update: 2025-09-02 - Scroll-to-Top Animation zu subtilem Rand-Effekt geändert
==============================================================================
*/

/*
==============================================================================
1. HERO SECTIONS 
==============================================================================
*/

/* --- 1.1 Base Hero Layout --- */
.luvex-hero {
    background: var(--luvex-dark-blue);
    color: var(--luvex-white);
    position: relative;
    overflow: hidden;
    padding: calc(80px + var(--space-lg)) 2rem var(--space-lg) 2rem;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* --- FIX: Canvas-Elemente IMMER in den Hintergrund zwingen --- */
.luvex-hero > canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none; /* Verhindert, dass das Canvas Klicks blockiert */
}


/* --- Hintergrund-Grid --- */
.luvex-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><pattern id="hero-grid" width="50" height="50" patternUnits="userSpaceOnUse"><path d="M 50 0 L 0 0 0 50" fill="none" stroke="rgba(109, 213, 237, 0.1)" stroke-width="1"/></pattern></defs><rect width="100%" height="100%" fill="url(%23hero-grid)"/></svg>');
    opacity: 0.4; 
    pointer-events: none;
    z-index: 1;
}

/* --- 1.2 Hero Content Container --- */
.luvex-hero__container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* --- 1.3 Hero Text Elements --- */
.luvex-hero__title {
    text-align: center;
    font-size: clamp(2rem, 4vw, 2.5rem);
    margin: 0 0 2rem 0; 
}

.luvex-hero__cta-container {
    margin: 1.5rem 0 2.5rem 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
}

.luvex-hero__subtitle {
    margin: 0 0 1.5rem 0;
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    color: var(--luvex-gray-300);
    font-weight: 400;
    max-width: 750px;
    line-height: 1.4;
}

.luvex-hero__description {
    margin: 0;
    font-size: clamp(1rem, 2.2vw, 1.2rem);
    color: var(--luvex-gray-300);
    max-width: 700px;
    line-height: 1.6;
    opacity: 0.9;
}

/*
==============================================================================
1.5 FIX: MENÜ-ICONS SICHTBAR MACHEN
==============================================================================
*/
.main-navigation .menu-item-icon {
    display: inline-block !important;
    opacity: 1 !important;
    vertical-align: middle;
    margin-left: 8px;
    font-size: 0.9em;
}


/*
==============================================================================
2. BUTTONS
==============================================================================
*/

/* --- 2.1 Primary Hero CTA Button --- KORRIGIERT MIT :not() --- */
.luvex-hero__cta:not(.luvex-simulator-cta) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: 16px 32px;
    background: transparent;
    color: var(--luvex-bright-cyan);
    border: 2px solid var(--luvex-bright-cyan);
    border-radius: var(--radius-full);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--text-base);
}

.luvex-hero__cta:not(.luvex-simulator-cta):hover {
    background: var(--luvex-bright-cyan);
    color: var(--luvex-dark-blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(109, 213, 237, 0.3);
}


/* --- 2.2 Secondary Hero CTA Button --- */
.luvex-hero__cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: 16px 32px;
    background: transparent;
    color: var(--luvex-bright-cyan);
    border: 2px solid var(--luvex-bright-cyan);
    border-radius: var(--radius-full);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition-normal);
    font-size: var(--text-base);
}

.luvex-hero__cta-secondary:hover {
    background: var(--luvex-bright-cyan);
    color: var(--luvex-dark-blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(109, 213, 237, 0.3);
}

/* --- 2.3 Generic CTA Buttons --- */
.luvex-cta-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    color: var(--luvex-white);
    text-decoration: none;
    border: none;
    transition: all 0.3s ease;
    position: relative;
    background: linear-gradient(45deg, var(--luvex-vibrant-blue), var(--luvex-special-cyan));
    box-shadow: 0 4px 15px rgba(34, 211, 238, 0.2), 0 2px 5px rgba(0, 123, 255, 0.15);
}

.luvex-cta-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(34, 211, 238, 0.3), 0 4px 10px rgba(0, 123, 255, 0.2);
    color: var(--luvex-white);
}

.luvex-cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    text-decoration: none;
    transition: all 0.3s ease;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.5);
    color: var(--luvex-white);
}

.luvex-cta-secondary:hover {
    background: var(--luvex-white);
    color: var(--luvex-dark-blue);
    border-color: var(--luvex-white);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.15);
}

/* --- 2.4 Standard Button Aliases --- */
.btn.btn--primary,
.btn--primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    color: var(--luvex-white);
    text-decoration: none;
    border: none;
    transition: all 0.3s ease;
    background: linear-gradient(45deg, var(--luvex-vibrant-blue), var(--luvex-special-cyan));
    box-shadow: 0 4px 15px rgba(34, 211, 238, 0.2), 0 2px 5px rgba(0, 123, 255, 0.15);
}

.btn.btn--primary:hover,
.btn--primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(34, 211, 238, 0.3), 0 4px 10px rgba(0, 123, 255, 0.2);
    color: var(--luvex-white);
}

/* --- 2.5 Universal CTA Button --- */
.cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    color: var(--luvex-white);
    text-decoration: none;
    border: none;
    transition: all 0.3s ease;
    background: linear-gradient(45deg, var(--luvex-vibrant-blue), var(--luvex-special-cyan));
    box-shadow: 0 4px 15px rgba(34, 211, 238, 0.2), 0 2px 5px rgba(0, 123, 255, 0.15);
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(34, 211, 238, 0.3), 0 4px 10px rgba(0, 123, 255, 0.2);
    color: var(--luvex-white);
}

/* Override für dunkle Sections */
.section--final-cta .cta-button,
.cta-section--dark .cta-button {
    background: var(--luvex-bright-cyan);
    color: var(--luvex-dark-blue);
    box-shadow: 0 4px 15px rgba(109, 213, 237, 0.2);
}

.section--final-cta .cta-button:hover,
.cta-section--dark .cta-button:hover {
    background: var(--luvex-dark-blue-dark);
    color: var(--luvex-bright-cyan);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(248, 250, 252, 0.25);
}

/* --- 2.6 Outline Button --- */
.btn--outline {
    background-color: transparent;
    border: 2px solid var(--luvex-bright-cyan);
    color: var(--luvex-dark-blue);
    padding: 12px 24px;
    border-radius: var(--radius-full);
    font-weight: 600;
    transition: var(--transition-normal);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
}

.btn--outline:hover {
    background-color: var(--luvex-bright-cyan);
    border-color: var(--luvex-bright-cyan);
    color: var(--luvex-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(109, 213, 237, 0.3);
}

/*
==============================================================================
3. CARDS & CARD SYSTEMS
==============================================================================
*/

/* --- 3.1 Basic Value Cards --- */
.value-card {
    background: var(--luvex-white);
    border-radius: var(--radius-lg);
    padding: 2rem;
    text-align: center;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--luvex-gray-200);
    transition: var(--transition-normal);
}

.value-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--luvex-bright-cyan);
}

.value-card__icon {
    font-size: 2rem;
    color: var(--luvex-vibrant-blue);
    margin-bottom: 1rem;
}

.value-card__title {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--luvex-dark-blue);
    margin-bottom: 0.5rem;
}

.value-card__description {
    font-size: var(--text-base);
    color: var(--luvex-gray-700);
    line-height: 1.6;
    margin: 0;
}

/* --- 3.2 Knowledge Navigator Cards --- */
.knowledge-navigator-header { 
    text-align: center; 
    margin-bottom: 4rem; 
}

.knowledge-navigator-intro { 
    max-width: 650px; 
    margin: 1rem auto 0; 
    color: var(--luvex-gray-700); 
    font-size: 1.125rem; 
}

.knowledge-card {
    background: var(--luvex-white);
    border-radius: var(--radius-lg);
    padding: 2rem;
    text-align: left;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--luvex-gray-200);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
    position: relative;
}

.knowledge-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--luvex-bright-cyan);
}

.knowledge-card__header { 
    display: flex; 
    align-items: center; 
    gap: 1.5rem; 
    margin-bottom: 2rem;
    justify-content: flex-start;
}

.knowledge-card .card__icon {
    margin: 0;
    font-size: 2.2rem;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #e7f1ff, #f0f8ff);
    color: var(--luvex-vibrant-blue);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: var(--transition-normal);
}

.knowledge-card:hover .card__icon {
    background: var(--luvex-bright-cyan);
    color: var(--luvex-dark-blue);
    transform: scale(1.05);
}

.knowledge-card .card__title { 
    margin-bottom: 0; 
    font-size: 1.5rem; 
    font-weight: 600;
    color: var(--luvex-dark-blue);
    text-align: center; 
}

.knowledge-card .card__content {
    text-align: justify;
    flex-grow: 1;
    margin-bottom: 2rem;
    font-size: var(--text-base);
    color: var(--luvex-gray-700);
    line-height: 1.6;
}

.knowledge-card .btn--knowledge {
    background-color: transparent;
    border: 2px solid #e7f1ff;
    color: var(--luvex-gray-500);
    padding: 12px 24px;
    border-radius: var(--radius-full);
    font-weight: 500;
    transition: var(--transition-normal);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    margin-top: auto;
    margin-bottom: 1rem;
    align-self: center;
}

.knowledge-card:hover .btn--knowledge {
    border-color: var(--luvex-cyan-dark);
    color: var(--luvex-cyan-dark);
    font-weight: 600;
}

.knowledge-card .btn--knowledge:hover {
    background-color: var(--luvex-bright-cyan);
    border-color: var(--luvex-bright-cyan);
    color: var(--luvex-dark-blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(109, 213, 237, 0.3);
}

/*
==============================================================================
4. FEATURE GRID SYSTEM
==============================================================================
*/

.feature-grid { 
    margin: 3rem auto; 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 2rem; 
    max-width: 900px; 
}

.feature-item { 
    padding: 1.5rem; 
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md); 
    transition: all 0.3s ease; 
    text-align: center;
}

.feature-item:hover { 
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.2);
}

.feature-item:hover h4 { 
    color: var(--luvex-bright-cyan); 
}

.feature-item:hover p { 
    color: var(--luvex-white); 
}

.feature-item i { 
    font-size: 2.5rem; 
    margin-bottom: 1rem; 
    color: var(--luvex-bright-cyan); 
}

.feature-item h4 { 
    color: var(--luvex-white); 
    margin-bottom: 0.5rem; 
    transition: color 0.3s ease; 
}

.feature-item p { 
    color: var(--luvex-text-muted-dark); 
    transition: color 0.3s ease; 
    text-align: center;
}

@media (max-width: 768px) {
    .feature-grid { 
        grid-template-columns: repeat(2, 1fr); 
    }
}

@media (max-width: 480px) {
    .feature-grid { 
        grid-template-columns: 1fr; 
    }
}

/*
==============================================================================
5. UNIVERSAL FORM COMPONENTS
==============================================================================
*/

/* --- 5.1 Universal Input Styles --- */
.luvex-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"] {
    width: 100%;
    height: 56px;
    padding: 0 1rem;
    font-size: var(--text-base);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(109, 213, 237, 0.3);
    border-radius: var(--radius-md);
    color: var(--luvex-white);
    transition: var(--transition-normal);
}

.luvex-input::placeholder,
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="tel"]::placeholder {
    color: var(--luvex-gray-300);
    opacity: 0.7;
}

.luvex-input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus {
    border-color: var(--luvex-bright-cyan);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 2px rgba(109, 213, 237, 0.5);
    outline: none;
}

/* Light theme override für helle Seiten */
.section--light .luvex-input,
.section--light input[type="text"],
.section--light input[type="email"],
.section--light input[type="password"],
.section--light input[type="tel"] {
    background: var(--luvex-white);
    color: var(--luvex-dark-blue);
    border-color: var(--luvex-gray-300);
}

.section--light .luvex-input::placeholder,
.section--light input[type="text"]::placeholder,
.section--light input[type="email"]::placeholder,
.section--light input[type="password"]::placeholder,
.section--light input[type="tel"]::placeholder {
    color: var(--luvex-gray-500);
    opacity: 0.8;
}

.section--light .luvex-input:focus,
.section--light input[type="text"]:focus,
.section--light input[type="email"]:focus,
.section--light input[type="password"]:focus,
.section--light input[type="tel"]:focus {
    border-color: var(--luvex-vibrant-blue);
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
}

/* --- 5.2 Universal Checkbox Component --- */
.luvex-checkbox {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    margin: 0;
}

.luvex-checkbox__indicator {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(109, 213, 237, 0.5);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-normal);
    flex-shrink: 0;
}

.luvex-checkbox__indicator i {
    font-size: 0.8rem;
    color: var(--luvex-dark-blue);
    opacity: 0;
    transform: scale(0.5);
    transition: var(--transition-normal);
}

.luvex-checkbox input { 
    display: none; 
}

.luvex-checkbox input:checked + .luvex-checkbox__indicator {
    background: var(--luvex-bright-cyan);
    border-color: var(--luvex-bright-cyan);
}

.luvex-checkbox input:checked + .luvex-checkbox__indicator i {
    opacity: 1;
    transform: scale(1);
}

.luvex-checkbox__text {
    color: var(--luvex-gray-300);
    font-size: var(--text-sm);
}

/* Light theme override */
.section--light .luvex-checkbox__indicator {
    border-color: var(--luvex-gray-400);
}

.section--light .luvex-checkbox__text {
    color: var(--luvex-gray-700);
}

/* --- 5.3 Universal Form Sections --- */
.luvex-form-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(109, 213, 237, 0.1);
}

.luvex-form-section:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.luvex-form-section-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--luvex-white);
    margin-bottom: 1.25rem;
    text-align: left;
}

.luvex-form-section-title i {
    font-size: 1.1em;
    color: var(--luvex-bright-cyan);
    width: 24px;
    text-align: center;
}

/* Light theme override */
.section--light .luvex-form-section {
    border-top-color: rgba(0, 0, 0, 0.1);
}

.section--light .luvex-form-section-title {
    color: var(--luvex-dark-blue);
}

/* --- 5.4 Universal Form Grids --- */
.luvex-form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.luvex-form-grid-account {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.luvex-form-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.luvex-form-column h5 {
    color: var(--luvex-bright-cyan);
    font-size: var(--text-base);
    font-weight: 600;
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(109, 213, 237, 0.2);
}

/* Light theme override */
.section--light .luvex-form-column h5 {
    color: var(--luvex-vibrant-blue);
    border-bottom-color: rgba(0, 123, 255, 0.2);
}

/* --- 5.5 Universal Feedback Messages --- */
.luvex-feedback-message {
    display: none;
    padding: 1.25rem;
    border-radius: var(--radius-md);
    margin-bottom: 2rem;
    font-size: var(--text-sm);
    color: var(--luvex-white);
}

.luvex-feedback-message.error {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid #ef4444;
}

.luvex-feedback-message.success {
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid #10b981;
}

.luvex-feedback-message.visible {
    display: block;
}

/* Light theme override */
.section--light .luvex-feedback-message {
    color: var(--luvex-dark-blue);
}

.section--light .luvex-feedback-message.error {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.section--light .luvex-feedback-message.success {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

/* --- 5.6 Universal Submit Button --- */
.luvex-form-submit {
    width: auto;
    min-width: 200px;
    max-width: 300px;
    padding: 1rem 2rem;
    font-size: var(--text-base);
    margin: 1rem auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: linear-gradient(45deg, var(--luvex-vibrant-blue), var(--luvex-special-cyan));
    color: var(--luvex-white);
    border: none;
    border-radius: var(--radius-full);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(34, 211, 238, 0.2);
}

.luvex-form-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(34, 211, 238, 0.3);
}

.luvex-form-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.luvex-form-submit i { 
    font-size: 0.9rem; 
}

/*
==============================================================================
6. CTA SECTIONS
==============================================================================
*/

.section--final-cta { 
    background: linear-gradient(135deg, var(--luvex-accent-blue) 0%, var(--luvex-dark-blue) 100%); 
    color: var(--luvex-white); 
}

.cta-section--dark { 
    background: transparent; 
    box-shadow: none; 
    border: none; 
    max-width: 900px; 
    margin: 0 auto;
    text-align: center;
    padding: 3rem 2rem;
}

.cta-section--dark h3 {
    color: var(--luvex-white);
    font-size: 2.5rem;
    margin-bottom: 2.5rem;
}

.cta-section--dark p {
    color: var(--luvex-gray-300);
    font-size: 1.2rem;
    margin-bottom: 3rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
}

.cta-actions {
    display: flex;
    gap: 3.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

/*
==============================================================================
7. ANIMATIONS (Gemerged aus _animations.css)
==============================================================================
*/

/* --- 7.1 Scroll Reveal Animations --- */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* --- 7.2 Loading & Spinner Animations --- */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

@keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        transform: translateY(0);
    }
    40%, 43% {
        transform: translateY(-30px);
    }
    70% {
        transform: translateY(-15px);
    }
    90% {
        transform: translateY(-4px);
    }
}

/* --- 7.3 Glow & Shimmer Effects --- */
@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(109, 213, 237, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(109, 213, 237, 0.8), 0 0 30px rgba(109, 213, 237, 0.6);
    }
}

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

/* --- 7.4 Animation Utility Classes --- */
.animate-slide-up {
    animation: slideInUp 0.6s ease-out forwards;
}

.animate-slide-left {
    animation: slideInLeft 0.6s ease-out forwards;
}

.animate-slide-right {
    animation: slideInRight 0.6s ease-out forwards;
}

.animate-fade-in {
    animation: fadeIn 0.8s ease-out forwards;
}

.animate-scale-in {
    animation: scaleIn 0.5s ease-out forwards;
}

.animate-spin {
    animation: spin 1s linear infinite;
}

.animate-pulse {
    animation: pulse 2s ease-in-out infinite;
}

.animate-bounce {
    animation: bounce 1s ease infinite;
}

.animate-glow {
    animation: glow 2s ease-in-out infinite;
}

.animate-shimmer {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 2s ease-in-out infinite;
}

/* --- 7.5 Scroll-Triggered Animation Base Classes --- */
.scroll-reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.scroll-reveal-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scroll-reveal-left.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.scroll-reveal-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scroll-reveal-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.scroll-reveal-scale {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scroll-reveal-scale.is-visible {
    opacity: 1;
    transform: scale(1);
}

/* --- 7.6 Staggered Animations für Listen/Grids --- */
.stagger-children > * {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.stagger-children.is-visible > *:nth-child(1) { transition-delay: 0.1s; }
.stagger-children.is-visible > *:nth-child(2) { transition-delay: 0.2s; }
.stagger-children.is-visible > *:nth-child(3) { transition-delay: 0.3s; }
.stagger-children.is-visible > *:nth-child(4) { transition-delay: 0.4s; }
.stagger-children.is-visible > *:nth-child(5) { transition-delay: 0.5s; }
.stagger-children.is-visible > *:nth-child(6) { transition-delay: 0.6s; }

.stagger-children.is-visible > * {
    opacity: 1;
    transform: translateY(0);
}

/* --- 7.7 Hover-Animation Classes --- */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.hover-scale {
    transition: transform 0.3s ease;
}

.hover-scale:hover {
    transform: scale(1.05);
}

.hover-glow {
    transition: box-shadow 0.3s ease;
}

.hover-glow:hover {
    box-shadow: 0 0 20px rgba(109, 213, 237, 0.5);
}

/*
==============================================================================
8. VISUAL EFFECTS
==============================================================================
*/

/* --- 8.1 Shine/Shiver Effect --- */
.has-shine-effect {
    position: relative;
    overflow: hidden !important;
    isolation: isolate;
}

.has-shine-effect::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -100%;
    width: 30%;
    height: 200%;
    background: linear-gradient(45deg,
        transparent 0%, 
        rgba(109, 213, 237, 0.06) 45%,
        rgba(109, 213, 237, 0.12) 50%,
        rgba(109, 213, 237, 0.06) 55%,
        transparent 100%
    );
    z-index: 1;
    pointer-events: none;
    transition: none;
    transform: rotate(25deg);
}

.has-shine-effect:hover::before {
    left: 120%;
    transition: left 0.5s ease-out;
}

.has-shine-effect > * {
    position: relative;
    z-index: 2;
}

/* --- 8.2 Scroll-to-Top Button NEUE VERSION --- */
#scrollToTopBtn {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--luvex-dark-blue);
    color: var(--luvex-bright-cyan);
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(27, 42, 73, 0.2);
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 0;
    transform: translateY(10px);
    margin: 0;
    /* Für die Pseudo-Elemente */
    position: relative;
    overflow: hidden;
}

#scrollToTopBtn.visible {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transform: translateY(0);
}

#scrollToTopBtn:hover {
    transform: scale(1.1);
}

/* Der Pfeil (Icon) */
#scrollToTopBtn i {
    position: relative;
    z-index: 3; /* Liegt über allem */
    transition: color 0.5s ease;
}

/* Animierter Hintergrund - Standardmäßig unsichtbar */
#scrollToTopBtn::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1; /* Unter der Maske */
    background: linear-gradient(to top, #000000, #DD0000, #FFCC00, #000000, #DD0000, #FFCC00);
    background-size: 100% 200%;
    animation: moving-stripe-border 2s linear infinite;
    opacity: 0; /* Unsichtbar */
    transition: opacity 0.5s ease-in-out; /* Für den Fade-in Effekt */
}

/* Dunkelblaue Maske, die den Rand-Effekt erzeugt */
#scrollToTopBtn::after {
    content: '';
    position: absolute;
    /* 4px Einzug, um einen 4px Rand zu erzeugen */
    top: 4px; left: 4px; right: 4px; bottom: 4px;
    z-index: 2; /* Über der Animation */
    background-color: var(--luvex-dark-blue);
    border-radius: 50%;
}


/* Keyframes für den Moving Stripe Effekt */
@keyframes moving-stripe-border {
    100% {
        background-position: 0% 200%;
    }
}

/* Wenn die Animation durch JS aktiviert wird... */
#scrollToTopBtn.animate-border-flag::before {
    opacity: 1; /* ...wird der animierte Hintergrund sichtbar (Fade-in). */
}

/* ...und der Pfeil wird ebenfalls animiert. */
#scrollToTopBtn.animate-border-flag i {
    color: transparent; /* Macht die Schriftfarbe durchsichtig */
    background: linear-gradient(to top, #FFCC00, #DD0000, #000000, #FFCC00, #DD0000, #000000);
    background-size: 100% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: moving-stripe-border 2s linear infinite;
}

#scrollToTopBtn.animate-border-flag:hover::before,
#scrollToTopBtn.animate-border-flag:hover i {
    animation-play-state: paused; /* Pausiert beide Animationen bei Hover */
}


/*
==============================================================================
9. RESPONSIVE BREAKPOINTS FÜR FORM COMPONENTS
==============================================================================
*/

@media (max-width: 992px) {
    .luvex-form-grid-2,
    .luvex-form-grid-account {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

@media (max-width: 768px) {
    .luvex-form-section {
        margin-top: 1rem;
        padding-top: 1rem;
    }
    
    .luvex-form-section-title {
        margin-bottom: 1rem;
    }
    
    .luvex-form-submit {
        min-width: auto;
        max-width: none;
        width: 100%;
    }
}