/* =========================================================================
   UNTERSEITEN: Erstgespräch und Rechtstexte.
   Baut auf den Tokens aus site.css auf (Farben, Schrift, Abstände, Rundungen, Schatten).
   ========================================================================= */

/* ---- Grundgerüst: Fußzeile sitzt auch bei kurzen Seiten unten ---- */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body > main { flex: 1 0 auto; }

/* ---- Seitenkopf ---- */
.pg-head { padding-block: calc(var(--sec) * 0.75) calc(var(--sec) * 0.6); background: var(--c-tint); }
/* Unterseiten: Inhalt und Fuß sind beide weiß, deshalb trennt hier eine Linie */
.zx-foot { border-top: 1px solid var(--c-line); }
.pg-title { margin: 0; max-width: 18em; font-size: var(--fs-h2); line-height: var(--lh-heading); font-weight: var(--fw-semibold); letter-spacing: var(--ls-heading); color: var(--c-ink); text-wrap: balance; }
.pg-lead { margin: var(--gap-title) 0 0; max-width: 36em; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-body); }

/* ---- Erstgespräch ---- */
.eg { padding-block: calc(var(--sec) * 0.75) var(--sec); }
.eg__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: clamp(32px, 6vw, 96px); align-items: start; }
.eg__h { margin: 0 0 20px; font-size: 22px; line-height: 1.25; font-weight: var(--fw-semibold); letter-spacing: -0.01em; color: var(--c-ink); }

/* Ablauf: echte Reihenfolge, deshalb nummeriert */
.eg__steps { display: grid; margin: 0; padding: 0; list-style: none; counter-reset: eg; border-top: 1px solid var(--c-line); }
.eg__steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 16px; padding-block: 20px; border-bottom: 1px solid var(--c-line); counter-increment: eg; }
.eg__steps li::before { content: counter(eg); grid-row: span 2; font-size: 22px; line-height: 1.2; font-weight: var(--fw-bold); color: var(--c-navy); }
.eg__steps b { font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--c-ink); }
.eg__steps span { font-size: var(--fs-small); line-height: 1.5; color: var(--c-body); }

.eg__trust { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 32px; }
.eg__rating { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs-small); color: var(--c-body); }
.eg__rating b { font-size: 20px; font-weight: var(--fw-bold); color: var(--c-ink); }
.eg__badge { width: auto; height: 34px; }

.eg__people { display: flex; align-items: center; gap: 16px; margin: 40px 0 0; }
.eg__people img { width: 128px; height: auto; padding: 8px 8px 0; border-radius: var(--r-card); background: var(--c-tint); }
.eg__people figcaption { display: grid; gap: 2px; font-size: var(--fs-small); color: var(--c-body); }
.eg__people b { font-weight: var(--fw-semibold); color: var(--c-ink); }
.eg__people figcaption { gap: 10px; }
.eg__people .zx-tag { position: static; translate: none; justify-items: start; text-align: left; white-space: normal; }
.eg__people .zx-tag::after { content: none; }

/* Formular: Vorschau des Heyflow-Formulars (Schritt 1) */
.eg__form { position: relative; overflow: hidden; padding: 32px; border: 1px solid var(--c-line); border-radius: var(--r-card); background: var(--c-surface); box-shadow: var(--shadow-raised); scroll-margin-top: calc(var(--header-h) + 24px); }
.eg__progress { position: absolute; inset: 0 0 auto; height: 3px; background: var(--c-tint); }
.eg__progress i { display: block; width: 33%; height: 100%; background: var(--c-navy); }
.eg__step { margin: 0 0 6px; font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--c-muted); }
.eg__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.eg__field { display: grid; gap: 6px; }
.eg__field label { font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--c-ink); }
.eg__field input { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid #c9d4de; border-radius: var(--r-ui); background: var(--c-surface); color: var(--c-ink); font: inherit; font-size: 16px; }
.eg__field input:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 1px; border-color: var(--c-blue); }
.eg__form .rs-btn { width: 100%; }
.eg__hint { margin: 16px 0 0; font-size: var(--fs-caption); line-height: 1.5; color: var(--c-muted); }
.eg__hint[hidden] { display: none; }
.eg__mail { margin: 20px 0 0; padding-top: 20px; border-top: 1px solid var(--c-line); font-size: var(--fs-small); color: var(--c-body); }
.eg__mail b { font-weight: var(--fw-semibold); color: var(--c-ink); white-space: nowrap; user-select: all; }

