:root {
  /* * * * * * * * * * */
  /* Farben            */
  /* * * * * * * * * * */

  /* Entweder Oder beim Hintergrund */

  /* OPTION 1 - Farbiger Hintergrund */
  --html-background: #FFF;

  /* OPTION 2 - Einzelnes Bild im Hintergrund */
  /*
  --html-background: url("https://placekitten.com/1920/1080") no-repeat center;
  --body-background-size: cover;
  */

  /* OPTION 3 - Wiederholendes Bild im Hintergrund */
  /*
  --html-background: url("http://rh3.rockethero.de/fileadmin/user_upload/Testbilder/koi-ga98e0b57c_640.png");
  --body-background-size: auto;
  */

  /* Bitte beachten in der settings.ts gib es noch den Wert lib.backgroundSetting */

  /* Primärfarbe
   * Wird grundsätzlich erstmal für sämtliche Buttons, Links, Hintergründ verwendet
   */
  --first-color: #7F9A77;
  --first-color-hover: #D8E0D6;
  
  --first-color-light: #BFCDBB;

  /* Sekundärfarbe
   * Wird nicht per Default verwendet, kann aber bei den meisten Elementen als Hintergrund oder Buttonfarbe eingestellet werden
   */
  --second-color: #9A8687;
  --second-color-hover: #b3999a;

  /* Call To Action - Farbe */
  --cta-color: hotpink;
  --cta-color-hover: red;

  --hyperlink-color: var(--first-color);
  --hyperlink-color-hover: var(--first-color-hover);

  /* Dark-Color
   * quasi das äquivalent zu schwarz - nur eben ein schwarz das einstellbar ist wie schwarz es sein soll
   */
  --dark-color: #595345;
  --dark-hover: #2c2922;

  /*  Light-Color
   *  quasi das "Grau"
   */
  --light-color: #F0F0F0;
  --light-color-trans: rgba(240,240,240,0.9);
  --light-hover: #d3d3d3;

  --brightest: #FFF; /* @bär herausfinden wo verwendet */

  --font-color: var(--dark-color);
  --background-color-elements: var(--light-color);
  --border-color-elements: var(--light-color);
  /* Achtung bei dem border-color-elements Wert der kann zwar auf transparent gesetzt werden,
   * allerdings sieht man dann hier und da die Hintergrundfarbe durchblitzen, eine Strategie
   * wäre den wert auf den wert der Hintergrundfarbe des Dokuments zu setzen, eine andere,
   * manuell die ganzen Rahmen auszustellen (kommt von Bootrstrap) ggf. auch einfach das
   * Bootstrap-Value (die var) überschreiben das könnte auch helfen muss man aber auch alles
   * danach nochmal prüfen.
   */

  /* Overlays */

  --overlay-color: rgba(0, 0, 0, 0);
  --overlay-font-color: #FFF;  /* Zugleich die Farbe für farbige Flächen und Buttons ;D */

  /* Ein paar besondere Styles */

  --meta-nav-background-color: var(--background-color-elements);
  --meta-nav-font-color: var(--font-color);
  --navbar-bg-color: var(--brightest);
  --navbar-font-color: var(--dark-color);
  --navbar-dropdown-bg-color: var(--navbar-bg-color);
  --navbar-dropdown-bg-color-hover: var(--light-hover);
  --navbar-dropdown-font-color: var(--navbar-font-color);
  --navbar-dropdown-font-color-hover: var(--dark-color);
  --navbar-boxshadow: none;
  --navbar-boxshadow-smallheader: 0 2px 10px rgba(0,0,0,.2);

  /* Farben für die Extension "Cookieman" */

  --accept-color: yellowgreen;
  --reject-color: crimson;
  --cookie-settings-color: lightgrey;
  --cookie-save-color: lightgrey;

  --accept-font-color: white;
  --reject-font-color: white;
  --cookie-settings-font-color: grey;
  --cookie-save-font-color: grey;

  /* * * * * * * * * * */
  /* Form              */
  /* * * * * * * * * * */
  --border-radius:	0px;
  --header-text-align: left ; /* Für header (layout) und headlines (html-nodes)  */

  /* * * * * * * * * * */
  /* Abstand           */
  /* * * * * * * * * * */
  --standard-margin: 80px;
  --standard-margin-md: 30px;
  --gap-distance: 15px;	/* z.B. bei Text/Medien margin Text und Bild */
  --standard-h-space-after: 20px;	/* headlines */
  --footer-padding: 60px;

  /* * * * * * * * * * */
  /* Schrift           */
  /* * * * * * * * * * */
  --schrift1: 'Open Sans', serif;  /* Überschriften */
  --schrift2: 'Open Sans', sans-serif;   /* Fließtext */

  --standard-font-size: 1rem;
  --fontAwesome: "Font Awesome 5 Free"; /* Wegen Versionen :) */
  --standard-line-height: 1.5;

  /* * * * * * * * * * */
  /* Gridcards         */
  /* * * * * * * * * * */
  --gc3-height: 65px;         /* bei gridcards layout "hover up" */
  --gc3-hoverheight: 100%;    /* bei gridcards layout "hover up" */

  /* * * * * * * * * * */
  /* Padding           */
  /* * * * * * * * * * */
  --ce-erscheinungsbild-padding-small: 30px;
  --ce-erscheinungsbild-padding-big: 60px;
}