/* ============================================================
   Akquise.de Design Library — Design Tokens
   Quelle: Brand Styleguide 2026 (Figma ghFDG8s5X5av1A4SiCIKUi)
   Farbgewichtung: 40 % Weiß / 40 % Penthouse Grey / 15 % High
   Stakes Green / 5 % Winning Hand Emerald — Auftritt HELL & ruhig.
   ============================================================ */

:root {
  /* ---- Markenfarben (Styleguide) ---- */
  --akq-green-deep: #173021;      /* High Stakes Green — Basis, Text, dunkle Karten */
  --akq-emerald: #36AE66;         /* Winning Hand Emerald — NUR 5 %: CTAs, Highlights, Seitenzahlen */
  --akq-grey: #F4F4F4;            /* Penthouse Grey — Flächen */
  --akq-white: #FFFFFF;

  /* ---- Abgeleitete Töne (aus echten Figma-Komponenten) ---- */
  --akq-offwhite: #FAF8F8;        /* Preheadline-Hintergrund */
  --akq-btn-green: #20AC58;       /* Button-Gradient Mitte */
  --akq-btn-green-dark: #177B3F;  /* Button-Gradient Rand */

  /* ---- Text-/Linien-Töne (Design-System AKQ Tool-UI) ---- */
  --akq-text-2: #565046;          /* Fließtext gedämpft */
  --akq-mute: #868686;            /* sekundär / Captions */
  --akq-border: #D8D3C7;          /* Trennlinien */

  /* ---- Typografie ---- */
  --akq-font-sans: "TWK Everett", "Hanken Grotesk", -apple-system, sans-serif;
  --akq-font-serif: "IBM Plex Serif", Georgia, serif; /* NUR italic als Akzent */

  /* Tracking: Everett läuft bei Akquise immer leicht eng */
  --akq-tracking: -0.03em;        /* Standard (Headlines, Buttons, Preheadline) */
  --akq-tracking-serif: -0.06em;  /* IBM Plex Serif Italic Akzent-Anteile */

  /* ---- Radien ---- */
  --akq-radius-btn: 8px;          /* Button (bei ~40px Höhe; skaliert mit) */
  --akq-radius-card-sm: 14px;     /* Kerben-Karte kleiner Radius (r) */
  --akq-radius-card-lg: 15.25px;  /* Kerben-Karte großer Radius (R) */

  /* ---- Schatten (exakt aus Figma) ---- */
  --akq-inset-soft: inset -2px -2px 2.5px rgba(0, 0, 0, 0.05),
    inset 2px 2px 2.5px rgba(255, 255, 255, 0.06);          /* Preheadline */
  --akq-inset-btn: inset 0 -1.6px 1.6px rgba(0, 0, 0, 0.1),
    inset 0 1.6px 1.6px rgba(255, 255, 255, 0.1);           /* Button */
  --akq-shadow-card: 0 2px 4px rgba(0, 0, 0, 0.25);         /* Kerben-Karte dunkel */
  --akq-shadow-soft: 0 12px 40px rgba(23, 48, 33, 0.06);    /* helle Cards (FAQ, Feature) */

  /* ---- Layout / Web-Sektionen ---- */
  --akq-maxw: 1280px;            /* Content-Container (Figma: 1440 Frame, 1280 Content) */
  --akq-gutter: 80px;            /* seitl. Rand (Figma: 81px) */
  --akq-section-y: 120px;        /* vertikaler Sektionsabstand */
  --akq-radius-web: 16px;        /* weiche Web-Cards (FAQ etc.) ohne Kerbe */

  /* ---- Typo-Skala (Web) ---- */
  --akq-h-hero: clamp(38px, 5.2vw, 62px);   /* Hero-Headline */
  --akq-h-section: clamp(30px, 3.6vw, 46px);/* Section-Header-Headline */
  --akq-h-card: clamp(22px, 1.8vw, 26px);   /* Karten-Titel */
  --akq-body: 17px;             /* Fließtext */
  --akq-body-sm: 15px;          /* kleiner Text */
}