.mh_section {
	padding: 90px 0;
}

/* Theme demo default is an animated green->yellow gradient, which clashes with
   the site's black/white/green CI. Pin it to the same green used by the
   benefit icons (.sc_icons_accent) instead, no animation. */
.gradient_anim {
	background: none !important;
	-webkit-text-fill-color: var(--mh-gruen, #70af69) !important;
	color: var(--mh-gruen, #70af69) !important;
	animation: none !important;
}

.mh_section_inner {
	max-width: 1290px;
	margin: 0 auto;
	padding: 0 75px;
}

.mh_eyebrow {
	display: block;
	font-size: var(--mh-t7);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #68696d;
	margin-bottom: 14px;
	font-weight: 600;
}

.mh_section_header h2 {
	font-size: var(--mh-t2);
	font-weight: 700;
	margin: 0 0 16px;
	max-width: 700px;
	line-height: 1.15;
}

.mh_section_header p {
	font-size: var(--mh-t5);
	color: #555;
	max-width: 560px;
	margin: 0;
	line-height: 1.6;
}

/* "Alle ansehen", "Alle Leistungen": Der Verweis hatte gar keine eigene
   Groesse und erbte die Grundschrift des Themes - auf dem Desktop 17px, auf
   dem Handy 16px, also eine Groesse, die es sonst nirgends gibt. */
.mh_section_cta {
	font-size: var(--mh-t5);
}

.mh_section_header_row {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 30px;
	flex-wrap: wrap;
	margin-bottom: 40px;
}

.mh_section_cta {
	display: inline-block;
	margin-top: 32px;
	font-weight: 600;
	text-decoration: none;
	color: #111;
	padding-bottom: 2px;
}

/* Leistungen section, pechschwarz-style: full-bleed dark rows, each with a
   bold title + pill CTA on the left and a description on the right. The
   whole section (including the heading above the rows) is black, so the
   dark background starts right at the section boundary, not partway in. */
.mh_section.mh_services {
	background: #16171a;
}

/* Frueher wurde hier der Innenabstand der Kopfzeile entfernt, damit sie zu den
   Zeilen passt, die ueber die vollen 1290px liefen. Beide standen damit zwar
   buendig zueinander — aber 75px weiter aussen als jeder andere Abschnitt der
   Seite. Gemessen: Leistungen begannen bei x=-12, alles uebrige bei x=63.
   Jetzt richten sich die Zeilen nach dem Seitenraster, nicht umgekehrt. */

.mh_section.mh_services .mh_eyebrow {
	color: #8a8a8a;
}

.mh_section.mh_services .mh_section_header h2 {
	color: #fff;
}

.mh_section.mh_services .mh_section_header p {
	color: #c9c9c9;
	font-size: var(--mh-t4);
	letter-spacing: -0.01em;
}

.mh_section.mh_services .mh_section_cta {
	color: #fff;
	border-bottom-color: #fff;
	font-size: var(--mh-t6);
}

/* Der Verweis auf alle Leistungen - auf dem Handy ein Knopf unter der Liste
   ------------------------------------------------------------------------
   Oben rechts neben der Ueberschrift steht er auf dem Desktop richtig. Auf dem
   Handy landet er dort mitten im Lesefluss: erst die Ansage, dann drei
   Leistungen, und der Weg weiter ist laengst nach oben gescrollt. Deshalb
   erscheint er dort unter der Liste, mittig und als Knopf.

   Warum ein zweiter Verweis im Markup und kein Verschieben per CSS: Der obere
   steckt zwei Ebenen tief in .mh_section_inner, die Liste liegt in einem
   Geschwisterelement daneben. Um ihn per Reihenfolge unter die Liste zu
   bekommen, muessten beide Zwischenebenen mit display: contents aufgeloest
   werden - und damit faellt der Innenabstand weg, an dem der ganze Abschnitt
   auf der Inhaltskante haengt. Es ist immer genau einer von beiden sichtbar.
   Aussehen und Ueberfahren kommen aus hover-knopf.css. */
.mh_services_fuss_cta {
	display: none;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	width: max-content;
	max-width: 100%;
	margin: 0 auto;
	padding: 16px 30px;
	border-radius: 999px;
	font-size: var(--mh-t6);
	font-weight: 600;
	line-height: 1;
	text-decoration: none !important;
}

/* Scroll runway: provides the scroll distance for the sticky panel above.
   JS divides this height into equal slots — one per service row. */
.mh_services_outer {
	position: relative;
}

/* Frueher war dies eine Scroll-Ziehharmonie: ein hoher Laufweg, ein klebendes
   Panel und ein Skript, das pro Bild Hoehen und Deckkraft gesetzt hat. Jetzt
   steht alles auf einmal da — kein Laufweg, kein sticky, keine festen Hoehen.
   services-scroll.js ist deshalb aus dem Layout ausgehaengt und beim
   Aufraeumen aus dem Projekt entfernt worden (Sicherung im Scratchpad unter
   unbenutzt-backup/assets/). Soll der Effekt zurueck, kommt die Datei von
   dort. */
.mh_services_rows {
	background: #16171a;
	padding: 0;
}

.mh_services_row_wrap {
	height: auto;
}

.mh_services_row {
	display: grid;
	grid-template-columns: 400px 1fr;
	gap: 48px;
	align-items: start;
	padding: 46px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	/* 1140px = 1290px Rasterbreite abzueglich zweimal 75px Innenabstand —
	   dieselbe Textbreite wie in allen anderen Abschnitten. */
	max-width: 1140px;
	margin: 0 auto;
	background: #16171a;
}

/* Immer sichtbar: die Deckkraft von 0 war Teil der Ziehharmonie.
   Nur noch eine Spalte — die Videospalte ist entfallen. */
.mh_services_row_body {
	display: block;
}

.mh_services_media {
	width: 100%;
	height: var(--mh-media-h, 280px);
	overflow: hidden;
	background: #000;
	flex-shrink: 0;
}

.mh_services_media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/* Same treatment as the hero video, so it reads as one consistent visual
	   language instead of two differently-graded clips. */
	filter: grayscale(1) contrast(1.1) brightness(0.85);
}

.mh_services_row_head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.mh_services_row_head h3 {
	font-size: var(--mh-t3);
	font-weight: 700;
	color: #fff;
	margin: 0;
}

.mh_services_btn {
	display: inline-flex;
	align-items: center;
	height: 58px;
	padding: 0 26px;
	background: #fff;
	color: #16171a;
	border-radius: 999px;
	text-decoration: none;
	font-size: var(--mh-t6);
	font-weight: 600;
	transition: opacity 0.2s ease;
}

.mh_services_btn:hover {
	opacity: 0.75;
}

.mh_services_row p {
	/* Der Text ist der einzige Inhalt der rechten Spalte, seit Video und Knopf
	   weg sind — er darf entsprechend traeger und ruhiger gesetzt sein. */
	font-size: var(--mh-t4);
	color: #c9c9c9;
	line-height: 1.5;
	letter-spacing: -0.01em;
	margin: 0;
	max-width: 46ch;
}

.mh_projects_list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}

.mh_process {
	background: #fafafa;
}

