/* roboto-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/roboto-v49-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/roboto-v49-latin-300.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* roboto-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v49-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/roboto-v49-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* roboto-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-v49-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/roboto-v49-latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}


/* === JOBINX DESIGN SYSTEM & GLOBAL STYLES === */

/* --- 1. CSS Variablen (Unser Design-System) --- */
:root {
    --primary-color: #d4af37;  /* Ein edler Goldton */
    --primary-color-hover: #e6c56d; /* Ein helleres Gold für Hover */
    
    --text-color: #e0e0e0;      /* Helle, fast weiße Schrift für guten Kontrast */
    --text-color-light: #a0a0a0; /* Ein weicheres Grau für sekundären Text */
    
    --background-color: #121212; /* Ein sehr dunkler, fast schwarzer Hintergrund */
    --surface-color: #1e1e1e;    /* Ein etwas helleres Dunkelgrau für Karten */
    --border-color: #333333;   /* Eine subtile Border für die Karten */

    --font-family: 'Roboto', sans-serif;
    --spacing-unit: 8px;

    --border-radius: 12px; /* Stärkere Abrundungen für einen modernen Look */
    --box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4); /* Angepasster Schatten für Dark Mode */
}

/* --- 2. Globaler Reset & Body Styles --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    height: 100%; /* Stellt sicher, dass das Wurzelelement die volle Höhe hat */
}

body {
    font-family: var(--font-family);
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.6;
    
    /* WICHTIG: Body wird zum Flex-Container, der sich über die volle Höhe erstreckt */
    display: flex;
    flex-direction: column;
    min-height: 100%; /* Nimmt mindestens die volle Höhe des html-Elements ein */
    overflow-x: hidden; /* NEU: Verhindert seitliche Scrollbalken beim Wischen */
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    text-decoration: none; 
    color: var(--primary-color-hover);
}

/* --- 3. App-Layout-Struktur --- */
#app {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Sagt dem #app Container, dass er den verfügbaren Platz im Body ausfüllen soll */
}

#main-header, #main-footer {
    background-color: var(--surface-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    padding: calc(var(--spacing-unit) * 2) 0;
    width: 100%;
    z-index: 1000;
    flex-shrink: 0; /* Verhindert, dass Header oder Footer schrumpfen */
}

#main-content {
    flex-grow: 1; /* Wichtig für den Sticky Footer: Füllt den leeren Platz */
    width: 100%;
    /* Bereitet den Inhalt darauf vor, flüssig nach unten zu gleiten */
    will-change: transform;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Der Bereich hinter dem weggeschobenen Inhalt */
#app {
    background-color: var(--background-color);
}

#pull-to-refresh-indicator {
    position: fixed; /* Fixed sorgt auf Mobiles für stabilere Positionierung */
    top: 0;
    left: 0;
    width: 100vw; /* Erzwingt die volle Breite des Handy-Bildschirms */
    height: 0; 
    display: flex;
    align-items: center; 
    justify-content: center; 
    z-index: 5; /* Höherer Index, aber immer noch hinter dem Header-Z-Index (1000) */
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    background-color: var(--background-color);
}

#main-footer {
    color: var(--text-color-light);
    font-size: 0.9em;
    text-align: center;
    margin-top: auto; /* Zusätzliche Sicherheit, um den Footer nach unten zu drücken */
}

/* --- 4. Wiederverwendbare Utility-Klassen --- */

/* Zentriert den Inhalt und gibt ihm eine maximale Breite */
.container {
    width: 95%;
    max-width: 1440px;
    margin: 0 auto;
}

/* Standard-Styling für Karten/Boxen */
.card {
    background-color: var(--surface-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: calc(var(--spacing-unit) * 3);
    border: 1px solid var(--border-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Sanfte Transition hinzugefügt */
}

.card:hover {
    transform: translateY(-4px); /* Hebt die Karte beim Hovern leicht an */
    box-shadow: 0 8px 25px rgba(44, 62, 80, 0.12); /* Macht den Schatten etwas stärker */
}

/* Standard-Styling für Buttons */
.btn {
    display: inline-block;
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3);
    background-color: var(--primary-color);
    color: #1e1e1e; /* NEU: Standard-Schriftfarbe auf Dunkelgrau setzen für besten Kontrast auf Gold */
    border: none;
    border-radius: var(--border-radius);
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
}

.btn:hover {
    background-color: var(--primary-color-hover);
    color: #121212; /* NEU: Schrift wird beim Hovern noch dunkler für noch besseren Kontrast */
    text-decoration: none;
    transform: translateY(-1px);
}

/* --- 5. Lade-Spinner Animation --- */
.loading-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: calc(var(--spacing-unit) * 2);
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
/* --- 6. Header & Navigation Styles --- */
.main-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo a::after {
    content: "x"; /* Fügt das "x" hinzu */
    color: var(--primary-color);
    margin-left: -0.25em; /* Zieht das "x" näher an das "n" heran */
}

.logo a {
    /* Schneidet das originale "x" vom Text ab. Requires a monospaced font or careful adjustment if you change the font */
     font-size: 2.2em; /* Deutlich größer */
    font-weight: 700;
    color: var(--text-color);
    text-decoration: none;
    display: inline-block; /* Wichtig für die ::after-Positionierung */
    /* Hier entfernen wir das letzte Zeichen aus dem HTML-Text, damit es nicht doppelt erscheint */
}

.nav-links a {
    margin-left: calc(var(--spacing-unit) * 3);
    font-weight: 700;
    text-decoration: none;
    font-size: 1.2em;
    color: var(--text-color-light);
}

.nav-links a:hover {
    color: var(--primary-color);
    text-decoration: none;
}

.nav-links .btn {
    padding: var(--spacing-unit) calc(var(--spacing-unit) * 2.5);
    font-size: 1em;
}

/* --- 7. Footer Styles --- */
#main-footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-nav a {
    margin-left: calc(var(--spacing-unit) * 2);
    color: var(--text-color-light);
}

.footer-nav a:hover {
    color: var(--primary-color);
}
/* --- 8. Job List View Styles --- */
.job-list-header {
    padding: calc(var(--spacing-unit) * 6) 0;
}

.job-list-header h1 {
    font-size: 2.8em;
    margin-bottom: var(--spacing-unit);
}

.job-list-header p {
    font-size: 1.2em;
    color: var(--text-color-light);
    margin-bottom: calc(var(--spacing-unit) * 3);
}

.job-list-header h1, .job-list-header p {
    text-align: center;
}

.search-and-filter-bar {
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: center;
    max-width: 800px;
    margin: 0 auto;
}

.search-and-filter-bar .search-bar {
    flex-grow: 1; /* Suchleiste nimmt den meisten Platz ein */
}

.filter-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    flex-shrink: 0;
    font-size: 1em; /* Stellt sicher, dass die Schriftgröße passt */
    color: #1e1e1e; /* Dunkle Schrift für goldenen Hintergrund */
}

.filter-btn:hover {
    color: #121212; /* Noch dunklere Schrift beim Hover, für Konsistenz */
}

.filter-icon {
    font-size: 0.8em;
    transform: scaleY(0.8); /* Macht das Icon etwas flacher */
}

.search-bar {
    display: flex;
    justify-content: center;
    max-width: 600px;
    margin: 0 auto;
}

.search-bar input {
    width: 100%;
    padding: calc(var(--spacing-unit) * 1.5);
    font-size: 1.1em;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    border-right: 1px solid var(--border-color); /* Rand wiederherstellen */
}
.search-bar input:focus {
    outline: 2px solid var(--primary-color);
    z-index: 10;
}


.job-postings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: calc(var(--spacing-unit) * 3);
    padding-bottom: calc(var(--spacing-unit) * 6);
}

.job-card {
    display: flex;
    flex-direction: column;
}

.job-title {
    font-size: 1.3em;
    margin-bottom: var(--spacing-unit);
}

.job-company {
    font-weight: 700;
    margin-bottom: calc(var(--spacing-unit) * 0.5);
}

.job-location {
    color: var(--text-color-light);
    margin-bottom: calc(var(--spacing-unit) * 2);
    
    /* SAUBERE LÖSUNG: Begrenzt die Höhe exakt auf 2 Zeilen (ohne Warnung) */
    line-height: 1.4em;
    max-height: 2.8em; /* Genau 2x die Zeilenhöhe */
    overflow: hidden;
    display: block;
    
    /* Zwingt extrem lange Wörter zum Umbruch, falls Leerzeichen fehlen */
    word-break: break-word;
    overflow-wrap: break-word;
}

.job-tags {
    margin-bottom: calc(var(--spacing-unit) * 2);
    display: block;
    max-width: 100%;
    
    /* KORREKTUR: Zeilenabstand noch enger (gekürzt) wie gewünscht */
    line-height: 1.2; 
    
    /* FIX: Erlaubt dem Browser, die Zeile an jeder Stelle zu brechen */
    white-space: normal;
    overflow-wrap: break-word; /* Bricht Wörter, wenn sie zu lang für die Karte sind */
    word-break: break-word;
}

.tag {
    display: inline;
    background-color: transparent !important;
    border: none;
    padding: 0;
    margin: 0;
    color: var(--primary-color) !important;
    font-weight: 700;
    font-size: 0.85em;
}

/* Logik für das Komma mit erzwungenem Leerzeichen */
.tag:not(:last-child)::after {
    /* WICHTIG: Das Leerzeichen nach dem Komma erlaubt dem Browser den Zeilenumbruch! */
    content: ", "; 
    color: var(--text-color-light);
    /* margin-right entfernt, da das Leerzeichen im 'content' den Job macht */
}

.job-details-btn {
    margin-top: auto; /* Sorgt dafür, dass der Button immer unten ist */
}
/* --- 9. Dark Mode Form & Tag Styles --- */
.search-bar input {
    background-color: var(--surface-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}
.search-bar input::placeholder {
    color: var(--text-color-light);
}

.tag {
    background-color: #333333;
    color: var(--text-color-light);
}
.no-results {
    grid-column: 1 / -1; /* Nimmt die volle Breite des Grids ein */
    text-align: center;
    padding: calc(var(--spacing-unit) * 4);
    color: var(--text-color-light);
    font-size: 1.2em;
}
/* --- 10. Job Detail View Styles --- */
.job-detail-container {
    padding-top: calc(var(--spacing-unit) * 4);
    padding-bottom: calc(var(--spacing-unit) * 6);
    /* NEU: Performance-Optimierung für Swipe-Animation */
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

.back-link {
    display: inline-block;
    margin-bottom: calc(var(--spacing-unit) * 3);
    color: var(--text-color-light);
    font-weight: 700;
}

.job-detail-container h1 {
    font-size: 2.5em;
    margin-bottom: var(--spacing-unit);
    /* NEU: Besserer Zeilenumbruch für sehr lange Wörter */
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

.job-meta {
    display: flex;
    gap: var(--spacing-unit);
    color: var(--text-color-light);
    font-size: 1.1em;
    margin-bottom: calc(var(--spacing-unit) * 2);
    align-items: center; 
    /* NEU: Bei vielen Orten sauber umbrechen */
    flex-wrap: wrap; 
    line-height: 1.4;
}

/* NEU: Zwingt extrem lange Standorte (ohne Leerzeichen) im Detail-Header zum Zeilenumbruch */
.job-meta span:first-child {
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

/* NEU: Responsive Anpassung für Handy-Displays (Titel verkleinern, Abstand optimieren) */
@media (max-width: 768px) {
    .job-detail-container h1 {
        font-size: 1.6em; /* Deutlich kleiner auf dem Handy */
        line-height: 1.3; /* Engerer Zeilenabstand */
    }
    .job-meta {
        font-size: 0.95em; /* Meta-Daten auf dem Handy etwas kompakter */
    }
}

.job-description {
    margin-top: calc(var(--spacing-unit) * 4);
    padding: calc(var(--spacing-unit) * 4);
}

.job-description h2 {
    margin-bottom: var(--spacing-unit);
    margin-top: calc(var(--spacing-unit) * 2);
}
.job-description h2:first-child {
    margin-top: 0;
}

.job-description ul {
    list-style-position: inside;
    padding-left: var(--spacing-unit);
}

.apply-section {
    text-align: center;
    margin-top: calc(var(--spacing-unit) * 4);
}

.apply-section .btn {
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 5);
    font-size: 1.2em;
}
/* --- 11. Profile List View Styles --- */
.profile-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: calc(var(--spacing-unit) * 3);
    padding-bottom: calc(var(--spacing-unit) * 6);
}

.profile-card {
    display: flex;
    flex-direction: column;
}

.profile-card-header {
    display: flex; /* Bleibt Flexbox */
    align-items: flex-start; /* NEU: Elemente oben ausrichten */
    gap: calc(var(--spacing-unit) * 2);
    /* position: relative; wird nicht mehr benötigt hier */
}

.profile-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border-color);
}

.profile-name {
    font-size: 1.3em;
    margin: 0;
}

.profile-profession {
    color: var(--text-color-light);
    font-size: 0.9em;
}

.profile-card-body {
    flex-grow: 1; /* Wichtig, damit der Footer unten bleibt */
}

.profile-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: calc(var(--spacing-unit) * 2);
    padding-top: calc(var(--spacing-unit) * 2);
    border-top: 1px solid var(--border-color);
}

.profile-availability {
    font-size: 0.9em;
    font-weight: 700;
    color: var(--text-color-light);
}

.profile-details-btn {
    padding: var(--spacing-unit) calc(var(--spacing-unit) * 2);
}
/* --- 12. Profil-Karten-Bewertung Styles --- */

.profile-card-header {
    position: relative; /* Wichtig für die Positionierung des Kind-Elements */
}

.profile-info {
    flex-grow: 1; /* WICHTIG: Sagt dem Info-Block, er soll allen verfügbaren Platz einnehmen */
}

.profile-rating {
    display: flex;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.2);
    padding: calc(var(--spacing-unit) * 0.5) var(--spacing-unit);
    border-radius: var(--border-radius);
    font-size: 0.9em;
    font-weight: 700;
    margin-top: 4px;
    flex-shrink: 0;
    cursor: pointer; /* NEU: Fügt den Klick-Finger hinzu */
    border: 1px solid var(--border-color); /* NEU: Eine subtile Umrandung wie im Beispiel */
    transition: background-color 0.2s;
}

.profile-rating:hover {
    background-color: #333; /* NEU: Visuelles Feedback beim Hovern */
}

.star-icon,
.rating-value {
    pointer-events: none; /* NEU: Der wichtigste Fix! Klicks gehen jetzt immer durch */
}

.star-icon {
    color: var(--primary-color);
    margin-right: calc(var(--spacing-unit) * 0.5);
    font-size: 1.1em;
}

.rating-value {
    color: var(--text-color);
}

/* --- 13. Profile Detail View Styles --- */
.profile-detail-container {
    padding-top: calc(var(--spacing-unit) * 4);
    padding-bottom: calc(var(--spacing-unit) * 6);
    /* NEU: Performance-Optimierung für Swipe-Animation */
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

.profile-detail-header {
    display: flex;
    flex-wrap: wrap; /* Erlaubt Umbruch auf kleinen Bildschirmen */
    align-items: center;
    gap: calc(var(--spacing-unit) * 3);
    padding: calc(var(--spacing-unit) * 4);
}

.profile-detail-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--primary-color);
}

.profile-detail-info {
    flex-grow: 1;
}

.profile-detail-info h1 {
    font-size: 2.2em;
    margin: 0;
    color: var(--text-color);
}

.profile-detail-info .profession {
    font-size: 1.2em;
    color: var(--text-color-light);
    margin-bottom: var(--spacing-unit);
}

.profile-detail-info .meta-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-unit);
    color: var(--text-color-light);
}

.profile-detail-info .rating {
    display: flex;
    align-items: center;
    font-weight: 700;
}

/* 1. Der Container für die Buttons wird zum Positionierungs-Anker */
.profile-actions {
    position: relative; /* WICHTIG: Macht den Container zum Ankerpunkt */
}

/* 2. Wir positionieren die Bewertung absolut ÜBER dem Ankerpunkt */
.profile-actions .profile-rating {
    position: absolute;   /* Nimmt das Element aus dem normalen Fluss */
    bottom: 100%;         /* Positioniert es direkt OBERHALB des "Vernetzen"-Buttons */
    right: 0;             /* Richtet es rechtsbündig aus */
    margin-bottom: 10px;  /* Erzeugt den gewünschten Abstand (das X in deinem Bild) */
}

.btn-secondary {
    /* Kopiert den Button-Style, aber mit anderem Hintergrund */
    display: inline-block;
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3);
    background-color: #333;
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.btn-secondary:hover {
    background-color: #444;
    transform: translateY(-1px);
}


.profile-detail-body {
    margin-top: calc(var(--spacing-unit) * 4);
    display: grid;
    gap: calc(var(--spacing-unit) * 4);
}
/* --- 14. Form Styles (Login/Register) --- */
.form-group {
    margin-bottom: calc(var(--spacing-unit) * 2.5);
}

.form-group label {
    display: block;
    font-weight: 700;
    margin-bottom: var(--spacing-unit);
    color: var(--text-color-light);
}

.form-group > input, 
.form-group > select,
.form-group > textarea,
input[type="number"]
{ 
    width: 100%;
    padding: calc(var(--spacing-unit) * 1.5);
    font-size: 1.1em;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: #333;
    color: var(--text-color);
    font-family: var(--font-family); /* Wichtig für textarea & input */
}
/* Styling für Platzhalter-Text in allen Inputs */
.form-group input::placeholder,
.form-group textarea::placeholder,
input[type="number"]::placeholder {
    color: var(--text-color-light);
    opacity: 0.7;
}
.form-group input:focus {
    outline: 2px solid var(--primary-color);
}

.error-message {
    color: #e74c3c; /* Roter Farbton für Fehler */
    margin-bottom: calc(var(--spacing-unit) * 2);
    text-align: center;
    font-weight: 700;
}
/* In style.css hinzufügen */
.welcome-message {
    color: var(--text-color-light);
    margin-right: 16px;
}
/* In style.css am Ende hinzufügen */
.password-group {
    position: relative;
}

.toggle-password {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(10%);
    cursor: pointer;
    color: var(--text-color-light);
    font-size: 1.2em;
}
/* In style.css am Ende hinzufügen */
.user-type-selector {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

.user-type-selector input[type="radio"] {
    display: none; /* Versteckt den originalen Radio-Button */
}

.user-type-selector label {
    display: block;
    padding: 15px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.user-type-selector input[type="radio"]:checked + label {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #1e1e1e;
    font-weight: 700;
}

.user-type-selector label:hover {
    background-color: #333;
}
/* --- 15. Dashboard Styles --- */

.dashboard-container {
    padding-top: calc(var(--spacing-unit) * 4);
    padding-bottom: calc(var(--spacing-unit) * 6);
}

.dashboard-header {
    text-align: center;
    margin-bottom: calc(var(--spacing-unit) * 5);
}

.dashboard-header h1 {
    font-size: 2.5em;
}

.dashboard-header p {
    font-size: 1.2em;
    color: var(--text-color-light);
}

.dashboard-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: calc(var(--spacing-unit) * 4);
}

.action-card {
    display: block;
    background-color: var(--surface-color);
    border-radius: var(--border-radius);
    padding: calc(var(--spacing-unit) * 4);
    border: 1px solid var(--border-color);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    color: var(--text-color);
}

.action-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
    border-color: var(--primary-color);
}

.action-card h3 {
    color: var(--primary-color);
    font-size: 1.5em;
    margin-bottom: var(--spacing-unit);
}

.action-card p {
    color: var(--text-color-light);
}
/* --- 16. Create Job Form Styles --- */

.form-group textarea {
    /* Stellt sicher, dass Textareas das gleiche Styling wie Inputs haben */
    width: 100%;
    padding: calc(var(--spacing-unit) * 1.5);
    font-size: 1.1em;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: #333;
    color: var(--text-color);
    font-family: var(--font-family); /* Wichtig, damit die Schriftart übernommen wird */
    resize: vertical; /* Erlaubt nur vertikales Ändern der Größe */
}

.form-group-checkbox {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 1.5);
    margin-bottom: calc(var(--spacing-unit) * 2.5);
}

.form-group-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--primary-color); /* Färbt die Checkbox in unserer Hauptfarbe */
}

.form-group-checkbox label {
    color: var(--text-color-light);
}
/* --- 17. Modal Styles --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    /* FIX: Muss höher sein als das Kommentar-Modal (30001), damit Bestätigungen immer oben sind! */
    z-index: 40000 !important;
    backdrop-filter: blur(5px);
}

.modal-overlay.onboarding-overlay {
    background-color: rgba(0, 0, 0, 0.6); /* Etwas dunkler für besseren Kontrast zum Modal */
    backdrop-filter: none; /* KEIN Weichzeichner */
}

.modal-content {
    max-width: 550px; /* Etwas breiter für die Bewertungsübersicht */
    width: 90%;
    animation: fadeIn 0.3s ease-out;
    
    /* NEU: Flexbox-Layout für das Modal */
    display: flex;
    flex-direction: column;
    max-height: 85vh; /* Das Modal darf maximal 85% der Bildschirmhöhe einnehmen */
}

.modal-header {
    text-align: center;
    padding-bottom: var(--spacing-unit) * 2;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: var(--spacing-unit) * 2;
    flex-shrink: 0; /* Verhindert, dass der Header schrumpft */
}

.modal-body {
    text-align: center;
    color: var(--text-color-light);
    font-size: 1.1em;

    /* NEU: Das ist der wichtigste Teil! */
    overflow-y: auto; /* Zeigt einen vertikalen Scrollbalken NUR an, wenn nötig */
    padding-right: 15px; /* Etwas Platz für den Scrollbalken, damit er den Inhalt nicht verdeckt */
    margin-right: -15px; /* Gleicht das Padding aus, damit der Inhalt zentriert bleibt */
}

.modal-footer {
    margin-top: calc(var(--spacing-unit) * 3);
    text-align: center;
    flex-shrink: 0; /* Verhindert, dass der Footer schrumpft */
}

/* Optional: Schöneres Styling für den neuen Scrollbalken (funktioniert in Chrome/Safari) */
.modal-body::-webkit-scrollbar {
  width: 8px;
}
.modal-body::-webkit-scrollbar-track {
  background: var(--surface-color);
}
.modal-body::-webkit-scrollbar-thumb {
  background-color: var(--primary-color);
  border-radius: 20px;
  border: 2px solid var(--surface-color);
}

body.modal-open {
    overflow: hidden;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
/* In style.css am Ende hinzufügen */
.profile-image-upload {
    text-align: center;
    margin-bottom: 24px; /* Etwas mehr Abstand nach unten */
}

.profile-avatar-preview {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--border-color);
    margin-bottom: 16px;
    cursor: pointer;
}

.profile-image-upload input[type="file"] {
    display: none; /* Das Standard-Feld verstecken wir */
}

.profile-image-upload small {
    display: block;
    color: var(--text-color-light);
}

/* --- 18. Header Avatar Styles --- */

.header-avatar-link {
    /* Setzt die Reihenfolge in der Flexbox. Höhere Zahlen kommen später. */
    order: 10; 
}

.nav-links .btn-secondary {
    /* Der Logout-Button soll vor dem Avatar kommen */
    order: 9; 
}

.header-avatar {
    width: 50px;  /* Von 45px auf 50px erhöht */
    height: 50px; /* Von 45px auf 50px erhöht */
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary-color);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.header-avatar:hover {
    transform: scale(1.1);
    box-shadow: 0 0 10px var(--primary-color); /* Leucht-Effekt beim Hovern */
}

/* Wir passen die Anordnung im Header an */
.nav-links {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 3);
}

.nav-links a {
    margin-left: 0; /* Entfernen den alten Margin, da wir jetzt 'gap' nutzen */
}
/* --- 19. Dashboard Logout Styles --- */

.dashboard-logout-section {
    margin-top: calc(var(--spacing-unit) * 6);
    text-align: center;
}
/* --- 20. Dashboard Logout Button Style --- */

.dashboard-logout-section .btn-secondary {
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 6); /* Mehr horizontales Padding */
    font-size: 1.1em; /* Größere Schrift */
}
/* --- 21. Profilbild Platzhalter Styles --- */

/* Platzhalter für die Listenansicht (klein) */
.profile-avatar-placeholder {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #333;
    border: 2px dashed var(--border-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--text-color-light);
    flex-shrink: 0;
}

/* Platzhalter für die Detailansicht (groß) */
.profile-detail-avatar-placeholder {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-color: #333;
    border: 4px dashed var(--border-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--text-color-light);
}

.placeholder-icon {
    font-size: 2em; /* Macht das Icon größer */
}

.placeholder-text {
    font-size: 0.7em;
    line-height: 1.2;
    margin-top: 4px;
}
/* --- 22. Globale Header-Suche Styles --- */

.main-nav {
    display: grid;
    grid-template-columns: auto 1fr auto; /* Logo | Suche füllt den Raum | Navigations-Wrapper */
    gap: 40px;
    align-items: center;
}
.nav-wrapper {
    display: flex;
    align-items: center; /* Diese Zeile stellt sicher, dass alles im Wrapper vertikal zentriert ist */
    gap: 20px;
}

.global-search-bar {
    display: flex;
    width: 100%; /* Nimm den vollen Platz im Grid-Bereich ein */
    max-width: 700px; /* Aber nicht mehr als 700px */
    margin: 0 auto; /* Zentriert die Leiste innerhalb des Grid-Bereichs */
}

.global-search-bar input {
    width: 100%;
    padding: calc(var(--spacing-unit) * 1.8) calc(var(--spacing-unit) * 2.5); /* Ergibt 14.4px 20px - schön groß */
    font-size: 1.2em; /* Deutlich größere Schrift */
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius); /* Runde Ecken auf allen Seiten */
    background-color: #333;
    color: var(--text-color);
}
.global-search-bar input:focus {
    outline: 2px solid var(--primary-color);
}

.global-search-bar .btn {
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    padding: 10px 20px;
}
/* --- 23. Feed Styles --- */


/* KORREKTUR: Wir verwenden das SVG vom Job-Teilen-Button wieder */
.post-footer .share-button svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

/* Knopf zum Ein-/Ausklappen von Antworten */
.toggle-replies-btn {
    background: none;
    border: none;
    color: var(--text-color-light);
    font-weight: 700;
    cursor: pointer;
    font-size: 0.9em;
    margin-left: 50px; /* Gleiche Einrückung wie Antworten */
    margin-top: 10px;
}
.toggle-replies-btn:hover {
    text-decoration: underline;
    color: var(--text-color);
}

.search-results-header {
    text-align: center;
    padding: 30px 0;
    margin-bottom: 40px;
}
.search-results-header h1 {
    font-size: 2.5em;
    margin-bottom: 8px;
}
.search-results-header .search-term {
    color: var(--primary-color);
}

/* Container für einen Ergebnis-Block (z.B. "Helden") */
.search-results-section {
    margin-bottom: 60px; /* Mehr Abstand zwischen den Blöcken */
}
.search-results-section h2 {
    font-size: 1.8em;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

/* Styling für die "Keine Ergebnisse"-Meldung */
.job-result-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Verteilt den Inhalt vertikal */
    padding: var(--spacing-unit) * 2; /* Innenabstand */
    text-decoration: none;
    color: inherit;
    height: 100%; /* Wichtig für das Grid-Layout */
}

.job-result-card .job-title {
    font-size: 1.1em;
    font-weight: 700;
    margin-bottom: var(--spacing-unit);
}

.job-result-card .job-company,
.job-result-card .job-location {
    font-size: 0.9em;
    color: var(--text-color-light);
    line-height: 1.4;
}

.job-result-card .btn {
    margin-top: var(--spacing-unit) * 2; /* Abstand nach oben zum Text */
    width: 100%;
    padding: var(--spacing-unit) 0; /* Weniger vertikales Padding für einen kompakteren Button */
    font-size: 0.9em;
}

/* --- 26. Like Button Active State --- */

.like-button.liked {
    color: var(--primary-color);
    font-weight: 900; /* Extra Fett, um es hervorzuheben */
}
/* --- 27. Notification Badge Styles --- */

.header-avatar-link {
    position: relative; /* Wichtig für die Positionierung des Badges */
    display: block;
}

.notification-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #e74c3c; /* Ein auffälliges Rot */
    color: white;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8em;
    font-weight: 700;
    border: 2px solid var(--background-color);
}
/* --- 28. Inbox Styles --- */
.inbox-list {
    display: flex;
    flex-direction: column;
    gap: 0; /* WhatsApp-Style: Keine Lücke mehr zwischen den Chats */
}
.conversation-item.card {
    position: relative;
    display: flex;
    align-items: stretch; 
    padding: 0 !important; 
    margin-bottom: 0 !important; /* Klebt direkt am nächsten Feld */
    border-radius: 0 !important; /* Erstmal alle Ecken eckig machen */
    border: none;
    border-bottom: 1px solid var(--border-color); /* Feine Trennlinie zwischen den Chats */
    transition: all 0.35s ease-out;
    overflow: hidden; 
}

/* WhatsApp-Look: Nur das allererste und das allerletzte Element abrunden */
.conversation-item.card:first-child {
    border-top-left-radius: var(--border-radius) !important;
    border-top-right-radius: var(--border-radius) !important;
}

.conversation-item.card:last-child {
    border-bottom-left-radius: var(--border-radius) !important;
    border-bottom-right-radius: var(--border-radius) !important;
    border-bottom: none; /* Letztes Element braucht keine Trennlinie unten */
}

/* Linker Bereich (Klickbar zum Chat) */
.conversation-main-link {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    color: inherit;
    flex-grow: 1; /* Nimmt den meisten Platz ein */
    padding: 20px; /* Hier ist jetzt das Padding für den Inhalt */
    min-width: 0; /* Verhindert Layout-Probleme bei langem Text */
}

/* Rechter Bereich (Status Box) */
.conversation-status-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; 
    gap: 10px; 
    width: 90px; 
    flex-shrink: 0;
    margin: 0; /* Sicherstellen, dass kein Außenabstand stört */
    padding: 10px 0; /* Innerer Abstand für Zeit und Mülleimer */
    text-align: center;
    border-left: 1px solid rgba(255,255,255,0.05); /* Eine hauchdünne Linie zur Trennung */
}

/* ZEIT: Styling in der Box */
.conversation-status-box .timestamp {
    font-size: 0.85em;
    font-weight: 700;
    white-space: nowrap;
}

/* MÜLLEIMER: Styling in der Box */
.conversation-status-box .delete-conversation-btn {
    position: static; /* Keine absolute Positionierung mehr */
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2em;
    padding: 5px;
    transition: transform 0.2s;
}
.conversation-status-box .delete-conversation-btn:hover {
    transform: scale(1.2);
}

/* FARBEN & STATUS */

