/*
 * GOAT Ecom, Startseite.
 *
 * Bausteine der zehn Sektionen. Radius 4px auf Karten und Knoepfen,
 * 0 auf Etiketten und Tabellen. Kein Schatten, kein Verlauf.
 * Signalgelb traegt genau eine Sache je Bildschirmhoehe.
 */

/* ===================================================================
 * Wiederkehrende Teile
 * ================================================================= */
.ge-eyebrow {
	color: var(--ge-text-leise);
	margin-block-end: var(--ge-space-s);
}

.ge-sektion__titel {
	max-width: 20ch;
}

.ge-sektion__vorspann {
	max-width: var(--ge-zeilenlaenge);
	margin-block-start: var(--ge-space-m);
}

.ge-fussnote {
	color: var(--ge-text-leise);
	margin-block-start: var(--ge-space-l);
	max-width: 80ch;
}

/*
 * Seitliches Polster eine Stufe schmaler als urspruenglich. Mit
 * space-l waren die beiden Hero-Knoepfe zusammen 9px breiter als
 * die Textspalte und rutschten untereinander.
 */
.ge-knopf--gross {
	font-size: var(--ge-klein);
	padding: var(--ge-space-s) var(--ge-space-m);
}

/*
 * Textblock nach Abschnitt 8: nur eine Haarlinie im Akzent oben,
 * Ueberschrift im Labelstil, zwei Saetze darunter. Keine Karten,
 * keine Rahmen, keine Icons. Der Kastenrahmen aus dem alten System
 * ist raus.
 */
.ge-etikett {
	border-block-start: var(--ge-haarlinie) solid var(--ge-akzent);
	padding-block-start: var(--ge-space-s);
}

.ge-etikett__kopf {
	color: var(--ge-text);
	margin-block-end: var(--ge-space-xs);
}

/* Haken im Etikettenstil, 1,5px Strichzeichnung */
.ge-haken {
	display: grid;
	gap: var(--ge-space-xs);
	margin-block-start: var(--ge-space-m);
}

.ge-haken__posten,
.ge-zusagen__posten {
	display: flex;
	align-items: flex-start;
	gap: var(--ge-space-2xs);
}

/*
 * Das Haekchen erbt die Textfarbe der Flaeche, auf der es steht.
 *
 * Ueber eine Regel wie .ge-sektion .ge-haken__zeichen laesst
 * sich das nicht loesen: der Body traegt selbst eine Flaechenklasse
 * und ist Vorfahre von allem, damit greift die Regel auch in
 * Sektionen, fuer die sie nicht gedacht ist.
 *
 * Gelb kommt hier ohnehin nicht in Frage. Im selben Bildausschnitt
 * steht der gelbe Haupt-CTA, und Signalgelb traegt genau eine Sache
 * je Bildschirmhoehe.
 */
.ge-haken__zeichen {
	flex: none;
	margin-block-start: .1em;
	color: currentColor;
}

/* ===================================================================
 * Hero, Einstieg
 *
 * Ein Blickpunkt. Links Text und zwei Knoepfe, rechts ein einziger
 * Ganzseiten-Screenshot im weissen Rahmen. Der Kartenstapel aus dem
 * alten System ist raus.
 * ================================================================= */
.ge-hero {
	position: relative;
	padding-block-start: var(--ge-space-l);
	padding-block-end: var(--ge-space-l);
	/*
	 * Die Cursor-Punkte starten per CSS bei inset-inline-start:0 mit
	 * -3px Rand, bevor cursor-spur.js sie je bewegt hat. Auf
	 * Touch-Geraeten laeuft das Skript nie an, die Punkte bleiben
	 * unsichtbar (opacity:0) aber genau dort stehen und schieben die
	 * Seite bei 320px messbar ueber den Viewport hinaus. overflow
	 * kappt das, ohne die Spur auf dem Desktop sichtbar einzuschraenken.
	 */
	overflow: hidden;
}

/*
 * Cursor-Spur, siehe assets/js/cursor-spur.js. Die Punkte werden per
 * Skript positioniert und wiederverwendet, hier nur ihr Aussehen.
 */
.ge-cursor-punkt {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	width: 6px;
	height: 6px;
	margin: -3px 0 0 -3px;
	border-radius: 50%;
	background: var(--ge-akzent);
	opacity: 0;
	pointer-events: none;
	z-index: 1;
	will-change: opacity, transform;
}

.ge-hero__innen {
	display: grid;
	gap: var(--ge-space-xl);
	align-items: center;
}

.ge-hero__titel {
	margin-block-start: var(--ge-space-m);
	max-width: 14ch;
	/*
	 * Eigener Deckel, unter dem globalen. Der Hero teilt die Spalte
	 * mit dem Screenshot und rueckt zusaetzlich um die Leiste ein,
	 * seine Textspalte ist damit schmaler als auf jeder anderen
	 * Seite: 442px am engsten Punkt bei 1250px Fensterbreite.
	 * "Onlineshops," ist als laengstes Wort 7,76-mal so breit wie
	 * die Schriftgroesse. 4.4vw und 3.85rem halten das Wort an jeder
	 * Breite in der Spalte, nachgemessen bei 900, 1100, 1250, 1440
	 * und 1600. Mit dem globalen Deckel von 4.26rem brach das Wort
	 * ohne Trennstrich mitten im Wort.
	 */
	font-size: clamp(2.5rem, 4.4vw, 3.85rem);
}

.ge-hero__sub {
	margin-block-start: var(--ge-space-m);
	max-width: 46ch;
}

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

.ge-hero__zusatz {
	margin-block-start: var(--ge-space-s);
	font-size: var(--ge-klein);
	color: var(--ge-text-leise);
}

.ge-hero__bild {
	position: relative;
}

