: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;
  --font-family-base:Arial, Helvetica, sans-serif;
  --font-family-icons:inherit;
  --font-size-19:1.1875rem; /* 19px */
  --font-size-18:1.125rem;  /* 18px */
  --font-size-17:1.0625rem; /* 17px */
  --font-size-16:1rem;      /* 16px */
  --font-size-15:0.9375rem; /* 15px */
  --font-size-14:0.875rem;  /* 14px */
  --font-size-small:0.8125rem; /* 13px */
  --font-size-smaller:0.75rem; /* 12px */
  --font-size-tiny:0.6875rem; /* 11px */
}

/* 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, .vjs-control-bar {
  font-family:var(--font-family-base);
  font-size:inherit;
}

/* Entferne Focus-Umrandung bei allen Button-Elementen im Player und Menü */
.vjs-control-bar .vjs-button,
.vjs-control-bar .vjs-button:focus,
.vjs-control-bar .vjs-button:active,
.vjs-menu-button,
.vjs-menu-button:focus,
.vjs-menu-button:active,
.vjs-menu-item,
.vjs-menu-item:focus,
.vjs-menu-item:active {
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent; /* Für mobile Browser */
}

/* Control-Bar Basis-Styles - sofort laden um FOUC zu verhindern */
/*Inline verlagert. im HEad von .html*/

/* Zusätzliche Styles nach Start */
.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;
}

.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:11em; }

.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), only screen and (max-height:300px){
  .video-js .vjs-big-play-button .vjs-icon-placeholder{ background-size:40% 40%; }
}
@media only screen and (min-width:767px) and (max-width:992px){
  .video-js .vjs-big-play-button .vjs-icon-placeholder{ background-size:60% 60%; }
}
.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{
  font-size: var(--font-size-15);
  font-family: var(--font-family-base);
  color: var(--color-text);
  padding: 8px 16px;
  white-space: nowrap;
  font-weight: normal;
  background-color:var(--transparent);
  line-height: 1.4;
  cursor: pointer;
  border: none;
  display: block;
  transition: background-color 0.2s ease, color 0.2s ease;
}


.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-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;
  font-size:var(--font-size-15);
}

/* Gemeinsame Eigenschaften für Buttons mit fester Breite */
.vjs-kapitel-button.vjs-button,
.vjs-settings-button.vjs-button {
  width: 40px !important;
  line-height: unset !important;
}

/* Reihenfolge der Control-Bar-Elemente mit Flexbox-Order anpassen */
/* Reihenfolge: 1. Kapitel, 2. Settings, 3. Vollbild */
.vjs-control-bar {
  display: flex !important;
}

.vjs-control-bar > * {
  order: 10; /* Standardreihenfolge für die meisten Elemente */
}

.vjs-kapitel-button {
  order: 95 !important; /* Kapitel vor Settings */
  margin-right: 12px !important;
}

.vjs-settings-button.vjs-button {
  order: 96 !important; /* Settings vor Vollbild */
  outline: none !important; /* Entferne Focus-Umrandung */
}

/* Entferne Focus-Umrandung bei allen Zuständen */
.vjs-settings-button.vjs-button:focus,
.vjs-settings-button.vjs-button:active,
.vjs-settings-button.vjs-button:hover {
  outline: none !important;
  box-shadow: none !important;
}

.vjs-fullscreen-control {
  order: 97 !important; /* Vollbild ganz rechts */
}

.vjs-kapitel-button,
.vjs-sprachenauswahl-button { 
  position:relative; 
  width: auto !important;
}

.vjs-sprachenauswahl-button .vjs-icon-placeholderm, 
.vjs-quality-button .vjs-icon-placeholder,
.vjs-playback-rate-value{
  font-size: var(--font-size-17) !important;
}
.vjs-settings-button .vjs-icon-placeholder{
  font-size: var(--font-size-14) !important;
}
.vjs-kapitel-button .vjs-icon-placeholder {
  font-size: var(--font-size-18) !important; 
}
.vjs-quality-button .vjs-icon-placeholder{
margin-top: 0.5px;
}

