/*
	Farbenschema
	
	cresc-violett: html #4a2683  RGB 74 / 38 / 131 (RGB ist: ECI RGB v2)   
	gold:          html #b39661  RGB (179, 150, 97)
*/


/**************************
Global Styles*
****************************
*/



@font-face {
	font-family: "giovanni_italic";
	src: url("../fonts/GiovanniStd-BlackItalic.otf"); format("otf");
}

@font-face {
	font-family: "optima";
	src: url("../fonts/OptimaLTStd.otf"); format("otf");

}

/*
 Border-Box Fix
	apply a natural box layout model to all elements, but allowing components to change
*/
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}


html {font-size: 1.2rem; /* 1rem equal to 16px and 100%
/*html {font-size: 2vw; /*2% of the vertical width --> fluid%*/

}
  
@media (max-width: 858px) {
	html {
		font-size: 1.0rem
	}
}

body {
	margin: 0;
	padding: 0; 
	font-family: "optima", Arial, sans-serif;
	line-height: 1.5;
}

.content-wrapper {
	margin: 0 auto;
	max-width: 1024px;
/* 	overflow: auto; */
}

	
.flex-container {
	display: flex;
	align-items: center;
}


h1 {
	font-family: "optima", Arial, sans-serif;
	font-size: 1.7rem;
	font-weight: normal;
	text-transform: uppercase;
	margin: 0;
}
	
	
	
	@media (max-width: 858px) {
	h1 {
		font-size: 1.2rem;
	}
}


main {
	line-height: 1.5;
	margin-top: 1rem;
}

a {
	color: #b39661;
}

a:hover {
	text-decoration: none;
}



hr.breit {
	color: #4a2683;
	background-color: #4a2683;
	height: 9px;
	border: none;
	margin-top: 1rem;
}


hr.schmal {
	color: rgba(74, 38, 131, 0.6);
	background-color: rgba(74, 38, 131, 0.6);
	height: 2px;
	border: none;
	margin-top: 1rem;
	margin-bottom: 1.5rem;
}


.btn-sm {
	font-family: "optima", "raleway_light", Arial, sans-serif;
	text-decoration: none;
	font-size: 1rem;
	background-color: #b39661;
	color: white;
	width: 222px;
	height: 56px;
	line-height: 56px;
	text-transform: uppercase;
	border: none;
/*
	vertical-align: top;
	position: relative;
*/
/* 	top: 30px; */
	transition: color 0.3s ease-out 0s;
}
	

.btn-sm:hover, 
.btn-sm:focus {
	background-color: white;
	color: #b39661;
	border: 2px solid #b39661;
	transition: color 0.3s ease-out 0s;
	line-height: 54px;
	outline: none;
	
	
}



/**********************************
	Navigation
***********************************/

nav {
	margin: 0 auto;
	margin-top: 25px;
	text-align: center;
	background: white;
	max-width: 1180px;
	width: 100%;
/* 	position: fixed; */
	top: 0;
	z-index: 100; /*geht nur, wenn vorher position definiert*/
	display: flex;
	align-items: baseline;
	align-content: center;
	justify-content: space-around;
	}
	
	
/*
.logo {
	display: inline;
}
*/	


nav ul {
	display: flex;
	justify-content: space-between;
}


	
nav ul li{
/* 	display: inline; */
	text-align: right;
	margin: 0 10px;
	padding-bottom: 15px;
	list-style-type: none;	
	}

nav li a {
	color: #4a2683;
	text-decoration: none;
	transition: border-bottom 0.15s ease-out 0s;
}

nav li a:hover {
	text-decoration: none;
	border-bottom: 3px solid #b39661;
	padding-bottom: 0;
}




/**********************************
	Header
***********************************/

 
	
.balken {
	font-family: "giovanni_italic", Arial, sans-serif;
	font-size: 3rem;
	line-height: 1;
	color: white;
	padding: 28px 0px 16px;
	background-color: #4a2680;
	text-align: center;
	}
	
@media (max-width: 858px) {
	.balken {
		font-size: 2rem;
	}
}
	
/**********************************
   Index
***********************************/

.nextconcert {
	margin: 3rem auto;
	display: grid;
    max-height: 360px;
	grid-template-columns: auto 4fr 1fr;
	grid-template-rows: 4.5rem auto auto auto; 
	grid-gap: 1rem;
	grid-template-areas: "plakat titel titel" 
						 "plakat konzertdetails konzertdetails" 
						 "plakat dokumente .."
						 "plakat .. button";

}						
						
						

.nextconcert img {
	max-height: 360px;
	grid-area: plakat;
	padding-top: 0.5rem;
	
}

.nextconcert h1 {
	grid-area: titel;
}

.konzertdetails {
	grid-area: konzertdetails;
}

.dokumente {
	grid-area: dokumente;

}


.nextconcert .btn-sm {
	grid-area: button;
	text-align: center;
}


@media (max-width: 858px) {	

	.video {
		max-width: 100%;		
	}	
}



/**********************************
	Saison, Rückschau und Detailseite shared
***********************************/




.plakattitel {
	text-transform: uppercase;
	font-size: 1.5rem;
/* Hat es nicht genommen. */	
}

.zeitundort {
	font-size: 0.8rem;
}


.icon-top {
	display: block;
	text-align: center;
	padding: 1rem;	
}

/**********************************
	Saison
***********************************/


