@font-face {
	font-family: "Montserrat";
	src: url("/fonts/Montserrat.woff2") format("woff2"),
		url("/fonts/Montserrat.woff") format("woff"),
		url("/fonts/Montserrat.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "Montserrat";
	src: url("/fonts/Montserrat.woff2") format("woff2"),
		url("/fonts/Montserrat.woff") format("woff"),
		url("/fonts/Montserrat.ttf") format("truetype");
	font-weight: bold;
	font-style: normal;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

img {
	max-width: 100%;
	height: auto;
}

:root {
	font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
	line-height: 1.5;
	font-weight: 400;
	--color-black: #2a2a2a;
	--color-white: #ffffff;
	--color-orange-light: #eb721f;
	--color-orange-dark: #e74124;
	--color-blue-dark: #1a2b43;
	--color-blue-light: #038cb2;
	--color-blue-dark-1: #334878;
	--color-blue-dark-2: #52689d;
	--color-blue-dark-3: #869acd;
	--color-wave-light: #5dc5ed;
	--color-wave-dark: #398ccb;
	--color-wave-blue: #038bce;
	--color-grey-light: #f5f5f5;
	--color-grey-darker: #acacac;
	--color-black-80-transparent: rgba(0, 0, 0, 0.8);
}

html,
body {
	font-family: "Montserrat", sans-serif;
	color: var(--color-black);
	line-height: 1.6;
	overflow-x: hidden;
	scroll-behavior: smooth;
	min-height: 100vh;
	cursor: auto;
	background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
		url("/img/hintergrund-homepage.webp") no-repeat;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}

h1 {
	font-size: clamp(2rem, 4vw, 2.4rem);
	font-weight: 400;
}

h2 {
	font-size: clamp(1.6rem, 2vw, 1.6rem);
	font-weight: 500;
}

h3 {
	font-size: clamp(1.25rem, 2vw, 1.6rem);
}

h4,
label {
	font-size: clamp(1rem, 2vw, 1.25rem);
}

p {
	font-size: clamp(1.25rem, 2vw, 1.4rem);
}

:where(h1, h2, h3, h4, h5, h6, p, li):hover {
	cursor: default;
}

.box-white-transparent-75 {
	background: rgba(255, 255, 255, 0.75);
}

/* ============================================
   GLOBALE UTILITY-KLASSEN
   ============================================ */

/* Container */
.container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 20px;
}

.container-sm {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

.container-lg {
	max-width: 1600px;
	margin: 0 auto;
	padding: 0 20px;
}

/* Section */
.section {
	padding: 80px 20px;
}

.section-sm {
	padding: 60px 20px;
}

.section-lg {
	padding: 120px 20px;
}

/* Hero */
.hero {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 50px;
	padding: 40px 20px;
}

.hero-content {
	text-align: center;
	z-index: 2;
	position: relative;
}

/* Card */
.card {
	border-radius: calc(1rem - 5px);
	padding: 1rem;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.card-lg {
	padding: 1rem;
}

.services-container,
.about-section,
.equipment-container {
	padding: 4rem 1rem;
}

/* Card Padding Utility */
.service-card,
.about-card,
.package-card {
	padding: 1rem;
	border-radius: calc(1rem - 5px);
}

/* Global Logo Container */
.card-logo {
	margin-bottom: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-blue-dark);
	border-radius: 50%;
	padding: 20px;
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
}

.card-logo img {
	height: 120px;
	width: 120px;
	max-width: 100%;
	object-fit: contain;
}

/* Transparent Logo Container (ohne Hintergrund) */
.transparent-logo {
	margin-bottom: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
}

/* Grey Logo Container (mit Hintergrund) */
.darkblue-logo {
	width: 160px;
	height: 160px;
	background: var(--color-blue-dark);
	border-radius: 50%;
	margin: 0 auto 2rem auto;
	padding: 15px;
}

.transparent-logo img,
.grey-logo img {
	height: 120px;
	width: 120px;
	max-width: 100%;
	object-fit: contain;
}

.darkblue-logo img {
	display: block;
	height: 100%;
	width: 100%;
	object-fit: cover;
}

/* Button */
.btn {
	display: inline-block;
	padding: 12px 30px;
	border: none;
	border-radius: 10px;
	font-size: 14px;
	font-weight: bolder;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	transition: all 0.3s ease;
	font-family: "Montserrat", sans-serif;
}

.btn-primary {
	background-color: var(--color-orange-light);
	color: var(--color-white);
}

.btn-primary:hover {
	background-color: var(--color-orange-dark);
	transform: translateY(-2px);
}

.btn-full {
	width: 100%;
	max-width: 300px;
}

/* Animationen */
.fade-in-up {
	opacity: 0;
	transform: translateY(50px);
	transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1),
		transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in-up.animate {
	opacity: 1;
	transform: translateY(0);
}

.fade-in {
	opacity: 0;
	transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in.animate {
	opacity: 1;
}

/* Grid */
.grid {
	display: grid;
	gap: 30px;
}

.grid-2 {
	grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
	grid-template-columns: repeat(3, 1fr);
}

/* Global Card Grid Container */
.card-grid {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 30px;
	justify-items: center;
}

/* Flex */
.flex {
	display: flex;
}

.flex-col {
	flex-direction: column;
}

.flex-center {
	align-items: center;
	justify-content: center;
}

.items-center {
	align-items: center;
}

.justify-center {
	justify-content: center;
}

.gap-sm {
	gap: 15px;
}

.gap-md {
	gap: 30px;
}

.gap-lg {
	gap: 48px;
}

/* Text */
.text-center {
	text-align: center;
}

.text-uppercase {
	text-transform: uppercase;
}

/* Responsive */
@media (max-width: 992px) {
	.grid-2,
	.grid-3 {
		grid-template-columns: 1fr;
	}

	.section {
		padding: 60px 20px;
	}

	.section-lg {
		padding: 100px 20px;
	}
}

@media (max-width: 768px) {
	.section {
		padding: 50px 20px;
	}

	.section-lg {
		padding: 80px 20px;
	}
}