#subtitleBox {
  position: absolute;
  left: 50%;
  bottom: 5%;
  transform: translateX(-50%);
  width: clamp(500px, 30%, 600px); /*30%; /*24vw;*/
  /*height: 10vw;*/
  /*overflow: hidden;*/
  pointer-events: none;
  z-index: 9999;
  text-align: center;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.4;
  color: #fff;
  text-shadow: 0 0 6px #000;
  /*filter: url(#hud-filter);*/
  container-type: inline-size;
}

.is-safari #subtitleBox {
  filter: none;
}

#subtitleContent {
  position: absolute;
  left: 0;
  bottom: 3vw;
  width: 100%;
  line-height: 1.2;   /* statt 1.4 */
}

#subtitleContent:has(.subtitle-line) {
  /*border: 2px #fff solid;*/
  border-radius: 1vw;
  /*background-color: #00000050;*/
  padding: 1vw;
}

.subtitle-line {
  display: block;
  text-align: center;
  white-space: nowrap;
  margin: 0;        /* wichtig */
  padding: 0;       /* wichtig */
}

.subtitle-line + .subtitle-line {
  margin-top: 0;    /* verhindert Zusatzabstand */
}

.subtitle-line-wrap {
  display: inline-block;
  position: relative;
}

.subtitle-line-measure {
  position: absolute;
  visibility: hidden;
  white-space: nowrap;
  pointer-events: none;
}

.subtitle-line-typing {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-align: left;
  width: 0;
}



.fade-loop {
  animation: fadeInOut 3s ease-in-out infinite;
}

@keyframes fadeInOut {
  0%   { opacity: 1.0; }
  50%  { opacity: 0.1; }
  100% { opacity: 1.0; }
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 500px) {

	#subtitleBox {
	  width: 100%;
	  font-size: 14px;  
	}
	
}