/* =========================================
   PAGE 3733
   ========================================= */
html:has(body.page-id-3733),
body.page-id-3733,
body.page-id-3733 .tm-page {
    background-color: #000000 !important;
}
body.page-id-3733 {
    .uk-section-muted {
        background-color: transparent !important;
    }
}

/* =========================================
   MMX ROOT
   ========================================= */
:root {
    /* Colors */
	--md-color0: #4000ff;        /* blau – primär */
	--md-color0-50: #d3c4ff;     /* blau hell */
	--md-color0-80: #7b4eff;     /* blau mittel */
	--md-color1: #000;           /* schwarz – text */
	--md-color2: #fff;           /* weiß – hintergrund */
	--md-color3: #f6f6f6;        /* grau hell – flächen */
	--md-color5: #7f7f7f;        /* grau – sekundärtext */
	--md-color4: #bfff00;        /* grün – akzent */
	--md-color4-20: #ebffb1;     /* grün hell – hinterlegung */

	--md-color7: #f8f7fc;        /* blau hell – akzent 2 */
	--md-color8: #3e678d;        /* kaltes grau blau für headline animation */
	--md-color9: #00ff00;        /* kaltes grün simuliert computerschrift*/
	--md-color10: #91A4B7;       /* kaltes eis-blau*/

    /* Fonts */	
	--noto-font: 'Noto Serif';
	--space-font: 'Space Mono';
	
    /* Marker */
    --mmx-padding-marker: 0.2em 0.6em;
    --mmx-lineheight-marker: 2.25;
    --mmx-marker-radius: 0.25em;

    /* Border */
    --mmx-border-color: var(--md-color2);
    --mmx-border-opacity: 0.2;
    --mmx-border-radius: 0.5em;

    /* Surface gradient */
    --mmx-gradient-surface-angle: 120deg;
    --mmx-gradient-surface-start: var(--md-color0);
    --mmx-gradient-surface-end: var(--md-color1);

    /* Surface overlay */
    --mmx-gradient-surface-overlay-color: #000000;
    --mmx-gradient-surface-overlay-opacity: 0.6;

    /* Inner highlight */
    --mmx-shadow-inner-highlight-color: #ffffff;
    --mmx-shadow-inner-highlight-opacity: 0.05;
    --mmx-shadow-inner-highlight-x: 2px;
    --mmx-shadow-inner-highlight-y: 2px;
    --mmx-shadow-inner-highlight-blur: 4px;
    --mmx-shadow-inner-highlight-spread: 0px;

    /* Inner depth */
    --mmx-shadow-inner-depth-color: var(--md-color0);
    --mmx-shadow-inner-depth-opacity: 0.12;
    --mmx-shadow-inner-depth-x: -6px;
    --mmx-shadow-inner-depth-y: -7px;
    --mmx-shadow-inner-depth-blur: 12px;
    --mmx-shadow-inner-depth-spread: 0px;

    /* Outer glow */
    --mmx-shadow-outer-glow-color: var(--md-color0);
    --mmx-shadow-outer-glow-opacity: 0.18;
    --mmx-shadow-outer-glow-x: 0px;
    --mmx-shadow-outer-glow-y: 18px;
    --mmx-shadow-outer-glow-blur: 35px;
    --mmx-shadow-outer-glow-spread: 0px;
}
/* =========================================
   __ END MMX ROOT
   ========================================= */


/* =========================================
   MMX GLOBAL LAYOUT CORRECTIONS
   ========================================= */

.mmx-center-block {
    &:extend(.uk-container-large all);
    margin: 0 auto !important;
}

/* =========================================
   __ END MMX GLOBAL LAYOUT CORRECTIONS
   ========================================= */


/* =========================================
   MMX TEXT COLORS
   ========================================= */

.mmx-text-green {
    color: var(--md-color4-20) !important;
}

/* =========================================
   __END MMX TEXT COLORS
   ========================================= */

/* =========================================
   MMX SECTIONS
   ========================================= */
.mxx-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    > * {
        position: relative;
        z-index: 1;
    }

    /* Home header */
    &.home.header {
        background: var(--md-color1) !important;

        &::before,
        &::after {
            content: "";
            position: absolute;
            z-index: 0;
            pointer-events: none;
            border-radius: 50%;
        }

        &::before {
            width: 70vw;
            height: 70vw;
            top: -35vw;
            right: -25vw;
            border: 50px solid var(--md-color0);
            filter: blur(120px);
        }

        &::after {
            width: 20vw;
            height: 20vw;
            left: -8vw;
            bottom: 5vw;
            background: var(--md-color0);
            filter: blur(200px);
            opacity: 0.85;
        }

        @media (max-width: 959px) {
            &::before {
                width: 120vw;
                height: 120vw;
                top: -50vw;
                right: -65vw;
            }

            &::after {
                width: 25vw;
                height: 25vw;
                left: -25vw;
                top: 50vh;
            }
        }
    }

    /* Black */
    &.black {
        background: var(--md-color1) !important;
	}
    
    /* Home video teaser */
    &.home.video-teaser {
        background: var(--md-color1) !important;
        min-height: 100vh;

        > [uk-cover]:where(img, video) {
            position: absolute;
            inset: 0;
            z-index: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: invert(1) !important;
        }

        &::after {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 1;
            background: var(--md-color1);
            opacity: 0.5;
            pointer-events: none;
        }

        > .uk-width-1-1 {
            position: relative;
            z-index: 2;
            min-height: 100vh;
            display: flex;
            align-items: center;
        }
    }
	
    /* Home intro */
    &.home.intro {
        background:
            linear-gradient(
                to bottom,
                transparent 0,
                var(--md-color1) 15vh
            ) !important;

        &::before {
            content: "";
            position: absolute;
            width: 30em;
            height: 30em;
            top: 15em;
            left: -8vw;
            z-index: 0;
            pointer-events: none;
            border-radius: 50%;
            background: var(--md-color0);
            filter: blur(150px);
            opacity: 0.2;
        }
    }
}

