/* KS CRM — Blog (Übersicht + Artikel). Baut auf site.css auf (Tokens, Nav, Footer, Buttons). */

/* ── Kopf ─────────────────────────────────────────────────── */
.blog-main { padding-block: clamp(40px, 7vw, 88px) clamp(64px, 9vw, 112px); }
.blog-head { max-width: 680px; }
.blog-head h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); line-height: 1.05; letter-spacing: -0.035em; text-wrap: balance; }
.blog-head p { margin-top: 16px; font-size: clamp(1.0625rem, 1.6vw, 1.1875rem); line-height: 1.6; color: var(--body); max-width: 56ch; text-wrap: pretty; }

/* ── Übersicht: Artikelliste mit Haarlinien ─────────────────── */
.post-list { margin-top: clamp(36px, 5vw, 56px); border-top: 1px solid var(--line); }
.post-row {
  position: relative; display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 8px 40px; align-items: baseline;
  padding: 28px 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none;
}
.post-row::before { content: ""; position: absolute; inset: 0 -16px; z-index: -1; border-radius: var(--r-lg); background: var(--app); opacity: 0; transition: opacity .2s ease; }
.post-row:hover::before { opacity: 1; }
.post-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.post-cat { font-size: .875rem; font-weight: 600; color: var(--accent-ink); }
.post-row h2 { font-size: clamp(1.25rem, 2.1vw, 1.625rem); line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; }
.post-row p { grid-column: 2; margin-top: 8px; font-size: 1rem; line-height: 1.6; color: var(--body); max-width: 64ch; text-wrap: pretty; }
.post-go { grid-column: 3; grid-row: 1 / span 2; align-self: center; display: inline-flex; align-items: center; gap: 6px; font-size: .9375rem; font-weight: 500; color: var(--ink); white-space: nowrap; }
.post-go svg { transition: transform .25s var(--ease-out); }
.post-row:hover .post-go svg { transform: translateX(3px); }
@media (max-width: 760px) {
  .post-row { grid-template-columns: 1fr; gap: 6px; padding: 24px 0; }
  .post-row p, .post-go { grid-column: 1; grid-row: auto; }
  .post-go { margin-top: 10px; }
  .post-row::before { inset: 0 -12px; }
}

/* ── Artikel ─────────────────────────────────────────────── */
.post { max-width: 720px; margin-inline: auto; }
.post-back { display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; color: var(--mute); text-decoration: none; }
.post-back:hover { color: var(--ink); }
.post-head { margin-top: 28px; }
.post-head .post-cat { display: inline-block; }
.post-head h1 { margin-top: 12px; font-size: clamp(2rem, 4.6vw, 3.25rem); line-height: 1.08; letter-spacing: -0.035em; text-wrap: balance; }
.post-lead { margin-top: 20px; font-size: clamp(1.125rem, 1.8vw, 1.3125rem); line-height: 1.6; color: var(--body); text-wrap: pretty; }
.post-rule { height: 1px; margin: clamp(32px, 5vw, 48px) 0; background: var(--line); border: 0; }

.prose { font-size: 1.0625rem; line-height: 1.75; color: var(--body); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 2.2em; font-size: clamp(1.375rem, 2.4vw, 1.625rem); line-height: 1.25; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.prose h3 { margin-top: 1.8em; font-size: 1.1875rem; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); }
.prose h2 + *, .prose h3 + * { margin-top: .6em; }
.prose p { text-wrap: pretty; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--accent-ink); text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--accent) 35%, transparent); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: currentColor; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: .45em; }
.prose li::marker { color: var(--quiet); }
.prose blockquote { padding-left: 18px; border-left: 2px solid var(--line); color: var(--ink); font-style: italic; }

/* Vorteilsliste mit Symbol (aus den bestehenden Artikeln) */
.prose .feature-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 22px; margin-top: 1.6em; }
.prose .feature-list li { display: flex; gap: 14px; align-items: flex-start; margin: 0; }
.prose .feature-list li > span { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-top: 2px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); }
.prose .feature-list li > span svg { width: 14px; height: 14px; }
.prose .feature-list h3 { margin: 0; font-size: 1.0625rem; }
.prose .feature-list p { margin-top: 4px; }

/* Vergleichstabelle */
.prose .table-wrap { overflow-x: auto; margin-top: 1.6em; border: 1px solid var(--line); border-radius: var(--r-lg); }
.prose table { width: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.45; }
.prose th, .prose td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.prose thead th { background: var(--app); font-weight: 600; color: var(--ink); border-bottom-color: var(--line); }
.prose tbody tr:last-child td { border-bottom: 0; }
.prose td:first-child { font-weight: 500; color: var(--ink); }
.prose td.yes { color: oklch(0.45 0.12 155); }
.prose td.no { color: oklch(0.5 0.18 25); }
.prose td.partial { color: oklch(0.5 0.12 70); }

