@import url('https://4ece58.claudeassets.com/20260605111205cs_/https://fonts.googleapis.com/css?family=Montserrat:300,700,900');
@import url('https://4915cf.claudeassets.com/20260605111205cs_/https://fonts.googleapis.com/css?family=Lato:300,400');

html, body {	
	margin: 0;
	padding: 0;
	height: 100%;
	background-color: #000000;
}

p {
	color: #FFFFFF;
	font: 1.2em "Lato", sans-serif;
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1.3;
}

.white p {
	color: #000000;
	font: 1.2em "Lato", sans-serif;
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1.3;
}

h1 {	
	color: #FFFFFF;
	text-decoration: none;
	font: 2.2em "Montserrat", sans-serif;
	font-weight: 900;
	line-height: 1;
	letter-spacing: 0.04em;
}

.white h1 {
	color: #000000;
	text-decoration: none;
	font: 2.2em "Montserrat", sans-serif;
	font-weight: 900;
	line-height: 1;
	letter-spacing: 0.04em;
}

h2 {
	color: #FFFFFF;
	font: 1.5em "Montserrat", sans-serif;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.08em;
}

.white h2 {
	color: #000000;
	font: 1.2em "Montserrat", sans-serif;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.08em;
}

h3 {
	color: #FFFFFF;
	text-decoration: none;
	font: 2.2em "Montserrat", sans-serif;
	font-weight: 900;
	line-height: 1;
	letter-spacing: 0.04em;
}

.white h3 {
	color: #FFFFFF;
	text-decoration: none;
	font: 2.2em "Montserrat", sans-serif;
	font-weight: 900;
	line-height: 1;
	letter-spacing: 0.04em;
}

h4 {
	color: #FFFFFF;
	font: 1.2em "Montserrat", sans-serif;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.08em;
}

h5 {
	color: #FFFFFF;
	font: 1.2em "Lato", sans-serif;
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1.3;
	opacity: 90%;
}

h6 {
	color: #FFFFFF;
	text-decoration: none;
	font: 2.2em "Montserrat", sans-serif;
	font-weight: 900;
	line-height: 1;
	letter-spacing: 0.04em;
}

#map {
	width: 100%;
        height: 400px;
}

header{display:inline-block; font-size:12px;}
span{padding-left:20px;}


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

	#banner {display: none;}

	h1 {	
	color: #FFF;
	text-decoration: none;
	font: 1.8em "Montserrat", sans-serif;
	font-weight: 900;
	line-height: 1;
	letter-spacing: 0.04em;}
	h3 {
	color: #000;
	text-decoration: none;
	font: 1.8em "Montserrat", sans-serif;
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: 0.04em;}
	h5 {
	color: #FFF;
	font: 1em "Montserrat", sans-serif;
	font-weight: 300;
	line-height: 1.2;
	letter-spacing: 0.06em;}
	h6 {
	color: #000;
	text-decoration: none;
	font: 1em "Lato", sans-serif;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0.04em;}
	h7 {
	color: #FFF;
	text-decoration: none;
	font: 1.6em "Montserrat", sans-serif;
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: 0.04em;}
	h8 {
	color:#0F0F0F;
	font: 0.8em "Lato", sans-serif;
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1.3;}
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #FFF;
    min-width: 80px;
    box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.1);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: #0F0F0F;
    padding: 10px 15px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #0F0F0F;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: #f2ab6b;
}

a {	color: #FFF;
	text-decoration: none;
}
 
a:hover {
	color: #cf4647;
}

#banner {
	position: relative;
	top: 80px;
	left: 0px;
	width: 100%;
}

hr {
 	border: none;
    	height: 5px;
	width: 9%;
	background-color: #f2ab6b;
}

.cursor {
	cursor: default;
}

bild {
	max-width: 70%;
	text-align: center;
}
.dreieck {
	position: relative;
	float: right;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 6px solid black;
	margin: 6px 0 0 1px;
}

#hero {
	position: relative;
	top: 0px;
}

