:root {
    /* Grundfarben */
    --color1: #000000;
    --color2: #FFFFFF;
    --color3: #4a4a4a;
    --color4: #525252;
    --color5: #666666;
    --color6: #ebebeb;
    --color7: #f5f7fa;
    --color8: #F9F9F9;
    --color9: #F3F3F3;
    --color10: #FCFCFC;

    --shadow-light: 0 1rem 0.5625rem -0.75rem rgba(0, 0, 0, 0.06);
    --shadow-strong: 0 0rem .5rem rgba(34, 34, 34, 0.15);
    --btn_radius: 5px;

    /* Kundenfarben */
    --primary: #0060a4 !important;
    --secondary: #3f4446 !important;
    --tertiary: #013154;
    --gradient: linear-gradient(120deg, #3f4446 0%, #0060a4 100%);

    --pr: #E2EDF4, #C6DBEA, #AACAE0, #8DB8D6, #71A6CC, #5595C2, #3883B8, #1C71AE, #0060A4, #005591, #004A7F, #00406D, #00355B, #002A48;
    --prg: linear-gradient(to right, var(--pr));

    /* Primary Abstufungen */
    --p-1: #E2EDF4;
    --p-2: #C6DBEA;
    --p-3: #AACAE0;
    --p-4: #8DB8D6;
    --p-5: #71A6CC;
    --p-6: #5595C2;
    --p-7: #3883B8;
    --p-8: #1C71AE;
    --p-9: #0060A4; /* Primary */
    --p-10: #005591;
    --p-11: #004A7F;
    --p-12: #00406D;
    --p-13: #00355B;
    --p-14: #002A48;

    --sr: #E9EAEA, #D4D5D5, #BFC0C1, #A9ABAC, #949798, #7F8283, #696D6F, #54585A, #3F4446, #383C3E, #313436, #2A2D2E, #232526, #1C1E1F;
    --srg: linear-gradient(to right, var(--sr));

    /* Secondary Abstufungen */
    --s-1: #E9EAEA;
    --s-2: #D4D5D5;
    --s-3: #BFC0C1;
    --s-4: #A9ABAC;
    --s-5: #949798;
    --s-6: #7F8283;
    --s-7: #696D6F;
    --s-8: #54585A;
    --s-9: #3F4446; /* Secondary */
    --s-10: #383C3E;
    --s-11: #313436;
    --s-12: #2A2D2E;
    --s-13: #232526;
    --s-14: #1C1E1F;


    --tr: #E2E8EC, #C6D1D9, #AABAC6, #8EA3B3, #718CA0, #55758D, #395E7A, #1D4767, #013154, #002B4A, #002641, #002038, #001B2E, #001525;
    --trg: linear-gradient(to right, var(--tr));

    /* Tertiary Abstufungen */
    --t-1: #E2E8EC;
    --t-2: #C6D1D9;
    --t-3: #AABAC6;
    --t-4: #8EA3B3;
    --t-5: #718CA0;
    --t-6: #55758D;
    --t-7: #395E7A;
    --t-8: #1D4767;
    --t-9: #013154; /* Tertiary */
    --t-10: #002B4A;
    --t-11: #002641;
    --t-12: #002038;
    --t-13: #001B2E;
    --t-14: #001525;


    /* Schriftarten */
    --font1: 'Roboto Slab', sans-serif ;
    --font2: 'Titillium Web', sans-serif ;
    --font3: 'Open Sans', sans-serif ;
    --font4: 'Roboto', sans-serif ;
    --font5: 'Roboto';
}

/* Schriftarten einbinden */

/* roboto-slab-300 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: 300;
    src: url('../../fonts/roboto/roboto-slab-v34-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-slab-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: 400;
    src: url('../../fonts/roboto/roboto-slab-v34-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-slab-500 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: 500;
    src: url('../../fonts/roboto/roboto-slab-v34-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-slab-600 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: 600;
    src: url('../../fonts/roboto/roboto-slab-v34-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-300 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: url('../../fonts/roboto/roboto-v30-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('../../fonts/roboto/roboto-v30-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-500 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: url('../../fonts/roboto/roboto-v30-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-700 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: url('../../fonts/roboto/roboto-v30-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/* titillium-web-300 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 300;
    src: url('../../fonts/titillium/titillium-web-v17-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* titillium-web-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 400;
    src: url('../../fonts/titillium/titillium-web-v17-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* titillium-web-600 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 600;
    src: url('../../fonts/titillium/titillium-web-v17-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

.btn-primary {
    color: var(--color2) !important;
    background-color: var(--primary);
    border-color: var(--primary);
    box-shadow: none;
    border-radius: var(--btn_radius);

    &:hover {
        color: var(--color2) !important;
        background-color: var(--p-11);
        border-color: var(--p-11);
    }

    &:focus {
        color: var(--color2)  !important;
        background-color: var(--p-11);
        border-color: var(--p-11);
    }
}


.btn-outline-primary{
    color: var(--primary) !important;
    background-color: var(--color2);
    border-color: var(--primary);
    box-shadow: none;
    border-radius: var(--btn_radius);;

    &:hover {
        color: var(--p-13) !important;
        background-color: var(--color2);
        border-color: var(--p-13);
    }

    &:focus {
        color: var(--p-13) !important;
        background-color: var(--color2);
        border-color: var(--p-11);
    }
}

.btn-secondary {
    color: var(--color2) !important;
    background-color: var(--secondary);
    border-color: var(--secondary);
    box-shadow: none;
    border-radius: var(--btn_radius);;

    &:hover {
        color: var(--color2) !important;
        background-color: var(--s-11);
        border-color: var(--s-11);
    }

    &:focus {
        color: var(--color2)  !important;
        background-color: var(--s-11);
        border-color: var(--s-11);
    }
}

.btn-outline-secondary {
    color: var(--secondary) !important;
    background-color: var(--color2);
    border-color: var(--secondary);
    box-shadow: none;
    border-radius: var(--btn_radius);

    &:hover {
        color: var(--secondary) !important;
        background-color: var(--color2);
        border-color: var(--s-14);
    }

    &:focus {
        color: var(--secondary) !important;
        background-color: var(--color2);
        border-color: var(--s-14);
    }
}

h1, .h1 {
    font-family: var(--font5);
    color: var(--color1);
    font-size: 1.75rem;
}
h2, .h2 {
    font-family: var(--font5);
    color: var(--color1);
    font-size: 1.5rem;
}
h3, .h3 {
    font-family: var(--font5);
    color: var(--color1);
    font-size: 1rem;
}
h4, .h4 {
    font-family: var(--font5);
    color: var(--color1);
    font-size: 0.875rem;
}
h5, .h5 {
    font-family: var(--font5);
    color: var(--color1);
    font-size: 0.875rem;
}
h6, .h6 {
    font-family: var(--font5);
    color: var(--color1);
    font-size: 0.875rem;
}