:root{
  --color-text:#f3f3f3;
  --color-text-secondary:#fafafa;
  --color-black:#000;
  --transparent:rgba(0,0,0,0);
  --transparent-90:rgba(34,34,34,0.9);
  --overlay-dark:rgba(27,27,27,0.75);
  --menu-bg-solid:#2B333F;
  --menu-bg:rgba(43,51,63,0.7);
  --controlbar-bg:rgba(43,51,63,0);
  --progress-bg:rgba(255,255,255,0.4);
  --highlight:rgb(67,166,255);
  --tooltip-bg:rgba(255,255,255,0.5);
  --tooltip-highlight:rgb(242,255,0);
  --icon-inactive:#f3f3f3;
  --icon-muted:#fafafa;
  --shadow-strong:rgba(0,0,0,0.5);
  --white-20:rgba(255,255,255,0.2);
  --white-56:#ffffff90;
  --ui-dark:rgb(34, 34, 34);
  --live-red:#f00;
  /* Schrift-Variablen für Optimierung */
  --font-family-base:Arial, Helvetica, sans-serif;
  --font-family-icons:inherit; /* Icons behalten ihre ursprüngliche Schrift */
  --font-size-15:0.9375rem;
  --font-size-base:0.875rem;
  --font-size-small:0.8125rem;
  --font-size-smaller:0.75rem;
  --font-size-tiny:0.6875rem;
}

/* Basis-Schriftart für VideoJS-Container */
.vjs-steinmann-ui,
#vjs-quality-menu,
#vjs-kapitel-menu,
.ereignisLinkbox .linkboxContainer {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
}

/* VideoJS Container nur Schriftart, nicht Größe überschreiben */
.video-js {
  font-family: var(--font-family-base);
}


.vjs-has-started .vjs-control-bar,
.vjs-audio-only-mode .vjs-control-bar{
  height: 5em !important;
  align-items: center; /* Container ist in VJS bereits flex */
  background-color:var(--controlbar-bg);
  bottom:4px;
  padding: 0 17px 0 10px;
}

.video-js .vjs-control{
  width:4em;
  padding-left:5px;
  padding-right:5px;
  color:#fff;
  fill:#fff;
}
.video-js .vjs-control:focus:before,
.video-js .vjs-control:hover:before,
.video-js .vjs-control:focus{ text-shadow:unset; }

.video-js .vjs-control:hover,
.video-js .vjs-control:focus {
  color: var(--highlight);
  fill: var(--highlight);
}
.vjs-button :focus{ outline:none; }
.vjs-menu-button{ font-size:var(--font-size-tiny); }

.video-js .vjs-time-control{
  min-width:0;
    background-color: rgba(0, 0, 0, 0);
    color: var(--steinmann-text-color);
    font-size: var(--font-size-small);
    position: relative;
    padding: 0 2px;
    width: auto;
}
.video-js .vjs-remaining-time{ display:none !important; }

.vjs-menu li{ text-transform:none !important; padding:0.2em 0.2em; }

.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover,
.video-js .vjs-volume-panel.vjs-volume-panel-horizontal:active,
.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active{ width:10em; }
.vjs-mouse-display,
.vjs-volume-level{ top:0px !important; margin-top:1px !important; margin-right: 10px; }

@media (hover: none) and (pointer: coarse) {
  /* Mobile device styles */
  .vjs-volume-panel{ display:none !important; } /* auf mobilen Geräten das Volume-Panel ausblenden */
}


.video-js .vjs-big-play-button{
  border:none !important;
  background-color:var(--transparent);
  content:"\f101";
}
.video-js .vjs-big-play-button:focus{ background-color:var(--transparent); }
.video-js:hover .vjs-big-play-button,
.video-js .vjs-big-play-button:focus{
  background-color:var(--transparent);
  transition:all 0srgba(255,34,0,0.5);
}

.vjs-seek-to-live-control .vjs-icon-placeholder:before{
  content:"•";
  font-family:inherit;
  font-size:2rem;
  display:inline-block;
  line-height: 10px;
}

.vjs-icon-circle:before,
.video-js .vjs-volume-level:before{
  content:"•";
  font-family:inherit;
  font-size:280%;
  display:inline-block;
  transform:translate(-110%,-75%);
}

.video-js .vjs-play-progress:before{
  content:"";
  position:absolute;
  top:50%;
  left:100%;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--color-text);
  transform:translate(-50%,-50%);
  box-shadow:0 0 0 6px var(--white-20);
}

.video-js .vjs-progress-holder .vjs-load-progress div{ display:none; }

.video-js .vjs-big-play-button .vjs-icon-placeholder{
  font-size:0;
  text-indent:-9999px;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  display:block;
  height:250px;
  width:250px;
  background:url("https://start.video-stream-hosting.de/static/videojs/soeren/play-button.svg") no-repeat center center;
  background-size:contain;
  filter:drop-shadow(0px 4px 24px var(--shadow-strong));
}
@media only screen and (max-width:767px){
  .video-js .vjs-big-play-button .vjs-icon-placeholder{ background-size:40% 40%; }
}
@media only screen and (max-height:300px){
  .video-js .vjs-big-play-button .vjs-icon-placeholder{ background-size:40% 40%; }
}
.video-js .vjs-big-play-button .vjs-icon-placeholder:before{ content:unset; visibility:hidden; }

.vjs-workinghover .vjs-menu-button-popup.vjs-hover .vjs-menu{ display:none; }

.vjs-steinmann-ui .vjs-menu-item-text,
.vjs-steinmann-ui .vjs-menu-item {
  font-size: var(--font-size-15);
  font-family: var(--font-family-base);
  color: var(--color-text);
  padding: 6px 18px;
  white-space: nowrap;
  font-weight: normal;
  background-color:var(--transparent);
}

.vjs-steinmann-ui .vjs-menu-item-text {
  font-weight: bold;
  color: var(--color-text);
}

.vjs-steinmann-ui .vjs-menu-item.vjs-selected .vjs-menu-item-text,
.vjs-steinmann-ui .vjs-menu-item:active .vjs-menu-item-text {
  color: var(--highlight);
}

.vjs-steinmann-ui .vjs-menu-item:hover,
.vjs-steinmann-ui .vjs-menu-item:focus {
  color: var(--highlight);
  background: none;
}

.vjs-menu li.vjs-selected, 
.vjs-menu li.vjs-selected:focus, 
.vjs-menu li.vjs-selected:hover, 
.js-focus-visible .vjs-menu li.vjs-selected:hover{
  background: none;
}

.vjs-quality-button.vjs-button,
.vjs-kapitel-button.vjs-button,
.vjs-sprachenauswahl-button.vjs-button {
  cursor:pointer;
  width:auto;
  margin-bottom:2px;
  font-size:var(--font-size-15);
}

.vjs-kapitel-button{ position:relative; width: auto !important;}
.vjs-quality-button .vjs-icon-placeholder{font-size: 17px;}
.vjs-sprachenauswahl-button { position:relative; width: auto !important;}
.vjs-sprachenauswahl-button .vjs-icon-placeholder{font-size: 17px;}
.vjs-playback-rate-value{
  font-size: var(--font-size-17) !important;
}

