[x-cloak] {
    display: none !important;
}

:root {
    font-size: clamp(
        16px,
        calc(0.78125vw + 6px),
        22px
    );

    --site-max-width: 2560px;
    --content-max-width: 112rem;
    --content-padding: clamp(1.25rem, 3vw, 3rem);

    --header-height: 80px;


    --color-mabau-666: #666666;
    --color-mabau-100: #fefefe;
    --color-mabau-150: #efefef;
    --color-mabau-200: #73c9e2;
    --color-mabau-250: #fdc505;
    --color-mabau-300: #5fc4e1;
    --color-mabau-350: #fcbe09;
    --color-mabau-400: #3dbee2;
    --color-mabau-450: #fab611;
    --color-mabau-500: #28bbe4;
    --color-mabau-550: #f9af13;
    --color-mabau-600: #1cb3e0;
    --color-mabau-650: #f7a716;
    --color-mabau-700: #1ba9dc;
    --color-mabau-750: #f69f17;
    --color-mabau-800: #0d9dd7;
    --color-mabau-850: #f49818;
    --color-mabau-900: #0c89cb; 
    --color-mabau-950: #f39019;


    --mabau-main-1: #1ba9dc;
    --mabau-main-2: #0d9dd7;
    --mabau-main-3: #0c89cb;

    --mabau-sub-1: #fefefe;
    --mabau-sub-2: #efefef;

    --menu-width: min(92vw, 530px);
    --submenu-width: 420px;


}

*,
*::before,
*::after {
    box-sizing: border-box;
}



/* Grundlayout für gesamte Seite */
html, body {
    background-color: #fcfcfc;
    color: #666666;

    scroll-behavior: smooth;


font-size: clamp(16px, calc(0.78125vw + 6px), 22px);


}

/* Optional: bessere Lesbarkeit */
body {

    /* font-family: system-ui, -apple-system, sans-serif; */
    line-height: 1.6;
    scroll-behavior: smooth;
    /* font-family:'Ropa Sans',sans-serif; */
    font-family:'Ropa Sans',sans-serif;
}

.font-body{font-family:'Lato',sans-serif}
.font-primary{font-family:'Raleway',sans-serif}
.font-secondary{font-family:'Crete Round',serif}





.site-canvas {
    /* position: relative; */
    width: 100%;
    max-width: var(--content-max-width);
    min-height: 100vh;
    margin-inline: auto;
    overflow: clip;
    background: #ffffff;
    box-shadow: 0 0 4rem rgba(15, 23, 42, 0.08);
}

/*
 * Begrenzter Innenbereich:
 * maximal 2048 Pixel
 */
.content-container {
    width: 100%;
    max-width: var(--content-max-width);
    margin-inline: auto;
    padding-inline: var(--content-padding);
}


/*
 * Volle Monitorbreite:
 * für Navigation, Hero und Footer
 */
.site-fullwidth {
    width: 100%;
}



img {
    max-width: 100%;
    height: auto;
}

footer {
    width: 100% !important;
}



@media (max-width: 767px) {
    .site-canvas {
        box-shadow: none;
    }
}









/* SVG Hero Animation */
@keyframes heroSvgSlideInLeft {
    0% {
        transform: translateX(0);
    
    }

    100% {
        transform: translateX(-400px);
       
    }
}

/* Klasse */
.hero-svg-animate-left {
    animation: heroSvgSlideInLeft 1.2s ease-out forwards;
}



/* SVG Hero Animation */
@keyframes heroSvgSlideInRight {
   0% {
        transform: translateX(0);
        
    }

    100% {
        transform: translateX(400px);
        
    }
}

/* Klasse */
.hero-svg-animate-right {
    animation: heroSvgSlideInRight 1.2s ease-out forwards;
}






/* Hero SVG Animation: links */
@keyframes heroShapeInLeft {
    0% {
        transform: translateX(-100px);
       
    }

    100% {
        transform: translateX(-520px);
        
    }
}

/* Hero SVG Animation: rechts */
@keyframes heroShapeInRight {
    0% {
        transform: translateX(100px);
        
    }

    100% {
        transform: translateX(400px);
        
    }
}

/* Content Animation */
@keyframes heroContentFadeUp {
    0% {
        transform: translateY(0);
        
    }

    100% {
        transform: translateY(50px);
        
    }
}

.hero-shape-left {
    animation: heroShapeInLeft 1.1s ease-out forwards;
    
}

.hero-shape-right {
    animation: heroShapeInRight 1.1s ease-out forwards;
   
}

.hero-content-animate {
    animation: heroContentFadeUp 0.9s ease-out 0.2s forwards;

}


