: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: #0a2f63;
   --first-color-hover: #2d77be;

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

   /* 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: #222;
   --dark-hover: #333;

   /*  Light-Color
   *  quasi das "Grau"
   */
   --light-color: #F0F0F0;
   --light-hover: #ccc;

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

   --font-color: var(--dark-color);
   --background-color-elements: var(--light-color);
   --border-color-elements: var(--light-color);
   --background-color-elements-hover: #ddd;
   --border-color-elements-hover: #ddd;
   /* 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(50,0,0,.5);
   --overlay-font-color: #FFF;  /* Zugleich die Farbe für farbige Flächen und Buttons ;D */
   --overlay-color-layout-101: rgba(100,50,00,.75); /* Layouts: Header, Overlay farbig */

   /* Ein paar besondere Styles */

   /* * * * * * * * * * */
   /* Meta-Nav          */
   /* * * * * * * * * * */
   --meta-nav-background-color: var(--background-color-elements);
   --meta-nav-font-color: var(--font-color);

   /* * * * * * * * * * */
   /* Navigation        */
   /* * * * * * * * * * */

   /*
   *  aktive states -> ggf. noch underscore animation wieder reinmachen
   *  navbar bg radius unabhängig
   *  restlichen header noch checken bzw. normales dropdown ohne megamenu
   */

   --navbar-bg-color: var(--brightest);
   --navbar-font-color: var(--dark-color);
   --navbar-font-color-hover: var(--first-color);
   --navbar-font-bg-color-hover: transparent;
   --navbar-active-color: var(--first-color);
   --navbar-active-bg-color: transparent;
   --navbar-active-color-hover: var(--first-color);
   --navbar-active-bg-color-hover: transparent;
   --navbar-dropdown-bg-color: var(--navbar-bg-color);
   --navbar-dropdown-bg-color-hover: var(--light-hover);
   --navbar-dropdown-level2-bg-color: var(--light-color);
   --navbar-dropdown-level2-bg-color-hover: var(--brightest);
   --navbar-dropdown-font-color: var(--navbar-font-color);
   --navbar-dropdown-level2-font-color: var(--font-color);
   --navbar-dropdown-level2-font-color-hover: var(--first-color);
   --navbar-dropdown-font-color-hover: var(--dark-color);
   --navbar-boxshadow: none;
   --navbar-boxshadow-smallheader: 0 2px 10px rgba(0,0,0,.2);
   --navbar-border-radius: 0px;
   --navbar-border-radius-underscore: 0px;
   --navbar-underscore-color: var(--first-color);
   --navbar-underscore-color-active: var(--second-color);
   --navbar-level1-underscore: 0px;

   --megamenu-backdrop-bg-color: #fafafa;
   --megamenu-buttons-background-color: rgba(0,0,0,.05);
   --megamenu-buttons-background-color-hover: rgba(0,0,0,.05);
   --megamenu-buttons-color: var(--font-color);
   --megamenu-buttons-color-hover: var(--font-color);

   --megamenu-submenu-buttons-background-color: transparent;
   --megamenu-submenu-buttons-background-color-hover: transparent;
   --megamenu-submenu-buttons-color: var(--font-color);
   --megamenu-submenu-buttons-color-hover: var(--font-color);

   --megamenu-backbutton-color: var(--font-color);
   --megamenu-backbutton-color-hover: var(--font-color);
   --megamenu-backbutton-bg-color: transparent;
   --megamenu-backbutton-bg-color-hover: transparent;

   --megamenu-submenu-backdrop-color: var(--brightest);

   /* 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: 60px;
   --standard-margin-md: 30px;
   --gap-distance: 15px;	/* z.B. bei Text/Medien margin Text und Bild */
   --standard-h-space-after: 10px;	/* headlines */
   
   @media (min-width: 1700px) {
	   --standard-h-space-after: 20px;	/* headlines */
   }

   /* * * * * * * * * * */
   /* Footer            */
   /* * * * * * * * * * */
   --footer-padding: 0px;
   --footer-background-color: #fff;
   --footer-font-size: 16px;
   --footer-icon-size: 16px;
   --footer-icon-width: 22px;
   --footer-font-color: #fff;
   --footer-link-color: #fff;;
   --footer-link-hover-color: rgba(255,255,255,0.5);

   /* * * * * * * * * * */
   /* Schrift           */
   /* * * * * * * * * * */
   --schrift1: 'Ubuntu', sans-serif;  /* Überschriften */
   --schrift2: 'Ubuntu', 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;

   /* * * * * * * * * * * * * * * * * * * */
   /* Ab 1500px, Sonderbreite von ...     */
   /* * * * * * * * * * * * * * * * * * * */
   --container-sonderbreit-bs-default: 1320px;
   /* Der Wert ist Referenz-Wert, wenn die Vergrößerung erst später erfolgen soll
    * kann diese Variable erstmal statt 1450 eingefügt werden, oder du schreibst
    * einfach 1320 hin (: ansonsten startet es wie folgt:
    */
   --container-sonderbreite: 1450px;
   --container-sonderbreite-1600: var(--container-sonderbreite);
   --container-sonderbreite-1700: var(--container-sonderbreite);
   --container-sonderbreite-1800: var(--container-sonderbreite);
   --container-sonderbreite-1900: var(--container-sonderbreite);
}