/* STATUS: UNGELESEN (Gold) */
.conversation-item.unread .conversation-status-box {
    background-color: var(--primary-color);
    color: #1e1e1e; /* Dunkle Schrift auf Gold */
}
.conversation-item.unread .conversation-status-box .timestamp {
    color: #1e1e1e;
}
.conversation-item.unread .conversation-status-box .delete-conversation-btn {
    color: #1e1e1e;
}

/* STATUS: GELESEN (Clean UI: Transparent) */
.conversation-item.read .conversation-status-box {
    background-color: transparent; /* Grüner Hintergrund entfernt */
    color: #000000; /* Schwarz für die Uhrzeit */
}

/* STATUS: UNGELESEN (Kräftiges Gold) */
.conversation-item.unread .conversation-status-box {
    background-color: var(--primary-color);
    color: #1e1e1e; /* Dunkle Schrift für perfekten Kontrast auf Gold */
}

/* STATUS: GELESEN (Clean UI: Transparent & Automatische Farbe) */
.conversation-item.read .conversation-status-box {
    background-color: transparent; 
    color: inherit; /* WICHTIG: Erbt die Farbe der Karte (Weiß im Dark Mode, Schwarz im Light Mode) */
}

/* ZEITSTEMPEL BEI GELESENEN */
.conversation-item.read .conversation-status-box .timestamp {
    color: inherit !important; /* Erzwingt die Farbe von oben */
    opacity: 0.6;
    font-weight: 400;
}
.conversation-item.read .conversation-status-box .delete-conversation-btn {
    color: #e74c3c; /* JETZT ROT statt Schwarz */
    opacity: 0.8;
}
.conversation-item.read .conversation-status-box .delete-conversation-btn:hover {
    opacity: 1;
    color: #e74c3c; /* Signalrot beim Hovern */
    transform: scale(1.2);
}

/* NEUE, GEMEINSAME REGEL für beide Status-Punkte */
.conversation-item .unread-dot,
.conversation-item .read-dot {
    position: absolute;
    bottom: 20px; /* Positioniert den Punkt unten rechts */
    right: 22px;  /* Genauer Wert, um ihn mittig unter das X zu schieben (15px Rand + halbe Button-Breite) */
    border-radius: 50%;
}

/* Spezifische Größe und Farbe für den UNGELESEN-Punkt */
.conversation-item .unread-dot {
    width: 10px;
    height: 10px;
    background-color: var(--primary-color);
}

/* Spezifische Größe und Farbe für den GELESEN-Punkt */
.conversation-item .read-dot {
    width: 8px;
    height: 8px;
    background-color: #2ecc71;
    opacity: 0.7;
}
.conversation-item.unread {
    background-color: #262626; /* Etwas dunklerer Ton für ungelesene Nachrichten */
}
.conversation-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}
.conversation-details {
    flex-grow: 1;
}
.conversation-name {
    color: var(--text-color);
}
.conversation-preview {
    white-space: nowrap;     
    overflow: hidden;         
    text-overflow: ellipsis; 
    max-width: 300px; 
}

/* Grid-Anpassung für Dashboard-Karten */
.dashboard-actions {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
/* --- 29. Conversation/Chat Styles --- */
.chat-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 120px); /* Höhe des Fensters minus Header/Footer */
    max-width: 800px;
    padding-top: 20px;
    margin-bottom: 40px; /* Erzeugt am PC einen sauberen Abstand zum Footer */
}

.chat-header {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    flex-shrink: 0;
}

.chat-recipient-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chat-messages {
    flex-grow: 1;
    overflow-y: auto; /* Erlaubt das Scrollen der Nachrichten */
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.message-bubble {
    max-width: 70%;
    padding: 10px 15px;
    border-radius: 18px;
    line-height: 1.4;
}

.message-bubble.sent {
    background-color: var(--primary-color);
    color: #1e1e1e;
    align-self: flex-end; /* Eigene Nachrichten nach rechts */
    border-bottom-right-radius: 4px;
}

.message-bubble.received {
    background-color: #333;
    color: var(--text-color);
    align-self: flex-start; /* Empfangene Nachrichten nach links */
    border-bottom-left-radius: 4px;
}


.chat-input-form {
    display: flex;
    gap: 10px;
    padding: 15px 20px;
    flex-shrink: 0;
}
.chat-input-form textarea {
    width: 100%;
    min-height: 45px;
    max-height: 120px;
    resize: vertical;
    background-color: #333;
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 10px;
    font-family: var(--font-family);
    font-size: 1em;
}

.chat-input-form button {
    height: 45px;
}
/* --- 30. Dashboard Badge Styles --- */

.dashboard-badge {
    display: inline-block;
    background-color: #e74c3c; /* Gleiches Rot wie der Header-Badge */
    color: white;
    font-size: 0.8em;
    padding: 2px 8px;
    border-radius: 12px;
    margin-left: 8px;
    vertical-align: middle; /* Richtet den Badge schön mittig zur Textzeile aus */
}

/* Wir sorgen dafür, dass der Titel nicht umbricht, wenn der Badge da ist */
.action-card h3 {
    display: flex;
    align-items: center;
}
/* --- 31. Timestamp Layout Styles --- */

.timestamp {
    color: var(--text-color-light);
    font-size: 0.8em;
    white-space: nowrap; /* Verhindert, dass "vor 5 Minuten" umbricht */
}

/* Layout für den Post-Header */
.post-header {
    display: flex;
    align-items: flex-start; /* Oben ausrichten */
    gap: 15px;
}
.post-author-info {
    flex-grow: 1;
}
.post-author-info strong {
    display: block; /* Sorgt für Zeilenumbruch */
}

/* Layout für Kommentare */
.comment {
    display: flex;
    gap: 10px;
    align-items: flex-start; /* Stellt sicher, dass Avatar und Textblock oben beginnen */
}
.comment .timestamp {
    margin-left: auto; /* WICHTIG: Schiebt den Zeitstempel ganz nach rechts */
    padding-left: 10px; /* Ein kleiner Abstand zum Text */
    flex-shrink: 0; /* Verhindert, dass der Zeitstempel gequetscht wird */
}
/* --- 32. Dashboard Notifications Styles --- */

.dashboard-notifications {
    margin-top: calc(var(--spacing-unit) * 4);
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.dashboard-notifications h2 {
    text-align: center;
    margin-bottom: calc(var(--spacing-unit) * 3);
    color: var(--text-color-light);
}

.notification-list-dashboard {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 2);
    max-height: 300px; /* Begrenzt die Höhe, damit es nicht zu lang wird */
    overflow-y: auto; /* Fügt einen Scrollbalken hinzu, wenn nötig */
}

.notification-item {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 2);
    padding: calc(var(--spacing-unit) * 2);
    text-decoration: none;
    color: var(--text-color);
    margin-bottom: 0 !important; /* Kein Abstand mehr */
    border-radius: 0 !important; /* Alle eckig machen */
    border: none;
    border-bottom: 1px solid var(--border-color); /* Trennlinie hinzufügen */
}

/* Erstes Element oben abrunden */
.notification-list .notification-item:first-child {
    border-top-left-radius: var(--border-radius) !important;
    border-top-right-radius: var(--border-radius) !important;
}

/* Letztes Element unten abrunden und Trennlinie entfernen */
.notification-list .notification-item:last-child {
    border-bottom-left-radius: var(--border-radius) !important;
    border-bottom-right-radius: var(--border-radius) !important;
    border-bottom: none;
}

.notification-item:hover {
    background-color: #2c2c2c;
    transform: none !important; /* Verhindert das Hochspringen in der Liste */
    box-shadow: none !important; /* Verhindert störende Schatten in der kompakten Liste */
}

.notification-item.unread {
    background-color: #2a2a2a;
    border-left: 3px solid var(--primary-color);
}

.notification-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.notification-text {
    flex-grow: 1;
}

.notification-text .timestamp {
    display: block;
    font-size: 0.8em;
    color: var(--text-color-light);
    margin-top: 4px;
}
/* --- 33. Delete Button Styles --- */

.delete-button {
    background: none;
    border: none;
    color: var(--text-color-light);
    cursor: pointer;
    font-size: 1.4em; /* Macht das 'X' etwas größer */
    line-height: 1;
    padding: 0 5px;
    opacity: 0.5;
    transition: color 0.2s, opacity 0.2s;
}

.delete-button:hover {
    color: #e74c3c; /* Rot bei Hover */
    opacity: 1;
}

/* Positionierung für den Post-Löschen-Button */
.post-header {
    position: relative; /* Wichtig für die Positionierung des Buttons */
}
.post-header .delete-button {
    position: absolute;
    top: 0;
    right: 0;
}

/* Positionierung für den Kommentar-Löschen-Button */
.comment-body {
    position: relative;
    display: flex; /* NEU: Macht den Container zu einer Flexbox */
    align-items: flex-start; /* NEU: Richtet die Kinder oben aus */
    flex-wrap: wrap; /* NEU: Erlaubt Zeilenumbrüche für den Text */
}
.comment-body .delete-button {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 1.2em;
}
/* --- 34. Contacts View Styles --- */


.contacts-container h2 {
    margin-top: 40px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

/* NEU: Fügt den Abstand zwischen den Kontakt-Karten hinzu */
.contacts-list {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Hier kannst du den Abstand anpassen, z.B. 15px */
}

.request-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
}

.request-info {
    flex-grow: 1;
}

.request-info a {
    font-size: 1.2em;
    font-weight: 700;
}

.request-actions {
    display: flex;
    gap: 10px;
}
/* --- 35. Profile Detail Follower Count --- */
.follower-count {
    font-weight: 700;
}
/* --- 36. Form Close Button --- */

/* Wir erstellen eine Hilfsklasse, damit wir nicht alle Karten verändern */
.card-with-close-btn {
    position: relative; /* Wichtig für die Positionierung des Buttons */
}

.form-close-btn {
    position: absolute;
    top: 20px;
    right: 25px;
    font-size: 2em;
    font-weight: 700;
    line-height: 1;
    color: var(--text-color-light);
    text-decoration: none;
    opacity: 0.7;
    transition: color 0.2s, opacity 0.2s, transform 0.2s;
}

.form-close-btn:hover {
    color: var(--primary-color);
    opacity: 1;
    transform: scale(1.1);
}

/* --- 37. Responsive Header & Hamburger Menu --- */

.nav-wrapper {
    display: flex;
    align-items: center;
    gap: 20px;
}

.nav-links-desktop {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* WIR STYLEN JETZT DIE LINKS INNERHALB DIESES CONTAINERS */
.nav-links-desktop a {
    font-weight: 700;
    font-size: 1.2em;
    color: var(--primary-color); /* JETZT GOLD */
    transition: color 0.2s ease;
}

.nav-links-desktop a:hover {
    color: var(--primary-color-hover); /* JETZT HELLERES GOLD BEIM HOVER */
}

.hamburger-menu {
    display: none; /* Auf dem Desktop versteckt */
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1001; /* Über dem Menü */
}

.hamburger-menu span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--text-color);
    margin: 5px 0;
    transition: all 0.3s ease;
}

.mobile-nav-menu {
    display: none; /* Standardmäßig versteckt */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    z-index: 1000;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.mobile-nav-menu a {
    color: var(--text-color);
    font-size: 2em;
    font-weight: 700;
}

/* Aktiv-Zustand für das Hamburger-Menü (wird per JS gesteuert) */
.hamburger-menu.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.hamburger-menu.active span:nth-child(2) {
    opacity: 0;
}
.hamburger-menu.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

.mobile-nav-menu.active {
    display: flex; /* Macht das Menü sichtbar */
}


/* --- Media Query: Der Umschaltpunkt für die mobile Ansicht --- */
@media (max-width: 850px) {

    /* Wir ändern das Grid-Layout des Headers zu einem Flexbox-Layout */
    .main-nav {
        display: flex;
        flex-wrap: wrap; /* Erlaubt den Umbruch in die nächste Zeile */
        justify-content: space-between; /* Richtet Logo und Nav-Wrapper oben aus */
        align-items: center;
        gap: 15px; /* Abstand zwischen den Elementen */
    }
    
    .global-search-bar {
        /* Die Suchleiste nimmt jetzt die volle Breite ein und erzeugt den Zeilenumbruch */
        width: 100%;
        order: 3; /* Sorgt dafür, dass die Suchleiste als letztes Element (also unten) erscheint */
    }
    .global-search-bar input {
        font-size: 1.1em; /* Schrift wieder etwas größer machen, da jetzt Platz ist */
    }

    /* Die Icons rechts im Header ausblenden, da sie in der unteren Leiste sind */
    .nav-links-profile {
        display: none;
    }
}


/* --- 38. Document Upload Styles --- */
.document-upload-group {
    margin-bottom: 20px;
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}

.document-upload-group label {
    font-weight: 700;
    display: block;
    margin-bottom: 10px;
}

.current-file {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #333;
    padding: 10px 15px;
    border-radius: var(--border-radius);
    margin-bottom: 10px;
    font-size: 0.9em;
}

.current-file span {
    color: var(--text-color-light);
}

.delete-file-btn {
    background: none;
    border: none;
    color: var(--text-color-light);
    cursor: pointer;
    font-size: 1.2em;
}
.delete-file-btn:hover {
    color: #e74c3c;
}

/* --- 39. Apply View & Toggle Switch Styles --- */

.apply-form-section {
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--border-color);
}
.apply-form-section:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}

.generated-cover-letter {
    background-color: #333;
    border: 1px solid var(--border-color);
    padding: 20px;
    border-radius: var(--border-radius);
    color: var(--text-color-light);
    font-style: italic;
    line-height: 1.7;
}

.toggle-switch-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.toggle-switch-label {
    font-weight: 700;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #444;
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: var(--primary-color);
}

input:checked + .slider:before {
    transform: translateX(26px);
}
/* --- 40. Job Card Author & Footer Styles --- */
.job-card-author {
    display: flex;
    align-items: center;
    gap: 12px; 
    margin-bottom: 15px;
    font-weight: 700;
}

/* NEU: Fix für lange Firmennamen (z.B. KPMG) */
.job-card-author span {
    flex: 1;               /* Nimmt den gesamten restlichen Platz ein */
    min-width: 0;          /* WICHTIG: Erlaubt dem Container zu schrumpfen */
    word-wrap: break-word; /* Standard Umbruch */
    overflow-wrap: break-word; /* Moderner Umbruch */
    word-break: break-word; /* Erzwingt Umbruch auch mitten im langen Wort */
    line-height: 1.25;     /* Sieht bei zwei Zeilen besser aus */
}

/* FIX: Bild passt sich jetzt dem Container an */
.job-card-author .post-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.job-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto; /* Wichtig, um den Footer nach unten zu drücken */
    padding-top: 15px;
    gap: 5px; /* Reduzierter Abstand, damit nichts unnötig gequetscht wird */
}

.job-card-footer .timestamp {
    font-size: 0.9em;
    white-space: nowrap; /* Text bricht nicht um */
    /* Automatisches Abschneiden komplett entfernt, Text bleibt immer lesbar! */
    flex-shrink: 0; /* Verbietet dem Text, gequetscht zu werden */
}

/* NEU: Mobile Optimierung für den Footer (Macht Schrift und Button etwas kompakter) */
@media (max-width: 600px) {
    .job-card-footer .timestamp {
        font-size: 0.8em; /* Minimal kleinere Schrift auf dem Handy */
    }
    .job-card-footer .btn {
        padding: 8px 12px; /* Button etwas schlanker machen für mehr Platz */
        font-size: 0.9em;
    }
}

/* Anpassung für die gesperrte Karte */
.job-meta-locked {
    text-align: center;
    padding: 20px 0;
    margin: auto 0;
    color: var(--text-color-light);
}
.lock-icon {
    font-size: 2em;
    display: block;
}

/* --- 41. Job Type Badge Styles --- */

.job-type-container {
    /* Dieser Container sorgt für den richtigen Abstand, wenn Tags folgen */
    margin-bottom: var(--spacing-unit);
}

.job-type-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 5;
    
    background-color: rgba(30, 30, 30, 0.7);
    backdrop-filter: blur(4px);
    border: 1px solid var(--border-color);

    color: var(--primary-color);
    padding: 4px 10px;
    border-radius: var(--border-radius);
    font-size: 0.8em;
    font-weight: 700;
    text-transform: uppercase;
}



/* --- 42. JOB CARD LAYOUT (Überarbeitet & Konsolidiert) --- */

/* 1. Grundstruktur der Karte */
.card.job-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0; /* WICHTIG: Padding wird jetzt intern verwaltet */
    height: 100%;
    /* Wir entfernen den Padding vom a-Tag, damit der Inhalt ihn steuern kann */
    text-decoration: none; 
    color: inherit;
}

/* 2. Der Hauptinhaltsbereich (alles außer dem Footer) */
.job-card-content {
    /* Oben mehr Platz für das Badge, an den anderen Seiten bleibt es gleich */
    padding: calc(var(--spacing-unit) * 7) calc(var(--spacing-unit) * 3) 0 calc(var(--spacing-unit) * 3);
    padding-bottom: 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* 3. Der Footer-Wrapper */
.job-card-footer-wrapper {
    padding: calc(var(--spacing-unit) * 3); /* Der Footer bekommt seinen eigenen Padding */
    padding-top: 0; /* Abstand nach oben wird vom Footer-Inhalt gesteuert */
}

.job-card-footer {
    padding-top: calc(var(--spacing-unit) * 2); /* Abstand zwischen Timestamp und dem Rest */
    /* Die restlichen Styles für den Footer bleiben gleich */
}


/* 4. Das Bild (oder der Platzhalter) */
.job-card-swiper, 
.job-card-thumbnail-placeholder {
    width: 100%;
    height: 180px;
    /* KORREKTUR: Größerer Abstand nach oben zum Text */
    margin-top: calc(var(--spacing-unit) * 3); 
    border-radius: var(--border-radius);
    flex-shrink: 0;
}

.job-card-thumbnail-placeholder {
    width: 100%;
    height: 180px;
    background-color: #2a2a2a; /* Ein etwas anderes Dunkelgrau für mehr Kontrast */
    border-radius: var(--border-radius);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

/* Basis-Styling für beide Teile des Logos */
.job-card-thumbnail-placeholder::before,
.job-card-thumbnail-placeholder::after {
    font-family: var(--font-family);
    font-size: 2.8em; /* Größer für mehr Präsenz */
    font-weight: 700;
    opacity: 0.7; /* Stärkere Deckkraft */
}

/* Der "Joblin"-Teil in HELLEM WEISS */
.job-card-thumbnail-placeholder::before {
    content: "Joblin";
    color: var(--text-color); /* Explizit auf die helle Textfarbe setzen */
}

/* Das "x" in GOLD */
.job-card-thumbnail-placeholder::after {
    content: "x";
    color: var(--primary-color);
}

/* --- Gehaltsanzeige im Platzhalter --- */
.salary-placeholder-info {
    text-align: center;
    background: rgba(0, 0, 0, 0.4);
    padding: 15px;
    border-radius: 12px;
    backdrop-filter: blur(4px);
    width: 80%;
    z-index: 5; /* Liegt über dem Logo */
}

.salary-placeholder-info small {
    display: block;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    margin-bottom: 5px;
    font-size: 0.75rem;
}

.salary-amount {
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 800;
}

/* Versteckt das Joblinx-Logo, wenn Gehalts-Informationen vorhanden sind */
.job-card-thumbnail-placeholder:has(.salary-placeholder-info)::before,
.job-card-thumbnail-placeholder:has(.salary-placeholder-info)::after {
    display: none;
}

.job-card-swiper .swiper-slide,
.job-card-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--border-radius);
}

.job-card-salary-badge {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: var(--primary-color);
    color: #1e1e1e;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.8em;
    font-weight: 800;
    z-index: 6;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}


/* 5. Spezifische Abstände und Ausrichtung für einheitliches Layout */
.job-card-author {
    margin-bottom: calc(var(--spacing-unit) * 2);
}

.job-location {
    margin-bottom: calc(var(--spacing-unit) * 1.5); /* Leichter Abstand unter dem Ort */
}

/* KORREKTUR: Löst das "Treppen"-Problem */
.job-tags {
    margin-top: auto; /* WICHTIG: Drückt die Tags nach unten an den Rand des Content-Blocks */
    padding-top: calc(var(--spacing-unit) * 1.5); /* Sorgt für Abstand, falls der Text darüber kurz ist */
}

/* --- Recruiter Visitenkarte in der Partner-Detailansicht --- */
.recruiter-business-card {
    background: linear-gradient(145deg, var(--surface-color), #252525);
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    position: relative;
    overflow: hidden;
}

.recruiter-main-content img {
    border: 3px solid var(--border-color);
    transition: transform 0.3s ease;
}

.recruiter-main-content:hover img {
    transform: scale(1.05);
    border-color: var(--primary-color);
}

.recruiter-contact-actions .btn-secondary {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

.recruiter-contact-actions .btn-secondary:hover {
    background-color: var(--primary-color);
    color: var(--surface-color);
    border-color: var(--primary-color);
}

@media (max-width: 600px) {
    .recruiter-contact-actions {
        grid-template-columns: 1fr !important; /* Untereinander auf Handys */
    }
}

/* --- 43. GLightbox Design Fixes --- */

.goverlay {
    background: rgba(0, 0, 0, 0.92) !important;
}

/* KORREKTUR: Wir zielen auf den Container, der den weißen Hintergrund hat */
.gslide-inner-content {
    background: none !important;
}

/* Wir sorgen dafür, dass das Bild den verfügbaren Platz nutzt, aber nicht über den Bildschirm hinausgeht */
.gslide-image img {
    max-height: 90vh !important;
    max-width: 90vw !important;
    width: auto !important;
    height: auto !important;
    margin: auto !important; /* Zentriert das Bild */
}


/* Wir zielen auf den Hauptcontainer, um die Steuerungselemente zu bändigen */
.glightbox-container .gnext, 
.glightbox-container .gprev {
    top: 50%;
    transform: translateY(-50%);
    transition: opacity 0.2s ease;
    width: 45px;
    height: 45px;
}

.glightbox-container .gnext {
    right: 25px;
}

.glightbox-container .gprev {
    left: 25px;
}

.glightbox-container .gclose {
    top: 25px;
    right: 25px;
    opacity: 0.8;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.glightbox-container .gclose:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* Wir verstecken die Pfeile, wenn man nicht über das Bild/die Seite hovert */
.glightbox-container:not(:hover) .gnext,
.glightbox-container:not(:hover) .gprev {
    opacity: 0;
}

/* Wir vergrößern die Icons für eine bessere Klickbarkeit */
.gnext .gnext-prev-icon, 
.gprev .gnext-prev-icon,
.gclose .gclose-icon {
    width: 30px !important;
    height: 30px !important;
}
/* --- 44. Image Preview Delete Button --- */

.preview-image-wrapper {
    position: relative;
}

.delete-preview-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.preview-image-wrapper:hover .delete-preview-btn {
    opacity: 1;
}

.image-preview-container {
    display: grid;
    /* Erstellt Spalten, die mindestens 100px breit sind, aber wachsen können, um den Platz zu füllen */
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    margin-top: 15px; /* Abstand nach oben zum "Durchsuchen"-Button */
}

.preview-image-wrapper {
    position: relative;
    /* Sorgt dafür, dass das Bild quadratisch bleibt */
    aspect-ratio: 1 / 1;
    border-radius: var(--border-radius);
    overflow: hidden; /* Versteckt alles, was über den Rand hinausgeht */
}

.preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Schneidet das Bild passend zu, anstatt es zu verzerren */
    display: block;
}

.delete-preview-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 2; /* Stellt sicher, dass der Button über dem Bild ist */
}

.preview-image-wrapper:hover .delete-preview-btn {
    opacity: 1;
}
/* --- 45. Create-New-Plus Button --- */

.create-new-container {
    text-align: center;
    /* Abstand nach oben (zur Suchleiste) und nach unten (zu den Job-Karten) */
    margin: 20px 0 40px 0;
    position: relative; /* Wichtig für die Trennlinie */
}

/* Die Trennlinie links und rechts vom Button */
.create-new-container::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--border-color);
    z-index: 0; /* Stellt sicher, dass die Linie hinter dem Button ist */
}


.btn-create-plus {
    display: inline-flex; /* Wichtig für die Zentrierung des '+' */
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    background-color: var(--surface-color); /* Hintergrundfarbe des Containers */
    color: var(--primary-color);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    font-size: 2.5em;
    font-weight: 300;
    line-height: 1;
    text-decoration: none;
    position: relative; /* Damit der Button über der Linie liegt */
    z-index: 1;
    transition: all 0.2s ease;
}

.btn-create-plus:hover {
    background-color: var(--primary-color);
    color: var(--surface-color);
    border-color: var(--primary-color);
    transform: scale(1.1) rotate(90deg); /* cooler Effekt beim Hovern */
}
/* --- 46. Community Feed Image Upload Styles --- */

.create-post-footer {
    display: flex;
    justify-content: flex-end; /* Schiebt alle Kind-Elemente nach rechts */
    align-items: center;
    margin-top: 15px;
}

.post-actions {
    display: flex;
    align-items: center;
    gap: 10px; /* Abstand zwischen Büroklammer und Button */
}

.btn-icon-upload {
    background-color: transparent;
    border: 1px solid var(--border-color);
    width: 45px; /* Quadratische Form */
    height: 45px;
    border-radius: var(--border-radius);
    color: var(--text-color-light);
    cursor: pointer;
    font-size: 1.5em; /* Größeres Icon */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease;
}

.btn-icon-upload:hover {
    background-color: var(--surface-color);
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-icon-upload:hover {
    background-color: var(--surface-color);
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.post-body {
    margin-top: 15px;
}

.post-image-grid {
    margin-top: 15px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 5px;
}

.post-image-grid img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: var(--border-radius);
    cursor: pointer;
}
/* --- 47. Community Comment Image Styles --- */

.comment-form-footer {
    display: flex;
    /* Wir schieben alles nach rechts */
    justify-content: flex-end;
    align-items: flex-end; 
    margin-top: 10px;
}

/* Wir sorgen dafür, dass sich der Vorschau-Container vor die Buttons legt */
.comment-form-footer .post-actions {
    justify-content: flex-end; /* Buttons bleiben rechts */
    flex-grow: 1; /* Erlaubt dem Container zu wachsen */
}

.comment-image-preview {
    /* Nimmt den restlichen Platz links von den Buttons ein */
    flex-grow: 1; 
    /* Wir entfernen den Rahmen, den wir vom Haupt-Post geerbt haben */
    border: none !important; 
    padding: 0 !important;
}

/* Versteckter Input innerhalb des Labels */
.btn-icon-upload input[type="file"] {
    display: none;
}



.comment-image-grid {
    margin-top: 10px;
    display: flex;
    gap: 5px;
}

.comment-image-grid img {
    max-width: 100px;
    height: auto;
    border-radius: var(--border-radius);
}
/* --- 48. Share Button & Modal Styles --- */


.share-button {
    background: none;
    border: none;
    color: var(--text-color-light);
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    gap: 8px; /* Abstand zwischen Icon und Text */
    margin-left: 15px;
    font-size: 1em; /* Stellt sicher, dass die Schriftgröße passt */
    font-weight: 700;
}

/* Diese Regel verhindert, dass das SVG den Klick "stiehlt" */
.share-button * {
    pointer-events: none;
}

.share-button svg {
    transition: all 0.2s ease;
    transform: rotate(15deg); /* Leichte Neigung wie "1 Uhr" */
}

.share-button:hover, .share-button:hover svg {
    color: var(--primary-color);
}

.share-button:hover svg {
    transform: rotate(0deg) scale(1.1); /* Richtet sich beim Hovern auf */
}

.contact-share-list {
    max-height: 300px;
    overflow-y: auto;
    text-align: left;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}

.contact-share-item label {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 15px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.contact-share-item label:hover {
    background-color: #333;
}

.contact-share-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--primary-color);
}

/* Wir passen den Footer der Post-Box an */
.create-post-footer {
    gap: 15px;
}
.job-card-thumbnail-placeholder {
    width: 100%;
    height: 180px; /* Exakt die gleiche Höhe wie ein echtes Bild */
    flex-shrink: 0; /* Verhindert, dass der Platzhalter schrumpft */
}
/* --- 50. Job Card Share Button --- */

/* Wichtig, damit sich der Button daran positionieren kann */
.card.job-card {
    position: relative; 
}

.share-job-button {
    position: absolute;
    top: 15px;
    right: 15px; /* Standardmäßig ganz rechts (für nicht-angemeldete User) */
    z-index: 5; /* Stellt sicher, dass er über dem Bild ist */
    background-color: rgba(30, 30, 30, 0.7);
    border: 1px solid var(--border-color);
    color: var(--text-color-light);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    backdrop-filter: blur(4px); /* Schicker Glaseffekt */
    transition: all 0.2s ease;
}

/* NEU: Wenn der Favoriten-Button da ist (angemeldet), rückt der Teilen-Button nach links */
.favorite-job-button ~ .share-job-button {
    right: 65px;
}

.share-job-button:hover {
    background-color: var(--primary-color);
    color: #1e1e1e;
    transform: scale(1.1);
}

/* Verhindert, dass das SVG Klicks abfängt */
.share-job-button * {
    pointer-events: none;
}
/* --- 51. Share Menu Modal Styles --- */

