.qhero-countdown { overflow: hidden; width: 100%; }
.qhero-countdown .height-auto   { min-height: 0vh; }
.qhero-countdown .height-small  { padding: 8rem 0; }
.qhero-countdown .height-medium { padding: 14rem 0; }
.qhero-countdown .height-large  { padding: 20rem 0; }
.qhero-countdown .height-full   { min-height: 100vh; padding-bottom: 40px; padding-top: 40px; }
.qhero-countdown .hero-pricing { font-size: .9375rem; line-height: 1.6; }
.qhero-countdown .price-original { opacity: .85; }
.qhero-countdown .price-current { font-weight: 700; }
.qhero-countdown .hero-countdown-timer { margin-bottom: .25rem; }
.qhero-countdown .countdown-blocks { display: flex; align-items: flex-start; gap: 12px; flex-wrap: nowrap; }
.qhero-countdown .countdown-block { display: flex; flex-direction: column; align-items: center; min-width: 3rem; }
.qhero-countdown .countdown-value { font-size: 2.2rem; line-height: 1; }
.qhero-countdown .countdown-label { letter-spacing: .02em; margin-top: .25rem; opacity: .7; font-size: 14px; }
.qhero-countdown .countdown-separator { font-size: 2.5rem; font-weight: 700; line-height: 1; padding: 0 .125rem; }
.qhero-countdown .countdown-expired { font-size: 1.25rem; font-weight: 600; padding: 1rem 0; }
.offer-wrapper { content-visibility: auto; }

/* Hide play/pause button on background video (video is decorative texture) */
.qhero-countdown button:not(.qhero-countdown-text button),
.qhero-countdown [class*="play"]:not(.qhero-countdown-text *),
.qhero-countdown [class*="pause"]:not(.qhero-countdown-text *),
.qhero-countdown [class*="video-control"],
.qhero-countdown [aria-label*="pause" i],
.qhero-countdown [aria-label*="play" i] {
	display: none !important;
}

@media (min-width: 768px) and (max-width: 991.99px) {
	.qhero-countdown .countdown-value { font-size: 2rem; }
	.qhero-countdown .countdown-separator { font-size: 2rem; }
}
@media (max-width: 767.99px) {
	.qhero-countdown .countdown-value { font-size: 1.75rem; }
	.qhero-countdown .countdown-separator { font-size: 1.75rem; }
	.qhero-countdown .countdown-block { min-width: 2.5rem; }
	.qhero-countdown .countdown-label { font-size: .625rem; }
}

/* Load-in fade: only when "Enable animation" is checked */
@keyframes qhero-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
	.qhero-countdown.is-animated .tagline,
	.qhero-countdown.is-animated .qhero-countdown-text :is(h1, h2, h3, h4, h5, h6):not(.description *),
	.qhero-countdown.is-animated .description,
	.qhero-countdown.is-animated .offer-wrapper,
	.qhero-countdown.is-animated .sr-spacer-top-25,
	.qhero-countdown.is-animated .qhero-countdown-media {
		animation: qhero-fade .8s ease-out backwards;
	}
	.qhero-countdown.is-animated .tagline { animation-delay: 0s; }
	.qhero-countdown.is-animated .qhero-countdown-text :is(h1, h2, h3, h4, h5, h6):not(.description *) { animation-delay: .2s; }
	.qhero-countdown.is-animated .description { animation-delay: .5s; }
	.qhero-countdown.is-animated .qhero-countdown-media { animation-delay: .5s; }
	.qhero-countdown.is-animated .offer-wrapper { animation-delay: .8s; }
	.qhero-countdown.is-animated .sr-spacer-top-25 { animation-delay: 1.1s; }
}

/* Inset background with rounded corners: opt-in via Class field "qhero-inset" */
.qhero-countdown.qhero-inset {
	--qhero-inset: 10px;
	--qhero-radius: 32px;
	--qhero-top: 150px; /* fallback; JS sets the real header height */
	width: auto;
	margin: var(--qhero-top) var(--qhero-inset) var(--qhero-inset);
	border-radius: var(--qhero-radius);
	overflow: hidden;
	isolation: isolate;
}
@media (max-width: 767.99px) {
	.qhero-countdown.qhero-inset {
		--qhero-inset: 6px;
		--qhero-radius: 20px;
	}
}

/* Grow-in: hero starts at 80% size and scales to full. Only when "Enable animation" is checked */
@keyframes qhero-grow-in {
	from { transform: scale(.8); }
	to   { transform: scale(1); }
}
@media (prefers-reduced-motion: no-preference) {
	.qhero-countdown.qhero-inset.is-animated {
		transform-origin: center center;
		animation: qhero-grow-in 1s cubic-bezier(.22, 1, .36, 1) backwards;
	}
}
/* Fill the viewport: hero ends at the bottom of the screen (below the header) */
.qhero-countdown.qhero-inset {
	min-height: max(560px, calc(100vh - var(--qhero-top) - var(--qhero-inset)));
	display: flex;
	flex-direction: column;
	justify-content: center;
}
@supports (height: 100svh) {
	.qhero-countdown.qhero-inset {
		min-height: max(560px, calc(100svh - var(--qhero-top) - var(--qhero-inset)));
	}
}
/* Full height centres the content in a 100vh row with 40px of top padding. On a short phone screen (the iPhone Duo's
   382x678 outer screen, an iPhone SE) the content is taller than the screen, so the headline starts at 40px, under the
   72px fixed header (MarktPOS homepage, 2026-10-25). There, start it clear of the header and set the headline a size
   smaller, so the buttons stay where they were. Inset heroes (qhero-inset) measure the header themselves. */
@media (max-width: 575.98px) and (max-height: 740px) {
	.qhero-countdown:not(.qhero-inset) .height-full { padding-top: 88px; }
	.qhero-countdown:not(.qhero-inset) .height-full h1 { font-size: 36px; line-height: 1.1; }
}