/*
 * GOAT Ecom, Kopf, Sektionsleiste, Mobilmenue, Fuss.
 *
 * Kein Schatten, kein Verlauf. Getrennt wird ausschliesslich mit
 * Haarlinien. Den harten Wechsel zwischen heller und dunkler Flaeche
 * gibt es nicht mehr, Kopf und Fuss stehen auf derselben Flaeche wie
 * der Inhalt.
 */

/* ===================================================================
 * Wortmarke
 *
 * Wort in der Textfarbe, darunter ein Balken im Akzent ueber die
 * volle Wortbreite. Kein Kasten, kein Barcode.
 *
 * Der Balken sitzt als eigenes Element unter dem Wort, nicht als
 * border-bottom. Nur so folgt seine Breite dem Wort und nicht der
 * Zeilenbox, und nur so bleibt seine Hoehe unabhaengig von der
 * Schriftgroesse.
 *
 * Als Text, nicht als SVG: die Marke ist ein Wort in der Hausschrift,
 * und die laedt die Seite ohnehin.
 * ================================================================= */
.ge-marke {
	display: inline-flex;
	flex-direction: column;
	gap: .21em;
	color: var(--ge-text);
}

.ge-marke__wort {
	display: flex;
	align-items: baseline;
	gap: .34em;
	font-family: var(--ge-font-display);
	font-weight: var(--ge-gewicht-display);
	font-size: 1.5rem;
	line-height: 1;
	letter-spacing: var(--ge-laufweite-display);
}

.ge-marke__zusatz {
	font-family: var(--ge-font-text);
	font-weight: var(--ge-gewicht-text-kraeftig);
	font-size: .6em;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.ge-marke__balken {
	display: block;
	height: .17em;
	background: var(--ge-akzent);
}

.ge-marke--gross .ge-marke__wort {
	font-size: 2.25rem;
}

.ge-marke-link {
	display: inline-block;
	border-radius: var(--ge-radius);
}

/* ===================================================================
 * Knoepfe
 *
 * Zwei Fassungen. Die Akzentflaeche traegt die Hauptaktion, der
 * Umriss alles daneben. Signalgelb gibt es nicht mehr, die Klasse
 * heisst deshalb nach ihrer Rolle.
 * ================================================================= */
.ge-knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ge-space-2xs);
	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;
	line-height: 1;
	padding: var(--ge-space-xs) var(--ge-space-m);
	border: var(--ge-haarlinie) solid transparent;
	border-radius: var(--ge-radius);
	transition: background-color var(--ge-dauer-schnell) var(--ge-kurve),
		color var(--ge-dauer-schnell) var(--ge-kurve);
}

/*
 * Der Hauptknopf traegt die Akzentflaeche mit dunkler Schrift, 5,7:1.
 * Eine sehr duenne helle Linie als Kante, damit er auf der
 * glaenzenden Flaeche genauso steht wie auf der matten. Der
 * Hover-Ring bleibt in eigenen rgba-Werten, weil er sich beim
 * Aufziehen ueber die Kante hinaus zeigen soll und ein Token dafuer
 * keinen Sinn ergibt.
 */
.ge-knopf--akzent {
	background: var(--ge-akzent);
	border: 1px solid rgba(255, 255, 255, .15);
	color: var(--ge-akzent-text);
	box-shadow: 0 0 0 0 rgba(47, 164, 110, 0);
	transition: background-color var(--ge-dauer-schnell) var(--ge-kurve),
		box-shadow 200ms var(--ge-kurve);
}

.ge-knopf--akzent:hover {
	background: color-mix(in srgb, var(--ge-akzent) 92%, white 8%);
	box-shadow: 0 0 0 3px rgba(47, 164, 110, .25);
}

/* Nur der Hauptknopf im Kopf, minimaler Sperrsatz statt der breiten Knopf-Laufweite */
.ge-knopf--sperrsatz {
	letter-spacing: .04em;
}

.ge-knopf--umriss {
	background: transparent;
	border-color: currentColor;
	color: inherit;
	transition: background-color var(--ge-dauer-schnell) var(--ge-kurve),
		border-color var(--ge-dauer-schnell) var(--ge-kurve);
}

.ge-knopf--umriss:hover {
	background: rgba(255, 255, 255, .06);
	border-color: var(--ge-akzent);
}

/*
 * Deaktiviert per aria-disabled statt disabled: der Knopf bleibt im
 * Tabulator erreichbar, JavaScript blockiert nur die Aktion. Eigene
 * Flaeche noetig, weil --ge-linie als Flaeche mit --ge-text-leise nur
 * 3,95:1 erreicht. --ge-flaeche-2 mit --ge-text-leise ist bereits als
 * Paarung fuer die Karte belegt, 6,1:1.
 */
