@charset "UTF-8";

/* ================================================= */
/* 1. LOGO PULSIEREND (betty.AI)                     */
/* Zyklus: 16s (10s Pause + 6s Puls)                 */
/* ================================================= */

/* Keyframes für das LOGO (Nur Text-Schatten) */
@keyframes pulse-logo {
    /* 0% bis 62.5%: Pause (0s bis 10s) */
    0%, 62.5% { 
        text-shadow: 0 0 5px rgba(0, 255, 255, 0.2); 
    }

    /* 75.0% (10s + 2s = 12s): Ende der Einblendphase, 100% Helligkeit */
    75.0% {
        text-shadow: 
            0 0 10px #00FFFF, 
            0 0 30px #00FFFF, 
            0 0 60px rgba(0, 255, 255, 0.8),
            0 0 120px rgba(0, 255, 255, 0.5); 
    }

    /* 87.5% (12s + 2s = 14s): Haltephase bleibt maximal */
    87.5% { 
        text-shadow: 
            0 0 10px #00FFFF, 
            0 0 30px #00FFFF, 
            0 0 60px rgba(0, 255, 255, 0.8),
            0 0 120px rgba(0, 255, 255, 0.5); 
    }

    /* 100% (14s + 2s = 16s): Ende der Ausblendphase */
    100% {
        text-shadow: 0 0 5px rgba(0, 255, 255, 0.2); 
    }
}

/* Wende die Animation auf das LOGO-Element an */
.ai-pulsing-light {
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.2); 
    animation: pulse-logo 16s linear infinite; 
}

@charset "UTF-8";

/* ================================================= */
/* 1. LOGO PULSIEREND (betty.AI)                     */
/* Zyklus: 16s (10s Pause + 6s Puls)                 */
/* ================================================= */

/* Keyframes für das LOGO (Nur Text-Schatten) */
@keyframes pulse-logo {
    /* 0% bis 62.5%: Pause (0s bis 10s) */
    0%, 62.5% { 
        text-shadow: 0 0 5px rgba(0, 255, 255, 0.2); 
    }

    /* 75.0% (10s + 2s = 12s): Ende der Einblendphase, 100% Helligkeit */
    75.0% {
        text-shadow: 
            0 0 10px #00FFFF, 
            0 0 30px #00FFFF, 
            0 0 60px rgba(0, 255, 255, 0.8),
            0 0 120px rgba(0, 255, 255, 0.5); 
    }

    /* 87.5% (12s + 2s = 14s): Haltephase bleibt maximal */
    87.5% { 
        text-shadow: 
            0 0 10px #00FFFF, 
            0 0 30px #00FFFF, 
            0 0 60px rgba(0, 255, 255, 0.8),
            0 0 120px rgba(0, 255, 255, 0.5); 
    }

    /* 100% (14s + 2s = 16s): Ende der Ausblendphase */
    100% {
        text-shadow: 0 0 5px rgba(0, 255, 255, 0.2); 
    }
}

/* Wende die Animation auf das LOGO-Element an */
.ai-pulsing-light {
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.2); 
    animation: pulse-logo 16s linear infinite; 
}

@charset "UTF-8";

/* ================================================= */
/* 1. LOGO PULSIEREND (betty.AI)                     */
/* (Unverändert gelassen, da nicht relevant für den Button) */
/* ================================================= */

/* ... (Keyframes pulse-logo und .ai-pulsing-light bleiben unverändert) ... */


/* ================================================= */
/* 1. LOGO PULSIEREND (betty.AI)                     */
/* Zyklus: 16s (Keyframes bleiben unverändert)       */
/* ================================================= */

/* Keyframes für das LOGO (Nur Text-Schatten) */
@keyframes pulse-logo {
    /* 0% bis 62.5%: Pause (0s bis 10s) */
    0%, 62.5% { 
        text-shadow: 0 0 5px rgba(0, 255, 255, 0.2); 
    }
    /* ... (Restliche Keyframes für pulse-logo bleiben unverändert) ... */
    75.0% {
        text-shadow: 
            0 0 10px #00FFFF, 
            0 0 30px #00FFFF, 
            0 0 60px rgba(0, 255, 255, 0.8),
            0 0 120px rgba(0, 255, 255, 0.5); 
    }
    87.5% { 
        text-shadow: 
            0 0 10px #00FFFF, 
            0 0 30px #00FFFF, 
            0 0 60px rgba(0, 255, 255, 0.8),
            0 0 120px rgba(0, 255, 255, 0.5); 
    }
    100% {
        text-shadow: 0 0 5px rgba(0, 255, 255, 0.2); 
    }
}

/* Wende die Animation auf das LOGO-Element an */
.ai-pulsing-light {
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.2); 
    animation: pulse-logo 16s linear infinite; 
}

/* ================================================= */
/* 2. BUTTON PULSIEREND (z.B. Starte Check)          */
/* NEU: Zyklus auf 8 Sekunden verkürzt               */
/* ================================================= */

