/* ==========================================================================
   Immobilienbewertungs-Wizard
   Nachgebaut nach sallier-immobilienbewertung.de, im Design dieser Seite. Schritte 1-4 sind eigene
   Wizard-Oberfläche, Schritt 5 zeigt das echte CF7-Formular (siehe immobilienbewertung.js für die
   Schritt-Logik und ET_Builder_Module_Immobilienbewertung.php für das Markup).
   ========================================================================== */

.immobilienbewertung {
	max-width: 640px;
	margin: 0 auto;
	background: var(--color-surface);
	border-radius: 0;
	box-shadow: var(--shadow-soft);
	padding: var(--space-8);
}

.immobilienbewertung-fortschritt {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	margin-bottom: var(--space-8);
}

.immobilienbewertung-fortschritt-balken {
	flex: 1 1 auto;
	height: 4px;
	background: var(--border-default);
	border-radius: 0;
	overflow: hidden;
}

.immobilienbewertung-fortschritt-fuellung {
	height: 100%;
	width: 20%;
	background: var(--color-accent);
	border-radius: 0;
	transition: width var(--transition-fast);
}

.immobilienbewertung-fortschritt-text {
	flex: 0 0 auto;
	font-family: var(--font-body);
	font-size: var(--text-body);
	font-weight: var(--weight-semibold);
	color: var(--color-text);
	white-space: nowrap;
}

/* Die globale Regel "p, span { font-weight: var(--weight-light) }" (style.css) greift direkt auf
   dieses verschachtelte "span" zu — geerbte Werte vom Elternelement (siehe oben, semibold) haben
   gegen eine SO direkt zutreffende Regel keine Chance, egal welche Spezifität sie hat (Vererbung
   ist immer die schwächste Quelle). Die aktuelle Schrittzahl wirkte dadurch dünner als "Schritt"/
   "von 5" drumherum (vom Nutzer per Screenshot gemeldet). Hier explizit auf denselben Wert wie
   der Elterntext gesetzt. */
.immobilienbewertung-schritt-aktuell,
.immobilienbewertung-schritte-gesamt {
	font-weight: var(--weight-semibold);
}

/* Nur der aktive Schritt ist sichtbar — Umschalten übernimmt immobilienbewertung.js per
   "is-aktiv"-Klasse. */
.immobilienbewertung-schritt {
	display: none;
}

.immobilienbewertung-schritt.is-aktiv {
	display: block;
}

/* Schriftart/-gewicht/-größe/Farbe kommen jetzt direkt vom globalen "h2"-Stil (style.css, "h2,
   h4, h5, h6 { ... !important }") — das Markup nutzt seit dieser Änderung "<h2>" statt "<h3>"
   (Letzteres wird von jener Regel nicht erfasst, siehe deren Selektorliste). Nur der zusätzliche
   Abstand zum Inhalt darunter ist noch nötig; da die globale Regel "margin:0 !important" setzt,
   braucht die Überschreibung hier ebenfalls "!important". */
.immobilienbewertung-frage {
	margin-bottom: var(--space-6) !important;
}

/* ==========================================================================
   Kachel-Buttons (Schritt 1 + 2)
   ========================================================================== */

.immobilienbewertung-kacheln {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--space-4);
}

.immobilienbewertung-kachel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	width: 100%;
	padding: var(--space-6);
	background: transparent;
	border: 1px solid var(--color-primary);
	border-radius: 0;
	color: var(--color-primary);
	font-family: var(--font-body);
	font-weight: var(--weight-semibold);
	font-size: var(--text-body);
	text-align: center;
	cursor: pointer;
	/* Gleicher Hover-Effekt wie die Projekt-/Referenzen-Grid-Karten und die Mitarbeiter-Karten
	   (siehe ".projekt-grid .et_pb_portfolio_image" in projekt-grid.css bzw. ".mitarbeiter-item"
	   in mitarbeiter.css): Schatten vertieft sich, Kachel hebt sich leicht an. */
	box-shadow: var(--shadow-soft);
	transition: background-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform 0.25s ease;
}

/* Immobilientyp-Icon (Schritt 2, siehe sallier_icon() in icons.php) — "currentColor" übernimmt
   automatisch Navy im Ruhezustand bzw. Weiß, sobald die Kachel ausgewählt ist (".is-aktiv"
   unten), ohne eigene Farbregel je Zustand. */
.immobilienbewertung-kachel .sallier-icon {
	color: currentColor;
	flex-shrink: 0;
}

.immobilienbewertung-kachel .sallier-icon svg {
	width: 40px;
	height: 40px;
}

