/* ============================================================================
   landing-light.css — Light-Mode für die komplette Marketing-Site
   Aktiv wenn body.landing-page--light gesetzt ist
   Deckt: Landing + 17 Subpages (pricing, blog, contact, agb, ...)
   Strategie: Token-Overrides + selektive Component-Polish
   Stand: 2026-05-12
   ============================================================================ */

/* ===========================================================================
   1. TOKEN-OVERRIDES (greift via Inheritance auf alle Children)
   =========================================================================== */
body.landing-page--light {
  /* Theme-System Tokens (theme.css kompatibel) */
  --bg: #f6f8fc;
  --bg-2: #eef2f8;
  --surface: #ffffff;
  --surface2: #f4f7fc;
  --border: rgba(15, 23, 42, .12);
  --border-soft: rgba(15, 23, 42, .08);
  --text: #0f172a;
  --text-secondary: #334155;
  --muted: #64748b;
  --tone-200: #475569;
  --tone-300: #0f172a;

  /* Landing-eigene Tokens */
  --text-primary: #0f172a !important;
  --text-strong: #0a1322 !important;
  --text-muted: #475569 !important;
  --text-tertiary: #64748b !important;
  --text-default: #0f172a !important;
  --bg-base: #f6f8fc !important;
  --bg-card: #ffffff !important;
  --bg-surface-1: #ffffff !important;
  --bg-surface-2: #f8fafc !important;
  --surface-1: #ffffff !important;
  --surface-2: #f8fafc !important;

  /* Brand-Akzent-Tokens (Landing nutzt --accent-warm/-amber direkt) */
  --accent: #ea6a0e !important;
  --accent-warm: #ea6a0e !important;
  --accent-warm-dark: #c85000 !important;
  --accent-warm-hover: #f57c22 !important;
  --accent-warm-soft: rgba(234, 106, 14, .1) !important;
  --accent-amber: #f59e0b !important;
  --accent-text: #c85000 !important;
  --color-navy: #0f172a !important;
  --color-navy-light: #1e293b !important;

  background: #f6f8fc !important;
  color: #0f172a !important;
  color-scheme: light !important;
}

html[data-theme="light"] {
  background: #f6f8fc;
}

/* WICHTIG: body.public-page (theme.css) hat hartkodiertes dark mit !important.
   Wenn auch landing-page--light gesetzt ist → wir override mit höchster Spezifität. */
body.public-page.landing-page--light {
  --bg: #f6f8fc !important;
  --bg-2: #eef2f8 !important;
  --surface: #ffffff !important;
  --surface2: #f4f7fc !important;
  --border: rgba(15, 23, 42, .12) !important;
  --text: #0f172a !important;
  --text-secondary: #334155 !important;
  --muted: #64748b !important;
  --muted2: rgba(71, 85, 105, .72) !important;
  background: #f6f8fc !important;
  color: #0f172a !important;
  color-scheme: light !important;
}

/* Glossar/Vorlage/SEO/Branchen haben eigene Header */
body.landing-page--light .gl-header,
body.landing-page--light .vl-header,
body.landing-page--light .glossar-header,
body.landing-page--light .vorlage-header,
body.landing-page--light header.lp-header,
body.landing-page--light header[class*="public-header"],
body.landing-page--light .public-header,
body.landing-page--light .top-bar {
  background: rgba(255, 255, 255, .94) !important;
  border-bottom: 1px solid rgba(15, 23, 42, .08) !important;
  color: #0f172a !important;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 1px 0 rgba(15, 23, 42, .03);
}

body.landing-page--light .gl-header a,
body.landing-page--light .vl-header a,
body.landing-page--light .glossar-header a,
body.landing-page--light .vorlage-header a,
body.landing-page--light .public-header a,
body.landing-page--light header[class*="public-header"] a,
body.landing-page--light .top-bar a {
  color: #0f172a !important;
}

body.landing-page--light .gl-header a.brand-accent,
body.landing-page--light .vl-header a.brand-accent {
  color: #f97316 !important;
}

body.landing-page--light .gl-brand,
body.landing-page--light .vl-brand {
  color: #0f172a !important;
}

/* Glossar-Card / Vorlage-Card / SEO-Card */
body.landing-page--light .gl-card,
body.landing-page--light .vl-card,
body.landing-page--light .gl-term-card,
body.landing-page--light .seo-card,
body.landing-page--light [class*="gl-"][class*="-card"],
body.landing-page--light [class*="vl-"][class*="-card"] {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  color: #0f172a !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06) !important;
}

/* Footer für Glossar/Vorlage */
body.landing-page--light .gl-footer,
body.landing-page--light .vl-footer {
  background: #ffffff !important;
  border-top: 1px solid rgba(15, 23, 42, .08) !important;
  color: #64748b !important;
}

body.landing-page--light .gl-footer a,
body.landing-page--light .vl-footer a {
  color: #475569 !important;
}

body.landing-page--light .gl-footer a:hover,
body.landing-page--light .vl-footer a:hover {
  color: #ea6a0e !important;
}

/* Glossar-Card / Vorlage-Card */
body.landing-page--light .glossar-card,
body.landing-page--light .vorlage-card,
body.landing-page--light .glossar-term-card,
body.landing-page--light [class*="glossar-"][class*="-card"],
body.landing-page--light [class*="vorlage-"][class*="-card"] {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  color: #0f172a !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06) !important;
}

