/**********************************************************************************************************
 *
 * Logo Farben
 * Blau: #0090d4
 * Rot: #c7322f
 * Dunkel Blau: #193540
 *
 **********************************************************************************************************/

:root, [data-bs-theme='light'] {
	--bs-primary: #007ebb;
	--bs-primary-rgb: 0,126,187;
	--bs-secondary: #a62926;
	--bs-secondary-rgb: 166,41,38;
	--bs-dark-blue: #193540;
	--bs-dark-blue-rgb: 25,53,64;

	--bs-body-font-size: 1.125rem;
	--bs-heading-font-family: 'Roboto Condensed', sans-serif;
	--bs-body-font-family: 'Roboto', sans-serif;
	--bs-body-font-size-small: 0.875rem;

	--bs-link-color: var(--bs-primary);
	--bs-link-color-rgb: var(--bs-primary-rgb);
	--bs-link-hover-color: #00486A;
	--bs-link-hover-color-rgb: 0,72,106;

	--bs-primary-hover: #006799;
	--bs-secondary-hover: #88221F;

	.btn-primary {
		--bs-btn-color: #fff;
		--bs-btn-bg: var(--bs-primary);
		--bs-btn-border-color: var(--bs-primary);
		--bs-btn-hover-color: #fff;
		--bs-btn-hover-bg: var(--bs-primary-hover);
		--bs-btn-hover-border-color: var(--bs-primary-hover);
		--bs-btn-active-color: #fff;
		--bs-btn-active-bg: #00486A;
		--bs-btn-active-border-color: #00486A;
		--bs-btn-disabled-color: #fff;
		--bs-btn-disabled-bg: var(--bs-primary);
		--bs-btn-disabled-border-color: var(--bs-primary);
	}

	.btn-secondary {
		--bs-btn-color: #fff;
		--bs-btn-bg: var(--bs-secondary);
		--bs-btn-border-color: var(--bs-secondary);
		--bs-btn-hover-color: #fff;
		--bs-btn-hover-bg: var(--bs-secondary-hover);
		--bs-btn-hover-border-color: var(--bs-secondary-hover);
		--bs-btn-focus-shadow-rgb: 130,138,145;
		--bs-btn-active-color: #fff;
		--bs-btn-active-bg: #6A1A18;
		--bs-btn-active-border-color: #6A1A18;
		--bs-btn-disabled-color: #fff;
		--bs-btn-disabled-bg: var(--bs-secondary);
		--bs-btn-disabled-border-color: var(--bs-secondary);
	}

	.btn-outline-light
	{
		--bs-btn-color: var(--bs-white);
	}

	.nav {
		--bs-nav-link-padding-y: 0.85rem;
	}

	.navbar {
		--bs-navbar-nav-link-padding-x: 1rem;
		--bs-navbar-padding-y: 0;
		--bs-navbar-brand-padding-y: 0.8125rem;

		--bs-navbar-color: rgba(var(--bs-body-color-rgb),0.75);
		--bs-navbar-hover-color: rgba(var(--bs-primary-rgb), 1);
		--bs-navbar-active-color: rgba(var(--bs-dark-blue-rgb), 1);
	}

	.navbar-nav
	{
		--bs-nav-link-padding-y: 1.6rem;

		--bs-nav-link-font-weight: 700;
		--bs-nav-link-color: var(--bs-navbar-color);
		--bs-nav-link-hover-color: var(--bs-navbar-hover-color);
	}

}

/**********************************************************************************************************
 *
 * Fonts
 *
 **********************************************************************************************************/

@font-face {
	font-display: swap;
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/roboto-v48-latin-regular.woff2') format('woff2');
}

@font-face {
	font-display: swap;
	font-family: 'Roboto';
	font-style: italic;
	font-weight: 400;
	src: url('../fonts/roboto-v48-latin-italic.woff2') format('woff2');
}

@font-face {
	font-display: swap;
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 700;
	src: url('../fonts/roboto-v48-latin-700.woff2') format('woff2');
}

@font-face {
	font-display: swap;
	font-family: 'Roboto';
	font-style: italic;
	font-weight: 700;
	src: url('../fonts/roboto-v48-latin-700italic.woff2') format('woff2');
}

@font-face {
	font-display: swap;
	font-family: 'Roboto Condensed';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/roboto-condensed-v31-latin-regular.woff2') format('woff2');
}

@font-face {
	font-display: swap;
	font-family: 'Roboto Condensed';
	font-style: italic;
	font-weight: 400;
	src: url('../fonts/roboto-condensed-v31-latin-italic.woff2') format('woff2');
}

