.ek-family-access {
	margin: 0 0 24px;
	padding: 20px;
	border: 1px solid var(--evenzkreis-dashboard-border, #cbd3cc);
	border-radius: 12px;
	background: var(--evenzkreis-dashboard-sub-bg, #f4f5ef);
	color: var(--evenzkreis-dashboard-text-color, #4a5568);
}

.ek-family-access__heading,
.ek-family-access__person,
.ek-family-access__actions,
.ek-family-access__invite > div {
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
}

.ek-family-access__heading {
	align-items: flex-start;
	margin-bottom: 16px;
}

.ek-family-access__heading h4 {
	margin: 0 0 4px;
	color: var(--evenzkreis-dashboard-title-color, #203844);
	font-size: 1.05rem;
}

.ek-family-access__heading p,
.ek-family-access__invite p {
	margin: 0;
	font-size: .88rem;
}

.ek-family-access__heading > span,
.ek-family-access__status {
	flex: 0 0 auto;
	padding: 4px 9px;
	border-radius: 999px;
	background: #e4e9e5;
	color: #344a42;
	font-size: .75rem;
	font-weight: 700;
}

.ek-family-access__person {
	padding: 14px 0;
	border-top: 1px solid var(--evenzkreis-dashboard-border, #cbd3cc);
	border-bottom: 1px solid var(--evenzkreis-dashboard-border, #cbd3cc);
}

.ek-family-access__person > div {
	display: grid;
	gap: 2px;
}

.ek-family-access__person strong {
	color: var(--evenzkreis-dashboard-title-color, #203844);
}

.ek-family-access__person span:not(.ek-family-access__status) {
	font-size: .84rem;
}

.ek-family-access__status.is-active {
	background: #d8ebdd;
	color: #175b37;
}

.ek-family-access__status.is-pending {
	background: #fff0c7;
	color: #714b00;
}

.ek-family-access__actions {
	justify-content: flex-start;
	flex-wrap: wrap;
	margin-top: 14px;
}

.ek-family-access__actions form {
	margin: 0;
}

.ek-family-access__notice {
	margin: 0 0 14px;
	padding: 10px 12px;
	border: 1px solid;
	border-radius: 8px;
	font-size: .88rem;
}

.ek-family-access__notice.is-success {
	border-color: #8cc6a0;
	background: #edf8f0;
	color: #175b37;
}

.ek-family-access__notice.is-error {
	border-color: #e2a59c;
	background: #fff3f1;
	color: #7d2d23;
}

.ek-family-access__invite {
	display: grid;
	gap: 8px;
	margin: 0;
}

.ek-family-access__invite label {
	color: var(--evenzkreis-dashboard-title-color, #203844);
	font-weight: 700;
}

.ek-family-access__invite input {
	min-width: 0;
	flex: 1 1 260px;
}

.ek-family-access__invite button {
	flex: 0 0 auto;
	width: auto;
	margin: 0;
}

.ek-family-access :focus-visible {
	outline: 3px solid #f4b840;
	outline-offset: 2px;
}

@media (max-width: 640px) {
	.ek-family-access {
		padding: 16px;
	}

	.ek-family-access__heading,
	.ek-family-access__person,
	.ek-family-access__invite > div {
		align-items: stretch;
		flex-direction: column;
	}

	.ek-family-access__heading > span,
	.ek-family-access__status {
		align-self: flex-start;
	}

	.ek-family-access__invite button {
		width: 100%;
	}
}