/* Die globale Regel "p, span { font-weight: var(--weight-light); color: var(--color-text); }"
   (style.css) greift direkt auf dieses "span" zu — geerbte Werte vom Button
   (".immobilienbewertung-kachel": semibold, Navy) haben dagegen keine Chance (gleicher Effekt wie
   bei ".immobilienbewertung-schritt-aktuell" weiter oben: Vererbung verliert immer gegen eine
   direkt zutreffende Regel). Bezeichnung wirkte dadurch trotz Button-Vorgabe weder fett noch Navy
   (vom Nutzer per Screenshot gemeldet). Hier beides explizit gesetzt — Farbe zusätzlich mit
   "!important", da ".is-aktiv" (siehe unten) sie im ausgewählten Zustand auf Weiß umschalten muss
   und dafür ihrerseits mindestens gleichziehen können muss. */
.immobilienbewertung-kachel-text {
	font-weight: var(--weight-semibold);
	color: var(--color-primary) !important;
}

/* Der navy Hintergrund wandert schon beim Hover mit (nicht erst bei der eigentlichen Auswahl,
   siehe ".is-aktiv" unten) — auf Wunsch des Nutzers, damit die Vorschau des Auswahl-Zustands
   direkt beim Überfahren sichtbar wird. */
.immobilienbewertung-kachel:hover {
	background: var(--color-primary);
	color: var(--color-surface);
	transform: translateY(-4px);
	box-shadow: var(--shadow-hover);
}

/* Die Bezeichnung hat eine eigene "!important"-Farbregel (siehe ".immobilienbewertung-kachel-text"
   oben) — braucht hier deshalb eine ebenso spezifische Gegenregel, sonst bliebe sie beim Hover
   navy statt weiß. */
.immobilienbewertung-kachel:hover .immobilienbewertung-kachel-text {
	color: var(--color-surface) !important;
}

/* Ausgewählte Kachel — gleiche Sprache wie die Grid-Filter-Buttons (siehe
   ".projekt-grid-filter-btn.is-aktiv" in projekt-grid.css). */
.immobilienbewertung-kachel.is-aktiv {
	background: var(--color-primary);
	color: var(--color-surface);
}

/* Die Bezeichnung hat eine eigene "!important"-Farbregel (siehe ".immobilienbewertung-kachel-text"
   oben) — braucht hier deshalb eine ebenso spezifische Gegenregel, sonst bliebe sie im
   ausgewählten Zustand navy statt weiß. */
.immobilienbewertung-kachel.is-aktiv .immobilienbewertung-kachel-text {
	color: var(--color-surface) !important;
}

/* Schritt 2 zeigt beide Typ-Listen (Verkaufen + Vermieten) im Markup gleichzeitig — je nach
   Schritt-1-Auswahl blendet JS per "data-anliegen" nur die passenden Kacheln ein. */
.immobilienbewertung-kachel[data-anliegen] {
	display: none;
}

/* ==========================================================================
   Eingabefelder (Schritt 3 + 4) — gleiche Feld-Optik wie das CF7-Kontaktformular
   (".formular_feld" in formular.css), hier eigenständig nachgebaut, da diese Felder kein
   CF7-Markup sind.
   ========================================================================== */

.immobilienbewertung-feldgruppe {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

/* Exakt an ".formular_feld"/".formular_feld label" aus formular.css angeglichen (Schritt 5 nutzt
   diese Klassen direkt, da dort echtes CF7-Markup vorliegt — Schritt 3/4 haben dagegen kein CF7-
   Markup, hier deshalb dieselben Werte auf die eigene Klasse übertragen, statt eine zweite,
   optisch abweichende Variante zu pflegen): "border-radius:0" (nicht "--radius"), "gap:2px"
   (nicht "--space-2"), "font-size:18px"/"line-height:1.3" für die Beschriftung. */
.immobilienbewertung-feld-label {
	display: flex;
	flex-direction: column;
	gap: 2px;
	background: var(--color-surface);
	/* Karte und Feld sind beide weiß — ohne Rand wären die Felder nicht von der Karte zu
	   unterscheiden (anders als im Kontaktformular, wo die Feld-Boxen vor einem dunklen
	   Fußzeilen-Hintergrund automatisch Kontrast haben). Gleicher Rand-Stil wie die Kachel-Buttons
	   in Schritt 1/2 (siehe ".immobilienbewertung-kachel"), für ein einheitliches Erscheinungsbild
	   über den ganzen Wizard. */
	border: 1px solid var(--color-primary);
	border-radius: 0;
	padding: var(--space-3) var(--space-4);
	font-family: var(--font-body);
	font-weight: var(--weight-semibold);
	font-size: var(--text-body);
	line-height: 1.3;
	color: var(--color-primary);
}

.immobilienbewertung-feld-label input,
.immobilienbewertung-feld-label select {
	font-family: var(--font-body);
	font-weight: var(--weight-light);
	font-size: var(--text-body);
	color: var(--color-text);
	background: transparent;
	border: none;
	outline: none;
	/* Chrome/Safari setzen auf "number"/"text"-Inputs standardmäßig einen inneren Schatten (Teil
	   der nativen Formular-Steuerelement-Optik) — hier entfernt, sonst wirkt es wie eine zweite,
	   unerwünschte Box innerhalb der eigentlichen Feld-Box. */
	box-shadow: none;
	padding: 0;
	appearance: none;
	-webkit-appearance: none;
}

/* "appearance:none" auf dem Input selbst blendet die Auf/Ab-Pfeile von "type=number"
   (Baujahr/Fläche/Grundstücksgröße) in Chrome/Safari nicht zuverlässig aus — dafür müssen die
   Spinner-Pseudo-Elemente explizit angesprochen werden (WebKit), Firefox braucht stattdessen
   "appearance:textfield" direkt am Input. */
.immobilienbewertung-feld-label input[type="number"]::-webkit-inner-spin-button,
.immobilienbewertung-feld-label input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.immobilienbewertung-feld-label input[type="number"] {
	appearance: textfield;
	-moz-appearance: textfield;
}

/* Beim "select" bewusst NICHT "appearance:none" (siehe formular.css-Vorbild) — sonst
   verschwindet der Dropdown-Pfeil des Browsers komplett. */
.immobilienbewertung-feld-label select {
	appearance: auto;
	-webkit-appearance: menulist;
}

/* Nur zur Spam-Abwehr (siehe Referenz-Tool) — für Menschen unsichtbar, für Formular-Bots ohne
   CSS-Auswertung weiterhin als normales Feld erreichbar (klassisches Honeypot-Prinzip). */
.immobilienbewertung-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

/* ==========================================================================
   Navigation (zurück/weiter)
   ========================================================================== */

.immobilienbewertung-navigation {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: var(--space-6);
}

.immobilienbewertung-navigation--vor-formular {
	justify-content: flex-start;
	margin-top: 0;
	margin-bottom: var(--space-6);
}

.immobilienbewertung-zurueck {
	background: transparent;
	border: none;
	padding: 0;
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--text-body);
	font-weight: var(--weight-semibold);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}

