/* ============================================================
   GPE – Günther Pulverich GmbH · Design Tokens
   Hell-dominant mit dunklen Drama-Flächen, weiche Verläufe,
   große Headings, mehrschichtige Soft-Shadows statt Borders,
   gerundete Bento-Radien. Akzent: Pulverich-Rot (#E30B16).
   ============================================================ */

:root {
  /* ---------- Akzent (Logo-Rot) ---------- */
  --red: #E30B16;
  --red-600: #C40912;
  --red-700: #A1070F;
  --red-50: #FDECEC;
  --red-100: #FBD3D5;

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

  /* ---------- Dunkle Flächen (Drama) ---------- */
  --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(--red);

  /* ---------- Typografie ---------- */
  --font: "Roboto", "Roboto Fallback", system-ui, "Segoe UI", sans-serif;

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

  --lh-tight: 1.03;
  --lh-snug: 1.12;
  --lh-body: 1.6;
  --tr-tight: -.02em;
  --tr-tighter: -.032em;

  /* ---------- 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: 104px;

  /* ---------- Radien ---------- */
  --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(227,11,22,.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(227,11,22,.16) 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-red: linear-gradient(100deg, #F0343D 0%, #B8090F 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;
}