@media (max-width: 899px) {
  .eg__grid { grid-template-columns: minmax(0, 1fr); }
  .eg__form { order: -1; }
}
@media (max-width: 559px) {
  .eg__form { padding: 24px 20px; }
  .eg__fields { grid-template-columns: 1fr; }
}

/* ---- Rechtstexte ---- */
.lg { padding-block: calc(var(--sec) * 0.75) var(--sec); }
.lg__in { max-width: 760px; }
.lg__sec + .lg__sec { margin-top: 36px; padding-top: 36px; border-top: 1px solid var(--c-line); }
.lg h2 { margin: 0 0 14px; font-size: 20px; line-height: 1.3; font-weight: var(--fw-semibold); letter-spacing: -0.01em; color: var(--c-ink); }
.lg p { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-body); }
.lg p + p { margin-top: 12px; }
.lg__facts { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 10px 32px; margin: 0; font-size: var(--fs-body); line-height: 1.5; }
.lg__facts dt { color: var(--c-muted); }
.lg__facts dd { margin: 0; color: var(--c-ink); overflow-wrap: anywhere; }
/* Fließtext der Rechtstexte (Datenschutz, AGB): ruhige Lesespalte, Abschnitte mit Luft */
.lg__text h2 { margin: 44px 0 12px; font-size: 20px; }
.lg__text h2:first-child, .lg__text .lg__lead + h2 { margin-top: 0; }
.lg__text h3 { margin: 24px 0 8px; font-size: var(--fs-body); line-height: 1.4; font-weight: var(--fw-semibold); color: var(--c-ink); }
.lg__text p { overflow-wrap: anywhere; }
.lg__text .lg__lead { margin-bottom: 32px; color: var(--c-muted); }
.lg__text ul { margin: 10px 0 12px; padding-left: 1.2em; color: var(--c-body); line-height: var(--lh-body); }
.lg__text li + li { margin-top: 4px; }
.lg__text a { color: var(--c-navy); text-underline-offset: 3px; overflow-wrap: anywhere; }
.lg__note { padding: 20px 24px; border: 1px solid var(--c-line); border-radius: var(--r-card); background: var(--c-tint); }
.lg__note p + p { margin-top: 8px; }
.lg__note a { color: var(--c-navy); font-weight: var(--fw-semibold); text-underline-offset: 3px; }
@media (max-width: 559px) {
  .lg__facts { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .lg__facts dd + dt { margin-top: 12px; }
}

/* Erstgespräch: ein Schritt mit denselben Feldern wie das Pop-up (.zx-f aus site.css), Bestätigung nur in der Vorschau */
.eg__stack { display: grid; gap: 14px; margin-bottom: 20px; }
.eg__form .eg-alert { margin-bottom: 16px; }
.eg__form .eg-bot.is-on { margin-bottom: 16px; }
.eg__note { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--c-muted); text-align: center; }
.eg__note a { color: inherit; }
.eg__done { display: grid; justify-items: start; gap: 14px; }
.eg__done .eg__h { margin: 0; }
.eg__lead { margin: -4px 0 0; font-size: var(--fs-small); line-height: 1.5; color: var(--c-body); }

/* =========================================================================
   INHALTSSEITEN: Klaviyo-Agentur (Landingpage) und Ratgeber (Übersicht + Artikel).
   Erzeugt von tools/content_pages.py aus den Live-Seiten (Wortlaut unverändert, nur die Form ist neu).
   Klassen: ct-* gemeinsam, kl-* nur Klaviyo-Agentur. Baut auf den Tokens aus site.css auf; lokale Variablen
   heißen --ct-*, damit nichts mit globalen Namen kollidiert (Lehre aus „--dur“).
   Bänder wechseln nur die Farbe (Weiß / getönt), keine Trennlinien zwischen Bändern.
   ========================================================================= */
.ct { --ct-read: 720px; }
.ct-band { padding-block: var(--sec); }
.ct-band--kopf { padding-block: calc(var(--sec) * 0.55) calc(var(--sec) * 0.6); background: var(--c-tint); }
.ct-band--text, .ct-band--karten { padding-block: calc(var(--sec) * 0.75) var(--sec); }
.ct-band--intro { padding-top: 0; }
.ct-band--ende { background: var(--c-tint); }
/* „E-Mail“ nie am Bindestrich trennen (Startseite: geschützter Bindestrich; hier bleibt der Wortlaut, nur ein Span) */
.ct-nb { white-space: nowrap; }

