/*
 * Die Website auf dem gemeinsamen Designsystem (tokens.css).
 *
 * kombi.css ist hier mechanisch normalisiert, wie app.css: Größen auf die Skala,
 * Stärken auf 400 und 500, Abstände aufs 4-px-Raster. Diese Datei trägt die Gestaltung.
 *
 * Aufbau, gemessen an Linear, Vercel und Neon:
 *   - Alles steht links auf derselben Kante, in 1200 px Breite.
 *   - Der Kopf zeigt das echte Dashboard, keine Attrappe und keinen Effekt.
 *   - Abschnittsköpfe: Satz links, Erklärung rechts, Abstand 128 px.
 *   - Eine einzige Pause im Rhythmus: das Waldgrün mit der Berichtsseite.
 *   - Der grüne Faden ist auch wörtlich da: eine feine Linie am linken Rand, die
 *     beim Scrollen alle Abschnitte verbindet (signal.js).
 *
 * Verworfen aus der ersten Fassung: Koralle als zweite Farbe, die kursive Serife
 * und die Kachel vor dem wechselnden Wort. Eine Schrift, eine Farbe.
 */

/* ── Tokens für kombi.css ────────────────────────────────────────────────── */
:root, .navy, .post-cta {
  --sans: var(--font); --mono: var(--font-mono); --serif: var(--font); --logo: var(--font-logo);

  --bg: var(--g-950); --panel: var(--g-850); --panel-2: var(--g-850); --panel-3: var(--g-800);
  --card: var(--g-850); --fill: rgba(200, 235, 215, .06); --fill-2: rgba(200, 235, 215, .1);
  --border: rgba(200, 235, 215, .09); --border-2: rgba(200, 235, 215, .15);
  --fg: var(--g-100); --fg-strong: var(--g-100); --fg-2: var(--g-400); --fg-3: var(--g-500);

  --accent: var(--mint); --accent-t: rgba(92, 237, 163, .1); --accent-word: var(--mint);
  --logo-o: var(--mint); --brand: var(--mint); --brand-h: var(--mint-h); --brand-ink: var(--mint-ink);

  /* Kein Rot: In den Attrappen zeigt ein Punkt den Schweregrad, die Schrift bleibt neutral. */
  --red: var(--g-100); --red-t: rgba(200, 235, 215, .06);
  --high: var(--g-100); --high-t: rgba(200, 235, 215, .06);
  --amber: var(--g-100); --amber-t: rgba(200, 235, 215, .06);
  --green: var(--g-100); --green-t: rgba(200, 235, 215, .06);

  --code-bg: var(--g-950); --hi-bg: var(--g-850); --mark: rgba(92, 237, 163, .035);
  --w-card: var(--g-900); --w-body: var(--g-900); --w-pill: var(--g-800);
  --announce-bg: var(--g-900);
  --w: 1200px;
  color-scheme: dark;
}

/* ── Grundlage ───────────────────────────────────────────────────────────── */
body { font: 400 16px/24px var(--font); letter-spacing: -.011em; }
::selection { background: rgba(92, 237, 163, .28); color: var(--g-100); }
:focus-visible { outline-color: var(--mint); }

/* ── Kopfzeile ───────────────────────────────────────────────────────────── */
.announce { min-height: 36px; padding: var(--s-1) var(--s-12); font-size: 13px; color: var(--fg-2); }
.announce .tag { padding: 0 6px; border-radius: var(--r-s); font: 500 12px/18px var(--font); letter-spacing: 0; color: var(--mint); background: var(--accent-t); }
.top { height: 64px; background: color-mix(in srgb, var(--bg) 80%, transparent); }
.nav a, .top-r a:not(.btn) { height: 32px; padding: 0 var(--s-3); border-radius: var(--r-m); font-size: 14px; }
.logo { font-size: 16px; }
.btn { height: 40px; padding: 0 var(--s-4); gap: var(--s-2); border-radius: var(--r-m); font: 500 14px/20px var(--font); letter-spacing: -.006em; }
.btn:hover { gap: var(--s-2); }
.btn-ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--border-2); }
.btn-ghost:hover { background: var(--fill); }
.btn-lg { height: 44px; padding: 0 var(--s-5); font-size: 14px; }
.top .btn { height: 32px; padding: 0 var(--s-3); border-radius: var(--r-m); font-size: 14px; }

