/* 
 * CSS-Variablen für wissen4vertrieb.de
 * Zentrale Stelle für alle wiederverwendbaren Werte
 */

:root {
  /* Farbschema */
  --primary-color: #0CC0DF;     /* Hauptfarbe: Türkis */
  --secondary-color: #001373;   /* Sekundärfarbe: Dunkelblau */
  --accent-color: #CADCEC;      /* Akzentfarbe */
  --text-color: #333333;        /* Standardtextfarbe */
  --light-text-color: #666666;  /* Hellere Textfarbe für weniger wichtige Elemente */
  --border-color: #e2e8f0;      /* Standardfarbe für Rahmen */
  --background-color: #ffffff;  /* Hintergrundfarbe für Container */
  --page-background: #e5e8f0;   /* Hintergrundfarbe für die gesamte Seite - mittleres Blaugrau */
  
  /* Bootstrap-Überschreibungen */
  --bs-body-bg: var(--page-background) !important;
  --bs-body-color: var(--text-color);
  --bs-card-bg: var(--background-color) !important;
  --bs-card-color: var(--text-color) !important;
  --bs-dark-rgb: 255, 255, 255 !important;
  --bs-body-bg-rgb: 229, 232, 240 !important;
  
  /* Abstände */
  --spacing-xs: 0.25rem;  /* 4px */
  --spacing-sm: 0.5rem;   /* 8px */
  --spacing-md: 1rem;     /* 16px */
  --spacing-lg: 1.5rem;   /* 24px */
  --spacing-xl: 2rem;     /* 32px */
  --spacing-2xl: 3rem;    /* 48px */
  --spacing-3xl: 4rem;    /* 64px */
  
  /* Typografie-Basis */
  --base-font-size: 16px;
  --base-font-size-tablet: 20px;
  --scale-ratio: 1.2;
  --font-family-base: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-headings: 'Helvetica', Arial, sans-serif;
  --font-size-base: 1rem;
  
  /* Schriftgrößen-Hierarchie */
  --text-xs: calc(var(--base-font-size) * 0.75);
  --text-sm: calc(var(--base-font-size) * 0.875);
  --text-base: var(--base-font-size);
  --text-lg: calc(var(--base-font-size) * 1.125);
  --text-xl: calc(var(--base-font-size) * 1.25);
  --text-2xl: calc(var(--base-font-size) * 1.5);
  --text-3xl: calc(var(--base-font-size) * 1.875);
  --text-4xl: calc(var(--base-font-size) * 2.25);
  
  /* Alternative Schriftgrößen-System */
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  
  /* Zeilenhöhen */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  --line-height-base: 1.5;
  --heading-line-height: 1.2;
  
  /* Layout */
  --site-content-width: 1140px;
  --site-content-padding-left: 15px;
  --site-content-padding-right: 15px;
  
  /* Rahmen */
  --border-radius-sm: 0.25rem;
  --border-radius-md: 0.375rem;
  --border-radius-lg: 0.5rem;
  --border-width: 1px;
  
  /* Schatten */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  
  /* Übergänge */
  --transition-fast: 0.15s;
  --transition-normal: 0.3s;
  --transition-slow: 0.5s;
}

/* Tablet-spezifische Anpassungen */
@media (min-width: 768px) and (max-width: 1024px) {
  :root {
    /* Signifikant vergrößerte Schriftgrößen für Tablets */
    --font-size-base: 1.8rem;
    --font-size-sm: 1.6rem;
    --font-size-md: 1.8rem;
    --font-size-lg: 2.2rem;
    --font-size-xl: 2.6rem;
    
    /* Stark vergrößerte Abstände für bessere Lesbarkeit */
    --spacing-xs: 1rem;
    --spacing-sm: 1.5rem;
    --spacing-md: 2rem;
    --spacing-lg: 3rem;
    --spacing-xl: 4rem;
    
    /* Anpassung der Rahmen und Schatten */
    --border-radius: 8px;
    --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
}

/* Mobile Anpassungen */
@media (max-width: 576px) {
  :root {
    --spacing-xl: 1.5rem;
    --spacing-2xl: 2rem;
    --spacing-3xl: 3rem;
  }
}