@media all {
        :root {
                /* ###### Defining colors ###### */
                /* Text color */
                --color-text-light-rgb: 255, 255, 255;
                --color-text-light: rgb(var(--color-text-light-rgb));
                --color-text-med-rgb: 102, 102, 102;
                --color-text-med: rgb(var(--color-text-med-rgb));
                --color-text-dark-rgb: 51, 51, 51;
                --color-text-dark: rgb(var(--color-text-dark-rgb));

                --color-bg-extralight-rgb: 247, 243, 243;
                --color-bg-extralight: rgb(var(--color-bg-extralight-rgb));
                --color-bg-light-rgb: 242, 240, 240;
                --color-bg-light: rgb(var(--color-bg-light-rgb));
                --color-bg-med-rgb: 102, 102, 102;
                --color-bg-med: rgb(var(med));
                --color-bg-dark-rgb: 51, 51, 51;
                --color-bg-dark: rgb(var(--color-bg-dark-rgb));

                /* Primary color */
                --color-primary-rgb: 104, 25, 18;
                --color-primary-rgb: 164, 33, 54;
                --color-primary: rgb(var(--color-primary-rgb));
                --color-primary-rgb-hover: 53, 15, 13;
                --color-primary-hover: rgb(var(--color-primary-rgb-hover));

                /* Secondary color */
                --color-secondary-rgb: 220, 144, 51;
                --color-secondary: rgb(var(--color-secondary-rgb));
                --color-secondary-rgb-hover: 169, 111, 39;
                --color-secondary-hover: rgb(var(--color-secondary-rgb-hover));

                /* Accent color */
                --color-accent-rgb: 255, 96, 0;
                --color-accent-rgb: 164, 33, 54;
                --color-accent: rgb(var(--color-accent-rgb));
                --color-accent-rgb-hover: 181, 53, 24;
                --color-accent-rgb-hover: 198, 57, 42;
                --color-accent-hover: rgb(var(--color-accent-rgb-hover));

                /* Page grid */
                --grid-template-columns: minmax(0, 1fr) repeat(25, minmax(0, var(--base-size))) minmax(0, 1fr);

                /* Defining Col-Start and Col-Width */
                --width-page: min(100vw, 120rem);

                /* Defining sizes */
                --width-content: min(100vw, 100rem); /* full content width */

                --height-logo: clamp(1.75rem, 5vw, 4rem);
                --height-logo: max(var(--base-3-4), 1.5rem);
                --padding-logo: var(--gap-4);

                /* MISC */
                /* Global Fonts */
                --font-family-header: "NeueKabelProBold", sanf-serif;

                /* Border */
                --border-radius-btn-controller: 100vh;
                --border-radius-btn: 100vh;
                --border: .125rem solid transparent;

                /* Backdrop filter */
                --backdrop-filter: .25rem;

                /* Shadows */
                --text-shadow: 0  0 1.25rem 2.5rem rgba(var(--color-text-dark-rgb),.4);
                --text-shadow-dark: 0 0 1rem rgba(0,0,0,.8);
                --box-shadow: 0 1rem 2.5rem rgba(var(--color-accent-rgb),.1);

                /* Transitions */
                --transition-slow: all 2.5s cubic-bezier(.2,.975,.8,.8);
                --transition-slow-2: all 1s ease-in-out;
                --transition-fast: all .2s ease-in-out;
                --transition-default: all .2s ease-in-out;

                /* Naigation variable */
                --padding-navigation-item-x: var(--base-1-2);
                --padding-navigation-item-y: .625rem;

                /* Page variables */
                --color-page-header-bg: var(--color-primary);
                --color-page-header-bg-scrolled: var(--color-primary);

                /* Element variables */
                --slick-dot-size: 1rem;
                --slick-dot-padding: 1.5rem;
                --slick-dots-box-shadow: 0 .25rem 1.25rem rgba(var(--color-secondary-rgb),.6);;
                --slick-arrow-size: clamp(1.75rem, 6.048vw, 3rem);
                --slick-arrow-gap: 1rem;
                --slick-pause-size: var(--slick-arrow-size);

                --icon-size-teaser: var(--gap-10);

                /* Gradients */
                --gradient-overlay: linear-gradient(transparent, rgba(0,0,0,.5));
                
                /* A11y focus */
                --shadow-focus: 0 0 0 0.125rem rgb(255,255,255), 0 0 0 .375rem var(--color-primary);

                /* A11y shadows */
                --shadow-a11y: 0 0 1.25em rgba(0, 0, 0, .625);
                                
        }

        :root,
        body,
        .fontsize-small,
        .ce-header * {
                --dynamic-clamp-start: 62; /*rem*/
                --dynamic-clamp-end: 120; /*rem*/

                --dynamic-size-diff: calc(var(--dynamic-size-max) - var(--dynamic-size-min));
                --dynamic-clamp-diff: calc(var(--dynamic-clamp-end) - var(--dynamic-clamp-start));    
                --dynamic-size-clamp: calc((var(--dynamic-size-min) * 1rem) + var(--dynamic-size-diff) * ((100vw - (var(--dynamic-clamp-start) * 1rem)) / var(--dynamic-clamp-diff)));    
                --dynamic-size-scaler: clamp((var(--dynamic-size-min) * 1rem), var(--dynamic-size-clamp), (var(--dynamic-size-max) * 1rem));
        }

        :root {                
                /* Base size block */
                --base-size: min(100vw / 25, var(--width-content) / 25); /* 64px */
                --base-3-1: calc(var(--base-size) * 3 / 1); /* 192px */
                --base-2-1: calc(var(--base-size) * 2 / 1); /* 128px */
                --base-3-2: calc(var(--base-size) * 3 / 2); /* 96px */
                --base-7-8: calc(var(--base-size) * 7 / 8); /* 56px */
                --base-3-4: calc(var(--base-size) * 3 / 4); /* 48px */
                --base-5-8: calc(var(--base-size) * 5 / 8); /* 40px */
                --base-1-2: calc(var(--base-size) * 1 / 2); /* 32px */
                --base-1-4: calc(var(--base-size) * 1 / 4); /* 16px */
                --base-1-8: calc(var(--base-size) * 1 / 8); /* 8px */

                /* Defining spaces */
                --dynamic-size-min: .25; /*rem*/
                --dynamic-size-max: .5; /*rem*/

                --gap: var(--dynamic-size-scaler); /* default-values 4 -> 8 */
                --gap-2: calc(var(--gap) * 2); /* default-values 8 -> 16 */
                --gap-3: calc(var(--gap) * 3); /* default-values 12 -> 24 */
                --gap-4: calc(var(--gap) * 4); /* default-values 16 -> 32 */
                --gap-5: calc(var(--gap) * 5); /* default-values 20 -> 40 */
                --gap-6: calc(var(--gap) * 6); /* default-values 24 -> 48 */
                --gap-7: calc(var(--gap) * 7); /* default-values 28 -> 56 */
                --gap-8: calc(var(--gap) * 8); /* default-values 32 -> 64 */
                --gap-9: calc(var(--gap) * 9); /* default-values 36 -> 72 */
                --gap-10: calc(var(--gap) * 10); /* default-values 40 -> 80 */
        }

        body {
                --dynamic-size-min: 1; /*rem*/
                --dynamic-size-max: 1.25; /*rem*/
        }

        .fontsize-small {
                --dynamic-size-min: .75; /*rem*/
                --dynamic-size-max: 1; /*rem*/
        }

        body,
        .fontsize-small,
        .ce-header * {
                font-size: var(--dynamic-size-scaler);
        }

        .ce-header h1 ,
        .ce-header .h1 {
                --dynamic-size-min: 1.75; /*rem*/
                --dynamic-size-max: 5; /*rem*/ 
        }

        .ce-header h2 ,
        .ce-header .h2 {
                --dynamic-size-min: 1.5; /*rem*/
                --dynamic-size-max: 3.5; /*rem*/ 
        }

        .ce-header h3 ,
        .ce-header .h3 ,
        /* .ce-teaserlink-outer .ce-header * , */
        .ce-teaserlink-outer .ce-header .ti-program-title {
                --dynamic-size-min: 1.25; /*rem*/
                --dynamic-size-max: 2; /*rem*/ 
        }

        .ce-header h4 ,
        .ce-header .h4 {
                --dynamic-size-min: 1.125; /*rem*/
                --dynamic-size-max: 1.5; /*rem*/ 
        }

        .ce-header h5 ,
        .ce-header .h5 {
                --dynamic-size-min: 1; /*rem*/
                --dynamic-size-max: 1.375; /*rem*/ 
        }

        /* Pagelayout variables */
        .page-layout-round,
        .page-layout-round_homepage {
                --max-width-page-stage: var(--width-content-xl); /* set to 100% to get the page-stage-image on fullwidth */
                --max-width-footer-top: var(--width-content-xl);
                --padding-page-stage: 0; /* set to 0 to get the page-stage-image on fullwidth */
                /*
                --border-radius: clamp(1.25rem, 1.25rem + 1.5vw, 2.5rem);
                --border-radius-half: calc(var(--border-radius) / 2);
                */
        }

        /* Variables for ti_programm */

        .ti-program-list {
                --ti-program-header-color-fg: var(--color-text) !important;
                --ti-program-header-color-bg: unset !important;
                --ti-program-header-padding: 0 !important;
                --ti-program-body-padding: 0 !important;
                --ti-program-body-color-bg: transparent !important;
        }

}

