/* Gastspieler */

.gast {
	--gast-open-top:220px;
	--gast-closed-top:100px;
	--gast-open-width:320px;
	--gast-closed-width:100px;
	--gast-icon-width:100px;

	position:fixed;
	display:block;
	top:var(--gast-open-top);
	left:0;
	width:var(--gast-open-width);
	height:120px;
	padding:0;
	margin:0;
	background-color:rgb(var(--gelb-rgb) / 75%);
	border:5px solid var(--blau);
	border-left:none;
	border-radius:0 60px 60px 0;
	box-sizing:border-box;
	overflow:hidden;
	z-index:998;

	animation-name:gast;
	animation-duration:1s;
	animation-timing-function:linear;
	animation-delay:calc(var(--scroll, 0) * -3s);
	animation-iteration-count:1;
	animation-fill-mode:both;
	animation-play-state:paused;

	transition:background-color .5s;
}

@keyframes gast {
	from {
		width:var(--gast-open-width);
		top:var(--gast-open-top);
	}

	to {
		width:var(--gast-closed-width);
		top:var(--gast-closed-top);
	}
}

a.gast h2,
a.gast i {
	height:100%;
	color:var(--blau);
	margin:0;
	box-sizing:border-box;
	transition:.5s;
}

a.gast h2 {
	position:absolute;
	display:flex;
	top:0;
	right:var(--gast-icon-width);
	bottom:0;
	left:0;
	align-items:center;
	justify-content:flex-end;
	min-width:0;
	overflow:hidden;
	white-space:nowrap;
	width:auto;
	padding:0 20px;
	border:none;
	font-family:'Poppins Black Italic', Helvetica Neue, Arial, Helvetica, sans-serif;
	font-size:22px;
	color:var(--blau);
	line-height:1;
	text-align:right;
	text-transform:uppercase;
	letter-spacing:.075em;
	animation-name:gast-text;
	animation-duration:1s;
	animation-timing-function:linear;
	animation-delay:calc(var(--scroll, 0) * -3s);
	animation-iteration-count:1;
	animation-fill-mode:both;
	animation-play-state:paused;
}
a.gast i {
	position:absolute;
	display:flex;
	top:0;
	right:0;
	bottom:0;
	align-items:center;
	justify-content:center;
	width:var(--gast-icon-width);
	height:100%;
	padding:0;
	border-left:0.5px solid var(--blau);
	font-size:44px;
	line-height:1;
	text-align:center;
}

@keyframes gast-text {
	0%,
	60% {
		opacity:1;
	}

	80%,
	100% {
		opacity:0;
	}
}

a.gast:hover {
	background-color:var(--blau);
	border:5px solid var(--gelb);
	border-left:none;
}
a.gast:hover h2 {
	color:var(--gelb);
}
a.gast:hover i {
	color:var(--gelb);
	border-left:0.5px solid var(--gelb);
}

@media only screen and (max-width:1600px) {
	.gast {
		--gast-open-top:160px;
		--gast-closed-top:40px;
		--gast-open-width:300px;
	}

	a.gast h2 {
		font-size:20px;
	}
	a.gast i {
		font-size:40px;
	}
}

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

	.gast {
		--gast-open-top:170px;
		--gast-closed-top:40px;
		--gast-closed-width:80px;
		--gast-icon-width:80px;
		
		height:100px;
		border-radius:0 50px 50px 0;
	}

	a.gast h2 {
		font-size:20px;
	}
	a.gast i {
		font-size:36px;
	}
}

@media only screen and (max-width:1024px) {
	.gast {
		--gast-open-top:180px;
		--gast-closed-top:40px;
		--gast-open-width:250px;
		--gast-closed-width:60px;
		--gast-icon-width:60px;
				
		height:80px;
		border-radius:0 40px 40px 0;
	}

	a.gast h2 {
		font-size:18px;
	}
	a.gast i {
		font-size:32px;
	}
}

@media only screen and (max-width:768px) {
	.gast {
		--gast-open-top:160px;
		--gast-closed-top:30px;
		--gast-open-width:220px;
		--gast-closed-width:60px;
		--gast-icon-width:60px;
		
		height:60px;
		border-radius:0 30px 30px 0;
	}

	a.gast h2 {
		font-size:16px;
		padding:0 15px;
	}
	a.gast i {
		font-size:30px;
	}
}

