/* Theme Name: Hello Elementor Child Theme URI: https://github.com/elementor/hello-theme-child/ Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team Author: Elementor Team Author URI: https://elementor.com/ Template: hello-elementor Version: 2.0.0 Text Domain: hello-elementor-child License: GNU General Public License v3 or later. License URI: https://www.gnu.org/licenses/gpl-3.0.html Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready */
/* ========================================================================= * WEBFONTS * * Both families are served from this server, from assets/fonts/. * Nothing is requested from fonts.googleapis.com: that would transmit every * visitor's IP address to Google before consent, which German and Austrian * courts have held breaches the DSGVO. * * Paths are relative to this file, so they keep working on any domain and * survive a move between local, staging and live with no search-replace. * * Gilroy font - brand face, headings and buttons. 4 weights. * Inter - body and UI. 9 weights x normal/italic x latin/latin-ext. * unicode-range is preserved, so a browser downloads only * the one subset it needs, not all 36 files. * ====================================================================== */
/* --- Gilroy font (brand) ------------------------------------------------ */
 @font-face {
     font-family: 'Gilroy font';
     font-style: normal;
     font-weight: 400;
    /* Regular */
     font-display: swap;
     src: url('assets/fonts/gilroy-400-normal.ttf') format('truetype');
}
 @font-face {
     font-family: 'Gilroy font';
     font-style: normal;
     font-weight: 500;
    /* Medium */
     font-display: swap;
     src: url('assets/fonts/gilroy-500-normal.ttf') format('truetype');
}
 @font-face {
     font-family: 'Gilroy font';
     font-style: normal;
     font-weight: 600;
    /* SemiBold */
     font-display: swap;
     src: url('assets/fonts/gilroy-600-normal.ttf') format('truetype');
}
 @font-face {
     font-family: 'Gilroy font';
     font-style: normal;
     font-weight: 700;
    /* Bold */
     font-display: swap;
     src: url('assets/fonts/gilroy-700-normal.ttf') format('truetype');
}
/* --- Inter (body / UI) -------------------------------------------------- */
 @font-face {
     font-family: 'Inter';
     font-style: italic;
     font-weight: 100;
     font-display: swap;
     src: url('assets/fonts/inter-100-italic-latin-ext.woff2') format('woff2');
     unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
 @font-face {
     font-family: 'Inter';
     font-style: italic;
     font-weight: 100;
     font-display: swap;
     src: url('assets/fonts/inter-100-italic-latin.woff2') format('woff2');
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
 @font-face {
     font-family: 'Inter';
     font-style: italic;
     font-weight: 200;
     font-display: swap;
     src: url('assets/fonts/inter-200-italic-latin-ext.woff2') format('woff2');
     unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
 @font-face {
     font-family: 'Inter';
     font-style: italic;
     font-weight: 200;
     font-display: swap;
     src: url('assets/fonts/inter-200-italic-latin.woff2') format('woff2');
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
 @font-face {
     font-family: 'Inter';
     font-style: italic;
     font-weight: 300;
     font-display: swap;
     src: url('assets/fonts/inter-300-italic-latin-ext.woff2') format('woff2');
     unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
 @font-face {
     font-family: 'Inter';
     font-style: italic;
     font-weight: 300;
     font-display: swap;
     src: url('assets/fonts/inter-300-italic-latin.woff2') format('woff2');
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
 @font-face {
     font-family: 'Inter';
     font-style: italic;
     font-weight: 400;
     font-display: swap;
     src: url('assets/fonts/inter-400-italic-latin-ext.woff2') format('woff2');
     unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
 @font-face {
     font-family: 'Inter';
     font-style: italic;
     font-weight: 400;
     font-display: swap;
     src: url('assets/fonts/inter-400-italic-latin.woff2') format('woff2');
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
 @font-face {
     font-family: 'Inter';
     font-style: italic;
     font-weight: 500;
     font-display: swap;
     src: url('assets/fonts/inter-500-italic-latin-ext.woff2') format('woff2');
     unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
 @font-face {
     font-family: 'Inter';
     font-style: italic;
     font-weight: 500;
     font-display: swap;
     src: url('assets/fonts/inter-500-italic-latin.woff2') format('woff2');
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
 @font-face {
     font-family: 'Inter';
     font-style: italic;
     font-weight: 600;
     font-display: swap;
     src: url('assets/fonts/inter-600-italic-latin-ext.woff2') format('woff2');
     unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
 @font-face {
     font-family: 'Inter';
     font-style: italic;
     font-weight: 600;
     font-display: swap;
     src: url('assets/fonts/inter-600-italic-latin.woff2') format('woff2');
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
 @font-face {
     font-family: 'Inter';
     font-style: italic;
     font-weight: 700;
     font-display: swap;
     src: url('assets/fonts/inter-700-italic-latin-ext.woff2') format('woff2');
     unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
 @font-face {
     font-family: 'Inter';
     font-style: italic;
     font-weight: 700;
     font-display: swap;
     src: url('assets/fonts/inter-700-italic-latin.woff2') format('woff2');
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
 @font-face {
     font-family: 'Inter';
     font-style: italic;
     font-weight: 800;
     font-display: swap;
     src: url('assets/fonts/inter-800-italic-latin-ext.woff2') format('woff2');
     unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
 @font-face {
     font-family: 'Inter';
     font-style: italic;
     font-weight: 800;
     font-display: swap;
     src: url('assets/fonts/inter-800-italic-latin.woff2') format('woff2');
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
 @font-face {
     font-family: 'Inter';
     font-style: italic;
     font-weight: 900;
     font-display: swap;
     src: url('assets/fonts/inter-900-italic-latin-ext.woff2') format('woff2');
     unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
 @font-face {
     font-family: 'Inter';
     font-style: italic;
     font-weight: 900;
     font-display: swap;
     src: url('assets/fonts/inter-900-italic-latin.woff2') format('woff2');
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
 @font-face {
     font-family: 'Inter';
     font-style: normal;
     font-weight: 100;
     font-display: swap;
     src: url('assets/fonts/inter-100-normal-latin-ext.woff2') format('woff2');
     unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
 @font-face {
     font-family: 'Inter';
     font-style: normal;
     font-weight: 100;
     font-display: swap;
     src: url('assets/fonts/inter-100-normal-latin.woff2') format('woff2');
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
 @font-face {
     font-family: 'Inter';
     font-style: normal;
     font-weight: 200;
     font-display: swap;
     src: url('assets/fonts/inter-200-normal-latin-ext.woff2') format('woff2');
     unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
 @font-face {
     font-family: 'Inter';
     font-style: normal;
     font-weight: 200;
     font-display: swap;
     src: url('assets/fonts/inter-200-normal-latin.woff2') format('woff2');
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
 @font-face {
     font-family: 'Inter';
     font-style: normal;
     font-weight: 300;
     font-display: swap;
     src: url('assets/fonts/inter-300-normal-latin-ext.woff2') format('woff2');
     unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
 @font-face {
     font-family: 'Inter';
     font-style: normal;
     font-weight: 300;
     font-display: swap;
     src: url('assets/fonts/inter-300-normal-latin.woff2') format('woff2');
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
 @font-face {
     font-family: 'Inter';
     font-style: normal;
     font-weight: 400;
     font-display: swap;
     src: url('assets/fonts/inter-400-normal-latin-ext.woff2') format('woff2');
     unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
 @font-face {
     font-family: 'Inter';
     font-style: normal;
     font-weight: 400;
     font-display: swap;
     src: url('assets/fonts/inter-400-normal-latin.woff2') format('woff2');
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
 @font-face {
     font-family: 'Inter';
     font-style: normal;
     font-weight: 500;
     font-display: swap;
     src: url('assets/fonts/inter-500-normal-latin-ext.woff2') format('woff2');
     unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
 @font-face {
     font-family: 'Inter';
     font-style: normal;
     font-weight: 500;
     font-display: swap;
     src: url('assets/fonts/inter-500-normal-latin.woff2') format('woff2');
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
 @font-face {
     font-family: 'Inter';
     font-style: normal;
     font-weight: 600;
     font-display: swap;
     src: url('assets/fonts/inter-600-normal-latin-ext.woff2') format('woff2');
     unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
 @font-face {
     font-family: 'Inter';
     font-style: normal;
     font-weight: 600;
     font-display: swap;
     src: url('assets/fonts/inter-600-normal-latin.woff2') format('woff2');
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
 @font-face {
     font-family: 'Inter';
     font-style: normal;
     font-weight: 700;
     font-display: swap;
     src: url('assets/fonts/inter-700-normal-latin-ext.woff2') format('woff2');
     unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
 @font-face {
     font-family: 'Inter';
     font-style: normal;
     font-weight: 700;
     font-display: swap;
     src: url('assets/fonts/inter-700-normal-latin.woff2') format('woff2');
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
 @font-face {
     font-family: 'Inter';
     font-style: normal;
     font-weight: 800;
     font-display: swap;
     src: url('assets/fonts/inter-800-normal-latin-ext.woff2') format('woff2');
     unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
 @font-face {
     font-family: 'Inter';
     font-style: normal;
     font-weight: 800;
     font-display: swap;
     src: url('assets/fonts/inter-800-normal-latin.woff2') format('woff2');
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
 @font-face {
     font-family: 'Inter';
     font-style: normal;
     font-weight: 900;
     font-display: swap;
     src: url('assets/fonts/inter-900-normal-latin-ext.woff2') format('woff2');
     unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
 @font-face {
     font-family: 'Inter';
     font-style: normal;
     font-weight: 900;
     font-display: swap;
     src: url('assets/fonts/inter-900-normal-latin.woff2') format('woff2');
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Add your custom styles here */
 :root {
     --od-ink: #000E20;
     --od-ink-2: #091A2F;
     --od-ink-3: #13335F;
     --od-navy-text: #0B1F3A;
     --od-blue: #2F80ED;
     --od-blue-strong: #0058CF;
     --od-blue-hover: #0049B0;
     --od-blue-soft: #EAF2FD;
     --od-blue-soft-2: #D5E6FB;
     --od-paper: #F6F9FC;
     --od-white: #FFFFFF;
     --od-line: #D5E6FB;
     --od-line-dark: #293A52;
     --od-grey: #5B6B7E;
     --od-grey-2: #7A8AA0;
     --od-green: #27AE60;
     --od-green-soft: #E7F6EE;
     --od-red: #E02F2E;
     --od-red-soft: #FCEDEC;
     --od-amber: #FFD83A;
     --od-display: "Gilroy font", Sans-serif;
     --od-body: "Inter", Sans-serif;
     --od-content: 1800px;
     --od-narrow: 1495px;
     --od-gutter: 30px;
     --od-cols: 12;
     --od-pad: clamp(16px, 3.125vw, 60px);
     --od-radius: 18px;
     --od-radius-lg: 26px;
     --od-radius-sm: 12px;
}
 body {
     font-family: "Inter", Sans-serif;
}
/* ================================================================= SECTION: ROI Calculator ================================================================= */
 .od-calc {
     background: var(--od-paper) 
}
 .od-calc__grid {
     display: grid;
     grid-template-columns: 40% 58%;
     gap: 22px 
}
 .od-panel {
     background: var(--od-ink);
     border-radius: var(--od-radius-lg);
     padding: clamp(24px, 3vw, 38px);
     color: #fff 
}
 .od-panel h3 {
     color: #fff;
     font-size: clamp(22px, 2.4vw, 28px);
     font-weight: 800;
     margin: 18px 0 14px 
}
 .od-panel__intro {
     color: #F6F9FC;
     font-size: 18px;
     font-weight: 500;
     line-height: 24px;
     margin-bottom: 26px 
}
 .od-field {
     margin-bottom: 18px 
}
 .od-field label {
     display: block;
     font-size: 16px;
     font-weight: 500;
     line-height: 24px;
     color: #FFFFFF;
     margin-bottom: 9px 
}
 .od-input {
     display: flex;
     align-items: center;
     background: #0B1D34;
     border: 1px solid #6D7989;
     border-radius: 11px;
     overflow: hidden 
}
 .od-input input {
     flex: 1;
     background: #000E20;
     border: none;
     color: #fff;
     font-family: var(--od-display);
     font-weight: 700;
     font-size: 16px;
     padding: 10px 12px;
     width: 100% 
}
 .od-input input:focus {
     outline: none;
     border-color: #b0c0d5;
}
 .od-input textarea:focus {
     outline: none;
     border-color: #b0c0d5;
}
/* number input normalization (cross-browser) */
 .od-input input {
     -webkit-appearance: none;
     -moz-appearance: textfield;
     appearance: none 
}
 .od-input input::-webkit-outer-spin-button, .od-input input::-webkit-inner-spin-button {
     -webkit-appearance: none;
     margin: 0 
}
 .od-input .unit {
     padding: 0 18px;
     color: #FFFFFF;
     border-left: 1px solid #6D7989;
     align-self: stretch;
     display: flex;
     align-items: center;
     font-weight: 600 
}
 .od-calc__result h3 {
     margin-top: 0 
}
 .od-table-main {
     overflow-x: auto;
     border-radius: 12px;
}
/*.od-table{
    width:100%;
    border-collapse:collapse;
    font-size:14px
}
*/
 .od-table {
     width: 100%;
     font-size: 14px;
    /* IMPORTANT */
     border-collapse: separate;
     border-spacing: 0;
     border: 1px solid #14304F;
     border-radius: 12px;
     overflow: hidden;
}
 .od-table th, .od-table td {
     padding: 15px 16px;
     text-align: left;
     border-bottom: 1px solid #14304F 
}
 .od-table thead th {
     font-family: var(--od-display);
     font-weight: 700;
     color: #fff;
     font-size: 20px;
     line-height: 30px;
}
 .od-table thead th.c-blue {
     color: #5BA0F5;
     text-align: center 
}
 .od-table thead th.c-green {
     color: #3FCB82;
     text-align: center 
}
 .od-table td {
     color: #F6F9FC 
}
 .od-table td.lbl {
     display: flex;
     align-items: center;
     gap: 11px;
     color: #E4EDF7;
     font-weight: 500 
}
 .od-table td.lbl .ti {
     width: 22px;
     height: 22px;
     flex: none;
     color: #FFFFFF 
}
 .od-table td.num {
     text-align: center;
     font-weight: 600 
}
 .od-table td.blue {
     text-align: center;
     color: #5BA0F5;
     font-weight: 600 
}
 .od-table td.green {
     text-align: center;
     color: #3FCB82;
     font-weight: 600 
}
/* remove last row border */
 .od-table tbody tr:last-child td {
     border-bottom: none;
}
/* corner radius */
 .od-table thead tr:first-child th:first-child {
     border-top-left-radius: 12px;
}
 .od-table thead tr:first-child th:last-child {
     border-top-right-radius: 12px;
}
 .od-table tbody tr:last-child td:first-child {
     border-bottom-left-radius: 12px;
}
 .od-table tbody tr:last-child td:last-child {
     border-bottom-right-radius: 12px;
}
 .od-result-box {
     margin-top: 22px;
     border: 1px solid #1E4C86;
     border-radius: 16px;
     padding: 26px 28px;
     flex-wrap: nowrap;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 20px;
     background: linear-gradient(120deg, rgba(29, 111, 224, .07), transparent) 
}
 .od-result-box .eyebrow {
     color: #FFFFFF;
     font-weight: 600;
     font-size: 15px;
     margin-bottom: 4px 
}
 .od-result-box .big {
     font-family: var(--od-display);
     font-weight: 800;
     font-size: clamp(34px, 4vw, 48px);
     color: var(--od-blue);
     line-height: 1;
     margin-bottom: 14px 
}
 .od-result-box .sub {
     font-family: var(--od-display);
     font-weight: 700;
     color: #fff;
     font-size: 17px 
}
 .od-result-box .sub2 {
     color: #FFFFFF;
     font-size: 15px 
}
 .od-result-box svg {
     flex: none 
}
 .od-result-box .result-left {
     width: 48%;
}
 .od-result-box .result-right {
     width: 48%;
     text-align: center;
}
/* Banner strip (calculator CTA) */
 .od-banner {
     background: var(--od-ink);
     border-radius: var(--od-radius-lg);
     padding: clamp(24px, 3vw, 34px) clamp(26px, 3.5vw, 44px);
     display: flex;
     align-items: center;
     gap: 24px;
     color: #fff;
     position: relative;
     overflow: hidden 
}
 .od-banner::after {
     content: "";
     position: absolute;
     right: -120px;
     top: -120px;
     width: 380px;
     height: 380px;
     background: radial-gradient(circle, rgba(29, 111, 224, .25), transparent 60%) 
}
 .od-banner__ico {
     width: 78px;
     height: 78px;
     border-radius: 18px;
     background: linear-gradient(145deg, #2E7BE6, #1450A8);
     display: grid;
     place-items: center;
     flex: none 
}
 .od-banner__txt {
     flex: 1;
     position: relative;
     z-index: 1 
}
 .od-banner__txt h3 {
     color: #fff;
     font-size: clamp(20px, 2.3vw, 27px);
     font-weight: 800;
     margin-bottom: 6px 
}
 .od-banner__txt p {
     color: #FFFFFF;
     font-size: 15px 
}
 .od-banner .od-btn {
     flex: none;
     position: relative;
     z-index: 1 
}
 .od-input input[type="number"]::-webkit-outer-spin-button, .od-input input[type="number"]::-webkit-inner-spin-button {
     -webkit-appearance: none;
     margin: 0;
}
 .od-input input[type="number"] {
     -moz-appearance: textfield;
}
 .od-pill--green {
     border: 1px solid #27AE60;
     color: #27AE60;
     background: #042B14;
}
 .od-pill {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     font-family: var(--od-body);
     font-weight: 600;
     font-size: 13px;
     letter-spacing: .02em;
     padding: 2px 16px;
     border-radius: 999px;
}
 .od-pill--blue {
     border: 1px solid #2F80ED;
     color: #2F80ED;
     background: #091A2F;
}
/* ================================================================= SECTION: Results / testimonials (split) ================================================================= */
 .od-results {
     background: var(--od-paper);
     padding: 0 
}
 .od-results__grid {
     display: grid;
     grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr) 
}
 .od-results__left {
     background: var(--od-ink);
     color: #fff;
     padding: clamp(40px, 5vw, 72px) clamp(28px, 4vw, 56px) 
}
 .od-results__left h2 {
     color: #fff;
     font-size: clamp(26px, 3vw, 36px);
     font-weight: 800;
     margin: 22px 0 26px;
     text-align: left 
}
 .od-results__left .od-list li {
     color: #D5E0EE;
     font-weight: 500 
}
 .od-result-tag {
     margin-top: 28px;
     border: 1px solid #1E4C86;
     border-radius: 12px;
     padding: 16px 20px;
     font-family: var(--od-display);
     font-weight: 700;
     font-size: 18px;
     color: #fff;
     background: rgba(29, 111, 224, .07) 
}
 .od-result-tag--link {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 16px;
     flex-wrap: wrap;
     transition: border-color .25s, background .25s 
}
 .od-result-tag--link:hover {
     border-color: #3F8AE8;
     background: rgba(29, 111, 224, .14) 
}
 .od-result-tag__cta {
     display: inline-flex;
     align-items: center;
     gap: 7px;
     font-size: 14px;
     font-weight: 600;
     color: #5BA0F5;
     white-space: nowrap 
}
 .od-result-tag__cta svg {
     transition: transform .25s 
}
 .od-result-tag--link:hover .od-result-tag__cta svg {
     transform: translateX(4px) 
}
 .od-results__minicase {
     margin-top: 20px;
     color: #A9BDD5;
     font-size: 15px;
     line-height: 1.6 
}
 .od-results__minicase a {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     color: #5BA0F5;
     font-weight: 600;
     margin-top: 4px;
     transition: gap .25s 
}
 .od-results__minicase a:hover {
     gap: 11px;
     color: #7FB6F7 
}
 .od-results__right {
     background: #EAF1FB;
     padding: clamp(40px, 5vw, 72px) clamp(28px, 4vw, 56px);
     overflow: hidden 
}
/* slider header: pill + nav arrows */
 .od-tslider__head {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 16px;
     margin-bottom: 26px 
}
 .od-tslider__nav {
     display: none;
     gap: 10px 
}
 .od-tslider__btn {
     width: 44px;
     height: 44px;
     border-radius: 50%;
     background: #fff;
     border: 1px solid var(--od-line);
     display: grid;
     place-items: center;
     color: var(--od-blue-strong);
     transition: background .2s, color .2s, border-color .2s, transform .2s 
}
 .od-tslider__btn:hover {
     background: var(--od-blue-strong);
     color: #fff;
     border-color: var(--od-blue-strong) 
}
 .od-tslider__btn:active {
     transform: scale(.94) 
}
 .od-tslider__btn.swiper-button-disabled {
     opacity: .45;
     cursor: default 
}
 .od-tslider__btn.swiper-button-disabled:hover {
     background: #fff;
     color: var(--od-blue-strong);
     border-color: var(--od-line) 
}
/* swiper viewport + slides */
 .od-tswiper {
     width: 100%;
     padding-bottom: 4px 
}
 .od-tswiper .swiper-wrapper {
     align-items: stretch 
}
 .od-tcard {
     background: #fff;
     border: 1px solid var(--od-line);
     border-radius: 16px;
     padding: 24px;
     height: auto;
     display: flex;
     flex-direction: column;
     box-sizing: border-box 
}
/* The card heading moved from h4 to h3 so it does not skip a level after the section h2;
 both are matched so the size is identical either way. */
 .od-tcard h3, .od-tcard h4 {
     color: #0B1F3A;
     font-size: 20px;
     font-weight: 700;
     margin-bottom: 8px 
}
 .od-tcard .rate {
     display: flex;
     align-items: center;
     gap: 8px;
     margin-bottom: 16px;
     font-weight: 700;
     font-size: 13px;
     color: var(--od-navy-text) 
}
 .od-tcard .rate .s {
     color: var(--od-amber) 
}
 .od-tcard p {
     color: #364455;
     font-size: 18px;
     margin-bottom: 18px;
     flex: 1 
}
 .od-tcard__who {
     display: flex;
     align-items: center;
     gap: 12px;
     margin-top: auto 
}
 .od-tcard__who img {
     width: 44px;
     height: 44px;
     border-radius: 12px;
     object-fit: cover;
     flex: none 
}
 .od-tcard__who .nm {
     font-family: var(--od-display);
     color: #0B1F3A;
     font-weight: 700;
     font-size: 20px 
}
 .od-tcard__who .rl {
     font-size: 18px;
     color: #364455 
}
/* pagination bullets (Swiper) */
 .od-tswiper-pagination {
     display: flex;
     gap: 8px;
     justify-content: center;
     align-items: center;
     margin-top: 26px 
}
 .od-tswiper-pagination .swiper-pagination-bullet {
     width: 30px;
     height: 5px;
     border-radius: 3px;
     background: #C5D5EA;
     opacity: 1;
     margin: 0;
     transition: width .3s, background .3s;
     cursor: pointer 
}
 .od-tswiper-pagination .swiper-pagination-bullet-active {
     background: var(--od-blue);
     width: 42px 
}
/* 27-July-2026 ----- */
 .elementor-11 .elementor-element.elementor-element-ad64488.section-icon-align-center .elementor-icon-box-wrapper .elementor-icon-box-icon {
     align-self: center;
}
 .accordion-faq-custom .e-con-boxed {
     border: 0px 0px 1px 0px;
}
/* Repeating the class raises specificity without changing what the selector matches, so this wins the cascade on its own merits. */
 .accordion-faq-custom.accordion-faq-custom.accordion-faq-custom .e-con-boxed {
     border-bottom-width: 1px;
}
 .accordion-faq-custom .e-n-accordion-item:last-child .e-con-full .e-con-boxed {
     border-top-width: 1px;
     border-bottom-width: 0px !important;
     border: 1px 0px 0px 0px;
}
 .accordion-faq-custom .e-n-accordion-item:last-child .e-n-accordion-item-title {
     border: 0px 0px 1px 0px;
}
/* Repeating the class raises specificity without changing what the selector matches, so this wins the cascade on its own merits. */
 .accordion-faq-custom.accordion-faq-custom.accordion-faq-custom .e-n-accordion-item:last-child .e-n-accordion-item-title {
     border-bottom-width: 0px;
}
/* 27-July-2026 ----- */
 @media (max-width:767px) {
     .od-calc__grid {
         display: flex;
         flex-direction: column;
    }
     .od-ctable {
         display: block;
    }
     .od-result-box .result-left {
         width: 100%;
    }
     .od-result-box .result-right {
         width: 100%;
         text-align: center;
    }
    /* 27-July-2026 ----- */
     .accordion-faq-custom .e-n-accordion-item:last-child .e-n-accordion-item-title {
         border-bottom-width: 1px !important;
         border: 0px 0px 1px 0px;
    }
     .accordion-faq-custom:nth-child(2) .e-n-accordion-item:last-child .e-n-accordion-item-title {
         border-bottom-width: 0px !important;
         border: 0px 0px 1px 0px;
    }
     .accordion-faq-custom .e-n-accordion-item:last-child .e-con-full .e-con-boxed {
         border-top-width: 0px !important;
         border-bottom-width: 1px !important;
         border: 0px 0px 1px 0px;
    }
     .accordion-faq-custom:nth-child(2) .e-n-accordion-item:last-child .e-con-full .e-con-boxed {
         border-top-width: 1px !important;
         border-bottom-width: 0px !important;
         border: 1px 0px 0px 0px;
    }
    /* 27-July-2026 ----- */
}
 @media (max-width:567px) {
    /* 27-July-2026 ----- */
     .od-result-box {
         flex-wrap: wrap;
    }
     .od-tcard p {
         font-size: 15px;
    }
     .od-ctable th, .od-ctable td {
         font-size: 15px;
    }
     .od-table thead th {
         font-size: 15px;
         line-height: 18px;
    }
     .od-tcard__who .nm {
         font-size: 15px;
    }
     .od-tcard__who .rl {
         font-size: 14px;
    }
    /* 27-July-2026 ----- */
}
 @media (max-width:520px) {
    /* 27-July-2026 ----- */
     .footer-custom-width .elementor-element {
         width: 100%;
    }
    /* 27-July-2026 ----- */
}
/* ========================================================================= * Comparison table (.od-ctable) - hide the ja/nein labels visually * * The .x and .c spans ARE the icon: a 22px circle with the cross or tick drawn * in ::before/::after. The words "ja" and "nein" inside them were rendering on * top of that circle. * * The words are kept in the markup on purpose. The circle alone carries no * meaning for a screen reader - it is drawn with pseudo-elements, which have no * text and no alt - so removing the words would make the table unreadable to * anyone not looking at it, and would strip the comparison of any meaning for * search engines. So they are hidden from sight, not deleted. * * Two layers: * .od-sr the correct way - wrap the word, clip it to a 1px box. * overflow/text-indent on .x/.c a fallback, so the labels are also hidden * if the old markup (word directly inside the span) is still live. * ====================================================================== */
 .od-ctable .x, .od-ctable .c {
     overflow: hidden;
     text-indent: -9999px;
}
 .od-ctable .x .od-sr, .od-ctable .c .od-sr, .od-sr {
     position: absolute;
     width: 1px;
     height: 1px;
     padding: 0;
     margin: -1px;
     overflow: hidden;
     clip: rect(0 0 0 0);
     clip-path: inset(50%);
     white-space: nowrap;
     border: 0;
     text-indent: 0;
}
 .custom-heading-one span{
     color:#2F80ED;
}
 .section-icon-align-center .elementor-icon-box-wrapper{
     text-align: center;
     gap: 15px;
     align-content: center;
     align-items: center;
     display: flex;
     vertical-align: center;
     justify-content: center;
     width: 100%;
     position: relative;
}
 .section-icon-align-center .elementor-icon-box-content{
     flex-grow: 0;
     width: 60%;
     display: block;
     align-content: start;
     align-items: start;
     align-self: center;
     text-align: left;
}
 .section-icon-align-center .elementor-icon-box-icon{
     position: relative;
     align-self: end;
     text-align: right;
     flex: 0 0 20%;
     line-height: 0;
     display: block;
     width: 40%;
     align-content: end;
}
/* Home-Page-Logo-Carousel */
 .head-carousel figure{
}
/* Repeating the class raises specificity without changing what the selector matches, so this wins the cascade on its own merits. */
 .head-carousel.head-carousel.head-carousel figure {
     height: 106px;
}
 .swiper-slide-inner img {
     object-fit: contain;
     max-width:100%;
     width: 100%;
     opacity: 0.7;
     transition: opacity 0.3s ease;
}
 .swiper-slide-inner img:hover {
     opacity: 1;
}
 @media(max-width:1566px){
     .head-carousel figure{
         height: 98px;
    }
}
 @media(max-width:1199px){
     .head-carousel figure{
         height: 100px;
    }
}
 @media(max-width:1024px){
     .head-carousel figure{
         height: 86px;
    }
}
 @media(max-width:880px){
     .head-carousel figure{
         height: 74px;
    }
}
 @media(max-width:767px){
     .head-carousel figure{
         height: 132px;
    }
}
 @media(max-width:567px){
     .head-carousel figure{
         height: 100px;
    }
}
 @media(max-width:467px){
     .head-carousel figure{
         height: 80px;
    }
}
 @media(max-width:400px){
     .head-carousel figure{
         height: 64px;
    }
}
 .editor-step strong{
     background: #EAF2FD;
     height: 60px;
     width: 60px;
     border-radius: 50%;
     display: grid;
     place-items: center;
     font-size: 24px;
     font-weight: 700;
     flex: none;
}
 .editor-step .editor-step,.editor-step p{
     display: flex;
     gap:13px;
     align-items: center;
}
 @media(max-width:767px){
     .editor-step strong{
         font-size: 20px;
         height: 40px;
         width: 40px;
    }
     .editor-step br{
         display: none;
    }
}
/* Mobile menu animation */
 .elementor-nav-menu--dropdown {
     transform: translateY(-15px);
     transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease;
}
 .e--pointer-underline .elementor-item:before, .e--pointer-underline .elementor-item:after, .e--pointer-overline .elementor-item:before, .e--pointer-overline .elementor-item:after, .e--pointer-double-line .elementor-item:before, .e--pointer-double-line .elementor-item:after {
     transform: scaleX(0);
     transform-origin: left center;
     transition: transform 0.4s ease;
}
 .e--pointer-underline .elementor-item:hover:before, .e--pointer-underline .elementor-item:hover:after, .e--pointer-overline .elementor-item:hover:before, .e--pointer-overline .elementor-item:hover:after, .e--pointer-double-line .elementor-item:hover:before, .e--pointer-double-line .elementor-item:hover:after, .elementor-item-active:before, .elementor-item-active:after {
     transform: scaleX(1);
     transform-origin: left center;
}
 .last-item-btn .elementor-item:hover::before, .last-item-btn .elementor-item:hover::after, .last-item-btn .elementor-item.elementor-item-active::before, .last-item-btn .elementor-item.elementor-item-active::after {
     transform: scaleX(0) !important;
}
 .last-item-btn {
     position: relative;
     border-radius: 12px;
     background: var(--od-blue-strong);
     box-shadow: 0 8px 22px -10px rgba(21, 92, 194, .8);
     display: flex;
     align-items: center;
}
/* Repeating the class raises specificity without changing what the selector matches, so this wins the cascade on its own merits. */
 .last-item-btn.last-item-btn.last-item-btn {
     margin-left: 25px;
}
 .last-item-btn a {
     font-family: Inter;
     
     font-size: 18px !important;
     line-height: 24px;
     
     
     
     display: inline-flex;
     align-items: center;
     
     
}
/* Repeating the class raises specificity without changing what the
   selector matches, so this wins the cascade on its own merits. */
.last-item-btn.last-item-btn.last-item-btn.last-item-btn.last-item-btn a {
  font-weight: 700;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 18px;
  padding-right: 40px;
  margin-left: 0;
}

 .last-item-btn:hover{
     transform: translateY(-2px);
}
 .last-item-btn a:hover{
    color:#fff;
}
/* Arrow */
 .last-item-btn::after {
     content: "";
     position: absolute;
     right: 18px;
     top: 50%;
     transform: translateY(-50%);
     width: 16px;
     height: 16px;
     background: url("../../uploads/2026/06/right-arrow.svg") no-repeat center;
     background-size: contain;
     transition: transform 0.3s ease;
}
 .elementor-nav-menu--dropdown{
     background-color: var( --e-global-color-8ce8ccc );
}
/* Hover animation */
 .last-item-btn:hover::after {
     transform: translateY(-50%) translateX(4px);
}
 .header-menu .elementor-menu-toggle{
     padding:0;
}
 @media(min-width:1025px){
     selector .elementor-nav-menu{
         flex-wrap: nowrap !important;
    }
}
 @media(max-width:1400px){
     .header-menu a{
         font-size: 14px !important;
         margin:0 12px !important;
    }
}
 @media(max-width:1300px){
     .header-menu a{
         font-size: 14px !important;
         margin:0 10px !important;
    }
     .last-item-btn a {
         font-size: 14px !important;
         padding-right:28px !important;
         padding-top: 10px !important;
         padding-bottom: 10px !important;
         padding-left: 10px !important;
    }
     .last-item-btn {
         
    }
/* Repeating the class raises specificity without changing what the
   selector matches, so this wins the cascade on its own merits. */
.last-item-btn.last-item-btn.last-item-btn.last-item-btn.last-item-btn {
  margin-left: 5px;
}

     .last-item-btn::after {
         width: 12px;
         height: 12px;
    }
}
 @media(max-width:1024px){
     .header-menu .elementor-item:focus{
         background: unset;
    }
     .has-submenu{
         display: flex;
         justify-content: space-between;
    }
     .header-menu a{
         margin: 0 !important;
         padding: 12px !important;
    }
     .header-menu .elementor-nav-menu--dropdown {
         
    }
/* Repeating the class raises specificity without changing what the
   selector matches, so this wins the cascade on its own merits. */
.header-menu.header-menu.header-menu.header-menu.header-menu .elementor-nav-menu--dropdown {
  background: #02010100;
}

     .header-menu .elementor-nav-menu a{
         margin:0 !important;
         padding:14px 14px !important;
    }
     .header-menu ul{
         background-color: var( --e-global-color-8ce8ccc );
         border-style: none;
         border-radius: 12px 12px 12px 12px;
         padding: 0 18px;
    }
     .header-menu nav{
         padding: 0 20px !important;
    }
     .last-item-btn{
         margin: 12px 0;
    }
     .last-item-btn a:hover{
         background: unset;
    }
}
 .od-4cards .num {
     font-family: var(--od-display);
     font-weight: 800;
     font-size: 20px;
     color: var(--od-blue);
     margin-bottom: 14px;
     text-align: center;
}
/* Same reason as .od-tcard: h4 after an h2 skipped a level, so these are h3 now. Both are matched so the pinned size survives the change. */
 .od-4cards h3, .od-4cards h4 {
     font-size: 19px;
     font-weight: 700;
     margin-bottom: 10px;
     text-align: center;
}
 .od-4cards p{
     font-family: Inter;
     font-weight: 400;
     font-style: Regular;
     font-size: 18px;
     line-height: 24px;
     text-align: center;
}
 .od-5cards > .elementor-widget{
     position: relative;
}
 .od-5cards > .elementor-widget:not(:last-child)::after{
     content: "→";
     position: absolute;
     top: 50%;
     right: -50px;
     transform: translateY(-50%);
     color: #2f8cff;
     font-size: 30px;
}
 @media(max-width:1240px){
     .od-5cards{
         grid-template-columns: repeat(3, 1fr);
    }
}
 @media(max-width:1024px){
     .od-5cards > .elementor-widget:not(:last-child)::after{
         right: -38px;
    }
}
 @media (max-width:767px){
     .od-5cards{
         grid-template-columns: repeat(1, 1fr);
    }
     .od-5cards{
         grid-template-columns:1fr;
    }
     .od-5cards > .elementor-widget:not(:last-child)::after{
         left:50%;
         right:auto;
         top:auto;
         bottom:-42px;
         transform:translateX(-50%) rotate(90deg);
    }
}
 .home-table-two table caption + thead tr:first-child td, .home-table-two table caption + thead tr:first-child th, .home-table-two table colgroup + thead tr:first-child td, .home-table-two table colgroup + thead tr:first-child th, .home-table-two table thead:first-child tr:first-child td, .home-table-two table thead:first-child tr:first-child th{
     border-block-start: none;
}
 .home-table-two table td, .home-table-two table th{
     border: 0.1px solid #C1D9FA;
}
 .home-table-two .od-ctable {
     width: 100%;
     border-collapse: separate;
     border-spacing: 0;
     border: 0.1px solid #C1D9FA;
     border-radius: 12px;
     overflow-x: auto;
     overflow-y: hidden;
}
 .home-table-two .od-ctable th {
     font-family: "Gilroy font", Sans-serif;
     color: #0B1F3A;
     font-size: 20px;
     font-weight: 700;
     text-align: center;
}
 .home-table-two .od-ctable th, .home-table-two .od-ctable td {
     padding: 13px 16px;
     text-align: center;
     border-bottom: 1px solid #C1D9FA;
     font-size: 18px;
}
 .home-table-two .od-ctable td:first-child {
     color:#364455;
     text-align: left;
}
 .home-table-two .od-ctable td{
     font-family: "Inter", Sans-serif;
     font-weight: 500;
     background: #FFFFFF;
}
/* Repeating the class raises specificity without changing what the selector matches, so this wins the cascade on its own merits. */
 .home-table-two.home-table-two.home-table-two .od-ctable td {
     color: #0B1F3A;
}
 .home-table-two .od-ctable .x {
     border: 1.6px solid #E02F2E;
}
 .home-table-two .od-ctable .x, .home-table-two .od-ctable .c {
     display: inline-block;
     width: 22px;
     height: 22px;
     border-radius: 50%;
     position: relative;
}
 .home-table-two .od-ctable .x::before {
     transform: translate(-50%, -50%) rotate(45deg);
}
 .home-table-two .od-ctable .x::before, .home-table-two .od-ctable .x::after {
     content: "";
     position: absolute;
     top: 50%;
     left: 50%;
     width: 9px;
     height: 1.6px;
     background: #E0463C;
}
 .home-table-two .od-ctable .x::after {
     transform: translate(-50%, -50%) rotate(-45deg);
}
 .home-table-two .od-ctable .c {
     border: 1.6px solid #27AE60;
}
 .home-table-two .od-ctable .c::before {
     content: "";
     position: absolute;
     top: 46%;
     left: 50%;
     width: 5px;
     height: 9px;
     border: 1.6px solid #27AE60;
     border-top: none;
     border-left: none;
     transform: translate(-50%, -55%) rotate(45deg);
}
 @media (max-width:767px){
     .home-table-two .od-ctable{
         display: block;
    }
}
 .home-table-two .od-ctable {
     width: 100%;
     border-collapse: separate;
     border-spacing: 0;
     border-radius: 12px;
     overflow: auto;
}
/* Top-left */
 .home-table-two .od-ctable thead tr:first-child th:first-child {
     border-top-left-radius: 12px;
}
/* Top-right */
 .home-table-two .od-ctable thead tr:first-child th:last-child {
     border-top-right-radius: 12px;
}
/* Bottom-left */
 .home-table-two .od-ctable tbody tr:last-child td:first-child {
     border-bottom-left-radius: 12px;
}
/* Bottom-right */
 .home-table-two .od-ctable tbody tr:last-child td:last-child {
     border-bottom-right-radius: 12px;
}
/* Home-Page-BEISPIEL-RECHNUNG */
 .main-section-one table {
     border-block-start: 1px solid #fff;
}
 .main-section-one .od-table {
     width: 100%;
     border-collapse: separate;
     border-spacing: 0;
     border-radius: 12px;
     overflow: hidden;
}
/* Top-left */
 .main-section-one .od-table thead tr:first-child th {
     border-block-start: 1px solid #fff;
}
 .main-section-one .od-table thead tr:first-child th:first-child {
     border-top-left-radius: 12px;
}
/* Top-right */
 .main-section-one .od-table thead tr:first-child th:last-child {
     border-top-right-radius: 12px;
}
/* Bottom-left */
 .main-section-one .od-table tbody tr:last-child td:first-child {
     border-bottom-left-radius: 12px;
}
/* Bottom-right */
 .main-section-one .od-table tbody tr:last-child td:last-child {
     border-bottom-right-radius: 12px;
}
 @media(max-width:1024px){
     .main-section-one .od-calc__grid {
         grid-template-columns: 100%;
    }
}
/* Home-Page-Neue Anfrage-Section */
 .home-icon-one li{
     padding:10px 0px !important;
}
 @media(min-width:1300px){
     .home-icon-one .elementor-inline-items {
         justify-content: space-evenly;
    }
}
 @media(max-width:1024px){
     .home-icon-one li{
         padding:10px 10px 10px 0px !important;
    }
}
 .home-icon-one .elementor-icon-list-item{
     display: block;
}
/* Even items SVG size smaller */
 .home-icon-one .elementor-icon-list-items .elementor-icon-list-item:nth-child(even) svg {
     width: 30px;
     height: 90px;
}
 .home-icon-one .elementor-icon-list-icon{
}
/* Repeating the class raises specificity without changing what the selector matches, so this wins the cascade on its own merits. */
 .home-icon-one.home-icon-one.home-icon-one .elementor-icon-list-icon {
     justify-content: center;
}
 .home-icon-one .elementor-icon-list-text{
     display: block;
}
/* Repeating the class raises specificity without changing what the selector matches, so this wins the cascade on its own merits. */
 .home-icon-one.home-icon-one.home-icon-one .elementor-icon-list-text {
     padding: 10px 0;
}
 .home-icon-one-mobile .elementor-icon-list-item{
     display: block;
}
/* Even items SVG size smaller */
 .home-icon-one-mobile .elementor-icon-list-items .elementor-icon-list-item:nth-child(even) svg {
     width: 30px;
     height: 90px;
}
 .home-icon-one-mobile .elementor-icon-list-icon{
}
/* Repeating the class raises specificity without changing what the selector matches, so this wins the cascade on its own merits. */
 .home-icon-one-mobile.home-icon-one-mobile.home-icon-one-mobile .elementor-icon-list-icon {
     justify-content: center;
}
 .home-icon-one-mobile .elementor-icon-list-text{
     display: block;
}
/* Repeating the class raises specificity without changing what the selector matches, so this wins the cascade on its own merits. */
 .home-icon-one-mobile.home-icon-one-mobile.home-icon-one-mobile .elementor-icon-list-text {
     padding: 10px 0;
}
 @media(max-width:767px){
     .home-icon-one-mobile .elementor-icon-list-items .elementor-icon-list-item:nth-child(even) svg {
         width: 50px;
         height: 20px;
    }
     .home-icon-one-mobile .elementor-icon-list-item{
    }
    /* Repeating the class raises specificity without changing what the selector matches, so this wins the cascade on its own merits. */
     .home-icon-one-mobile.home-icon-one-mobile.home-icon-one-mobile .elementor-icon-list-item {
         width: 100%;
    }
}
 @media(min-width:1440px){
     .home-icon-two {
         grid-template-columns: repeat(5, 1fr);
         grid-template-rows: repeat(1, 1fr);
    }
}
 @media(max-width:767px){
     .home-icon-two li {
         display: block !important;
    }
    /* Repeating the class raises specificity without changing what the selector matches, so this wins the cascade on its own merits. */
     .home-icon-two.home-icon-two.home-icon-two li {
         text-align: center;
    }
     .home-icon-two .elementor-icon-list-icon {
    }
    /* Repeating the class raises specificity without changing what the selector matches, so this wins the cascade on its own merits. */
     .home-icon-two.home-icon-two.home-icon-two .elementor-icon-list-icon {
         justify-content: center;
    }
     .home-icon-two .elementor-icon-list-text {
         display: block;
         text-align: center;
    }
    /* Repeating the class raises specificity without changing what the selector matches, so this wins the cascade on its own merits. */
     .home-icon-two.home-icon-two.home-icon-two .elementor-icon-list-text {
         padding: 10px 0 0px 0;
    }
}
 @media (max-width:567px) {
     .home-table-two .od-ctable th, .home-table-two .od-ctable td {
         font-size: 15px;
    }
     .home-table-two .od-table thead th {
         font-size: 15px;
         line-height: 18px;
    }
}
 .home-icon-three li{
     padding:15px !important;
}
 @media(max-width:1024px){
     .home-icon-three li{
         padding:15px !important;
    }
     @media(max-width:767px){
         .home-icon-three .elementor-icon-list-item:not(:last-child)::after{
             display: none;
        }
        /* Repeating the class raises specificity without changing what the selector matches, so this wins the cascade on its own merits. */
         .home-icon-three.home-icon-three.home-icon-three .elementor-icon-list-item:not(:last-child)::after {
             border-inline-start-width: 0;
        }
         .home-icon-three li{
             padding:15px !important;
             border-bottom: 1px solid #C1D9FA;
             width: 100%;
             justify-content: center !important;
             align-content: center;
             align-items: center;
             align-self: center;
        }
         .home-icon-three li:last-child{
             border:none;
        }
    }
    /* ^ The @media (max-width: 1024px) block above was never closed. * * While it was the last thing in the file a browser simply auto-closed it at * EOF, so nothing ever looked wrong and it reached production unnoticed. It * matters the moment anything is added below it: that content would be * swallowed into the media query and only apply under 1024px. Closing it * explicitly changes nothing about how the file renders today. */
}
/* ========================================================================= * ROI CALCULATOR * * These four declarations were style="" attributes in the widget markup. * Each selector is specific enough to win outright against the highest * competitor that exists in any of the 28 stylesheets the page loads, so * none of them relies on source order: * * padding-top highest competitor 0 - this rule 20 * margin-bottom highest competitor 10 - this rule 40 * margin-top highest competitor 0 - this rule 20 * text-align highest competitor 22 - this rule 31 * ====================================================================== */
 .od-section.od-calc {
     padding-top: 0;
}
 .od-calc .od-panel > .od-field:last-child {
     margin-bottom: 0;
}
 .od-calc .od-table {
     margin-top: 18px;
}
 .od-table thead th.is-center {
     text-align: center;
}
/* ========================================================================= * ANALYSE FORM (/analyse/) * * These 31 rules style the qualification form: the card, the two-column * grid, the labelled inputs and the pill/block answer options. * * They used to live in the Elementor "Custom CSS" field of an HTML widget * whose visible content was nothing but commented-out JavaScript. Deleting * that widget as dead code took the whole form styling with it, because * custom_css is a separate setting from the html a widget renders. * * Keeping them here means the styling no longer depends on a widget * continuing to exist, and it is visible to anyone reading the stylesheet. * ====================================================================== */
 .od-analyseform{
     padding:30px;
     background:#fff;
     border:1px solid #D8E5F7;
     border-radius:22px;
     font-family: "Gilroy font", Sans-serif;
}
 .od-h2{
     font-size:38px;
     font-weight:800;
     color:#162B4D;
     margin-bottom:28px;
     line-height:1.2;
}
 .od-form__grid{
     display:grid;
     grid-template-columns:360px 1fr;
     gap:22px;
}
 .od-formcard{
     background:#fff;
     border:1px solid #D8E5F7;
     border-radius:18px;
     padding:24px;
}
 .od-formcard__title{
     font-size:28px;
     font-weight:700;
     color:#162B4D;
     margin-bottom:28px;
}
 .od-field2{
     margin-bottom:22px;
}
 .od-field2:last-child{
     margin-bottom:0;
}
 .od-field2 label{
     display:block;
     font-size:15px;
     font-weight:500;
     color:#56657B;
     margin-bottom:8px;
}
 .od-input2{
     position:relative;
}
 .od-input2 input{
     width:100%;
     height:54px;
     border:1px solid #D9E6F8;
     border-radius:10px;
     background:#fff;
     padding:0 50px 0 16px;
     font-size:15px;
     font-weight:600;
     color:#213756;
     transition:.25s;
}
 .od-input2 input::placeholder{
     color:#65778D;
}
 .od-input2 input:focus{
     outline:none;
     border-color:#2F80FF;
     box-shadow:0 0 0 3px rgba(47,128,255,.12);
}
 .od-icon{
     position:absolute;
     right:16px;
     top:50%;
     transform:translateY(-50%);
     width:18px;
     height:18px;
     color:#2F80FF;
     pointer-events:none;
}
/* =========================================================== QUESTIONS =========================================================== */
 .od-qgrid{
     display:grid;
     grid-template-columns:1fr 1fr;
     gap:24px;
}
 .od-q{
     margin:0;
     padding:0;
     border:0;
}
 .od-q legend{
     font-size:15px;
     font-weight:600;
     color:#30465F;
     margin-bottom:14px;
     padding:0;
}
 .od-opts{
     display:flex;
     flex-direction:column;
     gap:10px;
}
 .od-opts--pills{
     flex-direction:row;
}
 .od-opt{
     flex:1;
     position:relative;
}
 .od-opt input{
     display:none;
}
 .od-opt span{
     display:flex;
     justify-content:center;
     align-items:center;
     height:50px;
     border:1px solid #D8E5F7;
     border-radius:10px;
     background:#fff;
     font-size:15px;
     font-weight:600;
     color:#3C4B62;
     cursor:pointer;
     transition:.25s;
}
 .od-opt--block span{
     justify-content:flex-start;
     padding:0 16px;
}
 .od-opt span:hover{
     border-color:#2F80FF;
}
 .od-opt input:checked + span{
     border:2px solid #2F80FF;
     background:#F8FBFF;
     color:#2F80FF;
}
/* =========================================================== FOOTER =========================================================== */
 .od-form__foot{
     display:flex;
     justify-content:space-between;
     align-items:center;
     margin-top:26px;
     gap:20px;
     flex-wrap:wrap;
}
/* =========================================================== BUTTON =========================================================== */
 .od-btn{
     display:inline-flex;
     align-items:center;
     gap:12px;
     border:none;
     background:#1E6FE8;
     color:#fff;
     height:54px;
     padding:0 24px;
     border-radius:12px;
     font-size:17px;
     font-weight:700;
     cursor:pointer;
     transition:.25s;
}
 .od-btn:hover{
     background:#185FCA;
}
 .od-btn svg{
     width:18px;
     height:18px;
}
/* =========================================================== SECURITY =========================================================== */
 .od-form__secure{
     display:flex;
     align-items:center;
     gap:10px;
     color:#6C7C90;
     font-size:15px;
     font-weight:500;
}
 .od-form__secure svg{
     color:#2F80FF;
     flex:none;
}
/* =========================================================== RESPONSIVE =========================================================== */
 @media(max-width:1024px){
     .od-form__grid{
         grid-template-columns:1fr;
    }
}
 @media(max-width:768px){
     .od-qgrid{
         grid-template-columns:1fr;
    }
     .od-analyseform{
         padding:12px;
    }
     .od-opts--pills{
         flex-wrap:wrap;
    }
     .od-opts--pills .od-opt{
         flex:1 1 calc(33.33% - 8px);
    }
     .od-h2 {
         font-size: 22px;
         font-weight: 800;
         color: #162B4D;
         margin-bottom: 28px;
    }
     .od-formcard__title{
         font-size: 20px;
         font-weight: 800;
         color: #162B4D;
         margin-bottom: 28px;
         line-height: 20px;
    }
     .od-form__foot{
         flex-direction:column;
         align-items:flex-start;
    }
     .od-btn{
         width:100%;
         justify-content:center;
    }
}
/* ========================================================================= * IMAGE SIZING (relocated from core's inline CSS) * * WordPress prints this inline in <head> as "wp-img-auto-sizes-contain". * inc/assets.php unhooks that;
 the rule lives here so lazy-loaded images with * sizes="auto" still reserve space and do not cause layout shift. * ====================================================================== */
 img:is([sizes="auto" i], [sizes^="auto," i]) {
     contain-intrinsic-size: 3000px 1500px;
}
/* ========================================================================= * ELEMENTOR BACKGROUND LAZY-LOAD (relocated from Elementor's inline CSS) * * Elementor prints these inline from modules/lazyload/module.php. * inc/assets.php suppresses that copy. Elementor's footer script still adds * .e-lazyloaded to each container as it scrolls into view, which is what * releases the background image, so behaviour is identical. * * The !important is Elementor's own and is load-bearing: it has to beat the * per-element background-image rule Elementor writes into post-N.css. Kept * verbatim for that reason. * ====================================================================== */
 .e-con.e-parent:nth-of-type(n + 4):not(.e-lazyloaded):not(.e-no-lazyload), .e-con.e-parent:nth-of-type(n + 4):not(.e-lazyloaded):not(.e-no-lazyload) * {
     background-image: none;
}
 @media screen and (max-height: 1024px) {
     .e-con.e-parent:nth-of-type(n + 3):not(.e-lazyloaded):not(.e-no-lazyload), .e-con.e-parent:nth-of-type(n + 3):not(.e-lazyloaded):not(.e-no-lazyload) * {
         background-image: none;
    }
}
 @media screen and (max-height: 640px) {
     .e-con.e-parent:nth-of-type(n + 2):not(.e-lazyloaded):not(.e-no-lazyload), .e-con.e-parent:nth-of-type(n + 2):not(.e-lazyloaded):not(.e-no-lazyload) * {
         background-image: none;
    }
}
/* ========================================================================= * FOOTER CONTACT LIST - icon / text alignment * * The list is top-aligned (Elementor sets --icon-vertical-align: flex-start), * which is right for the address, because that wraps onto a second line and the * icon must stay with the first one. But the icon box is only as tall as the * icon itself (18px) while a line of text is 22px, so the icon sat about two * pixels above the text it belongs to - visible on every page, and worse on * tablet and mobile where more of the items wrap. * * Giving the icon box the height of one text line and centring the glyph inside * it lines the icon up with the first line at every breakpoint, without * changing the top alignment that the wrapped address depends on. * ====================================================================== */
 .elementor-element-08f6ebf .elementor-icon-list-icon {
     height: 22px;
     align-items: center;
     justify-content: flex-start;
}
 .elementor-element-08f6ebf .elementor-icon-list-item {
     align-items: flex-start;
}
/* ========================================================================= * UTILITIES * * These replace the style="" attributes that were hand-written into the * Elementor content. Specificity was measured against every stylesheet the * site loads before each rule was written: * * .od-accent on a <span> no competing colour rule at all, so a plain * class is enough. * .od-accent on an <a> Elementor sets colour:inherit on links inside an * icon box at specificity 23, so the link rules are * written at 31 to sit above it. * .od-inline-cta replaces a Figma export that contained invalid * declarations (font-style: Extra Bold, * leading-trim: NONE, letter-spacing: 0%). * ====================================================================== */
 .od-accent {
     color: #2f80ed;
}
 .elementor-widget .elementor-icon-box-title a.od-accent, .elementor-widget .elementor-icon-box-description a.od-accent {
     color: #2f80ed;
}
 .elementor-widget .elementor-icon-box-title a.od-on-dark, .elementor-widget .elementor-icon-box-description a.od-on-dark {
     color: #fff;
}
 .od-inline-cta {
     font-weight: 800;
     font-size: 18px;
     line-height: 24px;
}
 .comparison-table th:first-child {
     width: 50%;
}
/* ========================================================================= * "Weitere Themen" / "Weitere Beispiele aus der Praxis" (/case-studies/) * * The two boxes sit side by side. Elementor gave the left heading 20px of * bottom padding and the right one 10px, and the right heading wraps onto a * second line because it is longer - so the first link in each box started at a * different height and the two columns read as misaligned. * * Matching the padding and reserving two lines of heading height lines both * lists up. Only from 768px, which is where the boxes are actually side by * side;
 below that they stack and the reserved height would just be a gap. * ====================================================================== */
 .elementor-element-e7f8958, .elementor-element-641cee1 {
     padding-bottom: 20px;
}
 @media (min-width: 768px) {
     .elementor-element-e7f8958 .elementor-heading-title, .elementor-element-641cee1 .elementor-heading-title {
         display: block;
         min-height: 68px;
        /* two lines at the 34px line-height Elementor sets */
    }
}
/* ========================================================================= * CASE-STUDY CARD GRID (/case-studies/) * * 6 across on desktop, 3 on tablet, 2 on mobile. * * The counts are also set in the Elementor grid container, which is the proper * place for them. These rules state the same thing directly on the grid element * rather than through Elementor's --e-con-grid-template-columns variable, so the * layout does not depend on that plumbing or on a stale post-1907.css. * * Specificity 40 (.elementor-1907 + .elementor-element + .elementor-element-… * + .e-con-inner), which is above every rule that competes for * grid-template-columns on this element. * ====================================================================== */
 .elementor-1907 .elementor-element.elementor-element-cb69927 > .e-con-inner {
     display: grid;
     grid-template-columns: repeat(6, 1fr);
     grid-template-rows: auto;
     align-items: stretch;
}
/* Six columns need roughly 200px each, so they are kept for desktop widths only. Everything from a 1200px screen down to the phone breakpoint gets the three column layout, which is where the cards stay readable. */
 @media (max-width: 1620px) {
     .elementor-1907 .elementor-element.elementor-element-cb69927 > .e-con-inner {
         grid-template-columns: repeat(3, 1fr);
    }
}
 @media (max-width: 1279px) {
     .elementor-1907 .elementor-element.elementor-element-cb69927 > .e-con-inner {
         grid-template-columns: repeat(3, 1fr);
    }
}
 @media (max-width: 767px) {
     .elementor-1907 .elementor-element.elementor-element-cb69927 > .e-con-inner {
         grid-template-columns: repeat(1, 1fr);
    }
}
/* Footer contact list - a little more air between the rows. * * Elementor puts 10px of padding below each item and 10px of margin above the * next, so the phone/e-mail row sat almost against the address row beneath it. * The selectors below repeat Elementor's own exactly, so they match on * specificity and win on source order (this file loads last). row-gap covers * the case where the items wrap rather than stack. */
 .elementor-element-08f6ebf .elementor-icon-list-items {
     row-gap: 6px;
}
 .elementor-element-08f6ebf .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child) {
     padding-block-end: 9px;
}
 .elementor-element-08f6ebf .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child) {
     margin-block-start: 9px;
}
/* German legal prose runs to very long compound nouns - "Umsatzsteuer-Identifikationsnummer", "Verbraucherschlichtungsstelle" - which are wider than a phone viewport and pushed /impressum/ and /datenschutz/ into horizontal scrolling. Breaking inside a word only happens when it would otherwise overflow its line, so text that already fits is untouched. */
 .elementor-widget-html :is(h1, h2, h3, h4, p, li, dt, dd, td, th) {
     overflow-wrap: break-word;
}
/* --------------------------------------------------------------------------- Text contrast (WCAG 2.1 AA, SC 1.4.3) Three places fell below the 4.5:1 required for normal-size text, measured against the background actually painted behind them. Each colour is nudged along its own hue - the smallest change that reaches the threshold - so the palette still reads as the same design. The brand blue is worth noting: #2F80ED on a near-white ground reaches only 3.66:1, so it is not safe for normal-size body text anywhere. It is darkened here for the one heading link that failed, rather than site-wide, because changing a brand colour everywhere is not a decision to make silently. --------------------------------------------------------------------------- */
/* Two of these compete with Elementor's per-widget rules, which carry a specificity of 40. Repeating the element class matches exactly the same single element and lifts the rule above that without !important. */
/* The three contact tiles on the dark navy card - "Montag - Freitag, 09:00 - 18:00 Uhr", "Wir antworten innerhalb von 24 Stunden" and its sibling - all take #6D7989 from a global colour token that works on light grounds but only reaches 3.73:1 on this one. The token is left alone and overridden just for these three, so nothing else that uses it shifts. */
 .elementor-element-a011976.elementor-element-a011976.elementor-element-a011976.elementor-element-a011976 .elementor-icon-box-description, .elementor-element-98b9300.elementor-element-98b9300.elementor-element-98b9300.elementor-element-98b9300 .elementor-icon-box-description, .elementor-element-9879893.elementor-element-9879893.elementor-element-9879893.elementor-element-9879893 .elementor-icon-box-description {
     color: #7d8896;
}
/* Intro paragraph link on /angebotsprozess-optimieren/ - 4.27:1 */
 .elementor-element-faa26a7 p a {
     color: #c43162;
}
/* Card heading link on /angebotssoftware-deutschland/ - 3.66:1 at 18px bold */
 .elementor-element-148120e3.elementor-element-148120e3.elementor-element-148120e3.elementor-element-148120e3 h3 a {
     color: #2971d1;
}
 .timeline-wrapper{
     position:relative;
     display:flex;
     flex-direction:column;
     gap:26px;
}
/* Vertical Blue Line */
 .timeline-wrapper .timeline-line{
     position:absolute;
     left:18px;
     top:70px;
     bottom:20px;
     width:4px;
     background:#2F80ED;
     z-index:1;
}
/* Each Row */
 .timeline-wrapper .step{
     position:relative;
     display:flex;
     align-items:center;
     gap:18px;
     z-index:2;
}
/* Number Circle */
 .timeline-wrapper .number{
     min-width:38px;
     width:38px;
     height:38px;
     border-radius:50%;
     background:#2F80ED;
     color:#fff;
     font-size:20px;
     font-weight:700;
     display:flex;
     align-items:center;
     justify-content:center;
     position:relative;
     z-index:2;
}
/* Main Card */
 .timeline-wrapper .card{
     width:100%;
     background:#fff;
     border:1px solid #C1D9FA;
     border-radius:20px;
     
     min-height:92px;
}
/* Repeating the class raises specificity without changing what the
   selector matches, so this wins the cascade on its own merits. */
.timeline-wrapper.timeline-wrapper.timeline-wrapper.timeline-wrapper.timeline-wrapper .card {
  padding: 22px 26px;
}

/* Elementor Icon */
 .timeline-wrapper .card .elementor-icon{
     border-radius:14px;
     width:58px;
     height:58px;
     display:flex;
     align-items:center;
     justify-content:center;
}
/* Title */
 .timeline-wrapper .card .elementor-icon-box-title{
     font-size:20px;
     font-weight:800;
     color:#102544;
     margin-bottom:8px;
}
/* Description */
 .timeline-wrapper .card .elementor-icon-box-description{
     font-size:16px;
     line-height:1.4;
     color:#1D3557;
}
 .timeline-wrapper h3{
     margin-top :0;
}
 @media(max-width:767px){
     .timeline-wrapper .card{
         
    }
/* Repeating the class raises specificity without changing what the
   selector matches, so this wins the cascade on its own merits. */
.timeline-wrapper.timeline-wrapper.timeline-wrapper.timeline-wrapper.timeline-wrapper .card {
  padding: 16px;
}

}
 .angebotsprozess-optimieren-box span{
     font-weight: 600;
     font-size: 54px;
     line-height: 64px;
}
/* 02-September-2026 */
 .rank-math-breadcrumb p{
     margin-bottom:0;
     font-family: Inter;
     font-weight: 700;
     font-size: 16px;
     line-height: 22px;
     letter-spacing: 0%;
     color:#fff;
     gap: 12px !important;
     display: flex;
}
 .rank-math-breadcrumb a{
     color:#2F80ED;
}
 @media(max-width:767px){
     .rank-math-breadcrumb p{
         font-size: 14px;
    }
}
 .header-title-dot span{
     margin-right:10px;
     background: #2F80ED;
     width: 10px;
     height: 10px;
     border-radius: 50%;
     display: inline-block;
}
 .top-button .elementor-button-content-wrapper{
     transition: smooth;
     transition: transform .25s 
}
 .top-button a:hover .elementor-button-content-wrapper{
     gap:16px !important;
}
 .top-button a:hover{
     transform: translateY(-2px);
}
 .footer-icon-content-space .elementor-icon-list-item {
     padding-bottom: 10px;
}
 .content-card-main{
     position: relative;
     overflow: hidden;
}
 .content-card-main::before{
     content: "";
     position: absolute;
     left: 0;
     top: 50%;
     transform: translateY(-50%);
     width: 4px;
     height: calc(100% - 48px);
    /* 24px top & bottom spacing */
     background: #0058cf;
     border: 0px;
}
 .bg-icon-list .elementor-icon {
     background-color: var( --e-global-color-accent );
     padding: 20px;
    /*background: blue;
    */
     border-radius: 12px;
}
/* CONTACT-FORM */
 .contact-form-main .wpcf7-form-control-wrap input::placeholder, .contact-form-main .wpcf7-form-control-wrap textarea::placeholder{
     color: #ffffff;
     font-weight: 600;
}
 .contact-form-main .wpcf7-form-control-wrap input{
     
     
}
/* Repeating the class raises specificity without changing what the
   selector matches, so this wins the cascade on its own merits. */
.contact-form-main.contact-form-main.contact-form-main.contact-form-main.contact-form-main .wpcf7-form-control-wrap input {
  background: transparent;
  border: none;
}

 .contact-form-main .od-input p{
     margin: 0 !important;
}
 .contact-form-main .od-input textarea{
     
     border: none;
}
/* Repeating the class raises specificity without changing what the
   selector matches, so this wins the cascade on its own merits. */
.contact-form-main.contact-form-main.contact-form-main.contact-form-main.contact-form-main .od-input textarea {
  background: transparent;
}

 .contact-form-main .od-contact{
     background:#071424;
     border-radius:24px;
     font-family: "Gilroy font", Sans-serif;
}
 .contact-form-main .od-contact-panel{
     max-width:900px;
     margin:auto;
     background:#112544;
     border-radius:24px;
     padding:20px;
}
 .contact-form-main .od-contact-title{
     text-align:center;
     color:#fff;
     font-size:34px;
     margin-bottom:20px;
     font-family: "Gilroy font", Sans-serif;
     font-weight: 700;
     line-height: 42px;
     color: var(--e-global-color-40fbf33);
}
 .contact-form-main .od-grid{
     display:grid;
     grid-template-columns:repeat(2,1fr);
     gap:0px 24px;
}
 .contact-form-main .od-field{
     margin-bottom:24px;
}
 .contact-form-main .od-field label{
     display:block;
     color:#fff;
     margin-bottom:10px;
     font-weight:600;
}
 .contact-form-main .od-input{
     background: #0B1F3A;
     position:relative;
     display: inherit;
     border: none;
}
 .contact-form-main .od-input input, .contact-form-main .od-input textarea{
     align-items: center;
     background: #0B1D34;
     border: 1px solid #6D7989 !important;
     border-radius: 11px;
     overflow: hidden;
     width:100%;
     background:#142b4e;
     border:1px solid rgba(255,255,255,.15);
     border-radius:14px;
    /*padding:16px 52px 16px 18px;
    */
     color:#fff;
     font-size:16px;
}
 .contact-form-main .od-input textarea{
     resize:none;
}
/*.od-input .icon{
    */
    /* position:absolute;
    */
    /* right:18px;
    */
    /* top:50%;
    */
    /* transform:translateY(-50%);
    */
    /* width:20px;
    */
    /* height:20px;
    */
    /* color:#dbe7ff;
    */
    /*
}
*/
 .contact-form-main .od-textarea .icon{
     top:22px;
     transform:none;
}
 .contact-form-main .od-btn{
     display:inline-flex;
     align-items:center;
     gap:12px;
     background:#1d6fe0;
     color:#fff;
     border:none;
     border-radius:12px;
     padding:16px 28px;
     font-size:18px;
     font-weight:700;
     cursor:pointer;
}
 .contact-form-main [type="submit"]:focus:not(:focus-visible), .contact-form-main button:focus:not(:focus-visible) {
     background:#1d6fe0;
}
 .contact-form-main .wpcf7-response-output{
     color:#fff;
}
 .contact-form-main .od-btn:hover{
     background:#155fca;
}
 @media (max-width:1280px){
     .contact-form-main .od-field {
         width: 100%;
    }
     .contact-form-main .od-grid {
         grid-template-columns: repeat(1,1fr);
         gap: 0px;
    }
}
 @media (max-width:768px){
     .contact-form-main .od-contact-panel{
         padding:20px;
    }
     .contact-form-main .od-grid{
         grid-template-columns:1fr;
    }
     .contact-form-main .od-btn{
         
         
         
         font-weight: 500;
         word-wrap: break-word;
         word-break: break-all;
         flex-wrap: wrap;
         display: flex;
         width: 100%;
         align-content: center;
         align-items: center;
         align-self: center;
         justify-content: center;
    }
/* Repeating the class raises specificity without changing what the
   selector matches, so this wins the cascade on its own merits. */
.contact-form-main.contact-form-main.contact-form-main.contact-form-main.contact-form-main .od-btn {
  font-size: 13px;
  height: auto;
  padding: 8px 10px;
}

     .contact-form-main .od-btn br{
        display: none;
    }
     .contact-form-main .od-contact-title{
         font-size:28px;
    }
}
 .contact-form-main .od-input.icon-user::after{
     content: "";
     position: absolute;
     right: 16px;
     top: 50%;
     transform: translateY(-50%);
     width: 18px;
     height: 18px;
     background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c1.5-4 5-6 8-6s6.5 2 8 6'/%3E%3C/svg%3E");
     pointer-events: none;
}
 .contact-form-main .od-input{
     position:relative;
}
 .contact-form-main .od-input::after{
     content:"";
     position:absolute;
     right:16px;
     top:24px;
     transform:translateY(-50%);
     width:18px;
     height:18px;
     background-repeat:no-repeat;
     background-position:center;
     background-size:contain;
     pointer-events:none;
}
 .contact-form-main .od-textarea::after{
     top:18px;
     transform:none;
}
/* User */
 .contact-form-main .icon-user::after{
     background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c1.5-4 5-6 8-6s6.5 2 8 6'/%3E%3C/svg%3E");
}
/* Phone */
 .contact-form-main .icon-phone::after{
     background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7l.5 3a2 2 0 0 1-.6 1.8l-1.4 1.4a16 16 0 0 0 6.4 6.4l1.4-1.4a2 2 0 0 1 1.8-.6l3 .5A2 2 0 0 1 22 16.9z'/%3E%3C/svg%3E");
}
/* Email */
 .contact-form-main .icon-email::after{
     background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E");
}
/* Company */
 .contact-form-main .icon-company::after{
     background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21h16'/%3E%3Cpath d='M7 21V4h10v17'/%3E%3Cpath d='M9 8h2'/%3E%3Cpath d='M13 8h2'/%3E%3Cpath d='M9 12h2'/%3E%3Cpath d='M13 12h2'/%3E%3C/svg%3E");
}
/* Message */
 .contact-form-main .icon-message::after{
     background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}
 .contact-form-main .custom-message .icon-message::after {
     display: none;
}
/* Reset counter */
 .grid-wrap3{
     counter-reset: step;
}
/* Each card */
 .grid-wrap3 > .elementor-widget{
     position: relative;
     counter-increment: step;
}
/* Number */
 .grid-wrap3 > .elementor-widget::before{
     content: counter(step);
     position: absolute;
     top: 10px;
     right: 10px;
     width: 24px;
     height: 24px;
     border-radius: 50%;
     background: #2F80ED;
     color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 13px;
     font-weight: 600;
     z-index: 2;
}
/* Arrow */
 .grid-wrap3 > .elementor-widget:not(:last-child)::after{
     content: "→";
     position: absolute;
     top: 50%;
     right: -35px;
     transform: translateY(-50%);
     color: #2f8cff;
     font-size: 30px;
}
 @media(min-width:1690px){
     .grid-wrap3{
         grid-template-columns: repeat(4, 1fr) !important;
    }
     .grid-wrap3.richting {
         grid-template-columns: repeat(3, 1fr) !important;
    }
}
 @media(max-width:1689px){
     .grid-wrap3{
         grid-template-columns: repeat(2, 1fr) !important;
    }
     .grid-wrap3.richting {
         grid-template-columns: repeat(3, 1fr) !important;
    }
}
 @media (max-width:767px){
     .grid-wrap3{
         grid-template-columns: repeat(1, 1fr) !important;
    }
     .grid-wrap3 > .elementor-widget:not(:last-child)::after{
         left:50%;
         right:auto;
         top:auto;
         bottom:-42px;
         transform:translateX(-50%) rotate(90deg);
    }
     .grid-wrap3.richting {
         grid-template-columns: repeat(1, 1fr) !important;
    }
}
 @media(max-width:767px){
     .mehr-dazu-list .elementor-icon-list-item:not(:last-child)::after{
         border-inline-start-width: 0 !important;
         display: none;
    }
     .mehr-dazu-list li{
         padding:15px !important;
         border-bottom: 1px solid #C1D9FA;
         width: 100%;
         justify-content: center !important;
         align-content: center;
         align-items: center;
         align-self: center;
    }
     .mehr-dazu-list li:last-child{
         border:none;
    }
}
 @media(max-width:767px){
     .bottom-one-box-list .elementor-icon-list-item:not(:last-child)::after{
         border-inline-start-width: 0 !important;
         display: none;
    }
     .bottom-one-box-list li{
         padding:15px !important;
         border-bottom: 1px solid #C1D9FA;
         width: 100%;
         justify-content: center !important;
         align-content: center;
         align-items: center;
         align-self: center;
    }
     .bottom-one-box-list li:last-child{
         border:none;
    }
}
 .bottom-two-box .elementor-icon-box-content {
     display: flex;
     flex-direction: column-reverse;
}
 .bottom-two-box .elementor-icon-box-title {
     text-align: right;
     width: 100%;
}
 @media(min-width:1320px){
     .der-praxis-box-main {
         flex-wrap: nowrap;
    }
}
 @media(max-width:767px){
     .der-inner-arrow img{
         transform: rotate(90deg);
    }
}
 @media(min-width:1600px){
     .der-inner-boxes{
         width:33%;
    }
     .der-inner-boxes .elementor-icon-box-content{
         display: flex;
         align-content: center;
         align-items: center;
         align-self: center;
         gap: 16px;
         justify-content: space-evenly;
    }
}
 .der-inner-boxes p{
     margin-bottom: 0;
}
 @media(max-width:1024px){
     .der-inner-boxes .elementor-icon-box-content{
         display: flex;
         align-content: center;
         align-items: center;
         align-self: center;
         gap: 16px;
         justify-content: space-evenly;
    }
}
 @media(max-width:767px){
     .der-inner-boxes .elementor-icon-box-content{
         display: flex;
         align-content: center;
         align-items: center;
         align-self: center;
         gap: 12px;
         justify-content: space-evenly;
    }
}
 @media(min-width:1600px){
     .wie-sich-box-main{
         flex-wrap: nowrap;
    }
     .wie-sich-box-main .od-calcflow__card{
         width:18% !important;
    }
}
 @media(min-width:1590px){
     .das-ergebnis-list{
         
    }
/* Repeating the class raises specificity without changing what the
   selector matches, so this wins the cascade on its own merits. */
.das-ergebnis-list.das-ergebnis-list.das-ergebnis-list.das-ergebnis-list.das-ergebnis-list {
  grid-template-columns: repeat(3, 1fr);
}

}
 .trans-tex-button .elementor-button-content-wrapper{
     transition: smooth;
     transition: transform .25s 
}
 .trans-tex-button a:hover .elementor-button-content-wrapper{
     gap:16px !important;
}
 .mehr-box-fit img{
     object-fit: contain;
}
 .warum-icon-cnt .elementor-icon{
     padding: 18px;
     background: #fff;
     border:1px solid #D5E6FB !important;
     border-radius: 24px;
}
 @media (max-width: 767px) {
     .warum-arrow img {
         transform: rotate(90deg);
    }
}
 .elementor-element-5870287{
     position: relative;
}
 .vs-circle{
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     z-index: 9;
}
 .vs-circle img{
     width: 26px;
     height: auto;
}
 @media(max-width:1024px){
     .vs-circle{
         top:48%;
    }
}
 @media(max-width:550px){
     .vs-circle{
         top:47%;
    }
}
 .two-trans-tex-button .elementor-button-content-wrapper{
     transition: smooth;
     transition: transform .25s 
}
 .two-trans-tex-button a:hover .elementor-button-content-wrapper{
     gap:16px !important;
}
 .two-trans-tex-button a:hover{
     transform: translateY(-2px);
}
 .grid-wrap4 .elementor-widget{
     position: relative;
}
 .grid-wrap4 > .elementor-widget:not(:last-child)::after{
     content: "→";
     position: absolute;
     top: 20%;
     right: -35px;
     transform: translateY(-50%);
     color: #2f8cff;
     font-size: 30px;
}
 @media(min-width:1280px){
     .grid-wrap4{
         grid-template-columns: repeat(3, 1fr);
    }
}
 @media (max-width:767px){
     .grid-wrap4{
         grid-template-columns:1fr;
    }
     .grid-wrap4 > .elementor-widget:not(:last-child)::after{
         left:50%;
         right:auto;
         top:auto;
         bottom:-42px;
         transform:translateX(-50%) rotate(90deg);
    }
}
 .mehr-zum-thema-list .elementor-icon-list-item{
     justify-content: space-between;
}
 .mehr-zum-thema-list .elementor-icon-list-item{
     padding: 18px !important;
     margin: 0 !important;
}
 .mehr-zum-thema-list .elementor-icon-list-icon{
     order:2;
}
 @media(min-width:1340px){
     .praxis-box{
         flex-wrap: nowrap;
    }
}
 .weitere-box .elementor-image-box-content{
     display: flex;
     justify-content: space-between;
     align-content: center;
     align-items: center;
}
 .weitere-box .elementor-image-box-description img{
     min-width: 26px !important;
}
 .weitere-box h3{
     margin: 0 !important;
}
 @media(max-width:1200px){
     .weitere-box{
         flex-wrap: wrap !important;
    }
     .weitere-box .elementor-element{
         width: 48%;
    }
}
 @media(max-width:767px){
     .weitere-box .elementor-element{
         width: 100%;
    }
     .weitere-box .elementor-image-box-description img{
         min-width: 18px !important;
    }
     .weitere-box .elementor-image-box-img {
         width: 60px;
         min-width: 60px !important;
    }
     .weitere-box .elementor-image-box-wrapper{
         display: flex;
         align-content: center;
         align-items: center;
         justify-content: space-between;
         gap: 20px;
    }
}
 .thomas-box-white {
     max-width: 1190px;
}
 .der-unterschied-table .table-wrapper{
     border:1px solid #C1D9FA;
     border-radius:20px;
     overflow:hidden;
     background:#F6F9FC;
}
 .der-unterschied-table .comparison-table{
     width:100%;
     border-collapse:separate;
     border-spacing:0;
     margin-bottom: 0px;
}
 .der-unterschied-table table tbody>tr:nth-child(odd)>td, table tbody>tr:nth-child(odd)>th {
     background-color: #F6F9FC;
}
 .der-unterschied-table .comparison-table th, .der-unterschied-table .comparison-table td{
     padding:10px;
     border-right:1px solid #C1D9FA;
     border-left: 0px;
     border-bottom:0px solid #C1D9FA;
     background-color: #F6F9FC;
     font-size:18px;
     border-color: #C1D9FA;
}
 .der-unterschied-table .comparison-table th{
     font-weight:700;
     text-align:center;
}
/* Remove last borders */
 .der-unterschied-table .comparison-table th:last-child, .der-unterschied-table .comparison-table td:last-child{
     border-right:none;
}
 .der-unterschied-table .comparison-table tbody tr:last-child td{
     border-bottom:none;
     padding-bottom:12px;
}
 @media(min-width:1400px){
     .grid-wrap-seo{
         grid-template-columns: repeat(3, 1fr);
    }
}
/* Arrow */
 .grid-wrap-seo > .e-con:not(:last-child)::after{
     content: "→";
     position: absolute;
     top: 50%;
     right: -35px;
     transform: translateY(-50%);
     color: #2F80ED;
     font-size: 28px;
     font-weight: 700;
     z-index: 10;
}
 @media (max-width:1366px){
     .grid-wrap-seo > .e-con:not(:last-child)::after{
         left:50%;
         right:auto;
         top:auto;
         bottom:-42px;
         transform:translateX(-50%) rotate(90deg);
    }
}
 @media (max-width:767px){
     .grid-wrap-seo > .e-con:not(:last-child)::after{
         left:50%;
         right:auto;
         top:auto;
         bottom:-42px;
         transform:translateX(-50%) rotate(90deg);
    }
}
 .table-icon .elementor-icon-list-text{
     padding-left:10px;
}
 .analyse-starten-form .od-analyseform{
     padding:30px;
     background:#fff;
     border:1px solid #D8E5F7;
     border-radius:22px;
     font-family: "Gilroy font", Sans-serif;
}
 .analyse-starten-form .od-h2{
     font-size:38px;
     font-weight:800;
     color:#162B4D;
     margin-bottom:28px;
     line-height:1.2;
}
 .analyse-starten-form .od-form__grid{
     display:grid;
     grid-template-columns:360px 1fr;
     gap:22px;
}
 .analyse-starten-form .od-formcard{
     background:#fff;
     border:1px solid #D8E5F7;
     border-radius:18px;
     padding:24px;
}
 .analyse-starten-form .od-formcard__title{
     font-size:28px;
     font-weight:700;
     color:#162B4D;
     margin-bottom:28px;
}
 .analyse-starten-form .od-field2{
     margin-bottom:22px;
}
 .analyse-starten-form .od-field2:last-child{
     margin-bottom:0;
}
 .analyse-starten-form .od-field2 label{
     display:block;
     font-size:15px;
     font-weight:500;
     color:#56657B;
     margin-bottom:8px;
}
 .analyse-starten-form .od-input2{
     position:relative;
}
 .analyse-starten-form .od-input2 input{
     width:100%;
     height:54px;
     border:1px solid #D9E6F8;
     border-radius:10px;
     background:#fff;
     padding:0 50px 0 16px;
     font-size:15px;
     font-weight:600;
     color:#213756;
     transition:.25s;
}
 .analyse-starten-form .od-input2 input::placeholder{
     color:#65778D;
}
 .analyse-starten-form .od-input2 input:focus{
     outline:none;
     border-color:#2F80FF;
     box-shadow:0 0 0 3px rgba(47,128,255,.12);
}
 .analyse-starten-form .od-icon{
     position:absolute;
     right:16px;
     top:50%;
     transform:translateY(-50%);
     width:18px;
     height:18px;
     color:#2F80FF;
     pointer-events:none;
}
/* =========================================================== QUESTIONS =========================================================== */
 .analyse-starten-form .od-qgrid{
     display:grid;
     grid-template-columns:1fr 1fr;
     gap:24px;
}
 .analyse-starten-form .od-q{
     margin:0;
     padding:0;
     border:0;
}
 .analyse-starten-form .od-q legend{
     font-size:15px;
     font-weight:600;
     color:#30465F;
     margin-bottom:14px;
     padding:0;
}
 .analyse-starten-form .od-opts{
     display:flex;
     flex-direction:column;
     gap:10px;
}
 .analyse-starten-form .od-opts--pills{
     flex-direction:row;
}
 .analyse-starten-form .od-opt{
     flex:1;
     position:relative;
}
 .analyse-starten-form .od-opt input{
     display:none;
}
 .analyse-starten-form .od-opt span{
     display:flex;
     justify-content:center;
     align-items:center;
     height:50px;
     border:1px solid #D8E5F7;
     border-radius:10px;
     background:#fff;
     font-size:15px;
     font-weight:600;
     color:#3C4B62;
     cursor:pointer;
     transition:.25s;
}
 .analyse-starten-form .od-opt--block span{
     justify-content:flex-start;
     padding:0 16px;
}
 .analyse-starten-form .od-opt span:hover{
     border-color:#2F80FF;
}
 .analyse-starten-form .od-opt input:checked + span{
     border:2px solid #2F80FF;
     background:#F8FBFF;
     color:#2F80FF;
}
/* =========================================================== FOOTER =========================================================== */
 .analyse-starten-form .od-form__foot{
     display:flex;
     justify-content:space-between;
     align-items:center;
     margin-top:26px;
     gap:20px;
     flex-wrap:wrap;
}
/* =========================================================== BUTTON =========================================================== */
 .analyse-starten-form .od-btn{
     display:inline-flex;
     align-items:center;
     gap:12px;
     border:none;
     background:#1E6FE8;
     color:#fff;
     height:54px;
     padding:0 24px;
     border-radius:12px;
     font-size:17px;
     font-weight:700;
     cursor:pointer;
     transition:.25s;
}
 .analyse-starten-form .od-btn:hover{
     background:#185FCA;
}
 .analyse-starten-form .od-btn svg{
     width:18px;
     height:18px;
}
/* =========================================================== SECURITY =========================================================== */
 .analyse-starten-form .od-form__secure{
     display:flex;
     align-items:center;
     gap:10px;
     color:#6C7C90;
     font-size:15px;
     font-weight:500;
}
 .analyse-starten-form .od-form__secure svg{
     color:#2F80FF;
     flex:none;
}
/* =========================================================== RESPONSIVE =========================================================== */
 @media(max-width:1024px){
     .analyse-starten-form .od-form__grid{
         grid-template-columns:1fr;
    }
}
 @media(max-width:768px){
     .analyse-starten-form .od-qgrid{
         grid-template-columns:1fr;
    }
     .analyse-starten-form .od-analyseform{
         padding:12px;
    }
     .analyse-starten-form .od-opts--pills{
         flex-wrap:wrap;
    }
     .analyse-starten-form .od-opts--pills .od-opt{
         flex:1 1 calc(33.33% - 8px);
    }
     .analyse-starten-form .od-h2 {
         font-size: 22px;
         font-weight: 800;
         color: #162B4D;
         margin-bottom: 28px;
    }
     .analyse-starten-form .od-formcard__title{
         font-size: 20px;
         font-weight: 800;
         color: #162B4D;
         margin-bottom: 28px;
         line-height: 20px;
    }
     .analyse-starten-form .od-form__foot{
         flex-direction:column;
         align-items:flex-start;
    }
     .analyse-starten-form .od-btn{
         width:100%;
         justify-content:center;
    }
}
 @media(min-width:1850px){
     .schritt-form .situation .wpcf7-list-item{
         width: 100%;
    }
}
 .schritt-form .situation .wpcf7-list-item-label{
     justify-content: left;
}
 .schritt-form .wpcf7-list-item input[type="radio"]{
     display:none;
}
 .schritt-form .wpcf7-list-item-label{
     display:flex;
     align-items:center;
     justify-content:center;
     height: 50px;
     border: 1px solid #D8E5F7;
     border-radius: 10px;
     background: #fff;
     font-size: 15px;
     font-weight: 600;
     color: #3C4B62;
     cursor:pointer;
     padding: 0 10px;
     transition:all .3s ease;
}
 .schritt-form .wpcf7-list-item input[type="radio"]:checked + .wpcf7-list-item-label{
     border:2px solid #2F80FF;
     background:#F8FBFF;
     color:#2F80FF;
}
 .schritt-form .wpcf7-list-item label{
     width: 100%;
}
 .schritt-form .wpcf7-radio{
     
     display: flex;
     flex-wrap: wrap;
     
     
}
/* Repeating the class raises specificity without changing what the
   selector matches, so this wins the cascade on its own merits. */
.schritt-form.schritt-form.schritt-form.schritt-form.schritt-form .wpcf7-radio {
  gap: 8px;
  width: 100%;
  justify-content: space-between;
}

 .schritt-form .quotations, .schritt-form .team_size{
     
}
/* Repeating the class raises specificity without changing what the
   selector matches, so this wins the cascade on its own merits. */
.schritt-form.schritt-form.schritt-form.schritt-form.schritt-form .quotations, .schritt-form.schritt-form.schritt-form.schritt-form.schritt-form .team_size {
  justify-content: start;
}

 .schritt-form .situation{
     width: 100%;
}
 .schritt-form .wpcf7-list-item {
     position: relative;
     flex: auto;
     cursor: pointer;
     display: inline-block;
     
}
/* Repeating the class raises specificity without changing what the
   selector matches, so this wins the cascade on its own merits. */
.schritt-form.schritt-form.schritt-form.schritt-form.schritt-form .wpcf7-list-item {
  margin: 0;
}

 .schritt-form .revenue .wpcf7-list-item{
     width: 100%;
     display: block;
}
 .schritt-form .revenue label{
     width: 100%;
}
 .schritt-form .revenue .wpcf7-list-item-label{
     text-align: left;
     justify-content: left;
}
 @media(max-width:767px){
     .schritt-form .od-qgrid{
         
    }
/* Repeating the class raises specificity without changing what the
   selector matches, so this wins the cascade on its own merits. */
.schritt-form.schritt-form.schritt-form.schritt-form.schritt-form .od-qgrid {
  gap: 0;
}

     .schritt-form .order-3{
         order:3;
    }
     .schritt-form .order-4{
         order:4;
    }
}
 @media(max-width:767px){
     .lauft-die-timing .elementor-icon-list-item:not(:last-child)::after{
         border-inline-start-width: 0 !important;
         display: none;
    }
     .lauft-die-timing li{
         padding:15px !important;
         border-bottom: 1px solid #C1D9FA;
         width: 100%;
         justify-content: center !important;
         align-content: center;
         align-items: center;
         align-self: center;
    }
     .lauft-die-timing li:last-child{
         border:none;
    }
}
 .home-table .od-table {
     margin-top:18px;
}
 .home-table .od-table th {
     text-align: center;
}
 .home-table .od-table th:first-child {
     text-align: left;
}
/* ========================================================================== 404 page -------------------------------------------------------------------------- Built from the existing design tokens rather than new colours, and reusing .od-btn for the primary action, so it stays in step with the rest of the site if the palette changes. The card list is one grid whose column count is the only thing that changes across breakpoints. ========================================================================== */
 .od-404 {
     padding: clamp(28px, 3.5vw, 56px) var(--od-pad) clamp(36px, 4vw, 64px);
}
 .od-404__inner {
     max-width: 1040px;
     margin-inline: auto;
     display: flex;
     flex-direction: column;
     gap: clamp(28px, 3.5vw, 44px);
}
 .od-404__intro {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     gap: 10px;
}
 .od-404__eyebrow {
     margin: 0;
     font-family: var(--od-body);
     font-size: 13px;
     font-weight: 600;
     letter-spacing: .14em;
     text-transform: uppercase;
     color: var(--od-blue);
}
/* The numeral is decoration, not content - it is aria-hidden in the markup and sized to sit behind the headline without competing with it. */
 .od-404__code {
     margin: 0;
     font-family: var(--od-display);
     font-weight: 800;
     font-size: clamp(64px, 10vw, 112px);
     line-height: .85;
     letter-spacing: -.04em;
     color: var(--od-blue);
     opacity: .16;
}
 .od-404__title {
     margin: 0;
     font-family: var(--od-display);
     font-weight: 700;
     font-size: clamp(28px, 4vw, 42px);
     line-height: 1.2;
     color: var(--od-navy-text);
     text-wrap: balance;
}
 .od-404__text {
     margin: 0;
     max-width: 60ch;
     font-family: var(--od-body);
     font-size: 18px;
     line-height: 1.6;
     color: var(--od-grey);
}
 .od-404__actions {
     margin-top: 10px;
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: center;
     gap: 14px 24px;
}
/* Both actions use the site's content-button geometry - #0058CF, 12px radius, 18px Inter, 13px/18px padding - so the 404 reads as the same product as the rest of the pages. The secondary is the same button outlined rather than a plain underlined link. */
 .od-404__cta, .od-404__link {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     height: 52px;
     padding: 13px 24px;
     border-radius: 12px;
     font-family: var(--od-body);
     font-size: 18px;
     font-weight: 600;
     line-height: 24px;
     text-decoration: none;
     transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
 .od-404__cta {
     background: var(--od-blue-strong);
     border: 1px solid var(--od-blue-strong);
     color: #fff;
}
 .od-404__cta:hover {
     background: var(--od-blue-hover);
     border-color: var(--od-blue-hover);
     color: #fff;
}
 .od-404__link {
     background: transparent;
     border: 1px solid var(--od-line);
     color: var(--od-blue-strong);
}
 .od-404__link:hover {
     border-color: var(--od-blue-strong);
     background: var(--od-blue-soft);
     color: var(--od-blue-hover);
}
 .od-404__nav {
     display: flex;
     flex-direction: column;
     gap: 18px;
}
 .od-404__nav-title {
     margin: 0;
     font-family: var(--od-display);
     font-weight: 700;
     font-size: 20px;
     color: var(--od-navy-text);
     text-align: center;
}
 .od-404__list {
     list-style: none;
     margin: 0;
     padding: 0;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 16px;
}
 .od-404__card {
     display: flex;
     flex-direction: column;
     gap: 6px;
     height: 100%;
     padding: 20px 22px;
     background: #fff;
     border: 1px solid var(--od-line);
     border-radius: 14px;
     transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
 .od-404__card:hover {
     border-color: var(--od-blue);
     transform: translateY(-2px);
     box-shadow: 0 10px 24px -16px rgba(11, 31, 58, .45);
}
 .od-404__card-label {
     font-family: var(--od-display);
     font-weight: 700;
     font-size: 17px;
     color: var(--od-navy-text);
}
 .od-404__card-note {
     font-family: var(--od-body);
     font-size: 14px;
     line-height: 1.5;
     color: var(--od-grey);
}
 .od-404__card:focus-visible, .od-404__link:focus-visible, .od-404__cta:focus-visible {
     outline: 2px solid var(--od-blue-strong);
     outline-offset: 3px;
}
 @media (max-width: 1024px) {
     .od-404__list {
         grid-template-columns: repeat(2, 1fr);
    }
}
 @media (max-width: 600px) {
     .od-404__list {
         grid-template-columns: 1fr;
    }
     .od-404__text {
         font-size: 16px;
    }
     .od-404__actions {
         flex-direction: column;
         gap: 14px;
    }
     .od-404__cta {
         width: 100%;
         justify-content: center;
    }
}
 @media (prefers-reduced-motion: reduce) {
     .od-404__card {
         transition: none;
    }
     .od-404__card:hover {
         transform: none;
    }
}
/* ========================================================================== Header call to action on mobile -------------------------------------------------------------------------- Below 1024px the navigation collapses to a burger and the "Kostenfreie Analyse" item disappears inside the dropdown, where it is only reachable after opening the menu. A button widget in the header container puts it back on the bar, next to the burger, and the in-menu copy is hidden at the same breakpoint so the action is never offered twice. Visibility is handled here rather than with Elementor's per-breakpoint hide flags: 1024px is the width at which the menu actually becomes a dropdown, and this site's custom breakpoints do not line up with it. ========================================================================== */
 .od-header-cta {
     display: none;
}
 @media (max-width: 1024px) {
    /* Same pill as the desktop header button: the wrapper carries the shape, shadow and arrow, the anchor carries the type - mirroring .last-item-btn so the two are visually identical. */
     .od-header-cta {
         display: flex;
         align-items: center;
         position: relative;
         flex: 0 0 auto;
         border-radius: 12px;
         background: var(--od-blue-strong);
         box-shadow: 0 8px 22px -10px rgba(21, 92, 194, .8);
         transition: transform .25s ease;
    }
     .od-header-cta .elementor-button {
         display: inline-flex;
         align-items: center;
         background: transparent;
         border: 0;
         color: #fff;
         font-family: var(--od-body);
         font-size: 14px;
         font-weight: 700;
         line-height: 24px;
         padding: 10px 34px 10px 14px;
         border-radius: 12px;
         white-space: nowrap;
    }
     .od-header-cta::after {
         content: "";
         position: absolute;
         right: 12px;
         top: 50%;
         transform: translateY(-50%);
         width: 16px;
         height: 16px;
         background: url("../../uploads/2026/06/right-arrow.svg") no-repeat center;
         background-size: contain;
         transition: transform .3s ease;
         pointer-events: none;
    }
     .od-header-cta:hover {
         transform: translateY(-2px);
    }
     .od-header-cta:hover::after {
         transform: translateY(-50%) translateX(4px);
    }
     .od-header-cta .elementor-button:focus-visible {
         outline: 2px solid #fff;
         outline-offset: 2px;
    }
    /* The same action sits at the end of the dropdown;
     one is enough. */
     .header-menu .elementor-nav-menu--dropdown .last-item-btn {
         display: none;
    }
    /* Logo, button and burger on one centred row. Elementor drives container layout from custom properties, and its per-element rule has a specificity of 40, so the class is repeated to outrank it without !important. */
     .elementor-element-7646e79.elementor-element-7646e79.elementor-element-7646e79.elementor-element-7646e79 {
         --flex-direction: row;
         --flex-wrap: nowrap;
         --align-items: center;
         --justify-content: space-between;
    }
    /* The button keeps its exact desktop size, so this container must not be allowed to shrink - the logo is the element that gives up space. */
     .elementor-element-bf3b4a6.elementor-element-bf3b4a6.elementor-element-bf3b4a6.elementor-element-bf3b4a6 {
         --flex-direction: row;
         --flex-wrap: nowrap;
         --align-items: center;
         --justify-content: flex-end;
         --gap: 10px;
         --width: auto;
         flex: 0 0 auto;
    }
    /* The nav widget collapsed to zero width, which pushed the burger outside the viewport. Sizing it to its content puts it back on the row. */
     .elementor-element-cd317d4.elementor-element-cd317d4.elementor-element-cd317d4.elementor-element-cd317d4 {
         --width: auto;
         width: auto;
         flex: 0 0 auto;
         align-self: center;
         margin: 0;
    }
     .header-menu .elementor-menu-toggle {
         align-self: center;
         margin: 0;
    }
     .elementor-element-0128db1.elementor-element-0128db1.elementor-element-0128db1.elementor-element-0128db1 {
         --flex-direction: row;
         --align-items: center;
         --justify-content: flex-start;
         --width: auto;
         flex: 1 1 auto;
         min-width: 0;
         overflow: hidden;
    }
    /* The logo yields space before the button or burger does, and is a block so its line-height cannot push it off the row's centre line. */
     .elementor-element-0128db1 img, .elementor-element-0128db1 svg {
         display: block;
         max-width: 100%;
         height: auto;
    }
     .elementor-element-0128db1 a {
         display: flex;
         align-items: center;
    }
}
/* Below 520px the bar has to give up padding, and the logo has to give up width, so the button can keep the exact desktop dimensions rather than wrapping to a second line. */
/* A 236px button plus a 36px burger needs 272px of the bar. Below these widths the bar sheds padding and the logo steps down, so the button never has to. */
 @media (max-width: 520px) {
     .elementor-element-7646e79.elementor-element-7646e79.elementor-element-7646e79.elementor-element-7646e79 {
         --padding-inline-start: 10px;
         --padding-inline-end: 10px;
    }
     .elementor-element-0128db1 img, .elementor-element-0128db1 svg {
         width: 112px;
    }
}
 @media (max-width: 430px) {
     .elementor-element-7646e79.elementor-element-7646e79.elementor-element-7646e79.elementor-element-7646e79 {
         --padding-inline-start: 8px;
         --padding-inline-end: 8px;
    }
     .elementor-element-bf3b4a6.elementor-element-bf3b4a6.elementor-element-bf3b4a6.elementor-element-bf3b4a6 {
         --gap: 6px;
    }
     .elementor-element-0128db1 img, .elementor-element-0128db1 svg {
         width: 92px;
    }
}
 @media (max-width: 375px) {
     .elementor-element-0128db1 img, .elementor-element-0128db1 svg {
         width: 74px;
    }
}
/* ========================================================================== Navigation submenu -------------------------------------------------------------------------- The second level was a flat list of full-width rows separated by hard hairlines, which read as a continuation of the top level rather than as something belonging to it. It now sits on its own inset panel with a rail down the left edge, so the hierarchy is visible at a glance, and the rows get room to breathe plus a proper hover and focus state. One block covers both the desktop hover dropdown and the mobile accordion, because the markup is the same .sub-menu in both. ========================================================================== */
 .header-menu .elementor-nav-menu .sub-menu {
     padding-block: 6px;
}
 .header-menu .elementor-nav-menu .sub-menu a.elementor-sub-item {
     display: flex;
     align-items: center;
     gap: 10px;
     border: 0;
     border-radius: 0px;
     font-family: var(--od-body);
     font-size: 15px;
     font-weight: 500;
     line-height: 1.35;
     transition: background-color .18s ease, color .18s ease, padding-inline-start .18s ease;
}
/* A small dot that fills in on hover - cheaper than an icon and it keeps the rows aligned whether or not the label wraps. */
 .header-menu .elementor-nav-menu .sub-menu a.elementor-sub-item::before {
     content: "";
     flex: 0 0 auto;
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: currentColor;
     opacity: .35;
     transition: opacity .18s ease, transform .18s ease;
}
 .header-menu .elementor-nav-menu .sub-menu a.elementor-sub-item:hover::before, .header-menu .elementor-nav-menu .sub-menu a.elementor-sub-item:focus-visible::before, .header-menu .elementor-nav-menu .sub-menu .current-menu-item > a.elementor-sub-item::before {
     opacity: 1;
     transform: scale(1.25);
}
 .header-menu .elementor-nav-menu .sub-menu a.elementor-sub-item:focus-visible {
     outline: 2px solid var(--od-blue);
     outline-offset: -2px;
}
/* Both panels sit on the same dark navy, on desktop and on mobile, so the items and their hover state are written once with no breakpoint split - the mouse-over is identical in both. Only the panel's own framing differs, since one floats and the other is inline. */
 .header-menu .elementor-nav-menu .sub-menu a.elementor-sub-item {
     padding: 11px 14px;
     color: #E8EEF8;
}
 .header-menu .elementor-nav-menu .sub-menu a.elementor-sub-item:hover, .header-menu .elementor-nav-menu .sub-menu a.elementor-sub-item:focus-visible, .header-menu .elementor-nav-menu .sub-menu .current-menu-item > a.elementor-sub-item {
     background: rgba(47, 128, 237, .18);
     color: #fff;
     padding-inline-start: 18px;
}
/* Panel framing: inset with a rail in the mobile accordion, a floating card on desktop. The rail colour and radius are shared. */
 .header-menu .elementor-nav-menu--dropdown .sub-menu {
     margin: 4px 14px 10px;
     padding: 6px;
     background: rgba(255, 255, 255, .04);
     border-radius: 12px;
     border-inline-start: 2px solid var(--od-blue);
}
 .header-menu .elementor-nav-menu--dropdown .sub-menu li {
     border: 0;
}
 @media (min-width: 1025px) {
     .header-menu .elementor-nav-menu--main .sub-menu {
         padding: 6px;
         border-radius: 12px;
         border-inline-start: 2px solid var(--od-blue);
         box-shadow: 0 18px 40px -22px rgba(11, 31, 58, .55);
    }
}
 @media (prefers-reduced-motion: reduce) {
     .header-menu .elementor-nav-menu .sub-menu a.elementor-sub-item, .header-menu .elementor-nav-menu .sub-menu a.elementor-sub-item::before {
         transition: none;
    }
}


@media (max-width: 440px) {
	.od-header-cta .elementor-button {
         font-size: 13px;
         padding: 6px 8px 6px 8px;
    }
     .od-header-cta::after {
         display: none;
    }
}