/* ===========================================================================
   2. BODY / GLOBAL
   =========================================================================== */
body.landing-page--light .lpv2-main,
body.landing-page--light main {
  background: #f6f8fc !important;
  color: #0f172a !important;
}

body.landing-page--light h1,
body.landing-page--light h2,
body.landing-page--light h3,
body.landing-page--light h4,
body.landing-page--light h5,
body.landing-page--light h6 {
  color: #0a1322 !important;
}

body.landing-page--light p {
  color: #334155;
}

/* ===========================================================================
   3. HEADER (lpv2-header)
   =========================================================================== */
body.landing-page--light .lpv2-header {
  background: rgba(255, 255, 255, .94) !important;
  border-bottom: 1px solid rgba(15, 23, 42, .08) !important;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 1px 0 rgba(15, 23, 42, .03);
}

body.landing-page--light .lpv2-header a,
body.landing-page--light .lpv2-nav a {
  color: #0f172a !important;
  transition: color .15s ease;
}

body.landing-page--light .lpv2-header a:hover,
body.landing-page--light .lpv2-nav a:hover {
  color: #ea6a0e !important;
}

body.landing-page--light .lpv2-brand,
body.landing-page--light .lpv2-header .brand-wordmark-fallback {
  color: #0f172a !important;
}

body.landing-page--light .lpv2-hotline {
  color: #0f172a !important;
}

body.landing-page--light .lpv2-hotline:hover {
  color: #ea6a0e !important;
}

body.landing-page--light .lpv2-hotline-dot {
  background: #16a34a !important;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, .14);
}

body.landing-page--light .lpv2-menu-toggle span {
  background: #0f172a !important;
}

body.landing-page--light .lpv2-header-login {
  background: transparent !important;
  border: 1px solid rgba(15, 23, 42, .14) !important;
  color: #0f172a !important;
  font-weight: 600;
}

body.landing-page--light .lpv2-header-login:hover {
  background: #f1f5f9 !important;
  border-color: rgba(15, 23, 42, .22) !important;
}

/* Header-CTA "Kostenlos testen" — muss WEISS sein auf orangem BG */
body.landing-page--light .lpv2-header-cta,
body.landing-page--light .lpv2-header-cta.lp-btn-primary,
body.landing-page--light a.lpv2-header-cta {
  background: linear-gradient(135deg, #f97316, #ea580c) !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 6px rgba(234, 106, 14, .25), 0 8px 24px rgba(234, 106, 14, .12);
}

body.landing-page--light .lpv2-header-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(234, 106, 14, .35), 0 12px 32px rgba(234, 106, 14, .18);
  color: #ffffff !important;
}

/* ===========================================================================
   4. HERO-SECTION
   =========================================================================== */
body.landing-page--light .lpv2-hero-section {
  background: #f6f8fc !important;
}

/* Eyebrow — orange, mit dezentem Highlight-Strich */
body.landing-page--light .lpv2-eyebrow,
body.landing-page--light p.lpv2-eyebrow,
body.landing-page--light .lpv2-section .lpv2-eyebrow {
  color: #ea6a0e !important;
  font-weight: 700 !important;
}

body.landing-page--light .lpv2-eyebrow:before {
  background: linear-gradient(90deg, #ea6a0e, transparent) !important;
}

/* Kicker (kleine Eyebrow-Variante in Cards wie eIDAS-Roadmap) */
body.landing-page--light .lpv2-kicker {
  color: #ea6a0e !important;
  font-weight: 700 !important;
}

/* Trust-Cards: aus Karten zu kompakten Pills mit Häkchen-Akzent */
body.landing-page--light .lpv2-trust-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  justify-content: center !important;
  margin-top: 28px !important;
}

body.landing-page--light .lpv2-trust-card {
  padding: 8px 16px 8px 36px !important;
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  border-radius: 999px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .03) !important;
  position: relative !important;
  flex: 0 1 auto !important;
  min-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
}

body.landing-page--light .lpv2-trust-card:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(234, 106, 14, .35) !important;
  box-shadow: 0 2px 6px rgba(234, 106, 14, .08) !important;
}

body.landing-page--light .lpv2-trust-card::before {
  content: '' !important;
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 14px !important;
  height: 14px !important;
  background: #16a34a !important;
  border-radius: 50% !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='%23000' d='M11.5 4 6 9.5 3 6.5l1-1 2 2L10.5 3z'/%3E%3C/svg%3E") center/12px no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='%23000' d='M11.5 4 6 9.5 3 6.5l1-1 2 2L10.5 3z'/%3E%3C/svg%3E") center/12px no-repeat !important;
}