/*
 * Rahmen mit Haarlinie, oben beschnitten auf rund 70vh. Unten
 * laeuft das Bild ueber eine 120px hohe Maske von transparent zur
 * Seitenflaeche aus. Die einzige erlaubte Ausnahme von der
 * Verlaufsregel, und sie gilt nur hier.
 *
 * Kante in --ge-kante statt --ge-linie: der Rahmen steht ab 900px
 * geneigt neben dem Handy-Rahmen und deutet damit ein Bedienelement
 * an, kein ruhiges Etikett.
 */
.ge-hero__rahmen {
	position: relative;
	max-height: 70vh;
	overflow: hidden;
	background: var(--ge-flaeche-2);
	border: var(--ge-haarlinie) solid var(--ge-kante);
	border-radius: var(--ge-radius-flaeche);
}

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

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

/*
 * Die vier Haken als schmale Zeile an der Unterkante, getrennt
 * durch Punkte in der Linienfarbe. Unter 900px untereinander.
 */
.ge-hero__punkte {
	display: flex;
	flex-direction: column;
	gap: var(--ge-space-2xs);
	margin-block-start: var(--ge-space-xl);
	padding-block-start: var(--ge-space-m);
	border-block-start: var(--ge-haarlinie) solid var(--ge-linie);
	font-size: var(--ge-klein);
}

/*
 * Handy-Rahmen, ueberlappt den Desktop-Rahmen rechts unten. Abstrakt:
 * kein Geraetekoerper, keine Notch, keine Tastatur, kein
 * Schlagschatten, nur der Bildschirminhalt im Rahmen.
 *
 * Unter 900px unsichtbar und der Desktop-Rahmen steht gerade, siehe
 * unten. Statisch: keine Transition, keine Bewegung bei Scroll oder
 * Maus.
 */
.ge-hero__handy {
	display: none;
}

.ge-hero__handy-rahmen {
	width: 100%;
	aspect-ratio: 390 / 844;
	overflow: hidden;
	background: var(--ge-flaeche-2);
	border: var(--ge-haarlinie) solid var(--ge-kante);
	border-radius: var(--ge-radius-flaeche);
}

.ge-hero__handy-bild {
	display: block;
	width: 100%;
	height: auto;
}

@media (min-width: 900px) {
	.ge-hero__innen {
		grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
		/* Die Rinne aus dem Raster, kein eigener Abstand */
		gap: var(--ge-rinne);
	}

	.ge-hero__punkte {
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--ge-space-2xs) var(--ge-space-m);
	}

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

	/*
	 * Desktop-Rahmen geneigt, translateZ(0) gegen unscharfes
	 * Rendering bei der 3D-Transformation.
	 */
	.ge-hero__rahmen {
		transform: perspective(1800px) rotateY(-18deg) rotateX(4deg) translateZ(0);
	}

	.ge-hero__handy {
		display: block;
		position: absolute;
		inset-block-end: -6%;
		inset-inline-end: -8%;
		width: 30%;
		z-index: 2;
		transform: translateZ(0);
	}
}


/* ===================================================================
 * Problem, Ausgangslage
 * ================================================================= */
.ge-diagnose {
	display: grid;
	gap: var(--ge-space-m);
	margin-block-start: var(--ge-space-xl);
}

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

/* ===================================================================
 * Vergleich
 * ================================================================= */
.ge-tabelle__rahmen {
	margin-block-start: var(--ge-space-xl);
	overflow-x: auto;
}

.ge-tabelle {
	width: 100%;
	min-width: 640px;
	border-radius: var(--ge-radius-flaeche);
	/* Weisse Flaeche auf der Seitenflaeche, Haarlinien statt Rahmen */
	background: var(--ge-flaeche-2);
}

.ge-tabelle th,
.ge-tabelle td {
	padding: var(--ge-space-s) var(--ge-space-m);
	border-block-end: var(--ge-haarlinie) solid var(--ge-linie);
	vertical-align: baseline;
}

.ge-tabelle thead th {
	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);
}

.ge-tabelle tbody th {
	font-weight: var(--ge-gewicht-text-kraeftig);
}

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

/*
 * Die eigene Spalte wird durch einen 3px starken Strich im Akzent
 * oben markiert, nicht durch eine Farbflaeche. Der Strich sitzt am
 * Kopf der Spalte, die Zellen darunter tragen nur kraeftige Schrift.
 */
.ge-tabelle__wir {
	font-weight: var(--ge-gewicht-text-kraeftig);
	color: var(--ge-text);
}

.ge-tabelle thead .ge-tabelle__wir {
	border-block-start: 3px solid var(--ge-akzent);
}

/*
 * Unter 700px kein table-Layout mehr: echter Querscroll ist kein
 * Ersatz fuer ein responsives Layout, wenn die Tabelle so viele
 * Spalten traegt. Jede Zeile wird ein eigener Block, das Merkmal
 * steht als Zwischenueberschrift darueber, die drei Werte darunter
 * nebeneinander mit wiederholtem Spaltenlabel aus data-label.
 * thead bleibt fuer Screenreader erhalten, nur visuell versteckt
 * (dieselbe Technik wie .ge-nur-screenreader in base.css).
 */
@media (max-width: 699.98px) {
	.ge-tabelle__rahmen {
		overflow-x: visible;
	}

	.ge-tabelle {
		display: block;
		width: 100%;
		min-width: 0;
	}

	.ge-tabelle thead {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	.ge-tabelle tbody {
		display: block;
	}

	.ge-tabelle tr {
		display: flex;
		flex-wrap: wrap;
		padding-block: var(--ge-space-s);
		border-block-end: var(--ge-haarlinie) solid var(--ge-linie);
	}

	.ge-tabelle tr th[scope="row"] {
		flex: 0 0 100%;
		width: 100%;
		padding: 0 0 var(--ge-space-xs);
		border: 0;
		color: var(--ge-text-leise);
	}

	.ge-tabelle td {
		flex: 0 0 33.333%;
		width: 33.333%;
		box-sizing: border-box;
		padding: 0 var(--ge-space-2xs);
		border: 0;
	}

	.ge-tabelle td:first-of-type {
		padding-inline-start: 0;
	}

	.ge-tabelle td::before {
		content: attr(data-label);
		display: block;
		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);
		margin-block-end: var(--ge-space-2xs);
	}

	.ge-tabelle td.ge-tabelle__wir {
		border-block-start: 3px solid var(--ge-akzent);
		padding-block-start: var(--ge-space-2xs);
	}
}

