/**
 * CLAUDE: Frontend-CSS | Nur was theme.json nicht kann | theme.json-first Ansatz
 */

/* CLAUDE: Skip-Link | Barrierefreiheit | Sichtbar bei Fokus */
.skip-link {
	position: absolute;
	top: -100%;
	left: 0;
	z-index: 999;
	padding: 0.75rem 1.5rem;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	text-decoration: none;
	font-weight: 600;
}
.skip-link:focus {
	top: 0;
}

/* CLAUDE: Topleiste Social Links | Sanfter Hover-Uebergang | Farbe via theme.json */
.wfi-topbar .wp-block-social-links .wp-social-link a {
	transition: opacity 0.2s ease;
}
.wfi-topbar .wp-block-social-links .wp-social-link:hover a {
	opacity: 0.7;
}

/* CLAUDE: Topleiste Responsive | Kontakt-Items umbrechen auf kleinen Screens */
@media (max-width: 600px) {
	.wfi-topbar .wp-block-group .wp-block-group:first-child {
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--20);
	}
}

/* CLAUDE: Nav CTA Button | Angebot-Link als goldener Button in der Navigation | Klasse wfi-nav-cta */
.wfi-navbar .wp-block-navigation-link.wfi-nav-cta > a {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--white) !important;
	padding: 0.5rem 1.25rem;
	border-radius: var(--wp--custom--border-radius--medium);
	font-weight: 600;
	transition: background-color 0.2s ease, transform 0.1s ease;
}
.wfi-navbar .wp-block-navigation-link.wfi-nav-cta > a:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white) !important;
	transform: translateY(-1px);
}
.wfi-navbar .wp-block-navigation-link.wfi-nav-cta > a:focus-visible {
	outline: 2px solid var(--wp--preset--color--secondary);
	outline-offset: 2px;
}

/* CLAUDE: Focus-Visible | Barrierefreiheit | Sichtbar bei Tastaturnavigation */
*:focus-visible {
	outline: 2px solid var(--wp--preset--color--secondary);
	outline-offset: 2px;
}

/* CLAUDE: Text-Wrap Balance | Ueberschriften gleichmaessig auf Zeilen verteilen | Progressive Enhancement */
.wp-block-heading {
	text-wrap: balance;
}

/* CLAUDE: Text-Wrap Pretty | Absaetze ohne Waisen (einzelnes Wort auf letzter Zeile) | Progressive Enhancement */
p {
	text-wrap: pretty;
	overflow-wrap: break-word;
}

/* CLAUDE: Hero Cover | Subtitle-Breite begrenzen fuer bessere Lesbarkeit auf Desktop */
.wp-block-cover .wp-block-cover__inner-container > p {
	max-width: 40rem;
	margin-left: auto;
	margin-right: auto;
}

/* CLAUDE: Card Equal Height | Columns strecken Cards auf gleiche Hoehe | flex + height:100% */
.wp-block-column:has(> .is-style-wfi-card) {
	display: flex;
	flex-direction: column;
}

/* CLAUDE: Card-Style | Fuer Group-Blocks mit .is-style-wfi-card | overflow:hidden fuer Bilder mit border-radius */
.wp-block-group.is-style-wfi-card {
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--border-radius--large);
	box-shadow: var(--wp--preset--shadow--card);
	padding: var(--wp--preset--spacing--50);
	overflow: hidden;
	transition: box-shadow 0.3s ease, transform 0.3s ease;
	flex-grow: 1;
}
.wp-block-group.is-style-wfi-card:hover {
	box-shadow: var(--wp--preset--shadow--card-hover);
	transform: translateY(-2px);
}

/* CLAUDE: Property Card Equal Height | Cards fuellen volle Grid-Hoehe | Content-Bereich dehnt sich */
.wfi-property-card {
	height: 100%;
}
.wfi-property-card__content {
	flex-grow: 1;
}

/* CLAUDE: Section Alt | Hellgrauer Hintergrund */
.wp-block-group.is-style-wfi-section-alt {
	background-color: var(--wp--preset--color--neutral-100);
}

/* CLAUDE: Heading Hyphenation | Deutsche Komposita in Spalten sauber umbrechen |
   Silbentrennung nur als Fallback auf Mobile, text-wrap: balance bevorzugt */
.wp-block-column .wp-block-heading {
	overflow-wrap: break-word;
	word-break: normal;
	-webkit-hyphens: auto;
	hyphens: auto;
}

