/*
 * Komponente: Button (.btn) – siehe CLAUDE.md Abschnitt 11.4.
 * Varianten: btn-primary, btn-onDark, btn-outline, btn-outline-dark,
 * Größe btn-sm, Breite btn-block.
 */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--font);
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	padding: 14px 26px;
	border-radius: 999px;
	border: 2px solid transparent;
	transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
	white-space: nowrap;
}

.btn:hover {
	transform: translateY(-1px);
}

.btn-primary {
	background: var(--herzenswald-gruen);
	color: #fff;
}

.btn-primary:hover {
	background: var(--waldgruen);
}

.btn-onDark {
	background: var(--white);
	color: var(--waldgruen-dark);
}

.btn-onDark:hover {
	background: var(--cream);
}

.btn-outline {
	background: transparent;
	border-color: rgba(255, 255, 255, .65);
	color: #fff;
}

.btn-outline:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, .1);
}

.btn-outline-dark {
	background: transparent;
	border-color: var(--waldgruen);
	color: var(--waldgruen-dark);
}

.btn-outline-dark:hover {
	background: var(--tint-green);
}

.btn-sm {
	padding: 10px 18px;
	font-size: 13.5px;
}

.btn-block {
	width: 100%;
}