.mh_process_grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px;
	margin-top: 50px;
}

.mh_process_item {
	padding-top: 24px;
	border-top: 1px solid #e2e2e2;
}

.mh_process_num {
	display: block;
	font-size: var(--mh-t7);
	font-weight: 700;
	color: #68696d;
	margin-bottom: 18px;
}

.mh_process_item h3 {
	font-size: var(--mh-t4);
	font-weight: 700;
	margin: 0 0 10px;
	line-height: 1.3;
}

.mh_process_item p {
	font-size: var(--mh-t6);
	color: #555;
	line-height: 1.6;
	margin: 0;
}

/* Der Ablauf als eine Schiene
   ==========================
   Vorher hatte jeder der vier Schritte seinen eigenen Strich - vier Striche
   mit drei Luecken dazwischen. Das liest sich wie vier Kaesten, obwohl es ein
   durchgehender Weg ist. Jetzt laeuft eine Linie ueber die ganze Breite, jeder
   Schritt bekommt einen Punkt darauf, und beim Ueberfahren laedt sich die
   Linie bis zur Maus auf; die Punkte, an denen sie vorbeikommt, springen an.

   Nur ab 901px: darunter stehen die Schritte in zwei Spalten oder
   untereinander, eine waagerechte Schiene haette dort nichts zu verbinden.
   Dort bleibt der Strich pro Schritt.

   Die Fuellung wird ueber --ablauf-fortschritt (0 bis 1) gesteuert, gesetzt
   von ablauf-linie.js. Ohne das Skript bleibt der Wert 0: dann steht eine
   ruhige durchgezogene Linie mit vier Punkten da - genau so gedacht, nur ohne
   Rueckmeldung. */
