/* basics */



body, html {
	font-size:10px;
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* Verhindert das Rausrollen aus dem Sichtbereich */
	scroll-behavior: smooth;
}




* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}

.nobr {
white-space: nowrap;
}





@font-face {
  font-family: 'Special Elite';
  font-style: normal;
  font-weight: 400;
  src: local('Special Elite Regular'), local('SpecialElite-Regular'),
       url('../fonts/SpecialElite-Regular.ttf') format('truetype');
}

/* open-sans-300 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/open-sans-v15-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Light'), local('OpenSans-Light'),
       url('../fonts/open-sans-v15-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v15-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v15-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v15-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v15-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-300italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/open-sans-v15-latin-300italic.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Light Italic'), local('OpenSans-LightItalic'),
       url('../fonts/open-sans-v15-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v15-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v15-latin-300italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v15-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v15-latin-300italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v15-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('../fonts/open-sans-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v15-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/open-sans-v15-latin-italic.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Italic'), local('OpenSans-Italic'),
       url('../fonts/open-sans-v15-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v15-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v15-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v15-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v15-latin-italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-600 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/open-sans-v15-latin-600.eot'); /* IE9 Compat Modes */
  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
       url('../fonts/open-sans-v15-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v15-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v15-latin-600.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v15-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v15-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-600italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/open-sans-v15-latin-600italic.eot'); /* IE9 Compat Modes */
  src: local('Open Sans SemiBold Italic'), local('OpenSans-SemiBoldItalic'),
       url('../fonts/open-sans-v15-latin-600italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v15-latin-600italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v15-latin-600italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v15-latin-600italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v15-latin-600italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-700 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/open-sans-v15-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Bold'), local('OpenSans-Bold'),
       url('../fonts/open-sans-v15-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v15-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v15-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v15-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v15-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-700italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/open-sans-v15-latin-700italic.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'),
       url('../fonts/open-sans-v15-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v15-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v15-latin-700italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v15-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v15-latin-700italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-800 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/open-sans-v15-latin-800.eot'); /* IE9 Compat Modes */
  src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'),
       url('../fonts/open-sans-v15-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v15-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v15-latin-800.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v15-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v15-latin-800.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-800italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 800;
  src: url('../fonts/open-sans-v15-latin-800italic.eot'); /* IE9 Compat Modes */
  src: local('Open Sans ExtraBold Italic'), local('OpenSans-ExtraBoldItalic'),
       url('../fonts/open-sans-v15-latin-800italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v15-latin-800italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v15-latin-800italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v15-latin-800italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v15-latin-800italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}







/* padding */



.pad {
	padding:30px 30px;
}

.pad1 {
	padding:140px 30px 30px 30px;
}
.pad1a {
	padding:60px 30px 30px 30px;
}


.apad {
padding:30px 30px 190px 30px;
}

.pad3 {
	padding:0px 0px 0px 0px;
}










.video-container {
    position: relative;
    width: 100%;            /* Nutzt die volle Breite des übergeordneten Elements */
    max-width: 800px;       /* Optionale maximale Breite, damit es auf Riesenbildschirmen nicht zu groß wird */
    aspect-ratio: 16 / 9;   /* Erzwingt das perfekte 16:9 Videoformat */
    margin: 0 auto;         /* Zentriert das Video optional auf der Seite */
  }

  .video-container object {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }





	/* ==========================================================================
	   Parallax: Pixelgenaue Originalgröße mit -200px Start-Offset
	   ========================================================================== */


		 /* 1. Der Header als flexibler Haupt-Rahmen (Richtet sich nach deinem Inhalt) */
		 .parallax-section {
		   position: relative !important;
		   width: 100% !important;
		   overflow: hidden !important; /* Schneidet das Bild sauber ab */
		   clear: both !important;      /* Beendet eventuelle Floats von davor */
z-index: 5 !important;
}


/* NEU: Das SCHWARZE HINTERGRUND-ELEMENT (Ganz unten) */
.parallax-section::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: #000000 !important; /* Blockiert das Body-Bild */
  z-index: 2 !important; /* EBENE 0: Liegt hinter dem Parallax-Bild */
}




		 /* 2. Das Hintergrundbild-Element (Überall gültig & Standard für Mobile) */
		 .parallax-section::before {
		   content: "" !important;
		   display: block !important;
		   position: absolute !important;

		   /* Der feste Startpunkt: Genau 200px nach oben verschoben */
		   top: -200px !important;
		   left: 0 !important;
		   width: 100% !important;

		   /* Die Höhe orientiert sich am Inhalt des Headers plus den 200px Puffer */
		   height: calc(100% + 200px) !important;

		   /* Variablen vom JavaScript (Mobile-Bild als Standard) */
		   background-image: var(--bg-mobile);

		   /* FÜR MOBILE: 100% Breite erzwingen, Höhe passt sich proportional an */
		   background-size: 100% auto !important;
		   background-position: top center !important; /* Oben zentriert andocken */
		   background-repeat: no-repeat !important;

		   will-change: transform;
		   z-index: 3 !important; /* Ebene 1: Ganz hinten */

		   /* Das JS übernimmt die Parallax-Verschiebung ab dem Nullpunkt */
		   transform: translateY(var(--parallax-y, 0px));
		 }

		 /* 3. FÜR DESKTOP (Bildschirme breiter als 768px) */
		 @media (min-width: 769px) {
		   .parallax-section::before {
		     /* Desktop-Bild laden */
		     background-image: var(--bg-desktop);

		     /* Zurück zur pixelgenauen Originalgröße auf dem Desktop (kein Cover, kein 100%) */
		     background-size: auto !important;
		   }
		 }























		 /* ==========================================================================
		    Social Proof Slide-Out Störelement mit CSS-Timing
		    ========================================================================== */

		 .slideout-box {
		   position: fixed;
		   bottom: 190px;
		   left: -300px; /* Startet unsichtbar außerhalb des Bildschirms */
		   background-color: #44444499;
		   color: #ffffff;
		   padding: 6px 12px;
		   border-radius: 4px;
		   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
		   display: flex;
		   align-items: center;
		   gap: 12px;
		   font-family: sans-serif;
		   font-size: 14px;
		   z-index: 9999;

		   /* HIER STARTET DIE ANIMATION AUTOMATISCH:
		      Dauer insgesamt: 20 Sekunden (10s warten + reinfahren + 10s zeigen + rausfahren) */
		   animation: slideInOut 30s ease-in forwards;


			 /* DER EFFEKT: Macht alles direkt HINTER der Box um 5 Pixel unscharf */
			   backdrop-filter: blur(5px) !important;
			   -webkit-backdrop-filter: blur(5px) !important; /* CSS-Sicherheit für Safari (Apple-Geräte) */


		 }

		 /* Der exakte Zeitstrahl für das Element */
		 @keyframes slideInOut {
   /* 0% bis 60% (Sekunde 0 bis 30): Bleibt komplett versteckt */
   0% { left: -300px; }
   60% { left: -300px; }

   /* Von Sekunde 30 bis 31: Fährt elegant nach rechts raus ins Sichtfeld */
   62% { left: 50px; }

   /* Von Sekunde 31 bis 50 (Genaue 20 Sekunden Haltezeit): Bleibt stehen */
   100% { left: 50px; }


 }

		 /* CSS für den Text und den blinkenden Live-Punkt bleibt genau wie vorher */
		 .slideout-box p { margin: 0; padding: 0; }
		 .pulse-dot { width: 8px; height: 8px; background-color: #00ff66; border-radius: 50%; position: relative; }
		 .pulse-dot::after {
		   content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
		   border-radius: 50%; background-color: #00ff66; animation: pulse-animation 2s infinite ease-in-out;
		 }
		 @keyframes pulse-animation {
			 0% { transform: scale(1);
				 opacity: 1;
				  }
				100% {
						transform: scale(3);
						opacity: 0;
						}
					}






.usercount .pulse-dot {
	display:block;
	float:left;
	margin-right:2px;
	margin-top:10px;
}

.usercount {
	display:block;
	width:180px;
	position:relative;
	margin:0 auto;
	top:-80px;
	left:-40px;
}

.usercount p {
	text-align:left!important;
	margin-left:20px;
}














/* headlines, p, a, smallfont */




h1 {
font-family: 'Special Elite', verdana;
font-size:6rem;
font-weight:bold;
line-height:6rem;
letter-spacing:-0.3rem;
margin:0px 0px 20px 0px;
text-align:center;
}


h2 {
font-family: 'Special Elite', verdana;
font-size:3rem;
font-weight:bold;
line-height:3.8rem;
letter-spacing:-0.1rem;
margin:0px 0px 15px 0px;
text-align:center;
}


h3 {
font-family: 'Open Sans', verdana;
font-size:2.5rem;
font-weight:400;
line-height:2.8rem;
letter-spacing:-0.1rem;
margin:0px 0px 20px 0px;
text-align:center;
font-style:italic;
}


h4 {
font-family: 'Open Sans', verdana;
font-size:2.2rem;
font-weight:800;
line-height:2.2rem;
letter-spacing:0rem;
margin:0px 0px 40px 0px;
text-align:left;
}


h5 {
font-family: 'Open Sans', verdana;
font-size:2.rem;
font-weight:400;
line-height:2rem;
letter-spacing:0rem;
margin:0px 0px 20px 0px;
text-align:left;
}


p {
font-family: 'Open Sans', verdana;
font-size:1.7rem;
line-height:2.4rem;
font-weight:400;
letter-spacing:0rem;
color:black;
margin:0px 0px 0px 0px;
text-align:center;
}


.small-font {
font-size:1.0rem!important;
line-height:1.5rem!important;
letter-spacing:0rem;
}

.nobr	{
	white-space:nowrap;
}



img {
width:100%;
margin:0px;
padding:0px;
}

a {
color:black;

}

a:hover {
color:black;
text-decoration:none;
}











/* listen */



ul {
margin:20px 0px 10px -20px;
}

li {
font-family: 'Open Sans', verdana;
font-size:1.7rem;
line-height:2.4rem;
font-weight:400;
letter-spacing:0rem;
color:black;
margin:0 0 10px 0;
text-align:left;
}


.list1 {
list-style-type:disc;
padding-left:20px;
}

.list2 {
list-style-type:none;
padding-left:0px;
}

.list3 {
list-style-image: url(../images/listimg.png);
}









/* center, left, right, fixed, absolute, flex, auto, centercenter */


.center, .center h1, .center h2, .center h3, .center h4, .center h5, .center p, .center a {
text-align:center;
}

.auto img{
width:auto!important;
}

.absolute {
position:absolute!important;
z-index:11000;
}

.right {
float:right!important;
}

.flex {
display:flex;
flex-direction:row;
}

.centercenter {
position:absolute;
width:100%;
top:50%;
left:50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

.imgshape {
width:300px;
float:left;
shape-outside: circle(50%);
}




/* logo */


.logo {
position:relative;
margin:0 auto;
z-index:1;
width:60%;
top:50px;

}

.logo img{
width:100%;
margin-top:60px;
}


.logo2 {
position:relative;
width:600px;
margin:0 auto;

}

.logo2 img{
width:100%;
}


.logosmall {
position:relative;
left:50%;
margin-left:-75px;
width:150px;
}

.logosmall img{
width:100%;
}







/* shadow, topchange, rounded */



.shadow {
	-webkit-text-shadow: 3px 13px 20px rgba(0,0,0,1);
	-moz-text-shadow: 3px 13px 20px rgba(0,0,0,1);
	-o-text-shadow: 3px 13px 20px rgba(0,0,0,1);
	text-shadow: 3px 13px 20px rgba(0,0,0,1);

}


.shadow2 {

	-webkit-box-shadow: 0px 5px 19px 5px rgba(0,0,0,0.54);
box-shadow: 0px 5px 19px 5px rgba(0,0,0,0.54);
}
/* Der Schattenwerfer, der außerhalb des overflow:hidden liegt */
.footer-shadow {
  position: relative;
  width: 100%;
  height: 30px;          /* Gibt dem Schatten schön viel Platz nach unten */
  margin-top: -30px;     /* Schiebt das Element exakt um seine eigene Höhe nach oben UNTER die Sektion */
  background: transparent; /* WICHTIG: Transparent, sonst siehst du einen schwarzen Balken im Bild! */
  z-index: 99;           /* Höher als die 10 der Sektionen und höher als der Footer (0) */

  /* Dein 3D-Schatten fällt nun perfekt nach unten auf den Footer */
  -webkit-box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.7);
  -moz-box-shadow:    0px 15px 15px rgba(0, 0, 0, 0.7);
  box-shadow:         0px 15px 15px rgba(0, 0, 0, 0.7);

  pointer-events: none;  /* Klicks gehen durch */
}

.topchange {
	-webkit-transition: all 0.3s ease-in-out;
 	-moz-transition: all 0.3s ease-in-out;
 	-o-transition: all 0.3s ease-in-out;
 	transition: all 0.3s ease-in-out;
}

.topchange2 {
	position:fixed;
	top:0px;
}

.scrollchange {
	-webkit-transition: all 0.3s ease-in-out;
 	-moz-transition: all 0.3s ease-in-out;
 	-o-transition: all 0.3s ease-in-out;
 	transition: all 0.3s ease-in-out;
}

.scrollchange2 {
	position:fixed;
	top:0px;
}

.rounded {
	border-radius: 15px 15px 15px 15px;
	-o-border-radius: 15px 15px 15px 15px;
	-moz-border-radius: 15px 15px 15px 15px;
	-webkit-border-radius: 15px 15px 15px 15px;
}





















/* colors */



.color {
background-color:#232323;
}

.color h1, .color h2, .color h3, .color h4, .color h5, .color p, .color a{
color:#fff;
}

.white h1, .white h2, .white h3, .white h4, .white h5, .white p, .white a{
color:#fff;
}


.color2 {
background-color:#000000;
color:grey!important;
}






/* button */

@keyframes shake-animation {
	0% { transform: translateX(0); }
	  4% { transform: translateX(-6px) rotate(-1deg); }
	  8% { transform: translateX(5px) rotate(1deg); }
	  12% { transform: translateX(-5px) rotate(-1deg); }
	  16% { transform: translateX(4px) rotate(1deg); }
	  20% { transform: translateX(-3px) rotate(0); }
	  24% { transform: translateX(0); }

	  /* 24% bis 100%: Absolute Stille (Die Pause) */
	  100% { transform: translateX(0); }
}

.button {
position:relative;
width:auto;
margin:0px 0px 0px 0px;
padding:20px 60px;
display:inline-block;
font-family: 'Open Sans', verdana;
font-size:1.5rem;
line-height:2.5rem;
font-weight:800;
letter-spacing:0rem;
color:#ffffff;
text-decoration:none;
text-align:center;
cursor:pointer;

background:#000000;
bbackground:linear-gradient(180deg, rgba(255, 0, 0, 1) 0%, rgba(92, 1, 1, 1) 80%);
border-radius: 110px;
-o-border-radius: 110px;
-moz-border-radius: 110px;
-webkit-border-radius: 110px;

animation: shake-animation 10s ease-in-out infinite;
  animation-delay: 13s;

	z-index:9999;
}


.button:hover {
background-color:darkred;
color:#ffffff;
}


.button2 {
position:relative;
width:auto;
margin:5px 0px 5px 0px;
padding:20px 20px;
display:inline-block;
font-family: 'Open Sans', verdana;
font-size:1.5rem;
line-height:2.5rem;
font-weight:800;
letter-spacing:0rem;
color:#ffffff;
text-decoration:none;
text-align:center;
ccursor:pointer;
border:none;
background:#000000;
bbackground:linear-gradient(180deg, rgba(255, 0, 0, 1) 0%, rgba(92, 1, 1, 1) 80%);
border-radius: 110px;
-o-border-radius: 110px;
-moz-border-radius: 110px;
-webkit-border-radius: 110px;
z-index:10;


}


.button2:hover {
background-color:darkred;
color:#ffffff;
}




.button2a {
position:relative;
width:auto;
margin:20px;
padding:20px 35px 20px 35px;
display:inline-block;
font-family: 'Open Sans', verdana;
font-size:1.7rem;
line-height:2.1rem;
font-weight:400;
letter-spacing:0rem;
color:#000;
text-decoration:none;
text-align:center;
cursor:pointer;

background-color:#00000011!important;
bbackground: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(217, 217, 217, 1) 80%);

box-shadow: 5px 5px 10px #00000044,
            -5px -5px 10px #ffffff;

						border-radius: 100px;
						-webkit-border-radius: 100px;

}


.button2a:hover {
	box-shadow: inset 5px 5px 10px #00000044,
	            inset -5px -5px 10px #ffffff;
background-color:#00000022!important;
padding:22px 35px 18px 35px;

}













/* background-fullscreen */



.bg-fullscreen {
min-height:100vh!important;
min-height:100%;
background: url(../images/bg_fullscreen.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}





.bg-gold {
background: url(../images/bg_gold.jpg) repeat-y top center;
background-size: 105%;
}

.bg-gold::after {
	content:'';
	display:block;
	position:absolute;
	width:100%;
	Height:100%;
	top:0;
	left:0;
background: linear-gradient(to right,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 1) 100%);
}


.bg-gold2 {
background: url(../images/bg_gold.jpg) repeat-y top center;
background-size: 100%;
}

.bg-gold2::after {
	content:'';
	display:block;
	position:absolute;
	width:100%;
	Height:100%;
	top:0;
	left:0;
background: linear-gradient(to right,rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0,1) 95%);
}


