/*
 * Traydon – Komponenten des Klassen-Vokabulars (Bauvertrag): Raster, Karte, Schritte,
 * Datenblatt, Checkliste, Kennzahlen, Text/Bild, zu prüfen, Grenzen, FAQ, CTA sowie die Startseiten-
 * Module Faktenzeile, Zeitleiste, Bild-Kacheln, Shop-Flächen und Kontaktband. Formulare: bloecke-basis.css.
 * Token und Aliase (--tr-*) kommen aus theme.css.
 */

/* ---------- 9. Kartenraster ---------- */
/* auto-fit statt auto-fill des Core-Rasters: keine leeren Spalten bei wenigen Karten */
.tr-raster.tr-raster,
.tr-kennzahlen.tr-kennzahlen {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.tr-raster {
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

.tr-karte {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding-top: var(--wp--preset--spacing--30);
	border-top: 2px solid var(--tr-text);
}

.tr-karte > * {
	margin-block: 0 var(--wp--preset--spacing--20);
}

/* Karten sind Flex-Spalten: die automatischen Seitenränder des Core-Layouts würden Inhalte sonst zentrieren */
.tr-karte.tr-karte > * {
	margin-inline-start: 0 !important;
	margin-inline-end: 0 !important;
}

.tr-karte > :last-child {
	margin-block-end: 0;
}

.tr-karte h3 {
	font-size: var(--wp--preset--font-size--mittel);
	font-weight: 700;
	letter-spacing: -0.015em;
	margin-block-end: var(--wp--preset--spacing--20);
}

.tr-karte h3 a {
	color: inherit;
	text-decoration: none;
}

/* Ganze Karte klickbar, Fokus bleibt sichtbar am Link */
.tr-karte h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.tr-karte:hover {
	border-top-color: var(--tr-rot);
}

.tr-karte:hover h3 a {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

.tr-karte p {
	color: var(--tr-leise);
}

.tr-karte figure,
.tr-karte .wp-block-image {
	order: -1;
	margin: 0 0 var(--wp--preset--spacing--30);
}

.tr-karte img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: var(--tr-alt);
}

.tr-section--dunkel .tr-karte {
	border-top-color: var(--tr-weiss);
}

.tr-section--dunkel .tr-karte p {
	color: #B9B3AE;
}

/* ---------- 10. Prozess-Schritte ---------- */
.tr-schritte {
	counter-reset: tr-schritt;
	list-style: none;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: var(--wp--preset--spacing--50);
}

.tr-schritte > li {
	counter-increment: tr-schritt;
	position: relative;
	margin: 0;
	padding-top: var(--wp--preset--spacing--40);
	border-top: 2px solid var(--tr-text);
	color: var(--tr-leise);
}

.tr-schritte > li::before {
	content: counter(tr-schritt);
	display: block;
	margin-bottom: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--riesig);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums;
	color: var(--tr-rot);
}

.tr-schritte > li strong {
	display: block;
	margin-bottom: 0.25rem;
	font-size: var(--wp--preset--font-size--mittel);
	color: var(--tr-text);
}

.tr-section--dunkel .tr-schritte > li {
	border-top-color: var(--tr-weiss);
	color: #B9B3AE;
}

.tr-section--dunkel .tr-schritte > li::before {
	color: var(--wp--preset--color--akzent-hell);
}

.tr-section--dunkel .tr-schritte > li strong {
	color: var(--tr-weiss);
}

/* ---------- 11. Datenblatt-Tabelle ---------- */
.tr-datenblatt {
	margin-inline: 0;
	overflow-x: auto;
}

.tr-datenblatt table {
	width: 100%;
	border-collapse: collapse;
	border-top: 2px solid var(--tr-text);
	font-variant-numeric: tabular-nums;
}

.tr-datenblatt th,
.tr-datenblatt td {
	padding: 0.75rem 1rem 0.75rem 0;
	border: 0;
	border-bottom: 1px solid var(--tr-linie);
	text-align: start;
	vertical-align: top;
}

.tr-datenblatt thead {
	border-bottom: 0;
}

.tr-datenblatt thead th {
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 600;
	color: var(--tr-leise);
	border-bottom: 1px solid var(--tr-text);
}

.tr-datenblatt tbody th,
.tr-datenblatt tbody td:first-child:not(:only-child) {
	width: 34%;
	font-size: var(--wp--preset--font-size--klein);
	font-weight: 500;
	color: var(--tr-leise);
}

.tr-datenblatt figcaption {
	margin-top: 0.5rem;
}

/* ---------- 12. Checkliste ---------- */
.tr-checkliste {
	list-style: none;
	padding: 0;
}

.tr-checkliste > li {
	position: relative;
	padding-inline-start: 2rem;
	margin-block: 0.5rem;
}

.tr-checkliste > li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0.25rem;
	top: 0.35em;
	width: 0.45rem;
	height: 0.8rem;
	border: solid var(--tr-rot);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* ---------- 13. Kennzahlen-Reihe ---------- */
.tr-kennzahlen {
	gap: var(--wp--preset--spacing--50);
}

.tr-kennzahlen > * {
	position: relative;
	margin: 0;
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--tr-text);
}

