:root {
    --purple-color: #541871;
    --purple-light-color: #E7C2DE;
    --purple-superlight-color: #E7C2DE99;
    --yellow-color: rgba(255, 237, 0, 1);
    --yellow-light-color: rgba(255, 237, 0, 0.2);
    --gold-color:#9D9019;
    --grey-color:#484747;
}
.gold{
    color: var(--gold-color);
}
.purple-light{
    color: var(--purple-light-color);
}

.bg-purple-light{
    background-color: var(--purple-light-color);
    color: var(--purple-color);
}

.bg-purple{
    color: var(--purple-light-color);
    background-color: var(--purple-color);
}


@font-face {
	font-family:  "AutautGrotesk-Medium";
	src: url('./../font/AutautGrotesk-Medium.woff2') format('woff2'), /* Super Modern Browsers */
         url('./../font/AutautGrotesk-Medium.woff') format('woff'), /* Modern Browsers */
    ;
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "AutautGrotesk-Regular";
	src: url('./../font/AutautGrotesk-Regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('./../font/AutautGrotesk-Regular.woff') format('woff'), /* Modern Browsers */
    ;
	font-weight: normal;
	font-style: normal;
}


.f-adjust{
    font-size:58px
}

body{
    font-family: "AutautGrotesk-Regular";
    margin-top: 119.4px;
    font-size:36px;
    line-height: 1.19;
    letter-spacing: -1.04px;
    -webkit-font-feature-settings: "ss01";
    font-feature-settings: "ss01";
    color:var(--purple-color);
}

body.page-id-19,body.page-id-21{
    font-size:26px;
}

#start {
    font-family: "AutautGrotesk-Regular";
    font-size:52px;
    line-height: 1.19;
    letter-spacing: -1.04px;
    -webkit-font-feature-settings: "ss06";
    font-feature-settings: "ss06";
    margin-top: 119.4px
}





h1,.h1,h2,.h2,.bigtext{
  font-family:  "AutautGrotesk-Regular";
  font-size: 52px;
  line-height: 1.19;
  letter-spacing: -1.9px;
  -webkit-font-feature-settings: "ss06";
  font-feature-settings: "ss06";
}



h3,.h3,.mediumtext{
  font-family:  "AutautGrotesk-Regular";
  font-size: 36px;
  line-height: 1.03;
  letter-spacing: -1px;
  -webkit-font-feature-settings: "ss06";
  font-feature-settings: "ss06";
}

h2,.h2,h3,.h3{
  margin-top: 0;
  margin-bottom: 1rem;
}


.bigtext{
    font-family: "AutautGrotesk-Regular";
    -webkit-font-feature-settings: "ss06";
    font-feature-settings: "ss06";
}

.smalltext{
    font-family: "AutautGrotesk-Regular";
    font-size:24px;
    line-height: 1.19;
    letter-spacing: 0.72px;
    -webkit-font-feature-settings: "ss01";
    font-feature-settings: "ss01";
}

#start h1{
  font-family:  "AutautGrotesk-Regular";
  font-size: 100px;
  line-height: 1.03;
  letter-spacing: -2.9px;
}


a{
    text-decoration: none;
    color:inherit;
    -webkit-transition: color 0.3s linear;
    transition: color 0.3s linear
}

a:hover{
    color: var(--gold-color);
}

b,strong{
    font-family: "AutautGrotesk-Medium";
}

p{
    margin-bottom: 3rem
}

.default-page-text{
   
}

.default-page-text a{
    text-decoration: underline;
}

.default-page-text p,.default-page-text ul ,.default-page-text ol {
  margin-top: 0;
  margin-bottom: 3rem;
}

.default-page-text hr {
  margin: 1rem 0rem 3rem;
}



nav.navbar{
    background-color: var(--purple-color); 
    padding: 24px 0px;
    -webkit-box-shadow: 0px 5px 6px #00000029;
    box-shadow: 0px 5px 6px #00000029;
}
.navbar-toggler {
  border:0;
}
.navbar-toggler:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
  
}
.navbar-toggler-icon {
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 237, 0, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}


li.nav-item a{
    font-size: 36px;
    color: var(--yellow-color);
    padding-right: 20px!important;
    padding-left: 20px!important;
}

li.nav-item a:hover, li.nav-item a:focus{
   color: var(--purple-light-color);
}

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color: var(--purple-light-color);
}


