/*
Theme Name: Filder Ahnen
Theme URI: https://ahnenbaum.filder-ahnen.de
Author: Udo Späker mit KI für Andreas Küster
Description: Eigenständiges, klassisches WordPress-Theme als Rahmen für das Plugin „Ahnenbaum". Heller, archivarischer Look mit lebendigen Akzenten aus der Farbpalette des Ahnenbaums, elegantem Header und Footer, austauschbarem Logo in einstellbarer Höhe und automatischem Dunkelmodus mit Umschalter. Ohne Fremdbibliotheken, ohne CDN, ohne externe Schriften.
Version: 1.2.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: filder-ahnen
Tags: one-column, custom-logo, custom-menu, dark-mode, accessibility-ready, translation-ready

Aufbau dieser Datei
-------------------
 1. Farben und Maße (Token)
 2. Dunkelmodus – auch für das Plugin
 3. Grundlagen und Barrierefreiheit
 4. Typografie
 5. Aufbau der Seite
 6. Kopfbereich
 7. Navigation
 8. Fußbereich
 9. Inhalte
10. Formulare und Schaltflächen
11. Zusammenspiel mit dem Ahnenbaum-Plugin
12. Auftritt beim Blättern
13. Druckansicht
*/

/* ==========================================================================
   1. Farben und Maße
   --------------------------------------------------------------------------
   Die Farben stammen aus dem Plugin (public/css/ahnenbaum.css) und sind hier
   um warme Papiertöne ergänzt: der Bildschirm soll an ein Archivblatt
   erinnern, nicht an ein Formular.
   ========================================================================== */

:root {
	/* Leitfarben – identisch mit dem Ahnenbaum */
	--fa-blue: #1d5fb5;
	--fa-blue-deep: #16478a;
	--fa-blue-soft: #e7f0fb;
	--fa-green: #157a4a;
	--fa-gold: #8a6508;
	--fa-gold-bright: #d9a406;
	--fa-gold-soft: #fdf4dc;
	--fa-red: #a52222;

	/* Papier und Tinte */
	--fa-ink: #1a1c1f;
	--fa-ink-muted: #55595f;
	--fa-ink-faint: #7c8189;
	--fa-paper: #fbfaf7;
	--fa-surface: #ffffff;
	--fa-sunken: #f3f2ed;
	--fa-line: #e3e1d9;
	--fa-line-strong: #cfccc1;

	/* Maße */
	--fa-content: 44rem;      /* Lesebreite für Fließtext */
	--fa-wide: 80rem;         /* Breite für Baum, Listen, Kopf und Fuß */
	--fa-gutter: clamp(1rem, 4vw, 2.5rem);
	--fa-radius: 10px;        /* wie --ab-radius */
	--fa-radius-s: 6px;
	--fa-header-h: 4.5rem;

	/*
	 * Höhe des Logos. Der Wert kommt normalerweise aus dem Customizer
	 * (Website-Informationen → Höhe des Logos) und wird von PHP im Kopf der
	 * Seite gesetzt. Was hier steht, ist nur der Rückfall, falls das Theme
	 * ohne functions.php benutzt wird.
	 */
	--fa-logo-height: 44px;

	/* Schrift: bewusst Systemschriften – nichts wird nachgeladen. */
	--fa-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--fa-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* Fließende Schriftgrößen, gleiche Bauart wie im Plugin */
	--fa-text-xs: clamp(0.75rem, 0.72rem + 0.12vw, 0.8125rem);
	--fa-text-s: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
	--fa-text-m: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
	--fa-text-l: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
	--fa-text-xl: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
	--fa-text-xxl: clamp(1.875rem, 1.4rem + 2.2vw, 3.25rem);

	--fa-shadow: 0 1px 2px rgb(26 28 31 / 4%), 0 8px 24px -12px rgb(26 28 31 / 14%);
	--fa-shadow-lift: 0 2px 4px rgb(26 28 31 / 6%), 0 16px 40px -20px rgb(26 28 31 / 22%);

	color-scheme: light;
}

/* ==========================================================================
   2. Dunkelmodus – auch für das Plugin
   --------------------------------------------------------------------------
   Zwei Wege führen in den Dunkelmodus:
     a) die Systemeinstellung (prefers-color-scheme) – so macht es das Plugin
     b) der Umschalter im Kopfbereich, der html[data-theme] setzt

   Damit beides zusammenpasst, setzt das Theme auch die Variablen des Plugins
   (--ab-*) neu. Das ist kein Übergriff, sondern Notwendigkeit: die dunklen
   Werte des Plugins stecken in einer Media-Query, die bei erzwungenem Hell
   trotzdem gelten würde. Die Auswahl über das Attribut ist spezifischer als
   das :root des Plugins und gewinnt deshalb unabhängig von der Ladereihenfolge.
   ========================================================================== */

