/* chiron-goround-tc-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: 'Chiron GoRound TC';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/chiron-goround-tc-v4-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* cardo-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: 'Cardo';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/cardo-v21-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* cardo-italic - 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: 'Cardo';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/cardo-v21-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* cardo-700 - 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: 'Cardo';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/cardo-v21-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


    
body {
  font-family: "Cardo", serif;
  color: #333;
  background-color: #F7F7F4;
}


    /* Hamburger Menu - immer oben rechts sichtbar */
        .menu-toggle {
            position: fixed;
            top: 30px;
            right: 30px;
            z-index: 2000;
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            /* border: 2px solid rgba(255, 255, 255, 0.3); */
            width: 50px;
            height: 50px;
            border-radius: 5px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 6px;
            transition: all 0.3s ease;
        }
        
        .menu-toggle:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.05);
        }
        
        .menu-toggle span {
            width: 25px;
            height: 3px;
            background: black;
            border-radius: 2px;
            transition: all 0.3s ease;
        }
        
        .menu-toggle.active span:nth-child(1) {
            transform: rotate(45deg) translate(6px, 8px);
        }
        
        .menu-toggle.active span:nth-child(2) {
            opacity: 0;
        }
        
        .menu-toggle.active span:nth-child(3) {
            transform: rotate(-45deg) translate(5px, -7px);
        }
        
        /* Slide-In Menu */
        .slide-menu {
            position: fixed;
            top: 0;
            right: -100%;
            width: 250px;
            max-width: 85vw;
            height: 100vh;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            z-index: 1900;
            transition: right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            padding: 100px 40px 40px;
            box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);
        }
        
        .slide-menu.active {
            right: 0;
        }
        
        .slide-menu ul {
            list-style: none;
            padding: 0;
        }
        
        .slide-menu ul li {
            margin-bottom: 30px;
            opacity: 0;
            transform: translateX(50px);
            transition: all 0.3s ease;
        }
        
        .slide-menu.active ul li {
            opacity: 1;
            transform: translateX(0);
        }
        
        .slide-menu.active ul li:nth-child(1) { transition-delay: 0.1s; }
        .slide-menu.active ul li:nth-child(2) { transition-delay: 0.2s; }
        .slide-menu.active ul li:nth-child(3) { transition-delay: 0.3s; }
        .slide-menu.active ul li:nth-child(4) { transition-delay: 0.4s; }
        
        .slide-menu ul li a {
            font-family: "Chiron GoRound TC", sans-serif;
            color: #333;
            font-size: 1.5rem;
            font-weight: 400;
            transition: all 0.3s ease;
            display: block;
            padding: 10px 0;
            text-decoration: none;
        }
        
        .slide-menu ul li a:hover {
            color: #46321f;
            transform: translateX(10px);
        }
        
        .slide-menu ul li a.active {
            color: #46321f;
        }
        
        /* Menu Overlay */
        .menu-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1800;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }
        
        .menu-overlay.active {
            opacity: 1;
            visibility: visible;
        }
        
        /* Frei posijtionierbare Texte im Header */
        .hero-text {
            position: absolute;
            color: white;
            text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8);
        }
        
        /* Beispiel-Positionen - können frei angepasst werden */
        .hero-text.main-title {
            top: 80%;
            left: 10%;
            transform: translate(00%, 0%);
            font-size: 3.4rem;
            font-weight: normal;
            text-align: left;
        }

div.rubrbild img {
    --focal-point-x: 33%;
    --focal-point-y: 24%;
    object-position: var(--focal-point-x) var(--focal-point-y); /* object-position is analogous to background-position */
    object-fit: cover; /* object-fit is analogous to background-size */
}

body.home div.rubrbild img {
    --focal-point-x: 33%;
    --focal-point-y: 24%;
    object-position: var(--focal-point-x) var(--focal-point-y); /* object-position is analogous to background-position */
    object-fit: cover; /* object-fit is analogous to background-size */
}

body.audio div.rubrbild img {
    --focal-point-x: 26%;
    --focal-point-y: 51%;
    object-position: var(--focal-point-x) var(--focal-point-y); /* object-position is analogous to background-position */
    object-fit: cover; /* object-fit is analogous to background-size */
}