body.landing-page--light .lpv2-trust-card p {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

/* Hero-Title-Highlight bleibt mit Brand-Gradient */
body.landing-page--light .lpv2-hero-title-highlight {
  /* Original gradient bleibt — orange auf hell wirkt stark */
  background: linear-gradient(135deg, #ea6a0e 0%, #f59e0b 60%, #fbbf24 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

body.landing-page--light .lpv2-hero-section p,
body.landing-page--light .lpv2-lead {
  color: #475569 !important;
}

/* Hero-Visual Frame um Mockup */
body.landing-page--light .lpv2-hero-visual {
  background: linear-gradient(180deg, #ffffff 0%, #f4f7fc 100%) !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .04), 0 24px 48px rgba(15, 23, 42, .08) !important;
}

body.landing-page--light .lpv2-hero-visual:after {
  /* Glow-Effekt dezenter im light mode */
  opacity: .5;
}

/* ===========================================================================
   5. BROWSER-MOCKUP (lp-mockup) — bleibt dunkel als macOS-Style
   ABER: heller Frame drumherum für Cohärenz
   =========================================================================== */
/* Mockup selbst stays dark — sieht wie macOS Safari/Chrome aus */

/* ===========================================================================
   6. PHONE-MOCKUP (hero-phone) — bleibt dunkel als Telegram-Style
   =========================================================================== */
/* hero-phone stays dark - Telegram dark mode look */

/* ===========================================================================
   7. PROOF STRIP (Trust-Bar unter Hero)
   =========================================================================== */
body.landing-page--light .lpv2-proof-strip {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  color: #334155;
}

body.landing-page--light .lpv2-proof-strip * {
  color: #334155;
}

body.landing-page--light .lpv2-proof-strip strong,
body.landing-page--light .lpv2-proof-strip b {
  color: #0a1322;
}

body.landing-page--light .lpv2-proof-pillar:before {
  background: linear-gradient(90deg, #ea6a0e, #f59e0b) !important;
  opacity: 1;
}

body.landing-page--light .lpv2-proof-pillar h3 {
  color: #0a1322 !important;
}

/* ===========================================================================
   8. BRANCHES STRIP
   =========================================================================== */
body.landing-page--light .lpv2-branches-strip {
  background: #ffffff !important;
  border-top: 1px solid rgba(15, 23, 42, .06);
  border-bottom: 1px solid rgba(15, 23, 42, .06);
  color: #475569;
}

body.landing-page--light .lpv2-branches-strip * {
  color: #475569;
}

/* ===========================================================================
   9. SEKTIONEN: TINTED + DARK
   =========================================================================== */
body.landing-page--light .lpv2-section--tinted {
  background: linear-gradient(180deg, #fbfcfe 0%, #f4f7fc 100%) !important;
  border-top: 1px solid rgba(15, 23, 42, .04);
  border-bottom: 1px solid rgba(15, 23, 42, .04);
}

body.landing-page--light .lpv2-section--dark {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #ffffff 100%) !important;
}

/* ===========================================================================
   10. CARDS (lp-card, lpv2-* cards)
   =========================================================================== */
body.landing-page--light .lp-card {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06) !important;
  color: #0f172a;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

body.landing-page--light .lp-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(15, 23, 42, .06), 0 16px 32px rgba(15, 23, 42, .1) !important;
  border-color: rgba(15, 23, 42, .14) !important;
}

body.landing-page--light .lp-card h2,
body.landing-page--light .lp-card h3,
body.landing-page--light .lp-card h4 {
  color: #0a1322 !important;
}

body.landing-page--light .lp-card p,
body.landing-page--light .lp-card li {
  color: #475569 !important;
}

/* ===========================================================================
   11. KI-FEATURES (lpv2-ki-section)
   =========================================================================== */
body.landing-page--light .lpv2-ki-hero {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06) !important;
}

body.landing-page--light .lpv2-ki-hero h2,
body.landing-page--light .lpv2-ki-hero h3,
body.landing-page--light .lpv2-ki-hero p {
  color: inherit;
}

body.landing-page--light .lpv2-ki-flow-step {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  color: #0f172a;
  transition: border-color .2s ease, box-shadow .2s ease;
}

body.landing-page--light .lpv2-ki-flow-step:hover {
  border-color: rgba(234, 106, 14, .35) !important;
  box-shadow: 0 4px 12px rgba(234, 106, 14, .08);
}

/* ===========================================================================
   12. PROBLEM CARDS
   =========================================================================== */
body.landing-page--light .lpv2-problem-card {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  color: #0f172a;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 12px rgba(15, 23, 42, .04);
  transition: box-shadow .2s ease, transform .2s ease;
}

body.landing-page--light .lpv2-problem-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(15, 23, 42, .06), 0 12px 24px rgba(15, 23, 42, .08);
}

body.landing-page--light .lpv2-problem-card:before {
  background: linear-gradient(180deg, #ea6a0e, #f59e0b) !important;
}

/* Problem-Title ist ein P, nicht H3 — eigener Selektor */
body.landing-page--light .lpv2-problem-title,
body.landing-page--light .lpv2-problem-card h3,
body.landing-page--light .lpv2-problem-card .lpv2-problem-title {
  color: #0a1322 !important;
  font-weight: 700 !important;
}

body.landing-page--light .lpv2-problem-consequence,
body.landing-page--light .lpv2-problem-card p {
  color: #475569 !important;
}

/* ===========================================================================
   13. TESTIMONIAL CARDS
   =========================================================================== */
body.landing-page--light .lpv2-testimonial-card {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  color: #0f172a;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
}

body.landing-page--light .lpv2-testimonial-card * {
  color: inherit;
}

body.landing-page--light .lpv2-testimonial-card p {
  color: #334155 !important;
}

body.landing-page--light .lpv2-testimonial-avatar {
  background: linear-gradient(135deg, #ea6a0e, #f59e0b) !important;
  color: #ffffff !important;
}

/* ===========================================================================
   14. MULTILANG CARDS
   =========================================================================== */
body.landing-page--light .lpv2-multilang-card {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  color: #0f172a;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
}

body.landing-page--light .lpv2-multilang-card--accent {
  background: linear-gradient(180deg, #fff7ed 0%, #ffffff 100%) !important;
  border-color: #ea6a0e !important;
  box-shadow: 0 0 0 1px rgba(234, 106, 14, .14), 0 8px 24px rgba(234, 106, 14, .12);
}

/* ===========================================================================
   15. PRICING
   =========================================================================== */
body.landing-page--light .lpv2-pricing-shell {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .04), 0 16px 40px rgba(15, 23, 42, .06);
  border-radius: 24px;
}

body.landing-page--light .lpv2-price-card {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, .1) !important;
  color: #0f172a;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

body.landing-page--light .lpv2-price-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, .06), 0 16px 40px rgba(15, 23, 42, .1);
  border-color: rgba(15, 23, 42, .16) !important;
}

body.landing-page--light .lpv2-price-card--recommended {
  border: 2px solid #ea6a0e !important;
  background: linear-gradient(180deg, #ffffff 0%, #fff7ed 100%) !important;
  box-shadow: 0 0 0 1px rgba(234, 106, 14, .12), 0 8px 24px rgba(234, 106, 14, .15) !important;
}

body.landing-page--light .lpv2-price-card--recommended:hover {
  box-shadow: 0 0 0 1px rgba(234, 106, 14, .18), 0 12px 32px rgba(234, 106, 14, .22) !important;
}

body.landing-page--light .lpv2-price-card * {
  color: inherit;
}

body.landing-page--light .lpv2-price-card h2,
body.landing-page--light .lpv2-price-card h3 {
  color: #0a1322 !important;
}

body.landing-page--light .lpv2-price-card p,
body.landing-page--light .lpv2-price-card li {
  color: #475569 !important;
}

body.landing-page--light .lpv2-price-badge {
  background: linear-gradient(135deg, #ea6a0e, #f59e0b) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(234, 106, 14, .25);
}

/* Toggle Monatlich/Jährlich */
body.landing-page--light .lp-toggle-btn,
body.landing-page--light .billing-toggle-btn {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, .12) !important;
  color: #0f172a !important;
}

body.landing-page--light .lp-toggle-btn.is-active,
body.landing-page--light .billing-toggle-btn.is-active {
  background: #ea6a0e !important;
  color: #ffffff !important;
  border-color: #ea6a0e !important;
  box-shadow: 0 2px 6px rgba(234, 106, 14, .2);
}

/* ===========================================================================
   16. ROI / DISPUTE CARDS
   =========================================================================== */
body.landing-page--light .lpv2-roi-result-card {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  color: #0f172a;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 12px rgba(15, 23, 42, .04);
}

body.landing-page--light .lpv2-roi-result-card--highlight {
  background: linear-gradient(180deg, #fff7ed 0%, #ffffff 100%) !important;
  border: 2px solid #ea6a0e !important;
  box-shadow: 0 0 0 1px rgba(234, 106, 14, .12), 0 8px 24px rgba(234, 106, 14, .15);
}

body.landing-page--light .lpv2-time-report-preview,
body.landing-page--light .lpv2-report-sheet,
body.landing-page--light .lpv2-report-sheet-head {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, .08) !important;
  color: #0f172a;
}

/* ===========================================================================
   17. BAULEITER STEPS
   =========================================================================== */
body.landing-page--light .lpv2-bauleiter-step__num,
body.landing-page--light .lpv2-step-pill {
  background: linear-gradient(135deg, #ea6a0e, #f59e0b) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(234, 106, 14, .25);
}

/* ===========================================================================
   18. BUTTONS
   =========================================================================== */
/* Primary - bleibt orange */
body.landing-page--light .lp-btn-primary {
  background: linear-gradient(135deg, #f97316, #ea580c) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 2px 6px rgba(234, 106, 14, .25), 0 8px 24px rgba(234, 106, 14, .12);
  transition: transform .2s ease, box-shadow .2s ease;
}

body.landing-page--light .lp-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(234, 106, 14, .35), 0 12px 32px rgba(234, 106, 14, .18);
}

body.landing-page--light .lp-btn-primary:active {
  transform: translateY(0);
}

/* Secondary - hell mit border */
body.landing-page--light .lp-btn-secondary {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, .14) !important;
  color: #0f172a !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

body.landing-page--light .lp-btn-secondary:hover {
  background: #f8fafc !important;
  border-color: rgba(15, 23, 42, .22) !important;
  transform: translateY(-1px);
}

/* Final-CTA-Buttons (auf dunklem Block) */
body.landing-page--light .lpv2-final-cta .lp-btn-secondary {
  background: rgba(255, 255, 255, .12) !important;
  border-color: rgba(255, 255, 255, .35) !important;
  color: #ffffff !important;
  backdrop-filter: blur(8px);
}

body.landing-page--light .lpv2-final-cta .lp-btn-secondary:hover {
  background: rgba(255, 255, 255, .2) !important;
  border-color: rgba(255, 255, 255, .5) !important;
}

/* ===========================================================================
   19. FAQ ACCORDION
   =========================================================================== */
body.landing-page--light .lp-accordion-item,
body.landing-page--light .lp-faq-item,
body.landing-page--light .faq-item {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  border-radius: 14px;
  margin-bottom: 8px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .03) !important;
  transition: border-color .2s ease, box-shadow .2s ease;
}

body.landing-page--light .lp-accordion-item:hover,
body.landing-page--light .lp-faq-item:hover,
body.landing-page--light .faq-item:hover {
  border-color: rgba(15, 23, 42, .14) !important;
  box-shadow: 0 2px 4px rgba(15, 23, 42, .04), 0 8px 16px rgba(15, 23, 42, .06) !important;
}

body.landing-page--light .lp-accordion-item[open],
body.landing-page--light .lp-faq-item[open] {
  border-color: rgba(234, 106, 14, .25) !important;
  box-shadow: 0 2px 4px rgba(15, 23, 42, .04), 0 8px 16px rgba(234, 106, 14, .06) !important;
}

body.landing-page--light .lp-accordion-btn,
body.landing-page--light .faq-button {
  color: #0a1322 !important;
  background: transparent !important;
}

body.landing-page--light .lp-accordion-content,
body.landing-page--light .faq-content {
  color: #475569;
}

/* ===========================================================================
   20. FINAL CTA (bleibt dark als Kontrast)
   =========================================================================== */
body.landing-page--light .lpv2-final-cta {
  background: linear-gradient(135deg, #0a1322 0%, #1e293b 50%, #0a1322 100%) !important;
  color: #ffffff !important;
  border-radius: 24px;
  margin: 24px;
  box-shadow: 0 24px 48px rgba(15, 23, 42, .15);
}

body.landing-page--light .lpv2-final-cta * {
  color: inherit;
}

body.landing-page--light .lpv2-final-cta h1,
body.landing-page--light .lpv2-final-cta h2,
body.landing-page--light .lpv2-final-cta h3 {
  color: #ffffff !important;
}

body.landing-page--light .lpv2-final-cta p {
  color: #cbd5e1 !important;
}

body.landing-page--light .lpv2-final-cta .lp-btn-primary {
  background: #ffffff !important;
  color: #0a1322 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15), 0 8px 24px rgba(0, 0, 0, .15);
}

body.landing-page--light .lpv2-final-cta .lp-btn-primary:hover {
  background: #f8fafc !important;
  transform: translateY(-1px);
}

/* ===========================================================================
   21. FOOTER (bleibt dark als visueller Anker)
   =========================================================================== */
body.landing-page--light .lpv2-footer,
body.landing-page--light footer {
  background: #0a1322 !important;
  color: #cbd5e1 !important;
  border-top: 1px solid rgba(15, 23, 42, .14);
}

body.landing-page--light footer h1,
body.landing-page--light footer h2,
body.landing-page--light footer h3,
body.landing-page--light footer h4,
body.landing-page--light footer h5,
body.landing-page--light footer strong,
body.landing-page--light footer .lpv2-footer-brand-name {
  color: #ffffff !important;
}

body.landing-page--light footer a {
  color: #cbd5e1 !important;
  transition: color .15s ease;
}

body.landing-page--light footer a:hover {
  color: #ffffff !important;
}

body.landing-page--light footer .lpv2-footer-brand .brand-accent {
  color: #f97316 !important;
}

/* ===========================================================================
   22. TOAST + MODAL
   =========================================================================== */
body.landing-page--light .lp-toast.is-success {
  background: #16a34a !important;
  color: #ffffff !important;
  border: none;
  box-shadow: 0 4px 12px rgba(22, 163, 74, .25);
}

body.landing-page--light .lp-toast.is-error {
  background: #dc2626 !important;
  color: #ffffff !important;
  border: none;
  box-shadow: 0 4px 12px rgba(220, 38, 38, .25);
}

body.landing-page--light .lp-sample-modal {
  background: rgba(15, 23, 42, .55) !important;
  backdrop-filter: blur(4px);
}

body.landing-page--light .lp-sample-shell {
  background: #ffffff !important;
  color: #0f172a !important;
  box-shadow: 0 24px 48px rgba(15, 23, 42, .25);
}

/* ===========================================================================
   23. EXIT-INTENT MODAL (falls overlay aktiv)
   =========================================================================== */
body.landing-page--light .lp-exit-intent-overlay,
body.landing-page--light .lp-exit-intent-modal {
  background: rgba(15, 23, 42, .55) !important;
  backdrop-filter: blur(4px);
}

body.landing-page--light .lp-exit-intent-card {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid rgba(15, 23, 42, .08);
  box-shadow: 0 24px 48px rgba(15, 23, 42, .25);
}

/* ===========================================================================
   24. COOKIE-CONSENT BANNER (#cookieConsent .cc-box ist der echte Selektor)
   =========================================================================== */
body.landing-page--light #cookieConsent .cc-box,
body.landing-page--light .cookie-banner {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, .12) !important;
  color: #0f172a !important;
  box-shadow: 0 -4px 24px rgba(15, 23, 42, .14), 0 1px 2px rgba(15, 23, 42, .04) !important;
}

body.landing-page--light #cookieConsent .cc-title {
  color: #0a1322 !important;
}

body.landing-page--light #cookieConsent .cc-text {
  color: #475569 !important;
}

body.landing-page--light #cookieConsent .cc-text a {
  color: #ea6a0e !important;
}

body.landing-page--light #cookieConsent .cc-accept,
body.landing-page--light #cookieConsent .cc-reject {
  background: #f8fafc !important;
  color: #0f172a !important;
  border: 1px solid rgba(15, 23, 42, .14) !important;
}

