:root, [data-bs-theme=light]
{
    --st-yellow-100: #FFFBEA;
    --st-yellow-200: #FFF3C4;
    --st-yellow-300: #FCE588;
    --st-yellow-400: #FADB5F;
    --st-yellow-500: #F7C948;
    --st-yellow-600: #F0B429;
    --st-yellow-700: #DE911D;
    --st-yellow-800: #CB6E17;
    --st-yellow-900: #B44D12;
    --st-yellow-1000: #8D2B0B;
    --st-blue-100: #E3F8FF;
    --st-blue-200: #B3ECFF;
    --st-blue-300: #81DEFD;
    --st-blue-400: #5ED0FA;
    --st-blue-500: #40C3F7;
    --st-blue-600: #2BB0ED;
    --st-blue-700: #1992D4;
    --st-blue-800: #127FBF;
    --st-blue-900: #0B69A3;
    --st-blue-1000: #035388;
    --st-gray-100: #F7F7F7;
    --st-gray-200: #E1E1E1;
    --st-gray-300: #CFCFCF;
    --st-gray-400: #B1B1B1;
    --st-gray-500: #9E9E9E;
    --st-gray-600: #7E7E7E;
    --st-gray-700: #626262;
    --st-gray-800: #515151;
    --st-gray-900: #3B3B3B;
    --st-gray-1000: #222222;
    --st-red-1000: #610316;
    --st-red-900: #8A041A;
    --st-red-800: #AB091E;
    --st-red-700: #CF1124;
    --st-red-600: #E12D39;
    --st-red-500: #EF4E4E;
    --st-red-400: #F86A6A;
    --st-red-300: #FF9B9B;
    --st-red-200: #FFBDBD;
    --st-red-100: #FFE3E3;
    --st-green-1000: #014D40;
    --st-green-900: #0C6B58;
    --st-green-800: #147D64;
    --st-green-700: #199473;
    --st-green-600: #27AB83;
    --st-green-500: #3EBD93;
    --st-green-400: #65D6AD;
    --st-green-300: #8EEDC7;
    --st-green-200: #C6F7E2;
    --st-green-100: #EFFCF6;

    /* RGB: */
    --st-yellow-100-rgb: 255, 251, 234;
    --st-yellow-200-rgb: 255, 243, 196;
    --st-yellow-300-rgb: 252, 229, 136;
    --st-yellow-400-rgb: 250, 219, 95;
    --st-yellow-500-rgb: 247, 201, 72;
    --st-yellow-600-rgb: 240, 180, 41;
    --st-yellow-700-rgb: 222, 145, 29;
    --st-yellow-800-rgb: 203, 110, 23;
    --st-yellow-900-rgb: 180, 77, 18;
    --st-yellow-1000-rgb: 141, 43, 11;

    --st-blue-100-rgb: 227, 248, 255;
    --st-blue-200-rgb: 179, 236, 255;
    --st-blue-300-rgb: 129, 222, 253;
    --st-blue-400-rgb: 94, 208, 250;
    --st-blue-500-rgb: 64, 195, 247;
    --st-blue-600-rgb: 43, 176, 237;
    --st-blue-700-rgb: 25, 146, 212;
    --st-blue-800-rgb: 18, 127, 191;
    --st-blue-900-rgb: 11, 105, 163;
    --st-blue-1000-rgb: 3, 83, 136;

    --st-gray-100-rgb: 247, 247, 247;
    --st-gray-200-rgb: 225, 225, 225;
    --st-gray-300-rgb: 207, 207, 207;
    --st-gray-400-rgb: 177, 177, 177;
    --st-gray-500-rgb: 158, 158, 158;
    --st-gray-600-rgb: 126, 126, 126;
    --st-gray-700-rgb: 98, 98, 98;
    --st-gray-800-rgb: 81, 81, 81;
    --st-gray-900-rgb: 59, 59, 59;
    --st-gray-1000-rgb: 34, 34, 34;

    --st-red-1000-rgb: 97, 3, 22;
    --st-red-900-rgb: 138, 4, 26;
    --st-red-800-rgb: 171, 9, 30;
    --st-red-700-rgb: 207, 17, 36;
    --st-red-600-rgb: 225, 45, 57;
    --st-red-500-rgb: 239, 78, 78;
    --st-red-400-rgb: 248, 106, 106;
    --st-red-300-rgb: 255, 155, 155;
    --st-red-200-rgb: 255, 189, 189;
    --st-red-100-rgb: 255, 227, 227;

    --st-green-1000-rgb: 1, 77, 64;
    --st-green-900-rgb: 12, 107, 88;
    --st-green-800-rgb: 20, 125, 100;
    --st-green-700-rgb: 25, 148, 115;
    --st-green-600-rgb: 39, 171, 131;
    --st-green-500-rgb: 62, 189, 147;
    --st-green-400-rgb: 101, 214, 173;
    --st-green-300-rgb: 142, 237, 199;
    --st-green-200-rgb: 198, 247, 226;
    --st-green-100-rgb: 239, 252, 246;

    /* primary */
    --st-primary: var(--st-yellow-600);
    --st-primary-hover: var(--st-yellow-500);
    --st-primary-active: var(--st-yellow-700);
    /* secondary */
    --st-secondary: var(--st-blue-700);
    --st-secondary-hover: var(--st-blue-600);
    --st-secondary-active: var(--st-blue-800);
    /* warning*/
    --st-warning: var(--st-yellow-800);
    --st-warning-hover: var(--st-yellow-700);
    --st-warning-active: var(--st-yellow-900);
    /* danger */
    --st-danger: var(--st-red-700);
    --st-danger-hover: var(--st-red-600);
    --st-danger-active: var(--st-red-800);
    /* success */
    --st-success: var(--st-green-700);
    --st-success-hover: var(--st-green-600);
    --st-success-active: var(--st-green-800);
    /* light */
    --st-light: var(--st-grey-300);
    --st-light-hover: var(--st-grey-200);
    --st-light-active: var(--st-grey-400);
    /* dark */
    --st-dark: var(--st-grey-900);
    --st-dark-hover: var(--st-grey-800);
    --st-dark-active: var(--st-grey-1000);

    --st-primary-rgb: var(--st-yellow-600-rgb);
    --st-secondary-rgb: var(--st-blue-700-rgb);
    --st-warning-rgb: var(--st-yellow-800-rgb);
    --st-danger-rgb: var(--st-red-700-rgb);
    --st-success-rgb: var(--st-green-700-rgb);
    --st-light-rgb: var(--st-grey-300-rgb);
    --st-dark-rgb: var(--st-grey-900-rgb);
}

