:root {
			--ifa-text: #ffffff;
			--ifa-background: #000;
			--ifa-grey: #000;
			--ifa-border: #aeca07;
		}

		html {
			scroll-behavior: smooth;
		}

		/* Titelbild */
		.hero {
			position: relative;
			display: flex;
			align-items: flex-end;
			min-height: 700px;
			overflow: hidden;
			color: #fff;
			background: #000;
		}

		.hero-image {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center;
		}

		.hero::after {
			position: absolute;
			inset: 0;
			z-index: 1;
			content: "";
			background: linear-gradient(to bottom,
					rgba(0, 0, 0, 0) 35%,
					rgba(0, 0, 0, 0.65) 100%);
		}

		.hero-content {
			position: relative;
			z-index: 2;
			width: 100%;
			padding-top: 60px;
			padding-bottom: 24px;
		}

		.hero-title {
			margin-bottom: 6px;
			font-size: 48px;
			font-weight: 550;
			line-height: 1.2;
			text-transform: uppercase;
			text-shadow: 3px 3px 0px #222222, 0px 0px 10px #000000;
			color: #aeca07;
		}

		.hero-title span {
			display: block;
		}

		.hero-subtitle {
			margin-bottom: 0;
			font-size: 22px;
			line-height: 1.4;
		}

		/* Inhaltsbereiche */
		.content-section {
			padding-top: 60px;
		}

		.section-title {
			margin-bottom: 8px;
			font-size: 38px;
			font-weight: 550;
			line-height: 1.2;
			text-transform: uppercase;
		}

		.section-description {
			margin-bottom: 0;
			font-size: 21px;
			line-height: 1.45;
		}

		.pavilion-image {
			display: block;
			width: 100%;
			height: auto;
			margin-top: 48px;
		}

		.pavilion-overlay-background {
			background: rgba(0, 0, 0, 0.7);
		}

		.card.pavilion-card {
			border-radius: 20px;
			overflow: hidden;
			padding: 0;
		}

		/* Das Bild direkt innerhalb der Card */
		.card.pavilion-card>.card-img {
			display: block;
			width: 100%;
			height: auto;
			margin: 0;
			padding: 0;
			border: 0;
		}

		.campus-section {
			padding-top: 40px;
		}

		/* Timeline */
		.timeline-panel {
			margin-top: 26px;
			padding: 32px 32px 38px;
			background: var(--ifa-grey);
		}

		.timeline-title {
			margin-bottom: 70px;
			font-size: 38px;
			line-height: 1.2;
		}

		.timeline-title-label {
			font-weight: 700;
			text-transform: uppercase;
		}

		.timeline-title-period {
			font-weight: 400;
		}

		.timeline {
			position: relative;
			display: flex;
			margin: 0;
			padding: 0;
			list-style: none;
		}

		.timeline::before {
			position: absolute;
			top: 7px;
			right: 0;
			left: 0;
			height: 1px;
			content: "";
			background: #aeca07;
		}

		.timeline-item {
			position: relative;
			flex: 1 1 0;
			padding: 30px 12px 0;
			text-align: center;
		}

		.timeline-item::before {
			position: absolute;
			top: 2px;
			left: 50%;
			width: 11px;
			height: 11px;
			content: "";
			background: var(--ifa-grey);
			border: 1px solid #aeca07;
			border-radius: 50%;
			transform: translateX(-50%);
		}

		.timeline-date {
			margin-bottom: 12px;
			font-size: 23px;
			font-weight: 400;
		}

		.timeline-heading {
			margin-bottom: 10px;
			font-size: 18px;
			font-weight: 400;
		}

		.timeline-description {
			margin-bottom: 0;
			font-size: 16px;
			line-height: 1.35;
		}

		/* Kennzahlen */
		.stats-section {
			padding-top: 36px;
			padding-bottom: 48px;
		}

		.stat-card {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			min-height: 130px;
			height: 100%;
			padding: 22px 16px;
			border: 1px solid var(--ifa-border);
			border-radius: 8px;
			text-align: center;
		}

		.stat-value-row {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 8px;
		}

		.stat-icon {
			width: 34px;
			height: 34px;
			margin-right: 16px;
			fill: none;
			stroke: currentColor;
			stroke-width: 1.7;
			stroke-linecap: round;
			stroke-linejoin: round;
			color: #aeca07;
		}

		.stat-value {
			font-size: 32px;
			line-height: 1.2;
			white-space: nowrap;
		}

		.stat-label {
			margin-bottom: 0;
			font-size: 19px;
		}

		/* Tablet */
		@media (max-width: 991.98px) {
			.site-header .navbar {
				min-height: 80px;
			}

			.site-header .navbar-nav {
				padding-top: 16px;
			}

			.site-header .nav-link {
				padding-left: 0 !important;
			}

			.hero {
				min-height: 440px;
			}

			.hero-title {
				font-size: 40px;
			}

			.hero-subtitle {
				font-size: 18px;
			}

			.section-title,
			.timeline-title {
				font-size: 32px;
			}

			.section-description {
				font-size: 19px;
			}

			.timeline-panel {
				padding-right: 20px;
				padding-left: 20px;
			}

			.timeline-item {
				padding-right: 8px;
				padding-left: 8px;
			}

			.timeline-date {
				font-size: 20px;
			}
		}

		/* Smartphone: vertikale Timeline */
		@media (max-width: 767.98px) {
			.hero {
				min-height: 400px;
			}

			.hero-title {
				font-size: 34px;
			}

			.hero-subtitle {
				font-size: 16px;
			}

			.content-section {
				padding-top: 36px;
			}

			.section-title {
				font-size: 28px;
			}

			.section-description {
				font-size: 18px;
			}

			.pavilion-image {
				margin-top: 26px;
			}

			.card.pavilion-card>.card-img {
				min-height: 420px;
				object-fit: cover;
				object-position: center;
			}

			.timeline-title {
				margin-bottom: 30px;
				font-size: 28px;
			}

			.timeline {
				display: block;
			}

			.timeline::before {
				top: 7px;
				bottom: 7px;
				left: 5px;
				width: 1px;
				height: auto;
			}

			.timeline-item {
				padding: 0 0 28px 30px;
				text-align: left;
			}

			.timeline-item:last-child {
				padding-bottom: 0;
			}

			.timeline-item::before {
				top: 7px;
				left: 0;
				transform: none;
			}

			.timeline-date {
				margin-bottom: 6px;
				font-size: 22px;
			}

			.timeline-heading {
				margin-bottom: 6px;
			}

			.stats-section {
				padding-top: 24px;
				padding-bottom: 32px;
			}

			.site-footer {
				padding: 26px 15px;
			}

			.site-footer p {
				font-size: 15px;
				line-height: 1.7;
			}
		}

		@media (max-width: 575.98px) {
			.site-header .navbar-brand {
				font-size: 18px;
				letter-spacing: 3px;
			}

			.hero-title {
				font-size: 29px;
			}

			.timeline-title-period {
				display: block;
				margin-top: 5px;
			}

			.timeline-title-separator {
				display: none;
			}
		}

		@media (prefers-reduced-motion: reduce) {
			html {
				scroll-behavior: auto;
			}
		}