/**
 * 05-news-blog.css - Aktuelles, Blog, Einzelansichten, Suche, Seitenleiste.
 *
 * Mobile First. Ausschliesslich Tokens aus 01-tokens.css, keine Hexwerte.
 * Basisklassen (.container, .grid, .card, .badge, .btn) werden wiederverwendet.
 */

/* =========================================================================
   1. Gemeinsame Kleinteile
   ====================================================================== */

.icon-arrow {
	width: 1.1em;
	height: 1.1em;
	flex: none;
	transition: transform var(--transition);
}

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	font-weight: var(--fw-semibold);
	text-decoration: none;
}

.link-arrow:hover .icon-arrow,
.link-arrow:focus-visible .icon-arrow { transform: translateX(3px); }

.link-arrow--back:hover .icon-arrow--back,
.link-arrow--back:focus-visible .icon-arrow--back { transform: translateX(-3px); }

/* ---------- Brotkrumen ---------- */

.breadcrumbs { margin-bottom: var(--sp-4); }

.breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--fs-xs);
	color: var(--c-muted);
}

.breadcrumbs__item {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	max-width: 100%;
}

.breadcrumbs__item + .breadcrumbs__item::before {
	content: "/";
	color: var(--c-blue-300);
}

.breadcrumbs__link {
	color: var(--c-muted);
	text-decoration: none;
}

.breadcrumbs__link:hover,
.breadcrumbs__link:focus-visible {
	color: var(--color-primary);
	text-decoration: underline;
}

.breadcrumbs__current {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 22ch;
	color: var(--color-heading);
	font-weight: var(--fw-medium);
}

@media (min-width: 700px) {
	.breadcrumbs__current { max-width: 48ch; }
}

/* ---------- Meta-Zeile ---------- */

.entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2) var(--sp-3);
	margin: 0;
	font-size: var(--fs-xs);
	color: var(--c-muted);
}

.entry-meta__item {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
}

.entry-meta__item + .entry-meta__item::before {
	content: "";
	width: 4px;
	height: 4px;
	border-radius: var(--radius-pill);
	background: var(--c-blue-300);
}

.entry-meta a {
	color: inherit;
	text-decoration: none;
}

.entry-meta a:hover,
.entry-meta a:focus-visible {
	color: var(--color-primary);
	text-decoration: underline;
}

.entry-meta--single {
	margin-top: var(--sp-5);
	font-size: var(--fs-sm);
}

/* ---------- Bildplatzhalter ---------- */

/* Hinweis: die Grundform von .media-placeholder steht in 02-base.css.
   Hier kommen nur die Farbvarianten und das Symbol dazu. */

.media-placeholder--v1 { background: linear-gradient(135deg, var(--c-blue-700), var(--c-blue-500)); }
.media-placeholder--v2 { background: linear-gradient(135deg, var(--c-blue-900), var(--c-blue-600)); }
.media-placeholder--v3 { background: linear-gradient(135deg, var(--c-blue-600), var(--c-blue-300)); }
.media-placeholder--v4 { background: linear-gradient(140deg, var(--c-blue-500), var(--c-blue-800)); }

.media-placeholder__mark {
	position: absolute;
	inset: 0;
	z-index: 1;
	margin: auto;
	width: 34%;
	max-width: 96px;
	height: auto;
	opacity: 0.8;
}

/* Portrait-Platzhalter in der Seitenleiste (Wrapper-gebunden, damit die
   Variante der Ueber-mich-Seite in 06-pages.css unberuehrt bleibt). */
.widget-about__media .media-placeholder--portrait {
	aspect-ratio: 4 / 5;
	border-radius: var(--radius-lg);
}

/* =========================================================================
   2. Archiv-Kopfbereich und Filterleiste
   ====================================================================== */

.archive-header {
	padding-block: var(--sp-8) var(--sp-7);
	background: var(--color-bg-alt);
	border-bottom: 1px solid var(--color-border);
}

.archive-header__title { margin-bottom: var(--sp-4); }

.archive-header__text {
	max-width: 62ch;
	margin-bottom: 0;
}

.archive-header__text p:last-child { margin-bottom: 0; }

.archive-header__search {
	max-width: 520px;
	margin-top: var(--sp-5);
}

.archive-header--news { background: var(--c-blue-50); }

.filter-bar { margin-bottom: var(--sp-7); }

