@font-face {
    font-family: 'base-bloom';
    font-style: normal;
    font-weight: bold;
    src: url('../font/base-bloom.otf');
    /* IE9 Compat Modes */
    src: local(''),
      url('../font/base-bloom.otf') format('truetype'),
      /* Safari, Android, iOS */
      url('../font/base-bloom.otf') format('opentype');
  }

  @font-face {
    font-family: 'robotomonobold';
    font-style: normal;
    font-weight: bold;
    src: url('../font/RobotoMono-Bold.ttf');
    /* IE9 Compat Modes */
    src: local(''),
      url('../font/RobotoMono-Bold.ttf') format('truetype'),
      /* Safari, Android, iOS */
      url('../font/RobotoMono-Bold.ttf') format('opentype');
  }

  @font-face {
    font-family: 'robotomonolight';
    font-style: normal;
    font-weight: bold;
    src: url('../font/RobotoMono-Light.ttf');
    /* IE9 Compat Modes */
    src: local(''),
      url('../font/RobotoMono-Light.ttf') format('truetype'),
      /* Safari, Android, iOS */
      url('../font/RobotoMono-Light.ttf') format('opentype');
  }

  :root {
    /* theme colors */
    --dave-silver: #cccccc;
    --dave-black: #000000;
    --dave-orange: #ffa200;
    --dave-midnight2024: #103a44;
    --dave-midnight: #493562;
    --dave-white: #fefefe;

    --dave-veronica-2024: #a800ff;
    --dave-veronica: #b6186b;

    --dave2025-yellow: #f2cd08;
    --dave2025-orange: #e99739;
    --dave2025-pink: #b6186b;
    --dave2025-lila: #691c6e;
    --dave2025-violet: #493562;

    /*++++++++++++++++++++++*/
    /*                      */
    /*     light mode       */
    /*                      */
    /*++++++++++++++++++++++*/

    /* text colors */
    --color-main: var(--dave-black);
    --color-text: var(--dave-black);
    --color-text-alt: var(--dave-white);


    /* background color */
    --color-background: var(--dave-white);
    --color-background-alt: var(--dave2025-lila);

    --color-gradient-2025: linear-gradient(135deg, var(--dave2025-violet), var(--dave2025-lila), var(--dave2025-pink), var(--dave2025-orange), var(--dave2025-yellow));

    /* hover color */
    --color-highlight: var(--dave2025-lila);

    /* color for decoration */
    --color-decoration: var(--light-grey);


    /* other variables */

    /* font weight */
    --font-headline: 'NeueMetanaNext-SemiBold';

    /* animation duration */
    --transistion-time: 300ms;

    /* maximal width for content */
    --maxwidth: 1200px;

    /* side spaceing for content */
    --side-padding: 16px;

    /* fontsize mobile */
    --font-mobile: 1.6rem;

    /* fontsize tablet */
    --font-tablet: 1.7rem;

    /* fontsize laptop */
    --font-laptop: 1.8rem;

    --font-headline: 'NeueMetanaNext-SemiBold', sans-serif;

    --font-start: 'base-bloom';

    --font-headline2: 'robotomonobold';
    --font-text: 'robotomonolight';

  }


  html {
    font-size: 62.5%;
    /* 1rem = 10px */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    overflow-x: hidden;
    /* Vorsichtig verwenden, wenn sicher */
  }

  body {
    background-color: var(--color-background);
    background-image: url("");
    background-position: top;
    background-repeat: no-repeat;
    background-size: 100%;
    background-attachment: fixed;
    --wp--preset--color--white: var(--dave-orange);
    --wp--preset--color--vivid-red: var(--dave-white) !important;
    font-size: 18px;
    line-height: 1.4em !important;
    margin-left: auto;
    margin-right: auto;
  }


  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;

  }

  * {
    font-family: 'Roboto Condensed Regular', sans-serif;

  }



  /* Menu */

  #header-fixed {
    width: 100%;
    z-index: 20000;
    height: 92px;
    position: fixed;
    z-index: 99999;
    background: var(--color-gradient-2025);

  }

  .menu-header-container ul,
  .menu-header-en-container ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
    display: flex;
    width: 100%;
    column-gap: 0%;

  }

  .menu-header-container li,
  .menu-header-en-container li {
    float: left;
    list-style: outside none none;
    padding: 0px 0px;
    /*background-color: var(--color-background-alt) !important;*/
    margin-top: 8px;
  }

  #menu-header .sub-menu,
  #menu-header-en .sub-menu {
    position: absolute;
    display: none;
    width: 100%;
    border-radius: 0px;
    background-color: var(--color-background-alt);
    max-width: 300px !important;
    left: inherit !important;
    border-radius: 0px;
    padding-bottom: 1.6rem;
  }


  #menu-header li:hover .sub-menu,
  #menu-en-header li:hover .sub-menu {
    display: block;
  }


  #header-outer {

    height: 92px;
    position: relative;
    z-index: 99999;
    /* background-color: var(--color-background-alt);*/
    width: 100%;
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    padding-left: 16px;
  }

  #header-left {
    float: none;
    padding-top: 1.2rem;
    z-index: 30000;
    /*  background-color: var(--color-background-alt);*/
    width: fit-content;
    margin-top: 0px;

    img {
      width: auto;
      height: 72px;
      float: left;
      margin-top: 0px;
      max-width: none !important;

    }
  }

  #header-right {
    z-index: 60000;
    margin-top: 0rem;
    margin-bottom: 0rem;
    margin-right: 0rem;
    margin-left: 2em;
    width: 100%;
    top: 20px !important;
    float: none;
    place-content: center;
  }



  /* Menu Itmes */

  #header-right a {
    display: block;
    border: none !important;
    padding: 0 !important;
    margin-right: 2em !important;
    margin-left: 2em !important;
    margin-top: 1em !important;
    margin-bottom: 1em !important;
    color: var(--color-text-alt) !important;
    /* background-color: var(--color-background-alt);*/
    font-family: var(--font-headline2);
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase;
    border-bottom: 1px solid !important;
    border-bottom-color: transparent !important;
    transition: border-bottom-color calc(var(--transistion-time)/2) ease-in-out;

    &:hover {
      border-bottom-color: var(--color-text-alt) !important;

    }
  }

  /* Hamburger Icon */

  #shiftnav-toggle-main.shiftnav-togglebar-transparent {
    background-color: none !important;
  }

  #shiftnav-toggle-main .shiftnav-toggle-burger,
  #shiftnav-toggle-main.shiftnav-toggle-main-entire-bar::before {
    float: left;
    content: '\f0c9';
    font-family: FontAwesome;
    padding: 8px 20px;
    padding-top: 16px;
    padding-right: 8px;
    padding-bottom: 24px;
    padding-left: 20px;
    margin-left: 0px;
    position: relative;
    z-index: 20;
    line-height: 1em;
  }

  .shiftnav-target {

    color: var(--color-text-alt) !important;
    border: none !important;
    transition: background-color var(--transistion-time) ease-in-out;

    &:hover {
      color: var(--color-text-alt) !important;
      background-color: var(--color-background-alt) !important;
    }

  }

  .shiftnav.shiftnav-skin-light ul.shiftnav-menu li.menu-item > .shiftnav-target {
        text-transform: uppercase !important;
        font-family: var(--font-headline2);
        font-size: 16px !important;
        line-height: 24px !important;
    }


  /* Hero Image */
  #frontbox-hero {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("https://www.dave-festival.de/wp-content/themes/dave/gfx/fufu/2024/hero2024/1.jpg");

    /*height: clamp(480px, 50vw, 903px);*/
    height: 95vh;

    margin-left: 0rem;
    margin-right: 0rem;

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: sticky;
    margin-top: 0;
    margin-bottom: 0;
    top: 0px;
    z-index: -99999;

  }


  div#frontbox-hero-box {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    width: 90%;
    padding-top: 103px;
  }

  /* Hero Text centriert über dem Hero Bild */

  .frontbox-hero-textbox {
    display: block;
    justify-content: center;
    margin-bottom: 0 !important;
  }


  .frontbox-hero-text2025 {
    font-size: clamp(3.2rem, 5vw, 9.6rem) !important;
    text-align: center;
    color: var(--dave-white);
    line-height: 1;
    text-transform: uppercase;
    border-bottom: none;
    margin: 0px;
    font-family: var(--font-start);
    margin-left: 2vw;
    margin-right: 2vw;
    margin-bottom: 0rem !important;
  }


  .background-start {
    padding-top: 0rem !important;
    background-color: var(--color-background);
  }

  .outer {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 32px;

    @media only screen and (min-width: 576px) {
      padding-top: 40px;
    }

    @media only screen and (min-width: 824px) {
      padding-top: 80px;
    }
  }

  .outer-page {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: clamp(3.2rem, 6vw, 12.8rem);
    margin-top: 0px;

    @media only screen and (min-width: 576px) {}

    @media only screen and (min-width: 824px) {}
  }


  #content-inner {
    margin: 0 auto;
    max-width: 1200px;
    padding-left: 16px;
    padding-right: 16px;
  }

  h1,
  h2,
  h2 strong,
  h3,
  h3 strong h4,
  h4 strong {
    color: var(--color-text);
    margin-top: 0rem !important;
    margin-bottom: clamp(1.6rem, 2vw, 3.2rem) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-family: var(--font-headline2) !important;
    border: none;
    line-height: 1.2 !important;
  }


  h1,
  h1.single-title {
    font-size: clamp(2.4rem, 4vw, 6.4rem) !important;
    text-transform: uppercase;
  }

  h2 {
    font-size: clamp(1.6rem, 2vw, 3.2rem) !important;
    text-transform: uppercase;
  }

  h3,
  h4,
  h3.wp-block-heading,
  h4.wp-block-heading {
    font-size: clamp(1.6rem, 2vw, 2.4rem) !important;
    text-transform: uppercase;
  }

  h2.wp-block-heading,
  h3.wp-block-heading,
  h4.wp-block-heading {
    margin-top: 2em !important;
    margin-bottom: 1em !important;
  }

  h2.top,
  h3.top,
  h4.top {
    margin-top: 0em !important;
  }


  /* font size Text */
  p,
  a {
    font-size: var(--font-mobile) !important;
    line-height: 1.5 !important;
    letter-spacing: 0.02em;
    color: var(--color-text) !important;

    @media only screen and (min-width: 576px) {
      font-size: var(--font-tablet) !important;
    }

    @media only screen and (min-width: 824px) {
      font-size: var(--font-laptop) !important;
    }

  }


  p {
    margin-top: 0 !important;
    margin-bottom: 0.5em;
    padding: 0 !important;
    width: 100%;

    @media only screen and (min-width: 824px) {
      margin-bottom: 1em;
    }
  }

  p:last-of-type {
    margin-bottom: 1em !important;

    @media only screen and (min-width: 824px) {
      margin-bottom: 2em;
    }
  }


  a.text-link {
    color: var(--color-text) !important;
    border-bottom: 1px solid var(--color-text) !important;
    transition: color var(--transistion-time) ease-in-out,
      border-color var(--transistion-time) ease-in-out;

    &:hover {
      color: var(--color-highlight) !important;
      border-color: var(--dave-veronica) !important;

    }
  }

  a {
    color: var(--color-text) !important;
    border-bottom: 1px solid var(--color-text) !important;
    transition: color var(--transistion-time) ease-in-out,
      border-color var(--transistion-time) ease-in-out;

    &:hover {
      color: var(--color-highlight) !important;
      border-color: var(--color-highlight) !important;

    }
  }

  a.image-link,
  a img {

    border: none !important;

  }

  .icon-link {

    border: none !important;
    border: 1px solid var(--color-text) !important;
    border-radius: 24px !important;
    margin-top: 1em;
    padding: 11px 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    transition: background-color var(--transistion-time) ease-in-out,
      border-color var(--transistion-time) ease-in-out,
      padding var(--transistion-time) ease-in-out,
      color var(--transistion-time) ease-in-out;


    svg {
      color: var(--color-text) !important;
      text-decoration: none !important;
      height: auto;
      width: 18px;
      transition: background-color var(--transistion-time) ease-in-out,
        transform var(--transistion-time) ease-in-out,
        color var(--transistion-time) ease-in-out;

    }

    &:hover {
      color: var(--color-text-alt) !important;
      background-color: var(--color-highlight) !important;
      border-color: var(--color-highlight) !important;
      padding-left: 2.4rem;

      svg {
        color: var(--color-text-alt) !important;
        /* transform: scaleX(1.5)*/
      }

    }

  }

  a.button-link,
  .wp-block-button__link {
    color: var(--color-main) !important;
    background-color: transparent !important;
    padding: 0.6em 1.3em !important;
    margin-bottom: 2em !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    border: 1px solid var(--color-main) !important;
    border-radius: 24px !important;
    line-height: 1.3 !important;
    width: fit-content;
    display: flex;
    justify-content: center;
    transition: background-color var(--transistion-time) ease-in-out,
      border-color var(--transistion-time) ease-in-out,
      color var(--transistion-time) ease-in-out;

    svg.icon-arrow-link {
      height: 20px;
      width: 24px;
      margin-left: 8px !important;
      ;
      margin-right: 8px !important;
      ;
      color: var(--dave-text) !important;
      transition: margin var(--transistion-time) ease-in-out,
        color var(--transistion-time) ease-in-out;
    }


    &:hover {
      color: var(--color-text-alt) !important;
      background-color: var(--color-highlight) !important;
      border-color: var(--color-highlight) !important;

      svg.icon-arrow-link {
        color: var(--color-text-alt) !important;
        margin-left: 16px !important;
        margin-right: 0px !important;
      }

    }
  }


  .button-navi-link {
    color: var(--color-main) !important;
    background-color: var(--color-background) !important;
    padding: 0.6em 1.3em !important;
    padding-left: 8px !important;
    margin-bottom: 2em !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    border: 1px solid var(--color-main) !important;
    border-radius: 24px !important;
    line-height: 1.3 !important;
    width: fit-content;
    transition: background-color var(--transistion-time) ease-in-out,
      border-color var(--transistion-time) ease-in-out,
      color var(--transistion-time) ease-in-out;

    svg.icon-arrow-left {
      height: 20px;
      width: 24px;
      margin-left: 8px;
      vertical-align: text-top;
      rotate: 180deg;
      color: var(--dave-text) !important;
      transition: margin var(--transistion-time) ease-in-out,
        color var(--transistion-time) ease-in-out;
    }


    &:hover {
      color: var(--color-text-alt) !important;
      background-color: var(--color-highlight) !important;
      border-color: var(--color-highlight) !important;

      svg.icon-arrow-left {
        color: var(--color-text-alt) !important;
        margin-left: 0px !important;
        margin-right: 16px !important;
      }

    }
  }


  ol,
  ul.wp-block-list {
    padding-left: 24px !important;
  }

  .breadcrumbs2025,
  #subpage-breadcrumb {

    text-transform: uppercase;
    text-align: right;
    display: none;
    padding-top: 14.4rem;


    a,
    p {
      font-size: 1.4rem !important;
      border: none !important;
    }

    p:last-of-type {
      margin-bottom: 0px !important;
    }

    p {
      padding: 0;
    }

    @media only screen and (min-width: 824px) {
      display: inline-block;
    }

    a {
      color: var(--color-text) !important;
      transition: color var(--transistion-time) ease-in-out;

      &:hover {
        color: var(--color-highlight) !important;

      }
    }
  }

  .single-page-article {
    display: block;

    .header-pic {
      aspect-ratio: 2/1;
      object-fit: cover;
      width: 100%;
    }

    img {
      aspect-ratio: 3/2;
      object-fit: cover;
      width: 100%;
    }

    p {
      margin-bottom: 1em;
    }
  }



  .columns-2 {
    columns: 1 auto;
    column-gap: 5%;
    orphans: 3;
    widows: 3;
    margin-bottom: 2em;

    a>img {
      border: none !important;
    }

    .rl-gallery-container {
      column-span: all;
      padding-top: 1em;
    }

    .rl-shortcode {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    h2,
    h2 strong {
      margin-top: 2em !important;
      margin-bottom: 1em !important;

      font-size: clamp(1.8rem, 2vw, 2.4rem) !important;
      text-transform: uppercase;

    }

    h3,
    h3 strong {
      margin-top: 2em !important;
      margin-bottom: 1em !important;

      font-size: clamp(1.6rem, 1.5vw, 2.0rem) !important;
      text-transform: uppercase;

    }

    ul,
    ol {
      padding-left: 24px !important;
    }


    @media only screen and (min-width: 824px) {
      columns: 2 auto;

      h2,
      h2 strong,
      h3,
      h3 strong {
        margin-top: 2em !important;
        margin-bottom: 1em !important;

      }
    }

  }

  /* Grid Feature with 2 columns */

  .grid-2-feature {
    display: grid;
    grid-template-columns: 100%;
    row-gap: 1.6rem;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-top: 0px;
    padding-bottom: 32px;

    h2 {
      color: var(--color-text);
      font-size: clamp(2.4rem, 4vw, 4.8rem) !important;
      text-transform: uppercase;
    }

    h3 {
      color: var(--color-text);
      font-size: clamp(2.4rem, 2vw, 3.2rem);
      text-transform: uppercase;
    }

    h2,
    h3 {
      margin-bottom: 8px !important
    }

    img {
      filter: drop-shadow(0px 0px 0px);
      margin-left: auto;
      margin-right: auto;
      margin-top: 0 !important;
      margin-bottom: 0 !important;
      aspect-ratio: 3/2;
      height: 100%;
      object-fit: cover;
      min-height: none;

      @media only screen and (min-width: 824px) {
        min-height: 342px;
      }
    }

    a.button-link {
      margin-bottom: 0 !important;
    }

    @media only screen and (min-width: 576px) {
      padding-top: 24px;
      padding-bottom: 24px;

    }

    @media only screen and (min-width: 824px) {
      padding-top: 48px;
      padding-bottom: 48px;
      grid-template-columns: 47.5% 47.5%;
      column-gap: 5%;

      h1,
      h2,
      h3 {
        margin-bottom: 16px !important;
      }

      .grid-image-right {
        grid-column: 2;
        grid-row: 1;
      }

      /* swap column for text */

      .grid-text-left {
        grid-column: 1;
        grid-row: 1;
      }

    }

    @media only screen and (min-width: 1024px) {

      h1,
      h2,
      h3 {
        margin-bottom: 16px !important;
      }

    }
  }


  /*   Grid 3 Columns for archive pages */

  .grid-2 {
    display: grid;
    grid-template-columns: 100%;
    row-gap: 3.2rem;
    padding-top: 16px;
    padding-bottom: 0;


    p,
    h2 {
      /*margin: 0 !important;*/
      padding: 0 !important;
      margin-bottom: clamp(0.8rem, 1vw, 1.6rem) !important;
    }

    h2 {

      font-size: clamp(1.6rem, 2vw, 2.4rem) !important;
    }

    p,
    a {
      font-size: var(--font-mobile) !important;

      @media only screen and (min-width: 576px) {
        font-size: var(--font-tablet) !important;
      }

      @media only screen and (min-width: 824px) {
        font-size: var(--font-laptop) !important;
      }

    }

    img {
      filter: drop-shadow(0px 0px 0px);
      margin-left: auto;
      margin-right: auto;
      aspect-ratio: 3/2;
      width: 100%;
      object-fit: cover;
    }

    @media only screen and (min-width: 576px) {

      grid-template-columns: 49% 49%;
      column-gap: 2%;
      row-gap: 6.4rem;

    }

    .event-content-text {
      p:first-child {
        margin: 0
      }

      img {
        aspect-ratio: auto;
        margin-bottom: 0 !important;
      }
    }

  }

  /*   Grid 3 Columns for archive pages */

  .grid-3 {
    display: grid;
    grid-template-columns: 100%;
    row-gap: 3.2rem;
    padding-top: 16px;
    padding-bottom: 0;


    p,
    h2 {
      /*margin: 0 !important;*/
      padding: 0 !important;
      margin-bottom: clamp(0.8rem, 1vw, 1.6rem) !important;
    }

    h2 {

      font-size: clamp(1.6rem, 2vw, 2.4rem) !important;
    }

    p,
    a {
      font-size: var(--font-mobile) !important;

      @media only screen and (min-width: 576px) {
        font-size: var(--font-tablet) !important;
      }

      @media only screen and (min-width: 824px) {
        font-size: var(--font-laptop) !important;
      }

    }

    li {
      list-style-type: none;
    }

    img {
      filter: drop-shadow(0px 0px 0px);
      margin-left: auto;
      margin-right: auto;
      aspect-ratio: 3/2;
      width: 100%;
      object-fit: cover;
    }

    @media only screen and (min-width: 576px) {

      grid-template-columns: 49% 49%;
      column-gap: 2%;
      row-gap: 6.4rem;

    }

    @media only screen and (min-width: 824px) {
      grid-template-columns: 32% 32% 32%;
      column-gap: 2%;

    }
  }


  /* Bilder & Medien */

  #header-left {

    img {
      margin-bottom: 0rem !important;
    }
  }

  img {

    margin-top: 0 !important;
    margin-bottom: clamp(1.6rem, 2vw, 3.2rem) !important;
    padding: 0 !important;
    width: 100%;
    height: auto;

    @media only screen and (min-width: 824px) {
      /*margin-bottom: 2rem !important;*/

    }

  }

  .video {
    aspect-ratio: 16 / 9;
    width: 100%;
    margin-bottom: 1.6rem;
    box-sizing: content-box;
  }

  iframe {
    width: 100% !important;
    aspect-ratio: 3/2;
    height: auto;
    margin-bottom: 1.6rem;
  }

  /* WP Flex Box */

  :where(.wp-block-columns.is-layout-flex) {
    row-gap: 0rem;
    column-gap: 6.4rem;
  }



  /* funded by */

  h3.fundedby {

    font-size: clamp(2.4rem, 4vw, 4.8rem) !important;
    padding-top: 16px !important;
  }

  .funded-grid {
    display: grid;
    grid-template-columns: 100%;
    row-gap: 1.6rem;
    padding-top: 0;
    padding-bottom: 32px;


    a {
      border: none !important;
      width: 90%;
      justify-self: center;

      &:hover {
        color: var(--color-text);
      }

    }

    img {
      margin: 0 !important;
      object-fit: cover;
      width: 100% !important;
      height: auto;
    }

    @media only screen and (min-width: 576px) {
      grid-template-columns: 49% 49%;
      column-gap: 2%;
      padding-bottom: 40px;

      a {
        width: 95%;
        max-width: 400px;

      }

      :last-child {
        grid-column: 1 / -1;
        /* über beide Spalten spannen */
        justify-self: center;
        /* horizontal zentrieren */
      }
    }

    @media only screen and (min-width: 824px) {
      grid-template-columns: 32% 32% 32%;
      column-gap: 2%;
      padding-bottom: 80px;

      a {
        width: 100%;
      }

      :last-child {
        grid-column: 3 / 3;
        /* OSK Logo über beide Spalten spannen */
        justify-self: center;
        /* OSK Logo horizontal zentrieren */
      }

    }
  }

  .partner-big-grid {

    padding-top: 16px;
    padding-bottom: 16px;

    @media only screen and (min-width: 576px) {

      padding-top: 32px;
      padding-bottom: 32px;
    }

    @media only screen and (min-width: 824px) {

      padding-top: 80px;
      padding-bottom: 80px;
    }

    h2 {
      color: var(--color-text-feature);
      font-size: clamp(1.8rem, 2vw, 4.0rem) !important;
      text-transform: uppercase;
      margin-bottom: 3.2rem !important;
    }


    article {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 10%;
      row-gap: 3.2rem;
      place-items: center;

      a {
        border: none !important;
        width: fit-content;

        &:hover {
          color: var(--color-text);
        }
      }

      img {
        margin: 0 !important;
        object-fit: cover;
        max-height: 100px;
      }

      @media only screen and (min-width: 576px) {
        padding-top: 48px;

      }

    }
  }

  .partner-smal-grid {

    padding-top: 16px;
    padding-bottom: 16px;

    @media only screen and (min-width: 576px) {
      padding-top: 32px;
      padding-bottom: 32px;
    }

    @media only screen and (min-width: 824px) {
      padding-top: 80px;
      padding-bottom: 80px;
    }


    h2 {
      color: var(--color-text-feature);
      font-size: clamp(1.8rem, 2vw, 4.0rem) !important;
      text-transform: uppercase;
      margin-bottom: 32px !important;
    }


    article {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
      column-gap: 5%;
      row-gap: 2rem;
      place-items: center;

      a {
        border: none !important;
        width: fit-content;

        &:hover {
          color: var(--color-text);
        }
      }

      img {
        margin: 0 !important;
        object-fit: cover;
        max-height: 100px;
      }

      @media only screen and (min-width: 576px) {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        column-gap: 5%;
        row-gap: 3rem;
        padding-top: 48px;

      }

      @media only screen and (min-width: 824px) {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        column-gap: 5%;
        row-gap: 4rem;

      }
    }
  }


  /* Footer */


  .donations {

    display: grid;
    grid-template-columns: 100%;
    column-gap: 2%;
    row-gap: 2rem;
    place-items: center;
    padding-bottom: 32px;

    @media only screen and (min-width: 576px) {

      padding-bottom: 40px;

    }

    @media only screen and (min-width: 824px) {
      grid-template-columns: 1fr 1fr;
      column-gap: 5%;
      padding-bottom: 80px;

    }

    p,
    a {

      padding: 0 !important;
      margin: 0 !important;
    }

  }

  #footer-outer {

    max-width: 100%;
    /* background-color: var(--color-background-alt);*/
    background: var(--color-gradient-2025);
    margin: 0 auto;
    padding: 48px 16px 48px 16px !important;

    @media only screen and (min-width: 824px) {
      padding: 112px 16px 112px 16px !important;

    }

  }


  #footer-left {

    float: none !important;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 4%;
    row-gap: 1em;
    justify-content: space-around;

    @media only screen and (min-width: 824px) {
      grid-template-columns: 1fr 1fr 1fr 1fr;

    }


    /*
  ul {
    width: 100%;
    text-align: left !important;
    float: none !important;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 4%;
    row-gap: 1rem;

    @media only screen and (min-width: 824px) {
      grid-template-columns: 1fr 1fr 1fr 1fr;
      column-gap: 4%;
    }

  }
    */

    ul.footer-flex {
      list-style-type: none;
      display: grid;
      grid-template-columns: 1fr;
      row-gap: 0.5em;

      li {
        width: fit-content;
      }

      a {
        color: var(--color-text-alt) !important;
        border-bottom-color: transparent !important;
        text-transform: uppercase;
        transition: border-color var(--transistion-time) ease-in-out;

        &:hover {
          border-bottom-color: var(--dave-white) !important;
        }

      }

    }
  }

  .menu-footer-container li {
    float: none !important;
    list-style: outside none none;
    position: relative;
    font-size: 1.6rem;
    text-align: left !important;

    a {
      font-size: var(--font-mobile);
      margin-bottom: 16px;
      line-height: 1.5;
      margin-right: 0;
      color: var(--color-text-alt) !important;
      border: none !important;
      font-family: var(--font-headline);
      text-transform: uppercase;

      &:hover {
        color: var(--color-text-alt) !important;
        background-color: var(--dave-midnight) !important;
      }
    }

  }


  #footer-right {
    width: 100%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    text-align: center !important;
    float: none !important;
    margin-top: 40px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;

    a {
      width: 24px !important;
      height: 24px !important;
      margin: 0px;
      border: none !important;

      svg {

        width: 24px;
        fill: var(--color-text-alt) !important;

      }

    }


  }


  /* Veranstaltungsliste */

  #filter-buttons {
    width: 100%;
    margin-bottom: 4rem;
    margin-top: 0px;
  }


  .filter-button,
  .filter-button2 {
    text-align: left;
    float: left;
    padding-left: 0px;
    margin-right: 0px;
    margin-top: 16px;
    margin-bottom: 0px;
    width: 50% !important;
  }

  @media only screen and (min-width: 590px) {

    .filter-button,
    .filter-button2 {
      width: auto !important;

      text-align: left;
      padding-left: 0px;
      margin-right: 16px;
      margin-top: 1rem;
      display: block;
      margin-bottom: 2rem;
    }
  }


  #filter-buttons a,
  #filter-buttons2 a {
    display: block;
    width: 100%;
    color: var(--dave-black);
    line-height: 20px;
    text-decoration: none !important;
    font-size: 16px;
    padding: 0px;
    margin-left: 0px;
    margin-right: 0px;
    font-family: 'Roboto Condensed Regular', sans-serif;
    /*border-color: var(--dave-black);
  border-style: solid;
  border-width: 0px;
  border-radius: 0px;
  background-color: var(--dave-silver);*/
    text-transform: uppercase;
    border: none !important;
  }

  @media only screen and (max-width: 820px) {

    #filter-buttons a,
    #filter-buttons2 a {
      font-size: 14px;
    }
  }

  #filter-buttons a:hover,
  #filter-buttons a:hover.active,
  #filter-buttons a.active {
    color: var(--dave-black);
    background-color: var(--dave-silver);
    border-color: var(--dave-silver);
  }


  a.filter-reset {
    color: var(--dave-black) !important;
    background-color: var(--color-background) !important;
    border-color: var(--color-text) !important;
    border-width: 1px !important;
    border-radius: 0px !important;
    padding: 8px !important;
  }


  a.filter-reset.active {
    color: var(--dave-white) !important;
    background-color: var(--color-background-alt) !important;
    border-color: var(--color-text) !important;
  }

  a.filter-reset.active:hover,
  a.filter-reset:hover {
    color: var(--dave-white) !important;
    background-color: var(--color-highlight) !important;
    border-color: var(--color-text) !important;
  }

  div.filter-reset-holder {
    width: fit-content;
    display: inline-block;
    margin-bottom: 2rem;

  }

  div.filter-checker {
    width: 16px;
    height: 16px;
    border-color: var(--color-text);
    border-style: solid;
    border-width: 1px;
    border-radius: 0px;
    display: inline-block;
    margin-left: 0px;
    margin-right: 8px;
  }

  div.filter-checker:hover,
  div.filter-checker.active:hover {
    color: var(--dave-white);
    background-color: var(--color-highlight);
    border-color: var(--color-text);
  }


  div.filter-checker.active {
    color: var(--dave-white);
    background-color: var(--color-background-alt);
    border-color: var(--color-text);
  }


  div.filter-text {
    display: inline;
    background-color: var(--color-background) !important;
    border-bottom: none !important;
  }

  div.filter-filter {
    margin-top: 2rem;
    margin-bottom: 0rem;
    background-color: var(--color-background) !important;
    font-size: 16px;
  }

  .event-list-date,
  h2.event-list-date {
    grid-column: 1/1;
    font-size: clamp(1.6rem, 2vw, 3.2rem) !important;
    margin-top: 0rem !important;
    margin-bottom: 0 !important;
    line-height: 1 !important;
    list-style: none;

    @media only screen and (min-width: 576px) {
      grid-column: 1/3;
    }

    @media only screen and (min-width: 824px) {
      grid-column: 1/4;
    }

  }

  .filter-holder {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    padding-bottom: 16px;
    border: 0.5px solid var(--color-text);
    display: flex;
    flex-direction: column;
    row-gap: 1.6rem;
    align-content: start;

    transition: scale var(--transistion-time) ease-in-out,
      box-shadow var(--transistion-time) ease-in-out;

    img {
      margin-bottom: 0px !important;
    }

    a,
    h2 {
      border-bottom: none !important;
    }

    .event-meta-box {
      padding-left: 16px;
      padding-right: 16px;
      display: flex;
      flex-direction: column;
      row-gap: 16px;
    }

    h3 {
      margin-bottom: 0 !important;
    }

    .event-list-time {
      margin-bottom: 0px !important;
      line-height: 1 !important;

    }

    .event-list-type {
      line-height: 1 !important;
      text-transform: uppercase;
      font-size: 0.8em !important;
      font-weight: bold;
    }

    p,
    ul,
    li {
      margin: 0px !important;
      padding: 0px !important;
    }

    li {

      list-style-type: none;
    }

    .filter-artist {
      font-family: 'Roboto Condensed Regular', sans-serif;
      line-height: 1em;
      text-transform: uppercase;
      margin-bottom: 0rem;
      padding-right: 2rem !important;
    }


    .filter-holder-buttons {
      margin-left: 16px;
      margin-right: 16px;
      display: flex;
      flex-direction: row;
      margin-top: auto;

      a.button-link {
        border: 1px solid !important;
        margin-right: 0px;
        margin-bottom: 0px !important;
        margin-top: auto !important;

        &:hover {
          border-color: var(--color-highlight) !important;
        }

      }

      a.icon-link {
        margin: 0 !important;
        border: 1px solid !important;

        align-self: end;
        margin-left: auto !important;
        margin-right: 0 !important;

        &:hover {
          border-color: var(--color-highlight) !important;
          padding-left: 12px !important;
        }
      }

    }



  }

  .filter-holder:hover {
    scale: 1.0;

  }

  .filter-holder-single {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    display: flex;
    flex-direction: column;
    row-gap: 1.6rem;
    align-content: start;

    .notmobile {
      display: none !important;
    }

    img {
      margin-bottom: 0px !important;
      border-bottom: none !important;
    }


    h2 {
      border-bottom: none !important;
    }

    .event-meta-box {
      padding-left: 0px;
      padding-right: 0px;
      display: flex;
      flex-direction: column;
      row-gap: 32px;
    }

    h2,
    h3 {
      margin-bottom: 0 !important;
    }

    .event-list-time {
      margin-bottom: 0px !important;
      line-height: 1 !important;

    }

    .event-list-type {
      line-height: 1 !important;
      text-transform: uppercase;
      font-size: 0.8em !important;
      font-weight: bold;
    }

    p,
    ul,
    li {
      margin: 0px !important;
      padding: 0px !important;
    }

    li {

      list-style-type: none;
    }

    .filter-artist {
      font-family: 'Roboto Condensed Regular', sans-serif;
      line-height: 1em;
      text-transform: uppercase;
      margin-bottom: 1.6rem !important;
      width: 100%;

      .filter-artist-text {
        font-size: 0.8em !important;
      }

    }

    a.button-link {
      margin-bottom: 0px !important;

    }

    .kuenstler-social {

      display: flex;
      flex-direction: row;
      column-gap: 16px;

      nav-item {

        a {
          border-bottom: none !important;
          margin-right: 0 !important;

          svg {
            width: 30px;
            height: auto;
            color: var(--color-text) !important;
            transition: color var(--transistion-time) ease-in-out;


            &:hover {
              color: var(--color-highlight) !important;
            }
          }

        }

      }
    }


  }

  .event-list-artist {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin-top: 16px;
    margin-bottom: 16px;
  }

  a.filter-link-holder {
    display: block;
  }

  .filter-artist a,
  #filter-data h3 a {
    color: var(--color-text);
    text-decoration: none;
  }

  .filter-artist a:hover {
    color: var(--color-highlight);
    text-decoration: none;
  }

  #filter-data h3 a:hover {
    color: var(--color-highlight);
    text-decoration: none;
  }

  .filter-day {
    font-family: 'NeueMetanaNext-SemiBold', sans-serif;
    font-size: 32px;
    line-height: 1em;
    margin-top: 8rem;
    margin-bottom: 2rem;
    margin-left: 0;
    margin-right: 0;
  }

  .filter-type {
    font-family: 'Roboto Condensed Regular', sans-serif;
    color: var(--color-text);
    font-size: 16px;
    line-height: 1rem;
    padding: 0px;
    margin: 0px;
  }



  .filter-artist-single {
    font-family: 'Roboto Condensed Regular', sans-serif;
    font-size: 3rem;
    line-height: 1em;
    text-transform: uppercase;
    margin-bottom: 0rem;
  }


  .filter-artist-text {
    padding-right: 5rem;
    line-height: 1.5;
    font-size: 14px;

    color: var(--color-text);
    text-transform: uppercase !important;
  }

  @media only screen and (max-width: 589px) {
    .filter-artist-text {
      width: 100%;
    }
  }

  @media only screen and (max-width: 820px) {
    .filter-artist {
      font-family: 'Roboto Condensed Regular', sans-serif;
      font-size: 2rem;
      line-height: 1em;
      text-transform: uppercase;
      margin-bottom: 0rem !important;
    }

    .filter-artist-text {
      padding-right: 5rem;
      line-height: 2;
      font-size: 14px;
      margin-bottom: 2rem !important;
    }

    .filter-artist-single {
      font-size: 2rem;
      line-height: 1em;
      text-transform: uppercase;
      margin-bottom: 0rem;
    }
  }

  .filter-type {
    width: 100%;
    padding-bottom: 1rem;
  }


  /* Single Veranstaltung */
  .filter-meta-top {
    width: 100%;
    padding-top: 0rem;
    margin-top: 0rem !important;
  }

  .filter-meta-bottom {
    width: 100%;
    padding-bottom: 0rem;
    margin-bottom: 2rem;
  }