/* CLAUDE: Desktop Headings | Keine Silbentrennung ab Tablet |
   Muss NACH der Base-Regel stehen (gleiche Spezifitaet, spaetere Position gewinnt) */
@media (min-width: 782px) {
	.wp-block-column .wp-block-heading {
		-webkit-hyphens: none;
		hyphens: none;
	}
}

/* CLAUDE: Card-Headings | Keine Silbentrennung in schmalen Cards, stattdessen umbrechen */
.wp-block-group.is-style-wfi-card .wp-block-heading {
	-webkit-hyphens: none;
	hyphens: none;
}

/* CLAUDE: Trust-Signals | Woerter zusammenhalten, aber natuerlichen Umbruch erlauben |
   word-break: keep-all verhindert Bruch innerhalb deutscher Komposita wie "Bankfachwirt" |
   Zwei Selektoren: Pattern-Klasse (.wfi-trust-signals) + Live-Seite (primary-bg > columns) */
.wfi-trust-signals .wp-block-heading,
.has-primary-background-color > .wp-block-columns > .wp-block-column > .has-x-large-font-size,
.has-primary-background-color > .wp-block-columns > .wp-block-column > .has-large-font-size {
	-webkit-hyphens: none;
	hyphens: none;
	word-break: keep-all;
	overflow-wrap: break-word;
}

/* CLAUDE: Trust-Signals Spalten breiter | Page-Content nutzt constrained Layout (720px)
   statt wide (1200px) | Override auf wideSize damit 4 Spalten genug Platz haben */
.has-primary-background-color.is-layout-constrained > .wp-block-columns {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-left: auto;
	margin-right: auto;
}

/* CLAUDE: Prozess-Steps | Runde Fotos mit Gold-Border und Nummern-Badge via CSS counter
   | Klasse wfi-process-steps + wfi-process-image noetig | Bilder in assets/images/process/ */
.wfi-process-steps {
	--wfi-image-size: 7rem;
	--wfi-badge-size: 1.75rem;
	counter-reset: wfi-step;
}
.wfi-process-steps .wp-block-column {
	counter-increment: wfi-step;
	transition: transform 0.3s ease;
}
.wfi-process-steps .wp-block-heading {
	hyphens: none;
	overflow-wrap: normal;
	word-break: normal;
}
/* CLAUDE: Runder Bild-Container mit Gold-Border | figure wird zum Kreis beschnitten */
.wfi-process-image {
	position: relative;
	width: var(--wfi-image-size) !important;
	height: var(--wfi-image-size);
	margin-left: auto !important;
	margin-right: auto !important;
	margin-bottom: var(--wp--preset--spacing--30) !important;
	z-index: 1;
}
.wfi-process-image img {
	width: var(--wfi-image-size) !important;
	height: var(--wfi-image-size) !important;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--wp--preset--color--secondary);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* CLAUDE: Nummern-Badge via CSS counter | Goldener Kreis oben-rechts am Bild */
.wfi-process-image::after {
	content: counter(wfi-step);
	position: absolute;
	top: -2px;
	right: -2px;
	width: var(--wfi-badge-size);
	height: var(--wfi-badge-size);
	border-radius: 50%;
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--white);
	font-size: 0.8rem;
	font-weight: 700;
	line-height: var(--wfi-badge-size);
	text-align: center;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	z-index: 2;
}

/* CLAUDE: Prozess-Steps Desktop | Verbindungslinie zwischen Kreisen + Hover */
@media (min-width: 782px) {
	.wfi-process-steps .wp-block-columns {
		position: relative;
	}
	.wfi-process-steps .wp-block-columns::before {
		content: '';
		position: absolute;
		top: calc(var(--wfi-image-size) / 2);
		left: 10%;
		right: 10%;
		height: 2px;
		background-color: var(--wp--preset--color--neutral-300);
	}
	.wfi-process-steps .wp-block-column:hover {
		transform: translateY(-4px);
	}
	.wfi-process-steps .wp-block-column:hover .wfi-process-image img {
		transform: scale(1.08);
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
	}
}

/* CLAUDE: Prozess-Steps Mobile | Bilder ausblenden, Nummern vor h3 via CSS counter */
@media (max-width: 781px) {
	.wfi-process-steps .wp-block-columns {
		gap: var(--wp--preset--spacing--40);
	}
	.wfi-process-steps .wp-block-column .wp-block-image {
		display: none;
	}
	.wfi-process-steps .wp-block-column h3::before {
		content: counter(wfi-step) ". ";
		color: var(--wp--preset--color--secondary);
	}
}