/* Gemeinsame Dunkelwerte, damit sie nur einmal geschrieben werden müssen. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--fa-ink: #f2f3f5;
		--fa-ink-muted: #b7bcc3;
		--fa-ink-faint: #8b9198;
		--fa-paper: #14171b;
		--fa-surface: #1c2026;
		--fa-sunken: #101317;
		--fa-line: #333940;
		--fa-line-strong: #454c55;
		--fa-blue: #7fb2f0;
		--fa-blue-deep: #a7cbf6;
		--fa-blue-soft: #14293f;
		--fa-green: #5cc48d;
		--fa-gold: #e6b83c;
		--fa-gold-bright: #f0c95e;
		--fa-gold-soft: #33280d;
		--fa-red: #f08a8a;
		--fa-shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px -12px rgb(0 0 0 / 60%);
		--fa-shadow-lift: 0 2px 4px rgb(0 0 0 / 50%), 0 16px 40px -20px rgb(0 0 0 / 70%);

		color-scheme: dark;
	}
}

:root[data-theme="dark"] {
	--fa-ink: #f2f3f5;
	--fa-ink-muted: #b7bcc3;
	--fa-ink-faint: #8b9198;
	--fa-paper: #14171b;
	--fa-surface: #1c2026;
	--fa-sunken: #101317;
	--fa-line: #333940;
	--fa-line-strong: #454c55;
	--fa-blue: #7fb2f0;
	--fa-blue-deep: #a7cbf6;
	--fa-blue-soft: #14293f;
	--fa-green: #5cc48d;
	--fa-gold: #e6b83c;
	--fa-gold-bright: #f0c95e;
	--fa-gold-soft: #33280d;
	--fa-red: #f08a8a;
	--fa-shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px -12px rgb(0 0 0 / 60%);
	--fa-shadow-lift: 0 2px 4px rgb(0 0 0 / 50%), 0 16px 40px -20px rgb(0 0 0 / 70%);

	color-scheme: dark;
}

/* Das Plugin an den Umschalter hängen – erzwungenes Dunkel. */
:root[data-theme="dark"] {
	--ab-ink: #f2f3f5;
	--ab-ink-muted: #b7bcc3;
	--ab-line: #3a3f46;
	--ab-surface: #1c2026;
	--ab-surface-sunken: #14171b;
	--ab-blue: #7fb2f0;
	--ab-blue-soft: #14293f;
	--ab-green: #5cc48d;
	--ab-green-soft: #142c21;
	--ab-gold: #e6b83c;
	--ab-gold-soft: #33280d;
	--ab-red: #f08a8a;
	--ab-red-soft: #34181a;
}

/* … und erzwungenes Hell, gegen die Media-Query des Plugins. */
:root[data-theme="light"] {
	--ab-ink: #1a1c1f;
	--ab-ink-muted: #55595f;
	--ab-line: #d7dade;
	--ab-surface: #ffffff;
	--ab-surface-sunken: #f5f6f8;
	--ab-blue: #1d5fb5;
	--ab-blue-soft: #e7f0fb;
	--ab-green: #157a4a;
	--ab-green-soft: #e4f4ec;
	--ab-gold: #8a6508;
	--ab-gold-soft: #fdf4dc;
	--ab-red: #a52222;
	--ab-red-soft: #fbeaea;
}

