/* Lead Mapper v2: Seiteninhalt im Design der neuen Landing (/testlanding).
   Werte gemessen auf /testlanding/pricing/ (9.10.2026): Grund #fcf9f5, Schrift und Linien in Blau
   color(display-p3 .1577 .304 .793) (sRGB #184fd2), Ueberschriften Plus Jakarta Sans 400 mit enger Laufweite,
   Kicker und Buttons DM Mono 13px fett in Versalien, Leads in Newsreader, Buttons als Pillen.
   Wird NACH dem Seiten-CSS geladen. Header und Footer bringen ihr eigenes CSS mit (chrome.css). */

html:root {
  --lm2-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --lm2-serif: Newsreader, Georgia, "Times New Roman", serif;
  --lm2-mono: "DM Mono", ui-monospace, Menlo, monospace;
  --lm2-fg: #184fd2;
  --lm2-fg-strong: #0a33a0;
  --lm2-bg: #fcf9f5;
  --lm2-tint: #eef2fb;
  --lm2-tint-2: #e2ecff;
  --lm2-line: color-mix(in srgb, var(--lm2-fg) 18%, var(--lm2-bg));
  --lm2-line-strong: color-mix(in srgb, var(--lm2-fg) 32%, var(--lm2-bg));
  --lm2-soft: color-mix(in srgb, var(--lm2-fg) 78%, var(--lm2-bg));
  --lm2-muted: color-mix(in srgb, var(--lm2-fg) 64%, var(--lm2-bg));

  /* Tokens der bestehenden Seiten auf die neue Palette */
  --bg: var(--lm2-bg);
  --bg-alt: #ffffff;   /* Karten weiss wie die Plan-Karten der Landing; Abschnittsbaender bleiben Creme (siehe unten) */
  --dark: var(--lm2-fg);
  --dark-2: var(--lm2-fg-strong);
  --text: var(--lm2-fg);
  --text-2: var(--lm2-fg);
  --text-3: var(--lm2-soft);
  --text-muted: var(--lm2-muted);
  --text-faint: var(--lm2-muted);
  --border: #cedefe;
  --border-strong: var(--lm2-line-strong);
  --brand-50: var(--lm2-tint);
  --brand-100: var(--lm2-tint-2);
  --brand-500: #487cec;
  --brand-600: var(--lm2-fg);
  --brand-700: var(--lm2-fg-strong);
  --brand-800: var(--lm2-fg-strong);
  --shadow-xs: none; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --shadow-xl: none;
  --r-sm: 12px; --r-md: 16px; --r-lg: 24px; --r-xl: 24px; --r-2xl: 28px;
  --nav-h: 0px;
}
@supports (color: color(display-p3 0 0 0)) {
  html:root { --lm2-fg: color(display-p3 0.1577 0.3040 0.7930); --lm2-fg-strong: color(display-p3 0.0892 0.1985 0.6035); }
}

html body {
  font-family: var(--lm2-sans) !important;
  background: var(--lm2-bg) !important;
  color: var(--lm2-fg);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--lm2-tint-2); color: var(--lm2-fg-strong); }

