.q-jobs-headline {
    display: flex; /* Verwendet Flexbox für eine bessere Zentrierung */
    justify-content: center; /* Zentriert den Inhalt horizontal */
    align-items: center; /* Zentriert den Inhalt vertikal (falls nötig) */
    text-align: center; /* Sorgt für zentrierten Text */
    margin: 40px 0; /* Erhöht den Abstand oben und unten */
}

.qjobs-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.qjobs-filter .top-row,
.qjobs-filter .bottom-row {
    display: flex;
    flex: 1 1 100%;
    gap: 10px;
    align-content: center;
    transition: box-shadow 0.3s ease;
}

.qjobs-filter .top-row select, .qjobs-filter .top-row input {margin-top: 0 !important;}

.qjobs-filter input[name="search"],
.qjobs-filter input[name="location"] {
    flex: 1 1 auto; /* Erlaubt den Feldern, den verfügbaren Platz zu teilen */
    min-width: 200px; /* Minimale Breite, um sicherzustellen, dass sie sichtbar sind */
    border-radius: 10px;
}

.qjobs-filter select[name="radius"],
.qjobs-filter select[name="region"],
.qjobs-filter .bottom-row select {
    flex: 1 1 auto;
    min-width: 150px;
    max-width: 165px;
    border-radius: 10px;
}
.qjobs-filter select[name="berufsgruppe"]{
	max-width: 365px;
}
.qjobs-filter select[name="arbeitszeit"]{
	max-width: 190px;
}

.qjobs-filter button {
    flex: 1 1 auto;
    min-width: 150px;
    max-width: 200px;
    align-self: flex-end;
    padding: 11px 29px !important;
	border-radius: 10px !important;
}

.qjobs-filter button:hover {
    border: 1px solid;
}

/* Media Query für Desktop */
@media (min-width: 1024px) {
.qjobs-filter input[name="search"] {
    border-radius: 10px 0 0 10px;
	margin-right: -10px;
}
.qjobs-filter input[name="location"]
	{
    border-radius: 0 10px 10px 0;
	}
}
/* Media Query für mobile Geräte */
@media (max-width: 600px) {
	
	
	.qjobs-filter .top-row:focus-within {
		box-shadow: 0px 0px 10px rgba(0, 0, 0, .5);
	}

    .qjobs-filter .top-row {
        flex-direction: column;
		border-radius: 10px;
		background-color:#0194c7;
		padding: 20px;
    }

    .qjobs-filter input[name="search"],
    .qjobs-filter input[name="location"] {
        width: 100%;
        margin-right: 0;
    }
	
	.qjobs-filter .top-row,
    .qjobs-filter .bottom-row {
        flex-direction: row !important; /* Ändert die Richtung auf Zeile */
        flex-wrap: wrap !important; /* Erlaubt das Umbrechen, falls nötig */
    }

    .qjobs-filter select[name="radius"]{
		flex: 1 1 35% !important; /* Erhöht auf 45%, um mehr Platz zu geben */
		min-width:35%;
		max-width: 35% !important; /* Entfernt das enge Limit */
	}

	.qjobs-filter button {
		flex: 1 1 60% !important;
	}

	.qjobs-filter button {padding: 11px !important;}
	.qjobs-filter .bottom-row select {width: 100%; max-width: 100%;}
}

/************** END FILTER ******************/

.qjobs-list {
    list-style:none !important;
    padding: 0 !important;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px; /* Abstand zwischen den Cards */
}