@media only screen and (max-width:640px) {
	.gast {
		--gast-open-top:150px;
		--gast-closed-top:20px;
		--gast-open-width:200px;
		--gast-closed-width:50px;
		--gast-icon-width:50px;
	}

	a.gast h2 {
		font-size:16px;
		padding:0 10px;
	}
	a.gast i {
		font-size:28px;
	}
}

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

}


/* Bookandplay */


.platzreservierung {
	width:100%;
	padding:40px;
	background-color:rgb(var(--blau-rgb) / 80%);
	box-sizing:border-box;
}

.platzreservierung div.bookandplay {
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:30px;
	width:100%;
	max-width:1600px;
	margin:0 auto 30px;
}

.platzreservierung div.bookandplay h2 {
	font-family:'Poppins Black Italic', sans-serif;
	font-size: 2em;
	color:var(--off);
	text-align:left;
	margin:0;
	padding:0;
	border:none;
}

.platzreservierung div.bookandplay p {
	color:var(--gelb);
	font-family:'Poppins Bold Italic', sans-serif;
	text-transform:uppercase;
	letter-spacing:0.15em;
	margin:0 0 8px;
}

.bookandplay-button {
	display:inline-flex;
	align-items:center;
	gap:10px;
	padding:20px;
	background-color:var(--orange);
	font-family:'Fira Sans Light', sans-serif;
	font-size: 18px;
	color:var(--off);
	text-decoration:none;
	white-space:nowrap;
	transition:.3s;
}

.bookandplay-button:hover {
	background-color:var(--gelb);
	color:var(--blau);
}

.bookandplay-ansicht {
	width:100%;
	max-width:1600px;
	height:500px;
	margin:0 auto;
	border:0.5px solid var(--gelb);
	overflow:hidden;
	box-sizing:border-box;
}

.bookandplay-ansicht iframe {
	display:block;
	width:100%;
	height:100%;
	border:0;
}

/* Externe Inhalte werden erst nach ausdrücklichem Klick geladen */

.external-content-frame[hidden] {
	display:none;
}

.external-content-placeholder {
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:16px;
	width:100%;
	height:100%;
	min-height:inherit;
	margin:0;
	padding:30px;
	color:var(--blau);
	background-color:var(--off);
	text-align:center;
	box-sizing:border-box;
}

.external-content-placeholder > i {
	font-size:48px;
	line-height:1;
	color:var(--gruen);
}

.external-content-placeholder p {
	max-width:520px;
	margin:0;
	padding:0;
	font-family:'Fira Sans Light', sans-serif;
	font-size:0.875em;
}

.external-content-placeholder a {
	font-family:'Fira Sans ExtraLight Italic', sans-serif;
	font-size:0.75em;
}

.external-content-button {
	appearance:none;
	-webkit-appearance:none;
	margin:0;
	padding:14px 20px;
	border:0;
	border-radius:0;
	color:var(--off);
	background-color:var(--orange);
	font:inherit;
	cursor:pointer;
	transition:color .3s, background-color .3s;
}

.external-content-button:hover,
.external-content-button:focus-visible {
	color:var(--blau);
	background-color:var(--gelb);
}

@media only screen and (max-width:768px) {
	.platzreservierung {
		padding:40px 20px;
	}

	.platzreservierung div.bookandplay {
		display:block;
	}
.platzreservierung div.bookandplay h2 {
	font-size: 1.75em;
}
	.bookandplay-button {
		gap:5px;
		margin-top:20px;
		padding:12px;
		font-size: 16px;
	}

	.bookandplay-ansicht {
		height:400px;
	}
}

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

.platzreservierung {
		padding:20px 10px;
}

}

@media only screen and (max-width:480px) {
.platzreservierung {
		padding:20px 0;
}
.platzreservierung div.bookandplay {
	padding: 0 10px;
	box-sizing:border-box;
}
.platzreservierung div.bookandplay h2 {
	font-size: 1.5em;
}

}



/* Club News
---------------------------------------------------------------------------------------------------- */

.club-news {
	width:100%;
	margin:0;
	padding:40px;
	background-color:rgb(var(--orange-rgb) / 80%);
	box-sizing:border-box;
}
.club-news.fb {
	background-color:rgb(var(--gruen-rgb) / 80%);
}

.club-news > h2 {
	width:100%;
	max-width:1280px;
	margin:0 auto 40px;
	padding:0;
	font-family:'Poppins Black Italic', sans-serif;
	font-size:2em;
	text-align:left;
	color:var(--blau);
	border:0;
	box-sizing:border-box;
}


