/* === JOBLINX - FINALES LIGHT THEME (KONZEPT 'EUER HELD') V2 === */

/* --- 1. Import der neuen, eleganten Schriftart --- */
/* WICHTIG: Dieser Import MUSS die allererste Zeile in der Datei sein. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

/* --- 2. Das neue Design-System ("Anthrazit-Rahmen & Sandstein-Herz") --- */
:root {
    /* Neue, elegante Schriftart für die gesamte Seite */
    --font-family-sans: 'Poppins', 'Roboto', sans-serif;

    /* Helle, warme Grundfarben (Sandstein & Leinen) */
    --background-color: #F7F2EC;    /* Warmer, heller Sand-Ton für den Seitenhintergrund */
    --surface-color: #FCFBF9;       /* Heller Leinen-Ton (gebrochenes Weiß) für alle Karten */
    --surface-color-hover: #F2EBE2;  /* Etwas dunklerer Ton für Karten-Hover */
    
    /* Dunkle Schriftfarben */
    --text-color-dark: #3D4752;     /* Weiches Anthrazit für Haupttext & Rahmen (Header/Footer) */
    --text-color-medium: #8A9199;   /* Angepasstes Grau für sekundären Text & Icons */
    
    /* Akzent- & Randfarben */
    --accent-color-red: #D95B43;        /* Warmes Terrakotta-Rot als Hauptakzent */
    --accent-color-red-hover: #C04A31;  /* Dunkleres Rot für Hover */
    --border-color: #EAE0D3;            /* Subtile Border passend zum Sand-Ton */
    
    /* Beibehaltene Pastellfarbe für Job-Tags (Dein Wunsch) */
    --pastel-lavender: #EAE6EF;
    --pastel-lavender-text: #5E35B1;
    /* Das unpassende Blau wurde entfernt. */

    /* Angepasster, weicher Schatten */
    --box-shadow: 0 5px 15px rgba(61, 71, 82, 0.08);

    /* Original-Gold (nur noch für Logo & Profil-Ring) */
    --gold-color: #d4af37;
}

/* --- 3. Globale Stil-Überschreibungen --- */
body {
    font-family: var(--font-family-sans);
    background-color: var(--background-color); /* Nutzt jetzt den neuen Sand-Ton */
    color: var(--text-color-dark);
}
h1, h2, h3, h4, h5, h6 { color: var(--text-color-dark); }



/* Globale Stile für alle Links */
a {
    color: var(--text-color-dark); /* Standard-Linkfarbe ist dunkel */
    text-decoration: none;
    transition: color 0.2s ease;
}
a:hover {
    color: var(--pastel-lavender-text) !important; /* Hover-Farbe ist Lavendel-Text (lila) */
}

/* --- HEADER, FOOTER & NAVIGATION --- */

/* Haupt-Header & Mobile Navigationsleiste */
#main-header, .mobile-bottom-nav {
    background-color: var(--text-color-dark) !important;
    border-bottom: 1px solid #4a5561 !important;
    border-top: none; /* Verhindert doppelte Ränder */
}

/* Alle Icons & Text-Links im Header */
#main-header .nav-links-desktop a,
#main-header .header-icon-link {
    color: #CCCCCC !important; /* Helleres Grau für permanente Sichtbarkeit */
}

/* Hover- & Aktiv-Zustand für Icons/Links */
#main-header .nav-links-desktop a:hover,
#main-header .header-icon-link:hover,
#main-header .nav-links-desktop a.active,
#main-header .header-icon-link.active {
    color: #ffffff !important; /* Reines Weiß, wenn aktiv oder bei Hover */
}

/* Suchleiste im Header */
#main-header .global-search-bar input {
    background-color: #4a5561 !important;
    color: #ffffff !important;
    border-color: #4a5561 !important;
}
#main-header .global-search-bar input::placeholder {
    color: var(--text-color-medium) !important;
}

/* Haupt-Footer */
#main-footer {
    background-color: var(--text-color-dark);
    color: var(--text-color-medium);
}
#main-footer a {
    color: var(--surface-color);
}

/* --- 4. Überarbeitung der Komponenten --- */


/* KORREKTUR: Der "Guthaben"-Button im Dashboard */
#balance-card {
    background-color: var(--accent-color-red) !important;
    color: #ffffff !important;
    border: none !important;
}

/* KORREKTUR: Gold aus den Dashboard-Statistiken entfernen */
.admin-kpi-card p {
    color: var(--text-color-dark);
}
/* Ausnahme: Die "Premium Gold"-Infobox darf golden bleiben */
.admin-kpi-card h3[style*="color: var(--primary-color)"] {
    color: var(--gold-color) !important;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(61, 71, 82, 0.12);
}

/* Buttons: Haupt-Call-to-Action (neu) */
.btn-accent { background-color: var(--accent-color-red); color: #ffffff; font-weight: 600; }
.btn-accent:hover { background-color: var(--accent-color-red-hover); color: #ffffff; }

/* Buttons: Standard-Button (.btn) */
.btn { background-color: var(--surface-color); color: var(--text-color-dark); border: 1px solid var(--border-color); font-weight: 600; }
.btn:hover { background-color: #f7f7f7; color: var(--text-color-dark); }

/* Buttons: Sekundärer Button (.btn-secondary) - der "Ghost Button" */
.btn-secondary { background-color: transparent; color: var(--text-color-medium); border: 1px solid var(--border-color); }
.btn-secondary:hover { background-color: transparent; color: var(--text-color-dark); border-color: var(--text-color-dark); }

/* Community: Finaler Hover-Effekt für ALLE Aktions-Buttons (Lavendel) */
.post-card .post-footer button:hover,
.comment-footer button:hover { /* KORREKTUR: Nutzt jetzt die korrekte Klasse '.comment-footer' */
    background-color: #EAE6EF !important; /* Heller Lavendel-Ton */
    color: var(--text-color-dark) !important; /* Dunkler Text für Lesbarkeit */
    border-color: #DCD8E2 !important; /* Passender, dunklerer Lavendel-Rand */
}

/* 1. Passt die Farbe der Like- und Kommentar-Anzahl an den Sekundärtext an */
.post-reaction-summary .like-summary-btn,
.post-reaction-summary .comment-count-display {
    color: var(--text-color-medium) !important; /* Setzt die korrekte, lesbare Farbe */
}
/* BONUS-FIX: Hover-Effekt für Like-Anzahl an das Lavendel-Design anpassen */
.post-reaction-summary .like-summary-btn:hover {
    background-color: #EAE6EF !important;
}

/* 2. Macht die Namen in der "Wer hat geliked"-Liste kräftig dunkel */
.modal-body .request-info .admin-table-link {
    color: var(--text-color-dark) !important;
    font-weight: 600; /* Macht den Namen zusätzlich halbfett für bessere Lesbarkeit */
}

.post-menu-dropdown,
.comment-menu-dropdown {
    background-color: var(--surface-color) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--box-shadow) !important;
    backdrop-filter: none !important; /* Entfernt den alten Glas-Effekt */
}

.post-menu-dropdown button,
.comment-menu-dropdown button {
    color: var(--text-color-dark) !important;
}

.post-menu-dropdown button:hover,
.comment-menu-dropdown button:hover {
    background-color: var(--surface-color-hover) !important;
    color: var(--text-color-dark) !important;
}
.modal-body .report-block-option {
    color: var(--text-color-dark) !important;
    border-top: 1px solid var(--border-color); /* Ersetzt die alte durch eine saubere Trennlinie */
}
.modal-body .report-block-options-list {
    border-top: none; /* Entfernt eine eventuelle doppelte Linie am Anfang der Liste */
}
.modal-body .report-block-option:hover {
    color: var(--accent-color-red) !important; /* Text wird beim Hover rot, wie im Konzept vorgesehen */
    background-color: var(--surface-color-hover) !important; /* Sandfarbener Hover-Hintergrund */
}

/* Formulare im neuen Design */
.form-group > input, .form-group > select, .form-group > textarea, input[type="number"], .search-bar input, .global-search-bar input, .comment-input, .chat-input-form textarea {
    background-color: var(--surface-color); color: var(--text-color-dark); border: 1px solid var(--border-color); border-radius: 8px; }
.form-group input:focus, .form-group textarea:focus { border-color: var(--accent-color-red); box-shadow: 0 0 0 3px rgba(217, 91, 67, 0.15); outline: none; }
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-color-medium); }

/* Spezifische Anpassung für den Platzhalter im Community-Post-Feld */
.create-post-container textarea::placeholder {
    color: #A0A8B1 !important; /* Noch dunkleres, sattes Grau für perfekte Lesbarkeit */
    opacity: 1; /* WICHTIG: Verhindert, dass der Browser den Text transparent macht */
}
/* === FIX: EINGABE-TEXTFARBE FÜR COMMUNITY POSTS === */

/* Zwingt den Text im Eingabefeld auf Dunkelgrau/Schwarz */
.create-post-card textarea {
    color: var(--text-color-dark) !important;
}

/* Stellt sicher, dass der Platzhalter eine etwas hellere Farbe hat (optional, aber schöner) */
.create-post-card textarea::placeholder {
    color: var(--text-color-medium) !important;
    opacity: 1;
}

.share-menu .share-option-btn {
    background-color: var(--surface-color) !important;
    color: var(--text-color-dark) !important;
    border: 1px solid var(--border-color) !important;
}
.share-menu .share-option-btn:hover {
    background-color: var(--surface-color-hover) !important;
    color: var(--accent-color-red) !important; /* Akzentfarbe für den Text beim Hovern */
    border-color: var(--accent-color-red) !important; /* Akzentfarbe für den Rand beim Hovern */
}