/* ===================================================================
 * Gebaute Seiten, der Schaukasten
 *
 * Die Regeln stammen von der Entscheidungsvorlage und sind hierher
 * gezogen, damit die Startseite sie traegt. Die Querscroll-Reihe aus
 * R1 ist raus.
 *
 * Die .ge-fall-Karten weiter unten gehoeren nicht zum Schaukasten:
 * sie dienen /referenzen/ und den Standortseiten.
 * ================================================================= */
.ge-schau {
	position: relative;
	background: var(--ge-flaeche);
}

.ge-schau__buehne {
	position: sticky;
	inset-block-start: 0;
	display: flex;
	align-items: center;
	min-height: 100vh;
	overflow: hidden;
}

.ge-schau__innen {
	display: grid;
	gap: var(--ge-space-2xl);
	width: 100%;
	align-items: center;
}

@media (min-width: 900px) {
	.ge-schau__innen {
		grid-template-columns: 1fr 46%;
		gap: var(--ge-rinne);
	}
}

.ge-schau__text {
	position: relative;
}

.ge-schau__marke {
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--ge-dauer) var(--ge-kurve);
}

.ge-schau__marke.ge-ist-sichtbar {
	opacity: 1;
	visibility: visible;
}

@media (min-width: 900px) {
	/* Die Markentexte liegen uebereinander, damit die Hoehe ruhig bleibt */
	.ge-schau__marke + .ge-schau__marke {
		position: absolute;
		inset-block-start: 0;
		inset-inline: 0;
	}

	.ge-schau__marke:first-of-type {
		position: relative;
	}
}

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

.ge-schau__name {
	margin-block-start: var(--ge-space-3xs);
}

/* Ohne Branchen-Einordnung ruecken die Namen wieder direkt unter die Sektions-Eyebrow */
.ge-schau__marke:not(:has(.ge-schau__branche)) .ge-schau__name {
	margin-block-start: var(--ge-space-s);
}

.ge-schau__kurz {
	margin-block-start: var(--ge-space-m);
	max-width: 42ch;
}

.ge-schau__beweis {
	margin-block-start: var(--ge-space-m);
	padding-inline-start: var(--ge-space-s);
	border-inline-start: 2px solid var(--ge-akzent);
	max-width: 42ch;
	font-weight: var(--ge-gewicht-text-kraeftig);
}

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

.ge-schau__punkt {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: var(--ge-haarlinie) solid var(--ge-kante);
	background: transparent;
	cursor: pointer;
	transition: background-color var(--ge-dauer-schnell) var(--ge-kurve),
		border-color var(--ge-dauer-schnell) var(--ge-kurve);
}

.ge-schau__punkt.ge-ist-aktiv {
	background: var(--ge-akzent);
	border-color: var(--ge-akzent);
}

.ge-schau__buehne-rechts {
	position: relative;
}

.ge-schau__fenster {
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--ge-dauer) var(--ge-kurve);
}

.ge-schau__fenster.ge-ist-sichtbar {
	opacity: 1;
	visibility: visible;
}

@media (min-width: 900px) {
	.ge-schau__fenster + .ge-schau__fenster {
		position: absolute;
		inset-block-start: 0;
		inset-inline: 0;
	}

	.ge-schau__fenster:first-of-type {
		position: relative;
	}
}

.ge-schau__rahmen {
	background: var(--ge-flaeche-2);
	border: var(--ge-haarlinie) solid var(--ge-linie);
	/*
	 * 78vh ist der Regelfall, nicht mehr fest. "Durchlaufen" heisst
	 * der Teil des Bildes, der erst beim Scrollen neu ins Fenster
	 * kommt, nicht das, was am Ruhepunkt schon sichtbar ist:
	 *
	 *   Durchlauf = min(Bildhoehe - Rahmenhoehe, Pinlaenge * Tempo) / Bildhoehe
	 *
	 * Untergrenze 55vh. Reicht selbst die nicht fuer 45 Prozent
	 * Durchlauf, bekommt die Marke keinen Pin und steht statisch mit
	 * Link, siehe die Marken-Modifier weiter unten und die Rueckfall-
	 * Regeln fuer .ge-schau--frei.
	 */
	height: 78vh;
	overflow: hidden;
}

/*
 * Valmore, einzige Ausnahme bei den aktuellen fuenf Marken.
 *
 * Gerechnet bei 1440 x 900, gemessene Rahmenbreite 484px:
 * Bildhoehe 974px (Seitenverhaeltnis 2818:1400). Bei 78vh (702px)
 * blieben nur 272px Rest, 28 Prozent Durchlauf, "der Rahmen zeigt
 * fast alles schon" im Sinn der Regel. Bei 58vh (522px) bleiben
 * 452px Rest, 46 Prozent Durchlauf, mit Sicherheitsabstand zur
 * 45-Prozent-Schwelle. Die anderen vier Marken erreichen bei 78vh
 * bereits 48 bis 54 Prozent und bleiben unveraendert.
 */
[data-ge-fenster="valmore"] .ge-schau__rahmen {
	height: 58vh;
}

.ge-schau__rahmen img {
	display: block;
	width: 100%;
	height: auto;
	will-change: transform;
}

.ge-schau__fuss {
	margin-block-start: var(--ge-space-2xs);
	font-size: var(--ge-label);
	letter-spacing: var(--ge-laufweite-label);
	text-transform: uppercase;
	font-weight: var(--ge-gewicht-text-kraeftig);
	color: var(--ge-text-leise);
}