.immobilienbewertung-zurueck:hover {
	color: var(--color-accent);
}

/* Optik (Farbe/Schrift/Padding/Hover) kommt jetzt vollständig von der globalen ".et_pb_button"-
   Klasse (style.css, siehe Markup in ET_Builder_Module_Immobilienbewertung.php) — exakt derselbe
   Button-Stil wie überall sonst auf der Website, statt einer eigenen, leicht abweichenden Kopie.
   Die Position (rechtsbündig neben "zurück") kommt bereits von
   ".immobilienbewertung-navigation" ("justify-content:space-between", siehe oben) — hier ist
   keine eigene Regel mehr nötig. */

/* ==========================================================================
   Schritt 5: das echte CF7-Formular
   ========================================================================== */

/* Anliegen/Immobilientyp/Baujahr/Fläche/Grundstücksgröße/Zustand/Adresse stecken als reguläre
   CF7-Felder im Formular (damit sie bei "[anliegen]" etc. in der Mail korrekt ausgegeben werden),
   werden aber schon in den Schritten 1-4 in der eigenen Wizard-Oberfläche abgefragt — hier
   deshalb ausgeblendet, nur Name/E-Mail/Telefon/Datenschutz bleiben sichtbar. */
.immobilienbewertung-cf7-versteckt {
	display: none;
}

/* ".formular_feld" ist wie im Kontaktformular "--color-surface" (Weiß, siehe formular.css) — hier
   steht die Feld-Box aber auf einer ebenfalls weißen Karte statt vor dem dunklen Fußzeilen-
   Hintergrund dort, daher zusätzlich ein Rand nötig — gleicher Rand-Stil (Farbe + eckig, keine
   abgerundeten Ecken) wie die Kachel-Buttons (siehe ".immobilienbewertung-kachel") und die
   Felder in Schritt 3/4 (".immobilienbewertung-feld-label"), für ein einheitliches
   Erscheinungsbild über den ganzen Wizard. */
.immobilienbewertung .formular_feld {
	border: 1px solid var(--color-primary);
	border-radius: 0;
}

/* Keine eigene Regel für die Datenschutz-Checkbox-Beschriftung mehr nötig — sie ist inzwischen
   überall (außer im Footer, siehe "footer.et-l--footer ..." in footer.css) standardmäßig dunkel,
   passend zur hellen Karte hier. */

.immobilienbewertung .wpcf7-form {
	gap: var(--space-3);
}

.immobilienbewertung .wpcf7-submit {
	align-self: flex-start;
}

.immobilienbewertung .wpcf7-response-output {
	margin: var(--space-4) 0 0;
	padding: var(--space-3) var(--space-4);
	border-radius: 0;
	font-family: var(--font-body);
	font-size: var(--text-small);
}

@media screen and (max-width: 600px) {
	.immobilienbewertung {
		width: 100%;
		box-sizing: border-box;
		padding: var(--space-6) var(--space-4);
	}

	.immobilienbewertung-kacheln {
		grid-template-columns: repeat(2, 1fr);
	}

	.immobilienbewertung-kachel {
		padding: var(--space-3);
		gap: var(--space-2);
		font-size: 13px;
	}

	.immobilienbewertung-kachel .sallier-icon svg {
		width: 26px;
		height: 26px;
	}
}