/*
 * talent360connect — Frontend-Styles.
 * Brand-Tokens verifiziert aus Manndeckung-Elementor-Kit (post-6.css):
 *   primary   #000000
 *   secondary #0382C5
 *   text      #000000
 *   accent    #B3B3B3
 *   headings: "Inter Tight" 500
 *   body:     "Outfit" 500
 */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;600;700&family=Outfit:wght@400;500;600&display=swap');

:root {
	--t360c-color-primary:   #000000;
	--t360c-color-secondary: #0382C5;
	--t360c-color-text:      #000000;
	--t360c-color-accent:    #B3B3B3;
	--t360c-color-stripe:    #f3f3f3;
	--t360c-color-border:    #e5e5e5;
	--t360c-color-muted:     #555;

	--t360c-font-heading: "Inter Tight", system-ui, -apple-system, sans-serif;
	--t360c-font-body:    "Outfit", system-ui, -apple-system, sans-serif;
}

.t360c-jobs,
.t360c-job-detail,
.t360c-form {
	font-family: var(--t360c-font-body);
	color: var(--t360c-color-text);
}

.t360c-jobs h1, .t360c-jobs h2, .t360c-jobs h3,
.t360c-job-detail h1, .t360c-job-detail h2, .t360c-job-detail h3 {
	font-family: var(--t360c-font-heading);
	font-weight: 500;
	line-height: 1.15;
}

/* =========================
 * Listing
 * ========================= */
.t360c-jobs {
	margin: 2rem 0;
}

.t360c-jobs__filters {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem 1.5rem;
	margin-bottom: 1.5rem;
	background: var(--t360c-color-primary);
	color: #fff;
	padding: 2rem;
}

.t360c-jobs__filters input,
.t360c-jobs__filters select {
	width: 100%;
	padding: 0.85rem 1rem;
	font-family: var(--t360c-font-body);
	font-size: 1rem;
	background: transparent;
	color: #fff;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.4);
	box-sizing: border-box;
}

.t360c-jobs__filters input::placeholder { color: rgba(255, 255, 255, 0.7); }
.t360c-jobs__filters select { appearance: none; cursor: pointer; }
.t360c-jobs__filters select option { color: #000; }

.t360c-jobs__filters .t360c-jobs__search {
	grid-column: span 2;
	background: #fff;
	color: var(--t360c-color-primary);
	border: 0;
	padding: 1rem;
	font-family: var(--t360c-font-heading);
	font-size: 1rem;
	font-weight: 500;
	cursor: pointer;
	letter-spacing: 0.02em;
}

.t360c-jobs__filters .t360c-jobs__reset {
	grid-column: span 2;
	background: transparent;
	color: rgba(255, 255, 255, 0.8);
	border: 0;
	cursor: pointer;
	text-align: center;
	padding: 0.5rem;
	font-family: var(--t360c-font-body);
	font-size: 0.95rem;
	text-decoration: underline;
}

.t360c-jobs__count {
	margin: 1.5rem 0 0.5rem;
	font-size: 1rem;
	color: var(--t360c-color-text);
}

.t360c-jobs__table {
	width: 100%;
	border-collapse: collapse;
}

.t360c-jobs__table thead { display: none; }
.t360c-jobs__table tbody tr td { padding: 0; border: 0; }

.t360c-jobs__row-link {
	display: block;
	padding: 1.5rem 1.25rem;
	text-decoration: none;
	color: var(--t360c-color-text);
	border-top: 1px solid var(--t360c-color-border);
	transition: background-color 120ms ease;
}

.t360c-jobs__table tbody tr:nth-child(even) .t360c-jobs__row-link {
	background: var(--t360c-color-stripe);
}

.t360c-jobs__row-link:hover {
	background: #ebebeb;
}

.t360c-jobs__row-title {
	font-family: var(--t360c-font-heading);
	font-size: 1.6rem;
	font-weight: 500;
	margin-bottom: 0.4rem;
	color: var(--t360c-color-text);
}

.t360c-jobs__row-location {
	color: var(--t360c-color-muted);
	font-size: 1rem;
}

/* DataTables 2.x: Processing-Overlay sauber über die Tabelle, nicht in den Empty-Row */
.t360c-jobs {
	position: relative;
}

.dt-processing {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.9);
	z-index: 10;
	font-family: var(--t360c-font-body);
}

