:root {
  /*--f1: #004da8 ; */
  --f1: #002653;
  --f2: #f8831a;
  --f3: #fff825; 
  --k1: #90278c; 
  --k2: #e40769 ;
  --k3: #fff825; 
  --r1: #037d52; 
  --r2: #c82032;
  --r3: #fff825; 
  --font1: 'OSwald';
  --font2: 'Roboto Condensed';
}

/* roboto-condensed-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-condensed-v31-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-condensed-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/roboto-condensed-v31-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* oswald-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/oswald-v57-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* oswald-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/oswald-v57-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/*skip link*/
.skip-link { position: absolute; top: -40px; left: 0; background: #000; color: #fff; padding: 8px; z-index: 100; transition: top 0.3s;}

.skip-link:focus {
  top: 0;
}


/*slider*/
/**/
.slick-prev,.slick-next { width: 30px !important; height: 30px !important; border-left:2px solid #fff !important; border-bottom:2px solid #fff !important;  margin-top: -5px;  }
    .slick-prev:before,.slick-next:before { content: " " !important; border-left:2px solid #fff !important; border-bottom:2px solid #fff !important; width: 14px !important; height: 14px !important; display: block; position: absolute; opacity: 1 !important; }

    

    .slick-arrow.slick-disabled { opacity: 0.2 !important;}
        .slick-arrow.slick-disabled:before { opacity: 1 !important;}

    .slick-prev {transform: rotate(45deg) !important; }
    .slick-next {transform: rotate(-135deg) !important;}

.slideshow .slick-prev { left: 20px !important; z-index: 1; }
.slideshow .slick-next { right: 20px !important;z-index: 1; }
.slideshow .slick-prev:before,.slideshow .slick-next:before { display: none;}

button.slick-arrow:focus-visible {outline: 2px dashed #fff !important; outline-offset: 3px;}



/*buttons*/
.button, #cookie-banner button {font-size: 0.85rem;  padding: 6px 12px;  border-radius: 50px; display: inline-block; margin-right: 5px; text-transform: uppercase; line-height: 1.1; position: relative; border:0; background: #ffffff33;font-family: var(--f2);}
    .button:hover { /*background: var(--c3);*/}
    .button svg { height: 16px; width: 16px; position: absolute; left: 10px; top:50%; margin-top: -8px;}
    .button svg, .button svg * { fill: var(--c1);}
.button_icon { padding-left: 30px;}
.mehr .button { background: none; border: none; cursor: pointer; position: relative; }
    .mehr .button:after { display: inline-block; border-left:1px solid #fff; border-bottom:1px solid #fff; transform: rotate(-135deg); content: " "; height: 8px; width: 8px; margin-left: 10px; top: -1px; position: relative;}


html {-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;}
html,body { min-height: 100vh;  }
body { margin: 0 ; }

* { box-sizing: border-box;}
body, p { font-family: var(--font2); line-height: 1.3;}
p { margin-top: 0; margin-bottom: 0.75em;}
h1,h2,h3,h4,h5,h6 {font-family: var(--font1);text-transform: uppercase;line-height: 1.1; font-weight: 500;}
a { color: inherit; text-decoration: none; transition: all 0.3s;}


header h1 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;}

#wrap {padding: 0 2vw  ; background: url(img/bg.jpg) no-repeat fixed center center; background-size: cover; min-height: 100vh;}

main {}

#kinos { display: flex; gap:2vw;  margin: 0 auto;align-items: flex-start; max-width: 1600px; height: calc(100% - 100px); padding: 50px 0;}
  #kinos > div { width:30.66vw; background: var(--f1); border-radius: 5px; overflow: hidden;box-shadow: 0px 5px 40px 1px rgba(0,0,0,0.2); color: #fff; transition: all 0.3s; }
   
    #xberg { background: var(--k1) !important;}
    #rehberge { background: var(--r1) !important;}
    .logo { background: #fff; display: flex;justify-content: center;align-items: center;max-height: 180px; height: 9vw;position: relative;}
      .logo * { display: block; }
       .logo img{ height: 5vw; max-height: 90px; width: auto; }
    .meldung { background: var(--f2); padding: 7px; font-family: var(--font1); text-transform: uppercase; text-align: center; position: absolute; opacity: 1; width:100%; left: 0; top: 100%; z-index: 10; }
      
      #fhain .meldung { color: var(--f1);}
      #xberg .meldung { background: var(--k2);}
      #rehberge .meldung { background: var(--r2);}
    .film {padding: 20px; color: #fff;  position: relative; z-index: 3; font-size: 1.3rem; padding-left:calc(25% + 40px) ; }
     
      .datum_plakat {   }
      .filmplakat { position: absolute; left: 20px; bottom: 20px;width: 25%;}
      .filmplakat img{  height: auto; width: 100%; display: block;box-shadow: 0px 5px 20px 1px rgba(0,0,0,0.2);}
      .filminfos { text-align: center;}
      .teasertitel { text-align: center; margin: 5px 0; font-size: 1.8rem;}
      .teasertitel a { color: #fff; text-decoration: none;}
        .teasertitel a:hover { color: var(--f2);}
        #xberg .teasertitel a:hover { color: var(--k2);}
        #rehberge .teasertitel a:hover { color: var(--r2);}
      .teaserpretitel, .teasertext, .film .mehr, .laenge, .fsk, .trailer, .website { display: none;}
      .teaserdatum  { font-family: var(--font1);  text-align: center; margin-bottom: 0px;}
        .uhrzeit { padding: 0; font-size: inherit ; color: var(--f3);background: none; }

        .ticket { background: var(--f2);}
          #fhain .ticket { color: var(--f1);}
            #fhain .ticket  svg { fill: var(--f1);}
          #xberg .ticket { background: var(--k2);}
          #rehberge .ticket { background: var(--r2);}
        .ticket svg { fill: #fff}

        .filmmeta, .buttons { display: inline-block;}

    .zumprogramm { text-align: center; border-top: 1px dashed #ffffff33 ;}
      .zumprogramm a {padding: 10px; display: block; border-radius: 0; margin: 0 !important; }
        .zumprogramm a:hover { background:#00000022;}
    .slideshow { height: 15vw; overflow: hidden; max-height: 300px; margin-top: 34px; }
    .slick-list {height: 100%; }
    .slick-track {height: 100%; }
    .slick-slide { height: 100%; }
      .slidecontent {display: flex; overflow: hidden; width: 100%; height: 100%;}
      .slideshow img { width: 100%; height: auto; object-fit: cover;}

  #footer { position: absolute;  left: 0; width: 100%; bottom: 0;}
  #footer p{ color: #fff; text-align: center; font-family: var(--font1); text-transform: uppercase ;}

  /*COOKIEBANNER*/
#cookie-banner {position: fixed;bottom:40px;left:50%; margin-left:-200px; background:  #ffffff99;color:#000;padding:20px;z-index:9999;display:none;  width: 400px; font-size: 0.9rem !important; text-align: center; border-radius: 10px; backdrop-filter: blur(5px);-webkit-backdrop-filter: blur(5px);}
    #cookie-banner button{cursor: pointer; background: #fff; color: #000; }
         #cookie-banner button.reject { background: none; }
    #cookie-banner a { }
  

@media (min-width: 1001px) {
   #kinos > div:hover { transform:scale(1.02)}
}

@media (max-width: 1000px) {
  
  html,body { }
  body { padding: 0; }
  #kinos { width: 94%; display: block; padding: 20px 3%;height: auto; }
  #kinos > div { width: 100%; position: relative; margin-bottom: 15px; }
  .film { min-height: 140px;padding: 15px; padding-left:110px ;}
  .filmplakat {  left: 15px; bottom: auto; width: 80px; top: 15px;}
  
  .logo { height: 100px;justify-content: flex-start; padding: 0 15px; align-items: flex-start;}
    .logo img { height: auto; width: 160px; margin-top: 16px;}
  .slideshow { height: 100px;  position: absolute; right: 0; top: 0; z-index:5; width: 37%; margin-top: 0; z-index: 11;}
  .meldung { width: 63%; top: auto; bottom: 0; padding: 5px; font-size: 0.9rem;}
  #footer { position: relative; padding-bottom: 10px;}

  #cookie-banner {bottom:40px;left:2%; margin-left:0; background:  #ffffffcc; width: 96%;  }

  .slick-prev,.slick-next { width: 12px !important; height: 12px !important; }


}

@media (max-width: 767px) {
  .teasertitel {  font-size: 1.5rem;}
  .teaserdatum {  font-size: 1.1rem;}
  .buttons .button, .filmmeta .button { font-size: 0.75rem;}
  

  
 
}