/* -------------------------------------------------------------------
 * Rueckfall: kein Pin
 *
 * Unter 900px und bei abbestellter Bewegung stehen die Marken
 * untereinander, jede mit dem oberen Ausschnitt.
 * ----------------------------------------------------------------- */
.ge-schau--frei {
	height: auto !important;
}

.ge-schau--frei .ge-schau__buehne {
	position: static;
	min-height: 0;
	display: block;
	padding-block: var(--ge-space-2xl);
}

.ge-schau--frei .ge-schau__innen {
	grid-template-columns: 1fr;
}

.ge-schau--frei .ge-schau__marke,
.ge-schau--frei .ge-schau__fenster {
	position: relative;
	opacity: 1;
	visibility: visible;
}

.ge-schau--frei .ge-schau__marke + .ge-schau__marke,
.ge-schau--frei .ge-schau__fenster + .ge-schau__fenster {
	margin-block-start: var(--ge-space-2xl);
}

.ge-schau--frei .ge-schau__rahmen {
	height: 60vh;
}

.ge-schau--frei .ge-schau__rahmen img {
	transform: none !important;
}

.ge-schau--frei .ge-schau__punkte {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.ge-schau {
		height: auto !important;
	}

	.ge-schau__buehne {
		position: static;
		min-height: 0;
	}

	.ge-schau__rahmen img {
		transform: none !important;
	}
}

.ge-fall {
	flex: none;
	width: min(88vw, 380px);
	scroll-snap-align: start;
	border: var(--ge-haarlinie) solid var(--ge-linie);
	border-radius: var(--ge-radius-flaeche);
	padding: var(--ge-space-m);
	background: var(--ge-flaeche-2);
}

.ge-fall__kopf {
	display: flex;
	justify-content: space-between;
	gap: var(--ge-space-s);
	color: var(--ge-text-leise);
	padding-block-end: var(--ge-space-xs);
	border-block-end: var(--ge-haarlinie) solid var(--ge-linie);
}

.ge-fall__bild {
	width: calc(100% + var(--ge-space-m) * 2);
	margin-block-start: var(--ge-space-m);
	margin-inline: calc(var(--ge-space-m) * -1);
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: top center;
	border-radius: var(--ge-radius-flaeche);
}

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

.ge-fall__zeile {
	color: var(--ge-text-leise);
	margin-block-start: var(--ge-space-3xs);
}

.ge-fall__text {
	margin-block-start: var(--ge-space-s);
}

.ge-fall__beweis {
	margin-block-start: var(--ge-space-m);
	padding-inline-start: var(--ge-space-s);
	border-inline-start: var(--ge-fokus-breite) solid var(--ge-akzent);
	font-weight: var(--ge-gewicht-text-kraeftig);
}

/* ===================================================================
 * Unter der Haube, gepinnte Code-Sektion
 *
 * Dieselbe Klebe-Technik wie beim Schaukasten: ein aeusserer
 * Rahmen, hoeher als der Viewport, darin eine sticky Buehne auf
 * voller Viewporthoehe. Die Differenz ist die Pin-Laenge, hier fest
 * 80vh statt marken-abhaengig.
 * ================================================================= */
.ge-werkstatt {
	position: relative;
	background: var(--ge-flaeche);
	padding-block: 0;
	height: calc(100vh + 80vh);
}

.ge-werkstatt__buehne {
	position: sticky;
	inset-block-start: 0;
	display: flex;
	align-items: center;
	min-height: 100vh;
	overflow: hidden;
}

.ge-werkstatt__innen {
	display: grid;
	gap: var(--ge-space-xl);
	width: 100%;
	padding-block: var(--ge-space-l);
	max-height: 100vh;
}

/*
 * Grid-Kinder haben ohne diese Regel ein implizites min-width:auto,
 * das sich am Inhalt bemisst statt an der Spurbreite. Bei knappen
 * mobilen Breiten reicht das, um die Spur ueber den Viewport hinaus
 * zu schieben, der aeussere Rahmen schneidet den Ueberstand dann per
 * overflow ab, sichtbar zuerst an der Ueberschrift.
 */
.ge-werkstatt__text,
.ge-werkstatt__code {
	min-width: 0;
}

/*
 * "Website" ist ein englisches Lehnwort, die deutsche
 * Trennungsregel von hyphens:auto (siehe .ge-h2 in base.css) trennt
 * es teils falsch oder gar nicht und laesst die Zeile dann ueber die
 * schmale mobile Spalte hinauslaufen. Dieselbe Ausnahme wie bei .ge-h1.
 */
.ge-werkstatt__text .ge-sektion__titel {
	hyphens: none;
}

@media (min-width: 900px) {
	.ge-werkstatt__innen {
		grid-template-columns: 5fr 7fr;
		align-items: center;
		gap: var(--ge-rinne);
	}
}

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

/*
 * Zwei Codebloecke im DOM, derselbe Ausschnitt in zwei Laengen. Nur
 * einer ist je Breite sichtbar, siehe werkstatt.php: der Umbau steckt
 * im Template, nicht in einem CSS-Deckel ueber dem vollen String.
 */
.ge-werkstatt__code--desktop {
	display: none;
}

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

	.ge-werkstatt__code--desktop {
		display: block;
	}
}

/*
 * Proportionalschrift statt Mono, wie im ganzen Theme: die Mono ist
 * in Abschnitt 3 der Tokendatei ausdruecklich gestrichen. Zeilen und
 * Einrueckung bleiben trotzdem original aus der Quelldatei.
 */
.ge-code {
	margin: 0;
	padding: var(--ge-space-l);
	background: var(--ge-flaeche-2);
	border: var(--ge-haarlinie) solid var(--ge-linie);
	border-radius: var(--ge-radius-flaeche);
	/*
	 * Sicherheitsnetz gegen niedrige Fensterhoehen: die Buehne ist
	 * sticky und scrollt selbst nicht mit, ohne Deckel waeren die
	 * letzten Zeilen auf kurzen Fenstern nie erreichbar.
	 */
	max-height: min(60vh, 500px);
	overflow-x: auto;
	overflow-y: auto;
	font-family: var(--ge-font-text);
	font-size: var(--ge-klein);
	line-height: 1.55;
	color: var(--ge-text);
	white-space: pre;
	tab-size: 4;
}