/* Abschluss: einheitlicher Aufruf */
.post-cta { margin-top: clamp(48px, 7vw, 72px); padding: clamp(24px, 4vw, 36px); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--app); }
.post-cta h2 { font-size: clamp(1.375rem, 2.4vw, 1.625rem); letter-spacing: -0.02em; }
.post-cta p { margin-top: 8px; color: var(--body); max-width: 52ch; }
.post-cta .btn { margin-top: 20px; }

/* Nav: aktueller Bereich */
.nav-links a[aria-current="page"] { color: var(--ink); font-weight: 600; }

/* Dezentes Einblenden; ohne Animation (reduzierte Bewegung) ist alles sofort sichtbar */
@keyframes blog-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: no-preference) {
  .blog-head, .post-head { animation: blog-in .7s var(--ease-out) both; }
  .post-list, .post-rule { animation: blog-in .8s var(--ease-out) .08s both; }
}

/* ── Screenshots im Artikel: breiter als die Textspalte, damit Full HD lesbar bleibt ── */
.prose figure { margin: 2em 0; }
.prose figure.shot { width: min(1080px, calc(100vw - 2 * var(--gutter))); margin-left: 50%; transform: translateX(-50%); }
.prose figure a { display: block; border-radius: var(--r-lg); outline-offset: 3px; }
.prose figure img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--app); box-shadow: var(--shadow-soft); }
.prose figcaption { max-width: 720px; margin: 12px auto 0; font-size: .875rem; line-height: 1.55; color: var(--mute); text-align: center; text-wrap: pretty; }
.prose figure.shot figcaption { padding-inline: 4px; }

/* Hinweis-/Tipp-Kasten im Text */
.prose .tip { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--app); font-size: .96875rem; }
.prose .tip strong { color: var(--ink); }

/* Schritt-für-Schritt-Listen */
.prose ol.steps { list-style: none; counter-reset: step; padding: 0; }
.prose ol.steps > li { position: relative; padding-left: 40px; counter-increment: step; }
.prose ol.steps > li + li { margin-top: .8em; }
.prose ol.steps > li::before { content: counter(step); position: absolute; left: 0; top: .1em; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; font: 600 .8125rem/1 var(--font-body); }

/* ── Serie: Abschnitt in der Übersicht ── */
.series { margin-top: clamp(40px, 6vw, 64px); }
.series-head h2 { font-size: clamp(1.5rem, 2.6vw, 1.875rem); letter-spacing: -0.025em; }
.series-head p { margin-top: 8px; color: var(--body); max-width: 60ch; }
.series-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0 32px; margin-top: 20px; border-top: 1px solid var(--line); }
.series-row { display: flex; align-items: flex-start; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.series-row:hover .series-text b { color: var(--accent-ink); }
.series-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.series-n { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-top: 1px; border-radius: 8px; background: var(--chip); color: var(--ink); font: 600 .8125rem/1 var(--font-body); font-variant-numeric: tabular-nums; }
.series-text { flex: 1; min-width: 0; }
.series-text b { display: block; font-weight: 600; color: var(--ink); line-height: 1.35; transition: color .15s; }
.series-text span { display: block; margin-top: 3px; font-size: .875rem; line-height: 1.5; color: var(--mute); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.series-row > svg { flex: none; margin-top: 6px; color: var(--quiet); transition: transform .25s var(--ease-out), color .15s; }
.series-row:hover > svg { transform: translateX(3px); color: var(--ink); }
.series ~ .more-head { margin-top: clamp(48px, 7vw, 72px); }
.more-head + .post-list { margin-top: 16px; }
.more-head { font-size: clamp(1.25rem, 2.2vw, 1.5rem); letter-spacing: -0.02em; }

/* ── Serie: Navigation im Artikel ── */
.series-nav { margin-top: clamp(40px, 6vw, 56px); }
.series-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.series-step { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); color: inherit; text-decoration: none; transition: border-color .15s, background-color .15s; }
.series-step:hover { border-color: oklch(0.82 0.01 260); background: var(--app); }
.series-step span { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; color: var(--mute); }
.series-step b { font-weight: 600; color: var(--ink); line-height: 1.35; }
.series-step.next { text-align: right; align-items: flex-end; }
.series-all { margin-top: 12px; border: 1px solid var(--line); border-radius: var(--r-lg); }
.series-all summary { padding: 12px 16px; font-size: .9375rem; font-weight: 500; color: var(--ink); cursor: pointer; }
.series-all ol { list-style: none; margin: 0; padding: 4px 8px 10px; }
.series-all li a { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; color: var(--body); text-decoration: none; font-size: .9375rem; }
.series-all li a:hover { background: var(--app); color: var(--ink); }
.series-all li[aria-current="page"] a { color: var(--ink); font-weight: 600; background: var(--chip); }
.series-all .n { flex: none; width: 22px; font-variant-numeric: tabular-nums; color: var(--quiet); }
@media (max-width: 600px) { .series-pager { grid-template-columns: 1fr; } .series-step.next { text-align: left; align-items: flex-start; } }