/*
Theme Name: Theater am Olgaeck 2025
Theme URI: 
Description: A theme for Theater am Olgaeck
Author: Zehnpixel Webdesign
Author URI: https://zehnpixel.de/
Version: 1.0.24
Template: qi
*/






/* roboto-300 - cyrillic_cyrillic-ext_latin_latin-ext */
@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';
    font-style: normal;
    font-weight: 300;
    src: url('../TheaterAmOlgaeck/fonts/roboto-v30-cyrillic_cyrillic-ext_latin_latin-ext-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* roboto-300italic - cyrillic_cyrillic-ext_latin_latin-ext */
  @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';
    font-style: italic;
    font-weight: 300;
    src: url('../TheaterAmOlgaeck/fonts/roboto-v30-cyrillic_cyrillic-ext_latin_latin-ext-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* roboto-regular - cyrillic_cyrillic-ext_latin_latin-ext */
  @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';
    font-style: normal;
    font-weight: 400;
    src: url('../TheaterAmOlgaeck/fonts/roboto-v30-cyrillic_cyrillic-ext_latin_latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* roboto-italic - cyrillic_cyrillic-ext_latin_latin-ext */
  @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';
    font-style: italic;
    font-weight: 400;
    src: url('../TheaterAmOlgaeck/fonts/roboto-v30-cyrillic_cyrillic-ext_latin_latin-ext-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* roboto-500 - cyrillic_cyrillic-ext_latin_latin-ext */
  @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';
    font-style: normal;
    font-weight: 500;
    src: url('../TheaterAmOlgaeck/fonts/roboto-v30-cyrillic_cyrillic-ext_latin_latin-ext-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* roboto-500italic - cyrillic_cyrillic-ext_latin_latin-ext */
  @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';
    font-style: italic;
    font-weight: 500;
    src: url('../TheaterAmOlgaeck/fonts/roboto-v30-cyrillic_cyrillic-ext_latin_latin-ext-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* roboto-700 - cyrillic_cyrillic-ext_latin_latin-ext */
  @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';
    font-style: normal;
    font-weight: 700;
    src: url('../TheaterAmOlgaeck/fonts/roboto-v30-cyrillic_cyrillic-ext_latin_latin-ext-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* roboto-700italic - cyrillic_cyrillic-ext_latin_latin-ext */
  @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';
    font-style: italic;
    font-weight: 700;
    src: url('../TheaterAmOlgaeck/fonts/roboto-v30-cyrillic_cyrillic-ext_latin_latin-ext-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* roboto-900 - cyrillic_cyrillic-ext_latin_latin-ext */
  @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';
    font-style: normal;
    font-weight: 900;
    src: url('../TheaterAmOlgaeck/fonts/roboto-v30-cyrillic_cyrillic-ext_latin_latin-ext-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* roboto-900italic - cyrillic_cyrillic-ext_latin_latin-ext */
  @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';
    font-style: italic;
    font-weight: 900;
    src: url('../TheaterAmOlgaeck/fonts/roboto-v30-cyrillic_cyrillic-ext_latin_latin-ext-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
/* roboto-slab-regular - cyrillic_cyrillic-ext_latin_latin-ext */
@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 Slab';
    font-style: normal;
    font-weight: 400;
    src: url('../TheaterAmOlgaeck/fonts/roboto-slab-v34-cyrillic_cyrillic-ext_latin_latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* roboto-slab-500 - cyrillic_cyrillic-ext_latin_latin-ext */
  @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 Slab';
    font-style: normal;
    font-weight: 500;
    src: url('../TheaterAmOlgaeck/fonts/roboto-slab-v34-cyrillic_cyrillic-ext_latin_latin-ext-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* roboto-slab-600 - cyrillic_cyrillic-ext_latin_latin-ext */
  @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 Slab';
    font-style: normal;
    font-weight: 600;
    src: url('../TheaterAmOlgaeck/fonts/roboto-slab-v34-cyrillic_cyrillic-ext_latin_latin-ext-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* roboto-slab-700 - cyrillic_cyrillic-ext_latin_latin-ext */
  @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 Slab';
    font-style: normal;
    font-weight: 700;
    src: url('../TheaterAmOlgaeck/fonts/roboto-slab-v34-cyrillic_cyrillic-ext_latin_latin-ext-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* roboto-slab-800 - cyrillic_cyrillic-ext_latin_latin-ext */
  @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 Slab';
    font-style: normal;
    font-weight: 800;
    src: url('../TheaterAmOlgaeck/fonts/roboto-slab-v34-cyrillic_cyrillic-ext_latin_latin-ext-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* roboto-slab-900 - cyrillic_cyrillic-ext_latin_latin-ext */
  @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 Slab';
    font-style: normal;
    font-weight: 900;
    src: url('../TheaterAmOlgaeck/fonts/roboto-slab-v34-cyrillic_cyrillic-ext_latin_latin-ext-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }


  /*Modified Files
  
  /plugins/events-widgets-for-elementor-and-the-events-calendar/widgets/layouts/ectbe-list.php --> Datumsformat für linke Spalte angepasst (Listensicht)
  /plugins/events-widgets-for-elementor-and-the-events-calendar/includes/functions.php --> Datumsformat für "Full" angepasst (Listensicht)
  /plugins/events-widgets-for-elementor-and-the-events-calendar/includes/functions.php
  */

  /***CONTENT---------
    
    00. Variables
    01. Allgemeine Styles
    02. Header + Logo
    03. Footer
      03.01. Icons
    04. Aktuelles/Blog
    05. Veranstaltungen
      05.01. Veranstaltungen Carousels

    06. Bildergalerie
    07. Spielplan
      07.01. Trenner für Monate
    08. Übersichtseite Festivals
      08.01. Afrika Film Festival 2025
    09. YouTube Consent
    10 Kontaktformular


    09. Media Queries

*******------*/

.home.langswitchdraft {
  color:var(--ParagraphBlack);
  font-size:15px;
  font-weight:700
}
.home .langswitchdraft {
  color:#ffffff;

}
.langswitchdraft {
  font-size:15px;
  font-weight:700
}

.qodef-header--sticky-display.home .qodef-side-area-opener .qodef-m-icon svg {
  fill: black;
}
.qodef-header--sticky-display.home .qodef-side-area-opener .qodef-m-icon svg:hover {
  fill: var(--Primary);
}


/*Variables*/
:root {
    --ParagraphBlack: #1d1d1b;
    --Primary: #dd3333;
    --Primary-Trans: rgba(221, 51, 51, 0.8);
    --Grey: #f6f6f6;
    --FontSansSerif: 'Roboto';
    --FontSerif: 'Roboto Slab';
}



/* 01. ALLGEMEINE STYLES*/

    body, p, h1, h2, h3, h4, h5, h6, ul, ol {

        -webkit-hyphens: auto;
        -webkit-hyphenate-limit-before: 3;
        -webkit-hyphenate-limit-after: 3;
        -webkit-hyphenate-limit-chars: 6 3 3;
        -webkit-hyphenate-limit-lines: 2;
        -webkit-hyphenate-limit-last: always;
        -webkit-hyphenate-limit-zone: 8%;
        -moz-hyphens: auto;
        -moz-hyphenate-limit-chars: 6 3 3;
        -moz-hyphenate-limit-lines: 2;
        -moz-hyphenate-limit-last: always;
        -moz-hyphenate-limit-zone: 8%;
        -ms-hyphens: auto;
        -ms-hyphenate-limit-chars: 6 3 3;
        -ms-hyphenate-limit-lines: 2;
        -ms-hyphenate-limit-last: always;
        -ms-hyphenate-limit-zone: 8%;
        hyphens: auto;

        hyphenate-limit-chars: 6 3 3;
        hyphenate-limit-lines: 2;
        hyphenate-limit-last: always;
        hyphenate-limit-zone: 8%;
       
    }


    h1, h2, h3, h5, h6 {
      line-height: 1.1em!important;
    }

    .slide h2.qodef-m-title {
      padding-bottom: 0px!important;
    }

    h2.qodef-m-title {
      padding-bottom: 25px!important;
    }

    h4 { 
      line-height: 1.5em!important;
    }

    p, ul, ol {
      line-height: 1.5em!important;
      margin: 0px 0px 25px 0px!important;
    }

    b, strong {
        font-weight: 800!important;
    }

    ul {
        list-style-position: inside;
        margin-left: 20px!important;
    }

    ol {
        list-style-position: outside!important;
        margin-left: 20px!important;
    }
    


    ol li, ul li {
        padding-bottom: 5px;
    }

    ol ol {
      list-style-type: decimal;
    }


    .white, .white h1, .white h2, .white h3, .white h4, .white h5, .white h6, .white p, .white li, .white a {
        color: #ffffff;
    } 

    .bg-grey {
      background-color: var(--Grey);
    }

    .no-show, .keine-infos {
        display: none!important;
    }

    .text {
        padding: 50px;
    }

    .center {
        text-align: center;
    }
    .no-link {
      pointer-events: none!important;
    }

    .elementor img {
      border-radius: 5px!Important;
    }
    

    .qodef-qi-section-title.qodef-text-link--underline-thick>.qodef-m-text a:hover {
      background-image: linear-gradient(transparent calc(100% - 2px),var(--Primary) 2px);
    }

    .qodef-qi-banner .qodef-m-image {
      border-radius: 6px;
    }

  .qodef-qi-button.qodef-layout--outlined, .acysubbuttons .subbutton, .wpcf7 input[type=submit] {
    border: var(--Primary) 3px solid!important;
    border-radius: 3px;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 0.9em;
    padding: 12px 38px!important;
    background-color: transparent!important;

    &:hover {
      background-color:var(--Primary)!important;
      color: #ffffff!important;
      border-color: var(--Primary)!important;
    }
  }


  .border-red {
    position: relative;
    width: 100%;
    height: 100%;
    margin: auto;
    /*border: 2px solid var(--Primary);*/
    border-radius: 6px;

    
    &::before,
    &::after {
        content: "";
        position: absolute;
        width: 50px;
        height: 25px;
        transition: .3s ease-in-out;
    }
    
    &::before {
        top: -15px;
        left: -15px;
        border-top: 5px solid var(--ParagraphBlack);
        border-left: 5px solid var(--ParagraphBlack);
        border-radius: 5px;
    }
    
    &::after {
        right: -15px;
        bottom: -15px;
        border-bottom: 5px solid var(--Primary);
        border-right: 5px solid var(--Primary);
        border-radius: 5px;
    }
    
    /*&:hover::before,
    &:hover::after {
        width: calc(50% + 60px);
        height: calc(50% + 60px);
    }*/
}

.border-red-img-hov {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 10px;
 /* border: 1px solid var(--Primary);*/
  border-radius: 3px;
  padding: 10px;

  
  &::before,
  &::after {
      content: "";
      position: absolute;
      width: 50px;
      height: 25px;
      transition: .3s ease-in-out;
  }
  
  &::before {
      top: -5px;
      left: -5px;
      border-top: 5px solid var(--ParagraphBlack);
      border-left: 5px solid var(--ParagraphBlack);
       border-radius: 5px;
  }
  
  &::after {
      right: -5px;
      bottom: -5px;
      border-bottom: 5px solid var(--Primary);
      border-right: 5px solid var(--Primary);
       border-radius: 5px;
  }
  
  &:hover::before,
  &:hover::after {
      width: calc(50% + 60px);
      height: calc(50% + 60px);
  }
}

button.e-filter-item {
  cursor: pointer;
}

.category-eigenproduktion .bild-spielplan {
  border: 6px solid var(--Primary);
  border-radius: 11px;
}

.border-red.newsletter {
  border: 0px;

}

    /*************************/


    /*02. HEADER + LOGO*/
 

    .qodef-header--sticky-display .qodef-header-navigation> ul > li > a {
      color: var(--ParagraphBlack)
    }

    .qodef-header--standard #qodef-page-header {
     background-color: rgba(255,255,255,.85)!important;
    }

   

    #qodef-page-header .qodef-header-logo-link:focus {
        outline: 0px!important;
    }

    #qodef-page-mobile-header {
      padding: 0px 0px;
    }

    .qodef-fullscreen-menu {
      top: 5%;
    }

    /*.home .qodef-header-navigation> ul > li > a, .home #qodef-page-header .widget_qode_essential_addons_icon_svg .qodef-m-text, .home .qodef-side-area-opener .qodef-m-icon {
        color: #ffffff;
    }*/

   
    .qodef-header--sticky-display.home .qodef-header-navigation a {
      color: var(--ParagraphBlack);
    }

    .qodef-header--sticky-display.home .qodef-header-navigation a:hover {
      color: var(--Primary);
    }

    .logo-sidearea {
      width: 40%;
    }

    .qodef-mobile-header--standard #qodef-page-mobile-header-inner {
      padding-right: 25px!important;
    }

    #qodef-page-mobile-header .qodef-mobile-header-logo-link {
      height: 100px!important;
    }

    .qodef-header-navigation ul li ul.qodef-drop-down--right {
      background-color: #ffffff!important;
      border-radius: 10px;
    }

    .qodef-header-navigation ul li ul {
      top: 80%!important;
    }

       .qodef-fullscreen-menu {
      padding: 0px 25px;
    }

    .qodef-fullscreen-menu > ul > li > a {
      margin-bottom: 20px!important;
    }


    /* 03. FOOTER */
    #qodef-page-footer-bottom-area p {
      font-size: 0.8em;
      margin: 0px 0px!important;
    }

    #qodef-back-to-top .qodef-back-to-top-icon {
      bottom: 100px;
    }

    #qodef-page-footer, #qodef-page-footer a {
      color: #ffffff;
    }

      /* 03.01. Icons */

          .footer-icon-wrapper {
        display: inline-flex;
        gap: 10px;
        align-items: center;
        padding-top: 10px;
      }

      .footer-icon {
        display: inline-flex;
        transition: transform 0.3s ease; /* scale-Übergang */
          display: inline-flex;
          width: 40px;
          height: 40px;
          align-items: center;
          justify-content: center;
          line-height: 0;   /* verhindert „extra Höhe“ aus Text-Linebox */
          padding: 0;       /* sichert die Hitbox exakt auf 40×40 */
          box-sizing: border-box;
      }

      .footer-icon svg {
        display: block;               /* verhindert Text-baseline Probleme */
        vertical-align: middle;       /* falls inline gerendert */
        preserveAspectRatio: xMidYMid meet;
      }

      .footer-icon svg rect {
        transition: fill 0.8s ease, stroke 0.8s ease;
      }

      /* Instagram Overlay */
      .footer-icon.instagram svg .bg-hover {
        transition: opacity 0.8s ease;
      }
      .footer-icon.instagram:hover svg .bg-hover {
        opacity: 1;
      }

      /* Standardzustand X: weißer Rahmen */
      .footer-icon.x svg rect {
        stroke: #fff;
        stroke-width: 2px;
      }

      /* Hover-Farben */
      .footer-icon.facebook:hover svg rect,
      .footer-icon.x:hover svg rect {
        fill: red;
      }
      .footer-icon.youtube:hover svg rect {
        fill: #666;
      }

      /* Scale-Effekt für alle Icons */
      .footer-icon:hover {
        transform: scale(1.15); /* leichtes Vergrößern */
      }



    /* 04. BLOG */ 

    .qodef-blog.qodef--single .qodef-blog-item .qodef-e-content {
        padding-top: 0px!important;
        padding-bottom: 0px!important;
        margin-bottom: 0px!important;
        border-bottom: 0px!important;
    }


    /* 05. VERANSTALTUNGEN */ 
    

    /*.mitwirkende p {
      margin: 0px!important;
    }*/

    .mitwirkende.links {
      font-size: 0.75em;
      padding-top: 4px;
    }

    .mitwirkende.rechts {
      font-weight: 500;
    }


  /*05.01. Veranstaltungen Carousels*/
  

.border-red-carousel .e-con-inner {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 10px;
 /* border: 1px solid var(--Primary);*/
  border-radius: 3px;
  padding: 10px;

  
  &::before,
  &::after {
      content: "";
      position: absolute;
      width: 50px;
      height: 25px;
      transition: .3s ease-in-out;
  }
  
  &::before {
      top: 5px;
      left: -20px;
      border-top: 5px solid var(--ParagraphBlack);
      border-left: 5px solid var(--ParagraphBlack);
       border-radius: 5px;
  }
  
  &::after {
      right: -20px;
      bottom: 5px;
      border-bottom: 5px solid var(--Primary);
      border-right: 5px solid var(--Primary);
       border-radius: 5px;
  }
  
  &:hover::before,
  &:hover::after {
      width: calc(50% + 60px);
      height: calc(50% + 60px);
  }
}

    .carousel-veranstaltungen { 
      
      .qodef-addons-blog-slider.qodef-item-layout--boxed .qodef-e-inner {
          box-shadow: none;
      }

      h3 {
      font-size: 28px!important;
      color: var(--ParagraphBlack)!important;
      font-weight: 900!important;
      text-transform: uppercase;
      font-family: var(--FontSansSerif);
      margin-bottom: 0px!important;
      }
  
      .qodef-e-info-item.qodef-e-info-category {
        font-family: var(--FontSerif);
        pointer-events: none;
        padding-bottom: 10px;
      }
      
      .qodef-e-excerpt {
        font-size: 18px;
        font-weight: 700;
        margin: 0 0 0 0!important;
      }
  
      .qodef-e-content {
        padding: 40px 20px 0px 0px!important;
      }
    }


/* 06. Bildergalerie */
    

    .acf-galerie-wrapper {
      margin-bottom: 2rem;
    }

    .acf-galerie-grid {
      display: grid;
      gap: 35px;
      margin-bottom: 1rem;
    }

    .acf-galerie-grid.gross {
      grid-template-columns: repeat(2, 1fr);
    }

    .acf-galerie-grid.klein {
      grid-template-columns: repeat(4, 1fr);
      display: none;
    }

    .acf-galerie-grid img {
      width: 100%;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      border-radius: 5px;
      transition: transform 0.2s ease;
    }

    .acf-galerie-grid img:hover {
      transform: scale(1.02);
    }

    .acf-toggle-btn {
      background: none;
      border: none;
      color: var(--Primary);
      font-weight: bold;
      cursor: pointer;
      margin-bottom: 30px;
      font-size: 15px;
      font-family: inherit;
    }

    .acf-toggle-btn .zeichen {
      font-weight: bold;
      margin-right: 5px;
      transition: transform 0.2s;
    }

    .acf-toggle-btn.offen .zeichen {
      content: "-";
      transform: rotate(45deg);
    }

    .toggle-inhalt.sichtbar {
      display: grid;
    }


.border-red-gallery .acf-galerie-grid a {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0px;
 /* border: 1px solid var(--Primary);*/
  border-radius: 3px;
  padding: 10px;

  
  &::before,
  &::after {
      content: "";
      position: absolute;
      width: 50px;
      height: 25px;
      transition: .3s ease-in-out;
      pointer-events: none;  
  }
  
  &::before {
      top: -5px;
      left: -5px;
      border-top: 3px solid var(--ParagraphBlack);
      border-left: 3px solid var(--ParagraphBlack);
      border-radius: 3px;
  }
  
  &::after {
      right: -5px;
      bottom: -5px;
      border-bottom: 3px solid var(--Primary);
      border-right: 3px solid var(--Primary);
      border-radius: 3px;
  }
  
  &:hover::before,
  &:hover::after {
      width: calc(50% + 60px);
      height: calc(50% + 60px);
  }
}

/* 07. SPIELPLAN */


/*.e-load-more-message {
   
    text-align: center;   
    font-size: 30px!important;
    font-weight: 800;
    text-transform: uppercase;
    background-image: url(/wp-content/uploads/2025/09/spielplan-silvester.webp);
    min-height: 800px;
    background-size: cover;
    background-position: center;
    color: white!important;
    padding: 100px;
    line-height: 1.5em;}*/

  #genre-filter {
    display: none;
    margin-bottom: 20px;
  }
  .veranstaltungs-datum {
  text-align: right;
  line-height: 1.1;
  font-size: 1.2em;
  text-transform: uppercase;
  font-weight: 900;
  }

  .bild-spielplan {
  position: relative;
  width: 100%;
  padding-top: 100%; /*macht es quadratisch */
  /* padding-top: 66.6667%;   macht es 3:2 */
  overflow: hidden;
}

.bild-spielplan img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%!important;
  object-fit: cover; /* wichtig: füllt ohne Verzerren */
  border-radius: 5px; /* optional */
}

.datum-uhrzeit {
  font-weight: 500;
  font-size: 0.9em;
}

.datum-uhrzeit .elementor-icon {
  font-size: 18px;
  padding-top: 4px;

}

.spielplan .titel h3 {
  font-family: var(--FontSansSerif);
  font-weight: 900;
  font-size: 1.4em;
  text-transform: uppercase;
  margin: 0px;  

}

.zusatzinfo-alle {
  font-weight: 400;
}

.zusatzinfo-einzel {
  font-weight: 600;
  color: var(--Primary);
}

h4.genre, .genre h4 {
  font-size: 1em;
  font-weight: 500;
  text-transform: uppercase;
  margin: 0px 0px 5px 0px
}

  /* 07.01. Trenner für Monate */

      .monat-trenner {
      display: flex;
      align-items: center;
      margin: 2em 0 1em;
      font-weight: 700;
      font-family: var(--FontSerif);
      font-size: 1.2em;
      color: var(--Primary);
    }

    .monat-trenner .monat-name {
      white-space: nowrap;
      margin-right: 1em;
    }

    .monat-trenner .linie {
      flex: 1;
      height: 2px;
      background-color: var(--ParagraphBlack);
    }

/* 08. Übersichtsseite Festivals */
 .border-red-festival-vorschau .e-con-inner{
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0px;
 /* border: 1px solid var(--Primary);*/
  border-radius: 3px;
  padding: 10px;

  
  &::before,
  &::after {
      content: "";
      position: absolute;
      width: 50px;
      height: 25px;
      transition: .3s ease-in-out;
      pointer-events: none;  
  }
  
  &::before {
      top: -15px;
      left: -15px;
      border-top: 5px solid var(--ParagraphBlack);
      border-left: 5px solid var(--ParagraphBlack);
      border-radius: 5px;
  }
  
  &::after {
      right: -15px;
      bottom: -15px;
      border-bottom: 5px solid var(--Primary);
      border-right: 5px solid var(--Primary);
      border-radius: 5px;
  }
  
  &:hover::before,
  &:hover::after {
      width: calc(50% + 60px);
      height: calc(50% + 60px);
  }
}

  /* 08.01. Afrika Film Festival 2025 */

        body.category-afrika-film-festival-2025 {
        background: linear-gradient(
          rgba(0, 0, 0, 0.3),
          rgba(0, 0, 0, 0.7)
        ),
        url('/wp-content/uploads/2025/09/AfrikaFilmFestival_bg_org-scaled.webp') center/cover;
        color: var(--Grey);
        background-attachment: fixed;
        background-size: contain;
    }


    body.category-afrika-film-festival-2025.qodef-header--standard #qodef-page-header {
      background-color: rgba(255,255,255,.7)!important;
    }

    body.category-afrika-film-festival-2025 h1, body.category-afrika-film-festival-2025 h2, body.category-afrika-film-festival-2025 h3, body.category-afrika-film-festival-2025 h4, body.category-afrika-film-festival-2025 h5, body.category-afrika-film-festival-2025 h6, body.category-afrika-film-festival-2025 p, body.category-afrika-film-festival-2025 li, body.category-afrika-film-festival-2025 a, body.category-afrika-film-festival-2025 a:hover, body.category-afrika-film-festival-2025 .qodef-qi-button.qodef-layout--outlined, body.category-afrika-film-festival-2025 .e-loop-nothing-found-message__text {
      color: var(--Grey);
    }

    body.category-afrika-film-festival-2025 .monat-trenner .linie {
      background-color: var(--Grey);
    }

    body.category-afrika-film-festival-2025 .wrap-festival-spielplan:hover{
      background-color: var(--Primary-Trans)!important;
      }

      body.category-afrika-film-festival-2025 .zusatzinfo-einzel {
        color: gold;
      }

      .linden-museum {
        text-decoration: underline;
        font-weight: 800;
      }



/* 09. YouTube Consent */

    .ytc-wrap{position:relative;width:100%;background:#000;border-radius:12px;overflow:hidden}
    .ytc-thumb{display:block;width:100%;height:100%!important;object-fit:cover}

    /* Vollflächiges Overlay */
    .ytc-consent-overlay{
      position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
      background:rgba(0,0,0,.1); color:#fff; padding:1rem
    }
    .ytc-consent-inner{
      width:100%; max-width:560px; text-align:center; display:grid; gap:.75rem;
      background:rgba(0,0,0,.6); border-radius:12px; padding:1rem
    }
    .ytc-consent-text a{color:#fff; text-decoration:underline}
    .ytc-consent-text a:hover{color:var(--Primary); text-decoration:underline}
    .ytc-consent-check{display:inline-flex; gap:.5rem; align-items:center; justify-content:center; font-size:.95rem}
    .ytc-check{width:1rem; height:1rem}
    .ytc-playbtn{
      all:unset; cursor:not-allowed; padding:.65rem 1rem; border-radius:10px; font-weight:700;
      background:#ffffff; color:#000000; opacity:.6; display:inline-block
    }
    .ytc-playbtn.enabled{cursor:pointer; opacity:1}

    /* iFrame */
    .ytc-iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

    /* Widerruf-Button (über dem iFrame) */
    .ytc-revoke{
      position:absolute; top:.5rem; right:.5rem; z-index:3;
      background:rgba(0,0,0,.6); color:#fff; border:1px solid rgba(255,255,255,.35);
      border-radius:8px; padding:.35rem .6rem; font-size:.85rem; cursor:pointer
    }
    .ytc-revoke:hover{background:rgba(0,0,0,.75)}

/* 10. Kontaktformular */
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="url"], .wpcf7 input[type="password"], .wpcf7 input[type="number"], .wpcf7 input[type="tel"], .wpcf7 input[type="search"], .wpcf7 input[type="date"], .wpcf7 textarea, .wpcf7 select {
  color: var(--ParagraphBlack)!important;
}

input[type=date], input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url], textarea, .wpcf7 select {
  border: 2px solid var(--ParagraphBlack)!important;
  border-radius: 16px!important;
 padding: 10px 15px!important; 
 font-weight: 500!important;
}

label {
  font-family: var(--FontSansSerif)!important;
}


/*MEDIA QUERIES*/

@media only screen and (max-width: 1200px) {
     .spielplan .elementor-element {
        column-gap: 25px;
      }
}

@media only screen and (max-width: 1024px) {
     .qodef-qi-button.qodef-layout--outlined, .acysubbuttons .subbutton {
      font-size: 0.8em;
      padding: 10px 30px;
    font-weight: 700;}

      .ticket {
        width: 25%!important;
      }
   }


@media only screen and (min-width: 768px) {
        .taxonomy-filter-wrap {
          display: block; /* Immer anzeigen auf Desktop */
      }

      .filter-toggle-btn {
          display: none; /* Auf Desktop den Button nicht anzeigen */
      }
    }

@media only screen and (max-width:767px) {
      h1 {
        font-size: 30px!important;
      }

      h2 {
        font-size: 25px!important;
      }

      h4 {
        font-size: 18px!important;
      }

      .qodef-content-grid {
        width: 98%!important;
      }

      .spielplan .elementor-element {
        column-gap: 0px;
      }

      .veranstaltungs-datum {
        font-size: 20px;
      }

      p, ul, ol {
        margin: 0px 0px 15px 0px!important;
      }

      .zusatzinfo-home, .zusatzinfo-alle, .zusatzinfo-einzel, h4.genre, .genre h4, p, li, body {
        font-size: 17px!important;
        line-height: 1.5em;
      }

      .spielplan .titel h3 {
        font-size: 20px;
      }

      .spielplan .elementor-element {
        --widgets-spacing: 0px;
        --widgets-spacing-row: 10px!important;
        --widgets-spacing-column: 25px;
      }

      .bild-spielplan-mob {
      width: 100%!important;  /* Bild auf die volle Bildschirmbreite dehnen */
      aspect-ratio: 3 / 2;  /* Setzt das Seitenverhältnis auf 3:2 */
      overflow: hidden;  /* Sicherstellen, dass der Überlauf verborgen ist */
    }

     .bild-spielplan-mob img {
      width: 100%;
      height: 100%!important;
      object-fit: cover;  /* Bild passt sich dem Container an, ohne Verzerrung */
    }

    .ytc-consent-text {
    font-size: 15px;
    line-height: 1.5em;
    }

    .ytc-consent-inner {
      padding: 0px;
    }

    .ytc-playbtn {
      font-size: 15px;
      padding: 5px; 
    }

    .border-red-gallery .acf-galerie-grid a {
      padding: 3px;
    }

    .acf-galerie-grid {
      gap: 25px;
    }

    .acf-galerie-grid.klein {
    grid-template-columns: repeat(2, 1fr);
    }
    
    .mitwirkende p {
      margin-bottom: 0px!important;
    }

    /* Filter Spielplan */

    .filter-container {
    display: flex; /* Flexbox aktivieren */
    justify-content: flex-end; /* Button nach rechts ausrichten */
      padding-right: 15px;
    } 
       .taxonomy-filter-wrap {
        display: none;
        transition: all 0.6s ease; /* Smooth transition */
    }

    .filter-toggle-btn {
        display: inline-block;
        background-color:#fff;
        color: var(--ParagraphBlack);
        padding: 8px 18px;
        border: solid 2px var(--Primary);
        border-radius: 50px;
        cursor: pointer;
        font-size: 17px;
        font-weight: 700;
        margin-bottom: 15px;
    }

    .filter-toggle-btn[aria-expanded="true"] {
        background-color: var(--Primary);
        color: #fff;

    }



  
    }


@media only screen and (max-width:600px) { 
      .qodef-grid-inner >.qodef-e:nth-of-type(even) > * {
        margin-top: 0px!important;
      }
    }