@charset "utf-8";
/*
 * Home page (app/lib/Startseite.php): 5 x 5 menu squares directly on the blue.
 *
 * At rest each word is about 2.6 times the readable size, centered and clipped by its square,
 * so only fragments show ("rätselhaft"); soft hyphens break it like "aus-/stellung".
 * Hover or keyboard focus shrinks it to the readable size with a little overshoot.
 * Touch screens have no hover: there the words resolve one after another after loading,
 * in a diagonal wave from the top left, and then stay readable.
 */

.start {
	width: var(--breite);
	container: start / inline-size;
}

.menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: calc(100cqi * 10 / 540);
}

.menu-feld {
	--gross: 42cqi;          /* rest: puzzle */
	--lesbar: 17cqi;         /* hover: readable (old buttons: about 16 px on 100 px, wider spacing) */
	--weit: 190cqi;          /* rest: lines may be wider than the square and get clipped */
	--eng: 90cqi;            /* readable: lines fit into the square */
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--farbe, var(--blau));
	color: var(--schrift, var(--weiss));
	container-type: inline-size;
}

.menu-link {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;   /* a word wider than the square overflows on both sides */
	overflow: hidden;
	color: inherit;
}
.menu-link:hover {
	text-decoration: none;
}
.menu-link:focus-visible {
	outline: none;             /* the ring is drawn on the square, outside the clipping */
}
.menu-feld:has(.menu-link:focus-visible) {
	outline: 2px solid var(--weiss);
	outline-offset: 3px;
}

.menu-wort {
	flex: none;
	width: max-content;
	max-width: var(--weit);
	font-size: var(--gross);
	line-height: 1.08;
	letter-spacing: 0.03em;
	text-align: left;
	hyphens: manual;
	transition:
		font-size 380ms var(--federnd),
		max-width 380ms var(--federnd);
}
.menu-link:hover .menu-wort,
.menu-link:focus-visible .menu-wort {
	font-size: var(--lesbar);
	max-width: var(--eng);
}

/* =========================================================================
   Touch screens: resolve once after loading, in a diagonal wave
   ========================================================================= */

@keyframes menu-aufloesen {
	from {
		font-size: var(--gross);
		max-width: var(--weit);
	}
}

@media (hover: none) {
	.menu-wort {
		font-size: var(--lesbar);
		max-width: var(--eng);
		transition: none;
		animation: menu-aufloesen 650ms var(--federnd) both;
		animation-delay: calc((var(--spalte, 0) + var(--reihe, 0)) * 90ms + 450ms);
	}
	.menu-feld:nth-child(5n + 2) { --spalte: 1; }
	.menu-feld:nth-child(5n + 3) { --spalte: 2; }
	.menu-feld:nth-child(5n + 4) { --spalte: 3; }
	.menu-feld:nth-child(5n + 5) { --spalte: 4; }
	.menu-feld:nth-child(n + 6) { --reihe: 1; }
	.menu-feld:nth-child(n + 11) { --reihe: 2; }
	.menu-feld:nth-child(n + 16) { --reihe: 3; }
	.menu-feld:nth-child(n + 21) { --reihe: 4; }
}

@media (prefers-reduced-motion: reduce) {
	.menu-wort,
	.menu-link:hover .menu-wort {
		font-size: var(--lesbar);
		max-width: var(--eng);
		transition: none;
		animation: none;
	}
}