/* css/_share.css - Spezialisiertes CSS für den Teilen-Button und das Teilen-Menü */

/* ========================================================= */
/* 1. TEILEN-BUTTON IM FOOTER (Spezifisch für #shareButton)  */
/* Das Styling ist angepasst, da der Text "Teilen" entfernt wurde */
/* ========================================================= */

#shareButton {
    background: var(--panel-bg);
    border: 1px solid var(--divider-color);
    color: var(--text-color);
    
    /* NEU: Kompaktes Padding für einen quadratischen Icon-Button */
    padding: 8px 10px; 
    
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.1em;
    transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.1s;
    line-height: 1; 
}

#shareButton:hover {
    background: var(--divider-color);
    color: var(--accent-color); 
}

#shareButton:active {
    transform: scale(0.98);
}

#shareButton i {
    /* NEU: Kein Abstand mehr, da kein Text folgt */
    margin-right: 0;
    font-size: 1.2em; 
}

/* ========================================================= */
/* 2. TEILEN-MENÜ STYLES (#shareModal)                       */
/* ========================================================= */

.share-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
}

.share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.2s, opacity 0.2s;
    text-decoration: none; 
    color: var(--color-text-inverted, #fff); 
}

.share-btn i {
    margin-right: 10px;
    font-size: 18px;
}

/* Link kopieren/Bild herunterladen */
#share-copy-link, #share-download-img {
    background-color: var(--color-highlight);
    color: #000;
}

#share-copy-link:hover, #share-download-img:hover {
    background-color: var(--color-highlight-hover);
}

hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: 10px 0;
}

/* Social Media Button Farben */
.share-btn.facebook { background-color: #3b5998; }
.share-btn.twitter { background-color: #1da1f2; }
.share-btn.whatsapp { background-color: #25d366; }
.share-btn.telegram { background-color: #0088cc; }
.share-btn.email { 
    background-color: var(--color-background-primary-dark);
    border: 1px solid var(--color-border);
}

.share-btn:hover {
    opacity: 0.9;
}

/* In css/_share.css */

.share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.2s, opacity 0.2s;
    text-decoration: none; 
    color: var(--color-text-inverted, #fff); 
    
    /* NEU: Orbitron für die Buttons */
    font-family: 'Exo 2', system-ui, sans-serif; 
}

.share-btn i {
    margin-right: 10px;
    font-size: 18px;
}