/**
 * Ahnenbaum – Frontend.
 *
 * Aufbau: 1. Tokens · 2. Werkzeugleiste · 3. Bühne/SVG · 4. Listenansicht
 *         5. Detailfenster · 6. Zustände und Barrierefreiheit
 *
 * Die vier Farben sind funktional gebunden, nicht dekorativ:
 *   Blau  = primäre UI, väterliche Linien
 *   Grün  = lebende Personen, Nachkommen-Linien
 *   Gold  = Fokus-Person, Treffer, Eheschließung
 *   Rot   = Verstorbene, mütterliche Linien
 *
 * Farbe ist nie der einzige Informationsträger: Fokus hat zusätzlich einen
 * Ring und aria-current, Verstorbene ein †, Lebende einen grünen Punkt.
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

.ahnenbaum {
	/* Farben – alle Textfarben erreichen auf Weiß mindestens 4,5:1. */
	--ab-blue: #1d5fb5;
	--ab-blue-soft: #e7f0fb;
	--ab-green: #157a4a;
	--ab-green-soft: #e4f4ec;
	--ab-gold: #8a6508;
	--ab-gold-bright: #d9a406;
	--ab-gold-soft: #fdf4dc;
	--ab-red: #a52222;
	--ab-red-soft: #fbeaea;

	--ab-ink: #1a1c1f;
	--ab-ink-muted: #55595f;
	--ab-line: #d7dade;
	--ab-surface: #ffffff;
	--ab-surface-sunken: #f5f6f8;

	--ab-radius: 10px;
	--ab-radius-s: 6px;
	--ab-gap: clamp(0.5rem, 1.5vw, 1rem);
	--ab-stage-height: clamp(28rem, 70vh, 46rem);

	/* Fluide Typografie ohne Framework-Abhängigkeit. */
	--ab-text-s: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
	--ab-text-m: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
	--ab-text-l: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);

	color: var(--ab-ink);
	font-size: var(--ab-text-m);
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	gap: var(--ab-gap);
	margin-block: 1.5rem;
}

/* Dunkles Farbschema respektieren, ohne die Semantik zu verlieren. */
@media (prefers-color-scheme: dark) {
	.ahnenbaum {
		--ab-ink: #f2f3f5;
		--ab-ink-muted: #b7bcc3;
		--ab-line: #3a3f46;
		--ab-surface: #1c2026;
		--ab-surface-sunken: #14171b;
		--ab-blue-soft: #14293f;
		--ab-green-soft: #142c21;
		--ab-gold-soft: #33280d;
		--ab-red-soft: #34181a;
		--ab-blue: #7fb2f0;
		--ab-green: #5cc48d;
		--ab-gold: #e6b83c;
		--ab-red: #f08a8a;
	}
}

/* ==========================================================================
   2. Werkzeugleiste
   ========================================================================== */

.ahnenbaum__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--ab-gap);
	padding: var(--ab-gap);
	background: var(--ab-surface-sunken);
	border: 1px solid var(--ab-line);
	border-radius: var(--ab-radius);
}

.ahnenbaum__search {
	position: relative;
	flex: 1 1 18rem;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.ahnenbaum__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--ab-gap);
}

