@import url("fontawesome-all.min.css");
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600,600italic,700,700italic");
@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap");

:root {
  --myWhite: #f9f7f3;
  --myBlack: #252525;
  --myYellow: #d7a13d;
  --myBoxYellow: #ffca00;
  
  --mainDiff: 1rem;
  --probeSize: 13rem;
}

	html, body, div, span, applet, object,
	iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
	pre, a, abbr, acronym, address, big, cite,
	code, del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var, b,
	u, i, center, dl, dt, dd, ol, ul, li, fieldset,
	form, label, legend, table, caption, tbody,
	tfoot, thead, tr, th, td, article, aside,
	canvas, details, embed, figure, figcaption,
	footer, header, hgroup, menu, nav, output, ruby,
	section, summary, time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font-family: 'DM Serif Display', serif;
		color: #f9f7f3;
	vertical-align: baseline;}
	
	html, body {
		font-size: clamp(14px, 1.2vw, 18px);
		height: 100%;
	}
	
	img{
		object-fit: cover;
		filter: grayscale(100%);
	}



    /* Hamburger Symbol */
    .hamburger {
      position: fixed;
      top: 20px;
      right: var(--mainDiff);
      width: 30px;
      height: 25px;
	  color:white;
      cursor: pointer;
      z-index: 1001;
    }

    .hamburger div {
      background-color: var(--myYellow);
      height: 4px;
      margin: 5px 0;
      transition: 0.4s;
    }

    /* Seitenmenü */
    .side-menu {
      position: fixed;
      top: 0;
      right: -250px;
      width: 250px;
      height: 100%;
      background-color: var(--myBlack);
      color: var(--myWhite);
      padding-top: 60px;
      transition: right 0.6s ease; /* <--- hier langsamer gemacht */
      z-index: 1000;
    }
	
	b, underline {
	color: initial;
	}

    .side-menu.open {
      right: 0;
    }

	a {
		text-decoration: none;
	}

    .side-menu a {
      display: block;
      padding: 15px 20px;
      color: var(--myWhite);
      text-decoration: none;
    }

    .side-menu a:hover {
      background-color: #444;
    }
	
	.slider {
	  left: 10%;
      position: relative;
      height: 20%;
      overflow: hidden;
	  width:50%; height:100%;left:0%;top:0%;
    }

    .slider img {
      width: 100%;
      height: 100%;
      display: none;
    }

    .slider img.active {
      display: block;
    }

    .arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 2.5rem;
      color: white;
      background-color: rgba(0, 0, 0, 0.0);
      padding: 10px;
      cursor: pointer;
      z-index: 1;
      user-select: none;
    }

    .arrow.left {
      left: 10px;
    }

    .arrow.right {
      right: 10px;
    }
	
	#landing {
		height:100%;
		display: flex;
	}
	.landing-left{ left:0%; top:0%;width: 50%;height:100%; z-index: 99; background-color:#252525;}
	
	#mobile-landing{
		height: 100%;
		display:none;
	}
	
	#mobile-probetraining {
		height: 40vh;
		display:none;
		position: relative;
		background-color: var(--myWhite);
	}
	
.member-header{
	font-size: 2rem; color: var(--myBlack); text-align:center;
	padding: 1rem;
}

.member-text{
	font-size: 1rem; color: var(--myBlack); text-align:center;
	margin-bottom: 1rem;
}
	
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea
 {
  all: unset;                 /* entfernt alle Browser-Styles */
  background-color: var(--myWhite);   /* weißer Hintergrund */
  color: var(--myBlack);              /* schwarze Schrift */
  border: none;
  padding: 0.5rem 0.75rem;   /* etwas Platz innen */
  font-size: 1rem;
  width: 100%;               /* optional: volle Breite */
  box-sizing: border-box;    /* Padding wird eingerechnet */
}

button,
input[type="submit"] {
  all: unset;
  background-color: var(--myYellow);
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border-radius: 0.25rem;
  cursor: pointer;
  text-align: center;
  box-sizing: border-box;
  color: var(--myWhite);
}

button:hover {
  background-color: var(--myBoxYellow);
}

button:active {
  transform: scale(0.97); /* leicht gedrückt */
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3); /* flacherer Schatten */
}

#impressum {
	background-color: var(--myBlack);
	height:40%;
	position:relative;
}

