/* =========================================================
   OWLWAYS — FAMILIES
   Familienübersicht, Stammbaum, Beziehungen & Verwaltung
   Farben ausschließlich über die globalen --owlh-* Variablen
========================================================= */


/* =========================================================
   GEMEINSAME BASIS
========================================================= */

.family-page {
	width: calc(100% - 20px);
	max-width: var(--owlh-content-width, 1120px);
	margin: 30px auto 42px;
	padding: 0;
	box-sizing: border-box;
	color: var(--owlh-text);
	font-size: 13px;
	line-height: 1.7;
}

.family-page *,
.family-tree-viewport *,
.family-tree-info-popover * {
	box-sizing: border-box;
}

.family-page a,
.family-tree-info-popover a {
	color: var(--owlh-accent);
	text-decoration: none;
}

.family-page a:hover,
.family-page a:focus,
.family-tree-info-popover a:hover,
.family-tree-info-popover a:focus {
	color: var(--owlh-accent-hover);
	text-decoration: none;
}

.family-page h1,
.family-page h2,
.family-page h3,
.family-tree-info-title {
	color: var(--owlh-heading);
	font-family: Georgia, "Times New Roman", serif;
	font-weight: normal;
}

.family-page h1 {
	margin: 0 0 16px;
	font-size: 30px;
	line-height: 1.1;
}

.family-page h2 {
	margin: 0 0 14px;
	font-size: 23px;
	line-height: 1.15;
}

.family-page h3 {
	font-size: 18px;
	line-height: 1.2;
}


/* =========================================================
   BUTTONS / FORMULARFELDER
========================================================= */

.family-page .button,
.family-page button,
.family-page input[type="submit"],
.family-page input[type="button"] {
	min-height: 34px;
	padding: 7px 11px;
	border: 1px solid var(--owlh-border);
	border-radius: var(--owlh-radius);
	background: var(--owlh-surface-raised);
	color: var(--owlh-text-soft);
	font-family: inherit;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .07em;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
}

.family-page .button:hover,
.family-page .button:focus,
.family-page button:hover,
.family-page button:focus,
.family-page input[type="submit"]:hover,
.family-page input[type="submit"]:focus,
.family-page input[type="button"]:hover,
.family-page input[type="button"]:focus {
	border-color: var(--owlh-border-strong);
	background: var(--owlh-accent-soft);
	color: var(--owlh-accent-hover);
}

.family-page input[type="text"],
.family-page input[type="search"],
.family-page input[type="date"],
.family-page input[type="number"],
.family-page select,
.family-page textarea,
.family-form-control {
	width: 100%;
	max-width: 100%;
	min-height: 38px;
	padding: 8px 10px;
	border: 1px solid var(--owlh-border);
	border-radius: var(--owlh-radius);
	outline: 0;
	background: var(--owlh-surface-raised);
	color: var(--owlh-text);
	font-family: inherit;
	font-size: 13px;
	line-height: 1.5;
}

.family-page textarea {
	min-height: 120px;
}

.family-page input:hover,
.family-page select:hover,
.family-page textarea:hover {
	border-color: var(--owlh-border-strong);
}

.family-page input:focus,
.family-page select:focus,
.family-page textarea:focus {
	border-color: var(--owlh-accent);
	background: var(--owlh-surface);
}

.family-page label,
.family-form-label {
	color: var(--owlh-text-soft);
}


/* =========================================================
   SEITENNAVIGATION
========================================================= */

.family-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin: 14px 0 24px;
	padding: 10px;
	background: var(--owlh-surface);
	border: 1px solid var(--owlh-border-soft);
}

.family-nav a {
	padding: 8px 11px;
	background: var(--owlh-surface-soft);
	border: 1px solid var(--owlh-border-soft);
	color: var(--owlh-text-soft);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.family-nav a:hover,
.family-nav a:focus,
.family-edit-link {
	background: var(--owlh-accent-soft);
	color: var(--owlh-accent-hover);
}

.family-edit-link {
	font-weight: 700;
}


/* =========================================================
   FAMILIENÜBERSICHT — INTRO
========================================================= */

.family-intro {
	margin: 0 0 22px;
	padding: 24px 26px;
	background: var(--owlh-surface-raised);
	border: 1px solid var(--owlh-border-soft);
	box-shadow: 0 6px 18px var(--owlh-shadow);
	color: var(--owlh-text);
	font-size: 13px;
	line-height: 1.78;
	text-align: left;
}

.family-intro h1,
.family-intro h2 {
	margin-top: 0;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--owlh-border-soft);
}

.family-muted {
	color: var(--owlh-text-muted);
}


/* =========================================================
   FILTER
========================================================= */

.family-filter-panel {
	margin: 0 0 22px;
	padding: 20px;
	background: var(--owlh-surface);
	border: 1px solid var(--owlh-border-soft);
}

