/*
 * SEELEY Mission - die Uebersicht /mission/ (Karte B9, seit Paket M1).
 *
 * Die Texte sind normale Bloecke in Seite 1522; diese Datei gestaltet sie ueber
 * ihre Klassen (sm-...). Die Laenderkarten kommen aus [seeley_mission
 * teil="laender"]. Begruendungen stehen in doku/12-fahrplan-mission.md.
 *
 * Schriftschnitte: nur 200, 300, 500, 700 - die liefert seeley-basis aus
 * (seeley_basis_grundschrift). Ein anderer Schnitt waere ein kuenstlicher.
 *
 * Spezifitaet: die Stile des Themes stehen in :root :where(...) und wiegen
 * (0,1,0). Jede Regel hier traegt mindestens zwei Klassen und gewinnt damit
 * ohne !important.
 */

.sm-mission {
	--sm-grund: #262626;
	--sm-grund-tief: #1d1d1c;
	--sm-beige: #e1d6a9;
	--sm-gruen: #6f7668;
	--sm-text: #c5c5c5;
	--sm-leise: rgba(197, 197, 197, 0.72);
	--sm-linie: rgba(225, 214, 169, 0.16);
	/* Rand wie der Kopf von sende-uns (M3w, Dennis 25.09.2026: "ganz links
	   aussen ... genau gleich"): 6 % der Breite, mindestens 24 px; bis 900 px
	   5 %, bis 640 px 20 px (Media-Abfragen unten). Ersetzt den mittigen
	   1920er-Rahmen des Blogs aus M3v.
	   M3bq (Dennis 28.09.2026: ueber 1920 "komplett auf die ganze Seite
	   verteilt"): der Rahmen kommt zurueck - bis 1920 px unveraendert 6 %,
	   darueber der Weg bis zum mittigen 1920er-Rahmen plus dessen 6 %
	   (115,2 px), wie --sb-rand im Blog. Die Kugel rechnet weiter mit der
	   Fensterbreite, nur die im Schluss steht am Rand. */
	--sm-rand: calc(max(0px, 50% - 960px) + max(min(6vw, 115.2px), 24px));

	position: relative;
	container-type: inline-size;
	background-color: var(--sm-grund);
	color: var(--sm-text);
	font-family: 'Montserrat', system-ui, sans-serif;
	font-weight: 300;
	line-height: 1.7;
	/* Die globalen Stile setzen body auf capitalize (P11, basis.css) - geerbt,
	   also hebt es die Huelle fuer alles darin auf. */
	text-transform: none;
	overflow-x: clip;
	/* Eigene Stapelebene (M3a): der Film im Kopf liegt mit negativem z-index
	   darin - ueber dem Grund der Huelle, unter dem Globus. */
	isolation: isolate;
}

@media (max-width: 900px) {
	.sm-mission {
		--sm-rand: 5vw;
	}
}

@media (max-width: 640px) {
	.sm-mission {
		--sm-rand: 20px;
	}
}

/* Jeder Abschnitt ueber die volle Breite, mit Rand innen. */
.sm-mission > .sm-held,
.sm-mission > .sm-auftrag,
.sm-mission > .sm-arbeit,
.sm-mission > .sm-laender,
.sm-mission > .sm-projekte,
.sm-mission > .sm-schluss,
.sm-mission > .sm-kontakt {
	position: relative;
	margin: 0;
	padding-inline: var(--sm-rand);
}

/* Ueber dem Globus (M2), der in .sm-globus-buehne darunter liegt. Vom Kopf
   nur sein Text: der Film liegt unter dem Globus (M3a), der Griff unter dem
   Text (M3c). */
.sm-mission > .sm-auftrag,
.sm-mission > .sm-arbeit,
.sm-mission > .sm-laender,
.sm-mission > .sm-projekte,
.sm-mission > .sm-schluss,
.sm-mission > .sm-kontakt,
.sm-mission > .sm-held > :not(.sm-film):not(.sm-griff),
.sm-mission > .sm-laender > :not(.sm-griff):not(.sm-laender-kugel):not(.sm-kleber),
.sm-mission > .sm-schluss > :not(.sm-griff):not(.sm-kleber) {
	position: relative;
	z-index: 1;
}

/* ---------- Der Globus (M2) ----------
   Die Buehne liegt ueber der ganzen Huelle, der Globus klebt in ihr. So
   bleibt er in der Missionsseite und laeuft nie ueber den Fuss der Website. */

.sm-mission .sm-globus-buehne {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.sm-mission .sm-globus {
	position: sticky;
	top: 0;
	display: block;
	width: 100%;
	height: 100vh;
	height: 100lvh;
}

/* Der Blockabstand des Themes gilt hier nicht - jeder Abstand steht unten.
   Auch nicht in den Seiten der drehbaren Saeulen (M3ad) - dort haengen die
   Absaetze nicht mehr direkt in ihrer Gruppe. */
.sm-mission .wp-block-group > *,
.sm-mission .sm-seite > *,
.sm-mission .sm-kleber > * {
	margin-block: 0;
}

/* ---------- Typo-Rollen (Standard der Blog-Seite) ---------- */

.sm-mission .sm-ueberzeile {
	margin-bottom: 18px;
	font-size: 12px;
	/* wie .sb-eyebrow im Blog: dort 600, geladen sind 200/300/400/500/700 -
	   der Browser zeigt 700. Hier gleich 700 (M3v). */
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--sm-gruen);
}

.sm-mission .sm-abschnitt-titel,
.sm-mission .sm-vers {
	font-family: inherit;
	font-weight: 200;
	color: var(--sm-beige);
	text-transform: none;
	text-wrap: balance;
}

.sm-mission .sm-abschnitt-titel strong,
.sm-mission .sm-vers strong,
.sm-mission .sm-grundsatz-titel strong {
	font-weight: 700;
}

.sm-mission .sm-abschnitt-titel {
	max-width: 18ch;
	font-size: clamp(30px, 4.4cqw, 60px);
	line-height: 1.08;
	letter-spacing: -0.01em;
}

.sm-mission .sm-abschnitt-text {
	max-width: 52ch;
	margin-top: 20px;
	font-size: clamp(15px, 1.3cqw, 18px);
}

/* ---------- Kopf ----------
   Waagerecht zieht der Finger den Globus (M3), senkrecht scrollt er die Seite;
   pinch-zoom, damit Vergroessern mit zwei Fingern bleibt. Auf der Kugel
   selbst dreht er in jede Richtung - dort liegt der Griff (M3c).
   Seit M3v wie der Kopf von /blog/: der Text steht unten (.sb-hero:
   align-items flex-end, Abstand unten wie dort), der Globus rechts daneben,
   hochkant darueber. */

.sm-mission > .sm-held {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 100svh;
	padding-top: clamp(120px, 14cqw, 200px);
	padding-bottom: clamp(64px, 9vh, 110px);
	touch-action: pan-y pinch-zoom;
}

/* Der Film (M3a): fuellt den Kopf, liegt unter Globus und Text, faengt
   keinen Zeiger - Ziehen und Nadeln gehen durch ihn hindurch. Abtoenung und
   Auslauf in den Grund: siehe Fahrplan M3a, der Auslauf ohne Knick seit M3h. */
.sm-mission > .sm-held > .sm-film {
	position: absolute;
	inset: 0;
	z-index: -1;
	margin: 0;
	overflow: hidden;
	pointer-events: none;
	background-color: var(--sm-grund);
}