/* ── Kopf ────────────────────────────────────────────────────────────────── */
.hero-product { padding-top: var(--s-24); }
.hero-product::after {
  background: linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 88%, transparent) 26%, color-mix(in srgb, var(--bg) 50%, transparent) 44%, color-mix(in srgb, var(--bg) 40%, transparent) 62%, var(--bg) 92%);
}
.hero-product .h1 { max-width: none; font-size: var(--t-64); line-height: 68px; font-weight: 500; letter-spacing: -.032em; text-wrap: initial; }
.rot { display: inline-grid; justify-items: start; vertical-align: baseline; color: var(--mint); }
.rot > span { grid-area: 1 / 1; white-space: nowrap; filter: none; }
.hero-sub { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-12); align-items: end; margin-top: var(--s-6); }
.lead { max-width: 560px; margin: 0; font-size: 18px; line-height: 28px; letter-spacing: -.014em; color: var(--fg-2); }
.hero-act .btn-row { margin: 0; flex-wrap: nowrap; }

.shot { position: relative; margin: var(--s-16) 0 0; height: 640px; overflow: hidden; border-radius: var(--r-l) var(--r-l) 0 0; box-shadow: 0 0 0 1px var(--border-2), 0 -32px 96px -32px rgba(92, 237, 163, .16); }
.shot img { display: block; width: 100%; height: auto; }
.shot::after { content: ""; position: absolute; inset: auto 0 0 0; height: 160px; background: linear-gradient(180deg, transparent, var(--bg)); }

@media (prefers-reduced-motion: no-preference) {
  @keyframes rise { from { opacity: 0; transform: translateY(12px); } }
  .hero-product .h1, .hero-sub, .shot { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-sub { animation-delay: .08s; }
  .shot { animation-delay: .18s; }
}

/* ── Zeile mit den Schlüsseln ────────────────────────────────────────────── */
.logos { padding: var(--s-16) 0 0; text-align: left; }
.logos .wrap { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--s-8); align-items: center; }
.logos-h { font-size: 14px; line-height: 20px; color: var(--fg-2); }
.logos-row { max-width: none; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
.logos-row li { align-items: flex-start; gap: var(--s-1); padding-left: var(--s-5); border-left: 1px solid var(--border); }
.logos-row b { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: -.006em; color: var(--fg); }
.logos-row .pfx { font: 400 12px/16px var(--font-mono); color: var(--fg-3); white-space: nowrap; }

/* ── Abschnitte ──────────────────────────────────────────────────────────── */
.sec { padding-top: var(--s-32); }
.sec-first { padding-top: var(--s-32); }
.h2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-12); max-width: none; font-size: var(--t-44); line-height: 48px; font-weight: 500; letter-spacing: -.028em; color: var(--fg); text-wrap: balance; }
.h2 span { display: block; align-self: end; max-width: 520px; font-size: 16px; line-height: 24px; font-weight: 400; letter-spacing: -.011em; color: var(--fg-2); text-wrap: pretty; }
.h2-solo { display: block; }
.faq-head .h2 { display: block; font-size: var(--t-32); line-height: 40px; letter-spacing: -.024em; }
.faq-head p { margin-top: var(--s-3); }
.sec-more { margin-top: var(--s-5); font-size: 14px; color: var(--fg-2); }

