/* ============================================================
   JOST Metallverarbeitung · Design Tokens
   Struktur nach GEPRO-Vorlage, Neutrals wie Pulverich (Text #1D1D1F /
   #666, Flächen #F3F5F8), Akzent = Jost-Logo-Blau (#0088C0), Zweitfarbe
   Silber / gebürstetes Aluminium, helle Bildsprache und Schrift
   (thin/light Headings wie Weller, Schrift Outfit statt der kommerziellen Soho Gothic) .
   ============================================================ */

:root {
  /* ---------- Akzent (Jost-Logo-Blau, aus dem Logo gemessen) ---------- */
  --blue: #0088C0;
  --blue-600: #0074A6;
  --blue-700: #005A7A;
  --blue-50: #E6F3FA;
  --blue-100: #C7E4F3;
  --blue-light: #5FC3EE;

  /* ---------- Zweitfarbe: Silber / gebürstetes Aluminium ---------- */
  --silver: #C8CDD3;
  --silver-2: #AEB5BD;
  --silver-3: #8E969F;
  --silver-50: #EEF0F3;
  --grad-metal: linear-gradient(104deg, #f4f5f7 0%, #d8dce1 22%, #eef0f3 46%, #cdd2d8 68%, #e6e9ed 84%, #d3d7dc 100%);
  --grad-metal-brush: repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 1px, rgba(0,0,0,0) 1px 3px, rgba(20,30,40,.035) 3px 4px);
  --grad-metal-text: linear-gradient(180deg, #f2f3f5 0%, #b9bfc6 45%, #8f979f 55%, #d4d8dd 100%);
  --grad-metal-dark: linear-gradient(104deg, #3a4048 0%, #2a2f36 30%, #4a5058 50%, #262b31 72%, #3b4149 100%);

  /* ---------- Helle Flächen ---------- */
  --white: #FFFFFF;
  --bg: #FFFFFF;
  --bg-soft: #F3F5F8;
  --bg-soft-2: #EAEDF1;

  /* ---------- Dunkle Flächen (nur Text-Flächen, keine Fotos) ---------- */
  --ink-900: #08090B;
  --ink-850: #0B0D10;
  --ink-800: #0F1216;
  --ink-700: #161A1F;
  --ink-600: #1E232A;

  /* ---------- Text ---------- */
  --text: #1D1D1F;
  --text-2: #666666;
  --text-3: #86868B;
  --on-dark: #F5F5F7;
  --on-dark-2: #AAB0B7;
  --on-dark-3: #7B8088;
  --line: #E6E8EB;

  --c-accent: var(--blue);

  /* ---------- Typografie: Outfit (freie Alternative zu Soho Gothic, SIL OFL) ---------- */
  --font: "Outfit", "Outfit Fallback", system-ui, "Segoe UI", sans-serif;
  --fw-thin: 200;
  --fw-light: 300;
  --fw-reg: 400;
  --fw-med: 500;

  --fs-eyebrow: clamp(.9rem, .85rem + .2vw, 1.05rem);
  --fs-body: clamp(1rem, .96rem + .25vw, 1.125rem);
  --fs-lg: clamp(1.15rem, 1rem + .6vw, 1.45rem);
  --fs-h3: clamp(1.4rem, 1.15rem + 1.1vw, 2rem);
  --fs-h2: clamp(2.1rem, 1.4rem + 3vw, 4rem);
  --fs-hero: clamp(2.6rem, 1.5rem + 5vw, 5.8rem);
  --fs-mega: clamp(3.5rem, .5rem + 12vw, 13rem);

  --lh-tight: 1.04;
  --lh-snug: 1.12;
  --lh-body: 1.6;
  --tr-tight: -.01em;
  --tr-tighter: -.02em;

  /* ---------- Layout ---------- */
  --maxw: 1456px;
  --maxw-narrow: 1080px;
  --gutter: clamp(1.5rem, .8rem + 2.8vw, 3.5rem);
  --section-pad: clamp(6rem, 4rem + 7vw, 11rem);
  --space-block: clamp(3rem, 2rem + 3vw, 5rem);
  --nav-h: 96px;

  /* ---------- Radien (GEPRO) ---------- */
  --r: 14px;
  --r-lg: 18px;
  --r-tile: 24px;
  --r-tile-lg: 32px;
  --r-pill: 999px;

  /* ---------- Schatten ---------- */
  --shadow-tile: 0 1px 2px rgba(22,28,45,.025), 0 10px 26px -16px rgba(22,28,45,.07), 0 36px 64px -40px rgba(22,28,45,.10);
  --shadow-card: -20px 24px 46px -32px rgba(22,28,45,.18), -6px 10px 18px -14px rgba(22,28,45,.10);
  --shadow-card-hov: -28px 38px 64px -34px rgba(22,28,45,.26), -8px 14px 24px -14px rgba(22,28,45,.12);
  --shadow-pop: 0 2px 8px rgba(22,28,45,.04), 0 28px 64px -32px rgba(22,28,45,.14);
  --shadow-float: 0 20px 50px -32px rgba(22,28,45,.14);
  --shadow-btn: 0 8px 22px -12px rgba(0,136,192,.5);
  --shadow-nav: 0 1px 0 rgba(15,23,42,.04), 0 12px 34px -22px rgba(15,23,42,.12);

  /* ---------- Weiche Verlaufs-Hintergründe ---------- */
  --grad-page: radial-gradient(120% 80% at 50% -10%, #ffffff 0%, #f3f4f7 60%, #eceef2 100%);
  --grad-tile-light: radial-gradient(130% 120% at 50% 0%, #ffffff 0%, #eef0f3 100%);
  --grad-tile-dark: radial-gradient(130% 120% at 50% 0%, #1a1e24 0%, #0a0b0d 70%);
  --grad-hero-dark: radial-gradient(80% 70% at 62% 45%, rgba(0,136,192,.18) 0%, transparent 55%), radial-gradient(120% 120% at 50% 0%, #14181d 0%, #08090b 70%);

  /* ---------- Gradient-Headings ---------- */
  --grad-ink: linear-gradient(180deg, #34373c 0%, #0b0c0e 92%);
  --grad-silver: linear-gradient(180deg, #ffffff 0%, #b9bdc4 130%);
  --grad-blue: linear-gradient(100deg, #1BA3DC 0%, #005A7A 100%);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --dur: .5s;
  --dur-2: .7s;

  --z-nav: 50; --z-overlay: 80; --z-modal: 100;
}