/* ═══════════════════════════════════════════════════════════════════
   JOB-KARTEN REDESIGN 2026
   Neue moderne Struktur mit Industrie-Farbpunkten und besserer Hierarchie
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Industrie-Farbpalette für Job-Karten ─────────────────────── */
:root {
    /* Industrie to Accent-Color Mapping */
    --color-beratung: #0080FF;           /* Blau */
    --color-bildung: #2D9E5A;            /* Grün */
    --color-buerokommunikation: #0080FF; /* Blau */
    --color-buendnisse: #8B5CF6;         /* Lila */
    --color-dienstleistung: #0891B2;     /* Teal */
    --color-einzelhandel: #D4A500;       /* Gold */
    --color-fahrkoenig: #F97316;         /* Orange */
    --color-gastronomie: #F97316;        /* Orange */
    --color-gartenbau: #2D9E5A;          /* Grün */
    --color-gebaeudereinigung: #718096;  /* Gray */
    --color-gesundheit: #E63946;         /* Rot */
    --color-handwerk: #6366F1;           /* Indigo */
    --color-hauswirtschaft: #718096;     /* Gray */
    --color-hotelgewerbe: #F97316;       /* Orange */
    --color-iti: #0080FF;                /* Blau */
    --color-kaeltutechnik: #6366F1;      /* Indigo */
    --color-kinderbetreuung: #2D9E5A;    /* Grün */
    --color-krematorium: #718096;        /* Gray */
    --color-kuechenhilfe: #F97316;       /* Orange */
    --color-kuenste: #8B5CF6;            /* Lila */
    --color-kunsthandwerk: #8B5CF6;      /* Lila */
    --color-kurier: #F97316;             /* Orange */
    --color-landwirtschaft: #2D9E5A;     /* Grün */
    --color-lagerwerk: #0891B2;          /* Teal */
    --color-lieferverkehr: #0891B2;      /* Teal */
    --color-logistik: #0891B2;           /* Teal */
    --color-logistikhilfearbeiter: #0891B2; /* Teal */
    --color-marketingfaehigkeiten: #8B5CF6; /* Lila */
    --color-mitarbeiter: #0080FF;        /* Blau */
    --color-mittelstandische: #0080FF;   /* Blau */
    --color-nachhilfe: #2D9E5A;          /* Grün */
    --color-neubestellungen: #0080FF;    /* Blau */
    --color-oelheizbrenner: #6366F1;     /* Indigo */
    --color-personal: #0080FF;           /* Blau */
    --color-pflege: #E63946;             /* Rot */
    --color-pflegepersonages: #E63946;   /* Rot */
    --color-privathaushalt: #718096;     /* Gray */
    --color-praxis: #E63946;             /* Rot */
    --color-praxis-2: #E63946;           /* Rot */
    --color-qm: #0080FF;                 /* Blau */
    --color-receptionisten: #0080FF;     /* Blau */
    --color-reifen: #6366F1;             /* Indigo */
    --color-reparatur: #6366F1;          /* Indigo */
    --color-retter: #E63946;             /* Rot */
    --color-sachbearbeiter: #0080FF;     /* Blau */
    --color-saisonarbeit: #2D9E5A;       /* Grün */
    --color-sanitaer: #6366F1;           /* Indigo */
    --color-sauberkeit: #718096;         /* Gray */
    --color-schauklein: #0891B2;         /* Teal */
    --color-schreibkraft: #0080FF;       /* Blau */
    --color-schreiner: #6366F1;          /* Indigo */
    --color-schuldienste: #0080FF;       /* Blau */
    --color-schulpersonal: #0080FF;      /* Blau */
    --color-schutz: #E63946;             /* Rot */
    --color-sicherheit: #E63946;         /* Rot */
    --color-sozialdienst: #2D9E5A;       /* Grün */
    --color-sozialarbeiter: #2D9E5A;     /* Grün */
    --color-sprachenfaehigkeiten: #8B5CF6; /* Lila */
    --color-stadt: #0080FF;              /* Blau */
    --color-staplerfahrer: #0891B2;      /* Teal */
    --color-steuererklarung: #0080FF;    /* Blau */
    --color-strassen: #6366F1;           /* Indigo */
    --color-strassenbau: #6366F1;        /* Indigo */
    --color-strassenbahn: #0891B2;       /* Teal */
    --color-streuverkehr: #F97316;       /* Orange */
    --color-strom: #0080FF;              /* Blau */
    --color-stromunfall: #E63946;        /* Rot */
    --color-studium: #0080FF;            /* Blau */
    --color-subunternehmer: #0080FF;     /* Blau */
    --color-suchmaschinen: #8B5CF6;      /* Lila */
    --color-suedeneuropa: #2D9E5A;       /* Grün */
    --color-suedzentrale: #0080FF;       /* Blau */
    --color-suesswarenherstellung: #F97316; /* Orange */
    --color-takeover: #0080FF;           /* Blau */
    --color-tarifbeamte: #0080FF;        /* Blau */
    --color-taxischauffeur: #F97316;     /* Orange */
    --color-team: #0080FF;               /* Blau */
    --color-technische: #6366F1;         /* Indigo */
    --color-technisches: #6366F1;        /* Indigo */
    --color-techniker: #6366F1;          /* Indigo */
    --color-telekommunikation: #0080FF;  /* Blau */
    --color-tierarzt: #E63946;           /* Rot */
    --color-tierpflege: #E63946;         /* Rot */
    --color-title: #0080FF;              /* Blau */
    --color-transient: #F97316;          /* Orange */
    --color-transport: #0891B2;          /* Teal */
    --color-transporthandling: #0891B2;  /* Teal */
    --color-transportieren: #0891B2;     /* Teal */
    --color-transplantation: #E63946;    /* Rot */
    --color-traurigkeit: #718096;        /* Gray */
    --color-trommel: #0891B2;            /* Teal */
    --color-tueren: #6366F1;             /* Indigo */
    --color-uebersetzer: #8B5CF6;        /* Lila */
    --color-ueberwaender: #6366F1;       /* Indigo */
    --color-ueberwaendung: #6366F1;      /* Indigo */
    --color-umgekehrte: #0080FF;         /* Blau */
    --color-umlagen: #718096;            /* Gray */
    --color-unbeauftragte: #0080FF;      /* Blau */
    --color-undefinedposition: #718096;  /* Gray */
    --color-unfallmelder: #E63946;       /* Rot */
    --color-unimog: #0891B2;             /* Teal */
    --color-universit: #0080FF;          /* Blau */
    --color-universitaet: #0080FF;       /* Blau */
    --color-unklarheit: #718096;         /* Gray */
    --color-unterricht: #0080FF;         /* Blau */
    --color-unterrichtung: #0080FF;      /* Blau */
    --color-unternehmen: #0080FF;        /* Blau */
    --color-unterstutzung: #0080FF;      /* Blau */
    --color-unterweisung: #0080FF;       /* Blau */
    --color-unterwerbung: #F97316;       /* Orange */
    --color-urlaub: #718096;             /* Gray */
    --color-valet: #F97316;              /* Orange */
    --color-verkauf: #D4A500;            /* Gold */
    --color-verkaeufer: #D4A500;         /* Gold */
    --color-verkaeufer-in: #D4A500;      /* Gold */
    --color-verkehr: #0891B2;            /* Teal */
    --color-verkehrslogistik: #0891B2;   /* Teal */
    --color-verfuegbarkeit: #0080FF;     /* Blau */
    --color-verguetung: #0080FF;         /* Blau */
    --color-verhaltensrichtung: #718096; /* Gray */
    --color-verhandlung: #0080FF;        /* Blau */
    --color-verhueltnis: #718096;        /* Gray */
    --color-verkaeufer-moderner-handel: #D4A500; /* Gold */
    --color-sonstiges: #718096;          /* Gray */
}