body.landing-page--light #cookieConsent .cc-accept:hover,
body.landing-page--light #cookieConsent .cc-reject:hover {
  background: #f1f5f9 !important;
  border-color: rgba(15, 23, 42, .22) !important;
}

/* ===========================================================================
   25. SUPPORT WIDGET (Floating Chat Bubble) — bleibt orange
   =========================================================================== */

/* ===========================================================================
   26. LEGAL/SUBPAGE LAYOUT (legal.css Pendants)
   .lg-card, .lg-title, .lg-prose, etc.
   =========================================================================== */
body.landing-page--light .lg-card {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06) !important;
  color: #0f172a !important;
}

body.landing-page--light .lg-faq-item {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .03) !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
}

body.landing-page--light .lg-faq-item[open] {
  border-color: rgba(234, 106, 14, .25) !important;
  box-shadow: 0 2px 4px rgba(15, 23, 42, .04), 0 8px 16px rgba(234, 106, 14, .06) !important;
}

body.landing-page--light .lg-faq-item summary {
  color: #0a1322 !important;
}

body.landing-page--light .lg-faq-item summary:hover {
  background: #f8fafc !important;
}

body.landing-page--light .lg-faq-answer {
  color: #475569 !important;
}

body.landing-page--light .lg-footer {
  background: #ffffff !important;
  border-top: 1px solid rgba(15, 23, 42, .08) !important;
}