.bg-stone {
background: url(../images/stone.jpg) repeat-y;
background-size: 100%;
}

.bg-black {
background-color: #000000;
}

.bg-verlauf {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 10%);
z-index:110;
}


.mobile-on {
	display:none;
}




.topper {
	position: fixed;
    /* Verankert den Header an der tatsächlichen Bildschirmkante,
       egal ob die Browser-Leiste da ist oder nicht */
    top: env(safe-area-inset-top, 0px);
    left: 0;
    width: 100%;
    z-index: 9999;
    padding: 10px;
    box-sizing: border-box;
		border-bottom:1px solid #000000;
}




.topper2 {
	position:fixed;
	bottom:-200px;
	left:0;
	width:100%;
	z-index:9999;
	padding:15px 30px;

	border-top: 1px solid transparent; /* 1. Set border width and make it transparent */
  border-image: linear-gradient(to right,rgba(0, 0, 0, 1) 0%, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 1) 70%, rgba(0, 0, 0,1) 100%) 1;


	animation: slideUp 1s ease-out 10s forwards;
   }

   @keyframes slideUp {
     from {
       bottom: -200px;
       opacity: 1;
     }
     to {
       bottom: 0px; /* Zielposition im View */
       opacity: 1;
     }
   }



	 .netlite {
	 	margin-top:20px;
	 	width:60px;
	 	opacity: 0.2;
	 }
	 .netlite:hover {

	 	opacity: 0.9;
	 }









	 .animate {
	 	opacity: 0;
	 	transform: translateY(40px);
	 	transition: opacity 0.6s ease, transform 0.6s ease;
	 	will-change: opacity, transform, position;
	 	transform: rotate(0deg);

	 }


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


	 .fade-up {
	 	transform: translateY(40px);
	 }

	 .fade-down {
	 	transform: translateY(-40px);
	 }

	 .slide-left {
	 	transform: translateX(40px);
	 }

	 .slide-right {
	 	transform: translateX(-40px);
	 }


	 .zoom-in {
	 	transform: scale(0.9);
	 }


	 .zoom-in-rotate {
	 	transform: scale(0.9);
	 	transform: rotate(100deg);
	 }



	 .delay-1 { transition-delay: 0.1s; }
	 .delay-2 { transition-delay: 0.2s; }
	 .delay-3 { transition-delay: 0.3s; }
	 .delay-4 { transition-delay: 0.4s; }
	 .delay-4a { transition-delay: 1s; }
	 .delay-4b { transition-delay: 1.2s; }
	 .delay-4c { transition-delay: 1.4s; }


