/* ============================================================
   GEPRO V3 - Design Tokens (Premium-Stil)
   Hell-dominant + dunkle Drama-Flaechen, weiche Verlaeufe,
   grosse Headings (Google Sans), aufwaendige Soft-Shadows
   statt Borders, gerundete Bento-Radien, gezielte Gradient-Headings.
   ============================================================ */

:root {
  /* ---------- Akzent (Logo-Blau) ---------- */
  --blue: #12A0DC;
  --blue-600: #0E84BA;
  --blue-700: #0B6E9C;
  --blue-50: #E8F6FD;

  /* ---------- Helle Flaechen ---------- */
  --white: #FFFFFF;
  --bg: #FFFFFF;
  --bg-soft: #F4F5F7;
  --bg-soft-2: #ECEEF1;

  /* ---------- Dunkle Flaechen (Drama) ---------- */
  --ink-900: #08090B;
  --ink-850: #0B0D10;
  --ink-800: #0F1216;
  --ink-700: #161A1F;
  --ink-600: #1E232A;

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

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

  /* ---------- Typografie: Google Sans ueberall ---------- */
  --font: "Google Sans", "Google Sans 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.4rem);
  --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: 68px;

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

  /* ---------- Schatten (weich, aufwaendig, mehrschichtig) ---------- */
  --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);
  /* Karten-Schatten: diagonal nach unten-links, weich (nicht ueber volle Breite) */
  --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(18,160,220,.45);
  --shadow-nav: 0 1px 0 rgba(15,23,42,.04), 0 12px 34px -22px rgba(15,23,42,.12);

  /* ---------- Weiche Verlaufs-Hintergruende ---------- */
  --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(18,160,220,.16) 0%, transparent 55%), radial-gradient(120% 120% at 50% 0%, #14181d 0%, #08090b 70%);

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

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

  /* z-index */
  --z-nav: 50; --z-overlay: 80; --z-modal: 100;
}