/* pt-sans-regular - latin */
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: normal;
  src: url('../fonts/pt-sans-v11-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('PT Sans'), local('PTSans-Regular'),
       url('../fonts/pt-sans-v11-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/pt-sans-v11-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/pt-sans-v11-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/pt-sans-v11-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/pt-sans-v11-latin-regular.svg#PTSans') format('svg'); /* Legacy iOS */
}

/* pt-sans-700 - latin */
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: bold;
  src: url('../fonts/pt-sans-v11-latin-700.eot'); /* IE9 Compat Modes */
  src: local('PT Sans Bold'), local('PTSans-Bold'),
       url('../fonts/pt-sans-v11-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/pt-sans-v11-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/pt-sans-v11-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/pt-sans-v11-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/pt-sans-v11-latin-700.svg#PTSans') format('svg'); /* Legacy iOS */
}

/* yanone-kaffeesatz-300 - latin */
@font-face {
  font-family: 'Yanone Kaffeesatz';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/yanone-kaffeesatz-v13-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/yanone-kaffeesatz-v13-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/yanone-kaffeesatz-v13-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/yanone-kaffeesatz-v13-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/yanone-kaffeesatz-v13-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/yanone-kaffeesatz-v13-latin-300.svg#YanoneKaffeesatz') format('svg'); /* Legacy iOS */
}





/* Farben */
html {	    
    --blau: #5a8dac;
    --hellblau: #d8eaf4;
}


/* ALLGEMEIN */

html {
	font-family: 'PT Sans';
	font-weight: normal;
	font-size: 16px;
	line-height: 1.4;
	-moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

a {color: var(--blau); text-decoration: none; transition: 0.3s;}
a:hover {color: black;}

h1, h2, h3 {margin: 0.5em 0 0; font-family: 'Yanone Kaffeesatz'; font-weight: normal;}
h1 {font-size: 2.7em; color: grey;}
h1 strong {font-weight: normal; color: var(--blau);}
h2 {font-size: 1.8em; color: var(--blau);}
h3 {font-size: 1.5em; color: black;}

.error {color: red;}
.error input {border: 1px solid;}


#container .inside, #footer .inside {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 2em;
}


/**** HEADER ****/

#header {
	text-align: center;
	position: sticky;
	width: 100%;
	/* width 100vw bezieht die Scrollbalken mit ein... */
	top: -95px;
	padding-top: 1em;
	background: white;
	z-index: 1;
}

#header.klein {float: left; font-size: 0.5em;}

/* NAVIGATION */

.menu-icon {display: none;}
.mod_navigation {
	font-size: 0.9em;
	text-transform: uppercase;
}
.mod_navigation ul {margin: 0; padding: 0;}
.mod_navigation li {
	display: inline-block;
	margin: 0.3em 1em 1em;
	padding: 7px 0 0;
}
.mod_navigation li.active {border-top: 1px solid var(--blau);}
.mod_navigation li a {padding: 10px 0; color: black;}
.mod_navigation li strong {padding: 10px 0; font-weight: normal;}
.mod_navigation li a:hover {color: var(--blau);}


/* TITELFOTO */

#titelfoto {position: relative;}
#titelfoto img {width: 100%;}
#titelfoto figcaption {position: absolute; bottom: 0; margin-left: 0.2em; font-size: 0.6em; color: white; text-shadow: 0 0 10px black;}


/**** INHALT ****/

#container {
	min-height: 30vh;
	margin: 2em 0 3em;
}

/* Kalender Startseite */
.konzerte_startseite h2 {padding-left: 0.8em;}
.konzerte_startseite .event .beschreibung,
.konzerte_startseite .event .konzertdaten {
	padding: 1em 1.5em 0.8em;
	background: var(--hellblau);
}
.konzerte_startseite .event .beschreibung {
	margin-top: 1em;
}
.konzerte_startseite .event .konzertdaten {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-gap: 0.5em;
	padding-bottom: 1em;
	border-top: 1px solid white;
}

.konzerte_startseite h3 {margin-top: 0;}
.konzerte_startseite .datum {}
.konzerte_startseite .time {text-align: right;}
.konzerte_startseite .location {}
.konzerte_startseite .tickets {align-self: end;}
.konzerte_startseite p {margin: 0.5em 0;}


/* Konzerte (zukündtige und vergangene) */
.mod_eventlist .event.layout_full {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 3em;
	margin-top: 30px;
	padding-top: 30px;
	border-top: 1px solid var(--blau);
}
.mod_eventlist .event.layout_full.folgekonzert {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}
.mod_eventlist .event.layout_full:first-child {border-top: 0;}

.mod_eventlist .layout_full .text {display: grid; grid-template-rows: 1fr auto;}

.mod_eventlist .layout_full .location {display: inline;}
.mod_eventlist .layout_full .time {display: inline;}
.mod_eventlist .layout_full h2 {margin: 0.4em 0; color: black; }
.mod_eventlist .layout_full p {margin: 0.5em 0;}