.last {

	border-bottom: 1px solid #000000; /* 1. Set border width and make it transparent */

}


footer {
	position:fixed;
	left:0;
	bottom:0!important;
	width:100%;
  z-index: 0; /* Liegt brav hinter dem Inhalt */
	background-color:#000000;
	padding-top:500px;
	ppointer-events: auto; /* Macht die Links im Footer garantiert klickbar */
}

.klicktipp {
	position:relative;
	width:110px;
	margin-top:-60px;
	margin-left:220px;
z-index:2!important;
}

.book {
	width:60%;
	margin:10px auto;
	margin-top:0px;
}

.slider2 {
	width:350px;
	margin:0 auto;
}





.fliesstext p {
	margin-bottom:20px;
	text-align:justify;
}

.fliesstext h2 {
	font-size:2.5em;
	line-height:2.8rem;
}

.slider-nav {
	z-index:999;
}




.mentortools-iframe-wrapper {
      width: 100%;
      height: 100vh; /* Nutzt die volle Höhe des sichtbaren Bildschirms */
      mmax-height: 800px; /* Optionale Begrenzung, damit es auf großen Monitoren nicht zu lang gezogen wird */
      margin-top: 20px;
      position: relative;
    }
    .mentortools-iframe-wrapper iframe {
      width: 100%;
      height: 100%;
      border: none;
      display: block;
    }



























































