/*
************************************************
    Basic Stylesheet for LFE CMS
    Author: Lukas Fellner
    Copyright 2021 - 2026

    Used with Bootstrap 5 and FontAwesome 5
************************************************
*/


/*

	HTML

*/

html {
	-ms-overflow-style: -ms-autohiding-scrollbar;
}

/*

	Body

*/

body {
    display: none;
    background-color: #fff;
}

/*

scrollbar

*/

[data-color-scheme="dark"] {
    color-scheme: dark;
}

[data-color-scheme="light"] {
    color-scheme: light;
}

/*

links

*/

a {
	transition: all 0.3s;
}

/*

	headings

*/

.news-heading a {
	text-decoration: none;
	color: #000;
	transition: all 0.3s;
}

.news-heading a:hover, .news-heading a:active, .news-heading a:focus {
	text-decoration: underline;
	color: rgb(101, 101, 101);;
	
}


/*

	Font Awesome Helper Class

*/

.fontawesome-i2svg-active body {
	display: initial;
}

/*

	Header

*/

.header-style {
	position: relative;
	margin-left: auto;
  	margin-right: auto;
	background-position: center;
	background-repeat: no-repeat;
	background-color: #000;
	text-align: center;
    width: 100%;
    height: 250px;
	padding: 0;
}

.header-style a {
	display: block;
}


.header-container-style {
	width: 100%;
    transition: all 0.2s linear;
	background-color: rgba(0, 0, 0, 0.60);
    border-top: solid 1px #000;
    border-bottom: solid 4px #00c7ff;
    color: #fff;
    z-index: 2;
}

.header-container-style-fixed {
	position: fixed;
	top: 0;
	
}

