.pag-archive-header {
	margin: 0 0 1.5rem;
	padding: 0 0 1rem;
	border-bottom: 1px solid #eee;
}

.pag-archive-title {
	margin: 0 0 0.35rem;
	font-size: 1.8rem;
	line-height: 1.2;
}

.pag-archive-description {
	color: #666;
	font-size: 1rem;
	line-height: 1.5;
}

.pag-empty {
	color: #666;
	padding: 1rem 0;
}

/*
 * Pinterest-Masonry in Lese-Reihenfolge (left-to-right).
 * JS verteilt die Karten zyklisch auf Spalten (i % cols) und packt sie
 * innerhalb jeder Spalte dicht – damit bleibt die DOM-Reihenfolge erhalten
 * (1,2,3 in der ersten Reihe; 4,5,6 in der zweiten Reihe einer Dreispalter).
 *
 * CSS-Fallback ohne JS: CSS-Grid-Reihen (gleiche Höhen, keine Masonry).
 */
.pag-archive-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--pag-min-col, 280px), 1fr));
	gap: 1.25rem;
	align-items: start;
}

.pag-archive-grid.pag-masonry-active {
	display: block;
	position: relative;
	gap: 0;
}

.pag-archive-grid .pag-card {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
	overflow: hidden;
	border: 1px solid #f0f0f0;
	transition: transform 0.15s ease, box-shadow 0.15s ease,
	            top 0.25s ease, left 0.25s ease;
	display: flex;
	flex-direction: column;
}

.pag-archive-grid.pag-masonry-active .pag-card {
	position: absolute;
	margin: 0;
	will-change: top, left;
}

.pag-archive-grid .pag-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 22px rgba(0, 0, 0, 0.12);
}

/* Waehrend des Initial-Layouts kurz ausblenden, damit kein Sprung
   vom Fallback-Grid zum Masonry sichtbar wird. */
.pag-archive-grid.pag-masonry-loading .pag-card {
	opacity: 0;
	transition: none;
}
.pag-archive-grid.pag-masonry-active.pag-masonry-ready .pag-card {
	opacity: 1;
	transition: opacity 0.2s ease, top 0.25s ease, left 0.25s ease,
	            transform 0.15s ease, box-shadow 0.15s ease;
}

.pag-card-media iframe,
.pag-card-media video,
.pag-card-media img {
	display: block;
	width: 100%;
	height: auto;
	border: 0;
}

.pag-card-media {
	background: #fafafa;
	display: block;
	text-decoration: none;
	overflow: hidden;
}

a.pag-card-media img {
	transition: transform 0.25s ease;
}

a.pag-card-media:hover img {
	transform: scale(1.03);
}