.sm-mission .sm-film video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sm-mission .sm-film::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(rgba(38, 38, 38, 0) 55%, rgba(38, 38, 38, 0.1) 64%, rgba(38, 38, 38, 0.35) 73%, rgba(38, 38, 38, 0.65) 82%, rgba(38, 38, 38, 0.9) 91%, var(--sm-grund)),
		rgba(10, 10, 9, 0.74);
}

/* Der Hinweis "360°" (M3k, seit M3p): klebt in der Buehne genau wie der
   Globus. Seit M22 in einer eigenen Flaeche, so gross und so klebend wie die
   Zeichenflaeche (um ihre Hoehe hochgezogen) - er sitzt absolut darin und
   rollt mit ihr, wo sie mit der Seite rollt (Ende der Buehne, Schluss).
   Sein Aussehen steht seit M3bs in globus.css - dort auch Griff und Zeiger. */
.sm-mission .sm-globus-buehne > .sm-hinweis-flaeche {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100lvh;
	margin-top: -100vh;
	margin-top: -100lvh;
}

.sm-mission .sm-hinweis-flaeche > .sm-dreh-hinweis {
	position: absolute;
	top: 0;
	left: 0;
}

/* Kopf wie /blog/ (M3v): kursive Zeile wie .sb-hero-quote, Titel wie .sb-h1
   (erste Zeile 300 in Creme, die fette zweite als eigene Zeile in Beige),
   Einleitung wie .sb-lead. Abstaende: Ueberzeile + 6 px = 24 px wie dort. */
.sm-mission .sm-zitat {
	margin-top: 6px;
	font-size: clamp(19px, 2.6cqw, 30px);
	font-style: italic;
	font-weight: 300;
	line-height: 1.3;
	color: var(--sm-beige);
}

/* Groesse wie .sb-h1, aber nie breiter als der Platz (M3z, Dennis
   25.09.2026: bei 320 px zweizeilig): "unterwegs sind." ist 8,13 Schrift-
   groessen breit, der Platz bis 640 px 100cqw - 2 x 20 px - greift erst
   unter ~352 px (320: 34 px statt 38). */
.sm-mission .sm-titel {
	margin-top: 14px;
	font-size: min(clamp(38px, 7.4cqw, 86px), calc((100cqw - 40px) / 8.2));
	font-weight: 300;
	line-height: 1.02;
	color: #f2ebd0;
}

.sm-mission .sm-titel strong {
	display: block;
	font-weight: 700;
	color: var(--sm-beige);
}

.sm-mission .sm-einleitung {
	max-width: 520px;
	margin-top: 18px;
	font-size: clamp(14px, 1.15cqw, 16px);
	color: var(--sm-text);
}

/* ---------- Unser Auftrag ----------
   Ohne Strich oben (M3h): Film und Globus laufen ins Dunkelgrau aus.
   Seit M3x1 (Dennis 25.09.2026: die Kugel faehrt in die Mitte, der Vers
   steht auf ihr) alles zentriert in der Fenstermitte. Seit M3x2 mit einem
   FREEZE (Dennis: "ein kurzer Freeze, wenn der Globus die finale Position
   erreicht hat"): der Abschnitt ist eine halbe Fensterhoehe laenger als die
   innere Huelle, die klebt - Vers und Kugel stehen, waehrend man eine halbe
   Fensterhoehe weiterscrollt. Das Scrollen wird nie aufgehalten. */

.sm-mission > .sm-auftrag {
	min-height: 150svh;
	text-align: center;
}

.sm-mission .sm-auftrag-innen {
	position: sticky;
	top: 0;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100svh;
	padding-block: clamp(72px, 12cqw, 180px);
}

.sm-mission .sm-vers {
	max-width: 24ch;
	font-size: clamp(28px, 4.8cqw, 70px);
	line-height: 1.14;
}

/* Wort fuer Wort (M3): die Spans setzt erst mission.js, und nur ohne
   "Bewegung reduzieren" - ohne sie steht der Vers voll da. */
.sm-mission .sm-vers .sm-wort {
	opacity: calc(0.14 + 0.86 * var(--w, 1));
	transition: opacity 0.25s linear;
}

/* Beige statt Gruen (M3y, Dennis 25.09.2026: "mach die Linien beige") -
   seit M3x2 liegt die Kugel hinter dem Vers; das Markengruen hielt dort
   2,1-3,1:1 (Fahrplan M3x2). */
.sm-mission .sm-vers-quelle {
	margin-top: clamp(18px, 2cqw, 26px);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--sm-beige);
}

/* Die Ueberzeile im Auftrag ebenso (M3y) - die Rolle bleibt sonst gruen;
   fuer die Ueberzeile dieses Abschnitts gab es bis M3y keine eigene Regel.
   Seit M3ac auch in "Wie wir arbeiten": dort faehrt die Kugel darunter zum
   Horizont, Gruen hielt 1,5-2,9:1 (Fahrplan M3ac). */
.sm-mission .sm-auftrag-innen > .sm-ueberzeile,
.sm-mission .sm-arbeit > .sm-ueberzeile,
.sm-mission .sm-arbeit > .sm-kleber > .sm-ueberzeile {
	color: var(--sm-beige);
}

/* ---------- Wie wir arbeiten ----------
   Seit M3ab (Dennis 25.09.2026) vier Saeulen und ihr Fundament ("Vor Ort
   getragen" - Local Empowerment/Ownership): die Saeulen mit Abstand statt
   in einem Raster aus Linien, halb durchsichtig (die Kugel geht darunter
   als Horizont auf, M3ac), oben eine beige Kante, ein Linienzeichen je
   Saeule (mission.js legt es an, nach der Klasse sm-grundsatz--...), eine
   Nummer. Das Fundament liegt als helleres Band ueber die ganze Breite
   darunter. Bewegung (sm-anim, von mission.js und nur ohne "Bewegung
   reduzieren"): die Saeulen steigen nacheinander auf, die Kante zieht sich,
   die Zeichen zeichnen sich, zuletzt legt sich das Fundament von der Mitte
   aus darunter. Ohne JavaScript steht alles still da. */

.sm-mission > .sm-arbeit {
	padding-bottom: clamp(72px, 12cqw, 180px);
}

/* Freeze (M3ak, Fahrplan): eine halbe Fensterhoehe mehr, die Huelle klebt -
   wo, setzt mission.js (mittig unter der Kopfzeile oder mit der Unterkante
   am Fensterrand) */
.sm-mission > .sm-friert::after {
	content: "";
	display: block;
	height: 50svh;
}

/* M33 (Dennis 12.10.2026: p12 wird Standard - Begruendungen im Fahrplan
   M32/M33): schmal und hochkant ohne "Bewegung reduzieren" sind die Halte
   eine Viertel-Fensterhoehe lang (die Kugel faehrt dort mit der Seite,
   mission.js "Kugelfahrt" - dieselbe Bedingung). */
@media (max-width: 899.98px) and (orientation: portrait) and (prefers-reduced-motion: no-preference) {
	.sm-mission > .sm-friert::after {
		height: 25svh;
	}

	.sm-mission > .sm-auftrag {
		min-height: 125svh;
	}
}

.sm-mission > .sm-friert > .sm-kleber {
	position: sticky;
}