/* Anordnung Facebook und Instagram
---------------------------------------------------------------------------------------------------- */

.club-news-content {
	display:grid;
	grid-template-columns:minmax(0, 5fr) minmax(220px, 3fr);
	align-items:stretch;
	justify-content:center;
	gap:20px;
	width:100%;
	max-width:820px;
	margin:0 auto;
	padding:0;
	box-sizing:border-box;
}

.fb .club-news-content {
	display:block;
	grid-template-columns:none;
	gap:0;
	max-width:auto;
}


/* Facebook-Karte
---------------------------------------------------------------------------------------------------- */

.social-news {
	display:flex;
	flex-direction:column;
	width:100%;
	max-width:500px;
	min-width:0;
	height:auto;
	margin:0 auto;
	padding:15px 0 0;
	background-color:var(--orange);
	border:.5px solid var(--off);
	box-sizing:border-box;
}

.social-news > p {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:20px;
	width:100%;
	margin:0 0 10px;
	padding:0 20px;
	box-sizing:border-box;
}

.social-news > p > .fa-brands {
	flex:0 0 auto;
	font-size:36px;
	line-height:1;
	color:var(--off);
}

.social-profile-link {
	display:inline-flex;
	align-items:center;
	justify-content:flex-end;
	gap:8px;
	min-width:0;
	font-family:'Fira Sans Light', sans-serif;
	font-size:18px;
	line-height:1.2;
	text-align:right;
	text-decoration:none;
	white-space:normal;
	color:var(--off);
	transition:color .3s;
}

.social-profile-link i {
	flex:0 0 auto;
	font-size:.85em;
	color:inherit;
}

.social-profile-link:hover,
.social-profile-link:focus-visible {
	color:var(--blau);
}

.facebook-news {
	display:block;
	background-color:var(--gruen);
}


/* Facebook-Feed
   400px sichtbarer Feed und 70px abgeschnittener Facebook-Kopf
---------------------------------------------------------------------------------------------------- */

.social-embed,
.facebook-feed {
	position:relative;
	display:flex;
	justify-content:center;
	flex:none;
	width:100%;
	height:400px;
	min-width:0;
	min-height:400px;
	max-height:400px;
	margin:0;
	padding:0;
	overflow:hidden;
	background-color:var(--off);
	box-sizing:border-box;
}

.facebook-feed iframe {
	position:relative;
	top:-70px;
	display:block;
	width:100%;
	max-width:500px;
	height:470px;
	margin:0 auto;
	padding:0;
	border:0;
}


/* Instagram-Verlinkung
---------------------------------------------------------------------------------------------------- */

.instagram-link-card {
	display:flex;
	width:100%;
	min-width:0;
	min-height:462px;
	margin:0;
	padding:0;
	background-color:var(--orange);
	border:.5px solid var(--off);
	box-sizing:border-box;
}

.instagram-link-card > a {
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:25px;
	width:100%;
	min-width:0;
	min-height:100%;
	margin:0;
	padding:20px;
	font-family:'Fira Sans Light', sans-serif;
	font-size:20px;
	line-height:1.4;
	text-align:center;
	text-decoration:none;
	white-space:normal;
	color:var(--off);
	box-sizing:border-box;
	transition:color .3s, background-color .3s;
}

.instagram-link-card .fa-instagram {
	flex:0 0 auto;
	font-size:80px;
	line-height:1;
}

.instagram-link-text {
	display:block;
}

.instagram-link-text .fa-arrow-up-right-from-square {
	margin-left:5px;
	font-size:.75em;
	color:inherit;
}

.instagram-link-card > a:hover,
.instagram-link-card > a:focus-visible {
	color:var(--gelb);
	background-color:var(--blau);
}


/* Tablet und Smartphone
---------------------------------------------------------------------------------------------------- */

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

	.club-news {
		padding:20px;
	}

	.club-news > h2 {
		margin-bottom:20px;
		font-size:1.75em;
	}

	.club-news-content {
		grid-template-columns:1fr;
		gap:20px;
		max-width:500px;
	}

	.social-news {
		width:100%;
		max-width:500px;
		margin:0 auto;
	}

	.social-embed,
	.facebook-feed {
		height:400px;
		min-height:400px;
		max-height:400px;
	}

	.instagram-link-card {
		min-height:180px;
	}

	.instagram-link-card > a {
		flex-direction:row;
		justify-content:center;
		min-height:180px;
	}

	.instagram-link-card .fa-instagram {
		font-size:60px;
	}

	.instagram-link-text {
		text-align:left;
	}

}