.share-menu {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.share-option-btn {
    /* Wir stylen die Buttons wie normale Buttons, aber mit voller Breite */
    width: 100%;
    padding: 15px;
    background-color: #333;
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    font-size: 1.1em;
    font-weight: 700;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
}

.share-option-btn:hover {
    background-color: #444;
    border-color: var(--primary-color);
    color: var(--primary-color);
}
/* --- 52. Content Preview Card --- */

.content-preview-card {
    display: flex;
    align-items: center;
    gap: 15px;
    background-color: #333;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 10px;
    margin-top: 10px;
    text-decoration: none;
    color: var(--text-color);
    transition: background-color 0.2s;
}

.content-preview-card:hover {
    background-color: #444;
}

.content-preview-card .preview-image {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

.content-preview-card .preview-details {
    display: flex;
    flex-direction: column;
}

.content-preview-card .preview-title {
    font-weight: 700;
    font-size: 1em;
}

.content-preview-card .preview-location {
    font-size: 0.9em;
    color: var(--text-color-light);
}

/* --- 53. Filter Modal Close Button Fix --- */

/* Der Haupt-Modal-Container (die "Karte") bekommt die relative Position */
.modal-content {
    position: relative; /* WICHTIGSTE ÄNDERUNG! */
}

/* Wir stylen das X jetzt direkt, ohne Umwege */
.modal-close-btn {
    position: absolute;
    top: 15px; /* Etwas näher am Rand */
    right: 20px;
    font-size: 2.2em;
    font-weight: 700;
    line-height: 1;
    color: var(--text-color-light);
    text-decoration: none;
    opacity: 0.7;
    transition: all 0.2s ease;
}

/* Die Drehung entfernen wir, aber der Hover-Effekt bleibt */
.modal-close-btn:hover {
    color: var(--primary-color);
    opacity: 1;
    transform: scale(1.1); /* Keine Drehung mehr */
}
/* --- 54. My Jobs Card Fix --- */

/* Wir stellen sicher, dass alle Job-Karten, egal ob Link oder Div,
   als Positionierungs-Kontext für ihre Kinder dienen. */
.job-card {
    position: relative;
}

/* Spezifische Anpassung für den Löschen-Button, damit er immer an der gleichen Stelle ist */
.job-card .delete-job-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 5; /* Stellt sicher, dass er über anderen Elementen liegt */
}
/* --- 55. Delete Buttons for Inbox & Dashboard --- */

/* Wir machen die Container zu Positionierungs-Ankern */
.conversation-item,
.notification-item {
    position: relative;
    /* Wir ändern die Display-Art, damit der Link nicht die ganze Breite einnimmt */
    display: flex;
    align-items: center;
}

/* Positionierung der Lösch-Buttons */
.delete-conversation-btn,
.delete-notification-btn {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    z-index: 10; /* ** NEU: Button liegt jetzt über anderen Elementen ** */
}


/* --- 56. Favorite Button Styles --- */

.favorite-job-button {
    position: absolute;
    top: 15px;
    right: 15px; 
    z-index: 5;
    background-color: var(--surface-color); /* Korrekt: Passt sich dem Hell/Dunkel Modus an */
    border: 1.5px solid #e74c3c; /* Rote Umrandung */
    color: #e74c3c !important; /* Rotes Herz */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1.2em;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.favorite-job-button:hover {
    transform: scale(1.1);
    box-shadow: 0 0 12px rgba(231, 76, 60, 0.4); /* Roter Glow beim Hover */
}

.favorite-job-button.favorited {
    background-color: #e74c3c !important; 
    color: #ffffff !important; /* Weißes Herz auf Rot */
    border-color: #e74c3c !important;
    box-shadow: 0 0 15px rgba(231, 76, 60, 0.5);
}

/* --- 57. Upgrade Button Styles --- */

.dashboard-container {
    /* Wichtig, damit wir den Button relativ zum gesamten Dashboard-Bereich positionieren können */
    position: relative;
}

.btn-upgrade {
    /* Die position, top und right Anweisungen wurden entfernt */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background-color: var(--primary-color);
    color: var(--surface-color);
    border: none;
    border-radius: var(--border-radius);
    font-size: 1em;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    
    animation: pulse 2s infinite;
}

.btn-upgrade:hover {
    background-color: var(--primary-color-hover);
    transform: scale(1.05); /* Leichter Zoom bei Hover */
    animation-play-state: paused; /* Stoppt die Animation bei Hover */
}

/* Die Keyframes für unsere Puls-Animation */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(212, 175, 55, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(212, 175, 55, 0);
    }
}

@keyframes pulse-danger {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.7); /* Rot leuchtend */
  }
  70% {
    transform: scale(1.05); /* Leichter Zoom-Effekt */
    box-shadow: 0 0 10px 15px rgba(255, 82, 82, 0); /* Transparentes Rot */
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 82, 82, 0);
  }
}

/* --- 58. Admin Backend Styles --- */

.admin-panel {
    display: grid;
    grid-template-columns: 240px 1fr; /* Feste Sidebar, flexibler Inhalt */
    height: 100vh;
    background-color: var(--background-color);
}

.admin-sidebar {
    background-color: var(--surface-color);
    padding: 24px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-color);
}

.admin-logo h3 {
    color: var(--text-color); 
    font-size: 1.8em;
    text-align: center;
    margin-bottom: 40px;
    font-weight: 700;
}

.admin-logo h3 span {
    color: var(--primary-color);
}

.admin-nav {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.admin-nav a {
    color: var(--text-color-light);
    text-decoration: none;
    font-size: 1.1em;
    font-weight: 700;
    padding: 10px 15px;
    border-radius: var(--border-radius);
    transition: background-color 0.2s, color 0.2s;
}

.admin-nav a:hover {
    background-color: #333;
    color: var(--text-color);
}

.admin-nav a.active {
    background-color: var(--primary-color);
    color: var(--surface-color);
}

.admin-footer {
    margin-top: auto; /* Schiebt den Footer nach unten */
}

.admin-content {
    padding: 40px;
    overflow-y: auto; /* Ermöglicht Scrollen, wenn der Inhalt lang ist */
}

.admin-content h1 {
    margin-bottom: 30px;
}

/* Statistik-Karten im Dashboard */
.admin-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.admin-kpi-card h3 {
    color: var(--text-color-light);
    font-size: 1em;
}

.admin-kpi-card p {
    font-size: 2.5em;
    font-weight: 700;
    margin: 0;
    color: var(--primary-color);
}

/* Tabelle für Nutzerliste */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.admin-table th,
.admin-table td {
    padding: 12px 15px;
    /* Wir entfernen den unteren Rand von ALLEN Zellen */
    border-bottom: none; 
    text-align: left;
}

/* NEUE REGEL: Wir fügen stattdessen einen oberen Rand für jede ZEILE hinzu */
.admin-table tr {
    border-top: 1px solid var(--border-color);
}

/* Die Kopfzeile braucht keinen oberen Rand */
.admin-table thead tr {
    border-top: none;
}

.admin-table th {
    color: var(--text-color-light);
}

.admin-table tbody tr:hover {
    background-color: #2a2a2a;
}

.admin-status-badge {
    padding: 4px 10px;
    border-radius: var(--border-radius);
    font-size: 0.8em;
    font-weight: 700;
    color: var(--surface-color);
}

.admin-status-badge.status-active {
    background-color: #2ecc71; /* Grün */
}

.admin-status-badge.status-locked {
    background-color: #e74c3c; /* Rot */
}

.admin-conversation-view {
    text-align: left;
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    padding: 15px;
    border-radius: var(--border-radius);
}

.admin-conversation-view p {
    margin: 0 0 10px 0;
    line-height: 1.5;
}

.admin-search-bar {
    margin-bottom: 20px;
}

.admin-search-bar input {
    width: 100%;
    padding: 12px;
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-color);
    font-size: 1em;
}

/* --- 59. Floating Support Button Styles --- */

.floating-support-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    
    width: 60px;
    height: 60px;
    background-color: #e74c3c; /* Festes Rot (Joblinx-Gefahren/Support-Farbe) */
    color: #ffffff; /* Weißes Fragezeichen für besten Kontrast */
    border-radius: 50%;
    border: none;
    box-shadow: var(--box-shadow);
    
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8em; /* Größe des Icons */
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.floating-support-btn:hover {
    transform: scale(1.1);
    background-color: var(--primary-color-hover);
}

.admin-ticket-details, .admin-ticket-history {
    text-align: left;
    margin-bottom: 20px;
}

.admin-ticket-response {
    background-color: var(--background-color);
    padding: 10px 15px;
    border-radius: var(--border-radius);
    margin-top: 10px;
    border: 1px solid var(--border-color);
}

.admin-ticket-response small {
    display: block;
    text-align: right;
    color: var(--text-color-light);
    margin-top: 5px;
}

/* Neue Statusfarbe für "In Bearbeitung" */
.admin-status-badge.status-waiting {
    background-color: #f39c12; /* Orange/Gelb */
    color: var(--surface-color); /* Fügt die dunkle Schriftfarbe hinzu */
}

.ticket-main-content .back-link {
    display: block;
    margin-bottom: 20px;
}

.ticket-history-container {
    max-height: 50vh;
    overflow-y: auto;
    padding: 10px;
    margin-bottom: 20px;
}

.ticket-entry {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 15px;
    margin-bottom: 15px;
}

.ticket-entry.internal {
    background-color: #2c2a1e; 
    border-left: 3px solid #f39c12;
}

.ticket-entry.user-message {
    border-left: 3px solid var(--primary-color);
}

.ticket-entry-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.ticket-author-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.ticket-entry-type {
    background-color: #333;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 0.8em;
    font-weight: 700;
}

.ticket-entry-timestamp {
    margin-left: auto;
    font-size: 0.9em;
    color: var(--text-color-light);
}

/* Antwort-Box */
.ticket-response-box {
    padding: 0; /* Padding wird intern verwaltet */
}

.response-type-tabs {
    padding: 10px;
    border-bottom: 1px solid var(--border-color);
}

.response-type-tabs input[type="radio"] {
    display: none;
}

.response-type-tabs label {
    display: inline-block;
    padding: 8px 15px;
    cursor: pointer;
    border-radius: var(--border-radius);
}

.response-type-tabs input[type="radio"]:checked + label {
    background-color: var(--primary-color);
    color: var(--surface-color);
    font-weight: 700;
}

#ticket-response-text {
    width: 100%;
    min-height: 150px;
    background: transparent;
    border: none;
    color: var(--text-color);
    padding: 15px;
    font-size: 1em;
    resize: vertical;
}

#ticket-response-text:focus {
    outline: none;
}

.ticket-response-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background-color: #1a1a1a;
    border-top: 1px solid var(--border-color);
    border-radius: 0 0 var(--border-radius) var(--border-radius);
}

.ticket-response-footer .actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ticket-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.ticket-status-selector {
    display: flex;
    gap: 5px;
    background-color: var(--surface-color);
    padding: 5px;
    border-radius: var(--border-radius);
}

.btn-status {
    background: none;
    border: none;
    color: var(--text-color-light);
    padding: 8px 15px;
    border-radius: 8px; /* Etwas weniger rund als die äußere Box */
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-status.active {
    color: var(--surface-color);
}

.btn-status[data-status="open"].active { background-color: #2ecc71; /* Grün */ }
.btn-status[data-status="in_progress"].active { background-color: #f39c12; /* Gelb */ }
.btn-status[data-status="closed"].active { background-color: #e74c3c; /* Rot */ }

/* Senden-Button oben rechts positionieren */
.response-type-tabs {
    position: relative; /* Wichtig für die Positionierung */
}

#ticket-response-btn {
    position: absolute;
    top: 10px;
    right: 15px;
}

/* Footer anpassen */
.ticket-response-footer {
    justify-content: flex-start; /* Makros nach links schieben */
}

/* NEUE REGEL FÜR DAS MAKRO-DROPDOWN */
#macro-select {
    background-color: #333;
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 10px; /* Passt zur Höhe der Buttons */
    min-width: 200px;
}

/* --- 60. Admin Support System Erweiterungen --- */

.admin-ticket-filters {
    display: flex;
    gap: 15px; /* Etwas mehr Abstand */
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    align-items: flex-end; /* Richtet Label und Input-Felder unten bündig aus */
}

.admin-ticket-filters .btn-secondary {
    background-color: transparent;
    border: 1px solid var(--border-color);
}

.admin-ticket-filters .btn-secondary.active {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--surface-color);
    font-weight: 700;
}

.ticket-assignment-box {
    background-color: var(--surface-color);
    padding: 15px;
    border-radius: var(--border-radius);
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ticket-assignment-box .assignee-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ticket-assignment-box .assignee-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.ticket-assignment-box .assignee-actions select {
    background-color: #333;
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 8px;
    border-radius: var(--border-radius);
    margin-left: 10px;
}

/* --- 61. Admin Support Layout Fixes --- */

.admin-ticket-groups .card {
    padding: 0; 
}

.admin-ticket-groups h3 {
    margin-top: 30px;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--border-color);
}
.admin-ticket-groups h3:first-of-type {
    margin-top: 0;
}

.admin-table th:nth-child(1), .admin-table td:nth-child(1) { width: 10%; } /* ID */
.admin-table th:nth-child(2), .admin-table td:nth-child(2) { width: 12%; } /* Status */
.admin-table th:nth-child(3), .admin-table td:nth-child(3) { width: 30%; } /* Betreff */
.admin-table th:nth-child(4), .admin-table td:nth-child(4) { width: 15%; } /* Von */
.admin-table th:nth-child(5), .admin-table td:nth-child(5) { width: 13%; } /* Erstellt */
.admin-table th:nth-child(6), .admin-table td:nth-child(6) { width: 10%; } /* Offen seit */
.admin-table th:nth-child(7), .admin-table td:nth-child(7) { width: 10%; } /* Aktual. */


/* FEHLENDE REGEL FÜR DEN WARTEND-BUTTON */
.btn-status[data-status="waiting"].active { 
    background-color: #f39c12; /* Gelb */ 
}

/* --- 62. Admin Action Buttons Layout Fix (Korrektur) --- */

/* Wir stylen die Buttons, die DIREKT in der Zelle sind */
.admin-table td:last-child > .btn,
.admin-table td:last-child > .btn-secondary {
    margin-right: 8px; /* Fügt einen kleinen Abstand zwischen den Buttons hinzu */
}

/* Wir entfernen den Abstand beim letzten Button in der Zelle */
.admin-table td:last-child > .btn:last-child,
.admin-table td:last-child > .btn-secondary:last-child {
    margin-right: 0;
}

/* --- 63. Admin Action Buttons Final Layout Fix (Version 2) --- */

/* Wir machen die Zelle wieder zum Flex-Container */
.admin-table.table-with-actions td:last-child {
    display: flex;
    gap: 8px; /* Abstand zwischen den Buttons */
}

/* Wir sagen den Buttons, sie sollen den Platz gleichmäßig aufteilen */
.admin-table.table-with-actions td:last-child .btn,
.admin-table.table-with-actions td:last-child .btn-secondary,
.admin-table.table-with-actions td:last-child a.btn-secondary { /* Wichtig, um auch den "Ansehen"-Link zu erwischen */
    flex: 1; /* Das ist der Schlüssel: Jeder Button nimmt gleich viel Platz ein */
    text-align: center;
    padding: 8px 10px; /* Ein bisschen weniger Padding, damit es besser passt */
}

/* --- 64. Danger Button Style --- */

.btn-danger {
    background-color: #a43a2c; /* Ein dunkleres, edleres Rot */
    color: var(--text-color);
}

.btn-danger:hover {
    background-color: #e74c3c; /* Helleres Rot beim Hovern */
    color: white;
}


/* --- 65. Admin User Control Center Styles --- */

.admin-table-link {
    color: var(--text-color);
    font-weight: 700;
    text-decoration: none;
}
.admin-table-link:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

.user-detail-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

.user-detail-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--border-color);
}

.user-detail-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.user-detail-tabs .btn-secondary {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: none;
    margin-bottom: -1px;
}

.user-detail-tabs .btn-secondary.active {
    background-color: var(--surface-color);
    border-color: var(--border-color);
    border-bottom: 1px solid var(--surface-color);
    color: var(--primary-color);
}

/* --- 66. Admin Dashboard Filter Buttons --- */

.admin-dashboard-filters {
    display: flex;
    gap: 8px;
    align-items: center;
}

.admin-dashboard-filters .btn-secondary,
.admin-dashboard-filters .date-range-picker {
    padding: 6px 14px;
    font-size: 0.9em;
}

.admin-dashboard-filters .date-range-picker {
    cursor: pointer;
}

.admin-dashboard-filters .btn-secondary,
.admin-dashboard-filters .date-range-picker,
#contact-filter-select {
    padding: 10px 16px; /* Einheitliches Padding */
    font-size: 1em; /* Einheitliche Schriftgröße */
    font-family: var(--font-family); /* Stellt sicher, dass die Schriftart passt */
    font-weight: 700;
    color: var(--text-color);
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    -webkit-appearance: none; /* Entfernt das Standard-Pfeil-Icon (Chrome/Safari) */
    -moz-appearance: none;    /* Entfernt das Standard-Pfeil-Icon (Firefox) */
    appearance: none;
    /* Hintergrundbild für unseren eigenen Pfeil */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0a0a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1em;
    padding-right: 2.5rem; /* Mehr Platz rechts für den Pfeil */
}

#contact-filter-select:hover {
    border-color: var(--primary-color);
}



/* --- 67. Dashboard Balance Button Styles --- */


.btn-balance {
    /* Die position, top und right Anweisungen wurden entfernt */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background-color: var(--surface-color);
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    border-radius: var(--border-radius);
    font-size: 1em;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-balance:hover {
    background-color: #333;
    transform: scale(1.05);
}

/* Diese Klasse wird per JS hinzugefügt, wenn das Guthaben niedrig ist */
.btn-balance.low-balance {
    animation: pulse 2s infinite;
    background-color: var(--primary-color);
    color: var(--surface-color);
}

/* --- 67. Global Announcement Popup Styles --- */

.announcement-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000; /* Muss über allem anderen liegen */
    backdrop-filter: blur(8px);
    animation: fadeIn 0.4s ease-out;
}

/* KORREKTUR: Wir zielen jetzt auf .modal-content INNERHALB unseres speziellen Overlays */
.announcement-popup-overlay .modal-content {
    max-width: 550px;
    width: 90%;
    text-align: center;
}

/* Die .card Regel bleibt, ist aber jetzt spezifischer */
.announcement-popup-overlay .modal-content .card {
    padding: 0; /* Padding wird intern verwaltet */
}

.announcement-popup-image {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.announcement-popup-body {
    padding: 30px;
}

/* --- 68. Rating Form & Display Styles --- */

.rating-form-container {
    border-top: 1px solid var(--border-color);
    margin-top: 20px;
    padding-top: 20px;
}

.star-rating {
    display: flex;
    flex-direction: row-reverse; /* Wichtig für den Hover-Effekt */
    justify-content: center;
    font-size: 2.5em;
    margin-bottom: 15px;
}

.star-rating input {
    display: none;
}

.star-rating label {
    color: #444;
    cursor: pointer;
    transition: color 0.2s;
}

/* Der Hover-Effekt: Alle Sterne 'links' vom gehoverten werden golden */
.star-rating:not(:hover) input:checked ~ label,
.star-rating:hover input:hover ~ label {
    color: var(--primary-color);
}

.star-rating input:checked + label:hover,
.star-rating input:checked ~ label:hover,
.star-rating label:hover ~ input:checked ~ label,
.star-rating input:checked ~ label:hover ~ label {
    color: var(--primary-color-hover);
}

.job-ratings-display .comment {
    align-items: flex-start;
}
.job-ratings-display .comment-body {
    width: 100%;
}

.rating-form-container {
    border-top: 1px solid var(--border-color);
    margin-top: 20px;
    padding-top: 20px;
}

.star-rating {
    display: flex;
    flex-direction: row-reverse; /* Wichtig für den Hover-Effekt */
    justify-content: center;
    font-size: 2.5em;
    margin-bottom: 15px;
}

.star-rating input {
    display: none;
}

.star-rating label {
    color: #444;
    cursor: pointer;
    transition: color 0.2s;
}

.star-rating:not(:hover) input:checked ~ label,
.star-rating:hover input:hover ~ label {
    color: var(--primary-color);
}

.star-rating input:checked + label:hover,
.star-rating input:checked ~ label:hover,
.star-rating label:hover ~ input:checked ~ label,
.star-rating input:checked ~ label:hover ~ label {
    color: var(--primary-color-hover);
}

.job-ratings-display .comment {
    align-items: flex-start;
}
.job-ratings-display .comment-body {
    width: 100%;
}

/* KORREKTUR: Wir stellen sicher, dass diese Regeln nur im Modal gelten */
.modal-body .rating-summary {
    text-align: left;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-color);
}

.modal-body .rating-summary-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

.modal-body .average-rating-stars {
    font-size: 1.5em;
    color: var(--primary-color);
    letter-spacing: 3px;
}

.modal-body .average-rating-text {
    font-size: 1.5em;
    font-weight: 700;
}

.modal-body .rating-total-count {
    color: var(--text-color-light);
    margin-top: -10px;
}

.modal-body .rating-overall-impression {
    font-weight: 700;
    font-size: 1.1em;
    margin-top: 10px;
}

.modal-body .rating-distribution {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 20px;
}

.modal-body .rating-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9em;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--border-radius);
    transition: background-color 0.2s;
}

.modal-body .rating-bar-row:hover {
    background-color: #333;
}

.modal-body .rating-bar-label {
    width: 70px;
    color: var(--text-color-light);
    flex-shrink: 0;
}

.modal-body .rating-bar-container {
    flex-grow: 1;
    height: 12px;
    background-color: #2a2a2a;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.modal-body .rating-bar-fill {
    height: 100%;
    background-color: var(--primary-color);
    border-radius: 12px;
    transition: width 0.5s ease-out;
}

.modal-body .rating-bar-percentage {
    width: 40px;
    text-align: right;
    color: var(--text-color-light);
    font-weight: 700;
}

.modal-body .rating-stars-display {
    color: var(--primary-color);
    font-size: 1.2em;
    letter-spacing: 2px;
}

/* NEUER CSS-BLOCK für Pro-Avatare (unverändert) */
.pro-avatar {
    border: 3px solid var(--primary-color) !important;
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.5);
}

.profile-avatar, .header-avatar {
    border: 2px solid var(--border-color);
}

.profile-detail-avatar {
    border: 4px solid var(--border-color);
}

/* --- 69. Admin Table Controls --- */

.admin-header-with-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px; /* Abstand zur Suchleiste */
}

.btn-table-settings {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-color-light);
    width: 40px;
    height: 40px;
    border-radius: var(--border-radius);
    font-size: 1.5em;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-table-settings:hover {
    background-color: var(--surface-color);
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.sortable-header {
    cursor: pointer;
    position: relative;
    padding-right: 20px; /* Platz für den Pfeil */
    user-select: none; /* Verhindert das Markieren von Text beim Doppelklick */
}

.sortable-header:hover {
    color: var(--primary-color);
}

/* Platzhalter für die Sortier-Pfeile, die per JS hinzugefügt werden */
.sortable-header .sort-arrow {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8em;
    color: var(--text-color-light);
    opacity: 0; /* Standardmäßig unsichtbar */
    transition: opacity 0.2s;
}

.sortable-header:hover .sort-arrow {
    opacity: 0.5;
}


.sortable-header.sort-active .sort-arrow {
    opacity: 1;
    color: var(--primary-color);
}

/* NEUES STYLING FÜR DAS EINSTELLUNGS-MODAL */
.table-settings-section {
    margin-bottom: 20px;
    text-align: left;
}
.table-settings-section h4 {
    margin-bottom: 10px;
    color: var(--text-color-light);
}
.table-settings-columns-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    min-height: 50px;
}
.column-tag {
    background-color: #333;
    padding: 8px 12px;
    border-radius: var(--border-radius);
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s;
}
.column-tag.available:hover {
    background-color: var(--primary-color);
    color: var(--surface-color);
}
.column-tag.selected {
    background-color: var(--primary-color);
    color: var(--surface-color);
    display: flex;
    align-items: center;
    gap: 8px;
}
.remove-column-btn {
    font-size: 1.2em;
    font-weight: 700;
    opacity: 0.7;
}
.remove-column-btn:hover {
    opacity: 1;
}

/* Wir überschreiben die Animation und Farbe für den Upgrade-Button, WENN er die low-balance Klasse hat */
.btn-upgrade.low-balance {
    animation: pulse-danger 2s infinite;
    background-color: #a43a2c; 
    color: white; 
    border: none; 
}

/* --- 70. Admin Marketing Page Styles --- */

.announcement-image-preview-wrapper {
    position: relative;
    display: inline-block;
    max-width: 200px; /* Kleinere Vorschau */
}

.announcement-image-preview {
    max-width: 100%;
    border-radius: var(--border-radius);
}

.announcement-delete-image-btn {
    position: absolute;
    top: -10px;
    right: -10px;
    background-color: #e74c3c;
    color: white;
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    font-size: 1.2em;
    line-height: 28px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.4);
}


/* --- 71. Pre-Launch-Mode Styles --- */

.pre-launch-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: 10000;
}

#pre-launch-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* HIER IST DIE MAGIE: Das Video wird so groß wie möglich, ohne abgeschnitten zu werden */
    object-fit: contain;
    
    z-index: -1;
}

.pre-launch-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    text-align: center;
    color: var(--text-color);
}

.pre-launch-slogan {
    font-size: 1.5em;
    font-weight: 300;
    color: var(--text-color-light);
}

.pre-launch-content .form-group input {
    text-align: center;
}

/* --- 72. Pre-Launch Sound Button --- */

.sound-toggle-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10001;
    background-color: rgba(30, 30, 30, 0.7);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 1.5em;
    cursor: pointer;
    backdrop-filter: blur(5px);
    transition: all 0.2s ease;
}

.sound-toggle-btn:hover {
    background-color: var(--primary-color);
    color: var(--surface-color);
}

/* --- 73. Admin UI & Number Input Fixes --- */

/* Sorgt dafür, dass die Zahlen in den Tabellen untereinander stehen */
.admin-table td[style*="text-align: right"] {
    line-height: 1.2;
}

/* Verbessert das Aussehen der Pfeile in den Zahleneingabefeldern */
input[type="number"] {
    -moz-appearance: textfield; /* Für Firefox */
    appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.card > .admin-ticket-filters { /* Gilt nur für Filter, die direkt in einer .card sind */
    display: flex; /* Wir wechseln zu Flexbox für mehr Kontrolle */
    gap: 15px;
    align-items: center;
}

#log-type-filter {
    flex-basis: 200px; /* Gibt dem Dropdown eine feste Basis-Breite */
    flex-shrink: 0; /* Verhindert, dass das Dropdown schrumpft */
}

#log-user-search {
    flex-grow: 1; /* Sagt dem Suchfeld, dass es den restlichen Platz einnehmen soll */
}

/* --- 74. Chat Attachment Styles --- */

.message-bubble img {
    max-width: 300px; /* Begrenzt die maximale Breite des Bildes */
    max-height: 250px; /* Begrenzt die maximale Höhe */
    width: auto;       /* Stellt sicher, dass das Seitenverhältnis erhalten bleibt */
    height: auto;      /* Stellt sicher, dass das Seitenverhältnis erhalten bleibt */
    display: block;    /* Verhindert unerwünschte Abstände unter dem Bild */
}

.message-bubble .message-content {
    word-break: break-word;
    overflow-wrap: break-word;
}
/* ==========================================================================
   75. CHAT & ONBOARDING STYLES
   ========================================================================== */

/* --- Chat Delete Mode --- */
.message-bubble { position: relative; }
.delete-message-btn {
    display: none; position: absolute; top: -8px;
    background-color: #e74c3c; color: white; border: none; border-radius: 50%;
    width: 22px; height: 22px; font-size: 1.2em; line-height: 22px; text-align: center;
    cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.message-bubble.sent .delete-message-btn { left: -8px; }
.message-bubble.received .delete-message-btn { right: -8px; }
.chat-messages.delete-mode .message-bubble.sent .delete-message-btn { display: block; }

/* --- Onboarding Tutorial Overlay --- */
.onboarding-overlay {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 1000;
    display: flex; justify-content: center; align-items: center;
}
.onboarding-overlay .modal { z-index: 1001; }


/* ==========================================================================
   76. GLOBALE LAYOUT-ELEMENTE (LOADER, HEADER, FOOTER)
   ========================================================================== */

/* --- App Loader --- */
.app-loader-overlay {
  position: fixed; top: 0; left: 0;
  width: 100vw; height: 100vh;
  background-color: var(--background-color); z-index: 9999;
  display: flex; justify-content: center; align-items: center;
  transition: opacity 0.4s ease;
  opacity: 1;
}

/* --- Pull-to-Refresh Styles --- */
.refresh-spinner {
    width: 30px;
    height: 30px;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    transform: scale(0.5);
    opacity: 0;
    transition: transform 0.1s linear, opacity 0.1s linear;
}

#pull-to-refresh-indicator.pulling .refresh-spinner,
#pull-to-refresh-indicator.refreshing .refresh-spinner {
    opacity: 1;
    transform: scale(1);
}

#pull-to-refresh-indicator.refreshing .refresh-spinner {
    animation: spin 0.8s linear infinite;
}
.app-loader-overlay.hidden { opacity: 0; pointer-events: none; }

/* --- Allgemeines Styling für Header-Links --- */
.nav-links-desktop a, .header-icon-link {
    position: relative; /* Ankerpunkt für Badges */
    display: flex; flex-direction: column; align-items: center;
    gap: 4px; padding: 4px 8px;
    color: var(--primary-color); 
    font-weight: 700; font-size: 0.9em;
    text-decoration: none; transition: color 0.2s ease;
}
.nav-links-desktop a:hover, .header-icon-link:hover { color: var(--primary-color-hover); }
.nav-links-desktop a i, .header-icon-link i { font-size: 1.8em; }
.nav-links-profile { display: flex; align-items: center; gap: 24px; }

/* --- Header Profil-Dropdown (Desktop) --- */
.profile-menu-container { position: relative; }
.header-avatar-link { background: none; border: none; padding: 0; cursor: pointer; }
.profile-dropdown {
    position: absolute; top: calc(100% + 15px); right: 0;
    background-color: var(--surface-color); border-radius: var(--border-radius);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    width: 220px; z-index: 100;
    opacity: 0; visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
}
.profile-dropdown.active { opacity: 1; visibility: visible; transform: translateY(0); }
.profile-dropdown a { display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: var(--text-color); text-decoration: none; }
.profile-dropdown a:hover { background-color: #333; }

/* --- Benachrichtigungs-Badges (Allgemein) --- */
.notification-badge-small {
    position: absolute; top: -5px; right: 0px;
    background-color: #e74c3c; color: white; border-radius: 50%;
    width: 16px; height: 16px; font-size: 10px; font-weight: bold;
    display: flex; justify-content: center; align-items: center;
    border: 2px solid var(--surface-color);
}


/* ==========================================================================
   77. MOBILE-SPEZIFISCHE LAYOUTS & RESPONSIVE LOGIK
   ========================================================================== */

/* --- Mobile Bottom Navigation (Frontend) --- */
.mobile-bottom-nav { 
    display: none; /* Wird nur auf Mobilgeräten per Media Query auf flex gesetzt */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--surface-color);
    box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
    z-index: 1000;
    /* FIX: Erzeugt Platz für Samsung-Buttons, falls aktiv. Wenn nicht, ist es 0. */
    padding-bottom: env(safe-area-inset-bottom); 
    /* Wir nutzen height: auto, damit das Padding die Leiste nach oben drückt */
    height: auto; 
    min-height: 60px;
}

/* Die .nav-hidden Klasse wurde entfernt, da die Leiste immer sichtbar bleiben soll */

.mobile-bottom-nav a, .mobile-bottom-nav button {
    position: relative; /* Ankerpunkt für Badges */
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    /* Wir entfernen das Padding unten, da der Container das jetzt regelt */
    padding: 10px 0 0 0; 
    gap: 4px;
    color: var(--text-color-light); text-decoration: none;
    font-size: 0.8em; font-weight: 700;
    background: none; border: none; cursor: pointer;
    font-family: var(--font-family);
}
.mobile-bottom-nav a:hover, .mobile-bottom-nav button:hover { color: var(--primary-color); }
.mobile-bottom-nav i { font-size: 1.6em; }

