/* =========================================
   LOGO – Gold-Akzent, dezent
   =========================================
   Farben aus colors.css (--color-kong-gold-*).
   */

.base-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-extrabold);
    letter-spacing: -0.5px;
    color: var(--color-kong-gold-bright);
    text-decoration: none;
    text-shadow: 0 0 24px var(--color-logo-glow);
    transition: color 0.25s ease, text-shadow 0.25s ease, filter 0.25s ease;
}

.base-logo:hover {
    color: var(--color-kong-gold-light);
    text-shadow: 0 0 28px var(--color-logo-glow-hover);
}

.base-nav-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-extrabold);
    letter-spacing: -0.5px;
    color: var(--color-kong-gold-bright);
    text-decoration: none;
    grid-column: 1;
    justify-self: start;
    text-shadow: 0 0 24px var(--color-logo-glow);
    transition: color 0.25s ease, text-shadow 0.25s ease, filter 0.25s ease;
}

.base-nav-logo:hover {
    color: var(--color-kong-gold-light);
    text-shadow: 0 0 28px var(--color-logo-glow-hover);
}

.base-logo-icon {
    color: inherit;
    width: 24px;
    height: 24px;
    filter: drop-shadow(0 0 6px var(--color-logo-glow));
    transition: filter 0.25s ease;
}

.base-logo:hover .base-logo-icon,
.base-nav-logo:hover .base-logo-icon {
    filter: drop-shadow(0 0 8px var(--color-logo-glow-hover));
}

.base-logo-text {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}