body.landing-page--light .lg-footer-inner {
  color: #64748b !important;
}

body.landing-page--light .lg-footer-links a {
  color: #475569 !important;
}

body.landing-page--light .lg-footer-links a:hover {
  color: #0a1322 !important;
}

/* Mobile-Menu (legal subpages: lg-mobile-menu) */
body.landing-page--light .lg-mobile-menu.is-open {
  background: rgba(255, 255, 255, .96) !important;
  border-bottom: 1px solid rgba(15, 23, 42, .1) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .12) !important;
}

body.landing-page--light .lg-mobile-menu a {
  color: #0f172a !important;
}

body.landing-page--light .lg-mobile-menu a:hover {
  background: #f1f5f9 !important;
  color: #ea6a0e !important;
}

body.landing-page--light .lg-hamburger {
  color: #0f172a !important;
}

/* Mobile-Nav (Landing: lpv2-mobile-nav) */
body.landing-page--light .lpv2-mobile-nav {
  background: #ffffff !important;
  border-top: 1px solid rgba(15, 23, 42, .08) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .08) !important;
}

body.landing-page--light .lpv2-mobile-nav-inner a {
  color: #0f172a !important;
  border-bottom-color: rgba(15, 23, 42, .06) !important;
  transition: color .15s ease, background .15s ease;
}