/* Kleine Smartphones
---------------------------------------------------------------------------------------------------- */

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

	.club-news {
		padding:20px 10px;
	}

	.social-news {
		padding-top:10px;
	}

	.social-news > p {
		gap:15px;
		padding:0 10px;
	}

	.social-profile-link {
		font-size:16px;
	}

	.instagram-link-card > a {
		gap:20px;
		padding:20px 15px;
		font-size:18px;
	}

	.instagram-link-card .fa-instagram {
		font-size:50px;
	}

}


/* Sehr kleine Smartphones
---------------------------------------------------------------------------------------------------- */

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

	.club-news {
		padding:20px 0;
	}

	.club-news > h2 {
		padding:0 10px;
		font-size:1.5em;
	}

	.club-news-content,
	.social-news {
		max-width:none;
	}

	.social-news,
	.instagram-link-card {
		border-right:0;
		border-left:0;
	}

	.social-news > p {
		padding:0 10px;
	}

	.instagram-link-card > a {
		min-height:160px;
	}

}


/* Map */

.anfahrt-karte {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	border-top:0.5px solid var(--gruen);
	line-height: 0;
	overflow: hidden;
}

.anfahrt-karte > img {
	display: block;
	width: 100%;
	height: auto;
	min-height: 300px;
	margin: 0;
	padding: 0;
	object-fit: cover;
}

.route-button {
	position: absolute;
	right: 30px;
	bottom: 30px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 20px;
	background-color: var(--orange);
	color: var(--off);
	font-family:'Fira Sans Light', sans-serif;
	font-size: 18px;
	line-height: 1;
	text-decoration: none;
}

.route-button:hover {
	background-color: var(--gelb);
	color: var(--blau);
}

.kartenquelle {
	position: absolute;
	left: 10px;
	bottom: 5px;
	padding: 5px;
	color: var(--blau);
	font-size: 9px;
	line-height: 1;
	text-decoration: none;
}
.kartenquelle:hover {
	color: var(--gruen);
}

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

.anfahrt-karte > img {
	min-height: 250px;
}
.route-button {
		right: 10px;
		bottom: 10px;
		gap: 5px;
		padding: 12px;
		font-size: 16px;
}
.kartenquelle {
		left: 5px;
		bottom: 5px;
		font-size: 8px;
}

}

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

.anfahrt-karte > img {
	min-height: 200px;
}

}


/* Trainer
---------------------------------------------------------------------------------------------------- */

/* Gemeinsamer SVG-Pfad */

.trainer-pfade {
	position:absolute;
	width:0;
	height:0;
	overflow:hidden;
}


/* Trainerübersicht */

.trainer-grid {
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(340px, 400px));
	justify-content:center;
	align-items:start;
	gap:0 0;
	width:100%;
	max-width:100%;
	margin:0 auto;
	padding:0;
	box-sizing:border-box;
}

.trainer {
	display:block;
	width:100%;
	max-width:400px;
	margin:0 auto;
	padding:0;
	overflow:visible;
	text-align:center;
}

.trainer-portrait {
	position:relative;
	width:100%;
	aspect-ratio:1 / 1;
	margin:0 auto;
	padding:0;
	overflow:visible;
}


/* Trainerfoto */

.trainer-portrait img {
	position:absolute;
	top:56%;
	left:50%;
	display:block;
	width:340px;
	height:340px;
	margin:0;
	padding:0;
	object-fit:cover;
	object-position:center;
	background-color:var(--off);
	border:8px solid var(--orange);
	border-radius:50%;
	box-sizing:border-box;
	transform:translate(-50%, -50%);
	z-index:1;
}
.trainer-portrait.vrstnd img {
	border:8px solid var(--gruen);
}
.trainer-portrait.vrstnd text {
	fill:var(--gruen);
}

/* Rundtext */

.trainer-portrait > svg {
	position:absolute;
	inset:0;
	display:block;
	width:100%;
	height:100%;
	overflow:visible;
	pointer-events:none;
	z-index:2;
}

