.mb-persp-wrap { padding: 0; }
.mb-persp-heading { font-size: clamp(1.3rem, 2.2vw, 1.8rem); margin: 0 0 4px; text-align: center; }

.persp-radial {
	position: relative;
	width: 100%;
	max-width: var(--persp-max, 620px);
	aspect-ratio: 100 / 72;
	margin: 6px auto 0;
}
.persp-lines { position: absolute; inset: 0; width: 100%; height: 100%; }

.persp-center { position: absolute; left: 50%; top: 50%; width: 17%; height: 17%; transform: translate(-50%, -50%); }
.persp-smiley { width: 100%; height: 100%; display: block; object-fit: contain; filter: drop-shadow(0 8px 16px rgba(240, 0, 0, 0.3)); }

/* Rechtecke statt Kreise — passend zur restlichen Formensprache der Seite */
.persp-node {
	position: absolute; transform: translate(-50%, -50%); width: 30%; aspect-ratio: 1.25 / 1;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
	text-decoration: none; color: inherit;
	background: var(--wp--preset--color--weiss); border: 1px solid #e1e4e7; border-radius: 12px;
	box-shadow: 0 8px 18px rgba(14, 27, 38, 0.1);
	transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
	padding: 10px;
	text-align: center;
	z-index: 1;
}
.persp-node:hover, .persp-node:focus, .persp-node:focus-within {
	transform: translate(-50%, -50%) translateY(-3px);
	box-shadow: 0 14px 28px rgba(0, 76, 153, 0.22);
	border-color: var(--wp--preset--color--blau);
	z-index: 50;
}
.persp-node-circle {
	width: 30%; aspect-ratio: 1 / 1; border-radius: 50%; background: var(--wp--preset--color--paper);
	display: flex; align-items: center; justify-content: center; color: var(--wp--preset--color--blau);
	margin-bottom: 4px;
}
.persp-node-label { font-family: "Sora", sans-serif; font-weight: 700; font-size: 0.95rem; color: var(--wp--preset--color--ink) !important; }
.persp-node-tag { font-family: "IBM Plex Mono", monospace; font-size: 0.66rem; color: var(--mb-grau-text, #707070); text-transform: uppercase; letter-spacing: 0.02em; }

/* Mouseover-Erklärung: Blau statt Schwarz, weiße Schrift */
.persp-node-pop {
	position: absolute; width: 220px; background: var(--wp--preset--color--blau-dunkel); color: #fff !important;
	border-radius: 12px; padding: 14px 16px; font-size: 0.82rem; line-height: 1.4; text-align: left;
	opacity: 0; pointer-events: none; transform: scale(0.95); transition: opacity 0.15s, transform 0.15s;
	box-shadow: 0 16px 34px rgba(0, 50, 94, 0.35); z-index: 20;
}
.persp-node:hover .persp-node-pop, .persp-node:focus .persp-node-pop, .persp-node:focus-within .persp-node-pop {
	opacity: 1; pointer-events: auto; transform: scale(1);
}
.persp-pop-text { display: block; margin-bottom: 8px; color: #fff; }
.persp-pop-link { display: block; font-weight: 600; color: #9cc8ff !important; font-size: 0.78rem; }

.persp-node.is-tl .persp-node-pop { top: 50%; left: 100%; transform: translateY(-50%) translateX(10px) scale(0.95); margin-left: 4px; }
.persp-node.is-tl:hover .persp-node-pop { transform: translateY(-50%) translateX(10px) scale(1); }
.persp-node.is-tr .persp-node-pop { top: 50%; right: 100%; transform: translateY(-50%) translateX(-10px) scale(0.95); margin-right: 4px; }
.persp-node.is-tr:hover .persp-node-pop { transform: translateY(-50%) translateX(-10px) scale(1); }
.persp-node.is-br .persp-node-pop { bottom: 50%; right: 100%; transform: translateY(50%) translateX(-10px) scale(0.95); margin-right: 4px; }
.persp-node.is-br:hover .persp-node-pop { transform: translateY(50%) translateX(-10px) scale(1); }
.persp-node.is-bl .persp-node-pop { bottom: 50%; left: 100%; transform: translateY(50%) translateX(10px) scale(0.95); margin-left: 4px; }
.persp-node.is-bl:hover .persp-node-pop { transform: translateY(50%) translateX(10px) scale(1); }

@media (max-width: 900px) {
	.persp-node-label { font-size: 0.82rem; }
	.persp-node-tag { display: none; }
	.persp-node-pop { width: 170px; font-size: 0.76rem; }
}

/* ===== MOBILE-MINIATURGRAFIK (ab 640px) =====
   Gleiche Grundidee wie Desktop (Smiley Mitte, 4 Ecken), aber ohne Icons,
   Untertitel oder Mouseover-Popups — nur die vier Überschriften, kompakt. */
.persp-mini { display: none; }
@media (max-width: 640px) {
	.persp-radial { display: none; }
	.persp-mini {
		position: relative; display: block; width: 100%; max-width: 340px;
		aspect-ratio: 100 / 78; margin: 6px auto 0;
	}
	.persp-mini-center {
		position: absolute; left: 50%; top: 50%; width: 22%; height: 22%; transform: translate(-50%, -50%);
	}
	.persp-mini-center img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 12px rgba(240, 0, 0, 0.3)); }
	.persp-mini-node {
		position: absolute; width: 42%; aspect-ratio: 1.5 / 1; transform: translate(-50%, -50%);
		display: flex; align-items: center; justify-content: center; text-align: center; padding: 6px 8px;
		background: var(--wp--preset--color--weiss); border: 1px solid #e1e4e7; border-radius: 10px;
		box-shadow: 0 6px 14px rgba(14, 27, 38, 0.08);
		font-family: "Sora", sans-serif; font-weight: 700; font-size: 0.8rem; color: var(--wp--preset--color--ink) !important;
		text-decoration: none;
	}
	.persp-mini-node.is-tl { left: 24%; top: 22%; }
	.persp-mini-node.is-tr { left: 76%; top: 22%; }
	.persp-mini-node.is-br { left: 76%; top: 78%; }
	.persp-mini-node.is-bl { left: 24%; top: 78%; }
}
@media (max-width: 360px) {
	.persp-mini-node { font-size: 0.7rem; }
}

.persp-footnote { margin-top: 14px; font-size: 0.85rem; color: var(--mb-grau-text, #707070); text-align: center; }
.persp-footnote a { color: var(--wp--preset--color--blau); font-weight: 600; }

/* ===== ZWEISPALTIGE FASSUNG (Startseite) =====
   Angelegt 14.09.2026.

   Anlass: Die vier Prüffragen — die eigentliche Aussage des Abschnitts —
   standen ausschließlich im Hover-Element. Auf Touch-Geräten damit gar
   nicht erreichbar, in der Miniaturgrafik überhaupt nicht vorhanden.
   Sichtbar blieben vier Wörter im Kreis.

   Diese Variante stellt die Grafik neben die Fragen, statt sie durch
   Text zu ersetzen: Das Bild ist ein Signature-Element (GAP-Blick) und
   soll bleiben — nur trägt es die Aussage jetzt nicht mehr allein.
   Wird über den Parameter $fragen_sichtbar aktiviert. */

.mb-persp-intro {
	max-width: 62ch;
	margin: 6px auto 0;
	text-align: center;
	color: #3c4a54;
}

.mb-persp-wrap.is-zweispaltig .mb-persp-heading,
.mb-persp-wrap.is-zweispaltig .mb-persp-intro {
	text-align: left;
	margin-left: 0;
}

.mb-persp-wrap.is-zweispaltig .mb-persp-koerper {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
	margin-top: 26px;
}

/* Die Grafik trägt in dieser Fassung keine Aussage mehr allein — die
   Hover-Blase wiederholte nur, was rechts dauerhaft steht, und legte
   sich dabei über die Liste. */
.mb-persp-wrap.is-zweispaltig .persp-node-pop { display: none; }
.mb-persp-wrap.is-zweispaltig .persp-radial { margin: 0; }

.persp-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.persp-liste-punkt {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 14px;
	align-items: start;
	padding-bottom: 18px;
	border-bottom: 1px solid #e1e4e7;
}
.persp-liste-punkt:last-child { border-bottom: 0; padding-bottom: 0; }
.persp-liste-num {
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--wp--preset--color--blau);
	padding-top: 3px;
}
.persp-liste-text h3 {
	font-family: "Sora", sans-serif;
	font-size: 1.02rem;
	font-weight: 700;
	margin: 0 0 4px;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
}
.persp-liste-tag {
	font-family: "IBM Plex Sans", sans-serif;
	font-size: 0.78rem;
	font-weight: 400;
	color: var(--mb-grau-text, #707070);
}
.persp-liste-text p {
	margin: 0;
	color: #3c4a54;
	font-size: 0.95rem;
	line-height: 1.5;
}

/* Untereinander, sobald zwei Spalten zu eng würden. Die Grafik steht
   dann oben, die Fragen darunter — sie sind der Teil, der gelesen wird. */
@media (max-width: 900px) {
	.mb-persp-wrap.is-zweispaltig .mb-persp-koerper {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
	}
	.mb-persp-wrap.is-zweispaltig .persp-radial { margin: 0 auto; }
}

/* In der zweispaltigen Fassung ist die Umgebung linksbündig — eine
   zentrierte Fußnote darunter wäre die nächste eigene Lesekante. */
.mb-persp-wrap.is-zweispaltig .persp-footnote {
	text-align: left;
	margin-top: 22px;
}

/* Mehrabsätziger Einleitungstext (zweispaltige Fassung). */
.mb-persp-intro p { margin: 0 0 14px; }
.mb-persp-intro p:last-child { margin-bottom: 0; }
.mb-persp-wrap.is-zweispaltig .mb-persp-koerper { margin-top: 34px; }