#vjs-quality-menu{
  position:absolute;
  bottom:100%;
  right:0;
  transform:translateY(-8px);
  z-index:1000;
  background:var(--ui-dark);
  color:var(--color-text);
  border-radius:6px;
  box-shadow:0 2px 8px rgba(0,0,0,0.4);
  padding:6px 0;
  /* min-width:90px; */
  min-width:120px;
}
#vjs-sprachenauswahl-menu{
  position:absolute;
  bottom:100%;
  right:0;
  transform:translateY(-8px);
  z-index:1000;
  background:var(--ui-dark);
  color:var(--color-text);
  border-radius:6px;
  box-shadow:0 2px 8px rgba(0,0,0,0.4);
  padding:6px 0;
  min-width:90px;
}
#vjs-kapitel-menu {
  position: absolute;
  bottom: 100%;
  right: 0;
  transform: translateY(-8px);
  z-index: 1000;
  background: var(--ui-dark);
  color: var(--color-text);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  padding: 0 0 6px 0;
  overflow-y: auto;
  max-height: calc(100vh - 67px);
  width: max-content;
  min-width: 280px;
  max-width: min(80vw, 600px);
  text-align: left;
}
#vjs-kapitel-menu .vjs-kapitel-heading { /*Überschrift Container von Kapitel*/
  font-size: 1.5em;
  padding: 18px !important;
  font-weight: bold;
  white-space: nowrap;
  color: #ddd;
  position: relative;
}

#vjs-kapitel-menu .vjs-kapitel-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

#vjs-kapitel-menu .vjs-kapitel-close svg {
  width: 28px;
  height: 28px;
  fill: var(--color-text);
  transition: fill 200ms;
}

#vjs-kapitel-menu .vjs-kapitel-close:hover svg {
  fill: var(--highlight);
}
/* #vjs-kapitel-menu{
  position: absolute;
  bottom: 100%;
  right: 0;
  transform: translateY(-8px);
  z-index:1000;
  background: var(--ui-dark);
  color:var(--color-text);
  border-radius:6px;
  padding:6px 0;
  overflow-y:auto;
  max-height:calc(100vh - 67px);
  width: 40%;
  min-width: 350px;
  max-width: 600px;
  margin:0;
  text-align:left;
  padding:5px;
  -webkit-box-shadow:-7px 6px 19px 0px var(--shadow-strong);
  -moz-box-shadow:-7px 6px 19px 0px var(--shadow-strong);
  box-shadow:-7px 6px 19px 0px var(--shadow-strong);
} */
  /* @media (max-width:1600px){ #vjs-kapitel-menu{ width:45%; min-width:320px; } }
  @media (max-width:1200px){ #vjs-kapitel-menu{ width:55%; min-width:300px; } }
  @media (max-width:900px){ #vjs-kapitel-menu{ width:100%; min-width:280px; } }
  @media (max-width:600px){ #vjs-kapitel-menu{ width:100%; min-width:250px; } } */

.vjs-kapitel-item{
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:10px 18px;
  font-size:1.2em;
  cursor:pointer;
  white-space:normal;
  color:var(--color-text);
}
.vjs-kapitel-item:hover{ color:#43a6ff; transition:color 200ms; }
.vjs-kapitel-zeit-item{
  margin-left:auto;
  padding:2px 6px;
  background:rgba(255,255,255,0.1);
  border-radius:10px;
  font-size:.7em;
  font-weight:300;
  white-space:nowrap;
}
.vjs-kapitel-item>span:first-child{
  flex:1 1 auto;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.vjs-steinmann-ui .vjs-gradient-overlay{
  position:absolute;
  bottom:0; left:0; right:0;
  height:30vH; height:180px;
  background:linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.2) 60%, transparent 100%);
  z-index:0;
  opacity:1;
  transition:opacity .3s ease;
  pointer-events:none;
}
.vjs-steinmann-ui .vjs-progress-control.vjs-control{
  background-color:var(--transparent);
  box-sizing:border-box;
  color:var(--color-text);
  cursor:pointer;
  height:20px;
  opacity:1;
  position:absolute;
  left:10px; right:24px; top:-15px;
  bottom:auto;
  visibility:visible;
  width:auto;
  z-index:1;
}
.vjs-steinmann-ui .vjs-progress-holder.vjs-slider.vjs-slider-horizontal{
  background-color:var(--progress-bg);
  bottom:auto;
  box-sizing:border-box;
  color:var(--color-text);
  cursor:pointer;
  display:block;
  border-radius: 100px;
  height: .3em;
  margin:0;
  line-height:normal;
  opacity:1;
  position:absolute;
  top:10px;
  visibility:visible;
  width:100%;
  z-index:auto;
}
.vjs-steinmann-ui .vjs-play-progress.vjs-slider-bar{
  background-color:var(--highlight);
  bottom:0;
  box-sizing:border-box;
  color:var(--color-text);
  cursor:pointer;
  display:block;
  height: .3em;
  border-radius: 100px;
  left:0;
  line-height:normal;
  opacity:1;
  position:absolute;
  right:auto;
  top:0;
  visibility:visible;
  width:auto;
  z-index:auto;
}
.vjs-steinmann-ui .vjs-load-progress{
  background-color:rgba(255,19,19,0);
  bottom:-9px;
  height:9px !important;
  pointer-events:none;
  box-sizing:border-box;
  color:var(--color-text);
  cursor:pointer;
  display:block;
  left:0;
  opacity:1;
  visibility:visible;
  z-index:auto;
}

.vjs-steinmann-ui .vjs-control-text{
  background-color:var(--color-text);
  bottom:28px;
  box-sizing:border-box;
  color:var(--color-black);
  cursor:pointer;
  display:block;
  font-size:var(--font-size-tiny);
  height:22px;
  left:-26px;
  line-height:22px;
  opacity:0;
  position:absolute;
  right:5px;
  top:-10px;
  visibility:hidden;
  width:60px;
  z-index:2;
}
.vjs-steinmann-ui .vjs-control-text-loaded-percentage{
  background-color:var(--transparent);
  bottom:auto;
  box-sizing:border-box;
  color:var(--color-black);
  cursor:pointer;
  display:inline;
  font-size:var(--font-size-tiny);
  height:auto;
  left:auto;
  line-height:22px;
  opacity:1;
  position:static;
  right:auto;
  top:auto;
  visibility:hidden;
  width:auto;
  z-index:auto;
}
.vjs-steinmann-ui .vjs-mouse-display.vjs-abs-hidden{
  background-color:var(--color-black);
  bottom:auto;
  box-sizing:border-box;
  color:var(--color-text);
  cursor:pointer;
  display:none;
  height:100%;
  left:12px;
  line-height:normal;
  opacity:0;
  position:absolute;
  right:auto;
  top:16px;
  visibility:hidden;
  width:0;
  z-index:1;
}
.vjs-steinmann-ui .vjs-time-tooltip{
  background-color:var(--tooltip-bg);
  bottom:auto;
  box-sizing:border-box;
  color:var(--color-text);
  cursor:pointer;
  display:block;
  font-size:var(--font-size-smaller) !important;
  height:auto;
  left:auto;
  line-height:12px;
  opacity:1;
  position:relative;
  right:0;
  top:-25px;
  visibility:hidden;
  min-width:20px;
  width:auto;
  z-index:1;
}
.vjs-mouse-display .vjs-time-tooltip{
  background-color:rgba(255,0,0,0) !important;
  display:block;
  min-width:20px;
  width:auto;
}
.vjs-play-progress .vjs-time-tooltip{
  background-color:var(--tooltip-highlight) !important;
  display:none !important;
}
.vjs-steinmann-ui .vjs-time-tooltip.vjs-abs-hidden{
  background-color:rgba(255,0,0,0) !important;
  color:var(--color-text);
  cursor:pointer;
  display:none;
  visibility:hidden;
  width:auto;
  z-index:1;
}

