PM-Vorschau: Workflow oben + farbig, Metadaten, saubere Inhalts-Typografie

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Kevin Adametz 2026-06-12 15:16:52 +00:00
parent b7145512a7
commit 5a8da0c1f4
6 changed files with 318 additions and 44 deletions

View file

@ -81,6 +81,87 @@
flex-wrap: wrap;
}
/* ============================================================
* PM-Inhalt (gerenderter Editor-HTML in Vorschau/Detail)
*
* Die Detailseiten nutzten `prose`-Klassen, aber das
* Tailwind-Typography-Plugin ist nicht installiert der Text
* erschien deshalb unformatiert. Diese Klasse bildet die
* Editor-Typografie nach (Absätze, Listen, Zwischenüberschriften,
* Links), ohne eine neue Abhängigkeit einzuführen.
* ============================================================ */
.pr-content {
font-size: 14.5px;
line-height: 1.7;
color: var(--color-ink);
}
.pr-content p {
margin: 0 0 1em;
}
.pr-content p:last-child {
margin-bottom: 0;
}
.pr-content h2,
.pr-content h3,
.pr-content h4 {
color: var(--color-ink);
font-weight: 700;
letter-spacing: -0.2px;
line-height: 1.3;
margin: 1.6em 0 0.6em;
}
.pr-content h2 {
font-size: 19px;
}
.pr-content h3 {
font-size: 16.5px;
}
.pr-content h4 {
font-size: 15px;
}
.pr-content h2:first-child,
.pr-content h3:first-child,
.pr-content h4:first-child {
margin-top: 0;
}
.pr-content ul,
.pr-content ol {
margin: 0 0 1em;
padding-inline-start: 1.4em;
}
.pr-content ul {
list-style: disc;
}
.pr-content ol {
list-style: decimal;
}
.pr-content li {
margin: 0.3em 0;
}
.pr-content a {
color: var(--color-hub);
text-decoration: underline;
text-underline-offset: 2px;
}
.pr-content strong,
.pr-content b {
font-weight: 700;
color: var(--color-ink);
}
.pr-content blockquote {
margin: 1em 0;
padding: 0.2em 0 0.2em 1em;
border-left: 3px solid var(--color-hub-soft-2);
color: var(--color-ink-2);
font-style: italic;
}
.pr-content hr {
margin: 1.5em 0;
border: 0;
border-top: 1px solid var(--color-bg-rule);
}
/* ============================================================
* Stat-Cards (KPI-Karten mit farbigem Strip links)
* ============================================================ */