/* CLAUDE: Footer Links | Weiss auf dunklem Hintergrund | Sanfte Transition */
footer a,
footer a:visited {
	color: var(--wp--preset--color--neutral-300);
	text-decoration: none;
	transition: color 0.2s ease;
}
footer a:hover,
footer a:focus {
	color: var(--wp--preset--color--secondary);
}

/* CLAUDE: Footer Listen | Kein Bullet */
footer ul {
	list-style: none;
	padding-left: 0;
}
footer li {
	margin-bottom: 0.5rem;
}

/* CLAUDE: Footer Headings | Keine Silbentrennung bei Uppercase-Headings */
footer .wp-block-heading {
	-webkit-hyphens: none;
	hyphens: none;
}

/* CLAUDE: Footer Word-Break | Lange Woerter in Absaetzen und Listen umbrechen */
footer .wp-block-column p,
footer .wp-block-column li {
	overflow-wrap: break-word;
	word-break: break-word;
}

/* CLAUDE: Checklist-Style | Gruene Checkmarks statt Standard-Bullets | text-wrap: pretty gegen Waisen */
.wp-block-list.is-style-wfi-checklist {
	list-style: none;
	padding-left: 0;
}
.wp-block-list.is-style-wfi-checklist li {
	position: relative;
	padding-left: 1.75rem;
	margin-bottom: 0.5rem;
	text-wrap: pretty;
}
.wp-block-list.is-style-wfi-checklist li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--wp--preset--color--accent);
	font-weight: 700;
}

/* CLAUDE: Highlight-Box | Linker Rand in Secondary-Farbe, heller Hintergrund */
.wp-block-group.is-style-wfi-highlight-box {
	border-left: 4px solid var(--wp--preset--color--secondary);
	background-color: var(--wp--preset--color--neutral-100);
	padding: var(--wp--preset--spacing--50);
}

/* CLAUDE: Highlight-Box Equal Height | Spalten mit Highlight-Boxen strecken auf gleiche Hoehe | Wie Card Equal Height */
.wp-block-column:has(> .is-style-wfi-highlight-box) {
	display: flex;
	flex-direction: column;
}
.wp-block-column > .is-style-wfi-highlight-box {
	flex-grow: 1;
}

/* CLAUDE: Spaltenbilder volle Breite | Bilder in Highlight-Box-Spalten fuellen die Spalte | Verhindert schmale Bilder bei kleinen Originalen */
.wp-block-column:has(> .is-style-wfi-highlight-box) > .wp-block-image img {
	width: 100%;
}

/* CLAUDE: Testimonial-Style | Zitat-Optik | border-radius fuer abgerundete Kanten */
.wp-block-group.is-style-wfi-testimonial {
	position: relative;
	padding: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--60);
	border-radius: var(--wp--custom--border-radius--large);
}
.wp-block-group.is-style-wfi-testimonial::before {
	content: "\201C";
	position: absolute;
	top: -0.25rem;
	left: 0.5rem;
	font-size: 4rem;
	line-height: 1;
	color: var(--wp--preset--color--secondary);
	font-family: var(--wp--preset--font-family--heading);
}

/* CLAUDE: Testimonial Equal Height | Cards fuellen volle Spaltenhoehe | Autorenname am unteren Rand */
.wp-block-column > .wp-block-group.is-style-wfi-testimonial {
	height: 100%;
	display: flex;
	flex-direction: column;
}
.wp-block-column > .wp-block-group.is-style-wfi-testimonial > :last-child {
	margin-top: auto;
}

/* CLAUDE: Testimonials Extended Equal Height | Autorenname am Card-Boden | Klasse wfi-testimonials am Wrapper */
.wfi-testimonials .wp-block-column {
	display: flex;
	flex-direction: column;
}
.wfi-testimonials .wp-block-column > :last-child {
	margin-top: auto;
}

/* CLAUDE: Timeline Linie + Dots | Visueller Werdegang | Klasse wfi-timeline in Pattern noetig */
@media (min-width: 782px) {
	.wfi-timeline .wp-block-columns .wp-block-column:last-child {
		border-left: 2px solid var(--wp--preset--color--neutral-200);
		padding-left: var(--wp--preset--spacing--40);
		position: relative;
	}
	.wfi-timeline .wp-block-columns .wp-block-column:last-child::before {
		content: '';
		width: 12px;
		height: 12px;
		border-radius: 50%;
		background: var(--wp--preset--color--secondary);
		position: absolute;
		left: -7px;
		top: 0.5em;
	}
}