.vjs-steinmann-ui .vjs-progress-slide{
  background-color:rgba(0,0,0,0);
  bottom:24px;
  box-sizing:border-box;
  color:var(--color-text);
  cursor:pointer;
  display:block;
  height:0;
  left:80px;
  line-height:normal;
  opacity:1;
  position:absolute;
  right:861px;
  top:-4px;
  visibility:visible;
  width:0;
  z-index:1;
}
.vjs-steinmann-ui .vjs-thumb{
  background-color:#000;
  bottom:0;
  box-sizing:border-box;
  color:var(--color-text);
  cursor:pointer;
  display:block;
  height:90px;
  left:-80px;
  line-height:normal;
  opacity:0;
  position:absolute;
  right:-80px;
  top:-90px;
  visibility:visible;
  width:160px;
  z-index:auto;
}
.vjs-steinmann-ui .vjs-thumb-dr{
  background-color:rgba(0,0,0,0);
  bottom:0;
  box-sizing:border-box;
  color:var(--color-text);
  cursor:pointer;
  display:block;
  font-size:var(--font-size-smaller);
  height:18px;
  left:0;
  line-height:18px;
  opacity:1;
  position:absolute;
  right:0;
  top:70px;
  visibility:visible;
  width:158px;
  z-index:auto;
}

