/* ==========================================================
   EBZ KURSÜBERSICHT
   ========================================================== */

#ebz-courses-app {
    width: 100%;
    color: #121B35;
}


/* ==========================================================
   STATUS
   ========================================================== */

#ebz-courses-status:not(:empty) {
    margin-bottom: 24px;
    font-size: 1rem;
}


/* ==========================================================
   GEMEINSAME TOOLBAR-LABEL
   ========================================================== */

.ebz-courses-toolbar-label,
.ebz-courses-search label {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #121B35;
}


/* ==========================================================
   TOOLBAR
   ========================================================== */

.ebz-courses-toolbar {
    display: grid;

    grid-template-columns:
        minmax(320px, 1fr)
        auto;

    gap: 36px;

    align-items: end;

    margin-bottom: 28px;
}


/* ==========================================================
   SUCHE
   ========================================================== */

.ebz-courses-search {
    display: flex;
    flex-direction: column;

    gap: 8px;

    max-width: 620px;
}


.ebz-courses-search input {
    width: 100%;
    min-height: 54px;
    padding: 12px 16px;
    border: none;
    background: #fff;
    color: #121B35;
    font: inherit;
    outline: none;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.ebz-courses-search input:focus {
    border-color: #121B35;

    box-shadow:
        0 0 0 2px
        rgba(158, 223, 216, 0.35);
}


/* ==========================================================
   FILTERBEREICH
   ========================================================== */

.ebz-courses-filter-wrap {
    display: flex;
    flex-direction: column;

    align-items: flex-start;

    gap: 8px;
}


.ebz-courses-filters {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}


/* ==========================================================
   FILTERBUTTONS
   ========================================================== */

.ebz-courses-filter-button {
    cursor: pointer;
	background-color: #bcf5f0;
	font-style: normal;
	text-decoration-line: none;
	text-transform: uppercase;
	font-size: 13px !important;
	font-weight: bold;
	letter-spacing: 0.6px !important;
	border: none;
	background-image: linear-gradient(
		90deg,
		rgba(214, 214, 214, 0.28) 0%,
		rgba(214, 214, 214, 0.28) 100%
	) !important;
	background-size: 0% 100% !important;
	background-repeat: no-repeat !important;
	background-position: left center !important;
	transition:
		background-size 0.6s ease,
		color 0.4s ease,
		border-color 0.4s ease !important;

	padding: 20px !important;
	margin-bottom: 10px;
	white-space: normal;
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: auto;
	-webkit-hyphens: auto;
	max-width: 100%;
	min-width: 104px;
}

.ebz-courses-filter-button:hover {
	background-size: 100% 100% !important;
}
.ebz-courses-filter-button.is-active {
    background: #9EDFD8;
}

.ebz-courses-filter-button.is-active:hover {
    background-size: auto !important;
}


/* ==========================================================
   KALENDERWOCHEN
   ========================================================== */

.ebz-courses-week-filter {
    display: flex;
    flex-direction: column;

    gap: 8px;

    margin-bottom: 34px;
}


.ebz-courses-week-list {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}

.ebz-courses-week-button {
   cursor: pointer;
	background-color: #bcf5f0;
	font-style: normal;
	text-decoration-line: none;
	text-transform: uppercase;
	font-size: 13px !important;
	font-weight: bold;
	letter-spacing: 0.6px !important;
	border: none;
	background-image: linear-gradient(
		90deg,
		rgba(214, 214, 214, 0.28) 0%,
		rgba(214, 214, 214, 0.28) 100%
	) !important;
	background-size: 0% 100% !important;
	background-repeat: no-repeat !important;
	background-position: left center !important;
	transition:
		background-size 0.6s ease,
		color 0.4s ease,
		border-color 0.4s ease !important;

	padding: 20px !important;
	margin-bottom: 10px;
	white-space: normal;
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: auto;
	-webkit-hyphens: auto;
	max-width: 100%;
	min-width: 104px;
}

.ebz-courses-week-button:hover {
    background-size: 100% 100% !important;
}

.ebz-courses-week-button.is-active {
    background-color: #9EDFD8;
}

.ebz-courses-week-button.is-active:hover {
    background-size: auto !important;
}


/* ==========================================================
   ERGEBNISZEILE
   ========================================================== */

.ebz-courses-result-header {
    display: flex;

    justify-content:
        space-between;

    align-items: center;

    margin-bottom: 18px;
}


.ebz-courses-result-count {
    margin: 0;

    font-size: 1rem;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 0.05em;
}


/* ==========================================================
   GRID
   ========================================================== */

.ebz-courses-grid {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 18px;
}


/* ==========================================================
   KURSKARTE
   ========================================================== */

.ebz-course-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100%;
    padding: 26px;
    border: none;
    background: #fff;
}


/* ==========================================================
   META / STATUS / DATUM
   ========================================================== */

.ebz-course-meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px 24px;
    margin-bottom: 30px;
}

.ebz-course-meta-left {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
    min-width: 0;
}

.ebz-course-week {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 5px 10px;
    background: #9EDFD8;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ebz-course-status {
    display: inline-flex;

    align-items: center;

    min-height: 32px;

    padding: 5px 10px;

    font-size: 0.78rem;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 0.05em;
}


.ebz-course-status-funding {
    background: #A9F389;
}


.ebz-course-status-not-funding {
    background: #E3E6E8;
}


.ebz-course-status-online {
    background: #9EBDF6;
}


.ebz-course-dates {
    flex-shrink: 0;

    font-size: 0.78rem;
    font-weight: 600;

    text-align: right;
}


/* ==========================================================
   TITEL
   ========================================================== */

.ebz-course-title {
    margin: 0;

    color: #121B35;

    font-size: clamp(1.35rem, 1.08rem + 0.55vw,1.9rem);
    line-height: 1.12;
}


