/* =========================================================
   AI ENGINEERING – CAMPUSLEBEN
========================================================= */

.ai-campus-page {
	overflow-x: hidden;
}



/* =========================================================
   HERO
========================================================= */

.ai-campus-hero {
	position: relative;
	min-height: 790px;

	display: flex;
	align-items: center;

	padding:
		150px 0
		105px;

	overflow: hidden;

	background: #07111e;
}


.ai-campus-hero-bg {
	position: absolute;
	inset: 0;

	background:
		linear-gradient(
			90deg,
			rgba(5, 13, 24, 0.98) 0%,
			rgba(5, 13, 24, 0.92) 38%,
			rgba(5, 13, 24, 0.66) 68%,
			rgba(5, 13, 24, 0.40) 100%
		),
		url("../img/freizeit.jpg")
		center / cover no-repeat;

	transform: scale(1.02);
}


.ai-campus-hero-bg::after {
	content: "";

	position: absolute;
	inset: 0;

	background:
		linear-gradient(
			to bottom,
			rgba(7,17,30,.05),
			rgba(7,17,30,.18) 60%,
			#07111e 100%
		);
}


.ai-campus-hero-grid {
	position: absolute;
	inset: 0;

	background-image:
		linear-gradient(
			rgba(255,255,255,.025) 1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			rgba(255,255,255,.025) 1px,
			transparent 1px
		);

	background-size:
		70px 70px;

	mask-image:
		linear-gradient(
			to bottom,
			rgba(0,0,0,.7),
			transparent
		);

	pointer-events: none;
}


.ai-campus-hero-content {
	position: relative;
	z-index: 2;
}


.ai-campus-hero-card {
	position: relative;

	padding: 33px;

	border-radius: 26px;

	background:
		linear-gradient(
			145deg,
			rgba(255,255,255,.10),
			rgba(255,255,255,.035)
		);

	border:
		1px solid
		rgba(255,255,255,.14);

	backdrop-filter:
		blur(16px);

	-webkit-backdrop-filter:
		blur(16px);

	box-shadow:
		0 30px 80px
		rgba(0,0,0,.34);
}


.ai-campus-hero-point {
	display: flex;
	align-items: center;

	gap: 16px;

	padding:
		18px 0;

	border-bottom:
		1px solid
		rgba(255,255,255,.09);
}


.ai-campus-hero-point:last-child {
	border-bottom: 0;
}


.ai-campus-hero-point > i {
	flex:
		0 0 48px;

	width: 48px;
	height: 48px;

	display: flex;
	align-items: center;
	justify-content: center;

	border-radius: 14px;

	background:
		rgba(50,215,255,.11);

	border:
		1px solid
		rgba(50,215,255,.14);

	color:
		var(
			--ai-highlight,
			#32d7ff
		);

	font-size:
		1.05rem;
}


.ai-campus-hero-point strong {
	display: block;

	color: #fff;

	font-size:
		1.02rem;

	margin-bottom:
		2px;
}


.ai-campus-hero-point span {
	color:
		rgba(255,255,255,.67);

	font-size:
		.89rem;
}



/* =========================================================
   INTRO
========================================================= */

.ai-campus-feature-grid {
	margin-top:
		44px;
}


.ai-campus-feature {
	height: 100%;

	padding: 30px;

	border-radius:
		22px;

	background:
		rgba(255,255,255,.032);

	border:
		1px solid
		rgba(255,255,255,.08);

	transition:
		transform .25s ease,
		border-color .25s ease,
		background .25s ease;
}


.ai-campus-feature:hover {
	transform:
		translateY(-5px);

	border-color:
		rgba(50,215,255,.34);

	background:
		rgba(50,215,255,.045);
}


.ai-campus-feature h3 {
	margin-top:
		20px;

	margin-bottom:
		10px;
}


.ai-campus-feature p {
	margin: 0;

	opacity: .75;

	line-height:
		1.7;
}



/* =========================================================
   ORTE / BILDBEREICHE
========================================================= */

.ai-campus-place {
	position: relative;
}


.ai-campus-place-media {
	position: relative;

	height: 480px;

	overflow: hidden;

	border-radius:
		28px;

	background:
		#0c1825;

	border:
		1px solid
		rgba(255,255,255,.08);

	box-shadow:
		0 30px 75px
		rgba(0,0,0,.28);
}