/* --- Standardzustand (Desktop): Mobile Elemente sind versteckt --- */
.header-activities-mobile { display: none; }

/* --- Haupt-Breakpoint für mobile Ansicht --- */
@media (max-width: 850px) {

    /* 1. Elemente, die auf Mobilgeräten KOMPLETT VERSCHWINDEN */
    .nav-links-desktop,
    .profile-dropdown,
    .create-new-container,
    .header-icon-link .header-icon-text,
    .header-icon-link[href="#inbox"] {
        display: none;
    }

    /* 2. Elemente, die NUR auf Mobilgeräten sichtbar sind */
    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: var(--surface-color);
        box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
        z-index: 1000;
    }

    /* 3. Layout-Anpassungen für Mobile */

    /* Hebt den Support-Button ÜBER die untere Navigationsleiste */
    .floating-support-btn {
        bottom: 90px; /* ca. 70px Nav-Leiste + 20px Abstand */
    }

    /* Macht den Footer-Inhalt wieder sichtbar und stylt ihn für Handys */
    #main-footer .container {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    /* KORREKTUR: Fügt den Abstand AM FOOTER hinzu, nicht am Inhalt */
    #main-footer {
        /* Dieser Abstand ist so hoch wie die Navigationsleiste + Puffer */
        margin-bottom: 60px;
    }


    /* 4. Badge Positionierung (bleibt gleich) */
    .header-icon-link .notification-badge-small {
        top: 0;
        right: 4px;
    }
    .mobile-bottom-nav .notification-badge-small {
        top: 5px;
        right: 20px;
        width: 18px;
        height: 18px;
        font-size: 11px;
    }
}


/* ==========================================================================
   78. ADMIN PANEL RESPONSIVE LAYOUT
   ========================================================================== */

/* === 1. Media Query für Tablets & Handys (ab 1024px) === */
@media (max-width: 1024px) {
    /* Wir ändern das Grid-Layout auf ein einfaches Block-Layout */
     .admin-panel {
        display: block;
    }

    /* Die Sidebar wird komplett versteckt */
    .admin-sidebar {
        display: none !important;
    }

    /* WICHTIG: Wir erzwingen, dass die untere Navigation in diesem Bereich sichtbar ist */
    .mobile-bottom-nav {
        display: flex !important;
    }

    /* Der Inhaltsbereich nimmt die volle Breite ein und bekommt sein eigenes Padding */
    .admin-content {
        padding: 20px;
        /* HIER IST DIE WICHTIGE ÄNDERUNG: */
        padding-bottom: 80px; /* Fügt unten 80px Platz für die Navigationsleiste hinzu */
    }

    /* Das mobile Logo bleibt sichtbar */
    .admin-mobile-logo {
        display: block;
        text-align: center;
        margin-bottom: 30px;
        font-size: 2em;
        color: var(--text-color);
    }
    .admin-mobile-logo span {
        color: var(--primary-color);
    }
}
/* --- 79. Admin Panel Mobile Menu & Badge Fix --- */

/* Hover-Effekt für die untere Navigationsleiste */
.mobile-bottom-nav a:hover, .mobile-bottom-nav button:hover {
    color: var(--primary-color);
}

/* Wir machen die Links zu Positionierungs-Ankern für die Badges */
.mobile-bottom-nav a, .mobile-bottom-nav button {
    position: relative;
}

/* KORREKTUR: Positionierung für das Support-Badge */
.mobile-bottom-nav .dashboard-badge {
    position: absolute;
    top: 5px;
    right: 25px; /* Du kannst diesen Wert anpassen */
    margin-left: 0; /* Wichtig, um den alten Abstand zu entfernen */
    min-width: 20px;
    height: 20px;
    font-size: 0.8em;
    line-height: 20px;
}

/* Das "Mehr"-Menü als Vollbild-Overlay */
.mobile-more-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(18, 18, 18, 0.95); /* Dunkler Hintergrund mit Transparenz */
    backdrop-filter: blur(10px);
    z-index: 2000; /* Muss über der mobilen Navigationsleiste liegen */
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    /* Standardmäßig unsichtbar und außerhalb des Bildschirms */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease-in-out;
}

.mobile-more-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.close-more-menu-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 2.5em;
    cursor: pointer;
}

.mobile-more-menu nav {
    display: flex;
    flex-direction: column;
    gap: 30px; /* Abstand zwischen den Links */
    text-align: center;
}

.mobile-more-menu nav a {
    color: var(--text-color);
    font-size: 1.8em;
    font-weight: 700;
    text-decoration: none;
}

.mobile-more-menu nav a:hover {
    color: var(--primary-color);
}

/* ==========================================================================
   80. ADMIN PANEL RESPONSIVE OPTIMIZATIONS
   ========================================================================== */
/* Desktop-Ansicht (größer als 768px): Tabelle wird horizontal scrollbar */
@media (min-width: 769px) {
    /* Wir packen die Tabelle in einen Container, der das Scrollen ermöglicht */
    .table-responsive-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* Flüssiges Scrollen auf Touch-Geräten */
    }

    .admin-table {
        width: 100%;
        min-width: 900px; /* Gib der Tabelle eine Mindestbreite, um das Scrollen zu erzwingen */
        border-collapse: collapse;
    }
    
    .admin-table th,
    .admin-table td {
        padding: 12px 15px;
        border-bottom: 1px solid var(--border-color); 
        text-align: left;
        white-space: nowrap; /* Verhindert, dass der Inhalt umbricht */
    }

    .admin-table thead tr {
        border-bottom: 2px solid var(--border-color);
    }
    
    .admin-table tbody tr:hover {
        background-color: #2a2a2a;
    }
}


/* Mobile Ansicht (kleiner oder gleich 768px): Tabelle wird gestapelt */
@media (max-width: 768px) {
    .admin-table {
        border: none;
    }

    .admin-table thead {
        display: none;
    }

    .table-responsive-wrapper {
        overflow-x: visible; /* Deaktiviert das horizontale Scrollen auf dem Handy */
    }

    /* NEU: Wir sagen der Tabelle, dass sie sich wie ein normaler Block verhalten soll */
    /* NEU: Wir sagen der Tabelle, dass sie sich wie ein normaler Block verhalten soll */
    .admin-table, 
    .admin-table tbody {
        display: block !important;
        width: 100% !important; /* ZWINGT die Tabelle auf volle Breite */
        min-width: 100% !important;
        box-sizing: border-box;
    }

    .admin-table tr {
        display: block !important;
        width: 100% !important; /* ZWINGT die Karte auf volle Breite */
        box-sizing: border-box;
        margin-bottom: 20px;
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius);
        padding: 15px;
        background-color: var(--surface-color);
    }

    .admin-table tr:last-of-type {
        margin-bottom: 0;
    }

     .admin-table td {
        display: flex !important;
        /* Schiebt Label nach links und Inhalt nach rechts */
        justify-content: space-between !important; 
        align-items: center !important;
        
        width: 100% !important; /* ZWINGT die Zelle auf volle Breite */
        box-sizing: border-box;
        
        text-align: right; 
        font-size: 1em;
        border-bottom: 1px solid #2a2a2a;
        padding: 12px 0;
        position: relative;
        line-height: 1.4;
        overflow-wrap: break-word; 
        white-space: normal; 
    }

    .admin-table td::before {
        content: attr(data-label);
        font-weight: 700;
        color: var(--text-color-light);
        text-align: left;
        
        flex-shrink: 0; 
        margin-right: 15px;
    }

    .admin-table td:last-child {
        border-bottom: none;
    }

    .admin-table.table-with-actions td:last-child {
        padding-left: 10px;
        text-align: center;
        display: block;
    }
    .admin-table.table-with-actions td:last-child::before {
        display: none;
    }
}

/* ==========================================================================
   81. ADMIN PANEL ADVANCED RESPONSIVE FIXES
   ========================================================================== */

@media (max-width: 768px) {

    /* --- 1. Scrollbare Tab-Navigation --- */
    .admin-tabs-wrapper {
        overflow-x: auto; /* Horizontales Scrollen aktivieren */
        -webkit-overflow-scrolling: touch; /* Flüssiges Scrollen auf iOS */
        padding-bottom: 15px; /* Platz für die Scrollbar, damit sie nicht überlappt */
        margin-left: -15px; /* Wrapper an den Bildschirmrand rücken */
        margin-right: -15px;
        padding-left: 15px;
    }
    
    /* Verhindert, dass die Tabs umbrechen */
    .admin-tabs-wrapper .user-detail-tabs {
        display: flex;
        flex-wrap: nowrap;
        margin-bottom: 0;
        padding-bottom: 5px; /* Kleiner Abstand zur Scrollbar */
    }
    
    /* Sorgt dafür, dass die Buttons nicht schrumpfen */
    .admin-tabs-wrapper .btn-secondary {
        flex-shrink: 0;
        white-space: nowrap;
    }


    /* --- 2. Fix für User Details > "Abo & Finanzen" Tab --- */
    .user-detail-content .admin-kpi-grid {
        grid-template-columns: 1fr; /* Kacheln untereinander anordnen */
    }


    /* --- 3. Fix für Finanz-Reporting Seite --- */
    
    /* Header (Titel & Filter) untereinander anordnen */
    .finance-overview-header,
    div[style*="display: flex; justify-content: flex-end; align-items: center;"] {
        flex-direction: column;
        align-items: stretch !important; /* Wichtig, um inline-style zu überschreiben */
        gap: 15px;
    }
    
    /* Die zwei Spalten in "Nutzer-Analyse" und "Deal-Analyse" untereinander stapeln */
    div[style*="grid-template-columns: 1fr 1fr;"] {
        display: block; /* Einfachste Methode, um das Grid aufzulösen */
    }
     div[style*="grid-template-columns: 1fr 1fr;"] .card:last-child {
        margin-top: 20px;
    }
    
    /* Die Tabellen im Finanzbereich scrollbar machen */
    .finance-tab-content .card {
        overflow-x: auto; /* Scrollen für die Tabellen im Inneren aktivieren */
    }
    

    /* --- 4. Fix für Dashboard Layout --- */

    /* Container mit Titel und Filter-Buttons anpassen */
    .card > div[style*="display: flex; justify-content: space-between;"] {
        flex-direction: column;
        align-items: flex-start; /* Titel linksbündig */
        gap: 20px;
    }
    
    /* Stellt sicher, dass die Filter-Leiste im Dashboard die volle Breite nutzt */
    .card .admin-dashboard-filters {
        width: 100%;
    }
    
    /* Layout mit 2 Spalten (z.B. Engagement-Chart) untereinander anordnen */
    div[style*="display: grid; grid-template-columns: 1fr 1fr;"] {
        display: block;
    }
    div[style*="display: grid; grid-template-columns: 1fr 1fr;"] > .card:last-child {
        margin-top: 20px;
    }

    /* Layout mit großer Chart (Nutzerwachstum/Aktivität) untereinander anordnen */
    div[style*="display: grid; grid-template-columns: 280px 1fr;"] {
        display: block;
    }
     div[style*="display: grid; grid-template-columns: 280px 1fr;"] > .card {
        margin-bottom: 20px;
    }
}

/* ==========================================================================
   82. FINALE RESPONSIVE GRID FIXES (Finance & Dashboard)
   ========================================================================== */

@media (max-width: 768px) {

    /* 
     *  Dies ist die wichtigste Regel. Sie zielt auf alle deine 2-spaltigen Layouts,
     *  die du direkt im HTML mit `style="display: grid..."` erstellt hast.
     *  Das `!important` ist hier ausnahmsweise nötig und korrekt, um den
     *  direkten Style im HTML für die mobile Ansicht zu überschreiben.
    */
    div[style*="grid-template-columns: 1fr 1fr"],
    div[style*="grid-template-columns: 2fr 1fr"],
    div[style*="grid-template-columns: 280px 1fr"] {
        display: block !important;
    }

    /* 
     *  Diese Regel fügt automatisch einen schönen Abstand (20px) zwischen
     *  den Elementen hinzu, die jetzt durch die obere Regel untereinander gestapelt werden.
     *  Sie gilt für jede "Karte" (.card), die nicht die erste in einem solchen Container ist.
    */
    div[style*="display: block !important"] > .card:not(:first-child) {
        margin-top: 20px;
    }

    /*
     *  Ein spezieller Fix für das Layout im Finanz-Dashboard, um den Header
     *  mit den Filter-Buttons korrekt über den Kacheln zu positionieren.
    */
    #finance-tab-content > div:first-child {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
}

/* ==========================================================================
   83. ADMIN PANEL MOBILE "MEHR" BUTTON ANIMATION
   ========================================================================== */

.mobile-bottom-nav.menu-is-open {
    z-index: 2001; /* Höher als der z-index vom Menü (2000) */
}

#open-more-menu-btn .hamburger-icon {
    width: 24px;
    height: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#open-more-menu-btn .hamburger-icon span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--text-color-light);
    border-radius: 3px;
    transition: all 0.3s ease-in-out;
}

/* Die Magie: Das passiert, wenn der Button die Klasse .active hat */

#open-more-menu-btn.active .hamburger-icon span {
    background-color: var(--text-color); /* Striche werden heller beim X */
}

#open-more-menu-btn.active .hamburger-icon span:nth-child(1) {
    transform: translateY(7.5px) rotate(45deg);
}

#open-more-menu-btn.active .hamburger-icon span:nth-child(2) {
    opacity: 0;
}

#open-more-menu-btn.active .hamburger-icon span:nth-child(3) {
    transform: translateY(-7.5px) rotate(-45deg);
}

#open-more-menu-btn.active > span:last-child {
    /* Versteckt das Wort "Mehr", wenn das Menü offen ist */
    opacity: 0;
    font-size: 0; /* Verhindert Layout-Sprünge */
}

/* ==========================================================================
   84. Activities View Layout Fix 
   ========================================================================== */

   .notification-text {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* ==========================================================================
   85. FINALES, UNIVERSELLES STYLING FÜR DAS PASSWORT-AUGE (V4 - Final)
   ========================================================================== */

/* 1. Basis für alle Passwort-Felder */
.password-group {
    position: relative;
}

/* 2. Universelle Regel für das Auge */
.toggle-password {
    position: absolute;
    right: 15px;
    cursor: pointer;
    font-size: 1.2em;
    z-index: 10;
    
    /* NEUE ZENTRIERUNGSMETHODE */
    bottom: 0;
    top: 0;
    margin: auto 0;
    
    /* Wichtig, damit das Auge eine feste Höhe für die Zentrierung hat */
    height: 1em; 
}

/* 3. Farbanpassung für das dunkle normale Login */
.container .toggle-password {
    color: var(--text-color-light);
}

/* 4. Farbanpassung für das helle Pre-Launch-Login (altes Design) */
.pre-launch-content .card .toggle-password {
    color: #333;
}

/* 5. Farbanpassung für das dunkle, durchsichtige Pre-Launch-Login (NEUES DESIGN) */
.pre-launch-content .form-group .toggle-password {
    color: var(--text-color);
}

/* ==========================================================================
   86. ADMIN MODAL FIXES (SCROLLBAR & GRÖSSE)
   ========================================================================== */

/* 
 * Diese Regeln gelten speziell für die Modals, die im Admin-Bereich
 * über die showModal() Funktion aufgerufen werden.
*/

/* 1. Grundlegende Größenanpassung des Modals */
.modal-content {
    /* Verhindert, dass das Modal auf großen Bildschirmen zu breit wird. 
       500px ist ein guter Wert für Formulare. */
    max-width: 500px;
    
    /* Auf sehr kleinen Bildschirmen nimmt das Modal 90% der Breite ein. */
    width: 90%;
}

/* 2. Scrollbar für lange Formulare IM Modal (das ist der wichtigste Teil) */
.modal-content form {
    /* Das Formular darf maximal 70% der sichtbaren Bildschirmhöhe (vh) einnehmen. */
    max-height: 70vh;
    
    /* Zeigt eine vertikale Scrollbar an, ABER NUR, wenn der Inhalt länger ist. */
    overflow-y: auto;   
    
    /* Wir fügen rechts etwas Platz hinzu, damit die Scrollbar den Inhalt nicht überdeckt. */
    padding-right: 15px;
}

/* Optional: Verbessertes Styling für die Scrollbar im Dark Mode (funktioniert in Chrome/Safari) */
.modal-content form::-webkit-scrollbar {
  width: 8px;
}
.modal-content form::-webkit-scrollbar-track {
  background: var(--surface-color);
}
.modal-content form::-webkit-scrollbar-thumb {
  background-color: var(--primary-color);
  border-radius: 20px;
  border: 2px solid var(--surface-color);
}

/* ==========================================================================
   87. Admin Lade-Spinner
   ========================================================================== */
.admin-loader {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}
.admin-loader::after {
  content: '';
  width: 50px;
  height: 50px;
  border: 5px solid var(--border-color);
  border-top-color: var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ==========================================================================
   88. ADMIN CONTENT TABLE MOBILE ACTION BUTTON FIX (V2)
   ========================================================================== */

@media (max-width: 768px) {
    /* Wir zielen auf die LETZTE ZELLE (td:last-child) in einer Zeile
       in einer Tabelle mit der Klasse table-with-actions */
    .admin-table.table-with-actions tr td:last-child {
        display: grid; /* Wir benutzen GRID statt Flexbox für mehr Kontrolle */
        grid-template-columns: 1fr 1fr; /* Zwei Spalten mit gleicher Breite */
        gap: 10px;     /* Abstand zwischen den Buttons */
        border-bottom: none;
        padding-top: 15px; /* Etwas mehr Abstand nach oben */
        padding-bottom: 15px;
    }

    /* Wir entfernen das störende "Aktionen:"-Label für diese Zelle */
    .admin-table.table-with-actions tr td:last-child::before {
        display: none;
    }

    /* Wir stylen alle Buttons/Links in dieser Zelle */
    .admin-table.table-with-actions tr td:last-child > * {
        width: 100%; /* Sorgen dafür, dass die Buttons die volle Spaltenbreite nutzen */
        text-align: center;
        padding: 10px 5px; /* Vertikales Padding für Höhe, wenig horizontales */
        font-size: 0.9em; /* Etwas kleinere Schrift auf mobilen Buttons */
    }
}

/* ==========================================================================
   89. ADMIN Finanzen
   ========================================================================== */
.kpi-clickable {
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
.kpi-clickable:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
}
.kpi-clickable.active {
    border: 2px solid var(--primary-color);
}

/* ==========================================================================
     90. Theme Switcher Card Style 
   ========================================================================== */
.theme-switcher-card-bg {
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    background-color: transparent; 
}

.theme-switcher-card-bg h3,
.theme-switcher-card-bg p {
    position: relative;
    z-index: 2;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

/* ==========================================================================
     91. ZERTIFIKATS-PRÜFUNG BILDVORSCHAU
   ========================================================================== */

   .certificate-preview-image {
    max-width: 100%;
    max-height: 60vh; /* Begrenzt die Höhe auf 60% der Bildschirmhöhe */
    display: block; /* Verhindert seltsame Abstände */
    margin: 0 auto; /* Zentriert das Bild horizontal */
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    object-fit: contain; /* Stellt sicher, dass das ganze Bild sichtbar ist, ohne es zu verzerren */
}

/* 92. BILD-UPLOAD GRID FÜR JOBS === */
.image-upload-main-slot {
    aspect-ratio: 1 / 1;
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
}

.image-upload-main-slot.placeholder {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-upload-main-slot.placeholder:hover {
    border-color: var(--primary-color);
}

/* Container für die kleinen Thumbnails */
.image-upload-thumbnails-container {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}

/* Einzelner Thumbnail-Slot (klein) */
.image-upload-thumb-slot {
    width: 80px;
    height: 80px;
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
    cursor: pointer;
    flex-shrink: 0; /* Verhindert, dass die Boxen gequetscht werden */
}

.image-upload-thumb-slot.placeholder,
.image-upload-thumb-slot.buy-slot {
    background-color: #2a2a2a;
    border: 2px dashed var(--border-color);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: border-color 0.2s, background-color 0.2s;
}

.image-upload-thumb-slot.placeholder:hover,
.image-upload-thumb-slot.buy-slot:hover {
    border-color: var(--primary-color);
    background-color: #333;
}

/* Allgemeines für Bilder und Löschen-Button */
.image-upload-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.delete-preview-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 1em;
    line-height: 24px;
    text-align: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 2;
}

.image-upload-main-slot:hover .delete-preview-btn,
.image-upload-thumb-slot:hover .delete-preview-btn {
    opacity: 1;
}

/* Inhalt der Platzhalter (Icons und Text) */
.placeholder-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--text-color-light);
    text-align: center;
}

.main-placeholder-content img {
    width: 150px; /* Größe deines Joblinx-Platzhalterbildes */
    height: auto;
    margin-bottom: 10px;
}

.placeholder-icon {
    font-size: 1.8em;
}

.placeholder-text {
    font-size: 0.8em;
    line-height: 1.2;
}

.buy-slot .placeholder-icon {
    font-size: 1.5em;
}

/* 93. Macro === */


.macro-group-header.collapsible {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0; /* Etwas mehr Platz */
    border-bottom: 1px solid var(--border-color);
    margin-top: 20px;
}

.macro-group-header.collapsible:hover {
    color: var(--primary-color);
}

.collapse-icon {
    font-size: 0.8em;
    transition: transform 0.2s ease;
}

.macro-group-content {
    /* Sanftes Ein- und Ausblenden (optional, aber schöner) */
    overflow: hidden;
    /* Du kannst hier Animationen hinzufügen, wenn du möchtest */
}

/* Anpassung für die Tabelle innerhalb der aufklappbaren Bereiche */
.macro-group-content .simple-table {
    margin-top: 15px;
}

/* Entfernt den doppelten Rand, da der Header schon einen hat */
.macro-group-container h4 {
    border-bottom: none; 
    margin-top: 0;
}
.macro-group-container {
    border-bottom: 1px solid var(--border-color);
}
.macro-group-container:last-child {
    border-bottom: none;
}

/* === 94. Dashboard Visitor Preview === */

.dashboard-visitor-preview-list {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dashboard-visitor-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dashboard-visitor-avatar {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.dashboard-visitor-info {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.dashboard-visitor-info strong {
    font-size: 0.9em;
    font-weight: 700;
}

.dashboard-visitor-info small {
    font-size: 0.8em;
    color: var(--text-color-light);
}

/* === 95. Job/Profile List Refactor & Suggestions (V6 - Final Hover & Mobile Fix) === */

.job-list-header {
    text-align: center;
    padding-top: calc(var(--spacing-unit) * 6);
    padding-bottom: 0;
}

/* -- Steuerungselemente (Plus & Filter) -- */
.job-list-controls {
    position: relative;
    margin-top: 40px;
    margin-bottom: 20px;
}
.job-list-controls::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--border-color);
    z-index: 0;
}
.job-list-controls .btn-create-plus {
    position: relative;
    margin: 0 auto;
    display: flex;
    z-index: 1;
    /* KORREKTUR V5: Hintergrundfarbe hier entfernen, damit der Hover-Effekt funktioniert */
    /* background-color: var(--background-color); */
}
/* KORREKTUR V5: Wir überschreiben den Hintergrund für den Hover-Effekt spezifisch hier */
.job-list-controls .btn-create-plus:hover {
    background-color: var(--primary-color);
}

.job-list-controls .filter-btn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

/* -- Suggestions Carousel -- (bleibt unverändert) */
.suggestions-section {
    margin-top: 40px;
    text-align: left;
    position: relative;
}
.suggestions-section h2 {
    margin-bottom: 15px;
}

.suggestion-carousel {
    overflow: hidden;
    width: 100%;
    height: 220px;
    padding: 10px 0;
}

.suggestion-card { /* WICHTIG: Die Regel gilt jetzt nicht mehr für .suggestion-card-more */
    width: 280px; /* Eine feste, zuverlässige Breite für alle Karten */
    height: 200px;
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
    background-color: var(--surface-color);
    box-shadow: var(--box-shadow);
    flex-shrink: 0;
}
.suggestion-card-more {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--border-color);
    transition: all 0.2s ease;
}

.suggestion-card-more:hover {
    border-color: var(--primary-color);
    background-color: var(--surface-color);
}

.more-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    text-align: center;
    color: var(--text-color-light);
    height: 100%;
}

.more-link h3 {
    margin: 0;
    font-size: 1.8em;
    color: var(--text-color);
}

.more-link span {
    font-size: 0.9em;
}
.suggestion-link { display: block; width: 100%; height: 100%; text-decoration: none; color: var(--text-color); }
.suggestion-image {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Bild wird komplett angezeigt, nicht abgeschnitten */
    object-position: center 10%; /* FIX: Schiebt das Logo noch deutlich weiter nach oben! */
    /* Keine feste Hintergrundfarbe und kein Padding mehr -> Passt sich perfekt dem Dark/Light-Mode an! */
    transition: transform 0.3s ease;
}

.suggestion-card:hover .suggestion-image { transform: scale(1.05); }
.suggestion-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0,0,0,0.8) 20%, rgba(0,0,0,0) 60%); }
/* FIX: Padding unten auf 5px minimiert, drückt den Text ganz an den Rand */
.suggestion-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 15px 15px 5px 15px; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }

.suggestion-reason {
    /* FINALE KORREKTUR: Positioniert das Label absolut oben links auf der Karte */
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 5; /* Stellt sicher, dass es über dem Bild und dem Overlay ist */

    display: inline-block;
    background-color: var(--primary-color);
    color: var(--surface-color);
    font-size: 0.7em;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 8px;
}

/* FIX: Titel auf maximal 2 Zeilen begrenzen, damit er nicht endlos nach oben wächst! */
.suggestion-title { 
    margin: 0; 
    font-size: 1.1em; 
    line-height: 1.3; 
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Kürzt nach 2 Zeilen mit ... ab (für Browser) */
    line-clamp: 2; /* Standard-Befehl (beruhigt den Code-Editor) */
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* FIX: Abstand nach oben minimal verringert und Zeilenhöhe kompakter gemacht, um toten Raum unter dem Text zu killen */
.suggestion-location { margin: 2px 0 0; font-size: 0.9em; color: var(--text-color-light); line-height: 1.2; }
.hide-suggestion-btn { position: absolute; top: 8px; right: 8px; z-index: 10; background-color: rgba(0,0,0,0.5); color: white; border: none; width: 24px; height: 24px; border-radius: 50%; font-size: 1.1em; cursor: pointer; line-height: 24px; text-align: center; }

.swiper-button-next, .swiper-button-prev {
    color: var(--primary-color);
    width: 40px;
    height: 40px;
    background-color: rgba(30, 30, 30, 0.8);
    border-radius: 50%;
    backdrop-filter: blur(4px);
    display: none;
    top: 50%;
    transform: translateY(-50%);
}
.swiper-button-next { right: -10px; }
.swiper-button-prev { left: -10px; }
.swiper-button-next::after, .swiper-button-prev::after { font-size: 18px; font-weight: 900; }

/* -- Trenntext zwischen Vorschlägen und Job-Liste -- */
.job-list-separator {
    text-align: center;
    color: var(--text-color-light);
    margin: 40px 0 20px 0;
}

.job-list-footer {
    margin-top: 40px;
    padding-bottom: 80px;
}

/* FIX: Pagination rechtsbündig auf Desktop */
.pagination-container {
    justify-content: flex-end !important;
}

/* Auf Mobile zentrieren wir es wieder für besseres Scrolling */
@media (max-width: 768px) {
    .pagination-container {
        justify-content: flex-start !important; /* Startet links, damit man scrollen kann */
    }
}

/* -- Responsive Regeln -- */
@media (min-width: 768px) {
    .swiper-button-next, .swiper-button-prev {
        display: flex;
    }
}
@media (max-width: 850px) {
    .job-list-controls .btn-create-plus {
        display: none;
    }
    .job-list-controls::before {
        display: none;
    }
    .job-list-controls {
        justify-content: center;
        margin-top: 20px;
        margin-bottom: 0;
    }
    .job-list-controls .filter-btn {
        position: static;
        transform: none;
        /* KORREKTUR V6: Wir entfernen den transparenten Hintergrund wieder.
           Da die Linie weg ist, wird er nicht mehr gebraucht und der Button
           kann seinen normalen .btn-Stil (golden) annehmen. */
        /* background-color: transparent; */
    }
}
/* === 96. Header Logo Icon === */

.logo a {
    display: flex; /* Richtet Icon und Text nebeneinander aus */
    align-items: center; /* Zentriert beides vertikal */
    gap: 8px; /* Ein kleiner Abstand zwischen Icon und Text */
}

.logo-icon {
    height: 1em; /* Passt die Höhe des Icons an die Schriftgröße an */
    width: auto;
}

/* === 97 ADMIN ACCORDION === */
.admin-accordion {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Abstand zwischen den einklappbaren Bereichen */
}

.accordion-item {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden; /* Stellt sicher, dass die Ecken rund bleiben */
}

.accordion-header {
    width: 100%;
    background-color: var(--surface-color);
    padding: 15px 20px;
    border: none;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-color);
}

.accordion-header:hover {
    background-color: #2a2a2a;
}

.accordion-header h2 {
    margin: 0;
    font-size: 1.2em;
}

.accordion-header .collapse-icon {
    font-size: 1.2em;
    transition: transform 0.2s ease;
}



.accordion-content {
    padding: 20px;
    background-color: var(--background-color);
}
/* === 98. TAGIFY DESIGN-ANPASSUNG === */

/* Der Haupt-Container für die Tags */
.tagify {
    --tags-border-color: var(--border-color);
    --tags-focus-border-color: var(--primary-color);
    --tags-placeholder-color: var(--text-color-light);
    width: 100%;
    background-color: #333;
    border-radius: var(--border-radius);
    padding: calc(var(--spacing-unit) * 0.75); /* Etwas weniger Padding als normale Inputs */
}

/* Styling für die einzelnen Tag-Kästchen */
.tagify__tag {
    --tag-bg: var(--primary-color);
    --tag-text-color: #1e1e1e; /* Dunkle Schrift für goldenen Hintergrund */
    --tag-remove-btn-color: #1e1e1e;
    margin: calc(var(--spacing-unit) * 0.5);
    padding: calc(var(--spacing-unit) * 0.5) var(--spacing-unit);
    border-radius: 8px; /* Etwas weniger rund als der Container */
}

/* Hover-Effekt für die Tag-Kästchen */
.tagify__tag:hover:not([readonly]) {
    --tag-bg: var(--primary-color-hover);
}

/* Styling für das "x" zum Entfernen */
.tagify__tag__removeBtn {
    font-size: 1.2em;
    font-weight: bold;
    opacity: 0.7;
    transition: opacity 0.2s;
}
.tagify__tag__removeBtn:hover {
    opacity: 1;
}