.ahnenbaum__control {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.ahnenbaum__label {
	font-size: var(--ab-text-s);
	font-weight: 600;
	color: var(--ab-ink-muted);
}

.ahnenbaum__input,
.ahnenbaum__select {
	font: inherit;
	color: var(--ab-ink);
	background: var(--ab-surface);
	border: 1px solid var(--ab-line);
	border-radius: var(--ab-radius-s);
	padding: 0.5rem 0.7rem;
	min-height: 2.75rem; /* Touch-Ziel ≥ 44px */
}

.ahnenbaum__select {
	min-width: 4.5rem;
}

/* Ergebnisliste der Live-Suche */
.ahnenbaum__results {
	position: absolute;
	inset-block-start: 100%;
	inset-inline: 0;
	z-index: 20;
	margin: 0.25rem 0 0;
	padding: 0;
	list-style: none;
	max-block-size: 20rem;
	overflow-y: auto;
	background: var(--ab-surface);
	border: 1px solid var(--ab-line);
	border-radius: var(--ab-radius-s);
	box-shadow: 0 12px 28px rgb(0 0 0 / 12%);
}

.ahnenbaum__result {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.6rem 0.8rem;
	cursor: pointer;
	border-inline-start: 4px solid transparent;
}

.ahnenbaum__result:hover,
.ahnenbaum__result[aria-selected="true"] {
	background: var(--ab-gold-soft);
	border-inline-start-color: var(--ab-gold-bright);
}

.ahnenbaum__result--empty {
	cursor: default;
	color: var(--ab-ink-muted);
}

.ahnenbaum__result-name { font-weight: 600; }
.ahnenbaum__result-meta { font-size: var(--ab-text-s); color: var(--ab-ink-muted); }

/* Schaltflächen */
.ahnenbaum__button {
	font: inherit;
	font-weight: 600;
	color: var(--ab-surface);
	background: var(--ab-blue);
	border: 1px solid transparent;
	border-radius: var(--ab-radius-s);
	padding: 0.55rem 0.9rem;
	min-height: 2.75rem;
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.ahnenbaum__button:hover { filter: brightness(0.92); }

.ahnenbaum__button--ghost {
	color: var(--ab-blue);
	background: transparent;
	border-color: currentcolor;
}

.ahnenbaum__button--icon {
	min-inline-size: 2.75rem;
	padding-inline: 0.6rem;
	font-size: 1.1rem;
	line-height: 1;
}

.ahnenbaum__zoom {
	display: flex;
	gap: 0.35rem;
}

/* ==========================================================================
   3. Bühne und SVG
   ========================================================================== */

.ahnenbaum__stage {
	position: relative;
	block-size: var(--ab-stage-height);
	border: 1px solid var(--ab-line);
	border-radius: var(--ab-radius);
	background:
		radial-gradient(circle at 1px 1px, var(--ab-line) 1px, transparent 0) 0 0 / 28px 28px,
		var(--ab-surface);
	overflow: hidden;
}

.ahnenbaum__stage--list {
	block-size: auto;
	overflow: visible;
	background: var(--ab-surface);
}

.ahnenbaum__svg {
	inline-size: 100%;
	block-size: 100%;
	display: block;
	touch-action: none;      /* eigene Pinch-/Pan-Steuerung */
	cursor: grab;
}

.ahnenbaum__svg.is-dragging { cursor: grabbing; }

.ahnenbaum__svg:focus-visible {
	outline: 3px solid var(--ab-blue);
	outline-offset: -3px;
}

/* Verbindungslinien */
.ahnenbaum__link {
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ahnenbaum__link--father { stroke: var(--ab-blue); }
.ahnenbaum__link--mother { stroke: var(--ab-red); }
.ahnenbaum__link--descent { stroke: var(--ab-green); }

.ahnenbaum__link--union {
	stroke: var(--ab-gold-bright);
	stroke-width: 3;
	stroke-dasharray: 1 6;
}

/* Ehesymbol */
.ahnenbaum__mark-ring {
	fill: var(--ab-surface);
	stroke: var(--ab-gold-bright);
	stroke-width: 3;
}

.ahnenbaum__mark-label {
	fill: var(--ab-gold);
	font-size: 12px;
	font-weight: 600;
}

/* Personenkarten */
.ahnenbaum__node { cursor: pointer; }

.ahnenbaum__card {
	fill: var(--ab-surface);
	stroke: var(--ab-line);
	stroke-width: 1.5;
}

.ahnenbaum__stripe { fill: var(--ab-ink-muted); }

.ahnenbaum__node--m .ahnenbaum__stripe { fill: var(--ab-blue); }
.ahnenbaum__node--f .ahnenbaum__stripe { fill: var(--ab-red); }
.ahnenbaum__node--d .ahnenbaum__stripe { fill: var(--ab-green); }

.ahnenbaum__node.is-living .ahnenbaum__card { stroke: var(--ab-green); }

.ahnenbaum__node.is-focus .ahnenbaum__card {
	stroke: var(--ab-gold-bright);
	stroke-width: 3.5;
	filter: drop-shadow(0 4px 10px rgb(0 0 0 / 18%));
}

.ahnenbaum__node.is-restricted .ahnenbaum__card {
	stroke-dasharray: 5 4;
}

.ahnenbaum__node:hover .ahnenbaum__card { stroke: var(--ab-blue); }

.ahnenbaum__node:focus-visible {
	outline: none;
}

.ahnenbaum__node:focus-visible .ahnenbaum__card {
	stroke: var(--ab-blue);
	stroke-width: 4;
}

.ahnenbaum__avatar { fill: var(--ab-blue-soft); }
.ahnenbaum__node--f .ahnenbaum__avatar { fill: var(--ab-red-soft); }
.ahnenbaum__node.is-living .ahnenbaum__avatar { fill: var(--ab-green-soft); }

.ahnenbaum__initials {
	fill: var(--ab-ink-muted);
	font-size: 15px;
	font-weight: 700;
}

.ahnenbaum__name {
	fill: var(--ab-ink);
	font-size: 14px;
	font-weight: 600;
}

.ahnenbaum__dates {
	fill: var(--ab-ink-muted);
	font-size: 12px;
}

.ahnenbaum__symbol {
	fill: var(--ab-red);
	font-size: 14px;
	font-weight: 700;
}

.ahnenbaum__info circle {
	fill: var(--ab-blue-soft);
	stroke: var(--ab-blue);
	stroke-width: 1.5;
}

.ahnenbaum__info-label {
	fill: var(--ab-blue);
	font-size: 13px;
	font-weight: 700;
	font-style: italic;
}

.ahnenbaum__info:focus-visible circle {
	stroke-width: 3.5;
}

/* ==========================================================================
   4. Listenansicht (mobil und als barrierefreie Alternative)
   ========================================================================== */

.ahnenbaum__list {
	padding: var(--ab-gap);
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.ahnenbaum__generation-title {
	font-size: var(--ab-text-l);
	margin: 0 0 0.5rem;
	padding-block-end: 0.35rem;
	border-block-end: 2px solid var(--ab-blue);
}

.ahnenbaum__cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.75rem;
	grid-template-columns: 1fr;
}

@container (min-width: 34rem) {
	.ahnenbaum__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container (min-width: 58rem) {
	.ahnenbaum__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ahnenbaum__card-item {
	display: flex;
	gap: 0.75rem;
	padding: 0.75rem;
	background: var(--ab-surface);
	border: 1px solid var(--ab-line);
	border-inline-start: 5px solid var(--ab-ink-muted);
	border-radius: var(--ab-radius-s);
}

.ahnenbaum__card-item--m { border-inline-start-color: var(--ab-blue); }
.ahnenbaum__card-item--f { border-inline-start-color: var(--ab-red); }
.ahnenbaum__card-item--d { border-inline-start-color: var(--ab-green); }

.ahnenbaum__card-item.is-focus {
	border-color: var(--ab-gold-bright);
	background: var(--ab-gold-soft);
}

.ahnenbaum__card-image {
	inline-size: 56px;
	block-size: 56px;
	object-fit: cover;
	border-radius: 50%;
	flex: none;
}

.ahnenbaum__card-body {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}

.ahnenbaum__card-name { margin: 0; font-weight: 600; }
.ahnenbaum__card-dates,
.ahnenbaum__card-place {
	margin: 0;
	font-size: var(--ab-text-s);
	color: var(--ab-ink-muted);
}

.ahnenbaum__card-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-block-start: 0.4rem;
}

.ahnenbaum__card-actions .ahnenbaum__button {
	font-size: var(--ab-text-s);
	padding: 0.4rem 0.7rem;
	min-height: 2.25rem;
}

/* ==========================================================================
   5. Detailfenster (natives dialog – Fokus-Käfig und ESC ohne eigenes JS)
   ========================================================================== */

.ahnenbaum__drawer {
	inline-size: min(34rem, 100vw);
	max-inline-size: 100%;
	block-size: 100%;
	max-block-size: 100dvh;
	margin: 0 0 0 auto;      /* als Seitenfenster rechts */
	padding: 0;
	border: none;
	border-inline-start: 1px solid var(--ab-line);
	background: var(--ab-surface);
	color: var(--ab-ink);
	overflow-y: auto;
}

.ahnenbaum__drawer::backdrop {
	background: rgb(10 12 15 / 55%);
}

.ahnenbaum__drawer-header {
	position: sticky;
	inset-block-start: 0;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem;
	background: var(--ab-surface);
	border-block-end: 3px solid var(--ab-gold-bright);
	z-index: 2;
}

.ahnenbaum__drawer-portrait {
	inline-size: 64px;
	block-size: 64px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
}

.ahnenbaum__drawer-title {
	margin: 0;
	font-size: var(--ab-text-l);
}

.ahnenbaum__drawer-span {
	margin: 0.15rem 0 0;
	color: var(--ab-ink-muted);
	font-size: var(--ab-text-s);
}

.ahnenbaum__drawer-close {
	margin-inline-start: auto;
	font-size: 1.6rem;
	line-height: 1;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border: 1px solid var(--ab-line);
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.ahnenbaum__drawer-content { padding: 1rem; }

.ahnenbaum__drawer-section + .ahnenbaum__drawer-section {
	margin-block-start: 1.25rem;
	padding-block-start: 1.25rem;
	border-block-start: 1px solid var(--ab-line);
}

.ahnenbaum__drawer-subtitle {
	margin: 0 0 0.5rem;
	font-size: var(--ab-text-m);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ab-blue);
}

.ahnenbaum__subtitle {
	margin: 0.75rem 0 0.35rem;
	font-size: var(--ab-text-s);
	color: var(--ab-ink-muted);
}

.ahnenbaum__facts {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.3rem 0.75rem;
	margin: 0;
}

.ahnenbaum__facts dt { font-weight: 600; }
.ahnenbaum__facts dd { margin: 0; }

.ahnenbaum__history {
	margin: 0;
	padding-inline-start: 1.1rem;
}

.ahnenbaum__relation-meta {
	margin: 0.4rem 0 0;
	font-size: var(--ab-text-s);
	color: var(--ab-gold);
	font-weight: 600;
}

.ahnenbaum__mini-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.ahnenbaum__mini-button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.35rem 0.6rem;
	font: inherit;
	color: inherit;
	text-align: start;
	background: var(--ab-surface-sunken);
	border: 1px solid var(--ab-line);
	border-inline-start: 4px solid var(--ab-ink-muted);
	border-radius: var(--ab-radius-s);
	cursor: pointer;
	min-height: 2.75rem;
}

.ahnenbaum__mini-card--m .ahnenbaum__mini-button { border-inline-start-color: var(--ab-blue); }
.ahnenbaum__mini-card--f .ahnenbaum__mini-button { border-inline-start-color: var(--ab-red); }

.ahnenbaum__mini-image {
	inline-size: 28px;
	block-size: 28px;
	border-radius: 50%;
	object-fit: cover;
}

.ahnenbaum__mini-text { display: flex; flex-direction: column; }
.ahnenbaum__mini-name { font-weight: 600; }
.ahnenbaum__mini-dates { font-size: var(--ab-text-s); color: var(--ab-ink-muted); }

.ahnenbaum__biography :where(p, ul, ol) { margin-block: 0 0.75rem; }

.ahnenbaum__drawer-footer {
	position: sticky;
	inset-block-end: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 1rem;
	background: var(--ab-surface);
	border-block-start: 1px solid var(--ab-line);
}

.ahnenbaum__notice {
	margin: 0 0 1rem;
	padding: 0.6rem 0.8rem;
	background: var(--ab-gold-soft);
	border-inline-start: 4px solid var(--ab-gold-bright);
	border-radius: var(--ab-radius-s);
	font-size: var(--ab-text-s);
}

/* ==========================================================================
   6. Zustände und Barrierefreiheit
   ========================================================================== */

.ahnenbaum__status {
	margin: 0;
	font-size: var(--ab-text-s);
	color: var(--ab-ink-muted);
}

.ahnenbaum__empty,
.ahnenbaum__drawer-loading,
.ahnenbaum__drawer-error {
	padding: 2rem 1rem;
	text-align: center;
	color: var(--ab-ink-muted);
}

.ahnenbaum__drawer-error { color: var(--ab-red); }

.ahnenbaum.is-loading .ahnenbaum__stage { opacity: 0.6; }

/* Sichtbarer Fokus für alle interaktiven Elemente. */
.ahnenbaum :where(button, a, input, select, [tabindex]):focus-visible {
	outline: 3px solid var(--ab-blue);
	outline-offset: 2px;
	border-radius: var(--ab-radius-s);
}

/* Keine Animationen, wenn der Nutzer das abgestellt hat. */
@media (prefers-reduced-motion: reduce) {
	.ahnenbaum * {
		transition: none !important;
		animation: none !important;
	}
}

/* Erhöhter Kontrast. */
@media (prefers-contrast: more) {
	.ahnenbaum { --ab-line: currentcolor; }
	.ahnenbaum__card { stroke-width: 2.5; }
}

/* Druck: Baum als Liste, keine Steuerelemente. */
@media print {
	.ahnenbaum__toolbar,
	.ahnenbaum__drawer,
	.ahnenbaum__card-actions { display: none !important; }

	.ahnenbaum__stage {
		block-size: auto;
		border: none;
		background: none;
	}

	.ahnenbaum__svg { display: none !important; }
	.ahnenbaum__list { display: block !important; }
	.ahnenbaum__list[hidden] { display: block !important; }
}

/* ==========================================================================
   Verbindungsarten im Baum (ab Version 1.11)
   ========================================================================== */

/* Partnerschaft ohne Trauung: grün statt gold, weiter gestrichelt. */
.ahnenbaum__link--partnership { stroke: var(--ab-green); stroke-dasharray: 4 6; }

/* Verbindung ohne Partnerschaft: nur eine feine Andeutung. */
.ahnenbaum__link--relation { stroke: var(--ab-ink-muted); stroke-width: 2; stroke-dasharray: 2 7; }

/* Beendete Verbindungen werden zurückgenommen dargestellt. */
.ahnenbaum__link--union.is-ended { opacity: 0.55; }

.ahnenbaum__mark--partnership .ahnenbaum__mark-ring { stroke: var(--ab-green); }
.ahnenbaum__mark--relation .ahnenbaum__mark-ring { stroke: var(--ab-ink-muted); stroke-width: 2; }

/* Ein durchgestrichener Ring zeigt: die Verbindung wurde beendet. */
.ahnenbaum__mark.is-ended .ahnenbaum__mark-ring { stroke-dasharray: 3 3; }

/* ==========================================================================
   Breite Darstellung (ab Version 1.11.1)
   --------------------------------------------------------------------------
   Block-Themes begrenzen den Inhaltsbereich oft auf 700–800 px. Für einen
   Stammbaum ist das zu eng. Der Container bricht deshalb aus dem Textfluss
   aus und zentriert sich am Fenster – ohne Transform, damit Positionierung
   und Druckausgabe unangetastet bleiben.
   ========================================================================== */

.ahnenbaum--wide {
	--ab-stage-max: 1366px;
	--ab-stage-half: 683px;

	inline-size: min(var(--ab-stage-max), calc(100vw - 2rem));
	max-inline-size: none;

	/* 50 % der Elternbreite minus halbe Zielbreite = optische Mitte. */
	margin-inline-start: calc(50% - min(var(--ab-stage-half), 50vw - 1rem));
	margin-inline-end: calc(50% - min(var(--ab-stage-half), 50vw - 1rem));
}

/* Auf schmalen Bildschirmen bleibt alles beim Normalfluss. */
@media (max-width: 48rem) {
	.ahnenbaum--wide {
		inline-size: 100%;
		margin-inline: 0;
	}
}

/* Im Ausdruck ebenfalls kein Ausbruch. */
@media print {
	.ahnenbaum--wide {
		inline-size: 100%;
		margin-inline: 0;
	}
}

/* Zweite Namenszeile auf den Karten (Geburtsname). */
.ahnenbaum__birthname {
	fill: var(--ab-ink-muted);
	font-size: 12px;
	font-style: italic;
}

.ahnenbaum__node.is-focus .ahnenbaum__birthname { fill: var(--ab-gold); }

/* ==========================================================================
   Personenauswahl mit Suche (Verwandtschaftsrechner)
   ========================================================================== */

.ab-picker__search {
	margin-block-end: 0.35rem;
}

.ab-picker__status {
	display: block;
	min-block-size: 1.3em;
	margin-block-start: 0.3rem;
	font-size: var(--ab-text-s);
	font-style: italic;
	color: var(--ab-ink-muted);
}