/* ==========================================================================
   footer.css
   --------------------------------------------------------------------------
   Overrides fuer den Site-Footer.
   - Kontakt-Spalte etwas breiter, damit Tel-Nummer und E-Mail nicht haesslich
     umbrechen
   - .footer-contact-item: display:block statt flex, damit Inhalte
     sauber per <br> stacken
   - Tel-Link und Mail-Link bekommen white-space:nowrap, damit sie nicht in
     der Mitte eines Tokens umbrechen
   ========================================================================== */

@media (min-width: 901px) {
    .footer-grid {
        grid-template-columns: 1.6fr 1fr 1fr 1.2fr 1.4fr;
        gap: 40px;
    }
}

.footer-contact-item {
    display: block;
    line-height: 1.65;
}
.footer-contact-item + .footer-contact-item {
    margin-top: 14px;
}
.footer-contact-item a[href^="tel:"],
.footer-contact-item a[href^="mailto:"] {
    white-space: nowrap;
    display: inline-block;
}

/* Plain-Text <li> in Footer-Spalten (z. B. Taetigkeitsbereiche) auf den
   gleichen Style wie die Link-<li> setzen (Schriftgroesse, Farbe). */
.footer-col li {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.92rem;
    line-height: 1.6;
}

/* ==========================================================================
   FOOTER-BOTTOM: Copyright + BDSF-Badge links, Rechtslinks rechts
   ========================================================================== */
.footer-bottom-left {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* BDSF-Mitgliedschaftslogo (Wide-Footer-Variante 1020x100)
   Die Bildquelle hat bereits einen weissen Hintergrund eingebaut,
   daher hier kein zusaetzlicher Pill, nur leichte Rundung. */
.footer-bdsf-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 4px;
    overflow: hidden;
    text-decoration: none;
}
.footer-bdsf-badge img {
    display: block;
    height: 32px;     /* bei 1020x100 -> ~326px breit, sehr passend im Footer-Bottom */
    width: auto;
}

@media (max-width: 900px) {
    .footer-bottom-left {
        justify-content: center;
        width: 100%;
    }
}