/* ==========================================================================
   Komponenten — Buttons, Karten, Formulare
   ========================================================================== */

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.85rem 1.75rem;
	border-radius: 999px;
	font-weight: 600;
	font-size: 0.98rem;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform 180ms var(--ease-out), background 180ms var(--ease-out), box-shadow 180ms var(--ease-out), border-color 180ms var(--ease-out);
	min-height: 44px;
}
.btn:active { transform: scale(0.98); }

.btn--primary { background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--primary-dark); box-shadow: var(--shadow); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--border); }
.btn--ghost:hover { border-color: var(--primary); color: var(--primary); }

.hero-slide .btn--ghost { color: #fff; border-color: oklch(100% 0 0 / 45%); }
.hero-slide .btn--ghost:hover { border-color: #fff; }

.btn--small { padding: 0.6rem 1.35rem; font-size: 0.9rem; min-height: 40px; }

@media (max-width: 900px) {
	.site-header__cta { display: none; }
}

/* ---------- Service-Karten ---------- */
.service-card {
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out), border-color 260ms var(--ease-out);
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--border); }
.service-card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-alt); }
.service-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease-out); }
.service-card:hover .service-card__media img { transform: scale(1.05); }
.service-card__body { padding: 1.5rem 1.6rem 1.75rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.service-card__body p { color: var(--ink-soft); font-size: 0.95rem; flex: 1; }
.service-card__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--primary);
	font-weight: 600;
	font-size: 0.92rem;
	margin-top: 0.5rem;
}
.service-card__link .icon { width: 16px; height: 16px; transition: transform 220ms var(--ease-out); }
.service-card:hover .service-card__link .icon { transform: translateX(4px); }

/* ---------- Team-Karten ---------- */
.team-card { transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out); }
.team-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

/* ---------- Kontaktformular-Plugin überschreiben (wärmeres Design statt Blau) ---------- */
.cta-contact__form .wpscp-form,
.kontakt-page__form .wpscp-form {
	max-width: none;
	margin: 0;
	padding: 0;
	box-shadow: none;
	background: transparent;
	gap: 1.1rem;
}
.cta-contact__form .wpscp-form label,
.kontakt-page__form .wpscp-form label { color: var(--ink); font-family: var(--font-body); }
.cta-contact__form .wpscp-form input,
.cta-contact__form .wpscp-form textarea,
.kontakt-page__form .wpscp-form input,
.kontakt-page__form .wpscp-form textarea {
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--bg);
	font-family: var(--font-body);
	min-height: 44px;
	transition: border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
.cta-contact__form .wpscp-form textarea,
.kontakt-page__form .wpscp-form textarea { min-height: 120px; }
.cta-contact__form .wpscp-form input:focus,
.cta-contact__form .wpscp-form textarea:focus,
.kontakt-page__form .wpscp-form input:focus,
.kontakt-page__form .wpscp-form textarea:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 3px var(--primary-soft);
}
.cta-contact__form .wpscp-form__btn,
.kontakt-page__form .wpscp-form__btn {
	background: var(--primary);
	border-radius: 999px;
	padding: 0.85rem 1.85rem;
	font-family: var(--font-body);
	min-height: 44px;
	transition: transform 180ms var(--ease-out), background 180ms var(--ease-out);
}
.cta-contact__form .wpscp-form__btn:hover,
.kontakt-page__form .wpscp-form__btn:hover { filter: none; background: var(--primary-dark); }
.cta-contact__form .wpscp-form__btn:active,
.kontakt-page__form .wpscp-form__btn:active { transform: scale(0.98); }
.cta-contact__form .wpscp-form-success,
.kontakt-page__form .wpscp-form-success { max-width: none; margin: 0 0 1rem; background: oklch(93% 0.05 150); color: oklch(32% 0.06 150); border-color: oklch(80% 0.06 150); }
.cta-contact__form .wpscp-form-error,
.kontakt-page__form .wpscp-form-error { max-width: none; margin: 0 0 1rem; }

/* ---------- Mandanten-Upload-Plugin: dezent an die Palette anpassen ---------- */
.page-content__inner .wrap, .page-content__inner form {
	max-width: none;
}
.page-content__inner .wpscp-ma-form {
	margin: 2rem 0 0;
	padding: 2rem;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	background: var(--surface);
}
.page-content__inner .wpscp-ma-form label { color: var(--ink); font-family: var(--font-body); }
.page-content__inner .wpscp-ma-form input,
.page-content__inner .wpscp-ma-form textarea {
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--bg);
	font-family: var(--font-body);
	min-height: 44px;
}
.page-content__inner .wpscp-ma-form input:focus,
.page-content__inner .wpscp-ma-form textarea:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 3px var(--primary-soft);
}
.page-content__inner .wpscp-form__btn {
	background: var(--primary);
	border-radius: 999px;
	padding: 0.85rem 1.85rem;
	font-family: var(--font-body);
	min-height: 44px;
	transition: transform 180ms var(--ease-out), background 180ms var(--ease-out);
}
.page-content__inner .wpscp-form__btn:hover { background: var(--primary-dark); }
.page-content__inner .wpscp-form__btn:active { transform: scale(0.98); }
.page-content__inner .wpscp-form-success { background: oklch(93% 0.05 150); color: oklch(32% 0.06 150); border-color: oklch(80% 0.06 150); }