/*
 * Die gepinnte Buehne ist eine reine Desktop-Inszenierung: Text und
 * Code passen dort nebeneinander in eine Viewporthoehe. Einspaltig
 * gestapelt sprengt derselbe Inhalt 100vh zuverlaessig, das kappt
 * die Sektion per overflow:hidden und laesst den Codeblock beim
 * Scrollen faellschlich die ganze sichtbare Flaeche einnehmen, das
 * Scrollen bleibt dann im Codeblock haengen statt auf der Seite.
 * Unter 900px faellt der Pin deshalb komplett weg, die Sektion
 * fliesst normal mit. Muss nach der Basisregel fuer .ge-code stehen,
 * sonst gewinnt deren spaeteres overflow-y:auto in der Kaskade.
 */
@media (max-width: 899.98px) {
	.ge-werkstatt {
		height: auto;
	}

	.ge-werkstatt__buehne {
		position: static;
		min-height: 0;
		overflow: visible;
	}

	.ge-werkstatt__innen {
		max-height: none;
	}

	.ge-code {
		max-height: none;
		overflow-y: visible;
	}
}

.ge-code__schluessel {
	color: var(--ge-akzent);
}

.ge-code__string {
	/* Gedaempftes Gruen, eigens fuer den Codeblock, kein Token. */
	color: #4EC994;
}

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

.ge-code__zeichen--versteckt {
	visibility: hidden;
}

.ge-code__cursor {
	display: inline-block;
	width: 2px;
	height: 1em;
	margin-inline-start: 1px;
	background: var(--ge-akzent);
	vertical-align: text-bottom;
	animation: ge-code-blinken 1s step-end infinite;
}

