/* ============================================================
   DESIGN-SYSTEM — Wiemken Elektrotechnik
   Hier sind alle Farben, Schriftgrößen und Abstände definiert.
   Ändere einen Wert hier → er gilt sofort überall auf der Seite.
   ============================================================ */

/* Farben und Schrift folgen Briefbogen und Visitenkarte:
   Orange = CMYK 0/75/100/0, Dunkelgrau = 91 % Schwarz, Schrift = Arial.
   Arial ist eine Systemschrift — es wird nichts von fremden Servern geladen,
   deshalb braucht die Seite dafür keinen Einwilligungs-Banner. */

:root {

  /* --- Farben --- */
  --color-base:        #3C3C3B;   /* Marken-Dunkelgrau — Kopfzeile, dunkle Flächen, Überschriften */
  --color-accent:      #F26522;   /* Marken-Orange — Buttons, Linien, Symbole */
  --color-accent-dark: #C24A0C;   /* Dunkleres Orange — Textlinks auf Weiß (Kontrast), Hover */
  --color-white:       #FFFFFF;
  --color-bg:          #FFFFFF;   /* Seiten-Hintergrund */
  --color-bg-alt:      #F5F4F2;   /* Leicht getönter Abschnittshintergrund */
  --color-border:      #DDDBD8;   /* Dezente Trennlinien */
  --color-text:        #2C2C2C;   /* Normaler Fließtext */
  --color-text-muted:  #5A5A5A;   /* Nebentext, Bildunterschriften */
  --color-error:       #C0392B;   /* Formular-Fehlermeldungen */

  /* --- Typografie --- */
  /* Schriftgröße: Basis 18 px — bewusst groß für ältere Nutzer */
  --font-family: Arial, Helvetica, sans-serif;
  --font-size-xs:   0.875rem;   /*   14 px — kleiner wird Text nirgends */
  --font-size-sm:   1rem;       /*   16 px */
  --font-size-base: 1.125rem;   /*  ~18 px */
  --font-size-lg:   1.25rem;    /*  ~20 px */
  --font-size-xl:   1.5rem;     /*  ~24 px */
  --font-size-2xl:  2rem;       /*  ~32 px */
  --font-size-3xl:  2.5rem;     /*  ~40 px */
  --font-size-4xl:  3rem;       /*  ~48 px */

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold:   700;

  --line-height-tight:  1.2;
  --line-height-normal: 1.6;
  --line-height-loose:  1.8;

  /* --- Abstände (Spacing-Skala) --- */
  --space-1:  0.25rem;   /*  4 px */
  --space-2:  0.5rem;    /*  8 px */
  --space-3:  0.75rem;   /* 12 px */
  --space-4:  1rem;      /* 16 px */
  --space-5:  1.25rem;   /* 20 px */
  --space-6:  1.5rem;    /* 24 px */
  --space-8:  2rem;      /* 32 px */
  --space-10: 2.5rem;    /* 40 px */
  --space-12: 3rem;      /* 48 px */
  --space-16: 4rem;      /* 64 px */
  --space-20: 5rem;      /* 80 px */
  --space-24: 6rem;      /* 96 px */

  /* --- Layout --- */
  --max-width:        1100px;   /* Maximale Inhaltsbreite */
  --max-width-text:    680px;   /* Breite für reine Textblöcke */
  --border-radius-sm:   4px;
  --border-radius:      8px;
  --border-radius-lg:  12px;

  /* --- Schatten --- */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow:    0 4px 12px rgba(0,0,0,0.10);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);

  /* --- Übergänge --- */
  --transition: 0.2s ease;
}