/* Endmarke am Linienanfang wie eine Maßhilfslinie */
.tr-kennzahlen > *::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: -6px;
	width: 2px;
	height: 11px;
	background: var(--tr-rot);
}

.tr-kennzahlen > * > * {
	margin: 0;
}

.tr-kennzahlen__wert,
.tr-kennzahlen > * > :first-child:not(:only-child) {
	font-size: var(--wp--preset--font-size--riesig);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums;
}

.tr-kennzahlen__label,
.tr-kennzahlen > * > :last-child:not(:only-child) {
	margin-top: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--klein);
	color: var(--tr-leise);
	max-width: 28ch;
}

/* ---------- 14. Text/Bild ---------- */
.tr-geteilt {
	gap: var(--wp--preset--spacing--60);
	align-items: center;
}

.wp-block-columns.tr-geteilt img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Einzelbild im Abschnitt: in Originalgröße auf einer ruhigen Bildtafel, nie hochskaliert */
.tr-section > figure.wp-block-image {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: var(--wp--preset--spacing--40);
	background: var(--tr-alt);
	border-top: 2px solid var(--tr-text);
}

.tr-section--alt > figure.wp-block-image {
	background: var(--tr-weiss);
}

.tr-section > figure.wp-block-image img {
	width: auto;
	max-height: 26rem;
	object-fit: contain;
}

/* ---------- 15. Hinweise: zu prüfen und Grenzen ---------- */
.tr-pruefen {
	background: var(--wp--preset--color--pruefen-flaeche);
	color: var(--wp--preset--color--pruefen);
	border: 1px dashed var(--wp--preset--color--pruefen);
	border-radius: var(--tr-radius);
	font-weight: 500;
}

span.tr-pruefen,
a.tr-pruefen {
	padding: 0.05em 0.4em;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

div.tr-pruefen,
p.tr-pruefen {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

div.tr-pruefen > * {
	margin-block: 0 0.5rem;
}

div.tr-pruefen > :last-child {
	margin-block-end: 0;
}

.tr-grenzen {
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--tr-linie-stark);
	border-radius: var(--tr-radius);
	background: var(--tr-weiss);
}

.tr-grenzen > :first-child {
	margin-top: 0;
}

.tr-grenzen h2,
.tr-grenzen h3 {
	font-size: var(--wp--preset--font-size--mittel);
}

.tr-grenzen ul {
	list-style: none;
	padding: 0;
	margin-bottom: 0;
}

.tr-grenzen li {
	position: relative;
	padding-inline-start: 1.75rem;
	margin-block: 0.5rem;
}

.tr-grenzen li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0.2rem;
	top: 0.8em;
	width: 0.8rem;
	height: 2px;
	background: var(--tr-text);
}