.suggestion-card-more h3,
.suggestion-card-more span {
    color: var(--text-color-dark) !important;
}
.suggestion-card-more h3 {
    font-weight: 700 !important; /* Macht die "Mehr"-Überschrift (h3) fett */
}

.suggestion-card .suggestion-title,
.suggestion-card .suggestion-location {
    color: #FFFFFF !important;
}

.request-info strong {
    color: var(--text-color-dark) !important; /* Erzwingt die dunkle, klare Schriftfarbe */
    font-weight: 700 !important; /* Stellt sicher, dass der Name fett ist */
}
.request-info p {
    color: var(--text-color-medium) !important; /* Passt den sekundären Text an das Design an */
}

/* Statistik-Seite: Filter-Buttons an das Light-Theme anpassen */
.stats-filter-bar .btn-secondary,
.stats-filter-bar .date-range-picker {
    color: var(--text-color-dark) !important;
}

.stats-filter-bar .btn-secondary:hover {
    background-color: var(--surface-color-hover) !important;
}

.stats-filter-bar .btn-secondary.active {
    background-color: var(--accent-color-red) !important;
    border-color: var(--accent-color-red) !important;
    color: #ffffff !important;
}

/* Dashboard: Goldene Markierungen durch Akzentfarbe Rot ersetzen */
.card[style*="border-left"][style*="--primary-color"] {
    border-left-color: var(--accent-color-red) !important;
}

/*  Dashboard: Lesbarkeit der Profilbesucher-Namen korrigieren */
.dashboard-visitor-info strong {
    color: var(--text-color-dark) !important;
}

/* Hilfe-Center: Akkordeon-Fragen an das Light-Theme anpassen */
.accordion-header {
    color: var(--text-color-dark) !important; /* Macht den Text kräftig dunkel */
    font-weight: 600; /* Macht den Text halbfett für bessere Lesbarkeit */
}

.accordion-header:hover {
    background-color: var(--surface-color-hover) !important; /* Sandfarbener Hover-Effekt */
}

/* AGB-Seite: Navigation an das Light-Theme anpassen */
.toc-sidebar h2,
.toc-sidebar .index-link {
    color: var(--text-color-dark) !important; /* Macht die Überschrift & Links kräftig dunkel */
}

.toc-sidebar .index-link.active {
    color: var(--accent-color-red) !important; /* Aktiver Link wird Rot statt Gold */
    border-left-color: var(--accent-color-red) !important; /* Linker Rand wird ebenfalls Rot */
}

[style*="color"][style*="--primary-color"] {
    color: var(--accent-color-red) !important;
}

/*  Admin-Bereich: Suchleiste an das Light-Theme anpassen */
.admin-search-bar input {
    color: var(--text-color-dark) !important;
}

/* Helden-Übersicht: Bewertungs-Button an das Light-Theme anpassen */
.profile-card .profile-rating,
.profile-detail-header .profile-rating {
    background-color: var(--pastel-lavender) !important; /* Heller Lavendel-Hintergrund */
    border: 1px solid #DCD8E2 !important; /* Passender, etwas dunklerer Rand */
}
.profile-card .profile-rating:hover,
.profile-detail-header .profile-rating:hover {
    background-color: #DCD8E2 !important; /* Etwas dunkleres Lavendel für einen sichtbaren Hover-Effekt */
}
/* Job-Karten: "Details ansehen"-Button an den Lavendel-Hover anpassen */
.job-card .job-details-btn:hover,
.profile-card .profile-action-btn:hover { /* Gilt für beide Button-Typen */
    background-color: var(--surface-color) !important; /* Hintergrund bleibt hell, überschreibt andere Hover-Effekte */
    color: var(--pastel-lavender-text) !important; /* Nur die Schrift wird lila */
}

/*  Bewertungs-Modal: Hover-Effekt für Sterne-Zeilen korrigieren */
.modal-body .rating-bar-row:hover {
    background-color: #EAE6EF !important; /* KORREKTUR: Lavendel für besseren Kontrast */
    color: var(--text-color-dark) !important; /* Stellt sicher, dass der Text ("5 Sterne") dunkel bleibt */
}



/* --- 5. Spezifische Anpassungen für Ansichten --- */

/* KORREKTUR: Job-Karten & Icons überarbeiten */
.job-type-badge {
    background-color: var(--pastel-lavender) !important;
    color: var(--pastel-lavender-text) !important;
    font-weight: 600;
}
.favorite-job-button, .share-job-button {
    /* Der neue "Ghost Button"-Stil für saubere Icons */
    background: transparent !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color-medium) !important;
    backdrop-filter: none !important; /* Wichtig, um den Glaseffekt zu entfernen */
}
.favorite-job-button:hover, .share-job-button:hover {
    background: #ffffff !important;
    color: var(--text-color-dark) !important;
    border-color: var(--border-color) !important;
}
.favorite-job-button.favorited {
    background-color: var(--accent-color-red) !important;
    border-color: var(--accent-color-red) !important;
    color: #ffffff !important;
}

/* KORREKTUR: Gold bei den Bewertungssternen ersetzen */
.star-icon, .profile-rating .rating-value {
    color: var(--accent-color-red) !important;
}

/* Dashboard-Karten-Titel */
.action-card h3 { color: var(--accent-color-red) !important; }

/* Chat-Bubbles */
.message-bubble.sent { background-color: var(--accent-color-red); color: #ffffff; }
.message-bubble.received { background-color: #EAE6EF; color: var(--text-color-dark); border: 1px solid var(--border-color); }

/* Aktivitäten-Liste: Text dunkler für bessere Lesbarkeit */
.activity-item .activity-text, .notification-item .notification-text {
    color: var(--text-color-dark) !important;
}

/* Tags in Pastellfarben */
.tag { background-color: var(--pastel-blue); color: var(--pastel-blue-text); font-weight: 600; }

/* Theme-Switcher Kachel */
.theme-switcher-light h3, .theme-switcher-light p { color: #ffffff !important; }

/* --- 6. Ausnahmen: Elemente, die GOLD bleiben --- */
.pro-avatar { border: 3px solid var(--gold-color) !important; box-shadow: 0 0 8px rgba(212, 175, 55, 0.5); }
.logo a::after { color: var(--gold-color); }



/* 2. Plus- und Fragezeichen-Buttons rot färben */
.btn-create-plus,
.floating-support-btn {
    background-color: var(--accent-color-red);
    border-color: var(--accent-color-red);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(217, 91, 67, 0.3); /* Weicher roter Schatten */
}
.btn-create-plus:hover,
.floating-support-btn:hover {
    background-color: var(--accent-color-red-hover);
    border-color: var(--accent-color-red-hover);
    color: #ffffff;
}

/* 3. Lesbarkeit und Stil des Profil-Dropdown-Menüs anpassen */
#main-header .profile-dropdown {
    background-color: var(--text-color-dark);
    border: 1px solid #4a5561;
}
#main-header .profile-dropdown a {
    color: #FFFFFF !important; /* Reines Weiß für maximalen Kontrast */
}
#main-header .profile-dropdown a:hover {
    background-color: #4a5561;
    color: #FFFFFF !important;
}

/* 4. Admin Panel an das neue Design anpassen (Dunkle Sidebar) */
.admin-sidebar {
    background-color: var(--text-color-dark); /* Dunkle Sidebar, passend zum Rahmen */
    border-right: 1px solid #4a5561;
}
.admin-logo h3 {
    color: #ffffff; /* Heller Logo-Text */
}
.admin-nav a {
    color: #CCCCCC; /* Helleres Grau für permanente Lesbarkeit */
}
.admin-nav a:hover {
    background-color: #4a5561; /* Leichter Hover-Effekt */
    color: #ffffff;
}
.admin-nav a.active {
    background-color: var(--accent-color-red); /* Roter Akzent für aktive Links */
    color: #ffffff; /* Weiße Schrift für den aktiven Link */
}
/* Bewertungs-Modal: Hintergrund an das Sand-Design anpassen */
.modal-content {
    background-color: var(--background-color) !important; /* Sand-Hintergrund für das gesamte Modal-Fenster */
}

/* === FEINSCHLIFF & KORREKTUREN V4 === */

/* 1. & 2. Bessere Lesbarkeit in Detailansichten (Job & Profil) */
/* Wir machen den oberen Info-Block dunkler für mehr Kontrast */
.job-detail-header, .profile-detail-header {
    background-color: #ECE9F1; /* Ein etwas dunklerer Lila-Ton */
    padding: 24px;
    border-radius: 12px;
}

/* 3. Postfach: Bessere Lesbarkeit durch dunklere Einträge */
.conversation-item {
    background-color: var(--surface-color-lavender);
    border: 1px solid var(--border-color);
}
.conversation-item:hover {
    background-color: #EAE6EF; /* Etwas dunkler beim Hovern */
}
.conversation-item.unread {
    background-color: #ffffff; /* Ungelesene Nachrichten bleiben hell als Kontrast */
}

/* 4. Bewertungs-Modal: Dunkleres Design für Lesbarkeit */
.modal-body .rating-summary-header,
.modal-body .comment-body {
    background-color: #ECE9F1; /* Dunklerer Hintergrund */
}
.modal-body .average-rating-stars {
    color: var(--accent-color-red); /* Rote Sterne */
}
.modal-body .rating-bar-fill {
    background-color: var(--accent-color-red); /* Rote Balken */
}

