@charset "UTF-8";
/* CSS Document */

html, body {
	margin: 0;
	padding: 0;
	cursor: url('images/test/Curser_test2_white_wirbel.svg') 15 15, auto;
  }
  
 /* Grundlegende Einstellungen für den Body */
body {
	margin: 0;
	padding: 0;
	height: 100vh;
	width: 100vw;
	overflow-x: hidden;
	font-family: "arbotek-rounded", sans-serif;
	background-color: #000;
  }

  /* Hamburger-Menu*/



/* Allgemeine Eigenschaften für Links und Buttons */
a, button {
	cursor: pointer;
}

/* Navigation */
.navigation {
	position: fixed;
	bottom: -100vh; /* Navigation ist anfangs außerhalb des Bildschirms */
	width: 100%;
	height: 100vh;
	z-index: 9999;
	background-color: #ff5100;
	transition: .5s;
	display: flex;
	justify-content: center;
	align-items: center;
	display: none;
}

/* Navigation (ul) */
.navigation ul {
	width: 100%;
	display: flex;
	flex-direction: column;
	 /* Links horizontal zentrieren */
	padding: 0;
	margin: 0; /* Entfernt möglichen unerwünschten Rand */
}

/* Listenelemente */
.navigation ul li {
	font-family: "arbotek-rounded", sans-serif;
	color: #000;
	text-transform: lowercase;
	list-style-type: none;
	font-size: 2.5rem;
	width: auto; /* Verhindert, dass die Listenelemente die gesamte Breite einnehmen */
	text-align: left; 
	text-decoration: none;
	transition: 0.3s ease-out;
}

.navigation ul li:hover {
	transform: skew(-30deg);
	transition: 0.3s ease-in;
	text-decoration: none;
}

/* Verhindert die standardmäßige Unterstreichung der Links */
.navigation a {
	text-decoration: none;
	position: relative;
  }
  
  /* Unterstrich beim Hover - von rechts einfliegen */
  .navigation a::after {
	content: '';
	position: absolute;
	bottom: 0;  /* Platziert den Strich direkt unter dem Text */
	right: -100%; /* Startet außerhalb des Links auf der rechten Seite */
	width: 55px;  /* Länge des Unterstrichs */
	height: 2px;  /* Dicke des Unterstrichs */
	background-color: #000;  /* Farbe des Unterstrichs */
	transition: right 0.3s ease-in-out;  /* Sorgt für die Animation von rechts */
	opacity: 0%;
  }
  
  /* Bei Hover den Strich von rechts in die Mitte bewegen */
  .navigation a:hover::after {
	opacity: 100%;
	right: 90%; /* Bewegt den Strich in die Mitte des Links */
	transform: translateX(50%); /* Korrigiert die Position, sodass er in der Mitte des Links landet */
  }
  
  
  

/* Hamburger Button */
.hamburger {
	display: block;
	position: fixed;
	bottom: 20px;
	right: 30px;
	width: 30px;
	height: 30px;
	transform: translateY(-50%);
	border: 0;
	background-color: transparent;
	z-index: 100;
}

/* Hamburger-Icon (Bars) */
.bar {
	margin-top: 20px;
	margin-left: 5%;
	background: #ff5100;
	width: 100%;
	height: 2px;
	transition: all .3s ease-in;
}

#bar3 {
	margin-top: 5px;
}

/* Hamburger Animationen beim Öffnen */
.hamburger.open #bar1 {
	transform: rotate(45deg) translate(3px, 2px);
	background-color: #000;
}

.hamburger.open #bar3 {
	transform: rotate(-45deg) translate(3px, -2px);
	background-color: #000;
}

/* Navigation aktiv (ausgeklappt) */
.navigation.active {
	bottom: 0; /* Wenn aktiv, Navigation sichtbar */
}






/* Content */
  .border-div {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100vh;
	z-index: 120;
	border-width: 10px;
	border-color: #ff5100;
	position: fixed;
	border-style:solid;
	pointer-events: none;
  }

  .content {
	width: 100vw;
	height: 100vh;
	z-index: 120;
	border-width: 10px;
	border-color: #ff5100;
	border-radius: 25px;
	position: absolute;
	border-style:solid;
	pointer-events: none;
	margin: -15px;
  }
  
  .points {
	width: 100%;
	height: 200px;
	position: absolute;
	display: flex;
	align-self: start;
	margin-top: 30px;
	margin-left: 30px;
	flex-direction: column;
	gap: 7px;
  }

 .dot {
	width: 15px;
	height: 15px;
	background-color: #ff5100;
	border-radius: 50%;
 }

 .dot2 {
	width: 15px;
	height: 15px;
	border-color: #ff5100;
	border-width: 2px;
	border-radius: 50%;
	border-style: solid;
	
 }
  
 .innerdot {
	background-color: #ff5100;
	height: 5px;
 }

 .points2 {
	width: 1%;
	height: 100px;
	position: absolute;
	display: flex;
	align-self: end;
	right: 15px;
	bottom: 60px;
	flex-direction: column;
	gap: 7px;
	transform: rotate(180deg);
 }



