/* wp-inline.css */ img:is([sizes=auto i],[sizes^="auto," i]){contain-intrinsic-size:3000px 1500px} /*# sourceURL=wp-img-auto-sizes-contain-inline-css */ :root{--wp-block-synced-color:#7a00df;--wp-block-synced-color--rgb:122,0,223;--wp-bound-block-color:var(--wp-block-synced-color);--wp-editor-canvas-background:#ddd;--wp-admin-theme-color:#007cba;--wp-admin-theme-color--rgb:0,124,186;--wp-admin-theme-color-darker-10:#006ba1;--wp-admin-theme-color-darker-10--rgb:0,107,160.5;--wp-admin-theme-color-darker-20:#005a87;--wp-admin-theme-color-darker-20--rgb:0,90,135;--wp-admin-border-width-focus:2px}@media (min-resolution:192dpi){:root{--wp-admin-border-width-focus:1.5px}}.wp-element-button{cursor:pointer}:root .has-very-light-gray-background-color{background-color:#eee}:root .has-very-dark-gray-background-color{background-color:#313131}:root .has-very-light-gray-color{color:#eee}:root .has-very-dark-gray-color{color:#313131}:root .has-vivid-green-cyan-to-vivid-cyan-blue-gradient-background{background:linear-gradient(135deg,#00d084,#0693e3)}:root .has-purple-crush-gradient-background{background:linear-gradient(135deg,#34e2e4,#4721fb 50%,#ab1dfe)}:root .has-hazy-dawn-gradient-background{background:linear-gradient(135deg,#faaca8,#dad0ec)}:root .has-subdued-olive-gradient-background{background:linear-gradient(135deg,#fafae1,#67a671)}:root .has-atomic-cream-gradient-background{background:linear-gradient(135deg,#fdd79a,#004a59)}:root .has-nightshade-gradient-background{background:linear-gradient(135deg,#330968,#31cdcf)}:root .has-midnight-gradient-background{background:linear-gradient(135deg,#020381,#2874fc)}:root{--wp--preset--font-size--normal:16px;--wp--preset--font-size--huge:42px}.has-regular-font-size{font-size:1em}.has-larger-font-size{font-size:2.625em}.has-normal-font-size{font-size:var(--wp--preset--font-size--normal)}.has-huge-font-size{font-size:var(--wp--preset--font-size--huge)}:root .has-text-align-center{text-align:center}:root .has-text-align-left{text-align:left}:root .has-text-align-right{text-align:right}.has-fit-text{white-space:nowrap!important}#end-resizable-editor-section{display:none}.aligncenter{clear:both}.items-justified-left{justify-content:flex-start}.items-justified-center{justify-content:center}.items-justified-right{justify-content:flex-end}.items-justified-space-between{justify-content:space-between}.screen-reader-text{word-wrap:normal!important;border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-break:normal!important}.screen-reader-text:focus{background-color:#ddd;clip-path:none;color:#444;display:block;font-size:1em;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}html :where(.has-border-color){border-style:solid}html :where([style^=border-color],[style*=";border-color"],[style*="; border-color"]){border-style:solid}html :where([style^=border-top-color],[style*=";border-top-color"],[style*="; border-top-color"]){border-top-style:solid}html :where([style^=border-right-color],[style*=";border-right-color"],[style*="; border-right-color"]){border-right-style:solid}html :where([style^=border-bottom-color],[style*=";border-bottom-color"],[style*="; border-bottom-color"]){border-bottom-style:solid}html :where([style^=border-left-color],[style*=";border-left-color"],[style*="; border-left-color"]){border-left-style:solid}html :where([style^=border-width],[style*=";border-width"],[style*="; border-width"]){border-style:solid}html :where([style^=border-top-width],[style*=";border-top-width"],[style*="; border-top-width"]){border-top-style:solid}html :where([style^=border-right-width],[style*=";border-right-width"],[style*="; border-right-width"]){border-right-style:solid}html :where([style^=border-bottom-width],[style*=";border-bottom-width"],[style*="; border-bottom-width"]){border-bottom-style:solid}html :where([style^=border-left-width],[style*=";border-left-width"],[style*="; border-left-width"]){border-left-style:solid}html :where(img[class*=wp-image-]){height:auto;max-width:100%}:where(figure){margin:0 0 1em}html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:var(--wp-admin--admin-bar--height,0px)}@media screen and (max-width:600px){html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:0px}} /*# sourceURL=/wp-includes/css/dist/block-library/common.min.css */ /*! This file is auto-generated */ .wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none} /*# sourceURL=/wp-includes/css/classic-themes.min.css */ :root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgb(252,185,0) 0%,rgb(255,105,0) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgb(255,105,0) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);--wp--preset--shadow--crisp: 6px 6px 0px rgb(0, 0, 0);}.wp-block-button{--wp--preset--dimension--25: 25%;--wp--preset--dimension--50: 50%;--wp--preset--dimension--75: 75%;--wp--preset--dimension--100: 100%;}:where(body) { margin: 0; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}body{padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;}:root :where(.wp-element-button, .wp-block-button__link){background-color: #32373c;border-width: 0;color: #fff;font-family: inherit;font-size: inherit;font-style: inherit;font-weight: inherit;letter-spacing: inherit;line-height: inherit;padding-top: calc(0.667em + 2px);padding-right: calc(1.333em + 2px);padding-bottom: calc(0.667em + 2px);padding-left: calc(1.333em + 2px);text-decoration: none;text-transform: inherit;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;} /*# sourceURL=global-styles-inline-css */ /* style.css */ /*! Theme Name: poosch-relaunch Theme URI: http://underscores.me/ Author: Underscores.me Author URI: http://underscores.me/ Description: Description Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: poosch-relaunch Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. poosch-relaunch is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Generic - Normalize - Box sizing # Base - Typography - Elements - Links - Forms ## Layouts # Components - Navigation - Posts and pages - Comments - Widgets - Media - Captions - Galleries # plugins - Jetpack infinite scroll # Utilities - Accessibility - Alignments --------------------------------------------------------------*/ /* Satoshi-regular */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Satoshi"; font-style: normal; font-weight: 400; src: url("./fonts/Satoshi/Satoshi-Regular.woff2") format("woff2"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* Satoshi-medium */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Satoshi"; font-style: normal; font-weight: 500; src: url("./fonts/Satoshi/Satoshi-Medium.woff2") format("woff2"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* Satoshi-bold */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Satoshi"; font-style: normal; font-weight: 600; src: url("./fonts/Satoshi/Satoshi-Bold.woff2") format("woff2"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } /* Satoshi-bolder */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Satoshi"; font-style: normal; font-weight: 700; src: url("./fonts/Satoshi/Satoshi-Black.woff2") format("woff2"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */ } .main-navigation ul { list-style: none; margin: 0; padding: 0; } .text-color-secondary { color: #D8E7FF; } .text-color-white { color: #ffffff; } .text-color-white a { color: #ffffff !important; } .text-color-white a:focus-visible { outline-color: #ffffff; } .text-color-white h1, .text-color-white h2, .text-color-white h3, .text-color-white h4, .text-color-white h5, .text-color-white h6 { color: #ffffff; } .text-color-gray { color: #F2F2F2; } .text-color-gray a { color: #F2F2F2 !important; } .text-color-gray a:focus-visible { outline-color: #F2F2F2; } .text-color-gray h1, .text-color-gray h2, .text-color-gray h3, .text-color-gray h4, .text-color-gray h5, .text-color-gray h6 { color: #F2F2F2; } .text-center { text-align: center; } .radius-20 { border-radius: 1.25rem; } .radius-18 { border-radius: 1.125rem; } .bg-secondary { background-color: #D8E7FF; } .bg-gray { background: linear-gradient(0deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.95) 100%), #000; } .bg-white { background-color: #ffffff; } .max-width { width: 100%; margin: 0 auto; } .container { margin: 0 auto; box-sizing: content-box; width: 100%; box-sizing: border-box; max-width: 1360px; } @media (max-width: 1360px) { .container { padding: 0 16px; } } .container_min { margin: 0 auto; box-sizing: content-box; width: 100%; box-sizing: border-box; max-width: 1280px; } .swiper-pagination.swiper-pagination-horizontal { position: static; line-height: 0; width: auto; font-size: 0; } .swiper-pagination.swiper-pagination-horizontal .swiper-pagination-bullet { margin: 0 8px !important; width: 1rem; height: 1rem; opacity: 1; border-radius: 6.25rem; } @media (min-width: 1025px) { .swiper-pagination.swiper-pagination-horizontal .swiper-pagination-bullet { margin: 0 0.5rem !important; width: 1rem; height: 1rem; } } .swiper-pagination.swiper-pagination-horizontal .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: #0E68FF; } .swiper-arrow-prev, .swiper-arrow-next { display: flex; align-items: center; justify-content: center; border: none; border-radius: 0; background-color: transparent; cursor: pointer; flex: 0 0 auto; padding: 0; border-radius: 6.25rem; } .swiper-arrow-prev:focus, .swiper-arrow-next:focus { outline: none; } .swiper-arrow-prev:focus-visible, .swiper-arrow-next:focus-visible { outline: 1px solid #D8E7FF; outline-offset: 0px; } .swiper-arrow-prev svg, .swiper-arrow-next svg { width: 2.75rem; height: 2.75rem; } .swiper-arrow-prev svg rect, .swiper-arrow-next svg rect { transition: fill 0.3s ease-in-out; } .swiper-arrow-prev svg { transform: scale(-1, 1); } /*-------------------------------------------------------------- # Generic --------------------------------------------------------------*/ /* Normalize --------------------------------------------- */ /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; -webkit-text-size-adjust: 100%; } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; } /** * Render the `main` element consistently in IE. */ main { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; height: 0; overflow: visible; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; font-size: 1em; } /* Text-level semantics ========================================================================== */ /** * Remove the gray background on active links in IE 10. */ a { background-color: transparent; } /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; font-size: 1em; } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10. */ img { border-style: none; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type=button], [type=reset], [type=submit] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Remove the default vertical scrollbar in IE 10+. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */ [type=checkbox], [type=radio] { box-sizing: border-box; padding: 0; } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type=search] { -webkit-appearance: textfield; outline-offset: -2px; } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type=search]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } /* Interactive ========================================================================== */ /* * Add the correct display in Edge, IE 10+, and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Misc ========================================================================== */ /** * Add the correct display in IE 10+. */ template { display: none; } /** * Add the correct display in IE 10. */ [hidden] { display: none; } /* Box sizing --------------------------------------------- */ /* Inherit box-sizing to more easily change it's value on a component level. @link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ *, *::before, *::after { box-sizing: inherit; } html { box-sizing: border-box; } /*-------------------------------------------------------------- # Base --------------------------------------------------------------*/ /* Typography --------------------------------------------- */ body, button, input, select, optgroup, textarea { color: #4D4D4D; font-family: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 16px; line-height: 140%; font-weight: 400; } button { border: none; } h1, h2, h3, h4, h5, h6 { clear: both; hyphens: manual; margin: 0; font-weight: 600; line-height: 140%; color: #000000; } .hyphens-manual { hyphens: manual; } .hyphens-auto { hyphens: auto; } .hyphens-auto * { hyphens: auto; } .white-space-nowrap { white-space: nowrap; } h1, .headline-block_h1 > * { color: #0E68FF; font-size: 40px; font-style: normal; font-weight: 900; line-height: 110%; letter-spacing: -1.6px; text-transform: uppercase; } @media (min-width: 1026px) { h1, .headline-block_h1 > * { font-size: 64px; letter-spacing: -2.56px; } } .h1 { font-size: 40px !important; } @media (min-width: 1026px) { .h1 { font-size: 64px !important; } } h2, .headline-block_h2 > * { font-size: 32px; text-transform: uppercase; font-weight: 900; line-height: 110%; letter-spacing: -0.64px; } @media (min-width: 1026px) { h2, .headline-block_h2 > * { font-size: 52px; } } h2 strong, .headline-block_h2 > * strong { color: #bfbfbf; } .h2 { font-size: 2.125rem !important; } @media (min-width: 1026px) { .h2 { font-size: 52px !important; } } h3, .headline-block_h3 > * { font-size: 28px; } @media (min-width: 1026px) { h3, .headline-block_h3 > * { font-size: 32px; } } .h3 { font-size: 28px !important; } @media (min-width: 1026px) { .h3 { font-size: 32px !important; } } h4, .headline-block_h4 > * { font-size: 1.25rem; } @media (min-width: 1026px) { h4, .headline-block_h4 > * { font-size: 1.5rem; } } .h4 { font-size: 1.25rem !important; } @media (min-width: 1026px) { .h4 { font-size: 1.5rem !important; } } h5, .headline-block_h5 > * { font-size: 1.625rem; } @media (min-width: 1026px) { h5, .headline-block_h5 > * { font-size: 1.5rem; } } .h5 { font-size: 1.25rem !important; } @media (min-width: 1026px) { .h5 { font-size: 1.5rem !important; } } h6, .headline-block_h6 > * { font-size: 1.125rem; } @media (min-width: 1026px) { h6, .headline-block_h6 > * { font-size: 1.125rem; } } .h6 { font-size: 1.125rem !important; } @media (min-width: 1026px) { .h6 { font-size: 1.125rem !important; } } p { margin: 0; } .text-block { display: flex; flex-direction: column; gap: 8px; } .text-block strong { font-weight: 600; } .text-block ul, .text-block ol { margin: 0; } .text-block ul { padding: 0 0 0 1.25rem; } .text-block ul li { padding-left: 0.25rem; } .text-block a { color: #0E68FF; word-break: break-all; } dfn, cite, em, i { font-style: italic; } blockquote { margin: 0 1.5em; } address { margin: 0 0 1.5em; } pre { background: #eee; font-family: "Courier 10 Pitch", courier, monospace; line-height: 1.6; margin-bottom: 1.6em; max-width: 100%; overflow: auto; padding: 1.6em; } code, kbd, tt, var { font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace; } abbr, acronym { border-bottom: 1px dotted #666; cursor: help; } mark, ins { background: #fff9c0; text-decoration: none; } big { font-size: 125%; } /* Elements --------------------------------------------- */ body { background: #fff; } hr { background-color: #ccc; border: 0; height: 1px; margin-bottom: 1.5em; } ul, ol { margin: 0 0 1.5em 3em; } ul { list-style: disc; } ol { list-style: decimal; } li > ul, li > ol { margin-bottom: 0; margin-left: 1.5em; } dt { font-weight: 700; } dd { margin: 0 1.5em 1.5em; } /* Make sure embeds and iframes fit their containers. */ .site embed, .site iframe, .site object { max-width: 100%; } .site img { height: auto; max-width: 100%; } .site figure { margin: 0; } .site .img_default > img { display: block; } img { height: auto; max-width: 100%; } table { margin: 0 0 1.5em; width: 100%; } /* Links --------------------------------------------- */ a:visited, a:hover, a:focus, a:active { outline: none; } a:focus-visible { outline: 1px solid #000000; outline-offset: -1px; } /* Forms --------------------------------------------- */ .btn-block { line-height: 0; } .btn:focus { outline: none !important; } .btn { display: inline-flex; align-items: center; text-align: center; justify-content: space-between; font-size: 16px; font-weight: 600; line-height: 140%; border-radius: 100px; gap: 16px; padding: 4px 4px 4px 24px; cursor: pointer; text-decoration: none; transition: background-color 0.3s ease, color 0.3s ease; } .btn_primary { background-color: #0E68FF; color: #ffffff; } .btn_primary:hover, .btn_primary:focus, .btn_primary:focus-visible, .btn_primary:active { background-color: #0C57D6; } .btn_primary:hover .btn__icon svg path, .btn_primary:focus .btn__icon svg path, .btn_primary:focus-visible .btn__icon svg path, .btn_primary:active .btn__icon svg path { stroke: #0E68FF; } .btn_primary-white { background-color: #ffffff; color: #000000; } .btn_primary-white .btn__icon { background: #0E68FF; } .btn_primary-white svg path { stroke: #ffffff; } .btn_primary-white:hover, .btn_primary-white:focus, .btn_primary-white:active { color: #0E68FF; } .btn span:not(.btn__icon) { width: 100%; } .btn svg { width: 2.75rem; height: 2.75rem; flex: 0 0 auto; } @media (max-width: 576px) { .btn_mob-fullwidth { width: 100%; text-align: center; } } .btn.btn-mobile { display: none; } @media (max-width: 768px) { .btn.btn-mobile { display: flex; margin-top: 32px; } } .btn_arrow { width: -moz-max-content; width: max-content; display: flex; align-items: center; justify-content: flex-start; align-items: center; gap: 8px; color: #0E68FF; font-size: 16px; font-weight: 600; line-height: 140%; padding: 0; } .btn_arrow svg path { stroke: #0E68FF; } .btn_arrow .btn__icon { width: 16px; height: 13px; min-width: 16px; background-color: transparent; } .btn_arrow:focus, .btn_arrow:hover, .btn_arrow:active { color: #0C57D6; } .btn_arrow:focus svg path, .btn_arrow:hover svg path, .btn_arrow:active svg path { stroke: #0C57D6; } .btn__icon { position: relative; width: 64px; height: 64px; min-width: 64px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #ffffff; border-radius: 50%; aspect-ratio: 1/1; } .btn__icon svg { width: 16px; height: 16px; } input[type=text], input[type=email], input[type=url], input[type=password], input[type=search], input[type=number], input[type=tel], input[type=range], input[type=date], input[type=month], input[type=week], input[type=time], input[type=datetime], input[type=datetime-local], input[type=color], textarea, select { color: #666; border: 1px solid #d1dce4; border-radius: 3px; padding: 3px; } input[type=text]:focus, input[type=email]:focus, input[type=url]:focus, input[type=password]:focus, input[type=search]:focus, input[type=number]:focus, input[type=tel]:focus, input[type=range]:focus, input[type=date]:focus, input[type=month]:focus, input[type=week]:focus, input[type=time]:focus, input[type=datetime]:focus, input[type=datetime-local]:focus, input[type=color]:focus, textarea:focus, select:focus { color: #111; } input[type=text]:-webkit-autofill, input[type=text]:-webkit-autofill:hover, input[type=text]:-webkit-autofill:focus, input[type=email]:-webkit-autofill, input[type=email]:-webkit-autofill:hover, input[type=email]:-webkit-autofill:focus, input[type=url]:-webkit-autofill, input[type=url]:-webkit-autofill:hover, input[type=url]:-webkit-autofill:focus, input[type=password]:-webkit-autofill, input[type=password]:-webkit-autofill:hover, input[type=password]:-webkit-autofill:focus, input[type=search]:-webkit-autofill, input[type=search]:-webkit-autofill:hover, input[type=search]:-webkit-autofill:focus, input[type=number]:-webkit-autofill, input[type=number]:-webkit-autofill:hover, input[type=number]:-webkit-autofill:focus, input[type=tel]:-webkit-autofill, input[type=tel]:-webkit-autofill:hover, input[type=tel]:-webkit-autofill:focus, input[type=range]:-webkit-autofill, input[type=range]:-webkit-autofill:hover, input[type=range]:-webkit-autofill:focus, input[type=date]:-webkit-autofill, input[type=date]:-webkit-autofill:hover, input[type=date]:-webkit-autofill:focus, input[type=month]:-webkit-autofill, input[type=month]:-webkit-autofill:hover, input[type=month]:-webkit-autofill:focus, input[type=week]:-webkit-autofill, input[type=week]:-webkit-autofill:hover, input[type=week]:-webkit-autofill:focus, input[type=time]:-webkit-autofill, input[type=time]:-webkit-autofill:hover, input[type=time]:-webkit-autofill:focus, input[type=datetime]:-webkit-autofill, input[type=datetime]:-webkit-autofill:hover, input[type=datetime]:-webkit-autofill:focus, input[type=datetime-local]:-webkit-autofill, input[type=datetime-local]:-webkit-autofill:hover, input[type=datetime-local]:-webkit-autofill:focus, input[type=color]:-webkit-autofill, input[type=color]:-webkit-autofill:hover, input[type=color]:-webkit-autofill:focus, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #ffffff inset; } textarea { width: 100%; } .form-grid { display: flex; flex-direction: column; gap: 20px; } @media (min-width: 2560px) { .form-grid { gap: 32px; } } .form-grid button { border: none; } .form-grid .wpcf7-submit { width: -moz-max-content; width: max-content; max-width: 100% !important; background-color: #fb9d21; } @media (max-width: 1025px) { .form-grid .wpcf7-submit { width: 100%; } } .form-grid .wpcf7-submit span { justify-content: center; } .form-row-50-50 { display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 1025px) { .form-row-50-50 { grid-template-columns: 1fr 1fr; gap: 20px 12px; } } .form-group { position: relative; } .form-group .wpcf7-form-control-wrap { display: block; } .form-group input, .form-group textarea:focus { outline: none; } .form-group input[type=text], .form-group input[type=email], .form-group input[type=url], .form-group input[type=password], .form-group input[type=search], .form-group input[type=number], .form-group input[type=tel], .form-group input[type=range], .form-group input[type=date], .form-group input[type=month], .form-group input[type=week], .form-group input[type=time], .form-group input[type=datetime], .form-group input[type=datetime-local], .form-group input[type=color], .form-group textarea { height: 56px !important; width: 100%; border: 1px solid #d1dce4 !important; border-radius: 12px !important; padding: 16px !important; color: #091722; } .form-group input[type=text]:hover, .form-group input[type=email]:hover, .form-group input[type=url]:hover, .form-group input[type=password]:hover, .form-group input[type=search]:hover, .form-group input[type=number]:hover, .form-group input[type=tel]:hover, .form-group input[type=range]:hover, .form-group input[type=date]:hover, .form-group input[type=month]:hover, .form-group input[type=week]:hover, .form-group input[type=time]:hover, .form-group input[type=datetime]:hover, .form-group input[type=datetime-local]:hover, .form-group input[type=color]:hover, .form-group textarea:hover { border-color: #fb9d21 !important; } .form-group input[type=text].wpcf7-not-valid, .form-group input[type=email].wpcf7-not-valid, .form-group input[type=url].wpcf7-not-valid, .form-group input[type=password].wpcf7-not-valid, .form-group input[type=search].wpcf7-not-valid, .form-group input[type=number].wpcf7-not-valid, .form-group input[type=tel].wpcf7-not-valid, .form-group input[type=range].wpcf7-not-valid, .form-group input[type=date].wpcf7-not-valid, .form-group input[type=month].wpcf7-not-valid, .form-group input[type=week].wpcf7-not-valid, .form-group input[type=time].wpcf7-not-valid, .form-group input[type=datetime].wpcf7-not-valid, .form-group input[type=datetime-local].wpcf7-not-valid, .form-group input[type=color].wpcf7-not-valid, .form-group textarea.wpcf7-not-valid { border-color: #d24a00 !important; } .form-group.has-error .floating_lable { color: #d24a00 !important; } .form-group.has-value:not(.has-error) .wpcf7-form-control { border-color: #d1dce4 !important; } .form-group textarea { height: 128px !important; resize: none; } .form-group .wpcf7-not-valid-tip { position: absolute; top: 100%; left: 0; font-size: 12px; line-height: 1.2; } .form-group .wpcf7-spinner { position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .form-group:focus-within .floating_lable, .form-group.has-value .floating_lable { font-size: 12px; top: -8px; left: 20px; color: #091722; text-transform: uppercase; } .form-group:focus-within .floating_lable span.required, .form-group.has-value .floating_lable span.required { opacity: 1; } .form-group .floating_lable { background-color: #ffffff; color: #7e8b94; font-size: 14px; font-weight: 500; line-height: 140%; letter-spacing: -0.28px; position: absolute; top: 18px; left: 20px; padding: 0 4px; pointer-events: none; transition: all 0.3s ease-out 0s; } .form-group .floating_lable span.required { font-size: 12px; color: #d10000; padding-left: 4px; opacity: 0; } .wpcf7-acceptance { display: block; margin-top: -4px; } .wpcf7-acceptance .wpcf7-list-item { margin: 0; } .wpcf7-acceptance .wpcf7-list-item label { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; position: relative; color: #091722; font-size: 12px; font-weight: 400; line-height: 140%; } .wpcf7-acceptance .wpcf7-list-item label:focus-visible { outline: 1px solid #d8d8d8; } .wpcf7-acceptance .wpcf7-list-item label input:focus-visible ~ span { outline: 1px solid #d8d8d8; } .wpcf7-acceptance .wpcf7-list-item input[type=checkbox] { position: absolute; opacity: 0; width: 0; height: 0; } .wpcf7-acceptance .wpcf7-list-item input[type=checkbox]:checked + .wpcf7-list-item-label::before { background: #ffffff; border-color: #d1dce4; } .wpcf7-acceptance .wpcf7-list-item input[type=checkbox]:checked + .wpcf7-list-item-label::after { opacity: 1; width: 15px; height: 15px; top: 3px; left: 3px; background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTMiIHZpZXdCb3g9IjAgMCAxOCAxMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEuNSA2LjE0NTE2TDUuNjkxMjUgMTAuMzgxNUM2LjA4MjYyIDEwLjc3NzEgNi43MjE2MyAxMC43NzcxIDcuMTEzMDEgMTAuMzgxNUwxNS45IDEuNSIgc3Ryb2tlPSIjRkZDNzM5IiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgo8L3N2Zz4K") center/contain no-repeat; } .wpcf7-acceptance .wpcf7-list-item .wpcf7-list-item-label { display: flex; gap: 8px; } .wpcf7-acceptance .wpcf7-list-item .wpcf7-list-item-label::before { content: ""; display: inline-block; flex: 0 0 auto; width: 20px; height: 20px; border: 1px solid #d1dce4; border-radius: 4px; vertical-align: middle; transition: all 0.2s ease; } .wpcf7-acceptance .wpcf7-list-item .wpcf7-list-item-label::after { content: ""; position: absolute; opacity: 0; transition: 0.2s; } .wpcf7-acceptance .wpcf7-list-item .wpcf7-list-item-label:hover::before { border-color: #a7a7a7; } /*-------------------------------------------------------------- # Components --------------------------------------------------------------*/ body._active { overflow: hidden; } body._active .site-header__nav { right: 0; opacity: 1; display: flex; overflow-y: auto; overflow-x: hidden; } body._active .site-header__logo img { filter: brightness(0) saturate(100%) invert(0%) sepia(100%) saturate(7463%) hue-rotate(20deg) brightness(84%) contrast(110%); } .site-header { z-index: 150; width: 100%; max-width: 1234px; position: fixed; top: 17px; left: 0; right: 0; margin: 0 auto; } @media (max-width: 1025px) { .site-header { padding: 0 17px; } } .site-header__wrap { display: flex; align-items: center; justify-content: space-between; gap: 40px; border-radius: 100px; background: #000000; padding: 4px 4px 4px 24px; } .site-header__logo { line-height: 0; flex: 0 0 auto; display: block; align-self: center; position: relative; z-index: 110; } @media (max-width: 1024px) { .site-header__logo { max-width: 11rem; } } .site-header__logo:focus-visible { outline-color: #000000; } .site-header__logo a { display: inline-flex; max-width: -moz-max-content; max-width: max-content; text-decoration: none; } .site-header__nav { display: none; } @media (min-width: 1025px) { .site-header__nav { display: flex; align-items: center; gap: 1rem; margin-left: 2.906rem; } } @media (max-width: 1024px) { .site-header__nav { position: fixed; height: 100%; height: calc(var(--vh, 1vh) * 100); right: -100%; top: 0; z-index: 101; opacity: 0; width: 100%; transition: 0.25s; flex-direction: column; gap: 1rem; justify-content: space-between; background: #ffffff; margin: 0; padding: 5.563rem 0 1.25rem; display: none; } } .site-header__nav .menu-container { display: flex; flex-direction: column; gap: 0 1.5rem; } @media (max-width: 1024px) { .site-header__nav .menu-container { border-top: 1px solid #d1dce4; padding: 1.5rem 1rem; } } @media (max-width: 1024px) { .site-header__cta:not(.cta-mobile) { display: none; } } .site-header__cta.cta-mobile { display: none; } @media (max-width: 1024px) { .site-header__cta.cta-mobile { display: flex; margin: 30px auto 0 0; } } .site-header__cta.cta-mobile .header-btn { color: #091722 !important; border: 1px solid rgba(0, 0, 0, 0) !important; background: rgba(0, 0, 0, 0.04) !important; } .site-header .header-btn { display: flex; align-items: center; gap: 15px; max-width: -moz-max-content; max-width: max-content; color: #000000; font-size: 16px; font-weight: 600; text-decoration: none; border-radius: 100px; background: #ffffff; padding: 13px 24px; transition: 0.25s ease-in-out; } .site-header .header-btn:hover, .site-header .header-btn:focus { color: #0E68FF; } .site-header .header-btn:hover svg path, .site-header .header-btn:focus svg path { stroke: #0E68FF; } .site-header .header-btn > span { display: flex; } @media (min-width: 1025px) { .main-navigation ul li a, .main-navigation ul li .dropdown-toggle { display: none; } } .main-navigation ul li a:focus-visible, .main-navigation ul li .dropdown-toggle:focus-visible { outline-color: #0E68FF; } .main-navigation ul li a, .main-navigation ul li a:visited { display: inline-flex; align-items: center; border: none; color: #000000; text-decoration: none; font-size: 16px; font-weight: 500; } .main-navigation ul li span { position: relative; display: inline-flex; } .main-navigation ul li.current_page_ancestor > span a, .main-navigation ul li.current-menu-ancestor > span a, .main-navigation ul li.current-menu-item > span a { color: #D8E7FF; } .main-navigation ul li.current_page_ancestor > span path, .main-navigation ul li.current-menu-ancestor > span path, .main-navigation ul li.current-menu-item > span path { stroke: #D8E7FF; } .main-navigation > .menu { display: flex; gap: 4px; flex-direction: column; } @media (min-width: 1025px) { .main-navigation > .menu { flex-direction: row; align-items: center; } } @media (min-width: 1025px) { .main-navigation > .menu > .menu-item { display: flex; align-items: center; } } @media (hover: hover) and (pointer: fine) { .main-navigation > .menu > .menu-item:hover > span svg { transform: scale(1, -1); } } @media (hover: hover) and (pointer: fine) and (min-width: 1025px) { .main-navigation > .menu > .menu-item:hover > ul { display: grid; } } .main-navigation > .menu > .menu-item > span { display: inline-flex; align-items: center; gap: 0.25rem; } @media (min-width: 1025px) { .main-navigation > .menu > .menu-item > span { position: relative; } } @media (max-width: 1025px) { .main-navigation > .menu > .menu-item > span { justify-content: space-between; width: 100%; } } .main-navigation > .menu > .menu-item > span > a { color: #ffffff; font-size: 16px; font-weight: 500; text-transform: none; border-radius: 24px; padding: 13px 20px; } @media (max-width: 1025px) { .main-navigation > .menu > .menu-item > span > a { color: #000; } } .main-navigation > .menu > .menu-item > span > a:hover { background-color: #333333; } @media (max-width: 1025px) { .main-navigation > .menu > .menu-item > span > a:hover { background-color: transparent; } } .main-navigation > .menu > .menu-item > span > a::before { content: ""; position: absolute; inset: 0; } button.dropdown-toggle, button.menu-button { -webkit-appearance: none; -moz-appearance: none; cursor: pointer; padding: 0; font-size: 0; } button.dropdown-toggle:focus, button.menu-button:focus { outline: none; } button.dropdown-toggle:focus-visible, button.menu-button:focus-visible { outline: 1px solid #000000; outline-offset: 2px; border-radius: 0; } button.menu-button { align-self: center; margin-left: auto; } @media (min-width: 1025px) { button.menu-button { display: none; } } .burger-icon { z-index: 150; width: 80px; height: 48px; display: flex; justify-content: center; align-items: center; position: relative; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0; outline-color: #0E68FF; outline-width: 1px; outline-offset: 3px; background: #ffffff; border-radius: 100px; } .burger-icon span { display: block; position: absolute; height: 2px; width: 32px; background: #000000; opacity: 1; left: auto; transform: rotate(0deg); transition: 0.25s ease-in-out; } .burger-icon span:nth-child(1) { top: 13px; transform-origin: left center; } .burger-icon span:nth-child(2) { top: 23px; transform-origin: left center; } .burger-icon span:nth-child(3) { top: 33px; transform-origin: left center; } .burger-icon.toggled-on, .burger-icon[aria-expanded=true] { animation: bounce-in 0.3s ease; animation-delay: 0.25s; } .burger-icon.toggled-on span:nth-child(1), .burger-icon[aria-expanded=true] span:nth-child(1) { transform: rotate(44deg); top: 0.7rem; left: 1.8rem; } .burger-icon.toggled-on span:nth-child(2), .burger-icon[aria-expanded=true] span:nth-child(2) { width: 0%; opacity: 0; } .burger-icon.toggled-on span:nth-child(3), .burger-icon[aria-expanded=true] span:nth-child(3) { transform: rotate(-45deg); top: 2.1rem; left: 1.8rem; } @keyframes show-menu { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes menu-show { 0% { transform: translateY(-100%); } 100% { transform: translateY(0); } } .site-footer { background: #000000; overflow-x: hidden; } .site-footer__wrap { display: grid; grid-template-columns: 0.55fr 1fr; grid-gap: 60px; padding: 100px 0 65px 0; } @media (max-width: 1025px) { .site-footer__wrap { grid-template-columns: 100%; grid-gap: 64px; padding: 40px 0; } } .site-footer__bottom { border-top: 1px solid #333333; padding: 32px 0; } .site-footer__bottom .bottom-wrap { display: flex; justify-content: space-between; align-items: center; gap: 100px; } @media (max-width: 1025px) { .site-footer__bottom .bottom-wrap { flex-direction: column; align-items: flex-start; gap: 24px; } } @media (max-width: 768px) { .site-footer__bottom-col { width: 100%; } } .footer-info .btn { margin-top: 32px; } @media (max-width: 768px) { .footer-info .btn { text-align: center; } } .footer-info p { margin: 10px 0 0 0; } .footer-menu .menu { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 64px 10px; list-style: none; margin: 0; padding: 0; } @media (max-width: 1025px) { .footer-menu .menu { grid-template-columns: repeat(2, 1fr); grid-gap: 24px 40px; } } .footer-menu .menu .menu-item a { color: #d6d6d6; font-size: 16px; text-decoration: none; transition: 0.25s ease-in-out; } .footer-menu .menu .menu-item a:hover, .footer-menu .menu .menu-item a:focus { color: #666666; } .footer-menu .menu .menu-item .sub-menu { display: flex; flex-direction: column; gap: 8px; list-style: none; margin: 12px 0 0 0; padding: 0; } .footer-menu .menu .menu-item.menu-item-has-children > a { color: #ffffff; font-weight: 600; } .footer-socials { display: flex; align-items: center; flex-wrap: wrap; gap: 83px; margin-right: 73px; } @media (max-width: 768px) { .footer-socials { width: 100%; flex-direction: column; gap: 10px; margin-right: 0; } } .footer-socials .socials-item { min-width: 200px; display: grid; grid-template-columns: 32px 1fr 12px; align-items: center; gap: 8px; font-size: 16px; color: #ffffff; text-decoration: none; font-weight: 600; line-height: 140%; border-bottom: 1px solid #333333; padding: 12px 0; transition: 0.25s ease-in-out; } @media (max-width: 768px) { .footer-socials .socials-item { width: 100%; } } .footer-socials .socials-item:hover, .footer-socials .socials-item:focus { color: #bfbfbf; border-color: #bfbfbf; } .footer-socials .socials-item:hover img, .footer-socials .socials-item:focus img { filter: brightness(0) saturate(100%) invert(90%) sepia(0%) saturate(1057%) hue-rotate(332deg) brightness(89%) contrast(83%); } .footer-socials .socials-item:hover svg path, .footer-socials .socials-item:focus svg path { stroke: #bfbfbf; } .footer-socials .socials-item img { display: flex; width: 100%; } .honors { display: flex; gap: 16px; margin-top: 32px; } .honors__certificates { display: flex; gap: 4px; align-items: center; } .honors__certificates-item { display: flex; max-width: 29px; } .honors__certificates-item img { width: 100%; } .hero-banner { position: relative; padding: 256px 0 80px 0; z-index: 1; } @media (max-width: 1025px) { .hero-banner { padding: 154px 0 16px 0; } } .hero-banner__column { display: flex; flex-direction: column; align-items: center; text-align: center; } .hero-banner__bottom { max-width: 1280px; display: flex; justify-content: space-between; align-items: center; gap: 65px; border: 1px solid #ffffff; border-radius: 100px; background: rgba(255, 255, 255, 0.3); padding: 16px 32px; margin: 166px auto 0 auto; } @media (max-width: 1025px) { .hero-banner__bottom { flex-direction: column; gap: 16px; border-radius: 16px; margin-top: 64px; padding: 16px; } } .hero-banner__bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .hero-banner__bg img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .hero-banner .subheadline-block { font-size: 24px; font-style: normal; font-weight: 600; line-height: 140%; color: #666666; margin-bottom: 8px; } @media (max-width: 1025px) { .hero-banner .subheadline-block { font-size: 20px; } } .hero-banner .subheadline-block::before { content: none; } .hero-banner .headline_default { margin-bottom: 40px; } @media (max-width: 1025px) { .hero-banner .headline_default { margin-bottom: 24px; } } .hero-banner .text-block { max-width: 674px; margin: 0 auto 32px auto; } @media (max-width: 1025px) { .hero-banner .text-block { margin-bottom: 24px; } } .hero-banner .honors { margin-top: 0; } .hero-banner .honors__certificates { gap: 9px; } .hero-banner .honors__certificates-item { max-width: 58px; } .circle-logos { display: flex; align-items: center; gap: 16px; } .circle-logos__list { display: inline-flex; align-items: center; } .circle-logos__text { color: #000000; font-size: 16px; font-weight: 600; line-height: 140%; } @media (max-width: 1025px) { .circle-logos__text { font-size: 14px; } } .circle-logos .logos-item { width: 72px; height: 72px; min-width: 72px; display: flex; align-items: center; justify-content: center; border-radius: 100px; border: 2px solid #f1f1f1; background: #fff; padding: 15px; aspect-ratio: 1/1; } @media (max-width: 1025px) { .circle-logos .logos-item { width: 64px; height: 64px; min-width: 64px; } } .circle-logos .logos-item:not(:first-child) { margin-left: -24px; } @media (max-width: 1025px) { .circle-logos .logos-item:not(:first-child) { margin-left: -32px; } } .cta-banner { position: relative; padding: 209px 0 159px 0; z-index: 1; } @media (max-width: 1025px) { .cta-banner { padding: 64px 0; } } .cta-banner__column { display: flex; flex-direction: column; align-items: center; text-align: center; } .cta-banner__bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .cta-banner__bg img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .cta-banner .subheadline-icon { display: flex; margin-bottom: 16px; } .cta-banner .headline_default { margin-bottom: 24px; } .cta-banner .text-block { max-width: 674px; margin: 0 auto; } .cta-banner .btn_primary { margin-top: 32px; } @media (max-width: 1025px) { .cta-banner .btn_primary { margin-top: 24px; } } .faq-accordion .headline-block { max-width: 1018px; margin: 0 auto; } .faq-accordion .accordion-list { max-width: 903px; margin: 48px auto 0 auto; } @media (max-width: 1025px) { .faq-accordion .accordion-list { margin-top: 24px; } } .accordion-list_style1 { display: flex; flex-direction: column; gap: 6px; } .accordion-list_style1 .accordion-list__item { border-radius: 20px; background: #fff; padding: 20px; } .accordion-list_style1 .accordion-list__item .accordion-list__title { line-height: 0; } .accordion-list_style1 .accordion-list__item .accordion-list__title .accordion-title > * { color: #000000; font-size: 20px; font-weight: 600; line-height: 140%; } @media (max-width: 1025px) { .accordion-list_style1 .accordion-list__item .accordion-list__title .accordion-title > * { font-size: 16px; } } .accordion-list_style1 .accordion-list__item .accordion-list__title .accordion-trigger:focus-visible { outline-color: #ffffff; } .accordion-list_style1 .accordion-list__item .accordion-list__content .text-block { padding-top: 16px; } .accordion-list_style1 .accordion-list__item.active .accordion-icon::before { background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE1Ljc4NDEgOS41OTY2MkMxNS45NDI0IDkuNDM4MzkgMTYuMDMxMiA5LjIyMzc4IDE2LjAzMTIgOUMxNi4wMzEyIDguNzc2MjIgMTUuOTQyNCA4LjU2MTYxIDE1Ljc4NDEgOC40MDMzOEMxNS42MjU5IDguMjQ1MTQgMTUuNDExMyA4LjE1NjI1IDE1LjE4NzUgOC4xNTYyNUg4LjE1NjI1SDIuODEyNUMyLjU4ODcyIDguMTU2MjUgMi4zNzQxMSA4LjI0NTE0IDIuMjE1ODggOC40MDMzOEMyLjA1NzY0IDguNTYxNjEgMS45Njg3NSA4Ljc3NjIyIDEuOTY4NzUgOUMxLjk2ODc1IDkuMjIzNzggMi4wNTc2NCA5LjQzODM5IDIuMjE1ODggOS41OTY2MkMyLjM3NDExIDkuNzU0ODUgMi41ODg3MiA5Ljg0Mzc1IDIuODEyNSA5Ljg0Mzc1SDkuODQzNzVIMTUuMTg3NUMxNS40MTEzIDkuODQzNzUgMTUuNjI1OSA5Ljc1NDg1IDE1Ljc4NDEgOS41OTY2MloiIGZpbGw9IiMwQTBBMEEiLz4KPC9zdmc+Cg=="); } .accordion-list__content { transition: max-height 0.5s ease, opacity 0.5s ease; overflow: hidden; max-height: 0; opacity: 0; } .accordion-list__content.open { opacity: 1; } .accordion-trigger { background: none; border: none; padding: 0; border-radius: 0; width: 100%; text-align: left; } .accordion-trigger:focus { outline: none; } .accordion-trigger:focus-visible { outline: 1px solid #000000; outline-offset: 0; } .accordion-trigger .accordion-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.625rem; padding: 0; cursor: pointer; transition: background-color 0.3s ease-in-out; } .accordion-trigger .accordion-title .accordion-icon { flex: 0 0 auto; line-height: 0; display: flex; align-items: center; justify-content: center; padding-top: 2px; } .accordion-trigger .accordion-title .accordion-icon::before { content: ""; display: block; width: 18px; height: 18px; background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE2LjAzMTIgOUMxNi4wMzEyIDkuMjIzNzggMTUuOTQyNCA5LjQzODM5IDE1Ljc4NDEgOS41OTY2MkMxNS42MjU5IDkuNzU0ODUgMTUuNDExMyA5Ljg0Mzc1IDE1LjE4NzUgOS44NDM3NUg5Ljg0Mzc1VjE1LjE4NzVDOS44NDM3NSAxNS40MTEzIDkuNzU0ODUgMTUuNjI1OSA5LjU5NjYyIDE1Ljc4NDFDOS40MzgzOSAxNS45NDI0IDkuMjIzNzggMTYuMDMxMiA5IDE2LjAzMTJDOC43NzYyMiAxNi4wMzEyIDguNTYxNjEgMTUuOTQyNCA4LjQwMzM4IDE1Ljc4NDFDOC4yNDUxNCAxNS42MjU5IDguMTU2MjUgMTUuNDExMyA4LjE1NjI1IDE1LjE4NzVWOS44NDM3NUgyLjgxMjVDMi41ODg3MiA5Ljg0Mzc1IDIuMzc0MTEgOS43NTQ4NSAyLjIxNTg4IDkuNTk2NjJDMi4wNTc2NCA5LjQzODM5IDEuOTY4NzUgOS4yMjM3OCAxLjk2ODc1IDlDMS45Njg3NSA4Ljc3NjIyIDIuMDU3NjQgOC41NjE2MSAyLjIxNTg4IDguNDAzMzhDMi4zNzQxMSA4LjI0NTE0IDIuNTg4NzIgOC4xNTYyNSAyLjgxMjUgOC4xNTYyNUg4LjE1NjI1VjIuODEyNUM4LjE1NjI1IDIuNTg4NzIgOC4yNDUxNCAyLjM3NDExIDguNDAzMzggMi4yMTU4OEM4LjU2MTYxIDIuMDU3NjQgOC43NzYyMiAxLjk2ODc1IDkgMS45Njg3NUM5LjIyMzc4IDEuOTY4NzUgOS40MzgzOSAyLjA1NzY0IDkuNTk2NjIgMi4yMTU4OEM5Ljc1NDg1IDIuMzc0MTEgOS44NDM3NSAyLjU4ODcyIDkuODQzNzUgMi44MTI1VjguMTU2MjVIMTUuMTg3NUMxNS40MTEzIDguMTU2MjUgMTUuNjI1OSA4LjI0NTE0IDE1Ljc4NDEgOC40MDMzOEMxNS45NDI0IDguNTYxNjEgMTYuMDMxMiA4Ljc3NjIyIDE2LjAzMTIgOVoiIGZpbGw9IiMwQTBBMEEiLz4KPC9zdmc+Cg=="); } .clients-results__grid { display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 8px 10px; border-radius: 24px; background: #f2f2f2; padding: 10px; } @media (max-width: 768px) { .clients-results__grid { display: none; } } .clients-results__grid-mobile { display: none; } @media (max-width: 768px) { .clients-results__grid-mobile { display: block; border-radius: 24px; background: #f2f2f2; padding: 8px; } } .clients-results__group { display: grid; grid-template-columns: 1.2fr 1fr; gap: 8px; margin-bottom: 8px; } .clients-results__group:last-child { margin-bottom: 0; } .clients-results__group:nth-child(even) { grid-template-columns: 1fr 1.2fr; } .clients-results__group > .logoplate-item:first-child { grid-column: 1; grid-row: span 2; } .clients-results__group > .logoplate-item:nth-child(2) { grid-column: 2; grid-row: 1; } .clients-results__group > .logoplate-item:nth-child(3) { grid-column: 2; grid-row: 2; } .clients-results__group_large-right > .logoplate-item:first-child { grid-column: 2; grid-row: span 2; } .clients-results__group_large-right > .logoplate-item:nth-child(2) { grid-column: 1; grid-row: 1; } .clients-results__group_large-right > .logoplate-item:nth-child(3) { grid-column: 1; grid-row: 2; } @media (max-width: 768px) { .clients-results__group > .logoplate-item:first-child .logoplate-item__img img { max-height: 68px; } } .clients-results .btn-block { display: flex; justify-content: center; } .clients-results .btn_primary { margin: 48px auto 0 auto; } .logoplate-item { display: flex; justify-content: center; align-items: center; border-radius: 20px; background: #ffffff; padding: 22px; position: relative; } @media (max-width: 768px) { .logoplate-item { min-width: 0; grid-column: auto; } } .logoplate-item_desktop-wide { grid-column: span 2; padding: 43px 70px; } @media (max-width: 768px) { .logoplate-item_desktop-wide { grid-column: auto; padding: 12px 10px 24px; } } .logoplate-item img { filter: brightness(0) saturate(100%) invert(70%) sepia(8%) saturate(48%) hue-rotate(97deg) brightness(92%) contrast(92%); } .logoplate-item:hover img { filter: none; } .logoplate-item:hover .logoplate-item__plate { opacity: 1; pointer-events: all; } .logoplate-item.bg-grey { background: rgba(255, 255, 255, 0.5); } .logoplate-item__sticker { border-radius: 100px; border: 1px solid #0E68FF; background: rgba(0, 108, 255, 0.06); color: #0E68FF; font-size: 12px; font-weight: 600; line-height: 140%; letter-spacing: 0.12px; text-transform: uppercase; position: absolute; right: 12px; bottom: 10px; padding: 4px 12px; } @media (max-width: 768px) { .logoplate-item__sticker { right: 8px; bottom: 7px; padding: 3px 8px; font-size: 10px; } } @media (max-width: 768px) { .logoplate-item__img { max-width: 100%; } .logoplate-item__img img { display: block; width: auto; max-width: 100%; max-height: 33px; -o-object-fit: contain; object-fit: contain; } } @media (max-width: 768px) { .logoplate-item_desktop-wide .logoplate-item__img img { max-height: 68px; } } .logoplate-item__plate { max-width: 275px; border-radius: 20px; border: 2px solid #0E68FF; background: linear-gradient(0deg, rgba(0, 108, 255, 0.06) 0%, rgba(0, 108, 255, 0.06) 100%), #fff; box-shadow: 0 4px 20px 0 rgba(4, 34, 74, 0.12); padding: 22px; position: absolute; top: 97px; left: -180px; z-index: 1; transition: 0.25s; opacity: 0; pointer-events: none; } @media (max-width: 768px) { .logoplate-item__plate { top: -155px; left: -188px; padding: 16px; } } .logoplate-item__plate h3, .logoplate-item__plate h4 { color: #0E68FF; margin-bottom: 8px; } .logoplate-item__plate p { margin-top: 4px; } .logoplate-item__plate p strong { color: #000000; } .logoplate-item__plate .btn-block { justify-content: flex-start; } .logoplate-item__plate .btn_arrow { margin-top: 8px; } .line-text { padding: 40px 0; } @media (max-width: 768px) { .line-text { padding: 20px 0; } } .line-text__wrap { display: flex; flex-direction: column; overflow: hidden; } .line-text__row { overflow: hidden; white-space: nowrap; } .line-text__content { display: inline-flex; width: -moz-max-content; width: max-content; color: #0E68FF; font-size: 140px; font-style: normal; font-weight: 800; line-height: 110%; letter-spacing: -5.6px; text-transform: uppercase; animation: line-text-left 20s linear infinite; } @media (max-width: 768px) { .line-text__content { font-size: 80px; letter-spacing: -3.2px; } } .line-text .text1 .line-text__content { color: transparent; -webkit-text-stroke: 1px #0E68FF; } .line-text .text2 { margin-top: -30px; } @media (max-width: 768px) { .line-text .text2 { margin-top: -10px; } } .line-text .text2 .line-text__content { animation-name: line-text-right; } @keyframes line-text-left { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes line-text-right { from { transform: translateX(-50%); } to { transform: translateX(0); } } .action-list__wrap { display: grid; grid-template-columns: 1fr 675px; grid-gap: 74px; align-items: start; } @media (max-width: 1025px) { .action-list__wrap { grid-template-columns: 100%; grid-gap: 48px; } } .icon-list-plate { border-radius: 24px; background: #f2f2f2; padding: 10px; } .icon-list-plate__wrap { display: flex; flex-direction: column; gap: 16px; background: #ffffff; border-radius: 20px; padding: 40px; } @media (max-width: 1025px) { .icon-list-plate__wrap { padding: 24px; } } .icon-list-plate__item { display: grid; grid-template-columns: 26px 1fr; grid-gap: 14px; color: #000; font-size: 20px; font-style: normal; font-weight: 500; line-height: 140%; padding-right: 65px; padding-bottom: 12px; position: relative; opacity: 0.32; transition: 0.25s ease-in-out; } @media (max-width: 1025px) { .icon-list-plate__item { grid-gap: 8px; font-size: 18px; } } .icon-list-plate__item.active { opacity: 1; } .icon-list-plate__item:not(:last-child) { border-bottom: 1px dashed #e5e5e5; } .icon-list-plate__item .icon { display: flex; } .icon-list-plate__item .number { color: #333333; font-size: 12px; font-weight: 400; line-height: 140%; position: absolute; top: 0; right: 20px; } @media (max-width: 1025px) { .icon-list-plate__item .number { right: 10px; } } .work-process__wrap { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 74px; align-items: start; } @media (max-width: 1025px) { .work-process__wrap { grid-template-columns: 100%; grid-gap: 48px; } } @media (min-width: 1026px) { .work-process__list .list-wrapper { display: flex; flex-direction: column; gap: 10px; } } .process-card { max-width: 611px; display: flex; flex-direction: column; border-radius: 24px; background: #f2f2f2; position: relative; } .process-card__wrap { padding: 10px; } .process-card__num { color: #ffffff; font-size: 56px; font-weight: 500; line-height: 110%; letter-spacing: -1.12px; text-transform: uppercase; opacity: 0.56; mix-blend-mode: overlay; position: absolute; top: 32px; left: 32px; } .process-card__img { display: flex; } .process-card__img img { width: 100%; aspect-ratio: 591/224; -o-object-fit: cover; object-fit: cover; border-radius: 20px; } @media (max-width: 1025px) { .process-card__img img { aspect-ratio: 280/145; } } .process-card__info { display: flex; flex-direction: column; justify-content: space-between; padding: 22px; } .process-card__info .info-text h3, .process-card__info .info-text h4 { color: #000000; font-size: 20px; font-style: normal; font-weight: 600; line-height: 140%; margin-bottom: 4px; } @media (max-width: 1025px) { .process-card__info .info-text h3, .process-card__info .info-text h4 { font-size: 18px; } } .process-card__info .info-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 50px; } @media (max-width: 1025px) { .process-card__info .info-tags { margin-top: 32px; } } .process-card__info .info-tags__item { display: grid; grid-template-columns: 16px 1fr; grid-gap: 10px; align-items: center; color: #000; font-size: 14px; font-weight: 600; line-height: 140%; border-radius: 100px; background: #fff; padding: 4px 12px; } .case-studies__list .list-wrapper { display: flex; flex-direction: column; gap: 10px; box-sizing: border-box; } @media (min-width: 1026px) { .case-block { position: sticky !important; top: 100px; } .case-block:nth-child(2) { top: 125px; } .case-block:nth-child(3) { top: 150px; } .case-block:nth-child(4) { top: 175px; } .case-block:nth-child(5) { top: 200px; } .case-block:nth-child(6) { top: 225px; } .case-block:nth-child(7) { top: 250px; } .case-block:nth-child(8) { top: 275px; } .case-block:nth-child(9) { top: 300px; } .case-block:nth-child(10) { top: 325px; } } .case-block__wrap { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px; border-radius: 24px; background: #f2f2f2; padding: 10px; } @media (max-width: 1025px) { .case-block__wrap { grid-template-columns: 100%; } } .case-block__col { display: flex; flex-direction: column; gap: 10px; } .case-block__col-plate { width: auto; height: 100%; border-radius: 20px; background: #ffffff; padding: 32px; } @media (max-width: 1025px) { .case-block__col-plate { height: auto; padding: 16px 20px; } } @media (max-width: 1025px) { .case-block__col-plate.hide-on-mobile { display: none; } } @media (min-width: 1026px) { .case-block__col-plate.hide-on-desktop { display: none; } } .case-block .case-logo { display: flex; max-width: 194px; margin-bottom: 16px; } .case-block .case-title { margin-bottom: 16px; } .case-block .case-title > * { font-size: 24px; font-weight: 600; line-height: 140%; } @media (max-width: 1025px) { .case-block .case-title > * { font-size: 20px; } } @media (max-width: 1025px) { .case-block .case-text { font-size: 14px; } } .case-block .case-text__more { display: flex; align-items: center; gap: 10px; align-items: center; color: #0E68FF; font-size: 14px; font-weight: 600; line-height: 140%; text-align: left; background: transparent; margin: 16px 0 0 0; padding: 0; } .case-block .case-text__more::after { content: ""; display: block; width: 14px; height: 17px; background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNyIgdmlld0JveD0iMCAwIDE0IDE3IiBmaWxsPSJub25lIj4KICA8ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfNjIwMV84NzApIj4KICAgIDxwYXRoIGQ9Ik02Ljc1IDEuMTI1TDYuNzUgMTUuMTg3NU0xLjEyNSA5LjU2MjVMNi43NSAxNS4xODc1TDEyLjM3NSA5LjU2MjUiIHN0cm9rZT0iIzBFNjhGRiIgc3Ryb2tlLXdpZHRoPSIxLjY4NzUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgogIDwvZz4KICA8ZGVmcz4KICAgIDxjbGlwUGF0aCBpZD0iY2xpcDBfNjIwMV84NzAiPgogICAgICA8cmVjdCB3aWR0aD0iMTYuODc1IiBoZWlnaHQ9IjEzLjUiIGZpbGw9IndoaXRlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMy41KSByb3RhdGUoOTApIi8+CiAgICA8L2NsaXBQYXRoPgogIDwvZGVmcz4KPC9zdmc+") no-repeat; } .case-block .case-numbers { display: flex; flex-direction: column; gap: 12px; } @media (max-width: 1025px) { .case-block .case-numbers { gap: 16px; } } .case-block .case-numbers__item { display: flex; flex-direction: column; gap: 4px; } .case-block .case-numbers__item span { display: flex; gap: 4px; color: #0E68FF; font-size: 32px; font-weight: 600; line-height: 140%; } @media (max-width: 1025px) { .case-block .case-numbers__item span { font-size: 28px; } } .case-block .case-numbers__item span svg { margin-top: 6px; } .case-block .case-list { display: flex; flex-direction: column; gap: 16px; } .case-block .case-list .list-title, .case-block .case-list h3, .case-block .case-list h4 { color: #000000; font-size: 20px; font-weight: 600; line-height: 140%; } @media (max-width: 1025px) { .case-block .case-list .list-title, .case-block .case-list h3, .case-block .case-list h4 { font-size: 18px; } } @media (max-width: 1025px) { .case-block .case-list .list-title { position: relative; padding-right: 30px; } .case-block .case-list .list-title::after { content: ""; display: block; width: 24px; height: 24px; background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNMTkuOTE4MSA4Ljk1MDJMMTMuMzk4MSAxNS40NzAyQzEyLjYyODEgMTYuMjQwMiAxMS4zNjgxIDE2LjI0MDIgMTAuNTk4MSAxNS40NzAyTDQuMDc4MTIgOC45NTAyIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPg==") no-repeat center; position: absolute; top: 0; right: 0; } } @media (max-width: 1025px) { .case-block .case-list .list-title.active::after { transform: scale(1, -1); } } .case-block .case-list ul { list-style: none; margin: 0; padding: 0; } .case-block .case-list ul li { padding-left: 32px; } .case-block .case-list ul li::before { content: ""; display: block; width: 24px; height: 24px; position: absolute; top: 0; left: 0; } .case-block .case-list ul li:not(:last-child) { margin-bottom: 14px; } .case-block .case-list.case-list_1 li { position: relative; } .case-block .case-list.case-list_1 li::before { background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNNyAxN0wxNyA3IiBzdHJva2U9IiNCQTAwNDciIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICA8cGF0aCBkPSJNMTcgMTdMNyA3IiBzdHJva2U9IiNCQTAwNDciIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+") no-repeat; } .case-block .case-list.case-list_2 li { position: relative; } .case-block .case-list.case-list_2 li::before { background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNNyAxMS41TDEwLjUgMTUuNUwxNy41IDgiIHN0cm9rZT0iIzAwQkE3MyIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4=") no-repeat; } .case-block .case-quote { display: flex; flex-direction: column; gap: 16px; position: relative; padding: 32px; z-index: 1; } .case-block .case-quote__icon { display: flex; margin-bottom: 57px; z-index: 1; } .case-block .case-quote__img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 20px; overflow: hidden; z-index: -1; } .case-block .case-quote__img::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 20px; background: linear-gradient(0deg, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0.32) 100%); } .case-block .case-quote__img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .case-block .case-quote__text { color: #fff; font-weight: 600; } @media (max-width: 1025px) { .case-block .case-quote__text { font-size: 14px; } } .case-block .case-quote__name { color: #ffffff; } .case-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-bottom: 24px; } .case-tags__item { color: #0E68FF; font-size: 14px; font-weight: 600; line-height: 140%; border-radius: 100px; background: rgba(14, 104, 255, 0.16); padding: 6px 16px; } .text-numbers__wrap { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px; align-items: center; } @media (max-width: 1025px) { .text-numbers__wrap { grid-template-columns: 100%; grid-gap: 0; } } .text-numbers__list { display: grid; grid-template-columns: 1fr 1fr 1.24fr; grid-gap: 10px; border-radius: 24px; background: #f2f2f2; padding: 10px; } @media (max-width: 1025px) { .text-numbers__list { grid-template-columns: 1.2fr 1fr; } } .text-numbers__list .number-item { display: flex; flex-direction: column; gap: 8px; align-items: center; border-radius: 20px; background: #ffffff; padding: 40px 24px; } @media (max-width: 1025px) { .text-numbers__list .number-item { padding: 16px; } } @media (max-width: 1025px) { .text-numbers__list .number-item:last-child { grid-column: span 2; } } .text-numbers__list .number-item__number { display: flex; align-items: center; color: #0E68FF; font-size: 52px; font-weight: 800; line-height: 110%; letter-spacing: -1.04px; text-transform: uppercase; } @media (max-width: 1025px) { .text-numbers__list .number-item__number { font-size: 32px; letter-spacing: -0.64px; } } .text-numbers__list .number-item__text { text-align: center; } @media (max-width: 768px) { .text-numbers__list .number-item__text { font-size: 14px; } } .counter-number:not(.is-visible) { visibility: hidden; } .wp-admin .counter-number:not(.is-visible) { visibility: visible; } .about-company__grid { display: grid; grid-template-columns: 0.5fr 1fr; grid-gap: 10px; } @media (max-width: 1025px) { .about-company__grid { grid-template-columns: 100%; } } .about-company__grid-col { display: flex; flex-direction: column; gap: 10px; } .about-company__grid-row { height: 100%; display: grid; grid-template-columns: 218px 1fr; grid-gap: 10px; } @media (max-width: 1025px) { .about-company__grid-row { display: flex; flex-direction: column-reverse; } } .about-company__grid-row.row-reverse { grid-template-columns: 1fr 218px; } @media (max-width: 1025px) { .about-company__grid-row.row-reverse { display: flex; flex-direction: column; } } .about-company__grid .row-img { display: flex; } .about-company__grid .row-img img { width: 100%; aspect-ratio: 218/307; -o-object-fit: cover; object-fit: cover; border-radius: 24px; } @media (max-width: 1025px) { .about-company__grid .row-img img { aspect-ratio: 370/207; } } @media (max-width: 1025px) { .about-company__grid .row-img.company-img img { aspect-ratio: 370/368; } } .about-company__grid .row-plate { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; border-radius: 24px; background: #f2f2f2; padding: 32px; } @media (max-width: 1025px) { .about-company__grid .row-plate { padding: 20px; } } .about-company__grid .row-plate blockquote { color: #000; font-size: 20px; font-weight: 600; line-height: 140%; margin: 0 0 16px 0; } @media (max-width: 1025px) { .about-company__grid .row-plate blockquote { font-size: 18px; } } .about-company__grid .row-plate .circle-logos__text { max-width: 235px; } .about-company .circle-logos__text { font-size: 20px; } @media (max-width: 1025px) { .about-company .circle-logos__text { font-size: 14px; } } .team-carousel__grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; } @media (max-width: 1025px) { .team-carousel__grid { grid-template-columns: 100%; } } .team-carousel__slides { overflow: hidden; margin-top: 10px; } .team-carousel__slides .list-wrapper { margin-bottom: 24px; } .team-carousel__slides .slider-scrollbar { max-width: 446px; margin: 24px auto 0 auto; } .team-card { aspect-ratio: 446/500; position: relative; border-radius: 24px; overflow: hidden; z-index: 1; } @media (max-width: 1025px) { .team-card { aspect-ratio: 370/400; } } .team-card .card-wrapper { height: -webkit-fill-available; height: -moz-available; height: stretch; display: flex; flex-direction: column; justify-content: space-between; padding: 32px; } @media (max-width: 1025px) { .team-card .card-wrapper { padding: 24px; } } .team-card_small { aspect-ratio: 1/1; } @media (max-width: 1025px) { .team-card_small { aspect-ratio: 180/206; } .team-card_small .card-wrapper { padding: 20px; } } @media (max-width: 1025px) { .team-card_small .headline-block > * { font-size: 14px; } } .team-card__img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .team-card__img::before { content: ""; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 27.92%, rgba(0, 0, 0, 0.72) 82.17%), linear-gradient(0deg, rgba(0, 0, 0, 0) -6.4%, rgba(0, 0, 0, 0.32) 107.4%); z-index: 1; } .team-card__img img { width: 100%; height: 100%; aspect-ratio: 446/500; -o-object-fit: cover; object-fit: cover; } .team-card__tags, .team-card__info { position: relative; z-index: 1; } .team-card__tags { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; } .team-card__tags .tag-item { color: #fff; font-size: 12px; font-weight: 500; line-height: 140%; border-radius: 100px; background: rgba(255, 255, 255, 0.24); padding: 4px 16px; } .team-card__info { margin-top: auto; } .team-card .headline-block { margin-bottom: 4px; } .team-card .headline-block > * { color: #fff; font-size: 18px; font-weight: 500; line-height: 140%; } @media (max-width: 1025px) { .team-card .headline-block > * { font-size: 16px; } } .team-card .text-block { color: #e5e5e5; } .team-card .text-block p { margin-top: 16px; } @media (max-width: 1025px) { .team-card .text-block p { font-size: 14px; } } .posts-grid__list { display: grid; grid-template-columns: 0.71fr 1fr; grid-gap: 10px; } @media (max-width: 1025px) { .posts-grid__list { grid-template-columns: 100%; } } .posts-grid__list .post-item:nth-child(1) { grid-row: span 2; } .posts-grid__logos { border-radius: 24px; background: #f2f2f2; padding: 10px; margin-top: 10px; } .posts-grid__logos-item { display: flex; max-width: 220px; position: relative; } .posts-grid__logos-item:hover .logo-def { opacity: 0; visibility: hidden; } .posts-grid__logos-item:hover .logo-hov { opacity: 1; visibility: visible; } .posts-grid__logos-item img { width: 100%; } .posts-grid__logos .logos-wrap { display: flex; align-items: center; justify-content: center; gap: 64px; border-radius: 20px; background: #ffffff; padding: 32px 132px; } @media (max-width: 1025px) { .posts-grid__logos .logos-wrap { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; padding: 32px 28px; } } .posts-grid__logos .logo-hov { opacity: 0; position: absolute; left: 0; top: 0; visibility: hidden; } .posts-grid .btn-block { min-width: 396px; } @media (max-width: 1025px) { .posts-grid .btn-block { width: 100%; min-width: auto; } } .posts-grid .btn-block .btn { width: 100%; } .cases-slider { width: 100%; } .cases-slider__cont { display: block; width: 100%; overflow: hidden; } .cases-slider__cont .swiper-wrapper { display: flex; align-items: center; gap: 10px; } @media (max-width: 1025px) { .cases-slider__cont .swiper-wrapper { gap: 0; margin-bottom: 34px; } } @media (max-width: 1025px) { .cases-slider .slider-scrollbar { margin: 24px auto 0 auto; } } .case-slide__cont { width: 100%; height: 100%; background: #ffffff; } .case-slide__cont .cont-wrap { padding: 40px 20px; } @media (max-width: 1025px) { .case-slide__cont .cont-wrap { padding: 20px; } } .case-slide__media { position: relative; } .case-slide__media-img { display: flex; height: 100%; } .case-slide__media-img img { width: 100%; height: 100%; aspect-ratio: 282/456; -o-object-fit: cover; object-fit: cover; } @media (max-width: 1025px) { .case-slide__media-img img { aspect-ratio: 370/365; } } .case-slide__media-img::after { content: ""; position: absolute; bottom: 0; left: 0; display: block; width: 100%; height: 25%; background: linear-gradient(0deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.62) 52.88%, rgba(0, 0, 0, 0) 94.71%); } .case-slide__media-play { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; border-radius: 100px; background: rgba(242, 242, 242, 0.56); aspect-ratio: 1/1; position: absolute; top: 40%; left: 40%; } @media (max-width: 1025px) { .case-slide__media-play { top: 48%; left: 48%; } } @media (max-width: 768px) { .case-slide__media-play { top: 40%; left: 40%; } } .case-slide__media-info { position: absolute; left: 24px; bottom: 24px; color: #ffffff; } .case-slide__media-info .info-name { font-size: 18px; font-weight: 600; line-height: 140%; } .case-slide__media-info .info-prof { display: inline-block; margin-top: 4px; } .case-slide .case-logo { display: flex; max-width: 194px; margin-bottom: 24px; } .case-slide .case-logo img { width: 100%; } .case-slide .case-text h3, .case-slide .case-text h4 { font-size: 24px; font-weight: 600; line-height: 140%; } @media (max-width: 1025px) { .case-slide .case-text h3, .case-slide .case-text h4 { font-size: 20px; } } .case-slide .case-tags { margin-top: 16px; } .case-slide .case-number { display: block; padding-top: 32px; padding-bottom: 4px; } @media (max-width: 1025px) { .case-slide .case-number { padding-top: 24px; } } .case-slide .case-number span { color: #0E68FF; font-size: 32px; font-weight: 600; line-height: 140%; position: relative; } .case-slide .case-number span::after { content: ""; display: block; width: 13px; height: 16px; background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNyIgdmlld0JveD0iMCAwIDE0IDE3IiBmaWxsPSJub25lIj4KICA8ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfNjE2MV83NjU3KSI+CiAgICA8cGF0aCBkPSJNNi40NDkyMiAxNC4wMzc2TDYuNDQ5MjIgMy4wMzc2TTEwLjk0OTIgNy40Mzc2TDYuNDQ5MjIgMy4wMzc2TDEuOTQ5MjIgNy40Mzc2IiBzdHJva2U9IiMxMkI4NkEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CiAgPC9nPgogIDxkZWZzPgogICAgPGNsaXBQYXRoIGlkPSJjbGlwMF82MTYxXzc2NTciPgogICAgICA8cmVjdCB3aWR0aD0iMTYuODc1IiBoZWlnaHQ9IjEzLjUiIGZpbGw9IndoaXRlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3LjM3NjI5ZS0wNyAxNi44NzUpIHJvdGF0ZSgtOTApIi8+CiAgICA8L2NsaXBQYXRoPgogIDwvZGVmcz4KPC9zdmc+") no-repeat; position: absolute; top: 0; right: -20px; } .case-slide .btn.btn_arrow .btn__icon { transform: rotate(90deg); } .cases-slider { width: 100%; } .cases-slider__cont { width: 100%; overflow: hidden; } .cases-slider__list { display: flex; align-items: center; gap: 5px; width: 100%; height: 456px; } .case-slide { position: relative; flex: 0 0 66px; min-width: 0; height: 420px !important; overflow: hidden; border-radius: 16px; cursor: pointer; transition: flex-grow 600ms ease, height 600ms ease, margin 600ms ease; } @media (max-width: 1025px) { .case-slide { height: auto !important; flex: auto; } } .case-slide.is-active { flex: 1 1 0; max-height: 100%; height: 100% !important; cursor: default; } .case-slide.is-active .case-slide__cont { height: auto; opacity: 1; transform: translateY(0px); } .case-slide.is-active .cont-wrap { transform: translateY(0px); } .case-slide.is-active .case-slide__media-img img { transform: scale(1.1) translateX(0px); } @media (max-width: 1025px) { .case-slide.is-active .case-slide__media-img img { transform: none; } } .case-slide__wrap { width: 100%; height: 100%; display: grid; grid-template-columns: 282px 1fr; grid-gap: 32px; background-color: #ffffff; } @media (max-width: 1025px) { .case-slide__wrap { grid-template-columns: 100%; grid-gap: 0; } } .case-slide__media { position: relative; min-width: 0; height: 100%; overflow: hidden; } .case-slide__media-img { display: flex; width: 100%; height: 100%; } .case-slide__media-img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transform: translateX(-55px); transition: transform 700ms ease; } @media (max-width: 1025px) { .case-slide__media-img img { transform: translateX(0); } } .case-slide__cont { overflow: hidden; background: #fff; transition: opacity 250ms ease; } .case-slide .cont-wrap { transform: translateY(150px); transition: transform 700ms ease; } @media (max-width: 1025px) { .case-slide .cont-wrap { transform: translateY(0); } } .case-slide.is-active .case-slide__cont { opacity: 1; pointer-events: auto; transition-delay: 200ms; } .case-slide:not(.is-active) .case-slide__media-img { transform: translateX(-50px); } @media (max-width: 1025px) { .case-slide:not(.is-active) .case-slide__media-img { transform: translateX(0); } } @media (min-width: 1026px) { .case-slide:not(.is-active) .case-slide__media-info, .case-slide:not(.is-active) .case-slide__media-play { opacity: 0; pointer-events: none; } } .case-slide:not(.is-active)::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, 0.32); pointer-events: none; } @media (max-width: 1025px) { .case-slide:not(.is-active)::before { display: none; } } @media (min-width: 1026px) { .case-slide .case-text { width: 702px; } } .cases-slider .slider-scrollbar { display: block; position: relative; width: 100%; max-width: 446px; height: 4px; margin: 24px auto 4px auto; border-radius: 10px; background: #d9d9d9; overflow: visible; cursor: pointer; } .cases-slider .slider-scrollbar .cases-scrollbar__thumb { position: absolute; top: 50%; left: 0; width: 105px; height: 10px; border-radius: 10px; background: #0E68FF; transform: translateX(0); translate: 0 -50%; cursor: grab; touch-action: none; background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iNCIgdmlld0JveD0iMCAwIDIwIDQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxjaXJjbGUgY3g9IjIiIGN5PSIyIiByPSIyIiBmaWxsPSJ3aGl0ZSIvPgo8Y2lyY2xlIGN4PSIxMCIgY3k9IjIiIHI9IjIiIGZpbGw9IndoaXRlIi8+CjxjaXJjbGUgY3g9IjE4IiBjeT0iMiIgcj0iMiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg=="); background-repeat: no-repeat; background-position: center; } @media (min-width: 1026px) { .cases-slider .slider-scrollbar .swiper-scrollbar-drag { background: transparent; } } .cases-slider .slider-scrollbar.is-dragging .cases-scrollbar__thumb { cursor: grabbing; } @media (max-width: 1025px) { .cases-slider .slider-scrollbar { height: 4px; } .cases-slider .slider-scrollbar .cases-scrollbar__thumb { display: none; } } .case-slide__media { position: relative; overflow: hidden; } .case-slide__media-img { transition: opacity 250ms ease; } .case-slide__media-play { z-index: 3; border: 0; padding: 0; cursor: pointer; } .case-slide__media-video { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; background: #000; } .case-slide.is-playing .case-slide__media-play { display: none; } .model-circle__wrap { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 60px; margin-top: 85px; position: relative; } @media (max-width: 1026px) { .model-circle__wrap { grid-template-columns: 100%; } } .model-circle__cards { grid-column: 1; grid-row: 1; height: 470px; overflow: hidden; opacity: 0; visibility: hidden; transform: translateX(-20px); transition: opacity 0.6s ease, transform 0.6s ease, visibility 0.6s; } @media (min-width: 1026px) { .model-circle__cards { margin-left: 133px; } } @media (max-width: 1025px) { .model-circle__cards { max-width: 383px; height: auto; position: absolute; top: -50%; left: 0; right: 0; margin: auto; z-index: 2; } } @media (max-width: 768px) { .model-circle__cards { max-width: 283px; top: -80%; } } .model-circle.is-open .model-circle__cards { opacity: 1; visibility: visible; transform: translateX(0); } .model-circle__nav { grid-column: 1/-1; grid-row: 1; justify-self: center; width: 100%; max-width: 547px; cursor: pointer; margin-top: -75px; transform: translateX(0); transition: transform 0.8s ease; z-index: 1; } .model-circle__nav svg { display: block; width: 100%; height: auto; } @media (min-width: 1026px) { .model-circle.is-open .model-circle__nav { transform: translateX(calc(50% + 30px)); } } .model-circle.is-open .model-circle__nav .circle-pointer, .model-circle.is-open .model-circle__nav .circle-pointer-shadow { opacity: 1; } .model-circle.is-open .model-circle__nav .circle-pointer-shadow { transform: rotate(0deg); mix-blend-mode: overlay; opacity: 1; transition: opacity 300ms ease; } .model-circle.is-open .model-circle__nav .circle-pointer-shadow circle { opacity: 0.8; } .model-circle.is-open .model-circle__nav svg { overflow: visible; } .model-circle .path-step { cursor: pointer; } .model-circle .path-step__active { opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .model-circle .path-step__active.active { opacity: 1; } .model-circle .circle-pointer-shadow { opacity: 0; } .model-circle .circle-pointer { transform-box: view-box; transform-origin: 273.4px 273.4px; opacity: 0; } .model-card { max-width: 517px; border-radius: 24px; background: #ffffff; } .model-card .card-wrapper { padding: 32px; } @media (max-width: 1025px) { .model-card .card-wrapper { padding: 20px; } } .model-card__top { display: flex; justify-content: space-between; } .model-card .card-number { color: #8c8c8c; } .model-card .card-icon { display: flex; width: 48px; } .model-card .card-icon img { width: 100%; } .model-card__cont { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; } @media (max-width: 1025px) { .model-card__cont { margin-top: 24px; } } .model-card__cont h2, .model-card__cont h3, .model-card__cont h4 { font-size: 20px; font-weight: 600; line-height: 140%; } @media (max-width: 1025px) { .model-card__cont h2, .model-card__cont h3, .model-card__cont h4 { font-size: 18px; } } .model-card__bottom { font-size: 12px; border-top: 1px solid #e5e5e5; margin-top: 12px; padding-top: 16px; } .model-card__btn { width: 100%; margin-top: 32px; } @media (max-width: 1025px) { .model-card__btn { margin-top: 15px; } } .model-card__btn .btn-block { display: flex; } .model-card__btn .btn { width: 100%; } .model-card.swiper-slide { height: auto; } .model-card.swiper-slide:not(.swiper-slide-active) { opacity: 0.32; } .model-card.swiper-slide:last-child { margin-bottom: 100px; } .post-item { border-radius: 24px; background: #f2f2f2; padding: 10px; } .post-item__wrap { height: 100%; display: flex; flex-direction: column; background-color: #ffffff; border-radius: 20px; overflow: hidden; } .post-item__img { display: flex; overflow: hidden; } .post-item__img img { width: 100%; aspect-ratio: 541/249; -o-object-fit: cover; object-fit: cover; transition: 0.25s ease-in-out; } @media (max-width: 1025px) { .post-item__img img { aspect-ratio: 351/230; } } .post-item__title > * { font-size: 20px; font-weight: 600; line-height: 140%; } @media (max-width: 1025px) { .post-item__title > * { font-size: 16px; } } .post-item__cont { display: flex; flex-direction: column; gap: 12px; padding: 32px 40px; } @media (max-width: 1025px) { .post-item__cont { padding: 24px; } } .post-item a { text-decoration: none; } .post-item a:hover .post-item__img img, .post-item a:focus .post-item__img img, .post-item a:active .post-item__img img { transform: scale(1.1); } .post-item .post-meta, .post-item__categs { display: flex; align-items: center; gap: 8px; } .post-item .post-category { display: block; color: #0E68FF; font-size: 12px; font-weight: 500; line-height: 140%; border-radius: 100px; background: rgba(14, 104, 255, 0.1); padding: 6px 16px; } .post-item .post-date { color: #666666; font-size: 12px; font-weight: 500; line-height: 140%; } .post-item__excerpt { color: #4d4d4d; } .post-item.style-horizontal .post-item__wrap { display: grid; grid-template-columns: 351px 1fr; } @media (max-width: 1025px) { .post-item.style-horizontal .post-item__wrap { display: flex; flex-direction: column; } } .post-item.style-horizontal .post-item__img img { aspect-ratio: 351/257; } @media (max-width: 1025px) { .post-item.style-horizontal .post-item__img img { aspect-ratio: 351/230; } } .post-item.style-horizontal .post-item__excerpt { display: none; } .post-item.style-horizontal .post-item__cont { padding: 40px; } @media (max-width: 1025px) { .post-item.style-horizontal .post-item__cont { padding: 24px; } } .section-spacing { padding-top: var(--pt-mob, 0); padding-bottom: var(--pb-mob, 0); } @media (min-width: 1025px) { .section-spacing { padding-top: var(--pt, 0); padding-bottom: var(--pb, 0); } } .site { overflow: clip; display: flex; flex-direction: column; min-height: 100vh; } .site-main { flex-grow: 1; } @media (max-width: 1024px) { .desktop-only { display: none !important; } } @media (min-width: 1025px) { .mobile-only { display: none !important; } } .relative-block { position: relative; z-index: 2; } .flex-center { display: flex; justify-content: center; } .mt-32 { margin-top: 32px; } .title-text-column { display: flex; flex-direction: column; max-width: 1132px; justify-content: center; text-align: center; margin: 0 auto 48px auto; } @media (max-width: 1025px) { .title-text-column { margin-bottom: 24px; } } .title-text-column .headline-block { margin-bottom: 24px; } .title-text-column .text-block { max-width: 656px; margin: 0 auto; } .title-text-column .btn-block { margin-top: 32px; } @media (max-width: 1025px) { .title-text-column .btn-block { margin-top: 24px; } } .title-text-column.column-left { align-items: left; text-align: left; margin-left: 0; margin-bottom: 0; } .title-text-column.column-left .text-block { margin-left: 0; } .subheadline-block { display: flex; align-items: center; gap: 10px; color: #666666; font-size: 16px; font-style: normal; font-weight: 600; line-height: 140%; margin-bottom: 16px; } .subheadline-block::before { content: ""; display: block; width: 6px; height: 8px; background-color: #666666; } .subheadline-block_center { justify-content: center; text-align: center; margin: 0 auto 16px auto; } @media (min-width: 1026px) { .sticky-col { position: sticky; top: 100px; } } .swiper-horizontal .slider-scrollbar.swiper-scrollbar { position: relative; border-radius: 4px; background: linear-gradient(0deg, rgba(255, 255, 255, 0.84) 0%, rgba(255, 255, 255, 0.84) 100%), #000; margin-top: 24px; } @media (min-width: 1026px) { .swiper-horizontal .slider-scrollbar.swiper-scrollbar { margin-top: 16px; } } .swiper-horizontal .slider-scrollbar.swiper-scrollbar .swiper-scrollbar-drag { border-radius: 100px; background-color: #0E68FF; background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iNCIgdmlld0JveD0iMCAwIDIwIDQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxjaXJjbGUgY3g9IjIiIGN5PSIyIiByPSIyIiBmaWxsPSJ3aGl0ZSIvPgo8Y2lyY2xlIGN4PSIxMCIgY3k9IjIiIHI9IjIiIGZpbGw9IndoaXRlIi8+CjxjaXJjbGUgY3g9IjE4IiBjeT0iMiIgcj0iMiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg=="); background-repeat: no-repeat; background-position: center; height: 10px; top: -3px; } /*-------------------------------------------------------------- # Plugins --------------------------------------------------------------*/ /** * Swiper 11.0.5 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2023 Vladimir Kharlampidi * * Released under the MIT License * * Released on: November 22, 2023 */ /* FONT_START */ @font-face { font-family: "swiper-icons"; src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA"); font-weight: 400; font-style: normal; } /* FONT_END */ :root { --swiper-theme-color: #007aff; /* --swiper-preloader-color: var(--swiper-theme-color); --swiper-wrapper-transition-timing-function: initial; */ } :host { position: relative; display: block; margin-left: auto; margin-right: auto; z-index: 1; } .swiper { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; /* Fix of Webkit flickering */ z-index: 1; display: block; } .swiper-vertical > .swiper-wrapper { flex-direction: column; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial); box-sizing: content-box; } .swiper-android .swiper-slide, .swiper-ios .swiper-slide, .swiper-wrapper { transform: translate3d(0px, 0, 0); } .swiper-horizontal { touch-action: pan-y; } .swiper-vertical { touch-action: pan-x; } .swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform; display: block; } .swiper-slide-invisible-blank { visibility: hidden; } /* Auto Height */ .swiper-autoheight, .swiper-autoheight .swiper-slide { height: auto; } .swiper-autoheight .swiper-wrapper { align-items: flex-start; transition-property: transform, height; } .swiper-backface-hidden .swiper-slide { transform: translateZ(0); backface-visibility: hidden; } /* 3D Effects */ .swiper-3d.swiper-css-mode .swiper-wrapper { perspective: 1200px; } .swiper-3d .swiper-wrapper { transform-style: preserve-3d; } .swiper-3d { perspective: 1200px; } .swiper-3d .swiper-slide, .swiper-3d .swiper-cube-shadow { transform-style: preserve-3d; } /* CSS Mode */ .swiper-css-mode > .swiper-wrapper { overflow: auto; scrollbar-width: none; /* For Firefox */ -ms-overflow-style: none; /* For Internet Explorer and Edge */ } .swiper-css-mode > .swiper-wrapper::-webkit-scrollbar { display: none; } .swiper-css-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: start start; } .swiper-css-mode.swiper-horizontal > .swiper-wrapper { scroll-snap-type: x mandatory; } .swiper-css-mode.swiper-vertical > .swiper-wrapper { scroll-snap-type: y mandatory; } .swiper-css-mode.swiper-free-mode > .swiper-wrapper { scroll-snap-type: none; } .swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: none; } .swiper-css-mode.swiper-centered > .swiper-wrapper::before { content: ""; flex-shrink: 0; order: 9999; } .swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide { scroll-snap-align: center center; scroll-snap-stop: always; } .swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child { margin-inline-start: var(--swiper-centered-offset-before); } .swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before { height: 100%; min-height: 1px; width: var(--swiper-centered-offset-after); } .swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child { margin-block-start: var(--swiper-centered-offset-before); } .swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before { width: 100%; min-width: 1px; height: var(--swiper-centered-offset-after); } /* Slide styles start */ /* 3D Shadows */ .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-slide-shadow-bottom { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } .swiper-3d .swiper-slide-shadow { background: rgba(0, 0, 0, 0.15); } .swiper-3d .swiper-slide-shadow-left { background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-right { background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-top { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-bottom { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; transform-origin: 50%; box-sizing: border-box; border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color)); border-radius: 50%; border-top-color: transparent; } .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader, .swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader { animation: swiper-preloader-spin 1s infinite linear; } .swiper-lazy-preloader-white { --swiper-preloader-color: #fff; } .swiper-lazy-preloader-black { --swiper-preloader-color: #000; } @keyframes swiper-preloader-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Slide styles end */ .swiper-virtual .swiper-slide { -webkit-backface-visibility: hidden; transform: translateZ(0); } .swiper-virtual.swiper-css-mode .swiper-wrapper::after { content: ""; position: absolute; left: 0; top: 0; pointer-events: none; } .swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after { height: 1px; width: var(--swiper-virtual-size); } .swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after { width: 1px; height: var(--swiper-virtual-size); } :root { --swiper-navigation-size: 44px; /* --swiper-navigation-top-offset: 50%; --swiper-navigation-sides-offset: 10px; --swiper-navigation-color: var(--swiper-theme-color); */ } .swiper-button-prev, .swiper-button-next { position: absolute; top: var(--swiper-navigation-top-offset, 50%); width: calc(var(--swiper-navigation-size) / 44 * 27); height: var(--swiper-navigation-size); margin-top: calc(0px - var(--swiper-navigation-size) / 2); z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--swiper-navigation-color, var(--swiper-theme-color)); } .swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled { opacity: 0.35; cursor: auto; pointer-events: none; } .swiper-button-prev.swiper-button-hidden, .swiper-button-next.swiper-button-hidden { opacity: 0; cursor: auto; pointer-events: none; } .swiper-navigation-disabled .swiper-button-prev, .swiper-navigation-disabled .swiper-button-next { display: none !important; } .swiper-button-prev svg, .swiper-button-next svg { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; transform-origin: center; } .swiper-rtl .swiper-button-prev svg, .swiper-rtl .swiper-button-next svg { transform: rotate(180deg); } .swiper-button-prev, .swiper-rtl .swiper-button-next { left: var(--swiper-navigation-sides-offset, 10px); right: auto; } .swiper-button-next, .swiper-rtl .swiper-button-prev { right: var(--swiper-navigation-sides-offset, 10px); left: auto; } .swiper-button-lock { display: none; } /* Navigation font start */ .swiper-button-prev:after, .swiper-button-next:after { font-family: swiper-icons; font-size: var(--swiper-navigation-size); text-transform: none !important; letter-spacing: 0; font-variant: initial; line-height: 1; } .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after { content: "prev"; } .swiper-button-next, .swiper-rtl .swiper-button-prev { right: var(--swiper-navigation-sides-offset, 10px); left: auto; } .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after { content: "next"; } /* Navigation font end */ :root { /* --swiper-pagination-color: var(--swiper-theme-color); --swiper-pagination-left: auto; --swiper-pagination-right: 8px; --swiper-pagination-bottom: 8px; --swiper-pagination-top: auto; --swiper-pagination-fraction-color: inherit; --swiper-pagination-progressbar-bg-color: rgba(0,0,0,0.25); --swiper-pagination-progressbar-size: 4px; --swiper-pagination-bullet-size: 8px; --swiper-pagination-bullet-width: 8px; --swiper-pagination-bullet-height: 8px; --swiper-pagination-bullet-border-radius: 50%; --swiper-pagination-bullet-inactive-color: #000; --swiper-pagination-bullet-inactive-opacity: 0.2; --swiper-pagination-bullet-opacity: 1; --swiper-pagination-bullet-horizontal-gap: 4px; --swiper-pagination-bullet-vertical-gap: 6px; */ } .swiper-pagination { position: absolute; text-align: center; transition: 300ms opacity; transform: translate3d(0, 0, 0); z-index: 10; } .swiper-pagination.swiper-pagination-hidden { opacity: 0; } .swiper-pagination-disabled > .swiper-pagination, .swiper-pagination.swiper-pagination-disabled { display: none !important; } /* Common Styles */ .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal { bottom: var(--swiper-pagination-bottom, 8px); top: var(--swiper-pagination-top, auto); left: 0; width: 100%; } /* Bullets */ .swiper-pagination-bullets-dynamic { overflow: hidden; font-size: 0; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transform: scale(0.33); position: relative; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { transform: scale(0.33); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { transform: scale(0.33); } .swiper-pagination-bullet { width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px)); height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px)); display: inline-block; border-radius: var(--swiper-pagination-bullet-border-radius, 50%); background: var(--swiper-pagination-bullet-inactive-color, #000); opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2); } button.swiper-pagination-bullet { border: none; margin: 0; padding: 0; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer; } .swiper-pagination-bullet:only-child { display: none !important; } .swiper-pagination-bullet-active { opacity: var(--swiper-pagination-bullet-opacity, 1); background: var(--swiper-pagination-color, var(--swiper-theme-color)); } .swiper-vertical > .swiper-pagination-bullets, .swiper-pagination-vertical.swiper-pagination-bullets { right: var(--swiper-pagination-right, 8px); left: var(--swiper-pagination-left, auto); top: 50%; transform: translate3d(0px, -50%, 0); } .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet { margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0; display: block; } .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { top: 50%; transform: translateY(-50%); width: 8px; } .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display: inline-block; transition: 200ms transform, 200ms top; } .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px); } .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { left: 50%; transform: translateX(-50%); white-space: nowrap; } .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms transform, 200ms left; } .swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms transform, 200ms right; } /* Fraction */ .swiper-pagination-fraction { color: var(--swiper-pagination-fraction-color, inherit); } /* Progress */ .swiper-pagination-progressbar { background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25)); position: absolute; } .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: var(--swiper-pagination-color, var(--swiper-theme-color)); position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: scale(0); transform-origin: left top; } .swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { transform-origin: right top; } .swiper-horizontal > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite { width: 100%; height: var(--swiper-pagination-progressbar-size, 4px); left: 0; top: 0; } .swiper-vertical > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite { width: var(--swiper-pagination-progressbar-size, 4px); height: 100%; left: 0; top: 0; } .swiper-pagination-lock { display: none; } :root { /* --swiper-scrollbar-border-radius: 10px; --swiper-scrollbar-top: auto; --swiper-scrollbar-bottom: 4px; --swiper-scrollbar-left: auto; --swiper-scrollbar-right: 4px; --swiper-scrollbar-sides-offset: 1%; --swiper-scrollbar-bg-color: rgba(0, 0, 0, 0.1); --swiper-scrollbar-drag-bg-color: rgba(0, 0, 0, 0.5); --swiper-scrollbar-size: 4px; */ } .swiper-scrollbar { border-radius: var(--swiper-scrollbar-border-radius, 10px); position: relative; touch-action: none; background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, 0.1)); } .swiper-scrollbar-disabled > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-disabled { display: none !important; } .swiper-horizontal > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal { position: absolute; left: var(--swiper-scrollbar-sides-offset, 1%); bottom: var(--swiper-scrollbar-bottom, 4px); top: var(--swiper-scrollbar-top, auto); z-index: 50; height: var(--swiper-scrollbar-size, 4px); width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%)); } .swiper-vertical > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-vertical { position: absolute; left: var(--swiper-scrollbar-left, auto); right: var(--swiper-scrollbar-right, 4px); top: var(--swiper-scrollbar-sides-offset, 1%); z-index: 50; width: var(--swiper-scrollbar-size, 4px); height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%)); } .swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, 0.5)); border-radius: var(--swiper-scrollbar-border-radius, 10px); left: 0; top: 0; } .swiper-scrollbar-cursor-drag { cursor: move; } .swiper-scrollbar-lock { display: none; } /* Zoom container styles start */ .swiper-zoom-container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; text-align: center; } .swiper-zoom-container > img, .swiper-zoom-container > svg, .swiper-zoom-container > canvas { max-width: 100%; max-height: 100%; -o-object-fit: contain; object-fit: contain; } /* Zoom container styles end */ .swiper-slide-zoomed { cursor: move; touch-action: none; } /* a11y */ .swiper .swiper-notification { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000; } .swiper-free-mode > .swiper-wrapper { transition-timing-function: ease-out; margin: 0 auto; } .swiper-grid > .swiper-wrapper { flex-wrap: wrap; } .swiper-grid-column > .swiper-wrapper { flex-wrap: wrap; flex-direction: column; } .swiper-fade.swiper-free-mode .swiper-slide { transition-timing-function: ease-out; } .swiper-fade .swiper-slide { pointer-events: none; transition-property: opacity; } .swiper-fade .swiper-slide .swiper-slide { pointer-events: none; } .swiper-fade .swiper-slide-active { pointer-events: auto; } .swiper-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-cube { overflow: visible; } .swiper-cube .swiper-slide { pointer-events: none; backface-visibility: hidden; z-index: 1; visibility: hidden; transform-origin: 0 0; width: 100%; height: 100%; } .swiper-cube .swiper-slide .swiper-slide { pointer-events: none; } .swiper-cube.swiper-rtl .swiper-slide { transform-origin: 100% 0; } .swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-next, .swiper-cube .swiper-slide-prev { pointer-events: auto; visibility: visible; } .swiper-cube .swiper-cube-shadow { position: absolute; left: 0; bottom: 0px; width: 100%; height: 100%; opacity: 0.6; z-index: 0; } .swiper-cube .swiper-cube-shadow:before { content: ""; background: #000; position: absolute; left: 0; top: 0; bottom: 0; right: 0; filter: blur(50px); } .swiper-cube .swiper-slide-next + .swiper-slide { pointer-events: auto; visibility: visible; } /* Cube slide shadows start */ .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right { z-index: 0; backface-visibility: hidden; } /* Cube slide shadows end */ .swiper-flip { overflow: visible; } .swiper-flip .swiper-slide { pointer-events: none; backface-visibility: hidden; z-index: 1; } .swiper-flip .swiper-slide .swiper-slide { pointer-events: none; } .swiper-flip .swiper-slide-active, .swiper-flip .swiper-slide-active .swiper-slide-active { pointer-events: auto; } /* Flip slide shadows start */ .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top, .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom, .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left, .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right { z-index: 0; backface-visibility: hidden; } /* Flip slide shadows end */ .swiper-creative .swiper-slide { backface-visibility: hidden; overflow: hidden; transition-property: transform, opacity, height; } .swiper-cards { overflow: visible; } .swiper-cards .swiper-slide { transform-origin: center bottom; backface-visibility: hidden; overflow: hidden; } [data-aos][data-aos][data-aos-duration="50"], body[data-aos-duration="50"] [data-aos] { transition-duration: 50ms; } [data-aos][data-aos][data-aos-delay="50"], body[data-aos-delay="50"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="50"].aos-animate, body[data-aos-delay="50"] [data-aos].aos-animate { transition-delay: 50ms; } [data-aos][data-aos][data-aos-duration="100"], body[data-aos-duration="100"] [data-aos] { transition-duration: 0.1s; } [data-aos][data-aos][data-aos-delay="100"], body[data-aos-delay="100"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="100"].aos-animate, body[data-aos-delay="100"] [data-aos].aos-animate { transition-delay: 0.1s; } [data-aos][data-aos][data-aos-duration="150"], body[data-aos-duration="150"] [data-aos] { transition-duration: 0.15s; } [data-aos][data-aos][data-aos-delay="150"], body[data-aos-delay="150"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="150"].aos-animate, body[data-aos-delay="150"] [data-aos].aos-animate { transition-delay: 0.15s; } [data-aos][data-aos][data-aos-duration="200"], body[data-aos-duration="200"] [data-aos] { transition-duration: 0.2s; } [data-aos][data-aos][data-aos-delay="200"], body[data-aos-delay="200"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="200"].aos-animate, body[data-aos-delay="200"] [data-aos].aos-animate { transition-delay: 0.2s; } [data-aos][data-aos][data-aos-duration="250"], body[data-aos-duration="250"] [data-aos] { transition-duration: 0.25s; } [data-aos][data-aos][data-aos-delay="250"], body[data-aos-delay="250"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="250"].aos-animate, body[data-aos-delay="250"] [data-aos].aos-animate { transition-delay: 0.25s; } [data-aos][data-aos][data-aos-duration="300"], body[data-aos-duration="300"] [data-aos] { transition-duration: 0.3s; } [data-aos][data-aos][data-aos-delay="300"], body[data-aos-delay="300"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="300"].aos-animate, body[data-aos-delay="300"] [data-aos].aos-animate { transition-delay: 0.3s; } [data-aos][data-aos][data-aos-duration="350"], body[data-aos-duration="350"] [data-aos] { transition-duration: 0.35s; } [data-aos][data-aos][data-aos-delay="350"], body[data-aos-delay="350"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="350"].aos-animate, body[data-aos-delay="350"] [data-aos].aos-animate { transition-delay: 0.35s; } [data-aos][data-aos][data-aos-duration="400"], body[data-aos-duration="400"] [data-aos] { transition-duration: 0.4s; } [data-aos][data-aos][data-aos-delay="400"], body[data-aos-delay="400"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="400"].aos-animate, body[data-aos-delay="400"] [data-aos].aos-animate { transition-delay: 0.4s; } [data-aos][data-aos][data-aos-duration="450"], body[data-aos-duration="450"] [data-aos] { transition-duration: 0.45s; } [data-aos][data-aos][data-aos-delay="450"], body[data-aos-delay="450"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="450"].aos-animate, body[data-aos-delay="450"] [data-aos].aos-animate { transition-delay: 0.45s; } [data-aos][data-aos][data-aos-duration="500"], body[data-aos-duration="500"] [data-aos] { transition-duration: 0.5s; } [data-aos][data-aos][data-aos-delay="500"], body[data-aos-delay="500"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="500"].aos-animate, body[data-aos-delay="500"] [data-aos].aos-animate { transition-delay: 0.5s; } [data-aos][data-aos][data-aos-duration="550"], body[data-aos-duration="550"] [data-aos] { transition-duration: 0.55s; } [data-aos][data-aos][data-aos-delay="550"], body[data-aos-delay="550"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="550"].aos-animate, body[data-aos-delay="550"] [data-aos].aos-animate { transition-delay: 0.55s; } [data-aos][data-aos][data-aos-duration="600"], body[data-aos-duration="600"] [data-aos] { transition-duration: 0.6s; } [data-aos][data-aos][data-aos-delay="600"], body[data-aos-delay="600"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="600"].aos-animate, body[data-aos-delay="600"] [data-aos].aos-animate { transition-delay: 0.6s; } [data-aos][data-aos][data-aos-duration="650"], body[data-aos-duration="650"] [data-aos] { transition-duration: 0.65s; } [data-aos][data-aos][data-aos-delay="650"], body[data-aos-delay="650"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="650"].aos-animate, body[data-aos-delay="650"] [data-aos].aos-animate { transition-delay: 0.65s; } [data-aos][data-aos][data-aos-duration="700"], body[data-aos-duration="700"] [data-aos] { transition-duration: 0.7s; } [data-aos][data-aos][data-aos-delay="700"], body[data-aos-delay="700"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="700"].aos-animate, body[data-aos-delay="700"] [data-aos].aos-animate { transition-delay: 0.7s; } [data-aos][data-aos][data-aos-duration="750"], body[data-aos-duration="750"] [data-aos] { transition-duration: 0.75s; } [data-aos][data-aos][data-aos-delay="750"], body[data-aos-delay="750"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="750"].aos-animate, body[data-aos-delay="750"] [data-aos].aos-animate { transition-delay: 0.75s; } [data-aos][data-aos][data-aos-duration="800"], body[data-aos-duration="800"] [data-aos] { transition-duration: 0.8s; } [data-aos][data-aos][data-aos-delay="800"], body[data-aos-delay="800"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="800"].aos-animate, body[data-aos-delay="800"] [data-aos].aos-animate { transition-delay: 0.8s; } [data-aos][data-aos][data-aos-duration="850"], body[data-aos-duration="850"] [data-aos] { transition-duration: 0.85s; } [data-aos][data-aos][data-aos-delay="850"], body[data-aos-delay="850"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="850"].aos-animate, body[data-aos-delay="850"] [data-aos].aos-animate { transition-delay: 0.85s; } [data-aos][data-aos][data-aos-duration="900"], body[data-aos-duration="900"] [data-aos] { transition-duration: 0.9s; } [data-aos][data-aos][data-aos-delay="900"], body[data-aos-delay="900"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="900"].aos-animate, body[data-aos-delay="900"] [data-aos].aos-animate { transition-delay: 0.9s; } [data-aos][data-aos][data-aos-duration="950"], body[data-aos-duration="950"] [data-aos] { transition-duration: 0.95s; } [data-aos][data-aos][data-aos-delay="950"], body[data-aos-delay="950"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="950"].aos-animate, body[data-aos-delay="950"] [data-aos].aos-animate { transition-delay: 0.95s; } [data-aos][data-aos][data-aos-duration="1000"], body[data-aos-duration="1000"] [data-aos] { transition-duration: 1s; } [data-aos][data-aos][data-aos-delay="1000"], body[data-aos-delay="1000"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="1000"].aos-animate, body[data-aos-delay="1000"] [data-aos].aos-animate { transition-delay: 1s; } [data-aos][data-aos][data-aos-duration="1050"], body[data-aos-duration="1050"] [data-aos] { transition-duration: 1.05s; } [data-aos][data-aos][data-aos-delay="1050"], body[data-aos-delay="1050"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="1050"].aos-animate, body[data-aos-delay="1050"] [data-aos].aos-animate { transition-delay: 1.05s; } [data-aos][data-aos][data-aos-duration="1100"], body[data-aos-duration="1100"] [data-aos] { transition-duration: 1.1s; } [data-aos][data-aos][data-aos-delay="1100"], body[data-aos-delay="1100"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="1100"].aos-animate, body[data-aos-delay="1100"] [data-aos].aos-animate { transition-delay: 1.1s; } [data-aos][data-aos][data-aos-duration="1150"], body[data-aos-duration="1150"] [data-aos] { transition-duration: 1.15s; } [data-aos][data-aos][data-aos-delay="1150"], body[data-aos-delay="1150"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="1150"].aos-animate, body[data-aos-delay="1150"] [data-aos].aos-animate { transition-delay: 1.15s; } [data-aos][data-aos][data-aos-duration="1200"], body[data-aos-duration="1200"] [data-aos] { transition-duration: 1.2s; } [data-aos][data-aos][data-aos-delay="1200"], body[data-aos-delay="1200"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="1200"].aos-animate, body[data-aos-delay="1200"] [data-aos].aos-animate { transition-delay: 1.2s; } [data-aos][data-aos][data-aos-duration="1250"], body[data-aos-duration="1250"] [data-aos] { transition-duration: 1.25s; } [data-aos][data-aos][data-aos-delay="1250"], body[data-aos-delay="1250"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="1250"].aos-animate, body[data-aos-delay="1250"] [data-aos].aos-animate { transition-delay: 1.25s; } [data-aos][data-aos][data-aos-duration="1300"], body[data-aos-duration="1300"] [data-aos] { transition-duration: 1.3s; } [data-aos][data-aos][data-aos-delay="1300"], body[data-aos-delay="1300"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="1300"].aos-animate, body[data-aos-delay="1300"] [data-aos].aos-animate { transition-delay: 1.3s; } [data-aos][data-aos][data-aos-duration="1350"], body[data-aos-duration="1350"] [data-aos] { transition-duration: 1.35s; } [data-aos][data-aos][data-aos-delay="1350"], body[data-aos-delay="1350"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="1350"].aos-animate, body[data-aos-delay="1350"] [data-aos].aos-animate { transition-delay: 1.35s; } [data-aos][data-aos][data-aos-duration="1400"], body[data-aos-duration="1400"] [data-aos] { transition-duration: 1.4s; } [data-aos][data-aos][data-aos-delay="1400"], body[data-aos-delay="1400"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="1400"].aos-animate, body[data-aos-delay="1400"] [data-aos].aos-animate { transition-delay: 1.4s; } [data-aos][data-aos][data-aos-duration="1450"], body[data-aos-duration="1450"] [data-aos] { transition-duration: 1.45s; } [data-aos][data-aos][data-aos-delay="1450"], body[data-aos-delay="1450"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="1450"].aos-animate, body[data-aos-delay="1450"] [data-aos].aos-animate { transition-delay: 1.45s; } [data-aos][data-aos][data-aos-duration="1500"], body[data-aos-duration="1500"] [data-aos] { transition-duration: 1.5s; } [data-aos][data-aos][data-aos-delay="1500"], body[data-aos-delay="1500"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="1500"].aos-animate, body[data-aos-delay="1500"] [data-aos].aos-animate { transition-delay: 1.5s; } [data-aos][data-aos][data-aos-duration="1550"], body[data-aos-duration="1550"] [data-aos] { transition-duration: 1.55s; } [data-aos][data-aos][data-aos-delay="1550"], body[data-aos-delay="1550"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="1550"].aos-animate, body[data-aos-delay="1550"] [data-aos].aos-animate { transition-delay: 1.55s; } [data-aos][data-aos][data-aos-duration="1600"], body[data-aos-duration="1600"] [data-aos] { transition-duration: 1.6s; } [data-aos][data-aos][data-aos-delay="1600"], body[data-aos-delay="1600"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="1600"].aos-animate, body[data-aos-delay="1600"] [data-aos].aos-animate { transition-delay: 1.6s; } [data-aos][data-aos][data-aos-duration="1650"], body[data-aos-duration="1650"] [data-aos] { transition-duration: 1.65s; } [data-aos][data-aos][data-aos-delay="1650"], body[data-aos-delay="1650"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="1650"].aos-animate, body[data-aos-delay="1650"] [data-aos].aos-animate { transition-delay: 1.65s; } [data-aos][data-aos][data-aos-duration="1700"], body[data-aos-duration="1700"] [data-aos] { transition-duration: 1.7s; } [data-aos][data-aos][data-aos-delay="1700"], body[data-aos-delay="1700"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="1700"].aos-animate, body[data-aos-delay="1700"] [data-aos].aos-animate { transition-delay: 1.7s; } [data-aos][data-aos][data-aos-duration="1750"], body[data-aos-duration="1750"] [data-aos] { transition-duration: 1.75s; } [data-aos][data-aos][data-aos-delay="1750"], body[data-aos-delay="1750"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="1750"].aos-animate, body[data-aos-delay="1750"] [data-aos].aos-animate { transition-delay: 1.75s; } [data-aos][data-aos][data-aos-duration="1800"], body[data-aos-duration="1800"] [data-aos] { transition-duration: 1.8s; } [data-aos][data-aos][data-aos-delay="1800"], body[data-aos-delay="1800"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="1800"].aos-animate, body[data-aos-delay="1800"] [data-aos].aos-animate { transition-delay: 1.8s; } [data-aos][data-aos][data-aos-duration="1850"], body[data-aos-duration="1850"] [data-aos] { transition-duration: 1.85s; } [data-aos][data-aos][data-aos-delay="1850"], body[data-aos-delay="1850"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="1850"].aos-animate, body[data-aos-delay="1850"] [data-aos].aos-animate { transition-delay: 1.85s; } [data-aos][data-aos][data-aos-duration="1900"], body[data-aos-duration="1900"] [data-aos] { transition-duration: 1.9s; } [data-aos][data-aos][data-aos-delay="1900"], body[data-aos-delay="1900"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="1900"].aos-animate, body[data-aos-delay="1900"] [data-aos].aos-animate { transition-delay: 1.9s; } [data-aos][data-aos][data-aos-duration="1950"], body[data-aos-duration="1950"] [data-aos] { transition-duration: 1.95s; } [data-aos][data-aos][data-aos-delay="1950"], body[data-aos-delay="1950"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="1950"].aos-animate, body[data-aos-delay="1950"] [data-aos].aos-animate { transition-delay: 1.95s; } [data-aos][data-aos][data-aos-duration="2000"], body[data-aos-duration="2000"] [data-aos] { transition-duration: 2s; } [data-aos][data-aos][data-aos-delay="2000"], body[data-aos-delay="2000"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="2000"].aos-animate, body[data-aos-delay="2000"] [data-aos].aos-animate { transition-delay: 2s; } [data-aos][data-aos][data-aos-duration="2050"], body[data-aos-duration="2050"] [data-aos] { transition-duration: 2.05s; } [data-aos][data-aos][data-aos-delay="2050"], body[data-aos-delay="2050"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="2050"].aos-animate, body[data-aos-delay="2050"] [data-aos].aos-animate { transition-delay: 2.05s; } [data-aos][data-aos][data-aos-duration="2100"], body[data-aos-duration="2100"] [data-aos] { transition-duration: 2.1s; } [data-aos][data-aos][data-aos-delay="2100"], body[data-aos-delay="2100"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="2100"].aos-animate, body[data-aos-delay="2100"] [data-aos].aos-animate { transition-delay: 2.1s; } [data-aos][data-aos][data-aos-duration="2150"], body[data-aos-duration="2150"] [data-aos] { transition-duration: 2.15s; } [data-aos][data-aos][data-aos-delay="2150"], body[data-aos-delay="2150"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="2150"].aos-animate, body[data-aos-delay="2150"] [data-aos].aos-animate { transition-delay: 2.15s; } [data-aos][data-aos][data-aos-duration="2200"], body[data-aos-duration="2200"] [data-aos] { transition-duration: 2.2s; } [data-aos][data-aos][data-aos-delay="2200"], body[data-aos-delay="2200"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="2200"].aos-animate, body[data-aos-delay="2200"] [data-aos].aos-animate { transition-delay: 2.2s; } [data-aos][data-aos][data-aos-duration="2250"], body[data-aos-duration="2250"] [data-aos] { transition-duration: 2.25s; } [data-aos][data-aos][data-aos-delay="2250"], body[data-aos-delay="2250"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="2250"].aos-animate, body[data-aos-delay="2250"] [data-aos].aos-animate { transition-delay: 2.25s; } [data-aos][data-aos][data-aos-duration="2300"], body[data-aos-duration="2300"] [data-aos] { transition-duration: 2.3s; } [data-aos][data-aos][data-aos-delay="2300"], body[data-aos-delay="2300"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="2300"].aos-animate, body[data-aos-delay="2300"] [data-aos].aos-animate { transition-delay: 2.3s; } [data-aos][data-aos][data-aos-duration="2350"], body[data-aos-duration="2350"] [data-aos] { transition-duration: 2.35s; } [data-aos][data-aos][data-aos-delay="2350"], body[data-aos-delay="2350"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="2350"].aos-animate, body[data-aos-delay="2350"] [data-aos].aos-animate { transition-delay: 2.35s; } [data-aos][data-aos][data-aos-duration="2400"], body[data-aos-duration="2400"] [data-aos] { transition-duration: 2.4s; } [data-aos][data-aos][data-aos-delay="2400"], body[data-aos-delay="2400"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="2400"].aos-animate, body[data-aos-delay="2400"] [data-aos].aos-animate { transition-delay: 2.4s; } [data-aos][data-aos][data-aos-duration="2450"], body[data-aos-duration="2450"] [data-aos] { transition-duration: 2.45s; } [data-aos][data-aos][data-aos-delay="2450"], body[data-aos-delay="2450"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="2450"].aos-animate, body[data-aos-delay="2450"] [data-aos].aos-animate { transition-delay: 2.45s; } [data-aos][data-aos][data-aos-duration="2500"], body[data-aos-duration="2500"] [data-aos] { transition-duration: 2.5s; } [data-aos][data-aos][data-aos-delay="2500"], body[data-aos-delay="2500"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="2500"].aos-animate, body[data-aos-delay="2500"] [data-aos].aos-animate { transition-delay: 2.5s; } [data-aos][data-aos][data-aos-duration="2550"], body[data-aos-duration="2550"] [data-aos] { transition-duration: 2.55s; } [data-aos][data-aos][data-aos-delay="2550"], body[data-aos-delay="2550"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="2550"].aos-animate, body[data-aos-delay="2550"] [data-aos].aos-animate { transition-delay: 2.55s; } [data-aos][data-aos][data-aos-duration="2600"], body[data-aos-duration="2600"] [data-aos] { transition-duration: 2.6s; } [data-aos][data-aos][data-aos-delay="2600"], body[data-aos-delay="2600"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="2600"].aos-animate, body[data-aos-delay="2600"] [data-aos].aos-animate { transition-delay: 2.6s; } [data-aos][data-aos][data-aos-duration="2650"], body[data-aos-duration="2650"] [data-aos] { transition-duration: 2.65s; } [data-aos][data-aos][data-aos-delay="2650"], body[data-aos-delay="2650"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="2650"].aos-animate, body[data-aos-delay="2650"] [data-aos].aos-animate { transition-delay: 2.65s; } [data-aos][data-aos][data-aos-duration="2700"], body[data-aos-duration="2700"] [data-aos] { transition-duration: 2.7s; } [data-aos][data-aos][data-aos-delay="2700"], body[data-aos-delay="2700"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="2700"].aos-animate, body[data-aos-delay="2700"] [data-aos].aos-animate { transition-delay: 2.7s; } [data-aos][data-aos][data-aos-duration="2750"], body[data-aos-duration="2750"] [data-aos] { transition-duration: 2.75s; } [data-aos][data-aos][data-aos-delay="2750"], body[data-aos-delay="2750"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="2750"].aos-animate, body[data-aos-delay="2750"] [data-aos].aos-animate { transition-delay: 2.75s; } [data-aos][data-aos][data-aos-duration="2800"], body[data-aos-duration="2800"] [data-aos] { transition-duration: 2.8s; } [data-aos][data-aos][data-aos-delay="2800"], body[data-aos-delay="2800"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="2800"].aos-animate, body[data-aos-delay="2800"] [data-aos].aos-animate { transition-delay: 2.8s; } [data-aos][data-aos][data-aos-duration="2850"], body[data-aos-duration="2850"] [data-aos] { transition-duration: 2.85s; } [data-aos][data-aos][data-aos-delay="2850"], body[data-aos-delay="2850"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="2850"].aos-animate, body[data-aos-delay="2850"] [data-aos].aos-animate { transition-delay: 2.85s; } [data-aos][data-aos][data-aos-duration="2900"], body[data-aos-duration="2900"] [data-aos] { transition-duration: 2.9s; } [data-aos][data-aos][data-aos-delay="2900"], body[data-aos-delay="2900"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="2900"].aos-animate, body[data-aos-delay="2900"] [data-aos].aos-animate { transition-delay: 2.9s; } [data-aos][data-aos][data-aos-duration="2950"], body[data-aos-duration="2950"] [data-aos] { transition-duration: 2.95s; } [data-aos][data-aos][data-aos-delay="2950"], body[data-aos-delay="2950"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="2950"].aos-animate, body[data-aos-delay="2950"] [data-aos].aos-animate { transition-delay: 2.95s; } [data-aos][data-aos][data-aos-duration="3000"], body[data-aos-duration="3000"] [data-aos] { transition-duration: 3s; } [data-aos][data-aos][data-aos-delay="3000"], body[data-aos-delay="3000"] [data-aos] { transition-delay: 0s; } [data-aos][data-aos][data-aos-delay="3000"].aos-animate, body[data-aos-delay="3000"] [data-aos].aos-animate { transition-delay: 3s; } [data-aos] { pointer-events: none; } [data-aos].aos-animate { pointer-events: auto; } [data-aos][data-aos][data-aos-easing=linear], body[data-aos-easing=linear] [data-aos] { transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75); } [data-aos][data-aos][data-aos-easing=ease], body[data-aos-easing=ease] [data-aos] { transition-timing-function: ease; } [data-aos][data-aos][data-aos-easing=ease-in], body[data-aos-easing=ease-in] [data-aos] { transition-timing-function: ease-in; } [data-aos][data-aos][data-aos-easing=ease-out], body[data-aos-easing=ease-out] [data-aos] { transition-timing-function: ease-out; } [data-aos][data-aos][data-aos-easing=ease-in-out], body[data-aos-easing=ease-in-out] [data-aos] { transition-timing-function: ease-in-out; } [data-aos][data-aos][data-aos-easing=ease-in-back], body[data-aos-easing=ease-in-back] [data-aos] { transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045); } [data-aos][data-aos][data-aos-easing=ease-out-back], body[data-aos-easing=ease-out-back] [data-aos] { transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); } [data-aos][data-aos][data-aos-easing=ease-in-out-back], body[data-aos-easing=ease-in-out-back] [data-aos] { transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); } [data-aos][data-aos][data-aos-easing=ease-in-sine], body[data-aos-easing=ease-in-sine] [data-aos] { transition-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715); } [data-aos][data-aos][data-aos-easing=ease-out-sine], body[data-aos-easing=ease-out-sine] [data-aos] { transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); } [data-aos][data-aos][data-aos-easing=ease-in-out-sine], body[data-aos-easing=ease-in-out-sine] [data-aos] { transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95); } [data-aos][data-aos][data-aos-easing=ease-in-quad], body[data-aos-easing=ease-in-quad] [data-aos] { transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); } [data-aos][data-aos][data-aos-easing=ease-out-quad], body[data-aos-easing=ease-out-quad] [data-aos] { transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } [data-aos][data-aos][data-aos-easing=ease-in-out-quad], body[data-aos-easing=ease-in-out-quad] [data-aos] { transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } [data-aos][data-aos][data-aos-easing=ease-in-cubic], body[data-aos-easing=ease-in-cubic] [data-aos] { transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); } [data-aos][data-aos][data-aos-easing=ease-out-cubic], body[data-aos-easing=ease-out-cubic] [data-aos] { transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } [data-aos][data-aos][data-aos-easing=ease-in-out-cubic], body[data-aos-easing=ease-in-out-cubic] [data-aos] { transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } [data-aos][data-aos][data-aos-easing=ease-in-quart], body[data-aos-easing=ease-in-quart] [data-aos] { transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); } [data-aos][data-aos][data-aos-easing=ease-out-quart], body[data-aos-easing=ease-out-quart] [data-aos] { transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } [data-aos][data-aos][data-aos-easing=ease-in-out-quart], body[data-aos-easing=ease-in-out-quart] [data-aos] { transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); } @media screen { html:not(.no-js) [data-aos^=fade][data-aos^=fade] { opacity: 0; transition-property: opacity, transform; } html:not(.no-js) [data-aos^=fade][data-aos^=fade].aos-animate { opacity: 1; transform: none; } html:not(.no-js) [data-aos=fade-up] { transform: translate3d(0, 100px, 0); } html:not(.no-js) [data-aos=fade-down] { transform: translate3d(0, -100px, 0); } html:not(.no-js) [data-aos=fade-right] { transform: translate3d(-100px, 0, 0); } html:not(.no-js) [data-aos=fade-left] { transform: translate3d(100px, 0, 0); } html:not(.no-js) [data-aos=fade-up-right] { transform: translate3d(-100px, 100px, 0); } html:not(.no-js) [data-aos=fade-up-left] { transform: translate3d(100px, 100px, 0); } html:not(.no-js) [data-aos=fade-down-right] { transform: translate3d(-100px, -100px, 0); } html:not(.no-js) [data-aos=fade-down-left] { transform: translate3d(100px, -100px, 0); } html:not(.no-js) [data-aos^=zoom][data-aos^=zoom] { opacity: 0; transition-property: opacity, transform; } html:not(.no-js) [data-aos^=zoom][data-aos^=zoom].aos-animate { opacity: 1; transform: translateZ(0) scale(1); } html:not(.no-js) [data-aos=zoom-in] { transform: scale(0.6); } html:not(.no-js) [data-aos=zoom-in-up] { transform: translate3d(0, 100px, 0) scale(0.6); } html:not(.no-js) [data-aos=zoom-in-down] { transform: translate3d(0, -100px, 0) scale(0.6); } html:not(.no-js) [data-aos=zoom-in-right] { transform: translate3d(-100px, 0, 0) scale(0.6); } html:not(.no-js) [data-aos=zoom-in-left] { transform: translate3d(100px, 0, 0) scale(0.6); } html:not(.no-js) [data-aos=zoom-out] { transform: scale(1.2); } html:not(.no-js) [data-aos=zoom-out-up] { transform: translate3d(0, 100px, 0) scale(1.2); } html:not(.no-js) [data-aos=zoom-out-down] { transform: translate3d(0, -100px, 0) scale(1.2); } html:not(.no-js) [data-aos=zoom-out-right] { transform: translate3d(-100px, 0, 0) scale(1.2); } html:not(.no-js) [data-aos=zoom-out-left] { transform: translate3d(100px, 0, 0) scale(1.2); } html:not(.no-js) [data-aos^=slide][data-aos^=slide] { transition-property: transform; visibility: hidden; } html:not(.no-js) [data-aos^=slide][data-aos^=slide].aos-animate { visibility: visible; transform: translateZ(0); } html:not(.no-js) [data-aos=slide-up] { transform: translate3d(0, 100%, 0); } html:not(.no-js) [data-aos=slide-down] { transform: translate3d(0, -100%, 0); } html:not(.no-js) [data-aos=slide-right] { transform: translate3d(-100%, 0, 0); } html:not(.no-js) [data-aos=slide-left] { transform: translate3d(100%, 0, 0); } html:not(.no-js) [data-aos^=flip][data-aos^=flip] { backface-visibility: hidden; transition-property: transform; } html:not(.no-js) [data-aos=flip-left] { transform: perspective(2500px) rotateY(-100deg); } html:not(.no-js) [data-aos=flip-left].aos-animate { transform: perspective(2500px) rotateY(0); } html:not(.no-js) [data-aos=flip-right] { transform: perspective(2500px) rotateY(100deg); } html:not(.no-js) [data-aos=flip-right].aos-animate { transform: perspective(2500px) rotateY(0); } html:not(.no-js) [data-aos=flip-up] { transform: perspective(2500px) rotateX(-100deg); } html:not(.no-js) [data-aos=flip-up].aos-animate { transform: perspective(2500px) rotateX(0); } html:not(.no-js) [data-aos=flip-down] { transform: perspective(2500px) rotateX(100deg); } html:not(.no-js) [data-aos=flip-down].aos-animate { transform: perspective(2500px) rotateX(0); } } body.compensate-for-scrollbar { overflow: hidden; } .fancybox-active { height: auto; } .fancybox-is-hidden { left: -9999px; margin: 0; position: absolute !important; top: -9999px; visibility: hidden; } .fancybox-container { -webkit-backface-visibility: hidden; height: 100%; left: 0; outline: none; position: fixed; -webkit-tap-highlight-color: transparent; top: 0; touch-action: manipulation; transform: translateZ(0); width: 100%; z-index: 99992; } .fancybox-container * { box-sizing: border-box; } .fancybox-bg, .fancybox-inner, .fancybox-outer, .fancybox-stage { bottom: 0; left: 0; position: absolute; right: 0; top: 0; } .fancybox-outer { -webkit-overflow-scrolling: touch; overflow-y: auto; } .fancybox-bg { background: #1e1e1e; opacity: 0; transition-duration: inherit; transition-property: opacity; transition-timing-function: cubic-bezier(0.47, 0, 0.74, 0.71); } .fancybox-is-open .fancybox-bg { opacity: 0.9; transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); } .fancybox-caption, .fancybox-infobar, .fancybox-navigation .fancybox-button, .fancybox-toolbar { direction: ltr; opacity: 0; position: absolute; transition: opacity 0.25s ease, visibility 0s ease 0.25s; visibility: hidden; z-index: 99997; } .fancybox-show-caption .fancybox-caption, .fancybox-show-infobar .fancybox-infobar, .fancybox-show-nav .fancybox-navigation .fancybox-button, .fancybox-show-toolbar .fancybox-toolbar { opacity: 1; transition: opacity 0.25s ease 0s, visibility 0s ease 0s; visibility: visible; } .fancybox-infobar { color: #ccc; font-size: 13px; -webkit-font-smoothing: subpixel-antialiased; height: 44px; left: 0; line-height: 44px; min-width: 44px; mix-blend-mode: difference; padding: 0 10px; pointer-events: none; top: 0; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .fancybox-toolbar { right: 0; top: 0; } .fancybox-stage { direction: ltr; overflow: visible; transform: translateZ(0); z-index: 99994; } .fancybox-is-open .fancybox-stage { overflow: hidden; } .fancybox-slide { -webkit-backface-visibility: hidden; display: none; height: 100%; left: 0; outline: none; overflow: auto; -webkit-overflow-scrolling: touch; padding: 44px; position: absolute; text-align: center; top: 0; transition-property: transform, opacity; white-space: normal; width: 100%; z-index: 99994; } .fancybox-slide:before { content: ""; display: inline-block; font-size: 0; height: 100%; vertical-align: middle; width: 0; } .fancybox-is-sliding .fancybox-slide, .fancybox-slide--current, .fancybox-slide--next, .fancybox-slide--previous { display: block; } .fancybox-slide--image { overflow: hidden; padding: 44px 0; } .fancybox-slide--image:before { display: none; } .fancybox-slide--html { padding: 6px; } .fancybox-content { background: #fff; display: inline-block; margin: 0; max-width: 100%; overflow: auto; -webkit-overflow-scrolling: touch; padding: 44px; position: relative; text-align: left; vertical-align: middle; } .fancybox-slide--image .fancybox-content { animation-timing-function: cubic-bezier(0.5, 0, 0.14, 1); -webkit-backface-visibility: hidden; background: transparent; background-repeat: no-repeat; background-size: 100% 100%; left: 0; max-width: none; overflow: visible; padding: 0; position: absolute; top: 0; transform-origin: top left; transition-property: transform, opacity; -webkit-user-select: none; -moz-user-select: none; user-select: none; z-index: 99995; } .fancybox-can-zoomOut .fancybox-content { cursor: zoom-out; } .fancybox-can-zoomIn .fancybox-content { cursor: zoom-in; } .fancybox-can-pan .fancybox-content, .fancybox-can-swipe .fancybox-content { cursor: grab; } .fancybox-is-grabbing .fancybox-content { cursor: grabbing; } .fancybox-container [data-selectable=true] { cursor: text; } .fancybox-image, .fancybox-spaceball { background: transparent; border: 0; height: 100%; left: 0; margin: 0; max-height: none; max-width: none; padding: 0; position: absolute; top: 0; -webkit-user-select: none; -moz-user-select: none; user-select: none; width: 100%; } .fancybox-spaceball { z-index: 1; } .fancybox-slide--iframe .fancybox-content, .fancybox-slide--map .fancybox-content, .fancybox-slide--pdf .fancybox-content, .fancybox-slide--video .fancybox-content { height: 100%; overflow: visible; padding: 0; width: 100%; } .fancybox-slide--video .fancybox-content { background: #000; } .fancybox-slide--map .fancybox-content { background: #e5e3df; } .fancybox-slide--iframe .fancybox-content { background: #fff; } .fancybox-iframe, .fancybox-video { background: transparent; border: 0; display: block; height: 100%; margin: 0; overflow: hidden; padding: 0; width: 100%; } .fancybox-iframe { left: 0; position: absolute; top: 0; } .fancybox-error { background: #fff; cursor: default; max-width: 400px; padding: 40px; width: 100%; } .fancybox-error p { color: #444; font-size: 16px; line-height: 20px; margin: 0; padding: 0; } .fancybox-button { background: rgba(30, 30, 30, 0.6); border: 0; border-radius: 0; box-shadow: none; cursor: pointer; display: inline-block; height: 44px; margin: 0; padding: 10px; position: relative; transition: color 0.2s; vertical-align: top; visibility: inherit; width: 44px; } .fancybox-button, .fancybox-button:link, .fancybox-button:visited { color: #ccc; } .fancybox-button:hover { color: #fff; } .fancybox-button:focus { outline: none; } .fancybox-button.fancybox-focus { outline: 1px dotted; } .fancybox-button[disabled], .fancybox-button[disabled]:hover { color: #888; cursor: default; outline: none; } .fancybox-button div { height: 100%; } .fancybox-button svg { display: block; height: 100%; overflow: visible; position: relative; width: 100%; } .fancybox-button svg path { fill: currentColor; stroke-width: 0; } .fancybox-button--fsenter svg:nth-child(2), .fancybox-button--fsexit svg:first-child, .fancybox-button--pause svg:first-child, .fancybox-button--play svg:nth-child(2) { display: none; } .fancybox-progress { background: #ff5268; height: 2px; left: 0; position: absolute; right: 0; top: 0; transform: scaleX(0); transform-origin: 0; transition-property: transform; transition-timing-function: linear; z-index: 99998; } .fancybox-close-small { background: transparent; border: 0; border-radius: 0; color: #ccc; cursor: pointer; opacity: 0.8; padding: 8px; position: absolute; right: -12px; top: -44px; z-index: 401; } .fancybox-close-small:hover { color: #fff; opacity: 1; } .fancybox-slide--html .fancybox-close-small { color: currentColor; padding: 10px; right: 0; top: 0; } .fancybox-slide--image.fancybox-is-scaling .fancybox-content { overflow: hidden; } .fancybox-is-scaling .fancybox-close-small, .fancybox-is-zoomable.fancybox-can-pan .fancybox-close-small { display: none; } .fancybox-navigation .fancybox-button { background-clip: content-box; height: 100px; opacity: 0; position: absolute; top: calc(50% - 50px); width: 70px; } .fancybox-navigation .fancybox-button div { padding: 7px; } .fancybox-navigation .fancybox-button--arrow_left { left: 0; left: env(safe-area-inset-left); padding: 31px 26px 31px 6px; } .fancybox-navigation .fancybox-button--arrow_right { padding: 31px 6px 31px 26px; right: 0; right: env(safe-area-inset-right); } .fancybox-caption { background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.15) 65%, rgba(0, 0, 0, 0.075) 75.5%, rgba(0, 0, 0, 0.037) 82.85%, rgba(0, 0, 0, 0.019) 88%, transparent); bottom: 0; color: #eee; font-size: 14px; font-weight: 400; left: 0; line-height: 1.5; padding: 75px 44px 25px; pointer-events: none; right: 0; text-align: center; z-index: 99996; } @supports (padding: max(0px)) { .fancybox-caption { padding: 75px max(44px, env(safe-area-inset-right)) max(25px, env(safe-area-inset-bottom)) max(44px, env(safe-area-inset-left)); } } .fancybox-caption--separate { margin-top: -50px; } .fancybox-caption__body { max-height: 50vh; overflow: auto; pointer-events: all; } .fancybox-caption a, .fancybox-caption a:link, .fancybox-caption a:visited { color: #ccc; text-decoration: none; } .fancybox-caption a:hover { color: #fff; text-decoration: underline; } .fancybox-loading { animation: a 1s linear infinite; background: transparent; border: 4px solid #888; border-bottom-color: #fff; border-radius: 50%; height: 50px; left: 50%; margin: -25px 0 0 -25px; opacity: 0.7; padding: 0; position: absolute; top: 50%; width: 50px; z-index: 99999; } @keyframes a { to { transform: rotate(1turn); } } .fancybox-animated { transition-timing-function: cubic-bezier(0, 0, 0.25, 1); } .fancybox-fx-slide.fancybox-slide--previous { opacity: 0; transform: translate3d(-100%, 0, 0); } .fancybox-fx-slide.fancybox-slide--next { opacity: 0; transform: translate3d(100%, 0, 0); } .fancybox-fx-slide.fancybox-slide--current { opacity: 1; transform: translateZ(0); } .fancybox-fx-fade.fancybox-slide--next, .fancybox-fx-fade.fancybox-slide--previous { opacity: 0; transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } .fancybox-fx-fade.fancybox-slide--current { opacity: 1; } .fancybox-fx-zoom-in-out.fancybox-slide--previous { opacity: 0; transform: scale3d(1.5, 1.5, 1.5); } .fancybox-fx-zoom-in-out.fancybox-slide--next { opacity: 0; transform: scale3d(0.5, 0.5, 0.5); } .fancybox-fx-zoom-in-out.fancybox-slide--current { opacity: 1; transform: scaleX(1); } .fancybox-fx-rotate.fancybox-slide--previous { opacity: 0; transform: rotate(-1turn); } .fancybox-fx-rotate.fancybox-slide--next { opacity: 0; transform: rotate(1turn); } .fancybox-fx-rotate.fancybox-slide--current { opacity: 1; transform: rotate(0deg); } .fancybox-fx-circular.fancybox-slide--previous { opacity: 0; transform: scale3d(0, 0, 0) translate3d(-100%, 0, 0); } .fancybox-fx-circular.fancybox-slide--next { opacity: 0; transform: scale3d(0, 0, 0) translate3d(100%, 0, 0); } .fancybox-fx-circular.fancybox-slide--current { opacity: 1; transform: scaleX(1) translateZ(0); } .fancybox-fx-tube.fancybox-slide--previous { transform: translate3d(-100%, 0, 0) scale(0.1) skew(-10deg); } .fancybox-fx-tube.fancybox-slide--next { transform: translate3d(100%, 0, 0) scale(0.1) skew(10deg); } .fancybox-fx-tube.fancybox-slide--current { transform: translateZ(0) scale(1); } @media (max-height: 576px) { .fancybox-slide { padding-left: 6px; padding-right: 6px; } .fancybox-slide--image { padding: 6px 0; } .fancybox-close-small { right: -6px; } .fancybox-slide--image .fancybox-close-small { background: #4e4e4e; color: #f2f4f6; height: 36px; opacity: 1; padding: 6px; right: 0; top: 0; width: 36px; } .fancybox-caption { padding-left: 12px; padding-right: 12px; } @supports (padding: max(0px)) { .fancybox-caption { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); } } } .fancybox-share { background: #f4f4f4; border-radius: 3px; max-width: 90%; padding: 30px; text-align: center; } .fancybox-share h1 { color: #222; font-size: 35px; font-weight: 700; margin: 0 0 20px; } .fancybox-share p { margin: 0; padding: 0; } .fancybox-share__button { border: 0; border-radius: 3px; display: inline-block; font-size: 14px; font-weight: 700; line-height: 40px; margin: 0 5px 10px; min-width: 130px; padding: 0 15px; text-decoration: none; transition: all 0.2s; -webkit-user-select: none; -moz-user-select: none; user-select: none; white-space: nowrap; } .fancybox-share__button:link, .fancybox-share__button:visited { color: #fff; } .fancybox-share__button:hover { text-decoration: none; } .fancybox-share__button--fb { background: #3b5998; } .fancybox-share__button--fb:hover { background: #344e86; } .fancybox-share__button--pt { background: #bd081d; } .fancybox-share__button--pt:hover { background: #aa0719; } .fancybox-share__button--tw { background: #1da1f2; } .fancybox-share__button--tw:hover { background: #0d95e8; } .fancybox-share__button svg { height: 25px; margin-right: 7px; position: relative; top: -1px; vertical-align: middle; width: 25px; } .fancybox-share__button svg path { fill: #fff; } .fancybox-share__input { background: transparent; border: 0; border-bottom: 1px solid #d7d7d7; border-radius: 0; color: #5d5b5b; font-size: 14px; margin: 10px 0 0; outline: none; padding: 10px 15px; width: 100%; } .fancybox-thumbs { background: #ddd; bottom: 0; display: none; margin: 0; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; padding: 2px 2px 4px; position: absolute; right: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); top: 0; width: 212px; z-index: 99995; } .fancybox-thumbs-x { overflow-x: auto; overflow-y: hidden; } .fancybox-show-thumbs .fancybox-thumbs { display: block; } .fancybox-show-thumbs .fancybox-inner { right: 212px; } .fancybox-thumbs__list { font-size: 0; height: 100%; list-style: none; margin: 0; overflow-x: hidden; overflow-y: auto; padding: 0; position: absolute; position: relative; white-space: nowrap; width: 100%; } .fancybox-thumbs-x .fancybox-thumbs__list { overflow: hidden; } .fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar { width: 7px; } .fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar-track { background: #fff; border-radius: 10px; box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); } .fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 10px; } .fancybox-thumbs__list a { backface-visibility: hidden; background-color: rgba(0, 0, 0, 0.1); background-position: 50%; background-repeat: no-repeat; background-size: cover; cursor: pointer; float: left; height: 75px; margin: 2px; max-height: calc(100% - 8px); max-width: calc(50% - 4px); outline: none; overflow: hidden; padding: 0; position: relative; -webkit-tap-highlight-color: transparent; width: 100px; } .fancybox-thumbs__list a:before { border: 6px solid #ff5268; bottom: 0; content: ""; left: 0; opacity: 0; position: absolute; right: 0; top: 0; transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); z-index: 99991; } .fancybox-thumbs__list a:focus:before { opacity: 0.5; } .fancybox-thumbs__list a.fancybox-thumbs-active:before { opacity: 1; } @media (max-width: 576px) { .fancybox-thumbs { width: 110px; } .fancybox-show-thumbs .fancybox-inner { right: 110px; } .fancybox-thumbs__list a { max-width: calc(100% - 10px); } } /* Jetpack infinite scroll --------------------------------------------- */ /* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */ .infinite-scroll .posts-navigation, .infinite-scroll.neverending .site-footer { display: none; } /* Re-display the Theme Footer when Infinite Scroll has reached its end. */ .infinity-end.neverending .site-footer { display: block; } /*-------------------------------------------------------------- # Utilities --------------------------------------------------------------*/ /* Accessibility --------------------------------------------- */ /* Text meant only for screen readers. */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; } .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; clip-path: none; color: #21759b; display: block; font-size: 0.875rem; font-weight: 700; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; } /* Do not show the outline on the skip link target. */ #primary[tabindex="-1"]:focus { outline: 0; } .skip-link { position: absolute; left: -999px; top: auto; width: 1px; height: 1px; overflow: hidden; text-decoration: none; display: block; } .skip-link:focus { position: relative; z-index: 200; left: 0; width: auto; height: auto; padding: 0 4px; background: #0E68FF; color: #ffffff; z-index: 1000; outline-offset: -2px; outline: 1px solid #ffffff; } /* Alignments --------------------------------------------- */ .alignleft { /*rtl:ignore*/ float: left; /*rtl:ignore*/ margin-right: 1.5em; margin-bottom: 1.5em; } .alignright { /*rtl:ignore*/ float: right; /*rtl:ignore*/ margin-left: 1.5em; margin-bottom: 1.5em; } .aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; margin-bottom: 1.5em; }/*# sourceMappingURL=style.css.map */ /* site.css */ /* Small additions on top of the original poosch-relaunch theme CSS (theme/style.css stays untouched). */ .honors__agenturmarkt { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border-radius: 100px; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; } .st-dark .honors__agenturmarkt { color: #000; background: rgba(255,255,255,.7); } .st-light .honors__agenturmarkt { color: #fff; border: 1px solid rgba(255,255,255,.4); } .case-logo__text { font-size: 20px; font-weight: 700; color: #000; line-height: 1.2; } .case-quote .case-logo__text { color: #fff; } /* Subpage hero: same component as the homepage hero, without the logo/rating bar */ .hero-banner_sub { padding-bottom: 120px; } @media (max-width: 1025px) { .hero-banner_sub { padding-bottom: 64px; } } /* Branchen grid (model-card styling, laid out as grid instead of slider) */ .industry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .industry-grid .model-card { height: auto; } @media (max-width: 1025px) { .industry-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .industry-grid { grid-template-columns: 1fr; } } /* Contact page: form inside the hero component */ .hero-banner_form { padding-top: 180px; } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } .contact-grid__info .headline_default { margin-bottom: 24px; } .contact-grid__info .text-block { margin: 0 0 32px 0; max-width: 560px; } .contact-grid__info .icon-list-plate__item span { text-align: left; } .contact-grid__form { background: #fff; border-radius: 20px; padding: 40px; } .contact-direct { margin-top: 24px; font-weight: 500; } .contact-direct a { color: #0E68FF; } .form-select { height: 56px; width: 100%; border: 1px solid #d1dce4; border-radius: 12px; padding: 16px; font: inherit; color: #091722; background: #fff; } .form-alert { background: #fff1ea; color: #d24a00; padding: 12px 16px; border-radius: 12px; font-weight: 500; } .wpcf7-not-valid-tip, .consent-error { color: #d24a00; } .consent-error { display: block; font-size: 12px; margin-top: 6px; } .wpcf7-acceptance a { color: #0E68FF; } .hp { position: absolute; left: -9999px; } .form-grid .btn { border: 0; cursor: pointer; font: inherit; } @media (max-width: 1025px) { .hero-banner_form { padding-top: 130px; } .contact-grid { grid-template-columns: 1fr; gap: 32px; } .contact-grid__form { padding: 24px 16px; } } /* Simple pages (Impressum, Datenschutz, Danke, 404) */ .hero-banner_simple { padding-bottom: 96px; } .legal-text { max-width: 760px; gap: 12px; } .legal-text h2 { font-size: 22px; color: #000; margin-top: 24px; } .legal-text a { color: #0E68FF; } /* Press list */ .press-list { display: grid; gap: 10px; max-width: 1000px; margin: 0 auto; } .press-list__item { display: grid; grid-template-columns: 220px 1fr 24px; gap: 24px; align-items: center; background: #fff; padding: 24px 32px; text-decoration: none; color: #000; border-radius: 20px; transition: transform .25s ease; } .press-list__item:hover { transform: translateY(-2px); } .press-list__src { color: #0E68FF; font-weight: 600; font-size: 14px; } .press-list__title { font-weight: 600; font-size: 18px; line-height: 1.35; } @media (max-width: 768px) { .press-list__item { grid-template-columns: 1fr; gap: 8px; padding: 20px; } .press-list__arrow { display: none; } } /* Service sections: plates with image icons */ .icon-list-plate__item .icon img { width: 28px; height: 28px; } /* home.css */ /* UX refinements for the homepage (on top of original theme) */ /* Circle logos: logos must fit inside the round plate (EPLAN/erfi were clipped) */ .circle-logos .logos-item { overflow: hidden; padding: 14px; } .circle-logos .logos-item img { width: 100%; height: 100%; object-fit: contain; } /* Case quote cards: readable white text on office photos */ .case-block .case-quote__img::before { background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.7) 100%); } .case-block .case-quote__text { font-size: 17px; line-height: 1.45; } .case-logo__text { letter-spacing: -.01em; } /* Logo wall: hover affordance without fake "Ergebnis" badge */ .logoplate-item img { transition: filter .25s ease, opacity .25s ease; } /* Press cards: portrait images should keep faces in frame */ .post-item__img img { object-position: center 30%; } /* Testimonial number labels: avoid orphaned short label */ .case-slide__cont .case-number span { white-space: nowrap; } /* Modell (mobile): the original pins the section and floats the card over the headline. Stack instead: compact circle on top, active card below, both visible. */ @media (max-width: 1025px) { .model-circle .title-text-column { margin-bottom: 0; } .model-circle__wrap { margin-top: 24px; display: flex; flex-direction: column; align-items: center; gap: 16px; } .model-circle__nav { order: 1; width: 220px; max-width: 60vw; margin-top: 8px !important; transform: none !important; } .model-circle__nav svg { width: 100%; height: auto; } .model-circle__cards { order: 2; position: relative; top: auto !important; max-width: 420px; width: 100%; } } @media (max-width: 768px) { .circle-logos .logos-item { width: 56px; height: 56px; min-width: 56px; padding: 10px; } .circle-logos .logos-item:not(:first-child) { margin-left: -18px; } } /* calm.css */ /* ===== Calm consulting layer (26.10.) ===================================== Same theme, quieter voice: sentence case, medium weights, ink-dark primary, brand blue only as accent (numbers, links, active states). */ :root { --ink: #0b0f17; --ink-2: #3a3f47; --mute: #8b9097; --line: #e4e6ea; --blue: #0E68FF; } /* Headlines */ h1, .headline-block_h1 > *, .hero-banner h1 { text-transform: none; font-weight: 500; color: var(--ink); letter-spacing: -0.03em; line-height: 1.08; } @media (min-width: 1026px) { h1, .headline-block_h1 > * { font-size: 60px; letter-spacing: -0.035em; } } h1 .h-muted { color: var(--mute); } h2, .headline-block_h2 > * { text-transform: none; font-weight: 500; color: var(--ink); letter-spacing: -0.025em; line-height: 1.12; } @media (min-width: 1026px) { h2, .headline-block_h2 > * { font-size: 44px; } } h2 strong, .headline-block_h2 > * strong { color: var(--mute); font-weight: 500; } h3 { font-weight: 500; letter-spacing: -0.01em; } .cta-banner h2 { font-size: inherit; } @media (min-width: 1026px) { .cta-banner .headline_h1 h2 { font-size: 52px; } } /* Section intro text: a bit larger, calmer grey */ .title-text-column .text-block p { color: var(--ink-2); font-size: 17px; line-height: 1.55; } .subheadline-block { color: var(--ink-2); font-weight: 500; letter-spacing: 0; } .hero-banner .subheadline-block { font-size: 18px; font-weight: 500; color: var(--ink-2); } /* Hero */ .hero-banner_calm .text-block p { font-size: 19px; line-height: 1.55; color: var(--ink-2); max-width: 640px; margin: 0 auto; } .hero-actions { display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; } .link-quiet { color: var(--ink); font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; } .link-quiet:hover { color: var(--blue); } /* Buttons: ink instead of loud blue */ .btn { font-weight: 500; } .btn_primary { background-color: var(--ink); } .btn_primary:hover, .btn_primary:focus, .btn_primary:focus-visible, .btn_primary:active { background-color: #1d2533; } .btn_primary:hover .btn__icon svg path, .btn_primary:focus .btn__icon svg path { stroke: var(--ink); } .site-header .header-btn { font-weight: 500; } /* Marquee: keep the statement, lower the volume */ .line-text { padding: 56px 0; } .line-text__content { font-weight: 500; text-transform: none; letter-spacing: -0.04em; font-size: 104px; color: var(--ink); animation-duration: 45s; } .line-text .text1 .line-text__content { -webkit-text-stroke: 1px #b9bdc4; } .line-text .text2 .line-text__content { color: var(--ink); } @media (max-width: 768px) { .line-text__content { font-size: 56px; } .line-text { padding: 28px 0; } } /* Numbers: medium weight, blue as the one accent */ .text-numbers__list .number-item__number { font-weight: 500; letter-spacing: -0.03em; } .case-numbers__item span, .case-number span { font-weight: 500; letter-spacing: -0.02em; } .process-card__num { text-transform: none; font-weight: 400; } /* Tags: neutral chips */ .case-tags__item { background: #eef0f3; color: var(--ink-2); font-weight: 500; } .process-card__info .info-tags__item { font-weight: 500; } /* Pain list: neutral markers instead of red alarm icons */ .icon-list-plate__item .icon svg path:first-child { fill: #eef0f3; } .icon-list-plate__item .icon svg path + path { stroke: #6b7078; } .icon-list-plate__item span { color: var(--ink) !important; } /* FAQ / misc */ .faq-accordion h3, .accordion-list__title { font-weight: 500; } /* ===== Mechanik ===================================================== */ .mech-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 56px; } .mech-panel { background: #fff; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; } .mech-visual { background: #f6f7f9; margin: 8px 8px 0; border-radius: 12px; height: 300px; display: flex; align-items: center; justify-content: center; padding: 24px; position: relative; overflow: hidden; } .mech-copy { padding: 28px 28px 32px; } .mech-copy h3 { font-size: 21px; line-height: 1.3; color: var(--ink); margin-bottom: 10px; } .mech-copy p { color: var(--ink-2); line-height: 1.55; } .mech-result { text-align: center; max-width: 760px; margin: 48px auto 0; font-size: 20px; line-height: 1.5; color: var(--ink-2); } .mech-result strong { color: var(--ink); font-weight: 500; } @media (max-width: 1025px) { .mech-grid { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; } .mech-visual { height: 260px; } } .sk { display: block; height: 7px; border-radius: 4px; background: #e3e6ea; margin-top: 6px; width: 85%; } .sk_w80 { width: 70%; height: 8px; } /* SERP */ .serp { width: 100%; max-width: 330px; background: #fff; border-radius: 10px; box-shadow: 0 1px 2px rgba(11,15,23,.06), 0 8px 24px rgba(11,15,23,.06); padding: 14px; font-size: 12px; } .serp__bar { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 100px; padding: 6px 12px; margin-bottom: 10px; } .serp__g { font-weight: 700; color: var(--blue); } .serp__q { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .serp__list { list-style: none; margin: 0; padding: 0; counter-reset: pos; } .serp__row { counter-increment: pos; display: grid; grid-template-columns: 18px 16px 1fr; align-items: center; gap: 8px; padding: 7px 6px; border-radius: 8px; } .serp__pos::before { content: counter(pos); color: var(--mute); font-size: 11px; } .serp__fav { width: 14px; height: 14px; border-radius: 50%; background: #dfe2e6; } .serp__txt { display: flex; flex-direction: column; min-width: 0; } .serp__txt b { font-weight: 500; color: var(--ink-2); font-size: 11.5px; } .serp__txt i { font-style: normal; color: var(--mute); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .serp__row_you { background: rgba(14,104,255,.06); } .serp__row_you .serp__fav_you { background: var(--blue); } .serp__row_you b { color: var(--ink); } .serp__row_you i { color: var(--blue); } .serp__row_you { grid-template-columns: 18px 16px 1fr auto; } .serp__up { font-size: 10.5px; color: #12805c; background: rgba(18,128,92,.08); border-radius: 100px; padding: 2px 7px; white-space: nowrap; } .mech-panel_google .serp__row_you { animation: serp-glow 4s ease-in-out infinite; } @keyframes serp-glow { 0%,100% { box-shadow: 0 0 0 0 rgba(14,104,255,0); } 50% { box-shadow: 0 0 0 3px rgba(14,104,255,.12); } } /* Chat */ .chat { width: 100%; max-width: 330px; display: flex; flex-direction: column; gap: 10px; font-size: 12px; line-height: 1.45; } .chat__q { align-self: flex-end; background: var(--ink); color: #fff; border-radius: 14px 14px 4px 14px; padding: 9px 12px; max-width: 85%; } .chat__a { display: flex; gap: 8px; align-items: flex-start; } .chat__dot { width: 20px; height: 20px; border-radius: 50%; background: conic-gradient(from 0deg, #0b0f17, #6b7280, #0b0f17); flex: 0 0 auto; margin-top: 2px; } .chat__body { background: #fff; border-radius: 4px 14px 14px 14px; padding: 10px 12px; box-shadow: 0 1px 2px rgba(11,15,23,.06), 0 8px 24px rgba(11,15,23,.06); color: var(--ink-2); } .chat__body p { margin: 0 0 6px; } .chat__hit { background: rgba(14,104,255,.07); border-radius: 6px; padding: 5px 7px; color: var(--ink); } .chat__hit b { color: var(--blue); font-weight: 500; } .chat__src { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; } .chat__src span { border: 1px solid var(--line); border-radius: 100px; padding: 2px 8px; font-size: 10.5px; color: var(--mute); } .chat__src span:first-child { color: var(--blue); border-color: rgba(14,104,255,.3); } /* Press stack */ .press { position: relative; width: 100%; max-width: 300px; height: 210px; } .press__card { position: absolute; left: 0; right: 0; background: #fff; border-radius: 10px; box-shadow: 0 1px 2px rgba(11,15,23,.06), 0 8px 24px rgba(11,15,23,.07); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; font-size: 12px; } .press__card_3 { top: 0; transform: scale(.9); opacity: .6; } .press__card_2 { top: 30px; transform: scale(.95); opacity: .85; } .press__card_1 { top: 66px; min-height: 130px; } .press__type { color: var(--blue); font-weight: 500; font-size: 11px; } .press__src { color: var(--mute); font-size: 11px; } .press__title { color: var(--ink); font-size: 15px; line-height: 1.35; font-weight: 500; margin-top: 4px; } @media (prefers-reduced-motion: reduce) { .mech-panel_google .serp__row_you { animation: none; } } /* Case studies: muted markers */ .case-block .case-list.case-list_1 li::before { filter: grayscale(1) opacity(.5); } .case-block .case-quote__text { font-weight: 500; } .case-block .case-title h3, .case-block h3 { font-weight: 500; } .case-block .case-logo__text, .case-logo__text { font-weight: 500; } .case-numbers__item span { color: var(--ink); } .case-numbers__item span svg path { stroke: var(--blue); } .text-numbers__list .number-item__number { color: var(--ink); } .case-slide__cont h3 { font-weight: 500; } .post-item__title > * { font-weight: 500; } .cta-banner .headline_h1 h2 { line-height: 1.12; } @media (min-width: 1026px) { .cta-banner .headline_h1 h2 { font-size: 46px; } } .circle-logos__text, .row-plate blockquote p { font-weight: 500; } @media (max-width: 1025px) { h1, .headline-block_h1 > *, .hero-banner h1 { font-size: 36px; } .cta-banner .headline_h1 h2 { font-size: 30px; } h2, .headline-block_h2 > * { font-size: 30px; } .hero-banner_calm .text-block p { font-size: 17px; } } .footer-info .btn_primary-white .btn__icon { background: var(--ink); } @media (max-width: 1025px) { .cta-banner { padding: 96px 0 72px; } } /* cx.css */ /* ===== POOSCH consulting system (27.10.) =================================== Sharp, quiet, editorial-business: hairlines instead of boxes, 2px radius, left-aligned headings on a 12-col grid, ink + one blue accent. */ :root{ --ink:#0b0f17; --ink-2:#3d434c; --mute:#7d838c; --line:#dfe2e6; --line-2:#c9cdd3; --tint:#f5f6f7; --blue:#0E68FF; --r:2px; --wrap:1240px; } /* ---------- Header: flat bar (global) ---------- */ .site-header{top:0;max-width:none;padding:0;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:border-color .25s} .site-header.fixed{border-bottom-color:var(--line)} .site-header .container_min{max-width:var(--wrap);padding:0 24px} .site-header__wrap{background:transparent;border-radius:0;padding:0;height:72px;gap:32px} .site-header__logo img{filter:brightness(0) saturate(100%);height:24px;width:auto} .main-navigation>.menu>.menu-item>span>a{color:var(--ink-2);border-radius:0;padding:8px 14px;font-weight:500;font-size:15px} .main-navigation>.menu>.menu-item>span>a:hover{background:transparent;color:var(--ink)} .main-navigation ul li.current-menu-item>span a{color:var(--ink);box-shadow:inset 0 -1px 0 var(--ink)} .site-header .header-btn{background:var(--ink);color:#fff;border-radius:var(--r);padding:11px 18px;font-size:15px;font-weight:500} .site-header .header-btn svg path{stroke:#fff} .site-header .header-btn:hover,.site-header .header-btn:focus{background:#222a37;color:#fff} .site-header .header-btn:hover svg path{stroke:#fff} .site-header__cta.cta-mobile .header-btn{border-radius:var(--r)!important} .burger-icon{background:transparent;border-radius:0;width:44px;height:44px} .burger-icon span{width:22px;height:1.5px} .burger-icon span:nth-child(1){top:14px}.burger-icon span:nth-child(2){top:21px}.burger-icon span:nth-child(3){top:28px} .burger-icon[aria-expanded=true] span:nth-child(1){top:.55rem;left:.9rem} .burger-icon[aria-expanded=true] span:nth-child(3){top:1.95rem;left:.9rem} @media (max-width:1024px){.site-header__wrap{height:60px}.site-header .container_min{padding:0 16px}} /* ---------- Buttons (global) ---------- */ .btn{border-radius:var(--r);padding:14px 20px;gap:12px;font-weight:500;font-size:15px} .btn__icon{width:auto;height:auto;min-width:0;background:transparent!important;border-radius:0} .btn_primary .btn__icon svg path{stroke:#fff} .btn_primary-white .btn__icon svg path{stroke:var(--ink)} .btn_primary-white{border-radius:var(--r)} /* ---------- Footer (global) ---------- */ .site-footer{background:var(--ink)} .site-footer .btn_primary-white .btn__icon{background:transparent!important} .honors__agenturmarkt{border-radius:var(--r)!important} .site-footer .honors{display:flex!important;flex-direction:column;align-items:flex-start;gap:20px} .honors__idv{display:inline-block;flex:none;width:240px;max-width:100%;line-height:0;border-radius:8px;transition:opacity .2s} .honors__idv img{display:block;width:240px;max-width:100%;height:auto;border:0} .honors__idv:hover{opacity:.85} .honors__idv:focus-visible{outline:2px solid #0E68FF;outline-offset:4px} /* ---------- Page system (.cx) ---------- */ .cx{background:#fff;color:var(--ink)} .cx-wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px} @media (max-width:768px){.cx-wrap{padding:0 20px}} .cx-label{font-size:14px;font-weight:500;color:var(--blue);margin:0 0 20px;letter-spacing:0} .cx-h1{font-size:64px;line-height:1.04;letter-spacing:-.035em;font-weight:500;color:var(--ink);margin:0;max-width:980px;text-transform:none} .cx-h1 span{color:var(--mute);display:block} .cx-h2{font-size:40px;line-height:1.12;letter-spacing:-.025em;font-weight:500;color:var(--ink);margin:0;text-transform:none} .cx-h3{font-size:20px;line-height:1.3;letter-spacing:-.01em;font-weight:500;color:var(--ink);margin:0 0 10px} .cx-lead{font-size:18px;line-height:1.6;color:var(--ink-2);margin:0} @media (max-width:1024px){.cx-h1{font-size:44px}.cx-h2{font-size:30px}.cx-lead{font-size:17px}} @media (max-width:480px){.cx-h1{font-size:36px}} .cx-btn{display:inline-flex;align-items:center;gap:14px;background:var(--ink);color:#fff;text-decoration:none;font-weight:500;font-size:16px;padding:16px 22px;border-radius:var(--r);transition:background .2s} .cx-btn:hover{background:#222a37;color:#fff} .cx-btn svg{transition:transform .2s}.cx-btn:hover svg{transform:translateX(3px)} .cx-link{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:500;font-size:16px;border-bottom:1px solid var(--line-2);padding-bottom:3px;transition:border-color .2s,color .2s} .cx-link:hover{border-color:var(--ink)} .cx-actions{display:flex;align-items:center;gap:32px;flex-wrap:wrap} .cx-sec{padding:120px 0;border-top:1px solid var(--line)} .cx-sec_tint{background:var(--tint)} @media (max-width:768px){.cx-sec{padding:72px 0}} .cx-head{margin-bottom:64px} .cx-head__row{display:grid;grid-template-columns:7fr 5fr;gap:64px;align-items:end} .cx-head .cx-lead{max-width:460px} @media (max-width:1024px){.cx-head{margin-bottom:40px}.cx-head__row{grid-template-columns:1fr;gap:20px}} .cx-num{font-size:14px;color:var(--mute);font-variant-numeric:tabular-nums;font-weight:500} /* Hero */ .cx-hero{position:relative;padding:200px 0 0;overflow:hidden;background:#fff} .cx-hero__bg{position:absolute;inset:0;z-index:0} .cx-hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 40%;opacity:.55} .cx-hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.88) 45%,rgba(255,255,255,.2) 100%)} .cx-hero .cx-wrap{position:relative;z-index:1} .cx-hero__text{font-size:20px;line-height:1.55;color:var(--ink-2);max-width:620px;margin:32px 0 44px} .cx-facts{display:grid;grid-template-columns:repeat(4,1fr);margin:120px 0 0;border-top:1px solid var(--line-2)} .cx-facts>div{padding:28px 24px 40px 0;border-right:1px solid var(--line)} .cx-facts>div+div{padding-left:24px} .cx-facts>div:last-child{border-right:0} .cx-facts dt{font-size:32px;font-weight:500;letter-spacing:-.02em;line-height:1;margin-bottom:10px} .cx-facts dd{margin:0;color:var(--ink-2);font-size:15px;line-height:1.4} .cx-facts__rating dt{font-size:20px;line-height:1.6} .cx-facts__rating a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-2)} @media (max-width:1024px){.cx-hero{padding:130px 0 0}.cx-hero__bg::after{background:linear-gradient(180deg,rgba(255,255,255,.75),#fff 85%)}.cx-hero__text{font-size:17px;margin:24px 0 32px} .cx-facts{grid-template-columns:1fr 1fr;margin-top:64px}.cx-facts>div{padding:20px 16px 24px 0;border-bottom:1px solid var(--line)}.cx-facts>div:nth-child(2n){border-right:0;padding-left:16px}.cx-facts>div:nth-child(3){padding-left:0}.cx-facts dt{font-size:26px}} /* Logos */ .cx-logos{padding:56px 0 64px;border-top:1px solid var(--line)} .cx-logos__intro{font-size:14px;color:var(--mute);margin:0 0 28px} .cx-logos__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);border-left:1px solid var(--line);border-top:1px solid var(--line)} .cx-logos__grid li{height:104px;display:flex;align-items:center;justify-content:center;padding:24px 28px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)} .cx-logos__grid img{max-height:34px;max-width:100%;width:auto;filter:grayscale(1) contrast(.9);opacity:.6;transition:opacity .2s,filter .2s} .cx-logos__grid li:hover img{opacity:1;filter:none} @media (max-width:768px){.cx-logos__grid{grid-template-columns:repeat(3,1fr)}.cx-logos__grid li{height:76px;padding:14px}.cx-logos__grid img{max-height:24px}} /* Statement line: quieter, thin */ .cx .line-text{background:#fff;border-top:1px solid var(--line);padding:48px 0} .cx .line-text__content{font-size:88px;font-weight:400;letter-spacing:-.04em;color:var(--ink);animation-duration:60s} .cx .line-text .text1 .line-text__content{color:transparent;-webkit-text-stroke:1px #b5bac1} @media (max-width:768px){.cx .line-text__content{font-size:48px}.cx .line-text{padding:24px 0}} /* Split layout */ .cx-split{display:grid;grid-template-columns:5fr 7fr;gap:96px;align-items:start} .cx-split__l .cx-h2{margin-bottom:24px} @media (min-width:1025px){.cx-split__l{position:sticky;top:120px}} @media (max-width:1024px){.cx-split{grid-template-columns:1fr;gap:40px}} .cx-numlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)} .cx-numlist li{display:grid;grid-template-columns:56px 1fr;gap:16px;padding:26px 0;border-bottom:1px solid var(--line);font-size:20px;line-height:1.4;color:var(--ink)} .cx-numlist .cx-num{padding-top:4px} @media (max-width:768px){.cx-numlist li{font-size:17px;grid-template-columns:40px 1fr;padding:20px 0}} /* Mechanik */ .cx-mech{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink)} .cx-mech__col{padding:40px 40px 8px 0;border-right:1px solid var(--line-2)} .cx-mech__col+.cx-mech__col{padding-left:40px} .cx-mech__col:last-child{border-right:0;padding-right:0} .cx-mech__col>p:last-child{color:var(--ink-2);line-height:1.6;margin:0} .cx-mech__vis{height:270px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);margin-bottom:32px;padding:24px;overflow:hidden} .cx-mech__k{font-size:14px;color:var(--blue);font-weight:500;margin:0 0 10px} .cx-mech__result{margin:72px 0 0;padding-top:32px;border-top:1px solid var(--line-2);font-size:22px;line-height:1.5;color:var(--ink-2);max-width:820px} .cx-mech__result strong{color:var(--ink);font-weight:500} @media (max-width:1024px){.cx-mech{grid-template-columns:1fr}.cx-mech__col,.cx-mech__col+.cx-mech__col{padding:32px 0;border-right:0;border-bottom:1px solid var(--line-2)}.cx-mech__vis{height:240px}.cx-mech__result{font-size:18px;margin-top:40px}} /* square-off the mock UI too */ .cx .serp,.cx .chat__body,.cx .press__card{border-radius:4px;box-shadow:0 1px 0 rgba(11,15,23,.04),0 6px 18px rgba(11,15,23,.06)} .cx .serp__bar{border-radius:3px} .cx .serp__row{border-radius:2px} .cx .chat__q{border-radius:4px} .cx .chat__hit{border-radius:2px} .cx .chat__src span,.cx .serp__up{border-radius:2px} .cx .chat__dot{border-radius:2px;background:var(--ink)} .cx .serp__fav{border-radius:2px} /* Cases */ .cx-cases{border-top:1px solid var(--ink)} .cx-case{display:grid;grid-template-columns:4fr 8fr;gap:64px;padding:56px 0;border-bottom:1px solid var(--line-2)} .cx-case__co{font-size:20px;font-weight:500;margin:0 0 8px} .cx-case__tags{color:var(--mute);font-size:14px;margin:0} .cx-case__title{font-size:30px;line-height:1.2;letter-spacing:-.02em;font-weight:500;margin:0 0 36px;max-width:720px} .cx-case__nums{display:grid;grid-template-columns:repeat(3,1fr);margin:0 0 36px;border-top:1px solid var(--line)} .cx-case__nums>div{padding:20px 20px 0 0} .cx-case__nums>div+div{padding-left:20px;border-left:1px solid var(--line)} .cx-case__nums dt{font-size:30px;font-weight:500;letter-spacing:-.02em;color:var(--blue);line-height:1.1;margin-bottom:6px} .cx-case__nums dd{margin:0;color:var(--ink-2);font-size:14px;line-height:1.4} .cx-case__cols{display:grid;grid-template-columns:1fr 1fr;gap:40px} .cx-case__k{font-size:14px;font-weight:500;color:var(--ink);margin:0 0 10px} .cx-case__cols ul{list-style:none;margin:0;padding:0} .cx-case__cols li{color:var(--ink-2);padding:8px 0 8px 18px;position:relative;line-height:1.45;border-top:1px solid var(--line);font-size:15px} .cx-case__cols li::before{content:"";position:absolute;left:0;top:17px;width:8px;height:1px;background:var(--ink-2)} .cx-case__quote{margin:36px 0 0;padding:0 0 0 24px;border-left:1px solid var(--ink)} .cx-case__quote p{font-size:18px;line-height:1.55;color:var(--ink);margin:0 0 10px} .cx-case__quote footer{font-size:14px;color:var(--mute)} .cx-more{margin-top:40px} @media (max-width:1024px){.cx-case{grid-template-columns:1fr;gap:16px;padding:40px 0}.cx-case__title{font-size:24px;margin-bottom:24px}.cx-case__nums dt{font-size:22px}.cx-case__nums>div{padding:14px 10px 0 0}.cx-case__nums>div+div{padding-left:10px}.cx-case__cols{grid-template-columns:1fr;gap:24px}} /* Videos */ .cx-videos{display:grid;grid-template-columns:repeat(5,1fr);gap:24px} .cx-video{margin:0} .cx-video__media{position:relative;display:block;width:100%;aspect-ratio:3/4;padding:0;border:0;background:#ddd;cursor:pointer;overflow:hidden;border-radius:var(--r)} .cx-video__media img,.cx-video__media video{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.25)} .cx-video__play{position:absolute;left:14px;bottom:14px;width:40px;height:40px;background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:center;border-radius:var(--r);transition:background .2s,color .2s} .cx-video__media:hover .cx-video__play{background:var(--ink);color:#fff} .cx-video.is-playing .cx-video__play{display:none} .cx-video figcaption{padding-top:16px} .cx-video__name{font-weight:500;margin:0;font-size:16px} .cx-video__role{color:var(--mute);font-size:13px;margin:2px 0 12px;line-height:1.4} .cx-video__quote{color:var(--ink-2);font-size:14px;line-height:1.55;margin:0} @media (max-width:1024px){.cx-videos{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:62%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;margin-right:-20px}.cx-video{scroll-snap-align:start}} /* Steps */ .cx-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink)} .cx-steps li{padding:28px 32px 0 0;border-right:1px solid var(--line)} .cx-steps li+li{padding-left:32px} .cx-steps li:last-child{border-right:0} .cx-steps .cx-num{display:block;margin-bottom:48px} .cx-steps p{color:var(--ink-2);line-height:1.6;margin:0;font-size:15px} @media (max-width:1024px){.cx-steps{grid-template-columns:1fr}.cx-steps li,.cx-steps li+li{padding:24px 0;border-right:0;border-bottom:1px solid var(--line)}.cx-steps .cx-num{margin-bottom:12px}} /* About */ .cx-about{display:grid;grid-template-columns:6fr 6fr;gap:96px;align-items:center} .cx-about__img{aspect-ratio:4/5;overflow:hidden;border-radius:var(--r)} .cx-about__img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)} .cx-about__text .cx-h2{margin-bottom:24px} .cx-about__quote{margin:40px 0;padding:28px 0 0;border-top:1px solid var(--ink)} .cx-about__quote p{font-size:20px;line-height:1.5;color:var(--ink);margin:0 0 14px} .cx-about__quote footer{font-size:14px;color:var(--mute)} @media (max-width:1024px){.cx-about{grid-template-columns:1fr;gap:40px}.cx-about__img{aspect-ratio:4/3}} /* Press */ .cx-press{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)} .cx-press a{display:grid;grid-template-columns:3fr 8fr auto;gap:32px;align-items:center;padding:24px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;transition:padding .2s} .cx-press a:hover{padding-left:8px} .cx-press a:hover .cx-press__t{color:var(--blue)} .cx-press__src{font-size:14px;color:var(--mute);font-weight:500} .cx-press__t{font-size:19px;line-height:1.4;transition:color .2s} @media (max-width:768px){.cx-press a{grid-template-columns:1fr auto;gap:6px 16px}.cx-press__src{grid-column:1}.cx-press__t{grid-column:1;font-size:17px}.cx-press a svg{grid-row:1/3;grid-column:2}} /* FAQ */ .cx-faq{border-top:1px solid var(--ink)} .cx-faq__item{border-bottom:1px solid var(--line-2)} .cx-faq h3{margin:0;font-size:inherit} .cx-faq button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:24px;background:none;border:0;padding:26px 0;text-align:left;font:inherit;font-size:19px;font-weight:500;color:var(--ink);cursor:pointer} .cx-faq__ico{position:relative;width:14px;height:14px;flex:0 0 auto} .cx-faq__ico::before,.cx-faq__ico::after{content:"";position:absolute;left:0;top:6.5px;width:14px;height:1px;background:var(--ink);transition:transform .25s} .cx-faq__ico::after{transform:rotate(90deg)} .cx-faq__item.active .cx-faq__ico::after{transform:rotate(0)} .cx-faq .accordion-list__content{max-height:0;overflow:hidden;transition:max-height .3s ease} .cx-faq .accordion-list__content p{color:var(--ink-2);line-height:1.65;margin:0;padding:0 48px 28px 0;font-size:16px} @media (max-width:768px){.cx-faq button{font-size:17px;padding:20px 0}} /* Closing */ .cx-cta{position:relative;padding:140px 0;border-top:1px solid var(--line);overflow:hidden} .cx-cta__bg{position:absolute;inset:0} .cx-cta__bg img{width:100%;height:100%;object-fit:cover;opacity:.45} .cx-cta__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.85) 50%,rgba(255,255,255,.3) 100%)} .cx-cta__inner{position:relative} .cx-cta .cx-h2{font-size:52px;max-width:760px;margin-bottom:24px} .cx-cta .cx-lead{max-width:600px;margin-bottom:40px} @media (max-width:1024px){.cx-cta{padding:88px 0}.cx-cta .cx-h2{font-size:34px}} /* Footer on cx pages: no extra rounded CTA */ .cx .site-footer .honors__certificates{display:none} /* refinements */ .cx-hero__bg img{opacity:1;filter:grayscale(1) contrast(1.05)} .cx-hero__bg::after{background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.92) 38%,rgba(255,255,255,.35) 75%,rgba(255,255,255,.15) 100%)} .cx-hero{border-bottom:0} .cx-facts{background:rgba(255,255,255,.75);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} .cx-facts>div:first-child{padding-left:0} .cx-cta__bg img{opacity:1;filter:grayscale(1)} .site-footer .container{max-width:var(--wrap);padding:0 24px} .site-footer__wrap{padding:88px 0 56px} .cx-logos__grid li img[alt="Schunk"]{max-height:44px} @media (max-width:1024px){.cx-hero__bg img{object-position:70% 40%}.cx-hero__bg::after{background:linear-gradient(180deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,.7) 60%,#fff 100%)}} .cx-videos{scrollbar-width:none}.cx-videos::-webkit-scrollbar{display:none} /* ===== 27.10. b: rhythm (white / grey / black) + motion ===== */ /* Mountains: stronger */ .cx-hero{min-height:92vh;display:flex;flex-direction:column;justify-content:flex-end} .cx-hero__bg img{opacity:1;filter:grayscale(1) contrast(1.35) brightness(.92);transform:scale(1.06);transform-origin:center top;will-change:transform} .cx-hero__bg::after{background:linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.82) 34%,rgba(255,255,255,.18) 68%,rgba(255,255,255,0) 100%),linear-gradient(180deg,rgba(255,255,255,0) 70%,#fff 100%)} .cx-hero__inner{padding-bottom:8px} .cx-cta{padding:180px 0} .cx-cta__bg img{opacity:1;filter:grayscale(1) contrast(1.3) brightness(.9);transform:scale(1.1);will-change:transform} .cx-cta__bg::after{background:linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.8) 40%,rgba(255,255,255,.1) 80%)} @media (max-width:1024px){.cx-hero{min-height:0}.cx-hero__bg::after{background:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.88) 45%,#fff 100%)} .cx-cta{padding:100px 0}.cx-cta__bg::after{background:rgba(255,255,255,.8)}} /* Section backgrounds */ .cx-sec_grey{background:#f1f2f4;border-top-color:#f1f2f4} .cx-sec_dark{background:#0b0f17;color:#fff;border-top-color:#0b0f17} .cx-sec_dark .cx-h2,.cx-sec_dark .cx-h3{color:#fff} .cx-sec_dark .cx-lead,.cx-sec_dark p{color:#a9afb8} .cx-sec_dark .cx-label,.cx-sec_dark .cx-mech__k{color:#6ea2ff} .cx-sec_dark .cx-num{color:#6b727c} .cx-sec_dark .cx-mech,.cx-sec_dark .cx-steps{border-top-color:#fff} .cx-sec_dark .cx-mech__col,.cx-sec_dark .cx-steps li{border-color:#262c36} .cx-sec_dark .cx-mech__vis{background:#141a24;border-color:#262c36} .cx-sec_dark .cx-mech__result{border-top-color:#262c36;color:#a9afb8} .cx-sec_dark .cx-mech__result strong{color:#fff} .cx-sec_dark .serp p,.cx-sec_dark .chat p,.cx-sec_dark .press span{color:inherit} .cx-sec_dark .chat__body p{color:var(--ink-2)} .cx-sec_dark .chat__hit{color:var(--ink)!important} .cx-sec_dark .press__type{color:var(--blue)!important}.cx-sec_dark .press__src{color:var(--mute)!important}.cx-sec_dark .press__title{color:var(--ink)!important} .cx-sec_dark .chat__dot{background:#fff} .cx-sec_dark .chat__q{background:#2a3240} .cx-sec + .cx-sec_grey, .cx-sec_grey + .cx-sec{border-top-color:transparent} .cx-sec_grey .cx-video__media{background:#dde0e4} .cx-sec_dark + .cx-sec{border-top-color:transparent} /* ---------- Motion (only when JS present) ---------- */ @keyframes cxRise{from{opacity:0;transform:translate3d(0,28px,0)}to{opacity:1;transform:none}} .cx-line{display:block;overflow:hidden;padding-bottom:.06em} .cx-line>.cx-rise{display:block} .cx-h1 .cx-line:first-child{color:var(--mute)} .cx-h1 .cx-line_ink{color:var(--ink)} .cx-h1>span.cx-line{display:block} .cx-anim .cx-rise{opacity:0;animation:cxRise .9s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d,0ms)} .cx-anim .cx-h1 .cx-rise{animation-name:cxLine;animation-duration:1s} @keyframes cxLine{from{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:none}} /* Rules draw in from the left */ .cx-rule{position:relative;border-top-color:transparent!important} .cx-rule::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--ink);transform-origin:left;transition:transform 1.1s cubic-bezier(.6,.1,.2,1)} .cx-facts.cx-rule::before{background:var(--line-2)} .cx-sec_dark .cx-rule::before{background:#fff} .cx-anim .cx-rule:not(.is-in)::before{transform:scaleX(0)} /* Staggered children */ .cx-anim [data-io] > li,.cx-anim .cx-facts>div,.cx-anim .cx-mech__col,.cx-anim .cx-faq__item,.cx-anim .cx-case__nums>div{opacity:0;transform:translate3d(0,18px,0);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 70ms + 150ms)} .cx-anim [data-io].is-in > li,.cx-anim .is-in.cx-facts>div,.cx-anim .is-in .cx-mech__col,.cx-anim .is-in .cx-faq__item,.cx-anim .is-in.cx-case__nums>div{opacity:1;transform:none} .cx-facts>div:nth-child(2){--i:1}.cx-facts>div:nth-child(3){--i:2}.cx-facts>div:nth-child(4){--i:3} .cx-mech__col:nth-child(2){--i:2}.cx-mech__col:nth-child(3){--i:4} .cx-faq__item:nth-child(2){--i:1}.cx-faq__item:nth-child(3){--i:2}.cx-faq__item:nth-child(4){--i:3}.cx-faq__item:nth-child(5){--i:4} .cx-case__nums>div:nth-child(2){--i:1}.cx-case__nums>div:nth-child(3){--i:2} .cx-anim .cx-logos__grid>li{transform:none} .cx-anim .cx-logos__grid>li img{transition:opacity .2s,filter .2s} /* Image reveal (about) */ .cx-anim .cx-about__img{clip-path:inset(0 0 100% 0);transition:clip-path 1.2s cubic-bezier(.7,0,.2,1)} .cx-anim .cx-about__img img{transform:scale(1.12);transition:transform 1.8s cubic-bezier(.2,.7,.2,1)} .cx-anim .cx-about.is-in .cx-about__img{clip-path:inset(0 0 0 0)} .cx-anim .cx-about.is-in .cx-about__img img{transform:scale(1)} /* Mechanik graphics come alive */ .cx-anim .cx-mech .serp__row_you{transform:translate3d(0,150px,0);opacity:.4;transition:transform 1.4s cubic-bezier(.3,.8,.2,1) .7s,opacity .8s ease .7s} .cx-anim .cx-mech .serp__row:not(.serp__row_you){transition:transform 1.4s cubic-bezier(.3,.8,.2,1) .7s;transform:translate3d(0,-44px,0)} .cx-anim .cx-mech.is-in .serp__row{transform:none;opacity:1} .cx-anim .cx-mech .serp__up{opacity:0;transition:opacity .5s ease 2s} .cx-anim .cx-mech.is-in .serp__up{opacity:1} .cx-mech .serp__row_you{animation:none!important} .cx-anim .cx-mech .chat__q{opacity:0;transform:translate3d(0,10px,0);transition:all .6s ease .9s} .cx-anim .cx-mech .chat__a{opacity:0;transform:translate3d(0,10px,0);transition:all .6s ease 1.5s} .cx-anim .cx-mech .chat__hit{background-size:0% 100%;background-image:linear-gradient(rgba(14,104,255,.12),rgba(14,104,255,.12));background-repeat:no-repeat;background-color:transparent!important;transition:background-size .9s ease 2.2s} .cx-anim .cx-mech.is-in .chat__q,.cx-anim .cx-mech.is-in .chat__a{opacity:1;transform:none} .cx-anim .cx-mech.is-in .chat__hit{background-size:100% 100%} .cx-anim .cx-mech .press__card{transition:transform 1s cubic-bezier(.3,.8,.2,1),opacity 1s ease} .cx-anim .cx-mech .press__card_1{transform:translate3d(0,40px,0);opacity:0;transition-delay:1.6s} .cx-anim .cx-mech .press__card_2{transform:translate3d(0,60px,0) scale(.95);opacity:0;transition-delay:1.3s} .cx-anim .cx-mech .press__card_3{transform:translate3d(0,80px,0) scale(.9);opacity:0;transition-delay:1s} .cx-anim .cx-mech.is-in .press__card_1{transform:none;opacity:1} .cx-anim .cx-mech.is-in .press__card_2{transform:scale(.95);opacity:.85} .cx-anim .cx-mech.is-in .press__card_3{transform:scale(.9);opacity:.6} /* Hover details */ .cx-steps li{transition:background .3s} .cx-case__title{transition:color .2s} .cx-video__media img{transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .4s} .cx-video__media:hover img{transform:scale(1.04);filter:none} @media (prefers-reduced-motion:reduce){ .cx-anim .cx-rise,.cx-anim [data-io] > li,.cx-anim .cx-facts>div,.cx-anim .cx-mech__col,.cx-anim .cx-faq__item,.cx-anim .cx-case__nums>div,.cx-anim .cx-mech *{opacity:1!important;transform:none!important;animation:none!important;transition:none!important} .cx-anim .cx-about__img{clip-path:none}.cx-anim .cx-rule::before{transform:none} } /* ===== 27.10. c: real mountains ===== */ .cx-h1 .cx-line_ink,.cx-h1 .cx-line_ink span{color:var(--ink)!important} .cx-hero__bg img{filter:none;opacity:1} @media (min-width:1025px){ .cx-hero__bg{left:32%} .cx-hero__bg img{object-position:center 30%} .cx-hero__bg::after{background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.75) 14%,rgba(255,255,255,0) 40%),linear-gradient(180deg,rgba(255,255,255,0) 72%,#fff 100%)} .cx-hero__inner{min-height:0} .cx-hero__text{max-width:540px} } @media (max-width:1024px){ .cx-hero{padding-top:0} .cx-hero__bg{position:relative;height:300px;inset:auto;margin-top:60px} .cx-hero__bg img{object-position:center 35%} .cx-hero__bg::after{background:linear-gradient(180deg,rgba(255,255,255,0) 60%,#fff 100%)} .cx-hero__inner{padding-top:8px} } .cx-cta__bg img{filter:none;opacity:1;object-position:center 60%} @media (min-width:1025px){.cx-cta__bg{left:35%}.cx-cta__bg::after{background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.6) 15%,rgba(255,255,255,0) 45%)}} @media (max-width:1024px){.cx-cta__bg img{opacity:.35}} /* ===== 27.10. d: hero/cta composition ===== */ @media (min-width:1025px){ .cx-hero .cx-h1{max-width:700px} .cx-hero__text{max-width:520px} .cx-hero__bg{left:40%} .cx-hero__bg::after{background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.85) 8%,rgba(255,255,255,0) 32%),linear-gradient(180deg,rgba(255,255,255,0) 75%,#fff 100%)} .cx-cta__bg{left:42%} .cx-cta__bg::after{background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.85) 8%,rgba(255,255,255,0) 32%),linear-gradient(0deg,rgba(255,255,255,.0) 85%,#fff 100%)} .cx-cta .cx-h2{max-width:560px}.cx-cta .cx-lead{max-width:500px} } @media (max-width:1024px){.cx-hero__inner{padding-top:28px}} .cx-hero>.cx-wrap{width:100%} .cx-hero__bg,.cx-cta__bg{overflow:hidden} /* feather image edges with masks instead of white overlays */ @media (min-width:1025px){ .cx-hero__bg::after,.cx-cta__bg::after{display:none} .cx-hero__bg,.cx-cta__bg{-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 30%),linear-gradient(180deg,#000 80%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0%,#000 30%),linear-gradient(180deg,#000 80%,transparent 100%);mask-composite:intersect} .cx-cta__bg{-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 30%);mask-image:linear-gradient(90deg,transparent 0%,#000 30%)} } /* cx4.css */ /* ===== Startseite v4 (27.10.): Fotoband, Sticky-Prozess, Anspruch, Gründer, Presse-Logos ===== */ /* Fotoband – full-bleed, dunkel, Parallax */ .cx-band{position:relative;min-height:78vh;display:flex;align-items:flex-end;overflow:hidden;background:#0b0f17;color:#fff} .cx-band__img{position:absolute;inset:0} .cx-band__img img{width:100%;height:100%;object-fit:cover;object-position:center 45%;filter:grayscale(1) contrast(1.08) brightness(.72);transform:scale(1.15);will-change:transform} .cx-band__img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,15,23,.15) 0%,rgba(11,15,23,.1) 45%,rgba(11,15,23,.85) 100%)} .cx-band__inner{position:relative;padding-top:120px;padding-bottom:88px;width:100%} .cx-band__k{font-size:14px;font-weight:500;color:#9fc0ff;margin:0 0 18px} .cx-band__q{font-size:56px;line-height:1.08;letter-spacing:-.03em;font-weight:500;color:#fff;margin:0;max-width:980px} @media (max-width:1024px){.cx-band{min-height:62vh}.cx-band__q{font-size:34px}.cx-band__inner{padding-bottom:56px}} /* Vorgehen – Sticky-Bild links, Schritte rechts */ .cx-proc{display:grid;grid-template-columns:6fr 6fr;gap:96px;align-items:start;border-top:1px solid var(--ink)} .cx-proc__media{position:sticky;top:112px;aspect-ratio:4/3;overflow:hidden;margin-top:40px;background:#e9ebee} .cx-proc__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);opacity:0;transform:scale(1.04);transition:opacity .7s ease,transform 1.2s cubic-bezier(.2,.7,.2,1)} .cx-proc__media img.is-on{opacity:1;transform:none} .cx-proc__count{position:absolute;left:0;bottom:0;background:#fff;padding:10px 16px;font-size:14px;color:var(--mute);font-variant-numeric:tabular-nums} .cx-proc__count b{color:var(--ink);font-weight:500} .cx-proc__list{list-style:none;margin:0;padding:0} .cx-proc__step{padding:40px 0 64px;border-bottom:1px solid var(--line);min-height:44vh;transition:opacity .4s} .cx-proc__step:last-child{border-bottom:0;min-height:0} .cx-proc__step .cx-num{display:block;margin-bottom:28px} .cx-proc__step .cx-h3{font-size:30px;letter-spacing:-.02em;margin-bottom:16px} .cx-proc__step p{font-size:18px;line-height:1.6;color:var(--ink-2);max-width:480px;margin:0} .cx-proc__mob{display:none} @media (min-width:1025px){.cx-anim .cx-proc__step:not(.is-on){opacity:.32}} @media (max-width:1024px){.cx-proc{grid-template-columns:1fr;gap:0}.cx-proc__media{display:none}.cx-proc__step{min-height:0;padding:28px 0 36px} .cx-proc__step .cx-h3{font-size:24px}.cx-proc__step p{font-size:16px}.cx-proc__mob{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;margin-top:24px;filter:grayscale(1)}} /* Anspruch – dunkel, Versprechen als Liste */ .cx-promise{list-style:none;margin:0;padding:0;border-top:1px solid #fff} .cx-promise li{display:grid;grid-template-columns:56px 1fr;gap:16px;padding:32px 0;border-bottom:1px solid #262c36} .cx-promise .cx-h3{font-size:24px;margin-bottom:8px} .cx-promise p{margin:0;line-height:1.6;font-size:16px} .cx-split__cta{margin-top:40px} .cx-btn_light{background:#fff;color:var(--ink)} .cx-btn_light:hover{background:#e8eaee;color:var(--ink)} /* Gründer */ .cx-founder{display:grid;grid-template-columns:5fr 7fr;gap:96px;align-items:start} .cx-founder__img{position:relative;margin:0} .cx-founder__img img{width:100%;height:auto;aspect-ratio:900/1083;object-fit:cover;display:block;filter:grayscale(1) contrast(1.05)} .cx-founder__cap{margin:0;padding:16px 0 0;border-top:1px solid var(--ink);margin-top:16px;font-size:14px;color:var(--mute);display:flex;flex-direction:column;gap:2px} .cx-founder__cap b{color:var(--ink);font-weight:500;font-size:16px} .cx-founder__text .cx-h2{margin-bottom:24px} .cx-founder__p{color:var(--ink-2);line-height:1.65;font-size:16px;margin:20px 0 40px;max-width:600px} .cx-founder__team{margin:0 0 36px;overflow:hidden;aspect-ratio:16/9} .cx-founder__team img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)} .cx-anim .cx-founder__img img{clip-path:inset(0 0 100% 0);transition:clip-path 1.2s cubic-bezier(.6,.1,.2,1)} .cx-anim .cx-founder.is-in .cx-founder__img img{clip-path:inset(0 0 0 0)} @media (min-width:1025px){.cx-founder__img{position:sticky;top:112px}} @media (max-width:1024px){.cx-founder{grid-template-columns:1fr;gap:40px}.cx-founder__img img{aspect-ratio:4/4}} /* FAQ auf Grau */ .cx-sec_grey .cx-faq__item{border-bottom-color:#d3d7dc} /* Abschluss: Ablauf + Person */ .cx-cta__inner>div{max-width:620px} .cx-cta .cx-lead{margin-bottom:24px} .cx-callsteps{list-style:none;margin:0 0 40px;padding:0;border-top:1px solid var(--ink)} .cx-callsteps li{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:16px 0;border-bottom:1px solid var(--line-2);font-size:16px;line-height:1.5;color:var(--ink)} .cx-callsteps .cx-num{padding-top:2px} .cx-cta__person{display:flex;align-items:center;gap:14px;margin-top:40px} .cx-cta__person img{width:52px;height:52px;object-fit:cover;filter:grayscale(1)} .cx-cta__person p{margin:0;font-size:14px;color:var(--ink-2)} .cx-cta__person b{color:var(--ink);font-weight:500} @media (max-width:1024px){.cx-callsteps li{font-size:15px}} /* Presse-Logos */ .cx-presslogos{padding:56px 0;border-top:1px solid var(--line);background:#fff} .cx-presslogos__row{display:grid;grid-template-columns:160px 1fr;gap:40px;align-items:center} .cx-presslogos__h{font-size:14px;font-weight:500;color:var(--mute);margin:0;letter-spacing:0;text-transform:none} .cx-presslogos__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(8,1fr);gap:32px;align-items:center} .cx-presslogos__list li{display:flex;align-items:center;justify-content:center;height:44px} .cx-presslogos__list img{max-height:26px;max-width:100%;width:auto;opacity:.55;transition:opacity .2s} .cx-presslogos__list a:hover img{opacity:1} .cx-presslogos__list img[alt="Kiosk Austria"],.cx-presslogos__list img[alt="Internet World Business"]{max-height:34px} @media (max-width:1024px){.cx-presslogos__row{grid-template-columns:1fr;gap:20px}.cx-presslogos__list{grid-template-columns:repeat(4,1fr);gap:24px 20px}.cx-presslogos__list img{max-height:22px}} /* Sektionsübergänge */ .cx-band + .cx-sec{border-top-color:transparent} .cx-cta + .cx-presslogos{border-top-color:var(--line)} .cx-presslogos__list img{max-height:30px;opacity:.6} .cx-presslogos__list img[alt="Kiosk Austria"],.cx-presslogos__list img[alt="Internet World Business"]{max-height:40px} .cx-cta__bg img{object-position:center 40%} /* cx5.css */ /* ===== Startseite v5 (27.10.): Claim-Hero, Trust, Problem, Proof, System, Deliver, Mini-Cases ===== */ .cx-eyebrow{font-size:13px;font-weight:500;letter-spacing:.14em;color:var(--ink-2);margin:0 0 24px} .cx-h1_claim{font-size:76px;line-height:1.02;letter-spacing:-.04em;max-width:820px} .cx-h1_claim .cx-line,.cx-h1_claim .cx-line:first-child{color:var(--ink)} .cx-hero__promise{font-size:28px;line-height:1.3;letter-spacing:-.015em;font-weight:500;color:var(--ink);margin:32px 0 0;max-width:620px} .cx-hero__promise mark{background:none;color:var(--blue);padding:0} .cx-hero__text{margin:20px 0 40px;font-size:18px;max-width:560px} .cx-hero__for{margin:28px 0 0;font-size:14px;color:var(--mute);max-width:520px} .cx-hero{min-height:88vh;padding-bottom:96px;justify-content:center} @media (max-width:1024px){.cx-h1_claim{font-size:46px}.cx-hero__promise{font-size:21px;margin-top:22px}.cx-hero__text{font-size:16px}.cx-hero{padding-bottom:56px}} @media (max-width:480px){.cx-h1_claim{font-size:40px}} /* Trust */ .cx-trust{padding:64px 0 72px;border-top:1px solid var(--line);background:#fff} .cx-trust__top{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:28px;flex-wrap:wrap} .cx-trust__h{font-size:22px;font-weight:500;letter-spacing:-.01em;margin:0;color:var(--ink);text-transform:none} .cx-trust__signals{list-style:none;margin:0;padding:0;display:flex;gap:28px;flex-wrap:wrap;font-size:14px;color:var(--ink-2)} .cx-trust__signals b{color:var(--ink);font-weight:500} .cx-trust__signals a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-2)} .cx-trust__signals a:hover{border-color:var(--ink)} /* Problem */ .cx-display{font-size:52px;line-height:1.08;letter-spacing:-.03em;font-weight:500;margin:0 0 28px;max-width:960px;color:var(--ink);text-transform:none} .cx-problem__head{margin-bottom:72px} .cx-problem__head .cx-lead{max-width:720px} .cx-problems{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink)} .cx-problems li{padding:28px 40px 8px 0;border-right:1px solid #d3d7dc} .cx-problems li+li{padding-left:40px}.cx-problems li:last-child{border-right:0} .cx-problems .cx-num{display:block;margin-bottom:32px} .cx-problems .cx-h3{font-size:22px} .cx-problems p{color:var(--ink-2);line-height:1.6;margin:0} .cx-problem__close{margin:80px 0 0;font-size:30px;line-height:1.3;letter-spacing:-.02em;color:var(--ink-2);max-width:900px} .cx-problem__close strong{color:var(--ink);font-weight:500} @media (max-width:1024px){.cx-display{font-size:32px}.cx-problems{grid-template-columns:1fr}.cx-problems li,.cx-problems li+li{padding:24px 0;border-right:0;border-bottom:1px solid #d3d7dc}.cx-problems .cx-num{margin-bottom:12px}.cx-problem__close{font-size:21px;margin-top:48px}.cx-problem__head{margin-bottom:40px}} /* Proof (dark) */ .cx-proof__head{max-width:860px;margin-bottom:56px} .cx-proof__head .cx-h2{font-size:44px} .cx-proof__chart{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:end;height:340px;border-top:1px solid #fff;padding-top:0;margin-bottom:72px;position:relative} .cx-bar{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;border-bottom:1px solid #3a4250} .cx-bar__fill{position:absolute;left:0;bottom:0;width:100%;height:var(--h);background:#1d2531;transform-origin:bottom;transition:transform 1.3s cubic-bezier(.2,.7,.2,1) .2s} .cx-bar_after .cx-bar__fill{background:var(--blue)} .cx-bar__n,.cx-bar__l{position:relative;margin:0;padding:0 24px} .cx-bar__n{font-size:72px;font-weight:500;letter-spacing:-.04em;line-height:1;color:#fff} .cx-bar__l{font-size:15px;color:#c9d3e3 !important;padding-bottom:24px;padding-top:10px;max-width:320px} .cx-bar_before .cx-bar__n{color:#a9afb8} .cx-anim .cx-proof__chart:not(.is-in) .cx-bar__fill{transform:scaleY(0)} .cx-proof__grid{display:grid;grid-template-columns:7fr 5fr;gap:96px} .cx-proof__facts{margin:0} .cx-proof__facts>div{display:grid;grid-template-columns:200px 1fr;gap:24px;padding:22px 0;border-top:1px solid #262c36} .cx-proof__facts dt{font-size:14px;color:#6ea2ff;font-weight:500} .cx-proof__facts dd{margin:0;color:#d5d9df;line-height:1.6} .cx-proof__facts ol{margin:0;padding-left:18px}.cx-proof__facts li{margin-bottom:6px} .cx-proof__quote{margin:0 0 24px;padding:24px 0 0;border-top:1px solid #fff} .cx-proof__quote p{font-size:24px;line-height:1.4;letter-spacing:-.01em;color:#fff !important;margin:0 0 20px} .cx-proof__quote footer{font-size:14px;color:#a9afb8;display:flex;flex-direction:column;gap:2px} .cx-proof__quote footer b{color:#fff;font-weight:500;font-size:15px} .cx-proof__src{font-size:13px;color:#6b727c !important;margin:0 0 28px} .cx-sec_dark .cx-link{color:#fff;border-color:#3a4250}.cx-sec_dark .cx-link:hover{border-color:#fff} @media (max-width:1024px){.cx-proof__head .cx-h2{font-size:28px}.cx-proof__chart{height:240px;gap:12px;margin-bottom:40px}.cx-bar__n{font-size:40px;padding:0 12px}.cx-bar__l{font-size:13px;padding:6px 12px 14px} .cx-proof__grid{grid-template-columns:1fr;gap:40px}.cx-proof__facts>div{grid-template-columns:1fr;gap:6px}.cx-proof__quote p{font-size:19px}} /* System */ .cx-sys{position:relative} .cx-sys__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);position:relative} .cx-sys__list::before{content:"";position:absolute;left:20px;right:20px;top:20px;height:1px;background:var(--ink);transform-origin:left;transition:transform 1.4s cubic-bezier(.6,.1,.2,1)} .cx-anim .cx-sys:not(.is-in) .cx-sys__list::before{transform:scaleX(0)} .cx-sys__item{position:relative;padding:0 24px 0 0} .cx-sys__node{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:#fff;border:1px solid var(--ink);font-size:14px;font-weight:500;margin-bottom:28px;transition:background .3s,color .3s} .cx-sys__item:hover .cx-sys__node{background:var(--ink);color:#fff} .cx-sys__item .cx-h3{font-size:19px} .cx-sys__item p{color:var(--ink-2);font-size:15px;line-height:1.6;margin:0} .cx-anim .cx-sys__item{opacity:0;transform:translate3d(0,16px,0);transition:opacity .6s ease,transform .6s ease;transition-delay:calc(var(--i)*160ms + 300ms)} .cx-anim .cx-sys.is-in .cx-sys__item{opacity:1;transform:none} .cx-sys__goal{margin-top:56px;display:flex;align-items:center;gap:20px;padding:24px 28px;background:var(--ink);color:#fff} .cx-sys__goal span{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#6ea2ff} .cx-sys__goal b{font-size:22px;font-weight:500;letter-spacing:-.01em} .cx-btn_ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)} .cx-btn_ghost:hover{background:var(--ink);color:#fff} @media (max-width:1024px){.cx-sys__list{grid-template-columns:1fr}.cx-sys__list::before{left:20px;right:auto;top:20px;bottom:20px;width:1px;height:auto;transform-origin:top} .cx-anim .cx-sys:not(.is-in) .cx-sys__list::before{transform:scaleY(0)} .cx-sys__item{padding:0 0 28px 64px}.cx-sys__node{position:absolute;left:0;top:0;margin:0}.cx-sys__item .cx-h3{padding-top:8px}.cx-sys__goal{margin-top:24px;flex-direction:column;align-items:flex-start;gap:6px}.cx-sys__goal b{font-size:18px}} /* Mechanik on grey */ .cx-sec_grey .cx-mech{border-top-color:var(--ink)} .cx-sec_grey .cx-mech__vis{background:#fff} .cx-mech__note{font-size:13px;color:var(--mute);margin:32px 0 0} /* Deliver */ .cx-deliver{display:grid;grid-template-columns:5fr 7fr;gap:96px;align-items:start} .cx-deliver__img{position:sticky;top:112px;aspect-ratio:4/5;overflow:hidden} .cx-deliver__img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)} .cx-anim .cx-deliver__img img{clip-path:inset(0 0 100% 0);transition:clip-path 1.2s cubic-bezier(.6,.1,.2,1)} .cx-anim .cx-deliver__img.is-in img{clip-path:inset(0)} .cx-deliver__text .cx-h2{margin-bottom:40px} .cx-deliver__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink);counter-reset:d} .cx-deliver__list li{padding:26px 0;border-bottom:1px solid var(--line)} .cx-deliver__list p{color:var(--ink-2);line-height:1.6;margin:0} .cx-deliver__claim{margin:36px 0 28px;font-size:22px;line-height:1.35;font-weight:500;letter-spacing:-.01em;padding-left:20px;border-left:2px solid var(--blue)} .cx-deliver__links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px} .cx-deliver__links a{display:inline-block;padding:8px 14px;border:1px solid var(--line-2);color:var(--ink);text-decoration:none;font-size:14px;transition:border-color .2s,background .2s} .cx-deliver__links a:hover{border-color:var(--ink);background:var(--tint)} @media (max-width:1024px){.cx-deliver{grid-template-columns:1fr;gap:32px}.cx-deliver__img{position:relative;top:0;aspect-ratio:16/10}.cx-deliver__claim{font-size:18px}} /* Mini cases */ .cx-mini{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ink)} .cx-mini__case{padding:36px 56px 8px 0} .cx-mini__case+.cx-mini__case{padding-left:56px;padding-right:0;border-left:1px solid var(--line)} .cx-mini__co{font-size:24px;font-weight:500;margin:0;letter-spacing:-.01em} .cx-mini__ind{color:var(--mute);font-size:14px;margin:4px 0 28px} .cx-mini__result{font-size:22px;line-height:1.35;letter-spacing:-.01em;color:var(--blue);margin:0 0 28px;font-weight:500} .cx-mini dl{margin:0 0 28px} .cx-mini dl>div{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:12px 0;border-top:1px solid var(--line);font-size:15px} .cx-mini dt{color:var(--ink);font-weight:500}.cx-mini dd{margin:0;color:var(--ink-2);line-height:1.55} .cx-mini blockquote{margin:0;padding-left:20px;border-left:1px solid var(--ink)} .cx-mini blockquote p{margin:0 0 8px;line-height:1.55;color:var(--ink)} .cx-mini blockquote footer{font-size:13px;color:var(--mute)} .cx-anim .cx-mini__case{opacity:0;transform:translate3d(0,18px,0);transition:opacity .7s,transform .7s;transition-delay:calc(var(--i)*150ms)} .cx-anim .cx-mini.is-in .cx-mini__case{opacity:1;transform:none} @media (max-width:1024px){.cx-mini{grid-template-columns:1fr}.cx-mini__case,.cx-mini__case+.cx-mini__case{padding:28px 0;border-left:0;border-bottom:1px solid var(--line)}.cx-mini dl>div{grid-template-columns:1fr;gap:4px}.cx-mini__result{font-size:19px}} /* Videos: 3 */ .cx-videos_3{grid-template-columns:repeat(3,1fr);gap:40px} .cx-videos_3 .cx-video__media{aspect-ratio:4/5} .cx-video__ask{font-size:14px;font-weight:500;color:var(--blue);margin:0 0 14px} .cx-videos_3 .cx-video__quote{font-size:16px;color:var(--ink);margin:4px 0 14px} @media (max-width:1024px){.cx-videos_3{grid-auto-columns:80%}} /* Founder */ .cx-founder__text .cx-founder__p{margin-bottom:32px} /* CTA */ .cx-callchecks{list-style:none;margin:8px 0 40px;padding:0} .cx-callchecks li{position:relative;padding:12px 0 12px 30px;border-bottom:1px solid var(--line-2);font-size:16px} .cx-callchecks li:first-child{border-top:1px solid var(--ink)} .cx-callchecks li::before{content:"";position:absolute;left:2px;top:19px;width:12px;height:6px;border-left:1.5px solid var(--blue);border-bottom:1.5px solid var(--blue);transform:rotate(-45deg)} .cx-cta .cx-h2{font-size:44px} @media (max-width:1024px){.cx-cta .cx-h2{font-size:30px}} .cx-inline{color:var(--ink);text-decoration:underline;text-underline-offset:3px} .cx-band__q{font-size:52px} @media (max-width:1024px){.cx-band__q{font-size:30px}} .cx-h1_claim span,.cx-h1_claim .cx-line:first-child{color:var(--ink)!important} .cx-bar_before .cx-bar__fill{background:#252e3b} @media (max-width:1024px){ .cx-hero__bg{height:190px!important;margin-top:60px} .cx-eyebrow{margin-bottom:14px;font-size:12px} .cx-hero__promise{margin-top:16px} .cx-hero__text{margin:14px 0 24px} .cx-trust__signals{gap:8px 20px;flex-direction:row} .cx-trust__h{font-size:19px} } /* ===== Fotos statt Berge (27.10.) ===== */ .cx-hero__bg_photo picture{display:block;width:100%;height:100%} .cx-hero__bg_photo img,.cx-cta__bg_photo img{filter:none!important;opacity:1!important;transform:none!important} @media (min-width:1025px){ .cx-hero__bg_photo{left:auto!important;right:0;top:72px;bottom:0;width:40%;-webkit-mask-image:none!important;mask-image:none!important} .cx-hero__bg_photo img{width:100%;height:100%;object-fit:cover;object-position:50% 30%} .cx-hero__bg_photo::after{display:none} .cx-hero .cx-h1_claim{max-width:660px} .cx-hero__promise,.cx-hero__text{max-width:600px} .cx-cta__bg_photo{left:auto!important;right:0;width:38%;-webkit-mask-image:none!important;mask-image:none!important} .cx-cta__bg_photo img{object-position:50% 30%} .cx-cta__bg_photo::after{display:none} .cx-cta__inner>div{max-width:640px} } @media (min-width:1025px) and (max-width:1280px){.cx-h1_claim{font-size:60px}} @media (max-width:1024px){ .cx-hero__bg_photo{height:260px!important} .cx-hero__bg_photo img{width:100%;height:100%;object-fit:cover;object-position:50% 30%} .cx-hero__bg_photo::after{display:none} .cx-cta__bg_photo{display:none} } .cx-cta__bg_photo img{object-position:50% 20%} .cx-cta__bg_photo img{object-position:50% 35%} /* cx6.css */ /* ===== v6 (27.10.): frischer – abgesetzte Navi, weichere Formen, helle Berge, Trust ===== */ :root{--r:14px;--r-sm:10px;--pill:999px;--blue:#1f6bff;--accent:#ffd84d;--tint:#f4f5f7} /* --- Navi: schwebende dunkle Pille (global) --- */ .site-header{background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-bottom:0!important;padding-top:16px} .site-header .container_min{max-width:1272px} .site-header__wrap{background:#0b0f17!important;border-radius:var(--pill)!important;padding:0 10px 0 28px!important;height:64px!important;box-shadow:0 10px 30px rgba(11,15,23,.14)} .site-header__logo img{filter:brightness(0) invert(1)!important;height:22px} .main-navigation>.menu>.menu-item>span>a{color:#c9ced6!important;font-weight:400!important;border-radius:var(--pill)!important;padding:8px 16px!important} .main-navigation>.menu>.menu-item>span>a:hover{color:#fff!important;background:rgba(255,255,255,.08)!important} .main-navigation ul li.current-menu-item>span a{color:#fff!important;box-shadow:none!important;background:rgba(255,255,255,.1)!important} .site-header .header-btn{background:#fff!important;color:#0b0f17!important;border-radius:var(--pill)!important;padding:12px 20px!important;font-weight:500} .site-header .header-btn svg path{stroke:#0b0f17!important} .site-header .header-btn:hover{background:var(--accent)!important;color:#0b0f17!important} .burger-icon span{background:#fff!important} @media (max-width:1024px){.site-header{padding-top:10px}.site-header .container_min{padding:0 12px}.site-header__wrap{height:56px!important;padding:0 8px 0 20px!important}} /* --- Typo leichter --- */ .cx-h1,.cx-h1_claim{font-weight:400!important} .cx-h2,.cx-display{font-weight:400!important} .cx-h3{font-weight:500} .cx-label{display:inline-flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.02em;color:var(--ink-2)} .cx-label::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--blue)} .cx-sec_dark .cx-label{color:#c9ced6}.cx-sec_dark .cx-label::before{background:var(--accent)} .cx-sec{padding:136px 0} @media (max-width:768px){.cx-sec{padding:80px 0}} /* --- Buttons: Pille --- */ .cx-btn,.btn{border-radius:var(--pill)!important;padding:16px 26px} .cx-btn:hover{background:#1f2633} .cx-btn_light:hover{background:var(--accent)!important;color:var(--ink)!important} .cx-btn_ghost{border-radius:var(--pill)} .cx-link{border-bottom-width:1px} /* --- Hero: helles Bergfoto --- */ .cx-hero{padding-top:150px!important;min-height:92vh;background:#fff} .cx-hero__bg_mtn{position:absolute;inset:0;z-index:0;-webkit-mask-image:none!important;mask-image:none!important} .cx-hero__bg_mtn img{width:100%;height:100%;object-fit:cover;object-position:70% 40%;filter:none!important;opacity:1!important} .cx-hero__bg_mtn::after{display:block!important;content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.7) 38%,rgba(255,255,255,0) 66%),linear-gradient(180deg,rgba(255,255,255,0) 75%,#fff 100%)!important} .cx-hero .cx-h1_claim{max-width:760px} .cx-hero__promise mark{color:var(--blue)} @media (min-width:1025px){.cx-hero__bg_mtn{left:0!important;width:100%!important;top:0!important}} @media (max-width:1024px){.cx-hero{padding-top:0!important;min-height:0}.cx-hero__bg_mtn{position:relative!important;height:240px!important;margin-top:0!important}.cx-hero__bg_mtn img{object-position:65% 40%}.cx-hero__bg_mtn::after{background:linear-gradient(180deg,rgba(255,255,255,0) 55%,#fff 100%)!important}.cx-hero__inner{padding-top:12px}} /* --- Abschluss: helles Bergfoto --- */ .cx-cta{padding:170px 0;background:#fff} .cx-cta__bg_mtn{position:absolute;inset:0;-webkit-mask-image:none!important;mask-image:none!important;width:100%!important;left:0!important} .cx-cta__bg_mtn img{width:100%;height:100%;object-fit:cover;object-position:70% 55%;filter:none!important;opacity:1!important;transform:scale(1.08)} .cx-cta__bg_mtn::after{display:block!important;content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.78) 42%,rgba(255,255,255,.05) 72%)!important} @media (max-width:1024px){.cx-cta{padding:96px 0}.cx-cta__bg_mtn{display:block!important}.cx-cta__bg_mtn::after{background:rgba(255,255,255,.86)!important}} /* --- Weichere Flächen --- */ .cx-logos__grid{border:0!important;gap:12px} .cx-logos__grid li{border:0!important;background:var(--tint);border-radius:var(--r)} .cx-mech__vis,.cx-sec_dark .cx-mech__vis,.cx .serp,.cx .chat__body,.cx .press__card{border-radius:var(--r)!important} .cx-sys__node{border-radius:50%!important} .cx-sys__goal{border-radius:var(--r);background:var(--ink)} .cx-sys__goal span{color:var(--accent)} .cx-proof__chart{border-top:0!important} .cx-bar__fill{border-radius:var(--r) var(--r) 0 0} .cx-bar_after .cx-bar__fill{background:linear-gradient(180deg,#3d80ff,#1f6bff)} .cx-proc__media,.cx-deliver__img,.cx-founder__img img,.cx-founder__team,.cx-about__img{border-radius:var(--r)} .cx-proc__media img{border-radius:var(--r)} .cx-proc__count{border-radius:var(--pill);left:16px;bottom:16px} .cx-founder__img img{border-radius:var(--r)} .cx-deliver__links a{border-radius:var(--pill)} .cx-band{margin:0 16px;border-radius:24px} @media (max-width:768px){.cx-band{margin:0 10px;border-radius:18px}} .cx-sec_dark{position:relative} .cx-faq__item{border-bottom-color:#dfe2e6} /* --- Trust --- */ .cx-stars{color:#f5b301;letter-spacing:2px;font-size:15px;line-height:1} .cx-rating a{display:inline-flex;align-items:center;gap:8px;border:0!important;background:var(--tint);padding:8px 14px;border-radius:var(--pill)} .cx-rating b{font-weight:600} .cx-ratebadge{display:inline-flex;align-items:center;gap:10px;margin-top:24px;padding:10px 16px;border-radius:var(--pill);background:rgba(255,255,255,.08);color:#e7eaee;text-decoration:none;font-size:14px;border:1px solid rgba(255,255,255,.14)} .cx-ratebadge b{color:#fff;font-weight:600} .cx-ratebadge:hover{background:rgba(255,255,255,.14)} .cx-more-rate .cx-ratebadge{margin:0 0 40px;background:var(--tint);color:var(--ink-2);border-color:transparent} .cx-more-rate .cx-ratebadge b{color:var(--ink)} .cx-shot{margin:0 0 32px;border-radius:var(--r);overflow:hidden;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.04),0 18px 40px rgba(0,0,0,.25)} .cx-shot__bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#eef0f3} .cx-shot__bar i{width:9px;height:9px;border-radius:50%;background:#cfd3d9} .cx-shot__bar em{font-style:normal;font-size:11px;color:#6b727c;margin-left:10px;background:#fff;padding:3px 10px;border-radius:var(--pill)} .cx-shot img{display:block;width:100%;height:auto} .cx-shot_sm{box-shadow:0 1px 0 rgba(0,0,0,.04),0 12px 30px rgba(11,15,23,.1);margin-bottom:28px} .cx-shot_sm img{aspect-ratio:16/9;object-fit:cover;object-position:top} .cx-tq footer{display:flex!important;flex-direction:row!important;align-items:center;gap:14px} .cx-tq footer span{display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--mute)} .cx-tq footer b{color:var(--ink);font-weight:500;font-size:15px} .cx-sec_dark .cx-tq footer b{color:#fff} .cx-av{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:0 0 auto;box-shadow:0 0 0 2px #fff} .cx-tq__vid{margin-left:auto;font-size:13px;color:var(--blue);text-decoration:none;white-space:nowrap} .cx-tq__vid::before{content:"▶ ";font-size:10px} .cx-mini blockquote{border-left:0!important;padding:20px!important;background:var(--tint);border-radius:var(--r)} .cx-mini{border-top:0!important;gap:32px} .cx-mini__case,.cx-mini__case+.cx-mini__case{border:1px solid var(--line)!important;border-radius:20px;padding:24px 24px 28px!important} .cx-mini::before{display:none} @media (max-width:1024px){.cx-mini__case,.cx-mini__case+.cx-mini__case{padding:16px 16px 20px!important}.cx-tq__vid{display:none}} /* --- 5 Videos --- */ .cx-vids{display:grid;grid-template-columns:repeat(5,1fr);gap:20px} .cx-vid{margin:0} .cx-vid__media{position:relative;display:block;width:100%;aspect-ratio:3/4;border:0;padding:0;overflow:hidden;border-radius:var(--r);cursor:pointer;background:#ddd} .cx-vid__media img,.cx-vid__media video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1)} .cx-vid__media:hover img{transform:scale(1.04)} .cx-vid__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,15,23,0) 55%,rgba(11,15,23,.55) 100%);pointer-events:none} .cx-vid.is-playing .cx-vid__media::after,.cx-vid.is-playing .cx-vid__ask{display:none} .cx-vid__ask{position:absolute;left:12px;right:12px;top:12px;z-index:1;background:rgba(255,255,255,.92);color:var(--ink);font-size:12px;line-height:1.35;padding:7px 11px;border-radius:var(--pill);text-align:left;width:max-content;max-width:calc(100% - 24px)} .cx-vid .cx-video__play{z-index:1;border-radius:50%;left:12px;bottom:12px} .cx-vid figcaption{padding-top:16px} .cx-vid__quote{font-size:14px;line-height:1.55;color:var(--ink);margin:0 0 12px} .cx-vids__hint{margin:32px 0 0;font-size:14px;color:var(--mute)} .cx-vids__hint a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-2)} .cx-anim .cx-vid{opacity:0;transform:translate3d(0,20px,0);transition:opacity .7s,transform .7s;transition-delay:calc(var(--i)*90ms)} .cx-anim .cx-vids.is-in .cx-vid{opacity:1;transform:none} @media (max-width:1024px){.cx-vids{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:70%;overflow-x:auto;scroll-snap-type:x mandatory;margin-right:-20px;padding-right:20px;scrollbar-width:none}.cx-vids::-webkit-scrollbar{display:none}.cx-vid{scroll-snap-align:start}} /* gelegentlich Farbe */ .cx-problem__close strong{background:linear-gradient(transparent 62%,rgba(255,216,77,.6) 62%);padding:0 2px} .cx-deliver__claim{border-left-color:var(--accent);border-left-width:3px} @media (max-width:1024px){.cx-hero__bg_mtn img{object-position:80% 35%!important}.cx-hero__bg_mtn{height:220px!important}} /* Videoplayer (28.10.): Video ersetzt den Vorschau-Button */ .cx-vplay{cursor:default;background:#0b0f17} .cx-vplay::after{display:none} .cx-vplay video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#0b0f17;filter:none!important;transform:none!important} /* Agenturmarkt-Widget (28.10.) – Fallback im Look des offiziellen Widgets */ .am-w{display:inline-block;max-width:100%} .am-w__fb{display:inline-flex;align-items:center;gap:14px;height:100%;padding:14px 22px 14px 16px;background:#fff;border:1px solid #e3e6ea;border-radius:14px;color:#0b0f17;text-decoration:none!important;box-sizing:border-box;transition:border-color .2s,box-shadow .2s} .am-w__fb:hover{border-color:#cfd4da;box-shadow:0 6px 20px rgba(11,15,23,.08)} .am-w__fb:focus-visible{outline:2px solid #0E68FF;outline-offset:3px} .am-w__logo{flex:none} .am-w__body{display:flex;flex-direction:column;line-height:1.2} .am-w__top{display:flex;align-items:baseline;gap:18px;font-size:15px} .am-w__top b{font-weight:600} .am-w__more{font-size:12px;color:#1765d6;letter-spacing:.02em} .am-w__score{display:flex;align-items:center;gap:10px;margin:2px 0} .am-w__score>b{font-size:30px;font-weight:700;color:#16b364;letter-spacing:-.01em} .am-w__stars{display:flex;gap:2px} .am-w__stars i{display:grid;place-items:center;width:21px;height:21px;background:#16b364} .am-w__stars i.am-w__part{background:linear-gradient(90deg,#16b364 80%,#c9ced4 80%)} .am-w__stars svg{width:15px;height:15px} .am-w__sub{font-size:13px;color:#2b3036} .am-w__sub span{color:#9aa1a9;margin:0 2px} .am-w__by{margin-top:4px;font-size:9.5px;color:#7a828b;letter-spacing:.02em} .am-w__by b{color:#1765d6;font-weight:600} .site-footer .am-w__fb{border-color:transparent} .cx-proof__head .am-w{margin-top:24px} .cx-more-rate .am-w{margin:0 0 40px} .pg-amw{margin:4px 0 8px} /* Footer: dunkle Widget-Variante (Trustmarkt-Widget Pex5…, 02.11.2026) */ .am-w_dark .am-w__fb{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#fff} .am-w_dark .am-w__fb:hover{border-color:rgba(255,255,255,.3);box-shadow:none} .am-w_dark .am-w__more{color:#8fb6ff} .am-w_dark .am-w__logo circle[fill="#fff"]{fill:#16191f} /* nav.css */ /* ===== Navigation „Lösungen“ – Mega-Menü (Desktop) / Accordion (Mobil) – 27.10. ===== */ .site-header .container_min{position:relative} .nav-mega{list-style:none;display:flex;align-items:center} .nav-mega__toggle{display:inline-flex;align-items:center;gap:8px;background:none;border:0;cursor:pointer;font:inherit;font-size:16px;font-weight:400;color:#c9ced6;padding:8px 16px;border-radius:999px;transition:color .15s,background-color .15s} .nav-mega__toggle:hover,.nav-mega.is-open .nav-mega__toggle{color:#fff;background:rgba(255,255,255,.08)} .nav-mega.is-current .nav-mega__toggle{color:#fff;background:rgba(255,255,255,.1)} .nav-mega__toggle:focus-visible,.mega a:focus-visible,.mega__gtoggle:focus-visible{outline:2px solid #6ea2ff;outline-offset:2px} .nav-mega__chev{transition:transform .2s ease;flex:0 0 auto} .nav-mega.is-open>.nav-mega__toggle .nav-mega__chev{transform:rotate(180deg)} .mega h2.mega__title{margin:0;font-size:inherit;line-height:inherit;text-transform:none;letter-spacing:0} .mega ul{list-style:none;margin:0;padding:0} .main-navigation .mega ul li a,.main-navigation .mega ul li a:visited{display:block;text-decoration:none;font-weight:400} .mega__num{font-variant-numeric:tabular-nums;color:#8a9099;font-weight:400} .mega__draft{font-style:normal;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#8a5a00;background:#fff3c4;border-radius:4px;padding:2px 6px;margin-left:8px;vertical-align:2px;font-weight:500} /* ---------- Desktop ---------- */ @media (min-width:1025px){ .mega{position:absolute;left:24px;right:24px;top:100%;padding-top:10px;visibility:hidden;opacity:0;transform:translateY(-4px);transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s;z-index:5} .nav-mega.is-open .mega{visibility:visible;opacity:1;transform:none;transition:opacity .18s ease,transform .18s ease,visibility 0s} .mega__inner{display:grid;grid-template-columns:minmax(0,1fr) 280px;background:#fff;border:1px solid #e3e6ea;border-radius:20px;box-shadow:0 24px 60px rgba(11,15,23,.16),0 2px 6px rgba(11,15,23,.05);overflow:hidden;max-height:calc(100vh - 110px);overflow-y:auto} .mega__cols{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:0;padding:32px 12px 28px 20px} .mega__col{padding:0 16px;display:flex;flex-direction:column;gap:28px} .mega__col+.mega__col{border-left:1px solid #eef0f2} .mega__gtoggle{display:none} .mega__glabel{display:flex;gap:10px;align-items:baseline;font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#0b0f17;padding:0 12px 12px;border-bottom:1px solid #eef0f2;margin-bottom:6px} .main-navigation .mega ul li a{padding:10px 12px;border-radius:10px;color:#0b0f17;transition:background-color .15s} .main-navigation .mega ul li a:hover{background:#f4f5f7} .main-navigation .mega ul li a[aria-current="page"]{background:#f4f5f7} .main-navigation .mega ul li a[aria-current="page"] .mega__t{color:#1f6bff} .mega__t{display:block;font-size:15px;line-height:1.35;font-weight:500;color:#0b0f17} .mega__d{display:block;font-size:13px;line-height:1.45;color:#5f6670;margin-top:3px} .mega__aside{background:#f4f5f7;padding:32px 28px;display:flex;flex-direction:column;gap:14px;border-left:1px solid #eef0f2} .mega__aside-k{margin:0;font-size:18px;line-height:1.3;font-weight:500;color:#0b0f17;letter-spacing:-.01em} .mega__aside-t{margin:0 0 6px;font-size:14px;line-height:1.55;color:#4b525c} .mega__aside-btn{display:inline-flex;align-items:center;justify-content:space-between;gap:12px;background:#0b0f17;color:#fff!important;text-decoration:none;font-size:15px;font-weight:500;padding:14px 18px;border-radius:999px;transition:background-color .15s} .mega__aside-btn:hover{background:#222a37} .mega__aside-link{font-size:14px;color:#0b0f17!important;text-decoration:none;border-bottom:1px solid #c9cdd3;align-self:flex-start;padding-bottom:2px} .mega__aside-link:hover{border-color:#0b0f17} .mega-scrim{position:fixed;inset:0;background:rgba(11,15,23,.22);z-index:140;opacity:0;visibility:hidden;transition:opacity .18s,visibility 0s linear .18s} .mega-scrim.is-on{opacity:1;visibility:visible;transition:opacity .18s} } @media (min-width:1025px) and (max-width:1200px){.mega__inner{grid-template-columns:minmax(0,1fr)}.mega__aside{display:none}.mega__d{font-size:12.5px}} /* ---------- Mobil: Accordion im Vollbild-Menü ---------- */ @media (max-width:1024px){ .mega-scrim{display:none} .nav-mega{display:block;width:100%;border-bottom:1px solid #eef0f2} .nav-mega__toggle{width:100%;justify-content:space-between;color:#0b0f17!important;background:none!important;font-size:20px;font-weight:500;padding:16px 4px;border-radius:0} .nav-mega.is-current .nav-mega__toggle{color:#1f6bff!important} .mega{display:none;padding:0 0 12px} .nav-mega.is-open .mega{display:block} .mega__aside{display:none} .mega__col{display:contents} .mega__glabel{display:none} .mega__group{border-top:1px solid #f1f2f4} .mega__gtoggle{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;cursor:pointer;font:inherit;font-size:15px;font-weight:500;color:#0b0f17;text-align:left;padding:14px 4px} .mega__gtoggle .nav-mega__chev{margin-left:auto} .mega__group.is-open .mega__gtoggle .nav-mega__chev{transform:rotate(180deg)} .mega__list{display:none;padding:0 0 10px 30px!important} .mega__group.is-open .mega__list{display:block} .main-navigation .mega ul li a{padding:10px 4px;color:#0b0f17} .main-navigation .mega ul li a[aria-current="page"] .mega__t{color:#1f6bff} .mega__t{display:block;font-size:15px;line-height:1.35} .mega__d{display:block;font-size:13px;line-height:1.4;color:#6b727c;margin-top:2px} /* übrige Hauptpunkte im Vollbild-Menü lesbar */ .main-navigation>.menu>.menu-item{border-bottom:1px solid #eef0f2} .main-navigation>.menu>.menu-item>span>a{color:#0b0f17!important;font-size:20px!important;padding:16px 4px!important;background:none!important;border-radius:0!important} .main-navigation ul li.current-menu-item>span a{color:#1f6bff!important} .site-header__nav .menu-container{padding:8px 20px 24px} } @media (prefers-reduced-motion:reduce){.mega,.nav-mega__chev,.mega-scrim{transition:none!important}} /* ---------- Detailseiten /loesungen// ---------- */ .cx-sol-hero{padding:170px 0 96px;background:#fff} .cx-sol-hero .cx-h1{font-size:60px;max-width:900px} .cx-sol-hero__lead{max-width:720px;margin:24px 0 36px} .cx-crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:#7d838c;margin-bottom:40px} .cx-crumbs a{color:#3d434c;text-decoration:none}.cx-crumbs a:hover{text-decoration:underline} .cx-sol-draft{display:inline-block;margin:0 0 28px;font-size:13px;color:#8a5a00;background:#fff3c4;border-radius:8px;padding:8px 12px} .cx-sol-points{margin-top:36px!important} .cx-sol-more__list{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px} .cx-sol-more__list a{display:block;height:100%;padding:24px;border:1px solid #e3e6ea;border-radius:16px;text-decoration:none;color:#0b0f17;transition:border-color .15s,background-color .15s} .cx-sol-more__list a:hover{border-color:#0b0f17} .cx-sol-more__list b{display:block;font-weight:500;font-size:17px;margin-bottom:6px} .cx-sol-more__list span{font-size:14px;line-height:1.5;color:#5f6670} .cx-sol-cta .cx-h2{color:#fff;max-width:760px;margin-bottom:36px} @media (max-width:1024px){.cx-sol-hero{padding:110px 0 64px}.cx-sol-hero .cx-h1{font-size:38px}} /* Theme-Regel „.main-navigation ul li span{display:inline-flex}“ neutralisieren */ .main-navigation .mega li span{position:static;display:block} .main-navigation .mega .mega__glabel{display:flex} .main-navigation .mega span.mega__num{display:inline} .mega__draft{display:inline-block} @media (min-width:1025px){.main-navigation .mega .mega__glabel{display:flex}} @media (max-width:1024px){.main-navigation .mega .mega__glabel{display:none}} /* v2: CTA in letzter Spalte, breitere Spalten, kompakter */ @media (min-width:1025px){ .mega__inner{grid-template-columns:1fr} .mega__cols{padding:28px 16px 24px} .mega__col{gap:22px} .main-navigation .mega ul li a{padding:9px 12px} .mega__d{display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .mega__aside{display:flex!important;margin:8px 0 0;border:0;border-radius:14px;padding:22px 20px;gap:10px} .mega__aside-k{font-size:16px} .mega__aside-t{font-size:13.5px} .mega__aside-btn{font-size:14px;padding:12px 16px} } @media (min-width:1025px) and (max-width:1200px){.mega__aside{display:flex!important}.mega__cols{padding:24px 8px}.mega__col{padding:0 10px}} /* Mobil: Logo + Schließen-Button im geöffneten Menü sichtbar */ @media (max-width:1024px){ body._active .site-header__wrap{background:#fff!important;box-shadow:none} body._active .site-header__logo img{filter:brightness(0)!important} body._active .burger-icon{position:relative;z-index:111} body._active .burger-icon span{background:#0b0f17!important} .site-header__nav{padding-top:80px!important} } @media (min-width:1025px){.mega__col_aside .mega__aside{margin:0;height:auto}}@media (max-width:1024px){.mega__col_aside{display:none!important}} @media (min-width:1025px){.mega__col_aside{justify-content:flex-start}.mega__col_aside .mega__aside{margin:0}} /* Branchen-Dropdown (27.10.) */ .nav-mega_sm{position:relative} @media (min-width:1025px){ .mega_sm{left:auto;right:auto;width:400px;margin-left:-40px} .site-header .nav-mega_sm .mega_sm{position:absolute;left:0;top:100%} .mega_sm .mega__cols{padding:14px} .mega_sm .mega__col{padding:0} .mega__list_flat .mega__all{margin-top:6px;padding-top:6px;border-top:1px solid #eef0f2} .mega__list_flat .mega__all .mega__t{font-size:14px;font-weight:400;color:#4b525c} } @media (max-width:1024px){ .mega_sm .mega__list{display:block!important;padding:0 0 10px 12px!important} } /* Branchen-Menü mit Icons */ .mega_sm .mega__list_flat a.mega__ia{display:flex;align-items:flex-start;gap:14px} .mega__ico{flex:none;width:40px;height:40px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:#f1f4f8;color:#0b0f17;transition:background-color .2s,color .2s} .mega__ico svg{display:block} .mega__ib{display:flex;flex-direction:column;gap:2px;min-width:0} .mega_sm a.mega__ia:hover .mega__ico,.mega_sm a.mega__ia:focus-visible .mega__ico,.mega_sm a.mega__ia[aria-current="page"] .mega__ico{background:#1f6bff;color:#fff} .mega__all a.mega__ia{align-items:center} .mega__ico_all{width:32px;height:32px;border-radius:10px;background:transparent;border:1px solid #e3e6ea;color:#5f6670} .mega__ico_all svg{width:16px;height:16px} .main-navigation .mega span.mega__ico,.main-navigation .mega span.mega__ib{display:inline-flex} .main-navigation .mega span.mega__ib{display:flex} @media (max-width:1024px){ .mega__ico{width:34px;height:34px;border-radius:10px} .mega__ico svg{width:18px;height:18px} } /* Ressourcen-Menü: SEO-GEO-Guide-Teaser (28.10.) */ .mega-guide{display:flex;gap:16px;align-items:flex-start;text-decoration:none!important;color:#fff;background:#0b0f17;border-radius:14px;padding:18px;position:relative;overflow:hidden;transition:background-color .2s} .mega-guide::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:24px 24px;pointer-events:none} .mega-guide img{position:relative;flex:none;width:80px;height:auto;transform:rotate(-3deg);transition:transform .3s;filter:drop-shadow(0 8px 14px rgba(0,0,0,.45))} .mega-guide:hover img,.mega-guide:focus-visible img{transform:rotate(0) translateY(-3px)} .mega-guide:focus-visible{outline:2px solid #0E68FF;outline-offset:2px} .mega-guide__b{position:relative;display:flex;flex-direction:column;gap:5px;min-width:0} .mega-guide__k{font-size:11.5px;font-weight:500;letter-spacing:.02em;color:#6ea2ff} .mega-guide__t{font-size:16px;font-weight:500;line-height:1.25;color:#fff} .mega-guide__d{font-size:12.5px;line-height:1.45;color:#b9bec6} .mega-guide__cta{display:inline-flex;align-items:center;gap:8px;margin-top:6px;font-size:13px;font-weight:500;color:#fff} .mega-guide__cta svg{transition:transform .2s} .mega-guide:hover .mega-guide__cta svg{transform:translateX(3px)} @media (min-width:1025px){ .mega_res{width:720px} .mega_res .mega__cols{display:grid;grid-template-columns:1fr 290px;gap:14px;align-items:stretch} .mega_res .mega-guide{padding:16px 18px;align-items:center} .mega_res .mega-guide img{width:58px} } @media (max-width:1024px){ .mega-guide{margin:4px 0 14px 12px;padding:14px} .mega-guide img{width:56px} .mega-guide__d{display:none} } @media (prefers-reduced-motion:reduce){.mega-guide img,.mega-guide__cta svg{transition:none}} @media (min-width:1025px){.site-header .nav-mega_sm .mega_res{left:auto;right:-60px;margin-left:0}} /* Lösungen-Menü: CTA-Leiste statt Seitenbox (28.10.) */ .mega-bar{display:none} @media (min-width:1025px){ .mega_sol .mega__inner{grid-template-columns:minmax(0,1fr)} .mega_sol .mega__cols{padding:28px 16px 18px 20px} .mega-bar{display:flex;align-items:center;justify-content:space-between;gap:32px;margin:0 20px 20px;padding:18px 18px 18px 26px;border-radius:16px;background:#0b0f17;color:#fff;position:relative;overflow:hidden} .mega-bar::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:24px 24px;pointer-events:none} .mega-bar::after{content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:0 3px 3px 0;background:#0E68FF} .mega-bar__txt,.mega-bar__act{position:relative} .mega-bar__txt{display:flex;flex-direction:column;gap:3px;min-width:0} .mega-bar__k{margin:0;font-size:16px;font-weight:500;line-height:1.3;color:#fff} .mega-bar__t{margin:0;font-size:13.5px;line-height:1.45;color:#b9bec6;max-width:620px} .mega-bar__act{display:flex;align-items:center;gap:22px;flex:none} .main-navigation .mega-bar__link,.mega-bar__link{font-size:14px;color:#e7eaee!important;text-decoration:none!important;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:2px;white-space:nowrap} .mega-bar__link:hover{border-color:#fff} .main-navigation .mega-bar__btn,.mega-bar__btn{display:inline-flex;align-items:center;gap:10px;background:#0E68FF;color:#fff!important;text-decoration:none!important;font-size:14.5px;font-weight:500;padding:12px 20px;border-radius:999px;white-space:nowrap;transition:background-color .15s} .mega-bar__btn:hover{background:#0a55d6} .mega-bar__btn svg{transition:transform .2s}.mega-bar__btn:hover svg{transform:translateX(3px)} } @media (min-width:1025px) and (max-width:1200px){.mega-bar__t{display:none}.mega-bar{padding:14px 14px 14px 22px}} @media (max-width:1024px){ .mega-bar{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin:8px 0 6px;padding:20px;border-radius:14px;background:#0b0f17;color:#fff} .mega-bar__k{margin:0;font-size:16px;font-weight:500;color:#fff} .mega-bar__t{margin:4px 0 0;font-size:13.5px;line-height:1.5;color:#b9bec6} .mega-bar__act{display:flex;flex-direction:column-reverse;align-items:flex-start;gap:12px;width:100%} .main-navigation .mega-bar__btn,.mega-bar__btn{display:flex;justify-content:center;gap:10px;width:100%;background:#0E68FF;color:#fff!important;text-decoration:none!important;font-size:14.5px;font-weight:500;padding:13px 18px;border-radius:999px} .main-navigation .mega-bar__link,.mega-bar__link{font-size:14px;color:#e7eaee!important;text-decoration:underline!important} } @media (prefers-reduced-motion:reduce){.mega-bar__btn svg{transition:none}} @media (min-width:1025px){ .mega_sol .mega__inner{position:relative} .mega_sol .mega-bar{position:sticky;bottom:16px;margin:0 20px 16px;z-index:2;box-shadow:0 -14px 24px 6px #fff,0 20px 0 20px #fff} } /* Zwei Lead-Magnete untereinander (29.10.) */ .mega-guides{display:flex;flex-direction:column;gap:10px} .mega-guides .mega-guide__t{font-size:15px} .mega-guides .mega-guide__cta{margin-top:2px} @media (max-width:1024px){.mega-guides{margin:4px 0 14px 12px;gap:8px}.mega-guides .mega-guide{margin:0}} /* seo.css */ /* ===== Detailseite SEO (/loesungen/seo/) – 27.10. Nutzt cx-System (Farben, Typo, Komponenten) ===== */ .cx-seo .hp{position:absolute;left:-9999px} /* Hero */ .sx-hero{padding:150px 0 96px;background:#fff;position:relative;overflow:hidden} .sx-hero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:64px;align-items:center} .sx-h1{font-size:68px;line-height:1.02;letter-spacing:-.04em;font-weight:400;color:var(--ink);margin:0 0 28px;text-transform:none} .sx-hero__promise{font-size:24px;line-height:1.35;letter-spacing:-.01em;color:var(--ink);margin:0 0 20px;max-width:600px} .sx-hero__intro{font-size:17px;line-height:1.65;color:var(--ink-2);margin:0 0 36px;max-width:600px} .sx-hero__for{margin:28px 0 0;font-size:14px;color:var(--mute)} .cx-seo .cx-crumbs{margin-bottom:32px} /* Hero-Visual */ .sx-vis{position:relative;margin:0;aspect-ratio:1/1.02;border-radius:24px;overflow:hidden;background:#eef0f3} .sx-vis__bg{position:absolute;inset:0} .sx-vis__bg img{width:100%;height:100%;object-fit:cover;object-position:62% 40%;filter:grayscale(1) contrast(1.02);opacity:.9} .sx-vis__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.55))} .sx-serp{position:absolute;left:7%;right:7%;top:9%;background:#fff;border-radius:16px;box-shadow:0 30px 60px rgba(11,15,23,.16),0 2px 6px rgba(11,15,23,.06);padding:16px} .sx-serp__bar{display:flex;align-items:center;gap:10px;border:1px solid #e3e6ea;border-radius:999px;padding:10px 16px;font-size:15px;color:var(--ink);margin-bottom:12px} .sx-serp__g{font-weight:600;color:#1f6bff} .sx-serp__q{white-space:nowrap;overflow:hidden} .sx-serp__caret{width:1px;height:18px;background:var(--ink);animation:sxBlink 1s steps(1) infinite;margin-left:-6px} @keyframes sxBlink{50%{opacity:0}} .sx-serp__list{list-style:none;margin:0;padding:0} .sx-serp__row{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start;padding:12px 10px;border-radius:10px} .sx-serp__row b{display:block;font-weight:500;font-size:14px;color:var(--ink)} .sx-serp__row i{display:block;font-style:normal;font-size:13px;color:var(--mute);line-height:1.4;margin-top:3px} .sx-serp__row i.sk{height:8px;border-radius:4px;background:#edf0f3;width:78%;margin-top:8px} .sx-serp__pos{font-size:12px;color:var(--mute);padding-top:2px;font-variant-numeric:tabular-nums} .sx-serp__row_you{background:#eef4ff} .sx-serp__row_you b{color:#1f6bff} .sx-serp.is-hit .sx-serp__row_you{box-shadow:inset 0 0 0 1px rgba(31,107,255,.35)} .sx-chip{position:absolute;background:#fff;border-radius:14px;padding:14px 16px;box-shadow:0 18px 40px rgba(11,15,23,.14)} .sx-chip__k{display:block;font-size:12px;color:var(--ink-2);margin-bottom:10px} .sx-chip_demand{left:7%;bottom:8%;width:42%} .sx-chip_vis{right:7%;bottom:14%;width:44%;background:#0b0f17;color:#fff} .sx-chip_vis .sx-chip__k{color:#c9ced6} .sx-bars{display:flex;align-items:flex-end;gap:5px;height:54px} .sx-bars i{flex:1;height:var(--h);background:linear-gradient(180deg,#3d80ff,#1f6bff);border-radius:3px 3px 0 0;transform-origin:bottom} .sx-line{width:100%;height:auto;display:block} .sx-line__path{fill:none;stroke:#ffd84d;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:320;stroke-dashoffset:0} .sx-line__area{fill:rgba(255,216,77,.14)} .sx-vis__cap{position:absolute;right:14px;top:auto;bottom:6px;font-size:11px;color:#5f6670;margin:0;left:14px;text-align:right} .cx-anim .sx-bars i{animation:sxGrow 1s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(900ms + var(--k,0)*70ms)} .sx-bars i:nth-child(2){--k:1}.sx-bars i:nth-child(3){--k:2}.sx-bars i:nth-child(4){--k:3}.sx-bars i:nth-child(5){--k:4}.sx-bars i:nth-child(6){--k:5}.sx-bars i:nth-child(7){--k:6}.sx-bars i:nth-child(8){--k:7} @keyframes sxGrow{from{transform:scaleY(0)}to{transform:none}} .cx-anim .sx-line__path{animation:sxDraw 1.8s cubic-bezier(.6,.1,.2,1) 1.1s both} .cx-anim .sx-line__area{animation:sxFade 1s ease 2.2s both} @keyframes sxDraw{from{stroke-dashoffset:320}to{stroke-dashoffset:0}} @keyframes sxFade{from{opacity:0}to{opacity:1}} .cx-anim .sx-chip{animation:sxFloatIn .9s cubic-bezier(.2,.7,.2,1) both} .cx-anim .sx-chip_demand{animation-delay:.7s}.cx-anim .sx-chip_vis{animation-delay:.95s} @keyframes sxFloatIn{from{opacity:0;transform:translate3d(0,24px,0)}to{opacity:1;transform:none}} .cx-anim .sx-serp__row_you{animation:sxRise 1.2s cubic-bezier(.3,.8,.2,1) .8s both} @keyframes sxRise{from{transform:translate3d(0,120px,0);opacity:.3}to{transform:none;opacity:1}} /* Trust */ .sx-trust{border-top:0} /* Problem: 2x2 */ .sx-problem__head{max-width:980px;margin-bottom:56px} .sx-problems{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ink)} .sx-problems li{padding:32px 48px 32px 0;border-bottom:1px solid #d3d7dc} .sx-problems li:nth-child(even){padding:32px 0 32px 48px;border-left:1px solid #d3d7dc} .sx-problems .cx-num{display:block;margin-bottom:20px} .sx-problems .cx-h3{font-size:22px;max-width:460px} .sx-problems p{color:var(--ink-2);line-height:1.6;margin:0;max-width:460px} .cx-seo .cx-problem__close{margin-top:48px} /* Case */ .sx-case__head{max-width:920px;margin-bottom:56px} .sx-case__head .cx-h2{font-size:44px;line-height:1.12;color:#fff} .sx-case__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:64px;align-items:start} .sx-case__media{position:relative;padding-bottom:64px} .sx-case__shot{margin:0;width:88%} .sx-case__vid{position:absolute;right:0;bottom:0;width:34%;margin:0;box-shadow:0 24px 50px rgba(0,0,0,.45);border-radius:14px;overflow:hidden} .sx-case__vid .cx-vid__media{aspect-ratio:9/14} .sx-case__vid .cx-vid__ask{font-size:11px} .cx-anim .sx-case__shot{opacity:0;transform:translate3d(-24px,0,0);transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)} .cx-anim .sx-case__vid{opacity:0;transform:translate3d(0,40px,0);transition:opacity .9s ease .35s,transform 1.1s cubic-bezier(.2,.7,.2,1) .35s} .cx-anim .sx-case__media.is-in .sx-case__shot,.cx-anim .sx-case__media.is-in .sx-case__vid{opacity:1;transform:none} .sx-case__facts{margin:0 0 32px;padding:0;border-top:1px solid #fff} .sx-case__facts>div{display:grid;grid-template-columns:150px 1fr;gap:20px;padding:20px 0;border-bottom:1px solid #262c36} .sx-case__facts dt{font-size:13px;color:#8ea6cc;margin:0} .sx-case__facts dd{margin:0;color:#e7eaee;line-height:1.6;font-size:16px} .sx-case__facts ol{margin:0;padding-left:18px} .sx-case__result dd{color:#fff;font-size:18px;line-height:1.5} .sx-case__quote{background:rgba(255,255,255,.06);border-radius:16px;padding:24px;margin:0 0 16px} .sx-case__quote p{color:#fff;font-size:17px;line-height:1.55;margin:0 0 16px} .sx-case__quote footer span{color:#a9b1bd} .cx-seo .cx-sec_dark .cx-link{color:#fff;border-color:rgba(255,255,255,.4)} /* Bento */ .sx-bento{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px} .sx-tile{position:relative;background:#fff;border:1px solid var(--line);border-radius:20px;padding:32px;display:flex;flex-direction:column;overflow:hidden;transition:border-color .2s,transform .3s cubic-bezier(.2,.7,.2,1)} .sx-tile:hover{border-color:#b9bec6} .sx-tile_wide{grid-column:span 2} .sx-tile_wide2{grid-column:span 2;display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center} .sx-tile_ink{background:#0b0f17;border-color:#0b0f17;color:#fff} .sx-tile_ink2{background:#0b0f17;border-color:#0b0f17;color:#fff} .sx-tile_grey{background:var(--tint);border-color:var(--tint)} .sx-tile__k{font-size:13px;color:var(--mute);margin:0 0 28px;font-variant-numeric:tabular-nums} .sx-tile_ink .sx-tile__k,.sx-tile_ink2 .sx-tile__k{color:#8a9099} .sx-tile__t{font-size:24px;line-height:1.2;letter-spacing:-.015em;font-weight:500;margin:0 0 12px;color:inherit;text-transform:none} .sx-tile_ink .sx-tile__t,.sx-tile_ink2 .sx-tile__t{color:#fff} .sx-tile__x{font-size:15px;line-height:1.6;color:var(--ink-2);margin:0 0 24px} .sx-tile_ink .sx-tile__x,.sx-tile_ink2 .sx-tile__x{color:#c9ced6} .sx-tile__more{margin:auto 0 0;padding-top:20px;font-size:14px;color:var(--mute)} .sx-tile__more a,.sx-note a,.sx-cost__hint a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-2)} .sx-tile__more a:hover,.sx-note a:hover,.sx-cost__hint a:hover{border-color:var(--ink)} .sx-qs{list-style:none;margin:0 0 28px;padding:0;display:flex;flex-wrap:wrap;gap:8px} .sx-qs li{font-size:13px;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.08);color:#e7eaee} .sx-road{display:flex;flex-direction:column;gap:8px;margin-top:auto} .sx-road span{display:block;width:var(--w);font-size:12px;color:#0b0f17;background:#fff;border-radius:6px;padding:7px 10px;transform-origin:left;transition:transform 1s cubic-bezier(.2,.7,.2,1)} .sx-road span:first-child{background:#ffd84d} .cx-anim .sx-bento:not(.is-in) .sx-road span{transform:scaleX(0)} .sx-road span:nth-child(2){transition-delay:.12s}.sx-road span:nth-child(3){transition-delay:.24s}.sx-road span:nth-child(4){transition-delay:.36s} .sx-checks{list-style:none;margin:auto 0 0;padding:0;display:grid;gap:8px} .sx-checks li{position:relative;padding:9px 12px 9px 36px;border-radius:10px;background:var(--tint);font-size:14px} .sx-checks li::before{content:"";position:absolute;left:12px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:#1f6bff;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3C/svg%3E");transform:scale(0);transition:transform .4s cubic-bezier(.3,1.6,.5,1);transition-delay:calc(.5s + var(--j)*.12s)} .sx-checks li::after{content:"";position:absolute;left:16.5px;top:50%;width:5px;height:8px;margin-top:-6px;border:solid #fff;border-width:0 1.6px 1.6px 0;transform:rotate(45deg) scale(0);transition:transform .3s ease;transition-delay:calc(.65s + var(--j)*.12s)} .sx-bento.is-in .sx-checks li::before{transform:scale(1)} .sx-bento.is-in .sx-checks li::after{transform:rotate(45deg) scale(1)} :not(.cx-anim) .sx-checks li::before{transform:scale(1)} .sx-pages{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto} .sx-pages span{font-size:13px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;transition:opacity .5s ease,transform .5s ease;transition-delay:calc(.3s + var(--j)*.08s)} .cx-anim .sx-bento:not(.is-in) .sx-pages span{opacity:0;transform:translate3d(0,8px,0)} .sx-net{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:auto} .sx-net b{grid-column:1/-1;text-align:center;font-weight:500;font-size:13px;background:#0b0f17;color:#fff;border-radius:8px;padding:9px} .sx-net span{font-size:13px;text-align:center;padding:8px;border-radius:8px;background:#fff;border:1px solid var(--line)} .sx-funnel{display:flex;flex-direction:column;align-items:center;gap:6px} .sx-funnel span{width:var(--w);text-align:center;font-size:13px;padding:10px 8px;border-radius:8px;background:var(--tint);color:var(--ink-2);transition:transform .8s cubic-bezier(.2,.7,.2,1)} .sx-funnel span.is-goal{background:#1f6bff;color:#fff;font-weight:500} .sx-funnel span:nth-child(2){transition-delay:.1s}.sx-funnel span:nth-child(3){transition-delay:.2s}.sx-funnel span:nth-child(4){transition-delay:.3s} .cx-anim .sx-bento:not(.is-in) .sx-funnel span{transform:scaleX(.6)} .sx-mon{width:100%;height:auto;margin-top:auto} .sx-mon__grid{stroke:#262c36;stroke-width:1} .sx-mon__a{fill:none;stroke:#3d80ff;stroke-width:2.5;stroke-dasharray:360;stroke-linejoin:round;transition:stroke-dashoffset 1.8s cubic-bezier(.6,.1,.2,1) .4s} .sx-mon__b{fill:none;stroke:#ffd84d;stroke-width:2;stroke-dasharray:360;stroke-linejoin:round;transition:stroke-dashoffset 1.8s cubic-bezier(.6,.1,.2,1) .7s} .cx-anim .sx-bento:not(.is-in) .sx-mon__a,.cx-anim .sx-bento:not(.is-in) .sx-mon__b{stroke-dashoffset:360} .sx-legend{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:#a9b1bd} .cx-anim .sx-bento .sx-tile{opacity:0;transform:translate3d(0,24px,0);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1),border-color .2s;transition-delay:calc(var(--i)*90ms)} .cx-anim .sx-bento.is-in .sx-tile{opacity:1;transform:none} .sx-note{margin:32px 0 0;font-size:15px;color:var(--ink-2);max-width:820px} /* Segmente */ .sx-segs{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)} .sx-segs li>a,.sx-segs li>div{display:grid;grid-template-columns:1fr 1.3fr 24px;gap:24px;align-items:baseline;padding:24px 0;border-bottom:1px solid #d3d7dc;color:inherit;text-decoration:none} .sx-segs .cx-h3{margin:0;font-size:19px} .sx-segs p{margin:0;color:var(--ink-2);line-height:1.55;font-size:15px} .sx-segs__arr{color:var(--mute);transition:transform .2s,color .2s} .sx-segs a:hover .sx-segs__arr{transform:translateX(4px);color:var(--ink)} .sx-segs a:hover .cx-h3{color:#1f6bff} /* Wirkungskette */ .sx-flow__h{color:#fff;max-width:820px;margin-bottom:64px} .sx-chain{list-style:none;margin:0 0 56px;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative} .sx-chain::before{content:"";position:absolute;left:0;right:0;top:27px;height:1px;background:#3a4250} .sx-chain::after{content:"";position:absolute;left:0;right:0;top:27px;height:1px;background:linear-gradient(90deg,#3d80ff,#ffd84d);transform-origin:left;transition:transform 2s cubic-bezier(.6,.1,.2,1) .2s} .cx-anim .sx-chain:not(.is-in)::after{transform:scaleX(0)} .sx-chain li{position:relative;padding-right:16px} .sx-chain__n{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:#0b0f17;border:1px solid #3a4250;color:#a9b1bd;font-size:14px;position:relative;z-index:1;margin-bottom:20px;transition:background-color .4s,border-color .4s,color .4s;transition-delay:calc(.3s + var(--i)*.35s)} .sx-chain.is-in .sx-chain__n{border-color:#3d80ff;color:#fff} .sx-chain li.is-goal .sx-chain__n{background:#ffd84d;border-color:#ffd84d;color:#0b0f17} .cx-anim .sx-chain:not(.is-in) li.is-goal .sx-chain__n{background:#0b0f17;border-color:#3a4250;color:#a9b1bd} .sx-chain__t{display:block;font-size:19px;line-height:1.3;color:#fff;letter-spacing:-.01em} .sx-flow__text{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;border-top:1px solid #262c36;padding-top:32px} .sx-flow__text .cx-lead{color:#c9ced6} .sx-flow__note{margin:0;color:#8a9099;font-size:15px;line-height:1.6} /* Schritte */ .sx-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:32px;border-top:1px solid var(--ink);padding-top:32px} .sx-steps__n{display:block;font-size:56px;font-weight:400;letter-spacing:-.04em;line-height:1;color:#dfe2e6;margin-bottom:24px;transition:color .6s ease;transition-delay:calc(.2s + var(--i)*.15s)} .sx-steps.is-in .sx-steps__n{color:#1f6bff} .sx-steps .cx-h3{font-size:20px} .sx-steps p{margin:0;color:var(--ink-2);line-height:1.6;font-size:15px} /* Optionen */ .sx-opts{display:grid;grid-template-columns:1fr 1fr;gap:16px} .sx-opt{background:#fff;border-radius:24px;padding:40px;display:flex;flex-direction:column;align-items:flex-start} .sx-opt_dark{background:#0b0f17;color:#fff} .sx-opt__k{font-size:13px;color:var(--mute);margin:0 0 16px} .sx-opt__t{font-size:30px;line-height:1.15;letter-spacing:-.02em;font-weight:400;margin:0 0 8px;color:inherit;text-transform:none} .sx-opt_dark .sx-opt__t{color:#fff} .sx-opt__for{margin:0 0 28px;color:var(--ink-2);font-size:16px} .sx-opt_dark .sx-opt__for{color:#c9ced6} .sx-opt__pts{list-style:none;margin:0 0 36px;padding:0;width:100%;border-top:1px solid var(--line)} .sx-opt_dark .sx-opt__pts{border-color:#262c36} .sx-opt__pts li{position:relative;padding:13px 0 13px 28px;border-bottom:1px solid var(--line);font-size:15px} .sx-opt_dark .sx-opt__pts li{border-color:#262c36;color:#e7eaee} .sx-opt__pts li::before{content:"";position:absolute;left:2px;top:19px;width:10px;height:6px;border:solid #1f6bff;border-width:0 0 1.8px 1.8px;transform:rotate(-45deg)} .sx-opt_dark .sx-opt__pts li::before{border-color:#ffd84d} .sx-opt .cx-link,.sx-opt .cx-btn{margin-top:auto} .sx-opt_dark .cx-btn_light:hover{background:#ffd84d!important} /* Warum */ .sx-why__img{margin-top:40px;border-radius:var(--r);overflow:hidden} .sx-why__img img{width:100%;height:auto;display:block;filter:grayscale(1)} .cx-anim .sx-why__img{clip-path:inset(0 0 100% 0);transition:clip-path 1.2s cubic-bezier(.7,0,.2,1) .2s} .cx-anim .aos-animate .sx-why__img,.cx-anim [data-aos].aos-animate .sx-why__img{clip-path:inset(0)} .sx-why{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)} .sx-why li{display:grid;grid-template-columns:56px 1fr;gap:16px;padding:30px 0;border-bottom:1px solid var(--line)} .sx-why .cx-h3{font-size:22px;margin-bottom:8px} .sx-why p{margin:0;color:var(--ink-2);line-height:1.6} /* Kundenstimmen */ .sx-bigq{margin:0 0 56px;max-width:980px} .sx-bigq p{font-size:34px;line-height:1.3;letter-spacing:-.02em;color:var(--ink);margin:0 0 24px} .sx-bigq footer{display:flex;align-items:center;gap:14px} .sx-bigq footer span{display:flex;flex-direction:column;font-size:14px;color:var(--mute)} .sx-bigq footer b{color:var(--ink);font-weight:500;font-size:16px} .sx-bigq .cx-av{width:56px;height:56px} .sx-vids{grid-template-columns:repeat(3,1fr)!important;gap:24px} .sx-vids .cx-vid__media{aspect-ratio:4/5} /* Kosten */ .sx-cost__p{margin:0 0 20px} .sx-cost__k{margin:36px 0 12px;font-size:13px;color:var(--mute)} .sx-factors{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink);counter-reset:f} .sx-factors li{counter-increment:f;display:grid;grid-template-columns:40px 1fr;padding:15px 0;border-bottom:1px solid var(--line);font-size:16px} .sx-factors li::before{content:counter(f,decimal-leading-zero);color:var(--mute);font-size:13px;padding-top:3px} .sx-cost__hint{margin:28px 0 0;padding:20px 24px;border-radius:14px;background:var(--tint);font-size:15px;line-height:1.6;color:var(--ink-2)} /* Abschluss + Formular */ .sx-final{padding:140px 0} .sx-final__grid{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:64px;align-items:center;position:relative} .sx-final .cx-h2{font-size:44px;line-height:1.1} .sx-final__note{font-size:15px;color:var(--ink-2);margin:20px 0 28px} .sx-final__alt{margin:28px 0 0} .sx-form{background:#fff;border-radius:24px;padding:32px;box-shadow:0 30px 70px rgba(11,15,23,.14);border:1px solid #eceef1} .sx-form__h{font-size:20px;font-weight:500;margin:0 0 20px;color:var(--ink)} .sx-field{margin-bottom:14px} .sx-field label{display:block;font-size:13px;color:var(--ink-2);margin-bottom:6px} .sx-field input,.sx-field textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);border:1px solid #d3d7dc;border-radius:10px;padding:12px 14px;background:#fff;transition:border-color .15s,box-shadow .15s} .sx-field textarea{resize:vertical;min-height:84px} .sx-field input:focus,.sx-field textarea:focus{outline:none;border-color:#1f6bff;box-shadow:0 0 0 3px rgba(31,107,255,.15)} .sx-opt-l{color:var(--mute)} .sx-consent{display:grid;grid-template-columns:20px 1fr;gap:10px;font-size:12.5px;line-height:1.5;color:var(--ink-2);margin:6px 0 20px;cursor:pointer} .sx-consent input{width:18px;height:18px;margin:1px 0 0;accent-color:#0b0f17} .sx-consent a{color:var(--ink)} .sx-form__btn{width:100%;justify-content:space-between;border:0;cursor:pointer} .sx-form__fine{margin:12px 0 0;font-size:12px;color:var(--mute)} /* Responsive */ @media (max-width:1024px){ .sx-hero{padding:96px 0 64px} .sx-hero__grid{grid-template-columns:1fr;gap:40px} .sx-h1{font-size:42px} .sx-hero__promise{font-size:20px} .sx-vis{aspect-ratio:1/1.05} .sx-serp{left:5%;right:5%;top:6%;padding:12px} .sx-chip_demand{left:5%;bottom:6%;width:46%}.sx-chip_vis{right:5%;bottom:12%;width:44%} .sx-problems{grid-template-columns:1fr} .sx-problems li,.sx-problems li:nth-child(even){padding:24px 0;border-left:0} .sx-case__head .cx-h2{font-size:28px} .sx-case__grid{grid-template-columns:1fr;gap:40px} .sx-case__facts>div{grid-template-columns:1fr;gap:6px} .sx-bento{grid-template-columns:1fr} .sx-tile_wide,.sx-tile_wide2{grid-column:auto} .sx-tile_wide2{grid-template-columns:1fr} .sx-tile{padding:24px} .sx-segs li>a,.sx-segs li>div{grid-template-columns:1fr 20px;gap:6px 12px} .sx-segs p{grid-column:1/2} .sx-segs__arr{grid-row:1;grid-column:2} .sx-chain{grid-template-columns:1fr;gap:0} .sx-chain::before,.sx-chain::after{left:27px;right:auto;top:0;bottom:0;width:1px;height:auto} .sx-chain::after{background:linear-gradient(180deg,#3d80ff,#ffd84d);transform-origin:top} .cx-anim .sx-chain:not(.is-in)::after{transform:scaleY(0)} .sx-chain li{display:flex;align-items:center;gap:20px;padding:0 0 18px} .sx-chain__n{margin:0;flex:0 0 auto} .sx-flow__text{grid-template-columns:1fr;gap:20px} .sx-steps{grid-template-columns:1fr 1fr;gap:28px 20px} .sx-steps__n{font-size:40px;margin-bottom:12px} .sx-opts{grid-template-columns:1fr} .sx-opt{padding:28px} .sx-opt__t{font-size:24px} .sx-bigq p{font-size:22px} .sx-vids{grid-template-columns:none!important} .sx-final{padding:80px 0} .sx-final__grid{grid-template-columns:1fr;gap:40px} .sx-final .cx-h2{font-size:30px} .sx-form{padding:24px} } @media (max-width:560px){.sx-steps{grid-template-columns:1fr}.sx-h1{font-size:38px}.sx-chip__k{font-size:11px}.sx-bars{height:40px}} @media (prefers-reduced-motion:reduce){ .sx-seo *,.cx-seo .sx-vis *,.cx-seo [class*="sx-"]{animation:none!important;transition:none!important} .cx-anim .sx-bento .sx-tile,.cx-anim .sx-case__shot,.cx-anim .sx-case__vid{opacity:1!important;transform:none!important} .cx-anim .sx-why__img{clip-path:none} .sx-serp__caret{display:none} } /* Bento-Raster: 01(2)+02 | 03+04+06 | 05 volle Breite */ @media (min-width:1025px){.sx-tile_ink2{order:1}.sx-tile_wide2{order:2;grid-column:1/-1;grid-template-columns:1fr 1.2fr}} @media (max-width:1024px){.sx-chip{padding:10px 12px}.sx-chip_demand,.sx-chip_vis{bottom:9%;width:42.5%}.sx-chip_vis{right:5%}.sx-vis__cap{bottom:3px;font-size:10px}.sx-serp__row_you i{display:none}} /* geo.css */ /* ===== Detailseite GEO (/loesungen/geo/) – nutzt cx- und sx-Bausteine der SEO-Seite ===== */ .u-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .gx-fine{margin:20px 0 0;font-size:13px;line-height:1.5;color:var(--mute)} .gx-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:#fff6d1;color:#6b5600;font-weight:500} .gx-badge_dark{background:rgba(255,216,77,.14);color:#ffd84d} .gx-spark{color:#1f6bff;flex:0 0 auto} /* Hero */ .gx-hero{padding:150px 0 96px;background:#fff;overflow:hidden} .gx-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:64px;align-items:center} .gx-demo{position:relative;margin:0;border-radius:24px;overflow:hidden;background:#eef0f3;aspect-ratio:1/1.02} .gx-demo__bg{position:absolute;inset:0} .gx-demo__bg img{width:100%;height:100%;object-fit:cover;object-position:40% 40%;filter:grayscale(1);opacity:.85} .gx-demo__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.25),rgba(255,255,255,.6))} .gx-chat{position:absolute;left:7%;right:7%;top:7%;bottom:9%;background:#fff;border-radius:18px;box-shadow:0 30px 60px rgba(11,15,23,.16),0 2px 6px rgba(11,15,23,.06);padding:20px 22px;display:flex;flex-direction:column;overflow:hidden} .gx-chat__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px} .gx-chat__sys{font-size:12px;color:var(--mute)} .gx-chat__q{align-self:flex-end;max-width:88%;margin:0 0 16px;background:#0b0f17;color:#fff;border-radius:16px 16px 4px 16px;padding:12px 15px;font-size:14px;line-height:1.45;min-height:44px} .gx-chat__a{font-size:13.5px;line-height:1.5;color:var(--ink)} .gx-chat__lead{display:flex;gap:8px;align-items:flex-start;margin:0 0 10px} .gx-chat__lead .gx-spark{margin-top:2px} .gx-chat__list{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:7px} .gx-chat__list li{padding:10px 12px;border-radius:10px;background:#f5f6f8;display:block} .gx-chat__list b{font-weight:500;display:block} .gx-chat__list span{color:var(--ink-2);font-size:12.5px} .gx-chat__list sup{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:#e3ebff;color:#1f6bff;font-size:9.5px;margin-left:4px;vertical-align:1px} .gx-chat__list li.is-you{background:#fff;border:1.5px dashed #1f6bff} .gx-chat__list li.is-you b{color:#1f6bff} .gx-chat__src{list-style:none;margin:auto 0 0;padding:12px 0 0;border-top:1px solid #eceef1;display:flex;flex-wrap:wrap;gap:6px} .gx-chat__src li{font-size:11.5px;color:var(--ink-2);background:#f5f6f8;border-radius:999px;padding:4px 10px 4px 4px;display:flex;align-items:center;gap:6px} .gx-chat__src i{font-style:normal;width:16px;height:16px;border-radius:50%;background:#e3ebff;color:#1f6bff;font-size:9.5px;display:flex;align-items:center;justify-content:center} .cx-anim .gx-chat__lead,.cx-anim .gx-chat__list li,.cx-anim .gx-chat__src li{opacity:0;transform:translate3d(0,8px,0);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.2,1)} .cx-anim .gx-chat__list li{transition-delay:calc(.25s + var(--j)*.22s)} .cx-anim .gx-chat__src li{transition-delay:calc(1s + var(--j)*.12s)} .cx-anim .is-answered .gx-chat__lead,.cx-anim .is-answered .gx-chat__list li,.cx-anim .is-answered .gx-chat__src li{opacity:1;transform:none} .cx-anim .is-answered .gx-chat__list li.is-you{animation:gxPulse 2.4s ease 1.6s 2} @keyframes gxPulse{50%{box-shadow:0 0 0 6px rgba(31,107,255,.12)}} /* Vergleich */ .gx-cmp__h{color:#fff;max-width:900px;margin-bottom:48px} .gx-cmp__stage{margin-bottom:56px} .gx-cmp__q{display:flex;align-items:center;gap:16px;margin-bottom:24px} .gx-cmp__q p{margin:0;font-size:22px;color:#fff;letter-spacing:-.01em} .gx-cmp__cols{display:grid;grid-template-columns:1fr 1fr;gap:16px} .gx-co{border-radius:20px;padding:28px;background:#141923;border:1px solid #262c36} .gx-co_b{background:#fff;color:var(--ink);border-color:#fff} .gx-co header{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid #262c36} .gx-co_b header{border-color:var(--line)} .gx-co__k{font-size:22px;letter-spacing:-.01em;color:#fff} .gx-co_b .gx-co__k{color:var(--ink)} .gx-co__state{font-size:12px;color:#8a9099} .gx-co_b .gx-co__state{color:#1f6bff} .gx-co ul{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:10px} .gx-co li{display:flex;gap:12px;align-items:center;font-size:15px;color:#a9b1bd} .gx-co_b li{color:var(--ink)} .gx-co li i{flex:0 0 18px;height:18px;border-radius:50%;position:relative;border:1.5px dashed #59606b} .gx-co_b li i{border:0;background:#1f6bff} .gx-co_b li i::after{content:"";position:absolute;left:6px;top:4px;width:4px;height:7px;border:solid #fff;border-width:0 1.6px 1.6px 0;transform:rotate(45deg)} .gx-co__meter{height:6px;border-radius:3px;background:#262c36;overflow:hidden;margin-bottom:12px} .gx-co_b .gx-co__meter{background:#edf0f3} .gx-co__meter span{display:block;height:100%;width:var(--v);background:#59606b;border-radius:3px;transform-origin:left;transition:transform 1.4s cubic-bezier(.6,.1,.2,1) .5s} .gx-co_b .gx-co__meter span{background:linear-gradient(90deg,#1f6bff,#3d80ff)} .cx-anim .gx-cmp__stage:not(.is-in) .gx-co__meter span{transform:scaleX(0)} .gx-co__out{margin:0;font-size:13px;color:#8a9099} .gx-co_b .gx-co__out{color:var(--ink-2)} .cx-anim .gx-co li{opacity:0;transform:translate3d(-8px,0,0);transition:opacity .45s ease,transform .5s ease;transition-delay:calc(.15s + var(--j)*.09s)} .cx-anim .gx-co_b li{transition-delay:calc(.6s + var(--j)*.09s)} .cx-anim .gx-cmp__stage.is-in .gx-co li{opacity:1;transform:none} /* Was ist GEO: zwei Kreise mit Schnittmenge */ .gx-what__head{max-width:900px;margin-bottom:56px} .gx-venn{display:grid;grid-template-columns:1fr minmax(220px,.62fr) 1fr;align-items:stretch;position:relative} .gx-venn__c{padding:36px;border-radius:24px;background:var(--tint)} .gx-venn__c_1{grid-column:1;grid-row:1} .gx-venn__c_2{grid-column:3;grid-row:1;background:#0b0f17;color:#fff} .gx-venn__mid{grid-column:2;grid-row:1;align-self:center;margin:0 -28px;z-index:1;background:#1f6bff;color:#fff;border-radius:20px;padding:28px 24px;box-shadow:0 24px 50px rgba(31,107,255,.28)} .gx-venn__mid p{margin:0;font-size:15px;line-height:1.55} .gx-venn__mid .gx-venn__k{color:#cfe0ff;margin-bottom:8px} .gx-venn__t{font-size:24px;font-weight:500;letter-spacing:-.015em;margin:0 0 24px;color:inherit;text-transform:none} .gx-venn__k{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin:16px 0 6px} .gx-venn__c_2 .gx-venn__k{color:#8a9099} .gx-venn__c p:not(.gx-venn__k){margin:0;font-size:15.5px;line-height:1.55;color:var(--ink-2)} .gx-venn__c_2 p:not(.gx-venn__k){color:#c9ced6} .cx-anim .gx-venn__c_1{transform:translate3d(-30px,0,0);opacity:0;transition:transform 1s cubic-bezier(.2,.7,.2,1),opacity .8s ease} .cx-anim .gx-venn__c_2{transform:translate3d(30px,0,0);opacity:0;transition:transform 1s cubic-bezier(.2,.7,.2,1),opacity .8s ease} .cx-anim .gx-venn__mid{transform:scale(.85);opacity:0;transition:transform .7s cubic-bezier(.3,1.4,.5,1) .7s,opacity .5s ease .7s} .cx-anim .gx-venn.is-in>*{transform:none;opacity:1} .gx-key{margin:48px 0 0;font-size:26px;line-height:1.35;letter-spacing:-.015em;color:var(--ink);max-width:900px} .gx-key a{font-size:16px;letter-spacing:0;color:#1f6bff;text-decoration:none;border-bottom:1px solid rgba(31,107,255,.35);white-space:nowrap;margin-left:6px} /* Methode */ .gx-method__head{max-width:900px;margin-bottom:56px} .gx-method{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start} .gx-msteps{list-style:none;margin:0;padding:0;position:relative} .gx-msteps::before{content:"";position:absolute;left:17px;top:18px;bottom:18px;width:1px;background:#d3d7dc} .gx-msteps::after{content:"";position:absolute;left:17px;top:18px;bottom:18px;width:1px;background:#1f6bff;transform-origin:top;transition:transform 2.2s cubic-bezier(.6,.1,.2,1) .2s} .cx-anim .gx-msteps:not(.is-in)::after{transform:scaleY(0)} .gx-msteps li{display:grid;grid-template-columns:36px 1fr;gap:18px;padding:0 0 26px;position:relative} .gx-msteps__n{width:36px;height:36px;border-radius:50%;background:#fff;border:1px solid #d3d7dc;display:flex;align-items:center;justify-content:center;font-size:13px;z-index:1;transition:background-color .4s,color .4s,border-color .4s;transition-delay:calc(.3s + var(--i)*.33s)} .gx-msteps.is-in .gx-msteps__n{background:#1f6bff;border-color:#1f6bff;color:#fff} .gx-msteps h3{font-size:18px;font-weight:500;margin:6px 0 4px;color:var(--ink);text-transform:none;letter-spacing:-.01em} .gx-msteps p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2)} .gx-report{margin:0;background:#fff;border-radius:22px;padding:28px;box-shadow:0 24px 60px rgba(11,15,23,.08);position:sticky;top:110px} .gx-report__top{display:flex;align-items:center;gap:12px;margin-bottom:20px} .gx-report__t{font-size:14px;color:var(--ink-2)} .gx-mx{width:100%;border-collapse:collapse;font-size:14px} .gx-mx th,.gx-mx td{padding:12px 8px;border-bottom:1px solid #eceef1;text-align:center} .gx-mx thead th{font-size:12px;font-weight:500;color:var(--mute);border-bottom:1px solid var(--ink)} .gx-mx th[scope=row],.gx-mx thead th:first-child{text-align:left;font-weight:400;color:var(--ink)} .gx-dot{display:inline-block;width:14px;height:14px;border-radius:50%;vertical-align:middle;transition:transform .4s cubic-bezier(.3,1.6,.5,1);transition-delay:calc(.3s + var(--r,0)*.12s + var(--c,0)*.07s)} .gx-dot_2{background:#1f6bff} .gx-dot_1{background:#fff;border:3px solid #1f6bff} .gx-dot_0{background:#e3e6ea} .cx-anim .gx-report:not(.is-in) .gx-mx .gx-dot{transform:scale(0)} .gx-mx tr{--r:0} .gx-report__foot{display:flex;flex-direction:column;gap:20px;margin-top:20px} .gx-legend{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 20px;font-size:12px;color:var(--ink-2)} .gx-legend li{display:flex;align-items:center;gap:8px} .gx-legend .gx-dot{width:11px;height:11px} .gx-legend .gx-dot_1{border-width:2.5px} .gx-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .gx-sum div{background:var(--tint);border-radius:12px;padding:14px} .gx-sum b{display:block;font-size:20px;font-weight:500;letter-spacing:-.02em;margin-bottom:4px} .gx-sum span{font-size:12.5px;color:var(--ink-2);line-height:1.4;display:block} .gx-sum .is-gap{background:#fff6d1} /* GEO-System: Sticky-Stapel + Bausteine */ .gx-sys{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:64px;align-items:start;margin-top:16px} .gx-stack{position:sticky;top:120px} .gx-stack__in{background:#0b0f17;color:#fff;border-radius:24px;padding:28px;display:flex;flex-direction:column;gap:8px;overflow:hidden;position:relative} .gx-stack__in::before{content:"";position:absolute;inset:auto -30% -40% -30%;height:70%;background:radial-gradient(closest-side,rgba(31,107,255,.35),transparent);pointer-events:none} .gx-stack__k{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#8a9099;margin:0 0 10px} .gx-layer{position:relative;display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:12px;background:#141923;border:1px solid #262c36;font-size:16px;color:#a9b1bd;transition:background-color .35s,color .35s,border-color .35s,transform .35s cubic-bezier(.2,.7,.2,1)} .gx-layer i{font-style:normal;font-size:12px;color:#59606b;font-variant-numeric:tabular-nums} .gx-layer.is-done{color:#fff;border-color:#2d3a55} .gx-layer.is-done i{color:#3d80ff} .gx-layer.is-active{background:#1f6bff;border-color:#1f6bff;color:#fff;transform:translateX(8px)} .gx-layer.is-active i{color:#cfe0ff} .gx-stack__out{display:flex;align-items:center;gap:10px;margin:12px 0 0;padding:14px 16px;border-radius:12px;background:#ffd84d;color:#0b0f17;font-size:14px;font-weight:500;position:relative} .gx-stack__out .gx-spark{color:#0b0f17} .gx-mods{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)} .gx-mod{display:grid;grid-template-columns:56px 1fr;gap:16px;padding:36px 0;border-bottom:1px solid var(--line);transition:opacity .4s} .gx-mod__n{font-size:13px;color:var(--mute);padding-top:6px;font-variant-numeric:tabular-nums} .gx-mod.is-active .gx-mod__n{color:#1f6bff} .gx-mod__t{font-size:26px;line-height:1.2;letter-spacing:-.02em;font-weight:500;margin:0 0 12px;color:var(--ink);text-transform:none} .gx-mod__x{margin:0 0 20px;font-size:16.5px;line-height:1.6;color:var(--ink-2);max-width:640px} .gx-tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px} .gx-tags li{font-size:13.5px;padding:7px 12px;border-radius:999px;border:1px solid var(--line);color:var(--ink)} .gx-mod.is-active .gx-tags li{border-color:#c6d6f7;background:#f3f7ff} .gx-mod__note{margin:18px 0 0;font-size:13.5px;color:var(--mute);padding-left:14px;border-left:2px solid #ffd84d;line-height:1.5} .gx-mod .sx-tile__more{padding-top:12px} /* B2B-Band mit Foto */ .gx-band{position:relative;padding:140px 0;overflow:hidden;background:#0b0f17;color:#fff} .gx-band__bg{position:absolute;inset:0} .gx-band__bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.5);transform:scale(1.12)} .gx-band__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,15,23,.92) 0%,rgba(11,15,23,.6) 60%,rgba(11,15,23,.4))} .gx-band__grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center} .gx-band .cx-h2{color:#fff} .gx-band .cx-lead{color:#c9ced6;margin-bottom:28px} .gx-band .cx-link{color:#fff;border-color:rgba(255,255,255,.4)} .gx-segs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px} .gx-segs li{background:rgba(255,255,255,.08);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:24px} .gx-segs h3{font-size:18px;font-weight:500;margin:0 0 8px;color:#fff;text-transform:none;letter-spacing:-.01em} .gx-segs p{margin:0;font-size:14.5px;line-height:1.55;color:#c9ced6} .cx-anim .gx-segs li{opacity:0;transform:translate3d(0,20px,0);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i)*.1s)} .cx-anim .gx-segs.is-in li{opacity:1;transform:none} /* Lieferergebnisse + Roadmap */ .gx-deliv{list-style:none;margin:32px 0 0;padding:0;border-top:1px solid var(--ink)} .gx-deliv li{position:relative;padding:14px 0 14px 32px;border-bottom:1px solid #d3d7dc;font-size:16px} .gx-deliv li::before{content:"";position:absolute;left:2px;top:20px;width:11px;height:6px;border:solid #1f6bff;border-width:0 0 1.8px 1.8px;transform:rotate(-45deg)} .gx-road{margin:0;background:#fff;border-radius:22px;padding:28px;box-shadow:0 24px 60px rgba(11,15,23,.08)} .gx-road ol{list-style:none;margin:0;padding:0} .gx-road li{display:grid;grid-template-columns:96px 1fr;gap:4px 16px;padding:14px 0;border-bottom:1px solid #eceef1} .gx-road li:last-child{border:0} .gx-road__w{font-size:12px;color:var(--mute);padding-top:2px} .gx-road__t{font-size:15px;color:var(--ink)} .gx-road__p{grid-column:2;height:5px;border-radius:3px;background:#edf0f3;overflow:hidden} .gx-road__p i{display:block;height:100%;width:var(--w);background:#1f6bff;border-radius:3px;transform-origin:left;transition:transform 1.1s cubic-bezier(.6,.1,.2,1);transition-delay:calc(.3s + var(--i)*.15s)} .gx-road li:last-child .gx-road__p i{background:repeating-linear-gradient(90deg,#ffd84d 0 10px,#ffe999 10px 20px)} .cx-anim .gx-road:not(.is-in) .gx-road__p i{transform:scaleX(0)} /* Prozess-Schleife */ .gx-loop__back{margin:24px 0 0;font-size:14px;color:var(--mute)} /* SEO oder GEO */ .gx-both__h{color:#fff;max-width:900px;margin-bottom:56px} .gx-both{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .gx-path{border-radius:20px;padding:28px;background:#141923;border:1px solid #262c36;display:flex;flex-direction:column} .gx-path.is-ours{background:#1f6bff;border-color:#1f6bff} .gx-path h3{font-size:22px;font-weight:500;margin:0 0 10px;color:#fff;text-transform:none;letter-spacing:-.01em} .gx-path p{margin:0 0 28px;font-size:15px;line-height:1.55;color:#c9ced6} .gx-path.is-ours p{color:#e3ebff} .gx-path__flow{list-style:none;margin:auto 0 0;padding:0;display:grid;gap:6px} .gx-path__flow li{position:relative;font-size:13.5px;color:#fff;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.06);transition:opacity .5s ease,transform .5s ease;transition-delay:calc(.3s + var(--i)*.15s + var(--j)*.12s)} .gx-path.is-ours .gx-path__flow li{background:rgba(255,255,255,.16)} .gx-path__flow li+li::before{content:"";position:absolute;left:20px;top:-6px;width:1px;height:6px;background:rgba(255,255,255,.3)} .cx-anim .gx-both:not(.is-in) .gx-path__flow li{opacity:0;transform:translate3d(0,8px,0)} .gx-both__foot{display:flex;justify-content:space-between;align-items:center;gap:32px;margin-top:40px;padding-top:32px;border-top:1px solid #262c36} .gx-both__foot .cx-lead{color:#fff;margin:0;max-width:640px} .gx-both__foot .cx-link{color:#fff;border-color:rgba(255,255,255,.4);white-space:nowrap} /* Responsive */ @media (max-width:1024px){ .gx-hero{padding:96px 0 64px} .gx-hero__grid{grid-template-columns:1fr;gap:40px} .gx-demo{aspect-ratio:auto} .gx-chat{position:relative;left:auto;right:auto;top:auto;bottom:auto;margin:18px;padding:16px} .gx-demo .sx-vis__cap{position:relative;display:block;padding:0 18px 12px;text-align:left} .gx-cmp__cols{grid-template-columns:1fr} .gx-cmp__q{flex-direction:column;align-items:flex-start;gap:10px} .gx-cmp__q p{font-size:18px} .gx-venn{grid-template-columns:1fr;gap:12px} .gx-venn__c_1,.gx-venn__c_2,.gx-venn__mid{grid-column:1;grid-row:auto;margin:0} .gx-venn__c{padding:24px} .gx-key{font-size:20px} .gx-method{grid-template-columns:1fr;gap:40px} .gx-report{position:relative;top:auto;padding:18px} .gx-mx{font-size:12.5px} .gx-mx th,.gx-mx td{padding:10px 4px} .gx-sum{grid-template-columns:1fr} .gx-sys{grid-template-columns:1fr;gap:24px} .gx-stack{display:none} .gx-mod{grid-template-columns:1fr;gap:6px;padding:28px 0} .gx-mod__t{font-size:22px} .gx-band{padding:80px 0} .gx-band__grid{grid-template-columns:1fr;gap:40px} .gx-segs{grid-template-columns:1fr} .gx-road{padding:20px} .gx-both{grid-template-columns:1fr} .gx-both__foot{flex-direction:column;align-items:flex-start} } @media (prefers-reduced-motion:reduce){ .cx-geo [class*="gx-"],.cx-geo [class*="gx-"]::before,.cx-geo [class*="gx-"]::after{animation:none!important;transition:none!important} .cx-anim .gx-co li,.cx-anim .gx-segs li,.cx-anim .gx-venn>*,.cx-anim .gx-chat__list li,.cx-anim .gx-chat__lead,.cx-anim .gx-chat__src li{opacity:1!important;transform:none!important} } /* pr.css */ /* ===== Detailseite Digitale PR (/loesungen/digitale-pr/) – editorial, nutzt cx/sx/gx ===== */ .px-h1{font-size:60px} .px-kicker{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin:8px 0 16px} /* Hero-Grafik: Wahrnehmungsringe */ .px-map{position:relative;margin:0;border-radius:24px;overflow:hidden;background:#0b0f17;aspect-ratio:1/1.02} .px-map__bg{position:absolute;inset:0} .px-map__bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.42);transform:scale(1.05)} .px-map__stage{position:absolute;inset:6% 6% 10%;} .px-ring{position:absolute;left:50%;top:50%;border-radius:50%;border:1px solid rgba(255,255,255,.18);transform:translate(-50%,-50%) scale(.6);opacity:0;transition:transform 1.1s cubic-bezier(.2,.7,.2,1),opacity .8s ease} .px-ring em{position:absolute;left:50%;top:-9px;transform:translateX(-50%);font-style:normal;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#8a9099;background:#141923;padding:2px 8px;border-radius:999px;white-space:nowrap} .px-ring_1{width:38%;aspect-ratio:1;transition-delay:.1s} .px-ring_2{width:68%;aspect-ratio:1;transition-delay:.25s;border-style:dashed} .px-ring_3{width:96%;aspect-ratio:1;transition-delay:.4s;border-color:rgba(255,255,255,.1)} .px-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.7);opacity:0;z-index:2;width:24%;aspect-ratio:1;border-radius:50%;background:#fff;color:#0b0f17;display:flex;align-items:center;justify-content:center;text-align:center;font-size:13px;font-weight:500;line-height:1.2;padding:8px;box-shadow:0 0 0 10px rgba(31,107,255,.18),0 0 60px rgba(31,107,255,.45);transition:transform .8s cubic-bezier(.3,1.4,.5,1),opacity .5s ease} .px-node{--r:0;position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a)) translateY(calc(var(--r) * -1)) rotate(calc(var(--a) * -1));z-index:3} .px-node_r0{--r:min(9.5vw,19%)} .px-node b{position:absolute;transform:translate(-50%,-50%) scale(.6);opacity:0;white-space:nowrap;font-weight:500;font-size:12px;padding:6px 11px;border-radius:999px;background:#fff;color:#0b0f17;box-shadow:0 8px 20px rgba(0,0,0,.3);transition:transform .6s cubic-bezier(.3,1.5,.5,1),opacity .4s ease;transition-delay:calc(.9s + var(--k)*.11s)} .px-node_r1 b{background:#1f6bff;color:#fff} .px-node_r2 b{background:rgba(255,255,255,.12);color:#e7eaee;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.2)} .px-map.is-on .px-ring{transform:translate(-50%,-50%) scale(1);opacity:1} .px-map.is-on .px-core{transform:translate(-50%,-50%) scale(1);opacity:1} .px-map.is-on .px-node b{transform:translate(-50%,-50%) scale(1);opacity:1} .px-map.is-on .px-ring_2{animation:pxSpin 90s linear 2s infinite} @keyframes pxSpin{to{transform:translate(-50%,-50%) rotate(360deg)}} .px-map .sx-vis__cap{color:#8a9099;left:16px;right:16px;text-align:left} /* Radien relativ zur Bühne */ .px-map__stage{container-type:size} .px-node_r0{--r:19cqmin}.px-node_r1{--r:34cqmin}.px-node_r2{--r:48cqmin} /* Vertrauen: Veröffentlichungen */ .px-trust .cx-logos__grid{margin-bottom:8px} .px-pubs{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 24px;margin-top:40px;padding-top:28px;border-top:1px solid var(--line)} .px-pubs .px-kicker{margin:0} .px-pubs__names{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 28px} .px-pubs__names a{font-size:21px;letter-spacing:-.01em;color:var(--ink);text-decoration:none;font-weight:500;opacity:.78;transition:opacity .2s} .px-pubs__names a:hover{opacity:1} .px-pubs__more{margin-left:auto;font-size:14px;color:#1f6bff;text-decoration:none;border-bottom:1px solid rgba(31,107,255,.35)} /* Problem: große Statements */ .px-states{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)} .px-states li{display:grid;grid-template-columns:72px minmax(0,1.3fr) minmax(0,1fr);gap:24px;align-items:baseline;padding:32px 0;border-bottom:1px solid #d3d7dc} .px-states__n{font-size:13px;color:var(--mute);font-variant-numeric:tabular-nums} .px-states h3{font-size:28px;line-height:1.2;letter-spacing:-.02em;font-weight:400;color:var(--ink);margin:0;text-transform:none} .px-states p{margin:0;font-size:16px;line-height:1.6;color:var(--ink-2)} .cx-anim .px-states li{opacity:0;transform:translate3d(0,18px,0);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i)*.12s)} .cx-anim .px-states.is-in li{opacity:1;transform:none} /* Große Idee */ .px-idea{padding-top:140px;padding-bottom:140px} .px-idea__h{font-size:64px;line-height:1.04;letter-spacing:-.035em;font-weight:400;color:#fff;max-width:1000px;margin:0 0 40px;text-transform:none} .px-idea__text{display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:1100px;margin-bottom:80px} .px-idea__text p{margin:0;font-size:18px;line-height:1.65;color:#c9ced6} .px-path{list-style:none;margin:0 0 72px;padding:0;display:grid;grid-template-columns:repeat(5,1fr);position:relative} .px-path::before{content:"";position:absolute;left:0;right:0;top:9px;height:1px;background:#3a4250} .px-path::after{content:"";position:absolute;left:0;right:0;top:9px;height:1px;background:linear-gradient(90deg,#3d80ff,#ffd84d);transform-origin:left;transition:transform 2.4s cubic-bezier(.6,.1,.2,1) .2s} .cx-anim .px-path:not(.is-in)::after{transform:scaleX(0)} .px-path li{position:relative;padding-right:20px} .px-path__dot{display:block;width:19px;height:19px;border-radius:50%;background:#0b0f17;border:1px solid #3a4250;position:relative;z-index:1;margin-bottom:28px;transition:background-color .4s,border-color .4s;transition-delay:calc(.3s + var(--i)*.45s)} .px-path.is-in .px-path__dot{background:#1f6bff;border-color:#1f6bff} .px-path li.is-goal .px-path__dot{width:19px;background:#0b0f17} .px-path.is-in li.is-goal .px-path__dot{background:#ffd84d;border-color:#ffd84d;box-shadow:0 0 0 8px rgba(255,216,77,.15)} .px-path__n{display:block;font-size:12px;color:#8a9099;margin-bottom:8px} .px-path__t{display:block;font-size:24px;line-height:1.2;letter-spacing:-.015em;color:#fff} .px-idea__key{margin:0;padding:40px 0 0;border-top:1px solid #262c36;max-width:1100px} .px-idea__key p{margin:0;font-size:38px;line-height:1.25;letter-spacing:-.02em;color:#a9b1bd} .px-idea__key em{font-style:normal;color:#fff;background:linear-gradient(transparent 62%,rgba(255,216,77,.35) 62%)} /* Markt */ .px-market{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:start} .px-qs{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--ink);counter-reset:q} .px-qs li{counter-increment:q;display:grid;grid-template-columns:40px 1fr;padding:15px 0;border-bottom:1px solid var(--line);font-size:17px;line-height:1.45} .px-qs li::before{content:"?";font-size:15px;color:#1f6bff;font-weight:500} .cx-anim .px-qs li{opacity:0;transform:translate3d(0,10px,0);transition:opacity .5s ease,transform .6s ease;transition-delay:calc(var(--i)*.08s)} .cx-anim .px-qs.is-in li{opacity:1;transform:none} .px-land{margin:0;background:#fff;border:1px solid var(--line);border-radius:22px;padding:28px;position:sticky;top:110px} .px-land__plot{position:relative;aspect-ratio:1.25/1;margin:8px 0 0 22px;border-left:1px solid var(--ink);border-bottom:1px solid var(--ink);background:linear-gradient(to right,transparent 50%,#f5f6f8 50%),linear-gradient(to top,transparent 50%,transparent 50%)} .px-land__plot::before{content:"";position:absolute;left:0;top:0;width:50%;height:50%;background:#eef4ff;border-radius:0 0 18px 0} .px-land__zone{position:absolute;left:12px;top:10px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#1f6bff;z-index:1} .px-land__y{position:absolute;left:-24px;bottom:0;transform-origin:left bottom;transform:rotate(-90deg) translateY(-2px);font-size:11.5px;color:var(--mute);white-space:nowrap} .px-land__x{position:absolute;right:0;bottom:-24px;font-size:11.5px;color:var(--mute)} .px-land__plot ul{list-style:none;margin:0;padding:0} .px-topic{position:absolute;left:var(--x);bottom:var(--y);transform:translate(-50%,50%);z-index:2} .px-topic span{display:block;white-space:nowrap;font-size:12px;padding:6px 10px;border-radius:999px;background:#fff;border:1px solid #d3d7dc;color:var(--ink-2);transition:transform .5s cubic-bezier(.3,1.5,.5,1),opacity .4s ease;transition-delay:calc(.2s + var(--i)*.1s)} .px-topic_busy span{background:#e9ebee;border-color:#e9ebee} .px-topic_open span{background:#1f6bff;border-color:#1f6bff;color:#fff;font-weight:500} .px-topic_low span{opacity:.6} .cx-anim .px-land:not(.is-in) .px-topic span{transform:scale(0);opacity:0} .px-land .gx-fine{margin-top:36px} /* Säulen */ .px-pillars{list-style:none;margin:16px 0 0;padding:0;border-top:1px solid var(--ink)} .px-pillar{display:grid;grid-template-columns:120px minmax(0,1fr) minmax(0,1.15fr);gap:32px;padding:44px 0;border-bottom:1px solid #d3d7dc;align-items:start} .px-pillar__n{font-size:64px;line-height:.9;letter-spacing:-.05em;font-weight:400;color:#dfe2e6;transition:color .8s ease .2s} .px-pillar.is-in .px-pillar__n{color:#1f6bff} .px-pillar__t{font-size:28px;line-height:1.15;letter-spacing:-.02em;font-weight:400;color:var(--ink);margin:0;text-transform:none} .px-pillar__body p{margin:0;font-size:16.5px;line-height:1.65;color:var(--ink-2)} .px-pillar__body blockquote{margin:20px 0 0;padding:0 0 0 18px;border-left:2px solid #ffd84d;font-size:17px;line-height:1.5;color:var(--ink)} .cx-anim .px-pillar .px-pillar__t,.cx-anim .px-pillar .px-pillar__body{opacity:0;transform:translate3d(0,16px,0);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1)} .cx-anim .px-pillar .px-pillar__body{transition-delay:.15s} .cx-anim .px-pillar.is-in .px-pillar__t,.cx-anim .px-pillar.is-in .px-pillar__body{opacity:1;transform:none} /* B2B-Recherche */ .px-journey__in{position:relative} .px-journey__head{max-width:860px;margin-bottom:56px} .px-touch{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:12px;position:relative} .px-touch li{background:rgba(255,255,255,.08);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:22px} .px-touch li:last-child{background:#fff;border-color:#fff} .px-touch__n{display:inline-flex;width:28px;height:28px;border-radius:50%;align-items:center;justify-content:center;font-size:12px;background:rgba(255,255,255,.12);color:#fff;margin-bottom:16px} .px-touch li:last-child .px-touch__n{background:#ffd84d;color:#0b0f17} .px-touch h3{font-size:18px;font-weight:500;margin:0 0 8px;color:#fff;text-transform:none} .px-touch li:last-child h3{color:var(--ink)} .px-touch p{margin:0;font-size:14px;line-height:1.5;color:#c9ced6} .px-touch li:last-child p{color:var(--ink-2)} .cx-anim .px-touch li{opacity:0;transform:translate3d(0,24px,0);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i)*.16s)} .cx-anim .px-touch.is-in li{opacity:1;transform:none} .px-journey__note{margin:28px 0 0;font-size:13.5px;color:#a9b1bd} /* Belege */ .px-proof{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:start} .px-proof__img{border-radius:var(--r);overflow:hidden;margin-bottom:28px} .px-proof__img img{display:block;width:100%;height:auto;filter:grayscale(1)} .px-proof__facts{border-top:1px solid var(--ink)} .px-proof__facts>div{border-color:var(--line)} .px-proof__facts dt{color:var(--mute)} .px-proof__facts dd{color:var(--ink-2)} .px-clips{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)} .px-clips a{display:grid;grid-template-columns:118px 1fr 24px;grid-template-rows:auto auto;gap:4px 20px;padding:20px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit} .px-clips__t{grid-row:1/3;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);padding-top:4px} .px-clips__m{font-size:13px;color:#1f6bff;font-weight:500} .px-clips__h{grid-column:2;font-size:18px;line-height:1.35;letter-spacing:-.01em;color:var(--ink)} .px-clips__a{grid-column:3;grid-row:1/3;align-self:center;color:var(--mute);transition:transform .2s,color .2s} .px-clips a:hover .px-clips__h{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} .px-clips a:hover .px-clips__a{color:var(--ink);transform:translate(2px,-2px)} .cx-anim .px-clips li{opacity:0;transform:translate3d(14px,0,0);transition:opacity .5s ease,transform .6s ease;transition-delay:calc(var(--i)*.07s)} .cx-anim .px-clips.is-in li{opacity:1;transform:none} /* Gegenüberstellung */ .px-vs{display:grid;grid-template-columns:1fr 64px 1fr;align-items:stretch} .px-vs__col{border-radius:20px;padding:32px} .px-vs__col_a{border:1px solid #262c36} .px-vs__col_b{background:#fff;color:var(--ink)} .px-vs__col h3{font-size:22px;font-weight:500;margin:0 0 20px;color:inherit;text-transform:none} .px-vs__col_a h3{color:#a9b1bd} .px-vs__col ul{list-style:none;margin:0;padding:0} .px-vs__col li{padding:13px 0;border-top:1px solid #262c36;font-size:16px} .px-vs__col_a li{color:#8a9099} .px-vs__col_b li{border-color:var(--line);position:relative;padding-left:26px} .px-vs__col_b li::before{content:"";position:absolute;left:2px;top:19px;width:10px;height:6px;border:solid #1f6bff;border-width:0 0 1.8px 1.8px;transform:rotate(-45deg)} .px-vs__mid{display:flex;align-items:center;justify-content:center;color:#ffd84d;font-size:28px} .cx-anim .px-vs__col li{opacity:0;transition:opacity .5s ease;transition-delay:calc(.2s + var(--j)*.1s)} .cx-anim .px-vs__col_b li{transition-delay:calc(.8s + var(--j)*.1s)} .cx-anim .px-vs.is-in li{opacity:1} .cx-anim .px-vs__mid span{display:inline-block;transform:translateX(-12px);opacity:0;transition:transform .6s ease .6s,opacity .6s ease .6s} .cx-anim .px-vs.is-in .px-vs__mid span{transform:none;opacity:1} .px-vs__note{margin:28px 0 0;font-size:15px;color:#a9b1bd} /* Zusammenspiel */ .px-mix{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink);border-bottom:1px solid var(--line)} .px-mix li{padding:32px 28px 32px 0;display:flex;flex-direction:column} .px-mix li+li{padding-left:28px;border-left:1px solid var(--line)} .px-mix h3{font-size:24px;font-weight:400;letter-spacing:-.02em;margin:0 0 12px;color:var(--ink);text-transform:none} .px-mix p{margin:0 0 20px;font-size:15.5px;line-height:1.55;color:var(--ink-2)} .px-mix a,.px-mix__here{margin-top:auto;font-size:14px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-2);align-self:flex-start} .px-mix__here{border:0;color:#1f6bff} .px-mix li.is-pr{background:#0b0f17;margin:-1px 0;padding:33px 28px} .px-mix li.is-pr h3{color:#fff} .px-mix li.is-pr p{color:#c9ced6} .px-mix li.is-pr .px-mix__here{color:#ffd84d} .cx-anim .px-mix li{opacity:0;transform:translate3d(0,16px,0);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i)*.12s)} .cx-anim .px-mix.is-in li{opacity:1;transform:none} .px-mix__text{font-size:22px} /* Responsive */ @media (max-width:1024px){ .px-h1{font-size:38px} .px-map{aspect-ratio:1/1} .px-node b{font-size:10.5px;padding:5px 8px} .px-ring em{font-size:9px} .px-pubs{flex-direction:column;align-items:flex-start} .px-pubs__names a{font-size:17px} .px-pubs__more{margin-left:0} .px-states li{grid-template-columns:1fr;gap:8px;padding:24px 0} .px-states h3{font-size:22px} .px-idea{padding-top:80px;padding-bottom:80px} .px-idea__h{font-size:36px} .px-idea__text{grid-template-columns:1fr;gap:16px;margin-bottom:48px} .px-idea__text p{font-size:16.5px} .px-path{grid-template-columns:1fr;margin-bottom:48px} .px-path::before,.px-path::after{left:9px;right:auto;top:0;bottom:0;width:1px;height:auto} .px-path::after{background:linear-gradient(180deg,#3d80ff,#ffd84d);transform-origin:top} .cx-anim .px-path:not(.is-in)::after{transform:scaleY(0)} .px-path li{display:grid;grid-template-columns:19px 1fr;column-gap:18px;padding:0 0 22px} .px-path__dot{grid-row:1/3;margin:2px 0 0} .px-path__t{font-size:20px} .px-idea__key p{font-size:24px} .px-market,.px-proof{grid-template-columns:1fr;gap:40px} .px-land{position:relative;top:auto;padding:18px} .px-topic span{font-size:10px;padding:4px 7px} .px-pillar{grid-template-columns:1fr;gap:12px;padding:32px 0} .px-pillar__n{font-size:40px} .px-pillar__t{font-size:23px} .px-touch{grid-template-columns:1fr} .px-clips a{grid-template-columns:1fr 20px} .px-clips__t{grid-row:auto;grid-column:1} .px-clips__m,.px-clips__h{grid-column:1} .px-clips__a{grid-column:2;grid-row:1/4} .px-vs{grid-template-columns:1fr} .px-vs__mid{transform:rotate(90deg);height:48px} .px-vs__col{padding:24px} .px-mix{grid-template-columns:1fr} .px-mix li,.px-mix li+li{padding:24px 0;border-left:0;border-top:1px solid var(--line)} .px-mix li.is-pr{padding:24px 20px;margin:0;border-radius:16px} .px-mix__text{font-size:18px} } @media (prefers-reduced-motion:reduce){ .cx-pr [class*="px-"],.cx-pr [class*="px-"]::before,.cx-pr [class*="px-"]::after,.cx-pr [class*="px-"] b,.cx-pr [class*="px-"] span{animation:none!important;transition:none!important} .cx-anim .px-states li,.cx-anim .px-qs li,.cx-anim .px-touch li,.cx-anim .px-clips li,.cx-anim .px-mix li,.cx-anim .px-vs__col li,.cx-anim .px-pillar .px-pillar__t,.cx-anim .px-pillar .px-pillar__body{opacity:1!important;transform:none!important} } .px-h1{font-size:54px} .px-map .sx-vis__cap{bottom:10px;font-size:11px} .px-map__stage{inset:5% 5% 12%} @media (max-width:1024px){.px-h1{font-size:36px}.px-map__stage{inset:4% 4% 14%}} /* Hero-Map Feinschliff */ .px-core{width:19%;font-size:12px} .px-ring_1{width:46%} .px-ring_2{width:72%} .px-node_r0{--r:23cqmin}.px-node_r1{--r:36cqmin}.px-node_r2{--r:47cqmin} .px-map{display:flex;flex-direction:column} .px-map__stage{position:relative;inset:auto;flex:1;margin:5% 5% 0} .px-map .sx-vis__cap{position:relative;left:auto;right:auto;bottom:auto;padding:10px 18px 14px;margin:0} @media (max-width:1024px){ .px-map{aspect-ratio:auto} .px-map__stage{aspect-ratio:1/1;flex:none;margin:6% 8% 0} .px-node b{font-size:9.5px;padding:4px 7px} .px-ring em{display:none} .px-core{font-size:10px;width:22%} .px-node_r2{--r:45cqmin} } @media (max-width:1024px){.px-node_r2{display:none}.px-node_r0{--r:24cqmin}.px-node_r1{--r:40cqmin}.px-node b{font-size:10.5px}} /* web.css */ /* ===== Detailseite Websites & Conversion (/loesungen/websites-conversion/) ===== */ .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .wx-h1{font-size:56px} .wx-hero__grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)} /* Hero-Demo */ .wx-demo{margin:0;position:relative} .wx-browser{border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 30px 70px -30px rgba(11,15,23,.35),0 0 0 1px rgba(11,15,23,.08)} .wx-browser__bar{display:flex;align-items:center;gap:6px;padding:11px 14px;background:#f1f3f5;border-bottom:1px solid #e3e6ea} .wx-browser__bar i{width:9px;height:9px;border-radius:50%;background:#d3d7dc} .wx-browser__bar span{margin-left:12px;flex:1;max-width:280px;font-size:11px;color:#8a9099;background:#fff;border-radius:6px;padding:4px 10px} .wx-site{padding:16px 20px 20px;display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:12px;color:#0b0f17} .wx-site__nav{grid-column:1/-1;display:flex;align-items:center;gap:16px;padding-bottom:10px;border-bottom:1px solid #eef0f2;font-size:10.5px;color:#6b7280} .wx-site__nav b{color:#0b0f17;font-size:12px;margin-right:auto} .wx-site__nav em{font-style:normal;background:#0b0f17;color:#fff;padding:4px 10px;border-radius:999px} .wx-zone{position:relative;border-radius:12px;padding:14px;background:#f7f8fa;transition:box-shadow .5s ease,background-color .5s ease,opacity .5s ease,transform .5s ease} .wx-zone_1{grid-column:1/-1;background:#0b0f17;color:#fff;padding:22px 20px;background-image:linear-gradient(110deg,#0b0f17 45%,rgba(11,15,23,.6)),url(../photos/mtn2-hero-800.webp);background-size:cover;background-position:center 60%} .wx-zone_1 small{display:block;font-size:10px;color:#a9b1bd;margin-bottom:6px;letter-spacing:.04em;text-transform:uppercase} .wx-zone_1 strong{display:block;font-size:21px;line-height:1.15;font-weight:500;letter-spacing:-.02em;margin-bottom:12px} .wx-btnmock{display:inline-block;font-size:10.5px;background:#fff;color:#0b0f17;padding:6px 12px;border-radius:999px} .wx-zone_2{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:10px;background:transparent;border:1px dashed transparent} .wx-zone_2>div{background:#f7f8fa;border-radius:9px;padding:10px} .wx-zone_2 b{display:block;font-size:11px;margin-bottom:8px} .wx-zone_2 i,.wx-zone_3 i{display:block;height:5px;border-radius:3px;background:#dfe2e6;margin-top:5px} .wx-zone_2 i+i{width:70%} .wx-zone_3{display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:center} .wx-ref__img{width:44px;height:44px;border-radius:8px;background:linear-gradient(135deg,#c9ced6,#8a9099)} .wx-zone_3 small{font-size:9.5px;color:#6b7280;text-transform:uppercase;letter-spacing:.05em} .wx-zone_3 b{display:block;font-size:11px;line-height:1.3;margin:2px 0} .wx-badges{grid-column:1/-1;display:flex;gap:6px} .wx-badges em{font-style:normal;font-size:9.5px;border:1px solid #d3d7dc;border-radius:999px;padding:3px 8px;color:#4b5563} .wx-zone_4 b{display:block;font-size:12px;margin-bottom:8px} .wx-field{display:block;height:20px;border-radius:6px;background:#fff;border:1px solid #e3e6ea;margin-bottom:6px} .wx-zone_4 .wx-btnmock{background:#1f6bff;color:#fff;margin-top:2px} /* Hervorhebung je Schritt */ .wx-site[data-step="1"] .wx-zone:not(.wx-zone_1), .wx-site[data-step="2"] .wx-zone:not(.wx-zone_2), .wx-site[data-step="3"] .wx-zone:not(.wx-zone_3), .wx-site[data-step="4"] .wx-zone:not(.wx-zone_4){opacity:.35} .wx-site[data-step="1"] .wx-zone_1,.wx-site[data-step="2"] .wx-zone_2,.wx-site[data-step="3"] .wx-zone_3,.wx-site[data-step="4"] .wx-zone_4{box-shadow:0 0 0 2px #1f6bff,0 14px 30px -12px rgba(31,107,255,.45);transform:scale(1.015)} .wx-site[data-step="3"] .wx-zone_3{box-shadow:0 0 0 2px #ffd84d,0 14px 30px -12px rgba(200,160,0,.4)} .wx-site[data-step="4"] .wx-zone_4 .wx-btnmock{animation:wxPulse 1.3s ease-in-out .3s 2} @keyframes wxPulse{50%{box-shadow:0 0 0 6px rgba(31,107,255,.25)}} .wx-demo__steps{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px} .wx-demo__steps li{padding:10px 0 0;border-top:2px solid #dfe2e6;transition:border-color .4s ease} .wx-demo__steps span{display:block;font-size:11px;color:var(--mute)} .wx-demo__steps b{display:block;font-size:14px;font-weight:500;color:var(--ink);margin:2px 0} .wx-demo__steps em{display:block;font-style:normal;font-size:12px;line-height:1.35;color:var(--mute)} .wx-demo__steps li.is-on{border-color:#1f6bff} .wx-demo__steps li.is-on:nth-child(3){border-color:#ffd84d} .wx-cap{margin-top:12px;font-size:11.5px;color:var(--mute)} .wx-trust__note{margin:18px 0 0;font-size:13px;color:var(--mute)} /* Problem */ .wx-probs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink)} .wx-probs li{padding:28px 24px 28px 0} .wx-probs li+li{padding-left:24px;border-left:1px solid #d3d7dc} .wx-probs__ico{display:inline-flex;width:36px;height:36px;border-radius:50%;align-items:center;justify-content:center;border:1px solid var(--ink);font-size:16px;margin-bottom:20px;color:var(--ink)} .wx-probs h3{font-size:21px;line-height:1.25;letter-spacing:-.015em;font-weight:400;margin:0 0 10px;color:var(--ink);text-transform:none} .wx-probs p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2)} .cx-anim .wx-probs li{opacity:0;transform:translate3d(0,18px,0);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i)*.12s)} .cx-anim .wx-probs.is-in li{opacity:1;transform:none} .wx-probs__close{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:48px;align-items:end} .wx-probs__close p{margin:0;font-size:22px;line-height:1.35} .wx-probs__close strong{font-weight:500;background:linear-gradient(transparent 62%,rgba(255,216,77,.5) 62%)} .wx-probs__close blockquote{margin:0;padding-left:18px;border-left:2px solid #1f6bff;font-size:18px;line-height:1.5;color:var(--ink-2)} /* B2B vs B2C */ .wx-vs{padding-top:130px;padding-bottom:130px} .wx-vs__h{margin-bottom:24px} .wx-vs__lead{max-width:820px;font-size:18px;line-height:1.65;color:#c9ced6;margin:0 0 64px} .wx-race{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:24px;align-items:start} .wx-lane{border-radius:22px;padding:32px;position:relative} .wx-lane_c{border:1px solid #262c36} .wx-lane_b{background:#121823;border:1px solid #232b38} .wx-lane__t{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:500;color:#fff;margin:0 0 28px;text-transform:none} .wx-lane__ico{display:inline-flex;width:36px;height:36px;border-radius:50%;align-items:center;justify-content:center;background:rgba(255,255,255,.08);color:#fff} .wx-lane_b .wx-lane__ico{background:#1f6bff} .wx-steps{list-style:none;margin:0;padding:0;position:relative} .wx-steps::before{content:"";position:absolute;left:15px;top:8px;bottom:8px;width:1px;background:#2b3340} .wx-steps li{position:relative;display:grid;grid-template-columns:32px 1fr auto;gap:14px;align-items:center;padding:10px 0;opacity:.28;transform:translate3d(-6px,0,0);transition:opacity .45s ease,transform .5s ease} .wx-steps li.is-on{opacity:1;transform:none} .wx-steps__n{position:relative;z-index:1;width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;background:#0b0f17;border:1px solid #3a4250;color:#a9b1bd;transition:background-color .4s,border-color .4s,color .4s} .wx-lane_b .wx-steps__n{background:#121823} .wx-steps li.is-on .wx-steps__n{background:#fff;border-color:#fff;color:#0b0f17} .wx-lane_b .wx-steps li.is-on .wx-steps__n{background:#1f6bff;border-color:#1f6bff;color:#fff} .wx-steps__t{font-size:16.5px;line-height:1.35;color:#e7eaee} .wx-role{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:#a9b1bd;border:1px solid #2f3846;border-radius:999px;padding:4px 9px;white-space:nowrap} .wx-end{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center;margin-top:20px;padding:16px 18px;border-radius:14px;opacity:.28;transform:translate3d(0,8px,0);transition:opacity .5s ease,transform .5s ease} .wx-end.is-on{opacity:1;transform:none} .wx-end_c{background:rgba(255,255,255,.06)} .wx-end_b{background:#fff} .wx-cart{grid-row:1/3;display:inline-flex;width:40px;height:40px;border-radius:50%;align-items:center;justify-content:center;background:rgba(255,255,255,.1);color:#fff} .wx-end_b .wx-cart{background:#ffd84d;color:#0b0f17} .wx-end b{font-size:17px;font-weight:500;color:#fff} .wx-end_b b{color:#0b0f17} .wx-end em{font-style:normal;font-size:13px;color:#a9b1bd} .wx-end_b em{color:#4b5563} .wx-race.is-done .wx-steps li,.wx-race.is-done .wx-end{opacity:1;transform:none} .wx-vs__note{margin:32px 0 0;max-width:860px;font-size:15px;line-height:1.6;color:#a9b1bd} /* Drei Perspektiven */ .wx-views{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px} .wx-view{position:relative;z-index:1;background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px;display:flex;flex-direction:column} .wx-view__who{display:flex;align-items:center;gap:10px;margin:0 0 18px;font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--mute)} .wx-view__who span{display:inline-flex;width:30px;height:30px;border-radius:50%;align-items:center;justify-content:center;background:#0b0f17;color:#fff;font-size:11px;letter-spacing:0} .wx-view:nth-child(2) .wx-view__who span{background:#1f6bff} .wx-view:nth-child(3) .wx-view__who span{background:#ffd84d;color:#0b0f17} .wx-view__q{margin:0 0 24px;font-size:23px;line-height:1.3;letter-spacing:-.015em;color:var(--ink)} .wx-view__a{margin:auto 0 0;padding-top:18px;border-top:1px solid var(--line);font-size:14.5px;line-height:1.55;color:var(--ink-2)} .wx-view__a span{display:block;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--mute);margin-bottom:4px} .wx-views__core{grid-column:1/-1;display:flex;justify-content:center;position:relative;height:70px} .wx-views__core::before{content:"";position:absolute;left:16.6%;right:16.6%;top:0;height:34px;border:1px solid var(--line-2);border-top:0;border-radius:0 0 18px 18px} .wx-views__core::after{content:"";position:absolute;left:50%;top:0;height:34px;width:1px;background:var(--line-2)} .wx-views__core span{position:absolute;top:34px;transform:translateY(-50%);background:#0b0f17;color:#fff;font-size:13px;padding:8px 16px;border-radius:999px;z-index:1} .cx-anim .wx-view{opacity:0;transform:translate3d(0,20px,0);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i)*.15s)} .cx-anim .wx-views.is-in .wx-view{opacity:1;transform:none} .cx-anim .wx-views__core{opacity:0;transition:opacity .6s ease .6s} .cx-anim .wx-views.is-in .wx-views__core{opacity:1} .wx-views__close{margin-top:24px} /* Funnel */ .wx-funnel{list-style:none;margin:8px 0 0;padding:0;border-top:1px solid var(--ink)} .wx-funnel li{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,.8fr);gap:28px;align-items:center;padding:16px 0;border-bottom:1px solid #d3d7dc} .wx-funnel__bar{position:relative;display:flex;align-items:center;gap:14px;height:56px;padding:0 18px;border-radius:12px;color:#fff;width:var(--w);background:#0b0f17;transform-origin:left;transition:transform .9s cubic-bezier(.2,.7,.2,1),background-color .4s;transition-delay:calc(var(--i)*.14s)} .wx-funnel li:nth-child(n+2) .wx-funnel__bar{background:#1d2532} .wx-funnel li:nth-child(n+3) .wx-funnel__bar{background:#2c4a8a} .wx-funnel li:nth-child(n+4) .wx-funnel__bar{background:#1f6bff} .wx-funnel li:last-child .wx-funnel__bar{background:#ffd84d;color:#0b0f17} .wx-funnel__n{font-size:11px;opacity:.7} .wx-funnel__bar b{font-size:18px;font-weight:500} .wx-funnel__x{margin:0;font-size:15px;line-height:1.5;color:var(--ink-2)} .wx-funnel__loss{position:relative;margin:0;padding-left:22px;font-size:13.5px;line-height:1.45;color:#9a3412} .wx-funnel__loss::before,.wx-dot{content:"";position:absolute;left:0;top:5px;width:10px;height:10px;border-radius:50%;background:#f97316;box-shadow:0 0 0 4px rgba(249,115,22,.15)} .wx-funnel li:last-child .wx-funnel__loss{opacity:1} .cx-anim .wx-funnel:not(.is-in) .wx-funnel__bar{transform:scaleX(.1)} .cx-anim .wx-funnel__x,.cx-anim .wx-funnel__loss{opacity:0;transition:opacity .5s ease;transition-delay:calc(.5s + var(--i)*.14s)} .cx-anim .wx-funnel.is-in .wx-funnel__x,.cx-anim .wx-funnel.is-in .wx-funnel__loss{opacity:1} .wx-funnel__legend{position:relative;margin:18px 0 6px;padding-left:22px;font-size:13px;color:var(--mute)} .wx-dot{display:block} /* Geschäftsmodelle */ .wx-types{list-style:none;margin:0 0 20px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .wx-types>li{background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px;display:flex;flex-direction:column} .wx-types h3{font-size:19px;line-height:1.25;font-weight:500;margin:20px 0 8px;color:var(--ink);text-transform:none} .wx-types p{margin:0 0 16px;font-size:14.5px;line-height:1.55;color:var(--ink-2)} .wx-types .gx-tags{margin-top:auto} .wx-types .gx-tags li{font-size:12px;padding:5px 10px} .wx-types__more{margin-top:14px;font-size:14px;color:#1f6bff} .wx-wire{height:110px;border-radius:12px;background:#f3f5f7;padding:12px;display:grid;gap:6px;overflow:hidden} .wx-wire i{display:block;border-radius:4px;background:#dfe2e6;transition:background-color .5s ease;transition-delay:calc(var(--i)*.1s + .3s)} .wx-wire_1{grid-template-columns:1fr 1fr 1fr;grid-template-rows:34px 1fr 1fr}.wx-wire_1 i:first-child{grid-column:1/-1} .wx-wire_2{grid-template-columns:40px 1fr;grid-template-rows:1fr 1fr 1fr}.wx-wire_2 i:nth-child(1){grid-row:1/3;border-radius:50%;height:40px} .wx-wire_3{grid-template-columns:1.4fr 1fr;grid-template-rows:1fr 1fr 18px}.wx-wire_3 i:nth-child(1){grid-row:1/3} .wx-wire_4{grid-template-columns:repeat(3,1fr);grid-template-rows:14px 1fr 1fr}.wx-wire_4 i:nth-child(1){grid-column:1/-1} .wx-types.is-in .wx-wire i:first-child{background:#0b0f17} .wx-types.is-in .wx-wire_2 i:first-child{background:#1f6bff} .wx-types.is-in .wx-wire_4 i:nth-child(2){background:#ffd84d} .cx-anim .wx-types>li{opacity:0;transform:translate3d(0,16px,0);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i)*.1s)} .cx-anim .wx-types.is-in>li{opacity:1;transform:none} /* Technik */ .wx-tech{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #262c36} .wx-tech li{padding:18px 20px 18px 0;border-bottom:1px solid #262c36} .wx-tech li:nth-child(even){padding-left:20px;border-left:1px solid #262c36} .wx-tech b{display:block;font-size:16px;font-weight:500;color:#fff;margin-bottom:4px} .wx-tech span{font-size:14px;color:#a9b1bd} .wx-tech__note{margin-top:24px;font-size:13.5px;color:#8a9099} .cx-anim .wx-tech li{opacity:0;transition:opacity .5s ease;transition-delay:calc(var(--i)*.06s)} .cx-anim .wx-tech.is-in li{opacity:1} /* Relaunch oder neu */ .wx-fork{display:grid;grid-template-columns:1fr 1fr;gap:20px;position:relative} .wx-fork__opt{border:1px solid var(--line);border-radius:22px;padding:32px;background:#fff} .wx-fork__opt_b{background:#0b0f17;border-color:#0b0f17;color:#fff} .wx-fork__k{display:inline-block;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-bottom:14px} .wx-fork__opt_b .wx-fork__k{color:#ffd84d} .wx-fork__opt h3{font-size:26px;letter-spacing:-.02em;font-weight:400;margin:0 0 12px;color:inherit;text-transform:none} .wx-fork__opt p{margin:0 0 20px;font-size:16px;line-height:1.6;color:var(--ink-2)} .wx-fork__opt_b p{color:#c9ced6} .wx-fork__opt ul{list-style:none;margin:0;padding:0} .wx-fork__opt li{padding:10px 0 10px 24px;border-top:1px solid var(--line);position:relative;font-size:15px} .wx-fork__opt_b li{border-color:#262c36} .wx-fork__opt li::before{content:"";position:absolute;left:2px;top:17px;width:9px;height:5px;border:solid #1f6bff;border-width:0 0 1.6px 1.6px;transform:rotate(-45deg)} .wx-fork__opt_b li::before{border-color:#ffd84d} .cx-anim .wx-fork__opt{opacity:0;transform:translate3d(0,16px,0);transition:opacity .6s ease,transform .7s ease} .cx-anim .wx-fork__opt_b{transition-delay:.15s} .cx-anim .wx-fork.is-in .wx-fork__opt{opacity:1;transform:none} .wx-fork__text{margin-top:28px} /* Portfolio */ .wx-port__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:28px} .wx-card{background:#fff;border-radius:24px;overflow:hidden;border:1px solid var(--line);display:flex;flex-direction:column;transition:transform .4s ease,box-shadow .4s ease} .wx-card:nth-child(4n+1),.wx-card:nth-child(4n){} .wx-card:hover{transform:translateY(-4px);box-shadow:0 24px 50px -28px rgba(11,15,23,.35)} .wx-card__shot{aspect-ratio:16/10;background:#e9ecef;overflow:hidden} .wx-card__shot img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 1.2s ease} .wx-card:hover .wx-card__shot img{transform:scale(1.03)} .wx-card__ph{height:100%;display:grid;grid-template-rows:22px 1fr 40px;gap:10px;padding:22px;background:repeating-linear-gradient(135deg,#eef0f3 0 14px,#e8ebee 14px 28px)} .wx-card__ph i{border-radius:8px;background:rgba(255,255,255,.75)} .wx-card__body{padding:26px 28px 30px} .wx-card__meta{margin:0 0 6px;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--mute)} .wx-card h3{font-size:24px;font-weight:400;letter-spacing:-.02em;margin:0 0 14px;color:var(--ink);text-transform:none} .wx-card dl{margin:0 0 16px} .wx-card dl div{display:grid;grid-template-columns:120px 1fr;gap:12px;padding:8px 0;border-top:1px solid var(--line);font-size:14.5px} .wx-card dt{color:var(--mute)}.wx-card dd{margin:0;color:var(--ink-2)} .wx-card_ph{border-style:dashed;border-color:#c9ced6} .wx-card_ph h3{color:#8a9099} .wx-card__hint{margin:0;font-size:13.5px;line-height:1.55;color:#6b7280;background:#fffbea;border:1px solid #f5e6a3;border-radius:10px;padding:12px 14px} .wx-card__hint code{font-size:12.5px;background:#fff;padding:1px 5px;border-radius:4px} .cx-anim .wx-card{opacity:0;transform:translate3d(0,22px,0)} .cx-anim .wx-card.is-in{opacity:1;transform:none;transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1)} .wx-port__empty{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;padding:32px;border:1px solid var(--line);border-radius:22px;background:#fff} .wx-port__empty p{margin:0;font-size:20px;line-height:1.4;color:var(--ink);max-width:620px} /* Hub */ .wx-hubwrap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px;align-items:center} .wx-hub__links{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px} .wx-hub__links a{display:inline-block;font-size:14px;padding:8px 14px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink);text-decoration:none;transition:background-color .2s,color .2s} .wx-hub__links a:hover{background:#0b0f17;color:#fff} .wx-hub{position:relative;margin:0;display:grid;grid-template-columns:130px 1fr 130px;align-items:center;min-height:340px} .wx-hub__in,.wx-hub__out{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:space-between;height:300px;position:relative;z-index:2} .wx-hub__out{justify-content:space-around;height:300px} .wx-hub__in li,.wx-hub__out li{font-size:13px;padding:8px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);text-align:center;white-space:nowrap} .wx-hub__out li{background:#0b0f17;color:#fff;border-color:#0b0f17} .wx-hub__out li:last-child{background:#ffd84d;color:#0b0f17;border-color:#ffd84d} .wx-hub__lines{position:absolute;left:130px;right:130px;top:20px;height:300px;width:calc(100% - 260px);z-index:0;overflow:visible} .wx-hub__lines path{fill:none;stroke:#c9ced6;stroke-width:1.3;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.2s ease;transition-delay:calc(var(--i)*.12s)} .wx-hub__lines path.out{stroke:#1f6bff;transition-delay:calc(1.1s + var(--i)*.12s)} .cx-anim .wx-hub:not(.is-in) .wx-hub__lines path{stroke-dashoffset:1} .wx-hub__core{position:relative;z-index:2;justify-self:center;width:150px;padding:14px;border-radius:16px;background:#fff;border:1px solid var(--ink);box-shadow:0 20px 40px -24px rgba(11,15,23,.45);text-align:center;transition:transform .6s cubic-bezier(.3,1.4,.5,1) .9s} .cx-anim .wx-hub:not(.is-in) .wx-hub__core{transform:scale(.85)} .wx-hub__mini{display:grid;grid-template-rows:12px 22px 10px;gap:5px;margin-bottom:10px} .wx-hub__mini i{border-radius:4px;background:#dfe2e6}.wx-hub__mini i:first-child{background:#0b0f17}.wx-hub__mini i:last-child{background:#1f6bff;width:50%;justify-self:center;border-radius:999px} .wx-hub__core b{font-size:15px;font-weight:500} .cx-anim .wx-hub__in li{opacity:0;transform:translateX(-8px);transition:opacity .4s ease,transform .4s ease;transition-delay:calc(var(--i)*.1s)} .cx-anim .wx-hub__out li{opacity:0;transform:translateX(8px);transition:opacity .4s ease,transform .4s ease;transition-delay:calc(1.4s + var(--i)*.12s)} .cx-anim .wx-hub.is-in li{opacity:1;transform:none} .wx-hub figcaption{grid-column:1/-1;margin-top:24px} .wx-why li>div{padding:4px 0} .wx-cost__tags{margin:0 0 28px} /* Responsive */ @media (max-width:1100px){ .wx-hero__grid{grid-template-columns:1fr} .wx-probs{grid-template-columns:1fr 1fr} .wx-probs li:nth-child(3){padding-left:0;border-left:0} .wx-probs li:nth-child(n+3){border-top:1px solid #d3d7dc} .wx-types{grid-template-columns:1fr 1fr} } @media (max-width:1024px){ .wx-h1{font-size:36px} .wx-site{padding:12px;gap:8px} .wx-site__nav span{display:none} .wx-zone_1 strong{font-size:16px} .wx-zone_2 b{font-size:10px} .wx-demo__steps{grid-template-columns:1fr 1fr;gap:10px 12px} .wx-probs{grid-template-columns:1fr} .wx-probs li,.wx-probs li+li{padding:22px 0;border-left:0;border-top:1px solid #d3d7dc} .wx-probs li:first-child{border-top:0} .wx-probs__close{grid-template-columns:1fr;gap:20px} .wx-probs__close p{font-size:19px} .wx-vs{padding-top:80px;padding-bottom:80px} .wx-vs__lead{font-size:16.5px;margin-bottom:40px} .wx-race{grid-template-columns:1fr} .wx-lane{padding:22px} .wx-steps li{grid-template-columns:32px 1fr} .wx-role{grid-column:2;justify-self:start;margin-top:-4px} .wx-views{grid-template-columns:1fr} .wx-views__core{display:none} .wx-view__q{font-size:20px} .wx-funnel li{grid-template-columns:1fr;gap:10px} .wx-funnel__bar{height:48px} .wx-types{grid-template-columns:1fr} .wx-tech{grid-template-columns:1fr} .wx-tech li:nth-child(even){padding-left:0;border-left:0} .wx-fork{grid-template-columns:1fr} .wx-fork__opt{padding:24px} .wx-port__grid{grid-template-columns:1fr;gap:20px} .wx-card dl div{grid-template-columns:1fr;gap:2px} .wx-card:hover{transform:none;box-shadow:none} .wx-hubwrap{grid-template-columns:1fr;gap:36px} .wx-hub{grid-template-columns:1fr;min-height:0;gap:0} .wx-hub__lines{display:none} .wx-hub__in{flex-direction:row;flex-wrap:wrap;height:auto;justify-content:center;gap:6px} .wx-hub__out{flex-direction:row;height:auto;justify-content:center;gap:6px} .wx-hub__in li,.wx-hub__out li{font-size:12px;padding:6px 10px} .wx-hub__core{margin:20px auto;position:relative} .wx-hub__core::before,.wx-hub__core::after{content:"";position:absolute;left:50%;width:1px;height:20px;background:#c9ced6} .wx-hub__core::before{top:-21px}.wx-hub__core::after{bottom:-21px;background:#1f6bff} } @media (prefers-reduced-motion:reduce){ .cx-web [class*="wx-"],.cx-web [class*="wx-"]::before,.cx-web [class*="wx-"] path{animation:none!important;transition:none!important} .cx-anim .wx-probs li,.cx-anim .wx-view,.cx-anim .wx-views__core,.cx-anim .wx-types>li,.cx-anim .wx-tech li,.cx-anim .wx-fork__opt,.cx-anim .wx-card,.cx-anim .wx-hub li,.cx-anim .wx-funnel__x,.cx-anim .wx-funnel__loss{opacity:1!important;transform:none!important} .cx-anim .wx-funnel .wx-funnel__bar,.cx-anim .wx-hub .wx-hub__core{transform:none!important} .cx-anim .wx-hub .wx-hub__lines path{stroke-dashoffset:0!important} .wx-steps li,.wx-end{opacity:1!important;transform:none!important} } .wx-hub{align-items:start;min-height:0} .wx-hub__core{align-self:center;margin-top:0} .wx-hub__lines{top:0} @media (max-width:1024px){.wx-hub__core{align-self:auto}} /* Portfolio v2: echte Projekte */ .wx-port__group+.wx-port__group{margin-top:64px} .wx-port__gh{display:flex;align-items:baseline;gap:14px;font-size:22px;font-weight:500;letter-spacing:-.01em;margin:0 0 22px;padding-bottom:14px;border-bottom:1px solid var(--ink);color:var(--ink);text-transform:none} .wx-port__gh span{font-size:14px;font-weight:400;color:var(--mute)} .wx-port__grid_media{grid-template-columns:repeat(3,1fr);gap:20px} .wx-card__shot{display:block;position:relative;aspect-ratio:auto;background:#fff;border-bottom:1px solid var(--line)} .wx-card__bar{display:flex;align-items:center;gap:5px;height:28px;padding:0 12px;background:#f1f3f5;border-bottom:1px solid #e3e6ea} .wx-card__bar i{width:7px;height:7px;border-radius:50%;background:#d3d7dc} .wx-card__bar em{margin-left:10px;font-style:normal;font-size:11px;color:#8a9099;background:#fff;border-radius:5px;padding:2px 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .wx-card__shot img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top} .wx-card__t{font-size:24px;font-weight:400;letter-spacing:-.02em;margin:0 0 10px;color:var(--ink)} .wx-port__grid_media .wx-card__t{font-size:20px} .wx-card__text{margin:0 0 16px;font-size:15px;line-height:1.55;color:var(--ink-2)} .wx-port__grid_media .wx-card__text{font-size:14px} .wx-card__tags{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:6px} .wx-card__tags li{font-size:12px;padding:4px 10px;border-radius:999px;background:#f1f3f5;color:var(--ink-2)} .wx-card__note{margin:-6px 0 16px;font-size:13px;color:#1f6bff} .wx-card__body{display:flex;flex-direction:column;flex:1} .wx-card__link{margin-top:auto;align-self:flex-start} .wx-card__hint{margin:0 0 14px} .wx-card_ph{opacity:.75} .cx-anim .wx-card.is-in{transition-delay:calc(var(--i,0)*.08s)} .wx-port__fine{margin-top:28px} @media (max-width:1100px){.wx-port__grid_media{grid-template-columns:1fr 1fr}} @media (max-width:1024px){.wx-port__grid_media{grid-template-columns:1fr}.wx-port__gh{flex-direction:column;gap:2px}.wx-port__group+.wx-port__group{margin-top:44px}} .wx-card__shot,.wx-card__shot:hover{text-decoration:none}.wx-card__bar em{text-decoration:none} /* outreach.css */ /* ===== Detailseite B2B-Outreach & Leadgenerierung ===== */ .ox-h1{font-size:54px} .ox-hero__grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)} /* Hero-Sieb */ .ox-sieve{margin:0} .ox-sieve__panel{position:relative;border-radius:20px;background:#0b0f17;padding:34px 34px 96px;overflow:hidden;box-shadow:0 30px 70px -30px rgba(11,15,23,.45)} .ox-sieve__panel::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 20%,rgba(31,107,255,.22),transparent 55%);pointer-events:none} .ox-dots{position:relative;display:grid;grid-template-columns:repeat(16,1fr);gap:10px} .ox-dots i{display:block;aspect-ratio:1;border-radius:50%;background:#3a4250;transition:background-color .7s ease,transform .7s cubic-bezier(.3,1.4,.5,1),opacity .7s ease,box-shadow .7s ease;transition-delay:calc(var(--n)*6ms)} .ox-dots[data-stage="1"] i:not(.k1),.ox-dots[data-stage="2"] i:not(.k1),.ox-dots[data-stage="3"] i:not(.k1){opacity:.18;transform:scale(.6)} .ox-dots[data-stage="1"] i.k1{background:#c9ced6} .ox-dots[data-stage="2"] i.k1:not(.k2),.ox-dots[data-stage="3"] i.k1:not(.k2){opacity:.4;background:#6b7280} .ox-dots[data-stage="2"] i.k2,.ox-dots[data-stage="3"] i.k2{background:#1f6bff;transform:scale(1.25);box-shadow:0 0 0 5px rgba(31,107,255,.2)} .ox-dots[data-stage="3"] i.k2:not(.k3){background:#4b6aa8;box-shadow:none;transform:scale(1.05)} .ox-dots[data-stage="3"] i.k3{background:#ffd84d;transform:scale(1.45);box-shadow:0 0 0 6px rgba(255,216,77,.22)} .ox-sieve__counter{position:absolute;left:34px;right:34px;bottom:26px;display:flex;flex-direction:column;gap:2px;padding-top:16px;border-top:1px solid #262c36} .ox-sieve__stage{font-size:22px;font-weight:500;color:#fff;letter-spacing:-.01em} .ox-sieve__sub{font-size:13.5px;color:#a9b1bd} .ox-stages{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:6px} .ox-stages li{padding-top:9px;border-top:2px solid #dfe2e6;transition:border-color .4s} .ox-stages span{display:block;font-size:10.5px;color:var(--mute)} .ox-stages b{display:block;font-size:12.5px;font-weight:500;color:var(--ink);line-height:1.25} .ox-stages em{display:none} .ox-stages li.is-done{border-color:#9aa3b0} .ox-stages li.is-on{border-color:#1f6bff} .ox-stages li.is-on:last-child{border-color:#ffd84d} /* Trust kompakt */ .ox-trust .cx-trust__top{margin-bottom:0} /* Cases */ .ox-cases{padding-top:96px} .ox-cases__grid{display:grid;grid-template-columns:1fr 1fr;gap:28px} .ox-case{background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden;display:flex;flex-direction:column} .ox-case__shot{display:block;text-decoration:none;border-bottom:1px solid var(--line)} .ox-case__shot img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;transition:transform 1.2s ease} .ox-case:hover .ox-case__shot img{transform:scale(1.02)} .ox-case__body{padding:26px 28px 30px} .ox-case__t{font-size:28px;font-weight:400;letter-spacing:-.02em;margin:0 0 20px;color:var(--ink)} .ox-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0 0 22px;border-top:1px solid var(--ink);border-bottom:1px solid var(--line)} .ox-kpis div{display:flex;flex-direction:column-reverse;padding:14px 12px 14px 0} .ox-kpis div+div{padding-left:14px;border-left:1px solid var(--line)} .ox-kpis dd{margin:0;font-size:34px;line-height:1.05;letter-spacing:-.03em;color:var(--ink);font-weight:400} .ox-kpis div:first-child dd{color:#1f6bff} .ox-kpis dt{font-size:12.5px;color:var(--mute);margin-top:4px} .cx-anim .ox-kpis div{opacity:0;transform:translate3d(0,10px,0);transition:opacity .5s ease,transform .6s ease;transition-delay:calc(.2s + var(--i)*.12s)} .cx-anim .ox-case.is-in .ox-kpis div{opacity:1;transform:none} .ox-case__dl{margin:0} .ox-case__dl div{display:grid;grid-template-columns:110px 1fr;gap:14px;padding:10px 0;border-top:1px solid var(--line);font-size:14.5px;line-height:1.55} .ox-case__dl div:first-child{border-top:0} .ox-case__dl dt{color:var(--mute)} .ox-case__dl dd{margin:0;color:var(--ink-2)} .ox-case__dl strong{font-weight:500;color:var(--ink)} .cx-anim .ox-case{opacity:0;transform:translate3d(0,22px,0)} .cx-anim .ox-case.is-in{opacity:1;transform:none;transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1)} .ox-own{margin-top:28px;display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center;padding:44px 48px;border-radius:24px;background:#0b0f17;color:#fff;position:relative;overflow:hidden} .ox-own::after{content:"";position:absolute;right:-120px;top:-120px;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(31,107,255,.35),transparent 70%)} .ox-own .cx-label{color:#a9b1bd} .ox-own__h{font-size:34px;font-weight:400;letter-spacing:-.02em;margin:10px 0 14px;color:#fff} .ox-own__text{margin:0;font-size:16.5px;line-height:1.6;color:#c9ced6} .ox-own__r{position:relative;z-index:1;border-left:1px solid #262c36;padding-left:44px} .ox-own__kpi{margin:0;font-size:64px;line-height:1;letter-spacing:-.04em;color:#ffd84d} .ox-own__kl{margin:10px 0 18px;font-size:15px;color:#c9ced6} .ox-own__ch{list-style:none;margin:0;padding:0;display:flex;gap:8px} .ox-own__ch li{font-size:13px;padding:6px 12px;border-radius:999px;border:1px solid #3a4250;color:#fff} .cx-anim .ox-own{opacity:0;transform:translate3d(0,22px,0);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1)} .cx-anim .ox-own.is-in{opacity:1;transform:none} .cx-anim .ox-own__kpi{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s cubic-bezier(.3,.7,.2,1) .4s} .cx-anim .ox-own.is-in .ox-own__kpi{clip-path:inset(0 0 0 0)} .ox-cases .gx-fine{margin-top:20px} /* Masse vs Relevanz */ .ox-mvr{display:grid;grid-template-columns:1fr 1fr;gap:24px} .ox-side{border-radius:22px;padding:32px;position:relative} .ox-side_m{border:1px solid #262c36} .ox-side_r{background:#121823;border:1px solid #232b38} .ox-side_r .wx-lane__ico{background:#1f6bff} .ox-spray,.ox-focus{position:relative;height:150px;margin:0 0 24px;border-radius:14px;background:rgba(255,255,255,.03);overflow:hidden} .ox-spray i{position:absolute;left:calc(var(--x)*1% * .92 + 2%);top:calc(var(--y)*1% * .8 + 6%);width:9px;height:9px;border-radius:50%;background:#6b7280;opacity:0;transform:scale(.3);transition:opacity .4s ease,transform .4s ease;transition-delay:calc(var(--n)*25ms)} .ox-mvr.is-in .ox-spray i{opacity:.75;transform:scale(1)} .ox-mvr.is-done .ox-spray i:nth-child(n){opacity:.28} .ox-mvr.is-done .ox-spray i:nth-child(17){opacity:1;background:#c9ced6} .ox-focus{display:grid;grid-template-columns:repeat(10,1fr);gap:8px;padding:20px;align-content:center} .ox-focus i{display:block;aspect-ratio:1;border-radius:50%;background:#3a4250;transition:opacity .6s ease,background-color .6s ease,transform .6s cubic-bezier(.3,1.4,.5,1),box-shadow .6s;transition-delay:calc(var(--n)*15ms)} .ox-mvr.is-in .ox-focus i:not(.on){opacity:.22;transform:scale(.6)} .ox-mvr.is-in .ox-focus i.on{background:#1f6bff;transform:scale(1.3);box-shadow:0 0 0 5px rgba(31,107,255,.22);transition-delay:calc(.6s + var(--n)*20ms)} .ox-mvr.is-done .ox-focus i.on:nth-child(22){background:#ffd84d;box-shadow:0 0 0 6px rgba(255,216,77,.2)} .ox-list{list-style:none;margin:0;padding:0} .ox-list li{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid #262c36;font-size:15.5px;color:#e7eaee} .ox-list_m li{color:#a9b1bd} .ox-list_m li::before{content:"";width:6px;height:6px;border-radius:50%;background:#6b7280;flex:none} .ox-list__n{flex:none;width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;background:#1f6bff;color:#fff} .ox-list_r em{margin-left:auto;font-style:normal;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:#a9b1bd;border:1px solid #2f3846;border-radius:999px;padding:3px 9px} .cx-anim .ox-list li{opacity:0;transform:translate3d(-6px,0,0);transition:opacity .45s ease,transform .5s ease;transition-delay:calc(.3s + var(--k)*.11s)} .cx-anim .ox-mvr.is-in .ox-list li{opacity:1;transform:none} .ox-side__end{margin:18px 0 0;padding:14px 16px;border-radius:12px;background:rgba(255,255,255,.05);font-size:15px;color:#c9ced6} .ox-side__end_r{background:#fff;color:#0b0f17;font-weight:500} /* Markt */ .ox-market{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:20px} .ox-market__q{position:relative;z-index:1;background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px 30px} .ox-market__q:nth-child(odd){padding-right:70px}.ox-market__q:nth-child(even){padding-left:70px} .ox-market__ico{display:inline-flex;width:44px;height:44px;border-radius:12px;align-items:center;justify-content:center;background:#f1f3f5;color:var(--ink);margin-bottom:18px} .ox-market__q:nth-child(2) .ox-market__ico{background:#e8f0ff;color:#1f6bff} .ox-market__q:nth-child(3) .ox-market__ico{background:#fff6d6;color:#8a6d00} .ox-market__q h3{font-size:21px;font-weight:500;margin:0 0 8px;color:var(--ink);text-transform:none} .ox-market__q p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2)} .ox-market__core{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);width:112px;height:112px;border-radius:50%;background:#0b0f17;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;box-shadow:0 0 0 10px #fff,0 0 0 11px var(--line)} .cx-anim .ox-market__q{opacity:0;transform:translate3d(0,16px,0);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i)*.12s)} .cx-anim .ox-market.is-in .ox-market__q{opacity:1;transform:none} .cx-anim .ox-market__core{transform:translate(-50%,-50%) scale(.6);opacity:0;transition:transform .7s cubic-bezier(.3,1.4,.5,1) .55s,opacity .4s ease .55s} .cx-anim .ox-market.is-in .ox-market__core{transform:translate(-50%,-50%);opacity:1} .ox-market+.gx-key{margin-top:28px} /* Datensatz */ .ox-data{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:center} .ox-rec{margin:0} .ox-rec__card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px 26px;box-shadow:0 24px 60px -36px rgba(11,15,23,.4)} .ox-rec__head{display:flex;align-items:center;gap:14px;padding-bottom:16px;border-bottom:1px solid var(--line)} .ox-rec__logo{flex:none;width:44px;height:44px;border-radius:12px;background:#0b0f17;color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:500} .ox-rec__head b{display:block;font-size:16.5px;font-weight:500} .ox-rec__head em{display:block;font-style:normal;font-size:12.5px;color:var(--mute)} .ox-rec__badge{margin-left:auto;font-size:12px;padding:5px 11px;border-radius:999px;background:#ffd84d;color:#0b0f17;opacity:0;transform:scale(.8);transition:opacity .4s ease 1.5s,transform .5s cubic-bezier(.3,1.4,.5,1) 1.5s} .ox-rec.is-in .ox-rec__badge{opacity:1;transform:none} .ox-rec__checks{list-style:none;margin:6px 0 0;padding:0} .ox-rec__checks li{display:grid;grid-template-columns:22px 1fr auto;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid #f1f3f5;font-size:14.5px} .ox-rec__checks b{font-weight:500;color:var(--ink)} .ox-rec__checks em{font-style:normal;font-size:13px;color:var(--mute);text-align:right} .ox-tick{width:22px;height:22px;border-radius:50%;border:1.5px solid #d3d7dc;position:relative;transition:background-color .35s ease,border-color .35s ease;transition-delay:calc(.2s + var(--i)*.2s)} .ox-tick::after{content:"";position:absolute;left:6.5px;top:4px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .3s ease;transition-delay:calc(.3s + var(--i)*.2s)} .ox-rec.is-in .ox-tick{background:#1f6bff;border-color:#1f6bff} .ox-rec.is-in .ox-tick::after{transform:rotate(45deg) scale(1)} .ox-rec__bar{height:6px;border-radius:999px;background:#f1f3f5;margin-top:18px;overflow:hidden} .ox-rec__bar span{display:block;height:100%;width:100%;background:linear-gradient(90deg,#1f6bff,#ffd84d);transform-origin:left;transform:scaleX(0);transition:transform 1.3s cubic-bezier(.3,.7,.2,1) .2s} .ox-rec.is-in .ox-rec__bar span{transform:none} .ox-rec figcaption{margin-top:14px} /* Buying Center */ .ox-bc{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:28px;align-items:stretch} .ox-bc__roles{display:flex;flex-direction:column;gap:8px} .ox-bc__role{display:flex;align-items:center;gap:14px;width:100%;text-align:left;font:inherit;font-size:17px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 16px;cursor:pointer;transition:background-color .25s,border-color .25s,color .25s,transform .25s} .ox-bc__role:hover{border-color:var(--ink)} .ox-bc__role[aria-selected="true"]{background:#0b0f17;border-color:#0b0f17;color:#fff;transform:translateX(6px)} .ox-bc__role:focus-visible{outline:2px solid #1f6bff;outline-offset:2px} .ox-bc__av{flex:none;width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#f1f3f5;color:var(--ink);font-size:13px;font-weight:500} .ox-bc__role[aria-selected="true"] .ox-bc__av{background:#1f6bff;color:#fff} .ox-bc__panels{position:relative;border-radius:22px;background:#f3f5f7;padding:40px 40px 36px;display:flex} .ox-bc__panel{display:flex;flex-direction:column;justify-content:center;animation:oxIn .45s ease} @keyframes oxIn{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}} .ox-bc__who{margin:0 0 10px;font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--mute)} .ox-bc__q{margin:0 0 26px;font-size:30px;line-height:1.25;letter-spacing:-.02em;color:var(--ink)} .ox-bc__n{margin:0;padding-top:18px;border-top:1px solid #d3d7dc;font-size:15.5px;color:var(--ink-2)} .ox-bc__n span{display:block;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--mute);margin-bottom:4px} .cx-anim .ox-bc__role{opacity:0;transform:translate3d(-10px,0,0);transition:opacity .4s ease,transform .5s ease,background-color .25s,border-color .25s,color .25s;transition-delay:calc(var(--i)*.08s),calc(var(--i)*.08s),0s,0s,0s} .cx-anim .ox-bc.is-in .ox-bc__role{opacity:1;transform:none} .cx-anim .ox-bc.is-in .ox-bc__role[aria-selected="true"]{transform:translateX(6px)} .ox-bc+.gx-key{margin-top:28px} /* Kontaktpunkte Orbit */ .ox-tp__close{margin-top:20px;padding-left:16px;border-left:2px solid #1f6bff;font-size:16px;line-height:1.6;color:var(--ink-2)} .ox-orbit{position:relative;margin:0;aspect-ratio:1;max-width:520px;width:100%;justify-self:center} .ox-orbit__ring{position:absolute;inset:12%;border-radius:50%;border:1px dashed #c9ced6} .ox-orbit__ring_2{inset:32%;border-style:solid;border-color:#e3e6ea} .ox-orbit__core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 20px;border-radius:18px;background:#0b0f17;color:#fff;z-index:2} .ox-orbit__core .ox-bc__av{background:#ffd84d;color:#0b0f17} .ox-orbit__core b{font-size:14px;font-weight:500} .ox-orbit__pts{list-style:none;margin:0;padding:0;position:absolute;inset:0} .ox-orbit__pts li{position:absolute;left:50%;top:50%;transform:rotate(var(--a)) translate(38%) rotate(calc(-1 * var(--a)));width:0;height:0} .ox-orbit__pts li span{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;font-size:13px;padding:8px 13px;border-radius:999px;background:#fff;border:1px solid var(--line);box-shadow:0 8px 20px -14px rgba(11,15,23,.4);color:var(--ink)} .ox-orbit__pts li:nth-child(3) span{background:#1f6bff;color:#fff;border-color:#1f6bff} .ox-orbit__pts li:nth-child(5) span{background:#0b0f17;color:#fff;border-color:#0b0f17} .ox-orbit__pts li{transform:rotate(var(--a)) translateX(min(190px,37vw)) rotate(calc(-1 * var(--a)))} .cx-anim .ox-orbit__pts li span{opacity:0;transition:opacity .45s ease;transition-delay:calc(.2s + var(--i)*.14s)} .cx-anim .ox-orbit.is-in .ox-orbit__pts li span{opacity:1} .ox-orbit.is-in .ox-orbit__ring{animation:oxSpin 60s linear infinite} @keyframes oxSpin{to{transform:rotate(360deg)}} .ox-orbit figcaption{position:absolute;left:0;right:0;bottom:-34px;text-align:center} /* Funnel dunkel */ .ox-fun{padding-top:120px;padding-bottom:120px} .ox-legend{display:flex;gap:18px;margin:0 0 18px;font-size:13px;color:#c9ced6} .ox-legend span{display:inline-flex;align-items:center;gap:8px} .ox-legend span::before{content:"";width:12px;height:12px;border-radius:3px} .o-poosch::before,.ox-legend .o-poosch::before{background:#1f6bff} .ox-legend .o-both::before{background:linear-gradient(90deg,#1f6bff 50%,#ffd84d 50%)} .ox-legend .o-client::before{background:#ffd84d} .ox-pipe{list-style:none;margin:0;padding:0;border-top:1px solid #262c36} .ox-pipe li{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) 140px;gap:28px;align-items:center;padding:14px 0;border-bottom:1px solid #262c36} .ox-pipe__bar{display:flex;align-items:center;gap:14px;height:54px;padding:0 18px;border-radius:12px;width:var(--w);transform-origin:left;transition:transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i)*.13s)} .ox-pipe li.o-poosch .ox-pipe__bar{background:#1f6bff;color:#fff} .ox-pipe li.o-both .ox-pipe__bar{background:linear-gradient(90deg,#1f6bff,#5a6f9c 55%,#c9a93a);color:#fff} .ox-pipe li.o-client .ox-pipe__bar{background:#ffd84d;color:#0b0f17} .ox-pipe__n{font-size:11px;opacity:.75} .ox-pipe__bar b{font-size:17.5px;font-weight:500;white-space:nowrap} .ox-pipe__x{margin:0;font-size:15px;color:#c9ced6} .ox-pipe__who{margin:0;justify-self:start;font-size:12px;letter-spacing:.04em;text-transform:uppercase;padding:5px 10px;border-radius:999px;border:1px solid #3a4250;color:#e7eaee} .cx-anim .ox-pipe:not(.is-in) .ox-pipe__bar{transform:scaleX(.08)} .cx-anim .ox-pipe__x,.cx-anim .ox-pipe__who{opacity:0;transition:opacity .5s ease;transition-delay:calc(.5s + var(--i)*.13s)} .cx-anim .ox-pipe.is-in .ox-pipe__x,.cx-anim .ox-pipe.is-in .ox-pipe__who{opacity:1} /* Zwei Wege */ .ox-two{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:20px;padding-bottom:150px} .ox-two__path{border:1px solid var(--line);border-radius:22px;padding:30px;background:#fff;position:relative;z-index:1} .ox-two__path_b{background:#0b0f17;border-color:#0b0f17;color:#fff} .ox-two__path h3{font-size:26px;font-weight:400;letter-spacing:-.02em;margin:0 0 10px;color:inherit;text-transform:none} .ox-two__path p{margin:0 0 18px;font-size:16px;line-height:1.6;color:var(--ink-2)} .ox-two__path_b p{color:#c9ced6} .ox-two__path_b .wx-fork__k{color:#ffd84d} .ox-two__path_b .wx-hub__links a{color:#fff;border-color:#3a4250} .ox-two__path_b .wx-hub__links a:hover{background:#fff;color:#0b0f17} .ox-two .wx-hub__links{margin-top:0} .ox-two__lines{position:absolute;left:0;right:0;bottom:56px;height:96px;width:100%;overflow:visible} .ox-two__lines path{fill:none;stroke:#1f6bff;stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.2s ease .3s} .ox-two__lines path+path{stroke:#0b0f17} .cx-anim .ox-two:not(.is-in) .ox-two__lines path{stroke-dashoffset:1} .ox-two__merge{position:absolute;left:50%;bottom:0;transform:translateX(-50%);z-index:1} .ox-two__merge span{display:inline-block;padding:14px 24px;border-radius:999px;background:#ffd84d;color:#0b0f17;font-size:16px;font-weight:500;white-space:nowrap;box-shadow:0 14px 30px -16px rgba(140,110,0,.6)} .cx-anim .ox-two__merge span{opacity:0;transform:scale(.85);transition:opacity .4s ease 1.3s,transform .5s cubic-bezier(.3,1.4,.5,1) 1.3s} .cx-anim .ox-two.is-in .ox-two__merge span{opacity:1;transform:none} .ox-seg__note{margin-top:20px;font-size:15px;line-height:1.6;color:var(--ink-2);padding:16px 18px;border-radius:14px;background:#fff;border:1px solid var(--line)} .ox-law{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px} .ox-law__tags{margin:22px 0 18px} /* Responsive */ @media (max-width:1100px){ .ox-hero__grid{grid-template-columns:1fr} .ox-own{grid-template-columns:1fr;gap:28px} .ox-own__r{border-left:0;padding-left:0;border-top:1px solid #262c36;padding-top:24px} } @media (max-width:1024px){ .ox-h1{font-size:35px} .ox-sieve__panel{padding:22px 22px 86px} .ox-dots{gap:6px} .ox-sieve__counter{left:22px;right:22px;bottom:20px} .ox-sieve__stage{font-size:19px} .ox-stages{grid-template-columns:repeat(3,1fr);gap:10px 8px} .ox-cases{padding-top:64px} .ox-cases__grid{grid-template-columns:1fr;gap:20px} .ox-case__body{padding:22px} .ox-kpis dd{font-size:28px} .ox-case__dl div{grid-template-columns:1fr;gap:2px} .ox-own{padding:30px 24px} .ox-own__h{font-size:26px} .ox-own__kpi{font-size:46px} .ox-mvr{grid-template-columns:1fr} .ox-side{padding:22px} .ox-spray,.ox-focus{height:120px} .ox-list_r em{display:none} .ox-market{grid-template-columns:1fr} .ox-market__q:nth-child(n){padding:24px} .ox-market__core{display:none} .ox-data{grid-template-columns:1fr;gap:32px} .ox-rec__checks li{grid-template-columns:22px 1fr} .ox-rec__checks em{grid-column:2;text-align:left;margin-top:-6px} .ox-bc{grid-template-columns:1fr} .ox-bc__roles{flex-direction:row;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory} .ox-bc__role{flex:none;width:auto;font-size:15px;scroll-snap-align:start} .ox-bc__role[aria-selected="true"],.cx-anim .ox-bc.is-in .ox-bc__role[aria-selected="true"]{transform:none} .ox-bc__panels{padding:26px 22px} .ox-bc__q{font-size:22px} .ox-orbit{aspect-ratio:auto;max-width:none} .ox-orbit__ring{display:none} .ox-orbit__core{position:relative;left:auto;top:auto;transform:none;margin:0 auto 18px;width:max-content} .ox-orbit__pts{position:static;display:flex;flex-wrap:wrap;justify-content:center;gap:8px} .ox-orbit__pts li,.ox-orbit__pts li:nth-child(n){position:static;transform:none;width:auto;height:auto} .ox-orbit__pts li span{position:static;transform:none;display:inline-block;font-size:12.5px} .ox-orbit figcaption{position:static;margin-top:18px} .ox-fun{padding-top:80px;padding-bottom:80px} .ox-legend{flex-wrap:wrap;gap:10px 16px} .ox-pipe li{grid-template-columns:1fr;gap:8px} .ox-pipe__bar{height:48px;min-width:72%} .ox-pipe__bar b{font-size:16px} .ox-two{grid-template-columns:1fr;padding-bottom:0} .ox-two__lines{display:none} .ox-two__merge{position:static;transform:none;text-align:center;margin-top:8px} .ox-two__merge::before{content:"";display:block;width:1px;height:28px;background:#1f6bff;margin:0 auto 8px} .ox-two__merge span{white-space:normal} .ox-law{grid-template-columns:1fr;gap:16px} } @media (prefers-reduced-motion:reduce){ .cx-out [class*="ox-"],.cx-out [class*="ox-"]::before,.cx-out [class*="ox-"]::after,.cx-out [class*="ox-"] path{animation:none!important;transition:none!important} .cx-anim .ox-case,.cx-anim .ox-own,.cx-anim .ox-kpis div,.cx-anim .ox-list li,.cx-anim .ox-market__q,.cx-anim .ox-bc__role,.cx-anim .ox-orbit__pts li span,.cx-anim .ox-pipe__x,.cx-anim .ox-pipe__who,.cx-anim .ox-two__merge span{opacity:1!important;transform:none!important} .cx-anim .ox-own__kpi{clip-path:none!important} .cx-anim .ox-market__core{opacity:1!important;transform:translate(-50%,-50%)!important} .cx-anim .ox-pipe .ox-pipe__bar{transform:none!important} .cx-anim .ox-two .ox-two__lines path{stroke-dashoffset:0!important} } /* Fixes nach Sichtprüfung */ .ox-dots{grid-template-columns:repeat(14,1fr);gap:9px} .ox-bc__panel[hidden]{display:none} .ox-focus{grid-template-columns:repeat(20,1fr);gap:6px;padding:16px 18px} .ox-mvr.is-done .ox-focus i.on:nth-child(24){background:#ffd84d;box-shadow:0 0 0 6px rgba(255,216,77,.2)} .ox-mvr.is-done .ox-focus i.on:nth-child(22){background:#1f6bff;box-shadow:0 0 0 5px rgba(31,107,255,.22)} .ox-two__lines path{vector-effect:none;stroke-width:.35;stroke-dasharray:none;stroke-dashoffset:0;transition:opacity .8s ease .3s} .cx-anim .ox-two:not(.is-in) .ox-two__lines path{opacity:0;stroke-dashoffset:0} @media (max-width:1024px){.ox-dots{grid-template-columns:repeat(14,1fr);gap:5px}.ox-focus{gap:4px}} @media (max-width:1024px){.ox-kpis dd{font-size:24px;white-space:nowrap}.ox-kpis div{padding-right:8px}.ox-kpis div+div{padding-left:10px}} /* beratung.css */ /* ===== Branchenseite Beratung & Professional Services (bx-) ===== */ .bx-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center} .bx-h1{font-size:60px;letter-spacing:-.03em} .bx-promise{margin:22px 0 18px;font-size:27px;line-height:1.25;letter-spacing:-.015em;color:#0b0f17;max-width:560px;padding-left:18px;border-left:3px solid #1f6bff} .bx-hero .sx-hero__intro{max-width:580px} /* Hero-Orbit */ .bx-orbit{margin:0} .bx-orbit__stage{position:relative;aspect-ratio:1;max-width:540px;margin:0 auto;border-radius:28px;background:radial-gradient(circle at 50% 50%,#f4f6fa 0,#fff 62%)} .bx-orbit__lines{position:absolute;inset:0;width:100%;height:100%} .bx-ring{fill:none;stroke:#dfe3e8;stroke-width:1;stroke-dasharray:3 5} .bx-ring_in{stroke:#e9ecf0;stroke-dasharray:none} .bx-orbit__lines line{stroke:#c9cfd8;stroke-width:1;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke .4s,stroke-width .4s} .cx-anim .bx-orbit__lines line{stroke-dashoffset:1;animation:bxDraw .9s ease forwards;animation-delay:calc(.5s + var(--i)*.08s)} @keyframes bxDraw{to{stroke-dashoffset:0}} .bx-orbit__lines line.is-hot{stroke:#1f6bff;stroke-width:1.6} .bx-orbit__core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:34%;aspect-ratio:1;border-radius:50%;background:#0b0f17;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;box-shadow:0 0 0 10px rgba(11,15,23,.05),0 24px 50px -20px rgba(11,15,23,.5);z-index:2} .bx-orbit__mono{width:38px;height:38px;border-radius:10px;background:#fff;color:#0b0f17;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:18px} .bx-orbit__core b{font-weight:500;font-size:15px} .bx-orbit__nodes{list-style:none;margin:0;padding:0;position:absolute;inset:0} .bx-n{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a)) translateX(37.5%) rotate(calc(-1*var(--a)))} .bx-n{transform:rotate(var(--a)) translate(min(202px,37.5vw)) rotate(calc(-1*var(--a)))} .bx-n span{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;font-size:13px;padding:9px 14px;border-radius:999px;background:#fff;border:1px solid #e3e6ea;color:#0b0f17;box-shadow:0 10px 24px -16px rgba(11,15,23,.45);transition:background-color .35s,color .35s,border-color .35s,transform .35s} .bx-n_lead span{background:#ffd84d;border-color:#ffd84d} .bx-n.is-hot span{background:#1f6bff;color:#fff;border-color:#1f6bff;transform:translate(-50%,-50%) scale(1.06)} .cx-anim .bx-n span{opacity:0;animation:bxPop .5s cubic-bezier(.3,1.4,.5,1) forwards;animation-delay:calc(.7s + var(--i)*.09s)} @keyframes bxPop{from{opacity:0;transform:translate(-50%,-50%) scale(.7)}to{opacity:1;transform:translate(-50%,-50%)}} .bx-orbit .wx-cap{text-align:center} /* Referenzleiste */ .bx-refs{padding:64px 0 72px;border-top:1px solid #eef0f2;border-bottom:1px solid #eef0f2;background:#fff} .bx-refs__top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:36px} .bx-refs__h{margin:0;font-size:30px;font-weight:400;letter-spacing:-.02em;max-width:640px;color:#0b0f17} .bx-refs__rating{margin:0} .bx-refs__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));border-top:1px solid #0b0f17} .bx-refs__list li{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:16px;min-height:150px;padding:26px 26px 22px 0;border-bottom:1px solid #e3e6ea} .bx-refs__list li+li{padding-left:26px;border-left:1px solid #e3e6ea} .bx-refs__list img{max-height:42px;max-width:170px;width:auto;object-fit:contain;object-position:left;filter:grayscale(1) contrast(1.1);opacity:.85;transition:filter .3s,opacity .3s} .bx-refs__list li:hover img{filter:none;opacity:1} .bx-refs__word{font-size:22px;font-weight:500;letter-spacing:-.01em;color:#0b0f17} .bx-refs__list em{font-style:normal;font-size:13.5px;line-height:1.45;color:#5f6670} .bx-refs__list li.is-unpub{background:repeating-linear-gradient(135deg,#fffbea 0 10px,#fff 10px 20px)} .cx-anim .bx-refs__list li{opacity:0;transform:translate3d(0,10px,0);transition:opacity .5s ease,transform .6s ease;transition-delay:calc(var(--i)*.08s)} .cx-anim .bx-refs__list.is-in li{opacity:1;transform:none} .bx-refs__note{margin:16px 0 0;font-size:13px;color:#7d838c} .bx-flag{display:inline-block;font-style:normal;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;background:#fff3c4;color:#8a5a00;border-radius:4px;padding:2px 6px;font-weight:500;vertical-align:2px} .bx-refs__list .bx-flag{position:absolute;top:12px;right:12px} .bx-draft{margin-top:18px;padding:14px 16px;border-radius:12px;background:#fff8dc;border:1px dashed #d9b84a;font-size:13px;line-height:1.5;color:#5c4400} .bx-draft b{display:block;margin-bottom:4px;font-weight:600} .bx-draft ul{margin:0;padding-left:18px} /* Display-Headlines */ .bx-display{max-width:980px} .bx-mech__head{max-width:900px;margin-bottom:56px} .bx-mech__head .cx-lead{margin-top:20px} /* Marktmechanik */ .bx-mech{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px;align-items:start} .bx-qs{list-style:none;margin:0;padding:0;border-top:1px solid #0b0f17} .bx-qs li{display:grid;grid-template-columns:44px 1fr;gap:10px;padding:20px 0;border-bottom:1px solid #e3e6ea;font-size:22px;line-height:1.3;letter-spacing:-.01em;color:#0b0f17} .bx-qs li span{font-size:12px;color:#8a9099;padding-top:7px;letter-spacing:.04em} .cx-anim .bx-qs li{opacity:0;transform:translate3d(-8px,0,0);transition:opacity .5s ease,transform .6s ease;transition-delay:calc(var(--i)*.12s)} .cx-anim .bx-qs.is-in li{opacity:1;transform:none} .bx-journey{margin:0;padding:34px 34px 28px;border-radius:24px;background:#f4f6f8} .bx-journey__steps{list-style:none;margin:0;padding:0;position:relative} .bx-journey__steps::before{content:"";position:absolute;left:9px;top:12px;bottom:12px;width:2px;background:#dde1e6} .bx-journey__steps::after{content:"";position:absolute;left:9px;top:12px;width:2px;height:calc(100% - 24px);background:#1f6bff;transform-origin:top;transform:scaleY(0);transition:transform 2.4s cubic-bezier(.3,.6,.3,1) .3s} .bx-journey.is-in .bx-journey__steps::after{transform:none} .bx-journey__steps li{position:relative;display:grid;grid-template-columns:20px 1fr;column-gap:18px;padding:10px 0} .bx-journey__dot{grid-row:span 2;width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid #c9cfd8;position:relative;z-index:1;margin-top:2px;transition:border-color .3s,background-color .3s;transition-delay:calc(.3s + var(--i)*.38s)} .bx-journey.is-in .bx-journey__dot{border-color:#1f6bff;background:#1f6bff;box-shadow:inset 0 0 0 4px #f4f6f8} .bx-journey__steps li:last-child .bx-journey__dot{border-color:#c9a93a} .bx-journey.is-in .bx-journey__steps li:last-child .bx-journey__dot{background:#ffd84d;border-color:#ffd84d} .bx-journey__steps b{font-size:17px;font-weight:500;color:#0b0f17} .bx-journey__steps em{font-style:normal;font-size:14px;line-height:1.5;color:#5f6670} .bx-journey__side{margin-top:18px;padding:16px 18px;border-radius:14px;background:#fff;border:1px solid #e3e6ea} .bx-journey__k{display:block;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:#1f6bff;margin-bottom:4px} .bx-journey__side p{margin:0;font-size:14.5px;line-height:1.55;color:#3d434c} .bx-journey figcaption{margin-top:12px} .bx-mech+.gx-key{margin-top:40px} /* Probleme */ .bx-probs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid #0b0f17} .bx-probs li{padding:32px 36px 34px 0;border-bottom:1px solid #d9dde2} .bx-probs li:nth-child(even){padding-left:36px;padding-right:0;border-left:1px solid #d9dde2} .bx-probs__n{display:block;font-size:12px;color:#1f6bff;letter-spacing:.06em;margin-bottom:14px} .bx-probs h3{margin:0 0 10px;font-size:23px;font-weight:400;letter-spacing:-.015em;line-height:1.3;color:#0b0f17;text-transform:none} .bx-probs p{margin:0;font-size:15.5px;line-height:1.6;color:#4b525c} .cx-anim .bx-probs li{opacity:0;transform:translate3d(0,14px,0);transition:opacity .55s ease,transform .65s ease;transition-delay:calc(var(--i)*.1s)} .cx-anim .bx-probs.is-in li{opacity:1;transform:none} .bx-probs__close{margin:40px 0 0;max-width:820px;font-size:26px;line-height:1.35;letter-spacing:-.015em;color:#0b0f17} /* Flow (dunkel) */ .bx-flow{padding-top:120px;padding-bottom:120px} .bx-flow__track{list-style:none;margin:56px 0 0;padding:0;position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:14px} .bx-flow__st{position:relative;z-index:1} .bx-flow__node{height:100%;min-height:200px;padding:22px 20px;border-radius:18px;border:1px solid #262c36;background:#0f141d;display:flex;flex-direction:column;gap:8px;transition:border-color .5s,background-color .5s,transform .5s} .bx-flow__n{font-size:11px;color:#6b727c;letter-spacing:.06em} .bx-flow__node b{font-size:20px;font-weight:500;letter-spacing:-.01em;color:#fff} .bx-flow__node em{font-style:normal;font-size:14px;line-height:1.5;color:#8d949e} .bx-flow__chips{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px} .bx-flow__chips li{font-size:12px;padding:5px 10px;border-radius:999px;border:1px solid #2f3846;color:#a9b1bd;transition:opacity .4s,transform .4s,border-color .4s,color .4s} .bx-flow__st.is-on .bx-flow__node{border-color:#1f6bff;background:#111a2b;transform:translateY(-4px)} .bx-flow__st.is-on .bx-flow__n{color:#6ea2ff} .bx-flow__st.is-on .bx-flow__chips li{border-color:#3d5a8f;color:#dfe6f2} .bx-flow__st:last-of-type.is-on .bx-flow__node{border-color:#ffd84d;background:#1c1a10} .bx-flow__st:last-of-type.is-on .bx-flow__n{color:#ffd84d} .cx-anim .bx-flow__track:not(.is-done) .bx-flow__st:not(.is-on) .bx-flow__chips li{opacity:.35} .bx-flow__beam{position:absolute;left:0;right:0;top:44px;height:2px;list-style:none;z-index:0;background:#1d232d} .bx-flow__beam span{display:block;height:100%;background:linear-gradient(90deg,#1f6bff,#ffd84d);transform-origin:left;transform:scaleX(0);transition:transform 3s cubic-bezier(.3,.6,.3,1) .2s} .bx-flow__track.is-done .bx-flow__beam span,.bx-flow__st.is-on~.bx-flow__beam span{transform:none} /* Ansatz */ .bx-links{margin-top:14px} .bx-app__note{margin:28px 0 0;padding:16px 20px;border-radius:14px;background:#f4f6f8;font-size:15px;line-height:1.6;color:#3d434c;max-width:860px} /* Große Cases */ .bx-case{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:0;background:#fff;border:1px solid #e3e6ea;border-radius:26px;overflow:hidden;margin-bottom:24px} .bx-case__main{padding:44px 48px} .bx-case__side{padding:44px 40px;background:#0b0f17;color:#fff;display:flex;flex-direction:column;gap:22px} .bx-case:nth-of-type(2) .bx-case__side{background:#f4f6f8;color:#0b0f17} .bx-case__brand{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-bottom:22px;border-bottom:1px solid #eef0f2;margin-bottom:26px} .bx-case__logo{max-height:38px;max-width:180px;width:auto} .bx-case__word{font-size:22px;font-weight:600;letter-spacing:-.01em} .bx-case__focus{font-size:13px;color:#5f6670;padding:5px 11px;border-radius:999px;border:1px solid #e3e6ea} .bx-case__label{margin:0 0 8px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#1f6bff} .bx-case__h{margin:0 0 26px;font-size:34px;line-height:1.18;letter-spacing:-.02em;font-weight:400;color:#0b0f17;text-transform:none} .bx-case__dl{margin:0} .bx-case__dl div{display:grid;grid-template-columns:120px 1fr;gap:18px;padding:13px 0;border-top:1px solid #eef0f2;font-size:15px;line-height:1.6} .bx-case__dl dt{color:#7d838c} .bx-case__dl dd{margin:0;color:#2d333b} .bx-case__dl strong{font-weight:500;color:#0b0f17} .bx-case__kpis{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0 0} .bx-case__kpis div{padding:12px 16px;border-radius:12px;border:1px solid #e3e6ea} .bx-case__kpis div.is-unverified{border-style:dashed;border-color:#d9b84a;background:#fffbea} .bx-case__kpis dd{margin:0;font-size:26px;letter-spacing:-.02em} .bx-case__kpis dt{font-size:12.5px;color:#5f6670} .bx-case__k{margin:0;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#8d949e} .bx-case__scope{list-style:none;margin:0;padding:0} .bx-case__scope li{display:flex;gap:12px;align-items:baseline;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:15px} .bx-case:nth-of-type(2) .bx-case__scope li{border-color:#dde1e6} .bx-case__scope li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:#1f6bff;transform:translateY(-2px)} .cx-anim .bx-case__scope li{opacity:0;transform:translate3d(8px,0,0);transition:opacity .45s ease,transform .5s ease;transition-delay:calc(.3s + var(--i)*.1s)} .cx-anim .bx-case.is-in .bx-case__scope li{opacity:1;transform:none} .bx-viz{margin:0;padding:20px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)} .bx-case:nth-of-type(2) .bx-viz{background:#fff;border-color:#e3e6ea} .bx-viz figcaption{margin-top:10px;font-size:11.5px;color:#8d949e} /* Übergabe */ .bx-hand{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;font-size:13px} .bx-hand__bar{height:10px;border-radius:999px;background:#ffd84d;overflow:hidden} .bx-hand__bar i{display:block;height:100%;width:100%;background:#1f6bff;transform-origin:left;transform:scaleX(1);transition:transform 2.2s cubic-bezier(.4,.1,.3,1) .6s} .bx-case.is-in .bx-hand__bar i{transform:scaleX(.18)} .bx-hand__ph{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;font-size:11.5px;color:#a9b1bd} .bx-hand__ph li{border-top:2px solid #2f3846;padding-top:6px} .bx-hand__ph li:last-child{border-color:#ffd84d;color:#fff} /* Struktur */ .bx-tree{display:flex;flex-direction:column;align-items:center;gap:12px} .bx-tree__root{font-size:13px;padding:7px 14px;border-radius:999px;background:#0b0f17;color:#fff} .bx-tree__row{display:flex;gap:8px;justify-content:center;width:100%} .bx-tree__row span{flex:1;text-align:center;font-size:11.5px;padding:7px 4px;border-radius:8px;background:#e8f0ff;color:#1f4fb8} .bx-tree__row_s{display:grid;grid-template-columns:repeat(9,1fr);gap:6px} .bx-tree__row_s i{display:block;height:22px;border-radius:5px;background:#d6dbe2} .bx-tree__gl{display:flex;flex-wrap:wrap;gap:4px;align-items:center;width:100%;padding:10px;border-radius:10px;border:1px dashed #c9cfd8} .bx-tree__gl b{font-size:11.5px;font-weight:500;margin-right:6px} .bx-tree__gl i{width:18px;height:8px;border-radius:3px;background:#ffd84d} .cx-anim .bx-tree__row span,.cx-anim .bx-tree__row_s i,.cx-anim .bx-tree__gl i{opacity:0;transform:scale(.8);transition:opacity .4s ease,transform .4s ease} .bx-tree__row span{transition-delay:calc(.5s + var(--i)*.12s)!important} .bx-tree__row_s i{transition-delay:calc(.9s + var(--i)*.06s)!important} .bx-tree__gl i{transition-delay:calc(1.4s + var(--i)*.04s)!important} .cx-anim .bx-case.is-in .bx-tree__row span,.cx-anim .bx-case.is-in .bx-tree__row_s i,.cx-anim .bx-case.is-in .bx-tree__gl i{opacity:1;transform:none} /* Zeitachse */ .bx-time{display:flex;align-items:flex-end;gap:10px;height:110px} .bx-time span{flex:1;height:var(--h);border-radius:6px 6px 0 0;background:linear-gradient(#1f6bff,#174fbf);transform-origin:bottom;transition:transform .7s cubic-bezier(.3,1.2,.5,1);transition-delay:calc(.4s + var(--i)*.12s)} .bx-time span:last-child{background:#ffd84d} .cx-anim .bx-case:not(.is-in) .bx-time span{transform:scaleY(.08)} .bx-time__l{display:flex;justify-content:space-between;margin:8px 0 0;font-size:11.5px;color:#a9b1bd} .bx-case__q{margin:0;padding:20px 0 0;border-top:1px solid rgba(11,15,23,.12)} .bx-case__q p{margin:0 0 10px;font-size:17px;line-height:1.5;color:#0b0f17} .bx-case__q footer{font-size:13px;color:#5f6670} .bx-case__pn{margin:0;font-size:12.5px;line-height:1.5;color:#8d949e} .bx-case.is-unpub{outline:2px dashed #d9b84a;outline-offset:4px} .cx-anim .bx-case{opacity:0;transform:translate3d(0,24px,0);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1)} .cx-anim .bx-case.is-in{opacity:1;transform:none} /* Bibliothek */ .bx-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px} .bx-filter button{font:inherit;font-size:14px;padding:8px 16px;border-radius:999px;border:1px solid #d9dde2;background:#fff;color:#0b0f17;cursor:pointer} .bx-filter button[aria-pressed="true"]{background:#0b0f17;border-color:#0b0f17;color:#fff} .bx-filter button:focus-visible{outline:2px solid #1f6bff;outline-offset:2px} .bx-lib{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px} .bx-lib__card{border:1px solid #e3e6ea;border-radius:20px;overflow:hidden;background:#fff;display:flex;flex-direction:column} .bx-lib__card[hidden]{display:none} .bx-lib__img img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;border-bottom:1px solid #eef0f2} .bx-lib__body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:8px;flex:1} .bx-lib__logo{max-height:30px;max-width:150px;width:auto;object-fit:contain;object-position:left;margin-bottom:4px} .bx-lib__name{margin:0;font-size:20px;font-weight:500;color:#0b0f17} .bx-lib__focus{margin:0;font-size:13px;color:#7d838c} .bx-lib__label{margin:6px 0 0;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:#1f6bff} .bx-lib__sum{margin:0;font-size:15px;line-height:1.55;color:#3d434c} .bx-lib__kpi{margin:4px 0 6px;font-size:14px;color:#3d434c} .bx-lib__kpi b{font-size:24px;font-weight:400;color:#0b0f17;margin-right:4px} .bx-lib__card.is-unpub{border-style:dashed;border-color:#d9b84a;background:#fffdf5} .cx-anim .bx-lib__card{opacity:0;transform:translate3d(0,14px,0);transition:opacity .5s ease,transform .6s ease;transition-delay:calc(var(--i)*.06s)} .cx-anim .bx-lib.is-in .bx-lib__card{opacity:1;transform:none} /* GEO */ .bx-geo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center} .bx-geo .gx-tags{margin-top:12px} .bx-geo__more{margin-top:24px} .bx-ai{margin:0} .bx-ai__win{position:relative;background:#fff;border:1px solid #e3e6ea;border-radius:20px;box-shadow:0 30px 60px -36px rgba(11,15,23,.35);overflow:hidden} .bx-ai__bar{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid #eef0f2;background:#fafbfc} .bx-ai__bar i{width:9px;height:9px;border-radius:50%;background:#dfe2e6} .bx-ai__bar span{margin-left:10px;font-size:12px;color:#7d838c} .bx-ai__q{display:flex;gap:12px;align-items:flex-start;margin:20px 22px 0;padding:14px 16px;border-radius:14px;background:#f4f6f8;font-size:15.5px;line-height:1.45;color:#0b0f17} .bx-ai__who{flex:none;width:26px;height:26px;border-radius:50%;background:#0b0f17;color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px} .bx-ai__a{padding:18px 22px 26px;font-size:15px;line-height:1.6;color:#2d333b} .bx-ai__a p{margin:0 0 8px} .bx-ai__a ul{margin:0 0 12px;padding-left:20px} .bx-ai__brand{padding:12px 14px;border-radius:12px;border:1px solid #cfe0ff;background:#f3f7ff} .bx-ai__brand b{color:#1f4fb8;font-weight:600} .bx-ai__stamp{position:absolute;top:44px;right:14px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:6px;background:#fff3c4;color:#8a5a00;transform:rotate(3deg)} .cx-anim .bx-ai__a>*{opacity:0;transform:translate3d(0,6px,0);transition:opacity .45s ease,transform .5s ease} .cx-anim .bx-ai__a>p:first-child{transition-delay:.5s} .cx-anim .bx-ai__a ul{transition-delay:.9s} .cx-anim .bx-ai__a .bx-ai__brand{transition-delay:1.4s} .cx-anim .bx-ai.is-in .bx-ai__a>*{opacity:1;transform:none} .bx-ai figcaption{margin-top:12px} /* Person & Marke */ .bx-pb{margin:0;display:grid;grid-template-columns:1fr 200px 1fr;gap:0;align-items:stretch} .bx-pb__c{border-radius:24px;padding:32px 34px} .bx-pb__c_p{background:#f4f6f8} .bx-pb__c_b{background:#0b0f17;color:#fff} .bx-pb__t{display:flex;align-items:center;gap:12px;margin:0 0 18px;font-size:21px;font-weight:500;letter-spacing:-.01em} .bx-pb__ico{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#0b0f17} .bx-pb__c_b .bx-pb__ico{background:#1f6bff;color:#fff} .bx-pb__c ul{list-style:none;margin:0;padding:0} .bx-pb__c li{padding:11px 0;border-top:1px solid #dde1e6;font-size:16px} .bx-pb__c_b li{border-color:#262c36;color:#dfe3ea} .cx-anim .bx-pb__c li{opacity:0;transition:opacity .4s ease;transition-delay:calc(.3s + var(--i)*.08s)} .cx-anim .bx-pb.is-in .bx-pb__c li{opacity:1} .bx-pb__mid{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:0 14px;text-align:center} .bx-pb__mid b{font-size:14px;font-weight:500;padding:10px 14px;border-radius:999px;background:#ffd84d;color:#0b0f17} .bx-pb__arr{display:block;width:100%;height:2px;background:#0b0f17;position:relative;transform-origin:left;transition:transform .8s ease .5s} .bx-pb__arr::after{content:"";position:absolute;top:-4px;width:10px;height:10px;border-top:2px solid #0b0f17;border-right:2px solid #0b0f17} .bx-pb__arr_r::after{right:0;transform:rotate(45deg)} .bx-pb__arr_l{transform-origin:right} .bx-pb__arr_l::after{left:0;transform:rotate(-135deg)} .cx-anim .bx-pb:not(.is-in) .bx-pb__arr{transform:scaleX(0)} .cx-anim .bx-pb__mid b{opacity:0;transform:scale(.85);transition:opacity .4s ease 1.1s,transform .5s cubic-bezier(.3,1.4,.5,1) 1.1s} .cx-anim .bx-pb.is-in .bx-pb__mid b{opacity:1;transform:none} .bx-pb+.gx-key{margin-top:36px} /* Nachfragearchitektur */ .bx-arch{padding-top:120px;padding-bottom:120px} .bx-net{margin:56px 0 0;display:grid;grid-template-columns:220px minmax(80px,1fr) 260px 60px 240px;align-items:center;position:relative} .bx-net__src{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;grid-column:1} .bx-net__src li{font-size:14px;padding:10px 14px;border-radius:12px;border:1px solid #2f3846;color:#dfe3ea;background:#0f141d} .bx-net__src li:nth-child(6){border-style:dashed} .bx-net__lines{grid-column:2;width:100%;height:100%;min-height:360px} .bx-net__lines path{fill:none;stroke:#3d5a8f;stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1s ease;transition-delay:calc(.2s + var(--i)*.1s)} .cx-anim .bx-net:not(.is-in) .bx-net__lines path{stroke-dashoffset:1} .bx-net.is-in .bx-net__lines path{animation:bxPulse 4s ease-in-out infinite;animation-delay:calc(1.5s + var(--i)*.35s)} @keyframes bxPulse{0%,100%{stroke:#3d5a8f}50%{stroke:#6ea2ff}} .bx-net__core{grid-column:3;padding:26px 24px;border-radius:22px;background:#fff;color:#0b0f17;display:flex;flex-direction:column;gap:8px;box-shadow:0 0 0 8px rgba(31,107,255,.15)} .bx-net__k{margin:0 0 6px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#1f6bff!important} .bx-net__core span{font-size:17px;font-weight:500;padding:10px 0;border-top:1px solid #eef0f2} .bx-net__out{grid-column:5;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;position:relative} .bx-net__out::before{content:"";position:absolute;right:calc(100% + 0px);top:50%;width:60px;height:2px;background:linear-gradient(90deg,#1f6bff,#ffd84d)} .bx-net__out li{display:flex;gap:12px;align-items:center;font-size:15.5px;padding:14px 16px;border-radius:14px;background:#1a2130;color:#fff} .bx-net__out li:last-child{background:#ffd84d;color:#0b0f17} .bx-net__out li span{font-size:11px;opacity:.65} .cx-anim .bx-net__src li,.cx-anim .bx-net__out li,.cx-anim .bx-net__core{opacity:0;transition:opacity .5s ease,transform .5s ease} .cx-anim .bx-net__src li{transform:translate3d(-8px,0,0);transition-delay:calc(var(--i)*.07s)} .cx-anim .bx-net__core{transition-delay:.9s} .cx-anim .bx-net__out li{transform:translate3d(8px,0,0);transition-delay:calc(1.2s + var(--i)*.15s)} .cx-anim .bx-net.is-in .bx-net__src li,.cx-anim .bx-net.is-in .bx-net__out li,.cx-anim .bx-net.is-in .bx-net__core{opacity:1;transform:none} /* Situationen */ .bx-sits{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .bx-sits li{padding:26px 24px 28px;border-radius:20px;border:1px solid #e3e6ea;background:#fff;display:flex;flex-direction:column;gap:10px;transition:border-color .2s,transform .2s} .bx-sits li:hover{border-color:#0b0f17;transform:translateY(-3px)} .bx-sits__tag{align-self:flex-start;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:#f1f3f5;color:#3d434c} .bx-sits li:last-child .bx-sits__tag{background:#ffd84d;color:#0b0f17} .bx-sits h3{margin:4px 0 0;font-size:19px;font-weight:500;line-height:1.35;letter-spacing:-.01em;color:#0b0f17;text-transform:none} .bx-sits p{margin:0;font-size:14.5px;line-height:1.6;color:#4b525c} .cx-anim .bx-sits li{opacity:0;transform:translate3d(0,14px,0);transition:opacity .5s ease,transform .6s ease,border-color .2s;transition-delay:calc(var(--i)*.1s),calc(var(--i)*.1s),0s} .cx-anim .bx-sits.is-in li{opacity:1;transform:none} /* Responsive */ @media (max-width:1180px){ .bx-net{grid-template-columns:200px minmax(50px,1fr) 220px 40px 200px} .bx-sits{grid-template-columns:1fr 1fr} } @media (max-width:1024px){ .bx-hero__grid{grid-template-columns:1fr;gap:36px} .bx-h1{font-size:38px} .bx-promise{font-size:21px} .bx-orbit__stage{max-width:420px} .bx-n span{font-size:11.5px;padding:7px 10px} .bx-n{transform:rotate(var(--a)) translate(min(160px,38vw)) rotate(calc(-1*var(--a)))} .bx-refs{padding:48px 0} .bx-refs__top{flex-direction:column;align-items:flex-start} .bx-refs__h{font-size:24px} .bx-refs__list{grid-template-columns:1fr 1fr} .bx-refs__list li,.bx-refs__list li+li{padding:20px 14px;border-left:0;min-height:120px} .bx-refs__list li:nth-child(even){border-left:1px solid #e3e6ea} .bx-mech{grid-template-columns:1fr;gap:32px} .bx-qs li{font-size:19px;grid-template-columns:36px 1fr} .bx-journey{padding:24px 20px} .bx-probs{grid-template-columns:1fr} .bx-probs li,.bx-probs li:nth-child(even){padding:26px 0;border-left:0} .bx-probs h3{font-size:20px} .bx-probs__close{font-size:21px} .bx-flow,.bx-arch{padding-top:80px;padding-bottom:80px} .bx-flow__track{grid-template-columns:1fr;gap:10px;margin-top:36px} .bx-flow__node{min-height:0} .bx-flow__beam{left:22px;right:auto;top:0;bottom:0;width:2px;height:auto} .bx-flow__beam span{transform-origin:top;transform:scaleY(0)} .bx-flow__track.is-done .bx-flow__beam span{transform:none} .bx-case{grid-template-columns:1fr} .bx-case__main,.bx-case__side{padding:26px 22px} .bx-case__h{font-size:25px} .bx-case__dl div{grid-template-columns:1fr;gap:2px} .bx-geo{grid-template-columns:1fr;gap:36px} .bx-pb{grid-template-columns:1fr} .bx-pb__mid{flex-direction:row;padding:16px 0} .bx-pb__arr{width:2px;height:28px;flex:none} .bx-pb__arr::after{display:none} .bx-pb__c{padding:24px 22px} .bx-net{grid-template-columns:1fr;gap:14px} .bx-net__src{flex-direction:row;flex-wrap:wrap;grid-column:1} .bx-net__src li{font-size:13px;padding:8px 12px} .bx-net__lines{display:none} .bx-net__core{grid-column:1;margin-top:10px} .bx-net__out{grid-column:1;margin-top:20px} .bx-net__out::before{right:auto;left:28px;top:-22px;width:2px;height:20px} .bx-sits{grid-template-columns:1fr} } @media (prefers-reduced-motion:reduce){ .cx-ber [class*="bx-"],.cx-ber [class*="bx-"]::before,.cx-ber [class*="bx-"]::after,.cx-ber .bx-orbit__lines line,.cx-ber .bx-net__lines path{animation:none!important;transition:none!important} .cx-anim .bx-n span,.cx-anim .bx-refs__list li,.cx-anim .bx-qs li,.cx-anim .bx-probs li,.cx-anim .bx-case,.cx-anim .bx-case__scope li,.cx-anim .bx-lib__card,.cx-anim .bx-ai__a>*,.cx-anim .bx-pb__c li,.cx-anim .bx-pb__mid b,.cx-anim .bx-net__src li,.cx-anim .bx-net__out li,.cx-anim .bx-net__core,.cx-anim .bx-sits li,.cx-anim .bx-tree__row span,.cx-anim .bx-tree__row_s i,.cx-anim .bx-tree__gl i{opacity:1!important;transform:none!important} .cx-anim .bx-n span{transform:translate(-50%,-50%)!important} .cx-anim .bx-orbit__lines line,.cx-anim .bx-net__lines path{stroke-dashoffset:0!important} .bx-journey__steps::after,.bx-flow__beam span,.cx-anim .bx-pb__arr,.cx-anim .bx-time span{transform:none!important} .bx-hand__bar i{transform:scaleX(.18)!important} } /* Fixes nach Sichtprüfung */ .bx-flow__node{height:auto} .bx-flow__st{display:flex;flex-direction:column} .bx-flow__st .bx-flow__node{flex:1} .bx-flow__track+.wx-vs__note{margin-top:28px} .bx-refs__list .bx-flag{position:static;align-self:flex-start;order:3} .bx-net__lines{align-self:stretch;min-height:0;height:100%} .bx-net__lines path{vector-effect:none;stroke-width:.5;stroke-dasharray:none;transition:opacity .8s ease;transition-delay:calc(.2s + var(--i)*.1s)} .cx-anim .bx-net:not(.is-in) .bx-net__lines path{opacity:0} .bx-n span{transition-duration:.2s} @media (max-width:1024px){ .bx-flow__beam{display:none} .bx-n{transform:rotate(var(--a)) translate(min(150px,33vw)) rotate(calc(-1*var(--a)))} .bx-n span{white-space:normal;text-align:center;width:max-content;max-width:96px;line-height:1.25;font-size:11px;padding:6px 9px} .bx-orbit__core{width:30%} .bx-orbit__core b{font-size:12.5px} } .bx-case__q{margin-top:20px}.bx-case__q footer a{color:inherit;text-decoration:underline;text-decoration-color:rgba(11,15,23,.25);text-underline-offset:3px} /* industrie.css */ /* ===== Branchenseite Industrie & Maschinenbau (ix-) ===== */ .ix-hero{padding:150px 0 84px;background:#fff} .ix-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center} .ix-h1{font-size:62px;letter-spacing:-.03em} .ix-promise{margin:22px 0 18px;font-size:27px;line-height:1.25;letter-spacing:-.015em;color:#0b0f17;max-width:560px;padding-left:18px;border-left:3px solid #1f6bff} .ix-hero .sx-hero__intro{max-width:580px} .ix-trust{margin:26px 0 0;padding-top:18px;border-top:1px solid #e3e6ea;font-size:14px;color:#5f6670;max-width:520px} /* Hero-Karte */ .ix-map{margin:0} .ix-map__stage{position:relative;aspect-ratio:600/520;border-radius:26px;overflow:hidden;background:#f2f3f5} .ix-map__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(.95) brightness(1.06);opacity:.9} .ix-map__stage::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 52%,rgba(255,255,255,.15) 0,rgba(255,255,255,.55) 70%);pointer-events:none} .ix-map__grid{position:absolute;inset:0;width:100%;height:100%;z-index:1} .ix-map__grid path{fill:none;stroke:#0b0f17;stroke-opacity:.28;stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke .35s,stroke-opacity .35s,stroke-width .35s} .cx-anim .ix-map__grid path{stroke-dashoffset:1;animation:ixDraw 1s ease forwards;animation-delay:calc(.6s + var(--i)*.07s)} @keyframes ixDraw{to{stroke-dashoffset:0}} .ix-map__grid path.is-hot{stroke:#1f6bff;stroke-opacity:1;stroke-width:2} .ix-map__core{position:absolute;left:50%;top:51.5%;transform:translate(-50%,-50%);z-index:3;padding:18px 22px;border-radius:16px;background:#0b0f17;color:#fff;text-align:center;box-shadow:0 0 0 8px rgba(11,15,23,.08),0 24px 50px -20px rgba(11,15,23,.55)} .ix-map__k{display:block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#8fb3ff;margin-bottom:4px} .ix-map__core b{font-weight:500;font-size:17px;white-space:nowrap} .ix-node{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);z-index:2;white-space:nowrap;font-size:12.5px;padding:7px 12px;border-radius:8px;background:rgba(255,255,255,.94);border:1px solid #dfe2e6;color:#0b0f17;box-shadow:0 8px 20px -14px rgba(11,15,23,.5);transition:background-color .3s,color .3s,border-color .3s} .ix-node_p::before,.ix-node_c::before,.ix-node_m::before{content:"";display:inline-block;width:7px;height:7px;margin-right:7px;vertical-align:1px} .ix-node_p::before{border-radius:50%;background:#0b0f17} .ix-node_c::before{background:#1f6bff} .ix-node_m::before{border:1.5px solid #0b0f17;transform:rotate(45deg);width:6px;height:6px} .ix-node.is-hot{background:#1f6bff;color:#fff;border-color:#1f6bff} .ix-node.is-hot::before{background:#fff;border-color:#fff} .ix-node_out{background:#ffd84d;border-color:#ffd84d;font-weight:500;padding:9px 16px} .cx-anim .ix-node{opacity:0;animation:ixPop .5s ease forwards;animation-delay:calc(.9s + var(--i)*.08s)} @keyframes ixPop{from{opacity:0;transform:translate(-50%,-40%)}to{opacity:1;transform:translate(-50%,-50%)}} .ix-map .wx-cap{text-align:left} /* Referenzen */ .ix-refs{padding:60px 0 64px;border-top:1px solid #eef0f2;border-bottom:1px solid #eef0f2} .ix-logos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,1fr);border-top:1px solid #0b0f17;border-bottom:1px solid #e3e6ea} .ix-logos li{display:flex;align-items:center;justify-content:center;height:112px;padding:0 18px} .ix-logos li+li{border-left:1px solid #eef0f2} .ix-logos img{max-height:38px;max-width:120px;width:auto;object-fit:contain;filter:grayscale(1) contrast(1.1);opacity:.78;transition:filter .3s,opacity .3s} .ix-logos li:hover img{filter:none;opacity:1} .cx-anim .ix-logos li{opacity:0;transition:opacity .5s ease;transition-delay:calc(var(--i)*.07s)} .cx-anim .ix-logos.is-in li{opacity:1} /* Marktrealität */ .ix-real{display:grid;grid-template-columns:1fr 56px 1fr minmax(0,.95fr);gap:0;align-items:stretch} .ix-real__col{padding:28px 30px;border-radius:22px} .ix-real__col_old{background:#f4f6f8} .ix-real__col_new{background:#0b0f17;color:#fff} .ix-real__t{margin:0 0 14px;font-size:19px;font-weight:500;letter-spacing:-.01em} .ix-real__col ul{list-style:none;margin:0;padding:0} .ix-real__col li{padding:10px 0;border-top:1px solid #dde1e6;font-size:15.5px} .ix-real__col_new li{border-color:#232a35;color:#dfe3ea} .ix-real__col_new li::before{content:"";display:inline-block;width:6px;height:6px;background:#1f6bff;margin-right:10px;vertical-align:2px} .ix-real__plus{display:flex;align-items:center;justify-content:center} .ix-real__plus span{width:40px;height:40px;border-radius:50%;background:#ffd84d;display:flex;align-items:center;justify-content:center;font-size:22px;color:#0b0f17} .ix-real__photo{margin:0 0 0 24px;position:relative;border-radius:22px;overflow:hidden;background:#eee} .ix-real__photo img{display:block;width:100%;height:100%;object-fit:cover} .ix-real__photo figcaption{position:absolute;left:16px;right:16px;bottom:16px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.92);font-size:14px;line-height:1.45;color:#0b0f17} .cx-anim .ix-real li{opacity:0;transform:translate3d(0,6px,0);transition:opacity .4s ease,transform .5s ease;transition-delay:calc(.15s + var(--i)*.06s)} .cx-anim .ix-real__col_new li{transition-delay:calc(.6s + var(--i)*.07s)} .cx-anim .ix-real.is-in li{opacity:1;transform:none} .cx-anim .ix-real__plus span{transform:scale(0);transition:transform .5s cubic-bezier(.3,1.5,.5,1) .45s} .cx-anim .ix-real.is-in .ix-real__plus span{transform:none} .ix-real+.gx-key{margin-top:40px} /* Beschaffung */ .ix-buy{padding-top:120px;padding-bottom:110px} .ix-buy__grid{display:grid;grid-template-columns:1fr 1.15fr;gap:28px;margin-top:52px} .ix-lane{margin:0;padding:28px 28px 24px;border-radius:22px;border:1px solid #232a35;background:#0f141d} .ix-lane_digital{border-color:#2b3f63;background:#0f1626} .ix-lane__t{display:flex;align-items:center;gap:12px;margin:0 0 18px;font-size:18px;font-weight:500;color:#fff} .ix-lane__ico{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;background:#232a35;color:#a9b1bd} .ix-lane_digital .ix-lane__ico{background:#1f6bff;color:#fff} .ix-lane ol{list-style:none;margin:0;padding:0;position:relative} .ix-lane ol::before{content:"";position:absolute;left:15px;top:8px;bottom:8px;width:1px;background:#2a313c} .ix-lane li{position:relative;display:flex;align-items:center;gap:14px;padding:9px 0;font-size:15.5px;color:#6b727c;transition:color .35s} .ix-lane__n{position:relative;z-index:1;flex:none;width:31px;height:31px;border-radius:50%;border:1px solid #2f3846;background:#0f141d;display:flex;align-items:center;justify-content:center;font-size:11px;color:#6b727c;transition:all .35s} .ix-lane li.is-on,.ix-buy__grid.is-all .ix-lane li{color:#e9edf3} .ix-lane_classic li.is-on .ix-lane__n,.is-all .ix-lane_classic .ix-lane__n{border-color:#a9b1bd;color:#fff;background:#232a35} .ix-lane_digital li.is-on .ix-lane__n,.is-all .ix-lane_digital .ix-lane__n{border-color:#1f6bff;background:#1f6bff;color:#fff} .ix-lane_digital li.is-post.is-on .ix-lane__n,.is-all .ix-lane_digital li.is-post .ix-lane__n{background:#ffd84d;border-color:#ffd84d;color:#0b0f17} .ix-lane__mark{padding:6px 0 6px 46px!important} .ix-lane__mark span{display:inline-block;font-size:12px;letter-spacing:.04em;padding:6px 12px;border-radius:999px;border:1px dashed #ffd84d;color:#ffd84d} .ix-pull{margin:56px 0 0;max-width:880px} .ix-pull p{margin:0;font-size:30px;line-height:1.3;letter-spacing:-.02em;color:#fff} .ix-pull p::before{content:"";display:block;width:40px;height:3px;background:#ffd84d;margin-bottom:20px} .ix-pull_sm{margin-top:32px} .ix-pull_sm p{font-size:21px;color:#0b0f17} /* Buying Center */ .ix-bc{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:center} .ix-bc__wheel{position:relative;aspect-ratio:1;max-width:400px;width:100%;margin:0 auto} .ix-bc__wheel svg{position:absolute;inset:0;width:100%;height:100%} .ix-bc__ring{fill:none;stroke:#dfe3e8;stroke-dasharray:3 5} .ix-bc__spoke{stroke:#dfe3e8;stroke-width:1;transition:stroke .3s,stroke-width .3s} .ix-bc__spoke.is-on{stroke:#1f6bff;stroke-width:2} .ix-bc__hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:36%;aspect-ratio:1;border-radius:50%;background:#0b0f17;color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;font-size:14px;line-height:1.2;padding:12px} .ix-bc__dot{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:#fff;border:1px solid #dfe3e8;display:flex;align-items:center;justify-content:center;font-weight:500;font-size:17px;color:#0b0f17;transform:rotate(var(--a)) translate(min(147px,36.9vw)) rotate(calc(-1*var(--a)));transition:background-color .3s,color .3s,border-color .3s,box-shadow .3s} .ix-bc__dot.is-on{background:#1f6bff;color:#fff;border-color:#1f6bff;box-shadow:0 0 0 8px rgba(31,107,255,.12)} .ix-bc__tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px} .ix-bc__tab{font:inherit;font-size:14px;display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 8px;border-radius:999px;border:1px solid #dfe3e8;background:#fff;color:#0b0f17;cursor:pointer} .ix-bc__tab span{width:24px;height:24px;border-radius:50%;background:#f1f3f5;display:inline-flex;align-items:center;justify-content:center;font-size:12px} .ix-bc__tab[aria-selected="true"]{background:#0b0f17;border-color:#0b0f17;color:#fff} .ix-bc__tab[aria-selected="true"] span{background:#1f6bff;color:#fff} .ix-bc__tab:focus-visible{outline:2px solid #1f6bff;outline-offset:2px} .ix-bc__panel{padding:28px 30px;border-radius:22px;background:#f4f6f8} .ix-bc__panel[hidden]{display:none} .ix-bc__q{margin:0 0 18px;font-size:25px;line-height:1.3;letter-spacing:-.015em;color:#0b0f17} .ix-bc__k{margin:0 0 8px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#1f6bff} .ix-bc__needs{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px} .ix-bc__needs li{padding:10px 12px;border-radius:10px;background:#fff;font-size:15px} .ix-bc__info{margin:0;font-size:15px;line-height:1.55;color:#3d434c} .ix-bc__info span{font-weight:500;color:#0b0f17} .ix-bc+.gx-key{margin-top:40px} /* Ausschreibung -> Direkt */ .ix-time{margin:0 0 40px;padding:30px 32px 26px;border-radius:22px;border:1px solid #e3e6ea;background:#fff} .ix-time__l{margin:0 0 18px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#7d838c} .ix-time__axis{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);position:relative} .ix-time__axis::before{content:"";position:absolute;left:0;right:0;top:6px;height:2px;background:#e3e6ea} .ix-time__st{position:relative;display:flex;flex-direction:column;gap:10px;font-size:14px;color:#3d434c} .ix-time__st i{width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid #c9cfd8;position:relative;z-index:1} .ix-time__st_a i{border-color:#0b0f17} .ix-time__bars{display:grid;grid-template-columns:repeat(5,1fr);row-gap:10px;margin-top:22px} .ix-time__bar{height:40px;border-radius:10px;display:flex;align-items:center;padding:0 14px;font-size:13.5px;transform-origin:left;transition:transform 1.2s cubic-bezier(.3,.7,.2,1)} .ix-time__bar_re{grid-column:4 / 6;background:#eceff2;color:#3d434c} .ix-time__bar_pro{grid-column:1 / 6;background:linear-gradient(90deg,#1f6bff 0,#1f6bff 60%,#174fbf 100%);color:#fff} .cx-anim .ix-time:not(.is-in) .ix-time__bar{transform:scaleX(0)} .ix-time__bar_pro{transition-delay:.5s} .ix-time__bar span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ix-vs{display:grid;grid-template-columns:1fr 1fr;gap:20px} .ix-vs__c{padding:28px 30px;border-radius:22px} .ix-vs__c_re{background:#f4f6f8} .ix-vs__c_pro{background:#0b0f17;color:#fff} .ix-vs__t{margin:0 0 12px;font-size:19px;font-weight:500} .ix-vs__c ul{list-style:none;margin:0;padding:0} .ix-vs__c li{display:flex;gap:12px;align-items:baseline;padding:10px 0;border-top:1px solid #dde1e6;font-size:15.5px} .ix-vs__c_pro li{border-color:#232a35} .ix-vs__c_re li::before{content:"·";color:#8a9099} .ix-vs__c_pro li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:#ffd84d;transform:translateY(-2px)} .cx-anim .ix-vs li{opacity:0;transition:opacity .4s ease;transition-delay:calc(.2s + var(--i)*.07s)} .cx-anim .ix-vs__c_pro li{transition-delay:calc(.6s + var(--i)*.08s)} .cx-anim .ix-vs.is-in li{opacity:1} .ix-vs+.gx-fine{margin-top:16px} /* Cases */ .ix-case .bx-case__dl div.is-unverified{background:#fffbea} .ix-case__anon{margin:18px 0 0;font-size:13px;color:#7d838c} .ix-viz{color:#fff} .ix-dv{display:grid;grid-template-columns:1fr 40px 1fr;align-items:center;gap:8px} .ix-dv__src{display:flex;flex-direction:column;gap:6px} .ix-dv__src span{font-size:12.5px;padding:7px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.18);color:#dfe3ea} .ix-dv__arrows{display:flex;flex-direction:column;gap:22px} .ix-dv__arrows i{display:block;height:2px;background:#1f6bff;transform-origin:left;transition:transform .6s ease} .ix-dv__arrows i:nth-child(2){transition-delay:.15s}.ix-dv__arrows i:nth-child(3){transition-delay:.3s}.ix-dv__arrows i:nth-child(4){transition-delay:.45s} .cx-anim .bx-case:not(.is-in) .ix-dv__arrows i{transform:scaleX(0)} .ix-dv__dst{padding:14px;border-radius:12px;background:#ffd84d;color:#0b0f17} .ix-dv__dst b{display:block;font-weight:500;font-size:15px} .ix-dv__dst em{font-style:normal;font-size:12px} .ix-shot__frame{border-radius:12px;background:#fff;overflow:hidden} .ix-shot__bar{display:flex;gap:5px;padding:8px 10px;background:#f1f3f5} .ix-shot__bar i{width:7px;height:7px;border-radius:50%;background:#d6dbe2} .ix-shot__ph{padding:14px;display:flex;flex-direction:column;gap:8px} .ix-shot__ph span{height:9px;border-radius:5px;background:repeating-linear-gradient(90deg,#eef0f3 0 12px,#e5e8ec 12px 24px)} .ix-shot__ph span.is-short{width:60%} .ix-shot__meta{display:grid;grid-template-columns:repeat(3,1fr);margin:0;border-top:1px dashed #d6dbe2} .ix-shot__meta div{padding:8px 10px} .ix-shot__meta dt{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:#7d838c} .ix-shot__meta dd{margin:0;font-size:13px;color:#0b0f17} .ix-prv{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:center} .ix-prv__in{display:flex;flex-direction:column;gap:6px} .ix-prv__in span{font-size:12.5px;padding:7px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.18);color:#dfe3ea;position:relative} .ix-prv__in span::after{content:"";position:absolute;right:-12px;top:50%;width:12px;height:1px;background:#1f6bff} .ix-prv__out{display:flex;flex-direction:column;gap:8px} .ix-prv__out b{font-weight:500;font-size:14px;padding:12px;border-radius:10px;background:#1f6bff;color:#fff;text-align:center} .ix-prv__out b+b{background:#ffd84d;color:#0b0f17} .ix-slots{margin-top:4px;padding:12px 14px;border-radius:12px;border:1px dashed #d9b84a;background:rgba(255,216,77,.08);font-size:12.5px;color:#e9d48a} .ix-slots p{margin:0 0 4px;font-weight:600} .ix-slots ul{margin:0;padding-left:16px} /* GEO */ .ix-geoq{list-style:none;margin:12px 0 0;padding:0;border-top:1px solid #e3e6ea} .ix-geoq li{padding:12px 0 12px 28px;border-bottom:1px solid #e3e6ea;font-size:16px;position:relative} .ix-geoq li::before{content:"?";position:absolute;left:0;top:12px;width:18px;height:18px;border-radius:50%;background:#0b0f17;color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center} .ix-caveat{margin:18px 0 0;padding:14px 16px;border-left:3px solid #ffd84d;background:#fffcf0;font-size:14.5px;line-height:1.55;color:#3d434c} /* Marktposition */ .ix-pos{padding-top:120px;padding-bottom:110px} .ix-pos__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center;margin-top:48px} .ix-stack{margin:0;position:relative} .ix-stack__layers{display:flex;flex-direction:column;align-items:center;gap:8px;perspective:900px} .ix-stack__l{width:calc(58% + var(--i)*8%);height:50px;border-radius:12px;border:1px solid #2b3f63;background:linear-gradient(180deg,#132036,#0f1626);display:flex;align-items:center;justify-content:center;transform:rotateX(28deg);transition:transform .45s ease,background .35s,border-color .35s} .ix-stack__l span{font-size:14px;color:#c9d6ee;transform:rotateX(-28deg)} .ix-stack__l.is-hot{background:#1f6bff;border-color:#1f6bff;transform:rotateX(28deg) translateY(-4px) scale(1.04)} .ix-stack__l.is-hot span{color:#fff} .ix-stack__base{width:100%;height:58px;border-radius:14px;background:#fff;color:#0b0f17;display:flex;align-items:center;justify-content:center;font-weight:500;font-size:16px;margin-top:6px} .ix-stack__core{margin:18px 0 0;text-align:center;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#ffd84d} .cx-anim .ix-stack:not(.is-in) .ix-stack__l{opacity:0;transform:rotateX(28deg) translateY(-30px)} .cx-anim .ix-stack__l{transition:opacity .5s ease,transform .6s cubic-bezier(.3,1.3,.5,1),background .35s,border-color .35s;transition-delay:calc(var(--i)*.1s),calc(var(--i)*.1s),0s,0s} .ix-pos__list{list-style:none;margin:0;padding:0;border-top:1px solid #2a313c} .ix-pos__list li{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:18px 12px 18px 0;border-bottom:1px solid #2a313c;outline:none;transition:background-color .25s} .ix-pos__list li.is-hot{background:rgba(31,107,255,.08)} .ix-pos__list li:focus-visible{box-shadow:inset 0 0 0 2px #1f6bff} .ix-pos__n{font-size:12px;color:#6b727c;padding-top:4px} .ix-pos__list li.is-hot .ix-pos__n{color:#6ea2ff} .ix-pos__list h3{margin:0 0 4px;font-size:19px;font-weight:500;color:#fff;text-transform:none;letter-spacing:-.01em} .ix-pos__list p{margin:0;font-size:15px;line-height:1.55;color:#a9b1bd} .ix-pos__list a{display:inline-flex;align-items:center;gap:8px;margin-top:8px;font-size:13.5px;color:#8fb3ff;text-decoration:none} .ix-pos__list a:hover{color:#fff} .ix-pull_dark{margin-top:64px} /* Vertrieb */ .ix-sales{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start} .ix-shift{margin:30px 0 0;padding:22px 24px;border-radius:18px;background:#fff;border:1px solid #e3e6ea} .ix-shift__row{display:grid;grid-template-columns:170px 1fr;gap:14px;align-items:center;padding:8px 0;font-size:14px} .ix-shift__row b{display:block;height:10px;border-radius:999px;background:#eef0f3;overflow:hidden} .ix-shift__row i{display:block;height:100%;width:var(--w);background:#9aa2ad;border-radius:999px;transition:width 1.6s cubic-bezier(.4,.1,.3,1) .4s,background-color 1.6s ease .4s} .ix-shift.is-in .ix-shift__row i{width:var(--w2)} .ix-shift.is-in .ix-shift__row:nth-child(2) i{background:#1f6bff} .ix-shift.is-in .ix-shift__row:nth-child(3) i{background:#ffd84d} .ix-shift figcaption{margin-top:10px;font-size:11.5px;color:#8d949e} .ix-hawo{padding:36px 38px;border-radius:24px;background:#fff;border:1px solid #e3e6ea} .ix-hawo__top{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding-bottom:20px;margin-bottom:22px;border-bottom:1px solid #eef0f2} .ix-hawo__logo{max-height:22px;width:auto} .ix-hawo__h{margin:0 0 14px;font-size:28px;line-height:1.2;letter-spacing:-.02em;font-weight:400;text-transform:none} .ix-hawo p{font-size:15.5px;line-height:1.6;color:#3d434c} .ix-hawo p strong{color:#0b0f17;font-weight:500} .ix-hawo .gx-tags{margin:16px 0 20px} .ix-hawo .bx-case__q{border-color:#eef0f2} /* International */ .ix-intl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center} .ix-rings{margin:0} .ix-rings__stage{position:relative;aspect-ratio:1;max-width:440px;margin:0 auto} .ix-ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;border:1px solid #d6dbe2;display:flex;justify-content:center;transition:transform .8s cubic-bezier(.3,1.2,.5,1),opacity .6s ease;transition-delay:calc(var(--i)*.25s)} .ix-ring_1{width:44%;height:44%;background:#e8f0ff;border-color:#cfe0ff} .ix-ring_2{width:72%;height:72%;background:#f4f6f8} .ix-ring_3{width:100%;height:100%;background:#fff;border-style:dashed} .ix-ring__t{position:absolute;top:7%;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:#5f6670} .ix-ring_1 .ix-ring__t{top:auto;bottom:12%;color:#1f4fb8} .ix-rings__core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:10px 14px;border-radius:10px;background:#0b0f17;color:#fff;font-size:13.5px;white-space:nowrap;z-index:2} .cx-anim .ix-rings:not(.is-in) .ix-ring{transform:translate(-50%,-50%) scale(.6);opacity:0} .ix-rings__legend{list-style:none;margin:24px 0 0;padding:0;font-size:14.5px;color:#4b525c} .ix-rings__legend li{padding:8px 0;border-top:1px solid #eef0f2} .ix-rings__legend b{font-weight:500;color:#0b0f17;margin-right:6px} /* Duo */ .ix-duo{display:grid;grid-template-columns:1fr 1fr;gap:28px} .ix-duo__c{padding:34px 36px;border-radius:24px;background:#fff;border:1px solid #e3e6ea} .ix-duo__h{margin:0 0 14px;font-size:24px;line-height:1.25;font-weight:400;letter-spacing:-.015em;text-transform:none} .ix-duo__c>p{font-size:15.5px;line-height:1.6;color:#3d434c} .ix-ref{margin-top:22px;padding-top:20px;border-top:1px solid #eef0f2;display:flex;flex-wrap:wrap;gap:16px;align-items:center} .ix-ref img{max-height:40px;max-width:130px;width:auto;object-fit:contain} .ix-ref p{flex:1;min-width:200px;margin:0;font-size:14.5px;line-height:1.5;color:#3d434c} .ix-ref p b{display:block;font-weight:500;color:#0b0f17} .ix-ref .bx-draft{flex-basis:100%} .ix-ref.is-unpub,.ix-quer.is-unpub{background:repeating-linear-gradient(135deg,#fffbea 0 10px,transparent 10px 20px);border-radius:12px;padding:16px} /* Bibliothek */ .ix-web{margin-bottom:28px} .ix-quer{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:16px;padding:16px 0;border-top:1px solid #eef0f2} .ix-quer img{max-height:28px;width:auto} .ix-quer p{margin:0;flex:1;min-width:240px;font-size:14.5px;color:#3d434c} .ix-quer .bx-draft{flex-basis:100%} .ix-lib__more{display:flex;flex-wrap:wrap;gap:28px;margin:24px 0 0} /* Situationen */ .ix-sits{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid #0b0f17} .ix-sits li{padding:28px 30px 30px 0;border-bottom:1px solid #d9dde2} .ix-sits li:not(:nth-child(3n+1)){padding-left:30px;border-left:1px solid #d9dde2} .ix-sits__n{display:block;font-size:12px;color:#1f6bff;letter-spacing:.06em;margin-bottom:12px} .ix-sits h3{margin:0 0 8px;font-size:20px;line-height:1.3;font-weight:500;letter-spacing:-.01em;text-transform:none;color:#0b0f17} .ix-sits p{margin:0;font-size:15px;line-height:1.6;color:#4b525c} .cx-anim .ix-sits li{opacity:0;transform:translate3d(0,12px,0);transition:opacity .5s ease,transform .6s ease;transition-delay:calc(var(--i)*.08s)} .cx-anim .ix-sits.is-in li{opacity:1;transform:none} /* Funnel */ .ix-arch{padding-top:110px;padding-bottom:110px} .ix-funnel{list-style:none;margin:48px auto 0;padding:0;display:flex;flex-direction:column;align-items:center;gap:10px} .ix-funnel__lv{width:var(--w);display:grid;grid-template-columns:220px 1fr;gap:20px;align-items:center;padding:20px 26px;border-radius:16px;background:#111823;border:1px solid #232a35} .ix-funnel__lv:last-child{background:#ffd84d;border-color:#ffd84d;color:#0b0f17} .ix-funnel__head span{display:block;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:#6ea2ff} .ix-funnel__lv:last-child .ix-funnel__head span{color:#5c4400} .ix-funnel__head b{font-size:19px;font-weight:500} .ix-funnel__lv ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px} .ix-funnel__lv ul li{font-size:13px;padding:6px 11px;border-radius:999px;border:1px solid #2f3846;color:#c9d0da} .ix-funnel__lv:last-child ul li{border-color:rgba(11,15,23,.25);color:#0b0f17} .cx-anim .ix-funnel__lv{opacity:0;transform:translate3d(0,16px,0) scaleX(.96);transition:opacity .55s ease,transform .65s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i)*.18s)} .cx-anim .ix-funnel.is-in .ix-funnel__lv{opacity:1;transform:none} /* Responsive */ @media (max-width:1180px){ .ix-logos{grid-template-columns:repeat(4,1fr)} .ix-logos li:nth-child(5){border-left:0} .ix-logos li:nth-child(n+5){border-top:1px solid #eef0f2} .ix-real{grid-template-columns:1fr 48px 1fr} .ix-real__photo{grid-column:1 / -1;margin:24px 0 0;aspect-ratio:16/7} } @media (max-width:1024px){ .ix-hero{padding:120px 0 56px} .ix-hero__grid{grid-template-columns:1fr;gap:36px} .ix-h1{font-size:38px} .ix-promise{font-size:21px} .ix-map__stage{aspect-ratio:4/4.3} .ix-node{font-size:10.5px;padding:5px 8px;white-space:normal;max-width:96px;text-align:center;line-height:1.2} .ix-node::before{display:none!important} .ix-node_out{max-width:none;white-space:nowrap;font-size:12px} .ix-map__core{padding:12px 14px}.ix-map__core b{font-size:14px} .ix-logos{grid-template-columns:repeat(2,1fr)} .ix-logos li{height:84px} .ix-logos li:nth-child(odd){border-left:0} .ix-logos li:nth-child(n+3){border-top:1px solid #eef0f2} .ix-real{grid-template-columns:1fr} .ix-real__plus{padding:12px 0} .ix-real__photo{aspect-ratio:4/3} .ix-buy,.ix-pos,.ix-arch{padding-top:80px;padding-bottom:80px} .ix-buy__grid{grid-template-columns:1fr;margin-top:32px} .ix-lane{padding:22px 18px} .ix-pull p{font-size:22px} .ix-bc{grid-template-columns:1fr;gap:28px} .ix-bc__wheel{max-width:280px} .ix-bc__dot{width:42px;height:42px;margin:-21px 0 0 -21px;font-size:14px;transform:rotate(var(--a)) translate(103px) rotate(calc(-1*var(--a)))} .ix-bc__hub{font-size:12px} .ix-bc__panel{padding:22px 20px} .ix-bc__q{font-size:20px} .ix-bc__needs{grid-template-columns:1fr} .ix-time{padding:22px 18px} .ix-time__axis,.ix-time__bars{grid-template-columns:repeat(5,1fr)} .ix-time__st span{font-size:10.5px;line-height:1.25;hyphens:auto} .ix-time__bar{height:auto;min-height:36px;padding:8px 10px;font-size:12px} .ix-time__bar span{white-space:normal} .ix-vs{grid-template-columns:1fr} .ix-vs__c{padding:22px 20px} .ix-pos__grid{grid-template-columns:1fr;gap:36px} .ix-sales,.ix-intl,.ix-duo{grid-template-columns:1fr;gap:32px} .ix-hawo,.ix-duo__c{padding:24px 22px} .ix-shift__row{grid-template-columns:1fr;gap:6px} .ix-sits{grid-template-columns:1fr} .ix-sits li,.ix-sits li:not(:nth-child(3n+1)){padding:22px 0;border-left:0} .ix-funnel__lv{width:100%!important;grid-template-columns:1fr;gap:10px;padding:18px} .ix-dv{grid-template-columns:1fr 24px 1fr} } @media (prefers-reduced-motion:reduce){ .cx-ind [class*="ix-"],.cx-ind [class*="ix-"]::before,.cx-ind [class*="ix-"]::after,.cx-ind .ix-map__grid path{animation:none!important;transition:none!important} .cx-anim .ix-node{opacity:1!important} .cx-anim .ix-map__grid path{stroke-dashoffset:0!important} .cx-anim .ix-logos li,.cx-anim .ix-real li,.cx-anim .ix-vs li,.cx-anim .ix-sits li,.cx-anim .ix-funnel__lv,.cx-anim .ix-stack__l{opacity:1!important;transform:none!important} .cx-anim .ix-stack__l{transform:rotateX(28deg)!important} .cx-anim .ix-real__plus span,.cx-anim .ix-time__bar,.cx-anim .ix-ring,.cx-anim .ix-dv__arrows i{transform:none!important;opacity:1!important} .cx-anim .ix-ring{transform:translate(-50%,-50%)!important} .ix-shift__row i{width:var(--w2)!important} .ix-lane li{color:#e9edf3!important} } .ix-web{grid-template-columns:repeat(4,1fr)} @media (max-width:1180px){.ix-web{grid-template-columns:repeat(2,1fr)}} @media (max-width:640px){.ix-web{grid-template-columns:1fr}} @media (max-width:1024px){ .ix-map__k{display:none} .ix-map__core{padding:10px 12px;border-radius:12px} .ix-map__core b{font-size:13px} .ix-time__axis{grid-template-columns:1fr;row-gap:0} .ix-time__axis::before{left:6px;right:auto;top:6px;bottom:6px;width:2px;height:auto} .ix-time__st{flex-direction:row;align-items:center;gap:12px;padding:5px 0} .ix-time__st span{font-size:13.5px} .ix-time__bars{grid-template-columns:1fr} .ix-time__bar_re,.ix-time__bar_pro{grid-column:1} .ix-time__bar_re{margin-left:40%} } /* Referenzen: drei Projekt-Kunden groß, Rest als Reihe */ .ix-feat{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .ix-feat a{display:flex;flex-direction:column;gap:18px;height:100%;padding:26px 26px 20px;border-radius:20px;border:1px solid #e3e6ea;background:#fff;color:#0b0f17;text-decoration:none;transition:border-color .25s,box-shadow .25s,transform .25s} .ix-feat a:hover,.ix-feat a:focus-visible{border-color:#0b0f17;box-shadow:0 18px 40px -28px rgba(11,15,23,.45);transform:translateY(-2px)} .ix-feat a:focus-visible{outline:2px solid #1f6bff;outline-offset:2px} .ix-feat__logo{display:flex;align-items:center;height:56px} .ix-feat__logo img{max-height:46px;max-width:230px;width:auto;object-fit:contain;object-position:left} .ix-feat__meta{display:flex;flex-direction:column;gap:4px;padding-top:16px;border-top:1px solid #eef0f2} .ix-feat__meta b{font-size:15px;font-weight:500} .ix-feat__meta em{font-style:normal;font-size:13.5px;line-height:1.45;color:#5f6670} .ix-feat__go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:#1f6bff} .cx-anim .ix-feat li{opacity:0;transform:translate3d(0,12px,0);transition:opacity .5s ease,transform .6s ease;transition-delay:calc(var(--i)*.1s)} .cx-anim .ix-feat.is-in li{opacity:1;transform:none} .ix-logos{grid-template-columns:repeat(6,1fr)!important;border-top:1px solid #e3e6ea} .ix-logos li{height:96px} .ix-logos li:nth-child(n+5){border-top:0} .ix-logos li:nth-child(5){border-left:1px solid #eef0f2} .ix-logos img{max-height:34px;max-width:118px;filter:grayscale(1) contrast(1.05);opacity:.85} .ix-logos li:nth-child(6n+1){border-left:0} .ix-logos li:nth-child(n+7){border-top:1px solid #eef0f2} .ix-logos__w span{font-weight:700;font-size:17px;letter-spacing:.02em;text-transform:uppercase;color:#0b0f17;opacity:.62;white-space:nowrap;transition:opacity .3s} .ix-logos__w:hover span{opacity:1} /* Screenshot im Case */ .ix-case__shot{display:block;margin:0 0 26px;border-radius:14px;overflow:hidden;border:1px solid #e3e6ea;background:#fff;box-shadow:0 22px 44px -34px rgba(11,15,23,.45);transition:transform .3s,box-shadow .3s} .ix-case__shot:hover{transform:translateY(-2px);box-shadow:0 28px 50px -30px rgba(11,15,23,.5)} .ix-case__bar{display:flex;align-items:center;gap:5px;padding:8px 12px;background:#f4f6f8;border-bottom:1px solid #e3e6ea} .ix-case__bar i{width:8px;height:8px;border-radius:50%;background:#d6dbe2} .ix-case__bar em{margin-left:10px;font-style:normal;font-size:12px;color:#5f6670} .ix-case__shot img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top} .ix-case__url{margin:18px 0 0} .ix-case .bx-case__logo{max-height:34px;max-width:170px} @media (max-width:1024px){ .ix-feat{grid-template-columns:1fr;gap:10px} .ix-feat a{flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px 18px;padding:18px} .ix-feat__logo{height:40px}.ix-feat__logo img{max-height:34px;max-width:150px} .ix-feat__meta{flex:1 1 100%;padding-top:12px} .ix-feat__go{margin-top:0} .ix-logos{grid-template-columns:repeat(3,1fr)!important} .ix-logos li{height:76px;border-left:1px solid #eef0f2!important} .ix-logos li:nth-child(3n+1){border-left:0!important} .ix-logos li:nth-child(n+4){border-top:1px solid #eef0f2} } @media (prefers-reduced-motion:reduce){.cx-anim .ix-feat li{opacity:1!important;transform:none!important}} .ix-case__q{margin:22px 0 0} /* ===== Branchenseite Logistik (lg-, nutzt ix-/cx-proof) ===== */ .lg-niches{list-style:none;margin:8px 0 18px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #0b0f17} .lg-niches li{display:flex;flex-direction:column;gap:8px;padding:26px 24px 28px 0;border-bottom:1px solid #e3e6ea;min-height:132px;position:relative} .lg-niches li:not(:nth-child(4n+1)){padding-left:24px;border-left:1px solid #eef0f2} .lg-niches b{font-size:19px;font-weight:600;letter-spacing:-.01em;color:#0b0f17} .lg-niches span{font-size:14.5px;line-height:1.5;color:#5f6670} .lg-niches li::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:0;background:#1f6bff;transition:width .5s ease} .lg-niches li:not(:nth-child(4n+1))::before{left:24px} .lg-niches li:hover::before{width:40px} .cx-anim .lg-niches li{opacity:0;transform:translate3d(0,10px,0);transition:opacity .5s ease,transform .6s ease;transition-delay:calc(var(--i)*.06s)} .cx-anim .lg-niches.is-in li{opacity:1;transform:none} .cx-log .ix-real__photo img{aspect-ratio:4/3;object-fit:cover} @media (max-width:1024px){ .lg-niches{grid-template-columns:repeat(2,1fr)} .lg-niches li{padding:22px 18px 22px 0;min-height:0} .lg-niches li:not(:nth-child(4n+1)){padding-left:0;border-left:0} .lg-niches li:nth-child(even){padding-left:18px;border-left:1px solid #eef0f2} .lg-niches li:not(:nth-child(4n+1))::before{left:0}.lg-niches li:nth-child(even)::before{left:18px} } @media (max-width:560px){.lg-niches{grid-template-columns:1fr}.lg-niches li:nth-child(even){padding-left:0;border-left:0}.lg-niches li:nth-child(even)::before{left:0}} @media (prefers-reduced-motion:reduce){.cx-anim .lg-niches li{opacity:1!important;transform:none!important}} .cx-log .ix-sits{grid-template-columns:repeat(4,1fr)} @media (max-width:1024px){.cx-log .ix-sits{grid-template-columns:repeat(2,1fr)}} @media (max-width:560px){.cx-log .ix-sits{grid-template-columns:1fr}} .cx-log .ix-sits li:not(:nth-child(3n+1)){padding-left:0;border-left:0} .cx-log .ix-sits li:not(:nth-child(4n+1)){padding-left:30px;border-left:1px solid #d9dde2} @media (max-width:1024px){.cx-log .ix-sits li:not(:nth-child(4n+1)){padding-left:0;border-left:0}.cx-log .ix-sits li:nth-child(even){padding-left:30px;border-left:1px solid #d9dde2}} @media (max-width:560px){.cx-log .ix-sits li:nth-child(even){padding-left:0;border-left:0}} .lg-h1pre{display:flex;align-items:center;gap:8px;margin:0 0 22px;font-size:13px;line-height:1.4;font-weight:400;letter-spacing:.02em;color:#5f6670} .lg-h1pre::before{content:"";width:6px;height:6px;border-radius:50%;background:#0E68FF} /* ===== IT, Software & SaaS (01.11.2026), Präfix it- ===== */ .it-logos{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .it-logos a{display:flex;align-items:center;justify-content:center;height:96px;padding:20px 28px;border:1px solid #eef0f2;border-radius:14px;background:#fff;transition:border-color .25s,box-shadow .25s,transform .25s} .it-logos a:hover{border-color:#d9dde2;box-shadow:0 12px 28px rgba(11,15,23,.08);transform:translateY(-2px)} .it-logos img{max-height:40px;max-width:170px;width:auto;height:auto} .cx-anim .it-logos li{opacity:0;transform:translate3d(0,10px,0);transition:opacity .5s ease,transform .5s ease;transition-delay:calc(var(--i)*70ms)} .cx-anim .it-logos.is-in li{opacity:1;transform:none} .it-facts{list-style:none;margin:8px 0 40px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid rgba(255,255,255,.14)} .it-facts li{display:flex;flex-direction:column;gap:6px;padding:22px 24px 0 0} .it-facts li+li{padding-left:24px;border-left:1px solid rgba(255,255,255,.14)} .it-facts b{font-size:34px;font-weight:500;letter-spacing:-.02em;line-height:1.05;color:#fff} .it-facts span{font-size:14.5px;line-height:1.45;color:rgba(255,255,255,.72)} .cx-anim .it-facts li{opacity:0;transform:translate3d(0,10px,0);transition:opacity .6s ease,transform .6s ease;transition-delay:calc(var(--i)*90ms)} .cx-anim .it-facts.is-in li{opacity:1;transform:none} .it-proj{list-style:none;margin:40px 0 0;padding:0;display:flex;flex-direction:column;gap:72px} .it-proj__i{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center} .it-proj__i:nth-child(even) .it-proj__shot{order:2} .it-proj__shot{margin:0} .it-proj__b{display:flex;flex-direction:column;gap:14px;align-items:flex-start} .it-proj__logo{display:flex;align-items:center;height:36px}.it-proj__logo img{max-height:34px;max-width:180px;width:auto} .it-proj__k{margin:6px 0 0;font-size:12px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:#0E68FF} .it-proj__h{margin:0;font-size:28px;font-weight:500;letter-spacing:-.02em;line-height:1.22;color:#0b0f17} .it-proj__t{margin:0;font-size:17px;line-height:1.6;color:#3d434b} .it-proj__did{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px} .it-proj__did li{font-size:13.5px;line-height:1;padding:8px 12px;border:1px solid #e3e6ea;border-radius:999px;color:#2a2f36} .it-proj__fact{margin:4px 0 0;padding-left:14px;border-left:2px solid #ffd84d;font-size:15px;line-height:1.5;color:#2a2f36} .it-proj__q{margin:4px 0 0;padding-left:14px;border-left:2px solid #0E68FF} .it-proj__q p{margin:0;font-size:16.5px;line-height:1.5;color:#0b0f17} .it-proj__q footer{margin-top:6px;font-size:13.5px;color:#6b727b} .cx-anim .it-proj__i{opacity:0;transform:translate3d(0,18px,0);transition:opacity .7s ease,transform .7s ease} .cx-anim .it-proj__i.is-in{opacity:1;transform:none} @media (max-width:1024px){.it-proj__i{grid-template-columns:1fr;gap:28px}.it-proj__i:nth-child(even) .it-proj__shot{order:0}.it-logos{grid-template-columns:repeat(2,1fr)}} @media (max-width:640px){.it-facts{grid-template-columns:1fr}.it-facts li+li{padding-left:0;border-left:0;border-top:1px solid rgba(255,255,255,.14);padding-top:18px}.it-facts li{padding-bottom:18px}.it-proj{gap:56px}.it-proj__h{font-size:23px}.it-logos a{height:80px;padding:16px}.it-logos img{max-height:32px;max-width:130px}} @media (prefers-reduced-motion:reduce){.cx-anim .it-logos li,.cx-anim .it-facts li,.cx-anim .it-proj__i{opacity:1!important;transform:none!important;transition:none}} /* it.css */ /* ===== IT, Software & SaaS – Premium-Experience (01.11.2026), Präfix itx- ===== Nur auf /branchen/it/ (body.itx). Farben: POOSCH s/w + Blau #0E68FF (Aktion) + Gelb #ffd84d (Ergebnis). */ .itx{--ink:#0b0f17;--ink2:#3d434c;--mute:#6b727b;--line:#e6e8eb;--blue:#0E68FF;--blue2:#6ea2ff;--yel:#ffd84d;--night:#070a10;--night2:#0d121b;--edge:rgba(255,255,255,.09);--ease:cubic-bezier(.2,.7,.2,1)} .itx .cx-wrap{max-width:1240px} .itx-k{margin:0 0 18px;font-size:14px;font-weight:500;color:var(--blue)} .itx-dark .itx-k,.itx-hero .itx-k,.itx-case .itx-k{color:var(--blue2)} .itx-h2{margin:0 0 22px;font-size:54px;line-height:1.06;letter-spacing:-.035em;font-weight:500;color:var(--ink);max-width:980px;text-wrap:balance} .itx-h2_xl{font-size:64px;max-width:1000px} .itx-h2_sm{font-size:40px} .itx-lead{margin:0 0 18px;font-size:19px;line-height:1.6;color:var(--ink2);max-width:720px} .itx-head{margin-bottom:64px} .itx-head_wide .itx-h2{max-width:1080px} .itx-fine{margin:28px 0 0;font-size:14px;color:var(--mute)} .itx-sec{padding:140px 0;position:relative} .itx-sec_tint{background:#f4f5f7} .itx-dark{background:var(--night);color:#fff} .itx-dark .itx-h2{color:#fff}.itx-dark .itx-lead{color:#aab1bb}.itx-dark .itx-fine{color:#7f8792} /* Buttons + Links */ .itx-btn{background:#fff!important;color:#0b0f17!important;border-radius:999px!important;padding:16px 26px!important;box-shadow:none!important;transition:background .2s!important} .itx-btn:hover{background:#ffd84d!important;box-shadow:none!important;transform:none} .itx-btn:focus-visible,.itx-link:focus-visible,.itx-cl__item:focus-visible,.itx-tabs__b:focus-visible,.itx-jr__step:focus-visible{outline:2px solid var(--blue2);outline-offset:4px} .itx-btn_light{background:#fff!important;color:var(--ink)!important;box-shadow:none} .itx-btn_light:hover{background:#ffd84d!important} .itx-link{display:inline-flex;align-items:center;gap:10px;font-size:16px;font-weight:500;color:var(--ink);text-decoration:none;padding:6px 0;border-bottom:1px solid currentColor;border-color:rgba(11,15,23,.25);transition:border-color .2s,gap .25s var(--ease)} .itx-link:hover{border-color:currentColor;gap:14px} .itx-link_light,.itx-hero .itx-link{color:#fff;border-color:rgba(255,255,255,.3)} /* ---------- 1 · Hero ---------- */ .itx-hero{position:relative;overflow:hidden;background:var(--night);color:#fff;padding:150px 0 0;isolation:isolate} .itx-hero__bg{position:absolute;inset:0;z-index:-1;pointer-events:none} .itx-hero__glow{position:absolute;right:-10%;top:-20%;width:75%;height:110%;background:radial-gradient(closest-side,rgba(14,104,255,.30),rgba(14,104,255,.06) 55%,transparent 72%)} .itx-hero__grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 65% 40%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 65% 40%,#000 20%,transparent 75%)} .itx-hero__w{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:48px;align-items:center} .itx-crumbs{color:#8a919b!important;margin-bottom:34px!important}.itx-crumbs a{color:#b7bdc6} .itx-h1{margin:0 0 30px;font-size:68px;line-height:1.02;letter-spacing:-.045em;font-weight:500;color:#fff;text-transform:none} .itx-h1 .cx-line{display:block} .itx-h1__b{color:#8f96a1} .itx-h1__pre{display:flex;align-items:center;gap:10px;margin:0 0 24px;font-size:14px;font-weight:500;letter-spacing:0;line-height:1.4;color:var(--blue2)} .itx-h1__pre::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px rgba(14,104,255,.22)} .itx-promise{margin:0 0 18px;font-size:24px;line-height:1.35;letter-spacing:-.015em;color:#fff;max-width:560px} .itx-intro{margin:0;font-size:17px;line-height:1.65;color:#a9b0ba;max-width:580px} .itx-actions{display:flex;flex-wrap:wrap;align-items:center;gap:28px;margin:36px 0 0} .itx-trust{display:flex;align-items:flex-start;gap:10px;margin:34px 0 0;font-size:14px;line-height:1.5;color:#9aa1ab;max-width:520px} .itx-trust__dot{flex:none;width:8px;height:8px;margin-top:6px;border-radius:50%;background:var(--yel);box-shadow:0 0 0 4px rgba(255,216,77,.16)} .itx-viz{margin:0;perspective:1400px} .itx-viz__stage{position:relative;aspect-ratio:560/520;border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));box-shadow:inset 0 0 0 1px var(--edge),0 40px 80px -40px rgba(0,0,0,.8);transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;transition:transform .5s var(--ease);overflow:hidden} .itx-viz__svg{position:absolute;inset:0;width:100%;height:100%} .itx-viz__rings ellipse{fill:none;stroke:rgba(255,255,255,.08);stroke-width:1} .itx-viz__halo{transform-origin:280px 250px} .itx-viz__wire{fill:none;stroke:rgba(110,162,255,.32);stroke-width:1.1;stroke-dasharray:100;stroke-dashoffset:0} .itx-viz__out{fill:none;stroke:rgba(255,216,77,.55);stroke-width:1.4;stroke-dasharray:3 5} .itx-viz__pkt{fill:#9cc0ff;filter:drop-shadow(0 0 4px rgba(110,162,255,.9))} .itx-viz__pkt_y{fill:var(--yel);filter:drop-shadow(0 0 6px rgba(255,216,77,.9))} .itx-core{position:absolute;left:50%;top:48.1%;transform:translate(-50%,-50%) translateZ(40px);z-index:3;padding:18px 24px;border-radius:14px;background:rgba(9,13,20,.92);box-shadow:inset 0 0 0 1px rgba(110,162,255,.4),0 0 0 8px rgba(14,104,255,.08),0 24px 50px -20px rgba(14,104,255,.6);text-align:center} .itx-core__k{display:block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--blue2);margin-bottom:5px} .itx-core b{font-size:18px;font-weight:500;white-space:nowrap} .itx-core__pulse{position:absolute;inset:-1px;border-radius:inherit;box-shadow:0 0 0 1px rgba(110,162,255,.6);opacity:0} .itx-node{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%) translateZ(20px);z-index:2;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-size:12.5px;padding:7px 12px;border-radius:999px;background:rgba(13,18,27,.88);color:#d8dde4;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);backdrop-filter:blur(6px)} .itx-node i{width:6px;height:6px;border-radius:50%;background:#fff} .itx-node_c i{background:var(--blue2)} .itx-node_m i{border-radius:1px;transform:rotate(45deg);background:transparent;box-shadow:inset 0 0 0 1.5px #c7ccd4} .itx-node_extra{font-size:11.5px;color:#9aa1ab} .itx-node_out{background:var(--yel);color:var(--ink);font-weight:500;padding:9px 16px;box-shadow:0 10px 30px -10px rgba(255,216,77,.6)} .itx-ticker{position:absolute;left:16px;bottom:14px;z-index:3;display:flex;align-items:center;gap:10px;font-size:12px;color:#9aa1ab} .itx-ticker__l{display:inline-flex;align-items:center;gap:6px} .itx-ticker__l::before{content:"";width:6px;height:6px;border-radius:50%;background:#33d17a;box-shadow:0 0 0 3px rgba(51,209,122,.2)} .itx-ticker__q{color:#e6e9ee;font-weight:500;transition:opacity .25s,transform .25s} .itx-ticker__q.is-out{opacity:0;transform:translateY(4px)} .itx-viz__cap{margin-top:12px;font-size:12px;line-height:1.5;color:#6f7782} .itx-refs{margin-top:96px;padding:40px 24px 56px!important;border-top:1px solid var(--edge)} .itx-refs__top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 24px;margin-bottom:24px} .itx-refs__h{margin:0;font-size:15px;font-weight:500;color:#aab1bb} .itx-rating{font-size:14px;color:#c9ced5;text-decoration:none} .itx-rating b{color:#fff;margin:0 4px} .itx-rating__stars{color:var(--yel);letter-spacing:1px} .itx-logos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .itx-logos a{display:flex;align-items:center;justify-content:center;height:84px;border-radius:12px;background:#fff;opacity:.92;transition:opacity .25s,transform .3s var(--ease)} .itx-logos a:hover{opacity:1;transform:translateY(-2px)} .itx-logos img{max-height:34px;max-width:160px;width:auto;height:auto} .itx-refs__note{margin:14px 0 0;font-size:12.5px;color:#6f7782} /* ---------- 2 · Journey ---------- */ .itx-jr{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:72px;align-items:start} .itx-jr__t{margin:0 0 18px;font-size:14px;font-weight:500;color:var(--mute)} .itx-jr__steps ol{list-style:none;margin:0;padding:0;counter-reset:s} .itx-jr__step{position:relative;display:flex;gap:20px;align-items:flex-start;padding:30px 0 30px;border-top:1px solid var(--line);cursor:pointer;min-height:22vh} .itx-jr__step:last-child{border-bottom:1px solid var(--line)} .itx-jr__n{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font-size:14px;font-weight:500;color:var(--mute);box-shadow:inset 0 0 0 1px var(--line);transition:background .35s,color .35s,box-shadow .35s} .itx-jr__s{font-size:26px;line-height:1.25;letter-spacing:-.02em;color:#a0a6af;transition:color .35s;padding-top:2px} .itx-jr__step.is-done .itx-jr__n{color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)} .itx-jr__step.is-on .itx-jr__n{background:var(--blue);color:#fff;box-shadow:0 0 0 6px rgba(14,104,255,.14)} .itx-jr__step.is-on .itx-jr__s,.itx-jr__step.is-done .itx-jr__s{color:var(--ink)} .itx-jr__step::before{content:"";position:absolute;left:16px;top:64px;bottom:-30px;width:2px;background:var(--line)} .itx-jr__step:last-child::before{display:none} .itx-jr__step.is-done::before{background:var(--blue)} .itx-jr__old{margin-top:48px;padding:24px 26px;border-radius:14px;background:#f4f5f7} .itx-jr__old ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px} .itx-jr__old li{font-size:14px;padding:7px 12px;border-radius:999px;background:#fff;color:var(--ink2)} .itx-jr__stick{position:sticky;top:120px} .itx-ui{border-radius:16px;background:var(--night2);box-shadow:0 0 0 1px rgba(11,15,23,.08),0 50px 90px -40px rgba(11,15,23,.55);overflow:hidden;color:#e6e9ee} .itx-ui__bar{display:flex;align-items:center;gap:6px;height:42px;padding:0 16px;border-bottom:1px solid var(--edge)} .itx-ui__bar i{width:9px;height:9px;border-radius:50%;background:#2a313c} .itx-ui__url{margin-left:14px;flex:1;max-width:320px;font-size:12px;padding:5px 12px;border-radius:999px;background:#151b26;color:#9aa1ab;transition:color .3s} .itx-ui__body{position:relative;height:400px;padding:30px} .itx-ui__pane{position:absolute;inset:30px;display:flex;flex-direction:column;gap:14px;opacity:0;transform:translateY(14px) scale(.985);transition:opacity .5s var(--ease),transform .6s var(--ease);pointer-events:none} .itx-ui[data-stage="0"] [data-pane="0"],.itx-ui[data-stage="1"] [data-pane="1"],.itx-ui[data-stage="2"] [data-pane="2"],.itx-ui[data-stage="3"] [data-pane="3"],.itx-ui[data-stage="4"] [data-pane="4"]{opacity:1;transform:none} .itx-ui__search{display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:999px;background:#151b26;box-shadow:inset 0 0 0 1px rgba(110,162,255,.35);font-size:15px;color:#fff} .itx-ui__search svg{color:var(--blue2)} .itx-ui__typed{overflow:hidden;white-space:nowrap;border-right:2px solid var(--blue2)} .itx-ui__res{display:flex;flex-direction:column;gap:8px;padding:16px 18px;border-radius:12px;background:#111722} .itx-ui__res.is-hit{box-shadow:inset 0 0 0 1px rgba(110,162,255,.5);background:#121b2b} .itx-ui__u{font-size:12px;color:#7aa6ff} .itx-ui__res b{font-size:16px;font-weight:500;color:#fff} .itx-ui__ln{display:block;height:7px;border-radius:4px;background:#232a36;width:92%} .itx-ui__ln_s{width:64%}.itx-ui__ln_xs{width:34%;background:#2b3442} .itx-ui__msg{max-width:86%;padding:14px 18px;border-radius:14px;font-size:15px;line-height:1.45} .itx-ui__msg_q{align-self:flex-end;background:#1b2433;color:#fff} .itx-ui__msg_a{display:flex;gap:12px;background:#111722;width:86%} .itx-ui__msg_a>div{flex:1;display:flex;flex-direction:column;gap:8px;padding-top:4px} .itx-ui__ai{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--blue);font-size:11px;font-weight:600;color:#fff} .itx-ui__cite{align-self:flex-start;margin-top:6px;font-size:12px;padding:5px 10px;border-radius:999px;background:rgba(255,216,77,.14);color:var(--yel)} .itx-ui__cluster{display:flex;flex-wrap:wrap;gap:10px;align-content:center;justify-content:center;height:100%} .itx-ui__cluster span{font-size:14px;padding:10px 16px;border-radius:999px;background:#151b26;box-shadow:inset 0 0 0 1px var(--edge);color:#c9ced5} .itx-ui__cluster .is-c{background:var(--blue);color:#fff;box-shadow:0 0 0 6px rgba(14,104,255,.15)} .itx-ui__proof{display:flex;align-items:center;gap:18px;padding:22px;border-radius:14px;background:#fff;color:var(--ink)} .itx-ui__proof img{height:26px;width:auto} .itx-ui__proof span{font-size:15px;color:var(--ink2)}.itx-ui__proof b{font-size:34px;font-weight:500;color:var(--ink);letter-spacing:-.02em;margin-right:6px} .itx-ui__logos{display:flex;gap:12px} .itx-ui__logos img{height:48px;padding:12px 18px;border-radius:12px;background:#fff;width:auto;object-fit:contain;max-width:48%} .itx-ui__form{display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:14px;background:#111722} .itx-ui__fl{font-size:12px;color:#7f8792} .itx-ui__fi{display:block;height:38px;border-radius:9px;background:#1a212d} .itx-ui__fi_v{display:flex;align-items:center;padding:0 12px;font-size:14px;color:#fff} .itx-ui__send{margin-top:8px;align-self:flex-start;padding:11px 18px;border-radius:999px;background:var(--blue);font-size:14px;font-weight:500;color:#fff} .itx-ui__done{display:flex;align-items:center;gap:10px;padding:14px 18px;border-radius:12px;background:var(--yel);color:var(--ink);font-size:15px;font-weight:500} .itx-ui__prog{height:3px;background:#151b26}.itx-ui__prog span{display:block;height:100%;width:20%;background:var(--blue);transition:width .6s var(--ease)} .itx-jr__close{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:72px;align-items:center;margin-top:120px} .itx-jr__photo{position:relative;margin:0;border-radius:16px;overflow:hidden} .itx-jr__photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover} .itx-jr__photo figcaption{position:absolute;left:16px;right:16px;bottom:16px;padding:14px 16px;border-radius:12px;background:rgba(7,10,16,.78);backdrop-filter:blur(8px);color:#fff;font-size:14.5px;line-height:1.45} .itx-jr__key{margin:0;font-size:32px;line-height:1.3;letter-spacing:-.02em;color:var(--ink)} /* ---------- 3 · Problem ---------- */ .itx-prob{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:80px;align-items:start} .itx-prob__head{position:sticky;top:120px} .itx-prob__close{margin:28px 0 0;padding:18px 20px;border-radius:12px;background:#fff;font-size:18px;line-height:1.45;color:var(--ink)} .itx-prob__l{list-style:none;margin:0;padding:0} .itx-prob__l li{display:grid;grid-template-columns:56px 1fr;gap:8px;padding:36px 0;border-top:1px solid #d9dce1} .itx-prob__l li:last-child{border-bottom:1px solid #d9dce1} .itx-prob__n{font-size:44px;line-height:1;font-weight:500;letter-spacing:-.04em;color:#c4c9d0;transition:color .5s} .itx-prob__l li.is-in .itx-prob__n{color:var(--blue)} .itx-prob__l h3{margin:0 0 10px;font-size:23px;font-weight:500;letter-spacing:-.015em;line-height:1.3;color:var(--ink)} .itx-prob__l p{margin:0;font-size:16.5px;line-height:1.6;color:var(--ink2)} /* ---------- 4 · Cluster ---------- */ .itx-cl__app{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center} .itx-cl__map{position:relative;aspect-ratio:520/440} .itx-cl__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .itx-cl__ring{stroke:rgba(255,255,255,.12);stroke-width:1} .itx-cl__x2{stroke:rgba(255,255,255,.05);stroke-width:1} .itx-cl__edge{stroke:rgba(110,162,255,.18);stroke-width:1;transition:stroke .35s,stroke-width .35s} .itx-cl__edge.is-on{stroke:var(--blue2);stroke-width:2} .itx-cl__hub{fill:#0d1420;stroke:rgba(110,162,255,.55);stroke-width:1} .itx-cl__hubt{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:13px;font-weight:500;color:#fff;white-space:nowrap} .itx-cl__dot{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:14px;height:14px;border-radius:50%;background:#1a2230;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35);cursor:pointer;transition:background .3s,box-shadow .3s,transform .3s var(--ease)} .itx-cl__dot em{position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);font-style:normal;font-size:12px;white-space:nowrap;color:#7f8792;transition:color .3s} .itx-cl__dot.is-on{background:var(--blue);box-shadow:0 0 0 7px rgba(14,104,255,.22),0 0 24px rgba(14,104,255,.7);transform:translate(-50%,-50%) scale(1.15)} .itx-cl__dot.is-on em{color:#fff} .itx-cl__list{display:flex;flex-direction:column} .itx-cl__item{display:grid;grid-template-columns:1fr;gap:4px;text-align:left;padding:16px 18px;margin:0;border:0;border-radius:12px;background:transparent;color:#fff;font:inherit;cursor:pointer;transition:background .25s} .itx-cl__item+.itx-cl__item{margin-top:2px} .itx-cl__t{font-size:19px;font-weight:500;letter-spacing:-.01em;color:#8f96a1;transition:color .25s} .itx-cl__x{font-size:14.5px;line-height:1.45;color:#7f8792;max-height:0;overflow:hidden;opacity:0;transition:max-height .35s var(--ease),opacity .3s} .itx-cl__item:hover .itx-cl__t{color:#fff} .itx-cl__item.is-on{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--edge)} .itx-cl__item.is-on .itx-cl__t{color:#fff} .itx-cl__item.is-on .itx-cl__x{max-height:60px;opacity:1;color:#aab1bb} /* ---------- 5 · Signature Case ---------- */ .itx-case{background:var(--night);color:#fff;overflow:hidden} .itx-case::before{content:"";position:absolute;left:-15%;top:10%;width:60%;height:70%;background:radial-gradient(closest-side,rgba(14,104,255,.16),transparent 70%);pointer-events:none} .itx-case .itx-h2{color:#fff} .itx-case__head{margin-bottom:56px} .itx-dash{position:relative;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:0;border-radius:20px;background:var(--night2);box-shadow:inset 0 0 0 1px var(--edge);overflow:hidden} .itx-dash__main{padding:36px 40px 32px;border-right:1px solid var(--edge)} .itx-dash__top{display:flex;justify-content:space-between;gap:16px;font-size:13px;color:#9aa1ab} .itx-dash__live{display:inline-flex;align-items:center;gap:8px;color:#d8dde4} .itx-dash__live i{width:7px;height:7px;border-radius:50%;background:var(--yel);box-shadow:0 0 0 4px rgba(255,216,77,.15)} .itx-dash__big{display:flex;align-items:center;gap:22px;margin:22px 0 28px} .itx-dash__from{font-size:64px;font-weight:500;letter-spacing:-.04em;color:#59606b;line-height:1} .itx-dash__arrow{color:#59606b} .itx-dash__to{font-size:140px;font-weight:500;letter-spacing:-.06em;line-height:.85;color:#fff;font-variant-numeric:tabular-nums} .itx-dash__bars{display:grid;grid-template-columns:1fr 1fr;gap:16px;height:200px;align-items:end} .itx-dash__bar{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end} .itx-dash__bar span{display:block;height:var(--h);min-height:6px;border-radius:8px 8px 2px 2px;background:#262d39;transform-origin:bottom;transition:transform 1.2s var(--ease)} .itx-dash__bar_a span{background:linear-gradient(180deg,#3a86ff,var(--blue));box-shadow:0 20px 50px -20px rgba(14,104,255,.8)} .itx-dash__bar em{margin-top:10px;font-style:normal;font-size:13px;color:#9aa1ab} .itx-motion [data-dash]:not(.is-in) .itx-dash__bar span{transform:scaleY(.02)} .itx-dash__kpis{list-style:none;margin:0;padding:0;display:flex;flex-direction:column} .itx-dash__kpis li{display:flex;flex-direction:column;gap:6px;flex:1;justify-content:center;padding:26px 32px;border-bottom:1px solid var(--edge)} .itx-dash__kpis li:last-child{border-bottom:0} .itx-dash__kpis b{font-size:42px;font-weight:500;letter-spacing:-.03em;line-height:1;color:#fff} .itx-dash__kpis span{font-size:14.5px;line-height:1.4;color:#aab1bb} .itx-kpi__track{display:flex!important;flex-direction:column;gap:5px;margin-top:8px} .itx-kpi__track i{display:block;height:5px;width:var(--w);min-width:4px;border-radius:3px;background:#3a414d;transition:width 1.1s var(--ease)} .itx-kpi__track i+i{background:var(--yel)} .itx-kpi__track.is-down i:first-child{background:#3a414d}.itx-kpi__track.is-down i+i{background:#33d17a} .itx-motion .itx-dash__kpis li:not(.is-in) .itx-kpi__track i{width:0} .itx-kpi__rank{display:flex!important;gap:5px;margin-top:8px} .itx-kpi__rank i{width:22px;height:5px;border-radius:3px;background:#3a414d}.itx-kpi__rank i:first-child{background:var(--yel)} .itx-case__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:64px;margin-top:72px;align-items:start} .itx-case__facts{margin:0} .itx-case__facts>div{display:grid;grid-template-columns:180px 1fr;gap:24px;padding:24px 0;border-top:1px solid var(--edge)} .itx-case__facts dt{font-size:14px;font-weight:500;color:var(--blue2)} .itx-case__facts dd{margin:0;font-size:16.5px;line-height:1.6;color:#d0d5dc} .itx-case__facts ol{margin:0;padding-left:18px}.itx-case__facts li{margin-bottom:8px} .itx-shot{margin:0 0 28px;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)} .itx-shot__bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#eef0f3} .itx-shot__bar i{width:8px;height:8px;border-radius:50%;background:#cfd3d9} .itx-shot__bar em{margin-left:10px;font-style:normal;font-size:11.5px;color:#7d838c} .itx-shot img{display:block;width:100%;height:auto} .itx-quote{margin:0 0 20px} .itx-quote p{margin:0 0 14px;font-size:21px;line-height:1.45;letter-spacing:-.01em;color:#fff} .itx-quote footer{display:flex;flex-direction:column;font-size:14px;color:#9aa1ab}.itx-quote b{font-weight:500;color:#fff} .itx-src{margin:0 0 22px;font-size:12.5px;line-height:1.5;color:#7f8792} /* ---------- 5b · Projekte als Tabs ---------- */ .itx-tabs__nav{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:48px} .itx-tabs__b{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;text-align:left;padding:18px 20px;border:0;border-radius:14px;background:#f4f5f7;font:inherit;cursor:pointer;position:relative;overflow:hidden;transition:background .25s,box-shadow .25s} .itx-tabs__b img{grid-row:span 2;height:30px;width:72px;object-fit:contain;object-position:left center} .itx-tabs__b span{font-size:16px;font-weight:500;color:var(--ink)} .itx-tabs__b em{font-style:normal;font-size:13px;color:var(--mute)} .itx-tabs__b::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--blue);transition:width .4s var(--ease)} .itx-tabs__b:hover{background:#eceef1} .itx-tabs__b.is-on{background:#fff;box-shadow:0 0 0 1px var(--line),0 20px 40px -24px rgba(11,15,23,.25)} .itx-tabs__b.is-on::after{width:100%} .itx-proj{display:none;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:64px;align-items:center} .itx-proj.is-on{display:grid;animation:itxIn .5s var(--ease)} @keyframes itxIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .itx-proj__shot{margin:0;box-shadow:0 40px 80px -40px rgba(11,15,23,.45),0 0 0 1px var(--line)} .itx-proj__b{display:flex;flex-direction:column;align-items:flex-start;gap:14px} .itx-proj__logo{display:flex;align-items:center;height:36px}.itx-proj__logo img{max-height:34px;max-width:180px;width:auto} .itx-proj__k{margin:4px 0 0;font-size:14px;font-weight:500;color:var(--blue)} .itx-proj__h{margin:0;font-size:32px;font-weight:500;letter-spacing:-.025em;line-height:1.2;color:var(--ink)} .itx-proj__t{margin:0;font-size:17px;line-height:1.65;color:var(--ink2)} .itx-proj__did{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px} .itx-proj__did li{font-size:13.5px;line-height:1;padding:9px 13px;border-radius:999px;background:#f1f3f6;color:var(--ink)} .itx-proj__fact{margin:4px 0 0;padding:12px 16px;border-radius:10px;background:rgba(255,216,77,.22);font-size:15px;line-height:1.5;color:var(--ink)} .itx-proj__q{margin:4px 0 0;padding:16px 18px;border-radius:12px;background:#f4f5f7} .itx-proj__q p{margin:0;font-size:17px;line-height:1.5;color:var(--ink)} .itx-proj__q footer{margin-top:6px;font-size:13.5px;color:var(--mute)} /* ---------- 6 · Ansatz: Pipeline ---------- */ .itx-pipe{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative;counter-reset:p} .itx-pipe::before{content:"";position:absolute;left:0;right:0;top:21px;height:1px;background:rgba(255,255,255,.12)} .itx-pipe::after{content:"";position:absolute;left:0;top:21px;height:1px;width:0;background:linear-gradient(90deg,var(--blue),var(--blue2));transition:width 1.6s var(--ease)} .itx-pipe.is-in::after{width:100%} .itx-pipe__i{position:relative;padding:0 24px 0 0} .itx-pipe__n{position:relative;z-index:1;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--night);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);font-size:15px;font-weight:500;color:#fff;margin-bottom:28px;transition:background .4s,box-shadow .4s} .itx-pipe.is-in .itx-pipe__n{background:var(--blue);box-shadow:0 0 0 6px rgba(14,104,255,.18);transition-delay:calc(var(--i)*.3s)} .itx-pipe__t{margin:0 0 12px;font-size:20px;font-weight:500;letter-spacing:-.015em;line-height:1.3;color:#fff} .itx-pipe__x{margin:0 0 18px;font-size:15px;line-height:1.6;color:#aab1bb} .itx-pipe__links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px} .itx-pipe__links a{display:inline-block;font-size:13px;padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.06);color:#d8dde4;text-decoration:none;box-shadow:inset 0 0 0 1px var(--edge);transition:background .2s,color .2s} .itx-pipe__links a:hover{background:var(--blue);color:#fff} /* ---------- 7/8 · Situationen + Schritte ---------- */ .itx-sits{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-radius:16px;overflow:hidden;box-shadow:0 0 0 1px var(--line)} .itx-sits li{position:relative;padding:32px 28px 36px;background:#fff;transition:background .3s} .itx-sits li:hover{background:#f7f9fc} .itx-sits__ico{color:var(--blue);margin-bottom:22px;transition:transform .35s var(--ease)} .itx-sits li:hover .itx-sits__ico{transform:translate(3px,-3px)} .itx-sits h3{margin:0 0 10px;font-size:20px;font-weight:500;letter-spacing:-.015em;line-height:1.3;color:var(--ink)} .itx-sits p{margin:0;font-size:15px;line-height:1.6;color:var(--ink2)} .itx-steps{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:72px;margin-top:140px;align-items:start} .itx-steps__head{position:sticky;top:120px} .itx-steps__l{list-style:none;margin:0;padding:0 0 0 56px;position:relative} .itx-steps__rail{position:absolute;left:17px;top:8px;bottom:8px;width:2px;background:var(--line)} .itx-steps__rail i{display:block;width:100%;height:0;background:var(--blue);transition:height 1.6s var(--ease)} .itx-steps__l.is-in .itx-steps__rail i{height:100%} .itx-steps__l li{position:relative;padding:0 0 44px} .itx-steps__l li:last-child{padding-bottom:0} .itx-steps__n{position:absolute;left:-56px;top:-2px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line);font-size:14px;font-weight:500;color:var(--ink);transition:box-shadow .4s,color .4s} .itx-steps__l.is-in .itx-steps__n{box-shadow:inset 0 0 0 1.5px var(--blue);color:var(--blue);transition-delay:calc(var(--i)*.35s)} .itx-steps__l h3{margin:0 0 8px;font-size:22px;font-weight:500;letter-spacing:-.015em;color:var(--ink)} .itx-steps__l p{margin:0;font-size:16px;line-height:1.6;color:var(--ink2)} /* ---------- Kundenstimmen / Kosten / FAQ / CTA ---------- */ .itx #kundenstimmen{padding:140px 0;background:#f4f5f7} .itx #kundenstimmen .cx-h2{font-size:44px;letter-spacing:-.03em} .itx #kundenstimmen .cx-vid__media{border-radius:16px;overflow:hidden} .itx-cost{background:var(--night);color:#fff} .itx-cost__w{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:start} .itx-cost .itx-h2{color:#fff;font-size:46px} .itx-cost .itx-lead{color:#aab1bb} .itx-cost__cta{margin:28px 0 0} .itx #faq{padding:140px 0} .itx #faq .cx-h2{font-size:44px;letter-spacing:-.03em} .itx .cx-faq__item button{transition:color .2s} .itx .cx-faq__item button:hover{color:var(--blue)} .itx .sx-form{border-radius:16px} .itx .sx-form__btn{background:var(--blue);border-radius:999px} /* ---------- Reveal ---------- */ .itx-motion [data-io]{opacity:0;transform:translate3d(0,18px,0);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i,0)*80ms)} .itx-motion [data-io].is-in{opacity:1;transform:none} .itx-motion .itx-viz__wire{stroke-dashoffset:100;animation:itxDraw 1.4s var(--ease) forwards;animation-delay:calc(.5s + var(--i)*.08s)} @keyframes itxDraw{to{stroke-dashoffset:0}} .itx-motion .itx-viz__halo{animation:itxBreath 6s ease-in-out infinite} @keyframes itxBreath{50%{transform:scale(1.12);opacity:.75}} .itx-motion .itx-core__pulse{animation:itxPulse 2.8s ease-out infinite} @keyframes itxPulse{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.35)}} .itx-motion .itx-node{opacity:0;animation:itxPop .6s var(--ease) forwards;animation-delay:calc(.8s + var(--i)*.07s)} @keyframes itxPop{from{opacity:0;transform:translate(-50%,-30%)}to{opacity:1;transform:translate(-50%,-50%)}} .itx-motion .itx-ui[data-stage="0"] .itx-ui__typed{animation:itxType 1.6s steps(30) .2s both,itxCaret .8s step-end infinite} @keyframes itxType{from{max-width:0}to{max-width:100%}} @keyframes itxCaret{50%{border-color:transparent}} .itx-viz__pkt{opacity:1} /* ---------- Responsive ---------- */ @media (max-width:1100px){ .itx-h1{font-size:54px}.itx-h2{font-size:42px}.itx-h2_xl{font-size:48px} .itx-hero__w,.itx-jr,.itx-jr__close,.itx-prob,.itx-cl__app,.itx-case__grid,.itx-steps,.itx-cost__w,.itx-proj{grid-template-columns:1fr;gap:48px} .itx-prob__head,.itx-steps__head{position:static} .itx-pipe{grid-template-columns:1fr;gap:36px}.itx-pipe::before,.itx-pipe::after{left:21px;right:auto;top:0;bottom:0;width:1px;height:auto}.itx-pipe::after{height:0;transition:height 1.6s var(--ease)}.itx-pipe.is-in::after{width:1px;height:100%} .itx-pipe__i{padding:0 0 0 70px}.itx-pipe__n{position:absolute;left:0;top:-4px} .itx-sits{grid-template-columns:1fr 1fr} .itx-dash{grid-template-columns:1fr}.itx-dash__main{border-right:0;border-bottom:1px solid var(--edge)} .itx-dash__kpis{flex-direction:row}.itx-dash__kpis li{border-bottom:0;border-right:1px solid var(--edge)}.itx-dash__kpis li:last-child{border-right:0} /* Journey mobil: Bühne oben fixiert */ .itx-jr__stick{order:-1;top:84px;z-index:2} .itx-ui__body{height:300px;padding:22px}.itx-ui__pane{inset:22px} .itx-jr__step{min-height:0;padding:24px 0}.itx-jr__s{font-size:21px} } @media (max-width:640px){ .itx-sec,.itx #kundenstimmen,.itx #faq{padding:88px 0} .itx-hero{padding-top:118px} .itx-h1{font-size:40px;letter-spacing:-.035em}.itx-promise{font-size:20px}.itx-intro{font-size:16px} .itx-h2,.itx-h2_xl,.itx-cost .itx-h2,.itx #kundenstimmen .cx-h2,.itx #faq .cx-h2{font-size:31px}.itx-h2_sm{font-size:27px} .itx-lead{font-size:17px}.itx-head{margin-bottom:40px} .itx-node{font-size:11px;padding:5px 9px;gap:6px}.itx-node_extra{display:none}.itx-node_out{font-size:11.5px;padding:7px 12px} .itx-core{padding:12px 16px}.itx-core b{font-size:15px}.itx-core__k{font-size:9px} .itx-ticker{display:none} .itx-refs{margin-top:64px} .itx-logos{grid-template-columns:1fr 1fr}.itx-logos a{height:68px}.itx-logos img{max-height:26px;max-width:120px} .itx-ui__body{height:250px;padding:16px}.itx-ui__pane{inset:16px;gap:10px}.itx-ui__search{font-size:13px;padding:11px 14px}.itx-ui__res{padding:12px 14px}.itx-ui__res b{font-size:14px}.itx-ui__msg{font-size:13.5px}.itx-ui__cluster span{font-size:12.5px;padding:8px 12px}.itx-ui__proof b{font-size:26px} .itx-jr__stick{top:72px} .itx-jr__key{font-size:23px}.itx-jr__close{margin-top:72px} .itx-prob__l li{grid-template-columns:44px 1fr;padding:28px 0}.itx-prob__n{font-size:34px}.itx-prob__l h3{font-size:20px} .itx-cl__dot em{display:none}.itx-cl__t{font-size:17px} .itx-dash__main{padding:26px 22px}.itx-dash__from{font-size:44px}.itx-dash__to{font-size:96px}.itx-dash__bars{height:150px} .itx-dash__kpis{flex-direction:column}.itx-dash__kpis li{border-right:0;border-bottom:1px solid var(--edge);padding:20px 22px}.itx-dash__kpis b{font-size:34px} .itx-case__facts>div{grid-template-columns:1fr;gap:8px} .itx-tabs__nav{grid-template-columns:1fr;gap:8px} .itx-proj__h{font-size:25px} .itx-sits{grid-template-columns:1fr} .itx-steps{margin-top:96px} } @media (prefers-reduced-motion:reduce){ .itx *,.itx *::before,.itx *::after{animation:none!important;transition:none!important} .itx-viz__pkt{display:none} .itx-viz__stage{transform:none!important} } /* Feinschliff nach Review */ .itx-jr__step{min-height:16vh} .itx-node{left:clamp(64px,var(--x),calc(100% - 64px))} @media (max-width:640px){.itx-node{left:clamp(58px,var(--x),calc(100% - 58px));max-width:44%;overflow:hidden;text-overflow:ellipsis}.itx-node_out{max-width:none}} @media (max-width:640px){.itx-jr__stick{top:78px}.itx-ui__body{height:220px}} /* plattform.css */ /* Branchenseite Plattformen, Portale & Apps · Präfix fx- */ .fx-hero{padding:150px 0 84px;background:#fff} .fx-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center} .fx-h1{font-size:58px;letter-spacing:-.03em} .fx-hero .sx-hero__intro{max-width:580px} .fx-trust{margin:26px 0 0;padding-top:18px;border-top:1px solid #e3e6ea;font-size:14px;color:#5f6670;max-width:520px} /* Hero-Ökosystem */ .fx-eco{margin:0} .fx-eco__stage{position:relative;aspect-ratio:600/460;border-radius:24px;background:#0b0f17;overflow:hidden; background-image:radial-gradient(circle at 50% 50%,rgba(14,104,255,.22),transparent 55%),linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:auto,32px 32px,32px 32px} .fx-eco__lines{position:absolute;inset:0;width:100%;height:100%} .fx-eco__lines path{fill:none;stroke-width:1.4;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke} .fx-eco__l{stroke:#5f6b7d}.fx-eco__r{stroke:#5f6b7d}.fx-eco__in{stroke:#3a4250;stroke-dasharray:.02 .03!important;stroke-dashoffset:0!important} .cx-anim .fx-eco__l,.cx-anim .fx-eco__r{animation:fxDraw 1s ease forwards;animation-delay:calc(.6s + var(--i)*.12s)} html:not(.cx-anim) .fx-eco__lines path{stroke-dashoffset:0} @keyframes fxDraw{to{stroke-dashoffset:0}} .fx-eco__side{position:absolute;top:13%;bottom:13%;width:24%;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start} .fx-eco__side_l{left:3.5%}.fx-eco__side_r{right:3.5%;align-items:flex-end} .fx-eco__st{position:absolute;top:-30px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#8d96a3} .fx-eco__side_r .fx-eco__st{right:0} .fx-eco__chip{display:inline-block;padding:7px 12px;border-radius:999px;font-size:12.5px;line-height:1.2;color:#e9edf2;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);white-space:nowrap;transition:background-color .4s,border-color .4s,color .4s} .fx-eco__side_r .fx-eco__chip{background:rgba(14,104,255,.14);border-color:rgba(110,162,255,.35)} .fx-eco__chip.is-hot{background:#fff;color:#0b0f17;border-color:#fff} .fx-eco__core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:27%;aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center; background:#fff;color:#0b0f17;box-shadow:0 0 0 10px rgba(14,104,255,.14),0 0 0 22px rgba(14,104,255,.06)} .fx-eco__core i{position:absolute;inset:-22px;border-radius:50%;border:1px solid rgba(110,162,255,.45);animation:fxPulse 3.2s ease-out infinite} .fx-eco__core b{font-size:15px;font-weight:600;line-height:1.2} .fx-eco__core em{font-style:normal;font-size:10.5px;color:#5f6670;margin-top:3px} @keyframes fxPulse{0%{transform:scale(.85);opacity:.9}100%{transform:scale(1.25);opacity:0}} .fx-eco__top,.fx-eco__bot{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:6px;flex-wrap:nowrap} .fx-eco__top{top:4%}.fx-eco__bot{bottom:4%} .fx-eco__top span{font-size:11px;color:#c3cad4;padding:5px 9px;border-radius:6px;border:1px dashed rgba(255,255,255,.2);white-space:nowrap} .fx-eco__bot span{font-size:11px;color:#0b0f17;background:#e9f1ff;padding:5px 9px;border-radius:6px;white-space:nowrap;font-weight:500} .cx-anim .fx-eco__bot span{opacity:0;transform:translateY(6px);animation:fxUp .6s ease forwards;animation-delay:calc(1.6s + var(--i)*.18s)} @keyframes fxUp{to{opacity:1;transform:none}} .fx-eco__lines path.is-hot{stroke:#6ea2ff;stroke-width:2.2} /* Referenzkarten */ .fx-refs{padding:60px 0 64px;border-top:1px solid #eef0f2;border-bottom:1px solid #eef0f2} .fx-refcards{list-style:none;margin:0 0 16px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .fx-refcards a{display:flex;flex-direction:column;gap:10px;height:100%;padding:24px 22px 18px;border-radius:18px;border:1px solid #e3e6ea;background:#fff;color:#0b0f17;text-decoration:none;transition:border-color .25s,box-shadow .25s,transform .25s} .fx-refcards a:hover,.fx-refcards a:focus-visible{border-color:#0b0f17;box-shadow:0 18px 40px -28px rgba(11,15,23,.45);transform:translateY(-2px)} .fx-refcards a:focus-visible{outline:2px solid #1f6bff;outline-offset:2px} .fx-refcards__logo{display:flex;flex-direction:column;justify-content:center;gap:8px;min-height:76px;padding-bottom:14px;border-bottom:1px solid #eef0f2;margin-bottom:4px} .fx-refcards__logo>img{max-height:34px;max-width:190px;width:auto;object-fit:contain;object-position:left} .fx-refcards__sub{display:flex;gap:10px;align-items:center} .fx-refcards__sub img{max-height:17px;max-width:110px;opacity:.85} .fx-refcards__skill{font-size:15px;font-weight:500} .fx-refcards__model{font-size:13.5px;line-height:1.45;color:#5f6670} .fx-refcards__go{margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:#1f6bff} .cx-anim .fx-refcards li{opacity:0;transform:translate3d(0,12px,0);transition:opacity .5s ease,transform .6s ease;transition-delay:calc(var(--i)*.09s)} .cx-anim .fx-refcards.is-in li{opacity:1;transform:none} /* Dilemma */ .fx-dil{margin-top:40px} .fx-dil__steps{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px} .fx-dil__btn{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;border:1px solid #2c3340;background:transparent;color:#a9afb8;font:inherit;font-size:13.5px;cursor:pointer;transition:background-color .25s,color .25s,border-color .25s} .fx-dil__btn span{font-variant-numeric:tabular-nums;color:#6b727c} .fx-dil__btn[aria-pressed="true"]{background:#fff;color:#0b0f17;border-color:#fff} .fx-dil__btn[aria-pressed="true"] span{color:#1f6bff} .fx-dil__btn:focus-visible{outline:2px solid #6ea2ff;outline-offset:2px} .fx-dil__board{display:grid;grid-template-columns:1fr 200px 1fr;gap:28px;align-items:center;padding:34px;border-radius:24px;border:1px solid #1d2430;background:linear-gradient(180deg,#10151f,#0b0f17)} .fx-dil__t{margin:0 0 16px;font-size:20px;font-weight:500;color:#fff!important} .fx-dil__t em{display:block;font-style:normal;font-size:13px;color:#8d96a3;margin-top:2px;font-weight:400} .fx-dil__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:20px} .fx-dil__grid i{aspect-ratio:1;border-radius:8px;border:1px dashed #2f3746;background:transparent;transition:background-color .5s ease,border-color .5s ease,transform .5s ease;transition-delay:calc(var(--i)*.05s)} .fx-dil__side_r .fx-dil__grid i{border-radius:50%} .fx-dil[data-step="0"] .fx-dil__grid i.is-seed,.fx-dil[data-step="1"] .fx-dil__grid i.is-seed,.fx-dil[data-step="1"] .fx-dil__grid i.is-mid,.fx-dil[data-step="2"] .fx-dil__grid i{border-style:solid;border-color:transparent} .fx-dil[data-step="0"] .fx-dil__side_l i.is-seed,.fx-dil[data-step="1"] .fx-dil__side_l i.is-seed,.fx-dil[data-step="1"] .fx-dil__side_l i.is-mid,.fx-dil[data-step="2"] .fx-dil__side_l i{background:#e9edf2} .fx-dil[data-step="0"] .fx-dil__side_r i.is-seed,.fx-dil[data-step="1"] .fx-dil__side_r i.is-seed,.fx-dil[data-step="1"] .fx-dil__side_r i.is-mid,.fx-dil[data-step="2"] .fx-dil__side_r i{background:#0E68FF} .fx-dil__levers{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px} .fx-dil__levers li{font-size:12.5px;padding:6px 10px;border-radius:6px;background:#161c27;color:#c3cad4;opacity:.25;transition:opacity .4s ease,background-color .4s;transition-delay:calc(var(--i)*.07s)} .fx-dil__levers .fx-dil__lt{flex-basis:100%;background:none;padding:0 0 4px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#6ea2ff;opacity:1} .fx-dil[data-step="1"] .fx-dil__levers li,.fx-dil[data-step="2"] .fx-dil__levers li{opacity:1} .fx-dil__core{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:1;color:#fff} .fx-dil__ring{position:absolute;inset:0} .fx-dil__ring svg{width:100%;height:100%;transform:rotate(-90deg)} .fx-dil__track{fill:none;stroke:#222a37;stroke-width:6} .fx-dil__prog{fill:none;stroke:#0E68FF;stroke-width:6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:.88;transition:stroke-dashoffset 1s ease} .fx-dil[data-step="1"] .fx-dil__prog{stroke-dashoffset:.5} .fx-dil[data-step="2"] .fx-dil__prog{stroke-dashoffset:.06} .fx-dil__core b{position:relative;font-size:17px;font-weight:600} .fx-dil__arrows{position:relative;display:flex;gap:6px;margin-top:8px} .fx-dil__arrows i{width:26px;height:2px;background:#3a4250;position:relative} .fx-dil__arrows i::after{content:"";position:absolute;top:-3px;width:0;height:0;border:4px solid transparent} .fx-dil__arrows i:first-child::after{left:-4px;border-right-color:#3a4250;border-left:0} .fx-dil__arrows i:last-child::after{right:-4px;border-left-color:#3a4250;border-right:0} .fx-dil[data-step="2"] .fx-dil__arrows i,.fx-dil[data-step="2"] .fx-dil__arrows i{background:#6ea2ff} .fx-dil[data-step="2"] .fx-dil__arrows i:first-child::after{border-right-color:#6ea2ff} .fx-dil[data-step="2"] .fx-dil__arrows i:last-child::after{border-left-color:#6ea2ff} .fx-dil__live{margin:18px 0 0;font-size:14px;color:#c3cad4!important} /* Geschäftsmodelle */ .fx-models{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:14px} .fx-models li{display:flex;flex-direction:column;gap:10px;padding:24px 20px;border-radius:18px;border:1px solid #e3e6ea;background:#fff;transition:border-color .25s,transform .25s} .fx-models li:hover{border-color:#0b0f17;transform:translateY(-2px)} .fx-models__ico{width:44px;height:44px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:#f1f4f8;color:#0b0f17;margin-bottom:6px} .fx-models li:hover .fx-models__ico{background:#0E68FF;color:#fff} .fx-models h3{margin:0;font-size:17px;font-weight:500;line-height:1.3} .fx-models p{margin:0;font-size:14px;line-height:1.55;color:#5f6670} .fx-models__f{margin-top:auto;padding-top:14px;border-top:1px solid #eef0f2;font-size:13px;font-weight:500} .fx-models__f em{display:block;font-style:normal;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#7d838c;font-weight:400;margin-bottom:2px} .cx-anim .fx-models li{opacity:0;transform:translate3d(0,14px,0);transition:opacity .5s ease,transform .6s ease,border-color .25s;transition-delay:calc(var(--i)*.08s)} .cx-anim .fx-models.is-in li{opacity:1;transform:none} /* Markt */ .fx-mkt{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:start} .fx-mkt__q{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid #0b0f17} .fx-mkt__q li{padding:24px 24px 26px 0;border-bottom:1px solid #d3d7dc} .fx-mkt__q li:nth-child(odd){border-right:1px solid #d3d7dc} .fx-mkt__q li:nth-child(even){padding-left:24px} .fx-mkt__q span{font-size:12px;color:#1f6bff;font-variant-numeric:tabular-nums} .fx-mkt__q h3{margin:8px 0 6px;font-size:18px;font-weight:500} .fx-mkt__q p{margin:0;font-size:14.5px;color:#5f6670;line-height:1.55} .fx-mkt__rev{padding:28px;border-radius:20px;background:#fff;border:1px solid #e3e6ea} .fx-mkt__rt{margin:0 0 14px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#7d838c} .fx-mkt__rev ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px} .fx-mkt__rev li{padding:8px 12px;border-radius:999px;border:1px solid #d9dde3;font-size:13.5px;transition:background-color .2s,color .2s} .fx-mkt__rev li:hover{background:#0b0f17;color:#fff;border-color:#0b0f17} .fx-mkt__rn{margin:16px 0 0;font-size:13.5px;color:#5f6670;line-height:1.5} /* Methode */ .fx-method{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-template-columns:repeat(5,1fr);position:relative;border-top:1px solid #0b0f17} .fx-method li{position:relative;padding:28px 22px 6px 0} .fx-method li+li{padding-left:22px;border-left:1px solid #e3e6ea} .fx-method__n{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;border-radius:50%;background:#0b0f17;color:#fff;font-size:12.5px;margin-bottom:14px} .fx-method .cx-h3{font-size:17px;margin:0 0 8px} .fx-method p{margin:0;font-size:14px;color:#5f6670;line-height:1.55} .cx-anim .fx-method li{opacity:0;transform:translate3d(0,12px,0);transition:opacity .5s ease,transform .6s ease;transition-delay:calc(var(--i)*.1s)} .cx-anim .fx-method.is-in li{opacity:1;transform:none} /* Case-Visuals */ .fx-viz{padding:20px;border-radius:16px} .fx-tree{display:flex;flex-direction:column;align-items:stretch;gap:10px} .fx-tree__root{padding:14px;border-radius:12px;background:#0E68FF;color:#fff;text-align:center} .fx-tree__root b{display:block;font-size:15px}.fx-tree__root span{font-size:11.5px;opacity:.85} .fx-tree__base{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:4px} .fx-tree__base li{font-size:11px;text-align:center;padding:6px 2px;border-radius:6px;background:rgba(255,255,255,.08);color:#c3cad4} .fx-tree__branches{display:grid;grid-template-columns:repeat(3,1fr);height:16px} .fx-tree__branches i{border-left:1px solid #3a4250;margin-left:50%} .fx-tree__verts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px} .fx-tree__verts li{padding:10px 8px;border-radius:10px;border:1px solid #2f3746;text-align:center} .fx-tree__verts b{display:block;font-size:12px;color:#fff;font-weight:500} .fx-tree__verts span{display:block;font-size:10.5px;color:#8d96a3;margin-top:3px;line-height:1.35} .fx-tree__verts .is-next{border-style:dashed} .fx-two{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center} .fx-two__s{display:flex;flex-direction:column;gap:5px} .fx-two__s p{margin:0 0 2px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#6ea2ff!important} .fx-two__s span{font-size:12px;padding:6px 8px;border-radius:6px;background:rgba(255,255,255,.07);color:#e9edf2} .fx-two__s em{font-style:normal;font-size:11px;color:#8d96a3;line-height:1.35;margin-top:2px} .fx-two__core{writing-mode:vertical-rl;transform:rotate(180deg);padding:14px 8px;border-radius:10px;background:#0E68FF;color:#fff;font-size:12.5px;font-weight:600} .fx-intl{display:grid;grid-template-columns:1fr 1fr;gap:8px} .fx-intl__lang{display:flex;flex-direction:column;gap:5px;padding:12px;border-radius:12px;border:1px solid #2f3746} .fx-intl__lang b{font-size:13px;color:#fff;letter-spacing:.06em} .fx-intl__lang span{font-size:11.5px;color:#c3cad4;padding:5px 7px;border-radius:5px;background:rgba(255,255,255,.06)} .fx-intl__app{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;border-radius:10px;background:#0E68FF;color:#fff;font-size:13px;font-weight:600} .fx-mods{display:grid;grid-template-columns:1fr 1fr;gap:6px} .fx-mods span{font-size:12px;padding:10px 8px;border-radius:8px;border:1px solid #2f3746;color:#e9edf2;text-align:center} .fx-mods b{grid-column:1/-1;padding:10px;border-radius:8px;background:#0E68FF;color:#fff;font-size:12.5px;text-align:center} .fx-case__plats{display:flex;gap:16px;margin:16px 0 0;font-size:14px} .fx-case__plats a{color:#0b0f17;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#c9cdd3} .fx-case__plats a:hover{text-decoration-color:#0b0f17} /* Checkliste */ .fx-check{list-style:none;margin:0 0 26px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 26px;border-top:1px solid #0b0f17} .fx-check li{position:relative;padding:14px 0 14px 28px;border-bottom:1px solid #e3e6ea;font-size:15px} .fx-check li::before{content:"";position:absolute;left:2px;top:19px;width:12px;height:7px;border-left:1.6px solid #0E68FF;border-bottom:1.6px solid #0E68FF;transform:rotate(-45deg)} .fx-check_sm li{font-size:14px;padding:11px 0 11px 26px}.fx-check_sm li::before{top:16px} .cx-anim .fx-check li{opacity:0;transition:opacity .4s ease;transition-delay:calc(var(--i)*.05s)} .cx-anim .fx-check.is-in li,.cx-anim .is-in .fx-check li{opacity:1} /* Architektur */ .fx-arch{margin-top:36px} .fx-arch__tabs{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:#161c27;margin-bottom:26px} .fx-arch__tab{padding:10px 18px;border-radius:999px;border:0;background:transparent;color:#a9afb8;font:inherit;font-size:14px;cursor:pointer;transition:background-color .2s,color .2s} .fx-arch__tab[aria-selected="true"]{background:#fff;color:#0b0f17} .fx-arch__tab:focus-visible{outline:2px solid #6ea2ff;outline-offset:2px} .fx-arch__path{list-style:none;margin:0 0 26px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0} .fx-arch__path li{position:relative;padding:18px 26px 18px 18px;border:1px solid #2a3240;background:#10151f} .fx-arch__path li+li{border-left:0} .fx-arch__path li:first-child{border-radius:14px 0 0 14px}.fx-arch__path li:last-child{border-radius:0 14px 14px 0;background:#0E68FF;border-color:#0E68FF} .fx-arch__path li:not(:last-child)::after{content:"";position:absolute;right:-9px;top:50%;width:16px;height:16px;border-top:1px solid #2a3240;border-right:1px solid #2a3240;background:#10151f;transform:translateY(-50%) rotate(45deg);z-index:1} .fx-arch__lv{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#8d96a3;margin-bottom:4px} .fx-arch__path li:last-child .fx-arch__lv{color:#d6e5ff} .fx-arch__path b{font-size:16px;font-weight:500;color:#fff} .fx-arch__split{display:grid;grid-template-columns:1fr 1fr;gap:16px} .fx-arch__col{padding:22px;border-radius:16px;border:1px solid #2a3240} .fx-arch__col_good{border-color:rgba(110,162,255,.45);background:rgba(14,104,255,.08)} .fx-arch__col_bad{border-style:dashed} .fx-arch__ct{margin:0 0 12px;font-size:12px;letter-spacing:.08em;text-transform:uppercase} .fx-arch__col_good .fx-arch__ct{color:#6ea2ff!important}.fx-arch__col_bad .fx-arch__ct{color:#8d96a3!important} .fx-arch__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px} .fx-arch__col li{display:flex;justify-content:space-between;gap:14px;padding:12px 14px;border-radius:10px;background:#10151f} .fx-arch__col b{font-size:14px;color:#fff;font-weight:500} .fx-arch__col span{font-size:12.5px;color:#a9afb8;text-align:right} .fx-arch__col_bad b{color:#8d96a3;text-decoration:line-through;text-decoration-color:#4a5262} .cx-anim .fx-arch__path li,.cx-anim .fx-arch__col li{opacity:0;transform:translate3d(0,8px,0);transition:opacity .45s ease,transform .5s ease;transition-delay:calc(var(--i)*.12s)} .cx-anim .fx-arch__col li{transition-delay:calc(.5s + var(--i)*.12s)} .cx-anim .fx-arch__panel.is-in li{opacity:1;transform:none} /* Vermarktung */ .fx-strands{display:grid;grid-template-columns:1fr 120px 1fr;gap:20px;align-items:center} .fx-strands__c{padding:26px;border-radius:20px;border:1px solid #e3e6ea;background:#fff} .fx-strands__t{margin:0 0 14px;font-size:18px;font-weight:500} .fx-strands__c ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px} .fx-strands__c li{padding:10px 14px;border-radius:10px;background:#f5f6f7;font-size:14.5px} .fx-strands__c li a{color:#0b0f17;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#9aa1ab} .fx-strands__mid{position:relative;height:100%;display:flex;align-items:center;justify-content:center} .fx-strands__mid::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:linear-gradient(90deg,#0E68FF,#0b0f17)} .fx-strands__mid span{position:relative;padding:12px 14px;border-radius:12px;background:#0b0f17;color:#fff;font-size:13px;font-weight:600} .cx-anim .fx-strands__c li{opacity:0;transform:translate3d(-8px,0,0);transition:opacity .45s ease,transform .5s ease;transition-delay:calc(var(--i)*.07s)} .cx-anim .fx-strands__c+.fx-strands__mid+.fx-strands__c li{transform:translate3d(8px,0,0)} .cx-anim .fx-strands.is-in li{opacity:1;transform:none} /* App-Flow */ .fx-flow{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:repeat(8,1fr);gap:6px;counter-reset:f} .fx-flow li{position:relative;padding:16px 12px;border-radius:12px;background:#fff;border:1px solid #e3e6ea;font-size:13.5px;line-height:1.35} .fx-flow li span{display:block;font-size:11px;color:#7d838c;margin-bottom:6px;font-variant-numeric:tabular-nums} .fx-flow li.is-focus{background:#0b0f17;color:#fff;border-color:#0b0f17} .fx-flow li.is-focus span{color:#6ea2ff} .fx-flow__legend{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:13px;color:#5f6670} .fx-flow__legend i{width:12px;height:12px;border-radius:3px;background:#0b0f17} .cx-anim .fx-flow li{opacity:0;transform:translate3d(0,10px,0);transition:opacity .4s ease,transform .5s ease;transition-delay:calc(var(--i)*.07s)} .cx-anim .fx-flow.is-in li{opacity:1;transform:none} /* Magazine */ .fx-mag{display:grid;grid-template-columns:1fr 1fr;gap:40px} .fx-mag__t{margin:0 0 14px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#7d838c} .fx-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px} .fx-chips li{padding:9px 14px;border-radius:999px;border:1px solid #d9dde3;font-size:14px;background:#fff} .fx-chips li a{color:#0b0f17;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#9aa1ab} .cx-anim .fx-chips li{opacity:0;transition:opacity .4s ease;transition-delay:calc(var(--i)*.05s)} .cx-anim .is-in .fx-chips li,.cx-anim .fx-chips.is-in li{opacity:1} .fx-mag__exp{margin:30px 0 0;padding-top:20px;border-top:1px solid #e3e6ea;font-size:15px;color:#3d434c;display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center} /* SEO/GEO */ .fx-geo{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:18px} .fx-geo__c{padding:26px;border-radius:20px;background:#fff;border:1px solid #e3e6ea} .fx-geo__t{margin:0 0 14px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#7d838c} .fx-geo__c>ul:not(.fx-chips){list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px} .fx-geo__c>ul:not(.fx-chips) li{display:flex;gap:10px;align-items:center;padding:10px 14px;border-radius:999px;background:#f5f6f7;font-size:14.5px} .fx-geo__c>ul:not(.fx-chips) li span{color:#0E68FF} .cx-anim .fx-geo__c>ul:not(.fx-chips) li{opacity:0;transform:translate3d(0,6px,0);transition:opacity .4s,transform .5s;transition-delay:calc(var(--i)*.08s)} .cx-anim .fx-geo.is-in .fx-geo__c>ul li{opacity:1;transform:none} /* Monetarisierung */ .fx-mon{list-style:none;margin:38px 0 30px;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:10px;position:relative} .fx-mon>li:not(.fx-mon__loop){position:relative;padding:22px 18px;border-radius:16px;background:#10151f;border:1px solid #232b38} .fx-mon__bar{display:block;height:4px;border-radius:2px;background:#232b38;margin-bottom:16px;overflow:hidden;position:relative} .fx-mon__bar::after{content:"";position:absolute;inset:0;background:#0E68FF;transform:scaleX(0);transform-origin:left;transition:transform .7s ease;transition-delay:calc(var(--i)*.35s)} .fx-mon.is-in .fx-mon__bar::after,html:not(.cx-anim) .fx-mon__bar::after{transform:none} .fx-mon__n{font-size:11.5px;color:#6b727c;font-variant-numeric:tabular-nums} .fx-mon h3{margin:6px 0 6px;font-size:16px;color:#fff;font-weight:500} .fx-mon p{margin:0;font-size:13.5px;line-height:1.5} .fx-mon__loop{grid-column:1/-1;height:34px;margin-top:-2px;position:relative} .fx-mon__loop svg{position:absolute;left:10%;right:10%;width:80%;height:100%} .fx-mon__loop path{fill:none;stroke:#3a4250;stroke-width:1.4;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke;transition:stroke-dashoffset 1.2s ease 1.9s} .fx-mon.is-in .fx-mon__loop path,html:not(.cx-anim) .fx-mon__loop path{stroke-dashoffset:0;stroke:#6ea2ff} .fx-monq{padding:24px 26px;border-radius:18px;border:1px solid #232b38;margin-bottom:16px} .fx-monq__t{margin:0 0 12px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#6ea2ff!important} .fx-monq ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px 26px} .fx-monq li{font-size:14.5px;color:#d6dbe2;padding-left:18px;position:relative} .fx-monq li::before{content:"?";position:absolute;left:0;color:#6ea2ff;font-weight:600} /* KPIs */ .fx-kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid #0b0f17;margin-bottom:18px} .fx-kpi>div{padding:24px 22px 18px 0} .fx-kpi>div+div{padding-left:22px;border-left:1px solid #e3e6ea} .fx-kpi__t{margin:0 0 14px;font-size:18px;font-weight:500;display:flex;gap:10px;align-items:baseline} .fx-kpi__t span{font-size:12px;color:#1f6bff;font-variant-numeric:tabular-nums} .fx-kpi ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px} .fx-kpi li{font-size:14.5px;color:#3d434c;padding-bottom:8px;border-bottom:1px dashed #e3e6ea} .cx-anim .fx-kpi>div{opacity:0;transform:translate3d(0,12px,0);transition:opacity .5s,transform .6s;transition-delay:calc(var(--i)*.1s)} .cx-anim .fx-kpi.is-in>div{opacity:1;transform:none} .fx-intl__ref{margin:18px 0 0;font-size:15px;color:#3d434c} .fx-links{margin:26px 0 0;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14.5px;color:#5f6670} .fx-links a{color:#0b0f17;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#c9cdd3} .fx-links a:hover{text-decoration-color:#0b0f17} /* Responsive */ @media (max-width:1180px){ .fx-models{grid-template-columns:repeat(3,1fr)} .fx-method{grid-template-columns:repeat(3,1fr)} .fx-method li:nth-child(4){border-left:0;padding-left:0} .fx-flow{grid-template-columns:repeat(4,1fr)} .fx-refcards{grid-template-columns:repeat(2,1fr)} } @media (max-width:1024px){ .fx-hero{padding:120px 0 60px} .fx-hero__grid{grid-template-columns:1fr;gap:40px} .fx-h1{font-size:42px} .fx-dil__board{grid-template-columns:1fr;padding:22px;gap:22px} .fx-dil__core{width:150px;margin:0 auto;order:-1} .fx-mkt{grid-template-columns:1fr} .fx-mon{grid-template-columns:1fr 1fr} .fx-mon__loop{display:none} .fx-kpi{grid-template-columns:1fr 1fr} .fx-kpi>div:nth-child(3){border-left:0;padding-left:0} .fx-kpi>div:nth-child(n+3){border-top:1px solid #e3e6ea} .fx-strands{grid-template-columns:1fr;gap:12px} .fx-strands__mid{height:48px} .fx-strands__mid::before{left:50%;right:auto;top:0;bottom:0;width:2px;height:auto;background:linear-gradient(180deg,#0E68FF,#0b0f17)} } @media (max-width:760px){ .fx-h1{font-size:34px} .fx-eco__stage{aspect-ratio:auto;height:420px} .fx-eco__side{width:36%;top:15%;bottom:15%} .fx-eco__chip{font-size:11px;padding:6px 9px} .fx-eco__core{width:30%;min-width:96px} .fx-eco__core b{font-size:12.5px}.fx-eco__core em{display:none} .fx-eco__top span:nth-child(n+3),.fx-eco__bot span:nth-child(n+3){display:none} .fx-refcards{grid-template-columns:1fr} .fx-models{grid-template-columns:1fr} .fx-method{grid-template-columns:1fr} .fx-method li,.fx-method li+li{padding:22px 0 18px;border-left:0;border-bottom:1px solid #e3e6ea} .fx-mkt__q{grid-template-columns:1fr} .fx-mkt__q li,.fx-mkt__q li:nth-child(even){padding:20px 0;border-right:0} .fx-check{grid-template-columns:1fr} .fx-arch__tabs{display:flex} .fx-arch__tab{flex:1;padding:10px 8px;font-size:13px} .fx-arch__path{grid-template-columns:1fr} .fx-arch__path li,.fx-arch__path li+li{border-left:1px solid #2a3240;border-top:0;border-radius:0} .fx-arch__path li:first-child{border-top:1px solid #2a3240;border-radius:14px 14px 0 0} .fx-arch__path li:last-child{border-radius:0 0 14px 14px} .fx-arch__path li:not(:last-child)::after{right:auto;left:22px;top:auto;bottom:-9px;transform:rotate(135deg)} .fx-arch__split,.fx-mag,.fx-geo{grid-template-columns:1fr} .fx-arch__col li{flex-direction:column;gap:3px}.fx-arch__col span{text-align:left} .fx-flow{grid-template-columns:1fr 1fr} .fx-mon{grid-template-columns:1fr} .fx-monq ul{grid-template-columns:1fr} .fx-kpi{grid-template-columns:1fr} .fx-kpi>div,.fx-kpi>div+div{padding:20px 0;border-left:0;border-top:1px solid #e3e6ea} .fx-dil__grid{grid-template-columns:repeat(6,1fr);gap:6px} .fx-dil__steps{flex-direction:column} .fx-dil__btn{text-align:left;border-radius:14px} } @media (prefers-reduced-motion:reduce){ .cx-plt [class*="fx-"],.cx-plt [class*="fx-"]::before,.cx-plt [class*="fx-"]::after,.cx-plt .fx-eco__lines path{animation:none!important;transition:none!important} .cx-plt .fx-eco__lines path{stroke-dashoffset:0} .cx-plt .fx-eco__bot span,.cx-plt .fx-refcards li,.cx-plt .fx-models li,.cx-plt .fx-method li,.cx-plt .fx-check li,.cx-plt .fx-arch__path li,.cx-plt .fx-arch__col li,.cx-plt .fx-strands__c li,.cx-plt .fx-flow li,.cx-plt .fx-chips li,.cx-plt .fx-geo li,.cx-plt .fx-kpi>div{opacity:1!important;transform:none!important} .cx-plt .fx-eco__core i{display:none} .cx-plt .fx-mon__bar::after{transform:none}.cx-plt .fx-mon__loop path{stroke-dashoffset:0} } /* Visuals auf heller Case-Spalte (2. Case) */ .bx-case:nth-of-type(2) .fx-two__s span{background:#eef1f5;color:#0b0f17} .bx-case:nth-of-type(2) .fx-two__s p{color:#1f6bff!important} .bx-case:nth-of-type(2) .fx-two__s em{color:#5f6670} .bx-case:nth-of-type(2) .fx-tree__base li,.bx-case:nth-of-type(2) .fx-intl__lang span{background:#eef1f5;color:#3d434c} .bx-case:nth-of-type(2) .fx-tree__verts li,.bx-case:nth-of-type(2) .fx-intl__lang,.bx-case:nth-of-type(2) .fx-mods span{border-color:#dde1e6} .bx-case:nth-of-type(2) .fx-tree__verts b,.bx-case:nth-of-type(2) .fx-intl__lang b,.bx-case:nth-of-type(2) .fx-mods span{color:#0b0f17} .fx-mon__lt{position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);padding:0 12px;background:#0b0f17;font-size:12px;color:#8d96a3;white-space:nowrap} /* ecommerce.css */ /* Branchenseite E-Commerce & digitale Marken · Präfix ec- (nutzt fx-/bx-/ix-Bausteine) */ .ec-claim{margin:18px 0 0;font-size:22px;line-height:1.35;letter-spacing:-.01em;color:#0b0f17;font-weight:500;max-width:560px} /* Hero: Wachstumsfluss */ .ec-flow{margin:0} .ec-flow__stage{position:relative;border-radius:24px;background:#0b0f17;padding:34px 66px 34px 30px;overflow:hidden; background-image:radial-gradient(circle at 85% 12%,rgba(14,104,255,.28),transparent 46%),linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:auto,32px 32px,32px 32px} .ec-flow__steps{list-style:none;margin:0;padding:0;display:grid;gap:10px;position:relative} .ec-flow__steps li{position:relative;display:grid;grid-template-columns:36px 1fr;column-gap:12px;padding:15px 18px;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.035);color:#fff;transition:background .45s,border-color .45s,transform .45s} .ec-flow__steps li:nth-child(1){margin-right:0}.ec-flow__steps li:nth-child(2){margin-right:6%}.ec-flow__steps li:nth-child(3){margin-right:12%}.ec-flow__steps li:nth-child(4){margin-right:18%}.ec-flow__steps li:nth-child(5){margin-right:24%} .ec-flow__n{grid-row:1/3;font-size:12px;color:#8d96a3;font-variant-numeric:tabular-nums;padding-top:3px} .ec-flow__steps b{font-weight:500;font-size:16px} .ec-flow__steps em{font-style:normal;font-size:13px;color:#9aa3af} .ec-flow__bar{position:absolute;left:0;bottom:0;height:2px;width:0;background:#0E68FF;border-radius:2px;transition:width 1.2s ease} .ec-flow__steps li.is-hot{background:rgba(14,104,255,.14);border-color:rgba(14,104,255,.6);transform:translateX(4px)} .ec-flow__steps li.is-hot .ec-flow__bar{width:100%} .ec-flow__steps li:last-child{background:#fff;color:#0b0f17}.ec-flow__steps li:last-child em{color:#5f6670} .ec-flow__steps li:last-child.is-hot{background:#fff;border-color:#0E68FF} .ec-flow__loop{position:absolute;right:16px;top:44px;bottom:44px;width:40px} .ec-flow__loop svg{width:100%;height:100%;overflow:visible} .ec-flow__loop path{fill:none;stroke:#3a4250;stroke-width:1.5;stroke-dasharray:4 5;vector-effect:non-scaling-stroke} .ec-flow.is-loop .ec-flow__loop path{stroke:#4f8dff} .ec-flow__loop span{position:absolute;right:-4px;top:50%;transform:translateY(-50%) rotate(90deg);transform-origin:center;white-space:nowrap;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#8d96a3;width:0;display:flex;justify-content:center} .ec-flow__dot{display:none} .cx-anim .ec-flow__steps li{opacity:0;transform:translate3d(0,10px,0)} .cx-anim .cx-rise.ec-flow .ec-flow__steps li,.cx-anim .ec-flow .ec-flow__steps li{animation:ecIn .6s ease forwards;animation-delay:calc(.45s + var(--i)*.12s)} @keyframes ecIn{to{opacity:1;transform:none}} /* Referenzen */ .ec-refcards{grid-template-columns:repeat(var(--n,4),minmax(0,1fr))} .ec-refcards .fx-refcards__logo>img{max-height:40px;max-width:100%} .ec-refcards .fx-refcards__logo>img[alt="Spa Solutions"]{max-height:58px} .ec-refcards .fx-refcards__logo>img[alt="TransPak"]{max-height:30px} @media (max-width:1180px){.ec-refcards{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:860px){.ec-refcards{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:520px){.ec-refcards{grid-template-columns:1fr}} .ec-minilogos{list-style:none;margin:6px 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:30px;align-items:center} .ec-minilogos img{height:26px;width:auto;max-width:150px;object-fit:contain;filter:grayscale(1);opacity:.7;transition:filter .25s,opacity .25s} .ec-minilogos a:hover img,.ec-minilogos a:focus-visible img{filter:none;opacity:1} /* Grundproblem: 5 Punkte */ .ec-probs{grid-template-columns:repeat(5,1fr)} .ec-probs li,.ec-probs li:nth-child(even){padding:28px 22px 30px;border-left:1px solid #d9dde2} .ec-probs li:first-child{padding-left:0;border-left:0} .ec-probs h3{font-size:19px} .ec-probs p{font-size:14.5px} /* Traffic ≠ Umsatz */ .ec-fun{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:center;margin-top:10px} .ec-fun__bars{list-style:none;margin:0;padding:0;display:grid;gap:8px} .ec-fun__bars li{width:var(--w);transition:width .5s} .ec-fun__btn{position:relative;display:flex;align-items:center;gap:14px;width:100%;padding:15px 18px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#fff;font:inherit;text-align:left;cursor:pointer;overflow:hidden;transition:border-color .3s} .ec-fun__btn:hover{border-color:rgba(255,255,255,.35)} .ec-fun__btn:focus-visible{outline:2px solid #4f8dff;outline-offset:2px} .ec-fun__fill{position:absolute;inset:0;background:linear-gradient(90deg,#0E68FF,#3b86ff);transform:scaleX(0);transform-origin:left;transition:transform .6s ease;z-index:0} .ec-fun__n,.ec-fun__btn b{position:relative;z-index:1} .ec-fun__n{font-size:12px;color:#8d96a3;font-variant-numeric:tabular-nums} .ec-fun__btn b{font-weight:500;font-size:15px} .ec-fun__btn[aria-pressed="true"] .ec-fun__fill{transform:scaleX(1)} .ec-fun__btn[aria-pressed="true"] .ec-fun__n{color:#d6e4ff} .ec-fun__bars li.is-past .ec-fun__btn{border-color:rgba(14,104,255,.55);background:rgba(14,104,255,.12)} .ec-fun__bars li:last-child .ec-fun__btn[aria-pressed="true"] .ec-fun__fill{background:#fff} .ec-fun__bars li:last-child .ec-fun__btn[aria-pressed="true"] b{color:#0b0f17} .ec-fun__panel{padding:30px;border-radius:20px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);min-height:220px} .ec-fun__p span{font-size:12px;color:#8d96a3;font-variant-numeric:tabular-nums} .ec-fun__p h3{margin:8px 0 10px;font-size:28px;font-weight:400;color:#fff;letter-spacing:-.02em} .ec-fun__p p{margin:0;font-size:17px;line-height:1.5;color:#c9ced6} .ec-fun__hint{margin:22px 0 0;font-size:13px;color:#8d96a3} /* Wachstumsarchitektur */ .ec-pillars{list-style:none;margin:0 0 20px;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:14px} .ec-pillars li{position:relative;display:flex;flex-direction:column;padding:26px 22px 22px;border-radius:18px;border:1px solid #e3e6ea;background:#fff;overflow:hidden} .ec-pillars li::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:#0E68FF;transform:scaleX(0);transform-origin:left;transition:transform .7s ease;transition-delay:calc(.2s + var(--i)*.12s)} .ec-pillars.is-in li::before{transform:scaleX(1)} .ec-pillars__n{font-size:13px;color:#0E68FF;font-variant-numeric:tabular-nums} .ec-pillars h3{margin:12px 0 10px;font-size:18px;line-height:1.3;font-weight:500;letter-spacing:-.01em} .ec-pillars p{margin:0 0 16px;font-size:14px;line-height:1.55;color:#4a515b} .ec-pillars__a{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-size:14px;color:#0b0f17;text-decoration:none;border-bottom:1px solid #c9ced6;align-self:flex-start;padding-bottom:2px} .ec-pillars__a:hover{border-color:#0b0f17} .cx-anim .ec-pillars li{opacity:0;transform:translate3d(0,14px,0);transition:opacity .5s,transform .6s;transition-delay:calc(var(--i)*.09s)} .cx-anim .ec-pillars.is-in li{opacity:1;transform:none} /* Cases + Charts */ .ec-chart{margin:0 0 26px;padding:18px 18px 12px;border-radius:16px;background:#fff;border:1px solid #e3e6ea} .bx-case__side .ec-chart{background:#fff} .ec-chart__head{display:flex;flex-direction:column;gap:2px;margin-bottom:10px} .ec-chart__head b{font-size:14px;font-weight:600;color:#0b0f17} .ec-chart__head span{font-size:12px;color:#5f6670} .ec-chart svg{display:block;width:100%;height:auto;aspect-ratio:560/220;overflow:visible} .ec-chart__grid{stroke:#eef0f2;stroke-width:1;vector-effect:non-scaling-stroke} .ec-chart__ax{font-size:11px;fill:#8d96a3;font-family:inherit} .ec-chart__area{fill:rgba(14,104,255,.09)} .ec-chart__line{fill:none;stroke:#0E68FF;stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke} .cx-anim .ec-chart__line{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.2s ease} .cx-anim .ec-chart.is-in .ec-chart__line{stroke-dashoffset:0} .cx-anim .ec-chart__area{opacity:0;transition:opacity 1s ease 1.2s} .cx-anim .ec-chart.is-in .ec-chart__area{opacity:1} .ec-chart__src{margin:8px 0 0;font-size:11px;line-height:1.4;color:#8d96a3} .ec-sys{margin:18px 0 0;font-size:14px;color:#fff} .ec-sys span{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#8d96a3;margin-bottom:4px} .ec-chartnote{margin-top:6px} .ec-more__h{margin:56px 0 18px;font-size:22px;font-weight:500;letter-spacing:-.01em} .ec-more{display:grid;grid-template-columns:repeat(2,1fr);gap:16px} .ec-more__card{padding:26px;border-radius:20px;background:#fff;border:1px solid #e3e6ea} .ec-more__top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid #eef0f2} .ec-more__top img{height:30px;width:auto;max-width:170px;object-fit:contain} .ec-more__top span{font-size:13px;color:#5f6670;text-align:right} .ec-more__h4{margin:0 0 8px;font-size:18px;font-weight:500;line-height:1.35} .ec-more__card>p{font-size:14px;line-height:1.55;color:#4a515b} .ec-more__card .ec-chart{margin:18px 0 14px;background:#fafbfc} /* Nachfrage-Cluster */ .ec-dem{padding:30px;border-radius:22px;border:1px solid #e3e6ea;background:#fafbfc;margin-bottom:22px} .ec-dem__ex{margin:0 0 18px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#5f6670} .ec-dem__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .ec-dem__c{padding:22px;border-radius:16px;background:#fff;border:1px solid #e3e6ea} .ec-dem__t{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 14px;font-size:16px;font-weight:500} .ec-dem__tag{font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:999px} .ec-dem__tag_kaufnah{background:#e7f0ff;color:#0E68FF} .ec-dem__tag_informativ{background:#f1f2f4;color:#5f6670} .ec-dem__c ul{list-style:none;margin:0;padding:0;display:grid;gap:10px} .ec-dem__c li{position:relative;display:flex;justify-content:space-between;gap:12px;padding-bottom:8px;font-size:14px} .ec-dem__k{color:#0b0f17} .ec-dem__v{color:#4a515b;font-variant-numeric:tabular-nums} .ec-dem__c li i{position:absolute;left:0;bottom:0;height:3px;width:var(--w);background:#0E68FF;border-radius:3px;opacity:.85} .ec-dem__c li::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:#eef0f2;border-radius:3px;z-index:-1} .cx-anim .ec-dem__c li i{transform:scaleX(0);transform-origin:left;transition:transform .9s ease;transition-delay:calc(var(--i)*.15s + var(--j)*.08s)} .cx-anim .ec-dem.is-in .ec-dem__c li i{transform:scaleX(1)} .ec-dem__src{margin:16px 0 0;font-size:12px;color:#8d96a3} /* Shop-Systeme */ .ec-systems{margin:0 0 28px} .ec-systems li{font-size:15px;padding:11px 18px} .ec-paths{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid #0b0f17} .ec-paths li{padding:22px 22px 20px 0;border-right:1px solid #e3e6ea} .ec-paths li+li{padding-left:22px} .ec-paths li:last-child{border-right:0} .ec-paths__n{font-size:13px;color:#0E68FF;font-variant-numeric:tabular-nums} .ec-paths h3{margin:10px 0 8px;font-size:18px;font-weight:500} .ec-paths p{margin:0;font-size:14px;line-height:1.55;color:#4a515b} .cx-anim .ec-paths li{opacity:0;transform:translate3d(0,10px,0);transition:opacity .5s,transform .6s;transition-delay:calc(var(--i)*.1s)} .cx-anim .ec-paths.is-in li{opacity:1;transform:none} /* Wachstumssystem */ .ec-net{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;margin-top:10px} .ec-net__ring{position:relative;aspect-ratio:1;max-width:520px;width:100%;margin:0 auto} .ec-net__ring svg{position:absolute;inset:0;width:100%;height:100%} .ec-net__circle{fill:none;stroke:#252c38;stroke-width:1} .ec-net__edge{stroke:#1d232d;stroke-width:1;transition:stroke .4s,stroke-width .4s} .ec-net__edge.is-on{stroke:#4f8dff;stroke-width:2.2} .ec-net__node{position:absolute;transform:translate(-50%,-50%);padding:8px 13px;border-radius:999px;font-size:13px;line-height:1.2;white-space:nowrap;color:#c9ced6;background:#141a24;border:1px solid #2a3240;transition:background .35s,color .35s,border-color .35s} .ec-net__node.is-on{background:#0E68FF;border-color:#0E68FF;color:#fff} .ec-net__core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:96px;height:96px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#0b0f17;font-weight:500;font-size:16px;box-shadow:0 0 0 12px rgba(255,255,255,.05)} .ec-net__ext{margin:0 0 12px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#8d96a3} .ec-net__ex ul{list-style:none;margin:0;padding:0;display:grid;gap:10px} .ec-net__btn{display:block;width:100%;padding:18px 20px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);color:#fff;font:inherit;text-align:left;cursor:pointer;transition:border-color .3s,background .3s} .ec-net__btn b{display:block;font-weight:500;font-size:16px;margin-bottom:4px} .ec-net__btn span{font-size:14px;line-height:1.5;color:#9aa3af} .ec-net__btn:hover{border-color:rgba(255,255,255,.35)} .ec-net__btn[aria-pressed="true"]{border-color:#0E68FF;background:rgba(14,104,255,.12)} .ec-net__btn[aria-pressed="true"] span{color:#c9ced6} .ec-net__btn:focus-visible{outline:2px solid #4f8dff;outline-offset:2px} /* Conversion */ .ec-cro{margin-bottom:22px} /* B2B vs D2C */ .ec-cmp{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:10px} .ec-cmp__col{position:relative;padding:30px 28px 34px;border-radius:20px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);overflow:hidden} .ec-cmp__col_b2b{background:#fff;color:#0b0f17;border-color:#fff} .ec-cmp__t{margin:0;font-size:24px;font-weight:400;letter-spacing:-.02em;color:#fff} .ec-cmp__col_b2b .ec-cmp__t{color:#0b0f17} .ec-cmp__s{margin:8px 0 22px;font-size:15px;line-height:1.5;color:#9aa3af;max-width:420px} .ec-cmp__col_b2b .ec-cmp__s{color:#4a515b} .ec-cmp ol{list-style:none;margin:0;padding:0;display:grid;gap:8px} .ec-cmp li{display:flex;align-items:center;gap:14px;padding:13px 16px;border-radius:12px;font-size:15px;background:rgba(255,255,255,.05);color:#fff} .ec-cmp__col_b2b li{background:#f1f4f8;color:#0b0f17} .ec-cmp li span{font-size:12px;color:#8d96a3;font-variant-numeric:tabular-nums} .ec-cmp__col_b2b li span{color:#0E68FF} .ec-cmp__track{position:absolute;left:28px;right:28px;bottom:16px;height:2px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden} .ec-cmp__col_b2b .ec-cmp__track{background:#e3e6ea} .ec-cmp__track i{position:absolute;left:0;top:0;bottom:0;width:22%;background:#4f8dff;border-radius:2px} .ec-cmp__col_b2b .ec-cmp__track i{background:#0E68FF} .cx-anim .ec-cmp.is-in .ec-cmp__track i{animation:ecRun 2.6s ease-in-out 1 forwards} .cx-anim .ec-cmp.is-in .ec-cmp__track_loop i{animation:ecLoop 3.4s ease-in-out infinite} @keyframes ecRun{from{left:-22%}to{left:78%}} @keyframes ecLoop{0%{left:-22%}70%{left:78%}100%{left:78%}} .cx-anim .ec-cmp li{opacity:0;transform:translate3d(-8px,0,0);transition:opacity .45s,transform .5s;transition-delay:calc(var(--i)*.1s + .15s)} .cx-anim .ec-cmp.is-in li{opacity:1;transform:none} .ec-cmpsec .wx-vs__note a{color:#fff} @media (max-width:1180px){ .ec-probs{grid-template-columns:repeat(3,1fr)} .ec-probs li:nth-child(4){padding-left:0;border-left:0} .ec-pillars{grid-template-columns:repeat(3,1fr)} .ec-paths{grid-template-columns:repeat(2,1fr)} .ec-paths li:nth-child(2){border-right:0} .ec-paths li:nth-child(3){padding-left:0} .ec-paths li:nth-child(n+3){border-top:1px solid #e3e6ea} } @media (max-width:1024px){ .ec-fun,.ec-net{grid-template-columns:1fr;gap:28px} .ec-dem__grid{grid-template-columns:1fr} .ec-more{grid-template-columns:1fr} .ec-net__ring{max-width:460px} } @media (max-width:760px){ .ec-claim{font-size:19px} .ec-flow__stage{padding:22px 48px 22px 18px} .ec-flow__steps li{padding:12px 14px;grid-template-columns:28px 1fr} .ec-flow__steps li:nth-child(n){margin-right:0} .ec-flow__steps b{font-size:15px} .ec-flow__loop{right:8px} .ec-probs,.ec-pillars{grid-template-columns:1fr} .ec-probs li,.ec-probs li:nth-child(n){padding:22px 0;border-left:0} .ec-paths{grid-template-columns:1fr} .ec-paths li,.ec-paths li+li{padding:18px 0;border-right:0;border-top:1px solid #e3e6ea} .ec-paths li:first-child{border-top:0} .ec-fun__bars li{width:100%!important} .ec-fun__panel{padding:22px;min-height:0} .ec-fun__p h3{font-size:23px} .ec-cmp{grid-template-columns:1fr} .ec-net__node{font-size:11px;padding:6px 9px} .ec-net__core{width:66px;height:66px;font-size:14px} .ec-dem{padding:18px} .ec-minilogos{gap:20px} } @media (prefers-reduced-motion:reduce){ .cx-anim .ec-flow__steps li,.cx-anim .ec-pillars li,.cx-anim .ec-paths li,.cx-anim .ec-cmp li{opacity:1!important;transform:none!important;animation:none!important;transition:none!important} .cx-anim .ec-chart__line{stroke-dasharray:none;stroke-dashoffset:0;transition:none} .cx-anim .ec-chart__area{opacity:1;transition:none} .cx-anim .ec-dem__c li i{transform:none;transition:none} .ec-cmp__track i{animation:none!important;left:0;width:100%;opacity:.35} .ec-pillars li::before{transform:scaleX(1);transition:none} .ec-fun__fill,.ec-fun__bars li,.ec-net__edge,.ec-net__node{transition:none} } .ec-case:nth-of-type(2) .ec-sys{color:#0b0f17}.ec-case:nth-of-type(2) .ec-sys span{color:#5f6670} .bx-case__side .ec-chart{margin:0} .ec-more__top img[alt="Spa Solutions"]{height:56px}.ec-minilogos img[alt="Spa Solutions"]{height:40px} .ec-net__core.is-pulse{animation:ecPulse .9s ease} @keyframes ecPulse{0%{box-shadow:0 0 0 0 rgba(14,104,255,.6)}100%{box-shadow:0 0 0 22px rgba(14,104,255,0)}} @media (prefers-reduced-motion:reduce){.ec-net__core.is-pulse{animation:none}} .fx-refcards__logo>img[alt="Farben Löwe"],.bx-case__logo[alt="Farben Löwe"]{max-height:54px} /* magazin.css */ /* ============ POOSCH Magazin (Präfix mz-) ============ */ .mz{--cat:var(--blue);--cat-tint:#eef4ff} .mz .entry-content{overflow:visible} .mz-crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--mute);margin:0 0 28px} .mz-crumbs a{color:var(--mute);text-decoration:none} .mz-crumbs a:hover{color:var(--ink)} /* ---------- Detail: Hero ---------- */ .mz-progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:1000;pointer-events:none} .mz-progress span{display:block;height:100%;background:var(--cat,var(--blue));transform:scaleX(0);transform-origin:0 50%} .mz-post .mz-progress span{background:#0E68FF} .mz-hero{padding:132px 0 0;background:linear-gradient(180deg,#f5f6f7 0,#f5f6f7 calc(100% - 180px),#fff calc(100% - 180px))} .mz-hero__wrap{max-width:var(--wrap)} .mz-hero__wrap>*{max-width:880px} .mz-cat{margin:0 0 18px;font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase} .mz-cat a{display:inline-flex;align-items:center;gap:10px;color:var(--cat);text-decoration:none} .mz-cat a::before{content:"";width:28px;height:2px;background:var(--cat)} .mz-h1{font-size:60px;line-height:1.05;letter-spacing:-.035em;font-weight:500;color:var(--ink);margin:0 0 24px;text-transform:none} .mz-lead{font-size:20px;line-height:1.55;color:var(--ink-2);margin:0 0 36px;max-width:760px} .mz-meta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 36px;padding:22px 0 44px;border-top:1px solid var(--line);max-width:880px} .mz-meta__au{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)} .mz-meta__au img{width:44px;height:44px;border-radius:50%;object-fit:cover;background:#e9ebee} .mz-meta__au b{display:block;font-weight:500;font-size:15px} .mz-meta small,.mz-meta__au small{display:block;font-size:13px;color:var(--mute);font-weight:400} .mz-meta__i{font-size:15px;color:var(--ink)} .mz-cover{margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:16/8;background:#e9ebee} .mz-cover img{width:100%;height:100%;object-fit:cover;display:block} /* ---------- Detail: Layout ---------- */ .mz-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:72px;padding-top:64px;padding-bottom:96px;align-items:start} .mz-side{position:sticky;top:96px;align-self:start} .mz-side__k{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin:0 0 14px;font-weight:500} .mz-toc{list-style:none;margin:0;padding:0;border-left:1px solid var(--line);max-height:calc(100vh - 320px);overflow:auto} .mz-toc li{margin:0} .mz-toc a{display:block;padding:7px 0 7px 16px;margin-left:-1px;border-left:2px solid transparent;font-size:14px;line-height:1.4;color:var(--ink-2);text-decoration:none;transition:color .15s,border-color .15s} .mz-toc a:hover{color:var(--ink)} .mz-toc a.is-on{color:var(--ink);border-left-color:var(--cat);font-weight:500} .mz-side__cta{margin-top:28px;padding:20px;background:var(--ink);color:#fff;border-radius:var(--r)} .mz-side__cta p{margin:0 0 14px;font-size:15px;line-height:1.4} .mz-side__cta a{display:inline-flex;align-items:center;gap:10px;color:#fff;font-weight:500;font-size:14px;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:2px} .mz-side__cta a:hover{border-color:#fff} .mz-main{max-width:760px;min-width:0} /* ---------- Das Wichtigste in Kürze ---------- */ .mz-kurz{position:relative;background:#fff;border:1px solid var(--line);border-top:3px solid var(--ink);padding:28px 32px 26px;margin:0 0 40px;border-radius:var(--r)} .mz-kurz::after{content:"";position:absolute;left:-1px;right:-1px;top:-3px;height:3px;background:linear-gradient(90deg,#0E68FF 0 25%,#7a3cff 25% 50%,#12a594 50% 75%,#f2a100 75%)} .mz-kurz__h{font-size:20px!important;font-weight:500;letter-spacing:-.01em;margin:0 0 16px!important;color:var(--ink)} .mz-kurz ul{list-style:none;margin:0;padding:0} .mz-kurz li{position:relative;padding:0 0 0 32px;margin:0 0 12px;font-size:16px;line-height:1.6;color:var(--ink-2)} .mz-kurz li:last-child{margin-bottom:0} .mz-kurz li::before{content:"";position:absolute;left:0;top:4px;width:18px;height:18px;border-radius:50%;background:var(--cat-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' fill='none' stroke='%230E68FF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat} .mz-toc-m{display:none} /* ---------- Fließtext ---------- */ .mz-body{font-size:18px;line-height:1.75;color:var(--ink-2)} .mz-body>*:first-child{margin-top:0} .mz-body p{margin:0 0 22px} .mz-body h2{font-size:34px;line-height:1.15;letter-spacing:-.025em;font-weight:500;color:var(--ink);margin:64px 0 20px;scroll-margin-top:100px;text-transform:none} .mz-body h3{font-size:23px;line-height:1.3;letter-spacing:-.015em;font-weight:500;color:var(--ink);margin:40px 0 14px;scroll-margin-top:100px;text-transform:none} .mz-body h3 strong{font-weight:500} .mz-body strong{color:var(--ink);font-weight:600} .mz-body a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--cat);text-decoration-thickness:2px;text-underline-offset:3px} .mz-body a:hover{color:var(--cat)} .mz-body ul,.mz-body ol{margin:0 0 24px;padding-left:22px} .mz-body li{margin:0 0 8px;padding-left:4px} .mz-body ul li::marker{color:var(--cat)} .mz-body ol li::marker{color:var(--cat);font-weight:600} .mz-fig{margin:36px 0} .mz-fig img{display:block;width:100%;height:auto;border-radius:var(--r);background:#eef0f2} .mz-fig figcaption{font-size:14px;color:var(--mute);margin-top:10px} .mz-tbl{overflow-x:auto;margin:28px 0} .mz-tbl table{width:100%;border-collapse:collapse;font-size:16px} .mz-tbl th,.mz-tbl td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top} .mz-tbl th{color:var(--ink);font-weight:500;background:#f5f6f7} /* Hinweisbox */ .mz-note{display:flex;gap:16px;margin:32px 0;padding:22px 24px;background:var(--cat-tint);border-left:3px solid var(--cat);border-radius:var(--r)} .mz-note__i{flex:none;width:36px;height:36px;border-radius:50%;background:#fff;color:var(--cat);display:grid;place-items:center} .mz-note__b{min-width:0;font-size:17px;line-height:1.65} .mz-note__b>*:last-child{margin-bottom:0} .mz-note__b ul{margin:0;padding-left:20px} .mz-note__b p{margin:0 0 10px} .mz-note__t{font-weight:600;color:var(--ink);margin:4px 0 8px!important} /* Zitat */ .mz-quote{margin:40px 0;padding:32px 34px;background:var(--ink);color:#fff;border-radius:var(--r);position:relative;overflow:hidden} .mz-quote::before{content:"“";position:absolute;right:22px;top:-18px;font-size:160px;line-height:1;color:rgba(255,255,255,.08);font-family:Georgia,serif} .mz-quote blockquote{margin:0 0 22px;padding:0;border:0;font-size:21px;line-height:1.5;letter-spacing:-.01em} .mz-quote blockquote p{margin:0} .mz-quote blockquote em{font-style:normal} .mz-quote figcaption{display:flex;align-items:center;gap:12px;font-size:14px;color:rgba(255,255,255,.7)} .mz-quote figcaption b{color:#fff;font-weight:500} .mz-quote figcaption img{width:44px;height:44px;border-radius:50%;object-fit:cover} /* CTA */ .mz-cta{display:grid;grid-template-columns:1fr auto;gap:24px 40px;align-items:end;margin:48px 0;padding:36px;border-radius:var(--r);color:#fff; background:radial-gradient(120% 140% at 100% 0,rgba(14,104,255,.55) 0,rgba(14,104,255,0) 55%),var(--ink)} .mz-cta__k{margin:0 0 8px!important;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.65)} .mz-cta__h{margin:0 0 10px!important;font-size:26px;line-height:1.2;letter-spacing:-.02em;font-weight:500;color:#fff} .mz-cta__p{margin:0!important;font-size:16px;line-height:1.55;color:rgba(255,255,255,.75);max-width:480px} .mz-body .mz-cta a,.mz-cta .cx-btn{text-decoration:none;color:var(--ink);background:#fff;white-space:nowrap} .mz-cta .cx-btn:hover{background:#e9ecf1;color:var(--ink)} /* FAQ */ .mz-faq{margin:64px 0 0} .mz-faq h2{font-size:34px;line-height:1.15;letter-spacing:-.025em;font-weight:500;margin:0 0 20px;scroll-margin-top:100px;text-transform:none} .mz-faq__i{border-top:1px solid var(--line)} .mz-faq__i:last-child{border-bottom:1px solid var(--line)} .mz-faq__i summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;cursor:pointer;list-style:none;font-size:19px;font-weight:500;color:var(--ink)} .mz-faq__i summary::-webkit-details-marker{display:none} .mz-faq__i summary i{flex:none;position:relative;width:16px;height:16px} .mz-faq__i summary i::before,.mz-faq__i summary i::after{content:"";position:absolute;left:0;right:0;top:7px;height:2px;background:var(--ink);transition:transform .2s} .mz-faq__i summary i::after{transform:rotate(90deg)} .mz-faq__i[open] summary i::after{transform:rotate(0)} .mz-faq__i summary:focus-visible{outline:2px solid var(--blue);outline-offset:4px} .mz-faq__a{padding:0 0 22px;font-size:17px;line-height:1.7;color:var(--ink-2)} .mz-faq__a p{margin:0 0 12px} /* Teilen + Autor */ .mz-share{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:28px 0;border-top:1px solid var(--line);margin-top:8px} .mz-share__k{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-right:8px;font-weight:500} .mz-share a,.mz-share button{font:inherit;font-size:14px;color:var(--ink);text-decoration:none;border:1px solid var(--line-2);background:#fff;padding:8px 14px;border-radius:var(--r);cursor:pointer} .mz-share a:hover,.mz-share button:hover{border-color:var(--ink)} /* Weitere Beiträge / Karten */ .mz-rel{padding:88px 0 104px;background:#f5f6f7} .mz-rel__h{font-size:34px;letter-spacing:-.025em;font-weight:500;margin:0 0 32px;text-transform:none} .mz-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px} .mz-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:border-color .2s,transform .2s} .mz-card:hover{border-color:var(--ink);transform:translateY(-2px)} .mz-card__img{display:block;aspect-ratio:3/2;background:#e9ebee;overflow:hidden} .mz-card__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s} .mz-card:hover .mz-card__img img{transform:scale(1.03)} .mz-card__b{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1} .mz-card__c{margin:0 0 10px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--cat);font-weight:500} .mz-card__t{margin:0 0 10px;font-size:21px;line-height:1.25;letter-spacing:-.015em;font-weight:500;text-transform:none} .mz-card__t a{color:var(--ink);text-decoration:none} .mz-card__t a::after{content:"";position:absolute;inset:0} .mz-card{position:relative} .mz-card__e{margin:0 0 16px;font-size:15px;line-height:1.55;color:var(--ink-2)} .mz-card__m{margin:auto 0 0;font-size:13px;color:var(--mute)} /* ---------- Übersicht ---------- */ .mz-ihero{padding:140px 0 56px;background:#f5f6f7;position:relative;overflow:hidden} .mz-ihero::after{content:"";position:absolute;right:-120px;top:40px;width:520px;height:520px;border-radius:50%; background:radial-gradient(closest-side,rgba(14,104,255,.14),transparent);filter:blur(40px);pointer-events:none} .mz-ihero .cx-wrap{position:relative;z-index:1} .mz-ih1{font-size:64px;line-height:1.04;letter-spacing:-.035em;font-weight:500;color:var(--ink);margin:0 0 20px;max-width:880px;text-transform:none} .mz-ilead{font-size:20px;line-height:1.55;color:var(--ink-2);max-width:700px;margin:0 0 36px} .mz-chips{display:flex;flex-wrap:wrap;gap:10px} .mz-chips a{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid var(--line-2);border-radius:999px;background:#fff;color:var(--ink);font-size:14px;font-weight:500;text-decoration:none;transition:border-color .2s,background .2s} .mz-chips a i{width:8px;height:8px;border-radius:50%;background:var(--cat)} .mz-chips a:hover{border-color:var(--ink)} .mz-chips a[aria-current]{background:var(--ink);border-color:var(--ink);color:#fff} .mz-list{padding-top:56px;padding-bottom:96px} .mz-feat{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px;align-items:center;margin:0 0 56px;padding-bottom:56px;border-bottom:1px solid var(--line)} .mz-feat__img{display:block;aspect-ratio:3/2;border-radius:var(--r);overflow:hidden;background:#e9ebee} .mz-feat__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s} .mz-feat:hover .mz-feat__img img{transform:scale(1.025)} .mz-feat__t{font-size:40px;line-height:1.1;letter-spacing:-.03em;font-weight:500;margin:0 0 16px;text-transform:none} .mz-feat__t a{color:var(--ink);text-decoration:none} .mz-feat__t a::after{content:"";position:absolute;inset:0} .mz-feat__e{font-size:17px;line-height:1.6;color:var(--ink-2);margin:0 0 22px} .mz-feat__m{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--mute);margin:0} .mz-feat__m img{width:36px;height:36px;border-radius:50%;object-fit:cover} .mz-empty{font-size:18px;color:var(--mute)} .mz-icta{padding:0 0 104px} .mz-icta__w{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;padding-top:56px;border-top:1px solid var(--line)} .mz-icta__h{font-size:34px;line-height:1.15;letter-spacing:-.025em;font-weight:500;margin:0 0 12px;text-transform:none} .mz-icta p:not(.cx-label){font-size:17px;color:var(--ink-2);max-width:620px;margin:0} /* ---------- Responsive ---------- */ @media (max-width:1100px){ .mz-layout{grid-template-columns:1fr;gap:0;padding-top:40px} .mz-side{display:none} .mz-main{max-width:760px;margin:0 auto;width:100%} .mz-toc-m{display:block;margin:0 0 36px;border:1px solid var(--line);border-radius:var(--r)} .mz-toc-m summary{display:flex;justify-content:space-between;padding:16px 18px;cursor:pointer;font-weight:500;color:var(--ink);list-style:none} .mz-toc-m summary::-webkit-details-marker{display:none} .mz-toc-m summary span{font-weight:400;color:var(--mute);font-size:14px} .mz-toc-m ol{margin:0;padding:0 18px 16px 38px;font-size:15px;line-height:1.5} .mz-toc-m li{margin:0 0 8px} .mz-toc-m a{color:var(--ink-2);text-decoration:none} .mz-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:900px){ .mz-hero{padding-top:104px;background:linear-gradient(180deg,#f5f6f7 0,#f5f6f7 calc(100% - 90px),#fff calc(100% - 90px))} .mz-h1{font-size:38px} .mz-lead{font-size:18px} .mz-meta{gap:12px 24px;padding-bottom:28px} .mz-cover{aspect-ratio:3/2} .mz-ihero{padding:108px 0 40px} .mz-ih1{font-size:42px} .mz-ilead{font-size:18px} .mz-feat{grid-template-columns:1fr;gap:24px} .mz-feat__t{font-size:30px} .mz-icta__w{flex-direction:column;align-items:flex-start} } @media (max-width:640px){ .mz-h1{font-size:32px} .mz-body{font-size:17px} .mz-body h2,.mz-faq h2{font-size:27px;margin-top:48px} .mz-body h3{font-size:20px} .mz-kurz{padding:22px 20px} .mz-note{padding:18px;gap:12px} .mz-note__i{display:none} .mz-quote{padding:26px 22px} .mz-quote blockquote{font-size:18px} .mz-cta{grid-template-columns:1fr;padding:26px 22px} .mz-cta .cx-btn{white-space:normal;justify-content:space-between} .mz-grid{grid-template-columns:1fr;gap:20px} .mz-rel{padding:64px 0 72px} .mz-ih1{font-size:34px} .mz-faq__i summary{font-size:17px} .mz-meta__i{font-size:14px} } @media (prefers-reduced-motion:reduce){ .mz-card,.mz-card__img img,.mz-feat__img img,.mz-toc a{transition:none} .mz-card:hover{transform:none}.mz-card:hover .mz-card__img img,.mz-feat:hover .mz-feat__img img{transform:none} } /* ============ Autorenseite (Präfix au-) ============ */ .mz-au .mz-crumbs{margin-bottom:32px} .au-hero{position:relative;overflow:hidden;padding:128px 0 72px;background:#f5f6f7} .au-hero::before{content:"";position:absolute;inset:0;background: radial-gradient(520px 420px at 82% 30%,rgba(14,104,255,.16),transparent 70%);pointer-events:none} .au-hero::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(11,15,23,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(11,15,23,.045) 1px,transparent 1px);background-size:56px 56px; -webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 75%);mask-image:linear-gradient(90deg,transparent 30%,#000 75%);pointer-events:none} .au-hero__w{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:64px;align-items:center} .au-h1{font-size:76px;line-height:1;letter-spacing:-.04em;font-weight:500;color:var(--ink);margin:0 0 14px;text-transform:none} .au-role{font-size:19px;color:var(--ink);margin:0 0 26px;font-weight:500} .au-lead{font-size:19px;line-height:1.6;color:var(--ink-2);margin:0 0 28px;max-width:640px} .au-tags{list-style:none;margin:0 0 34px;padding:0;display:flex;flex-wrap:wrap;gap:8px} .au-tags li{font-size:14px;padding:7px 13px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--ink)} .au-tags li:nth-child(1){border-color:rgba(14,104,255,.35)} .au-tags li:nth-child(2){border-color:rgba(122,60,255,.35)} .au-tags li:nth-child(3){border-color:rgba(229,72,77,.35)} .au-tags li:nth-child(4){border-color:rgba(242,161,0,.45)} .au-tags li:nth-child(5){border-color:rgba(18,165,148,.4)} .cx-anim .au-tags li{opacity:0;transform:translateY(6px);animation:auIn .5s ease forwards;animation-delay:calc(.25s + var(--i)*.07s)} @keyframes auIn{to{opacity:1;transform:none}} .au-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center} .au-in{display:inline-flex;align-items:center;gap:10px;padding:14px 20px;background:#0a66c2;color:#fff;border-radius:var(--r);font-weight:500;font-size:15px;text-decoration:none;transition:background .2s} .au-in:hover{background:#004182;color:#fff} .au-ghost{display:inline-flex;align-items:center;gap:10px;padding:13px 19px;border:1px solid var(--ink);color:var(--ink);border-radius:var(--r);font-weight:500;font-size:15px;text-decoration:none;transition:background .2s,color .2s} .au-ghost:hover{background:var(--ink);color:#fff} .au-photo{position:relative;margin:0;justify-self:end;width:100%;max-width:420px} .au-photo img{position:relative;z-index:1;display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;border-radius:var(--r);filter:grayscale(1) contrast(1.05)} .au-photo__ring{position:absolute;z-index:0;inset:-14px -14px 14px 14px;border-radius:var(--r);background:#0E68FF} .au-photo figcaption{position:absolute;z-index:2;left:-24px;bottom:28px;background:var(--ink);color:rgba(255,255,255,.7);padding:12px 16px;border-radius:var(--r);font-size:13px;line-height:1.35} .au-photo figcaption b{display:block;color:#fff;font-size:15px;font-weight:500} .au-facts{border-bottom:1px solid var(--line);background:#fff} .au-facts__dl{margin:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))} .au-facts__dl>div{padding:26px 22px 26px 0;border-right:1px solid var(--line);margin-right:22px} .au-facts__dl>div:last-child{border-right:0;margin-right:0} .au-facts dt{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin:0 0 8px;font-weight:500} .au-facts dd{margin:0;font-size:17px;font-weight:500;line-height:1.45;color:var(--ink)} .au-body{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:80px;padding-top:88px;padding-bottom:40px;align-items:start} .au-sec{margin:0 0 80px} .au-h2{font-size:40px;line-height:1.1;letter-spacing:-.03em;font-weight:500;color:var(--ink);margin:0 0 28px;text-transform:none} .au-sec>p{font-size:18px;line-height:1.75;color:var(--ink-2);margin:0 0 20px;max-width:720px} .au-quote{margin:36px 0 0;padding:0 0 0 28px;border-left:3px solid #0E68FF} .au-quote blockquote{margin:0;padding:0;border:0} .au-quote p{font-size:26px;line-height:1.35;letter-spacing:-.02em;color:var(--ink);margin:0 0 12px;font-weight:500} .au-quote figcaption{font-size:14px;color:var(--mute)} .au-exp{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} .au-exp li>a,.au-exp li>div{position:relative;display:flex;flex-direction:column;height:100%;padding:24px 24px 22px;border:1px solid var(--line);border-radius:var(--r);background:#fff;color:var(--ink);text-decoration:none;transition:border-color .2s,transform .2s} .au-exp li>a:hover{border-color:var(--ink);transform:translateY(-2px)} .au-exp li>a::before,.au-exp li>div::before{content:"";position:absolute;left:-1px;top:-1px;width:48px;height:3px;background:var(--c,var(--blue))} .au-exp li:nth-child(1){--c:#0E68FF}.au-exp li:nth-child(2){--c:#7a3cff}.au-exp li:nth-child(3){--c:#e5484d} .au-exp li:nth-child(4){--c:#f2a100}.au-exp li:nth-child(5){--c:#12a594}.au-exp li:nth-child(6){--c:var(--ink)} .au-exp__n{font-size:13px;color:var(--mute);margin-bottom:14px} .au-exp h3{font-size:20px;line-height:1.25;letter-spacing:-.015em;font-weight:500;margin:0 0 8px;text-transform:none} .au-exp p{font-size:15px;line-height:1.55;color:var(--ink-2);margin:0 0 14px} .au-exp__go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--c)} .au-time{list-style:none;margin:0;padding:0;position:relative} .au-time::before{content:"";position:absolute;left:111px;top:8px;bottom:8px;width:1px;background:var(--line)} .au-time li{position:relative;display:grid;grid-template-columns:96px 1fr;gap:32px;padding:0 0 32px} .au-time li::before{content:"";position:absolute;left:106px;top:7px;width:11px;height:11px;border-radius:50%;background:#fff;border:2px solid var(--ink)} .au-time li:first-child::before{background:var(--blue);border-color:var(--blue);box-shadow:0 0 0 5px rgba(14,104,255,.15)} .au-time__w{font-size:14px;font-weight:500;color:var(--mute);padding-top:2px;text-align:right} .au-time li>div{padding-left:8px} .au-time h3{font-size:20px;font-weight:500;letter-spacing:-.015em;margin:0 0 4px;text-transform:none} .au-time__o{font-size:15px;color:var(--ink)!important;margin:0 0 6px!important} .au-time p{font-size:15px;line-height:1.55;color:var(--ink-2);margin:0} .au-side{position:sticky;top:100px} .au-card{padding:28px;border:1px solid var(--line);border-radius:var(--r);background:#fff} .au-card img{width:56px;height:56px;border-radius:50%;object-fit:cover;margin-bottom:14px} .au-card__n{font-size:20px;font-weight:500;margin:0;color:var(--ink)} .au-card__r{font-size:14px;color:var(--mute);margin:2px 0 20px} .au-card__l{list-style:none;margin:0 0 22px;padding:0;border-top:1px solid var(--line)} .au-card__l li{border-bottom:1px solid var(--line)} .au-card__l a{display:flex;align-items:center;gap:12px;padding:13px 0;color:var(--ink);text-decoration:none;font-size:15px;word-break:break-all} .au-card__l a svg{flex:none;color:var(--mute)} .au-card__l a:hover{color:var(--blue)}.au-card__l a:hover svg{color:var(--blue)} .au-card__btn{width:100%;justify-content:space-between;font-size:15px;padding:15px 18px} .au-card__note{font-size:13px;color:var(--mute);margin:12px 0 0} .au-posts{padding:88px 0;background:#f5f6f7} .au-posts__top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:36px;flex-wrap:wrap} .au-posts__top .au-h2{margin:0} .au-filter button{font:inherit;display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid var(--line-2);border-radius:999px;background:#fff;color:var(--ink);font-size:14px;font-weight:500;cursor:pointer} .au-filter button i{width:8px;height:8px;border-radius:50%;background:var(--cat)} .au-filter button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff} .au-grid__i{display:flex}.au-grid__i>.mz-card{width:100%} .au-grid__i[hidden]{display:none} .au-press{padding:96px 0} .au-press__intro{font-size:17px;color:var(--ink-2);margin:-12px 0 32px} .au-press__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)} .au-press__list li{border-bottom:1px solid var(--line)} .au-press__list a{display:grid;grid-template-columns:240px 1fr 20px;gap:28px;align-items:center;padding:20px 0;color:var(--ink);text-decoration:none;transition:padding .2s} .au-press__list a:hover{padding-left:10px} .au-press__list a:hover .au-press__t{color:var(--blue)} .au-press__s{font-size:15px;font-weight:500} .au-press__s em{display:block;font-style:normal;font-size:13px;color:var(--mute);font-weight:400} .au-press__t{font-size:18px;line-height:1.4;letter-spacing:-.01em;transition:color .2s} .au-cta{padding:0 0 104px} .au-cta__w{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;padding:56px;border-radius:var(--r);color:#fff; background:radial-gradient(120% 140% at 100% 0,rgba(14,104,255,.55) 0,rgba(14,104,255,0) 55%),var(--ink)} .au-cta .cx-label{color:rgba(255,255,255,.7)} .au-cta__h{font-size:38px;line-height:1.12;letter-spacing:-.03em;font-weight:500;color:#fff;margin:0 0 14px;max-width:640px;text-transform:none} .au-cta p:not(.cx-label){font-size:17px;line-height:1.55;color:rgba(255,255,255,.75);margin:0;max-width:600px} .au-cta__btn{background:#fff;color:var(--ink);white-space:nowrap} .au-cta__btn:hover{background:#e9ecf1;color:var(--ink)} @media (max-width:1100px){ .au-hero__w{grid-template-columns:1fr 300px;gap:40px} .au-h1{font-size:56px} .au-facts__dl{grid-template-columns:repeat(3,minmax(0,1fr))} .au-facts__dl>div:nth-child(3){border-right:0} .au-body{grid-template-columns:1fr;gap:0} .au-side{position:static;margin-bottom:64px} .au-card{display:grid;grid-template-columns:auto 1fr;column-gap:16px} .au-card>img{grid-row:span 2} .au-card__l,.au-card__btn,.au-card__note{grid-column:1/-1} } @media (max-width:760px){ .au-hero{padding:100px 0 48px} .au-hero__w{grid-template-columns:1fr;gap:40px} .au-photo{justify-self:start;max-width:280px;order:-1;margin-left:14px} .au-photo figcaption{left:auto;right:-10px} .au-h1{font-size:44px} .au-role,.au-lead{font-size:17px} .au-facts__dl{grid-template-columns:1fr 1fr} .au-facts__dl>div{border-right:0;margin-right:0;padding:18px 12px 18px 0;border-bottom:1px solid var(--line)} .au-body{padding-top:56px} .au-h2{font-size:30px} .au-sec{margin-bottom:56px} .au-sec>p{font-size:17px} .au-quote p{font-size:21px} .au-exp{grid-template-columns:1fr} .au-time::before{left:5px} .au-time li{grid-template-columns:1fr;gap:4px;padding-left:28px} .au-time li::before{left:0} .au-time__w{text-align:left} .au-time li>div{padding-left:0} .au-press{padding:64px 0} .au-press__list a{grid-template-columns:1fr 18px;gap:6px 16px} .au-press__s{grid-column:1/-1} .au-press__t{font-size:16px} .au-posts{padding:64px 0} .au-cta__w{flex-direction:column;align-items:flex-start;padding:32px 24px} .au-cta__h{font-size:28px} .au-cta__btn{white-space:normal} } @media (prefers-reduced-motion:reduce){ .cx-anim .au-tags li{animation:none;opacity:1;transform:none} .au-exp li>a,.au-press__list a{transition:none} .au-exp li>a:hover{transform:none}.au-press__list a:hover{padding-left:0} } /* ============ Glossar (Präfix gl-) ============ */ .gl .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .gl-hero{position:relative;overflow:hidden;padding:136px 0 48px;background:#f5f6f7} .gl-hero::after{content:"A–Z";position:absolute;right:-20px;top:40px;font-size:340px;line-height:1;font-weight:500;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px rgba(11,15,23,.07);pointer-events:none} .gl-hero .cx-wrap{position:relative;z-index:1} .gl-h1{font-size:64px;line-height:1.04;letter-spacing:-.04em;font-weight:500;color:var(--ink);margin:0 0 20px;max-width:820px;text-transform:none} .gl-lead{font-size:20px;line-height:1.55;color:var(--ink-2);max-width:700px;margin:0 0 36px} .gl-search{display:flex;align-items:center;gap:14px;max-width:720px;padding:0 20px;height:62px;background:#fff;border:1px solid var(--line-2);border-radius:var(--r);margin-bottom:20px;transition:border-color .2s,box-shadow .2s} .gl-search:focus-within{border-color:var(--ink);box-shadow:0 0 0 4px rgba(14,104,255,.12)} .gl-search svg{flex:none;color:var(--mute)} .gl-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:17px;color:var(--ink);height:100%} .gl-count{flex:none;font-size:14px;color:var(--mute)}.gl-count b{color:var(--ink);font-weight:500} .gl-topics{display:flex;flex-wrap:wrap;gap:8px} .gl-topics button{font:inherit;display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border:1px solid var(--line-2);border-radius:999px;background:#fff;color:var(--ink);font-size:14px;font-weight:500;cursor:pointer} .gl-topics button i{width:8px;height:8px;border-radius:50%;background:var(--cat)} .gl-topics button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff} .gl-az{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)} .gl-az__w{display:flex;flex-wrap:wrap;gap:2px;padding-top:12px;padding-bottom:12px} .gl-az a,.gl-az span{display:grid;place-items:center;min-width:34px;height:34px;padding:0 6px;font-size:14px;font-weight:500;border-radius:var(--r);text-decoration:none} .gl-az a{color:var(--ink);background:#f0f2f4} .gl-az a:hover{background:var(--ink);color:#fff} .gl-az span{color:#c3c7cd} .gl-list{padding-top:56px;padding-bottom:88px} .gl-group{margin-bottom:56px;scroll-margin-top:150px} .gl-letter{display:flex;align-items:baseline;gap:16px;margin:0 0 24px;padding-bottom:14px;border-bottom:1px solid var(--ink);text-transform:none} .gl-letter span{font-size:56px;line-height:1;font-weight:500;letter-spacing:-.04em;color:#0b0f17} .gl-letter small{font-size:14px;color:var(--mute);font-weight:400} .gl-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} .gl-card[hidden]{display:none} .gl-card a{position:relative;display:flex;flex-direction:column;height:100%;padding:22px 24px 20px;border:1px solid var(--line);border-radius:var(--r);background:#fff;color:var(--ink);text-decoration:none;transition:border-color .2s,transform .2s,box-shadow .2s} .gl-card a::before{content:"";position:absolute;left:-1px;top:-1px;width:40px;height:3px;background:var(--cat);transition:width .3s} .gl-card a:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:0 16px 40px -28px rgba(11,15,23,.4)} .gl-card a:hover::before{width:80px} .gl-card__topic{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--cat);font-weight:500;margin-bottom:10px} .gl-card h3{font-size:20px;line-height:1.25;letter-spacing:-.015em;font-weight:500;margin:0 0 8px;padding-right:24px;text-transform:none} .gl-card p{font-size:15px;line-height:1.55;color:var(--ink-2);margin:0} .gl-card__go{position:absolute;right:22px;top:22px;color:var(--mute);transition:color .2s,transform .2s} .gl-card a:hover .gl-card__go{color:var(--ink);transform:translateX(3px)} .gl-empty{font-size:18px;color:var(--ink-2)} .gl-empty a{color:var(--blue)} /* Begriff */ .gl-thero{padding:128px 0 56px;background:#f5f6f7} .gl-thero__row{display:flex;gap:32px;align-items:center;margin-bottom:36px} .gl-thero__l{flex:none;display:grid;place-items:center;width:120px;height:120px;border-radius:var(--r);background:var(--ink);color:#fff;font-size:64px;font-weight:500;letter-spacing:-.04em;position:relative;overflow:hidden} .gl-thero__l::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--cat,#0E68FF)} .gl-thero__k{display:flex;gap:10px;align-items:center;margin:0 0 10px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--cat);font-weight:500} .gl-thero__k span{color:var(--mute)} .gl-thero__k span::after{content:"·";margin-left:10px} .gl-th1{font-size:56px;line-height:1.05;letter-spacing:-.035em;font-weight:500;color:var(--ink);margin:0 0 12px;text-transform:none} .gl-thero__m{font-size:14px;color:var(--mute);margin:0} .gl-thero__m a{color:var(--ink);text-decoration:underline;text-underline-offset:3px} .gl-def{max-width:900px;padding:28px 32px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--cat);border-radius:var(--r)} .gl-def__k{margin:0 0 10px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);font-weight:500} .gl-def__t{margin:0;font-size:20px;line-height:1.6;color:var(--ink)} .gl-def dfn{font-style:normal;font-weight:600} .gl-layout{padding-top:56px} .gl-body h2{font-size:30px} .gl-body a.gl-xref{text-decoration-style:dotted} .gl-back{display:inline-flex;margin-top:24px;font-size:14px;font-weight:500;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:2px} .gl-pn{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px} .gl-pn a{display:block;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r);color:var(--ink);text-decoration:none;font-size:17px;font-weight:500;transition:border-color .2s} .gl-pn a:hover{border-color:var(--ink)} .gl-pn small{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);font-weight:500;margin-bottom:4px} .gl-pn__n{text-align:right} .gl-rel{padding:80px 0 96px;background:#f5f6f7} @media (max-width:1100px){.gl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:800px){ .gl-hero{padding:104px 0 36px}.gl-hero::after{font-size:180px;top:60px} .gl-h1{font-size:38px}.gl-lead{font-size:17px} .gl-search{height:54px}.gl-count{display:none} .gl-az__w{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch} .gl-grid{grid-template-columns:1fr} .gl-letter span{font-size:44px} .gl-thero{padding:100px 0 40px} .gl-thero__row{gap:18px;align-items:flex-start} .gl-thero__l{width:64px;height:64px;font-size:34px} .gl-th1{font-size:32px} .gl-def{padding:20px}.gl-def__t{font-size:17px} .gl-pn{grid-template-columns:1fr}.gl-pn__n{text-align:left} } @media (prefers-reduced-motion:reduce){.gl-card a,.gl-card a::before,.gl-card__go{transition:none}.gl-card a:hover{transform:none}} .gl-az{top:84px;background:transparent;border:0;backdrop-filter:none;pointer-events:none} .gl-az__w{pointer-events:auto;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:var(--r);margin-top:8px;padding:8px;width:fit-content;max-width:calc(100% - 48px)} .gl-az__w{scrollbar-width:none}.gl-az__w::-webkit-scrollbar{display:none} @media (max-width:800px){.gl-az{top:74px}.gl-az__w{max-width:calc(100% - 40px)}} .gl-az{top:78px}.gl-az__w{margin-top:14px;background:#fff;box-shadow:0 10px 30px -18px rgba(11,15,23,.35)} @media (max-width:800px){.gl-az{top:70px}} .gl-thero__l::after{background:#ffd84d} .mz-pager{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:56px 0 0} .mz-pager a,.mz-pager span{min-width:42px;height:42px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:999px;font-size:15px;color:var(--ink);text-decoration:none} .mz-pager a:hover{border-color:var(--ink)} .mz-pager span[aria-current]{background:var(--ink);border-color:var(--ink);color:#fff} .mz-pager__s{font-weight:500} /* Content-Silos 28.10.: Lösungsbox im Artikel + „Wissen zum Thema“ auf Lösungsseiten */ .mz-sol{margin:56px 0 8px;padding:28px 30px;border:1px solid var(--line,#dfe2e6);border-left:3px solid #0E68FF;border-radius:var(--r,4px);background:#fff;display:grid;grid-template-columns:1fr auto;gap:6px 32px;align-items:end} .mz-sol__k{grid-column:1/-1;margin:0;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#0E68FF;font-weight:500} .mz-sol__h{margin:4px 0 0;font-size:24px;line-height:1.2;letter-spacing:-.02em;font-weight:500;color:var(--ink,#0b0f17)} .mz-sol__p{grid-column:1;margin:6px 0 0;font-size:15.5px;line-height:1.55;color:var(--ink-2,#3d434c);max-width:560px} .mz-sol__a{grid-column:2;grid-row:2/4;align-self:end;display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border-radius:999px;background:#0E68FF;color:#fff;text-decoration:none;font-size:15px;font-weight:500;white-space:nowrap;transition:background .2s} .mz-sol__a:hover{background:#0b0f17} .mz-sol__a svg{transition:transform .2s}.mz-sol__a:hover svg{transform:translateX(3px)} @media (max-width:700px){.mz-sol{grid-template-columns:1fr;padding:22px 20px}.mz-sol__a{grid-column:1;grid-row:auto;margin-top:14px;justify-self:start}} .wx-wissen{border-top:1px solid rgba(11,15,23,.1)} .wx-wissen__head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:36px} .wx-wissen__all{display:inline-flex;align-items:center;gap:10px;color:var(--ink,#0b0f17);text-decoration:none;font-weight:500;white-space:nowrap;border-bottom:1px solid currentColor;padding-bottom:2px} .wx-wissen__all:hover{color:#0E68FF} .wx-wissen__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;border-top:1px solid rgba(11,15,23,.14)} .wx-wissen__list li{border-bottom:1px solid rgba(11,15,23,.14)} .wx-wissen__list a{display:grid;grid-template-columns:36px 1fr;gap:4px 12px;padding:22px 0;color:var(--ink,#0b0f17);text-decoration:none} .wx-wissen__n{grid-row:1/3;font-size:13px;color:#0E68FF;font-weight:500;padding-top:3px} .wx-wissen__t{font-size:18px;line-height:1.3;letter-spacing:-.01em;font-weight:500;transition:color .2s} .wx-wissen__m{font-size:13px;color:var(--mute,#7d838c)} .wx-wissen__list a:hover .wx-wissen__t{color:#0E68FF} @media (max-width:1000px){.wx-wissen__list{grid-template-columns:1fr 1fr}} @media (max-width:640px){.wx-wissen__list{grid-template-columns:1fr}.wx-wissen__head{flex-direction:column;align-items:start}} /* Autorenbox (28.10.) */ .mz-author{position:relative;padding:32px;background:#fff;border:1px solid var(--line,#e3e6ea);border-radius:var(--r);box-shadow:0 1px 2px rgba(11,15,23,.04)} .mz-author::before{content:"";position:absolute;left:32px;top:-1px;width:56px;height:3px;background:#0E68FF;border-radius:0 0 3px 3px} .mz-author__head{display:flex;align-items:center;gap:20px;color:inherit;text-decoration:none} .mz-author__ph{flex:none;width:96px;height:96px;border-radius:50%;overflow:hidden;background:#e3e6ea;box-shadow:0 0 0 4px #fff,0 0 0 5px var(--line,#e3e6ea);transition:box-shadow .25s} .mz-author__ph img{display:block;width:96px;height:96px;object-fit:cover;object-position:50% 20%;filter:grayscale(1);transition:filter .35s,transform .35s} .mz-author__id{display:flex;flex-direction:column;min-width:0} .mz-author__k{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);font-weight:500} .mz-author__n{display:inline-flex;align-items:center;gap:8px;margin-top:4px;font-size:24px;font-weight:500;letter-spacing:-.015em;color:var(--ink)} .mz-author__arr{color:#0E68FF;transition:transform .25s} .mz-author__r{margin-top:2px;font-size:14px;color:var(--mute)} .mz-author__head:hover .mz-author__ph img,.mz-author__head:focus-visible .mz-author__ph img{filter:none;transform:scale(1.04)} .mz-author__head:hover .mz-author__ph{box-shadow:0 0 0 4px #fff,0 0 0 5px #0E68FF} .mz-author__head:hover .mz-author__arr{transform:translateX(4px)} .mz-author__head:focus-visible{outline:2px solid #0E68FF;outline-offset:6px;border-radius:12px} .mz-author__b{margin:20px 0 16px;font-size:16px;line-height:1.65;color:var(--ink-2)} .mz-author__tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px;padding:0;list-style:none} .mz-author__tags a,.mz-author__tags span{display:inline-block;padding:6px 12px;border-radius:100px;background:#f5f6f7;font-size:13px;color:var(--ink-2);text-decoration:none;transition:background .2s,color .2s} .mz-author__tags a:hover{background:#0b0f17;color:#fff} .mz-author__foot{display:flex;flex-wrap:wrap;gap:10px;padding-top:20px;border-top:1px solid var(--line,#e3e6ea)} .mz-author__btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:100px;background:#0b0f17;color:#fff;font-size:14px;font-weight:500;text-decoration:none;transition:background .2s} .mz-author__btn:hover{background:#0E68FF} .mz-author__btn_ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2,#cfd4da)} .mz-author__btn_ghost:hover{background:#f5f6f7;color:var(--ink)} .mz-author__cnt{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:100px;background:rgba(255,255,255,.16);font-size:12px} @media (prefers-reduced-motion:reduce){.mz-author__ph img,.mz-author__arr,.mz-author__ph{transition:none}.mz-author__head:hover .mz-author__ph img{transform:none}} @media (max-width:640px){.mz-author{padding:24px 20px}.mz-author::before{left:20px}.mz-author__head{gap:16px}.mz-author__ph,.mz-author__ph img{width:72px;height:72px}.mz-author__n{font-size:20px}} /* ===== Animierte Artikel-Grafiken (grafik.py) ===== */ .gx{margin:40px 0;padding:28px 28px 22px;background:#fff;border:1px solid var(--line);border-radius:12px} .gx-t{margin:0 0 4px;font-size:18px;font-weight:500;letter-spacing:-.01em;color:var(--ink)} .gx-i{margin:0 0 22px;font-size:14px;color:var(--mute)} .gx-q{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-size:12px;color:var(--mute)} /* Spanne */ .gx-sp__list{list-style:none;margin:0;padding:0;display:grid;gap:14px} .gx-sp__row,.gx-sp__scale{display:grid;grid-template-columns:minmax(150px,30%) 1fr 130px;align-items:center;gap:16px} .gx-sp__l{font-size:14px;color:var(--ink-2);line-height:1.35} .gx-sp__track{position:relative;height:14px;background:var(--tint);border-radius:100px;background-image:repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),#e3e6ea calc(25% - 1px) 25%)} .gx-sp__bar{position:absolute;top:0;bottom:0;left:var(--a);width:calc(var(--b) - var(--a));background:var(--blue);border-radius:100px;transform-origin:0 50%;transform:scaleX(0);transition:transform .9s cubic-bezier(.2,.7,.2,1) calc(var(--d,0)*.12s)} .gx-sp__bar.is-open{border-radius:100px 0 0 100px;-webkit-mask:linear-gradient(90deg,#000 70%,transparent);mask:linear-gradient(90deg,#000 70%,transparent)} .gx-sp__v{font-size:14px;font-weight:500;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums;opacity:0;transition:opacity .4s calc(.5s + var(--d,0)*.12s)} .gx-sp__scale{margin-top:6px} .gx-sp__ticks{position:relative;height:16px} .gx-sp__ticks span{position:absolute;transform:translateX(-50%);font-size:11px;color:var(--mute)} .gx-sp__ticks span:first-child{transform:none}.gx-sp__ticks span:last-child{transform:translateX(-100%)} .gx-sp__scale .gx-sp__v{opacity:1;font-size:11px;font-weight:400;color:var(--mute)} .gx.is-in .gx-sp__bar{transform:scaleX(1)}.gx.is-in .gx-sp__v{opacity:1} /* Trichter */ .gx-tr__list{list-style:none;margin:0;padding:0;display:grid;gap:6px} .gx-tr__row{position:relative;display:flex;justify-content:center} .gx-tr__bar{display:flex;align-items:baseline;gap:12px;width:var(--w);min-width:240px;padding:13px 20px;background:var(--tint);border-radius:8px;box-sizing:border-box;opacity:0;transform:translateY(10px) scaleX(.9);transition:opacity .5s calc(var(--d)*.15s),transform .6s cubic-bezier(.2,.7,.2,1) calc(var(--d)*.15s)} .gx-tr__row:nth-child(2) .gx-tr__bar{background:#e8eefb}.gx-tr__row:nth-child(3) .gx-tr__bar{background:#d3e1fb}.gx-tr__row:nth-child(4) .gx-tr__bar{background:#b5cdfa} .gx-tr__row.is-goal .gx-tr__bar{background:var(--blue);color:#fff} .gx-tr__n{font-size:24px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;min-width:4.2ch} .gx-tr__l{font-size:14px} .gx-tr__row.is-goal .gx-tr__l{color:rgba(255,255,255,.85)} .gx-tr__c{position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:12px;color:var(--mute);opacity:0;transition:opacity .4s calc(.3s + var(--d)*.15s)} .gx.is-in .gx-tr__bar{opacity:1;transform:none}.gx.is-in .gx-tr__c{opacity:1} /* Schritte */ .gx-st__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n),1fr);gap:16px;position:relative} .gx-st__list::before{content:"";position:absolute;left:0;right:0;top:19px;height:2px;background:var(--line)} .gx-st__list::after{content:"";position:absolute;left:0;right:0;top:19px;height:2px;background:var(--blue);transform-origin:0 50%;transform:scaleX(0);transition:transform 1.4s cubic-bezier(.4,0,.2,1)} .gx-st__i{position:relative;display:flex;flex-direction:column;gap:6px;opacity:.35;transition:opacity .4s calc(.2s + var(--d)*.3s)} .gx-st__n{position:relative;z-index:1;display:grid;place-items:center;width:40px;height:40px;margin-bottom:8px;border-radius:50%;background:#fff;border:2px solid var(--line);font-size:13px;font-weight:600;color:var(--mute);transition:border-color .3s calc(.2s + var(--d)*.3s),background .3s calc(.2s + var(--d)*.3s),color .3s calc(.2s + var(--d)*.3s)} .gx-st__i b{font-size:15px;font-weight:500;color:var(--ink)} .gx-st__i span:last-child{font-size:13.5px;line-height:1.5;color:var(--ink-2)} .gx.is-in .gx-st__list::after{transform:scaleX(1)}.gx.is-in .gx-st__i{opacity:1} .gx.is-in .gx-st__n{border-color:var(--blue);background:var(--blue);color:#fff} /* Vergleich */ .gx-vg__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} .gx-vg__c{padding:20px 22px;border-radius:10px;background:var(--tint);opacity:0;transform:translateY(12px);transition:opacity .5s calc(var(--d)*.2s),transform .6s cubic-bezier(.2,.7,.2,1) calc(var(--d)*.2s)} .gx-vg__c.is-pos{background:#0b0f17;color:#fff} .gx-vg__h{margin:0 0 12px;font-size:15px;font-weight:500} .gx-vg__c ul{list-style:none;margin:0;padding:0;display:grid;gap:10px} .gx-vg__c li{position:relative;padding-left:26px;font-size:14px;line-height:1.45} .gx-vg__c li::before{content:"";position:absolute;left:0;top:2px;width:16px;height:16px;border-radius:50%;background:#d6dae0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 5l6 6M11 5l-6 6' stroke='%233d434c' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/12px no-repeat} .gx-vg__c.is-pos li::before{background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat} .gx.is-in .gx-vg__c{opacity:1;transform:none} @media (max-width:640px){ .gx{padding:22px 18px 18px} .gx-sp__row{grid-template-columns:1fr auto;grid-template-areas:"l v" "t t";row-gap:6px} .gx-sp__row .gx-sp__l{grid-area:l}.gx-sp__row .gx-sp__v{grid-area:v}.gx-sp__row .gx-sp__track{grid-area:t} .gx-sp__scale{display:none} .gx-tr__bar{min-width:0;width:calc(var(--w) * .7 + 30%);padding:11px 14px} .gx-tr__n{font-size:20px}.gx-tr__c{position:static;transform:none;display:block;text-align:center;margin:0 0 2px} .gx-tr__row{flex-direction:column;align-items:center} .gx-st__list{grid-template-columns:1fr;gap:18px} .gx-st__list::before,.gx-st__list::after{left:19px;right:auto;top:0;bottom:0;width:2px;height:auto} .gx-st__list::after{transform-origin:50% 0;transform:scaleY(0)}.gx.is-in .gx-st__list::after{transform:scaleY(1)} .gx-st__i{display:grid;grid-template-columns:40px 1fr;column-gap:14px} .gx-st__n{grid-row:span 2;margin:0} .gx-vg__grid{grid-template-columns:1fr} } @media (prefers-reduced-motion:reduce){.gx *,.gx *::before,.gx *::after{transition:none!important}} .no-js .gx *{transition:none!important} .mz-body .gx ol,.mz-body .gx ul,.gx ol.gx-st__list,.gx ol.gx-tr__list,.gx ul.gx-sp__list{padding-left:0!important;margin-left:0!important} .gx li{margin:0} .gx-st__i::marker,.gx-tr__row::marker{content:none} .gx-tr__n{min-width:0;white-space:nowrap} .gx-tr__bar{gap:14px} .gx-tr__bar>.gx-tr__n{flex:none;width:5.2ch;text-align:right} .gx-tr__row.is-goal .gx-tr__bar>.gx-tr__n{width:auto} .mz-body .gx li{padding-left:0} .mz-body .gx-vg__c li{padding-left:26px} .gx-tr__bar{flex-wrap:nowrap} .gx-tr__l{flex:1;min-width:0} /* ===== Downloads (Ressourcen) ===== */ .dlbox{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;margin:40px 0 24px;padding:24px 26px;border-radius:12px;background:#0b0f17;color:#fff;position:relative;overflow:hidden} .dlbox::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:28px 28px;pointer-events:none} .dlbox>*{position:relative;z-index:1} .dlbox__ico{display:grid;place-items:center;width:56px;height:56px;border-radius:12px;background:rgba(14,104,255,.16);color:#6ea2ff} .dlbox__k{margin:0 0 4px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#6ea2ff;font-weight:500} .dlbox__t{margin:0 0 6px;font-size:18px;font-weight:500;line-height:1.3;color:#fff} .dlbox__p{margin:0;font-size:14px;line-height:1.55;color:#b9bec6} .dlbox__btn,.dlc__btn{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:100px;background:var(--blue);color:#fff!important;font-size:15px;font-weight:500;text-decoration:none!important;white-space:nowrap;transition:background .2s,transform .2s} .dlbox__btn:hover,.dlc__btn:hover{background:#0a55d6;transform:translateY(-1px)} .dlbox__btn:focus-visible,.dlc__btn:focus-visible{outline:2px solid #fff;outline-offset:3px} @media (max-width:720px){.dlbox{grid-template-columns:auto 1fr;padding:20px}.dlbox__btn{grid-column:1/-1;justify-content:center}} /* Modal */ html.dlm-lock{overflow:hidden} .dlm{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:20px} .dlm[hidden]{display:none} .dlm-back{position:absolute;inset:0;background:rgba(11,15,23,.62);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;transition:opacity .25s} .dlm.is-open .dlm-back{opacity:1} .dlm-dialog{position:relative;width:min(520px,100%);max-height:calc(100vh - 40px);overflow:auto;padding:34px 34px 30px;background:#fff;border-radius:16px;box-shadow:0 30px 80px rgba(11,15,23,.35);transform:translateY(14px);opacity:0;transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .25s} .dlm.is-open .dlm-dialog{transform:none;opacity:1} .dlm-dialog::before{content:"";position:absolute;left:34px;top:0;width:56px;height:3px;background:var(--blue);border-radius:0 0 3px 3px} .dlm-x{position:absolute;right:14px;top:14px;display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer} .dlm-x:hover{background:var(--tint)} .dlm-steps{display:flex;align-items:center;gap:8px;margin-bottom:6px} .dlm-steps span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line-2);font-size:12px;font-weight:600;color:var(--mute);transition:all .25s} .dlm-steps span.is-on{background:var(--blue);border-color:var(--blue);color:#fff} .dlm-steps i{flex:0 0 28px;height:1.5px;background:var(--line)} .dlm-prog{margin:0 0 18px;font-size:12px;color:var(--mute)} .dlm-form[hidden]{display:none} .dlm-h{margin:0 0 8px;font-size:24px;font-weight:500;letter-spacing:-.015em;line-height:1.2;color:var(--ink)} .dlm-p{margin:0 0 16px;font-size:14.5px;line-height:1.6;color:var(--ink-2)} .dlm-p a{color:var(--ink);text-decoration:underline;text-underline-offset:3px} .dlm-res{display:flex;flex-direction:column;gap:2px;margin:0 0 18px;padding:12px 14px;border-radius:10px;background:var(--tint);font-size:14px} .dlm-res span{font-size:12px;color:var(--mute)} .dlm-res strong{font-weight:500;color:var(--ink)} .dlm-l{display:block;margin:0 0 6px;font-size:13px;font-weight:500;color:var(--ink)} .dlm-in{width:100%;box-sizing:border-box;height:50px;padding:0 16px;border:1.5px solid var(--line-2);border-radius:10px;font:inherit;font-size:16px;color:var(--ink);background:#fff;transition:border-color .2s,box-shadow .2s} .dlm-in:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 4px rgba(14,104,255,.14)} .dlm-in[aria-invalid=true]{border-color:#d92d20} .dlm-err{display:block;margin:8px 0 0;font-size:13px;color:#b42318} .dlm-err[hidden]{display:none} .dlm-cb{display:flex;gap:12px;align-items:flex-start;margin:0 0 6px;font-size:13.5px;line-height:1.5;color:var(--ink-2);cursor:pointer} .dlm-cb input{flex:none;width:18px;height:18px;margin-top:2px;accent-color:var(--blue)} .dlm-cb em{color:var(--mute);font-style:normal} .dlm-act{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px} .dlm-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border:0;border-radius:100px;background:var(--blue);color:#fff!important;font:inherit;font-size:15px;font-weight:500;cursor:pointer;text-decoration:none!important;transition:background .2s} .dlm-btn:hover{background:#0a55d6}.dlm-btn:disabled{opacity:.6;cursor:progress} .dlm-btn_ghost{background:transparent;color:var(--ink)!important;box-shadow:inset 0 0 0 1.5px var(--line-2)} .dlm-btn_ghost:hover{background:var(--tint)} .dlm .hp,.rs .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} @media (max-width:520px){.dlm{padding:0;align-items:end}.dlm-dialog{border-radius:16px 16px 0 0;padding:28px 22px 24px;max-height:92vh}.dlm-act .dlm-btn{flex:1}} @media (prefers-reduced-motion:reduce){.dlm-dialog,.dlm-back{transition:none}} /* Sammelseite */ .rs-hero{position:relative;overflow:hidden;background:#0b0f17;color:#fff;padding:150px 0 72px} .rs-hero__grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:44px 44px;-webkit-mask:linear-gradient(180deg,#000 30%,transparent);mask:linear-gradient(180deg,#000 30%,transparent);animation:rsGrid 30s linear infinite} @keyframes rsGrid{to{background-position:44px 44px}} .rs-hero__w{position:relative} .rs-crumbs{display:flex;gap:8px;margin:0 0 28px;font-size:13px;color:#8b919a} .rs-crumbs a{color:#b9bec6;text-decoration:none}.rs-crumbs a:hover{color:#fff} .rs-crumbs_dark{color:var(--mute)}.rs-crumbs_dark a{color:var(--ink-2)}.rs-crumbs_dark a:hover{color:var(--ink)} .rs-eyebrow{margin:0 0 16px;font-size:14px;font-weight:500;color:#6ea2ff} .rs-h1{margin:0 0 20px;max-width:860px;font-size:54px;font-weight:500;letter-spacing:-.025em;line-height:1.08;color:#fff} .rs-lead{margin:0;max-width:680px;font-size:18px;line-height:1.6;color:#b9bec6} .rs-facts{display:flex;flex-wrap:wrap;gap:40px;margin:44px 0 0;padding:28px 0 0;list-style:none;border-top:1px solid rgba(255,255,255,.12)} .rs-facts li{display:flex;flex-direction:column;gap:4px} .rs-facts b{font-size:22px;font-weight:500;color:#fff}.rs-facts span{font-size:13px;color:#8b919a} .rs-sec{padding-top:56px} .rs-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 32px} .rs-filter button{padding:9px 16px;border:1.5px solid var(--line);border-radius:100px;background:#fff;font:inherit;font-size:14px;color:var(--ink-2);cursor:pointer;transition:all .2s} .rs-filter button:hover{border-color:var(--ink)} .rs-filter button.is-on{background:var(--ink);border-color:var(--ink);color:#fff} .rs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:20px} .dlc{display:flex;flex-direction:column;padding:28px;border:1px solid var(--line);border-radius:14px;background:#fff;transition:border-color .25s,box-shadow .25s,transform .25s} .dlc[hidden]{display:none} .dlc:hover{border-color:var(--line-2);box-shadow:0 18px 40px rgba(11,15,23,.08);transform:translateY(-2px)} .dlc__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px} .dlc__ico{display:grid;place-items:center;width:52px;height:52px;border-radius:12px;background:#eef4ff;color:var(--blue);transition:background .25s,color .25s} .dlc:hover .dlc__ico{background:var(--blue);color:#fff} .dlc__fmt{font-size:12px;color:var(--mute)} .dlc__cat{margin:0 0 8px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);font-weight:500} .dlc__t{margin:0 0 10px;font-size:20px;font-weight:500;letter-spacing:-.01em;line-height:1.3;color:var(--ink)} .dlc__p{margin:0 0 18px;font-size:14.5px;line-height:1.6;color:var(--ink-2)} .dlc__pts{margin:0 0 24px;padding:0;list-style:none;display:grid;gap:8px} .dlc__pts li{position:relative;padding-left:26px;font-size:14px;line-height:1.45;color:var(--ink-2)} .dlc__pts li::before{content:"";position:absolute;left:0;top:2px;width:16px;height:16px;border-radius:50%;background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat} .dlc .dlc__btn{margin-top:auto;align-self:flex-start} .rs-note{margin:36px 0 0;font-size:13px;color:var(--mute)} .rs-note a{color:var(--ink-2)} .rs-cta{background:var(--tint);padding:72px 0} .rs-cta__w{display:flex;align-items:center;justify-content:space-between;gap:40px} .rs-cta .rs-eyebrow{color:var(--blue)} .rs-h2{margin:0;max-width:720px;font-size:30px;font-weight:500;letter-spacing:-.02em;line-height:1.25;color:var(--ink)} /* Gate-Seiten */ .rs-gate{padding:150px 0 96px;background:var(--tint)} .rs-gate__w{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start} .rs-gate__w_one{grid-template-columns:minmax(0,760px)} .rs-h1_dark{color:var(--ink);font-size:44px} .rs-lead_dark{color:var(--ink-2);margin-bottom:24px} .rs-gate .rs-eyebrow{color:var(--blue)} .rs-gate__box{transform:none;opacity:1;width:auto;max-height:none} .rs-small{font-size:14px;color:var(--mute)}.rs-small a{color:var(--ink)} @media (max-width:900px){.rs-hero{padding:120px 0 56px}.rs-h1{font-size:36px}.rs-h1_dark{font-size:32px}.rs-grid{grid-template-columns:1fr}.rs-cta__w{flex-direction:column;align-items:flex-start}.rs-gate__w{grid-template-columns:1fr;gap:32px}.rs-gate{padding:120px 0 64px}} @media (prefers-reduced-motion:reduce){.rs-hero__grid{animation:none}.dlc,.dlc__ico{transition:none}} @media (max-width:720px){.dlbox{align-items:start}} .dlm-extra[hidden]{display:none} .dlm-extra .dlm-in{margin-bottom:4px} .dlm-extra .dlm-l,.dlm-extra+.dlm-l{margin-top:12px} .dlm-opt{font-weight:400;color:var(--mute)} /* Downloads: hervorgehobene Leitfäden (29.10.) */ .rs-feat-sec{padding-bottom:8px} .rs-feat__k{font-size:14px;color:var(--blue);margin:0 0 8px} .rs-feat__h{font-size:32px;font-weight:500;line-height:1.2;letter-spacing:-.01em;margin:0 0 28px} .rs-feat__h_sm{font-size:24px;margin-bottom:20px} .rs-feat{display:grid;grid-template-columns:1fr 1fr;gap:20px} .rs-fc{position:relative;overflow:hidden;display:grid;grid-template-columns:150px 1fr;gap:28px;align-items:start;padding:34px;border-radius:20px;background:#0b0f17;color:#fff} .rs-fc__grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:28px 28px;pointer-events:none} .rs-fc__img{position:relative;display:block} .rs-fc__img img{display:block;width:100%;height:auto;transform:rotate(-3deg);filter:drop-shadow(0 16px 24px rgba(0,0,0,.5));transition:transform .3s} .rs-fc:hover .rs-fc__img img{transform:rotate(0) translateY(-4px)} .rs-fc__b{position:relative;display:flex;flex-direction:column;min-width:0} .rs-fc__k{font-size:13px;font-weight:500;color:#6ea2ff;margin:0 0 8px} .rs-fc__t{font-size:23px;font-weight:500;line-height:1.25;margin:0 0 10px;color:#fff} .rs-fc__p{font-size:15px;line-height:1.55;color:#b9bec6;margin:0 0 14px} .rs-fc__pts{list-style:none;padding:0;margin:0 0 16px;display:grid;gap:7px} .rs-fc__pts li{position:relative;padding-left:22px;font-size:14px;line-height:1.45;color:#e6e8eb} .rs-fc__pts li::before{content:"";position:absolute;left:2px;top:5px;width:10px;height:6px;border-left:2px solid #6ea2ff;border-bottom:2px solid #6ea2ff;transform:rotate(-45deg)} .rs-fc__fmt{font-size:12.5px;color:#8a919c;margin:0 0 18px} .rs-fc__acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:auto} .rs-fc__more{font-size:15px;font-weight:500;color:#fff!important;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.4)} .rs-fc__more:hover{text-decoration-color:#fff} .rs-fc .dlc__btn:focus-visible,.rs-fc__more:focus-visible{outline:2px solid #6ea2ff;outline-offset:3px} @media (max-width:1100px){.rs-feat{grid-template-columns:1fr}} @media (max-width:600px){.rs-fc{grid-template-columns:1fr;padding:26px 22px;gap:22px}.rs-fc__img{width:120px}.rs-feat__h{font-size:26px}} @media (prefers-reduced-motion:reduce){.rs-fc__img img{transition:none}.rs-fc:hover .rs-fc__img img{transform:rotate(-3deg)}} /* ---- Grafiken v2 (29.10.2026): karten, kraefte, kurve, ki, zyklus, kreise ---- */ .gx svg{display:block} /* Karten */ .gx-ka__list{list-style:none;margin:0;padding:0!important;display:grid;grid-template-columns:repeat(var(--c),1fr);gap:12px} .gx-ka__i{display:flex;flex-direction:column;gap:6px;padding:18px 18px 16px;border:1px solid var(--line);border-radius:10px;background:#fff;opacity:0;transform:translateY(10px);transition:opacity .45s calc(var(--d)*.09s),transform .6s cubic-bezier(.2,.7,.2,1) calc(var(--d)*.09s),border-color .3s} .gx-ka__ic{display:grid;place-items:center;width:40px;height:40px;margin-bottom:6px;border-radius:9px;background:#eef4ff;color:var(--blue)} .gx-ka__i b{font-size:15px;font-weight:500;color:var(--ink);line-height:1.3} .gx-ka__i>span:last-child{font-size:13.5px;line-height:1.5;color:var(--ink-2)} .gx-ka__i:hover{border-color:#b9cdf7} .gx.is-in .gx-ka__i{opacity:1;transform:none} /* Five Forces */ .gx-kf__grid{position:relative;display:grid;grid-template-columns:1fr 1.1fr 1fr;grid-template-areas:". top ." "left mid right" ". bot .";gap:14px 18px;align-items:stretch} .gx-kf__c{position:relative;z-index:1;display:flex;flex-direction:column;gap:5px;padding:16px;border:1px solid var(--line);border-radius:10px;background:#fff;opacity:0;transform:scale(.96);transition:opacity .45s calc(.25s + var(--d)*.12s),transform .6s cubic-bezier(.2,.7,.2,1) calc(.25s + var(--d)*.12s)} .gx-kf__c--mid{grid-area:mid;background:#0b0f17;color:#fff;border-color:#0b0f17;justify-content:center;transition-delay:0s} .gx-kf__c--top{grid-area:top}.gx-kf__c--left{grid-area:left}.gx-kf__c--right{grid-area:right}.gx-kf__c--bot{grid-area:bot} .gx-kf__ic{color:var(--blue);margin-bottom:2px}.gx-kf__c--mid .gx-kf__ic{color:#fff} .gx-kf__c b{font-size:14.5px;font-weight:500;line-height:1.3} .gx-kf__t{font-size:12.5px;line-height:1.45;color:var(--ink-2)}.gx-kf__c--mid .gx-kf__t{color:rgba(255,255,255,.75)} .gx-kf__dots{display:flex;gap:4px;margin-top:6px} .gx-kf__dots i{width:18px;height:6px;border-radius:3px;background:#e3e6ea;transition:background .3s calc(.9s + var(--d)*.12s + var(--i)*.08s)} .gx.is-in .gx-kf__dots i.on{background:var(--blue)} .gx-kf__c--mid .gx-kf__dots i{background:rgba(255,255,255,.2)}.gx.is-in .gx-kf__c--mid .gx-kf__dots i.on{background:#fff} .gx-kf__w{font-size:11.5px;color:var(--mute)}.gx-kf__c--mid .gx-kf__w{color:rgba(255,255,255,.6)} .gx-kf__ar{display:none} .gx-kf__ar--t,.gx-kf__ar--b{left:50%;width:2px;height:14px;transform:translateX(-50%)} .gx-kf__ar--l,.gx-kf__ar--r{top:50%;height:2px;width:18px;transform:translateY(-50%)} .gx-kf__ar--t{top:calc(33.3% - 7px)}.gx-kf__ar--b{bottom:calc(33.3% - 7px)} .gx-kf__ar--l{left:calc(31.25% - 9px)}.gx-kf__ar--r{right:calc(31.25% - 9px)} .gx.is-in .gx-kf__c{opacity:1;transform:none}.gx.is-in .gx-kf__ar{opacity:1} /* U-Kurve */ .gx-ku__chart{position:relative;padding:0 0 22px 22px} .gx-ku__chart svg{width:100%;height:auto;max-height:260px;overflow:visible} .gx-ku__ax{fill:none;stroke:#d6dae0;stroke-width:1.5} .gx-ku__line{fill:none;stroke:var(--blue);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s cubic-bezier(.4,0,.2,1) .2s} .gx-ku__p circle{fill:#fff;stroke:var(--blue);stroke-width:3;opacity:0;transition:opacity .35s calc(1.1s + var(--d)*.2s)} .gx-ku__p.is-risk circle{stroke:#0b0f17;fill:#ffd84d} .gx-ku__y{position:absolute;left:0;top:50%;transform:rotate(-90deg) translateX(50%);transform-origin:0 0;font-size:11.5px;color:var(--mute);white-space:nowrap} .gx-ku__x{position:absolute;right:0;bottom:0;font-size:11.5px;color:var(--mute)} .gx-ku__legend{list-style:none;margin:16px 0 0;padding:0!important;display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .gx-ku__l{padding:12px 14px;border-radius:8px;background:var(--tint);opacity:0;transition:opacity .4s calc(1.2s + var(--d)*.2s)} .gx-ku__l b{display:block;font-size:14px;font-weight:500;color:var(--ink);margin-bottom:3px} .gx-ku__l span{font-size:13px;line-height:1.45;color:var(--ink-2)} .gx-ku__l.is-risk{background:#fff8dc} .gx.is-in .gx-ku__line{stroke-dashoffset:0}.gx.is-in .gx-ku__p circle,.gx.is-in .gx-ku__l{opacity:1} /* KI-Antwort */ .gx-ki__win{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fafbfc} .gx-ki__bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line);background:#fff;font-size:12px;color:var(--mute)} .gx-ki__bar i{width:9px;height:9px;border-radius:50%;background:#e3e6ea}.gx-ki__bar span{margin-left:8px} .gx-ki__body{padding:20px;display:flex;flex-direction:column;gap:14px} .gx-ki__q{align-self:flex-end;max-width:80%;margin:0;padding:11px 15px;border-radius:14px 14px 4px 14px;background:#0b0f17;color:#fff;font-size:14px;line-height:1.45;opacity:0;transform:translateY(8px);transition:opacity .4s .1s,transform .5s .1s} .gx-ki__a{display:flex;gap:10px;align-items:flex-start} .gx-ki__av{flex:none;width:26px;height:26px;border-radius:50%;background:#0b0f17;position:relative} .gx-ki__av::after{content:"";position:absolute;inset:8px;border-radius:50%;background:#fff} .gx-ki__txt{position:relative;flex:1;padding:14px 16px;border-radius:4px 14px 14px 14px;background:#fff;border:1px solid var(--line);font-size:14px;line-height:1.55;color:var(--ink-2)} .gx-ki__txt>p{margin:0 0 10px;opacity:0;transition:opacity .4s 1.3s} .gx-ki__typing{position:absolute;left:16px;top:18px;display:flex;gap:4px;opacity:0;transition:opacity .2s .5s} .gx-ki__typing i{width:6px;height:6px;border-radius:50%;background:#b4bac3;animation:gxdot 1s infinite} .gx-ki__typing i:nth-child(2){animation-delay:.15s}.gx-ki__typing i:nth-child(3){animation-delay:.3s} @keyframes gxdot{0%,80%,100%{opacity:.3}40%{opacity:1}} .gx-ki__hits{list-style:none;margin:0;padding:0!important;display:grid;gap:6px;counter-reset:h} .gx-ki__hit{counter-increment:h;position:relative;padding:8px 10px 8px 34px;border-radius:6px;background:var(--tint);font-size:13.5px;opacity:0;transform:translateY(6px);transition:opacity .4s calc(1.5s + var(--d)*.25s),transform .5s calc(1.5s + var(--d)*.25s)} .gx-ki__hit::before{content:counter(h);position:absolute;left:10px;top:8px;width:16px;height:16px;border-radius:4px;background:#fff;font-size:11px;font-weight:600;text-align:center;line-height:16px;color:var(--mute)} .gx-ki__hit b{color:var(--ink);font-weight:500} .gx-ki__hit.is-you{background:#eef4ff;box-shadow:inset 0 0 0 1px rgba(14,104,255,.35)} .gx-ki__hit.is-you b{color:var(--blue)}.gx-ki__hit.is-you::before{background:var(--blue);color:#fff} .gx-ki__src{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px} .gx-ki__src span{padding:2px 9px;border:1px solid var(--line);border-radius:100px;font-size:11.5px;color:var(--mute);opacity:0;transition:opacity .3s calc(2.3s + var(--d)*.12s)} .gx-ki__src span:first-child{color:var(--blue);border-color:rgba(14,104,255,.35)} .gx.is-in .gx-ki__q{opacity:1;transform:none} .gx.is-in .gx-ki__typing{opacity:1;animation:gxhide 0s 1.25s forwards} @keyframes gxhide{to{opacity:0;visibility:hidden}} .gx.is-in .gx-ki__txt>p,.gx.is-in .gx-ki__hit,.gx.is-in .gx-ki__src span{opacity:1;transform:none} /* Zyklus */ .gx-zy__wrap{display:grid;grid-template-columns:200px 1fr;gap:28px;align-items:center} .gx-zy__ring{position:relative;width:200px;height:200px} .gx-zy__ring svg{width:100%;height:100%;transform:rotate(-90deg)} .gx-zy__bg{fill:none;stroke:#eef0f3;stroke-width:14} .gx-zy__fg{fill:none;stroke:var(--blue);stroke-width:14;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1) .2s} .gx-zy__mid{position:absolute;inset:34px;display:grid;place-items:center;text-align:center;font-size:14px;font-weight:500;line-height:1.3;color:var(--ink)} .gx-zy__list{list-style:none;margin:0;padding:0!important;display:grid;gap:12px} .gx-zy__i{display:grid;grid-template-columns:34px 1fr;column-gap:12px;opacity:.3;transition:opacity .4s calc(.3s + var(--d)*.3s)} .gx-zy__n{grid-row:span 2;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:2px solid var(--line);font-size:12px;font-weight:600;color:var(--mute);transition:all .3s calc(.3s + var(--d)*.3s)} .gx-zy__i b{font-size:15px;font-weight:500;color:var(--ink)} .gx-zy__i>span:last-child{font-size:13.5px;line-height:1.5;color:var(--ink-2)} .gx.is-in .gx-zy__fg{stroke-dashoffset:0}.gx.is-in .gx-zy__i{opacity:1} .gx.is-in .gx-zy__n{background:var(--blue);border-color:var(--blue);color:#fff} /* Kreise (TAM/SAM/SOM) */ .gx-kr__wrap{display:grid;grid-template-columns:240px 1fr;gap:28px;align-items:center} .gx-kr__vis{position:relative;width:240px;height:240px} .gx-kr__c{position:absolute;left:50%;bottom:0;width:var(--s);aspect-ratio:1;border-radius:50%;transform:translateX(-50%) scale(.6);opacity:0;display:flex;justify-content:center;padding-top:10px;box-sizing:border-box;transition:opacity .45s calc(var(--d)*.25s),transform .7s cubic-bezier(.2,.7,.2,1) calc(var(--d)*.25s)} .gx-kr__c:nth-child(1){background:#eef4ff;border:1px solid #d3e1fb} .gx-kr__c:nth-child(2){background:#cfdffd} .gx-kr__c:nth-child(3){background:var(--blue);color:#fff;align-items:center;padding:0} .gx-kr__c b{font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--ink)}.gx-kr__c:nth-child(3) b{color:#fff} .gx-kr__legend{list-style:none;margin:0;padding:0!important;display:grid;gap:10px} .gx-kr__legend li{display:grid;grid-template-columns:48px 1fr auto;gap:12px;align-items:center;padding:12px 14px;border-radius:8px;background:var(--tint);opacity:0;transform:translateX(10px);transition:opacity .4s calc(.3s + var(--d)*.25s),transform .5s calc(.3s + var(--d)*.25s)} .gx-kr__k{font-size:12.5px;font-weight:600;color:var(--blue)} .gx-kr__lab{font-size:13.5px;line-height:1.4;color:var(--ink-2)} .gx-kr__v{font-size:16px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap} .gx-kr__legend li:last-child{background:#0b0f17}.gx-kr__legend li:last-child .gx-kr__lab{color:rgba(255,255,255,.75)}.gx-kr__legend li:last-child .gx-kr__v{color:#fff}.gx-kr__legend li:last-child .gx-kr__k{color:#9cc0ff} .gx.is-in .gx-kr__c{opacity:1;transform:translateX(-50%) scale(1)}.gx.is-in .gx-kr__legend li{opacity:1;transform:none} .mz-body .gx .gx-ka__i{padding-left:18px}.mz-body .gx .gx-ki__hit{padding-left:34px}.mz-body .gx .gx-zy__i{padding-left:0}.mz-body .gx .gx-kr__legend li,.mz-body .gx .gx-ku__l{padding-left:14px} .gx-ka__i::marker,.gx-zy__i::marker,.gx-ki__hit::marker,.gx-kr__legend li::marker,.gx-ku__l::marker{content:none} @media (max-width:760px){ .gx-ka__list{grid-template-columns:1fr} .gx-kf__grid{grid-template-columns:1fr;grid-template-areas:"mid" "top" "left" "right" "bot";gap:10px} .gx-ku__legend{grid-template-columns:1fr} .gx-ki__body{padding:14px}.gx-ki__q{max-width:92%} .gx-zy__wrap,.gx-kr__wrap{grid-template-columns:1fr;justify-items:center} .gx-zy__ring{width:170px;height:170px}.gx-zy__mid{inset:28px;font-size:13px} .gx-kr__vis{width:200px;height:200px} .gx-zy__list,.gx-kr__legend{width:100%} } @media (prefers-reduced-motion:reduce){.gx-ki__typing{display:none}} .gx-zy__dot{fill:#fff;stroke:var(--blue);stroke-width:3;opacity:0;transition:opacity .3s calc(.3s + var(--d)*.3s)}.gx.is-in .gx-zy__dot{opacity:1} .dlm-wa{display:flex;align-items:center;gap:.5rem;margin:.5rem 0 0;font-size:.85rem;line-height:1.35;color:var(--mute)} .dlm-wa svg{flex:none} /* about.css */ /* ============ Unternehmensbereich: Über uns + Werte (Präfixe ab-, we-) ============ */ .ab .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .ab-h2{font-size:44px;line-height:1.1;letter-spacing:-.03em;font-weight:500;color:var(--ink);margin:0 0 28px;text-transform:none} .ab-p{font-size:18px;line-height:1.7;color:var(--ink-2);margin:0 0 20px} .ab-label-w{color:#8fb6ff!important} .ab-btn-w{background:#fff;color:var(--ink)} .ab-btn-w:hover{background:#e9ecf1;color:var(--ink)} .ab-btn-o{display:inline-flex;align-items:center;gap:10px;padding:15px 22px;border:1px solid rgba(255,255,255,.55);color:#fff;border-radius:var(--r);font-weight:500;font-size:16px;text-decoration:none;transition:background .2s,border-color .2s} .ab-btn-o:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff} /* Scroll-Reveal */ .ab-js .ab [data-io]{opacity:0;transform:translate3d(0,18px,0);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*.08s)} .ab-js .ab [data-io].is-in{opacity:1;transform:none} /* 1 Hero */ .ab-hero{position:relative;min-height:min(88vh,820px);display:flex;align-items:center;color:#fff;overflow:hidden;background:var(--ink)} .ab-hero__media{position:absolute;top:0;bottom:0;right:0;width:56%;height:100%;overflow:hidden} .ab-hero__media img{display:block;height:100%!important;max-width:none} .ab-hero__img{width:100%;height:100%;object-fit:cover;object-position:60% 30%;filter:grayscale(1) contrast(1.05);transform:scale(1.04);animation:abZoom 14s ease-out forwards} @keyframes abZoom{to{transform:scale(1)}} .ab-hero__shade{position:absolute;top:0;bottom:0;right:0;width:56%;background:linear-gradient(90deg,#0b0f17 0,rgba(11,15,23,.7) 12%,rgba(11,15,23,0) 40%),linear-gradient(180deg,rgba(11,15,23,.45) 0,transparent 25%)} .ab-hero__w{position:relative;z-index:1;padding-top:140px;padding-bottom:80px;width:100%} .ab-eyebrow{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#fff;font-weight:500;margin:0 0 20px;display:flex;align-items:center;gap:12px} .ab-eyebrow::before{content:"";width:32px;height:2px;background:#0E68FF} .ab-h1{font-size:58px;line-height:1.05;letter-spacing:-.04em;font-weight:500;color:#fff;margin:0 0 26px;max-width:540px;text-transform:none} .ab-lead{font-size:18px;line-height:1.6;color:rgba(255,255,255,.8);max-width:500px;margin:0 0 36px} .ab-hero__cta{display:flex;flex-wrap:wrap;gap:12px} .ab-tone{background:var(--ink);color:#fff;border-top:1px solid rgba(255,255,255,.1)} .ab-tone__w{display:flex;flex-wrap:wrap;gap:8px 40px;padding-top:22px;padding-bottom:22px} .ab-tone span{font-size:18px;font-weight:500;letter-spacing:-.01em} .ab-tone span:nth-child(1){color:#8fb6ff}.ab-tone span:nth-child(2){color:#c4a8ff}.ab-tone span:nth-child(3){color:#ff9ea1} /* 2 Statement */ .ab-statement{padding:136px 0 120px} .ab-statement__h{font-size:54px;line-height:1.12;letter-spacing:-.035em;font-weight:500;color:var(--ink);margin:0 0 56px;max-width:1120px;text-transform:none} .ab-statement__cols{display:grid;grid-template-columns:1fr 1fr;gap:48px;max-width:1120px;padding-top:40px;border-top:1px solid var(--line)} .ab-statement__cols p{font-size:19px;line-height:1.7;color:var(--ink-2);margin:0} /* 3 Geschichte */ .ab-story{padding:0 0 128px} .ab-story__w{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:80px;align-items:start} .ab-story__img{position:sticky;top:110px;margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;background:#e9ebee} .ab-story__img img{width:100%;height:100%;object-fit:cover} .ab-story__list{list-style:none;margin:8px 0 0;padding:0;counter-reset:st} .ab-story__list li{position:relative;padding:28px 0 28px 64px;border-top:1px solid var(--line);counter-increment:st} .ab-story__list li::before{content:counter(st,decimal-leading-zero);position:absolute;left:0;top:30px;font-size:14px;font-weight:500;color:var(--blue)} .ab-story__list h3{font-size:22px;font-weight:500;letter-spacing:-.015em;margin:0 0 10px;text-transform:none} .ab-story__list p{font-size:17px;line-height:1.7;color:var(--ink-2);margin:0} /* 4 Gründer */ .ab-founder{padding:120px 0;background:#f5f6f7} .ab-founder__w{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:80px;align-items:center} .ab-founder__pts{list-style:none;margin:28px 0 32px;padding:0;display:flex;flex-wrap:wrap;gap:8px} .ab-founder__pts li{font-size:14px;padding:8px 14px;border:1px solid var(--line-2);border-radius:999px;background:#fff;color:var(--ink)} .ab-founder__q{margin:0 0 28px;padding-left:24px;border-left:3px solid var(--blue)} .ab-founder__q blockquote{margin:0;padding:0;border:0} .ab-founder__q p{font-size:24px;line-height:1.4;font-weight:500;color:var(--ink);margin:0 0 8px} .ab-founder__q figcaption{font-size:14px;color:var(--mute)} .ab-founder .bx-draft{margin:0 0 24px} .ab-founder__img{position:relative;margin:0} .ab-founder__img img{display:block;width:100%;height:auto;border-radius:var(--r);filter:grayscale(1)} .ab-founder__img::before{content:"";position:absolute;inset:16px -16px -16px 16px;border-radius:var(--r);background:#0E68FF;z-index:-1} .ab-founder__img{z-index:0} .ab-founder__img figcaption{position:absolute;left:-20px;bottom:24px;background:var(--ink);color:rgba(255,255,255,.7);padding:12px 16px;border-radius:var(--r);font-size:13px} .ab-founder__img figcaption b{display:block;color:#fff;font-size:15px;font-weight:500} /* 5 Arbeitsweise */ .ab-work{padding:128px 0} .ab-work__h{max-width:900px;margin-bottom:56px} .ab-work__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ink)} .ab-work__list li{padding:32px 28px 8px 0;border-right:1px solid var(--line);margin-right:28px} .ab-work__list li:last-child{border-right:0;margin-right:0} .ab-work__n{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--ink);font-size:15px;font-weight:500;margin-bottom:24px} .ab-work__list h3{font-size:22px;font-weight:500;letter-spacing:-.015em;margin:0 0 12px;text-transform:none} .ab-work__list p{font-size:16px;line-height:1.6;color:var(--ink-2);margin:0 0 16px} .ab-work__ex{font-size:15px!important;color:var(--ink)!important;padding-top:14px;border-top:1px dashed var(--line-2)} .ab-work__ex b{font-weight:500;color:var(--blue)} /* 6 Werte-Vorschau */ .ab-values{padding:120px 0 128px;background:var(--ink);color:#fff} .ab-values .ab-h2{color:#fff;max-width:760px;margin:0} .ab-values__top{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:56px;flex-wrap:wrap} .ab-vals{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12)} .ab-val{background:var(--ink)} .ab-val a{position:relative;display:flex;flex-direction:column;height:100%;padding:36px 32px;color:#fff;text-decoration:none;overflow:hidden;transition:background .3s} .ab-val a::after{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--c);transition:width .5s ease} .ab-val a:hover{background:#121826} .ab-val a:hover::after,.ab-val.is-in a::after{width:64px} .ab-val__n{font-size:64px;line-height:1;font-weight:500;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.35);margin-bottom:28px;transition:color .3s} .ab-val a:hover .ab-val__n{color:var(--c);-webkit-text-stroke-color:var(--c)} .ab-val h3{font-size:24px;line-height:1.2;font-weight:500;letter-spacing:-.02em;margin:0 0 12px;color:#fff;text-transform:none} .ab-val p{font-size:16px;line-height:1.6;color:rgba(255,255,255,.7);margin:0} .ab-val_1{grid-column:span 3}.ab-val_2{grid-column:span 3} .ab-val_3,.ab-val_4,.ab-val_5{grid-column:span 2} .ab-val_6{grid-column:span 6} .ab-val_1 h3,.ab-val_2 h3{font-size:30px} .ab-val_6 a{flex-direction:row;align-items:center;gap:40px} .ab-val_6 .ab-val__n{margin:0} .ab-val_6 h3{margin:0;min-width:260px} .ab-val_6 a{--c:#fff} /* 7 Werte im Alltag */ .ab-daily{padding:128px 0} .ab-daily .ab-h2{max-width:820px;margin-bottom:48px} .ab-daily__head,.ab-daily__list li{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(0,1fr);gap:32px} .ab-daily__head{padding-bottom:14px;border-bottom:1px solid var(--ink);font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:500} .ab-daily__head span:nth-child(2){color:var(--blue)} .ab-daily__head span:nth-child(3){color:var(--mute)} .ab-daily__list{list-style:none;margin:0;padding:0} .ab-daily__list li{padding:26px 0;border-bottom:1px solid var(--line);align-items:start} .ab-daily__s{font-size:20px;font-weight:500;letter-spacing:-.015em;color:var(--ink);margin:0} .ab-daily__y{position:relative;font-size:17px;line-height:1.55;color:var(--ink);margin:0;padding-left:30px} .ab-daily__y::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;background:#eef4ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' fill='none' stroke='%230E68FF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat} .ab-daily__no{position:relative;font-size:17px;line-height:1.55;color:var(--mute);margin:0;padding-left:30px;text-decoration:line-through;text-decoration-color:rgba(229,72,77,.5);text-decoration-thickness:1px} .ab-daily__no::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;background:#fdeeee url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 5l6 6M11 5l-6 6' fill='none' stroke='%23e5484d' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/11px no-repeat} /* 8 Team */ .ab-team{padding:120px 0;background:#f5f6f7} .ab-team__top{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:64px;align-items:end;margin-bottom:48px} .ab-team__top .ab-h2{margin:0}.ab-team__top .ab-p{margin:0} .ab-team__big{margin:0 0 56px;border-radius:var(--r);overflow:hidden;aspect-ratio:16/8;background:#e3e6ea} .ab-team__big img{width:100%;height:100%;object-fit:cover;object-position:50% 22%} .ab-areas{list-style:none;margin:0 0 48px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px} .ab-areas__img{aspect-ratio:3/2;border-radius:var(--r);overflow:hidden;margin-bottom:18px;background:#e3e6ea} .ab-areas__img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .5s,transform .6s} .ab-areas li:hover .ab-areas__img img{filter:none;transform:scale(1.03)} .ab-areas h3{font-size:20px;font-weight:500;letter-spacing:-.015em;margin:0 0 8px;text-transform:none} .ab-areas p{font-size:15px;line-height:1.55;color:var(--ink-2);margin:0} .ab-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .ab-gallery figure{margin:0;aspect-ratio:1;border-radius:var(--r);overflow:hidden;background:#e3e6ea} .ab-gallery img{width:100%;height:100%;object-fit:cover} /* 9 Presse */ .ab-press{padding:120px 0} /* 10 Standort */ .ab-place{padding:0 0 120px} .ab-place__w{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:72px;align-items:center} .ab-place__img{margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background:#e3e6ea} .ab-place__img img{width:100%;height:100%;object-fit:cover} .ab-addr{font-style:normal;font-size:17px;line-height:1.7;color:var(--ink);margin:0 0 24px;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .ab-addr a{color:var(--ink);text-decoration:none}.ab-addr a:hover{color:var(--blue)} /* 11 Abschluss */ .ab-end{padding:0 0 112px} .ab-end__w{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;padding:56px;border-radius:var(--r);color:#fff; background:radial-gradient(120% 140% at 100% 0,rgba(14,104,255,.55) 0,rgba(14,104,255,0) 55%),var(--ink)} .ab-end__h{font-size:44px;line-height:1.1;letter-spacing:-.03em;font-weight:500;color:#fff;margin:0 0 12px;text-transform:none} .ab-end p{font-size:17px;line-height:1.55;color:rgba(255,255,255,.75);margin:0;max-width:560px} .ab-end__btns{display:flex;flex-wrap:wrap;gap:12px} /* ===== Werteseite ===== */ .we-hero{padding:136px 0 64px;background:#f5f6f7} .we-h1{font-size:68px;line-height:1.03;letter-spacing:-.04em;font-weight:500;color:var(--ink);margin:0 0 24px;max-width:900px;text-transform:none} .we-lead{font-size:20px;line-height:1.6;color:var(--ink-2);max-width:760px;margin:0 0 44px} .we-index{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)} .we-index a{display:flex;align-items:center;gap:16px;padding:20px 22px;background:#fff;color:var(--ink);text-decoration:none;font-size:17px;font-weight:500;transition:background .2s} .we-index a span{font-size:13px;color:var(--c);font-weight:500;min-width:20px} .we-index a:hover{background:#fafbfc} .we-list{counter-reset:none} .we-val{padding:112px 0;border-bottom:1px solid var(--line);scroll-margin-top:80px} .we-val_alt{background:#fafbfc} .we-val__w{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;align-items:start} .we-val_alt .we-val__head{order:2} .we-val__n{display:block;font-size:150px;line-height:.85;font-weight:500;letter-spacing:-.06em;color:var(--c);margin-bottom:24px;opacity:.95} .we-val:nth-child(6) .we-val__n{color:var(--ink)} .we-val__head h2{font-size:48px;line-height:1.05;letter-spacing:-.035em;font-weight:500;margin:0 0 18px;text-transform:none} .we-val__s{font-size:22px;line-height:1.45;color:var(--ink);margin:0;max-width:520px} .we-val__body{padding-top:24px} .we-val__long{font-size:19px;line-height:1.7;color:var(--ink-2);margin:0 0 28px} .we-val__do{list-style:none;margin:0 0 28px;padding:0;border-top:1px solid var(--line)} .we-val__do li{position:relative;padding:14px 0 14px 28px;border-bottom:1px solid var(--line);font-size:17px;color:var(--ink)} .we-val__do li::before{content:"";position:absolute;left:0;top:23px;width:12px;height:2px;background:var(--c)} .we-val__ex{font-size:17px;line-height:1.6;color:var(--ink);margin:0;padding:20px 22px;background:#fff;border:1px solid var(--line);border-left:3px solid var(--c);border-radius:var(--r)} .we-val__ex b{font-weight:500} .we-balance{padding:120px 0} .we-balance__w{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:80px;align-items:start} .we-not{padding:36px;background:var(--ink);color:#fff;border-radius:var(--r)} .we-not h3{font-size:24px;font-weight:500;margin:0 0 20px;color:#fff;text-transform:none} .we-not ul{list-style:none;margin:0;padding:0} .we-not li{position:relative;padding:12px 0 12px 30px;border-top:1px solid rgba(255,255,255,.12);font-size:16px;color:rgba(255,255,255,.8)} .we-not li::before{content:"";position:absolute;left:0;top:16px;width:16px;height:16px;border-radius:50%;background:rgba(229,72,77,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 5l6 6M11 5l-6 6' fill='none' stroke='%23ff8a8e' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/10px no-repeat} /* ===== Responsive ===== */ @media (max-width:1100px){ .ab-h1{font-size:46px}.ab-hero__media,.ab-hero__shade{width:55%}.ab-h2{font-size:36px} .ab-statement__h{font-size:40px} .ab-story__w,.ab-founder__w,.ab-place__w,.we-balance__w{gap:48px} .ab-work__list{grid-template-columns:repeat(2,minmax(0,1fr))} .ab-work__list li:nth-child(2){border-right:0;margin-right:0} .ab-work__list li:nth-child(n+3){border-top:1px solid var(--line)} .ab-vals{grid-template-columns:repeat(2,1fr)} .ab-val_1,.ab-val_2,.ab-val_3,.ab-val_4,.ab-val_5{grid-column:span 1} .ab-val_6{grid-column:span 2} .ab-areas{grid-template-columns:repeat(2,minmax(0,1fr))} .we-val__n{font-size:110px} .we-h1{font-size:52px} } @media (max-width:800px){ .ab-hero{min-height:auto} .ab-hero__w{padding-top:330px;padding-bottom:44px} .ab-hero__media,.ab-hero__shade{width:100%;height:360px!important;bottom:auto} .ab-hero__shade{background:linear-gradient(180deg,rgba(11,15,23,.4) 0,transparent 30%,transparent 60%,#0b0f17 100%)} .ab-hero__img{object-position:55% 25%} .ab-h1{font-size:38px} .ab-lead{font-size:17px} .ab-h2{font-size:30px} .ab-tone span{font-size:16px} .ab-statement{padding:80px 0} .ab-statement__h{font-size:30px;margin-bottom:32px} .ab-statement__cols{grid-template-columns:1fr;gap:20px;padding-top:28px} .ab-statement__cols p{font-size:17px} .ab-story{padding-bottom:80px} .ab-story__w,.ab-founder__w,.ab-place__w,.ab-team__top,.we-val__w,.we-balance__w{grid-template-columns:1fr;gap:36px} .ab-story__img{position:static;aspect-ratio:4/3} .ab-story__list li{padding-left:44px} .ab-founder,.ab-work,.ab-values,.ab-daily,.ab-team,.ab-press,.we-val,.we-balance{padding:80px 0} .ab-founder__img{max-width:420px;margin-right:16px} .ab-founder__img figcaption{left:12px} .ab-work__list{grid-template-columns:1fr} .ab-work__list li{border-right:0;margin-right:0;border-top:1px solid var(--line)} .ab-work__list li:first-child{border-top:0} .ab-vals{grid-template-columns:1fr} .ab-val_6{grid-column:span 1} .ab-val_6 a{flex-direction:column;align-items:flex-start;gap:0} .ab-val_6 .ab-val__n{margin-bottom:28px}.ab-val_6 h3{margin-bottom:12px;min-width:0} .ab-val_1 h3,.ab-val_2 h3{font-size:24px} .ab-daily__head{display:none} .ab-daily__list li{grid-template-columns:1fr;gap:10px} .ab-team__big{aspect-ratio:4/3} .ab-areas{grid-template-columns:1fr} .ab-gallery{grid-template-columns:repeat(2,1fr)} .ab-place{padding-bottom:80px} .ab-end__w{flex-direction:column;align-items:flex-start;padding:32px 24px} .ab-end__h{font-size:30px} .we-hero{padding:104px 0 48px} .we-h1{font-size:38px} .we-lead{font-size:17px} .we-index{grid-template-columns:1fr} .we-val_alt .we-val__head{order:0} .we-val__n{font-size:84px} .we-val__head h2{font-size:32px} .we-val__s{font-size:19px} .we-val__body{padding-top:0} } @media (prefers-reduced-motion:reduce){ .ab-hero__img{animation:none;transform:none} .ab-js .ab [data-io]{opacity:1;transform:none;transition:none} .ab-val a::after,.ab-areas__img img{transition:none} } .ab-team__job{margin-top:18px} /* Teammitglieder (29.10., Fotos von philpoosch.de, ein Sprite) */ .ab-people__h{font-size:24px;font-weight:500;letter-spacing:-.015em;margin:0 0 24px;text-transform:none} .ab-people{list-style:none;margin:0 0 64px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:28px 20px} .ab-people li{display:flex;flex-direction:column;min-width:0} .ab-people__img{display:block;aspect-ratio:4/5;border-radius:var(--r);background-color:#e3e6ea;background-image:var(--img);background-size:calc(var(--n) * 100%) 100%;background-repeat:no-repeat;margin-bottom:14px;filter:grayscale(1);transition:filter .5s} .ab-people li:hover .ab-people__img{filter:none} .ab-people__n{font-size:17px;font-weight:500;letter-spacing:-.01em;line-height:1.3} .ab-people__r{font-size:14px;color:var(--ink-2);line-height:1.4;margin-top:2px} @media (max-width:700px){.ab-people{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px}.ab-people__n{font-size:15.5px}.ab-people__r{font-size:13px}} @media (hover:none){.ab-people__img{filter:none}} @media (prefers-reduced-motion:reduce){.ab-people__img{transition:none}} @media (min-width:1101px){.ab-people{grid-template-columns:repeat(7,minmax(0,1fr));gap:28px 16px}.ab-people__n{font-size:16px}.ab-people__r{font-size:13.5px}} @media (min-width:701px) and (max-width:1100px){.ab-people{grid-template-columns:repeat(4,minmax(0,1fr))}} /* presse.css */ /* ============ Presseseite /presse/ (Präfix prs-, 31.10.2026). Baut auf about.css (ab-) auf. ============ */ .prs .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .prs-hero .ab-hero__img{object-position:70% 40%} .prs-crumbs{display:flex;gap:8px;font-size:13px;color:rgba(255,255,255,.55);margin:0 0 28px} .prs-crumbs a{color:rgba(255,255,255,.75);text-decoration:none}.prs-crumbs a:hover{color:#fff} .prs-hero .ab-btn-o svg{margin-right:2px} /* Sprungleiste */ .prs-jump{position:relative;z-index:2;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)} .prs-jump__w{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-top:12px;padding-bottom:12px} .prs-jump__w::-webkit-scrollbar{display:none} .prs-jump a{flex:0 0 auto;font-size:14px;color:var(--ink-2);text-decoration:none;padding:8px 14px;border-radius:999px;transition:background .2s,color .2s} .prs-jump a:hover{background:#f1f3f5;color:var(--ink)} html:has(.prs){scroll-padding-top:110px} /* Kopfzeile je Abschnitt */ .prs-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-bottom:48px} .prs-head .ab-h2{margin:0;max-width:720px} .prs-head__meta{margin:0;font-size:14px;color:var(--mute)} .prs-sub{font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;color:var(--mute);margin:56px 0 18px} .prs-note{font-size:14px;line-height:1.6;color:var(--mute);margin:18px 0 0;max-width:760px} .prs-typ{display:inline-flex;align-items:center;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;font-weight:500;color:var(--ink);background:#f1f3f5;border-radius:999px;padding:4px 9px;line-height:1} /* 2 Pressekontakt */ .prs-contact{padding:120px 0} .prs-contact__w{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:80px;align-items:center} .prs-contact .ab-p{max-width:520px} .prs-card{display:grid;grid-template-columns:220px 1fr;gap:0;background:#f5f6f7;border-radius:var(--r);overflow:hidden} .prs-card__fig{position:relative;margin:0;min-height:300px} .prs-card__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;filter:grayscale(1) contrast(1.04)} .prs-card__body{padding:36px} .prs-card__name{font-size:26px;line-height:1.15;letter-spacing:-.02em;font-weight:500;margin:0 0 4px;color:var(--ink)} .prs-card__role{font-size:14px;color:var(--mute);margin:0 0 18px} .prs-card__text{font-size:15.5px;line-height:1.6;color:var(--ink-2);margin:0 0 24px} .prs-card__mail{display:inline-flex;align-items:center;gap:10px;font-size:16px;font-weight:500;color:#fff;background:var(--ink);text-decoration:none;padding:13px 20px;border-radius:999px;transition:background .2s;max-width:100%} .prs-card__mail span{overflow:hidden;text-overflow:ellipsis} .prs-card__mail:hover{background:#0E68FF;color:#fff} .prs-card__hours{font-size:13px;color:var(--mute);margin:14px 0 0} /* 3 Berichte */ .prs-news{padding:0 0 120px} .prs-feat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:0;border-radius:var(--r);overflow:hidden;background:var(--ink);color:#fff;text-decoration:none;margin-bottom:40px} .prs-feat__img{margin:0;overflow:hidden;min-height:360px} .prs-feat__img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:transform .8s cubic-bezier(.2,.7,.2,1)} .prs-feat:hover .prs-feat__img img{transform:scale(1.03)} .prs-feat__body{padding:48px 52px;display:flex;flex-direction:column;justify-content:center} .prs-meta{display:flex;align-items:center;gap:12px;font-size:14px;color:rgba(255,255,255,.65);margin:0 0 18px} .prs-feat .prs-typ{background:#ffd84d;color:var(--ink)} .prs-feat__t{font-size:32px;line-height:1.15;letter-spacing:-.025em;font-weight:500;color:#fff;margin:0 0 22px;text-transform:none} .prs-feat__q{margin:0 0 18px;padding:0 0 0 18px;border-left:2px solid #0E68FF;font-size:19px;line-height:1.45;color:#fff} .prs-feat__q cite{display:block;font-style:normal;font-size:13px;color:rgba(255,255,255,.55);margin-top:8px} .prs-feat__x{font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.72);margin:0 0 26px} .prs-more{display:inline-flex;align-items:center;gap:10px;font-weight:500;font-size:15px;color:#fff;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:4px;align-self:flex-start;transition:border-color .2s} .prs-feat:hover .prs-more{border-color:#fff} .prs-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)} .prs-list li{border-bottom:1px solid var(--line)} .prs-list a{display:grid;grid-template-columns:120px 230px 1fr 32px;gap:28px;align-items:center;padding:22px 4px;color:var(--ink);text-decoration:none;position:relative;transition:background .25s} .prs-list a:hover{background:#f7f8f9} .prs-list__d{font-size:14px;color:var(--mute);font-variant-numeric:tabular-nums} .prs-list__s{display:flex;flex-direction:column;align-items:flex-start;gap:7px;font-size:15.5px;font-weight:500} .prs-list__t{font-size:18px;line-height:1.4;letter-spacing:-.01em;transition:color .2s} .prs-list a:hover .prs-list__t{color:#0E68FF} .prs-list__go{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s,color .2s} .prs-list a:hover .prs-list__go{background:var(--ink);border-color:var(--ink);color:#fff} /* 4 Themen (dunkel) */ .prs-topics{padding:120px 0;background:var(--ink);color:#fff} .prs-topics__w{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:80px;align-items:start} .prs-topics .ab-h2{color:#fff} .prs-topics .ab-p{color:rgba(255,255,255,.72);max-width:460px} .prs-topics__intro{position:sticky;top:120px} .prs-topics__intro .cx-btn{margin-top:8px} .prs-topics__bio{display:flex;align-items:center;gap:10px;margin-top:22px;font-size:15px;color:rgba(255,255,255,.8);text-decoration:none} .prs-topics__bio:hover{color:#fff} .prs-topics__list{list-style:none;margin:0;padding:0} .prs-topics__list li{display:grid;grid-template-columns:56px 1fr;gap:20px;padding:30px 0;border-top:1px solid rgba(255,255,255,.14)} .prs-topics__list li:last-child{border-bottom:1px solid rgba(255,255,255,.14)} .prs-topics__n{font-size:14px;color:#8fb6ff;font-variant-numeric:tabular-nums;padding-top:6px} .prs-topics__list h3{font-size:24px;line-height:1.2;letter-spacing:-.02em;font-weight:500;color:#fff;margin:0 0 8px;text-transform:none} .prs-topics__list p{font-size:16px;line-height:1.6;color:rgba(255,255,255,.68);margin:0} /* 5 Pressematerial */ .prs-kit{padding:120px 0 40px} .prs-kit__all{gap:10px} .prs-photos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px} .prs-photos figure{margin:0;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:#e3e6ea} .prs-photos img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)} .prs-photos li:hover img{transform:scale(1.04)} .prs-photos__m{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 2px 0} .prs-photos__m span{font-size:15px;font-weight:500;line-height:1.3} .prs-photos__m em{display:block;font-style:normal;font-weight:400;font-size:12.5px;color:var(--mute);margin-top:3px} .prs-photos__m a,.prs-logos__f a{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;color:var(--ink);text-decoration:none;border:1px solid var(--line);transition:background .2s,color .2s,border-color .2s} .prs-photos__m a{width:40px;height:40px;border-radius:50%} .prs-photos__m a:hover,.prs-logos__f a:hover{background:var(--ink);border-color:var(--ink);color:#fff} .prs-logos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} .prs-logos__v{height:220px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;border:1px solid var(--line)} .prs-logos__i_light .prs-logos__v{background:#fff} .prs-logos__i_dark .prs-logos__v{background:var(--ink);border-color:var(--ink)} .prs-logos__v img{width:236px;height:auto} .prs-logos__m{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 2px 0} .prs-logos__m>span:first-child{font-size:15px;font-weight:500} .prs-logos__m em{display:block;font-style:normal;font-weight:400;font-size:12.5px;color:var(--mute);margin-top:3px} .prs-logos__f{display:flex;gap:8px} .prs-logos__f a{height:36px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:500} /* 6 Unternehmensprofil */ .prs-profile{padding:80px 0 120px} .prs-profile__w{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:80px;align-items:start} .prs-boiler{position:relative;background:#f5f6f7;border-radius:var(--r);padding:32px 32px 76px} .prs-boiler p{font-size:17px;line-height:1.7;color:var(--ink);margin:0} .prs-copy{position:absolute;left:32px;bottom:24px;display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 16px;font:inherit;font-size:13.5px;font-weight:500;color:var(--ink);cursor:pointer;transition:background .2s,border-color .2s} .prs-copy:hover{border-color:var(--ink)} .prs-copy.is-ok{background:#ffd84d;border-color:#ffd84d} .prs-social{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0} .prs-social a{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--ink);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:9px 15px;transition:border-color .2s} .prs-social a:hover{border-color:var(--ink)} .prs-facts{margin:0;border-top:1px solid var(--ink)} .prs-facts div{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)} .prs-facts dt{font-size:13.5px;color:var(--mute)} .prs-facts dd{margin:0;font-size:15.5px;line-height:1.5;color:var(--ink)} /* Unternehmen: kompakte Presse-Vorschau */ .ab-press__w{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:80px;align-items:start} .ab-press__intro .ab-p{max-width:420px} .ab-press__btns{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;margin-top:8px} .ab-press__logos{display:flex;flex-wrap:wrap;gap:18px 30px;align-items:center;margin:36px 0 0;padding:24px 0 0;border-top:1px solid var(--line);list-style:none} .ab-press__logos img{height:22px;width:auto;filter:grayscale(1);opacity:.6} .ab-press .prs-list a{grid-template-columns:96px 1fr 32px} .ab-press .prs-list__s{flex-direction:row;align-items:center;gap:10px;font-size:13.5px;color:var(--mute);font-weight:400} .ab-press .prs-list__main{display:flex;flex-direction:column;gap:6px} @media (max-width:1100px){ .prs-photos{grid-template-columns:repeat(2,minmax(0,1fr))} .prs-list a{grid-template-columns:110px 190px 1fr 32px;gap:20px} } @media (max-width:900px){ .prs-contact,.prs-topics,.prs-kit{padding:80px 0 32px} .prs-news{padding:0 0 80px}.prs-topics{padding:80px 0} .prs-contact__w,.prs-topics__w,.prs-profile__w,.ab-press__w{grid-template-columns:1fr;gap:40px} .prs-topics__intro{position:static} .prs-feat{grid-template-columns:1fr} .prs-feat__img{min-height:0;aspect-ratio:16/9} .prs-feat__body{padding:32px 28px} .prs-feat__t{font-size:26px} .prs-list a,.ab-press .prs-list a{grid-template-columns:1fr 32px;gap:6px 16px;padding:20px 0} .prs-list__d{grid-column:1;grid-row:1} .prs-list__s{grid-column:1;grid-row:2;flex-direction:row;align-items:center;gap:10px} .prs-list__t{grid-column:1;grid-row:3;font-size:17px} .prs-list__go{grid-column:2;grid-row:1/4} .ab-press .prs-list__main{grid-column:1;grid-row:2/4} } @media (max-width:640px){ .prs-card{grid-template-columns:1fr} .prs-card__fig{aspect-ratio:4/3;min-height:0} .prs-card__body{padding:28px 24px} .prs-logos{grid-template-columns:1fr} .prs-logos__v{height:170px} .prs-facts div{grid-template-columns:1fr;gap:4px} .prs-boiler{padding:24px 22px 72px}.prs-copy{left:22px} .prs-topics__list li{grid-template-columns:40px 1fr} .prs-topics__list h3{font-size:21px} } @media (prefers-reduced-motion:reduce){ .prs-feat__img img,.prs-photos img{transition:none} } .ab-press__all a .prs-list__t{font-size:15px;font-weight:500} .prs .ab-end__w .cx-btn{white-space:nowrap;flex:0 0 auto} .prs-facts dt{font-weight:400!important} .ab-press__logos img{opacity:.75;height:24px} /* Bekannt aus */ .prs-known{background:#fff;border-bottom:1px solid var(--line)} .prs-known__w{display:flex;align-items:center;gap:40px;padding-top:26px;padding-bottom:26px} .prs-known__l{flex:0 0 auto;margin:0;font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;color:var(--mute)} .prs-known__list{flex:1;display:flex;justify-content:space-between;align-items:center;gap:24px 36px;flex-wrap:wrap;list-style:none;margin:0;padding:0} .prs-known__list img{height:24px;width:auto;filter:grayscale(1);opacity:.7} .prs-contact__list{margin-top:24px;font-size:16px} @media (max-width:900px){.prs-known__w{flex-direction:column;align-items:flex-start;gap:16px}.prs-known__list{justify-content:flex-start;gap:16px 26px}.prs-known__list img{height:20px}} /* Publisher-Logos in der Liste (31.10.) */ .prs-list a{grid-template-columns:120px 210px 1fr 32px} .prs-list__s{gap:10px} .prs-logo{display:block;height:22px;width:auto;max-width:170px;object-fit:contain;object-position:left center;filter:grayscale(1);opacity:.78;transition:filter .3s,opacity .3s} .prs-list a:hover .prs-logo{filter:none;opacity:1} .prs-logo_braunschweiger-zeitung{height:30px} .prs-logo_weristwer{height:26px} .prs-logo_aufdecker{height:20px} .prs-logo_computerwoche{height:18px} .prs-logo_sueddeutsche{height:18px} .prs-logo_unternehmerjournal{height:20px} .prs-wm{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:22px;color:#5b6270} .prs-feat__logo{display:inline-flex;align-self:flex-start;background:#fff;border-radius:8px;padding:10px 14px;margin:0 0 22px} .prs-feat__logo img{height:26px;width:auto;display:block} /* Fotogruppen mit Tabs */ .prs-tabs{display:none} .prs-tabs-on .prs-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 28px} .prs-tabs-on .prs-fg__h{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .prs-tab{display:inline-flex;align-items:center;gap:10px;font:inherit;font-size:14.5px;font-weight:500;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:999px;padding:10px 16px;cursor:pointer;transition:background .2s,border-color .2s,color .2s} .prs-tab span{font-size:12px;color:var(--mute);font-variant-numeric:tabular-nums} .prs-tab:hover{border-color:var(--ink)} .prs-tab[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:#fff} .prs-tab[aria-selected=true] span{color:rgba(255,255,255,.6)} .prs-tab:focus-visible{outline:2px solid #0E68FF;outline-offset:2px} .prs-fg[hidden]{display:none} .prs-fg+.prs-fg{margin-top:40px}.prs-tabs-on .prs-fg+.prs-fg{margin-top:0} .prs-photos{row-gap:28px} @media (max-width:900px){ .prs-list a{grid-template-columns:1fr 32px} .prs-logo{height:20px}.prs-logo_braunschweiger-zeitung{height:26px} } @media (max-width:640px){.prs-photos{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}.prs-photos__m span{font-size:14px}.prs-photos__m a{width:34px;height:34px}} .prs-list__s .prs-logo{flex:0 0 auto;width:auto!important;max-width:170px} @media (max-width:900px){ .prs-list__s .prs-logo{height:21px!important;max-width:160px} .prs-list__s .prs-logo_braunschweiger-zeitung{height:28px!important} .prs-list__s .prs-logo_weristwer{height:26px!important} .prs-list__s .prs-logo_computerwoche,.prs-list__s .prs-logo_sueddeutsche{height:17px!important} } .prs-tab b{font-weight:500}.prs-tab__s{display:none} @media (max-width:640px){.prs-tab__l{display:none}.prs-tab__s{display:inline}.prs-tabs-on .prs-tabs{flex-wrap:nowrap}.prs-tab{padding:9px 14px}} /* Kategorie rechts statt unter dem Logo (31.10.) */ .prs-news .prs-list a{grid-template-columns:110px 190px 1fr 150px 32px;gap:28px} .prs-news .prs-list__s{flex-direction:row;align-items:center} .prs-list__k{display:flex;justify-content:flex-end} .prs-news .prs-typ{background:none;border:1px solid var(--line);color:var(--mute);font-size:11px;padding:5px 10px} @media (max-width:1100px){.prs-news .prs-list a{grid-template-columns:100px 170px 1fr 130px 32px;gap:20px}} @media (max-width:900px){ .prs-news .prs-list a{grid-template-columns:1fr 32px;gap:8px 16px} .prs-news .prs-list__k{grid-column:1;grid-row:1;justify-self:end;align-self:center} } /* roi.css */ /* SEO-Umsatzrechner (Präfix roi-) */ .roi-hero{position:relative;overflow:hidden;padding:136px 0 150px;background:#f5f6f7} .roi-hero::after{content:"";position:absolute;inset:auto -10% -40% 40%;height:420px;background:radial-gradient(closest-side,rgba(14,104,255,.12),transparent);pointer-events:none} .roi-hero .cx-wrap{position:relative;z-index:1} .roi-h1{font-size:72px;line-height:1.02;letter-spacing:-.045em;font-weight:500;margin:0 0 18px;color:var(--ink);text-transform:none} .roi-h1 span{color:#0E68FF} .roi-lead{font-size:20px;line-height:1.55;color:var(--ink-2);max-width:620px;margin:0} .roi-calc{margin-top:-104px;position:relative;z-index:2;padding-bottom:40px} .roi-box{display:grid;grid-template-columns:1.25fr 1fr;background:#fff;border:1px solid var(--line);border-radius:calc(var(--r) + 4px);box-shadow:0 40px 80px -50px rgba(11,15,23,.45);overflow:hidden} .roi-in{padding:40px 44px} .roi-sub{font-size:14px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;color:var(--mute);margin:0 0 26px} .roi-sub_inv{color:rgba(255,255,255,.6);margin-bottom:6px} .roi-f{padding:20px 0;border-top:1px solid var(--line)} .roi-f:first-of-type{border-top:0;padding-top:0} .roi-f__top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px} .roi-f__top label{font-size:17px;font-weight:500;color:var(--ink)} .roi-f__num{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 14px;border:1px solid var(--line-2);border-radius:var(--r);background:#fff;transition:border-color .2s,box-shadow .2s} .roi-f__num:focus-within{border-color:#0E68FF;box-shadow:0 0 0 3px rgba(14,104,255,.15)} .roi-f__num input{width:96px;border:0;outline:0;background:transparent;font:inherit;font-size:17px;font-weight:500;text-align:right;color:var(--ink);-moz-appearance:textfield} .roi-f__num input::-webkit-outer-spin-button,.roi-f__num input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .roi-f__num span{color:var(--mute);font-size:15px} .roi-range{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;background:linear-gradient(90deg,#0E68FF var(--p,0%),#e6e8eb var(--p,0%));outline:0;margin:0;cursor:pointer} .roi-range::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid #0E68FF;box-shadow:0 2px 8px rgba(14,104,255,.35);transition:transform .15s} .roi-range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid #0E68FF} .roi-range:active::-webkit-slider-thumb{transform:scale(1.15)} .roi-range:focus-visible{box-shadow:0 0 0 4px rgba(14,104,255,.2)} .roi-f__h{margin:12px 0 0;font-size:14px;line-height:1.5;color:var(--mute)} .roi-out{position:relative;display:flex;flex-direction:column;padding:40px 40px 36px;background:#0b0f17;color:#fff;overflow:hidden} .roi-out::before{content:"";position:absolute;right:-120px;top:-120px;width:340px;height:340px;border-radius:50%;background:radial-gradient(closest-side,rgba(14,104,255,.45),transparent);pointer-events:none} .roi-out>*{position:relative} .roi-out__p{margin:0 0 26px;font-size:15px;color:rgba(255,255,255,.6)} .roi-flow{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:1px;background:rgba(255,255,255,.1);border-radius:var(--r);overflow:hidden} .roi-flow li{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:2px 12px;padding:14px 18px;background:#0b0f17} .roi-flow span{font-size:15px;color:rgba(255,255,255,.72)} .roi-flow b{font-size:24px;font-weight:500;letter-spacing:-.02em;text-align:right;font-variant-numeric:tabular-nums} .roi-flow small{grid-column:1/-1;font-size:12px;color:rgba(255,255,255,.4);margin-top:-2px} .roi-total{padding:22px 22px 20px;border-radius:var(--r);background:#0E68FF;margin-bottom:22px} .roi-total span{display:block;font-size:14px;color:rgba(255,255,255,.82);margin-bottom:6px} .roi-total b{display:block;font-size:46px;line-height:1.05;font-weight:500;letter-spacing:-.035em;font-variant-numeric:tabular-nums} .roi-total small{display:block;margin-top:8px;font-size:15px;color:rgba(255,255,255,.85)} .roi-total strong{font-weight:600} .roi-bars{display:grid;gap:8px;margin-bottom:26px} .roi-bars div{display:grid;grid-template-columns:1fr 92px;align-items:center;gap:10px} .roi-bars i{display:block;height:8px;border-radius:99px;background:rgba(255,255,255,.1);position:relative;overflow:hidden} .roi-bars i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w);background:#fff;border-radius:99px;transition:width .4s cubic-bezier(.2,.7,.2,1)} .roi-bars em{font-style:normal;font-size:12px;color:rgba(255,255,255,.55)} .roi-cta{margin-top:auto;justify-content:center;background:#fff;color:#0b0f17} .roi-note{max-width:820px;margin:20px 0 0;font-size:14px;line-height:1.55;color:var(--mute)} .roi-how{padding:96px 0} .roi-how__w{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center} .roi-h2{font-size:40px;line-height:1.12;letter-spacing:-.03em;font-weight:500;margin:0 0 18px;color:var(--ink);text-transform:none} .roi-p{font-size:18px;line-height:1.65;color:var(--ink-2);margin:0} .roi-steps{list-style:none;margin:0;padding:0;display:grid;gap:12px} .roi-steps li{display:flex;gap:18px;align-items:center;padding:20px 22px;border:1px solid var(--line);border-radius:var(--r);background:#fff} .roi-steps b{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r);background:#0b0f17;color:#fff;font-weight:500} .roi-steps h3{margin:0 0 2px;font-size:18px;font-weight:500;text-transform:none} .roi-steps p{margin:0;font-size:15px;color:var(--mute);font-variant-numeric:tabular-nums} .roi-faq{padding:0 0 96px} .roi-faq__w{display:grid;grid-template-columns:1fr 2fr;gap:64px} @media (max-width:960px){ .roi-box{grid-template-columns:1fr} .roi-how__w,.roi-faq__w{grid-template-columns:1fr;gap:32px} } @media (max-width:640px){ .roi-hero{padding:104px 0 120px}.roi-h1{font-size:44px}.roi-lead{font-size:17px} .roi-in{padding:26px 20px}.roi-out{padding:28px 20px} .roi-f__top{flex-wrap:wrap}.roi-f__top label{font-size:16px} .roi-total b{font-size:38px} .roi-h2{font-size:30px}.roi-how{padding:64px 0} } @media (prefers-reduced-motion:reduce){.roi-bars i::after,.roi-range::-webkit-slider-thumb{transition:none}} /* Positionswahl im Rechner */ .roi-pos{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:16px} .roi-pos__k{font-size:13px;color:var(--mute);margin-right:4px} .roi-pos button{font:inherit;min-width:34px;height:34px;padding:0 8px;border:1px solid var(--line-2);border-radius:var(--r);background:#fff;color:var(--ink);font-size:14px;font-weight:500;cursor:pointer;transition:background .15s,border-color .15s,color .15s} .roi-pos button:hover{border-color:#0E68FF;color:#0E68FF} .roi-pos button[aria-pressed=true]{background:#0E68FF;border-color:#0E68FF;color:#fff} .roi-pos button:focus-visible,.roi-chart button:focus-visible,.roi-lay button:focus-visible{outline:2px solid #0E68FF;outline-offset:2px} /* Klickrate nach Position */ .roi-ctr{padding:96px 0 40px} .roi-ctr__head{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:40px} .roi-ctr__head .roi-h2{margin:0} .roi-p b{color:var(--ink);font-weight:500} .roi-chart{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)} .roi-chart li{border-bottom:1px solid var(--line)} .roi-chart button,.roi-chart__p2{font:inherit;width:100%;display:grid;grid-template-columns:56px 1fr 260px;align-items:center;gap:20px;padding:12px 8px;background:transparent;border:0;color:var(--ink);text-align:left;cursor:pointer;transition:background .15s} .roi-chart button:hover{background:#f5f6f7} .roi-chart button[aria-pressed=true]{background:#eef4ff} .roi-chart__pos{font-size:22px;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums} .roi-chart__bar{position:relative;display:flex;align-items:center;height:30px} .roi-chart__bar i{display:block;height:100%;width:var(--w);min-width:6px;border-radius:4px;background:#d5dcea;transition:background .2s} .roi-chart button[aria-pressed=true] i,.roi-chart button:hover i{background:#0E68FF} .roi-chart__bar em{font-style:normal;font-size:15px;font-weight:500;margin-left:12px;white-space:nowrap;font-variant-numeric:tabular-nums} .roi-chart__val{font-size:15px;color:var(--ink-2);text-align:right;font-variant-numeric:tabular-nums} .roi-chart__val b{font-weight:500;color:var(--ink);font-size:18px} .roi-chart__val small{display:block;font-size:13px;color:var(--mute)} .roi-chart__p2{cursor:default;color:var(--mute)} .roi-chart__p2 em{margin-left:0;font-weight:400} .roi-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:32px 0 72px} .roi-facts div{padding:24px;border-radius:var(--r);background:#0b0f17;color:#fff} .roi-facts div:last-child{background:#0E68FF} .roi-facts b{display:block;font-size:40px;line-height:1;font-weight:500;letter-spacing:-.03em;margin-bottom:12px;font-variant-numeric:tabular-nums} .roi-facts p{margin:0;font-size:15px;line-height:1.5;color:rgba(255,255,255,.78)} .roi-h3{font-size:24px;font-weight:500;letter-spacing:-.02em;margin:0 0 20px;color:var(--ink);text-transform:none} .roi-lay{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .roi-lay button{font:inherit;width:100%;height:100%;display:flex;flex-direction:column;gap:6px;padding:20px 22px;border:1px solid var(--line);border-radius:var(--r);background:#fff;color:var(--ink);text-align:left;cursor:pointer;transition:border-color .2s} .roi-lay button:hover,.roi-lay button[aria-pressed=true]{border-color:#0E68FF} .roi-lay__v{font-size:32px;font-weight:500;letter-spacing:-.03em;font-variant-numeric:tabular-nums} .roi-lay__n{font-size:16px;font-weight:500} .roi-lay__bar{display:block;height:4px;border-radius:99px;background:#eef0f3;margin:4px 0} .roi-lay__bar i{display:block;height:100%;width:var(--w);border-radius:99px;background:#0E68FF} .roi-lay__t{font-size:14px;line-height:1.5;color:var(--mute)} .roi-src{margin:24px 0 0;max-width:900px;font-size:13.5px;line-height:1.6;color:var(--mute)} .roi-src a{color:var(--ink)} @media (max-width:960px){.roi-ctr__head{grid-template-columns:1fr;gap:16px}.roi-lay{grid-template-columns:1fr 1fr}.roi-facts{grid-template-columns:1fr}} @media (max-width:640px){ .roi-ctr{padding:64px 0 24px} .roi-chart button,.roi-chart__p2{grid-template-columns:34px 1fr;gap:4px 12px} .roi-chart__val{grid-column:2;text-align:left} .roi-chart__val small{display:inline} .roi-lay{grid-template-columns:1fr} } @media (prefers-reduced-motion:reduce){.roi-chart button,.roi-chart__bar i,.roi-pos button{transition:none}} @media (max-width:640px){.roi-chart__val small::before{content:" · "}} /* Designregel: Gelb = Hervorhebung */ .roi-facts div:last-child b{color:#ffd84d} .roi-total small strong{color:#ffd84d} /* ctabar.css */ /* Anfrage-Balken zwischen Sektionen (Präfix cb-) – Blau = Aktion, Gelb = Hervorhebung */ .cb{background:#0E68FF;color:#fff;position:relative;overflow:hidden} .cb::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:#ffd84d} .cb__w{display:flex;align-items:center;justify-content:space-between;gap:32px 48px;padding-top:40px;padding-bottom:40px} .cb__txt{max-width:720px} .cb__k{margin:0 0 8px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;color:#ffd84d} .cb__h{margin:0;font-size:28px;line-height:1.2;letter-spacing:-.02em;font-weight:500;color:#fff} .cb__p{margin:10px 0 0;font-size:16px;line-height:1.55;color:rgba(255,255,255,.82)} .cb__act{flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:10px} .cb__btn{display:inline-flex;align-items:center;gap:14px;padding:16px 22px;border-radius:var(--r,2px);background:#fff;color:#0b0f17;font-size:16px;font-weight:500;text-decoration:none;white-space:nowrap;transition:background .2s,color .2s} .cb__btn:hover{background:#0b0f17;color:#fff} .cb__btn:focus-visible{outline:2px solid #ffd84d;outline-offset:3px} .cb__btn svg{transition:transform .2s}.cb__btn:hover svg{transform:translateX(3px)} .cb__note{font-size:13px;color:rgba(255,255,255,.75)} @media (max-width:860px){.cb__w{flex-direction:column;align-items:flex-start;padding-top:32px;padding-bottom:32px}.cb__h{font-size:23px}} @media (prefers-reduced-motion:reduce){.cb__btn,.cb__btn svg{transition:none}.cb__btn:hover svg{transform:none}} /* Footer-Spaltenköpfe ohne eigene Zielseite */ .footer-menu .menu .menu-item .footer-menu__h{color:#fff;font-weight:600;font-size:16px} .footer-menu .menu .menu-item.menu-item-has-children>a:hover{color:#d6d6d6} /* pg.css */ /* Potenzialgespräch-Funnel (Präfix pg-) – Farbregel: s/w Basis, Blau Aktion, Gelb Hervorhebung */ .pg .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .pg-hero{padding:128px 0 72px;background:#f5f6f7} .pg-hero__w{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:start} .pg-h1{font-size:50px;line-height:1.08;letter-spacing:-.035em;font-weight:500;color:var(--ink);margin:0 0 20px;text-transform:none} .pg-lead{font-size:19px;line-height:1.6;color:var(--ink-2);margin:0 0 28px;max-width:560px} .pg-checks{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:12px} .pg-checks li{display:flex;gap:12px;align-items:flex-start;font-size:17px;color:var(--ink-2)} .pg-checks svg{flex:none;color:#0E68FF;margin-top:3px} .pg-checks b{color:var(--ink);font-weight:500} .pg-rating{display:inline-flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--line);border-radius:var(--r);background:#fff;color:var(--ink-2);font-size:14px;text-decoration:none;margin-bottom:28px} .pg-rating:hover{border-color:var(--ink)} .pg-rating__stars{color:#f2a100;letter-spacing:2px;font-size:15px} .pg-rating b{color:var(--ink);font-weight:600} .pg-host{display:flex;align-items:center;gap:16px;margin:0;padding-top:24px;border-top:1px solid var(--line)} .pg-host img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 25%;filter:grayscale(1)} .pg-host figcaption{display:flex;flex-direction:column;font-size:14px;line-height:1.45;color:var(--mute)} .pg-host b{font-size:16px;color:var(--ink);font-weight:500} .pg-book{position:relative;background:#fff;border:1px solid var(--line);border-radius:calc(var(--r) + 2px);box-shadow:0 40px 80px -50px rgba(11,15,23,.4);scroll-margin-top:110px} .pg-book::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:4px;background:#0E68FF;border-radius:var(--r) var(--r) 0 0} .pg-tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)} .pg-tabs button{font:inherit;padding:20px 16px 18px;border:0;background:transparent;color:var(--mute);font-size:16px;font-weight:500;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .15s} .pg-tabs button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--ink)} .pg-tabs button:hover{color:var(--ink)} .pg-tabs button:focus-visible{outline:2px solid #0E68FF;outline-offset:-4px} .pg-panel{padding:0} .pg-cal{min-height:640px;display:flex} .pg-cal.is-loaded{display:block} .pg-cal__frame{min-width:300px;height:700px} .pg-consent{margin:auto;max-width:420px;padding:48px 28px;text-align:center} .pg-consent__ico{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#eef4ff;color:#0E68FF;margin-bottom:18px} .pg-consent__h{font-size:24px;font-weight:500;letter-spacing:-.02em;color:var(--ink);margin:0 0 10px} .pg-consent__p{font-size:14px;line-height:1.55;color:var(--mute);margin:0 0 22px} .pg-consent__p a{color:var(--ink)} .pg-remember{display:flex;gap:8px;align-items:center;justify-content:center;margin:14px 0 0;font-size:13px;color:var(--mute);cursor:pointer} .pg-consent__alt{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--line);font-size:14px;color:var(--mute)} .pg-link{font:inherit;background:none;border:0;padding:0;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer} .pg-btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;padding:16px 24px;border:0;border-radius:var(--r);background:#0E68FF;color:#fff;font:inherit;font-size:16px;font-weight:500;text-decoration:none;cursor:pointer;transition:background .2s} .pg-btn:hover{background:#0b0f17;color:#fff} .pg-btn:focus-visible{outline:2px solid #ffd84d;outline-offset:3px} .pg-btn svg{transition:transform .2s}.pg-btn:hover svg{transform:translateX(3px)} .pg-btn_full{width:100%} .pg-btn_light{background:#fff;color:#0b0f17}.pg-btn_light:hover{background:#ffd84d;color:#0b0f17} .pg-form{padding:28px 32px 32px;display:grid;gap:16px} .pg-form__intro{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2)} .pg-alert{margin:0;padding:12px 14px;border-left:3px solid #e5484d;background:#fdeeee;color:#7a1d20;font-size:14px} .pg-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} .pg-f{display:flex;flex-direction:column;gap:6px} .pg-f label{font-size:14px;font-weight:500;color:var(--ink)} .pg-f label small{font-weight:400;color:var(--mute)} .pg-f label span{color:#0E68FF} .pg-f input,.pg-f textarea{font:inherit;font-size:16px;padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--r);background:#fff;color:var(--ink);transition:border-color .15s,box-shadow .15s} .pg-f input:focus,.pg-f textarea:focus{outline:0;border-color:#0E68FF;box-shadow:0 0 0 3px rgba(14,104,255,.15)} .pg-f textarea{resize:vertical;min-height:84px} .pg-f.is-err input{border-color:#e5484d} .pg-err{font-size:13px;color:#c22d32} .pg-goal{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px} .pg-goal legend{font-size:14px;font-weight:500;color:var(--ink);margin-bottom:8px;padding:0} .pg-goal label{position:relative;cursor:pointer} .pg-goal input{position:absolute;opacity:0;inset:0;cursor:pointer} .pg-goal span{display:inline-block;padding:8px 14px;border:1px solid var(--line-2);border-radius:999px;font-size:14px;color:var(--ink);transition:background .15s,border-color .15s,color .15s} .pg-goal input:checked+span{background:#0b0f17;border-color:#0b0f17;color:#fff} .pg-goal input:focus-visible+span{outline:2px solid #0E68FF;outline-offset:2px} .pg-consent-cb{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.5;color:var(--ink-2);cursor:pointer} .pg-consent-cb input{margin-top:3px;flex:none;width:16px;height:16px;accent-color:#0E68FF} .pg-consent-cb a{color:var(--ink)} .pg-consent-cb.is-err{color:#c22d32} .pg-fine{margin:0;font-size:13px;color:var(--mute);text-align:center} .pg-fine a{color:var(--ink)} .pg-logos{padding:36px 0;border-bottom:1px solid var(--line)} .pg-logos__w{display:flex;align-items:center;gap:40px} .pg-logos p{flex:none;max-width:210px;margin:0;font-size:13px;line-height:1.45;color:var(--mute)} .pg-logos ul{list-style:none;margin:0;padding:0;flex:1;display:grid;grid-template-columns:repeat(8,1fr);gap:28px;align-items:center} .pg-logos img{max-width:100%;max-height:30px;width:auto;margin:0 auto;display:block;filter:grayscale(1);opacity:.6} .pg-sec{padding:96px 0} .pg-sec_grey{background:#f5f6f7} .pg-sec_dark{background:#0b0f17;color:#fff} .pg-head{max-width:760px;margin-bottom:44px} .pg-h2{font-size:40px;line-height:1.12;letter-spacing:-.03em;font-weight:500;color:var(--ink);margin:0;text-transform:none} .pg-sec_dark .pg-h2{color:#fff} .pg-sec_dark .cx-label{color:rgba(255,255,255,.7)} .pg-p{font-size:18px;line-height:1.6;color:var(--ink-2);margin:18px 0 28px} .pg-get{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--ink)} .pg-get li{padding:28px 28px 8px 0} .pg-get li+li{padding-left:28px;border-left:1px solid var(--line)} .pg-get b{display:block;font-size:14px;font-weight:500;color:#0E68FF;margin-bottom:18px} .pg-get h3{font-size:20px;font-weight:500;letter-spacing:-.015em;margin:0 0 10px;color:var(--ink);text-transform:none} .pg-get p{font-size:15px;line-height:1.6;color:var(--ink-2);margin:0} .pg-flow{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:center} .pg-steps{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:s} .pg-steps li{display:flex;gap:20px;align-items:flex-start;padding:22px 24px;background:#fff;border:1px solid var(--line);border-radius:var(--r)} .pg-steps span{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#0b0f17;color:#fff;font-weight:500} .pg-steps li:first-child span{background:#0E68FF} .pg-steps h3{margin:0 0 4px;font-size:18px;font-weight:500;color:var(--ink);text-transform:none} .pg-steps p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2)} .pg-quotes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .pg-quotes li{display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:28px;border:1px solid var(--line);border-radius:var(--r);background:#fff} .pg-quotes blockquote{margin:0;font-size:17px;line-height:1.55;color:var(--ink)} .pg-quotes__who{display:flex;align-items:center;gap:12px;margin:0;font-size:13px;color:var(--mute);line-height:1.4} .pg-quotes__who img{width:44px;height:44px;border-radius:50%;object-fit:cover;filter:grayscale(1)} .pg-quotes__who b{display:block;font-size:15px;color:var(--ink);font-weight:500} .pg-more{margin:28px 0 0} .pg-more a{display:inline-flex;align-items:center;gap:10px;color:var(--ink);font-weight:500;text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:2px} .pg-fit{display:grid;grid-template-columns:1fr 1.5fr;gap:64px} .pg-fit__cols{display:grid;grid-template-columns:1fr 1fr;gap:32px} .pg-fit h3{font-size:17px;font-weight:500;color:#fff;margin:0 0 16px;text-transform:none} .pg-yes,.pg-no{list-style:none;margin:0;padding:0;display:grid;gap:12px} .pg-yes li,.pg-no li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.5;color:rgba(255,255,255,.82)} .pg-yes svg{flex:none;color:#ffd84d;margin-top:2px} .pg-no i{flex:none;width:18px;text-align:center;font-style:normal;color:rgba(255,255,255,.45);font-size:18px;line-height:1.3} .pg-faq{display:grid;grid-template-columns:1fr 2fr;gap:64px} .pg-end{padding:0 0 96px} .pg-end__w{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:48px 56px;border-radius:var(--r);background:#0E68FF;color:#fff;position:relative;overflow:hidden} .pg-end__w::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:#ffd84d} .pg-end__k{margin:0 0 10px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;color:#ffd84d} .pg-end__h{margin:0;font-size:32px;line-height:1.18;letter-spacing:-.025em;font-weight:500;color:#fff;max-width:720px;text-transform:none} .pg-sticky{display:none} @media (max-width:1100px){.pg-get{grid-template-columns:1fr 1fr}.pg-get li:nth-child(3){padding-left:0;border-left:0}.pg-logos ul{grid-template-columns:repeat(4,1fr)}} @media (max-width:960px){ .pg-hero__w,.pg-flow,.pg-fit,.pg-faq{grid-template-columns:1fr;gap:36px} .pg-h1{font-size:38px} .pg-logos__w{flex-direction:column;align-items:flex-start;gap:20px}.pg-logos p{max-width:none} .pg-quotes{grid-template-columns:1fr} } @media (max-width:640px){ .pg-hero{padding:100px 0 48px} .pg-h1{font-size:31px}.pg-lead{font-size:17px} .pg-host{display:none} .pg-row{grid-template-columns:1fr} .pg-form{padding:22px 18px 24px} .pg-tabs button{font-size:15px;padding:16px 8px} .pg-cal{min-height:520px}.pg-cal__frame{height:1000px} .pg-sec{padding:64px 0}.pg-h2{font-size:29px} .pg-get{grid-template-columns:1fr}.pg-get li,.pg-get li+li{padding:22px 0;border-left:0;border-bottom:1px solid var(--line)} .pg-fit__cols{grid-template-columns:1fr} .pg-end__w{flex-direction:column;align-items:flex-start;padding:32px 24px}.pg-end__h{font-size:24px} .pg-sticky{position:fixed;left:16px;right:16px;bottom:16px;z-index:50;display:flex;align-items:center;justify-content:center;gap:12px;padding:16px;border-radius:var(--r);background:#0E68FF;color:#fff;font-weight:500;text-decoration:none;box-shadow:0 12px 30px -10px rgba(11,15,23,.5);transition:transform .25s,opacity .25s} .pg-sticky.is-hidden{transform:translateY(140%);opacity:0;pointer-events:none} } @media (prefers-reduced-motion:reduce){.pg-btn,.pg-btn svg,.pg-sticky,.pg-tabs button,.pg-goal span{transition:none}.pg-btn:hover svg{transform:none}} .pg-quotes__who img{object-position:50% 20%} /* Danke-Seite (dk-) */ .dk-hero{padding:136px 0 88px;background:#f5f6f7} .dk-hero__w{display:grid;grid-template-columns:1.4fr 1fr;gap:64px;align-items:start} .dk-check{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:#0E68FF;color:#fff;margin-bottom:24px;animation:dk-pop .6s cubic-bezier(.2,.9,.3,1.3) both} @keyframes dk-pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}} .dk-h1{font-size:48px;line-height:1.08;letter-spacing:-.035em;font-weight:500;color:var(--ink);margin:14px 0 18px;text-transform:none;text-wrap:balance} .dk-lead{font-size:18px;line-height:1.6;color:var(--ink-2);margin:0 0 36px;max-width:620px} .dk-lead a{color:var(--ink)} .dk-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px;max-width:620px} .dk-steps li{display:flex;gap:18px;align-items:flex-start;padding:20px 22px;background:#fff;border:1px solid var(--line);border-radius:var(--r)} .dk-steps span{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#0b0f17;color:#fff;font-weight:500;font-size:15px} .dk-steps li.is-done span{background:#0E68FF} .dk-steps b{display:block;font-size:17px;font-weight:500;color:var(--ink);margin-bottom:2px} .dk-steps p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2)} .dk-side{padding:28px;background:#fff;border:1px solid var(--line);border-radius:var(--r)} .dk-host{display:flex;align-items:center;gap:16px;margin:0 0 24px;padding-bottom:22px;border-bottom:1px solid var(--line)} .dk-host img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 25%;filter:grayscale(1)} .dk-host figcaption{display:flex;flex-direction:column;font-size:14px;line-height:1.45;color:var(--mute)} .dk-host b{font-size:16px;color:var(--ink);font-weight:500} .dk-side__h{margin:0 0 12px;font-size:15px;font-weight:500;color:var(--ink)} .dk-prep{margin:0 0 22px;padding:0;list-style:none;display:grid;gap:10px} .dk-prep li{position:relative;padding-left:22px;font-size:15px;line-height:1.5;color:var(--ink-2)} .dk-prep li::before{content:"";position:absolute;left:0;top:9px;width:10px;height:1.5px;background:#0E68FF} .dk-contact{margin:0;font-size:14px;color:var(--mute)} .dk-contact a{color:var(--ink)} .dk-more{padding:88px 0 104px} .dk-h2{font-size:32px;line-height:1.15;letter-spacing:-.025em;font-weight:500;color:var(--ink);margin:0 0 32px;text-transform:none} .dk-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .dk-cards a{display:flex;flex-direction:column;gap:12px;height:100%;padding:26px;border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:inherit;transition:border-color .2s,transform .3s} .dk-cards a:hover{border-color:var(--ink);transform:translateY(-3px)} .dk-cards__k{font-size:13px;color:#0E68FF;font-weight:500} .dk-cards b{font-size:19px;line-height:1.3;font-weight:500;color:var(--ink)} .dk-cards__go{margin-top:auto;display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:500;color:var(--ink)} @media (max-width:960px){.dk-hero__w{grid-template-columns:1fr;gap:32px}.dk-cards{grid-template-columns:1fr}} @media (max-width:640px){.dk-hero{padding:104px 0 56px}.dk-h1{font-size:32px}.dk-lead{font-size:16.5px}.dk-more{padding:56px 0 72px}.dk-h2{font-size:25px}} @media (prefers-reduced-motion:reduce){.dk-check{animation:none}.dk-cards a{transition:none}.dk-cards a:hover{transform:none}} /* ===== 404 (Präfix nf-) ===== */ .nf-hero{position:relative;background:#0b0f17;color:#fff;padding:150px 0 96px;overflow:hidden} .nf-hero__bg{position:absolute;inset:0;opacity:.22} .nf-hero__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 70%;filter:grayscale(1) contrast(1.1)} .nf-hero__bg::after{content:"";position:absolute;inset:0;background:rgba(11,15,23,.55)} .nf-hero__w{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center} .nf-code{margin:0;font-size:clamp(120px,19vw,260px);line-height:.85;letter-spacing:-.07em;font-weight:500;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.55);user-select:none;animation:nf-in 1s cubic-bezier(.2,.7,.2,1) both} .nf-code::first-letter{color:#0E68FF;-webkit-text-stroke:0} @keyframes nf-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}} .nf-hero .cx-label{color:#ffd84d} .nf-h1{margin:0 0 20px;font-size:48px;line-height:1.08;letter-spacing:-.035em;font-weight:500;color:#fff;text-transform:none;text-wrap:balance} .nf-lead{margin:0 0 32px;font-size:18px;line-height:1.6;color:rgba(255,255,255,.72);max-width:560px} .nf-search{position:relative;max-width:560px} .nf-search__l{display:block;font-size:13px;color:rgba(255,255,255,.6);margin-bottom:10px} .nf-search__row{display:flex;align-items:center;gap:12px;background:#fff;border-radius:2px;padding:6px 6px 6px 16px;color:#0b0f17} .nf-search__row svg{flex:none;color:#7d838c} .nf-search__row input{flex:1;min-width:0;border:0;outline:0;font:inherit;font-size:16px;padding:10px 0;background:transparent;color:#0b0f17} .nf-search__row button{border:0;background:#0E68FF;color:#fff;font:inherit;font-weight:500;font-size:15px;padding:12px 20px;border-radius:2px;cursor:pointer} .nf-search__row button:hover{background:#0b57d9} .nf-search__row:focus-within{outline:2px solid #ffd84d;outline-offset:3px} .nf-sugg{position:absolute;left:0;right:0;top:100%;margin:6px 0 0;padding:6px;list-style:none;background:#fff;border-radius:2px;box-shadow:0 18px 40px rgba(11,15,23,.25);z-index:5;max-height:360px;overflow:auto} .nf-sugg a{display:flex;gap:12px;align-items:baseline;padding:10px 12px;color:#0b0f17;text-decoration:none;font-size:15px;border-radius:2px} .nf-sugg a:hover,.nf-sugg a:focus{background:#f5f6f7} .nf-sugg span{flex:none;width:64px;font-size:12px;color:#0E68FF;font-weight:500} .nf-none{padding:10px 12px;font-size:14px;color:#7d838c} .nf-sec{padding:88px 0;background:#fff} .nf-sec_hits{padding:64px 0 0} .nf-sec_tint{background:#f5f6f7} .nf-h2{margin:0 0 32px;font-size:32px;line-height:1.15;letter-spacing:-.025em;font-weight:500;color:#0b0f17;text-transform:none} .nf-h2_l{color:#fff;margin-bottom:10px} .nf-hits{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px} .nf-hits a{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:22px 24px;border:1px solid #dfe2e6;border-radius:2px;color:#0b0f17;text-decoration:none;transition:border-color .2s,transform .2s} .nf-hits a:hover{border-color:#0b0f17;transform:translateY(-2px)} .nf-hits b{font-weight:500;font-size:17px} .nf-kind{font-size:12px;font-weight:500;color:#0E68FF;padding:4px 8px;background:#eef4ff;border-radius:2px} .nf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid #0b0f17} .nf-col{padding:28px 32px 8px 0} .nf-col+.nf-col{padding-left:32px;border-left:1px solid #dfe2e6} .nf-col__h{display:flex;align-items:center;gap:10px;margin:0 0 18px;font-size:14px;font-weight:500;color:#0E68FF} .nf-col ul{list-style:none;margin:0;padding:0} .nf-col li{border-bottom:1px solid #eceef1} .nf-col a{display:block;padding:12px 0;color:#0b0f17;text-decoration:none;font-size:16px;transition:color .2s,padding .2s} .nf-col a:hover{color:#0E68FF;padding-left:6px} .nf-head{display:flex;justify-content:space-between;align-items:baseline;gap:24px} .nf-more{display:inline-flex;gap:10px;align-items:center;color:#0b0f17;font-weight:500;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px} .nf-cta{background:#0b0f17;color:rgba(255,255,255,.72);padding:72px 0} .nf-cta__w{display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap} .nf-cta p{margin:0;font-size:17px} .nf-cta__b{display:flex;align-items:center;gap:24px;flex-wrap:wrap} .nf-btn{background:#0E68FF}.nf-btn:hover{background:#fff;color:#0b0f17} .nf-mail{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4)} @media (max-width:960px){.nf-hero{padding:120px 0 72px}.nf-hero__w{grid-template-columns:1fr;gap:12px}.nf-code{font-size:120px}.nf-h1{font-size:34px}.nf-hits{grid-template-columns:1fr}.nf-grid{grid-template-columns:1fr}.nf-col,.nf-col+.nf-col{padding:24px 0 8px;border-left:0}} @media (prefers-reduced-motion:reduce){.nf-code{animation:none}.nf-hits a,.nf-col a{transition:none}} /* karriere.css */ /* Karriere (Präfix kr-) – eigene Welt in POOSCH-Farben: Anthrazit #0b0f17 + Hellgrau #f5f6f7, Blau für Aktionen, Gelb sehr sparsam. Keine Farbverläufe; Textur nur als Haarlinien-Raster. */ .kr{--k-bg:#0b0f17;--k-bg2:#121823;--k-line:rgba(255,255,255,.12);--k-txt:#f5f6f7;--k-mute:rgba(245,246,247,.66);--k-off:#f5f6f7;--k-blue:#0E68FF;--k-yel:#ffd84d} .kr .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .kr-h2{font-size:44px;line-height:1.1;letter-spacing:-.032em;font-weight:500;color:var(--ink);margin:0;text-transform:none;text-wrap:balance} .kr-h2_l{color:var(--k-txt)} .kr-p{font-size:18px;line-height:1.65;color:var(--ink-2);margin:0} .kr-p_l{color:var(--k-mute)} .kr-head{max-width:780px;margin-bottom:48px} .kr-head .kr-p{margin-top:20px} .kr-head_split{max-width:none;display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:end} .kr-head_split .kr-p{margin-top:0} .kr-link{display:inline-flex;align-items:center;gap:10px;margin-top:24px;color:var(--ink);font-weight:500;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px} .kr-link svg{transition:transform .2s}.kr-link:hover svg{transform:translateX(3px)} .kr-link_l{color:var(--k-txt)} .kr-btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;padding:16px 26px;border-radius:var(--r);background:var(--k-blue);color:#fff;font:inherit;font-size:16px;font-weight:500;text-decoration:none;border:1px solid var(--k-blue);cursor:pointer;transition:background .2s,border-color .2s,color .2s} .kr-btn:hover{background:#fff;border-color:#fff;color:#0b0f17} .kr-btn:focus-visible,.kr-link:focus-visible,.kr-gal__btn:focus-visible{outline:2px solid var(--k-yel);outline-offset:3px} .kr-btn svg{transition:transform .2s}.kr-btn:hover svg{transform:translateX(3px)} .kr-btn_ghost{background:transparent;border-color:rgba(255,255,255,.35);color:var(--k-txt)} .kr-btn_ghost:hover{background:transparent;border-color:#fff;color:#fff} .kr-btn_full{width:100%} .kr-draft{margin:16px 0 0;padding:10px 14px;border:1px dashed #c98a00;background:#fff8e1;color:#5c4100;font-size:13px;line-height:1.5;border-radius:6px} .kr-draft b{font-weight:600} /* Hero */ .kr-hero{position:relative;background:var(--k-bg);color:var(--k-txt);padding:132px 0 88px;overflow:hidden} .kr-hero__glow{position:absolute;inset:0;pointer-events:none;opacity:.7;background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 120px),repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 120px);background-position:center top;animation:kr-drift 40s linear infinite} @keyframes kr-drift{from{background-position:0 0}to{background-position:120px 120px}} .kr-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--k-blue);transform-origin:left;animation:kr-bar 1.6s .4s cubic-bezier(.2,.7,.2,1) both} @keyframes kr-bar{from{transform:scaleX(0)}to{transform:scaleX(1)}} .kr-hero__w{position:relative;display:grid;grid-template-columns:1fr 1.08fr;gap:64px;align-items:center} .kr-crumbs{display:flex;gap:8px;font-size:13px;color:var(--k-mute);margin-bottom:40px} .kr-crumbs a{color:var(--k-mute);text-decoration:none}.kr-crumbs a:hover{color:var(--k-txt)} .kr-eyebrow{font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--k-yel);margin:0 0 22px} .kr-h1{font-size:68px;line-height:1.02;letter-spacing:-.045em;font-weight:500;color:var(--k-txt);margin:0 0 26px;text-transform:none;text-wrap:balance} .kr-claim{font-size:22px;line-height:1.4;color:var(--k-txt);margin:0 0 18px;font-weight:500;letter-spacing:-.01em} .kr-lead{font-size:17px;line-height:1.65;color:var(--k-mute);margin:0 0 34px;max-width:560px} .kr-cta{display:flex;flex-wrap:wrap;gap:12px} .kr-facts{list-style:none;display:flex;flex-wrap:wrap;gap:10px 28px;margin:32px 0 0;padding:22px 0 0;border-top:1px solid var(--k-line);max-width:600px} .kr-facts li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--k-mute)} .kr-facts svg{color:var(--k-yel);flex:none} .kr-small{margin:28px 0 0;font-size:14px;color:var(--k-mute);padding-top:20px;border-top:1px solid var(--k-line);max-width:560px} .kr-hero__img{margin:0;position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/4.4} .kr-hero__img img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;filter:saturate(.85) contrast(1.02);animation:kr-reveal 1.4s cubic-bezier(.2,.7,.2,1) both} @keyframes kr-reveal{from{clip-path:inset(0 0 100% 0);transform:scale(1.06)}to{clip-path:inset(0 0 0 0);transform:scale(1)}} .kr-in{animation:kr-up .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--d) * 90ms + 150ms)} @keyframes kr-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} .kr-scroll{position:absolute;left:50%;bottom:22px;width:24px;height:38px;margin-left:-12px;border:1.5px solid rgba(255,255,255,.35);border-radius:14px} .kr-scroll span{position:absolute;left:50%;top:8px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:var(--k-txt);animation:kr-wheel 2.2s ease-in-out infinite} @keyframes kr-wheel{0%{opacity:0;transform:translateY(0)}30%{opacity:1}80%{opacity:0;transform:translateY(12px)}100%{opacity:0}} /* Scroll-Einblendungen */ .kr-js [data-io]{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 90ms)} .kr-js [data-io].is-in{opacity:1;transform:none} /* Intro */ .kr-intro{background:var(--k-off);padding:112px 0 96px} .kr-intro__grid{display:grid;grid-template-columns:1.15fr 1fr;gap:72px} .kr-intro__txt p{font-size:18px;line-height:1.7;color:var(--ink-2);margin:0 0 18px} .kr-intro__txt p:last-child{color:var(--ink);font-weight:500;margin:0} .kr-system{display:grid;grid-template-columns:280px 1fr;gap:56px;align-items:stretch;margin-top:80px;padding-top:48px;border-top:1px solid rgba(11,15,23,.14)} .kr-system_solo{grid-template-columns:1fr} .kr-chain{min-width:0} .kr-exp{min-width:0}.kr-system>.kr-draft{grid-column:1/-1;margin:0} .kr-exp__n{margin:0;font-size:104px;line-height:.9;letter-spacing:-.06em;font-weight:500;color:var(--ink)} .kr-exp__n span{display:block;font-size:22px;letter-spacing:-.01em;margin-top:10px} .kr-exp__l{margin:10px 0 0;font-size:16px;color:var(--ink-2);max-width:240px} .kr-chain{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;align-self:center} .kr-chain li{position:relative;padding:26px 28px 26px 0} .kr-chain li+li{padding-left:28px;border-left:1px solid rgba(11,15,23,.14)} .kr-chain__n{display:block;font-size:22px;font-weight:500;letter-spacing:-.02em;color:var(--ink);margin-bottom:8px} .kr-chain li:last-child .kr-chain__n{color:var(--k-blue)} .kr-chain__x{display:block;font-size:15px;line-height:1.5;color:var(--ink-2)} .kr-chain i{position:absolute;right:-11px;top:24px;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:var(--k-off);color:var(--ink);font-style:normal;font-weight:500;z-index:1} /* Besonderheit */ .kr-special{background:#fff;padding:112px 0} .kr-special__w{display:grid;grid-template-columns:1fr 1.1fr;gap:72px;align-items:center} .kr-special__img{margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:4/5} .kr-special__img img{width:100%;height:100%;object-fit:cover;object-position:55% 50%} .kr-special__list{margin:40px 0 0;display:grid;gap:0} .kr-special__list div{padding:22px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:220px 1fr;gap:24px} .kr-special__list dt{font-size:18px;font-weight:500;color:var(--ink)} .kr-special__list dd{margin:0;font-size:16px;line-height:1.6;color:var(--ink-2)} /* Kultur */ .kr-culture{background:var(--k-bg);color:var(--k-txt);padding:120px 0 72px} .kr-culture__top{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:end;margin-bottom:64px} .kr-principles{list-style:none;margin:0;padding:0;border-top:1px solid var(--k-line)} .kr-principles li{position:relative;display:grid;grid-template-columns:90px 1.1fr 1fr 40px;gap:32px;align-items:baseline;padding:30px 0;border-bottom:1px solid var(--k-line);transition:background .3s} .kr-principles__n{font-size:15px;color:var(--k-yel);font-weight:500;font-variant-numeric:tabular-nums} .kr-principles__t{margin:0;font-size:40px;line-height:1.08;letter-spacing:-.035em;font-weight:500;color:var(--k-txt);text-transform:none} .kr-principles__x{margin:0;font-size:17px;line-height:1.6;color:var(--k-mute)} .kr-principles__a{color:var(--k-mute);justify-self:end;transition:color .2s,transform .2s} .kr-principles__a::after{content:"";position:absolute;inset:0} .kr-principles li:hover .kr-principles__a{color:var(--k-txt);transform:translateX(4px)} .kr-principles li:hover .kr-principles__t{color:#fff} .kr-js .kr-principles li[data-io] .kr-principles__t{clip-path:inset(0 100% 0 0);transition:clip-path 1s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i) * 110ms + 120ms)} .kr-js .kr-principles li.is-in .kr-principles__t{clip-path:inset(0 0 0 0)} /* Zusammenarbeit */ .kr-work{background:var(--k-bg);color:var(--k-txt);padding:48px 0 120px} .kr-work__h{max-width:820px;margin-bottom:48px} .kr-work__list{display:grid;grid-template-columns:1fr;gap:10px} .kr-work__i{background:var(--k-bg2);border:1px solid var(--k-line);border-radius:var(--r);transition:border-color .2s} .kr-work__i[open]{border-color:rgba(255,255,255,.28)} .kr-work__i summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:300px 1fr 24px;gap:28px;align-items:center;padding:24px 28px} .kr-work__i summary::-webkit-details-marker{display:none} .kr-work__i summary:focus-visible{outline:2px solid var(--k-yel);outline-offset:2px;border-radius:var(--r)} .kr-work__t{font-size:20px;font-weight:500;color:var(--k-txt)} .kr-work__x{font-size:16px;line-height:1.55;color:var(--k-mute)} .kr-work__i summary i{position:relative;width:16px;height:16px} .kr-work__i summary i::before,.kr-work__i summary i::after{content:"";position:absolute;left:0;right:0;top:7px;height:1.5px;background:var(--k-txt);transition:transform .25s} .kr-work__i summary i::after{transform:rotate(90deg)} .kr-work__i[open] summary i::after{transform:rotate(0)} .kr-work__sit{margin:0;padding:0 28px 26px calc(300px + 56px);font-size:16px;line-height:1.6;color:var(--k-txt)} .kr-work__sit b{color:var(--k-yel);font-weight:500} /* Galerie */ .kr-gallery{background:#fff;padding:120px 0} .kr-gal{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:120px;gap:14px} .kr-gal__f{margin:0;border-radius:var(--r);overflow:hidden;position:relative} .kr-gal__f_lead{grid-column:1/8;grid-row:span 4} .kr-gal__f_small:nth-child(2){grid-column:8/13;grid-row:span 2} .kr-gal__f_small:nth-child(3){grid-column:8/13;grid-row:span 2} .kr-gal__f_wide{grid-column:1/9;grid-row:span 3} .kr-gal__f_side{grid-column:9/13;grid-row:span 3} .kr-gal__btn{all:unset;display:block;width:100%;height:100%;cursor:zoom-in} .kr-gal__btn img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .4s;filter:saturate(.9)} .kr-gal__btn:hover img{transform:scale(1.035);filter:saturate(1)} .kr-lb{border:0;padding:0;background:transparent;max-width:min(1400px,94vw);max-height:92vh;overflow:visible} .kr-lb::backdrop{background:rgba(11,15,23,.9)} .kr-lb img{display:block;max-width:100%;max-height:88vh;border-radius:var(--r)} .kr-lb__x{position:absolute;right:-6px;top:-48px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;font-size:24px;line-height:1;cursor:pointer} /* Anforderungen */ .kr-req{background:var(--k-off);padding:120px 0} .kr-req__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--ink)} .kr-req__list li{padding:32px 32px 36px 0;border-bottom:1px solid rgba(11,15,23,.14)} .kr-req__list li:not(:nth-child(3n+1)){padding-left:32px;border-left:1px solid rgba(11,15,23,.14)} .kr-req__n{display:block;font-size:14px;color:var(--k-blue);font-weight:500;margin-bottom:20px} .kr-req__list h3{margin:0 0 12px;font-size:22px;font-weight:500;letter-spacing:-.02em;color:var(--ink);text-transform:none} .kr-req__list p{margin:0;font-size:15.5px;line-height:1.65;color:var(--ink-2)} .kr-req__end{margin:56px 0 0;font-size:30px;line-height:1.25;letter-spacing:-.025em;font-weight:500;color:var(--ink);max-width:880px} /* Leistungskultur */ .kr-perf{background:#fff;padding:120px 0} .kr-perf__w{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center} .kr-perf .kr-p{margin-top:22px} .kr-perf__list{list-style:none;margin:0;padding:0;display:grid;gap:0} .kr-perf__list li{display:grid;grid-template-columns:170px 120px 1fr;gap:16px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line)} .kr-perf__list li:first-child{border-top:1px solid var(--line)} .kr-perf__list b{font-size:22px;font-weight:500;letter-spacing:-.02em;color:var(--ink)} .kr-perf__list span{font-size:14px;color:var(--mute)} .kr-perf__list s{font-size:17px;color:var(--ink-2);text-decoration-color:var(--k-blue);text-decoration-thickness:2px} /* Benefits */ .kr-ben{background:var(--k-bg2);color:var(--k-txt);padding:120px 0} .kr-ben__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--k-line);border:1px solid var(--k-line);border-radius:var(--r);overflow:hidden} .kr-ben__i{background:var(--k-bg2);padding:36px 32px 38px;transition:background .3s} .kr-ben__i:hover{background:#161c27} .kr-ben__ico{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1px solid var(--k-line);color:var(--k-txt);margin-bottom:24px;transition:color .3s,border-color .3s,transform .4s} .kr-ben__i:hover .kr-ben__ico{color:var(--k-yel);border-color:rgba(255,216,77,.5);transform:rotate(-6deg)} .kr-ben__i h3{margin:0 0 10px;font-size:20px;font-weight:500;letter-spacing:-.015em;color:var(--k-txt);text-transform:none} .kr-ben__i p{margin:0;font-size:15.5px;line-height:1.6;color:var(--k-mute)} .kr-ben__i.is-open{outline:1px dashed #c98a00;outline-offset:-8px} .kr-ben__i .kr-ben__open{margin-top:14px;font-size:12.5px;color:var(--k-yel)} /* Lernen + Entwicklung */ .kr-grow{background:var(--k-off);padding:120px 0} .kr-learn{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;margin-bottom:112px;padding-bottom:96px;border-bottom:1px solid rgba(11,15,23,.14)} .kr-learn .kr-p{margin-top:20px} .kr-learn .kr-draft{grid-column:1/-1} .kr-learn__img{margin:0;border-radius:var(--r);overflow:hidden;box-shadow:0 30px 60px -40px rgba(0,0,0,.5)} .kr-learn__slot{aspect-ratio:16/10;border:1.5px dashed rgba(11,15,23,.25);border-radius:var(--r);display:grid;place-items:center;color:var(--mute);font-size:14px;text-align:center;padding:20px} .kr-tags{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px} .kr-tags li{padding:7px 14px;border:1px solid rgba(11,15,23,.2);border-radius:999px;font-size:14px} .kr-grow__w{display:grid;grid-template-columns:1fr 1.1fr;gap:72px} .kr-grow .kr-grow__w .kr-p{margin-top:22px} .kr-grow__note{margin:28px 0 0;padding-top:20px;border-top:1px solid rgba(11,15,23,.14);font-size:15px;line-height:1.6;color:var(--ink-2)} .kr-paths{list-style:none;margin:0;padding:0;display:grid;gap:10px} .kr-paths li{display:grid;grid-template-columns:220px 1fr;gap:20px;align-items:baseline;padding:22px 26px;background:#fff;border-radius:var(--r);transition:transform .3s} .kr-paths li:hover{transform:translateX(6px)} .kr-paths h3{margin:0;font-size:18px;font-weight:500;color:var(--ink);text-transform:none} .kr-paths p{margin:0;font-size:15.5px;line-height:1.55;color:var(--ink-2)} /* Office */ .kr-office{background:#fff;padding:120px 0 0} .kr-office__grid{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:14px} .kr-office__f{margin:0;border-radius:var(--r);overflow:hidden} .kr-office__f img{width:100%;height:100%;object-fit:cover;display:block} .kr-office__f_big{grid-row:1/3;aspect-ratio:4/3} .kr-office__f_detail{min-height:0;position:relative} .kr-office__f_detail img{position:absolute;inset:0} .kr-office__f_detail:nth-child(2) img{object-position:50% 40%} .kr-office__txt{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:64px;padding-top:48px;align-items:start} .kr-office__txt .kr-link{grid-column:2;margin-top:-8px;justify-self:start} /* Team */ .kr-team{background:#fff;padding:120px 0} .kr-team .kr-link{margin-top:20px} .kr-team__img{margin:0;border-radius:var(--r);overflow:hidden} .kr-team__img img{width:100%;height:auto;display:block} .kr-quotes{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .kr-quotes blockquote{margin:0 0 14px;font-size:18px;line-height:1.55} /* Stellen */ .kr-jobs{background:var(--k-off);padding:120px 0;scroll-margin-top:80px} .kr-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px} .kr-filter button{font:inherit;font-size:14px;padding:8px 16px;border-radius:999px;border:1px solid rgba(11,15,23,.2);background:#fff;cursor:pointer} .kr-filter button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff} .kr-joblist{list-style:none;margin:0 0 24px;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px} .kr-job__a{display:flex;flex-direction:column;height:100%;padding:30px 32px;background:#fff;border:1px solid rgba(11,15,23,.1);border-radius:var(--r);text-decoration:none;color:inherit;transition:border-color .2s,transform .3s} .kr-job__a:hover{border-color:var(--ink);transform:translateY(-3px)} .kr-job__a:focus-visible{outline:2px solid var(--k-blue);outline-offset:3px} .kr-job__area{font-size:13px;color:var(--k-blue);font-weight:500;margin-bottom:14px} .kr-job__area em{font-style:normal;color:#b27700} .kr-job__t{margin:0 0 8px;font-size:24px;line-height:1.2;letter-spacing:-.02em;font-weight:500;color:var(--ink);text-transform:none} .kr-job__meta{margin:0 0 16px;font-size:14px;color:var(--mute)} .kr-job__x{margin:0 0 22px;font-size:15.5px;line-height:1.6;color:var(--ink-2)} .kr-job__go{margin-top:auto;display:inline-flex;align-items:center;gap:10px;font-weight:500;color:var(--ink)} .kr-empty{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:40px 44px;background:var(--k-bg);color:var(--k-txt);border-radius:var(--r)} .kr-empty h3{margin:0 0 8px;font-size:26px;font-weight:500;letter-spacing:-.02em;color:var(--k-txt);text-transform:none} .kr-empty p{margin:0;font-size:16px;line-height:1.6;color:var(--k-mute);max-width:640px} .kr-empty .kr-btn{flex:none} /* Prozess */ .kr-process{background:#fff;padding:120px 0} .kr-process__sub{margin-top:16px} .kr-steps{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:s} .kr-steps li{position:relative;padding:28px 26px 30px;border:1px solid var(--line);border-radius:var(--r)} .kr-steps span{display:block;font-size:40px;line-height:1;letter-spacing:-.04em;font-weight:500;color:var(--ink);margin-bottom:28px} .kr-steps li:first-child span{color:var(--k-blue)} .kr-steps h3{margin:0 0 8px;font-size:19px;font-weight:500;color:var(--ink);text-transform:none} .kr-steps p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-2)} /* Abschluss */ .kr-end{position:relative;background:var(--k-bg);color:var(--k-txt);padding:160px 0 140px;overflow:hidden} .kr-end__media{position:absolute;inset:0} .kr-end__media img{width:100%;height:100%;object-fit:cover;opacity:.32;filter:grayscale(.3) sepia(.25)} .kr-end__media::after{content:"";position:absolute;inset:0;background:rgba(11,15,23,.55)} .kr-end__w{position:relative;max-width:900px;text-align:center} .kr-end__h{margin:0 0 18px;font-size:60px;line-height:1.04;letter-spacing:-.045em;font-weight:500;color:#fff;text-transform:none} .kr-end__claim{margin:0 0 22px;font-size:22px;color:var(--k-yel);font-weight:500} .kr-end__p{margin:0 auto 36px;font-size:18px;line-height:1.65;color:rgba(255,255,255,.8);max-width:680px} .kr-end .kr-cta{justify-content:center} .kr-end__mail{margin:28px 0 0;font-size:15px;color:rgba(255,255,255,.75)} .kr-end__mail a,.kr-mail{color:inherit} .kr-end .kr-draft{text-align:left} /* Stellendetail / Bewerbung */ .kr-jhero{position:relative;background:var(--k-bg);color:var(--k-txt);padding:132px 0 72px;overflow:hidden} .kr-jhero_s{padding-bottom:56px} .kr-jhero__w{position:relative;max-width:var(--wrap)} .kr-h1_job{font-size:54px;max-width:900px} .kr-jfacts{list-style:none;margin:0 0 32px;padding:0;display:flex;flex-wrap:wrap;gap:12px} .kr-jfacts li{padding:12px 18px;border:1px solid var(--k-line);border-radius:var(--r);font-size:16px;color:var(--k-txt)} .kr-jfacts span{display:block;font-size:12px;color:var(--k-mute);margin-bottom:2px} .kr-jbody{display:grid;grid-template-columns:1fr 360px;gap:64px;padding-top:72px;padding-bottom:120px;align-items:start} .kr-jintro{font-size:18px;line-height:1.7;color:var(--ink-2)} .kr-jsec{padding:32px 0;border-top:1px solid var(--line)} .kr-jsec h2{margin:0 0 18px;font-size:26px;font-weight:500;letter-spacing:-.02em;color:var(--ink);text-transform:none} .kr-jsec p{margin:0;font-size:17px;line-height:1.65;color:var(--ink-2)} .kr-jlist{margin:0;padding:0;list-style:none;display:grid;gap:12px} .kr-jlist li{position:relative;padding-left:28px;font-size:17px;line-height:1.6;color:var(--ink-2)} .kr-jlist li::before{content:"";position:absolute;left:0;top:11px;width:14px;height:1.5px;background:var(--k-blue)} .kr-jlist_soft li::before{background:var(--mute)} .kr-jsteps{margin:0;padding-left:20px;display:grid;gap:10px;font-size:15.5px;line-height:1.55;color:var(--ink-2)} .kr-jsteps b{color:var(--ink);font-weight:500} .kr-jnote{margin:24px 0 0;font-size:14px;color:var(--mute)} .kr-jside{position:sticky;top:110px;display:grid;gap:20px} .kr-jside__box{padding:28px;border:1px solid var(--line);border-radius:var(--r);background:var(--k-off)} .kr-jside__h{margin:0 0 10px;font-size:20px;font-weight:500;color:var(--ink)} .kr-jside__box>p{margin:0 0 20px;font-size:15px;line-height:1.55;color:var(--ink-2)} .kr-jside__box .kr-jsteps{margin-bottom:6px} .kr-jside__mail{margin:18px 0 0!important;font-size:14px!important} .kr-link_dark{margin-top:0;color:var(--ink)} .kr-form{display:grid;gap:18px} .kr-alert{margin:0;padding:12px 14px;border:1px solid #e5484d;background:#fdeeee;color:#7a1d20;font-size:14px;border-radius:6px} .kr-row{display:grid;grid-template-columns:1fr 1fr;gap:18px} .kr-f{display:flex;flex-direction:column;gap:6px} .kr-f label{font-size:14px;font-weight:500;color:var(--ink)} .kr-f label small{font-weight:400;color:var(--mute)} .kr-f label span{color:var(--k-blue)} .kr-f input,.kr-f select,.kr-f textarea{font:inherit;font-size:16px;padding:12px 14px;border:1px solid var(--line-2,#cfd3d9);border-radius:var(--r);background:#fff;color:var(--ink);transition:border-color .15s,box-shadow .15s} .kr-f input[type=file]{padding:10px;background:var(--k-off);cursor:pointer} .kr-f input:focus,.kr-f select:focus,.kr-f textarea:focus{outline:0;border-color:var(--k-blue);box-shadow:0 0 0 3px rgba(14,104,255,.15)} .kr-f.is-err input,.kr-f.is-err select{border-color:#e5484d} .kr-hint{font-size:13px;color:var(--mute)} .kr-err{font-size:13px;color:#c22d32} .kr-consent{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.55;color:var(--ink-2);cursor:pointer} .kr-consent input{margin-top:3px;flex:none;width:16px;height:16px;accent-color:var(--k-blue)} .kr-consent a{color:var(--ink)} .kr-consent.is-err{color:#c22d32} .kr-thanks{min-height:60vh;display:flex;align-items:center} /* Responsive */ @media (max-width:1100px){ .kr-h1{font-size:54px}.kr-h2{font-size:38px} .kr-principles li{grid-template-columns:60px 1fr 32px}.kr-principles__x{grid-column:2}.kr-principles__a{grid-row:1;grid-column:3} .kr-principles__t{font-size:32px} .kr-system{grid-template-columns:1fr}.kr-chain{grid-template-columns:1fr 1fr}.kr-chain li:nth-child(3){padding-left:0;border-left:0}.kr-chain li:nth-child(2) i{display:none} .kr-work__i summary{grid-template-columns:220px 1fr 24px}.kr-work__sit{padding-left:calc(220px + 56px)} } @media (max-width:960px){ .kr-hero{padding:112px 0 72px} .kr-hero__w,.kr-intro__grid,.kr-special__w,.kr-culture__top,.kr-head_split,.kr-perf__w,.kr-learn,.kr-grow__w,.kr-office__txt,.kr-jbody{grid-template-columns:1fr;gap:36px} .kr-hero__img{aspect-ratio:4/3} .kr-special__img{aspect-ratio:4/3} .kr-req__list,.kr-ben__grid{grid-template-columns:1fr 1fr} .kr-req__list li:not(:nth-child(3n+1)){padding-left:0;border-left:0} .kr-req__list li:nth-child(even){padding-left:28px;border-left:1px solid rgba(11,15,23,.14)} .kr-steps{grid-template-columns:1fr 1fr} .kr-office__grid{grid-template-columns:1fr 1fr;grid-template-rows:auto}.kr-office__f_big{grid-column:1/-1;grid-row:auto}.kr-office__f_detail{aspect-ratio:1} .kr-office__txt .kr-link{grid-column:1;margin-top:0} .kr-jside{position:static} .kr-work__i summary{grid-template-columns:1fr 24px;gap:6px 16px}.kr-work__x{grid-column:1}.kr-work__i summary i{grid-row:1;grid-column:2} .kr-work__sit{padding:0 24px 24px} } @media (max-width:640px){ .kr-hero{padding:96px 0 64px}.kr-scroll{display:none} .kr-crumbs{margin-bottom:28px} .kr-h1{font-size:40px}.kr-h1_job{font-size:34px}.kr-claim{font-size:19px} .kr-h2{font-size:30px}.kr-p{font-size:16.5px} .kr-intro,.kr-special,.kr-culture,.kr-gallery,.kr-req,.kr-perf,.kr-ben,.kr-grow,.kr-team,.kr-jobs,.kr-process{padding:72px 0} .kr-work{padding:24px 0 72px}.kr-office{padding-top:72px} .kr-exp__n{font-size:80px} .kr-chain{grid-template-columns:1fr}.kr-chain li,.kr-chain li+li{padding:18px 0;border-left:0;border-top:1px solid rgba(11,15,23,.14)}.kr-chain i{display:none} .kr-special__list div{grid-template-columns:1fr;gap:6px} .kr-principles li{grid-template-columns:44px 1fr;gap:10px 14px;padding:24px 0}.kr-principles__a{display:none}.kr-principles__t{font-size:26px} .kr-gal{grid-template-columns:1fr 1fr;grid-auto-rows:110px;gap:10px} .kr-gal__f_lead,.kr-gal__f_wide{grid-column:1/-1;grid-row:span 2} .kr-gal__f_small:nth-child(2),.kr-gal__f_small:nth-child(3){grid-column:auto;grid-row:span 2} .kr-gal__f_side{grid-column:1/-1;grid-row:span 2} .kr-req__list,.kr-ben__grid,.kr-steps,.kr-joblist,.kr-quotes{grid-template-columns:1fr} .kr-req__list li,.kr-req__list li:nth-child(even){padding:26px 0;border-left:0} .kr-req__end{font-size:23px} .kr-perf__list li{grid-template-columns:1fr;gap:2px} .kr-paths li{grid-template-columns:1fr;gap:6px;padding:20px} .kr-office__grid{grid-template-columns:1fr} .kr-empty{flex-direction:column;align-items:flex-start;padding:30px 24px} .kr-end{padding:104px 0 96px}.kr-end__h{font-size:38px}.kr-end__claim{font-size:19px} .kr-row{grid-template-columns:1fr} } @media (prefers-reduced-motion:reduce){ .kr-hero__glow,.kr-hero::after,.kr-scroll span,.kr-hero__img img,.kr-in{animation:none} .kr-js [data-io],.kr-js .kr-principles li[data-io] .kr-principles__t{opacity:1;transform:none;clip-path:none;transition:none} .kr-gal__btn img,.kr-ben__ico,.kr-paths li,.kr-job__a,.kr-btn svg,.kr-link svg{transition:none} .kr-gal__btn:hover img,.kr-paths li:hover,.kr-job__a:hover,.kr-ben__i:hover .kr-ben__ico{transform:none} } /* lokal.css */ /* Lokale Landingpages (/seo-siegen/) */ .lx-hero{padding:56px 0 0;background:#fff} .lx-hero__grid>*{min-width:0} .lx-hero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:64px;align-items:center} .lx-pin{display:inline-flex;align-items:center;gap:8px;margin:28px 0 18px;font-size:14px;color:var(--ink-2);padding:6px 12px;border:1px solid var(--line);border-radius:999px} .lx-pin svg{color:var(--blue)} .lx-h1{font-size:64px;line-height:1.02;letter-spacing:-.04em;font-weight:500;margin:0 0 24px;color:var(--ink);text-transform:none} .lx-h1 span{display:block;font-size:26px;line-height:1.3;letter-spacing:-.015em;color:var(--ink-2);margin-top:16px;font-weight:400} .lx-lead{max-width:560px} .lx-hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;margin-top:32px} .lx-btn{background:var(--blue)}.lx-btn:hover{background:var(--ink)} .lx-tel{color:var(--ink);font-weight:500;text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px}.lx-tel:hover{border-color:var(--ink)} .lx-hero__img{margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3.2;background:#e9ebee} .lx-hero__img img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.05)} .lx-facts{list-style:none;margin:64px 0 0;padding:28px 0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)} .lx-facts li{padding:0 28px;border-left:1px solid var(--line)}.lx-facts li:first-child{padding-left:0;border-left:0} .lx-facts b{display:block;font-size:28px;letter-spacing:-.02em;font-weight:500;color:var(--ink)} .lx-facts span{font-size:14px;color:var(--ink-2)}.lx-facts a{color:inherit} .lx-why{list-style:none;margin:0;padding:0;border-top:1px solid #d3d7dc} .lx-why li{display:grid;grid-template-columns:48px 1fr;gap:16px;padding:28px 0;border-bottom:1px solid #d3d7dc} .lx-why__n{font-size:13px;color:var(--blue);font-weight:500;padding-top:5px} .lx-why h3,.lx-srv h3,.lx-steps h3{margin:0 0 8px;font-size:21px;letter-spacing:-.015em;font-weight:500;color:var(--ink);text-transform:none} .lx-why p,.lx-srv p,.lx-steps p{margin:0;font-size:16px;line-height:1.6;color:var(--ink-2)} .lx-h2w{max-width:760px;margin-bottom:48px} .lx-srv{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} .lx-srv a{display:flex;flex-direction:column;height:100%;padding:28px;border:1px solid var(--line);border-radius:var(--r);text-decoration:none;transition:border-color .2s,transform .2s} .lx-srv a:hover{border-color:var(--ink);transform:translateY(-2px)} .lx-srv__go{margin-top:auto;padding-top:20px;display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:var(--blue)} .lx-lead_d{color:#c9ced6} .lx-check{list-style:none;margin:0 0 40px;padding:0} .lx-check li{position:relative;padding:16px 0 16px 34px;border-bottom:1px solid #262c36;font-size:17px;color:#fff} .lx-check li::before{content:"";position:absolute;left:0;top:19px;width:18px;height:18px;border-radius:50%;background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.2l2.6 2.6L13 6.4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat} .lx-addr{padding:24px;border:1px solid #262c36;border-radius:var(--r)} .lx-addr__k{margin:0 0 8px;font-size:13px;color:#9aa1ab} .lx-addr address{font-style:normal;font-size:17px;line-height:1.55;color:#fff;margin-bottom:14px} .lx-addr a{display:inline-flex;align-items:center;gap:10px;color:#fff;text-decoration:none;border-bottom:1px solid #3a4250;padding-bottom:2px}.lx-addr a:hover{border-color:#fff} .lx-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;counter-reset:s} .lx-steps li{padding-top:24px;border-top:2px solid var(--ink)} .lx-steps li:last-child{border-top-color:var(--blue)} .lx-steps span{display:block;font-size:13px;color:var(--mute);margin-bottom:14px} .lx-faq details{border-bottom:1px solid #d3d7dc} .lx-faq details:first-child{border-top:1px solid #d3d7dc} .lx-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;padding:22px 0;font-size:18px;font-weight:500;color:var(--ink)} .lx-faq summary::-webkit-details-marker{display:none} .lx-faq summary i{flex:none;width:22px;height:22px;position:relative;margin-top:2px} .lx-faq summary i::before,.lx-faq summary i::after{content:"";position:absolute;left:4px;right:4px;top:10px;height:1.6px;background:currentColor;transition:transform .2s} .lx-faq summary i::after{transform:rotate(90deg)} .lx-faq details[open] summary i::after{transform:rotate(0)} .lx-faq p{margin:0 0 22px;font-size:16px;line-height:1.65;color:var(--ink-2);max-width:640px} @media (max-width:1000px){ .lx-hero__grid{grid-template-columns:1fr;gap:40px}.lx-h1{font-size:48px} .lx-srv{grid-template-columns:1fr 1fr}.lx-steps{grid-template-columns:1fr 1fr} } @media (max-width:640px){ .lx-hero{padding-top:32px}.lx-h1{font-size:38px}.lx-h1 span{font-size:20px} .lx-facts{grid-template-columns:1fr;gap:18px}.lx-facts li{padding:0;border-left:0} .lx-srv,.lx-steps{grid-template-columns:1fr} } @media (prefers-reduced-motion:reduce){.lx-srv a{transition:none}.lx-srv a:hover{transform:none}} /* guide.css */ /* Landingpage SEO-GEO-Guide (Präfix gd-) */ .gd-draft{margin:0;padding:10px 20px;background:#fff3c4;font-size:13px;text-align:center} .gd-tbn{margin:12px 0;padding:10px 14px;border-left:3px solid #ffd84d;background:rgba(255,216,77,.12);font-size:13px;color:#e8d38a} .gd-hero{position:relative;overflow:hidden;background:#0b0f17;color:#fff;padding:140px 0 0} .gd-hero__grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:48px 48px;-webkit-mask:radial-gradient(circle at 70% 40%,#000 0,transparent 70%);mask:radial-gradient(circle at 70% 40%,#000 0,transparent 70%);animation:gdGrid 40s linear infinite} @keyframes gdGrid{to{background-position:48px 48px}} .gd-hero__w{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center} .gd-eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 22px;font-size:14px;font-weight:500;color:#9ec0ff} .gd-eyebrow span{width:8px;height:8px;border-radius:50%;background:#0E68FF;box-shadow:0 0 0 4px rgba(14,104,255,.25)} .gd-h1{margin:0 0 20px;font-size:58px;font-weight:500;letter-spacing:-.03em;line-height:1.04;color:#fff} .gd-sub{margin:0 0 28px;max-width:620px;font-size:19px;line-height:1.55;color:#b9bec6} .gd-inside{margin:0 0 32px;padding:0;list-style:none;display:grid;gap:10px} .gd-inside li{display:flex;gap:14px;align-items:baseline;font-size:15.5px;color:#e7eaee} .gd-inside span{flex:none;font-size:12px;font-weight:600;color:#6ea2ff;font-variant-numeric:tabular-nums} .gd-act{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px} .gd-btn{display:inline-flex;align-items:center;gap:10px;padding:16px 26px;border-radius:100px;background:#0E68FF;color:#fff!important;font-size:16px;font-weight:500;text-decoration:none!important;box-shadow:0 10px 30px rgba(14,104,255,.35);transition:background .2s,transform .2s,box-shadow .2s} .gd-btn:hover{background:#0a55d6;transform:translateY(-2px);box-shadow:0 14px 34px rgba(14,104,255,.45)} .gd-btn:focus-visible{outline:2px solid #fff;outline-offset:3px} .gd-btn_ghost{background:#0b0f17;box-shadow:none}.gd-btn_ghost:hover{background:#0E68FF;box-shadow:none} .gd-free{font-size:13px;color:#8b919a} .gd-rating{margin-top:28px} .gd-hero__vis{position:relative;display:flex;justify-content:center;padding-bottom:20px} .gd-book{position:relative;width:min(420px,100%);animation:gdFloat 7s ease-in-out infinite} .gd-book::before{content:"";position:absolute;left:12%;right:12%;bottom:-18px;height:40px;background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent);filter:blur(6px)} .gd-book img{position:relative;display:block;width:100%;height:auto} @keyframes gdFloat{50%{transform:translateY(-12px) rotate(-.6deg)}} .gd-engines{position:absolute;inset:0;margin:0;padding:0;list-style:none;pointer-events:none} .gd-engines li{position:absolute;padding:7px 13px;border-radius:100px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(6px);font-size:12.5px;color:#e7eaee;opacity:0;animation:gdChip .6s calc(.4s + var(--i)*.15s) forwards} .gd-engines li:nth-child(1){left:-4%;top:14%}.gd-engines li:nth-child(2){right:-2%;top:8%}.gd-engines li:nth-child(3){left:-8%;top:52%} .gd-engines li:nth-child(4){right:-6%;top:44%}.gd-engines li:nth-child(5){left:4%;bottom:12%}.gd-engines li:nth-child(6){right:2%;bottom:18%} @keyframes gdChip{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .gd-facts{position:relative;display:flex;flex-wrap:wrap;gap:48px;margin:56px 0 0;padding:28px 0 36px;list-style:none;border-top:1px solid rgba(255,255,255,.12)} .gd-facts li{display:flex;flex-direction:column;gap:2px}.gd-facts b{font-size:22px;font-weight:500;color:#fff}.gd-facts span{font-size:13px;color:#8b919a} .gd-press{padding:28px 0;border-bottom:1px solid var(--line)} .gd-press__w{display:flex;align-items:center;gap:40px;flex-wrap:wrap} .gd-press p{margin:0;font-size:13px;color:var(--mute)} .gd-press ul{display:flex;flex-wrap:wrap;align-items:center;gap:44px;margin:0;padding:0;list-style:none} .gd-press img{height:26px;width:auto;filter:grayscale(1);opacity:.7} .gd-sec{padding:104px 0}.gd-sec_grey{background:var(--tint)} .gd-k{margin:0 0 14px;font-size:14px;font-weight:500;color:#0E68FF}.gd-k_light{color:#6ea2ff} .gd-h2{margin:0 0 20px;font-size:40px;font-weight:500;letter-spacing:-.025em;line-height:1.12;color:var(--ink)}.gd-h2_light{color:#fff} .gd-p{margin:0 0 18px;font-size:17px;line-height:1.65;color:var(--ink-2)}.gd-p_light{color:#b9bec6} .gd-split{display:grid;grid-template-columns:.9fr 1.1fr;gap:72px;align-items:start} .gd-steps{margin:0;padding:0;list-style:none;display:grid;gap:16px} .gd-steps li{display:flex;gap:22px;padding:28px;border:1px solid var(--line);border-radius:14px;background:#fff;transition:border-color .25s,box-shadow .25s} .gd-steps li:hover{border-color:var(--line-2);box-shadow:0 14px 34px rgba(11,15,23,.07)} .gd-steps__n{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:#eef4ff;color:#0E68FF;font-weight:600;font-size:15px} .gd-steps h3{margin:0 0 6px;font-size:19px;font-weight:500;line-height:1.3;color:var(--ink)} .gd-steps p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-2)} .gd-peek{background:#0b0f17;padding:104px 0;overflow:hidden} .gd-peek__w{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center} .gd-peek__img{margin:0}.gd-peek__img img{display:block;width:115%;max-width:none;height:auto;margin-left:-10%} .gd-quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px} .gd-q{margin:0;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff} .gd-q .cx-vid__media{aspect-ratio:4/5;border-radius:0} .gd-q figcaption{padding:22px 22px 24px} .gd-q blockquote{margin:0 0 14px;font-size:15px;line-height:1.6;color:var(--ink)} .gd-q b{display:block;font-size:14px;font-weight:500;color:var(--ink)}.gd-q span{font-size:13px;color:var(--mute)} .gd-for{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start} .gd-for__cols{display:grid;grid-template-columns:1.3fr 1fr;gap:20px} .gd-for ul{margin:0;padding:24px;list-style:none;display:grid;gap:12px;border-radius:14px} .gd-for__yes{background:#fff;border:1px solid var(--line)}.gd-for__no{background:transparent;border:1px dashed var(--line-2)} .gd-for li{position:relative;padding-left:28px;font-size:15px;line-height:1.5;color:var(--ink-2)} .gd-for li::before{content:"";position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:50%;background:#0E68FF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat} .gd-for__no li::before{background:#d6dae0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 5l6 6M11 5l-6 6' stroke='%233d434c' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/12px no-repeat} .gd-author{display:flex;gap:14px;align-items:center;margin-top:28px} .gd-author img{width:56px;height:56px;border-radius:50%;object-fit:cover;filter:grayscale(1)} .gd-author p{margin:0;font-size:13.5px;line-height:1.45;color:var(--mute)}.gd-author b{display:block;color:var(--ink);font-weight:500} .gd-author a{color:var(--ink)} .gd-faq details{border-bottom:1px solid var(--line)} .gd-faq summary{display:flex;justify-content:space-between;gap:20px;padding:22px 0;cursor:pointer;list-style:none;font-size:17px;font-weight:500;color:var(--ink)} .gd-faq summary::-webkit-details-marker{display:none} .gd-faq summary::after{content:"+";font-size:22px;line-height:1;color:#0E68FF;transition:transform .2s} .gd-faq details[open] summary::after{transform:rotate(45deg)} .gd-faq p{margin:0 0 22px;font-size:15.5px;line-height:1.65;color:var(--ink-2)} .gd-final{position:relative;overflow:hidden;background:#0b0f17;padding:96px 0} .gd-final::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:48px 48px} .gd-final__w{position:relative;display:grid;grid-template-columns:260px 1fr;gap:56px;align-items:center} .gd-final__img{width:100%;height:auto} .gd-more{margin:28px 0 0;font-size:13.5px;color:#8b919a}.gd-more a{color:#c9cdd3} @media (max-width:1024px){.gd-h1{font-size:44px}.gd-hero__w,.gd-split,.gd-peek__w,.gd-for{grid-template-columns:1fr;gap:40px}.gd-quotes{grid-template-columns:1fr 1fr}} @media (max-width:700px){.gd-hero{padding:112px 0 0}.gd-h1{font-size:36px}.gd-sub{font-size:17px}.gd-hero__vis{order:-1}.gd-book{width:62%}.gd-engines{display:none} .gd-h2{font-size:30px}.gd-sec,.gd-peek{padding:72px 0}.gd-quotes{grid-template-columns:1fr}.gd-for__cols{grid-template-columns:1fr} .gd-final__w{grid-template-columns:1fr;gap:28px}.gd-final__img{width:150px}.gd-btn{width:100%;justify-content:center}.gd-facts{gap:28px} .gd-peek__img img{width:100%;margin:0}.gd-press ul{gap:24px}.gd-press img{height:20px}} @media (prefers-reduced-motion:reduce){.gd-hero__grid,.gd-book{animation:none}.gd-engines li{animation:none;opacity:1}} .gd-q__num{display:flex;flex-direction:column;gap:4px;margin:0 0 16px;padding:0 0 16px;border-bottom:1px solid var(--line)} .gd-q__num b{font-size:34px;font-weight:500;letter-spacing:-.02em;line-height:1;color:#0E68FF;font-variant-numeric:tabular-nums} .gd-q__num span{font-size:13.5px;line-height:1.4;color:var(--ink-2)} /* Industrie-Cases auf Funnelseiten (29.10.) */ .gd-cases{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:28px} .gd-case{display:flex;flex-direction:column;gap:10px;padding:28px;border:1px solid var(--line);border-radius:16px;background:#fff;text-decoration:none!important;color:var(--ink);transition:border-color .2s,transform .2s} .gd-case:hover{border-color:var(--ink);transform:translateY(-2px)} .gd-case img{height:34px;width:auto;max-width:180px;object-fit:contain;object-position:left;margin-bottom:6px} .gd-case__k{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)} .gd-case__h{font-size:20px;font-weight:500;line-height:1.3} .gd-case__go{margin-top:auto;padding-top:10px;font-size:15px;font-weight:500;color:#0E68FF} @media (max-width:800px){.gd-cases{grid-template-columns:1fr}} @media (prefers-reduced-motion:reduce){.gd-case{transition:none}.gd-case:hover{transform:none}} /* referenzen.css */ /* Referenzen & Case Studies (Präfix rf-), 28.10.2026 */ .rf{--rf-blue:#0E68FF;--rf-dark:#0b0f17} .rf-draft{margin:16px 0;padding:12px 16px;border:1px dashed #e6c867;border-radius:12px;background:#fff8dc;font-size:13px;line-height:1.5;color:#5b4a10} .rf-draft b{display:block;margin-bottom:4px}.rf-draft ul{margin:0;padding-left:18px} .rf-draft_sm{margin:10px 0 0;padding:4px 10px;display:inline-block} /* Buttons & Links */ .rf-btn{display:inline-flex;align-items:center;gap:12px;padding:15px 24px;border-radius:999px;font-size:15.5px;font-weight:500;text-decoration:none!important;transition:background-color .2s,color .2s,border-color .2s} .rf-btn svg{transition:transform .2s}.rf-btn:hover svg{transform:translateX(3px)} .rf-btn_blue{background:var(--rf-blue);color:#fff!important}.rf-btn_blue:hover{background:#0a55d6} .rf-btn_ghost{border:1px solid rgba(255,255,255,.28);color:#fff!important}.rf-btn_ghost:hover{border-color:#fff} .rf-btn:focus-visible,.rf-chip:focus-visible,.rf-card__a:focus-visible,.rf-link:focus-visible{outline:2px solid var(--rf-blue);outline-offset:3px} .rf-link{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:500;color:var(--ink)!important;text-decoration:none!important;border-bottom:1px solid var(--line-2);padding-bottom:3px} .rf-link:hover{border-color:var(--ink)} /* Typo */ .rf-k{margin:0 0 12px;font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--rf-blue)} .rf-k_light{color:#6ea2ff} .rf-h2{margin:0 0 18px;font-size:42px;font-weight:500;letter-spacing:-.025em;line-height:1.1;color:var(--ink)} .rf-h2_light{color:#fff} .rf-lead{margin:0 0 24px;font-size:18px;line-height:1.6;color:var(--ink-2);max-width:640px} .rf-sec{padding:112px 0} /* Hero */ .rf-hero{position:relative;overflow:hidden;background:var(--rf-dark);color:#fff;padding:150px 0 110px} .rf-hero__glow{position:absolute;right:-12%;top:-30%;width:70%;height:140%;background:radial-gradient(closest-side,rgba(14,104,255,.22),transparent 70%);pointer-events:none} .rf-hero__glow_b{left:-15%;right:auto;top:auto;bottom:-60%} .rf-hero__w{position:relative} .rf-crumbs a,.rf-crumbs span{color:#8b919a!important}.rf-crumbs a:hover{color:#fff!important} .rf-eyebrow{margin:28px 0 22px;font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#6ea2ff} .rf-h1{margin:0 0 32px;font-size:72px;font-weight:500;letter-spacing:-.035em;line-height:1.02;color:#fff;max-width:1100px} .rf-h1__b{color:#8b919a} .rf-hero__txt{max-width:720px;font-size:19px;line-height:1.6;color:#c9cdd3} .rf-hero__txt p{margin:0 0 12px} .rf-hero__sm{font-size:16px;color:#8b919a} .rf-hero__act{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px} /* Filter */ .rf-pick{padding-top:96px} .rf-pick__head{max-width:760px;margin-bottom:32px} .rf-filter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:8px} .rf-chip{display:inline-flex;align-items:center;gap:10px;padding:11px 18px;border:1px solid var(--line);border-radius:999px;background:#fff;font:inherit;font-size:14.5px;color:var(--ink);cursor:pointer;transition:background-color .15s,border-color .15s,color .15s} .rf-chip span{font-size:12px;color:var(--mute);font-variant-numeric:tabular-nums} .rf-chip:hover{border-color:var(--ink)} .rf-chip.is-on{background:var(--ink);border-color:var(--ink);color:#fff}.rf-chip.is-on span{color:#9ea4ad} .rf-filter__live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} /* Flaggschiff-Karten */ .rf-flag{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:36px} .rf-card{position:relative} .rf-card[hidden],[data-rf-list][hidden]{display:none!important} .rf-card__a{display:flex;flex-direction:column;height:100%;text-decoration:none!important;color:inherit;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;transition:border-color .25s,box-shadow .3s,transform .3s} .rf-card__a:hover{border-color:var(--line-2);box-shadow:0 22px 50px rgba(11,15,23,.09);transform:translateY(-3px)} .rf-card__img{position:relative;margin:0;aspect-ratio:16/10;overflow:hidden;background:var(--tint);border-bottom:1px solid var(--line)} .rf-card__img>img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1)} .rf-card__a:hover .rf-card__img>img{transform:scale(1.035)} .rf-card__logo{position:absolute;left:18px;bottom:18px;display:flex;align-items:center;height:48px;padding:10px 16px;background:#fff;border-radius:12px;box-shadow:0 6px 20px rgba(11,15,23,.12)} .rf-card__logo img{max-height:26px;max-width:140px;width:auto;height:auto;display:block} .rf-card__b{display:flex;flex-direction:column;gap:10px;padding:28px 30px 30px;flex:1} .rf-card__k{margin:0;font-size:12px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--mute)} .rf-card__h{margin:0;font-size:23px;font-weight:500;letter-spacing:-.015em;line-height:1.25;color:var(--ink)} .rf-card__t{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-2)} .rf-card__go{display:inline-flex;align-items:center;gap:10px;margin-top:auto;padding-top:12px;font-size:15px;font-weight:500;color:var(--rf-blue)} .rf-card__go svg{transition:transform .2s}.rf-card__a:hover .rf-card__go svg{transform:translateX(4px)} /* Prinzipien */ .rf-prin{background:var(--tint);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .rf-prin__w{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start} .rf-prin__list{margin:0;padding:0;list-style:none;display:grid;gap:0;border-top:1px solid var(--line-2)} .rf-prin__list li{display:flex;gap:24px;padding:26px 0;border-bottom:1px solid var(--line-2)} .rf-prin__n{flex:none;font-size:14px;font-weight:500;color:var(--rf-blue);font-variant-numeric:tabular-nums;padding-top:3px} .rf-prin__list h3{margin:0 0 6px;font-size:20px;font-weight:500;color:var(--ink)} .rf-prin__list p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-2)} /* Weitere Projekte */ .rf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px} .rf-card_sm .rf-card__b{padding:26px} .rf-card__top{display:flex;flex-direction:column;gap:14px;margin-bottom:6px} .rf-card__lg{max-height:28px;max-width:150px;width:auto;height:auto;align-self:flex-start} .rf-card_sm .rf-card__h{font-size:19px} .rf-mini{margin:44px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)} .rf-mini__i{padding:28px 28px 28px 0;border-bottom:1px solid var(--line)} .rf-mini__i[hidden]{display:none} .rf-mini__top{height:34px;display:flex;align-items:center;margin-bottom:14px} .rf-mini__top img{max-height:26px;max-width:140px;width:auto;height:auto} .rf-mini__top b{font-size:17px;font-weight:500} .rf-mini__t{margin:8px 0 12px;font-size:15px;line-height:1.55;color:var(--ink-2)} .rf-mini__a{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--ink)!important;text-decoration:none!important} .rf-mini__a:hover{color:var(--rf-blue)!important} .rf-empty{margin:28px 0 0;font-size:15px;color:var(--ink-2)} .rf-empty__b{border:0;background:none;padding:0;font:inherit;color:var(--rf-blue);text-decoration:underline;cursor:pointer} /* Kundenstimmen */ .rf-voices{padding-top:0} .rf-voices__head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px;margin-bottom:32px} .rf-voices__row{display:grid;grid-template-columns:repeat(5,1fr);gap:16px} .rf-voice{margin:0} .rf-voice .cx-vid__media{aspect-ratio:9/14;border-radius:14px} .rf-voice figcaption{padding-top:12px} .rf-voice b{display:block;font-size:14.5px;font-weight:500;color:var(--ink)} .rf-voice span{font-size:13px;color:var(--mute);line-height:1.4} /* Abschluss */ .rf-final{position:relative;overflow:hidden;background:var(--rf-dark);padding:120px 0} .rf-final__w{position:relative;max-width:960px} .rf-final__h{margin:0 0 22px;font-size:56px;font-weight:500;letter-spacing:-.03em;line-height:1.06;color:#fff} .rf-final__t{margin:0;font-size:18px;line-height:1.65;color:#b9bec6;max-width:720px} /* Chart */ .rf-chart{margin:0;padding:22px 22px 16px;border:1px solid var(--line);border-radius:16px;background:#fff} .rf-chart__head{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 16px;margin-bottom:12px;font-size:14px} .rf-chart__head b{font-weight:500;color:var(--ink)}.rf-chart__head span{color:var(--mute)} .rf-chart svg{display:block;width:100%;height:240px;overflow:visible} .rf-chart__grid{stroke:#eef0f2;stroke-width:1;vector-effect:non-scaling-stroke} .rf-chart__ax{font-size:11px;fill:#8b919a;font-family:inherit} .rf-chart__area{fill:rgba(14,104,255,.09)} .rf-chart__line{fill:none;stroke:var(--rf-blue);stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke} .cx-anim .rf-chart__line{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.2s ease} .cx-anim .rf-chart.is-in .rf-chart__line{stroke-dashoffset:0} .cx-anim .rf-chart__area{opacity:0;transition:opacity 1s ease 1.2s} .cx-anim .rf-chart.is-in .rf-chart__area{opacity:1} .rf-chart__src{margin:10px 0 0;font-size:12px;line-height:1.5;color:var(--mute)} /* ---------- Detailseite ---------- */ .rf-d__hero{padding:140px 0 90px} .rf-d__hw{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center} .rf-d__h1{font-size:54px;margin-bottom:22px} .rf-d__sub{margin:0 0 30px} .rf-d__facts{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:12px 40px;margin:0;padding-top:24px;border-top:1px solid rgba(255,255,255,.14)} .rf-d__facts dt{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#8b919a;margin-bottom:4px} .rf-d__facts dd{margin:0;font-size:15px;color:#fff;max-width:240px;line-height:1.4} .rf-d__shot{position:relative;margin:0;border-radius:16px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.1)} .rf-d__shot>img{display:block;width:100%;height:auto} .rf-d__body{padding-bottom:20px} .rf-d__sec{padding-top:96px} .rf-d__sec_split{display:grid;grid-template-columns:1fr 1fr;gap:72px} .rf-d__lab{display:flex;align-items:center;gap:14px;margin-bottom:6px} .rf-d__lab .rf-k{margin:0} .rf-d__n{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--line-2);font-size:12.5px;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums} .rf-d__h{font-size:36px;margin-top:10px} .rf-d__txt{max-width:720px} .rf-d__txt p{margin:0 0 16px;font-size:17.5px;line-height:1.7;color:var(--ink-2)} .rf-d__lever{margin-top:104px;background:var(--rf-dark);padding:100px 0;position:relative;overflow:hidden} .rf-d__lever::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:56px 56px;pointer-events:none} .rf-d__lever-w{position:relative} .rf-d__lever .rf-d__n{border-color:rgba(255,255,255,.3);color:#fff} .rf-d__lever-t{max-width:900px;margin-top:10px} .rf-d__lever-t p{margin:0 0 16px;font-size:18px;line-height:1.65;color:#b9bec6} .rf-d__lever-t .rf-d__lever-big{font-size:28px;line-height:1.4;letter-spacing:-.01em;color:#fff;padding-left:24px;border-left:3px solid var(--rf-blue)} .rf-d__steps{margin:32px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px} .rf-d__steps li{padding:28px;border:1px solid var(--line);border-radius:16px;background:#fff} .rf-d__steps span{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#eef4ff;color:var(--rf-blue);font-weight:600;margin-bottom:18px} .rf-d__steps h3{margin:0 0 8px;font-size:18px;font-weight:500;line-height:1.3;color:var(--ink)} .rf-d__steps p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-2)} .rf-d__res-g{margin-top:24px} .rf-d__res-g.has-chart{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start} .rf-d__kpis{display:grid;gap:16px;margin:24px 0} .rf-d__kpis>div{padding:20px 22px;border-left:3px solid var(--rf-blue);background:var(--tint);border-radius:0 12px 12px 0} .rf-d__kpis dd{margin:0;font-size:38px;font-weight:500;letter-spacing:-.02em;line-height:1.05;color:var(--rf-blue)} .rf-d__kpis dt{margin-top:6px;font-size:15px;color:var(--ink)} .rf-d__def{margin:8px 0 0!important;font-size:12.5px!important;line-height:1.5!important;color:var(--mute)!important} .rf-d__attr{font-size:13.5px!important;color:var(--mute)!important} .rf-d__q{margin:48px 0 0;padding:36px 40px;border:1px solid var(--line);border-radius:18px;background:#fff;max-width:900px} .rf-d__q blockquote{margin:0 0 18px;font-size:22px;line-height:1.5;letter-spacing:-.01em;color:var(--ink)} .rf-d__q b{display:block;font-size:15px;font-weight:500;color:var(--ink)} .rf-d__q span,.rf-d__q span a{font-size:13.5px;color:var(--mute)} .rf-d__q_vid{display:grid;grid-template-columns:200px 1fr;gap:32px;align-items:center} .rf-d__q_vid .cx-vid__media{aspect-ratio:9/14;border-radius:14px} .rf-d__learn{margin-top:104px;padding:96px 0;background:var(--tint);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .rf-d__learn-t{margin:16px 0 0;max-width:900px;font-size:28px;line-height:1.45;letter-spacing:-.012em;color:var(--ink)} .rf-d__next{display:grid;grid-template-columns:.8fr 1.2fr;gap:72px;align-items:start} .rf-d__links ul{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)} .rf-d__links li{border-bottom:1px solid var(--line)} .rf-d__links a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;font-size:16px;color:var(--ink)!important;text-decoration:none!important} .rf-d__links a:hover{color:var(--rf-blue)!important} .rf-d__transfer{padding:40px;border-radius:18px;background:var(--rf-dark)} .rf-d__transfer .rf-h2{color:#fff;font-size:32px} .rf-d__transfer .rf-lead{color:#b9bec6;font-size:16.5px} .rf-d__rel{padding:96px 0 40px} /* Einblend-Animation (nur mit JS) */ .cx-anim .rf-flag .rf-card,.cx-anim .rf-grid .rf-card{opacity:0;transform:translateY(18px);animation:rfIn .7s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(.08s * var(--i) + .15s)} @keyframes rfIn{to{opacity:1;transform:none}} /* Responsive */ @media (max-width:1100px){.rf-h1{font-size:56px}.rf-d__h1{font-size:44px}.rf-voices__row{grid-template-columns:repeat(3,1fr)}.rf-grid,.rf-mini{grid-template-columns:1fr 1fr}} @media (max-width:900px){ .rf-flag,.rf-prin__w,.rf-d__hw,.rf-d__sec_split,.rf-d__res-g.has-chart,.rf-d__next{grid-template-columns:1fr;gap:36px} .rf-d__shot{order:-1} } @media (max-width:700px){ .rf-sec{padding:72px 0} .rf-hero{padding:120px 0 72px} .rf-h1{font-size:38px}.rf-d__h1{font-size:34px} .rf-h2{font-size:30px}.rf-d__h{font-size:27px} .rf-hero__txt{font-size:17px} .rf-btn{width:100%;justify-content:center} .rf-filter{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 0 8px;padding:0 0 4px;scroll-snap-type:x proximity} .rf-filter::-webkit-scrollbar{display:none} .rf-chip{flex:none;scroll-snap-align:start} .rf-card__b{padding:22px} .rf-card__h{font-size:20px} .rf-grid,.rf-mini{grid-template-columns:1fr} .rf-mini__i{padding-right:0} .rf-voices__row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:62%;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px;padding:0 20px 6px} .rf-voice{scroll-snap-align:start} .rf-final{padding:84px 0}.rf-final__h{font-size:34px} .rf-d__facts{grid-template-columns:1fr 1fr} .rf-d__sec{padding-top:64px} .rf-d__lever,.rf-d__learn{margin-top:72px;padding:68px 0} .rf-d__lever-t .rf-d__lever-big,.rf-d__learn-t{font-size:21px} .rf-d__q{padding:24px}.rf-d__q blockquote{font-size:18px} .rf-d__q_vid{grid-template-columns:1fr}.rf-d__q_vid .cx-vid__media{max-width:240px} .rf-d__transfer{padding:28px} } @media (prefers-reduced-motion:reduce){ .cx-anim .rf-flag .rf-card,.cx-anim .rf-grid .rf-card{opacity:1;transform:none;animation:none} .rf-card__a,.rf-card__img>img,.rf-btn svg,.rf-card__go svg{transition:none} .rf-card__a:hover{transform:none} .cx-anim .rf-chart__line{stroke-dasharray:none;stroke-dashoffset:0;transition:none} .cx-anim .rf-chart__area{opacity:1;transition:none} } .rf-cslink{margin:14px 0 0} .rf-cslink a{display:inline-flex;align-items:center;gap:10px;padding:11px 18px;border-radius:999px;background:var(--ink,#0b0f17);color:#fff!important;font-size:14.5px;font-weight:500;text-decoration:none!important;transition:background-color .2s} .rf-cslink a:hover{background:#0E68FF} .rf-cslink a svg{transition:transform .2s}.rf-cslink a:hover svg{transform:translateX(3px)} /* Video-Figuren nutzen cx-vid ohne .cx-vids-Container → Einblendung abschalten */ .cx-anim .rf-voice.cx-vid,.cx-anim .rf-d__q.cx-vid{opacity:1;transform:none} /* Rankings-Block (29.10.) */ .rf-kw{margin-top:56px;padding:44px;border-radius:20px;background:var(--rf-dark);color:#fff;display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:start} .rf-kw__h{margin:0 0 14px;font-size:30px;font-weight:500;letter-spacing:-.02em;line-height:1.15;color:#fff} .rf-kw__i{margin:0;font-size:16.5px;line-height:1.6;color:#b9bec7} .rf-kw__stats{margin:32px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:22px 24px} .rf-kw__stats div{border-top:1px solid rgba(255,255,255,.14);padding-top:14px} .rf-kw__stats dd{margin:0;font-size:34px;font-weight:500;letter-spacing:-.02em;line-height:1;color:#fff} .rf-kw__stats div:first-child dd{color:#6ea2ff} .rf-kw__stats dt{margin-top:8px;font-size:13.5px;line-height:1.4;color:#9aa1ab} .rf-kw__list{display:flex;flex-direction:column;gap:6px} .rf-kw__row{display:grid;grid-template-columns:52px 1fr 1.1fr;gap:14px;align-items:center;padding:11px 14px;border-radius:12px;background:rgba(255,255,255,.04)} .rf-kw__row_h{background:none;padding-top:0;padding-bottom:4px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#7d848f} .rf-kw__pos b{display:inline-grid;place-items:center;min-width:34px;height:34px;padding:0 8px;border-radius:999px;border:1px solid rgba(255,255,255,.25);font-size:15px;font-weight:600;color:#fff} .rf-kw__row.is-top .rf-kw__pos b{background:var(--rf-blue);border-color:var(--rf-blue)} .rf-kw__row.is-top{background:rgba(14,104,255,.1)} .rf-kw__k{font-size:16px;font-weight:500;color:#fff} .rf-kw__v{display:flex;align-items:center;gap:12px} .rf-kw__v i{flex:1;height:6px;border-radius:6px;background:rgba(255,255,255,.08);position:relative;overflow:hidden} .rf-kw__v i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:6px;background:#6ea2ff} .rf-kw__v em{font-style:normal;min-width:62px;text-align:right;font-size:14.5px;font-variant-numeric:tabular-nums;color:#d6d9de} .rf-kw__note{margin:10px 0 0;font-size:13.5px;line-height:1.5;color:#9aa1ab} .rf-kw__src{grid-column:1/-1;margin:0;padding-top:18px;border-top:1px solid rgba(255,255,255,.1);font-size:12.5px;line-height:1.5;color:#7d848f} .cx-anim .rf-kw__row:not(.rf-kw__row_h){opacity:0;transform:translate3d(0,10px,0);transition:opacity .5s,transform .5s;transition-delay:calc(var(--i)*60ms)} .cx-anim .rf-kw__v i::after{transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i)*60ms + 200ms)} .cx-anim .rf-kw.is-in .rf-kw__row{opacity:1;transform:none} .cx-anim .rf-kw.is-in .rf-kw__v i::after{transform:none} @media (prefers-reduced-motion:reduce){.cx-anim .rf-kw__row:not(.rf-kw__row_h),.cx-anim .rf-kw__v i::after{opacity:1;transform:none;transition:none}} @media (max-width:900px){.rf-kw{grid-template-columns:1fr;padding:28px 20px;gap:28px}.rf-kw__h{font-size:24px}.rf-kw__stats dd{font-size:28px}.rf-kw__row{grid-template-columns:44px 1fr;row-gap:8px}.rf-kw__row_h span:last-child{display:none}.rf-kw__v{grid-column:2}} .rf-kw__g{padding:18px 4px 6px;font-size:13.5px;line-height:1.4;color:#9aa1ab} .rf-kw__g b{display:block;margin-bottom:2px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#6ea2ff} .rf-kw__row_h+.rf-kw__g{padding-top:4px} .rf-kw__layers{margin-top:32px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14)} .rf-kw__layers p{margin:0 0 12px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#7d848f} .rf-kw__layers ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px} .rf-kw__layers li{display:flex;align-items:baseline;gap:12px;font-size:14.5px;color:#b9bec7} .rf-kw__layers b{min-width:44px;font-size:18px;font-weight:500;color:#fff;font-variant-numeric:tabular-nums} /* Shopsystem-Badge (30.10.2026): nur Shopify/Shopware, Wiedererkennung für Shop-Betreiber */ .rf-sys{display:inline-flex;align-items:center;gap:7px;padding:5px 11px 5px 8px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:12.5px;font-weight:500;color:var(--ink);line-height:1;white-space:nowrap;vertical-align:middle} .rf-sys img{width:16px;height:16px;display:block} .rf-sys_img{position:absolute;right:16px;top:16px;z-index:2;box-shadow:0 6px 18px rgba(11,15,23,.14);border-color:transparent} .rf-card__top .rf-sys{margin-top:10px} .ix-case__shot{position:relative} .ix-case__shot .rf-sys_img{top:44px} /* ===== Ergebnisse-Raster (01.11.2026): alle Case Studies gleichwertig ===== */ .rf-pick__head{max-width:820px} .rf-filters{display:flex;flex-direction:column;gap:12px;margin:8px 0 6px} .rf-filter{align-items:center} .rf-filter__l{flex:none;width:76px;font-size:12px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--mute)} .rf-filter .rf-chip{padding:9px 16px;font-size:14px} .rf-cs{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:28px 24px} .rf-cs__i[hidden]{display:none!important} .rf-cs__a{display:flex;flex-direction:column;height:100%;text-decoration:none!important;color:inherit} .rf-cs__img{position:relative;display:block;margin:0;padding:0;border:0;width:100%;aspect-ratio:16/10;overflow:hidden;border-radius:16px;background:#0b0f17;cursor:pointer} .rf-cs__img>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .5s} .rf-cs__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,15,23,0) 35%,rgba(11,15,23,.72) 100%);transition:opacity .5s} .rf-cs__a:hover .rf-cs__img>img{transform:scale(1.05)} .rf-cs__a:hover .rf-cs__shade{opacity:.85} .rf-cs__logo{position:absolute;left:14px;top:14px;display:flex;align-items:center;height:40px;padding:8px 14px;background:#fff;border-radius:10px;box-shadow:0 6px 18px rgba(11,15,23,.14)} .rf-cs__logo img{max-height:22px;max-width:120px;width:auto;height:auto;display:block} .rf-cs__logo b{font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap} .rf-cs__kpi{position:absolute;left:16px;right:16px;bottom:14px;display:flex;align-items:baseline;gap:10px;color:#fff;transition:transform .5s cubic-bezier(.2,.7,.2,1)} .rf-cs__kpi b{font-size:30px;font-weight:500;letter-spacing:-.02em;line-height:1} .rf-cs__kpi span{font-size:13.5px;line-height:1.3;color:rgba(255,255,255,.88)} .rf-cs__a:hover .rf-cs__kpi{transform:translateY(-3px)} .rf-cs__b{display:flex;flex-direction:column;gap:10px;padding:20px 2px 0;flex:1} .rf-cs__k{margin:0;font-size:12px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--rf-blue)} .rf-cs__h{margin:0;font-size:22px;font-weight:500;letter-spacing:-.015em;line-height:1.28;color:var(--ink);transition:color .25s} .rf-cs__a:hover .rf-cs__h{color:#000} .rf-cs__tags{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px} .rf-cs__tags li{font-size:12.5px;line-height:1;padding:6px 10px;border:1px solid var(--line);border-radius:999px;color:var(--ink-2)} .rf-cs__go{display:inline-flex;align-items:center;gap:10px;margin-top:auto;padding-top:8px;font-size:15px;font-weight:500;color:var(--rf-blue)!important;text-decoration:none!important} .rf-cs__go svg{transition:transform .25s}.rf-cs__a:hover .rf-cs__go svg{transform:translateX(5px)} .rf-cs__a:focus-visible{outline:2px solid var(--rf-blue);outline-offset:6px;border-radius:16px} .rf-cs__vbadge{position:absolute;left:14px;top:14px;padding:7px 12px;border-radius:999px;background:rgba(11,15,23,.72);color:#fff;font-size:12px;font-weight:500;letter-spacing:.04em} .rf-cs__play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;display:grid;place-items:center;border-radius:50%;background:#fff;color:var(--ink);transition:transform .3s} .rf-yt:hover .rf-cs__play{transform:scale(1.08)} .rf-yt__f{border:0} .rf-cs__note{margin:36px 0 0;font-size:13.5px;color:var(--mute);max-width:720px} .rf-cs__i .rf-draft{margin-top:10px} .cx-anim .rf-cs__i{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(.06s * var(--i))} .cx-anim .rf-cs__i.is-in{opacity:1;transform:none} /* Arbeitsweise kompakt */ .rf-prin2{padding:72px 0;background:var(--tint,#f4f6f9);border-top:1px solid var(--line)} .rf-prin2__w{display:grid;grid-template-columns:1fr 1.4fr;gap:48px;align-items:start} .rf-prin2__h{margin:0;font-size:30px;font-weight:500;letter-spacing:-.02em;line-height:1.2;color:var(--ink)} .rf-prin2__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 32px} .rf-prin2__list li{display:flex;gap:12px;font-size:16px;line-height:1.45;color:var(--ink);padding-top:14px;border-top:1px solid var(--line-2)} .rf-prin2__list span{font-size:13px;color:var(--rf-blue);padding-top:2px} @media (max-width:1100px){.rf-cs{grid-template-columns:1fr 1fr}.rf-prin2__w{grid-template-columns:1fr;gap:28px}} @media (max-width:700px){ .rf-cs{grid-template-columns:1fr;gap:36px} .rf-filter__l{width:auto;margin-right:4px} .rf-cs__h{font-size:20px} .rf-cs__kpi b{font-size:26px} .rf-prin2{padding:56px 0}.rf-prin2__list{grid-template-columns:1fr} } @media (prefers-reduced-motion:reduce){ .cx-anim .rf-cs__i{opacity:1;transform:none;transition:none} .rf-cs__img>img,.rf-cs__kpi,.rf-cs__go svg{transition:none} .rf-cs__a:hover .rf-cs__img>img{transform:none} } .rf-cs__logo{min-width:56px;height:44px;padding:9px 14px} .rf-cs__logo img{max-height:24px;max-width:130px} .rf-cs__i .rf-draft{font-size:12px} .rf-cs__b{min-height:0} .rf-cs__i{display:flex;flex-direction:column} .rf-cs__a{height:auto;flex:1} @media (max-width:700px){.rf-filters{gap:6px}.rf-filter__l{display:none}.rf-filter[data-dim=svc]{margin-top:2px}} .rf-prin2+.rf-voices{padding-top:96px} /* Passende Case Studies auf Leistungsseiten */ .rf-sol{margin:40px 0 28px} .rf-sol__k{margin:0 0 14px;font-size:12px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:inherit;opacity:.7} .rf-sol__l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .rf-sol__l a{display:flex;flex-direction:column;gap:12px;height:100%;padding:20px 22px;border-radius:14px;background:#fff;border:1px solid rgba(11,15,23,.1);color:#0b0f17!important;text-decoration:none!important;transition:transform .25s,box-shadow .25s} .rf-sol__l a:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(11,15,23,.12)} .rf-sol__lg{height:26px;display:flex;align-items:center}.rf-sol__lg img{max-height:24px;max-width:130px;width:auto}.rf-sol__lg b{font-size:15px} .rf-sol__h{font-size:17px;line-height:1.35;font-weight:500} .rf-sol__go{margin-top:auto;font-size:14px;font-weight:500;color:#0E68FF} @media (max-width:900px){.rf-sol__l{grid-template-columns:1fr}} /* SEO/GEO-Texte (01.11.2026 spät) */ .rf-h1__pre{display:flex;align-items:center;gap:10px;margin:0 0 22px;font-size:13px;font-weight:500;letter-spacing:.12em;line-height:1.4;text-transform:uppercase;color:#6ea2ff} .rf-h1__pre::before{content:"";width:6px;height:6px;border-radius:50%;background:#0E68FF} .rf-hl{padding:44px 0;border-bottom:1px solid var(--line)} .rf-hl__h{margin:0 0 20px;font-size:13px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--mute)} .rf-hl__l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr)} .rf-hl__l li+li{border-left:1px solid var(--line)} .rf-hl__l a{display:flex;flex-direction:column;gap:6px;padding:4px 24px 4px 0;color:inherit;text-decoration:none!important} .rf-hl__l li+li a{padding-left:24px} .rf-hl__l b{font-size:40px;font-weight:500;letter-spacing:-.03em;line-height:1.05;color:var(--ink);transition:color .25s} .rf-hl__l a:hover b{color:var(--rf-blue)} .rf-hl__lab{font-size:15px;line-height:1.4;color:var(--ink-2)} .rf-hl__who{font-size:12.5px;line-height:1.4;color:var(--mute)} .rf-meth{border-top:1px solid var(--line)} .rf-meth__w{display:grid;grid-template-columns:1fr 1.25fr;gap:56px;align-items:start} .rf-meth__l{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:28px 32px} .rf-meth__l div{padding-top:16px;border-top:1px solid var(--line-2)} .rf-meth__l dt{font-size:17px;font-weight:500;color:var(--ink);margin-bottom:8px} .rf-meth__l dd{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2)} .rf-faq{border-top:1px solid var(--line)} @media (max-width:1100px){.rf-meth__w{grid-template-columns:1fr;gap:28px}.rf-hl__l{grid-template-columns:1fr 1fr;gap:24px 0}.rf-hl__l li:nth-child(3){border-left:0}.rf-hl__l li:nth-child(3) a{padding-left:0}} @media (max-width:640px){.rf-meth__l{grid-template-columns:1fr}.rf-hl__l b{font-size:30px}.rf-hl__l a{padding-right:12px}.rf-hl__l li+li a{padding-left:14px}.rf-hl__l li:nth-child(3) a{padding-left:0}} /* audit.css */ /* ===== SEO- & GEO-Audit (/loesungen/seo-audit/), 30.10.2026 · Präfix ad- ===== */ .ad .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .ad-h1{font-size:62px} /* Hero: Prioritätenmatrix (schematisch) */ .ad-mx{margin:0;border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:28px 28px 18px} .ad-mx__plot{position:relative;aspect-ratio:5/4;border-left:1px solid var(--ink);border-bottom:1px solid var(--ink);margin:0 0 14px 18px} .ad-mx__plot ul{list-style:none;margin:0;padding:0} .ad-mx__zone{position:absolute;left:0;top:0;width:50%;height:50%;background:rgba(14,104,255,.07);border-right:1px dashed rgba(14,104,255,.35);border-bottom:1px dashed rgba(14,104,255,.35);font-size:12px;color:var(--blue);padding:10px 12px;font-weight:500} .ad-mx__y{position:absolute;left:-30px;top:50%;transform:rotate(-90deg) translateX(50%);transform-origin:left top;font-size:12px;color:var(--mute);white-space:nowrap} .ad-mx__x{position:absolute;right:6px;bottom:6px;font-size:12px;color:var(--mute)} .ad-mx__pt{position:absolute;left:var(--x);bottom:var(--y);transform:translate(-50%,50%);display:flex;align-items:center;gap:8px} .ad-mx__pt::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--ink);flex:none} .ad-mx__pt_p1::before{background:var(--blue);box-shadow:0 0 0 5px rgba(14,104,255,.15)} .ad-mx__pt_p2::before{background:#fff;border:2px solid var(--blue)} .ad-mx__pt_p3::before{background:#fff;border:2px solid var(--ink)} .ad-mx__pt_p4::before{background:#c9cdd3} .ad-mx__pt span{font-size:13px;color:var(--ink);white-space:nowrap;background:rgba(255,255,255,.9);padding:1px 4px} .ad-mx__pt_p4 span{color:var(--mute)} /* Problem */ .ad-problem{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:end} .ad-problem .cx-display{margin:0;font-size:44px} .ad-problem__t .cx-lead+.cx-lead{margin-top:16px} .ad-three{list-style:none;margin:72px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #d3d7dc} .ad-three li{padding:32px 32px 0 0} .ad-three li+li{padding-left:32px;border-left:1px solid #d3d7dc} .ad-three h3{font-size:22px;font-weight:500;letter-spacing:-.015em;margin:0 0 10px;text-transform:none} .ad-three p{font-size:16px;line-height:1.6;color:var(--ink-2);margin:0} /* Sechs Analysefelder */ .ad-fields{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px} .ad-field{display:grid;grid-template-columns:56px 1fr;column-gap:8px;padding:40px 0;border-top:1px solid var(--line)} .ad-field>*:not(.ad-field__n){grid-column:2} .ad-field__n{grid-row:1/5;font-size:14px;font-weight:500;color:var(--blue);padding-top:6px} .ad-field h3{font-size:24px;font-weight:500;letter-spacing:-.02em;margin:0 0 8px;text-transform:none} .ad-field__q{font-size:17px;line-height:1.5;color:var(--ink);margin:0 0 20px} .ad-field__items{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-wrap:wrap;gap:8px} .ad-field__items li{font-size:13.5px;line-height:1.3;padding:6px 10px;border:1px solid var(--line);border-radius:var(--r);color:var(--ink-2);background:#fff} .ad-field__note{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:0;padding-left:14px;border-left:2px solid #ffd84d} .ad-links{margin:40px 0 0;font-size:15px;color:var(--ink-2)} .ad-links a{color:var(--ink);text-decoration:underline;text-underline-offset:3px} /* Roadmap */ .ad-road__head{max-width:860px} .ad-road__head .cx-h2{color:#fff;font-size:44px;margin-bottom:24px} .ad-road__head .cx-lead{color:#c9ced6} .ad-rm{margin:56px 0 0;background:#fff;color:var(--ink);border-radius:var(--r);padding:28px} .ad-rm__top{display:flex;align-items:center;gap:14px;margin-bottom:18px} .ad-rm__t{font-size:14px;color:var(--mute)} .ad-rm__scroll{overflow-x:auto} .ad-rm__tbl{width:100%;border-collapse:collapse;font-size:15px;min-width:760px} .ad-rm__tbl th{text-align:left;font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--mute);padding:0 14px 12px 0;border-bottom:1px solid var(--ink)} .ad-rm__tbl td{padding:16px 14px 16px 0;border-bottom:1px solid var(--line);vertical-align:middle;color:var(--ink-2)} .ad-rm__tbl td.ad-rm__m{color:var(--ink);font-weight:500} .ad-prio{display:inline-block;font-size:12px;font-weight:600;padding:4px 9px;border-radius:var(--r);border:1px solid var(--ink)} .ad-prio_p1{background:var(--blue);border-color:var(--blue);color:#fff} .ad-prio_p2{border-color:var(--blue);color:var(--blue)} .ad-prio_p3{color:var(--ink-2);border-color:var(--line-2)} .ad-rm__cap{margin:16px 0 0;font-size:13px;color:var(--mute)} .cx-anim .ad-rm__tbl tbody tr{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease;transition-delay:calc(.12s * var(--i))} .cx-anim .ad-rm.is-in .ad-rm__tbl tbody tr{opacity:1;transform:none} .ad-road__fields{margin-top:40px;display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 28px;color:#c9ced6;font-size:15px} .ad-road__fields p{margin:0;color:#fff} .ad-road__fields ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 24px} .ad-road__fields li::before{content:"";display:inline-block;width:6px;height:6px;background:var(--blue);margin-right:8px;vertical-align:middle} /* Umfänge */ .ad-scopes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:56px;align-items:stretch} .ad-scope{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);padding:32px 28px;background:#fff;transition:border-color .25s,box-shadow .25s,transform .25s} .ad-scope:hover{border-color:var(--ink);box-shadow:0 14px 36px rgba(11,15,23,.08);transform:translateY(-2px)} .ad-scope.is-hl{border:2px solid var(--blue);padding:31px 27px} .ad-scope.is-hl:hover{border-color:var(--blue)} .ad-scope__n{font-size:13px;color:var(--mute);margin:0 0 12px} .ad-scope.is-hl .ad-scope__n{color:var(--blue);font-weight:500} .ad-scope__t{font-size:28px;font-weight:500;letter-spacing:-.02em;margin:0 0 8px;text-transform:none} .ad-scope__sub{font-size:17px;line-height:1.45;color:var(--ink);margin:0 0 12px} .ad-scope__for{font-size:14.5px;line-height:1.55;color:var(--ink-2);margin:0 0 24px;padding-bottom:24px;border-bottom:1px solid var(--line)} .ad-scope__items{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:10px} .ad-scope__items li{position:relative;padding-left:22px;font-size:15px;line-height:1.45;color:var(--ink-2)} .ad-scope__items li::before{content:"";position:absolute;left:0;top:.5em;width:10px;height:6px;border-left:1.6px solid var(--blue);border-bottom:1.6px solid var(--blue);transform:rotate(-45deg)} .ad-scope__items li.is-all{color:var(--ink);font-weight:500} .ad-scope__res{margin:auto 0 24px;padding:16px;background:var(--tint);border-radius:var(--r);font-size:15px;line-height:1.5;color:var(--ink)} .ad-scope__res b{display:block;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--mute);font-weight:500;margin-bottom:4px} .ad-scope .cx-btn{justify-content:space-between} .ad-btn-o{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)} .ad-btn-o:hover{background:var(--ink);color:#fff} .ad-scope__note{margin:24px 0 0;font-size:14.5px;line-height:1.6;color:var(--ink-2);max-width:820px} /* Vergleich */ .ad-cmp{margin-top:72px} .ad-cmp__h{font-size:24px;font-weight:500;letter-spacing:-.015em;margin:0 0 20px;text-transform:none} .ad-cmp__tbl{width:100%;border-collapse:collapse;font-size:15px} .ad-cmp__tbl thead th{text-align:left;font-size:14px;font-weight:500;padding:0 16px 14px;border-bottom:1px solid var(--ink);width:22%} .ad-cmp__tbl thead th:first-child{width:34%;padding-left:0} .ad-cmp__tbl thead th.is-hl{color:var(--blue)} .ad-cmp__tbl tbody th{text-align:left;font-weight:400;color:var(--ink);padding:13px 16px 13px 0;border-bottom:1px solid var(--line)} .ad-cmp__tbl td{padding:13px 16px;border-bottom:1px solid var(--line)} .ad-cmp__tbl td.is-hl{background:rgba(14,104,255,.04)} .ad-v{font-size:14px} .ad-v::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:1px} .ad-v_f{color:var(--ink-2)}.ad-v_f::before{border:1.5px solid var(--blue)} .ad-v_v{color:var(--ink)}.ad-v_v::before{background:linear-gradient(90deg,var(--blue) 50%,#fff 50%);border:1.5px solid var(--blue)} .ad-v_u{color:var(--ink);font-weight:500}.ad-v_u::before{background:var(--blue);border:1.5px solid var(--blue)} .ad-v_n{color:var(--mute)}.ad-v_n::before{background:#e3e6ea} /* Anlässe */ .ad-when{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px} .ad-when li{padding:28px 0;border-top:1px solid #d3d7dc} .ad-when h3{font-size:20px;font-weight:500;letter-spacing:-.015em;margin:0 0 8px;text-transform:none} .ad-when p{font-size:15.5px;line-height:1.6;color:var(--ink-2);margin:0} /* Deliverables */ .ad-get{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .ad-get li{background:#fff;border-radius:var(--r);padding:32px 28px} .ad-get span{display:inline-flex;width:36px;height:36px;align-items:center;justify-content:center;border-radius:50%;background:var(--ink);color:#fff;font-size:14px;font-weight:500;margin-bottom:22px} .ad-get li:nth-child(3) span{background:var(--blue)} .ad-get h3{font-size:22px;font-weight:500;letter-spacing:-.015em;margin:0 0 10px;text-transform:none} .ad-get p{font-size:16px;line-height:1.6;color:var(--ink-2);margin:0} .ad-get__note{margin:28px 0 0;font-size:14.5px;line-height:1.6;color:var(--ink-2);max-width:820px} /* Warum */ .ad-why{list-style:none;margin:0;padding:0} .ad-why li{padding:24px 0;border-bottom:1px solid var(--line)} .ad-why li:first-child{padding-top:0} .ad-why h3{margin:0 0 6px} .ad-why p{margin:0;font-size:16px;line-height:1.6;color:var(--ink-2)} /* Referenzen */ .ad-refs{margin-top:48px} .ad-refs__more{margin:32px 0 0} /* Abschluss: dunkel, dezenter Blauakzent */ .ad-final{background:radial-gradient(90% 120% at 100% 0,rgba(14,104,255,.28) 0,rgba(14,104,255,0) 55%),var(--ink)} @media (max-width:1100px){ .ad-h1{font-size:48px} .ad-problem{grid-template-columns:1fr;gap:28px} .ad-fields{grid-template-columns:1fr} .ad-scopes{grid-template-columns:1fr;max-width:640px} .ad-when{grid-template-columns:1fr 1fr} } @media (max-width:768px){ .ad-h1{font-size:38px} .ad-problem .cx-display{font-size:30px} .ad-three{grid-template-columns:1fr;margin-top:40px} .ad-three li,.ad-three li+li{padding:24px 0;border-left:0;border-bottom:1px solid #d3d7dc} .ad-field{grid-template-columns:1fr;padding:32px 0} .ad-field__n{grid-row:auto;padding:0 0 8px} .ad-field>*:not(.ad-field__n){grid-column:1} .ad-field h3{font-size:21px} .ad-road__head .cx-h2{font-size:30px} .ad-rm{padding:20px 16px;margin-top:40px} .ad-when,.ad-get{grid-template-columns:1fr} .ad-mx{padding:20px 16px 14px} .ad-mx__pt span{font-size:11.5px} /* Vergleich mobil: je Zeile ein Block mit drei beschrifteten Werten */ .ad-cmp__tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .ad-cmp__tbl,.ad-cmp__tbl tbody,.ad-cmp__tbl tr,.ad-cmp__tbl th,.ad-cmp__tbl td{display:block;width:auto} .ad-cmp__tbl tr{padding:16px 0;border-bottom:1px solid var(--line)} .ad-cmp__tbl tbody th{border:0;padding:0 0 8px;font-weight:500} .ad-cmp__tbl td{border:0;padding:3px 0;display:flex;justify-content:space-between;gap:12px} .ad-cmp__tbl td.is-hl{background:none} .ad-cmp__tbl td::after{content:attr(data-l);order:-1;color:var(--mute);font-weight:400} .ad-v::before{display:none} } @media (prefers-reduced-motion:reduce){ .ad-scope{transition:none}.ad-scope:hover{transform:none} .cx-anim .ad-rm__tbl tbody tr{opacity:1;transform:none;transition:none} } .ad-final,.ad-final .cx-h2{color:#fff} .ad-final .cx-lead,.ad-final .cx-cta__person p{color:#c9ced6} .ad-final .cx-label{color:#c9ced6} .ad-final .cx-inline,.ad-final .cx-cta__person b{color:#fff} .ad-final .cx-link{color:#fff;border-color:rgba(255,255,255,.4)} .ad-final .sx-form{color:var(--ink)} .ad-mx .sx-vis__cap{margin-top:30px;display:block} /* sub.css */ /* Leistungs-Unterseiten /loesungen/// (Präfix lu-), 30.10.2026 */ .lu-vis{position:relative;margin:0} .lu-vis__card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:28px 28px 20px;box-shadow:0 30px 60px -30px rgba(11,15,23,.25)} .lu-vis__t{display:flex;align-items:center;gap:10px;margin:0 0 18px;font-size:13px;color:var(--mute);letter-spacing:.02em} .lu-vis__dot{width:8px;height:8px;border-radius:50%;background:#1f6bff} .lu-vis__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)} .lu-vis__list li{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;padding:15px 0;border-bottom:1px solid var(--line);font-size:15px} .lu-vis__n{color:#b9bec6;font-size:13px} .lu-vis__a{color:var(--ink)} .lu-vis__b{font-size:12px;padding:4px 10px;border-radius:999px;background:#f2f4f6;color:var(--ink-2);white-space:nowrap} .lu-vis__list li:last-child .lu-vis__b{background:#0E68FF;color:#fff} .cx-anim .lu-vis__list li{opacity:0;transform:translateY(8px);animation:lu-in .6s ease forwards;animation-delay:calc(.5s + var(--j)*.12s)} @keyframes lu-in{to{opacity:1;transform:none}} .lu-mods{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink)} .lu-mods li{padding:32px 32px 36px 0;border-bottom:1px solid var(--line)} .lu-mods li:not(:nth-child(3n+1)){padding-left:32px;border-left:1px solid var(--line)} .lu-mods__n{display:block;font-size:13px;color:#1f6bff;margin-bottom:18px} .lu-mods .cx-h3{font-size:20px;margin-bottom:10px} .lu-mods p{margin:0;color:var(--ink-2);line-height:1.6;font-size:15px} .cx-anim .lu-mods li{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i)*70ms)} .cx-anim .lu-mods.is-in li{opacity:1;transform:none} .lu-ways{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .lu-way{background:#fff;border-radius:24px;padding:36px;display:flex;flex-direction:column;align-items:flex-start} .lu-way_dark{background:#0b0f17;color:#fff} .lu-way__k{font-size:13px;color:var(--mute);margin:0 0 14px} .lu-way__t{font-size:26px;line-height:1.15;letter-spacing:-.02em;font-weight:400;margin:0 0 8px;color:inherit;text-transform:none} .lu-way__for{margin:0 0 18px;color:var(--ink-2);font-weight:500} .lu-way_dark .lu-way__for{color:#ffd84d} .lu-way__x{margin:0 0 24px;color:var(--ink-2);line-height:1.6;font-size:15px} .lu-way_dark .lu-way__x{color:#c9ced6} .lu-way .cx-link{margin-top:auto} .lu-ways__close{margin:32px 0 0;max-width:820px;font-size:18px;line-height:1.55} .lu-refs{margin-top:8px} .lu-refs__more{margin:32px 0 0;display:flex;gap:28px;flex-wrap:wrap} .lu-fit{display:grid;grid-template-columns:1fr 1fr;gap:32px} .lu-fit__k{font-size:13px;color:var(--mute);margin:0 0 12px;text-transform:uppercase;letter-spacing:.06em} .lu-fit ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)} .lu-fit li{position:relative;padding:14px 0 14px 28px;border-bottom:1px solid var(--line);line-height:1.5;font-size:15px} .lu-fit__yes li::before{content:"";position:absolute;left:2px;top:20px;width:10px;height:6px;border:solid #1f6bff;border-width:0 0 1.8px 1.8px;transform:rotate(-45deg)} .lu-fit__no li::before{content:"";position:absolute;left:3px;top:23px;width:11px;height:1.8px;background:#9aa1ab} .lu-rel__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .lu-rel__list a{display:grid;grid-template-columns:1fr 16px;grid-template-rows:auto auto;gap:4px 12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px;color:inherit;text-decoration:none;transition:border-color .2s} .lu-rel__list a:hover{border-color:#1f6bff} .lu-rel__list b{font-weight:500;font-size:16px} .lu-rel__list span{grid-column:1;font-size:13px;color:var(--mute)} .lu-rel__list svg{grid-column:2;grid-row:1/3;color:#1f6bff} /* Hub-Seiten: Unterseiten-Leiste */ .lu-hubnav{padding:40px 0;border-bottom:1px solid var(--line);background:#fff} .lu-hubnav__k{font-size:13px;color:var(--mute);margin:0 0 14px} .lu-hubnav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px} .lu-hubnav a{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--line);border-radius:999px;color:var(--ink);text-decoration:none;font-size:15px;transition:border-color .2s,color .2s} .lu-hubnav a:hover{border-color:#1f6bff;color:#1f6bff} @media (max-width:1000px){ .lu-mods,.lu-ways,.lu-rel__list{grid-template-columns:1fr 1fr} .lu-mods li,.lu-mods li:not(:nth-child(3n+1)){padding:28px 20px 28px 0;border-left:0} .lu-mods li:nth-child(even){padding-left:20px;border-left:1px solid var(--line)} } @media (max-width:700px){ .lu-mods,.lu-ways,.lu-rel__list,.lu-fit{grid-template-columns:1fr} .lu-mods li,.lu-mods li:nth-child(even){padding:24px 0;border-left:0} .lu-way{padding:28px} .lu-vis__card{padding:22px 20px 14px} .lu-vis__list li{grid-template-columns:28px 1fr;} .lu-vis__b{grid-column:2;justify-self:start} } @media (prefers-reduced-motion:reduce){.cx-anim .lu-vis__list li,.cx-anim .lu-mods li{opacity:1;transform:none;animation:none;transition:none}} /* ===================== SEO-Beratung (Präfix sb-), Redesign 30.10.2026 ===================== */ .sb-hero{padding:56px 0 96px} .sb-hero__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:72px;align-items:center} .sb-h1{font-size:64px;line-height:1.04;letter-spacing:-.035em;font-weight:500;margin:18px 0 26px;color:var(--ink);text-transform:none;max-width:720px} .sb-h1 span{display:inline} .sb-hero__sub{font-size:22px;line-height:1.4;color:var(--ink);margin:0 0 18px;max-width:620px} .sb-hero__intro{font-size:17px;line-height:1.65;color:var(--ink-2);margin:0 0 32px;max-width:620px} .sb-hero__trust{margin:28px 0 0;font-size:14px;color:var(--mute);letter-spacing:.01em} .sb-frame{margin:0;background:#0b0f17;color:#fff;border-radius:28px;padding:36px 34px 30px} .sb-frame__k{margin:0 0 22px;font-size:13px;color:#9aa1ab;letter-spacing:.06em;text-transform:uppercase} .sb-frame__list{list-style:none;margin:0;padding:0;counter-reset:f} .sb-frame__list li{position:relative;display:grid;grid-template-columns:40px 1fr;column-gap:12px;padding:0 0 22px} .sb-frame__list li:not(:last-child)::after{content:"";position:absolute;left:15px;top:34px;bottom:4px;width:1px;background:#2a313c} .sb-frame__n{grid-row:1/3;width:31px;height:31px;border-radius:50%;border:1px solid #3a4250;display:flex;align-items:center;justify-content:center;font-size:12px;color:#c9ced6} .sb-frame__list li:nth-child(3) .sb-frame__n{background:#0E68FF;border-color:#0E68FF;color:#fff} .sb-frame__list b{font-size:21px;font-weight:500;letter-spacing:-.01em;line-height:1.3} .sb-frame__q{color:#a9afb8;font-size:15px;line-height:1.5} .sb-frame__out{margin-top:6px;padding-top:20px;border-top:1px solid #2a313c;font-size:15px;line-height:1.5;color:#e7eaee} .sb-frame__out span{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#ffd84d;margin-bottom:6px} .sb-trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;background:#fff} .sb-trust__row{display:flex;align-items:center;gap:36px;flex-wrap:wrap} .sb-trust__rate{display:inline-flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;font-size:14px} .sb-trust__claim{margin:0;font-size:14px;color:var(--ink-2);flex:1;min-width:220px} .sb-trust__logos{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:32px} .sb-trust__logos img{height:24px;width:auto;max-width:110px;object-fit:contain;filter:grayscale(1);opacity:.7} .sb-problem__head{max-width:900px;margin-bottom:56px} .sb-problems{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:48px;border-top:1px solid var(--ink);padding-top:36px} .sb-problems__k{display:flex;gap:10px;margin:0 0 18px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)} .sb-problems__k span{color:#0E68FF} .sb-problems .cx-h3{font-size:24px;line-height:1.25;margin-bottom:14px} .sb-problems p{color:var(--ink-2);line-height:1.6;margin:0} .sb-quote{margin:72px 0 0;max-width:900px;font-size:36px;line-height:1.2;letter-spacing:-.02em;color:var(--ink-2)} .sb-quote strong{display:block;color:var(--ink);font-weight:500} .sb-mods{display:grid;grid-template-columns:repeat(6,1fr);gap:16px} .sb-mod{grid-column:span 2;background:#f4f5f7;border-radius:24px;padding:32px;display:flex;flex-direction:column;align-items:flex-start} .sb-mod_lg{grid-column:span 3;padding:44px} .sb-mod_ink{background:#0b0f17;color:#fff} .sb-mod__k{display:flex;gap:10px;margin:0 0 20px;font-size:13px;color:var(--mute)} .sb-mod__k span{color:#0E68FF} .sb-mod_ink .sb-mod__k{color:#9aa1ab}.sb-mod_ink .sb-mod__k span{color:#ffd84d} .sb-mod__t{font-size:24px;line-height:1.2;letter-spacing:-.02em;font-weight:500;margin:0 0 12px;color:inherit;text-transform:none} .sb-mod_lg .sb-mod__t{font-size:34px} .sb-mod__x{margin:0 0 24px;color:var(--ink-2);line-height:1.6;font-size:15px} .sb-mod_lg .sb-mod__x{font-size:17px;max-width:520px} .sb-mod_ink .sb-mod__x{color:#c9ced6} .sb-tags{list-style:none;margin:auto 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px} .sb-tags li{font-size:13px;padding:6px 12px;border-radius:999px;background:#fff;color:var(--ink-2)} .sb-mod_ink .sb-tags li{background:#1a2030;color:#e7eaee} .sb-mod .cx-link{margin-top:20px} .sb-mod_ink .cx-link{color:#fff;border-color:#3a4250} .sb-res{padding:128px 0} .sb-res__grid{display:grid;grid-template-columns:5fr 6fr;gap:96px;align-items:start} .sb-res__h{font-size:56px;line-height:1.06;letter-spacing:-.035em;font-weight:500;margin:18px 0 28px;color:#fff;text-transform:none} .sb-res__list{list-style:none;margin:0;padding:0;border-top:1px solid #fff} .sb-res__list li{display:grid;grid-template-columns:64px 1fr;gap:16px;padding:30px 0;border-bottom:1px solid #262c36} .sb-res__n{font-size:40px;line-height:1;letter-spacing:-.04em;color:#0E68FF} .sb-res__list .cx-h3{font-size:22px;margin:0 0 8px} .sb-res__list p{margin:0;line-height:1.6} .sb-ways{display:grid;grid-template-columns:1fr 1.12fr 1fr;gap:16px;align-items:stretch} .sb-way{background:#fff;border-radius:24px;padding:36px;display:flex;flex-direction:column} .sb-way_on{background:#0b0f17;color:#fff} .sb-way__k{margin:0 0 14px;font-size:13px;color:var(--mute)} .sb-way_on .sb-way__k{color:#ffd84d} .sb-way__t{font-size:28px;line-height:1.15;letter-spacing:-.02em;font-weight:500;margin:0 0 8px;color:inherit;text-transform:none} .sb-way__for{margin:0 0 24px;color:var(--ink-2)} .sb-way_on .sb-way__for{color:#c9ced6} .sb-way__pts{list-style:none;margin:0 0 32px;padding:0;border-top:1px solid var(--line)} .sb-way_on .sb-way__pts{border-color:#262c36} .sb-way__pts li{position:relative;padding:12px 0 12px 26px;border-bottom:1px solid var(--line);font-size:15px} .sb-way_on .sb-way__pts li{border-color:#262c36;color:#e7eaee} .sb-way__pts li::before{content:"";position:absolute;left:2px;top:18px;width:10px;height:6px;border:solid #0E68FF;border-width:0 0 1.8px 1.8px;transform:rotate(-45deg)} .sb-way_on .sb-way__pts li::before{border-color:#ffd84d} .sb-way__foot{margin-top:auto;display:flex;flex-direction:column;align-items:flex-start;gap:18px} .sb-way_on .cx-link{color:#fff;border-color:#3a4250} .sb-btn_ghost{background:transparent!important;color:var(--ink)!important;box-shadow:inset 0 0 0 1px var(--ink)} .sb-btn_ghost:hover{background:var(--ink)!important;color:#fff!important} .sb-ways__note{margin:28px 0 0;font-size:15px;color:var(--ink-2)} .sb-refs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .sb-ref{border:1px solid var(--line);border-radius:24px;padding:32px;display:flex;flex-direction:column;align-items:flex-start;background:#fff} .sb-ref__top{margin-bottom:22px} .sb-ref__top img{height:30px;width:auto;max-width:160px;object-fit:contain;object-position:left} .sb-ref__top p{margin:12px 0 0;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)} .sb-ref__dl{margin:0 0 24px;width:100%;border-top:1px solid var(--line)} .sb-ref__dl div{padding:14px 0;border-bottom:1px solid var(--line)} .sb-ref__dl dt{font-size:12px;color:var(--mute);margin-bottom:4px} .sb-ref__dl dd{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2)} .sb-ref__res dd{color:var(--ink);font-weight:500} .sb-ref .cx-link{margin-top:auto} .sb-refs__foot{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-top:32px} .sb-refs__foot p{margin:0;color:var(--ink-2);font-size:15px} .sb-refs__foot p a{color:var(--ink);text-decoration:underline;text-underline-offset:3px} .sb-steps{list-style:none;margin:0;padding:32px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:32px;border-top:1px solid var(--ink)} .sb-steps__n{display:block;font-size:48px;letter-spacing:-.04em;line-height:1;color:#0E68FF;margin-bottom:22px} .sb-steps .cx-h3{font-size:20px} .sb-steps p{margin:0;color:var(--ink-2);line-height:1.6;font-size:15px} .sb-sits{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ink)} .sb-sits li{padding:26px 28px 26px 0;border-bottom:1px solid var(--line)} .sb-sits li:nth-child(even){padding:26px 0 26px 28px;border-left:1px solid var(--line)} .sb-sits .cx-h3{font-size:19px;margin-bottom:8px} .sb-sits p{margin:0;color:var(--ink-2);line-height:1.55;font-size:15px} .sb-cmp{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .sb-cmp__c{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px;color:inherit;text-decoration:none;transition:border-color .2s} .sb-cmp__c:hover{border-color:#0E68FF} .sb-cmp__c_on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)} .sb-cmp__here{position:absolute;top:18px;right:18px;font-size:12px;padding:4px 10px;border-radius:999px;background:#ffd84d;color:var(--ink)} .sb-cmp__t{font-size:24px;font-weight:500;letter-spacing:-.02em;margin:0 0 10px;text-transform:none} .sb-cmp__c p{margin:0 0 24px;color:var(--ink-2);line-height:1.55} .sb-cmp__go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;color:#0E68FF;font-weight:500;font-size:15px} .sb-read{margin-top:36px;padding-top:24px;border-top:1px solid var(--line)} .sb-read__k{margin:0 0 12px;font-size:13px;color:var(--mute)} .sb-read ul{list-style:none;margin:0;padding:0} .sb-read li{padding:8px 0} .sb-read a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;line-height:1.45} .sb-final{padding:128px 0;background:#0b0f17 radial-gradient(900px 480px at 85% 0%,rgba(14,104,255,.22),transparent 70%)} .sb-final__grid{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:72px;align-items:center} .sb-final__h{font-size:48px;line-height:1.08;letter-spacing:-.03em;font-weight:500;margin:18px 0 24px;color:#fff;text-transform:none} .sb-final__alt{display:flex;gap:28px;flex-wrap:wrap;margin-top:32px} .sb-final .cx-link{color:#fff;border-color:#3a4250} @media (prefers-reduced-motion:no-preference){.sb-mod,.sb-way,.sb-ref,.sb-cmp__c{transition:transform .25s ease,border-color .2s}.sb-ref:hover,.sb-cmp__c:hover{transform:translateY(-2px)}} @media (max-width:1100px){ .sb-h1{font-size:52px} .sb-hero__grid,.sb-res__grid,.sb-final__grid{grid-template-columns:1fr;gap:48px} .sb-frame{max-width:560px} .sb-mods{grid-template-columns:1fr 1fr} .sb-mod,.sb-mod_lg{grid-column:span 1} .sb-mod_lg{grid-column:span 2} .sb-mod:last-child{grid-column:span 2} .sb-ways,.sb-refs,.sb-cmp{grid-template-columns:1fr} .sb-steps{grid-template-columns:1fr 1fr} } @media (max-width:700px){ .sb-hero{padding:28px 0 64px} .sb-h1{font-size:38px;letter-spacing:-.03em} .sb-hero__sub{font-size:19px} .sb-frame{padding:28px 22px 24px;border-radius:22px} .sb-frame__list b{font-size:18px} .sb-trust__row{gap:16px} .sb-trust__logos{gap:20px;flex-wrap:wrap} .sb-problems{grid-template-columns:1fr;gap:32px} .sb-quote{font-size:26px;margin-top:48px} .sb-mods{grid-template-columns:1fr} .sb-mod,.sb-mod_lg,.sb-mod:last-child{grid-column:span 1;padding:28px} .sb-mod_lg .sb-mod__t{font-size:26px} .sb-res{padding:80px 0} .sb-res__h{font-size:36px} .sb-res__list li{grid-template-columns:44px 1fr} .sb-res__n{font-size:30px} .sb-way,.sb-ref{padding:28px} .sb-steps{grid-template-columns:1fr;gap:28px} .sb-sits{grid-template-columns:1fr} .sb-sits li,.sb-sits li:nth-child(even){padding:22px 0;border-left:0} .sb-final{padding:80px 0} .sb-final__h{font-size:32px} } /* ===================== Premium-Leistungsseiten (Präfix lp-, nutzt sb-), 30.10.2026 ===================== */ .lp-h1{font-size:58px;max-width:760px} .lp .sb-frame__list li:nth-child(3) .sb-frame__n{background:transparent;border-color:#3a4250;color:#c9ced6} .lp .sb-frame__list li.is-hl .sb-frame__n{background:#0E68FF;border-color:#0E68FF;color:#fff} .lp-frame-5 li{padding-bottom:16px}.lp-frame-5 b{font-size:19px!important} .lp-frame__cap{font-size:13px!important;color:#7d838c!important} .lp .cx-label .rf-sys{margin-left:10px;vertical-align:middle} .lp-h2{font-size:44px;line-height:1.1} .lp-problems_4{grid-template-columns:repeat(4,1fr);gap:36px} .lp-problems_4 .cx-h3{font-size:21px} .lp-note{margin:28px 0 0;font-size:14px;color:var(--mute);max-width:900px;line-height:1.55} .lp-vs__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} .lp-vs__col{border:1px solid var(--line);border-radius:24px;padding:36px} .lp-vs__col_on{background:#0b0f17;border-color:#0b0f17;color:#fff} .lp-vs__k{margin:0 0 20px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)} .lp-vs__col_on .lp-vs__k{color:#ffd84d} .lp-vs__col ul{list-style:none;margin:0;padding:0} .lp-vs__col li{position:relative;padding:13px 0 13px 28px;border-top:1px solid var(--line);font-size:17px;color:var(--ink-2)} .lp-vs__col li::before{content:"";position:absolute;left:2px;top:24px;width:12px;height:1.6px;background:var(--line-2)} .lp-vs__col_on li{border-color:#262c36;color:#fff} .lp-vs__col_on li::before{width:10px;height:6px;top:19px;background:none;border:solid #0E68FF;border-width:0 0 1.8px 1.8px;transform:rotate(-45deg)} .lp-vs__note{font-size:28px} .lp-q4__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .lp-q4__list_3{grid-template-columns:repeat(3,1fr)} .lp-q4__list li{background:#f4f5f7;border-radius:20px;padding:30px} .cx-sec_dark .lp-q4__list li{background:#141a24} .lp-q4__n{display:block;font-size:13px;color:#0E68FF;margin-bottom:28px} .cx-sec_dark .lp-q4__n{color:#ffd84d} .lp-q4__t{font-size:30px;line-height:1.1;letter-spacing:-.02em;font-weight:500;margin:0 0 12px;text-transform:none;color:inherit} .lp-q4__list p{margin:0;color:var(--ink-2);line-height:1.55;font-size:15px} .cx-sec_dark .lp-q4__list p{color:#c9ced6} .cx-sec_dark .sb-problem__head .cx-lead{color:#c9ced6} .cx-sec_dark .lp-h2{color:#fff} .cx-sec_dark .sb-quote strong{color:#fff} .lp-q4__st{font-size:30px} .lp-mods_6{grid-template-columns:repeat(12,1fr)} .lp-mods_6 .sb-mod{grid-column:span 3;padding:28px} .lp-mods_6 .sb-mod_lg{grid-column:span 6;padding:44px} .lp-mods_6 .sb-mod:not(.sb-mod_lg) .sb-mod__t{font-size:21px} .lp-ex__cols{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--ink)} .lp-ex__cols_5{grid-template-columns:repeat(5,1fr)} .lp-ex__cols li{position:relative;padding:30px 28px 0 0} .lp-ex__cols li+li{padding-left:28px;border-left:1px solid var(--line)} .lp-ex__cols li:not(:last-child)::after{content:"";position:absolute;right:-7px;top:-7px;width:13px;height:13px;border-radius:50%;background:#0E68FF;z-index:1} .lp-ex__k{display:flex;gap:10px;margin:0 0 18px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)} .lp-ex__k span{color:#0E68FF} .lp-ex__q{font-size:22px;line-height:1.3;letter-spacing:-.01em;color:var(--ink);margin:0 0 20px} .lp-ex__l{font-size:12px;color:var(--mute);margin:0 0 4px} .lp-ex__p{margin:0 0 14px;font-weight:500;color:var(--ink);line-height:1.45} .lp-ex__cols_5 .lp-ex__p{font-weight:400;color:var(--ink-2);font-size:15px;line-height:1.55} .lp-ex__fn{margin:0;color:var(--ink-2);font-size:15px;line-height:1.55} .lp-ex__close{font-size:30px;margin-top:56px} .lp-ref{padding:0;overflow:hidden} .lp-ref__img{position:relative;margin:0;width:100%;aspect-ratio:16/10;background:#f4f5f7;border-bottom:1px solid var(--line)} .lp-ref__img>img,.lp-ref__img>a>img{width:100%;height:100%;object-fit:cover;object-position:top;display:block} .lp-ref .rf-sys_img{position:absolute;left:14px;bottom:14px;right:auto;top:auto} .lp-ref .sb-ref__top,.lp-ref .sb-ref__dl{padding:0 28px} .lp-ref .sb-ref__top{margin-top:26px} .lp-ref .sb-ref__dl{width:auto;align-self:stretch;margin:0 28px 24px;padding:0} .lp-ref>.cx-link{margin:auto 28px 28px} .lp-ways_2{grid-template-columns:1fr 1fr} .lp-way__x{margin:0 0 28px;color:var(--ink-2);line-height:1.6;font-size:15px} .sb-way_on .lp-way__x{color:#c9ced6} .lp-sit__a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:10px} .lp-sit__a:hover{color:#0E68FF} .lp-cmp__extra{margin:28px 0 0} .lp-ph__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:p} .lp-ph__list>li{position:relative;background:#fff;border-radius:24px;padding:30px;display:flex;flex-direction:column} .lp-ph__n{width:40px;height:40px;border-radius:50%;background:#0b0f17;color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;margin-bottom:22px} .lp-ph__list>li:nth-child(3) .lp-ph__n{background:#0E68FF} .lp-ph__when{margin:0 0 6px;font-size:13px;color:var(--mute)} .lp-ph__t{font-size:24px;letter-spacing:-.02em;font-weight:500;margin:0 0 18px;text-transform:none} .lp-ph__list ul{list-style:none;margin:0 0 22px;padding:0;border-top:1px solid var(--line)} .lp-ph__list ul li{padding:10px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink-2)} .lp-ph__res{margin:auto 0 0;font-weight:500;line-height:1.45} .lp-ph__res span{display:block;font-size:12px;font-weight:400;color:var(--mute);margin-bottom:4px} .lp-tri__big{font-size:64px;line-height:1;letter-spacing:-.04em;font-weight:500;margin:0 0 48px;color:var(--ink)} .lp-tri__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .lp-tri__c{border:1px solid var(--line);border-radius:24px;padding:32px} .lp-tri__c:nth-child(2){background:#0b0f17;border-color:#0b0f17;color:#fff} .lp-tri__k{margin:0 0 14px;font-size:13px;color:#0E68FF} .lp-tri__c:nth-child(2) .lp-tri__k{color:#ffd84d} .lp-tri__t{font-size:26px;letter-spacing:-.02em;font-weight:500;margin:0 0 16px;text-transform:none;color:inherit} .lp-tri__c ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)} .lp-tri__c:nth-child(2) ul{border-color:#262c36} .lp-tri__c ul li{padding:10px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink-2)} .lp-tri__c:nth-child(2) ul li{border-color:#262c36;color:#e7eaee} .lp-tri__c p{margin:0;color:var(--ink-2);line-height:1.6} .lp-tri__c:nth-child(2) p{color:#c9ced6} .lp-when__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink)} .lp-when__list li{padding:30px 32px 0 0;display:flex;flex-direction:column;align-items:flex-start} .lp-when__list li+li{padding-left:32px;border-left:1px solid var(--line)} .lp-when__k{margin:0 0 14px;font-size:12px;padding:4px 10px;border-radius:999px;background:#f4f5f7;color:var(--ink-2)} .lp-when__list li:first-child .lp-when__k{background:#ffd84d;color:var(--ink)} .lp-when__list .cx-h3{font-size:22px} .lp-when__list p{margin:0 0 16px;color:var(--ink-2);line-height:1.6} .lp-proof__grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px} .lp-proof__own{background:#0b0f17;color:#fff;border-radius:24px;padding:36px;display:flex;flex-direction:column} .lp-proof__k{margin:0 0 14px;font-size:13px;color:var(--mute)} .lp-proof__own .lp-proof__k{color:#ffd84d} .lp-proof__kpi{margin:auto 0 6px;font-size:44px;white-space:nowrap;line-height:1;letter-spacing:-.04em;font-weight:500} .lp-proof__kl{margin:0 0 24px;color:#c9ced6;font-size:15px} .lp-proof__own>p:last-child{margin:0;color:#c9ced6;line-height:1.6;font-size:15px;border-top:1px solid #262c36;padding-top:20px} .lp-proof__case{background:#fff;border-radius:24px;overflow:hidden;display:flex;flex-direction:column} .lp-proof__case figure{margin:0;aspect-ratio:16/9;background:#f4f5f7} .lp-proof__case figure img{width:100%;height:100%;object-fit:cover;object-position:top;display:block} .lp-proof__case>*:not(figure){margin-left:28px;margin-right:28px} .lp-proof__case .lp-proof__k{margin-top:24px} .lp-proof__case .cx-h3 span{display:block;font-size:14px;color:var(--mute);font-weight:400;margin-top:4px} .lp-proof__kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 28px 18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0} .lp-proof__kpis dt{font-size:24px;letter-spacing:-.02em;font-weight:500;color:var(--ink)} .lp-proof__kpis dd{margin:2px 0 0;font-size:12px;color:var(--mute);line-height:1.35} .lp-proof__case>p:last-child{margin-bottom:28px;color:var(--ink-2);line-height:1.6;font-size:15px} .lp-proof__links .cx-link{color:var(--ink);border-color:var(--line-2)} .lp-law{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:44px 0;background:#fff} .lp-law__in{display:grid;grid-template-columns:4fr 8fr;gap:48px;align-items:start} .lp-law__in .cx-h3{font-size:24px;margin:0} .lp-law__in p{margin:0;color:var(--ink-2);line-height:1.65} @media (max-width:1100px){ .lp-problems_4,.lp-q4__list,.lp-ph__list{grid-template-columns:1fr 1fr} .lp-mods_6{grid-template-columns:1fr 1fr} .lp-mods_6 .sb-mod{grid-column:span 1}.lp-mods_6 .sb-mod_lg{grid-column:span 2} .lp-ex__cols_5{grid-template-columns:1fr 1fr 1fr} .lp-proof__grid,.lp-tri__grid,.lp-ways_2{grid-template-columns:1fr} .lp-ex__cols_5 li:nth-child(4){border-left:0;padding-left:0} } @media (max-width:700px){ .lp-h1{font-size:38px} .lp-h2{font-size:30px} .lp-problems_4,.lp-q4__list,.lp-q4__list_3,.lp-ph__list,.lp-vs__grid,.lp-when__list{grid-template-columns:1fr} .lp-mods_6{grid-template-columns:1fr}.lp-mods_6 .sb-mod,.lp-mods_6 .sb-mod_lg{grid-column:span 1;padding:28px} .lp-ex__cols,.lp-ex__cols_5{grid-template-columns:1fr;border-top:0} .lp-ex__cols li,.lp-ex__cols li+li{padding:22px 0 22px 26px;border-left:1px solid var(--line);border-top:0} .lp-ex__cols li::after{display:none} .lp-ex__cols li::before{content:"";position:absolute;left:-6px;top:28px;width:11px;height:11px;border-radius:50%;background:#0E68FF} .lp-when__list li,.lp-when__list li+li{padding:24px 0;border-left:0;border-bottom:1px solid var(--line)} .lp-tri__big{font-size:38px} .lp-q4__t{font-size:26px} .lp-vs__note,.lp-q4__st,.lp-ex__close{font-size:22px} .lp-law__in{grid-template-columns:1fr;gap:12px} .lp-proof__kpi{font-size:44px} } /* vx.css */ /* ===================== vx – Creative-Upgrade der Leistungsseiten (30.10.2026) ===================== Motion nur unter html.vx-anim (gesetzt von vx.js, nicht bei reduced motion). Ohne JS bleibt alles sichtbar. */ .vx{--vx-blue:#0E68FF;--vx-ink:#0b0f17;--vx-off:#f7f7f5;--vx-ease:cubic-bezier(.2,.7,.15,1)} .vx-crumbs{margin-bottom:28px} .vx-h1{font-size:72px;line-height:1.02;letter-spacing:-.04em;font-weight:500;margin:18px 0 28px;text-transform:none;color:inherit} .vx-h1 em{font-style:normal;color:var(--vx-blue)} .vx-h2{font-size:48px;line-height:1.06;letter-spacing:-.03em;max-width:900px} .vx-sub{font-size:22px;line-height:1.4;margin:0 0 16px;color:inherit} .vx-intro{font-size:17px;line-height:1.65;color:var(--ink-2);margin:0 0 30px;max-width:600px} .vx-trustline{margin:26px 0 0;font-size:14px;color:var(--mute)} .vx-cap{font-size:12.5px;color:var(--mute);margin:10px 0 0} .vx-head{max-width:920px;margin-bottom:56px} .vx-head .cx-lead{margin-top:20px} .vx-mega{font-size:96px;line-height:.98;letter-spacing:-.05em;font-weight:500;margin:0 0 32px;text-transform:none;color:inherit} .vx-mega em{font-style:normal;color:var(--vx-blue)} .vx-mask{display:block;overflow:hidden;padding-bottom:.06em} .vx-mask>span{display:block} /* Motion-Grundmuster */ .vx-anim [data-vx] .vx-w{display:inline-block;opacity:0;transform:translate3d(0,.5em,0);transition:opacity .7s ease,transform .9s var(--vx-ease);transition-delay:calc(var(--w) * 45ms + 100ms)} .vx-anim [data-vx].is-in .vx-w{opacity:1;transform:none} .vx-anim [data-vx] .vx-mask>span{transform:translate3d(0,105%,0);transition:transform 1s var(--vx-ease)} .vx-anim [data-vx] .vx-mask_2>span{transition-delay:.18s} .vx-anim [data-vx].is-in .vx-mask>span{transform:none} /* Zeilen-Liste (Editorial statt Karten) */ .vx-rows{list-style:none;margin:0;padding:0;border-top:1px solid currentColor} .vx-rows li{display:grid;grid-template-columns:72px 1fr;gap:12px;padding:28px 0;border-bottom:1px solid rgba(127,133,141,.35)} .vx-rows__n{font-size:14px;color:var(--vx-blue);padding-top:4px} .vx-rows__k{margin:0 0 8px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)} .vx-rows h3{font-size:24px;line-height:1.25;letter-spacing:-.015em;font-weight:500;margin:0 0 10px;color:inherit;text-transform:none} .vx-rows p:last-child{margin:0;color:var(--ink-2);line-height:1.6} .vx-anim [data-vx].vx-rows li{opacity:0;transform:translate3d(24px,0,0);transition:opacity .7s ease,transform .8s var(--vx-ease);transition-delay:calc(var(--i) * 120ms + 150ms)} .vx-anim [data-vx].vx-rows.is-in li{opacity:1;transform:none} /* Sticky-Storytelling */ .vx-sticky{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:72px;align-items:start} .vx-sticky__fig{position:sticky;top:110px;margin:0} .vx-sticky__steps{list-style:none;margin:0;padding:0} .vx-step{min-height:62vh;display:flex;flex-direction:column;justify-content:center;padding:24px 0 24px 28px;border-left:2px solid var(--line);transition:border-color .4s} .vx-step:first-child{min-height:48vh;justify-content:flex-start;padding-top:40px} .vx-step:last-child{min-height:56vh} .vx-step__q{display:flex;gap:12px;margin:0 0 12px;font-size:14px;color:var(--mute)} .vx-step__q span{color:var(--vx-blue)} .vx-step h3{font-size:34px;line-height:1.1;letter-spacing:-.025em;font-weight:500;margin:0 0 14px;text-transform:none;color:inherit} .vx-step p:last-child{margin:0;font-size:17px;line-height:1.65;color:var(--ink-2);max-width:460px} .vx-step.is-active{border-color:var(--vx-blue)} .vx-anim .vx-step{opacity:.32;transition:opacity .45s ease,border-color .45s} .vx-anim .vx-step.is-active{opacity:1} .vx-sticky__cap{margin-top:18px;font-size:15px;color:var(--ink-2);min-height:24px;position:relative} .vx-sticky__cap span{display:none} [data-active="1"] .vx-sticky__cap span[data-k="1"],[data-active="2"] .vx-sticky__cap span[data-k="2"],[data-active="3"] .vx-sticky__cap span[data-k="3"],[data-active="4"] .vx-sticky__cap span[data-k="4"],[data-active="5"] .vx-sticky__cap span[data-k="5"]{display:inline} /* ============ LinkedIn: dunkle Bühne, Netzwerk ============ */ .vx-li-hero{background:var(--vx-ink);color:#fff;padding:124px 0 56px;position:relative;overflow:hidden} .vx-li-hero::before{content:"";position:absolute;right:-10%;bottom:-30%;width:70%;height:90%;background:radial-gradient(closest-side,rgba(14,104,255,.25),transparent);pointer-events:none} .vx-li-hero .cx-crumbs a,.vx-li-hero .cx-crumbs span{color:#9aa1ab} .vx-li-hero__top{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:64px;align-items:end;position:relative} .vx-li-h1{font-size:74px;margin-bottom:0} .vx-li-hero .vx-intro{color:#b4bac3} .vx-li-hero .cx-link{color:#fff;border-color:#3a4250} .vx-li-net{position:relative;margin:24px auto 0;max-width:1400px;padding:0 24px} .vx-li-net svg{width:100%;height:auto;display:block} .vx-li-net__crowd circle{fill:#3a4250} .vx-li-net__crowd circle.is-hit{fill:#9fb9ff} .vx-li-net__lines path{fill:none;stroke:#2c5fd6;stroke-width:1.2;stroke-opacity:.7} .vx-li-net__lines path.is-hot{stroke:#ffd84d;stroke-width:1.6;stroke-opacity:.9} .vx-n_rel{fill:#1a2333;stroke:#5a7fe0} .vx-n_con{fill:#0E68FF} .vx-n_tru{fill:#fff} .vx-n_goal{fill:#ffd84d} .vx-n_icon{fill:var(--vx-ink)} .vx-li-net__legend{list-style:none;margin:8px 0 0;padding:0 2%;display:grid;grid-template-columns:32% 18% 17% 17% 16%;font-size:13px;color:#9aa1ab} .vx-li-net__legend li{display:flex;gap:8px} .vx-li-net__legend span{color:#5a7fe0} .vx-li-net .vx-cap{color:#6b727c;padding:0 2%} .vx-anim .vx-li-net__crowd circle{opacity:0;transition:opacity .6s ease;transition-delay:var(--d)} .vx-anim .vx-li-net.is-in .vx-li-net__crowd circle{opacity:1} .vx-anim .vx-li-net.is-in .vx-li-net__crowd circle:not(.is-hit){opacity:.55;transition:opacity 1.2s ease .9s} .vx-anim .vx-li-net__lines path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s var(--vx-ease);transition-delay:var(--t)} .vx-anim .vx-li-net.is-in .vx-li-net__lines path{stroke-dashoffset:0} .vx-anim .vx-li-net .vx-n,.vx-anim .vx-li-net__legend li{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4);transition:opacity .5s ease,transform .7s var(--vx-ease);transition-delay:var(--t)} .vx-anim .vx-li-net__legend li{transform:translate3d(0,8px,0)} .vx-anim .vx-li-net.is-in .vx-n,.vx-anim .vx-li-net.is-in .vx-li-net__legend li{opacity:1;transform:none} .vx-li-st{padding:140px 0 120px;background:var(--vx-off)} .vx-li-st__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:96px;align-items:start} .vx-li-st__l{position:sticky;top:120px} .vx-li-st .vx-mega{font-size:88px} .vx-li-st__close{margin:88px 0 0;font-size:34px;line-height:1.2;letter-spacing:-.02em;color:var(--ink-2);max-width:880px} .vx-li-st__close strong{display:block;color:var(--ink);font-weight:500} .vx-li-grid{background:#f4f5f7;border-radius:28px;padding:24px} .vx-li-grid svg{width:100%;height:auto;display:block} .vx-co__box{fill:#fff;stroke:#e1e4e8;transition:fill .5s,stroke .5s,opacity .5s} .vx-co__bld{fill:#d4d8de;transition:fill .5s} .vx-co__role{fill:#0E68FF;opacity:0;transition:opacity .5s,transform .5s var(--vx-ease);transform-box:fill-box;transform-origin:center;transform:scale(.3)} .vx-co__ring{fill:none;stroke:#ffd84d;stroke-width:2;opacity:0;transition:opacity .5s} .vx-co{transition:opacity .5s ease} .vx-li-grid__trust{opacity:0;transform:translate3d(0,14px,0);transition:opacity .5s,transform .6s var(--vx-ease)} .vx-li-grid__trust rect:first-child{fill:#0b0f17}.vx-li-grid__trust circle{fill:#0E68FF}.vx-li-grid__trust rect{fill:#fff}.vx-li-grid__trust rect.m{fill:#6b727c} .vx-li-grid__talk{fill:none;stroke:#ffd84d;stroke-width:2.5;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s var(--vx-ease)} .vx-s1 .vx-co:not(.is-t){opacity:.28} .vx-s1 .vx-co.is-t .vx-co__box{stroke:#0b0f17;stroke-width:1.5} .vx-s1 .vx-co.is-t .vx-co__bld{fill:#0b0f17} .vx-s2 .vx-co.is-t:not(.is-p){opacity:.45} .vx-s2 .vx-co.is-p .vx-co__role{opacity:1;transform:none} .vx-s3 .vx-co.is-p:not(.is-a){opacity:.45} .vx-s3 .vx-co.is-a .vx-co__box{fill:#e9f0ff;stroke:#0E68FF} .vx-s4 .vx-co.is-a:not(.is-f){opacity:.45} .vx-s4 .vx-co.is-f .vx-co__ring{opacity:1} .vx-s4 .vx-li-grid__trust{opacity:1;transform:none} .vx-s5 .vx-li-grid__talk{stroke-dashoffset:0} .vx-s5 .vx-co.is-f .vx-co__box{fill:#ffd84d;stroke:#0b0f17} .vx-li-proof{background:var(--vx-ink);color:#fff;padding:140px 0} .vx-li-proof .cx-h2{color:#fff} .vx-li-proof__big{margin:64px 0 72px;padding:48px 0;border-top:1px solid #262c36;border-bottom:1px solid #262c36;display:grid;grid-template-columns:auto 1fr;gap:24px 64px;align-items:end} .vx-li-proof__kpi{margin:0;font-size:132px;line-height:.9;letter-spacing:-.055em;font-weight:500;color:#fff;white-space:nowrap} .vx-li-proof__bar{position:relative;height:56px;align-self:center;display:grid;grid-template-columns:repeat(5,1fr);align-items:end;font-style:normal} .vx-li-proof__bar span{position:absolute;left:0;right:0;top:14px;height:3px;background:#262c36;overflow:hidden} .vx-li-proof__bar span::after{content:"";position:absolute;inset:0;background:#0E68FF;transform-origin:left;transform:scaleX(1)} .vx-li-proof__bar i{font-style:normal;font-size:13px;color:#9aa1ab;border-left:1px solid #3a4250;padding-left:8px;height:34px;display:flex;align-items:flex-end} .vx-li-proof__kl{grid-column:1/-1;margin:0;max-width:820px;color:#c9ced6;font-size:18px;line-height:1.6} .vx-anim .vx-li-proof__bar span::after{transform:scaleX(0);transition:transform 1.6s var(--vx-ease) .4s} .vx-anim .vx-li-proof__big.is-in .vx-li-proof__bar span::after{transform:scaleX(1)} .vx-li-proof__cases{display:grid;grid-template-columns:1fr 1fr;gap:24px} .vx-li-case{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);background:#141a24;border-radius:24px;overflow:hidden;transition:transform .35s var(--vx-ease)} .vx-li-case:hover{transform:translateY(-3px)} .vx-li-case figure{margin:0;overflow:hidden} .vx-li-case figure img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block;transition:transform .8s var(--vx-ease)} .vx-li-case:hover figure img{transform:scale(1.04)} .vx-li-case__body{padding:30px} .vx-li-case__tag{margin:0 0 10px;font-size:12.5px;color:#ffd84d} .vx-li-case h3{font-size:24px;font-weight:500;margin:0 0 18px;letter-spacing:-.015em;text-transform:none;color:#fff} .vx-li-case h3 span{display:block;font-size:14px;font-weight:400;color:#9aa1ab;margin-top:4px} .vx-li-case dl{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 18px;padding:14px 0;border-top:1px solid #262c36;border-bottom:1px solid #262c36} .vx-li-case dt{font-size:24px;font-weight:500;letter-spacing:-.02em} .vx-li-case dd{margin:2px 0 0;font-size:12px;color:#9aa1ab;line-height:1.35} .vx-li-case__body>p:last-child{margin:0;font-size:14.5px;line-height:1.6;color:#c9ced6} .vx-anim .vx-li-case{opacity:0;transform:translate3d(0,28px,0);transition:opacity .8s ease,transform .9s var(--vx-ease)} .vx-anim .vx-li-case.is-in{opacity:1;transform:none} .vx-anim .vx-li-case+.vx-li-case{transition-delay:.12s} .vx-li-proof__note{color:#7d838c} .vx-li-proof__links{display:flex;gap:28px;flex-wrap:wrap;margin-top:28px} .vx-li-proof .cx-link{color:#fff;border-color:#3a4250} @media (max-width:1100px){ .vx-h1,.vx-li-h1{font-size:60px} .vx-mega,.vx-li-st .vx-mega{font-size:68px} .vx-li-hero__top,.vx-li-st__grid{grid-template-columns:1fr;gap:36px} .vx-li-st__l{position:static} .vx-li-proof__cases{grid-template-columns:1fr} .vx-li-proof__kpi{font-size:96px} .vx-sticky{gap:40px} } @media (max-width:800px){ .vx-sticky{grid-template-columns:1fr} .vx-sticky__fig{top:64px;z-index:2;background:#fff;padding:8px 0 4px} .vx-sticky__fig svg{max-height:34vh} .vx-step,.vx-step:first-child,.vx-step:last-child{min-height:auto;padding:28px 0 28px 20px} .vx-anim .vx-step{opacity:.4} } @media (max-width:700px){ .vx-h1,.vx-li-h1{font-size:42px} .vx-h2{font-size:32px} .vx-mega,.vx-li-st .vx-mega{font-size:48px} .vx-li-hero{padding:108px 0 40px} .vx-li-net{margin-top:36px;padding:0 8px} .vx-li-net__legend{grid-template-columns:repeat(5,1fr);font-size:10.5px} .vx-li-net__legend span{display:none} .vx-li-st{padding:96px 0 80px} .vx-li-st__close{font-size:24px;margin-top:56px} .vx-rows li{grid-template-columns:40px 1fr} .vx-rows h3{font-size:20px} .vx-step h3{font-size:26px} .vx-li-proof{padding:96px 0} .vx-li-proof__big{grid-template-columns:1fr;margin:40px 0 48px;padding:32px 0} .vx-li-proof__kpi{font-size:44px;white-space:normal} .vx-li-case dt{font-size:19px;white-space:nowrap} .vx-li-case{grid-template-columns:1fr} .vx-li-case figure{aspect-ratio:16/9} } @media (prefers-reduced-motion:reduce){.vx *{transition:none!important;animation:none!important}} /* ============ Shopify: hell, produkt- und markenorientiert ============ */ .vx-sf-hero{background:var(--vx-off);padding:130px 0 96px;overflow:hidden} .vx-sf-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:56px;align-items:center} .vx-sf-shelf{margin:0} .vx-sf-shelf__stage{position:relative;aspect-ratio:1/1;max-height:580px;width:100%;background:#fff;border-radius:32px;box-shadow:0 40px 80px -30px rgba(11,15,23,.25);overflow:hidden} .vx-sf-col{position:absolute;top:0;bottom:0;left:calc(var(--c) * 33.333%);width:33.333%;padding:22px 16px;border-left:1px solid #eef0f2;display:flex;flex-direction:column;justify-content:space-between} .vx-sf-col:first-of-type{border-left:0} .vx-sf-col__q{margin:0;font-size:13px;line-height:1.35;color:var(--ink-2)} .vx-sf-col__t{margin:0;font-size:12px;font-weight:500;color:#fff;background:var(--vx-ink);border-radius:999px;padding:6px 12px;align-self:flex-start} .vx-sf-col:nth-of-type(2) .vx-sf-col__t{background:#0E68FF} .vx-sf-p{position:absolute;left:var(--ex);top:var(--ey);width:11%;aspect-ratio:40/52;transform:translate(-50%,-50%)} .vx-sf-p svg{width:100%;height:100%;display:block;overflow:visible} .vx-sf-p svg *{fill:#e6e9ee;stroke:#0b0f17;stroke-width:1.4} .vx-sf-p svg .l{fill:none} .vx-sf-p_1 svg *:not(.l){fill:#d7e4ff} .vx-sf-p_2 svg *:not(.l){fill:#fff2bf} .vx-sf-shelf__cap{display:flex;align-items:center;gap:12px;margin-top:18px;font-size:14px;color:var(--ink-2)} .vx-sf-shelf__arrow{flex:0 0 60px;height:1px;background:var(--ink);position:relative} .vx-sf-shelf__arrow::after{content:"";position:absolute;right:0;top:-4px;border:4px solid transparent;border-left:6px solid var(--ink)} .vx-sf-shelf__to{font-weight:500;color:var(--ink)} .vx-anim .vx-sf-col{opacity:0;transition:opacity .7s ease 1.3s} .vx-anim .vx-sf-shelf.is-in .vx-sf-col{opacity:1} .vx-anim .vx-sf-p{left:var(--sx);top:var(--sy);transform:translate(-50%,-50%) rotate(var(--r));transition:left 1.3s var(--vx-ease),top 1.3s var(--vx-ease),transform 1.3s var(--vx-ease);transition-delay:calc(var(--d) + .5s)} .vx-anim .vx-sf-shelf.is-in .vx-sf-p{left:var(--ex);top:var(--ey);transform:translate(-50%,-50%)} .vx-anim .vx-sf-shelf__to{opacity:.25;transition:opacity .6s ease 1.6s} .vx-anim .vx-sf-shelf.is-in .vx-sf-shelf__to{opacity:1} .vx-sf-st{padding:140px 0 120px;background:#fff} .vx-sf-mega{font-size:84px;max-width:1150px} .vx-sf-st__grid{display:grid;grid-template-columns:4fr 8fr;gap:72px;margin-top:56px;align-items:start} .vx-sf-st__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--ink)} .vx-sf-st__list li{padding:24px 24px 0 0} .vx-sf-st__list li+li{padding-left:24px;border-left:1px solid var(--line)} .vx-sf-st__k{margin:0 0 12px;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:#0E68FF} .vx-sf-st__list h3{font-size:20px;line-height:1.3;font-weight:500;margin:0 0 10px;letter-spacing:-.01em;text-transform:none} .vx-sf-st__list p:last-child{margin:0;color:var(--ink-2);font-size:15px;line-height:1.6} .vx-anim [data-vx].vx-sf-st__list li{opacity:0;transform:translate3d(0,20px,0);transition:opacity .7s ease,transform .8s var(--vx-ease);transition-delay:calc(var(--i) * 120ms)} .vx-anim [data-vx].vx-sf-st__list.is-in li{opacity:1;transform:none} .vx-sf-story{background:var(--vx-off)} .vx-sf-ix{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:40px;align-items:stretch} .vx-sf-ix__tabs{display:flex;flex-direction:column;gap:10px} .vx-sf-ix__tabs button{all:unset;box-sizing:border-box;cursor:pointer;display:block;padding:24px 26px;border-radius:20px;background:#fff;border:1px solid transparent;transition:background .3s,border-color .3s,transform .3s var(--vx-ease)} .vx-sf-ix__tabs button:hover{border-color:var(--line-2)} .vx-sf-ix__tabs button:focus-visible{outline:2px solid #0E68FF;outline-offset:2px} .vx-sf-ix__tabs button[aria-selected="true"]{background:var(--vx-ink);color:#fff;transform:translateX(8px)} .vx-sf-ix__n{display:block;font-size:12.5px;color:var(--mute);margin-bottom:10px} .vx-sf-ix__q{display:flex;gap:10px;align-items:center;font-size:21px;letter-spacing:-.01em;font-weight:500;line-height:1.3} .vx-sf-ix__q svg{flex:0 0 auto;color:#0E68FF} .vx-sf-ix__fn{display:block;margin-top:10px;font-size:14.5px;color:var(--ink-2);max-height:0;opacity:0;overflow:hidden;transition:max-height .4s ease,opacity .4s ease} .vx-sf-ix__tabs button[aria-selected="true"] .vx-sf-ix__fn{max-height:60px;opacity:1;color:#c9ced6} .vx-sf-ix__screen{position:relative;background:#fff;border-radius:24px;box-shadow:0 30px 70px -30px rgba(11,15,23,.3);overflow:hidden;min-height:440px} .vx-sf-ix__bar{display:flex;align-items:center;gap:6px;padding:14px 18px;border-bottom:1px solid #eef0f2;font-size:12.5px;color:var(--mute)} .vx-sf-ix__bar i{width:9px;height:9px;border-radius:50%;background:#e1e4e8} .vx-sf-ix__bar span{margin-left:12px;background:#f4f5f7;border-radius:999px;padding:5px 12px} .vx-sf-ix__bar b{font-weight:500;color:var(--ink);display:none} [data-active="1"] .vx-sf-ix__bar b[data-k="1"],[data-active="2"] .vx-sf-ix__bar b[data-k="2"],[data-active="3"] .vx-sf-ix__bar b[data-k="3"]{display:inline} .vx-sf-pg{position:absolute;inset:52px 0 0;padding:28px;opacity:0;visibility:hidden;transform:translate3d(0,14px,0);transition:opacity .45s ease,transform .55s var(--vx-ease),visibility 0s .45s} [data-active="1"] .vx-sf-pg_1,[data-active="2"] .vx-sf-pg_2,[data-active="3"] .vx-sf-pg_3{opacity:1;visibility:visible;transform:none;transition-delay:0s} .vx-sf-pg__type{display:inline-block;margin:0 0 18px;font-size:12px;font-weight:500;padding:5px 11px;border-radius:999px;background:#e9f0ff;color:#0E68FF} .vx-wf{background:#eceef1;border-radius:6px;height:10px;margin-bottom:10px} .vx-wf_h{height:22px;width:62%;background:#0b0f17;margin-bottom:16px} .vx-wf_t{width:100%}.vx-wf.s{width:60%} .vx-wf_img{height:90px;border-radius:12px;background:#f1f3f6} .vx-wf_img.big{height:220px} .vx-sf-pg__art{display:grid;grid-template-columns:1fr 1.4fr;gap:16px;margin-top:20px} .vx-sf-pg__link{margin-top:24px;padding:14px 16px;border-radius:12px;border:1.5px dashed #0E68FF;color:#0E68FF;font-size:14px;font-weight:500} .vx-sf-pg__filters{display:flex;gap:8px;margin-bottom:16px} .vx-sf-pg__filters span{font-size:12px;padding:5px 11px;border-radius:999px;border:1px solid var(--line)} .vx-sf-pg__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .vx-sf-pg__card .vx-wf_img{height:70px} .vx-sf-pg__prod{display:grid;grid-template-columns:1fr 1fr;gap:20px} .vx-sf-pg__specs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0 18px} .vx-sf-pg__specs span{font-size:12.5px;padding:9px 10px;background:#f4f5f7;border-radius:8px} .vx-sf-pg__buy{background:#0E68FF;color:#fff;border-radius:10px;padding:13px;text-align:center;font-size:14px;font-weight:500} .vx-sf-refs{padding:140px 0;background:#fff} .vx-sf-ref{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:72px;align-items:center;padding:56px 0;border-top:1px solid var(--line)} .vx-sf-ref.is-rev .vx-sf-ref__img{order:2} .vx-sf-ref__img{position:relative;margin:0} .vx-sf-ref__frame{border-radius:24px;overflow:hidden;background:#f4f5f7;box-shadow:0 40px 80px -40px rgba(11,15,23,.35);transform:translate3d(0,calc(var(--vx-p,0) * -24px),0)} .vx-sf-ref__frame img{width:100%;height:auto;display:block;aspect-ratio:16/10;object-fit:cover;object-position:top} .vx-sf-ref__sys{position:absolute;left:20px;top:20px} .vx-sf-ref__sys .rf-sys{box-shadow:0 6px 18px rgba(11,15,23,.16);border-color:transparent;font-size:13.5px;padding:7px 13px 7px 9px} .vx-sf-ref .vx-sf-ref__logo{height:auto;max-height:34px;width:auto;max-width:180px;object-fit:contain;object-position:left;display:block} .vx-sf-ref__br{margin:12px 0 22px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)} .vx-sf-ref__res{margin:0 0 24px;font-size:24px;line-height:1.3;letter-spacing:-.015em;font-weight:500;color:var(--ink)} .vx-sf-ref dl{margin:0 0 24px;border-top:1px solid var(--line)} .vx-sf-ref dl div{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)} .vx-sf-ref dt{font-size:12.5px;color:var(--mute)} .vx-sf-ref dd{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2)} .vx-anim .vx-sf-ref__frame{clip-path:inset(8% 8% 8% 8% round 24px);transition:clip-path 1.1s var(--vx-ease)} .vx-anim .vx-sf-ref.is-in .vx-sf-ref__frame{clip-path:inset(0 0 0 0 round 24px)} .vx-anim .vx-sf-ref__body{opacity:0;transform:translate3d(0,24px,0);transition:opacity .8s ease .2s,transform .9s var(--vx-ease) .2s} .vx-anim .vx-sf-ref.is-in .vx-sf-ref__body{opacity:1;transform:none} @media (max-width:1100px){ .vx-sf-hero__grid,.vx-sf-ix,.vx-sf-st__grid{grid-template-columns:1fr} .vx-sf-shelf{max-width:560px} .vx-sf-mega{font-size:64px} .vx-sf-ref{grid-template-columns:1fr;gap:32px} .vx-sf-ref.is-rev .vx-sf-ref__img{order:0} } @media (max-width:700px){ .vx-sf-hero{padding:104px 0 64px} .vx-sf-mega{font-size:42px} .vx-sf-st{padding:96px 0 80px} .vx-sf-st__list{grid-template-columns:1fr} .vx-sf-st__list li,.vx-sf-st__list li+li{padding:20px 0;border-left:0;border-bottom:1px solid var(--line)} .vx-sf-col__q{font-size:11px} .vx-sf-col{padding:14px 10px} .vx-sf-ix__tabs button{padding:18px 20px} .vx-sf-ix__tabs button[aria-selected="true"]{transform:none} .vx-sf-ix__q{font-size:17px} .vx-sf-ix__screen{min-height:400px} .vx-sf-pg{padding:18px} .vx-sf-pg__prod{grid-template-columns:1fr} .vx-wf_img.big{height:110px} .vx-sf-refs{padding:96px 0} .vx-sf-ref{padding:40px 0} .vx-sf-ref__res{font-size:20px} .vx-sf-ref dl div{grid-template-columns:1fr;gap:2px} } /* ============ B2B-SEO: dunkles Signalfeld, Scroll-Scrub ============ */ .vx-bb-hero{position:relative;background:#0b0f17;color:#fff;padding:130px 0 72px;overflow:hidden;min-height:720px} .vx-bb-field{position:absolute;top:70px;bottom:30px;left:52%;right:0;margin:0} .vx-bb-field svg{width:100%;height:100%;display:block} .vx-bb-noise text{fill:#8a929e;font-size:15px;opacity:var(--o)} .vx-bb-lines path{fill:none;stroke:#0E68FF;stroke-width:1.6} .vx-bb-hits rect{fill:#0E68FF} .vx-bb-hits circle{fill:#fff} .vx-bb-hits text{fill:#fff;font-size:15px;font-weight:500} .vx-bb-targets rect{fill:#fff} .vx-bb-targets text.a{fill:#0b0f17;font-size:15px;font-weight:500} .vx-bb-targets text.b{fill:#6b727c;font-size:12.5px} .vx-bb-hero__in{position:relative;z-index:1} .vx-bb-hero .cx-crumbs a,.vx-bb-hero .cx-crumbs span{color:#9aa1ab} .vx-bb-h1{font-size:72px;max-width:640px} .vx-bb-hero__in>*:not(.cx-crumbs){max-width:600px} .vx-bb-h1 .vx-w_hl{color:#6f9bff} .vx-bb-kicker{font-size:20px;line-height:1.4;margin:0 0 14px;max-width:560px;color:#fff} .vx-bb-hero .vx-intro{color:#b4bac3;max-width:540px} .vx-bb-hero .cx-link{color:#fff;border-color:#3a4250} .vx-bb-hero .vx-trustline{color:#7d838c} .vx-bb-cap{position:absolute;right:24px;bottom:18px;color:#5d646e;z-index:1} .vx-anim .vx-bb-noise text{opacity:0;transition:opacity 1s ease;transition-delay:var(--d)} .vx-anim .vx-bb-field.is-in .vx-bb-noise text{opacity:var(--o)} .vx-anim .vx-bb-hits g,.vx-anim .vx-bb-targets g{opacity:0;transform:translate3d(-16px,0,0);transition:opacity .6s ease,transform .8s var(--vx-ease);transition-delay:var(--t)} .vx-anim .vx-bb-field.is-in .vx-bb-hits g,.vx-anim .vx-bb-field.is-in .vx-bb-targets g{opacity:1;transform:none} .vx-anim .vx-bb-lines path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s var(--vx-ease);transition-delay:var(--t)} .vx-anim .vx-bb-field.is-in .vx-bb-lines path{stroke-dashoffset:0} .vx-bb-story{background:#fff} .vx-bb-scrub{height:340vh;position:relative} .vx-bb-scrub__pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;padding-top:72px} .vx-bb-scrub__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:80px;align-items:center;width:100%} .vx-bb-scrub__case{margin:20px 0 36px;font-size:17px;color:var(--ink-2)} .vx-bb-rail{list-style:none;margin:0;padding:0;display:grid;gap:4px} .vx-bb-rail li{display:flex;align-items:center;gap:14px;font-size:19px;color:#a7adb5;padding:8px 0;transition:color .35s} .vx-bb-rail li span{width:30px;height:30px;border-radius:50%;border:1px solid currentColor;display:flex;align-items:center;justify-content:center;font-size:13px;transition:background .35s,color .35s,border-color .35s} .vx-bb-rail__bar{margin-top:24px;height:3px;background:#eceef1;border-radius:2px;overflow:hidden;max-width:360px} .vx-bb-rail__bar i{display:block;height:100%;background:#0E68FF;transform-origin:left;transform:scaleX(var(--vx-s,1))} [data-active="1"] .vx-bb-rail li[data-k="1"],[data-active="2"] .vx-bb-rail li[data-k="2"],[data-active="3"] .vx-bb-rail li[data-k="3"],[data-active="4"] .vx-bb-rail li[data-k="4"]{color:var(--ink)} [data-active="1"] .vx-bb-rail li[data-k="1"] span,[data-active="2"] .vx-bb-rail li[data-k="2"] span,[data-active="3"] .vx-bb-rail li[data-k="3"] span,[data-active="4"] .vx-bb-rail li[data-k="4"] span{background:#0E68FF;border-color:#0E68FF;color:#fff} .vx-bb-scrub__r{position:relative;min-height:440px} .vx-bb-ph{position:absolute;inset:0;background:#0b0f17;color:#fff;border-radius:28px;padding:44px;opacity:0;visibility:hidden;transform:translate3d(0,30px,0) scale(.98);transition:opacity .5s ease,transform .7s var(--vx-ease),visibility 0s .5s} [data-active="1"] .vx-bb-ph[data-k="1"],[data-active="2"] .vx-bb-ph[data-k="2"],[data-active="3"] .vx-bb-ph[data-k="3"],[data-active="4"] .vx-bb-ph[data-k="4"]{opacity:1;visibility:visible;transform:none;transition-delay:0s} .vx-bb-ph__n{margin:0 0 14px;font-size:13px;color:#ffd84d} .vx-bb-ph h3{font-size:40px;line-height:1.05;letter-spacing:-.03em;font-weight:500;margin:0 0 16px;text-transform:none;color:#fff} .vx-bb-ph__sit{margin:0 0 28px;font-size:17px;line-height:1.6;color:#c9ced6;max-width:520px} .vx-bb-ph__search{display:flex;align-items:center;gap:12px;background:#fff;color:var(--ink);border-radius:999px;padding:16px 22px;font-size:17px;margin-bottom:24px;box-shadow:0 0 0 6px rgba(14,104,255,.25)} .vx-bb-ph__search svg{color:#0E68FF;flex:0 0 auto} .vx-bb-ph dl{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:0;border-top:1px solid #262c36;padding-top:20px} .vx-bb-ph dt{font-size:12.5px;color:#9aa1ab;margin-bottom:6px} .vx-bb-ph dd{margin:0;font-size:16px;line-height:1.45;color:#fff} .vx-bb-note{margin-top:28px} .vx-bb-vs{padding:150px 0 130px;background:var(--vx-off)} .vx-bb-vs__h{margin:0 0 64px;font-weight:500;letter-spacing:-.05em;line-height:.95;text-transform:none} .vx-bb-vs__a{font-size:104px;color:#b9bec5;text-decoration:line-through;text-decoration-thickness:4px;text-decoration-color:#b9bec5} .vx-bb-vs__vs{display:block;font-size:20px;letter-spacing:0;color:var(--mute);margin:14px 0} .vx-bb-vs__b{font-size:104px;color:var(--ink)} .vx-bb-vs__grid{display:grid;grid-template-columns:4fr 8fr;gap:72px;align-items:start} .vx-bb-vs__cols{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--ink)} .vx-bb-vs__cols>div{padding:24px 28px 0 0} .vx-bb-vs__cols>div.on{padding-left:28px;border-left:1px solid var(--line)} .vx-bb-vs__k{margin:0 0 14px;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)} .vx-bb-vs__cols .on .vx-bb-vs__k{color:#0E68FF} .vx-bb-vs__cols ul{list-style:none;margin:0;padding:0} .vx-bb-vs__cols li{padding:9px 0;font-size:16px;color:#9aa1ab} .vx-bb-vs__cols .on li{color:var(--ink);font-weight:500} .vx-bb-vs__note{margin:56px 0 0;font-size:24px;line-height:1.35;letter-spacing:-.015em;max-width:820px;color:var(--ink-2)} .vx-anim .vx-bb-vs__a{text-decoration-color:transparent;transition:text-decoration-color .6s ease 1s,color .6s ease 1s;color:var(--ink)} .vx-anim .is-in .vx-bb-vs__a{text-decoration-color:#b9bec5;color:#b9bec5} @media (max-width:1100px){ .vx-bb-h1{font-size:56px} .vx-bb-field{left:56%} .vx-bb-vs__a,.vx-bb-vs__b{font-size:72px} .vx-bb-vs__grid{grid-template-columns:1fr;gap:40px} .vx-bb-scrub__grid{gap:40px} } @media (max-width:800px){ .vx-bb-scrub{height:auto} .vx-bb-scrub__pin{position:static;height:auto;padding:96px 0} .vx-bb-scrub__grid{grid-template-columns:1fr} .vx-bb-rail,.vx-bb-rail__bar{display:none} .vx-bb-scrub__r{min-height:0;display:grid;gap:14px} .vx-bb-ph{position:static;opacity:1!important;visibility:visible!important;transform:none!important;padding:28px} } @media (max-width:700px){ .vx-bb-hero{min-height:0;padding:104px 0 88px} .vx-bb-field{display:none} .vx-bb-mob{display:grid!important;gap:8px;margin-top:36px;position:relative;z-index:1} .vx-bb-cap{position:static;padding:0 24px;margin-top:12px} .vx-bb-h1{font-size:42px} .vx-bb-kicker{font-size:17px} .vx-bb-cap{left:16px;right:16px;font-size:11px} .vx-bb-ph h3{font-size:28px} .vx-bb-ph__search{font-size:15px;border-radius:16px;padding:14px 16px} .vx-bb-ph dl{grid-template-columns:1fr} .vx-bb-vs{padding:96px 0} .vx-bb-vs__a,.vx-bb-vs__b{font-size:44px} .vx-bb-vs__cols{grid-template-columns:1fr} .vx-bb-vs__cols>div.on{padding-left:0;border-left:0;border-top:1px solid var(--line);margin-top:20px} .vx-bb-vs__note{font-size:19px} } /* ============ Relaunch: architektonisch, Schwarz-Weiß, Mapping ============ */ .vx-rl-hero{background:#fff;padding:130px 0 96px;overflow:hidden} .vx-rl-hero__head{max-width:1100px} .vx-rl-h1{font-size:76px} .vx-rl-h1 em{color:var(--ink)} .vx-rl-h1 em .vx-w{background:linear-gradient(transparent 70%,#ffd84d 70%,#ffd84d 92%,transparent 92%)} .vx-rl-stage{margin:40px 0 0;display:grid;grid-template-columns:1fr .75fr 1fr;align-items:stretch;border:1px solid var(--ink);border-radius:28px;overflow:hidden} .vx-rl-site{padding:28px 28px 22px;background:#fff} .vx-rl-site_new{background:#0b0f17;color:#fff} .vx-rl-site__k{margin:0 0 14px;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)} .vx-rl-site_new .vx-rl-site__k{color:#ffd84d} .vx-rl-tree{width:100%;height:auto;display:block} .vx-rl-tree .tl{fill:none;stroke:#c9cdd3;stroke-width:1.2} .vx-rl-tree .t0{fill:#0b0f17}.vx-rl-tree .t1{fill:#e6e9ee}.vx-rl-tree .t2{fill:#f1f3f6;stroke:#d4d8de} .vx-rl-tree .t2.v{fill:#0E68FF;stroke:#0E68FF} .vx-rl-site_new .tl{stroke:#3a4250}.vx-rl-site_new .t0{fill:#fff}.vx-rl-site_new .t1{fill:#262c36}.vx-rl-site_new .t2{fill:#1a2030;stroke:#3a4250} .vx-rl-site__f{margin:12px 0 0;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2)} .vx-rl-site_new .vx-rl-site__f{color:#c9ced6} .vx-rl-site__f i{width:12px;height:12px;border-radius:3px;background:#0E68FF} .vx-rl-site__f i.ok{background:#ffd84d} .vx-rl-mig{background:var(--vx-off);border-left:1px solid var(--line);border-right:1px solid var(--line);padding:28px 0 22px;display:flex;flex-direction:column} .vx-rl-mig__k{margin:0 0 14px;padding:0 20px;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:#0E68FF;text-align:center} .vx-rl-mig svg{width:100%;height:auto;flex:1} .vx-rl-mig path{fill:none;stroke:#0E68FF;stroke-width:2} .vx-rl-mig__tags{list-style:none;margin:12px 0 0;padding:0 16px;display:flex;flex-wrap:wrap;gap:6px;justify-content:center} .vx-rl-mig__tags li{font-size:12px;padding:5px 10px;border-radius:999px;background:#fff;border:1px solid var(--line)} .vx-rl-hero__foot{display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-top:44px;align-items:start} .vx-anim .vx-rl-stage .t1,.vx-anim .vx-rl-stage .t2{opacity:0;transition:opacity .5s ease;transition-delay:calc(var(--i) * 70ms + .3s)} .vx-anim .vx-rl-site_new .t1,.vx-anim .vx-rl-site_new .t2{transition-delay:calc(var(--i) * 70ms + 1.9s)} .vx-anim .vx-rl-stage.is-in .t1,.vx-anim .vx-rl-stage.is-in .t2{opacity:1} .vx-anim .vx-rl-mig path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s var(--vx-ease);transition-delay:calc(var(--i) * 120ms + 1s)} .vx-anim .vx-rl-stage.is-in .vx-rl-mig path{stroke-dashoffset:0} .vx-anim .vx-rl-site_new{background:#fff;transition:background .8s ease 1.8s,color .8s ease 1.8s} .vx-anim .vx-rl-stage.is-in .vx-rl-site_new{background:#0b0f17} .vx-rl-story{background:#0b0f17;color:#fff} .vx-rl-story .cx-h2{color:#fff} .vx-rl-scrub{height:360vh;position:relative} .vx-rl-scrub__pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;padding-top:60px} .vx-rl-scrub__pin>.cx-wrap{width:100%} .vx-rl-story__head{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start;margin-bottom:24px} .vx-rl-phases{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid #262c36} .vx-rl-phases li{padding:16px 16px 0 0;color:#5d646e;transition:color .4s} .vx-rl-phases li span{display:block;font-size:12.5px;margin-bottom:6px} .vx-rl-phases li b{display:block;font-weight:500;font-size:15px;line-height:1.3;margin-bottom:8px} .vx-rl-phases li p{margin:0;font-size:13px;line-height:1.5;max-height:0;overflow:hidden;opacity:0;transition:opacity .4s,max-height .4s} [data-active="1"] .vx-rl-phases li[data-k="1"],[data-active="2"] .vx-rl-phases li[data-k="2"],[data-active="3"] .vx-rl-phases li[data-k="3"],[data-active="4"] .vx-rl-phases li[data-k="4"]{color:#fff;box-shadow:inset 0 2px 0 #0E68FF} [data-active="1"] .vx-rl-phases li[data-k="1"] p,[data-active="2"] .vx-rl-phases li[data-k="2"] p,[data-active="3"] .vx-rl-phases li[data-k="3"] p,[data-active="4"] .vx-rl-phases li[data-k="4"] p{max-height:120px;opacity:1;color:#c9ced6} .vx-rl-map{margin:0} .vx-rl-map svg{width:100%;height:auto;max-height:calc(100vh - 380px);display:block;margin:0 auto} .vx-rl-map .h{fill:#7d838c;font-size:13px;letter-spacing:.06em;text-transform:uppercase} .vx-rl-u rect{fill:#141a24;stroke:#262c36;transition:fill .4s,stroke .4s} .vx-rl-u text{fill:#c9ced6;font-size:14px;font-family:inherit} .vx-rl-u .dot{fill:#3a4250;transition:fill .4s} .vx-rl-u .code{fill:#ffd84d;font-size:12px;opacity:0;transition:opacity .4s} .vx-rl-u_new rect{fill:#fff;stroke:#fff} .vx-rl-u_new text{fill:#0b0f17} .vx-rl-u .chk{opacity:0;transition:opacity .4s} .vx-rl-u .chk circle{fill:#0E68FF}.vx-rl-u .chk path{fill:none;stroke:#fff;stroke-width:2} .vx-rl-u_new{opacity:.25;transition:opacity .5s} .vx-rl-map__lines path{fill:none;stroke:#0E68FF;stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .7s var(--vx-ease);transition-delay:calc(var(--i) * 70ms)} .vx-rl-map__lines path.weak{stroke:#ffd84d;stroke-dasharray:.02 .015;opacity:0;transition:opacity .5s .4s} .vx-rl-scrub:not([data-active="1"]) .vx-rl-map__lines path.weak{opacity:1} .vx-rl-mon{opacity:0;transition:opacity .5s} .vx-rl-mon rect{fill:#0E68FF}.vx-rl-mon circle{fill:#ffd84d}.vx-rl-mon text{fill:#fff;font-size:14px} [data-active="1"] .vx-rl-u_old.is-v rect,.vx-s1 .vx-rl-u_old.is-v rect{stroke:#0E68FF} .vx-rl-scrub[data-active] .vx-rl-u_old.is-v .dot{fill:#0E68FF} .vx-rl-scrub:not([data-active="1"]) .vx-rl-u_new{opacity:1} .vx-rl-scrub:not([data-active="1"]) .vx-rl-map__lines path{stroke-dashoffset:0} .vx-rl-scrub:not([data-active="1"]) .vx-rl-map__lines path.weak{stroke-dashoffset:0} .vx-rl-scrub:not([data-active="1"]) .vx-rl-u .code{opacity:1} [data-active="3"] .vx-rl-u .chk,[data-active="4"] .vx-rl-u .chk{opacity:1} [data-active="4"] .vx-rl-mon{opacity:1} .vx-rl-st{padding:150px 0 130px;background:#fff} .vx-rl-mega{font-size:68px;line-height:1.02;max-width:1180px} .vx-rl-mega em{color:var(--ink);opacity:.38} .vx-rl-st__grid{display:grid;grid-template-columns:5fr 7fr;gap:72px;margin-top:56px} .vx-rl-st__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)} .vx-rl-st__list li{display:grid;grid-template-columns:180px 1fr;gap:24px;padding:20px 0;border-bottom:1px solid var(--line)} .vx-rl-st__list b{font-weight:500;font-size:20px} .vx-rl-st__list p{margin:0;color:var(--ink-2);line-height:1.6} .vx-rl-st__cta{margin-top:72px;background:#0b0f17;color:#fff;border-radius:28px;padding:44px 48px;display:flex;justify-content:space-between;align-items:center;gap:32px} .vx-rl-st__cta p{margin:0;font-size:28px;line-height:1.25;letter-spacing:-.02em;max-width:640px} .vx-anim [data-vx].vx-rl-st__list li{opacity:0;transform:translate3d(0,16px,0);transition:opacity .6s ease,transform .7s var(--vx-ease);transition-delay:calc(var(--i) * 120ms)} .vx-anim [data-vx].vx-rl-st__list.is-in li{opacity:1;transform:none} @media (max-width:1100px){ .vx-rl-h1{font-size:58px} .vx-rl-mega{font-size:52px} .vx-rl-hero__foot,.vx-rl-st__grid,.vx-rl-story__head{grid-template-columns:1fr;gap:28px} } @media (max-width:800px){ .vx-rl-stage{grid-template-columns:1fr} .vx-rl-mig{border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0} .vx-rl-mig svg{display:none} .vx-rl-scrub{height:auto} .vx-rl-scrub__pin{position:static;height:auto;padding:96px 0} .vx-rl-phases{grid-template-columns:1fr 1fr} .vx-rl-phases li p{max-height:none!important;opacity:1!important;color:#c9ced6} .vx-rl-phases li{color:#fff} .vx-rl-scrub .vx-rl-u_new,.vx-rl-scrub .vx-rl-u .chk,.vx-rl-scrub .vx-rl-mon,.vx-rl-scrub .vx-rl-u .code{opacity:1} .vx-rl-scrub .vx-rl-map__lines path{stroke-dashoffset:0} } @media (max-width:700px){ .vx-rl-hero{padding:104px 0 64px} .vx-rl-h1{font-size:40px} .vx-rl-mega{font-size:34px} .vx-rl-st{padding:96px 0} .vx-rl-st__list li{grid-template-columns:1fr;gap:6px} .vx-rl-st__cta{flex-direction:column;align-items:flex-start;padding:32px 26px} .vx-rl-st__cta p{font-size:22px} .vx-rl-phases{grid-template-columns:1fr} .vx-rl-map{overflow-x:auto} .vx-rl-map svg{min-width:640px;max-height:none} } /* ============ Shopware: technisch, modular, Raster ============ */ .vx-sw-hero{background:#0b0f17;color:#fff;padding:120px 0 80px;overflow:hidden} .vx-sw-hero__grid{max-width:1360px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:center} .vx-sw-hero .cx-crumbs a,.vx-sw-hero .cx-crumbs span{color:#9aa1ab} .vx-sw-h1{font-size:58px;line-height:1.04} .vx-sw-hero .vx-intro{color:#b4bac3} .vx-sw-hero .cx-link{color:#fff;border-color:#3a4250} .vx-sw-hero .vx-trustline{color:#7d838c} .vx-sw-net{margin:0;position:relative} .vx-sw-net svg{width:100%;height:auto;display:block} .vx-sw-grid path{stroke:#161c27;stroke-width:1} .vx-sw-tiers text{fill:#5d646e;font-size:12px;letter-spacing:.05em;text-transform:uppercase} .vx-sw-edges path{fill:none;stroke:#2a313c;stroke-width:1.2} .vx-sw-edges path.hot{stroke:#0E68FF;stroke-width:2} .vx-sw-n rect{fill:#141a24;stroke:#3a4250} .vx-sw-n text{fill:#c9ced6;font-size:13px} .vx-sw-n.t2 rect.i{fill:#3a4250;stroke:none} .vx-sw-n.hot rect{stroke:#0E68FF} .vx-sw-n.t0 rect{fill:#fff;stroke:#fff}.vx-sw-n.t0 text{fill:#0b0f17;font-weight:500} .vx-sw-n.t3 rect{fill:#ffd84d;stroke:#ffd84d}.vx-sw-n.t3 text{fill:#0b0f17;font-weight:500} .vx-sw-n.t1.hot rect{fill:#0E68FF}.vx-sw-n.t1.hot text{fill:#fff} .vx-sw-n.t2.hot rect{fill:#0E68FF}.vx-sw-n.t2.hot rect.i{fill:#fff} .vx-anim .vx-sw-n{transform:translate(var(--sx),var(--sy));opacity:.6;transition:transform 1.4s var(--vx-ease),opacity .8s;transition-delay:calc(var(--d) + .3s)} .vx-anim .vx-sw-net.is-in .vx-sw-n{transform:none;opacity:1} .vx-anim .vx-sw-net .vx-sw-n.hot rect{transition:fill .5s 2.2s,stroke .5s 2.2s} .vx-anim .vx-sw-net:not(.is-in) .vx-sw-n.hot rect{fill:#141a24;stroke:#3a4250} .vx-anim .vx-sw-edges path,.vx-anim .vx-sw-tiers text{opacity:0;transition:opacity .6s ease;transition-delay:calc(var(--i,0) * 30ms + 1.6s)} .vx-anim .vx-sw-net.is-in .vx-sw-edges path,.vx-anim .vx-sw-net.is-in .vx-sw-tiers text{opacity:1} .vx-sw-story{padding:140px 0;background:#fff} .vx-sw-ix__tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--ink);border-radius:16px;overflow:hidden;margin-bottom:24px} .vx-sw-ix__tabs button{all:unset;box-sizing:border-box;cursor:pointer;padding:20px 24px;display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:4px;align-items:baseline;transition:background .3s,color .3s} .vx-sw-ix__tabs button+button{border-left:1px solid var(--ink)} .vx-sw-ix__tabs button span{font-size:12.5px;color:#0E68FF;grid-row:1/3} .vx-sw-ix__tabs button b{font-weight:500;font-size:19px} .vx-sw-ix__tabs button i{font-style:normal;font-size:14px;color:var(--ink-2)} .vx-sw-ix__tabs button[aria-selected="true"]{background:#0b0f17;color:#fff} .vx-sw-ix__tabs button[aria-selected="true"] i{color:#c9ced6} .vx-sw-ix__tabs button[aria-selected="true"] span{color:#ffd84d} .vx-sw-ix__tabs button:focus-visible{outline:2px solid #0E68FF;outline-offset:-4px} .vx-sw-ix__board{position:relative;display:grid;grid-template-columns:3fr 3fr 2.4fr;gap:0 10%;min-height:400px;padding:28px;background:#f4f5f7;border-radius:24px;background-image:linear-gradient(#e6e9ee 1px,transparent 1px),linear-gradient(90deg,#e6e9ee 1px,transparent 1px);background-size:32px 32px} .vx-sw-col{position:relative;z-index:1;transition:opacity .45s} .vx-sw-col_b{order:2}.vx-sw-col_c{order:3} .vx-sw-col__k{margin:0 0 14px;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)} .vx-sw-col ul{list-style:none;margin:0;padding:0;display:grid;gap:6px} .vx-sw-col_a li{font-size:13.5px;padding:8px 12px;background:#fff;border:1px solid #e1e4e8;border-radius:8px;transition:transform .45s var(--vx-ease),border-color .45s,background .45s} .vx-sw-col_c li{padding:14px;background:#fff;border-radius:12px;border:1px solid #e1e4e8;display:grid;gap:4px;margin-bottom:22px} .vx-sw-col_c li span{font-size:14px} .vx-sw-col_c li em{font-style:normal;font-size:11.5px;color:#0E68FF;text-transform:uppercase;letter-spacing:.05em} .vx-sw-arch{display:grid;gap:14px} .vx-sw-arch__lvl{display:flex;flex-wrap:wrap;gap:6px} .vx-sw-arch__lvl span{font-size:13px;padding:8px 12px;border-radius:8px;background:#fff;border:1px solid #e1e4e8;transition:background .45s,color .45s,border-color .45s} .vx-sw-arch__lvl.l0 span{background:#0b0f17;color:#fff;border-color:#0b0f17} .vx-sw-ix__wires{position:absolute;inset:28px;width:calc(100% - 56px);height:calc(100% - 56px);z-index:0;pointer-events:none} .vx-sw-ix__wires path{fill:none;stroke:#0E68FF;stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .8s var(--vx-ease)} [data-active="1"] .vx-sw-col_b,[data-active="1"] .vx-sw-col_c{opacity:.4} [data-active="1"] .vx-sw-col_a li.g0{border-color:#0b0f17} [data-active="2"] .vx-sw-col_a,[data-active="2"] .vx-sw-col_b{opacity:.4} [data-active="3"] .vx-sw-col_c li:not(:last-child){opacity:.5} [data-active="3"] .vx-sw-col_c li:last-child{border-color:#0E68FF} [data-active="2"] .vx-sw-col_c li{border-color:#0E68FF;box-shadow:0 0 0 3px rgba(14,104,255,.12)} [data-active="3"] .vx-sw-arch__lvl.l1 span:first-child,[data-active="3"] .vx-sw-arch__lvl.l2 span,[data-active="3"] .vx-sw-arch__lvl.l3 span{background:#0E68FF;color:#fff;border-color:#0E68FF} [data-active="3"] .vx-sw-ix__wires path{stroke-dashoffset:0} [data-active="3"] .vx-sw-col_a li.g0{border-color:#0E68FF;transform:translateX(6px)} .vx-sw-ix__text{margin-top:22px;min-height:56px;max-width:900px} .vx-sw-ix__text p{display:none;margin:0;font-size:18px;line-height:1.55;color:var(--ink-2)} .vx-sw-ix__text b{color:var(--ink);font-weight:500} [data-active="1"] .vx-sw-ix__text p[data-k="1"],[data-active="2"] .vx-sw-ix__text p[data-k="2"],[data-active="3"] .vx-sw-ix__text p[data-k="3"]{display:block} .vx-sw-st{padding:140px 0 120px;background:#f4f5f7;background-image:linear-gradient(#e6e9ee 1px,transparent 1px),linear-gradient(90deg,#e6e9ee 1px,transparent 1px);background-size:48px 48px} .vx-sw-mega{font-size:80px;max-width:1150px} .vx-sw-levers{list-style:none;margin:72px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--ink);border:2px solid var(--ink);border-radius:20px;overflow:hidden} .vx-sw-levers li{background:#fff;padding:36px 32px} .vx-sw-levers li:nth-child(2){background:#0b0f17;color:#fff} .vx-sw-levers__n{display:inline-flex;width:36px;height:36px;border-radius:8px;background:#0E68FF;color:#fff;align-items:center;justify-content:center;font-size:15px;margin-bottom:40px} .vx-sw-levers h3{font-size:26px;line-height:1.15;letter-spacing:-.02em;font-weight:500;margin:0 0 12px;text-transform:none;color:inherit} .vx-sw-levers p{margin:0;line-height:1.6;color:var(--ink-2)} .vx-sw-levers li:nth-child(2) p{color:#c9ced6} .vx-anim [data-vx].vx-sw-levers li{opacity:0;transform:translate3d(0,24px,0);transition:opacity .6s ease,transform .8s var(--vx-ease);transition-delay:calc(var(--i) * 140ms)} .vx-anim [data-vx].vx-sw-levers.is-in li{opacity:1;transform:none} @media (max-width:1100px){ .vx-sw-hero__grid{grid-template-columns:1fr} .vx-sw-net{max-width:600px} .vx-sw-mega{font-size:60px} } @media (max-width:800px){ .vx-sw-ix__board{grid-template-columns:1fr;gap:28px} .vx-sw-col_b{order:3}.vx-sw-col_c{order:2} .vx-sw-ix__wires{display:none} .vx-sw-col_c li{margin-bottom:0} } @media (max-width:700px){ .vx-sw-hero{padding:104px 0 56px} .vx-sw-h1{font-size:38px} .vx-sw-story,.vx-sw-st{padding:96px 0} .vx-sw-ix__tabs{grid-template-columns:1fr} .vx-sw-ix__tabs button+button{border-left:0;border-top:1px solid var(--ink)} .vx-sw-mega{font-size:38px} .vx-sw-levers{grid-template-columns:1fr} } .vx-sw-hero__text{max-width:600px;justify-self:end;padding-left:max(0px,calc((100vw - 1240px)/2 - 60px))} @media (max-width:1100px){.vx-sw-hero__text{justify-self:start;padding-left:0}} /* ============ KI-SEO: helle, ruhige Ebenen in Perspektive ============ */ .vx-ki-hero{background:linear-gradient(#fff,#f3f5f9);padding:130px 0 96px;overflow:hidden} .vx-ki-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center} .vx-ki-h1{font-size:64px} .vx-ki-stack{margin:0} .vx-ki-stack__scene{position:relative;height:540px;perspective:1400px} .vx-ki-layer{position:absolute;left:4%;right:4%;top:calc(var(--i) * 128px + 20px);height:170px;transform-style:preserve-3d} .vx-ki-layer__plate{position:absolute;left:0;right:30%;top:0;height:150px;border-radius:20px;background:#fff;border:1px solid #dde2ea;box-shadow:0 30px 60px -30px rgba(11,15,23,.35);transform:rotateX(58deg) rotateZ(-34deg);transform-origin:center;padding:18px;overflow:hidden} .vx-ki-layer_g .vx-ki-layer__plate{background:#0b0f17;border-color:#0b0f17} .vx-ki-layer_p .vx-ki-layer__plate{background:#eaf1ff;border-color:#c8d9ff} .vx-ki-layer__l{position:absolute;right:0;top:38px;width:34%;margin:0;padding-left:18px;border-left:2px solid #0E68FF} .vx-ki-layer__l b{display:block;font-weight:500;font-size:16px;line-height:1.25;margin-bottom:4px} .vx-ki-layer__l span{display:block;font-size:13px;line-height:1.45;color:var(--ink-2)} .vx-ki-mock{height:100%} .vx-ki-mock_g{display:flex;flex-direction:column;gap:9px} .vx-ki-mock_g span{display:block;height:9px;border-radius:5px;background:#3a4250} .vx-ki-mock_g .q{width:55%;align-self:flex-end;background:#0E68FF;height:14px} .vx-ki-mock_g .a{width:92%}.vx-ki-mock_g .a.s{width:70%} .vx-ki-mock_g .src{display:flex;gap:6px;background:none} .vx-ki-mock_g .src i{width:42px;height:14px;border-radius:7px;background:#ffd84d} .vx-ki-mock_p{display:flex;align-items:flex-end;gap:12px;padding:6px 10px} .vx-ki-mock_p span{flex:1;height:var(--h);background:#0E68FF;border-radius:6px 6px 2px 2px;opacity:.85} .vx-ki-mock_c{display:grid;gap:10px} .vx-ki-mock_c span{display:grid;gap:5px} .vx-ki-mock_c i{height:8px;width:40%;background:#0E68FF;border-radius:4px;opacity:.6} .vx-ki-mock_c b{height:10px;width:85%;background:#dde2ea;border-radius:5px} .vx-ki-beam{position:absolute;left:32%;top:60px;width:2px;height:420px;background:linear-gradient(#0E68FF,rgba(14,104,255,.1));transform:translateX(-50%)} .vx-ki-base{position:absolute;left:4%;right:4%;bottom:0;display:flex;gap:8px} .vx-ki-base span{flex:1;text-align:center;padding:12px 8px;font-size:13.5px;font-weight:500;background:#0b0f17;color:#fff;border-radius:10px} .vx-anim .vx-ki-layer{opacity:0;transform:translate3d(0,40px,0);transition:opacity .8s ease,transform 1.1s var(--vx-ease);transition-delay:calc((2 - var(--i)) * 220ms + 400ms)} .vx-anim .vx-ki-stack.is-in .vx-ki-layer{opacity:1;transform:translate3d(0,calc(var(--vx-p,0) * var(--i) * -10px),0)} .vx-anim .vx-ki-beam{transform:translateX(-50%) scaleY(0);transform-origin:bottom;transition:transform 1.2s var(--vx-ease) 1.2s} .vx-anim .vx-ki-stack.is-in .vx-ki-beam{transform:translateX(-50%) scaleY(1)} .vx-anim .vx-ki-base span{opacity:0;transition:opacity .6s ease .2s} .vx-anim .vx-ki-stack.is-in .vx-ki-base span{opacity:1} .vx-ki-story{background:#f7f7f5} .vx-ki-scrub{height:320vh;position:relative} .vx-ki-scrub__pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;padding-top:60px} .vx-ki-scrub__pin>.cx-wrap{width:100%} .vx-ki-story__head{margin-bottom:36px} .vx-ki-split{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:0;border-radius:28px;overflow:hidden;border:1px solid var(--line)} .vx-ki-split__change{background:#fff;padding:32px;display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start} .vx-ki-split__change .vx-ki-split__k{grid-column:1/-1} .vx-ki-split__k{margin:0;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)} .vx-ki-split__stay{background:#0b0f17;color:#fff;padding:32px} .vx-ki-split__stay .vx-ki-split__k{color:#ffd84d;margin-bottom:20px} .vx-ki-screens{position:relative;height:220px;background:#f4f5f7;border-radius:16px;overflow:hidden} .vx-ki-screen{position:absolute;inset:16px;opacity:0;transform:translate3d(0,12px,0);transition:opacity .45s ease,transform .55s var(--vx-ease)} [data-active="1"] .vx-ki-screen[data-k="1"],[data-active="2"] .vx-ki-screen[data-k="2"],[data-active="3"] .vx-ki-screen[data-k="3"],[data-active="4"] .vx-ki-screen[data-k="4"]{opacity:1;transform:none} .vx-ki-screen .sr{display:grid;gap:8px;width:48%} .vx-ki-screen .sr i{height:30px;background:#fff;border-radius:6px} .vx-ki-screen .ai{position:absolute;right:0;top:0;width:46%;background:#0b0f17;border-radius:10px;padding:12px;display:grid;gap:7px} .vx-ki-screen .ai b{height:10px;width:40%;background:#0E68FF;border-radius:5px} .vx-ki-screen .ai span{height:8px;background:#3a4250;border-radius:4px} .vx-ki-screen .ans{background:#fff;border-radius:12px;padding:18px;display:grid;gap:10px} .vx-ki-screen .ans span{height:10px;background:#dde2ea;border-radius:5px}.vx-ki-screen .ans span.s{width:60%} .vx-ki-screen .ans em{display:flex;gap:6px;font-style:normal} .vx-ki-screen .ans i{font-style:normal;width:22px;height:22px;border-radius:50%;background:#e9f0ff;color:#0E68FF;font-size:11px;display:flex;align-items:center;justify-content:center} .vx-ki-screen .chat{display:flex;flex-direction:column;gap:9px} .vx-ki-screen .chat span{height:26px;border-radius:13px;width:60%} .vx-ki-screen .chat .u{align-self:flex-end;background:#0E68FF;width:50%}.vx-ki-screen .chat .u.s{width:34%} .vx-ki-screen .chat .b{background:#fff;width:72%}.vx-ki-screen .chat .b.l{width:80%;height:40px} .vx-ki-screen .flow{display:flex;align-items:center;height:100%;gap:4px} .vx-ki-screen .flow i{font-style:normal;font-size:12px;padding:8px 10px;background:#fff;border-radius:8px} .vx-ki-screen .flow b{flex:1;height:2px;background:#0E68FF} .vx-ki-change{list-style:none;margin:0;padding:0;display:grid;gap:4px} .vx-ki-change li{padding:10px 0 10px 14px;border-left:2px solid var(--line);color:#a7adb5;transition:color .35s,border-color .35s} .vx-ki-change b{display:block;font-weight:500;font-size:16px} .vx-ki-change span{display:block;font-size:13.5px;line-height:1.45;max-height:0;overflow:hidden;opacity:0;transition:max-height .35s,opacity .35s} [data-active="1"] .vx-ki-change li[data-k="1"],[data-active="2"] .vx-ki-change li[data-k="2"],[data-active="3"] .vx-ki-change li[data-k="3"],[data-active="4"] .vx-ki-change li[data-k="4"]{color:var(--ink);border-color:#0E68FF} [data-active="1"] .vx-ki-change li[data-k="1"] span,[data-active="2"] .vx-ki-change li[data-k="2"] span,[data-active="3"] .vx-ki-change li[data-k="3"] span,[data-active="4"] .vx-ki-change li[data-k="4"] span{max-height:60px;opacity:1;color:var(--ink-2)} .vx-ki-stay{list-style:none;margin:0;padding:0;display:grid;gap:8px} .vx-ki-stay li{padding:14px 16px;border-radius:12px;background:#141a24;border:1px solid #262c36;font-size:16px;display:flex;align-items:center;gap:12px} .vx-ki-stay li::before{content:"";width:8px;height:8px;border-radius:50%;background:#0E68FF;flex:0 0 auto} .vx-ki-stay__note{margin:18px 0 0;font-size:13px;color:#7d838c} .vx-ki-story__claim{margin:32px 0 0;font-size:26px;letter-spacing:-.015em;color:var(--ink-2)} .vx-ki-story__claim strong{color:var(--ink);font-weight:500} .vx-ki-vs{padding:140px 0;background:#fff} .vx-ki-vs__duel{margin-top:56px;display:grid;grid-template-columns:1fr 80px 1.15fr;align-items:stretch} .vx-ki-vs__a,.vx-ki-vs__b{border-radius:28px;padding:40px} .vx-ki-vs__a{background:#f4f5f7;color:#7d838c} .vx-ki-vs__b{background:#0b0f17;color:#fff;box-shadow:0 40px 80px -40px rgba(14,104,255,.55)} .vx-ki-vs__t{margin:0 0 24px;font-size:34px;line-height:1.1;letter-spacing:-.025em;font-weight:500} .vx-ki-vs__a .vx-ki-vs__t{text-decoration:line-through;text-decoration-thickness:2px} .vx-ki-vs__duel ul{list-style:none;margin:0;padding:0} .vx-ki-vs__duel li{padding:12px 0;border-top:1px solid rgba(127,133,141,.25);font-size:17px} .vx-ki-vs__b li{border-color:#262c36} .vx-ki-vs__b li::before{content:"";display:inline-block;width:10px;height:6px;margin:0 12px 3px 0;border:solid #0E68FF;border-width:0 0 1.8px 1.8px;transform:rotate(-45deg)} .vx-ki-vs__mid{display:flex;align-items:center;justify-content:center} .vx-ki-vs__mid span{width:52px;height:52px;border-radius:50%;background:#ffd84d;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500} .vx-ki-vs__note{margin:48px 0 0;font-size:22px;line-height:1.4;letter-spacing:-.01em;max-width:900px;color:var(--ink-2)} .vx-anim .vx-ki-vs__a{transform:translate3d(-30px,0,0);opacity:0;transition:opacity .7s ease,transform .9s var(--vx-ease)} .vx-anim .vx-ki-vs__b{transform:translate3d(30px,0,0);opacity:0;transition:opacity .7s ease .15s,transform .9s var(--vx-ease) .15s} .vx-anim .vx-ki-vs__duel.is-in .vx-ki-vs__a,.vx-anim .vx-ki-vs__duel.is-in .vx-ki-vs__b{opacity:1;transform:none} @media (max-width:1100px){ .vx-ki-hero__grid{grid-template-columns:1fr} .vx-ki-h1{font-size:54px} .vx-ki-stack{max-width:640px} } @media (max-width:900px){ .vx-ki-scrub{height:auto} .vx-ki-scrub__pin{position:static;height:auto;padding:96px 0} .vx-ki-split{grid-template-columns:1fr} .vx-ki-split__change{grid-template-columns:1fr} .vx-ki-screens{display:none} .vx-ki-change li{color:var(--ink);border-color:#0E68FF} .vx-ki-change span{max-height:none!important;opacity:1!important;color:var(--ink-2)} .vx-ki-vs__duel{grid-template-columns:1fr;gap:12px} .vx-ki-vs__mid{height:40px} } @media (max-width:700px){ .vx-ki-hero{padding:104px 0 56px} .vx-ki-h1{font-size:40px} .vx-ki-stack__scene{height:430px} .vx-ki-layer{top:calc(var(--i) * 100px + 10px);height:140px} .vx-ki-layer__plate{height:120px;right:34%;padding:12px} .vx-ki-layer__l{top:24px;width:40%;padding-left:10px} .vx-ki-layer__l b{font-size:13px} .vx-ki-layer__l span{display:none} .vx-ki-beam{height:330px} .vx-ki-vs{padding:96px 0} .vx-ki-vs__a,.vx-ki-vs__b{padding:28px} .vx-ki-vs__t{font-size:26px} .vx-ki-vs__note,.vx-ki-story__claim{font-size:19px} } .vx-bb-mob{display:none} .vx-bb-mob__r{display:grid;grid-template-columns:1fr 24px auto;align-items:center;gap:8px} .vx-bb-mob__r .q{background:#0E68FF;color:#fff;border-radius:999px;padding:9px 14px;font-size:13px} .vx-bb-mob__r .ar{height:1.5px;background:#0E68FF} .vx-bb-mob__r .t{background:#fff;color:#0b0f17;border-radius:10px;padding:7px 10px;font-size:13px;font-weight:500;line-height:1.2} .vx-bb-mob__r .t i{display:block;font-style:normal;font-weight:400;font-size:11px;color:#6b727c} /* Ohne JS (kein vx-anim und keine Scroll-Steuerung): Scroll-Sektionen als normale Liste */ html:not(.vx-anim) .vx-bb-scrub,html:not(.vx-anim) .vx-ki-scrub,html:not(.vx-anim) .vx-rl-scrub{height:auto} html:not(.vx-anim) .vx-bb-scrub__pin,html:not(.vx-anim) .vx-ki-scrub__pin,html:not(.vx-anim) .vx-rl-scrub__pin{position:static;height:auto;padding:110px 0} html:not(.vx-anim) .vx-bb-scrub__r{min-height:0;display:grid;gap:14px} html:not(.vx-anim) .vx-bb-ph{position:static;opacity:1;visibility:visible;transform:none} html:not(.vx-anim) .vx-bb-rail,html:not(.vx-anim) .vx-bb-rail__bar{display:none} html:not(.vx-anim) .vx-ki-change span,html:not(.vx-anim) .vx-rl-phases li p{max-height:none;opacity:1} html:not(.vx-anim) .vx-rl-u_new,html:not(.vx-anim) .vx-rl-u .chk,html:not(.vx-anim) .vx-rl-u .code,html:not(.vx-anim) .vx-rl-mon{opacity:1} html:not(.vx-anim) .vx-rl-map__lines path{stroke-dashoffset:0} .vx-h1 .vx-h1__pre{display:flex;width:max-content;max-width:100%;margin:0 0 26px;font-size:13px;line-height:1.4;letter-spacing:.02em;font-weight:400;color:var(--ink-2)} .vx-bb-hero .vx-h1 .vx-h1__pre,.vx-sw-hero .vx-h1 .vx-h1__pre{color:#c9ced6} .vx-sysrow{margin:0 0 14px} .vx-h1 .vx-h1__pre::before{background:#0E68FF}