/* -- FONTS --------------------------------------------------- */

@font-face {
    font-family: 'JosefinSansThinItalic';
	font-style: normal;
	font-weight: 160;
    src: url('fonts/JosefinSans-Italic-VariableFont_wght.ttf') format('truetype');
	
}

@font-face {
    font-family: 'Monteserrat';
	font-style: normal;
	font-weight: 300;
    src: url('fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
}
@font-face {
    font-family: 'Monteserrat';
	font-style: italic;
	font-weight: 300;
    src: url('fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype');
}
@font-face {
    font-family: 'Monteserrat';
	font-style: normal;
	font-weight: 600;
    src: url('fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
}

@font-face {
    font-family: 'Raleway';
	font-style: normal;
	font-weight: 300;
    src: url('fonts/Raleway-VariableFont_wght.ttf') format('truetype');
}
@font-face {
    font-family: 'Raleway';
	font-style: italic;
	font-weight: 300;
    src: url('fonts/Raleway-Italic-VariableFont_wght.ttf') format('truetype');
}
@font-face {
    font-family: 'Raleway';
	font-style: normal;
	font-weight: 600;
    src: url('fonts/Raleway-VariableFont_wght.ttf') format('truetype');
}


@font-face {
    font-family: 'Lato';
	font-style: normal;
	font-weight: 300;
    src: url('fonts/Lato-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Lato';
	font-style: italic;
	font-weight: 300;
    src: url('fonts/Lato-Italic.ttf') format('truetype');
}
@font-face {
    font-family: 'Lato';
	font-style: normal;
	font-weight: 200;
    src: url('fonts/Lato-Light.ttf') format('truetype');
}
@font-face {
    font-family: 'Lato';
	font-style: italic;
	font-weight: 200;
    src: url('fonts/Lato-LightItalic.ttf') format('truetype');
}
@font-face {
    font-family: 'Lato';
	font-style: normal;
	font-weight: 600;
    src: url('fonts/Lato-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'Lato';
	font-style: italic;
	font-weight: 600;
    src: url('fonts/Lato-BoldItalic.ttf') format('truetype');
}


@font-face {
    font-family: 'BodoWartkeIcons';
    src: url('fonts/BodoWartkeIcons.ttf');
}


/* -- VARIABLES --------------------------------------------------- */

:root {
	--color-page: rgb(36, 36, 40);
	
	--color-background: rgb(255, 255, 255);
	--color-base: rgb(196, 20, 115);
	--color-base-text: rgb(250, 250, 250);
	--color-action: rgb(132, 223, 99);
	--color-action-text: rgb(250, 250, 250);

	--color-text: rgb(31, 31, 31);
	
	--border-radius: 0.8rem;
	
}

/* -- BASICS --------------------------------------------------- */

html, body {
	background: var(--color-page);
	font-family: "Monteserrat";
	font-size: 40px;
	font-style: normal;
	font-weight: 200;
	margin: 0;
	padding: 0;
}

#page {
	background: var(--color-background);
	color: var(--color-text);
	margin: 0 auto;
	max-width: 1400px;
}
h1, h2, h3, h4, h5, h6 {
	color: var(--color-base);
	font-family: "JosefinSansThinItalic";
	font-style: normal;
	letter-spacing: -2%;
	margin: 0 0 1em 0;
	padding: 0;
	text-align: center;
}
h1 {
	font-size: 3rem;
}
h2 {
	font-size: 2.25rem;
	margin-top: 1rem;
	position: relative;
	overflow: hidden;
}
h2:after,
h2:before {
	background: var(--color-base);
	content: "";
	display: inline-block;
	height: 0.08rem;
	line-height: 0;
	position: relative;
	vertical-align: middle;
	width: 50%;
}
h2:before {
	right: 0.5em;
	margin-left: -50%;
}
h2:after {
	left: 0.5em;
	margin-right: -50%;
}
h3 {
	font-size: 1.75rem;
}
h4 {
	font-size: 1.25em;
}
b {
	font-weight: 600;
}

a {
	color: var(--color-action);
}

#top {
	position: absolute;
	opacity: 0;
	height: 2rem;
}

/* -- NAVIGATION --------------------------------------------------- */

nav {
	box-sizing: border-box;
	position: fixed;
	max-width: 1400px;
	padding: 0.5em 1em;
	text-align: center;
	top: 0;
	width: 100%;
	z-index: 999;
	transition: opacity 0.5s ease-out, background 0.5s ease-out, color 0.5s ease-out;
}
nav:hover {
	opacity: 1 !important;
}
nav.opaque {
	background: var(--color-background);
	color: var(--color-base);
	opacity: 0.666;
}
nav.opaque a {
	border-color: var(--color-base);
	color: var(--color-base);
}
nav.opaque a.menu span {
	background: var(--color-base);
}
nav.opaque a:first-child {
	border-color: var(--color-base);
}
nav > a {
	background: transparent;
	border: none;
	color: var(--color-base);
	font-size: 1rem;
	margin: 0;
	padding: 0.25em 1em;
	text-decoration: none;
	transition: color 0.5s ease, border-color 0.5s ease-out;
}
nav > a:first-child {
	background-position: calc(100% - 0.5rem) center;
	border-right: solid var(--color-base) 1px;	
}
nav > a.tickets::after{
	content: 'B';
	font-family: "BodoWartkeIcons";
	font-size: 1.6em;
	vertical-align: central;
}
nav > a.shop::before{
	content: 'A';
	font-family: "BodoWartkeIcons";
	font-size: 1.7em;
	vertical-align: central;
}
nav a.menu,
nav a.menu:before,
nav a.menu:after {
	background: transparent;
	border: none;
	height: 1.2rem;
	line-height: 0;
	margin: 0.75rem;
	padding: 0;
	position: absolute;
	right: 0;
	text-indent: -1000em;
	top: 0;
	width: 1.6rem;
	z-index: 999;
}
nav a.menu span {
	background: var(--color-base);
	border-radius: 0.2rem;
	display: block;
	height: 0.26rem;
	left: 0;
	line-height: 0;
	margin: 0;
	opacity: 1;
	overflow: hidden;
	position: absolute;
	text-indent: -1000em;
	width: 100%;
	transition-property: left, width, top, transform, background;
	transition-duration: 0.5s;
	transition-timing-function: ease-out;
}
nav a.menu span:nth-child(1) {
	top: 0;
}
nav a.menu span:nth-child(2) {
	top: calc(50% - 0.11rem);
}
nav a.menu span:nth-child(3) {
	bottom: 0;
}

nav a.menu.active span:nth-child(1) {
	transform: rotate(-135deg);
	top: calc(50% - 0.11rem);
}
nav a.menu.active span:nth-child(2) {
	left: 50%;
	width: 0;
}
nav a.menu.active span:nth-child(3) {
	transform: rotate(135deg);
	bottom: calc(50% - 0.11rem);
}

nav ul {
	background: var(--color-background);
	display: block;
	height: 0;
	left: 0;
	list-style: none;
	margin: 0;
	opacity: 0;
	overflow: hidden;
	padding: 1rem;
	position: fixed;
	top: 0;
	width: 100%;
	transition: height 0.22s ease-out, opacity 0s ease-out 0.22s;
}
nav ul.active {
	height: 100%;
	opacity: 1;
	transition: height 0.44s ease-in, opacity 0s ease-in 0s;
}
nav ul li.menu-header h3 {
	margin-top: 1rem;
}
nav ul li {
	padding: 0.5rem;
}
	

/* -- SECTIONS --------------------------------------------------- */


section {
	padding: 1.5rem 1.2rem;
}

section button {
	background: var(--color-background);
	border: 0.1rem solid var(--color-base);
/*	border-radius: var(--border-radius); */
	color: var(--color-base);
	cursor: pointer;
	display: inline-block;
	font-family: "Monteserrat";
	font-size: 1em;
	font-style: normal;
	font-weight: 600;
	padding: 0.8em 1.4em;
}
section button.center {
	display: block;
	margin: 1rem auto;
}
section button.highlight {
	background: var(--color-action);
	border: none;
	color: var(--color-action-text);
}


/* -- INSERTS --------------------------------------------------- */

section.insert {
	background: var(--color-base);
	color: var(--color-base-text);
	position: relative;
}
section.insert h3 {
	color: var(--color-base-text);
	text-align: left;
}
section.insert div.symbol {
	background: url(img/icon_email_inv.svg) center center no-repeat var(--color-action);
	background-size: 110%;
	border-radius: 50%;
	height: 6rem;
	position: absolute;
	right: 1rem;
	transform: rotate(10deg);
	top: -1rem;
	width: 6rem;
}

/* -- HEADER --------------------------------------------------- */

#header {
	aspect-ratio: 1 / 1;
	padding: 0;
	position: relative;
	text-align: center;
}
#header h1 {
    position: relative;
	margin-top: 1rem;
}
#header .slide {
	height: 100%;
	overflow: hidden;
	position: relative;
	width: 100%;
}

