/* ══════════════════════════════════════════════════════════════════════
   MITMACHEN MIT PLATTFORM
   Zum Pattern `seite-mitmachen-plattform.php`, neu am 23.09.2026 nach
   dem Design-Handoff.

   Die Plattform bringt ihre eigenen Stile mit; hier steht nur, was um
   sie herum liegt.
   ══════════════════════════════════════════════════════════════════════ */

.mmp-einstieg {
	padding: clamp(40px, 6vw, 88px) 0 clamp(28px, 4vw, 52px);
	background: var(--hh-blue-05, #F4F5FA);
}

.mmp-einstieg__titel {
	margin: .4rem 0 0;
	font-size: clamp(40px, 7vw, 88px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.03em;
	text-wrap: balance;
}

.mmp-einstieg__lead {
	max-width: 54ch;
	margin: clamp(18px, 2.4vw, 28px) 0 0;
	font-size: clamp(1.05rem, 1.6vw, 1.3rem);
	line-height: 1.55;
	color: var(--hh-blue-90, #444DA0);
	text-wrap: pretty;
}

/* Der Hinweis auf die Ehrenamtlichkeit steht vor dem Knopf. Er ist kein
   Kleingedrucktes: Wer klickt, soll vorher wissen, dass niemand dafuer
   bezahlt wird. */
.mmp-hinweis {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	max-width: 56ch;
	margin: clamp(20px, 2.6vw, 30px) 0 0;
	padding: 14px 18px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--hh-blue-90, #444DA0);
	background: #fff;
	border-left: 3px solid var(--hh-blue, #2A3287);
	border-radius: 0 10px 10px 0;
}

.mmp-hinweis__text { flex: 1; }

.mmp-hinweis__zeichen {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	font-size: 12px;
	font-weight: 700;
	font-style: italic;
	color: #fff;
	background: var(--hh-blue, #2A3287);
	border-radius: 999px;
}

.mmp-einstieg__knopf { margin: clamp(22px, 3vw, 34px) 0 0; }

/* ── Teil der Bewegung ───────────────────────────────────────────── */

.mmp-bewegung { padding: clamp(44px, 6vw, 88px) 0; }

.mmp-bewegung__raster {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(20px, 3vw, 48px);
}

.mmp-bewegung__titel {
	margin: 0;
	font-size: clamp(28px, 3.4vw, 40px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.02em;
	text-wrap: balance;
}

.mmp-bewegung__text { display: flex; flex-direction: column; gap: 1.1rem; }
.mmp-bewegung__text p { margin: 0; font-size: 17px; line-height: 1.6; text-wrap: pretty; }

/* ── Andere Wege ─────────────────────────────────────────────────── */

.mmp-alternativen { padding: 0 0 clamp(52px, 7vw, 96px); }

.mmp-alternativen__titel {
	max-width: 30ch;
	margin: 0 0 clamp(20px, 3vw, 34px);
	font-size: clamp(22px, 2.6vw, 32px);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.02em;
	text-wrap: balance;
}

.mmp-alternativen__raster {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}

.mmp-karte {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 22px;
	text-decoration: none;
	color: inherit;
	background: #fff;
	border: 1px solid var(--hh-blue-10, #DDE0EC);
	border-radius: 14px;
	transition: border-color 180ms ease, transform 180ms ease;
}

/* HOVER NUR, WO ES EINE MAUS GIBT. Auf dem Telefon bleibt der Zustand
   nach dem Antippen haengen, die Karte steht dann dauerhaft angehoben.
   `:focus-visible` gilt weiter fuer alle: Es kommt von der Tastatur,
   nicht vom Finger. */
.mmp-karte:focus-visible {
	border-color: var(--hh-blue, #2A3287);
	transform: translateY(-2px);
}

@media (hover: hover) and (pointer: fine) {
	.mmp-karte:hover {
		border-color: var(--hh-blue, #2A3287);
		transform: translateY(-2px);
	}
}

.mmp-karte__titel { font-size: 17px; font-weight: 700; line-height: 1.25; }
.mmp-karte__text { font-size: 15px; line-height: 1.5; color: var(--hh-text-light, #5A63A8); }

@media (min-width: 820px) {
	.mmp-bewegung__raster { grid-template-columns: .9fr 1.1fr; }
	.mmp-alternativen__raster { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 560px) and (max-width: 819px) {
	.mmp-alternativen__raster { grid-template-columns: 1fr 1fr; }
}

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

/* ── Breite fuer die Plattform ───────────────────────────────────────
   `.page-content` begrenzt auf 800 Pixel. Die Plattform schaltet aber
   erst ab 820 auf die Seitenspalte um und stand deshalb auf jedem
   Schirm im Telefonlayout. Dieser Rahmen gibt ihr die Seitenbreite von
   1240 Pixeln aus dem Handoff. */
.mmp-plattformbreite {
	width: min(1240px, 100%);
	margin-inline: auto;
	padding-inline: clamp(16px, 4vw, 32px);
}

@media (min-width: 1240px) {
	.mmp-plattformbreite {
		width: 1240px;
		max-width: calc(100vw - 32px);
	}
}

/* ── Was du davon hast ───────────────────────────────────────────── */

.mmp-benefits {
	padding: clamp(44px, 6vw, 80px) 0;
	background: var(--hh-blue-05, #F4F5FA);
}

.mmp-benefits__titel {
	margin: .4rem 0 clamp(20px, 3vw, 32px);
	font-size: clamp(28px, 3.4vw, 40px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.02em;
	text-wrap: balance;
}

/* `stretch` statt `start`: Sonst ist jede Karte nur so hoch wie ihr
   eigener Titel, und in einer Reihe stehen unterschiedlich hohe Kaesten
   nebeneinander. Am 23.09.2026 gemeldet. */
.mmp-benefits__raster {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 16px;
	align-items: stretch;
	/* Alle Reihen gleich hoch, nicht nur die Karten innerhalb einer
	   Reihe: Sonst ist die zweite Reihe niedriger als die erste, sobald
	   dort kein Titel umbricht. */
	grid-auto-rows: 1fr;
}

/* SOBALD EINE KARTE OFFEN IST, GILT DAS NICHT MEHR. `1fr` macht jede
   Reihe so hoch wie die hoechste; klappt jemand eine Karte auf, wachsen
   alle uebrigen mit und stehen als leere Flaechen da. Am 23.09.2026
   gemessen: aus 101 Pixeln wurden 166, bei allen sieben.

   Browser ohne `:has()` behalten das alte Verhalten. Das ist kein
   Schaden, nur ungenutzter Platz. */
.mmp-benefits__raster:has(.mmp-benefit[aria-expanded="true"]) {
	grid-auto-rows: auto;
}

/* Die Karte zeigt zuerst nur den Titel. Der Text klappt auf Klick auf,
   nicht auf Hover allein: Auf dem Telefon gibt es kein Hover, und wer
   mit der Tastatur bedient, soll nicht aussen vor bleiben. */
.mmp-benefit {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-height: 96px;
	padding: 22px;
	text-align: left;
	font: inherit;
	color: var(--hh-blue-dunkel, #1E256B);
	background: #fff;
	border: 1.5px solid var(--hh-blue-10, #DDE0EC);
	border-radius: 18px;
	cursor: pointer;
	transition: border-color .25s ease;
}

.mmp-benefit:focus-visible { border-color: var(--hh-blue, #2A3287); }

@media (hover: hover) and (pointer: fine) {
	.mmp-benefit:hover { border-color: var(--hh-blue, #2A3287); }
}

.mmp-benefit[aria-expanded="true"] {
	color: #fff;
	background: var(--hh-blue, #2A3287);
	border-color: var(--hh-blue, #2A3287);
}

.mmp-benefit__titel { font-size: 17px; font-weight: 700; line-height: 1.25; }

.mmp-benefit__text { font-size: 15px; line-height: 1.5; }
.mmp-benefit__text[hidden] { display: none; }

/* ── Stimmen aus dem Team ────────────────────────────────────────── */

.mmp-stimmen { padding: 0 0 clamp(44px, 6vw, 80px); }

.mmp-stimmen__titel {
	margin: .4rem 0 clamp(20px, 3vw, 32px);
	font-size: clamp(28px, 3.4vw, 40px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.02em;
}

.mmp-stimme {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(18px, 3vw, 40px);
	align-items: center;
	margin: 0;
}

.mmp-stimme[hidden] { display: none; }

.mmp-stimme img {
	display: block;
	width: 100%;
	max-width: 420px;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 16px;
}

.mmp-stimme blockquote {
	margin: 0 0 1rem;
	font-size: clamp(20px, 2.4vw, 30px);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.01em;
	text-wrap: pretty;
}

.mmp-stimme__wer { margin: 0; font-size: 16px; font-weight: 700; }
.mmp-stimme__wer span { display: block; font-weight: 400; color: var(--hh-text-light, #5A63A8); }

.mmp-stimmen__steuerung {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: clamp(18px, 2.4vw, 28px);
}

.mmp-stimmen__pfeil {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	font: inherit;
	font-size: 18px;
	color: var(--hh-blue, #2A3287);
	background: #fff;
	border: 1px solid var(--hh-blue-10, #DDE0EC);
	border-radius: 999px;
	cursor: pointer;
}

.mmp-stimmen__punkte { display: flex; align-items: center; }

/* DER PUNKT IST KLEIN, DIE FLAECHE NICHT. Am 23.09.2026 auf dem
   iPhone-Profil gemessen: zehn mal zehn Pixel, das trifft niemand
   zuverlaessig mit dem Daumen. Der Knopf ist jetzt 44 hoch und breit,
   sichtbar bleibt der Punkt darin.

   Der Abstand kommt aus dem Innenabstand statt aus `gap`, sonst
   stuenden die Flaechen so weit auseinander, dass die Reihe
   auseinanderfaellt. */
.mmp-stimmen__punkt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
}

.mmp-stimmen__punkt::before {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	background: var(--hh-blue-30, #C3C8DE);
	border-radius: 999px;
	transition: width var(--hhs-t-slow, .3s) var(--hhs-ease-out, ease), background-color var(--hhs-t-base, .25s);
}

/* Der aktive Punkt wird zum Strich, so steht es im Motion-Auftrag. */
.mmp-stimmen__punkt.ist-da::before {
	width: 32px;
	background: var(--hh-blue, #2A3287);
}

.hhs-fox .mmp-stimmen__punkt::before { background: var(--fox-linie-2); }
.hhs-fox .mmp-stimmen__punkt.ist-da::before { background: var(--fox-akzent); }

@media (prefers-reduced-motion: reduce) {
	.mmp-stimmen__punkt::before { transition: none; }
}

/* ── Häufige Fragen ──────────────────────────────────────────────── */

.mmp-faq { padding: 0 0 clamp(44px, 6vw, 80px); }

.mmp-faq__titel {
	margin: .4rem 0 clamp(18px, 2.6vw, 28px);
	font-size: clamp(28px, 3.4vw, 40px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.02em;
}

.mmp-faq__liste { display: flex; flex-direction: column; }

.mmp-faq__eintrag { border-bottom: 1px solid var(--hh-blue-10, #DDE0EC); }

.mmp-faq__eintrag summary {
	padding: 18px 40px 18px 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	cursor: pointer;
	list-style: none;
	position: relative;
}

.mmp-faq__eintrag summary::-webkit-details-marker { display: none; }

.mmp-faq__eintrag summary::after {
	content: "+";
	position: absolute;
	right: 4px;
	top: 16px;
	font-size: 22px;
	font-weight: 400;
	color: var(--hh-blue, #2A3287);
}

.mmp-faq__eintrag[open] summary::after { content: "−"; }

.mmp-faq__eintrag > div {
	padding: 0 0 20px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--hh-blue-90, #444DA0);
	max-width: 68ch;
}

@media (min-width: 820px) {
	.mmp-stimme { grid-template-columns: 420px 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════
   DER MODUS FUER IT-CRACKS
   Scheibe 6a, 23.09.2026.

   Die Klasse sitzt am `<html>`, weil der Modus auch Kopf- und Fusszeile
   faerbt, die ausserhalb dieses Patterns liegen. Alle Regeln haengen an
   `.hhs-fox`: Sie greifen nur, wenn das Skript umgelegt hat, und
   beruehren keine andere Seite.

   Die Farben stammen aus dem Handoff. Sie sind kein blosses Umkehren
   der hellen Palette: Der Hintergrund ist nicht schwarz, sondern ein
   sehr dunkles Blau, damit die Wortmarke und das Blau der Marke
   erkennbar bleiben.
   ══════════════════════════════════════════════════════════════════════ */

.hhs-fox {
	--fox-seite: #090C22;
	--fox-flaeche: #0E1230;
	--fox-karte: #141A42;
	--fox-weich: #1B2254;
	--fox-text: #E7EAFF;
	--fox-neben: #A6ADDB;
	--fox-linie: #2A3270;
	--fox-linie-2: #39428A;
	--fox-akzent: #9AA8FF;
	--fox-akzent-text: #0A0D24;
	--fox-stark: #C9D0FF;
	--fox-signal: #5EE3B1;
	--fox-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.hhs-fox body,
.hhs-fox .site-header,
.hhs-fox .site-footer {
	background: var(--fox-seite);
	color: var(--fox-text);
}

.hhs-fox .mmp-seite {
	background: var(--fox-seite);
	color: var(--fox-text);
}

/* Ueberschriften und Oberzeilen in der Monospace, Fliesstext nicht:
   Monospace liest sich in langen Absaetzen schlechter, und der Handoff
   nennt sie ausdruecklich nur fuer Headlines und Eyebrows. */
.hhs-fox .mmp-seite h1,
.hhs-fox .mmp-seite h2,
.hhs-fox .mmp-seite h3,
.hhs-fox .mmp-seite .overline,
.hhs-fox .mmp-seite summary {
	font-family: var(--fox-mono);
	font-weight: 600;
	letter-spacing: -.01em;
}

.hhs-fox .mmp-seite h1 {
	font-weight: 600;
	color: var(--fox-stark);
}

.hhs-fox .mmp-seite h2,
.hhs-fox .mmp-seite h3 {
	color: var(--fox-stark);
}

.hhs-fox .mmp-seite .overline {
	color: var(--fox-neben);
	font-weight: 500;
}

/* KEIN `span` MEHR. Die Pauschale traf auch Zeichen, die auf einer
   eigenen farbigen Flaeche sitzen: Das «i» im Hinweiskasten stand als
   helles Zeichen auf hellem Grund, 1,87 zu 1. Absaetze und Listen
   genuegen; alles andere erbt die Farbe ohnehin von `.mmp-seite`. */
.hhs-fox .mmp-seite p,
.hhs-fox .mmp-seite li {
	color: var(--fox-text);
}

/* Die beiden Stellen, die ihre Farbe selbst setzen und sie deshalb
   nicht erben. Ohne sie standen sie nach dem Wegfall der `span`-
   Pauschale dunkel auf dunkel, 2,04 zu 1. Gezielt statt pauschal: Eine
   Regel, die jedes `span` faerbt, trifft auch Zeichen auf eigener
   Flaeche. */
.hhs-fox .mmp-karte__text,
.hhs-fox .mmp-stimme__wer span {
	color: var(--fox-neben);
}

/* DER DIALOG BRINGT SEINE EIGENEN FARBEN MIT. Die Regel darueber
   faerbt jeden Absatz, jeden Listenpunkt und jedes `span` der Seite
   um, und der Block liegt in `.mmp-seite`. Damit traf sie auch die
   Wege-Karte: heller Text auf hellblauer Flaeche, Kontrast 1,87 zu 1.
   Am 23.09.2026 im IT-Modus gemessen.

   `inherit` gibt die Vererbung zurueck, statt eine zweite Farbe zu
   setzen, die beim naechsten Tokenwechsel wieder auseinanderlaeuft. */
.hhs-fox .hhs-plattform p,
.hhs-fox .hhs-plattform li,
.hhs-fox .hhs-plattform span {
	color: inherit;
}

.hhs-fox .mmp-einstieg,
.hhs-fox .mmp-benefits,
.hhs-fox .mmp-kontakt {
	background: var(--fox-flaeche);
}

.hhs-fox .mmp-einstieg__lead,
.hhs-fox .mmp-bewegung__text p,
.hhs-fox .mmp-benefits__lead,
.hhs-fox .mmp-stack__lead {
	color: var(--fox-neben);
}

.hhs-fox .mmp-hinweis,
.hhs-fox .mmp-kontaktbox,
.hhs-fox .mmp-benefit,
.hhs-fox .mmp-karte,
.hhs-fox .mmp-faq__eintrag,
.hhs-fox .mmp-stimme {
	background: var(--fox-karte);
	border-color: var(--fox-linie);
	color: var(--fox-text);
}

.hhs-fox .mmp-hinweis__zeichen,
.hhs-fox .btn-primary {
	background: var(--fox-akzent);
	color: var(--fox-akzent-text);
}

.hhs-fox .btn-secondary {
	border-color: var(--fox-akzent);
	color: var(--fox-akzent);
}

.hhs-fox .mmp-benefit:hover,
.hhs-fox .mmp-karte:hover {
	border-color: var(--fox-akzent);
}

/* Die Flaeche fehlte: Der Pfeil bekam die helle Schriftfarbe, behielt
   aber den weissen Grund aus dem Normalmodus. 1,19 zu 1, faktisch
   unsichtbar. */
.hhs-fox .mmp-stimmen__pfeil {
	border-color: var(--fox-linie-2);
	background: var(--fox-karte);
	color: var(--fox-text);
}

/* Die Oberzeile im Terminal-Stil. Sie steht statt «Mitmachen» und
   erklaert den Modus, bevor der Schalter es tut. */
.mmp-prompt {
	font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	text-transform: none;
	letter-spacing: 0;
}

.hhs-fox .mmp-prompt {
	color: var(--fox-signal);
}

/* ── DER SCHALTER ─────────────────────────────────────────────────── */

.mmp-schalter {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	min-height: 60px;
	padding: 10px 16px 10px 10px;
	border: 1.5px solid var(--hh-blue-20, #C3C8DE);
	border-radius: 14px;
	background: #fff;
	color: var(--hh-blue, #1E256B);
	text-align: left;
	cursor: pointer;
	font: inherit;
}

@media (hover: hover) and (pointer: fine) {
	.mmp-schalter:hover { border-color: var(--hh-blue, #1E256B); }
}

.mmp-schalter__zeichen {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--hh-blue, #2A3287);
	color: #fff;
}

.mmp-schalter__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.mmp-schalter__text strong { font-size: 15px; }

.mmp-schalter__text span {
	font-size: 13px;
	color: var(--hh-blue-90, #3D4585);
}

.mmp-schalter__gleis {
	position: relative;
	flex: none;
	width: 42px;
	height: 24px;
	border-radius: 12px;
	background: var(--hh-blue-20, #C3C8DE);
	transition: background .2s;
}

.mmp-schalter__knopf {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	transition: left .2s;
}

.mmp-schalter[aria-checked="true"] .mmp-schalter__knopf { left: 21px; }

.hhs-fox .mmp-schalter {
	background: var(--fox-karte);
	border-color: var(--fox-linie-2);
	color: var(--fox-text);
}

.hhs-fox .mmp-schalter__zeichen {
	background: var(--fox-signal);
	color: var(--fox-akzent-text);
}

.hhs-fox .mmp-schalter__gleis { background: var(--fox-signal); }

.hhs-fox .mmp-schalter__text span { color: var(--fox-neben); }

/* Der Schalter steht neben dem Knopf, auf schmalen Geraeten darunter. */
.mmp-einstieg__knopf {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

/* ── DER STACK ────────────────────────────────────────────────────── */

.mmp-stack {
	padding: clamp(32px, 5vw, 64px) 0;
	background: var(--fox-seite, #090C22);
	font-family: var(--fox-mono);
}

.mmp-stack__eyebrow {
	margin: 0 0 10px;
	font-family: var(--fox-mono);
	font-size: 13px;
	color: var(--fox-signal, #5EE3B1);
}

.mmp-stack__titel {
	margin: 0 0 14px;
	font-size: clamp(24px, 3vw, 34px);
	font-weight: 600;
	letter-spacing: -.01em;
	text-wrap: balance;
}

.mmp-stack__lead {
	max-width: 760px;
	margin: 0 0 28px;
	font-family: "Open Sans", system-ui, sans-serif;
	font-size: 17px;
	line-height: 1.6;
}

.mmp-stack__raster {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
}

.mmp-stack__karte {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 22px;
	border: 1px solid var(--fox-linie, #2A3270);
	border-radius: 14px;
	background: var(--fox-karte, #141A42);
}

.mmp-stack__karte strong { font-size: 17px; }

.mmp-stack__text {
	font-family: "Open Sans", system-ui, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	color: var(--fox-neben, #A6ADDB);
}

.mmp-stack__technik {
	font-size: 13px;
	line-height: 1.7;
	color: var(--fox-signal, #5EE3B1);
}

.mmp-stack__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 24px;
	font-size: 13px;
}

.mmp-stack__chip {
	padding: 6px 10px;
	border: 1px solid var(--fox-linie-2, #39428A);
	border-radius: 6px;
}

/* Der Umschlag darf nicht ruckeln: Wer `prefers-reduced-motion` gesetzt
   hat, bekommt den Wechsel ohne Uebergang. */
@media (prefers-reduced-motion: reduce) {
	.mmp-schalter__gleis,
	.mmp-schalter__knopf { transition: none; }
}

/* `hidden` IST NUR EINE UA-REGEL und verliert gegen jedes `display` aus
   dem Stylesheet. Das Kartenraster steht auf `display: grid`, die
   Knopfzeile auf `display: flex`: Beide Fassungen standen deshalb
   gleichzeitig da, sieben Karten plus zwoelf, und der Knopf zeigte
   weiter «Jetzt mitmachen». Am 23.09.2026 live gemessen.

   Darum hier ausdruecklich, und nur fuer die Fassungen dieser Seite. */
[data-mmp-fassung][hidden] { display: none !important; }

/* UND DASSELBE FUER ALLES AUF DIESER SEITE. Am 23.09.2026 trat der
   Fehler ein zweites Mal auf, beim Ablauf und der Infobox darin: Beide
   stehen auf `display: flex`, also blieben sie offen, obwohl `hidden`
   gesetzt war, und der Schliessknopf bewirkte nichts.

   Statt die Regel ein drittes Mal nachzutragen, gilt sie hier fuer den
   ganzen Abschnitt. `hidden` heisst versteckt, immer. */
.mmp-seite [hidden],
.mmp-ablauf [hidden] { display: none !important; }

/* DIE ABSCHNITTE BRAUCHEN DIE GANZE BREITE. WordPress begrenzt jedes
   direkte Kind von `.entry-content` auf die Inhaltsbreite, hier 800 px.
   Solange alles weiss war, fiel es nicht auf; im dunklen Modus stand
   der Einstieg als 800 Pixel breiter Kasten auf dunklerem Grund. Am
   23.09.2026 gemessen.

   Die Abschnitte laufen jetzt randlos, die `.container` darin begrenzen
   den Text wie ueberall sonst auf 1240. Das ist auch die Breite, die
   der Handoff nennt. Nur diese Seite, ueber die eigene Klasse: Die ID
   `page-mitmachen` tragen drei Patterns. */
.page-content.mmp-seite {
	max-width: none;
	width: 100%;
}

/* Die Brotkrume gehoert zum Seitenkopf und liegt ausserhalb dieses
   Patterns. Im dunklen Modus blieb sie als heller Streifen stehen. */
.hhs-fox .breadcrumb-nav {
	background: var(--fox-flaeche);
	border-color: var(--fox-linie);
}

.hhs-fox .breadcrumb-nav a,
.hhs-fox .breadcrumb-nav span {
	color: var(--fox-neben);
}

/* Der Trenner zwischen den Techniken steht als CSS hinter dem Wort,
   nicht als eigenes Zeichen im Text: So rutscht er beim Umbruch nicht
   an den Zeilenanfang. Am 23.09.2026 im Screenshot gesehen, «· GitHub»
   stand allein in der zweiten Zeile. */
.mmp-stack__technik span:not(:last-child)::after {
	content: " ·";
}

.mmp-stack__technik span + span { margin-left: .35em; }

/* ══════════════════════════════════════════════════════════════════════
   DIE IKONEN DER BENEFIT-KARTEN
   Scheibe 7, 23.09.2026. Bis hierhin trugen die Karten nur den Titel.

   Jede Karte hat eine eigene kleine Bewegung, die beim Oeffnen und beim
   Hover zweimal laeuft und dann steht. Keine Dauerbewegung: Sieben bis
   zwoelf Karten, die alle gleichzeitig zappeln, macht die Uebersicht
   unlesbar, und der Handoff schliesst es ausdruecklich aus.
   ══════════════════════════════════════════════════════════════════════ */

/* DAS PLUS STEHT IMMER GLEICH WEIT RECHTS, der Titel bricht davor um.
   Vorher lief «Gestaltungsspielraum» bis an das Zeichen heran, weil die
   mittlere Spalte alles nahm, was sie kriegen konnte. `min-width: 0`
   erlaubt ihr zu schrumpfen, der eigene Abstand haelt die Luft.

   Die Kopfzeile steht oben, nicht mittig: So sitzen Icon, Titel und
   Zeichen in jeder Karte auf derselben Hoehe, auch wenn ein Titel zwei
   Zeilen braucht. */
.mmp-benefit {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-areas:
		"icon titel zeichen"
		"text text text";
	align-items: start;
	gap: 12px 14px;
	align-content: start;
}

/* «Gestaltungsspielraum» ist ein Wort ohne Fuge, an der der Browser
   von sich aus trennt. Ohne `hyphens` lief es ueber die Spalte hinaus
   und schob sich unter das Plus, waehrend die Spalte selbst brav
   schmal blieb. Am 23.09.2026 im Bild gesehen.

   `hyphens: auto` braucht die Sprache am Dokument; das Theme setzt
   `lang="de"`. `overflow-wrap` ist die Rueckfallebene fuer Browser
   ohne deutsche Trennmuster: lieber hart umbrechen als ueberlaufen. */
.mmp-benefit__titel {
	min-width: 0;
	padding-right: 4px;
	align-self: center;
	-webkit-hyphens: auto;
	hyphens: auto;
	overflow-wrap: break-word;
}

.mmp-benefit__icon,
.mmp-benefit__zeichen { align-self: center; }

/* Die Icon-Spalte schrumpft nicht mit. Ohne feste Breite gibt das
   Raster ihr nach, sobald der Titel lang wird, und `max-width: 100%`
   laesst das SVG mitschrumpfen: Am 23.09.2026 gemessen stand das Icon
   bei «Gestaltungsspielraum» auf 18,5 statt 40 Pixeln, waehrend alle
   anderen richtig sassen. */
.mmp-benefit__icon {
	grid-area: icon;
	display: inline-flex;
	flex: none;
	width: 40px;
	min-width: 40px;
	color: var(--hh-blue, #2A3287);
}
.mmp-benefit__titel { grid-area: titel; font-weight: 700; }
/* Das Zeichen sagt, dass die Karte aufgeht. Bei #6F7FE8 auf Weiss sind
   das 3,57 zu 1: genug fuer ein Symbol, zu wenig fuer ein Zeichen, das
   wie Text gelesen wird. Das Blau der Marke bringt 8,59. */
.mmp-benefit__zeichen {
	grid-area: zeichen;
	font-size: 22px;
	line-height: 1;
	color: var(--hh-blue, #2A3287);
}
.mmp-benefit__text  { grid-area: text; }

/* KEINE DREHUNG MEHR. Sie stammt aus Scheibe 7a, als das Zeichen ein
   «+» blieb und sich zum «×» drehte. Seit das Skript auf «−»
   umschreibt, drehte sich das Minus mit und stand als Schraegstrich in
   der Ecke. Am 23.09.2026 gemeldet.

   DAS ZEICHEN HAT EINE FESTE BREITE, damit es beim Wechsel nicht
   springt: «−» und «+» sind verschieden breit, und die Grid-Spalte
   folgte ihnen. Gemessen: sechs Pixel Versatz. */
.mmp-benefit__zeichen {
	display: inline-flex;
	justify-content: center;
	width: 22px;
}

/* DAS ICON WAR IM OFFENEN ZUSTAND UNSICHTBAR: Die Karte faerbt sich
   dann dunkelblau, und das Icon behielt dasselbe Blau als eigene Farbe.
   `inherit` nimmt die Schriftfarbe der Karte, also Weiss.

   Gleiches gilt fuer das Zeichen daneben. */
.mmp-benefit[aria-expanded="true"] .mmp-benefit__icon,
.mmp-benefit[aria-expanded="true"] .mmp-benefit__zeichen { color: inherit; }

.mmp-benefit__icon svg { width: 40px; height: 40px; max-width: none; }

.hhs-fox .mmp-benefit__icon { color: var(--fox-akzent); }
.hhs-fox .mmp-benefit__zeichen { color: var(--fox-signal); }

/* Die Bewegung laeuft nur beim Oeffnen und beim Hover, 1,1 Sekunden,
   zwei Durchlaeufe. Danach steht das Icon still. */
.mmp-benefit[aria-expanded="true"] .mmp-benefit__icon,
.mmp-benefit:where(:hover) .mmp-benefit__icon {
	animation-duration: 1.1s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 2;
	transform-origin: center;
}

.mmp-benefit:hover .mmp-benefit__icon--hhsPulse,
.mmp-benefit[aria-expanded="true"] .mmp-benefit__icon--hhsPulse   { animation-name: hhsPulse; }
.mmp-benefit:hover .mmp-benefit__icon--hhsGlow,
.mmp-benefit[aria-expanded="true"] .mmp-benefit__icon--hhsGlow    { animation-name: hhsGlow; }
.mmp-benefit:hover .mmp-benefit__icon--hhsBlink,
.mmp-benefit[aria-expanded="true"] .mmp-benefit__icon--hhsBlink   { animation-name: hhsBlink; }
.mmp-benefit:hover .mmp-benefit__icon--hhsDrive,
.mmp-benefit[aria-expanded="true"] .mmp-benefit__icon--hhsDrive   { animation-name: hhsDrive; }
.mmp-benefit:hover .mmp-benefit__icon--hhsBounce,
.mmp-benefit[aria-expanded="true"] .mmp-benefit__icon--hhsBounce  { animation-name: hhsBounce; }
.mmp-benefit:hover .mmp-benefit__icon--hhsSwing,
.mmp-benefit[aria-expanded="true"] .mmp-benefit__icon--hhsSwing   { animation-name: hhsSwing; }
.mmp-benefit:hover .mmp-benefit__icon--hhsType,
.mmp-benefit[aria-expanded="true"] .mmp-benefit__icon--hhsType    { animation-name: hhsType; }

/* Die Keyframes stehen seit dem 23.09.2026 in `hh-motion.css`, damit
   sie nicht in jedem Baustein noch einmal auftauchen. */

/* Wer weniger Bewegung eingestellt hat, bekommt keine. Das Icon bleibt,
   nur die Animation faellt weg. */
@media (prefers-reduced-motion: reduce) {
	.mmp-benefit:hover .mmp-benefit__icon,
	.mmp-benefit[aria-expanded="true"] .mmp-benefit__icon {
		animation: none;
	}
}

/* Der Halt-Knopf des Stimmen-Wechsels. Er steht rechts neben den
   Pfeilen, nicht versteckt: WCAG 2.2.2 verlangt ihn erreichbar, nicht
   nur vorhanden. */
.mmp-stimmen__halt {
	min-height: 44px;
	margin-left: auto;
	padding: 8px 16px;
	border: 1.5px solid var(--hh-blue-20, #C3C8DE);
	border-radius: 999px;
	background: transparent;
	color: var(--hh-blue, #1E256B);
	font: inherit;
	font-size: .9375rem;
	cursor: pointer;
}

.mmp-stimmen__halt:hover,
.mmp-stimmen__halt:focus-visible { border-color: var(--hh-blue, #1E256B); }

.hhs-fox .mmp-stimmen__halt {
	border-color: var(--fox-linie-2);
	color: var(--fox-text);
}

.mmp-stimmen__steuerung { flex-wrap: wrap; }

/* ══════════════════════════════════════════════════════════════════════
   SO GEHT ES WEITER
   Neu gebaut am 23.09.2026 nach `AUFTRAG-Layout-Ablauf-FAQ-Kontakt.md`.
   Vorher eine nummerierte Liste untereinander, jetzt ein Band mit sechs
   Kacheln nebeneinander.
   ══════════════════════════════════════════════════════════════════════ */

.mmp-ablauf {
	background: #1E256B;
	color: #fff;
}

.mmp-ablauf .container {
	display: flex;
	flex-direction: column;
	gap: 32px;
	padding-block: 64px;
}

.hhs-fox .mmp-ablauf { background: #141A42; color: #E7EAFF; }

/* Der Kopf ist ein Knopf ueber die ganze Breite, ohne Rahmen und
   Hintergrund: Er sieht aus wie eine Ueberschrift und verhaelt sich wie
   ein Schalter. */
.mmp-ablauf__kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.mmp-ablauf__kopftext {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.mmp-ablauf__kopf .overline { opacity: .8; color: inherit; }

.mmp-ablauf__titel {
	font-size: clamp(28px, 3.4vw, 40px);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.15;
	text-wrap: balance;
}

.mmp-ablauf__plus {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border: 2px solid currentColor;
	border-radius: 50%;
	font-size: 26px;
	line-height: 1;
	transition: transform .3s;
}

.mmp-ablauf__kopf[aria-expanded="true"] .mmp-ablauf__plus { transform: rotate(45deg); }

.mmp-ablauf__inhalt {
	display: flex;
	flex-direction: column;
	gap: 36px;
}

/* SECHS KACHELN NEBENEINANDER. `auto-fit` mit 170 Pixeln Mindestbreite
   ergibt auf dem Schreibtisch sechs Spalten, auf dem Tablet drei, auf
   dem Telefon zwei. Keine eigene Abfrage noetig. */
.mmp-schritte {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 28px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Die obere Linie trennt die beiden Haelften: eins bis drei fuehren zum
   Kennenlernen, vier bis sechs betreffen die Aufnahme. */
.mmp-schritt {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-top: 18px;
	border-top: 3px solid currentColor;
}

.mmp-schritt--dashed { border-top-style: dashed; }

.mmp-schritt__kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.mmp-schritt__icon svg { width: 40px; height: 40px; max-width: none; }

.mmp-schritt__nr {
	font-size: 14px;
	font-weight: 600;
	opacity: .8;
}

.hhs-fox .mmp-schritt__nr,
.hhs-fox .mmp-ablauf .overline {
	font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.mmp-schritt__titel { font-size: 18px; line-height: 1.25; }

.mmp-schritt__text {
	font-size: 15px;
	line-height: 1.5;
	opacity: .88;
}

/* Beim Oeffnen laufen die Schritte gestaffelt ein, das Icon jeweils
   kurz danach. Die Klasse setzt das Skript neu, damit die Animation bei
   jedem Oeffnen wieder von vorne beginnt. */
.mmp-ablauf.ist-offen .mmp-schritt {
	animation: hhsStep .5s ease-out both;
	animation-delay: calc(var(--i, 0) * .12s);
}

.mmp-ablauf.ist-offen .mmp-schritt__icon {
	display: inline-flex;
	animation: hhsIcon .6s ease-out both;
	animation-delay: calc(.25s + var(--i, 0) * .12s);
}

.mmp-ablauf.ist-offen .mmp-infobox {
	animation: hhsStep .5s ease-out .8s both;
}

/* ── Die Infobox zur Aktivmitgliedschaft ──────────────────────────── */

.mmp-infobox {
	max-width: 860px;
	border: 1.5px solid currentColor;
	border-radius: 18px;
	overflow: hidden;
}

.mmp-infobox__kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	min-height: 60px;
	padding: 18px 22px;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.mmp-infobox__links {
	display: flex;
	align-items: center;
	gap: 12px;
}

.mmp-infobox__zeichen {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 2px solid currentColor;
	border-radius: 50%;
	font-size: 15px;
	font-weight: 800;
}

.mmp-infobox__titel { font-size: 19px; font-weight: 700; }

.mmp-infobox__plus { font-size: 22px; line-height: 1; }

/* Der Inhalt beginnt buendig unter dem Titel, nicht unter dem Zeichen:
   28 Pixel Kreis, 12 Abstand, 22 Polster. */
.mmp-infobox__inhalt {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 0 22px 22px 62px;
	animation: hhsFadeA .35s ease-out both;
}

.mmp-infobox__inhalt p { margin: 0; font-size: 17px; line-height: 1.6; opacity: .92; }
.mmp-infobox__inhalt a { color: inherit; font-weight: 700; }

/* ══════════════════════════════════════════════════════════════════════
   HAEUFIGE FRAGEN UND KONTAKT
   Eine Sektion, zwei Spalten. Der Kontakt stand vorher als eigener
   Abschnitt darunter.
   ══════════════════════════════════════════════════════════════════════ */

.mmp-fragen { background: #fff; }

.hhs-fox .mmp-fragen { background: var(--fox-seite); }

.mmp-fragen__raster {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	gap: 40px 64px;
	align-items: start;
	padding-block: 80px;
}

.mmp-fragen__links {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.mmp-fragen__titel {
	margin: 0;
	font-size: clamp(28px, 3.4vw, 40px);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.15;
	text-wrap: balance;
}

.mmp-kontaktbox {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 12px;
	padding: 24px;
	border: 1px solid var(--hh-blue-10, #DDE0EC);
	border-radius: 16px;
	background: var(--hh-blue-05, #EEF0FA);
}

.mmp-kontaktbox p { margin: 0; }
.mmp-kontaktbox__titel { font-size: 18px; font-weight: 700; }
.mmp-kontaktbox__text  { font-size: 16px; line-height: 1.5; color: var(--hh-blue-90, #3D4585); }
.mmp-kontaktbox__mail a  { font-size: 17px; font-weight: 700; }
.mmp-kontaktbox__seite a { font-size: 15px; }

.hhs-fox .mmp-kontaktbox {
	background: var(--fox-weich);
	border-color: var(--fox-linie);
}

.hhs-fox .mmp-kontaktbox__text { color: var(--fox-neben); }
.hhs-fox .mmp-kontaktbox a { color: var(--fox-akzent); }

/* ── Die Fragenliste ──────────────────────────────────────────────── */

.mmp-fragen__rechts { border-top: 1px solid var(--hh-blue-10, #DDE0EC); }

.mmp-fragen .mmp-faq__eintrag {
	border: 0;
	border-bottom: 1px solid var(--hh-blue-10, #DDE0EC);
	border-radius: 0;
	background: transparent;
	padding: 0;
}

.mmp-fragen .mmp-faq__eintrag > summary {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	min-height: 44px;
	padding: 20px 0;
	font-size: 18px;
	font-weight: 700;
	list-style: none;
	cursor: pointer;
}

.mmp-fragen .mmp-faq__eintrag > summary::-webkit-details-marker { display: none; }

/* `position: static` ausdruecklich: Die aeltere Regel fuer die
   Fragenliste setzt das Zeichen absolut an den rechten Rand und
   reserviert dafuer 40 Pixel Polster. Hier gibt es das Polster nicht
   mehr, also lag das Plus auf dem Fragetext, sobald die Frage lang
   war. `flex: none` allein half nicht: Ein absolut gesetztes Element
   ist kein Flex-Kind. */
.mmp-fragen .mmp-faq__eintrag > summary::after {
	content: "+";
	position: static;
	flex: none;
	font-size: 22px;
	line-height: 1;
	color: var(--hh-blue, #2A3287);
	transition: transform .3s;
}

.mmp-fragen .mmp-faq__eintrag[open] > summary::after { transform: rotate(45deg); }

.mmp-fragen .mmp-faq__eintrag > div {
	max-width: 680px;
	margin: 0 0 20px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--hh-blue-90, #3D4585);
	animation: hhsFadeA .35s ease-out both;
}

.hhs-fox .mmp-fragen__rechts,
.hhs-fox .mmp-fragen .mmp-faq__eintrag { border-color: var(--fox-linie); }
.hhs-fox .mmp-fragen .mmp-faq__eintrag > summary::after { color: var(--fox-akzent); }
.hhs-fox .mmp-fragen .mmp-faq__eintrag > div { color: var(--fox-neben); }

/* Ohne Skript steht der Ablauf offen: Ein Knopf, der nichts tut, waere
   eine Sackgasse. */
html:not(.js) .mmp-ablauf__inhalt[hidden] { display: block; }

/* Der Abschnitt nach den Fragen hebt sich ab, so verlangt es der
   Auftrag. Vorher lief er ohne Grenze in die Fragen ueber, seit die
   Kontaktsektion dazwischen weggefallen ist. */
.mmp-alternativen {
	padding-block: clamp(44px, 6vw, 80px);
	border-top: 1px solid var(--hh-blue-10, #DDE0EC);
	background: var(--hh-blue-05, #EEF0FA);
}

.hhs-fox .mmp-alternativen {
	border-top-color: var(--fox-linie);
	background: var(--fox-flaeche);
}

/* ══════════════════════════════════════════════════════════════════════
   GLEICHE GROESSE, GLEICHE REAKTION
   23.09.2026. Der Knopf «Jetzt mitmachen» war niedriger als der
   Schalter daneben und hob sich beim Hover an, waehrend der Schalter
   nur die Farbe wechselte. Zwei Bedienelemente nebeneinander, die sich
   verschieden verhalten, lesen sich als zwei verschiedene Dinge.
   ══════════════════════════════════════════════════════════════════════ */

/* `stretch` statt einer festen Zahl: Der Schalter ist so hoch, wie
   sein zweizeiliger Text und das Zeichen es verlangen, und das aendert
   sich mit der Schriftgroesse. Der Knopf waechst mit, statt auf einen
   heute passenden Wert festgenagelt zu sein. */
.mmp-einstieg__knopf { align-items: stretch; }

.mmp-einstieg__knopf .btn {
	display: inline-flex;
	align-items: center;
	min-height: 60px;
	padding-inline: 26px;
}

/* Hover nur, wo es eine Maus gibt. Auf dem Telefon bleibt ein
   Hover-Zustand sonst haengen, nachdem man getippt hat. */
@media (hover: hover) and (pointer: fine) {

	.mmp-einstieg__knopf .btn-primary:hover,
	.mmp-schalter:hover {
		border-color: var(--hh-blue-dunkel, #1E256B);
	}

	.mmp-einstieg__knopf .btn-primary:hover {
		background: var(--hh-blue-dunkel, #1E256B);
	}

	.mmp-schalter:hover { background: var(--hh-blue-05, #EEF0FA); }

	.hhs-fox .mmp-schalter:hover { background: var(--fox-weich); }

	/* Karten heben sich leicht, Knoepfe nicht: Eine Karte ist eine
	   Flaeche, die man aufnimmt, ein Knopf bleibt, wo er ist. */
	.mmp-karte:hover,
	.mmp-benefit:hover {
		border-color: var(--hh-blue, #2A3287);
		transform: translateY(-2px);
	}

	.hhs-fox .mmp-karte:hover,
	.hhs-fox .mmp-benefit:hover { border-color: var(--fox-akzent); }
}

.mmp-einstieg__knopf .btn,
.mmp-schalter,
.mmp-karte,
.mmp-benefit {
	transition:
		background-color var(--hhs-t-base, .25s) var(--hhs-ease-out, cubic-bezier(.2, .7, .2, 1)),
		border-color var(--hhs-t-fast, .15s) var(--hhs-ease-out, cubic-bezier(.2, .7, .2, 1)),
		color var(--hhs-t-base, .25s) var(--hhs-ease-out, cubic-bezier(.2, .7, .2, 1)),
		transform var(--hhs-t-fast, .15s) var(--hhs-ease-out, cubic-bezier(.2, .7, .2, 1));
}

/* Gedrueckt wird alles gleich. */
.mmp-einstieg__knopf .btn:active,
.mmp-schalter:active,
.mmp-karte:active,
.mmp-benefit:active { transform: translateY(1px); }

/* Der Abstand zum naechsten Abschnitt. Die Stimmen klebten am dunklen
   Band, weil der Ablauf sein Polster innen traegt und die Stimmen
   keines oben hatten. */
.mmp-stimmen { padding-block: clamp(44px, 6vw, 80px); }

@media (prefers-reduced-motion: reduce) {
	.mmp-einstieg__knopf .btn,
	.mmp-schalter,
	.mmp-karte,
	.mmp-benefit { transition: none; }

	.mmp-karte:hover,
	.mmp-benefit:hover,
	.mmp-einstieg__knopf .btn:active,
	.mmp-schalter:active,
	.mmp-karte:active,
	.mmp-benefit:active { transform: none; }
}