@media (min-width: 901px) {
	.mh_process_grid {
		position: relative;
		/* 0 bis 1, gesetzt von ablauf-linie.js. Ohne das Skript bleibt der Wert
		   0: dann steht eine ruhige durchgezogene Linie mit vier Punkten da -
		   genau so gedacht, nur ohne Rueckmeldung. */
		--ablauf-fortschritt: 0;
	}

	/* Grundlinie und Fuellung liegen uebereinander auf der Oberkante. */
	.mh_process_grid::before,
	.mh_process_grid::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
	}

	.mh_process_grid::before {
		height: 1px;
		background: #e2e2e2;
	}

	.mh_process_grid::after {
		height: 2px;
		top: -0.5px;
		background: var(--mh-gruen, #70af69);
		/* scaleX statt width: eine Breitenaenderung zwingt den Browser in jedem
		   Bild zu einer neuen Layoutberechnung, eine Skalierung nicht. */
		transform: scaleX(var(--ablauf-fortschritt));
		transform-origin: left center;
		will-change: transform;
		transition: transform 380ms cubic-bezier(0.33, 1, 0.68, 1);
	}

	.mh_process_item {
		position: relative;
		/* Ohne das laeuft die gruene Fuellung VOR dem Kreis durch.
		   Grund: Die Schritte tragen .reveal-manual, das mit opacity und
		   transform arbeitet - jeder Schritt macht damit einen eigenen
		   Stapelkontext auf. Das z-index: 1 am Kreis wirkt dann nur noch
		   innerhalb seines Schrittes, und der Schritt selbst steht ohne
		   z-index vor der Fuellung im Dokument, wird also frueher gezeichnet.
		   Mit z-index: 1 am Schritt liegt er samt Kreis ueber der Linie. */
		z-index: 1;
		border-top: 0;
		/* Platz fuer die untere Haelfte des Kreises plus Abstand zur
		   Ueberschrift. Der Abschnitt wird trotzdem niedriger als vorher: Die
		   Ziffernzeile stand frueher mit 14px Schrift und 18px Abstand im
		   Fluss - rund 35px, die jetzt wegfallen. */
		padding-top: 34px;
	}

	/* Die Ziffer IST der Haltepunkt: ein Kreis, der auf der Linie sitzt.
	   Vorher lief die Ziffer als eigene Zeile unter der Linie mit und der
	   Haltepunkt war ein reiner Punkt daneben - zwei Zeichen fuer dieselbe
	   Sache. Der Kreis deckt die Linie ab (Fuellung in der Abschnittsfarbe),
	   dadurch wirkt er wie eine Station auf einer Strecke. */
	.mh_process_num {
		position: absolute;
		top: 0;
		left: 0;
		width: 34px;
		height: 34px;
		/* Ohne border-box addiert sich die 1px-Kante auf die Groesse. Auf der
		   Startseite greift die border-box-Regel von Elementor, auf der
		   Content-Marketing-Seite nicht - gemessen 34px hier, 36px dort. */
		box-sizing: border-box;
		margin: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		border: 1px solid #e2e2e2;
		background: #fafafa;
		/* 13px, nicht mehr 12: Die 12 waren fuer die zweistellige "01"
		   gewaehlt. Eine einzelne Ziffer traegt weniger, im 34px-Kreis wirkte
		   sie dadurch verloren. */
		font-size: var(--mh-t7);
		font-weight: 700;
		line-height: 1;
		color: #68696d;
		transform: translateY(-50%);
		z-index: 1;
		transition:
			background-color 260ms ease,
			border-color 260ms ease,
			color 260ms ease,
			box-shadow 260ms ease;
	}

	/* Erreicht: der Kreis uebernimmt die Farbe der Linie und bekommt einen
	   weichen Hof - dieselbe Machart wie der Schein unter den Schaltflaechen. */
	.mh_process_item.ist-erreicht .mh_process_num {
		background: var(--mh-gruen, #70af69);
		border-color: var(--mh-gruen, #70af69);
		color: #fff;
		box-shadow: 0 0 0 5px rgba(112, 175, 105, 0.18);
	}

	@media (prefers-reduced-motion: reduce) {
		.mh_process_grid::after,
		.mh_process_num {
			transition: none;
		}
	}
}

/* Handy und Tablet: die Ziffer vor die Ueberschrift
   ================================================
   Waagerecht laesst sich hier nichts verbinden - die Schritte stehen in zwei
   Spalten oder untereinander, die Schiene gilt erst ab 901px. Statt die Ziffer
   als eigene Zeile ueber die Ueberschrift zu setzen (das kostet eine Zeile pro
   Schritt), steht sie jetzt davor, wie bei einer nummerierten Liste.

   Warum ein Raster und keine Aufzaehlung: Im Markup stehen Ziffer, Ueberschrift
   und Absatz als Geschwister. Das Raster setzt die Ziffer in die erste Spalte
   und laesst Ueberschrift und Text daneben stehen - der Absatz beginnt damit
   unter der Ueberschrift und nicht unter der Ziffer.

   align-items: baseline, damit die Ziffer auf der Grundlinie der ersten
   Ueberschriftzeile sitzt und nicht auf der Oberkante ihres Kastens. */
@media (max-width: 900px) {
	.mh_process_item {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: 12px;
		align-items: baseline;
	}

	.mh_process_num {
		grid-column: 1;
		grid-row: 1;
		margin-bottom: 0;
	}

	.mh_process_item h3 {
		grid-column: 2;
		grid-row: 1;
	}

	/* Der Absatz laeuft unter der Ueberschrift weiter, eingerueckt wie diese -
	   der Abstand kommt aus dem margin-bottom der Ueberschrift. */
	.mh_process_item p {
		grid-column: 2;
		grid-row: 2;
	}
}

.mh_faq {
	border-top: 1px solid #ececec;
}

/* FAQ-Akkordeon nach dem Vorbild von schwarz-matt.com: die Fragen laufen ueber
   die volle Breite und stehen gross und leicht (20px/400 statt 17px/600), mit
   viel Luft darueber. Die Antwort bricht dagegen bei rund 620px um.
   Gemessen hat schwarz-matt 40px Vorlauf ueber der Frage und eine Antwortspalte
   von 493px bei 1265px Seitenbreite — eine Frage soll man ueberfliegen koennen,
   einen Antworttext liest man Zeile fuer Zeile, und dafuer sind volle 1140px
   deutlich zu breit. */
.mh_faq_accordion {
	margin-top: 46px;
}

.mh_faq_accordion summary {
	padding: 34px 0 26px;
	font-size: var(--mh-t4);
	font-weight: 400;
	line-height: 1.4;
	gap: 28px;
	align-items: flex-start;
}

/* Das Zeichen sitzt bei mehrzeiligen Fragen sonst mittig neben dem Textblock
   statt auf Hoehe der ersten Zeile. Die Fragen stehen hier in --mh-t4 auf
   Zeilenhoehe 1.4; die Mitte der ersten Zeile liegt damit rund 13px unter der
   Oberkante, das 14px hohe Kaestchen also 6px darunter. */
.mh_faq_accordion summary::after {
	flex: 0 0 auto;
	margin-top: 6px;
}

.mh_faq_accordion .proj_accordion_content {
	max-width: 620px;
	padding-bottom: 34px;
}

.mh_faq_accordion .proj_accordion_content p {
	margin: 0;
	font-size: var(--mh-t5);
	line-height: 1.7;
	color: #55565a;
}

.mh_faq_accordion .proj_accordion_content p + p {
	margin-top: 16px;
}

/* Der Agenturtext unter den Fragen
   -------------------------------
   Er stand urspruenglich direkt unter dem Slogan am Seitenanfang. Dort
   konkurrierte er mit dem Anspruch darueber: zwei Textblocks gleich zu
   Beginn, von denen der zweite niemanden weiterbringt, der die Seite gerade
   erst aufgemacht hat. Am Ende der Fragen steht er dagegen genau richtig -
   wer bis hierher gelesen hat, will wissen, mit wem er es zu tun hat.

   Zwei Spalten wie zuvor: ueber die volle Breite waeren es rund 150 Zeichen
   je Zeile. Die Trennlinie schliesst die Fragen ab. */
.mh_faq_agentur {
	margin-top: 56px;
	padding-top: 44px;
	border-top: 1px solid #ececec;
}

.mh_faq_agentur h3 {
	margin: 0 0 20px;
	font-size: var(--mh-t4);
	font-weight: 600;
	line-height: 1.3;
	color: #16171a;
}

.mh_faq_agentur p {
	margin: 0;
	font-size: var(--mh-t5);
	line-height: 1.7;
	color: #55565a;
	break-inside: avoid;
}

.mh_faq_agentur p + p {
	margin-top: 1.7em;
}

@media (min-width: 900px) {
	.mh_faq_agentur {
		columns: 2;
		column-gap: 80px;
	}
	/* Die Ueberschrift laeuft ueber beide Spalten, sonst stuende sie als
	   schmaler Kopf nur ueber der linken. */
	.mh_faq_agentur h3 {
		column-span: all;
	}
}

.mh_faq_accordion .proj_accordion_content strong {
	font-weight: 600;
	color: #16171a;
}

@media (max-width: 767px) {
	.mh_faq_accordion summary {
		padding: 24px 0 18px;
		gap: 18px;
	}
	.mh_faq_accordion .proj_accordion_content {
		padding-bottom: 24px;
	}
}

@media (max-width: 900px) {
	.mh_section.mh_services .mh_section_header .mh_section_cta {
		display: none;
	}

	.mh_services_fuss_cta {
		display: flex;
		margin-top: 34px;
	}

	.mh_services_rows {
		padding: 10px 24px;
	}
	.mh_services_row {
		grid-template-columns: 1fr;
		gap: 20px;
		padding: 34px 0;
	}
	/* Der Koerper behielt bisher seine zweite Spalte mit festen 400px fuer das
	   Video. Auf 375px Bildschirmbreite blieben dem Text dadurch 105px — jedes
	   Wort in einer eigenen Zeile. Untereinander statt nebeneinander. */
	.mh_services_row_head {
		gap: 20px;
	}
	.mh_projects_list {
		grid-template-columns: 1fr;
	}
	.mh_process_grid {
		grid-template-columns: 1fr 1fr;
		gap: 30px;
	}
	.mh_section_inner {
		padding: 0 24px;
	}
	.mh_section {
		padding: 60px 0;
	}
}

@media (max-width: 560px) {
	.mh_process_grid {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------------
   Kunden & Partner — logo grid
   Modelled on pechschwarz.com's wall, inspected live: a plain grid (5 columns
   desktop, 3 mobile), uniform 16:9 cells, object-contain, logos at full
   strength, and a spotlight hover where the whole grid dims and only the
   hovered mark stays lit.
   Light background on purpose: several of these logos are black plates with
   knocked-out white type. On a dark ground the plate vanishes and the white
   type floats free.
   --------------------------------------------------------------------------- */
.mh_section.mh_clients {
	background: #fff;
}

.mh_clients .mh_section_header {
	margin-bottom: 44px;
}

.mh_clients_grid {
	/* 18 logos, 6 per row: 6/6/6 — three full rows. 18 divides by 6, 3 and 2,
	   so every breakpoint comes out even (see the tablet/phone rules).
	   Gap trimmed to 14px here: at six columns the cards are only ~178px and
	   card width is what caps the wide wordmarks, so every pixel counts. */
	--mh-clients-cols: 6;
	--mh-clients-gap: 14px;
	display: flex;
	flex-wrap: wrap;
	/* Centred so the short last row sits in the middle instead of hanging
	   left. We have 17 logos — a prime, so every column count leaves an
	   incomplete final row. pechschwarz sidesteps this with exactly 15. */
	justify-content: center;
	gap: var(--mh-clients-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mh_clients_item {
	flex: 0 0 calc(
		(100% - (var(--mh-clients-cols) - 1) * var(--mh-clients-gap))
		/ var(--mh-clients-cols)
	);
	/* Zwingend border-box: die Flex-Basis oben rechnet die Spaltenbreite exakt
	   aus Gitterbreite und Abstand aus. Mit content-box kaeme das Innenabstand
	   noch obendrauf, die Zeile liefe ueber und es passten nur 5 statt 6 Logos
	   hinein — genau die unregelmaessige letzte Zeile, die vermieden werden soll. */
	box-sizing: border-box;
	aspect-ratio: 16 / 9;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Tighter left/right than top/bottom: width is the binding constraint for
	   the wide wordmarks (an 8.9:1 mark can only be as tall as the card is
	   wide divided by 8.9), while vertical room is never the limit. */
	padding: 16px 11px;
	background: #f4f4f4;
	border-radius: 12px;
	transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
	            background 0.4s cubic-bezier(0.4, 0, 0.2, 1),
	            transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Spotlight: hovering the grid dims every cell, the hovered one comes back
   to full, lifts, and its mark deepens from grey to full black. */
.mh_clients_grid:hover .mh_clients_item {
	opacity: 0.4;
}

.mh_clients_grid .mh_clients_item:hover {
	opacity: 1;
	background: #ededed;
	transform: translateY(-3px);
}

.mh_clients_grid .mh_clients_item:hover img {
	opacity: 1;
}

.mh_clients_item img {
	/* --logo-h is per logo, derived from each file's real aspect ratio.
	   pechschwarz can use a blunt object-contain because every asset they
	   serve is pre-normalised to 256x152; ours range from 8.9:1 to 0.86:1,
	   so a uniform box would let the wide wordmarks dwarf the square marks.
	   max-* rather than a fixed height: with both caps and auto dimensions
	   the browser scales down proportionally, so a very wide mark that would
	   overrun the card narrows without being squashed. */
	max-height: var(--logo-h, 48px);
	max-width: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	/* The source logos are solid black; pechschwarz ships theirs already
	   grey. Fading black over the #f4f4f4 card reproduces that tone — 0.5
	   lands near #7a7a7a, which still reads on the thin wide wordmarks that
	   the card width squeezes down to ~20px tall. */
	opacity: 0.5;
	transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 1024px) {
	.mh_clients_grid {
		/* 3 — 18 divides evenly into it (6 full rows). */
		--mh-clients-cols: 3;
		--mh-clients-gap: 14px;
	}
	.mh_clients_item img {
		max-height: calc(var(--logo-h, 48px) * 0.9);
	}
}

@media (max-width: 560px) {
	.mh_clients_grid {
		--mh-clients-cols: 2;
	}
	.mh_clients_item {
		padding: 12px;
		border-radius: 10px;
	}
	.mh_clients_item img {
		max-height: calc(var(--logo-h, 48px) * 0.78);
	}
}

/* Touch devices get no hover, so the dimming would be dead weight — and on
   some of them :hover sticks after a tap, leaving the grid stuck at 32%. */
@media (hover: none) {
	.mh_clients_grid:hover .mh_clients_item {
		opacity: 1;
	}
	.mh_clients_grid .mh_clients_item:hover {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mh_clients_item {
		transition: none;
	}
	.mh_clients_grid .mh_clients_item:hover {
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
   Footer
   Contact data taken from the Impressum (the only authoritative source in the
   project): Marketinghasen UG (haftungsbeschränkt), Märkischer Ring 1,
   58097 Hagen, 02331/3068685, hello@marketinghasen.de, USt-IdNr DE456786594.
   Loaded via Base.astro, so this applies on every page.
   --------------------------------------------------------------------------- */
.mh_footer {
	background: #16171a;
	color: rgba(255, 255, 255, 0.62);
	padding: 84px 0 34px;
}

.mh_footer_inner {
	max-width: 1290px;
	margin: 0 auto;
	padding: 0 75px;
}

/* --- claim + call to action --- */
.mh_footer_top {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 32px;
	flex-wrap: wrap;
	padding-bottom: 52px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mh_footer_claim {
	margin: 0;
	font-family: 'Sora', sans-serif;
	font-size: var(--mh-t1);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.025em;
	color: #fff;
}

.mh_footer_cta {
	flex: 0 0 auto;
	display: inline-block;
	padding: 15px 30px;
	border-radius: 999px;
	background: #fff;
	color: #16171a;
	font-weight: 600;
	font-size: var(--mh-t6);
	text-decoration: none;
}

/* --- the five info columns --- */
.mh_footer_grid {
	display: grid;
	/* The address needs more room than the link lists — an even split left it
	   breaking mid-word while the short lists sat in half-empty columns. */
	grid-template-columns: 1.5fr 1.3fr 1.3fr 1fr 1.15fr;
	gap: 44px 40px;
	padding: 52px 0;
}

.mh_footer_head {
	margin: 0 0 18px;
	font-family: 'Sora', sans-serif;
	font-size: var(--mh-t7);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
}

.mh_footer_address {
	font-style: normal;
	font-size: var(--mh-t6);
	line-height: 1.75;
}

.mh_footer_legalform {
	font-size: var(--mh-t7);
	color: rgba(255, 255, 255, 0.45);
}

.mh_footer_list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--mh-t6);
	line-height: 1.75;
}

.mh_footer_list li + li {
	margin-top: 9px;
}

.mh_footer_list a {
	color: rgba(255, 255, 255, 0.62);
	text-decoration: none;
	transition: color 0.25s ease;
}

.mh_footer_list a:hover,
.mh_footer_list a[aria-current="page"] {
	color: #fff;
}

/* Marks the page you are on — Footer0*.astro injects aria-current. */
.mh_footer_list a[aria-current="page"] {
	font-weight: 600;
}

/* Two-part rows so the times line up under each other instead of running on. */
.mh_footer_hours li {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.mh_footer_hours li > span:first-child {
	flex: 0 0 66px;
	color: rgba(255, 255, 255, 0.45);
}

.mh_footer_closed {
	color: rgba(255, 255, 255, 0.4);
}

/* --- bottom bar --- */
.mh_footer_bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	padding-top: 30px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-size: var(--mh-t7);
	color: rgba(255, 255, 255, 0.42);
}

@media (max-width: 1024px) {
	.mh_footer {
		padding-top: 64px;
	}
	.mh_footer_inner {
		padding: 0 24px;
	}
	.mh_footer_grid {
		grid-template-columns: 1fr 1fr;
		gap: 38px 32px;
	}
}

@media (max-width: 560px) {
	.mh_footer_top {
		align-items: flex-start;
		flex-direction: column;
		gap: 26px;
		padding-bottom: 38px;
	}
	.mh_footer_grid {
		grid-template-columns: 1fr;
		gap: 32px;
		padding: 38px 0;
	}
	.mh_footer_bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
}

/* Theme overrides.
   The theme styles the footer through `[class*="scheme_"].footer_wrap a`
   — specificity (0,2,1). A single class of ours loses to that, and so does
   `.mh_footer .mh_footer_cta` (0,2,0): the bare type selector `a` decides it.
   Chaining our own class onto .footer_wrap and qualifying the link with `a`
   gets us to (0,3,1), which wins on merit rather than with !important. */

/* Without this the CTA label inherited .scheme_dark's link colour (#f8f8f8)
   on a white pill — white on white, so the button rendered blank. */
.mh_footer.footer_wrap a.mh_footer_cta {
	color: #16171a;
}

/* Same battle for the column links. */
.mh_footer.footer_wrap .mh_footer_list a {
	color: rgba(255, 255, 255, 0.62);
}

.mh_footer.footer_wrap .mh_footer_list a:hover,
.mh_footer.footer_wrap .mh_footer_list a[aria-current="page"] {
	color: #fff;
}

/* The theme paints the footer #191919 while the services section is #16171a.
   Two near-blacks on one page read as a mistake rather than a choice. */
footer.mh_footer.footer_wrap {
	background: #16171a;
}

/* ---------------------------------------------------------------------------
   Referenzen auf der Startseite — nach pechschwarz.com, live ausgemessen:
   2 Spalten à 636px (gap 32/24), Medien im Verhältnis 4:3 mit object-fit:cover
   und OHNE Eckenradius, Titel 24px/500, Tags als umrandete Pillen darunter.
   Die erste Karte läuft dort über die volle Breite — bei drei Projekten ergibt
   das genau 1 + 2, also keine Restlücke.
   Alles auf .mh_projects begrenzt, damit die Portfolio-Seite (.ref_card wird
   dort ebenfalls verwendet) unverändert bleibt.
   --------------------------------------------------------------------------- */
.mh_projects .mh_projects_list {
	grid-template-columns: repeat(2, 1fr);
	gap: 34px 24px;
}

.mh_projects .ref_card {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.mh_projects .ref_card_media {
	aspect-ratio: 4 / 3;
	border-radius: 0;
	margin-bottom: 0;
}

.mh_projects .ref_card_title {
	font-size: var(--mh-t3);
	/* Die Vorlage setzt die Projekttitel bewusst leicht — sie sollen neben
	   den Tags stehen, nicht mit der Sektionsüberschrift konkurrieren. */
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

/* Tags sitzen zwischen Medium und Titel. */
.mh_projects .ref_card_tags {
	margin-bottom: 0;
	gap: 8px;
}

/* In dieser Karte regelt der Abstand die Luecke (gap: 14px), ein eigener
   Fussabstand am Namen wuerde sich dazuaddieren. */
.mh_projects .ref_card_title {
	margin-top: -2px;
	margin-bottom: 0;
}

@media (max-width: 900px) {
	/* Muss die Spezifität der Desktop-Regel oben erreichen, sonst bliebe es
	   auch auf dem Handy zweispaltig. */
	.mh_projects .mh_projects_list {
		grid-template-columns: 1fr;
		gap: 30px;
	}
}

/* Alle Karten gleich groß in zwei Spalten — kein Aufmacher. Entspricht der
   Vorlage, die der User gezeigt hat (Makita / Martor / Skapetze / WebID). */
.mh_projects .mh_projects_list {
	grid-template-columns: repeat(2, 1fr);
}

/* Video wird von ref-video.js erst beim Sichtbarwerden erzeugt und liegt
   dann über dem Poster. Beide füllen die Medienfläche identisch, damit beim
   Umschalten nichts springt. */
.mh_projects .ref_card_video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 0;
	transition: opacity 0.45s ease;
}

/* Erst wenn wirklich Bild kommt ('playing'), wird überblendet. */
.mh_projects .ref_card_media.is-playing .ref_card_video {
	opacity: 1;
}

@media (max-width: 900px) {
	.mh_projects .mh_projects_list {
		grid-template-columns: 1fr;
	}

}

/* conkosa hat kein Poster (nur ein Video im Ordner) — dunkler Grund, damit
   vor dem ersten Frame kein leeres helles Feld steht. */
.mh_projects .ref_card_media--kein-poster {
	background: #16171a;
}
/* Logowand als zwei gegenlaeufige Laufbaender
   ==========================================
   Obere Reihe wandert nach links, untere nach rechts. Der Umlauf ist nahtlos,
   weil jede Reihe ihren Satz Logos zweimal enthaelt und um exakt die halbe
   Spurbreite verschoben wird.

   Wichtig: der Abstand zwischen den Kacheln steckt in margin-right, NICHT in
   gap. Mit gap waere die halbe Spurbreite nicht identisch mit einem vollen
   Satz (bei 18 Kacheln waeren es 9 Kacheln + 8,5 Abstaende statt 9 + 9), und
   der Sprung am Schleifenende waere sichtbar. Mit margin-right belegt jede
   Kachel exakt Breite + Abstand, die Rechnung geht auf. */
.mh_clients .mh_logowand {
	margin-top: 46px;
	/* Bis an den Bildschirmrand: die Baender sollen aus dem Bild heraus- und
	   hineinlaufen, sonst wirkt die Bewegung wie ein Karussell mit Anschlag. */
	overflow: hidden;

	/* Der Rand arbeitet mit ZWEI Effekten uebereinander, so wie in der Vorlage:
	   die Kacheln werden zum Rand hin durchsichtig UND unscharf. Nur
	   ausblenden sah zu sauber aus, nur weichzeichnen zu schmutzig. */
	position: relative;
}

/* Die Ausblendmaske sitzt auf den Reihen, nicht auf dem Rahmen. Laege sie auf
   dem Rahmen, wuerden die Unschaerfe-Schleier darin gleich mit ausgeblendet —
   und ausgerechnet am aeussersten Rand, wo die Unschaerfe am staerksten sein
   soll, bliebe nichts uebrig. */
.mh_logowand_reihe {
	-webkit-mask-image: linear-gradient(to right,
		rgba(0,0,0,0) 0%, rgba(0,0,0,0.10) 3.5%, rgba(0,0,0,0.35) 7%,
		rgba(0,0,0,0.68) 11%, rgba(0,0,0,0.92) 13%, rgba(0,0,0,1) 15%,
		rgba(0,0,0,1) 85%, rgba(0,0,0,0.92) 87%, rgba(0,0,0,0.68) 89%,
		rgba(0,0,0,0.35) 93%, rgba(0,0,0,0.10) 96.5%, rgba(0,0,0,0) 100%);
	mask-image: linear-gradient(to right,
		rgba(0,0,0,0) 0%, rgba(0,0,0,0.10) 3.5%, rgba(0,0,0,0.35) 7%,
		rgba(0,0,0,0.68) 11%, rgba(0,0,0,0.92) 13%, rgba(0,0,0,1) 15%,
		rgba(0,0,0,1) 85%, rgba(0,0,0,0.92) 87%, rgba(0,0,0,0.68) 89%,
		rgba(0,0,0,0.35) 93%, rgba(0,0,0,0.10) 96.5%, rgba(0,0,0,0) 100%);
}

/* Die beiden Unschaerfe-Schleier. backdrop-filter zeichnet weich, was hinter
   dem Element liegt — hier also die vorbeiziehenden Logos. Die eigene Maske
   laesst die Wirkung von aussen nach innen abklingen, sonst haette der
   Schleier eine sichtbare Kante. */
.mh_clients .mh_logowand::before,
.mh_clients .mh_logowand::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 15%;
	z-index: 2;
	pointer-events: none;
	-webkit-backdrop-filter: blur(7px);
	backdrop-filter: blur(7px);
}

.mh_clients .mh_logowand::before {
	left: 0;
	-webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,0.55) 45%, transparent 100%);
	mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,0.55) 45%, transparent 100%);
}

.mh_clients .mh_logowand::after {
	right: 0;
	-webkit-mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,0.55) 45%, transparent 100%);
	mask-image: linear-gradient(to left, #000 0%, rgba(0,0,0,0.55) 45%, transparent 100%);
}

@media (max-width: 767px) {
	.mh_logowand_reihe {
		-webkit-mask-image: linear-gradient(to right,
			rgba(0,0,0,0) 0%, rgba(0,0,0,0.30) 6%, rgba(0,0,0,0.80) 11%,
			rgba(0,0,0,1) 14%, rgba(0,0,0,1) 86%, rgba(0,0,0,0.80) 89%,
			rgba(0,0,0,0.30) 94%, rgba(0,0,0,0) 100%);
		mask-image: linear-gradient(to right,
			rgba(0,0,0,0) 0%, rgba(0,0,0,0.30) 6%, rgba(0,0,0,0.80) 11%,
			rgba(0,0,0,1) 14%, rgba(0,0,0,1) 86%, rgba(0,0,0,0.80) 89%,
			rgba(0,0,0,0.30) 94%, rgba(0,0,0,0) 100%);
	}
	.mh_clients .mh_logowand::before,
	.mh_clients .mh_logowand::after {
		width: 11%;
		-webkit-backdrop-filter: blur(4px);
		backdrop-filter: blur(4px);
	}
}

.mh_logowand_reihe {
	overflow: hidden;
}

.mh_logowand_reihe + .mh_logowand_reihe {
	margin-top: 18px;
}

.mh_logowand_spur {
	display: flex;
	width: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
	/* will-change haelt die Spur auf einer eigenen Ebene: die Animation laeuft
	   dann auf der Grafikkarte und nicht ueber Neuberechnungen des Layouts. */
	will-change: transform;
}

.mh_logowand_spur--links {
	animation: mh_band_links 78s linear infinite;
}

.mh_logowand_spur--rechts {
	animation: mh_band_rechts 78s linear infinite;
}

@keyframes mh_band_links {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@keyframes mh_band_rechts {
	from { transform: translateX(-50%); }
	to   { transform: translateX(0); }
}

/* Dauerbewegung ist fuer manche Menschen unertraeglich — bei entsprechender
   Systemeinstellung stehen die Baender still. */
@media (prefers-reduced-motion: reduce) {
	.mh_logowand_spur--links,
	.mh_logowand_spur--rechts {
		animation: none;
	}
}

.mh_logo_kachel {
	flex: 0 0 auto;
	width: 210px;
	height: 104px;
	margin-right: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px 22px;
	box-sizing: border-box;
	/* Weisse Karte mit Haarlinie statt grauer Flaeche: auf weissem Grund
	   braucht die Kachel eine Kante, sonst loest sie sich auf. */
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 14px;
}

.mh_logo_kachel img {
	/* --logo-h steckt je Logo inline und beruht auf dem echten
	   Seitenverhaeltnis der Datei — ohne diese Feinjustierung wuerden breite
	   Wortmarken die quadratischen Zeichen erschlagen.
	   Volle Farbe und volle Deckkraft: entsaettigt waren die Marken auf heller
	   Karte kaum noch zu erkennen. */
	max-height: var(--logo-h, 40px);
	max-width: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

@media (max-width: 767px) {
	.mh_logo_kachel {
		width: 168px;
		height: 84px;
		margin-right: 12px;
		padding: 12px 16px;
	}
	.mh_logowand_reihe + .mh_logowand_reihe {
		margin-top: 12px;
	}
}

/* Google-Bewertungen
   =================
   In der Machart der uebrigen Seite: weisse Karten mit Haarlinie und demselben
   Radius wie die Logokacheln. Farbe kommt allein aus dem Google-Logo und den
   Sternen — dadurch bleibt der Abschnitt ruhig und das Zeichen wirkt. */
.mh_google {
	padding-top: 0;
}

.mh_google_kopf {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	flex-wrap: wrap;
	margin-bottom: 34px;
}

.mh_google_kopf h2 {
	font-size: var(--mh-t2);
	font-weight: 700;
	margin: 0;
	line-height: 1.2;
}

.mh_google_wertung {
	display: flex;
	align-items: center;
	gap: 22px;
	flex: 0 0 auto;
}

.mh_google_logo {
	display: block;
	height: 26px;
	width: auto;
	flex: 0 0 auto;
}

.mh_google_zahlen p {
	margin: 4px 0 0;
	font-size: var(--mh-t6);
	color: #55565a;
	white-space: nowrap;
}

.mh_google_zahlen strong {
	color: #16171a;
	font-weight: 600;
}

/* Sterne als eingebettetes SVG: keine Zeichensatz-Abhaengigkeit und keine
   fremden Dateien. Google-Gelb, damit sie als Bewertung lesbar sind. */
.mh_sterne {
	display: inline-flex;
	gap: 2px;
}

.mh_sterne svg {
	width: 15px;
	height: 15px;
	fill: #fbbc05;
	display: block;
}

.mh_google_knopf {
	display: inline-flex;
	align-items: center;
	background: #16171a;
	color: #fff !important;
	border-radius: 999px;
	padding: 12px 22px;
	font-size: var(--mh-t6);
	text-decoration: none !important;
	white-space: nowrap;
	transition: opacity 0.2s ease;
}

.mh_google_knopf:hover {
	opacity: 0.82;
}

/* Waagerechte Bahn statt Raster - dieselbe Bedienung wie bei den Projekten:
   blaettern ueber die Pfeiltasten, wischen auf dem Handy, Endlosumlauf.
   Frueher war das ein dreispaltiges Raster; mehr als drei Stimmen passten
   damit gar nicht auf die Seite. */
.mh_rez_liste {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	scroll-behavior: smooth;
	padding-bottom: 4px;
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* Die Karten gleichen sich in der Hoehe an - stretch ist der
	   Standardwert und genau richtig; ein height:100% auf den Karten liesse
	   die Hoehen gegeneinander laufen (gemessen 750px statt Inhaltshoehe). */
	align-items: stretch;
}

.mh_rez_liste::-webkit-scrollbar {
	display: none;
}

.mh_rez_liste > .mh_rez {
	flex: 0 0 380px;
}

/* Der Verweis auf alle Bewertungen sass frueher in der Kopfzeile zwischen
   Note und Sternen - dort konkurrierte er mit der Bewertung selbst. Jetzt
   steht er unter den Stimmen, also dort, wo man nach dem Lesen ankommt. */
.mh_google_fuss {
	margin-top: 34px;
}

.mh_rez {
	/* Das Theme setzt auf jedes figure align-items:center — das zentriert in
	   einer Flex-Spalte alle Kinder waagerecht. text-align allein reicht dagegen
	   nicht, weil die Ausrichtung nicht vom Text kommt, sondern vom Flex-Layout. */
	align-items: flex-start;
	text-align: left;
	margin: 0;
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 20px;
	padding: 28px;
	display: flex;
	flex-direction: column;
}

.mh_rez blockquote {
	/* Das Theme gestaltet jedes blockquote als eigenen Kasten:
	   padding 2.75em/2.9em, Hintergrundfarbe und Radius. Ohne diese Ruecknahme
	   blieben von 356px Kartenbreite nur 211px Textbreite uebrig — der Text lief
	   dann auf 23 statt 10 Zeilen und die Karten wurden 750px hoch. */
	padding: 0;
	background: none !important;
	border-radius: 0;
	overflow: visible;
	margin: 16px 0 22px;
	font-size: var(--mh-t6);
	line-height: 1.65;
	color: #404145;
	quotes: "\201E" "\201C";
}

.mh_rez blockquote::before { content: open-quote; }
.mh_rez blockquote::after { content: close-quote; }

.mh_rez figcaption {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.mh_rez_name {
	font-size: var(--mh-t6);
	font-weight: 600;
	color: #16171a;
}

@media (max-width: 1000px) {
	.mh_rez_liste > .mh_rez {
		flex-basis: 320px;
	}
}

@media (max-width: 680px) {
	/* Breiter statt schmaler: Bei 284px auf einem 390er Schirm passten nur
	   vier bis fuenf Woerter in eine Zeile, eine laengere Bewertung wurde
	   dadurch ueber 600px hoch. Die Karte laeuft jetzt fast ueber die volle
	   Bahn; die 34px, die uebrig bleiben, zeigen die naechste Karte an und
	   machen sichtbar, dass es weitergeht. */
	/* Nach rechts ueber den Rand hinaus: Der Rand der Bahn bremst sonst die
	   Kartenbreite auf 300px. So sind es 328px - und die angeschnittene
	   naechste Karte sitzt am Bildrand statt im Textbereich. Links bleibt die
	   Kante stehen, damit die erste Karte auf einer Linie mit Ueberschrift
	   und Knopf beginnt. */
	.mh_rez_liste {
		margin-right: calc(var(--mh-rand, 28px) * -1);
	}

	.mh_rez_liste > .mh_rez {
		flex-basis: calc(100% - 34px);
	}
	.mh_google_kopf {
		gap: 24px;
	}
	.mh_google_wertung {
		flex-wrap: wrap;
		gap: 14px;
	}
}

/* Kopfzeile der Bewertungen: links Titel und Note, rechts die Pfeiltasten. */
.mh_google_kopf .proj_slider_knoepfe {
	flex: 0 0 auto;
}

.mh_google_kopf .proj_slider_knopf {
	border-color: rgba(22, 23, 26, 0.22);
	color: #16171a;
}

.mh_google_kopf .proj_slider_knopf:hover:not(:disabled),
.mh_google_kopf .proj_slider_knopf:focus-visible:not(:disabled) {
	background: var(--mh-gruen, #70af69);
	border-color: var(--mh-gruen, #70af69);
	color: #16171a;
}

/* --- Fehlerseite 404 ------------------------------------------------------
   Die Seite hatte weder Ueberschrift noch Struktur, nur zwei Saetze. Fuer
   Suchmaschinen war sie damit eine Seite ohne H1; fuer Besucher eine
   Sackgasse ohne Angebot, wie es weitergeht. */
.mh_fehler_block {
	box-sizing: border-box;
	max-width: 1290px;
	margin: 0 auto;
	padding: 150px 75px 120px;
}

.mh_fehler_block h1 {
	margin: 10px 0 18px;
	font-size: var(--mh-t1);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.mh_fehler_lead {
	margin: 0 0 40px;
	font-size: var(--mh-t5);
	line-height: 1.7;
	color: #55565a;
	max-width: 46ch;
}

.mh_fehler_h2 {
	margin: 0 0 16px;
	font-size: var(--mh-t4);
	font-weight: 600;
}

.mh_fehler_wege {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.mh_fehler_wege a {
	font-size: var(--mh-t5);
	font-weight: 600;
	color: #16171a;
	text-decoration: none;
}

@media (max-width: 900px) {
	.mh_fehler_block {
		padding: 120px 24px 80px;
	}
}

/* ---------------------------------------------------------------------------
   Referenzen auf dem Handy
   ------------------------
   Zwei Abweichungen vom Desktop:

   1. Der Abstand zum Absatz darueber war mit 92px (32px Fussabstand des
      Intros plus 60px Kopfabstand des Abschnitts) auf einem 375px breiten
      Schirm rund ein Achtel der Bildhoehe - eine leere Flaeche, durch die man
      scrollt, ohne dass sie etwas trennt. Jetzt sind es 44px.

   2. "Alle ansehen" stand oben rechts neben der Ueberschrift. Sobald die
      Zeile umbricht, landet der Verweis ueber den Karten und damit vor dem,
      worauf er verweist. Auf dem Handy steht er deshalb unter den Karten und
      als Knopf - dort ist er das Ende der Liste und nicht ihr Vorwort.

   display: contents loest die Kopfzeile als Behaelter auf, ohne sie aus dem
   Markup zu nehmen: Ueberschriftenblock, Verweis und Kartenliste werden damit
   Geschwister im selben Flex-Behaelter und lassen sich frei sortieren. Der
   Fussabstand der Kopfzeile faellt dabei weg und sitzt darum am Block selbst.
   --------------------------------------------------------------------------- */
@media (max-width: 700px) {
	.mh_section.mh_projects {
		padding-top: 32px;
	}

	.mh_projects .mh_section_inner {
		display: flex;
		flex-direction: column;
	}

	.mh_projects .mh_section_header_row {
		display: contents;
	}

	.mh_projects .mh_section_header_row > div {
		order: 1;
		margin-bottom: 26px;
	}

	.mh_projects .mh_projects_list {
		order: 2;
	}

	/* Die lange Auswahl ist noetig: hover-strich.css setzt den Fussabstand
	   aller Textverweise mit !important auf 0, und seine :is()-Liste enthaelt
	   "body.single-post .entry-content a". :is() uebernimmt die Spezifitaet
	   seines staerksten Arguments - das sind zwei Klassen und zwei Elemente.
	   Mit ".mh_projects .mh_section_cta" (zwei Klassen) haette diese Regel
	   dagegen verloren, und die Beschriftung stand 8px zu tief in der Pille. */
	.mh_section.mh_projects a.mh_section_cta {
		order: 3;
		align-self: center;
		margin: 18px 0 0;
		/* Dieselben Werte wie bei allen anderen Knoepfen der Seite, siehe
		   hover-knopf.css: Sora 600, 15px, Zeilenhoehe 28, Innenabstand 15/30. */
		box-sizing: border-box;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 60px;
		padding: 15px 30px;
		/* !important gegen hover-strich.css: Dort wird der Fussabstand aller
		   Textverweise auf 0 gesetzt, damit der gruene Strich direkt unter der
		   Schrift sitzt. Im Knopf fehlten dadurch unten 15px, und die
		   Beschriftung stand sichtbar zu tief in der Pille. */
		padding-bottom: 15px !important;
		border: 1px solid var(--mh-gruen);
		border-radius: 999px;
		background: var(--mh-gruen);
		box-shadow: var(--mh-gruen-schein);
		color: #fff;
		font-size: 15px;
		font-weight: 600;
		line-height: 28px;
		text-decoration: none;
	}

	/* Der Unterstrich aus hover-strich.css gehoert zum Textlink, nicht zum
	   Knopf - er laege sonst als gruener Strich auf gruenem Grund. */
	.mh_section.mh_projects a.mh_section_cta::before,
	.mh_section.mh_projects a.mh_section_cta::after {
		content: none !important;
	}

	.mh_section.mh_projects a.mh_section_cta:hover,
	.mh_section.mh_projects a.mh_section_cta:focus-visible {
		background: var(--mh-gruen-tief);
		border-color: var(--mh-gruen-tief);
		box-shadow: var(--mh-gruen-schein-stark);
	}
}

/* ---------------------------------------------------------------------------
   Bewertungen auf dem Handy: Pfeile unter die Karten
   --------------------------------------------------
   Am Desktop stehen die Pfeiltasten rechts in der Kopfzeile, auf einer Hoehe
   mit Titel und Note. Sobald diese Zeile umbricht, rutschen sie unter die Note
   und damit ueber die Karten - eine Bedienung, die vor dem steht, was sie
   bedient. Unter der Liste sind sie da, wo man nach dem Lesen der ersten
   Karte hinschaut.

   Gleicher Kunstgriff wie bei den Referenzen: display: contents loest die
   Kopfzeile als Behaelter auf, ihre Kinder werden Geschwister der Liste im
   selben Flex-Behaelter und lassen sich frei sortieren.
   --------------------------------------------------------------------------- */
@media (max-width: 680px) {
	/* Raster statt Spalte: Die letzte Zeile traegt zwei Dinge nebeneinander -
	   links den Knopf, rechts die Pfeile. Untereinander brauchten beide zwei
	   Zeilen fuer dieselbe Sache, und ihre linken Kanten lagen sichtbar
	   verschoben, weil der Knopf einen Rahmen und einen Schatten mitbringt,
	   die Pfeiltasten nicht. */
	.mh_google .mh_section_inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
	}

	.mh_google_kopf {
		display: contents;
	}

	/* Der Fussabstand der Kopfzeile faellt mit display: contents weg und sitzt
	   deshalb am letzten Element davor. */
	.mh_google_kopf > div:first-child { grid-column: 1 / -1; grid-row: 1; }
	.mh_google_wertung { grid-column: 1 / -1; grid-row: 2; margin-bottom: 26px; }
	.mh_rez_liste { grid-column: 1 / -1; grid-row: 3; }
	/* Der Knopf steckt in .mh_google_fuss - gesetzt wird der Behaelter, sonst
	   bliebe er als Kind an seiner alten Stelle vor der Liste stehen. */
	.mh_google_fuss { grid-column: 1; grid-row: 4; margin-top: 22px; }
	.mh_google_kopf .proj_slider_knoepfe {
		grid-column: 2;
		grid-row: 4;
		margin-top: 22px;
		justify-content: flex-end;
	}
}

/* ---------------------------------------------------------------------------
   Referenzen auf dem Handy als Schieber
   -------------------------------------
   Untereinander gestapelt ergaben vier Karten mit Bild, Pillen und Titel eine
   sehr lange Strecke, durch die man scrollen musste, um an den naechsten
   Abschnitt zu kommen. Nebeneinander zum Wischen ist es ein Griff.

   Bewusst ohne slider.js: Der dortige Endlosumlauf vervielfaeltigt die Karten
   im DOM. Hier genuegt der Rollbereich des Browsers mit Einrasten - das laeuft
   mit dem Finger am fluessigsten, kommt ohne JavaScript aus und bleibt fuer
   die Tastatur bedienbar.

   Die negativen Aussenabstaende heben den Rand der Bahn auf, damit die Karten
   am Bildrand angeschnitten werden - das zeigt, dass es weitergeht. Der
   gleich grosse Innenabstand setzt die erste Karte wieder auf die Textkante.
   --------------------------------------------------------------------------- */
@media (max-width: 700px) {
	.mh_projects .mh_projects_list {
		display: flex;
		grid-template-columns: none;
		gap: 16px;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-padding-left: var(--mh-rand, 28px);
		margin-left: calc(var(--mh-rand, 28px) * -1);
		margin-right: calc(var(--mh-rand, 28px) * -1);
		padding-left: var(--mh-rand, 28px);
		padding-right: var(--mh-rand, 28px);
		/* Die Rollleiste wuerde unter den Karten als graue Schiene stehen. */
		scrollbar-width: none;
		-ms-overflow-style: none;
		/* Auf dem iPhone rollt der Bereich sonst nicht mit Schwung aus. */
		-webkit-overflow-scrolling: touch;
	}

	.mh_projects .mh_projects_list::-webkit-scrollbar {
		display: none;
	}

	.mh_projects .mh_projects_list > .ref_card {
		flex: 0 0 82%;
		scroll-snap-align: start;
	}

	/* Der Abstand zwischen Ueberschrift und Karten war mit 26px fuer eine
	   Ueberschrift bemessen, unter der noch der Verweis stand. Der steht jetzt
	   unten, also darf es enger sein. */
	.mh_projects .mh_section_header_row > div {
		margin-bottom: 16px;
	}

	/* Ohne Leistungspillen auf dem Handy: Sie kosten je Karte eine bis zwei
	   Zeilen, stehen in der schmalen Karte oft umgebrochen und wiederholen,
	   was auf der Projektseite ohnehin steht. Auf dem Handy zaehlt hier das
	   Bild und der Name. Am Desktop bleiben sie - dort ist der Platz da. */
	.mh_projects .ref_card_tags {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
   Bewertungen: Ueberschrift und Google-Block auf dem Handy
   -------------------------------------------------------
   "Das sagen unsere Kunden" brach bei 28px auf zwei Zeilen um und schob den
   ganzen Abschnitt nach unten. Eine Stufe kleiner passt der Satz in eine
   Zeile - nachgemessen bei 360, 375 und 390px.

   Der Google-Block stand links neben dem Logo eingerueckt: Logo, daneben
   Sterne, darunter die Note - beginnend bei 118px statt an der Textkante.
   Als Raster steht das Logo mit den Sternen in einer Zeile, die Note darunter
   auf derselben Linie wie Ueberschrift, Karten und Knopf.
   --------------------------------------------------------------------------- */
@media (max-width: 680px) {
	.mh_section.mh_google .mh_google_kopf h2 {
		/* Mit festen 23px passte der Satz ab 360px in eine Zeile, auf einem
		   320px breiten Geraet brach er weiterhin um. Die Groesse waechst
		   deshalb mit der Fensterbreite: 6,2vw ergibt bei 320px knapp 20px -
		   gemessen genau die Groesse, bei der "Das sagen unsere Kunden" noch
		   in die verfuegbaren 264px passt. */
		font-size: clamp(19.5px, 6.2vw, 23px);
		line-height: 1.2;
	}

	.mh_google_wertung {
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 10px;
		row-gap: 4px;
		align-items: center;
	}

	.mh_google_wertung > svg,
	.mh_google_wertung > img {
		grid-column: 1;
		grid-row: 1;
		width: 22px;
		height: 22px;
	}

	/* Die beiden Kinder wandern selbst ins Raster - der Behaelter dazwischen
	   wuerde sie sonst als Block zusammenhalten und wieder einruecken. */
	.mh_google_zahlen {
		display: contents;
	}

	.mh_google_zahlen .mh_sterne {
		grid-column: 2;
		grid-row: 1;
	}

	.mh_google_zahlen p {
		grid-column: 1 / -1;
		grid-row: 2;
	}
}