/* ---- Brotkrumen: Startseite › Ratgeber › Artikel (Trennzeichen nur per CSS, kein zusätzlicher Text) ---- */
.ct-crumbs { display: flex; flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 36px); font-size: var(--fs-caption); line-height: 1.5; color: var(--c-muted); }
.ct-crumbs ol { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.ct-crumbs li + li::before, .ct-crumbs a + span::before { content: "›"; margin-inline: 10px; color: #9aa4ae; }
.ct-crumbs a { color: var(--c-muted); text-decoration: none; }
.ct-crumbs a:hover { color: var(--c-ink); text-decoration: underline; text-underline-offset: 3px; }
.ct-crumbs [aria-current] { color: var(--c-ink); }

/* ---- Seitenkopf: Rubrik, Überschrift, Einleitung, Herausgeber/Stand ---- */
.ct-head { max-width: 880px; }
.ct-kicker { display: block; margin-bottom: 14px; font-size: var(--fs-small); line-height: 1.4; font-weight: var(--fw-semibold); color: var(--c-muted); }
.ct-head h1, .kl-hero__copy h1 { margin: 0; font-size: var(--fs-h2); line-height: var(--lh-heading); font-weight: var(--fw-semibold); letter-spacing: var(--ls-heading); color: var(--c-ink); text-wrap: balance; }
.ct-lede { margin: 20px 0 0; max-width: 40em; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-body); text-wrap: pretty; }
.ct-byline { margin: 24px 0 0; font-size: var(--fs-caption); line-height: 1.5; color: var(--c-muted); }
.ct-byline a { color: inherit; text-underline-offset: 3px; }
.ct-byline a:hover { color: var(--c-ink); }

/* ---- Artikel: ruhige Lesespalte links, Inhaltsverzeichnis rechts (ab 1100 px mitlaufend) ---- */
.ct-layout { display: grid; grid-template-columns: minmax(0, var(--ct-read)) minmax(220px, 280px); justify-content: space-between; gap: 40px 64px; align-items: start; }
.ct-prose { min-width: 0; font-size: var(--fs-body); line-height: 1.7; color: var(--c-body); }
.ct-prose > section { margin-top: clamp(44px, 4.5vw, 60px); }
.ct-prose h2 { margin: 0 0 16px; font-size: clamp(24px, 2.1vw, 30px); line-height: 1.25; font-weight: var(--fw-semibold); letter-spacing: -0.02em; color: var(--c-ink); text-wrap: balance; }
.ct-prose h3 { margin: 32px 0 8px; font-size: 19px; line-height: 1.4; font-weight: var(--fw-semibold); letter-spacing: -0.01em; color: var(--c-ink); }
.ct-prose p { margin: 0 0 18px; text-wrap: pretty; }
.ct-prose ul, .ct-prose ol { margin: 0 0 22px; padding-left: 1.3em; }
.ct-prose li { margin: 10px 0; padding-left: 4px; }
.ct-prose li::marker { color: var(--c-muted); }
.ct-prose ol > li::marker { font-weight: var(--fw-semibold); color: var(--c-ink); }
.ct-prose strong { font-weight: var(--fw-semibold); color: var(--c-ink); }
.ct-prose a, .ct-intro a, .kl-sec a:not(.rs-btn) { color: var(--c-navy); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.ct-prose a:hover, .ct-intro a:hover, .kl-sec a:not(.rs-btn):hover { color: var(--c-ink); }
.ct-prose code { padding: 1px 6px; border-radius: 4px; background: var(--c-tint); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.86em; color: var(--c-ink); overflow-wrap: anywhere; }

/* „Auf einen Blick“ */
.ct-summary { padding: 24px 28px; border-radius: var(--r-card); background: var(--c-tint); }
.ct-prose .ct-summary h2 { margin: 0 0 8px; font-size: var(--fs-small); line-height: 1.4; letter-spacing: 0; color: var(--c-muted); }
.ct-summary p { margin: 0; color: var(--c-ink); }

/* Tabellen: am Handy innerhalb des Rahmens seitlich scrollbar, die Seite selbst nie */
.ct-table { margin: 26px 0; overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--r-card); background: var(--c-surface); }
.ct-table table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: var(--fs-small); line-height: 1.55; }
.ct-table caption { padding: 14px 18px; border-bottom: 1px solid var(--c-line); text-align: left; font-size: var(--fs-caption); color: var(--c-muted); }
.ct-table th, .ct-table td { padding: 14px 18px; border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: top; }
.ct-table thead th { background: var(--c-tint); font-weight: var(--fw-semibold); color: var(--c-ink); }
.ct-table tbody th { width: 27%; font-weight: var(--fw-semibold); color: var(--c-ink); }
.ct-table tbody tr:last-child > * { border-bottom: 0; }