/* 5. Helden-Übersicht: Lavendel-Ton für Info-Boxen */
.profile-detail-body .card {
    background-color: var(--surface-color-lavender);
    border: 1px solid var(--border-color);
}

/* 6. Admin-Bereich: Filter-Buttons anpassen */
.admin-ticket-filters .btn-secondary,
.user-detail-tabs .btn-secondary,
.finance-log-filters .btn-secondary {
    /* Standard-Button-Stil (hell) */
    background-color: var(--surface-color);
    color: var(--text-color-medium);
    border: 1px solid var(--border-color);
}
.admin-ticket-filters .btn-secondary:hover,
.user-detail-tabs .btn-secondary:hover,
.finance-log-filters .btn-secondary:hover {
    background-color: var(--surface-color-hover);
    color: var(--text-color-dark);
    border-color: var(--border-color);
}
.admin-ticket-filters .btn-secondary.active,
.user-detail-tabs .btn-secondary.active,
.finance-log-filters .btn-secondary.active {
    /* Der aktive Button wird rot, passend zum Akzent */
    background-color: var(--accent-color-red);
    color: #ffffff;
    border-color: var(--accent-color-red);
}

/* 7. Alle Schalter (Toggle Switches) an das neue Design anpassen */
.slider {
    background-color: #ccc; /* Ausgeschalteter Zustand (Grau) */
}
input:checked + .slider {
    background-color: var(--accent-color-red); /* Eingeschalteter Zustand (Rot) */
}

/* === FEINSCHLIFF & KORREKTUREN V5 (Lesbarkeit & Admin) === */

/* --- ALLGEMEINE VERBESSERUNG DER LESBARKEIT --- */

/* Wir machen die mittel-helle Schriftfarbe global dunkler */
:root {
    --text-color-medium: #6A747D; /* Etwas dunkler für besseren Kontrast */
}

/* --- KORREKTUREN FÜR DEN ADMIN-BEREICH --- */

/* 1. Admin-Grafiken & Tabellen (Gold entfernen) */
/* HINWEIS: Die Farbe von Chart.js-Grafiken wird im JavaScript gesetzt.
   Dieser CSS-Code färbt aber alle anderen Elemente wie Tabellenköpfe um. */
.admin-table th {
    color: var(--text-color-dark);
}

/* 2. Admin-Sidebar: "Zur Hauptseite"-Button Hover-Effekt korrigieren */
.admin-footer a {
    background-color: transparent;
    color: var(--text-color-medium);
    border: 1px solid var(--text-color-medium);
    transition: all 0.2s ease;
}
.admin-footer a:hover {
    background-color: #ffffff;
    color: var(--text-color-dark);
    border-color: #ffffff;
}

/* --- KORREKTUREN FÜR MODALS & ÜBERSICHTEN --- */

/* 3. Klare Schrift in Modals und Detailansichten */
/* Labels in Filter-Modals */
.modal-body label {
    color: var(--text-color-dark);
}
/* Zusätzliche Texte im Bewertungs-Modal */
.modal-body .rating-total-count,
.modal-body .rating-overall-impression,
.modal-body .comment-body {
    color: var(--text-color-dark);
}
/* Speziell der "für den Job"-Link */
.modal-body .comment-body a {
    color: var(--accent-color-red);
    font-weight: 600;
}

/* === FEINSCHLIFF & KORREKTUREN V6 (Finale Version) === */

/* --- GRAFIKEN & DIAGRAMME --- */

/* 1. Bewertungs-Balken: Hintergrund-Leiste anpassen */
.modal-body .rating-bar-container {
    background-color: transparent; /* Entfernt den hässlichen schwarzen Hintergrund */
    border: 1px solid var(--border-color); /* Fügt einen sauberen, hellen Rand hinzu */
}

/* 2. Admin-Grafiken (Hinweis zu JS bleibt bestehen) */
/* Dieser Block bleibt leer, da die Haupt-Chart-Farben im JS-Code liegen müssen.
   Andere goldene Elemente im Admin-Bereich sollten bereits korrigiert sein. */


/* --- LESBARKEIT & KONTRAST --- */

/* 3. Profilübersicht: Name klar und deutlich lesbar machen */
.profile-detail-info h1 {
    color: var(--text-color-dark) !important; /* Erzwingt die dunkle, klare Schriftfarbe */
}
/* Zusätzliche Texte im Header-Block ebenfalls dunkler machen */
.profile-detail-info .profession, .profile-detail-info .meta-info {
    color: var(--text-color-medium) !important;
}

/* 4. Statistiken: Tabellen-Inhalt klar lesbar machen */
.admin-table tbody tr {
    color: var(--text-color-dark); /* Stellt sicher, dass der Text in Tabellenzeilen dunkel ist */
}

/* KORREKTUR: Footer-Design für mobile Ansicht */
@media (max-width: 850px) {
    #main-footer {
        background-color: var(--text-color-dark);
        color: var(--text-color-medium);
    }
    #main-footer a {
        color: var(--surface-color);
    }
}


/* 2. Moderner, heller Hover-Effekt (ersetzt das alte Schwarz) */
/* Gilt für alle klickbaren Karten und Listeneinträge */
.job-card:hover,
.post-card:hover,
.profile-card:hover,
.channel-card:hover,
.admin-table tbody tr:hover {
    background-color: #EAE6EF !important; /* Ein spürbarer, aber heller Lavendel-Ton */
    border-color: #DCD8E2;
}
/* Mobile Ansicht im Admin-Panel */
@media (max-width: 768px) {
    .admin-table tr:hover {
        background-color: #EAE6EF !important;
        border-color: #DCD8E2;
    }
}
/* === KORREKTUR: Mobile Navigationsleiste (Footer-Bar) === */
@media (max-width: 850px) {
    .mobile-bottom-nav {
        background-color: var(--text-color-dark); /* Dunkler Anthrazit-Hintergrund */
        border-top: 1px solid #4a5561; /* Ein subtiler Rand oben */
    }

    /* Icons und Text in der Leiste hell und lesbar machen */
    .mobile-bottom-nav a,
    .mobile-bottom-nav button {
        color: var(--text-color-medium);
    }
    
    /* Hover-Effekt für bessere Interaktion */
    .mobile-bottom-nav a:hover,
    .mobile-bottom-nav button:hover {
        color: #ffffff;
    }
    
    /* Aktiven Button in der Akzentfarbe hervorheben (falls eine .active-Klasse verwendet wird) */
    .mobile-bottom-nav a.active,
    .mobile-bottom-nav button.active {
        color: var(--accent-color-red);
    }
}

/* === FINALE LIGHT-MODE-ANPASSUNGEN (SANDSTEIN & LESBARKEIT) === */

/* --- 1. FARBEN & HINTERGRÜNDE FÜR KARTEN --- */

/* Community & Postfach: Alle Karten nutzen jetzt den Leinen-Ton */
/* Community & Postfach: Alle Karten nutzen jetzt den Leinen-Ton */
.comment-body,
.conversation-item,
.job-card,
.post-card,
.profile-card,
.channel-card {
    background-color: var(--surface-color);
}

/* Speziell für eingebettete Vorschau-Karten: Fügt einen Rand für besseren Kontrast hinzu */
.link-preview-card,
.content-preview-card {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
}
/* Einheitlicher Hover-Effekt für alle Karten und Listeneinträge */
.conversation-item:hover,
.job-card:hover,
.post-card:hover,
.profile-card:hover,
.channel-card:hover,
.activity-item:hover,
.notification-item:hover,
.link-preview-card:hover,
.content-preview-card:hover {
    background-color: var(--surface-color-hover) !important; /* Der korrekte, sandige Hover */
    border-color: #DCD8E2 !important; /* Passt den Rand beim Hovern an */
}

/* Haupttext und Namen in Posts */
.post-body,
.post-header .post-author-info a {
    color: var(--text-color-dark) !important;
    font-weight: 600;
}

/* Alle Texte innerhalb der Link-Vorschau-Karten */
.link-preview-card *,
.content-preview-card * {
    color: var(--text-color-dark) !important; /* Erzwingt dunklen Text für ALLES darin */
}

/* Speziell für eingebettete Vorschau-Karten: Lavendel-Hintergrund für besseren Kontrast */
.post-card .link-preview-card,
.post-card .content-preview-card {
    background-color: var(--pastel-lavender) !important;
    border: 1px solid #DCD8E2; /* Passender, etwas dunklerer Rand */
}
/* Wählt NUR das BILD mit dem Logo aus und gibt IHM einen dunklen Hintergrund */
.content-preview-card img[src*="logo.png"] {
    background-color: var(--text-color-dark) !important;
    padding: 8px; /* Fügt einen kleinen Innenabstand hinzu, damit das Logo besser aussieht */
    border-radius: 4px; /* Rundet die Ecken des dunklen Hintergrunds leicht ab */
}

.conversation-item.unread {
    background-color: #ffffff; /* Ungelesene Nachrichten heben sich leicht ab */
    border: 1px solid var(--border-color);
}

/* --- 2. GOLD ERSETZEN --- */

/* Goldene Schrift in Community-Posts wird dunkel */
.post-header .post-author-info a,
.post-text-container a, 
.like-button.liked,
.comment-like-button.liked {
    color: var(--text-color-dark) !important;
    font-weight: 700;
}
/* Hover-Effekt für die umgefärbten Links */
.post-header .post-author-info a:hover,
.post-text-container a:hover {
    text-decoration: underline;
    color: var(--accent-color-lavender) !important;
}
/* Goldener Link im Dropdown-Menü wird dunkel */
.profile-dropdown a {
    color: var(--text-color-dark) !important;
}