.filter-bar__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.filter-pill {
	display: inline-flex;
	align-items: baseline;
	gap: var(--sp-2);
	padding: 0.5em 1.1em;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	background: var(--c-white);
	color: var(--color-heading);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	text-decoration: none;
	transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.filter-pill:hover,
.filter-pill:focus-visible {
	border-color: var(--color-primary-light);
	background: var(--c-blue-100);
	color: var(--color-primary-dark);
}

.filter-pill.is-active {
	border-color: var(--color-primary);
	background: var(--color-primary);
	color: var(--c-white);
}

.filter-pill__count {
	font-size: var(--fs-xs);
	color: var(--c-muted);
}

.filter-pill.is-active .filter-pill__count { color: var(--c-blue-100); }

/* =========================================================================
   3. Beitragskarte
   ====================================================================== */

.post-card {
	position: relative;
	height: 100%;
	background: var(--c-white);
}

.post-card__media {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--color-bg-alt);
}

.post-card__media img,
.post-card__media .media-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-slow);
}

.post-card:hover .post-card__media img { transform: scale(1.04); }

.post-card__terms {
	position: absolute;
	inset: auto auto var(--sp-3) var(--sp-3);
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
}

.post-card__terms .badge {
	background: var(--c-white);
	color: var(--color-primary);
	box-shadow: var(--shadow-sm);
}

.post-card__terms--inline {
	position: static;
	margin-bottom: var(--sp-3);
}

.post-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: var(--sp-5);
}

.post-card__title {
	margin-bottom: var(--sp-3);
	font-size: var(--fs-lg);
	letter-spacing: -0.01em;
}

.post-card__title a,
.post-card__link {
	color: var(--color-heading);
	text-decoration: none;
}

.post-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: var(--radius-lg);
}

.post-card:hover .post-card__title a,
.post-card__title a:focus-visible { color: var(--color-primary-light); }

.post-card__meta { margin-bottom: var(--sp-3); }

.post-card__excerpt {
	margin-bottom: var(--sp-5);
	color: var(--color-text);
}

.post-card__footer {
	margin: auto 0 0;
	padding-top: var(--sp-2);
}

.post-card__more {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	color: var(--color-link);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
}

.post-card:hover .post-card__more .icon-arrow { transform: translateX(4px); }

/* ---------- Hervorgehobene Karte ---------- */

/* Die Basisregel .post-card { height: 100% } sorgt in Grids fuer gleich hohe
   Karten. Die Featured-Karte steht aber als direktes Kind in einem Block-
   Container, dessen Hoehe als Grid-Item bereits aufgeloest ist - dort wuerde
   100% die volle Containerhoehe belegen und das nachfolgende Karten-Grid aus
   dem Container heraus ueber CTA-Band und Footer schieben. Deshalb auto. */
.post-card--featured {
	height: auto;
	margin-bottom: var(--sp-6);
}

.post-card--featured .post-card__media { aspect-ratio: 16 / 9; }

.post-card--featured .post-card__body { padding: var(--sp-6); }

.post-card--featured .post-card__title { font-size: var(--fs-xl); }

.post-card--featured .post-card__excerpt { font-size: var(--fs-md); }

.post-card--featured::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	z-index: 3;
	height: 4px;
	background: var(--color-accent);
}

/* ---------- Listen und Raster ---------- */

.post-grid { align-items: stretch; }

.post-list__grid { margin-bottom: var(--sp-8); }

.post-list > *:last-child { margin-bottom: 0; }

/* =========================================================================
   4. Blaetterung
   ====================================================================== */

.pagination {
	margin-top: var(--sp-8);
	padding-top: var(--sp-6);
	border-top: 1px solid var(--color-border);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0 var(--sp-3);
	justify-content: center;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--c-white);
	color: var(--color-heading);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	text-decoration: none;
	transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.pagination a.page-numbers:hover,
.pagination a.page-numbers:focus-visible {
	border-color: var(--color-primary-light);
	background: var(--c-blue-100);
	color: var(--color-primary-dark);
}

.pagination .page-numbers.current {
	border-color: var(--color-primary);
	background: var(--color-primary);
	color: var(--c-white);
}

.pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
	color: var(--c-muted);
}

/* =========================================================================
   5. Einzelansicht
   ====================================================================== */

.entry-header {
	padding-block: var(--sp-8) var(--sp-6);
	background: var(--color-bg-alt);
}

.entry--news .entry-header { background: var(--c-blue-50); }

.entry-header__terms {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin-bottom: var(--sp-4);
}

.entry-title { margin-bottom: 0; }

.entry-header__lead {
	max-width: 62ch;
	margin-top: var(--sp-4);
	margin-bottom: 0;
}

.entry-media { margin-bottom: var(--sp-7); }

.entry-media__figure {
	margin: 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow);
}