/* ==========================================================================
   3. Grundlagen und Barrierefreiheit
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-block-start: calc(max(var(--fa-header-h), calc(var(--fa-logo-height) + 1.5rem)) + 1rem);
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	background: var(--fa-paper);
	color: var(--fa-ink);
	font-family: var(--fa-font);
	font-size: var(--fa-text-m);
	line-height: 1.65;
	font-feature-settings: "kern" 1, "liga" 1, "onum" 1;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg,
iframe {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Sichtbarer Fokus – nie wegnehmen, nur schöner machen. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--fa-blue);
	outline-offset: 2px;
	border-radius: 3px;
}

/* Nur für Screenreader, aber beim Anspringen sichtbar. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	inset-block-start: 0.5rem;
	inset-inline-start: 0.5rem;
	z-index: 999;
	padding: 0.6rem 1rem;
	background: var(--fa-surface);
	color: var(--fa-ink);
	border: 1px solid var(--fa-line-strong);
	border-radius: var(--fa-radius-s);
	box-shadow: var(--fa-shadow-lift);
	font-size: var(--fa-text-s);
	text-decoration: none;
	transform: translateY(-200%);
	transition: transform 0.15s ease;
}

.skip-link:focus { transform: translateY(0); }

/* ==========================================================================
   4. Typografie
   --------------------------------------------------------------------------
   Die Eleganz kommt hier aus Maß und Laufweite, nicht aus einer Zierschrift:
   enge Laufweite bei großen Graden, weite bei kleinen Versalien.
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	margin-block: 0 0.5em;
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -0.022em;
	text-wrap: balance;
}

h1 { font-size: var(--fa-text-xxl); letter-spacing: -0.024em; }
h2 { font-size: var(--fa-text-xl); }
h3 { font-size: var(--fa-text-l); letter-spacing: -0.012em; }
h4, h5, h6 { font-size: var(--fa-text-m); letter-spacing: 0; }

p, ul, ol, dl, blockquote, figure, table, pre { margin-block: 0 1.15em; }

a {
	color: var(--fa-blue);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color 0.15s ease;
}

a:hover { color: var(--fa-blue-deep); }

/*
 * Im Fliesstext bekommt der Unterstrich beim Überfahren Gewicht statt Farbe.
 * Das liest sich lebendiger als ein Farbwechsel und bleibt trotzdem ruhig.
 */
.entry-content a:not(.fa-button) {
	text-decoration-color: color-mix(in srgb, var(--fa-blue) 40%, transparent);
	transition: color 0.15s ease, text-decoration-color 0.15s ease,
		text-decoration-thickness 0.15s ease;
}

.entry-content a:not(.fa-button):hover {
	text-decoration-color: currentColor;
	text-decoration-thickness: 2px;
}

strong, b { font-weight: 650; }

small { font-size: var(--fa-text-s); }

blockquote {
	padding-inline-start: 1.25rem;
	border-inline-start: 3px solid var(--fa-gold-bright);
	color: var(--fa-ink-muted);
	font-style: italic;
}

code, kbd, pre { font-family: var(--fa-font-mono); font-size: 0.9em; }

pre {
	padding: 1rem;
	overflow-x: auto;
	background: var(--fa-sunken);
	border: 1px solid var(--fa-line);
	border-radius: var(--fa-radius-s);
}

hr {
	height: 1px;
	margin-block: 2.5rem;
	border: 0;
	background: linear-gradient(90deg, transparent, var(--fa-line-strong) 20%, var(--fa-line-strong) 80%, transparent);
}

table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fa-text-s);
}

th, td {
	padding: 0.55rem 0.7rem;
	text-align: start;
	border-block-end: 1px solid var(--fa-line);
}

th { font-weight: 600; color: var(--fa-ink-muted); }

/* Kleine Versalienzeile über Überschriften („Augenbraue") – als Schildchen,
   damit der Titelbereich einen farbigen Anker bekommt. */
.fa-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin-block-end: 0.85rem;
	padding: 0.3rem 0.75rem;
	color: var(--fa-gold);
	background: var(--fa-gold-soft);
	border-radius: 999px;
	font-size: var(--fa-text-xs);
	font-weight: 650;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Punkt vor dem Text – kostet nichts und macht das Schildchen lebendig. */
.fa-eyebrow::before {
	content: "";
	width: 0.4rem;
	height: 0.4rem;
	background: var(--fa-gold-bright);
	border-radius: 50%;
}

/* ==========================================================================
   5. Aufbau der Seite
   ========================================================================== */

.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100svh;
}

.site-content { flex: 1 0 auto; }

.fa-wrap {
	width: 100%;
	max-width: var(--fa-wide);
	margin-inline: auto;
	padding-inline: var(--fa-gutter);
}

.fa-wrap--text { max-width: calc(var(--fa-content) + 2 * var(--fa-gutter)); }

/* ==========================================================================
   6. Kopfbereich
   --------------------------------------------------------------------------
   Bleibt beim Blättern oben stehen, wird dabei aber leiser: die Goldlinie
   bleibt, der Hintergrund bekommt einen leichten Schleier.
   ========================================================================== */

.site-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 100;
	background: color-mix(in srgb, var(--fa-paper) 88%, transparent);
	border-block-end: 1px solid var(--fa-line);
	backdrop-filter: saturate(1.6) blur(10px);
	-webkit-backdrop-filter: saturate(1.6) blur(10px);
	transition: box-shadow 0.2s ease, background-color 0.2s ease;
}

/* Farbkante ganz oben: das Erkennungszeichen der Seite. Vier Farben aus dem
   Ahnenbaum, breit genug um wahrgenommen zu werden, schmal genug um nicht zu
   dominieren. */