@media screen and (max-width:1200px) {


html {
	font-size:8px;
}





}

































@media screen and (max-width:1000px) and (orientation:portrait) {


html {
	font-size:10px;
}


.flex {
	flex-direction:column;
}



p {
font-family: 'Open Sans', verdana;
font-size:1.5rem;
line-height:2.2rem;
font-weight:400;
letter-spacing:0rem;
color:black;
margin:0px 0px 0px 0px;
text-align:center;
}
li {
font-family: 'Open Sans', verdana;
font-size:1.5rem;
line-height:2.2rem;
font-weight:400;
}



/* logo */


.logo {
position:relative;
margin:0 auto;
z-index:1;
width:80%;
top:30px;
}


.logo2 {
position:relative;
width:100%;
margin-left:0%;

}

.logo2 img{
width:100%;
}





/* button */


.button, .button2 {
position:relative;
width:100%;
margin:0px 0px 0px 0px;
padding:20px 0px;

}



.book {
	width:60%;
	margin:10px auto;
	margin-top:0px;
}


.bg-gold {
background: url(../images/bg_gold.jpg) repeat-y top center;
background-size: 123%;
}

.bg-gold::after {
	content:'';
	display:block;
	position:absolute;
	width:100%;
	Height:100%;
	top:0;
	left:0;
background: linear-gradient(to right,rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.3) 100%);
}


