@charset "utf-8";
/* CSS Document */
/* @import must be at top of file, otherwise CSS will not work */

* {	margin: 0;	padding: 0;}

@-webkit-viewport {  width: device-width; }
@-moz-viewport {  width: device-width; }
@-ms-viewport {  width: device-width; }
@-o-viewport {  width: device-width; }
@viewport {  width: device-width; }

*{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

html {height: 100%; width:100%; font-size:62.5%;}
.clearfix { clear: both; margin-bottom: 0;}

body {	margin: 0px;	padding: 0px;	height: 100%;	width: 100%;	background-color: black; font-family: "Konnect-Medium", "Century Gothic", sans-serif ; }

.wrapper {	
	width: 100%;
	max-width:1920px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 2%;
	padding-bottom: 2%;
	background-image: url("../images/bg-genovevaburg-larsmay_1920.jpg");
	background-repeat: no-repeat;
	background-position: bottom;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.inner_wrap { width:100%; margin-left: auto; margin-right: auto; padding-left: 5%; padding-right: 5%; }

header, footer {	width:100%; position:absolute; float:none; }
header { height: 200px; padding-top:1rem; margin-bottom:40px; position: relative;}

#welcome {
	width:65%;
	height: 200px;
	position: relative;
	float:left;
	text-align:left;
	
}

#welcome h1 {    position: absolute;    bottom: 0;    width: 100%; }

#logo { 	width:25%; height: 200px; float:right; }
#logo img {	width:auto; height: 200px; object-fit: cover;}


h1 {
	font-family: "Konnect-Medium", "Century Gothic", sans-serif ;
	font-size:5rem;
	font-weight:600;
	color:black;
	margin: 0px;
}
h2 {
	font-family: "Konnect-Semibold", "Century Gothic", sans-serif ;
	font-size:3.2rem;
	line-height: normal;
	margin-top: 30px;
	padding: 0px;
}
h3 {
	font-family: "Konnect-Semibold", "Century Gothic", sans-serif ;
	font-size: 3rem;
	font-weight:bold;
	color: #261d4c;
	margin-bottom: 25px;
	padding: 0px;
}
h4 {
	font-family: "Konnect-Semibold", "Century Gothic", sans-serif ;
	font-size: 7rem;
	line-height: 1.6; 
	color: white;

}

p {
	font-family: "Konnect-Regular", "Century Gothic", sans-serif ;
	font-size: 2.4rem;
	line-height: 1.7;
	font-weight:normal;
	color: black;
	margin: 0px;
	padding: 0px;
}

h1:after {	width:100; display:block;}


.padding {
	padding-left: 3%;
	padding-right: 3%;
}

.zentriert {
  display: flex;
  align-items: center;
  justify-content: center;
}


#info {
	width:70%;
	height: auto;
	position:relative;
	text-align:left;
	padding-top: 2rem;
	padding-bottom: 6rem;
}

#buttons {
	width:100%;
	height: auto;
	position:relative;
	float:none;
	padding-top: 1rem;
	padding-bottom: 1rem;
}
.button {
	display:table-cell;
	margin-left:20px;
	width:150px;
	height:150px;
	text-decoration:none;
	background-color: #261d4c;
	border-radius: 50%;
	border: 1px solid #1c1342;
	text-align:center;
	vertical-align: middle !important;
	padding: 2%;
	overflow:hidden;
	box-shadow:inset 3px 3px 4px #000;
	color: white;
	font-family: "Konnect-Semibold", "Century Gothic", sans-serif ;
	font-size: 2.3rem;
	line-height:1.1;

}

.button:hover{
	background-color:#1c1342;
	border-color:#1c1342;
	box-shadow:inset 3px 3px 7px black;
	cursor: pointer;
}

#circle {
	height: auto;
	background-image: url("../images/bg-circle-2022_1280.png");
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-attachment: scroll ;
	background-position: left;
	padding-top: 5%;
	padding-bottom: 10%;
}

.stuecke {
	height: auto;
	vertical-align: middle;
	text-align: left;
	margin-top: 60px;
	padding-left: 1%;
	padding-right: 1%;

}