/* ---------- 16. FAQ ---------- */
.tr-faq .wp-block-details {
	margin: 0;
	border-top: 1px solid var(--tr-linie-stark);
}

.tr-faq .wp-block-details:last-child {
	border-bottom: 1px solid var(--tr-linie-stark);
}

.tr-faq summary {
	position: relative;
	display: block;
	min-height: var(--tr-ziel);
	padding: var(--wp--preset--spacing--30) 3rem var(--wp--preset--spacing--30) 0;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--mittel);
	line-height: 1.35;
	cursor: pointer;
	list-style: none;
}

.tr-faq summary::-webkit-details-marker {
	display: none;
}

.tr-faq summary::before,
.tr-faq summary::after {
	content: "";
	position: absolute;
	inset-inline-end: 0.75rem;
	top: calc(50% - 1px);
	width: 0.875rem;
	height: 2px;
	background: var(--tr-rot);
	transition: transform var(--tr-dauer) var(--tr-kurve);
}

/* Quadratischer Rahmen um Plus/Minus, als zweilagiger Hintergrund – bleibt mittig bei mehrzeiligen Fragen */
.tr-faq summary {
	padding-inline-end: 3.5rem;
	background:
		linear-gradient(var(--tr-weiss), var(--tr-weiss)) right 1px center / calc(2.375rem - 2px) calc(2.375rem - 2px) no-repeat,
		linear-gradient(var(--tr-linie-stark), var(--tr-linie-stark)) right 0 center / 2.375rem 2.375rem no-repeat;
	transition: color var(--tr-dauer) var(--tr-kurve);
}

.tr-faq details[open] > summary {
	background:
		linear-gradient(var(--tr-weiss), var(--tr-weiss)) right 2px center / calc(2.375rem - 4px) calc(2.375rem - 4px) no-repeat,
		linear-gradient(var(--tr-text), var(--tr-text)) right 0 center / 2.375rem 2.375rem no-repeat;
}

.tr-faq summary:hover {
	color: var(--tr-rot-dunkel);
}

.tr-faq summary::after {
	transform: rotate(90deg);
}

.tr-faq details[open] > summary::after {
	transform: rotate(0deg);
}

.tr-faq details > :not(summary) {
	margin-block: 0 var(--wp--preset--spacing--40);
	max-width: 65ch;
	color: var(--tr-leise);
}

/* ---------- 17. Handlungsaufforderung ---------- */
.tr-cta.tr-cta {
	padding: var(--wp--preset--spacing--60) clamp(1.25rem, 4vw, 4rem);
	border-radius: var(--tr-radius-m);
	border-top: 4px solid var(--tr-rot);
}

.tr-cta.tr-cta > * {
	max-width: 56ch;
	margin-inline: 0 !important;
}

.tr-cta.tr-cta > h2 {
	margin-top: 0;
	max-width: 22ch;
	font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
}

.tr-cta > p {
	color: var(--tr-dunkel-leise);
}

.tr-cta.tr-cta .wp-block-buttons {
	max-width: none;
	margin-top: var(--wp--preset--spacing--40);
}

/* ---------- 18. Faktenzeile unter dem Hero (nur belegte Fakten) ---------- */
.tr-fakten {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 2px solid var(--tr-text);
}

.tr-fakten > li {
	position: relative;
	margin: 0;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) var(--wp--preset--spacing--50) 0;
	color: var(--tr-leise);
	font-size: var(--wp--preset--font-size--klein);
	line-height: 1.5;
	border-bottom: 1px solid var(--tr-linie);
}

/* rote Endmarke am Linienanfang jeder Zelle */
.tr-fakten > li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: -7px;
	width: 2px;
	height: 12px;
	background: var(--tr-rot);
}

.tr-fakten strong {
	display: block;
	margin-bottom: 0.25rem;
	font-size: var(--wp--preset--font-size--mittel);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--tr-text);
}

