/* =============================================================================
 * MotionMatters — Bausteine: Stellwerte und Inhaltselemente
 *
 * Zwei Teile:
 *   A) die Stellwerte, die die Redaktion je Element setzt (Abstand, Groesse,
 *      Ausrichtung, Farbe) — als durchgaengige Zahlenskala;
 *   B) die Inhaltselemente selbst (Zeichenkasten, Teamkasten, Stimme …).
 *
 * Grundlage der Zahlen ist die Messung des bestehenden Auftritts
 * (docs/designsystem-vorlage.md). Die Skalen sind bewusst geglaettet: gemessen
 * wurden Zwischenwerte wie 15.81px oder 39.661px, die aus mehrfach
 * uebereinandergelegten Prozentangaben stammen und keine Absicht erkennen
 * lassen.
 *
 * Die Klassennamen entstehen aus Mm\ThemeBundle\Vorlage\Klassen — wer hier
 * etwas umbenennt, muss dort dieselbe Aenderung machen.
 * ========================================================================== */

:root {
	/* --- Schriftgroessen: mm-sg-1 … mm-sg-12 --- */
	--mm-sg-1: 13px;
	--mm-sg-2: 15px;
	--mm-sg-3: 20px;
	--mm-sg-4: 22px;
	--mm-sg-5: 29px;
	--mm-sg-6: 39px;
	--mm-sg-7: 51px;
	--mm-sg-8: 60px;
	--mm-sg-9: 72px;
	--mm-sg-10: 80px;
	--mm-sg-11: 90px;
	--mm-sg-12: 100px;

	/* --- Abstaende: mm-ao/au/io/iu/ia/zr-1 … -9 --- */
	--mm-abstand-0: 0;
	--mm-abstand-1: 5px;
	--mm-abstand-2: 10px;
	--mm-abstand-3: 20px;
	--mm-abstand-4: 30px;
	--mm-abstand-5: 40px;
	--mm-abstand-6: 50px;
	--mm-abstand-7: 60px;
	--mm-abstand-8: 80px;
	--mm-abstand-9: 100px;
}

/* =============================================================================
 * A) Stellwerte
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * A1. Abstaende
 *
 * Der Aufbau ist bei allen sechs Richtungen gleich, deshalb steht er hier nur
 * einmal ausgeschrieben: mm-ao = aussen oben, mm-au = aussen unten,
 * mm-io/mm-iu = innen oben/unten, mm-ia = innen rundum, mm-zr = Zwischenraum.
 * Ein angehaengtes -s gilt erst ab schmalen Bildschirmen (bis 767px).
 * -------------------------------------------------------------------------- */

.mm-ao-0 { margin-top: var(--mm-abstand-0); }
.mm-ao-1 { margin-top: var(--mm-abstand-1); }
.mm-ao-2 { margin-top: var(--mm-abstand-2); }
.mm-ao-3 { margin-top: var(--mm-abstand-3); }
.mm-ao-4 { margin-top: var(--mm-abstand-4); }
.mm-ao-5 { margin-top: var(--mm-abstand-5); }
.mm-ao-6 { margin-top: var(--mm-abstand-6); }
.mm-ao-7 { margin-top: var(--mm-abstand-7); }
.mm-ao-8 { margin-top: var(--mm-abstand-8); }
.mm-ao-9 { margin-top: var(--mm-abstand-9); }

.mm-au-0 { margin-bottom: var(--mm-abstand-0); }
.mm-au-1 { margin-bottom: var(--mm-abstand-1); }
.mm-au-2 { margin-bottom: var(--mm-abstand-2); }
.mm-au-3 { margin-bottom: var(--mm-abstand-3); }
.mm-au-4 { margin-bottom: var(--mm-abstand-4); }
.mm-au-5 { margin-bottom: var(--mm-abstand-5); }
.mm-au-6 { margin-bottom: var(--mm-abstand-6); }
.mm-au-7 { margin-bottom: var(--mm-abstand-7); }
.mm-au-8 { margin-bottom: var(--mm-abstand-8); }
.mm-au-9 { margin-bottom: var(--mm-abstand-9); }

.mm-io-0 { padding-top: var(--mm-abstand-0); }
.mm-io-1 { padding-top: var(--mm-abstand-1); }
.mm-io-2 { padding-top: var(--mm-abstand-2); }
.mm-io-3 { padding-top: var(--mm-abstand-3); }
.mm-io-4 { padding-top: var(--mm-abstand-4); }
.mm-io-5 { padding-top: var(--mm-abstand-5); }
.mm-io-6 { padding-top: var(--mm-abstand-6); }
.mm-io-7 { padding-top: var(--mm-abstand-7); }
.mm-io-8 { padding-top: var(--mm-abstand-8); }
.mm-io-9 { padding-top: var(--mm-abstand-9); }

.mm-iu-0 { padding-bottom: var(--mm-abstand-0); }
.mm-iu-1 { padding-bottom: var(--mm-abstand-1); }
.mm-iu-2 { padding-bottom: var(--mm-abstand-2); }
.mm-iu-3 { padding-bottom: var(--mm-abstand-3); }
.mm-iu-4 { padding-bottom: var(--mm-abstand-4); }
.mm-iu-5 { padding-bottom: var(--mm-abstand-5); }
.mm-iu-6 { padding-bottom: var(--mm-abstand-6); }
.mm-iu-7 { padding-bottom: var(--mm-abstand-7); }
.mm-iu-8 { padding-bottom: var(--mm-abstand-8); }
.mm-iu-9 { padding-bottom: var(--mm-abstand-9); }

.mm-ia-0 { padding: var(--mm-abstand-0); }
.mm-ia-1 { padding: var(--mm-abstand-1); }
.mm-ia-2 { padding: var(--mm-abstand-2); }
.mm-ia-3 { padding: var(--mm-abstand-3); }
.mm-ia-4 { padding: var(--mm-abstand-4); }
.mm-ia-5 { padding: var(--mm-abstand-5); }
.mm-ia-6 { padding: var(--mm-abstand-6); }
.mm-ia-7 { padding: var(--mm-abstand-7); }
.mm-ia-8 { padding: var(--mm-abstand-8); }
.mm-ia-9 { padding: var(--mm-abstand-9); }

.mm-zr-0 { gap: var(--mm-abstand-0); }
.mm-zr-1 { gap: var(--mm-abstand-1); }
.mm-zr-2 { gap: var(--mm-abstand-2); }
.mm-zr-3 { gap: var(--mm-abstand-3); }
.mm-zr-4 { gap: var(--mm-abstand-4); }
.mm-zr-5 { gap: var(--mm-abstand-5); }
.mm-zr-6 { gap: var(--mm-abstand-6); }
.mm-zr-7 { gap: var(--mm-abstand-7); }
.mm-zr-8 { gap: var(--mm-abstand-8); }
.mm-zr-9 { gap: var(--mm-abstand-9); }

@media (max-width: 767px) {
	.mm-ao-0-s { margin-top: var(--mm-abstand-0); }
	.mm-ao-1-s { margin-top: var(--mm-abstand-1); }
	.mm-ao-2-s { margin-top: var(--mm-abstand-2); }
	.mm-ao-3-s { margin-top: var(--mm-abstand-3); }
	.mm-ao-4-s { margin-top: var(--mm-abstand-4); }
	.mm-ao-5-s { margin-top: var(--mm-abstand-5); }
	.mm-ao-6-s { margin-top: var(--mm-abstand-6); }
	.mm-ao-7-s { margin-top: var(--mm-abstand-7); }
	.mm-ao-8-s { margin-top: var(--mm-abstand-8); }
	.mm-ao-9-s { margin-top: var(--mm-abstand-9); }

	.mm-au-0-s { margin-bottom: var(--mm-abstand-0); }
	.mm-au-1-s { margin-bottom: var(--mm-abstand-1); }
	.mm-au-2-s { margin-bottom: var(--mm-abstand-2); }
	.mm-au-3-s { margin-bottom: var(--mm-abstand-3); }
	.mm-au-4-s { margin-bottom: var(--mm-abstand-4); }
	.mm-au-5-s { margin-bottom: var(--mm-abstand-5); }
	.mm-au-6-s { margin-bottom: var(--mm-abstand-6); }
	.mm-au-7-s { margin-bottom: var(--mm-abstand-7); }
	.mm-au-8-s { margin-bottom: var(--mm-abstand-8); }
	.mm-au-9-s { margin-bottom: var(--mm-abstand-9); }

	.mm-zr-0-s { gap: var(--mm-abstand-0); }
	.mm-zr-3-s { gap: var(--mm-abstand-3); }
	.mm-zr-4-s { gap: var(--mm-abstand-4); }
	.mm-zr-5-s { gap: var(--mm-abstand-5); }
	.mm-zr-6-s { gap: var(--mm-abstand-6); }
	.mm-zr-7-s { gap: var(--mm-abstand-7); }
}

/* Innenabstaende der Hintergrundbild-Sektion — dort greift eine eigene Reihe,
   weil der Abstand zusaetzlich zum Bild wirkt. */
.mm-grundbildzone-io-3 { padding-top: var(--mm-abstand-3); }
.mm-grundbildzone-io-4 { padding-top: var(--mm-abstand-4); }
.mm-grundbildzone-io-5 { padding-top: var(--mm-abstand-5); }
.mm-grundbildzone-io-6 { padding-top: var(--mm-abstand-6); }
.mm-grundbildzone-io-7 { padding-top: var(--mm-abstand-7); }
.mm-grundbildzone-io-8 { padding-top: var(--mm-abstand-8); }
.mm-grundbildzone-io-9 { padding-top: var(--mm-abstand-9); }

.mm-grundbildzone-iu-3 { padding-bottom: var(--mm-abstand-3); }
.mm-grundbildzone-iu-4 { padding-bottom: var(--mm-abstand-4); }
.mm-grundbildzone-iu-5 { padding-bottom: var(--mm-abstand-5); }
.mm-grundbildzone-iu-6 { padding-bottom: var(--mm-abstand-6); }
.mm-grundbildzone-iu-7 { padding-bottom: var(--mm-abstand-7); }
.mm-grundbildzone-iu-8 { padding-bottom: var(--mm-abstand-8); }
.mm-grundbildzone-iu-9 { padding-bottom: var(--mm-abstand-9); }

/* Abstand am Beitrag — dieselbe Skala, aber am umschliessenden Beitrag. */
.mm-beitrag-io { padding-top: var(--mm-abstand-7); }
.mm-beitrag-iu { padding-bottom: var(--mm-abstand-7); }
.mm-beitrag-io-0 { padding-top: 0; }
.mm-beitrag-iu-0 { padding-bottom: 0; }
.mm-beitrag-io-3 { padding-top: var(--mm-abstand-3); }
.mm-beitrag-iu-3 { padding-bottom: var(--mm-abstand-3); }
.mm-beitrag-io-4 { padding-top: var(--mm-abstand-4); }
.mm-beitrag-iu-4 { padding-bottom: var(--mm-abstand-4); }
.mm-beitrag-io-5 { padding-top: var(--mm-abstand-5); }
.mm-beitrag-iu-5 { padding-bottom: var(--mm-abstand-5); }
.mm-beitrag-io-6 { padding-top: var(--mm-abstand-6); }
.mm-beitrag-iu-6 { padding-bottom: var(--mm-abstand-6); }
.mm-beitrag-io-8 { padding-top: var(--mm-abstand-8); }
.mm-beitrag-iu-8 { padding-bottom: var(--mm-abstand-8); }
.mm-beitrag-io-9 { padding-top: var(--mm-abstand-9); }
.mm-beitrag-iu-9 { padding-bottom: var(--mm-abstand-9); }