/* bei den Laendern (M3al) liegt die Huelle ueber dem Griff der Kugel
   (M3ai) und ist so breit wie der Abschnitt: sie laesst Zeiger durch, nur
   ihre Kinder fangen sie - der Platz der Kugel nicht. Seit M3au ebenso
   bei den Projekten. */
.sm-mission > .sm-laender > .sm-kleber,
.sm-mission > .sm-projekte > .sm-kleber,
.sm-mission > .sm-schluss > .sm-kleber {
	z-index: 1;
	pointer-events: none;
}

.sm-mission > .sm-laender > .sm-kleber > :not(.sm-laender-kugel),
.sm-mission > .sm-projekte > .sm-kleber > :not(.sm-projekte-kugel),
.sm-mission > .sm-schluss > .sm-kleber > :not(.sm-schluss-kugel) {
	pointer-events: auto;
}

.sm-mission .sm-grundsaetze {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
	gap: clamp(12px, 1.4cqw, 20px);
	max-width: 1280px;
	margin-top: clamp(32px, 4cqw, 56px);
}

.sm-mission .sm-grundsatz {
	position: relative;
	box-sizing: border-box;
	padding: clamp(22px, 2.6cqw, 34px);
	background-color: rgba(29, 29, 28, 0.62);
	border: 1px solid rgba(225, 214, 169, 0.14);
	transition: border-color 0.3s ease, translate 0.3s ease;
}

.sm-mission .sm-grundsatz::before {
	content: "";
	position: absolute;
	top: -1px;
	left: -1px;
	right: -1px;
	height: 2px;
	background-color: rgba(225, 214, 169, 0.55);
	transform-origin: left;
	transition: background-color 0.3s ease;
}

.sm-mission .sm-grundsatz-zeichen {
	display: block;
	width: 58px;
	height: 58px;
	margin: 0 0 22px -6px;
	fill: none;
	stroke: var(--sm-beige);
	stroke-width: 1.3;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.sm-mission .sm-grundsatz-nr {
	margin-bottom: 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(225, 214, 169, 0.75);
}

.sm-mission .sm-grundsatz-titel {
	font-family: inherit;
	font-size: clamp(19px, 1.8cqw, 24px);
	font-weight: 300;
	line-height: 1.25;
	color: var(--sm-beige);
	text-transform: none;
}

.sm-mission .sm-grundsatz-text {
	margin-top: 14px;
	font-size: clamp(14px, 1.1cqw, 15px);
	color: var(--sm-text);
}

.sm-mission .sm-fundament {
	--sm-tiefe: max(1400px, 400cqw); /* M3br: breit - sonst kaeme die Kante beim Drehen weit heraus */
	box-sizing: border-box;
	position: relative;
	isolation: isolate;
	max-width: 1280px;
	margin-top: clamp(12px, 1.4cqw, 20px);
	padding: clamp(22px, 2.6cqw, 34px);
	transition: translate 0.3s ease;
}

/* Die Zweiteilung: ohne JavaScript am Fundament, drehbar an seiner
   Vorderseite (M3br) */
.sm-mission .sm-fundament:not(.sm-drehbar),
.sm-mission .sm-fundament .sm-seite-vorn {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: 8px clamp(20px, 3cqw, 48px);
	align-items: end;
}

/* Grund und Rahmen als eigene Ebene: nur sie legt sich beim Erscheinen von
   der Mitte aus (clip-path). Am Fundament selbst waere der Schnitt fuer den
   IntersectionObserver unsichtbar - es erschiene nie (gemessen, M3ab).
   Drehbar (M3br) traegt jede Seite ihre eigene Ebene - eine am Fundament
   stuende beim Drehen still dahinter. */
.sm-mission .sm-fundament:not(.sm-drehbar)::before,
.sm-mission .sm-fundament .sm-seite::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(225, 214, 169, 0.12), rgba(225, 214, 169, 0.04));
	border: 1px solid rgba(225, 214, 169, 0.3);
}

/* Nummer, Vers, Stelle und Knopfzeile ueber die ganze Breite - ihre
   Abstaende sind die der Saeulen */
.sm-mission .sm-fundament .sm-grundsatz-nr,
.sm-mission .sm-fundament .sm-grundsatz-vers,
.sm-mission .sm-fundament .sm-grundsatz-quelle,
.sm-mission .sm-fundament .sm-dreh-tipp {
	grid-column: 1 / -1;
}

.sm-mission .sm-fundament .sm-grundsatz-nr {
	margin: 0;
}

.sm-mission .sm-fundament .sm-grundsatz-text {
	max-width: 62ch;
	margin: 0;
}

.sm-mission .sm-fundament .sm-grundsatz-vers {
	max-width: 62ch;
}

/* Die Seiten des Fundaments: Grund und Rahmen liegen in ihrer Ebene (oben),
   hinten kraeftiger - wie die Saeulen hinten dunkler werden */
.sm-mission .sm-fundament .sm-seite {
	position: relative;
	isolation: isolate;
	background: none;
	border: 0;
}

.sm-mission .sm-fundament .sm-seite-hinten::before {
	background: linear-gradient(90deg, rgba(225, 214, 169, 0.2), rgba(225, 214, 169, 0.08)), rgba(29, 29, 28, 0.55);
}

.sm-mission .sm-fundament .sm-dreh-tipp {
	justify-self: end;
}

@media (max-width: 640px) {
	.sm-mission .sm-fundament:not(.sm-drehbar),
	.sm-mission .sm-fundament .sm-seite-vorn {
		grid-template-columns: 1fr;
	}

	.sm-mission .sm-fundament .sm-grundsatz-text {
		margin-top: 6px;
	}
}

/* Die Rueckseite (M3ad, Dennis 25.09.2026): eine Bibelstelle, die den
   Bereich stuetzt. Ohne JavaScript steht sie unter dem Text; mit JavaScript
   ist die Saeule ein Knopf (sm-drehbar) mit zwei Seiten im selben
   Rasterfeld - die Saeule ist so hoch wie die laengere Seite, beim Drehen
   springt nichts. Grund und Rahmen tragen dann die Seiten, die beige Kante
   bleibt oben an der Saeule stehen. */
.sm-mission .sm-grundsatz-vers {
	margin-top: 18px;
	font-size: clamp(17px, 1.5cqw, 20px);
	font-style: italic;
	font-weight: 300;
	line-height: 1.5;
	color: var(--sm-beige);
}

.sm-mission .sm-grundsatz-quelle {
	margin-top: 14px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(225, 214, 169, 0.75);
}

.sm-mission .sm-drehbar {
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	perspective: var(--sm-tiefe, 1400px);
}

.sm-mission .sm-grundsatz.sm-drehbar::before {
	z-index: 2;
}

.sm-mission .sm-drehbar:focus-visible {
	outline: 2px solid var(--sm-beige);
	outline-offset: 3px;
}

.sm-mission .sm-drehteil {
	display: grid;
	height: 100%;
	transform-style: preserve-3d;
	transition: transform 0.6s cubic-bezier(0.3, 0.7, 0.2, 1);
}

.sm-mission .sm-gedreht .sm-drehteil {
	transform: rotateY(180deg);
}

.sm-mission .sm-seite {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	padding: clamp(22px, 2.6cqw, 34px);
	background-color: rgba(29, 29, 28, 0.62);
	border: 1px solid rgba(225, 214, 169, 0.14);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transition: border-color 0.3s ease;
}

