/* ============================================================
   STEUERBERATUNG WANGELIN — Design System Variables
   ============================================================ */

:root {

  /* --- Farben --- */
  --clr-black:        #0d0d0d;
  --clr-black-deep:   #080808;
  --clr-red:          #e00000;
  --clr-red-dark:     #9b0000;
  --clr-white:        #ffffff;
  --clr-gray-light:   #f2f2f2;
  --clr-gray-mid:     #d8d8d8;
  --clr-gray-border:  #e0e0e0;
  --clr-text:         #1e1e1e;
  --clr-text-muted:   #666666;
  --clr-text-faint:   #999999;

  /* --- Typografie --- */
  --font-display: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  --font-body:    'Barlow', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --fs-hero:    clamp(48px, 6vw, 70px);
  --fs-h1:      clamp(38px, 4vw, 52px);
  --fs-h2:      clamp(28px, 3vw, 40px);
  --fs-h3:      clamp(18px, 2vw, 22px);
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-tiny:    12px;
  --fs-label:   11px;

  --lh-tight:   1.0;
  --lh-heading: 1.15;
  --lh-body:    1.75;

  /* --- Layout --- */
  --max-width:    1080px;
  --gutter:       clamp(20px, 4vw, 40px);
  --section-pad:  clamp(48px, 7vw, 80px);

  /* --- Abstände --- */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 64px;

  /* --- Rahmen --- */
  --border-thin:    0.5px solid var(--clr-gray-border);
  --border-mid:     1px solid var(--clr-gray-mid);
  --border-accent:  3px solid var(--clr-red);

  /* --- Übergänge --- */
  --transition-fast:   0.18s ease;
  --transition-base:   0.28s ease;
  --transition-slow:   0.4s ease;

  /* --- Schatten (sparsam einsetzen) --- */
  --shadow-card: 0 2px 12px rgba(0,0,0,0.06);

  /* --- Header --- */
  --header-bg:          var(--clr-black);
  --header-logo-pad:    18px 0 10px;
  --header-logo-pad-sm: 6px 0;
  --nav-link-color:     rgba(255,255,255,0.62);
  --nav-link-active:    var(--clr-white);
  --nav-active-bg:      rgba(224,0,0,0.14);

  /* --- Buttons --- */
  --btn-pad:     13px 30px;
  --btn-pad-lg:  15px 38px;
  --btn-fs:      13px;
  --btn-ls:      0.1em;
}