/* CLAUDE: Kontakt-Sektion Mobile | Kontaktdaten VOR Formular auf Mobile anzeigen |
   Klasse wfi-contact-section im Block Editor auf Group-Block setzen */
@media (max-width: 781px) {
	.wfi-contact-section .wp-block-columns {
		flex-direction: column-reverse;
	}
}

/* CLAUDE: Kontaktdaten-Box Icons | aria-hidden spans inline | Abstand zum Text */
.wfi-contact-section .has-neutral-100-background-color span[aria-hidden="true"] {
	margin-right: 0.25em;
}

/* CLAUDE: Angebot Hero | Gradient-Hintergrund warm-50 → transparent */
.wfi-angebot-hero {
	background: linear-gradient(180deg, var(--wp--preset--color--warm-50) 0%, transparent 100%);
}

/* CLAUDE: Hero Trust Badges | 3 inline Badges zentriert */
.wfi-hero-badges {
	display: flex;
	justify-content: center;
	gap: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--40);
	flex-wrap: wrap;
}

.wfi-hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--wp--preset--color--secondary);
	letter-spacing: 0.02em;
}

.wfi-hero-badge svg {
	flex-shrink: 0;
}

/* ============================================================
   CLAUDE: Multi-Step Form Styles | Angebots-Formular |
   Alle Werte via CSS Custom Properties aus theme.json
   ============================================================ */

/* CLAUDE: Form Container | Weisser Hintergrund, Schatten, abgerundete Ecken */
.wfi-multi-step-form {
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--border-radius--large);
	box-shadow: var(--wp--preset--shadow--card);
	padding: var(--wp--preset--spacing--60);
	position: relative;
}

/* CLAUDE: Progress Bar | 5 Schritte horizontal mit Verbindungslinie */
.wfi-form-progress {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: var(--wp--preset--spacing--60);
	position: relative;
	padding: 0 var(--wp--preset--spacing--20);
}

/* CLAUDE: Progress Connecting Line | Horizontale Linie hinter den Kreisen */
.wfi-form-progress::before {
	content: '';
	position: absolute;
	top: 1rem;
	left: calc(10% + 0.5rem);
	right: calc(10% + 0.5rem);
	height: 2px;
	background: var(--wp--preset--color--neutral-300);
	z-index: 0;
}

/* CLAUDE: Progress Fill Line | Goldene Linie ueber der grauen Basislinie | Breite per JS */
.wfi-progress-fill {
	position: absolute;
	top: 1rem;
	left: calc(10% + 0.5rem);
	height: 2px;
	background: var(--wp--preset--color--secondary);
	z-index: 0;
	width: 0;
	transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* CLAUDE: Progress Step | Kreis + Label darunter | Klickbar fuer abgeschlossene Steps */
.wfi-progress-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	cursor: default;
	position: relative;
	z-index: 1;
	flex: 1;
}

.wfi-progress-step.is-clickable {
	cursor: pointer;
}

/* CLAUDE: Progress Kreis | Rund, neutral Rand, Zahl zentriert */
.wfi-progress-number {
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	font-family: var(--wp--preset--font-family--body);
	border: 2px solid var(--wp--preset--color--neutral-300);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--neutral-600);
	transition: all 0.3s ease;
	line-height: 1;
}

/* CLAUDE: Progress Label | Schritt-Bezeichnung unter Kreis */
.wfi-progress-label {
	font-size: var(--wp--preset--font-size--small);
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--neutral-600);
	text-align: center;
	transition: color 0.3s ease;
	white-space: nowrap;
}

/* CLAUDE: Progress Active | Gold-Hintergrund, weisse Zahl, subtiler Glow */
.wfi-progress-step.is-active .wfi-progress-number {
	background: var(--wp--preset--color--secondary);
	border-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--white);
	box-shadow: 0 0 0 4px rgba(197, 165, 114, 0.2);
}

.wfi-progress-step.is-active .wfi-progress-label {
	color: var(--wp--preset--color--neutral-900);
	font-weight: 600;
}

