/*  ===================================================================================
    Themes.css: Here all the scripts and colors, but also margins and other spaces are defined.
                Befor tis css iscalled, the base and also the layout needs to be called.
                In root{} variables are defined which are will be used in later definitions.
    ===================================================================================*/

/*-----------------------
   General settings
   ---------------------- */    
/* Defines the reference font size for the document. */
html {
    font-size: 100%;
    background-color: var(--color-background-1);
}

body {
    font-size: 1.15rem; /* slidghlty increase script */
    line-height: 1.6;
}

/* ----------------------
   Scripts
   ---------------------- */
h1, h2, h3, h4 {
    font-family: var(--font-body);
    margin-bottom: 0.5em;
    font-weight: 600; /* modern, slightly lighter than bold */
}

h1 {
    font-size: 2.2em; /* ~35px */
    line-height: 1.2;
    letter-spacing: -0.02em;
}

h2 {
    font-size: 1.5em; /* ~24px */
    line-height: 1.25;
    letter-spacing: -0.01em;
}

h3 {
    font-size: 1.25em; /* ~20px */
    line-height: 1.25;
}

p {
    margin-bottom: 1.00em;
    line-height: 1.6;
}

/* ----------------------
   Links
   ---------------------- */
a:link {
    color: var(--color-link);
}

a:visited {
    color: var(--color-link-visited);
}

a:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
}

a:active {
    color: var(--color-link-active);
    text-decoration: underline;
}


/* ----------------------
   Table
   ---------------------- */
table {
    margin: 1.00rem 0; /* Center the table and give a small gap to the other adjacent elements*/
}

/* Header row */
th {
    background-color: var(--color-table-header);
    font-weight: bold;
}

/* Zebra stripes (optional) */
tbody tr:nth-child(even) {
    background-color: var(--color-table-row-even);
}

/* Slight highlight when hovering over a row (optional) */
tbody tr:hover {
    background-color: var(--color-table-row-hover);
}   


/* ----------------------
   Footer
   ---------------------- */
footer {
    background-color: var(--color-background-2); /* middle dark blue */
}


/* ----------------------
   Navigator and Aktuelles and Kontakt
   ---------------------- */
aside {
    background-color: var(--color-background-3); /* light blue */
    color: var(--color-text-1);
}


.right-column h1 {
    font-size: 1.25em;
}


.right-column h2 {
    font-size: 1.1em;
}


@media (max-width: 600px) {
    /* Navigatormenue for the button*/
    .mobile-nav {
        background-color: var(--color-background-3); /* light blue */
    }

    .menu-toggle {
        background: var(--color-background-3);
        border: 1px solid var(--color-background-2);

        font-size: 1.1rem;
        font-weight: 600;

        color: var(--color-text-1);

        padding: 0.25rem 0.5rem;
        border-radius: 2px;

    }
}