/**
 * TOPBAR COMPONENT
 * Styles for the top contact bar with phone, email, and social media links
 */

.fixed-top .container {
    transition: 0.5s;
}

.topbar {
    padding: 2px 10px 2px 20px;
    background: var(--bs-primary) !important;
}

.topbar a,
.topbar a i {
    transition: 0.5s;
}

.topbar a:hover,
.topbar a i:hover {
    color: var(--bs-secondary) !important;
}

/* Mobile Responsive - Topbar */
@media (max-width: 991px) {
    /* Versteckt alle Elemente, die nur auf größeren Bildschirmen sichtbar sein sollen */
    .container-fluid.bg-dark .d-none.d-lg-block,
    .container-fluid.bg-dark .d-none.d-lg-flex {
        display: none !important;
    }

    /* Versteckt die Spalte mit den Social Media Links */
    .container-fluid.bg-dark .col-6.col-lg-4 {
        display: none !important;
    }

    /* Zentriert die Telefonnummer und nutzt die volle Breite der verfügbaren Spalte */
    .container-fluid.bg-dark .col-6.col-lg-8 {
        text-align: center !important;
        width: 100% !important; /* Erweitert die Spalte, um die gesamte Breite zu nutzen */
    }

    /* Stellt sicher, dass die Telefonnummer und WhatsApp-Links sichtbar bleiben */
    .container-fluid.bg-dark a[href^="tel:"], .container-fluid.bg-dark a[href^="https://wa.me/"] {
        display: inline-block !important;
    }
}

@media (min-width: 991px) {
    .container-fluid.bg-dark a[href^="https://wa.me/"] {
        display: none !important;
    }
}