/* Contao Open Source CMS, (c) 2005-2015 Leo Feyer, LGPL license */
body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li{float:left}.ce_gallery>ul li.col_first{clear:left}.float_left{float:left}.float_right{float:right}.block{overflow:hidden}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
/* Contao Open Source CMS, (c) 2005-2015 Leo Feyer, LGPL license */
@media(max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.ie7 img{-ms-interpolation-mode:bicubic}.ie8 img{width:auto}
/* Swipe 2.0, (C) Brad Birdsall 2012, MIT license */
.content-slider{overflow:hidden;visibility:hidden;position:relative}.slider-wrapper{overflow:hidden;position:relative}.slider-wrapper>*{float:left;width:100%;position:relative}.slider-control{height:30px;position:relative}.slider-control a,.slider-control .slider-menu{position:absolute;top:9px;display:inline-block}.slider-control .slider-prev{left:0}.slider-control .slider-next{right:0}.slider-control .slider-menu{top:0;width:50%;left:50%;margin-left:-25%;font-size:27px;text-align:center}.slider-control .slider-menu b{color:#bbb;cursor:pointer}.slider-control .slider-menu b.active{color:#666}
@font-face {
  font-family: 'DroidSerif';
  src:
       url("../../files/css/DroidSerif-Regular.ttf") format('truetype');

}
@font-face {
  font-family: 'OpenSans';
  src:
       url("../../files/css/OpenSans-Regular.ttf") format('truetype');

}
@font-face {
  font-family: 'OpenSansBold';
  src:
       url("../../files/css/OpenSans-Bold.ttf") format('truetype');

}
html{box-sizing: border-box;background: #f7e321;margin: 0;padding: 0}
html *, html *:after, html *:before{box-sizing: inherit;margin: 0; padding: 0}
body{counter-reset:texte; overflow-x: hidden; display: flex; flex-direction: column; min-height: 100vh}
#container{flex:1}
body, input, textarea, option{color:#000; font-family: "DroidSerif","Times New Roman", serif; font-size: 16px; line-height: 1.6em;}
header, footer, .topline{background: #000; color:#fff;}
header .inside > *,footer .inside,.topline ul, .mod_article > .inside, #subnav .inside, .margined{max-width: 1300px; margin: 0 auto; padding: 0 20px}
header{font-family: "Open Sans", "Trebuchet MS", sans-serif; text-align: center; border-bottom: 1px solid #fff; z-index:600; width: 100%}
header .verwaltung{position: absolute; left:20px; top:50px}
header.active .verwaltung{top:10px}
.i-block{display: inline-block !important} .d-block{display: block !important} .inline{display: inline !important}
.fulliner{width: auto !important}
.clearit, .clr{clear: both}
.clearfix:after{content:""; display: table; clear: both}
.i-block.left h2,.i-block.right h2{text-transform: uppercase; text-align: left}
.t-left{text-align: left !important} .t-center{text-align: center !important}
.upper{text-transform: uppercase} .no-transform{text-transform: none}
h1,h2,h3,h4,h5,h6, button, .button{font-family: "OpenSans", "Trebuchet", sans-serif; text-align: center;line-height:1.25em}
h1,h2,h3,h4,h5,h6{font-family: "OpenSansBold", "Trebuchet", sans-serif;}
.sans{font-family: "OpenSans", "Trebuchet", sans-serif; }
.serif{font-family: "DroidSerif","Times New Roman", serif !important;}
.italic{font-style: italic} .bold{font-weight: 700}
.plain{font-weight: 500 !important}
.bigga{font-size: 1.2em}
.no-bullets, .no-bullets li{list-style: none}
.no-border{border: none}
.none, .nodisp{display: none !important}
.justnone{display:none}
.b{font-weight: 700} .n{font-weight: 500 !important}
.blacklink a,a.blacklink, a.blacklink:hover,.blacklink a:hover, #right a.blacklink{color:#000; text-decoration: underline}
.pointer{cursor: pointer}
.flex{display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex}
.colflex{-webkit-flex-direction:column; -ms-flex-direction:column; flex-direction: column}
.colreverse{-webkit-flex-direction:column-reverse; -ms-flex-direction:column-reverse; flex-direction: column-reverse}
.flexgrow{-ms-flex: 1 0 auto;-webkit-flex-grow: 1;flex-grow: 1}
.aligncenter{-ms-flex-align:center;-webkit-align-items: center;align-items: center}
.alignend{-ms-flex-align:end;-webkit-align-items: flex-end;align-items: flex-end}
.flexwrap{-ms-flex-wrap: wrap;-webkit-flex-wrap: wrap;flex-wrap: wrap}
.justifybetween{-ms-flex-pack: space-between;-webkit-justify-content: space-between;justify-content: space-between;}
.justifycenter{-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;}
.self-end{-ms-flex-item-align:end; -webkit-align-self:flex-end; align-self:flex-end}
.relative{position: relative} .abs{position: absolute}
.w100{width:100% !important}
.visually-hidden{position: absolute; left: -10000px; clip:rect(0,0,0,0); overflow: hidden;}
.virtualRadio{position: relative; padding-left: 2em; cursor: pointer}
.virtualRadio::before{content: ''; position: absolute; left:0; top:0; border: 1px solid; border-radius: 50%; width: 1.6em; height: 1.6em; text-align: center}
#schoolAT:checked ~ fieldset label[for='schoolAT']::before, #uniAT:checked ~ fieldset label[for='uniAT']::before, #schoolNO:checked ~ fieldset label[for='schoolNO']::before, #schoolAUSLAND:checked ~ fieldset label[for='schoolAUSLAND']::before{color: green; content:'✓'; font-weight: 700}
#schoolAT:checked ~ div select optgroup:last-child option:first-child{display: none}
#schoolAUSLAND:checked ~ div #ctrl_country option:first-child{display: none}
.autorregform .countryselwrap, .autorregform .schoolproper,.autorregform .schoolproper + p, .autorregform #otherLocation{position: absolute; top:-10000px; left:-100000px; max-height: 0}
#otherLocation{height:39.6px}
.showCNTRY:checked ~ .countryselwrap, #schoolAT:checked ~ div .schoolproper, #schoolAT:checked ~ div .schoolproper + p, .showADDY:checked ~ div #otherLocation{position: static; max-height: none;}

.autorregform .widget-password:not(.confirm){margin-top: 1em}
.cb-wrap{-webkit-box-align:start;-ms-flex-align:start;-ms-grid-row-align:flex-start;-webkit-align-items:flex-start;align-items:flex-start}
.cb-wrap input{min-width: 13px; margin-right: 0.5em; margin-top: 0.2em}
.social a{text-indent:-10000px;width: 38px; height:38px;
    overflow: hidden;
    display: block;
    margin-left:15px; background:url("../../files/css/bgi/social3col.png") no-repeat left center;border: 1px solid #252525;
    border-radius: 5px;}
    .social .ig{display: none}
    .ig a{background-position:right}
    .fb a{background-position:center}
    .topline li.fb{display: none}
.topline li,nav li{list-style: none; display: inline-block}
.h2{font-size: 1.5em}
a{color:#fff; text-decoration: none}
a:hover, nav span:hover{color: #f7e321; cursor:pointer}

.txtlink{color:#000; text-decoration: underline}
.txtlink:hover{color:#fff}
.untendick{color:#000; display:inline-block;border-bottom:3px solid transparent }
.textlisting .untendick{display: inline}
.untendick:hover{color:#000;border-color: black}
#main .textlisting h3{text-align: left; text-transform: none; font-family: "DroidSerif","Times New Roman", serif;/* white-space: nowrap; overflow: hidden; text-overflow: ellipsis*/}
.textlisting h3.mark a:after{border:2px solid; display: inline-block; width:23.4px; height:23.4px; border-radius:50%; text-align: center; margin-left:5px; line-height: 20px }
.textlisting,#switchtextlist2 {
  counter-reset: texteJury;                      /* Setzt den Abschnittszähler auf 0 */
}
.textlisting h3.mark::before, .jury #switchtextlist2 li:not(:first-child)::before{position: static; /*counter-increment: texteJury; content:counter(texteJury)".) "*/}
.jury.datum h3::before,.jury #switchtextlist2.datum li:not(:first-child)::before{content:attr(data-cnt)".) "}

.textlisting h3.vut a:before{display: inline-block; width:14px; height:14px; border-radius:50%; text-align: center; margin-right:5px; line-height: 13px;  font-size: 12px;position: relative;bottom: 3px }
.textlisting h3.mark.vu-2 a:after{border-color:#e32}
.voting .voting, .voting-1 .voting-1, .jury-voting-1 .jury-voting-1, .voting-2 .voting-2, .jury-voting-2 .jury-voting-2,.novoting .novoting, .noeinreichen .noeinreichen{display:block}

.voting .jury.titel .textlist li:before{counter-increment: texte; 
  content: counter(texte)".";  position:absolute; left:-3em; font-weight:700; text-align:right; width:2em}
  .voting .seitennav .jury.titel li:not(:first-child):after{counter-increment: texte; 
  content: counter(texte)".";  position:absolute; left:-2.1em; font-weight:700; text-align:right; width:2em; top:11px}
.mk-0 a:after{content:"?"; background: #fff}
.mk-1 a:after{content:"-"; background: #e32}
.mk-2 a:after{content:"~"; background: #f78005}
.mk-3 a:after{content:"+"; background: #379116}
.vu-0 a:before{background: #fff; content:"?"}
.vu-1 a:before{content:"✔";background: transparent}
.vu-2 a:before{background: #e32;content:"-";color:#e32; }
.textlisting:not(.vorkoster) h3.vut a:before{content: none}
#vkinterface{border-top:2px solid; padding-top:0.2em}
#juryinterface + #vkinterface{margin-top: 1em}
option.mk-0, select.mk-0, option.vk-0, select.vk-0, option.vk-1, select.vk-1{background: #fff}
option.mk-1, select.mk-1, option.vk-2, select.vk-2{ background: #e32}
option.mk-2, select.mk-2{background: #f78005}
option.mk-3, select.mk-3{background: #379116}
.jury .seitennav .vt-2.mk-0 a:after{display: inline-block; border: 1px solid red}
.textlisting {border-top:1px solid; padding-top:50px; position: relative; min-height: 350px}
.textlist{font-size:110%}
.textlist .punkte{font-size: 80%;position:absolute; top:0; left:calc(100% - 10px); padding-left: 15px; white-space: nowrap}
.textlisting li{list-style: none; position: relative;  }
.textlisting p{white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%}
.textlist 
.textlisting .punkte{}
#sortbylist{position: absolute; right:0; top: -26px; line-height: 26px; font-size:14px}
.asbtn{ background: #e5d31f;line-height: 32px; text-transform: uppercase; font-family: "Open Sans", "Trebuchet", sans-serif; font-weight: 700;display: inline-block}
.asbbtn{background:#000; text-align: center; width:150px}
.aswidebtn{width: auto}
label.asbtn{padding: 0 1em; font-size: 18px}
label.asbbtn:hover{color:#f7e321}
.asbtn a{color:#000; line-height: 32px;}
 a.asbbtn{color:#fff !important; font-weight: 500; text-decoration: none !important; position: relative; z-index: 1}
 a.asbbtn:hover{color:#f7e321 !important}
.asbtn li:hover{background: #d4c41d}
#main >.inside > .margined{position: relative}
#main .asbtn li{padding: 0 0.5em}
#main .as-right-col li{padding:0.2em 1em; width: 100%}
 #main h1{text-transform: uppercase; padding-bottom: 1.75em; font-size: 2.4rem}
 #main h3{text-transform: uppercase;}
 #main .themetitle h1{font-weight: 500; font-size:1.5rem}
 #main ol{padding-left: 1.5rem}
 #main li{padding-bottom: 1.5rem}
#mylogout{position: absolute; right: 0; top:0}
#sortbylist li{ width:95px}
#sortbylist li:first-child{position: absolute;  left:-134px; background: #000; color: #fff; width:134px; text-align: center}
#sortbylist.noSortByPoints .puli, #sortbylist.noSortByDate .datli,#sortbylist.noSortByTitle .titli{display: none !important}
#sortbylist li:nth-child(3),#sortbylist li:nth-child(4){display: none}
#sortbylist:hover li{display: list-item !important}
.before #sortbylist .datli, .after #sortbylist .datli,.nichtaktuell #sortbylist .datli{display: none !important}
#sortbylist li:first-child:hover{background: #000}
#switchtextlist{font-size: 18px}
 #switchtextlist2{width:248px; float: right}
#main #switchtextlist2 li{line-height: 0;position: relative; padding-bottom: 0.8em; width:100% }

  .seitennav{width:320px}
#switchtextlist2 li:before{content: ""; position: absolute; width: 100%; top:.08em; left:0; height:3px; background: #e5d31f; z-index: 1}
#switchtextlist2 li:hover:before{background: #d4c41d}
#switchtextlist2 a{ font-weight: 700; font-size: 16px; padding: 0 0 4px 0; display: inline; position: relative; color: black;background-color: transparent;

background-size: 20px 21px;
/*background-position-y: 2px;*/
}
#switchtextlist2 a, #switchtextlist2 span{line-height: 1.5em;text-transform: none;  font-family: "DroidSerif","Times New Roman", serif;}
#switchtextlist2 span{font-weight: 500; font-size: 85%; font-family:"Open Sans", "Trebuchet MS", sans-serif;}
#switchtextlist2 li:hover a,#switchtextlist2 a.cText{background-image: -webkit-linear-gradient(transparent 85%, rgb(0,0,0) 15%);background-image: linear-gradient(transparent 85%, rgb(0,0,0) 15%);}
.as-right-col{position: absolute; right:-310px; width:198px; top:-32px;}
#switchtextlist2 h3{padding-top: 10px}
#einzeltext{overflow: visible}
#einzeltext #showPunkteWrap{border: none}
#main #einzeltext h1{text-transform: none; font-family: "DroidSerif","Times New Roman", serif;padding-bottom: 1.25em}
#main #einzeltext h1.wAutor{padding-bottom: .75em}
#einzeltext address{text-align: center; position: relative; top:-50px}
.page-rightcol h1, .textlisting, .textdetail > div:first-child{width: calc(100% - 320px)}
.textdetail[data-id='2207'] .ce_text{display: flex; flex-wrap: wrap; justify-content: space-between}
.textdetail[data-id='2207'] h1:not(.s){display: none}
.textdetail[data-id='2207'] h1.s, .textdetail[data-id='2207'] .ce_text p:not(:last-child){width: 47%; white-space: nowrap; hyphens: none}

label[data-show="none"], input[data-show="none"]{display:none !important}
/*.Vorrundentexte.punkte .textlist li:nth-child(30):after{content:""; position: absolute; bottom: 10px; left: 0; display: block; width: 100%; border-bottom: 3px solid}*/
#main .textdetail{position: relative; margin-top: 4em;display: -webkit-box;display: -ms-flexbox; display:-webkit-flex;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between}
.textdetail p, .preview p{padding-bottom: 1em; line-height:1.6em}
.textdetail p{font-size: 125%}
.breadcrumb li{text-transform: uppercase; padding: 0 .25em}
.breadcrumb li:first-child{padding: 0}
.breadcrumb li:nth-child(2):before{content:" » "; padding:  0 .2em 0 0; text-align: center}
.breadcrumb li a,.breadcrumb li{color: #000; display: inline-block; font-weight: 700}
.upperbc{position: absolute; top:-64px; left:0}
.lowerbc{padding: 1em 0}
#einzeltext .vote, #showPunkte{background: #000; color:#fff; text-align: center; width:150px; height:32px}
#einzeltext .vote:hover{color:#f7e321}
#voteBtnWrap{margin: 2em 0}
#voteBtnWrap p{padding: 0 10px; display: inline-block}
#addVoteWrap{display: inline-block}
#showPunkteWrap{position: absolute; top:-58px; right: 0; right:320px; z-index: 1; border: 1px solid; background: #f7e321}
#showPunkte{padding: 0; margin: 0; font-size: 16px}
#showPunkte:after{content:" Punkte"}
.notext{margin-bottom:4em} p.empty{display: none}
.gelb{color:#000; background: #f7e321}
.weiss{color: #fff}
.gelb a, .gelb a:hover{color: #000}

.topline{height: 40px; border-bottom:1px solid #252525; line-height: 39px; text-align: left; font-size: 14px; width: 100% !important}
.topline .intern li:not(:first-child){padding-left: 60px; display: none !important}
.topline a{color: #aaa;padding-left: 24px; position: relative} .topline a:hover{color: #f7e321}
.topline .intern a:before{content:"";height:11px;width:15px;background: url("../../files/css/bgi/icons.gif"); background-position: top left; left:0; top:3px; position: absolute}
.mail:hover:before{background-position: bottom left;}
.topline .fon:before{background-position: top right;}
.fon:hover:before{background-position: bottom right;}
#header .logo{padding-top:43px ;padding-bottom: 26px; max-width: 388px}
.opener{display: none}
.to-open{max-height:0; min-height:0 !important; overflow: hidden}
.opener:checked + label +.to-open, .opener:checked + label+ .to-open + .to-open,.opener.wide:checked ~ .to-open{max-height:9000px; -webkit-transition: max-height 3s; transition: max-height 1s}
.to-open > :first-child{padding-top: 3rem; padding-bottom: 1.5rem}
.formcontainer > :first-child{padding-top: 1.5rem; padding-bottom: 1.5rem}
.opener + label{cursor: pointer}
.opener + label:after{content: " ▼"}
.opener:checked + label:after,label.show-when-open:after{content: " ▲"}
.opener + label.asbtn:after{content: none}
label.show-when-open{cursor:pointer}
.opener:checked + label .hide-when-open,.opener:checked + label.hide-when-open,.opener:not(:checked) + label + .show-when-open{display: none !important}

.opener:not(:checked) + label ~ .to-open + .opener + label{padding-top: 1rem}

#veranstaltungen .veranstaltungen{display: -webkit-box;display: -ms-flexbox;display: -webkit-flex; display: flex;-ms-flex-wrap:wrap; -webkit-flex-wrap:wrap;flex-wrap:wrap;  -ms-flex-line-pack:start; -webkit-align-content:flex-start;align-content:flex-start; box-sizing: content-box;padding:0 calc(50vw - 630px) 1.5em calc(50vw - 630px)}
#veranstaltungen > h2{padding-bottom: 1.2em}
.veranstaltungen .teaser{box-sizing: border-box; width:25%;border-right:3px solid transparent; border-bottom:3px solid transparent}
#veranstaltungen .morgen + .veranstaltungen .teaser:first-child{width:50%}
#veranstaltungen .morgen + .veranstaltungen .teaser:first-child .eventcontainer{padding-bottom:50%}
.veranstaltungen h3{text-align: left}
.eventcontainer{width:100%; height:0; padding-bottom: 100%; position:relative; background: #000; overflow: hidden}
.eventcontainer>figure{aspect-ratio:400/267; overflow: hidden}
.eventcontainer div, .eventcontainer label{position: absolute; width:100%}
.eventcontainer div{bottom:0; padding:1.5em}
.eventcontainer div > *{color:#fff}
.eventcontainer label{left:0; top:0; height:100%; cursor:pointer}
.eventcontainer h3{padding-bottom: 1.5em;text-shadow: 1px 1px 1px #000}

.pseudoevent{visibility: hidden;}
.eventdetail{width: 100vw}
.eventdetail h3{padding-bottom: 0.3em}
.eventdetail > div{padding-right: 40px}
.eventdetail a, .eventdetail a:hover{color:#000; text-decoration: underline}

.forlbl{position: relative}
.eventdetail small{font-style: italic; display: block; padding-top: 2em}
.eventdetail label{position: absolute; top:-35px; right:0; width:25px; height:25px; cursor: pointer; overflow: hidden; background:url("../../files/layout/close-x.png") center no-repeat}

.event{position: absolute; left: 0}
#veranstaltungen .opener:checked ~ .to-open{max-height:3000px; -webkit-transition: max-height 1s; transition: max-height 1s; margin-top: 2em}
.wGallery > .ce_text, .eventdetail h3, .eventdetail .info{width:33%}
.e-detailcontainer > .ce_gallery { padding-left: 5rem}
.e-detailcontainer > .ce_gallery ul{display: -webkit-box;display: -ms-flexbox;display: -webkit-flex; display: flex;-ms-flex-wrap:wrap; -webkit-flex-wrap:wrap;flex-wrap:wrap; gap:3px}
.wGallery > .ce_gallery{width:66%}
#main .e-detailcontainer .ce_gallery li{/*padding-bottom: 9.1% ;border-right:3px solid transparent; border-bottom:3px solid transparent; line-height: 0; height: 0;*/ width:12.5%;overflow: hidden; padding: 0}
.e-detailcontainer{-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between}
.e-detailcontainer .ce_gallery{line-height: 0; position: relative; top:-63px}
.e-detailcontainer .ce_gallery figure{aspect-ratio:96/64; overflow:hidden}
/*.e-detailcontainer .ce_gallery img{position: relative; left:3px}*/
.presse #main{text-align: center}
.presse h4{margin-top: 1em; margin-bottom:0.2em}
#cboxTitle{display: none !important}
#cboxLoadedContent {
    background: none !important;
}
.gestern + .veranstaltungen time span{visibility: hidden; position:absolute;}
div.info p{display: inline} div.info p:before{content:", "}
div.info{padding-bottom: 1em}
nav a, nav span{text-transform: uppercase; line-height:48px; padding: 0 7px}
#subnav{font-family: "Open Sans", "Trebuchet", sans-serif;padding-top:4rem; font-weight: 700;}
#subnav ul{ border-bottom: 1px solid}
#subnav a, #subnav span {line-height:24px; color: #000}
header .scrollmen li.active, header .scrollmen li.trail{border-bottom: 2px solid #fff}
#subnav li.active{border-bottom: 2px solid #000}
header .scrollmen ul, #subnav ul{display: -webkit-box;display: -ms-flexbox;display: -webkit-flex; display: flex;-webkit-box-pack:justify; -ms-flex-pack:justify; -webkit-justify-content:space-between; justify-content:space-between}
header.fixed.active{position: fixed; top:0; left:0}
#header{position:-webkit-sticky;position:sticky;top:0;}
.scrollmen ul.level_2{display: none}
.hamburger{display: none;text-indent: -10000px}
.hamburger a:after{content:"☰"; text-indent:0; left:0; font-size:2.4rem; position:absolute; top:0}
#sliderenvelope{position:relative;/* max-height: 560px; display: flex; align-items:center*/}
  #slider{position: relative; width:100%; /*padding-bottom: 49.64%;overflow: hidden; white-space: nowrap*/}
  #slider .padding{width:100%; padding-bottom: 49.64%;overflow: hidden; white-space: nowrap}
 #slider .flexwrap{position: relative;  max-height: 560px; height:560px;display: -webkit-box; display: -ms-flexbox; display: -webkit-flex;display: flex; -webkit-box-align:center; -webkit-align-items:center; -ms-flex-align:center; -ms-flex-preferred-size:100;align-items:center; -webkit-flex-basis:100%;flex-basis:100%;}
  #slider  .sliderimg{display: inline-block;}
  #slider img{display: block; width: 100%; object-position:top}
  #slider .ce_image{overflow:hidden; height: 100%}
 #slider figure{width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox;display: -webkit-flex; display: flex; -webkit-box-align:center; -ms-flex-align:center; -webkit-align-items:center; align-items:center}
 #slider .selftop figure{-webkit-align-items:flex-start; align-items:flex-start}
 #slider .selftop img{object-position:top}
 .sliderimg{left:100%; top:0; position: absolute;-webkit-transition: left 0.3s; /* For Safari 3.1 to 6.0 */
    -webkit-transition: left 0.3s ease;
    transition: left 0.3s ease;height: 100%; width: 100%}
 #slider  .active{left:0}
 #slider  .park{left:-100%}
 .slidernav{position:absolute;top:calc(50% - 33px); line-height:48px; height:48px;width:50px; z-index: 2}
 .slidernav:after{position: absolute; width: 100%; height: 100%; top:0; left:0;background: #000; font-size:48px; text-align: center}
 .slnav-lr{opacity:0; -webkit-transition: all 0.8s; transition: all 0.8s}
#sliderenvelope:hover .slnav-lr{opacity:1;}
 .slnav-left{left:0}.slnav-right{right:0;}
 .slnav-left:after{content:"<"; border-radius: 0 15px 15px 0} .slnav-right:after{content:">"; border-radius: 15px 0 0 15px}
 .slnav-center{width:100%; top:auto;bottom:32px; text-align: center; background: none; height:9px; z-index: 500}
 .slnav-center .active{background: #f7e321; border-color: #f7e321}
 .sliderpoint{display: inline-block; width:5px; height: 5px; margin: 0 2px; border: 1px solid #fff; border-radius:50%; background: #fff}
 .unten{z-index: -1}
 .oben{z-index: 1}

 .themetitle{text-align: center; width:52%; position: relative;padding-left:10%}

 .themetext{width:48%;padding-left:2%}
 blockquote *{font-size: 1.2rem}
 blockquote h2{font-size: 3rem; font-style: italic; padding-bottom: 2rem}
 blockquote h2:before{content:open-quote} blockquote h2:after{content:close-quote}
  blockquote p{padding:0 16% 1em 16%; font-style: italic}
  blockquote footer{font-size: 1rem; padding-top: 6em; background: url("../../files/css/bgi/feder.png") no-repeat center top; color: #000}
 #main .mod_article{padding-top: 4rem}
 .ce_text, .eventcontainer{
    hyphens: auto;}
	.ce_text h3,.u-text .flex,#vorstand p,#vorstand h2{
    hyphens: none; 
	}
#login{ position: absolute; right: 20px; text-align: left; z-index: 500; width: 380px; border: 1px solid; border-top: none; display: none}
#login p.error{margin:-1.8em 0 .7em 0}
.showlogin #login{display: block}
.login label{text-transform: uppercase;}
.login input{border:none; border-bottom: 1px solid; background-color: #f7e321; outline: none}
input[type=text], input[type=password], input[type=number], input[type=email],select{padding: 0.2em;border:none; border-bottom: 1px solid; background-color: #f7e321; outline: none}

.login input[type=checkbox]{position: relative; margin-right: 5px}
/*.login input[type=checkbox]:after{}*/
.login .checkbox_container{position: relative}
/*.login .checkbox_container label::before{content: ""; border: 1px solid #000; position: absolute; left:0; top:13px; width:14px; height: 14px; visibility: visible}
login .checkbox_container input:checked + label::before{content: "X"; font-family: sans-serif; font-size: 12px; text-align: center; line-height: 14px}*/
/*.login input:checked:after*/
#login .labelwrap label{float: left; width: 8.5em; text-align: left}
#login .closebox{position: absolute; top:-35px; right:0; width:25px; height:25px; cursor: pointer; overflow: hidden;background:url("../../files/layout/close-x.png") center no-repeat; }
#tl_logout ~ * {display: none}
#tl_lost_password .labelwrap label{width:auto}
#tl_lost_password{padding-top: 1.5rem}
.mod_lostPassword{position: relative; }
#log-2:checked + div{overflow: visible}
.formbody > div, .formbody{padding: 0.5rem 0}
#login .submit_container{text-align: center}

.forgotPW a:hover{text-decoration: underline}
#login .opener:checked + .to-open{max-height: 1000px; -webkit-transition: max-height 1s; transition: max-height 1s}
#regform label:not(.halb),#updateform label:not(.halb),#updatepwform label:not(.halb), .lwrap{width: 15em; display: inline-block}
.formcontainer{max-width: 1015px}
.einreichen{max-width:100%}
#updateform, #updatepwform{max-width:728px}
#updateform button{margin:1em 9px 0 0}
.formcontainer label, .formcontainer .aslabel, .formcontainer label + *{display: inline-block; margin-bottom: 0.5em}
.formcontainer input:not([type=checkbox]), .formcontainer select{background: rgb(250,255,189);max-width: calc(100% - 16em); width: 475px;}
.fwrap{display: inline-block; max-width: calc(100% - 16em);width: 475px; }
.submit_container{text-align: right}
.formcontainer textarea{width:100%; background: rgb(250,255,189); height:246px; padding:.2em}
.formcontainer select{height: 2em}
p.error{margin-left:15.2em; color:red; margin-bottom:0.5em; margin-top: -0.4em}
#PLZ,#otherLocation .plz{margin-right: 6px; width:65px; max-width: 100%}
#altSchool,#otherLocation .ort{max-width: calc(100% - 4.15em - 6px); width: 404px; float: right}
button, a.button{border: none; background: #000; color: #fff; display: inline-block; text-transform: uppercase; cursor: pointer; padding: 0.4em 1em; margin-bottom: 0.5rem; font-size: 14px}
button:hover, a.button:hover {color: #f7e321 !important}
#login button, #login .button{width: 51%; display: block; margin: 0 auto 0.5rem auto; line-height: normal}
#login .pwlog{top:-1.5em; position: relative; cursor: pointer}
#login .pwlog:hover{text-decoration: underline}
#reset-pw form{max-width:600px; margin:0 auto; }
#reset-pw label{width:100px; display: inline-block;
    white-space: nowrap;}
#reset-pw label:after{content:"*"}
#reset-pw .labelwrap .widget{padding:0.5rem 0}
#main .mod_lostPassword{padding: 0.5em 0}
span.mandatory{display: none}
.mandatory label:after,label.mandatory:after, .mandatory > label:first-child:after{content:"*"; padding: 0 1px}
fieldset.forradio label::after{content: none}
fieldset.forradio legend.mandatory:after{content:"*"; padding: 0 1px}
.er-wrap .preview{position: absolute; top:0; left:0; width:100%; min-height:100%}
#label-agb{display: inline-block}
#ctrl_newsletter{display: none}
.autor-text-hl span:first-child{width:220px; white-space: nowrap; margin-right: 10px; position: relative; bottom: 1px}

   #preis .inside{min-height: 347px}
   #preis .asbtn{margin-top:1em} #thema .asbtn{margin-top:2.5em}
  #thema{padding-bottom: 3rem;}
  #thema .inside{overflow: visible; min-height:578px}
   #thema .inside > div {overflow: visible; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; width:120%;position:relative; left:-20%; max-width: 1560px;  }
   #thema .inside > div:after{content: "18";
    opacity: 0.1;
    position: absolute;
    left: -12%;
    top: 50%;
    font-size: 700px;
    display: block;
    font-style: italic;
    font-family: sans-serif;
    font-weight: 700;
    vertical-align: text-top;
    height: 100%;
    text-align: left;
    font-family:"Open Sans", "Trebuchet", sans-serif}
   #thema .inside > div > div{padding-top: 8rem; position: relative; top:-2rem}
   #so-geht-das{margin-bottom: -3rem}
 
   #unterstuetzer{text-align: center} #unterstuetzer p{margin-bottom: 1em}
   #unterstuetzer .inside{width:55%;min-height: 550px}
   #unterstuetzer .flex{width:95%; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between;margin:2rem auto}
   #unterstuetzer h1{padding-bottom: 1em}
   #logo{border-top: 1px solid; padding: 2rem 0 !important; margin-top:3rem}
  #logo .logowrap{display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-box-align:center;-webkit-justify-content: center;justify-content: center;  -ms-flex-align:center;  -webkit-align-items:center; align-items:center; margin-top: 1.2em}
   #logo .w100{text-align: center;display: inline-block;}
   .logowrap.to-open > :first-child {
    padding-top:inherit;
    padding-bottom:inherit;}
    .logowrap-2{margin-bottom: 1.2rem}
    .logowrap a[title="Wien Kultur"]{height: 80px; overflow: hidden}
    .logowrap img[src$=".svg"]{width: 160px; background: #fff }
    .logowrap img[src="files/logo/wien_kultur.svg"]{position: relative; top:-16px }
    .logowrap a{display: block}
   /*#logo .ce_image:nth-child(2){padding: 0 5%}*/
   #logo figure{text-align: center; padding: 0 10px}
   #logo .B-1,#logo .B-8,#logo .B-9,#logo .B-15,#logo .B-16,#logo .B-17, #logo .B-18,#logo .B-22{padding: 0 2px}
   #kontakt{display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;padding-left:25.85%; background:url("../../files/css/bgi/logo-footer.png") no-repeat left 33px }
   #kontakt > div{width:33%; padding-right:45px}
   #kontakt > div:last-child{padding-left: 15px; width:255px}
   #kontakt h2{text-transform: uppercase; font-size: 1rem; line-height: 69px; border-bottom: 1px solid #464646; margin-bottom: 1rem; text-align: left}
   #kontakt p{color:#969696;font-size: 0.85rem;}
   #preis .ce_text,.themetext,#unterstuetzer .ce_text{font-size: 1.13rem; line-height: 1.65em}
   .textraus{overflow:visible}
   .textraus p{white-space: nowrap}
   footer{padding-bottom: 1.5rem}
   .showmen .scrollmen li:not(.hamburger){height:auto;max-height:1500px;visibility: visible}
   
   .swipe-left{position: relative; left:-101vw; -webkit-transition: all .7s; transition:all .7s}
   .swipe-left.active{left:0}
   .reveal{-webkit-transition: all .8s;transition:all .8s; -webkit-transform: scale(0); transform: scale(0)}
   .reveal.active{-webkit-transform: scale(1);transform: scale(1)}
/*   header.fixed.active + .custom{margin-top:245px}*/
   h1.less-pad{padding-bottom:0 !important} /*h1.verein:before{content:"Verein "; font-weight: 500}*/
   .mitwirkende #main h1,  .mitwirkende #main h2{text-align: left; text-transform: uppercase}
   .fotos{padding-bottom: .2rem}
   .fotos .ce_text, #finalisten .itemlist li{ background: #000; color:#fff; width:calc(25% - 3px); overflow: hidden; position:relative; left:-3px; margin: 0 3px 3px 0; padding: 0}
   .fotos .ce_text > div, #finalisten .itemlist li > div{width:100%; height:0; padding-bottom: 100%}
   .fotos .ce_text h3, #finalisten .itemlist h2{font-size: 18px}
   .fotos .ce_text > h3{display:none} 
   .fotos .ce_text  p, #finalisten .itemlist li  p{-webkit-transform: scaleY(0);transform: scaleY(0); height:0; line-height: 1.4em}
   .fotos .ce_text div div, #finalisten .itemlist li div div{position: absolute; bottom:0; width: 100%; background: #000; padding: 0 15px;  }
   .fotos .inside, #finalisten .itemlist{display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap;flex-wrap: wrap;width: 100%}
   #finalisten .itemlist span{display: block; padding-bottom: 0.5em}
   .fotos h2{width: 100%; position: relative; bottom: 1.2em}
   .fotos .ce_text h3, #finalisten .itemlist h2{padding:10px 10px 10px 0; text-align: left}
   .fotos .ce_text div div:hover, #finalisten .itemlist li div div:hover{max-height: 100%}
   .fotos .ce_text div div:hover h3,#finalisten .itemlist li div div:hover h2{padding: 0.5em 0}
   .fotos .ce_text div div:hover .funktion,.fotos .ce_text div div:hover small {display: none}
   .fotos .ce_text figure{position: relative}
   .fotos .ce_text small{position: absolute; right:5px; top:-25px}
   .fotos .blacklink small{color:#000}
   .fotos .invert small{mix-blend-mode: difference}
   .fotos .ce_text div div p{font-size:87.5%}
   .fotos .ce_text div div:hover p,#finalisten .itemlist li div div:hover p{height:auto; -webkit-transform: scaleY(1); transform: scaleY(1);-webkit-transform-origin:top; transform-origin: top; -webkit-transition: all 0.3s; transition: all 0.3s; padding-bottom: .7em}
   
   #veranstaltungen .layout_full{background: rgb(250,255,189)}
   #veranstaltungen .bygone .wGallery .copy::after,#veranstaltungen .bygone.wGallery .copy::after {content:"Fotos: © Roman Picha"; display: block}
   #overlay{position:fixed;height: 100%;width:100%;background: rgba(0,0,0,0.8);z-index: 700;top:0;}
#overlay>div{margin:100px auto 0; border:5px solid #000; padding:23px;background: #f7e321; position:relative; max-width:1200px }
#overlay .preview{overflow-y: scroll; height: calc(100vh - 210px) }
#overlay h2 {margin: 1.5rem 0; text-transform: uppercase}
.einreichen #ctrl_headline{width:600px; max-width: 100%}
.youtube{height: 0; padding-bottom:56.25%; width:100%; position: relative}
.youtube iframe{width:100%; height: 100%; position: absolute; top:0; left: 0}
#closebox {
	border: 3px solid;
    display: block;
    height: 30px;
    position: absolute;
    right: 10px;
    text-indent: -9999px;
    top: 10px;
    width: 30px;
    cursor: pointer;
	border-radius: 15px;
}
#closebox:after{content:"X"; font-family: "Open Sans", "Trebuchet", sans-serif; text-align: center; text-indent: 0; position: absolute; left:0; top:-3px; width:100%; height: 100%; line-height: 30px; display: block; font-weight: 700; font-size: 24px}
#main .schule{padding-bottom: 1em}
.verwaltung #container, .verwaltung input, .verwaltung select,.verwaltung option{font-size: 12px}
.verwaltung select{max-width: 260px}
.verwaltung .formVW table{counter-reset: reihung}
.verwaltung .formVW table tr:not(:first-child){counter-increment: reihung}
.verwaltung .formVW table tr td:first-child div::before{ content:counter(reihung); text-align: right; position: absolute; width: 3ch; font-family: monospace; left: 3.5ch}
.vw-container {
    width: 20px;
    min-height: 28px;
	position: relative;
	text-align: center;
}
.vw-container > div {
    display: none;
    background: #fff;
    padding: 5px;
    width: auto;
	position: absolute;
	text-align: left
}
.vw-container > div label{white-space: nowrap; display: block}
.vw-container:hover >div {
    display: block;
    z-index: 50;
}
.vw-pt tr > *{font-size: 1em}
.vw-pt tr td:nth-child(5){font-size: 1em}
.vw-pt tr:nth-child(31) td{border-bottom: 2px solid}
.verwaltung #container a{color:#000}
.verwaltung #container .block{overflow: visible}
.verwaltung #container a:hover{text-decoration: underline}
.edit:after{content:" >> edit"}
.w8m{width:8em; height:2em; position: relative}
.w8m textarea{position: absolute; left: 0; top: 0; width: 100%; height: 100%}
.lauftext h1, .lauftext h2, .lauftext p{margin-bottom: 1.5em}
.lauftext #container a{color:#000; text-decoration: underline}
.funktion{position: relative; top:-10px; }
 audio, video{max-width: 100%}
 /*ul.textlist, #switchtextlist2{counter-reset: textnr}
 .titel.jury .textlist li:before, .jury .titel li:not(:first-child):after{counter-increment: textnr; content:counter(textnr)". ";position: absolute; right:100%; top:0;padding-right: 0.2em}
 .jury .titel li:not(:first-child):after{top:0.7em}*/
 #texte{overflow: visible}
 #einzeltext h1.vk-2:after{content:""; display: inline-block; width:20px; height: 20px; border-radius: 50%; color:#e32; background: #e32; margin-left: 0.3em}
 small.author{display: block; text-align: center; font-style: italic; font-weight: 500; margin-top: -0.3em; font-size:45%}
 #finalisten .itemlist h2{padding-top: 16px !important; top:-3px}
 .onlyfinal,.onlyvorrunde{position: relative; bottom: 50px}
 #main .wrbezirk{ margin-top: 1.2em; padding: .8em 0; max-width: 1200px}
 .wrbezirk figure{margin-top: .8em; width:10%}
 #die-preise{overflow:visible; padding-top:0}
 #die-preise .inside{padding-top:0}
 #die-preise label{position:absolute; top:-5.26rem; right:20px}
 .preise{position:relative;top:-.44rem}
#main .ce_downloads li{padding-bottom: .4em}
.flex #main{width:calc(100% - 400px); max-width: 880px; padding-right: 1.6em; float: none}
.flex #main h1{margin-right: 0; width: 100%}
.start #right h3{text-align: left}
.page-rightcol.start #logo{ position: relative;z-index: 1; overflow: visible}
.page-rightcol.start #logo:after{content: ""; position: absolute; width:100vw; height: 100%;background: #f7e321; left:calc(50% - 50vw); top:-0; z-index: -1}
#right{margin: 0 20px 0 0; width:400px; float: none}
#right .mod_article{padding: 0 0 0 24px; margin: 0 0 2.4em 0; border-left: 1px solid; overflow: visible}
#thema{overflow: visible}
#right .mod_article:first-child{margin-top: 4rem}
#right h1:first-child{position: relative;top: -.25em; white-space: nowrap}
#right .inside{padding-right: 0}
#right .inside *:last-child{margin-bottom: 0; padding-bottom: 0}
#right h1{font-size: 1.4em; text-align: left}
#right h1, #right h2, #right h3{text-transform: uppercase; margin-bottom: .8em}
#right .st-teaser h2{font-size: 1em; font-weight: normal; margin: 0; text-align: left;font-family: "DroidSerif","Times New Roman", serif;text-transform: none}
.infolink a,.infolink,.infolink:hover{text-decoration: none; text-transform: uppercase; color:#000 !important; font-weight: 700;font-family: "Open Sans", "Trebuchet", sans-serif; display: inline-block; margin: .5em 0; font-size: 13px}
.infolink:before{content:"» "}
#right a{color: #000; text-decoration: none}
#right .details{display: none}
#right .details::after{content:"» WENIGER"; font-family: "Open Sans", "Trebuchet", sans-serif; font-weight: 700; font-size: 13px; cursor: pointer}
#right .summary.open + .details{display: block}
#right .summary:not(.open)::after{content:"» MEHR ZU TEXTE. AUGARTEN"; font-family: "Open Sans", "Trebuchet", sans-serif; font-weight: 700; font-size: 13px; cursor: pointer}
.cboxPhoto{max-height: 100% !important}
.novoting.noeinreichen #preis #nl-info-container label{margin-top: .5em}
#right > .inside > .mod_article > .inside h1:not(:first-child){margin-top: 1.2em}
#right p:empty{display: none}
/* SCHREIBWERKSTATT */
.sw #header{background: none; border: none; text-align: left; position: relative}
.sw #header .inside,#unterstuetzer .inside{max-width: 1300px; margin: auto}
.sw #header .inside > *{display: block; margin-left: 0}
.sw #header a:first-child{color: #867b12; font-size: .8em; padding: .5em 0 0 4em; font-weight: 700 }
.sw #header a:hover{color:#000}
.sw #header img{padding: 5em 20px; top: -15px; position: relative; max-width: 100% }
.sw #container, .sw #footer{background: #fff}
.sw #container > .inside{background: #fff;padding:80px; /*max-width: 1500px;*/background-image: linear-gradient(135deg, #000000 24.40%, #ffffff 24.40%, #ffffff 50%, #000000 50%, #000000 74.40%, #ffffff 74.40%, #ffffff 100%);
background-size: 176.78px 176.78px;margin: auto}
.sw #container > .inside > *,#unterstuetzer{background: #fff}
#unterstuetzer{border-top: 1px solid}
.sw #unterstuetzer .inside{min-height: 0}
#unterstuetzer h1{text-transform: uppercase; margin: 40px 0 80px 0; text-align: center}
.sw a,.sw a:hover{color: #000}
.sw a:hover{text-decoration: underline}
.sw #main h2{text-align: left; font-size: 1.2em; letter-spacing: .1em}
.sw #main h2:not(.inline){margin-bottom: .5em}
.sw #main p{margin-bottom: 2.5em}
.sw #right h1{background: #f7e321; padding: .1em .2em; position: relative; left: -.2em}
.sw #right .block{overflow: visible}
.sw #main, .sw #right{padding: 0 40px 20px 40px}
.sw #right{padding-left: 0}
.sw #footer{background: #000}
.sw #footer .mod_article .last{display: none}
.sw .no-sw{display: none}
.sw #main li{padding-bottom: .2em}
.tilt{transform: rotate(2deg); margin-left: 2%}
.shadow{box-shadow: 7px 5px 15px 0 rgba(0,0,0,0.35);}
/* 2018 */
#registrieren-voter #lbl_newsletter_0:after{content: none}
#ctrl_newsletter_voter{display: block; border: none; outline: none}
#ctrl_newsletter_voter legend{display: none}
#registrieren-voter #lbl_newsletter_0{float: right; width: calc(100% - 22px)}
#sogehtdas{top:-15em}
#preis{overflow: visible}
#nl-info-container{z-index: 5;top:calc(100% - 32px); right: 1em; text-align: right; width: 221px}
#nl-info-container label{width: 100%; display: block; white-space: nowrap}
#nl-info-container .mod_subscribe{border: 1px solid; border-top:none; width: 100%}
#nl-info-container form{padding: 0 .5em}
#nl-info-container button{margin-top: .5em}
#nl-info-container .formbody{padding-top: 1em}
#nl-info-container form{border: 1px solid; border-top: none}
#preis #nl-info-container label{margin-top: 0}
#nl-info-container .error{text-align: left; margin: 0}
.verwaltung #container tr[data-pubvr] div[data-name="Text-Vorrunde"] a,.verwaltung #container tr[data-pubf] div[data-name="Text-Finalrunde"] a{color:green}
#right .st-teaser{margin-bottom: .5em}
.w100p{width: 100%}
.pl5{padding-left: 5px}
.landinfo{padding-bottom: 1em}
table.pt{margin-top: 15px}
table.pt td,table.pt th{padding: 1px 5px}
table.pt tr:nth-child(even){background: rgba(255,255,255,.15)}
header .mod_article{display: none; 
    position: absolute;
   top:100%;
    line-height: 48px;
    left:110px;
    overflow: visible;
    z-index: 502
}
header .mod_article label{font-size: 1rem}
header .mod_article .headform{top: calc(100% + 3px);}
header .headform .formbody{
    border: 1px solid;
    text-align: right;
    padding: 1.5rem .5rem}
    .formVW{padding-left: 50px}
    .mailunit h2{padding: 5px 2px; color: #fff; background: #000; margin: 5px 0}
.mailunit h2 a{color: #fff !important} 
    .mailunit > div{width: 100%; order: 2}
    .mailunit h3{line-height: 30px; font-size: 16px; margin-top: 2px}
    .mailunit h3, .mailunit h4{text-align: left}
    .mailunit h4{font-weight: 500; width: 550px; line-height: 30px}
    .mailunit h4 a{float: right}
    .mailunit *:first-child{order:0}
    .mailunit:not(section) :nth-child(2){order:2}
    .mailunit :last-child{order:1}
    section.mailunit{max-width: 700px; margin-bottom: 15px}
    .mailunit a{margin-left:5px;position: relative; line-height: 30px; display: inline-block; width: 30px; background: url("../../files/css/bgi/mail.png") no-repeat; text-align: center; font-weight: 700; font-size: 16px}
        .mailunit .schuely{background-image: url("../../files/css/bgi/schuelies.png"); height: 30px}
        #main .schuelyshow li{line-height: 1.3em; padding-bottom: .4em}
        .mailunit .edit{float: none; background: none; line-height: 1.4em; width: auto; text-align: left; font-weight: 500; font-size: 12px}
        .mailunit .edit::after{content: none}
        .mailunit .schuelyText{background-image: url("../../files/css/bgi/texticon.png"); height: 26px; width: 20px; }
        .mailunit .schuelyXCEL{background-image: url("../../files/css/bgi/tabicon.png"); height: 26px; width: 20px; }
        .mailunit span.d-block >* {display: inline-block; margin-right: 7px; width: auto; background: none; font-size: 12px}
        .morgen + .veranstaltungen .rueckschau, .gestern + .veranstaltungen .vorschau{display: none}
        .burgtheater {max-width: 315px}
        .wGallery a{display: inline-block; position: relative}
        .e-detailcontainer .ce_gallery a[href^="https:"]::after{content:'';position: absolute; top: calc(50% - 16px); left: calc(50% - 16px); width: 32px; height: 32px;  background: url("../../files/css/bgi/video-play.png") no-repeat}
        .wGallery a[href^="https:"] img{border: 2px solid red; border-radius: 5px}
        .wGallery img, .eventcontainer img{filter: grayscale(1);}
        #iframe{text-align: center; background: #000; padding: 20px 0; position: relative; color: #fff}
        #iframe::after{content:"Foto ©Ulrik Hölzel"; content:none;position: absolute; left: 50%; bottom:0;  font-size: .75em; transform: translateX(-50%)}
        #iframe iframe{max-width: calc(100vw - 30px); max-height: calc((100vw - 30px)*9/16)}
        #iframe::before{content:'Live aus dem Odeon\Amit Dorothee Hartinger\A Daniel Jesch\A Markus Meyer\APetra Morzé'; position: absolute; left: calc(50% + 290px); top: 20px; width: 200px; white-space: pre; text-align: left; font-size: .9em}
        .toarchive{width: 100%}
.toarchive li{margin-right: 1em; font-size: 1.5em}
.toarchive li:last-child{align-self: flex-end; cursor: pointer}
.toarchive a{color: #000; }.toarchive a:hover{text-decoration: underline}
.toarchive span{font-weight: 700}
.darkcopytext small{color: #000}
/* DONAUSTADT */
html.sw{background: #fff}
.sw #container > .inside{background: none; background-color: #fff; padding: 0}
.w-bezirk body{min-height: 100vh; display: flex; flex-direction: column}
.w-bezirk #container{flex:1}
.w-bezirk #header{margin-bottom: -3em}
.w-bezirk #footer #logo{border:none}
.w-bezirk #footer .logowrap{justify-content: space-around; margin-top: 0}
#header .doppellogo{display: flex !important; justify-content: space-between; padding: 5em 60px 5em 20px }
#header .doppellogo img{width: auto; max-height: 215px; padding: 0 !important}
#header  .doppellogo img:first-child{max-width: 64.9%}
#header .doppellogo img:last-child{max-width: 25%; position: relative; right: 4px}

/*AB DA MEDIA-QUERIES*/
@media only screen and (min-width: 1128px)
{
    .flex #preis .ce_text {-webkit-column-count: 2; -webkit-column-gap:40px; -moz-column-count: 2; -moz-column-gap:40px; column-count: 2; column-gap:40px; }
    .start .mod_subscribe{margin-top: 2em}
    
}
  @media only screen and (min-width: 700px){
	#container:not(.flex) #preis .ce_text {-webkit-column-count: 2; -webkit-column-gap:40px; -moz-column-count: 2; -moz-column-gap:40px; column-count: 2; column-gap:40px; }
	.i-block.left{padding-right:20px}
.i-block.right{padding-left:20px}
.i-block.left,.i-block.right{width: 49.5%; vertical-align: top}
#overlay>div{width:80%}
.yt-wrap,.ce_player{width:52%; display: inline-block}

/*.yt-wrap:nth-child(odd){margin-right: 2%}*/
}
    @media only screen and (max-width: 1600px)
    {
        #nl-info-container{right: auto; top: auto; left:calc(50% + 1.3em); margin-top: .5em}
    }
   @media only screen and (max-width: 1520px)
   {
    .sw #main{width: auto}
   }
    @media only screen and (max-width: 1300px){
		 .fotos .ce_text, #finalisten .itemlist li{  width:calc(33% - 3px)}
		 #veranstaltungen .veranstaltungen{padding-left:20px; padding-right: 20px}
   }
    @media only screen and (max-width: 1150px)
    {
      #main .textdetail[data-id='2207'] h1.s {font-size: 1.6rem}
 .textdetail[data-id='2207'] .ce_text p{font-size: 1em}
      
    }
   @media only screen and (max-width: 1127px){
		#slider .flexwrap{height:0; padding-bottom: 49.601%} /* wegen bug im ff */
		#main .e-detailcontainer .ce_gallery li{width:16.66%; /*padding-bottom: 12.15%*/}
        .flex #thema .inside > div{display: block; left: 0; width: 100%}
        .flex #thema .inside > div > div{padding-top: 1.5rem}
        .flex .themetitle, .flex .themetext{width: 100%}
        #nl-info-container{right: 1em; margin-top: 0; left:auto}
        .twobutts #nl-info-container{ top:calc(100% - 32px);}
        .themetitle {padding-left: 0}
        #iframe iframe{margin-left: -280px}
        #iframe::before, #iframe::after{margin-left: -140px}
	}
     @media only screen and (max-width: 1127px) and (min-width: 851px)
     {
        body:not(.twobutts) #nl-info-container{top:calc(100% + 20px)}
        body:not(.twobutts) #thema{margin-top: 2rem}
     }
    @media only screen and (max-width: 1085px)
    {
        .sw #container > .inside{padding: 40px}
        .w-bezirk #container > .inside{padding-bottom: 0}
        #header .doppellogo{padding-right:  40px }
    }
	 @media only screen and (max-width: 1005px){
		 .fotos .ce_text, #finalisten .itemlist li{  width:calc(50% - 3px)}
         .veranstaltungen .teaser{width:33.33%}
	#veranstaltungen .morgen + .veranstaltungen .teaser:first-child{width:66.66%}
    .sw #header img{padding: 7vw 20px}
     #main .textdetail[data-id='2207'] h1.s {font-size: 1.4rem}
 .textdetail[data-id='2207'] .ce_text p{font-size: .78em}
   }
  @media only screen and (max-width: 960px){
    html:not(.sw) #right{width: 342px}
    html:not(.sw) .flex #main{width:calc(100% - 342px)}
     .sw  #container .flex{display: block}
     .sw #main, .sw #right{width: 100%; padding: 0 20px 20px}
     .sw #main .mod_article, .sw #right .mod_article{padding-left:0; padding-right: 0}
     .sw #right .mod_article{border: none}
     .sw #right .mod_article:first-child{margin-top: 0; }
			#kontakt{-ms-flex-flow:column;-webkit-flex-flow:column;flex-flow:column; padding: 100px 0 0;-webkit-box-align:center;-ms-flex-align:center;-ms-grid-row-align:center;-webkit-align-items:center;align-items:center;background-position: center 33px }
		#footer #kontakt > div{padding:0 0 1.6rem 0; max-width:320px}
	
		#unterstuetzer .inside{width:75%}
				#main .e-detailcontainer .ce_gallery li{width:25%; /*padding-bottom: 18.2%*/}
				.wGallery > .ce_text, .eventdetail h3, .eventdetail .info {
    width: 45%;
    
}
.wGallery > .ce_gallery {
    width: 54%;
}
.sw #main .mod_article, .sw #right .mod_article:first-child{padding-top: 3rem}
#iframe::before{content: none}
 #iframe iframe{margin-left: 0}
        #iframe::before, #iframe::after{margin-left: 0}
	}
	@media only screen and (max-width: 850px){
        /* rechte Spalte kollabiert */
        #showPunkteWrap{right: 250px}
        #container.flex{display: block}
        .flex #main,#right,.flex #thema .inside > div{width:100% !important}
         body:not(.twobutts) #nl-info-container{top:calc(100% - 32px)}
         #main .textdetail[data-id='2207'] h1.s {font-size: 2rem; width: 100%}
 .textdetail[data-id='2207'] .ce_text p:not(:last-child){font-size: 1.1em; width: 100%}
 .textdetail[data-id='2207'] .ce_text .r{font-style: italic}
    }
    
	 @media only screen and (max-width: 768px){
		#logo .logowrap > div{width: 33%}
        #logo .logowrap > div:only-child{width: 100%}
		#logo .logowrap{-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap; flex-wrap:wrap}
.veranstaltungen .teaser{width:50%}
		#veranstaltungen .morgen + .veranstaltungen .teaser:first-child{width:100%}
        #showPunkteWrap{right: 0}
        
	}
    @media only screen and (max-width: 730px){
		
		#main .textdetail[data-id='2207'] h1.s {font-size: 1.8rem; width: 100%}
 .textdetail[data-id='2207'] .ce_text p:not(:last-child){font-size: .9em; width: 100%}
		
		#unterstuetzer .inside{width:80%}
		.fotos .ce_text, #finalisten .itemlist li{width: calc(50% - 3px)}
		
		#logo .logowrap > div{min-width: 50%; padding-bottom: 2em}
		
	}
	/* ab da hamburger */
    @media only screen and (min-width: 701px)
    {
       #ctrl_country{margin-left: 4px}
    }
 @media only screen and (max-width: 700px){
    
     #main .textdetail[data-id='2207'] h1.s {font-size: 2rem; width: 100%; margin-right: 25%}
 .textdetail[data-id='2207'] .ce_text p{font-size: 1.2em; width: 100%}
    #header .logo {
    padding-top: 23px;
    padding-bottom:20px;
    width:300px;
    }
    header .mod_article{display: block}
#login{top:150px; border-top:1px solid}
    #die-preise label{top:-2rem; left:20px; right:auto}
    .preise{top:0}
     #main .textdetail{display:block}
    #main .textdetail > div{width:100%}
    #switchtextlist2{width: 100%; float: none}
    .level_1 > li.active:nth-child(3),.level_1 > li.active.veranstaltungen{border-top: 1px solid #fff}
    .level_2 > li:first-child:not(.active){border-top: none}
    /*.lowerbc{display: none}*/
    #juryinterface{margin-bottom:3rem}
	.e-detailcontainer{display: block}
#main .e-detailcontainer > div{width:100%; top:0}
#main .e-detailcontainer .ce_gallery li{width:14.285%;/*padding-bottom: 10.5%*/}
#main .e-detailcontainer .ce_gallery{padding-top: 2.5em; padding-left:0}
  .page-rightcol h1, .textlisting, .textdetail{width: 100%}
  .as-right-col, .textlisting .punkte{position: static}
  #switchtextlist ul{margin-bottom: 1.5rem}
  #switchtextlist li{display: inline-block; width:auto; margin-left:10px; position: relative; left:10px}

  .formcontainer label:not(.halb), .lwrap{display: block !important;}
  .formcontainer label{margin-bottom:0.12em}
  .lwrap{height: 26px}
  .fwrap{margin-bottom: 0.5em}
  .formcontainer input:not([type=checkbox]), .formcontainer select,.fwrap {
    max-width: 100%;
    width: 100%;
	}
	#altSchool {
    max-width: calc(100% - 71px);
    width: calc(100% - 71px);
    float: right;
	}
	   .scrollmen{position:absolute; right:0; top:100%;z-index:501;padding:0 !important; }
	   .showmen .scrollmen {width:100vw;height:100vh}
       header > .inside{height: 95px;}
       .w-bezirk header >.inside{height: auto}
	  header .scrollmen ul{ display:block; overflow: visible; min-height: 50px; margin-top: 10px}
	  header .scrollmen .level_1{padding-bottom: 50px; border-bottom: 1px solid #fff; width: 100vw;background: #000; margin-top: 0}
       header .scrollmen .level_2{margin-top:0}
      header .scrollmen .level_1>li.first{border-top: 1px solid #fff}
.scrollmen li:not(.hamburger) {
	background:#000;
    max-height: 0;
    overflow: hidden;
	border-top:1px solid #fff;
	position:relative;
	top:49px;
	visibility:hidden;
	display: block
	}
.hamburger{position:absolute;right:0; display: block; width: 48px}

		 .fotos .ce_text, #finalisten .itemlist li{  width:100%; left:0; margin-left: 0}
         
		 .fotos .ce_text > div{padding-bottom: 85%} 
		 #subnav{display: none}
.scrollmen ul.level_2 {
    display: block;
	border-top: 1px solid #fff
}
.scrollmen ul.level_2 li{
    top:0; font-size: 12px; 	
}
.scrollmen ul.level_2 li.active:not(:first-child){border-top:1px solid #fff}
.scrollmen ul.level_1 li.trail{
    border-bottom: none
}
.scrollmen ul.level_2 li *{
    line-height: 26px	
}

.scrollmen li {
    display: block;
}
.scrollmen .level_1 > li.last {
   position:absolute;left:30px; top:0; border: none; max-height: 50px; visibility: visible; background: transparent
}

header .scrollmen li.active{border:none}
header .inside *{-webkit-transition: none;transition:none}
.showmen *{-webkit-transition: max-height 1s  !important;transition:max-height 1s  !important}
/*header.fixed.active + .custom{margin-top:195px}*/
 .wrbezirk figure{width:15%; width: calc(100%/7)}
 .eventdetail h3, .eventdetail .info {
    width: 100%;
}
 body:not(.twobutts) #nl-info-container{top:calc(100% + 10px)}
 body:not(.twobutts) #thema{margin-top: 2rem}
 .custom{margin-top: 45px} /* sliderarea */
 #header .doppellogo{ padding-bottom: 3em }
}
 @media only screen and (max-width: 650px){
	#thema .inside>div{-ms-flex-flow:column;-webkit-flex-flow:column; flex-flow:column}
	.themetitle,.themetext{width:100%; padding-left:10%}
.themetext{width:100%; padding-left:20%}
blockquote p{padding-left: 0; padding-right: 0}
#unterstuetzer .inside{width:90%}
#unterstuetzer .flex{width: 100%}
#main .e-detailcontainer .ce_gallery li{width:16.66%;/*padding-bottom: 12.15%*/}
}
@media only screen and (max-width: 530px){
 .veranstaltungen .teaser{width:100%}
  #main .e-detailcontainer .ce_gallery li{width:20%/*;padding-bottom: 14.8%*/}
  #main #veranstaltungen .morgen + .veranstaltungen .teaser .eventcontainer {
    padding-bottom: 50%;
}
}
@media only screen and (max-width: 500px){
 #logo .logowrap > div{width: 100%}
 .upperbc{top:-94px}
 .wrbezirk figure{width:20%}
 .sw #container > .inside{padding: 20px}
  #header .doppellogo{padding-right:  20px }
}
@media only screen and (max-width: 460px)
{
    #nl-info-container{ left:1.25em; margin-top: 2.5em}
    body:not(.twobutts) #nl-info-container{margin-top: 1.1em}
    
    #main #thema{padding-top: 6rem}
}
@media only screen and (max-width: 450px){
	#main .e-detailcontainer .ce_gallery li{width:25%;/*padding-bottom: 18.2%*/}
 /* #header{min-height:195px}*/
	#header .logo{max-width: 100%;width: 200px;padding-bottom: 20px}
	.topline ul{display: -webkit-box;display: -ms-flexbox;display: -webkit-flex; display: flex;-webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between;justify-content: space-between}
    .topline .social{padding: 0}
	.topline  li{padding-left:0 !important;}
	#unterstuetzer .inside{width:100%}
	 header .scrollmen .level_1{padding: 0}
     #login{top:130px}
	.fotos .ce_text > div{padding-bottom:100%}
    #right h1:first-child{white-space: normal}
    header > .inside{height: 70px;}

    header .mod_article{
    padding-left: 0; margin-left: -25px
}
}
@media only screen and (max-width: 430px)
{
   #main #veranstaltungen .morgen + .veranstaltungen .teaser .eventcontainer {
    padding-bottom: 60%;}
    .wrbezirk figure{width:25%}
    #login{width:calc(100% - 4px); right:2px;}
     #main .textdetail[data-id='2207'] h1.s {font-size: 1.8rem; width: 100%; margin-right: 25%}
 .textdetail[data-id='2207'] .ce_text p{font-size: .95em; width: 100%}
}

@media only screen and (max-width: 400px)
{
  #header{min-height:0;}
/*  header.fixed.active + .custom{margin-top:185px}*/
  #login{top:123px}
  
}
@media only screen and (max-width: 360px)
{
  #main .textdetail[data-id='2207'] h1.s {font-size: 1.6rem; width: 100%; margin-right: 25%}
 .textdetail[data-id='2207'] .ce_text p{font-size: .85em; width: 100%}
  .fotos .ce_text div{font-size: 95%; line-height: 19px}
  .upperbc{font-size: 80%}
  #main #veranstaltungen .morgen + .veranstaltungen .teaser .eventcontainer {padding-bottom: 70%}
  .sw #container > .inside{padding: 10px}
  .sw #header img{padding: 25px 20px}
  header .mod_article{
    margin-left: -35px
}
#header .doppellogo{ padding-bottom: 2em }
}
@media only screen and (max-width: 330px)
{
	#main .e-detailcontainer .ce_gallery li{width:33.33%; /*padding-bottom: 24.8%*/}
.fotos .inside{display: block}
  .fotos .ce_text,#finalisten .itemlist li{width:100%;display: inline-block; margin:0; left:0}
  
  .fotos .ce_text div{font-size: 90%; line-height: 17px}
  #header .logo{padding-top: 23px; padding-bottom: 42px; }
  .showmen #header .logo{display: none}
  .showmen .scrollmen{top:-10px}
  .scrollmen li:not(.hamburger){top:46px}
  
  .topline li a{font-size: 12px; padding-left: 18px}
  .topline li a:before{top:2px}
  #main #veranstaltungen .morgen + .veranstaltungen .teaser .eventcontainer {
    padding-bottom: 90%;
  #footer #kontakt > div {
    width: 100%;
}
@media only screen and (max-width: 285px)
{
  .upperbc{font-size: 60%}
}
}