/*!
* Neon template
* Properties
*/

/*! Grid setup */
@media all {

        :root {

                /*! Set real viewport size */
                --scrollbar-width: 0px;
                --viewport: calc(100vw - var(--scrollbar-width));

                /*! Reference width for grid */
                --reference: var(--viewport);

                /*! Grid */
                --grid-1-col: calc(var(--reference) / 24);
                --grid-2-col: calc((var(--reference) / 24) * 2);
                --grid-3-col: calc(var(--reference) / 24 * 3);
                --grid-4-col: calc(var(--reference) / 24 * 4);
                --grid-5-col: calc(var(--reference) / 24 * 5);
                --grid-6-col: calc((var(--reference) / 24) * 6);
                --grid-7-col: calc(var(--reference) / 24 * 7);
                --grid-8-col: calc(var(--reference) / 24 * 8);
                --grid-9-col: calc(var(--reference) / 24 * 9);
                --grid-10-col: calc(var(--reference) / 24 * 10);
                --grid-11-col: calc(var(--reference) / 24 * 11);
                --grid-12-col: calc(var(--reference) / 24 * 12);
                --grid-13-col: calc(var(--reference) / 24 * 13);
                --grid-14-col: calc(var(--reference) / 24 * 14);
                --grid-15-col: calc(var(--reference) / 24 * 15);
                --grid-16-col: calc(var(--reference) / 24 * 16);
                --grid-17-col: calc(var(--reference) / 24 * 17);
                --grid-18-col: calc(var(--reference) / 24 * 18);
                --grid-19-col: calc(var(--reference) / 24 * 19);
                --grid-20-col: calc(var(--reference) / 24 * 20);
                --grid-21-col: calc(var(--reference) / 24 * 21);
                --grid-22-col: calc(var(--reference) / 24 * 22);
                --grid-23-col: calc(var(--reference) / 24 * 23);
                --grid-24-col: var(--reference);


                --def-max-width-page: calc(var(--max-width-page, 256) * 1rem);
                --def-max-width-content: calc(var(--max-width-content, var(--max-width-page, 256)) * 1rem);
                --def-max-width: min(var(--def-max-width-content), calc(var(--def-max-width-page) - (var(--padding-page-x-left) + var(--padding-page-x-right))));
                --def-width-col: calc((var(--def-max-width-content) - (var(--gap-page-x) * (var(--page-grid-columns) - 1))) / var(--page-grid-columns));
                --def-col: minmax(0, var(--def-width-col));
                --def-cols-media: var(--cols-media, calc(var(--page-grid-columns) / 2));

                --val-width-content: min(var(--def-max-width), calc(var(--viewport) - (var(--padding-page-x-left) + var(--padding-page-x-right))));
                --val-width-outer: calc(var(--val-width-content) + var(--padding-page-x-left) + var(--padding-page-x-right));
                --val-width-col: calc((var(--val-width-content) - var(--gap-page-x) * (var(--page-grid-columns) - 1)) / var(--page-grid-columns));
                --val-width-page-max: min(var(--def-max-width-page), var(--viewport));
                --val-width-page-diff-left: max(var(--padding-page-x-left), calc(((var(--val-width-page-max) - (var(--padding-page-x-left) + var(--padding-page-x-right) + var(--def-max-width-content))) / 2) + var(--padding-page-x-left)));
                --val-width-page-diff-right: max(var(--padding-page-x-right), calc(((var(--val-width-page-max) - (var(--padding-page-x-left) + var(--padding-page-x-right) + var(--def-max-width-content))) / 2) + var(--padding-page-x-right)));

                --def-page-grid:
                        minmax(0, 1fr) var(--padding-page-x-left)
                        /*! left page padding */
                        repeat(calc(var(--page-grid-columns) - 1), var(--def-col) var(--gap-page-x)) var(--def-col) var(--padding-page-x-right)
                        /*! right page padding */
                        minmax(0, 1fr);
        }

}

