:root {
    --color-brand-gray: #50565C;
    --color-brand-petrol: #005D6C;
    --color-brand-berry: #91016F;

    --color-orange-dark: #EC6602;
    --color-orange-light: #EC6602;
    --color-black: #000000;
    --color-white: #F5F5F5;

    --color-primary: var(--color-brand-gray);
    --color-secondary: var(--color-brand-gray);    
    --color-accent: var(--color-primary);
    
    --color-title: #F5F5F5;
    --color-subtitle: #707070;
    --color-label: #707070;
    --color-text: #E0E0E0;
    --color-background: #FFFFFF;

    --color-error: #E74C3C;
    --color-info: #3498DB;
    --color-note: var(--color-info);
    --color-success: #27AE60;
    --color-warning: #F1C40F;

    --color-action: var(--color-accent);
    --color-action-hover: var(--color-primary);

    --breakpoint: 0;
    --layout-width-max: 90rem; /* 320 x 256 > 1440 */
    --layout-padding-y: 32px;
    --layout-padding-x: clamp(20px, 5vw, 48px);
    --layout-padding: var(--layout-padding-y) var(--layout-padding-x);
    --layout-column-gap: 24px;
    --layout-row-gap: 24px;

    --rem-base: 16;
    --vw-min: 360;
    --vw-max: 1440;
    --tsa: 1.25;
    --tsd: calc(1 / var(--tsa));   
    --text-min: 20;
    --text-max: 22;
    --text-slope: calc((var(--text-max) - var(--text-min)) / (var(--vw-max) - var(--vw-min)));
    --text-offset: calc(var(--text-min) - var(--text-slope) * var(--vw-min));
    --text-base: clamp(
        calc(var(--text-min) / var(--rem-base) * 1rem),
        calc(var(--text-offset) / var(--rem-base) * 1rem + var(--text-slope) * 100vw),
        calc(var(--text-max) / var(--rem-base) * 1rem)
    );
    --title-min: 25;
    --title-max: 30.72; /* 1.5625 */
    --title-slope: calc((var(--title-max) - var(--title-min)) / (var(--vw-max) - var(--vw-min)));
    --title-offset: calc(var(--title-min) - var(--title-slope) * var(--vw-min));
    --title-base: clamp(
        calc(var(--title-min) / var(--rem-base) * 1rem),
        calc(var(--title-offset) / var(--rem-base) * 1rem + var(--title-slope) * 100vw),
        calc(var(--title-max) / var(--rem-base) * 1rem)
    );
    --display-min: 38;
    --display-max: 60;
    --display-slope: calc((var(--display-max) - var(--display-min)) / (var(--vw-max) - var(--vw-min)));
    --display-offset: calc(var(--display-min) - var(--display-slope) * var(--vw-min));
    --display-base: clamp(
        calc(var(--display-min) / var(--rem-base) * 1rem),
        calc(var(--display-offset) / var(--rem-base) * 1rem + var(--display-slope) * 100vw),
        calc(var(--display-max) / var(--rem-base) * 1rem)
    );    
    
    --font-family: 'Roboto', system-ui, Helvetica, Arial, sans-serif;
    --font-family-title: 'Oswald';
    --font-family-subtitle: var(--font-family-title);
    --font-family-label: var(--font-family-title);  
    --font-size-100: calc(var(--font-size-200) * var(--tsd));
    --font-size-200: calc(var(--font-size-300) * var(--tsd));
    --font-size-300: var(--text-base);
    --font-size-400: calc(var(--font-size-300) * var(--tsa));
    --font-size-500: calc(var(--font-size-400) * var(--tsa));

    --font-size-600: var(--title-base);
    --font-size-700: calc(var(--font-size-600) * var(--tsa));
    --font-size-800: calc(var(--font-size-700) * var(--tsa));
    
    --font-size-900: var(--display-base);
    --font-size-1000: calc(var(--font-size-900) * var(--tsa));    
    
/*    --font-size-600: calc(var(--font-size-700) * var(--tsd));
    --font-size-700: calc(var(--font-size-800) * var(--tsd));
    --font-size-800: var(--title-base);
    --font-size-900: calc(var(--font-size-800) * var(--tsa));
    --font-size-1000: calc(var(--font-size-900) * var(--tsa));
*/



--font-family: 'Roboto', system-ui, Helvetica, Arial, sans-serif; 
--font-style: normal;
--font-weight: 400;
--font-size: var(--t1-size);
--line-height: 1.5;
--letter-spacing: 0;
--word-spacing: 0;
--hyphens: manual;
--overflow-wrap: normal;
--color: #000000;

    
    --header-position: sticky;  
    --header-height: 64px;
    --header-border-bottom: var(--header-fixed-border-bottom);
    --header-background-color: var(--header-fixed-background-color);
    --header-blur: var(--header-fixed-blur);
    --header-shadow: var(--header-fixed-shadow);
    --header-transition: height 0.4s ease-in-out, background-color 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
    --header-transition-change: height, background-color, box-shadow;
    
    --header-fixed-height: var(--header-height);
    --header-fixed-border-bottom: 1px solid #262626;
    --header-fixed-background-color: rgba(48,48,48,0.8);
    --header-fixed-blur: 20px; /* 48 */
    --header-fixed-shadow: 0 10px 5px 0 rgba(0, 0, 0, 0.08);

    --brand-position-top: 0;
    --brand-position-left: -8px;
    --brand-height: 66%;
    --brand-transition: opacity 0.8s ease-in-out, transform 0.35s ease-out;
    --brand-transition-change: opacity, transform;
    --brand-transform-origin: 0% -20px;
    --brand-transform: none;
    --brand-fixed-transform: none;
    

    --svg-icon-arrow: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg>');
}