.ge-knopf[aria-disabled="true"],
.ge-knopf[aria-disabled="true"]:hover {
	background: var(--ge-flaeche-2);
	border-color: var(--ge-linie);
	color: var(--ge-text-leise);
	cursor: not-allowed;
}

/* ===================================================================
 * Kopfleiste
 * ================================================================= */
.ge-kopf {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: var(--ge-z-kopf);
	/*
	 * Der Kopf traegt seine Flaeche selbst. Frueher kam sie von der
	 * Flaechenklasse, die ihn dunkel gemacht hat. Ohne eigene Flaeche
	 * stuende der Inhalt beim Scrollen durch ihn hindurch.
	 */
	background: var(--ge-flaeche);
	color: var(--ge-text);
	border-block-end: var(--ge-haarlinie) solid var(--ge-linie);
	height: var(--ge-kopf-hoehe);
	transition: height var(--ge-dauer) var(--ge-kurve);
}

.ge-kopf.ge-ist-geschrumpft {
	height: var(--ge-kopf-hoehe-klein);
}

.ge-kopf__innen {
	display: flex;
	align-items: center;
	gap: var(--ge-space-m);
	height: 100%;
	max-width: var(--ge-inhalt-max);
	margin-inline: auto;
	padding-inline: var(--ge-rand);
}

.ge-kopf .ge-marke__wort {
	font-size: 1.5rem;
	transition: font-size var(--ge-dauer) var(--ge-kurve);
}

.ge-kopf.ge-ist-geschrumpft .ge-marke__wort {
	font-size: 1.25rem;
}

.ge-kopf__nav {
	display: none;
	margin-inline-start: auto;
}

.ge-kopf__liste {
	display: flex;
	align-items: center;
	gap: var(--ge-space-m);
	margin: 0;
	padding: 0;
	list-style: none;
	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;
}

.ge-kopf__liste a {
	display: inline-block;
	padding-block: var(--ge-space-2xs);
	background-image: linear-gradient(var(--ge-akzent), var(--ge-akzent));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 var(--ge-fokus-breite);
	transition: background-size var(--ge-dauer) var(--ge-kurve);
}

.ge-kopf__liste a:hover,
.ge-kopf__liste a:focus-visible {
	background-size: 100% var(--ge-fokus-breite);
}

.ge-kopf__liste .ge-ist-aktiv a {
	background-size: 100% var(--ge-fokus-breite);
}

.ge-kopf__aktion {
	display: flex;
	align-items: center;
	gap: var(--ge-space-s);
	margin-inline-start: auto;
}

.ge-kopf__cta {
	display: none;
}

/* Burger, Striche als 1,5px Strichzeichnung */
.ge-burger {
	display: inline-flex;
	align-items: center;
	gap: var(--ge-space-2xs);
	color: inherit;
	border-radius: var(--ge-radius);
	padding: var(--ge-space-3xs);
}

.ge-burger__striche path {
	transition: transform var(--ge-dauer) var(--ge-kurve),
		opacity var(--ge-dauer-schnell) var(--ge-kurve);
	transform-origin: center;
}

.ge-burger[aria-expanded="true"] .ge-burger__oben {
	transform: translateY(5px) rotate(45deg);
}

.ge-burger[aria-expanded="true"] .ge-burger__mitte {
	opacity: 0;
}

.ge-burger[aria-expanded="true"] .ge-burger__unten {
	transform: translateY(-5px) rotate(-45deg);
}

@media (min-width: 900px) {
	.ge-kopf__nav {
		display: block;
		margin-inline-start: auto;
	}

	.ge-kopf__aktion {
		margin-inline-start: 0;
	}

	.ge-kopf__cta {
		display: inline-flex;
	}

	.ge-burger {
		display: none;
	}
}

/* ===================================================================
 * Mobilmenue, Etikettentafel ueber die volle Flaeche
 * ================================================================= */
.ge-menuetafel {
	position: fixed;
	inset: 0;
	z-index: var(--ge-z-menue);
	background: var(--ge-flaeche);
	color: var(--ge-text);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--ge-space-l);
	padding: calc(var(--ge-kopf-hoehe) + var(--ge-space-l)) var(--ge-rand) var(--ge-space-xl);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.ge-menuetafel[hidden] {
	display: none;
}