/* --- 3. LESBARKEIT VERBESSERN --- */

/* Namen & Zeitstempel im Postfach werden kräftig dunkel */
.conversation-name {
    color: var(--text-color-dark) !important;
    font-weight: 600;
}
.conversation-item .timestamp,
.conversation-details p {
    color: var(--text-color-medium) !important;
}
.conversation-item.unread .timestamp {
    color: var(--text-color-dark) !important;
    font-weight: 700;
}

/* --- 4. PNG-HINTERGRÜNDE & SPEZIAL-BUTTONS --- */

/* Hintergrund für transparente Profilbilder / Logos in allen Avatar-Containern */
.conversation-avatar,
.post-avatar,
.comment-avatar,
.notification-avatar {
    background-color: var(--text-color-dark);
}


/* Plus- und Fragezeichen-Buttons wieder rot färben */
.btn-create-plus,
.floating-support-btn {
    background-color: var(--accent-color-red);
    border-color: var(--accent-color-red);
    color: #ffffff;
}
.btn-create-plus:hover,
.floating-support-btn:hover {
    background-color: var(--accent-color-red-hover);
    border-color: var(--accent-color-red-hover);
    color: #ffffff;
}


/* ==========================================================================
   FINALE KORREKTUR: LESBARKEIT IM ADMIN-PANEL
   ========================================================================== */

/* 1. Macht den gesamten Text in allen Admin-Tabellen kräftig dunkel */
.admin-table tbody tr {
    color: var(--text-color-dark) !important;
}

/* 2. Stellt sicher, dass auch Links in den Tabellen (z.B. Nutzernamen) kräftig dunkel sind */
.admin-table .admin-table-link {
    color: var(--text-color-dark) !important;
    text-decoration: none;
}

/* 3. Fügt einen dezenten Hover-Effekt für die Links hinzu */
.admin-table .admin-table-link:hover {
    color: var(--accent-color-lavender) !important;
    text-decoration: underline;
}

/* 4. Korrigiert die Farbe der roten Statuspunkte bei Offline-Nutzern */
.admin-table span[style*="color: #e74c3c"] {
    color: #E53E3E !important; /* Passt den Rotton an das neue Design an */
}
/* === ADMIN-TABELLEN: ZEBRA-STREIFEN-EFFEKT === */

/* Jede zweite Zeile (gerade Zahl) in Admin-Tabellen bekommt einen leicht dunkleren Hintergrund. */
.admin-table tbody tr:nth-child(even) {
    background-color: #FBF6F0; /* Ein sehr subtiler, dunklerer Sand-Ton */
}
/* Hover-Effekt für alle Zeilen */
.admin-table tbody tr:hover {
    background-color: var(--surface-color-hover) !important;
}
/* 1. Tags in ALLEN Karussells (z.B. "Könnte dich interessieren") */
.suggestion-reason {
    background-color: var(--pastel-lavender) !important;
    color: var(--pastel-lavender-text) !important;
    font-weight: 600;
}

/* 2. Pfeile in ALLEN Karussells an das Lavendel-Design anpassen */
.swiper-button-prev,
.swiper-button-next {
    background-color: var(--pastel-lavender) !important;
    color: var(--pastel-lavender-text) !important; /* Macht den Pfeil selbst lila */
}
.swiper-button-prev:hover,
.swiper-button-next:hover {
    background-color: #DCD8E2 !important; /* Etwas dunkleres Lavendel beim Hovern */
}

/* Wählt jede Vorschlags-Karte aus, die ein Bild enthält, dessen Name "logo.png" ist */
.suggestion-card:has(img[src*="logo.png"]) {
    background-color: var(--text-color-dark) !important;
    background-image: none !important;
}

/* Macht die Schrift (Titel & Ort) in diesen Karten weiß */
.suggestion-card:has(img[src*="logo.png"]) .suggestion-title,
.suggestion-card:has(img[src*="logo.png"]) .suggestion-location {
    color: #FFFFFF !important;
}

/* Entfernt den Standard-Verlauf, da die Karte jetzt einen festen Hintergrund hat */
.suggestion-card:has(img[src*="logo.png"]) .suggestion-overlay {
    background: none !important;
}
/* Text in den "Könntest du kennen"-Karten lesbar machen */
.hero-suggestion-card .suggestion-title,
.hero-suggestion-card .suggestion-location {
    color: #FFFFFF !important;
}

/* Standard-Stil für alle Sprach-Buttons */
.modal-body .language-btn {
    background-color: var(--pastel-lavender) !important;
    color: var(--pastel-lavender-text) !important;
    border: 1px solid #DCD8E2 !important;
}

/* Hover-Effekt für inaktive Sprach-Buttons */
.modal-body .language-btn:not(.active):hover {
    background-color: #DCD8E2 !important;
}

/* Aktiver/Ausgewählter Sprach-Button */
.modal-body .language-btn.active {
    background-color: var(--accent-color-red) !important;
    color: #ffffff !important;
    border-color: var(--accent-color-red) !important;
}
/* 1. Korrektur für ALLE dunklen Eingabefelder (inkl. E-Mail) */
.form-group input[type="text"],
.form-group input[type="email"],
.tagify,
select {
    background-color: var(--surface-color) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color-dark) !important;
}
.tagify__input {
    color: var(--text-color-dark) !important;
}

/* Tagify-Komponente an das Light-Theme anpassen (Rot statt Gold) */
.tagify__tag {
    --tag-bg: var(--accent-color-red) !important;
    color: #ffffff !important;
}
.tagify__tag:hover:not([readonly]) {
    --tag-bg: var(--accent-color-red-hover) !important;
}

/* Die Regeln für das "x"-Icon bleiben bestehen, da sie funktionieren */
.tagify__tag__removeBtn {
    color: #ffffff !important;
    opacity: 0.7;
}
.tagify__tag__removeBtn:hover {
    opacity: 1;
}

/* 2. Korrektur für die goldenen Options-Buttons (FINALE VERSION) */

/* 1.1 Spezifischer Fix für Marketing-Newsletter Suchfelder (Lesbarkeit) */
#email-user-search, 
#email-external-input,
#email-subject {
    color: #000000 !important;
}

/* 2. Korrektur für die goldenen Options-Buttons (FINALE VERSION) */
/* Inaktiver Zustand für alle Labels in dieser Gruppe */
.user-type-selector label {
    background-color: var(--surface-color) !important;
    color: var(--text-color-dark) !important;
    border: 1px solid var(--border-color) !important;
}
/* Hover-Zustand für inaktive Labels */
.user-type-selector label:hover {
    background-color: var(--surface-color-hover) !important;
}
/* Aktiver Zustand (wenn der Radio-Button davor ausgewählt ist) */
.user-type-selector input[type="radio"]:checked + label {
    background-color: var(--accent-color-red) !important;
    color: #ffffff !important;
    border-color: var(--accent-color-red) !important;
}
/* 1. Zielt direkt auf die ID des dunklen Ergebnis-Feldes */
#commission-calculation-result {
    background-color: var(--surface-color) !important; /* Heller Leinen-Hintergrund */
}
/* Zielt auf den Text innerhalb dieses Feldes */
#commission-calculation-result p {
    color: var(--text-color-dark) !important; /* Dunkler Text */
}

/* 2. Fortschrittsbalken ("Dein Weg zur Legende") anpassen */
.progress-bar-fill {
    background-color: var(--accent-color-red) !important; /* Gold wird zu Terrakotta-Rot */
}

/* 3. Textelemente im Fortschrittsbalken anpassen */
.progress-bar-labels span {
    color: var(--pastel-lavender-text) !important; /* Schwarz wird zu Lavendel-Text */
    font-weight: 600;
}

/* ==========================================================================
   FINALE KORREKTUR V3: TICKET-ANTWORT IM LIGHT-MODE (FORCE OVERRIDE)
   ========================================================================== */

/* 1. Nachricht des Nutzers: Sandfarbe (#F7F2EC) erzwingen */
body .ticket-entry.user-message {
    background-color: #F7F2EC !important; 
    color: #000000 !important;
    border-left: 3px solid var(--accent-color-red) !important;
}
/* Erzwingt dunkle Schrift auch für den Namen/Header in der Nachricht */
body .ticket-entry.user-message .ticket-entry-header,
body .ticket-entry.user-message .ticket-entry-header strong {
    color: #000000 !important;
}

/* 2. Textfeld & Dropdown: Weißer/Heller Hintergrund & SCHWARZE Schrift */
body #ticket-response-text,
body #macro-select {
    background-color: #FCFBF9 !important; /* Explizit heller Leinen-Ton */
    color: #000000 !important; /* Explizit Schwarz */
    border: 1px solid var(--border-color) !important;
}

/* 3. Platzhalter im Textfeld lesbar machen (Dunkelgrau) */
body #ticket-response-text::placeholder {
    color: #666666 !important;
    opacity: 1;
}

/* 4. Hintergrund der Box um das Textfeld */
body .ticket-response-box {
    background-color: #FCFBF9 !important;
    border: 1px solid var(--border-color) !important;
}

/* 5. Footer (Senden-Button Leiste): Hellen Hintergrund erzwingen */
body .ticket-response-footer {
    background-color: #FCFBF9 !important; /* Überschreibt das #1a1a1a */
    border-top: 1px solid var(--border-color) !important;
    color: #000000 !important;
}
/* 6. Interne Notiz: Hintergrund und Schrift korrigieren (FORCE OVERRIDE) */
body .ticket-entry.internal {
    background-color: #ECE9F1 !important; /* Etwas dunklerer Sandton für Unterscheidung */
    color: #000000 !important; /* Zwingend Schwarz */
    border-left: 3px solid #f39c12 !important; /* Orange Rand beibehalten */
}
/* Erzwingt dunkle Schrift für den Header der internen Notiz */
body .ticket-entry.internal .ticket-entry-header,
body .ticket-entry.internal .ticket-entry-header strong {
    color: #000000 !important;
}

