/************************************************************************************/ 
/* 6KA Softwareentwicklung und Digitalisierung                                      */
/* https://6ka-digital.com                                                          */
/*                                                                                  */
/* root.css v1.0.3 - 18.05.2026                                                     */
/************************************************************************************/

/************************************************************************************/
/* Standard (Light Mode)                                                            */
/* Basic style definitions & variables.                                             */
/************************************************************************************/

@layer base {

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

    html                                            {   min-height: 100vh; 
                                                        font-size: 16px;
                                                        overflow-x: hidden; }

    body                                            {   font: 400 16px/1.5 Roboto, system-ui, -apple-system, "Segoe UI", Ubuntu, Cantarell, "Noto Sans", Arial, "Apple Color Emoji", "Segoe UI Emoji";
                                                        line-height: 1.5; 
                                                        min-width: 0;
                                                        overflow-x: hidden; }

    body::after                                     {   content:    url(icons/symSquarePoint.svg) 
                                                                    url(icons/symbPhoneC8DD81.svg);
                                                        display: none; }                                                        

    img,
    svg,
    video,
    canvas                                          {   display: block;
                                                        max-width: 100%;
                                                        height: auto; }     
    

    :root                                           {   --primary-blue: #214778;
                                                        --primary-blue2: #add5ff;
                                                        --primary-blue3: #112947;
                                                        --primary-blue4: #203d63;
                                                        --primary-blue5: #3a4d66;
                                                        --primary-blue6: #546883;
                                                        --primary-blue7: #7c95b6;
                                                        --primary-green: #5B6F1A;
                                                        --primary-green2: #f0f7db;
                                                        --primary-green3: #5B6F1A;
                                                        --primary-green4: #c8dd81;
                                                        --primary-green5: #7e9c1e;
                                                        --primary-green6: #f4f7ed;
                                                        --primary-orange: #fc8f00;
                                                        --primary-orange2: #dda255;
                                                        --primary-red: #a02c2c;
                                                        --primary-red2: #f7eaea;
                                                        --primary-red3: #dd3a3a;
                                                        --primary-white: #ffffff;
                                                        --primary-white-trans: rgba(255, 255, 255, 0.7);
                                                        --primary-black: #000000;            
                                                        --primary-grey1: #777777;
                                                        --primary-grey2: #333333;
                                                        --primary-grey3: #222222;
                                                        --primary-grey4: #c7c7c7;
                                                        --primary-grey5: #e9e9e9;
                                                        --primary-grey6: #555555; 
                                                        --primary-grey7: #f1f1f1;
                                                        --primary-grey8: #e0e0e0;
                                                        --primary-grey9: #3f3f3f;
                                                        --primary-brown: #885d01;

                                                        --primary-transparency: transparent;

                                                        --primary-box-shadow: rgba(0, 0, 0, 0.15);
                                                        
                                                        --header-height-large: 7rem;
                                                        --header-height-small: 5rem;
                                                        --transition-speed: 0.4s cubic-bezier(0.4, 0, 0.2, 1);  }

    html                                            {   scroll-padding-top: var(--header-height-large); }

    html:has(.is-shrunk)                            {   scroll-padding-top: var(--header-height-small); }

    :focus-visible                                  {   outline: 2px solid var(--primary-blue3);
                                                        outline-offset: 1px;
                                                        border-radius: 4px; }

    @media (prefers-reduced-motion: reduce)         {
    
        *, ::before, ::after                        {   animation-duration: 0.01ms !important;
                                                        animation-iteration-count: 1 !important;
                                                        transition-duration: 0.03ms !important;
                                                        scroll-behavior: auto !important; } }
}