/* Linie auf der linken Seite */
.line-left {
	position: fixed;                      /* Fixiert die Linie im Viewport */
	top: 50%;                             /* Startet in der Mitte des Bildschirms */
	left: 32px;                              /* Linie an den linken Rand */
	transform: translateY(-50%);           /* Exakte vertikale Zentrierung */
	width: 2px;                           /* Dicke der Linie */
	height: 0;                            /* Anfangshöhe der Linie (unsichtbar) */
	background-color: #ff5100;            /* Farbe der Linie */
	z-index: 9999;                        /* Sehr hoher Z-Index */
	pointer-events: none;                 /* Verhindert, dass die Linie Interaktionen blockiert */
	animation: slideInOutLeft 5s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite; /* Animation */
  }
  
  /* Linie auf der rechten Seite */
  .line-right {
	position: fixed;                      /* Fixiert die Linie im Viewport */
	top: 50%;                             /* Startet in der Mitte des Bildschirms */
	right: 32px;                             /* Linie an den rechten Rand */
	transform: translateY(-50%);           /* Exakte vertikale Zentrierung */
	width: 2px;                           /* Dicke der Linie */
	height: 0;                            /* Anfangshöhe der Linie (unsichtbar) */
	background-color: #ff5100;            /* Farbe der Linie */
	z-index: 9999;                        /* Sehr hoher Z-Index */
	pointer-events: none;                 /* Verhindert, dass die Linie Interaktionen blockiert */
	animation: slideInOutRight 5s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite; /* Animation */
  }
  
  /* Animation für die Linie links (Expands nach oben und unten) */
  @keyframes slideInOutLeft {
	0% {
	  height: 0;                           /* Anfangszustand (unsichtbar) */
	}
	50% {
	  height: 50vh;                        /* 50% der Viewport-Höhe nach oben und unten */
	}
	100% {
	  height: 0;                           /* Geht zurück auf Höhe 0 */
	}
  }
  
  /* Animation für die Linie rechts (Expands nach oben und unten) */
  @keyframes slideInOutRight {
	0% {
	  height: 0;                           /* Anfangszustand (unsichtbar) */
	}
	50% {
	  height: 50vh;                        /* 50% der Viewport-Höhe nach oben und unten */
	}
	100% {
	  height: 0;                           /* Geht zurück auf Höhe 0 */
	}
  }
  
  
  
  
  
  
  
  
  /*
  .counter {
	position: fixed;
	top: 10px;    
	left: 50px;   
	font-size: 2.5rem;  
	color: #ff5100;   
	font-family: "arbotek-rounded", sans-serif;
	z-index: 10000;   
  }
  
  */

  .counter2 {
    position: fixed;
	font-family: "arbotek-rounded", sans-serif;
    top: 5px;
    left: 45px;
    font-size: 2rem;
    color:#ff5100;
    padding: 10px;
    border-radius: 5px;
}
  
  
  
/* Kreis in der oberen rechten Ecke */
.rotate {
	position: fixed;
	top: 25px; /* Positioniert den Kreis in der oberen rechten Ecke */
	right: 25px; /* Positioniert den Kreis am rechten Rand */
	width: 20px;
	height: 20px;
	background-color: #000;
	border: 2px solid #ff5100;
	border-radius: 50%; /* Macht den Kreis rund */
	z-index: 9999; /* Höherer Z-Index, damit der Kreis immer sichtbar bleibt */
	pointer-events: none; /* Verhindert Interaktionen mit dem Kreis */
  }
  
  /* Container für die Linien, der um den Kreis rotiert */
  .stream-container {
	position: fixed;
	top: 25px; /* Gleiche Position wie der Kreis */
	right: 25px; /* Gleiche Position wie der Kreis */
	width: 20px; /* Entspricht der Breite des Kreises */
	height: 20px; /* Entspricht der Höhe des Kreises */
	z-index: 1000; /* Niedrigerer Z-Index als der Kreis, damit der Kreis sichtbar bleibt */
	pointer-events: none; /* Verhindert Interaktionen mit den Linien */
	transform-origin: center; /* Der Container rotiert um seinen Mittelpunkt */
	animation: rotateLines 5s linear infinite; /* Animation für die Rotation der Linien */
  }
  
  /* Jede Linie, die aus dem Kreis herausragt */
  .stream {
	position: absolute;
	width: 2px; /* Dicke der Linie */
	height: 17px; /* Länge der Linie */
	background-color: #ff5100; /* Farbe der Linie */
	top: 50%; /* Startet in der Mitte des Containers */
	left: 50%; /* Startet in der Mitte des Containers */
	transform-origin: 50% 0%; /* Rotation erfolgt von der oberen Mitte der Linie */
  }
  
  /* Animation für die Rotation der Linien im Kreis */
  @keyframes rotateLines {
	0% {
	  transform: rotate(0deg); /* Startwinkel */
	}
	100% {
	  transform: rotate(360deg); /* Endwinkel */
	}
  }
  
  /* Positionierung der Linien in 45-Grad-Abständen */
  .stream:nth-child(1) {
	transform: rotate(0deg); /* 0 Grad */
  }
  
  .stream:nth-child(2) {
	transform: rotate(45deg); /* 45 Grad */
  }
  
  .stream:nth-child(3) {
	transform: rotate(90deg); /* 90 Grad */
  }
  
  .stream:nth-child(4) {
	transform: rotate(135deg); /* 135 Grad */
  }
  
  .stream:nth-child(5) {
	transform: rotate(180deg); /* 180 Grad */
  }
  
  .stream:nth-child(6) {
	transform: rotate(225deg); /* 225 Grad */
  }
  
  .stream:nth-child(7) {
	transform: rotate(270deg); /* 270 Grad */
  }
  
  .stream:nth-child(8) {
	transform: rotate(315deg); /* 315 Grad */
  }
  
  







  
  
  
 
  
  

.standard-btn {
	height: auto;
	width: auto;
	font-family: "arbotek-rounded", sans-serif;
	font-size: 20px;
	z-index: 5;
	border-radius: 0px 20px 0px;
	background: none;
	color: #ff5100;
	text-align: center;
	padding-top: 4px;
	padding-bottom: 4px;
	padding-left: 35px;
	padding-right: 35px;
	border: 1.5px solid #ff5100;
	text-decoration: none;
	transition: 0.3s;
	box-shadow:
	0 0px 20px 0 rgba(255, 81, 0, 0.3),
	0 0px 20px 0 rgba(255, 81, 0, 0.3),
	0 0px 20px 0 rgba(255, 81, 0, 0.3),
	0 0px 20px 0 rgba(255, 81, 0, 0.3),
	0 0px 20px 0 rgba(255, 81, 0, 0.2) inset,
	0 0px 20px 0 rgba(255, 81, 0, 0.2) inset,
	0 0px 20px 0 rgba(255, 81, 0, 0.2) inset,
	0 0px 20px 0 rgba(255, 81, 0, 0.2) inset;
	margin-top: 40px; 
	margin-bottom: 30px; 
}

.standard-btn:hover {
	background-color: #ff5100;
	text-decoration: none;
	color: #fff;
	box-shadow:
	0 0px 15px 0 rgba(255, 81, 0, 0.5),
	0 0px 15px 0 rgba(255, 81, 0, 0.5),
	0 0px 15px 0 rgba(255, 81, 0, 0.5),
	0 0px 15px 0 rgba(255, 81, 0, 0.5);
	padding-left: 45px;
	padding-right: 45px;
	transform: skew(20deg);
}

