@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

:root {
  /* Marken-Typografie: Inter (Basis) + Plus Jakarta Sans (Display) wie www.omnifacto.com */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
  --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif !important;

  /* Kephra-/Website-Teal #379193 — exakte RGB-Tripletts (gethomepage --color-* Scale).
     !important, damit die Laufzeit-Token der Theme-Engine nicht gewinnen. */
  --color-50: 230 241 242 !important;   /* #E6F1F2  primary.light */
  --color-100: 214 233 234 !important;
  --color-200: 184 217 218 !important;
  --color-300: 143 199 200 !important;
  --color-400: 92 180 182 !important;   /* #5CB4B6 */
  --color-500: 55 145 147 !important;   /* #379193  PRIMARY */
  --color-600: 44 115 117 !important;   /* #2C7375  primary.dark */
  --color-700: 37 104 106 !important;   /* #25686A */
  --color-800: 30 83 85 !important;     /* #1E5355 */
  --color-900: 22 60 62 !important;     /* #163C3E */

  /* Marken-Logo-Gradient: Teal -> Orange (Akzent der Website/Hermes) */
  --color-logo-start: 55 145 147 !important;
  --color-logo-stop: 242 166 90 !important;
}

/* Hintergrund-Verlauf exakt wie die Firmen-Website (warmes Teal -> Soft-Orange),
   mit festem Bildschirm-Hintergrund. */
body {
  background: linear-gradient(180deg,
    #ffffff 0%,
    #e6f1f2 12%,
    #e6f1f2 35%,
    #f7f9f9 50%,
    #f7f9f9 70%,
    #e6f1f2 88%,
    #fdedd9 100%);
  background-attachment: fixed;
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Header-Logo: breites Wortmarken-Logo auf sinnvolle Kopfhöhe begrenzen */
img[src*="omnifacto-logo"] {
  max-height: 40px !important;
  width: auto !important;
}

/* Titel/Header in Display-Schrift */
h1, h2, h3, .header, .title {
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
}

/* Omnifacto-Brand-Logo im Header */
.omnifacto-brand-logo {
  height: 42px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  align-self: center;
  margin-right: 16px;
  flex-shrink: 0;
}