:root {
  --bg: #ffffff;
  --text: #102133;
  --muted: #5f6772;
  --dark: #233652;
  --dark-soft: #31506f;
  --light-line: rgba(16, 33, 51, 0.12);
  --surface: #fbf8f1;
  --footer-bg: #f7f1e6;
  --button: rgba(255, 255, 255, 0.12);
  --button-line: rgba(255, 255, 255, 0.45);
  --accent: #e58a2b;
  --accent-gold: #f2b134;
  --accent-soft: #fff4d6;
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --radius-sm: 18px;
  --radius-md: 24px;
  --radius-pill: 999px;
  --shadow-card: 0 20px 60px rgba(16, 33, 51, 0.08);
  --font-body: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont,
    "Helvetica Neue", Arial, sans-serif;
  --font-heading: var(--font-body);
  --container-max: 1180px;
  --container-gutter: 2rem;
  --section-block-space: 5.5rem;
  --section-block-space-sm: 4rem;
  --color-on-dark: #ffffff;
  --color-on-dark-muted: rgba(255, 255, 255, 0.84);
  --color-on-dark-soft: rgba(255, 255, 255, 0.78);
  --color-on-dark-subtle: rgba(255, 255, 255, 0.72);
  --card-border: rgba(16, 33, 51, 0.08);
  --chip-border: rgba(16, 33, 51, 0.12);
  --link-accent-border: rgba(229, 138, 43, 0.65);
  --card-accent-shadow: inset 0 4px 0 var(--accent-gold);
  --image-shadow: 0 20px 60px rgba(16, 33, 51, 0.12);
  --button-radius: var(--radius-pill);
  --button-primary-bg: linear-gradient(135deg, var(--accent-gold), var(--accent));
  --button-primary-border: rgba(255, 244, 214, 0.8);
  --button-primary-text: #1f2a37;
  --button-ghost-border: var(--button-line);
  --button-ghost-text: var(--color-on-dark);
  --button-ghost-border-strong: rgba(255, 255, 255, 0.55);
  --hero-image: url("/img/jaraco-software-engineers-verlauf-hero.jpg");
  --hero-background: linear-gradient(
      rgba(18, 28, 43, 0.68),
      rgba(18, 28, 43, 0.68)
    ),
    var(--hero-image) center/cover no-repeat;
  --hero-card-bg: rgba(255, 255, 255, 0.08);
  --hero-card-border: rgba(255, 255, 255, 0.15);
  --header-bg: #2c3440;
  --header-bg-scrolled: rgba(255, 255, 255, 0.92);
  --header-shadow: 0 12px 30px rgba(16, 33, 51, 0.12);
  --header-link: rgba(255, 255, 255, 0.88);
  --header-link-scrolled: var(--text);
  --header-control-border-scrolled: rgba(16, 33, 51, 0.25);
  --header-control-bg-scrolled: rgba(16, 33, 51, 0.04);
  --header-active-bg: rgba(229, 138, 43, 0.18);
  --section-soft-bg: linear-gradient(180deg, #ffffff 0%, #f9f5ed 100%);
  --section-warm-bg: linear-gradient(180deg, #fff8eb 0%, #ffffff 100%);
  --section-office-bg: linear-gradient(180deg, #f7f6f2 0%, #ffffff 100%);
  --section-dark-bg: linear-gradient(180deg, var(--dark) 0%, #1c2b40 100%);
  --story-card-bg: linear-gradient(135deg, #fff8eb, #ffffff 52%);
  --slider-dot-bg: rgba(35, 54, 82, 0.22);
  --logo-slider-bg: rgba(255, 255, 255, 0.9);
  --cta-bg: linear-gradient(rgba(18, 28, 43, 0.55), rgba(18, 28, 43, 0.55)),
    radial-gradient(circle at 75% 40%, var(--accent-gold), var(--dark) 62%);
  --code-bg: #0f1726;
  --code-text: #f1f5f9;
  --detail-pricing-bg: rgba(15, 23, 42, 0.36);
  --detail-pricing-border: rgba(255, 244, 214, 0.12);
}