:root {
	--zsp-akzent: #5F7D64;
	--zsp-akzent-dunkel: #3E5343;
	--zsp-text: #1F2421;
	--zsp-text-hell: #5C645D;
	--zsp-muted: #8A918B;
	--zsp-rahmen: #E5E8E4;
	--zsp-flaeche: #F2F5F1;
}

.zsp-hinweis {
	font-size: 0.8rem;
	color: var(--zsp-muted);
	margin: 0 0 0.75rem;
}

.zsp-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 1rem;
	margin: 0 0 2rem;
}

.zsp-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--zsp-rahmen);
	border-radius: 10px;
	overflow: hidden;
	transition: border-color 0.15s ease;
}

.zsp-card:hover {
	border-color: var(--zsp-akzent);
}

.zsp-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	background: var(--zsp-akzent);
	color: #fff;
	font-size: 0.7rem;
	letter-spacing: 0.02em;
	padding: 3px 10px;
	border-radius: 99px;
}

.zsp-card-bild {
	background: var(--zsp-flaeche);
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.zsp-card-bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.zsp-card-body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: 0.9rem 1rem 1rem;
}

.zsp-card .zsp-card-titel {
	font-size: 1rem;
	font-weight: 600;
	color: var(--zsp-text);
	margin: 0 0 0.35rem;
	line-height: 1.35;
	text-transform: none;
	letter-spacing: normal;
}

.zsp-card-text {
	font-size: 0.85rem;
	color: var(--zsp-text-hell);
	line-height: 1.55;
	margin-bottom: 0.5rem;
}

.zsp-card-text p {
	margin: 0 0 0.4rem;
}

.zsp-card-preis {
	font-size: 0.85rem;
	color: var(--zsp-muted);
	margin: auto 0 0.7rem;
}

.zsp-grid a.zsp-button {
	display: block;
	text-align: center;
	font-size: 0.85rem;
	font-weight: 500;
	text-decoration: none !important;
	outline: none;
	box-shadow: none;
	padding: 0.6rem 0.75rem;
	border-radius: 6px;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.zsp-grid a.zsp-button:focus-visible {
	outline: 2px solid var(--zsp-akzent-dunkel);
	outline-offset: 2px;
}

.zsp-grid a.zsp-button--amazon,
.zsp-grid a.zsp-button--sonstige {
	background: var(--zsp-akzent);
	color: #fff !important;
	border: 1px solid var(--zsp-akzent);
}

.zsp-grid a.zsp-button--amazon:hover,
.zsp-grid a.zsp-button--sonstige:hover {
	background: var(--zsp-akzent-dunkel);
	border-color: var(--zsp-akzent-dunkel);
	color: #fff !important;
}

.zsp-grid a.zsp-button--moebelhaus {
	background: #fff;
	color: var(--zsp-text-hell) !important;
	border: 1px solid #D8DCD7;
}

.zsp-grid a.zsp-button--moebelhaus:hover {
	border-color: var(--zsp-akzent);
	color: var(--zsp-akzent-dunkel) !important;
}

@media (max-width: 480px) {
	.zsp-grid {
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
		gap: 0.75rem;
	}
}