/* Astropraxis — Rueckmeldungen */

.apx-fb {
	--apx-fb-groesse: 56px;
	--apx-fb-avatar-bg: #7d529f;
	--apx-fb-avatar-text: #fff;
	--apx-fb-name: #7d529f;
	--apx-fb-zitat-bg: var(--ap-surface, #f8f6fa);
	--apx-fb-zitat-text: var(--ap-muted, #6f6478);
	--apx-fb-rand: var(--ap-primary, #432333);
	--apx-fb-radius: var(--ap-radius, 4px);
}

.apx-fb__karte {
	display: grid;
	grid-template-columns: var(--apx-fb-groesse) minmax(0, 1fr);
	grid-template-rows: minmax(var(--apx-fb-groesse), auto) auto;
	grid-template-areas:
		"avatar name"
		".      zitat";
	column-gap: 3.75rem;
	margin: 0 0 1.75rem;
	container-type: inline-size;
}

.apx-fb__avatar {
	grid-area: avatar;
	align-self: start;
	width: var(--apx-fb-groesse);
	height: var(--apx-fb-groesse);
	border-radius: 50%;
	overflow: hidden;
	background: var(--apx-fb-avatar-bg);
	color: var(--apx-fb-avatar-text);
	display: grid;
	place-items: center;
}

.apx-fb__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.apx-fb__initialen {
	font-weight: 700;
	font-size: calc(var(--apx-fb-groesse) * .34);
	line-height: 1;
	letter-spacing: .02em;
	user-select: none;
}

.apx-fb__name {
	grid-area: name;
	align-self: center;
	margin: 0 0 .75rem;
	color: var(--apx-fb-name);
	font-weight: 700;
	font-size: 1.3125rem;
	line-height: 1.35;
}

.apx-fb__zitat {
	grid-area: zitat;
	position: relative;
	margin: 0;
	padding: 1rem 1.25rem;
	background: var(--apx-fb-zitat-bg);
	border-radius: var(--apx-fb-radius);
	color: var(--apx-fb-zitat-text);
	font-size: .9375rem;
	line-height: 1.7;
}

/* Spitze zum Avatar hin */
.apx-fb__zitat::before {
	content: "";
	position: absolute;
	top: -8px;
	left: var(--apx-fb-spitze, 14px);
	border: 8px solid transparent;
	border-top: 0;
	border-bottom-color: var(--apx-fb-zitat-bg);
}

.apx-fb__zitat p { margin: 0; }
.apx-fb__zitat p + p { margin-top: .75rem; }

/* Schmale Spalte: Kreis und Name nebeneinander, Zitat darunter ueber die volle Breite.
   Die Abfrage bezieht sich auf die Breite des Moduls, nicht auf die des Fensters —
   so stimmt die Darstellung auch in einer schmalen Seitenspalte. */
@container (max-width: 30rem) {
	.apx-fb__karte {
		grid-template-areas:
			"avatar name"
			"zitat  zitat";
		column-gap: 1rem;
		row-gap: 1rem;
	}

	.apx-fb__zitat {
		--apx-fb-spitze: calc(var(--apx-fb-groesse) / 2 - 8px);
	}
}

/* Ersatzweg fuer Browser ohne Container-Abfragen */
@supports not (container-type: inline-size) {
	@media (max-width: 575px) {
		.apx-fb__karte {
			grid-template-areas:
				"avatar name"
				"zitat  zitat";
			row-gap: 1rem;
		}

		.apx-fb__zitat {
			--apx-fb-spitze: calc(var(--apx-fb-groesse) / 2 - 8px);
		}
	}
}

/* ---------- Aufklappen ---------- */

.apx-fb__mehr { margin-top: 1.5rem; }

.apx-fb__schalter {
	display: block;
	width: fit-content;
	margin-inline: auto;
	padding: .625rem 1.5rem;
	border: 1px solid var(--apx-fb-rand);
	border-radius: 999px;
	color: var(--apx-fb-rand);
	font-size: .875rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	transition: background-color .2s, color .2s;
}

.apx-fb__schalter::-webkit-details-marker { display: none; }
.apx-fb__schalter::marker { content: ''; }

.apx-fb__schalter:hover,
.apx-fb__schalter:focus-visible {
	background: var(--apx-fb-rand);
	color: #fff;
}

.apx-fb__mehr[open] .apx-fb__schalter-auf { display: none; }
.apx-fb__mehr:not([open]) .apx-fb__schalter-zu { display: none; }

/* Ohne Text fuer den zugeklappten Zustand verschwindet der Schalter nach dem Oeffnen */
.apx-fb__mehr[open] .apx-fb__schalter:not(:has(.apx-fb__schalter-zu)) { display: none; }

.apx-fb__weitere { margin-top: 1.75rem; }

@media (prefers-reduced-motion: no-preference) {
	.apx-fb__mehr[open] .apx-fb__weitere {
		animation: apx-fb-auf .25s ease-out;
	}
}

@keyframes apx-fb-auf {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

@media (max-width: 575px) {
	.apx-fb { --apx-fb-groesse: 48px; }
	.apx-fb__karte { column-gap: .75rem; }
	.apx-fb__name { font-size: 1.0625rem; }
	.apx-fb__zitat { padding: .875rem 1rem; }
}


/* ---------- Nur der Text ----------
   Ohne Foto und Namen entfaellt die Spalte fuer den Kreis; das Zitat
   nimmt dann die volle Breite ein. */
.apx-fb__karte--nur-text {
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto;
	grid-template-areas: "zitat";
}

.apx-fb__karte--nur-text .apx-fb__zitat { --apx-fb-spitze: 14px; }

/* Ohne Kreis darueber waere die Spitze ein Zeiger ins Leere */
.apx-fb__karte--nur-text .apx-fb__zitat::before { display: none; }