.sm-mission .sm-seite-hinten {
	justify-content: center;
	transform: rotateY(180deg);
	background: linear-gradient(rgba(225, 214, 169, 0.09), rgba(225, 214, 169, 0.03)), rgba(29, 29, 28, 0.82);
}

.sm-mission .sm-seite-hinten > .sm-grundsatz-vers {
	margin-top: auto;
}

.sm-mission .sm-dreh-tipp {
	align-self: flex-end;
	margin-top: auto;
	padding-top: 18px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(225, 214, 169, 0.6);
	transition: color 0.35s ease;
}

.sm-mission .sm-tipp-pfeil {
	display: inline-block;
}

/* Bewegung reduzieren: weich ueberblenden statt drehen */
@media (prefers-reduced-motion: reduce) {
	.sm-mission .sm-drehteil,
	.sm-mission .sm-gedreht .sm-drehteil {
		transform: none;
		transition: none;
	}

	.sm-mission .sm-seite {
		transition: opacity 0.3s ease;
	}

	.sm-mission .sm-seite-hinten {
		transform: none;
		opacity: 0;
	}

	.sm-mission .sm-gedreht .sm-seite-hinten {
		opacity: 1;
	}

	.sm-mission .sm-gedreht .sm-seite-vorn {
		opacity: 0;
	}
}

/* Bewegung - nur mit sm-anim (mission.js, nicht bei "Bewegung reduzieren").
   --i ist die Reihenfolge der gleichzeitig sichtbar werdenden Saeulen. */
.sm-mission .sm-arbeit.sm-anim .sm-grundsatz {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s ease calc(var(--i, 0) * 0.12s), transform 0.8s cubic-bezier(0.22, 0.78, 0.22, 1) calc(var(--i, 0) * 0.12s), border-color 0.3s ease, translate 0.3s ease;
}

.sm-mission .sm-arbeit.sm-anim .sm-grundsatz::before {
	transform: scaleX(0);
	transition: transform 0.8s ease calc(var(--i, 0) * 0.12s + 0.25s), background-color 0.3s ease;
}

.sm-mission .sm-arbeit.sm-anim .sm-grundsatz-zeichen * {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset 1.1s ease calc(var(--i, 0) * 0.12s + 0.35s);
}

.sm-mission .sm-arbeit.sm-anim .sm-fundament:not(.sm-drehbar)::before,
.sm-mission .sm-arbeit.sm-anim .sm-fundament .sm-seite-vorn::before {
	clip-path: inset(0 50%);
	transition: clip-path 0.9s cubic-bezier(0.22, 0.78, 0.22, 1) 0.2s;
}

.sm-mission .sm-arbeit.sm-anim .sm-fundament:not(.sm-drehbar) > *,
.sm-mission .sm-arbeit.sm-anim .sm-fundament .sm-seite > * {
	opacity: 0;
	transition: opacity 0.6s ease 0.7s;
}

.sm-mission .sm-arbeit.sm-anim .sm-grundsatz.sm-da {
	opacity: 1;
	transform: none;
}

.sm-mission .sm-arbeit.sm-anim .sm-grundsatz.sm-da::before {
	transform: none;
}

.sm-mission .sm-arbeit.sm-anim .sm-grundsatz.sm-da .sm-grundsatz-zeichen * {
	stroke-dashoffset: 0;
}

.sm-mission .sm-arbeit.sm-anim .sm-fundament.sm-da::before,
.sm-mission .sm-arbeit.sm-anim .sm-fundament.sm-da .sm-seite-vorn::before {
	clip-path: inset(0 0);
}

.sm-mission .sm-arbeit.sm-anim .sm-fundament.sm-da > *,
.sm-mission .sm-arbeit.sm-anim .sm-fundament.sm-da .sm-seite > * {
	opacity: 1;
}

/* Maus: die Saeule hebt sich leicht, die Kante wird heller. Steht die Maus
   auf der Beschriftung selbst, wird sie hell und ihr Pfeil dreht sich einmal
   (M3bp, Dennis 27.09.2026: "nur wenn man ueber Icon + WORAUF WIR BAUEN
   kommt") - Kurve wie .sm-pfeil (M3az), Dauer wie
   das Umdrehen der Saeule (0,6 s).
   Nur hinein mit Uebergang: heraus springt er von 360 auf 0 Grad, das sieht
   gleich aus. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.sm-mission .sm-dreh-tipp:hover {
		color: var(--sm-beige);
	}

	.sm-mission .sm-dreh-tipp:hover .sm-tipp-pfeil {
		transform: rotate(360deg);
		transition: transform 0.6s cubic-bezier(0.22, 0.78, 0.22, 1);
	}

	.sm-mission .sm-grundsatz:hover,
	.sm-mission .sm-grundsatz:hover .sm-seite {
		border-color: rgba(225, 214, 169, 0.3);
	}

	.sm-mission .sm-grundsatz:hover,
	.sm-mission .sm-fundament.sm-drehbar:hover {
		translate: 0 -4px;
	}

	.sm-mission .sm-fundament.sm-drehbar:hover .sm-seite::before {
		border-color: rgba(225, 214, 169, 0.55);
	}

	.sm-mission .sm-grundsatz:hover::before {
		background-color: var(--sm-beige);
	}
}

/* ---------- Unsere Laender ---------- */

/* ohne Strich oben (M3aq, Dennis 26.09.2026: "die beigen Querstriche weg") -
   die Kugel laeuft von den Saeulen durch, eine Linie schnitt sie */
.sm-mission > .sm-laender {
	padding-block: clamp(72px, 12cqw, 180px);
}

/* M3aj: beim Anflug blenden die Texte aus - die Kugel zoomt allein.
   M23b: im Kopf blenden seine Kinder aus, nicht der Kopf selbst - mit
   Deckkraft unter 1 wurde er eine eigene Stapelebene, der Film (z-index -1,
   unter dem Globus, M3a) lag dann in ihr ueber dem Globus, und die Kugel
   verschwand beim Anflug fuer rund 300 ms hinter dem ausblendenden Film
   (doku/recherche/m23-anflug-kopf/m23b) */
.sm-mission > :not(.sm-globus-buehne):not(.sm-held),
.sm-mission > .sm-held > * {
	transition: opacity 0.45s ease;
}

.sm-mission.sm-anflug > :not(.sm-globus-buehne):not(.sm-held),
.sm-mission.sm-anflug > .sm-held > * {
	opacity: 0;
	pointer-events: none;
}

/* M3ag2: der Platz der Kugel ueber der Liste - nur schmal und nur, wenn der
   Globus gezeichnet ist (sm-hat-globus); mission.js zeichnet sie hinein */
.sm-mission .sm-laender-kugel,
.sm-mission .sm-projekte-kugel,
.sm-mission .sm-schluss-kugel {
	display: none;
}

