/* ════════════════════════════════════════════
   PROFIX – CSS VARIABLEN & RESET
   variables.css
════════════════════════════════════════════ */

:root {
  /* Farben */
  --blue:         #4a8dc4; /* Stahlblau passend zum Logo */
  --red:          #e01a1a;
  --red-dark:     #a80f0f;
  --red-glow:     rgba(224,26,26,0.35);
  --red-subtle:   rgba(224,26,26,0.08);
  --black:        #0a0a0a;
  --dark:         #111111;
  --dark2:        #1a1a1a;
  --dark3:        #222222;
  --gray:         #888888;
  --gray-light:   #aaaaaa;
  --light:        #f0f0f0;
  --white:        #ffffff;

  /* Borders */
  --border:       rgba(255,255,255,0.07);
  --border-red:   rgba(224,26,26,0.30);
  --border-light: rgba(255,255,255,0.12);

  /* Fonts */
  --font-display: 'Bebas Neue', sans-serif;
  --font-condensed: 'Barlow Condensed', sans-serif;
  --font-body:    'Barlow', sans-serif;

  /* Spacing */
  --section-pad:  90px 5%;
  --nav-height:   64px;

  /* Radii */
  --radius:       2px;
  --radius-md:    6px;

  /* Transitions */
  --transition:   all .2s ease;
  --transition-slow: all .4s ease;

  /* Shadows */
  --shadow-red:   0 4px 20px var(--red-glow);
  --shadow-dark:  0 8px 32px rgba(0,0,0,0.5);
}

/* ── RESET ── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background: var(--black);
  color: var(--light);
  font-family: var(--font-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; }