/** Standardfarben für hellen Modus **/
:root {

  /** Hintergrundfarbe Body - weiss **/
  /** Hintergrundfarbe der Webseite,Wrapper,Header,Main und Footer **/
  --bgBody   : rgb(255 255 255 / 100%);
  --bgWrapper: var(--bgBody);
  --bgHeader : var(--bgBody);
  --bgMain   : var(--bgBody);
  --bgFooter : var(--bgBody);

  /* Hintergrundfarben */
  --clPositiv: rgb(0 160 0 / 100%);
  --clNeutral: rgb(100 100 100 / 100%);
  --clNegativ: rgb(255 0 0 / 100%);

  /* Hintergrundfarben */
  --clBG  : var(--bgBody);
  --clBG99: rgb(255 255 255 / 99%);
  --clBG95: rgb(255 255 255 / 95%);
  --clBG90: rgb(255 255 255 / 90%);
  --clBG85: rgb(255 255 255 / 85%);
  --clBG75: rgb(255 255 255 / 75%);
  --clBG50: rgb(255 255 255 / 50%);
  --clBG25: rgb(255 255 255 / 25%);
  --clBG15: rgb(255 255 255 / 15%);
  --clBG0 : rgb(255 255 255 / 0%);

  /** Standardfarbe von Border und deren Abstufungen */
  --clLineBlack: rgb(66 66 66 / 100%);
  --clLineDark : rgb(111 111 111 / 100%);
  --clLineHell : rgb(188 188 188 / 100%);
  --clLineThin : rgb(233 233 233 / 100%);

  --clLine  : rgb(180 180 180 / 100%);
  --clLine75: rgb(180 180 180 / 75%);
  --clLine50: rgb(180 180 180 / 50%);
  --clLine25: rgb(180 180 180 / 25%);

  --clBorder  : rgb(160 160 160 / 100%);
  --clBorder75: rgb(160 160 160 / 75%);
  --clBorder50: rgb(160 160 160 / 50%);
  --clBorder25: rgb(160 160 160 / 25%);

  /* Schrift */
  --clSchrift  : rgb(66 66 66 / 100%);
  --clSchrift75: rgb(66 66 66 / 75%);
  --clSchrift50: rgb(66 66 66 / 50%);
  --clSchrift25: rgb(66 66 66 / 25%);

  --clBlack  : rgb(11 11 11 / 100%);
  --clBlack75: rgb(11 11 11 / 75%);
  --clBlack50: rgb(11 11 11 / 50%);
  --clBlack25: rgb(11 11 11 / 25%);

  /* Sonder-Farben Schrift */
  --clHover  : rgb(255 0 0 / 100%);
  --clOffen  : var(--clSchrift);
  --clFocus  : rgb(00 33 99 / 100%);
  --clInvalid: var(--clSchrift);
  --clValid  : var(--clSchrift);
  --clAktiv  : rgb(255 255 255 / 100%);
  --clUpdate : rgb(190 127 0 / 100%);
  --clFehler : rgb(190 0 0 / 100%);
  --clOK     : rgb(0 127 0 / 100%);

  /* Sonder-Farben-Background */
  --bgHover  : var(--bgBody);
  --bgOffen  : var(--bgBody);
  --bgFocus  : rgb(220 230 255 / 100%);
  --bgInvalid: var(--bgBody);
  --bgValid  : var(--bgBody);
  --bgAktiv  : rgb(0 127 0 / 100%);
  --bgUpdate : rgb(255 200 127 / 50%);
  --bgFehler : rgb(255 200 200 / 50%);
  --bgOK     : rgb(200 255 200 / 50%);

  /* Edit-Farben-Border */
  --bcHover  : var(--clBorder);
  --bcOffen  : var(--clLine);
  --bcFocus  : var(--clFocus);
  --bcInvalid: var(--clInvalid);
  --bcValid  : var(--clValid);
  --bcAktiv  : var(--clAktiv);
  --bcUpdate : var(--clUpdate);
  --bcFehler : var(--clFehler);
  --bcOK     : var(--clOK);

  /* Button / Schalter / usw */
  --btnSchrift         : var(--clSchrift);
  --btnBG              : var(--bgBody);
  --btnHover           : rgb(255 0 0 / 100%);
  --btnHoverSchrift    : var(--bgBody);
  --btnHoverGray       : rgb(160 160 160 / 33%);
  --btnHoverGraySchrift: rgb(33 33 33 / 100%);

  /* Farben Scrollbar */
  --scHintergrund: var(--clBody);
  --scButton     : var(--clSchrift);
  --scThumb      : var(--clSchrift);
  --scBorderColor: var(--clSchrift20);
  --scRadius     : 1px;
  --scWidth      : 3px;
  --scHeight     : 3px;
  --scBorderWidth: 1px;
  --scWidthStart : thin;

  /* Schatten sh */
  --clShadow: rgba(160, 160, 160, 0.6);

  --shLength  : 1em;
  --shVerlaufP: 0.25em;
  --shVerlaufN: -0.25em;

  --shBox     : 0 0 var(--shLength) var(--clShadow);
  --shBoxOLUR : var(--shVerlaufP) var(--shVerlaufP) var(--shLength) var(--clShadow);
  --shBoxORUL : var(--shVerlaufN) var(--shVerlaufP) var(--shLength) var(--clShadow);
  --shBoxUROL : var(--shVerlaufP) var(--shVerlaufN) var(--shLength) var(--clShadow);
  --shBoxULOR : var(--shVerlaufN) var(--shVerlaufN) var(--shLength) var(--clShadow);
  --shBoxLR   : var(--shVerlaufP) 0 var(--shLength) var(--clShadow);
  --shBoxRL   : var(--shVerlaufN) 0 var(--shLength) var(--clShadow);
  --shBoxOU   : 0 var(--shVerlaufP) var(--shLength) var(--clShadow);
  --shBoxUO   : 0 var(--shVerlaufN) var(--shLength) var(--clShadow);
  --shBoxI    : var(--shBox) inset;
  --shBoxOLURI: var(--shBoxOLUR) inset;
  --shBoxORULI: var(--shBoxORUL) inset;
  --shBoxUROLI: var(--shBoxORUL) inset;
  --shBoxULORI: var(--shBoxULOR) inset;
  --shBoxLRI  : var(--shBoxLR) inset;
  --shBoxRLI  : var(--shBoxRL) inset;
  --shBoxOUI  : var(--shBoxOU) inset;
  --shBoxUOI  : var(--shBoxUO) inset;

  /** Radius **/
  --boRadius: 5px;

  /** Farben von Listen */
  --clListeBG       : rgba(160, 160, 160, 0.2);
  --clListePages    : rgba(160, 160, 160, 0.5);
  --clListePageAktBG: rgba(0, 128, 0, 1);
  --clListePageAkt  : rgba(255, 255, 255, 1);

  --clListeKopf     : rgba(160, 160, 160, 0.3);
  --clListeSuche    : rgba(160, 160, 160, 0.4);
  --clListeSucheFeld: rgba(255, 255, 255, 0.4);

  --clListeZeileFirst: rgba(255, 255, 255, 0.2);
  --clListeZeileOdd  : rgba(255, 255, 255, 0.3);
  --clListeZeileEven : rgba(255, 255, 255, 0.4);

  --clListeSpalteFirst: rgba(255, 255, 255, 0.3);
  --clListeSpalteOdd  : rgba(255, 255, 255, 0.4);
  --clListeSpalteEven : rgba(255, 255, 255, 0.5);

  --clListeZeileAktiv : rgba(255, 255, 255, 0.5);
  --clListeSpalteAktiv: rgba(255, 255, 255, 0.5);
  --clListeZelleAktiv : rgba(255, 255, 255, 0.5);

  /** Glass darstellen */
  --bgGlassBlue : linear-gradient(315deg, rgba(20, 43, 90, 0.6), rgba(0, 22, 66, 0.8));
  --bgGlassWhite: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.2));
  --bgGlassRed  : linear-gradient(270deg, rgba(255, 0, 0, 0.05), rgba(255, 0, 0, 0.1));
  --bgGalerie   : linear-gradient(315deg, rgba(20, 43, 90, 0.6), rgba(0, 22, 66, 0.8));

  /** Dropfilter */
  --dropFilter40: blur(40px);
  --dropFilter20: blur(20px);
  --dropFilter10: blur(10px);
  --dropFilter5 : blur(5px);
  --dropFilter2 : blur(2px);

  /* Standardwerte */
  --stdWidth : 80em;
  --maxWidth : 100%;
  --maxHeader: 4rem;
  --maxFooter: 2rem;

  --gap: 0.75em;
}

/** -- MEDIENGROESSE -- **/
@media screen and (max-width:1280px) {}

@media screen and (max-width:1140px) {}

@media screen and (max-width: 960px) {}

@media screen and (max-width: 786px) {
  :root {
    --gap: 0.5em;
  }
}

@media screen and (max-width: 640px) {
  :root {
    --gap: 0.35em;
  }
}

@media screen and (max-width: 480px) {
  :root {
    --maxHeader: 3rem;
    --gap: 0.25em;
  }
}

@media screen and (max-width: 400px) {}

@media screen and (max-width: 320px) {}