:root {
  --pb-color-secondary-2-0: #01A6C4; /* #01A6C4 */
  --pb-color-secondary-2-1: #7AAEB7;
  --pb-gray:color-mix(in srgb,#000000  75%,white);
  

  --pb-body-bg: #01A6C4;
  --pb-body-bg: #c3c0c3;   /* Antique Door Pewter www.canva.com */
  --pb-container-bg: #bcd6db;
  --pb-container-bg: #97B1DF;  /* Antique Door Serenty www.canva.com */
  --pb-component-active-bg: #87C9A3; /* #87C9A3 */
  --pb-component-active-bg: #89CFF0; /* Baby blue */
  --pb-component-active-bg: purple; /* Baby blue */
  --pb-component-active-color: #fff; /* #fff */
  --pb-component-active-color: #FCC931; /* #Mimosa */

  --pb-font-family-base: "Verdana, Arial, Helvetica, sans-serif";
  --pb-font-size-base: 10pt; /* 10pt */
  --pb-font-size-h1: calc(var(--pb-font-size-base) * 2.6);
  --pb-font-size-h3: calc(var(--pb-font-size-base) * 1.7);
  --pb-font-size-h4: calc(var(--pb-font-size-base) * 1.25);
  --pb-font-size-h5: var(--pb-font-size-base);

  /* darken(container-bg, 10%) */
  /* Bedeutung                   Farbraum  farbe die erzeugt wird (90%)      restfarbe */
  --pb-header-navi-bg: color-mix(in srgb,  var(--pb-container-bg) 90%,       black);       /* 10 % black beimischen */

  /* darken(header-navi-bg, 5%) */
  --pb-header-navi-item-bg: color-mix(in srgb,var(--pb-header-navi-bg) 95%,black);

  --pb-link-color: #008F20;
  --pb-link-color: var(--pb-text-color);
  --pb-link-color-bg:         var(--pb-link-navigation-bg);

  --pb-link-navigation-color: var(--pb-gray); /* @gray */
  --pb-link-navigation-bg: var(--pb-component-active-color); 
  --pb-link-navigation-color-hover:
  --pb-link-navigation-bg-hover:
  /* darken(link-color, 15%) */
  --pb-link-hover-color: color-mix(in srgb,var(--pb-link-color) 85%,black);

  --pb-link-hover-color-bg: yellow;

  /* darken(navbar-default-bg, 6.5%) */
  --pb-navbar-default-border: color-mix(in srgb,var(--pb-navbar-default-bg) 93.5%,black);

  --pb-tableodd: var(--pb-container-bg); 

  /* darken(tableodd, 5%) */
  --pb-tableeven: color-mix(in srgb,var(--pb-tableodd) 95%,black);

  --pb-text-color: var(--pb-gray); /* @gray */
  --pb-border-radius: 10px;
  --pb-border-radius-full: 50%;
}