/* -----------------------------------------------------------------------------
 * A2. Schrift
 * -------------------------------------------------------------------------- */

.mm-sg-normal { font-size: var(--mm-schrift); }
.mm-sg-1 { font-size: var(--mm-sg-1); }
.mm-sg-2 { font-size: var(--mm-sg-2); }
.mm-sg-3 { font-size: var(--mm-sg-3); }
.mm-sg-4 { font-size: var(--mm-sg-4); }
.mm-sg-5 { font-size: var(--mm-sg-5); }
.mm-sg-6 { font-size: var(--mm-sg-6); }
.mm-sg-7 { font-size: var(--mm-sg-7); }
.mm-sg-8 { font-size: var(--mm-sg-8); }
.mm-sg-9 { font-size: var(--mm-sg-9); }
.mm-sg-10 { font-size: var(--mm-sg-10); }
.mm-sg-11 { font-size: var(--mm-sg-11); }
.mm-sg-12 { font-size: var(--mm-sg-12); }

/* Grosse Grade brauchen auf kleinen Bildschirmen Zurueckhaltung, sonst
   sprengen sie die Zeile. Die Stufen darunter bleiben, wie sie sind. */
@media (max-width: 767px) {
	.mm-sg-6 { font-size: 30px; }
	.mm-sg-7 { font-size: 34px; }
	.mm-sg-8 { font-size: 38px; }
	.mm-sg-9 { font-size: 42px; }
	.mm-sg-10,
	.mm-sg-11,
	.mm-sg-12 { font-size: 46px; }
}

.mm-fett-normal { font-weight: 400; }
.mm-fett-100 { font-weight: 100; }
.mm-fett-200 { font-weight: 200; }
.mm-fett-300 { font-weight: 300; }
.mm-fett-400 { font-weight: 400; }
.mm-fett-500 { font-weight: 500; }
.mm-fett-600 { font-weight: 600; }
.mm-fett-700 { font-weight: 700; }
.mm-fett-800 { font-weight: 800; }
.mm-fett-900 { font-weight: 900; }

.mm-zh-normal { line-height: var(--mm-zeile); }
.mm-zh-11 { line-height: 1.1; }
.mm-zh-12 { line-height: 1.2; }
.mm-zh-13 { line-height: 1.3; }
.mm-zh-14 { line-height: 1.4; }
.mm-zh-15 { line-height: 1.5; }
.mm-zh-16 { line-height: 1.6; }
.mm-zh-17 { line-height: 1.7; }
.mm-zh-18 { line-height: 1.8; }
.mm-zh-19 { line-height: 1.9; }
.mm-zh-20 { line-height: 2; }

.mm-stil-normal { font-style: normal; }
.mm-stil-kursiv { font-style: italic; }
.mm-stil-unterstrichen { text-decoration: underline; }
.mm-stil-sperrung-2 { letter-spacing: 2px; }
.mm-stil-sperrung-5 { letter-spacing: 5px; }

/* Zitat und Initial sind Auszeichnungen, keine reinen Schriftschnitte. */
.mm-stil-zitat {
	padding-left: var(--mm-abstand-3);
	border-left: 3px solid var(--mm-akzent);
	font-style: italic;
}

.mm-stil-initial > p:first-child::first-letter {
	float: left;
	margin: 4px 8px 0 0;
	font-size: 3em;
	line-height: 0.8;
	color: var(--mm-akzent);
}

.mm-schrift-titel { font-family: var(--mm-schriftfamilie); font-weight: var(--mm-fett); }
.mm-schrift-serifenlos { font-family: var(--mm-schriftfamilie); }
.mm-schrift-serif,
.mm-schrift-serif-2 { font-family: Georgia, 'Times New Roman', serif; }

/* -----------------------------------------------------------------------------
 * A3. Ausrichtung
 * -------------------------------------------------------------------------- */

.mm-aus-normal { text-align: inherit; }
.mm-aus-links { text-align: left; }
.mm-aus-mitte { text-align: center; }
.mm-aus-rechts { text-align: right; }
.mm-aus-blocksatz { text-align: justify; }
.mm-aus-links-blocksatz { text-align: justify; text-align-last: left; }
.mm-aus-mitte-blocksatz { text-align: justify; text-align-last: center; }
.mm-aus-rechts-blocksatz { text-align: justify; text-align-last: right; }
.mm-aus-fliessend { display: inline-block; }

@media (max-width: 767px) {
	.mm-aus-links-s { text-align: left; }
	.mm-aus-mitte-s { text-align: center; }
	.mm-aus-rechts-s { text-align: right; }
}

.mm-hoch-oben { align-self: flex-start; }
.mm-hoch-mitte { align-self: center; }
.mm-hoch-unten { align-self: flex-end; }

/* In einer Tabellenzelle greift align-self nicht — dort zaehlt vertical-align. */
td.mm-hoch-oben, .mm-textbildleiste__zelle.mm-hoch-oben { vertical-align: top; }
td.mm-hoch-mitte, .mm-textbildleiste__zelle.mm-hoch-mitte { vertical-align: middle; }
td.mm-hoch-unten, .mm-textbildleiste__zelle.mm-hoch-unten { vertical-align: bottom; }

/* -----------------------------------------------------------------------------
 * A4. Farbe
 * -------------------------------------------------------------------------- */

