/* ==========================================================================
   footer.css - site-weit geladen (header.php)
   ========================================================================== */

.site-footer {
    background: var(--color-primary-dark, #0f2a5c);
    color: rgba(255, 255, 255, .82);
    margin-top: var(--space-8, 5rem);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: var(--space-6, 3rem);
    padding: var(--space-8, 4rem) 1rem var(--space-6, 3rem);
}

.footer-brand-name {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
}

.footer-brand-name .icon {
    width: 1.3rem;
    height: 1.3rem;
}

.footer-brand p {
    margin-top: var(--space-2, .5rem);
    max-width: 340px;
    font-size: .9rem;
    color: rgba(255, 255, 255, .65);
}

.footer-col h4 {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .5);
    margin-bottom: var(--space-3, 1rem);
}

.footer-col {
    display: flex;
    flex-direction: column;
}

.footer-col a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: rgba(255, 255, 255, .82);
    text-decoration: none;
    padding: .35rem 0;
    font-size: .92rem;
    transition: color .15s ease;
}

.footer-col a:hover {
    color: #fff;
}

.footer-col .icon {
    width: 1rem;
    height: 1rem;
    opacity: .8;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding: var(--space-4, 1.5rem) 1rem;
    font-size: .82rem;
    color: rgba(255, 255, 255, .55);
}

.footer-bottom a {
    color: rgba(255, 255, 255, .75);
}

@media (max-width: 767px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--space-5, 2rem);
    }
}