@media screen and (min-width: 768px) {
    :root {
        --breakpoint: 1;
        --header-height: 100px;
        --header-border-bottom: 1px solid transparent;
    }
    
    :root.script {
        --header-background-color: rgba(48,48,48,1);
        --header-shadow: none;
        --brand-transform: scale(1.3);
        --brand-fixed-transform: scale(1);
    }

    .header-scrolled #header {
        height: var(--header-fixed-height);
        border-bottom: var(--header-fixed-border-bottom);
        __background-color: var(--header-fixed-background-color);
        box-shadow: var(--header-fixed-shadow);
    }

    .header-scrolled #header:before {
        background-color: var(--header-fixed-background-color);
    }
    
    .delayed-motion #header {
        transition: var(--header-transition);
        will-change: var(--header-transition-change);
    }

    .script #header {
        animation: none;
    }
    
    @keyframes fadein {
        0% { opacity: 0; }
        100% { opacity: 1; }
    }


    #header-layout {
        /*animation: fadein 0.8s ease-in-out forwards;*/
    }

    .script #brand {
        /*opacity: 0;*/
        transform-origin: var(--brand-transform-origin);
        transform: var(--brand-transform);
    }
    
    .scrolled #brand {
        padding-top: 0;
        transform: var(--brand-fixed-transform);
    }

    .delayed-motion #brand {
        opacity: 1;
        transition: var(--brand-transition);
        will-change: var(--brand-transition-change);
    }
}

@media screen and (min-width: 1024px) {
    :root {
        --breakpoint: 2;
    }
}

@media screen and (min-width: 1280px) {
    :root {
        --breakpoint: 3;
    }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: smooth;
  }
}

@supports not ((mask-image: url('')) and (gap: 0.5em)) {
    a[data-icon] {
        gap: 0;
    }
    a[data-icon]::before {
        display: none;
    }
}