body.landing-page--light .lpv2-mobile-nav-inner a:hover {
  color: #ea6a0e !important;
  background: #f8fafc !important;
}

body.landing-page--light .lpv2-mobile-nav-cta {
  background: linear-gradient(135deg, #f97316, #ea580c) !important;
  color: #ffffff !important;
  border-radius: 10px;
  padding: 12px 16px !important;
  box-shadow: 0 2px 6px rgba(234, 106, 14, .25) !important;
}

body.landing-page--light .lpv2-mobile-nav-cta:hover {
  color: #ffffff !important;
  background: linear-gradient(135deg, #ea580c, #c2410c) !important;
}

/* Subpage-Header CTA */
body.landing-page--light .lg-header-cta {
  background: linear-gradient(135deg, #f97316, #ea580c) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(234, 106, 14, .25) !important;
}

body.landing-page--light .lg-header-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(234, 106, 14, .35) !important;
}

/* Toast für Subpages */
body.landing-page--light .lg-toast.is-error {
  background: #dc2626 !important;
  color: #ffffff !important;
  border: none !important;
}

body.landing-page--light .lg-toast.is-success {
  background: #16a34a !important;
  color: #ffffff !important;
  border: none !important;
}

body.landing-page--light .lg-title {
  color: #0a1322 !important;
}

body.landing-page--light .lg-date {
  color: #64748b !important;
}

body.landing-page--light .lg-prose {
  color: #334155 !important;
}

body.landing-page--light .lg-prose h2,
body.landing-page--light .lg-prose h3,
body.landing-page--light .lg-prose h4 {
  color: #0a1322 !important;
}

body.landing-page--light .lg-prose p,
body.landing-page--light .lg-prose li {
  color: #334155 !important;
}

body.landing-page--light .lg-prose a {
  color: #ea6a0e !important;
}

body.landing-page--light .lg-prose strong {
  color: #0a1322 !important;
}

body.landing-page--light .lg-main {
  background: #f6f8fc !important;
}

/* Subpage-Header (legal.css: .lg-header) */
body.landing-page--light .lg-header,
body.landing-page--light header.lg-header,
body.landing-page--light .subpage-header {
  background: rgba(255, 255, 255, .94) !important;
  border-bottom: 1px solid rgba(15, 23, 42, .08) !important;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 1px 0 rgba(15, 23, 42, .03) !important;
}

body.landing-page--light .lg-brand,
body.landing-page--light a.lg-brand {
  color: #0f172a !important;
}

body.landing-page--light .lg-brand .brand-accent {
  color: #f97316 !important;
}

body.landing-page--light .lg-header-nav a {
  color: #475569 !important;
  transition: color .15s ease, background .15s ease !important;
}

body.landing-page--light .lg-header-nav a:hover {
  background: #f1f5f9 !important;
  color: #0a1322 !important;
}

body.landing-page--light .lg-header a,
body.landing-page--light .subpage-header a {
  color: #0f172a !important;
}

body.landing-page--light .lg-header a:hover,
body.landing-page--light .subpage-header a:hover {
  color: #ea6a0e !important;
}

/* ===========================================================================
   27. FORMS (Login, Register, Contact)
   =========================================================================== */
body.landing-page--light .lg-input,
body.landing-page--light .lg-textarea,
body.landing-page--light .lg-select,
body.landing-page--light input[type="text"]:not(.bb-no-style),
body.landing-page--light input[type="email"]:not(.bb-no-style),
body.landing-page--light input[type="password"]:not(.bb-no-style),
body.landing-page--light input[type="tel"]:not(.bb-no-style),
body.landing-page--light input[type="search"]:not(.bb-no-style),
body.landing-page--light textarea:not(.bb-no-style),
body.landing-page--light select:not(.bb-no-style) {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, .14) !important;
  color: #0a1322 !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}

body.landing-page--light .lg-input:focus,
body.landing-page--light .lg-textarea:focus,
body.landing-page--light .lg-select:focus,
body.landing-page--light input:focus,
body.landing-page--light textarea:focus,
body.landing-page--light select:focus {
  border-color: #ea6a0e !important;
  box-shadow: 0 0 0 3px rgba(234, 106, 14, .14) !important;
  outline: none;
}

body.landing-page--light label {
  color: #334155;
  font-weight: 500;
}

body.landing-page--light ::placeholder {
  color: #94a3b8 !important;
}

/* ===========================================================================
   28. BLOG-LISTE
   =========================================================================== */
body.landing-page--light .bl-search-input {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, .14) !important;
  color: #0a1322 !important;
}

body.landing-page--light .bl-search-input::placeholder {
  color: #94a3b8 !important;
}

body.landing-page--light .bl-search-icon {
  color: #64748b !important;
}

body.landing-page--light .bl-search-status {
  color: #64748b !important;
}

/* Blog-Card */
body.landing-page--light .blog-card,
body.landing-page--light .lpv2-blog-card,
body.landing-page--light .bl-card {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  color: #0f172a;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 12px rgba(15, 23, 42, .04);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

body.landing-page--light .blog-card:hover,
body.landing-page--light .lpv2-blog-card:hover,
body.landing-page--light .bl-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(15, 23, 42, .06), 0 12px 24px rgba(15, 23, 42, .08);
  border-color: rgba(15, 23, 42, .14) !important;
}

/* ===========================================================================
   29. BAUSTELLENDOKU-VORLAGE
   =========================================================================== */
body.landing-page--light .resource-page,
body.landing-page--light .resource-card {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  color: #0f172a;
}

/* ===========================================================================
   30. PRICING-PAGE specific (.pr-card, .pr-grid)
   =========================================================================== */
body.landing-page--light .pr-card {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, .1) !important;
  color: #0f172a;
}

