@import url('fonts/InriaSans/stylesheet.css');
@import url('fonts/ProtestStrike/stylesheet.css');

:root {
    --bs-font-sans-serif: "Inria Sans";
    --bs-font-heading-family: "Protest Strike", sans-serif;
    --bs-font-heading-weight: 400;
    
    --bs-background-wood: linear-gradient(90deg, var(--bs-dark) 30%, var(--wood-80));
}
 
body
{
    margin: 0px;
    font-family: var(--bs-font-sans-serif), sans-serif;
    font-weight: 400;
    font-size: 14px;
    background-color: var(--bs-body-bg);
}

a:hover { text-decoration: underline; }
a {text-decoration: none; color: inherit;}
.editor-content a {text-decoration: underline;}

h1, h2, h3 {
    font-family: var(--bs-font-heading-family);
    font-weight: var(--bs-font-heading-weight);
    line-height: 1;
    color: var(--bs-dark);
}

.hidden { display: none; }

img { max-width: 100%; }


#site{
	position: relative;
}
#site > .fw {
    margin-left: calc(-1 * var(--global-gap));
    margin-right: calc(-1 * var(--global-gap));
}   

.inner-cont {
    width: auto;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.top_msg{
    display: block;
    padding: 1.5em 1em; 
    background-color:#000000; 
    color:#ffffff ;
    text-decoration: none;
    border-top: 3px solid #111111;
    transition: all 0.3s;    
}
.top_msg:hover {
    background-color:var(--bs-primary); 
    text-decoration: none;
}

.top_msg .title{
    margin-top: 0;
}
.top_msg > :first-child {
    margin-top: 0;
}
.top_msg > :last-child {
    margin-bottom: 0;
}


.burger-btn {
    font-size: 24px;
    width: 1em;
    height: 1em;
    padding: 0;
    display: inline-block;
}
.burger-btn > .bar {
    display: block;
    height: 0.2em;
    margin: 0.2em 0 0 0;
    background-color: #111;
}

.hyphens-auto {
    hyphens: auto;
}

/*
*/
.page-header {
    border-bottom: 5px solid var(--bs-border-color);
}

.page-header .navbar-nav {
    --bs-nav-link-font-size: 1.2em;
}
.page-header .navbar-brand {
    padding: .1em 0;
}
.page-header .navbar-brand img {
    width: auto;
    height: 2.5em; 
    margin: 0 auto;
}
.page-header .social-links {
    flex-flow: row nowrap;
}

.navbar .search-input {
    max-width: 11em;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.navbar .nav-link {
    text-decoration-color: transparent;
    transition: all 1s;    
}
.page-header .nav-link
{
    text-transform: uppercase;
}

.navbar-nav .nav-link.active, 
.navbar-nav .nav-link:hover,
.subnavi .nav-link.active, 
.subnavi .nav-link:hover
{ 
    text-decoration: underline; 
    text-decoration-thickness: .15em;
    text-decoration-color: inherit;
    color: inherit !important;
}

.subnavi .nav-link {
	color: inherit;
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--bs-dark);
    --bs-nav-link-color: var(--bs-dark);
    --bs-nav-link-hover-color: #000;
}


.head, .page-title
{
	font-size: 2rem;
	padding: .2em .5em;
	color: var(--bs-body-bg);
	background-color: var(--bs-dark);
	background-image: var(--bs-background-wood);
	margin: 0;
}
.head * {
    color: inherit;
}
h2.head, h3.head {
	font-size: 1.3em;
	font-weight: normal;
}

.top-banner {
    border-top: 3px solid #111111;
    padding-top: .4em;
}
.top-banner img{
    width: 100%;
}

.badge.show-term {
    background-color: var(--bs-purple);
    color: var(--bs-dark);
}


.pnl-figure {
    padding: 0;
    margin: 0;
}
.pnl-figure img {
    width: 100%;
}
.pnl-cont {
    padding: 1em;
    background-color: var(--bs-light);
}
.grid-item .pnl-cont .title{
    font-size: 1.3em;
    margin: 0 0 .5em 0;
}

/* teaser */
	
	.slick-dotted.slick-slider.slick-slides {
	    margin-bottom: 0;
	}
	
    .slick-slides .slick-dots {
        color: #999;
        position: relative;
        bottom: 0;
        padding: 0 1em 1em 1em;
    }
    .slick-slides .slick-dots li button::before { 
        color: #000; 
        content: '◼︎';
        font-size: 12px;
    }
    
    .slick-slides .slick-arrow::before { 
        color: var(--bs-dark);
    }
    .slick-slides .slick-arrow {
        display: none !important;
    }
    /*
    */
	
    .slick-slides .slick-list {
        margin-left: -10px;
        margin-right: -10px;
    }
    
    .slick-slides .slot {
        padding: 0 var(--global-gap);
        min-height: 200px;
    }
	#teaser .article
    {
        background-color: #000;
        display: block;
        overflow: hidden;
        position: relative;
        width: 100%;
    }

	#teaser .article .teaser-img {
	    width: 100%; 
	    display: block;
	    margin-top: 2.2em;
	    aspect-ratio: 1 / 1;
	}
	#teaser .article .teaser-cont
    {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
    }
	#teaser .article .teaser-text
    {
        background-color: var(--bs-purple);
        color: var(--bs-dark);
        padding: 1em 1em 0 1em;
        line-height: 1.2;
        min-height: 3.4em;
    }
        
    #teaser .article .teaser-cont:after {
        display: block;
        content: '';
        width: 0;
        height: 0;
        border-top: 20px solid var(--bs-purple);
        border-right: 300px solid transparent;
    }
    
    #teaser .article .teaser-cont .teaser-title
    {
        margin: 0;
        font: inherit;
    }
    
    #teaser .article.teaser-banner .teaser-cont .teaser-title,
    #teaser .article .teaser-cont .teaser-date
    {
        font-family: var(--bs-font-heading-family);
        font-weight: var(--bs-font-heading-weight);
    }

    #teaser .article.konzert .teaser-text,
    .bg-konzert
    {
        background-color: var(--bs-yellow) !important;
    }
    #teaser .article.konzert .teaser-cont:after
    {
        border-top-color: var(--bs-yellow) !important;
    }

    #teaser .article.tanz .teaser-text,
    .bg-tanz
    {
        background-color: var(--bs-green) !important;
    }
    #teaser .article.tanz .teaser-cont:after
    {
        border-top-color: var(--bs-green) !important;
    }

    #teaser .article.literatur .teaser-text,
    .bg-literatur
    {
        background-color: var(--bs-pink) !important;
    }
    #teaser .article.literatur .teaser-cont:after
    {
        border-top-color: var(--bs-pink) !important;
    }

    #teaser .article.comedy .teaser-text,
    .bg-comedy
    {
        background-color: var(--bs-teal) !important;
    }
    #teaser .article.comedy .teaser-cont:after
    {
        border-top-color: var(--bs-teal) !important;
    }

    #teaser .article.live-podcast .teaser-text,
    .bg-live-podcast
    {
        background-color: var(--bs-blue) !important;
    }
    #teaser .article.live-podcast .teaser-cont:after
    {
        border-top-color: var(--bs-blue) !important;
    }

    #teaser .article.spiel .teaser-text,
    .bg-spiel
    {
        background-color: var(--bs-orange) !important;
    }
    #teaser .article.spiel .teaser-cont:after
    {
        border-top-color: var(--bs-orange) !important;
    }

    #teaser .article.markt .teaser-text,
    .bg-markt
    {
        background-color: var(--bs-peach) !important;
    }
    #teaser .article.markt .teaser-cont:after
    {
        border-top-color: var(--bs-peach) !important;
    }

    #teaser .article.party .teaser-text,
    .bg-party
    {
        background-color: var(--bs-creme) !important;
    }
    #teaser .article.party .teaser-cont:after
    {
        border-top-color: var(--bs-creme) !important;
    }

    #teaser .article.workshop .teaser-text,
    .bg-workshop
    {
        background-color: var(--bs-lime) !important;
    }
    #teaser .article.workshop .teaser-cont:after
    {
        border-top-color: var(--bs-lime) !important;
    }
    