/* CLAUDE: Progress Completed | Gold Hintergrund mit Checkmark */
.wfi-progress-step.is-completed .wfi-progress-number {
	background: var(--wp--preset--color--secondary);
	border-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--white);
}

.wfi-progress-step.is-completed .wfi-progress-label {
	color: var(--wp--preset--color--neutral-800);
}

/* CLAUDE: Form Step | Standardmaessig versteckt, mit Fade-In bei Aktivierung */
.wfi-form-step {
	display: none;
	animation: wfiStepFadeIn 0.3s ease forwards;
}

.wfi-form-step.is-active {
	display: block;
}

@keyframes wfiStepFadeIn {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* CLAUDE: Form Step Title | Heading-Font, genug Abstand unten */
.wfi-form-step-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--neutral-900);
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--50);
	line-height: var(--wp--custom--line-height--heading);
}

/* CLAUDE: Service Cards Grid | 3+2 auf Desktop, responsive darunter */
.wfi-service-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--40);
}

/* CLAUDE: Service Card | Klickbare Karte mit Icon + Text | Hover und Selected States */
.wfi-service-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--white);
	border: 1.5px solid var(--wp--preset--color--neutral-200);
	border-radius: var(--wp--custom--border-radius--medium);
	cursor: pointer;
	transition: all 0.2s ease;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--neutral-800);
	text-align: center;
	line-height: 1.4;
	position: relative;
}

/* CLAUDE: Service Card Hover | Lift + Gold border + Schatten */
.wfi-service-card:hover {
	border-color: var(--wp--preset--color--secondary);
	background: var(--wp--preset--color--warm-50);
	box-shadow: var(--wp--preset--shadow--card);
	transform: translateY(-2px);
}

.wfi-service-card:focus-visible {
	outline: 2px solid var(--wp--preset--color--secondary);
	outline-offset: 2px;
}

/* CLAUDE: Service Card Selected | Gold border + Checkmark badge + Lift + Gold-Schatten */
.wfi-service-card.is-selected {
	border-color: var(--wp--preset--color--secondary);
	background: var(--wp--preset--color--warm-50);
	box-shadow: 0 0 0 1px var(--wp--preset--color--secondary), 0 4px 16px rgba(197, 165, 114, 0.15);
	transform: scale(1.02);
}

/* CLAUDE: Selected Checkmark Badge | Goldener Kreis oben-rechts */
.wfi-service-card.is-selected::after {
	content: '\2713';
	position: absolute;
	top: -6px;
	right: -6px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--white);
	font-size: 0.7rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

/* CLAUDE: Service Icon | SVG line-art mit currentColor | Gold default, Primary bei hover/selected */
.wfi-service-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--secondary);
	line-height: 1;
}

.wfi-service-icon svg {
	width: 2rem;
	height: 2rem;
	transition: color 0.2s ease;
}

.wfi-service-card:hover .wfi-service-icon,
.wfi-service-card.is-selected .wfi-service-icon {
	color: var(--wp--preset--color--primary);
}

/* CLAUDE: Service Name | Kartentext */
.wfi-service-name {
	font-weight: 500;
}

/* CLAUDE: Choice Cards | Kleinere Inline-Cards fuer Verkauf/Vermietung */
.wfi-choice-cards {
	display: flex;
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--30);
}

.wfi-choice-card {
	flex: 1;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--white);
	border: 1.5px solid var(--wp--preset--color--neutral-200);
	border-radius: var(--wp--custom--border-radius--medium);
	cursor: pointer;
	transition: all 0.2s ease;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	color: var(--wp--preset--color--neutral-800);
	text-align: center;
}

.wfi-choice-card:hover {
	border-color: var(--wp--preset--color--secondary);
	background: var(--wp--preset--color--warm-50);
}

.wfi-choice-card:focus-visible {
	outline: 2px solid var(--wp--preset--color--secondary);
	outline-offset: 2px;
}

.wfi-choice-card.is-selected {
	border-color: var(--wp--preset--color--secondary);
	background: var(--wp--preset--color--warm-50);
	box-shadow: 0 0 0 1px var(--wp--preset--color--secondary);
}

/* CLAUDE: Form Field | Label ueber Input, Spacing */
.wfi-form-field {
	margin-bottom: var(--wp--preset--spacing--40);
}

.wfi-form-field label {
	display: block;
	margin-bottom: var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	color: var(--wp--preset--color--neutral-800);
}

