:root, [data-bs-theme=light]
{
	--bs-primary: #ee7203;
	--bs-primary-rgb: 238, 114, 3;
	--bs-secondary: #273F4F;
	--bs-secondary-rgb: 39, 63, 79;

	--primary-hover: #B55500;
	--primary-hover-rgb: 181, 85, 0;
	--primary-active: #803D00;
	--primary-active-rgb: 128, 61, 0;

	--secondary-hover: #172D3B;
	--secondary-hover-rgb: 23, 45, 59;
	--secondary-active: #0D222D;
	--secondary-active-rgb: 13, 34, 45;

	--bs-body-color: #333333;
	--bs-body-color-rgb: 51, 51, 51;
	--bs-body-bg: #f6f6f6;
	--bs-body-bg-rgb: 246, 246, 246;

	--bs-font-sans-serif: 'Open Sans', sans-serif;
	--body-font-size-small: .875em;
	--bs-link-color: var(--bs-primary);
	--bs-link-color-rgb: var(--bs-primary-rgb);
	--bs-link-hover-color: var(--primary-hover);
	--bs-link-hover-color-rgb: var(--primary-hover-rgb);

	--bs-heading-color: var(--bs-primary);

	--spacing-5: 0.313rem;
	--spacing-10: 0.625rem;
	--spacing-15: 0.938rem;
	--spacing-20: 1.25rem;
	--spacing-25: 1.5625rem;
	--spacing-30: 1.875rem;
	--spacing-40: 2.5rem;
	--spacing-50: 3.125rem;
	--spacing-60: 3.75rem;
	--spacing-70: 4.375rem;
	--spacing-80: 5rem;

	--bs-border-radius: .25rem;

	.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(--primary-hover);
		--bs-btn-hover-border-color: var(--primary-hover);
		--bs-btn-active-color: #fff;
		--bs-btn-active-bg: var(--primary-active);
		--bs-btn-active-border-color: var(--primary-active);
		--bs-btn-disabled-color: #fff;
		--bs-btn-disabled-bg: var(--primary-active);
		--bs-btn-disabled-border-color: var(--primary-active);
	}
}

/************************************
 *
 *	Basic
 *
 ***********************************/

/*.container
{
	max-width: 1200px;
}*/

.h-85 {
	height: 85%;
}

a
{
	outline: 0 none;
}

/************************************
*
*	Typo
*
***********************************/

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
	margin-bottom: var(--spacing-30);
	font-weight: 300;
}

h1, .h1 {
	font-weight: 700;
}

h2, .h2
{
	color: var(--bs-secondary);
}

h3, .h3
{
	margin-bottom: var(--spacing-20);
}

a {
	.fa-xs {
		line-height: .08333em;
		vertical-align: .125em;
	}
}

@media (min-width: 1400px) {
	h1, .h1 {
		font-size: 4.375rem;
	}
}

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

@media (min-width: 1200px) {
	h2, .h2 {
		font-size: 2.875rem;
	}
	h3, .h3 {
		font-size: 1.5rem;
	}

	.headline-small {
		h2, .h2 {
			font-size: 1.75rem;
		}
		h3, .h3 {
			font-size: 1.5rem;
		}
		h4, .h4 {
			font-size: 1.25rem;
		}
	}
}

@media (min-width: 768px) and (max-width: 1199.98px) {
	h1, .h1 {
		font-size: 2.8125rem;
	}
}

@media (max-width: 1199.98px) {
	h3, .h3 {
		font-size: 1.25rem;
	}
	h4, .h4 {
		font-size: 1rem;
	}
}

@media (min-width: 768px) and (max-width: 991.98px) {
	body {
		font-size: 0.875rem;
	}
}

@media (max-width: 767.98px) {
	body {
		font-size: 0.813rem;
	}

	h2.mb-50, h3.mb-50 {
		margin-bottom: 30px !important;
	}
}

@media (max-width: 575.98px) {
	h3, .h3 {
		font-size: 1rem;
	}
	h4, .h4 {
		font-size: 0.875rem;
	}
}