.saisongrid {
	display: grid;
	height: 287px;
	grid-template-columns: 37% auto 12% 38%;
    grid-template-rows: 40% 28% auto;
    grid-gap: 1rem;

	grid-template-areas: "bild tagalszahl monattagalswortjahr plakattitel" 
						 "bild tagalszahl monattagalswortjahr zeitundort" 
						 "bild tagalszahl monattagalswortjahr knopf";
	margin-bottom: 2rem;
	margin-top: 2rem;
}


.blackbackground {
	background-color: black;
	height: 287px;
	width: 360px;
	padding-right: 2rem;
}

.saison-plakat {
	height: 287px;
	grid-area: bild;
/* 	padding-right: 2rem; */
}

.tagalszahl {
	opacity: 0.2;
	font-size: 3rem;
	font-family: "giovanni_italic";
	padding-left: 1rem;
	grid-area: tagalszahl;
}

.monattagalswortjahr {
	font-family: "giovanni_italic";
	font-style: italic;
	font-size: 1rem;
	grid-area: monattagalswortjahr;
	padding-top: 0.4rem;
	padding-right: 3rem;
}

.plakattitel {
	grid-area: plakattitel;
}
	
.zeitundort {
	grid-area: zeitundort;
	text-transform: none;
	font-size: 1rem;
}
	
	
.saisongrid .btn-sm {
	grid-area: knopf;
	
}



	
	
/**********************************
	Rückschau
***********************************/

.icons img {
	height: 1.6rem;
}

.rueckschaugrid {
	display: grid;
	height: 400px;
	grid-template-columns: 50% 50%;
    grid-template-rows: auto 2.6rem 1.6rem 50%;
    grid-gap: 1.5rem;

	grid-template-areas: "rueckschau-plakat rueckschau-plakattitel" 
						 "rueckschau-plakat rueckschau-zeitundort" 
						 "rueckschau-plakat icons"
						 "rueckschau-plakat rueckschau-btn";
	margin-bottom: 2rem;
	margin-top: 2rem;
}
	

	
.rueckschau-plakat {
	grid-area: rueckschau-plakat;
}

.rueckschau-plakattitel {
	grid-area: rueckschau-plakattitel;
	text-transform: uppercase;
	font-size: 1.5rem;
}


.rueckschau-zeitundort {
	grid-area: rueckschau-zeitundort;
}

.icons {
	grid-area: icons;
	height: 1.6rem;
}

.rueckschau-btn {
	height: 56px;
	grid-area: rueckschau-btn;
}

.icon-jahreszahl {
	margin: 3rem auto 1rem;
	text-align: center;
	font-size: 1.3rem;
}


.jahreszahl {
	padding: 1rem;
	color: #b39661;
}


.icon-jahreszahl:first-of-type {
	margin-top: 0;
}




/**********************************
	Detailseite
***********************************/


.medium {
	text-align: center;
	padding-top: 1.5rem;
}


.plakattitel-detail {
	text-align: center;
}
	
	
	/**********************************
	Ueber Uns
***********************************/

.ueberuns {
	margin-top: 2rem;
}	

.ueberuns img {
	float: left;
	margin-right: 1.5rem;
	overflow: scroll;
}


.btn-sm-thema {
	font-family: "optima", "raleway_light", Arial, sans-serif;
	text-decoration: none;
	font-size: 1rem;
	background-color: #b39661;
	color: white;
	width: 222px;
	height: 56px;
	line-height: 56px;
	text-transform: uppercase;
	border: none;
	display: inline-block;
	margin-right: 30px;
/*
	vertical-align: top;
	position: relative;
*/
/* 	top: 30px; */
	transition: color 0.3s ease-out 0s;
}


.btn-sm-thema:hover, 
.btn-sm-thema:focus {
	background-color: white;
	color: #b39661;
	border: 1px solid #b39661;
	transition: color 0.3s ease-out 0s;
	line-height: 56px;
	outline: none;
}



	/**********************************
	Kontakt
***********************************/

.kontakt {
	margin: 4rem auto;
	text-align: center;
}	


	
	
/**********************************
	Footer Sponsoren
***********************************/
	
.sponsor-flex {
	display: flex;
	justify-content: space-between;
	align-items: center;
	
	
}
	
/*
footer img {
	height: 2rem;
	margin: 1rem;
}
*/

footer img {
	height: 3rem;
	margin-left: -0.5rem;
	
}

	
/**********************************
	Footer Newsletter
***********************************/	
	
.newsletter-flex {
	display: flex;
	justify-content: flex-start;
	align-items: baseline;
	margin-bottom: 1rem;
}

input[type="email"] {
	font-family: "optima", "raleway_light", Arial, sans-serif;
	width: 465px;
	height: 58px;
	padding-left: 10px;
	margin: 30px 16px 0px -10px;  /* Hier den linken Margin auf -10px setzen (du kannst den Wert anpassen, z. B. -5px oder -15px, je nach gewünschtem Effekt) */
	/* box-sizing: border-box; */
	border: 1px solid black;
	font-size: 1.5rem;
}

input[type="email"]:focus {
	outline: none;
	border: 2px solid #b39661;
	box-shadow: inset 3px 3px 2px rgba(179, 150, 97, .2);
}


::placeholder {
	font-size: 1.5rem;
    font-family: "optima", "raleway_light", Arial, sans-serif;
}

::placeholder-shown {
	font-size: 1.5rem;
    font-family: "optima", "raleway_light", Arial, sans-serif;
}