/*
 * GOAT Ecom, Anfragestrecke.
 *
 * Eigener Kopf statt der Kopfleiste, kein fixed, kein Schrumpfen:
 * die fuenf Schritte sind kurz, es gibt nichts, wovor der Kopf beim
 * Scrollen ausweichen muesste.
 */

/* ===================================================================
 * Kopf: Wortmarke, Versprechen, Vertrauensleiste
 * ================================================================= */
.ge-anfrage-kopf {
	padding-block: var(--ge-space-m);
	border-block-end: var(--ge-haarlinie) solid var(--ge-linie);
}

.ge-anfrage-kopf__zeile {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ge-space-2xs) var(--ge-space-m);
}

.ge-anfrage-kopf__versprechen {
	font-family: var(--ge-font-text);
	font-weight: var(--ge-gewicht-text-kraeftig);
	font-size: var(--ge-klein);
	color: var(--ge-text);
}

.ge-anfrage-vertrauen {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ge-space-2xs) var(--ge-space-m);
	margin-block-start: var(--ge-space-s);
	color: var(--ge-text-leise);
}

.ge-anfrage-vertrauen span + span::before {
	content: "·";
	margin-inline-end: var(--ge-space-m);
	color: var(--ge-linie);
}

/* ===================================================================
 * Fortschritt: fuenf Striche, der aktive im Akzent
 * ================================================================= */
.ge-anfrage-fortschritt {
	display: flex;
	gap: var(--ge-space-2xs);
	margin: var(--ge-space-l) 0 0;
	padding: 0;
	list-style: none;
}

.ge-anfrage-fortschritt__strich {
	flex: 1 0 0;
	height: 3px;
	background: var(--ge-linie);
	transition: background-color var(--ge-dauer-schnell) var(--ge-kurve);
}

.ge-anfrage-fortschritt__strich.ge-ist-aktiv {
	background: var(--ge-akzent);
}

/* ===================================================================
 * Schritt: Frage links, Markenkarte rechts ab 900px
 * ================================================================= */
.ge-anfrage-schritt {
	padding-block: var(--ge-space-xl) var(--ge-space-2xl);
}

.ge-anfrage-schritt + .ge-anfrage-schritt {
	border-block-start: var(--ge-haarlinie) solid var(--ge-linie);
}

.ge-anfrage-schritt__raster {
	display: grid;
	gap: var(--ge-space-xl);
}

.ge-anfrage-schritt__frage {
	max-width: 26ch;
	margin-block-end: var(--ge-space-l);
}

.ge-anfrage-schritt__nav {
	display: flex;
	gap: var(--ge-space-s);
	margin-block-start: var(--ge-space-l);
}

.ge-anfrage-schritt__marke {
	display: none;
}

@media (min-width: 900px) {
	.ge-anfrage-schritt__raster {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		align-items: start;
		gap: var(--ge-rinne);
	}

	.ge-anfrage-schritt__marke {
		display: block;
	}
}

/* ===================================================================
 * Markenkarte: Screenshot, Name, Beweiszahl
 * ================================================================= */
.ge-anfrage-marke {
	position: sticky;
	top: var(--ge-space-xl);
}

/*
 * Die Schaukasten-Screenshots sind Ganzseiten-Aufnahmen. Ohne
 * Deckel waere die Karte hier so hoch wie die ganze Fremdseite.
 * Deckel und Verlauf wie beim Hero, nur niedriger: die Karte ist
 * Beleg, kein Ausstellungsstueck.
 */
.ge-anfrage-marke__rahmen {
	position: relative;
	max-height: 320px;
	overflow: hidden;
	background: var(--ge-flaeche-2);
	border: var(--ge-haarlinie) solid var(--ge-linie);
	border-radius: var(--ge-radius-flaeche);
}

.ge-anfrage-marke__rahmen img {
	display: block;
	width: 100%;
	height: auto;
}

.ge-anfrage-marke__rahmen::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: 80px;
	background: linear-gradient(to bottom, transparent, var(--ge-flaeche-2));
	pointer-events: none;
}

.ge-anfrage-marke__name {
	margin-block-start: var(--ge-space-m);
	font-family: var(--ge-font-display);
	font-weight: var(--ge-gewicht-display);
	font-size: var(--ge-h3);
	letter-spacing: var(--ge-laufweite-display);
	color: var(--ge-text);
}

.ge-anfrage-marke__beweis {
	margin-block-start: var(--ge-space-2xs);
	font-size: var(--ge-klein);
	color: var(--ge-text-leise);
}