/* ============================================================
   Alpha Gebäudereinigung — Design Tokens
   Premium · clean · trustworthy. Mobile-first, fluide Skala.
   ============================================================ */

/* Vendored Variable-Font (DSGVO – kein Google-Fonts-CDN) */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Farb-Basis --- */
  --ink: #0a1521;            /* Text auf hell / dunkler Sektions-BG */
  --ink-2: #1d2a3a;
  --paper: #f6f8fc;          /* Seiten-Hintergrund */
  --surface: #ffffff;
  --surface-2: #eef3fb;
  --line: rgba(10, 21, 33, 0.10);
  --line-strong: rgba(10, 21, 33, 0.16);

  /* --- Marke --- */
  --brand: #0b3a78;          /* Tiefes Vertrauens-Blau (Kontinuität) */
  --brand-600: #0e4f9e;
  --brand-700: #0a2f63;
  --accent: #16b8c8;         /* Frisches Aqua (Wasser/Reinheit) */
  --accent-2: #5b8def;       /* Soft-Blau */
  --gold: #d8b25a;           /* dezenter Premium-Akzent (Sterne) */

  /* --- Textfarben --- */
  --text: #0e1b2a;
  --text-soft: #4a5b70;
  --text-mut: #6b7c93;
  --text-inv: #eef4ff;       /* Text auf dunkel */
  --text-inv-soft: #aebfd6;

  /* --- Verläufe / Mesh --- */
  --grad-brand: linear-gradient(135deg, var(--brand) 0%, var(--brand-600) 45%, var(--accent) 120%);
  --grad-accent: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%);
  --grad-ink: linear-gradient(180deg, #0b1726 0%, #0a1521 100%);
  --glow-accent: 0 0 0 1px rgba(22,184,200,.35), 0 18px 50px -18px rgba(22,184,200,.55);

  /* --- Typografie --- */
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* fluide Skala (Display-Min so gewählt, dass lange Wörter wie
     „Gebäudereinigung" auch auf ~320px Breite nicht abgeschnitten werden) */
  --fs-display: clamp(1.95rem, 0.8rem + 5.3vw, 5.4rem);
  --fs-h1: clamp(1.95rem, 1.2rem + 3.4vw, 3.8rem);
  --fs-h2: clamp(1.6rem, 1.05rem + 2.5vw, 2.9rem);
  --fs-h3: clamp(1.3rem, 1rem + 1.4vw, 1.85rem);
  --fs-lead: clamp(1.05rem, 0.98rem + 0.5vw, 1.3rem);
  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-body: 1.65;
  --tracking-tight: -0.02em;
  --tracking-wide: 0.14em;

  /* --- Spacing (4px-Basis) --- */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem;
  --sp-9: 6rem; --sp-10: 8rem;
  --section-pad: clamp(4rem, 2rem + 9vw, 9rem);
  --gutter: clamp(1.15rem, 0.5rem + 3vw, 2.5rem);
  --maxw: 1240px;
  --maxw-narrow: 880px;

  /* --- Radius --- */
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px;

  /* --- Schatten --- */
  --sh-sm: 0 1px 2px rgba(10,21,33,.06), 0 2px 8px rgba(10,21,33,.05);
  --sh-md: 0 10px 30px -12px rgba(10,21,33,.18), 0 4px 12px -6px rgba(10,21,33,.10);
  --sh-lg: 0 30px 70px -30px rgba(10,21,33,.32), 0 10px 24px -16px rgba(10,21,33,.18);
  --sh-brand: 0 22px 60px -22px rgba(11,58,120,.55);

  /* --- Motion-Tokens --- */
  --dur-1: 0.35s; --dur-2: 0.6s; --dur-3: 1s; --dur-4: 1.3s;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-reveal: cubic-bezier(.16, 1, .3, 1);
  --ease-inout: cubic-bezier(.65, .05, .36, 1);

  /* --- Z-Index --- */
  --z-nav: 80;
  --z-cursor: 95;
  --z-preloader: 120;
  --z-overlay: 110;

  --header-h: 76px;
}

/* Breakpoints (Referenz, in @media verwendet):
   520 (xs) · 768 (sm) · 1024 (md) · 1280 (lg) */