.family-filter-tools {
	display: grid;
	grid-template-columns: minmax(220px, 1fr) minmax(180px, 260px) auto;
	gap: 12px;
	align-items: end;
	margin-bottom: 18px;
}

.family-filter-tools label {
	display: block;
	margin-bottom: 6px;
	color: var(--owlh-text-muted);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.family-filter-tools input,
.family-filter-tools select {
	width: 100%;
}

.family-filter-reset {
	white-space: nowrap;
}

.family-type-filters {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-top: 16px;
	border-top: 1px solid var(--owlh-border-soft);
}

.family-type-filter {
	display: grid;
	grid-template-columns: 170px minmax(0, 1fr);
	gap: 14px;
	align-items: start;
}

.family-type-filter-title {
	padding-top: 7px;
	color: var(--owlh-heading);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 14px;
}

.family-type-filter-values {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.family-filter-chip {
	min-height: 32px;
	padding: 6px 9px;
	border: 1px solid var(--owlh-border);
	background: var(--owlh-surface-raised);
	color: var(--owlh-text-soft);
	font: inherit;
	font-size: 11px;
	cursor: pointer;
}

.family-filter-chip:hover,
.family-filter-chip.active {
	border-color: var(--owlh-accent-soft);
	background: var(--owlh-accent-soft);
	color: var(--owlh-accent-hover);
}

.family-filter-chip.active {
	font-weight: 700;
}

.family-filter-summary {
	margin-top: 14px;
	color: var(--owlh-text-muted);
	font-size: 11px;
}

.family-no-results {
	display: none;
	padding: 20px;
	background: var(--owlh-surface);
	border: 1px dashed var(--owlh-border-strong);
	color: var(--owlh-text-muted);
	text-align: center;
}


/* =========================================================
   FAMILIENKARTEN
========================================================= */

.family-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 16px;
	align-items: start;
}

.family-card,
.family-box {
	min-width: 0;
	padding: 20px;
	background: var(--owlh-surface-raised);
	border: 1px solid var(--owlh-border-soft);
	box-shadow: 0 4px 14px var(--owlh-shadow);
}

.family-card[hidden] {
	display: none !important;
}

.family-card h3 {
	position: relative;
	margin: 0 0 14px;
	padding: 0 0 10px;
	border: 0;
	border-bottom: 1px solid var(--owlh-border);
	color: var(--owlh-heading);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 21px;
	font-weight: normal;
	font-style: italic;
	letter-spacing: 0;
	text-align: left;
	text-transform: none;
}

.family-card h3::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 52px;
	height: 1px;
	background: var(--owlh-accent);
}

.family-card h3 a {
	color: inherit;
	text-decoration: none;
}

.family-card h3 a:hover {
	color: var(--owlh-accent);
}

.family-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 8px 0 13px;
}