/* Keyframes für den BUTTON (Rahmen, Box-Schatten & Text-Schatten) */
@keyframes pulse-btn {
    /* Pausenende bei 12.5% (1 Sekunde bei 8s Zyklus) */
    0%, 12.5% { 
        /* Statische Rahmenfarbe während der Pause */
        border-color: #00FFFF; 
        box-shadow: 0 0 5px rgba(0, 255, 255, 0.2), 0 0 10px rgba(0, 255, 255, 0.1);
        text-shadow: 0 0 3px rgba(0, 255, 255, 0.2);
    }

    /* Max. Effekt beginnt bei 25.0% */
    25.0% { 
        /* Rahmen geht ins Neon-Cyan über */
        border-color: #00FFFF;
        box-shadow: 
            0 0 10px #00FFFF, 
            0 0 20px #00FFFF, 
            0 0 40px rgba(0, 255, 255, 0.8),
            0 0 80px rgba(0, 255, 255, 0.5); 
        text-shadow: 
            0 0 5px #00FFFF, 
            0 0 10px rgba(0, 255, 255, 0.7);
    }

    /* Max. Effekt hält bis 87.5% */
    87.5% { 
        border-color: #00FFFF;
        box-shadow: 0 0 10px #00FFFF, 0 0 20px #00FFFF, 0 0 40px rgba(0, 255, 255, 0.8), 0 0 80px rgba(0, 255, 255, 0.5); 
        text-shadow: 0 0 5px #00FFFF, 0 0 10px rgba(0, 255, 255, 0.7);
    }

    /* Ende des Zyklus bei 100% */
    100% {
        /* Rahmen kehrt zur neuen statischen Farbe zurück */
        border-color: #2361ce;
        box-shadow: 0 0 5px rgba(0, 255, 255, 0.2), 0 0 10px rgba(0, 255, 255, 0.1);
        text-shadow: 0 0 3px rgba(0, 255, 255, 0.2);
    }
}

/* Allgemeine Button-Styles */
.btn-ai {
    background-color: #314155; 
    color: #ffffff; 
    
    /* Rahmenfarbe: #2361ce */
    border: 2px solid #2361ce; 
    
    padding: 10px 20px;
    font-size: 1.25rem;
    
    /* Runde Seiten (Kapselform) */
    border-radius: 50px; 
    
    transition: all 0.5s ease; 
    box-shadow: 0 0 5px rgba(0, 255, 255, 0.4); 
    
    /* Schriftart und Gewichtung (approximiert die Logo-Styles) */
    font-family: var(--bs-font-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif);
    font-weight: 700; 
    
    /* Füge 'position: relative' hinzu */
    position: relative; 
    /* Linkes Padding für den Stern-Platz */
    padding-left: 35px; 
}

/* Wende die Animation auf den Button an */
.btn-pulsing-ai {
    /* GEÄNDERT: Animationsdauer auf 8 Sekunden verkürzt */
    animation: pulse-btn 8s linear infinite; 
}

/* ================================================= */
/* 3. STERN-ICON VOR DEM BUTTON-TEXT (ANGEPASST)     */
/* ================================================= */

.btn-ai::before {
    content: "\2605"; /* Unicode für einen vollen Stern (★) */
    color: #ffffff; /* Weißer Stern */
    
    /* Kleinerer Stern */
    font-size: 0.9rem; 
    
    /* Positionierung des Sterns links vom Text */
    position: absolute;
    /* Position näher am Text */
    left: 15px; 
    
    /* Etwas nach oben gesetzt */
    top: 40%; 
    
    transform: translateY(-50%);
    
    /* Füge einen leichten Text-Schatten hinzu */
    text-shadow: 0 0 5px #ffffff, 0 0 10px rgba(255, 255, 255, 0.7);
}

.ai-container-gradient {
    /* WICHTIG: Erlaubt die Positionierung des Farbverlaufs-Pseudo-Elements */
    position: relative;
    
    /* Hintergrundfarbe des Containers (muss sichtbar sein, da der Rahmen transparent ist) */
    background-color: #314155; 
    
    /* Setzt einen transparenten Rand, der später den Farbverlauf freigibt */
    border: 3px solid transparent; 
    
    /* Setzen Sie hier Ihre gewünschte Größe/Padding/Margin des div */
    padding: 20px; 
    border-radius: 12px; 
    overflow: hidden; /* Stellt sicher, dass der Inhalt innerhalb des Rahmens bleibt */
    
    /* Optional: Leichter Schatten zur Hervorhebung */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    
    /* Optional: Animations-Anwendung (falls gewünscht) */
    /* animation: pulse-border 4s linear infinite; */ 
}

/* ================================================= */
/* FÜGT DEN VERLAUFSRAHMEN HINZU                     */
/* ================================================= */
.ai-container-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    
    /* Erhöht die Größe leicht, um den Rand zu überdecken */
    padding: 3px; /* Muss der Breite des 'border' von .ai-container-gradient entsprechen */
    
    /* Setzt den Farbverlauf als Hintergrund. WIRD HIER ANGESPASSST: */
    background: linear-gradient(
        to bottom right,
        rgba(0, 255, 255, 0.7), /* Startfarbe (oben links) */
        #314155 /* Endfarbe (unten rechts) */
    );
    
    /* Das Pseudo-Element wird hinter den tatsächlichen Inhalt verschoben */
    z-index: -1; 
    
    /* Stellt sicher, dass der Verlauf die Ecken des Containers abrundet */
    border-radius: inherit;
}