/**
 * File: job-style.css
 * Created At: 24.06.25 | 16:32
 * Author: niklasmeyer
 * Description: [Kurze Beschreibung der Datei]
 * Version: [Version]
 * Last Updated: [Datum]
 * Project: goit.dev
 */

.accordion-wrapper {
    margin-bottom: 40px;
}

.accordion {
    background: white;
    padding: 24px;
    border-radius: 24px;
    box-sizing: border-box;
}

.accordion-header {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

.accordion-toggle {
    fill: var(--e-global-color-sk_color_12);
    color: var(--e-global-color-sk_color_12);
    background-color: var(--e-global-color-accent);
    border-radius: 81px 81px 81px 81px;
    padding: 12px 24px 12px 24px;

    position: absolute;
    right: 0;
    bottom: 0;

    @media screen and (max-width: 768px) {
        position: static;
    }
}

.arbeitszeitmodell {
    padding: 4px 8px;
    color: white;
    font-weight: bold;
    border-radius: 81px 81px 81px 81px;

    background: var( --e-global-color-accent );
}

.job-excerpt, .job-meta-info {
    width: 80%;
    @media screen and (max-width: 768px) {
        width: 100%;
    }
}

.job-excerpt {
    font-size: 14px!important;
    color: var(--e-global-color-ff407e3) !important;
}

.job-headline {
    display: flex;
    align-items: center;
    gap: 12px;
}

.job-pdf-download {
    display: inline-block;
    color: white!important;
    background-color: var(--e-global-color-accent);
    border-radius: 81px 81px 81px 81px;
    padding: 12px 24px 12px 24px;
    margin-bottom: 24px;
}

.job-meta-info {
    span {
        margin-right: 12px;
        font-weight: bold;
        font-size: 12px!important;
        white-space: nowrap;
        i {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            margin-right: 4px;
            padding: 4px;
            border-radius: 2px;
            width: 24px;
            color: var( --e-global-color-accent );
        }
    }
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
    /*border: 1px solid green;*/
}

/* Style the accordion panel. Note: hidden by default */
.panel {
    margin-top: 24px;
    padding: 24px;
    border-radius: 24px;
    background-color: white;
    display: none;
    overflow: hidden;

    p {
        margin-bottom: 24px!important;
    }

    h3 {
        margin-bottom: 12px!important;
    }


}