/* Start custom CSS for shortcode, class: .elementor-element-c75658e *//* =========================================================
   STARTS – Template Archiv Grid
   Shortcode: [starts_elementor_template_archive]
   ========================================================= */


/* ---------------------------------------------------------
   Grid
   --------------------------------------------------------- */

.starts-template-archive-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--st-space-06, 32px);
	width: 100%;
}


/* ---------------------------------------------------------
   Card
   --------------------------------------------------------- */

.starts-template-card {
	min-width: 0;
	background: var(--st-color-surface, #ffffff);
	border-radius: var(--st-radius-02, 16px);

	box-shadow:
		var(--st-shadow-offset-x, 0)
		var(--st-shadow-offset-y, 4px)
		var(--st-shadow-blur, 16px)
		var(--st-shadow-spread, 0)
		var(--st-shadow-color, rgba(0, 0, 0, 0.08));

	overflow: hidden;

	transition:
		transform var(--st-motion-normal, 300ms) ease,
		box-shadow var(--st-motion-normal, 300ms) ease;
}


/* ---------------------------------------------------------
   Card Link
   --------------------------------------------------------- */

.starts-template-card__link {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--st-space-03, 12px);

	height: 100%;
	padding: var(--st-space-06, 32px);

	color: var(--st-color-text, #353637);
	text-decoration: none;
}


/* ---------------------------------------------------------
   Titel
   --------------------------------------------------------- */

.starts-template-card__title {
	font-family: var(--st-font-heading, inherit);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;

	color: var(--st-color-text, #353637);
}


/* ---------------------------------------------------------
   Kategorien
   --------------------------------------------------------- */

.starts-template-card__categories {
	font-family: var(--st-font-body, inherit);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;

	color: var(--st-color-text-muted, #6f7273);
}


/* ---------------------------------------------------------
   Hover
   --------------------------------------------------------- */

.starts-template-card:hover {
	transform: translateY(-4px);

	box-shadow:
		0
		8px
		28px
		0
		rgba(0, 0, 0, 0.10);
}


/* ---------------------------------------------------------
   Fokus / Tastatur
   --------------------------------------------------------- */

.starts-template-card__link:focus-visible {
	outline: 2px solid var(--st-color-primary, #1F5A5C);
	outline-offset: -4px;
	border-radius: var(--st-radius-02, 16px);
}


/* ---------------------------------------------------------
   Leerer Zustand
   --------------------------------------------------------- */

.starts-template-archive-empty {
	padding: var(--st-space-06, 32px);

	background: var(--st-color-surface, #ffffff);
	border-radius: var(--st-radius-02, 16px);

	color: var(--st-color-text-muted, #6f7273);
}


/* ---------------------------------------------------------
   Tablet
   --------------------------------------------------------- */

@media (max-width: 1024px) {

	.starts-template-archive-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--st-space-05, 24px);
	}

}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 767px) {

	.starts-template-archive-grid {
		grid-template-columns: 1fr;
		gap: var(--st-space-04, 16px);
	}

	.starts-template-card__link {
		padding: var(--st-space-05, 24px);
	}

}/* End custom CSS */