/**
 * Orangj – Custom Styles
 *
 * Zentrale Datei für individuelle CSS-Anpassungen an der Website,
 * unabhängig vom jeweiligen Bereich (Stellenanzeigen, Karriere-Seite,
 * künftige weitere Anpassungen). Neue Abschnitte gerne einfach unten
 * anhängen, mit einem kurzen Kommentar, wofür der Block ist.
 */

/* ==========================================================================
   Stellenausschreibungen – Icon-Liste (Aufgabenbereiche/Anforderungen/
   Perspektiven/Vorteile)
   ========================================================================== */
.stellenausschreibung-icon-liste {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}
.stellenausschreibung-icon-liste li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 14.4px;
}
.stellenausschreibung-icon-liste li svg {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 3px;
	color: #6b7280;
}
.stellenausschreibung-icon-liste li span {
	font-family: "Montserrat", sans-serif;
	font-size: 18px;
	color: #5A6061;
	margin: 0;
}

/* ==========================================================================
   Karriere-Seite – Standort-Filter (Elementor Taxonomie-Filter-Widget)
   Selektoren bewusst mit ".elementor-widget-taxonomy-filter" vorangestellt,
   damit sie dieselbe Spezifitaet wie Elementors eigene Filter-Regeln haben
   und diese zuverlaessig ueberstimmen.
   ========================================================================== */
.elementor-widget-taxonomy-filter {
	margin-bottom: 40px;
}
.elementor-widget-taxonomy-filter .elementor-widget-container {
	display: flex;
	align-items: center;
	height: 100%;
}
.elementor-widget-taxonomy-filter .e-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	margin: 0 0 0 8px;
}
.elementor-widget-taxonomy-filter .e-filter-item {
	font-family: "Montserrat", sans-serif;
	font-size: 18px;
	font-weight: 500;
	padding: 12px 28px;
	border: 1px solid #ECECEC;
	border-radius: 999px;
	background: transparent;
	color: #5A6061;
	cursor: pointer;
	transition: all 0.2s ease;
}
.elementor-widget-taxonomy-filter .e-filter-item:hover {
	border-color: var(--e-global-color-38dbece);
	color: var(--e-global-color-38dbece);
}
.elementor-widget-taxonomy-filter .e-filter-item[aria-pressed="true"] {
	background: var(--e-global-color-38dbece);
	border-color: var(--e-global-color-38dbece);
	color: #fff;
}

/* ==========================================================================
   Karriere-Seite – Loop-Item-Karte: Titel-Block breiter machen.
   Beide Container (Titel + Details) standen im Template auf "Wachsen"
   (flex-grow:1), wodurch sie sich die Zeile stur 50/50 teilten. Details-Block
   bekommt das Wachstum weggenommen (nur noch Inhaltsbreite), Titel-Block
   bekommt dadurch den frei werdenden Platz.
   ========================================================================== */
.elementor-element.elementor-element-66e063a {
	flex: 1 1 0% !important;
}
.elementor-element.elementor-element-ac03b33 {
	flex: 0 0 auto !important;
	width: auto !important;
}

/* ==========================================================================
   Karriere-Seite – Loop-Item-Karte: gestapeltes Layout unterhalb Desktop.
   Nebeneinander (Titel + Details in einer Zeile) funktioniert nur, wenn die
   einzelne Karte wirklich breit ist - "DETAILS" (feste Breite) nimmt sonst
   einen unverhältnismäßig großen Anteil der knappen Zeilenbreite, wodurch
   der Titel-Block (durch word-break: break-word auf ".e-loop-item *"
   erlaubt) bis auf Buchstabenbreite zusammengequetscht wird.
   Grenze bewusst bei 1024px statt nur 767px: Die Loop-Grid-Query steht auf
   "columns_tablet":"2" - im Tablet-Bereich (768-1024px) sind Karten durch
   die 2-Spalten-Ansicht ebenfalls schmal (~350-480px), nicht erst ab Mobile.
   Erst ab echtem Desktop (≥1025px, "columns":1, volle Kartenbreite) ist
   sicher genug Platz für die Zeilen-Variante.
   ========================================================================== */
@media (max-width: 1024px) {
	.elementor-element.elementor-element-c1379fc {
		flex-direction: column !important;
		align-items: stretch !important;
	}
	.elementor-element.elementor-element-66e063a {
		width: 100% !important;
	}
	.elementor-element.elementor-element-ac03b33 {
		width: 100% !important;
		margin-top: 12px;
	}
}

/* ==========================================================================
   Karriere-Seite – Loop-Grid bis 1024px einspaltig erzwingen.
   Fallback per CSS, falls die Spalten-Einstellung im Loop-Grid-Widget
   selbst (Inhalt-Tab -> Spalten -> Tablet) nicht angepasst wird. Sauberer
   ist die Änderung direkt im Widget, da "columns_tablet" dann gar nicht
   erst auf 2 steht statt per CSS überschrieben zu werden.
   ========================================================================== */
@media (max-width: 1024px) {
	.elementor-element-be63010 .elementor-loop-container.elementor-grid {
		grid-template-columns: 1fr !important;
	}
}

/* ==========================================================================
   Karriere-Seite – Loop-Item-Karte: Titel-Schriftgröße auf Mobile
   verkleinern, damit lange Stellentitel seltener/weniger stark umbrechen.
   Klassenbasiert (nicht ID-basiert) statt des Widget-Titels, damit es für
   jede Karte im Loop greift, unabhängig von der jeweiligen Element-ID.
   Eingegrenzt auf die Titel-Widget-ID (0ab9d94) statt der generischen
   Heading-Klasse - sonst trifft es auch "Vollzeit"/"Festanstellung" und
   "DETAILS", die ebenfalls Heading-Widgets sind, aber bewusst kleiner
   gestylt waren.
   ========================================================================== */
@media (max-width: 767px) {
	.e-loop-item .elementor-element-0ab9d94 .elementor-heading-title {
		font-size: 20px !important;
	}
}

/* ==========================================================================
   Karriere-Seite – Standort-Filter unter 500px: Elementor setzt hier
   standardmäßig overflow-x statt Zeilenumbruch, wodurch die Pills bei drei
   Standorten seitlich abgeschnitten werden. Umbruch erzwingen, Overflow
   deaktivieren, Pills zentrieren und etwas kompakter für schmale Screens.
   ========================================================================== */
@media (max-width: 499px) {
	.elementor-widget-taxonomy-filter,
	.elementor-widget-taxonomy-filter .e-filter {
		overflow-x: visible !important;
	}
	.elementor-widget-taxonomy-filter .e-filter {
		flex-wrap: wrap !important;
		justify-content: center !important;
		gap: 10px;
		margin: 0 0 24px 0;
	}
	.elementor-widget-taxonomy-filter .e-filter-item {
		font-size: 15px;
		padding: 8px 18px;
	}
}

/* ==========================================================================
   Karriere-Seite – Loop-Item-Karte: Icon + Text (Standort/Dauer) als
   untrennbare Einheit. Voraussetzung: Icon-Widget + Text-Widget wurden in
   Elementor in einen gemeinsamen Container gepackt mit dieser CSS-Klasse.
   Verhindert, dass die Zeile genau zwischen Icon und zugehörigem Text
   umbricht (Icon bleibt immer direkt vor seinem Text).
   ========================================================================== */
.meta-icon-gruppe {
	display: flex;
	flex-wrap: nowrap !important;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

/* ==========================================================================
   Weitere Anpassungen hier anhängen
   ========================================================================== */