/* Schriftarten */
@font-face {
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 400;
    src: url(../fonts/montserrat-regular-italic.woff2) format('woff2');
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/montserrat-regular.woff2) format('woff2');
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    src: url(../fonts/montserrat-bold.woff2) format('woff2');
}
@font-face {
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 700;
    src: url(../fonts/montserrat-bold-italic.woff2) format('woff2');
}

/* Overrides: */
html, body {
    --bs-primary-rgb: var(--st-primary-rgb) !important;
    --bs-secondary-rgb: var(--st-secondary-rgb) !important;
    --bs-warning-rgb: var(--st-warning-rgb) !important;
    --bs-danger-rgb: var(--st-danger-rgb) !important;
    --bs-success-rgb: var(--st-success-rgb) !important;
    --bs-light-rgb: var(--st-light-rgb) !important;
    --bs-dark-rgb: var(--st-dark-rgb) !important;
    --bs-primary-color: var(--st-primary) !important;
    --bs-secondary-color: var(--st-secondary) !important;
    --bs-warning-color: var(--st-warning) !important;
    --bs-danger-color: var(--st-danger) !important;
    --bs-success-color: var(--st-success) !important;
    --bs-light-color: var(--st-light) !important;
    --bs-dark-color: var(--st-dark) !important;
    --bs-gradient: linear-gradient(180deg, rgb(255 255 255 / 0%), rgb(255 255 255 / 75%));
    --bs-link-color-rgb: var(--st-primary) !important;
    --bs-nav-link-color: var(--st-primary) !important;
    --bs-body-color: var(--st-gray-900) !important;
    --bs-body-font-family: 'Montserrat';
}

.btn-primary {
    --bs-btn-bg: var(--st-primary) !important;
    --bs-btn-border-color: var(--st-primary) !important;
    --bs-btn-hover-bg: var(--st-primary-hover) !important;
    --bs-btn-hover-border-color: var(--st-primary-hover) !important;
    --bs-btn-active-bg: var(--st-primary-active) !important;
    --bs-btn-active-border-color: var(--st-primary-active) !important;
    --bs-btn-disabled-bg: var(--st-primary) !important;
    --bs-btn-disabled-border-color: var(--st-primary) !important;
}

.btn-secondary {
    --bs-btn-bg: var(--st-secondary) !important;
    --bs-btn-border-color: var(--st-secondary) !important;
    --bs-btn-hover-bg: var(--st-secondary-hover) !important;
    --bs-btn-hover-border-color: var(--st-secondary-hover) !important;
    --bs-btn-active-bg: var(--st-secondary-active) !important;
    --bs-btn-active-border-color: var(--st-secondary-active) !important;
    --bs-btn-disabled-bg: var(--st-secondary) !important;
    --bs-btn-disabled-border-color: var(--st-secondary) !important;
}

.btn-warning {
    --bs-btn-bg: var(--st-warning) !important;
    --bs-btn-border-color: var(--st-warning) !important;
    --bs-btn-hover-bg: var(--st-warning-hover) !important;
    --bs-btn-hover-border-color: var(--st-warning-hover) !important;
    --bs-btn-active-bg: var(--st-warning-active) !important;
    --bs-btn-active-border-color: var(--st-warning-active) !important;
    --bs-btn-disabled-bg: var(--st-warning) !important;
    --bs-btn-disabled-border-color: var(--st-warning) !important;
}