body.landing-page--light .pr-card:hover {
  box-shadow: 0 4px 12px rgba(15, 23, 42, .06), 0 16px 40px rgba(15, 23, 42, .08) !important;
  border-color: rgba(15, 23, 42, .16) !important;
}

body.landing-page--light .pr-card.is-pro {
  border-color: #ea6a0e !important;
  box-shadow: 0 0 0 1px rgba(234, 106, 14, .12), 0 8px 24px rgba(234, 106, 14, .15) !important;
}

body.landing-page--light .pr-label {
  color: #64748b !important;
}

body.landing-page--light .pr-badge {
  background: linear-gradient(135deg, #ea6a0e, #f59e0b) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 2px 6px rgba(234, 106, 14, .2);
}

body.landing-page--light .pr-price {
  color: #0a1322 !important;
}

body.landing-page--light .pr-desc {
  color: #475569 !important;
}

body.landing-page--light .pr-features {
  color: #475569 !important;
}

body.landing-page--light .pr-cta {
  background: linear-gradient(135deg, #f97316, #ea580c) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(234, 106, 14, .25);
  transition: transform .2s, box-shadow .2s;
}

body.landing-page--light .pr-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(234, 106, 14, .35);
}

/* ===========================================================================
   31. CONTACT-FORM (.ct-* selectors)
   =========================================================================== */
body.landing-page--light .ct-info-card {
  background: #f8fafc !important;
  border-color: rgba(15, 23, 42, .08) !important;
}

body.landing-page--light .ct-info-card .ct-info-label {
  color: #64748b !important;
}

body.landing-page--light .ct-info-card li {
  color: #334155 !important;
}

body.landing-page--light .ct-form-footer p {
  color: #64748b !important;
}

/* ===========================================================================
   32. LOGIN/REGISTER (Auth-Pages mit Split-Screen)
   =========================================================================== */
body.landing-page--light .au-main {
  background: #f6f8fc !important;
}

body.landing-page--light .au-split {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  border-radius: 20px !important;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .06), 0 24px 48px rgba(15, 23, 42, .08);
}

