/* VIVA Bildraster - gemessen am "Unlimited Grid" auf /designer/ und
   /designer/features/: Zeilen gleich hoch (1fr), 18 px Abstand, Rahmen 1 px;
   Titel und Text weiss in den globalen Schriften des Kits (602d92f, c9e2b69 -
   wie im Original, samt deren Groessen fuer Tablet und Handy). Spalten,
   Hoehen, Farben und Polster setzt das Widget. */

/* Immer volle Breite: in einem Container mit align-items:center schrumpfte
   das Raster sonst auf 18 px (gemessen auf /designer/ bei 390 px). */
.elementor-widget-viva-bildraster:not([class*="elementor-widget__width-"]) {
	width: 100%;
}
.viva-raster {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	gap: 18px;
}
/* Der Text steht im Fluss unten in der Kachel: die Zeilen wachsen mit dem
   laengsten Text wie im Original (Handy: 398 statt 360 px). */
.viva-kachel {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	border: 1px solid #7c7c7c;
	color: #fff;
	text-decoration: none;
	box-shadow: none;
}
.viva-kachel-bild {
	position: absolute;
	inset: 0;
	background: center / cover no-repeat;
	transition: transform 0.3s;
}
.viva-kachel:hover .viva-kachel-bild {
	transform: scale(1.08);
}
.viva-kachel-text {
	position: relative;
	display: block;
	padding: 10px 10px 0;
	background: rgba(0, 0, 0, 0.79);
	color: #fff;
	font-family: var(--e-global-typography-c9e2b69-font-family, "Source Sans Pro"), sans-serif;
	font-size: var(--e-global-typography-c9e2b69-font-size, 20px);
	font-weight: var(--e-global-typography-c9e2b69-font-weight, 300);
	line-height: var(--e-global-typography-c9e2b69-line-height, 1.4em);
	letter-spacing: var(--e-global-typography-c9e2b69-letter-spacing, 1px);
}
/* Grafikelement (Symbol) ueber dem Titel: Feld 31 px auf /designer/features/,
   Symbol 20 px, weiss, mittig; ohne Abstand zum Titel. */
.viva-kachel-symbol {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	font-size: 20px;
	line-height: 1;
	color: #fff;
}
.viva-kachel-titel {
	display: block;
	font-family: var(--e-global-typography-602d92f-font-family, "Source Sans Pro"), sans-serif;
	font-size: var(--e-global-typography-602d92f-font-size, 28px);
	font-weight: var(--e-global-typography-602d92f-font-weight, 300);
	line-height: var(--e-global-typography-602d92f-line-height, 1.3em);
	letter-spacing: var(--e-global-typography-602d92f-letter-spacing, 1px);
}
/* Der Titel bringt im Original eigenes HTML mit (meist h3 mit Farbe) -
   Schrift und Laufweite kommen trotzdem vom Raster, nicht vom Kit; den Rand
   (0 0 .75em) gibt Twenty Seventeen. */
.viva-raster .viva-kachel-titel :is(h1, h2, h3, h4, h5, h6, p) {
	font: inherit;
	letter-spacing: inherit;
	text-transform: none;
}
.viva-kachel-text p {
	margin: 0 0 1.5em;
}