/* Kästen im Text: Testfall, Briefing-Vorlage */
.ct-box { margin: 26px 0; padding: 24px 28px; border: 1px solid var(--c-line); border-radius: var(--r-card); background: var(--c-surface); box-shadow: var(--shadow-card); }
.ct-box > :last-child { margin-bottom: 0; }
.ct-box > p:first-child { margin-bottom: 10px; }

/* Aufklappbares Beispiel (Newsletter-Entwurf als Bild) */
.ct-example { margin: 26px 0; border: 1px solid var(--c-line); border-radius: var(--r-card); background: var(--c-tint); }
.ct-example > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 22px; border-radius: var(--r-card); cursor: pointer; list-style: none; font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--c-ink); }
.ct-example > summary::-webkit-details-marker { display: none; }
.ct-example > summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-right: 4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--dur-ui) ease; }
.ct-example[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.ct-example figure { margin: 0; padding: 6px 22px 24px; }
.ct-example figure > a { display: block; width: fit-content; max-width: 100%; }
.ct-example figure img { width: 480px; max-width: 100%; border-radius: var(--r-media); box-shadow: var(--shadow-card); }
.ct-example figcaption { margin-top: 16px; max-width: 40em; font-size: var(--fs-caption); line-height: 1.55; color: var(--c-muted); }

/* Quellen am Ende des Artikels */
.ct-prose > .ct-sources { margin-top: clamp(52px, 5vw, 72px); padding-top: 28px; border-top: 1px solid var(--c-line); font-size: var(--fs-small); line-height: 1.6; color: var(--c-muted); }
.ct-prose .ct-sources h2 { margin-bottom: 10px; font-size: var(--fs-body); letter-spacing: 0; }
.ct-sources p { margin-bottom: 12px; }
.ct-sources ul { margin: 0; }
.ct-sources li { margin: 6px 0; }

/* Inhaltsverzeichnis */
.ct-toc { position: sticky; top: calc(var(--header-h) + 32px); font-size: var(--fs-small); line-height: 1.45; }
.ct-toc h2 { margin: 0 0 12px; font-size: var(--fs-caption); line-height: 1.4; font-weight: var(--fw-semibold); color: var(--c-muted); }
.ct-toc ol { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--c-line); }
.ct-toc li a { display: block; margin-left: -1px; padding: 7px 0 7px 16px; border-left: 1px solid transparent; color: var(--c-body); text-decoration: none; transition: color var(--dur-ui) ease, border-color var(--dur-ui) ease; }
.ct-toc li a:hover { border-left-color: var(--c-ink); color: var(--c-ink); }
.ct-toc__cta { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--c-line); }
.ct-toc__cta a { font-weight: var(--fw-semibold); color: var(--c-ink); text-decoration: none; }
.ct-toc__cta a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- Karten: Ratgeber-Übersicht und „Passend zum Thema“ ---- */
.ct-related > h2, .ct-intro h2 { margin: 0 0 var(--gap-title); font-size: var(--fs-h3); line-height: 1.2; font-weight: var(--fw-semibold); letter-spacing: -0.02em; color: var(--c-ink); text-wrap: balance; }
.ct-related > h2 { margin-bottom: clamp(20px, 2.4vw, 32px); }
.ct-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-cards); margin: 0; padding: 0; list-style: none; }
.ct-cards > li { display: flex; min-width: 0; }
.ct-cards a { display: flex; flex-direction: column; width: 100%; padding: var(--pad-card); border: 1px solid var(--c-line); border-radius: var(--r-card); background: var(--c-surface); box-shadow: var(--shadow-card); color: inherit; text-decoration: none; }
.ct-card__label { font-size: var(--fs-caption); line-height: 1.4; font-weight: var(--fw-semibold); color: var(--c-muted); }
.ct-cards h2, .ct-cards h3 { margin: 10px 0 12px; font-size: clamp(20px, 1.7vw, 24px); line-height: 1.3; font-weight: var(--fw-semibold); letter-spacing: -0.015em; color: var(--c-ink); text-wrap: balance; }
.ct-cards p { margin: 0; font-size: var(--fs-small); line-height: 1.6; color: var(--c-body); }
.ct-card__more { margin-top: auto; padding-top: 22px; font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--c-ink); }
.ct-cards a:hover .ct-card__more, .ct-cards a:focus-visible .ct-card__more { text-decoration: underline; text-underline-offset: 3px; }