/************************************
 *
 *	Bereiche - Farben
 *
 ***********************************/

.bg-secondary {
	color: var(--bs-white);

	h2 {
		color: var(--bs-primary);
	}
}

/************************************
*
*	Liste
*
***********************************/

ul {
	&.iconList {
		list-style: none;
		padding-left: 35px;

		li {
			&:before {
				content: url('../img/motoskope-list-icon.svg');
				height: 12px;
				width: 12px;
				display: inline-block;
				margin-right: 10px;
				margin-left: -22px;
			}
		}

		&.white {
			li {
				&:before {
					content: url('../img/icon.svg');
					height: 12px;
					width: 12px;
					display: inline-block;
					margin-right: 10px;
					margin-left: -22px;
				}
			}
		}
	}
}

/************************************
*
*	Abstände
*
***********************************/

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

.mt-20
{
	margin-top: var(--spacing-20) !important;
}

.mb-20
{
	margin-bottom: var(--spacing-20) !important;
}


.mt-30
{
	margin-top: var(--spacing-30) !important;
}

.mb-30
{
	margin-bottom: var(--spacing-30) !important;
}

.mt-40
{
	margin-top: var(--spacing-40) !important;
}

.mb-40
{
	margin-bottom: var(--spacing-40) !important;
}

.mt-50
{
	margin-top: var(--spacing-50) !important;
}

.mb-50
{
	margin-bottom: var(--spacing-50) !important;
}

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

@media (max-width: 575.98px) {
	.py-6 {
		padding-top: 2.5rem !important;
		padding-bottom: 2.5rem !important;
	}
}

/************************************
 *
 *	Logo -> anpassen
 *
 ***********************************/

.st0
{
	fill: #9DC41F;
}
.st1
{
	fill: #FFFFFF;
}
.st2
{
	fill: #CCCCCC;
}
.st3
{
	fill: #9EC420;
}

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

.header
{
	background: url(../img/header.webp) center center fixed transparent;
	background-size: cover;
	color: #FFF;
	padding-top: var(--spacing-50);
	padding-bottom: var(--spacing-50);
	/*overflow-x: hidden;*/

	p {
		&.subline
		{
			font-size: calc(1.325rem + 0.9vw);
			font-weight: 300;
		}
	}

	h1
	{
		font-weight: 700;
		text-transform: uppercase;
		margin-bottom: var(--spacing-30);
		color: #fff;
	}
}

.header-small {
	background: url(../img/header.webp) center center fixed transparent;
	background-size: cover;
	color: #FFF;
	padding-top: var(--spacing-50);
	padding-bottom: var(--spacing-50);
}

@media (max-width: 1199.98px) {
	.header, .header-small {
		background-attachment: scroll;
		background-position: center right;
	}
}

@media (min-width: 1500px)
{
	.header {
		.header-img
		{
			position: relative;
			left: -150px;
			width: calc(100% + 130px);
			max-width: calc(100% + 130px);
			top: -60px;
		}
	}
}

@media (min-width: 1200px) {
	.header
	{
		p
		{
			&.subline
			{
				font-size: 2.5rem;
			}
		}
	}
}

@media (max-width: 767.98px) {
	.min-vh-100 {
		min-height: auto !important;
	}
	.vh-100 {
		height: auto !important;
	}
}

@media (min-width: 1400px) {
	.min-vh-100 {
		header, .header {
			min-height: 723px;
		}
	}
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
	.min-vh-100 {
		header, .header {
			min-height: 711px;
		}
	}
}

@media (min-width: 992px) and (max-width: 1199.98px) {
	.min-vh-100 {
		header, .header {
			min-height: 640px;
		}
	}
}

@media (min-width: 768px) and (max-width: 991.98px) {
	.min-vh-100 {
		header, .header {
			min-height: 600px;
		}
	}
}

@media (min-width: 576px) and (max-width: 767.98px) {
	.min-vh-100 {
		header, .header {
			min-height: 867px;
		}
	}
}

@media (max-width: 575.98px) {
	.min-vh-100 {
		header, .header {
			min-height: 967px;
		}
	}
}