#steambox {
	position: relative;
	width: 100%;
	margin: 0 auto 0 auto;
	text-align: center;
	float: left;
	padding: 10px;
}

#logo {
	position: relative;
	margin: 10px auto 10px auto;
	width: 300px;
}

#leistung {
	transition: opacity 0.4s ease;
}

#leistung:hover {
	opacity: 0.7;
}

i {
  border: solid #0F0F0F;
  border-width: 0 1px 1px 0;
  display: inline-block;
  padding: 3px;
  margin: 0 0 2px 2px;

}
.down {
	transform: rotate(45deg);
}

#presskit {
	position: absolute;
	top: 5px;
	right: 25px;
	height: 60px;
}

.kontakt {
	position: absolute;
	top: 0;
	left:0;
	width: 175px;
	height: 64px;
	background-color: #7f9fc6;
	z-index: 1;
	padding-top: 1px;
	border-radius: 32px;
	white-space: nowrap;
	transition: opacity 0.5s ease;
}

.kontakt:hover {
	opacity: 0.7;
}

#gamewrapper {
	position: relative;
	max-width: 100%;
	height: auto;
	z-index: 9999;
	margin: 0 auto 0 auto;
}

#mainwrapper {
	z-index:9999;
	position: relative;
	margin: 0px auto 0 auto;
	left:0;
	max-width: 100%;
	height: auto;
	background-color: #000;
	text-align: center;
}

#mainwrapper2 {
	
	position: relative;
	top: 0;
	left:0;
	max-width: 100%;
	height: auto;
	background-color: #f9f9f9;
	text-align: center;
	padding-bottom: 90px;
}

#banner {
	position: relative;
	top: 80px;
	left: 0px;
	width: 100%;
}

#header {
	background-color: #000;
	z-index: 100000000;
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
}

#container {
	z-index: 10000000;
	min-height: 100%;
	position:relative;
}

#footer {
	background-color: #000;
	z-index: 99999;
	position: absolute;
	height: 60px;
	width: 100%;
	bottom: 0px;
}

#impressumbox {
	position: absolute;
	width: 100%;
	height: 25px;
	background-color: #f2ab6b;
}

#impressum {
	position: relative;
	bottom: 10px;
	margin: 0 auto 0 auto;
	text-align: center;
}

#button {
	margin: 0 1.3em 0 1.3em;
}

#button:hover {
	color: #f2ab6b
}

* {
    box-sizing: border-box;
}

table {
  border-collapse: separate;
  border-spacing: 0.2em;
}
  
th,td {
  padding: 0.5em 0.5em;
  border-radius: 0.1em; 
	vertical-align: top; 
}  

	
#textwrapper {
	position: relative;
	max-width: 800px;
	margin: 0 auto 0 auto;
	text-align: center;
}

#textwrapper2 {
	position: relative;
	width: 700px;
	margin: 0 auto 0 auto;
	text-align: left;
}

#textbox1 {
	position: relative;
	width: 50%;
	margin: 0 auto 0 auto;
	text-align: left;
	float: left;
	padding: 10px;
}

#textbox2 {
	position: relative;
	width: 50%;
	margin: 0 auto 0 auto;
	text-align: center;
	float: left;
	padding: 10px;
}

#textbox3 {
	position: relative;
	width: 100%;
	margin: 0 auto 0 auto;
	text-align: left;
	padding: 10px;
}

#textbox4 {
	position: relative;
	width: 50%;
	margin: 0 auto 0 auto;
	text-align: center;
	float: left;
	padding: 40px;
}

#bildbox {
	position: relative;
	width: 100%;
	margin: 0 auto 0 auto;
	text-align: center;
	float: left;
	padding: 40px 80px 40px 80px;
}

#picturebox {
	position: relative;
	width: 50%;
	margin: 0 auto 0 auto;
	text-align: center;
	padding: 10px;
}
	
.atab { 
	tab-size:30;
	-moz-tab-size:30; 
	-ms-tab-size:30;
}