.pag-card-body {
	padding: 1rem 1rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.pag-card-title {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.3;
}

.pag-card-title a {
	color: #222;
	text-decoration: none;
}

.pag-card-title a:hover {
	text-decoration: underline;
}

/*
 * Excerpt ist ein <a>-Link: Text inline + Pfeil am Ende.
 * Beim Hover wandert der Pfeil ein Stueck nach rechts.
 */
.pag-card-excerpt {
	margin: 0;
	color: #545454;
	font-size: 0.95rem;
	line-height: 1.5;
	text-decoration: none;
	display: block;
}

.pag-card-excerpt:hover {
	color: #111;
}

.pag-card-excerpt > span {
	display: inline;
}

.pag-arrow {
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -0.15em;
	margin-left: 0.25em;
	color: #111;
	transition: transform 0.15s ease;
	flex-shrink: 0;
}

.pag-card-excerpt:hover .pag-arrow {
	transform: translateX(3px);
}

/*
 * SEB-Card: Plattform-Icon in der Ecke oben-rechts im Body.
 */
.pag-card-social .pag-card-body {
	position: relative;
	padding-right: 2.5rem;
}

.pag-card-social-icon {
	position: absolute;
	top: 0.9rem;
	right: 0.85rem;
	width: 1.25rem;
	height: 1.25rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #111;
}

.pag-card-social-icon svg,
.pag-card-social-icon .seb-icon {
	width: 100%;
	height: 100%;
	display: block;
}

/* Plattform-spezifische Icon-Farben. */
.pag-card-social-bluesky   .pag-card-social-icon { color: #0085ff; }
.pag-card-social-mastodon  .pag-card-social-icon { color: #6364ff; }
.pag-card-social-instagram .pag-card-social-icon { color: #dd2a7b; }
.pag-card-social-threads   .pag-card-social-icon { color: #000; }
.pag-card-social-facebook  .pag-card-social-icon { color: #1877f2; }
.pag-card-social-youtube   .pag-card-social-icon { color: #ff0000; }
.pag-card-social-vimeo     .pag-card-social-icon { color: #1ab7ea; }
.pag-card-social-mixcloud  .pag-card-social-icon { color: #52aad8; }
.pag-card-social-peertube  .pag-card-social-icon { color: #f1680d; }

.pag-icon-fallback {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.03em;
}

/* Mixcloud / andere iframe-Embeds bekommen keinen Hover-Translate. */
.pag-card-media-embed {
	background: transparent;
}

/*
 * Themify-Builder-Lazy-Video-Wrapper: hat eigene Aspect-Ratio per Inline-
 * Style; muss volle Breite einnehmen, damit es die Card ausfüllt.
 */
.pag-card-media-embed .tf_vd_lazy,
.pag-card-media-embed .tf_vd_lazy video {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

/*
 * Native HTML5-<video> direkt in der Post-Card (nicht der Themify-Wrapper).
 * Höhenbegrenzung verhindert, dass extrem hohe Videos die Card sprengen.
 */
.pag-card-media-embed > video {
	display: block;
	width: 100%;
	height: auto;
	max-height: 60vh;
	background: #000;
}

.pag-card-media-embed iframe {
	display: block;
	width: 100%;
	border: 0;
}

/*
 * Native Video-Player in der Card (lokal heruntergeladene Videos, z.B.
 * Bluesky/Mastodon-MP4s). Wird in pag-card-media-embed gewrappt → kein
 * Card-Link, native Wiedergabe-Steuerung bleibt nutzbar.
 */
.pag-card-video {
	display: block;
	width: 100%;
	height: auto;
	max-height: 60vh;
	background: #000;
	border-radius: 0;
}

/*
 * iframe-Player für YouTube, Vimeo, PeerTube. 16:9-Format als Default,
 * fügt sich responsiv in das Pinterest-Grid ein.
 */
.pag-card-video-embed {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	background: #000;
	border: 0;
}

/*
 * Fallback-Styling fuer den Mixcloud-Click-to-Load-Wrapper, falls die
 * SEB-Frontend-CSS-Datei (seb-public) nicht geladen wird. Wird SEB mit
 * geladen, ueberschreibt dessen CSS die Werte – macht nichts.
 */
.pag-card-mixcloud-wrap {
	position: relative;
	display: block;
	width: 100%;
	min-height: 120px;
	background: #1e1e1e center/cover no-repeat;
	overflow: hidden;
}

.pag-card-mixcloud-wrap .seb-audio-consent__btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	width: 100%;
	min-height: 120px;
	padding: 1rem 0.75rem;
	border: 0;
	cursor: pointer;
	color: #fff;
	background: rgba(0, 0, 0, 0.55);
	text-align: center;
}

.pag-card-mixcloud-wrap .seb-audio-consent__play {
	font-size: 1.75rem;
	line-height: 1;
}

.pag-card-mixcloud-wrap .seb-audio-consent__title {
	font-weight: 600;
	font-size: 0.95rem;
}

.pag-card-mixcloud-wrap .seb-audio-consent__note {
	font-size: 0.75rem;
	opacity: 0.85;
	max-width: 32ch;
}

/*
 * Externer-Link-Hinweis: dezent auf der SEB-Card, beim Hover sichtbar.
 * Zeigt "Oeffnet [Plattform] in neuem Tab" + kleines Icon.
 */
.pag-card-external-hint {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.72rem;
	color: #888;
	opacity: 0;
	transform: translateY(2px);
	transition: opacity 0.15s ease, transform 0.15s ease, color 0.15s ease;
	pointer-events: none;
	margin-top: 0.25rem;
}

.pag-card-social:hover .pag-card-external-hint,
.pag-card-social:focus-within .pag-card-external-hint {
	opacity: 1;
	transform: translateY(0);
	color: #444;
}

.pag-external-icon {
	width: 0.9em;
	height: 0.9em;
	flex-shrink: 0;
}


/*
 * Infinite-Scroll-Status unterhalb des Grids.
 */
.pag-infinite-status {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: 1.5rem 1rem;
	color: #666;
	font-size: 0.9rem;
}

.pag-spinner {
	width: 1.2rem;
	height: 1.2rem;
	border: 2px solid rgba(0, 0, 0, 0.1);
	border-top-color: #7cb342;
	border-radius: 50%;
	animation: pag-spin 0.8s linear infinite;
}

@keyframes pag-spin {
	to { transform: rotate(360deg); }
}

.pag-infinite-sentinel {
	height: 1px;
	width: 100%;
}

.pag-pagination {
	display: flex;
	justify-content: center;
	margin: 2rem 0;
}

.pag-pagination .page-numbers {
	margin: 0 0.35rem;
	padding: 0.55rem 0.9rem;
	background: #f5f5f5;
	border-radius: 6px;
	text-decoration: none;
	color: #444;
}

.pag-pagination .page-numbers.current,
.pag-pagination .page-numbers:hover {
	background: #111;
	color: #fff;
}

/* Mobile-Gap kleiner. */
@media (max-width: 640px) {
	.pag-archive-grid {
		gap: 0.8rem;
	}
}

/* ──────────────────────────────────────────────
 * SEB-Lightbox
 * ────────────────────────────────────────────── */

html.pag-lightbox-open {
	overflow: hidden;
}

.pag-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
}

.pag-lightbox[hidden] {
	display: none;
}

.pag-lightbox-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(12, 14, 20, 0.78);
	backdrop-filter: blur(6px);
	animation: pag-fade 0.15s ease;
}

.pag-lightbox-panel {
	position: relative;
	background: #fff;
	border-radius: 16px;
	max-width: 860px;
	width: 100%;
	max-height: 90vh;
	overflow: auto;
	box-shadow: 0 30px 60px rgba(0,0,0,0.35);
	animation: pag-pop 0.2s ease;
}

@keyframes pag-fade {
	from { opacity: 0; } to { opacity: 1; }
}
@keyframes pag-pop {
	from { opacity: 0; transform: translateY(8px) scale(0.98); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

.pag-lightbox-close {
	position: sticky;
	top: 8px;
	float: right;
	margin: 8px 8px 0 0;
	background: rgba(255,255,255,0.92);
	border: 1px solid #e6e6e6;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	color: #333;
	z-index: 2;
	box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.pag-lightbox-close:hover {
	background: #fff;
	color: #000;
}

.pag-lightbox-body {
	padding: 1.25rem 1.5rem 1.75rem;
}

.pag-lightbox-loading {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 200px;
}

.pag-lightbox-error {
	color: #b00;
	text-align: center;
	padding: 2rem 0;
}

.pag-lightbox-post {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.pag-lightbox-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid #eee;
}

.pag-lightbox-header .pag-card-social-icon {
	position: static;
	width: 1.5rem;
	height: 1.5rem;
}

.pag-lightbox-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.7rem;
	align-items: baseline;
	font-size: 0.9rem;
	color: #555;
	flex: 1;
}

.pag-lightbox-platform {
	color: #111;
}

.pag-lightbox-handle {
	font-weight: 600;
	color: #333;
}

.pag-lightbox-sub {
	color: #888;
}

.pag-lightbox-date {
	margin-left: auto;
	color: #888;
	font-size: 0.8rem;
}

/*
 * Overlay-Medien-Grid:
 * - 1 Item  → eine Spalte, volle Breite (max-height 70vh)
 * - 2+ Items → 2 Spalten (ab 560 px Viewport), Bilder side-by-side
 * - 4+ Items → bis zu 3 Spalten auf breiten Screens
 *
 * Die Stacking-Variante "nur hineingeklatscht" (alles untereinander) wird
 * dadurch durch ein echtes Masonry-aehnliches Raster ersetzt.
 */
.pag-lightbox-media {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
	align-items: start;
}

@media (min-width: 560px) {
	.pag-lightbox-media:has(> .pag-lightbox-media-item + .pag-lightbox-media-item) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.pag-lightbox-media:has(> .pag-lightbox-media-item:nth-child(4)) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.pag-lightbox-media-item {
	min-width: 0;
}

.pag-lightbox-media-item img,
.pag-lightbox-media-item iframe,
.pag-lightbox-media-item video {
	display: block;
	width: 100%;
	height: auto;
	max-height: 70vh;
	object-fit: contain;
	background: #111;
	border-radius: 10px;
	border: 0;
}

/* Bei Multi-Media: Bildhoehe begrenzen, damit das Grid ausgeglichen bleibt. */
.pag-lightbox-media:has(> .pag-lightbox-media-item + .pag-lightbox-media-item) .pag-lightbox-media-item img,
.pag-lightbox-media:has(> .pag-lightbox-media-item + .pag-lightbox-media-item) .pag-lightbox-media-item video {
	max-height: 50vh;
	object-fit: cover;
	aspect-ratio: 4 / 3;
}

.pag-lightbox-media-item iframe.pag-card-mixcloud {
	background: #fff;
	border-radius: 10px;
	max-height: none;
}

.pag-lightbox-content-text {
	font-size: 1rem;
	line-height: 1.55;
	color: #222;
	white-space: normal;
	word-wrap: break-word;
}

.pag-lightbox-content-text a {
	color: #1877f2;
}

.pag-lightbox-content-text img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

.pag-lightbox-footer {
	display: flex;
	justify-content: flex-end;
	padding-top: 0.75rem;
	border-top: 1px solid #eee;
}

.pag-lightbox-external {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: #111;
	color: #fff;
	text-decoration: none;
	padding: 0.6rem 1.1rem;
	border-radius: 999px;
	font-size: 0.9rem;
	transition: background 0.15s ease;
}

.pag-lightbox-external:hover {
	background: #333;
	color: #fff;
}

.pag-lightbox-external .pag-external-icon {
	width: 1em;
	height: 1em;
}

/* Plattform-spezifische Akzente im Overlay-Button. */
.pag-card-social-bluesky   .pag-lightbox-external { background: #0085ff; }
.pag-card-social-mastodon  .pag-lightbox-external { background: #6364ff; }
.pag-card-social-instagram .pag-lightbox-external { background: linear-gradient(135deg,#f58529,#dd2a7b,#8134af); }
.pag-card-social-threads   .pag-lightbox-external { background: #000; }
.pag-card-social-facebook  .pag-lightbox-external { background: #1877f2; }
.pag-card-social-youtube   .pag-lightbox-external { background: #ff0000; }
.pag-card-social-vimeo     .pag-lightbox-external { background: #1ab7ea; }
.pag-card-social-mixcloud  .pag-lightbox-external { background: #52aad8; }
.pag-card-social-peertube  .pag-lightbox-external { background: #f1680d; }

@media (max-width: 640px) {
	.pag-lightbox {
		padding: 0;
	}
	.pag-lightbox-panel {
		max-height: 100vh;
		border-radius: 0;
	}
}