/* 7. Ungelesene Benachrichtigungen: Heller Hintergrund & schwarze Schrift (FORCE OVERRIDE) */
body .notification-item.unread {
    background-color: #ffffff !important; /* Reines Weiß für ungelesene Nachrichten */
    color: #000000 !important; /* Zwingend Schwarz */
    border: 1px solid var(--border-color) !important;
    border-left: 3px solid var(--accent-color-red) !important; /* Roter Akzent statt Gold */
}

/* Erzwingt schwarze Schrift für den Textinhalt und Namen innerhalb der Benachrichtigung */
body .notification-item.unread .notification-text,
body .notification-item.unread strong,
body .notification-item.unread span {
    color: #000000 !important;
}

/* Korrektur für den Zeitstempel (sollte dunkelgrau sein, nicht weiß/grau) */
body .notification-item.unread .timestamp {
    color: #666666 !important;
}
/* 8. Zugewiesene Rollen (Tender): Dunklen Inline-Style überschreiben (FORCE OVERRIDE) */
/* Wählt das Element aus, das normalerweise den dunklen Hintergrund hat */
body .offers-for-role-container .request-item[style*="background-color: #2a2a2a"] {
    background-color: #ECE9F1 !important; /* Etwas dunklerer Sandton für Kontrast */
    border: 1px solid var(--border-color) !important;
    color: #000000 !important;
}

/* Stellt sicher, dass Texte und Links darin schwarz sind */
body .offers-for-role-container .request-item a,
body .offers-for-role-container .request-item strong,
body .offers-for-role-container .request-item p {
    color: #000000 !important;
}

/* Ausnahme für den Sekundärtext ("Diese Rolle wurde erfolgreich vergeben") */
body .offers-for-role-container .request-item p[style*="color: var(--text-color-light)"] {
    color: #666666 !important; /* Dunkelgrau statt Hellgrau */
}
/* 9. Live-Ticker im Dashboard: Lesbarkeit verbessern (FORCE OVERRIDE) */
/* Erzwingt schwarze Schrift für den Haupttext (Link) */
body #live-ticker-container a {
    color: #000000 !important;
    font-weight: 500;
}

/* Erzwingt Dunkelgrau für den Zeitstempel ("vor 12 Stunden") */
body #live-ticker-container small {
    color: #666666 !important;
}

/* Stellt sicher, dass Icons dunkel sind */
body #live-ticker-container span {
    color: #000000 !important;
}
/* 10. Dashboard Filter-Buttons: Lesbarkeit (FORCE OVERRIDE) */
/* Normale Filter-Buttons (nicht aktiv) */
body .admin-dashboard-filters .btn-secondary,
body .admin-dashboard-filters .central-filter-btn {
    color: #3D4752 !important; /* Anthrazit für gute Lesbarkeit */
    border-color: #EAE0D3 !important; /* Passender Rand */
}

/* Hover-Zustand für Filter-Buttons */
body .admin-dashboard-filters .btn-secondary:hover,
body .admin-dashboard-filters .central-filter-btn:hover {
    color: #000000 !important;
    background-color: #ECE9F1 !important; /* Leichter Lavendel-Hintergrund beim Hover */
}

/* Aktiver Zustand (der ausgewählte Button) */
body .admin-dashboard-filters .btn-secondary.active,
body .admin-dashboard-filters .central-filter-btn.active {
    background-color: var(--gold-color) !important; /* Goldener Hintergrund */
    color: #ffffff !important; /* Weiße Schrift für Kontrast */
    border-color: var(--gold-color) !important;
}
/* 11. Anmerkung des Nutzers (Zertifikate): Dunklen Inline-Style überschreiben (FORCE OVERRIDE) */
/* Wählt das Div aus, das den dunklen Hintergrund hat */
body .ticket-detail-view div[style*="background: #2a2a2a"] {
    background-color: #ECE9F1 !important; /* Etwas dunklerer Sandton */
    color: #000000 !important;
    border: 1px solid var(--border-color) !important;
}

/* Stellt sicher, dass die Überschrift darin schwarz ist */
body .ticket-detail-view div[style*="background: #2a2a2a"] h4 {
    color: #000000 !important;
}

/* 12. Chart-Fix: Schrift abdunkeln ohne JS-Änderung (FORCE OVERRIDE) */
/* Wir wenden einen Filter auf das Canvas an, um die hellgraue Schrift dunkel zu machen */
body canvas {
    filter: invert(1) hue-rotate(180deg) contrast(1.5) !important;
}

/* 13. Live-Ticker Modal: Lesbarkeit verbessern (FORCE OVERRIDE) */
/* Erzwingt schwarze Schrift für Links und Texte im Modal-Body */
body .modal-body a,
body .modal-body div[style*="color: var(--text-color)"] {
    color: #000000 !important;
}

/* Erzwingt Dunkelgrau für den Zeitstempel */
body .modal-body small[style*="color: var(--text-color-light)"] {
    color: #666666 !important;
}

/* 14. Generiertes Anschreiben (Bewerbung): Light Mode Fix (FORCE OVERRIDE) */
.generated-cover-letter {
    background-color: #F7F2EC !important; /* Sand-Farbe passend zum Theme */
    color: var(--text-color-dark) !important; /* Dunkle Schrift für Lesbarkeit */
    border: 1px solid var(--border-color) !important;
}

/* 15. Umfrage-Karte im Feed (Light Mode Fix) */
.poll-card {
    background-color: var(--surface-color) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color-dark) !important;
}
.poll-question {
    color: var(--text-color-dark) !important;
}
.poll-meta, .poll-total-votes {
    color: var(--text-color-medium) !important;
}
/* Die Optionen (Balken-Container) */
.poll-option-display {
    background-color: var(--background-color) !important; /* Etwas dunklerer Sandton als die Karte */
    border: 1px solid var(--border-color) !important;
    color: var(--text-color-dark) !important;
}
/* Wenn noch nicht abgestimmt wurde (Voting Mode) */
.poll-card.voting-mode .poll-option-display {
    background-color: var(--background-color) !important;
}
.poll-checkbox {
    border-color: var(--text-color-dark) !important;
    color: var(--text-color-dark) !important;
}

/* 16. Umfrage- & Aufgaben-Modal (Light Mode Fix - UPDATED) */
.poll-creator-modal {
    background-color: var(--surface-color) !important;
    color: var(--text-color-dark) !important;
    border: 1px solid var(--border-color) !important;
}

/* WICHTIG: Titel & Labels erzwingen (Überschreibt Inline-Styles) */
.poll-creator-modal h3,
.poll-creator-modal label,
.poll-setting-label {
    color: var(--text-color-dark) !important;
}

/* WICHTIG: Eingabefelder erzwingen (Überschreibt Dark Mode !important) */
.poll-creator-modal input[type="text"],
.task-item-input {
    background-color: var(--background-color) !important; /* Sandton */
    color: var(--text-color-dark) !important; /* Anthrazit */
    border: 1px solid var(--border-color) !important;
}

.poll-creator-modal input::placeholder {
    color: var(--text-color-medium) !important;
}

/* Slider-Hintergrund (Toggle Switch) */
.poll-slider {
    background-color: #ccc !important;
}
input:checked + .poll-slider {
    background-color: var(--accent-color-red) !important;
}

/* 17. Kommentar-Eingabefeld (Light Mode Fix) */
.comment-input {
    background-color: var(--background-color) !important; /* Sand-Hintergrund für Input */
    color: var(--text-color-dark) !important;
    border: 1px solid var(--border-color) !important;
}
.comment-input::placeholder {
    color: var(--text-color-medium) !important;
}

/* 18. Umfrage-Wähler-Liste (Light Mode Fix) */
.poll-voters-group {
    border: 1px solid var(--border-color) !important;
}

.poll-voters-header {
    background-color: #ECE9F1 !important; /* Etwas dunklerer Lavendel-Ton für den Header */
    color: var(--text-color-dark) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.poll-voter-item {
    background-color: var(--surface-color) !important; /* Heller Hintergrund für die Zeile */
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-color-dark) !important;
}

.poll-voter-name {
    color: var(--text-color-dark) !important;
    font-weight: 600 !important;
}

.poll-voters-count {
    color: var(--text-color-medium) !important;
}

/* ==========================================================================
   19. GENERELLE MODAL FIXES (Light Mode) - KORRIGIERT
   ========================================================================== */

/* Schließen-Button (X) sichtbar machen & in den Vordergrund holen */
#modal-close-x-btn,
.modal-close-btn,
.form-close-btn {
    color: var(--text-color-dark) !important; /* Dunkle Farbe erzwingen */
    z-index: 9999 !important; /* Über alles andere legen */
    opacity: 0.8 !important;
    position: absolute !important; /* Positionierung sichern */
    top: 15px !important;
    right: 15px !important;
}

#modal-close-x-btn:hover,
.modal-close-btn:hover,
.form-close-btn:hover {
    color: var(--accent-color-red) !important;
    opacity: 1 !important;
    background: transparent !important; /* Keinen Hintergrund beim Hover */
}

/* Titel in generischen Modals (wie "Malern") sichtbar machen */
.modal-header h3,
.modal-title {
    color: var(--text-color-dark) !important;
}