/************************************
 *
 *	Border
 *
 ***********************************/

.borderTopGray
{
	border-top: 1px solid #E5E5E5;
}

.borderBottomGray
{
	border-bottom: 1px solid #E5E5E5;
}

.verticalColLine
{
	div
	{
		&:first-child
		{
			padding-right: var(--spacing-40);
		}
	}

	> div
	{
		&:nth-child(2n)
		{
			border-left: 1px solid #DADADA;
			padding-left: var(--spacing-40);
		}
	}
}

@media (max-width: 767px) {
	.verticalColLine
	{
		div
		{
			&:first-child
			{
				padding-right: calc(var(--bs-gutter-x) * 0.5);
			}
		}

		> div
		{
			&:nth-child(2n)
			{
				border-left-width: 0;
				padding-left: calc(var(--bs-gutter-x) * 0.5);
			}
		}
	}
}

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

.btn
{
	--bs-btn-padding-x: 2rem;
	--bs-btn-padding-y: 1rem;
	transition: all .15s ease-in-out;
}

.btn-primary {
	font-weight: 700;
	text-transform: uppercase;
}

.btn-secondary {
	font-weight: 700;
	text-transform: uppercase;
}

.nav-tabs {
	.nav-link {
		font-weight: 700;
		text-transform: uppercase;
	}
}

.btn-link {
	text-decoration: none;
}

@media (max-width: 767.98px) {
	.btn {
		font-size: 0.813rem;
		padding: .75rem 1.25rem;
	}
}

@media (min-width: 768px) and (max-width: 991.98px) {
	.btn {
		font-size: 0.875rem;
		padding: .75rem 1.25rem;
	}
}

/************************************
 *
 *	Hintergründe
 *
 ***********************************/

.bgFunction {
	background: url(../img/hg-skope.png) no-repeat left 60px bottom -100px transparent;
}

/************************************
 *
 *	Bilder
 *
 ***********************************/

img
{
	&.imgShadow
	{
		border-radius: 3px;
		box-shadow: 10px 0 40px rgba(0, 0, 0, 0.24);
	}

	&.imgDropShadow {
		filter: drop-shadow(0px 8px 8px rgba(0,0,0,0.25));
	}
}

/************************************
 *
 *	Icons
 *
 ***********************************/

.functionIcon {
	background-color: var(--bs-primary);
	border-radius: 100%;
	text-align: center;
	color: #fff;
	padding: var(--spacing-20);

	img {
		width: 30px;
		/*width: 64px;
		height: 64px;*/
	}
}

.functionIconBig {
	img {
		max-width: 200px;
		margin-bottom: var(--spacing-15);
	}
}

.functionIconArrow {
	font-size: 1.875rem;
	color: var(--bs-primary);
	position: relative;
	top: -30px;
}

@media (max-width: 767.98px) {
	.functionIcon
	{
		padding: var(--spacing-20);
	}
	.functionIconBig {
		img {
			max-width: 150px;
		}
	}
	.functionIconArrow {
		top: 0;
		margin-bottom: var(--spacing-15);
		margin-top: var(--spacing-15);
		rotate: 90deg;
	}
}

/************************************
 *
 *	Box
 *
 ***********************************/

.functionBox {
	border: 3px solid var(--bs-gray-400);
	padding: 1.5rem 1.5rem 1.5rem 0 !important;
	margin-left: 40px;
	margin-bottom: var(--spacing-30);

	.row {
		margin-left: -40px !important;
	}
}

/************************************
 *
 *	Tabs
 *
 ***********************************/

.nav
{
	--bs-nav-link-padding-x: 1.15rem;
	--bs-nav-link-padding-y: 1.15rem;
	--bs-link-color: var(--bs-gray-700);
}