.site-header::before {
	content: "";
	display: block;
	height: 4px;
	background: linear-gradient(90deg,
		var(--fa-gold-bright) 0%,
		var(--fa-gold) 22%,
		var(--fa-blue) 52%,
		var(--fa-green) 78%,
		var(--fa-gold-bright) 100%);
	background-size: 200% 100%;
}

.site-header.is-stuck { box-shadow: var(--fa-shadow); }

.site-header__inner {
	display: flex;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	/*
	 * Der Kopf ist so hoch wie sein Grundmaß – oder wie das Logo plus Luft,
	 * wenn jemand es größer eingestellt hat. Ohne diese Zeile würde ein hohes
	 * Logo den Kopfbereich sprengen.
	 */
	min-height: max(var(--fa-header-h), calc(var(--fa-logo-height) + 1.5rem));
}

/* --- Logo / Wortmarke --- */

.site-branding {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
}

.site-branding a { text-decoration: none; color: inherit; }

.custom-logo-link {
	display: inline-flex;
	align-items: center;
}

/*
 * Feste Höhe, Breite nach Seitenverhältnis. Und zwar height statt max-height,
 * aus einem handfesten Grund: Das Bild ist hier ein Flex-Element, und ein
 * Flex-Element mit `height: auto` (aus der Bild-Grundregel weiter oben) bekommt
 * in einem Container ohne feste Höhe die Höhe 0 — das Logo verschwindet
 * kommentarlos. Eine bestimmte Höhe schneidet diesen Kreis durch.
 */
.custom-logo {
	height: var(--fa-logo-height);
	width: auto;
	max-width: min(100%, 22rem);
	object-fit: contain;
	object-position: left center;
}

/*
 * Auf sehr schmalen Geräten bekommt das Logo eine Obergrenze, sonst bliebe für
 * die Bedienknöpfe daneben kein Platz. Ein bewusst eingestellter kleinerer Wert
 * bleibt erhalten — min() nimmt immer den kleineren der beiden.
 */
@media (max-width: 30rem) {
	.custom-logo {
		height: min(var(--fa-logo-height), 3.25rem);
		max-width: min(100%, 12rem);
	}
}

/* In der Fußzeile etwas zurückhaltender: dort ist das Logo Beiwerk. */
.site-footer .custom-logo { height: calc(var(--fa-logo-height) * 0.85); }

.site-wordmark {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}

.site-title {
	margin: 0;
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.015em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.site-description {
	margin: 0;
	color: var(--fa-ink-faint);
	font-size: var(--fa-text-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* --- rechte Werkzeugleiste --- */

.site-header__tools {
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.fa-iconbutton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.375rem;
	height: 2.375rem;
	padding: 0;
	color: var(--fa-ink-muted);
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--fa-radius-s);
	cursor: pointer;
	transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.fa-iconbutton:hover {
	color: var(--fa-ink);
	background: var(--fa-sunken);
	border-color: var(--fa-line);
}

.fa-iconbutton svg { width: 1.125rem; height: 1.125rem; fill: currentColor; }

/* Der Umschalter zeigt immer das Ziel, nicht den Zustand. */
.fa-themetoggle .fa-icon--moon { display: block; }
.fa-themetoggle .fa-icon--sun { display: none; }

:root[data-theme="dark"] .fa-themetoggle .fa-icon--moon { display: none; }
:root[data-theme="dark"] .fa-themetoggle .fa-icon--sun { display: block; }

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .fa-themetoggle .fa-icon--moon { display: none; }
	:root:not([data-theme="light"]) .fa-themetoggle .fa-icon--sun { display: block; }
}

/* Solange kein JavaScript lief, hat der Umschalter keine Wirkung – dann weg. */
.no-js .fa-themetoggle { display: none; }

/* --- ausklappbare Suche --- */

.fa-headersearch {
	display: none;
	padding-block: 0.85rem 1.1rem;
	border-block-start: 1px solid var(--fa-line);
}

.fa-headersearch.is-open { display: block; }

/* ==========================================================================
   7. Navigation
   ========================================================================== */

.site-nav { display: none; }

.site-nav ul {
	display: flex;
	gap: 0.35rem;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav li { position: relative; }

.site-nav a {
	position: relative;
	z-index: 1;
	display: block;
	padding: 0.45rem 0.85rem;
	color: var(--fa-ink-muted);
	font-size: var(--fa-text-s);
	font-weight: 550;
	letter-spacing: 0.01em;
	text-decoration: none;
	border-radius: 999px;
	transition: color 0.18s ease;
}

/* Die Pille wächst aus der Mitte – deshalb ein eigenes Element hinter dem
   Text und nicht einfach ein Hintergrund: nur so lässt sie sich bewegen. */
.site-nav a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--fa-sunken);
	border-radius: 999px;
	transform: scale(0.82);
	opacity: 0;
	transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.3, 1), opacity 0.2s ease;
}