.header-container-style-fixed .navbar {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.header-container-style-not-fixed-bottom {
	position: absolute;
	left: 0;
	bottom: 0;
}

.header-container-style-not-fixed-top {
	position: absolute;
	left: 0;
	top: 0;
	bottom: auto;
}

.logo-container {
	background-color: rgba(0,0,0,0);
    height: 100%;
    width: 100%;
    display: inline-block;
    position: relative;
}

.logo-header-3-style {
	height: 45px;
}

@media (max-width: 576px) {
	.logo-header-3-style {
		height: 35px;
	}
}

@media (max-width: 450px) {
	.logo-header-3-style {
		height: 30px;
	}
}

@media (max-width: 420px) {
	.logo-header-3-style {
		display: none;
	}
}

.logo {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.scroll-up {
    transform: translateY(-80px);
}

/*

	Title in Header

*/


.title-in-header-container {
    position: relative;
	height: 100%;
    width: 100%;
}

.title-in-header {
	margin: 0;
	position: absolute;
	top: 49%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}


/*

	Navbar & Drop Down

*/


.navbar-light .navbar-toggler {
    color: rgba(255,255,255,1);
    border: none;
    background-color: #00c7ff;
	border-radius: 0;
	line-height: 36px;
	padding-left: 15px;
	padding-right: 15px;
	font-size: 12pt;
}

.navbar-header-3-style .navbar-toggler {
    color: rgba(255,255,255,1);
    border: none;
    background-color: #00c7ff;
	border-radius: 0;
	line-height: 48px;
	padding-left: 15px;
	padding-right: 15px;
	font-size: 12pt;
}

.navbar-background {
	border: none;
	margin-bottom: 0;
	padding: 0;
	height: 44px;
	line-height: 29px;
}

.navbar-light .navbar-nav .nav-link {
	padding-right: 1rem;
	padding-left: 1rem;
}

.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.open, .navbar-light .navbar-nav .open>.nav-link {
    color: #000;
    background-color: #00c7ff;
}

.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
    color: #000;
    background-color: #00c7ff;
}

.navbar-light .navbar-nav .nav-link {
    color: #fff;
}

.navbar-default .navbar-nav>li>a {
	color: #fff;
}


@media (min-width: 992px) {
	.navbar-toggleable-md .navbar-nav .nav-link {
		padding-right: 15px;
		padding-left: 15px;
		padding-top: 4px;
		padding-bottom: 4px;
		line-height: 42px;
	}
}

/* 

	Dropdown Menu

*/

.dropdown-menu {
	border-radius: 0;
	margin: 0 15px 0 15px;
	background-clip: border-box;
   
}

.dropdown-menu-scrollbar {
	overflow: hidden;
}

.overlay-scrollbars-height {
	overflow: scroll;
}

@media (min-height: 500px) and (max-height: 719px) {
	.dropdown-menu-scrollbar {
		max-height: 400px;
	}

	.overlay-scrollbars-height {
		max-height: 350px;
	}
}

@media (min-height: 720px) and (max-height: 999px) {
	.dropdown-menu-scrollbar {
		max-height: 600px;
	}

	.overlay-scrollbars-height {
		max-height: 550px;
	}
}


@media (min-height: 1000px) {
	.dropdown-menu-scrollbar {
		max-height: 900px;
	}

	.overlay-scrollbars-height {
		max-height: 850px;
	}
}


@media (min-width: 1320px) {
	.dropdown-menu-container {
		min-width: 1290px !important;
	}
}

/* .dropdown-one-column {
	min-width: 350px; 
	max-width: 100%;
} */

.dropdown-large {
	position: static !important;
}

.dropdown-menu-large {
	padding: 20px 0px;
}
.dropdown-menu-large > li > ul {
	padding: 0;
	margin: 0;
}
.dropdown-menu-large > li > ul > li {
	list-style: none;
}
.dropdown-menu-large > li > ul > li > a {
	display: block;
	padding: 3px 20px;
	clear: both;
	font-weight: normal;
	line-height: 1.428571429;
	color: #333333;
	white-space: normal;
}
.dropdown-menu-large > li ul > li > a:hover,
.dropdown-menu-large > li ul > li > a:focus {
	text-decoration: none;
	color: #262626;
	background-color: #f5f5f5;
}
.dropdown-menu-large .disabled > a,
.dropdown-menu-large .disabled > a:hover,
.dropdown-menu-large .disabled > a:focus {
	color: #999999;
}
.dropdown-menu-large .disabled > a:hover,
.dropdown-menu-large .disabled > a:focus {
	text-decoration: none;
	background-color: transparent;
	background-image: none;
	filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
	cursor: not-allowed;
}

.dropdown-header {
	color: #212529;
	font-weight: 500;
}

.dropdown-header-small {
	font-size: 1rem;
}

.dropdown-header-medium {
	font-size: 1.25rem;
}

.dropdown-header-big {
	font-size: 1.5rem;
	border-bottom: 1px solid #e9ecef;
	font-weight: 600;
}

.dropdown-menu-title-bar {
	background-color: rgba(0,0,0,.03);
	color: #000;
	border-bottom: 1px solid rgba(0,0,0,.125);
	font-size: 1.5rem;
	font-weight: 600;
}


@media (max-width: 768px) {
	.dropdown-menu-large {
		margin-left: 0 ;
		margin-right: 0 ;
	}
	.dropdown-menu-large > li {
		margin-bottom: 30px;
	}
	.dropdown-menu-large > li:last-child {
		margin-bottom: 0;
	}
	.dropdown-menu-large .dropdown-header {
		padding: 3px 15px !important;
	}
}


/*

	Sidenav - Mobile Devices

*/


.sidenav {
	display: none;
	height: 100%;
	width: 80%;
	position: fixed;
	top: 0;
	left: 0;
	overflow-x: hidden;
	padding-top: 60px;
	z-index: 10001;
}

.sidenav .closebtn {
	position: absolute;
	top: 0;
	right: 25px;
	font-size: 36px;
	margin-left: 50px;
}

.sidebar .nav-link {
	border-radius: 0;
}

#overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
	z-index: 10000;
}

@media screen and (max-height: 450px) {
	.sidenav {padding-top: 15px;}
	.sidenav a {font-size: 18px;}
}

/*

    Article - Images

*/

.article-image-container-fixed-size-normal {
	width: 350px;
	height: 201px;
	transition: all 0.3s;
}

.article-image-container-fixed-size-small {
	width: 160px;
	height: 160px;
	transition: all 0.3s;
}

.article-image-container-fixed-size-very-small {
	width: 195px;
	height: 140px;
	transition: all 0.3s;
}

.article-image-container-normal {
	width: 100%;
	height: 200px;
    max-height: 100%;
	transition: all 0.3s;
}

.article-image-container-normal:hover, .article-image-container-fixed-size-normal:hover, .article-image-container-fixed-size-small:hover, .article-image-container:hover, .article-image-fixed-size-small:hover {
	border-color: rgb(101, 101, 101) !important;
}

.article-image-container {
	width: 100%;
    height: 100%;
	transition: all 0.3s;
}

.article-image-fixed-size-small {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-origin: content-box;
}

/*

images

*/

