/* ========================================================================== VNC Child CSS ========================================================================== Purpose ------- This file is the central override layer for the purchased parent theme. It intentionally contains strong, opinionated global overrides. Maintenance Rules ----------------- 1. Keep global tokens, typography, utilities and cross-component overrides here. 2. Keep module-local CSS in the module/component files unless the goal is explicitly to override parent-theme behavior globally. 3. Prefer explicit selectors over fragile top-level nesting. Table Of Contents ----------------- Modern CSS Reset CSS Custom Properties Accessibility Utilities Base & Typography Utility Classes Body Header Navigation Button Component Richtext & Content Text Container Card Intro Arrow Link Box Over Image Image Teaser Video Component Slider Footer Icons Text Polygon Quote Contact Logo Stage Success Section Content Card Steps Print Styles ========================================================================== */ /* =================================== @font-face Declarations =================================== */ @font-face { font-family: 'PP Fraktion Sans'; src: url('https://139566831.fs1.hubspotusercontent-eu1.net/hubfs/139566831/Fonts/PPFraktionSans-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'PP Supply Sans'; src: url('https://139566831.fs1.hubspotusercontent-eu1.net/hubfs/139566831/Fonts/PPSupplySans-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } /* ========================================================================== Modern CSS Reset ========================================================================== */ html{ font-size:100% !important; } *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { hanging-punctuation: first last; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } body { line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } :where(img, picture, video, canvas, svg) { display: block; max-inline-size: 100%; block-size: auto; } :where(input, button, textarea, select) { font: inherit; } :where(p, h1, h2, h3, h4, h5, h6) { overflow-wrap: break-word; text-wrap: balance; } p { text-wrap: pretty; } :where(p, li, h1, h2, h3, h4, h5, h6) { line-height: 1.5; letter-spacing: normal; word-spacing: normal; } :target { scroll-margin-block-start: 5rem; } ::selection { background: var(--color-primary-100); color: var(--color-white); } /* ========================================================================== 02. CSS Custom Properties ========================================================================== */ :root, :host { --container-max-width: 1536px; --container-padding-x: 24px; --container-padding-y: 0; --layout-gutter: 24px; --scroll-offset: 66px; /* Black & White */ --color-black: #000; --color-white: #fff; /* Neutral */ --color-neutral-400: #54545c; --color-neutral-600: #313135; /* Primary */ --color-primary-100: #0088d8; --color-primary-200: #00c0ff; --color-primary-300: #003C8C; --color-primary-400: #0050b0; --color-text-primary: #000; --color-text-white: #fff; --color-background: #f4f4f4; --color-disabled:#787880; /* Background Accent */ --accent-gradient: linear-gradient(180deg, var(--color-primary-100) 0%, var(--color-primary-300) 100%); /* Spacing */ --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 4rem; --space-3xl: 10rem; /* Typography */ --font-primary: "PP Fraktion Sans", system-ui, sans-serif; --font-secondary: "PP Supply Sans", system-ui, sans-serif; /* Transitions */ --transition-base: 0.3s ease; --transition-fast: 0.2s ease; /* Layout */ --content-max-width: 920px; /* Logo Component */ --logo-poly-left: 0px; --logo-poly-top: 50%; --logo-poly-width: 476px; --logo-poly-height: 565px; --logo-grey: #f4f4f4; --logo-gradient: linear-gradient(180deg, #0088d8 0%, #003c8c 100%); --steps-poly-left: 0px; --steps-poly-top: -150px; --steps-poly-width: 690px; --steps-poly-height: 690px; --steps-grey: #f4f4f4; --steps-gradient: linear-gradient(180deg, #0088D8 0%, #003C8C 100%); /* Focus (Accessibility) */ --focus-outline-width: 3px; --focus-outline-offset: 2px; --focus-outline-color: var(--color-primary-200); /* Touch Target Minimum Size */ --touch-target-min: 24px; /* Font Weights */ --fw-normal: 400; --fw-medium: 500; --fw-bold: 700; /* Heading Sizes */ --fs-h1: clamp(4rem, 3rem + 5vw, 7rem); /* 64px → 112px */ --fs-h2: clamp(2.5rem, 2rem + 2.5vw, 3rem); /* 40px → 48px */ --fs-h3: 1.5rem; /* 24px */ /* Heading Line Heights */ --lh-h1: 1; --lh-h2: clamp(2.875rem, 2.5rem + 1vw, 3.5rem); /* 46px → 56px */ --lh-h3: 1.3; /* Paragraph Sizes */ --fs-p-lg: 1.5rem; /* 24px */ --fs-p: 1.25rem; /* 20px */ --fs-p-sm: 1rem; /* 16px */ /* Paragraph Line Heights */ --lh-p-lg: 1.4; --lh-p: 1.5; --lh-p-sm: 1.5; /* Icon & Polygon Assets (Data-URIs / Remote URLs)*/ /* Slider Dots */ --icon-dot-inactive: url("data:image/svg+xml,%3Csvg width='15' height='16' viewBox='0 0 15 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.52778 15.3111L-8.57787e-05 7.70261L5.52778 0.0941629L14.4721 3.00033L14.4721 12.4049L5.52778 15.3111Z' fill='%23F4F4F4'/%3E%3C/svg%3E"); --icon-dot-active: url("data:image/svg+xml,%3Csvg width='22' height='24' viewBox='0 0 22 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.29191 23.1141L0.000115399 11.7014L8.29191 0.288704L21.7083 4.64796L21.7083 18.7548L8.29191 23.1141Z' fill='%2300C0FF'/%3E%3C/svg%3E"); /* Image Teaser Background Polygon */ --bg-image-teaser: url("data:image/svg+xml,%3Csvg width='1667' height='1684' viewBox='0 0 1667 1684' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1666.59 1238.14L717.202 1683.77L-1.26808e-05 918.559L506.131 -0.000188513L1536.14 197.51L1666.59 1238.14Z' fill='%23F4F4F4'/%3E%3C/svg%3E"); /* Text Polygon Background */ --bg-text-polygon: url("data:image/svg+xml,%3Csvg width='600' height='603' viewBox='0 0 600 603' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M338.683 602.868L0.560643 437.955L52.9169 65.4207L423.397 0.0950486L600.01 332.256L338.683 602.868Z' fill='%23F4F4F4'/%3E%3C/svg%3E"); /* Quote Background Polygon */ --bg-quote-polygon: url("data:image/svg+xml,%3Csvg width='566' height='577' viewBox='0 0 566 577' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M254.592 576.107L0.24464 327.063L154.228 0.27815L503.743 47.3575L565.771 403.239L254.592 576.107Z' fill='%23F4F4F4'/%3E%3C/svg%3E"); /* Contact Image Mask Polygon */ --mask-contact-polygon: url("data:image/svg+xml,%3Csvg width='445' height='448' viewBox='0 0 445 448' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M250.94 447.355L-0.00131482 324.963L38.8555 48.4822L313.812 8.44313e-06L444.887 246.517L250.94 447.355Z' fill='black'/%3E%3C/svg%3E"); /* Logo Mask Polygon */ --mask-logo-polygon: url("data:image/svg+xml,%3Csvg width='476' height='565' viewBox='0 0 476 565' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M255.744 0L476 271.743L285.382 565L-52.6829 474.499L-71 125.31L255.744 0Z' fill='%23313135'/%3E%3C/svg%3E"); /* Stage Text Bottom Polygon */ --bg-stage-text-bottom: url("data:image/svg+xml,%3Csvg width='1921' height='343' viewBox='0 0 1921 343' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1850 258.838L89.0918 343L0 107.954V0H1920.51L1850 258.838Z' fill='%23F4F4F4'/%3E%3C/svg%3E"); /* Steps Icon Background */ --steps-icon-bg: url("data:image/svg+xml,%3Csvg width='66' height='69' viewBox='0 0 66 69' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M25.7385 68.6005L0.863136 34.3624L25.7385 0.124415L65.9878 13.2022L65.9878 55.5227L25.7385 68.6005Z' fill='%2354545C'/%3E%3C/svg%3E%0A"); /* Steps Icon Background Active */ --steps-icon-bg-active: url("data:image/svg+xml,%3Csvg width='66' height='69' viewBox='0 0 66 69' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M25.2874 68.6005L0.411964 34.3624L25.2874 0.124415L65.5366 13.2022L65.5366 55.5227L25.2874 68.6005Z' fill='%230088D8'/%3E%3C/svg%3E%0A"); /* Steps Mask Polygon */ --steps-mask: url("data:image/svg+xml;utf8,"); /* Stage Image Masks (Remote Assets) */ --mask-stage-wide: url("https://139566831.fs1.hubspotusercontent-eu1.net/hubfs/139566831/Webseite/stage-polygon.png"); --mask-stage-square: url("https://139566831.fs1.hubspotusercontent-eu1.net/hubfs/139566831/Webseite/stage-polygon-1-1.png"); --mask-stage-169: url("https://139566831.fs1.hubspotusercontent-eu1.net/hubfs/139566831/Webseite/stage-polygon-16-9.png"); /* Navigation Hover */ --nav-hover-icon: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.51193 1.51175L11.0566 1.64431e-05L15.4439 8.61042L8.6106 15.4437L0.000200043 11.0565L1.51193 1.51175Z' fill='%230088D8'/%3E%3C/svg%3E%0A"); --svg-width: clamp(580px, 45.31vw, 800px); --svg-height-ratio: 1.022; /* 870 / 851 */ } .container, .content-wrapper, .dnd-section > .row-fluid { max-width: var(--container-max-width); margin: 0 auto; padding-inline:0; padding-block: 0; width:100% !important; @media (max-width: 1024px){ } } /* ========================================================================== Accessibility Utilities ========================================================================== */ /* Skip Link - Springe zum Inhalt */ .skip-link { position: absolute; inset-block-start: 0; inset-inline-start: 0; z-index: 9999; padding: var(--space-sm) var(--space-md); background: var(--color-primary-100); color: var(--color-white); font-weight: 700; text-decoration: none; transform: translateY(-100%); transition: transform var(--transition-fast); } .skip-link:focus { transform: translateY(0); } /* Screen Reader Only - Visuell versteckt, für SR sichtbar */ .sr-only, .visually-hidden { position: absolute !important; inline-size: 1px !important; block-size: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* SR Only Focusable - Wird bei Focus sichtbar */ .sr-only-focusable:focus, .sr-only-focusable:focus-within { position: static !important; inline-size: auto !important; block-size: auto !important; padding: inherit !important; margin: inherit !important; overflow: visible !important; clip: auto !important; white-space: normal !important; } /* Touch Target - Mindestgröße 44x44px (WCAG 2.5.8) */ .touch-target { position: relative; min-inline-size: var(--touch-target-min); min-block-size: var(--touch-target-min); } .touch-target::before { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: max(100%, var(--touch-target-min)); block-size: max(100%, var(--touch-target-min)); transform: translate(-50%, -50%); } /* Focus Visible - Sichtbarer Focus-Ring */ :focus { outline: none; } :focus-visible { outline: var(--focus-outline-width) solid var(--focus-outline-color); outline-offset: var(--focus-outline-offset); } /* Focus innerhalb Container */ :focus-within { outline: none; } /* Buttons und Links: Focus-Style */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: var(--focus-outline-width) solid var(--focus-outline-color); outline-offset: var(--focus-outline-offset); } /* Motion Utilities */ @media (prefers-reduced-motion: reduce) { .motion-safe { display: none !important; } } @media (prefers-reduced-motion: no-preference) { .motion-reduce { display: none !important; } } /* High Contrast Mode (Windows) */ @media (forced-colors: active) { :where(a, button) { border: 2px solid currentColor; } :focus-visible { outline: 3px solid CanvasText; outline-offset: 2px; } .vnc__btn svg, .icon__glyph { forced-color-adjust: auto; } } /* Erhöhter Kontrast */ @media (prefers-contrast: more) { :root { --color-primary-100: #0066aa; --color-primary-200: #0099dd; --focus-outline-width: 4px; } } /* Reduzierte Transparenz */ @media (prefers-reduced-transparency: reduce) { :root { --color-neutral-600: #1a1a1a; } :where(.vnc__box-over-image, .vnc__video, .vnc__success) { opacity: 1; } } /* ========================================================================== Base & Typography ========================================================================== */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { margin-block: 0 var(--space-md); color: var(--color-primary-100); font-family: var(--font-secondary); font-weight: var(--fw-medium); font-style: normal; text-transform: uppercase; text-wrap: balance; } h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); } h2, .h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight:450; } h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-size: var(--fs-h3); line-height: var(--lh-h3); } /* Headings: strong/b */ :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) :is(strong, b) { font-family: var(--font-secondary); font-weight: var(--fw-bold); font-style: normal; } /* Headings: Links */ :is(h1, h2, h3, h4, h5, h6) a { display: inline-block; font: inherit; text-transform: inherit; color: inherit; text-decoration: none; transition: color var(--transition-base); } :is(h1, h2, h3, h4, h5, h6) a:hover { color: var(--color-primary-200); } /* Paragraphs */ p { font-family: var(--font-primary); font-size: var(--fs-p); font-weight: var(--fw-medium); line-height: var(--lh-p); color: var(--color-text-primary); } b, strong { font-family: inherit; font-weight: 700; font-style: normal; } /* Large Paragraph */ .p-lg, p.large { font-size: var(--fs-p-lg); line-height: var(--lh-p-lg); } /* Small Paragraph */ .p-sm, p.small { font-size: var(--fs-p-sm); line-height: var(--lh-p-sm); } :where(ol, ul) { margin-block: var(--space-lg); } :where(ol, ul) li { line-height: var(--lh-p); margin-top: 10px; margin-bottom: 10px; } :where(.p, blockquote, p) { margin-block: 0 var(--space-md); } :where(.p, blockquote, p):last-of-type { margin-block-end: 0; } blockquote { font-family: var(--font-primary); font-size: clamp(2rem, 1.8rem + 0.5vw, 2.5rem); font-style: normal; font-weight: 400; line-height: clamp(2.625rem, 2.4rem + 0.6vw, 3.25rem); } a { color: var(--color-text-primary); transition: color var(--transition-base); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--color-primary-200); } a:where(:focus-visible, :active) { color: var(--color-primary-100); } /* Links im Content besser erkennbar (WCAG 1.4.1) */ :where(p, li) a { text-decoration: underline; text-decoration-color: var(--color-primary-200); } h3, h4 { color: var(--color-text-primary); } .text-white{ h1,h2,h3,h4,h5,p,a{ color: var(--color-white) !important; } } /* ========================================================================== Utility Classes ========================================================================== */ .text-center, .text-center > * { text-align: center; } .text-white > * { color: var(--color-white) !important; } .items--center { align-items: center; } /* Margin Utilities */ :where(.u-mb-0, .mb-0) { margin-block-end: 0 !important; } .mt-0 { margin-block-start: 0; } /* Padding Utilities */ .pt-0 { padding-block-start: 0; } .pt-32 { padding-block-start: var(--space-xl); } .pt-64 { padding-block-start: var(--space-2xl); } .pt-160 { padding-block-start: var(--space-3xl); } .pb-0 { padding-block-end: 0; } .pb-32 { padding-block-end: var(--space-xl); } .pb-64 { padding-block-end: var(--space-2xl); } .pb-160 { padding-block-end: var(--space-3xl); } /* margin Utilities */ .mt-0 { margin-block-start: 0; } .mt-32 { margin-block-start: var(--space-xl); } .mt-64 { margin-block-start: var(--space-2xl); } .mt-160 { margin-block-start: var(--space-3xl); } .mb-0 { margin-block-end: 0; } .mb-32 { margin-block-end: var(--space-xl); } .mb-64 { margin-block-end: var(--space-2xl); } .mb-160 { margin-block-end: var(--space-3xl); } .remove-space { margin-block-end: 0 !important; padding-block-end: 0 !important; } .bg-gradient { background: var(--accent-gradient); } .bg-gradient .vnc__btn::after { background-image: url("data:image/svg+xml,%3Csvg width='15' height='12' viewBox='0 0 15 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 5.0293V6.96973L9.81738 12H7.07031L12.2715 6.95215H0V5.04785H12.2715L7.07031 0H9.81738L15 5.0293Z' fill='%23fff'/%3E%3C/svg%3E%0A"); width: 15px; height: 12px; } .bg-gradient .vnc__btn:hover::after { background-image: url("data:image/svg+xml,%3Csvg width='32' height='12' viewBox='0 0 32 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M32 5.0293V6.96973L26.8174 12H24.0703L29.2715 6.95215H0V5.04785H29.2715L24.0703 0H26.8174L32 5.0293Z' fill='%23fff'/%3E%3C/svg%3E%0A"); width: 32px; height: 12px; } .bg-grey{ background-color: var(--color-background);} .vnc__inner { width: 100%; max-width: calc(var(--container-max-width) + 128px); padding-left: 64px; padding-right: 64px; margin: 0 auto; } @media (max-width: 1280px) { .vnc__inner { max-width: calc(var(--container-max-width) + 64px); padding-left: 32px; padding-right: 32px; } } @media (max-width: 768px) { .vnc__inner { max-width: calc(var(--container-max-width) + 48px); padding-left: 24px; padding-right: 24px; } } .vnc__inner.w-full { max-width: 100%; } @media (min-width: 1280px) { .pos-desk-top{ object-position: top !important; } .pos-desk-bottom{ object-position: bottom !important; } .pos-desk-left{ object-position: left !important; } .pos-desk-right{ object-position: right !important; } .pos-desk-center{ object-position: center !important; } } @media (min-width: 768px) and (max-width: 1279px) { .pos-tablet-top{ object-position: top !important; } .pos-tablet-bottom{ object-position: bottom !important; } .pos-tablet-left{ object-position: left !important; } .pos-tablet-right{ object-position: right !important; } .pos-tablet-center{ object-position: center !important; } } @media (max-width: 767px) { .pos-mobile-top{ object-position: top !important; } .pos-mobile-bottom{ object-position: bottom !important; } .pos-mobile-left{ object-position: left !important; } .pos-mobile-right{ object-position: right !important; } .pos-mobile-center{ object-position: center !important; } } .ratio-1{ aspect-ratio: 1 / 2 !important; object-fit: cover !important; } .ratio-2{ aspect-ratio: 3 / 4 !important; object-fit: cover !important; } .ratio-3{ aspect-ratio: 16 / 9 !important; object-fit: cover !important; } .ratio-4{ aspect-ratio: 3 / 2 !important; object-fit: cover !important; } .ratio-5{ aspect-ratio: 5 / 3 !important; object-fit: cover !important; } .ratio-6{ aspect-ratio: 1 / 1 !important; object-fit: cover !important; } /* ========================================================================== Body ========================================================================== */ body.vnc_page { margin: 0; background-color: #ffff; color: var(--color-text-primary); font-family: var(--font-primary); font-weight: 400; font-style: var(--text-font-style); font-size: 1.25rem; line-height: 1.625rem; text-size-adjust: none; tap-highlight-color: transparent; text-rendering: optimizeLegibility; font-smoothing: antialiased; overflow-wrap: anywhere; hyphens: none; } /* ========================================================================== Header ========================================================================== */ .header__section--main .header__center { position: static !important; } :where(.header--wo-search .header__lang, .header__search) { border: none !important; } @media (max-width: 1280px) { header.header { position: static !important; inline-size: 100% !important; } } .header-link-icon { display: flex; } .header-link-icon:hover .vnc_header-icon path { fill: var(--color-primary-200); } /* ========================================================================== Header & Navigation ========================================================================== */ .vnc__header .container { max-width: 100%; width: 100%; } .vnc__header .container .row { display: flex; justify-content: space-between; align-items: flex-start; } .vnc__header .header__section--main { box-shadow: 0 -9px 10px 0 rgba(0, 0, 0, 0.15) !important; } .vnc__header.header--sticky-active .header__section--main { box-shadow: 0 -9px 10px 0 rgba(0, 0, 0, 0.15) !important; } .vnc__header .header__section--main .header__center { padding-top: 0.5rem; padding-bottom: 0.5rem; padding-right: 3rem; } .vnc__header .header__center { display: flex; flex-direction: row; justify-content: space-between; } .vnc__header .header__nav { display: flex; align-items: flex-end; } @media (max-width: 1139px) { .vnc__header .header__nav { display: none !important; } } .vnc__header .header__icons { display: flex; align-items: center; } .vnc__header .header__icons .header__icons-inner { display: flex; align-items: center; gap: var(--space-md); } .vnc__header .header__icons .header__icons-inner .header__meta-nav .header-meta { display: flex; flex-direction: row; gap: var(--space-md); } .vnc__header .nav__list--level1 > li:not(:last-child) { margin-right: 0 !important; } .vnc__header .nav__list--level1 > li > a::before { display: none !important; } .vnc__header .nav__list--level1 > li > a::after { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 16px; background-image: var(--nav-hover-icon); background-size: contain; background-repeat: no-repeat; opacity: 0; transition: opacity var(--transition-fast); } .vnc__header .nav__list--level1 > li:hover > a::after, .vnc__header .nav__list--level1 > li.menu-active > a::after { opacity: 1; } .vnc__header .nav__list:has(.nav__item:hover) .nav__item:not(:hover) a { color: var(--color-disabled) !important; } .vnc__header .nav__list { display: flex; gap: 48px; } .vnc__header .nav__list .nav__link { display: flex; padding: 16px 12px !important; justify-content: center; align-items: center; gap: 10px; } .vnc__header .nav__list .nav__link .nav__link-text { font-size: 20px; line-height: 24px; font-weight: 500; text-transform: uppercase; font-family: var(--font-secondary); position: relative; z-index: 10; } .vnc__header .nav__mega { overflow: hidden !important; inset-block-start: auto !important; padding: 64px 200px; } @media (max-width: 1680px) { .vnc__header .nav__mega { padding: 32px; } } .vnc__header .nav__mega > container > row { display: flex; } .vnc__header .nav__mega-item-regular-link { position: relative; padding-right: 38px; background: transparent !important; } .vnc__header .nav__mega-item-regular-link .important-text { display: flex; gap: 12px; align-items: center; justify-content: flex-start; } .vnc__header .nav__mega-item--regular .important-text::after { content: ""; width: 40px; height: 32px; display: block; background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.001 15.4297V17.3701L9.81836 22.4004H7.07129L12.2725 17.3525H0.000976562V15.4482H12.2725L7.07129 10.4004H9.81836L15.001 15.4297Z' fill='white'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-position: 0 -3px; } .nav__mega-active-link:after { content: ""; background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.51193 1.5115L11.0566 -0.000227698L15.4439 8.61018L8.6106 15.4434L0.000200043 11.0562L1.51193 1.5115Z' fill='%2300C0FF'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-size: 16px 16px; height: 16px; left: -3px; opacity: 1; position: absolute; top: -7px; transition: opacity var(--transition-fast); width: 16px; } .nav__mega-active-link:hover:after { opacity: 0; } .vnc__header .nav__mega-item-regular-link:hover { background: transparent !important; cursor: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.51193 1.5115L11.0566 -0.000227698L15.4439 8.61018L8.6106 15.4434L0.000200043 11.0562L1.51193 1.5115Z' fill='%2300C0FF'/%3E%3C/svg%3E%0A") 16 16, pointer; } .vnc__header .nav__mega-item-regular-link:hover .important-text::after { background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg width='26' height='12' viewBox='0 0 26 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M26 5.0293V6.96973L20.8174 12H18.0703L23.2715 6.95215H0V5.04785H23.2715L18.0703 0H20.8174L26 5.0293Z' fill='white'/%3E%3C/svg%3E%0A"); background-position: 0 7px; } .vnc__header .nav__mega-item-regular-link.nav__mega-active-link .important-text::after{ background-image: url("data:image/svg+xml,%3Csvg width='38' height='12' viewBox='0 0 38 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M38 5.0293V6.96973L32.8174 12H30.0703L35.2715 6.95215H0V5.04785H35.2715L30.0703 0H32.8174L38 5.0293Z' fill='white'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-position: 0 7px; } .vnc__header .nav__mega-item--regular { margin-bottom: 32px; max-width: 448px; } .vnc__header .nav__mega-item--regular .nav__mega-item-regular-contents { padding: 0; margin: 0; } .vnc__header .nav__mega-aside { display: flex; justify-content: center; align-items: center; } .vnc__header .nav__mega-aside img { width: 330px; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: center; } .vnc__header .nav__mega-item-regular-contents .nav__mega-item-regular-title { color: var(--color-text-white); font-size: 20px; font-weight: 500; line-height: 24px; text-transform: uppercase; font-family: var(--font-secondary); margin-bottom: 8px; } .vnc__header .nav__mega-item-regular-contents .nav__mega-item-regular-subtitle { color: var(--color-text-white); font-size: 16px; line-height: 20px; font-weight: 400; font-family: var(--font-primary); } .vnc__header .nav__mega-item--rtext { display: flex; flex-direction: column; gap: 16px; max-width: 330px; } .vnc__header .nav__mega-item--rtext > div { color: var(--color-text-white); font-size: 32px; font-weight: 500; line-height: 32px; text-transform: uppercase; font-family: var(--font-secondary); margin: 0; padding: 0; border-bottom: 4px solid var(--color-white); } .vnc__header .nav__mega-item--rtext p { color: var(--color-text-white); font-size: 16px; line-height: 20px; font-weight: 400; font-family: var(--font-primary); margin: 0; padding: 0; } .vnc__header .nav__mega-item--rtext p strong { font-size: 20px; font-weight: 500; line-height: 24px; text-transform: uppercase; font-family: var(--font-secondary); } .vnc__header .nav__mega-header > div { position: absolute; bottom: -88px; inline-size: 100%; font-size: 13.2vw; line-height: 1; opacity: 0.1; z-index: -1; color: var(--color-primary-100); text-transform: uppercase; background: transparent; pointer-events: none; user-select: none; font-family: var(--font-secondary); } :where(.mnav__open, .site-search__open, .header__buttons .vnc__btn) { display: flex; flex-direction: column; align-items: center; margin: 0; padding: 0; min-inline-size: var(--touch-target-min); min-block-size: var(--touch-target-min); color: var(--color-black); font-family: var(--font-secondary); font-size: 1rem; font-weight: 500; line-height: 1.375; text-transform: uppercase; transition: color var(--transition-base); } :where(.mnav__open, .site-search__open, .header__buttons .vnc__btn):hover { color: var(--color-primary-100) !important; } a.site-search__open.ui-icon svg { inline-size: auto; block-size: auto; } a.mnav__open.ui-icon svg { inline-size: 2rem; block-size: auto; } a.mnav__open.ui-icon svg path { fill: var(--color-primary-100); } /* ========================================================================== Header search & language selector fix ========================================================================== */ .vnc_page .header__search, .vnc_page .header--wo-search .header__lang { padding-inline-start: 0; border-inline-start: 0; } .vnc_page .header__search, .vnc_page .header__lang { margin-inline-start: 0; } /* ========================================================================== Mobile Nav Component ========================================================================== */ .vnc_page .mnav__popup { padding-top: 80px; max-width: 360px; width: 100%; } .vnc_page .mnav__popup .mnav__logo { position: absolute; top: 13px; left: 13px; display: none; } .vnc_page .mnav__popup .mnav__links { display: none; } .vnc_page .mnav__popup .mnav__menu__toggle { width: 32px; } .vnc_page .mnav__popup .mnav__menu__toggle svg { width: 32px !important; height: 32px !important; } .vnc_page .mnav__popup .mnav__menu__list.mnav__menu__list--level1 .mnav__menu__item { margin: 0; border: none; } .vnc_page .mnav__popup .mnav__menu__list.mnav__menu__list--level1 .mnav__menu__item--expanded { background: transparent !important; } .vnc_page .mnav__popup .mnav__menu__list.mnav__menu__list--level1 .mnav__menu__label { padding: 0 1.5rem; } .vnc_page .mnav__popup .mnav__menu__list.mnav__menu__list--level1 .mnav__menu__link { font-size: 1.25rem; line-height: 1.5rem; font-weight: 500; text-transform: uppercase; font-family: var(--font-secondary); padding: 1.25rem 0; } .vnc_page .mnav__popup .mnav__menu__list.mnav__menu__list--level1 > .mnav__menu__item--active-branch > .mnav__menu__label > .mnav__menu__link::before, .vnc_page .mnav__popup .mnav__menu__list.mnav__menu__list--level1 > .mnav__menu__item--expanded > .mnav__menu__label > .mnav__menu__link::before { display: none; } .vnc_page .mnav__popup .mnav__menu__list.mnav__menu__list--level1 > .mnav__menu__item--active-branch > .mnav__menu__label > .mnav__menu__link::after, .vnc_page .mnav__popup .mnav__menu__list.mnav__menu__list--level1 > .mnav__menu__item--expanded > .mnav__menu__label > .mnav__menu__link::after { content: ""; width: 16px; height: 16px; background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.51193 1.5115L11.0566 -0.000227698L15.4439 8.61018L8.6106 15.4434L0.000200043 11.0562L1.51193 1.5115Z' fill='%230088D8'/%3E%3C/svg%3E%0A"); background-size: contain; background-repeat: no-repeat; position: absolute; left: -8px; top: 17px; z-index: -1; } .vnc_page .mnav__popup .mnav__menu__list--child { background: var(--accent-gradient); } .vnc_page .mnav__popup .mnav__menu__list--child .mnav__menu__link { color: var(--color-white); font-size: 1.125rem; line-height: 26px; font-weight: 400; font-family: var(--font-primary); } .vnc_page .mnav__popup .mnav__menu__list--child .mnav__menu__link:hover { color: var(--color-white); cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M1.51193 1.5115L11.0566 -0.000227698L15.4439 8.61018L8.6106 15.4434L0.000200043 11.0562L1.51193 1.5115Z' fill='%2300C0FF'/%3E%3C/svg%3E") 16 16, pointer; font-weight: 700; } .vnc_page .mnav__popup .mnav__menu__list--child .mnav__menu__item--active .mnav__menu__link { color: var(--color-white); font-weight: 700; } .mnav--light .mnav__overlay { background: #000; } /* ========================================================================== Button Component ========================================================================== */ .vnc__btn { display: inline-flex; align-items: center; justify-content: flex-start; padding-inline-end: var(--space-md); min-block-size: var(--touch-target-min); background: transparent; border: none; color: var(--color-text-primary); font-family: var(--font-secondary); font-size: 1.5rem; font-weight: 500; line-height: 1.75rem; text-transform: uppercase; text-decoration: none !important; cursor: pointer; transition: transform var(--transition-base); gap: 0.5rem; } .vnc__btn svg { display: none; } .vnc__btn::after { content: ""; background-image: url("data:image/svg+xml,%3Csvg width='15' height='12' viewBox='0 0 15 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 5.0293V6.96973L9.81738 12H7.07031L12.2715 6.95215H0V5.04785H12.2715L7.07031 0H9.81738L15 5.0293Z' fill='%230088D8'/%3E%3C/svg%3E%0A"); background-size: contain; width: 15px; height: 12px; display: inline-block; transition: transform var(--transition-base); position: relative; z-index: 10; top: -2px; } .vnc__btn:where(:hover, :focus-visible, :active,.featshow__btn--active)::after { background-image: url("data:image/svg+xml,%3Csvg width='32' height='12' viewBox='0 0 32 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M32 5.0293V6.96973L26.8174 12H24.0703L29.2715 6.95215H0V5.04785H29.2715L24.0703 0H26.8174L32 5.0293Z' fill='%230088D8'/%3E%3C/svg%3E%0A"); width: 32px; height: 12px; background-size: contain; text-decoration: none !important; } .vnc__btn:hover { color: var(--color-text-primary); } .vnc__btn:where(:focus, :focus-visible) svg { color: var(--global-color-primary-primary-200, #00c0ff); } .vnc__btn:disabled { cursor: not-allowed; color: #787880; } /* ========================================================================== Richtext & Content ========================================================================== */ .vnc__richtext { margin-block-end: var(--space-lg); } .vnc__richtext :where(div, .hs_cos_wrapper) { display: flex; flex-direction: column; gap: var(--space-md); } .vnc__richtext :where(div, .hs_cos_wrapper) > * { margin: 0; padding: 0; } /* ========================================================================== Text Container ========================================================================== */ .vnc__text-container { display: flex; flex-direction: column; gap: var(--space-md); max-inline-size: var(--content-max-width); inline-size: 100%; margin-inline: auto; margin-block-end: var(--space-lg); padding-block-start: 0; font-family: var(--font-primary); text-align: start; } @media (max-width: 1680px) { .vnc__text-container { padding-inline: var(--space-2xl); } } @media (max-width: 1280px) { .vnc__text-container { padding-inline: var(--space-xl); } } @media (max-width: 1024px) { .vnc__text-container { padding-inline: var(--space-lg); } } @media (max-width: 768px) { .vnc__text-container { padding-inline: var(--space-md); } } /* ========================================================================== Card Intro ========================================================================== */ .vnc__card-intro { display: flex; flex-direction: column; gap: var(--space-md); max-inline-size: var(--content-max-width); inline-size: 100%; margin-inline: auto; margin-block-end: var(--space-lg); font-family: var(--font-primary); text-align: start; } .vnc__card-intro > * { margin: 0; } .text-center .vnc__card-intro { text-align: center; } .text-center .vnc__card-intro .vnc__btn { display: inline-block; } .vnc__card-intro-text { margin-bottom:0; } @media (max-width: 1680px) { :is(.vnc__card-intro, .module--feature-card) { padding-inline: var(--space-2xl); } } @media (max-width: 1280px) { :is(.vnc__card-intro, .module--feature-card) { padding-inline: var(--space-xl); } } @media (max-width: 1024px) { :is(.vnc__card-intro, .module--feature-card) { padding-inline: var(--space-lg); } } /* ========================================================================== Arrow Link ========================================================================== */ .vnc__arrow-link a { display: inline-flex; align-items: center; gap: var(--space-xs); margin-block: var(--space-md); padding: 0; min-block-size: var(--touch-target-min); color: var(--color-text-primary); font-size: 1.125rem; font-weight: 700; line-height: 1.33; text-decoration: underline; text-underline-offset: 3px; } .vnc__arrow-link a:where(:hover, :focus-visible, :active) { text-decoration-thickness: 2px; } .vnc__arrow-link a:hover { color: var(--color-primary-200); } .vnc__arrow-link a:where(:focus-visible, :active) { color: var(--color-primary-100); } /* ========================================================================== Box Over Image ========================================================================== */ .vnc__box-over-image { position: relative; max-width: 1920px; display:flex; padding-bottom: calc(var(--svg-width) * var(--svg-height-ratio) * 0.17); @media (max-width: 64rem) { padding-bottom:32px; flex-direction:column; } } .vnc__box-over-image .vnc__box-over-image-svg { position: absolute; inset-block-start: 0; inset-inline-end: 0; width: var(--svg-width); height:100%; z-index: 1; pointer-events: none; @media (max-width: 64rem) { display:none; } path { fill: var(--color-background); } } .vnc__box-over-image .box-over-image_image{ flex: 0 0 clamp(600px, 65.9vw, 1266px); max-width: 1266px; @media (max-width: 64rem) { width:100%; max-width:100%; flex: 0 0 100%; } } .vnc__box-over-image .box-over-image { display: flex; gap: var(--space-lg); align-items: center; @media (max-width: 64rem) { flex-direction: column; gap:0; } } .vnc__box-over-image .box-over-image img { inline-size: 100%; object-fit: cover; } .vnc__box-over-image .box-over-image__box { position: static; inset-block-start: 0; transform: translateY(0) !important; max-inline-size: 100%; inline-size: 100%; margin-block-start: 0; padding: 0 !important; padding-inline-end: var(--space-xl); background: transparent; z-index:10; max-width:900px; height:100%; top:0; right:0; @media (max-width: 64rem) { position:static; background:var(--color-background); padding-inline-end:0; padding:3rem var(--space-lg) !important; max-width:100%; width:100%; inline-size: 100; margin:0; } } .vnc__box-over-image .box-over-image__box-text { display: flex; flex-direction: column; gap: var(--space-md); max-width:518px; height:100%; position: relative; z-index:10; top: 0; left: calc(var(--svg-width) * -0.25); max-width: calc(var(--svg-width) * 0.7125); @media (max-width: 64rem) { width:100%; max-width:100%; top:0; left:0; position:static } } .vnc__box-over-image .box-over-image__box-text > * { margin: 0 !important; } .vnc__box-over-image .box-over-image__box-text h4 { color: var(--color-text-primary) !important; } /* ========================================================================== Image Teaser ========================================================================== */ .vnc__image-teaser { position: relative; display: flex; flex-direction: column; gap: var(--space-lg); background: var(--bg-image-teaser) no-repeat center / contain; max-width:1920px; margin-inline: auto; } .vnc__image-teaser img { max-inline-size: 1440px; inline-size: 100%; flex-shrink: 0; height:810px; object-fit: cover; } .vnc__image-teaser video { max-inline-size: 1440px; inline-size: 100%; flex-shrink: 0; height:810px; object-fit: cover; } .vnc__image-teaser .image-box{ max-width:1440px; } .vnc__image-teaser-image { display: flex; justify-content: flex-end; padding-inline-end: 0; padding-inline-start: 16.5rem; overflow: hidden; } .vnc__image-teaser-image.has-slider { display: flex; } .vnc__image-teaser-image.has-slider .splide { width: 100%; flex: 0 0 100%; max-width: 1592px; } .vnc__imagebox.vnc__image-teaser .image-box{ max-width:1440px; } @media (max-width: 1280px) { .vnc__image-teaser-image { padding-inline: 0; } } @media (max-width: 768px) { .vnc__image-teaser-image { padding-inline: 0; } } .vnc__imagebox.vnc__image-teaser{ .teaser-box-image{ max-inline-size:100%; inline-size:100%; } .row{ width:100%; max-inline-size: 1592px; } @media (max-width: 768px) { .row{ margin:0; } .col{ padding:0; } } .image-box__caption.image-box__caption--dark > *{ color: #000 !important; } .image-box__caption--dark .image-box__title{ color: #000 !important; } .image-box__caption--dark .image-box__desc{ color: #000 !important; } } /* ========================================================================== Video Component ========================================================================== */ .vnc__video { position: relative; max-inline-size: var(--container-max-width); padding-block-start: 200px; padding-block-end: 264px; } .vnc__video .vnc__box-over-video-svg { position: absolute; inset-block-start: 0; inset-inline-end: -8%; inline-size: 851px; block-size: 870px; z-index: -1; pointer-events: none; path { fill: var(--color-background); } } .vnc__video .video__container { display: flex; gap: var(--space-lg); } @media (max-width: 1024px) { .vnc__video { max-inline-size: 100%; position: relative; z-index: 49; padding: 0; margin: 0 0 var(--space-lg); } .vnc__video .vnc__box-over-video-svg { display: none; } .vnc__video .video__container { flex-direction: column; flex: 0 0 100%; max-inline-size: 100%; gap: 0; } } .video__item { flex: 0 0 60%; max-inline-size: var(--content-max-width); inline-size: 100%; } @media (max-width: 1024px) { .video__item { flex: 0 0 100%; max-inline-size: 100%; } } @media (max-width: 1024px) { .video__content { position: relative; z-index: 50; max-inline-size: 100%; margin-block-start:0; margin-inline: 0; padding: 3rem var(--space-lg) !important; background: var(--color-background); } } /* ========================================================================== Slider ========================================================================== */ .vnc_page{ .splide__slide { display: flex; flex-direction: column; } .splide__track { margin-block-end: var(--space-md); } .splide__pagination { display: flex !important; justify-content: center; gap: 0.5rem; } .splide__pagination li{ margin: 0; display: inline-flex; justify-content: flex-end; height: 8px; align-items: flex-end; } .splide__pagination__page { width:28px !important; height:4px !important; background:#C0C0C0; margin:0 !important; border-radius:0 !important; transition: all var(--transition-base); position:relative; &:before{ content:""; width:24px; height:24px; position:absolute; top:-24px; left:0; background:transparent !important; border-radius:0 !important; } } .splide__pagination__page.is-active { background:#0088D8; width:28px !important; height:8px !important; } .splide--white-dots .splide__pagination__page:is(.is-active, :hover) { background:#0088D8 !important; } .splide__pagination__page:hover { background:#0088D8 !important; } } /* ========================================================================== Footer ========================================================================== */ .vnc_page .vnc__footer { background: var(--accent-gradient); .icon svg { fill: var(--color-white); } .txt--dark{ color: var(--color-white); } } .vnc_page .vnc__footer .section { padding-block: 3rem; } .vnc_page .vnc__footer .footer__icons { margin-block-end: var(--space-md); } .vnc_page .vnc__footer .footer__icons .module--footer_icons { margin: 0; } .vnc_page .vnc__footer .vnc__footer-nav { margin-block-end: var(--space-xl); } .vnc_page .vnc__footer .footer-links { gap: var(--space-lg); color: var(--color-white); font-family: var(--font-primary); font-size: 1rem; font-weight: 400; line-height: 1.25; } .vnc_page .vnc__footer .footer-links li { padding: 0; margin: 0; } .vnc_page .vnc__footer .footer-links a { padding: 0; min-block-size: var(--touch-target-min); display: inline-flex; align-items: center; } .vnc_page .vnc__footer .icon--large .icon__glyph { inline-size: 4rem; block-size: 4rem; font-size: 4rem; line-height: 1; } .vnc_page .vnc__footer .module--footer_icons { color: var(--color-white); font-family: var(--font-primary); font-size: 0.875rem; font-weight: 400; line-height: 1.29; } /* ========================================================================== Icons ========================================================================== */ .icon--large .icon__glyph { width: 4rem; height: 4rem; line-height: 4rem; font-size: 4rem; } /* ========================================================================== Text Polygon ========================================================================== */ .vnc__text-polygon { display: flex; flex-direction: column; justify-content: center; align-items: center; min-block-size: 640px; max-inline-size: 100%; padding: 0; text-align: start; background-image: var(--bg-text-polygon); background-repeat: no-repeat; background-position: center; background-size: contain; } .vnc__text-polygon .vnc__text-polygon-inner { max-inline-size: 448px; margin-inline: 0; } @media (max-width: 1024px) { .vnc__text-polygon { min-block-size: 1px; margin-block-end: var(--space-xl); } } @media (max-width: 768px) { .vnc__text-polygon .vnc__text-polygon-inner { max-inline-size: 100%; } } /* ========================================================================== Quote ========================================================================== */ .quote { background-image: var(--bg-quote-polygon); background-repeat: no-repeat; background-position: center; background-size: contain; min-block-size: 600px; } .vnc__quote .compact-card--white { background: transparent !important; } .vnc__quote .compact-card__title { color: var(--color-primary-100); } .vnc__quote .quote__quote { margin-block-end: var(--space-md); } .vnc__quote .quote__quote blockquote { margin: 0; font-size: 2.5rem; } .vnc__quote .quote__quote blockquote strong { display: block; margin-block-end: var(--space-md); font-weight: 700; } .vnc__quote .compact-card__desc { font-size: 0.875rem; line-height: 1.125rem; } .vnc__quote .compact-card { margin: 0 !important; padding: 0 !important; border-radius: 0; } .vnc__quote .compact-card__img img { inline-size: 64px; block-size: 64px; object-fit: contain; clip-path: polygon(50% 100%, 100% 60%, 80% 0, 20% 0, 0 60%); border-radius: 0; } .compact-card--white.compact-card--shadow { box-shadow: none !important; } .vnc__quote .splide .compact-card--shadow { margin: 0 !important; padding: 0 !important; } /* ========================================================================== Contact ========================================================================== */ .vnc__contact { padding-inline: var(--space-lg); max-inline-size: 978px; margin-inline: auto; } .vnc__contact .vnc__contact-intro { max-inline-size: 100%; } .vnc__contact .vnc__contact-main { display: flex; gap: var(--space-lg); } .vnc__contact .vnc__contact-image { max-inline-size: 528px; padding-block: 60px; padding-inline: 40px; } @media (max-width: 991px) { .vnc__contact .vnc__contact-image { padding-inline: 0; } } .vnc__contact .vnc__contact-image img { mask-image: var(--mask-contact-polygon); -webkit-mask-image: var(--mask-contact-polygon); mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-position: center; -webkit-mask-position: center; mask-size: contain; -webkit-mask-size: contain; width:100%; max-width:448px; height:448px; object-fit: cover; } .vnc__contact .vnc__contact-text { display: flex; flex-direction: column; justify-content: center; gap: var(--space-lg); } .vnc__contact .vnc__contact-button-username { font-size:1.125rem; font-weight:500; line-height:1.5rem; text-transform:uppercase; color: var(--color-text-primary); margin-bottom: var(--space-xs); font-family: var(--font-secondary); } .vnc__contact .vnc__contact-button-userposition{ display:flex; gap: 0.25rem; flex-direction: column; font-size:1.125rem; line-height:1.625rem; font-family: var(--font-primary); font-weight:400; } .vnc__contact .vnc__contact-button-intern { display: flex; flex-direction: column; gap: var(--space-md); } .vnc__contact .vnc__contact-button-intern a { display: inline-flex; align-items: center; gap: var(--space-xs); padding:0; color: var(--color-text-primary); font-family: var(--font-primary); font-size: 1.125rem; font-weight: 600; line-height: 1.5rem; text-decoration: none !important; white-space: nowrap; } .vnc__contact .vnc__contact-button-intern a:hover { color: var(--color-primary-100); } .vnc__contact .vnc__contact-button-intern a svg { inline-size: 32px; block-size: 32px; flex: 0 0 32px; } .vnc__contact .vnc__contact-button .vnc__btn{ white-space: nowrap; } @media (max-width: 991px) { .vnc__contact .vnc__contact-main { flex-direction: column; } } /* ========================================================================== Logo ========================================================================== */ .vnc__logo { position: relative; background: var(--accent-gradient); } .vnc__logo .logos { padding-block: 32px; padding-inline: 24px; } .vnc__logo .vnc__mask { position: absolute; inset-block-start: var(--logo-poly-top); inset-inline-start: var(--logo-poly-left); inline-size: var(--logo-poly-width); block-size: var(--logo-poly-height); transform: translateY(-50%); display:none; svg { path { fill: var(--color-background); } } } .vnc__logo .vnc__mask svg { inline-size: 100%; block-size: 100%; } .vnc__logo .vnc__mask2 { position: absolute; inset-block-start: var(--logo-poly-top); inset-inline-start: var(--logo-poly-left); inline-size: var(--logo-poly-width); block-size: var(--logo-poly-height); transform: translateY(-50%); background: var(--logo-gradient); width:100%; height:100%; mask: var(--mask-logo-polygon) no-repeat center / contain; -webkit-mask: var(--mask-logo-polygon) no-repeat center / contain; } .vnc__logo .vnc__box-container { inline-size: 100%; block-size: 100%; position: absolute; overflow: hidden; display:none; } .vnc__logo .vnc__box-container .vnc__box1 { inline-size: 100%; block-size: 100%; background: var(--color-background); position: absolute; display:none; } .vnc__logo .splide--dots-below .splide__pagination { position: absolute; inset-block-end: -30px; } /* Logo Grid */ .logos__logo { display: flex; justify-content: center; align-items: center; } .logos__logo__img { inline-size: 100%; } .splide .logos__logo { inline-size: 100%; } :not(.splide) .logos__logo { padding-block: 0; } /* ========================================================================== Stage ========================================================================== */ .vnc__stage { position: relative; padding-block-end: 9%; z-index: 1; margin-bottom:128px; } .vnc__stage .vnc__stage-image img { max-inline-size: 100%; inline-size: 100%; block-size: auto; max-block-size: 980px; object-fit: contain; object-position: right; } .vnc__stage .vnc__stage-box { position: absolute; inset-block-start: 0; inset-inline-start: 0; z-index: 2; inline-size: 65%; block-size: 100%; padding-block-start: 209px; } .vnc__stage .vnc__stage-box h2{ font-size: 2rem; line-height: 2.5rem; color: #000000; } .vnc__stage .vnc__stage-svg { position: absolute; inset-block-start: 0; inset-inline-start: calc(-1 * var(--space-lg)); path { fill: var(--color-background); } } .vnc__stage .vnc__stage-content { position: relative; z-index: 3; inline-size: calc(100% - var(--space-2xl)); max-inline-size: 871px; padding-inline-start: var(--space-2xl); background: transparent; } .vnc__stage .vnc__stage-content p { margin: 0; color: var(--color-text-primary); font-family: var(--font-primary); font-size: 1.25rem; font-weight: 400; line-height: 1.625rem; } .vnc__stage .vnc__stage-content > * { margin: 0; } .vnc__stage .vnc__stage-content .module__inner { inline-size: 100%; } .vnc__stage .section-intro__desc-inner { display: flex; flex-direction: column; gap: var(--space-lg); } .vnc__stage .vnc__stage-btn > div { display: none; } @media (max-width: 1280px) { .vnc__stage .vnc__stage-content { max-inline-size: 100%; padding-inline-start: var(--space-xl); inline-size: calc(100% - var(--space-xl)); } .vnc__stage .vnc__stage-box { padding-block-start: 170px; } } @media (max-width: 1139px) { .vnc__stage .vnc__stage-box { padding-block-start: 150px; } } @media (max-width: 1024px) { .vnc__stage { padding-block-end: 0; block-size: auto; margin-block-end: var(--space-lg); } .vnc__stage .vnc__stage-box { position: relative; inline-size: 100%; margin: 0; padding: 3rem var(--space-lg); block-size: auto; background: var(--color-background); } .vnc__stage .vnc__stage-svg { display: none; } .vnc__stage .vnc__stage-content { max-inline-size: 100%; padding-inline-start: 0; inline-size: 100%; } } @media (max-width: 768px) { .vnc__stage .vnc__stage-content { inline-size: calc(100% - var(--space-md)); } } /* Stage: Image Only */ .vnc__stage.stage--image { padding-block-end: var(--space-lg); } .vnc__stage.stage--image img { inline-size: 100%; block-size: auto; display: block; mask-image: var(--mask-stage-wide); mask-repeat: no-repeat; mask-size: contain; } @media (max-width: 1280px) { .vnc__stage.stage--image img { mask-image: none; } } /* Stage: Text Only */ .vnc__stage.stage--text { position: relative; inline-size: 100%; block-size: auto; margin-block-end: var(--space-3xl); padding: 0 !important; } .vnc__stage.stage--text::before { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 100%; block-size: calc(100% - 110px); max-inline-size: 1920px; background: var(--color-background); z-index: 1; } .vnc__stage.stage--text::after { content: ""; position: absolute; inset-inline-start: 0; inset-block-end: -233px; inline-size: 100%; block-size: 343px; background-repeat: no-repeat !important; background-size: contain; background-image: var(--bg-stage-text-bottom); } .vnc__stage.stage--text .vnc__stage-inner { position: relative; z-index: 2; max-inline-size: 1680px; padding-block-start: var(--space-3xl); padding-inline: calc(var(--space-2xl) * 2) var(--space-lg); } .vnc__stage.stage--text.pillar-bg { margin-block-end: 260px; } .vnc__stage.stage--text.pillar-bg::before { block-size: calc(100% - 99px); } .vnc__stage.stage--text.pillar-bg::after { inset-block-end: -243px; } @media (max-width: 1280px) { .vnc__stage.stage--text .vnc__stage-inner { max-inline-size: 62.5rem; padding: var(--space-lg); } } @media (max-width: 1024px) { .vnc__stage.stage--text .vnc__stage-inner { padding: 3rem var(--space-lg); } } @media (max-width: 768px) { .vnc__stage.stage--text, .vnc__stage.stage--text.pillar-bg { margin: 0 0 var(--space-2xl); block-size: auto; } } /* Stage: Text + Image */ .vnc__stage.stage--text_image { padding: 0 !important; margin-block-end: var(--space-2xl); } .vnc__stage.stage--text_image .vnc__stage-box_wrapper { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr; grid-column-gap: 0; grid-row-gap: 0; } .vnc__stage.stage--text_image .stage--text { order: 1; padding-block-start: var(--space-3xl); padding-inline-start: var(--space-2xl); h2{ font-size: 2rem; line-height: 2.5rem; color: #000000; } } .vnc__stage.stage--text_image .items--reverse .stage--text { order: 2; } .vnc__stage.stage--text_image .stage--image { display: flex; justify-content: flex-end; align-items: flex-start; order: 2; } .vnc__stage.stage--text_image .stage--image img { display: block; inline-size: 100%; block-size: 100% !important; aspect-ratio: 1; object-fit: cover; mask-image: var(--mask-stage-square); mask-repeat: no-repeat; mask-size: 100%; max-inline-size: 960px !important; max-block-size: 960px; } .vnc__stage.stage--text_image .stage--image.ratio--switch img { aspect-ratio: 16 / 9; mask-image: var(--mask-stage-169); mask-size: contain; max-inline-size: 1040px !important; } .vnc__stage.stage--text_image .items--reverse .stage--image { order: 1; } @media (max-width: 1280px) { .vnc__stage.stage--text_image { margin-block: 0 var(--space-xl); } .vnc__stage.stage--text_image .vnc__stage-box_wrapper { grid-column-gap: 0; } .vnc__stage.stage--text_image .stage--text { position: relative; inline-size: 100%; margin: 0; padding: 3rem var(--space-lg); block-size: auto; background: var(--color-background); } .vnc__stage.stage--text_image .stage--image { align-items: center; order: 1; } .vnc__stage.stage--text_image .stage--image img, .vnc__stage.stage--text_image .stage--image.ratio--switch img { mask-image: none; max-inline-size: 100% !important; max-block-size: 100% !important; block-size: auto !important; object-fit: cover !important; } } @media (max-width: 991px) { .vnc__stage.stage--text_image .vnc__stage-box_wrapper { grid-template-columns: 1fr; } .vnc__stage.stage--text_image .stage--text { order: 2; } .vnc__stage.stage--text_image .stage--image { order: 1; } } /* ========================================================================== Success Section ========================================================================== */ .vnc__success { position: relative; overflow: hidden; padding-block-end: 5.5625rem; } @media (max-width: 1024px) { .vnc__success { margin-block-start: var(--space-2xl); } } .vnc__success-inner { position: relative; z-index: 1; inline-size: 100%; max-inline-size: 75.25rem; margin-inline: auto; } /* Success Header */ .vnc__success-header { display: flex; justify-content: center; align-items: center; align-self:center; max-inline-size: 100%; padding-inline-start: var(--space-2xl); text-align: start; } @media (max-width: 768px) { .vnc__success-header { padding: 0; } } .vnc__success-polygon { position: absolute; inset-block-start: 0; z-index: 1; inline-size: 48.25rem; block-size: 48.25rem; pointer-events: none; path{ fill: var(--color-background); } } @media (max-width: 768px) { .vnc__success-polygon { inline-size: 100%; block-size: auto; inset-inline-start: 0; } } .vnc__success-header-text { position: relative; z-index: 2; max-inline-size: 28rem; } @media (max-width: 991px) { .vnc__success-header-text { max-inline-size: 100%; } } .vnc__success-header-text .hs_cos_wrapper { display: flex; flex-direction: column; gap: var(--space-md); margin-block-end: var(--space-lg); } .vnc__success-header-text .hs_cos_wrapper > * { margin: 0 !important; } .vnc__success-header-text p:last-of-type { margin-block-end: 0; } /* Success Grid */ .vnc__success-grid { display: grid; gap: var(--space-lg); align-items: flex-start; padding-inline: var(--space-lg); grid-template-columns: minmax(0, 1fr) max-content; grid-template-rows: auto auto; grid-template-areas: "header card23" "card169 card11"; } @media (max-width: 991px) { .vnc__success-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; grid-template-areas: "header header" "card169 card169" "card23 card11"; align-items: start; inline-size: 100%; } .vnc__success-grid .vnc__success-header { grid-area: header; grid-column: 1 / -1; align-self: flex-start; justify-content: flex-start; max-inline-size: 100%; padding-inline-start: 0; } .vnc__success-card--169 { grid-area: card169; grid-column: 1 / -1; justify-self: start; } .vnc__success-card--23 { grid-area: card23; justify-self: start; } .vnc__success-card--11 { grid-area: card11; justify-self: start; } } @media (max-width: 768px) { .vnc__success-grid { grid-template-columns: 1fr; grid-template-areas: "header" "card169" "card23" "card11"; } } /* Success Cards */ .vnc__success-card { position: relative; z-index: 3; overflow: hidden; inline-size: 100%; opacity: 1; .vnc__success-card-link{ position: absolute; bottom:0; background: rgba(255, 255, 255, 0.7); width:100%; min-height:32px; } } .vnc__success-card--169 { --card-max: 42.75rem; } .vnc__success-card--23 { --card-max: 28rem; } .vnc__success-card--11 { --card-max: 20.625rem; } .vnc__success-grid article.vnc__success-card:nth-of-type(1) { animation-delay: 0.1s; } .vnc__success-grid article.vnc__success-card:nth-of-type(2) { animation-delay: 0.18s; } .vnc__success-grid article.vnc__success-card:nth-of-type(3) { animation-delay: 0.26s; } .vnc__success-card-link { display: block; padding: var(--space-xs); color: inherit; text-decoration: none; } .vnc__success-card-media { position: relative; margin: 0; inline-size: min(100%, var(--card-max, 9999px)); } .vnc__success-card-media[data-aspect="16:9"] { img{ object-fit: cover; aspect-ratio: 16 / 9; max-width:684px; width:100%; object-fit:cover; } } .vnc__success-card-media[data-aspect="2:3"] { img{ object-fit: cover; aspect-ratio: 2 / 3; max-width:448px; width:100%; } } .vnc__success-card-media[data-aspect="1:1"] { img{ object-fit: cover; aspect-ratio: 1; max-width:330px; width:100%; } } .vnc__success-card, .vnc__success-card .vnc__success-card-media { max-inline-size: var(--card-max, 100%); } /* ========================================================================== Content Card ========================================================================== */ .vnc__cards .content-cards { max-width: 1539px; margin-inline: auto; row-gap: 1.5rem; overflow: hidden; padding-inline: var(--space-lg); } .vnc__cards .content-card__icon { margin-top:0 !important; padding-top:0.75rem; } .vnc__cards .content-cards .content-card__link { display: none; } .vnc__cards .content-card { color: var(--color-text-primary); padding-top: 0 !important; padding-bottom: 0 !important; box-shadow: none !important; } .vnc__cards .splide .content-card{ height:100%; margin-top:0 !important; } .vnc__cards .content-card.content-card--light { background: transparent !important; box-shadow: none !important; } .vnc__cards .content-card .content-card__body { padding-top: 0; padding-bottom: 0; } .vnc__cards .content-card .content-card__title-tag { font-size: 20px; line-height: 24px; font-weight: 500; font-family: var(--font-secondary); } .vnc__cards .content-card .content-card__desc p { font-size: 18px; line-height: 26px; font-weight: 400; font-family: var(--font-primary); } .vnc__cards .content-card .content-card__label { color: var(--color-text-primary); font-size:1rem; line-height:1rem; } .vnc__cards .content-card .content-card__title-tag{ font-size: var(--fs-h3); line-height: var(--lh-h3); margin:0; padding:0; } .vnc__cards .text-white .content-card__title-tag, .vnc__cards .text-white .content-card__label { color: var(--color-text-white); } .content-card--with-link:hover .content-card__img img, .content-card--collapse-desc:hover .content-card__img img { transform: scale(1); } .vnc__cards.has-offset .content-card__img img { width: calc(100% - 118px); margin-bottom: 16px; } .vnc__cards.has-offset .content-card__header { padding: 0; padding-left: 118px; } .vnc__cards.has-offset .content-card__body { padding-left: 118px; } .vnc__cards .splide .content-card { margin-bottom: 1rem; } .vnc__cards .icon--large.icon--disc, .vnc__cards .icon--large.icon--square { width: auto !important; height: auto !important; } .vnc__cards .icon--fill { background: transparent !important; } .vnc__cards.card__background .content-card{ background-color: var(--color-background); padding: 0 12px; } .vnc__cards.card__background .content-card__body, .vnc__cards.has-offset.card__background .content-card__body{ padding-bottom:12px; } .vnc__cards .content-card--with-link:hover .content-card__img img, .vnc__cards .content-card--collapse-desc:hover .content-card__img img{ transform: scale(1) !important; } .vnc__cards .content-card--with-link:not(.splide .content-card):hover, .vnc__cards .content-card--collapse-desc:not(.splide .content-card):hover{ transform: scale(1) !important; } .vnc__cards .content-card--collapse-desc:hover .vnc__cards .content-card__icon, .vnc__cards .content-card--with-link:hover .content-card__icon{ transform: none !important; } .vnc__cards.bg-gradient .content-card__label{ color:#fff; } .vnc__cards .content-card--no-img-just-icon { margin-top:0 !important; } /* ======================================================================== Steps ======================================================================== */ .vnc__steps-container{ background: var(--accent-gradient); } .vnc_steps_intro { position: relative; z-index: 1; padding: 0 1.5rem; .vnc__text-container{ text-align: center; } } .vnc__steps { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 32px 0; padding-bottom:0; text-align: center; margin: 0; .vnc__mask { position: absolute; top: var(--steps-poly-top); left: var(--steps-poly-left); width: var(--steps-poly-width); height: var(--steps-poly-height); display:none; } .vnc__mask svg { width: 100%; height: 100%; path { fill: var(--color-background) !important; } } .vnc__mask2 { position: absolute; top: var(--steps-poly-top); left: var(--steps-poly-left); width: var(--steps-poly-width); height: var(--steps-poly-height); background: var(--steps-gradient); mask: var(--steps-mask); -webkit-mask: var(--steps-mask); mask-size: 100% 100%;; -webkit-mask-size: 100% 100%; background-repeat: no-repeat; } .vnc__box-container { position: absolute; width: 100%; height: 100%; overflow: hidden; display:none; } .vnc__box1 { position: absolute; width: 100%; height: 100%; background: var(--steps-grey); } } /* Inhalt & Buttons */ .vnc__steps .vnc__steps-inner { position: relative; max-width: 100%; margin: 0 auto; padding: 0 0.75rem; } .vnc_steps_button { display: flex; justify-content: center; margin-top: 2rem; } /* Navigation / Icons */ .vnc__steps .steps__nav { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 3rem; margin-bottom: 3rem; text-align: center; } @media (max-width: 767px) { .vnc__steps .steps__nav { gap: 1rem; } } .vnc__steps .steps__icon { display: flex; justify-content: center; align-items: center; flex-shrink: 0; width: auto; height: auto; margin: 0; border: none; border-radius: 0; box-shadow: none !important; color: #fff; text-align: center; line-height: 0; cursor: pointer; outline: none; background: transparent; transition: all 0.3s ease; gap: 8px; } .vnc__steps .steps__icon::after { content: ""; display: block; background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.001 15.4297V17.3701L9.81836 22.4004H7.07129L12.2725 17.3525H0.000976562V15.4482H12.2725L7.07129 10.4004H9.81836L15.001 15.4297Z' fill='white'/%3E%3C/svg%3E%0A"); background-size: contain; background-repeat: no-repeat; width: 32px; height: 32px; position: relative; top: -2px; } .vnc__steps .steps--dark .steps__icon, .vnc__steps .steps--dark-no-accent .steps__icon { box-shadow: 0 0 0 2px inset; color: ; } .vnc__steps .steps__icon:focus-visible { box-shadow: 0 0 0 2px inset; color: ; } .vnc__steps .steps--dark .steps__icon:focus-visible, .vnc__steps .steps--dark-no-accent .steps__icon:focus-visible { box-shadow: none; color: var(--color-white); } .vnc__steps .steps--active .steps__icon--active { animation: 0.2s ease-in-out forwards uiPop; } .vnc__steps .steps__icon--active, .vnc__steps .steps--dark .steps__icon--active { background: transparent; box-shadow: none; color: var(--color-text-primary); } .vnc__steps .steps__icon--active::after, .vnc__steps .steps--dark .steps__icon--active::after { content: ""; display: block; background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M32.001 15.4297V17.3701L26.8184 22.4004H24.0713L29.2725 17.3525H0.000976562V15.4482H29.2725L24.0713 10.4004H26.8184L32.001 15.4297Z' fill='white'/%3E%3C/svg%3E%0A"); background-size: contain; background-repeat: no-repeat; width: 32px; height: 32px; } .vnc__steps .steps--dark-no-accent .steps__icon--active { background: ; box-shadow: none; color: ; } .vnc__steps .steps__icon--active:focus-visible, .vnc__steps .steps--dark .steps__icon--active:focus-visible { color: ; } .vnc__steps .steps--dark-no-accent .steps__icon--active:focus-visible { color: ; } .vnc__steps .steps__glyph { display: flex; width: auto; height: auto; align-items: center; justify-content: center; margin-right: 0; text-align: normal; color: var(--color-text-white); font-family: var(--font-secondary); font-size: 1.5rem; font-style: normal; font-weight: 500; line-height: 1.75rem; text-transform: uppercase; } .vnc__steps .steps__title, .vnc__steps .steps__desc{ color:var(--color-text-white) !important; } .vnc__steps-container .steps__glyph svg { fill: currentColor; width: 100%; height: 100%; } .vnc__steps-container .steps__icon .ttip { visibility: hidden !important; /* override the default animation in this case */ pointer-events: none; } .vnc__steps-container .steps__icon--active .ttip { visibility: visible !important; /* override the default animation in this case */ pointer-events: auto; } .vnc__steps-container .steps__sep { display: none !important; max-width: 2.67rem; min-width: .44rem; height: 2px; border-radius: ; background: ; margin: 0 0.46rem; } .vnc__steps-container .steps--dark .steps__sep, .vnc__steps-container .steps--dark-no-accent .steps__sep { background: ; } .vnc__steps-container .steps__content { padding: 0; display: flex; overflow: hidden; inline-size: 100%; margin-block-end: var(--space-lg); margin-inline: auto; max-inline-size: var(--content-max-width); } .vnc__steps-container .steps__item { flex: 0 0 100%; order: 2; opacity: 0; display: none; transition: opacity .2s ease-in-out; } .vnc__steps-container .steps__item--active { order: 1; opacity: 1; display: block; } .vnc__steps-container .steps--active .steps__item--active { animation: .2s ease-in-out forwards uiPop; } .vnc__steps-container .steps__title { margin-bottom: 8px !important; color: #fff !important; font-size: 1.25rem; font-weight: 500; line-height: 1.5rem; } .vnc__steps-container .module--text-left .steps__nav { justify-content: left; } .vnc__steps-container .module--text-center .steps__nav { justify-content: center; } .vnc__steps-container .module--text-right .steps__nav { justify-content: right; } @media (max-width: px) { .vnc__steps-container .module--md-text-left .steps__nav { justify-content: left; } .vnc__steps-container .module--md-text-center .steps__nav { justify-content: center; } .vnc__steps-container .module--md-text-right .steps__nav { justify-content: right; } } @media (max-width: px) { .vnc__steps-container .module--sm-text-left .steps__nav { justify-content: left; } .vnc__steps-container .module--sm-text-center .steps__nav { justify-content: center; } .vnc__steps-container .module--sm-text-right .steps__nav { justify-content: right; } } /* ========================================================================== Accordion ========================================================================== */ .accordion .accordion__title { color: var(--color-text-primary); font-size:1.25rem; } .accordion__back-to-top { display: none; } /* ========================================================================== Text Dark Overwrites ========================================================================== */ .txt--dark a, .txt--dark a:hover, .txt--dark h1, .txt--dark h2, .txt--dark h3, .txt--dark h4, .txt--dark h5, .txt--dark h6, .txt--dark .h1, .txt--dark .h2, .txt--dark .h3, .txt--dark .h4, .txt--dark .h5, .txt--dark .h6, .txt--dark .display, .txt--dark .important-text, .txt--dark .ui-label { color: var(--color-text-primary); } .important-text { color: var(--color-text-primary); } .txt--dark, .txt--dark .super-text { color: var(--color-text-primary); } /* ========================================================================== Background Accent Overwrites ========================================================================== */ .section-bg--accent, .section-bg__overlay--accent { background: var(--accent-gradient) !important; } /* ========================================================================== Numbers ========================================================================== */ .vnc__numbers.text-white .numbers__number { color: var(--color-white) !important; } .vnc__numbers .numbers__inner { width: 100%; display: flex; gap: 24px; justify-content: flex-start; } @media (max-width: 767px) { .vnc__numbers .numbers__inner { display: flex; flex-direction: column; } } .vnc__numbers .numbers__inner.full-width { max-width: 100%; width: 100%; } .vnc__numbers .numbers__inner .numbers__text-aside { max-width: 330px; width: 100%; text-align: left !important; } .vnc__numbers .numbers__headline p, .vnc__numbers .numbers__text{ text-transform: none !important; } @media (max-width: 767px) { .vnc__numbers .numbers__inner .numbers__text-aside { max-width: 100%; } } .vnc__numbers .numbers__inner .numbers__grid { display: flex; gap: 24px; row-gap: 32px; flex-wrap: wrap; justify-content: flex-start; text-align: center; width: 100%; } .vnc__numbers .numbers__inner .numbers__grid .numbers { flex: 0 0 100%; width: 100%; max-width: 330px; } @media (max-width: 767px) { .vnc__numbers .numbers__inner .numbers__grid .numbers { max-width: 100%; } } .vnc__numbers .numbers__inner .numbers__grid .numbers .numbers__number { font-family: var(--font-secondary); text-align: center; font-size: 6rem; font-style: normal; font-weight: 450; line-height: 6rem; color: var(--color-text-primary); } /* ========================================================================== Showcase ========================================================================== */ .vnc__showcase .featshow__nav--dark .featshow__btn:hover, .vnc__showcase .featshow__nav--dark .featshow__btn--active{ color:#fff; !important; } .vnc__showcase .featshow__btn { display: inline-flex; align-items: center; justify-content: flex-start; padding-inline-end: var(--space-md); min-block-size: var(--touch-target-min); background: transparent; border: none; color: var(--color-text-primary); font-family: var(--font-secondary); font-size: 1.5rem; font-weight: 500; line-height: 1.75rem; text-transform: uppercase; text-decoration: none !important; cursor: pointer; transition: transform var(--transition-base); gap: 0.5rem; transform: scale(1) !important; transform-origin: unset !important; } .vnc__showcase .featshow__nav--dark .featshow__btn { color: #fff; } .vnc__showcase .featshow{ padding:110px 24px; } .vnc__showcase .featshow__nav{ min-height: 628px; display: flex; justify-content: center; align-items: flex-start; position:relative; padding:0; width:100%; flex: 0 0 566px; background:var(--accent-gradient); padding-left:48px; padding-right:118px; } .vnc__showcase .featshow__nav__wrapper{ width:100%; max-width:100%; padding-bottom:0; } .vnc__showcase .featshow__content__wrapper{ max-width:920px; width:100%; padding:0; position:relative; } .vnc__showcase .featshow__dots{ display:none; } .vnc__showcase .featshow__wrapper{ position: relative; overflow: visible; isolation: isolate; } .vnc__showcase .featshow__wrapper::before { content: ""; position: absolute; inset: -102px -74px -110px 190px; z-index: 100; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg width='900' height='970' viewBox='0 0 900 970' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M589.032 0.000124909L899.323 494.294L535.282 969.8L0.000235442 769.386L33.2197 170.016L589.032 0.000124909Z' fill='%23F4F4F4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; opacity: 1; } .vnc__showcase .featshow__wrapper::after { content: ""; position: absolute; inset: -68.3px -184px -116px 176px; z-index: -1; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg width='900' height='970' viewBox='0 0 900 970' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M589.032 0.000124909L899.323 494.294L535.282 969.8L0.000235442 769.386L33.2197 170.016L589.032 0.000124909Z' fill='%23EBEBEB'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; opacity: 0.55; transform: rotate(-8deg); display:none; } .vnc__showcase .featshow__wrapper > * { position: relative; z-index: 1; } .vnc__showcase .featshow__content{ width:100%; max-width:920px; box-shadow: none !important; background:transparent !important; padding:0; padding-left:24px; max-width:800px; z-index:900; @media (max-width: 768px) { margin-left:0; } } .vnc__showcase .featshow::before{ display:none; } .vnc__showcase .featshow__nav::before{ content: ""; background: url("data:image/svg+xml,%3Csvg width='621' height='628' viewBox='0 0 621 628' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M472.136 0L621 357.399L329.204 628L0 437.842L88.3364 49.7167L472.136 0Z' fill='%23F4F4F4'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-size: 100% 628px; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display:none; } @media (max-width: 1200px) { .vnc__showcase .featshow__wrapper::before { inset: -36px -40px -64px 190px; } .vnc__showcase .featshow__wrapper::after { inset: -72px -80px -108px 165px; } } @media (max-width: 768px) { .vnc__showcase .featshow__wrapper::before, .vnc__showcase .featshow__wrapper::after { display: none; } } .vnc__showcase .featshow__nav ul { display: flex; flex-direction: column; gap: 32px; width:100%; max-width:100%; } .vnc__showcase .featshow__nav ul li{ margin:0 !important; padding:0 !important; } .vnc__showcase .featshow__controls{ position:static; margin-top:24px; } .vnc__showcase .featshow__dots{ padding:0; margin:0; } .vnc__showcase .featshow__arrows{ display:none; } .vnc__showcase .featshow__items { display: flex; align-items: flex-end; } .vnc__showcase .featshow__dots{ padding:0; margin:0; padding-inline-end:0; } .vnc__showcase .featshow__dots ul{ display: flex; gap: 8px;; justify-content: flex-start; } .vnc__showcase .featshow__dots ul li{ margin:0; margin-inline:0; padding:0; } .vnc__showcase .vnc__btn-container{ margin-top:24px;; } .vnc__showcase .featshow__dot{ width:35px; height:35px; background:transparent !important; border-radius:0; display: flex; justify-content: center; align-items: center; &:after{ content:""; width: 28px; height: 8px; background:#C0C0C0; display:block; transition:all 0.3s linear; transform: scaleY(0.5); transform-origin: 0 100%; } } .vnc__showcase .featshow__dot:hover{ background;transparent !important; &:after{ background:#0088D8; } } .vnc__showcase .featshow__dot--active:after{ width: 28px; height: 8px; background:#0088D8; transform: scaleY(1); } .vnc__showcase .featshow__dot--active, .vnc__showcase .featshow__dot--active, .vnc__showcase .featshow__dot--active:hover, .vnc__showcase .featshow--dark .featshow__dot--active, .vnc__showcase .featshow--dark .featshow__dot--active:hover{ background:transparent !important; } .vnc__showcase .featshow__headline{ margin:0; padding:0; margin-bottom:24px; font-size:32px; font-weight:500; line-height:32px; text-transform:uppercase; } .vnc__showcase .properties{ display:flex; flex-direction:row; gap:64px; row-gap:24px; } .vnc__showcase .featshow__properties{ margin:0; margin-bottom:24px; } .vnc__showcase .properties { display: flex; flex-wrap: wrap; justify-content: flex-start; } .vnc__showcase .properties--light .properties__item { border-color: transparent; border:none; height:auto; padding:0 !important; gap:16px; } .vnc__showcase .properties__item { display: flex; align-items: center; vertical-align: middle; margin-top: 0; margin-bottom: 0; text-align: start; border:none !important; } .vnc__showcase .properties__item:not(:last-child){ margin-inline-end: 0; padding-inline-end: 0; border-inline-end: none; } .vnc__showcase .properties--light .properties__item, .vnc__showcase .properties--light a.properties__item:hover { color: #18181c; } .vnc__showcase .important-text.small-text{ font-family: var(--font-secondary); font-size: 20px; font-style: normal; font-weight: 450; line-height: 26px; text-transform: uppercase; color:#000; } .vnc__showcase .properties__icon{ display:block; margin-inline-end: 0; } .vnc__showcase .icon--accent.icon--outline{ border:none !important; } .vnc__showcase .icon--small .icon__glyph{ width:24px; height:24px; line-height:24px; font-size:24px; } .vnc__showcase .icon--small.icon--disc, .vnc__showcase .icon--small.icon--square{ width:24px; height:24px; } /* ========================================================================== VNC Filter Grid ========================================================================== */ .vnc-filter-grid { --_grid-max-width: 1392px; --_chip-bg: var(--color-background); --_chip-bg-active: var(--color-primary-100); --_chip-color: var(--color-text-primary); --_chip-color-active: var(--color-text-white); --_divider-color: #e6e6e6; --_card-title-size: clamp(2rem, 1.5rem + 2vw, 3rem); --_card-title-lh: clamp(2.5rem, 2rem + 2vw, 3.5rem); margin-inline: auto; } /* ========================================================================== Filter Section ========================================================================== */ .vnc-filter-grid__filters { display: flex; flex-direction: column; gap: var(--space-xl); max-inline-size: var(--_grid-max-width); margin-inline: auto; padding-inline: var(--container-padding-x); } .vnc-filter-grid__row { display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: nowrap; gap: var(--space-lg); } .vnc-filter-grid__row-label { flex: 0 0 160px; inline-size: 100%; max-inline-size: 160px; font-family: var(--font-secondary); font-size: var(--fs-p-lg); line-height: 1.75rem; font-weight: var(--fw-medium); text-transform: uppercase; color: var(--color-text-primary); } /* ========================================================================== Chips Container ========================================================================== */ .vnc-filter-grid__chips { display: flex; flex-wrap: wrap; gap: var(--space-sm); } /* ========================================================================== Chip Component ========================================================================== */ .vnc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 10px; border: none; border-radius: 4px; background: var(--_chip-bg); color: var(--_chip-color); font-family: var(--font-primary); font-size: var(--fs-p-sm); font-weight: var(--fw-normal); line-height: 1.625; cursor: pointer; box-shadow: none; transition: transform var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast); will-change: transform; } /* Hover State */ .vnc-chip:hover { background: var(--color-primary-100); color:#fff; } .vnc-chip:focus { outline: none; } .vnc-chip:focus-visible { outline: var(--focus-outline-width) solid var(--focus-outline-color); outline-offset: var(--focus-outline-offset); } .vnc-chip:active { transform: scale(0.98); } .vnc-chip.is-active, .vnc-chip[aria-pressed="true"] { background: var(--_chip-bg-active); color: var(--_chip-color-active); } .vnc-chip__icon { display: none; inline-size: 24px; block-size: 24px; flex-shrink: 0; } .vnc-chip.is-active .vnc-chip__icon, .vnc-chip[aria-pressed="true"] .vnc-chip__icon { display: block; } .vnc-chip.is-pop { animation: vncChipPop 220ms ease-out; } @keyframes vncChipPop { 0% { transform: scale(1); } 45% { transform: scale(1.06); } 100% { transform: scale(1); } } /* ========================================================================== Divider ========================================================================== */ .vnc-filter-grid__divider { block-size: 1px; background: var(--_divider-color); margin: 0; margin-block-end: var(--space-lg); border: none; } /* ========================================================================== Actions (Clear Button) ========================================================================== */ .vnc-filter-grid__actions { display: flex; justify-content: center; align-items: center; margin-block-end: var(--space-2xl); } .vnc-btn--ghost { display: inline-flex; justify-content: center; align-items: center; gap: 10px; padding: 5px var(--space-xl); min-block-size: var(--touch-target-min); border: 2px solid var(--color-primary-100); border-radius: 4px; background: transparent; color: var(--color-primary-100); font-family: var(--font-primary); font-size: 1.125rem; font-weight: var(--fw-bold); line-height: 1.625; text-align: center; cursor: pointer; transition: background-color var(--transition-fast), color var(--transition-fast); } .vnc-btn--ghost:hover { background: var(--color-primary-100); color: var(--color-text-white); } .vnc-btn--ghost:focus-visible { outline: var(--focus-outline-width) solid var(--focus-outline-color); outline-offset: var(--focus-outline-offset); } .vnc-btn--ghost:active { transform: scale(0.98); } /* ========================================================================== Cards Grid ========================================================================== */ .vnc-filter-grid-bg{ background-image: url("data:image/svg+xml,%3Csvg width='1781' height='1959' viewBox='0 0 1781 1959' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1780.61 1056.02L967.055 1958.3L-136.423 1459.92L-4.8509 249.622L1179.94 -0.000285786L1780.61 1056.02Z' fill='%23F4F4F4'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-position: left top; background-size: contain; } .vnc-filter-grid__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: start; gap: var(--space-lg); row-gap: var(--space-2xl); margin-inline: auto; max-inline-size: var(--_grid-max-width); padding-inline: var(--container-padding-x); } /* ========================================================================== Card Component ========================================================================== */ .vnc-card { position: relative; inline-size: 100%; max-inline-size: 684px; } /* Card Media */ .vnc-card__media { inline-size: 100%; max-inline-size: calc(100% - 120px); margin-block-end: var(--space-md); } .vnc-card__media img { inline-size: 100%; block-size: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover; width: 100%; height: 100%; } /* Card Body */ .vnc-card__body { display: flex; flex-direction: column; gap: 0; justify-content: flex-end; align-items: flex-end; } .vnc-card__body-inner { max-inline-size: calc(100% - 118px); } /* Card Overline */ .vnc-card__overline { margin: 0; padding: 0; margin-block-end: var(--space-xs); font-family: var(--font-primary); font-size: 0.875rem; line-height: 1.125rem; font-weight: var(--fw-normal); color: var(--color-neutral-400); text-transform: uppercase; letter-spacing: 0.05em; } /* Card Title */ .vnc-card__title { margin: 0; padding: 0; margin-block-end: var(--space-md); font-family: var(--font-secondary); font-size: var(--_card-title-size); font-weight: var(--fw-medium); line-height: var(--_card-title-lh); color: var(--color-text-primary); text-transform: uppercase; } /* Card Text */ .vnc-card__text { margin: 0; padding: 0; margin-block-end: var(--space-lg); font-family: var(--font-primary); font-size: 1.125rem; line-height: 1.625; font-weight: var(--fw-normal); color: var(--color-neutral-400); } /* Card Link */ .vnc-card__link { display: inline-flex; align-items: center; gap: var(--space-xs); font-family: var(--font-primary); font-size: var(--fs-p-sm); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-primary); text-decoration: none; transition: color var(--transition-fast); } .vnc-card__link:hover { color: var(--color-primary-100); } .vnc-card__link:focus-visible { outline: var(--focus-outline-width) solid var(--focus-outline-color); outline-offset: var(--focus-outline-offset); border-radius: 2px; } .vnc-card__link svg, .vnc-card__link-icon { flex-shrink: 0; transition: transform var(--transition-fast); } .vnc-card__link:hover svg, .vnc-card__link:hover .vnc-card__link-icon { transform: translateX(4px); } /* Card Tags (Debug) */ .vnc-card__tags { display: block; /* Nur für Debug sichtbar */ position: absolute; inset-block-start: 10px; inset-inline-start: 10px; inline-size: auto; padding: 5px; background: rgba(255, 255, 255, 0.8); border: 2px solid red; flex-wrap: wrap; gap: var(--space-xs); } .vnc-card__tags.is-debug { display: inline-flex; } /* ========================================================================== Card Animations ========================================================================== */ [data-card] { opacity: 1; transform: translateY(0); transition: opacity 220ms ease, transform 220ms ease; } /* Showing Animation */ [data-card].is-showing { opacity: 0; transform: translateY(10px); animation: vncCardIn 260ms ease-out both; animation-delay: var(--card-delay, 0ms); } @keyframes vncCardIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Hiding Animation */ [data-card].is-hiding { opacity: 0; transform: translateY(8px); } /* Hidden State */ [data-card][hidden] { display: none; } /* ========================================================================== No Results ========================================================================== */ [data-no-results] { text-align: center; padding: var(--space-2xl); background: var(--color-background); border-radius: 8px; grid-column: 1 / -1; margin-inline: auto; max-inline-size: var(--_grid-max-width); padding-inline: var(--container-padding-x); } [data-no-results][hidden] { display: none; } [data-no-results].is-fade-in { animation: vncFadeIn 260ms ease-out both; } [data-no-results] p { margin: 0; margin-block-end: var(--space-md); font-family: var(--font-primary); font-size: var(--fs-p); color: var(--color-neutral-400); } @keyframes vncFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================================== Status (Screen Reader Only) ========================================================================== */ [data-filter-status] { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 1024px) { .vnc-card__media { max-inline-size: 100%; } .vnc-card__body-inner { max-inline-size: 100%; } .vnc-filter-grid__row { flex-wrap: wrap; } .vnc-filter-grid__row-label { flex: 0 0 100%; max-inline-size: 100%; } } @media (max-width: 767px) { .vnc-filter-grid__grid { grid-template-columns: repeat(1, minmax(0, 1fr)); row-gap:2rem; } .vnc-card__title { font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); line-height: clamp(2rem, 1.75rem + 1vw, 2.5rem); } .vnc-filter-grid__filters { gap: var(--space-lg); } .vnc-filter-grid__actions { margin-block-end: var(--space-xl); } } /* ========================================================================== VNC Stories Detail ========================================================================== */ .vnc-stories-detail { --_max-width: 1440px; max-inline-size: var(--_max-width); margin-inline: auto; padding-inline: 1.5rem; .vnc-stories-detail__inner{ display:flex; gap:24px; flex-wrap:nowrap; flex-direction:row; @media (max-width: 991px) { flex-wrap:wrap; gap:4rem; flex-direction:column-reverse; } .vnc-stories-detail__sidebar{ flex:0 0 448px; inline-size:448px; .vnc-stories-detail__logo{ display:flex; gap:24px; flex-direction:column; align-items:flex-start; justify-content:flex-start; margin-bottom:24px; img{ max-height:64px; object-fit:contain; width:auto; } p,div{ margin:0; padding:0; font-size:2rem; line-height:3.5rem; font-weight:450; text-transform:uppercase; font-family:var(--font-secondary); } } .vnc-stories-detail__tag-group{ display:flex; flex-direction:column; gap:0.5rem; margin-bottom:1.5rem; .vnc-stories-detail__tag-label{ margin:0; padding:0; font-size:1.25rem; font-weight:450; line-height:1.625rem; text-transform:uppercase; font-family:var(--font-secondary); color:#000; } .vnc-stories-detail__tag-list{ display:flex; flex-direction:row; gap:0.75rem; row-gap:0.75rem; flex-wrap:wrap; .vnc-stories-detail__tag{ display: flex; padding: 3px 12px; align-items: center; gap: 6px; border-radius: 4px; color:#fff; background: var(--color-primary-100); } } } .vnc-stories-detail__link{ margin-top:2rem; } @media (max-width: 991px) { flex:0 0 100%; inline-size:100%; } } } } /* ========================================================================== Binary 404 ========================================================================== */ .binary{ background-color: #ffffff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='22'%3E%3Ctext x='0' y='18' font-size='16' font-weight='500' font-family='PP Supply Sans%2Csystem-ui%2Csans-serif' fill='%23F4F4F4' textLength='1200' lengthAdjust='spacingAndGlyphs'%3E010001000110100101100100100010001101001011001001000100011010010110010010001000110100101100100%3C%2Ftext%3E%3C%2Fsvg%3E"); background-repeat: repeat; background-size: 1200px 22px; min-height:calc(100vh - 226px); padding-top:152px; padding-inline:1.5rem; @media (max-width: 1139px) { padding-top:64px; min-height:100%; } .system-intro{ width:100%; max-width:682px; margin:0 auto; display:flex; flex-direction:column; h1{ margin:0; padding:0; margin-bottom:16px; font-size:96px; font-weight:450; line-height:96px; text-transform:uppercase; font-family: var(--font-secondary); } p{ margin:0; padding:0; margin-bottom:24px; font-size:20px; line-height:40px; font-weight:400; font-family: var(--font-primary); } button{ margin:0; font-size:24px; font-weight:450; line-height:28px; text-transform:uppercase; font-family: var(--font-secondary); } } }