/* Übersicht: zwei Einstiegstexte nebeneinander */
.ct-band--intro .rs-container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px clamp(40px, 6vw, 96px); }
.ct-intro p { margin: 0; font-size: var(--fs-body); line-height: 1.7; color: var(--c-body); text-wrap: pretty; }
.ct-intro p + p { margin-top: 14px; }

/* ---- Abschluss: Erstgespräch (öffnet das Pop-up, weil der Link auf erstgespraech.html zeigt) ---- */
.ct-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 48px; align-items: center; margin-top: clamp(40px, 5vw, 64px); padding: clamp(28px, 3.6vw, 48px); border-radius: var(--r-card); background: var(--c-surface); box-shadow: var(--shadow-raised); }
.ct-cta h2 { grid-column: 1; margin: 0; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.2; font-weight: var(--fw-semibold); letter-spacing: -0.02em; color: var(--c-ink); text-wrap: balance; }
.ct-cta p { grid-column: 1; margin: 0; max-width: 40em; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-body); }
.ct-cta .rs-btn { grid-column: 2; grid-row: 1 / span 2; }
.ct-band--ende > .rs-container > .ct-cta:first-child { margin-top: 0; }

/* ---- Klaviyo-Agentur: Einstieg wie die Startseite (heller Verlauf, Mail-Collage), dann ruhige Bänder ---- */
.kl-hero { position: relative; isolation: isolate; overflow: clip; padding-block: clamp(24px, 2.6vw, 40px) clamp(40px, 4.4vw, 64px); }
.kl-hero__copy { display: grid; justify-items: start; gap: 20px; max-width: 700px; }
.kl-hero__copy .ct-kicker, .kl-hero__copy .ct-lede { margin: 0; }
.kl-hero__copy h1 { font-size: clamp(36px, 4.2vw, 58px); }
.kl-hero__copy .ct-lede { max-width: 36em; }
.kl-hero__copy .rs-btn { margin-top: 8px; }
.kl-hero .ct-crumbs { margin-bottom: clamp(36px, 5vw, 72px); }
.kl-jump { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: clamp(48px, 6vw, 88px); font-size: var(--fs-small); font-weight: var(--fw-medium); }
.kl-jump a { padding: 8px 0; color: var(--c-body); text-decoration: none; }
.kl-jump a:hover { color: var(--c-ink); text-decoration: underline; text-underline-offset: 4px; }

.kl-sec { padding-block: var(--sec); }
.kl-sec:nth-of-type(even) { background: var(--c-tint); }
/* Standard: Überschrift links, Inhalt rechts (Muster der Team-Überschrift der Startseite) */
.kl-sec__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 clamp(40px, 6vw, 112px); align-items: start; }
.kl-sec__in > h2 { grid-column: 1; grid-row: 1 / span 12; margin: 0; font-size: var(--fs-h2); line-height: var(--lh-heading); font-weight: var(--fw-semibold); letter-spacing: var(--ls-heading); color: var(--c-ink); text-wrap: balance; }
.kl-sec__in > :not(h2) { grid-column: 2; }
.kl-sec__in > p { margin: 0; max-width: 40em; font-size: var(--fs-body); line-height: 1.7; color: var(--c-body); text-wrap: pretty; }
.kl-sec__in > p + p { margin-top: 16px; }
.kl-sec__in > .rs-btn { justify-self: start; margin-top: 32px; }
.kl-sec strong { font-weight: var(--fw-semibold); color: var(--c-ink); }

/* Leistungen: Überschrift + Einleitung nebeneinander, darunter sechs Karten */
.kl-sec--leistungen .kl-sec__in > h2 { grid-row: 1; }
.kl-sec--leistungen .kl-sec__in > p { align-self: end; }
.kl-sec__in > .kl-grid { grid-column: 1 / -1; }
.kl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-cards); margin-top: var(--head); counter-reset: kl-card; }
.kl-card { counter-increment: kl-card; padding: var(--pad-card); border: 1px solid var(--c-line); border-radius: var(--r-card); background: var(--c-surface); box-shadow: var(--shadow-card); }
.kl-card::before { content: counter(kl-card, decimal-leading-zero); display: block; margin-bottom: 18px; font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--c-muted); font-variant-numeric: tabular-nums; }
.kl-card h3 { margin: 0 0 10px; font-size: 20px; line-height: 1.3; font-weight: var(--fw-semibold); letter-spacing: -0.01em; color: var(--c-ink); }
.kl-card p { margin: 0; font-size: var(--fs-small); line-height: 1.65; color: var(--c-body); }

