/* ==========================================================================
   Komponenten — Cards (3D-Tilt), Prozess, Galerie, Testimonial, Formular
   ========================================================================== */

/* Service-Karten */
.service-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1px;
	background: var(--color-line);
	border: 1px solid var(--color-line);
}
/* Fünftes Element füllt die Lücke einer unvollständigen letzten Reihe (kein leeres Bento-Feld) */
.service-grid > :nth-child(5):last-child,
.leistungen-grid > :nth-child(5):last-child {
	grid-column: span 2;
}

.service-card {
	position: relative;
	background: var(--color-surface);
	padding: var(--space-md) var(--space-sm);
	display: flex;
	flex-direction: column;
	gap: 1rem;
	transform-style: preserve-3d;
	transform: perspective(1000px);
	transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
	will-change: transform;
}

.service-card-icon {
	width: 52px;
	height: 52px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--color-accent-soft);
	color: var(--color-accent);
	transform: translateZ(20px);
}
.service-card-icon .icon { width: 26px; height: 26px; }

.service-card h3 { transform: translateZ(14px); }
.service-card p { color: var(--color-ink-soft); font-size: 0.95rem; transform: translateZ(10px); }

.service-card-link {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-weight: var(--fw-semibold);
	font-size: 0.92rem;
	color: var(--color-accent);
	transform: translateZ(16px);
}
.service-card-link .icon { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-out); }
.service-card:hover .service-card-link .icon { transform: translateX(4px); }

@media (hover: hover) and (pointer: fine) {
	.service-card:hover {
		background: var(--color-surface);
		box-shadow: var(--shadow-hard-accent);
		z-index: 1;
	}
}
.service-card:active { transform: perspective(1000px) scale(0.99); }

@media (prefers-reduced-motion: reduce) {
	.service-card { transform: none !important; }
}

/* Prozess-Schritte */
.process-list {
	display: grid;
	gap: 0;
	border-top: 1px solid var(--color-line);
}
.process-item {
	display: grid;
	grid-template-columns: 4.5rem 1fr;
	gap: var(--space-sm);
	padding-block: var(--space-sm);
	border-bottom: 1px solid var(--color-line);
	align-items: start;
}
.process-num {
	font-size: 1.75rem;
	font-weight: var(--fw-black);
	color: var(--color-line-strong);
	letter-spacing: -0.02em;
}
.process-item h3 { margin-bottom: 0.4rem; }
.process-item p { color: var(--color-ink-soft); }

/* Über-uns / Split */
.split-grid {
	display: grid;
	gap: var(--space-lg);
	align-items: center;
}
@media (min-width: 981px) {
	.split-grid { grid-template-columns: 1fr 1fr; }
	.split-grid--reverse { direction: rtl; }
	.split-grid--reverse > * { direction: ltr; }
}
.split-visual {
	position: relative;
	aspect-ratio: 4 / 3;
	border: 1.5px solid var(--color-ink);
}
.split-visual img { width: 100%; height: 100%; object-fit: cover; }

.check-list { display: grid; gap: 0.85rem; margin-top: var(--space-sm); }
.check-list li { display: flex; align-items: flex-start; gap: 0.7rem; font-weight: var(--fw-medium); }
.check-list .icon { color: var(--color-accent); flex-shrink: 0; margin-top: 0.15rem; }

/* Galerie */
.gallery-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-auto-rows: 14rem;
	gap: var(--space-2xs);
}
.gallery-item { position: relative; overflow: hidden; grid-column: span 3; grid-row: span 1; }
.gallery-item:nth-child(1) { grid-column: span 4; grid-row: span 2; }
.gallery-item:nth-child(2) { grid-column: span 2; }
.gallery-item:nth-child(3) { grid-column: span 2; }
.gallery-item:nth-child(4) { grid-column: span 3; }
.gallery-item:nth-child(5) { grid-column: span 3; }
.gallery-item img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform var(--dur-slow) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
	.gallery-item:hover img { transform: scale(1.06); }
}
.gallery-item-cap {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: 0.9rem 1.1rem;
	background: linear-gradient(0deg, rgba(16,20,20,0.75), transparent);
	color: #fff;
	font-size: 0.85rem;
	font-weight: var(--fw-medium);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
	.gallery-item:hover .gallery-item-cap { opacity: 1; transform: translateY(0); }
}
@media (max-width: 640px) {
	.gallery-item-cap { opacity: 1; transform: none; }
}

