/* Neues Farbschema: Hellgrau, Hellblau, Grün, Rot */
/* Diese Datei überschreibt die Farben aus den anderen CSS-Dateien */

:root {
    /* Hauptfarben */
    --color-gray-light: #f5f5f5;
    --color-gray-medium: #e0e0e0;
    --color-gray-dark: #757575;
    --color-gray-text: #424242;
    
    --color-blue-light: #67bbff;
    --color-blue-medium: #4ea7f0;
    --color-blue-dark: #00366d;
    
    --color-green-light: #c8e6c9;
    --color-green-medium: #66bb6a;
    --color-green-dark: #388e3c;
    
    --color-red-light: #ffcdd2;
    --color-red-medium: #ef5350;
    --color-red-dark: #c62828;
}

/* Body & Background */
body {
    background: linear-gradient(135deg, var(--color-gray-light) 0%, var(--color-blue-light) 100%) !important;
}

/* Navigation */
nav {
    background: rgba(255, 255, 255, 0.98) !important;
    border-bottom: 3px solid var(--color-blue-medium);
}

.nav-link:hover {
    background: linear-gradient(135deg, var(--color-blue-medium) 0%, var(--color-blue-dark) 100%) !important;
    color: white !important;
}

.nav-link.active {
    background: linear-gradient(135deg, var(--color-blue-medium) 0%, var(--color-blue-dark) 100%) !important;
    color: white !important;
}

.dropdown-link:hover {
    background: linear-gradient(135deg, var(--color-blue-medium) 0%, var(--color-blue-dark) 100%) !important;
    color: white !important;
}