.btn-light {
    --bs-btn-bg: var(--st-light) !important;
    --bs-btn-border-color: var(--st-light) !important;
    --bs-btn-hover-bg: var(--st-light-hover) !important;
    --bs-btn-hover-border-color: var(--st-light-hover) !important;
    --bs-btn-active-bg: var(--st-light-active) !important;
    --bs-btn-active-border-color: var(--st-light-active) !important;
    --bs-btn-disabled-bg: var(--st-light) !important;
    --bs-btn-disabled-border-color: var(--st-light) !important;
}

.btn-danger {
    --bs-btn-bg: var(--st-danger) !important;
    --bs-btn-border-color: var(--st-danger) !important;
    --bs-btn-hover-bg: var(--st-danger-hover) !important;
    --bs-btn-hover-border-color: var(--st-danger-hover) !important;
    --bs-btn-active-bg: var(--st-danger-active) !important;
    --bs-btn-active-border-color: var(--st-danger-active) !important;
    --bs-btn-disabled-bg: var(--st-danger) !important;
    --bs-btn-disabled-border-color: var(--st-danger) !important;
}

.btn-success {
    --bs-btn-bg: var(--st-success) !important;
    --bs-btn-border-color: var(--st-success) !important;
    --bs-btn-hover-bg: var(--st-success-hover) !important;
    --bs-btn-hover-border-color: var(--st-success-hover) !important;
    --bs-btn-active-bg: var(--st-success-active) !important;
    --bs-btn-active-border-color: var(--st-success-active) !important;
    --bs-btn-disabled-bg: var(--st-success) !important;
    --bs-btn-disabled-border-color: var(--st-success) !important;
}

.btn-dark {
    --bs-btn-bg: var(--st-dark) !important;
    --bs-btn-border-color: var(--st-dark) !important;
    --bs-btn-hover-bg: var(--st-dark-hover) !important;
    --bs-btn-hover-border-color: var(--st-dark-hover) !important;
    --bs-btn-active-bg: var(--st-dark-active) !important;
    --bs-btn-active-border-color: var(--st-dark-active) !important;
    --bs-btn-disabled-bg: var(--st-dark) !important;
    --bs-btn-disabled-border-color: var(--st-dark) !important;
}

.nav-link {
    --bs-nav-link-color: var(--st-dark) !important;
}

.nav-link {
    font-size: 18px !important;
}

.nav-link.active {
    font-weight: bold;
    text-decoration: underline !important;
    text-shadow: 1px 1px 0px white, -1px -1px 0px white, -1px 1px 0px white, 1px -1px 0px white;
}

.accordion {
    --bs-accordion-bg: transparent !important;
    --bs-accordion-border-color: var(--st-gray-900) !important;
}

.accordion-button {
    background-color: var(--st-light) !important;
}

.image-background-container {
    position:relative;
    z-index: 1;
}

.image-background-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.25;
    z-index: -1;
}

.image-background-container.paedagogik-therapie::before {
    background: url(https://www.sprungtuch-koeln.de/bl-content/uploads/pages/784dd821e96bbcd59c9f2736817294f2/paedagogik-therapie-jpg.jpg);
    background-size: cover;
    background-position: center;
}

.image-background-container.paedagogik-therapie2::before {
    background: url(https://www.sprungtuch-koeln.de/bl-content/uploads/pages/784dd821e96bbcd59c9f2736817294f2/paedagogik-therapie2-jpg.jpg);
    background-size: cover;
    background-position: 0 18%;
}

.image-background-container.paedagogik-therapie3::before {
    background: url(https://www.sprungtuch-koeln.de/bl-content/uploads/pages/784dd821e96bbcd59c9f2736817294f2/paedagogik-therapie3-jpg.jpg);
    background-size: cover;
    background-position: center;
}

.image-background-container.suchtpraevention::before {
    background: url(https://www.sprungtuch-koeln.de/bl-content/uploads/pages/957b980564f0e6fcc8820fc4ebe3604f/suchtpraevention-jpg.jpg);
    background-size: cover;
    background-position: center;
}

.image-background-container.suchtpraevention2::before {
    background: url(https://www.sprungtuch-koeln.de/bl-content/uploads/pages/957b980564f0e6fcc8820fc4ebe3604f/suchtpraevention2-jpg.jpg);
    background-size: cover;
    background-position: center;
}

.image-background-container.coaching::before {
    background:url(https://www.sprungtuch-koeln.de/bl-content/uploads/pages/e54f22e3dd685505fdc5639e1e42341a/beratung-coaching-cropped-jpg.jpg);
    background-size: cover;
    background-position: center;
}