/* Verhindert "Loading…" + Empty-Row-Text gleichzeitig */
.t360c-jobs:has(.dt-processing) .dt-empty {
	visibility: hidden;
}

.dataTables_paginate,
.dt-paging {
	margin-top: 2rem;
	display: flex;
	justify-content: flex-end;
	gap: 0.4rem;
}

.dataTables_paginate .paginate_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 0.5rem;
	border: 1px solid var(--t360c-color-border);
	background: #fff;
	color: var(--t360c-color-text);
	cursor: pointer;
	font-family: var(--t360c-font-body);
}
.dataTables_paginate .paginate_button.current {
	background: var(--t360c-color-primary);
	color: #fff;
	border-color: var(--t360c-color-primary);
}
.dataTables_paginate .paginate_button.disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* =========================
 * Detailseite
 * ========================= */
.t360c-job-detail {
	margin: 0 0 4rem;
	font-family: var(--t360c-font-body);
	color: var(--t360c-color-text);
}

/* Hero ist full-bleed: aus dem Container ausbrechen, von Fenster-Rand zu Fenster-Rand. */
.t360c-job-detail__hero {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	min-height: 480px;
	background-color: #1c1c1c;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: flex-end;
	color: #fff;
}

.t360c-job-detail__hero-overlay {
	width: 100%;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 60%, rgba(0, 0, 0, 0.7) 100%);
	padding: 6rem 2rem 2.25rem;
}

.t360c-job-detail__hero-inner {
	max-width: 1200px;
	margin: 0 auto;
}

.t360c-job-detail__hero h1 {
	font-family: var(--t360c-font-heading);
	font-weight: 500;
	font-size: clamp( 2rem, 4.5vw, 3.5rem );
	line-height: 1.05;
	margin: 0 0 1.5rem;
	color: #fff;
}

.t360c-job-detail__hero-pills {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 3rem;
	font-size: 1.05rem;
}

.t360c-job-detail__hero-pills li {
	position: relative;
	padding-left: 1.4rem;
}

.t360c-job-detail__hero-pills li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: #fff;
}

/* Body unter dem Hero */
.t360c-job-detail__body {
	max-width: 880px;
	margin: 2.5rem auto 0;
	padding: 0 1rem;
}

.t360c-job-detail__reference {
	margin: 0 0 2rem;
	color: var(--t360c-color-text);
	font-weight: 400;
}

.t360c-job-detail__section {
	margin-bottom: 2.5rem;
}

.t360c-job-detail__section h2 {
	font-family: var(--t360c-font-heading);
	font-weight: 500;
	font-size: 1.5rem;
	margin: 0 0 1rem;
}

.t360c-job-detail__section ul {
	padding-left: 1.25rem;
}

.t360c-job-detail__cta {
	display: inline-flex;
	align-items: center;
	gap: 2rem;
	padding: 1rem 1.75rem;
	margin: 1rem 0 3rem;
	background: #fff;
	color: var(--t360c-color-text);
	border: 1px solid var(--t360c-color-text);
	text-decoration: none;
	font-family: var(--t360c-font-heading);
	font-weight: 500;
	font-size: 1.05rem;
	transition: background-color 120ms ease, color 120ms ease;
}

.t360c-job-detail__cta-arrow {
	font-size: 1.6em;
	line-height: 1;
}

.t360c-job-detail__cta:hover {
	background: var(--t360c-color-text);
	color: #fff;
}

/* Kontakt-Sektion: kompakter Zeilenabstand wie im alten zvoove-Layout */
.t360c-job-detail__section--contact p {
	margin: 0 0 0.4rem;
}