.site-nav a:hover,
.site-nav a:focus-visible { color: var(--fa-ink); }

.site-nav a:hover::before,
.site-nav a:focus-visible::before {
	transform: scale(1);
	opacity: 1;
}

/* Die aktive Seite trägt die Pille dauerhaft, im Blau des Ahnenbaums. */
.site-nav .current-menu-item > a,
.site-nav .current_page_item > a,
.site-nav .current-menu-ancestor > a {
	color: var(--fa-blue-deep);
	font-weight: 650;
}

.site-nav .current-menu-item > a::before,
.site-nav .current_page_item > a::before,
.site-nav .current-menu-ancestor > a::before {
	background: var(--fa-blue-soft);
	transform: scale(1);
	opacity: 1;
}

/* Untermenüs */
.site-nav .sub-menu {
	position: absolute;
	inset-block-start: 100%;
	inset-inline-start: 0;
	z-index: 10;
	display: block;
	min-width: 12rem;
	padding: 0.35rem;
	background: var(--fa-surface);
	border: 1px solid var(--fa-line);
	border-radius: var(--fa-radius);
	box-shadow: var(--fa-shadow-lift);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-0.35rem);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.site-nav li:hover > .sub-menu,
.site-nav li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.site-nav .sub-menu li { display: block; }
.site-nav .sub-menu a { padding: 0.45rem 0.6rem; }
.site-nav .sub-menu a::after { display: none; }
.site-nav .sub-menu a:hover { background: var(--fa-sunken); }

/* --- Klappmenü für schmale Fenster --- */

.fa-menutoggle { display: inline-flex; }

.fa-menutoggle .fa-icon--close { display: none; }
.fa-menutoggle[aria-expanded="true"] .fa-icon--menu { display: none; }
.fa-menutoggle[aria-expanded="true"] .fa-icon--close { display: block; }

.site-nav--mobile {
	display: none;
	padding-block: 0.5rem 1.25rem;
	border-block-start: 1px solid var(--fa-line);
}

.site-nav--mobile.is-open { display: block; }

.site-nav--mobile ul {
	flex-direction: column;
	gap: 0;
	align-items: stretch;
}

.site-nav--mobile a {
	padding: 0.7rem 0.25rem;
	font-size: var(--fa-text-m);
	border-block-end: 1px solid var(--fa-line);
	border-radius: 0;
}

.site-nav--mobile a::after { display: none; }
.site-nav--mobile .sub-menu {
	position: static;
	padding: 0 0 0 1rem;
	background: none;
	border: 0;
	box-shadow: none;
	opacity: 1;
	visibility: visible;
	transform: none;
}

@media (min-width: 56rem) {
	.site-nav { display: block; }
	.fa-menutoggle { display: none; }
	.site-nav--mobile { display: none !important; }
}

/* ==========================================================================
   8. Fußbereich
   ========================================================================== */

.site-footer {
	margin-block-start: 4rem;
	background: var(--fa-sunken);
	border-block-start: 1px solid var(--fa-line);
}

.site-footer::before {
	content: "";
	display: block;
	height: 4px;
	background: linear-gradient(90deg,
		var(--fa-green) 0%,
		var(--fa-blue) 38%,
		var(--fa-gold) 72%,
		var(--fa-gold-bright) 100%);
}

.site-footer__columns {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	grid-template-columns: 1fr;
	padding-block: clamp(2.25rem, 5vw, 3.5rem);
}