@keyframes ge-code-blinken {
	50% {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ge-code__cursor {
		animation: none;
	}
}

/* ===================================================================
 * Leistungen und Prozess
 * ================================================================= */
.ge-leistungen {
	display: grid;
	gap: var(--ge-space-m);
	margin-block-start: var(--ge-space-xl);
}

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

@media (min-width: 900px) {
	.ge-leistungen {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.ge-prozess {
	margin-block-start: var(--ge-space-3xl);
	padding-block-start: var(--ge-space-xl);
	border-block-start: var(--ge-haarlinie) solid var(--ge-linie);
}

.ge-prozess__leiste {
	display: grid;
	gap: var(--ge-space-m);
	margin-block-start: var(--ge-space-l);
	padding: 0;
	list-style: none;
	counter-reset: none;
}

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

.ge-prozess__schritt {
	padding: var(--ge-space-m);
	border: var(--ge-haarlinie) solid var(--ge-linie);
	border-radius: var(--ge-radius-flaeche);
}

@media (min-width: 640px) {
	.ge-prozess__schritt {
		border-inline-end: 0;
	}

	.ge-prozess__schritt:last-child {
		border-inline-end: var(--ge-haarlinie) solid var(--ge-linie);
	}
}

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

.ge-prozess__name {
	margin-block-start: var(--ge-space-2xs);
	font-weight: var(--ge-gewicht-text-kraeftig);
}

.ge-prozess__dauer {
	margin-block-start: var(--ge-space-2xs);
	padding-inline-start: var(--ge-space-2xs);
	border-inline-start: var(--ge-fokus-breite) solid var(--ge-akzent);
}

.ge-prozess__text {
	margin-block-start: var(--ge-space-2xs);
	color: var(--ge-text-leise);
}

/* ===================================================================
 * Team
 * ================================================================= */
.ge-team {
	display: grid;
	gap: var(--ge-space-m);
	margin-block-start: var(--ge-space-xl);
}

@media (min-width: 900px) {
	.ge-team {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/*
 * Drei Karten, weiss auf der Seitenflaeche, Bild 4:5 oben, Text
 * darunter. Die Bilder sind entsaettigt, damit sie nicht mit den
 * Screenshots konkurrieren; das ist die eine Stelle, an der die
 * alte Regel weiterlebt.
 */
.ge-person {
	display: flex;
	flex-direction: column;
	background: var(--ge-flaeche-2);
	border: var(--ge-haarlinie) solid var(--ge-linie);
	border-radius: var(--ge-radius-flaeche);
	overflow: hidden;
}

.ge-person > :not(.ge-person__bild) {
	margin-inline: var(--ge-space-m);
}

.ge-person > :last-child {
	margin-block-end: var(--ge-space-m);
}

.ge-person__bild {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	filter: saturate(0);
	margin-block-end: var(--ge-space-m);
}

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

.ge-person__name {
	margin-block: var(--ge-space-2xs) var(--ge-space-s);
}

.ge-person__text p {
	max-width: var(--ge-zeilenlaenge);
}

.ge-person__mono {
	margin-block-start: var(--ge-space-m);
	padding-block-start: var(--ge-space-s);
	border-block-start: var(--ge-haarlinie) solid var(--ge-linie);
	color: var(--ge-text-leise);
}

/* ===================================================================
 * Preise
 * ================================================================= */
.ge-preise {
	display: grid;
	gap: var(--ge-space-m);
	margin-block-start: var(--ge-space-xl);
	align-items: stretch;
}

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

@media (min-width: 1024px) {
	.ge-preise {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.ge-preis {
	display: flex;
	flex-direction: column;
	gap: var(--ge-space-2xs);
	padding: var(--ge-space-l) var(--ge-space-m);
	background: var(--ge-flaeche-2);
	border: var(--ge-haarlinie) solid var(--ge-linie);
	border-radius: var(--ge-radius);
}

/*
 * Die Bestseller-Karte traegt einen Strich im Akzent oben und eine
 * Beschriftung im Akzent, keine ausgefuellte Farbflaeche.
 */
.ge-preis--beste {
	border-block-start: 3px solid var(--ge-akzent);
}

.ge-preis__marke {
	color: var(--ge-akzent);
	font-weight: var(--ge-gewicht-text-kraeftig);
}

.ge-preis__name {
	font-family: var(--ge-font-text);
	font-weight: var(--ge-gewicht-text-kraeftig);
	font-size: var(--ge-body);
}

/*
 * Das Praefix steht als eigene Mono-Zeile ueber der Zahl. In einer
 * Zeile mit der Zahl bricht "ab 1.899 EUR" in der vier Spalten
 * breiten Reihe um und sieht kaputt aus.
 */
.ge-preis__praefix {
	color: var(--ge-text-leise);
	margin-block-end: calc(var(--ge-space-3xs) * -1);
}

.ge-preis__zahl {
	font-family: var(--ge-font-display);
	font-weight: var(--ge-gewicht-display);
	font-size: clamp(1.875rem, 2.6vw, 2.25rem);
	line-height: var(--ge-zeile-display);
	letter-spacing: var(--ge-laufweite-display);
	white-space: nowrap;
}

/* Auf Anfrage steht eine Stufe kleiner, sonst gleichwertig */
.ge-preis__zahl--wort {
	font-size: clamp(1.375rem, 2vw, 1.75rem);
}

.ge-preis__sub {
	color: var(--ge-text-leise);
	margin-block-end: var(--ge-space-2xs);
}

.ge-preis__punkte {
	display: grid;
	gap: var(--ge-space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
	padding-block: var(--ge-space-s);
	border-block: var(--ge-haarlinie) solid var(--ge-linie);
}

.ge-preis__punkte li {
	position: relative;
	padding-inline-start: var(--ge-space-s);
	font-size: var(--ge-klein);
}

.ge-preis__punkte li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: .62em;
	width: 6px;
	height: var(--ge-haarlinie);
	background: currentColor;
}

.ge-preis__satz {
	font-size: var(--ge-klein);
	color: var(--ge-text-leise);
}

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

.ge-wartung {
	display: grid;
	gap: var(--ge-space-m);
	margin-block-start: var(--ge-space-m);
	padding: var(--ge-space-l) var(--ge-space-m);
	border: var(--ge-haarlinie) solid var(--ge-linie);
	border-radius: var(--ge-radius);
}

@media (min-width: 640px) {
	.ge-wartung {
		grid-template-columns: 1fr 2fr;
		align-items: center;
		gap: var(--ge-space-xl);
	}
}

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

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

.ge-wartung__zusatz {
	color: var(--ge-text-leise);
	margin-block-start: var(--ge-space-3xs);
}

.ge-wartung__punkte {
	display: grid;
	gap: var(--ge-space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ge-wartung__punkte li {
	position: relative;
	padding-inline-start: var(--ge-space-s);
	font-size: var(--ge-klein);
}

.ge-wartung__punkte li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: .62em;
	width: 6px;
	height: var(--ge-haarlinie);
	background: currentColor;
}

.ge-zusagen {
	margin-block-start: var(--ge-space-2xl);
	padding-block-start: var(--ge-space-xl);
	border-block-start: var(--ge-haarlinie) solid var(--ge-linie);
}

.ge-zusagen__liste {
	display: grid;
	gap: var(--ge-space-xs);
	margin-block-start: var(--ge-space-m);
	padding: 0;
	list-style: none;
}

@media (min-width: 900px) {
	.ge-zusagen__liste {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: var(--ge-space-m);
	}
}

/* ===================================================================
 * KI-Auffindbarkeit
 * ================================================================= */
.ge-ki__text {
	display: grid;
	gap: var(--ge-space-m);
	margin-block-start: var(--ge-space-m);
}

.ge-ki__text p {
	max-width: var(--ge-zeilenlaenge);
}

.ge-bausteine {
	display: grid;
	gap: 0;
	margin-block-start: var(--ge-space-xl);
	border-block-start: var(--ge-haarlinie) solid var(--ge-linie);
}

.ge-baustein {
	display: grid;
	gap: var(--ge-space-2xs);
	padding-block: var(--ge-space-m);
	border-block-end: var(--ge-haarlinie) solid var(--ge-linie);
}

@media (min-width: 640px) {
	.ge-baustein {
		grid-template-columns: 200px 1fr;
		gap: var(--ge-space-l);
		align-items: baseline;
	}
}

/*
 * Scanrot ist hier Linie, nicht Schrift.
 *
 * Als Textfarbe erreicht Scanrot auf Papier 2,95:1 und liegt damit
 * unter der Schwelle von 4,5:1, bei 12px Mono erst recht. Die Regel
 * aus Abschnitt 2 sagt ohnehin: Scanrot nur fuer Scanlinie,
 * Fokusring und Hover-Unterstreichung. Der Akzent sitzt deshalb im
 * Balken davor, die Schrift traegt die Textfarbe der Flaeche.
 */
.ge-baustein__kopf {
	display: flex;
	align-items: center;
	gap: var(--ge-space-2xs);
	color: var(--ge-text);
}

.ge-baustein__kopf::before {
	content: "";
	flex: none;
	width: var(--ge-fokus-breite);
	height: 1em;
	background: var(--ge-akzent);
}

.ge-ehrlich {
	position: relative;
	margin-block-start: var(--ge-space-xl);
	padding: var(--ge-space-l) var(--ge-space-l) var(--ge-space-l) var(--ge-space-xl);
	/* Gehobene Flaeche, frueher kam das Weiss von der Flaechenklasse */
	background: var(--ge-flaeche-2);
	border-radius: var(--ge-radius-flaeche);
}

.ge-ehrlich__linie {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: var(--ge-fokus-breite);
	background: var(--ge-akzent);
}

.ge-ehrlich p {
	max-width: var(--ge-zeilenlaenge);
}

.ge-ki__aktion {
	margin-block-start: var(--ge-space-xl);
}

/* ===================================================================
 * Fragen
 * ================================================================= */
.ge-fragen {
	margin-block-start: var(--ge-space-xl);
	border-block-start: var(--ge-haarlinie) solid var(--ge-linie);
}

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

.ge-frage__kopf {
	display: flex;
	align-items: baseline;
	gap: var(--ge-space-s);
	padding-block: var(--ge-space-m);
}

.ge-frage__nummer {
	flex: none;
	color: var(--ge-text-leise);
}

.ge-frage__titel {
	flex: 1;
	font-size: var(--ge-h3);
	font-weight: var(--ge-gewicht-text-kraeftig);
	line-height: var(--ge-zeile-h3);
}

.ge-frage__zeichen {
	flex: none;
	align-self: center;
	color: var(--ge-text-leise);
	transition: transform var(--ge-dauer) var(--ge-kurve);
}

.ge-frage[open] .ge-frage__zeichen {
	transform: rotate(45deg);
}

.ge-frage__text {
	padding-block-end: var(--ge-space-m);
	padding-inline-start: calc(var(--ge-space-s) + 2ch);
}

.ge-frage__text p {
	max-width: var(--ge-zeilenlaenge);
	color: var(--ge-text-leise);
}

/* ===================================================================
 * Kontakt
 * ================================================================= */
.ge-kontakt {
	display: grid;
	gap: var(--ge-space-xl);
	margin-block-start: var(--ge-space-xl);
	align-items: start;
}

@media (min-width: 900px) {
	.ge-kontakt {
		grid-template-columns: 1.5fr 1fr;
		gap: var(--ge-space-2xl);
	}
}

.ge-kontakt__karte {
	display: grid;
	gap: var(--ge-space-m);
	justify-items: start;
	padding: var(--ge-space-l);
	/* Gehobene Flaeche, frueher kam das Weiss von der Flaechenklasse */
	background: var(--ge-flaeche-2);
	border: var(--ge-haarlinie) solid var(--ge-linie);
	border-radius: var(--ge-radius-flaeche);
}

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

.ge-kontakt__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-kontakt__adresse {
	display: grid;
	gap: var(--ge-space-3xs);
	font-style: normal;
	padding-block-start: var(--ge-space-m);
	border-block-start: var(--ge-haarlinie) solid var(--ge-linie);
	width: 100%;
}

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

/* ===================================================================
 * Formular
 * ================================================================= */
.ge-form {
	display: grid;
	gap: var(--ge-space-m);
}

.ge-form__reihe {
	display: grid;
	gap: var(--ge-space-m);
}

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

.ge-feld {
	display: grid;
	gap: var(--ge-space-2xs);
	margin: 0;
}

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

.ge-feld__zusatz {
	text-transform: none;
	letter-spacing: 0;
}

.ge-feld__eingabe {
	width: 100%;
	padding: var(--ge-space-xs) var(--ge-space-s);
	background: var(--ge-flaeche-2);
	color: var(--ge-text);
	/*
	 * Kante, nicht Linie. Ein Eingabefeld ist ein Bedienelement und
	 * braucht 3:1 nach WCAG 1.4.11. Die Linienfarbe erreicht auf der
	 * Karte 2,99:1 und ist fuer Haarlinien gedacht.
	 */
	border: var(--ge-haarlinie) solid var(--ge-kante);
	border-radius: var(--ge-radius-flaeche);
}

.ge-feld__eingabe:focus-visible {
	border-color: var(--ge-text);
}

.ge-feld--wahl {
	display: grid;
	gap: var(--ge-space-2xs);
}

.ge-wahl {
	display: flex;
	align-items: flex-start;
	gap: var(--ge-space-2xs);
	cursor: pointer;
}

.ge-wahl input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.ge-wahl__kasten {
	flex: none;
	width: 18px;
	height: 18px;
	margin-block-start: .18em;
	border: var(--ge-haarlinie) solid var(--ge-kante);
	border-radius: var(--ge-radius-flaeche);
	background: var(--ge-flaeche-2);
}

.ge-wahl input:checked + .ge-wahl__kasten {
	background: var(--ge-text);
	border-color: var(--ge-text);
	box-shadow: inset 0 0 0 3px var(--ge-flaeche-2);
}

.ge-wahl input:focus-visible + .ge-wahl__kasten {
	outline: var(--ge-fokus-breite) solid var(--ge-akzent);
	outline-offset: var(--ge-fokus-abstand);
}

.ge-wahl__text {
	font-size: var(--ge-klein);
}

.ge-wahl--dsgvo .ge-wahl__text {
	max-width: 60ch;
}

/* Honigtopf. Fuer Menschen unsichtbar, fuer Roboter erreichbar. */
.ge-honig {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Aktionszeile unter den Fragen der Preisseite */
.ge-preis__aktion {
	margin-block-start: var(--ge-space-xl);
}

/* ===================================================================
 * Longform, Seite KI-Auffindbarkeit
 * ================================================================= */
.ge-longform {
	display: grid;
	gap: var(--ge-space-m);
	margin-block-start: var(--ge-space-l);
}

.ge-longform p {
	max-width: var(--ge-zeilenlaenge);
}

.ge-longform--abschnitt {
	margin-block-start: var(--ge-space-2xl);
	padding-block-start: var(--ge-space-l);
	border-block-start: var(--ge-haarlinie) solid var(--ge-linie);
}

.ge-baustein__inhalt {
	display: grid;
	gap: var(--ge-space-2xs);
}

/* Das Beispiel belegt den Baustein an dieser Website selbst */
.ge-baustein__beispiel {
	padding-inline-start: var(--ge-space-s);
	border-inline-start: var(--ge-fokus-breite) solid var(--ge-akzent);
	color: var(--ge-text-leise);
	font-size: var(--ge-klein);
	max-width: var(--ge-zeilenlaenge);
}

/* ===================================================================
 * Formular, Meldungen
 * ================================================================= */
/*
 * Die Sammelmeldung ueber dem Formular ist im ganzen Theme
 * ausschliesslich ein Fehlerzustand, siehe inc/formular.php: eine
 * erfolgreiche Anfrage leitet auf /kontakt/danke/ um und rendert
 * dieses Markup nie.
 */
.ge-meldung {
	margin-block-end: var(--ge-space-m);
	padding: var(--ge-space-s) var(--ge-space-m);
	border-inline-start: var(--ge-fokus-breite) solid var(--ge-fehler);
	background: var(--ge-flaeche-2);
	color: var(--ge-text);
	max-width: var(--ge-zeilenlaenge);
}

/* Direkt nach einer Ueberschrift braucht die Meldung eigenen Abstand */
.ge-sektion__titel + .ge-meldung {
	margin-block-start: var(--ge-space-m);
}

.ge-feld__fehler {
	color: var(--ge-fehler);
	text-transform: none;
	letter-spacing: 0;
}

.ge-feld--fehler .ge-feld__eingabe {
	border-color: var(--ge-fehler);
	border-inline-start-width: var(--ge-fokus-breite);
}

/*
 * Checkbox- und Radio-Gruppen haben kein .ge-feld__eingabe, die
 * sichtbare Flaeche ist der Kasten daneben.
 */
.ge-feld--fehler .ge-wahl__kasten {
	border-color: var(--ge-fehler);
}

/*
 * Die Fehlermeldung einer Gruppe steht ausserhalb des fieldset, nicht
 * im Grid-Abstand des .ge-feld selbst, deshalb ein eigener Abstand.
 */
[data-ge-pflicht-gruppe] + .ge-feld__fehler {
	display: block;
	margin-block-start: var(--ge-space-2xs);
}

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

/* ===================================================================
 * Karte
 * ================================================================= */
.ge-karte {
	margin: 0;
	border: var(--ge-haarlinie) solid var(--ge-linie);
	border-radius: var(--ge-radius-flaeche);
	overflow: hidden;
}

.ge-karte__deckel {
	display: grid;
	justify-items: start;
	gap: var(--ge-space-s);
	padding: var(--ge-space-l);
}

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

.ge-karte__adresse {
	display: grid;
	gap: var(--ge-space-3xs);
	font-style: normal;
	font-weight: var(--ge-gewicht-text-kraeftig);
}

.ge-karte__hinweis {
	max-width: 52ch;
	font-size: var(--ge-klein);
	color: var(--ge-text-leise);
}

.ge-karte__rahmen {
	display: block;
	width: 100%;
	height: clamp(280px, 42vh, 460px);
	border: 0;
}

.ge-karte--geladen {
	border-color: var(--ge-linie);
}

/* ===================================================================
 * Team-Seite
 * ================================================================= */
.ge-team__bild {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	margin-block-start: var(--ge-space-l);
	border-radius: var(--ge-radius-flaeche);
}

.ge-meldung--warnung {
	background: var(--ge-akzent);
	/*
	 * Ohne eigene Farbe erbt die Meldung die Textfarbe und kommt auf
	 * der Akzentflaeche auf 2,37:1. Mit Blau waren es 2,51:1, der
	 * Fehler ist also aelter als der Farbwechsel. Die Schrift fuer
	 * Akzentflaechen erreicht 7,49:1.
	 */
	color: var(--ge-akzent-text);
	border-inline-start-color: var(--ge-text);
}

/* ===================================================================
 * Fehlerseite
 * ================================================================= */
.ge-vierhundert {
	display: grid;
	gap: 0;
	margin-block-start: var(--ge-space-xl);
	border-block-start: var(--ge-haarlinie) solid var(--ge-linie);
}

.ge-vierhundert__posten {
	display: grid;
	gap: var(--ge-space-3xs);
	padding-block: var(--ge-space-m);
	border-block-end: var(--ge-haarlinie) solid var(--ge-linie);
}

@media (min-width: 640px) {
	.ge-vierhundert__posten {
		grid-template-columns: 220px 1fr;
		gap: var(--ge-space-l);
		align-items: baseline;
	}
}

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

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

.ge-vierhundert__posten:hover .ge-vierhundert__name {
	background-image: linear-gradient(var(--ge-akzent), var(--ge-akzent));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 100% var(--ge-fokus-breite);
}

/* ===================================================================
 * Abbestellte Bewegung
 *
 * Die globale Bremse in base.css kuerzt jede Animation auf eine
 * Millisekunde. Das reicht technisch, laesst aber den Endzustand vom
 * Zufall abhaengen. Hier steht er ausdruecklich: die Scanlinie auf
 * der obersten Karte des Etikettenstapels bleibt stehen, statt zu
 * wandern. Damit bleibt die Aussage erhalten, dass diese Karte
 * gerade gescannt wird.
 * ================================================================= */
@media (prefers-reduced-motion: reduce) {
	.ge-stapel__scan {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

/* ===================================================================
 * Teamkarten, drei statt zwei
 *
 * Bild oben, Text darunter, gleiche Hoehe. Unter 900px stehen die
 * Karten untereinander. Die alte Aufteilung mit Bild links und Text
 * rechts traegt bei drei Karten nicht mehr, dafuer bleibt in einer
 * Spalte keine Textbreite uebrig.
 * ================================================================= */
.ge-team {
	display: grid;
	gap: var(--ge-space-l);
	margin-block-start: var(--ge-space-xl);
	align-items: stretch;
}

@media (min-width: 900px) {
	.ge-team {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.ge-person {
	display: flex;
	flex-direction: column;
	gap: var(--ge-space-m);
	grid-template-columns: none;
}

.ge-person__bild {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: top center;
	border-radius: var(--ge-radius-flaeche);
}

.ge-person__text {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.ge-person__name {
	margin-block: var(--ge-space-2xs) var(--ge-space-s);
}

/* Die Mono-Zeile sitzt am Fuss der Karte, damit die Reihe ruhig bleibt */
.ge-person__mono {
	margin-block-start: auto;
	padding-block-start: var(--ge-space-m);
}