.footer-cta h2,
.footer-cta p {
    color: var(--color-white);
}

.footer-cta .hero-actions {
    justify-content: center;
}

.footer-cta {
    margin-top: 0 !important;
}

.contact-item .contact-link {
    display: inline-block;
    max-width: fit-content;
}


/* ==========================================================================
   FOOTER (clean, 4/5 columns support)
   Titel: schwarz | Fließtext & Links: var(--color-gray)
   ========================================================================== */

/* -------- Struktur -------- */

/* Dein flexbox-grid nutzt Item-Padding als Gutter -> kein extra gap */
.footer-columns { gap: 0 !important; }

/* Spalten-Inhalte oben beginnen */
.footer-columns .flexbox-grid-item { align-self: flex-start; }

/* Divider dezent (auf schwarzer Basis, aber unabhängig von Textfarbe) */
.footer-divider {
    border-top: 1px solid rgba(var(--color-black-rgb), .15) !important;
    margin: var(--space-xl) 0 var(--space-lg);
}

/* -------- Farben/Texte im Footer -------- */

/* Basisfarbe für Text im Footer: grau (überschreibt .text-white am Container)
   -> nur die Titel färben wir weiter unten gezielt schwarz */
footer.bg-primary.text-white,
footer.bg-primary.text-white * {
    color: var(--color-gray);
}

/* Titel explizit schwarz, höher spezifiziert als .text-white */
.footer-section .footer-title,
.footer-nav .footer-title,
.social-nav .footer-title,
.footer-hours .footer-title {
    color: var(--color-black);
    font-family: var(--font-serif);
    margin-bottom: var(--space-md);
}

.text-sm.text-white {
    color: var(--color-gray);
}

/* Claim unter „Soulplace“ (Fließtext = grau) */
.footer-tagline {
    margin: var(--space-sm) 0 var(--space-md);
    color: var(--color-gray);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--line-height-base);
}

/* -------- Listen-Resets -------- */
.footer-nav ul,
.contact-list,
.hours-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 240px;
}

.contact-list {
    max-width: 100%
}

/* -------- Navigation (Menü / Social) -------- */
/* Auch wenn <a> die Klasse .text-white hat, gewinnt diese spezifischere Regel */
.footer-nav a,
.footer-nav .text-white:not(.footer-title),
.social-nav a,
.social-nav .text-white:not(.footer-title) {
    color: var(--color-gray);
    display: block;
    margin-top: var(--space-sm);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: 400;
    text-decoration: none;
    transition: opacity var(--button-transition);
}

.footer-nav a:hover,
.social-nav a:hover { opacity: .85; }

/* -------- Kontakt -------- */
.contact-item {
    display: grid;
    grid-template-columns: 18px 1fr;
    align-items: start;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
    color: var(--color-gray);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--line-height-base);
}
.contact-icon { line-height: 0; color: var(--color-gray); }
.contact-icon svg { width: 18px; height: 18px; }

.contact-link {
    color: var(--color-gray);
    text-decoration: none;
    transition: opacity var(--button-transition);
}
.contact-link:hover { opacity: .85; }

/* -------- Öffnungszeiten -------- */
.hours-row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-sm);
    color: var(--color-gray);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--line-height-base);
}
.hours-time { color: var(--color-gray); }

/* -------- Footer-Bottom -------- */
.footer-bottom {
    padding: var(--space-sm) 0;
    color: var(--color-gray);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 400;
}
.footer-bottom a { color: var(--color-gray); text-decoration: none; transition: opacity var(--button-transition); }
.footer-bottom a:hover { opacity: .85; }
.footer-bottom span { color: var(--color-gray); }

/* -------- Responsive -------- */
/* Mobile: 1 Spalte (Basisregeln) */
/* Tablet: 2 Spalten per .flexbox-grid-item-sm */
@media (min-width: 576px) and (max-width: 991px) {
    .footer-columns .flexbox-grid-item-sm { flex: 1 1 50%; }
}

/* Desktop: 30/30/20/20 über deine Klassen .flexbox-grid-item-30 / -20 */

/* Footer-Bottom Stack auf Mobile */
@media (max-width: 768px) {
    .footer-bottom { display: flex; flex-direction: column-reverse; }
    .footer-bottom-nav { display: flex; flex-direction: column; align-items: flex-start; }
    .footer-bottom a { margin-bottom: calc(var(--space-md) * 1.5); }
    .footer-bottom p { margin-top: var(--space-l); width: 100%; }
    .footer-bottom .mx-3 { display: none; }

    .footer-section .footer-title,
    .footer-nav .footer-title,
    .social-nav .footer-title,
    .footer-hours .footer-title {
        margin-top: 20px;
    }
}

/* -------- Optionale Helpers (falls genutzt) -------- */
.logo-footer .btn { max-width: 260px; }
.mail-footer {
    font-family: var(--font-sans);
    font-size: var(--text-2xl);
    font-weight: 400;
    margin-bottom: var(--space-lg) !important;
}