/* =============================================================================
 * MotionMatters — Rahmen: Bahn, Kopf, Navigation, Menütafel, Inhalt, Fuß
 *
 * Gehoert zu fe_page.html5. Die Klassennamen sind eigen; Contaos eigene
 * Ausgabe (mod_*, ce_*, inside, block) wird lediglich eingebettet.
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * 1. Bahn — die zentrierte Inhaltsbreite
 * -------------------------------------------------------------------------- */

.mm-bahn {
	width: 100%;
	max-width: var(--mm-bahn);
	margin-inline: auto;
	padding-inline: var(--mm-rand);
}

@media (max-width: 767px) {
	.mm-bahn { padding-inline: var(--mm-luft); }
}

/* -----------------------------------------------------------------------------
 * 2. Seitengeruest
 * -------------------------------------------------------------------------- */

.mm-seite {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	/* Randlose Beiträge rechnen mit der Fensterbreite (100vw). Die schliesst die
	   Bildlaufleiste mit ein, wodurch waagerecht ein paar Pixel ueberstehen.
	   "clip" schneidet sie ab — anders als "hidden" schafft es keinen eigenen
	   Scrollbereich und laesst die feste Kopfleiste unberuehrt. */
	overflow-x: clip;
}

.mm-leiste {
	background: var(--mm-flaeche-leise);
	font-size: var(--mm-schrift-klein);
	border-bottom: 1px solid var(--mm-linie);
}

.mm-leiste .mm-bahn {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: var(--mm-luft);
	min-height: 40px;
}

/* -----------------------------------------------------------------------------
 * 3. Kopf
 * -------------------------------------------------------------------------- */

/* Die Kopfleiste hat zwei Zustände. Ohne Bühne steht sie von Anfang an als
   farbige Leiste im Fluss. Liegt eine Bühne an (--ueberlagert), legt sie sich
   durchsichtig über das Bild und wird erst beim Scrollen (--fest) zur farbigen
   Leiste über dem Inhalt. Beide Zustände sind aus dem Fluss genommen, damit
   beim Umschalten nichts springt. */
.mm-kopf {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--mm-leiste);
	box-shadow: 0 0 2px 2px rgb(0 0 0 / 10%);
	transition: background var(--mm-dauer) var(--mm-kurve),
	            box-shadow var(--mm-dauer) var(--mm-kurve);
}

.mm-kopf--ueberlagert {
	position: absolute;
	inset: 0 0 auto;
	background: transparent;
	box-shadow: none;
}

.mm-kopf--ueberlagert.mm-kopf--fest {
	position: fixed;
	background: var(--mm-leiste);
	box-shadow: 0 0 2px 2px rgb(0 0 0 / 10%);
}

.mm-kopf .mm-bahn {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--mm-luft);
	min-height: 114px;
	transition: min-height var(--mm-dauer) var(--mm-kurve);
}

.mm-kopf--fest .mm-bahn {
	min-height: 88px;
}

/* Contaos Logo-Modul und die Navigation sitzen als Module im Kopfbereich. */
.mm-kopf .mod_html img,
.mm-kopf .ce_image img {
	display: block;
	max-height: 56px;
	width: auto;
}

/* Das Logo trug seine Grafik früher als Hintergrundbild einer leeren Fläche.
   Jetzt steht ein echtes Bild in der Seite — mit Alternativtext, und für
   Suchmaschinen sichtbar. Die Breitenangabe hält den Platz frei, damit beim
   Nachladen nichts springt. */
.mm-kopf .mm-logo {
	display: block;
	flex: none;
}

/* 100 von 114px Leiste — im alten Bestand fuellte das Logo die Leiste ganz
   (145x114); 72px wirkten daneben verloren. Beim Scrollen (--fest) schrumpft
   es mit der Leiste auf 72. */
.mm-kopf .mm-logo img {
	display: block;
	width: auto;
	height: 100px;
	max-height: 100px;
	transition: height var(--mm-dauer) var(--mm-kurve);
}