@font-face {
	font-display: swap;
	font-family: 'Roboto Condensed';
	font-style: normal;
	font-weight: 700;
	src: url('../fonts/roboto-condensed-v31-latin-700.woff2') format('woff2');
}

@font-face {
	font-display: swap;
	font-family: 'Roboto Condensed';
	font-style: italic;
	font-weight: 700;
	src: url('../fonts/roboto-condensed-v31-latin-700italic.woff2') format('woff2');
}

/**********************************************************************************************************
 *
 * General
 *
 **********************************************************************************************************/

h1, h2, h3, h4, h5, h6 {
	margin-bottom: 1.75rem;
	font-weight: bold;
	font-family: var(--bs-heading-font-family);
}

h1 {
	text-transform: uppercase;
}

@media (min-width: 1200px) {
	.h1, h1 {
		font-size: 3.5rem;
	}
	.h2, h2 {
		font-size: 2.5rem;
	}
}

p {
	&:last-child {
		margin-bottom: 0;
	}
}

a {
	text-decoration: none;

	&:hover {
		text-decoration: underline;
	}
}

.pt-6 {
	padding-top: 5rem;
}

.pe-6 {
	padding-right: 5rem;
}

.pb-6 {
	padding-bottom: 5rem;
}

.ps-6 {
	padding-left: 5rem;
}

.py-6 {
	padding-top: 5rem;
	padding-bottom: 5rem;
}

.px-6 {
	padding-left: 5rem;
	padding-right: 5rem;
}

.p-6 {
	padding: 5rem;
}

@media (max-width: 991px)
{
	.container
	{
		&.py-6
		{
			padding-top: 3.5rem !important;
			padding-bottom: 3.5rem !important;
		}
	}
}


@media (max-width: 575px) {
	.row
	{
		--bs-gutter-x: 0.5rem;
		margin-left: 0;
		margin-right: 0;
	}
	.container
	{
		&.py-6
		{
			padding-top: 2rem !important;
			padding-bottom: 2rem !important;
		}
	}
}

.bg-primary-dark {
	background: var(--bs-primary-hover);
}

.bg-secondary-dark {
	background: var(--bs-secondary-hover);
}

.bg-dark-blue {
	background: var(--bs-dark-blue);
}

@media (max-width: 991px) {
	body, p {
		font-size: 0.875rem;
	}
	.form-control {
		font-size: 0.875rem;
	}
}

@media (min-width: 992px) and (max-width: 1399px) {
	body, p {
		font-size: 1rem;
	}
	.form-control {
		font-size: 1rem;
	}
}

/**********************************************************************************************************
 *
 * Header
 *
 **********************************************************************************************************/

header {
	text-align: center;
	background: url('../images/header.webp') no-repeat center center;
	background-size: cover;
	height: 100vh;

	.container {
		padding-left: 17px;
		padding-right: 17px;
	}

	[class*='col'] {
		background: #ffffff;
		background: linear-gradient(0deg,rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0) 85%);
		padding: 2rem;
		margin-right: -2px;
	}

	&.header-contact {
		height: 60vh;
		min-height: 320px;
		background-position: top 25% center;
	}

	&.header-contact2 {
		height: 50vh;
		min-height: 320px;
		background-position: center center;
	}
}

@media (max-width: 1199px) {
	header 	{
		height: 75vh;
	}
}



@media (min-width: 576px) and (max-width: 767px) {
	header 	{
		&.header-contact2 {
			height: 40vh !important;
		}
	}
}

@media (max-width: 575px) {
	header 	{
		&.header-contact2 {
			height: 30vh !important;
		}
	}
}

/**********************************************************************************************************
 *
 * Navbar
 *
 **********************************************************************************************************/

.navbar {
	background-color: rgba(var(--bs-white-rgb),0.85);
	box-shadow: 0 0 20px rgba(var(--bs-black-rgb),0.75);
	color: var(--bs-body-color);

	.navbar-brand {
		img {
			height: 60px;
			width: auto;
		}
	}
}

.navbar-nav
{
	padding-top: 0.25rem;

	.nav-link
	{
		margin: 0 2px;
	}
}

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
	border-bottom: 4px solid var(--bs-navbar-active-color);
}

.nav-link:focus, .nav-link:hover {
	border-bottom: 4px solid var(--bs-navbar-hover-color);
	text-decoration: none;
}

.navbar-toggler {
	border-radius: 0;
	border-width: 3px;
	border-color: var(--bs-dark-blue);

	&:focus {
		box-shadow: 0 0 0 var(--bs-navbar-toggler-focus-width) rgba(var(--bs-dark-blue-rgb),0.25);
	}
}

