:root {
    /*--------------------------------------Schriftgrößen-------------------------------------------
    ---------------------------------------------------------------------------------------------- */
    /* Responsive Schriftgröße */
    font-size: clamp(14px,1.79vh,19px);

    /*---------------------------------------Farbpalette--------------------------------------------
    ---------------------------------------------------------------------------------------------- */

  --colorPrimary: #008EAD;
  --colorSecondary: #F4C96B ;
  --colorAccent:  #D40091;

  --colorBg: #D2F7FF;
  --colorActive: #F2FEFF;

  --colorTextBlack: #2D3838;
  --colorTextWhite: #F2FEFF;
  --colorTextGreen: #008EAD;

  --colorBlackDdeep: #000000;
  --colorBlack: #2D3838;
  --colorOffWhite: #F2FEFF;
  --colorWhite: #ffffff;

  --gradientLesbarkeit: linear-gradient(180deg, rgba(55, 18, 18, 0.6) 55.77%, rgba(102, 102, 102, 0.60) 100%);

    /*--------------------------------------12 Grid Flex Layout------------------------------------
    ---------------------------------------------------------------------------------------------- */
    
    --gridGutter: 24px;


    /* -------------------------------------Abstände------------------------------------------------
    ---------------------------------------------------------------------------------------------- */

    --spacing-xxs:  8px;
    --spacing-xs:   16px;
    --spacing-s:    24px;
    --spacing-m:    32px;
    --spacing-l:    40px;
    --spacing-xl:   48px;
    --spacing-xxl:  56px;
    --spacing-xxxl: 64px;
}

/* Farben für den Farbenblindheits Modus */
:root.colorblind-on{
  --color-TextBlack: black;
  --colorTextWhite: white;
  --colorTextGreen:  #0172B2;
  --colorPrimary: #0172B2;
  --colorOffWhite: white;
  --colorAccent: black;
}

/* responsive Schriftgröße auf gängige Tablet größen Abstimmen */
@media screen and (min-width:481px) and (max-width:1366px){
  :root{
    font-size: clamp(11px, 1.5vh, 19px);

  }
}