/* ---------- Ueberschriften ---------- */
:where(body) :is(h1, h2, h3, h4):where(:not(#site-nav *, #site-footer *, .lm2c, .lm2c *)) {
  font-family: var(--lm2-sans) !important;
  color: var(--lm2-fg);
  font-weight: 400 !important;
}
:where(body) h1:where(:not(#site-nav *, #site-footer *, .lm2c, .lm2c *)) {
  font-size: clamp(2.5rem, 5.2vw, 4rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.03em !important;
}
:where(body) h2:where(:not(#site-nav *, #site-footer *, .lm2c, .lm2c *)) {
  font-size: clamp(1.9rem, 3.4vw, 2.75rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
}
:where(body) h3:where(:not(#site-nav *, #site-footer *, .lm2c, .lm2c *)) {
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.25 !important;
}
:where(body) h4:where(:not(#site-nav *, #site-footer *, .lm2c, .lm2c *)) { font-weight: 500 !important; }
:where(body) :is(h1, h2, h3, h4) :is(span, em, strong):where(:not(#site-nav *, #site-footer *, .lm2c, .lm2c *)) {
  -webkit-text-fill-color: currentColor; background: none; color: inherit;
}
:where(body) :is(strong, b):where(:not(#site-nav *, #site-footer *, .lm2c, .lm2c *)) { font-weight: 600; }

/* ---------- Kicker, Labels, Meta (DM Mono) ---------- */
.eyebrow, .section-eyebrow, .kicker, .page-tag, .post-card-tag, .ind-card-tag, .cite-label, .brief-label,
.evidence-tag, .tier-badge, .pr-badge {
  font-family: var(--lm2-mono) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: var(--lm2-fg) !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
.eyebrow::before, .section-eyebrow::before, .kicker::before, .page-tag::before { background: var(--lm2-fg) !important; }
.article-meta, .hero-meta, .post-card-meta, .cta-meta, .tool-meta {
  font-family: var(--lm2-mono) !important;
  font-size: 13px !important;
  letter-spacing: 0.02em;
  color: var(--lm2-muted) !important;
}

/* ---------- Leads in Newsreader ---------- */
.article-lede, .page-lede, .hero-lede, .hero-sub, .lede {
  font-family: var(--lm2-serif) !important;
  font-size: clamp(1.2rem, 1.6vw, 1.45rem) !important;
  line-height: 1.38 !important;
  font-weight: 400 !important;
  color: var(--lm2-fg) !important;
  letter-spacing: 0 !important;
}

/* ---------- Fliesstext und Links ---------- */
:where(body) :is(p, li, td, dd, blockquote, figcaption):where(:not(#site-nav *, #site-footer *, .lm2c, .lm2c *)) { color: inherit; font-weight: 450; }
:where(body) :is(p, li, td, figcaption) a:where(:not(.btn, [class*="btn-"], [class*="card"], [class*="cta"])):where(:not(#site-nav *, #site-footer *, .lm2c, .lm2c *)) {
  color: var(--lm2-fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
:where(body) :is(p, li, td, figcaption) a:where(:not(#site-nav *, #site-footer *, .lm2c, .lm2c *)):hover { color: var(--lm2-fg-strong); }

/* ---------- Buttons: Pillen in DM Mono ---------- */
.btn, a.btn, button.btn, .btn-primary, .btn-ghost, .btn-lg, .cb-btn {
  font-family: var(--lm2-mono) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  line-height: 1 !important;
  min-height: 36px;
  padding: 0 18px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transform: none !important;
  transition: background-color .2s, color .2s, border-color .2s !important;
}
.btn-lg { min-height: 44px; padding: 0 22px !important; }
.btn-primary, .btn:not(.btn-ghost):not(.btn-secondary):not(.btn-outline), .cb-btn-accept {
  background: var(--lm2-fg) !important;
  color: var(--lm2-bg) !important;
  border: 1px solid var(--lm2-fg) !important;
}
.btn-primary:hover, .btn:not(.btn-ghost):not(.btn-secondary):not(.btn-outline):hover, .cb-btn-accept:hover {
  background: var(--lm2-fg-strong) !important; border-color: var(--lm2-fg-strong) !important;
}
.btn-ghost, .btn-secondary, .btn-outline, .cb-btn-decline {
  background: transparent !important;
  color: var(--lm2-fg) !important;
  border: 1px solid var(--lm2-fg) !important;
}
.btn-ghost:hover, .btn-secondary:hover, .btn-outline:hover, .cb-btn-decline:hover {
  background: color-mix(in srgb, var(--lm2-fg) 10%, var(--lm2-bg)) !important;
}
.btn i, .btn svg { font-size: 12px; }

/* ---------- Flaechen: flach, feine Linien, grosse Radien ---------- */
/* Seitenkopf flach auf Creme wie die Landing (keine Verlaeufe, kein Glow, keine Trennlinie) */
.hero, .page-hero, .page-header, .article-header, .article-hero, .section-hero {
  background: var(--lm2-bg) !important; background-image: none !important; border-bottom: 0 !important;
}
.hero::before, .hero::after, .page-hero::before, .page-hero::after, .page-header::before, .page-header::after,
.article-header::before, .article-header::after { display: none !important; }
.section-alt, .section { background: var(--lm2-bg) !important; background-image: none !important; }
/* Dunkle Vollflaechen gibt es auf der Landing nicht: Creme, blaue Schrift, Inhalte als weisse Karten */
.section-dark, .ai-section, .dark-section {
  background: var(--lm2-bg) !important; background-image: none !important; color: var(--lm2-fg) !important;
}
.section-dark :is(h1, h2, h3, h4, p, li, span, strong, .eyebrow, .section-eyebrow, .kicker, a:not(.lm-btn)) { color: var(--lm2-fg) !important; }
.section-dark [class*="feat"], .section-dark [class*="item"], .section-dark [class*="card"] { background: #fff !important; border-color: #cedefe !important; }

.rcard, .int-card, .post-card, .related-card, .ind-card, .imprint-card, .lm-map-card, .callout, .ng-callout,
.answer-box, .faq-item, .stat, .card, .feature-card, .tool-card, .cta-banner, .article-cta, .section-cta {
  box-shadow: none !important;
  border-color: var(--lm2-line) !important;
}
.rcard:hover, .int-card:hover, .post-card:hover, .related-card:hover, .ind-card:hover {
  transform: none !important; border-color: var(--lm2-fg) !important;
}

/* CTA-Bloecke wie die Pricing-Karte der Landing: blau, Creme-Schrift */
.cta-banner, .section-cta.cta-dark {
  background: var(--lm2-fg) !important; background-image: none !important; color: var(--lm2-bg) !important;
  border-radius: 24px !important;
}
.cta-banner :is(h2, h3, p, span, li) { color: var(--lm2-bg) !important; }
.cta-banner .btn-primary, .section-dark .btn-primary, .cta .btn-primary,
.cta-banner .btn:not(.btn-ghost), .section-dark .btn:not(.btn-ghost), .cta .btn:not(.btn-ghost) {
  background: var(--lm2-bg) !important; color: var(--lm2-fg) !important; border-color: var(--lm2-bg) !important;
}
.cta-banner .btn-ghost, .section-dark .btn-ghost, .cta .btn-ghost {
  color: var(--lm2-bg) !important; border-color: var(--lm2-bg) !important;
}

/* Text auf blauen Flaechen (CTA, dunkle Abschnitte, App-Visuals) bleibt hell */
:is(.cta, .cta-banner, .section-dark) :is(.cta-meta, .hero-note, .hero-meta, .article-meta, .note, small, .eyebrow, .section-eyebrow) {
  color: color-mix(in srgb, var(--lm2-bg) 82%, transparent) !important;
}
:is(.cta, .cta-banner, .section-dark) :is(h1, h2, h3, h4, p, li) { color: var(--lm2-bg) !important; }
:is(.cta, .cta-banner, .section-dark) a:not(.btn) { color: var(--lm2-bg) !important; }

/* ---------- Tabellen wie der Planvergleich der Landing ---------- */
:where(body) table:where(:not(#site-nav *, #site-footer *, .lm2c, .lm2c *)) { border-color: var(--lm2-line) !important; }
:where(body) :is(th, td):where(:not(#site-nav *, #site-footer *, .lm2c, .lm2c *)) { border-color: var(--lm2-line) !important; color: var(--lm2-fg); }
:where(body) th:where(:not(#site-nav *, #site-footer *, .lm2c, .lm2c *)) {
  font-family: var(--lm2-sans) !important; font-weight: 600 !important; background: transparent !important;
  text-transform: none; letter-spacing: 0;
}
:where(body) tr:where(:not(#site-nav *, #site-footer *, .lm2c, .lm2c *)):hover td { background: transparent; }

/* ---------- Code, Quellenzeilen ---------- */
:where(body) :is(code, kbd, samp, pre):where(:not(#site-nav *, #site-footer *, .lm2c, .lm2c *)) { font-family: var(--lm2-mono) !important; }

/* ---------- Cookie-Hinweis im Stil der Landing ---------- */
#cookie-banner {
  background: var(--lm2-bg) !important; color: var(--lm2-fg) !important;
  border: 1px solid var(--lm2-line) !important; box-shadow: 0 12px 40px rgba(10, 51, 160, 0.10) !important;
  border-radius: 20px !important; font-family: var(--lm2-sans) !important;
}
#cookie-banner .cb-text, #cookie-banner .cb-text a { color: var(--lm2-fg) !important; }

/* ---------- Altes Menue ist ersetzt ---------- */
#nav.lm2-legacy, .mobile-menu { display: none !important; }

/* ---------- Handy: Mono-Breadcrumbs und lange Links umbrechen statt ueberlaufen ---------- */
.crumb-route, .crumb { flex-wrap: wrap; max-width: 100%; row-gap: 6px; }
.crumb-route span, .crumb span { white-space: normal; overflow-wrap: anywhere; }
:where(body) :is(p, li, td) a:where(:not(#site-nav *, #site-footer *, .lm2c, .lm2c *)) { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  table.cmp-table, table.day-table { display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
}


/* ---------- Bausteine der Landing: Feinschliff ---------- */
/* Wortmarke "Start now" erscheint erst, wenn ihre Engine geladen ist (site.js) */
[data-lm2-wordmark]:not([data-lm2-ready]) { display: none !important; }
.lm2-start { margin-top: 96px; }
.lm2-start-sub { max-width: 640px; margin: 14px auto 0; text-align: center; font-family: var(--lm2-serif); font-size: 20px; line-height: 1.35; color: var(--lm2-fg); }
.lm-ph .lm2-meta { margin-top: 20px; font-family: var(--lm2-mono); font-size: 13px; letter-spacing: .02em; color: var(--lm2-muted); text-align: center; }
.lm-sec-head-l.lm2-center { align-items: center; text-align: center; margin-left: auto; margin-right: auto; }
.lm-sec-head-l { margin-bottom: 40px; }
.lm-faq-list { margin-top: 8px; }
/* Artikeltext wie der Fliesstext der Landing (Plus Jakarta Sans 500, blau) */
:where(article, .article-body, .guide-body, .content, main) :is(p, li):where(:not(.lm2c *)) { font-weight: 500; font-size: 17px; line-height: 1.6; }
.section-dark::before, .section-dark::after, .ai-section::before, .ai-section::after { display: none !important; }