@media (max-width: 991px) {
	.nav-link
	{
		padding: calc(var(--bs-nav-link-padding-y) / 1.5) var(--bs-nav-link-padding-x);
	}
}

/**********************************************************************************************************
 *
 * Button
 *
 **********************************************************************************************************/

.btn {
	transition: all ease 0.3s;
	border-radius: 0;

	&:hover {
		text-decoration: none;
		transition: all ease 0.3s;
	}
}

@media (max-width: 991px) {
	.btn {
		font-size: 0.875rem;
	}
}

@media (min-width: 992px) and (max-width: 1399px) {
	.btn {
		font-size: 1rem;
	}
}

/**********************************************************************************************************
 *
 * Teaser
 *
 **********************************************************************************************************/

.teaser {
	background-color: var(--bs-dark-blue);

	[class*='col'] {
		&:nth-child(-n+3) {
			margin-top: -4.9rem;
		}


		.teaser-card {
			border-width: 0;
			padding: 1.25rem;
			height: 100%;
			border-radius: 0;
			transform: translate(0, 0);
			transition: all 0.3s ease-in-out;

			&:hover {
				transform: translate(0, -2rem);
				background-color: var(--bs-primary);
				color: var(--bs-white);
				box-shadow: 0 0 20px rgba(var(--bs-black-rgb),0.5);
				z-index: 10;
				position: relative;

				.btn-primary {
					color: var(--bs-primary);
					background-color: var(--bs-white);
					border-color: var(--bs-white);

					&:hover {
						background-color: var(--bs-dark-blue);
						border-color: var(--bs-dark-blue);
						color: var(--bs-white);
					}
				}
			}

			.card-title {
				font-size: 1.5rem;
				font-family: var(--bs-heading-font-family);
				font-weight: bold;
			}

		}

		&:nth-child(n+4) {
			.card
			{
				&:hover {
					background-color: var(--bs-secondary);

					.btn-secondary {
						color: var(--bs-secondary);
						background-color: var(--bs-white);
						border-color: var(--bs-white);

						&:hover {
							background-color: var(--bs-dark-blue);
							border-color: var(--bs-dark-blue);
							color: var(--bs-white);
						}
					}
				}
			}
		}
	}
}

@media (max-width: 767px) {
	.teaser {
		[class*='col'] {
			margin-top: 0;
			margin-bottom: 5px;

			&:nth-child(-n+3) {
				margin-top: 0;
			}
			&:first-child {
				margin-top: -4.9rem;
			}

		}
	}
}

@media (min-width: 768px) and (max-width: 1199px) {
	.teaser {
		[class*='col'] {
			margin-top: 0;
			margin-bottom: 5px;


			&:nth-child(-n+3) {
				margin-top: 0;
			}
			&:nth-child(3n+1) {
				margin-top: -4.9rem;
			}
		}
	}
}

@media (min-width: 1400px)  {
	.teaser {
		.card-title {
			font-size: 1.75rem !important;
		}
	}
}

/**********************************************************************************************************
 *
 * Vorher - Nachher
 *
 **********************************************************************************************************/

.img-left {
	width: 120%;
	max-width: 120%;
}

.img-right {
	width: 120%;
	max-width: 120%;
	margin-left: -20%;
	border: 5px solid var(--bs-white);
}

.before {
	margin-top: 1.5rem;
	padding-left: 2rem;

	&:after {
		content: '';
		display: block;
		border-left: 3px solid var(--bs-secondary);
		border-bottom: 3px solid var(--bs-secondary);
		height: 2rem;
		width: 2rem;
		margin-top: -1rem;
		margin-left: -2rem;
	}
}

.after {
	margin-bottom: 2rem;
	padding-right: 2rem;

	&:after {
		content: '';
		display: block;
		border-right: 3px solid var(--bs-secondary);
		border-top: 3px solid var(--bs-secondary);
		height: 2rem;
		width: 2rem;
		margin-top: -2.5rem;
		margin-left: auto;
		margin-right: -2rem;
	}
}

.bg-primary {
	.img-right {
		border-color: var(--bs-primary);
	}
	.before {
		&:after {
			border-left-color: var(--bs-white);
			border-bottom-color: var(--bs-white);
		}
	}

	.after {
		&:after {
			border-right-color: var(--bs-white);
			border-top-color: var(--bs-white);
		}
	}
}

.bg-secondary {
	.img-right {
		border-color: var(--bs-secondary);
	}
	.before {
		&:after {
			border-left-color: var(--bs-white);
			border-bottom-color: var(--bs-white);
		}
	}

	.after {
		&:after {
			border-right-color: var(--bs-white);
			border-top-color: var(--bs-white);
		}
	}
}

