/* =========================================
   MC LOGICS - DESIGN SYSTEM (Dark Mode)
   ========================================= */

/* 1. Schriften laden */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=Josefin+Sans:wght@300;400;600&family=JetBrains+Mono:wght@400;500&family=Poppins:wght@300;400;500;600;700&display=swap');

/* 2. Farb-Variablen (Design Tokens) */
:root {
  --bg:        #0D0D0D;
  --primary:   #6A0DAD;
  --secondary: #E6A817;
  --tertiary:  #8F00FF;
  --fg:        #F0EEFF;
  --fg-muted:  rgba(240, 238, 255, 0.52);
  --fg-dim:    rgba(240, 238, 255, 0.15);
}

/* 3. Basis-Layout */
html, body { 
  margin: 0; 
  padding: 0; 
  min-height: 100%; 
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: "Josefin Sans", system-ui, sans-serif;
  position: relative;
  overflow-x: hidden;
}

main { 
  position: relative; 
  z-index: 2; 
  max-width: 960px; 
  margin: 0 auto; 
  padding: 48px 32px 140px; 
}

/* 4. Waben-Hintergrund (Honeycomb) */
.honeycomb { 
  position: fixed; 
  inset: 0; 
  z-index: 0; 
  pointer-events: none; 
  overflow: hidden; 
}
.honeycomb svg { 
  width: 100%; 
  height: 100%; 
  display: block; 
}
.vignette { 
  position: fixed; 
  inset: 0; 
  z-index: 1; 
  pointer-events: none; 
  background: radial-gradient(ellipse at center, transparent 0%, transparent 40%, rgba(13, 13, 13, 0.72) 100%); 
}

/* 5. Navigation */
.nav { 
  display: flex; 
  gap: 24px; 
  margin-bottom: 64px; 
  border-bottom: 1px solid var(--fg-dim); 
  padding-bottom: 24px; 
  flex-wrap: wrap; 
}
.nav a { 
  font-family: "JetBrains Mono", ui-monospace, monospace; 
  font-size: 13px; 
  text-decoration: none; 
  color: var(--fg); 
  transition: color 0.2s; 
}
.nav a:hover, .nav a.active { 
  color: var(--secondary); 
}

/* 6. Logo & Branding */
.brand { 
  display: flex; 
  align-items: center; 
  gap: 14px; 
  margin-bottom: 56px; 
}
.brand .word { 
  font-family: "JetBrains Mono", ui-monospace, monospace; 
  font-size: 40px; 
  font-weight: 500; 
  letter-spacing: -0.02em; 
  color: var(--fg); 
}
.brand .word .slash { 
  color: var(--secondary); 
}

/* 7. Typografie */
.eyebrow { 
  font-family: "JetBrains Mono", ui-monospace, monospace; 
  font-size: 11px; 
  letter-spacing: 0.26em; 
  text-transform: uppercase; 
  color: var(--tertiary); 
  margin-bottom: 20px; 
}
h1 { 
  font-family: "Sora", system-ui, sans-serif; 
  font-size: clamp(40px, 6vw, 72px); 
  font-weight: 700; 
  letter-spacing: -0.03em; 
  line-height: 1.05; 
  margin: 0 0 24px; 
  text-wrap: balance; 
  color: var(--fg); 
}
h1 .accent { 
  color: var(--secondary); 
}
.lede { 
  font-size: 19px; 
  font-weight: 300; 
  line-height: 1.65; 
  max-width: 600px; 
  color: var(--fg-muted); 
  margin: 0 0 52px; 
  text-wrap: pretty; 
  letter-spacing: 0.01em; 
}

/* 8. Buttons */
.cta-row { 
  display: flex; 
  gap: 12px; 
  flex-wrap: wrap; 
}
.btn { 
  font-family: "Josefin Sans", system-ui, sans-serif; 
  font-size: 13px; 
  font-weight: 600; 
  letter-spacing: 0.08em; 
  text-transform: uppercase; 
  padding: 14px 26px; 
  border-radius: 4px; 
  border: none; 
  cursor: pointer; 
  text-decoration: none; 
  display: inline-flex; 
  align-items: center; 
  gap: 8px; 
  transition: opacity 0.15s, transform 0.15s; 
}
.btn:hover { 
  opacity: 0.85; 
  transform: translateY(-1px); 
}
.btn.primary { background: var(--primary); color: #fff; }
.btn.secondary { background: var(--secondary); color: #0D0D0D; }
.btn.ghost { background: transparent; color: var(--fg); border: 1px solid var(--fg-dim); }

/* 9. ROI Rechner (Startseite) */
.roi-calculator { margin-top: 80px; background: rgba(255,255,255,0.03); border: 1px solid var(--fg-dim); border-radius: 12px; padding: 40px; }
.roi-calculator h2 { font-family: "Sora", sans-serif; font-size: 32px; margin-top: 0; margin-bottom: 24px; }
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
@media (max-width: 768px) { .calc-grid { grid-template-columns: 1fr; } }
.slider-group { margin-bottom: 24px; }
.slider-group label { display: flex; justify-content: space-between; font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 600; text-transform: uppercase; margin-bottom: 12px; color: var(--fg); }
input[type="range"] { width: 100%; accent-color: var(--secondary); cursor: pointer; }
.result-box { background: var(--primary); color: #fff; padding: 32px; border-radius: 8px; text-align: center; display: flex; flex-direction: column; justify-content: center; box-shadow: 0 12px 32px rgba(106, 13, 173, 0.2); }
.result-box .eyebrow { margin-bottom: 8px; color: var(--fg); }
.result-box .value { font-family: "Sora", sans-serif; font-size: 48px; font-weight: 700; color: var(--secondary); line-height: 1; margin-bottom: 8px; }
.result-box .sub-value { font-family: "JetBrains Mono", monospace; font-size: 14px; opacity: 0.8; color: #fff; }