html {
  width: unset;
}

body {
  background-color: white
}

body>div#header {
  height: 130px;
  box-sizing: border-box;
  background: white;
  position: fixed;
  left: 0;
  right: 0;
  width: auto;
  top: 0px;
  z-index: 666;
  overflow: hidden;
  background-image: url("/assets/images/EF-Streifen.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 215px 0;
}

body>div#header>img {
  width: 200px;
  height: 79.5px;
  padding-bottom: 16px;
}

body>div#header>div {
  margin-top: unset !important;
  font-size: unset !important;
  font-weight: unset !important;
}

body>div#header>div.lines {
  height: 2px;
  width: 200vw;
  margin-left: -86vw;
  opacity: 0.8;
}

body>div#header>div.line1 {
  background: red;
  transform: rotate(18deg);
  margin-top: -50px !important;
}

body>div#header>div.line2 {
  background: pink;
  transform: rotate(21deg);
}

body>div#header>div.line3 {
  background: yellow;
  transform: rotate(32deg);
}

body>div#header>div.line4 {
  background: blue;
  transform: rotate(40deg);
}

body>div#header>div.line5 {
  background: green;
  transform: rotate(60deg);
}

body>div#header .infotext {
  /* font-size:20px;
  font-weight:bold;
  color: #000000;
  margin-top:200px; */
  float: right;
}


body div#cssmenu {
  background: black !important;
  width: unset;
  float: unset;
  /* margin-bottom: 24px; */
  position: fixed;
  top: 130px;
  left: 0;
  right: 0;
  width: auto;
}

body div#cssmenu li {
  padding: 5px 10px;
}

body div#cssmenu li ul,
body div#cssmenu li.active ul {
  top: 41px;
}


body div#cssmenu>ul {
  box-shadow: unset;
  background: black;
}

body div#cssmenu>ul>li {
  background: black;
  /* padding-top: 2px;padding-bottom: 2px; */
}

.search-and-filter>div:first-child {
  display: flex;
  align-items: baseline;
}

input[type="text"] {
  background-color: var(--form-background);
  color: currentColor;
  border: 0.25em solid currentColor;
  height: 1.15em;
  padding: 0.65em;
  margin: 0;
  margin-left: 8px;
  margin-right: 8px;
  min-width: 16em;
}

.radioitem {
  padding: 0.125em;
  margin: 0;
  /* min-width: 14em; */
  min-width: 20em;
  margin-left: 8px;
  margin-right: 8px;
}

.radioitem label {
  height: 1.15em;
  /* display: inline-block; */
  /* vertical-align: sub; */
  display: block;
}

.radioitem input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--form-background);
  margin: 0;
  margin-right: 4px;
  font: inherit;
  color: currentColor;
  width: 1.15em;
  height: 1.15em;
  border: 0.15em solid currentColor;
  border-radius: 50%;
  transform: translateY(-0.075em);
  display: inline-grid;
  place-content: center;
  vertical-align: middle;
  float: left;
}

.radioitem input[type="radio"]::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  border-radius: 50%;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--form-control-color);
  background-color: CanvasText;
}

.radioitem input[type="radio"]:checked::before {
  transform: scale(1);
}

.programmheft {
  display: block;
  box-sizing: border-box;
  height: 125px;
  width: 100%;
  overflow: hidden;
  padding: 24px;
}

body div.colmask {
  max-width: 950px;
  margin: 0 auto;
  float: unset;
  float: none;
  background: unset;
  background: none;
  padding-top: 191px;
}

body div.colmask .colleft {
  float: none;
  width: auto;
  margin-left: auto;
  position: static;
  right: auto;
}

body div.colmask .colleft .col1wrap {
  float: none;
  width: auto;
  min-height: none;
  position: static;
  left: auto;
  padding-bottom: 1em;
}

.rightmenu .col1 {
  margin: 24px;
  overflow: visible;
}

.rightmenu .col2 {
  visibility: hidden;
  display: none;
}