/**********************************************************************************************************
 *
 * Footer
 *
 **********************************************************************************************************/

footer {
	background: var(--bs-dark-blue);
	color: var(--bs-white);
	padding-top: 2rem;

	a {
		color: rgba(var(--bs-white-rgb),0.7);

		&:hover {
			color: rgb(var(--bs-white-rgb));
		}
	}

	.nav-link {
		color: rgba(var(--bs-white-rgb),0.7);
		font-size: var(--bs-body-font-size-small);

		&:hover {
			color: var(--bs-white);
		}

		&:focus, .nav-link:hover {
			color: var(--bs-white);
		}
	}

	.footer-logo {
		max-width: 150px;
	}

	.footer-top {
		padding-top: 1.5rem;
		padding-bottom: 1.5rem;
		border-bottom: 2px solid rgb(255 255 255 / 50%);
	}

	.footer-middle {
		.row {
			> [class*='col'] {
				border-right: 2px solid rgb(255 255 255 / 50%);
				padding: 0 1.5rem;

				&:last-child {
					border: 0 none;
				}

				.row {
					> [class*='col']
					{
						.row
						{
							> [class*='col'] {
								border-right: 0 none;
								padding: 0 10px;
							}
						}
					}
				}

			}
		}
	}

	.footer-bottom {
		padding-top: 1.5rem !important;
		padding-bottom: 1.5rem !important;
		font-size: var(--bs-body-font-size-small);
		border-top: 2px solid rgb(255 255 255 / 50%);
	}
}

@media (max-width: 767px) {
	footer {
		.footer-middle
		{
			margin-top: 2rem;
			margin-bottom: 2rem;

			.row
			{
				> [class*='col']
				{
					border-right-width: 0;
				}
			}
		}
	}
}

@media (min-width: 768px) and (max-width: 1199px)
{
	footer {
		.footer-middle
		{
			.row
			{
				> [class*='col']
				{
					&.col-xl-4
					{
						border-right-width: 0;
					}
				}
			}
		}
	}

}
/**********************************************************************************************************
 *
 * Kontaktformular
 *
 **********************************************************************************************************/

.contact-section {

	#form-status.alert {
		margin-bottom: 1.5rem;
	}

	.reason-option-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
		gap: 1rem;
		padding: 1.25rem;
		border: 1px solid rgba(var(--bs-dark-blue-rgb), 0.12);
	}

	.form-check-custom {
		display: flex;
		align-items: flex-start;
		gap: 0.75rem;
		padding: 1rem;
		border: 1px solid rgba(var(--bs-dark-blue-rgb), 0.12);
		transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;

		.form-check-input {
			margin-top: 0.35rem;
			flex-shrink: 0;

			&:checked {
				border-color: rgba(var(--bs-primary-rgb), 1);
				background-color: rgba(var(--bs-primary-rgb), 1);
			}
		}

		&.is-selected {
			border-color: rgba(var(--bs-primary-rgb), 1);
			background-color: rgba(var(--bs-primary-rgb), 0.08);
		}
	}

	.consultation-field
	{
		&.d-none
		{
			display: none !important;
		}
	}

	.visually-hidden
	{
		input[type='text']
		{
			border: 0;
			padding: 0;
			opacity: 0;
		}
	}

	@media (max-width: 767px) {
		.reason-option-grid {
			padding: 1rem;
		}
	}

	.form-control {
		border-radius: 0;

		&:focus
		{
			border-color: var(--bs-primary);
			box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), 0.08);
		}
	}

	.form-check-input[type='checkbox'] {
		border-radius: 0;
	}

	.form-check-input
	{
		&:checked
		{
			background-color: var(--bs-primary);
			border-color: var(--bs-primary);
		}

		&:focus {
			border-color: var(--bs-primary);
			box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), 0.08);
		}
	}

}

/**********************************************************************************************************
 *
 * Accordion
 *
 **********************************************************************************************************/

.faq {
	background-color: var(--bs-dark-blue);
	background-image: url('../images/faq-bg.webp');
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
	border-bottom: 5px solid var(--bs-white);

	.accordion-button
	{
		&:focus {
			box-shadow: 0 0 0 0.25rem rgba(var(--bs-white-rgb), 0.25);
		}
	}
}

.accordion-button
{
	font-size: 1.25rem;
	font-weight: 700;
	text-transform: uppercase;
	padding-left: 0;

	&:after
	{
		filter: invert(100%) grayscale(100%);
	}
}

.accordion-body {
	padding-left: 0;
	padding-right: 0;
}

@media (max-width: 1199.98px) {
	.faq
	{
		background-attachment: scroll;
	}
}