/** 1. TYPOGRAPHY
*******************************************************************/

html,
body
{
    width: 100%;
    height: 100% !important;
    margin: 0 !important;
}

body
{
    font-weight: 500;
    font-style: normal;
    line-height:30px;
    font-size:20px;
    color: black;
    background:white;
    -webkit-font-smoothing: antialiased;
    font-family: 'Noto Sans Display', sans-serif;
     scroll-behavior: smooth;
}

h1,
h2,
h3,
h4,
h5,
h6
{
    font-family: 'Marhey', sans-serif;
    font-weight: 700;
    line-height: auto;

}

h1
{
    font-size: 55px;
    line-height:75px;
    
}

h2
{
    font-size: 45px;
    line-height:60px;
}

h3
{
    font-size: 24px;
    font-family: 'Noto Sans Display', sans-serif;
}

h4
{
    font-size: 24px;
}

h5
{
    font-size: 18px;
}

h6
{
    font-size: 16px;
}

p
{
    margin:0;
    padding:0;
}

a {
	color:rgb(130,28,128);
}
a,
a:hover,
a:focus
{
    cursor: pointer;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
    text-decoration: none;
}

q {
	font-style: italic;
}

body::before {
	content:"";
	position:relative;
	background-color:rgb(186,225,235);
	position:absolute;
	width:100vw;
	height:auto;
	top:0;
	left:0;
	z-index:-2;
	height:5vw;	
}
body.imprint {
	background-color:rgb(186,225,235);
}

/** 3. Header
*****************************************************************/
.ikw-image {
	position:absolute;
	width:100vw;
	height:auto;
	top:0;
	left:0;
	z-index:-1;
}

header {
	text-align:center;
	position:absolute;
	left:0;
	top:0;
	right:0;
	
}
header h1.in-zerbst {
	text-align:center;
	margin-top:0;
	width:300px;
	margin:0 auto;
	padding:20px 0 10px;
	line-height:1;
	position:relative;
}
#in-zerbst-hg {
	position:absolute;
	width:388px;
	height:auto;
	z-index:-1;
	top:-8px;
	left:-45px;
}
#in-zerbst-hg path {
	fill:#ffffff;
}

header .ikw-logo {
	
	width:600px;
	height:auto;
}

/** 3. CONTENT
*****************************************************************/

#main
{
    width: 100%;
}
.wrapper {
	width:1200px;
	margin:0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}
#main .wrapper {
	margin-top:80vw;
}
.imprint #main .wrapper {
	margin-top:0;
}


#main h2 {
	text-align:center;
}

.calendar-grid {
	display:grid;
	grid-template-columns: 200px auto 50px;
	margin-bottom:80px;
}
.calendar-grid-column {
	align-self:start;
	justify-self:start;
}
.calendar-grid-column h3{
	margin:0;
}

.calendar-grid-column-1 span {
	display:block;
	font-family: 'Marhey', sans-serif;
    font-weight: 700;
    font-size:24px;
    color:rgb(130,28,128);
}
.calendar-grid-column-1 span:first-child {
	color:rgb(183,7,126);
}
.calendar-grid-column-1 span:last-child {
	color:rgb(228,58,78);
}

.calendar-grid-column-1,
.calendar-grid-column-2 {
  	cursor:pointer;
}
.calendar-grid-column-2 span.place {
	display:inline-block;
	font-family: 'Marhey', sans-serif;
    font-weight: 700;
    margin-right:5px;
    color:rgb(183,7,126);
}

.calendar-grid-column-3 {
	font-family: 'Marhey', sans-serif;
    font-weight: 700;
    font-size:45px;
    font-stretch: 200%;
    align-self:start;
    justify-self:end;
  	cursor:pointer;
}
.calendar-grid .calendar-grid-column-3 .arrow {
	transform:rotate(0deg);
	transition:transform 1s;
}
.calendar-grid .calendar-grid-column-3 .arrow path {
	fill:#CB063A;
}
.calendar-grid.active .calendar-grid-column-3 .arrow {
	transform:rotate(180deg);
}
.calendar-grid-column-4 {
  	grid-column-start:1;
  	grid-column-end:4;
  	max-height: 0;
  	overflow: hidden;
  	transition: max-height 0.2s ease-out;
  	padding-top:30px;
  	cursor:pointer;
}
.calendar-grid-column-4 .cost {
	font-style: italic;
	margin-top: 15px;
	color:rgb(0,128,58);
}
.calendar-grid-column-4 .address span {
  display: inline-block;
  font-family: 'Marhey', sans-serif;
  font-weight: 700;
  margin-right: 5px;
  color: rgb(183,7,126);
}


.logo-grid {
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
	margin-bottom:80px;
}
.logo-grid-column {
	align-self:center;
	/*justify-self:center;*/

}
.logo-grid-column img {
	width:calc(100% - 40px);
	margin:20px;
	height:auto;
	display:block;
}
.logo-grid-column-1 img {
	width:calc(100% - 100px);
	margin:20px 50px;
	height:auto;
	display:block;
}

/** 8. Footer
*****************************************************************/

.footer {
	text-align:center;
}
.footer a {
	display:inline-block;
	margin: 30px 5px;
}

/** 8. MEDIA QUERIES
*****************************************************************/

@media screen and (max-width: 1500px)
{
	/*
	header h1 {
		background-color:white;
		width:300px;
		margin:0 auto;
		padding:20px 0 10px;
		line-height:1;
	}
	*/
}
@media screen and (max-width: 1200px)
{
    header .ikw-logo {
	
		width:50%;
	}
	
    .wrapper {
		width:100%;
	}
}

@media screen and (max-width: 860px)
{
   	.ikw-image {
   		top:5vw;
   	}
   	header .ikw-logo {
		width:60%;
		margin-top:-5vw;
	}
    .wrapper {
		width:100%;
	}
	#main .wrapper {
		margin-top:85vw;
	}
}

@media screen and (max-width: 768px)
{
	header .ikw-logo {
		width:70%;
	}
	.calendar-grid {
		margin-bottom:60px;
	}
	.calendar-grid-column-1 {
		grid-column-start:1;
		grid-column-end:4;
	}
	.calendar-grid-column-1 span {
		display: inline-block;
		margin-right:5px;
	}
	.calendar-grid-column-2 {
		grid-column-start:1;
		grid-column-end:3;
	}
	.logo-grid {
	  grid-template-columns: 1fr 1fr;
	  margin-bottom: 60px;
	}
}
@media screen and (max-width: 580px)
{
	header .ikw-logo {
		width:90%;
	}
	#main .wrapper {
		margin-top:100vw;
	}
}

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

	.calendar-grid {
		grid-template-columns: 200px auto 25px;
		margin-bottom:60px;
	}
	.calendar-grid-column-3 svg {
		width:25px;
		height:auto;
	}
	
}
@media screen and (max-width: 440px)
{
	body::before {
		height:15vw;	
	}
	.ikw-image {
   		top:15vw;
   	}
	header .ikw-logo {
		width:100%;
		margin-top:-10vw;
	}
	#main .wrapper {
		margin-top:110vw;
	}
	.logo-grid {
	  grid-template-columns: 1fr;
	  margin-bottom: 60px;
	}
	
	
}