.faust { width: 300px;	background-color: hotpink;	background-image:url("../images/urfaust.jpg");}
.shakespeare1 {	width: 540px;	background-color: yellow;	background-image:url("../images/shakespeare_top.jpg");}
.shakespeare2 {	width: 620px;	background-color: yellow;	background-image:url("../images/shakespeare_bottom.jpg"); margin-top: 0px;}
.brigitte {	width: 780px;	background-color: red;	background-image:url("../images/brigitte.jpg");}
.aschenputtel {	width: 660px;	background-color: green;	background-image:url("../images/aschenputtel.jpg");}
.ripley1 {	width: 540px;	background-color: lightblue;	background-image: url("../images/ripley.jpg");}
.ripley2 {	width: 360px;	background-color: lightblue;	background-image: url("../images/ripley.jpg"); 	margin-top: 0px;}

.zusatz {	font-family: "Konnect-Light" , "Century Gothic", sans-serif ;	font-size: 5.5rem;	line-height: 1.6; 	color: white; }

.newsletter {
	background-color:#fff;
	position:relative;
	float:left;
	width:100%;
	text-align:left;
	padding-left: 3%;
	padding-right: 3%;
	padding-top: 5%;
	padding-bottom: 5%;
	margin-top:4rem;
	clear: both;
	height: auto;
}


#news_left {
	width:40%;
	float:left;
	height: auto;
	text-align: left;
	margin-top:25px;
	}

#news_right {
	width:55%;
	float:right;
	height: auto;
	text-align: left;
	margin-top:25px;
	}

.kontakt  {
	width:100%;
	float:none;
	clear: both;
	height: 35px;
	text-align: center;
	background-color: rgba(38,29,76,0.84);
	margin-top:0;
	margin-bottom:0;
	}

.kontakt p {	color: #fff;	font-size: 1.7rem;	}
.kontakt a {	color: #fff;	font-size: 1.7rem;	}

.kontakt li {
display:block;
float:left;
padding:0 10px;
}

@media only screen and (orientation:portrait) {
	
h1 {	font-size:3.5rem;}
h2 {	font-size:2.5rem;}
h3 {	font-size: 2rem;	margin-bottom: 5px;	margin-top: 20px; padding: 0px;}
h4 {	font-size: 3.2rem;	line-height: 1.5; 	color: white; }
	
p {	font-size: 2.0rem;	line-height: 1.5;	}
	
.kontakt {    width: 100%;}	
#welcome {	width:100%;	height: auto;	}

#welcome h1 {    position: relative;   width: 100%; float:left;}

#logo { 	width:100%; height: 200px; float:left; margin-top: 25px; margin-bottom: 25px;}
#logo img {	width:auto; height: 200px; object-fit: cover; object-position: center;}
	
#info {    width: 100%;}
	

.button {	float: right; 	margin-right:20px; margin-left:0; width:100px;	height:100px; vertical-align: middle !important;
	padding: 26px 5px; font-size: 1.9rem;	line-height:1.1; float: right;}
	
	
#circle {	height: auto;	padding-top: 2%;	padding-bottom: 2%;}
	
.stuecke {	max-width: 98%;	margin-top: 35px;	padding-left: 1%;	padding-right: 1%;}
	

.faust { width: 40%;}
.shakespeare1 {	width: 75%; margin-bottom: -40px;}
.shakespeare2 {	width: 88%;	}
.brigitte {	width: 100%;	}
.aschenputtel {	width: 86%;	}
.ripley1 {	width: 75%; margin-bottom: -40px;	}
.ripley2 {	width: 55%;	}

.zusatz {	font-family: "Konnect-Light", "Century Gothic", sans-serif ;	font-size: 2.4rem;	line-height: 1.1; 	color: white; }

#news_left {	width:95%;	float:left;	height: auto;	text-align: left;	margin-top:25px; margin-bottom:35px; margin-left: 0;	}

#news_right {	width:95%;	float:left; height: auto;	text-align: left;	margin-top:25px; margin-left: 0; 	}

.kontakt  {	width:100%;	height: auto;	}
.kontakt p, a {	color: #fff;	font-size: 1.5rem;	}

}
/*Tablet*/
@media only screen and (max-width: 1024px) {
	}