/**
 * Footer Icon Styles
 * ==================
 * Einfach editierbare Icon-Farben für Light/Dark Mode
 * 
 * ANLEITUNG:
 * Ändere einfach die Farben in den :root Variablen unten!
 */

/* ============================================
   LAYOUT STYLES (nicht ändern)
   ============================================ */

.footer-widget .address-block {
    margin: 0;
    padding: 0;
}

.footer-widget .address-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 1rem !important;
    margin-bottom: 1rem !important;
    line-height: 1.6;
}

.footer-widget .address-item:last-child {
    margin-bottom: 0 !important;
}


/* ============================================
   FARBVARIABLEN (HIER ÄNDERN!)
   ============================================ */

:root {
    /* ============================================
       FOOTER ICON FARBEN (Light Mode)
       Hier kannst du die Farben ändern!
       ============================================ */
    
    --footer-icon-color: #212529;        /* Schwarz für Icons */
    --footer-icon-hover: #007bff;        /* Blau beim Hover */
    --footer-text-color: #6c757d;        /* Grau für Text */
    --footer-text-strong: #212529;       /* Schwarz für fetten Text */
    --footer-link-hover: #007bff;        /* Blau für Link-Hover */
}

/* ============================================
   DARK MODE FARBEN
   Hier kannst du die Dark Mode Farben ändern!
   ============================================ */

[data-theme="dark"] {
    --footer-icon-color: #ffffff;        /* Weiß für Icons */
    --footer-icon-hover: #4dabf7;        /* Hellblau beim Hover */
    --footer-text-color: #adb5bd;        /* Hellgrau für Text */
    --footer-text-strong: #e9ecef;       /* Hellweiß für fetten Text */
    --footer-link-hover: #4dabf7;        /* Hellblau für Link-Hover */
}


/* ============================================
   FOOTER ICON STYLING
   (Nicht ändern - nutzt die Variablen oben)
   ============================================ */

/* Icons */
.footer-widget .address-item i,
.footer-widget .fa-solid,
.footer-widget .fa-regular,
.footer-widget .fa-brands {
    color: var(--footer-icon-color) !important;
    font-size: 1.2rem;
    min-width: 25px;
    flex-shrink: 0;
    margin-top: 0.2rem;
    transition: color 0.3s ease;
}

/* Icon Hover */
.footer-widget .address-item:hover i,
.footer-widget .address-item:hover .fa-solid,
.footer-widget .address-item:hover .fa-regular,
.footer-widget .address-item:hover .fa-brands {
    color: var(--footer-icon-hover) !important;
}

/* Text Content */
.footer-widget .address-content {
    flex: 1;
    color: var(--footer-text-color);
}

/* Fetter Text */
.footer-widget .address-content strong {
    color: var(--footer-text-strong);
    font-weight: 600;
}

/* Links */
.footer-widget .address-content a {
    color: var(--footer-text-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-widget .address-content a:hover {
    color: var(--footer-link-hover);
}

/* Widget Title */
.footer-widget .widget-title {
    color: var(--footer-text-strong);
}


/* ============================================
   ALTERNATIVE FARBSCHEMATA (Optional)
   Kommentiere das gewünschte Schema aus!
   ============================================ */

/* Schema 1: Accent Color Icons */
/*
:root {
    --footer-icon-color: #007bff;
    --footer-icon-hover: #0056b3;
}
[data-theme="dark"] {
    --footer-icon-color: #4dabf7;
    --footer-icon-hover: #74c0fc;
}
*/

/* Schema 2: Grün-Akzente */
/*
:root {
    --footer-icon-color: #28a745;
    --footer-icon-hover: #218838;
}
[data-theme="dark"] {
    --footer-icon-color: #51cf66;
    --footer-icon-hover: #69db7c;
}
*/

/* Schema 3: Orange-Akzente */
/*
:root {
    --footer-icon-color: #fd7e14;
    --footer-icon-hover: #e8590c;
}
[data-theme="dark"] {
    --footer-icon-color: #ff922b;
    --footer-icon-hover: #ffa94d;
}
*/

/* Schema 4: Grau Monochrom */
/*
:root {
    --footer-icon-color: #495057;
    --footer-icon-hover: #212529;
}
[data-theme="dark"] {
    --footer-icon-color: #adb5bd;
    --footer-icon-hover: #ffffff;
}
*/


/* ============================================
   SCHNELLE FARBANPASSUNG
   ============================================ */

/* 
   BEISPIEL: Nur Icon-Farbe ändern (einfachste Methode)
   
   Ersetze #212529 und #ffffff mit deinen Farben:
*/

/*
:root {
    --footer-icon-color: #212529;  ← Deine Light Mode Farbe
}
[data-theme="dark"] {
    --footer-icon-color: #ffffff;  ← Deine Dark Mode Farbe
}
*/


/* ============================================
   FARBCODE REFERENZ
   ============================================ */

/*
Häufige Farben:

Schwarz:     #000000
Dunkelgrau:  #212529
Mittelgrau:  #6c757d
Hellgrau:    #adb5bd
Weiß:        #ffffff

Blau:        #007bff
Hellblau:    #4dabf7
Grün:        #28a745
Orange:      #fd7e14
Rot:         #dc3545
Gelb:        #ffc107
Lila:        #6f42c1
Pink:        #e83e8c
*/


/* ============================================
   RESPONSIVE ANPASSUNGEN
   ============================================ */

/* Kleinere Icons auf Mobile */
@media (max-width: 768px) {
    .footer-widget .address-item i,
    .footer-widget .fa-solid,
    .footer-widget .fa-regular,
    .footer-widget .fa-brands {
        font-size: 1rem;
        min-width: 20px;
    }
}


/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .footer-widget .address-item i,
    .footer-widget .fa-solid,
    .footer-widget .fa-regular,
    .footer-widget .fa-brands {
        color: #000000 !important;
    }
}