/* =========================================
   __ END MMX SECTIONS
   ========================================= */

/* =========================================
   MMX GRID
   ========================================= */
.mmx-grid {
    /* Flat */
    &.flat {
        .el-item {
            padding: 1em;
            border: 1px solid color-mix(
                in srgb,
                var(--mmx-border-color) calc(var(--mmx-border-opacity) * 100%),
                transparent
            ) !important;
            border-radius: var(--mmx-border-radius);
            color: var(--md-color2);
            background: var(--md-color1);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
        }
    }

    /* Gradient */
    &.gradient,
    &.services {
        .uk-grid {
            .el-item {
                border: 1px solid color-mix(
                    in srgb,
                    var(--mmx-border-color) calc(var(--mmx-border-opacity) * 100%),
                    transparent
                ) !important;
                border-radius: var(--mmx-border-radius);
                color: var(--md-color2) !important;
                background:
                    linear-gradient(
                        color-mix(
                            in srgb,
                            var(--mmx-gradient-surface-overlay-color)
                            calc(var(--mmx-gradient-surface-overlay-opacity) * 100%),
                            transparent
                        ),
                        color-mix(
                            in srgb,
                            var(--mmx-gradient-surface-overlay-color)
                            calc(var(--mmx-gradient-surface-overlay-opacity) * 100%),
                            transparent
                        )
                    ),
                    linear-gradient(
                        var(--mmx-gradient-surface-angle),
                        var(--mmx-gradient-surface-start),
                        var(--mmx-gradient-surface-end)
                    ) !important;
                box-shadow:
                    inset
                    var(--mmx-shadow-inner-highlight-x)
                    var(--mmx-shadow-inner-highlight-y)
                    var(--mmx-shadow-inner-highlight-blur)
                    var(--mmx-shadow-inner-highlight-spread)
                    color-mix(
                        in srgb,
                        var(--mmx-shadow-inner-highlight-color)
                        calc(var(--mmx-shadow-inner-highlight-opacity) * 100%),
                        transparent
                    ),
                    inset
                    var(--mmx-shadow-inner-depth-x)
                    var(--mmx-shadow-inner-depth-y)
                    var(--mmx-shadow-inner-depth-blur)
                    var(--mmx-shadow-inner-depth-spread)
                    color-mix(
                        in srgb,
                        var(--mmx-shadow-inner-depth-color)
                        calc(var(--mmx-shadow-inner-depth-opacity) * 100%),
                        transparent
                    ),
                    var(--mmx-shadow-outer-glow-x)
                    var(--mmx-shadow-outer-glow-y)
                    var(--mmx-shadow-outer-glow-blur)
                    var(--mmx-shadow-outer-glow-spread)
                    color-mix(
                        in srgb,
                        var(--mmx-shadow-outer-glow-color)
                        calc(var(--mmx-shadow-outer-glow-opacity) * 100%),
                        transparent
                    );

                .el-content {
                    color: var(--md-color2) !important;
                }
            }
        }
    }

    /* Gradient spacing */
    &.gradient {
        .uk-grid {
            .el-item {
                padding: 3em;
            }
			.el-image {
				border-radius: 0.25em;
			}
        }
    }

    /* Services spacing */
    &.services {
        .uk-grid {
            .el-item {
                padding: 0;
            }
        }
    }

    /* Light glow */
    &.light-glow {
        .el-item {
			padding: 1em;
            border: 1px solid color-mix(
                in srgb,
                var(--mmx-border-color) calc(var(--mmx-border-opacity) * 100%),
                transparent
            ) !important;
            border-radius: var(--mmx-border-radius);
            color: var(--md-color2);
            background: var(--md-color1);
            box-shadow: 0 0 28px rgba(64, 0, 255, 0.16);
        }
    }
}

/* =========================================
   __ END MMX GRID
   ========================================= */

/* =========================================
   MMX CARDS
   ========================================= */

