:root{
  /* =====================================
     Design Tokens – UI Styleguide (Juni 2026)
     Ziel: kühl-modern, präzise, hochwertig – ohne lautes Marketing
  ===================================== */

  /* Core palette */
  --petrol-900: #0F3A46;
  --petrol-700: #2F5D6A;
  --graphite-900: #1F2A30;
  --fog-50: #FAFCFD;
  --fog-100: #EEF3F5;
  --mist-200: #D8E1E5;

  /* Accent (Brand Orange) */
  --copper-600: #ff751f;

  /* Status (optional) */
  --status-success: #2E6B5D;
  --status-error: #8B2C2C;

  /* Semantic mapping (keep existing variable names where possible) */
  --color-primary: var(--petrol-900);
  --color-primary-dark: var(--petrol-900);
  --color-primary-light: var(--fog-100);

  --color-accent: var(--copper-600);

  --color-bg: var(--fog-50);
  --color-bg-soft: var(--fog-100);
  --color-white: #FFFFFF;

  --color-text: rgba(31, 42, 48, 0.88); /* graphite-ish */
  --color-text-soft: rgba(31, 42, 48, 0.70);
  --color-border: var(--mist-200);

  /* Interaction */
  --color-link: var(--petrol-900);
  --focus-ring: 0 0 0 2px var(--copper-600), 0 0 0 4px rgba(185, 122, 74, 0.18);

  --shadow-soft: 0 10px 30px rgba(31, 42, 48, 0.08);
  --shadow-card: 0 8px 24px rgba(31, 42, 48, 0.06);

  --radius-s: 12px;
  --radius-m: 14px;
  --radius-l: 24px;

  --container: 1200px;

  /* Typography: Inter only for website UI, consistent and calm */
  --font-head: "Inter", sans-serif;
  --font-body: "Inter", sans-serif;

  --transition: 0.18s ease;
}

*,
*::before,
*::after{
  box-sizing: border-box;
}

html{
  scroll-behavior: smooth;
}

body{
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
}

img{
  max-width: 100%;
  display: block;
}

a{
  color: inherit;
  text-decoration: none;
}

h1,h2,h3,h4,h5,h6{
  margin: 0 0 0.75rem;
  font-family: var(--font-head);
  line-height: 1.15;
  color: var(--color-text);
}

p{
  margin: 0 0 1rem;
  color: var(--color-text);
}

ul{
  margin: 0;
  padding: 0;
  list-style: none;
}

.qg-cta{
  margin-top:40px;
  text-align:center;
}

.qg-cta .btn{
  min-width:280px;
}