* {
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
		Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}


html {
  height: 100%;
}
body {
  height: 100%;
}


body {
	color: #555;
	background-color: #dcdcdc;
}

h1 {
   font-size:2.5em;
   line-height:3.8em;
   font-family : georgia, arial, helvetica, tahoma, verdana, sans-serif;
   font-weight:300;
   color:#e2dbdb;
   margin:0em;
	 padding: 10px;
}

h2 {
   font-size:1.563em;
   line-height:1.8em;
   font-family : georgia, arial, helvetica, tahoma, verdana, sans-serif;
   font-weight:300;
   color:#2f2d2c;
   margin:0em;
   padding:1.25em;
   text-align:center;
}

h3 {
   font-size:2em;
   line-height:0.9em;
   font-family : georgia, arial, helvetica, tahoma, verdana, sans-serif;
   font-weight:500;
   color:#2f2d2c;
   margin:0em;
   padding:1.25em;
   text-align:center;
	}

h4 {
   font-size:1em;
   line-height: 0.2em;
   font-family: georgia, arial, helvetica, tahoma, verdana, sans-serif;
   font-weight:300;
	 color:#2f2d2c;
   margin-left:0.5em;
   padding:0em;
   text-align:left;
}

h5 {
   font-size:0.8em;
   line-height: 0.2em;
   font-family: georgia, arial, helvetica, tahoma, verdana, sans-serif;
   font-weight:300;
   color:#2f2d2c;
   margin-left:0.7em;
   padding:0em;
   text-align:left;
}

h1 {
	padding: 10px;
}

p {
  line-height:1.7em;
  font-family:Helvetica;
  font-weight:100;
  color:#2f2d2c;
  margin:0em;
  padding:1.25em;
  text-align: justify;
}

.text {
	line-height:1.8em;
	font-family:Helvetica;
	font-weight:100;
	color:#2f2d2c;
	margin:0em;
	padding:1.25em;
	text-align: justify;
}
.text-mitte {
	line-height:1.8em;
	font-family:Helvetica;
	font-weight:100;
	color:#2f2d2c;
	margin:0em;
	padding:1.25em;
	text-align: center;
}
.text-titel {
	font-size: 1.8em;
	line-height:0em;
	font-family:Helvetica;
	font-weight:300;
	color:#260f15;
	margin-right: 0em;
	padding:1em;
	text-align: right;
}


.text-konzerte-titel {
	font-size:1.2em;
	line-height:1.2em;
	font-family: georgia, arial, helvetica, tahoma, verdana, sans-serif;
	font-weight:300;
	color:#2f2d2c;
	margin-left:0em;
	margin-top: 0.2em;
	margin-bottom: 0.5em;
	padding:0em;
	text-align:center;
}
.text-konzerte-komp {
	font-size:0.9em;
	line-height:1.4em;
	font-family: georgia, arial, helvetica, tahoma, verdana, sans-serif;
	font-weight:300;
	color:#2f2d2c;
	margin-left:0em;
	margin-bottom:0.5em;
	padding:0em;
	text-align:center;
}

.text-video-titel {
	font-size:1.3em;
	line-height:1.2em;
	font-family: georgia, arial, helvetica, tahoma, verdana, sans-serif;
	font-weight:300;
	color:#2f2d2c;
	margin-left:0.7em;
	padding:0em;
	text-align:left;
}
.text-video-komp {
	font-size:0.9em;
	line-height:1.2em;
	font-family: georgia, arial, helvetica, tahoma, verdana, sans-serif;
	font-weight:300;
	color:#2f2d2c;
	margin-left:1.1em;
	padding:0em;
	text-align:left;
}

.text_programme {
	background-color: #ffffff;
	line-height:1.7em;
  font-family:Helvetica;
  font-weight:100;
  color:#2f2d2c;
  margin:0em;
  padding:1.25em;
  text-align: justify;
}

img {
   width: 100%;
   height: auto;
   max-width:100%;
}