/* 
KALENDER
-------------------------------------------------- */ 

.kalender_monat
{
	text-align: center;
	text-align: center;
	font-size: 1em;
	padding: 1.1em 0;
	min-height: 8em;
}
.kalender_monat a{color: #111111;}
.kalender_monat a:visited{color: #777777;}
.kalender_monat .kal_monat_kopf{
	/* font-weight: bold; */
	margin: 0 1.1em 1.1em 1.1em;
}
.kalender_monat .kal_woche{height: 2em; margin: 0 auto;}
.kalender_monat .wt{
	width: 14.2%;
	height: 2em;
	float: left;
	text-align: center;
	vertical-align: middle;
	color: #aaa;
}
.kalender_monat .wt_outside { display:none }
.kalender_monat .wt_va {font-weight:bold}
.kalender_monat .wt a {
    color: var(--bs-dark);
}
.kalender_monat .wt_va a  .wt_active{ 
    background-color: var(--bs-dark); 
    color: var(--bs-light);
}

.kalender_monat {
    padding: .5em;
    display: block;
    min-width: 14em;
}
.kalender_monat .btn_kal {width: 1.5em; text-align: center; display: block; min-height: 5px;}
.kalender_monat .btn_kal.prev {float: left;}
.kalender_monat .btn_kal.next {float: right;}
.kalender_monat a.btn_kal{color: #aaa;}
.kalender_monat a.btn_kal:hover{color: #222;}

/* 
PROGRAMM
-------------------------------------------------- */ 

.head2 { 
    padding: calc(var(--global-gap-y)/2) var(--global-gap-x);
}

.prog-list {
    padding: 0;
    margin: 1em auto;
    max-width: 400px;
    list-style: none;
}


.prog-list .prog-month
{
	margin:  .4em 0px .4em 0px;
}
.prog-list .prog-month .month {
    font-size: 1rem;
}
.prog-list .prog-month:first-child{margin-top: 0;}

.prog-list .date {
    margin: .5em 0;
    font-family: var(--bs-font-heading-family);
    font-weight: var(--bs-font-heading-weight);
}



.prog-list .more-msg {
    color: var(--bs-primary); 
    text-align: center;
}

.prog-list .prog-day {
    margin-bottom: 3em;
}

.prog-list .shows > .show {
    background-color: var(--wood-40);
}

.prog-list .show-content
{
    padding: 1em;
    margin: 0px;
}
.prog-list .show-promo
{
    margin-bottom: 1em;
}

.prog-list .shows > .show:not(:first-child) {
    margin-top: .5em;
}
.prog-list .date {
	font-size: 1.7em;
	line-height: 1.3;
}


.prog-list .show-img { 
    width: 100%;
    aspect-ratio: 1; 
}

.prog-list .va_meta .term { 
    display: inline-block; 
    margin: .2em 0; 
    padding: 0 .2em; 
    font-weight: bold;
}
.prog-list .va_meta .term:first-of-type {padding-left: 0;}
.prog-list .va_meta .term +term::before {content:' | ';}

.prog-list .va_location {  /* margin-bottom: 3px; */}
.prog-list .va_uhrzeit { display: inline; }
.prog-list .va_eintritt {display: inline; padding-left: 5px;}

.prog-list .titel{	font-size: 1em;}
.prog-list .va_OT{ font-size: .8em; }
.prog-list .show-title {
    font-weight: bold; 
    font-size: 1.3em; 
    line-height: 1;
    margin: .3em 0; 
}

.prog-list .vp_titel { font-weight: bold; }

.prog-list .show-content.heute .show-title{ 
    font-size: 2em; 
    display: block;
}
.prog-list .show-content.term_21 .show-title,     /* sehr wichtig */
.prog-list .show-content.term_22 .show-title      /* wichtig */
{ 
    font-size: 1.7em; 
    display: block;
}
    
.prog-list .show-content.sehr.wichtig .show-title{ font-size: 2.2em;}

/*
.prog-list .reihe_le
{
	padding: 0px 10px 10px 0px;
	border-bottom: 1px solid var(--bs-primary);
	margin-bottom: 10px;
}
.prog-list .reihe_le .reihe_titel
{
	padding-left: 1.1em;
	font-size: 1em;
	font-weight: bold;
}
*/
.reihe_txt
{
	padding: .4em .7em .7em 1.1em;
	margin: 0px;
	font-size: .8em;
}


.programmtipp{margin-bottom: 20px;}
.promo_links a{font-size: 10px; text-decoration: underline; padding-left: 3px;}

.btn_tickets, .lbl-tickets
{
    display: block;
    float: right;
    padding: .15em .4em;
    text-align: center;
    margin: 0 0 .4em 1px;
    text-transform: uppercase;
}
.btn_tickets .icon-ticket:before { margin-left: 0; }

.lbl-tickets { background-color: #eee; width: auto; color: #000;}
.lbl-tickets.ausverkauft { background-color: #f00; width: auto; color: #fff;}

.prog-list .lbl-tickets {
    font-size: .7em;
}

.prog-list .lbl.ausverkauft
{
    float: right;
    text-transform: uppercase;
}

/* 
PROGRAMM VA
-------------------------------------------------- */ 

.show-details {margin: 3em 0; border-top: 3px solid var(--bs-primary);}
.show-details:first-child {margin-top: 0; border: none;}
.show-details:only-of-type {margin: 0; }


.show-details .date .wochentag
{
	font-weight: bold;
}

.show-details .venue-name {
    display: block; 
    font-size: 1.5em;
}

.show-details .link_icon {margin: 0px 5px 0px 0;}

.show-header,
.big-header 
{
}
.show-header .show-title,
.big-header .title
{
    font-size: 3rem;
    margin: 0;
    color: var(--wood-100);
}
.show-header .badge + .reihe {
    padding-left: .3em;
}

.booking-header {
    background-color: var(--wood-100) !important;
	background-image: var(--bs-background-wood);
    color: var(--wood-20);
}

.booking-header .booking-title {
    font-size: 2.4rem;
    margin: 0;
    color: inherit;
}


.pager {
    padding: calc(var(--global-gap-y)/2) var(--global-gap-x);
    margin-top: 1em;
    background-color: transparent;
}

.pager .btn-pager {
    
}



.media-thumbnail {
    display: inline-block;
}
.media-thumbnail img {
    max-height: 6em;
    width: auto;
    height: auto;
}

figure {
    position: relative;
}
figure.w33 {
	margin: 2px 15px 5px 0px;
	float: left;
	display: block;
	max-width: 33%;
}
figure figcaption {
}
figure figcaption.caption-inline {
    font-size: .8em;
    padding: .1em .5em;
    position: absolute;
    left: .5em;
    bottom: .5em;
    color: #fff;
    background-color: rgba(0,0,0, .2);
}
figure img {
    width: 100%;
}

.privacy-notice
{
    background-color: rgba(0,0,0,0.7);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: 0 1em;
}
.privacy-notice a
{
    color: inherit;
    text-decoration: underline;
}





.infoblock ul, .infoblock li{list-style: none;}
.infoblock ul {padding: 0;}

.infoblock p {margin: .4em 0 1.1em 0; line-height: 1.5em;}
/*
.infoblock .team-member {margin: 1em 0;}
.infoblock .col {min-height: 1px;}
	.infoblock .img_col {width: 30%; }
	.infoblock .txt_col {width: 60%; margin-left: 10%;}
.infoblock .txt_col h3{ margin-bottom: 0.5em;}
*/


#banner_scheunecafe {height: 2.5em; background-color: var(--bs-primary);}
#banner_scheunecafe #btn_scheunecafe, #banner_scheunecafe #tel_scheunecafe{display: block; float:left; width: 50%; }
	#btn_scheunecafe
    {
        height: 2.5em;
        background-repeat: no-repeat;
        background-color: #000;
        background-image: url(gfx/scheunecafe-t1.png);
        background-position: center center;
    }
	#tel_scheunecafe { margin: 0; padding: 7px 0 7px 0; text-align: center;}


.liste_info .q {/* font-style: italic; */ color: var(--bs-primary);}

#impressum a { color: #111111; }

.article .article-meta {margin-top: 1em;}

.article { padding-top: 15px;}
.article.compact a { text-decoration: none;}

.article-text
{
    line-height: 1.5em;
    hyphens: auto;
}

.article-text a,
.editor-content a
{ 
    text-decoration: underline; 
}

.article-cont iframe {
  width: 100%;
  height: 400px;
}

.geschichte img, 
.article-cont .header_img.align-left
{
    display: block; 
    float:left; 
    margin: 1px 20px 5px 0; 
    max-width: 40%; 
    height: auto;
}
.img_gallery {
    margin: 1em 0;
    background-color: #eee;
}
.img_gallery .gallery_thumbnail {
    display: block; 
    float:left; 
    margin: 0; 
    max-width: 33%; 
    height: auto;
}

.blog-header { padding-top: 15px; }

@media all and (min-width: 600px) { 
    .prog-list {
        max-width: 100%;
        margin: 0;
    }
    .prog-list > li 
    {
        /* 
        border-top: 4px solid #fff;
        padding: calc(var(--global-gap-y)/2) var(--global-gap-x);
         */
        padding-top: calc(var(--global-gap-y)/2);
        padding-bottom: calc(var(--global-gap-y)/2);
    }
    .prog-list > .prog-month {
        padding: calc(var(--global-gap-y)/2) var(--global-gap-x);
    }

    /*
    .prog-filter .nav-item {
        background-color: #fff;
    }
    .prog-filter .nav-item .nav-link {
        padding-top: .2em;
        padding-bottom: .2em;
    }
    */
    
    .prog-list .prog-day,
    .prog-list .prog-day .shows > .show
    {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    .prog-list .prog-day .shows > .show {
        flex-flow: row nowrap;
    }
    
    .prog-list .prog-day {
        flex-flow: column nowrap;
    }

	.prog-list .img-col {
        width: 8em;
        flex-grow: 0;
        flex-shrink: 0;
		min-height: 1em;
	}
    .prog-list .prog-day .shows > .show {
        background-color: transparent;
    }

    .prog-list .show-content
    {
        padding: 0;
        margin: 0px;
        flex-grow: 1;
    }
    .prog-list .show-promo
    {
        margin-bottom: 0;
        padding-left: 1.5em;
    }
    .prog-list .show-tickets
    {
        padding: 0 1em;
    }
    .prog-list .show-promo,
    .prog-list .show-tickets
    {
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
    }
}


@media all and (max-width: 767.999px) {
    #mainMenu.navbar-collapse .nav-item,
    #mainMenu.navbar-collapse .dropdown-item
    {
        text-align: center;
    }
    #mainMenu .social-links {
        justify-content: space-evenly;
    }
    #mainMenu .navbar-nav {
        margin-top: 1em;
    }
    
    .navbar-collapse .dropdown-menu {
        background-color: transparent;
        padding: 0;
        border: none;
    }
    
}

@media all and (min-width: 768px) { /* MD */
    
    .hidden-sm {
        display: none;
    }
    .d-sm {
        display: initial;
    }
    

    .page-header .navbar-nav
    {
        --bs-nav-link-padding-y: 0;
    }
    
        
    .social-link [class^="icon-"]::before {
        margin-right: 0;
    }
    .social-links .nav-link {
        padding-left: 0.1em !important;
        padding-right: 0.1em !important;
    }
    
    
    .article.compact .article-cont .header_img.align-left {
        max-width: 20%;
        margin: 0 1em 0 0;
        float: left;
    }

    .article-text
    {
        text-align: justify;
    }

    .article-text, .fs-lg-big {
        font-size: 1.2em;
    }

    .prog-list .prog-day {
        flex-flow: row nowrap;
        margin-bottom: calc(var(--global-gap-y)/2);
    }

	.prog-list .date {
        flex-basis: 12%;
        flex-grow: 0;
        flex-shrink: 0;
		min-height: 1em;
		text-align: center;
		font-size: 1em;
        margin-top: 1.2em;
        font-family: inherit;
        font-weight: inherit;
    }
    .prog-list .date *
    {
        display: block;
        font-size: 0.75em;
        text-transform: uppercase;
    }
    
    .prog-list .date .today {
        font-family: var(--bs-font-heading-family); 
        font-weight: var(--bs-font-heading-weight); 
        font-size: 1.8em;
        line-height: 1;
        margin-top: 1em;
    }
    
    .prog-list .date .month-day {
        font-family: var(--bs-font-heading-family); 
        font-weight: var(--bs-font-heading-weight); 
        font-size: 3em;
        line-height: 1;
    }
    .prog-list .date .sep {
        display: none;
    }
   
    
	.prog-list .shows {
        flex-grow: 1;
		min-height: 1em;
	}

    .prog-list .prog-day .shows > .show {
        flex-wrap: nowrap;
    }
    .prog-list .show-content {
        flex-grow: 1;
    }

}
@media all and (max-width: 949.999px) {
    
    .show-header .show-title, 
    .big-header .title 
    {
        hyphens: auto;
    }

	.article iframe {width: 100%; height: 300px;}

}

@media all and (min-width: 950px) {
    body {
        font-size: 16px;
    }
	
	.fs-md-big { font-size: 1.3em; }	
	
	/*
	#kopf {
	    display: flex;
	    flex-flow: row nowrap;
	    justify-content: space-between;
	    align-items: end;
	}
	
    #kopf .btn_home {
	    background-position: right bottom;
		flex-basis: 33%;
		flex-grow: 0;
		flex-shrink: 1;
        height: 58px;
        width: 100%;
        position: relative;
        left: 0;
    }
    */
	
    #navi {	
		flex-basis: 66%;
		flex-grow: 1;
		flex-shrink: 0;
	    margin: 0 2% 4px 0px;
	    padding: 0 10px;
        border-top: 0;
    }

    #navi li.hidden-md {
        display: none;
    }
    
    
    figure.portrait {
        margin-right: 1em;
        display: block;
        float: left;
        max-width: 30%;
    }

    .pager {
        padding: 0;
        margin: 0;
        background-color: transparent;
    }
    .pager .btn-pager
    {
        position: fixed;
        top: 50vh;
        margin-top: -1.5em;
        font-size: 1.5em;
        width: 1.3em;
        text-align: center;
        display: block;
        z-index: 1;
        background-color: var(--bs-dark);
        color: var(--bs-light);
        box-shadow: 0 0 0 1px var(--bs-body-bg);
    }
    .pager .btn-pager .lbl
    {
        display: none;
    }
    .pager .btn-pager:hover {
    }
    .pager .btn-pager.pager-prev
    {
        left: 0em;
        border-radius: 0 3px 3px 0;
    }
    .pager .btn-pager.pager-next
    {
        right: 0em;
        border-radius: 3px 0 0 3px;
    }
}
@media all and (min-width: 1200px) {
    body {
        font-size: 17px;
    }
	#site{
		/*
		width: 90%;
		max-width: 1240px;
		margin-left: auto;
		margin-right: auto;
		*/
	}

    .article-text,
	.fs-lg-big { font-size: 1.3em; }
	
    #navi
    {
        font-size: 1.1em;
    }	
	#navi li.d-lg {
        display: inline-block;
    }
    
 
	.prog-list .img-col {
        width: 9em;
	}

    .prog-list .prog-month .month,
    .prog-list .show-title 
    {
      font-size: 1.7rem;
    }  
    .prog-list .show-content.term_21 .show-title, .prog-list .show-content.term_22 .show-title {
      font-size: 2.2rem;
    }  
    
}

@media all and (min-width: 1440px) {

    .main-content {
        position: relative;
    }
    
    
    .prog-list .date {
        margin-top: 3em;
    }

	.prog-list .img-col {
        width: 12em;
	}

    .prog-list .prog-month .month,
    .prog-list .show-title 
    {
      font-size: 2rem;
    }  
    .prog-list .show-content.term_21 .show-title, .prog-list .show-content.term_22 .show-title {
      font-size: 2.5rem;
    }  
    
    .pager .btn-pager
    {
        width: 2em;
        font-size: 3em;
        text-align: center;
        background: none;
        box-shadow: none;
        color: inherit;
    }

}