#impressum-grid{
	display: grid;
	
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto 1fr;
	gap: 1rem;
	background-color: var(--myBlack);
	width: 100%;
	height: 100%;
}

#impressum-head{
	font-size: 2rem;
	grid-column: 1/3;
	grid-row: 1;
	margin-left: var(--mainDiff);
	margin-top: 2.5vh;
	display: none;
}

#impressum-contact{
	font-size: 2rem;
	grid-column: 1/3;
	grid-row: 1;
	margin-left: var(--mainDiff);
	margin-top: 2.5vh;
}

#impressum-place{
	grid-column: 3;
	grid-row: 2;
	margin-left: 5vw;
	line-height: 2.0;
	margin-right: var(--mainDiff);
	justify-self: end;
	text-align: right;
}

#impressum-tel{
	grid-column: 1;
	grid-row: 2;
	margin-left:  var(--mainDiff);
	//line-height: 2.0;
}

#impressum-dedicated{
	font-size:2.2rem;
	color: var(--myWhite);
	grid-column: 2;
	grid-row: 2;
	margin-left: 10%;
	width: max-content;
	margin-left: auto;
	margin-right: auto;
}

#impressum-imprint{
	font-size: 2rem;
	grid-column: 3;
	grid-row: 1;
	margin-right: var(--mainDiff);
	margin-top: 2.5vh;
	text-align: right;
	
}

#mobile-probe-willst{
	font-size:2rem;
	color:#252525;
}

#mobile-probe-table-right {
	display: grid;
	position: absolute;
	width: 100%;
	height: 100%;
	gap: 0% 5%;
	grid-template-columns: 6% 2fr 1fr 5%;
	grid-template-rows: 2% auto auto auto auto auto auto auto 2%;
}

#mobile-probe-head{
	font-size: 2rem;
	grid-column: 2;
	grid-row: 2;
}

#mobile-probe-logo{
	position: absolute;
	left: 45.15%;
	top: 37.5%;
	width: 10%;
	z-index: 99;
}


#f1{
	grid-column: 2;
	grid-row: 4;
}

#f2{
	grid-column: 3;
	grid-row: 4;
}

#f3{
	grid-column: 2;
	grid-row: 6/8;
}

#f4{
	grid-column: 3;
	grid-row: 8;
}

#probetraining{
		display:none;
}

#mobile-probetraining {
	display:block;
	display: flex;
}

#mobile-probe-mid {
			position:relative;
			background-color: var(--myBlack);
			height: 40vh;
		}
	
#mobile-probe-table-right{
	left: 50%;
	width: 50%;
}

#mobile-probe-join{
	position: absolute;
	left: 2.5%;
	top: 0%;
	width: 40%;
	height: 100%;
	background-color: var(--myWhite);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#mobile-probe-join-head{
	display: none;
}

#preise {
	width: 100%;
	background-color: var(--myBlack);
	grid-template-columns: 3fr 0fr 0fr 5fr 25fr 5fr 25fr 5fr 10fr 15fr 5fr 3fr 0fr;
	grid-template-rows: 0rem 0rem 2rem 6rem 0rem auto 1rem 3rem 0rem 4rem 0rem 0rem;
	display: grid;
}

#preise-up{
	grid-column:2/11; grid-row: 2; font-size: 2rem;
}

#preise-memberships{
	grid-column:3/11; grid-row: 4; font-size: 2rem;
}

#preise-einer{
	grid-column:5; grid-row: 6; background-color: var(--myWhite);
}

#preise-alle{
	grid-column:7; grid-row: 6; background-color: var(--myWhite);
}

#preise-rabatt{
	grid-column:9/11; grid-row: 6; background-color: var(--myWhite);
}

#preise-probe{
	grid-column:10/12; grid-row: 8;
	width: fit-content;
}

#preise-hinweis{
	grid-column:10/13; grid-row: 10;
}

.preise-x-button{
	display:none;
	color: var(--myBlack);
	position: absolute;
	top: 0%;
	right: 2.0%;
}

.side-menu a.menu-mobile {
	display: none;
}

