.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; }
}

/* Open display offer card (Miles 10/26). Unfolded phones and small tablets, 768-991px: headline left, offer card right
   (offer line, countdown, one primary button, second action as a link). Field "Open display layout" turns it off (old one-column hero).
   The card is assembled by module.js only inside this range; outside it nothing here applies. */
@media (min-width: 768px) and (max-width: 991.98px) {
	.od-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 36px; align-items: center; }
	.od-grid > :not(.od-card) { grid-column: 1; min-width: 0; }
	.od-grid > .od-card { grid-column: 2; grid-row: 1 / span 12; align-self: center; }
	.od-card { box-sizing: border-box; width: 100%; padding: 22px 20px 20px; border-radius: 20px; background: rgba(12, 14, 12, .55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
		border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 20px 50px rgba(0, 0, 0, .25); position: relative; z-index: 3; text-align: left; }
	.od-card--light { background: rgba(255, 255, 255, .86); border-color: rgba(0, 0, 0, .08); box-shadow: 0 20px 50px rgba(20, 40, 90, .15); }
	.od-card__label { margin: 0 0 8px !important; font: 600 12px/1 system-ui, -apple-system, sans-serif; letter-spacing: .02em; color: rgba(255, 255, 255, .75); }
	.od-card__offer { margin: 0 0 16px !important; font: 700 20px/1.25 system-ui, -apple-system, sans-serif; color: #fff; }
	.od-card--light .od-card__label { color: rgba(0, 0, 0, .6); }
	.od-card--light .od-card__offer { color: #111; }
	.od-card .offer-wrapper { margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; }
	.od-card .offer-wrapper > :not(.hero-countdown-timer) { display: none !important; }
	.od-card .hero-countdown-timer { margin: 0 !important; padding: 0 0 18px !important; border-bottom: 1px solid rgba(255, 255, 255, .14); }
	.od-card--light .hero-countdown-timer { border-bottom-color: rgba(0, 0, 0, .1); }
	.od-card .countdown-blocks { display: flex !important; justify-content: space-between !important; align-items: flex-start !important; gap: 0 !important; }
	.od-card .countdown-block { flex: 1 1 0; display: flex !important; flex-direction: column; align-items: center; width: auto !important; }
	.od-card .countdown-value { font-size: 30px !important; line-height: 1 !important; font-variant-numeric: tabular-nums; color: #fff !important; }
	.od-card .countdown-label { font-size: 10px !important; letter-spacing: .06em; text-transform: uppercase; margin-top: 6px !important; color: rgba(255, 255, 255, .72) !important; }
	.od-card .countdown-separator { display: inline !important; flex: none; font-size: 22px !important; line-height: 30px !important; color: rgba(255, 255, 255, .5) !important; }
	.od-card--light .countdown-value { color: #111 !important; }
	.od-card--light .countdown-label, .od-card--light .countdown-separator { color: #444 !important; }
	.od-card .cta-group { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 10px !important; margin: 18px 0 0 !important; padding: 0 !important; }
}