/* ============================== ARTIKELSEITE ============================== */
html { scroll-behavior: smooth; }
.pma-article { background: var(--pmx-bg); }

/* Hero */
.pma-hero { padding: 56px 0 128px; }
.pma-hero-inner { max-width: 920px; gap: 18px; }
.pma-cat {
	display: inline-flex; align-self: flex-start; align-items: center; min-height: 32px; padding: 0 14px; margin-top: 8px;
	border-radius: var(--pmx-pill); background: var(--pmx-primary); font-family: var(--pmx-head); font-size: 13px; font-weight: 600;
	letter-spacing: .6px; text-transform: uppercase; color: var(--pmx-ink); text-decoration: none;
}
.pma-cat:hover { background: var(--pmx-surface); color: var(--pmx-ink); }
.pma-title { font-size: 44px; line-height: 1.2; }
.pma-meta { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.pma-avatar {
	display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%;
	background: var(--pmx-tint); font-family: var(--pmx-head); font-size: 16px; font-weight: 600; color: var(--pmx-primary-text); text-decoration: none;
}
.pma-avatar-lg { width: 72px; height: 72px; font-size: 22px; }
.pma-meta-text { display: flex; flex-direction: column; gap: 2px; }
.pma-author { font-family: var(--pmx-head); font-size: 16px; font-weight: 600; color: var(--pmx-on-dark); text-decoration: none; }
.pma-author:hover { color: var(--pmx-primary); }
.pma-meta-line { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--pmx-on-dark-muted); }

/* Beitragsbild, überlappt den Hero */
.pma-figure-wrap { margin-top: -88px; }
.pma-figure { display: flex; margin: 0; height: 520px; border-radius: 18px; overflow: hidden; background: var(--pmx-tint); box-shadow: 0 18px 40px var(--pmx-shadow); }
.pma-hero-img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Zweispaltig: Lesespalte + Seitenleiste */
.pma-layout { flex-direction: row; align-items: stretch; gap: 40px; padding-top: 56px; padding-bottom: 72px; }
.pma-layout-nofig { padding-top: 0; margin-top: -72px; }
.pma-body {
	display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; gap: 40px;
	padding: 56px 72px; box-sizing: border-box; background: var(--pmx-surface); border: 1px solid var(--pmx-line); border-radius: 18px;
}
.pma-side { display: flex; flex-direction: column; flex: 0 0 320px; gap: 20px; }

/* Inhaltsverzeichnis */
.pma-toc { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 14px; background: var(--pmx-surface); border: 1px solid var(--pmx-line); }
.pma-toc-title { margin: 0; font-family: var(--pmx-head); font-size: 15px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--pmx-ink); }
.pma-toc-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0 0 0 20px; font-size: 15px; line-height: 1.45; color: var(--pmx-muted); }
.pma-toc-list a { color: var(--pmx-text); text-decoration: none; }
.pma-toc-list a:hover { color: var(--pmx-primary-text); }
.pma-toc-side { position: sticky; top: 24px; }
.pma-toc-inline { display: none; background: var(--pmx-bg); border-color: var(--pmx-bg); }
.pma-toc-inline summary { cursor: pointer; }

.pma-side-cta { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 14px; background: var(--pmx-tint); }
.pma-side-cta-title { margin: 0; font-family: var(--pmx-head); font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--pmx-ink); }
.pma-side-cta-text { margin: 0 0 4px; font-size: 15px; line-height: 1.55; color: var(--pmx-muted); }

