/* ═══════════════════════════════════════════════════════════════════
blog-v5.css — Inhalts-Styles für Blog-Übersicht, Blog-Posts, Changelog
Design v5 (Archivo/Jost, helle Palette). Lädt NACH v5.css:
v5.css liefert Tokens, Nav (.nav/.dd/.navburger), Footer, .wrap, .crumb,
.eyebrow, .btn. Diese Datei ergänzt NUR die blog-eigenen Inhalts-Styles
plus die Tokens, die v5.css nicht kennt.
═══════════════════════════════════════════════════════════════════ */
/* ── Ergänzende Tokens (v5.css hat --fd/--fb/--canvas/--surface/--off/
--off-deep/--ink/--ink-mid/--muted/--rule/--rule-md/--accent/--accent-lt/
--accent-pale/--pos/--neg). Hier nur, was die Blog-Inhalte zusätzlich
nutzen — gemappt auf die v5-Werte. ── */
:root {
--font-display: var(--fd);
--font-body: var(--fb);
--ff-disp: var(--fd);
--ff-body: var(--fb);
--slate: #463c2c;
--subtle: #6b5a44;
--accent-rule: rgba(130,99,29,0.32);
--pos-pale: rgba(47,108,73,0.12);
--shadow-sm: 0 1px 6px rgba(40,30,12,0.08);
--shadow-md: 0 24px 60px -38px rgba(40,30,12,0.28);
--max: 1240px;
}
/* ── Blog-Übersicht ── */
.blog-header { padding: 64px 56px 48px; max-width: 1280px; margin: 0 auto; }
.blog-header h1 {
font-family: var(--fd); font-size: clamp(36px, 4vw, 52px);
font-weight: 600; letter-spacing: -0.022em; margin: 14px 0 12px; color: var(--ink);
}
.blog-header h1 em { font-style: normal; color: var(--accent); }
.blog-header p { font-size: 19px; color: var(--slate); max-width: 540px; }
.post-grid {
max-width: 1280px; margin: 0 auto; padding: 0 56px 96px;
display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.post-card {
background: var(--surface); border: 1px solid var(--rule-md);
border-radius: 2px; padding: 28px; text-decoration: none; color: inherit;
display: flex; flex-direction: column; gap: 12px;
transition: box-shadow .2s, transform .2s, border-color .2s;
}
.post-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--accent-rule); }
.post-card .card-tag {
font-size: 14px; font-weight: 500; letter-spacing: 0.2em;
text-transform: uppercase; color: var(--accent);
}
.post-card h2 {
font-family: var(--fd); font-size: 23px; font-weight: 600;
line-height: 1.25; letter-spacing: -0.012em; color: var(--ink);
}
.post-card p { font-size: 16px; color: var(--slate); line-height: 1.6; flex: 1; }
.post-card .card-meta { font-size: 15px; color: var(--subtle); margin-top: 4px; }
/* ── Breadcrumb (blog-eigene Klasse, nicht v5 .crumb) ── */
.breadcrumb {
max-width: 780px; margin: 0 auto; padding: 24px 0 0;
font-size: 15px; color: var(--muted);
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb .sep { opacity: 0.4; }
/* ── Post-Layout ── */
.post-wrap { max-width: 780px; margin: 0 auto; padding: 0 56px; }
.post-header { padding: 36px 0 40px; border-bottom: 1px solid var(--rule); margin-bottom: 48px; }
.post-header h1 {
font-family: var(--fd); font-size: clamp(32px, 3.5vw, 44px);
font-weight: 600; line-height: 1.15; letter-spacing: -0.022em;
margin: 14px 0 18px; color: var(--ink);
}
.post-header h1 em { font-style: normal; color: var(--accent); }
.post-meta { display: flex; gap: 20px; font-size: 16px; color: var(--muted); flex-wrap: wrap; }
.post-meta span { display: inline-flex; align-items: center; gap: 6px; }
/* ── Post-Body Typografie ── */
.post-body { padding-bottom: 64px; }
.post-body h2 {
font-family: var(--fd); font-size: 27px; font-weight: 600;
letter-spacing: -0.015em; margin: 52px 0 16px; line-height: 1.25; color: var(--ink);
}
.post-body h3 {
font-family: var(--fd); font-size: 19px; font-weight: 600; margin: 32px 0 10px; color: var(--ink-mid);
}
.post-body p { margin-bottom: 20px; font-size: 19px; line-height: 1.75; color: var(--slate); }
.post-body p:first-child { font-size: 20px; color: var(--ink); font-weight: 400; }
.post-body a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; }
.post-body a:hover { color: var(--accent-lt); }
.post-body strong { color: var(--ink); font-weight: 600; }
.post-body ul, .post-body ol {
margin: 0 0 20px 24px; font-size: 19px; line-height: 1.75; color: var(--slate);
}
.post-body li { margin-bottom: 6px; }
.post-body blockquote {
margin: 36px 0; padding: 20px 24px;
border-left: 3px solid var(--accent);
background: var(--accent-pale); border-radius: 0 8px 8px 0;
font-size: 19px; color: var(--ink-mid); font-style: italic;
}
.post-body table {
width: 100%; border-collapse: collapse; margin: 32px 0; font-size: 17px;
}
.post-body th {
text-align: left; padding: 10px 14px; background: var(--off);
font-size: 14px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--muted); border-bottom: 1px solid var(--off-deep);
}
.post-body td { padding: 12px 14px; border-bottom: 1px solid var(--rule); color: var(--slate); }
.post-body tr:last-child td { border-bottom: none; }
.post-body tr:hover td { background: var(--off); }
/* ── Inline-CTA im Post (dunkles Akzent-Band, Text hell) ── */
.post-cta-box {
margin: 48px 0; padding: 32px 36px;
background: linear-gradient(135deg, #2a2114 0%, #1a160f 100%);
border: 1px solid var(--accent-rule);
border-radius: 2px; color: #f6f1e6;
}
.post-cta-box p { color: rgba(246,241,230,0.82); font-size: 17px; margin-bottom: 20px; }
.post-cta-box h3 {
font-family: var(--fd); font-size: 23px; font-weight: 600;
margin-bottom: 8px; color: #f6f1e6;
}
.post-cta-box .cta-btn {
display: inline-flex; align-items: center; gap: 8px;
background: var(--accent); color: #1a1305; text-decoration: none;
font-size: 17px; font-weight: 500; padding: 12px 22px;
border-radius: 2px; transition: background .2s;
}
.post-cta-box .cta-btn:hover { background: var(--accent-lt); }
/* ── Disclaimer ── */
.post-disclaimer {
margin-top: 56px; padding: 16px 20px;
border: 1px solid var(--rule-md); border-radius: 2px;
font-size: 15px; color: var(--muted); line-height: 1.6;
}
/* ── Theorie→App-Brücke (Callout in den Entscheidungs-Guides) ── */
.guide-bridge {
margin: 22px 0; padding: 13px 18px;
border-left: 3px solid var(--accent-rule);
background: var(--accent-pale); border-radius: 6px;
font-size: 17px; line-height: 1.6; color: var(--ink-mid);
}
/* ── Signatur-Diagramm (Inline-SVG, theme-konsistent) ── */
.chart-figure {
margin: 32px 0; padding: 20px 20px 16px;
background: var(--surface);
border: 1px solid var(--rule); border-radius: 2px;
}
.chart-figure svg { display: block; width: 100%; height: auto; }
.chart-figure figcaption {
margin-top: 12px; padding-top: 12px;
border-top: 1px solid var(--rule);
font-size: 15px; color: var(--muted); line-height: 1.6;
}
.chart-figure figcaption em { color: var(--subtle); font-style: italic; }
/* ── Changelog (/changelog/) ── */
.cl-list { padding-bottom: 8px; }
.cl-entry { padding: 30px 0; border-bottom: 1px solid var(--rule); }
.cl-entry:last-child { border-bottom: none; }
.cl-date { font-family: var(--fb); font-size: 13.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--slate); margin-bottom: 12px; }
.cl-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cl-head h2 { font-family: var(--fd); font-size: 25px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; margin: 0; }
.cl-badge { display: inline-block; font-family: var(--fb); font-size: 12px; font-weight: 600; letter-spacing: 0.03em; padding: 4px 11px; border-radius: 999px; }
.cl-badge.neu { background: var(--accent-pale); color: var(--accent); border: 1px solid var(--accent-rule); }
.cl-badge.verbessert { background: var(--pos-pale); color: var(--pos); border: 1px solid rgba(47,108,73,0.32); }
.cl-entry p { font-size: 18px; line-height: 1.72; color: var(--slate); margin: 14px 0 0; }
.cl-entry ul { margin: 12px 0 0; padding-left: 22px; }
.cl-entry li { font-size: 16.5px; line-height: 1.6; color: var(--slate); margin-bottom: 6px; }
.cl-intro { font-size: 19px; line-height: 1.7; color: var(--slate); margin-top: 16px; max-width: 60ch; }
/* ── Responsive ── */
@media (max-width: 900px) {
.post-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
.blog-header { padding: 40px 20px 32px; }
.post-grid { grid-template-columns: 1fr; padding: 0 20px 64px; }
.post-wrap { padding: 0 20px; }
.cl-head h2 { font-size: 24px; }
}