/* =========================================================
   FAMILIE IM MEMBERPROFIL
   ========================================================= */

.embers-family-profile {
	width: 100%;
	min-width: 0;
}


/* Titel */

.embers-family-title {
	font-family: Georgia, "Times New Roman", serif;

	font-size: 25px;
	font-style: italic;
	font-weight: normal;

	color: #d8b49b;

	text-align: center;
}


/* Ornament */

.embers-family-line {
	display: flex;
	align-items: center;

	gap: 8px;

	max-width: 340px;

	margin: 10px auto 22px;
}

.embers-family-line span {
	flex: 1;

	height: 1px;

	background: rgba(154,129,105,.25);
}

.embers-family-line i {
	width: 6px;
	height: 6px;

	background: #c77854;

	transform: rotate(45deg);
}


/* =========================================================
   BESCHREIBUNG + STATISTIK
   ========================================================= */

.embers-family-overview {
	display: grid;

	grid-template-columns:
		minmax(0, 1.7fr)
		minmax(210px, .75fr);

	background: #292627;

	border-top: 1px solid rgba(154,129,105,.22);
	border-bottom: 1px solid rgba(154,129,105,.14);
}

.embers-family-description,
.embers-family-stats {
	min-width: 0;

	padding: 16px 17px;
}

.embers-family-stats {
	border-left: 1px solid rgba(154,129,105,.12);
}


/* Überschrift */

.embers-family-heading {
	margin-bottom: 12px;
	padding-bottom: 8px;

	font-family: Georgia, "Times New Roman", serif;

	font-size: 15px;

	color: #d8b49b;

	border-bottom: 1px solid rgba(154,129,105,.15);
}


/* Beschreibung */

.embers-family-description-text {
	max-height: 180px;

	padding-right: 8px;

	overflow-y: auto;

	font-size: 10px;
	line-height: 1.68;

	color: #b8afaa;

	text-align: justify;

	scrollbar-width: thin;
	scrollbar-color: #5d514a #292627;
}


/* =========================================================
   STATISTIK
   ========================================================= */

.embers-family-stat {
	display: flex;
	align-items: center;

	gap: 5px;

	padding: 7px 2px;

	border-bottom: 1px solid rgba(154,129,105,.09);

	font-size: 8px;
}

.embers-family-stat strong {
	font-weight: normal;

	color: #c8ad94;
}

.embers-family-stat span {
	color: #817976;

	letter-spacing: .45px;
}


/* =========================================================
   BEARBEITEN
   ========================================================= */

.embers-family-actions {
	margin: 13px 0 17px;

	padding: 8px 11px;

	background: #252324;

	border-top: 1px solid rgba(154,129,105,.11);
	border-bottom: 1px solid rgba(154,129,105,.11);

	font-size: 7px;
	letter-spacing: .8px;
	text-transform: uppercase;
}

.embers-family-actions a {
	color: #c8ad94 !important;
	text-decoration: none !important;
}

.embers-family-actions a:hover {
	color: #c98a68 !important;
}


/* =========================================================
   GENERATIONEN
   ========================================================= */

.embers-family-generations {
	max-height: 390px;

	padding-right: 7px;

	overflow-y: auto;

	scrollbar-width: thin;
	scrollbar-color: #5d514a #292627;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media screen and (max-width: 700px) {

	.embers-family-overview {
		grid-template-columns: 1fr;
	}

	.embers-family-stats {
		border-left: 0;
		border-top: 1px solid rgba(154,129,105,.12);
	}

}

/* =========================================================
   FAMILY – GENERATIONEN
   Plugin-Tabellenstruktur bleibt erhalten
   ========================================================= */

#familytable {
	width: 100%;
	margin: 0 0 18px;
	overflow: visible;
}

#familytable > table {
	width: auto !important;
	max-width: 100%;

	margin: 0 !important;

	background: transparent !important;

	border: 0 !important;
	border-collapse: separate !important;
	border-spacing: 10px 0 !important;
}

#familytable > table > tbody > tr {
	background: transparent !important;
}