.circle-ani {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	width: 100%;
	overflow: hidden;
	padding: 30px;
border-radius: 100px;
scroll-snap-align: start;
flex-direction: column;

	
  }

  .back-image {
	z-index: -1;
	object-fit: cover;
	width: 100%;
	height: 100vh;
	position: absolute;
  }

  .circle-back {
	position: absolute;
	background-image: linear-gradient(#001487, #000854);
	background-image: linear-gradient(#696969, #0f0f0f);
	
	opacity: 100%;
	width: 100%;
	height: 100vh;
	mix-blend-mode:hard-light;
	color: #ff5100;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding-bottom: 50px;
	font-size: 24px;
	font-weight: 100;
	font-family: "arbotek-rounded", sans-serif;
	padding-left: 40px;
	padding-right: 40px;
	text-align: center;
	line-height: 2.4rem;
  }

  
  .circle-a {
	position: relative;
	width: 100%;
	height: auto;
	max-height: 400px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-left: 40px;
	padding-right: 40px;
	z-index: 5;
	flex-direction: column;
  }
  
  .circle-wrapper {
	width: 100%;
	height: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 5;
  }


  .logo-a {
	position: absolute;
	max-width: 400px;
	max-height: 400px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	overflow: hidden;
	margin-left: 90px;
	margin-right: 90px;
	z-index: 5;
	transition: transform 0.5s ease;
	
  }

  .logo-a:hover {
	transform: scale(1.4);
	transition: 1s ease;
  }
  
  .background-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: relative;
	z-index: 5;
  }

  .text-circle {
	width: 500px;
    -webkit-animation:spin 12s linear infinite;
    -moz-animation:spin 12s linear infinite;
    animation:spin 12s linear infinite;
}
@-moz-keyframes spin { 
    100% { -moz-transform: rotate(-360deg); } 
}
@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(-360deg); } 
}
@keyframes spin { 
    100% { 
        -webkit-transform: rotate(-360deg); 
        transform:rotate(-360deg); 
    } 
}
  
.herosub {
	color: #ff5100;
	padding-bottom: 20px;
	font-size: 24px;
	font-weight: 100;
	font-family: "arbotek-rounded", sans-serif;
	padding-left: 40px;
	padding-right: 40px;
	text-align: center;
	line-height: 2rem;
	transition: transform 0.5s ease;
}

.herosub:hover {
	transform: scale(1.1);
	transition: 0.5s;
	letter-spacing: 2px;
  }


/* 2. Sektion */