.entry-media__figure > img,
.entry-media__figure > .media-placeholder {
	width: 100%;
	aspect-ratio: 2 / 1;
	object-fit: cover;
}

.entry-media__figure figcaption {
	padding: var(--sp-3) var(--sp-4);
	background: var(--color-bg-alt);
	margin-top: 0;
}

/* Verschiebt das Beitragsbild leicht in den Header hinein. */
@media (min-width: 900px) {
	.entry-media { margin-top: calc(-1 * var(--sp-7)); }
	.entry-header { padding-bottom: var(--sp-9); }
}

/* ---------- Typografie des Fliesstextes ---------- */

.entry-content {
	font-size: var(--fs-md);
	line-height: var(--lh-base);
	max-width: var(--container-narrow);
}

.entry-content > h2 {
	margin-top: var(--sp-8);
	margin-bottom: var(--sp-4);
	font-size: var(--fs-xl);
}

.entry-content > h3 {
	margin-top: var(--sp-7);
	margin-bottom: var(--sp-3);
	font-size: var(--fs-lg);
}

.entry-content > h4 {
	margin-top: var(--sp-6);
	margin-bottom: var(--sp-3);
}

.entry-content > h2:first-child,
.entry-content > h3:first-child { margin-top: 0; }

.entry-content ul,
.entry-content ol { padding-left: var(--sp-5); }

.entry-content li { margin-bottom: var(--sp-2); }

.entry-content li::marker { color: var(--color-accent); }

.entry-content blockquote { margin-block: var(--sp-6); }

.entry-content img,
.entry-content figure img {
	border-radius: var(--radius);
}

.entry-content figure { margin-block: var(--sp-6); }

.entry-content a { font-weight: var(--fw-medium); }

.entry-content table { font-size: var(--fs-sm); }

.entry-content code,
.entry-content kbd {
	padding: 0.15em 0.4em;
	border-radius: var(--radius-sm);
	background: var(--color-bg-alt);
	font-size: 0.9em;
}

.entry-content pre {
	padding: var(--sp-5);
	border-radius: var(--radius);
	background: var(--color-bg-invert);
	color: var(--c-blue-100);
	overflow-x: auto;
}

.entry-content hr { margin-block: var(--sp-8); }

/* ---------- Mehrseitige Beitraege ---------- */

.page-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2);
	margin-top: var(--sp-7);
	padding-top: var(--sp-5);
	border-top: 1px solid var(--color-border);
	font-size: var(--fs-sm);
}

.page-links__label {
	font-weight: var(--fw-semibold);
	color: var(--color-heading);
}

.page-links a { text-decoration: none; }

.page-links__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	min-height: 2.25rem;
	padding: 0 var(--sp-2);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--c-white);
	color: var(--color-heading);
	font-weight: var(--fw-semibold);
	transition: background var(--transition), border-color var(--transition), color var(--transition);
}

/* Direktes Kind = aktuelle Seite (ohne umschliessenden Link). */
.page-links > .page-links__item {
	border-color: var(--color-primary);
	background: var(--color-primary);
	color: var(--c-white);
}

.page-links a:hover .page-links__item,
.page-links a:focus-visible .page-links__item {
	border-color: var(--color-primary-light);
	background: var(--c-blue-100);
	color: var(--color-primary-dark);
}

/* ---------- Schlagwoerter ---------- */

.entry-footer { padding-top: var(--sp-6); }

.entry-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2);
	font-size: var(--fs-sm);
}

.entry-tags__label {
	font-weight: var(--fw-semibold);
	color: var(--color-heading);
}

.entry-tags__tag:hover,
.entry-tags__tag:focus-visible {
	background: var(--color-primary);
	color: var(--c-white);
}

/* =========================================================================
   6. Teilen, Beitragsnavigation, verwandte Beitraege
   ====================================================================== */

.single__after { margin-top: var(--sp-8); }

.back-link { margin-bottom: var(--sp-6); }

.share {
	padding: var(--sp-5) var(--sp-6);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-bg-alt);
}

.share__title {
	margin-bottom: var(--sp-2);
	font-size: var(--fs-md);
}

.share__hint {
	margin-bottom: var(--sp-4);
	font-size: var(--fs-xs);
	color: var(--c-muted);
}