/* Das eigentliche Eingabefeld, in dem der Nutzer tippt */
.tagify__input {
    font-size: 1.1em;
    color: var(--text-color);
    margin: calc(var(--spacing-unit) * 0.5);
    padding: calc(var(--spacing-unit) * 0.5) var(--spacing-unit);
}
/* ==========================================================================
   COMMUNITY FEED & POSTS (Version 3.0 - Zentralisiert)
   ========================================================================== */

/* --- 1. Feed-Layout & Header --- */
.container.feed-container {
    max-width: 700px;
}
.feed-header {
    text-align: center;
    margin-bottom: 40px;
}
.feed-header h1 {
    font-size: 2.5em;
}
.feed-header p {
    color: var(--text-color-light);
    font-size: 1.1em;
}

/* --- 2. Post-Erstellungs-Karte --- */
.create-post-card {
    margin-bottom: 30px;
}
.create-post-card textarea {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-color);
    font-size: 1.2em;
    min-height: 80px;
    resize: vertical;
}
.create-post-card textarea:focus {
    outline: none;
}
.create-post-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
}

/* --- 3. Allgemeine Post-Karte --- */
.post-card {
    margin-bottom: 20px;
    position: relative;
    padding-top: 45px; /* Schafft Platz für den Suggestion-Text */
}
.post-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    position: relative;
}
.post-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
}
.post-author-info {
    flex-grow: 1;
}
.post-author-info strong {
    display: block;
}
.post-body {
    margin-top: 15px;
}
.read-more-post,
.read-less-post {
    background: none;
    border: none;
    padding: 0;
    color: var(--primary-color); /* Deine Akzentfarbe */
    font-weight: bold;
    cursor: pointer;
    display: inline; /* Wichtig */
    margin-left: 5px;
}

/* --- 4. Social Proof / Suggestion Reason --- */
.suggestion-reason-text {
    position: absolute;
    top: 18px;
    left: 24px;
    font-size: 0.8em;
    color: var(--text-color-light);
    font-style: italic;
}
.suggestion-reason-linkedin {
    position: absolute;
    top: 15px;
    left: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9em;
    color: var(--text-color-light);
}
.suggestion-reason-linkedin img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

/* --- 5. Post-Footer mit Aktionen (Like, Comment, Share) --- */
.post-footer {
    display: flex;
    justify-content: space-around;
    border-top: 1px solid var(--border-color);
    padding-top: 8px;
    margin-top: 15px;
}
/* Basis-Styling für ALLE Buttons im Footer */
.post-footer button {
    flex: 1; /* Nimmt gleichen Platz ein */
    background-color: transparent;
    border: none;
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--text-color-light);
    font-family: var(--font-family);
    font-size: 0.9em;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 0.2s, color 0.2s;
}
/* DER HOVER-EFFEKT FÜR ALLE */
.post-footer button:hover {
    background-color: #333;
    color: var(--text-color);
}
/* Spezifische SVG-Größen */
.post-footer .share-button svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}
/* Styling für den "Gefällt mir"-Zustand */
.post-footer .like-button.liked {
    color: var(--primary-color);
}

/* --- 6. Kommentar-Sektion (Allgemein) --- */
.comment-section {
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
    margin-top: 15px;
}
.comment-form {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.comment-input {
    width: 100%;
    min-height: 40px;
    resize: vertical;
    padding: 10px;
    font-size: 1em;
    border: 1px solid var(--border-color);
    border-radius: 20px; /* Abgerundeter für Chat-Look */
    background-color: #333;
    color: var(--text-color);
    font-family: var(--font-family);
}
.comment-submit-button {
    height: 40px;
    padding: 8px 15px !important;
}

/* --- 7. Einzelne Kommentare & Antworten --- */
.main-comment-wrapper {
    margin-top: 20px;
}
.comment {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.comment-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.comment-content {
    width: 100%;
}
.comment-body {
    background-color: #333;
    padding: 10px 15px;
    border-radius: 18px;
    position: relative;
    width: fit-content; /* Passt sich dem Inhalt an */
    min-width: 150px; /* Mindestbreite für Optik */
}
.comment-body p {
    margin: 0;
    margin-top: 2px;
}
.comment-footer {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    font-size: 0.85em;
    padding-left: 10px;
}
.comment-footer button {
    background: none; border: none; color: var(--text-color-light); cursor: pointer; font-weight: 700; padding: 4px; border-radius: 4px; transition: color 0.2s;
}
.comment-footer button:hover { color: var(--text-color); }
.comment-like-button.liked { color: var(--primary-color); }
.comment-like-count { color: var(--text-color-light); font-size: 0.9em; display: flex; align-items: center; gap: 4px; cursor: default; }
.comment-like-count::before { content: '👍'; font-size: 0.8em; }
.dot-separator { color: var(--text-color-light); margin: 0 6px; }

/* --- 8. Antworten (Replies) --- */
.reply-form {
    margin-top: 10px;
    margin-left: 50px; /* Einrückung */
}
.toggle-replies-btn {
    background: none; border: none; color: var(--text-color-light); font-weight: 700; cursor: pointer; font-size: 0.9em; margin-left: 50px; margin-top: 10px;
}
.toggle-replies-btn:hover { text-decoration: underline; color: var(--text-color); }
.replies-container {
    padding-left: 50px; /* Einrückung für alle Antworten */
}
.comment-reply {
    margin-top: 15px;
}

/* --- 9. Mobiles Kommentar-Modal --- */
.comment-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); 
    /* FIX: Wir brauchen !important, um die Navigation (30000 !important) zu übertrumpfen! */
    z-index: 30001 !important; 
    display: none; opacity: 0; transition: opacity 0.3s ease;
}
.comment-modal-overlay.active { display: block; opacity: 1; }
.comment-modal-content {
    position: fixed; bottom: 0; left: 0; width: 100%; height: 90vh; background-color: var(--surface-color); border-top-left-radius: var(--border-radius); border-top-right-radius: var(--border-radius); box-shadow: 0 -5px 20px rgba(0,0,0,0.3); display: flex; flex-direction: column; transform: translateY(100%); transition: transform 0.3s ease;
}
.comment-modal-overlay.active .comment-modal-content { transform: translateY(0); }
.comment-modal-header {
    padding: 15px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;
}
.comment-modal-header h3 { margin: 0; }
.comment-modal-close-btn { font-size: 1.8em; font-weight: 300; color: var(--text-color-light); cursor: pointer; }

/* Kontext (Post-Vorschau) im Modal */
.comment-modal-post-context {
    display: flex; gap: 10px; padding: 15px; border-bottom: 1px solid var(--border-color); flex-shrink: 0;
}
.comment-modal-post-context .post-avatar { width: 40px; height: 40px; }
.post-context-text { font-size: 0.9em; color: var(--text-color-light); }

.comment-modal-body { flex-grow: 1; overflow-y: auto; padding: 15px; }

/* --- 10. Bild-Collagen (Image Grid) --- */
.post-image-grid { display: grid; gap: 2px; border-radius: var(--border-radius); overflow: hidden; margin-top: 15px; }
.post-image-grid.count-1 { grid-template-columns: 1fr; }
.post-image-grid.count-1 img { 
    object-fit: cover; 
    width: 100%; /* Bild soll immer die volle Breite des Containers einnehmen */
    max-height: 70vh; /* Verhindert, dass extrem hohe Bilder den Bildschirm sprengen (vh = viewport height) */
    height: auto; /* Die Höhe passt sich automatisch an das Seitenverhältnis an */
}
.post-image-grid.count-2 { grid-template-columns: 1fr 1fr; aspect-ratio: 16 / 8; }
.post-image-grid.count-3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 16 / 10; }
.post-image-grid.count-3 a:first-child { grid-row: 1 / 3; }
.post-image-grid.count-4 { grid-template-columns: 1fr 1fr; aspect-ratio: 16 / 10; }
.post-image-grid.count-plus { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 16 / 10; }
.post-image-grid.count-plus a:first-child { grid-row: 1 / 3; }
.post-image-grid.count-plus a:nth-child(n+5) { display: none; }
.post-image-grid.count-plus a:nth-child(4) { position: relative; }
.post-image-grid.count-plus a:nth-child(4)::after {
    content: attr(data-more-count); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); color: white; display: flex; justify-content: center; align-items: center; font-size: 2em; font-weight: 700;
}
.post-image-grid a { display: block; width: 100%; height: 100%; }
.post-image-grid img { width: 100%; height: 100%; object-fit: cover; }

.share-options-modal {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.share-option {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--background-color-light);
    cursor: pointer;
    transition: background-color 0.2s;
    text-align: left;
    color: var(--text-color);
}
.share-option:hover {
    background-color: var(--background-color-hover);
}
.share-option svg {
    flex-shrink: 0;
}
.modal-search-input {
    width: 100%;
    padding: 8px;
    margin-bottom: 15px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background-color: var(--background-color);
    color: var(--text-color);
}
.repost-container {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 15px;
    margin-top: 15px;
    background-color: var(--background-color); /* Etwas dunkler als die Haupt-Karte */
}
.repost-container .post-avatar {
    width: 35px;
    height: 35px;
}

/* === 99. AUTOR-BADGE & THREADING === */

.comment-body strong {
    margin-right: 5px; /* Platz für das Badge */
}

.author-badge {
    display: inline-block;
    background-color: var(--primary-color);
    color: var(--surface-color);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.75em;
    font-weight: 700;
    margin-left: 5px;
    vertical-align: top;
    line-height: 1.4;
}

/* --- 8. Antworten (Replies) und Threading --- */

/* Der Haupt-Container für Antworten */
.main-comment-wrapper {
    /* WICHTIG: Mehr Abstand zum Eingabefeld oben, damit es nicht in das Feld ragt */
    margin-top: 30px; 
    padding-bottom: 10px; 
}

/* Der Container für die gesamte Kommentar-Sektion, für den oberen Abstand */
.comment-display-section {
    padding-top: 10px; /* Fügt einen Puffer zum Eingabefeld hinzu */
}


/* Der Haupt-Container für Antworten */
.replies-container {
    position: relative;
}

/* Der Wrapper für EINE Antwort (sowohl Desktop als auch Mobile) */
.comment-reply {
    margin-top: 15px;
    position: relative;
    /* Desktop-spezifische Einrückung für den Threading-Effekt */
    padding-left: 50px; 
}
/* Spezial-Klasse für mobile/modal Ansicht */
.comment-reply-mobile {
    margin-top: 15px;
    position: relative;
    padding-left: 20px;
}


/* --- 8.1. Desktop Threading Linien (Perfekte Positionierung) --- */

/* Die vertikale Verbindungslinie (Desktop) */
.comment-reply .comment-reply-line {
    position: absolute;
    top: 0; 
    left: 20px; 
    width: 2px;
    /* KORREKTUR: Höhe muss 100% sein, damit sie das Formular unten nicht mitnimmt */
    height: 100%; 
    background-color: var(--border-color);
    z-index: 0;
}

/* Die horizontale Linie, die zum Kommentar führt (Desktop) */
.comment-reply .comment-reply-line::after {
    content: '';
    position: absolute;
    top: 20px; /* Auf Höhe der Mitte des Avatars (40px Avatar / 2) */
    left: 0; 
    width: 15px; 
    height: 2px;
    background-color: var(--border-color);
}


/* --- 8.2. Mobile Threading Linien (Einfachere Logik) --- */

/* Die Linien im Modal/Mobile */
.comment-reply-mobile .comment-reply-line-mobile {
    position: absolute;
    top: 0; 
    left: 0; 
    width: 2px;
    height: 100%; 
    background-color: var(--border-color);
}

.comment-reply-mobile .comment-reply-line-mobile::after {
    content: '';
    position: absolute;
    top: 20px; 
    left: 0; 
    width: 15px; 
    height: 2px;
    background-color: var(--border-color);
}


/* --- 8.3. Steuerung der Kindelemente --- */

/* Das Avatar und der Inhalt müssen über der Linie liegen */
.comment-reply .comment-wrapper,
.comment-reply-mobile .comment-wrapper {
    position: relative;
    z-index: 1; 
}

/* Der Toggle-Button und das Antwortfeld bekommen die gleiche Einrückung */
.reply-form, 
.toggle-replies-btn {
    margin-left: 50px; 
}
.comment-reply-mobile + .reply-form {
    margin-left: 20px; /* Anpassung für mobile Einrückung */
}

/* Spezieller Stil für die einzelne, neueste Antwort, wenn sie eingeklappt ist */
.comment-reply.single-latest-reply {
    margin-top: 15px;
    padding-left: 50px; 
}
.comment-reply.single-latest-reply .comment-reply-line {
    left: 20px; 
}

/* --- 8.4. Mobile Ansicht (Zustand im Modal) --- */

@media (max-width: 850px) {

    /* Die Desktop-Linien komplett entfernen */
    .comment-reply .comment-reply-line,
    .comment-reply .comment-reply-line::after {
        display: none;
    }

    /* Die Mobilen Linien aktivieren */
    .comment-reply-mobile .comment-reply-line-mobile,
    .comment-reply-mobile .comment-reply-line-mobile::after {
        display: block;
    }

    /* Einrückungen für mobile Ansicht zurücksetzen oder anpassen */
    .comment-reply {
        padding-left: 0;
    }
    .replies-container {
        padding-left: 20px;
    }
    .reply-form, 
    .toggle-replies-btn,
    .comment-reply.single-latest-reply {
        margin-left: 0; 
    }
}

/* Verhindert das Scrollen des Hintergrunds, wenn ein Modal offen ist */
/* Scroll-Sperre für Mobile (Gilt für HTML und BODY) */
/* Scroll-Lock für Mobile & Desktop */
html.modal-open,
body.modal-open {
    overflow: hidden !important;
    height: 100% !important;
    touch-action: none; /* Verhindert Wischen auf dem Hintergrund */
}

/* Erlaubt Scrollen NUR im Modal-Body */
.modal-body {
    overscroll-behavior: contain; /* Verhindert, dass Scrollen auf den Hintergrund überspringt */
}

/* Senden-Button auf mobilen Geräten anzeigen (FIX) */
@media (max-width: 850px) {
    .comment-section .comment-submit-button,
    .comment-modal-content .comment-submit-button {
        display: flex !important; /* Button wieder anzeigen */
    }

    /* Padding für Input anpassen, da Button jetzt da ist */
    .comment-section .comment-input,
    .comment-modal-content .comment-input {
        padding-right: 40px; /* Platz für den Button */
    }
}

/* --- 9. Mobiles Kommentar-Modal --- */
.comment-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 2000; display: none; opacity: 0; transition: opacity 0.3s ease;
}
.comment-modal-overlay.active { display: block; opacity: 1; }
.comment-modal-content {
    position: fixed; bottom: 0; left: 0; width: 100%; height: 90vh; background-color: var(--surface-color); border-top-left-radius: var(--border-radius); border-top-right-radius: var(--border-radius); box-shadow: 0 -5px 20px rgba(0,0,0,0.3); display: flex; flex-direction: column; transform: translateY(100%); transition: transform 0.3s ease;
}
.comment-modal-overlay.active .comment-modal-content { transform: translateY(0); }
.comment-modal-header {
    padding: 15px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;
}
.comment-modal-header h3 { margin: 0; }
.comment-modal-close-btn { font-size: 1.8em; font-weight: 300; color: var(--text-color-light); cursor: pointer; }

/* Kontext (Post-Vorschau) im Modal */
.comment-modal-post-context {
    display: flex; gap: 10px; padding: 15px; border-bottom: 1px solid var(--border-color); flex-shrink: 0;
}
.comment-modal-post-context .post-avatar { width: 40px; height: 40px; }
.post-context-text { font-size: 0.9em; color: var(--text-color-light); }

.comment-modal-body { 
    flex-grow: 1; 
    overflow-y: auto; /* HIER IST DIE KORREKTUR FÜR DAS SCROLLEN */
    padding: 15px; 
}

/* === 100. POST REACTION SUMMARY === */

.post-reaction-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    margin: 0 15px; /* Passt zum Padding der Karte */
    border-bottom: 1px solid var(--border-color);
}

.like-summary-btn {
    background: none;
    border: none;
    color: var(--text-color-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px;
    border-radius: 5px;
    transition: background-color 0.2s;
}
.like-summary-btn:hover {
    background-color: #333;
}
.like-summary-btn .like-icon {
    font-size: 1em;
}

.comment-count-display {
    color: var(--text-color-light);
    font-size: 0.9em;
}
/* ==========================================================================
   101. COOKIE CONSENT BANNER
   ========================================================================== */

.cookie-banner {
    position: fixed;
    bottom: 20px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 95%;
    max-width: 800px;
    z-index: 5000;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

.cookie-banner-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.cookie-banner-content p {
    margin: 0;
    font-size: 0.9em;
    color: var(--text-color-light);
    text-align: left;
}

.cookie-banner-content p a {
    color: var(--primary-color);
    text-decoration: underline;
    font-weight: 700;
}

.cookie-banner-content .btn {
    flex-shrink: 0; /* Verhindert, dass der Button gequetscht wird */
    padding: 10px 25px;
}

/* Mobile Ansicht für den Banner */
@media (max-width: 768px) {
    .cookie-banner {
        bottom: 80px; /* Platz für die mobile Navigationsleiste schaffen */
    }
    
    .cookie-banner-content {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    .cookie-banner-content p {
        text-align: center;
    }
}
/* ==========================================================================
   102. ONBOARDING THEME SELECTOR (FINAL FIX)
   ========================================================================== */

/* Macht das spezielle Modal breit genug, damit zwei Boxen nebeneinander passen. */
.theme-selector-modal .modal-content {
    max-width: 550px;
}

/* Wir nutzen Flexbox für ein robustes 2-Spalten-Layout. */
.theme-selector-onboarding {
    display: flex; /* WICHTIGSTE ÄNDERUNG: von 'grid' zu 'flex' */
    justify-content: center;
    gap: 20px;
    margin-top: 25px;
}

.theme-option {
    cursor: pointer;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 10px;
    text-align: center;
    transition: all 0.2s ease;
    /* Hinzugefügt: Wir sagen jeder Box, sie soll flexibel sein */
    flex: 1;
    min-width: 0; /* Erlaubt dem flex-item, kleiner als sein Inhalt zu werden */
}

.theme-option:hover {
    border-color: var(--primary-color-hover);
    transform: translateY(-3px);
}

.theme-option.selected {
    border-color: var(--primary-color);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
}

.theme-option img {
    width: 100%;
    height: 120px; /* Kleinere Höhe, damit alles besser passt */
    object-fit: cover;
    border-radius: 8px; /* Innere Ecken abrunden */
    margin-bottom: 10px;
}

.theme-option span {
    font-weight: 700;
    color: var(--text-color);
}
/* ==========================================================================
   104. MOBILE OPTIMIZATION & RESPONSIVE FIXES (FINAL V3 - KOMPLETT)
   ========================================================================== */

@media (max-width: 768px) {
    /* REGEL 1: Gilt für ALLE Benachrichtigungen. Erlaubt Umbruch. */
    .notification-text {
        white-space: normal;
        max-width: none;
    }
    
    /* REGEL 2: Gilt NUR für die kurzen Benachrichtigungen mit Profilbild. */
    /* Wir zielen auf Benachrichtigungen, die einen Link zum Profil, zur Konversation oder zum Post haben. */
    .notification-item a[href*="#profile/"],
    .notification-item a[href*="#conversation/"],
    .notification-item a[href*="#post/"] {
        /* Wende das Abschneiden nur auf den Text INNERHALB dieser Links an. */
        .notification-text {
            display: -webkit-box;
            /* stylelint-disable-next-line property-no-vendor-prefix */
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.4em;
            max-height: 2.8em; /* 2 Zeilen * 1.4em */
        }
    }
    
    /* 2. Aktivitäten: Buttons untereinander */
    .notification-item {
        flex-direction: column;
        align-items: flex-start;
    }
    .notification-item .request-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-top: 15px;
    }
    
    /* 3. E-Mail-Modal: Schalter vereinheitlichen */
    #notification-settings-form .toggle-switch-group .toggle-switch {
        min-width: 60px;
        flex-shrink: 0;
    }

    /* 4. Dashboard: Guthaben-Button korrekt positionieren */
    .dashboard-header {
        position: relative !important; /* Stellt sicher, dass der Header der Bezugspunkt ist */
    }
    .dashboard-header-actions {
        position: static !important;     /* Überschreibt jeden inline-style */
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 15px !important;
        margin-top: 20px !important;     /* Fügt den Abstand zum Text hinzu */
    }

    /* 5. Heldenübersicht (Profil-Detail): Bewertungs-Button korrekt positionieren */
    .profile-detail-header {
        flex-direction: column; /* Stapelt Avatar/Infos und Aktionen untereinander */
        text-align: center;     /* Zentriert den gesamten Inhalt */
        gap: 15px;              /* Fügt einen allgemeinen Abstand hinzu */
    }
    
    .profile-detail-info .meta-info {
        justify-content: center; /* Zentriert die Meta-Infos (Ort, Follower etc.) */
        flex-wrap: wrap;         /* Erlaubt Umbruch bei vielen Infos */
    }
    
    .profile-actions {
        position: static;     /* Keine spezielle Positionierung */
        width: 100%;          /* Nimmt die volle Breite der Karte ein */
        display: flex;
        flex-direction: column; /* Ordnet Bewertung und Button untereinander an */
        align-items: center;  /* Zentriert beides horizontal */
        gap: 15px;            /* Abstand zwischen Bewertung und Button */
    }

    .profile-actions .profile-rating {
        position: static;
        margin: 0;
    }

    .profile-actions .btn, .profile-actions .btn-secondary {
        width: 100%; /* Lässt die Buttons die volle Breite einnehmen */
        max-width: 300px; /* Aber nicht unendlich breit werden */
    }

    /* 6. Profil-Body: Breiten-Anpassung für Mobile */
    .profile-detail-body .card {
        /* Wir entfernen das seitliche Padding, damit der Inhalt den Rand berühren kann */
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Spezifisch für das Partnernetzwerk, damit die Karten nicht zu groß sind */
    .profile-detail-body .profile-cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }

    /* --- B) ADMIN-BEREICH FIXES --- */

    /* 1. Admin Dashboard: Filterleisten scrollbar machen */
    .admin-dashboard-filters {
        width: 100%;
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 10px;
    }
    .admin-dashboard-filters .btn-secondary {
        flex-shrink: 0;
    }
    .admin-charts-grid {
        display: block !important;
    }
    .admin-charts-grid .card:last-child {
        margin-top: 20px;
    }
    
    /* 2. Admin Benutzerverwaltung & Support: Layout reparieren */
     .admin-header-with-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }
    .admin-header-with-actions .btn {
        width: 100%;
    }
    .admin-table tr {
        background-color: var(--surface-color);
        padding: 15px; /* Fügt Innenabstand für die Karten hinzu */
        margin-bottom: 15px; /* HIER IST DIE KORREKTUR: Abstand zwischen den Karten */
    }
    .admin-table td {
        padding: 10px 0; /* Reduziert den inneren Abstand der Felder */
        /* HIER IST DIE FINALE KORREKTUR: */
        overflow-wrap: break-word; /* Intelligenterer Zeilenumbruch für lange Wörter */
    }
    .admin-ticket-filters {
        overflow-x: auto;
        padding-bottom: 15px;
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 20px;
        white-space: nowrap; /* NEU & WICHTIG */
    }
    .admin-ticket-filters .btn-secondary {
        flex-shrink: 0;
        display: inline-block; /* NEU & WICHTIG */
    }

    
    /* 3. Management & Marketing: Scrollbare Tabs */
    .user-detail-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 15px;
        margin-left: -15px;
        margin-right: -15px;
        padding-left: 15px;
        white-space: nowrap;
    }
    .user-detail-tabs .btn-secondary {
        display: inline-block;
        flex-shrink: 0;
    }
    
    /* 4. Admin Finanzen & Transaktionen: Layout reparieren */
    .finance-overview-header {
        align-items: stretch;
    }
    .finance-overview-header > div {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    #finance-tab-content .admin-kpi-grid {
        grid-template-columns: 1fr 1fr !important;
    }
    #finance-tab-content .card {
        overflow-x: auto;
    }
    #finance-revenue-chart, #finance-type-chart {
        min-width: 400px;
    }
    
    /* 5. Admin Einstellungen: Buttons untereinander */
    .card > div[style*="display: flex; gap: 15px;"] {
        flex-direction: column;
        align-items: stretch;
    }
    .card > div[style*="display: flex; gap: 15px;"] .btn,
    .card > div[style*="display: flex; gap: 15px;"] .btn-secondary {
        width: 100%;
    }

}

/* === 105. LINK PREVIEW STYLES === */

.link-preview-card {
    position: relative;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    margin-top: 15px;
    overflow: hidden;
    display: flex;
    background-color: #2a2a2a;
    transition: background-color 0.2s;
    text-decoration: none;
    color: var(--text-color);
}
.link-preview-card.view-only:hover {
    background-color: #333;
}
.link-preview-card.loading {
    padding: 20px;
    color: var(--text-color-light);
    justify-content: center;
    align-items: center;
}

.remove-link-preview-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: rgba(0,0,0,0.6);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 1em;
    line-height: 24px;
    text-align: center;
    cursor: pointer;
    z-index: 2;
}

.link-preview-image {
    width: 120px;
    height: 120px;
    object-fit: cover;
    flex-shrink: 0;
}

.link-preview-content {
    padding: 10px 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.link-preview-sitename {
    font-size: 0.8em;
    color: var(--text-color-light);
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.link-preview-title {
    font-weight: 700;
    margin: 2px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.link-preview-description {
    font-size: 0.9em;
    color: var(--text-color-light);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ==========================================================================
   106. CHAT TIMESTAMP & DATE SEPARATOR STYLES
   ========================================================================== */

.chat-date-separator {
    display: flex; /* WICHTIGSTE ÄNDERUNG: Wir benutzen jetzt Flexbox */
    align-items: center; /* Zentriert alles vertikal */
    text-align: center;
    margin: 20px 0;
    color: var(--text-color-light);
    font-size: 0.8em;
    font-weight: 700;
    text-transform: uppercase;
}

/* Die Linien links und rechts vom Datum */
.chat-date-separator::before,
.chat-date-separator::after {
    content: '';
    flex-grow: 1; /* Die Linien füllen den restlichen Platz */
    height: 1px;
    background-color: var(--border-color);
    margin: 0 15px; /* Abstand zwischen Linie und Text */
}

.conversation-item.removing {
    opacity: 0;
    height: 0;
    /* HIER IST DIE MAGIE: Wir animieren auch die Abstände auf Null */
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    border-width: 0;
    /* Das !important ist nicht mehr nötig, da wir alle Werte animieren */
}


/* Die Uhrzeit in der Bubble */
.message-timestamp {
    font-size: 0.75em;
    margin-top: 5px;
    text-align: right;
    display: block;
    opacity: 0.7;
}

/* Anpassung der Bubble für die Uhrzeit */
.message-bubble {
    padding-bottom: 8px; /* Etwas weniger Platz unten, da die Uhrzeit Platz braucht */
}

/* Spezifische Farbe für die Uhrzeit in den verschiedenen Bubbles */
.message-bubble.sent .message-timestamp {
    color: #333;
}
.message-bubble.received .message-timestamp {
    color: var(--text-color-light);
}
/* ==========================================================================
   107. MOBILE INBOX PREVIEW FIX
   ========================================================================== */

@media (max-width: 768px) {
    .conversation-preview {
        /* Alte Regeln außer Kraft setzen */
        white-space: normal; /* Erlaubt normalen, mehrzeiligen Umbruch */
        max-width: none; /* Keine maximale Breite mehr, nimmt verfügbaren Platz ein */
        
        /* Das ist die Magie für das Abschneiden nach zwei Zeilen */
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        
        /* Eine feste Zeilenhöhe ist wichtig, damit es sauber aussieht */
        line-height: 1.4em;
        max-height: 2.8em; /* 2 Zeilen * 1.4em Zeilenhöhe */
    }
}

/* Globale Regel für lange Wörter in Überschriften */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    /* HIER IST DIE NEUE EIGENSCHAFT: */
    overflow-wrap: break-word;
}

/* ==========================================================================
   109. KARRIERE-STATUS FORTSCHRITTSBALKEN
   ========================================================================== */

.progress-bar-container {
    position: relative;
    width: 100%;
    height: 8px;
    margin-top: 10px;
}

.progress-bar-background,
.progress-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 8px;
}

.progress-bar-background {
    width: 100%;
    background-color: #3a3a3a;
}

.progress-bar-fill {
    background-color: var(--primary-color);
    transition: width 0.5s ease-out;
}

.progress-bar-marker {
    position: absolute;
    top: -4px; /* Zentriert den Marker auf der Linie */
    transform: translateX(-50%); /* Zentriert den Marker über seiner Position */
    width: 2px;
    height: 16px;
    background-color: #555;
    cursor: help;
}

.progress-bar-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    font-size: 0.8em;
    color: var(--text-color-light);
    font-weight: 700;
}
/* ==========================================================================
   110. LANGUAGE MODAL STYLES (i18next Version)
   ========================================================================== */

/* Der Container für alle Sprach-Buttons */
.language-options {
    display: flex;
    flex-wrap: wrap; /* Erlaubt den Umbruch in die nächste Zeile */
    gap: 10px;       /* Abstand zwischen den Buttons */
    justify-content: center; /* Zentriert die Buttons in der Reihe */
    max-height: 45vh; /* Begrenzt die Höhe, damit es nicht zu lang wird */
    overflow-y: auto; /* Fügt einen Scrollbalken hinzu, wenn nötig */
    padding: 5px;     /* Kleiner Innenabstand für den Scrollbalken */
}

/* Styling für jeden einzelnen Sprach-Button */
.language-btn {
    display: inline-flex; /* Richtet Flagge und Text nebeneinander aus */
    align-items: center;  /* Zentriert beides vertikal */
    gap: 8px;             /* Abstand zwischen Flagge und Text */
    
    background-color: #333;
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 20px; /* Macht die Buttons pillenförmig */
    padding: 8px 15px;
    font-size: 0.9em;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.language-btn:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--surface-color); /* Dunkle Schrift für goldenen Hintergrund */
}

.language-btn.active {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--surface-color);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.5); /* Leichter Leuchteffekt */
}

/* ==========================================================================
   111. JOB DETAIL PAGE SCROLL FIX (FINAL VERSION)
   ========================================================================== */

.collapsible-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
}

.collapsible-content.expanded {
    max-height: 2000px; /* Ein hoher Wert, der größer ist als der Inhalt je sein wird */
    overflow-y: auto;   /* NEU: Fügt eine vertikale Scrollbar hinzu, NUR wenn der Inhalt zu lang ist */
    transition: max-height 0.5s ease-in, overflow-y 0.5s; /* Sorgt für einen sauberen Übergang */
}
/* Erlaube dem Hauptcontainer der Job-Detail-Seite zu wachsen */
.job-detail-container {
    padding-bottom: 80px; /* Gibt unten etwas mehr Platz, damit der letzte Button nicht am Rand klebt */
}