@media (min-width: 44rem) {
	.site-footer__columns { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64rem) {
	.site-footer__columns { grid-template-columns: 1.4fr 1fr 1fr; }
}

.site-footer__brand .site-title { white-space: normal; }

.site-footer__blurb {
	max-width: 34ch;
	margin-block-start: 0.75rem;
	color: var(--fa-ink-muted);
	font-size: var(--fa-text-s);
}

.fa-footer-figures {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin-block-start: 1.25rem;
	padding: 0;
	list-style: none;
}

.fa-footer-figures div {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.fa-footer-figures dt {
	order: 2;
	color: var(--fa-ink-faint);
	font-size: var(--fa-text-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/*
 * Die Zahlen sind der einzige Ort, an dem die Fußzeile laut werden darf.
 * Einfarbig im Wechsel statt Farbverlauf: ein Verlauf von Blau nach Gold läuft
 * mitten durch einen trüben Olivton, und genau der landet bei fünfstelligen
 * Zahlen in der Mitte.
 */
.fa-footer-figures dd {
	order: 1;
	margin: 0;
	color: var(--fa-blue);
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.03em;
	line-height: 1.1;
}

.fa-footer-figures div:nth-child(2) dd { color: var(--fa-gold); }
.fa-footer-figures div:nth-child(3) dd { color: var(--fa-green); }

.site-footer .widget { margin-block-end: 1.5rem; }

.site-footer .widget-title,
.site-footer__heading {
	margin-block-end: 0.85rem;
	color: var(--fa-ink-faint);
	font-size: var(--fa-text-xs);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.site-footer ul:not(.fa-footer-figures) {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer li + li { margin-block-start: 0.45rem; }

.site-footer a {
	color: var(--fa-ink-muted);
	font-size: var(--fa-text-s);
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--fa-blue);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.site-footer__bar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	align-items: center;
	justify-content: space-between;
	padding-block: 1.1rem;
	border-block-start: 1px solid var(--fa-line);
	color: var(--fa-ink-faint);
	font-size: var(--fa-text-xs);
}

.site-footer__bar p { margin: 0; }

.fa-totop {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--fa-ink-muted);
	font-size: var(--fa-text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}

.fa-totop svg { width: 0.85rem; height: 0.85rem; fill: currentColor; }
.fa-totop:hover { color: var(--fa-blue); }

/* ==========================================================================
   9. Inhalte
   ========================================================================== */

.fa-pagehead {
	position: relative;
	overflow: hidden;
	padding-block: clamp(2.25rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.25rem);
	border-block-end: 1px solid var(--fa-line);
}

/*
 * Zwei sehr weiche Farbfelder hinter dem Titel – Gold von links, Blau von
 * rechts. Bewusst mit niedriger Deckung: Der Name soll die Hauptsache bleiben,
 * die Farbe nur die Bühne bauen.
 */
.fa-pagehead::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		radial-gradient(60rem 22rem at 8% -30%, color-mix(in srgb, var(--fa-gold-bright) 16%, transparent), transparent 60%),
		radial-gradient(48rem 20rem at 92% -20%, color-mix(in srgb, var(--fa-blue) 13%, transparent), transparent 62%);
	pointer-events: none;
}

.fa-pagehead > * {
	position: relative;
	z-index: 1;
}

.fa-pagehead__title {
	margin-block-end: 0.35rem;
	/* Etwas ruhiger als eine freie h1 – der Name soll wirken, nicht schreien. */
	font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);
}

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

/* Zierlinie unter dem Titel: kurz, gold, unaufdringlich. */
.fa-pagehead__rule {
	width: 5rem;
	height: 4px;
	/* hr bringt von Haus aus margin-inline: auto mit – das rückt die Linie mittig. */
	margin: 1.15rem 0 0;
	margin-inline-start: 0;
	background: linear-gradient(90deg, var(--fa-gold-bright), var(--fa-blue));
	border: 0;
	border-radius: 4px;
}

.site-main { padding-block: clamp(1.75rem, 4vw, 3rem); }

.entry-content > * { margin-inline: auto; }

.entry-content > *:not(.alignwide):not(.alignfull):not(.ahnenbaum) {
	max-width: var(--fa-content);
}

.entry-content .alignwide { max-width: var(--fa-wide); }

.entry-content .alignfull {
	max-width: none;
	margin-inline: calc(50% - 50vw);
	width: 100vw;
}

.entry-content img { border-radius: var(--fa-radius-s); }

.entry-content figcaption {
	margin-block-start: 0.5rem;
	color: var(--fa-ink-faint);
	font-size: var(--fa-text-xs);
	text-align: center;
}

/* --- Beitragslisten --- */

.fa-cardgrid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
	padding: 0;
	margin: 0;
	list-style: none;
}

.fa-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1.4rem;
	overflow: hidden;
	background: var(--fa-surface);
	border: 1px solid var(--fa-line);
	border-radius: var(--fa-radius);
	transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.3, 1),
		box-shadow 0.22s ease, border-color 0.22s ease;
}

/*
 * Farbige Oberkante, die beim Überfahren aufleuchtet. Die Farbe wechselt je
 * Karte durch (Blau, Gold, Grün) – das bringt Rhythmus in eine Liste, ohne
 * dass die Farben etwas bedeuten müssten, was sie nicht bedeuten.
 */