.mm-farbe-normal { color: var(--mm-text); }
.mm-farbe-akzent { color: var(--mm-akzent); }
.mm-farbe-zweit { color: var(--mm-akzent-dunkel); }
.mm-farbe-weiss { color: #fff; }
.mm-farbe-schwarz { color: #000; }
.mm-farbe-grau { color: var(--mm-text-leise); }
.mm-farbe-hellgrau { color: #aaa; }
.mm-farbe-dunkelgrau { color: var(--mm-text-kraeftig); }
.mm-farbe-hell { color: rgb(255 255 255 / 85%); }
.mm-farbe-dunkel { color: var(--mm-text-kraeftig); }
.mm-farbe-alarm { color: var(--mm-warnung); }
.mm-farbe-hinweis { color: var(--mm-akzent-dunkel); }
.mm-farbe-erfolg { color: var(--mm-bestaetigung); }
.mm-farbe-warnung { color: #c47f00; }

/* Farbrollen: wirken auf die Ueberschrift, den Untertitel, das Zeichen bzw.
   den Verweis innerhalb des Elements — nicht auf den ganzen Block. */
.mm-titel-akzent > :is(h1, h2, h3, h4, h5, h6),
.mm-titel-akzent.mm-untertitel { color: var(--mm-akzent); }
.mm-titel-weiss > :is(h1, h2, h3, h4, h5, h6) { color: #fff; }
.mm-titel-dunkelgrau > :is(h1, h2, h3, h4, h5, h6) { color: var(--mm-text-kraeftig); }
.mm-titel-schwarz > :is(h1, h2, h3, h4, h5, h6) { color: #000; }
.mm-titel-hellgrau > :is(h1, h2, h3, h4, h5, h6) { color: #aaa; }
.mm-titel-zweit > :is(h1, h2, h3, h4, h5, h6) { color: var(--mm-akzent-dunkel); }
.mm-titel-normal > :is(h1, h2, h3, h4, h5, h6) { color: var(--mm-text-kraeftig); }

.mm-untertitel-akzent { color: var(--mm-akzent); }
.mm-untertitel-weiss { color: #fff; }
.mm-untertitel-dunkelgrau { color: var(--mm-text-kraeftig); }
.mm-untertitel-hellgrau { color: #aaa; }
.mm-untertitel-zweit { color: var(--mm-akzent-dunkel); }
.mm-untertitel-normal { color: var(--mm-text); }

.mm-zeichen-akzent { color: var(--mm-akzent); }
.mm-zeichen-weiss { color: #fff; }
.mm-zeichen-dunkelgrau { color: var(--mm-text-kraeftig); }
.mm-zeichen-hellgrau { color: #aaa; }
.mm-zeichen-schwarz { color: #000; }
.mm-zeichen-zweit { color: var(--mm-akzent-dunkel); }
.mm-zeichen-normal { color: var(--mm-akzent); }

.mm-verweis-weiss a,
a.mm-verweis-weiss { color: #fff; }
.mm-verweis-schwarz a,
a.mm-verweis-schwarz { color: #000; }
.mm-verweis-akzent a,
a.mm-verweis-akzent { color: var(--mm-akzent); }
.mm-verweis-zweit a,
a.mm-verweis-zweit { color: var(--mm-akzent-dunkel); }
.mm-verweis-dunkelgrau a,
a.mm-verweis-dunkelgrau { color: var(--mm-text-kraeftig); }

/* Der Text im Element wird hell — gedacht fuer dunkle Flaechen. */
.mm-text-hell,
.mm-text-hell :is(h1, h2, h3, h4, h5, h6, p, li, td) { color: rgb(255 255 255 / 88%); }
.mm-text-dunkel,
.mm-text-dunkel :is(h1, h2, h3, h4, h5, h6, p, li, td) { color: var(--mm-text-kraeftig); }

.mm-grund-normal { background-color: transparent; }
.mm-grund-ohne { background-color: transparent; }
.mm-grund-weiss { background-color: #fff; }
.mm-grund-schwarz { background-color: #000; }
.mm-grund-akzent { background-color: var(--mm-akzent); }
.mm-grund-zweit { background-color: var(--mm-akzent-dunkel); }
.mm-grund-hell { background-color: var(--mm-flaeche-leise); }
.mm-grund-hellgrau { background-color: var(--mm-flaeche-leise); }
.mm-grund-grau { background-color: #ededed; }
.mm-grund-dunkelgrau { background-color: var(--mm-text-kraeftig); }
.mm-grund-dunkel { background-color: var(--mm-text-kraeftig); }
.mm-grund-alarm { background-color: var(--mm-warnung); }
.mm-grund-hinweis { background-color: var(--mm-akzent-hell); }
.mm-grund-erfolg { background-color: var(--mm-bestaetigung); }
.mm-grund-warnung { background-color: #f6c453; }
.mm-grund-sonder-1 { background-color: var(--mm-akzent-blass); }
.mm-grund-sonder-2 { background-color: var(--mm-akzent-hell); }
.mm-grund-sonder-3 { background-color: #ebedeb; }
.mm-grund-sonder-4 { background-color: #f1f1f1; }

/* Farbwechsel beim Ueberfahren — nur dort, wo ein Zeigegeraet vorhanden ist.
   Auf dem Touchscreen bliebe der Zustand sonst nach dem Tippen haengen. */
@media (hover: hover) {
	.mm-grund-akzent-schwebend:hover { background-color: var(--mm-akzent); }
	.mm-grund-zweit-schwebend:hover { background-color: var(--mm-akzent-dunkel); }
	.mm-grund-weiss-schwebend:hover { background-color: #fff; }
	.mm-grund-schwarz-schwebend:hover { background-color: #000; }
	.mm-grund-dunkelgrau-schwebend:hover { background-color: var(--mm-text-kraeftig); }
	.mm-grund-hellgrau-schwebend:hover { background-color: var(--mm-flaeche-leise); }

	.mm-text-weiss-schwebend:hover,
	.mm-text-weiss-schwebend:hover :is(h1, h2, h3, h4, h5, h6, p, i) { color: #fff; }
	.mm-text-akzent-schwebend:hover,
	.mm-text-akzent-schwebend:hover :is(h1, h2, h3, h4, h5, h6, p, i) { color: var(--mm-akzent); }
	.mm-text-dunkelgrau-schwebend:hover,
	.mm-text-dunkelgrau-schwebend:hover :is(h1, h2, h3, h4, h5, h6, p, i) { color: var(--mm-text-kraeftig); }
}

/* -----------------------------------------------------------------------------
 * A5. Mass, Rahmen, Schatten
 * -------------------------------------------------------------------------- */

.mm-breite-10 { width: 10%; }
.mm-breite-20 { width: 20%; }
.mm-breite-30 { width: 30%; }
.mm-breite-40 { width: 40%; }
.mm-breite-50 { width: 50%; }
.mm-breite-60 { width: 60%; }
.mm-breite-70 { width: 70%; }
.mm-breite-80 { width: 80%; }
.mm-breite-90 { width: 90%; }
.mm-breite-100 { width: 100%; }

.mm-hoechstbreite-voll { max-width: 100%; }
.mm-hoechstbreite-5 { max-width: 520px; }
.mm-hoechstbreite-6 { max-width: 720px; }
.mm-hoechstbreite-10 { max-width: 10%; }
.mm-hoechstbreite-20 { max-width: 20%; }
.mm-hoechstbreite-30 { max-width: 30%; }
.mm-hoechstbreite-40 { max-width: 40%; }
.mm-hoechstbreite-50 { max-width: 50%; }
.mm-hoechstbreite-60 { max-width: 60%; }
.mm-hoechstbreite-70 { max-width: 70%; }
.mm-hoechstbreite-80 { max-width: 80%; }
.mm-hoechstbreite-90 { max-width: 90%; }
.mm-hoechstbreite-100 { max-width: 100%; }

.mm-hoehe-eigen { height: auto; }
.mm-hoehe-5 { min-height: 260px; }
.mm-hoehe-6 { min-height: 380px; }
.mm-hoehe-7 { min-height: 500px; }
.mm-hoehe-8 { min-height: 640px; }
.mm-hoehe-9 { min-height: 780px; }

@media (max-width: 767px) {
	.mm-hoehe-6 { min-height: 300px; }
	.mm-hoehe-7 { min-height: 360px; }
	.mm-hoehe-8 { min-height: 420px; }
	.mm-hoehe-9 { min-height: 480px; }
}

.mm-radius-0 { border-radius: 0; }
.mm-radius-3 { border-radius: 3px; }
.mm-radius-5 { border-radius: 5px; }
.mm-radius-10 { border-radius: 10px; }
.mm-radius-15 { border-radius: 15px; }
.mm-radius-20 { border-radius: 20px; }
.mm-radius-30 { border-radius: 30px; }

.mm-schatten-0 { box-shadow: none; }
.mm-schatten-1 { box-shadow: 0 1px 3px rgb(0 0 0 / 8%); }
.mm-schatten-2 { box-shadow: 0 2px 6px rgb(0 0 0 / 10%); }
.mm-schatten-3 { box-shadow: 0 4px 12px rgb(0 0 0 / 12%); }
.mm-schatten-4 { box-shadow: 0 8px 20px rgb(0 0 0 / 14%); }
.mm-schatten-5 { box-shadow: 0 14px 34px rgb(0 0 0 / 16%); }

@media (hover: hover) {
	.mm-schatten-1-schwebend,
	.mm-schatten-2-schwebend,
	.mm-schatten-3-schwebend,
	.mm-schatten-4-schwebend,
	.mm-schatten-5-schwebend {
		transition: box-shadow var(--mm-dauer) var(--mm-kurve),
		            transform var(--mm-dauer) var(--mm-kurve);
	}

	.mm-schatten-1-schwebend:hover { box-shadow: 0 1px 3px rgb(0 0 0 / 8%); }
	.mm-schatten-2-schwebend:hover { box-shadow: 0 2px 6px rgb(0 0 0 / 10%); }
	.mm-schatten-3-schwebend:hover { box-shadow: 0 4px 12px rgb(0 0 0 / 12%); }
	.mm-schatten-4-schwebend:hover { box-shadow: 0 8px 20px rgb(0 0 0 / 14%); transform: translateY(-3px); }
	.mm-schatten-5-schwebend:hover { box-shadow: 0 14px 34px rgb(0 0 0 / 16%); transform: translateY(-4px); }
}

.mm-rahmen-ohne { border: 0; }
.mm-rahmen-1-dunkel { border: 1px solid var(--mm-linie-kraeftig); }
.mm-rahmen-1-hell { border: 1px solid rgb(255 255 255 / 40%); }
.mm-rahmen-5-dunkel { border: 5px solid var(--mm-flaeche-leise); }
.mm-rahmen-5-hell { border: 5px solid rgb(255 255 255 / 40%); }
.mm-rahmen-10-dunkel { border: 10px solid var(--mm-flaeche-leise); }
.mm-rahmen-10-hell { border: 10px solid rgb(255 255 255 / 40%); }
.mm-rahmen-fuge { padding: var(--mm-abstand-3); }

/* -----------------------------------------------------------------------------
 * A6. Bild
 * -------------------------------------------------------------------------- */

.mm-bild-fliessend img,
img.mm-bild-fliessend { width: 100%; height: auto; }

.mm-bild-quadrat img,
img.mm-bild-quadrat { aspect-ratio: 1; object-fit: cover; width: 100%; }

.mm-bild-rund img,
img.mm-bild-rund { aspect-ratio: 1; object-fit: cover; border-radius: 50%; width: 100%; }

.mm-bild-als-grund img { display: none; }

.mm-grundbild { background-size: cover; background-repeat: no-repeat; }

.mm-bildbreite-10 { width: 10%; }
.mm-bildbreite-20 { width: 20%; }
.mm-bildbreite-25 { width: 25%; }
.mm-bildbreite-30 { width: 30%; }
.mm-bildbreite-33 { width: 33.333%; }
.mm-bildbreite-40 { width: 40%; }
.mm-bildbreite-50 { width: 50%; }
.mm-bildbreite-60 { width: 60%; }
.mm-bildbreite-70 { width: 70%; }
.mm-bildbreite-80 { width: 80%; }
.mm-bildbreite-90 { width: 90%; }
.mm-bildbreite-100 { width: 100%; }

/* Auf schmalen Bildschirmen erscheint statt des Hintergrundbildes ein
   normales <img> — das skaliert verlaesslicher als background-size. */
.mm-bild-schmal { display: none; }

@media (max-width: 767px) {
	.mm-bild-schmal { display: block !important; }
	.mm-bild-schmal img { width: 100%; height: auto; }
	.mm-ohne-grundbild-s { background-image: none !important; }
	.mm-ohne-s { display: none !important; }
}

/* -----------------------------------------------------------------------------
 * A7. Schleier ueber Bildern
 * -------------------------------------------------------------------------- */

.mm-farbebene {
	position: absolute;
	right: 0;
	left: 0;
	z-index: 1;
	pointer-events: none;
}

.mm-farbebene-oben { top: 0; }
.mm-farbebene-unten { bottom: 0; }
.mm-ohne-farbebene { display: none; }

.mm-schleier-akzent::after,
.mm-schleier-dunkel::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.mm-schleier-akzent::after { background: var(--mm-akzent); }
.mm-schleier-dunkel::after { background: #000; }
.mm-schleier-schwarz::after { background: #000; }
.mm-schleier-weiss::after { background: #fff; }
.mm-schleier-hell::after { background: #fff; opacity: 0.5; }
.mm-schleier-voll::after { inset: 0; }
.mm-schleier-unten::after { top: auto; height: 50%; }
.mm-schleier-oben::after { bottom: auto; height: 50%; }

/*
 * Deckkraft. Steht am Beitrag eine eigene Farbebene als Element, greifen
 * dieselben Klassen unmittelbar — dort gibt es kein ::after, das gefaerbt
 * werden koennte.
 */
.mm-schleier-10::after, .mm-beitrag__farbebene.mm-schleier-10 { opacity: 0.1; }
.mm-schleier-20::after, .mm-beitrag__farbebene.mm-schleier-20 { opacity: 0.2; }
.mm-schleier-25::after, .mm-beitrag__farbebene.mm-schleier-25 { opacity: 0.25; }
.mm-schleier-30::after, .mm-beitrag__farbebene.mm-schleier-30 { opacity: 0.3; }
.mm-schleier-40::after, .mm-beitrag__farbebene.mm-schleier-40 { opacity: 0.4; }
.mm-schleier-50::after, .mm-beitrag__farbebene.mm-schleier-50 { opacity: 0.5; }
.mm-schleier-60::after, .mm-beitrag__farbebene.mm-schleier-60 { opacity: 0.6; }
.mm-schleier-75::after, .mm-beitrag__farbebene.mm-schleier-75 { opacity: 0.75; }
.mm-schleier-80::after, .mm-beitrag__farbebene.mm-schleier-80 { opacity: 0.8; }
.mm-schleier-90::after, .mm-beitrag__farbebene.mm-schleier-90 { opacity: 0.9; }

.mm-beitrag__farbebene.mm-schleier-akzent { background: var(--mm-akzent); }
.mm-beitrag__farbebene.mm-schleier-dunkel,
.mm-beitrag__farbebene.mm-schleier-schwarz { background: #000; }
.mm-beitrag__farbebene.mm-schleier-weiss { background: #fff; }
.mm-beitrag__farbebene.mm-schleier-voll { top: 0; }
.mm-beitrag__farbebene.mm-schleier-oben { top: 0; bottom: auto; }

/* Der Inhalt muss ueber dem Schleier liegen. */
.mm-schleier-akzent > *,
.mm-schleier-dunkel > *,
.mm-schleier-hell > * { position: relative; z-index: 2; }

/* -----------------------------------------------------------------------------
 * A8. Anordnung
 * -------------------------------------------------------------------------- */

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

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

.mm-voll-gefasst { width: 100%; max-width: none; }
.mm-uebergross { height: auto !important; }
.mm-seitentitel { margin-bottom: var(--mm-abstand-5); }
.mm-schwebekasten { display: flow-root; }
.mm-trennlinie-oben { border-top: 1px solid var(--mm-linie); }
.mm-hervorgehoben { font-weight: var(--mm-fett); color: var(--mm-akzent); }

/*
 * Contao setzt `tl_page.cssClass` an ZWEI Stellen: an den Navigationspunkt der
 * Seite und an den `<body>` der Seite selbst. Gemeint ist damit der
 * hervorgehobene Menuepunkt ("Kurse", "Zum Training") — landet die Klasse am
 * body, faerbt und fettet sie die ganze Seite. Genau das war im Kundenbereich
 * der Fall: jeder Text stand auf 700 und in der Akzentfarbe.
 *
 * Die Klasse bleibt, sie wird nur am body zurueckgenommen. Sie aus den Seiten
 * zu entfernen waere falsch — dann verloere das Menue seine Auszeichnung.
 */
body.mm-hervorgehoben {
	font-weight: inherit;
	color: var(--mm-text);
}

/* Gleich hohe Kacheln: die Zeile ist ein Flexbereich, die Kacheln strecken
   sich auf die Hoehe der hoechsten. */
/* Die ZEILE bleibt eine Zeile: nur strecken, nicht stapeln. Vorher stand sie
   mit in der Hüllen-Regel und bekam flex-direction: column — ihre Spalten
   fielen untereinander und schrumpften auf Inhaltsbreite. */
.mm-gleich-hoch { display: flex; flex-wrap: wrap; align-items: stretch; }
.mm-rasterzeile.mm-gleich-hoch { align-items: stretch; }

/* Die Hülle sorgt dafür, dass die Spalten einer Zeile gleich hoch werden.
   Ihre eigenen Kinder sind die Inhaltselemente EINER Spalte und gehören
   deshalb untereinander. Vorher stand hier eine Zeile mit Umbruch: dass
   Überschrift und Text trotzdem gestapelt erschienen, lag allein daran, dass
   sie in einer schmalen Spalte nicht nebeneinander passten — sobald die Spalte
   breit genug wurde, rutschten sie in eine Zeile. */
.mm-gleich-hoch-huelle { display: flex; flex-direction: column; align-items: stretch; }
.mm-gleich-hoch > *,
.mm-gleich-hoch-huelle > * { display: flex; flex-direction: column; }

/* -----------------------------------------------------------------------------
 * A9. Beitrag
 *
 * Der Beitrag ist die Buehne eines Abschnitts: er traegt Hintergrundfarbe,
 * Hintergrundbild und die Farbebene darueber. Sein Inhalt liegt in .container.
 * -------------------------------------------------------------------------- */

.mod_article { position: relative; }

.mod_article > .container {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--mm-bahn);
	margin-inline: auto;
	/* Kein eigener Rand: den traegt schon der Inhaltsbereich (.mm-inhalt).
	   Mit beiden Raendern kam von 1580 nur 1420 beim Inhalt an, seit der
	   Bahn von 1580 (2026-08-19) sollen es die vollen 1500 sein. */
	padding-inline: 0;
}

/* Volle Breite: der Beitrag reicht von Rand zu Rand, sein Inhalt auch.
   Der Inhaltsbereich ist auf die Bahnbreite begrenzt und hat seitlich Rand —
   ein randloser Beitrag muss da heraus. Die negativen Aussenabstaende ziehen
   ihn genau bis an die Fensterkanten. Ohne das blieb ein Beitrag mit
   Hintergrundfarbe (etwa das Band unter der Buehne) auf Inhaltsbreite stehen
   und die Farbe endete mitten auf der Seite. */
.mod_article.mm-voll {
	margin-inline: calc(50% - 50vw);
	padding-inline: 0;
}

.mod_article.mm-voll > .container { max-width: none; padding-inline: 0; }

/* Steht ein randloser Beitrag ganz oben oder ganz unten im Inhalt, schiebt sich
   der Innenabstand des Inhaltsbereichs als heller Streifen zwischen ihn und die
   Bühne beziehungsweise den Fuss. Farbige Bänder sollen dort aber unmittelbar
   anschliessen — deshalb wird der Abstand an dieser Stelle wieder aufgehoben. */
.mm-haupt > .mod_article.mm-voll:first-child {
	margin-top: calc(-1 * var(--mm-abschnitt));
}

.mm-haupt > .mod_article.mm-voll:last-child {
	margin-bottom: calc(-1 * var(--mm-abschnitt));
}

/* Volle Breite mit gefasstem Inhalt — die haeufigste Form. */
.mm-voll-gefasst > .container { max-width: var(--mm-bahn); }
.mm-voll-gefasst-mittel > .container { max-width: 1000px; }

.mm-grundbild {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.mm-beitrag__farbebene {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	pointer-events: none;
}

/* -----------------------------------------------------------------------------
 * A10. Raster
 * -------------------------------------------------------------------------- */

.mm-rasterzeile {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	margin-inline: calc(-1 * var(--mm-fuge, 15px));
}

.mm-rasterzeile > * {
	box-sizing: border-box;
	padding-inline: var(--mm-fuge, 15px);
}

.mm-fuge-0 { --mm-fuge: 0px; }
.mm-fuge-5 { --mm-fuge: 10px; }
.mm-fuge-6 { --mm-fuge: 15px; }
.mm-fuge-7 { --mm-fuge: 25px; }
.mm-ohne-fuge { --mm-fuge: 0px; }

.mm-spalte-1 { flex: 0 0 8.3333%; max-width: 8.3333%; }
.mm-spalte-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
.mm-spalte-3 { flex: 0 0 25%; max-width: 25%; }
.mm-spalte-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
.mm-spalte-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
.mm-spalte-6 { flex: 0 0 50%; max-width: 50%; }
.mm-spalte-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
.mm-spalte-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
.mm-spalte-9 { flex: 0 0 75%; max-width: 75%; }
.mm-spalte-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
.mm-spalte-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
.mm-spalte-12 { flex: 0 0 100%; max-width: 100%; }

@media (max-width: 1023px) {
	.mm-spalte-1,
	.mm-spalte-2,
	.mm-spalte-3,
	.mm-spalte-4 { flex-basis: 50%; max-width: 50%; }
}

@media (max-width: 767px) {
	.mm-rasterzeile > [class*='mm-spalte-'] { flex-basis: 100%; max-width: 100%; }
}

/* Rasterbehälter (CSS-Grid). Die Spaltenmaße kommen als eigene
   CSS-Eigenschaft vom Element selbst — siehe ce_mm_raster.html5. Damit
   braucht es keinen Vorrat an fertigen Aufteilungsklassen. */
.mm-raster {
	display: grid;
	grid-template-columns: var(--mm-raster-b, 100%);
	gap: 0 var(--mm-fuge, 15px);
	align-items: start;
}

@media (min-width: 768px) and (max-width: 1024px) {
	.mm-raster { grid-template-columns: var(--mm-raster-m, var(--mm-raster-b, 100%)); }
}

@media (max-width: 767px) {
	.mm-raster { grid-template-columns: var(--mm-raster-s, 100%); }
}

/* Ohne min-width sprengt langer Inhalt (Tabellen, Code) die Spalte. */
.mm-raster > * { min-width: 0; }

.mm-raster.mm-gleich-hoch { align-items: stretch; }
.mm-raster.mm-gleich-hoch > * { display: flex; flex-direction: column; }

.mm-teilung-50-50 > * { flex-basis: 50%; max-width: 50%; }
.mm-teilung-33-66 > *:first-child { flex-basis: 33.3333%; max-width: 33.3333%; }
.mm-teilung-33-66 > *:last-child { flex-basis: 66.6667%; max-width: 66.6667%; }
.mm-teilung-66-33 > *:first-child { flex-basis: 66.6667%; max-width: 66.6667%; }
.mm-teilung-66-33 > *:last-child { flex-basis: 33.3333%; max-width: 33.3333%; }

/* =============================================================================
 * B) Inhaltselemente
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * B1. Zeichenkasten — Zeichen oder Bild, Ueberschrift, Text, Verweis
 * -------------------------------------------------------------------------- */

.mm-zeichenkasten { position: relative; text-align: center; }

.mm-zeichenkasten__huelle {
	height: 100%;
	transition: background-color var(--mm-dauer) var(--mm-kurve);
}

.mm-zeichenkasten__huelle.padding { padding: var(--mm-abstand-4); }

.mm-zeichenkasten__zeichen .image_container img {
	display: block;
	margin-inline: auto;
	max-width: 100%;
	height: auto;
}

.mm-zeichenkasten__zeichen {
	/* Stufe 7 (51px) wie in der Vorlage — mit Stufe 5 wirkten die Symbole im
	   Band unter der Bühne deutlich zu klein neben ihrer Beschriftung. */
	font-size: var(--mm-sg-7);
	line-height: 1;
	color: var(--mm-akzent);
}

.mm-zeichenkasten__zeichen img {
	display: inline-block;
	max-width: 100%;
	height: auto;
}

.mm-zeichenkasten__text { margin-top: var(--mm-abstand-3); }

.mm-zeichenkasten__text .headline {
	margin: 0 0 var(--mm-abstand-2);
	font-size: var(--mm-sg-4);
	line-height: 1.25;
	color: var(--mm-text-kraeftig);
}

.mm-zeichenkasten__text .content > *:last-child { margin-bottom: 0; }

.mm-zeichenkasten__text .link {
	display: inline-block;
	margin-top: var(--mm-abstand-2);
	font-weight: var(--mm-fett);
}

/* Telefon: Zeichen und Beschriftung nebeneinander statt uebereinander.
   Gestapelt brauchten drei Kaesten im Band unter der Buehne fast einen
   ganzen Bildschirm; als Zeilen liest sich dasselbe auf einem Drittel.
   Kaesten mit Bild statt Zeichen (Gutschein-Ablauf) bleiben gestapelt —
   ein Foto auf 44px Breite sagt nichts mehr. */
@media (max-width: 767px) {
	.mm-zeichenkasten:not(:has(.mm-zeichenkasten__zeichen img)) { text-align: left; }

	.mm-zeichenkasten + .mm-zeichenkasten,
	.mm-rasterzeile > .column + .column > .mm-zeichenkasten { margin-top: var(--mm-abstand-2); }

	.mm-zeichenkasten__innen:not(:has(.mm-zeichenkasten__zeichen img)) {
		display: flex;
		align-items: center;
		gap: 16px;
	}

	.mm-zeichenkasten__innen:not(:has(.mm-zeichenkasten__zeichen img)) .mm-zeichenkasten__zeichen {
		flex: 0 0 44px;
		font-size: 34px;
		text-align: center;
	}

	.mm-zeichenkasten__innen:not(:has(.mm-zeichenkasten__zeichen img)) .mm-zeichenkasten__text {
		flex: 1 1 auto;
		min-width: 0;
		margin-top: 0;
	}

	.mm-zeichenkasten__innen:not(:has(.mm-zeichenkasten__zeichen img)) .headline {
		margin-bottom: 0;
		font-size: var(--mm-sg-3);
	}

	.mm-zeichenkasten__innen:not(:has(.mm-zeichenkasten__zeichen img)) .content { margin-top: 4px; }
}

/* -----------------------------------------------------------------------------
 * B2. Zeichenkasten V3 — Kachel, wahlweise mit Rueckseite
 * -------------------------------------------------------------------------- */

.mm-zeichenkasten3 { position: relative; }

.mm-zeichenkasten3__innen {
	position: relative;
	height: 100%;
	padding: var(--mm-abstand-4);
	transition: background-color var(--mm-dauer) var(--mm-kurve),
	            color var(--mm-dauer) var(--mm-kurve);
}

.mm-zeichenkasten3__innen > .fonticon,
.mm-zeichenkasten3__innen > i {
	display: block;
	margin-bottom: var(--mm-abstand-3);
	font-size: var(--mm-sg-5);
	line-height: 1;
	color: var(--mm-akzent);
}

/* -----------------------------------------------------------------------------
 * Symbole aus der zweiten Symbolschriftart
 *
 * Im Bestand stehen vier Symbole, die nicht aus FontAwesome stammen, sondern
 * aus einer zweiten Symbolschriftart. Sie blieben nach dem Neubau unsichtbar,
 * weil diese Schrift nicht mehr geladen wird — die Zeichen hingen an einem
 * ::before, das ohne die Schrift ins Leere lief. Statt eine ganze Schriftart
 * fuer vier Zeichen nachzuladen, stehen sie hier als Masken in der Textfarbe.
 * Groesse und Farbe erben sie wie zuvor vom umgebenden Text.
 * -------------------------------------------------------------------------- */

.ti-time,
.ti-credit-card,
.ti-light-bulb,
.ti-video-clapper {
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -0.12em;
	background: currentcolor;
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: contain;
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
}

.ti-time { mask-image: var(--mm-symbol-uhr); -webkit-mask-image: var(--mm-symbol-uhr); }
.ti-credit-card { mask-image: var(--mm-symbol-karte); -webkit-mask-image: var(--mm-symbol-karte); }
.ti-light-bulb { mask-image: var(--mm-symbol-gluehbirne); -webkit-mask-image: var(--mm-symbol-gluehbirne); }
.ti-video-clapper { mask-image: var(--mm-symbol-klappe); -webkit-mask-image: var(--mm-symbol-klappe); }

.mm-zeichenkasten3__text { padding-right: var(--mm-abstand-7); }

.mm-zeichenkasten3__text .headline {
	margin: 0 0 6px;
	font-size: var(--mm-sg-4);
	line-height: 1.25;
	color: var(--mm-text-kraeftig);
}

.mm-zeichenkasten3__text .mm-untertitel {
	margin: 0;
	font-size: var(--mm-schrift);
	line-height: var(--mm-zeile);
	font-weight: 400;
}

@media (max-width: 767px) {
	.mm-zeichenkasten3__text { padding-right: 0; }
}

/* Rueckseite: liegt deckungsgleich ueber der Kachel und wird eingeblendet. */
.mm-zeichenkasten3 .backside {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	padding: var(--mm-abstand-4);
	background: var(--mm-akzent);
	color: #fff;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--mm-dauer) var(--mm-kurve), visibility var(--mm-dauer);
}

.mm-zeichenkasten3:hover .backside,
.mm-zeichenkasten3:focus-within .backside { opacity: 1; visibility: visible; }

/* -----------------------------------------------------------------------------
 * B3. Hintergrundbild-Sektion
 * -------------------------------------------------------------------------- */

.mm-grundbildzone {
	position: relative;
	overflow: hidden;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.mm-grundbildzone__bild {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.mm-grundbildzone__huelle {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: inherit;
	height: 100%;
}

.mm-grundbildzone__innen {
	position: relative;
	z-index: 2;
	width: 100%;
}

/* Vollhoehe: theme.js traegt die berechnete Hoehe ein; bis dahin gilt die
   Bildschirmhoehe, damit die Sektion nicht kurz zusammenklappt. */
.mm-vollhoehe { min-height: 100vh; }

/* Ist der Inhalt hoeher als der Bildschirm, gibt theme.js die Hoehe frei. */
.mm-grundbildzone.mm-uebergross { height: auto !important; min-height: 0; }

.mm-parallax { will-change: transform; }

/* -----------------------------------------------------------------------------
 * B4. Kopfbild
 * -------------------------------------------------------------------------- */

.mm-kopfbild {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 480px;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

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

.mm-kopfbild__innen .content { max-width: 720px; }

.mm-kopfbild :is(h1, h2, h3) {
	margin: 0 0 var(--mm-abstand-2);
	font-size: var(--mm-sg-7);
	line-height: 1.15;
}

.mm-kopfbild .subline {
	font-size: var(--mm-sg-4);
	line-height: 1.4;
}

@media (max-width: 767px) {
	.mm-kopfbild { min-height: 260px; }
	.mm-kopfbild__innen { padding-inline: var(--mm-luft); }
}

/* -----------------------------------------------------------------------------
 * B5. Titelblock und Anleser
 * -------------------------------------------------------------------------- */

.mm-titelblock :is(h1, h2, h3, h4, h5, h6) {
	margin: 0;
	line-height: 1.2;
	overflow-wrap: break-word;
}

/* Traegt der Titelblock eine Farb- oder Staerkeangabe aus dem Wortschatz, gilt
   sie auch fuer die Ueberschrift darin. Die Klasse steht am umgebenden Block,
   die Ueberschrift bringt aber eigene Farbe und Staerke mit — ohne diese Regel
   erbte sie nichts und die Angabe blieb wirkungslos. */
.mm-titelblock[class*="mm-farbe-"] :is(h1, h2, h3, h4, h5, h6) { color: inherit; }
.mm-titelblock[class*="mm-fett-"] :is(h1, h2, h3, h4, h5, h6) { font-weight: inherit; }
.mm-titelblock[class*="mm-sg-"] :is(h1, h2, h3, h4, h5, h6) { font-size: inherit; }

.mm-titelblock .mm-untertitel {
	margin-top: var(--mm-abstand-2);
	font-size: var(--mm-sg-3);
	line-height: 1.4;
	font-weight: 400;
	color: var(--mm-text);
}

.mm-anleser {
	font-size: var(--mm-sg-3);
	line-height: 1.6;
	color: var(--mm-text);
}

.mm-anleser > *:last-child { margin-bottom: 0; }

.mm-textblock > *:last-child { margin-bottom: 0; }

/* Der Textblock traegt die Schriftmerkmale selbst — seine Absaetze und
   Ueberschriften duerfen sie nicht ueberschreiben. */
.mm-textblock :is(p, li, h1, h2, h3, h4, h5, h6) {
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

.mm-textblock :is(h1, h2, h3, h4, h5, h6) { margin: 0; font-weight: inherit; }

/* Ein Textblock mit Hoechstbreite (Inline-Stil aus der Maske) soll bei
   Mittelausrichtung auch als Block in der Mitte stehen, nicht nur sein Text
   links darin zentriert sein. */
.mm-textblock.mm-aus-mitte { margin-inline: auto; }
.mm-textblock.mm-aus-rechts { margin-left: auto; }

/* Merkmalsliste (Startseite „Was zeichnet unsere Kurse aus?"): Haken in
   Akzentfarbe, kein Aufzaehlungszeichen, Zeile als Flex-Paar.
   Gilt nur fuer das Listenelement (.ce_list). Frueher stand hier .attributes li
   — und .attributes ist die Huelle JEDER Rasterspalte: damit wurde jede
   Aufzaehlung der ganzen Seite blau, gross und ohne Aufzaehlungszeichen
   gesetzt, auch Fliesstextlisten wie die Kontraindikationen der Kursseite. */
.attributes .ce_list ul { margin: 0; padding: 0; list-style: none; }

.attributes .ce_list li {
	display: flex;
	align-items: baseline;
	gap: 18px;
	margin-bottom: 6px;
	font-size: var(--mm-schrift-gross);
	line-height: 1.5;
	color: var(--mm-akzent);
}

.attributes .ce_list li > i { flex: 0 0 auto; }

@media (max-width: 767px) {
	.attributes .ce_list li { gap: 14px; font-size: var(--mm-schrift); }
}

/* Der Bestand nennt das Geldsymbol noch beim alten Namen der Symbolschrift
   (Version 4); in Version 5 heisst es anders und blieb sonst leer. */
.fa.fa-money::before { content: "\f3d1"; }

/* -----------------------------------------------------------------------------
 * B6. Hinweiskasten
 * -------------------------------------------------------------------------- */

/* Der Kasten hat zwei Spalten: links eine schmale Spur fuer das Symbol, rechts
   den Text. Ohne sie stand das Symbol als eigene, leere Zeile ueber dem ersten
   Absatz. Ist kein Symbol da, bleibt die Spur leer und faellt auf 0 zusammen. */
.mm-hinweiskasten {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: var(--mm-luft);
	align-items: start;
	padding: var(--mm-abstand-4);
	border-left: 4px solid var(--mm-akzent);
	background: var(--mm-akzent-blass);
	border-radius: var(--mm-radius);
}

.mm-hinweiskasten > * { grid-column: 2; }

.mm-hinweiskasten > *:last-child { margin-bottom: 0; }

/* Das Symbol des Kastens kommt aus dem Inhalt und ist dort als Zeichen einer
   Symbolschrift hinterlegt. Wir zeichnen es stattdessen aus dem eigenen Satz
   als Maske; `font-size: 0` schluckt das Zeichen der Fremdschrift, das sonst
   daneben stehen bliebe. */
.mm-hinweiskasten > i.fa-bullhorn {
	grid-column: 1;
	grid-row: 1;
	width: 26px;
	height: 26px;
	margin-top: 0.15em;
	font-size: 0;
	background-color: var(--mm-akzent);
	-webkit-mask: var(--mm-symbol-megafon) center / contain no-repeat;
	        mask: var(--mm-symbol-megafon) center / contain no-repeat;
}

/* -----------------------------------------------------------------------------
 * B7. Bildkasten (Bild mit Text darueber)
 * -------------------------------------------------------------------------- */

.mm-bildkasten {
	position: relative;
	overflow: hidden;
	border-radius: var(--mm-radius-gross);
	transition: transform var(--mm-dauer) var(--mm-kurve),
	            box-shadow var(--mm-dauer) var(--mm-kurve);
}

.mm-bildkasten:hover {
	transform: translateY(-3px);
	box-shadow: var(--mm-schatten-hoch);
}

.mm-bildkasten__flaeche {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 300px;
	background-size: cover;
	background-position: center center;
}

/* Der Verweis umschliesst die ganze Kachel. */
.mm-bildkasten__verweis { display: block; color: inherit; }

.mm-bildkasten__bild {
	position: relative;
	display: flex;
	align-items: flex-end;
	background-size: cover;
	background-position: center center;
}

/* Verlauf am unteren Rand, damit die Schrift auf jedem Bild lesbar ist. */
.mm-bildkasten__bild::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgb(20 30 40 / 72%), rgb(20 30 40 / 0%) 65%);
}

.mm-bildkasten__bild .inside {
	position: relative;
	z-index: 2;
	width: 100%;
	padding: var(--mm-abstand-4);
	color: #fff;
}

.mm-bildkasten__bild .content :is(h1, h2, h3) {
	margin: 0 0 4px;
	color: #fff;
	font-size: var(--mm-sg-4);
	line-height: 1.2;
}

.mm-bildkasten__bild .content :is(h4, h5, h6) {
	margin: 0;
	color: rgb(255 255 255 / 88%);
	font-size: var(--mm-schrift);
	font-weight: 400;
	line-height: 1.4;
}

.mm-bildkasten .textbox {
	position: relative;
	z-index: 2;
	width: 100%;
	padding: var(--mm-abstand-4);
	color: #fff;
}

.mm-bildkasten .textbox :is(h1, h2, h3, h4, h5, h6) { margin: 0 0 6px; color: inherit; }

/* -----------------------------------------------------------------------------
 * B8. Bildblock und Bild-Text-Kasten
 * -------------------------------------------------------------------------- */

.mm-bildblock__innen { position: relative; }
.mm-bildblock img { display: block; width: 100%; height: auto; }

.mm-bildtextkasten { position: relative; overflow: hidden; }

.mm-bildtextkasten__innen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.mm-bildtextkasten__bild { flex: 1 1 50%; min-width: 0; }
.mm-bildtextkasten__bild img { display: block; width: 100%; height: auto; }

.mm-bildtextkasten__texthuelle { flex: 1 1 50%; min-width: 0; }
.mm-bildtextkasten__text { padding: var(--mm-abstand-6); }
.mm-bildtextkasten__text > *:last-child { margin-bottom: 0; }

.mm-bildtextkasten__band {
	position: absolute;
	top: var(--mm-abstand-3);
	left: 0;
	z-index: 3;
	padding: 6px 16px;
	background: var(--mm-akzent);
	color: #fff;
	font-size: var(--mm-sg-1);
	font-weight: var(--mm-fett);
	text-transform: uppercase;
	letter-spacing: 1px;
}

@media (max-width: 767px) {
	.mm-bildtextkasten__bild,
	.mm-bildtextkasten__texthuelle { flex-basis: 100%; }
	.mm-bildtextkasten__text { padding: var(--mm-abstand-4) var(--mm-luft); }
}

/* Bild links oder rechts vom Text — die Reihenfolge steuert flex, nicht das
   Markup, damit die Vorlesereihenfolge unveraendert bleibt. */
.mm-bild-rechts .mm-bildtextkasten__bild { order: 2; }
.mm-bild-links .mm-bildtextkasten__bild { order: 0; }

@media (max-width: 767px) {
	.mm-bild-zuerst-s .mm-bildtextkasten__bild { order: 0; }
	.mm-bild-danach-s .mm-bildtextkasten__bild { order: 2; }
}

/* -----------------------------------------------------------------------------
 * B9. Teamkasten
 * -------------------------------------------------------------------------- */

.mm-teamkasten { position: relative; overflow: hidden; }

.mm-teamkasten__innen { height: 100%; }

.mm-teamkasten .image { position: relative; overflow: hidden; }
.mm-teamkasten .image img { display: block; width: 100%; height: auto; }

.mm-teamkasten .overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgb(102 166 216 / 80%);
	color: #fff;
	font-size: var(--mm-sg-5);
	opacity: 0;
	transition: opacity var(--mm-dauer) var(--mm-kurve);
}

.mm-teamkasten .image a:hover .overlay,
.mm-teamkasten .image a:focus-visible .overlay { opacity: 1; }

.mm-teamkasten__text { padding-top: var(--mm-abstand-3); }

.mm-teamkasten__text .name {
	margin-bottom: 2px;
	font-size: var(--mm-sg-4);
	font-weight: var(--mm-fett);
	color: var(--mm-text-kraeftig);
}

.mm-teamkasten__text .function {
	margin-bottom: var(--mm-abstand-2);
	font-size: var(--mm-sg-1);
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--mm-akzent);
}

.mm-teamkasten__text .description { margin-bottom: var(--mm-abstand-2); }
.mm-teamkasten__text .phone,
.mm-teamkasten__text .email { font-size: var(--mm-sg-2); }

.mm-netzwerke {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: var(--mm-abstand-2);
}

.mm-netzwerke a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--mm-linie);
	border-radius: 50%;
	color: var(--mm-text-leise);
	transition: color var(--mm-dauer) var(--mm-kurve),
	            border-color var(--mm-dauer) var(--mm-kurve);
}

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

/* Zweite Darstellung: der Textblock liegt als Schleier ueber dem Bild. */
.mm-teamkasten__flaeche { position: relative; }
.mm-teamkasten__flaeche img { display: block; width: 100%; height: auto; }

.mm-teamkasten__schleier {
	position: absolute;
	inset: 0;
	display: flex;
	padding: var(--mm-abstand-4);
	background: rgb(59 60 66 / 82%);
	color: #fff;
	opacity: 0;
	transition: opacity var(--mm-dauer) var(--mm-kurve);
}

.mm-teamkasten:hover .mm-teamkasten__schleier,
.mm-teamkasten:focus-within .mm-teamkasten__schleier { opacity: 1; }

.mm-teamkasten__mitte { align-self: center; width: 100%; }

.mm-teamkasten__schleier :is(.name, .function, .description, .phone, .email) { color: #fff; }
.mm-teamkasten__schleier .function { color: var(--mm-akzent-hell); }
.mm-teamkasten__schleier .mm-netzwerke a { color: #fff; border-color: rgb(255 255 255 / 40%); }

/* Auf Touchgeraeten gibt es kein Ueberfahren — dort bleibt der Block sichtbar. */
@media (hover: none) {
	.mm-teamkasten__schleier { position: static; opacity: 1; background: var(--mm-text-kraeftig); }
}

/* -----------------------------------------------------------------------------
 * B10. Stimme (Testimonial)
 * -------------------------------------------------------------------------- */

.mm-stimme { position: relative; }

.mm-stimme__innen {
	position: relative;
	height: 100%;
	padding: var(--mm-abstand-5);
	background: var(--mm-flaeche);
	border-radius: var(--mm-radius-gross);
	box-shadow: var(--mm-schatten);
}

.mm-stimme__innen .text {
	font-size: var(--mm-sg-3);
	line-height: 1.55;
	font-style: italic;
}

.mm-stimme__innen .text > *:last-child { margin-bottom: 0; }

.mm-stimme .image img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 50%;
}

.mm-stimme .name {
	margin-top: var(--mm-abstand-3);
	font-weight: var(--mm-fett);
	color: var(--mm-text-kraeftig);
}

.mm-stimme .info,
.mm-stimme .additional { font-size: var(--mm-sg-1); color: var(--mm-text-leise); }

/* Das Anfuehrungszeichen ist Zierrat und darf nicht vorgelesen werden. */
.mm-stimme__innen .fa-quote-right {
	position: absolute;
	top: var(--mm-abstand-3);
	right: var(--mm-abstand-4);
	font-size: var(--mm-sg-6);
	color: var(--mm-akzent-hell);
}

/* -----------------------------------------------------------------------------
 * B11. Textbildleiste
 * -------------------------------------------------------------------------- */

.mm-textbildleiste {
	position: relative;
	border-radius: var(--mm-radius-gross);
	overflow: hidden;
}

.mm-textbildleiste > .inside { position: relative; }

/* Textspalte links, halbe Breite; die feste Hoehe kommt als Inline-Stil. */
.mm-textbildleiste .textbox {
	width: 50%;
	padding: var(--mm-abstand-6);
}

.mm-textbildleiste .textbox .mm-textbildleiste__tabelle { height: 100%; }

/* Bildspalte: fuellt die rechte Haelfte in voller Hoehe. */
.mm-textbildleiste > .inside > .mm-bildkasten__flaeche {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 50%;
	min-height: 0;
}

/* Zunge aus der Textflaeche ins Bild */
.mm-textbildleiste .mm-bildkasten__flaeche .arrow {
	position: absolute;
	left: -15px;
	top: 50%;
	width: 30px;
	height: 30px;
	transform: translateY(-50%) rotate(45deg);
}

@media (max-width: 767px) {
	.mm-textbildleiste .textbox {
		width: 100%;
		height: auto !important;
		padding: var(--mm-abstand-4) var(--mm-luft);
	}

	.mm-textbildleiste > .inside > .mm-bildkasten__flaeche { display: none; }
}

.mm-textbildleiste__tabelle {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}

.mm-textbildleiste__zelle {
	flex: 1 1 50%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.mm-textbildleiste__innen { padding: var(--mm-abstand-6); }
.mm-textbildleiste__innen > *:last-child { margin-bottom: 0; }
.mm-textbildleiste img { display: block; width: 100%; height: auto; }

@media (max-width: 767px) {
	.mm-textbildleiste__zelle { flex-basis: 100%; }
	.mm-textbildleiste__innen { padding: var(--mm-abstand-4) var(--mm-luft); }
}

/* -----------------------------------------------------------------------------
 * B12. Trenner
 * -------------------------------------------------------------------------- */

.mm-trenner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

/* Grundabstand, damit der Strich nicht an seinen Nachbarn klebt. In :where()
   geschrieben, also ohne Gewicht — eine gesetzte Abstandsklasse (mm-ao-…,
   mm-au-…) sticht ihn ohne Weiteres aus. */
:where(.mm-trenner) { margin-block: var(--mm-luft); }

.mm-trenner__linie {
	flex: 1 1 auto;
	height: 1px;
	background: var(--mm-linie);
}

.mm-trenner__linie--a,
.mm-trenner__linie--b { flex: 1 1 auto; }

/* Den Strich zeichnet der Rahmen selbst, nicht die drei Spans darin — die sind
   im Bestand auf Null zusammengefallen und tragen nichts bei. Vorher hatte
   hier ueberhaupt nichts eine Hoehe: der Trenner stand in der Seite und
   zeichnete nichts. Betroffen waren 18 Elemente, davon 5 auf oeffentlichen
   Seiten (Start, Gutscheine, Kasse, Kursseite, Bestellabschluss).

   Breite, Staerke und Farbe haengen an der Fassung. Die Werte sind am
   laufenden Bestand gemessen, nicht abgeschrieben:
     Fassung 2 -> 80px breit, 3px stark, 10% Schwarz
     Fassung 3 -> volle Breite, 1px stark, 10% Schwarz
     Fassung 5 -> 65px breit, 1px stark, Akzentfarbe
   Was hier nicht steht, faellt auf die volle Haarlinie zurueck. */
.mm-trenner--linien {
	width: var(--mm-trennerbreite, 100%);
	height: var(--mm-trennerstaerke, 1px);
	margin-inline: auto;
	background: var(--mm-trennerfarbe, rgb(0 0 0 / 10%));
}

.mm-trenner--linien > span { display: none; }

.mm-trenner--linien.mm-aus-links { margin-inline: 0 auto; }
.mm-trenner--linien.mm-aus-rechts { margin-inline: auto 0; }

.mm-trenner--linien.mm-fassung-2 { --mm-trennerbreite: 80px; --mm-trennerstaerke: 3px; }
.mm-trenner--linien.mm-fassung-3 { --mm-trennerbreite: 100%; }
.mm-trenner--linien.mm-fassung-5 { --mm-trennerbreite: 65px; --mm-trennerfarbe: var(--mm-akzent); }

.mm-trenner i,
.mm-trenner .fonticon { flex: 0 0 auto; color: var(--mm-akzent); }

/* -----------------------------------------------------------------------------
 * B13. Verweis als Schaltflaeche
 * -------------------------------------------------------------------------- */

.mm-knopf-5,
.mm-knopf-6,
.mm-knopf-7,
.mm-knopf-weiss-linie {
	display: inline-block;
	border-radius: var(--mm-radius);
	font-weight: var(--mm-fett);
	text-align: center;
	transition: background-color var(--mm-dauer) var(--mm-kurve),
	            color var(--mm-dauer) var(--mm-kurve),
	            border-color var(--mm-dauer) var(--mm-kurve);
}

.mm-knopf-5 { padding: 8px 18px; font-size: var(--mm-sg-1); }
.mm-knopf-6 { padding: 11px 24px; }
.mm-knopf-7 { padding: 15px 34px; font-size: var(--mm-sg-3); }

.mm-knopf-weiss-linie {
	padding: 13px 30px;
	border: 2px solid #fff;
	color: #fff;
}

.mm-knopf-weiss-linie:hover {
	background: #fff;
	color: var(--mm-text-kraeftig);
}

:is(a, button).mm-mit-pfeil::after {
	content: '→';
	margin-left: 8px;
	transition: transform var(--mm-dauer) var(--mm-kurve);
	display: inline-block;
}

:is(a, button).mm-mit-pfeil:hover::after { transform: translateX(3px); }

/* -----------------------------------------------------------------------------
 * B14. Buehne — der Bildlauf am Seitenkopf
 *
 * Alle Folien liegen deckungsgleich uebereinander; sichtbar ist die mit
 * .ist-sichtbar. Ohne Skript bleibt die erste stehen, der Inhalt ist also
 * auch dann vollstaendig lesbar.
 * -------------------------------------------------------------------------- */

.mm-buehne { position: relative; }

/* Der Beitrag, der die Bühne trägt, bringt von Haus aus Polster mit. In der
   Bühne stört das: darüber liegt die durchsichtige Kopfleiste, und das Polster
   schob einen weißen Streifen zwischen Leiste und Bild. */
.mm-buehne > .mod_article {
	padding-block: 0;
}

.mm-buehne__geruest {
	position: relative;
	overflow: hidden;
	background: var(--mm-text-kraeftig);
}

.mm-buehne__folien {
	position: relative;
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Alle Folien in derselben Rasterzelle — die hoechste bestimmt die Hoehe. */
.mm-folie {
	position: relative;
	grid-area: 1 / 1;
	/* Listenpunkte bekommen in basis.css einen unteren Aussenabstand — hier
	   schob der das dunkle Geruest 6px unter der Folie hervor: ein schmaler
	   Balken zwischen Buehne und naechstem Abschnitt. */
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Bildschirmfuellend (seit 2026-08-19, vorher fest 700px): die Leiste liegt
	   am Desktop ueber dem Video, also ist die Fensterhoehe die Buehne. Boden
	   620px, damit auf flachen Laptop-Fenstern Ueberschrift und Knopf lesbar
	   bleiben; Deckel 1000px, damit auf sehr hohen Monitoren kein Video steht,
	   in dem die Schrift verloren wirkt. svh statt vh, damit die Adressleiste
	   nicht mitzaehlt; die vh-Zeile ist der Rueckfall fuer aeltere Browser. */
	min-height: clamp(620px, 100vh, 1000px);
	min-height: clamp(620px, 100svh, 1000px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.8s var(--mm-kurve), visibility 0.8s;
}

.mm-folie.ist-sichtbar { opacity: 1; visibility: visible; }

.mm-folie__grund {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Schleier über dem Hintergrund: die Folien zeigen Videos, deren Helligkeit
   sich Bild für Bild ändert. Ohne ihn ist die weiße Schrift auf hellen
   Einzelbildern (Standbild vor dem Start, helle Szenen) nicht lesbar. */
.mm-folie::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to bottom, rgb(0 0 0 / 22%), rgb(0 0 0 / 46%));
	pointer-events: none;
}

.mm-folie__inhalt {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--mm-abstand-3);
	width: 100%;
	max-width: var(--mm-bahn);
	padding: var(--mm-abstand-7) var(--mm-rand);
	text-align: center;
}

.mm-folie__text {
	font-size: var(--mm-folie-sg, var(--mm-sg-5));
	line-height: 1.15;
	color: #fff;
	text-wrap: balance;
}

.mm-folie__knopf {
	display: inline-block;
	padding: 14px 32px;
	border: 2px solid currentcolor;
	border-radius: var(--mm-radius);
	font-size: var(--mm-schrift);
	font-weight: var(--mm-fett);
	color: #fff;
	transition: background-color var(--mm-dauer) var(--mm-kurve),
	            color var(--mm-dauer) var(--mm-kurve);
}

.mm-folie__knopf:hover,
.mm-folie__knopf:focus-visible { background: #fff; color: var(--mm-text-kraeftig); }

.mm-folie__bild img { display: block; max-width: 100%; height: auto; }

/* Deckt die ganze Folie ab; die Schaltflaeche liegt darueber. */
.mm-folie__flaechenverweis { position: absolute; inset: 0; z-index: 2; }

.mm-buehne__punkte {
	position: absolute;
	bottom: var(--mm-abstand-3);
	left: 50%;
	z-index: 3;
	display: flex;
	gap: 10px;
	transform: translateX(-50%);
}

.mm-buehne__punkt {
	width: 12px;
	height: 12px;
	padding: 0;
	background: rgb(255 255 255 / 45%);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color var(--mm-dauer) var(--mm-kurve),
	            transform var(--mm-dauer) var(--mm-kurve);
}

.mm-buehne__punkt.ist-aktiv { background: #fff; transform: scale(1.3); }

/* Auf dem Telefon fuellt die Buehne den Bildschirm: Fensterhoehe abzueglich
   der Kopfleiste, die darueber im Fluss steht. svh statt vh, damit die
   Adressleiste des Browsers nicht mitgerechnet wird und nichts springt;
   die vh-Zeile ist die Rueckfallebene fuer aeltere Browser. */
@media (max-width: 767px) {
	.mm-folie {
		min-height: calc(100vh - var(--mm-kopfhoehe, 88px));
		min-height: calc(100svh - var(--mm-kopfhoehe, 88px));
	}
	.mm-folie__inhalt { padding: var(--mm-abstand-5) var(--mm-luft); }
	.mm-folie__text { font-size: var(--mm-folie-sg-s, var(--mm-sg-4)); }
	.mm-folie__knopf { padding: 11px 24px; }
}

/* Wer Bewegung abbestellt hat, bekommt keine Ueberblendung und kein
   selbsttaetiges Weiterschalten (das regelt zusaetzlich theme.js). */
@media (prefers-reduced-motion: reduce) {
	.mm-folie { transition: none; }
}

/* -----------------------------------------------------------------------------
 * B15. Sterne (Bewertung)
 * -------------------------------------------------------------------------- */

.mm-sterne-1,
.mm-sterne-2,
.mm-sterne-3,
.mm-sterne-4,
.mm-sterne-5 { color: #f0b429; letter-spacing: 2px; }

/* =============================================================================
 * C. Startseite — Richtung „Luftig" (Entwurf 2026-08-19, vom Kunden gewaehlt)
 *
 * Die Beitraege tragen eine Klasse (tl_article.cssID): mm-vorteile,
 * mm-schritte, mm-merkmale, mm-kursband, mm-stimmen-schau. Der Inhalt bleibt
 * im Backend wie gewohnt pflegbar — hier steht nur, wie er aussieht.
 * Vorzeile = kleine Zeile in Versalien ueber einer Ueberschrift (Kern-
 * Textelement mit Klasse mm-vorzeile).
 * ========================================================================== */

.mm-vorzeile,
.mm-vorzeile p {
	margin: 0;
	font-size: 14px;
	font-weight: var(--mm-fett);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mm-akzent);
}

.mm-vorzeile + .mm-titelblock { margin-top: var(--mm-abstand-3); }

/* Nur fuer Maschinen lesbar (Seitentitel-Beitrag der Startseite). */
.mm-unsichtbar {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* --- C1. Vorteile-Band: weiss, Zeichen im hellblauen Kreis, Titel daneben --- */
.mm-vorteile {
	padding-block: 48px;
	background: var(--mm-flaeche);
	border-bottom: 1px solid var(--mm-linie);
}

.mm-vorteile > .container {
	max-width: var(--mm-bahn);
	padding-inline: var(--mm-rand);
}

.mm-vorteile .mm-zeichenkasten__innen {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	text-align: left;
}

.mm-vorteile .mm-zeichenkasten__zeichen {
	display: inline-flex;
	flex: 0 0 56px;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--mm-akzent-hell);
	color: var(--mm-akzent);
	font-size: 28px;
}

.mm-vorteile .mm-zeichenkasten__text { margin: 0; }

.mm-vorteile .mm-zeichenkasten__text .headline {
	margin: 0;
	font-size: var(--mm-sg-4);
	color: var(--mm-text-kraeftig);
}

/* --- C2. Schritte: Vorzeile, grosser Titel, drei helle Karten --- */
.mm-schritte { padding-block: 96px 112px; }

.mm-schritte > .container { text-align: center; }

.mm-schritte .mm-titelblock h2,
.mm-merkmale .mm-titelblock h2,
.mm-stimmen-schau .mm-textblock.mm-sg-7 {
	font-size: 44px;
	font-weight: var(--mm-fett);
	line-height: 1.15;
	color: var(--mm-text-kraeftig);
}

.mm-schritte .mm-titelblock { margin-bottom: var(--mm-abstand-3); }

.mm-schritte > .container > .mm-textblock {
	max-width: 680px !important;
	margin-bottom: 64px;
	font-size: 19px;
	line-height: 1.6;
}

.mm-schritte .mm-rasterzeile { --mm-fuge: 20px; }

.mm-schritte .mm-zeichenkasten3__innen,
.mm-schritte .mm-zeichenkasten3__innen:hover {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	padding: 40px 32px;
	border-radius: var(--mm-radius-gross);
	background: var(--mm-akzent-blass);
	color: var(--mm-text);
	text-align: center;
}

.mm-schritte .mm-zeichenkasten3__text { display: contents; }

.mm-schritte .mm-zeichenkasten3__innen > i {
	order: 2;
	margin: 0;
	font-size: 32px;
	color: var(--mm-akzent-dunkel);
}

.mm-schritte .mm-zeichenkasten3 .headline {
	order: 1;
	margin: 0;
	font-size: 64px;
	font-weight: var(--mm-fett);
	line-height: 1;
	color: var(--mm-akzent);
}

.mm-schritte .mm-zeichenkasten3 .mm-untertitel {
	order: 3;
	margin: 0;
	font-size: 24px;
	font-weight: var(--mm-fett);
	color: var(--mm-text-kraeftig);
}

/* --- C3. Merkmale: Kursbild links, Vorzeile + Titel + Liste rechts --- */
.mm-merkmale { padding-block: 0 112px; }

.mm-merkmale .mm-grundbildzone { background: transparent; padding: 0; }

.mm-merkmale .mm-grundbildzone__innen {
	display: grid;
	grid-template-columns: 5fr 7fr;
	column-gap: 72px;
	align-items: center;
	align-content: center;
	max-width: none;
	padding: 0;
}

.mm-merkmale__bild {
	grid-column: 1;
	grid-row: 1 / span 3;
	margin: 0;
}

.mm-merkmale__bild figure { margin: 0; }

.mm-merkmale__bild img {
	display: block;
	width: 100%;
	height: 520px;
	object-fit: cover;
	border-radius: var(--mm-radius-gross);
}

.mm-merkmale .mm-vorzeile,
.mm-merkmale .mm-titelblock,
.mm-merkmale .mm-rasterzeile { grid-column: 2; }

.mm-merkmale .mm-titelblock {
	margin: var(--mm-abstand-3) 0 28px;
	text-align: left;
}

.mm-merkmale .mm-rasterzeile { --mm-fuge: 20px; }

.mm-merkmale .attributes li {
	gap: 14px;
	margin-bottom: 18px;
	font-size: 19px;
	color: var(--mm-text-kraeftig);
}

.mm-merkmale .attributes li > i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--mm-akzent-hell);
	color: var(--mm-akzent);
	font-size: 13px;
}

/* --- C4. Kursband: blaue Flaeche, Vorzeile, grosser Titel, weisser Knopf --- */
.mm-kursband { padding-block: 88px; }

/* Das graue Stimmen-Band schliesst direkt an das blaue Kursband an. */
.mm-haupt > .mm-kursband { margin-bottom: 0; }

.mm-kursband > .container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
	padding-inline: var(--mm-rand);
	text-align: center;
}

.mm-kursband .mm-vorzeile,
.mm-kursband .mm-vorzeile p { color: var(--mm-akzent-hell); }

.mm-kursband .mm-textblock {
	max-width: 900px !important;
	font-size: 52px;
	font-weight: var(--mm-fett);
	line-height: 1.1;
	color: #fff;
}

.mm-kursband .hyperlink_txt,
.mm-kursband .hyperlink_txt:hover {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 32px;
	border: 2px solid #fff;
	border-radius: var(--mm-radius);
	background: #fff;
	color: var(--mm-akzent-dunkel);
	font-size: 16px;
	font-weight: var(--mm-fett);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.mm-kursband .hyperlink_txt:hover { background: var(--mm-akzent-hell); border-color: var(--mm-akzent-hell); }

/* --- C5. Teilnehmerstimmen: graue Flaeche, eine Stimme je Ansicht --- */
.mm-stimmen-schau {
	padding-block: 112px;
	background: var(--mm-flaeche-leise);
}

.mm-stimmen-schau .mm-grundbildzone { background: transparent; padding: 0; }

.mm-stimmen-schau .mm-grundbildzone__innen {
	max-width: var(--mm-bahn);
	padding: 0 var(--mm-rand);
	text-align: center;
}

.mm-stimmen-schau .mm-textblock.mm-sg-7 { margin-bottom: var(--mm-abstand-3); }

.mm-stimmen-schau .mm-grundbildzone__innen > .mm-textblock:not(.mm-vorzeile):not(.mm-sg-7) {
	margin-bottom: 56px;
	font-size: 19px;
	line-height: 1.6;
}

/* Die Schau baut theme.js aus den vorhandenen Stimmen; ohne Skript bleibt das
   Raster aus zwei Reihen stehen. */
.mm-schau {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 48px 56px;
	border-radius: var(--mm-radius-gross);
	background: var(--mm-flaeche);
	box-shadow: 0 2px 8px rgb(0 0 0 / 6%);
	text-align: left;
	box-sizing: border-box;
}

.mm-schau__fenster { overflow: hidden; }

.mm-schau__bahn {
	display: flex;
	width: 100%;
	transition: transform 0.4s var(--mm-kurve);
}

@media (prefers-reduced-motion: reduce) {
	.mm-schau__bahn { transition: none; }
}

.mm-schau .mm-stimme { flex: 0 0 100%; min-width: 0; }

.mm-schau .mm-stimme__innen {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-height: 300px;
	padding: 0;
	background: none;
	border-radius: 0;
	box-shadow: none;
}

.mm-schau .mm-stimme__innen::before {
	content: "";
	display: block;
	width: 36px;
	height: 36px;
	background: currentcolor;
	color: var(--mm-akzent);
	mask: var(--mm-symbol-zitat) center / contain no-repeat;
	-webkit-mask: var(--mm-symbol-zitat) center / contain no-repeat;
}

.mm-schau .mm-stimme__innen .fa-quote-right { display: none; }

.mm-schau .mm-stimme__innen .text {
	font-size: 24px;
	line-height: 1.5;
	font-style: normal;
	color: var(--mm-text-kraeftig);
}

.mm-schau .mm-stimme .info {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	column-gap: 16px;
	align-items: center;
	margin-top: auto;
	font-size: var(--mm-schrift);
}

.mm-schau .mm-stimme .info figure { grid-row: 1 / span 2; margin: 0; }
.mm-schau .mm-stimme .info .name { grid-column: 2; align-self: end; }
.mm-schau .mm-stimme .info .additional { grid-column: 2; align-self: start; }

.mm-schau .mm-stimme__innen .text p { margin: 0 0 0.6em; }
.mm-schau .mm-stimme__innen .text .mm-textbildleiste__innen { padding: 0; }

.mm-schau .mm-stimme .info img {
	display: block;
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 50%;
}

.mm-schau .mm-stimme .name { margin: 0; }

.mm-schau .mm-stimme .additional {
	font-size: 15px;
	white-space: normal;
}

.mm-schau__leiste {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid var(--mm-linie);
}

.mm-schau__punkte { display: flex; gap: 10px; }

button.mm-schau__punkt,
button.mm-schau__punkt:hover {
	width: 12px;
	height: 12px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--mm-akzent-hell);
	cursor: pointer;
}

button.mm-schau__punkt.ist-aktiv,
button.mm-schau__punkt.ist-aktiv:hover { background: var(--mm-akzent); }

.mm-schau__pfeile { display: flex; gap: 12px; }

button.mm-schau__pfeil,
button.mm-schau__pfeil:hover {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 2px solid var(--mm-akzent);
	border-radius: 50%;
	background: var(--mm-flaeche);
	color: var(--mm-akzent);
	cursor: pointer;
}

button.mm-schau__pfeil--weiter,
button.mm-schau__pfeil--weiter:hover {
	background: var(--mm-akzent);
	color: #fff;
}

button.mm-schau__pfeil:hover { border-color: var(--mm-akzent-dunkel); }
button.mm-schau__pfeil--weiter:hover { background: var(--mm-akzent-dunkel); }

button.mm-schau__pfeil::before {
	content: "";
	width: 22px;
	height: 22px;
	background: currentcolor;
	mask: var(--mm-symbol-pfeil) center / contain no-repeat;
	-webkit-mask: var(--mm-symbol-pfeil) center / contain no-repeat;
}

button.mm-schau__pfeil--zurueck::before { transform: scaleX(-1); }

/* --- Telefon und Tablet --- */
@media (max-width: 1023px) {
	.mm-merkmale .mm-grundbildzone__innen {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--mm-abstand-3);
	}

	.mm-merkmale__bild { grid-column: 1; grid-row: auto; }
	.mm-merkmale__bild img { height: 360px; }
	.mm-merkmale .mm-vorzeile,
	.mm-merkmale .mm-titelblock,
	.mm-merkmale .mm-rasterzeile { grid-column: 1; }
	.mm-merkmale .mm-titelblock { margin-top: 0; }
}

@media (max-width: 767px) {
	.mm-vorteile { padding-block: 28px; }
	.mm-vorteile .mm-rasterzeile > .column + .column > .mm-zeichenkasten { margin-top: 14px; }
	.mm-vorteile .mm-zeichenkasten__innen { justify-content: flex-start; gap: 14px; }
	.mm-vorteile .mm-zeichenkasten__zeichen { flex-basis: 44px; width: 44px; height: 44px; font-size: 24px; }
	.mm-vorteile .mm-zeichenkasten__text .headline { font-size: 18px; }

	.mm-schritte { padding-block: 56px; }
	.mm-schritte .mm-titelblock h2,
	.mm-merkmale .mm-titelblock h2,
	.mm-stimmen-schau .mm-textblock.mm-sg-7 { font-size: 30px; }
	.mm-schritte > .container > .mm-textblock { margin-bottom: 32px; font-size: var(--mm-schrift); }
	.mm-schritte .mm-rasterzeile > .column + .column { margin-top: 14px; }

	.mm-schritte .mm-zeichenkasten3__innen,
	.mm-schritte .mm-zeichenkasten3__innen:hover {
		flex-direction: row;
		gap: 18px;
		padding: 20px 22px;
		text-align: left;
	}

	.mm-schritte .mm-zeichenkasten3 .headline { font-size: 40px; }
	.mm-schritte .mm-zeichenkasten3 .mm-untertitel { order: 2; font-size: 20px; }
	.mm-schritte .mm-zeichenkasten3__innen > i { order: 3; margin-left: auto; font-size: 26px; }

	.mm-merkmale { padding-bottom: 56px; }
	.mm-merkmale__bild img { height: 240px; }
	.mm-merkmale .attributes li { margin-bottom: 12px; font-size: var(--mm-schrift); }
	.mm-merkmale .attributes li > i { width: 24px; height: 24px; font-size: 12px; }

	.mm-kursband { padding-block: 56px; }
	.mm-kursband > .container { gap: 20px; padding-inline: var(--mm-luft); }
	.mm-kursband .mm-textblock { font-size: 32px; line-height: 1.15; }

	.mm-stimmen-schau { padding-block: 56px; }
	.mm-stimmen-schau .mm-grundbildzone__innen { padding: 0 var(--mm-luft); }
	.mm-stimmen-schau .mm-grundbildzone__innen > .mm-textblock:not(.mm-vorzeile):not(.mm-sg-7) { margin-bottom: 28px; font-size: var(--mm-schrift); }
	.mm-schau { padding: 28px 24px; }
	.mm-schau .mm-stimme__innen { min-height: 260px; }
	.mm-schau .mm-stimme__innen .text { font-size: 18px; }
}

/* -----------------------------------------------------------------------------
 * Clip-Schau
 *
 * Kurze, stumme Ausschnitte aus dem Kurs, die nacheinander laufen. Steht dort,
 * wo sonst ein Standbild stuende: bewegte Uebungen zeigen in zehn Sekunden
 * mehr vom Kurs als ein Foto. Die Reihenfolge steht als Liste in
 * data-mm-clipschau am Rahmen (siehe theme.js), die Dateien liegen unter
 * files/inhalte/videos/kursvorschau/ — je Clip eine .mp4 und ein .jpg
 * gleichen Namens als Standbild.
 * -------------------------------------------------------------------------- */

.mm-clipschau {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: var(--mm-radius-gross);
	background: var(--mm-text-kraeftig);
	box-shadow: var(--mm-schatten-hoch);
}

.mm-clipschau__film {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* Fahne unten links: benennt, was zu sehen ist, ohne den Clip zu verdecken. */
.mm-clipschau__fahne {
	position: absolute;
	left: var(--mm-luft);
	bottom: var(--mm-luft);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgb(255 255 255 / 92%);
	font-size: var(--mm-schrift-klein);
	font-weight: var(--mm-fett);
	line-height: 1.4;
	color: var(--mm-text-kraeftig);
}

.mm-clipschau__fahne .mm-symbol {
	width: 16px;
	height: 16px;
	color: var(--mm-akzent-dunkel);
}

/* Fortschrittsbalken: zeigt, dass mehrere Ausschnitte nacheinander kommen. */
.mm-clipschau__leiste {
	position: absolute;
	right: var(--mm-luft);
	bottom: calc(var(--mm-luft) + 4px);
	display: flex;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mm-clipschau__marke {
	width: 22px;
	height: 4px;
	border-radius: 2px;
	background: rgb(255 255 255 / 45%);
}

.mm-clipschau__marke.ist-dran { background: var(--mm-flaeche); }

@media (max-width: 767px) {
	.mm-clipschau__fahne { left: var(--mm-luft-klein); bottom: var(--mm-luft-klein); }
	.mm-clipschau__leiste { right: var(--mm-luft-klein); bottom: calc(var(--mm-luft-klein) + 4px); }
}

/* -----------------------------------------------------------------------------
 * Z. Bild-Auswahlklassen (Lage, Wiederholung, Einpassung)
 * Stehen bewusst am Dateiende: die Bausteine (Kopfbild, Grundbildzone,
 * Bildkasten ...) setzen in ihren Grundregeln eigene Vorgaben mit gleicher
 * Spezifitaet — die redaktionelle Auswahl muss spaeter kommen, sonst ist sie
 * wirkungslos.
 * -------------------------------------------------------------------------- */

.mm-bildlage-mitte { background-position: center center; }
.mm-bildlage-mitte-oben { background-position: center top; }
.mm-bildlage-mitte-unten { background-position: center bottom; }
.mm-bildlage-links { background-position: left center; }
.mm-bildlage-links-oben { background-position: left top; }
.mm-bildlage-links-unten { background-position: left bottom; }
.mm-bildlage-rechts { background-position: right center; }
.mm-bildlage-rechts-oben { background-position: right top; }
.mm-bildlage-rechts-unten { background-position: right bottom; }

.mm-bildwdh-ohne { background-repeat: no-repeat; }
.mm-bildwdh-beide { background-repeat: repeat; }
.mm-bildwdh-quer { background-repeat: repeat-x; }
.mm-bildwdh-hoch { background-repeat: repeat-y; }

.mm-bild-enthalten { background-size: contain; }