/* ============================================================
   variables.css  –  Design-System
   ============================================================ */

/* ── Albert Sans @font-face (Variable Font, lokal gehostet) ── */
@font-face {
  font-family: 'Albert Sans';
  src: url('../fonts/albert-sans/AlbertSans-Variable.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Albert Sans';
  src: url('../fonts/albert-sans/AlbertSans-Variable-Italic.woff2') format('woff2');
  font-weight: 100 900; font-style: italic; font-display: swap;
}

/* ── Breakpoint-Referenz (nur als Kommentar) ─────────────────
   --bp-sm:  480px  (großes Smartphone)
   --bp-md:  768px  (Tablet Portrait)
   --bp-lg: 1024px  (Tablet Landscape / kleiner Laptop)
   --bp-xl: 1280px  (normaler Desktop)
   ──────────────────────────────────────────────────────────── */

:root {
  /* ── Farben ──────────────────────────────────────────────── */
  --color-bg:           #FFFFFF;
  /* ── Unternehmensfarben Rümmelin ────────────────────────── */
  --color-green:        #57ab27;   /* Grün */
  --color-blue:         #1bbbe9;   /* Blau */
  --color-gray-brand:   #eceded;   /* Markengrau */
  --color-gray-medium:  #d0d1d1;   /* etwas dunklerer Grauton für Akzente */

  --color-surface:      #F5F4F1;   /* warm off-white, Seiten-Hintergrund */
  --color-text:         #090402;
  --color-text-muted:   rgba(0,0,0,0.58);
  --color-text-subtle:  rgba(0,0,0,0.38);
  --color-accent:       #57ab27;   /* Grün – primärer Akzent (hover, Highlights) */
  --color-accent-hover: #469420;   /* Grün dunkler für Hover-States */
  --color-brand:        #1bbbe9;   /* Blau – Markenfarbe (Links, aktive Elemente) */
  --color-black:        #000000;
  --color-white:        #FFFFFF;
  --color-border:       rgba(0,0,0,0.12);
  --color-border-light: rgba(0,0,0,0.07);

  /* ── Schriften ───────────────────────────────────────────── */
  --font-display: 'Albert Sans', 'Helvetica Neue', sans-serif;
  --font-body:    'Albert Sans', 'Helvetica Neue', sans-serif;

  /* ── Typografie – Desktop (≥1025px) ─────────────────────── */
  --text-hero:   clamp(2rem, 7vw, 5.25rem);
  --text-h1:     clamp(2rem, 5vw, 3.75rem);
  --text-h2:     clamp(1.75rem, 3.5vw, 2.5rem);
  --text-h2-lg:  clamp(2rem, 4vw, 3rem);
  --text-h3:     clamp(1.375rem, 2.5vw, 2rem);
  --text-h4:     clamp(1.25rem, 2vw, 1.5rem);
  --text-h5:     clamp(1.25rem, 1.5vw, 1.5rem);
  --text-h6:     0.6875rem;
  --text-body:   1.125rem;   /* 18px */
  --text-lg:     1.25rem;    /* 20px */
  --text-sm:     1rem;       /* 16px */
  --text-xs:     0.875rem;   /* 14px */

  /* ── Gewichte ─────────────────────────────────────────────  */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;

  /* ── Zeilenhöhen ─────────────────────────────────────────── */
  --leading-tight:  1.05;
  --leading-snug:   1.2;
  --leading-normal: 1.55;
  --leading-wide:   1.72;

  /* ── Buchstabenabstände ──────────────────────────────────── */
  --tracking-label:  0.07em;
  --tracking-nav:    0.04em;
  --tracking-hero:  0.02em;

  /* ── Spacing-Skala ───────────────────────────────────────── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  6rem;
  --space-24:  8rem;
  --space-32: 11rem;

  /* ── Layout ──────────────────────────────────────────────── */
  --max-width:      1700px;
  --max-width-text:  780px;
  --container-px:   clamp(1.25rem, 4vw, 3.75rem);

  /* ── Header ──────────────────────────────────────────────── */
  --header-height:   80px;
  --header-px:       clamp(1.25rem, 4vw, 3.75rem);

  /* ── Buttons ─────────────────────────────────────────────── */
  --btn-padding:    14px 30px;
  --btn-size:       0.9375rem;
  --btn-weight:     var(--weight-regular);
  --btn-tracking:   0.04em;
  --btn-radius:     0px;

  /* ── Formulare ───────────────────────────────────────────── */
  --input-padding: 14px 16px;
  --input-border:  1px solid rgba(0,0,0,0.15);
  --input-color: black;
  --input-bg: white;

  /* ── Übergänge ───────────────────────────────────────────── */
  --transition-fast: 150ms ease;
  --transition-base: 280ms ease;

  /* ── Schatten ────────────────────────────────────────────── */
  --shadow-sm: 0 1px 6px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 24px rgba(0,0,0,0.07);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.12);
}

/* ── Tablet Landscape / kleiner Laptop (≤1024px) ─────────────── */
@media (max-width: 1024px) {
  :root {
    --header-height: 68px;
    --text-body:     1.0625rem;
    --text-lg:       1.125rem;
    --space-20:      4.5rem;
    --space-24:      6rem;
    --space-32:      8rem;
    --container-px:  1.5rem;
  }
}

/* ── Tablet Portrait (≤768px) ────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --header-height: 60px;
    --text-body:     1rem;
    --text-lg:       1.0625rem;
    --space-20:      3.5rem;
    --space-24:      5rem;
    --space-32:      6.5rem;
    --container-px:  1.25rem;
    --header-px:     1.25rem;
  }
}

/* ── Smartphone (≤480px) ─────────────────────────────────────── */
@media (max-width: 480px) {
  :root {
    --header-height: 65px;
    --text-body:     0.9375rem;
    --space-20:      2.5rem;
    --space-24:      4rem;
    --space-32:      5rem;
    --container-px:  1rem;
  }
}