/* =============================================================================
   KMP Digital — Components
   Wiederverwendbare Bausteine: Buttons, Cards, Tabellen etc.
   ============================================================================= */

/* Buttons --------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: 0.875rem 1.5rem;
	border-radius: var(--r-md);
	font-family: var(--font-display);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-body);
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition:
		transform var(--dur-fast) var(--ease-out),
		background var(--dur-fast) var(--ease-out),
		color var(--dur-fast) var(--ease-out),
		box-shadow var(--dur-fast) var(--ease-out),
		border-color var(--dur-fast) var(--ease-out);
	border: 1px solid transparent;
	white-space: nowrap;
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,0.2); }

.btn--primary {
	background: var(--kmp-purple);
	color: #fff;
}
.btn--primary:hover {
	background: var(--kmp-dark);
	color: #fff;
	box-shadow: var(--sh-lg);
}

.btn--dark {
	background: var(--kmp-dark);
	color: #fff;
}
.btn--dark:hover {
	background: var(--kmp-purple);
	color: #fff;
}

.btn--ghost {
	background: transparent;
	color: inherit;
	border-color: currentColor;
}
.btn--ghost:hover {
	background: currentColor;
	color: var(--kmp-dark);
}
.block--dark .btn--ghost:hover { color: var(--kmp-dark); }

.btn--lg { padding: 1.125rem 2rem; font-size: 1.0625rem; }
.btn--sm { padding: 0.5rem 0.875rem; font-size: var(--fs-small); }

/* Produkt-Karte (wiederverwendet in Archive + Taxonomien) --------------- */
.card-produkt {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: var(--r-lg);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	box-shadow: var(--sh-md);
	transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
	height: 100%;
}
.card-produkt:hover {
	transform: translateY(-6px);
	box-shadow: var(--sh-lg);
}
.card-produkt__media {
	aspect-ratio: 4 / 3;
	background: var(--kmp-light);
	overflow: hidden;
}
.card-produkt__media img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform var(--dur-slow) var(--ease-out);
}
.card-produkt:hover .card-produkt__media img { transform: scale(1.04); }
.card-produkt__media-placeholder {
	width: 100%; height: 100%;
	background:
		repeating-linear-gradient(45deg, var(--kmp-light), var(--kmp-light) 12px,
		#e7e5fb 12px, #e7e5fb 24px);
}
.card-produkt__body {
	padding: var(--space-5);
	display: flex; flex-direction: column; gap: var(--space-3);
	flex: 1;
}
.card-produkt__title {
	margin: 0; font-size: 1.125rem; font-weight: var(--fw-bold);
	color: var(--kmp-dark);
}
.card-produkt__text {
	margin: 0; color: var(--kmp-ink-2); font-size: var(--fs-small);
	line-height: var(--lh-normal);
}
.card-produkt__link {
	margin-top: auto; font-weight: var(--fw-semibold); color: var(--kmp-purple);
	font-size: var(--fs-small);
}

/* Post-Card (Blog-Fallback) -------------------------------------------- */
.post-grid {
	display: grid; gap: var(--space-6);
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.post-card { background: #fff; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-md); }
.post-card__media img { width: 100%; height: 200px; object-fit: cover; }
.post-card__body { padding: var(--space-5); }
.post-card__title { font-size: 1.125rem; }
.post-card__title a { color: var(--kmp-dark); text-decoration: none; }
.post-card__title a:hover { color: var(--kmp-purple); }
.post-card__excerpt { color: var(--kmp-ink-2); font-size: var(--fs-small); }

/* Scroll-Reveal (wird in JS via IntersectionObserver aktiviert) --------- */
[data-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity var(--dur-slow) var(--ease-out),
		transform var(--dur-slow) var(--ease-out);
}
[data-reveal].is-visible {
	opacity: 1;
	transform: none;
}