.mmx-cards {
    /* Flat */
    &.flat {
        margin-top: auto;
        > .uk-card,
        > .uk-card-default {
            border: 1px solid color-mix(
                in srgb,
                var(--mmx-border-color) calc(var(--mmx-border-opacity) * 100%),
                transparent
            ) !important;
            border-radius: var(--mmx-border-radius) !important;
            color: var(--md-color2) !important;
            background: var(--md-color1) !important;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);

            .el-content,
            .uk-panel {
                color: var(--md-color2) !important;
            }
        }
    }
}

/* =========================================
   __ END MMX CARDS
   ========================================= */

/* =========================================
   MMX BUTTONS
   ========================================= */

.mmx-button {
    .uk-button {
        border-radius: 1em !important;
        border: 1px solid transparent !important;
        transition:
            transform 0.18s ease,
            box-shadow 0.18s ease,
            background-color 0.18s ease,
            border-color 0.18s ease !important;

        &:hover {
            transform: rotate(-0.0142rad);
        }

        &:active {
            transform: translateY(0);
        }
    }

    /* Default */
    .uk-button-default {
        border-color: color-mix(
            in srgb,
            var(--mmx-border-color) calc(var(--mmx-border-opacity) * 100%),
            transparent
        ) !important;
        color: var(--md-color2) !important;
        background: transparent !important;

        &:hover {
            border-color: color-mix(
                in srgb,
                var(--mmx-border-color) 50%,
                transparent
            ) !important;
            color: var(--md-color2) !important;
            background: color-mix(
                in srgb,
                var(--mmx-border-color) 8%,
                transparent
            ) !important;
        }
    }

    /* Primary */
    .uk-button-primary {
        border-color: color-mix(
            in srgb,
            var(--mmx-border-color) calc(var(--mmx-border-opacity) * 100%),
            transparent
        ) !important;
        color: var(--md-color2) !important;
        background: var(--md-color1) !important;

        &:hover {
            border-color: var(--mmx-border-color) !important;
            color: var(--md-color2) !important;
            background: color-mix(
                in srgb,
                var(--mmx-border-color) 8%,
                var(--md-color1)
            ) !important;
        }
    }

    /* Secondary */
    .uk-button-secondary {
        border-color: var(--md-color4-20) !important;
        color: var(--md-color1) !important;
        background: var(--md-color4-20) !important;

        &:hover {
            border-color: var(--md-color4) !important;
            color: var(--md-color1) !important;
            background: var(--md-color4) !important;
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .mmx-button .uk-button {
        transition: none !important;
        transform: none !important;
    }
}

/* =========================================
   __ END MMX BUTTONS
   ========================================= */

/* =========================================
   MMX MARKERS
   ========================================= */

.mmx-marker,
.mmx-text-markup {
    padding: var(--mmx-padding-marker) !important;
    line-height: var(--mmx-lineheight-marker);
    border-radius: var(--mmx-marker-radius);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* Green */
.mmx-marker--green {
    color: var(--md-color1);
    background: var(--md-color4) !important;
}

/* White */
.mmx-marker--white {
    padding: 0 0.15em;
    color: var(--md-color1);
    background: var(--md-color2) !important;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* Cold blue */
.mmx-marker--coldblue {
    color: var(--md-color2);
    background: var(--md-color8) !important;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* Marker inside gradient grids */
.mmx-grid.gradient .mmx-text-markup,
.mmx-grid.services .mmx-text-markup {
    color: var(--md-color1);
    background: var(--md-color2) !important;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}	

/* Marker inside light glow grids */
.mmx-grid.light-glow .mmx-text-markup {
    color: var(--md-color1);
    background: var(--md-color4) !important;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* =========================================
   __ END MMX MARKERS
   ========================================= */

/* =========================================
   MMX VIDEO
   ========================================= */

.mmx-video {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    > video {
        position: absolute;
        z-index: 0;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    &.overlay {
        &::after {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 1;
            background: var(--md-color1);
            opacity: 0.5;
            pointer-events: none;
        }

        > * {
            position: relative;
            z-index: 2;
        }
    }
}

/* Video teaser */
.mxx-bckgrnd.home.video-teaser {
    position: relative;
    min-height: 100vh;
    isolation: isolate;
    overflow: hidden;

    > video {
        position: absolute;
        inset: 0;
        z-index: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: invert(1);
    }

    &::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background: var(--md-color1);
        opacity: 0.5;
        pointer-events: none;
    }

    > .uk-width-1-1 {
        position: relative;
        z-index: 2;
    }
}

/* =========================================
   __ END MMX VIDEO
   ========================================= */

/* =========================================
   MMX UTILITIES
   ========================================= */

/* Mobile only */
.mmx-mobile-only {
    display: none !important;
}

/* Desktop only */
.mmx-desktop-only {
    display: block !important;
}

@media (max-width: 959px) {
    .mmx-mobile-only {
        display: block !important;
    }

    .mmx-desktop-only {
        display: none !important;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .mmx-reduced-motion,
    .mmx-reduced-motion *,
    .mmx-video,
    .mmx-video * {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

/* =========================================
   __ END MMX UTILITIES
   ========================================= */