.icon {
	max-width: 60%;
}

@media screen and (max-width: 960px) {
	#textwrapper {
		position: relative;
		width: 100%;
		margin: 0 auto 0 auto;
		text-align: center;
		display:inline-block;}
	#textbox1 {
		width: 100%;
		padding: 10px;}
	#textbox2 {
		width: 100%;
		padding: 10px;}
	#textbox3 {
		width: 100%;
		padding: 10px;}
	#textbox4 {
		width: 100%;
		padding: 10px;}
	#picturebox {
		position: relative;
		width: 90%;
		margin: 0 auto 0 auto;
		text-align: center;
		padding: 10px;}
	#sportpsycho {
		position: absolute;
		top: -2px;
		left: 60px;
		height: 60px;}
	#logo {
		position: fixed;
		top: 0px;
		left: 10px;
		width: 100px;}
	#header {
		background-color: #000;
		z-index: 100000000;
		position: fixed;
		height: 60px;
		width: 100%;
		top: 0;
		left: 0;}
	#hero {
		position: relative;
		top: 0px;
		height: auto;}
	#bildbox {
		position: relative;
		width: 100%;
		margin: 0 auto 0 auto;
		text-align: center;
		float: left;
		padding: 20px 20px 20px 20px;}
}

img {
	max-width: 100%; 
	height: auto;
	margin: 0;

}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
		max-width: 800px;
		margin: 0 auto 0 auto;
}

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

#herowrapper {
	z-index: 9999;
	position: relative;
	top: 0px;
	left: 0px;
	max-width: 100%;
	height: auto;
}

#branding_wrapper {
	z-index: 99999;
	position: fixed;
	top: 160px;
	left: 0;
	width: 100%;
	padding: 0 0 0 15%;
}

#branding_text {
	z-index: 99999;
	position: absolute;
	top: 190px;
	left: 18%;
	text-align: left;
	cursor: default;
}

#menubox {
	z-index: 9999;
	position: relative;
	max-width: 600px;
	top: 20px;
	height: auto;
	margin: 0 auto 5px auto;
	text-align: center;
}

#menu {
	color: #0F0F0F;
	font: 1em "Montserrat", sans-serif;
	font-weight: 300;
	line-height: 1.2;
	letter-spacing: 0.06em;
	list-style:none;
	position: absolute;
	margin: 0 auto 0 auto;
}

#menu li{
	float:left; 	
}

#menu li a {
	display: block;
}


.press {
  display: table;      /* Required for table-cell to work on li's */
  padding: 0;          /* Override defaults for lists */
  margin: 0;           /* Override defaults for lists */
  width: 100%;         /* Get the row full width */
  text-align: center;  /* Centre align grid items */
}

.press li {
  display: table-cell;   /* Get all images to show in a row */
  text-align: center;    /* Centre align the images */
}

.row {
	z-index: 9999;
	text-align: center;
	padding: 2% 0 0 0;
}
.row::after {
    content: "";
    clear: both;
    display: table;
}

[class*="col-"] {
    float: left;
    padding: 15px;
    width: 100%;
}

@media only screen and (min-width: 960px) {

.col-1 {width: 25%;}
.col-2 {width: 50%;}
.col-3 {width: 75%;}
.col-4 {width: 100%;}

}

/*
     FILE ARCHIVED ON 04:52:33 Jun 06, 2026 AND RETRIEVED FROM THE
     INTERNET ARCHIVE ON 15:12:45 Jul 19, 2026.
     JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
     SECTION 108(a)(3)).
*/
/*
playback timings (ms):
  captures_list: 0.59
  exclusion.robots: 0.048
  exclusion.robots.policy: 0.036
  esindex: 0.012
  cdx.remote: 17.669
  LoadShardBlock: 55.934 (3)
  PetaboxLoader3.datanode: 49.643 (4)
  PetaboxLoader3.resolve: 51.206 (2)
  load_resource: 47.917
*/