/* ============================================================
   BESA Energy - Karriere-Seite
   Eigene Styles für Benefit-Cards, Stellen-Cards, Bewerbungs-
   Formular. Wird zusätzlich zu styles.css + subpage.css geladen.
   ============================================================ */

/* --- Hero ---------------------------------------------------- */
.karriere-hero {
    background:
        radial-gradient(ellipse at 15% 0%, rgba(91, 167, 209, 0.25) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 100%, rgba(91, 167, 209, 0.18) 0%, transparent 55%),
        var(--color-anthracite-dark, #1F2021);
}

.karriere-hero h1 {
    color: var(--color-white);
}

.karriere-hero p {
    color: rgba(255, 255, 255, 0.82);
}


/* --- Benefits (Warum BESA als Arbeitgeber) ------------------ */
.karriere-benefits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.karriere-benefit-card {
    background: var(--color-surface, #FFFFFF);
    border: 1px solid var(--color-gray-200, #E5E7EB);
    border-radius: var(--radius-lg, 12px);
    padding: 1.75rem 1.5rem;
    transition: all var(--transition-base);
}

/* 11.08.2026: 4px statt 3px, damit das Anheben auf ALLEN Seiten gleich ist.
   Vorgabe aus Brand/DESIGN.md Zeile 648 (Karten: translateY(-4px)). Das war die
   einzige Abweichung ausserhalb von styles.css; die sechs anderen seiteneigenen
   CSS-Dateien haben ueberhaupt keine Hover-Bewegung. */
.karriere-benefit-card:hover {
    border-color: var(--color-steel-blue, #5BA7D1);
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

.karriere-benefit-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md, 8px);
    background: rgba(91, 167, 209, 0.10);
    color: var(--color-steel-blue-dark, #3F87B0);
    margin-bottom: 1rem;
}

.karriere-benefit-icon svg {
    width: 24px;
    height: 24px;
}

.karriere-benefit-card h3 {
    font-size: 1.0625rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    color: var(--color-anthracite, #36383A);
}

.karriere-benefit-card p {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--color-gray-600, #4B5563);
    margin: 0;
}


/* --- Section-Alt (heller Hintergrund für Stellen) ----------- */
.section-alt {
    background: var(--color-gray-50, #F9FAFB);
}


/* --- Stellen-Cards ------------------------------------------ */
/* Vier inhaltsreiche Karten: bewusst zwei Spalten statt vier schmaler Säulen. */
.stellen-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 2rem;
}

@media (min-width: 1000px) {
    .stellen-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Initiativbewerbung als breites Band unter den drei Stellen. */
    /* 04.08.2026 (Florian): Die Initiativ-Karte lief vorher über die volle
       Breite unter den drei Stellenanzeigen. Jetzt ist sie die vierte Karte
       im selben Raster, damit die Sektion einheitlich aussieht. Die blaue
       Tönung unterscheidet sie weiterhin von den echten Stellen. */
}

.stellen-card {
    background: var(--color-surface, #FFFFFF);
    border: 1px solid var(--color-gray-200, #E5E7EB);
    border-radius: var(--radius-lg, 12px);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: all var(--transition-base);
}

.stellen-card:hover {
    border-color: var(--color-steel-blue, #5BA7D1);
    box-shadow: var(--shadow-md);
}

.stellen-card-header {
    border-bottom: 1px solid var(--color-gray-100, #F3F4F6);
    padding-bottom: 1rem;
}

.stellen-tag {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    background: rgba(91, 167, 209, 0.12);
    color: var(--color-steel-blue-dark, #3F87B0);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 0.75rem;
}

.stellen-tag-initiative {
    background: rgba(242, 1, 0, 0.08);
    color: var(--color-primary-dark, #C30100);
}

.stellen-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    color: var(--color-anthracite, #36383A);
}

.stellen-subtitle {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-steel-blue-dark, #3F87B0);
    margin: -0.25rem 0 0.6rem;
}

.stellen-location {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    color: var(--color-gray-500, #6B7280);
    margin: 0;
}

.stellen-location svg {
    flex-shrink: 0;
}

.stellen-card-body {
    flex: 1;
}

.stellen-card-body p {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-gray-700, #374151);
    margin: 0 0 0.875rem;
}

.stellen-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.stellen-list li {
    position: relative;
    padding-left: 1.4rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-gray-600, #4B5563);
    margin-bottom: 0.4rem;
}

.stellen-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-steel-blue, #5BA7D1);
}

.stellen-req {
    margin-top: 1rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--color-gray-100, #F3F4F6);
    font-size: 0.875rem !important;
    line-height: 1.55;
    color: var(--color-gray-600, #4B5563) !important;
}

.stellen-req strong {
    color: var(--color-anthracite, #36383A);
}

.stellen-card-actions {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
}

.stellen-apply-btn {
    align-self: flex-start;
}

.stellen-source {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-gray-500, #6B7280);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all var(--transition-base);
}

.stellen-source:hover {
    color: var(--color-steel-blue-dark, #3F87B0);
    border-bottom-color: currentColor;
}

.stellen-source svg {
    flex-shrink: 0;
}

.stellen-card-initiative {
    background: linear-gradient(135deg, rgba(91, 167, 209, 0.04) 0%, rgba(91, 167, 209, 0.10) 100%);
    border-color: rgba(91, 167, 209, 0.25);
}


/* --- Bewerbungsformular ------------------------------------- */
.bewerbung-wrap {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 3rem;
    align-items: start;
}

@media (max-width: 900px) {
    .bewerbung-wrap {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

.bewerbung-intro .section-label {
    display: inline-block;
    margin-bottom: 1rem;
}

.bewerbung-intro h2 {
    margin-bottom: 1rem;
}

.bewerbung-intro .section-desc {
    margin-bottom: 1.5rem;
}

.bewerbung-trust {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.bewerbung-trust li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--color-gray-700, #374151);
}

.bewerbung-trust svg {
    color: var(--color-success, #10B981);
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.bewerbung-form-side {
    background: var(--color-surface, #FFFFFF);
    border: 1px solid var(--color-gray-200, #E5E7EB);
    border-radius: var(--radius-lg, 12px);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    box-shadow: var(--shadow-card);
}

#bewerbung-form select {
    width: 100%;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--color-gray-300, #D1D5DB);
    border-radius: var(--radius-md, 8px);
    font-family: var(--font-family);
    font-size: 1rem;
    color: var(--color-anthracite, #36383A);
    background: var(--color-surface, #FFFFFF);
    transition: all var(--transition-base);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 18px;
    padding-right: 2.5rem;
}

#bewerbung-form select:focus {
    border-color: var(--color-steel-blue, #5BA7D1);
    outline: none;
    box-shadow: 0 0 0 3px rgba(91, 167, 209, 0.15);
}

#bewerbung-form input[type="file"] {
    width: 100%;
    padding: 0.65rem 0.875rem;
    border: 1px dashed var(--color-gray-300, #D1D5DB);
    border-radius: var(--radius-md, 8px);
    font-family: var(--font-family);
    font-size: 0.9375rem;
    color: var(--color-gray-600, #4B5563);
    background: var(--color-gray-50, #F9FAFB);
    cursor: pointer;
}

#bewerbung-form input[type="file"]:hover {
    border-color: var(--color-steel-blue, #5BA7D1);
    background: rgba(91, 167, 209, 0.05);
}

.form-hint {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.8125rem;
    color: var(--color-gray-500, #6B7280);
    line-height: 1.4;
}

.form-hint a {
    color: var(--color-steel-blue-dark, #3F87B0);
    text-decoration: underline;
}

#bewerbung-submit-btn {
    width: 100%;
    margin-top: 0.5rem;
}

/* File-Größe-Warnung */
.form-file-error {
    margin-top: 0.4rem;
    padding: 0.5rem 0.75rem;
    background: var(--color-error-light, rgba(239, 68, 68, 0.1));
    color: var(--color-error, #EF4444);
    border-radius: var(--radius-sm, 4px);
    font-size: 0.8125rem;
    line-height: 1.4;
}

/* --- Hero-Hintergrundbild (A-1329, 04.08.2026) ---------------
   Die Karriere-Seite hatte vorher kein einziges Bild. Das Foto liegt
   hinter dem Text, der dunkle Gradient der .karriere-hero bleibt als
   Rückfallebene darunter. Rückbau: den Block .karriere-hero-bg aus
   karriere.html entfernen. */
.karriere-hero {
    position: relative;
    overflow: hidden;
}

.karriere-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.karriere-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 07.08.2026 (Florian): Das Bild ist jetzt schon passend zugeschnitten
       (karriere-header-module.webp, 2400 x 567, Verhältnis 4,23:1), deshalb
       reicht hier center.

       Vorgeschichte: Erst stand hier "center 40%", da lag der Arbeitshandschuh
       mitten im Ausschnitt. Dann "center 96%" - Handschuh weg, aber unscharf,
       weil der Header nur 35 Prozent der Bildhöhe zeigte und die alte Datei mit
       1600 px auf 1905 px hochgerechnet werden musste. Zusätzlich liegt der
       untere Bildbereich außerhalb der Schärfeebene des Fotos.
       Lösung: das Unsplash-Original in voller Auflösung geholt (8192 x 5464),
       daraus genau den Streifen geschnitten, der dem früheren "65%" entspricht.
       Dadurch wird nichts mehr hochgerechnet, das Bild ist scharf, und die Datei
       ist mit 53 KB sogar kleiner als vorher. */
    object-position: center;
}

/* Dunkles Overlay, damit die weiße Schrift lesbar bleibt */
.karriere-hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right, rgba(31, 32, 33, 0.92) 0%, rgba(31, 32, 33, 0.78) 55%, rgba(31, 32, 33, 0.55) 100%);
}

.karriere-hero > .container {
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    .karriere-hero-bg::after {
        background: rgba(31, 32, 33, 0.86);
    }
}