/* Auf breiten Schirmen steht das Logo MITTIG zwischen den beiden Menühälften.
   Deshalb wird es aus dem Fluss genommen und zentriert — die Navigation nimmt
   dann die ganze Breite ein und teilt sich selbst in links und rechts. */
@media (min-width: 1024px) {
	.mm-kopf .mm-logo {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 2;
	}

	.mm-kopf .mod_navigation {
		flex: 1 1 auto;
	}

	.mm-kopf--fest .mm-logo img { height: 72px; }
}

/* Auf schmalen Schirmen ist das Logo das einzige Bildzeichen der Leiste —
   im alten Bestand fuellte es die Leiste fast ganz (80 von 80px). 68 von 88
   laesst oben und unten 10px Luft. */
@media (max-width: 1023px) {
	.mm-kopf .mm-logo img { height: 68px; max-height: 68px; }
}

/* -----------------------------------------------------------------------------
 * 4. Hauptnavigation
 * -------------------------------------------------------------------------- */

.mm-kopf .mod_navigation ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mm-kopf .mod_navigation li {
	position: relative;
	margin: 0;
}

.mm-kopf .mod_navigation a,
.mm-kopf .mod_navigation strong.active,
.mm-kopf .mod_navigation span.trail {
	display: block;
	padding: 10px 14px;
	color: var(--mm-akzent);
	font-size: 20px;
	font-weight: 400;
	text-transform: uppercase;
	white-space: nowrap;
	transition: color var(--mm-dauer) var(--mm-kurve);
}

.mm-kopf .mod_navigation a:hover,
.mm-kopf .mod_navigation a:focus-visible {
	color: var(--mm-akzent-dunkel);
}

.mm-kopf .mod_navigation strong.active,
.mm-kopf .mod_navigation span.trail {
	color: var(--mm-akzent-dunkel);
}

/* Untermenue: erscheint beim Ueberfahren, bleibt per Tastatur erreichbar. */
.mm-kopf .mod_navigation li ul {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 10;
	display: block;
	min-width: 220px;
	padding: 6px;
	background: var(--mm-flaeche);
	border-radius: var(--mm-radius);
	box-shadow: var(--mm-schatten-hoch);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity var(--mm-dauer) var(--mm-kurve),
	            transform var(--mm-dauer) var(--mm-kurve),
	            visibility var(--mm-dauer);
}