body.video div.rubrbild img {
   /*  --focal-point-x: 57%; für Rückspiegel-Bild */
    --focal-point-x: 84%;
    --focal-point-y: 60%;
    object-position: var(--focal-point-x) var(--focal-point-y); /* object-position is analogous to background-position */
    object-fit: cover; /* object-fit is analogous to background-size */
}

body.termine div.rubrbild img {
    --focal-point-x: 60%;
    --focal-point-y: 51%;
    object-position: var(--focal-point-x) var(--focal-point-y); /* object-position is analogous to background-position */
    object-fit: cover; /* object-fit is analogous to background-size */
}

body.kontakt div.rubrbild img {
    --focal-point-x: 26%;
    --focal-point-y: 51%;
    object-position: var(--focal-point-x) var(--focal-point-y); /* object-position is analogous to background-position */
    object-fit: cover; /* object-fit is analogous to background-size */
}

h2.cardo-bold {
  font-family: "Cardo", serif;
  font-style: normal;
  text-align: center;
  font-size: 3rem;
  font-weight: normal;
}


.content-youtube figure {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

.content-youtube iframe {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}



       div.hero-text.main-title div.rubrik {
  display: inline;
  color: rgba(255, 255, 255, 0.6);
  text-align: left;
}

div.konzerttermin h2 {
    font-size:2em;
    font-weight: 500;
    margin-top: 15px;
    margin-bottom: 15px;
}

div.konzerttermin__meta {

}

div.konzerttermin__uhrzeit, div.konzerttermin__datum {
    display: inline;
}

div.konzerttermin time {
   font-size: 1.3em;
   font-weight: 400;
   color: #777;
}

div.konzerttermin__ort span {
   font-size: 1.3em;
   font-weight: 400;
   color: #777;
}

h4.programm-titel {
    margin-top: 30px;
}

div.card, div.rsce_audioplayer, div.rsce_termin  {
  background-color: #f0ebe9;
  padding:40px;
  border-radius: 5px;
  padding-top: 20px;
  margin-bottom: 20px;
}

 h3, h5 {
  font-weight: 400;
}

div.rsce_audioplayer h3, div.rsce_termin h3 {
  font-size: 1.6em;
}

div.rsce_audioplayer h5, div.rsce_termin h5 {
  font-size: 1.2em;
}

.slide-menu ul li strong.active {
  font-family: "Chiron GoRound TC", sans-serif;
  color: #333;
  font-size: 1.5rem;
  font-weight: 400;
  display: block;
  padding: 10px 0;
  text-decoration: none;
}

div.download-element {
    margin-bottom: 30px;
}

div.download-element a, div.download-element a:hover {
      font-family: "Chiron GoRound TC", sans-serif;
      color: grey;
      font-weight: 600;
      text-decoration: none;
      background: none;
      padding: 10px;
      border: 1px solid grey;
      border-radius: 7px;
    
}

div.download-element a:hover {

      color: white;
      font-weight: 600;
      text-decoration: none;
      background: #f0ebe9;
      padding: 10px;
      border: 1px solid grey;
      border-radius: 7px;
}

div.mod_form.block {
    padding-bottom: 40px;
}


.widget > label {
  font-size: 1.2em;
  font-weight: 400;
}

button.custom-button:hover {
  transition: all 0.3s ease;
  border-color: #828781;
  color: #828781;
  background-color: transparent;
}
form button:hover, input[type="submit"]:hover, .button:hover {
  text-decoration: none;
  background-position: 0 -15px !important;
}
button.custom-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 13px;
  font-size: 16px;
  font-weight: 300;
  cursor: pointer;
  transition: all 0.3s ease;
  outline: none;
  user-select: none;
  color: #ffffff;
  border-radius: 6px;
  background-color: #828781;
}

        @media (max-width: 768px) {
  .hero-text.main-title {
    font-size: 2.5rem;
    padding: 0 20px;
    top: 70%;
    left: 10%;
  }

  div#container {
    padding-left: 5vw;
    padding-right: 5vw;
  }
}