@charset "utf-8";
/*
 * Tile grid of a section page (app/lib/Kachelraster.php).
 * Tiles are the panel's squares (--zelle, --luecke from grund.css). Each tile is a container,
 * so its label scales with the tile (cqi = tile width).
 *   .kachel--foto   photo; the label slides up over it in the section color (old "mosaic bar")
 *   .kachel--weiss  white square, label in the section color
 *   .kachel--farbe  label in white on the section color, marked by a hairline square
 *   .kachel--leer   empty white square
 */

.kacheln {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--raster-spalten, var(--spalten)), var(--zelle));
	gap: var(--luecke);
}

.kachel {
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
	container-type: inline-size;
}

.kachel-flaeche {
	position: absolute;
	inset: 0;
	display: flex;
	color: inherit;
	text-decoration: none;
}
a.kachel-flaeche:hover {
	text-decoration: none;
}
/* The tile clips its content, so the focus ring goes on the tile itself. */
a.kachel-flaeche:focus-visible {
	outline: none;
}
.kachel:has(> a.kachel-flaeche:focus-visible) {
	outline: 2px solid var(--schrift, var(--weiss));
	outline-offset: 3px;
}

.kachel-name {
	box-sizing: border-box;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 7cqi;
	font-size: 13cqi;
	line-height: 1.15;
	letter-spacing: 0.06em;
	text-align: center;
	hyphens: auto;
	hyphenate-limit-chars: 9 4 4;   /* short words like "august" stay whole */
	overflow-wrap: break-word;
}
.kachel-name > span {
	min-width: 0;
	max-width: 100%;
}
.kachel--lang .kachel-name {
	font-size: 10.5cqi;
}
a.kachel-flaeche:hover .kachel-name > span {
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}

/* White tiles and label tiles */

.kachel--weiss .kachel-flaeche {
	background: var(--weiss);
	color: var(--auf-weiss, var(--blau));
}
.kachel--farbe .kachel-flaeche {
	color: var(--schrift, var(--weiss));
	outline: 1px solid color-mix(in srgb, var(--schrift, var(--weiss)) 40%, transparent);
	outline-offset: -1px;
}
.kachel--leer {
	background: var(--weiss);
}

/* Photo tiles */

.kachel-bild {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.kachel--foto .kachel-name {
	position: absolute;
	inset: 0;
	justify-content: flex-start;
	text-align: left;
	background: var(--farbe, var(--blau));
	color: var(--schrift, var(--weiss));
	transform: translateY(101%);
	transition: transform 250ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.kachel--foto .kachel-flaeche:hover .kachel-name,
.kachel--foto .kachel-flaeche:focus-visible .kachel-name {
	transform: none;
}
/*
 * Once the label covers the tile, the photo is switched off (after the 250 ms slide; back at once
 * on leaving). Tiles sit at fractional pixel positions, and browsers blend the edge pixels of the
 * photo and of the label each on its own, so a hairline of photo stayed visible at the edges of a
 * covered tile (Chrome and Safari, mostly with page zoom). Overlapping the label past the edges
 * does not help: the tile's clip blends each of them again. opacity, not visibility: the photo's
 * alt text is the link's name and must stay readable to screen readers on focus.
 * Not on touch screens, where the label is only a bar and the photo stays visible.
 */
@media not (hover: none) {
	.kachel--foto .kachel-flaeche:hover .kachel-bild,
	.kachel--foto .kachel-flaeche:focus-visible .kachel-bild {
		opacity: 0;
		transition: opacity 0s 250ms;
	}
}
.kachel--foto a.kachel-flaeche:hover .kachel-name > span {
	text-decoration: none;
}

/* Touch screens have no hover: the label stays visible in a slim bar at the bottom. */
@media (hover: none) {
	.kachel--foto .kachel-name {
		inset: auto 0 0;
		display: block;
		padding: 2.5cqi 5cqi 3.5cqi;
		font-size: 10.5cqi;
		line-height: 1.2;
		letter-spacing: 0.04em;
		transform: none;
		transition: none;
	}
	.kachel--foto .kachel-name > span {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		overflow: hidden;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kachel--foto .kachel-name,
	.kachel--foto .kachel-flaeche:is(:hover, :focus-visible) .kachel-bild {
		transition: none;
	}
}