/* CLAUDE: Form Inputs | Design-System konforme Inputs | Nicht Browser-Defaults */
.wfi-multi-step-form input[type="text"],
.wfi-multi-step-form input[type="email"],
.wfi-multi-step-form input[type="tel"],
.wfi-multi-step-form input[type="number"],
.wfi-multi-step-form select,
.wfi-multi-step-form textarea {
	width: 100%;
	height: 48px;
	padding: 12px 16px;
	border: 1.5px solid var(--wp--preset--color--neutral-200);
	border-radius: var(--wp--custom--border-radius--medium);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--neutral-900);
	background: var(--wp--preset--color--white);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.wfi-multi-step-form textarea {
	height: auto;
	min-height: 120px;
	resize: vertical;
}

.wfi-multi-step-form select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238F8071' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 40px;
}

/* CLAUDE: Focus State | Gold-Rand + subtiler Schatten */
.wfi-multi-step-form input[type="text"]:focus,
.wfi-multi-step-form input[type="email"]:focus,
.wfi-multi-step-form input[type="tel"]:focus,
.wfi-multi-step-form input[type="number"]:focus,
.wfi-multi-step-form select:focus,
.wfi-multi-step-form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--secondary);
	box-shadow: 0 0 0 3px rgba(197, 165, 114, 0.15);
}

/* CLAUDE: Placeholder-Styling | Heller Text */
.wfi-multi-step-form input::placeholder,
.wfi-multi-step-form textarea::placeholder {
	color: var(--wp--preset--color--neutral-600);
	opacity: 0.7;
}

/* CLAUDE: Form Row | Zwei Felder nebeneinander */
.wfi-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--40);
}

/* CLAUDE: Form Error | Rote Fehlermeldung, standardmaessig versteckt */
.wfi-form-error {
	color: #c0392b;
	font-size: var(--wp--preset--font-size--small);
	font-family: var(--wp--preset--font-family--body);
	margin-top: var(--wp--preset--spacing--30);
	min-height: 0;
}

.wfi-form-error:empty {
	display: none;
}

/* CLAUDE: Form Navigation | Flex zwischen Zurueck und Weiter/Absenden */
.wfi-form-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--neutral-200);
}

/* CLAUDE: Back Button | Text-Link-Stil, kein Hintergrund */
.wfi-form-back {
	background: none;
	border: none;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--neutral-600);
	cursor: pointer;
	transition: color 0.2s ease;
}

.wfi-form-back:hover {
	color: var(--wp--preset--color--neutral-900);
}

.wfi-form-back:focus-visible {
	outline: 2px solid var(--wp--preset--color--secondary);
	outline-offset: 2px;
}

/* CLAUDE: Next/Submit Button | Gold-Hintergrund, weisser Text */
.wfi-form-next,
.wfi-form-submit {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--60);
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--white);
	border: none;
	border-radius: var(--wp--custom--border-radius--medium);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.1s ease;
	margin-left: auto;
}

.wfi-form-next:hover,
.wfi-form-submit:hover {
	background: var(--wp--preset--color--primary);
}

.wfi-form-next:focus-visible,
.wfi-form-submit:focus-visible {
	outline: 2px solid var(--wp--preset--color--secondary);
	outline-offset: 2px;
}

.wfi-form-next:active,
.wfi-form-submit:active {
	transform: scale(0.98);
}

.wfi-form-submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* CLAUDE: Form Summary | Kompakte Werteliste zur Pruefung */
.wfi-form-summary {
	background: var(--wp--preset--color--warm-50);
	border: 1px solid var(--wp--preset--color--neutral-200);
	border-radius: var(--wp--custom--border-radius--medium);
	padding: var(--wp--preset--spacing--50);
	margin-bottom: var(--wp--preset--spacing--50);
}

.wfi-summary-list {
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
}

.wfi-summary-list dt {
	font-weight: 600;
	color: var(--wp--preset--color--neutral-600);
}

.wfi-summary-list dd {
	margin: 0;
	color: var(--wp--preset--color--neutral-900);
}

/* CLAUDE: Summary Sections | Visuell getrennte Bereiche */
.wfi-summary-section {
	margin-bottom: var(--wp--preset--spacing--40);
}

.wfi-summary-section:last-of-type {
	margin-bottom: 0;
}

.wfi-summary-section + .wfi-summary-section {
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--neutral-200);
}

.wfi-summary-section-title {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--secondary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 0 0 var(--wp--preset--spacing--30) 0;
}