:root {
    --svg-icon-chevron: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>');
    --svg-icon-email: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>');
    --svg-icon-phone: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.02.74-.25 1.02l-2.2 2.2z"/></svg>');
    --svg-icon-mobile: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M17 1.01L7 1c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H7V5h10v14z"/></svg>');
    --svg-icon-download: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>');
    --svg-icon-internal: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/></svg>');
    --svg-icon-external: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/></svg>');
    --svg-icon-plus: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>');
    --svg-icon-minus: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M19 13H5v-2h14v2z"/></svg>');
    --svg-icon-close: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>');
    --svg-icon-circle-outline: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/></svg>');
    --svg-icon-menu: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M3 18h18v-2H3v2zm0-5h14v-2H3v2zm0-7v2h18V6H3z"/></svg>');
    --__svg-icon-login: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-2.1 2.1S9.9 9.16 9.9 8s.94-2.1 2.1-2.1m0 9c2.97 0 6.1 1.46 6.1 2.1v1.1H5.9V17c0-.64 3.13-2.1 6.1-2.1M12 4C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 9c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z"/></svg>');
    --__svg-icon-search: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>');


/* fill="currentColor"  stroke="currentColor" stroke-width="0.2" stroke-linejoin="round" */
--svg-icon-login: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor"  stroke="currentColor" stroke-width="0.1" stroke-linejoin="round" d="M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-2.1 2.1S9.9 9.16 9.9 8s.94-2.1 2.1-2.1m0 9c2.97 0 6.1 1.46 6.1 2.1v1.1H5.9V17c0-.64 3.13-2.1 6.1-2.1M12 4C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 9c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z"/></svg>');


--svg-icon-search: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor"  stroke="currentColor" stroke-width="0.2" stroke-linejoin="round" d="M33.41,32.74l-7.31-7.3A9.49,9.49,0,1,0,9.55,19.1a9.48,9.48,0,0,0,15.84,7l7.31,7.3a.49.49,0,0,0,.35.15.51.51,0,0,0,.36-.15A.51.51,0,0,0,33.41,32.74ZM10.55,19.1a8.5,8.5,0,1,1,14.51,6h0a8.49,8.49,0,0,1-14.5-6Z" transform="translate(-9.55 -9.6)"/></svg>');
--svg-icon-search2: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" stroke="currentColor" stroke-width="0.3" stroke-linejoin="round" d="M33.41,32.74l-7.31-7.3A9.49,9.49,0,1,0,9.55,19.1a9.48,9.48,0,0,0,15.84,7l7.31,7.3a.49.49,0,0,0,.35.15.51.51,0,0,0,.36-.15A.51.51,0,0,0,33.41,32.74ZM10.55,19.1a8.5,8.5,0,1,1,14.51,6h0a8.49,8.49,0,0,1-14.5-6Z" transform="translate(-9.55 -9.6)"/></svg>');
/* Ersetzen Sie Ihre alten Variablen mit dieser */
--svg-icon-search2: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="miter" stroke-width="2" d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19ZM16.65 16.65L21 21"/></svg>');



/* account-circle */
--svg-icon-account-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M248-261q51-36 108-58 57-21 124-21t124 21q57 22 108 58 40-41 64-96 24-56 24-123 0-133-93-226t-227-94q-133 0-226 94t-94 226q0 67 24 123 24 55 64 96Zm232-199q-51 0-85-35-35-34-35-85t35-85q34-35 85-35t85 35q35 34 35 85t-35 85q-34 35-85 35Zm0 340q-75 0-141-28t-114-77q-49-48-77-114t-28-141 28-141q28-66 77-114 48-49 114-77t141-28 141 28q66 28 114 77 49 48 77 114t28 141-28 141q-28 66-77 114-48 49-114 77t-141 28Zm0-40q55 0 109-19 53-20 92-53-39-32-90-50t-111-18q-60 0-112 18-51 18-89 50 39 33 92 53 54 19 109 19Zm0-340q34 0 57-23t23-57-23-57q-23-23-57-23t-57 23q-23 23-23 57t23 57q23 23 57 23Zm0-80Zm0 350Z'/%3E%3C/svg%3E");

--svg-icon-account-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M232-253q60-41.4 119.2-64.1 59.3-22.7 128.8-22.7 69.5 0 129 22.7 59.7 22.7 119.6 64 43.6-50.5 64.8-106.7Q814.6-416 814.6-480q0-141.5-96.5-238-96.6-96.6-238.1-96.6t-238 96.5q-96.6 96.6-96.6 238.1 0 64 21.5 120.2T232-253.1Zm247.8-204.3q-54 0-90.8-37t-36.8-91q0-54 37-90.7 37-36.8 91-36.8t90.8 37q36.8 37 36.8 91 0 53.9-37 90.7-37 36.8-91 36.8Zm.7 357.3q-79 0-148.3-29.8-69.2-29.7-121-81.5-51.7-51.9-81.4-120.8Q100-401 100-480t29.8-148q29.7-68.8 81.5-120.7 51.9-51.8 120.8-81.5Q401-860 480-860t148 29.8q68.8 29.7 120.7 81.6 51.8 51.8 81.5 120.6Q860-559 860-480.5q0 79-29.8 148.3-29.7 69.2-81.6 121-51.8 51.7-120.6 81.4Q559-100 480.5-100Zm-.5-45.4q55.8 0 110-17.7t102.2-57.4q-48-35.2-101.6-54.6-53.5-19.4-110.6-19.4-57 0-110.8 19.2t-101 54.8Q315.8-180.8 370-163q54.2 17.7 110 17.7Zm0-357.3q36 0 59.1-23.3 23.3-23.3 23.3-59.1T539-644.2q-23.3-23.3-59.1-23.3t-59.1 23.3q-23.3 23.3-23.3 59.2t23.3 59q23.3 23.3 59.2 23.3Zm0-82.4Zm0 365.2Z'/%3E%3C/svg%3E");

/* fill="currentColor"  stroke="currentColor" stroke-width="0.2" stroke-linejoin="round" */
--svg-icon-account-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'  viewBox='0 -960 960 960' fill='currentColor'%3E%3Cpath d='M247.85-260.62q51-36.69 108.23-58.03Q413.31-340 480-340t123.92 21.35q57.23 21.34 108.23 58.03 39.62-41 63.73-96.84Q800-413.31 800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 66.69 24.12 122.54 24.11 55.84 63.73 96.84ZM480.02-460q-50.56 0-85.29-34.71Q360-529.42 360-579.98q0-50.56 34.71-85.29Q429.42-700 479.98-700q50.56 0 85.29 34.71Q600-630.58 600-580.02q0 50.56-34.71 85.29Q530.58-460 480.02-460ZM480-120q-75.31 0-141-28.04t-114.31-76.65Q176.08-273.31 148.04-339 120-404.69 120-480t28.04-141q28.04-65.69 76.65-114.31 48.62-48.61 114.31-76.65Q404.69-840 480-840t141 28.04q65.69 28.04 114.31 76.65 48.61 48.62 76.65 114.31Q840-555.31 840-480t-28.04 141q-28.04 65.69-76.65 114.31-48.62 48.61-114.31 76.65Q555.31-120 480-120Zm0-40q55.31 0 108.85-19.35 53.53-19.34 92.53-52.96-39-31.31-90.23-49.5Q539.92-300 480-300q-59.92 0-111.54 17.81-51.61 17.81-89.84 49.88 39 33.62 92.53 52.96Q424.69-160 480-160Zm0-340q33.69 0 56.85-23.15Q560-546.31 560-580t-23.15-56.85Q513.69-660 480-660t-56.85 23.15Q400-613.69 400-580t23.15 56.85Q446.31-500 480-500Zm0-80Zm0 350Z'/%3E%3C/svg%3E");


    /* 200 48px
        nav-account
        nav-language
        nav-search
        nav-menu
        nav-close
        nav-chevron
        nav-arrow
    */
    /*
        fill="currentColor"
        stroke="currentColor"
        stroke-width="0.2"
        stroke-linejoin="round"
        
        fill='currentColor'
    */

    --svg-icon-nav-account: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 48 48'%3E%3Cpath d='M11.6 35.3c2-1.3 4-2.4 6-3.2 2-.7 4-1 6.4-1 2.3 0 4.5.3 6.5 1 2 .8 4 1.9 6 3.2A16.9 16.9 0 0 0 40.7 24c0-4.7-1.7-8.7-4.9-11.9A16.2 16.2 0 0 0 24 7.3c-4.7 0-8.7 1.6-11.9 4.8A16.2 16.2 0 0 0 7.3 24a16.7 16.7 0 0 0 4.3 11.3zM24 25.1a6.2 6.2 0 0 1-6.4-6.4c0-1.8.6-3.3 1.9-4.5a6.2 6.2 0 0 1 4.5-1.8 6.2 6.2 0 0 1 6.4 6.4c0 1.8-.6 3.3-1.9 4.5a6.2 6.2 0 0 1-4.5 1.8zM24 43a18.6 18.6 0 0 1-13.4-5.6A19.3 19.3 0 0 1 5 24a18.4 18.4 0 0 1 5.6-13.4A19.2 19.2 0 0 1 24 5a18.4 18.4 0 0 1 13.4 5.6A19.2 19.2 0 0 1 43 24a18.6 18.6 0 0 1-5.6 13.4A19.3 19.3 0 0 1 24 43zm0-2.3A17.1 17.1 0 0 0 34.6 37a20 20 0 0 0-5-2.8 16.1 16.1 0 0 0-11.1 0c-1.8.7-3.5 1.6-5 2.8 1.5 1.3 3.2 2.3 5 2.8s3.6 1 5.5 1zM24 23a4 4 0 0 0 4.1-4.2 4 4 0 0 0-4.1-4 4 4 0 0 0-4.1 4A4 4 0 0 0 24 23z'/%3E%3C/svg%3E");
    --svg-icon-nav-cancel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 48 48'%3E%3Cpath d='m24 25.6 6.6 6.6c.2.2.5.4.8.4.3 0 .6-.1.8-.4.3-.2.4-.5.4-.8 0-.3-.1-.5-.4-.8L25.6 24l6.6-6.6c.2-.2.4-.5.4-.8a1 1 0 0 0-.4-.8c-.2-.3-.5-.4-.8-.4s-.5.1-.8.4L24 22.4l-6.6-6.6c-.2-.2-.5-.4-.8-.4a1 1 0 0 0-.8.4c-.3.2-.4.5-.4.8s.1.5.4.8l6.6 6.6-6.6 6.6c-.2.2-.4.5-.4.8 0 .3.1.6.4.8.2.3.5.4.8.4.3 0 .5-.1.8-.4l6.6-6.6zM24 43a18.8 18.8 0 0 1-13.4-5.5A18.4 18.4 0 0 1 5 24 18.8 18.8 0 0 1 16.6 6.5a18.5 18.5 0 0 1 20.8 4A19.2 19.2 0 0 1 43 24a18.5 18.5 0 0 1-11.6 17.5c-2.3 1-4.8 1.5-7.4 1.5zm0-2.3a16 16 0 0 0 11.9-4.9c3.2-3.2 4.8-7.2 4.8-11.8 0-4.7-1.6-8.6-4.8-11.9A16.1 16.1 0 0 0 24 7.3c-4.6 0-8.6 1.6-11.8 4.8a16.1 16.1 0 0 0-5 11.9 16 16 0 0 0 5 11.8 16 16 0 0 0 11.8 5z'/%3E%3C/svg%3E");
    --svg-icon-nav-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 48 48'%3E%3Cpath d='M24 43a18.8 18.8 0 0 1-13.4-5.5A18.4 18.4 0 0 1 5 24 18.8 18.8 0 0 1 16.6 6.5a18.5 18.5 0 0 1 20.8 4A19.2 19.2 0 0 1 43 24a18.5 18.5 0 0 1-11.6 17.5c-2.3 1-4.8 1.5-7.4 1.5zm0-2.3a16 16 0 0 0 11.9-4.9c3.2-3.2 4.8-7.2 4.8-11.8 0-4.7-1.6-8.6-4.8-11.9A16.1 16.1 0 0 0 24 7.3c-4.6 0-8.6 1.6-11.8 4.8a16.1 16.1 0 0 0-5 11.9 16 16 0 0 0 5 11.8 16 16 0 0 0 11.8 5z'/%3E%3C/svg%3E");
    --svg-icon-nav-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 48 48'%3E%3Cpath d='M8.1 13.3A1.1 1.1 0 0 1 7 12.2c0-.4.1-.7.3-.9.2-.2.5-.3.8-.3H40c.3 0 .6.1.8.3.2.2.3.5.3.8 0 .4-.1.6-.3.8a1 1 0 0 1-.8.4H8zm0 23.7A1.1 1.1 0 0 1 7 35.9c0-.4.1-.6.3-.9.2-.2.5-.3.8-.3H40c.3 0 .6.1.8.4.2.2.3.5.3.8 0 .3-.1.6-.3.8-.2.2-.5.3-.8.3H8zm0-11.9A1.1 1.1 0 0 1 7 24c0-.3.1-.6.3-.8.2-.2.5-.3.8-.3H28c.3 0 .6 0 .8.3.2.2.3.5.3.8 0 .3-.1.6-.3.8-.2.2-.5.3-.8.3H8z'/%3E%3C/svg%3E");
    --svg-icon-nav-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 48 48'%3E%3Cpath d='M20.4 33.3c3.6 0 6.7-1.2 9.2-3.7 2.5-2.5 3.7-5.6 3.7-9.2a12 12 0 0 0-3.8-9.1 12.8 12.8 0 0 0-18.2 0 12.4 12.4 0 0 0-3.8 9.1c0 3.6 1.3 6.7 3.8 9.2 2.5 2.5 5.5 3.7 9.1 3.7zm0 2.3c-4.2 0-7.8-1.5-10.7-4.4-3-3-4.5-6.6-4.5-10.8 0-4.2 1.5-7.8 4.5-10.7 3-3 6.5-4.5 10.7-4.5 4.2 0 7.8 1.5 10.8 4.5 2.9 3 4.4 6.5 4.4 10.7a14.7 14.7 0 0 1-3.7 9.9l10.5 10.5c.2.3.4.5.4.8 0 .3-.2.6-.4.8-.2.2-.5.4-.8.4-.3 0-.6-.2-.8-.4L30.3 32a15.3 15.3 0 0 1-9.9 3.7z'/%3E%3C/svg%3E");
}