.seitenueberschrift {
  /*background: unset;*/
  background: transparent;
  position: fixed;
  /* top: 48px; */
  top: 32px;
  z-index: 777;
  text-align: center;
  left: 0;
  right: 0;
}

.search-and-filter {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  padding-bottom: 24px;
}

/* ohne Rand*/
hr,
.veranstaltung {
  border-top: unset;
}

.veranstaltung {
  border-top: 3px solid black;
  box-sizing: border-box;
  display: inline-block;
  height: auto;
  min-height: calc(253px + 40px);
  width: 100%;
  /* margin-bottom: 20px; */
  padding: 16px;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  position: relative;
  padding-left: 400px;
}

.veranstaltung .vr {
  float: none;
  max-width: 100%;
}

.veranstaltung .bild {
  position: absolute;
  left: 0;
  top: 0;
  width: 380px;
  padding-top: 20px;
  max-height: calc(100% - 40px);
  /* because of legacy clearing div */
  overflow: hidden;
  /* -webkit-filter: drop-shadow(5px 5px 3px rgba(0, 0, 0, 0.7));
  filter: drop-shadow(5px 5px 3px rgba(0, 0, 0, 0.7)); */

}

/* .veranstaltung .bgbild{
  position: absolute;
  left: 0;
  top: 0;
  width: 380px;
  margin-top: 20px;
  height: calc(100% - 40px);
  max-height: 250px;
  -webkit-filter: drop-shadow(5px 5px 3px rgba(0,0,0,0.7));
  filter: drop-shadow(5px 5px 3px rgba(0,0,0,0.7));
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 100%;
} */

.veranstaltung .bgbild {
  position: absolute;
  left: 0;
  top: 0;
  width: 380px;
  margin-top: 20px;
  height: calc(100% - 40px);
  max-height: 250px;
  background-repeat: no-repeat;
  background-position: center;
  /* height: 100%;
  width: 100%; */
  display: block;
  max-height: 250px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 100%;
}

.veranstaltung .bgbildx {
  position: absolute;
  left: 0;
  top: 0;
  width: 380px;
  margin-top: 20px;
  height: calc(100% - 40px);
  max-height: 250px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  filter: blur(3px);
  overflow:hidden;
}

/*
.veranstaltung .bild img{
  width:100%;
} */
.veranstaltung .bildcopyright {
  position: absolute;
  left: 4px;
  top: 24px;
  color: white;
  text-shadow: 0px 0px 2px black;
}

.veranstaltung .ueberschrift {
  width: auto;
  font-size: 22pt;
  margin: 0;
}

.veranstaltung .text {
  width: auto;
  text-align: justify;
}

/* .veranstaltung .unter-ueberschrift {
  max-height: 0px;
  overflow: hidden;

}

.veranstaltung .unter-ueberschrift.sichtbar {
  max-height: none;
}
*/

.veranstaltung-single{
  border-top: unset;
}

/* .vr .z3 {
  max-height: 0px;
  width: auto;
  overflow: hidden;
} */
.panel .header {
  padding: 8px;
  text-align: center;
  /*position:relative;*/
  position: absolute;
  bottom: 20px;
  right: 0px;
  width: 45px;
}

.panel .header:after {
  content: '';
  position: absolute;
  left: calc(50% - 6px);
  top: 32px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 10px solid #000;
  clear: both;
}

.panel.open .header {
  padding-bottom: 16px;
}

.panel.open .header:after {
  transform: rotate(180deg);
}

.panel .contents {
  display: none;
  max-width: calc(80%);
  max-width: calc(100% - 45px);
}

.contents>div {
  padding: 8px;
}

.veranstaltung .termin {
  font-weight: unset;
}

.veranstaltung .preis {
  font-weight: bold;
}

.einkaufswagen {
  float: none;
  width: auto;
}

