[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);
}

*,
*::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%);
  }
}