.qjobs-item {
	list-style:none !important;
	background: #e2f5ff;
  	border-radius: 10px;
  	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.qjobs-item .fa {color:#0095c6; margin-right:10px !important;}

.qjobs-item-content {padding: 0 20px 20px 20px;}

/* Grid-Childs dürfen schrumpfen, sonst klemmt der Umbruch in CSS Grid */
.qjobs-item,
.qjobs-item-content { min-width: 0; }

/* Titel & Link: erlaubtes Umbrechen + Silbentrennung */
.qjobs-item-content h3,
.qjobs-item-content h3 a {
  overflow-wrap: anywhere;      /* moderne, robuste Variante */
  word-break: break-word;       /* Fallback für ältere Browser */
  hyphens: auto;                /* automatische Silbentrennung */
  -webkit-hyphens: auto;        /* Safari */
  -ms-hyphens: auto;            /* sehr alte IE/Edge */
  display: block;               /* optional – macht’s robuster */
}

.job-image {
    width: 100%;              /* Volle Breite des Containers */
    max-width: 500px;         /* Begrenzung der maximalen Bildbreite */
    height: 270px;            /* Feste Höhe bleibt erhalten */
    object-fit: cover;        /* Bild wird zugeschnitten, um das Verhältnis zu behalten */
    object-position: center;  /* Sorgt für zentrierten Bildausschnitt */
    border-radius: 10px 10px 0 0;
    background-color: #f0f0f0; /* Platzhalter-Farbe für Ladebereich */
}

/********************************** Job-Detailseite **************************************************/

.qjobs-detail{display:flex; gap:30px;}

.qjobs-description {flex: 2;}
.q-jobs-info {display:flex; flex-wrap:wrap; gap:20px; margin-top: 20px; font-weight:bold; justify-content: flex-start; max-width:815px;/* Linksbündige Anordnung */}
.q-jobs-info .info-item {
    flex: 1 1 auto; /* Automatische Breite, aber flexibel */
	box-sizing: border-box;
}

.stellenbeschreibung {margin-top:25px;}

/** Wird nur für Screenreader Angezeigt **/ .sr-only {
    position: absolute;
    visibility: hidden;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    white-space: nowrap; /* Verhindert Zeilenumbruch */
}

.qjobs-description .fa {color:#0095c6; margin-right:5px;}
.qjobs-similar .fa {color:#0095c6; margin-right:10px;}

.firmenbeschreibung {
	margin-top:47px;
}

.firmenbeschreibung div {
	max-width: 61ch;
	line-height: 1.6;
}

.stellenbeschreibung div {
	max-width: 65ch;
	line-height: 1.6;
}
.stellenbeschreibung h4 {margin: 27px 0 10px 0;}

.stellenbeschreibung ul li {line-height: 1.3;}

.we-offer {margin-top:27px;}

/* Media Query für Mobilgeräte */
@media only screen and (max-width: 768px) {
    .q-jobs-info .info-item {
        flex: 1 1 100%; /* Nimmt die gesamte Breite ein */
        max-width: 100%; /* Sicherstellen, dass die maximale Breite 100% ist */
    }
}

/* Sidebar */
.qjobs-sidebar{
	flex: 1;
	margin-top:38px;
}

.qjobs-sidebar .application,
.qjobs-sidebar .callback,
.qjobs-sidebar .application-whatsapp {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: fit-content; /* Maximal nur so breit wie der Inhalt */
    padding: 0; /* Falls Padding das Problem verursacht */
    margin: 0 auto; /* Falls notwendig */
	min-width: unset !important;
}

.qjobs-apply-button {
    display: block;
    margin-bottom: 20px;
    width: fit-content;
}



.recruiter {
	text-align: center;
	background-color: #e2f5ff;
	border-radius: 10px;
	padding: 20px;
	margin-top:130px;
}
.recruiter-image {margin-top:-110px;}

.recruiter-image img {
	max-width: 65%;
    border-radius: 50%;
    border: solid 10px #e2f5ff;
}
/*** End Sidebar *****/


/**** Ähnliche Jobs *****/
.qjobs-similar {margin-top: 40px;}

.qjobs-grid {
    display: -webkit-grid;
    display: grid;
    -webkit-grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px; /* Abstand zwischen den Cards */
}

.qjobs-card {
    list-style: none !important;
    background: #e2f5ff;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    -webkit-grid-column: span 1; /* Explizite Platzierung */
    grid-column: span 1; /* Explizite Platzierung */
}

.qjobs-card h4 {
            font-size: 18px;
            margin-bottom: 8px;
        }

.qjobs-similar h2 {margin: 27px 0 20px 0;}

@media (min-width: 768px) {
a.qjobs-apply-button.first.btn.btn-sm.btn-circle.btn-color-224964 {display:none !important;}
}

@media (max-width: 768px) {
            .qjobs-card {
                /*flex: 1 1 100%;*/
            }
			
			.qjobs-detail {
				flex-direction: column; /* Ändert die Flex-Richtung auf Spalte */
			}

			.qjobs-description,
			.qjobs-sidebar {
				flex: 1 1 100%; /* Nimmt die volle Breite ein */
				margin-top: 20px; /* Reduziert den Abstand zwischen den Elementen */
			}
			
			
        }