.ai-campus-place-media img {
	width: 100%;
	height: 100%;

	object-fit: cover;

	display: block;

	transition:
		transform
		.7s
		cubic-bezier(.2,.7,.2,1);
}


.ai-campus-place-media:hover img {
	transform:
		scale(1.035);
}


.ai-campus-place-media::after {
	content: "";

	position: absolute;
	inset: 0;

	background:
		linear-gradient(
			to top,
			rgba(5,13,24,.72),
			transparent 48%
		);

	pointer-events: none;
}


.ai-campus-place-badge {
	position: absolute;

	left: 22px;
	bottom: 22px;

	z-index: 3;

	display: inline-flex;
	align-items: center;

	gap: 9px;

	padding:
		10px 15px;

	border-radius:
		999px;

	background:
		rgba(7,17,30,.84);

	backdrop-filter:
		blur(11px);

	-webkit-backdrop-filter:
		blur(11px);

	color: #fff;

	border:
		1px solid
		rgba(255,255,255,.13);
}


.ai-campus-place-badge i {
	color:
		var(
			--ai-highlight,
			#32d7ff
		);
}


.ai-campus-place-copy h2 {
	margin-bottom:
		20px;
}


.ai-campus-place-copy > p {
	opacity: .79;

	font-size:
		1.02rem;

	line-height:
		1.76;
}



/* =========================================================
   COMMUNITY / FREIZEIT / WOHNEN
========================================================= */

.ai-campus-image-card {
	height: 100%;

	overflow: hidden;

	border-radius:
		24px;

	background:
		linear-gradient(
			145deg,
			rgba(255,255,255,.055),
			rgba(255,255,255,.018)
		);

	border:
		1px solid
		rgba(255,255,255,.085);

	box-shadow:
		0 18px 55px
		rgba(0,0,0,.14);

	transition:
		transform .25s ease,
		border-color .25s ease,
		box-shadow .25s ease;
}


.ai-campus-image-card:hover {
	transform:
		translateY(-6px);

	border-color:
		rgba(50,215,255,.35);

	box-shadow:
		0 24px 65px
		rgba(0,0,0,.22);
}


.ai-campus-image-wrap {
	position: relative;

	height: 235px;

	overflow: hidden;
}


.ai-campus-image-wrap::after {
	content: "";

	position: absolute;
	inset: 0;

	background:
		linear-gradient(
			to top,
			rgba(7,17,30,.45),
			transparent 55%
		);

	pointer-events: none;
}


.ai-campus-image-card img {
	width: 100%;
	height: 100%;

	object-fit: cover;

	display: block;

	transition:
		transform .6s ease;
}


.ai-campus-image-card:hover img {
	transform:
		scale(1.04);
}


.ai-campus-image-number {
	position: absolute;

	right: 18px;
	bottom: 12px;

	z-index: 2;

	font-size:
		3.2rem;

	font-weight: 800;

	line-height: 1;

	color:
		rgba(255,255,255,.30);
}


.ai-campus-image-card-content {
	padding:
		27px;
}


.ai-campus-image-card-content h3 {
	margin-bottom:
		12px;
}


.ai-campus-image-card-content > p:last-of-type {
	opacity: .72;

	line-height:
		1.68;

	margin-bottom:
		0;
}


.ai-inline-link {
	display: inline-flex;
	align-items: center;

	gap: 9px;

	margin-top:
		20px;

	color:
		var(
			--ai-highlight,
			#32d7ff
		);

	font-weight:
		650;

	text-decoration:
		none;

	transition:
		color .2s ease,
		gap .2s ease;
}


.ai-inline-link:hover {
	color: #fff;

	gap: 12px;
}



/* =========================================================
   JOBS
========================================================= */

.ai-campus-jobs {
	position: relative;

	background:
		linear-gradient(
			180deg,
			#081421 0%,
			#0b1928 100%
		);
}


.ai-campus-jobs::before {
	content: "";

	position: absolute;

	width: 550px;
	height: 550px;

	top: 80px;
	right: -200px;

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(50,215,255,.07),
			transparent 67%
		);

	pointer-events: none;
}