.vjs-steinmann-ui .vjs-play-control.vjs-control.vjs-button{
  background-color:var(--transparent);
  color:var(--color-text-secondary);
  font-size:var(--font-size-base);
  line-height:normal;
  position:relative;
  width:40px;
}
.vjs-steinmann-ui .vjs-icon-placeholder.vjs-svg-icon{
  background-color:var(--transparent);
  color:var(--color-text-secondary);
  display:inline-block;
  font-size:var(--font-size-base);
  height:23px;
  line-height:normal;
  width:23px;
}
.vjs-steinmann-ui .vjs-vast-label{
  background-color:var(--transparent);
  color:rgb(240,240,240);
  cursor:auto;
  display:none;
  font-size:var(--font-size-smaller);
}
.vjs-steinmann-ui .vjs-rewind-control.vjs-control.vjs-button.vjs-rewind-10{
  background-color:var(--transparent);
  color:var(--color-text-secondary);
  font-size:var(--font-size-small);
  line-height:normal;
  position:relative;
  width:40px;
}
.vjs-steinmann-ui .vjs-live-control.vjs-control.vjs-hidden{
  background-color:var(--transparent);
  color:var(--color-text);
  display:none;
  position:relative;
}
.vjs-steinmann-ui .vjs-live-display{
  background-color:var(--transparent);
  color:var(--color-text);
  display:block;
  font-size:var(--font-size-small);
}
/* Text "LIVE" neben dem roten Punkt und der Lautstärkeeinstellung */
.vjs-live-display {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.vjs-steinmann-ui .vjs-seek-to-live-control.vjs-control{
  background-color:var(--transparent);
  color:var(--color-text-secondary);
  display:flex;
  align-items:center;
}
.vjs-steinmann-ui .vjs-icon-placeholder{
  background-color:var(--transparent);
  color:var(--icon-muted);
  display:inline;
}
.vjs-steinmann-ui .vjs-seek-to-live-text{
  background-color:var(--transparent);
  color:var(--color-text);
  display:none;
  font-size:var(--font-size-small);
  padding-top:2.5px;
}

.video-js .vjs-volume-bar{ margin:1.75em 0.45em; }
.video-js .vjs-volume-control .vjs-mouse-display{
  z-index:99;
  margin-top:5px !important;
}
.vjs-steinmann-ui .vjs-icon-placeholder:hover,
.vjs-steinmann-ui .vjs-icon-placeholder svg:hover {
  color: var(--highlight);
  fill: var(--highlight);
  transition: color 200ms, fill 200ms;
}
.video-js .vjs-volume-level{ top:-1.5px !important; background-color: var(--highlight);}
.video-js .vjs-volume-tooltip{ top:-38px; }

.vjs-steinmann-ui .vjs-volume-panel.vjs-control.vjs-volume-panel-vertical{
  background-color:var(--transparent);
  color:var(--color-text);
  width:40px;
  position:relative;
  z-index:3;
}
.vjs-steinmann-ui .vjs-mute-control.vjs-control.vjs-button.vjs-vol-3{
  background-color:var(--transparent);
  color:var(--color-text-secondary);
  font-size:var(--font-size-base);
  position:relative;
  width:40px;
}

/* Volume Icon Fixed Width - verhindert Springen beim Volume-Level-Wechsel */
.vjs-steinmann-ui .vjs-mute-control.vjs-control.vjs-button,
.vjs-steinmann-ui .vjs-mute-control.vjs-control.vjs-button.vjs-vol-0,
.vjs-steinmann-ui .vjs-mute-control.vjs-control.vjs-button.vjs-vol-1,
.vjs-steinmann-ui .vjs-mute-control.vjs-button.vjs-vol-2,
.vjs-steinmann-ui .vjs-mute-control.vjs-button.vjs-vol-3 {
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Volume Icon Container Fixed Width */
.vjs-steinmann-ui .vjs-mute-control .vjs-icon-placeholder {
  width: 23px !important;
  min-width: 23px !important;
  text-align: center !important;
  display: inline-block !important;
}
.vjs-steinmann-ui .vjs-volume-control.vjs-control.vjs-volume-vertical{
  background-color:rgba(0,0,0,0);
  bottom:40px;
  color:var(--color-text);
  height:116px;
  opacity:0;
  position:absolute;
  right:10px;
  top:-116px;
  visibility:visible;
  width:30px;
  z-index:2;
}
.vjs-steinmann-ui .vjs-volume-bar.vjs-slider-bar.vjs-slider.vjs-slider-vertical{
  background-color:rgba(255,255,255,0.3);
  height:80px;
  width:5px;
}
.vjs-steinmann-ui .vjs-mouse-display{
  background-color:rgba(0,0,0,0);
  display:none;
  position:absolute;
  width:2px;
  height:100%;
  background-color:#ffffff90;
  z-index:1;
}
.vjs-steinmann-ui .vjs-volume-tooltipppp{
  background-color:rgba(0,0,0,0);
  color:var(--color-text);
}
.vjs-steinmann-ui .vjs-volume-levellll{
  background-color:var(--steinmann-text-color);
  height:80px;
  position:absolute;
  width:5px;
}

.vjs-steinmann-ui .vjs-current-time.vjs-time-control.vjs-control{
  display: flex !important;
  background-color:rgba(0,0,0,0);
  color:var(--steinmann-text-color);
  font-size:var(--font-size-small);
  position:relative;
  padding:0 2px;
  width: auto; /*Nicht doppelt, stehen lassen*/
}
.vjs-steinmann-ui .vjs-current-time-display{
  background-color:rgba(0,0,0,0);
  color:var(--steinmann-text-color);
  font-size:var(--font-size-15);
}
.vjs-steinmann-ui .vjs-time-control.vjs-time-divider{
  background-color:rgba(0,0,0,0);
  color:var(--steinmann-text-color);
  font-size:var(--font-size-small);
  width:8px;
}
.vjs-steinmann-ui .vjs-duration.vjs-time-control.vjs-control{
  display: flex !important;
  background-color:rgba(0,0,0,0);
  color:var(--steinmann-text-color);
  font-size:var(--font-size-small);
  position:relative;
  padding:0 2px;
  width: auto; /*Nicht doppelt, stehen lassen*/
}
.vjs-steinmann-ui .vjs-duration-display{
  background-color:rgba(0,0,0,0);
  color:var(--steinmann-text-color);
  font-size:var(--font-size-15);
}
.vjs-steinmann-ui .vjs-custom-control-spacer.vjs-spacer{
  background-color:rgba(0,0,0,0);
  color:#fff;
  display:-webkit-box;
  width:100%;
}
.vjs-steinmann-ui .vjs-chapters-button.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button.vjs-hidden{
  background-color:rgba(0,0,0,0);
  color:#fff;
  display:none;
  font-size:var(--font-size-small);
  width:40px;
}
.vjs-steinmann-ui .vjs-chapters-button.vjs-menu-button.vjs-menu-button-popup.vjs-button{
  background-color:rgba(0,0,0,0);
  color:var(--steinmann-second-color);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11.34px;
  width:40px;
}

/* SVG im Kapitel-Button zentrieren */
.vjs-kapitel-button svg {
  margin: 2.5px 0 0 0 !important;
  display: block;
}
/* SVG im Sprachauswahl-Button zentrieren */
.vjs-sprachenauswahl-button svg {
  margin: 2.5px 0 0 0 !important;
  display: block;
}

/* Playback Rate Control (Falls für Zukunft)*/
.vjs-steinmann-ui .vjs-playback-rate.vjs-menu-button.vjs-control.vjs-button {
  color: var(--steinmann-second-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-base);
  min-width: 40px; /* Mindestbreite für "1x" */
  max-width: 70px; /* Maximalbreite für "1.25x" */
  width: auto; /* Flexibel je nach Inhalt */
}

/* VideoJS Playback Rate Overrides - Native CSS korrigieren (Falls für Zukunft)
.vjs-steinmann-ui .vjs-playback-rate > .vjs-menu-button,
.vjs-steinmann-ui .vjs-playback-rate .vjs-playback-rate-value, .vjs-playback-rate-value {
*/
.vjs-steinmann-ui .vjs-playback-rate .vjs-playback-rate-value {
  position: static !important;
  top: auto !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
  pointer-events: none !important; /* Verhindert Klick-Abfang */
}
/* Fix, das Playback Rate Popup nicht zu hoch ist */
.vjs-playback-rate .vjs-menu {
  z-index: 10 !important;
  margin-bottom: unset !important;
}

.vjs-icon-play:before,
.video-js .vjs-play-control .vjs-icon-placeholder:before,
.video-js .vjs-big-play-button .vjs-icon-placeholder:before,
.vjs-button > .vjs-icon-placeholder:before{
  font-size:2em;
  line-height:unset;
  padding: 0 0 0 6px;
  display: flex;
  align-items: center;
}
.vjs-icon-volume-mute:before, .video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder:before{
  font-size: 1.8em;
}

.vjs-fullscreen-control .vjs-icon-placeholder:before{ padding-top:.5px; }
.video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal{ padding-top:1.5px; width: 6em !important;}

/* nur sichtbare Controls vertikal mittig ausrichten */
.vjs-has-started .vjs-control-bar .vjs-control:not(.vjs-hidden),
.vjs-audio-only-mode .vjs-control-bar .vjs-control:not(.vjs-hidden) {
  display: flex;
  align-items: center;
  line-height: unset;
}
/* Progressbar größer beim scrubbing auf Touchgeräten BUG*/
.video-js.vjs-scrubbing.vjs-touch-enabled .vjs-progress-control .vjs-progress-holder,
.video-js.vjs-scrubbing.vjs-touch-enabled .vjs-progress-control .vjs-play-progress{
    font-size: 1.22222227em;
}

/* Mobile/Tablet Anpassungen für kleinere Bildschirme */
@media (max-width: 768px) {
  /* Schriftgrößen um eine Stufe reduzieren - nutzt vorhandene rem-Variablen */
  :root {
    --font-size-base: var(--font-size-small);
    --font-size-small: var(--font-size-smaller);
    --font-size-smaller: var(--font-size-tiny);
    --font-size-tiny: 0.625rem;
  }
  
  /* Steuerleiste etwas kompakter machen */
  .vjs-has-started .vjs-control-bar,
  .vjs-audio-only-mode .vjs-control-bar {
    height: 4.5em !important;
    padding: 0 15px 0 8px;
  }
  
  /* Controls etwas schmaler */
  .video-js .vjs-control {
    width: 3.5em;
    padding-left: 4px;
    padding-right: 4px;
  }
  
  /* Button-Breiten anpassen */
  .vjs-steinmann-ui .vjs-play-control.vjs-control.vjs-button,
  .vjs-steinmann-ui .vjs-mute-control.vjs-control.vjs-button.vjs-vol-3,
  .vjs-steinmann-ui .vjs-mute-control.vjs-control.vjs-button,
  .vjs-steinmann-ui .vjs-mute-control.vjs-control.vjs-button.vjs-vol-0,
  .vjs-steinmann-ui .vjs-mute-control.vjs-control.vjs-button.vjs-vol-1,
  .vjs-steinmann-ui .vjs-mute-control.vjs-button.vjs-vol-2,
  .vjs-steinmann-ui .vjs-mute-control.vjs-button.vjs-vol-3 {
    width: 35px;
  }
  
  /* Leere Control-Buttons ausblenden */
  .vjs-control.vjs-button .vjs-icon-placeholder:empty + .vjs-control-text:empty {
    display: none !important;
  }
  
  /* Buttons ohne sichtbaren Inhalt minimieren oder ausblenden */
  .vjs-control.vjs-button:not(.vjs-play-control):not(.vjs-mute-control):not(.vjs-volume-control):not(.vjs-fullscreen-control):not(.vjs-picture-in-picture-control):not(.vjs-kapitel-button):not(.vjs-sprachenauswahl-button) .vjs-icon-placeholder:empty {
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /*
  .vjs-control.vjs-button:not(.vjs-play-control):not(.vjs-mute-control):not(.vjs-volume-control):not(.vjs-fullscreen-control):not(.vjs-picture-in-picture-control):not(.vjs-current-time):not(.vjs-duration):not(.vjs-kapitel-button) {
  */
  .vjs-control.vjs-button:not(.vjs-play-control):not(.vjs-mute-control):not(.vjs-volume-control):not(.vjs-fullscreen-control):not(.vjs-picture-in-picture-control):not(.vjs-current-time):not(.vjs-duration):not(.vjs-kapitel-button):not(.vjs-sprachenauswahl-button):not(.vjs-subs-caps-button):not(.vjs-playback-rate) {
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
  }
}

/*Fix für Untertitel Popup*/
.vjs-menu-button-popup .vjs-menu .vjs-menu-content{
  bottom: 6em;
  width: unset;
  background: var(--ui-dark);
  color: var(--color-text);
  -webkit-box-shadow: -7px 6px 19px 0px var(--shadow-strong);
  -moz-box-shadow: -7px 6px 19px 0px var(--shadow-strong);
  box-shadow: -7px 6px 19px 0px var(--shadow-strong);
  border-radius: 6px;
  /* max-height: 17em; */
  max-height: 80vH;
  right: max(5px, calc(100% - 100vw + 5px));
}




/*Hier auskommentiertes CSS weg gemacht */




.vjs-steinmann-ui .vjs-picture-in-picture-control.vjs-control.vjs-button {
background-color: rgba(0, 0, 0, 0);
  bottom: 0px;
  box-sizing: border-box;
  color: var(--steinmann-second-color);
  cursor: pointer;
  display: block;
  font-family: Arial;
  font-size: 13px;
  left: 0px;
  line-height: normal;
  opacity: 1;
  position: relative;
  right: 0px;
  top: 0px;
  visibility: visible;
  width: 40px;
  z-index: auto;
}

.vjs-steinmann-ui .vjs-fullscreen-control.vjs-control.vjs-button {
background-color: rgba(0, 0, 0, 0);
  bottom: 0px;
  box-sizing: border-box;
  color: var(--steinmann-second-color);
  cursor: pointer;
  display: block;
  font-family: Arial;
  font-size: var(--font-size-base);
  left: 0px;
  line-height: normal;
  opacity: 1;
  position: relative;
  right: 0px;
  top: 0px;
  visibility: visible;
  width: 40px;
  z-index: auto;
}





/* Untertitel: zeilenweiser Hintergrund */
.video-js .vjs-text-track-cue {
  transform: translateY(-4vh) !important;
}
.video-js .vjs-text-track-cue > div {
  background: rgb(121 121 121 / 70%) !important;
  border-radius: 6px !important;
  padding: 2px 10px !important;
  color: #fff !important;
  text-shadow: 1px 1px 3px #7773 !important;
  display: inline-block !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}








.ereignisLinkbox a{
			text-decoration: none;
		}

		.ereignisLinkbox .linkboxContainer{
			padding: 4px;
			border-radius: 5px;
			color: black;
			text-align: left;
			line-height: 1.3;
			background-color: #fff;
			box-shadow: 0px 0px 35px 0px rgb(64 64 64 / 25%);
			-webkit-box-shadow: 0px 0px 35px 0px rgb(64 64 64 / 25%);
			-moz-box-shadow: 0px 0px 35px 0px rgb(64 64 64 / 25%);
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;
			backdrop-filter: blur(5px);
			-webkit-backdrop-filter: blur(5px);
		}
		.ereignisLinkbox .content{
			padding: 10px 15px;
			max-width: 500px;
			/* min-width: 200px; */
		}
		.ereignisLinkbox .thumbnail ~ .content{
			padding: 4px 8px;
		}
		.ereignisLinkbox .thumbnail{
			max-height: 55px;
			max-width: 80px;
			width: auto;
		}
		.ereignisLinkbox .linkboxContainer:hover{
			background-color: rgb(255 255 255 / 100%);
		}
		.ereignisLinkbox .ereignisLink .linkboxContainer:hover{
			cursor: pointer;
		}
		.ereignisLinkbox .headline{
			font-weight: bold;
			/* margin-bottom: 3px; */
		}

		.ereignisLinkbox .ereignisCloseButton{
			position: absolute;
			right: 0;
			top: 0;
			padding: 3px 4px;
			color: #818181;
		}
		@media only screen and (max-width: 468px) {

			.ereignisLinkbox .thumbnail{
				max-height: 35px;
				max-width: 55px;
			}
			.ereignisLinkbox .content{
				/* min-width: 125px; */
				max-width: 300px;
			}
			.ereignisLinkbox .thumbnail ~ .content{
				padding: 2px 8px;
			}
			.ereignisLinkbox .linkboxContainer{
				padding: 3px;
				font-size: var(--font-size-tiny);
				line-height: 1.15em;
				/* justify-content: space-between; */
			}
		}

		@-webkit-keyframes fadeIn {
			from { opacity: 0; }
			to { opacity: 1; }
		}
		@keyframes fadeIn {
			from { opacity: 0; }
			to { opacity: 1; }
		}


		/* Option Laufband */
		.ereignisLinkbox .ereignisLaufband{
			display: inline-block;
			white-space: nowrap;
			-moz-animation: marquee 10s linear infinite;
			-webkit-animation: marquee 10s linear infinite;
			animation: marquee 10s linear infinite;
		}
		@-moz-keyframes marquee {
			0% { transform: translateX(100%); }
			100% { transform: translateX(-100%); }
		}
		@-webkit-keyframes marquee {
			0% { transform: translateX(100%); }
			100% { transform: translateX(-100%); }
		}
		@keyframes marquee {
			0% {
			-moz-transform: translateX(100%);
			-webkit-transform: translateX(100%);
			transform: translateX(100%) }
			100% {
			-moz-transform: translateX(-100%);
			-webkit-transform: translateX(-100%);
			transform: translateX(-100%); }
		}
		button.media-control-button[data-hd-indicator] {
			display: none !important;
		}



.ereignis-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 20;
}
.ereignis-overlay .ereignisLinkbox {
  pointer-events: auto;
  /*
  background: red !important;
  */
  color: #fff !important;
  min-width: 200px !important;
  min-height: 60px !important;
  font-size: 24px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute !important;
  /*
  left: 4vh !important;
  bottom: 8vh !important;
  */
  z-index: 100000 !important;
}
.ereignis-overlay .ereignisLinkbox.posBottom { bottom: 13vh !important; top: auto !important; }
.ereignis-overlay .ereignisLinkbox.posTop    { top: 6vh !important; bottom: auto !important; }
.ereignis-overlay .ereignisLinkbox.posLeft   { left: 4vh !important; right: auto !important; }
.ereignis-overlay .ereignisLinkbox.posRight  { right: 4vh !important; left: auto !important; }
.ereignis-overlay .ereignisLinkbox.posCenter {
  left: 50% !important; top: 50% !important;
  transform: translate(-50%, -50%) !important;
}
.ereignis-overlay .ereignisLinkbox.posBottomCenter {
  left: 50% !important;
  bottom: 13vh !important;
  top: auto !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}
.ereignis-overlay .ereignisLinkbox.posTopCenter {
  left: 50% !important;
  top: 8vh !important;
  bottom: auto !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}
.ereignis-overlay .ereignisLinkbox.posMiddleLeft {
  top: 50% !important;
  left: 4vh !important;
  bottom: auto !important;
  right: auto !important;
  transform: translateY(-50%) !important;
}
.ereignis-overlay .ereignisLinkbox.posMiddleRight {
  top: 50% !important;
  right: 4vh !important;
  bottom: auto !important;
  left: auto !important;
  transform: translateY(-50%) !important;
}
.ereignis-overlay .ereignisLinkbox.full {
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  width: 100% !important; height: 100% !important;
  transform: none !important;
}







.untertitelHinweis-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.untertitelHinweis-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200000;
  background: rgba(20, 20, 20, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.untertitelHinweis-overlay > * {
  pointer-events: auto;
}
.untertitelHinweis-overlay h2 {
  color: #fff;
  font-size: 2rem;
  margin-bottom: 1rem;
  text-align: center;
}
.untertitelHinweis-overlay p {
  color: #fff;
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 0 0 1rem 0;
  text-align: center;
  max-width: 480px;
}
.untertitelHinweis-overlay .untertitelHinweis-close {
  position: absolute;
  top: 16px;
  right: 24px;
  width: 32px;
  height: 32px;
  z-index: 200001;
  pointer-events: auto;
  cursor: pointer;
}
@media (max-width: 600px) {
  .untertitelHinweis-overlay h2 {
    font-size: 1.2rem;
  }
  .untertitelHinweis-overlay p {
    font-size: 1rem;
    padding: 0 10px;
    max-width: 95vw;
  }
  .untertitelHinweis-overlay .untertitelHinweis-close {
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
  }
}




/* per JS eingefügte CSS-Klasse: vjs-no-interact
Live ohne DVR: nur die Spulleiste deaktivieren, optisch sichtbar lassen */
.vjs-progress-control.vjs-no-interact {
  pointer-events: none;
  cursor: default;
}
/* per JS eingefügte CSS-Klasse: vjs-no-interact
Tooltip über der Leiste ausblenden, aber nur innerhalb der deaktivierten Progressbar */
.vjs-progress-control.vjs-no-interact .vjs-time-tooltip,
.vjs-progress-control.vjs-no-interact .vjs-progress-holder .vjs-time-tooltip {
  display: none !important;
}






/* Native Untertitel des Browser ausblenden, damit diese nicht doppelt angezeigt werden.
WebKit/Blink (Chrome, Safari, Edge) */
video::-webkit-media-text-track-display { display: none !important; }
/* Firefox: ::cue kann nicht display:none, aber visibility:hidden */
video::cue { visibility: hidden !important; }

video::-moz-media-text-track-display {
  display: none !important;
}








/* ==============================================
    MODUL EREIGNISSE - 9 POSITIONIERUNGS-SYSTEM
    ============================================== */

/* POSITIONIERUNGS-LEGENDE:
    ========================
    Position          | CSS-Klassen                | CSS-Properties
    ------------------|----------------------------|--------------------------------------------
    Oben Links        | posTop.posLeft             | top: 20px; left: 20px;
    Oben Zentriert    | posTop.posLeft.posRight    | top: 20px; left: 50%; transform: translateX(-50%);
    Oben Rechts       | posTop.posRight            | top: 20px; right: 20px;
    Mitte Links       | posCenter.posLeft          | top: 50%; left: 20px; transform: translateY(-50%);
    Mitte Zentriert   | posCenter.posLeft.posRight | top: 50%; left: 50%; transform: translate(-50%, -50%);
    Mitte Rechts      | posCenter.posRight         | top: 50%; right: 20px; transform: translateY(-50%);
    Unten Links       | posBottom.posLeft          | bottom: 20px; left: 20px;
    Unten Zentriert   | posBottom.posLeft.posRight | bottom: 20px; left: 50%; transform: translateX(-50%);
    Unten Rechts      | posBottom.posRight         | bottom: 20px; right: 20px;
    ========================================================================================= */


    :root {
    --ereignis-padding-base: clamp(8px, 2vw, 20px);
    --ereignis-padding-content: clamp(12px, 2.5vw, 20px);
    --ereignis-radius: clamp(6px, 1vw, 12px);
    --ereignis-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 1px 4px rgba(0, 0, 0, 0.1);
    --ereignis-blur: 8px;
  }

  
  .media-control-overlay{
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
  
  .ereignisLinkbox{
    position: absolute;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 99999;
    display: flex;
    max-width: calc(100% - 2 * var(--ereignis-padding-base));
    pointer-events: auto;
  }
  
  /* =========================
      9 POSITIONEN
      ========================= */
  
  /* OBEN LINKS */
  .media-control-overlay .ereignisLinkbox.posTop.posLeft:not(.posRight){
    top: var(--ereignis-padding-base);
    left: var(--ereignis-padding-base);
  }
  
  /* OBEN ZENTRIERT */
  .media-control-overlay .ereignisLinkbox.posTop.posLeft.posRight,
  .media-control-overlay .ereignisLinkbox.posTop:not(.posLeft):not(.posRight){
    top: var(--ereignis-padding-base);
    left: 50%;
    transform: translateX(-50%);
  }
  
  /* OBEN RECHTS */
  .media-control-overlay .ereignisLinkbox.posTop.posRight:not(.posLeft){
    top: var(--ereignis-padding-base);
    right: var(--ereignis-padding-base);
  }
  
  /* MITTE LINKS */
  .media-control-overlay .ereignisLinkbox.posCenter.posLeft:not(.posRight):not(.posTop):not(.posBottom){
    top: 50%;
    left: var(--ereignis-padding-base);
    transform: translateY(-50%);
  }
  
  /* MITTE ZENTRIERT */
  .media-control-overlay .ereignisLinkbox.posCenter.posLeft.posRight:not(.posTop):not(.posBottom),
  .media-control-overlay .ereignisLinkbox.posCenter:not(.posLeft):not(.posRight):not(.posTop):not(.posBottom){
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  /* MITTE RECHTS */
  .media-control-overlay .ereignisLinkbox.posCenter.posRight:not(.posLeft):not(.posTop):not(.posBottom){
    top: 50%;
    right: var(--ereignis-padding-base);
    transform: translateY(-50%);
  }
  
  /* UNTEN LINKS */
  .media-control-overlay .ereignisLinkbox.posBottom.posLeft:not(.posRight){
    bottom: var(--ereignis-padding-base);
    left: var(--ereignis-padding-base);
  }
  
  /* UNTEN ZENTRIERT */
  .media-control-overlay .ereignisLinkbox.posBottom.posLeft.posRight,
  .media-control-overlay .ereignisLinkbox.posBottom:not(.posLeft):not(.posRight){
    bottom: var(--ereignis-padding-base);
    left: 50%;
    transform: translateX(-50%);
  }
  
  /* UNTEN RECHTS */
  .media-control-overlay .ereignisLinkbox.posBottom.posRight:not(.posLeft){
    bottom: var(--ereignis-padding-base);
    right: var(--ereignis-padding-base);
  }
  
  /* Media Controls sichtbar: Unten-Positionen nach oben verschieben */
  .media-control-overlay.media-control-visible .ereignisLinkbox.posBottom{
    bottom: calc(55px + var(--ereignis-padding-base)) !important;
  }
  
  /* =========================
      RESPONSIVE BREAKPOINTS
      ===	====================== */
  
  /* Standard: Maximale Breiten für bessere Lesbarkeit */
  .media-control-overlay .ereignisLinkbox {
    max-width: min(95%, 600px);
  }
  
  /* Sonderregel Desktop: Zentrierte Meldungen nehmen sich 80% Breite */
  .media-control-overlay .ereignisLinkbox.posTop.posLeft.posRight,
  .media-control-overlay .ereignisLinkbox.posTop:not(.posLeft):not(.posRight),
  .media-control-overlay .ereignisLinkbox.posCenter.posLeft.posRight,
  .media-control-overlay .ereignisLinkbox.posCenter:not(.posLeft):not(.posRight),
  .media-control-overlay .ereignisLinkbox.posBottom.posLeft.posRight,
  .media-control-overlay .ereignisLinkbox.posBottom:not(.posLeft):not(.posRight) {
    width: 80%;
    max-width: 700px;
  }
  
  /* Große Bildschirme: Größere maximale Breiten */
  @media only screen and (min-width: 1400px) {
    .media-control-overlay .ereignisLinkbox {
      max-width: min(90%, 800px);
    }
    
    /* Sonderregel große Bildschirme: Zentrierte Meldungen 75% Breite */
    .media-control-overlay .ereignisLinkbox.posTop.posLeft.posRight,
    .media-control-overlay .ereignisLinkbox.posTop:not(.posLeft):not(.posRight),
    .media-control-overlay .ereignisLinkbox.posCenter.posLeft.posRight,
    .media-control-overlay .ereignisLinkbox.posCenter:not(.posLeft):not(.posRight),
    .media-control-overlay .ereignisLinkbox.posBottom.posLeft.posRight,
    .media-control-overlay .ereignisLinkbox.posBottom:not(.posLeft):not(.posRight) {
      width: 75%;
      max-width: 900px;
    }
  }
  
  /* Tablets: Maximale Breitennutzung */
  @media only screen and (max-width: 768px) {
    .media-control-overlay .ereignisLinkbox {
      max-width: 95%;
    }
    
    /* Sonderregel Tablet: Zentrierte Meldungen nehmen sich 80% Breite */
    .media-control-overlay .ereignisLinkbox.posTop.posLeft.posRight,
    .media-control-overlay .ereignisLinkbox.posTop:not(.posLeft):not(.posRight),
    .media-control-overlay .ereignisLinkbox.posCenter.posLeft.posRight,
    .media-control-overlay .ereignisLinkbox.posCenter:not(.posLeft):not(.posRight),
    .media-control-overlay .ereignisLinkbox.posBottom.posLeft.posRight,
    .media-control-overlay .ereignisLinkbox.posBottom:not(.posLeft):not(.posRight) {
      width: 80%;
    }
  }
  
  /* Mobile: Angepasste Variablen + Full Width */
  @media only screen and (max-width: 640px) {
    :root {
      --ereignis-padding-base: clamp(6px, 3vw, 12px);
      --ereignis-padding-content: clamp(8px, 3vw, 16px);
      --ereignis-radius: clamp(4px, 1.5vw, 8px);
    }
    
    .media-control-overlay .ereignisLinkbox {
      max-width: 95%;
      max-width: calc(100% - 2 * var(--ereignis-padding-base));
    }
    
    /* Zentrierte Nachrichten bekommen width statt max-width */
    .media-control-overlay .ereignisLinkbox.posLeft.posRight,
    .media-control-overlay .ereignisLinkbox:not(.posLeft):not(.posRight) {
      width: 85%;
      max-width: none;
    }
    
    .ereignisLinkbox .linkboxContainer{
      font-size: clamp(12px, 3.5vw, 14px);
      line-height: 1.3;
    }
    
    .ereignisLinkbox .thumbnail{
      max-height: clamp(35px, 6vw, 45px);
      max-width: clamp(50px, 8vw, 65px);
      margin-right: clamp(8px, 2vw, 12px);
    }
    
    .ereignisLinkbox .headline{
      font-size: 1em;
      margin-bottom: 2px;
    }
  }
  
  /* Sehr kleine Screens: Vertikales Layout */
  @media only screen and (max-width: 380px) {
    .ereignisLinkbox .linkboxContainer{
      flex-direction: column;
      text-align: center;
    }
    
    .ereignisLinkbox .thumbnail{
      margin-right: 0;
      margin-bottom: clamp(6px, 2vw, 10px);
    }
  }

  /* FULL Layout */
  .media-control-overlay .ereignisLinkbox.full{
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    max-width: none;
    transform: none;
  }
  .media-control-overlay.media-control-visible .ereignisLinkbox.full{
    bottom: 65px !important;
  }
  .media-control-overlay .ereignisLinkbox.full .linkboxContainer{
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(245, 247, 250, 0.95) 100%);
    border-radius: 0;
    backdrop-filter: blur(var(--ereignis-blur));
    -webkit-backdrop-filter: blur(var(--ereignis-blur));
  }

  .ereignisLinkbox a{
    text-decoration: none;
  }

  .ereignisLinkbox .linkboxContainer{
    font-size: clamp(13px, 2.2vw, 16px); /* Klein - Standard */
    padding: var(--ereignis-padding-content);
    border-radius: var(--ereignis-radius);
    color: #1a1a1a;
    text-align: left;
    line-height: 1.4;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.85) 100%);
    box-shadow: var(--ereignis-shadow);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    backdrop-filter: blur(var(--ereignis-blur));
    -webkit-backdrop-filter: blur(var(--ereignis-blur));
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  /* Mittelgroße Bildschirme - Mittlere Font Size */
  @media only screen and (min-width: 1200px) and (min-height: 800px) {
    .ereignisLinkbox .linkboxContainer{
      font-size: clamp(16px, 2.8vw, 20px); /* Mittel */
    }
    
    .ereignisLinkbox .headline{
      font-size: 1.1em;
    }
  }
  
  /* Große Bildschirme / Vollbild - Große Font Size */
  @media only screen and (min-width: 1600px) and (min-height: 1000px) {
    .ereignisLinkbox .linkboxContainer{
      font-size: clamp(20px, 3.2vw, 24px); /* Groß */
    }
    
    .ereignisLinkbox .headline{
      font-size: 1.15em;
      margin-bottom: 6px;
    }
    
    .ereignisLinkbox .thumbnail{
      max-height: clamp(65px, 10vw, 85px);
      max-width: clamp(85px, 12vw, 115px);
    }
  }
  
  .ereignisLinkbox .content{
    padding: 0;
    flex: 1;
    min-width: 0; /* Wichtig für Textumbruch */
  }
  
  .ereignisLinkbox .headline{
    font-weight: 600;
    margin-bottom: 4px;
    font-size: 1.05em;
    /* Platz für Close-Button: padding-right + button-width + spacing */
    padding-right: calc(26px); /* 26px Button + 16px Abstand */
  }
  
  .ereignisLinkbox .beschreibung{
    /* Falls längerer Text: automatischer Umbruch am Container-Ende */
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  /* Countdown-Container nur so breit wie nötig */
  .ereignisLinkbox [aria-label="Countdown"] {
    width: auto !important;
    max-width: none !important;
    min-width: 280px; /* Mindestbreite für Countdown-Elemente */
    margin: 0 auto; /* Zentriert den Countdown-Container im äußeren Container */
  }
  
  /* Zentrierter Text in Countdown-Boxen */
  /* .ereignisLinkbox [aria-label="Countdown"] .headline {
    text-align: center;
  }
  
  .ereignisLinkbox [aria-label="Countdown"] .beschreibung {
    text-align: center;
  } */

  /*1x Abstand nach oben, egal ob Beschreibung oder Titel gesetzt ist. Wichtig.*/
  .ereignisLinkbox [aria-label="Countdown"] .countdown_container{
    margin-top: 15px;
  }
  
  .ereignisLinkbox .thumbnail{
    max-height: clamp(45px, 8vw, 65px);
    max-width: clamp(60px, 10vw, 90px);
    width: auto;
    border-radius: calc(var(--ereignis-radius) * 0.6);
    margin-right: var(--ereignis-padding-content);
    flex-shrink: 0;
    object-fit: cover;
  }
  
  .ereignisLinkbox .linkboxContainer:hover{
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.15);
  }
  
  .ereignisLinkbox .ereignisLink .linkboxContainer:hover{
    cursor: pointer;
  }
  
  .ereignisLinkbox .headline{
    font-weight: 600;
    margin-bottom: 4px;
    font-size: 1.05em;
  }

  .ereignisLinkbox .ereignisCloseButton{
    position: absolute;
    right: 8px;
    top: 8px;
    padding: 0;
    color: #6b7280;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 10;
  }
  
  .ereignisLinkbox .ereignisCloseButton:hover{
    background: rgba(255, 255, 255, 1);
    color: #dc2626;
    transform: scale(1.05);
  }
  
  /* Dark Theme Support - Browser-Präferenz */
  @media (prefers-color-scheme: dark) {
    .ereignisLinkbox .linkboxContainer{
      background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(51, 65, 85, 0.85) 100%) !important;
      color: #f1f5f9 !important;
      border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    .ereignisLinkbox .linkboxContainer:hover{
      background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(51, 65, 85, 0.9) 100%) !important;
    }
    
    .media-control-overlay .ereignisLinkbox.full .linkboxContainer{
      background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.95) 100%) !important;
    }
    
    .ereignisLinkbox .ereignisCloseButton{
      color: #94a3b8 !important;
      background: rgba(15, 23, 42, 0.95) !important;
      border-color: rgba(255, 255, 255, 0.1) !important;
    }
    
    .ereignisLinkbox .ereignisCloseButton:hover{
      background: rgba(15, 23, 42, 1) !important;
      color: #f87171 !important;
      border-color: rgba(239, 68, 68, 0.3) !important;
    }
  }
  
  /* Dark Theme Support - vereinfacht mit .linkboxContainer.dark Klasse */
  .ereignisLinkbox .linkboxContainer.dark {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(51, 65, 85, 0.85) 100%) !important;
    color: #f1f5f9 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
  
  .ereignisLinkbox .linkboxContainer.dark:hover {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(51, 65, 85, 0.9) 100%) !important;
  }
  
  .ereignisLinkbox .linkboxContainer.dark .ereignisCloseButton {
    color: #94a3b8 !important;
    background: rgba(15, 23, 42, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
  }
  
  .ereignisLinkbox .linkboxContainer.dark .ereignisCloseButton:hover {
    background: rgba(15, 23, 42, 1) !important;
    color: #f87171 !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
  }

  /* Countdown Styles */
  .countdown_container {
    display: flex;
    justify-content: center;
    gap: clamp(12px, 3vw, 20px);
    margin-top: 16px;
    flex-wrap: wrap;
  }

  .countdown_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
  }

  .countdown_number {
    display: inline-block;
    padding: clamp(14px, 3.5vw, 22px) clamp(18px, 4.5vw, 28px);
    border-radius: clamp(8px, 2vw, 12px);
    font-weight: 700 !important;
      font-size: clamp(24px, 5.5vw, 36px) !important;
    line-height: 1;
    min-width: clamp(60px, 9vw, 80px);
    min-height: clamp(50px, 7vw, 65px);
    text-align: center;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    letter-spacing: -0.5px;
  }

  .countdown_label {
    font-size: clamp(12px, 2.5vw, 16px);
    margin-top: 8px;
    color: inherit;
    text-align: center;
    opacity: 0.9;
    font-weight: 500;
  }

  /* FULL Layout */
  .media-control-overlay .ereignisLinkbox.full{
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    max-width: none;
    transform: none;
  }
  .media-control-overlay.media-control-visible .ereignisLinkbox.full{
    bottom: 65px !important;
  }
  .media-control-overlay .ereignisLinkbox.full .linkboxContainer{
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(245, 247, 250, 0.95) 100%);
    border-radius: 0;
    backdrop-filter: blur(var(--ereignis-blur));
    -webkit-backdrop-filter: blur(var(--ereignis-blur));
  }

  @-webkit-keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }


  /* Option Laufband */
  .ereignisLinkbox .ereignisLaufband{
    display: inline-block;
    white-space: nowrap;
    -moz-animation: marquee 10s linear infinite;
    -webkit-animation: marquee 10s linear infinite;
    animation: marquee 10s linear infinite;
  }
  @-moz-keyframes marquee {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
  }
  @-webkit-keyframes marquee {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
  }
  @keyframes marquee {
    0% {
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%) }
    100% {
    -moz-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%); }
  }
  button.media-control-button[data-hd-indicator] {
    display: none !important;
  }
  
  /* Einfache Countdown-Styles für linkboxContainer */
  .linkboxContainer .countdown_container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
  }

  .linkboxContainer .countdown_container > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .linkboxContainer .countdown_container span {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 18px;
    min-width: 45px;
    text-align: center;
  }

  .linkboxContainer .smalltext {
    font-size: 11px;
    margin-top: 4px;
    opacity: 0.8;
  }

  /* Button-Hover-Effekt */
  .linkboxContainer .cta_button:hover {
    transform: translateY(-1px);
    filter: brightness(1.1);
  }
  /* Countdown */
  .ereignis_box_default .countdown_container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
  }

  .ereignis_box_default .countdown_container > div {
    padding: 2px;
    border-radius: 3px;
    display: inline-block;
    min-width: 65px;
  }

  .ereignis_box_default .countdown_container div > span {
    padding: 15px 15px;
    border-radius: 6px;
    font-size: 1.8em;
    background: rgb(255 255 255 / 70%);
    display: inline-block;
    color: #1c1c1c;
    min-width: 70px;
  }

  .ereignis_box_default .smalltext {
    padding-top: 5px;
    font-size: 13px;
  }
  @media only screen and (max-width: 580px) {
    .ereignis_box_default{
      padding: 10px 15px !important;
    }
    .ereignis_box_default .countdown_container{
      gap: 5px;

    }
    .ereignis_box_default .countdown_container div > span{
      padding: 10px 10px;
      font-size: 1.3em;
      min-width: 50px;
    }
  }



  .tonAktivierenLeiste{position:absolute;bottom:90px;left:20px;z-index:999999;background:rgba(0,0,0,0.8);backdrop-filter:blur(8px);color:white;padding:14px 22px;border-radius:8px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;font-size:16px;font-weight:500;cursor:pointer;transition:all 0.3s ease;display:flex;align-items:center;gap:10px;box-shadow:0 4px 12px rgba(0,0,0,0.4)}
  .tonAktivierenLeiste:hover{background:rgba(0,0,0,0.9);transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,0.5)}
  .tonAktivierenLeiste svg{width:22px;height:22px;fill:#fff}
  @media (max-width:768px){
    .tonAktivierenLeiste{bottom:85px;left:15px;padding:12px 18px;font-size:15px}
    .tonAktivierenLeiste svg{width:20px;height:20px}
  }