@supports (-webkit-mask-image: none) or (mask-image: none) {
    [data-icon]:not([data-icon=""]) {
        
        --icon-display: inline-flex;
        --icon-position: absolute;
        --icon-position-top: 0.25em;
        --icon-position-left: 0;
        --icon-position-right: auto;
        --icon-position-bottom: auto;

        --icon-spacing: 1.2em;
        --icon-color: white;
        
        --icon-background-border: none;
        --icon-background-border-radius: 0;
        --icon-background-color: transparent;
        
        --icon-size: 1em; /* Background */
        --icon-visual-size: 100%; /* Icon */
        --icon-scale: 1;
        --icon-rotate: 0deg;
        --icon-transform-origin: center;        
        --icon-transition-duration: 0.3s;
        
        position: relative;
        display: var(--icon-display); 
        align-items: center;
        padding-left: var(--icon-spacing); /* Standard-Abstand links */
    }

    [data-icon]:not([data-icon=""])::before,
    [data-icon]:not([data-icon=""])::after {
        content: '';
        position: var(--icon-position);
        top: var(--icon-position-top);
        left: var(--icon-position-left);
        right: var(--icon-position-right);
        bottom: var(--icon-position-bottom);
        width: var(--icon-size);
        height: var(--icon-size);
        transform-origin: var(--icon-transform-origin);
        transform: rotate(var(--icon-rotate)) scale(var(--icon-scale));
        transition: all var(--icon-transition-duration);
        border: 2px solid yellow !important;
    }

    [data-icon]:not([data-icon=""])::before {
        border: var(--icon-background-border);
        border-radius: var(--icon-background-border-radius);
        background-color: var(--icon-background-color);
    }

    [data-icon]:not([data-icon=""])::after {
        -webkit-mask-size: var(--icon-visual-size);
        mask-size: var(--icon-visual-size);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        background-color: var(--icon-color);
    }

    /* --- Spezifische Icons --- */

    [data-icon="nav-account"]::after {
        -webkit-mask-image: var(--svg-icon-nav-account);
        mask-image: var(--svg-icon-nav-account);
    }

    [data-icon="nav-circle"]::after {
        -webkit-mask-image: var(--svg-icon-nav-circle);
        mask-image: var(--svg-icon-nav-circle);
    }
    [data-icon="nav-cancel"]::after {
        -webkit-mask-image: var(--svg-icon-nav-cancel);
        mask-image: var(--svg-icon-nav-cancel);
    }


    [data-icon="nav-menu"]::after {
        -webkit-mask-image: var(--svg-icon-nav-menu);
        mask-image: var(--svg-icon-nav-menu);
    }
    [data-icon="nav-search"]::after {
        -webkit-mask-image: var(--svg-icon-nav-search);
        mask-image: var(--svg-icon-nav-search);
    }




    [data-icon="accordion"]::after {
        --svg-icon-accordion: var(--svg-icon-plus);
        mask-image: var(--svg-icon-accordion); 
    }

    [data-icon="chevron"]::after {
        mask-image: var(--svg-icon-chevron);
    }
    [data-icon="email"]::after {
        mask-image: var(--svg-icon-email);
    }
    [data-icon="phone"]::after {
        mask-image: var(--svg-icon-phone);
    }
    [data-icon="mobile"]::after {
        mask-image: var(--svg-icon-mobile);
    }
    [data-icon="download"]::after {
        mask-image: var(--svg-icon-download);
    }
    [data-icon="internal"]::after {
        mask-image: var(--svg-icon-internal);
    }
    [data-icon="external"]::after {
        mask-image: var(--svg-icon-external);
    }
    [data-icon="plus"]::after {
        mask-image: var(--svg-icon-plus);
    }
    [data-icon="minus"]::after {
        mask-image: var(--svg-icon-minus);
    }
    [data-icon="close"]::after {
        mask-image: var(--svg-icon-close);
    }
    [data-icon="circle-outline"]::after {
        mask-image: var(--svg-icon-circle-outline);
    }
    [data-icon="menu"]::after {
        mask-image: var(--svg-icon-menu);
    }
    [data-icon="login"]::after {
        mask-image: var(--svg-icon-login);
    }
    [data-icon="search"]::after {
        mask-image: var(--svg-icon-search);
    }

    [data-icon="search2"]::after {
        mask-image: var(--svg-icon-search2);
    }


    /* --- Style-Modifikatoren --- */
    /* Positionierung am Ende */
    [data-icon][data-icon-style*="end"] {
        padding-left: 0;
        padding-right: var(--icon-spacing);
    }

    [data-icon][data-icon-style*="end"]::before,
    [data-icon][data-icon-style*="end"]::after {
        left: auto;
        right: 0;
    }

    /* Runder Hintergrund */
    [data-icon][data-icon-style*="round"]::before {
        background-color: var(--icon-background-color); /* Sichtbare Farbe für den Kreis */
        border-radius: 50%;
        border: var(--icon-background-border);
    }
    
    /* Skalierungs-Modifikator */
    [data-icon][data-icon-style*="small"] {
        --icon-visual-size: 80%;
    }

    /* Rotations-Modifikator */
    [data-icon][data-icon-style*="rotate-90"] {
        --icon-rotate: 90deg;
    }

    /* Transform-Origin-Modifikator */
    [data-icon][data-icon-style*="scale-from-top-left"] {
        --icon-transform-origin: 0 0;
        --icon-scale: 1.5;
    }
}

