/* DH Scroll Title — fixed, linked title of the project in the middle of the screen */

/* hide the per-row headings (layout of the rows stays untouched) */
html.dhst-active .row .col.type-text .text ._H2 {
	visibility: hidden;
}

.dhst {
	position: fixed;
	left: 64px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 20;              /* below the Lay Theme logo/nav (21) */
	pointer-events: none;
	width: 240px;             /* overwritten by JS with the width of the text column */
}
.dhst[hidden] { display: none; }

.dhst__track {
	position: relative;
	width: 100%;
	height: var(--dhst-h, 1.5em);
	overflow: hidden;
}
.dhst__item {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	white-space: normal;
	text-wrap: balance;
	color: inherit;
	text-decoration: none;
	pointer-events: auto;
	transition: transform .45s cubic-bezier(.65, 0, .35, 1), opacity .45s cubic-bezier(.65, 0, .35, 1);
}
.dhst__item.is-above { transform: translateY(-170%); opacity: 0; }
.dhst__item.is-below { transform: translateY(70%);  opacity: 0; }
a.dhst__item:hover { opacity: .55; }

@media (max-width: 768px) {
	.dhst { display: none; }
}

/* Bildlink: liegt unsichtbar ueber dem Bild, damit in der Uebersicht nicht nur der Titel,
   sondern auch die Bilder eines Projekts zur Projektseite fuehren. */
.dh-bildlink {
	position: absolute;
	inset: 0;
	display: block;
	z-index: 2;
}