/* ==========================================================================
   122. CHAT PDF & ANHÄNGE FIX (LIGHT MODE)
   ========================================================================== */

/* 1. Hintergrund der PDF-Buttons heller machen (statt lila/dunkel) */
body .message-bubble .btn-secondary {
    background-color: #ffffff !important; /* Weißer Hintergrund für den Button */
    color: var(--text-color-dark) !important; /* Dunkle Schrift */
    border: 1px solid var(--border-color) !important; /* Feiner Rand */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Leichter Schatten für Tiefe */
}

/* 2. Hover-Effekt für den PDF-Button */
body .message-bubble .btn-secondary:hover {
    background-color: #f0f0f0 !important;
    border-color: #ccc !important;
}

/* 3. Icon-Farbe im PDF-Button anpassen (z.B. rot für PDF) */
body .message-bubble .btn-secondary i {
    color: var(--accent-color-red) !important; /* Nutzt deine Akzentfarbe */
}

/* 4. Spezifischer Fix für "Gesendete Unterlagen" im Bewerbungs-Chat */
/* Falls der Container rot ist (wie im Screenshot), machen wir ihn neutral */
body .message-bubble.sent {
    /* Wir behalten die Akzentfarbe für die Bubble selbst bei,
       aber sorgen dafür, dass die Links darin lesbar sind */
    color: #ffffff !important; 
}

/* WICHTIG: Links/Buttons IN einer gesendeten (roten/goldenen) Bubble */
body .message-bubble.sent .btn-secondary {
    background-color: rgba(255, 255, 255, 0.9) !important; /* Fast weiß, leicht transparent */
    color: #333 !important; /* Dunkle Schrift IN der roten Bubble */
    border: none !important;
}

/* Der Text "Lebenslauf:" etc. über dem Button */
body .message-bubble.sent {
    /* Stellt sicher, dass normaler Text weiß bleibt */
    color: #ffffff !important;
}

/* --- FIX FÜR LANDINGPAGE HERO (LIGHT MODE) --- */
.landing-hero-section {
    background-color: var(--background-color); /* Sandton statt Dunkelgrün */
    padding: 60px 20px;
}

.glass-chat-box {
    background: rgba(252, 251, 249, 0.8) !important; /* Heller Leinen-Ton mit Transparenz */
    border: 1px solid var(--border-color) !important;
    backdrop-filter: blur(10px);
    box-shadow: var(--box-shadow);
}

.chat-bubble-guide {
    color: var(--text-color-dark) !important; /* Anthrazit statt Weiß */
    font-weight: 500;
}

.chat-option-btn {
    background-color: var(--surface-color) !important;
    color: var(--text-color-dark) !important;
    border: 1px solid var(--accent-color-red) !important; /* Roter Rand für Interaktion */
    transition: all 0.3s ease;
}

.chat-option-btn:hover {
    background-color: var(--accent-color-red) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   20. GRUPPEN- & KONTAKT-MODALS FIX (LIGHT MODE)
   ========================================================================== */

/* 1. Hintergrund der Modals & Listen-Container korrigieren */
/* Überschreibt die dunklen Hintergründe in "Gruppe erstellen/bearbeiten" */
.poll-creator-modal,
.contact-selection-list {
    background-color: var(--surface-color) !important;
    color: var(--text-color-dark) !important;
}

/* Die Liste der Mitglieder (Sand-Hintergrund erzwingen) */
.poll-creator-modal div[style*="background: #2a2a2a"],
.poll-creator-modal div[style*="background:#2a2a2a"],
.poll-creator-modal div[style*="background: #333"] {
    background-color: var(--background-color) !important; /* Sandton */
    border: 1px solid var(--border-color) !important;
}

/* Bild-Upload Kreise (Trigger) hell machen */
#group-image-upload-trigger,
#edit-group-image-trigger,
#group-img-trigger {
    background-color: var(--background-color) !important;
    border-color: var(--text-color-medium) !important;
}

/* 2. Textfarben (Namen, Titel und Labels auf Schwarz/Anthrazit) */
/* Gruppennamen, Usernamen und Labels in allen Modals */
.group-info-modal h2,
.group-info-modal span,
.group-info-modal div, /* NEU: Für die Beschreibung im Info-Modal */
.poll-creator-modal h2,
.poll-creator-modal h3,
.poll-creator-modal label,
.poll-creator-modal span,
.poll-creator-modal strong,
.contact-selection-item strong,
.contact-selection-item span,
.member-name {
    color: var(--text-color-dark) !important;
}

/* Speziell für die Checkbox-Labels (überschreibt #ccc aus JS) */
.poll-creator-modal label[style*="color:#ccc"],
.poll-creator-modal label[style*="color: #ccc"] {
    color: var(--text-color-dark) !important;
}

/* 3. Hover-Effekte & Trennlinien */
.group-member-row:hover,
.selectable-contact:hover,
.contact-selection-item:hover {
    background-color: var(--surface-color-hover) !important;
}

/* Trennlinien zwischen den Kontakten */
.group-member-row,
.contact-selection-item {
    border-bottom: 1px solid var(--border-color) !important;
}

/* Fix für den "Senden an..." Placeholder Text */
#contact-search-input::placeholder {
    color: var(--text-color-medium) !important;
}

/* 4. Hover-Fix für Mitglieder-Listen (Deutlicherer Kontrast mit Lavendel) */
.poll-creator-modal label:hover,
.poll-creator-modal .group-member-row:hover,
.poll-creator-modal .contact-selection-item:hover,
.contact-selection-list .selectable-contact:hover,
.contact-selection-list div:hover {
    background-color: #EAE6EF !important; /* Nutzt den Lavendel-Ton für besseren Kontrast */
    color: var(--text-color-dark) !important;
}

/* Spezieller Fix für Labels mit Inline-Flex-Styles aus dem JavaScript */
.poll-creator-modal label[style*="display:flex"]:hover,
.poll-creator-modal label[style*="display: flex"]:hover {
    background-color: #EAE6EF !important; /* Hier ebenfalls Lavendel statt Sand */
}

/* Stellt sicher, dass die Checkboxen und Namen beim Hover klar lesbar bleiben */
.poll-creator-modal label:hover span,
.poll-creator-modal label:hover strong,
.poll-creator-modal label:hover .member-name {
    color: #000000 !important; /* Tiefschwarz beim Hover für maximale Lesbarkeit */
}

/* Stellt sicher, dass die Checkboxen und Namen beim Hover nicht weiß werden */
.poll-creator-modal label:hover span,
.poll-creator-modal label:hover strong,
.poll-creator-modal label:hover .member-name {
    color: var(--text-color-dark) !important;
}

/* ==========================================================================
   124. PAGE TRANSITION & PROGRESS BAR (Light Mode Fix)
   ========================================================================== */

#page-progress-bar {
    /* Wir überschreiben das Gold durch dein Terrakotta-Rot */
    background: linear-gradient(90deg, rgba(217, 91, 67, 0) 0%, rgba(217, 91, 67, 1) 50%, #ff6b52 100%) !important;
    box-shadow: 0 0 12px rgba(217, 91, 67, 0.5) !important;
}

/* Der glühende Kopf des Strahls im Light Mode */
#page-progress-bar::after {
    background: #ffffff !important;
    box-shadow: 0 0 10px #ffffff;
    opacity: 0.8 !important;
}

/* Container für den sanften Fade-In (Anpassung für hellen Hintergrund) */
.view-transitioning {
    background-color: var(--background-color) !important;
}

/* ==========================================================================
   125. AUFGABEN-LISTE ANZEIGE FIX (LIGHT MODE)
   ========================================================================== */

/* WICHTIG: Der Container, der die Aufgaben hält (löst das schwarze Hintergrund-Problem) */
.task-list-container {
    background-color: transparent !important; /* Macht den Container durchsichtig */
    border: none !important;
}

/* Die Box um ein einzelnes Aufgaben-Item (Anzeige-Modus) */
.task-item-display {
    background-color: var(--surface-color) !important; /* Leinen-Hintergrund statt Schwarz */
    border: 1px solid var(--border-color) !important; /* Sand-Rand statt schwarzem Rand */
    color: var(--text-color-dark) !important; /* Dunkler Text */
}

/* Hover-Effekt für das Item */
.task-item-display:hover {
    background-color: var(--surface-color-hover) !important;
    border-color: #DCD8E2 !important;
}

/* Der Kreis (Checkbox) innerhalb der Aufgabe */
.task-item-display .poll-checkbox {
    border-color: var(--text-color-medium) !important; /* Grauer Rand für unerledigte */
}

/* Der Text innerhalb der Aufgabe */
.task-item-display div {
    color: var(--text-color-dark) !important;
}
/* ==========================================================================
   126. FINALER HINTERGRUND-FIX (MODAL & CONTAINER)
   ========================================================================== */

/* 1. Zwingt den Hintergrund des gesamten Fensters auf Hell (Sand-Farbe) */
body .poll-creator-modal {
    background-color: #FCFBF9 !important; /* Heller Leinen-Ton */
    border: 1px solid var(--border-color) !important;
    box-shadow: none !important;
}

/* 2. Entfernt den schwarzen Hintergrund hinter der Liste */
body .poll-creator-modal .task-list-container {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
}

/* 3. Färbt die Überschrift (z.B. "Test") dunkel, da sie im Code oft weiß ist */
body .poll-creator-modal h3 {
    color: #3D4752 !important; /* Anthrazit */
}

