/**
 * Beraterin mit Statuspunkt.
 *
 * Bewusst ohne Pulsieren: Der Punkt sagt schon durch seine Farbe, was los ist,
 * und ein animierter Ring neben dem Gesicht zieht die Aufmerksamkeit auf die
 * Technik statt auf den Menschen.
 */

.eb-beraterin {
	display: flex;
	align-items: center;
	gap: 0.85rem;
}

.eb-beraterin__bild {
	position: relative;
	flex: none;
	line-height: 0;
}

.eb-beraterin__foto {
	display: block;
	inline-size: 58px;
	block-size: 58px;
	border-radius: 50%;
	object-fit: cover;
	/* Der weiße Ring trennt das Foto vom Hintergrund, egal wie hell der ist. */
	border: 2px solid var(--wp--preset--color--base, #fff);
	box-shadow: 0 6px 18px rgba(54, 24, 47, 0.14);
}

.eb-beraterin__punkt {
	position: absolute;
	inset-inline-end: 1px;
	inset-block-end: 1px;
	inline-size: 14px;
	block-size: 14px;
	border-radius: 50%;
	border: 2.5px solid var(--wp--preset--color--base, #fff);
	background: #b9a9bd;
}

.eb-beraterin__punkt.ist-online {
	background: var(--wp--preset--color--success, #1a7f5a);
}

.eb-beraterin__text {
	display: grid;
	gap: 2px;
	min-inline-size: 0;
}

.eb-beraterin__name {
	font-weight: 700;
	font-size: 0.94rem;
	line-height: 1.3;
}

.eb-beraterin__status {
	font-size: 0.83rem;
	line-height: 1.35;
	color: var(--wp--preset--color--muted, #6f6270);
}

/* Auf dunklem Grund trägt der Ring die Flächenfarbe, sonst schwimmt das Foto. */
.eb-beraterin--dunkel .eb-beraterin__foto,
.eb-beraterin--dunkel .eb-beraterin__punkt {
	border-color: var(--wp--preset--color--primary-dark, #2f1634);
}

.eb-beraterin--dunkel .eb-beraterin__name {
	color: var(--wp--preset--color--base, #fff);
}

.eb-beraterin--dunkel .eb-beraterin__status {
	color: var(--wp--preset--color--on-dark, #cbbdcd);
}