/* Optional: Stelle sicher, dass die Sektionen selbst nicht das Scrollen blockieren */
.job-description-section .section-content {
    overflow-wrap: break-word; /* Stellt sicher, dass lange Wörter umgebrochen werden */
    word-wrap: break-word;
    white-space: pre-wrap; /* Wichtig, damit Zeilenumbrüche aus dem <textarea> erhalten bleiben */
}
/* NEUE REGELN FÜR DEN BEWERBEN-BUTTON-CONTAINER */
.apply-buttons-container {
    display: flex; /* Richtet die Buttons nebeneinander aus */
    gap: 15px;     /* Erzeugt den gewünschten Abstand zwischen den Buttons */
    width: 100%;   /* Stellt sicher, dass der Container die volle Breite nutzt */
}

.apply-buttons-container > a {
    flex: 1; /* Sagt jedem Button, er soll gleich viel Platz einnehmen -> gleiche Größe! */
    text-align: center; /* Zentriert den Text im Button, falls er unterschiedlich lang ist */
}
/* ==========================================================================
   112. ADMIN DASHBOARD RESPONSIVE & SWIPER
   ========================================================================== */

/* Standard (Desktop): Mobile-Elemente sind versteckt */
.mobile-only {
    display: none !important;
}

/* --- Swiper-Karussell für KPIs --- */
.kpi-carousel {
    width: 100%;
    overflow: hidden; /* Wichtig, damit es auf dem Desktop gut aussieht */
}

.kpi-carousel .swiper-slide {
    width: 24%; /* Ca. ein Viertel der Breite, damit 4 Kacheln sichtbar sind */
    height: auto;
}
.kpi-carousel .swiper-slide .card {
    height: 100%;
}

.kpi-carousel .swiper-pagination {
    display: none; /* Auf dem Desktop verstecken wir die Punkte */
    position: static;
    margin-top: 15px;
}
.kpi-carousel .swiper-pagination-bullet {
    background-color: var(--text-color-light);
}
.kpi-carousel .swiper-pagination-bullet-active {
    background-color: var(--primary-color);
}


/* --- Media Query für mobile Ansicht (z.B. kleiner als 900px) --- */
@media (max-width: 900px) {
    /* Desktop-Elemente verstecken */
    .desktop-only {
        display: none !important;
    }
    
    /* Mobile-Elemente anzeigen */
    .mobile-only {
        display: block !important;
    }

    /* Das Layout des Headers anpassen */
    .dashboard-main-header {
        display: block; /* Titel und Filter untereinander */
        text-align: center;
    }
    #central-filter-container-desktop {
        display: none;
    }
    #central-filter-container-mobile {
        display: block;
    }

    /* Swiper-Karussell für mobile Ansicht anpassen */
    .kpi-carousel .swiper-slide {
        width: 80%; /* Eine Kachel nimmt 80% der Breite ein */
    }
    .kpi-carousel .swiper-pagination {
        display: block; /* Die Punkte auf Mobilgeräten anzeigen */
    }
}
/* ==========================================================================
   113. STATISTIK-FILTER SCROLLBAR (FINALE KORREKTE VERSION)
   ========================================================================== */

/* Wir zielen auf den neuen Wrapper in der Statistik-Ansicht */
.stats-filter-bar {
    display: flex;
    gap: 8px;
    overflow-x: auto; /* Horizontales Scrollen aktivieren */
    white-space: nowrap; /* Verhindert, dass die Buttons umbrechen */
    padding-bottom: 15px; /* Platz nach unten für die unsichtbare Scrollbar */
    margin-bottom: -15px; /* Zieht den unteren Rand wieder hoch */
    
    /* Scrollbar verstecken, während die Funktion erhalten bleibt */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE */
}

.stats-filter-bar::-webkit-scrollbar {
    display: none; /* Chrome, Safari, etc. */
}

/* Stellt sicher, dass die Buttons im Filter nicht schrumpfen */
.stats-filter-bar > * {
    flex-shrink: 0;
}

/* =================================== */
/* == STILE FÜR SUPPORT-TICKET-ANSICHT == */
/* =================================== */

/* Standard-Stil für eine öffentliche Antwort von einem ADMIN */
/* (Der goldene Rand signalisiert "Aktion vom Team") */
.ticket-entry {
    border-left: 3px solid var(--primary-color);
}

/* Eigener Stil für eine Nachricht vom NUTZER */
/* (Ein neutraler, grauer Rand signalisiert "Input von außen") */
.ticket-entry.user-message {
    background-color: #333333; /* Ein ganz leicht helleres Grau als der Hintergrund */
    border-left: 3px solid #6c757d; 
}

/* Dein bestehender Stil für INTERNE NOTIZEN */
/* (Ein dunklerer, warmer Ton signalisiert "Nur für uns sichtbar") */
.ticket-entry.internal {
    background-color: #3d3b30; /* Dein bräunlicher Ton aus dem Screenshot */
    border-left: 3px solid #f39c12;
}

/* Optional: Label-Stile für bessere Lesbarkeit */
.ticket-entry-type {
    font-size: 0.75em;
    padding: 2px 8px;
    border-radius: 10px;
    background-color: #444;
    color: #ccc;
    margin-left: 8px;
}

.ticket-entry.internal .ticket-entry-type {
    background-color: #f39c12;
    color: #1e1e1e;
}
/* ==========================================================================
   114. ADMIN FILTER & ACTION GROUP STYLES
   ========================================================================== */

/* Der Haupt-Container für die Filterleiste */
.admin-filter-bar {
    display: grid;
    /* Desktop: 2x Datumsfeld, 1x Aktionsgruppe */
    grid-template-columns: 1fr 1fr auto; 
    gap: 15px;
    align-items: flex-end; /* Richtet alles an der Unterkante aus */
}

/* Der neue Wrapper für die Buttons und den Zähler */
.admin-action-group {
    display: flex;
    align-items: center;
    background-color: var(--background-color); /* Hintergrund für den "Blasen"-Effekt */
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden; /* Stellt sicher, dass die Ecken rund bleiben */
}

/* Styling für den Zähler in der Mitte */
#content-results-count,
#log-results-count {
    padding: 0 15px;
    font-weight: 700;
    color: var(--text-color-light);
    white-space: nowrap; /* Verhindert Zeilenumbruch */
    font-size: 0.9em;
}
/* Entfernt den Text, wenn er leer ist, um Platz zu sparen */
#content-results-count:empty,
#log-results-count:empty {
    padding: 0;
}

/* Wir entfernen die Ränder von den Buttons, da der Container jetzt den Rand hat */
.admin-action-group .btn,
.admin-action-group .btn-secondary {
    border-radius: 0;
    border: none;
    height: 100%; /* Füllt die komplette Höhe der Gruppe aus */
}

.admin-table tr.transaction-positive td[data-label="Betrag"] {
    color: #2ecc71; /* Grün */
}

.admin-table tr.transaction-negative td[data-label="Betrag"] {
    color: #e74c3c; /* Rot */
}

/* Media Query für mobile Geräte (wie von dir gelobt) */
@media (max-width: 768px) {
    .admin-filter-bar {
        grid-template-columns: 1fr; /* Alles untereinander stapeln */
    }
    .admin-action-group {
        display: grid;
        grid-template-columns: auto 1fr auto; /* Laden | Zähler füllt | Drucken */
        width: 100%;
    }
    
    #content-results-count,
    #log-results-count {
        text-align: center; /* Zähler auf dem Handy zentrieren */
    }
}

/* === Post & Comment Menu === */
.post-header, .comment-body {
    position: relative;
}

.post-menu-container {
    position: absolute;
    top: 5px;
    right: 5px;
}

.comment-body > a,
.comment-body > .author-badge {
    margin-right: 5px; /* Abstand zwischen Name und Badge */
}

.comment-body > p {
    flex-basis: 100%; /* Der Text darf die volle Breite einnehmen und bricht um */
    margin: 0; /* Entfernt Standard-Margin vom Paragraphen */
    padding-right: 25px; /* Sorgt dafür, dass langer Text nicht UNTER das Menü läuft */
}

.comment-body .post-menu-container {
    position: absolute;
    top: -5px; /* Etwas nach oben verschieben für besseres Aussehen */
    right: -5px; /* Etwas nach rechts verschieben */
}

.post-menu-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    border-radius: 50%;
    color: var(--text-color-light);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s; /* Sanfter Übergang */
}

.post-menu-button:hover {
    background-color: var(--background-color-hover);
    color: var(--text-color);
}

.post-menu-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    
    /* --- HIER IST DIE WICHTIGSTE ÄNDERUNG FÜR DEN MILCHGLAS-EFFEKT --- */
    background-color: rgba(45, 45, 45, 0.85); /* Halbtransparenter, dunkler Hintergrund */
    backdrop-filter: blur(10px); /* Der Unschärfe-Effekt */
    -webkit-backdrop-filter: blur(10px); /* Für Safari-Browser */
    
    border: 1px solid rgba(255, 255, 255, 0.1); /* Subtiler Rand */
    border-radius: 8px; /* Etwas rundere Ecken */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); /* Weicherer, tieferer Schatten */
    z-index: 10;
    width: 220px; /* Etwas breiter für mehr Platz */
    overflow: hidden;
    padding: 6px; /* Außenabstand für die Items */
}

.post-menu-dropdown.active {
    display: block;
}

.post-menu-item {
    display: flex;
    align-items: center;
    gap: 12px; /* Etwas mehr Abstand */
    background: none;
    border: none;
    color: #e0e0e0; /* Hellgrauer Text für besseren Kontrast */
    padding: 10px 12px;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 500;
    border-radius: 6px; /* Abgerundete Ecken für Hover */
    transition: background-color 0.2s, color 0.2s; /* Sanfter Übergang */
    
    /* Wichtig: Entfernt die alten Ränder */
    margin: 0;
    width: 100%; 
}

.post-menu-item i {
    width: 16px;
    text-align: center;
    color: var(--text-color-light);
    transition: color 0.2s;
}

.post-menu-item:hover {
    background-color: var(--primary-color);
    color: var(--primary-color-text);
}

.post-menu-item:hover i {
    color: var(--primary-color-text);
}


/* === Edit Containers === */
.edit-post-container, .edit-comment-container {
    margin-bottom: 10px;
}

.edit-textarea {
    width: 100%;
    min-height: 80px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 10px;
    font-family: inherit;
    font-size: 1em;
    background-color: var(--input-bg-color);
    color: var(--text-color);
    resize: vertical;
}

.edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 10px;
}

.edited-indicator {
    color: var(--text-color-light);
    font-size: 0.8em;
}


@media (max-width: 768px) {

    /* --- 1. Suchleiste und Filter untereinander anordnen --- */
    .search-and-filter-bar {
        flex-direction: column;
        align-items: stretch; 
        gap: 15px;
    }

    /* KORREKTUR: Wir zielen jetzt direkt auf die EINGABEFELDER, damit sie die volle Breite annehmen */
    .search-and-filter-bar input[type="search"],
    .search-and-filter-bar select {
        width: 100%;
    }

     .user-type-selector {
        grid-template-columns: 1fr;
    }


    /* --- 2. Komplette Kontakt-Karte untereinander anordnen --- */
    .request-item {
        flex-direction: column; 
        align-items: stretch;   
        gap: 20px;              
    }

    /* --- 3. Die Buttons innerhalb der Gruppe --- */
    .request-actions .btn,
    .request-actions .btn-secondary {
        flex-grow: 1;       
        text-align: center; 
    }

    /* Sorgt dafür, dass das Icon im Löschen-Button nicht den Klick "stiehlt" */
    .delete-button i {
        pointer-events: none;
    }
}

/* ==========================================================================
   115. MOBILE CHAT INPUT LAYOUT FIX (KORRIGIERTE VERSION)
   ========================================================================== */

@media (max-width: 768px) {

    /* 1. Container: Alles in einer Zeile, unten ausgerichtet */
    .chat-input-form {
        display: flex;
        flex-wrap: nowrap !important; 
        align-items: flex-end; 
        gap: 8px; 
        padding: 10px;
        margin-bottom: 0 !important; 
        /* Zusätzliche Absicherung gegen Abstände der .card Klasse */
        margin-top: 0 !important;
        background-color: var(--surface-color); 
    }

    /* 2. Büroklammer (Links) */
    .chat-input-form .btn-icon-upload {
        order: 1;
        margin: 0;
        width: 40px;
        height: 40px;
        flex-shrink: 0; /* Darf nicht kleiner werden */
        border: none; /* Rand entfernen für cleaneren Look */
    }

    /* 3. Textfeld (Mitte) - Nimmt den verfügbaren Platz */
    .chat-input-form textarea {
        order: 2;
        flex-grow: 1; 
        width: auto;
        margin: 0;
        min-height: 40px;
        max-height: 150px; /* Maximale Höhe bevor man scrollen muss */
        /* Wir reduzieren das Padding etwas, damit mehr Text reinpasst */
        padding: 10px; 
        resize: none; /* Deaktiviert das manuelle Ziehen */
        overflow-y: auto; /* Zeigt Scrollbar nur wenn max-height erreicht ist */
    }

    /* 4. Senden Button (Rechts) - Kompakt als Icon */
    .chat-input-form #send-message-button {
        flex-shrink: 0; /* Verhindert das Quetschen auf kleinen Bildschirmen */
        order: 3;
        width: 40px; /* Quadratisch */
        height: 40px;
        padding: 0;
        flex-shrink: 0;
        flex-grow: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0; /* Versteckt den Text "Senden" */
        border-radius: 50%; /* Rund sieht modern aus */
    }

    /* Fügt das Pfeil-Icon hinzu */
    .chat-input-form #send-message-button::after {
        content: '➤'; 
        font-size: 1.2rem;
        color: #1e1e1e; /* Dunkle Schrift auf goldenem Button */
        margin-left: 2px; /* Optische Korrektur */
    }

}
/* ==========================================================================
   116. MOBILE CHAT FULLSCREEN MODE (V3 - POSITION:FIXED METHODE)
   ========================================================================== */

@media (max-width: 850px) {

    /* Wenn unsere spezielle Klasse aktiv ist... */
    body.chat-view-active {
        /* ...verhindern wir das Scrollen der Seite dahinter. */
        overflow: hidden;
    }

    /* === HIER IST DIE FINALE KORREKTUR === */
    /* Wir verstecken den Header, den Copyright-Teil des Footers und den Support-Button */
    body.chat-view-active #main-header,
    body.chat-view-active #main-footer .container,
    body.chat-view-active .floating-support-btn {
        display: none !important;
    }
    
    /* NEU: Wir setzen den störenden Abstand des Footers auf Null, damit er nicht mehr schiebt */
    body.chat-view-active #main-footer {
        margin-bottom: 0;
        padding-bottom: 0 !important;
    }
    
    /* === HIER IST DIE MAGIE === */

    /* 1. Wir machen den Chat-Container zu einem Overlay, das den gesamten Bildschirm füllt. */
    body.chat-view-active .chat-container {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        /* 100dvh passt sich im Browser dynamisch an die Adressleiste an */
        height: 100dvh; 
        z-index: 999;
        box-sizing: border-box;
        /* Wir schieben die Eingabezeile mit Padding nach oben, damit sie genau über der Navigation (60px) sitzt */
        padding-bottom: calc(61px + env(safe-area-inset-bottom)) !important;
        margin-bottom: 0px !important;
    }

    /* 2. Wir stellen sicher, dass die untere Navigationsleiste ÜBER dem Chat-Overlay liegt. */
    body.chat-view-active .mobile-bottom-nav {
        z-index: 1001; /* Muss höher sein als der z-index vom Chat-Container */
    }
    
    /* Die restlichen Regeln sorgen für das Vollbild-Aussehen */
    body.chat-view-active .chat-container .card {
        border-radius: 0;
        border-left: none;
        border-right: none;
        box-shadow: none;
    }
    
    body.chat-view-active .chat-container .chat-header {
        padding-top: 15px; 
    }
}

/* === EMOJI REACTION STYLES === */

/* Die schwebende Bar (Kapsel) */
.emoji-reaction-bar {
    position: fixed;
    z-index: 10005;
    background: rgba(30, 30, 30, 0.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    padding: 8px 12px;
    display: flex;
    gap: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    animation: emojiPopIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes emojiPopIn {
    from { transform: scale(0.5) translateY(20px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}

.emoji-option {
    font-size: 1.6em;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    transition: transform 0.1s ease, background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

/* Markierung für das aktuell gewählte Emoji (wie WhatsApp) */
.emoji-option.selected {
    background: rgba(212, 175, 55, 0.3); /* Goldener Schimmer */
    border: 1px solid var(--primary-color);
}

.emoji-option:active {
    transform: scale(1.4);
}

/* Das kleine Badge an der Nachricht (INLINE VERSION) */
.message-reaction-badge {
    display: inline-flex; /* Wichtig: Sitzt in einer Zeile */
    align-items: center;
    vertical-align: middle; /* Vertikal zur Uhrzeit ausrichten */
    background: rgba(255, 255, 255, 0.05); /* Leichter Hintergrund */
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0px 5px;
    margin-right: 6px; /* Abstand zur Uhrzeit */
    font-size: 1em; /* Größe relativ zur Uhrzeit */
    cursor: pointer;
    transition: transform 0.1s ease;
}

.message-reaction-badge:active {
    transform: scale(1.2);
}

/* Spinner Fix: Wenn Button lädt, verstecke den Pfeil */
.chat-input-form #send-message-button.loading::after {
    display: none !important;
}

/* Spinner im Button zentrieren */
.chat-input-form #send-message-button .loading-spinner {
    margin: 0 !important; /* Entfernt jeglichen Abstand */
}

/* Schatten-Effekt für die Nachricht, wenn die Bar offen ist */
.message-bubble.reacting {
    filter: brightness(1.2);
    z-index: 10004;
}


/* ==========================================================================
   NEUER BLOCK: ADMIN ALGORITHMUS SLIDER STYLES
   ========================================================================== */

.slider-group {
    margin-bottom: 20px;
}

.slider-group label {
    display: block;
    font-weight: 700;
    color: var(--text-color-light);
    margin-bottom: 10px;
}

.slider-container {
    display: flex;
    align-items: center;
    gap: 15px;
}

.slider-container .slider-input {
    flex-grow: 1;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: #333;
    border-radius: 5px;
    outline: none;
    border: 1px solid var(--border-color);
}

.slider-container .slider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--primary-color);
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid var(--surface-color);
}

.slider-container .slider-input::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--primary-color);
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid var(--surface-color);
}

.slider-container .number-input {
    width: 80px;
    text-align: center;
    font-weight: 700;
    font-size: 1.1em;
    padding: 8px;
}
.factor-group-box {
    margin-top: 30px;
    padding: 20px;
    background-color: var(--background-color); /* Etwas dunkler als die Karten für einen Tiefeneffekt */
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}

.factor-group-box h5 {
    margin-top: 0;
    margin-bottom: 25px;
    color: var(--text-color);
}

/* Wir passen den Abstand innerhalb der Box an */
.factor-group-box .slider-group {
    margin-bottom: 25px;
    padding-bottom: 25px;
}
.factor-group-box .slider-group:last-of-type {
    margin-bottom: 0;
    padding-bottom: 0;
}
/* ==========================================================================
   117. IDENTITÄTS-VERIFIZIERUNGS-SIEGEL (FINALE, SPEZIFISCHE VERSION)
   ========================================================================== */

/* 1. Basis-Styling für das Siegel */
.identity-verification-seal {
    position: absolute;
    background-image: url('../bilder/verifizierung.png');
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 2;
    transition: all 0.2s ease-in-out;
}

/* 2. Zustand "unverified" (klickbar) */
.identity-verification-seal.unverified {
    filter: grayscale(1) brightness(0.7);
    opacity: 0.5;
    cursor: pointer;
}
.identity-verification-seal.unverified:hover {
    opacity: 1;
    filter: none;
}

/* 3. Zustand "verified" (nicht klickbar) */
.identity-verification-seal.verified {
    cursor: help;
}


/* === SPEZIFISCHE POSITIONIERUNG FÜR JEDE STELLE === */

/* A) Große Profil-Detailansicht (Avatar: 120px) */
.profile-detail-avatar-container {
    position: relative;
    width: 120px;
    height: 120px;
    flex-shrink: 0;
}
.profile-detail-avatar-container .identity-verification-seal {
    width: 32px;
    height: 32px;
    bottom: -2px;
    right: -2px;
}

/* B) Kleine Profil-Karten (Helden-Liste) (Avatar: 60px) */
.profile-card .profile-avatar-container { /* NEUER CONTAINER */
    position: relative;
    flex-shrink: 0;
}
.profile-card .profile-avatar-container .identity-verification-seal {
    width: 28px;
    height: 28px;
    bottom: -4px;
    right: -4px;
}

/* C) Job-Detail-Ansicht (Autor-Avatar: 50px) */
.avatar-container-medium {
    position: relative;
}
.avatar-container-medium .identity-verification-seal {
    width: 24px;
    height: 24px;
    bottom: -2px;
    right: -2px;
}

/* D) Job-Listen-Ansicht (Autor-Avatar: 45px - FIX: GRÖSSER GEMACHT) */
.avatar-container-small {
    position: relative;
    width: 45px; /* FIX: Von 35px auf 45px erhöht */
    height: 45px;
    border-radius: 50% !important;
    /* WICHTIG: overflow: hidden ENTFERNT! */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    flex-shrink: 0;
}
/* HINWEIS: Die alten Bild-Regeln wurden hier gelöscht, da sie jetzt zentral ganz unten im Dokument gesteuert werden! */

/* Light Mode Anpassung für den Avatar-Hintergrund */
body.light-theme .avatar-container-small {
    background-color: #ffffff !important;
}

.avatar-container-small .identity-verification-seal {
    width: 20px;
    height: 20px;
    bottom: -2px;
    right: -2px;
}

/* ==========================================================================
   MOBILE-ANPASSUNG FÜR ANGEBOTS-KARTEN
   ========================================================================== */

@media (max-width: 768px) {
    /* Wir zielen auf den Container der Angebots-Details (Name, Bild, etc.) */
    .request-item > div:first-child {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: flex-start;
    }

    /* Der Preis wird nun innerhalb dieses Containers positioniert */
    .request-item .request-actions {
        text-align: right;
    }

    /* Der Senden-Button wird versteckt */
    .discussion-area .comment-form .comment-submit-button {
        display: none;
    }

    /* Die Textarea nimmt die volle Breite ein */
    .discussion-area .comment-form .comment-input {
        border-radius: var(--border-radius); /* Wieder normale Ecken, da kein Button daneben ist */
    }
}
/* ==========================================================================
   LAYOUT-ANPASSUNG FÜR ANGEBOTS-KARTEN (V7 
   ========================================================================== */

@media (max-width: 768px) {
    /* Der Hauptcontainer der Angebots-Details wird umbrechbar */
    .request-item > div[style*="display: flex"] {
        flex-wrap: wrap;
    }

    /* Der Preis-Container: */
    .request-item .request-actions {
        flex-basis: 100%;       /* Nimmt die volle Breite ein und springt in die neue Zeile. */
        display: block;          /* WICHTIG: Überschreibt das "display: flex" der globalen Regel. */
        text-align: center;      /* JETZT FUNKTIONIERT DAS: Richtet den Preis mittig aus. */
        margin-top: 15px;        /* Abstand nach oben. */
    }

    /* Der Senden-Button wird versteckt */
    .discussion-area .comment-form .comment-submit-button {
        display: none;
    }

    /* Die Textarea nimmt die volle Breite ein */
    .discussion-area .comment-form .comment-input {
        border-radius: var(--border-radius);
    }
}

.job-card-top-right {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 5;
    display: flex;
    flex-direction: column; /* Ordnet die Elemente untereinander an */
    align-items: center;   /* Zentriert die Elemente horizontal */
    gap: 8px;              /* Abstand zwischen ID und Button */
}

.job-card-top-right .job-id {
    color: var(--text-color-light);
    font-size: 0.8em;
    font-weight: 700;
}

.job-card-top-right .delete-job-btn {
    /* Wir entfernen die absolute Positionierung vom Button selbst,
       da der Container jetzt die Positionierung übernimmt. */
    position: static; 
}

/* 1. Macht den Haupt-Chat-Header zum Ankerpunkt */
.chat-header.card {
    position: relative;
    z-index: 2; /* Hebt den gesamten Header eine Ebene nach oben */
}

/* 2. Positioniert den Menü-Container selbst oben rechts */
.chat-header #chat-menu-container {
    position: absolute;
    top: 15px; /* Abstand von oben */
    right: 15px; /* Abstand von rechts */
}

/* 3. Stellt sicher, dass das 3-Punkte-Icon immer sichtbar ist */
.chat-header #chat-menu-button {
    opacity: 1 !important;
}

/* 4. Positioniert das Dropdown-Menü relativ zu seinem Container und hebt es GANZ nach oben */
.chat-header #chat-menu-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 9999 !important; /* Extrem hoher Wert, der alles andere übersteuert */
}

/* 1. Macht den "Bearbeitet"-Text in der normalen gelben Bubble dunkler */
.message-bubble.sent .edited-indicator {
    color: #333; /* Ein dunkles Grau, das gut auf dem Gold lesbar ist */
    opacity: 0.8; /* Macht es etwas subtiler als die Uhrzeit */
}

/* 2. Stellt sicher, dass das Bearbeitungsfeld korrekte Farben hat */
.message-bubble.sent .edit-textarea {
    background-color: rgba(0, 0, 0, 0.1); /* Leicht dunklerer Hintergrund */
    color: #1e1e1e; /* Dunkle Schrift */
    border-color: rgba(0, 0, 0, 0.2); /* Etwas dunklerer Rand */
}

/* 3. Stellt sicher, dass die Buttons im Bearbeiten-Modus gut aussehen */
.message-bubble.sent .edit-actions .btn-secondary {
    background-color: rgba(0, 0, 0, 0.2);
    color: #fff; /* Helle Schrift für den dunklen Button */
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.message-bubble.sent .edit-actions .btn {
    background-color: #fff; /* Heller Button für "Speichern" */
    color: #1e1e1e; /* Dunkle Schrift */
}
.ticket-entry-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding-bottom: 5px;
    /* Wir geben dem Header jetzt eine Flex-Basis, um Platz zu schaffen */
    width: 100%;
}

.ticket-entry-header img,
.ticket-entry-header strong,
.ticket-entry-header .ticket-entry-type {
    /* Setzt den linken Block (Avatar, Name, Badge) */
    flex-shrink: 0;
}

/* Neuer Container für Zeitstempel und Menü (rechte Seite) */
.ticket-header-right {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-left: auto; /* Schiebt die rechte Gruppe an den rechten Rand */
    flex-shrink: 0;
}

/* Positioniert das Dropdown-Menü absolut, aber relativ zum .ticket-entry-header */
.ticket-entry-header .post-menu-container {
    position: static; /* Setze die Positionierung zurück */
}

.ticket-entry-header .post-menu-dropdown {
    position: absolute;
    top: 100%;          /* Positioniert es unter dem Header-Bereich */
    right: 0;           /* Rechtsbündig */
    z-index: 100;       /* Hält es im Vordergrund */
}
/* === 118. Melden/Blockieren Modal Styles === */

/* Der Listen-Container für die Optionen */
.report-block-options-list {
    display: flex;
    flex-direction: column;
    text-align: left;
}

/* Styling für jeden einzelnen Options-Button */
.report-block-option {
    position: relative; /* WICHTIG: Macht den Button zum Ankerpunkt für den Pfeil */
    width: 100%;
    padding: 14px 40px 14px 0; /* Padding: oben, rechts (Platz für Pfeil), unten, links */
    
    background-color: transparent;
    border: none;
    border-radius: 0;
    
    border-top: 1px solid var(--border-color);
    
    color: var(--text-color);
    font-size: 0.9em;
    font-weight: 500;
    cursor: pointer;
    text-align: left; /* Stellt sicher, dass der Text linksbündig ist */
    transition: color 0.2s;
}

/* Der ALLERERSTE Button in der Liste bekommt KEINE obere Trennlinie */
.report-block-option:first-child {
    border-top: none;
}

/* Hover-Effekt: Nur der Text wird jetzt golden, nicht der ganze Hintergrund */
.report-block-option:hover:not(:disabled) {
    color: var(--primary-color);
}

/* Styling für die deaktivierten Platzhalter-Buttons */
.report-block-option:disabled {
    color: var(--text-color-light);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Der Pfeil auf der rechten Seite (JETZT ABSOLUT POSITIONIERT) */
.report-block-arrow {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%); /* Das zentriert den Pfeil perfekt vertikal */
    
    color: var(--text-color-light);
    font-weight: bold;
    font-size: 1.2em;
    transition: color 0.2s;
}

/* Der Pfeil wird ebenfalls golden beim Hovern */
.report-block-option:hover:not(:disabled) .report-block-arrow {
    color: var(--primary-color);
}

/* NEU: Mauszeiger für herunterladbare Tabellenzeilen im Admin-Panel */
.admin-table .clickable-row-download {
    cursor: pointer;
}

/* Optional: Ein leichter Hover-Effekt, um es noch deutlicher zu machen */
.admin-table .clickable-row-download:hover {
    background-color: rgba(255, 255, 255, 0.05);
}
.admin-dashboard-filters .btn-secondary.active,
.admin-dashboard-filters .date-range-picker.active {
    background-color: var(--primary-color);
    color: #1e1e1e; /* Dunkle Schrift für besseren Kontrast auf hellem Grund */
    border-color: var(--primary-color);
    font-weight: 700;
}
/* Styling für den Footer Container, damit alles passt */
footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Wichtig für kleinere Bildschirme */
    gap: 20px; /* Abstand zwischen den Elementen */
}

/* Container für die Social Media Links */
.social-media-links {
    display: flex;
    gap: 15px; /* Abstand zwischen den Icons */
    align-items: center;
    /* Damit es sich in der Mitte zwischen Copyright und den Links positioniert */
    margin: 0 auto; 
}

/* Styling für die Social Media Icons selbst */
.social-icon {
    height: 24px; /* Eine gute Größe für Footer-Icons */
    width: 24px;
    transition: opacity 0.3s ease;
}

.social-icon:hover {
    opacity: 0.7; /* Kleiner Effekt, wenn man mit der Maus darüberfährt */
}

