/* ===========================================================================
 * Neue Beiträge (post_type=post): Einzelansicht und Block der Startseite.
 * Geladen nach theme.css, nur auf Beitragsseiten und der Startseite.
 * =========================================================================== */

/* --- Startseite: Block "Neue Beiträge" ----------------------------------- */

.tf-front-posts { margin-bottom: 36px; }

#col3_content .tf-front-posts__title {
	margin: 0 0 18px;
	padding: 0 0 10px;
	border-bottom: 2px solid var(--tf-brand);
	color: var(--tf-900);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -.015em;
}

/* --- Rahmen -------------------------------------------------------------- */

.tf-article.tf-post {
	max-width: none;
	container-type: inline-size;
}

/* --- Kopf ---------------------------------------------------------------- */

.tf-post__header {
	max-width: 980px;
	margin: 0 0 24px;
}

.tf-post__kicker {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 14px;
}

.tf-post__cat {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(14, 116, 144, .1);
	color: var(--tf-brand-strong);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
}

.tf-post__cat:hover { background: rgba(14, 116, 144, .18); color: var(--tf-brand-strong); }

.tf-post__title {
	margin: 0 0 14px;
	color: var(--tf-900);
	font-size: clamp(28px, 3.2cqi, 42px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.025em;
}

.tf-post__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 0;
	margin: 0;
	color: var(--tf-500);
	font-size: 13.5px;
}

.tf-post__meta > * + *::before {
	content: "·";
	margin: 0 .6em;
	color: var(--tf-300);
}

/* --- Titelbild ----------------------------------------------------------- */

.tf-post__hero { margin: 0 0 32px; }

.tf-post__hero-img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 560px;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 14px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 12px 32px rgba(15, 23, 42, .10);
}

/* --- Text und Inhaltsverzeichnis ----------------------------------------- */

.tf-post__layout { display: block; }

.tf-post__body { min-width: 0; }

.tf-post__body > p:first-child {
	color: var(--tf-700);
	font-size: 1.14em;
	line-height: 1.65;
}

.tf-post__body h2 { scroll-margin-top: 24px; }

/* "Was ist neu?" und ähnliche Stichpunktlisten direkt unter einer h2 als Kasten. */
.tf-post__body h2 + ul {
	margin: 0 0 1.6em;
	padding: 18px 22px 18px 20px;
	list-style: none;
	background: var(--tf-050);
	border: 1px solid var(--tf-200);
	border-left: 3px solid var(--tf-brand);
	border-radius: 12px;
}

.tf-post__body h2 + ul li {
	position: relative;
	margin: 0;
	padding: 6px 0 6px 28px;
}

.tf-post__body h2 + ul li + li { border-top: 1px dashed var(--tf-200); }

.tf-post__body h2 + ul li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: .85em;
	width: 14px;
	height: 8px;
	border-left: 2px solid var(--tf-brand);
	border-bottom: 2px solid var(--tf-brand);
	transform: rotate(-45deg);
}

.tf-post__aside { display: none; }

.tf-post__toc {
	position: sticky;
	top: 20px;
	padding: 18px 18px 14px;
	background: var(--tf-050);
	border: 1px solid var(--tf-200);
	border-radius: 12px;
	font-size: 14px;
	line-height: 1.45;
}