/* Linke Seite: Marketing-Pitch — wird zu sanftem Off-White-Gradient */
body.landing-page--light .au-left {
  background: linear-gradient(135deg, #fff7ed 0%, #ffffff 50%, #f4f7fc 100%) !important;
  color: #0f172a;
}

body.landing-page--light .au-left::before {
  /* Brand-Glow stärker im light mode für Visual-Anker */
  background: radial-gradient(circle, rgba(234, 106, 14, .12), transparent 70%) !important;
  opacity: 1;
}

body.landing-page--light .au-left h2 {
  color: #0a1322 !important;
}

body.landing-page--light .au-left p {
  color: #475569 !important;
}

body.landing-page--light .au-features li,
body.landing-page--light .au-features div {
  color: #334155 !important;
}

body.landing-page--light .au-right {
  background: #ffffff !important;
}

body.landing-page--light .au-right h1 {
  color: #0a1322 !important;
}

body.landing-page--light .au-right .au-sub {
  color: #475569 !important;
}

/* Auth-Header */
body.landing-page--light .au-header {
  background: rgba(255, 255, 255, .94) !important;
  border-bottom: 1px solid rgba(15, 23, 42, .08) !important;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}

body.landing-page--light .au-brand,
body.landing-page--light .au-brand-mark {
  color: #0f172a !important;
}

body.landing-page--light .au-header a {
  color: #0f172a !important;
}

body.landing-page--light .au-cta {
  background: linear-gradient(135deg, #f97316, #ea580c) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(234, 106, 14, .25);
}

/* Auth-Cards (für ältere Variante) */
body.landing-page--light .au-card,
body.landing-page--light .auth-card {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  color: #0f172a;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .06), 0 16px 40px rgba(15, 23, 42, .08);
}

body.landing-page--light .au-title,
body.landing-page--light .auth-title {
  color: #0a1322 !important;
}

body.landing-page--light .au-subtitle,
body.landing-page--light .auth-subtitle {
  color: #475569 !important;
}

/* Auth-Buttons */
body.landing-page--light .au-btn-primary,
body.landing-page--light .auth-btn-primary {
  background: linear-gradient(135deg, #f97316, #ea580c) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(234, 106, 14, .25);
  transition: transform .2s, box-shadow .2s;
}

body.landing-page--light .au-btn-primary:hover,
body.landing-page--light .auth-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(234, 106, 14, .35);
}

/* Toast in Auth */
body.landing-page--light .au-toast.is-error {
  background: #dc2626 !important;
  color: #ffffff !important;
}

body.landing-page--light .au-toast.is-success {
  background: #16a34a !important;
  color: #ffffff !important;
}

/* ===========================================================================
   33. SUPPORT-PAGE / HILFE-PAGE
   =========================================================================== */
body.landing-page--light .help-card,
body.landing-page--light .help-section {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  color: #0f172a;
}

/* ===========================================================================
   34. DIVERSE FALLBACK (Tailwind dark slate classes)
   Falls Tailwind-Klassen genutzt werden mit slate-900 etc.
   =========================================================================== */
body.landing-page--light .bg-slate-900,
body.landing-page--light .bg-slate-950,
body.landing-page--light .bg-slate-800,
body.landing-page--light [class*="bg-slate-9"],
body.landing-page--light [class*="bg-slate-95"] {
  background-color: #ffffff !important;
}

body.landing-page--light .text-white,
body.landing-page--light .text-slate-100,
body.landing-page--light .text-slate-200 {
  color: #0a1322 !important;
}

body.landing-page--light .text-slate-300,
body.landing-page--light .text-slate-400 {
  color: #475569 !important;
}

body.landing-page--light .text-slate-500 {
  color: #64748b !important;
}

body.landing-page--light .border-white\/10,
body.landing-page--light .border-white\/15,
body.landing-page--light .border-slate-700,
body.landing-page--light .border-slate-800 {
  border-color: rgba(15, 23, 42, .12) !important;
}

/* ===========================================================================
   35. SCROLLBARS (subtil)
   =========================================================================== */
body.landing-page--light::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

body.landing-page--light::-webkit-scrollbar-track {
  background: #f1f5f9;
}

body.landing-page--light::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 6px;
  border: 2px solid #f1f5f9;
}

body.landing-page--light::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* ===========================================================================
   36. SELECTION
   =========================================================================== */
body.landing-page--light ::selection {
  background: rgba(234, 106, 14, .2);
  color: #0a1322;
}