/*! Paddings and sizes */
@media all {

        :root {

                /*! Base size */
                --size-base: calc(var(--grid-1-col));

                /*! set horizontal padding */
                --pad-hor-xsml: calc(var(--size-base) / 4);
                --pad-hor-sml: calc(var(--size-base) / 2);
                --pad-hor-med: calc(var(--size-base));
                --pad-hor-lrg: calc(var(--size-base) * 2);

                /*! set vertical padding with aspect ratio */
                --pad-ver-xsml: calc(var(--pad-hor-xsml) * (3/4));
                --pad-ver-sml: calc(var(--pad-hor-sml) * (3/4));
                --pad-ver-med: calc(var(--pad-hor-med) * (3/4));
                --pad-ver-lrg: calc(var(--pad-hor-lrg) * (3/4));

                /*! combined padding */
                --pad-xsml: var(--pad-ver-xsml) var(--pad-hor-xsml);
                --pad-sml: var(--pad-ver-sml) var(--pad-hor-sml);
                --pad-med: var(--pad-ver-med) var(--pad-hor-med);
                --pad-lrg: var(--pad-ver-lrg) var(--pad-hor-lrg);

                /*! New Core size */
                --cs-0: 0rem;
                --cs-1: calc(var(--core-size));
                --cs-2: calc(var(--core-size) * 2);
                --cs-3: calc(var(--core-size) * 3);
                --cs-4: calc(var(--core-size) * 4);
                --cs-5: calc(var(--core-size) * 5);
                --cs-6: calc(var(--core-size) * 6);
                --cs-7: calc(var(--core-size) * 7);
                --cs-8: calc(var(--core-size) * 8);
                --cs-9: calc(var(--core-size) * 9);
                --cs-10: calc(var(--core-size) * 10);
                --cs-11: calc(var(--core-size) * 11);
                --cs-12: calc(var(--core-size) * 12);
                --cs-13: calc(var(--core-size) * 13);
                --cs-14: calc(var(--core-size) * 14);
                --cs-15: calc(var(--core-size) * 15);
                --cs-16: calc(var(--core-size) * 16);


        }

}

/*! Responsive Sizer */
@media all {

        :root,
        .logo,
        .hx *,
        .bodytext {
                /* Responsive sizer magic */
                --respsize-diff: calc(var(--respsize-max) - var(--respsize-min));
                --respsize-range: calc(var(--respsize-clamp-end, var(--max-width-content)) - var(--respsize-clamp-start, 0));
                --respsize-clamp: calc((var(--respsize-min) * 1rem) + var(--respsize-diff) * ((100vw - (var(--respsize-clamp-start, 0) * 1rem)) / var(--respsize-range)));
                --respsize: clamp((var(--respsize-min) * 1rem), var(--respsize-clamp), (var(--respsize-max) * 1rem));
        }


        :root {
                --respsize-min: var(--core-size-min);
                --respsize-max: var(--core-size-max);
                --core-size: var(--respsize);
        }

        .logo {
                --respsize-min: var(--logo-size-min);
                --respsize-max: var(--logo-size-max);
                --logo-size: var(--respsize);
        }

        .hx *,
        .bodytext {
                --respsize-min: var(--font-size-min);
                --respsize-max: var(--font-size-max);
                --font-size: var(--respsize);
        }
}

/*! Propagation */
@media all {

        :root {

                --color-1: rgb(var(--rgb-1));
                --color-1-alt: rgb(var(--rgb-1-alt));
                --color-2: rgb(var(--rgb-2));
                --color-2-alt: rgb(var(--rgb-2-alt));
                --color-dark: rgb(var(--rgb-dark));
                --color-gray-dark: rgb(var(--rgb-gray-dark));
                --color-dark-trans: rgb(var(--rgb-dark), .75);
                --color-light: rgb(var(--rgb-light));

                --font-1:
                        var(--font-1-weight-regular) 1rem / var(--font-1-lineheight) var(--font-1-family);
                --font-1-bold:
                        var(--font-1-weight-bold) 1rem / var(--font-1-lineheight) var(--font-1-family);

                --font-2:
                        var(--font-2-weight-regular) 1rem / var(--font-2-lineheight) var(--font-2-family);
                --font-2-bold:
                        var(--font-2-weight-bold) 1rem / var(--font-2-lineheight) var(--font-2-family);

        }

}