.mm-kopf .mod_navigation li:hover > ul,
.mm-kopf .mod_navigation li:focus-within > ul {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.mm-kopf .mod_navigation li ul a {
	white-space: normal;
}

/* Links- und rechtsbündige Einträge: welche Seite ein Eintrag einnimmt, legt
   die CSS-Klasse der Seite fest (float_left / float_right). Früher standen
   dafür zwei Gruppen im Markup; hier schiebt die Flexbox schlicht den ersten
   rechten Eintrag ab. */
.mm-kopf .mm-navi__punkt.float_left + .mm-navi__punkt.float_right {
	margin-left: auto;
}

/* Eingerahmter Eintrag — der Handlungsaufruf im Menü ("Kurs buchen"). */
.mm-kopf .mm-navi__verweis.border {
	padding: 6px 4px;
}

.mm-kopf .mm-navi__verweis.border .mm-navi__text {
	display: block;
	padding: 8px 14px;
	border: 1px solid var(--mm-akzent);
	border-radius: 5px;
	transition: background var(--mm-dauer) var(--mm-kurve),
	            color var(--mm-dauer) var(--mm-kurve);
}

.mm-kopf .mm-navi__verweis.border:hover .mm-navi__text {
	background: var(--mm-akzent);
	color: var(--mm-flaeche);
}

/* Hervorgehobener Eintrag — der zweite Handlungsaufruf ("Zum Training").
   Anders als der eingerahmte Eintrag trägt er eine gefüllte Fläche. */
.mm-kopf .mm-navi__verweis.mm-hervorgehoben {
	padding: 6px 4px;
	color: var(--mm-flaeche);
}

.mm-kopf .mm-navi__verweis.mm-hervorgehoben .mm-navi__text {
	display: block;
	padding: 8px 14px;
	background: var(--mm-akzent);
	color: rgb(255 255 255 / 90%);
	border-radius: 3px;
	transition: background var(--mm-dauer) var(--mm-kurve);
}

.mm-kopf .mm-navi__verweis.mm-hervorgehoben:hover .mm-navi__text {
	background: var(--mm-akzent-dunkel);
	color: var(--mm-flaeche);
}

/* Warenkorb als Symbol statt als Wort. Der Text bleibt in der Seite, nur für
   das Auge ausgeblendet — Vorleseprogramme und Suchmaschinen lesen ihn weiter,
   und ohne ihn hätte der Verweis überhaupt keinen Namen mehr. Das Symbol ist
   eine Maske in der jeweiligen Textfarbe, damit es die Zustände (Hover, aktiv)
   ohne zweite Grafik mitnimmt. Gesteuert über die Seitenklasse „warenkorb". */
.mm-kopf .warenkorb .mm-navi__text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.mm-kopf .mm-navi__verweis.warenkorb {
	display: flex;
	align-items: center;
}

.mm-kopf .mm-navi__verweis.warenkorb::before {
	content: '';
	display: block;
	width: 23px;
	height: 23px;
	background: currentcolor;
	mask: var(--mm-symbol-warenkorb) center / contain no-repeat;
	-webkit-mask: var(--mm-symbol-warenkorb) center / contain no-repeat;
}

/* -----------------------------------------------------------------------------
 * 4b. Verweise auf die sozialen Netze
 * -------------------------------------------------------------------------- */

.mm-soziales {
	display: flex;
	align-items: center;
	gap: 14px;
}

.mm-soziales a {
	color: var(--mm-text-leise);
	font-size: 19px;
	line-height: 1;
}

.mm-soziales a:hover {
	color: var(--mm-akzent);
}

/* -----------------------------------------------------------------------------
 * 5. Menüknopf und Menütafel (schmale Bildschirme)
 *
 * Die Leiste traegt auf schmalen Schirmen vier Dinge: links das Logo, rechts
 * Warenkorb, Anmeldung und den Menueknopf — alle drei als Symbol in der
 * Akzentfarbe, gleich gross, gleich weit auseinander. Die Menuetafel klappt
 * unter der Leiste auf und nimmt die ganze Breite ein; die Eintraege stehen
 * mittig in Grossbuchstaben, so wie die Hauptnavigation auf breiten Schirmen.
 * -------------------------------------------------------------------------- */

/* Als button.mm-menuknopf geschrieben, damit die allgemeine Knopfregel aus
   basis.css (button:hover -> Akzentflaeche) hier nicht greift. */
button.mm-menuknopf,
button.mm-menuknopf:hover,
button.mm-menuknopf:focus {
	display: none;
	width: 44px;
	height: 44px;
	padding: 12px 10px;
	background: none;
	border: 0;
	border-radius: var(--mm-radius);
	cursor: pointer;
}

.mm-menuknopf span {
	display: block;
	height: 2px;
	background: var(--mm-akzent);
	border-radius: 2px;
	transition: transform var(--mm-dauer) var(--mm-kurve),
	            opacity var(--mm-dauer) var(--mm-kurve);
}

.mm-menuknopf span + span { margin-top: 7px; }

.mm-menuknopf[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.mm-menuknopf[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mm-menuknopf[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

.mm-menutafel {
	position: fixed;
	top: var(--mm-kopfhoehe, 88px);
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 200;
	padding: var(--mm-luft) var(--mm-luft) var(--mm-abschnitt);
	background: var(--mm-flaeche);
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: opacity var(--mm-dauer) var(--mm-kurve),
	            transform var(--mm-dauer) var(--mm-kurve),
	            visibility var(--mm-dauer);
}

.mm-menutafel[hidden] { display: block; }
.mm-menutafel.ist-offen { opacity: 1; visibility: visible; transform: none; }

.mm-menutafel__innen {
	max-width: 480px;
	margin-inline: auto;
}

.mm-menutafel__block + .mm-menutafel__block {
	margin-top: var(--mm-luft);
	padding-top: var(--mm-luft);
}

.mm-menutafel ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Hauptpunkte: mittig, kraeftig, ohne Linien — die Luft zwischen den Zeilen
   trennt genug. */
.mm-menutafel a,
.mm-menutafel strong.active {
	display: block;
	padding: 14px 8px;
	color: var(--mm-akzent);
	font-size: 22px;
	font-weight: var(--mm-fett);
	letter-spacing: 0.04em;
	text-align: center;
	text-transform: uppercase;
}

.mm-menutafel strong.active { color: var(--mm-akzent-dunkel); }
.mm-menutafel li ul a { padding: 8px; font-size: 16px; font-weight: 400; }

/* Warenkorb und „Zum Training" sind Handlungen, keine Seiten — sie stehen
   als zwei Knoepfe nebeneinander unter der Liste: Warenkorb mit Rahmen und
   Symbol, Training gefuellt. Die Liste selbst bleibt eine Flexbox, damit die
   beiden in eine Zeile ruecken koennen. */
.mm-menutafel .mm-navi {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.mm-menutafel .mm-navi__punkt.warenkorb,
.mm-menutafel .mm-navi__punkt.mm-hervorgehoben {
	flex: 1 1 0;
	margin-top: var(--mm-luft);
}

.mm-menutafel .mm-navi__punkt.warenkorb { align-self: stretch; }

.mm-menutafel .mm-navi__verweis.warenkorb,
.mm-menutafel .mm-navi__verweis.mm-hervorgehoben {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 13px 18px;
	font-size: 16px;
	font-weight: var(--mm-fett);
	letter-spacing: 0.06em;
	border-radius: var(--mm-radius);
	border: 2px solid var(--mm-akzent);
}

.mm-menutafel .mm-navi__verweis.warenkorb::before {
	content: '';
	display: block;
	width: 22px;
	height: 22px;
	background: currentcolor;
	mask: var(--mm-symbol-warenkorb) center / contain no-repeat;
	-webkit-mask: var(--mm-symbol-warenkorb) center / contain no-repeat;
}

.mm-menutafel .mm-navi__verweis.mm-hervorgehoben {
	background: var(--mm-akzent);
	color: #fff;
}

/* Nebeneinander, sobald die Tafel breit genug ist: ab 400px teilen sich die
   beiden eine Zeile. */
@media (min-width: 400px) {
	.mm-menutafel .mm-navi { flex-direction: row; flex-wrap: wrap; }
	.mm-menutafel .mm-navi > .mm-navi__punkt { flex: 0 0 100%; }
	.mm-menutafel .mm-navi > .mm-navi__punkt.warenkorb,
	.mm-menutafel .mm-navi > .mm-navi__punkt.mm-hervorgehoben { flex: 1 1 0; }
	.mm-menutafel .mm-navi > .mm-navi__punkt.warenkorb + .mm-navi__punkt.mm-hervorgehoben { margin-left: var(--mm-luft-klein); }
}

/* Die Symbolverweise sind keine Menüzeilen — ohne diese Ausnahme bekämen sie
   die volle Zeilenhöhe der Navigation. */
.mm-menutafel .mm-soziales {
	justify-content: center;
	gap: 24px;
	padding-top: 0;
}

.mm-menutafel .mm-soziales a {
	display: inline-block;
	padding: 0;
	border: 0;
	font-size: 24px;
	color: var(--mm-akzent);
}

.mm-menutafel__schleier {
	position: fixed;
	inset: var(--mm-kopfhoehe, 88px) 0 0;
	z-index: 199;
	background: rgb(0 0 0 / 45%);
	opacity: 0;
	transition: opacity var(--mm-dauer) var(--mm-kurve);
}

.mm-menutafel__schleier[hidden] { display: none; }
.mm-menutafel__schleier.ist-offen { opacity: 1; }

@media (max-width: 1023px) {
	:root { --mm-kopfhoehe: 88px; }

	button.mm-menuknopf,
	button.mm-menuknopf:hover,
	button.mm-menuknopf:focus { display: block; }

	/* Auf schmalen Schirmen bleibt die Leiste immer farbig — durchsichtig über
	   dem Bild wäre das Logo dort schlecht lesbar, weil die Bühne fast die
	   ganze Breite einnimmt. Logo links, Knopf rechts. */
	.mm-kopf--ueberlagert {
		position: sticky;
		background: var(--mm-leiste);
	}

	.mm-kopf .mm-bahn {
		justify-content: space-between;
		gap: 0;
		min-height: var(--mm-kopfhoehe);
	}

	/* Die Hauptnavigation bleibt in der Leiste, zeigt aber nur noch zwei
	   Eintraege — Warenkorb und Anmeldung — und die als Symbol. Die Woerter
	   wandern in die Menuetafel; hier stehen sie nur fuer Vorleseprogramme. */
	.mm-kopf .mod_navigation { flex: 1 1 auto; min-width: 0; }

	.mm-kopf .mod_navigation .mm-navi {
		justify-content: flex-end;
		flex-wrap: nowrap;
		gap: 2px;
	}

	.mm-kopf .mod_navigation .mm-navi__punkt { display: none; }
	.mm-kopf .mod_navigation .mm-navi__punkt.float_left + .mm-navi__punkt.float_right { margin-left: 0; }

	.mm-kopf .mod_navigation .mm-navi__punkt.warenkorb,
	.mm-kopf .mod_navigation .mm-navi__punkt.mm-hervorgehoben { display: block; }

	.mm-kopf .mm-navi__verweis.warenkorb,
	.mm-kopf .mm-navi__verweis.mm-hervorgehoben {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		color: var(--mm-akzent);
		border-radius: var(--mm-radius);
	}

	.mm-kopf .mm-navi__verweis.mm-hervorgehoben .mm-navi__text {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		background: none;
	}

	.mm-kopf .mm-navi__verweis.warenkorb::before,
	.mm-kopf .mm-navi__verweis.mm-hervorgehoben::before {
		content: '';
		display: block;
		width: 26px;
		height: 26px;
		background: currentcolor;
	}

	.mm-kopf .mm-navi__verweis.warenkorb::before {
		mask: var(--mm-symbol-warenkorb) center / contain no-repeat;
		-webkit-mask: var(--mm-symbol-warenkorb) center / contain no-repeat;
	}

	.mm-kopf .mm-navi__verweis.mm-hervorgehoben::before {
		mask: var(--mm-symbol-nutzer) center / contain no-repeat;
		-webkit-mask: var(--mm-symbol-nutzer) center / contain no-repeat;
	}

	/* Nur mit echtem Zeiger — auf dem Telefon bliebe die Flaeche nach dem
	   Tippen stehen. */
	@media (hover: hover) {
		.mm-kopf .mm-navi__verweis.warenkorb:hover,
		.mm-kopf .mm-navi__verweis.mm-hervorgehoben:hover,
		button.mm-menuknopf:hover { background: rgb(255 255 255 / 45%); }
	}

	/* Untermenues gibt es in der Leiste nicht mehr — die stehen in der Tafel. */
	.mm-kopf .mod_navigation li ul { display: none; }
}

/* -----------------------------------------------------------------------------
 * 6. Bühne (Slider) und Pfad
 * -------------------------------------------------------------------------- */

.mm-buehne {
	position: relative;
	overflow: hidden;
	background: var(--mm-akzent-blass);
}

.mm-pfad {
	font-size: var(--mm-schrift-klein);
	color: var(--mm-text-leise);
	border-bottom: 1px solid var(--mm-linie);
}

.mm-pfad .mm-bahn { padding-block: var(--mm-luft-klein); }
.mm-pfad ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mm-pfad li::after { content: '›'; margin-left: 8px; color: var(--mm-linie-kraeftig); }
.mm-pfad li:last-child::after { content: none; }

/* -----------------------------------------------------------------------------
 * 7. Inhalt und Nebenspalten
 * -------------------------------------------------------------------------- */

.mm-inhalt {
	flex: 1 0 auto;
	width: 100%;
	max-width: var(--mm-bahn);
	margin-inline: auto;
	padding-inline: var(--mm-rand);
	padding-block: var(--mm-abschnitt);
}

/*
 * Kundenbereich: dort steht ueber dem Inhalt keine Buehne (im App-Layout ist
 * der Abschnitt "slider" abgeschaltet). Der obere Innenabstand des
 * Inhaltsbereichs und der Aussenabstand des Beitrags standen dadurch
 * uebereinander — zusammen ein leerer Streifen von 165px, wo im alten Bestand
 * 100px stehen. Oben traegt den Abstand der Beitrag, unten bleibt er hier.
 */
body.app .mm-inhalt { padding-block-start: 0; }

/*
 * Bahnbreite: 1580 abzueglich der beiden Raender ergibt genau 1500 nutzbare
 * Breite — fuer Kopfleiste, Inhalt und Fuss gleichermassen (Kundenwunsch
 * 2026-08-19; vorher 1240 auf der Hauptseite, 1580 nur im Kundenbereich).
 * Der Beitrag zieht die Bahn nicht noch einmal ein, siehe .mod_article >
 * .container in bausteine.css.
 */

/*
 * Die Wochenseite schiebt den Wochentext als eigenen Beitrag in den Beitrag
 * des Moduls. Der Aussenabstand von 100px, der oben unter der Kopfleiste
 * richtig ist, kam damit ein zweites Mal — zusammen mit dem Innenabstand des
 * Beitrags standen zwischen Videoliste und Trenner 209px Leere. Der innere
 * Beitrag bringt seinen Abstand selbst mit, er braucht den aeusseren nicht.
 */
body.app .mod_article .mod_article > .container { margin-top: 0; }

/* Volle Breite gibt es nur ohne Nebenspalte — sonst waere das Raster sinnlos. */
.mm-inhalt--links,
.mm-inhalt--rechts {
	display: grid;
	gap: var(--mm-abschnitt);
	grid-template-columns: minmax(0, 1fr);
}

.mm-nebenspalte { min-width: 0; }

@media (min-width: 1024px) {
	.mm-inhalt--links  { grid-template-columns: 280px minmax(0, 1fr); }
	.mm-inhalt--rechts { grid-template-columns: minmax(0, 1fr) 280px; }

	.mm-inhalt--links .mm-nebenspalte--links { grid-column: 1; grid-row: 1; }
	.mm-inhalt--links .mm-haupt { grid-column: 2; grid-row: 1; }
	.mm-inhalt--rechts .mm-haupt { grid-column: 1; grid-row: 1; }
	.mm-inhalt--rechts .mm-nebenspalte--rechts { grid-column: 2; grid-row: 1; }

	.mm-inhalt--links.mm-inhalt--rechts { grid-template-columns: 260px minmax(0, 1fr) 260px; }
	.mm-inhalt--links.mm-inhalt--rechts .mm-haupt { grid-column: 2; }
	.mm-inhalt--links.mm-inhalt--rechts .mm-nebenspalte--rechts { grid-column: 3; }
}

@media (max-width: 767px) {
	.mm-inhalt {
		padding-inline: var(--mm-luft);
		padding-block: var(--mm-abschnitt) 0;
	}
}

/* -----------------------------------------------------------------------------
 * 8. Fuß und Abschluss
 * -------------------------------------------------------------------------- */

.mm-fuss {
	margin-top: auto;
	background: var(--mm-akzent);
	color: rgb(255 255 255 / 88%);
	padding-block: 40px;
}

.mm-fuss a { color: #fff; }
.mm-fuss a:hover { text-decoration: underline; }

/* Eine Schriftgroesse fuer alles; die Spaltentitel unterscheiden sich nur
   durch Fettdruck. */
.mm-fuss h1, .mm-fuss h2, .mm-fuss h3, .mm-fuss h4 {
	margin: 0 0 12px;
	color: #fff;
	font-size: var(--mm-schrift);
	font-weight: var(--mm-fett);
	line-height: var(--mm-zeile);
}

/* Der Fussbeitrag traegt eigene Abstandsklassen — der Fuss bestimmt
   seinen Abstand selbst. */
.mm-fuss .mod_article { padding-block: 0; margin-block: 0; }

/* Die mobile Altregel schiebt jedem Beitrags-Container 50px Kopfabstand zu —
   im Fuss und im Abschluss hat sie nichts verloren. */
.mm-fuss .mod_article > div.container,
.mm-abschluss .mod_article > div.container { margin-top: 0 !important; }

/* Eine Schriftgroesse im ganzen Fuss — die Verweisliste erbte sonst 20px
   aus der allgemeinen Listenregel. */
.mm-fuss,
.mm-fuss ul,
.mm-fuss li,
.mm-fuss p,
.mm-fuss a { font-size: var(--mm-schrift); line-height: var(--mm-zeile); }

.mm-fuss ul { margin: 0; padding: 0; list-style: none; }
.mm-fuss li { padding: 2px 0; }
.mm-fuss p { margin: 0 0 12px; }

/* Mehr Luft zwischen den drei Bloecken als im Seitenraster ueblich. */
.mm-fuss .mm-rasterzeile { --mm-fuge: 45px; }

/* Markenspalte: Logo als weisse Flaeche auf dem Blau */
.mm-fuss .mm-fuss__logo { margin: 0 0 14px; }
.mm-fuss .mm-fuss__logo img {
	display: block;
	width: 150px;
	height: auto;
	filter: brightness(0) invert(1);
}

@media (max-width: 767px) {
	.mm-fuss { padding-block: 28px; }
	.mm-fuss .column { margin-bottom: 20px; }
	.mm-fuss .column:last-child { margin-bottom: 0; }
}

/* Der Abschluss schliesst unmittelbar an den Fuss an: gleiche Flaeche,
   getrennt durch eine feine Linie. */
.mm-abschluss {
	background: var(--mm-akzent);
	color: rgb(255 255 255 / 88%);
	font-size: var(--mm-schrift);
	border-top: 1px solid rgb(255 255 255 / 25%);
}

.mm-abschluss .mm-bahn { padding-block: 14px; }

/* Der Inhalt kommt als eingefuegter Beitrag mit eigener Huelle und
   Abstandsklassen — beides wird hier stillgelegt, die Zeile selbst
   ordnet links und rechts. */
.mm-abschluss .mod_article { padding-block: 0; margin-block: 0; }

.mm-abschluss .container {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 24px;
	align-items: center;
	justify-content: space-between;
}

.mm-abschluss a { color: #fff; text-decoration: none; }
.mm-abschluss a:hover { text-decoration: underline; }

/* Rechts stehen seit 2026-08-22 die Rechtsverweise (statt eines einzelnen
   Cookie-Verweises) — als Zeile mit Luft dazwischen, umbrechend auf schmalen
   Schirmen. */
.mm-abschluss .right {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
}

/* -----------------------------------------------------------------------------
 * 9. Nach oben
 * -------------------------------------------------------------------------- */

.mm-nachoben {
	position: fixed;
	right: var(--mm-luft);
	bottom: var(--mm-luft);
	z-index: 150;
	width: 44px;
	height: 44px;
	background: var(--mm-akzent);
	border-radius: 50%;
	box-shadow: var(--mm-schatten);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--mm-dauer) var(--mm-kurve),
	            transform var(--mm-dauer) var(--mm-kurve),
	            visibility var(--mm-dauer);
}

.mm-nachoben::before {
	content: '';
	position: absolute;
	inset: 0;
	margin: auto;
	width: 11px;
	height: 11px;
	border-top: 2px solid #fff;
	border-left: 2px solid #fff;
	transform: translateY(3px) rotate(45deg);
}

.mm-nachoben.ist-sichtbar {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* -----------------------------------------------------------------------------
 * 10. Vor- und Nachspann
 * -------------------------------------------------------------------------- */

.mm-vorspann:empty,
.mm-nachspann:empty { display: none; }