#vjs-quality-menu{
  display: block;
  margin:0;
  position:absolute;
  bottom:6em;
  right:0;
  transform:translateY(-8px);
  z-index:1000;
  background:var(--ui-dark);
  color:var(--color-text);
  border-radius:8px;
  box-shadow:-7px 6px 19px 0px var(--shadow-strong);
  padding:8px 0;
  min-width:120px;
  max-height:300px;
  overflow-y:auto;
  opacity: 1 !important;
}
#vjs-quality-menu div{
  padding: 10px 18px !important;
  font-size: var(--font-size-base);
  line-height: 1.4;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: bold;
}
#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: 6em;
  right: 0;
  transform: translateY(-8px);
  z-index: 1000;
  background: var(--ui-dark);
  color: var(--color-text);
  border-radius: 8px;
  box-shadow: -7px 6px 19px 0px var(--shadow-strong);
  padding: 8px 0;
  overflow-y: auto;
  max-height: 300px;
  width: max-content;
  min-width: 280px;
  max-width: min(80vw, 600px);
  text-align: left;
  opacity: 1 !important;
}

#vjs-settings-menu {
  position: absolute;
  bottom: 6em;
  right: 0;
  background-color: var(--ui-dark);
  border-radius: 8px;
  color: var(--color-text);
  box-shadow: -7px 6px 19px 0px var(--shadow-strong);
  width: auto;
  padding: 10px 0;
  min-width: 320px;
  max-height: 80vh;
  overflow-y: auto;
  z-index: 999;
  opacity: 1 !important;
}

#vjs-settings-menu .vjs-settings-heading {
  font-size: 1.2em;
  padding: 12px 18px !important;
  font-weight: bold;
  white-space: nowrap;
  color: #ddd;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#vjs-settings-menu .vjs-settings-close {
  width: 28px;
  height: 28px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

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

#vjs-settings-menu .vjs-settings-close:hover svg {
  fill: var(--highlight);
}

#vjs-settings-menu .vjs-menu-item{
  padding: 12px 45px 12px 18px !important;
  position: relative;
  white-space: nowrap;
  text-align: left; /* Linksbündige Ausrichtung sicherstellen */
  margin: 2px 0; /* Etwas vertikaler Abstand zwischen Menüpunkten */
}

#vjs-settings-menu .vjs-menu-item-icon {
  margin-right: 12px;
}

#vjs-settings-menu .vjs-menu-item:hover {
  color: var(--highlight);
  background: rgba(67, 166, 255, 0.1);
}

/* Styling für die Icons im Untertitel-Menü */
#vjs-settings-menu .vjs-language-item {
  justify-content: space-between;
  padding-right: 12px !important;
}

/* Hover-Effekte für Sprachelemente deaktivieren */
#vjs-settings-menu .vjs-language-item:hover {
  background: none !important;
  color: var(--color-text) !important;
}

#vjs-settings-menu .vjs-icon-toggle {
  background-color: rgba(255, 255, 255, 0.1);
  margin-left: 10px;
  -webkit-tap-highlight-color: transparent; /* Entfernt Highlight auf mobilen Geräten */
  touch-action: manipulation; /* Verbessert Touch-Response */
}

#vjs-settings-menu .vjs-icon-toggle:last-child {
  margin-right: 10px; /* Gleicher Abstand rechts wie links */
}

#vjs-settings-menu .vjs-icon-toggle:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

#vjs-settings-menu .vjs-icon-toggle.active {
  background-color: rgba(67, 166, 255, 0.4);
  opacity: 1; /* Aktive Icons sind voll sichtbar */
}

#vjs-settings-menu .vjs-icon-toggle.active:hover {
  background-color: rgba(67, 166, 255, 0.5);
}

/* Spezielle Styles für die verschiedenen Icon-Typen */
#vjs-settings-menu .vjs-icon-captions:before,
#vjs-settings-menu .vjs-icon-audio:before,
#vjs-settings-menu .vjs-icon-subtitles:before,
#vjs-settings-menu .vjs-icon-audio-description:before {
  font-size: 1.3em;
  opacity: 0.9;
}

#vjs-settings-menu .vjs-submenu {
  display: none;
  padding: 8px 0;
}

#vjs-settings-menu .vjs-submenu-item {
  padding: 12px 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 1px 0;
}

#vjs-settings-menu .vjs-submenu-item:hover {
  color: var(--highlight);
  background: rgba(67, 166, 255, 0.1);
}

#vjs-settings-menu .vjs-submenu-item.selected {
  color: var(--highlight);
}

