/* @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Bebas+Neue&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
	--bg-color: #000;
	--base-padding: 2rem;
	--header-height: 5rem;
	--footer-height: 7rem;
}

/* #endregion */


/* #region BASICS */
* {
	box-sizing: border-box;
}

html {
	font-size: 10px;
	line-height: 1.6;
}

body {
	font-family: "Montserrat", sans-serif;
	font-optical-sizing: auto;
	font-size: 1.6rem;
	font-style: normal;
	font-weight: 400;
	color: #fffd;

	background-color: var(--bg-color);

	padding-inline: 0;
	padding-bottom: var(--footer-height);
	margin: 0;

	@media (width >500px) {
		padding-top: var(--header-height);
	}
}

.hidden {
	display: none;

	&.display-md {
		@media (width >500px) {
			display: unset;
		}
	}

	&.display-lg {
		@media (width >1000px) {
			display: unset;
		}
	}
}

hr {
	border: none;
	border: 1px solid #fff5;
}

/* #endregion */


/* #region TYPO */
strong {
	font-weight: 700;
}

a {
	color: inherit;
	text-decoration: underline;
}

h1,
h2,
h3 {
	font-family: "Bebas Neue", "Haettenschweiler", sans-serif;
	font-style: normal;
	font-weight: 400;
	line-height: 1;
}

h2 {
	font-size: 3.6rem;
}

h3 {
	font-size: 2.8rem;
}

.rainbow {
	background: center no-repeat url(gradient.png);
	background-size: cover;
	position: relative;
	background-clip: text;
	color: transparent;
	text-shadow: none;
}

/* #endregion */


/* #region LAYOUT */
header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 10;
	/* width: 100%; */
	height: var(--header-height);
	/* height: 0; */
	/* overflow: hidden; */
	padding: 0 2rem;
	margin-inline: auto;

	font-family: "Bebas Neue", sans-serif;
	font-size: 1rem;

	/* display: none; */

	@media (width >500px) {
		display: flex;

		background-image: linear-gradient(180deg,
				hsla(0, 0%, 0%, 100%) 2%,
				hsla(0, 0%, 0%, 93%) 41%,
				hsla(0, 0%, 0%, 86%) 54%,
				hsla(0, 0%, 0%, 79%) 63%,
				hsla(0, 0%, 0%, 71%) 69%,
				hsla(0, 0%, 0%, 64%) 73%,
				hsla(0, 0%, 0%, 57%) 77%,
				hsla(0, 0%, 0%, 50%) 80%,
				hsla(0, 0%, 0%, 43%) 82%,
				hsla(0, 0%, 0%, 36%) 84%,
				hsla(0, 0%, 0%, 29%) 86%,
				hsla(0, 0%, 0%, 21%) 88%,
				hsla(0, 0%, 0%, 14%) 90%,
				hsla(0, 0%, 0%, 7%) 92%,
				hsla(0, 0%, 0%, 0%) 100%);

	}

	ul,
	li {
		display: inline-block;

		a {
			text-decoration: none;
		}
	}

	nav {
		height: 0;
		overflow: hidden;
	}

	.menu {
		cursor: pointer;
		position: absolute;
		top: 0;
		right: 0;
		width: var(--header-height);
		aspect-ratio: 1;
		background-color: transparent;
		--border-size: 3px;

		i,
		i::before,
		i::after {
			position: absolute;
			display: block;
			border-radius: 3px;
			transition: all .3s;
			transform-origin: calc(50% - .8 * var(--border-size)) center !important;
		}

		i {
			inset: 50% 1rem auto;
			transform: translateY(-50%);
			height: var(--border-size);

			&::before,
			&::after {
				content: '';
				inset: auto 0;
				border-top: var(--border-size) solid #fff;
			}
		}

		i:first-child {
			background-color: #fff;

			&::before {
				top: -1rem;
			}

			&::after {
				bottom: -1rem;
			}
		}

		i:last-child {
			opacity: 0;
		}

		@media (width > 480px) {
			display: none;
		}
	}
}