.nav-tabs
{

	--bs-nav-tabs-link-active-color: var(--bs-white);
	--bs-nav-tabs-link-active-border-color: var(--primary-active);
	--bs-nav-tabs-link-active-bg: var(--bs-primary);

	--bs-nav-tabs-link-hover-color: var(--bs-secondary);
	--bs-nav-tabs-link-hover-border-color: var(--bs-secondary);

	--bs-nav-tabs-border-width: 2px;

	.nav-link
	{
		border-left-width: 0;
		border-top-width: 0;
		border-right-width: 0;

		&.active, &:hover, &:focus
		{
			border-left-color: transparent;
			border-top-color: transparent;
			border-right-color: transparent;
		}
	}

}

.bg-secondary
{
	.nav
	{
		--bs-link-color: var(--bs-gray-400);
	}

	.nav-tabs {
		border-bottom-color: rgba(var(--bs-white-rgb),0.4);

		.nav-link.active,
		.nav-item.show .nav-link {
			border-bottom-color: var(--bs-white);
		}
		.nav-link:hover,
		.nav-link:focus {
			border-color: var(--bs-white);
			color: var(--bs-white);
		}
	}

}

/************************************
 *
 *	FAQ
 *
 ***********************************/

.btn-group-vertical
{
	.btn {
		&.btn-light
		{
			background-color: var(--bs-white);
			color: var(--bs-body-color);
			transition: all .5s;
			border: var(--bs-border-width) solid var(--bs-border-color-translucent);
			text-align: left;

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

/************************************
 *
 *	App Badge
 *
 ***********************************/

.appBadge
{
	img
	{
		height: 70px;
		width: auto;
		padding: var(--spacing-10);
	}
}

/************************************
 *
 *	Lightbox
 *
 ***********************************/

.lightboxBtn {
	border: 0 none;
	background-color: transparent;
}

.lightboxModal {
	.modal-content {
		background-color: transparent;
		border-width: 0;

		.modal-header {
			border-bottom-width: 0;
		}
	}

	.btn-close {
		filter: invert(1);
		position: absolute;
		right: 0;
		padding: 0.5rem;
		z-index: 10;
	}
}



/************************************
 *
 *	Lines
 *
 ***********************************/

:root {
	--line01-height: calc(105.054px*2);
	--line02-height: calc(113.439px*2);
	--line03-height: calc(68.278px*2);
}

.lineContainer
{
	position: absolute;
}

.marker {
	width: 40px;
	position: absolute;
}

.line01Container {
	margin-top: calc(var(--line01-height)/-2);
	right: 15%;

	.line01 {
		height: var(--line01-height);
	}

	.marker {
		margin-left: -139px;
		margin-top: -16px;
	}
}

.line02Container {
	margin-top: calc(var(--line02-height)/-2.2);
	right: 12%;

	.line02 {
		height: var(--line02-height);
		transform: rotate(95deg);
		padding-right: 30px;
	}

	.marker {
		margin-left: -128px;
		margin-top: 92px;
	}
}

.line03Container {
	margin-top: calc(var(--line03-height)/-1.3);
	left: 15%;

	.line03 {
		height: var(--line03-height);
		transform: rotate(10deg)
	}

	.marker {
		margin-left: -92px;
		margin-top: 40px;
	}
}

.line04Container {
	margin-top: calc(var(--line01-height)/-1.5);
	margin-left: 20px;

	.line01 {
		height: var(--line01-height);
	}

	.marker {
		margin-left: -139px;
		margin-top: -16px;
	}
}

.line05Container {
	margin-top: calc(var(--line03-height)/-2.5);
	left: 15%;

	.line03 {
		height: var(--line03-height);
		transform: rotate(10deg)
	}

	.marker {
		margin-left: -92px;
		margin-top: 40px;
	}
}

@media (max-width: 1199.98px)
{
	.line01Container
	{
		margin-top: calc(var(--line01-height) / -1.33);
	}
}

@media (max-width: 991.98px)
{
	.lineContainer
	{
		scale: 0.75;
	}

	.line01Container
	{
		right: 0;
		margin-top: calc(var(--line01-height) / -1.275);
	}

	.line03Container
	{
		left: 0;
		margin-top: calc(var(--line03-height) / -2);
	}

	.line04Container
	{
		margin-left: -20px;
		margin-top: calc(var(--line01-height) / -2);
	}
}

@media (max-width: 767.98px)
{
	.ptAfterLine01 {
		padding-top: calc(var(--line01-height) / 2.5) !important;
	}

	.ptAfterLine02 {
		padding-top: calc(var(--line02-height) / 2.5) !important;
	}

	.ptAfterLine03 {
		padding-top: calc(var(--line03-height) / 1.8) !important;
	}

	.pbBeforeLine04 {
		padding-bottom: calc(var(--line01-height) / 1.8) !important;
	}

	.ptAfterLine04 {
		padding-top: calc(var(--line01-height) / 1.8) !important;
	}

	.ptAfterLine05 {
		padding-top: calc(var(--line03-height) / 1.5) !important;
	}
}

@media (min-width: 768px) and (max-width: 991.98px) {

	.pbBeforeLine04 {
		padding-bottom: calc(var(--line01-height) / 1.8) !important;
	}

	.ptAfterLine04 {
		padding-top: calc(var(--line01-height) / 2.2) !important;
	}
}

@media (min-width: 992px) and (max-width: 1399.98px) {
	.ptAfterLine02 {
		padding-top: calc(var(--line02-height) / 2) !important;
	}

	.pbBeforeLine04 {
		padding-bottom: calc(var(--line01-height) / 2.2) !important;
	}

	.ptAfterLine04 {
		padding-top: calc(var(--line01-height) / 2.2) !important;
	}
}


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

/* Footer Top */

footer {
	background: var(--secondary-hover)
}

.footerTop {
	background: var(--secondary-hover);
	color: var(--bs-white);
	padding: var(--spacing-50) 0 var(--spacing-60);

	a {
		color: var(--bs-white);
	}
}

.footerIcon {
	width: 10px;
	margin: 0 5px 3px;
}

/* Footer Bottom */

.footerBottom {
	background: var(--secondary-active);
	color: var(--bs-white);
	padding: var(--spacing-15) 0;

	a {
		color: #fff;
		padding: var(--spacing-15) var(--spacing-20);
		filter: brightness(200%);
		text-decoration: none;
		display: inline-block;
	}
}

@media (max-width: 991.98px)
{
	.footerBottom {
		a {
			padding: var(--spacing-20) var(--spacing-20);
		}
	}
}

/************************************
 *
 *	Trust-Leiste
 *
 ***********************************/

.trustBar {
	background: var(--bs-secondary);
	color: var(--bs-white);
	padding: var(--spacing-15) 0;
	text-align: center;
	font-size: 1rem;
}

.trustItem {
	padding: 0 var(--spacing-20);
}

.trustStars {
	color: #ffc107;
	font-size: 1.3rem;
	letter-spacing: -1px;
	vertical-align: middle;
}

@media (max-width: 575.98px) {
	.line01Container
	{
		display:none;
	}
	.trustBar {
		font-size: 0.875rem;
	}
	.trustItem {
		padding: var(--spacing-5) var(--spacing-10);
	}
	.trustStars {
		font-size: 1.1rem;
	}
}

/************************************
 *
 *	Sticky CTA
 *
 ***********************************/

.stickyCta {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--bs-secondary);
	color: var(--bs-white);
	box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25);
	padding: var(--spacing-15) 0;
	z-index: 1040;
	transform: translateY(100%);
	transition: transform 0.3s ease-in-out;
}

.stickyCta.visible {
	transform: translateY(0);
}

.stickyCtaInner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-20);
	flex-wrap: wrap;
}

.stickyCtaText {
	font-weight: 600;
}

.stickyCtaPrice {
	font-size: 1.1rem;
}

.stickyCtaPrice strong {
	font-size: 1.3rem;
}

@media (max-width: 575.98px) {
	.stickyCtaInner {
		gap: var(--spacing-10);
	}
	.stickyCtaText {
		display: none;
	}
	.stickyCtaPrice {
		font-size: 0.95rem;
	}
	.stickyCtaPrice strong {
		font-size: 1.1rem;
	}
}