/* Fließtext */
.pma-prose { display: block; font-family: var(--pmx-body); font-size: 18px; line-height: 1.75; color: var(--pmx-text); overflow-wrap: break-word; }
.pma-prose > * { margin-top: 0; margin-bottom: 1.25em; }
.pma-prose > *:last-child { margin-bottom: 0; }
.pma-prose h2 { margin: 1.8em 0 .6em; font-family: var(--pmx-head); font-size: 28px; font-weight: 700; line-height: 1.3; color: var(--pmx-ink); scroll-margin-top: 24px; }
.pma-prose h3 { margin: 1.5em 0 .5em; font-family: var(--pmx-head); font-size: 22px; font-weight: 600; line-height: 1.35; color: var(--pmx-ink); }
.pma-prose h4 { margin: 1.4em 0 .5em; font-family: var(--pmx-head); font-size: 18px; font-weight: 600; color: var(--pmx-ink); }
.pma-prose > h2:first-child, .pma-prose > h3:first-child { margin-top: 0; }
.pma-prose a { color: var(--pmx-primary-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pma-prose a:hover { color: var(--pmx-ink); }
.pma-prose strong { color: var(--pmx-ink); }
.pma-prose ul, .pma-prose ol { padding-left: 1.3em; }
.pma-prose li { margin-bottom: .45em; }
.pma-prose blockquote { margin-left: 0; margin-right: 0; padding: 20px 24px; border-left: 4px solid var(--pmx-primary); border-radius: 0 12px 12px 0; background: var(--pmx-tint); font-size: 19px; color: var(--pmx-ink); }
.pma-prose blockquote p { margin: 0; }
.pma-prose img { max-width: 100%; height: auto; border-radius: 12px; }
.pma-prose figure { margin-left: 0; margin-right: 0; }
.pma-prose figcaption { margin-top: 8px; font-size: 14px; color: var(--pmx-muted); }
.pma-prose table { width: 100%; border-collapse: collapse; font-size: 16px; }
.pma-prose th, .pma-prose td { padding: 10px 12px; border-bottom: 1px solid var(--pmx-line); text-align: left; }
.pma-prose th { font-family: var(--pmx-head); font-weight: 600; color: var(--pmx-ink); background: var(--pmx-bg); }

/* Teilen */
.pma-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 28px; border-top: 1px solid var(--pmx-line); }
.pma-share-label { margin-right: 6px; font-family: var(--pmx-head); font-size: 15px; font-weight: 600; color: var(--pmx-ink); }
.pma-share-btn { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: var(--pmx-pill); border: 1px solid var(--pmx-line); font-family: var(--pmx-head); font-size: 14px; font-weight: 500; color: var(--pmx-ink); text-decoration: none; transition: border-color .2s, color .2s; }
.pma-share-btn:hover { border-color: var(--pmx-primary); color: var(--pmx-primary-text); }

/* Autorenbox */
.pma-author-box { display: flex; align-items: flex-start; gap: 20px; padding: 28px; border-radius: 14px; background: var(--pmx-bg); }
.pma-author-copy { display: flex; flex-direction: column; gap: 6px; }
.pma-author-name { font-family: var(--pmx-head); font-size: 20px; font-weight: 700; color: var(--pmx-ink); text-decoration: none; }
.pma-author-name:hover { color: var(--pmx-primary-text); }
.pma-author-bio { margin: 0; font-size: 15px; line-height: 1.6; color: var(--pmx-muted); }

/* Weitere Artikel */
.pma-related-head { display: flex; flex-direction: column; gap: 6px; }

/* Tablet */
@media (max-width: 1024px) {
	.pma-title { font-size: 34px; }
	.pma-figure { height: 400px; }
	.pma-layout { flex-direction: column; gap: 32px; }
	.pma-body { width: 100%; padding: 40px 48px; }
	.pma-side { flex: 1 1 auto; width: 100%; }
	.pma-toc-side { display: none; }
	.pma-toc-inline { display: flex; }
}
/* Mobil */
@media (max-width: 767px) {
	.pma-hero { padding: 36px 0 96px; }
	.pma-title { font-size: 28px; }
	.pma-figure-wrap { margin-top: -72px; }
	.pma-figure { height: 220px; border-radius: 14px; }
	.pma-layout { padding-top: 28px; padding-bottom: 48px; }
	.pma-body { padding: 24px 20px; gap: 28px; border-radius: 14px; }
	.pma-prose { font-size: 17px; }
	.pma-prose h2 { font-size: 23px; }
	.pma-prose h3 { font-size: 20px; }
	.pma-author-box { flex-direction: column; padding: 22px; }
}

/* FAQ (Rank Math) */
.pma-prose .rank-math-list { display: flex; flex-direction: column; gap: 12px; }
.pma-prose .rank-math-list-item { padding: 20px 24px; border: 1px solid var(--pmx-line); border-radius: 12px; background: var(--pmx-bg); }
.pma-prose .rank-math-question { margin: 0 0 8px; font-family: var(--pmx-head); font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--pmx-ink); }
.pma-prose .rank-math-answer p { margin: 0; font-size: 16px; line-height: 1.65; }
.pma-prose .wp-block-image { margin-left: 0; margin-right: 0; }
.pma-prose .wp-element-caption { margin-top: 8px; font-size: 13px; color: var(--pmx-muted); }