/* Testimonial */
.testimonial-block {
	position: relative;
	max-width: 42rem;
	margin-inline: auto;
	text-align: center;
	padding: var(--space-lg) var(--space-md);
	border: 1.5px solid var(--color-line-strong);
}
.testimonial-quote {
	font-size: clamp(1.25rem, 2.2vw, 1.6rem);
	font-weight: var(--fw-medium);
	letter-spacing: -0.01em;
	line-height: 1.5;
}
.testimonial-author { margin-top: var(--space-sm); font-size: 0.9rem; color: var(--color-ink-soft); font-weight: var(--fw-semibold); }

/* CTA-Band */
.cta-band {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	padding: var(--space-lg);
	background: var(--color-ink);
	color: #F4F4F2;
}
.cta-band h2 { color: #fff; max-width: 30rem; }

/* Formular */
.form-grid { display: grid; gap: var(--space-sm); }
.field { display: grid; gap: 0.45rem; }
.field label { font-size: 0.85rem; font-weight: var(--fw-semibold); }
.field input,
.field textarea,
.field select {
	font: inherit;
	padding: 0.85rem 1rem;
	border: 1.5px solid var(--color-line-strong);
	background: var(--color-surface);
	color: var(--color-ink);
	border-radius: var(--radius);
	transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
	min-height: 48px;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus,
.field textarea:focus,
.field select:focus {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px var(--color-accent-soft);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--color-ink-faint); }

/* Kontaktformular-Plugin ([kontaktformular], Klassenpräfix wpscp-) — dem Theme angleichen.
   Das Plugin druckt eigenes Inline-CSS (u.a. blauer Button, runde Ecken); hier mit
   Klassenkombinationen höherer Spezifität überschrieben statt !important. */
.wpscp-form.wpscp-form {
	max-width: none;
	margin: 0;
	gap: var(--space-sm);
	background: var(--color-surface);
	padding: var(--space-md);
	border-radius: var(--radius);
	box-shadow: none;
	border: 1.5px solid var(--color-line-strong);
}
.wpscp-form .wpscp-form__title.wpscp-form__title { margin: 0 0 0.25rem; font-size: 1.3rem; }
.wpscp-form.wpscp-form label { font-size: 0.85rem; font-weight: var(--fw-semibold); gap: 0.45rem; }
.wpscp-form.wpscp-form input,
.wpscp-form.wpscp-form textarea {
	padding: 0.85rem 1rem;
	border: 1.5px solid var(--color-line-strong);
	border-radius: var(--radius);
	font-weight: var(--fw-regular);
	background: var(--color-surface);
	color: var(--color-ink);
	min-height: 48px;
	transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.wpscp-form.wpscp-form textarea { min-height: 140px; resize: vertical; }
.wpscp-form.wpscp-form input:focus,
.wpscp-form.wpscp-form textarea:focus {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px var(--color-accent-soft);
}
.wpscp-form__btn.wpscp-form__btn {
	background: var(--color-accent);
	border-radius: var(--radius);
	padding: 0.95rem 1.8rem;
	font-size: 0.95rem;
	box-shadow: var(--shadow-hard);
	transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), filter 0s;
	min-height: 48px;
}
.wpscp-form__btn.wpscp-form__btn:hover { filter: none; transform: translate(-2px, -2px); box-shadow: 9px 9px 0 var(--color-ink); }
.wpscp-form__btn.wpscp-form__btn:active { transform: translate(1px, 1px); box-shadow: 3px 3px 0 var(--color-ink); }
.wpscp-form-success.wpscp-form-success,
.wpscp-form-error.wpscp-form-error { border-radius: var(--radius); }

/* Kontakt-/Anfahrt-Zeilen — Icons dezent, nie riesig */
.contact-line { display: flex; align-items: center; gap: 0.6rem; }
.contact-line .icon { flex-shrink: 0; color: var(--color-accent); width: 20px; height: 20px; }

.info-card {
	border: 1.5px solid var(--color-line-strong);
	padding: var(--space-md);
	display: grid;
	gap: 1.1rem;
}

/* Karten allgemein (Legal etc.) */
.prose { max-width: 68ch; }
.prose h2 { margin-top: var(--space-md); margin-bottom: 0.75rem; font-size: 1.4rem; }
.prose p, .prose li { margin-bottom: 0.9rem; color: var(--color-ink-soft); }
.prose ul { padding-left: 1.25rem; list-style: disc; }

.breadcrumb { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--color-ink-faint); margin-bottom: var(--space-sm); }
.breadcrumb a { color: var(--color-ink-soft); font-weight: var(--fw-medium); }
.breadcrumb a:hover { color: var(--color-accent); }