/* Konzerte: zukünftige */
.mod_eventlist .layout_full.upcoming .datum_ort {
	margin-top: 1em; 
	padding: 0.6em 0.8em;
	background: var(--hellblau);
}

/* Konzerte: vergangene */
.mod_eventlist .event.layout_full.bygone {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
	margin-bottom: 30px;
	padding-bottom: 30px;
	border-bottom: 1px solid var(--blau);
}
.mod_eventlist .event.layout_full.bygone.folgekonzert {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}
.mod_eventlist .layout_full.bygone .text {display: block;}
.mod_eventlist .layout_full.bygone .title_teaser {margin-top: 1em;}


/* Media */
.ce_player .audio_container {
	display: flex;
	flex-direction: column-reverse;
	margin-bottom: 2em;
}
.ce_youtube {margin-top: 20px;}
.ce_youtube iframe {border: none; width: 100%; min-height: 312px;}

/* Presse */
.presse .ce_text {
	width: 46%;
	display: inline-block;
	padding: 0 2.5% 0 0;
	vertical-align: top;
}
.presse .ce_text:nth-of-type(2n) {
	padding: 0 0 0 2.5%;
}

/* Formular */

form {padding: 2em 1em 1em; background: var(--hellblau);}
form .widget {margin-bottom: 5px;}
form label {width: 10em; display: inline-block;}
form .checkbox_container label {width: unset;}
form .widget-textarea label {vertical-align: top;}
form input,
form textarea {width: calc(100% - 12em); padding: 6px; color: black; border: none; border-radius: 2px;}

form input[type="checkbox"],
form input[type="radio"] {width: unset;}

.no_label input {margin-left: calc(10em + 3px);}

form fieldset {margin: 15px 0px;}
form fieldset legend {float: left;}
form fieldset > span {display: block; margin-left: 10em;}

form fieldset fieldset {margin: 0 1em 0 0; display: inline-block;}
form fieldset fieldset legend {display: none;}
form fieldset fieldset span {margin-left: 5.5em;}

form .widget-checkbox fieldset legend,
form .widget-radio fieldset legend {float: unset;}
form .widget-checkbox.stimmlage fieldset legend {float: left;}

