/* Logo Styles - Google-Farbstil: Hochwertiges CSS-Logo */

.header-logo-link {
    font-family: var(--font-family-primary);
    line-height: var(--line-height-base);
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: var(--transition-fast);
}

.header-logo-link:hover .logo-letter {
    transform: translateY(-2px);
}

/* Äußerer Logo-Text-Container */
#header-logo-area .header-logo-link .header-logo-text,
.header-logo-text {
    font-family: var(--font-family-primary);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-decoration: none;
    transition: var(--transition-fast);
    display: inline-flex;
    align-items: center;
}

/* Buchstaben-Größe: direkt auf .logo-letter-Spans (im Template haben alle Buchstaben-Spans jetzt class="logo-letter logo-letter-N") */
#header-logo-area .header-logo-text .logo-letter,
.header-logo-text .logo-letter {
    display: inline-block;
    font-size: 41px !important;
    transition: var(--transition-fast);
}

/* Keywordtool: 11 Buchstaben im Google-Farbstil (Blau, Rot, Gelb, Grün) */
.logo-letter-1 { color: var(--color-logo-google-blue); }
.logo-letter-2 { color: var(--color-logo-google-red); }
.logo-letter-3 { color: var(--color-logo-google-yellow); }
.logo-letter-4 { color: var(--color-logo-google-blue); }
.logo-letter-5 { color: var(--color-logo-google-green); }
.logo-letter-6 { color: var(--color-logo-google-red); }
.logo-letter-7 { color: var(--color-logo-google-yellow); }
.logo-letter-8 { color: var(--color-logo-google-blue); }
.logo-letter-9 { color: var(--color-logo-google-green); }
.logo-letter-10 { color: var(--color-logo-google-red); }
.logo-letter-11 { color: var(--color-logo-google-yellow); }

/* Mobile: Buchstaben etwas kleiner */
@media (max-width: 575px) {
    #header-logo-area .header-logo-text .logo-letter,
    .header-logo-text .logo-letter {
        font-size: 27px !important;
    }
}