/* =========================================================
   MITGLIEDSKARTE
   ========================================================= */

#familytable td#family {
	width: 180px !important;
	min-width: 180px !important;
	max-width: 180px !important;

	padding: 0 !important;

	vertical-align: top !important;
	text-align: center !important;

	background: #292627 !important;

	border: 1px solid rgba(154,129,105,.14) !important;

	box-sizing: border-box;
}


/* Name + Position */

#familytable .family-fullname {
	display: block;

	width: 100%;

	padding: 9px 7px;

	box-sizing: border-box;

	background: transparent !important;

	border: 0 !important;
	border-bottom: 1px solid rgba(154,129,105,.13) !important;

	font-family: Georgia, "Times New Roman", serif;
	font-size: 12px;
	font-weight: normal;
	letter-spacing: .5px;
	text-transform: uppercase;

	color: #d8b49b;

	text-align: center;
}


/* =========================================================
   BILD
   ========================================================= */

#familytable td#family > div[align="center"] {
	padding: 12px 8px;

	background: #252324;
}

#familytable td#family img {
	display: block;

	width: 105px !important;
	height: 105px !important;

	margin: 0 auto !important;

	object-fit: cover;

	border: 1px solid rgba(154,129,105,.18);

	filter:
		saturate(.72)
		brightness(.88);
}


/* =========================================================
   PLUGIN-BITS
   ========================================================= */

#familytable td#family .trow1,
#familytable td#family .trow2,
#familytable td#family .tcat,
#familytable td#family .thead {
	background: transparent !important;

	border: 0 !important;

	box-shadow: none !important;
}


/* =========================================================
   LINKS
   ========================================================= */

#familytable td#family a {
	color: #c8ad94 !important;

	font-size: 7px;
	font-weight: normal;
	letter-spacing: .6px;
	text-transform: uppercase;

	text-decoration: none !important;
}

#familytable td#family a:hover {
	color: #c98a68 !important;
}


/* =========================================================
   BESCHREIBUNGS-POPUP
   ========================================================= */

.family-pop {
	display: none;
}

.family-pop:target {
	display: block;

	position: fixed;

	z-index: 9999;

	top: 50%;
	left: 50%;

	width: 520px;
	max-width: 85vw;
	max-height: 70vh;

	padding: 18px;

	overflow-y: auto;

	transform: translate(-50%, -50%);

	background: #292627;

	border: 1px solid rgba(154,129,105,.28);

	box-shadow: 0 15px 50px rgba(0,0,0,.45);
}

.family-pop .description {
	color: #b8afaa;

	font-size: 10px;
	line-height: 1.7;

	text-align: justify;
}

/* =========================================================
   FAMILY – GENERATION MIT DIV-KARTEN
   ========================================================= */

.embers-family-generation {
	margin-bottom: 22px;
}

.embers-family-generation-title {
	padding: 9px 12px;
	margin-bottom: 12px;

	font-family: Georgia, "Times New Roman", serif;
	font-size: 16px;
	font-weight: normal;

	color: #d8b49b;

	background: #292627;

	border-top: 1px solid rgba(154,129,105,.18);
	border-bottom: 1px solid rgba(154,129,105,.18);
}


/* Karten nebeneinander */

.embers-family-generation-cards {
	display: grid;
	grid-template-columns: repeat(4, 180px);

	gap: 12px;

	align-items: start;
	justify-content: start;
}


/* =========================================================
   EINZELNE KARTE
   ========================================================= */

.embers-family-card {
	width: 180px;

	background: #292627;

	border: 1px solid rgba(154,129,105,.14);

	text-align: center;

	overflow: hidden;

	box-sizing: border-box;
}


/* Name */

.embers-family-card-name {
	padding: 9px 7px;

	font-family: Georgia, "Times New Roman", serif;
	font-size: 13px;
	font-weight: normal;
	letter-spacing: .4px;
	text-transform: uppercase;

	color: #d8b49b;

	border-bottom: 1px solid rgba(154,129,105,.13);
}


/* Bild */