#vjs-settings-menu .vjs-language-item {
  padding: 14px 24px 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1px 0;
  font-size: var(--font-size-16);
}

#vjs-settings-menu .vjs-icon-toggle {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s;
  font-size: 1.5em;
  cursor: pointer;
}

#vjs-settings-menu .vjs-icon-toggle:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

#vjs-settings-menu .vjs-icon-toggle.active {
  color: var(--highlight);
}

#vjs-settings-menu .vjs-back-button {
  padding: 10px 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-weight: bold;
}

#vjs-settings-menu .vjs-back-button:hover {
  color: var(--highlight);
  background: rgba(67, 166, 255, 0.1);
}

#vjs-settings-menu .vjs-back-button svg {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  fill: currentColor;
}
#vjs-kapitel-menu .vjs-kapitel-heading { /*Überschrift Container von Kapitel*/
  font-size: 1.2em;
  padding: 12px 18px !important;
  font-weight: bold;
  white-space: nowrap;
  color: #ddd;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#vjs-kapitel-menu .vjs-kapitel-close {
  width: 20px;
  height: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

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

#vjs-kapitel-menu .vjs-kapitel-close:hover svg {
  fill: var(--highlight);
}

.vjs-steinmann-ui .vjs-menu-item:hover,
#vjs-quality-menu div:hover,
.vjs-kapitel-item:hover {
  color: var(--highlight) !important;
  background: rgba(67, 166, 255, 0.1) !important;
  transition: background-color 0.2s ease, color 0.2s ease; 
}

.vjs-kapitel-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 18px;
  cursor:pointer;
  white-space:normal;
  color:var(--color-text);
  line-height: 1.4;
  min-height: 48px;
}
.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:20px; 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;
}

.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;
}

/* Time Controls (Current Time und Duration) */
.vjs-steinmann-ui .vjs-current-time.vjs-time-control.vjs-control,
.vjs-steinmann-ui .vjs-duration.vjs-time-control.vjs-control,
.vjs-steinmann-ui .vjs-time-control.vjs-time-divider{
  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*/
}

/* Time Displays */
.vjs-steinmann-ui .vjs-current-time-display,
.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-time-control.vjs-time-divider{
  background-color:rgba(0,0,0,0);
  color:var(--steinmann-text-color);
  width:8px;
}
.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 in Kapitel und Sprachauswahl Buttons zentrieren */
.vjs-kapitel-button svg,
.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-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 */
  margin-bottom: 2px;
}
/* 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-bottom:.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),
.vjs-steinmann-ui .vjs-time-control.vjs-time-divider,
.vjs-playback-rate .vjs-playback-rate-value {
  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-settings-button):not(.vjs-playback-rate) {
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
  }

  /*komischer Margin entfernen*/
  .vjs-menu-button-popup .vjs-menu{
    margin-bottom: unset;
  }
  
}

/*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: 8px;
  max-height: 300px;
  padding: 8px 0;
  min-width: 120px;
  transform: translateY(-8px);
  right: max(5px, calc(100% - 100vw + 5px));
  z-index:10;
}


/* 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;
}


/*Hier auskommentiertes CSS weg gemacht */




.vjs-steinmann-ui .vjs-picture-in-picture-control.vjs-control.vjs-button,
.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;
  left: 0px;
  line-height: normal;
  opacity: 1;
  position: relative;
  right: 0px;
  top: 0px;
  visibility: visible;
  width: 40px;
  z-index: auto;
}

.vjs-steinmann-ui .vjs-picture-in-picture-control.vjs-control.vjs-button {
  font-size: 13px;
}

.vjs-steinmann-ui .vjs-fullscreen-control.vjs-control.vjs-button {
  font-size: var(--font-size-base);
}



/* ==============================================
Untertitel (Bugfixes und Styling), Hinweis Overlay, ausblenden native Untertitel
============================================== */

/* Untertitel: zeilenweiser Hintergrund */