/* CLAUDE: Summary Motivation | Ermutigender Text vor dem Submit */
.wfi-summary-motivation {
	text-align: center;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	color: var(--wp--preset--color--secondary);
	margin-top: var(--wp--preset--spacing--40);
	margin-bottom: 0;
}

/* CLAUDE: Form Success | Versteckt, zentriert, Checkmark-Animation */
.wfi-form-success {
	display: none;
	text-align: center;
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
}

.wfi-form-success h3 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	color: var(--wp--preset--color--neutral-900);
	margin-top: var(--wp--preset--spacing--50);
	margin-bottom: var(--wp--preset--spacing--30);
}

.wfi-form-success p {
	color: var(--wp--preset--color--neutral-600);
	font-size: var(--wp--preset--font-size--medium);
	margin-bottom: var(--wp--preset--spacing--50);
}

/* CLAUDE: Success Links | Weiterführende Links nach Absenden */
.wfi-success-links {
	display: flex;
	gap: var(--wp--preset--spacing--50);
	justify-content: center;
	flex-wrap: wrap;
}

.wfi-success-links a {
	color: var(--wp--preset--color--primary);
	font-weight: 500;
	text-decoration: none;
	transition: color 0.2s ease;
}

.wfi-success-links a:hover {
	color: var(--wp--preset--color--secondary);
}

/* CLAUDE: Success Icon | Grosser goldener Kreis mit Checkmark + Pulse-Animation */
.wfi-success-icon {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--white);
	font-size: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	animation: wfiSuccessPulse 0.6s ease;
	line-height: 1;
}