/* ── Rundgang ────────────────────────────────────────────────────────────── */
.walk { align-items: stretch; text-align: left; }
.walk .h2 { margin: 0 0 var(--s-10); width: 100%; }
.pills { align-self: flex-start; margin: 0; padding: var(--s-1); gap: 2px; border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--border); background: none; }
.pill { height: 32px; padding: 0 var(--s-3); border-radius: var(--r-s); font-size: 13px; }
.pill[aria-selected="true"] { background: var(--fill-2); box-shadow: none; }
.prog { left: var(--s-3); right: var(--s-3); background: var(--mint); }
.walk.auto .pill[aria-selected="true"] .prog { opacity: 1; }
.browser { max-width: none; margin-top: var(--s-4); border-radius: var(--r-l); box-shadow: 0 0 0 1px var(--border-2); }
.bbar { height: 40px; }
.walk-caps { text-align: left; max-width: 640px; margin-top: var(--s-5); }
.walk-cap { font-size: 14px; line-height: 22px; }
.sec-first .facts { margin-top: var(--s-16); }
.facts { border-radius: var(--r-l); background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.facts-row { grid-template-columns: 240px repeat(4, minmax(0, 1fr)); }
.facts-label { font-size: 13px; line-height: 20px; letter-spacing: 0; text-transform: none; color: var(--fg-3); }
.facts-label p { font-size: 13px; line-height: 20px; color: var(--fg-2); }
.fcell { align-items: flex-start; text-align: left; }
.fcell.txt b, .fcell b { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: -.006em; }
.fcell small, .fcell.txt small { font-size: 13px; line-height: 20px; letter-spacing: 0; text-transform: none; color: var(--fg-3); }

/* Schweregrade in den Attrappen: Punkt und Wort. */
.chip-crit, .chip-high, .chip-med, .chip-low { background: none; padding: 0; gap: 6px; font-family: var(--font); font-weight: 500; letter-spacing: 0; text-transform: capitalize; color: var(--fg); }
.chip-crit::before, .chip-high::before, .chip-med::before, .chip-low::before { content: ""; width: 6px; height: 6px; border-radius: 999px; }
.chip-crit::before { background: var(--sev-critical); } .chip-high::before { background: var(--sev-high); }
.chip-med::before { background: var(--sev-medium); } .chip-low::before { background: var(--sev-low); }
.chip-ok { color: var(--mint); background: var(--accent-t); }
.bside-n.on { color: var(--fg); background: var(--fill-2); }
.count .k { color: var(--fg-2); letter-spacing: 0; text-transform: capitalize; font-family: var(--font); }
.code .hot { background: rgba(92, 237, 163, .07); box-shadow: inset 2px 0 0 var(--mint); }
.code .str, .code .note { color: var(--mint); }
.code .kw { color: var(--fg-2); }
.code .note { margin: 0; font-size: inherit; line-height: inherit; }

/* ── Fund-Board ──────────────────────────────────────────────────────────── */
#proof .h2 { margin-bottom: var(--s-10); }
.appwin { margin-top: 0; border-radius: var(--r-l); background: var(--g-900); box-shadow: 0 0 0 1px var(--border-2); }
.col { background: none; }
.icard { background: var(--g-850); box-shadow: none; }

/* ── Das Waldgrün ────────────────────────────────────────────────────────────
 * Die eine Pause im Rhythmus der Seite und zugleich die stärkste Fläche in der
 * Markenfarbe. Darauf liegt, was der Kunde wirklich in der Hand hält. */
.band { margin-top: var(--s-32); background: var(--forest-deep); box-shadow: inset 0 1px 0 rgba(92, 237, 163, .14), inset 0 -1px 0 rgba(92, 237, 163, .14); }
.band-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-16); align-items: center; padding-top: var(--s-24); padding-bottom: var(--s-24); }
.band .h2 { color: #fff; }
.band-lead { margin-top: var(--s-4); max-width: 480px; font-size: 16px; line-height: 24px; color: #a9c4b6; }
.paper-list { margin-top: var(--s-8); border-top: 1px solid rgba(255, 255, 255, .12); }
.paper-list li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid rgba(255, 255, 255, .12); font-size: 14px; line-height: 20px; color: #a9c4b6; }
.paper-list b { font-weight: 500; color: #fff; }
.band .sec-more { color: var(--mint); }
.band .sec-more:hover { color: var(--mint-h); }

.sheets { position: relative; padding: 0 0 var(--s-5) var(--s-5); }
.sheet { position: relative; padding: var(--s-10); border-radius: var(--r-s); background: #f6f8f6; color: #0c1f17; box-shadow: 0 24px 64px -24px rgba(0, 0, 0, .6); font-size: 12px; line-height: 18px; letter-spacing: -.004em; }
.sheet-back { position: absolute; inset: var(--s-5) var(--s-5) 0 0; padding: 0; background: #c9dbd0; box-shadow: none; }
.sheet-brand { display: flex; justify-content: space-between; align-items: center; color: #64766c; }
.sheet-brand img { display: block; height: 14px; width: auto; }
.sheet h3 { margin-top: var(--s-10); font-size: 24px; line-height: 32px; font-weight: 500; letter-spacing: -.02em; }
.sheet-for { color: #4a5c53; font-size: 13px; }
.sheet h4 { margin-top: var(--s-6); padding-bottom: var(--s-2); border-bottom: 1px solid #d3dcd6; font-size: 12px; font-weight: 500; }
.sheet-note { margin-top: var(--s-2); color: #4a5c53; }
.sheet-table { width: 100%; border-collapse: collapse; }
.sheet-table td { padding: var(--s-2) var(--s-3) var(--s-2) 0; border-bottom: 1px solid #e2e9e4; vertical-align: top; }
.sheet-table td:first-child { font-family: var(--font-mono); color: #64766c; white-space: nowrap; }
.sheet-table td:nth-child(3), .sheet-table td:last-child { white-space: nowrap; color: #4a5c53; }
.sheet-table td:last-child { padding-right: 0; text-align: right; }
.d { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 999px; vertical-align: 1px; }
.d.c { background: #d95050; } .d.h { background: #dc8a3a; } .d.m { background: #d0ad32; }

/* ── Grenzen und Vertrauen: Raster aus Haarlinien ────────────────────────── */
.ctl-grid { margin-top: var(--s-10); gap: 0; border-radius: var(--r-l); box-shadow: 0 0 0 1px var(--border); overflow: hidden; }
.ctl { min-height: 0; padding: var(--s-6); border: 0; border-radius: 0; background: none; box-shadow: 1px 0 0 var(--border), 0 1px 0 var(--border); }
.ctl h3 { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: -.006em; }
.ctl p { margin-top: var(--s-1); font-size: 14px; line-height: 20px; color: var(--fg-2); }
.ctl .sec-more { margin-top: var(--s-3); font-size: 13px; }
.ctl .ctl-viz { min-height: 64px; }
.mchips span { padding: 0 var(--s-2); height: 24px; display: inline-flex; align-items: center; border-radius: var(--r-s); background: none; box-shadow: inset 0 0 0 1px var(--border-2); font: 400 12px/16px var(--font-mono); color: var(--fg-2); }

/* ── Vergleich ───────────────────────────────────────────────────────────── */
.tpanel { margin-top: var(--s-10); border-radius: var(--r-l); background: none; border-color: var(--border); }
.tbl { font-size: 14px; line-height: 20px; }
.tbl th, .tbl td { height: 56px; padding: var(--s-3) var(--s-6); vertical-align: middle; }
.tbl thead th { height: 48px; padding: var(--s-2) var(--s-6); font: 500 13px/20px var(--font); letter-spacing: 0; text-transform: none; color: var(--fg-3); }
.tbl tbody th { font-weight: 400; color: var(--fg-2); }
.tbl .them { color: var(--fg-2); }
.tbl .us, .tbl thead .us { background: var(--forest-deep); color: var(--g-100); }
.tbl td.us .i { color: var(--mint); }
.tbl tbody tr:first-child th, .tbl tbody tr:first-child td { height: 80px; }
.tbl tbody tr:first-child td.them { font-size: 18px; line-height: 28px; letter-spacing: -.014em; color: var(--fg); }
.tbl tbody tr:first-child td.us { font-size: 32px; line-height: 40px; font-weight: 500; letter-spacing: -.024em; font-variant-numeric: tabular-nums; }
.tbl tbody tr:first-child td.us .i { display: none; }
.note { margin-top: var(--s-5); max-width: 640px; font-size: 14px; line-height: 22px; }
.facts-pipe { margin-top: var(--s-8); }

/* ── Preis ───────────────────────────────────────────────────────────────── */
.pcard { margin-top: var(--s-10); border-radius: var(--r-l); background: none; border-color: var(--border); }
.pcard-r { background: var(--g-850); }
.eyebrow { font: 500 13px/20px var(--font); letter-spacing: 0; text-transform: none; color: var(--fg-3); }
/* Bezahlt wird in einer Reihenfolge, nicht in Mengen: Darum ein Faden mit drei
   Knoten statt Balken, und Farbe nur an dem einen Schritt, der etwas kostet. */
.pcard-l { display: flex; flex-direction: column; }
.pay { flex: 1; display: grid; grid-auto-rows: 1fr; gap: var(--s-6); margin: var(--s-8) 0 0; padding: 0; list-style: none; }
.pay li { position: relative; padding-left: var(--s-6); }
.pay li::before { content: ""; position: absolute; left: 0; top: 8px; width: 9px; height: 9px; border-radius: 999px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--g-500); }
.pay li:not(:last-child)::after { content: ""; position: absolute; left: 4px; top: 21px; bottom: -28px; width: 1px; background: var(--border); }
.pay .due::before { background: var(--mint); box-shadow: 0 0 0 4px rgba(92, 237, 163, .16); }
.pay-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); }
.pay h3 { font-size: var(--t-16); line-height: 24px; font-weight: 500; }
.pay-price { font-size: var(--t-16); line-height: 24px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--fg-2); }
.pay .due .pay-price { color: var(--mint); }
.pay p { margin-top: var(--s-2); font-size: var(--t-14); line-height: 22px; color: var(--fg-2); }
.pay .when { font-size: var(--t-13); line-height: 20px; font-weight: 500; color: var(--fg); }
.pay .due .when { color: var(--mint); }
.price1 b { font-size: var(--t-64); line-height: 64px; font-weight: 500; letter-spacing: -.04em; }
.chip { font-family: var(--font); letter-spacing: 0; text-transform: none; }

/* ── Fragen ──────────────────────────────────────────────────────────────── */
.qa summary { padding: var(--s-4) 0; font-size: 14px; line-height: 20px; font-weight: 500; }
.ans { font-size: 14px; line-height: 22px; color: var(--fg-2); }

/* ── Schluss ─────────────────────────────────────────────────────────────── */
.cta { margin-top: var(--s-32); padding: var(--s-32) var(--s-6); border-top: 1px solid var(--border); }
.cta::before {
  inset: 0; left: 0; right: 0; top: 0; height: auto; filter: none; z-index: -1;
  background:
    repeating-linear-gradient(90deg, var(--bg) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(0deg, var(--bg) 0 2px, transparent 2px 9px),
    none;
  opacity: .9;
}
.cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 50% 44%, var(--bg) 30%, transparent 100%), linear-gradient(180deg, var(--bg), transparent 30%); }
.cta-mark { width: 48px; height: 48px; margin-bottom: var(--s-6); border-radius: var(--r-l); box-shadow: none; }
.cta h2 { font-size: var(--t-44); line-height: 48px; font-weight: 500; letter-spacing: -.028em; }
.cta .accent { font-family: var(--font); font-style: normal; font-size: inherit; font-weight: 500; letter-spacing: inherit; }
.cta p { max-width: 520px; font-size: 16px; line-height: 24px; }
.theme-btn { display: none; }
.foot { font-size: 14px; }
.foot h4 { font: 500 13px/20px var(--font); letter-spacing: 0; text-transform: none; color: var(--fg-3); }

/* ── Der grüne Faden ─────────────────────────────────────────────────────────
 * Eine Linie von 1 px am linken Rand, die alle Abschnitte verbindet und sich beim
 * Scrollen mit Mint füllt. Jeder Abschnitt hat seinen Knoten. Erst ab 1360 px, darunter
 * ist kein Rand frei. */
.thread { display: none; }
@media (min-width: 1360px) {
  main { position: relative; }
  .thread { display: block; position: absolute; z-index: 3; left: calc(50% - 600px - 36px); width: 1px; background: var(--border); pointer-events: none; }
  .thread i { position: absolute; left: 0; top: 0; width: 1px; background: var(--mint); transform-origin: 0 0; transform: scaleY(0); }
  .thread b { position: absolute; left: -2px; width: 5px; height: 5px; background: var(--g-600); transition: background-color .25s; }
  .thread b.on { background: var(--mint); }
}

/* ── Einwilligung ────────────────────────────────────────────────────────────
 * Attrappe. Auf der echten Seite wären es `--cc-*` in consent.css. Beide Knöpfe
 * gleich stark, das ist Rechtsfrage. */
.consent { position: fixed; z-index: 60; right: var(--s-4); bottom: var(--s-4); width: min(360px, calc(100vw - 32px)); padding: var(--s-4); border-radius: var(--r-l); background: var(--g-800); box-shadow: 0 0 0 1px var(--border-2), 0 16px 48px -16px rgba(0, 0, 0, .8); font-size: 13px; line-height: 20px; color: var(--fg-2); }
.consent[hidden] { display: none; }
.consent b { display: block; margin-bottom: var(--s-1); font-weight: 500; color: var(--fg); }
.consent-row { display: flex; gap: var(--s-2); margin-top: var(--s-3); }
.consent-row .btn { height: 32px; padding: 0 var(--s-3); font-size: 13px; }
.consent-row .quiet { margin-left: auto; background: none; color: var(--fg-3); box-shadow: none; }
.consent-row .quiet:hover { color: var(--fg); }

/* ── Schmal ──────────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .hero-sub { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); align-items: start; }
  .hero-act .btn-row { flex-direction: row-reverse; justify-content: flex-end; }
  .shot { height: 460px; }
  .h2 { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .band-in { grid-template-columns: minmax(0, 1fr); gap: var(--s-10); padding-top: var(--s-16); padding-bottom: var(--s-16); }
  .logos .wrap { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .facts-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .hero-product { padding-top: var(--s-12); }
  .hero-product .h1 { font-size: 40px; line-height: 44px; }
  .hero-product .h1 br { display: none; }
  .rot { display: grid; }
  .lead { font-size: 16px; line-height: 24px; }
  .shot { height: 280px; margin-top: var(--s-10); }
  .h2, .cta h2 { font-size: var(--t-32); line-height: 36px; }
  .sec, .sec-first { padding-top: var(--s-24); }
  .band, .cta { margin-top: var(--s-24); }
  .logos-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) 0; }
  .sheet { padding: var(--s-6); }
  .paper-list li { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .tbl th, .tbl td { padding: var(--s-3) var(--s-4); }
  .cta { padding: var(--s-24) var(--s-6); }
}
@media (prefers-reduced-motion: reduce) { .hero-product .h1, .hero-sub, .shot { animation: none; } }

/* ── Attrappen: dieselbe Sprache wie die echte App ───────────────────────── */
.bside-g { padding-top: var(--s-4); font: 500 12px/16px var(--font); letter-spacing: 0; text-transform: none; color: var(--fg-3); }
.m-label, .col-h, .ro, .pcard-foot { font-family: var(--font); font-size: 12px; line-height: 16px; letter-spacing: 0; text-transform: none; }
.col-h b { font-family: var(--font); }
.icard .id { font-size: 12px; }
.pcard-foot { color: var(--fg-3); }
.m-btn { border-radius: var(--r-m); font: 500 13px/16px var(--font); }

/* Die Wortmarke behält ihre Form. Sonst gibt es keine Versalien mehr: gesperrte
   Großbuchstaben in Mono lasen sich wie ein Terminal, nicht wie ein Produkt. */
.logo { text-transform: uppercase; letter-spacing: .005em; }

/* Der Vergleich muss auf dem Telefon ohne seitliches Scrollen stehen. Mit fester
   Mindestbreite lag die Spalte, um die es geht, außerhalb des Bildes. */
@media (max-width: 640px) {
  .tpanel { overflow: hidden; }
  .tbl { min-width: 0; table-layout: fixed; font-size: 13px; line-height: 20px; }
  .tbl th, .tbl td { padding: var(--s-3); }
  .tbl tbody th { width: 36%; }
  .tbl thead th { font-size: 12px; padding: var(--s-2) var(--s-3); }
  .tbl .logo { font-size: 12px; }
  .tbl tbody tr:first-child td.them { font-size: 13px; line-height: 20px; }
  .tbl tbody tr:first-child td.us { font-size: 24px; line-height: 32px; }
  .tbl td.us .i { display: none; }
}

/* ── Unterseiten ─────────────────────────────────────────────────────────── */
.h1 { max-width: 16em; font-size: var(--t-64); line-height: 68px; font-weight: 500; letter-spacing: -.032em; }
.hero-in { padding-top: var(--s-24); padding-bottom: var(--s-16); }
.hero .lead { margin-top: var(--s-6); }
.hero-in .btn-row { margin-top: var(--s-8); }
.hero-in .eyebrow { margin-bottom: var(--s-4); }
@media (max-width: 640px) { .h1 { font-size: 40px; line-height: 44px; } }

/* Akzentwort: Mint, dieselbe Schrift, nicht kursiv. */
.accent, .quote .big, .post-cta p.big, .feature h2 em { font-family: var(--font); font-style: normal; font-weight: 500; font-size: inherit; letter-spacing: inherit; }
.hero .h1 em { font-style: normal; }

/* API-Tafel und Aufruf im Artikel: Waldgrün wie das Band auf der Startseite, ohne
   Verläufe und Lichtflecken. Linksbündig auf derselben Kante. */
.navy { background: var(--forest-deep); text-align: left; box-shadow: inset 0 0 0 1px rgba(92, 237, 163, .14); }
.navy::before, .navy::after { display: none; }
.navy .h2 { display: block; margin: 0; color: #fff; }
.navy .h2 span { margin: var(--s-3) 0 0; color: #a9c4b6; }
.navy .eyebrow { color: var(--mint); }
.api-icons { justify-content: flex-start; }
.api-ic { border-radius: var(--r-m); }
.api-ic[aria-pressed="true"] { background: var(--mint); color: var(--mint-ink); box-shadow: none; }
.api-say { text-align: left; }
.api-say .disp { font-family: var(--font); font-style: normal; font-size: var(--t-24); line-height: 32px; font-weight: 500; letter-spacing: -.02em; color: #fff; }
.api-json { margin-inline: 0; text-align: left; background: var(--g-950); }
.post-cta { background: var(--forest-deep); box-shadow: inset 0 0 0 1px rgba(92, 237, 163, .14); border: 0; }
.post-cta .eyebrow { color: var(--mint); }
.plan.hi { background: var(--g-850); border-color: rgba(92, 237, 163, .3); box-shadow: none; }

/* API-Tafel: alles auf der linken Kante. */
.navy .note, .navy .links, .navy .api-say, .navy .api-say * { text-align: left; }
.navy .note { margin-inline: 0; color: #a9c4b6; }
.navy .links { justify-content: flex-start; }
.navy .sec-more { color: var(--mint); }
.api-say code { background: rgba(255, 255, 255, .08); color: #e8efea; }

/* Textseiten: linke Kante wie überall, kein Kursiv, gleiche Skala. */
.doc-head { max-width: none; padding-top: var(--s-24); text-align: left; }
.doc-head h1, .doc-head h1.serif { max-width: 16em; font: 500 var(--t-44)/48px var(--font); letter-spacing: -.028em; text-wrap: balance; }
.doc-head h1 em { font-style: normal; color: var(--mint); }
.doc-head .lead { margin: var(--s-4) 0 0; }
.doc-meta { font: 400 13px/20px var(--font); color: var(--fg-3); }
.doc-head .frame { max-width: 960px; margin-top: var(--s-8); border-radius: var(--r-l); }
.prose, .prose.serif { font-family: var(--font); font-size: 16px; line-height: 26px; }
.prose h2, .prose.serif h2 { font: 500 var(--t-24)/32px var(--font); letter-spacing: -.02em; }
.prose h3 { font: 500 var(--t-18)/28px var(--font); letter-spacing: -.014em; }
.letter { font-family: var(--font); font-size: 16px; line-height: 26px; }
.side h4, .ph-n { font-family: var(--font); letter-spacing: 0; }
@media (max-width: 640px) { .doc-head { padding-top: var(--s-12); } .doc-head h1, .doc-head h1.serif { font-size: var(--t-32); line-height: 36px; } }

.plan .when { font-family: var(--font); font-size: 12px; line-height: 16px; }