.video-js .vjs-text-track-cue > div {
  /* HIER AM BESTEN KEIN IMPORTANT, WEIL SONST UNTERTITELEINSTELLUNGEN NICHT MEHR GEHE*/
  background: rgb(121 121 121 / 70%) !important;
  border-radius: 6px;
  padding: 2px 10px;
  color: #fff;
  text-shadow: 1px 1px 3px #7773 !important;
  display: inline-block;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  font-size: calc(16px + 6 * ((100vw - 320px) / 680));
}

    /* Hinweis Overlay für Untertitel */
    body.modal-open {
        overflow: hidden;
    }

    /* Basis-Content-Styling */
    .untertitelHinweis-content {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        line-height: 1.35;
        max-height: calc(100vh - 70px);
    }

    /* Overlay Container */
    .untertitelHinweis-overlay {
        position: fixed; /* fixed statt absolute für bessere Kompatibilität */
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 999999;
        display: flex; /* flex statt grid für bessere Scrolling-Unterstützung */
        justify-content: center;
        align-items: center;
        color: #fff;
        font-family: Arial;
        background: rgba(20, 20, 20, 0.92);
        pointer-events: auto;
        overflow: hidden;
    }

    /* Content Box Styling - Verbesserte Scrollbarkeit */
    .untertitelHinweis-overlay .untertitelHinweis-content {
        padding: 20px;
        text-align: center;
        border-radius: 10px;
        max-width: 70%;
        max-height: 75vh;
        background: rgba(0, 0, 0, 0.8);
        scrollbar-width: thin; /* Firefox */
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain; /* Verhindert Body-Scroll */
    }

    .untertitelHinweis-overlay h2 {
        color: #fff;
        margin-top: 0;
        margin-bottom: 1rem;
        text-align: center;
        font-size: calc(0.7rem + 1vw);
    }

    .untertitelHinweis-overlay p {
        color: #fff;
        font-size: calc(0.8rem + 0.5vw);
        line-height: 1.6;
        margin: 0 0 1rem 0;
        text-align: center;
    }

    /* Close Button */
    .untertitelHinweis-overlay .untertitelHinweis-close {
        position: absolute;
        top: 10px;
        right: 10px;
        cursor: pointer;
        font-size: 20px;
        color: #fff !important;
        z-index: 200001;
    }

    /* Scrollbar-Styling für alle Geräte */
    .untertitelHinweis-overlay .untertitelHinweis-content::-webkit-scrollbar {
        width: 10px;
        background-color: transparent;
    }
    
    .untertitelHinweis-overlay .untertitelHinweis-content::-webkit-scrollbar-thumb {
        background-color: rgba(255, 255, 255, 0.3);
        border-radius: 5px;
        border: 2px solid rgba(0, 0, 0, 0.2);
    }
    
    .untertitelHinweis-overlay .untertitelHinweis-content::-webkit-scrollbar-thumb:hover {
        background-color: rgba(255, 255, 255, 0.5);
    }
    
    /* Positionierungen und Abstände vereinheitlichen */
    .untertitelHinweis-overlay .untertitelHinweis-content.center {
        justify-self: center;
        align-self: center;
        margin: auto;
    }
    
    @media only screen and (max-width:767px) {
        .untertitelHinweis-overlay .untertitelHinweis-content {
            margin: 10px;
            padding: 15px;
            max-width: 90%;
            max-height: 70vh; /* Noch kleinere Höhe für bessere Touchability */
            overflow-y: scroll !important; /* Scrolling immer erzwingen */
            -webkit-overflow-scrolling: touch !important;
        }

        .untertitelHinweis-overlay .untertitelHinweis-close {
            top: 5px;
            right: 5px;
            width: 30px; /* Größer für bessere Touch-Usability */
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        /* Verbessere Touch-Scrolling auf mobilen Geräten */
        .untertitelHinweis-overlay .untertitelHinweis-content::-webkit-scrollbar {
            width: 5px; /* Schmalere Scrollbar auf mobil */
        }
    }

/* WebKit/Blink (Chrome, Safari, Edge) NICHT LÖSCHEN*/
video::-webkit-media-text-track-display { display: none !important; }

/* Firefox: ::cue kann nicht display:none, aber visibility geht NICHT LÖSCHEN*/
video::cue { visibility: hidden !important; }

/* Basis-Styling für alle Untertitel-Container */
.video-js .vjs-text-track-display {
  inset-block-start: auto !important;
}

/* Ohne Controls: Konstanter Abstand vom Rand */
.video-js.vjs-controls-disabled .vjs-text-track-display, 
.video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display {
  inset-block-end: 72px !important;
}

/* Mit Controls: Control Bar Höhe + Abstand */
.video-js.vjs-controls-enabled .vjs-text-track-display {
  inset-block-end: calc(5em + 70px) !important; /* Desktop: 5em + 70px */
  z-index: 9;
}

/* Vollbild: Etwas weniger Abstand */
.vjs-fullscreen .vjs-text-track-display {
  inset-block-end: calc(5em + 60px) !important; /* Vollbild: 5em + 60px */
}

/* Mobile ≤768px: Kleinere Control Bar (4.5em) + angepasste Abstände */
@media (max-width: 767.98px) {
  .vjs-steinmann-ui .vjs-control-bar {
    padding: 0 10px;
  }
  
  /* Verbesserte Touch-Targets für mobile Geräte */
  #vjs-settings-menu .vjs-icon-toggle {
    width: 40px; /* Noch größerer Klickbereich auf Mobilgeräten */
    height: 40px;
    margin: 0 5px; /* Mehr horizontaler Abstand zwischen den Icons */
  }
  
  #vjs-settings-menu .vjs-language-item {
    padding: 16px 20px; /* Mehr vertikaler Abstand für leichteres Treffen auf Touchscreens */
  }
  
  #vjs-settings-menu .vjs-icon-toggle:before {
    font-size: 1.4em; /* Größere Icons auf Mobilgeräten */
  }
  
  /* Entferne Hover-Effekte auf Mobilgeräten */
  #vjs-settings-menu .vjs-icon-toggle:hover {
    transform: none;
  }
  
  .vjs-text-track-display,
  .vjs-fullscreen .vjs-text-track-display {
    inset-block-end: calc(4.5em + 75px) !important; /* Mobile: 4.5em + 75px */
  }
  
  /* Mobile: Untertitel-Popup an mobile Control Bar Höhe anpassen */
  .vjs-menu-button-popup .vjs-menu .vjs-menu-content, #vjs-kapitel-menu {
    bottom: 5em;
  }
}