.ebz-course-module {
    margin: 0 0 12px;
    font-size: 0.88rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.045em;
    opacity: 0.66;
}


/* ==========================================================
   BERUFSGRUPPEN
   ========================================================== */

.ebz-course-groups {
    margin: 0 0 20px;
	font-size: 1.5rem;
    line-height: 1.5;
}


/* ==========================================================
   FOOTER / KONTAKT
   ========================================================== */

.ebz-course-footer {
    display: flex;

    justify-content:
        space-between;

    align-items: end;

    gap: 18px;

    margin-top: auto;

    padding-top: 30px;

    border-top:
        1px solid
        rgba(18, 27, 53, 0.14);
}


.ebz-course-contact {
    display: flex;

    flex-direction: column;

    gap: 2px;

    margin: 0;
}


.ebz-course-contact span {
    font-size: 0.7rem;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.045em;

    opacity: 0.65;
}


.ebz-course-contact strong {
    font-size: 0.92rem;
}


.ebz-course-contact-button {
    cursor: pointer;
	background-color: #f1b166;
	font-style: normal;
	text-decoration-line: none;
	text-transform: uppercase;
	font-size: 13px !important;
	font-weight: bold;
	letter-spacing: 0.6px !important;
	border: none;
	background-image: linear-gradient(
		90deg,
		rgba(214, 214, 214, 0.28) 0%,
		rgba(214, 214, 214, 0.28) 100%
	) !important;
	background-size: 0% 100% !important;
	background-repeat: no-repeat !important;
	background-position: left center !important;
	transition:
		background-size 0.6s ease,
		color 0.4s ease,
		border-color 0.4s ease !important;

	padding: 20px !important;
	margin-bottom: 10px;
	white-space: normal;
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: auto;
	-webkit-hyphens: auto;
	max-width: 100%;
	min-width: 104px;
}


.ebz-course-contact-button:hover {
    background-size: 100% 100% !important;
}


/* ==========================================================
   LEERE AUSGABE
   ========================================================== */

.ebz-courses-empty {
    padding: 20px 10px !important;
    background: rgba(158, 223, 216, 0.25);
    font-weight: 600;
}


/* ==========================================================
   ANZEIGE-STEUERUNG
   ========================================================== */

.ebz-courses-load-more {
    display: flex;

    justify-content: center;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 34px;
}


/* ---------- Weitere Kurse anzeigen ---------- */

.ebz-courses-load-more-button {
    cursor: pointer;
	background-color: #bcf5f0;
	font-style: normal;
	text-decoration-line: none;
	text-transform: uppercase;
	font-size: 13px !important;
	font-weight: bold;
	letter-spacing: 0.6px !important;
	border: none;
	background-image: linear-gradient(
		90deg,
		rgba(214, 214, 214, 0.28) 0%,
		rgba(214, 214, 214, 0.28) 100%
	) !important;
	background-size: 0% 100% !important;
	background-repeat: no-repeat !important;
	background-position: left center !important;
	transition:
		background-size 0.6s ease,
		color 0.4s ease,
		border-color 0.4s ease !important;

	padding: 20px !important;
	margin-bottom: 10px;
	white-space: normal;
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: auto;
	-webkit-hyphens: auto;
	max-width: 100%;
	min-width: 104px;
}

.ebz-courses-load-more-button:hover {
    background-size: 100% 100% !important;
}


/* ---------- Alle / Weniger anzeigen ---------- */

.ebz-courses-show-all-button {
    cursor: pointer;
	background-color: #bcf5f0;
	font-style: normal;
	text-decoration-line: none;
	text-transform: uppercase;
	font-size: 13px !important;
	font-weight: bold;
	letter-spacing: 0.6px !important;
	border: none;
	background-image: linear-gradient(
		90deg,
		rgba(214, 214, 214, 0.28) 0%,
		rgba(214, 214, 214, 0.28) 100%
	) !important;
	background-size: 0% 100% !important;
	background-repeat: no-repeat !important;
	background-position: left center !important;
	transition:
		background-size 0.6s ease,
		color 0.4s ease,
		border-color 0.4s ease !important;

	padding: 20px !important;
	margin-bottom: 10px;
	white-space: normal;
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: auto;
	-webkit-hyphens: auto;
	max-width: 100%;
	min-width: 104px;
}


.ebz-courses-show-all-button:hover {
    background-size: 100% 100% !important;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 980px) {

    .ebz-courses-toolbar {
        grid-template-columns: 1fr;

        align-items: stretch;

        gap: 22px;
    }


    .ebz-courses-search {
        max-width: none;
    }


    .ebz-courses-filter-wrap {
        align-items: flex-start;
    }


    .ebz-courses-filters {
        justify-content:
            flex-start;
    }


    .ebz-courses-grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 600px) {

    .ebz-courses-toolbar {
        gap: 18px;

        margin-bottom: 26px;
    }


    .ebz-courses-filters {
        display: grid;

        grid-template-columns: 1fr;

        width: 100%;
    }


    .ebz-courses-filter-button {
        width: 100%;
    }


    .ebz-courses-week-list {
        display: grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .ebz-courses-week-button {
        width: 100%;
    }


    .ebz-course-card {
        padding: 20px;
    }


    .ebz-course-meta {
        flex-direction: column;

        align-items:
            flex-start;
    }


    .ebz-course-dates {
        text-align: left;
    }


    .ebz-course-footer {
        align-items:
            stretch;

        flex-direction:
            column;
    }


    .ebz-course-contact-button {
        width: 100%;
    }


    .ebz-courses-load-more {
        flex-direction: column;
    }


    .ebz-courses-load-more-button,
    .ebz-courses-show-all-button {
        width: 100%;
    }
}