@container (max-width: 899px) {
	.sm-hat-globus .sm-laender .sm-laender-kugel,
	.sm-hat-globus .sm-projekte .sm-projekte-kugel,
	.sm-hat-globus .sm-schluss .sm-schluss-kugel {
		display: block;
		width: min(100%, 520px);
		aspect-ratio: 1;
		margin: clamp(20px, 4cqw, 32px) auto 0;
	}

	/* M26 (Dennis 07.10.: Variante C, erster Teil): im Schluss steht der
	   Platz vor der Ueberzeile (mission.js) - derselbe Abstand, nur unter
	   der Kugel statt ueber ihr.
	   M29 (Dennis 08.10.: V1, "Schluss wie Projekte"): so gross wie der
	   Platz der Projekte (Regel oben) - die Verkleinerung aus M28 entfaellt;
	   mission.js setzt ihn im Freeze dorthin, wo der Projekte-Platz steht
	   (doku/recherche/m29-schluss-steht). */
	.sm-hat-globus .sm-schluss .sm-schluss-kugel {
		margin: 0 auto clamp(20px, 4cqw, 32px);
	}
}

/* M3aw: im Schluss faengt der Platz keinen Zeiger - darunter liegt der
   Griff. Breit steht er rechts, so hoch wie der Abschnitt, der Text links
   (Dennis 26.09.2026: "nach rechts laufen und klein werden, dass es so
   gross ist wie der ganze Bereich von der Hoehe") */
.sm-mission .sm-schluss-kugel {
	pointer-events: none;
}

@container (min-width: 900px) {
	/* M20: der Schluss friert (mission.js) - der Platz liegt in der
	   klebenden Huelle; sie reicht ueber den Rand des Abschnitts bis an die
	   Kante, rechts die Haelfte fuer den Platz (bis M20 der Innenabstand
	   des Abschnitts) */
	.sm-hat-globus > .sm-schluss > .sm-kleber {
		margin-right: calc(-1 * var(--sm-rand));
		padding-right: 50cqw;
	}

	.sm-hat-globus > .sm-schluss > .sm-kleber > .sm-schluss-kugel {
		display: block;
		position: absolute;
		top: 0;
		height: 100%; /* mission.js setzt top und height auf den Inhalt */
		right: var(--sm-rand);
		aspect-ratio: 1;
		max-width: calc(50cqw - var(--sm-rand));
	}
}

/* M3ag: ein Akkordeon nach Kontinenten, immer nur einer offen (Fahrplan) */
.sm-mission .sm-laenderliste {
	max-width: 1280px;
	margin: clamp(28px, 3cqw, 40px) 0 0;
	border-top: 1px solid var(--sm-linie);
}

/* Mit Globus steht die Liste ab 900 px links, der Globus rechts daneben. Die
   Klasse setzt mission.js erst, wenn der Globus gezeichnet ist. */
@container (min-width: 900px) {
	.sm-hat-globus .sm-laender .sm-laenderliste {
		max-width: min(560px, 44cqw);
	}
}

.sm-mission .sm-kontinent {
	border-bottom: 1px solid var(--sm-linie);
}

.sm-mission .sm-kontinent-kopf {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 14px 2px;
	list-style: none;
	cursor: pointer;
}

.sm-mission .sm-kontinent-kopf::-webkit-details-marker {
	display: none;
}

.sm-mission .sm-kontinent-kopf::after {
	content: "+";
	margin-left: auto;
	font-size: 20px;
	font-weight: 300;
	line-height: 1;
	color: var(--sm-beige);
}

.sm-mission .sm-kontinent[open] > .sm-kontinent-kopf::after {
	content: "\2013";
}

/* M14: WordPress-Kern zeichnet bei jedem :focus 2 px in Textfarbe
   (:where(.wp-site-blocks :focus)); iOS-Safari fokussiert beim Tippen
   (summary "Afrika") - der Ring nur mit Tastatur (:focus-visible) */
.sm-mission :focus:not(:focus-visible) {
	outline: none;
}

.sm-mission .sm-kontinent-kopf:focus-visible,
.sm-mission .sm-land:focus-visible {
	outline: 2px solid var(--sm-beige);
	outline-offset: 3px;
}

.sm-mission .sm-kontinent-name {
	font-size: clamp(20px, 1.7cqw, 24px);
	font-weight: 300;
	color: var(--sm-beige);
}

.sm-mission .sm-kontinent[open] .sm-kontinent-name,
.sm-mission .sm-kontinent-kopf:hover .sm-kontinent-name {
	font-weight: 700;
}

.sm-mission .sm-kontinent-zahl,
.sm-mission .sm-land-seit {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sm-leise);
}

.sm-mission .sm-laender-namen {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 24px;
	margin: 0 0 14px;
	padding: 0 0 0 2px;
	list-style: none;
	animation: sm-namen-auf 0.35s ease;
}

@keyframes sm-namen-auf {
	from { opacity: 0; transform: translateY(-6px); }
}

.sm-mission .sm-laender-namen li {
	margin: 0;
}

.sm-mission .sm-land {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 2px 10px;
	padding: 7px 0;
	color: inherit;
	text-decoration: none;
}

.sm-mission .sm-land i {
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--sm-land, var(--sm-gruen));
	transform: translateY(-1px);
	transition: transform 0.25s ease;
}

.sm-mission .sm-land-name {
	font-size: 16px;
	font-weight: 400;
	color: var(--sm-beige);
	transition: color 0.25s ease;
}

.sm-mission .sm-land:hover .sm-land-name,
.sm-mission .sm-land.sm-land-an .sm-land-name {
	font-weight: 700;
	color: var(--sm-land, var(--sm-beige));
}

.sm-mission .sm-land:hover i,
.sm-mission .sm-land.sm-land-an i {
	transform: translateY(-1px) scale(1.5);
}

.sm-mission .sm-land-seit {
	font-size: 10px;
	letter-spacing: 0.16em;
}

/* schmal passt "seit" nicht bei jedem Namen daneben - dann bei allen darunter */
@container (max-width: 599px) {
	.sm-mission .sm-land-seit {
		flex-basis: 100%;
		padding-left: 17px;
	}
}

/* ---------- Unsere Projekte (M3ar, Bild A) ----------
   Nach den Laendern. Mit Globus steht die Liste ab 900 px in der rechten
   Haelfte - links rollt die Kugel hinein (M3as). Je Projekt eine Zeile:
   Bild links, rechts Land · Status, Titel, Kurztext (hoechstens zwei
   Zeilen), Fortschritt, "Zum Projekt" und "Teilen". Schmal untereinander,
   das Bild oben. Ohne Projekt gibt es den Abschnitt nicht (projekte.php). */

.sm-mission > .sm-projekte {
	padding-block: clamp(72px, 12cqw, 180px);
}

@container (min-width: 900px) {
	.sm-hat-globus > .sm-projekte {
		padding-left: 50cqw;
	}
}

.sm-mission .sm-projektliste {
	display: grid;
	gap: clamp(12px, 1.4cqw, 20px);
	max-width: 760px;
	margin: clamp(28px, 3cqw, 40px) 0 0;
	padding: 0;
	list-style: none;
}

.sm-mission .sm-projekt {
	display: flex;
	flex-direction: column;
	margin: 0;
	overflow: visible;
	background-color: rgba(29, 29, 28, 0.82);
	border: 1px solid var(--sm-linie);
	border-radius: 4px;
	transition: border-color 0.25s ease;
}

.sm-mission .sm-projekt:hover,
.sm-mission .sm-projekt:focus-within {
	border-color: var(--sm-land, var(--sm-beige));
}