.t360c-job-detail__section--contact p:has(+ p:not([class])) {
	/* Adressblock dichter setzen */
}

.t360c-job-detail__section--contact strong + br + strong,
.t360c-job-detail__section--contact a {
	color: inherit;
	text-decoration: none;
}

/* =========================
 * Bewerbungsformular
 * ========================= */
.t360c-form {
	display: grid;
	gap: 1.25rem;
	max-width: 640px;
	margin: 2rem 0;
}

.t360c-form label {
	display: flex;
	flex-direction: column;
	font-family: var(--t360c-font-body);
	font-weight: 500;
	font-size: 1rem;
}

.t360c-form input,
.t360c-form select {
	margin-top: 0.4rem;
	padding: 0.85rem 1rem;
	font-family: var(--t360c-font-body);
	font-size: 1rem;
	font-weight: 400;
	border: 1px solid var(--t360c-color-border);
	background: #fff;
}

.t360c-form input:focus,
.t360c-form select:focus {
	outline: 2px solid var(--t360c-color-secondary);
	outline-offset: -2px;
	border-color: var(--t360c-color-secondary);
}

.t360c-form input[type="file"] {
	padding: 0.5rem;
}

.t360c-form .t360c-checkbox {
	flex-direction: row;
	align-items: flex-start;
	gap: 0.6rem;
	font-weight: 400;
}

.t360c-form .t360c-checkbox input { margin-top: 0.25rem; }

.t360c-form button[type="submit"] {
	background: var(--t360c-color-primary);
	color: #fff;
	border: 0;
	padding: 1.1rem;
	cursor: pointer;
	font-family: var(--t360c-font-heading);
	font-weight: 500;
	font-size: 1.1rem;
	letter-spacing: 0.02em;
	transition: background-color 120ms ease;
}

.t360c-form button[type="submit"]:hover {
	background: var(--t360c-color-secondary);
}

.t360c-form button[type="submit"]:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.t360c-form__status {
	min-height: 1.5em;
	color: var(--t360c-color-muted);
	font-size: 0.95rem;
}

/* =========================
 * Erfolgs-Modal
 * ========================= */
.t360c-form__dialog {
	border: 0;
	padding: 0;
	max-width: 480px;
	width: calc(100% - 2rem);
	background: #fff;
	color: var(--t360c-color-text);
	font-family: var(--t360c-font-body);
}

.t360c-form__dialog::backdrop {
	background: rgba(0, 0, 0, 0.6);
}

.t360c-form__dialog-inner {
	padding: 2.5rem 2rem;
	text-align: center;
}

.t360c-form__dialog-inner h2 {
	font-family: var(--t360c-font-heading);
	font-size: 1.75rem;
	font-weight: 500;
	margin: 0 0 1rem;
}

.t360c-form__dialog-inner p {
	font-size: 1rem;
	margin: 0 0 2rem;
	color: var(--t360c-color-muted);
}

dialog.t360c-form__dialog button.t360c-form__dialog-cta {
	display: inline-flex;
	align-items: center;
	gap: 2rem;
	padding: 1rem 1.75rem;
	background: #fff !important;
	color: var(--t360c-color-text) !important;
	border: 1px solid var(--t360c-color-text) !important;
	font-family: var(--t360c-font-heading);
	font-weight: 500;
	font-size: 1.05rem;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 120ms ease, color 120ms ease;
}

dialog.t360c-form__dialog button.t360c-form__dialog-cta .t360c-form__dialog-cta-arrow {
	font-size: 1.6em;
	line-height: 1;
}

dialog.t360c-form__dialog button.t360c-form__dialog-cta:hover {
	background: var(--t360c-color-text) !important;
	color: #fff !important;
}

@media (max-width: 720px) {
	.t360c-jobs__filters {
		grid-template-columns: 1fr;
	}
	.t360c-jobs__filters .t360c-jobs__search,
	.t360c-jobs__filters .t360c-jobs__reset {
		grid-column: span 1;
	}
	.t360c-job-detail__header h1 {
		font-size: 1.75rem;
	}
}