.bg-gold2 {
background: url(../images/bg_gold.jpg) repeat-y top center;
background-size: 120%;
}

.bg-gold2::after {
	content:'';
	display:block;
	position:absolute;
	width:100%;
	Height:100%;
	top:0;
	left:0;
background: linear-gradient(to right,rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0,0.1) 100%);
}


.bg-verlauf {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 1) 50%);

}



.topper {
	position: fixed;
    /* Verankert den Header an der tatsächlichen Bildschirmkante,
       egal ob die Browser-Leiste da ist oder nicht */
    top: env(safe-area-inset-top, 0px);
    left: 0;
    width: 100%;
    z-index: 9999;
    padding: 10px;
    box-sizing: border-box;
		border-bottom:1px solid #000000;
}




.topper2 {
	position:fixed;
	bottom:-200px;
	left:0;
	width:100%;
	z-index:9999;
	padding:15px 30px;

	border-top: 1px solid transparent; /* 1. Set border width and make it transparent */
  border-image: linear-gradient(to right,rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 30%, rgba(255, 255, 255, 0.5) 70%, rgba(255, 255, 255, 0.5) 100%) 1;



	animation: slideUp 1s ease-out 10s forwards;
   }

   @keyframes slideUp {
     from {
       bottom: -200px;
       opacity: 1;
     }
     to {
       bottom: 0px; /* Zielposition im View */
       opacity: 1;
     }
   }









	 		 /* ==========================================================================
	 		    Social Proof Slide-Out Störelement mit CSS-Timing
	 		    ========================================================================== */

	 		 .slideout-box {
	 		   position: fixed;
	 		   bottom: 190px;
	 		   left: -300px; /* Startet unsichtbar außerhalb des Bildschirms */
	 		   background-color: #44444499;
	 		   color: #ffffff;
	 		   padding: 6px 12px;
	 		   border-radius: 4px;
	 		   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
	 		   display: flex;
	 		   align-items: center;
	 		   gap: 12px;
	 		   font-family: sans-serif;
	 		   font-size: 14px;
	 		   z-index: 9999;

	 		   /* HIER STARTET DIE ANIMATION AUTOMATISCH:
	 		      Dauer insgesamt: 20 Sekunden (10s warten + reinfahren + 10s zeigen + rausfahren) */
	 		   animation: slideInOut 30s ease-in forwards;


	 			 /* DER EFFEKT: Macht alles direkt HINTER der Box um 5 Pixel unscharf */
	 			   backdrop-filter: blur(5px) !important;
	 			   -webkit-backdrop-filter: blur(5px) !important; /* CSS-Sicherheit für Safari (Apple-Geräte) */


	 		 }

	 		 /* Der exakte Zeitstrahl für das Element */
	 		 @keyframes slideInOut {
	    /* 0% bis 60% (Sekunde 0 bis 30): Bleibt komplett versteckt */
	    0% { left: -300px; }
	    60% { left: -300px; }

	    /* Von Sekunde 30 bis 31: Fährt elegant nach rechts raus ins Sichtfeld */
	    62% { left: 20px; }

	    /* Von Sekunde 31 bis 50 (Genaue 20 Sekunden Haltezeit): Bleibt stehen */
	    100% { left: 20px; }


	  }

	 		 /* CSS für den Text und den blinkenden Live-Punkt bleibt genau wie vorher */
	 		 .slideout-box p { margin: 0; padding: 0; }
	 		 .pulse-dot { width: 8px; height: 8px; background-color: #00ff66; border-radius: 50%; position: relative; }
	 		 .pulse-dot::after {
	 		   content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
	 		   border-radius: 50%; background-color: #00ff66; animation: pulse-animation 2s infinite ease-in-out;
	 		 }
	 		 @keyframes pulse-animation {
	 			 0% { transform: scale(1);
	 				 opacity: 1;
	 				  }
	 				100% {
	 						transform: scale(3);
	 						opacity: 0;
	 						}
	 					}






						.slider2 {
							width:auto;
							margin:0 auto;
						}

						.slider-nav {
							width:80%;
							margin:0 auto;
						}




}





















































