/* css/_visitor.css - FINAL VERSION: Styling für den Besucher-Button und das Statistik-Modal */

/* ========================================================= */
/* 1. Besucher-Button im Footer (#openVisitorModal)          */
/* ========================================================= */

/* Setzt die Basis-Schriftart für den Button-Container */
#openVisitorModal {
    font-family: 'Exo 2', system-ui, sans-serif !important; 
}

/* Stellt sicher, dass das Icon und die Zahl korrekt formatiert sind */
#openVisitorModal i {
    /* Fügt den nötigen Abstand zwischen Icon und Zahl hinzu */
    margin-right: 5px; 
}

/* Die ultimative Regel für die Ziffer (Counter) */
#visitorCount {
    /* 1. Setzt die gewünschte Schriftart */
    font-family: 'Exo 2', system-ui, sans-serif !important; 
    
    /* 2. Resets, um alle Konflikte mit Icon-Fonts zu beheben */
    font-style: normal !important; 
    font-variant: normal !important;
    text-transform: none !important;
    
    /* 3. Design-Styles */
    font-weight: 700 !important;
    color: var(--accent-color) !important;
    font-size: 1.1em !important;
    
    /* Optionale Schatten-Regel */
    text-shadow: 0 0 2px rgba(var(--accent-color-rgb), 0.5);
}


/* ========================================================= */
/* 2. Statistik Modal Styles (.visitor-content)              */
/* ========================================================= */

.visitor-content {
    /* Max-Breite anpassen, da der Inhalt schmaler ist */
    max-width: 350px; 
}
.visitor-content h2 {
    /* Setzt die Farbe auf Orange (var(--accent-color)) */
    color: var(--accent-color); 
    
    /* Stellt die gleiche Formatierung wie bei den anderen Modals sicher */
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.5em;
    text-align: center;
    font-family: 'Exo 2', system-ui, sans-serif;
}
/* Stellt sicher, dass alle Texte im Modal Orbitron verwenden */
.visitor-content h2, 
.visitor-content .stat-label, 
.visitor-content .stat-value {
    font-family: 'Exo 2', system-ui, sans-serif;
}

/* Tabellen-Layout für Statistiken (simuliert eine Tabelle mit Flexbox) */
.stats-table {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Abstand zwischen den Zeilen */
    margin-top: 20px;
}

.stat-item {
    display: flex;
    justify-content: space-between; /* Links und rechts bündig */
    align-items: center;
    padding: 8px 0;
    /* Linie zur Trennung der Einträge */
    border-bottom: 1px dashed var(--divider-color);
}

.stat-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.stat-label {
    font-size: 1em;
    font-weight: normal;
    color: var(--text-color);
}

.stat-value {
    font-size: 1.1em;
    font-weight: bold;
    /* WICHTIG: Die Werte in Orange (var(--accent-color)) */
    color: var(--accent-color);
    text-shadow: 0 0 2px rgba(var(--accent-color-rgb), 0.3);
}

/* Hervorhebung für die Gesamt-Zahl (Total) */
.total-stat {
    margin-top: 10px;
    padding-top: 15px;
    /* Dickere Akzentlinie oben */
    border-top: 2px solid var(--accent-color) !important;
}

.total-stat .stat-label {
    font-weight: 600;
}
.total-stat .stat-value {
    font-size: 1.3em; /* Etwas größer für die Gesamtzahl */
}