@media (max-width: 768px) {

    /* --- 1. Fix für die Antwort-Box (Radio Buttons & Senden) --- */
    .response-type-tabs {
        display: flex;
        flex-wrap: wrap; /* Erlaubt, dass Elemente in die nächste Zeile rutschen */
        gap: 10px;
    }

    /* Die Auswahl-Buttons (Öffentlich/Intern) sollen sich den Platz teilen */
    .response-type-tabs label {
        flex: 1; 
        text-align: center;
        white-space: nowrap;
    }

    /* Der Senden-Button wird von oben rechts "befreit" und kommt nach unten */
    #ticket-response-btn {
        position: static; /* WICHTIG: Hebt 'absolute' auf */
        width: 100%;      /* Volle Breite */
        margin-top: 5px;  /* Abstand nach oben */
    }

    /* --- 2. Fix für den Ticket-Header (Name, Badge, Zeit) --- */
    .ticket-entry-header {
        flex-wrap: wrap; /* Erlaubt Umbruch bei Platzmangel */
    }

    /* Der rechte Teil (Zeitstempel & Menü) rutscht in eine neue Zeile */
    .ticket-header-right {
        width: 100%;        /* Nimmt die volle Breite der neuen Zeile ein */
        margin-left: 0;     /* Entfernt 'auto' Margin */
        margin-top: 8px;    /* Abstand zum Namen */
        justify-content: space-between; /* Schiebt Zeit nach links, Menü nach rechts */
    }
    
    .ticket-entry-type {
        font-size: 0.7em;
        padding: 2px 6px;
    }

    /* --- 3. Fix für Ticket-Header (Titel & Status-Buttons) --- */
    .ticket-detail-header {
        flex-wrap: wrap; 
        gap: 15px;       
    }

    .ticket-detail-header h2 {
        width: 100%;     
        margin-bottom: 0; 
        line-height: 1.3; 
    }

    .ticket-status-selector {
        width: 100%;     
        display: flex;   
    }

    /* --- 4. Fix für Zuweisungs-Box (Mir zuweisen & Dropdown) --- */
    .ticket-assignment-box {
        flex-direction: column; /* Elemente untereinander stapeln */
        align-items: stretch;   /* Auf volle Breite ziehen */
        gap: 15px;              /* Abstand zwischen Text und Button */
        text-align: center;     /* Text zentrieren */
    }

    /* Der "Mir zuweisen" Button */
    .assign-ticket-btn {
        width: 100%;            /* Button nimmt volle Breite ein */
        margin-top: 5px;
    }

    /* Der Bereich mit Avatar und Name (wenn bereits zugewiesen) */
    .assignee-info {
        justify-content: center; /* Zentriert Avatar und Name */
        width: 100%;
        margin-bottom: 5px;
    }

    /* Der Container für Label und Dropdown */
    .assignee-actions {
        display: flex;
        flex-direction: column; /* Label über das Dropdown schieben */
        align-items: flex-start; /* Linksbündig */
        gap: 8px;
        width: 100%;
    }

    /* Das Dropdown-Menü selbst */
    .ticket-assignment-box .assignee-actions select {
        width: 100%;            /* Volle Breite */
        margin-left: 0 !important; /* Entfernt den Abstand nach links vom Desktop-Layout */
        padding: 10px;          /* Größeres Padding für Touch-Bedienung */
    }
}

/* --- 119. E-MAIL MARKETING UI --- */

/* Der gestrichelte Container für die Suche */
#email-individual-container {
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px dashed var(--border-color);
    border-radius: var(--border-radius);
    padding: 15px;
    margin-bottom: 20px;
}

/* Das Suchfeld selbst */
#email-user-search {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    font-size: 1em;
    padding: 10px;
    border-radius: var(--border-radius);
    width: 100%;
}

/* Die Liste der Suchergebnisse */
#email-user-search-results {
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    max-height: 200px;
    overflow-y: auto;
    background-color: var(--surface-color);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* Ein einzelnes Suchergebnis */
.email-search-result-item {
    padding: 10px 15px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 0.9em;
}

.email-search-result-item:last-child {
    border-bottom: none;
}

.email-search-result-item:hover {
    background-color: #333;
}

/* Die ausgewählten User-Tags */
#email-selected-users {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 15px;
}

/* Das Tag selbst (grün) */
#email-selected-users .admin-status-badge {
    background-color: #2ecc71; /* Grün */
    color: #1e1e1e; /* Dunkle Schrift */
    padding: 6px 12px;
    border-radius: 20px; /* Pillenform */
    font-size: 0.9em;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Das X zum Entfernen */
.remove-email-user {
    cursor: pointer;
    font-weight: bold;
    font-size: 1.1em;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.remove-email-user:hover {
    opacity: 1;
}

/* ==========================================================================
   120. ONBOARDING SPRACHAUSWAHL (FINAL FIX)
   ========================================================================== */

/* Container: Exakt 3 Spalten, zentriert */
.language-grid-onboarding {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 25px;
    margin-bottom: 10px;
    /* Damit es nicht zu hoch wird, aber alles zeigt */
    max-height: 60vh; 
    overflow-y: auto;
    padding: 5px;
}

/* Button-Design: 1-zu-1 Kopie vom Dashboard (.language-btn) */
.lang-option-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    
    /* Feste Breite für das Grid-Feeling, aber flexibel */
    width: 30%; 
    min-width: 120px;
    justify-content: center;

    background-color: #333;
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 20px; /* Pillen-Form wie im Dashboard */
    padding: 8px 10px;
    font-size: 0.9em;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.lang-option-btn:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--surface-color);
}

.lang-option-btn.active {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--surface-color);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

/* --- Download Button im Chat --- */
.message-download-btn {
    color: inherit; /* Übernimmt die Farbe der Uhrzeit */
    text-decoration: none;
    margin-right: 8px;
    font-size: 1.2em;
    opacity: 0.7;
    transition: opacity 0.2s, transform 0.1s;
    display: inline-block;
    vertical-align: middle;
}

.message-download-btn:hover {
    opacity: 1;
    color: var(--primary-color-hover) !important;
    transform: scale(1.1);
}

/* Mobile: 2 Spalten */
@media (max-width: 600px) {
    .lang-option-btn {
        width: 45%;
    }
}

/* === FIX: STICKY FOOTER (Footer immer unten halten) === */

/* 1. Stellt sicher, dass HTML und Body die volle Höhe nutzen können */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* 2. Der Haupt-Container (#app) wird zur Flexbox über die volle Höhe */
#app {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Mindestens 100% der Bildschirmhöhe */
}

/* 3. Der Inhalt (#main-content) wächst und drückt den Footer nach unten */
#main-content {
    flex: 1; /* Wächst automatisch, um den leeren Platz zu füllen */
    width: 100%; /* Sicherheitshalber volle Breite */
}

/* 4. Der Footer bleibt so groß wie er ist und schrumpft nicht */
#main-footer {
    flex-shrink: 0;
    width: 100%;
    margin-top: auto; /* Zusätzliche Sicherheit, drückt ihn nach unten */
}
/* === MOBILE OPTIMIERUNG: HEADER-TEXTE AUSBLENDEN === */
@media (max-width: 768px) {
    
    /* 1. Jobs & Helden Bereich */
    /* Blendet H1 (Titel) und P (Untertitel) standardmäßig aus (für eingeloggte User) */
    /* FIX: Das '>' sorgt dafür, dass nur direkte Texte versteckt werden, NICHT der Ort in den Karten! */
    .job-list-header > h1,
    .job-list-header > p {
        display: none !important;
    }

    /* FIX: Für GÄSTE in der Hero-Sektion blenden wir den Text wieder ein */
    .landing-hero-section .job-list-header > h1,
    .landing-hero-section .job-list-header > p {
        display: block !important;
    }

    /* Reduziert den Abstand des Containers, damit der Filter hoch rutscht */
    .job-list-header {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
        min-height: 0 !important;
        margin-bottom: 10px !important;
    }

     /* 2. Community Bereich */
    .feed-header h1,
    .feed-header p {
        display: none !important;
    }

    .feed-header {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
        min-height: 0 !important;
        margin-bottom: 10px !important;
    }

    /* 3. Postfach & Feed Bereich */
    /* Feed-Überschriften ausblenden */
    .feed-header h1,
    .feed-header p {
        display: none !important;
    }

    /* WICHTIG: Nur im Postfach (erkennbar an .inbox-list) den Header/Link ausblenden */
    .container:has(.inbox-list) > .back-link,
    .container:has(.inbox-list) .dashboard-header {
        display: none !important;
    }

    /* Reduziert den oberen Abstand des Containers im Postfach und Feed für Mobile */
    .container:has(.inbox-list),
    .container:has(.create-post-card) {
        padding-top: 10px !important;
    }
}
/* === BUGFIX: FOOTER AUF MOBILE SICHTBAR MACHEN === */
@media (max-width: 850px) {
    #main-footer {
        /* Dieser Abstand ist so hoch wie die Navigationsleiste + Puffer */
        padding-bottom: 100px !important; 
    }

    /* --- Job-Diskussion: Senden-Icon im Textfeld --- */
    .discussion-area .comment-form .discussion-submit-btn.btn {
        display: none !important; /* Verstecke den Gold-Button auf Mobile */
    }

    .discussion-area .comment-submit-icon-btn {
        display: flex !important; /* Zeige das Icon auf Mobile */
        position: absolute;
        right: 5px;
        bottom: 5px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 5px;
        z-index: 5;
    }

    .discussion-area .comment-submit-icon-btn img {
        width: 24px;
        height: 24px;
        object-fit: contain;
    }

    .discussion-area .comment-input {
        padding-right: 40px !important; /* Platz für das Icon lassen */
    }
}

/* Desktop-Standard: Icon verstecken */
.comment-submit-icon-btn {
    display: none;
}


/* ==========================================================================
   GLOBALER FIX: UMFRAGE-LAYOUT (Text & Schalter Ausrichtung)
   ========================================================================== */

.poll-setting-row {
    display: flex !important;
    justify-content: space-between !important; /* Drückt Text nach links und Schalter nach rechts */
    align-items: center !important; /* Zentriert den Schalter vertikal exakt zur Mitte des Textes */
    width: 100%;
    margin-bottom: 20px; /* Etwas mehr Abstand zwischen den Zeilen */
}

/* Der Text-Container links */
.poll-setting-row > div:first-child {
    text-align: left;
    padding-right: 20px; /* Wichtig: Abstand, damit Text nicht in den Schalter läuft */
    flex-grow: 1; /* Nimmt den Platz ein */
}

/* Der Schalter rechts */
.poll-switch {
    flex-shrink: 0; /* Verhindert, dass der Schalter gequetscht wird */
    margin: 0;      /* Entfernt störende Außenabstände */
    position: relative;
    top: 0;         /* Setzt eventuelle Verschiebungen zurück */
}

/* Optional: Label-Text immer fett, damit er synchron wirkt */
.poll-setting-label {
    font-weight: 600;
    display: block;
}
/* ==========================================================================
   FIXES V8: UMFRAGE BUTTONS & CHAT POPUP (MOBILE)
   ========================================================================== */

/* 1. Umfrage-Modal Footer (Buttons nebeneinander) */
.poll-modal-footer {
    display: flex;
    justify-content: flex-end; /* Rechtsbündig auf Desktop */
    gap: 10px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color); /* Nutzt die variable Farbe */
}

/* Speziell für Mobile: Buttons teilen sich den Platz */
@media (max-width: 600px) {
    .poll-modal-footer {
        justify-content: space-between; /* Verteilt auf volle Breite */
    }
    .poll-modal-footer button {
        flex: 1; /* Beide Buttons sind gleich groß */
        justify-content: center;
    }
}

/* 2. Chat Popup Fix (Z-Index Logik) */
/* Wenn das Action-Sheet im Chat offen ist, schieben wir die Navigationsleiste
   in den Hintergrund, damit das Sheet darüber liegen kann. */
body.action-sheet-open .mobile-bottom-nav {
    z-index: 900 !important; /* Weniger als der Chat-Container (999) */
}

/* ==========================================================================
   FIX V10: FORMULAR-LAYOUT SAUBER (Aufgaben & Umfrage) - KORRIGIERT
   ========================================================================== */

/* 1. Container auf Linksbündigkeit und volle Breite setzen */
.poll-creator-modal {
    text-align: left; 
    width: 100%;
    box-sizing: border-box;
}

/* 2. Eingabefelder auf volle Breite ziehen & Styling anpassen */
.poll-creator-modal input[type="text"],
.task-item-input {
    width: 100%;
    box-sizing: border-box;
    display: block;
    margin-bottom: 15px;
    background-color: #2a2a2a; 
    border: 1px solid #444;    
    color: #fff;               
    border-radius: 8px;        
    padding: 12px;
    font-size: 1em;
    outline: none;
}
.poll-creator-modal input:focus {
    border-color: var(--primary-color);
}

/* 3. Die Zeile mit dem Schalter (Flexbox reparieren) */
.poll-setting-row {
    display: flex !important;
    justify-content: space-between !important; /* Text links, Schalter rechts */
    align-items: center !important; /* Vertikal mittig */
    width: 100%;
    margin-bottom: 20px;
    border-top: 1px solid #333; /* Trennlinie oben für bessere Optik */
    padding-top: 15px;
}

/* Der Textbereich neben dem Schalter */
.poll-setting-row > div:first-child {
    padding-right: 20px; 
    flex-grow: 1;
}

/* Der Schalter selbst */
.poll-switch {
    flex-shrink: 0; 
    margin: 0;
}

/* Footer Buttons Styling */
.poll-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: none; /* Doppelten Border vermeiden */
}

/* 4. Footer Buttons */
.poll-modal-footer {
    display: flex;
    justify-content: flex-end; /* Rechtsbündig */
    gap: 10px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
}
/* ==========================================================================
   FIX V11: EINGABEFELDER & SCHALTER DESIGN (1:1 COPY)
   ========================================================================== */

/* 1. Eingabefelder dunkel und rund machen (wie bei Umfrage) */
.poll-creator-modal input[type="text"],
.task-item-input {
    background-color: #2a2a2a !important; /* Dunkles Grau */
    border: 1px solid #444 !important;     /* Dunkler Rand */
    color: #fff !important;                /* Weiße Schrift */
    border-radius: 8px !important;         /* Runde Ecken */
    padding: 12px !important;              /* Innenabstand */
    font-size: 1em !important;
    outline: none !important;
    margin-bottom: 10px !important;
}

.poll-creator-modal input:focus {
    border-color: var(--primary-color) !important;
}

/* 2. Schalter (Toggle) reparieren */
.poll-creator-modal .poll-switch {
    position: relative !important;
    display: inline-block !important;
    width: 50px !important;
    height: 26px !important;
}

.poll-creator-modal .poll-switch input {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

/* Der Slider selbst */
.poll-creator-modal .poll-slider {
    position: absolute !important;
    cursor: pointer !important;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #444 !important; /* Aus-Zustand */
    transition: .4s !important;
    border-radius: 34px !important;
}

.poll-creator-modal .poll-slider:before {
    position: absolute !important;
    content: "" !important;
    height: 20px !important;
    width: 20px !important;
    left: 3px !important;
    bottom: 3px !important;
    background-color: white !important;
    transition: .4s !important;
    border-radius: 50% !important;
}

/* An-Zustand (Gold) */
.poll-creator-modal input:checked + .poll-slider {
    background-color: var(--primary-color) !important;
}

.poll-creator-modal input:checked + .poll-slider:before {
    transform: translateX(24px) !important;
}

/* 3. Text im Modal anpassen */
.poll-creator-modal h3, 
.poll-creator-modal label {
    color: #fff !important; /* Weiße Schrift für Titel und Labels */
}


/* ==========================================================================
   121. UPGRADE TO COMPANY BUTTON STYLE (GREEN)
   ========================================================================== */
#upgrade-to-company-btn {
    background-color: transparent;
    border: 2px solid #2ecc71; /* Frisches Grün */
    color: #2ecc71;
    font-weight: 800;
    transition: all 0.3s ease;
}

#upgrade-to-company-btn:hover {
    background-color: #2ecc71;
    color: #ffffff; /* Weiße Schrift auf grünem Grund */
    box-shadow: 0 0 20px rgba(46, 204, 113, 0.4); /* Grüner Schein */
    transform: translateY(-2px);
    border-color: #2ecc71;
    text-decoration: none;
}
/* === LANDING PAGE & CHAT NAVIGATOR (FINAL CLEAN VERSION) === */

/* 1. Den doppelten Text in der unteren Jobliste verstecken */
.landing-page-mode #landing-job-list .job-list-header h1,
.landing-page-mode #landing-job-list .job-list-header p {
    display: none !important;
}

/* 2. Die Hero-Sektion (James Cameron Vibe) */
.landing-hero-section {
    position: relative;
    padding: 60px 20px 100px 20px;
    background: 
        linear-gradient(to bottom, transparent 70%, var(--background-color) 100%),
        radial-gradient(circle at top right, rgba(0, 128, 128, 0.2), transparent), 
        radial-gradient(circle at bottom left, rgba(212, 175, 55, 0.08), transparent);
    background-color: var(--background-color);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 550px;
    width: 100%;
}

/* 3. Container für den Chat Navigator (Zentrierung erzwingen) */
.chat-navigator-container {
    width: 100%;
    max-width: 650px;
    margin: 0 auto !important; /* Wichtig für die horizontale Zentrierung */
    z-index: 10;
}

@media (max-width: 850px) {
    #archive-load-btn {
        width: 100%;
        margin-top: 10px; /* Erzeugt den gewünschten Abstand zum Dropdown */
    }
}

.glass-chat-box {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    transition: all 0.5s ease;
}

.chat-bubble-guide {
    color: #fff;
    font-size: 1.1em;
    line-height: 1.5;
    margin-bottom: 25px;
    transition: opacity 0.3s ease;
}

.chat-options-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chat-option-btn {
    background: rgba(212, 175, 55, 0.05);
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: var(--text-color);
    padding: 14px 20px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    text-align: left;
}

.chat-option-btn:hover {
    background: rgba(212, 175, 55, 0.15);
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateX(5px);
}

.cta-button-gold {
    background: linear-gradient(135deg, var(--primary-color), #b8860b);
    color: #1e1e1e;
    padding: 16px 32px;
    border-radius: 12px;
    font-weight: 800;
    text-decoration: none;
    display: inline-block;
    margin-top: 10px;
    box-shadow: 0 0 25px rgba(212, 175, 55, 0.4);
    text-transform: uppercase;
    text-align: center;
}

.cta-button-gold:hover {
    transform: scale(1.02);
    box-shadow: 0 0 35px rgba(212, 175, 55, 0.6);
}


.guide-upgrade-info {
    font-size: 0.85em;
    color: var(--text-color-light);
    margin-top: 20px;
    font-style: italic;
}

@keyframes pulseGold {
    0% { box-shadow: 0 0 15px rgba(212, 175, 55, 0.3); }
    50% { box-shadow: 0 0 30px rgba(212, 175, 55, 0.6); }
    100% { box-shadow: 0 0 15px rgba(212, 175, 55, 0.3); }
}

.phase-transition {
    animation: slideIn 0.5s ease-out;
}

@keyframes slideIn {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 850px) {
    .landing-hero-section { padding: 40px 15px 80px 15px; min-height: 400px; }
    .chat-bubble-guide { font-size: 1em; }
    .chat-navigator-container { max-width: 100%; }
}

/* === GLOBALER MASTER-FIX 2.0: ACTION SHEETS (PULL-UP MENÜS) === */

/* FIX: Verhindert, dass das Menü ans Ende der Seite rutscht, wenn Transformationen aktiv sind */
body:has(.action-sheet.active) #main-content {
    transform: none !important;
    will-change: auto !important;
}

/* 1. Das dunkle Overlay (Hintergrund) */
.action-sheet-overlay {
    display: none !important;
}
.action-sheet-overlay.active {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.7) !important;
    z-index: 9998 !important;
}

/* 2. Die Menü-Leiste (Basis-Zustand) */
.action-sheet {
    display: none !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: #1a1a1a !important;
    z-index: 9999 !important;
    box-sizing: border-box !important;
    padding: 25px 20px !important;
    flex-direction: column !important; /* Zwingt Titel ÜBER die Icons */
    align-items: center !important;
}

/* 3. Der Titel (Überschrift) */
.action-sheet-header {
    width: 100% !important;
    text-align: center !important;
    margin-bottom: 20px !important;
    font-weight: 800 !important;
    font-size: 1.2em !important;
    color: #fff !important;
}

/* 4. Zustand: AKTIV am PC / Desktop (Einfach unten am Bildschirm) */
.action-sheet.active {
    display: flex !important;
    bottom: 0 !important; 
    border-top-left-radius: 25px !important;
    border-top-right-radius: 25px !important;
    box-shadow: 0 -10px 30px rgba(0,0,0,0.5) !important;
    animation: actionSheetSlideUp 0.3s ease-out !important;
}

/* 5. Zustand: AKTIV auf Mobile (Über der Navigation) */
@media (max-width: 850px) {
    .action-sheet.active {
        bottom: calc(60px + env(safe-area-inset-bottom)) !important;
        border-radius: 20px !important; 
        width: 95% !important;
        left: 2.5% !important;
        margin-bottom: 10px !important;
    }
}

@keyframes actionSheetSlideUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.action-sheet-options {
    display: flex !important;
    justify-content: space-around !important;
    width: 100% !important;
}
/* --- STATUS INDIKATOR (ONLINE/OFFLINE) --- */
.avatar-container-medium {
    position: relative;
    width: 50px; /* DEIN ORIGINAL */
    height: 50px;
    border-radius: 50% !important;
    /* WICHTIG: overflow: hidden ENTFERNT! */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    flex-shrink: 0;
}
/* HINWEIS: Die alte Bild-Regel wurde hier gelöscht, da sie jetzt zentral ganz unten im Dokument gesteuert wird! */

.status-indicator {
    position: absolute;
    bottom: 2px;
    left: 2px; /* Geändert auf LINKS, damit es nicht mit dem Siegel kollidiert */
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--surface-color); /* Weißer Rand für Kontrast */
    z-index: 10;
}

.status-indicator.online {
    background-color: #2ecc71; /* Grün */
    box-shadow: 0 0 4px rgba(46, 204, 113, 0.5); /* Leichter Glow */
}

.status-indicator.offline {
    background-color: #e74c3c; /* Rot */
}


/* ==========================================================================
   122. INBOX PRO STYLES (PLUS BUTTON & DELETE MODE)
   ========================================================================== */

/* Verstecke Mülleimer standardmäßig */
.conversation-item .delete-conversation-btn {
    display: none;
}

/* Zeige Mülleimer nur im Lösch-Modus */
.inbox-list.delete-mode-active .conversation-item .delete-conversation-btn {
    display: flex;
}

/* Grüner schwebender Button - Identisch zum Support-Button positioniert */
.inbox-action-btn {
    position: fixed !important; /* Zwingt den Button im Sichtfeld zu bleiben */
    bottom: 20px; 
    right: 20px;
    width: 60px;
    height: 60px;
    background-color: #2ecc71;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    border: none;
    cursor: pointer;
    z-index: 9999; /* Maximaler Z-Index wie Top-Navigation */
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.2s;
}

/* Hover & Klick Effekte */
.inbox-action-btn:hover {
    background-color: #27ae60;
    transform: scale(1.05);
}
.inbox-action-btn:active {
    transform: scale(0.95);
}

/* Zustand wenn Lösch-Modus aktiv (X) */
.inbox-action-btn.active {
    background-color: #e74c3c;
    transform: rotate(135deg);
    box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4);
}

/* Mobile Positionierung (über der Navigationsleiste) */
@media (max-width: 850px) {
    .inbox-action-btn {
        bottom: 90px; /* Exakt wie der Hilfe-Button */
    }
}

/* Kontaktliste im Modal */
.contact-selection-list {
    max-height: 400px;
    overflow-y: auto;
    margin-top: 15px;
    text-align: left;
}
.contact-selection-item {
    display: flex;
    align-items: center;
    padding: 12px;
    cursor: pointer;
    border-radius: var(--border-radius);
    transition: background 0.2s;
}
.contact-selection-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* === GRUPPEN-CHAT DESIGN FIX (Erweitert) === */

/* System-Nachrichten (z.B. "Gruppe erstellt") */
.system-message-container {
    display: flex;
    justify-content: center;
    margin: 15px 0;
    width: 100%;
}

.system-message {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--text-color-light);
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 0.85em;
    text-align: center;
}

/* Layout für empfangene Gruppennachrichten */
.group-message-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 10px;
    align-self: flex-start;
    max-width: 80%;
}

.group-sender-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    margin-bottom: 2px;
}

.message-bubble.group-received {
    border-bottom-left-radius: 4px;
    max-width: 100%; 
}

.group-sender-name {
    display: block;
    font-size: 0.85em;
    font-weight: 700;
    margin-bottom: 4px;
}

/* --- DAS HIER FEHLTE WAHRSCHEINLICH ODER WAR ZU SCHWACH --- */

/* Der klappbare Info-Bereich */
.group-info-collapsible {
    background-color: var(--surface-color);
    border-bottom: 1px solid var(--border-color);
    padding: 15px 20px;
    font-size: 0.95em;
    color: var(--text-color);
    
    /* WICHTIG: Standardmäßig versteckt, aber animierbar */
    display: none; 
    overflow: hidden;
}

.group-info-collapsible.open {
    display: block;
    animation: slideDown 0.3s ease-out;
}

/* Styling für die Mitglieder-Liste im Header */
.group-member-tag {
    display: inline-flex;
    align-items: center;
    background-color: #333;
    padding: 4px 10px;
    border-radius: 15px;
    margin-right: 5px;
    margin-bottom: 5px;
    font-size: 0.9em;
    border: 1px solid var(--border-color);
}

/* Der Pfeil neben dem Gruppennamen */
#toggle-group-info i {
    transition: transform 0.3s ease;
}

/* Wenn das Info-Panel offen ist, dreht sich der Pfeil */
.chat-header:has(+ .group-info-collapsible.open) #toggle-group-info i {
    transform: rotate(180deg);
}

/* Styles für das Gruppen-Bearbeiten Modal */
.poll-creator-modal label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: var(--text-color);
}

.poll-creator-modal input[type="text"] {
    width: 100%;
    padding: 10px;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    background-color: #2a2a2a;
    color: white;
    margin-bottom: 15px;
}

/* Die Liste der Mitglieder im Bearbeiten-Modal */
.poll-creator-modal div[style*="max-height"] {
    background-color: #222 !important; /* Etwas heller als Hintergrund */
    border: 1px solid var(--border-color);
}

.poll-creator-modal label[style*="display:flex"] {
    border-bottom: 1px solid #333;
    padding: 10px !important;
    margin-bottom: 0;
}
.poll-creator-modal label[style*="display:flex"]:last-child {
    border-bottom: none;
}
.poll-creator-modal label[style*="display:flex"]:hover {
    background-color: #333;
}

/* ==========================================================================
   123. ACTIVITIES VIEW & GLOBAL MOBILE UI FIXES
   ========================================================================== */

/* --- A) Activities View (Benachrichtigungen) --- */

.activities-page-container {
    max-width: 800px !important;
    padding-top: 40px;
    padding-bottom: 120px;
    min-height: 80vh;
}

/* Gelber Flash-Effekt für neue Items */
.flash-item {
    background-color: rgba(241, 196, 15, 0.15) !important;
    transition: background-color 3s ease-in-out;
}
.flash-off {
    background-color: var(--surface-color) !important;
}

/* Zwingt alle Items auf die App-Hintergrundfarbe (Entfernt Grün) */
#activity-list-container .conversation-item,
#activity-list-container .conversation-item .conversation-status-box,
#activity-list-container .conversation-item .conversation-main-link {
    background-color: var(--surface-color) !important;
    background: var(--surface-color) !important;
}

/* Text in Benachrichtigungen voll anzeigen, nicht abschneiden */
#activity-list-container .conversation-preview {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    display: block !important;
    line-height: 1.4;
}

/* Markierung für Ungelesenes (Goldener Rand) */
#activity-list-container .conversation-item.unread {
    border-left: 3px solid #f1c40f; 
}

/* Mülleimer-Logik (Standardmäßig versteckt, im Modus sichtbar) */
#activity-list-container .delete-notification-btn { 
    display: none; 
}
#activity-list-container.delete-mode-active .delete-notification-btn { 
    display: flex; 
}
#activity-list-container.delete-mode-active .timestamp { 
    display: none; 
}

/* --- B) Global Mobile UI Fixes (Z-Index Ebenen) --- */

/* 1. Footer-Sperre aufheben, damit Kinder (Nav) frei schweben können */
#main-footer {
    position: static !important;
    z-index: auto !important;
}

/* 2. Die Navigation ganz unten ist der absolute King */
.mobile-bottom-nav {
    position: fixed !important;
    z-index: 30000 !important; 
}

/* 3. Das schwarze Profil-Menü liegt über dem Inhalt */
.mobile-nav-menu {
    z-index: 25000 !important; 
    background-color: rgba(0, 0, 0, 0.95) !important;
}

/* 4. Der Footer-Inhalt (Links, Social Media) nach hinten */
#main-footer .container {
    position: relative !important;
    z-index: 1 !important; 
}

/* 5. FIX: Schwebende Buttons müssen FIXED bleiben, damit sie rechts unten sitzen! */
.floating-support-btn, 
.inbox-action-btn, 
#activities-main-action-btn {
    position: fixed !important; /* WICHTIG: Zurück auf Fixed */
    z-index: 1 !important; /* Aber hinter das Menü (25000) */
}

/* ==========================================================================
   124. PAGE TRANSITION & PROGRESS BAR (Premium UX - V2 Directional)
   ========================================================================== */

#page-progress-bar {
    position: fixed;
    top: 90px;
    width: 0;
    height: 2px;
    box-shadow: 0 0 15px rgba(241, 196, 15, 0.7);
    z-index: 1100;
    transition: width 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s ease;
    pointer-events: none;
    opacity: 0;
}

/* Richtung: Von Links nach Rechts (Standard) */
#page-progress-bar.ltr {
    left: 0;
    right: auto;
    background: linear-gradient(90deg, rgba(212, 175, 55, 0) 0%, rgba(212, 175, 55, 1) 50%, #f1c40f 100%);
    border-radius: 0 4px 4px 0;
}

/* Richtung: Von Rechts nach Links */
#page-progress-bar.rtl {
    right: 0;
    left: auto;
    background: linear-gradient(270deg, rgba(212, 175, 55, 0) 0%, rgba(212, 175, 55, 1) 50%, #f1c40f 100%);
    border-radius: 4px 0 0 4px;
}

/* Der glühende Kopf des Strahls */
#page-progress-bar::after {
    content: '';
    position: absolute;
    top: -2px;
    width: 20px;
    height: 6px;
    background: #fff;
    filter: blur(4px);
    opacity: 0.5;
    border-radius: 50%;
}

/* Kopf-Position je nach Richtung */
#page-progress-bar.ltr::after { right: 0; left: auto; }
#page-progress-bar.rtl::after { left: 0; right: auto; }

@keyframes shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* Container für den sanften Fade-In */
.view-transitioning {
    opacity: 0 !important;
    transform: translateY(10px); 
    transition: none !important;
}