.ge-menuetafel__liste {
	counter-reset: ge-menue;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ge-menuetafel__liste li {
	counter-increment: ge-menue;
	border-block-start: var(--ge-haarlinie) solid var(--ge-linie);
}

.ge-menuetafel__liste li:last-child {
	border-block-end: var(--ge-haarlinie) solid var(--ge-linie);
}

.ge-menuetafel__liste a {
	display: flex;
	align-items: baseline;
	gap: var(--ge-space-s);
	padding-block: var(--ge-space-s);
	font-family: var(--ge-font-display);
	font-weight: var(--ge-gewicht-display);
	font-size: var(--ge-h3);
	letter-spacing: var(--ge-laufweite-display);
}

.ge-menuetafel__liste a::before {
	/* Die Nummer bleibt, das Kuerzel SDG faellt weg. */
	content: counter(ge-menue, decimal-leading-zero);
	flex: none;
	font-family: var(--ge-font-text);
	font-weight: var(--ge-gewicht-text-kraeftig);
	font-size: var(--ge-label);
	letter-spacing: var(--ge-laufweite-label);
	color: var(--ge-text-leise);
}

.ge-menuetafel__fuss {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ge-space-xs);
}

.ge-menuetafel__telefon {
	font-family: var(--ge-font-display);
	font-weight: var(--ge-gewicht-display);
	font-size: var(--ge-h3);
	letter-spacing: var(--ge-laufweite-display);
}

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

.ge-menuetafel__fuss .ge-knopf {
	margin-block-start: var(--ge-space-2xs);
}

@media (min-width: 900px) {
	.ge-menuetafel {
		display: none;
	}
}

/* ===================================================================
 * Sektionsleiste
 *
 * Eine senkrechte Haarlinie am linken Rand ueber die volle
 * Fensterhoehe, mit einem kurzen Querstrich auf Hoehe jeder Sektion.
 * Der Strich der aktiven Sektion wird doppelt so lang, nimmt die
 * Akzentfarbe an, und nur neben ihm steht eine Bezeichnung.
 *
 * Waagerechte Schrift, keine gedrehte. Keine Nummern.
 *
 * Unter 1100px entfaellt die Leiste ersatzlos. Es gibt keinen mobilen
 * Ersatz und keinen Fortschrittsbalken.
 * ================================================================= */
.ge-leiste {
	display: none;
}

/*
 * Haarlinienfarbe der Leiste, passt sich der Flaeche an, die gerade
 * aktiv ist. kopf.js schreibt data-ge-sektion aufs html-Element,
 * dieselbe Kennung wie die Sektions-ID. Nur die Sektionen mit
 * .ge-sektion--glanz stehen hier, der Unterschied zu --ge-linie ist
 * ohnehin minimal.
 */
html[data-ge-sektion="pruefung"],
html[data-ge-sektion="branchen"],
html[data-ge-sektion="personal"],
html[data-ge-sektion="maschinen"] {
	--ge-leiste-linie: #454A52;
}

