/* ==============================================
   CANVENA Farbkonzept v2
   Basis: Stufe 2 Dunkelblau
   Primaer-Akzent: Gold (#D4AF37)
   Sekundaer-Warm: Sand/Beige (#C4A882)
   Tertiaer-Cool: Tuerkis (#5BA8B5)
   Neutral-Warm: Cremeweiss (#F5F0E8)
   ============================================== */

:root {
  --bg-primary: #1A2744;
  --bg-secondary: #1F3050;
  --bg-card: #263A5C;
  --bg-card-hover: #2E4568;
  --bg-accent: #243858;
  --bg-light-section: #1F3050;
  --bg-light-card: #263A5C;
  --text-primary: #F5F0E8;
  --text-secondary: #C8BDA8;
  --text-muted: #B8C4D8;
  --text-dark: #F5F0E8;
  --text-dark-secondary: #C8BDA8;
  --accent-gold: #D4AF37;
  --accent-gold-light: #E8C547;
  --accent-gold-dark: #B8941F;
  --accent-dot: #D4AF37;
  --accent-green: #5BA8B5;
  --accent-red: #B8C4D8;
  --border-dark: rgba(196, 168, 130, 0.10);
  --border-light: rgba(196, 168, 130, 0.15);
  --border-gold: rgba(212, 175, 55, 0.25);
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.35);
  --shadow-gold: 0 4px 24px rgba(212, 175, 55, 0.12);
}

html body {
  background-color: #1A2744;
  color: #F5F0E8;
  padding-top: 44px;
}

html body::before {
  content: '';
  position: fixed;
  inset: 0;
  opacity: 0.02;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 100;
}

html .nav { background: rgba(26, 39, 68, 0.95); backdrop-filter: blur(20px); }
html .nav__logo { color: #F5F0E8; }
html .nav__logo span { color: #D4AF37; }
html .nav__link { color: #C8BDA8; }
html .nav__link:hover { color: #F5F0E8; }

html .hero { background: #1A2744; }
html .hero h1 { color: #F5F0E8; }
html .hero p { color: #C8BDA8; }
html .hero__subtitle { color: #D4AF37; }
html .hero__subtitle::before { background: linear-gradient(90deg, #D4AF37, #C4A882); }

html .text-gold, html em.text-gold {
  background: linear-gradient(135deg, #C9A84C 0%, #D4AF37 35%, #E8C547 65%, #C4A882 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

html .section--dark { background: #1A2744; }
html .section--darker { background: #1F3050; }
html .section-label { color: #D4AF37; }
html h2 { color: #F5F0E8; }
html h3 { color: #F5F0E8; }
html h4 { color: #F5F0E8; }
html p { color: #C8BDA8; }

html .stats-bar { background: #263A5C; border: 1px solid rgba(196, 168, 130, 0.08); }
html .stat-number { color: #D4AF37; }
html .stat-label { color: #B8C4D8; }

html .card { background: #263A5C; border: 1px solid rgba(196, 168, 130, 0.06); }
html .card:hover { background: #2E4568; border-color: rgba(196, 168, 130, 0.12); }
html .card h4 { color: #F5F0E8; }
html .card p { color: #C8BDA8; }

html .mod-card { background: rgba(245, 240, 232, 0.03); border: 1px solid rgba(196, 168, 130, 0.06); }
html .mod-card:hover { border-color: rgba(212, 175, 55, 0.18); box-shadow: 0 16px 40px rgba(0,0,0,0.4), 0 0 20px rgba(196, 168, 130, 0.04); }
html .mod-card-num { color: #D4AF37; }
html .mod-card-body h4 { color: #F5F0E8; }
html .mod-card-body p { color: rgba(200, 189, 168, 0.7); }

html .btn--primary { background: linear-gradient(135deg, #C9A84C, #D4AF37, #C4A882); color: #0D1321; box-shadow: 0 4px 20px rgba(212, 175, 55, 0.2), 0 0 30px rgba(196, 168, 130, 0.08); border: none; }
html .btn--primary:hover { background: linear-gradient(135deg, #D4AF37, #E8C547, #D4BC96); box-shadow: 0 6px 28px rgba(212, 175, 55, 0.3), 0 0 40px rgba(196, 168, 130, 0.12); }
html .btn--secondary { border-color: rgba(196, 168, 130, 0.3); color: #F5F0E8; }
html .btn--secondary:hover { border-color: #C4A882; color: #D4AF37; }
html .btn--ghost { color: #D4AF37; }

html .demo-container { background: #263A5C; border: 1px solid rgba(196, 168, 130, 0.08); }
html .demo-filter { background: transparent; border: 1px solid rgba(196, 168, 130, 0.15); color: #C8BDA8; }
html .demo-filter:hover { border-color: #D4AF37; color: #D4AF37; }
html .demo-filter.active { background: linear-gradient(135deg, #C9A84C, #D4AF37); color: #0D1321; border-color: #D4AF37; }

html .comparison__side { background: #263A5C; border: 1px solid rgba(196, 168, 130, 0.06); }
html .comparison__icon--green { color: #5BA8B5; }
html .comparison__icon--red { color: #6B7A95; }
html .comparison__result--new { color: #5BA8B5; }
html .comparison__result--old { color: #6B7A95; }

html .grid-3 .card .stat-number { color: #D4AF37; }

html .card svg rect { fill: #C4A882; stroke: none; }
html .card svg path { fill: none; stroke: #C4A882; }
html .card svg circle { fill: #C4A882; stroke: #C4A882; }

html .testimonial { background: #263A5C; border: 1px solid rgba(196, 168, 130, 0.10); border-left: 3px solid rgba(196, 168, 130, 0.25); }
html .testimonial__quote { color: #F5F0E8; }
html .testimonial__author { color: #C4A882; }
html .testimonial__role { color: #B8C4D8; }

html .journey-node__dot { background: #D4AF37; box-shadow: 0 0 12px rgba(212, 175, 55, 0.25); }
html .journey-node.active .journey-node__dot { background: #E8C547; box-shadow: 0 0 16px rgba(232, 197, 71, 0.35); }
html .journey-detail { background: #263A5C; border: 1px solid rgba(196, 168, 130, 0.06); }
html .journey-detail__stats span strong { color: #5BA8B5; }

html .cta-banner { background: linear-gradient(135deg, #263A5C 0%, rgba(196, 168, 130, 0.06) 100%); border: 1px solid rgba(196, 168, 130, 0.10); }
html .cta-subtext { color: #B8C4D8; }

html .footer { background: #152035; }
html .footer__heading { color: #C4A882; }
html .footer__link { color: #B8C4D8; }
html .footer__link:hover { color: #D4AF37; }
html .footer__bottom { border-color: rgba(196, 168, 130, 0.06); color: #6B7A95; }

html .trust-logo-text { color: #6B7A95; }
html .hero__trust-label { color: #6B7A95; }
html .lang-switcher__current { color: #C8BDA8; }

html .aurora__layer--1 { background: radial-gradient(ellipse at 30% 20%, rgba(196, 168, 130, 0.10) 0%, transparent 50%); }
html .aurora__layer--2 { background: radial-gradient(ellipse at 70% 40%, rgba(91, 168, 181, 0.06) 0%, transparent 45%); }
html .aurora__layer--4 { background: radial-gradient(ellipse at 20% 80%, rgba(212, 175, 55, 0.08) 0%, transparent 35%); }