@media (min-width: 60rem) {
	.tr-fakten {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.tr-fakten > li {
		border-bottom: 0;
	}

	.tr-fakten > li + li {
		padding-inline-start: var(--wp--preset--spacing--40);
		border-inline-start: 1px solid var(--tr-linie);
	}

	.tr-fakten > li + li::before {
		inset-inline-start: -1px;
	}
}

/* ---------- 19. Ablauf als Zeitleiste auf dunklem Band ---------- */
.tr-section--dunkel .tr-schritte {
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	margin-block-start: var(--wp--preset--spacing--50);
}

.tr-section--dunkel .tr-schritte > li {
	padding-top: 0;
	border-top: 0;
	font-size: var(--wp--preset--font-size--basis);
}

.tr-section--dunkel .tr-schritte > li::before {
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	margin-bottom: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--gross);
	letter-spacing: -0.02em;
	color: var(--tr-dunkel);
	background: var(--wp--preset--color--akzent-hell);
	border-radius: 50%;
}

/* Verbindungslinie zum nächsten Schritt */
.tr-section--dunkel .tr-schritte > li:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 1.75rem;
	inset-inline-start: 4.5rem;
	inset-inline-end: calc(-1 * var(--wp--preset--spacing--60) + 1rem);
	height: 2px;
	background: repeating-linear-gradient(to right, var(--tr-dunkel-leise) 0 6px, transparent 6px 12px);
}

.tr-section--dunkel .tr-schritte > li strong {
	margin-bottom: 0.5rem;
	font-size: var(--wp--preset--font-size--mittel);
	line-height: 1.2;
}

@media (min-width: 60rem) {
	.tr-section--dunkel .tr-schritte {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 59.99rem) {
	.tr-section--dunkel .tr-schritte {
		grid-template-columns: minmax(0, 1fr);
		max-width: var(--tr-lese);
	}

	.tr-section--dunkel .tr-schritte > li {
		padding-inline-start: 4.75rem;
		min-height: 3.5rem;
	}

	.tr-section--dunkel .tr-schritte > li::before {
		position: absolute;
		inset-inline-start: 0;
		top: 0;
	}

	.tr-section--dunkel .tr-schritte > li:not(:last-child)::after {
		top: 4.25rem;
		bottom: calc(-1 * var(--wp--preset--spacing--50) + 0.75rem);
		inset-inline-start: 1.6875rem;
		inset-inline-end: auto;
		width: 2px;
		height: auto;
		background: repeating-linear-gradient(to bottom, var(--tr-dunkel-leise) 0 6px, transparent 6px 12px);
	}
}

/* ---------- 20. Bild-Kacheln (Branchen) ---------- */
.tr-raster.tr-kacheln {
	gap: var(--wp--preset--spacing--40);
}

.tr-kachel.tr-karte {
	--tr-fokus: var(--wp--preset--color--flaeche);
	--tr-fokus-innen: var(--wp--preset--color--flaeche-dunkel);
	isolation: isolate;
	justify-content: flex-end;
	min-height: clamp(20rem, 16rem + 12vw, 30rem);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	overflow: hidden;
	color: var(--tr-weiss);
	background: var(--tr-dunkel);
	border-top: 0;
}

.tr-kachel.tr-karte > figure {
	position: absolute;
	inset: 0;
	z-index: -2;
	margin: 0;
}

.tr-kachel.tr-karte img {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
	transition: transform 600ms var(--tr-kurve);
}

/* Ruhige Abdunklung im Textbereich: ab der Textoberkante deckend genug für ≥ 4,5:1 */
.tr-kachel::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, rgb(35 31 32 / 0.92) 0, rgb(35 31 32 / 0.88) 45%, rgb(35 31 32 / 0.1) 75%);
}

.tr-kachel.tr-karte :where(h3, h3 a) {
	color: var(--tr-weiss);
}