@media (min-width: 1100px) {
	.ge-leiste {
		display: block;
		position: fixed;
		inset-block: var(--ge-kopf-hoehe) 0;
		inset-inline-start: 0;
		width: var(--ge-leiste-breite);
		z-index: var(--ge-z-leiste);
		pointer-events: none;
	}

	.ge-leiste__linie {
		position: absolute;
		inset-block: 0;
		inset-inline-start: var(--ge-rand);
		width: var(--ge-haarlinie);
		background: var(--ge-leiste-linie, var(--ge-linie));
	}

	.ge-leiste__liste {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: var(--ge-space-s);
		height: 100%;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.ge-leiste__posten {
		flex: none;
	}

	.ge-leiste__marke {
		display: flex;
		align-items: center;
		gap: var(--ge-space-2xs);
		/*
		 * Der Strich beginnt an der Linie, deshalb sitzt der Posten
		 * am selben Rand. Die Bezeichnung laeuft nach rechts aus der
		 * Leiste heraus und wird nicht abgeschnitten.
		 */
		margin-inline-start: var(--ge-rand);
	}

	.ge-leiste__strich {
		flex: none;
		width: 12px;
		height: var(--ge-haarlinie);
		background: var(--ge-leiste-linie, var(--ge-linie));
		transition: width var(--ge-dauer) var(--ge-kurve),
			background-color var(--ge-dauer) var(--ge-kurve);
	}

	.ge-leiste__label {
		font-family: var(--ge-font-text);
		font-weight: var(--ge-gewicht-text-kraeftig);
		font-size: 11px;
		line-height: 1;
		letter-spacing: var(--ge-laufweite-label);
		text-transform: uppercase;
		color: var(--ge-text);
		/*
		 * Darf ueber den reservierten Einzug hinauslaufen. Der Platz
		 * ist bewusst knapper als das laengste Wort, siehe den
		 * Kommentar an --ge-leiste-platz.
		 */
		white-space: nowrap;
		/*
		 * Nur die aktive Sektion zeigt ihre Bezeichnung. Sie wird
		 * ein- und ausgeblendet, nicht ein- und ausgehaengt, sonst
		 * springt die Zeile.
		 */
		opacity: 0;
		transition: opacity var(--ge-dauer) var(--ge-kurve);
	}

	.ge-leiste__posten.ge-ist-aktiv .ge-leiste__strich {
		width: 24px;
		background: var(--ge-akzent);
	}

	.ge-leiste__posten.ge-ist-aktiv .ge-leiste__label {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ge-leiste__strich,
	.ge-leiste__label {
		transition: none;
	}
}

/* ===================================================================
 * Seitengeruest
 * ================================================================= */
.ge-seite {
	padding-block-start: var(--ge-kopf-hoehe);
}

/*
 * Der Platz fuer die Leiste wird am Inhalt abgezogen, nicht am
 * Seitengeruest. Sonst endet die Sektionsflaeche vor der Leiste und
 * es entsteht ein Streifen in der Seitenfarbe daneben. Sektionen
 * laufen randlos durch.
 *
 * Dieselbe Schwelle wie die Leiste selbst. Stuende sie hier bei
 * 900px, entstuende zwischen 900 und 1100 ein Einzug ohne Leiste.
 */
@media (min-width: 1100px) {
	.ge-hat-leiste .ge-inhalt,
	.ge-hat-leiste .ge-kopf__innen {
		padding-inline-start: var(--ge-leiste-platz);
	}
}

/* ===================================================================
 * Fuss
 * ================================================================= */
.ge-fuss {
	padding-block: var(--ge-space-2xl) var(--ge-space-l);
	border-block-start: var(--ge-haarlinie) solid var(--ge-linie);
}

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



.ge-fuss__adresse {
	display: flex;
	flex-direction: column;
	gap: var(--ge-space-3xs);
	margin-block-start: var(--ge-space-m);
	font-style: normal;
}

.ge-fuss__firma {
	font-weight: var(--ge-gewicht-text-kraeftig);
}

.ge-fuss__adresse a {
	width: fit-content;
	background-image: linear-gradient(var(--ge-akzent), var(--ge-akzent));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 var(--ge-fokus-breite);
	transition: background-size var(--ge-dauer) var(--ge-kurve);
}

.ge-fuss__adresse a:hover,
.ge-fuss__adresse a:focus-visible {
	background-size: 100% var(--ge-fokus-breite);
}

.ge-fuss__fuehrung {
	margin-block-start: var(--ge-space-s);
	color: var(--ge-text-leise);
}

.ge-fuss__kopf {
	color: var(--ge-text-leise);
	margin-block-end: var(--ge-space-s);
}

.ge-fuss__liste {
	display: flex;
	flex-direction: column;
	gap: var(--ge-space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ge-fuss__liste a {
	background-image: linear-gradient(var(--ge-akzent), var(--ge-akzent));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 var(--ge-fokus-breite);
	transition: background-size var(--ge-dauer) var(--ge-kurve);
}

.ge-fuss__liste a:hover,
.ge-fuss__liste a:focus-visible {
	background-size: 100% var(--ge-fokus-breite);
}

.ge-fuss__liste--orte {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ge-space-2xs) var(--ge-space-m);
}

.ge-fuss__unten {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ge-space-s);
	margin-block-start: var(--ge-space-2xl);
	padding-block-start: var(--ge-space-m);
	border-block-start: var(--ge-haarlinie) solid var(--ge-linie);
}

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

.ge-fuss__liste--recht {
	flex-direction: row;
	gap: var(--ge-space-m);
	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;
}

@media (min-width: 640px) {
	.ge-fuss__innen {
		grid-template-columns: 1.4fr 1fr 1.2fr;
	}
}

/* ===================================================================
 * Schaukasten, nur Entwicklung
 * ================================================================= */
.ge-schau__reihe {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ge-space-l);
	margin-block-start: var(--ge-space-l);
}

.ge-schau__feld {
	display: flex;
	flex-direction: column;
	gap: var(--ge-space-xs);
	color: var(--ge-text-leise);
}

.ge-schau__feld--papier {
	background: var(--ge-flaeche);
	color: var(--ge-text-leise);
	padding: var(--ge-space-s);
	border-radius: var(--ge-radius);
}

.ge-schau__farben {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--ge-space-m);
	margin-block-start: var(--ge-space-l);
}

.ge-schau__farbe {
	display: flex;
	flex-direction: column;
	gap: var(--ge-space-2xs);
}

.ge-schau__probe {
	display: block;
	height: 72px;
	border: var(--ge-haarlinie) solid var(--ge-linie);
	border-radius: var(--ge-radius);
}

/*
 * Kurze Fenster. Elf Sektionen brauchen mit dem regulaeren Abstand
 * rund 300px, das passt fast immer. Bleibt es doch eng, ruecken die
 * Striche zusammen. Die Schriftgroesse bleibt bei 11px, sie steht so
 * im Briefing.
 */
@media (min-width: 1100px) and (max-height: 620px) {
	.ge-leiste__liste {
		gap: var(--ge-space-2xs);
	}
}