.icon-x {
  color: var(--myBlack);
  font-size: 1.5rem;
}

	
@media screen and (max-width: 540px) {
	
	#impressum-imprint{
		display: none;
	}
	
	#impressum-contact{
		display: none;
	}
	
	#preise{
		height: initial;
		grid-template-columns: 5% 90% 5%;
		grid-template-rows: 5vh 7vh auto 0vh 1vh auto 0vh 1vh auto 10vh;
		height: initial;
	}
	
	#preise-up{
		display: none;
	}
	
	#preise-memberships{
	grid-column: 2; grid-row: 2; font-size: 2rem;
}

	#preise-einer{
		grid-column:2; grid-row: 3; background-color: var(--myWhite);
	}

	#preise-alle{
		grid-column:2; grid-row: 6; background-color: var(--myWhite);
	}

	#preise-rabatt{
		grid-column:2; grid-row: 9; background-color: var(--myWhite);
	}

	#preise-probe{
		display: none;
	}

	#preise-hinweis{
		display: none;
	}
	
	.member-text {
		display:none;
	}
	
	
	#mobile-probe-logo{
		position: absolute;
		left:2.5%;
		top:2.5%;
		height:6%;
		display: none;
	}
	
	
	#mobile-probe-willst{
		display: none;
	}
	
	#mobile-probe-join-head{
		display:block;
	}
	
		#mobile-probe-join{
	position: initial;
	left: initial;
	top: initial;
	width: initial;
	height: initial;
	background-color: initial;
}
	
		#landing{
			display:none;
		}
		#probetraining{
			display:none;
		}
		#mobile-landing {
			display:block;
			height: 100%;
		}
		#mobile-probetraining {
			display: block;
			height: 30rem;
		}
		#mobile-landing-header {
			background-color: #252525;
			height: 30%;
		}
		#mobile-landing-img{
			height: 70%;
			width: 100%;
		}
		#mobile-landing-team{
			height: 30vh;
			width: 100%;
			background-color: #f9f7f3;
		}
		#mobile-unity-central {
			font-size: 2.5rem;
			position: absolute;
			top: 10%;
			left: 50%;
			transform: translate(-50%, -50%);
			white-space: nowrap;
			width: max-content;
		}
		#mobile-unity-sub {
			font-size: 1.5rem;
			position: absolute;
			top: 15%;
			left: 20%;
			color: #d7a13d;	
			text-align: center;
			white-space: normal;
			width: 60%;
		}
		
		#mobile-unity-team {
			font-size: 2rem;
			color: #252525;
		}
		
		#mobile-unity-team2 {
			font-size: 1.5 rem;
			color: #252525;
		}
		
		#center-wrapper {
			position: absolute;
			top: 75%;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;
			gap: 1.5rem; /* Abstand zwischen den Texten */
			width: 80vw;
		}
		
		#mobile-probe-top {
			background-color: var(--myWhite);
			height: 30vh;
		}
		
		#mobile-probe-mid {
			position:relative;
			background-color: var(--myBlack);
			height: 40vh;
			display:none;
		}
		
		#mobile-probe-bot {
			background-color: var(--myWhite);
			height: 30vh;
			display:none;
		}
		#mobile-probe-join {
			font-size: 1.5rem;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			color: var(--myBlack);	
			text-align: center;
			white-space: normal;
			width: fit-content;
		}
		
		#mobile-probe-table-right{
			left: 0%;
			width: 100%;
		}
		
		#mobile-probe-join-text{
			width: 80vw;
		}
		
		#mobile-probe-rechtes-bild{
			display:none;
		}
		
		
		#impressum {
			height: auto;
		}
		
		#impressum-grid{
			grid-template-columns: auto;
			grid-template-rows: auto auto auto auto auto 10vh auto;
			gap: 1rem;
			height:auto;
			place-items: center;
		}
		
		#impressum-head{
			display: grid;
			grid-column: 1;
			grid-row: 1;
		}
		
		
		#impressum-tel{
			grid-column: 1;
			grid-row: 3;
			line-height: initial;
			text-align: center;
		}
		
		#impressum-place{
			grid-column: 1;
			grid-row: 2;
			margin: 0%;
			line-height: initial;
			margin-right: initial;
			justify-self: initial;
			text-align: initial;
		}
		
		#impressum-dedicated{
			grid-column: 1;
			grid-row: 4;
		}
		
		#mobile-probe-inner {
			display: flex;
		}
		
		
		.side-menu a.menu {
			display:none;
		}
		.side-menu a.menu-mobile {
			display:block;
		}
	}