main {
	max-width: 1100px;
	margin-inline: auto;


	section {
		position: relative;
		/* background-color: #444; */
		padding: calc(var(--base-padding) * 2) var(--base-padding);

		@media (width <=500px) {
			text-align: center;
		}

		&:not(:last-child)::after {
			content: '';
			position: absolute;
			left: 50%;
			bottom: 0;
			translate: -50%;
			display: block;
			width: 50%;
			/* margin-inline: auto; */
			border: 1px solid #fff5;
		}

		&.breakout {
			@media (width > 500px) {
				position: relative;
				left: 50%;
				width: 100vw;
				max-width: 220rem;
				translate: -50%;

				.inner {
					max-width: 1100px;
					margin-inline: auto;
				}
			}
		}

		.bg {
			position: absolute;
			inset: 0;
			z-index: -1;
			background: center no-repeat var(--bg-image);
			background-size: cover;
		}
	}

	#stage {
		.inner {

			padding-top: var(--header-height);
		}

		.bg {
			--bg-image: url(hero.jpg);
			-webkit-mask-image: linear-gradient(black, transparent);
			mask-image: linear-gradient (black, transparent);
		}

		h1 {
			aspect-ratio: 1;
			text-indent: -9999rem;
			background: url(logo.png) center no-repeat;
			background-size: contain;

			@media (width > 500px) {
				aspect-ratio: 3;
			}
		}

		.meta {
			/* position: absolute; */
			inset: auto var(--base-padding) var(--base-padding);

			display: flex;
			justify-content: space-between;

			h3 {
				&:first-child {
					flex: 0 0 30%;
					text-align: left;
				}

				&:last-child {
					flex-basis: 50%;
					text-align: right;
					opacity: .8;
				}
			}
		}

		&.special {
			h1 {
				aspect-ratio: 2;
			}

			h2 {
				font-family: "Anton", "Haettenschweiler", sans-serif;
				font-style: normal;
				font-size: 13rem;
				font-weight: 400;
				line-height: .7em;
				text-transform: uppercase;
				margin-block: 0.3em;

				small {
					font-size: .7em;
				}
			}

			h3 {
				font-size: 4.6rem;
				margin-block: 0.2em;
			}
		}

		.outline {
			-webkit-text-fill-color: transparent;
			-webkit-text-stroke: .025em;
		}

	}

	#info {

		@media (width > 500px) {
			display: flex;
			flex-wrap: wrap;
		}

		>* {
			@media (width > 500px) {
				flex: 1 1 50%;
			}
		}

		cite {
			p {
				margin-block: 0.5em;
			}

			@media (width <=500px) {
				&:not(:last-child)::after {
					content: '';
					display: block;
					width: 30%;
					margin: var(--base-padding) auto;
					border: 1px solid #fff3;
				}
			}
		}

		>:last-child {
			@media (width > 500px) {
				flex-basis: 100%;

				/* justify-content: center; */
			}
		}
	}

	#event {
		.lineup {
			display: flex;
			flex-wrap: wrap;
			gap: var(--base-padding);

			>div {
				position: relative;
				flex: 1 0 auto;

				@media (width > 500px) {
					flex-basis: 50%;
				}

				@media (width > 1000px) {
					flex-basis: 30%;
				}
			}

			h3 {
				padding: .5rem 1rem;
				background-image: linear-gradient(0deg,
						rgb(from var(--bg-color) r g b / 100%) 2%,
						rgb(from var(--bg-color) r g b / 93%) 41%,
						rgb(from var(--bg-color) r g b / 86%) 54%,
						rgb(from var(--bg-color) r g b / 79%) 63%,
						rgb(from var(--bg-color) r g b / 71%) 69%,
						rgb(from var(--bg-color) r g b / 64%) 73%,
						rgb(from var(--bg-color) r g b / 57%) 77%,
						rgb(from var(--bg-color) r g b / 50%) 80%,
						rgb(from var(--bg-color) r g b / 43%) 82%,
						rgb(from var(--bg-color) r g b / 36%) 84%,
						rgb(from var(--bg-color) r g b / 29%) 86%,
						rgb(from var(--bg-color) r g b / 21%) 88%,
						rgb(from var(--bg-color) r g b / 14%) 90%,
						rgb(from var(--bg-color) r g b / 7%) 92%,
						rgb(from var(--bg-color) r g b / 0%) 100%);
				margin-top: -3rem;
			}

			img {
				max-width: 100%;
			}

			.icon{
				position: absolute;
				top: 0;
				max-width: 50px;
				aspect-ratio: 1;
			}
		}
	}

	#termine {
		iframe {
			width: 100%;
			height: 50vh;
			border-radius: var(--base-padding);
		}
	}
}


footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: var(--footer-height);
	background-image: linear-gradient(0deg,
			rgb(from var(--bg-color) r g b / 100%) 2%,
			rgb(from var(--bg-color) r g b / 93%) 41%,
			rgb(from var(--bg-color) r g b / 86%) 54%,
			rgb(from var(--bg-color) r g b / 79%) 63%,
			rgb(from var(--bg-color) r g b / 71%) 69%,
			rgb(from var(--bg-color) r g b / 64%) 73%,
			rgb(from var(--bg-color) r g b / 57%) 77%,
			rgb(from var(--bg-color) r g b / 50%) 80%,
			rgb(from var(--bg-color) r g b / 43%) 82%,
			rgb(from var(--bg-color) r g b / 36%) 84%,
			rgb(from var(--bg-color) r g b / 29%) 86%,
			rgb(from var(--bg-color) r g b / 21%) 88%,
			rgb(from var(--bg-color) r g b / 14%) 90%,
			rgb(from var(--bg-color) r g b / 7%) 92%,
			rgb(from var(--bg-color) r g b / 0%) 100%);
	padding: 2rem var(--base-padding) 0;
	margin-inline: auto;

	display: flex;
	justify-content: center;

	>* {
		flex: 1;
		text-align: center;

		justify-content: center;
		align-items: center;
	}

	ul {
		display: inline-block;
		padding: 0;
		margin: 0;
	}

	li {
		display: inline-block;
		margin-left: 2rem;
	}

	>section:first-child {
		justify-content: flex-start;
		text-align: left;
	}

	#follow {

		a {
			display: block;
			width: 3rem;
			aspect-ratio: 1;
			/* background: lavender; */
			/* overflow: hidden; */
			text-indent: -999rem;
			background: center no-repeat;
			background-size: contain;

			&[href*=instagram] {
				background-image: url(logo_instagram.png);
			}

			&[href*=rausgegangen] {
				background-image: url(logo_rausgegangen.png);
			}

			&[href*=sumpfkultur] {
				background-image: url(logo_swamp.png);
			}

			&[href*=poolbar] {
				background-image: url(logo_poolbar.png);
			}
		}
	}

	>section:last-child {
		justify-content: flex-end;
		text-align: right;
	}
}

/* #endregion */