.section2 {
	width: 100%;
	height: auto;
	display: flex;
	justify-content: center;
	flex-direction:column;
	padding-bottom: 20px;
	/* position:relative; */
	align-items: center;
	align-content: center;
	padding-top: 50px;
	padding-bottom: 100px;
	padding-left: 40px;
	padding-right: 40px;
	
	/* overflow: hidden; */
	/*background-image: linear-gradient(#000,#001487);*/
	background-image: linear-gradient(#000,#1f1f1f);

}

.section2-wrapper {
	width: 100%;
	padding: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.datum-top {
	font-size: 30px;
	color: #0025ff;
	font-family: "arbotek-rounded", sans-serif;
	text-align: start;
	line-height: 1rem;
	padding-left: 30px;
}

.s2bold {
	font-family: "tot-shizukago-stdn", sans-serif;
	font-weight: 700;
	font-style: normal;
	font-style: italic;
	font-size: 160px;
	letter-spacing: -5px;
}

.subtype {
	font-family: "tot-shizukago-stdn", sans-serif;
	font-weight: 100;
	font-style: normal;
    font-size: 90px;
    line-height: 7rem;
    text-transform: uppercase;
    color: #0025ff;
    font-style: italic;
    text-align: left;
    position: relative;
	padding-left: 50px;
	padding-right: 50px;
	margin-top: 20px;
	text-align: center;
	letter-spacing: 20px;
}

.subtype:hover {
	padding-right: 40px;
    margin-top: 20px; /* Erhöht den Abstand nach oben */
    margin-bottom: 40px; /* Erhöht den Abstand nach unten */
	filter: blur(3px);
}



.s2-div {
	position: relative;
	width: 100%;
	max-width: 1300px;
	height: auto;
	display: flex;
	align-items: start;
	justify-content: start;
	flex-direction: column;
	margin-top: 100px;
	background-color: #ff5100;
	border-radius: 10px;
	mask: url('images/section-2/card-mask.svg');
	-webkit-mask: url('images/section-2/card-mask.svg') center / contain no-repeat, linear-gradient(#000000 0 0 );
	-webkit-mask-size: 21rem;
	-webkit-mask-position: bottom left;
	-webkit-mask-position: calc(0px) calc(100% + 1px);
	-webkit-mask-composite: exclude;
	
	
}

.icon-card-svg-wrapper {
	width: 100%;
	max-width: 1300px;
	position: relative;
	margin-top: -120px;
	display: flex;
	justify-content: start;
	align-items: center;
}

.icon-card-svg {
	width: 253px;
	height: 120px;
	background-color: #0025ff;
	border-radius: 10px;
	background-image: url("images/section-2/earth_XS.jpg");
	background-size: cover;
	border-color: #ff5100;
	border-style: solid;
	border-width: 3px;
}

.icon-card-content {
	width: 40px;
	height: 120px;
	background-color: #ff5100;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	margin-top: -3px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.icon-card-content-p {
	font-family: "tot-shizukago-stdn", sans-serif;
	font-weight: 700;
	transform: rotate(-90deg);
	margin-top: 10px;
	margin-right: 5px;
}

.icon-txt-wrapper {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0px 20px 0px 20px;
} 

.icon-txt {
	position: static;
	width: 100%;
	height: auto;
	display: flex;
	justify-content: start;
	align-items: center;
	gap: 20px;
	margin-top: 10px;

}

.item-32 {
	font-family: "tot-shizukago-stdn", sans-serif;
	display: flex;
	flex-direction: column;
	font-weight: 400;
	width: 150px;
	height: 40px;
	border-radius: 20px;
	border-style: solid;
	border-color: #000;
	border-width: 1px;
	justify-content: center;
	align-items: center;
}

.item-32-p {
	margin-top: 15px;
}

.ui-ux-element {
	width: 150px;
	height: 50px;
	font-family: "tot-shizukago-stdn", sans-serif;
	margin-top: px;
	margin-right: 5px;
	font-weight: 800;
	font-size: 25px;
	display: flex;
	color: #ff5100;
	background-color: #000;
	border-radius: 25px;
	justify-content: center;
}

.icon-des {
	width: 40px;
	height: 40px;
	padding: 20px;
	margin-top: px;
	border-radius: 50%;
	border-style: solid;
	border-color: #000;
	border-width: 3px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.icon-num {
	font-family: "tot-shizukago-stdn", sans-serif;
	margin-top: 15px;
	margin-right: 5px;
	font-weight: 800;
	font-size: 20px;
	letter-spacing: -6px;
	text-align: center;
}

.icons-folio {
	margin: 0;
	width: 100%;
	height: auto;
	position: relative;
	display: flex;
	margin-bottom: 50px;
	align-items: center;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-between;
	padding-top: 40px;
	padding-bottom: 100px;
	gap: 80px;
	
}

.icons-container {
	width: 50%;
	max-width: 400px;
	display: flex;
	align-items: start;
	flex-direction: column;
	padding-right: 100px;
}

.icon-h-frame {
	border-color: #000;
	border-style: solid;
	border-width: 7px;
	border-radius: 15px;
	padding-left: 10px;
	padding-right: 10px;
	background-color: #000;
	margin-bottom: 20px;
}

.icon-h {
	font-family: "tot-shizukago-stdn", sans-serif;
	font-weight: 800;
	font-size: 60px;
	color: #ff5100;
	margin-bottom: -2px;

}

.icon-text {
	color: #000000;
	font-family: "tot-shizukago-stdn", sans-serif;
	font-weight: 100;
	font-size: 18px;
	line-height: 26px;
}


.icons-wrapper {
	width: 50%;
	width: auto;
	height: auto;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	padding-left: 100px;
}



.icon {
	width: 100%;
	max-width: 600px;
	min-width: 300px;
	transition: 0.5s ease; 
	
}

.icon:hover {
	transform: scale(1.1);
	transition: 0.5s;
	
}
.ui-trenner {
	width: 15px;
	height: 430px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.ui-trenner-dot {
	width: 10px;
	height: 10px;
	background-color: #000;
	border-radius: 50%;
}

.ui-trenner-line {
	height: 300px;
	width: 1px;
	background-color: #000;
}

.icon-ani {
	width: 25px;
	height: 25px;
	position: absolute;
	margin-bottom: 180px;
	margin-left: 270px;
	z-index: 99;
	border-radius: 50%;
	border-width: 4px;
	border-style: solid;
	border-color: #ff5100;
	background-color:#393939;
	transition: 0.5 ease;
	animation: moveLeftRight 3s ease-in-out infinite;
}

@keyframes moveLeftRight {
	0% {
	  left: 0%; /* Anfangspunkt: außerhalb des Viewports auf der linken Seite */
	}
	50% {
	  left: 10%; /* Halbzeitpunkt: das Element erreicht das rechte Ende des Viewports */
	}
	100% {
	  left: 0%; /* Endpunkt: das Element kehrt zurück auf die linke Seite */
	}
  }

.s2 {
	font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
	font-size: 18px;
	color: white;
	max-width: 500px;
	line-height: 1.8rem;
	font-weight: 200;

}

@media only screen and (max-width:1310px) {
	.s2-div {
		flex-direction: column;
		justify-content: center;
	}

	.icons-folio {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 0px;
		margin-top: -70px;
		margin-bottom: 80px;
		padding-top: 100px;
		padding-left: 10px;
		padding-right: 10px;
	}

	.icons-container {
		width: 100%;
		max-width: 500px;
		justify-content: center;
		padding-left: 30px;
		padding-right: 30px;
		margin-top: 30px;
	}
	.icons-wrapper {
		width: 100%;
		justify-content: center;
		align-items: center;
		padding-left: 20px;
		padding-right: 20px;
	}
	.ui-trenner {
		display: none;
	}

}

/* Animation: Einfliegen von links */
.subtype {
	opacity: 1; /* Start mit unsichtbar */
	transform: translatex(-110vw); /* Start leicht nach unten verschoben */
	transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* Übergänge bei Sichtbarkeit */
	will-change: transform, opacity;
	transition: 0.5s ease;
}


  .s2-div {
	opacity: 0; /* Start mit unsichtbar */
	transform: translatex(110vw); /* Start leicht nach unten verschoben */
	transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* Übergänge bei Sichtbarkeit */
	will-change: transform, opacity;
  }

  .datum-top {
	opacity: 0; /* Start mit unsichtbar */
	transform: translatex(110vw); /* Start leicht nach unten verschoben */
	transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* Übergänge bei Sichtbarkeit */
	will-change: transform, opacity;
  }

  /* Wenn die Elemente sichtbar werden */
  .subtype.in-view, .s2-div.in-view, .datum-top.in-view {
	opacity: 1; /* Voll sichtbar */
	transform: translateY(0); /* Zurück in die normale Position */
  }


/* Slider */

.slider-body {
	height: 100vh;
	width: 100%;
	display:grid;
	place-items:center;
	overflow: hidden;
	background-image: linear-gradient(#000000, #1f1f1f);
	scroll-snap-align: start;

}

.slider {
	height: 600px;
	margin: auto;
	position: relative;
	width: 90%;
	display: grid;
	place-items: center;

}

.slide-track {
	display: flex;
	width: calc(400px * 18);
	animation: scroll 20s linear infinite;
}

.slide-track:hover {
	animation-play-state: paused;
}

@keyframes scroll {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(calc(-400px * 9));
	}
}

.slide {
	height: 200px;
	width: 400px;
	display: flex;
	align-items: center;
	padding: 30px;
	perspective: 100px;
}

.slider-img {
	width: 100%;
	transition: transform 0.5s;
}


.slider-img:hover {
	transform: translateZ(20px);
}


.hero {
	margin: 0;
	padding: 0;
	width: 100%;
	height: auto;
	position: relative;
	z-index: 5;
	overflow: hidden;
	display: flex;
	justify-content: center;
	flex-direction: column;
	overflow: hidden;
	display: none;
}




.phead {
	font-family: "arbotek-rounded", sans-serif;
	color:#ff5100;
	font-style: normal;
	font-weight: 500;
	line-height: 2rem;
	font-size: 20px;
	z-index: 99;
	text-align: center;
	width: 100%;
	padding-top: 5px;
	padding-bottom: 5px;
	position: absolute;
	display: none;
	
}
	


.hero-cont {
	display:flex;
	justify-content: center;
	align-items: center;
	padding: 40px 0px 0px 40px;
	flex-direction: row;
	max-width: 1200px;
	position: relative;
	margin: 0;
	height: auto;
	align-self: center;
}


.pedal {
	margin-top: 100px;
	margin-bottom: 50px;
	height: 100%;
	width: 50%;
	max-height: 600px;
	min-height: 300px;
}

.hero-text {
	font-family: "bennet-banner", sans-serif;
	font-weight: 200 !important;
	font-style: normal;
	font-size: 85px;
	color: #fff;
	width: 50%;
	line-height: 5.5rem;
}

.hp {
	display: flex;
	max-width: 1200px;
	justify-content: center;
	align-self: center;
	
}


.headtype {
	font-family: "bennet-banner", sans-serif;
    font-weight: 900;
	font-style: italic;
	font-size: 85px;
	color: #fff;
	line-height: 4rem;
	height: auto;
	position: relative;
	z-index: 5;
	padding: 40px 0px 0px 40px;
	align-self: center; 
}



.spectre {
	font-family: "arbotek-rounded", sans-serif;
	color:#ff5100;
	font-style: normal;
	font-weight: 500;
	line-height: 2rem;
	font-size: 35px;
	position: relative;
	z-index: 5;
	padding-right: 40px;
	padding-left: 40px;
	text-align: center;
}

.bghero {
	height: 100%;
	width: 50%;
	position: absolute;
	z-index: 1;
	display: flex;
	padding: 0;
	margin: 0;	
	align-self:flex-end;
	
}





/* Breakpoints */

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

	.headtype {
		font-family: "ivypresto-headline", serif;
		font-size: 150px;
		color: #fff;
		font-weight: 400;
		font-style: italic;
		line-height: 6.85rem;
		width: 50%;
		height: auto;
		position: relative;
		z-index: 5;
		padding: 40px 0px 0px 40px;
		align-self:flex-start;
		 
	}
	
	.section2 {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	
	}

	.s2-div {
		display: flex;
	}

	.s2 {
		max-width: 400px;
	}

}

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



	.spectre {
	
		line-height: 2rem;
		font-size: 25px;
		position: relative;
		
	}

	.poly {
		max-width: 1000px;
		height: 100%;
		margin-top: -100px;
		margin-right: -450px;
	}



}


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

	.headtype {
		font-size: 100px;
		font-style: italic;
		line-height: 4.5rem;
		 
	}

	.spectre {
	
		line-height: 2rem;
		font-size: 25px;
		position: relative;
		
	}

	.section2 {
		padding: 30px 40px 30px 40px;
		display: flex;
		justify-content: space-between;
		justify-content: center;
		align-items: center;
		
	
	}

	.subtype {
		max-width: 500px;
		font-size: 80px;
		line-height: 0.8em;
		text-align: center;
		margin-bottom: -50px;
		}

		.poly {
			width:100%;
			height: auto;
			margin-top: 0px;
			margin-right: 0px;
			position: relative;
		}

		.icons-wrapper {
			width: 100%;
		}
		.icon {
			width: 100%;
			max-width: 500px;
		}


}

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

	.hero {
	
		
		
	}

	.logo-a {
		width: 270px;
	}

	.hp {
		display: flex;
		flex-direction: column-reverse;
		align-items: center;
		justify-content: center;
	}

	.spectre {
		padding-right: 20px;
	 	padding-left: 20px;
	}

	.pedal {
		margin-bottom: -10px;
		height: 400px;
		width: auto;
		margin-top: 30px;
	}
	

	.headtype {
		font-size: 100px;
		width: 100%;
		padding: 20px 0px 0px 20px;
		line-height: 4.5rem;
		
	}

	.spectre {
		font-size: 18px;
		line-height: 1.3rem;
	}

	.phead {
		text-align: center;
	}

	.middle {
		background-color: black;
		padding: 0px 40px 0px 40px;
	}

	.subtype {
		font-size: 60px;
		padding-bottom: 20px;
		
	
	}

	.poly {
		margin-top: -30px;
		margin-right: 0px;
	}
}


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

	.pedal {
		margin-bottom: -10px;
		height: 300px;
		width: auto;
		margin-top: 30px;
	}
	
	.logo-a {
		width: 250px;
	}

	.headtype {
		font-size: 80px;
		width: 100%;
		padding: 20px 0px 0px 20px;
		line-height: 3.6rem;
		
	}

}