.page-gallery-cover-300 {
	width: 100%; 
	height: 300px; 
	object-fit: cover;
}

.page-gallery-cover-450 {
	width: 100%; 
	height: 450px; 
	object-fit: cover;
}

.page-gallery-cover-600 {
	width: 100%; 
	height: 600px; 
	object-fit: cover;
}

.page-gallery-cover-800 {
	width: 100%; 
	height: 800px; 
	object-fit: cover;
}

/*

content border

*/
@media (max-width: 575.98px)  {
	.content-border-style {
		border-left: none;
		border-right: none;
	}
}

/*

	News advanced classess

*/


.news-blog-layout-title-image {
	background-color: rgba(0,0,0,0.5); 
	background-blend-mode: multiply; 
	background-position: center; 
	background-size: cover; 
	height: 200px; 
	transition: all 0.5s;
}

.news-blog-layout-title-image:hover {
	background-color: rgba(0,0,0,0.7); 
}

.news-blog-layout-title-image h3 {
	color: #fff !important;
}

/*

    Footer & Copyright

*/

.footer-1-style {
	font-size: 12px;
	font-family: 'Open Sans', sans-serif;
	padding-bottom: 20px;
    padding-top: 20px;
    background-color:#0c1a1e;
    color:#fff;
}

.footer-1-style a {
    transition: color 0.2s linear 0s, background 0.2s linear 0s;
    color:#a0a3a4;
}

.footer-1-style a:hover {
    transition: color 0.2s linear 0s, background 0.2s linear 0s;
    color:#ff670f;
}

.copyright-footer-1 {
	min-height: 40px;
	padding: 12px 0;
	margin-bottom: 0;
	font-size: 12px;
    text-align: left;
    background-color: #000000;
    color: rgb(255, 255, 255);
}

.heading7 {
	font-size: 21px;
	font-weight: 700;
    margin-bottom: 22px;
    color:#d9d6d6;
}

.copyright-menu-footer-1 li a {
	font-size: 12px;
    transition: color 0.2s linear 0s, background 0.2s linear 0s;
    color:#FFF;
}

.copyright-menu-footer-1 li a:hover {    
    transition: color 0.2s linear 0s, background 0.2s linear 0s;
    color: rgb(255, 103, 15);
    text-decoration: underline;
}

/*

	Footer Boxes - Social Media Butons

*/

.footer-social-facebook {
	background-color:#3b5998;
	border-color: #3b5998;
}

.footer-social-twitter {
	background-color:#1da1f2;
	border-color: #1da1f2;
}
.footer-social-google {
	background-color:#f63e28;
	border-color: #f63e28;
}

.footer-social-youtube {
	background-color: #cc181e;
	border-color: #cc181e;
}

/*

	Article - Social Media Buttons

*/

.article-social-facebook {
	background-color:#3b5998;
	border-color: #3b5998;
	color: #fff;
}

.article-social-twitter {
	background-color:#1da1f2;
	border-color: #1da1f2;
	color: #fff;
}

.article-social-google {
	background-color:#f63e28;
	border-color: #f63e28;
	color: #fff;
}

/*

    Scroll to top Button

*/

.back-to-top {
	cursor: pointer;
	position: fixed;
	bottom: 20px;
	right: 20px;
	display: none;
}

/*

    Video page

*/

.video-page-base {
    width: 100%;
    height: 195px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat; 
}

/*

	custom borders

*/

.border-left-2 {
	border-left-width: 2px !important;
}

.border-left-3 {
	border-left-width: 3px !important;
}

.border-left-4 {
	border-left-width: 4px !important;
}

.border-left-5 {
	border-left-width: 5px !important;
}

.border-left-6 {
	border-left-width: 6px !important;
}

/*

	parallax effect

*/

.parallax-effect {
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}


@media screen and (max-width: 992px) {
	.parallax-effect {
		background-attachment: scroll;
    }
}

/*

	custom buttons

*/

.btn-spotify {
	background-color: #1DB954 !important;
	border-color: #1DB954 !important;
	color: #fff !important;
}

.btn-spotify:hover, .btn-spotify:focus, .btn-spotify:active {
	background-color: #191414 !important;
	border-color: #191414 !important;
	color: #fff !important;
}

.btn-amazon {
	background-color: #FF9900 !important;
	border-color: #FF9900 !important;
	color: #fff !important;
}

.btn-amazon:hover, .btn-amazon:focus, .btn-amazon:active {
	background-color: #000000 !important;
	border-color: #000000 !important;
	color: #fff !important;
}