/* grid */

.nofloat {
	clear:both;
}

.grid-wrapper {
	position:relative;
	margin: 0 auto;
	width:800px;

}

.container {
	position:relative;
	margin:0;
	padding:0;
	width: 100%;
	padding:0px 0px 0px 0px;
z-index:10;
}

.container2 {
	position:relative;
	margin:0;
	padding:0;
	width: 100%;
	padding:0px 0px 0px 0px;

}

.container p,
.container h1,
.container h2,
.container h3,
.container a,
.container span {
  position: relative;
  z-index: 20 !important; /* Liegt damit garantiert ÜBER allen Hintergrundbildern oder Blend-Effekten */
  pointer-events: auto !important;
}

.container a {
  position: relative;

  pointer-events: auto !important; /* Erzwingt, dass der Button die Maus registriert */
  cursor: pointer !important;     /* Erzwingt die Hand */
}


.grid-1-1 {
	float:left;
	width:100%;
}



.grid-1-2 {
	float:left;
	width:50%;
}
.grid-2-2 {
	float:right;
	width:50%;
}


.grid-1-3 {
	float:left;
	width:33.33%;
}

.grid-2-3 {
	float:left;
	width:33.33%;
}

.grid-3-3 {
	float:right;
	width:33.33%;
}

.grid-1-4 {
	float:left;
	width:25%;
}

.grid-2-4 {
	float:left;
	width:25%;
}

.grid-3-4 {
	float:left;
	width:25%;
}

.grid-4-4 {
	float:right;
	width:25%;
}


























@media screen and (max-width:1000px) and (orientation:portrait) {

.grid-wrapper {
	margin: 0 auto;
	width:100%;
	padding:0;
}

.grid-1-1,
.grid-1-2,
.grid-2-2,
.grid-1-3,
.grid-2-3,
.grid-3-3,
.grid-1-4,
.grid-2-4,
.grid-3-4,
.grid-4-4 {
	float:left;
	width:100%;
}





}