/* Zusammenarbeit: vier Schritte nebeneinander, echte Reihenfolge, deshalb nummeriert */
.kl-sec--ablauf .kl-sec__in { grid-template-columns: minmax(0, 1fr); }
.kl-sec--ablauf .kl-sec__in > * { grid-column: 1; grid-row: auto; }
.kl-sec--ablauf .kl-sec__in > h2 { max-width: 18em; }
.kl-sec--ablauf ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-cards) clamp(20px, 2.4vw, 36px); margin: var(--head) 0 0; padding: 0; list-style: none; counter-reset: kl-step; }
.kl-sec--ablauf li { counter-increment: kl-step; padding-top: 20px; border-top: 1px solid #d5dee6; font-size: var(--fs-small); line-height: 1.65; color: var(--c-body); }
.kl-sec--ablauf li::before { content: counter(kl-step); display: block; margin-bottom: 14px; font-size: 28px; line-height: 1; font-weight: var(--fw-bold); letter-spacing: -0.02em; color: var(--c-ink); }
.kl-sec--ablauf li strong { display: block; margin-bottom: 6px; font-size: var(--fs-body); line-height: 1.4; }
.kl-sec--ablauf ol + p { margin-top: clamp(32px, 3.6vw, 48px); }

/* Fragen: ruhige Aufklapp-Liste */
.kl-sec details { border-bottom: 1px solid var(--c-line); }
.kl-sec h2 + details { border-top: 1px solid var(--c-line); }
.kl-sec summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0; cursor: pointer; list-style: none; font-size: var(--fs-body); line-height: 1.45; font-weight: var(--fw-semibold); color: var(--c-ink); }
.kl-sec summary::-webkit-details-marker { display: none; }
.kl-sec summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat; transition: background-size var(--dur-ui) ease; }
.kl-sec details[open] > summary::after { background-size: 14px 1.5px, 1.5px 0; }
.kl-sec details > p { margin: -4px 0 22px; max-width: 40em; font-size: var(--fs-body); line-height: 1.7; color: var(--c-body); }

/* ---- Breiten ---- */
@media (max-width: 1099px) {
  .ct-layout { grid-template-columns: minmax(0, var(--ct-read)); }
  .ct-toc { position: static; grid-row: 1; padding: 20px 22px; border-radius: var(--r-card); background: var(--c-tint); }
  .ct-toc ol { border-left: 0; }
  .ct-toc li a { margin-left: 0; padding: 6px 0; border-left: 0; }
  .ct-toc__cta { margin-top: 12px; padding-top: 14px; }
}
@media (max-width: 1099px) {
  .kl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kl-sec--ablauf ol { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
}
@media (max-width: 899px) {
  .kl-hero .zx-hero__mails { display: none; }  /* unter 900 px stünde die Collage hinter dem Fließtext */
  .ct-cards, .ct-band--intro .rs-container { grid-template-columns: minmax(0, 1fr); }
  .ct-cta { grid-template-columns: minmax(0, 1fr); }
  .ct-cta .rs-btn { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 14px; }
  .kl-sec__in { grid-template-columns: minmax(0, 1fr); }
  .kl-sec__in > h2 { grid-row: auto; margin-bottom: 24px; }
  .kl-sec__in > :not(h2) { grid-column: 1; }
  .kl-sec--leistungen .kl-sec__in > p { align-self: start; }
}
@media (max-width: 559px) {
  .kl-grid, .kl-sec--ablauf ol { grid-template-columns: minmax(0, 1fr); }
  .kl-hero__copy .rs-btn, .kl-sec__in > .rs-btn, .ct-cta .rs-btn { --btn-px: 20px; width: 100%; white-space: normal; text-align: center; }
  .ct-cta { padding: 24px 20px; }
  .ct-summary, .ct-box { padding: 20px; }
  .ct-example > summary { padding: 14px 16px; }
  .ct-example figure { padding: 4px 16px 20px; }
  .ct-prose h3 { font-size: 17px; }
}

/* Abschluss-Seiten im Live-Repo (/danke/, 404 – erzeugt in rs-website/src/neue_seite.py aus der Impressums-Vorlage) */
.pg-head--ende { display: grid; align-content: center; min-height: 52vh; }
.pg-aktion { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; }
.pg-kennung { margin: 0 0 12px; font-size: var(--fs-small); font-weight: var(--fw-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-blue); }