.fa-card::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 3px;
	background: var(--fa-card-accent, var(--fa-blue));
	/*
	 * Im Ruhezustand ein kurzer Farbstrich, beim Überfahren die volle Breite.
	 * Wichtig ist der Ruhezustand: Die Karten sollen ihren Farbrhythmus auch
	 * dann zeigen, wenn niemand mit der Maus darüberfährt — auf dem Handy gibt
	 * es kein Überfahren.
	 */
	transform: scaleX(0.14);
	transform-origin: left center;
	transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.fa-cardgrid > li:nth-child(3n + 2) .fa-card { --fa-card-accent: var(--fa-gold-bright); }
.fa-cardgrid > li:nth-child(3n + 3) .fa-card { --fa-card-accent: var(--fa-green); }

.fa-card:hover,
.fa-card:focus-within {
	border-color: color-mix(in srgb, var(--fa-card-accent, var(--fa-blue)) 45%, var(--fa-line));
	box-shadow: var(--fa-shadow-lift);
	transform: translateY(-4px);
}

.fa-card:hover::before,
.fa-card:focus-within::before { transform: scaleX(1); }

.fa-card__title {
	margin-block-end: 0.35rem;
	font-size: var(--fa-text-l);
}

.fa-card__title a { color: inherit; text-decoration: none; }
.fa-card__title a:hover { color: var(--fa-blue); }

.fa-card__meta {
	margin-block-end: 0.75rem;
	color: var(--fa-ink-faint);
	font-size: var(--fa-text-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

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

/* --- Blätterwerk --- */

.fa-pagination {
	display: flex;
	gap: 0.35rem;
	flex-wrap: wrap;
	justify-content: center;
	margin-block-start: 2.5rem;
}

.fa-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.35rem;
	height: 2.35rem;
	padding-inline: 0.6rem;
	color: var(--fa-ink-muted);
	font-size: var(--fa-text-s);
	text-decoration: none;
	background: var(--fa-surface);
	border: 1px solid var(--fa-line);
	border-radius: var(--fa-radius-s);
}

.fa-pagination .page-numbers:hover { border-color: var(--fa-line-strong); color: var(--fa-ink); }

.fa-pagination .page-numbers.current {
	color: var(--fa-surface);
	background: var(--fa-blue);
	border-color: var(--fa-blue);
	font-weight: 600;
}

/* --- 404 und leere Ergebnisse --- */

.fa-empty {
	max-width: var(--fa-content);
	margin-inline: auto;
	padding-block: clamp(2rem, 8vh, 5rem);
	text-align: center;
}

.fa-empty__code {
	margin: 0 0 0.5rem;
	color: var(--fa-gold-bright);
	font-size: clamp(3rem, 12vw, 6rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.04em;
}

/* ==========================================================================
   10. Formulare und Schaltflächen
   ========================================================================== */

input[type="text"],
input[type="search"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="date"],
select,
textarea {
	width: 100%;
	padding: 0.55rem 0.75rem;
	color: var(--fa-ink);
	font: inherit;
	font-size: var(--fa-text-s);
	background: var(--fa-surface);
	border: 1px solid var(--fa-line-strong);
	border-radius: var(--fa-radius-s);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--fa-blue);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--fa-blue) 18%, transparent);
	outline: none;
}

button,
input[type="submit"],
.fa-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.6rem 1.25rem;
	color: #fff;
	font: inherit;
	font-size: var(--fa-text-s);
	font-weight: 650;
	letter-spacing: 0.015em;
	text-decoration: none;
	background: linear-gradient(135deg, var(--fa-blue), var(--fa-blue-deep));
	border: 1px solid transparent;
	border-radius: 999px;
	cursor: pointer;
	box-shadow: 0 1px 2px rgb(29 95 181 / 22%);
	transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.3, 1),
		box-shadow 0.16s ease, filter 0.16s ease;
}

button:hover,
input[type="submit"]:hover,
.fa-button:hover {
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 4px 14px -4px rgb(29 95 181 / 45%);
	filter: saturate(1.1);
}

button:active,
input[type="submit"]:active,
.fa-button:active { transform: translateY(0); }

/* Im Dunkelmodus ist das Blau hell – dann muss die Schrift dunkel werden. */
:root[data-theme="dark"] button,
:root[data-theme="dark"] input[type="submit"],
:root[data-theme="dark"] .fa-button { color: #10141a; }

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) button,
	:root:not([data-theme="light"]) input[type="submit"],
	:root:not([data-theme="light"]) .fa-button { color: #10141a; }
}

.fa-button--quiet,
:root[data-theme="dark"] .fa-button--quiet {
	color: var(--fa-ink);
	background: transparent;
	border-color: var(--fa-line-strong);
	box-shadow: none;
}

