body {
     margin: 0;
     background: black;
     background-image: url("./BK2026_BG_01.jpg");
     background-position: 0;
     background-size: cover;
     overflow: hidden;
     font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
 }

 .wasserzeichen {
     margin: 0;
     width: 140px;

     position: absolute;
     top: 10px;
     right: 10px;
     z-index: 99999;
     opacity: 30%;
 }

 .blur-10 {
     backdrop-filter: blur(10px);
     background: rgba(20, 20, 20, 0.4);
     border-radius: 5px;
 }

 .eventlist-presenter {
     color: rgba(51, 163, 186, 1);
     font-size: 1rem;
 }

 .eventdetailsimage-container {
     position: relative;
     /* Wichtig für die Positionierung des Pseudo-Elements */
     display: inline-block;
     /* Oder block, je nach Bedarf */
 }

 hr,
 .divider.bk {
     border-bottom: 2px solid #cc0033;
     border-top: 2px solid #cc0033;
 }

 .eventitemdescription {
     font-size: 0.9rem;
 }

 .eventdetailsimage-container img {
     display: block;
     /* Entfernt evtl. untere Abstände */
     width: 100%;
     height: auto;
 }

 .eventdetailsitem-venue {
     font-weight: bold;
     font-size: 1rem;
     /* color: $primary-color;*/
 }

 .eventdetailsitem-address {
     font-weight: lighter;
     font-size: 0.75rem;
     /*   color: $primary-color;*/
 }

 .eventdetails-datum {
     display: flex;
     flex-direction: column;
 }

 .eventdetailsitem {
     display: flex;
     flex-direction: row;
     padding-top: 0.75rem;
     padding-bottom: 0.75rem;
 }


 .eventdetailsitemdata {
     display: flex;
     flex-direction: row;
     align-items: baseline;
     padding-top: 0.75rem;
 }

 .eventdetailsvenueheading {
     font-weight: bold;
     font-size: 1.5rem;
     color: #fff;
     text-transform: uppercase;
     padding-left: 1rem;
 }

 .eventdetailsitemheading {
     font-weight: bold;
     font-size: 2.5rem;
     color: #fff;
     text-transform: uppercase;
     padding-left: 1rem;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     width: 100%;

 }

 .venueheading {
     font-weight: bold;
     font-size: 1.5rem;
     color: #fff;
     text-transform: uppercase;
     /* text-align: right; */
     /* margin-left: auto; */
 }

 .venueheading.bk {
     /*   color: $bk;*/
 }

 .venueheading.nl {
     /*  color: $nl;*/
 }

 .venueheading.other {
     /* color: $other;*/
 }

 .venueheading-address {
     font-weight: normal;
     font-size: 0.6rem;
     color: #fff;
     text-transform: uppercase;
     text-align: right;
 }

 .eventdetailsitemsubheading {
     font-weight: light;
     font-size: 1rem;
     color: rgba(51, 163, 186, 1);
     padding-left: 1rem;
     /* margin-top: 16px; */
 }

 .eventdetailsitempicture {
     width: 200px;
     min-width: 200px !important;
 }

 .eventdetailsitemdate {
     font-weight: bold;
     font-size: 1.5rem;
     color: rgba(51, 163, 186, 1);
 }

 .beginn {
     font-weight: lighter;
     font-size: 0.75rem;
     color: #ffffff;
 }

 .align-bottom {
     margin-top: auto;
 }

 .eventdetailsitemdate {
     font-size: 2.5rem;
 }


 .eventdetailsvenueheading {
     font-size: 1.75rem;
 }

 .eventdetailsitemsubheading {
     font-size: 1.75rem;
 }

 .venueheading-address {
     font-size: 1rem;
 }

 .venueheading {
     font-size: 1.75rem;
 }

 .eventdetailsitemdate>.beginn {
     font-size: 1.5rem;
 }

 .eventitemdescription {
     font-size: 1.2rem;
 }

 .screen {
     width: 1920px;
     height: 1080px;
     position: relative;
 }

 :root {
     --gap-x: 26.33px;
     --gap-y: 30.67px;
 }

 /* =========================
                      LAYOUT
                   ========================= */

 .box {
     position: absolute;
     color: white;
     font-family: Arial;
 }

 /* A */
 #areaA {
     width: 1364px;
     height: 848px;
     top: var(--gap-y);
     left: var(--gap-x);
     overflow: hidden;
     position: absolute;
 }

 /* B (VIDEO CROSSFADE LAYERED) */
 #areaB {
     width: 477px;
     height: 848px;
     top: var(--gap-y);
     left: calc(var(--gap-x) * 2 + 1364px);
     background: black;
     overflow: hidden;
     position: absolute;
 }

 /* zwei Video-Layer für Crossfade */
 .videoLayer {
     position: absolute;
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: opacity 1.2s ease-in-out;
 }

 /* C */
 #areaC {
     width: 1920px;
     height: 140px;
     position: absolute;
     left: 0;
     bottom: 0;
     /* background: #c00000; */
     overflow: hidden;
 }

 #tickerCanvas {
     width: 1920px;
     height: 140px;
     display: block;
 }

 /* Slides */
 .slide {
     width: 1364px;
     height: 868px;
     display: none;
     box-sizing: border-box;
     background-size: cover;
     background-position: center;
 }

 .slide.active {
     display: block;
 }

 /* Ticker */
 .ticker {
     display: inline-block;
     padding-left: 100%;
     animation: ticker 300s linear infinite;
     font-size: 32px;
 }

 .tickerrow {
     display: flex;
     flex-direction: row;
 }

 @keyframes ticker {
     from {
         transform: translateX(0);
     }

     to {
         transform: translateX(-100%);
     }
 }