/* 4. Sicherstellen, dass die Aufgaben-Items hell bleiben */
body .poll-creator-modal .task-item-display {
    background-color: #ffffff !important;
    border: 1px solid #EAE0D3 !important;
}

/* ==========================================================================
   128. INBOX ZEITSTEMPEL & FARBEN (LIGHT MODE FINALE ANPASSUNG)
   ========================================================================== */

/* 1. Zeitstempel bei gelesenen Nachrichten (Schwarz & Dezent) */
.conversation-item.read .conversation-status-box .timestamp {
    color: #000000 !important;   /* Tiefschwarz */
    opacity: 1 !important;       /* Volle Deckkraft */
    font-weight: 500 !important; /* Medium (nicht zu dick, besser als 600) */
}

/* 2. Ungelesene Nachrichten: Rot statt Gold (Nur im Light Mode) */
/* Das sorgt für den gewünschten "Alarm"-Effekt im hellen Design */
.conversation-item.unread .conversation-status-box {
    background-color: #D95B43 !important; /* Terrakotta Rot */
    color: #ffffff !important; /* Weiße Schrift für perfekten Kontrast */
}

/* 3. Mülleimer & Zeit in ungelesenen Nachrichten anpassen (Weiß) */
.conversation-item.unread .conversation-status-box .timestamp,
.conversation-item.unread .conversation-status-box .delete-conversation-btn {
    color: #ffffff !important; /* Alles Weiß auf dem roten Hintergrund */
    opacity: 1 !important;
}

/* ==========================================================================
   21. FINALER SUCHLEISTEN-FIX (LIGHT MODE ZWANG)
   ========================================================================== */

/* 1. Das Suchfeld selbst */
#job-search-input-list {
    /* Rahmen: Zwingend ROT (Deine Akzentfarbe) */
    border: 1px solid var(--accent-color-red) !important;
    
    /* Schrift: Zwingend TIEFSCHWARZ */
    color: #000000 !important;
    
    /* Hintergrund: Hell */
    background-color: var(--surface-color) !important;
}

/* 2. Der Platzhalter-Text ("Jobs durchsuchen...") */
#job-search-input-list::placeholder {
    /* Dunkles Grau, damit man es auf Hell gut lesen kann */
    color: #555555 !important;
    opacity: 1 !important;
}

/* 3. Der Container drumherum (Hintergrund für die Linie) */
.job-search-container {
    /* Muss dieselbe Farbe wie der Hintergrund haben (Sand/Weiß) */
    background-color: var(--background-color) !important;
}

/* 4. Dropdown-Vorschläge (Falls man tippt) */
#job-search-suggestions {
    background-color: var(--surface-color) !important;
    border: 1px solid var(--accent-color-red) !important;
}

.suggestion-item {
    color: #000000 !important; /* Schwarze Schrift */
}

/* Hover im Dropdown */
.suggestion-item:hover {
    background-color: var(--surface-color-hover) !important;
    color: var(--accent-color-red) !important;
}

/* ==========================================================================
   22. FINALE FARBKORREKTUREN (TITEL, TAGS & TEXTE) - FORCE OVERRIDE
   ========================================================================== */

/* Zwingt ALLES in der Aufgabenbeschreibung und Partner-Infos auf Tiefschwarz (inkl. Listen & Fett) */
.job-detail-container h1,
.job-detail-container h2,
.job-detail-container h3,
.job-detail-container .section-content,
.job-detail-container .section-content *, 
.job-detail-container .card p,
.job-detail-container .card div {
    color: #000000 !important;
}

/* Korrektur für Tags: Rote SCHRIFT, kein Hintergrund */
.job-detail-container .tag {
    background-color: transparent !important; /* Entfernt den roten Hintergrund */
    color: var(--accent-color-red) !important; /* Macht die Schrift rot */
    border: none !important;
    font-weight: 700 !important; /* Macht die rote Schrift etwas kräftiger */
    padding-left: 0 !important; /* Schiebt den Text ganz nach links */
    padding-right: 10px !important;
}

/* Stellt sicher, dass die Aufzählungszeichen (Punkte) bei Listen auch schwarz sind */
.job-detail-container .section-content li::marker {
    color: #000000 !important;
}

/* ==========================================================================
   23. FINALE TEXT-KORREKTUREN (SCHWARZ STATT GRAU) - FORCE OVERRIDE
   ========================================================================== */

/* 1. Ansprechpartner im Admin-Header (z.B. "Ansprechpartner: Yunus Demir") */
/* Wir zielen genau auf den Paragraph im Header des User-Details */
body .user-detail-header p {
    color: #000000 !important; /* Zwingend Schwarz */
    opacity: 1 !important;
}

/* 2. Registrierung: Auswahl-Boxen Titel ("Ein Held", "Ein Unternehmen") */
.user-type-box h4 {
    color: #000000 !important; /* Zwingend Schwarz */
    font-weight: 700 !important;
}

/* 3. Registrierung: Beschreibungstext in den Boxen (dunkler machen für Lesbarkeit) */
/* Damit auch der Text darunter nicht zu blass wirkt */
.user-type-box p {
    color: #333333 !important; /* Dunkles Grau statt helles Grau */
}
/* ==========================================================================
   24. TUTORIAL / ONBOARDING FIXES (LIGHT MODE) - FORCE OVERRIDE
   ========================================================================== */

/* 1. Sprach-Auswahl Buttons: Sand-Hintergrund & schwarze Schrift */
/* Überschreibt das Standard-Grau */
.language-grid-onboarding .lang-option-btn {
    background-color: #FCFBF9 !important; /* Heller Sand-Ton (Surface Color) */
    color: #000000 !important; /* Schwarze Schrift */
    border: 1px solid #EAE0D3 !important; /* Passender sandiger Rand */
}

/* Hover-Effekt für die Sprach-Buttons (Dein Lavendel-Ton) */
.language-grid-onboarding .lang-option-btn:hover {
    background-color: #EAE6EF !important;
    color: #000000 !important;
    border-color: #DCD8E2 !important;
}

/* 2. Design-Auswahl (Theme Selector): Text ("Helles Design" / "Dunkles Design") */
/* War vorher grau/weiß, jetzt zwingend Schwarz */
.theme-selector-onboarding .theme-option span {
    color: #000000 !important; /* Zwingend Schwarz */
    font-weight: 700 !important; /* Fett, damit es gut lesbar ist */
}
/* ==========================================================================
   25. DASHBOARD THEME-SWITCHER FIX (LIGHT MODE) - FORCE OVERRIDE
   ========================================================================== */

/* Der Untertitel auf der Design-Wechsel-Karte */
#theme-switcher-card #theme-switcher-text {
    /* Wir nehmen Weiß statt Schwarz, das wirkt auf Bildern edler */
    color: #ffffff !important; 
    
    /* Ein kleiner Text-Schatten sorgt dafür, dass man es auch auf weißen Wolken lesen kann */
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important;
    
    font-weight: 600 !important;
    opacity: 1 !important; 
}
/* ==========================================================================
   26. MODAL TEXT-KORREKTUREN (LESBARKEIT) - FORCE OVERRIDE
   ========================================================================== */

/* Zwingt alle Informationstexte und Labels in Modals auf Tiefschwarz */
body .modal-body p,
body .modal-body label {
    color: #000000 !important; /* Zwingend Schwarz */
    opacity: 1 !important;     /* Volle Sichtbarkeit */
}

/* Speziell für den Platzhalter im Passwort-Feld (damit man sieht, wo man tippt) */
body #delete-confirm-password::placeholder {
    color: #666666 !important;
    opacity: 1 !important;
}

/* ==========================================================================
   27. FINALE FIXES FÜR PARTNER-JOBS (LIGHT MODE OVERRIDES)
   ========================================================================== */

/* 1. Gehalts-Box im Detail-View (Light Mode) */
body.light-theme .detail-salary-box .salary-icon {
    color: var(--accent-color-red) !important; /* Icon Rot */
}

body.light-theme .detail-salary-box .salary-text {
    color: #000000 !important; /* Text Tiefschwarz */
    font-weight: 700 !important;
}

/* 2. Benefit-Karten (Light Mode) */
body.light-theme .benefit-card {
    background-color: #ffffff !important; /* Reinweiß im Light Mode */
    border: 1px solid #EAE0D3 !important; /* Sandiger Rand */
    border-top: 5px solid var(--pastel-lavender-text) !important; /* Oben Lavendel (Lila) wie gewünscht */
    box-shadow: 0 4px 12px rgba(61, 71, 82, 0.08) !important; /* Weicherer Schatten für Hell */
}

/* 3. Benefit Titel ("Attraktive Vergütung") im Light Mode */
body.light-theme .benefit-label {
    color: #000000 !important; /* Tiefschwarz für maximale Lesbarkeit */
    opacity: 1 !important;
}

/* 4. Benefit Fließtext im Light Mode */
body.light-theme .benefit-value {
    color: #3D4752 !important; /* Anthrazit */
}

/* ==========================================================================
   28. FIX: RECHNUNGS-CENTER FARBEN (LIGHT MODE)
   ========================================================================== */

/* 1. Schriftfarbe Rechts (Werte) auf Schwarz setzen */
#ic-history-list .admin-table td {
    color: #000000 !important;
}

/* 2. Drucker-Button (Blau) */
#ic-history-list .ic-print-btn {
    color: #3498db !important;
    border-color: #3498db !important;
}
#ic-history-list .ic-print-btn:hover {
    background-color: #3498db !important;
    color: #ffffff !important;
}