.onice {}


.circlegraf{
	height:100%;
	width:100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #e40234;
	position: absolute;
	text-align: center;
	color:#e40234;
	
}


.ball{
	position:relative;
	align-self: center;
	width: 100%;
}



.mailadresse{
    position: absolute;
    color: #fff;
    font-size: 10pt;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 1pt;
}

.black {
	background: #000;
	color: #000;
	border-color: #000;
	border: none;
}

/*
.barren{
	z-index: 70;
	width: 100%;
	height: 50px;
	background: #000854;
	position: fixed;
	bottom: 0;
	z-index: 99;
	display: flex;
	justify-content:space-between;
	margin-bottom: 15px;
	
}
	*/







.video video{
	float:left;
	width:33,3333%;
	position:absolute;
}


.animation img{
    float: left;
    width: 33.3333%;
	z-index: 1;
}

h2{
	width:auto;

}

.dsgvo-wrapper {
	width: 100%;
	background-color: #000;
	padding-bottom: 100px;
}

.dsgvo {
	font-family: "open sans", sans-serif;
	width: 100%;
	height: auto;
	padding: 50px;
	background-color: #000;
	padding-bottom: 100px;
}

.dsgvo-h{
	font-family: "velzyland", sans-serif;
	font-size: 40px;
	color: #ff5100;
	margin-bottom: 50px;
	margin-top: 50px;
}

@media (max-width: 360px) {
	.dsgvo-h{
		font-size: 35px;
	}
}

.dsgvo-text {
	width: 100%;
    font-size: 10pt;
    letter-spacing: normal;
	line-height: 20px;
    font-style: normal;
    font-weight: lighter;
    text-align: justify;
	font-family: "open sans", sans-serif;
	font-weight: 200;
	color: #ff5100;
	background-color: #000;
}




.impressum-wrapper {
	width: 100%;
	background-color: #000;
	padding-bottom: 100px;
}

.impressum {
	font-family: "open sans", sans-serif;
	width: 100%;
	height: auto;
	padding: 50px;
	background-color: #000;
	padding-bottom: 100px;
}

.impressum-h{
	font-family: "velzyland", sans-serif;
	font-size: 40px;
	color: #ff5100;
	margin-bottom: 50px;
	margin-top: 50px;
}

.impressum-text {
	width: 100%;
    font-size: 10pt;
    letter-spacing: normal;
	line-height: 20px;
    font-style: normal;
    font-weight: lighter;
    text-align: justify;
	font-family: "open sans", sans-serif;
	font-weight: 200;
	color: #ff5100;
	background-color: #000;
}