@keyframes logoSlide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}









        /*
         * -----------------------------------------------
         * Header
         * -----------------------------------------------
         */

        .site-header {
            height: var(--header-height);
        }


        /*
         * -----------------------------------------------
         * Canvas Wrapper
         *
         * IMMER im DOM.
         * Kein display:none.
         * Kein x-show.
         * -----------------------------------------------
         */

        .menu-canvas {
            position: fixed;

            top: var(--header-height);
            right: 0;

            height: calc(100svh - var(--header-height));

            z-index: 50;

            visibility: hidden;
            pointer-events: none;
        }


        .menu-canvas.is-open {
            visibility: visible;
            pointer-events: auto;
        }


        /*
         * -----------------------------------------------
         * Bewegter Bereich
         * -----------------------------------------------
         */

        .menu-canvas-inner {
            position: relative;

            height: 100%;

            transform: translate3d(100%, 0, 0);

            transition:
                transform 320ms cubic-bezier(.22, .8, .22, 1);

            will-change: transform;

            /*
             * Safari Compositor
             */
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }


        .menu-canvas.is-open .menu-canvas-inner {
            transform: translate3d(0, 0, 0);
        }


        /*
         * -----------------------------------------------
         * Hauptpanel
         * -----------------------------------------------
         */

        .menu-main {

            position: relative;

            z-index: 20;

            width: var(--menu-width);
            height: 100%;

            overflow-y: auto;
            overflow-x: hidden;

            overscroll-behavior: contain;

            -webkit-overflow-scrolling: touch;

            background:
                linear-gradient(
                    to bottom,
                    var(--mabau-main-1),
                    var(--mabau-main-2),
                    var(--mabau-main-3)
                );

            color: white;

            box-shadow:
                -15px 0 40px rgba(0, 0, 0, .18);
        }


        /*
         * -----------------------------------------------
         * Desktop Subpanel
         *
         * Im DOM NACH dem Hauptpanel,
         * visuell links daneben.
         * -----------------------------------------------
         */

        .menu-sub {

            position: absolute;

            top: 0;
            right: 100%;

            z-index: 10;

            width: var(--submenu-width);
            height: 100%;

            overflow-y: auto;

            overscroll-behavior: contain;

            -webkit-overflow-scrolling: touch;

            background:
                linear-gradient(
                    to bottom,
                    var(--mabau-sub-1),
                    var(--mabau-sub-2)
                );

            color: #666;

            opacity: 0;

            transform:
                translate3d(100%, 0, 0);

            pointer-events: none;

            transition:
                transform 280ms cubic-bezier(.22, .8, .22, 1),
                opacity 180ms ease;

            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }


        .menu-sub.is-open {

            opacity: 1;

            transform:
                translate3d(0, 0, 0);

            pointer-events: auto;
        }


        /*
         * -----------------------------------------------
         * Overlay
         * -----------------------------------------------
         */

        .menu-overlay {

            position: fixed;

            top: var(--header-height);
            right: 0;
            bottom: 0;
            left: 0;

            z-index: 40;

            background:
                rgba(0, 0, 0, .45);

            opacity: 0;

            visibility: hidden;

            pointer-events: none;

            transition:
                opacity 250ms ease,
                visibility 0s linear 250ms;
        }


        .menu-overlay.is-open {

            opacity: 1;

            visibility: visible;

            pointer-events: auto;

            transition:
                opacity 250ms ease;
        }


        /*
         * -----------------------------------------------
         * Hamburger
         * -----------------------------------------------
         */

        .menu-toggle {

            width: 44px;
            height: 44px;

            position: relative;

            display: inline-flex;

            align-items: center;
            justify-content: center;

            touch-action: manipulation;

            -webkit-tap-highlight-color:
                transparent;
        }


        .menu-toggle-lines {

            position: relative;

            width: 40px;
            height: 32px;

            display: block;
        }


        .menu-toggle-line {

            position: absolute;

            left: 0;

            height: 5px;

            border-radius: 10px;

            transition:
                transform 280ms ease,
                top 280ms ease,
                opacity 180ms ease,
                width 280ms ease;

            transform-origin: center;
        }



        .menu-toggle-line.one {

            top: 2px;

            width: 40px;

            background: #0c89cb;
        }


        .menu-toggle-line.two {

            top: 14px;

            width: 31px;

            background: #fab611
        }


        .menu-toggle-line.three {

            top: 26px;

            width: 40px;

            background: #0c89cb;
        }


        /*
         * X
         */

        .menu-toggle.is-open
        .menu-toggle-line.one {

            top: 14px;

            transform:
                rotate(45deg);
        }


        .menu-toggle.is-open
        .menu-toggle-line.two {

            opacity: 0;

            width: 0;
        }


        .menu-toggle.is-open
        .menu-toggle-line.three {

            top: 14px;

            transform:
                rotate(-45deg);
        }


        /*
         * -----------------------------------------------
         * Mobile Submenu
         * -----------------------------------------------
         */

        .mobile-sub {

            overflow: hidden;
        }


        /*
         * -----------------------------------------------
         * Desktop
         * -----------------------------------------------
         */

        @media
        (min-width: 1400px)
        and (hover: hover)
        and (pointer: fine) {

            :root {
                --menu-width: 470px;
                --submenu-width: 420px;
            }

            .mobile-sub {
                display: none !important;
            }

        }


        /*
         * -----------------------------------------------
         * große Displays
         * -----------------------------------------------
         */

        @media (min-width: 1920px) {

            :root {
                --menu-width: 540px;
                --submenu-width: 600px;
            }

        }


        @media (min-width: 2560px) {

            :root {
                --menu-width: 620px;
                --submenu-width: 700px;
            }

        }