.tr-kachel.tr-karte h3 {
	font-size: var(--wp--preset--font-size--gross);
}

.tr-kachel.tr-karte p {
	max-width: 44ch;
	color: #E4E0DC;
}

.tr-kachel.tr-karte:hover {
	border-top-color: transparent;
}

.tr-kachel:hover img {
	transform: scale(1.04);
}

.tr-kachel.tr-karte:has(a:focus-visible) {
	outline: 3px solid var(--tr-text);
	outline-offset: 3px;
}

/* ---------- 21. Shop-Auswahlflächen ---------- */
.tr-raster.tr-shops {
	gap: var(--wp--preset--spacing--40);
}

.tr-shop.tr-karte {
	gap: 0;
	min-height: 15rem;
	padding: var(--wp--preset--spacing--50);
	background: var(--tr-weiss);
	border: 1px solid var(--tr-linie-stark);
	border-top: 2px solid var(--tr-text);
}

.tr-shop.tr-karte::after {
	content: "";
	position: absolute;
	inset: -2px -1px auto;
	height: 4px;
	background: var(--tr-rot);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--tr-dauer) var(--tr-kurve);
}

.tr-shop.tr-karte:hover::after,
.tr-shop.tr-karte:focus-within::after {
	transform: scaleX(1);
}

.tr-shop.tr-karte h3 {
	font-size: var(--wp--preset--font-size--gross);
}

.tr-shop.tr-karte > :last-child {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--40);
	color: var(--tr-text);
	font-size: var(--wp--preset--font-size--klein);
}

.tr-shop a {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	min-height: var(--tr-ziel);
	font-size: var(--wp--preset--font-size--mittel);
	font-weight: 700;
	color: var(--tr-akzent);
}

/* Pfeil nach rechts oben = externe Website */
.tr-shop a::before {
	content: "";
	order: 2;
	width: 1.25rem;
	height: 1.25rem;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform var(--tr-dauer) var(--tr-kurve);
}

.tr-shop.tr-karte:hover a::before {
	transform: translate(3px, -3px);
}

/* ganze Fläche klickbar über den einzigen Link */
.tr-shop a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* ---------- 22. Kontaktband in Markenrot ---------- */
.tr-kontaktband {
	--tr-fokus: var(--wp--preset--color--flaeche);
	--tr-fokus-innen: var(--wp--preset--color--text);
	color: var(--tr-weiss);
	background: var(--tr-rot);
}

.tr-kontaktband :where(h2, h3, p, a:not(.wp-element-button)) {
	color: var(--tr-weiss);
}

.tr-kontaktband__raster {
	display: grid;
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}

.tr-kontaktband__raster > * > * {
	margin-block: 0 var(--wp--preset--spacing--30);
}

.tr-kontaktband h2 {
	max-width: 16ch;
	font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem);
	letter-spacing: -0.03em;
}

.tr-kontaktband__daten {
	padding-top: var(--wp--preset--spacing--30);
	border-top: 2px solid var(--tr-weiss);
	font-size: var(--wp--preset--font-size--mittel);
	line-height: 1.5;
}

.tr-kontaktband .wp-block-button:not(.tr-button-sekundaer) .wp-block-button__link {
	color: var(--tr-text);
	background: var(--tr-weiss);
	border-color: var(--tr-weiss);
}

.tr-kontaktband .wp-block-button:not(.tr-button-sekundaer) .wp-block-button__link:hover {
	color: var(--tr-weiss);
	background: var(--tr-text);
	border-color: var(--tr-text);
}

@media (min-width: 60rem) {
	.tr-kontaktband__raster {
		grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
		align-items: end;
	}
}