.img-klein {
   width:70%;
   height: auto;
	 max-width: 100%;

	}

.img-logo {
	 width:6em;
	 height:auto;
	 max-width:100%;
  }


/* Header Titelleiste */
header {
  /*  background-color: #cdcdcd; */
   text-align:center;

	 /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#21164f+0,2e60a5+100 */
	 background: #260f15; /* Old browsers */
	 background: -moz-linear-gradient(left,  #260f15 0%, #713e4f 100%); /* FF3.6-15 */
	 background: -webkit-linear-gradient(left,  #260f15 0%,#713e4f 100%); /* Chrome10-25,Safari5.1-6 */
	 background: linear-gradient(to right,  #260f15 0%,#713e4f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#260f15', endColorstr='#713e4f',GradientType=1 ); /* IE6-9 */
	}

	header img {
		width: 100%;
	}
/* Ende Titelleiste */


.wrapper {
	width: 100%;
	max-width: 1280px;
	margin: 16px auto;
	padding: 5px;
}

.columns {
	display: flex;
	flex-flow: row wrap;
	margin: 5px 0;
}

.column {
	flex: 1;
	margin: 10px;
	background-color: #ffffff;
}
.column-grau {
	flex: 1;
	margin: 10px;
	background-color: #dcdcdc;
}
/* .column .image {
	width: 300px;
	height: 100%;
	background-position: center;
	background-size: cover;
}
*/

.column p {
	padding: 0 16px 16px;
	text-align: left;
}
.column-weiss p {
	padding: 0 16px 16px;
	text-align: left;
}
.column text_mitte {
	padding: 0 16px 16px;
	text-align: center;
}

.column h2 {
	padding:0px;;
	text-align: center;
}
.column a:link {
	color: #260f15;
	text-decoration: none;
	font-size: 1em;
}
.column a:hover {
	color: blue;
	text-decoration: none;
}

.column text {
	padding: 0 16px 16px;
	text-align: center;
}

.column img {
	width: 100%;
}

.column-grau p {
	padding: 0 16px 16px;
	text-align: left;
}
.column-grau text_mitte {
	padding: 0 16px 16px;
	text-align: center;
}

.column-grau h2 {
	padding:0px;;
	text-align: center;
}
.column-grau a:link {
	color: #260f15;
	text-decoration: none;
	font-size: 1em;
}
.column-grau a:hover {
	color: blue;
	text-decoration: none;
}

.column-grau text {
	padding: 0 16px 16px;
	text-align: center;
}

.column-grau img {
	width: 100%;
}

/* Footer */
footer {
	 display:block;
   text-align:center;

   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#21164f+0,2e60a5+100 */
   background: #260f15; /* Old browsers */
   background: -moz-linear-gradient(left,  #260f15 0%, #713e4f 100%); /* FF3.6-15 */
   background: -webkit-linear-gradient(left,  #260f15 0%,#713e4f 100%); /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(to right,  #260f15 0%,#713e4f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#260f15', endColorstr='#713e4f',GradientType=1 ); /* IE6-9 */
}

footer ul {
   display:block;
   width:96%;
   max-width:980px;
   text-align:left;
   margin:0px auto;
}

footer ul li {
   display:inline;
   font-size:0.8em;
   line-height:3.5em;
   color:#e2dbdb;
   padding:0em 0.625em 0em 0.625em;
}

footer ul li a {
    color:#e2dbdb;
}



@media screen and (max-width: 992px) {
	.column {
		flex-basis: 40%;
		margin-bottom: 10px;
	}
}


@media screen and (max-width: 576px) {
	.column {
		flex-basis: 100%;
		margin-bottom: 10px;
	}
}

@media screen and (max-width: 992px) {
	.column-grau {
		flex-basis: 40%;
		margin-bottom: 10px;
	}
}

@media screen and (max-width: 576px) {
	.column-grau {
		flex-basis: 100%;
		margin-bottom: 10px;
	}
}