/* Oswald */
@font-face {
  font-display: swap;
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 200;
  src: url('../font/oswald/oswald-v53-latin-200.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 300;
  src: url('../font/oswald/oswald-v53-latin-300.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: url('../font/oswald/oswald-v53-latin-regular.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  src: url('../font/oswald/oswald-v53-latin-500.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  src: url('../font/oswald/oswald-v53-latin-600.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  src: url('../font/oswald/oswald-v53-latin-700.woff2') format('woff2');
}
/* Encode Sans */
@font-face {
  font-display: swap;
  font-family: 'Encode Sans';
  font-style: normal;
  font-weight: 100;
  src: url('../font/encode-sans/encode-sans-v23-latin-100.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Encode Sans';
  font-style: normal;
  font-weight: 200;
  src: url('../font/encode-sans/encode-sans-v23-latin-200.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Encode Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../font/encode-sans/encode-sans-v23-latin-300.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Encode Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../font/encode-sans/encode-sans-v23-latin-regular.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Encode Sans';
  font-style: normal;
  font-weight: 500;
  src: url('../font/encode-sans/encode-sans-v23-latin-500.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Encode Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../font/encode-sans/encode-sans-v23-latin-600.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Encode Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../font/encode-sans/encode-sans-v23-latin-700.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Encode Sans';
  font-style: normal;
  font-weight: 800;
  src: url('../font/encode-sans/encode-sans-v23-latin-800.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Encode Sans';
  font-style: normal;
  font-weight: 900;
  src: url('../font/encode-sans/encode-sans-v23-latin-900.woff2') format('woff2');
}