/* ---------- 23. KI-Kennzeichnung (David 14.10.2026, inc/ki-hinweis.php; Klasse tr-ki-bild setzt seed.php) ---------- */
/* Sternchen oben rechts auf dem Bild; die Erklärung steht als Fußnote im Footer */
.tr-ki-stern {
	position: absolute;
	top: 0.5rem;
	inset-inline-end: 0.5rem;
	z-index: 3;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 1.5rem;
	height: 1.5rem;
	padding-top: 0.3em;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1;
	color: var(--tr-weiss);
	background: var(--tr-dunkel);
	border: 1px solid var(--tr-weiss);
	border-radius: 2px;
	pointer-events: none;
}

/* Bildtafel: Rahmen so breit wie das Bild, damit der Stern auf dem Bild sitzt und nicht auf der Fläche daneben */
.tr-ki-rahmen {
	position: relative;
	display: inline-block;
	max-width: 100%;
	vertical-align: top;
}

.tr-ki-rahmen > img {
	vertical-align: top;
}

/* Langtext bleibt für Screenreader im Baum, sichtbar ist nur der Stern */
/* Klasse setzt inc/ki-hinweis.php beim Ausgeben (nicht im Editor) */
.tr-ki-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Fußnote: steht in der Copyright-Zeile des dunklen Footers und übernimmt deren Farbe */
.tr-ki-fussnote {
	font-size: 0.8125rem;
	line-height: 1.4;
}

.tr-fuss__basis .tr-ki-fussnote {
	margin: 0 0 0.5rem;
}

/* Druck: theme.css blendet den Footer aus. Ohne Fußnote stünde nur ein unerklärtes „*“ auf dem Papier,
   deshalb bleibt von ihm genau die Fußnote; Stern schwarz auf weiß, weil Hintergründe oft nicht gedruckt werden. */
@media print {
	.tr-seitenfuss:has(.tr-ki-fussnote) {
		display: block;
	}

	.tr-seitenfuss .tr-fuss {
		padding: 0;
		background: none;
	}

	.tr-seitenfuss .tr-fuss__raster,
	.tr-seitenfuss .tr-fuss__basis > :not(.tr-ki-fussnote) {
		display: none;
	}

	.tr-seitenfuss .tr-fuss__basis {
		margin: 0;
		padding: 0;
		border: 0;
	}

	.tr-ki-fussnote,
	.tr-ki-stern {
		color: #000;
	}

	.tr-ki-stern {
		background: #fff;
		border-color: #000;
	}
}

/* Blog-Übersicht: Artikelbild über die volle Kartenbreite (Produktkarten nutzen .tr-karte__bild für kleine Fotos) */
.tr-karte .tr-karte__foto {
	position: relative;
	margin: 0 0 1rem;
}

.tr-karte .tr-karte__foto img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* Vorschaubild einer Druckseite (weißes Blatt auf weißem Grund): feiner Rahmen als Blattkante */
.wp-block-image.tr-vorschau img {
	border: 1px solid var(--tr-linie-stark);
}

/* ---------- 24. Sprachen (ADR-002): Entwurfshinweis unter der H1, Kürzel bei Rückfall-Links ---------- */
/* Hinweis auf ungeprüfte Übersetzung (inc/i18n.php traydon_entwurf_hinweis) */
.tr-entwurf-hinweis {
	max-width: var(--tr-lese);
	margin-block: 0.75rem 1.5rem;
	padding-block: 0.5rem;
	padding-inline: 0.875rem 0.75rem;
	font-size: 0.875rem;
	line-height: 1.5;
	/* Tokens statt fester Farben: auf dunklem Grund (Hero) definiert der Bereich --tr-text/--tr-weiss um */
	color: var(--tr-text);
	background: var(--tr-weiss);
	border: 1px solid var(--tr-linie);
	border-inline-start: 3px solid var(--tr-rot);
	border-radius: var(--tr-radius);
}

.tr-entwurf-hinweis a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* Kürzel „(EN)“ hinter Links auf eine Seite anderer Sprache: kleiner, Farbe vom Link, nie umbrechen */
.tr-sprache-hinweis {
	font-size: 0.8em;
	white-space: nowrap;
}