.einkaufswagen a {
  z-index: 555;
  /*
  border: 2px solid black;
  border-top: unset;
*/
  position: absolute;
  top: 0px;
  right: 0px;
  padding: 8px;
  padding-bottom: 2px;
  color: black;
  /*  text-decoration: underline; */
}

.einkaufswagen a:hover {
  color: black;
}
.teilenlink{
  margin-right:64px;
}
.einzelansichtlink{
  margin-right:64px;
}

p iframe {
  border: none !important;
}

.footer {
  text-align: center;
}

.footer a {
  color: black;
  padding: 0 8px;
}

/* Experimental */
body {
  padding-bottom: 300px;
  padding-bottom: 24px;
}

/* demo typewriter */
.typewriter {
  display: block;
}

.typewriter-text {
  display: inline-block;
  overflow: hidden;
  letter-spacing: 2px;
  animation: typing 5s steps(30, end), blink .75s step-end infinite;
  white-space: nowrap;
  border-right: 4px solid #e05627;
  box-sizing: border-box;
}

@keyframes typing {
  from {
    width: 0%
  }

  to {
    width: 100%
  }
}

@keyframes blink {

  from,
  to {
    border-color: transparent
  }

  50% {
    border-color: #e05627;
  }
}

/* *** MOBILE *** */

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

  body div#cssmenu li.active ul {
    top: 0;
  }

  .veranstaltung {
    padding-top: 245px;
    padding-left: 0;
  }

  /* .veranstaltung .bild img{
     max-width:100%;
     height:auto;
   } */

  .search-and-filter {
    flex-direction: column;
  }

  #cssmenu>ul {
    max-height: 42px;
  }

  body div#cssmenu li ul,
  body div#cssmenu li.active ul {
    top: 0;
  }

  body>div#header {
    height: 260px;
  }

  body.tinyheader>div#header {
    height: 130px;
  }

  body.tinyheader>div#header .infotext {
    display: none;
  }

  body.tinyheader>#cssmenu {
    top: 130px;
  }

  body.tinyheader .seitenueberschrift {
    top: 80px;
  }


  body div#cssmenu {
    top: 260px;
  }

  body>div#header .infotext {
    float: left;
  }

  .seitenueberschrift {
    top: 210px;
    text-align: left;
    left: 10px;
  }

  .search-and-filter>div {
    display: flex;
    flex-direction: column;
    align-items: center !important;
  }

  body div.colmask {
    padding-top: 301px;
  }

  #cssmenu>ul>li.active {
    background: black;
  }

  .veranstaltung .bild,
  .veranstaltung .bgbild,
  .veranstaltung .bgbildx {
    max-width: 100%;
    padding-top: 36px;
    margin-top: 30px;
    max-height: 165px;
  }

  .veranstaltung .bildcopyright {
    top: 40px;
  }

  /* 2025 */
  #popupImg {
    display:none;
  }

}

.image-container {
  width: 300px; /* Width of the container */
  height: 200px; /* Height of the container (3:2 aspect ratio) */
  overflow: hidden;
  position: relative;
}

.image-container > img {
  display: block;
  max-height: 100%;
  object-fit: cover;
  margin: 0 auto;
}

.image-container > .background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter: blur(2px); /* Adjust the blur amount as needed */
  transform: scale(1.2); /* Adjust the scale for stretching */
  background-size: cover;
  background-position: center;
  z-index: -1;
}
.copyright{
  color:darkgray;
  font-size: 0.8em;
}

/* 2025 */
#popupImg {
    transition: all 0.75s ease-in-out;
/*    transition: transform 0.3s ease-in-out, width 0.5s ease-in-out, right 0.5s ease-in-out;*/
    transform: rotate(35deg);
    margin-left: -70px;
    border: 2px solid black;
    border-radius: 4px;
    width: 200px;
    cursor: pointer;
    position:fixed;
    left:0;
    bottom:33vh;
}

#popupImg:hover {
  transform: scale(1.1) rotate(5deg);
  margin-left:30px;
}