/* ==========================================================================
   VETSICHT | Design Tokens
   Einzige Quelle der Wahrheit. Elementor-Globals spiegeln diese Werte.
   Leitgedanke: Haarlinien statt Schatten, kleine Radien, viel Weißraum,
   Magenta bewusst sparsam.
   ========================================================================== */

:root {

  /* --- Marke ------------------------------------------------------------ */
  --vs-primary:        #ED127C;
  --vs-primary-dark:   #D80F6F;   /* Buttonfläche und Textlinks */
  --vs-primary-deep:   #B60C5D;   /* Button-Hover */   /* Textlinks, kontrastkritische Elemente */
  --vs-primary-rgb:    237, 18, 124;

  /* --- Neutral ---------------------------------------------------------- */
  --vs-dark:           #111011;
  --vs-dark-soft:      #262225;
  --vs-body:           #4B454A;
  --vs-muted:          #817980;   /* nur große Schrift */
  --vs-muted-strong:   #6E666D;   /* kleine Meta-Texte, 5,55:1 */

  /* --- Flächen ---------------------------------------------------------- */
  --vs-page:           #EBE9E7;   /* Hintergrund hinter dem Inhaltsblatt */
  --vs-white:          #FFFFFF;
  --vs-light:          #FBF9FA;
  --vs-warm-white:     #F7F6F4;
  --vs-soft-pink:      #FDE8F1;

  /* --- Linien ----------------------------------------------------------- */
  --vs-hairline:        rgba(17, 16, 17, .09);
  --vs-hairline-strong: rgba(17, 16, 17, .16);
  --vs-hairline-light:  rgba(255, 255, 255, .12);
  --vs-border:          #DED6DA;
  --vs-border-soft:     #EEE8EA;

  /* --- Typografie ------------------------------------------------------- */
  --vs-font-body:  'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --vs-font-head:  'Plus Jakarta Sans', 'Geist', system-ui, -apple-system, sans-serif;

  --vs-fs-h1:      clamp(2.5rem, 3.6vw, 3.25rem);        /* 40 – 52 px */
  --vs-fs-h2:      clamp(2rem, 2.8vw, 2.625rem);         /* 32 – 42 px */
  --vs-fs-h3:      clamp(1.5rem, 1.8vw, 1.75rem);        /* 24 – 28 px */
  --vs-fs-h4:      clamp(1.1875rem, 1.3vw, 1.3125rem);   /* 19 – 21 px */
  --vs-fs-lead:    clamp(1.125rem, 1.25vw, 1.1875rem);   /* 18 – 19 px */
  --vs-fs-body:    1.0625rem;                            /* 17 px */
  --vs-fs-ui:      0.9375rem;                            /* 15 px, Navigation und Buttons */
  --vs-fs-small:   0.875rem;                             /* 14 px */
  --vs-fs-eyebrow: 0.8125rem;                            /* 13 px */

  --vs-lh-tight:   1.06;
  --vs-lh-head:    1.18;
  --vs-lh-body:    1.62;

  --vs-ls-h1:      -0.032em;
  --vs-ls-h2:      -0.028em;
  --vs-ls-h3:      -0.02em;
  --vs-ls-h4:      -0.012em;

  --vs-w-head:     600;   /* Überschriften bewusst nicht 700 */
  --vs-w-ui:       500;

  --vs-measure:    66ch;

  /* --- Abstände --------------------------------------------------------- */
  --vs-space-1: 4px;   --vs-space-2: 8px;   --vs-space-3: 12px;
  --vs-space-4: 16px;  --vs-space-5: 20px;  --vs-space-6: 24px;
  --vs-space-8: 32px;  --vs-space-10: 40px; --vs-space-12: 48px;
  --vs-space-16: 64px; --vs-space-20: 80px; --vs-space-24: 96px;

  --vs-section-y:  clamp(72px, 8vw, 128px);
  --vs-gap-head:   clamp(18px, 1.8vw, 22px);
  --vs-gap-intro:  clamp(40px, 4vw, 52px);
  --vs-gap-cta:    clamp(28px, 3vw, 36px);
  --vs-gap-cards:  clamp(20px, 2vw, 28px);
  --vs-gap-group:  clamp(48px, 5vw, 68px);

  /* --- Breiten ---------------------------------------------------------- */
  --vs-w-site:     1320px;
  --vs-w-content:  1240px;
  --vs-w-text:     720px;
  --vs-w-head-max: 800px;
  --vs-gutter:     44px;

  /* --- Inhaltsblatt ----------------------------------------------------- */
  --vs-sheet-gap:    12px;
  --vs-sheet-radius: 18px;

  /* --- Radien ----------------------------------------------------------- */
  --vs-r-sm:            6px;
  --vs-r-md:            8px;
  --vs-r-lg:            10px;
  --vs-r-xl:            14px;
  --vs-r-2xl:           18px;
  --vs-r-pill:          999px;
  --vs-r-button:        10px;
  --vs-r-input:         10px;
  --vs-r-card:          14px;
  --vs-r-card-feature:  16px;
  --vs-r-cta:           18px;

  /* --- Schatten: bewusst fast nicht vorhanden --------------------------- */
  --vs-shadow-xs:  0 1px 2px rgba(17, 16, 17, .03);
  --vs-shadow-sm:  0 8px 24px rgba(17, 16, 17, .05);
  --vs-shadow-md:  0 14px 40px rgba(17, 16, 17, .07);

  /* --- Bewegung --------------------------------------------------------- */
  --vs-t-fast:  150ms;
  --vs-t-base:  220ms;
  --vs-t-slow:  400ms;
  --vs-ease:    cubic-bezier(.4, 0, .2, 1);

  /* --- Zustände --------------------------------------------------------- */
  --vs-focus-ring:   0 0 0 3px rgba(237, 18, 124, .14);
  --vs-focus-color:  var(--vs-primary-dark);

  /* --- Ebenen ----------------------------------------------------------- */
  --vs-z-mega:    90;
  --vs-z-header:  100;
  --vs-z-drawer:  110;
  --vs-z-skip:    120;
}

/* Gutter-Stufen: identisch zu den Elementor-Bandpolstern */
@media (max-width: 1024px) { :root { --vs-gutter: 28px; } }
@media (max-width: 767px)  { :root { --vs-gutter: 18px; } }