#header .slide img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	width: 110%;
}



/* -- FOOTER --------------------------------------------------- */


footer {
	background: var(--color-base);
	color: var(--color-base-text);
	padding: 2rem 1.2rem;
	text-align: center;
}
footer h3 {
	color: var(--color-base-text);
}
footer .asocials img {
	box-sizing: border-box;
	height: 3rem;
	margin: 0.25rem;
	width: 3rem;
}
footer .asocials .spacer {
	display: block;
	height: 0;
	line-height: 0;
	overflow: hidden;
}

footer img.logo {
	height: 4rem;
}



/* -- TOURPLAN --------------------------------------------------- */


ul.tourplan {
	list-style: none;
	margin: 0;
	padding: 0;

}

ul.tourplan li {
	display: grid;
	gap: 1em;
	grid-template-columns: 4em 2fr 1fr;	
	padding: 0.5em 0 1em;
}
ul.tourplan li.month {
	display: block;
}
ul.tourplan li.month h4 {
	text-align:left;
	margin-top: 1rem;
	margin-bottom: 0.5rem;
}

ul.tourplan li span.date {
	background: var(--color-base);
	border-radius: 50%;
	box-sizing: border-box;
	color: var(--color-base-text);
	display: block;
	font-weight: 600;
	height: 4rem;
	line-height: 1rem;
	margin-top: -0.5em;
	padding-top:1.5rem;
	position: relative;
	text-align: center;
	transform: rotate(-10deg);
	width: 4rem;
}
ul.tourplan li span.details p {
	margin: 0.5em 0;
}

ul.tourplan li span.tickets {
	text-align: right;
}



/* -- NEWS --------------------------------------------------- */


ul.news {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr 1fr;
	width: 100%
}

ul.news li {
	padding: 0 0 1rem 0;
	position: realtive;
	text-align: center;
}
ul.news li .frame {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	position: relative;
	text-align: center;
	width: 100%;
}
ul.news li .frame img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	height: 100%;
}
ul.news li time {
	background: var(--color-base);
	border-radius: 50%;
	box-sizing: border-box;
	color: var(--color-background);
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	height: 3rem;
	line-height: 0.8rem;
	margin: -1.5rem 0 0 -0.75rem;
	padding: 1.1rem 0;
	position: absolute;
	transform: rotate(-10deg);
	width: 3rem;
	z-index: 100;
}
ul.news li p {
	margin: 0.5rem 0;
}


@media (orientation: landscape) {
	
	html, body {
		font-size:22px;
	}
	
	#header {
		aspect-ratio: 2 / 1;
	}
	footer .asocials .spacer {
		display: inline-block;
		width: 1rem;
	}
	

	section {
		padding: 2rem;
	}
	
}