/* Zusätzliche CSS-Styles für das Theme */

/* Hintergrund-Anpassungen */
body {
    background-color: var(--bg-color, #0a0a2a);
    background-image: var(--bg-image, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Avatar-Form */
.avatar.round {
    border-radius: 50%;
}

.avatar.square {
    border-radius: 10px;
}

/* Button-Animationen */
.offer-button {
    animation: fadeInUp 0.6s ease forwards;
    opacity: 0;
    transform: translateY(20px);
}

.offer-button.slide-in {
    animation: slideIn 0.5s ease forwards;
}

.offer-button.scale-in {
    animation: scaleIn 0.5s ease forwards;
    transform: scale(0.8);
    opacity: 0;
}

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

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

/* Social Media Icons - Originalfarben */
.social-icon.facebook svg {
    color: #1877F2;
}

.social-icon.instagram svg {
    background: linear-gradient(45deg, #E1306C, #FF8E3C, #F94A4C, #3D5AFE);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.social-icon.tiktok svg {
    color: #000000;
    background: white;
    border-radius: 4px;
}

.social-icon.twitter svg {
    color: #1DA1F2;
}

.social-icon.youtube svg {
    color: #FF0000;
}

/* Responsive Improvements */
@media (max-width: 768px) {
    .social-links {
        flex-wrap: wrap;
    }
    
    .dark-mode-toggle {
        top: 10px;
        right: 10px;
        padding: 8px 12px;
        font-size: 14px;
    }
}

/* Dark Mode Styles */
body.dark {
    --text-color: #ffffff;
    --bg-color: #000000;
}

body:not(.dark) {
    --text-color: #333333;
    --bg-color: #f5f5f5;
}