#start{
    height: calc(100vH - 119.4px);
    background-color: var(--purple-color);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
#start p{
      font-family: "AutautGrotesk-Medium";
      line-height: 1.03;
}
section{
    padding: 135px 0px;
}
footer{
    padding: 135px 0px 125px;
    background-color: var(--yellow-light-color);
    font-size:24px;
    letter-spacing: 0.24px;
    line-height: 1.7;
    -webkit-font-feature-settings: "ss01";
    font-feature-settings: "ss01";
}

footer .smallerfont{
    font-size:18px;
}
.footerlogoblock{
   position: relative;
    height:100%
}

.copyright{
    position: absolute;
    width: 100%;
    bottom:0;
}

#menu-footernavigation {
    list-style: none;
    margin: 0;
    padding: 0;
}

#menu-footernavigation li a{
    white-space: nowrap
}


.keyvisual,.keyvisualmobile{
    overflow:hidden
}


.box{ background-color: aqua;visibility:hidden}

.box1{
    background: url(./../img/box1.svg)
}
.box2{
    background: url(./../img/box2.svg)
}
.box3{
    background: url(./../img/box3.svg)
}
.box4{
    background: url(./../img/box4.svg)
}
.box5{
    background: url(./../img/box5.svg)
}
.box6{
    background: url(./../img/box6.svg)
}
.box7{
    background: url(./../img/box7.svg)
}
.box8{
    background: url(./../img/box8.svg)
}
.box9{
    background: url(./../img/box9.svg)
}
.box10{
    background: url(./../img/box10.svg)
}
.box11{
    background: url(./../img/box11.svg);
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    z-index: 11
}
.box12{
    background: url(./../img/box12.svg)
}
.box13{
    background: url(./../img/box13.svg)
}
.box14{
    background: url(./../img/box14.svg)
}
.box15{
    background: url(./../img/box15.svg)
}

.keyvisual .box{
    border:0px solid green
}


.nl-form{
    background-color: var(--gold-color);
    -webkit-font-feature-settings: "ss01";
    font-feature-settings: "ss01";
}
.theform{
   /* padding:58px 40px;*/
    color: var(--yellow-color);
}

.form-control{
    background-color: #fff;
    font-size:24px;
    padding: 0.5rem .75rem 0.5rem;
    color: var(--purple-color);
    font-family: arial;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border: 0px !important;
}

.form-float {
  position: relative;
}

.form-float label{
  position: absolute;
    font-size:13px;
    top:4px;
    left:26px;
     font-family: arial;
        color: var(--purple-color);
    letter-spacing: 0.5px
}
.form-check {
  padding-left: 0px;
}

.form-check .form-check-input {
    width: 30px;
    height: 30px;
    border-radius:10px!important;
    background-color: #fff;
    margin:0px 0px 0px 0px
}

.form-check-input:focus {
  border-color: #86b7fe;
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.form-check-input:checked {
  background-color: var(--purple-color);
  border-color: var(--purple-color);
  color: #f98!important;
}



.form-check label,.wpcf7-list-item-label{
  font-size: 24px;
  letter-spacing: 0.3px;
  left: 25px;
  top:2px;
  position: relative;
}
.wpcf7-acceptance{
    width: 0px;
    display: inline-block;
}

.wpcf7-list-item {
  display: inline-block;
  margin: 0 0 0 0em;
}

.wpcf7-not-valid-tip {
  color: var(--purple-color);
  font-weight: normal;
  display: block;
  font-size: 12px;
  letter-spacing: 1px;
  margin-top: 2px;
}

.wpcf7 form .wpcf7-response-output {
  margin: 0 0 45px;
  padding: 20px;
  font-size: 20px;
  letter-spacing: 0.3px;
}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
  border-color:var(--purple-color);
    color:var(--purple-color);
}

.wpcf7 form.sent .wpcf7-response-output {
  border-color:var(--purple-color);
    color:var(--purple-color);
}

.form-control::-webkit-input-placeholder {
  color: #bbb;
}

.form-check-input:focus {
  border-color: transparent;
}

.form-control:-ms-input-placeholder {
  color: #bbb;
}

.form-control::-webkit-input-placeholder {
  color: #bbb;
}

.form-control::placeholder {
  color: #bbb;
}

