.ulb {
	position: relative;
	background: var(--ulb-bg, #3a2e24);
	color: var(--ulb-fg, #f3ead8);
	font-size: var(--ulb-size, 16px);
	font-weight: var(--ulb-weight, 400);
	line-height: 1.4;
	overflow: hidden;
	z-index: 99990;
	box-sizing: border-box;
}
.ulb *, .ulb *::before, .ulb *::after { box-sizing: border-box; }

.ulb--oben-fix,
.ulb--unten-fix {
	position: fixed;
	left: 0;
	right: 0;
}
.ulb--oben-fix  { top: 0; }
.ulb--unten-fix { bottom: 0; }
body.admin-bar .ulb--oben-fix { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar .ulb--oben-fix { top: 46px; }
}

.ulb-viewport {
	overflow: hidden;
	padding: .6em 0;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}

.ulb-track {
	display: flex;
	width: max-content;
	will-change: transform;
}
.ulb.is-running .ulb-track {
	animation: ulb-scroll var(--ulb-dauer, 30s) linear infinite;
}
.ulb--pause:hover .ulb-track,
.ulb--pause:focus-within .ulb-track {
	animation-play-state: paused;
}

.ulb-group {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	white-space: nowrap;
}
.ulb-item { padding: 0 1.5em; letter-spacing: .02em; }
.ulb-sep  { opacity: .7; }

@keyframes ulb-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(var(--ulb-weg, -50%)); }
}

/* Schließen-Knopf */
.ulb-close {
	position: absolute;
	top: 50%;
	right: .4em;
	transform: translateY(-50%);
	width: 1.8em;
	height: 1.8em;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ulb-bg, #3a2e24);
	color: inherit;
	font-size: 1em;
	line-height: 1;
	cursor: pointer;
	opacity: .8;
	box-shadow: 0 0 0 .5em var(--ulb-bg, #3a2e24);
}
.ulb-close:hover, .ulb-close:focus-visible { opacity: 1; outline: 1px solid currentColor; }

/* Nur für Screenreader */
.ulb-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Wer reduzierte Bewegung eingestellt hat, bekommt den Text ruhig angezeigt */
@media (prefers-reduced-motion: reduce) {
	.ulb.is-running .ulb-track { animation: none; }
	.ulb-track { width: auto; }
	.ulb-group { white-space: normal; text-align: center; justify-content: center; width: 100%; }
	.ulb-group + .ulb-group, .ulb-sep { display: none; }
	.ulb-viewport { -webkit-mask-image: none; mask-image: none; padding-right: 2.5em; padding-left: 2.5em; }
}