.ai-job-notice {
	position: relative;

	display: flex;
	align-items: flex-start;

	gap: 14px;

	max-width: 920px;

	margin:
		0 auto 44px;

	padding:
		18px 20px;

	border-radius:
		16px;

	background:
		rgba(255,255,255,.035);

	border:
		1px solid
		rgba(255,255,255,.075);
}


.ai-job-notice > i {
	color:
		var(
			--ai-highlight,
			#32d7ff
		);

	margin-top:
		4px;
}


.ai-job-notice p {
	margin: 0;

	font-size:
		.89rem;

	opacity: .7;

	line-height:
		1.6;
}



/* =========================================================
   JOB CARDS
========================================================= */

.ai-campus-jobs .job-card,
.ai-campus-jobs .ai-job-card {
	position: relative;

	height: 100%;

	overflow: hidden;

	cursor: pointer;

	border-radius:
		22px;

	background:
		linear-gradient(
			145deg,
			rgba(255,255,255,.064),
			rgba(255,255,255,.023)
		);

	border:
		1px solid
		rgba(255,255,255,.085);

	box-shadow:
		0 20px 50px
		rgba(0,0,0,.18);

	transition:
		transform .25s ease,
		border-color .25s ease,
		box-shadow .25s ease;
}


.ai-campus-jobs .job-card:hover,
.ai-campus-jobs .ai-job-card:hover {
	transform:
		translateY(-6px);

	border-color:
		rgba(50,215,255,.38);

	box-shadow:
		0 28px 65px
		rgba(0,0,0,.26);
}


.ai-campus-jobs .job-logo {
	height: 130px;

	display: flex;
	align-items: center;
	justify-content: center;

	padding: 25px;

	background:
		rgba(255,255,255,.96);
}


.ai-campus-jobs .job-logo img {
	max-width:
		175px;

	max-height:
		82px;

	object-fit:
		contain;
}


.ai-job-card-body {
	padding:
		25px;
}


.ai-job-card-meta {
	display: flex;
	flex-wrap: wrap;

	gap: 8px;

	margin-bottom:
		17px;
}


.ai-job-card-meta span {
	display: inline-flex;
	align-items: center;

	gap: 6px;

	padding:
		6px 9px;

	border-radius:
		999px;

	font-size:
		.77rem;

	background:
		rgba(50,215,255,.08);

	border:
		1px solid
		rgba(50,215,255,.16);

	color:
		rgba(255,255,255,.76);
}


.ai-job-card-meta i {
	color:
		var(
			--ai-highlight,
			#32d7ff
		);
}


.ai-job-card h3,
.ai-campus-jobs .job-title {
	color: #fff;

	font-size:
		1.15rem;

	line-height:
		1.42;

	margin-bottom:
		10px;
}


.ai-job-card .job-name {
	color:
		rgba(255,255,255,.56);

	font-size:
		.9rem;

	margin-bottom:
		22px;
}



/* Fallback für alte job-loader.php Cards */

.ai-campus-jobs .job-card > .job-name,
.ai-campus-jobs .job-card > .job-location,
.ai-campus-jobs .job-card > .job-title,
.ai-campus-jobs .job-card > .btn {
	margin-left:
		24px;

	margin-right:
		24px;
}


.ai-campus-jobs .job-card > .job-name {
	margin-top:
		23px;
}


.ai-campus-jobs .job-card > .job-location {
	color:
		var(
			--ai-highlight,
			#32d7ff
		);

	font-size:
		.85rem;
}


.ai-campus-jobs .job-card > .job-title {
	margin-top:
		12px;
}


.ai-campus-jobs .job-card > .btn {
	margin-bottom:
		24px;
}



/* =========================================================
   JOB LOAD STATE
========================================================= */

.ai-job-loading,
.ai-job-empty {
	padding: 42px;

	text-align: center;

	border-radius:
		18px;

	background:
		rgba(255,255,255,.035);

	border:
		1px solid
		rgba(255,255,255,.07);

	color:
		rgba(255,255,255,.65);
}


.ai-job-loading i {
	color:
		var(
			--ai-highlight,
			#32d7ff
		);

	margin-right:
		8px;
}



/* =========================================================
   JOB MODAL
========================================================= */

.ai-job-modal .modal-content {
	overflow: hidden;

	border-radius:
		24px;

	background:
		#0b1826;

	color: #fff;

	border:
		1px solid
		rgba(255,255,255,.10);

	box-shadow:
		0 35px 110px
		rgba(0,0,0,.58);
}


