/* ==========================================================================
   ProCon Insights — CSS Custom Properties (Corporate Design)
   Stand: 2026-03-29
   Verwendung: Im CRM einbinden via <link> VOR Bootstrap und App-CSS
   ========================================================================== */

:root {
    /* ------------------------------------------------------------------
       FARBEN — Primaer
       ------------------------------------------------------------------ */
    --procon-green:         #013B20;   /* Hauptfarbe: Buttons, Links, Topbar, Akzente */
    --procon-dark:          #012916;   /* Text-Akzent, Borders, Teaser-Titel */
    --procon-active:        #0B2E13;   /* Aktive Navigation, Hover-States */

    /* ------------------------------------------------------------------
       FARBEN — Neutral
       ------------------------------------------------------------------ */
    --procon-body-text:     #212529;   /* Fliesstext (Bootstrap Default) */
    --procon-gray:          #7F7F7F;   /* Dezenter Text, Tagline */
    --procon-gray-light:    #E9E9E9;   /* Hintergrund-Sektionen */
    --procon-gray-footer:   #BBBBBB;   /* Footer-Text */
    --procon-white:         #FFFFFF;   /* Haupthintergrund */

    /* ------------------------------------------------------------------
       FARBEN — Semantisch (Bootstrap-Overrides)
       ------------------------------------------------------------------ */
    --procon-primary:       var(--procon-green);
    --procon-primary-dark:  var(--procon-dark);

    /* ------------------------------------------------------------------
       TYPOGRAFIE
       ------------------------------------------------------------------ */
    --procon-font-family:   'Poppins', sans-serif;
    --procon-font-size-base: 1rem;         /* Mobile */
    --procon-font-size-lg:   1.25rem;      /* Desktop >= 1024px */

    --procon-font-weight-light:    300;
    --procon-font-weight-regular:  400;
    --procon-font-weight-medium:   500;
    --procon-font-weight-semibold: 600;
    --procon-font-weight-bold:     700;

    /* ------------------------------------------------------------------
       TYPOGRAFIE — Ueberschriften
       ------------------------------------------------------------------ */
    --procon-h1-size:       30px;
    --procon-h1-weight:     600;

    --procon-h2-size:       25px;          /* Mobile */
    --procon-h2-size-lg:    35px;          /* Desktop */
    --procon-h2-weight:     400;

    --procon-h2-line-color: var(--procon-green);
    --procon-h2-line-width: 120px;
    --procon-h2-line-height: 2px;

    /* ------------------------------------------------------------------
       KOMPONENTEN — Buttons
       ------------------------------------------------------------------ */
    --procon-btn-border-radius:  31px;     /* Pill-Form */
    --procon-btn-font-size:      20px;
    --procon-btn-min-width:      200px;
    --procon-btn-border-color:   var(--procon-dark);
    --procon-btn-text-color:     var(--procon-dark);
    --procon-btn-fill-color:     var(--procon-dark);

    /* ------------------------------------------------------------------
       KOMPONENTEN — Cards / Teaser
       ------------------------------------------------------------------ */
    --procon-card-shadow:        0px 8px 24px rgba(0, 0, 0, 0.15);
    --procon-card-shadow-hover:  0px 16px 48px rgba(0, 0, 0, 0.15);
    --procon-card-border-bottom: 5px solid var(--procon-green);
    --procon-card-border-hover:  15px solid var(--procon-green);

    /* ------------------------------------------------------------------
       KOMPONENTEN — Topbar
       ------------------------------------------------------------------ */
    --procon-topbar-bg:          var(--procon-green);
    --procon-topbar-text:        var(--procon-white);

    /* ------------------------------------------------------------------
       LAYOUT — Sektionen
       ------------------------------------------------------------------ */
    --procon-section-bg-alt:     var(--procon-gray-light);
    --procon-section-padding:    2rem;      /* Mobile */
    --procon-section-padding-lg: 5rem;      /* Desktop */

    /* ------------------------------------------------------------------
       GRADIENT
       ------------------------------------------------------------------ */
    --procon-gradient-banner:    linear-gradient(90deg, #013B20 0%, rgba(255,255,255,0) 100%);
    --procon-gradient-btn-fill:  linear-gradient(to left, transparent 50%, var(--procon-dark) 50%);
}