label a{

    text-decoration: underline
}
label a:hover{
    color:inherit!important;
    text-decoration: underline
}


.form-select-lg {
    background-color: var(--purple-light-color);
    font-size:24px;
    padding: 1rem .75rem 0.5rem;
    color: var(--purple-color);
    font-family: arial;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border: 0px !important;



}
option, option:hover  {
    background-color: var(--purple-light-color)!important;
}
option:checked,  option:hover:checked {
    background-color: orange!important;
}

.btn{
    font-size: 40px;
    border-radius:34px;
    padding: 0.275rem 2.75rem;
    letter-spacing: -0.8px;
    margin-bottom: 20px
}

.btn-normal  {
     font-size: 24px;
}


.btn-fn {
  --bs-btn-color: var(--gold-color);
  --bs-btn-bg: var(--yellow-color);
  --bs-btn-border-color: var(--yellow-color);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--gold-color);
  --bs-btn-hover-border-color:var(--yellow-color);
  --bs-btn-focus-shadow-rgb: 225,83,97;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--gold-color);
  --bs-btn-active-border-color: var(--yellow-color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color:  var(--gold-color);
  --bs-btn-disabled-bg: var(--yellow-color);
  --bs-btn-disabled-border-color: var(--yellow-color);
}

.btn-programmheft,.btn-trailer,.btn-normal  {
    text-decoration: none!important;
  --bs-btn-color: var(--purple-light-color);
  --bs-btn-bg: var(--purple-color);
  --bs-btn-border-color: var(--purple-color);
  --bs-btn-hover-color:   var(--purple-color);
  --bs-btn-hover-bg: var(--purple-light-color);
  --bs-btn-hover-border-color: var(--purple-color);
  --bs-btn-focus-shadow-rgb: 225,83,97;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #b02a37;
  --bs-btn-active-border-color: #a52834;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #dc3545;
  --bs-btn-disabled-border-color: #dc3545;
}

.btn-ticket {
    text-decoration: none!important;
  --bs-btn-color: var(--gold-color);
  --bs-btn-bg: var(--yellow-color);
  --bs-btn-border-color: var(--yellow-color);
  --bs-btn-hover-color:   var(--yellow-color);
  --bs-btn-hover-bg: var(--purple-light-color);
  --bs-btn-hover-border-color: var(--yellow-color);
  --bs-btn-focus-shadow-rgb: 225,83,97;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #b02a37;
  --bs-btn-active-border-color: #a52834;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #dc3545;
  --bs-btn-disabled-border-color: #dc3545;
}


.event-zusatzinfo{
    text-decoration: none!important;
    display: block;
    margin: 10px 0px;
    font-size: 36px;
}


.event-zusatzinfo span{
    text-align: center;
    display: inline-block;
    background-color: var(--purple-color);
    color:var(--purple-light-color);
    border-radius:50%;
    width:36px;
    height: 36px;
    line-height: 36px;
    padding: 0px;
    position: relative;
    margin-right:20px;
     -webkit-transition: background-color 0.3s linear;
    transition: background-color 0.3s linear
}

.event-zusatzinfo:hover span{
    background-color: var(--gold-color);
}

.event-zusatzinfo span i{
      font-style: normal !important;
      position: relative;
      top: -2px;
      width: 100%;
      display: block;
      text-align: center;

}


.events:nth-child(even){
    background-color: var(--purple-superlight-color)
}
.events:nth-child(odd){
    background-color: var(--purple-light-color)
}

.thedate{
    border-radius: 50%;

    
}
.thedatewrapper{
    text-align: center;
    height: 100%;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.thedatewrapper div{ line-height: 1; font-size:52px;letter-spacing: 1px}

.modal-backdrop {
    --bs-backdrop-opacity: 0.9;
  background-color: var(--purple-color);
}
.modal-content {
    background-color: var(--purple-light-color);
    color: var(--purple-color);
    padding: 80px 80px;
}

.modaltext p:last-of-type{
    margin-bottom:0px
}

.closeModal{
    position: absolute;
    right:15px;
    top:15px;
    padding: 10px;
}


.presseItem{
    border-top:2px solid var(--purple-color);
    padding-top: 1rem;
    margin: 0 0 4rem
}

.kurzbeschreibung p{
    margin-bottom: 0px
}