.timeline-wrap {
	position: relative;
	/* Keine fixe Höhe — wird per JS aus aspectRatio berechnet */
}

.timeline-stage {
	position: absolute;
	inset: 0;
	overflow: hidden;
	user-select: none;
}

.timeline-stage .timeline-item {
	position: absolute;
	border-radius: 8px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

@supports (width: 1cqw) {
    .timeline-stage .timeline-item .button {
        --side-padding: 7cqw;
        --min-width: 7.83cqw;
        --height: 15cqw;
        --line-height: var(--height);
        --font-size: 7cqw;
    }
}

@media (pointer: coarse) and (hover: none) {
    @supports (width: 1cqw) {
        .timeline-stage .timeline-item .button {
            --line-height:  calc(var(--height) + 5px);
        }
    }
}

/*
.timeline-stage .timeline-item .item-content {
	position: absolute;
	top:0; right:0; left: 0;
	padding:1rem;
}

.timeline-stage .timeline-item .item-content .teaser-button {
    transition:transform .3s ease;
}
*/

.timeline-stage .timeline-item img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	pointer-events: none;

	background-size: 96.5%;
	background-position: center 14%;
	background-repeat: no-repeat;
}


.timeline-stage .timeline-item.timeline-slot-1 .teaser-content .counter { font-size: 90%; }
.timeline-stage .timeline-item.timeline-slot-2 .teaser-content .counter { font-size: 80%; }
.timeline-stage .timeline-item.timeline-slot-3 .teaser-content .counter { font-size: 70%; }

[data-timeline-btn] {
	position: absolute;
	width: 71px;
	height: 48px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;

	background-repeat:no-repeat;
	background-position: center;
    background-size: contain;

    transform: translateY(-50%);

    touch-action: manipulation;
}

[data-timeline-btn]:active { 
    transform: translateY(-50%) scale(.9);
}

[data-timeline-btn='left'] { 
    background-image: url(../imgs/timeline-button-left.svg);
}
[data-timeline-btn='right'] { 
    margin-left: -5px;
    background-image: url(../imgs/timeline-button-right.svg);
}

[data-timeline-btn].locked:active,
[data-timeline-btn].locked:active { opacity: 0.4; pointer-events: none; }

@media (max-width: 767px) {
    [data-timeline-btn='left'] { transform:translateX(50%) translateY(-36%); }
    [data-timeline-btn='left']:active { transform:translateX(50%) translateY(-36%) scale(.9); }
    [data-timeline-btn='right'] { transform:translateX(-50%) translateY(-36%); }
    [data-timeline-btn='right']:active { transform:translateX(-50%) translateY(-36%) scale(.9); }
}

@media only screen
    and (min-width: 744px)
    and (max-width: 1376px)
    and (-webkit-min-device-pixel-ratio: 2)
    and (min-aspect-ratio: 3/4)
    and (max-aspect-ratio: 4/3) {
        [data-timeline-btn='left'] { transform:translateX(30%) translateY(-36%); }
        [data-timeline-btn='left']:active { transform:translateX(30%) translateY(-36%) scale(.9); }
        [data-timeline-btn='right'] { transform:translateX(-30%) translateY(-36%); }
        [data-timeline-btn='right']:active { transform:translateX(-30%) translateY(-36%) scale(.9); }
}