.sm-mission .sm-projekt-bild {
	display: block;
	aspect-ratio: 2.6 / 1;
	overflow: hidden;
	border-radius: 4px 4px 0 0;
	background-color: color-mix(in srgb, var(--sm-land, var(--sm-gruen)) 30%, #1d1d1c);
}

.sm-mission .sm-projekt-bild img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 25%;
}

@container (min-width: 900px) {
	.sm-hat-globus .sm-projekt {
		flex-direction: row;
	}

	.sm-hat-globus .sm-projekt-bild {
		flex: none;
		width: 34%;
		aspect-ratio: auto;
		border-radius: 4px 0 0 4px;
	}
}

/* die Aussenabstaende des Themes an h3 und p gelten in der Karte nicht */
.sm-mission .sm-projekt-text > * {
	margin: 0;
}

.sm-mission .sm-projekt-text {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	padding: 16px 20px 18px;
}

.sm-mission .sm-projekt-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sm-land, var(--sm-gruen));
}

.sm-mission .sm-projekt-meta i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--sm-land, var(--sm-gruen));
}

.sm-mission .sm-projekt-meta span {
	font-weight: 500;
	color: var(--sm-leise);
}

.sm-mission .sm-projekt-titel {
	font-size: clamp(20px, 1.7cqw, 24px);
	font-weight: 600;
	line-height: 1.2;
	color: var(--sm-beige);
}

.sm-mission .sm-projekt-kurz {
	font-size: 14px;
	font-weight: 300;
	line-height: 1.5;
	color: var(--sm-text);
}

.sm-mission .sm-projekt-fortschritt {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: auto;
	padding-top: 6px;
}

.sm-mission .sm-projekt-balken {
	flex: 1;
	height: 4px;
	overflow: hidden;
	border-radius: 2px;
	background-color: rgba(225, 214, 169, 0.14);
}

.sm-mission .sm-projekt-balken b {
	display: block;
	height: 100%;
	background-color: var(--sm-land, var(--sm-beige));
}

/* ohne Prozent steht der Zeitraum an der Stelle der Zahl, in ihrer Schrift (M3bw) */
.sm-mission .sm-projekt-prozent,
.sm-mission .sm-projekt-zeitraum {
	font-size: 13px;
	font-weight: 600;
	color: var(--sm-beige);
}

.sm-mission .sm-projekt-prozent {
	min-width: 44px;
	text-align: right;
}

.sm-mission .sm-projekt-knoepfe {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 6px;
}

.sm-mission .sm-projekt-hin,
.sm-mission .sm-teilen > summary {
	display: inline-block;
	padding: 8px 14px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--sm-beige);
	border: 1px solid rgba(225, 214, 169, 0.3);
	border-radius: 999px;
	cursor: pointer;
	transition: transform 0.2s ease, border-color 0.2s ease;
}

/* M3bb (Dennis 26.09.2026: "Die Buttons sollen auch bei den Projekten
   hovern, Zum Projekt und auch Teilen"): anheben wie "Monatspartner werden"
   (.sm-knopf), bei Teilen dazu der Rand voll beige */
@media (hover: hover) {
	.sm-mission .sm-projekt-hin:hover,
	.sm-mission .sm-teilen > summary:hover {
		transform: translateY(-2px);
	}

	.sm-mission .sm-teilen > summary:hover {
		border-color: var(--sm-beige);
	}
}

.sm-mission .sm-projekt-hin {
	color: var(--sm-grund);
	background-color: var(--sm-beige);
	border-color: var(--sm-beige);
}

.sm-mission .sm-projekt-hin:focus-visible,
.sm-mission .sm-teilen > summary:focus-visible,
.sm-mission .sm-teilen-menue > :focus-visible {
	outline: 2px solid var(--sm-beige);
	outline-offset: 3px;
}

.sm-mission .sm-teilen {
	position: relative;
}

.sm-mission .sm-teilen > summary {
	list-style: none;
}

.sm-mission .sm-teilen > summary::-webkit-details-marker {
	display: none;
}

.sm-mission .sm-teilen-menue {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	min-width: 160px;
	padding: 6px;
	background-color: var(--sm-grund-tief);
	border: 1px solid var(--sm-linie);
	border-radius: 4px;
}

.sm-mission .sm-teilen-menue > a,
.sm-mission .sm-teilen-menue > button {
	padding: 8px 10px;
	font: inherit;
	font-size: 13px;
	text-align: left;
	text-decoration: none;
	color: var(--sm-beige);
	background: none;
	border: 0;
	border-radius: 3px;
	cursor: pointer;
}

.sm-mission .sm-teilen-menue > a:hover,
.sm-mission .sm-teilen-menue > button:hover {
	background-color: rgba(225, 214, 169, 0.08);
}

.sm-mission .sm-teilen-menue > [hidden] {
	display: none;
}

/* ---------- Abgeschlossene Projekte (M3ce) ----------
   Dennis 04.10.2026 ("Mischung aus B und C"): unter den Karten zugeklappt
   "Abgeschlossen (n)", aufgeklappt die Liste, ein Eintrag klappt unter
   seiner Zeile auf. Markup wie auf der Laenderseite (M7h,
   seeley_land_projekte_abgeschlossen()); die Werte hier sind die von
   laenderseite.css (.pm-ab ...) mit den Farben dieser Seite. Der Streifen
   hat den Grund der Karten - schmal laeuft die Kugel hinter der Liste durch
   (Entwurf, gesehen bei 375). Auf/zu haengt nur an aria-expanded; mission.js
   klappt beim Start zu (ohne Skript bleibt alles offen und lesbar). */

.sm-mission .pm-ab {
	max-width: 760px;
	margin-top: clamp(12px, 1.4cqw, 20px);
	padding: 4px 18px;
	background-color: rgba(29, 29, 28, 0.82);
	border: 1px solid var(--sm-linie);
	border-radius: 4px;
}

.sm-mission .sm-projekte-kugel + .pm-ab {
	margin-top: clamp(28px, 3cqw, 40px);
}

.sm-mission .pm-ab-klapp {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 44px;
	padding: 0;
	font: inherit;
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--sm-beige);
	background: none;
	border: 0;
	cursor: pointer;
}

.sm-mission .pm-ab-haken {
	display: block;
	flex: none;
	width: 14px;
	height: 14px;
	color: var(--sm-beige);
}

.sm-mission .pm-ab-zahl {
	display: inline-grid;
	place-items: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	font-size: 11px;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
	border: 1px solid rgba(225, 214, 169, 0.3);
	border-radius: 999px;
}

.sm-mission .pm-ab-winkel {
	width: 12px;
	height: 12px;
	transition: transform 0.4s cubic-bezier(0.22, 0.78, 0.22, 1);
}

.sm-mission .pm-ab-klapp[aria-expanded="true"] .pm-ab-winkel {
	transform: rotate(90deg);
}

.sm-mission .pm-ab-auf {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.5s cubic-bezier(0.22, 0.78, 0.22, 1);
}

.sm-mission .pm-ab-auf > div {
	min-height: 0;
	overflow: hidden;
	visibility: hidden;
	opacity: 0;
	transition: visibility 0s 0.5s, opacity 0.35s;
}

.sm-mission [aria-expanded="true"] + .pm-ab-auf {
	grid-template-rows: 1fr;
}

.sm-mission [aria-expanded="true"] + .pm-ab-auf > div {
	visibility: visible;
	opacity: 1;
	transition: visibility 0s, opacity 0.35s 0.1s;
}

