/*
 * GOAT Ecom, Branchenseiten.
 *
 * Startseiten-Textliste plus die zwei Bausteine, die es sonst
 * nirgends gibt: der Fehlerblock auf der zweiten Flaeche und seine
 * Liste. Bausteine selbst laufen ueber die vorhandene
 * .ge-leistungen/.ge-etikett-Kombination aus start.css.
 *
 * Kein Bild auf diesen Seiten, deshalb auch keine Bildregeln hier.
 */

/* -------------------------------------------------------------------
 * Diagonale Kante zur Werkstatt-Sektion darueber.
 *
 * Genau einmal eingesetzt, absichtlich nicht als wiederverwendbare
 * Klasse: der Uebergang von der gepinnten Code-Sektion braucht die
 * staerkste Zaesur der Seite, kein Muster, das sich wiederholt.
 *
 * 5,2vw Versatz entspricht bei voller Breite etwa 3 Grad
 * (tan 3° ≈ 0,0524). Negativer Aussenabstand zieht die Sektion um
 * denselben Betrag nach oben, der abgeschnittene Keil zeigt die
 * Flaeche der Werkstatt-Sektion darunter durch, das Innenpolster
 * gleicht es fuer den Inhalt wieder aus.
 * ----------------------------------------------------------------- */
#branchen {
	position: relative;
	margin-block-start: -5.2vw;
	padding-block-start: calc(var(--ge-sektion-y) + 5.2vw);
	clip-path: polygon(0 5.2vw, 100% 0, 100% 100%, 0 100%);
}

/* -------------------------------------------------------------------
 * Startseite: Textliste statt Bildkarten
 * ----------------------------------------------------------------- */
.ge-branchenliste {
	display: grid;
	gap: 0;
	margin-block-start: var(--ge-space-xl);
	border-block-start: var(--ge-haarlinie) solid var(--ge-linie);
}

.ge-branchenliste__posten {
	border-block-end: var(--ge-haarlinie) solid var(--ge-linie);
}

.ge-branchenliste__link {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--ge-space-xs) var(--ge-space-m);
	padding-block: var(--ge-space-m);
	color: var(--ge-text);
	text-decoration: none;
}

.ge-branchenliste__link:hover .ge-branchenliste__h1,
.ge-branchenliste__link:focus-visible .ge-branchenliste__h1 {
	color: var(--ge-akzent);
}

.ge-branchenliste__name {
	font-family: var(--ge-font-text);
	font-weight: var(--ge-gewicht-text-kraeftig);
	font-size: var(--ge-label);
	letter-spacing: var(--ge-laufweite-label);
	text-transform: uppercase;
	color: var(--ge-text-leise);
	flex: 0 0 auto;
}

.ge-branchenliste__h1 {
	color: var(--ge-text);
	transition: color var(--ge-dauer-schnell) var(--ge-kurve);
}

/* -------------------------------------------------------------------
 * Fehlerblock: eigene Flaeche, damit er sich vom Rest abhebt
 * ----------------------------------------------------------------- */
.ge-sektion--flaeche2 {
	background: var(--ge-flaeche-2);
}

.ge-fehlerliste {
	display: grid;
	gap: var(--ge-space-l);
	margin-block-start: var(--ge-space-xl);
}

@media (min-width: 640px) {
	.ge-fehlerliste {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.ge-fehlerliste__titel {
	color: var(--ge-text);
	font-family: var(--ge-font-text);
	font-weight: var(--ge-gewicht-text-kraeftig);
	margin-block-end: var(--ge-space-xs);
}

.ge-fehlerliste__satz {
	color: var(--ge-text);
}