/* 3. Mülleimer-Button (Rot) */
#ic-history-list .ic-delete-btn {
    color: #e74c3c !important;
    border-color: #e74c3c !important;
}
#ic-history-list .ic-delete-btn:hover {
    background-color: #e74c3c !important;
    color: #ffffff !important;
}

/* ==========================================================================
   29. FIX: LESBARKEIT DER VORTEILE-BOX (LIGHT MODE) - FORCE OVERRIDE
   ========================================================================== */

/* Zielt auf die Liste in der "Vorteile"-Box in der Job-Detailansicht */
body.light-theme .job-detail-container .card ul {
    /* Erzwingt tiefschwarze Schrift für die Liste, überschreibt das Inline-Style */
    color: #000000 !important;
}

/* ==========================================================================
   30. FIX: REGISTRIEREN-BUTTON IN DER VORTEILE-BOX (ROT-AKZENT)
   ========================================================================== */

/* Zielt auf den Registrieren-Button innerhalb der Vorteile-Box */
body .job-detail-container .card a[href="#register"] {
    background-color: var(--accent-color-red) !important; /* Dein Terrakotta-Rot */
    color: #ffffff !important; /* Weiße Schrift für Kontrast */
    border-color: var(--accent-color-red) !important;
    font-weight: 700 !important;
}

/* Hover-Effekt für den roten Button */
body .job-detail-container .card a[href="#register"]:hover {
    background-color: var(--accent-color-red-hover) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   31. FIX: TEILEN-BUTTON IN DER DETAILANSICHT (WIE IN DER LISTE) V3
   ========================================================================== */
.share-job-detail-btn {
    background: var(--surface-color) !important; /* Heller Hintergrund wie in den Karten */
    border: 1px solid #DCD8E2 !important; /* Etwas dunklerer Rahmen für besseren Kontrast */
    color: var(--text-color-medium) !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important; /* Leichter Schatten hebt ihn vom Hintergrund ab */
    transition: all 0.2s ease !important;
}

.share-job-detail-btn:hover {
    background: #ffffff !important;
    color: var(--text-color-dark) !important;
    border-color: var(--text-color-medium) !important;
}

/* ==========================================================================
   32. FIX: SCHNELLFILTER-PILLEN (TAGS) LESBARKEIT & HOVER - FORCE OVERRIDE
   ========================================================================== */

/* 1. Grundzustand: Tiefschwarze Schrift & Heller Hintergrund */
body .quick-filter-pill {
    color: #000000 !important;
    border: 1px solid var(--border-color) !important;
    background-color: var(--surface-color) !important;
    opacity: 1 !important;
    transition: all 0.2s ease !important;
}

/* 2. HOVER-Zustand: Sofort Rot mit weißer Schrift (wie ausgewählt) */
/* Das überschreibt das Gold im Dark-Mode und das Weiß im Light-Mode */
body .quick-filter-pill:hover {
    background-color: var(--accent-color-red) !important;
    color: #ffffff !important;
    border-color: var(--accent-color-red) !important;
}

/* 3. AKTIVER Zustand (Ausgewählt): Bleibt Rot mit weißer Schrift */
/* Wir fangen hier die Inline-Styles ab, die das JS setzt */
body .quick-filter-pill[style*="background-color: var(--primary-color)"],
body .quick-filter-pill[style*="background-color:var(--primary-color)"],
body .quick-filter-pill[style*="background-color: rgb"],
body .quick-filter-pill[style*="background-color:rgb"] {
    background-color: var(--accent-color-red) !important;
    color: #ffffff !important;
    border-color: var(--accent-color-red) !important;
}


/* --- FIX: Pillen-Farben im Light Theme auf Rot statt Gold --- */
body.light-theme .job-pill-label:hover {
    border-color: var(--accent-color-red) !important;
    color: var(--accent-color-red) !important;
}
body.light-theme .job-pill-checkbox:checked + .job-pill-label {
    background-color: var(--accent-color-red) !important;
    border-color: var(--accent-color-red) !important;
    color: #ffffff !important; /* Weißer Text auf Rotem Hintergrund */
}


/* ==========================================================================
   33. FIX: HELDEN-STATUS-PILLEN (GOLD ÜBERSCHREIBEN & HANDY-HOVER FIX)
   ========================================================================== */

/* 1. Überschreibt das Gold (Klasse .active) spezifisch für die Helden-Suche in Rot */
body .profile-status-filters .quick-filter-pill.active {
    background-color: var(--accent-color-red) !important;
    color: #ffffff !important;
    border-color: var(--accent-color-red) !important;
}

/* 2. Handy-Fix & Lesbarkeits-Fix: Entfernt Hover bei kleinen Bildschirmen und erzwingt Farbe */
@media (max-width: 850px) {
    body .profile-status-filters .quick-filter-pill:hover {
        background-color: transparent !important;
        border-color: var(--border-color) !important;
        color: #000000 !important;
    }
    /* Force Schwarz im Light Mode nach dem Klick */
    body.light-theme .profile-status-filters .quick-filter-pill:not(.active) {
        color: #000000 !important;
    }
    /* Force Anthrazit im Dark Mode nach dem Klick */
    body:not(.light-theme) .profile-status-filters .quick-filter-pill:not(.active) {
        color: var(--text-color-dark) !important;
    }
}

/* Hover komplett deaktivieren auf reinen Touchgeräten */
@media (hover: none) {
    body .profile-status-filters .quick-filter-pill:hover,
    body .profile-status-filters .quick-filter-pill:focus,
    body .profile-status-filters .quick-filter-pill:active {
        background-color: transparent !important;
        border-color: var(--border-color) !important;
        color: #000000 !important;
        box-shadow: none !important;
        outline: none !important;
    }
}

/* Zielt auf alle Info-Icons, die in einem grauen Ton dargestellt werden */
body.light-theme .info-icon,
body.light-theme .tooltip-icon,
body.light-theme .help-icon {
    color: var(--text-color-dark) !important; /* Dein Anthrazit */
    border-color: var(--text-color-dark) !important; /* Rand passend dunkel */
    background-color: transparent !important;
    opacity: 1 !important;
}

/* Hover-Effekt: Wenn man mit der Maus drüber geht, wird es dezent rot (Akzent) */
body.light-theme .info-icon:hover {
    color: var(--accent-color-red) !important;
    border-color: var(--accent-color-red) !important;
}



/* 1. Fragezeichen-Icon dunkel machen */
body.light-theme .info-icon {
    color: #3D4752 !important;
    border: 1px solid #3D4752 !important;
}

/* 2. Den Text im Tooltip-Inhalt schwarz machen */
/* Wir sprechen hier nur das Div direkt an, ohne Unterstriche oder Kästchen zu erzeugen */
body.light-theme .tooltip-content,
body.light-theme .tooltip-content * {
    color: #000000 !important;
    text-decoration: none !important; /* Entfernt eventuelle Unterstriche */
}

/* ==========================================================================
   FORCE-FIX: Rote Pillen für Helden im Light-Mode
   ========================================================================== */

/* 1. Aktiver Zustand (Aktiv=Rot) */
body.light-theme #app .profile-status-filters .quick-filter-pill.active {
    background-color: #D95B43 !important; /* Zwingend dein Terrakotta-Rot */
    color: #ffffff !important;
    border-color: #D95B43 !important;
}

/* 2. Hover Zustand (Hover=Rot/Lavendel) */
body.light-theme #app .profile-status-filters .quick-filter-pill:hover {
    background-color: #D95B43 !important; /* Zwingend Rot beim Hovern */
    color: #ffffff !important;
    border-color: #D95B43 !important;
}

/* 3. Inaktiver Zustand (Leinen-Ton) */
body.light-theme #app .profile-status-filters .quick-filter-pill:not(.active) {
    background-color: #FCFBF9 !important; /* Heller Leinen-Ton */
    color: #3D4752 !important; /* Anthrazit */
    border: 1px solid #EAE0D3 !important;
}

/* 1. PC-HOVER: Nur am PC wird beim Drüberfahren (Hover) das Rot aktiv */
@media (min-width: 769px) {
    /* Hover für Helden & Jobs: Zwingend Rot */
    body.light-theme #app .quick-filter-pill:not(.active):hover {
        background-color: #D95B43 !important; /* Terrakotta-Rot */
        color: #ffffff !important;            /* Weiße Schrift */
        border-color: #D95B43 !important;
        cursor: pointer !important;
    }
}

/* 2. AKTIV-ZUSTAND: Wenn die Pille angeklickt ist, bleibt sie auch Rot */
body.light-theme #app .quick-filter-pill.active {
    background-color: #D95B43 !important; /* ZWINGEND ROT */
    color: #ffffff !important;
    border-color: #D95B43 !important;
}

/* 3. MOBILE OPTIMIERUNG: Hover deaktivieren, damit auf dem Handy keine "hängenden" Farben bleiben */
@media (max-width: 768px) {
    body.light-theme #app .quick-filter-pill:hover {
        background-color: #FCFBF9 !important; /* Sand-Farbe (Neutral) */
        color: #3D4752 !important;            /* Anthrazit */
        border-color: #EAE0D3 !important;
    }
}

@media (max-width: 768px) {
    /* Überschreibt die alte Regel, die den Hover auf dem Handy auf Weiß/Sand gezwungen hat. 
       Jetzt wird es beim Antippen direkt Rot, was perfekt zum aktiven Zustand passt! */
    body.light-theme #app .quick-filter-pill:hover,
    body #app .quick-filter-pill:hover {
        background-color: var(--accent-color-red) !important;
        color: #ffffff !important;
        border-color: var(--accent-color-red) !important;
    }
}