@font-face {
	font-family: "roboto";
	font-weight: 300;
	src: url(fonts/Roboto-Light.ttf);
	font-display: swap
}
@font-face {
	font-family: "roboto";
	font-weight: 400;
	src: url(fonts/Roboto-Regular.ttf);
	font-display: swap
}
@font-face {
	font-family: "roboto";
	font-weight: 500;
	src: url(fonts/Roboto-Medium.ttf);
	font-display: swap
}
@font-face {
	font-family: "roboto";
	font-weight: 700;
	src: url(fonts/Roboto-Bold.ttf);
	font-display: swap
}
@font-face {
	font-family: "Orbitron";
	font-weight: 700;
	src: url(fonts/Orbitron-Bold.ttf);
	font-display: swap
}
:root {
	--color-red: #3789C8;
	--color-yellow: #fd0;
	--color-green: #274968;
	--color-icon: #b69121;
	--color-blue: #3789C8;
	--color-grey: #E0E5E9;
	--color-black: #030405;
	--color-white: #fff;
	--color-orange: #F60;
	--font-size: 20px;
	--line-height: 140%;
	--font: roboto, sans-serif;
	--700: 700;
	--orbitron: "Orbitron", san-serif
}
body {
	font-family: var(--font);
	font-size: var(--font-size);
	line-height: var(--line-height);
	background-color: var(--color-white)
}
.bg-1 {
	background-image: url(../images/bg-1.webp);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	min-height: 400px
}
.bg-2 {
	background-image: url(../images/fep-hintergrund2.webp);
	background-position: right center;
	background-repeat: no-repeat;
	background-size: cover;
	min-height: 400px
}
.bg-3 {
	background-image: url(../images/bg-2.webp);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	min-height: 400px
}
.col-lg-6.col-md-12.einstieg.text-center {
	padding-left: 0 !important;
	padding-right: 0 !important
}
b, strong {
	font-weight: var(--700)
}
h1, h2, h3, h4 {
	font-family: var(--orbitron)
}
h1 {
	font-size: 50px;
	font-weight: var(--700)
}
h2 {
	font-size: 38px;
	font-weight: var(--700)
}
h3 {
	font-size: 34px;
	font-weight: var(--700)
}
h4 {
	font-size: 24px;
	font-weight: var(--700)
}
p {
	margin-top: 0;
	margin-bottom: 1.5rem
}
.container {
	max-width: 1280px
}
.dinpro {
	font-family: var(--font)
}
u.underline {
	text-decoration-color: var(--color-orange)
}
.einstieg {
	background-image: url(../images/einstieg.webp);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover
}
.btn-primary {
	background-color: var(--color-yellow);
	border-color: var(--color-yellow);
	font-size: 20px;
	line-height: var(--line-height);
	margin: 1rem auto;
	border-radius: 15px;
	padding: 15px 85px 15px 25px;
	position: relative;
	overflow: hidden;
	color: var(--color-black);
	font-weight: 700;
	box-shadow: 0 2px 8px rgba(26, 26, 26, .6)
}
.btn-primary:before {
	content: "";
	position: absolute;
	right: -5px;
	top: -10px;
	background-color: var(--color-black);
	opacity: .5;
	width: 70px;
	height: 120px;
	transform: rotate(15deg)
}
.btn-primary:after {
	content: "\f245";
	font-weight: 300;
	font-family: "Font Awesome 6 Pro";
	position: absolute;
	right: 15px;
	top: 15px;
	font-size: 30px;
	color: var(--color-white)
}
.btn-primary:hover {
	background-color: var(--color-yellow);
	font-size: 20px;
	border-color: var(--color-grey);
	line-height: var(--line-height);
	color: var(--color-black);
	position: relative;
	overflow: hidden;
	cursor: pointer
}
.btn-primary:hover:before {
	content: "";
	position: absolute;
	right: 0;
	top: -10px;
	background-color: var(--color-black);
	opacity: 1;
	width: 60px;
	height: 120px;
	transform: rotate(15deg)
}
.show {
	display: block
}
.hide {
	display: none
}
.layer {
	background-image: linear-gradient(0deg, rgba(55, 137, 200, .90) 0%, rgba(38, 38, 38, .65) 100%)
}
.layer > * {
	position: relative;
	z-index: 1
}
ul.iconsS {
	list-style-type: none
}
#the-final-countdown2 {
	margin-top: 3rem !important;
	margin-bottom: 4rem !important
}
#the-final-countdown2 > p {
	font-size: 60pt !important;
	color: var(--color-orange) !important;
	font-family: var(--roboto)
}
#the-final-countdown2 > p:before {
	bottom: -14.5px !important;
	position: absolute;
	content: "Stunden bis 14 Uhr" !important;
	font-size: 20px;
	bottom: -60px !important;
	left: 28% !important;
	color: var(--color-white) !important
}
.gold {
	color: var(--color-icon)
}
.bg-gold {
	background-color: var(--color-icon)
}
ul.iconsS li {
	padding-left: 15px;
	position: relative;
	text-align: left;
	padding-bottom: 15px
}
ul.iconsS {
	list-style-type: none
}
ul.iconsS li {
	padding-left: 15px;
	position: relative;
	text-align: left;
	padding-bottom: 15px
}
ul.iconsS li:nth-child(1):after {
	content: "\f34e";
	position: absolute;
	left: -35px;
	top: 15px;
	font-family: "Font Awesome 6 Pro";
	font-size: 30px;
	color: var(--color-grey);
	font-weight: 300
}
ul.iconsS li:nth-child(2):after {
	content: "\f51e";
	position: absolute;
	left: -35px;
	top: 15px;
	font-family: "Font Awesome 6 Pro";
	font-size: 30px;
	color: var(--color-grey);
	font-weight: 300
}
ul.iconsS li:nth-child(3):after {
	content: "\e417";
	position: absolute;
	left: -35px;
	top: 15px;
	font-family: "Font Awesome 6 Pro";
	font-size: 30px;
	color: var(--color-grey);
	font-weight: 300
}
ul.iconsS li:before {
	position: absolute;
	left: -45px;
	top: 2.5px;
	position: absolute;
	font-size: 18px;
	background-color: var(--color-white);
	width: 50px;
	height: 50px;
	content: "";
	border-radius: 50%;
	box-shadow: 1px 2px 0 0 rgba(0, 0, 0, .5)
}
ul.iconsS1 {
	list-style-type: none
}
ul.iconsS1 li {
	padding-left: 15px;
	position: relative;
	text-align: left;
	padding-bottom: 15px
}
ul.iconsS1 li:last-child {
	padding-bottom: 0
}
ul.iconsS1 li:after {
	content: "\f00c";
	position: absolute;
	left: -35px;
	top: 15px;
	font-family: "Font Awesome 6 Pro";
	font-size: 30px;
	color: var(--color-white);
	font-weight: 300
}
ul.iconsS1 li:before {
	position: absolute;
	left: -45px;
	top: 2.5px;
	position: absolute;
	font-size: 18px;
	background-color: var(--color-icon);
	width: 50px;
	height: 50px;
	content: "";
	border-radius: 50%;
	box-shadow: 1px 2px 0 0 rgba(0, 0, 0, .5)
}
ul.checka {
	list-style-type: none;
	margin-left: 10px
}
ul.checka li {
	padding-left: 15px;
	position: relative;
	text-align: left;
	padding-bottom: 35px
}
ul.checka li:last-child {
	padding-bottom: 0;
	margin-bottom: 0
}
ul.checka li:after {
	content: "\f00c";
	position: absolute;
	left: -32px;
	top: 12.5px;
	font-family: "Font Awesome 6 Pro";
	font-size: 30px;
	color: var(--color-white);
	font-weight: 300
}
ul.checka li:before {
	position: absolute;
	left: -45px;
	top: 0;
	position: absolute;
	font-size: 18px;
	background-color: var(--color-red);
	width: 50px;
	height: 50px;
	content: "";
	border-radius: 50%;
	box-shadow: 1px 2px 0 0 rgba(0, 0, 0, .5)
}
ul.arrow {
	list-style-type: none;
	margin-left: 10px
}
ul.arrow li {
	padding-left: 15px;
	position: relative;
	text-align: left;
	padding-bottom: 35px
}
ul.arrow li:after {
	content: "\f178";
	position: absolute;
	left: -35px;
	top: 0;
	font-family: "Font Awesome 6 Pro";
	font-size: 30px;
	color: var(--color-grey);
	font-weight: 300
}
ul.arrow li:before {
	position: absolute;
	left: -45px;
	top: -12.5px;
	position: absolute;
	font-size: 18px;
	background-color: var(--color-white);
	width: 50px;
	height: 50px;
	content: "";
	border-radius: 50%;
	box-shadow: 1px 2px 0 0 rgba(0, 0, 0, .5)
}
ul.icons3 {
	list-style-type: none
}
ul.icons3 li {
	padding-left: 15px;
	position: relative;
	text-align: left
}
ul.icons3 li:nth-of-type(1):after {
	content: "\f06b";
	position: absolute;
	left: -35px;
	top: 15px;
	font-family: "Font Awesome 6 Pro";
	font-size: 30px;
	color: var(--color-grey);
	font-weight: 300
}
ul.icons3 li:nth-of-type(1):before {
	position: absolute;
	left: -45px;
	top: 2.5px;
	position: absolute;
	font-size: 18px;
	background-color: var(--color-white);
	width: 50px;
	height: 50px;
	content: "";
	border-radius: 50%;
	box-shadow: 1px 2px 0 0 rgba(0, 0, 0, .5)
}
.big {
	font-size: 24px
}
.big2 {
	font-size: 28px
}
.big-60 {
	font-size: 40px;
	text-transform: uppercase
}
.modal.active {
	z-index: 9999999999 !important
}
img.position-absolute.start-50.top-20 {
	top: 0 !important;
	left: -135px !important
}
@media (max-width: 768px) {
	h1, .big-60 {
		font-size: 30px;
		line-height: 38px
	}
	h2 {
		font-size: 26px;
		line-height: 34px
	}
	h3, .big {
		font-size: 22px;
		line-height: 30px
	}
	i.fa-light {
		font-size: 30pt !important
	}
	i.fa-light.fa-lock {
		font-size: unset !important
	}
}
@media (max-width: 991px) {
	.hide-on-mobile, .btn-primary:before, .btn-primary:after, li:before {
		display: none
	}
	li:after {
		left: -26px !important
	}
	ul.checka li:after {
		color: var(--color-blue) !important
	}
	ul {
		padding-left: 25px !important
	}
	img.position-absolute.bottom-0.end-0 {
		position: relative !important;
		bottom: unset;
		right: unset;
		display: block;
		margin: 0 auto;
		left: unset !important;
		top: unset !important;
		text-align: center
	}
	.bg-1, .bg-2, .bg-3 {
		min-height: 200px
	}
}
@media (max-width: 1440px) {
	img.pluse.position-absolute.start-50.top-20 {
		position: relative !important;
		bottom: unset;
		right: unset;
		display: block;
		margin: 0 auto;
		left: unset !important;
		top: unset !important;
		text-align: center
	}
	.einstieg {
		background-position: center center
	}
}
#the-final-countdown, #the-final-countdown1, #the-final-countdown2, #the-final-countdown3 {
	font-weight: 700 !important;
	font-size: 120%
}
.rolf, .rolf2 {
	position: relative
}
.box {
	min-height: 279px;
	padding: 25px !important;
	border-radius: 10px
}
.bg-red.box {
	color: #fff !important
}
.video-teaser {
	background-color: rgba(255, 255, 255, .55);
	padding: 20px;
	border-radius: 10px;
	margin: 0 auto
}
.video-teaser-body {
	margin-bottom: 0;
	padding-top: 1rem !important
}
.video-teaser-body > p {
	margin-bottom: 0;
	text-align: left
}
.video-teaser-body > p:last-child {
	border-right: unset;
	padding-right: 0;
	padding-top: 10px
}
@media (max-width: 1024px) {
	.box {
		margin-bottom: 15px
	}
}
@media (min-width: 1025px) {
	img.rolf {
		position: absolute;
		margin-top: -36px;
		right: 100px
	}
	img.rolf2 {
		position: absolute;
		margin-top: -39px;
		right: 100px
	}
}
canvas#canvas {
	display: none
}
@media (min-width:1024px) {
	canvas#canvas {
		margin-top: -770px;
		display: unset
	}
}