.btn-itunes {
	background-color: #000000 !important;
	border-color: #000000 !important;
	color: #fff !important;
}

.btn-itunes:hover, .btn-itunes:focus, .btn-itunes:active {
	background-color: #555555 !important;
	border-color: #555555 !important;
	color: #fff !important;
}

.btn-facebook {
	background-color:#4267B2 !important;
	border-color: #4267B2 !important;
	color: #fff !important;
}

.btn-facebook:hover, .btn-facebook:focus, .btn-facebook:active {
	background-color: #898F9C !important;
	border-color: #898F9C !important;
	color: #fff !important;
}

.btn-twitter {
	background-color:#1DA1F2 !important;
	border-color: #1DA1F2 !important;
	color: #fff !important;
}

.btn-twitter:hover, .btn-twitter:focus, .btn-twitter:active {
	background-color: #AAB8C2 !important;
	border-color: #AAB8C2 !important;
	color: #000 !important;
}

.btn-google {
	background-color:#4285F4 !important;
	border-color: #4285F4 !important;
	color: #fff !important;
}

.btn-google:hover, .btn-google:focus, .btn-google:active {
	background-color: #DB4437 !important;
	border-color: #DB4437 !important;
	color: #fff !important;
}

.btn-youtube {
	background-color:#FF0000 !important;
	border-color: #FF0000 !important;
	color: #fff !important;
}

.btn-youtube:hover, .btn-youtube:focus, .btn-youtube:active {
	background-color: #282828 !important;
	border-color: #282828 !important;
	color: #fff !important;
}

.btn-soundcloud {
	background-color:#FE5000 !important;
	border-color: #FE5000 !important;
	color: #fff !important;
}

.btn-soundcloud:hover, .btn-soundcloud:focus, .btn-soundcloud:active {
	background-color: #282828 !important;
	border-color: #282828 !important;
	color: #fff !important;
}

.btn-deezer {
	background-color:#ff0000 !important;
	border-color: #ff0000 !important;
	color: #fff !important;
}

.btn-deezer:hover, .btn-deezer:focus, .btn-deezer:active {
	background-color: #00c7f2 !important;
	border-color: #00c7f2 !important;
	color: #fff !important;
}


.btn-instagram {
	background-color:#405DE6 !important;
	border-color: #405DE6 !important;
	color: #fff !important;
}

.btn-instagram:hover, .btn-instagram:focus, .btn-instagram:active {
	background-color: #833AB4 !important;
	border-color: #833AB4 !important;
	color: #fff !important;
}

.btn-twitch {
	background-color: #6441A5 !important;
	border-color: #6441A5 !important;
	color: #fff !important;
}

.btn-twitch:hover, .btn-twitch:focus, .btn-twitch:active {
	background-color: #B9A3E3 !important;
	border-color: #B9A3E3 !important;
	color: #fff !important;
}

.btn-discord {
	background-color: #7289da !important;
	border-color: #7289da !important;
	color: #1e2124 !important;
        transition: 0.3s;
}

.btn-discord:hover, .btn-discord:focus, .btn-discord:active {
	background-color: #424549 !important;
	border-color: #424549 !important;
	color: #fff !important;
}


/* 

	Custom Cards

*/

.card-cover {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.custom-cards-image-background {
	background-repeat: no-repeat; 
	background-size: 540px 320px; 
	background-position: center; 
	background-clip: border-box;
}

@media screen and (max-width: 1200px) {
	.custom-cards-image-background {
		background-size: cover; 
    }
}

/*

	Home Element - Default

*/

.home-element {
	background-color: transparent;
}

.home-element-background-container {
	background-size: cover;
    background-position: center center;
}

.background-blur {
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}

/*

	Dark Mode Switch

*/

.dark-mode-switch-container {
	position: fixed;
    bottom: 20px;
	left: 20px;
}


.dark-mode-switch-container-right {
	position: fixed;
    bottom: 20px;
	right: 80px;
}

.dark-mode-switch-container-background {
	background-color: rgb(var(--bs-light-rgb))!important;
	border: solid 1px rgb(var(--bs-secondary-rgb));
	padding: 15px;
}

.dark-mode-switch-label-header {
	color: rgb(33,37,41);
}



/*

badge

*/


.badge.bg-secondary:hover {
	color: rgb(226, 224, 224);
}


/*

	Bootstrap features

*/

.feature-template-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: 1rem;
    font-size: 2rem;
    color: #fff;
    border-radius: 0.75rem;
}