.tf-post__toc-label {
	margin: 0 0 10px;
	color: var(--tf-500);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.tf-post__toc ol {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: toc;
}

.tf-post__toc li {
	counter-increment: toc;
	margin: 0;
	padding: 0;
}

.tf-post__toc a {
	display: flex;
	gap: 10px;
	padding: 7px 0;
	border-top: 1px solid var(--tf-200);
	color: var(--tf-700);
	text-decoration: none;
}

.tf-post__toc li:first-child a { border-top: 0; }

.tf-post__toc a::before {
	content: counter(toc, decimal-leading-zero);
	flex: none;
	color: var(--tf-brand);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.tf-post__toc a:hover { color: var(--tf-brand-strong); }

/*
 * Breite Inhaltsfläche: Text auf lesbarer Zeilenlänge, rechts daneben das
 * Inhaltsverzeichnis. Die Breite der Inhaltsspalte zählt, nicht die des
 * Fensters - deshalb eine Containerabfrage.
 */
@container (min-width: 900px) {
	.tf-post__layout--toc {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 260px;
		gap: 48px;
		align-items: start;
	}

	.tf-post__layout--toc .tf-post__aside { display: block; }
}

/* Sehr breit: etwas grössere Schrift statt überlanger Zeilen. */
@container (min-width: 1240px) {
	.tf-post__layout--toc { grid-template-columns: minmax(0, 920px) 300px; gap: 64px; }
	.tf-post__layout:not(.tf-post__layout--toc) .tf-post__body { max-width: 920px; }
	.tf-post__body { font-size: 17.5px; }
}

/* --- Weitere Beiträge ---------------------------------------------------- */

.tf-post__more {
	margin-top: 48px;
	padding-top: 28px;
	border-top: 1px solid var(--tf-200);
}

.tf-post__more-title {
	margin: 0 0 18px;
	color: var(--tf-900);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -.015em;
}

.tf-post__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 18px;
}

.tf-tile {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--tf-200);
	border-radius: 12px;
	color: inherit;
	text-decoration: none;
	transition: box-shadow 150ms var(--tf-ease), border-color 150ms var(--tf-ease);
}

.tf-tile:hover {
	border-color: var(--tf-300);
	box-shadow: 0 4px 14px rgba(15, 23, 42, .08);
}

.tf-tile__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--tf-100);
}

.tf-tile__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 300ms var(--tf-ease);
}

.tf-tile:hover .tf-tile__media img { transform: scale(1.03); }

.tf-tile__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px 16px 16px;
}

.tf-tile__date { color: var(--tf-500); font-size: 12.5px; }

.tf-tile__title {
	color: var(--tf-900);
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.35;
}

.tf-tile:hover .tf-tile__title { color: var(--tf-brand); }

/* --- Schmal -------------------------------------------------------------- */

@media screen and (max-width: 700px) {
	.tf-post__hero { margin-bottom: 24px; }
	.tf-post__hero-img { border-radius: 10px; }
	.tf-post__body h2 + ul { padding: 14px 16px; }
}

/* --- Autor --------------------------------------------------------------- */

.tf-post__by strong { color: var(--tf-700); font-weight: 600; }

.tf-author {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	margin: 40px 0 0;
	padding: 20px;
	background: var(--tf-050);
	border: 1px solid var(--tf-200);
	border-radius: 14px;
}

.tf-author__avatar { flex: none; }

.tf-author__img,
.tf-author__initials {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
}

.tf-author__initials {
	background: var(--tf-brand);
	color: #fff;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: .02em;
}

.tf-post__body .tf-author p { margin: 0; }