.sm-mission .pm-ab.still .pm-ab-auf,
.sm-mission .pm-ab.still .pm-ab-auf > div,
.sm-mission .pm-ab.still .pm-ab-winkel,
.sm-mission .pm-ab.still .pm-ab-pfeil {
	transition: none;
}

.sm-mission .pm-ab-liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sm-mission .pm-ab-eintrag {
	margin: 0;
	border-top: 1px solid var(--sm-linie);
}

.sm-mission .pm-ab-zeile {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 9px 0;
	font: inherit;
	text-align: left;
	color: #ece6d6;
	background: none;
	border: 0;
	cursor: pointer;
}

.sm-mission .pm-ab-klapp:focus-visible {
	outline: 2px solid var(--sm-beige);
	outline-offset: 3px;
}

/* innen: die Liste schneidet ab (overflow beim Aufklappen) */
.sm-mission .pm-ab-zeile:focus-visible {
	outline: 2px solid var(--sm-beige);
	outline-offset: -2px;
	border-radius: 4px;
}

.sm-mission .pm-ab-bild {
	position: relative;
	width: 44px;
	height: 44px;
	overflow: hidden;
	background-color: var(--sm-grund-tief);
	border-radius: 8px;
}

.sm-mission .pm-ab-bild img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	filter: grayscale(0.85) brightness(0.7);
	transition: filter 0.5s;
}

.sm-mission .pm-ab-bild .pm-ab-haken {
	position: absolute;
	right: 3px;
	bottom: 3px;
	width: 16px;
	height: 16px;
	padding: 2px;
	color: var(--sm-grund);
	background-color: var(--sm-beige);
	border-radius: 50%;
}

.sm-mission .pm-ab-titel {
	overflow: hidden;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	color: #f4efe2;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.sm-mission .pm-ab-jahr {
	font-size: 12.5px;
	color: var(--sm-leise);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.sm-mission .pm-ab-pfeil {
	padding-right: 4px;
	color: var(--sm-beige);
	transition: transform 0.35s cubic-bezier(0.22, 0.78, 0.22, 1);
}

@media (hover: hover) {
	.sm-mission .pm-ab-zeile:hover .pm-ab-bild img {
		filter: grayscale(0) brightness(0.9);
	}

	.sm-mission .pm-ab-zeile[aria-expanded="false"]:hover .pm-ab-pfeil {
		transform: translateX(4px);
	}
}

.sm-mission .pm-ab-zeile[aria-expanded="true"] .pm-ab-bild img {
	filter: grayscale(0) brightness(0.9);
}

.sm-mission .pm-ab-zeile[aria-expanded="true"] .pm-ab-titel {
	color: var(--sm-beige);
	white-space: normal;
}

.sm-mission .pm-ab-zeile[aria-expanded="true"] .pm-ab-pfeil {
	transform: rotate(90deg);
}

/* der Text eines Eintrags: Kurztext, "Worum es geht", "Schritte" */
.sm-mission .pm-ab-text {
	display: grid;
	gap: 14px;
	max-width: 680px;
	padding: 2px 0 20px 58px;
}

.sm-mission .pm-ab-text p,
.sm-mission .pm-ab-text h4,
.sm-mission .pm-ab-text ul {
	margin: 0;
}

.sm-mission .pm-ab-text .pm-kurz {
	max-width: 44ch;
	font-size: 16px;
	line-height: 1.6;
	color: #ece6d6;
}

.sm-mission .pm-ab-text .innen2 {
	display: grid;
	gap: 14px;
	padding-top: 4px;
}

.sm-mission .pm-ab-text h4 {
	margin-bottom: 4px;
	font-family: inherit;
	font-size: 10.5px;
	font-weight: 500;
	line-height: 1.7;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--sm-beige);
}

.sm-mission .pm-ab-text .innen2 p {
	font-size: 14.5px;
}

.sm-mission .pm-ab-text p + p {
	margin-top: 0.8em;
}

.sm-mission .pm-schritte {
	display: grid;
	gap: 6px;
	padding: 0;
	list-style: none;
}

.sm-mission .pm-schritte li {
	display: grid;
	grid-template-columns: 16px 1fr;
	gap: 10px;
	margin: 0;
	font-size: 14px;
	color: #e6dfcf;
}

.sm-mission .pm-schritte li::before {
	content: "";
	width: 9px;
	height: 9px;
	margin-top: 7px;
	border: 1.5px solid var(--sm-beige);
	border-radius: 50%;
}

.sm-mission .pm-schritte li.fertig::before {
	width: 5px;
	height: 10px;
	margin: 3px 0 0 2px;
	border-width: 0 2px 2px 0;
	border-radius: 0;
	transform: rotate(45deg);
}