/* Container-Styling für korrekte Positionierung */
.vjs-text-track-display > div[style*="inset"] {
  inset: unset !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  /* width: 100% !important;
  display: flex !important;
  justify-content: center !important;*/
}

.vjs-text-track-display > div:first-child {
  margin: 0 20px !important; /* Margin für Abstand des Hintergrund-Containers */
  max-width: calc(100% - 40px) !important; /* Verhindert Überlauf: 100% minus 2x20px Margin */
  box-sizing: border-box !important;
}

/* ==============================================
MODERN TEXT TRACK SETTINGS MODAL - OPTIMIERT
============================================== */

/* Modal Overlay */
.vjs-text-track-settings.vjs-modal-dialog {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0));
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Gelöscht*/


/* ==============================================
    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;
  }

  /* =========================
      DYNAMIC CONTENT WRAPPER
      Wrapper für Overlays, der sich dynamisch an Control-Bar-Höhe anpasst
      ========================= */
  
  .vjs-dynamic-content-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    transition: bottom 0.3s ease;
    z-index: 10;
  }
  
  /* Wenn Control-Bar sichtbar ist, Wrapper-Höhe anpassen */
  .vjs-has-started:not(.vjs-user-inactive) .vjs-dynamic-content-wrapper,
  .vjs-has-started.vjs-user-active .vjs-dynamic-content-wrapper,
  .vjs-has-started.vjs-paused .vjs-dynamic-content-wrapper {
    bottom: 6em;
  }
  
  /* Audio-Only Mode */
  .vjs-audio-only-mode .vjs-dynamic-content-wrapper {
    bottom: 6em;
  }
  
  /* ereignis-overlay innerhalb des Wrappers */
  .vjs-dynamic-content-wrapper .ereignis-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
  
  .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
      ========================= */

.ereignis-overlay .ereignisLinkbox.posBottom { bottom: 3vh !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: 3vh !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;
}
  
  /* 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: 110px;
    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: 18px;
    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 .vjs-icon-volume-high {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
  }

  @media (max-width:768px) {
    .tonAktivierenLeiste {
      bottom: 85px;
      left: 15px;
      padding: 12px 18px;
      font-size: 15px
    }

    .tonAktivierenLeiste .vjs-icon-volume-high {
      font-size: 18px;
    }
  }

  /*Folgendes CSS damit die Meldungen im Player "Video nicht vorhanden" etc. zentriert sind*/
.vjs-modal-dialog-content{
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}