.fa-button--quiet:hover,
:root[data-theme="dark"] .fa-button--quiet:hover {
	color: var(--fa-ink);
	background: var(--fa-sunken);
	border-color: var(--fa-line-strong);
	box-shadow: none;
	filter: none;
}

/* Die Icon-Schaltflächen im Kopf sind keine Knöpfe im obigen Sinn: kein
   Farbverlauf, kein Schatten, keine Verschiebung. */
.fa-iconbutton,
.fa-iconbutton:hover,
:root[data-theme="dark"] .fa-iconbutton {
	background: transparent;
	color: var(--fa-ink-muted);
	font-weight: 400;
	box-shadow: none;
	transform: none;
	filter: none;
	border-radius: 999px;
}

.fa-iconbutton:hover,
:root[data-theme="dark"] .fa-iconbutton:hover {
	background: var(--fa-sunken);
	color: var(--fa-ink);
}

.search-form {
	display: flex;
	gap: 0.5rem;
	align-items: stretch;
}

.search-form label { flex: 1 1 auto; margin: 0; }

/* ==========================================================================
   11. Zusammenspiel mit dem Ahnenbaum-Plugin
   --------------------------------------------------------------------------
   Das Plugin bringt seine eigene Gestaltung mit. Das Theme mischt sich nur
   dort ein, wo der Rahmen gebraucht wird: Breite, Abstand, Kopfzeile der
   Personenseite.
   ========================================================================== */

/* Der Baum braucht Platz – volle Rahmenbreite statt Lesebreite. */
.entry-content .ahnenbaum,
.ab-single .ahnenbaum {
	max-width: var(--fa-wide);
	margin-inline: auto;
}

.ahnenbaum--wide { max-width: none !important; }

/* Kopf der Personenseite (aus templates/single-person.php des Plugins). */
.ab-single { padding-block: clamp(1.75rem, 4vw, 3rem); }

.ab-single__article {
	width: 100%;
	max-width: var(--fa-wide);
	margin-inline: auto;
	padding-inline: var(--fa-gutter);
}

.ab-single__header {
	padding-block-end: clamp(1rem, 2.5vw, 1.5rem);
	margin-block-end: clamp(1.25rem, 3vw, 2rem);
	border-block-end: 1px solid var(--fa-line);
}

.ab-single__title {
	margin-block-end: 0.3rem;
	font-size: var(--fa-text-xl);
}

.ab-single__span {
	margin: 0;
	color: var(--fa-gold);
	font-size: var(--fa-text-s);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.08em;
}

/* ==========================================================================
   12. Auftritt beim Blättern
   --------------------------------------------------------------------------
   Karten und Titelbereiche blenden sich beim Erscheinen sanft ein. Bewusst
   knapp gehalten: 0,4 Sekunden, zwölf Pixel Weg. Wer im Betriebssystem
   „weniger Bewegung" eingestellt hat, sieht alles sofort und unbewegt — das
   regelt der Block ganz oben in Abschnitt 3.

   Ohne JavaScript bleibt ebenfalls alles sichtbar: die Startwerte greifen erst,
   wenn das Skript die Klasse „js" gesetzt hat.
   ========================================================================== */

.js .fa-reveal {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.js .fa-reveal.is-in {
	opacity: 1;
	transform: none;
}

/* Bei mehreren Karten leicht versetzt – wirkt lebendiger als alles auf einmal. */
.js .fa-cardgrid > li:nth-child(2) .fa-reveal { transition-delay: 0.06s; }
.js .fa-cardgrid > li:nth-child(3) .fa-reveal { transition-delay: 0.12s; }
.js .fa-cardgrid > li:nth-child(4) .fa-reveal { transition-delay: 0.18s; }
.js .fa-cardgrid > li:nth-child(n + 5) .fa-reveal { transition-delay: 0.22s; }

@media (prefers-reduced-motion: reduce) {
	.js .fa-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ==========================================================================
   13. Druckansicht
   --------------------------------------------------------------------------
   Ahnenforschung wird ausgedruckt. Rahmen weg, Tinte sparen, Verweise zeigen.
   ========================================================================== */

@media print {
	.site-header,
	.site-footer,
	.skip-link,
	.fa-pagination,
	.fa-headersearch,
	.fa-totop { display: none !important; }

	body { background: #fff; color: #000; font-size: 11pt; }

	.site-main,
	.ab-single { padding-block: 0; }

	a { color: #000; text-decoration: underline; }

	.entry-content a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 9pt;
		word-break: break-all;
	}

	.fa-card { border: 1px solid #999; box-shadow: none; }
}