.widget-submit {text-align: center; margin-top: 30px;}
button {
	color: white;
	background: var(--blau);
	padding: 4px 30px;
	border: 2px solid white;
	font-size: 0.9em;
	text-transform: uppercase;
	transition: 0.3s;
}
button:hover {background: #436f8a;}

/* Newsletter-Formular (für Newsletter) */

.mod_subscribe form input,
.mod_unsubscribe form input {width: calc(100% - 12px);}

.mod_subscribe .confirm,
.mod_unsubscribe .confirm {color: green;}

/* Newsletter-Formular (für Majordomo) */

.mod_newsletterSubscribeNotificationCenter h3,
.mod_newsletterUnsubscribeNotificationCenter h3 {margin-top: 0; padding: 0.5em 0.6em 0;}
.mod_newsletterSubscribeNotificationCenter .widget-text,
.mod_newsletterUnsubscribeNotificationCenter .widget-text {display: inline-block; width: calc(100% - 170px);}
.mod_newsletterSubscribeNotificationCenter .widget-text input,
.mod_newsletterUnsubscribeNotificationCenter .widget-text input {width: calc(100% - 12px);}
.mod_newsletterSubscribeNotificationCenter .widget-submit,
.mod_newsletterUnsubscribeNotificationCenter .widget-submit {display: inline-block; margin-top: 0;}


/* Intern */
.intern #header {background: var(--hellblau);}

/* Intern: Registrieren */

.mod_registration .widget:before {display: block; margin: 2em 0 1em;}
.mod_registration .widget-password:not(.confirm):before {content: 'Wähle ein Passwort für deinen Zugang zum internen Bereich:';}
.mod_registration #ctrl_newsletter_13 {display: none;}


/* Intern: Menü */
.logout > h2 {display: none;}
.logout form {min-height: 35px; padding-top: 1em; text-align: right;}
.logout form h2 {float: left; margin: 0;}
.logout form p {display: inline-block; margin: 2px 10px 0; font-size: 0.9em; line-height: 1.3;}
.logout form .widget-submit {float: right; margin-top: 4px;}

.untermenu {margin-bottom: 2em; text-align: center;}
.untermenu.mod_navigation li.active {border-top: 0;}
.untermenu.mod_navigation li strong,
.untermenu.mod_navigation li a.trail {font-weight: bold;}

/* Intern > Termine */
.intern iframe {width: 100%; height: 600px;}

/* Intern: Downloads */
li.download-element.folder {margin-bottom: 1em; list-style: none;}
li.download-element.folder-open {margin-bottom: 2em;}
li.download-element.folder > a {font-size: 1.2em;}
li.download-element.folder > a:before {
	content: '';
	width: 1em;
	height: 1em;
	margin: 0 0.3em -0.1em 0;
	display: inline-block;
	background: url('/files/private/img/pfeil_re.png');
	background-size: 1em;
	transition: 0.5s;
}
li.download-element.folder-open > a:before,
li.download-element.folder-open > a:hover::before {transform: rotate(90deg);}

li.download-element.folder > ul { margin-top: 0.4em;}

/* Intern > Meine Daten */
.ce_table th {text-align: left;}
.ce_table td,
.ce_table th {padding: 0 15px 6px 0; vertical-align: top;}


/* Intern: Orga */

.mod_listing {margin-bottom: 5em;}
.ce_table td.verteiler {text-align: center;}

.buttons input {color: white; background: var(--blau); min-width: 100px; padding: 1px 10px; border: 0; font-size: 0.8em; text-transform: uppercase; transition: 0.3s;}
.buttons input.add:hover {background: darkgreen;}
.buttons input.del:hover {background: darkred;}

.newsletter_unsichtbar form {padding: 0; background: none;}
.newsletter_unsichtbar .widget-text,
.newsletter_unsichtbar .widget-submit {display: none;}
.newsletter_unsichtbar .confirm {display: inline-block; margin: 0 0 40px; padding: 10px; color: green; background: #ded;}


/**** FOOTER ****/

#footer nav {font-size: 0.8em; text-transform: uppercase; text-align: right; border-top: 1px solid var(--blau);}
#footer nav ul {
	margin: 12px 0 30px;
	padding: 0;
	list-style: none;
}
#footer nav li {display: inline-block; padding: 0 6px;}
#footer nav li.trail {font-weight: bold;}
#footer nav li.last {padding-right: 0;}
#footer nav li a {color: black;}
#footer li a:hover {color: var(--blau);}

#footer a.instagram img {width: 1.6em; filter: brightness(0.5);}
#footer a.instagram:hover img {filter: brightness(1);}



/*********** RESPONSIV ***********/
/*********** RESPONSIV ***********/
/*********** RESPONSIV ***********/
/*********** RESPONSIV ***********/




/*********** TABLET ***********/
@media (max-width:750px) {

html {font-size: 15px;}

.mod_navigation li {margin-left: 0.5em; margin-right: 0.5em;}

.mod_eventlist .event.layout_full {grid-template-columns: 30vw 1fr; gap: 3vw;}

} /* Ende Tablet */


/*********** TABLET SCHMAL ***********/
@media (max-width:600px) {

.konzerte_startseite h2 {padding-left: 0;}

.presse .ce_text {width: 100%; padding: 0;}
.presse .ce_text:nth-of-type(2n) {padding: 0}

.mod_listing {overflow: auto;}
.mod_listing::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
}
.mod_listing::-webkit-scrollbar-thumb {
  border-radius: 8px;
  border: 3px solid #fff;
  background-color: rgba(0, 0, 0, .3);
}


} /* Ende Tablet schmal */



/*********** MOBIL 1 ***********/
@media (max-width:500px) {

html {font-size: 14px;}
.mod_eventlist .layout_full .plakat {margin-right: 1.5em;}

.logout .login_info {display: none;}
.untermenu li {margin: 0 0.4em;}

} /* Ende Mobil 1 */



/*********** MOBIL 2 ***********/
@media (max-width:450px) {

#header .inside, #container .inside, #footer .inside {
    padding: 0 1em;
}

#header {position: relative; width: unset; min-height: 44px; top: unset; text-align: left; padding-top: 0;}
.intern #header {background: none;}
h1 {margin-top: 3vw; font-size: 8.2vw; padding-right: 30px; line-height: 1;}

/* Menu */
.menu-icon {
	width: 30px;
	height: 30px;
	display: block;
	position: absolute;
	top: 0;
	right: 1em;
	background: url("../img/menu_hamburger.png") center right no-repeat;
	background-size:30px 30px;
	color: rgba(1,179,72,.01);
	cursor: pointer;
}
.hauptmenu ul {
	display: none;
	height: unset;
	margin: 1em 0;
	padding: 0;
	text-align: center;
}

.hauptmenu li {
	display: block;
	font-size: 1.2em;
	margin: 0 0 0.7em;
	padding: 0;
}
.mod_navigation li.active {border: 0; color: var(--blau); font-weight: bold;}

form label {width: unset; display: block;}
form input, form textarea {width: calc(100% - 12px);}
form fieldset > span {margin-left: 0px;}
form fieldset > span label {display: inline-block;}

} /* Ende Mobil 2 */



/*********** MOBIL 3 ***********/
@media (max-width:340px) {

h1 {font-size: 2em; text-align: left;}
.menu-icon {
    width: 25px;
    height: 25px;
    top: 3px;
    background-size: 25px 25px;
}

} /* Ende Mobil 3 */