/**
 * Traueranzeigen – Layout
 *
 * Schlichte, traditionelle Darstellung: rechteckige Porträtfotos, dezente
 * Rahmen, Font-Awesome-Icons für die Daten, Akzentfarbe in Tiefblau.
 * Alle Klassen sind mit „ta-" gekapselt, um Konflikte mit dem Theme zu
 * vermeiden. Die Schrift wird vom Theme übernommen.
 */

:root {
	--ta-accent: #051b8a;
	--ta-accent-dark: #03136a;
	--ta-frame: #000;
	--ta-ink: #000;
	--ta-ink-soft: #3a3a3a;
	--ta-muted: #6a6a6a;
	--ta-border: #cfcfcf;
	--ta-bg-soft: #fff;
	--ta-radius: 6px;
}

/* ---------- Übersicht ---------- */

.ta-archive-wrap {
	max-width: 900px;
	margin: 0 auto;
	padding: 0 1rem;
}

.ta-archive-head {
	text-align: center;
	margin: 0 0 2.5rem;
}

.ta-archive-title {
	color: var(--ta-ink);
	font-weight: 700;
	margin: 0 0 0.4rem;
	line-height: 1.2;
}

.ta-archive-sub {
	color: var(--ta-muted);
	font-style: italic;
	margin: 0;
}

.ta-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	align-items: stretch;
}

@media (min-width: 600px) {
	.ta-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.ta-card {
	background: #fff;
	border: 1px solid var(--ta-frame);
	height: 100%;
}

.ta-card-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	height: 100%;
	padding: 2rem 1.5rem;
	text-decoration: none;
	color: inherit;
	box-sizing: border-box;
}

.ta-cross {
	color: var(--ta-ink);
	margin: 0 0 0.8rem;
	flex: none;
}

.ta-photo {
	width: 160px;
	height: 200px;
	object-fit: cover;
	object-position: center top;
	border: 1px solid var(--ta-frame);
	background: var(--ta-bg-soft);
	margin: 0 0 1rem;
	flex: none;
}

.ta-name {
	color: var(--ta-ink);
	font-weight: 600;
	font-size: 1.25rem;
	line-height: 1.25;
	margin: 0 0 0.65rem;
}

.ta-dates {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.35rem 1.25rem;
	color: var(--ta-ink-soft);
	font-size: 0.95rem;
	margin: 0 0 0.85rem;
}

.ta-date {
	display: inline-flex;
	align-items: baseline;
}

.ta-date .ta-sym {
	color: var(--ta-accent);
	margin-right: 0.4em;
	font-size: 1.05em;
	line-height: 1;
}

.ta-trauer {
	color: var(--ta-muted);
	font-style: italic;
	margin: 0 0 1.25rem;
	line-height: 1.5;
}

.ta-btn {
	display: inline-block;
	margin-top: auto;
	padding: 0.4em 1.1em;
	background: transparent;
	color: var(--ta-accent);
	border: 1px solid var(--ta-accent);
	border-radius: 0;
	font-size: 0.82rem;
	letter-spacing: 0.03em;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.ta-card:hover .ta-btn,
.ta-btn:hover {
	background: var(--ta-accent);
	border-color: var(--ta-accent);
	color: #fff;
}

.ta-empty {
	text-align: center;
	color: var(--ta-muted);
	font-style: italic;
	padding: 3rem 0;
}

/* ---------- Einzelansicht ---------- */

.ta-single {
	max-width: 600px;
	margin: 0 auto;
	text-align: center;
	background: #fff;
	border: 2px solid var(--ta-frame);
	padding: 2.5rem 2rem;
}

.ta-single-eyebrow {
	color: var(--ta-accent);
	font-weight: 700;
	letter-spacing: 0.04em;
	margin: 0 0 1.5rem;
}

.ta-cross-lg {
	display: block;
	margin: 0 auto 1.25rem;
	color: var(--ta-ink);
}

.ta-single-photo {
	display: block;
	width: 220px;
	height: 280px;
	object-fit: cover;
	object-position: center top;
	border: 1px solid var(--ta-frame);
	background: var(--ta-bg-soft);
	margin: 0 auto 1.5rem;
}

.ta-single-quote {
	font-style: italic;
	font-size: 1.1rem;
	line-height: 1.6;
	color: var(--ta-ink-soft);
	max-width: 40ch;
	margin: 0 auto 1.75rem;
	padding: 0;
	border: 0;
	quotes: none;
}

.ta-single-name {
	color: var(--ta-ink);
	font-weight: 700;
	font-size: 1.9rem;
	line-height: 1.2;
	margin: 0 0 1rem;
}

.ta-single-dates {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem 1.5rem;
	color: var(--ta-ink-soft);
	font-size: 1.05rem;
	margin: 0 0 1.5rem;
}

.ta-single-trauer {
	color: var(--ta-ink-soft);
	line-height: 1.6;
	margin: 0 0 1.25rem;
}

.ta-single-fuszeile {
	color: var(--ta-ink-soft);
	line-height: 1.6;
	margin: 0 0 1rem;
}

.ta-single-ort {
	color: var(--ta-ink);
	margin: 0 0 0.35rem;
}

.ta-single-unterzeichner {
	color: var(--ta-ink);
	font-weight: 600;
	margin: 0 0 0.5rem;
}

.ta-single-back {
	margin-top: 2.25rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--ta-border);
}

.ta-btn--ghost {
	margin-top: 0;
	background: transparent;
	color: var(--ta-accent);
	border: 1px solid var(--ta-accent);
	border-radius: 0;
}

.ta-btn--ghost:hover {
	background: var(--ta-accent);
	border-color: var(--ta-accent);
	color: #fff;
}

/* ---------- Frontend-Formular ---------- */

.ta-form-wrap {
	max-width: 680px;
	margin: 0 auto;
}

.ta-form-wrap .acf-fields {
	background: #fff;
	border: 1px solid var(--ta-border);
	border-radius: var(--ta-radius);
}

.ta-form-wrap .acf-form-submit {
	margin-top: 1.5rem;
	text-align: center;
}

.ta-form-wrap .acf-button {
	background: var(--ta-accent) !important;
	border-color: var(--ta-accent) !important;
	border-radius: var(--ta-radius) !important;
	padding: 0.6em 1.8em !important;
	letter-spacing: 0.02em;
}

.ta-form-wrap .acf-button:hover {
	background: var(--ta-accent-dark) !important;
	border-color: var(--ta-accent-dark) !important;
}

/* ---------- Responsiv ---------- */

@media (max-width: 600px) {
	.ta-single-name {
		font-size: 1.55rem;
	}

	.ta-single-photo {
		width: 180px;
		height: 230px;
	}
}

/* Screenreader-Hilfstext (falls vom Theme nicht definiert) */
.ta-archive-wrap .screen-reader-text,
.ta-single .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}