.ai-job-modal .modal-header {
	padding:
		27px 30px;

	border-bottom:
		1px solid
		rgba(255,255,255,.08);
}


.ai-job-modal .modal-title {
	font-size:
		1.4rem;

	font-weight:
		750;
}


.ai-job-modal .modal-body {
	padding:
		30px;
}


.ai-job-modal .modal-footer {
	padding:
		20px 30px;

	border-top:
		1px solid
		rgba(255,255,255,.08);
}


.ai-job-modal-meta {
	display: flex;
	flex-wrap: wrap;

	gap: 9px;

	margin-bottom:
		28px;
}


.ai-job-modal-meta > span {
	padding:
		8px 11px;

	border-radius:
		999px;

	background:
		rgba(50,215,255,.08);

	border:
		1px solid
		rgba(50,215,255,.15);

	font-size:
		.84rem;

	color:
		rgba(255,255,255,.76);
}


.ai-job-modal-meta i {
	color:
		var(
			--ai-highlight,
			#32d7ff
		);

	margin-right:
		6px;
}


.ai-job-description {
	color:
		rgba(255,255,255,.76);

	line-height:
		1.75;
}


.ai-job-contact {
	margin-top:
		30px;

	padding-top:
		25px;

	border-top:
		1px solid
		rgba(255,255,255,.08);
}


.ai-job-contact h3 {
	font-size:
		1rem;

	margin-bottom:
		15px;
}


.ai-job-contact p {
	margin-bottom:
		7px;

	color:
		rgba(255,255,255,.67);
}


.ai-job-contact a {
	color:
		var(
			--ai-highlight,
			#32d7ff
		);
}



/* =========================================================
   FINAL CTA
========================================================= */

.ai-campus-cta {
	position: relative;

	padding:
		90px 0;

	overflow: hidden;

	background:
		radial-gradient(
			circle at 80% 50%,
			rgba(50,215,255,.09),
			transparent 35%
		),
		#07111e;
}


.ai-campus-cta-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 40px;

	padding:
		45px;

	border-radius:
		28px;

	background:
		linear-gradient(
			145deg,
			rgba(255,255,255,.06),
			rgba(255,255,255,.025)
		);

	border:
		1px solid
		rgba(255,255,255,.085);
}


.ai-campus-cta-inner h2 {
	margin-bottom:
		10px;
}


.ai-campus-cta-inner p {
	max-width:
		620px;

	margin: 0;

	opacity: .7;

	line-height:
		1.7;
}


.ai-campus-cta-actions {
	display: flex;

	gap: 12px;

	flex-shrink: 0;
}



/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {

	.ai-campus-hero {
		min-height: auto;

		padding:
			135px 0
			100px;
	}


	.ai-campus-hero-bg {
		background-position:
			center;
	}


	.ai-campus-hero-card {
		margin-top:
			10px;
	}


	.ai-campus-place-media {
		height:
			390px;
	}


	.ai-campus-cta-inner {
		flex-direction:
			column;

		align-items:
			flex-start;
	}


	.ai-campus-cta-actions {
		width: 100%;

		flex-wrap:
			wrap;
	}

}



@media (max-width: 575px) {

	.ai-campus-hero {
		padding-top:
			115px;

		padding-bottom:
			85px;
	}


	.ai-campus-hero-bg {
		background:
			linear-gradient(
				to bottom,
				rgba(5,13,24,.82),
				rgba(5,13,24,.94)
			),
			url("../img/freizeit.jpg")
			center / cover no-repeat;
	}


	.ai-campus-hero-card {
		padding:
			24px;
	}


	.ai-campus-place-media {
		height:
			285px;

		border-radius:
			20px;
	}


	.ai-campus-image-wrap {
		height:
			215px;
	}


	.ai-campus-cta-inner {
		padding:
			28px 22px;
	}


	.ai-campus-cta-actions {
		flex-direction:
			column;
	}


	.ai-campus-cta-actions .btn {
		width: 100%;
	}


	.ai-job-modal .modal-header,
	.ai-job-modal .modal-body,
	.ai-job-modal .modal-footer {
		padding-left:
			20px;

		padding-right:
			20px;
	}

}