.embers-family-card-image {
	display: flex;
	align-items: center;
	justify-content: center;

	height: 125px;

	padding: 10px;

	background: #252324;

	box-sizing: border-box;
}

.embers-family-card-image img {
	display: block;

	width: 105px !important;
	height: 105px !important;

	margin: 0 auto !important;

	object-fit: cover;

	border: 1px solid rgba(154,129,105,.18);

	filter:
		saturate(.75)
		brightness(.9);
}


/* Position */

.embers-family-card-position {
	padding: 8px 7px;

	font-size: 7px;
	letter-spacing: .8px;
	text-transform: uppercase;

	color: #9f8d80;

	border-top: 1px solid rgba(154,129,105,.10);
	border-bottom: 1px solid rgba(154,129,105,.10);
}


/* =========================================================
   ACTIONS
   ========================================================= */

.embers-family-card-actions {
	padding: 7px 8px;

	font-size: 7px;
	line-height: 1.7;
	letter-spacing: .5px;
	text-transform: uppercase;

	color: #817976;
}

.embers-family-card-actions * {
	background: transparent !important;

	border: 0 !important;

	box-shadow: none !important;

	font-family: inherit !important;
	font-size: inherit !important;
}

.embers-family-card-actions a {
	color: #c8ad94 !important;

	text-decoration: none !important;
}

.embers-family-card-actions a:hover {
	color: #c98a68 !important;
}


/* =========================================================
   POPUP
   ========================================================= */

.family-pop {
	display: none;
}

.family-pop:target {
	display: block;

	position: fixed;

	top: 50%;
	left: 50%;

	z-index: 9999;

	width: 520px;
	max-width: 85vw;
	max-height: 70vh;

	padding: 18px;

	overflow-y: auto;

	transform: translate(-50%, -50%);

	background: #292627;

	border: 1px solid rgba(154,129,105,.28);

	box-shadow: 0 15px 50px rgba(0,0,0,.45);
}

.embers-family-pop-title {
	margin-bottom: 10px;
	padding-bottom: 8px;

	font-family: Georgia, "Times New Roman", serif;
	font-size: 16px;

	color: #d8b49b;

	border-bottom: 1px solid rgba(154,129,105,.14);
}

.embers-family-pop-title span {
	margin-left: 7px;

	font-family: Arial, sans-serif;
	font-size: 7px;
	letter-spacing: .7px;
	text-transform: uppercase;

	color: #817976;
}

.embers-family-pop-description {
	color: #b8afaa;

	font-size: 10px;
	line-height: 1.7;

	text-align: justify;
}


/* Responsive */

@media screen and (max-width: 1000px) {

	.embers-family-generation-cards {
		grid-template-columns: repeat(3, 180px);
	}

}

@media screen and (max-width: 750px) {

	.embers-family-generation-cards {
		grid-template-columns: repeat(2, 180px);
	}

}

/* =========================================================
   FAMILIE – GENERATIONSÜBERSCHRIFT
   ========================================================= */

#family > .thead {
	background: #292627 !important;
	background-image: none !important;

	border: 0 !important;
	border-top: 1px solid rgba(154,129,105,.22) !important;
	border-bottom: 1px solid rgba(154,129,105,.22) !important;

	border-radius: 0 !important;
	box-shadow: none !important;

	padding: 11px 14px !important;

	font-family: Georgia, "Times New Roman", serif !important;
	font-size: 16px !important;
	font-weight: normal !important;

	color: #d8b49b !important;

	text-align: left;
}


/* etwas Abstand zwischen den Generationen */

#familytable + #family {
	margin-top: 22px;
}


/* Generationenbereich selbst */

#familytable {
	margin-top: 0;
	margin-bottom: 18px;

	border-bottom: 1px solid rgba(154,129,105,.10);
}


/* Karten direkt unter der Überschrift */

#familytable > table {
	margin-top: 0 !important;
}

#family > .thead::after {
	content: "◆";

	margin-left: 9px;

	font-size: 6px;

	color: #c77854;
	vertical-align: middle;
}