/* Content Section - Überschriften */
.content-section h1 {
    background: linear-gradient(135deg, var(--color-blue-dark) 0%, var(--color-green-dark) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.content-section h2 {
    color: var(--color-blue-dark) !important;
}

/* Cards */
.card {
    background: linear-gradient(135deg, var(--color-gray-light) 0%, var(--color-gray-medium) 100%) !important;
    border: 2px solid transparent !important;
}

.card:hover {
    box-shadow: 0 10px 30px rgba(25, 118, 210, 0.3) !important;
    border-color: var(--color-blue-medium) !important;
}

/* Blog Cards */
.blog-card {
    background: white !important;
    border: 2px solid var(--color-gray-medium) !important;
}

.blog-card:hover {
    box-shadow: 0 12px 40px rgba(25, 118, 210, 0.2) !important;
    border-color: var(--color-blue-medium) !important;
}

.blog-category {
    background: linear-gradient(135deg, var(--color-blue-medium), var(--color-blue-dark)) !important;
}

.read-more-btn {
    background: linear-gradient(135deg, var(--color-green-medium), var(--color-green-dark)) !important;
}

.read-more-btn:hover {
    box-shadow: 0 4px 15px rgba(56, 142, 60, 0.4) !important;
}

/* Mitglieder Cards */
.team-card {
    background: white !important;
    border: 2px solid var(--color-gray-medium) !important;
}

.team-card:hover {
    box-shadow: 0 12px 40px rgba(25, 118, 210, 0.2) !important;
    border-color: var(--color-blue-medium) !important;
}

.team-position {
    color: var(--color-blue-dark) !important;
}

.team-social a {
    background: rgba(100, 181, 246, 0.1) !important;
    color: var(--color-blue-dark) !important;
}

.team-social a:hover {
    background: linear-gradient(135deg, var(--color-blue-medium), var(--color-blue-dark)) !important;
    color: white !important;
}

/* Footer */
footer {
    background: linear-gradient(135deg, var(--color-gray-dark) 0%, #424242 100%) !important;
}

.footer-section h3 {
    color: var(--color-blue-medium) !important;
}

.footer-section h3::after {
    background: linear-gradient(90deg, var(--color-blue-medium), var(--color-green-medium)) !important;
}

.footer-links a:hover {
    color: var(--color-blue-light) !important;
}

.social-link {
    background: rgba(100, 181, 246, 0.1) !important;
    color: var(--color-blue-medium) !important;
}

.social-link:hover {
    background: linear-gradient(135deg, var(--color-blue-medium), var(--color-blue-dark)) !important;
    color: white !important;
}

.newsletter-input {
    border: 2px solid rgba(100, 181, 246, 0.3) !important;
}

.newsletter-input:focus {
    border-color: var(--color-blue-medium) !important;
}

.newsletter-btn {
    background: linear-gradient(135deg, var(--color-green-medium), var(--color-green-dark)) !important;
}

.newsletter-btn:hover {
    box-shadow: 0 5px 15px rgba(56, 142, 60, 0.4) !important;
}

.footer-bottom a {
    color: var(--color-blue-light) !important;
}

.footer-bottom a:hover {
    color: var(--color-blue-medium) !important;
}

/* Breadcrumb */
.breadcrumb {
    background: rgba(255, 255, 255, 0.95) !important;
    border-left: 4px solid var(--color-blue-medium);
}

.breadcrumb-link {
    color: var(--color-blue-dark) !important;
}

.breadcrumb-link:hover {
    color: var(--color-green-dark) !important;
}

/* Article */
.back-to-blog {
    background: rgba(100, 181, 246, 0.1) !important;
    color: var(--color-blue-dark) !important;
}

.back-to-blog:hover {
    background: linear-gradient(135deg, var(--color-blue-medium), var(--color-blue-dark)) !important;
    color: white !important;
}

.article-content h2 {
    color: var(--color-blue-dark) !important;
}

/* Theme Toggle */
.theme-toggle {
    background: white !important;
    box-shadow: 0 4px 20px rgba(100, 181, 246, 0.3) !important;
}

.theme-toggle:hover {
    box-shadow: 0 6px 25px rgba(25, 118, 210, 0.4) !important;
}

/* Scroll to Top */
.scroll-to-top {
    background: linear-gradient(135deg, var(--color-green-medium), var(--color-green-dark)) !important;
    box-shadow: 0 4px 20px rgba(56, 142, 60, 0.4) !important;
}

.scroll-to-top:hover {
    box-shadow: 0 6px 25px rgba(56, 142, 60, 0.6) !important;
}

/* Loading Spinner */
.spinner {
    border-top-color: var(--color-blue-medium) !important;
}

/* Dark Mode Anpassungen */
body.dark-mode {
    background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%) !important;
}

body.dark-mode .content-section {
    background: #3a3a3a !important;
}

body.dark-mode .content-section h1 {
    background: linear-gradient(135deg, var(--color-blue-light) 0%, var(--color-green-light) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

body.dark-mode .content-section h2 {
    color: var(--color-blue-light) !important;
}

body.dark-mode .card {
    background: linear-gradient(135deg, #4a4a4a 0%, #3a3a3a 100%) !important;
}

body.dark-mode nav {
    background: rgba(58, 58, 58, 0.95) !important;
    border-bottom: 3px solid var(--color-blue-dark);
}

body.dark-mode .dropdown {
    background: #3a3a3a !important;
}

body.dark-mode .blog-card,
body.dark-mode .team-card {
    background: #3a3a3a !important;
    border-color: #555 !important;
}

body.dark-mode .breadcrumb {
    background: rgba(58, 58, 58, 0.95) !important;
}

body.dark-mode .theme-toggle {
    background: #3a3a3a !important;
}

/* Rot für wichtige/kritische Elemente */
.error,
.alert,
.delete-btn {
    color: var(--color-red-dark) !important;
    background: var(--color-red-light) !important;
}

.error:hover,
.alert:hover, 
.delete-btn:hover {
    background: var(--color-red-medium) !important;
    color: white !important;
}

/* Farben für die Tabelle "Bisherige Clubmeister" */
.clubmeister-table thead th {
    background-color: var(--color-blue-light);
    color: var(--color-blue-dark);
}

.clubmeister-table tbody tr:nth-child(even) {
    background-color: var(--color-gray-light);
}

/* Dark-Mode Anpassungen */
body.dark-mode .clubmeister-table thead th {
    background-color: #3a3a3a !important;
    color: #ffffff !important;
}

body.dark-mode .clubmeister-table tbody tr:nth-child(even) {
    background-color: #2c2c2c !important;
}