.family-tag {
	display: inline-block;
	padding: 4px 7px;
	background: var(--owlh-surface-soft);
	border: 1px solid var(--owlh-border-soft);
	color: var(--owlh-text-muted);
	font-size: 9px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.family-card-members {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 13px 0 15px;
	padding: 10px 0 12px;
	border-top: 1px solid var(--owlh-border-soft);
	border-bottom: 1px solid var(--owlh-border-soft);
	color: var(--owlh-text-soft);
	font-size: 11px;
}

.family-card-members i {
	color: var(--owlh-accent);
	opacity: .8;
}

.family-card-fields {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.family-card-field {
	min-width: 0;
}

.family-card-field-title {
	margin-bottom: 5px;
	color: var(--owlh-text-muted);
	font-size: 9px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.family-card-field-content {
	color: var(--owlh-text);
	font-size: 12.5px;
	line-height: 1.68;
	overflow-wrap: anywhere;
	word-break: normal;
	text-align: left;
}

.family-card-field-content br {
	content: "";
	display: block;
	margin-bottom: .35em;
}


/* =========================================================
   FAMILIENDETAIL
========================================================= */

.family-detail-stack {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.family-classification-box,
.family-information-box,
.family-members-box {
	width: 100%;
}

.family-box h2 {
	position: relative;
	margin: 0 0 17px;
	padding: 0 0 10px;
	border-bottom: 1px solid var(--owlh-border);
	font-size: 22px;
}

.family-box h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 58px;
	height: 1px;
	background: var(--owlh-accent);
}

.family-field {
	margin: 0;
	padding: 0 0 18px;
}

.family-field + .family-field {
	padding-top: 18px;
	border-top: 1px solid var(--owlh-border-soft);
}

.family-field:last-child {
	padding-bottom: 0;
}

.family-field-title {
	margin-bottom: 6px;
	color: var(--owlh-text-muted);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.family-field-content {
	max-width: 90ch;
	color: var(--owlh-text);
	font-size: 13px;
	line-height: 1.75;
	overflow-wrap: anywhere;
	word-break: normal;
}

.family-field-content br {
	content: "";
	display: block;
	margin-bottom: .4em;
}


/* =========================================================
   FAMILIENMITGLIEDER
========================================================= */

.family-member-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 9px;
}

.family-member {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px;
	background: var(--owlh-surface);
	border: 1px solid var(--owlh-border-soft);
}

.family-member-avatar {
	flex: 0 0 54px;
	width: 54px;
	height: 54px;
	overflow: hidden;
	border: 1px solid var(--owlh-border-strong);
	background: var(--owlh-surface-deep);
}

.family-member-avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.family-member-content {
	min-width: 0;
	flex: 1 1 auto;
}

.family-member-name {
	color: var(--owlh-heading);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 14px;
	text-decoration: none;
}

.family-member-name:hover,
.family-member-name:focus {
	color: var(--owlh-accent);
	text-decoration: none;
}

.family-responsible {
	margin-top: 4px;
	color: var(--owlh-text-muted);
	font-size: 8px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.family-member-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 7px;
}

.family-member-badge {
	display: inline-block;
	padding: 2px 5px;
	background: var(--owlh-surface-soft);
	border: 1px solid var(--owlh-border);
	color: var(--owlh-text-muted);
	font-size: 8px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .05em;
	text-transform: uppercase;
}


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

.family-form-section {
	margin: 0 0 18px;
	padding: 20px;
	background: var(--owlh-surface);
	border: 1px solid var(--owlh-border-soft);
}

.family-form-section h2 {
	margin-top: 0;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--owlh-border-soft);
}

.family-form-row {
	margin-bottom: 17px;
}

.family-form-row:last-child {
	margin-bottom: 0;
}

.family-form-row > label,
.family-form-label {
	display: block;
	margin-bottom: 6px;
	color: var(--owlh-text-muted);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.family-form-row input[type="text"],
.family-form-row textarea,
.family-form-row select,
.family-form-control {
	width: 100%;
	max-width: 100%;
}

.family-form-textarea {
	line-height: 1.65;
	resize: vertical;
}

.family-form-multiselect {
	min-height: 150px;
}

.family-option-label {
	display: block;
	margin: 6px 0;
	color: var(--owlh-text-soft);
	font-size: 12px;
}

.family-error,
.family-success {
	margin-bottom: 16px;
	padding: 12px 14px;
	font-size: 12px;
	line-height: 1.6;
}

.family-error {
	background: var(--owlh-error-bg);
	border: 1px solid var(--owlh-error-border);
	color: var(--owlh-error);
}

.family-success {
	background: var(--owlh-success-bg);
	border: 1px solid var(--owlh-success-border);
	color: var(--owlh-success);
}


/* =========================================================
   MITGLIEDER-AUSWAHL
========================================================= */

.family-member-picker {
	position: relative;
}

.family-member-search-input {
	width: 100%;
}

.family-member-results {
	position: absolute;
	z-index: 100;
	left: 0;
	right: 0;
	display: none;
	max-height: 240px;
	overflow: auto;
	background: var(--owlh-surface-raised);
	border: 1px solid var(--owlh-border-strong);
	box-shadow: 0 8px 22px var(--owlh-shadow-deep);
}

.family-member-result {
	padding: 9px 11px;
	border-bottom: 1px solid var(--owlh-border-soft);
	color: var(--owlh-text);
	cursor: pointer;
}

.family-member-result:last-child {
	border-bottom: 0;
}

.family-member-result:hover {
	background: var(--owlh-accent-soft);
	color: var(--owlh-accent-hover);
}

.family-selected-members {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 10px;
}

.family-member-chip {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 8px 10px;
	background: var(--owlh-surface-soft);
	border: 1px solid var(--owlh-border-soft);
}

.family-member-chip button {
	margin-left: auto;
}

.family-self-lock {
	color: var(--owlh-text-muted);
	font-size: 10px;
}


/* =========================================================
   BEZIEHUNGEN — KARTEN
========================================================= */

.family-relations-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 12px;
	margin-bottom: 30px;
}

.family-relation {
	padding: 15px;
	background: var(--owlh-surface-raised);
	border: 1px solid var(--owlh-border-soft);
	border-top: 3px solid var(--relation-color, var(--owlh-accent));
	box-shadow: 0 3px 10px var(--owlh-shadow);
}

.family-relation-type {
	color: var(--owlh-text-muted);
	font-size: 8px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.family-relation-type i {
	margin-right: 5px;
}

.family-relation-name {
	display: block;
	margin: 5px 0 8px;
	color: var(--owlh-heading);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 18px;
	font-weight: normal;
}

.family-relation-description {
	color: var(--owlh-text-soft);
	font-size: 12px;
	line-height: 1.7;
	overflow-wrap: anywhere;
}


/* =========================================================
   BEZIEHUNGSNETZ
========================================================= */

.family-network {
	min-height: 620px;
	overflow: hidden;
	background: var(--owlh-surface);
	border: 1px solid var(--owlh-border-soft);
}

.family-network svg {
	display: block;
	width: 100%;
	height: 620px;
}

.family-network-edge {
	stroke: var(--owlh-border-strong);
	stroke-width: 2;
	opacity: .78;
}

.family-network-edge-labelbox {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 4px 7px;
	background: var(--owlh-surface-raised);
	border: 1px solid var(--owlh-border);
	border-radius: var(--owlh-radius);
	color: var(--owlh-text-soft);
	font-size: 10px;
	white-space: nowrap;
}

.family-network-edge-labelbox i {
	font-size: 11px;
}

.family-network-node {
	cursor: pointer;
}

.family-network-node circle,
.family-network-node rect {
	fill: var(--owlh-surface-raised);
	stroke: var(--owlh-border-strong);
	stroke-width: 2;
}

.family-network-node.center circle {
	fill: var(--owlh-accent-soft);
	stroke: var(--owlh-accent);
	stroke-width: 4;
}

.family-network-node text {
	fill: var(--owlh-heading);
	text-anchor: middle;
	dominant-baseline: middle;
	font-size: 12px;
	font-weight: 700;
	pointer-events: none;
}


/* =========================================================
   STAMMBAUM — INTRO / LEGENDE / CONTROLS
========================================================= */

.family-tree-intro {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 28px;
	margin: 0 0 16px;
	padding: 22px 24px;
	background: var(--owlh-surface-raised);
	border: 1px solid var(--owlh-border-soft);
	box-shadow: 0 4px 14px var(--owlh-shadow);
}

.family-tree-intro > div:first-child {
	max-width: 82ch;
}

.family-tree-intro h2 {
	margin: 0 0 8px;
	font-size: 23px;
}

.family-tree-intro p {
	margin: 0;
	color: var(--owlh-text-soft);
	font-size: 13px;
	line-height: 1.75;
}

.family-tree-count {
	flex: 0 0 auto;
	padding: 8px 11px;
	background: var(--owlh-surface-soft);
	border: 1px solid var(--owlh-border);
	color: var(--owlh-text-muted);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .06em;
	white-space: nowrap;
	text-transform: uppercase;
}

.family-tree-legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 9px 18px;
	margin: 0 0 12px;
	padding: 10px 13px;
	background: var(--owlh-surface);
	border: 1px solid var(--owlh-border-soft);
	color: var(--owlh-text-soft);
	font-size: 11px;
}

.family-tree-legend > span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.family-tree-legend-line {
	display: inline-block;
	width: 34px;
	height: 0;
	border-top: 2px solid var(--owlh-border-strong);
}

.family-tree-legend-adoptive {
	border-top-style: dashed;
}

.family-tree-legend-foster {
	border-top-style: dotted;
}

.family-tree-legend-godparent {
	border-top-style: dotted;
	border-top-width: 3px;
	opacity: .6;
}

.family-tree-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
	margin: 0 0 10px;
}

.family-tree-controls .button {
	min-width: 38px;
}

.family-tree-load-more {
	margin-left: auto;
}


/* =========================================================
   STAMMBAUM — VIEWPORT
========================================================= */

.family-tree-viewport {
	position: relative;
	width: 100%;
	min-height: 680px;
	max-height: 78vh;
	overflow: auto;
	box-sizing: border-box;
	background-color: var(--owlh-surface);
	background-image:
		linear-gradient(to right, var(--owlh-border-soft) 1px, transparent 1px),
		linear-gradient(to bottom, var(--owlh-border-soft) 1px, transparent 1px);
	background-size: 28px 28px;
	border: 1px solid var(--owlh-border-strong);
	scrollbar-width: thin;
	scrollbar-color: var(--owlh-scroll-thumb) var(--owlh-scroll-track);
}

.family-tree-viewport::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

.family-tree-viewport::-webkit-scrollbar-track {
	background: var(--owlh-scroll-track);
}

.family-tree-viewport::-webkit-scrollbar-thumb {
	background: var(--owlh-scroll-thumb);
}

.family-tree-viewport::-webkit-scrollbar-thumb:hover {
	background: var(--owlh-scroll-hover);
}

.family-tree-stage {
	position: relative;
	min-width: 100%;
	min-height: 100%;
	isolation: isolate;
}

.family-tree-lines,
.family-tree-nodes {
	position: absolute;
	top: 0;
	left: 0;
}

.family-tree-lines {
	z-index: 1;
	overflow: visible;
	color: var(--owlh-border-strong);
	pointer-events: none;
}

.family-tree-nodes {
	z-index: 2;
}

.family-tree-loading {
	position: sticky;
	z-index: 10;
	top: 18px;
	left: 18px;
	display: inline-block;
	margin: 18px;
	padding: 8px 12px;
	background: var(--owlh-nav-bg);
	border: 1px solid var(--owlh-border-strong);
	color: var(--owlh-nav-text);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.family-tree-loading[hidden] {
	display: none;
}


/* =========================================================
   STAMMBAUM — PERSONENKARTEN
========================================================= */

.family-tree-person {
	position: absolute;
	display: flex;
	flex-direction: column;
	padding: 11px 12px;
	overflow: hidden;
	background: var(--owlh-surface-raised);
	border: 1px solid var(--owlh-border-strong);
	color: var(--owlh-text);
	box-shadow: 0 3px 10px var(--owlh-shadow);
}

.family-tree-person-own {
	border: 2px solid var(--owlh-accent);
}

.family-tree-person-foreign {
	opacity: .86;
}

.family-tree-person-name {
	padding-right: 8px;
	color: var(--owlh-heading);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.family-tree-person-name a {
	color: inherit;
}

.family-tree-person-life {
	margin-top: 4px;
	color: var(--owlh-text-soft);
	font-size: 10px;
	letter-spacing: .02em;
}

.family-tree-person-life-empty {
	color: var(--owlh-text-muted);
	font-style: italic;
}

.family-tree-person-family {
	margin-top: 5px;
	overflow: hidden;
	color: var(--owlh-text-muted);
	font-size: 10px;
	line-height: 1.25;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.family-tree-person-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: auto;
	padding-top: 6px;
}

.family-tree-person-badge {
	display: inline-block;
	padding: 2px 5px;
	background: var(--owlh-surface-soft);
	border: 1px solid var(--owlh-border);
	color: var(--owlh-text-muted);
	font-size: 8px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.family-tree-person-badge-foreign {
	opacity: .65;
}

.family-tree-person-badge-played {
	border-color: var(--owlh-accent-soft);
	color: var(--owlh-accent);
	font-weight: 700;
}

.family-tree-person-birthname {
	margin-top: 2px;
	color: var(--owlh-text-muted);
	font-size: 9px;
	font-style: italic;
}

.family-tree-person-married-out {
	height: auto !important;
	min-height: 72px;
}

.family-tree-married-out-link {
	display: block;
	margin-top: 7px;
	padding-top: 6px;
	border-top: 1px solid var(--owlh-border-soft);
	color: var(--owlh-accent);
	font-size: 9px;
	line-height: 1.35;
}


/* =========================================================
   STAMMBAUM — PAARKARTEN
========================================================= */

.family-tree-couple {
	position: absolute;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr);
	height: 112px;
	overflow: hidden;
	background: var(--owlh-surface-raised);
	border: 1px solid var(--owlh-border-strong);
	box-shadow: 0 3px 10px var(--owlh-shadow);
}

.family-tree-couple-own {
	border: 2px solid var(--owlh-accent);
}

.family-tree-couple-foreign {
	opacity: .88;
}

.family-tree-couple-person {
	min-width: 0;
	display: flex;
	flex-direction: column;
	padding: 10px 9px;
	overflow: hidden;
}

.family-tree-couple-person:first-child {
	border-right: 1px solid var(--owlh-border-soft);
}

.family-tree-couple-person:last-child {
	border-left: 1px solid var(--owlh-border-soft);
}

.family-tree-couple-person-foreign {
	opacity: .76;
}

.family-tree-couple-symbol {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	background: var(--owlh-surface-soft);
	color: var(--owlh-accent);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 12px;
	font-weight: 700;
}

.family-tree-couple .family-tree-person-name {
	font-size: 11px;
	line-height: 1.15;
	white-space: normal;
}

.family-tree-couple .family-tree-person-life,
.family-tree-couple .family-tree-person-family {
	font-size: 9px;
}

.family-tree-couple .family-tree-person-family {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.family-tree-couple .family-tree-person-meta {
	gap: 3px;
	padding-top: 4px;
}

.family-tree-couple .family-tree-person-badge {
	padding: 1px 3px;
	font-size: 7px;
	letter-spacing: .04em;
}


/* =========================================================
   STAMMBAUM — VERBINDUNGSLINIEN
========================================================= */

.family-tree-edge {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	vector-effect: non-scaling-stroke;
}

.family-tree-edge-parent {
	opacity: .72;
}

.family-tree-edge-biological {
	stroke-dasharray: none;
}

.family-tree-edge-adoptive {
	stroke-dasharray: 8 5;
}

.family-tree-edge-foster {
	stroke-dasharray: 2 6;
	stroke-linecap: round;
}

.family-tree-edge-godparent {
	stroke-dasharray: 1 7;
	stroke-width: 2.2;
	stroke-linecap: round;
	opacity: .48;
}

.family-tree-edge-union {
	stroke-width: 1.8;
}

.family-tree-edge-union-unmarried {
	stroke-dasharray: 7 4;
}

.family-tree-edge-union-divorced {
	stroke-dasharray: 3 3;
}

.family-tree-edge-shared-parent {
	stroke-width: 1.8;
}

.family-tree-edge-shared-parent.family-tree-edge-adoptive {
	stroke-dasharray: 8 5;
}

.family-tree-edge-shared-parent.family-tree-edge-foster {
	stroke-dasharray: 2 6;
	stroke-linecap: round;
}

.family-tree-union-label {
	pointer-events: none;
}

.family-tree-union-label rect {
	fill: var(--owlh-surface-raised);
	fill-opacity: .97;
	stroke: var(--owlh-border);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.family-tree-union-label text {
	fill: var(--owlh-text-soft);
	font-family: inherit;
	font-size: 10px;
	font-weight: 700;
}


/* =========================================================
   STAMMBAUM — INFO / BEANSPRUCHEN
========================================================= */

.family-tree-info-button {
	position: absolute;
	z-index: 4;
	top: 6px;
	right: 6px;
	width: 19px;
	height: 19px;
	padding: 0;
	background: var(--owlh-surface);
	border: 1px solid var(--owlh-border-strong);
	border-radius: 50%;
	color: var(--owlh-text-muted);
	font: 700 11px/17px Georgia, serif;
	text-align: center;
	cursor: pointer;
}

.family-tree-info-button:hover,
.family-tree-info-button:focus {
	background: var(--owlh-accent-soft);
	color: var(--owlh-accent-hover);
}

.family-tree-info-popover {
	position: fixed;
	z-index: 9999;
	left: 50%;
	top: 50%;
	width: min(480px, calc(100vw - 40px));
	max-height: min(540px, calc(100vh - 60px));
	padding: 24px;
	overflow: auto;
	transform: translate(-50%, -50%);
	background: var(--owlh-surface-raised);
	border: 1px solid var(--owlh-border-strong);
	box-shadow: 0 16px 44px var(--owlh-shadow-deep);
	color: var(--owlh-text);
}

.family-tree-info-popover[hidden] {
	display: none;
}

.family-tree-info-close {
	position: absolute;
	top: 7px;
	right: 9px;
	padding: 2px 6px;
	background: transparent;
	border: 0;
	color: var(--owlh-text-muted);
	font-size: 20px;
	cursor: pointer;
}

.family-tree-info-close:hover {
	color: var(--owlh-accent);
}

.family-tree-info-title {
	margin-bottom: 10px;
	padding: 0 28px 8px 0;
	border-bottom: 1px solid var(--owlh-border-soft);
	font-size: 19px;
}

.family-tree-info-text {
	color: var(--owlh-text-soft);
	font-size: 12.5px;
	line-height: 1.7;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.family-tree-claim-self {
	position: absolute;
	z-index: 4;
	left: 8px;
	bottom: 6px;
	padding: 2px 5px;
	background: var(--owlh-surface);
	border: 1px solid var(--owlh-border);
	color: var(--owlh-accent);
	font-size: 8px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .05em;
	text-decoration: none;
	text-transform: uppercase;
}

.family-tree-claim-intro {
	max-width: 820px;
	margin-bottom: 14px;
	padding: 14px 16px;
	background: var(--owlh-surface);
	border: 1px solid var(--owlh-border-soft);
	color: var(--owlh-text-soft);
	line-height: 1.65;
}

.family-tree-claim-options {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin-bottom: 16px;
}

.family-tree-claim-option {
	display: block;
	padding: 10px 11px;
	background: var(--owlh-surface-raised);
	border: 1px solid var(--owlh-border);
	cursor: pointer;
}

.family-tree-claim-option:hover {
	background: var(--owlh-accent-soft);
}

.family-tree-claim-option span {
	margin-left: 5px;
	color: var(--owlh-text-muted);
	font-size: 10px;
}


/* =========================================================
   STAMMBAUM-VERWALTUNG
========================================================= */

.family-tree-editor {
	margin: 18px 0;
	padding: 20px;
	background: var(--owlh-surface);
	border: 1px solid var(--owlh-border-soft);
}

.family-tree-editor-heading {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 15px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--owlh-border-soft);
}

.family-tree-editor-heading h2 {
	margin: 0 0 5px;
}

.family-tree-editor-heading p {
	margin: 0;
	color: var(--owlh-text-soft);
	line-height: 1.6;
}

.family-tree-editor-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-bottom: 14px;
}

.family-tree-editor-detail-content {
	padding-top: 16px;
}

.family-tree-editor-detail-content h3 {
	margin: 22px 0 9px;
	color: var(--owlh-heading);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 18px;
	font-weight: normal;
}

.family-tree-editor-detail-content h3:first-child {
	margin-top: 0;
}

.family-tree-editor-table-wrap {
	width: 100%;
	overflow-x: auto;
}

.family-tree-editor-table {
	width: 100%;
	min-width: 620px;
	border-collapse: collapse;
	background: var(--owlh-surface-raised);
}

.family-tree-editor-table th,
.family-tree-editor-table td {
	padding: 9px 10px;
	border: 1px solid var(--owlh-border-soft);
	color: var(--owlh-text);
	font-size: 12px;
	line-height: 1.5;
	text-align: left;
	vertical-align: top;
}

.family-tree-editor-table th {
	background: var(--owlh-surface-soft);
	color: var(--owlh-text-muted);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
}

.family-tree-editor-table td:last-child,
.family-tree-editor-table th:last-child {
	white-space: nowrap;
}

.family-tree-editor-page {
	margin-top: 18px;
}

.family-tree-editor-page > .family-tree-editor-heading {
	padding-bottom: 12px;
	border-bottom: 1px solid var(--owlh-border-soft);
}

.family-tree-editor-form {
	max-width: 820px;
	padding: 20px;
	background: var(--owlh-surface);
	border: 1px solid var(--owlh-border-soft);
}

.family-tree-editor-form .family-form-row {
	margin-bottom: 17px;
}

.family-tree-editor-form .family-form-row:last-of-type {
	margin-bottom: 20px;
}

.family-tree-editor-form small {
	display: block;
	margin-top: 5px;
	color: var(--owlh-text-muted);
	font-size: 10px;
	line-height: 1.5;
}

.family-tree-editor-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.family-tree-delete-warning {
	max-width: 820px;
	margin-bottom: 14px;
	padding: 14px;
	background: var(--owlh-error-bg);
	border: 1px solid var(--owlh-error-border);
	color: var(--owlh-error);
	line-height: 1.6;
}

.family-tree-second-parent-row {
	padding-top: 14px;
	border-top: 1px solid var(--owlh-border-soft);
}

.family-type-edit-group {
	padding-bottom: 18px;
	border-bottom: 1px solid var(--owlh-border-soft);
}

.family-type-edit-group:last-child {
	border-bottom: 0;
}

.family-type-description {
	max-width: 90ch;
	margin: 5px 0 12px;
	color: var(--owlh-text-soft);
	font-size: 12px;
	line-height: 1.65;
}

.family-type-value-options {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.family-type-value-option {
	display: block;
	margin: 0;
	padding: 10px 11px;
	background: var(--owlh-surface-raised);
	border: 1px solid var(--owlh-border-soft);
}

.family-type-value-choice {
	display: flex;
	align-items: center;
	gap: 7px;
}

.family-type-value-description {
	margin: 5px 0 0 22px;
	color: var(--owlh-text-muted);
	font-size: 11px;
	line-height: 1.55;
}

.family-tree-source-name {
	padding: 9px 10px;
	background: var(--owlh-surface-soft);
	border: 1px solid var(--owlh-border);
	color: var(--owlh-heading);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 14px;
}


/* =========================================================
   VERWANDTSCHAFT
========================================================= */

.family-member-badge-kinship,
.family-kinship-switch {
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

.family-member-badge-kinship:hover,
.family-member-badge-kinship:focus,
.family-kinship-switch:hover,
.family-kinship-switch:focus {
	background: var(--owlh-accent-soft);
	color: var(--owlh-accent-hover);
	text-decoration: none;
}

.family-kinship-intro {
	margin-bottom: 14px;
}

.family-kinship-intro p {
	margin: 5px 0 0;
	color: var(--owlh-text-soft);
}

.family-kinship-selector {
	margin-bottom: 18px;
	padding: 15px;
	background: var(--owlh-surface);
	border: 1px solid var(--owlh-border-soft);
}

.family-kinship-selector > label {
	display: block;
	margin-bottom: 6px;
	color: var(--owlh-text-muted);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.family-kinship-selector-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.family-kinship-selector-row select {
	min-width: 0;
	flex: 1 1 auto;
}

.family-kinship-reference {
	margin-bottom: 10px;
	padding-bottom: 9px;
	border-bottom: 1px solid var(--owlh-border-soft);
	color: var(--owlh-text-soft);
}

.family-kinship-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 10px;
}

.family-kinship-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 12px;
	padding: 13px;
	background: var(--owlh-surface-raised);
	border: 1px solid var(--owlh-border-soft);
}

.family-kinship-name {
	display: block;
	color: var(--owlh-heading);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 15px;
}

.family-kinship-life,
.family-kinship-family {
	margin-top: 3px;
	color: var(--owlh-text-muted);
	font-size: 10px;
}

.family-kinship-result {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;
}

.family-kinship-role {
	color: var(--owlh-accent);
	font-weight: 700;
}


/* =========================================================
   FAMILIENTYP-TOOLTIPS
========================================================= */

.family-has-type-tooltip {
	position: relative;
}

.family-type-value-text {
	cursor: help;
}

.family-type-tooltip {
	position: absolute;
	z-index: 50;
	left: 50%;
	bottom: calc(100% + 9px);
	width: max-content;
	min-width: 180px;
	max-width: 320px;
	padding: 10px 11px;
	overflow-wrap: anywhere;
	background: var(--owlh-nav-bg);
	border: 1px solid var(--owlh-border-strong);
	box-shadow: 0 5px 16px var(--owlh-shadow-deep);
	color: var(--owlh-nav-text);
	font-size: 11px;
	line-height: 1.55;
	text-align: left;
	white-space: normal;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translate(-50%, 4px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}

.family-type-tooltip::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 100%;
	width: 7px;
	height: 7px;
	background: var(--owlh-nav-bg);
	border-right: 1px solid var(--owlh-border-strong);
	border-bottom: 1px solid var(--owlh-border-strong);
	transform: translate(-50%, -4px) rotate(45deg);
}

.family-has-type-tooltip:hover > .family-type-tooltip,
.family-has-type-tooltip:focus-within > .family-type-tooltip {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

.family-type-detail-values {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
}

.family-type-detail-value {
	display: inline-block;
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 900px) {

	.family-page {
		width: calc(100% - 16px);
	}

	.family-filter-tools {
		grid-template-columns: minmax(0, 1fr) minmax(180px, 240px);
	}

	.family-filter-reset {
		grid-column: 1 / -1;
		justify-self: start;
	}

	.family-tree-intro {
		gap: 18px;
	}

	.family-network,
	.family-network svg {
		min-height: 560px;
		height: 560px;
	}
}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 700px) {

	.family-page {
		width: calc(100% - 12px);
		margin-top: 20px;
		font-size: 13px;
	}

	.family-page h1 {
		font-size: 26px;
	}

	.family-page h2 {
		font-size: 21px;
	}

	.family-nav {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 6px;
		padding: 7px;
	}

	.family-nav a {
		text-align: center;
	}

	.family-intro,
	.family-filter-panel,
	.family-card,
	.family-box,
	.family-form-section,
	.family-tree-editor,
	.family-tree-editor-form {
		padding: 16px;
	}

	.family-filter-tools,
	.family-type-filter {
		grid-template-columns: 1fr;
	}

	.family-type-filter {
		gap: 6px;
	}

	.family-type-filter-title {
		padding-top: 0;
	}

	.family-grid {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.family-card-field-content,
	.family-field-content {
		font-size: 13px;
	}

	.family-member-list {
		grid-template-columns: 1fr;
	}

	.family-relations-list {
		grid-template-columns: 1fr;
	}

	.family-tree-intro {
		flex-direction: column;
		gap: 12px;
		padding: 17px;
	}

	.family-tree-count {
		white-space: normal;
	}

	.family-tree-load-more {
		margin-left: 0;
		flex-basis: 100%;
	}

	.family-tree-viewport {
		min-height: 560px;
		max-height: 72vh;
	}

	.family-tree-editor-heading {
		flex-direction: column;
	}

	.family-tree-editor-grid {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.family-tree-editor-actions .button {
		flex: 1 1 auto;
	}

	.family-kinship-selector-row {
		align-items: stretch;
		flex-direction: column;
	}

	.family-network {
		min-height: 500px;
		overflow-x: auto;
	}

	.family-network svg {
		min-width: 700px;
		height: 500px;
	}

	.family-tree-info-popover {
		width: calc(100vw - 24px);
		padding: 20px 18px;
	}
}


/* =========================================================
   RESPONSIVE — KLEINE SMARTPHONES
========================================================= */

@media (max-width: 460px) {

	.family-page {
		width: calc(100% - 8px);
	}

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

	.family-intro,
	.family-filter-panel,
	.family-card,
	.family-box,
	.family-form-section,
	.family-tree-editor,
	.family-tree-editor-form {
		padding: 14px;
	}

	.family-grid {
		gap: 8px;
	}

	.family-card h3 {
		font-size: 20px;
	}

	.family-member {
		align-items: flex-start;
	}

	.family-member-avatar {
		flex-basis: 48px;
		width: 48px;
		height: 48px;
	}

	.family-tree-legend {
		align-items: flex-start;
		flex-direction: column;
	}

	.family-tree-controls {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.family-tree-controls .button,
	.family-tree-load-more {
		width: 100%;
		margin: 0;
	}

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