/*
 * Fallblattanzeige (Split-Flap) – Countdown bis Messebeginn. Markup aus tmk_flipclock_html(), Bewegung aus
 * flipclock.js. Jede Ziffer besteht aus vier Hälften: oben/unten fest (neuer bzw. alter Wert) und zwei Klappen, die
 * beim Wechsel um die Mittelachse drehen. Größe über --flap (Schriftgröße der Ziffern).
 */
.tmk-flap {
	--flap: clamp(34px, 3.6vw, 56px);
	--flap-ink: #fff;
	--flap-top: #17264a;
	--flap-bot: #111d3a;
	--flap-acc: #5fe3e5;
	display: flex; flex-wrap: wrap; align-items: flex-start; gap: calc(var(--flap) * .32);
	font-variant-numeric: tabular-nums;
}
.tmk-flap__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; }
.tmk-flap__g { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.tmk-flap__g em { padding-left: 2px; font: 600 11.5px/1 var(--tsi-display, "Geist", sans-serif); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.tmk-flap__digits { display: flex; gap: calc(var(--flap) * .07); }
.tmk-flap__d {
	position: relative; display: block; width: calc(var(--flap) * .84); height: calc(var(--flap) * 1.3);
	font: 600 calc(var(--flap) * .9)/1 var(--tsi-display, "Geist", sans-serif); letter-spacing: 0; color: var(--flap-ink);
	perspective: calc(var(--flap) * 6); border-radius: calc(var(--flap) * .1);
	box-shadow: 0 calc(var(--flap) * .12) calc(var(--flap) * .3) calc(var(--flap) * -.1) rgba(0, 0, 0, .5), 0 2px 0 rgba(0, 0, 0, .35);
}
.tmk-flap__g--d .tmk-flap__d { color: var(--flap-acc); }
/* Achse mit den seitlichen Lagerpunkten */
.tmk-flap__d::before {
	content: ""; position: absolute; left: 0; right: 0; top: 50%; z-index: 5; height: 2px; margin-top: -1px;
	background: rgba(4, 9, 20, .9); box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
}
.tmk-flap__d::after {
	content: ""; position: absolute; left: -2px; right: -2px; top: 50%; z-index: 6; height: 6px; margin-top: -3px;
	background: radial-gradient(circle at 3px 3px, #46557a 0 2px, transparent 2.4px) left / 6px 6px no-repeat, radial-gradient(circle at 3px 3px, #46557a 0 2px, transparent 2.4px) right / 6px 6px no-repeat;
}
.tmk-flap__h { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.tmk-flap__h i { display: block; height: 200%; font-style: normal; line-height: calc(var(--flap) * 1.3); text-align: center; }
.tmk-flap__h--t, .tmk-flap__h--ft { top: 0; border-radius: calc(var(--flap) * .1) calc(var(--flap) * .1) 0 0; background: linear-gradient(180deg, #1d2e57, var(--flap-top)); transform-origin: 50% 100%; }
.tmk-flap__h--b, .tmk-flap__h--fb { bottom: 0; border-radius: 0 0 calc(var(--flap) * .1) calc(var(--flap) * .1); background: linear-gradient(180deg, var(--flap-bot), #0c1530); transform-origin: 50% 0; }
.tmk-flap__h--b i, .tmk-flap__h--fb i { transform: translateY(-50%); }
.tmk-flap__h--ft { z-index: 3; }
.tmk-flap__h--fb { z-index: 2; transform: rotateX(90deg); }
/* leichter Glanz oben, Schatten unter der Achse */
.tmk-flap__h--t::after, .tmk-flap__h--ft::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 60%); pointer-events: none; }
.tmk-flap__h--b::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 30%; background: linear-gradient(180deg, rgba(0, 0, 0, .28), transparent); pointer-events: none; }

@media (prefers-reduced-motion: no-preference) {
	.tmk-flap__d.is-flip .tmk-flap__h--ft { animation: tmk-flap-top .26s cubic-bezier(.55, 0, .9, .45) forwards; }
	.tmk-flap__d.is-flip .tmk-flap__h--fb { animation: tmk-flap-bot .3s .26s cubic-bezier(.2, .7, .3, 1.25) forwards; }
}
@keyframes tmk-flap-top { from { transform: rotateX(0); filter: brightness(1); } to { transform: rotateX(-90deg); filter: brightness(.55); } }
@keyframes tmk-flap-bot { from { transform: rotateX(90deg); filter: brightness(1.5); } to { transform: rotateX(0); filter: brightness(1); } }

@media (max-width: 767px) {
	.tmk-flap { --flap: clamp(26px, 8.4vw, 38px); gap: 10px 12px; }
	.tmk-flap__g em { font-size: 10.5px; }
}