@charset "utf-8";
/*
 * Content block of section and tile pages (app/lib/Werk.php): media and text.
 *   .werk--beides  media in three of the five square columns, text beside them and on below
 *                  (old site: 320 px images + 210 px text); on phones text first, then media
 *   .werk--medien  media across the whole panel
 *   .werk--text    text only, at a readable line length
 */

.werk {
	display: flow-root;
}

.werk-medien {
	display: grid;
	gap: var(--luecke);
	align-content: start;
}

.werk--beides .werk-medien {
	--raster-spalten: 3;
	float: left;
	width: calc(3 * var(--zelle) + 2 * var(--luecke));
	margin: 0 var(--luecke) var(--luecke) 0;
}

@container tafel (width < 560px) {
	.werk--beides {
		display: flex;
		flex-direction: column-reverse;
		gap: calc(2 * var(--luecke));
	}
	.werk--beides .werk-medien {
		float: none;
		width: auto;
		margin: 0;
	}
}

/* Lead image and video: never wider than three squares, so small photos are not blown up. */
.leitbild {
	max-width: calc(3 * var(--zelle) + 2 * var(--luecke));
}
.leitbild img,
.leitbild video {
	display: block;
	width: 100%;
	height: auto;
	background: var(--blau);
}

/* =========================================================================
   Text
   ========================================================================= */

.werk-text {
	font-size: clamp(0.95rem, 0.75rem + 1cqi, 1.1rem);
	line-height: 1.5;
	letter-spacing: 0.07em;
	overflow-wrap: break-word;
}
.werk--text .werk-text {
	max-width: 40em;
}
.werk-text p {
	margin: 0 0 1em;
}
.werk-text p:last-child {
	margin-bottom: 0;
}
.werk-text a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}
.werk-text a:hover {
	text-decoration-thickness: 2px;
}