.trainer-portrait text {
	font-family:'Poppins Bold', sans-serif;
	font-size:22px;
	font-weight:normal;
	text-transform:uppercase;
	letter-spacing:2px;
	fill:var(--orange);
}

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

	.trainer-grid {
		grid-template-columns:repeat(auto-fit, minmax(300px, 350px));
	}
	.trainer {
		max-width:350px;
	}
	.trainer-portrait img {
		width:300px;
		height:300px;
	}

}

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

	.trainer-grid {
		grid-template-columns:repeat(auto-fit, minmax(245px, 290px));
	}
	.trainer {
		max-width:290px;
	}
	.trainer-portrait img {
		width:245px;
		height:245px;
		border-width:7px;
	}

}

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

	.trainer-grid {
		grid-template-columns:repeat(auto-fit, minmax(210px, 250px));
	}
	.trainer {
		max-width:250px;
	}
	.trainer-portrait img {
		width:210px;
		height:210px;
		border-width:6px;
	}
	.trainer-portrait text {
		font-size:1.25em;
	}

}

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

	.trainer-grid {
		grid-template-columns:repeat(auto-fit, minmax(185px, 220px));
	}
	.trainer {
		max-width:220px;
	}
	.trainer-portrait img {
		width:185px;
		height:185px;
		border-width:5px;
	}
	.trainer-portrait text {
		font-size:1.5em;
	}
}

/* Smartphone */

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

	.trainer-grid {
		grid-template-columns:repeat(auto-fit, minmax(170px, 200px));
	}
	.trainer {
		max-width:200px;
	}
	.trainer-portrait img {
		width:170px;
		height:170px;
		border-width:4px;
	}
	.trainer-portrait text {
		font-size:1.75em;
	}
}

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

	.trainer-grid {
		grid-template-columns:repeat(auto-fit, minmax(150px, 180px));
	}
	.trainer {
		max-width:180px;
	}
	.trainer-portrait img {
		width:150px;
		height:150px;
	}

}

/* Sehr kleine Smartphones */

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

	.trainer-grid {
		grid-template-columns:1fr;
	}
	.trainer {
		max-width:240px;
	}
	.trainer-portrait img {
		width:200px;
		height:200px;
	}
	.trainer-portrait text {
		font-size:20px;
		letter-spacing:1.25px;
	}

}


/* Mobile Startseite
   Breakpoint auch in der Slider-Initialisierung der index.php ändern. */
.startseite-mobil {
	display:none;
}

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

body div.flexslider {
        display:none;
}

	.startseite-mobil {
		display:block;
		width:100%;
		margin:0;
		padding:0;
		background-color:var(--blau);
	}

	.startseite-mobil > .startseite-mobil-bild {
		display:block;
		width:100%;
		height:360px;
		object-fit:cover;
		object-position:center;
		margin:0;
		padding:0;
	}

	.startseite-mobil-links {
		list-style:none;
		margin:0;
		padding:0 20px;
	}

	.startseite-mobil-links > li {
		margin:0;
		padding:0;
		border-bottom:0.5px solid var(--off);
	}
	
	.startseite-mobil-links > li:last-of-type {
		border-bottom:none;
	}

	.startseite-mobil-links > li > a {
		display:flex;
		align-items:center;
		gap:15px;
		min-height:64px;
		padding:16px 0;
		box-sizing:border-box;
		font-family: 'Poppins Bold Italic', Helvetica Neue, Arial, Helvetica, sans-serif;
		text-transform: uppercase;
		font-size:16px;
		letter-spacing: 0.05em;
		line-height:1.4;
		text-align:left;
		text-decoration:none;
		color:var(--gelb);
		transition:color .2s ease;
	}

	.startseite-mobil-links > li > a::before {
		content:"";
		flex:0 0 24px;
		width:24px;
		height:24px;
		border-radius:50%;
		background:
			radial-gradient(circle at 0 50%, transparent 7px, var(--off) 8px, var(--off) 9px, transparent 10px),
			radial-gradient(circle at 100% 50%, transparent 7px, var(--off) 8px, var(--off) 9px, transparent 10px);
		background-color:currentColor;
		transform:rotate(30deg);
	}

	.startseite-mobil-links > li > a:hover,
	.startseite-mobil-links > li > a:focus-visible {
		color:var(--gruen);
	}

	.startseite-mobil-links > li > a:focus-visible {
		outline:2px solid var(--gruen);
		outline-offset:2px;
	}
}