/*! Values - Mobile first */
@media all {

        /* Page */

        :root {

                /*! General sizes */
                --max-width-page: 100;                
                --max-width-content: 68;                
                /*! --max-width-text: 96ch; */

                /*! Page Grid and Layout */
                --page-grid-columns: 12;
                --cols-media: 6;

                /*! Responsive sizes */

                /* Calculates rem value depending on viewport size */
                /* Set min max on element level and use output with --respsize */

                /* Define global viewport range for respsize */
                --respsize-clamp-start: 48;
                /*! --respsize-clamp-end: 66 ; */
                /* Max viewport, usually max content and padding (rem) */

                /* Gaps */
                --core-size-min: .25;
                --core-size-max: .5;

                /*! Logo */
                --logo-size-min: 1;
                --logo-size-max: 2.5;

                /*! Colors */

                --rgb-1: 0, 186, 255;
                --rgb-1-alt: 0, 155, 255;

                --rgb-2: 186, 0, 255;
                --rgb-2-alt: 155, 0, 255;

                --rgb-dark: 0, 0, 0;
                --rgb-gray-dark: 51, 51, 51;
                --rgb-light: 255, 255, 255;

                /*! body font size */
                --font-size-min: .9375;
                --font-size-max: 1.125;
                --font-lineheight: 1.625;

                /*! Font 2 (Default) */
                --font-1-family: 'Roboto', Sans-serif;
                --font-1-lineheight: 1.5;
                --font-1-weight-regular: 400;
                --font-1-weight-bold: 700;

                /*! Font 2 (Headlines) */
                --font-2-family: 'Heebo', Sans-serif;
                --font-2-lineheight: 1.125;
                --font-2-weight-regular: 700;
                --font-2-weight-bold: 900;

                /*! Navigation */
                --navigation: offcanvas;
                --dropdown-delay: 600;

                /*! Transitions */
                --transition-default: all .125s ease-in-out .0s;
                --transition-slow: all .5s ease-in-out .0s;

                /*! Filters */
                --filter-blur: blur(.25rem);

                /*! Containers (column count) */
                --container-1-1-1: 3;
                --container-1-1: 1;

                /*! Gaps and paddings */

                /*! Page Content */
                --padding-page-x: var(--cs-10);
                --padding-page-y: var(--gap-page-y);
                --padding-page-x-left: var(--padding-page-x);
                --padding-page-x-right: var(--padding-page-x);
                --padding-page-y-top: var(--padding-page-y);
                --padding-page-y-bottom: var(--padding-page-y);

                /*! Page grid */
                --gap-page-x: var(--cs-4);
                --gap-page-y: var(--cs-12);

                /*! Content Element */
                --padding-element-x: var(--cs-6);
                --padding-element-y: var(--gap-page-y);
                --padding-element-x-left: var(--padding-element-x);
                --padding-element-x-right: var(--padding-element-x);
                --padding-element-y-top: var(--padding-element-y);
                --padding-element-y-bottom: var(--padding-element-y);

                /*! Textmedia */
                --gap-header-bodytext: var(--cs-3);
                --gap-media-text: var(--cs-6);
        }

        .h1 * {
                --font-size-min: 1.75;
                --font-size-max: 3.75;
                --font-lineheight: 1;
        }

        .h2 * {
                --font-size-min: 1.5;
                --font-size-max: 2.5;
                --font-lineheight: 1.125;
        }

        .h3 * {
                --font-size-min: 1.125;
                --font-size-max: 1.5;
                --font-lineheight: 1.25;
        }

        .h5 * {
                --font-size-min: 1;
                --font-size-max: 1.25;
                --font-lineheight: 1.5;
        }

        .h5 * {
                --font-size-min: 1;
                --font-size-max: 1;
                --font-lineheight: 1.5;
        }

}

/*! Values - Breakpoint 1 */
@media (min-width: 48rem) {

        :root {

                --navigation: horizontal;

                --container-1-1-1: 3;
                --container-1-1: 2;

        }

}

/*! Values - Breakpoint 1 */
@media (min-width: 100rem) {

        :root {

                --reference: calc(100rem - var(--scrollbar-width));

        }

}