/* ==========================================================================
   GLOBAL.CSS: In this file global variables which are used in all *.css-file 
               are defined here.
               Globaal.cssmust be called as the first *-css-file, but at least
               before loaout.css and themes.css are called.
   ========================================================================== */


   :root {
    --color-background-1: #faf7f2; /* Full background*/
    --color-background-2: #30395c; /* Footer */
    --color-background-3: #c2d2e5; /* Side-stripes, navigation and aktuelles and Kontakt*/

    --color-text-1: var(--color-background-2); /* Text with no other specification is defined as black*/
    
    --color-link: #1f4e79;
    --color-link-visited: #4f6475;
    --color-link-hover: #0f2f4d;
    --color-link-actice: #0f2f4d;
    
    --color-lightbox-elements: var(--color-background-1); /* Color of the elements in the lightbox (text, buttons, etc.)*/
    --color-lightbox-background: rgba(0,0,0,0.9); /* Dark overlay */

    --color-table-header: #d7d8da;
    --color-table-row-even: #faf7f2;
    --color-table-row-hover: #f5f5f5;

    /* The width when the tablet mode and the mobile mode are active needs to be fixed deined in layout.css*/
    /* Currently 800px and 600px; !! when 600px is changed also change const "mq" in "main.js" to 600 + 1px !!*/

    --width-of-whole-content: 78rem;    
    --fixed-width-first-column: 150px;
    --fixed-width-third-column: 250px;
    
    --width-images-in-home-text: 250px;

    --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}