/* ===== SOCIAL MEDIA ICONS - KOMPLETT NEU ===== */
/* Einfache, saubere Lösung ohne Pseudo-Elemente */

/* ===== KATEGORIE-TITEL AUF STARTSEITE DUNKELROT MACHEN ===== */
html body .category-title,
html body .categories .category-title,
html body .category-card .category-title,
html body .categories-grid .category-title {
    color: #8B0000 !important;
}

/* ===== UNTERNEHMENSNAME WEISS MACHEN ===== */
html body .company-name,
html body .business-profile-container .company-name,
html body .profile-header .company-name,
html body .company-info .company-name {
    color: white !important;
}

/* ===== ALLE SERVICE-ITEMS RAHMEN ENTFERNEN ===== */
html body .service-item,
html body .services-list .service-item,
html body .business-profile-container .service-item,
html body .business-services-section .service-item,
html body .services-section .service-item,
html body div.service-item,
html body span.service-item,
html body p.service-item,
html body li.service-item,
html body .content-card .service-item,
html body .main-content .service-item,
html body .business-profile-card .service-item,
html body .profile-header .service-item,
html body .company-info .service-item {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    border-radius: 0 !important;
    padding: 8px 0 !important;
    box-shadow: none !important;
    outline: none !important;
    box-sizing: border-box !important;
}