.feature-template-icon-link {
    display: inline-flex;
    align-items: center;
}

.feature-template-icon-link > svg {
    margin-top: 0.125rem;
    margin-left: 0.125rem;
    transition: transform .25s ease-in-out;
    fill: currentColor;
}

.feature-template-icon-link:hover > svg {
	transform: translate(.25rem);
}

.feature-template-icon-square {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	font-size: 1.5rem;
	border-radius: .75rem;
  }
  
.template-divider {
	height: 3rem;
	background-color: rgba(0, 0, 0, .1);
	border: solid rgba(0, 0, 0, .15);
	border-width: 1px 0;
	box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}

/*

OverlayScrollbars

*/

.os-theme-dark.os-scrollbar-horizontal,
.os-theme-light.os-scrollbar-horizontal {
  right: 10px;
  height: 8px;
}

.os-theme-dark.os-scrollbar-vertical,
.os-theme-light.os-scrollbar-vertical {
  bottom: 10px;
  width: 8px;
}

/*

    Overlay

*/

#loading-overlay {
    display: none;
    position: fixed;
    z-index: 9999;
    height: 100%;
    width: 100%;
    overflow: visible;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0,0,0,0.7);
    color: #fff;
}

#upload_overlay {
    display: none;
    position: fixed;
    z-index: 1040;
    height: 100%;
    width: 100%;
    overflow: visible;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0,0,0,0.7);
    border: dashed  5px #fff; 
    color: #fff;
}

/* Transparent Overlay */
.loading:before {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* toc */

.toc-container {
	position: sticky;
	top: 20px;
	border-radius: 8px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
}

.toc-content-container {
	min-height: 100vh;
}

@media (min-width: 992px) {
	.toc-content-container {
		padding: 30px 40px;
	}
}

.toc-link.h1 {
	padding-left: 12px;
	font-weight: 600;
}

.toc-link.h2 {
	padding-left: 24px;
	font-size: 0.95em;
	font-weight: 600;
}

.toc-link.h3 {
	padding-left: 36px;
	font-size: 0.9em;
}

.toc-link.h4 {
	padding-left: 48px;
	font-size: 0.85em;
	color: #6c757d;
}

.toc-link.h5 {
	padding-left: 56px;
	font-size: 0.8em;
	color: #6c757d;
}


.toc-link.h6 {
	padding-left: 64px;
	font-size: 0.8em;
	color: #6c757d;
}

/*

X2R Race Control

*/

/* Container für die Notification - 70% BREIT */
.race-control-container {
   position: fixed;
   top: 80px;
   left: 50%;
   transform: translateX(-50%) translateY(-200%);
   z-index: 9999;
   opacity: 0;
   width: 70%;
   max-width: 1400px;
   will-change: transform, opacity;
}
/* WICHTIG: Das äußere Div braucht overflow und position */
.race-control-container .race-control-message-container {
   position: relative;
   overflow: hidden;
   border-radius: 0.375rem; /* Passend zum Bootstrap rounded */
}
.race-control-container.animate-in {
   animation: slideDownBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.race-control-container.show-info .col-9 {
   animation: slideInInfo 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.race-control-container.animate-out {
   animation: slideUpOut 0.5s ease-in forwards;
}
.race-control-container .col-9 {
   opacity: 0;
   transform: translateX(30px);
}
@keyframes slideDownBounce {
   0% {
       transform: translateX(-50%) translateY(-200%);
       opacity: 0;
   }
   100% {
       transform: translateX(-50%) translateY(0);
       opacity: 1;
   }
}
@keyframes slideInInfo {
   0% {
       opacity: 0;
       transform: translateX(30px);
   }
   100% {
       opacity: 1;
       transform: translateX(0);
   }
}
@keyframes slideUpOut {
   0% {
       transform: translateX(-50%) translateY(0);
       opacity: 1;
   }
   100% {
       transform: translateX(-50%) translateY(-200%);
       opacity: 0;
   }
}
/* NEU: Glanz-Effekt über ALLES - Logo, Border, Text */
.race-control-container .race-control-message-container::after {
   content: '';
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg,
       transparent,
       rgba(255, 255, 255, 0.4),
       transparent
   );
   pointer-events: none;
   z-index: 10; /* Über allem */
}
.race-control-container.show-info .race-control-message-container::after {
   animation: shine 1.2s ease-out 0.3s;
}
@keyframes shine {
   to {
       left: 100%;
   }
}