@media (min-width: 100rem), (min-height: 56.25rem) {

        :root,
        body,
        .fontsize-small,
        .ce-header * {
                --dynamic-clamp-start: 48; /*rem*/
                --dynamic-clamp-end: 95; /*rem*/
        }

        :root {
                --height-logo: max(var(--base-7-8), 1.5rem);
                --padding-logo: var(--gap-5);
        }

}

@media (min-width: 36rem) {

}

@media (min-width: 48rem) {

        .grid-1-1-1-1 .ce-header :is(h3, .h3) {
                /*! --dynamic-size-max: 1; */ /*rem*/ 
        }

}

@media (min-width: 62rem) {

        .grid-1-1-1-1 .ce-header :is(h3, .h3) {
                /*! --dynamic-size-max: 1.25; */ /*rem*/ 
        }

}

@media (min-width: 74.5rem) {

        .grid-1-1-1-1 .ce-header :is(h3, .h3) {
                --dynamic-size-max: 1.5; /*rem*/ 
        }

}

@media (min-width: 100rem) {

        .grid-1-1-1-1 .ce-header :is(h3, .h3) {
                --dynamic-size-max: 1.75; /*rem*/ 
        }

}

@media (min-width: 120rem) {

        .grid-1-1-1-1 .ce-header :is(h3, .h3) {
                --dynamic-size-max: 2; /*rem*/ 
        }

}