/* ===== ZUSÄTZLICHE AGGRESSIVE ÜBERSCHREIBUNG ===== */
html body *[class*="service"] {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

html body *[class*="Service"] {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* ===== ZURÜCK-BUTTON FÜR ANGEBOTE ===== */
html body .btn-back {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #8B0000 !important;
    color: white !important;
    padding: 10px 16px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(139, 0, 0, 0.3) !important;
}

html body .btn-back:hover {
    background: #660000 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(139, 0, 0, 0.4) !important;
}

html body .btn-back-icon {
    font-size: 16px !important;
    font-weight: bold !important;
}

html body .btn-back-text {
    font-size: 14px !important;
}

html body .detail-header {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    margin-bottom: 20px !important;
    padding: 20px 0 !important;
    border-bottom: 1px solid #eee !important;
}

html body .detail-title {
    margin: 0 !important;
    color: #333 !important;
    font-size: 24px !important;
    font-weight: 600 !important;
}

/* ===== ZURÜCK-BUTTON FÜR KATEGORIEN ===== */
html body .btn-back-to-categories {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: white !important;
    color: black !important;
    padding: 12px 20px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    margin-bottom: 20px !important;
    border: 1px solid #ddd !important;
}

html body .btn-back-to-categories:hover {
    background: #f8f9fa !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

html body .category-navigation {
    margin-bottom: 20px !important;
    padding: 20px 0 0 0 !important;
}

/* ===== ROTER HEADER FÜR KATEGORIE-SEITEN ===== */
html body .category-header {
    background: #8B0000 !important;
    color: white !important;
    padding: 20px 0 !important;
}

html body .header-content {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

/*
 * Kein globales html body .back-button mehr: border-radius:25px + transparent wirkte wie Kreis/Pille
 * und überschrieb u.a. Mein Profil / Favoriten / Kontoeinstellungen (dashboard-page-banner).
 * Zurück-Buttons: .gray-card .red-banner → categories-pages.css;
 * Dashboard → style.css + categories-pages.css; Legal → .legal-page-header in den Views; usw.
 */

html body .back-arrow {
    margin-right: 8px !important;
    font-size: 1.2rem !important;
}

/* Flexbox-basierte Zentrierung ohne absolute Positionierung */
html body .title-section {
    flex: 1 !important; /* Nimmt verfügbaren Platz ein */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: auto !important;
    /* Keine absolute Positionierung mehr - funktioniert responsiv */
}

html body .category-title {
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    margin: 0 0 6px 0 !important;
    color: white !important;
}

html body .category-subtitle {
    font-size: 1rem !important;
    opacity: 0.9 !important;
    margin: 0 !important;
    color: white !important;
}

/* ===== BUTTON HOVER-EFFEKT FÜR AUTO-KATEGORIEN-SEITE ===== */
html body .category-header .btn-back,
html body .categories-section .btn-back,
html body .header-content .btn-back {
    color: white !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

/* ===== SOCIAL MEDIA ICONS - KOMPLETTE DEFINITION ===== */
.social-icon-item {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    font-size: 1.2rem !important;
    color: white !important;
    margin: 0 5px !important;
}

.social-icon-item:hover {
    transform: scale(1.1) !important;
    text-decoration: none !important;
}

.social-icon-item.disabled {
    opacity: 0.3 !important;
    cursor: not-allowed !important;
}

/* TikTok Icon */
.social-icon-tiktok {
    background: #000000 !important;
}

.social-icon-tiktok:hover {
    background: #333333 !important;
}

.social-icon-tiktok::before {
    content: "🎵" !important;
}

/* Website/Globe Icon */
.social-icon-website {
    background: #8B0000 !important;
}

.social-icon-website:hover {
    background: #660000 !important;
}

.social-icon-website::before {
    content: "🌐" !important;
}

/* WhatsApp Icon */
.social-icon-whatsapp {
    background: #25D366 !important;
}

.social-icon-whatsapp:hover {
    background: #1DA851 !important;
}

.social-icon-whatsapp::before {
    content: "💬" !important;
}

/* YouTube Icon */
.social-icon-youtube {
    background: #FF0000 !important;
}

.social-icon-youtube:hover {
    background: #CC0000 !important;
}

.social-icon-youtube::before {
    content: "📺" !important;
}

/* Instagram Icon */
.social-icon-instagram {
    background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%) !important;
}

.social-icon-instagram:hover {
    background: linear-gradient(45deg, #d0842a 0%,#d55a33 25%,#c2253a 50%,#b21f5d 75%,#a5157a 100%) !important;
}

.social-icon-instagram::before {
    content: "📷" !important;
}

/* Facebook Icon */
.social-icon-facebook {
    background: #1877F2 !important;
}

.social-icon-facebook:hover {
    background: #166FE5 !important;
}

.social-icon-facebook::before {
    content: "👥" !important;
}

html body .category-header .btn-back:hover,
html body .categories-section .btn-back:hover,
html body .header-content .btn-back:hover {
    background: white !important;
    color: #8B0000 !important;
    text-decoration: none !important;
}

/* KOMPLETT ALLE HINTERGRUNDBILDER ENTFERNEN */
html body .social-icon-item,
html body .social-icon-item *,
html body .social-icons-section .social-icon-item,
html body .business-profile-container .social-icon-item,
html body .content-card .social-icon-item,
html body .main-content .social-icon-item {
    background-image: none !important;
    background-size: initial !important;
    background-position: initial !important;
    background-repeat: initial !important;
    mask: none !important;
    -webkit-mask: none !important;
}

/* Basis-Styling für alle Social Icons */
html body .social-icon-item {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: transform 0.2s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

html body .social-icon-item:hover {
    transform: scale(1.1) !important;
}

/* TikTok - Schwarzer Kreis mit weißem Logo */
html body .social-icon-tiktok,
html body .social-icon-item.social-icon-tiktok {
    background: #000000 !important;
    color: white !important;
    font-size: 24px !important;
    font-weight: bold !important;
}

html body .social-icon-tiktok::before,
html body .social-icon-item.social-icon-tiktok::before {
    content: "\e07b" !important;
    font-family: "Font Awesome 6 Brands", "FontAwesome", sans-serif !important;
    font-weight: 400 !important;
    font-size: 24px !important;
}


/* Instagram - Farbverlauf mit weißem Logo */
html body .social-icon-instagram,
html body .social-icon-item.social-icon-instagram {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
    color: white !important;
    font-size: 24px !important;
    font-weight: bold !important;
}

html body .social-icon-instagram::before,
html body .social-icon-item.social-icon-instagram::before {
    content: "\f16d" !important;
    font-family: "Font Awesome 6 Brands", "FontAwesome", sans-serif !important;
    font-weight: 400 !important;
}


/* YouTube - Roter Kreis mit weißem Logo */
html body .social-icon-youtube,
html body .social-icon-item.social-icon-youtube {
    background: #FF0000 !important;
    color: white !important;
    font-size: 24px !important;
    font-weight: bold !important;
}

html body .social-icon-youtube::before,
html body .social-icon-item.social-icon-youtube::before {
    content: "\f167" !important;
    font-family: "Font Awesome 6 Brands", "FontAwesome", sans-serif !important;
    font-weight: 400 !important;
}


/* Facebook - Blauer Kreis mit weißem Logo */
html body .social-icon-facebook,
html body .social-icon-item.social-icon-facebook {
    background: #1877F2 !important;
    color: white !important;
    font-size: 24px !important;
    font-weight: bold !important;
}

html body .social-icon-facebook::before,
html body .social-icon-item.social-icon-facebook::before {
    content: "\f09a" !important;
    font-family: "Font Awesome 6 Brands", "FontAwesome", sans-serif !important;
    font-weight: 400 !important;
}


/* WhatsApp - Grüner Kreis mit weißem Logo */
html body .social-icon-whatsapp,
html body .social-icon-item.social-icon-whatsapp {
    background: #25D366 !important;
    color: white !important;
    font-size: 24px !important;
    font-weight: bold !important;
}

html body .social-icon-whatsapp::before,
html body .social-icon-item.social-icon-whatsapp::before {
    content: "\f232" !important;
    font-family: "Font Awesome 6 Brands", "FontAwesome", sans-serif !important;
    font-weight: 400 !important;
}


/* Website - Dunkelroter Kreis mit weißem Logo (iFundit-Farbe) */
html body .social-icon-website,
html body .social-icon-item.social-icon-website {
    background: #8B0000 !important;
    color: white !important;
    font-size: 24px !important;
    font-weight: bold !important;
}

html body .social-icon-website::before,
html body .social-icon-item.social-icon-website::before {
    content: "\f0ac" !important;
    font-family: "Font Awesome 6 Free", "FontAwesome", sans-serif !important;
    font-weight: 900 !important;
}


/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    html body .social-icon-item {
        width: 45px !important;
        height: 45px !important;
        font-size: 20px !important;
    }
}

@media (max-width: 480px) {
    html body .social-icon-item {
        width: 40px !important;
        height: 40px !important;
        font-size: 18px !important;
    }
}