@keyframes wfiSuccessPulse {
	0% {
		transform: scale(0);
		opacity: 0;
	}
	50% {
		transform: scale(1.15);
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

/* CLAUDE: Trust Sidebar | Sticky auf Desktop, normal auf Mobile */
.wfi-trust-sidebar {
	align-self: flex-start;
}

@media (min-width: 782px) {
	.wfi-trust-sidebar > .wp-block-group {
		position: sticky;
		top: 100px;
	}
}

/* CLAUDE: Sidebar Quote | Groessere Anfuehrungszeichen, eigene Card */
.wfi-sidebar-quote {
	border-left: none;
	padding-left: 0;
	margin: 0;
	position: relative;
	padding-top: var(--wp--preset--spacing--40);
}

.wfi-sidebar-quote::before {
	content: '\201C';
	font-family: var(--wp--preset--font-family--heading);
	font-size: 3rem;
	line-height: 1;
	color: var(--wp--preset--color--secondary);
	opacity: 0.3;
	position: absolute;
	top: 0;
	left: 0;
}

/* CLAUDE: Privacy Checkbox | Checkbox-Layout mit Label */
.wfi-privacy-check {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
}

.wfi-privacy-check label {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
	cursor: pointer;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

.wfi-privacy-check input[type="checkbox"] {
	width: 20px;
	height: 20px;
	min-width: 20px;
	margin-top: 2px;
	accent-color: var(--wp--preset--color--secondary);
	cursor: pointer;
}

/* CLAUDE: Required Asterisk | Gold-Farbe */
.wfi-required {
	color: var(--wp--preset--color--secondary);
	font-weight: 700;
}

/* CLAUDE: Optional Hinweis | Klein, neutral-600 */
.wfi-optional {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	color: var(--wp--preset--color--neutral-600);
}

/* CLAUDE: Detail Fields | Versteckt, per JS eingeblendet bei passendem Service */
.wfi-detail-fields {
	display: none;
}

.wfi-detail-fields.is-visible {
	display: block;
	animation: wfiStepFadeIn 0.3s ease forwards;
}

/* CLAUDE: Input Error State | Roter Rand bei Validierungsfehler */
.wfi-multi-step-form input.has-error,
.wfi-multi-step-form select.has-error {
	border-color: #c0392b;
}

/* ============================================================
   CLAUDE: Responsive | Tablet (781px) und Mobile (600px)
   ============================================================ */

@media (max-width: 781px) {
	/* CLAUDE: Form Container | Weniger Padding auf Tablet */
	.wfi-multi-step-form {
		padding: var(--wp--preset--spacing--50);
	}

	/* CLAUDE: Service Cards | 2 Spalten auf Tablet */
	.wfi-service-cards {
		grid-template-columns: repeat(2, 1fr);
	}

	/* CLAUDE: Progress Labels ausblenden auf Tablet */
	.wfi-progress-label {
		font-size: 0.7rem;
	}
}

@media (max-width: 600px) {
	/* CLAUDE: Form Container | Minimales Padding auf Mobile */
	.wfi-multi-step-form {
		padding: var(--wp--preset--spacing--40);
		border-radius: var(--wp--custom--border-radius--medium);
	}

	/* CLAUDE: Service Cards | 1 pro Zeile auf Mobile */
	.wfi-service-cards {
		grid-template-columns: 1fr;
	}

	/* CLAUDE: Service Card | Horizontal auf Mobile */
	.wfi-service-card {
		flex-direction: row;
		padding: var(--wp--preset--spacing--40);
		text-align: left;
	}

	/* CLAUDE: Choice Cards | Stacked auf Mobile */
	.wfi-choice-cards {
		flex-direction: column;
	}

	/* CLAUDE: Form Row | Stacked auf Mobile */
	.wfi-form-row {
		grid-template-columns: 1fr;
	}

	/* CLAUDE: Progress Labels | Abkuerzungen auf Mobile statt komplett versteckt */
	.wfi-progress-label {
		font-size: 0;
		line-height: 0;
	}
	.wfi-progress-step[data-step="1"] .wfi-progress-label::after { content: "Leistung"; font-size: 0.65rem; }
	.wfi-progress-step[data-step="2"] .wfi-progress-label::after { content: "Details"; font-size: 0.65rem; }
	.wfi-progress-step[data-step="3"] .wfi-progress-label::after { content: "Kontakt"; font-size: 0.65rem; }
	.wfi-progress-step[data-step="4"] .wfi-progress-label::after { content: "Senden"; font-size: 0.65rem; }

	/* CLAUDE: Form Nav | Buttons naeher zusammen */
	.wfi-form-nav {
		gap: var(--wp--preset--spacing--30);
	}

	.wfi-form-next,
	.wfi-form-submit {
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
		font-size: var(--wp--preset--font-size--small);
	}
}

/* CLAUDE: Mobile Trust Bar | Versteckt auf Desktop, sichtbar auf Mobile */
.wfi-mobile-trust {
	display: none;
}

@media (max-width: 781px) {
	.wfi-mobile-trust {
		display: flex;
		justify-content: center;
		gap: var(--wp--preset--spacing--40);
		flex-wrap: wrap;
		margin-bottom: var(--wp--preset--spacing--40);
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
		background: var(--wp--preset--color--warm-50);
		border-radius: var(--wp--custom--border-radius--medium);
		border: 1px solid var(--wp--preset--color--neutral-200);
	}

	.wfi-mobile-trust-item {
		display: inline-flex;
		align-items: center;
		gap: 0.3rem;
		font-family: var(--wp--preset--font-family--body);
		font-size: 0.75rem;
		font-weight: 500;
		color: var(--wp--preset--color--secondary);
		white-space: nowrap;
	}
}

/* CLAUDE: FAQ Section | warm-50 Hintergrund fuer Trennung zum Formular */
.wfi-faq-section {
	background: var(--wp--preset--color--warm-50);
}

/* CLAUDE: FAQ Accordion Cards | Weisse Cards mit Schatten statt flachem Hintergrund */
.wfi-faq-section .wp-block-details {
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--border-radius--medium);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
	border: 1px solid var(--wp--preset--color--neutral-200);
	transition: box-shadow 0.2s ease;
}

.wfi-faq-section .wp-block-details[open] {
	box-shadow: var(--wp--preset--shadow--card);
}

/* CLAUDE: FAQ Summary | Plus/Minus Icon rechts via CSS */
.wfi-faq-section .wp-block-details summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.wfi-faq-section .wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wfi-faq-section .wp-block-details summary::after {
	content: '+';
	font-size: 1.25rem;
	font-weight: 300;
	color: var(--wp--preset--color--secondary);
	transition: transform 0.3s ease;
	flex-shrink: 0;
	margin-left: var(--wp--preset--spacing--30);
}

.wfi-faq-section .wp-block-details[open] summary::after {
	content: '\2212';
	transform: rotate(180deg);
}

/* CLAUDE: FAQ Content | Sanfter Einblend-Effekt */
.wfi-faq-section .wp-block-details p {
	animation: wfiStepFadeIn 0.3s ease forwards;
}

/* CLAUDE: Reduced Motion | Barrierefreiheit | Animationen deaktivieren */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}