/* 
 * Logo CSS
 * Alle Logo-Definitionen
 * Logo CSS Definitionen dürfen in keiner anderen CSS-Datei vorhanden sein
 */

.widget-logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    text-decoration: none;
    transition: transform var(--transition-fast);
}

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

.widget-logo-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-blue-rgba-50) 100%);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px var(--color-primary-light);
    animation: logo-pulse 2s ease-in-out infinite;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.widget-logo-text {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family-base);
    letter-spacing: var(--letter-spacing-tight);
    background: linear-gradient(135deg, var(--color-text-primary) 0%, var(--color-overlay-white-70) 100%);
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: var(--line-height-tight);
}

.widget-logo-image {
    width: 48px;
    height: 48px;
    object-fit: contain;
}