.navbar.bg-dark {
	margin-bottom: 20px;
}

.navbar-toggler-icon {
	width: 30px;
	align-self: end;
	justify-self: flex-end;
	margin-top: -50px;
	transition: 0.5s;
	margin-bottom: 20px;
	margin-right: 25px;
}

.black-collapsed {
	display: none;
}


.navbar-toggler-icon:hover{
    transform: scale(0.9);
	transform: rotate(90deg);
	transition: 0.5s;
}

.navbar-nav {
	
	
}

.navbar-collapse {
	background-color: #ff5100;
	width: 100%;
	height: 110vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nav-item {
	color: #ff5100;
	font-family: "arbotek-rounded", sans-serif;
	font-size: 25px;
}



.Dario{
	font-family: "arbotek-rounded", sans-serif !important;
	font-weight: 400!important;
	letter-spacing: 3px;
    width: 100%;
    height: 40px;
    color: #ff5100;
    z-index: 98;
    position: fixed;
    bottom: 0;
    display: flex;
    align-items: center;
    float: left;
    margin-bottom: 15px;
    left: 15px;
    font-style: normal;
    font-weight: 400;
    font-size: 14pt;
	margin-left: 20px;
}

.nav-link {
	color: #000854 !important;
	transition: 0.5s ease;
}

.nav-link:hover {
	color: #0025ff !important;
	transform: scale(0.9);
	transform: skew(-35deg);
	transition: 0.5s ease;
	margin-top: 12px;
}

.Dario img {
    z-index: 6;
    position: fixed;
    opacity: 1;
    right: 0px;
    margin-top: 42px;
    margin-right: 8px;
	width: 15px;
}

.Logo img {
    position: fixed;
    z-index: 5;
    margin-top: 8px;
    margin-left: 8px;
    opacity: 1;
	float:left;
}
.Logo {
	position: fixed;
}

.Logo:hover{
	transform:scale(0.9);
	opacity: 0.5;
}

.pics_2 {
    position: absolute;
}

.pics_2 img{
    float: left;
    width: 33.3333%;
}


.pics {
    margin-top: 2px;
    margin-left: 2px;
    margin-right: 2px;
}

.pics img{
    float: left;
    width: 33.3%;
    padding-top: 2px;
    padding-right: 2px;
    padding-bottom: 2px;
    padding-left: 2px;
}
.ref img{
	width:100%;
}

.DIN{
	margin:2px;
}
.DIN img{
	width:50%;
	padding: 2px;
}
.pics_3{

}

.pics_3 img{
	width: 100%;
	float: left;
}

.pics_4 img{
	width: 50%;
	float: left;
}

.no-outline:focus{
	outline: none;
	
}


@media (max-width:768px){
	

	
	.pics img{
	width:50%;
	}
	
	.pics_2 img{
	width:50%;
	}
		.DIN img{
	width:100%;
}
	
	.ref img{
	width:100%;
}
	
	
	
	.Logo img {
	width: 58px;
	}
	
	.Dario img {
		width: 15px;
		
	}
	
	h2{
	width:740px;
}
	.animation img{
	float: left;
	width: 50%;
}
	
}

.pics_3 img{
	width: 100%;
	float: left;
}



@media (max-width:380px){
		.ref img{
	width:100%;
}	
		.pics_2 img{
	width:100%;
	}
	
	.pics img{
		width:100%;
	}
	.Logo img {
	width: 52px;
	}
	.Dario img {
	width: 15px;
		
	}
	.animation img{
	float: left;
	width: 100%;
}

}


.parallax-section .img2 {
	top: 10% !important;
	left: 50% !important; 
	transform: translateX(-50%) !important;
	z-index: 4;
  }

  .parallax-section .img4 {
	top: 60% !important;
	left: 50% !important; 
	transform: translateX(-50%) !important;
  }
  
  .Libelle {
    position: relative;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: -1;
	background-color: #000;
	display: none;
  }

  .Libelle iframe {
    width: 100%;
    height: 100%;
    border: none;
  }

  .sitegif-l {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #000;
	padding: 50px
  }
	
  .sitegif {
	background-color: #ff5100;

	width: 100%;
	max-width: 1050px;

	display: flex;
	justify-content: center;
	align-items: center;
	padding-right: 40px;
	padding-left: 40px;
	padding-top: 20px;
	padding-bottom: 50px;
	border-radius: 30px 0px;
	border-style: solid;
	border-width: 3px;
	border-color: #ff5100;
	flex-direction: row;
	transition: 0.5s;
	gap: 60px;
  }

  .sitegif:hover {
	border-radius: 100px 0px;
	transition: 0.5s;
  }

  .cleric {
	width: 300px;
	background-color: #fff;
	border-color: #000;
	border-width: 2px;
	border-style: solid;
	border-radius: 20px 0px 20px 0px;
  }

  .leistungen-h-p {
	display: flex;
	flex-wrap: wrap;
	max-width: 600px;

  }

  .leistungen-folio {
	font-family: "velzyland", sans-serif;
font-weight: 400;
font-style: normal;
	font-size: 80px;
	background-color: #000;
	color: #fff;
	padding-bottom: 40px;
	padding-right: 30px;
	padding-left: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 30px 0px;
}

.leistungen-folio-p {
	font-family: "arbotek-rounded", sans-serif;
	font-size: 24px;
	padding-top: 30px;
	padding-bottom: 30px;
}

.leistungen-btn {
	font-family: "arbotek-rounded", sans-serif;
	font-size: 30px;
	color: #ff5100;
	background-color: #000;
	padding-top: 0px;
	padding-bottom: 5px;
	padding-right: 30px;
	padding-left: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 30px 0px;
	transition: 0.5s;
}

.leistungen-btn:hover {
	color: #000;
	background-color: #ff5100;
	padding-top: 0px;
	padding-bottom: 5px;
	padding-right: 30px;
	padding-left: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 0px 30px;
	transition: 0.5s;
	text-decoration: none;
	border-color: #000;
	border-width: 2px;
	border-style: solid;
}



@media (max-width: 1150px) {
	.cleric {
		width: 100%;
		max-width: 500px;
	}

	.sitegif {
		flex-direction: column;
		padding-left: 40px;
		padding-right: 40px;
		width: 100%;
		padding-bottom: 50px;
	}

	.leistungen-folio {
		font-size: 30px;
		border-radius: 15px 0px;
		padding-bottom: 15px;
	}

	.leistungen-btn {
		
	}

	.leistungen-h-p {
		justify-content: center;
		width: 100%;
	}

	.leistungen-folio-p {
		font-size: 18px;
		text-align: center;
	}
}


@media (max-width: 400px) {
	.sitegif-l {
		padding-left: 0px;
		padding-right: 0px;
	}
}







/* Button Styling */
.scroll-button {
	position: fixed;
	bottom: 50%;
	right: 20px;
	background-color: #ff5100;
	border: none;
	border-radius: 20px 0px 20px 0px;
	width: 50px;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	z-index: 999;
}

.scroll-button:hover {
	background-color: #000;
	border-style: solid;
	border-width: 2px;
	border-color: #ff5100;
}

/* Popup Sidebar - Grundstil */
.popup {
	position: fixed;
	top: 0;
	right: 0;
	width: 100%;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: flex-end;
	align-items: center;
	z-index: 1000;
	overflow: hidden;

	/* Übergang für Fade */
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

/* Sichtbares Popup */
.popup.show {
	opacity: 1;
	pointer-events: auto;
}

/* Popup-Inhalt (die Sidebar selbst) */
.popup-content {
	background-color: #ff5100;
	width: 100%;
	max-width: 430px;
	height: 100%;
	padding: 30px;
	box-shadow: -4px 0 10px rgba(0, 0, 0, 0.2);
	position: relative;
	overflow-y: auto;
	overflow-x: hidden;

	/* Slide-In Startzustand */
	transform: translateX(100%);
	transition: transform 0.3s ease;
}

/* Slide-In Aktiv */
.popup.show .popup-content {
	transform: translateX(0);
}

/* Close-Button */
.close-button {
	position: absolute;
	bottom: 10px;
	left: 30px;
	font-size: 30px;
	cursor: pointer;
	z-index: 1001;
}

.close-button:hover {
	color: #fff;
}

.portrait {
	width: 100%;
	height: auto;
	max-width: 340px;
	max-height: 340px;
	border-radius: 50px 0px 50px 0px;
	margin-top: 30px;
	margin-bottom: 10px;
	filter: grayscale();
	border-style: solid;
	border-width: 2px;
	border-color: #000;
}


  .floath2 {
	font-family: "velzyland", sans-serif;
	font-size: 35px;
  }

  .floath3 {
	font-family: "arbotek-rounded", sans-serif;
	font-size: 28px;
  }

  .floatp {
	font-weight: 900;
	font-size: 18px;
	font-family: "open sans", sans-serif;
  }

  .mailfon {
	display: flex;
	flex-direction: column;
	margin-top: 20px;
  }

  .maillink {
	font-family: "arbotek-rounded", sans-serif;
	font-size: 18px;
	background-color: #000;
	color:#ff5100;
	padding: 10px 25px 10px 25px;
	text-decoration: none;
	border-radius: 20px 0px 20px 0px;
	width: 100%;
	max-width: 250px;
	margin-bottom: 20px;
	text-align: center;
  }

  .maillink:hover {
	background-color: #ff5100;
	border-style: solid;
	border-width: 1px;
	border-color: #000;
	color: #000;
	text-decoration: none;
  }

  .fon {
	font-family: "arbotek-rounded", sans-serif;
	font-size: 18px;
  }

  .emojicont {
width: 100%;
margin-top: 20px;
  }

  .emoji {
	width: 50px;
  }

  @media (max-width:400px) {

  }

  .icongif {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #000;
	padding-top: 100px;
	padding-bottom: 100px;
	padding-left: 50px;
	padding-right: 50px;
	flex-direction: column;
  }

  .gf {
	height: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	flex-direction: column;
	padding: 20px;
	padding-bottom: 150px;
  }

  .icon-gd {
	width: 100%;
	max-width: 200px;
	padding: 15px;
  }

  .icon-gd-txt {
	width: 100%;
	max-width: 300px;
	padding: 15px;
  }

  .icon-gd2 {
	width: 100%;
	max-width: 1200px;
	padding: 15px;
  }

  .icon-an {
	width: 100%;
	max-width: 850px;
	padding: 15px;
  }

  @media (max-width: 980px) {
	.icongif {
		flex-direction: column;
	}
	.gf {
		padding: 0px;
		padding-top: 50px;
	}
  }

  @media (max-width: 630px) {
	.icongif {
		padding-left: 40px;
		padding-right: 40px;
	}

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

/* Emblem  */

.emblem {
	background-color: #000;
	width: 100%;
	height: auto;
	padding: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding-bottom: 300px;
}
  
.emblem-wrapper {
	max-width: 900px;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	
}
  
.emb1 {
	max-width: 300px;
	margin-top: 600px;
	
}

.emb2 {
	max-width: 300px;
}

.emb3 {
	max-width: 350px;
	margin-top: 600px;
} 
  
.emb4 {
	max-width: 250px;
} 
  
.emb5 {
	max-width: 300px;
	margin-top: 600px;
} 

.emb6 {
	max-width: 200px;
}


.emb6-1 {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.emb2-3 {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.emb4-5 {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

@media (max-width: 800px) {
	.emb6-1 {
		flex-direction: column;
		margin-bottom: 150px;
	}

	.emb2-3 {
		flex-direction: column;
		margin-bottom: 150px;
	}

	.emb4-5 {
		flex-direction: column;
		margin-bottom: 150px;
	}


	.emb1 {
		margin-top: 150px;
	}

	.emb3 {
		margin-top: 150px;
	}

	.emb5 {
		margin-top: 150px;
	}
}

.footer {
	width: 100%;
	height: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-left: 50px;
	padding-right: 50px;
	padding-bottom: 100px;
	padding-top: 100px;
	background-color: #ff5100;
}

.footer-wrapper {
	width: 100%;
	height: auto;
	max-width: 1200px;
	display: flex;
	justify-content: center;
	flex-direction: column;
}

.footer-name {
	font-family: "velzyland", sans-serif;
	font-size: 40px;
	text-align: center;
	line-height: 3rem;
}

.footer-name-d {
	font-family: "arbotek-rounded", sans-serif;
	font-size: 24px;
	color: #000;
	text-align: center;
	margin-bottom: 50px;
}

.datimp {
	font-family: "open sans", sans-serif;
	text-align: center;
	display: flex;
	gap: 20px;
	justify-content: center;
	align-items: center;
	
}

.dat {
	font-size: 16px;
	color: #ff5100;
	background-color: #000;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
	border-radius: 10px 0px 10px 0px;
	margin: 10px;
}

.dat:hover {
	color: #000;
	background-color: #ff5100;
	text-decoration: none;
	border-style: solid;
	border-width: 2px;
	border-color: #000;
	font-weight: 500;
}

.imp {
	font-size: 16px;
	color: #ff5100;
	background-color: #000;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
	border-radius: 10px 0px 10px 0px;
}

.imp:hover {
	color: #000;
	background-color: #ff5100;
	text-decoration: none;
	border-style: solid;
	border-width: 2px;
	border-color: #000;
	font-weight: 500;
}

@media (max-width: 600px) {
	.datimp {
flex-direction: column;
	}
}

.shirts {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 60px;
	background-color: #000;
  }
  
  .shirts-wrapper {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
  }
  
  .shirts-img {
	width: 50%;
	transition: width 0.8s ease;
	border: 2px solid #ff5100;
	border-radius: 20px 0px 20px 0px;
  }
  
  /* Wenn sichtbar, wechsle auf 100% Breite */
  .shirts-img.visible {
	width: 100%;
  }
  

  .start-btn a{
	width: 100%;
	position: fixed;
	color: #ff5100 !important;
	z-index: 999999 !important;
	margin-top: 10px;
	font-size: 20px;
	display: flex;
	justify-content: center;
	align-items: start;
  }

  .start-btn-cont a{
		z-index: 9999999;
		text-decoration: none;
  }

  .start-btn-cont a:hover {
		z-index: 9999999;
		text-decoration: none;
		color: #fff !important;
  }


  .kontaktieren {
	width: 100%;
	height: auto;
	padding: 60px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #000;
	padding-bottom: 300px;
	
  }

  .kontaktieren-con {
	width: 100%;
	max-width: 1200px;
	background-color: #ff5100;
	padding: 40px;
	padding-top: 100px;
	padding-bottom: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	border-radius: 5px;
  clip-path: polygon(
    0 0,               /* oben links */
    calc(100% - 70px) 0,    /* oben rechts Schräge Start */
    100% 70px,              /* oben rechts Schräge Ende */
    100% 100%,             /* unten rechts */
    70px 100%,             /* unten links Schräge Start */
    0 calc(100% - 70px)     /* unten links Schräge Ende */
  );
  transition: 300ms ease-in;
  }

    .kontaktieren-con:hover {
		  transition: 300ms ease-out;
		  clip-path: polygon(
    0 0,               /* oben links */
    calc(100% - 100%) 0,    /* oben rechts Schräge Start */
    100% 100px,              /* oben rechts Schräge Ende */
    100% 100%,             /* unten rechts */
    100px 90%,             /* unten links Schräge Start */
    0 calc(100% - 100%)     /* unten links Schräge Ende */
  );
	}

  .kontaktieren-h {
	font-family: "unbounded", sans-serif;
font-weight: 700;
font-style: normal;
	font-size: 80px;
	color: #000;
	max-width: 800px;
	line-height: 5rem;
	margin-bottom: 40px;
  }

  .kontaktieren-h-con {
	width: 100%;
	max-width: 800px;
	display: flex;

  }

  .kontaktieren-p {

  font-size: 25px;
  color: #000;
  line-height: 2.4rem;
  max-width: 800px;
  margin-bottom: 50px;
  }

  .floatp2 {
	font-family: "unbounded", sans-serif;
font-weight: 700;
font-style: normal;
	font-size: 60px;
	font-weight: 800;
	transition: 250ms ease-in;
  }

  .floatp2:hover {
font-weight: 100;
font-style: normal;
	font-size: 60px;
	text-decoration: none;
	transition: 250ms ease-out;
  }


  @media (max-width:800px) {
 	.kontaktieren-h {
		font-size: 40px;
		line-height: 2.5rem;
	}
	  .kontaktieren-p {
  font-size: 18px;
  line-height: 1.7rem;
  max-width: 800px;
  }
  .floatp2 {
	font-size: 20px;
	line-height: 1.4rem;
  }
      .floatp2:hover {
font-weight: 100;
font-style: normal;
	font-size: 20px;
	text-decoration: none;
	transition: 250ms ease-out;
  }
  }

   @media (max-width:420px) {

	.kontaktieren {
		padding-left: 32px;
		padding-right: 32px;
	}

	.kontaktieren-con {
		padding-right: 20px;
		padding-left: 20px;
		padding-top: 40px;
	}

	 .floatp2 {
	font-size: 16px;
	line-height: 1.4rem;
  }

    .floatp2:hover {
font-weight: 100;
font-style: normal;
	font-size: 16px;
	text-decoration: none;
	transition: 250ms ease-out;
  }

   }

canvas {
  width: 100%;
  max-width: 460px;
  background: #ff5100;
  border: 2px solid #ff5100;
  border-radius: 10px;
}

.snakelogo {
	width: 100%;
	max-width: 350px;
	margin-bottom: 0px;
	z-index: 20;
	transition: 500ms ease-in;
}

.snakelogo:hover {
	max-width: 470px;
	transition: 500ms ease-out;
}

.game {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #000;
	flex-direction: column;
	gap: 20px;
	padding-left: 40px;
	padding-right: 40px;
	}

	.game-h {
		color: #ff5100;
		font-size: 24px;
		font-weight: 200;
		max-width: 400px;
		line-height: 2rem;
		text-align: center;
		margin-bottom: 20px;
	}

.gamestart {
	font-family: "unbounded", sans-serif;
font-weight: 200;
font-style: normal;
	  padding: 10px 20px;
  font-size: 16px;
  background: #ff5100;
  color: 000;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: 200ms ease-in;
}

.gamestart:hover {
	  padding: 15px 30px;
  font-size: 16px;
  background: #ff5100;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: 200ms ease-out;
}



.controls {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background-color: #000;
  padding-bottom: 300px;
}

.middle-row {
  display: flex;
  gap: 10px;
  background-color: #000;
}

.ctrl {
  background-color: #ff5100;
  color: black;
  font-size: 18px;
  width: 60px;
  height: 50px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  box-shadow: 0 4px 0 #b43b00;
  user-select: none;
  touch-action: manipulation;
}

.ctrl:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #b43b00;
  background-color: #b43b00;
}

.ctrl:hover {
  background-color: #b43b00;
}

.arrows {
	color: #ff5100;
	font-size: 16px;
}

.hair {
	width: 100%;
	height: auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hair-a {
	max-height: 800px;
}