@container (max-width: 899px) {
	.sm-mission .pm-ab-text {
		padding-left: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	/* nur ueberblenden: die Hoehe springt (beim Zuklappen nach dem Ausblenden), nur die Deckkraft laeuft (wie M7h) */
	.sm-mission .pm-ab-auf {
		transition: grid-template-rows 0s 0.25s;
	}

	.sm-mission [aria-expanded="true"] + .pm-ab-auf {
		transition: none;
	}

	.sm-mission .pm-ab-auf > div {
		transition: visibility 0s 0.25s, opacity 0.25s;
	}

	.sm-mission [aria-expanded="true"] + .pm-ab-auf > div {
		transition: visibility 0s, opacity 0.25s;
	}

	.sm-mission .pm-ab-winkel,
	.sm-mission .pm-ab-pfeil,
	.sm-mission .pm-ab-bild img {
		transition: none;
	}
}

/* ---------- Schluss ---------- */

.sm-mission > .sm-schluss {
	padding-top: clamp(80px, 14cqw, 200px);
	padding-bottom: clamp(48px, 6cqw, 80px);
}

.sm-mission .sm-schluss .sm-abschnitt-titel {
	max-width: 13ch;
	font-size: clamp(36px, 6.4cqw, 96px);
	line-height: 1.04;
}

/* M15 (Dennis 05.10.2026: "Text buendig mit dem Knopftext"): stehen die
   zwei untereinander, beginnt "Alle Berichte im Blog" beim Knopftext, also
   um das Polster eingerueckt; nebeneinander bleibt der Abstand 28 px. Ohne
   Schwelle: der Spaltenabstand sitzt als Rand am Knopf (Abstand minus
   Polster), das Polster als Rand am Link - die Summe je Zeile, und damit
   jeder Umbruch, bleibt wie vorher.
   M15c (Dennis 06.10.2026): der Knopf bleibt einzeilig, wo er sicher passt -
   das Polster schrumpft stufenlos von 30 bis 18 px (100cqw = Breite dieser
   Zeile; 254 px = Knopftext 244 px in Chrome + 10 px Reserve fuer Safari) */
.sm-mission .sm-knoepfe {
	container-type: inline-size;
	--sm-knopf-polster: clamp(18px, calc((100cqw - 254px) / 2), 30px);
	--sm-knoepfe-abstand: 28px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px 0;
	margin-top: clamp(28px, 3cqw, 40px);
}

/* Die Raender sitzen an den Bloecken selbst, nicht an den Links: der Link
   fuellt seinen Block (WordPress: width 100 %), ein Rand am Link verbreiterte
   ihn nur. max-width haelt den Knopf im Behaelter, wenn er schrumpft.
   M15c: hoechstens 0 - schrumpft das Polster unter den Abstand (nur unter
   352 px, dort steht der Knopf allein in seiner Zeile), naehme ein Rand
   rechts dem Knopf sonst Platz */
.sm-mission .sm-knoepfe > .sm-knopf {
	max-width: 100%;
	margin-right: min(0px, calc(var(--sm-knoepfe-abstand) - var(--sm-knopf-polster)));
}

.sm-mission .sm-knoepfe > .sm-knopf-leise {
	margin-left: var(--sm-knopf-polster);
}

.sm-mission .sm-knopf .wp-block-button__link,
.sm-mission .sm-knopf-leise .wp-block-button__link {
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	transition: transform 0.2s ease, border-color 0.2s ease;
}

/* M15c (Dennis 06.10.2026, statt M15b "left"): bricht der Knopftext trotzdem
   um, stehen beide Zeilen mittig. Auf einer Zeile umschliesst der Knopf
   seinen Text, dort wirkt es nicht */
.sm-mission .sm-knopf .wp-block-button__link {
	padding: 18px var(--sm-knopf-polster);
	text-align: center;
	color: var(--sm-grund);
	background-color: var(--sm-beige);
	border: 0;
	border-radius: 999px;
}

.sm-mission .sm-knopf .wp-block-button__link:hover {
	transform: translateY(-2px);
}

/* M3az (Dennis 26.09.2026: "unsere Animation, die wir immer bei unserem
   Pfeil haben"): wie .sb-btn .sb-arrow im Blog (logbuch.css) - der Pfeil
   rueckt beim Hover 4 px nach rechts, 0,35 s, dieselbe Kurve. Seit M3ba
   auch in "Zum Projekt" (projekte.php) - darum an jedem Link, nicht nur am
   Knopf-Block */
.sm-mission .sm-pfeil {
	display: inline-block;
	transition: transform 0.35s cubic-bezier(0.22, 0.78, 0.22, 1);
}

@media (hover: hover) {
	.sm-mission a:hover .sm-pfeil {
		transform: translateX(4px);
	}
}

.sm-mission .sm-knopf-leise .wp-block-button__link {
	padding: 0 0 4px;
	color: var(--sm-beige);
	background-color: transparent;
	border: 0;
	border-bottom: 1px solid var(--sm-linie);
	border-radius: 0;
}

.sm-mission .sm-knopf-leise .wp-block-button__link:hover {
	border-bottom-color: var(--sm-beige);
}

.sm-mission .sm-knopf .wp-block-button__link:focus-visible,
.sm-mission .sm-knopf-leise .wp-block-button__link:focus-visible {
	outline: 2px solid var(--sm-beige);
	outline-offset: 4px;
}

/* M3bc (Dennis 26.09.2026): der Nachweis steht unter dem Vers in "Unser
   Auftrag", klein unter der Quelle - vorher am Ende des Schlusses.
   M3bd (Dennis: "noch transparenter, sehr dunkel, und wenn man darueber
   hovert heller"): in Ruhe 0,28 statt 0,72, beim Hover --sm-leise */
.sm-mission .sm-bibelnachweis {
	max-width: 46ch;
	margin-top: clamp(14px, 1.6cqw, 20px);
	font-size: 11px;
	line-height: 1.6;
	color: rgba(197, 197, 197, 0.28);
	transition: color 0.3s ease;
}

/* M3be: auf dem Telefon beim Antippen (mission.js setzt sm-hell) */
.sm-mission .sm-bibelnachweis.sm-hell {
	color: var(--sm-leise);
}

@media (hover: hover) {
	.sm-mission .sm-bibelnachweis:hover {
		color: var(--sm-leise);
	}
}

/* ---------- Kontakt (M3bl) ----------
   Dennis 26.09.2026: "am Ende der Seite einen Container in unserem Beige ...
   wenn man Fragen hat, gerne eine E-Mail" - im Stil des Blog-Abschlusses
   (.sb-close, logbuch.css), "mit den gleichen Schriften und Groessen":
   volle Breite Beige, mittig, Ueberzeile Gruen 12 px, Titel 300 mit dem
   Schlusswort 700 in Gruen, darunter ein Textlink mit Linie, die beim Hover
   zusammenlaeuft; im Hintergrund ein grosses Wort (Hoehe und Breite setzt
   mission.js wie sizeCloseGhost() im Blog). */
.sm-mission > .sm-kontakt {
	overflow: hidden;
	padding-top: clamp(60px, 10vh, 120px);
	padding-bottom: clamp(60px, 10vh, 120px);
	text-align: center;
	color: #271D16;
	background-color: var(--sm-beige);
}

.sm-mission .sm-kontakt > * {
	max-width: 900px;
	margin-inline: auto;
}

.sm-mission .sm-kontakt > .sm-kontakt-geist {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	max-width: none;
	margin: 0;
	overflow: hidden;
	font-size: 200px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 2px;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
	color: rgba(39, 29, 22, 0.035);
	pointer-events: none;
	user-select: none;
}

.sm-mission .sm-kontakt > :not(.sm-kontakt-geist) {
	position: relative;
	z-index: 1;
}

.sm-mission .sm-kontakt-ueber {
	padding-bottom: 2px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--sm-gruen);
}

.sm-mission .sm-kontakt .sm-kontakt-titel {
	margin-top: 14px;
	font-size: clamp(26px, 4.4vw, 56px);
	font-weight: 300;
	line-height: 1.12;
	text-transform: none;
	text-wrap: balance;
	color: #271D16;
}

.sm-mission .sm-kontakt-titel strong {
	font-weight: 700;
	color: var(--sm-gruen);
}

.sm-mission .sm-kontakt-link {
	margin-top: 26px;
}

.sm-mission .sm-kontakt-link a {
	display: inline-block;
	padding-bottom: 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-decoration: none;
	color: #271D16;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 100% 1px;
	transition: background-size 0.45s cubic-bezier(0.22, 0.78, 0.22, 1);
}

@media (hover: hover) {
	.sm-mission .sm-kontakt-link a:hover {
		background-size: 0 1px;
	}
}

.sm-mission .sm-kontakt-link a:focus-visible {
	outline: 2px solid #271D16;
	outline-offset: 4px;
}

@media (max-width: 640px) {
	.sm-mission .sm-kontakt .sm-kontakt-titel {
		font-size: clamp(30px, 8.4vw, 36px);
		line-height: 1.1;
	}

	.sm-mission .sm-kontakt-link a {
		padding-bottom: 5px;
		font-size: 11px;
		letter-spacing: 1.5px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sm-mission .sm-land i,
	.sm-mission .sm-land-name,
	.sm-mission .sm-knopf .wp-block-button__link,
	.sm-mission .sm-pfeil,
	.sm-mission .sm-bibelnachweis,
	.sm-mission .sm-kontakt-link a,
	.sm-mission .sm-projekt-hin,
	.sm-mission .sm-teilen > summary {
		transition: none;
	}

	.sm-mission .sm-laender-namen {
		animation: none;
	}

	.sm-mission .sm-knopf .wp-block-button__link:hover,
	.sm-mission .sm-projekt-hin:hover,
	.sm-mission .sm-teilen > summary:hover {
		transform: none;
	}

	.sm-mission .sm-land:hover i,
	.sm-mission .sm-land.sm-land-an i {
		transform: translateY(-1px);
	}
}