.tf-author__label {
	color: var(--tf-500);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.tf-post__body .tf-author .tf-author__name {
	margin: 2px 0 6px;
	color: var(--tf-900);
	font-size: 17px;
	font-weight: 700;
}

.tf-post__body .tf-author .tf-author__bio { color: var(--tf-600); font-size: 15px; line-height: 1.6; }

/* --- Tabellen im Beitrag ------------------------------------------------- */

.tf-post__body .tf-scroll {
	margin: 1.6em 0;
	overflow-x: auto;
	border: 1px solid var(--tf-200);
	border-radius: 12px;
}

.tf-post__body table {
	width: 100%;
	min-width: 560px;
	margin: 0;
	border-collapse: collapse;
	font-size: 14.5px;
	line-height: 1.5;
}

.tf-post__body table th,
.tf-post__body table td {
	padding: 11px 14px;
	border-bottom: 1px solid var(--tf-200);
	text-align: left;
	vertical-align: top;
}

.tf-post__body table th {
	background: var(--tf-100);
	color: var(--tf-900);
	font-weight: 700;
	white-space: nowrap;
}

.tf-post__body table tbody tr:last-child td { border-bottom: 0; }
.tf-post__body table tbody tr:nth-child(even) td { background: var(--tf-050); }
.tf-post__body table td p,
.tf-post__body table th p { margin: 0; }
.tf-post__body table td:first-child { color: var(--tf-900); font-weight: 600; }

/* --- Rangliste am Anfang ------------------------------------------------- */

.tf-post__body .tf-toplist {
	display: grid;
	gap: 8px;
	margin: 1.4em 0 1.8em;
	padding: 0;
	list-style: none;
}

.tf-post__body .tf-toplist li {
	margin: 0;
	padding: 12px 16px;
	background: #fff;
	border: 1px solid var(--tf-200);
	border-radius: 12px;
	font-weight: 600;
	color: var(--tf-800);
}

.tf-post__body .tf-toplist li::before { content: none; }

.tf-post__body figure.tf-figure figcaption,
.tf-post__body .tf-caption { color: var(--tf-500); font-size: 13.5px; }

/* --- Inhaltsverzeichnis: schwebend, mit aktuellem Abschnitt ---------------
 * Schon ab 820 px Inhaltsbreite (bei 1440 px Fensterbreite sind es rund
 * 880 px) - vorher erschien es erst auf sehr breiten Bildschirmen.
 * ------------------------------------------------------------------------ */

@container (min-width: 820px) {
	.tf-post__layout--toc {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 230px;
		gap: 40px;
		align-items: start;
	}

	.tf-post__layout--toc .tf-post__aside { display: block; align-self: stretch; }
}

.tf-post__toc {
	top: 20px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

.tf-post__toc a {
	position: relative;
	margin: 0 -10px;
	padding: 7px 10px;
	border-radius: 8px;
	transition: background-color 150ms var(--tf-ease), color 150ms var(--tf-ease);
}

.tf-post__toc li:first-child a { border-top: 0; }

.tf-post__toc a.is-active {
	background: rgba(14, 116, 144, .1);
	color: var(--tf-brand-strong);
	font-weight: 600;
}

.tf-post__toc a.is-active::after {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	bottom: 8px;
	width: 3px;
	border-radius: 2px;
	background: var(--tf-brand);
}

/* --- Verzeichnis im Text (schmal) ---------------------------------------- */

.tf-post__body .tf-toc-inline {
	margin: 0 0 1.8em;
	background: var(--tf-050);
	border: 1px solid var(--tf-200);
	border-radius: 12px;
	font-size: 15px;
	line-height: 1.45;
}

.tf-post__body .tf-toc-inline summary {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	color: var(--tf-900);
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.tf-post__body .tf-toc-inline summary::-webkit-details-marker { display: none; }

.tf-post__body .tf-toc-inline summary::after {
	content: "";
	width: 8px;
	height: 8px;
	margin: -4px 4px 0 auto;
	border-right: 2px solid var(--tf-500);
	border-bottom: 2px solid var(--tf-500);
	transform: rotate(45deg);
	transition: transform 150ms var(--tf-ease), margin 150ms var(--tf-ease);
}

.tf-post__body .tf-toc-inline[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }

.tf-toc-inline__count {
	color: var(--tf-500);
	font-size: 13px;
	font-weight: 500;
}

.tf-post__body .tf-toc-inline ol {
	margin: 0;
	padding: 0 16px 10px;
	list-style: none;
	counter-reset: toc;
}

.tf-post__body .tf-toc-inline li {
	counter-increment: toc;
	margin: 0;
	padding: 0;
}

.tf-post__body .tf-toc-inline li::before { content: none; }

.tf-post__body .tf-toc-inline a {
	display: flex;
	gap: 10px;
	padding: 9px 0;
	border-top: 1px solid var(--tf-200);
	color: var(--tf-700);
	text-decoration: none;
}

.tf-post__body .tf-toc-inline a::before {
	content: counter(toc, decimal-leading-zero);
	flex: none;
	color: var(--tf-brand);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* Breit steht das Verzeichnis in der Randspalte - im Text nicht doppelt. */
@container (min-width: 820px) {
	.tf-post__layout--toc .tf-toc-inline { display: none; }
}

.tf-post__body h2 { scroll-margin-top: 20px; }

/* Titelbild im Text: so breit wie der Text, wie die übrigen Bilder. */
.tf-post__body .tf-figure--inline { max-width: none; }
.tf-post__body .tf-figure--inline img { width: 100%; height: auto; }

/* --- Karten der neuen Beiträge: Bild ohne harten Beschnitt ----------------
 * Die Bildspalte wurde auf die Höhe der Karte gezogen (4:3 und höher) - bei
 * Titelbildern in 3:2/16:9 fehlten dann links und rechts grosse Teile.
 * Jetzt ein eigenes 16:10-Fenster, eingerückt und mittig in der Karte.
 * ------------------------------------------------------------------------ */

@media screen and (min-width: 701px) {
	#col3_content .tf-card.type-post {
		grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
		align-items: center;
	}

	#col3_content .tf-card.type-post .tf-card__media {
		align-self: center;
		height: auto;
		margin: 12px 0 12px 12px;
		aspect-ratio: 16 / 10;
		border-radius: 8px;
	}

	#col3_content .tf-card.type-post .tf-card__image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

/* Autorenbild: Gesicht sitzt im oberen Drittel des Fotos. */
.tf-author__img { object-position: 50% 22%; }

/* --- Häufige Fragen (aufklappbar) ----------------------------------------- */

.tf-post__body .tf-faq {
	display: grid;
	gap: 8px;
	margin: 1.2em 0 0;
}

.tf-post__body .tf-faq__item {
	background: #fff;
	border: 1px solid var(--tf-200);
	border-radius: 12px;
	transition: border-color 150ms var(--tf-ease), background-color 150ms var(--tf-ease);
}

.tf-post__body .tf-faq__item[open] { background: var(--tf-050); border-color: var(--tf-300); }

.tf-post__body .tf-faq__item summary {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 15px 18px;
	cursor: pointer;
	list-style: none;
}

.tf-post__body .tf-faq__item summary::-webkit-details-marker { display: none; }

.tf-post__body .tf-faq__item summary::after {
	content: "";
	flex: none;
	width: 9px;
	height: 9px;
	margin: -5px 4px 0 auto;
	border-right: 2px solid var(--tf-brand);
	border-bottom: 2px solid var(--tf-brand);
	transform: rotate(45deg);
	transition: transform 150ms var(--tf-ease), margin 150ms var(--tf-ease);
}

.tf-post__body .tf-faq__item[open] summary::after { margin-top: 5px; transform: rotate(-135deg); }

.tf-post__body .tf-faq__item summary:hover .tf-faq__q { color: var(--tf-brand-strong); }

.tf-post__body h3.tf-faq__q {
	margin: 0;
	color: var(--tf-900);
	font-size: 16.5px;
	line-height: 1.4;
}

.tf-post__body .tf-faq__a {
	padding: 0 18px 16px;
	color: var(--tf-700);
}

.tf-post__body .tf-faq__a > :last-child { margin-bottom: 0; }

/* Karten der Beiträge: Bild 25 %, Text 75 %; das Bild behält sein eigenes
 * Seitenverhältnis - kein festes Fenster, also kein Beschnitt. */
@media screen and (min-width: 701px) {
	#col3_content .tf-card.type-post { grid-template-columns: minmax(0, 25%) minmax(0, 1fr); }

	#col3_content .tf-card.type-post .tf-card__media {
		aspect-ratio: auto;
		height: auto;
		background: none;
	}

	#col3_content .tf-card.type-post .tf-card__image {
		height: auto;
		max-height: none;
		object-fit: initial;
	}
}

/* Wie die übrigen Karten: Bild bündig am linken Rand, ohne Einzug. Es wird
 * ganz gezeigt (kein Beschnitt); ist der Text höher, füllt dunkler Grund. */
@media screen and (min-width: 701px) {
	#col3_content .tf-card.type-post { align-items: stretch; }

	#col3_content .tf-card.type-post .tf-card__media {
		display: flex;
		align-items: center;
		align-self: stretch;
		margin: 0;
		border-radius: 0;
		background: #0f1115;
	}
}