.view-fade-in {
    opacity: 1 !important;
    transform: translateY(0);
    /* KORREKTUR: Dauer auf 0.8s erhöht für ein sehr edles Einblenden */
    transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

/* Mobile Korrektur für Progress Bar */
@media (max-width: 850px) {
    #page-progress-bar {
        top: 155px; /* Exakt unter der mobilen Suchleiste */
    }
}

/* ==========================================================================
   127. FINALER AUFGABEN-MODAL FEINSCHLIFF (TITEL & CLOSE BTN)
   ========================================================================== */

/* 1. Titel der Aufgabenliste zentrieren */
.poll-creator-modal h3 {
    text-align: center !important;
    padding-right: 0 !important; /* Entfernt das alte Padding, das für das X gedacht war */
    margin-top: 10px !important;
}

/* 2. Schließen-Kreuz (X) sauber in die Box rücken */
#modal-close-x-btn {
    top: 15px !important;
    right: 15px !important;
    background-color: transparent !important;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#modal-close-x-btn:hover {
    background-color: rgba(0,0,0,0.05) !important; /* Leichter Hover-Effekt */
}

/* --- 112. 3D SWIPE ANIMATION STYLES --- */

/* Der Container muss relativ sein für absolute Kinder */
.job-detail-wrapper {
    position: relative;
    width: 100%;
    min-height: 100vh; /* Volle Höhe */
    overflow-x: hidden;
}

/* Die Hauptkarte (Aktuell) */
.job-detail-card-current,
.profile-detail-card-current {
    position: relative;
    width: 100%;
    background-color: var(--background-color);
    z-index: 10;
    transform-origin: 50% 100%; /* Dreht sich von unten wie ein Blatt */
    box-shadow: 0 0 20px rgba(0,0,0,0.5); /* Schatten für Tiefe */
    will-change: transform, opacity;
}

/* Die Hintergrund-Karte (Vorschau nächste/vorherige) */
.job-detail-card-next,
.job-detail-card-prev,
.profile-detail-card-next,
.profile-detail-card-prev {
    position: fixed; /* Fest im Hintergrund */
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5; /* Hinter der aktuellen Karte */
    transform: scale(0.92); /* Kleiner, damit es "dahinter" aussieht */
    opacity: 0.5; /* Dunkler/Transparenter */
    pointer-events: none; /* Keine Klicks möglich */
    background-color: var(--surface-color); /* Farbe der Karte */
    border-radius: var(--border-radius);
    
    /* FIX: Layout Anpassung an die echte Karte */
    padding-top: 140px; /* Erhöht von 80px auf 140px, um unter dem Header zu starten */
    box-sizing: border-box; /* Wichtig, damit Padding die 100% Höhe nicht sprengt */
    
    transition: transform 0.1s linear, opacity 0.1s linear;
    
    display: flex;
    flex-direction: column; /* Stapelt Elemente untereinander */
    justify-content: flex-start; /* Beginnt OBEN statt in der Mitte des Screens */
    align-items: center; /* Zentriert Elemente horizontal */
}

/* Vorschau-Content Styles */
.swipe-preview-content {
    text-align: center;
    padding: 20px;
    opacity: 0.7;
}
.swipe-preview-title {
    font-size: 1.5em;
    font-weight: 700;
    margin-top: 15px;
    color: var(--text-color);
}
.swipe-preview-image {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--primary-color);
}

/* --- Job Detail Header Navigation (Back & Favorite) --- */
.job-detail-top-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: calc(var(--spacing-unit) * 3);
}

/* Der Zurück-Link braucht keinen Margin mehr nach unten, das macht der Container */
.job-detail-top-nav .back-link {
    margin-bottom: 0;
}

.favorite-job-detail-btn {
    background-color: var(--surface-color);
    border: 1.5px solid #e74c3c; /* Permanente rote Umrandung */
    color: #e74c3c !important; /* Herz jetzt ebenfalls rot */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 1.4em;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 
}

.favorite-job-detail-btn:hover {
    transform: scale(1.1);
    background-color: var(--surface-color);
    color: #e74c3c; /* Herz wird rot beim Hover */
    box-shadow: 0 0 12px rgba(231, 76, 60, 0.4); /* Roter Schatten beim Hover */
}

.favorite-job-button.favorited,
.favorite-job-detail-btn.favorited {
    background-color: #e74c3c !important; 
    color: #ffffff !important; /* Weißes Herz auf rotem Grund */
    border-color: #e74c3c !important;
    box-shadow: 0 0 15px rgba(231, 76, 60, 0.5);
    opacity: 1 !important;
}

.favorite-job-detail-btn.favorited:hover {
    background-color: #c0392b !important;
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(231, 76, 60, 0.6);
}

/* Optional: Hover-Effekt für den aktiven Zustand */
.favorite-job-detail-btn.favorited:hover {
    background-color: #c0392b !important; /* Etwas dunkleres Rot beim Hover */
    transform: scale(1.1);
}
/* Job Statistik Modal Styles */
.job-stats-trigger {
    cursor: pointer;
    transition: color 0.2s ease;
}
.job-stats-trigger:hover {
    color: var(--primary-color);
}
.job-stats-modal-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 10px 0;
}
.job-stats-row {
    display: flex;
    align-items: center;
    padding: 12px;
    background: var(--surface-color);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}
.job-stats-icon {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    margin-right: 15px;
    font-size: 1.1em;
}
.job-stats-icon.views { background: rgba(52, 152, 219, 0.15); color: #3498db; }
.job-stats-icon.favorites { background: rgba(231, 76, 60, 0.15); color: #e74c3c; }
.job-stats-icon.shares { background: rgba(46, 204, 113, 0.15); color: #2ecc71; }
.job-stats-icon.offers { background: rgba(155, 89, 182, 0.15); color: #9b59b2; }

.job-stats-label {
    flex-grow: 1;
    text-align: left;
    font-weight: 500;
}
.job-stats-value {
    font-size: 1.2em;
    font-weight: 700;
    color: var(--text-color);
    padding: 2px 10px;
    background: rgba(255,255,255,0.05);
    border-radius: 6px;
}
.report-choice-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Zwei Spalten auf dem Desktop */
    gap: 20px;
    padding: 10px;
}

/* Media Query für mobile Geräte (z.B. alles unter 600px Breite) */
@media (max-width: 600px) {
    .report-choice-container {
        grid-template-columns: 1fr; /* Nur noch eine Spalte auf dem Handy */
        gap: 15px; /* Etwas weniger Abstand zwischen den Buttons */
    }
}

/* Drag & Drop Verbesserungen */
.column-tag.selected {
    cursor: grab;
    user-select: none;
    touch-action: none; 
}

/* Wir animieren die Chips nur, wenn sie NICHT gerade bewegt werden */
#selected-columns .column-tag:not(.dragging) {
    transition: none; 
}

.column-tag.dragging {
    opacity: 0.01; /* Fast unsichtbar, damit man nur den System-Cursor sieht */
    background: var(--primary-color) !important;
}

.column-tag.dragging {
    opacity: 0.4;
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    z-index: 1000;
    pointer-events: none; /* Verhindert das Flackern, da die Maus "durch" den Chip schaut */
}

/* Verhindert das Flackern der anderen Chips */
#selected-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    min-height: 50px;
    transition: all 0.3s ease;
}

/* Styles für den Sync-Ladebalken im Modal */
.sync-progress-container {
    margin-top: 20px;
    background-color: #f0f0f0;
    border-radius: 8px;
    height: 24px;
    width: 100%;
    overflow: hidden;
    position: relative;
    border: 1px solid #e0e0e0;
}

.sync-progress-bar {
    background-color: var(--primary-color, #d4af37);
    height: 100%;
    width: 0%;
    transition: width 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
}

.sync-status-text {
    text-align: center;
    margin-top: 10px;
    font-size: 0.9em;
    color: #666;
}

/* --- Job Liste Header & Suche (FIXED GOLD STYLE) --- */

.job-list-controls-new {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 30px;
    margin-bottom: 20px;
    width: 100%;
    position: relative;
}

/* --- DIE VERBINDUNGSLINIE (JETZT GOLD) --- */
.job-list-controls-new::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px; 
    /* HIER IST DER FIX: Goldene Farbe (leicht transparent für Eleganz) statt Grau */
    background-color: rgba(212, 175, 55, 0.4); 
    z-index: 0;
    transform: translateY(-50%);
}

/* --- DAS SUCHFELD (Rahmen passend zur Linie) --- */
.job-search-container {
    flex-grow: 1;
    position: relative;
    max-width: 400px;
    z-index: 2;
}

#job-search-input-list {
    width: 100%;
    padding: 12px 20px;
    border-radius: 30px;
    /* Rahmen auch Gold (subtil), damit er zur Linie passt */
    border: 1px solid rgba(212, 175, 55, 0.4); 
    background-color: var(--background-color); 
    color: var(--text-color);
    outline: none;
    font-size: 1rem;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

#job-search-input-list:focus {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-color: var(--primary-color); /* Helles Gold bei Fokus */
}


/* --- DER PLUS BUTTON --- */
.btn-create-plus {
    position: relative;
    z-index: 2;
    /* Hintergrund muss gesetzt sein, damit die Linie hinter dem Button "verdeckt" wird */
    background-color: var(--background-color); 
}

/* --- DROPDOWN VORSCHLÄGE --- */
.search-suggestions-dropdown {
    position: absolute;
    top: 100%;
    left: 10px;
    right: 10px;
    background: var(--surface-color); /* FIX: Dark Mode kompatibel */
    border: 1px solid var(--border-color);
    border-radius: 0 0 15px 15px;
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
    display: none;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    margin-top: 5px;
}

.suggestion-item {
    padding: 12px 15px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
    font-size: 0.95rem;
}

.suggestion-item:hover {
    background-color: rgba(255, 255, 255, 0.05); /* Subtiler Hover im Dark Mode */
    color: var(--primary-color);
}

/* --- MOBILE ANPASSUNGEN --- */
@media (max-width: 768px) {
    .job-list-controls-new {
        flex-direction: row; 
        gap: 10px;
        margin-top: 20px;
    }
    
    .job-list-controls-new::before {
        display: none; 
    }

    .desktop-only {
        display: none !important; 
    }
    
    #filter-btn {
        order: 1; 
    }
    
    .job-search-container {
        order: 2; 
        flex-grow: 1;
        max-width: none;
    }
}
/* --- NEU: Styling für das Job-Suchfeld --- */
#job-search-input-list {
    width: 100%;
    padding: 12px 20px;
    border-radius: 30px;
    outline: none;
    
    /* Hintergrund und Schriftfarbe passen sich automatisch an Hell/Dunkel an */
    background-color: var(--surface-color);
    color: var(--text-color);
    
    /* Rahmen: Gold (Primary Color) */
    border: 1px solid var(--primary-color);
    transition: all 0.3s ease;
}

#job-search-input-list:focus {
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}

/* Anpassung für den Dropdown-Text, damit er lesbar bleibt */
#job-search-suggestions {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
}
.suggestion-item {
    color: var(--text-color);
}
.suggestion-item:hover {
    background-color: var(--background-color);
    color: var(--primary-color);
}

/* --- Rechnungscenter Optimierung --- */
.invoice-center-tabs {
    display: flex;
    background: rgba(0, 0, 0, 0.2); /* Dunklere Schiene für besseren Kontrast */
    padding: 5px;
    border-radius: 12px;
    gap: 8px;
    margin-bottom: 30px;
}

.invoice-center-tabs button {
    flex: 1;
    border: none !important;
    padding: 12px 5px !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    background: transparent !important;
    color: var(--text-color-light) !important;
    font-weight: bold !important;
    font-size: 0.9em !important;
    cursor: pointer;
}

.invoice-center-tabs button.active {
    background: var(--primary-color) !important;
    color: #1e1e1e !important; /* Dunkler Text auf Gold für Lesbarkeit */
    box-shadow: 0 4px 10px rgba(212, 175, 55, 0.3);
}

.ic-tab-content .form-group {
    margin-bottom: 25px; /* Mehr White-Space zwischen den Feldern */
}

.ic-tab-content label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-color);
}

#ic-history-list {
    margin-top: 10px;
    border-radius: 8px;
    background: transparent;
    /* FIX: Maximale Höhe definieren, damit Scrollen überhaupt möglich ist */
    max-height: 55vh; 
    /* FIX: Vertikales Scrollen erlauben */
    overflow-y: auto !important;
    overflow-x: hidden;
    /* FIX: Etwas Innenabstand, damit die Karten nicht am Scrollbalken kleben */
    padding: 5px 10px 5px 5px;
    box-sizing: border-box;
}

/* KARTEN-LAYOUT FÜR ALLE GERÄTE (PC & HANDY) */
#ic-history-list .admin-table, 
#ic-history-list .admin-table tbody {
    display: block;
    width: 100% !important;
    /* WICHTIG: Das hier killt die globale 900px-Regel vom Desktop! */
    min-width: 0 !important; 
    box-sizing: border-box;
}

#ic-history-list .admin-table thead {
    display: none; /* Kopfzeile komplett ausblenden */
}

#ic-history-list .admin-table tr {
    display: block;
    /* FIX: width: auto sorgt dafür, dass Platz für den Scrollbalken bleibt */
    width: auto; 
    box-sizing: border-box;
    margin-bottom: 15px; /* Etwas mehr Abstand zwischen den Karten */
    margin-right: 2px; /* Sicherheitsabstand rechts */
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 15px;
    background-color: var(--surface-color);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

#ic-history-list .admin-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 0;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    text-align: right;
    font-size: 0.95em;
    color: var(--text-color);
}

/* Die letzte Zeile (Aktion) braucht keinen Strich unten */
#ic-history-list .admin-table td:last-child {
    border-bottom: none;
    padding-bottom: 0;
    padding-top: 12px;
}

/* Das Label (z.B. "Nr.", "Datum") */
#ic-history-list .admin-table td::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--text-color-light);
    text-align: left;
    margin-right: 15px;
    flex-shrink: 0;
}

/* Fix für lange Texte (damit nichts rausragt) */
#ic-history-list .admin-table td span,
#ic-history-list .admin-table td div {
    white-space: normal;
    word-break: break-word;
    text-align: right;
}

/* ==========================================================================
   HEUTE HINZUGEFÜGTE STYLES (VERSION 3 - FINAL FIX)
   ========================================================================== */

/* 1. KORREKTUR: Avatare (Rundung & Dark Mode Hintergrund) */
.avatar-container-small, 
.avatar-container-medium {
    border-radius: 50% !important; /* Erzwingt Rundung des Rahmens */
    /* WICHTIG: overflow: hidden; ENTFERNT, damit Siegel und Punkte über den Rand ragen dürfen! */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    flex-shrink: 0;
}

/* Standard: Echte Profilbilder füllen den Kreis komplett aus und werden selbst rund */
.avatar-container-small img, 
.avatar-container-medium img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Komplett ausfüllen (kein Rand) */
    padding: 0;
    border-radius: 50%; /* Das Bild selbst muss rund sein, da der Container es nicht mehr abschneidet */
}

/* Spezial-Klasse NUR für Firmen-Logos bei Partner-Jobs */
.avatar-container-small img.partner-logo-avatar, 
.avatar-container-medium img.partner-logo-avatar {
    object-fit: contain; /* Logos nicht abschneiden, komplett sichtbar lassen */
    padding: 2px;
    border-radius: 0; /* Logos behalten ihre Originalform innerhalb des runden Containers */
}

/* NEU: Wenn das Joblinx-Platzhalter-Logo genutzt wird, erzwingen wir einen dunklen, runden Hintergrund! */
.avatar-container-small img[src*="logo.png"],
.avatar-container-medium img[src*="logo.png"] {
    background-color: #1a1a1a !important; /* Dunkelgrau/Schwarz für perfekten Kontrast */
    border-radius: 50% !important; /* Zwingt den dunklen Hintergrund in eine saubere Kreisform */
    padding: 6px !important; /* Etwas mehr Luft zum Rand, damit das "x" nicht klebt */
    object-fit: contain !important;
}

/* 2. KORREKTUR: Job Karten Inhalt Höhe (Zurück auf Original 180px) */
.job-card-swiper, 
.job-card-salary-box, 
.job-card-fallback-box {
    width: 100%;
    height: 180px; /* ORIGINALGRÖSSE WIEDERHERGESTELLT */
    border-radius: var(--border-radius);
    overflow: hidden;
}

/* 3. Gehalts-Box (Thumbnail Ersatz) */
.job-card-salary-box {
    background-color: #1a1a1a; /* Dunkles Schwarz-Grau für Fokus */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    padding: 10px;
}

.salary-box-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.8;
    margin-bottom: 5px;
}

.salary-box-amount {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
}

/* 4. Fallback Box (Dunkel, passend zum System) */
.job-card-fallback-box {
    background-color: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
}

.job-card-fallback-logo {
    max-width: 60%;
    max-height: 60%;
    opacity: 0.9;
    object-fit: contain;
}

/* Hintergrundfarbe auf Weiß setzen, damit die meist weißen Partner-Logos nahtlos übergehen */
.job-card-swiper {
    background-color: #ffffff;
}

/* FIX: Logo komplett anzeigen, ohne Padding, damit es sich natürlich in die weiße Box einfügt */
.job-card-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0; 
    box-sizing: border-box;
}

/* 5. Partner Detail: Gehalts-Box */
.detail-salary-box {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    padding: 10px 15px;
    border-radius: 8px;
    margin-top: 15px;
    margin-bottom: 5px;
    max-width: fit-content;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.detail-salary-box .salary-icon { color: var(--primary-color); font-size: 1.2em; }
.detail-salary-box .salary-text { font-weight: 700; font-size: 1.05em; color: var(--text-color); }

/* 6. Partner Detail: Premium Benefit Carousel */
.benefit-section { margin-bottom: 30px; overflow: hidden; }
.benefit-section-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 15px; color: var(--text-color); padding-left: 5px; }

.benefit-carousel {
    display: flex; gap: 15px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: 20px; padding-left: 2px; padding-right: 20px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    cursor: grab; /* Der "Hand"-Cursor zum Greifen */
    user-select: none; /* Verhindert das Markieren von Text */
}
.benefit-carousel::-webkit-scrollbar { display: none; }

.benefit-card {
    flex: 0 0 85%; scroll-snap-align: start; background: var(--surface-color); 
    border: 1px solid var(--border-color); border-radius: 12px; padding: 20px;
    border-top: 5px solid var(--primary-color); box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: flex; flex-direction: column; justify-content: flex-start; min-height: 160px;
}

.benefit-label { font-size: 0.85rem; text-transform: uppercase; font-weight: 800; color: var(--text-color); margin-bottom: 12px; }
.benefit-value { font-size: 0.95rem; line-height: 1.5; color: var(--text-color-light); width: 100%; }

@media (min-width: 851px) {
    .benefit-carousel { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; overflow-x: visible; padding-bottom: 0; }
    .benefit-card { flex: unset; scroll-snap-align: unset; width: auto; min-height: 180px; }
}
.benefit-value ul { padding-left: 18px; margin: 0; }
.benefit-value li { margin-bottom: 4px; }


/* === 126. APP LOADER (ZAUBER-ANIMATION V4 - BIG & CLOSE) === */

/* Overlay Hintergrund */
.app-loader-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: var(--background-color, #121212); 
    z-index: 9999; display: flex; justify-content: center; align-items: center;
    transition: opacity 0.5s ease-out;
}
.app-loader-overlay.hidden { opacity: 0; pointer-events: none; }

/* Der Haupt-Container: Enger (300px) und Höher (60px) */
.loader {
    position: relative;
    width: 300px; /* Verringert, damit Icons näher am Text sind */
    height: 60px; /* Erhöht für größere Icons */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Der Text */
.loader-text {
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    font-weight: 900;
    color: var(--primary-color, #d4af37);
    letter-spacing: 0.15em; /* Leicht reduziert, damit es kompakter wirkt */
    position: relative;
    z-index: 5;
    white-space: nowrap;
    font-size: 1.1em; /* Schrift ein klein wenig größer */
}

/* Die Icons: Deutlich größer! */
.loader-icon {
    position: absolute;
    top: 7px; /* Zentriert im 60px Container: (60-45)/2 = 7.5 */
    width: 45px;  /* Von 30px auf 45px vergrößert! */
    height: 45px;
    object-fit: contain;
    z-index: 2;
}

/* Die magischen Balken: Ein einzelner, flüssiger Goldtropfen */
.loader::before, .loader::after {
    content: "";
    position: absolute;
    width: 50px;
    background: var(--primary-color, #d4af37);
    z-index: 3;

}

/* --- CHOREOGRAFIE (Bleibt gleich) --- */

.icon-left {
    left: 0;
    animation: fadeLeft 2.5s infinite alternate ease-in-out;
}

.icon-right {
    right: 0;
    animation: fadeRight 2.5s infinite alternate ease-in-out;
}

.loader::before {
    animation: scanTop 2.5s infinite alternate ease-in-out;
}

.loader::after {
    animation: scanBottom 2.5s infinite alternate ease-in-out;
}


/* --- KEYFRAMES (Sauber & Elastisch wie ein Tropfen) --- */

/* Bewegung OBERE Hälfte */
@keyframes scanTop {
    /* Start: Dicker, runder Tropfen, der das Icon verdeckt */
    0%, 10% { left: -3px; top: 30px; height: 0px;  width: 50px; border-radius: 25px; }
    15%     { left: -3px; top: 0px;  height: 30px; width: 50px; border-radius: 25px; } 
    
    /* Zieht sich zu einer runden Linie zusammen */
    20%     { left: -3px; top: 0px;  height: 4px;  width: 50px; border-radius: 4px; } 
    
    /* Zieht sich in der Mitte in die Länge (elastischer Kaugummi/Gold-Faden) */
    50%     { width: 120px; border-radius: 4px; } 
    
    /* Kommt rechts an und zieht sich wieder kürzer */
    80%     { left: calc(100% - 47px); top: 0px; height: 4px; width: 50px; border-radius: 4px; } 
    
    /* Wird rechts wieder zum dicken, runden Tropfen */
    85%     { left: calc(100% - 47px); top: 0px; height: 30px; width: 50px; border-radius: 25px; } 
    90%, 100% { left: calc(100% - 47px); top: 30px; height: 0px; width: 50px; border-radius: 25px; } 
}

/* Bewegung UNTERE Hälfte */
@keyframes scanBottom {
    0%, 10% { left: -3px; bottom: 30px; height: 0px; width: 50px; border-radius: 25px; }
    15%     { left: -3px; bottom: 0px;  height: 30px; width: 50px; border-radius: 25px; }
    
    20%     { left: -3px; bottom: 0px;  height: 4px;  width: 50px; border-radius: 4px; }
    
    50%     { width: 120px; border-radius: 4px; }
    
    80%     { left: calc(100% - 47px); bottom: 0px; height: 4px; width: 50px; border-radius: 4px; }
    
    85%     { left: calc(100% - 47px); bottom: 0px; height: 30px; width: 50px; border-radius: 25px; }
    90%, 100% { left: calc(100% - 47px); bottom: 30px; height: 0px; width: 50px; border-radius: 25px; }
}

@keyframes fadeLeft {
    0%, 10% { opacity: 1; }
    15%, 100% { opacity: 0; }
}

@keyframes fadeRight {
    0%, 80% { opacity: 0; }
    85%, 100% { opacity: 1; }
}

/* ==========================================================================
   128. LITEPICKER (KALENDER) Z-INDEX & ICON FIX
   ========================================================================== */

/* 1. Stellt sicher, dass der große Kalender IMMER über dem Modal liegt */
.litepicker {
    z-index: 99999 !important;
}

/* 2. Bringt das Kalender-Icon auf der rechten Seite der Eingabefelder zurück */
/* Da Litepicker das Feld umwandelt, fügen wir hier ein hochwertiges eigenes SVG-Icon ein */
input[name*="datum" i], 
input[name*="date" i],
input[id*="datum" i], 
input[id*="date" i],
.date-range-picker,
.litepicker-input {
    /* Ein schickes graues Kalender-Icon als Hintergrund */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0a0a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3e%3c/rect%3e%3cline x1='16' y1='2' x2='16' y2='6'%3e%3c/line%3e%3cline x1='8' y1='2' x2='8' y2='6'%3e%3c/line%3e%3cline x1='3' y1='10' x2='21' y2='10'%3e%3c/line%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center !important; /* Positioniert es ganz rechts */
    background-size: 20px !important;
    padding-right: 45px !important; /* Schafft Platz für das Icon, damit der Text nicht drüberläuft */
    cursor: pointer;
}

/* FIX: Flexbox statt Grid erzwingt "Alles in einer Reihe" solange Platz ist */
.admin-filter-bar {
    display: flex;
    flex-wrap: wrap; /* Erlaubt Umbruch nur auf Handy */
    align-items: flex-end; /* Richtet Buttons und Inputs an der Unterkante aus */
    gap: 15px;
    width: 100%;
}

/* Die Eingabefelder sollen wachsen */
.admin-filter-bar .form-group {
    flex: 1; 
    min-width: 200px; /* Mindestbreite damit es nicht quetscht */
    margin-bottom: 0 !important; /* Kein Abstand nach unten, damit es bündig ist */
}

/* Die Button-Gruppe nimmt nur so viel Platz wie nötig */
.admin-filter-bar .admin-action-group {
    flex: 0 0 auto;
    display: flex;
    gap: 10px;
    margin-bottom: 2px; /* Fein-Tuning für die Grundlinie */
}

/* Handy-Ansicht: Alles untereinander */
@media (max-width: 768px) {
    .admin-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .admin-filter-bar .admin-action-group {
        width: 100%;
        margin-top: 10px;
    }
    .admin-filter-bar .admin-action-group button {
        width: 100%;
    }
}

/* ==========================================================================
   129. ACTIVITIES MOBILE EXPAND FIX (V2 - Button rechts)
   ========================================================================== */

/* Standard (Desktop): Pfeil verstecken */
.mobile-expand-text-btn {
    display: none;
}

@media (max-width: 768px) {
    /* Der Text-Container: Standardmäßig abgeschnitten */
    .conversation-preview.text-content {
        display: -webkit-box;
        -webkit-line-clamp: 2; /* Zeige max 2 Zeilen */
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: all 0.3s ease;
        padding-right: 0; /* Kein Padding mehr nötig, da Button weg ist */
    }

    /* Der Zustand "Ausgeklappt" */
    .conversation-preview.text-content.expanded {
        -webkit-line-clamp: unset !important;
        line-clamp: unset !important;
        overflow: visible;
        max-height: none;
    }

    /* Der Pfeil-Button selbst */
    .mobile-expand-text-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        color: var(--text-color-light);
        
        /* Neue Positionierung: Einfach im Fluss der rechten Box */
        position: static; 
        margin-top: 5px; /* Abstand zur Uhrzeit */
        width: 100%;     /* Volle Breite der kleinen Box */
        height: 30px;
        cursor: pointer;
        z-index: 10;
    }
    
    /* Wenn Lösch-Modus an ist, verstecken wir den Pfeil, damit Platz für Mülleimer ist */
    #activity-list-container.delete-mode-active .mobile-expand-text-btn {
        display: none;
    }

    /* Pfeil drehen wenn aktiv */
    .mobile-expand-text-btn.active i {
        transform: rotate(180deg);
    }
    .mobile-expand-text-btn i {
        transition: transform 0.3s ease;
        font-size: 1.2em; /* Etwas größer für bessere Sichtbarkeit */
    }
}

/* Footer Controls - Zusammenfassung in einer Reihe */
.footer-actions-container {
    display: flex;
    justify-content: center; /* Zentriert die ganze Gruppe aus Socials + Icons */
    align-items: center;     /* Sorgt dafür, dass alles perfekt mittig auf einer Linie ist */
    gap: 60px;               /* DEUTLICH MEHR Abstand zwischen der Social-Gruppe und der Icon-Gruppe */
    margin-bottom: 0 !important; /* Verhindert das Hochrutschen der Icons auf dem Desktop */
    flex-wrap: nowrap;       /* Erzwingt eine einzige Reihe */
}

/* Social Media Gruppe */
.social-media-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin: 0 !important; /* Entfernt das alte 'auto' Margin, das die Ausrichtung gestört hat */
}

/* Neue Button Gruppe */
.footer-control-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.social-icon {
    width: 25px; /* Einheitliche Größe */
    height: 25px;
    display: block;
}

.footer-icon-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    width: 25px; /* Identisch zu .social-icon */
    height: 25px; /* Identisch zu .social-icon */
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 14px; /* Icon-Größe im Kreis */
    transition: all 0.2s;
}

.footer-icon-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.quick-filter-pill:hover {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
    border-color: var(--primary-color) !important;
    opacity: 0.85;
}
/* --- Filter-Pillen (Profil-Liste) --- */
.profile-status-filters {
    display: flex; gap: 10px; margin-top: 15px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px;
}

.quick-filter-pill {
    display: flex; align-items: center; gap: 10px; padding: 10px 20px; border-radius: 25px; cursor: pointer; transition: all 0.2s; font-weight: 600; font-family: inherit;
    border: 1px solid var(--border-color);
    background-color: var(--surface-color);
    color: var(--text-color-medium);
}

.quick-filter-pill img { width: 28px; height: auto; }

.quick-filter-pill:hover {
    background-color: var(--surface-color-hover);
    color: var(--text-color-dark);
}

.quick-filter-pill.active {
    background-color: var(--accent-color-red) !important;
    color: #ffffff !important;
    border-color: var(--accent-color-red) !important;
}

/* ==========================================================================
   FINALER FIX: PC-Größe bleibt, Handy-Pillen werden verkleinert
   ========================================================================== */

/* 1. PC-Modus: Hier bleibt alles so, wie es jetzt gerade gut aussieht */
.profile-status-filters,
.quick-filters-container {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
}

/* 2. Handy-Modus: Pillen werden kleiner & alles zwingend nebeneinander */
@media (max-width: 600px) {
    /* Container für Helden: Zwingend nebeneinander */
    .profile-status-filters {
        flex-wrap: nowrap !important;
    }
    
    /* Alle Pillen am Handy kleiner machen */
    .quick-filter-pill {
        padding: 4px 8px !important; /* Kleineres Padding */
        font-size: 0.75rem !important; /* Kleinere Schrift */
        gap: 4px !important;
    }
    
    /* Icons am Handy kleiner */
    .quick-filter-pill img {
        width: 14px !important;
    }
}

@media (min-width: 769px) {
    /* Wir zwingen beide Pillen-Typen auf eine einheitliche, komfortable Breite */
    .profile-status-filters .quick-filter-pill,
    .quick-filters-container .quick-filter-pill {
        min-width: 160px !important; /* Jeder Button ist mindestens 160px breit */
        justify-content: center !important; /* Text/Icon immer zentriert */
        padding: 10px 20px !important;     /* Einheitliches Padding für alle */
    }
}