.share__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.share__link {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: 0.55em 1.1em;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	background: var(--c-white);
	color: var(--color-heading);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	text-decoration: none;
	transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.share__link:hover,
.share__link:focus-visible {
	border-color: var(--color-primary);
	background: var(--color-primary);
	color: var(--c-white);
}

.post-nav {
	display: grid;
	gap: var(--sp-4);
	margin-top: var(--sp-7);
}

.post-nav__item {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	padding: var(--sp-5);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--c-white);
	text-decoration: none;
	transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.post-nav__item--empty {
	border-style: dashed;
	background: transparent;
}

a.post-nav__item:hover,
a.post-nav__item:focus-visible {
	border-color: var(--color-primary-light);
	box-shadow: var(--shadow);
	transform: translateY(-2px);
}

.post-nav__label {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-primary-light);
}

.post-nav__title {
	color: var(--color-heading);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
}

@media (min-width: 700px) {
	.post-nav { grid-template-columns: repeat(2, 1fr); }
	.post-nav__item--next { text-align: right; align-items: flex-end; }
}

.related {
	margin-top: var(--sp-9);
	padding-block: var(--section-y);
	background: var(--color-bg-alt);
	border-top: 1px solid var(--color-border);
}

.related__title { margin-bottom: 0; }

/* =========================================================================
   7. Seitenleiste
   ====================================================================== */

.sidebar { margin-top: var(--sp-8); }

.sidebar__inner {
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
}

@media (min-width: 1000px) {
	.sidebar { margin-top: 0; }

	.sidebar__inner {
		position: sticky;
		top: var(--sp-6);
	}
}

.widget {
	padding: var(--sp-5);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--c-white);
}

.widget__title {
	margin-bottom: var(--sp-3);
	font-size: var(--fs-md);
	color: var(--color-heading);
}

/* Block-Widgets bringen eigene Ueberschriften (.wp-block-heading) mit, die
   sonst in Artikelgroesse erscheinen. Auf Widget-Titelgroesse normalisieren. */
.sidebar .widget > :is(h2, h3, h4),
.sidebar .widget .wp-block-heading {
	margin-bottom: var(--sp-3);
	font-size: var(--fs-md);
	line-height: var(--lh-snug);
	color: var(--color-heading);
}

.widget > *:last-child { margin-bottom: 0; }

.widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.widget li + li {
	margin-top: var(--sp-3);
	padding-top: var(--sp-3);
	border-top: 1px solid var(--color-border);
}

.widget a { text-decoration: none; }

.widget a:hover,
.widget a:focus-visible { text-decoration: underline; }

.widget-about__media { margin-bottom: var(--sp-4); }

.widget-about__text {
	margin-bottom: var(--sp-4);
	font-size: var(--fs-sm);
}

.widget--news .widget-news__link {
	display: block;
	color: var(--color-heading);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
}

.widget-news__meta {
	display: block;
	margin-top: var(--sp-1);
	font-size: var(--fs-xs);
	color: var(--c-muted);
}

.widget-news__more { margin-top: var(--sp-4); }

.widget--cta {
	border-color: var(--c-blue-300);
	background: var(--c-blue-50);
}

.widget-cta__text {
	font-size: var(--fs-sm);
	margin-bottom: var(--sp-4);
}

/* =========================================================================
   8. Suchergebnisse
   ====================================================================== */

.post-list--search {
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
}

.search-result {
	display: grid;
	gap: var(--sp-4);
	padding-bottom: var(--sp-5);
	border-bottom: 1px solid var(--color-border);
}

.search-result:last-of-type { border-bottom: 0; }

.search-result__media {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--color-bg-alt);
}

.search-result__media img,
.search-result__media .media-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.search-result__type { margin-bottom: var(--sp-2); }

.search-result__title {
	margin-bottom: var(--sp-2);
	font-size: var(--fs-lg);
}

.search-result__title a {
	color: var(--color-heading);
	text-decoration: none;
}

.search-result__title a:hover,
.search-result__title a:focus-visible { color: var(--color-primary-light); }

.search-result__meta { margin-bottom: var(--sp-3); }

.search-result__excerpt { margin-bottom: var(--sp-3); }

.search-result__more { margin-bottom: 0; }

@media (min-width: 700px) {
	.search-result { grid-template-columns: 220px minmax(0, 1fr); }
}

/* =========================================================================
   9. Leerzustand
   ====================================================================== */

.no-results {
	padding: var(--sp-7);
	border: 1px dashed var(--color-border);
	border-radius: var(--radius-lg);
	background: var(--color-bg-alt);
	text-align: left;
}

.no-results__title {
	margin-bottom: var(--sp-3);
	font-size: var(--fs-xl);
}

.no-results__text {
	max-width: 60ch;
	color: var(--c-muted);
}

.no-results__search {
	max-width: 480px;
	margin-bottom: var(--sp-5);
}

.no-results__links { margin-bottom: 0; }