/* ─── Job-Karten neue Grundstruktur ────────────────────────── */

.job-card-industry-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--industry-color, #718096);
    flex-shrink: 0;
    margin-right: 8px;
    vertical-align: middle;
}

.job-card-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 8px;
}

.job-card-location,
.job-card-date {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.job-card-title {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 8px 0;
    color: var(--text);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.job-card-company {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text);
}

.job-card-company-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ─── Wage Section (Prominent) ─────────────────────────────── */
.job-card-wage {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    background: linear-gradient(135deg, rgba(0, 128, 255, 0.05), rgba(139, 92, 246, 0.03));
    padding: 12px;
    border-radius: 8px;
    margin-left: -4px;
    margin-right: -4px;
    margin-bottom: -4px;
}

.job-card-wage-amount {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--primary);
}

.job-card-wage-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted);
}

/* ─── Premium Badge ────────────────────────────────────────── */
.job-card-premium-badge {
    display: inline-block;
    padding: 2px 8px;
    background-color: var(--accent-purple);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: auto;
    flex-shrink: 0;
}

/* ─── Job-Card Rating Badge ────────────────────────────────── */
.rating-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 8px;
    background-color: #FFF8E8;
    border: 1px solid rgba(212, 165, 0, 0.2);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #D4A500;
    white-space: nowrap;
}

.rating-badge.rating-badge-empty {
    background-color: rgba(113, 128, 150, 0.05);
    border-color: rgba(113, 128, 150, 0.1);
    color: var(--muted);
}

.rating-star {
    font-size: 0.9em;
    line-height: 1;
}

.rating-value {
    font-weight: 700;
}

/* ─── Mobile-Adjustments ──────────────────────────────────── */
@media (max-width: 768px) {
    .job-card-title {
        font-size: 1rem;
    }

    .job-card-wage-amount {
        font-size: 1.125rem;
    }

    .job-card-meta {
        font-size: 0.7rem;
    }
}