@charset "utf-8";

@media screen {
	/* *** Standard *** */
	html {
        height: 100%;
    }
	
	body {
		height: 100%;
		color: #333; 
		font-family: "Suhmo", Georgia, serif, Helvetica, sans-serif;
		font-size: 112.5%; /* 18px */
        font-weight: normal;
		line-height: 1.5; /* 27px Zeilenabstand */
		background-color: #efece8;
		background-position: top center;
		background-repeat: repeat;
        background-attachment: fixed;
		text-rendering: optimizeLegibility;
	}
    
    /* Typography */
    
    /* Brandon verwenden */
    h1, h3, h6,
    .akkordeon dt,
    .formzeile label,
    .roxy-reihe {
		font-family: "Brandon", Helvetica, sans-serif;
        text-transform: uppercase;
        font-weight: bold;
	}
    /* Suhmo verwenden */
    h1.suhmo, h2, h4, h5 {
        font-family: "Suhmo", Georgia, serif;
        font-weight: normal;
        text-transform: none;
	}
    
	h1 {
		font-size: 235%;
		line-height: 1;
        padding-bottom: .15em;
	}
	h2, h1.suhmo {
		font-size: 235%;
        font-weight: 100;
		line-height: 1;
        padding-bottom: .15em;
	}
	h3 {
        letter-spacing: .0555em;
        padding-bottom: .35em;
    }
	h4 {
        font-style: italic;
        padding-bottom: .7em;
    }
	h5 {
        font-weight: bold;
    }
	h6 {
		font-size: 83.33333%;
        letter-spacing: .07em;
        margin-bottom: .35em;
	}
    .small {
		font-size: 83.33333%;
		line-height: 1.5;
	}
	a,
	a:link,
	a:visited {
		color: #333;
		text-decoration: underline dotted #333;
        transition: all .3s linear 0s;
    }
    a:hover,
	a:focus,
    a:active {
        color: #000;
		text-decoration: underline solid #333;
    }
    .col_inner a,
    .col_inner ul a,
	.col_inner a:link,
	.col_inner a:visited {
        border-bottom: 1px solid #999;
        padding: 4px 0 2px 0;
		text-decoration: none;
        transition: all .3s linear 0s;
    }
    .col_inner a:hover,
	.col_inner a:focus,
    .col_inner a:active {
        border-bottom:  none;
        background-color: #afe7f4;
    }

    /* small capitals */
    .slidertext_datum,
    .kalausgabe .datum .datum_wotag,
    .kalausgabe .reihe,
    .kalausgabe .zusatz,
    .detailzusatz,
    .small-caps {
        font-family: 'Suhmo_SC';
        font-size: 77.77777%; /* 83.33333% */
        line-height: 1.5;
        text-transform:lowercase;
        letter-spacing: 0.01em;
    }
    
    /* Labels */
    /* Label inverse */
    .label_inv,
    .label_inv_sc {
        color: #fff;
		background-color: #333;
		padding: 3px 8px;
    }
    /* Label small capitals */
    .label_sc,
    .label_inv_sc {
        font-family: 'Suhmo_SC';
        font-size: 14.85px; 
        line-height: 20px;
        text-transform:lowercase;
        letter-spacing: 0.04em;        
    }

	
	/* *** Grid *********************************** */
    /* container */
    .inhalt {
		max-width: 1160px;
		margin: 0 auto;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    }
	/*  SECTIONS / ROW  */
    .row,
    .section {
		clear: both;
	}
	/*  COLUMN SETUP  */
	.col {
		display: block;
		float:left;
        margin-left: 2%;
        /*background-color: #fff;*/
    }
    .col:first-child { margin-left: 0; }
    
	/*  GROUPING  */
	.group:before,
	.group:after { content:""; display:table; }
	.group:after { clear:both;}
	.group { zoom:1; /* For IE 6/7 */ }
    
	/*  GRID OF TWELVE  */
	.col_12 { width: 100%; }
	.col_9  { width: 74.5%; }
    .col_8  { width: 66%; }    
    .col_6  { width: 49%; }	
	.col_4  { width: 32%; }	
	.col_3,
	.col_3_sm-left,
    .col_3_sm-right,
	.col_3_xs-left,
    .col_3_xs-right { width: 23.5%; }
	.col_2 { width: 15%; }
    
    /* *** Content *** */
	#header {
		background-color: #fff;
		height: 60px;
		text-align: right;
		margin: 0 0 120px 0;
	}
    #header #logo img {
        height: 40px;
        width: auto;
		margin: 10px 0;
    }

    /* Slider */
	#slider {
		position: relative;
		z-index: 500;
	}
	#slider ul,
	#slider ul li {
		overflow: hidden;
		max-height: 640px;
		padding: 0;
		margin: 0;
	}
	#slider ul li img {
		width: 100%;
		height: auto;
	}
	.bx-wrapper {
		border: none;
		-moz-box-shadow: none;
		-webkit-box-shadow: none;
		box-shadow: none;
		margin-bottom: 60px;
        background-color: transparent;
	}
	.bx-wrapper .bx-pager {
		bottom: -30px;
		padding: 0;
	}
	.bx-wrapper .bx-pager.bx-default-pager a {
		background: #fff;
		width: 15px;
		height: 15px;
		-moz-border-radius: 0px;
		-webkit-border-radius: 0px;
		border-radius: 0px;
	}
	.bx-wrapper .bx-pager.bx-default-pager a:hover,
	.bx-wrapper .bx-pager.bx-default-pager a.active,
	.bx-wrapper .bx-pager.bx-default-pager a:focus {
		background: #000;
	}
	.bx-wrapper .bx-controls-direction a,
	.bx-wrapper .bx-controls-direction a:hover,
    .bx-wrapper .bx-controls-direction a:focus {
		width: 60px;
		height: 60px;
		background-size: 100% auto;
	}
	.bx-wrapper .bx-prev,
	.bx-wrapper .bx-prev:hover {
        left: 2%;
		background: url(../_img/icons/sliderpfeil-links.png) center center no-repeat scroll;
	}
	.bx-wrapper .bx-next,
    .bx-wrapper .bx-next:hover,
    .bx-wrapper .bx-next:focus {
        right: 2%;
		background: url(../_img/icons/sliderpfeil-rechts.png) center center no-repeat scroll;
	}
    
	.slidertext {
		position: absolute;
		bottom: 10px;
		left: 100%;
		width: 86%;
		text-align: center;
        line-height: 0.95;
		padding: 0 2%;
		margin: 0 0 0 -95%;
	}
	.slidertext_titel {
		display: inline-block;
		font-size: 300%;
		background-color: #fff;
		padding: 0.185em 0.185em 0.046em 0.185em;
		margin-bottom: 2px;
	}
	.slidertext_subtitel {
		display: inline-block;
		background-color: #fff;
		padding: 0.4em 0.43em 0.25em 0.43em;
        font-style: italic;
	}
	.slidertext_datum {
		display: inline-block;
		background-color: #fff;
		padding: 0.0715em 0.43em;
		margin-bottom: 2px;
	}
	.slidertext_option {
		display: inline-block;
		margin-bottom: 2px;
	}
	.heutelabel {
		position: absolute;
		top: 0px;
		left: 12%;
		font-style: italic;
	}
    .slidercopyright {
		position: absolute;
		right: 20px;
		bottom: 5px;
        font-size: 12px;
		color: #efece8;
		text-shadow: 0 0 2px #333;
	}
    
    /* VVK-Vorschau */
    .start_vvk-col,
    .news_col {
        font-size: 88.88888%;
        line-height: 1.5;
        min-height: 330px;
    }
	.start_vvkheadline {
        border-bottom: 1px solid #333;
        padding-bottom: 5px;
	}
    .start_vvktext {padding: 18px 20px 15px;}
	a.start_programmlink {
		display: block;
		text-decoration: none;
		padding: 2px 0 2px 3.375em;
		text-indent: -3.375em;
        line-height: 1.4;
	}
	a.start_programmlink:hover {
		background-color: #efece8;
	}
    
    
	
	/* *** Akkordeon *** */
	.akkordeonrahmen {	}
	dl.akkordeon {
		padding: 0;
		margin: 0;
	}
	.akkordeon dt {
		display: block;
		letter-spacing: .0555em;
		background: #fff url(../_img/icons/arrow_down.png) 98% 50% no-repeat;
		border-top: solid 1px #333;
		padding: 0 /*20px*/;
		margin: 0;
	}
	.akkordeon dt a {
		display: block;
		text-decoration: none;
		padding: 10px 0;
	}
	.akkordeon dd {
		display: none;
		padding: 0;
		margin: 0;
	}
	
	
	/* *** Programm *** */
	#kalenderheader {
		position: relative;
		height: 70px;
		border-bottom: 5px solid #333;
		padding: 18px 0px 0px 20px;
	}
	.kalendermonat {
		font-size: 325%;
		line-height: 1;
	}
	ul#kalendernavigation {
		overflow: hidden;
		position: absolute;
		right: 20px;
		top: 22px;
		margin: 0px;
	}
	ul#kalendernavigation li {
		float: left;
		height: 50px;
        width: 50px;
		list-style-type: none;
		margin-left: 5px;
	}
	ul#kalendernavigation li.kalearrow_left a{
		background: transparent url("../_img/icons/kalpfeil-links.png") center center no-repeat scroll;
        background-size: 36px 36px;
	}
	ul#kalendernavigation li.kalearrow_right a {
		background: transparent url("../_img/icons/kalpfeil-rechts.png") center center no-repeat scroll;
        background-size: 36px 36px;
	}
	ul#kalendernavigation li.kalearrow_left a,
	ul#kalendernavigation li.kalearrow_right a {
		display: block;
		width: 36px;
		height: 36px;
        padding: 7px;
        text-decoration: none;
	}
    ul#kalendernavigation li a:hover { background-color: #efece8;}
	.kalausgabe {
		overflow: hidden;
		padding-top: 15px;
	}
	.veranstaltung {
		overflow: hidden;
		float: left;
		width: 85%;
		/* min-height: 80px; */
		padding-bottom: 15px;
	}
    .veranstaltung.border_bottom_1_ccc {
        padding-bottom: 15px ;
        margin-bottom: 15px;
    }
	.datum {
		float: left;
		width: 15%;
        text-align: center;
	}
	.datum_tag {
		display: block;
		font-weight: bold;
		font-size: 325%;
        line-height: 0.9;
	}
	.zusatz {
		position: relative;
		float: right;
		width: 40%;
	}
	.text {
		float: left;
		width: 57%;
		padding-right: 3%;
	}
	.text a {
        text-decoration: none;
       /* display: block;
        background-position: right center;*/
    }
    .text a:hover {/*
        background: #efece8 url("../_img/icons/kalpfeil-rechts.png") right center no-repeat scroll;
        background-size: 25px 25px;*/
    }
	.titel {
		display: block;
		font-size: 1.222em;
		line-height: 1.1;
		margin-top: 2px;
	}
    .kal_tipp {
        color: #3fd1fd;    
        margin-left: 2px;
    }
    .kal_tipp sup {
        font-size: .7em;
        vertical-align: .4em;
        font-weight: bold;
    }
	.reihe { }
	.beschreibung {
		margin: 2px 0px 0px 2px;
		font-size: 83.33333%;
		line-height: 1.3;
	}
	.kallabel {
		position: absolute;
		top: 0px;
		right: 0px;
	}
	a.tickets,
	a.tickets:link,
	a.tickets:visited {
		float: right;
        display: block;
        margin-right: -10px;
		width: 60px;
		height: 60px;
		text-decoration: none;
        background: #fff url("../_img/icons/tickets.png") no-repeat scroll center center;
        background-size: contain;
	}
	a.tickets:hover {
        background-color: #efece8;
    }
	
	span.theaterulm {
        position: absolute;
		bottom: 0px;
		width: 60px; height: 60px;
        background: url("../_img/icons/icn-theaterulm_fremdgeh.png") center center no-repeat;
        background-size: contain;
        margin-left: 1em;
    }
	.detailzusatz .theaterulm {
		margin-bottom: 20px;
		width: 75px; height: 75px;
}
	span.theaterulm_typo { color: #0094B2; }
	
    .vvk_col {
        margin-top: 95px;
    }
    
	/* Detail */
	#kaldetail {
		position: relative;
		background-color: #fff;
	}
	.detailhauptbild {
		position: relative;
	}
	.detailcopyright {
		position: absolute;
		right: 20px;
		bottom: 10px;
        font-size: 12px;
		color: #efece8;
		text-shadow: 0 0 3px #333;
	}
	a.detailbacklink,
    a.detailbacklink:link,
    a.detailbacklink:visited {
		display: block;
		position: absolute;
		top: 0px;
		left: 0px;
		width: 40px;
		height: 40px;
		text-decoration: none;
		background-image: url("../_img/icons/kalender.png");
        background-size: 160px;

	}
	a.detailbacklink:hover {
        width: 160px;
	}
	#kaldetail img.hauptbild {
        display: block;
		width: 100%;
		height: auto;
	}
	#kaldetailausgabe {
		padding: 40px 0;
	}
    #kaldetailausgabe > h1,
    #kaldetailausgabe > h4,
    #kaldetailausgabe > .reiner_text,
    #kaldetailausgabe > div,
    #kaldetailausgabe > ul {
        padding-left: 7%;
        padding-right: 7%;
    }
    
	.detailzusatz {
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        font-size: 83.33333%;
		overflow: hidden;
		position: relative;
        padding-top: 18px;
        margin: 2em 0 2.5em;
    }
	.detaillabel {
		display: inline-block;
	}
	a.detailtickets,
	a.detailtickets:link,
	a.detailtickets:visited {
		display: block;
		width: 80px;
		height: 80px;
		text-decoration: none;
		background: #fff url("../_img/icons/tickets.png") no-repeat scroll center center;
        background-size: contain;
	}
	a.detailtickets:hover {
		background-color: #efece8;
	}
    .vvkhinweis {
		font-size: .8666em;
        font-style: italic;
        text-transform: none;
        font-family: 'Suhmo';
        letter-spacing: normal;
    }
    
    #kaldetailausgabe .reiner_text {
        /*font-size: 111.1111%; font-weight: 300;*/
        line-height: 1.6;
        margin-bottom: 1.5em
    }
    #kaldetailausgabe .reiner_text p {
        max-width: 760px;
    }
    .detail_veranstalter {    }
    
    /* abstände + trennlinien */
	ul#medien,
	ul#dokumente,
    .galerierahmen {
		overflow: hidden;
        margin: 40px 0 0 0;
	}
	ul#medien li,
	ul#dokumente li,
    .simutabelle {
        float: left;
		list-style-type: none;
		padding: 0;
		margin: 20px 40px 20px 0;
	}
    ul#medien li:first-child {
        float: none;
        margin-right: 0;
    }

    
    /* sponsoren */
    .headline_spons {
        margin-top: 40px;
        padding-top: 10px;
    }
	ul#sponsoren,
	ul#medienpartner {
		overflow: hidden;
        margin: 0;
	}
    ul#sponsoren li,
	ul#medienpartner li {
		float: left;
		list-style-type: none;
		padding: 0;
		margin: 10px 40px 20px 0;
	}
    ul#sponsoren li img {
        display: block;
        height: 70px;
        width: auto;
        max-height: 70px;
    }
    ul#medienpartner li img {
        display: block;
        height: 40px;
        max-height: 40px;
        width: auto;
    }
	.galerierahmen {
		overflow: hidden;
	}
	.simutabelle {
		display: table;
		width: 120px;
		height: 120px;
		border: solid 1px #CCC;
	}
	.simutd {
		display: table-cell;
		vertical-align: middle;
		width: 100%;
		height: 100%;
		margin: 0px;
		padding: 0px;
	}
	.tdinnen {
		text-align: center;
		margin-left :auto;
		margin-right: auto;
	}
	
	/* *** Reiner Text *** */
	.reiner_text { }
	
	/* *** Nur Bild *** */
    .nur_bild {
		overflow: hidden;
		display: block;
        width: 100%;
	}
	.nur_bild img {
		max-width: 100%;
		height: auto;
	}
	
	/* *** Footer *** */
	#footer {
		color: #aaa;
		background-color: #333;
        margin-top: 80px;
	}
    #footer a {
		color: #fff;
        text-decoration: none;
        opacity: 0.8;
    }
    #footer a:hover {
        opacity: 1;
    }
    #footer .col {
        background-color: transparent;
        padding: 40px 0 35px;
        font-size: 100%;
    }
	#footer .social a {
      display: inline-block;
      width: 48px;
      height: 48px;
	}
	#footer .social a img {
        width: 48px;
        height: auto;
    }
   #footer .kpu_icon { padding-top: 40px; }
   #footer .kpu_icon a {
        display: inline-block;
        width: 72px;
        height: auto;
    }
   #footer .kpu_icon a img {
        width: 72px;
        height: auto;
    }
    #footer .sitemap a {
		display: block;
        padding: 1px 0;
    }
	.footer_tickets a {
		background: url(../_img/icons/footertickets.png) left top no-repeat;
        background-size: 30px auto;
        display: block;
		padding-left: 45px;
	}
	.footertext {
		text-align: center;
		border-top: solid 1px #999;
		padding: 20px 20px 10px 20px;
	}

	/* *** Bildfloat *** */
	.img_float_left {
		float: left;
		margin: 0 1.5em .5em 0;
	}
	.img_float_right {
		float: right;
		margin: 0 0 .5em 1.5em;
	}
	
	/* *** Spaltentext *** */
	.text_zwei_spalten,
	.text_zwei_spalten_xs {
		-moz-column-count: 2;
		-webkit-column-count: 2;
		column-count: 2;
		-moz-column-gap: 2.5em;
		-webkit-column-gap: 2.5em;
		column-gap: 2.5em;
        vertical-align: baseline;
    }
	
	/* *** Textausrichtung *** */
	.align_center { text-align: center;	}
	.align_right { text-align: right; }
	
	/* *** Hintergrundfarbe *** */
	.bg_ccc { background-color: #bbb; }
	
	/* *** Border *** */
	.border_bottom_1_ccc { border-bottom: solid 1px #ccc; }
    .border_top_1_ccc { border-top: solid 1px #ccc; }
	
	/* *** Padding *** */
    .pad_0_7perc { padding-left: 7%; padding-right: 7%; }
	.padding_10 { /*padding: 17px 20px 8px 20px;*/ }
    .padding_0_10_0_0 { padding: 0 10px 0 0; }
	.padding_0_10 { padding: 0 10px;}
    .padding_0_20 { padding: 0 20px;}
	.padding_0_0_0_25 { padding: 0 0 0 25px;}
	
	/* *** Margin *** */
	.margin_10_0 { margin: 10px 0; }
	.margin_20_0 { margin: 20px 0; }
	
	/* *** Overflow *** */
	.overflow_hidden {
		overflow: hidden;
	}
	/* hidden */
	.hidden {display: none; visibility: hidden;}
	/* *** Clearing *** */
	.clearing {
		clear: both;
		overflow: hidden;
		height: 0px;
	}
	.clearing_left {
		clear: left;
		overflow: hidden;
		height: 0px;
	}
	.clearing_right {
		clear: right;
		overflow: hidden;
		height: 0px;
	}
	.clearing_block {
		clear: both;
		overflow: hidden;
		display: block;
		height: 0px;
	}
	
	/* *** Spacer *** */
	.spacer_5 { height: 5px; overflow: hidden; }
	.spacer_10 { height: 10px; overflow: hidden; }
	.spacer_15 { height: 15px; overflow: hidden; }
	.spacer_20 { height: 20px; overflow: hidden; }
	.spacer_25 { height: 25px; overflow: hidden; }
	.spacer_40 { height: 40px; overflow: hidden; }
	.spacer_80 { height: 80px; overflow: hidden; }
	.spacer_100 { height: 100px; overflow: hidden; }

}