/*-------------------------------------------------- GENERAL ---------------------------------------------------*/ :root { --white: #FFFFFF; --black: #000000; --red: #e61d2e; --blue: #374448; --vericutblue: #0078bd; --gray: #f0edf5; --padding-top: 7%; --padding-bottom: 7%; --padding-left: 3%; --padding-right: 3%; --common-font: 'X-Data'; --title-font: 'X-Data'; } @font-face { font-family: 'X-Data'; src: url('../css/fonts/ArchivoExpanded-Italic.eot'); src: url('../css/fonts/ArchivoExpanded-Italic.eot?#iefix') format('embedded-opentype'), url('../css/fonts/ArchivoExpanded-Italic.woff2') format('woff2'), url('../css/fonts/ArchivoExpanded-Italic.woff') format('woff'), url('../css/fonts/ArchivoExpanded-Italic.ttf') format('truetype'); font-weight: normal; font-style: italic; font-display: swap; } @font-face { font-family: 'X-Data'; src: url('../css/fonts/ArchivoExpanded-LightItalic.eot'); src: url('../css/fonts/ArchivoExpanded-LightItalic.eot?#iefix') format('embedded-opentype'), url('../css/fonts/ArchivoExpanded-LightItalic.woff2') format('woff2'), url('../css/fonts/ArchivoExpanded-LightItalic.woff') format('woff'), url('../css/fonts/ArchivoExpanded-LightItalic.ttf') format('truetype'); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: 'X-Data'; src: url('../css/fonts/ArchivoExpanded-Bold.eot'); src: url('../css/fonts/ArchivoExpanded-Bold.eot?#iefix') format('embedded-opentype'), url('../css/fonts/ArchivoExpanded-Bold.woff2') format('woff2'), url('../css/fonts/ArchivoExpanded-Bold.woff') format('woff'), url('../css/fonts/ArchivoExpanded-Bold.ttf') format('truetype'); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: 'X-Data'; src: url('../css/fonts/ArchivoExpanded-Light.eot'); src: url('../css/fonts/ArchivoExpanded-Light.eot?#iefix') format('embedded-opentype'), url('../css/fonts/ArchivoExpanded-Light.woff2') format('woff2'), url('../css/fonts/ArchivoExpanded-Light.woff') format('woff'), url('../css/fonts/ArchivoExpanded-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'X-Data'; src: url('../css/fonts/ArchivoExpanded-BlackItalic.eot'); src: url('../css/fonts/ArchivoExpanded-BlackItalic.eot?#iefix') format('embedded-opentype'), url('../css/fonts/ArchivoExpanded-BlackItalic.woff2') format('woff2'), url('../css/fonts/ArchivoExpanded-BlackItalic.woff') format('woff'), url('../css/fonts/ArchivoExpanded-BlackItalic.ttf') format('truetype'); font-weight: 900; font-style: italic; font-display: swap; } @font-face { font-family: 'X-Data'; src: url('../css/fonts/ArchivoExpanded-Regular.eot'); src: url('../css/fonts/ArchivoExpanded-Regular.eot?#iefix') format('embedded-opentype'), url('../css/fonts/ArchivoExpanded-Regular.woff2') format('woff2'), url('../css/fonts/ArchivoExpanded-Regular.woff') format('woff'), url('../css/fonts/ArchivoExpanded-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'X-Data'; src: url('../css/fonts/ArchivoExpanded-SemiBold.eot'); src: url('../css/fonts/ArchivoExpanded-SemiBold.eot?#iefix') format('embedded-opentype'), url('../css/fonts/ArchivoExpanded-SemiBold.woff2') format('woff2'), url('../css/fonts/ArchivoExpanded-SemiBold.woff') format('woff'), url('../css/fonts/ArchivoExpanded-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'X-Data'; src: url('../css/fonts/ArchivoExpanded-Medium.eot'); src: url('../css/fonts/ArchivoExpanded-Medium.eot?#iefix') format('embedded-opentype'), url('../css/fonts/ArchivoExpanded-Medium.woff2') format('woff2'), url('../css/fonts/ArchivoExpanded-Medium.woff') format('woff'), url('../css/fonts/ArchivoExpanded-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'X-Data'; src: url('../css/fonts/ArchivoExpanded-MediumItalic.eot'); src: url('../css/fonts/ArchivoExpanded-MediumItalic.eot?#iefix') format('embedded-opentype'), url('../css/fonts/ArchivoExpanded-MediumItalic.woff2') format('woff2'), url('../css/fonts/ArchivoExpanded-MediumItalic.woff') format('woff'), url('../css/fonts/ArchivoExpanded-MediumItalic.ttf') format('truetype'); font-weight: 500; font-style: italic; font-display: swap; } * { position: relative; box-sizing: border-box; } body { overflow-x: hidden; margin: 0; font-size: min(max(0.8rem, 1vw), 1rem); line-height: 2; font-family: var(--common-font); font-weight: normal; -moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; color: var(--darkblue); -webkit-font-smoothing: antialiased; background: var(--white); } body.overflow-hidden { overflow: hidden; } .wrapper { display: block; float: left; width: 100%; background: var(--white); z-index: 2; } .header { position: absolute; display: block; float: left; top: 0; left: 0; width: 100%; height: 120px; z-index: 1006; } .header_fadein { position: fixed; right: 0px; top: 0; left: 0px; height: 70px; /*transform: translateY(-80px);*/ z-index: 1004; background: var(--blue); -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.86, 0, 0.07, 1); -moz-transition: -moz-transform 0.5s cubic-bezier(0.86, 0, 0.07, 1); transition: transform 0.5s cubic-bezier(0.86, 0, 0.07, 1); -webkit-box-shadow: 0px 5px 14px 0px rgb(0 0 0 / 5%); -moz-box-shadow: 0px 5px 14px 0px rgba(0,0,0,0.05); box-shadow: 0px 5px 14px 0px rgb(0 0 0 / 5%); } .header_fadein.hidden { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } .header_content { display: flex; align-items: center; justify-content: space-between; float: left; width: 86%; margin-left: 7%; margin-right: 7%; } main { position: relative; display: inline; width: 100%; height: 100%; float: left; background: var(--white); } footer { position: relative; display: inline; float: left; width: 100%; background-color: var(--white); color: var(--darkblue); white-space: nowrap; } footer p { line-height: 1.75; } footer .grid { z-index: 2; } .copyright { position: relative; display: block; float: left; width: 100%; z-index: 3; } .copyright a, .copyright p { font-size: min(max(0.55rem, 0.75vw), 0.75rem); } img, iframe, embed { width: 100%; max-width: 100%; } .pagination { position: relative; display: block; float: left; width: 100%; } .pagination a { padding: 15px 25px; font-size: 0.7rem; border: 1px solid var(--gray); } .pagination span.current { padding: 16px 26px; background: var(--red); color: var(--white); font-size: 0.7rem; } .pagination a:hover { background: var(--red); color: var(--white); } /*-------------------------------------------------- HEADER UND NAVIGATION ---------------------------------------------------*/ .heads { width: 100%; height: clamp(25em, 50vh, 50vh); float: left; background-color: var(--darmode); } .heads.fullscreen { height: calc(var(--vh, 1vh) * 100); } .heads h2 { color: var(--white); width: auto; text-align: left; } .heads-inner { width: 100%; height: 100%; box-sizing: border-box; background-position: center; background-size: cover; background-repeat: no-repeat; filter: saturate(1); } .heads-inner video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 1; } img.header-logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: clamp(20rem, 30vw, 30rem); } .heads-title { width: calc(100% - 6em); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 99; } .heads-title h1 { color: var(--white); font-weight: bold; letter-spacing: 2px; } .heads-title span { color: var(--red); /*font-size: min(max(3.5rem, 5vw), 7rem);*/ line-height: 1.2; text-align: center; text-transform: uppercase; letter-spacing: min(max(0.4rem, 2vw), 4rem); -moz-hyphens: none; -o-hyphens: none; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; font-weight: bold; } .subtitle { color: var(--red); text-transform: uppercase; letter-spacing: 6px; font-size: min(max(0.6rem, 0.7vw), 0.8rem); position: absolute; right: 4em; bottom: 0; transform: rotate(270deg) translateX(100%); transform-origin: bottom right; -ms-transform: rotate(270deg) translateX(100%); -ms-transform-origin: 0% 0%; -webkit-transform: rotate(270deg) translateX(100%); -webkit-transform-origin: bottom right; } /* Falls Schrift weiss sein soll DISPLAY BLOCK */ .heads-title-area { position: absolute; z-index: 3; top: 70%; transform: translateY(-50%); left: -13em; width: 16em; white-space: nowrap; display: none; } .heads-image-area { position: relative; display: block; float: left; width: 100%; height: 100%; /*overflow: hidden;*/ background: var(--darkblue); } .heads-image-area h2 { position: absolute; top: 70%; transform: translateY(-50%); left: -1.144em; margin: 0; z-index: 3; color: var(--white); white-space: nowrap; } a.logo { position: relative; display: inline-block; top: 50%; left: 5%; padding: 0; width: clamp(8em, 10vw, 10em); transition: none; transform: translate(0, -50%); } .unterseite a.logo { top: 20px; width: clamp(6em, 8vw, 8em); } .header_fadein a.logo { display: flex; align-items: center; top: 50%; left: 5%; width: clamp(7em, 8vw, 8em); transform: translateY(-50%); filter: invert(1) brightness(2); /* top: 50%; transform: translate(0, -50%); width: clamp(1em, 3vw, 3em); */ } #navigationwrap_mobile a.logo { width: clamp(8em, 10vw, 10em); transform: translateY(-50%); margin-top: 2em; } a.logo img { display: block; float: left; width: 100%; } .nav { justify-content: space-between; display: flex; } .nav__link { margin-left: 2em; font-size: min(max(1.8rem, 2vw), 2rem); text-decoration: none; font-weight: 500; font-family: var(--title-font); color: var(--white); transition: border-color .12s ease; float: none; display: block; text-align: left; transition: all ease 0.3s; } nav.nav .nav__link { font-size: min(max(3rem, 4vw), 4rem); } .nav__link.nav__link--active { border-bottom-color: var(--gold); } #navigationwrap_mobile { position: fixed; display: none; width: 0%; min-height: 100%; height: 100%; opacity: 1; top: 0; right: 0; bottom: 0; padding: 0; overflow-y: auto; overflow-x: hidden; z-index: 1007; background-color: var(--red); } #navigationwrap_mobile.open { height: 100%; padding: 120px 0 0; } .hamburger { display: none; } .nav-social { position: absolute; bottom: 5%; right: 5%; float: left; opacity: 0; transform: translateY(-40px); } /* .nav-social h4 { color: var(--red); float: right; width: 100%; text-align: right; margin-bottom: 1rem; font-size: 1.25rem; text-align: right; letter-spacing: 9px; } */ #navigationwrap_mobile a { text-decoration: none; } #navigationwrap_mobile_bg { position: fixed; top: 0; right: 0; left: 0; bottom: 0; width: 100%; height: 100%; z-index: 1006; background-color: #000; display: none; opacity: 0; visibility: visible; } #navigationwrap_desktop { position: absolute; right: 5%; top: 50%; transform: translate(0, -50%); } .header_fadein nav { top: 50%; transform: translate(0, -50%); right: 0; } nav ul { list-style-type: none; text-align: left; display: flex; flex-direction: row; flex-wrap: nowrap; width: auto; float: right; align-items: center; } nav ul li a { color: var(--white); font-weight: 600; letter-spacing: 2px; font-size: min(max(0.55rem, 0.65vw), 0.65rem); } nav ul li ul li a:hover { color: var(--black); } nav ul li a:hover { color: var(--red); } li.active a { padding-bottom: 5px; border-bottom: 2px solid var(--red); } nav ul li ul li a { color: var(--white); } nav ul li ul li.active a { color: var(--black); border: none; } nav ul > li.mainnav { position: relative; display: block; float: left; text-transform: uppercase; width: 100%; margin: 0.25em 0; font-size: min(max(1.2rem, 1.6vw), 1.6rem); } nav ul > li.mainnav a:hover { color: var(--black); } nav ul > li { position: relative; display: block; float: left; width: 100%; margin: 0 1.3vw; white-space: nowrap; hyphens: none; color: var(--white); text-transform: uppercase; font-size: min(max(0.6rem, 0.8vw), 0.8rem); text-align: center; width: auto; } #navigationwrap_desktop nav ul li:hover > ul, #navigationwrap_desktop nav ul li ul:hover { visibility: visible; opacity: 1; display: block; overflow: hidden; padding: 22px 0 0; transition: 0.5s all ease; } nav ul li ul::before { content: ''; width: 0; height: 0; border-style: solid; border-width: 0 15px 12px 15px; border-color: transparent transparent var(--red) transparent; position: absolute; left: 50%; top: 0px; transform: translate(-50%, 0); transition: 0.5s all ease; } nav ul li:hover > ul:before { top: 12px; } li.submenu { cursor: pointer; } li.submenu::after { content: ''; position: absolute; right: -20px; top: 50%; transform: translate(0, -50%); background-image: url('/static/images/nav-arrow.svg'); background-size: contain; background-position: center; background-repeat: no-repeat; width: clamp(8px, 1vw, 12px); height: clamp(8px, 1vw, 12px); } .header_fadein li.submenu::after { background-image: url('/static/images/nav-arrow-dark.svg'); filter: invert(1) brightness(2); } .header_fadein nav ul > li { color: var(--black); } .header_fadein nav ul li a { color: var(--white); } .header_fadein nav ul li a:hover { color: var(--red); } .header_fadein nav ul li ul li a { color: var(--white); } .header_fadein nav ul li ul li a:hover { color: var(--black); } nav ul > li.mainnav a.active { font-weight: 700; color: var(--black); } nav ul > li.subnav { position: static; float: left; font-size: min(max(1.2rem, 1.6vw), 1.6rem); text-transform: uppercase; width: 100%; margin: 0.3em 0; padding: 0 2em 0 0; cursor: pointer; } nav ul > li.subnav.active span { font-weight: bold; } nav ul > li.subnav span { position: relative; width: 100%; display: block; float: left; } nav ul > li.subnav.open span:after { opacity: 1; background-image: url('/static/images/subnav-arrow-black.svg'); } .subnav ul li a { color: var(--black); font-weight: 500; } .subnav ul li.active a { border-bottom: 2px solid var(--gray); } nav ul li.gsap_tlmenu span { /*transform: translateY(-40px); opacity: 0;*/ transition: none; font-weight: 500; letter-spacing: 1px; border-bottom: 2px solid var(--gray); width: 100%; } .mainnav a { font-weight: 500; color: var(--black); letter-spacing: 1px; } a.button.login { transform: translateY(0px); opacity: 0; transition: none; } li.subnav ul li { font-size: 1rem; padding: 0.25rem 0; } li.subnav ul li:hover a { color: var(--red); } li.subnav.open { font-weight: 700; } nav ul li ul { position: absolute; display: block; width: 100%; opacity: 0; overflow: auto; visibility: hidden; float: left; left: 50%; transform: translate(-50%, 0); transition: 0.5s all ease; width: clamp(10rem, 15vw, 15rem); } nav ul li ul.open { right: 0; } nav ul li ul li { width: 100%; height: auto; display: block; float: left; padding: 0; padding: 0.25rem 0; margin: 0; background: var(--red); } nav ul li ul li:first-child { padding-top: 1rem; } nav ul li ul li:last-child { padding-bottom: 0.5rem; } nav ul li ul li a.sub_tile { width: 100%; height: clamp(10em, 20vh, 11em); position: relative; display: flex; float: left; align-items: center; justify-content: center; overflow: hidden; } nav ul li ul li.sub_li a { opacity: 0.9; } nav ul li ul li.sub_li a:hover { opacity: 1; } nav ul li ul li.sub_li.active a { opacity: 1; } li.sub_li { padding-left: 2em; opacity: 0; } .teamviewer img { width: clamp(8em, 12vw, 12em); float: left; } /* ////// HAMBURGER ////// */ .hamburger { position: absolute; right: 5%; top: 60px; transform: translate(0, -50%); background: transparent; transition: all 0ms 300ms; z-index: 1008; } .hamburger_fadein { position: fixed; right: 5%; top: 28px; z-index: 1008; -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.86, 0, 0.07, 1); -moz-transition: -moz-transform 0.5s cubic-bezier(0.86, 0, 0.07, 1); transition: transform 0.5s cubic-bezier(0.86, 0, 0.07, 1); } .hamburger_fadein .hamburger { top: 0; } .hamburger_fadein.hidden { -webkit-transform: translateY(-100px); -moz-transform: translateY(-100px); -ms-transform: translateY(-100px); -o-transform: translateY(-100px); transform: translateY(-100px); } .hamburger, .hamburger:after, .hamburger:before { width: 35px; height: 3px; } .hamburger:before { content: ""; position: absolute; left: 0; bottom: 5px; background: var(--white); transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1); } .hamburger:after { content: ""; position: absolute; left: 0; top: 5px; background: var(--white); transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1); } .hamburger.is-active { background: rgba(255, 255, 255, 0); } .hamburger.is-active:after { top: 0; transform: rotate(45deg); transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1); } .hamburger.is-active:before { bottom: 0; transform: rotate(-45deg); transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1); } /*------------------------------------------------------------------------------------------------------------------------------------------------------ COMPONENTS -------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------- SWIPER ---------------------------------------------------*/ /** * Swiper 5.3.1 * Most modern mobile touch slider and framework with hardware accelerated transitions * http://swiperjs.com * * Copyright 2014-2020 Vladimir Kharlampidi * * Released under the MIT License * * Released on: February 8, 2020 */ @font-face { font-family: 'swiper-icons'; src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA") format("woff"); font-weight: 400; font-style: normal; } :root { --swiper-theme-color: var(--red); } .swiper-container { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; width: 100%; height: 100%; /* Fix of Webkit flickering */ z-index: 1; } #slider .swiper-container { overflow: hidden; width: 100%; } .swiper-container-vertical > .swiper-wrapper { flex-direction: column; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; box-sizing: content-box; } .swiper-container-android .swiper-slide, .swiper-wrapper { transform: translate3d(0px, 0, 0); } .swiper-container-multirow > .swiper-wrapper { flex-wrap: wrap; } .swiper-container-multirow-column > .swiper-wrapper { flex-wrap: wrap; flex-direction: column; } .swiper-container-free-mode > .swiper-wrapper { transition-timing-function: ease-out; margin: 0 auto; } .swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform; } .swiper-slide-invisible-blank { visibility: hidden; } /* Auto Height */ .swiper-container-autoheight, .swiper-container-autoheight .swiper-slide { height: auto; } .swiper-container-autoheight .swiper-wrapper { align-items: flex-start; transition-property: transform, height; } /* 3D Effects */ .swiper-container-3d { perspective: 1200px; } .swiper-container-3d .swiper-wrapper, .swiper-container-3d .swiper-slide, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-cube-shadow { transform-style: preserve-3d; } .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-slide-shadow-bottom { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } .swiper-container-3d .swiper-slide-shadow-left { background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-right { background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-top { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-bottom { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } /* CSS Mode */ .swiper-container-css-mode > .swiper-wrapper { overflow: auto; scrollbar-width: none; /* For Firefox */ -ms-overflow-style: none; /* For Internet Explorer and Edge */ } .swiper-container-css-mode > .swiper-wrapper::-webkit-scrollbar { display: none; } .swiper-container-css-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: start start; } .swiper-container-horizontal.swiper-container-css-mode > .swiper-wrapper { scroll-snap-type: x mandatory; } .swiper-container-vertical.swiper-container-css-mode > .swiper-wrapper { scroll-snap-type: y mandatory; } :root { --swiper-navigation-size: 44px; /* --swiper-navigation-color: var(--swiper-theme-color); */ } .swiper-button-prev, .swiper-button-next { position: absolute; top: 50%; width: calc(var(--swiper-navigation-size) / 44 * 27); height: var(--swiper-navigation-size); margin-top: calc(-1 * var(--swiper-navigation-size) / 2); z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--swiper-navigation-color, var(--swiper-theme-color)); } .swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled { opacity: 0.35; cursor: auto; pointer-events: none; } .swiper-button-prev:after, .swiper-button-next:after { font-family: swiper-icons; font-size: var(--swiper-navigation-size); text-transform: none !important; letter-spacing: 0; text-transform: none; font-variant: initial; } .swiper-button-prev, .swiper-container-rtl .swiper-button-next { left: 10px; right: auto; } .swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after { content: 'prev'; } .swiper-button-next, .swiper-container-rtl .swiper-button-prev { right: 10px; left: auto; } .swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after { content: 'next'; } .swiper-button-prev.swiper-button-white, .swiper-button-next.swiper-button-white { --swiper-navigation-color: #ffffff; } .swiper-button-prev.swiper-button-black, .swiper-button-next.swiper-button-black { --swiper-navigation-color: #000000; } .swiper-button-lock { display: none; } .swiper-pagination { position: relative; text-align: center; transition: 300ms opacity; transform: translate3d(0, 0, 0); z-index: 10; } .swiper-pagination.swiper-pagination-hidden { opacity: 0; } /* Common Styles */ .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets { bottom: 10px; left: 0; width: 100%; } */ /* Bullets */ .swiper-pagination-bullets-dynamic { overflow: hidden; font-size: 0; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transform: scale(0.33); position: relative; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { transform: scale(0.33); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { transform: scale(0.33); } .swiper-pagination-bullet { width: 8px; height: 8px; display: inline-block; border-radius: 100%; background: #000; opacity: 0.2; } button.swiper-pagination-bullet { border: none; margin: 0; padding: 0; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer; } .swiper-pagination-bullet-active { opacity: 1; background: var(--swiper-pagination-color, var(--swiper-theme-color)); } .swiper-container-vertical > .swiper-pagination-bullets { right: 10px; top: 50%; transform: translate3d(0px, -50%, 0); } .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 6px 0; display: block; } .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { top: 50%; transform: translateY(-50%); width: 8px; } .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display: inline-block; transition: 200ms transform, 200ms top; } .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 4px; } .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { left: 50%; transform: translateX(-50%); white-space: nowrap; } .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms transform, 200ms left; } .swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: 200ms transform, 200ms right; } /* Progress */ .swiper-pagination-progressbar { background: rgba(0, 0, 0, 0.25); position: absolute; } .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: var(--swiper-pagination-color, var(--swiper-theme-color)); position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: scale(0); transform-origin: left top; } .swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { transform-origin: right top; } .swiper-container-horizontal > .swiper-pagination-progressbar, .swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { width: 100%; height: 4px; left: 0; top: 0; } .swiper-container-vertical > .swiper-pagination-progressbar, .swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { width: 4px; height: 100%; left: 0; top: 0; } .swiper-pagination-white { --swiper-pagination-color: #ffffff; } .swiper-pagination-black { --swiper-pagination-color: #000000; } .swiper-pagination-lock { display: none; } /* Scrollbar */ .swiper-scrollbar { border-radius: 10px; position: relative; background: rgba(0, 0, 0, 0.1); } .swiper-container-horizontal > .swiper-scrollbar { position: absolute; left: 1%; bottom: 3px; z-index: 50; height: 5px; width: 98%; } .swiper-container-vertical > .swiper-scrollbar { position: absolute; right: 3px; top: 1%; z-index: 50; width: 5px; height: 98%; } .swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background: rgba(0, 0, 0, 0.5); border-radius: 10px; left: 0; top: 0; } .swiper-scrollbar-cursor-drag { cursor: move; } .swiper-scrollbar-lock { display: none; } .swiper-zoom-container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; text-align: center; } .swiper-zoom-container > img, .swiper-zoom-container > svg, .swiper-zoom-container > canvas { max-width: 100%; max-height: 100%; object-fit: contain; } .swiper-slide-zoomed { cursor: move; } .swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; transform-origin: 50%; animation: swiper-preloader-spin 1s infinite linear; box-sizing: border-box; border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color)); border-radius: 50%; border-top-color: transparent; } .swiper-lazy-preloader-white { --swiper-preloader-color: #fff; } .swiper-lazy-preloader-black { --swiper-preloader-color: #000; } @keyframes swiper-preloader-spin { 100% { transform: rotate(360deg); } } /* a11y */ .swiper-container .swiper-notification { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000; } .swiper-container-fade.swiper-container-free-mode .swiper-slide { transition-timing-function: ease-out; } .swiper-container-fade .swiper-slide { pointer-events: none; transition-property: opacity; } .swiper-container-fade .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-fade .swiper-slide-active, .swiper-container-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-cube { overflow: visible; } .swiper-container-cube .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; visibility: hidden; transform-origin: 0 0; width: 100%; height: 100%; } .swiper-container-cube .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-cube.swiper-container-rtl .swiper-slide { transform-origin: 100% 0; } .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-next, .swiper-container-cube .swiper-slide-prev, .swiper-container-cube .swiper-slide-next + .swiper-slide { pointer-events: auto; visibility: visible; } .swiper-container-cube .swiper-slide-shadow-top, .swiper-container-cube .swiper-slide-shadow-bottom, .swiper-container-cube .swiper-slide-shadow-left, .swiper-container-cube .swiper-slide-shadow-right { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .swiper-container-cube .swiper-cube-shadow { position: absolute; left: 0; bottom: 0px; width: 100%; height: 100%; background: #000; opacity: 0.6; -webkit-filter: blur(50px); filter: blur(50px); z-index: 0; } .swiper-container-flip { overflow: visible; } .swiper-container-flip .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; } .swiper-container-flip .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-flip .swiper-slide-active, .swiper-container-flip .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-flip .swiper-slide-shadow-top, .swiper-container-flip .swiper-slide-shadow-bottom, .swiper-container-flip .swiper-slide-shadow-left, .swiper-container-flip .swiper-slide-shadow-right { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } /*-------------------------------------------------- UBIQ SWIPER SLIDER ---------------------------------------------------*/ /** * 4. Home Slider */ .home-slider { padding-top: 0 !important; } .swiper-container { width: 100%; height: 100%; } .swiper-slide { overflow: hidden; } .swiper-slide-duplicate-active .overlay, .swiper-slide-active .overlay { opacity: .4; } .slide-inner { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: #000; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .slide-inner--image { position: absolute; width: 100%; height: 100%; background-size: cover; background-position: center; opacity: .2; transform: scale(1.07); -moz-transform: scale(1.07); -webkit-transition: opacity .6s ease-in-out, transform 2s ease .7s; -moz-transition: opacity .6s ease-in-out, transform 2s ease .7s; transition: opacity .6s ease-in-out, transform 2s ease .7s; filter: grayscale(40%); } .slide-inner--video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .slide-inner--video video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } @-moz-document url-prefix() { @media screen and (min-width: 2000px) and (orientation: landscape) { .slide-inner--image { background-size: 100%; /* Prozent anstatt Cover wegen Firefox Widescreen Problem analog Reussdelta */ } } } .swiper-slide-duplicate-active .slide-inner--image, .swiper-slide-active .slide-inner--image { opacity: 1; transform: scale(1); -moz-transform: scale(1); } /* 4.1 Slider navigation buttons */ .swiper-button-next, .swiper-button-prev { position: relative; width: 45px; height: 25px; background-size: 45px 25px; top: auto; } .swiper-button-next.swiper-button-white, .swiper-container-rtl .swiper-button-prev.swiper-button-white { background-image: url(../images/arrow.svg); } .swiper-button-prev.swiper-button-white, .swiper-container-rtl .swiper-button-next.swiper-button-white { background-image: url(../images/arrow.svg); } /* .swiper-button-prev, .swiper-button-next { text-transform: uppercase; color: #fff; letter-spacing: .2em; line-height: 2em; font-size: 12px; width: auto; height: 24px; background-image: none !important; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .swiper-button-prev { padding-left: 6em; left: 0; -webkit-transition: padding-left .3s ease; -moz-transition: padding-left .3s ease; transition: padding-left .3s ease; } .swiper-button-next { padding-right: 6em; right: 0; -webkit-transition: padding-right .3s ease; -moz-transition: padding-right .3s ease; transition: padding-right .3s ease; } .swiper-button-prev::after { content: ""; width: 4em; height: 1px; background-color: #fff; position: absolute; left: 0; top: calc(50% - 1px); -webkit-transition: width .3s ease; -moz-transition: width .3s ease; transition: width .3s ease; } .swiper-button-next::after { content: ""; width: 4em; height: 1px; background-color: #fff; position: absolute; right: 0; top: calc(50% - 1px); -webkit-transition: width .3s ease; -moz-transition: width .3s ease; transition: width .3s ease; } .swiper-button-prev:hover { padding-left: 90px; } .swiper-button-prev:hover::after { width: 75px; } .swiper-button-next:hover { padding-right: 90px; } .swiper-button-next:hover::after { width: 75px; } */ /* 4.2 Slider inner info */ .slide-inner--info { position: absolute; bottom: 40%; z-index: 3; width: 40%; left: 10%; opacity: 0; transition: opacity 1s ease; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .swiper-slide-active .slide-inner--info { opacity: 1; transition: opacity 1s ease 1s; } .slide-inner--info h2 { color: var(--white); margin: 1rem 0 2rem; clear: both; } .slide-inner--info a.button { color: var(--white); } /* .slide-inner--info h1 { margin: 10px 0; text-transform: none; font-weight: 900; line-height: 1.5; color: #fff; font-size: 1.5rem; } .slide--info__link { text-transform: uppercase; color: #fff; text-decoration: none; border-bottom: solid 2px; } .swiper-slide--bottom { position: absolute; z-index: 2; bottom: 0; left: 0; right: 0; height: 90px; width: 100%; max-width: 1440px; margin: 0 auto; } */ /* 4.3 Pagination */ .expanded-timeline { position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: right; -ms-flex-pack: right; justify-content: right; z-index: 3; bottom: 2.8em; right: 3em; width: 40vh; } /*.swiper-pagination { z-index: 4; width: 85%; left: 0; right: 0; height: 1px; background-color: rgba(255, 255, 255, .5); } .swiper-pagination { position: absolute; bottom: 2em; left: 10%; width: auto !important; margin: 0; }*/ #slider .swiper-pagination-bullet { position: relative; padding: 5px 10px; border-radius: 0; width: auto; height: 30px; text-align: center; line-height: 30px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: #87949b; opacity: 1; background: transparent; transition: all ease 0.5s; } #slider .swiper-pagination-bullet-active { color: #fff; background: transparent; opacity: 1; } #slider .swiper-pagination-bullet:hover { color: #fff; } #slider .swiper-pagination-bullet:before { content: ""; position: absolute; left: 0; bottom: 0px; width: 0%; height: 1px; background-color: #fff; transition: all ease 0.5s; } #slider .swiper-pagination-bullet:hover:before { width: 100%; } #slider .swiper-pagination-bullet-active:before { content: ""; position: absolute; left: 0; bottom: 0px; width: 100%; height: 1px; background-color: #fff; transition: all ease 0.5s; } #slider .swiper-pagination-progressbar-fill { background: #fff !important; } .expanded-timeline__counter span { text-align: center; margin-left: 1.8em; margin-right: 100%; padding: .4em 0; color: #fff; display: block; } .scroll-message { position: absolute; right: 0; color: #fff; opacity: .5; font-size: 12px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; letter-spacing: .15em; } /*-------------------------------------------------- PARALLAX ---------------------------------------------------*/ .section-parallax { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: clamp(30em, 50vw, 50em); overflow: hidden; } .parallax-content { background-size: cover; position: relative; background-position: center; background-repeat: no-repeat; width: 100%; height: 120%; } #parallax p { position: absolute; color: #ffffff; font-size: 3vw; line-height: 1.2; top: 50%; transform: translate(0, -50%); } .parallax { position: relative; display: flex; float: left; width: 100%; justify-content: center; align-items: center; } .parallax_bg { position: relative; display: block; float: left; width: 100%; height: 100%; background-size: cover; background-position: center center; overflow: hidden; } /*-------------------------------------------------- AKKORDEON ---------------------------------------------------*/ .accordion { width: 100%; float: left; } .accordion__item { width: 100%; float: left; } .accordion__title { position: relative; padding: 0.75em; font-size: inherit; color: var(--brightblue); cursor: pointer; display: flex; justify-content: space-between; border-bottom: solid 1px var(--light-gray); color: var(--black); font-weight: bold; text-transform: uppercase; } .accordion__title:after { position: absolute; content: " "; right: 15px; background-image: url(../images/accordion-plus.svg); background-size: contain; background-repeat: no-repeat; top: 50%; transform: translate(0, -50%); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; width: clamp(15px, 2.4vw, 25px); height: clamp(15px, 2.4vw, 25px); } .is-open .accordion__title:after { transform: translate(0, -50%) rotate(180deg); background-image: url(../images/accordion-minus.svg); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .accordion__body { height: 0; overflow: hidden; transition: height 0.3s ease-in-out; } .accordion__body b { text-transform: uppercase; } .accordion__body .grid { column-gap: 2em; margin: 1em; margin-bottom: 2em; } .accordion__item.is-open { background-color: var(--white); } .accordion__content { padding: 15px; } .accordion__title p { white-space: nowrap; } /*-------------------------------------------------- TABS ---------------------------------------------------*/ .tab-control { position: relative; width: 100%; margin: 0 auto; border-radius: 25px; } ul.tabs { position: relative; margin: 0px; padding: 0px; list-style: none; z-index: 3; } ul.tabs li { background: none; color: var(--black); display: inline-block; padding: 20px 55px; cursor: pointer; margin: 0; font-size: 1rem; } ul.tabs li.current { background: var(--black); color: var(--white); } .tab-content { display: none; float: left; width: calc(90% - 30px); background: var(--white); color: var(--black); padding: 15px; } .tab-content.current { display: inherit; border: none; width: 90%; padding: 5%; border: solid 1px var(--black); } /*-------------------------------------------------- SIDENAV ---------------------------------------------------*/ .sidenav { position: fixed; z-index: 10; left: 3%; top: 50%; color: var(--red); font-weight: bold; text-transform: uppercase; font-size: 1rem; transform: rotate(270deg) translateY(50%) translateX(-50px); -ms-transform: rotate(270deg) translateY(50%) translateX(-50px); -webkit-transform: rotate(270deg) translateY(50%) translateX(-50px); transform-origin: top left; -webkit-transform-origin: top left; -ms-transform-origin: top left; display: none; opacity: 0; } .sidenav_title { position: absolute; left: 170px; white-space: nowrap; overflow: hidden; height: 25px; width: 250px; } .sidenav_title span { position: absolute; left: 0; } .lines { position: absolute; display: block; float: left; width: 162px; height: 1px; top: 12px; transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); } .line.inactive { position: absolute; float: left; right: 0; width: 50px; height: 1px; background-color: var(--light-gray); z-index: 1; } .line.active { position: absolute; float: left; right: 0; width: 50px; height: 1px; background-color: var(--red); z-index: 2; } .line.active.fachwissenknow-how, .line.inactive.fachwissenknow-how { right: 54px; } .line.active.grandcru, .line.inactive.grandcru { right: 108px; } /*-------------------------------------------------- SIDENAV PRODUKTE ---------------------------------------------------*/ .sidenav_produkte { position: fixed; z-index: 10; left: 3%; top: 50%; color: var(--red); font-weight: bold; text-transform: uppercase; font-size: 1rem; transform: rotate(270deg) translateY(50%) translateX(-50%); -ms-transform: rotate(270deg) translateY(50%) translateX(-50%); -webkit-transform: rotate(270deg) translateY(50%) translateX(-50%); transform-origin: top left; -webkit-transform-origin: top left; -ms-transform-origin: top left; } .sidenav_title_produkte { position: relative; white-space: nowrap; overflow: hidden; height: 25px; width: 250px; } .sidenav_title_produkte span { position: absolute; left: 0; } .lines_produkte { position: relative; display: block; float: left; width: auto; height: 1px; top: 12px; margin-right: 20px; transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); } .line_produkte { position: relative; float: left; right: 0; width: 20px; height: 2px; background-color: var(--gray); z-index: 1; margin-right: 2px; } .line_produkte_active { position: absolute; float: left; left: 0; top: 0; width: 20px; height: 2px; background-color: var(--red); z-index: 2; margin-right: 2px; } /*-------------------------------------------------- SWIPER ZEITSTRAHL ---------------------------------------------------*/ .swiper-section.zeitstrahl { align-items: flex-start; } .swiper-zeitstrahl { position: relative; margin: 0px; padding: 0px; list-style: none; z-index: 3; display: flex; flex-direction: row; margin-bottom: clamp(2em, 5vw, 5em); } .swiper-zeitstrahl .tab-link { background: none; color: var(--blue); display: inline-block; padding: 40px 0 0; cursor: pointer; margin: 0; font-weight: 700; text-align: center; flex: 1 1 0px; text-transform: uppercase; font-size: min(max(0.7rem, 0.9vw), 0.9rem); opacity: 1; } .swiper-zeitstrahl .tab-link:before { content: ''; position: absolute; width: 100%; background: var(--gray); height: 1px; top: 12px; left: 50%; } .swiper-zeitstrahl .tab-link:last-child:before { display: none; } .swiper-zeitstrahl .tab-dot { position: absolute; top: 0; left: 50%; transform: translate(-50%, 0); height: 28px; width: 28px; border: solid 1px var(--gray); border-radius: 50px; background-color: var(--white); display: flex; justify-content: center; align-items: center; text-align: center; overflow: hidden; cursor: pointer; } .swiper-zeitstrahl .current .tab-dot { background: var(--black); border-color: var(--black); } .swiper-zeitstrahl .tab-dot:before { content: ''; position: absolute; background: var(--black); opacity: 0; width: 0; height: 0; z-index: -1; border-radius: 28px; box-shadow: 0px 0px 24px 1px rgba(224,199,224,0.2); transition: all .35s ease-in-out; transition-timing-function: .35s ease-in-out; } .swiper-zeitstrahl .tab-link:hover .tab-dot:before, .swiper-zeitstrahl .tab-link.swiper-pagination-bullet-active .tab-dot:before { width: 100%; height: 100%; opacity: 1; } .swiper-zeitstrahl .tab-dot .arrow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 2px; height: 2px; } .swiper-zeitstrahl .tab-dot .arrow:before { position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; background: var(--black); -webkit-transition: -webkit-transform .6s cubic-bezier(0.305, 0.125, 0.185, 1.005); transition: -webkit-transform .6s cubic-bezier(0.305, 0.125, 0.185, 1.005); transition: transform .6s cubic-bezier(0.305, 0.125, 0.185, 1.005); transition: transform .6s cubic-bezier(0.305, 0.125, 0.185, 1.005), -webkit-transform .6s cubic-bezier(0.305, 0.125, 0.185, 1.005); } .swiper-zeitstrahl .tab-dot .arrow:after { position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; background: var(--white); transform: translateX(-20px); -webkit-transition: -webkit-transform .6s cubic-bezier(0.305, 0.125, 0.185, 1.005); transition: -webkit-transform .6s cubic-bezier(0.305, 0.125, 0.185, 1.005); transition: transform .6s cubic-bezier(0.305, 0.125, 0.185, 1.005); transition: transform .6s cubic-bezier(0.305, 0.125, 0.185, 1.005), -webkit-transform .6s cubic-bezier(0.305, 0.125, 0.185, 1.005); } .swiper-zeitstrahl span.tab-name { position: relative; margin-top: 2rem; float: left; left: 50%; transform: translate(-50%, 0); max-width: 50%; font-size: min(max(0.7rem, 0.9vw), 0.9rem); } .swiper-zeitstrahl .tab-link:hover .tab-dot .arrow:before, .swiper-zeitstrahl .tab-link.swiper-pagination-bullet-active .tab-dot .arrow:before { transform: translateX(20px); } .swiper-zeitstrahl .tab-link:hover .tab-dot .arrow:after, .swiper-zeitstrahl .tab-link.swiper-pagination-bullet-active .tab-dot .arrow:after { transform: translateX(0%); } /*-------------------------------------------------- SWIPER HORIZONTAL PARALLAX MATRIX SLIDER ---------------------------------------------------*/ .swiper-section.zeitstrahl { position: relative; display: flex; float: left; width: 100%; flex-direction: row; align-items: center; overflow: hidden; } /* RTL */ .swiper-section.rtl { flex-direction: row-reverse; } /* LTR */ /* SWIPER ab nr 10 aufwärts für Tab Slide */ .swiper-horizontal-parallax-1, .swiper-horizontal-parallax-3, .swiper-horizontal-parallax-5 { height: 35vw; min-height: 30rem; max-height: 40rem; height: clamp(30rem, 35vw, 40rem); width: calc(50% - clamp(2em, 5vw, 5em)); float: right; margin-left: clamp(2em, 5vw, 5em); } /* RTL */ .swiper-horizontal-parallax-2, .swiper-horizontal-parallax-4 { height: 35vw; min-height: 30rem; max-height: 40rem; height: clamp(30rem, 35vw, 40rem); width: calc(50% - clamp(2em, 5vw, 5em)); float: left; margin-right: clamp(2em, 5vw, 5em); } /* LTR */ .swiper5 { width: calc(50% - clamp(2em, 5vw, 5em)); float: left; margin-right: clamp(2em, 5vw, 5em); } /* RTL */ /* .swiper5, .swiper7 { width: calc(50% - clamp(2em, 5vw, 5em)); float: right; margin-left: clamp(2em, 5vw, 5em); } */ .swiper-horizontal-parallax-1 .swiper-scrollbar { display:none; } .swiper-horizontal-parallax-1 .img-content img { display:none; } .swiper-horizontal-parallax-1 .swiper-slide { overflow: hidden; backface-visibility:hidden; -webkit-backface-visibility:hidden; transform: scale(1.07); -moz-transform: scale(1.07); } .swiper-horizontal-parallax-1 .swiper-slide-active { transform: scale(1); -moz-transform: scale(1); z-index: 2; } .swiper-horizontal-parallax-1 .swiper-slide .img-content { position:absolute; top:0; left:0; width:100%; height:100%; background-position:center; background-size:cover; } .swiper5 .swiper-button-prev, .swiper5 .swiper-button-next { bottom: 0; top: auto; } .swiper5 .swiper-slide { padding-bottom: 2em; padding-right: 0.5em; } .swiper-button-prev-6, .swiper-button-next-6 { position: absolute; top: auto; bottom: 0; left: 0; right: auto; } /* Animation */ .swiper5 h3, .swiper5 h4 { text-overflow: ellipsis; overflow: hidden; -webkit-transform: translateY(30%); transform: translateY(30%); opacity: 0; -webkit-transition: opacity .5s, -webkit-transform .5s; transition: opacity .5s, -webkit-transform .5s; transition: transform .5s, opacity .5s; transition: transform .5s, opacity .5s, -webkit-transform .5s; will-change: transform, opacity; } .swiper5 p, .swiper5 ul, .swiper5 a { text-overflow: ellipsis; overflow: hidden; -webkit-transform: translateY(10%); transform: translateY(10%); opacity: 0; -webkit-transition: opacity .5s, -webkit-transform .5s; transition: opacity .5s, -webkit-transform .5s; transition: transform .5s, opacity .5s; transition: transform .5s, opacity .5s, -webkit-transform .5s; will-change: transform, opacity; } .swiper5 .swiper-slide-active h3, .swiper5 .swiper-slide-active h4 { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; -webkit-transition-delay: 1s; transition-delay: 1s; } .swiper5 .swiper-slide-active p, .swiper5 .swiper-slide-active ul, .swiper5 .swiper-slide-active a { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; -webkit-transition-delay: 1.2s; transition-delay: 1.2s; } .swiper-section.zeitstrahl .swiper-pagination-bullet { position: relative; width: 40px; height: 1px; display: inline-block; border-radius: 0; margin-right: 2px; background-color: var(--gray); opacity: 1; } .swiper-section.zeitstrahl .swiper-pagination-bullet-active { transition: all ease 1s; } .swiper-section.zeitstrahl .small-lines .swiper-pagination-bullet { width: 20px; } /* LTR */ .pagination-lines { position: absolute; right: calc(50% - 3vw); left: auto; bottom: 55px; transform: rotate(270deg) translate(100%, 0%); transform-origin: bottom right; } /* RTL */ .swiper-section.zeitstrahl.rtl .pagination-lines { right: calc(50% + 3vw); } /* LTR */ .pagination-numbers { position: absolute; right: calc(50% - 3vw); left: auto; transform: rotate(270deg) translate(100%, 0%); transform-origin: bottom right; width: auto; font-size: 0.8rem; font-weight: bold; } /* RTL */ .swiper-section.zeitstrahl.rtl .pagination-numbers { right: calc(50% + 2.5vw); } .pagination-numbers { margin-bottom: 0; } /* SWIPER PAGINATIONS */ .swiper-pagination-bullet i { position: absolute; bottom: 0; left: 0; z-index: 1; width: 100%; height: 1px; background-color: var(--mid-gray); } .swiper-pagination-bullet b { position: absolute; bottom: 0; left: 0; z-index: 2; width: 0%; height: 1px; background-color: var(--black); } .swiper-pagination-bullet-active { background-color: transparent; } .swiper-pagination-bullet-active b { animation-name: countingBar; animation-duration: 0.7s; animation-timing-function: ease-in; animation-iteration-count: 1; animation-direction: alternate; animation-fill-mode: forwards; } @keyframes countingBar { 0% { width: 0; } 100% { width: 100%; } } /*-------------------------------------------------- TAB AKKORDEON (RESPONSIVE) ---------------------------------------------------*/ .zeitstrahl-accordion { width: 100%; float: left; display: none; } .zeitstrahl-accordion__item { position: relative; display: block; width: 100%; float: left; padding-left: 30px; } .zeitstrahl-accordion__item:before { content: ''; position: absolute; width: 1px; background: var(--gray); height: 100%; top: 30px; left: 10px; } .zeitstrahl-accordion__item:last-child:before { display: none; } .zeitstrahl-accordion__item.is-open:last-child:before { display: block; } .zeitstrahl-accordion__title { position: relative; padding: 15px 15px; cursor: pointer; display: block; border-top: solid 1px var(--gray); } .zeitstrahl-accordion__title h2 { font-size: min(max(1rem, 1.4vw), 1.4rem); } .zeitstrahl-accordion__title h3 { font-size: min(max(0.9rem, 1.3vw), 1.3rem); } .is-open .zeitstrahl-accordion__title:after { transform: translate(0, -50%) rotate(180deg); background-image: url(../images/accordion-minus.svg); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .zeitstrahl-accordion__body { height: 0; overflow: hidden; transition: height 0.3s ease-in-out; } .zeitstrahl-accordion__body b { text-transform: uppercase; } .zeitstrahl-accordion__body .grid { column-gap: 2em; margin: 1em; margin-bottom: 2em; } .zeitstrahl-accordion__item.is-open { background-color: transparent; } .zeitstrahl-accordion__content, .zeitstrahl-accordion__image { padding: 0 15px; } .zeitstrahl-accordion__image img { height: clamp(15em, 20vw, 20em); width: 100%; object-fit: cover; } .zeitstrahl-accordion__title p { white-space: nowrap; } .zeitstrahl-accordion__title h3 span { color: burlywood; display: block; float: left; width: 100%; } .zeitstrahl-accordion__title .tab-dot { position: absolute; top: 0; left: -35px; transform: translate(-50%, 0%); height: 28px; width: 28px; border: solid 1px var(--gray); border-radius: 50px; background-color: var(--white); display: flex; justify-content: center; align-items: center; text-align: center; overflow: hidden; cursor: pointer; } .zeitstrahl-accordion__item.is-open .tab-dot { background: var(--darkblue); } .zeitstrahl-accordion__item.is-open .tab-dot .arrow:before { background: var(--white); } .zeitstrahl-accordion .tab-dot:before { content: ''; position: absolute; background: var(--darkblue); opacity: 0; width: 0; height: 0; z-index: -1; border-radius: 28px; box-shadow: 0px 0px 24px 1px rgba(224,199,224,0.2); transition: all .35s ease-in-out; transition-timing-function: .35s ease-in-out; } .zeitstrahl-accordion .tab-dot .arrow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 2px; height: 2px; } .zeitstrahl-accordion .tab-dot .arrow:before { position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; background: var(--black); -webkit-transition: -webkit-transform .6s cubic-bezier(0.305, 0.125, 0.185, 1.005); transition: -webkit-transform .6s cubic-bezier(0.305, 0.125, 0.185, 1.005); transition: transform .6s cubic-bezier(0.305, 0.125, 0.185, 1.005); transition: transform .6s cubic-bezier(0.305, 0.125, 0.185, 1.005), -webkit-transform .6s cubic-bezier(0.305, 0.125, 0.185, 1.005); } .zeitstrahl-accordion .tab-dot .arrow:after { position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; background: var(--white); transform: translateX(-20px); -webkit-transition: -webkit-transform .6s cubic-bezier(0.305, 0.125, 0.185, 1.005); transition: -webkit-transform .6s cubic-bezier(0.305, 0.125, 0.185, 1.005); transition: transform .6s cubic-bezier(0.305, 0.125, 0.185, 1.005); transition: transform .6s cubic-bezier(0.305, 0.125, 0.185, 1.005), -webkit-transform .6s cubic-bezier(0.305, 0.125, 0.185, 1.005); } .zeitstrahl-accordion__item.tabs .tab-link:last-child:before { display: none; } /* RESPONSIVE */ @media screen and (max-width : 900px) { .swiper-zeitstrahl, .swiper-section.zeitstrahl { display: none; } .zeitstrahl-accordion { display: block; } } /*------------------------------------------------------------------------------------------------------------------------------------------------------ END COMPONENTS -------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------- TYPOGRAFIE ---------------------------------------------------*/ p { margin: 8px 0; font-size: min(max(0.9rem, 1vw), 1rem); line-height: 2; -moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; -webkit-text-size-adjust: 100%; color: var(--blue); } a { color: var(--red); cursor: pointer; font-weight: normal; transition: all ease .3s; text-decoration: none; } a:hover { text-decoration: none; color: var(--blue); } ul { display: block; list-style-type: disc; margin-block-start: 0; margin-block-end: 0; margin-inline-start: 0px; margin-inline-end: 0px; padding-inline-start: 0; list-style-position: inside; } li { -webkit-text-size-adjust: 100%; color: var(--blue); } strong { font-weight: 700; } h1 { color: var(--black); font-size: min(max(1.5rem, 2.5vw), 3rem); line-height: 1.25; font-weight: normal; -moz-hyphens: none; -o-hyphens: none; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; font-family: var(--title-font); margin-block-start: 0em; margin-block-end: 0em; } h2 { color: var(--black); font-weight: 600; font-size: min(max(1.3rem, 2.5vw), 2.5rem); line-height: 1.25; margin-block-start: 0; margin-block-end: 0; } h2.one-line:first-line { font-weight: 600; } h3 { color: var(--black); font-size: min(max(1.25rem, 1.5vw), 1.5rem); line-height: 1.25; font-weight: normal; text-transform: normal; font-family: var(--title-font); margin-block-start: 0em; margin-block-end: 0em; } h4 { color: var(--black); font-weight: normal; text-transform: uppercase; letter-spacing: clamp(3px, 1vw, 6px); margin-block-start: 0; margin-block-end: 0; font-size: min(max(0.8rem, 1.1vw), 1.2rem); font-weight: 200; } h5 { color: var(--black); font-size: min(max(1.1rem, 1.25vw), 1.25rem); letter-spacing: 0; font-weight: 600; line-height: 1.2; margin-block-start: 0; margin-block-end: 0; font-family: var(--title-font); } a.button, .button { position: relative; font-family: var(--common-font); color: var(--blue); font-size: min(max(0.7rem, 0.8vw), 0.9rem); line-height: 1.5; transition: all ease 0.3s; text-decoration: none; padding: 0.5rem clamp(1rem, 2vw, 2rem); border: 1px solid var(--red); text-align: center; border-radius: 20px; font-weight: 500; white-space: nowrap; hyphens: none; } a.button:hover, .button:hover { color: var(--white); background: var(--red); } a.button.white { background: var(--white); color: var(--blue); border-color: var(--white); } a.button.white:hover { background: var(--red); color: var(--white); border-color: var(--red); } a.button.dark { background: var(--blue); color: var(--white); border-color: var(--blue); } a.button.dark:hover { background: transparent; color: var(--blue); } a.button.dark:hover::before { filter: invert(1); } .buttons { position: relative; display: block; float: left; width: 100%; } .button.goback { display: none; } .button.back, a.button.back { padding-right: 0; padding-left: 2rem; } a.button.back:after, .button.back:after { background-image: url('/static/images/arrow-back.svg'); right: auto; left: 0; } a.lightbox-button { position: absolute; right: 5%; bottom: 5%; width: clamp(2rem, 2.5vw, 2.5rem); } a.button.pdf, a.button.extern { padding: 0.5rem 4rem 0.5rem 2rem; } .buttons .button { margin-right: 1rem; } a.button.pdf::before { position: absolute; content: ''; width: 1rem; height: 1rem; right: 2rem; top: 50%; transform: translate(0, -50%); background-image: url('/static/images/download.svg'); background-size: contain; background-position: center; background-repeat: no-repeat; transition: 0.5s all ease; } a.button.extern::before { position: absolute; content: ''; width: 1rem; height: 1rem; right: 2rem; top: 50%; transform: translate(0, -50%); background-image: url('/static/images/link.svg'); background-size: contain; background-position: center; background-repeat: no-repeat; transition: 0.5s all ease; } a.button.pdf:hover::before, a.button.exter:hover::before { filter: invert(100%) brightness(130%) contrast(120%); } .buttons .button { margin-right: 1rem; white-space: nowrap; hyphens: none; float: left; margin-bottom: 1rem; } a.video-button { position: absolute; bottom: 5%; right: 5%; color: var(--white); z-index: 999; padding-bottom: 0.5rem; border-bottom: 2px solid var(--white); font-weight: 600; } a.video-button::before { position: absolute; content: ''; left: -2.5rem; width: 1.5rem; height: 1.5rem; background-image: url('/static/images/play.svg'); background-size: contain; background-position: center; background-repeat: no-repeat; top: 0.5rem; } .subnav-button { float: left; margin: 1.5vh 0 2vh 0.75rem; padding: 0 50px 0 0; font-size: 0.8rem; letter-spacing: 1px; font-weight: normal; color: var(--black); white-space: pre-wrap; word-break: keep-all; hyphens: none; } a.subnav-button:hover { color: var(--black); } .subnav-button .btn.felchlin { position: absolute; right: 40px; top: 50%; width: 32px; height: 32px; transform: translate(40px, -50%); } li.sub_li:hover .btn.felchlin:before { width: 100%; height: 100%; opacity: 1; } li.sub_li:hover .btn.felchlin .arrow:before { transform: translateX(200%); } li.sub_li:hover .btn.felchlin .arrow:after { transform: translateX(0%); } .button.mobile { display: none; } /*-------------------------------------------------- ANIMATIONEN ---------------------------------------------------*/ .transition-fade { transition: 0.4s; opacity: 1; height: 100%; } html.is-animating .transition-fade { opacity: 0; } .swup-overlay { position: fixed; top: 0; left: 0; z-index: 1112; background: var(--blue); width: 100%; height: 100%; -webkit-transform: translateX(-130%) skew(-10deg); -ms-transform: translateX(-130%) skew(-10deg); transform: translateX(-130%) skew(-10deg); } .swuplogo { position: absolute; top: 50%; left: 50%; width: clamp(9em, 20vw, 25em); height: clamp(7em, 16vw, 20em); transform: translate(-50%, -50%); } .swuplogo svg { position: absolute; display: block; z-index: 2; } .swup-opacity { position: fixed; top: 0; left: 0; z-index: 1111; background: var(--blue); width: 100%; height: 100%; opacity: 0; visibility: hidden; } .rvb, .rvt, .rvl, .rvr, .rvSlow, .rvlSlow, .rvrSlow, .rvbSlow, .rvtSlow, .imgRV { will-change: transform; } .split_outer {overflow: hidden;} .split_inner {display: inline-block;} figure.has-parallax { overflow: hidden; max-height: 45vw; } .imgreveal, .imgreveal_rtl { visibility: hidden; position: relative; width: 100%; height: 100%; overflow: hidden; max-width: clamp(20rem, 30vw, 40rem); } .auflistung-detail h3 { margin-top:0px; line-height:1.2; overflow:hidden; } .split-line { overflow: hidden; } /*-------------------------------------------------- SMOOTH SCROLL ---------------------------------------------------*/ body.smooth-scroll { overflow:hidden; } .smooth-scroll .content-scroll { position: fixed; top: 0; right: 0; bottom: 0; left: 0; } .scroll-content, main { height: 100vh; } .scrollbar-track { background: transparent!important; } /*------------------------------------------------------------------------------------------------------------------------------------------------------ INDIVIDUAL STYLE -------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*-------------------------------------------------- SLIDER ---------------------------------------------------*/ #slider { position: relative; width: 100%; height: 100vh; height: calc(var(--vh, 1vh) * 100); background-color: var(--black); } .swiper-button-prev:after, .swiper-button-next:after { content: '' !important; background-image: url(/static/images/arrow-right.svg); background-size: contain; background-repeat: no-repeat; background-position: center; width: 30px; height: 15px; top: 50%; left: 50%; position: absolute; transform: translate(-50%, -50%) rotate(0deg); } .swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after { content: 'prev'; transform: translate(-50%, -50%) rotate(180deg); } #slider .swiper-button-prev, .swiper2 .swiper-button-prev { background: var(--white); border-radius: 50%; height: 33px; width: 33px; right: auto; left: auto; margin-top: 0; } #slider .swiper-button-next, .swiper2 .swiper-button-next { margin-left: 20px; background: var(--white); border-radius: 50%; height: 33px; width: 33px; right: auto; left: auto; margin-top: 0; } .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets { bottom: 0; left: 0; width: 100%; } #slider .swiper-pagination { position: absolute; display: flex; align-items: center; font-size: 0.7rem; color: var(--white); font-weight: bold; text-transform: uppercase; line-height: 1; width: auto; height: auto; hyphens: none; white-space: nowrap; left: auto; right: -80px; top: 50%; transform: translateY(-50%); z-index: 2; } #slider .swiper-pagination .slices { float: left; margin-top: 0; margin-right: 4px; } #slider .swiper-pagination .totals { position: relative; float: right; } #slider .swiper-pagination-4 .slices { float: left; margin-top: 0; margin-right: 4px; } #slider .swiper-pagination-4 .totals { position: relative; float: right; } .slogan { color: var(--white); position: absolute; left: 6em; bottom: 9em; z-index: 3; font-family: var(--semi-font); font-size: min(max(1.4rem, 1.8vw), 1.8rem); width: clamp(17em, 17vw, 10em); hyphens: none; } img.mouse { position: absolute; bottom: 3em; left: 3em; width: 1em; z-index: 2; } .overlay-left { position: absolute; left: 0; top: 0; width: 60%; height: 100%; z-index: 1; opacity: 1; /*mix-blend-mode: multiply;*/ background: -moz-linear-gradient(left, rgba(55,68,72,1) 0%, rgba(55,68,72,0) 100%); background: -webkit-linear-gradient(left, rgba(55,68,72,1) 0%,rgba(55,68,72,0) 100%); background: linear-gradient(to right, rgba(55,68,72,1) 0%,rgba(55,68,72,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#374448', endColorstr='#00374448',GradientType=1 ); } .overlay-right { position: absolute; right: 0; top: 0; width: 40%; height: 100%; z-index: 1; opacity: 0.7; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#364448+0,000000+100&0+0,1+100 */ background: -moz-linear-gradient(left, rgba(54,68,72,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(54,68,72,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(54,68,72,0) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00364448', endColorstr='#000000',GradientType=1 ); /* IE6-9 */ } .overlay-top { position: absolute; left: 0; top: 0; height: 50%; width: 100%; background: -moz-linear-gradient(top, rgba(55,68,72,1) 0%, rgba(55,68,72,0) 100%); background: -webkit-linear-gradient(top, rgba(55,68,72,1) 0%,rgba(55,68,72,0) 100%); background: linear-gradient(to bottom, rgba(55,68,72,1) 0%,rgba(55,68,72,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#374448', endColorstr='#00374448',GradientType=0 ); z-index: 3; opacity: 0.8; } .slider-buttons { position: absolute; display: flex; bottom: 38%; left: 10%; margin-bottom: -4em; z-index: 2; } /*-------------------------------------------------- SWIPER HORIZONTAL PARALLAX MATRIX SLIDER ---------------------------------------------------*/ .swiper-section { position: relative; display: flex; float: left; width: 100%; flex-direction: row; align-items: center; overflow: hidden; } /* RTL */ .swiper-section.rtl { flex-direction: row-reverse; } /* LTR */ /* SWIPER ab nr 10 aufwärts für Tab Slide */ .swiper-horizontal-parallax-1, .swiper-horizontal-parallax-3, .swiper-horizontal-parallax-5, .swiper-horizontal-parallax-10 { height: 35vw; min-height: 20rem; max-height: 40rem; height: clamp(20rem, 25vw, 25rem); width: calc(40% - clamp(2em, 5vw, 5em)); float: right; margin-left: clamp(2em, 5vw, 5em); } /* RTL */ .swiper-horizontal-parallax-2, .swiper-horizontal-parallax-4 { height: 35vw; min-height: 30rem; max-height: 40rem; height: clamp(30rem, 35vw, 40rem); width: calc(50% - clamp(2em, 5vw, 5em)); float: left; margin-right: clamp(2em, 5vw, 5em); } /* LTR */ /* SWIPER ab nr 21 aufwärts für Tab Slide */ /* .swiper4, */ .swiper6, .swiper8, .swiper21 { width: calc(50% - clamp(2em, 5vw, 5em)); float: left; margin-right: clamp(2em, 5vw, 5em); } /* RTL */ .swiper5, .swiper7 { width: calc(50% - clamp(2em, 5vw, 5em)); float: right; margin-left: clamp(2em, 5vw, 5em); } .swiper-horizontal-parallax-1 .swiper-scrollbar, .swiper-horizontal-parallax-2 .swiper-scrollbar, .swiper-horizontal-parallax-3 .swiper-scrollbar, .swiper-horizontal-parallax-4 .swiper-scrollbar, .swiper-horizontal-parallax-5 .swiper-scrollbar, .swiper-horizontal-parallax-10 .swiper-scrollbar { display:none; } .swiper-horizontal-parallax-1 .img-content img, .swiper-horizontal-parallax-2 .img-content img, .swiper-horizontal-parallax-3 .img-content img, .swiper-horizontal-parallax-4 .img-content img, .swiper-horizontal-parallax-5 .img-content img, .swiper-horizontal-parallax-10 .img-content img { display:none; } .swiper-horizontal-parallax-1 .swiper-slide, .swiper-horizontal-parallax-2 .swiper-slide, .swiper-horizontal-parallax-3 .swiper-slide, .swiper-horizontal-parallax-4 .swiper-slide, .swiper-horizontal-parallax-5 .swiper-slide, .swiper-horizontal-parallax-10 .swiper-slide { overflow: hidden; backface-visibility:hidden; -webkit-backface-visibility:hidden; transform: scale(1.07); -moz-transform: scale(1.07); } .swiper-horizontal-parallax-1 .swiper-slide-active, .swiper-horizontal-parallax-2 .swiper-slide-active, .swiper-horizontal-parallax-3 .swiper-slide-active, .swiper-horizontal-parallax-4 .swiper-slide-active, .swiper-horizontal-parallax-5 .swiper-slide-active, .swiper-horizontal-parallax-10 .swiper-slide-active { transform: scale(1); -moz-transform: scale(1); z-index: 2; } .swiper-horizontal-parallax-1 .swiper-slide .img-content, .swiper-horizontal-parallax-2 .swiper-slide .img-content, .swiper-horizontal-parallax-3 .swiper-slide .img-content, .swiper-horizontal-parallax-4 .swiper-slide .img-content, .swiper-horizontal-parallax-5 .swiper-slide .img-content, .swiper-horizontal-parallax-10 .swiper-slide .img-content { position:absolute; top:0; left:0; width:100%; height:100%; background-position:center; background-size:cover; } .swiper4 .swiper-button-prev, .swiper4 .swiper-button-next, .swiper5 .swiper-button-prev, .swiper5 .swiper-button-next, .swiper6 .swiper-button-prev, .swiper6 .swiper-button-next, .swiper7 .swiper-button-prev, .swiper7 .swiper-button-next, .swiper8 .swiper-button-prev, .swiper8 .swiper-button-next { bottom: 0; top: auto; } .swiper4 .swiper-slide, .swiper5 .swiper-slide, .swiper6 .swiper-slide, .swiper7 .swiper-slide, .swiper8 .swiper-slide, .swiper21 .swiper-slide { padding-bottom: 2em; padding-right: 0.5em; } .swiper-button-prev-4, .swiper-button-next-4 { position: absolute; top: auto; bottom: 0; left: auto; right: 50%; } /* Animation */ .swiper4 h4, .swiper5 h4, .swiper6 h4, .swiper7 h4, .swiper8 h4 { text-overflow: ellipsis; overflow: hidden; -webkit-transform: translateY(30%); transform: translateY(30%); opacity: 0; -webkit-transition: opacity .5s, -webkit-transform .5s; transition: opacity .5s, -webkit-transform .5s; transition: transform .5s, opacity .5s; transition: transform .5s, opacity .5s, -webkit-transform .5s; will-change: transform, opacity; } .swiper4 p, .swiper5 p, .swiper6 p, .swiper7 p, .swiper8 p, .swiper4 ul, .swiper5 ul, .swiper6 ul, .swiper7 ul, .swiper8 ul { text-overflow: ellipsis; overflow: hidden; -webkit-transform: translateY(10%); transform: translateY(10%); opacity: 0; -webkit-transition: opacity .5s, -webkit-transform .5s; transition: opacity .5s, -webkit-transform .5s; transition: transform .5s, opacity .5s; transition: transform .5s, opacity .5s, -webkit-transform .5s; will-change: transform, opacity; } .swiper4 .swiper-slide-active h4, .swiper5 .swiper-slide-active h4, .swiper6 .swiper-slide-active h4, .swiper7 .swiper-slide-active h4, .swiper8 .swiper-slide-active h4 { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; -webkit-transition-delay: 1s; transition-delay: 1s; } .swiper4 .swiper-slide-active p, .swiper5 .swiper-slide-active p, .swiper6 .swiper-slide-active p, .swiper7 .swiper-slide-active p, .swiper8 .swiper-slide-active p, .swiper4 .swiper-slide-active ul, .swiper5 .swiper-slide-active ul, .swiper6 .swiper-slide-active ul, .swiper7 .swiper-slide-active ul, .swiper8 .swiper-slide-active ul { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; -webkit-transition-delay: 1.2s; transition-delay: 1.2s; } .swiper-section .swiper-pagination-bullet { position: relative; width: 40px; height: 1px; display: inline-block; border-radius: 0; margin-right: 2px; background-color: var(--nav-gray); opacity: 1; } .swiper-section .swiper-pagination-bullet-active { transition: all ease 1s; } .swiper-section .small-lines .swiper-pagination-bullet { width: 20px; } /* LTR */ .pagination-lines { position: absolute; right: calc(50% - 3vw); left: auto; bottom: 55px; transform: rotate(270deg) translate(100%, 0%); transform-origin: bottom right; } /* RTL */ .swiper-section.rtl .pagination-lines { right: calc(50% + 3vw); } /* LTR */ .pagination-numbers { position: absolute; right: calc(50% - 3vw); left: auto; transform: rotate(270deg) translate(100%, 0%); transform-origin: bottom right; width: auto; font-size: 0.8rem; font-weight: bold; } /* RTL */ .swiper-section.rtl .pagination-numbers { right: calc(50% + 2.5vw); } .pagination-numbers { margin-bottom: 0; } /* SWIPER PAGINATIONS */ .swiper-pagination-bullet i { position: absolute; bottom: 0; left: 0; z-index: 1; width: 100%; height: 1px; background-color: var(--mid-gray); } .swiper-pagination-bullet b { position: absolute; bottom: 0; left: 0; z-index: 2; width: 0%; height: 1px; background-color: var(--black); } .swiper-pagination-bullet-active { background-color: var(--red); } .swiper-pagination-bullet-active b { animation-name: countingBar; animation-duration: 0.7s; animation-timing-function: ease-in; animation-iteration-count: 1; animation-direction: alternate; animation-fill-mode: forwards; } @keyframes countingBar { 0% { width: 0; } 100% { width: 100%; } } /*-------------------------------------------------- HOME ---------------------------------------------------*/ .bubble { position: relative; float: left; clear: both; background: var(--red); color: var(--white); border-radius: 20px; padding: 6px 12px; line-height: 1; margin-bottom: 1rem; font-size: min(max(0.8em, 0.9vw), 0.9rem); } .dot-overlay { user-select: none; pointer-events: none; position: absolute; width: 100%; height: 100%; top: 0; right: 0; z-index: 1; background-image: radial-gradient(black 1px, transparent 0px); background-size: 3px 3px; background-repeat: repeat; background-position: center center; opacity: 0.15; } #navigationwrap_mobile .dot-overlay { opacity: 0.04; } .image-dotted { position: relative; float: left; width: 100%; } .image-dotted::before { content: ""; position: absolute; width: 100%; height: 100%; top: -4rem; left: -4rem; background: radial-gradient(var(--red), 0.5px, transparent 0.5px), radial-gradient(var(--red), 0.5px, transparent 0.5px), linear-gradient(transparent 0.5px, transparent 0) transparent; background-size: 8px 8px; background-position: top left; z-index: -1; } .fab { display: flex; justify-content: center; align-items: center; position: fixed; transition: background-color 0.5s; transition-delay: 0.3s; z-index: 1111; right: 5%; bottom: 5%; } .fab li { list-style-type: none; opacity: 0; } .fab li.active { opacity: 1; } .ring { position: absolute; background-color: var(--red); height: 80%; width: 80%; border-radius: 100%; opacity: 0.3; -webkit-animation: pulsing 7s ease-in-out infinite; animation: pulsing 7s ease-in-out infinite; } .ring:nth-of-type(1) { opacity: 0.4; -webkit-animation-delay: -0.2s; animation-delay: -0.2s; } .ring:nth-of-type(2) { opacity: 0.5; -webkit-animation-delay: -0.4s; animation-delay: -0.4s; } .ring:nth-of-type(3) { opacity: 0.6; -webkit-animation-delay: -0.6s; animation-delay: -0.6s; } @-webkit-keyframes pulsing { 20%, 100% { transform: scale(1.55); opacity: 0; } 0% { transform: scale(1); } } @keyframes move { 20%, 100% { opacity: 0; transform: translate(200px, 0); } 0% { opacity: 0; } 10% { opacity: 1; } } .ion-icon { background-color: white; width: 2rem; height: 2rem; padding: 0.5rem; font-size: 1rem; border-radius: 50%; transition: background-color 250ms linear; -webkit-box-shadow: 0px 0px 16px -3px #000000; box-shadow: 0px 0px 16px -3px #000000; } .fab .toggle { transition: transform 0.35s linear, background-color 250ms linear; display: flex; justify-content: center; align-items: center; z-index: 1000; cursor: pointer; } .toggle.nav::before { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--red); opacity: 0.5; height: clamp(2em, 4vw, 4em); width: clamp(2em, 4vw, 4em); border-radius: 50%; content: ''; transition: 0.5s all ease; } .toggle.nav:hover::before { height: clamp(4em, 6vw, 6em); width: clamp(4em, 6vw, 6em); } .fab .toggle ion-icon { width: 3.5rem; height: 3.5rem; } .fab .toggle.active { transform: rotate(360deg); } .fab img { height: clamp(4em, 6vw, 6em); width: clamp(4em, 6vw, 6em); transform: scale(1); transition: 0.2s all ease; } .toggle.nav:hover img { transform: scale(1.1); } .fab .icon { position: absolute; transition: 0.35s ease-out; transform-origin: 125px; transform: rotate(0deg) translateX(125px) translateX(-50%); left: -100%; transition-delay: calc(var(--i) * 0.1s); } /* .fab .icon.active { transform: rotate(calc(var(--i) * 45deg)); } */ li#hotline.active { transform: translate(30px, -95px); } #hotline::before { content: ''; position: absolute; left: 12px; height: 0.9rem; width: 0.9rem; background-image: url('/static/images/hotline.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; top: 50%; transform: translate(0, -50%); } a.phonenumber { position: absolute; display: none; background: var(--red); color: var(--white) !important; padding: 5px 10px; border-radius: 30px; right: 0; top: -30px; transform: translateY(10px); opacity: 0; transition: all ease 0.3s; } a.phonenumber.open { display: block; opacity: 1; transform: translateY(0px); transition: all ease 0.3s; } li#helpdesk.active { transform: translate(-30px, -50px); } #helpdesk::before { content: ''; position: absolute; left: 12px; height: 0.9rem; width: 0.9rem; background-image: url('/static/images/helpdesk.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; top: 50%; transform: translate(0, -50%); } li#grundkurse.active { transform: translate(-70px, -5px); } #grundkurse::before { content: ''; position: absolute; left: 12px; height: 0.9rem; width: 0.9rem; background-image: url('/static/images/grundkurse.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; top: 50%; transform: translate(0, -50%); } li#testversion.active { transform: translate(-55px, 40px); } #testversion::before { content: ''; position: absolute; left: 12px; height: 0.9rem; width: 0.9rem; background-image: url('/static/images/testversion.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; top: 50%; transform: translate(0, -50%); } .fab li a { text-decoration: none!important; color: var(--blue); font-size: min(max(0.5rem, 0.7vw), 0.7rem); text-transform: uppercase; font-weight: 600; border: none!important; line-height: 1!important; } .fab .icon { background: var(--gray); border-radius: 20px; padding: 6px 12px 6px 34px; line-height: 1; white-space: nowrap; -webkit-box-shadow: -2px -2px 15px 0px rgba(0,0,0,0.1); box-shadow: -2px -2px 15px 0px rgba(0,0,0,0.1); } .fab .icon ion-icon { transition: 0.75s, background-color 200ms ease-in; transition-delay: rotate calc(var(--i) * 0.1s); } .fab .icon.active ion-icon { transform: rotate(calc(var(--i) * -45deg)); z-index: 1001; } .fab .toggle ion-icon:hover { background-color: rgb(206, 89, 206); } .fab .icon.active ion-icon:hover { background-color: rgb(206, 89, 206); } .text ul li { list-style-type: none; -webkit-text-size-adjust: 100%; list-style-position: outside; list-style-image: none; margin-left: 10px; text-indent: -10px; } .text ul li:before { content: '- '; text-indent: -5px; } .trainingscenter p, .trainingscenter li { font-size: min(max(0.8rem, 0.9vw), 0.9rem); } .bg-gray { background: var(--gray); } .bg-blue { background: var(--blue); color: var(--white); } .bg-blue p { color: var(--white); } .bg-white { background: var(--white); } .bg-blue h5 { color: var(--white); } .logo-mastercam { max-width: 12em; } .kurse .grid.cols-2 { grid-template-columns: minmax(8em, max-content); } ul.kurse { position: relative; float: left; width: 100%; list-style-type: none; } .kurse li { border-bottom: 1px solid var(--white); width: 100%; position: relative; float: left; padding: 0.75rem 0; } span.neu { position: relative; margin-left: 1rem; background: var(--red); color: var(--white); border-radius: 20px; padding: 2px 5px; font-size: 0.55rem; text-transform: uppercase; font-weight: 800; } .grid.dienstleistungen { grid-template-columns: 1fr 1fr; } img.dienstleistung-icon { width: clamp(8rem, 16vw, 16rem); height: clamp(4rem, 8vw, 8rem); object-fit: contain; object-position: left; } .dienstleistungen-section { overflow: hidden; } .swiper3 .swiper-wrapper { width: clamp(15em, 20vw, 20em); } .swiper3 .swiper-slide:not(.swiper-slide-active){ opacity: 0 !important; } .swiss-map { position: absolute; float: left; width: clamp(43rem, 50vw, 65rem); right: -12rem; } .swiss-map-overlay { position: absolute; width: 100%; height: 50%; left: 0; bottom: 0; background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); z-index: 0; } .count { font-size: min(max(1.5rem, 2.5vw), 2.5rem); color: var(--red); font-weight: bold; line-height: 1; } .count::before { content: '+'; position: absolute; left: -2rem; font-size: 2rem; font-weight: normal; } .bg-blue h1 { color: var(--white); } .kompetenzzentrum p, .kompetenzzentrum h1 { color: var(--white); } .kompetenzzentrum { background-size: cover; background-position: center; background-repeat: no-repeat; overflow: visible; } .kompetenzzentrum-bild { margin-top: -2rem; width: 95%; margin-right: 5%; float: left; z-index: 2; } .kompetenzzentrum-bild .overlay { transition: all ease 1.7s; } .kompetenzzentrum-bild:hover .overlay { opacity: 0; } .kompetenzzentrum-bild img { float: left; } .kompetenzzentrum-text { position: relative; z-index: 2; float: left; width: 90%; margin-right: 5%; } .swiper2 { display: none; } .swiper2 .swiper-slide.swiper-slide-active { opacity: 1; } .swiper2 .swiper-slide { opacity: 0.5; transition: opacity 0.5s; } .swiper2 .swiper-buttons { position: absolute; left: 5%; top: 30vw; width: 95%; } .swiper2 .swiper-button-next { position: absolute; top: 0; right: 5%; margin-left: 0; } .swiper2 .swiper-button-prev.swiper-button-disabled, .swiper2 .swiper-button-next.swiper-button-disabled { opacity: 0; } .inside { column-count: 4; } figure { margin: 0; display: grid; grid-template-rows: 1fr auto; margin-bottom: 10px; break-inside: avoid; } figure > img { grid-row: 1 / -1; grid-column: 1; } figure a { color: black; text-decoration: none; } figcaption { grid-row: 2; grid-column: 1; background-color: rgba(255,255,255,.5); padding: .2em .5em; justify-self: start; } .inside-content { position: relative; float: left; width: 100%; background: var(--white); } .inside-content p { color: var(--blue); } img.inside-bg { margin: 0; float: left; } .inside-datum { font-size: min(max(0.7rem, 0.9vw), 0.9rem); color: var(--red); font-weight: 600; } img.inside-icon { position: absolute; left: 50%; width: clamp(2rem, 2.5vw, 2.5rem); height: clamp(2rem, 2.5vw, 2.5rem); object-fit: contain; top: 0; transform: translate(-50%, -50%); } img.kompetenzzentrum-logo { position: absolute; width: clamp(5rem, 15vw, 15rem); top: clamp(1rem, 3vw, 3rem); right: clamp(1rem, 3vw, 3rem); z-index: 4; } .kompetenzzentrum-bild::after { content: ''; position: absolute; width: clamp(3rem, 10vw, 10rem); height: clamp(7rem, 18vw, 18rem); right: 0; top: 50%; transform: translate(50%, -50%); background-image: url('/static/images/image-dots-small.svg'); background-size: cover; background-repeat: no-repeat; background-position: center; z-index: 111; } .kompetenzzentrum p { max-width: 55%; hyphens: none; } .overlay-blue-1 { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: var(--vericutblue); opacity: 1; mix-blend-mode: hue; z-index: 2; } .overlay-blue-2 { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: var(--vericutblue); mix-blend-mode: hard-light; } .overlay-red-1 { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: var(--red); mix-blend-mode: multiply; opacity: 1; z-index: 2; } .overlay-red-2 { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: var(--white); opacity: 1; mix-blend-mode: soft-light; mix-blend-mode: overlay; z-index: 2; } .overlay-green { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: var(--blue); opacity: 0.5; mix-blend-mode: color-dodge; z-index: 2; } .overlay-green-2 { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: var(--blue); opacity: 1; mix-blend-mode: hard-light; z-index: 2; } .overlay-darken { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: var(--blue); opacity: 1; mix-blend-mode: hard-light; z-index: 2; } a.scrolldown { position: absolute; z-index: 3; left: 50%; bottom: 5%; -webkit-animation: shake-vertical 15s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both; animation: shake-vertical 15s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both; transform: translate(-50%, 0); width: clamp(15px, 2vw, 18px); } .overflow-hidden { overflow: hidden; } img.referenz { -webkit-filter: grayscale(100%); filter: grayscale(100%); width: clamp(10rem, 14vw, 14rem); height: clamp(2rem, 4vw, 4rem); object-fit: contain; } .swiper-slide { display: block; margin-top: auto; margin-bottom: auto; } @-webkit-keyframes shake-vertical { 0%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 10%, 30%, 50%, 70% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } 20%, 40%, 60% { -webkit-transform: translateY(8px); transform: translateY(8px); } 80% { -webkit-transform: translateY(6.4px); transform: translateY(6.4px); } 90% { -webkit-transform: translateY(-6.4px); transform: translateY(-6.4px); } } @keyframes shake-vertical { 0%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 10%, 30%, 50%, 70% { -webkit-transform: translateY(-8px); transform: translateY(-8px); } 20%, 40%, 60% { -webkit-transform: translateY(8px); transform: translateY(8px); } 80% { -webkit-transform: translateY(6.4px); transform: translateY(6.4px); } 90% { -webkit-transform: translateY(-6.4px); transform: translateY(-6.4px); } } .schulung-item { display: flex; } .schulung-icon img { width: clamp(3rem, 6vw, 6rem); } .schulung-home-details { margin-left: clamp(1rem, 2vw, 2rem); } .schulung-item h5 { font-size: min(max(1rem, 1.1vw), 1.1rem); } /*-------------------------------------------------- LÖSUNGEN ---------------------------------------------------*/ .video-transform-1 video, .video-transform-2 video, .video-transform-3 video { width: 100%; height: clamp(20em, 45vw, 70vh); object-fit: cover; } .video-transform-1, .video-transform-2, .video-transform-3 { clip-path: polygon(20% 0%, 80% 0%, 80% 100%, 20% 100%); will-change: clip-path; } .table-titel { font-weight: bold; hyphens: none; white-space: nowrap; margin-right: 2rem; } .table-titel, td.table-text { border-bottom: solid 1px var(--gray); } .vorteile { background: var(--gray); padding: 5%; } .vorteile .grid.cols-2 { grid-template-columns: clamp(2rem, 6vw, 6rem) 1fr; } img.vorteile-icon { width: clamp(2rem, 6vw, 6rem); } /*-------------------------------------------------- TEAM ---------------------------------------------------*/ .person-overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--blue); mix-blend-mode: hard-light; transition: 0.5s all ease; opacity: 0; } .person { cursor: pointer; height: clamp(18rem, 24vw, 24rem); } .person:hover .person-overlay { opacity: 1; } .person-details { position: absolute; bottom: 2rem; text-align: center; width: 100%; color: var(--white); } .person-details a, .person-details h5 { color: var(--white); } .person-details h5 { color: var(--white); font-weight: bold; margin-bottom: 1rem; } img.person-bild { height: 100%; object-fit: cover; object-position: top; } video.thevideo { width: 100%; height: 100%; object-fit: cover; object-position: top; filter: saturate(0); } /*-------------------------------------------------- SCHULUNGEN ---------------------------------------------------*/ .schulung { color: var(--blue); } img.schulung-icon { width: clamp(4rem, 6vw, 6rem); border-radius: 50%; } .schulung h5 { font-weight: 600; color: var(--blue); } .schulung b { font-weight: 600; color: var(--black); } .schulung-details { grid-template-columns: clamp(5rem, 10vw, 10rem) auto; } .bb-gray { border-bottom: 1px solid var(--gray); } a.button.red { background: var(--red); color: var(--white); } /*-------------------------------------------------- REFERENZEN ---------------------------------------------------*/ /*-------------------------------------------------- ÜBER UNS ---------------------------------------------------*/ .facts { position: relative; float: left; width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; } .facts-section { background-image: url('/static/images/quote-bg.svg'); background-size: contain; background-position: 90% center; background-repeat: no-repeat; } .fact { width: clamp(6rem, 11vw, 11rem); height: clamp(6rem, 11vw, 11rem); border: 8px solid var(--red); border-radius: 50%; float: left; margin-right: clamp(1rem, 2vw, 2rem); display: flex; align-items: center; flex-direction: column; justify-content: center; text-align: center; } .fact-zahl { font-weight: bold; font-size: min(max(1.25rem, 1.75vw), 1.75rem); line-height: 1.25; color: var(--blue); } .fact-titel { font-size: min(max(0.55rem, 0.9vw), 0.9rem); line-height: 1; font-weight: 600; color: var(--blue); } ul.mission { position: relative; float: left; width: 100%; column-count: 2; column-gap: 5rem; list-style-type: none; } .mission li { margin: 1rem 0; border-bottom: 1px solid var(--gray); break-inside: avoid-column; } .mission b { color: var(--black); } .partner-logo { height: clamp(10rem, 14vw, 14rem); display: flex; align-items: center; justify-content: center; } /*-------------------------------------------------- INSIDE ---------------------------------------------------*/ .inside-uebersicht img.inside-bg { height: clamp(15rem, 25vw, 20rem); object-fit: cover; } .inside-container a.inside-button { float: left; left: 50%; transform: translate(-50%, 0); } .inside-detail iframe { width: 560px; height: 315px; margin-top: 2rem; } /*-------------------------------------------------- DIENSTLEISTUNGEN ---------------------------------------------------*/ .support a { color: var(--blue); text-decoration: underline; } .kunde.bw img { -webkit-filter: grayscale(100%); filter: grayscale(100%); } .kunde a { width: 100%; } .quote { font-size: min(max(1.5rem, 2.5vw), 2.5rem); font-style: italic; text-align: center; } .quote-section { background-image: url('/static/images/quote-bg.svg'); background-size: contain; background-position: center; background-repeat: no-repeat; } .paket-header .name { font-weight: 600; color: var(--blue); } .paket-header h4 { font-weight: bold; letter-spacing: 0px; text-transform: none; font-size: min(max(1.25rem, 1.75vw), 1.75rem); line-height: 1; color: var(--blue); } /*-------------------------------------------------- KURSANMELDUNGEN ---------------------------------------------------*/ .termine, .termine h5 { color: var(--blue); } .termine td { hyphens: none; } button[type=submit].ff-loading{display:inline-flex;flex-wrap:nowrap;align-items:center}button[type=submit].ff-loading:before{content:"";display:block;flex:1 0 11px;width:11px;height:11px;margin-right:10px;border-style:solid;border-width:2px;border-color:transparent transparent #fff #fff;border-radius:50%;animation:ff-loading .5s linear infinite}@keyframes ff-loading{0%{transform:rotate(0)}100%{transform:rotate(1turn)}}.freeform-pages{display:flex;padding:0;margin:0 0 10px;list-style:none}.freeform-pages li{margin:0 10px 0 0}.freeform-row{display:flex;justify-content:space-between;margin:0 -15px}.freeform-row .freeform-column{flex:1 0;padding:10px 0;margin:0 15px;box-sizing:border-box}.freeform-row .freeform-column>.freeform-row:first-child{margin-top:-10px}.freeform-row .freeform-column label{display:block}.freeform-row .freeform-column .input-group-one-line{display:flex;flex-wrap:wrap}.freeform-row .freeform-column .input-group-one-line label{padding-right:10px}.freeform-row .freeform-column .freeform-label{font-weight:bold}.freeform-row .freeform-column .freeform-label.freeform-required:after{content:"*";margin-left:5px;color:red}.freeform-row .freeform-column .freeform-input{width:100%;display:block;box-sizing:border-box}.freeform-row .freeform-column .freeform-input[type=checkbox],.freeform-row .freeform-column .freeform-input[type=radio]{width:auto;display:inline;margin-right:5px}.freeform-row .freeform-column .freeform-input.StripeElement{padding:4px 2px;border:1px solid #ccc;height:30px}.freeform-row .freeform-column .freeform-input-only-label{font-weight:normal}.freeform-row .freeform-column .freeform-input-only-label>.freeform-input{display:inline-block;width:auto;margin-right:5px}.freeform-row .freeform-column .freeform-errors,.freeform-row .freeform-column .ff-errors{list-style:none;padding:0;margin:5px 0 0}.freeform-row .freeform-column .freeform-errors>li,.freeform-row .freeform-column .ff-errors>li{color:red}.freeform-row .freeform-column .freeform-instructions{margin:0 0 5px;font-size:13px;color:#aba7a7}.freeform-row .freeform-column.freeform-column-content-align-left{display:flex;justify-content:flex-start}.freeform-row .freeform-column.freeform-column-content-align-left>button:not(:first-of-type){margin-left:5px}.freeform-row .freeform-column.freeform-column-content-align-center{display:flex;justify-content:center}.freeform-row .freeform-column.freeform-column-content-align-center>button:not(:first-of-type){margin-left:5px}.freeform-row .freeform-column.freeform-column-content-align-right{display:flex;justify-content:flex-end}.freeform-row .freeform-column.freeform-column-content-align-right>button:not(:first-of-type){margin-left:5px}.freeform-row .freeform-column.freeform-column-content-align-spread{display:flex;justify-content:space-between}.freeform-row .freeform-column.freeform-column-content-align-spread>button:not(:first-of-type){margin-left:5px}.ff-form-errors{padding:15px;border:1px solid #f5c6cb;background:#f8d7da;border-radius:5px;color:#721c24}.ff-form-errors>p{margin:0}.freeform-form-has-errors{color:#721c24} /*-------------------------------------------------- KONTAKT ---------------------------------------------------*/ .buttons.kontakt { position: relative; float: left; width: 100%; clear: both; z-index: 1; } .kontakt-formular h5 { font-size: min(max(0.8rem, 0.9vw), 1rem); font-weight: 600; color: var(--blue); margin-bottom: 0.25rem; } input[type=text], input[type=email], textarea { border: none; outline: none; background: var(--gray); width: 100%; padding: 0.5rem; margin-bottom: 2rem; color: var(--black); font-family: inherit; } label { color: var(--blue); } .testversion-formular label { position: relative; float: left; width: 100%; } button { position: relative; font-family: var(--common-font); color: var(--blue); font-size: min(max(0.7rem, 0.8vw), 0.9rem); line-height: 1.5; transition: all ease 0.3s; text-decoration: none; padding: 0.5rem 2rem; border: 1px solid var(--red); text-align: center; border-radius: 20px; font-weight: 500; background: transparent; cursor: pointer; } button:hover { background: var(--red); color: var(--white); } input#ubiqhonigtopf { display: none; } .freeform-form-has-errors { background: var(--red)!important; padding: clamp(1rem, 2vw, 2rem)!important; margin-bottom: clamp(1rem, 2vw, 2rem)!important; color: var(--white)!important; } /*-------------------------------------------------- FOOTER ---------------------------------------------------*/ footer { overflow: hidden; } footer p, footer h5, .copyright a { color: var(--blue); } ul.footer-nav { list-style-type: none; } .footer-nav a { color: var(--blue); font-weight: bold; text-transform: uppercase; font-size: min(max(0.8rem, 1vw), 1rem); } .footer img.logo { width: clamp(15em, 20vw, 20em); } .social-icons { position: relative; float: left; width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; } .social-icons img { width: clamp(1rem, 1.75vw, 1.75rem); margin-right: 1rem; height: clamp(1rem, 1.75vw, 1.75rem); object-fit: contain; } img.footer-bg { position: absolute; object-fit: contain; right: -18vw; width: clamp(20em, 70vw, 50em); top: 50%; transform: translate(0, -50%); } .form-success { display: none; position: relative; float: left; width: 100%; font-family: inherit; } /*-------------------------------------------------- MANUFACTURING SOLUTION ANIMATION GRAFIK ---------------------------------------------------*/ .animation-bg { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: var(--blue); z-index: 0; opacity: 0; visibility: hidden; } img.coordinates { position: absolute; width: 80%; height: auto; top: 6%; left: 50%; transform: translate(-50%, -50%); z-index: 1; opacity: 0.05; } .manufacturingSolution { position: relative; display: block; float: left; width: 100%; height: 600vh; overflow: hidden; } .manufacturingSolution h4 { text-align: center; top: -5rem; position: absolute; left: 50%; color: var(--blue); hyphens: none; -ms-hyphens: none; -moz-hyphens: none; -webkit-hyphens: none; white-space: nowrap; transform: translate(-50%, 0); width: 100%; z-index: 4; } .mfs-animation-pin { position: relative; display: block; float: left; width: 100%; height: 500vh; z-index: 1; background-color: var(--gray); } .endAnimation { position: relative; display: block; float: left; width: 100%; height: 100vh; } .mfs-animation { position: relative; margin-left: 50%; transform: translate(-50%, -50%); top: 50vh; width: 55vh; height: 55vh; max-width: 60vw; max-height: 60vw; z-index: 2; } .mfs-x { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 30vh; height: 23vh; max-width: 30vw; max-height: 22vw; z-index: 3; } img.mfs-x-tl { position: absolute; top: 0; left: 5%; width: 45%; height: auto; transform: scale(1); filter: drop-shadow(3px 5px 4px rgb(0 0 0 / 0.4)); } img.mfs-x-tr { position: absolute; top: 0; right: 0; width: 50%; height: auto; transform: scale(1); filter: drop-shadow(3px 5px 4px rgb(0 0 0 / 0.4)); } img.mfs-x-bl { position: absolute; bottom: 0; left: 5%; width: 45%; height: auto; transform: scale(1); filter: drop-shadow(3px 5px 4px rgb(0 0 0 / 0.4)); } img.mfs-x-br { position: absolute; bottom: 0; right: 0; width: 50%; height: auto; transform: scale(1); filter: drop-shadow(3px 5px 4px rgb(0 0 0 / 0.4)); } img.mfs-x-tl-static { position: absolute; top: 0; left: 5%; width: 45%; height: auto; transform: scale(1); /*filter: brightness(0);*/ z-index: -1; } img.mfs-x-tr-static { position: absolute; top: 0; right: 0; width: 50%; height: auto; transform: scale(1); /*filter: brightness(0);*/ z-index: -1; } img.mfs-x-bl-static { position: absolute; bottom: 0; left: 5%; width: 45%; height: auto; transform: scale(1); /*filter: brightness(0);*/ z-index: -1; } img.mfs-x-br-static { position: absolute; bottom: 0; right: 0; width: 50%; height: auto; transform: scale(1); /*filter: brightness(0);*/ z-index: -1; } .mfs-solutions { position: relative; display: block; float: left; width: 100%; height: 100%; z-index: 3; } .mfs-solutions p { color: var(--white); margin: 0; line-height: 1.4; font-size: min(max(0.6rem, 0.8vw), 0.8rem); } .mfs-solutions a.button { color: var(--white); font-size: min(max(0.6rem, 0.8vw), 0.8rem); padding: 0.5vw 2vw; } .mfs-solutions a.responsive-button { width: 30px; height: 30px; background-image: url(../images/responsive-button.svg); background-size: contain; -webkit-filter: drop-shadow( 0px 2px 7px rgba(0, 0, 0, .2)); filter: drop-shadow( 0px 2px 7px rgba(0, 0, 0, .2)); display: none; filter: invert(1); /*border: solid 1px #00aba8;*/ border-radius: 50%; } @media screen and (max-width : 500px), screen and (min-aspect-ratio: 5/2) { .mfs-solutions a.button { display: none; } .mfs-solutions a.responsive-button { display: block; } .mfs-solutions p { display: none; } .mfs-solution-mastercam, .mfs-solution-mdm, .mfs-solution-cimco, .mfs-solution-vericut { max-width: 15em; } } .mfs-solution-mastercam { position: absolute; top: 3vw; left: 50%; transform: translate(-50%, -50%); width: clamp(9em, 34vw, 22em); padding: 3vw 2vw; display: flex; flex-wrap: wrap; justify-content: center; text-align: center; flex-basis: 27em; z-index: 3; } .mfs-solution-mdm { position: absolute; top: 50%; right: 0; transform: translate(50%, -50%); width: clamp(8em, 25vw, 18em); padding: 3vw 2vw; display: flex; flex-wrap: wrap; justify-content: center; text-align: center; z-index: 3; } .mfs-solution-cimco { position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 50%); width: clamp(8em, 27vw, 20em); padding: 3vw 2vw; display: flex; flex-wrap: wrap; justify-content: center; text-align: center; z-index: 3; } .mfs-solution-vericut { position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); width: clamp(9em, 25vw, 18em); padding: 3vw 2vw; display: flex; flex-wrap: wrap; justify-content: center; text-align: center; z-index: 3; } .mfs-solutions-bg { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; height: 90%; background: var(--black); z-index: 1; border-radius: 50%; -moz-box-shadow: 0px 0px 50px 40px rgb(0 0 0 / 50%); -webkit-box-shadow: 0px 0px 50px 40px rgb(0 0 0 / 50%); box-shadow: 0px 0px 50px 40px rgb(0 0 0 / 50%); overflow: hidden; visibility: hidden; opacity: 0; } .mfs-solutions-bg video { width: 100%; height: 100%; object-fit: cover; opacity: 0.7; border: solid 1px var(--black); border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; } .video-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; /*background-color: var(--red);*/ background-color: var(--blue); mix-blend-mode: hard-light; -webkit-box-shadow: inset 0px 0px 50px 20px rgba(0,0,0,1); -moz-box-shadow: inset 0px 0px 50px 20px rgba(0,0,0,1); box-shadow: inset 0px 0px 50px 20px rgb(0 0 0); border: solid 1px var(--black); border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; overflow: hidden; } .mfs-solution-bg { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; background: var(--black); z-index: -1; border-radius: 50%; filter: blur(60px); opacity: 0; visibility: hidden; } img.mfs-logo-mastercam { width: 25vh; margin: 2vh 0; max-width: 20vw; min-width: 9em; } img.mfs-logo-mdm { width: 23vh; margin: 2vh 0; max-width: 18vw; min-width: 7em; } img.mfs-logo-cimco { width: 22vh; margin: 2vh 0; max-width: 17vw; min-width: 7em; } img.mfs-logo-vericut { width: 28vh; margin: 2vh 0; max-width: 23vw; min-width: 8em; } svg.corner-grey-lt { position: absolute; top: 0; left: 0; height: 50%; transform: rotate(-90deg); } svg.corner-grey-rt { position: absolute; top: 0; right: 0; height: 50%; transform: rotate(0deg); } svg.corner-grey-rb { position: absolute; bottom: 0; right: 0; height: 50%; transform: rotate(90deg); } svg.corner-grey-lb { position: absolute; bottom: 0; left: 0; height: 50%; transform: rotate(-180deg); } .circle { position: absolute; top: 50%; left: 50%; width: 55vh; height: 55vh; max-width: 60vw; max-height: 60vw; border: solid 0px pink; border-radius: 50%; transform: translate(-50%, -50%); } .static-circle { position: absolute; top: 50%; left: 50%; width: calc(55vh + 4px); height: calc(55vh + 4px); max-width: calc(60vw + 4px); max-height: calc(60vw + 4px); border: solid 8px #4e6165; border-radius: 50%; transform: translate(-50%, -50%); z-index: -1; } img.scroll-icon { position: absolute; z-index: 3; left: 50%; top: 90vh; -webkit-animation: shake-vertical 15s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both; animation: shake-vertical 15s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both; transform: translate(-50%, 0); width: clamp(12px, 2vw, 18px); filter: invert(1); } .scrollmore1 { position: absolute; left: 50%; top: 90vh; font-size: min(max(0.6rem, 0.8vw), 0.8rem); z-index: 2; transform: translate(-100%, 0); margin-left: -1em; } .scrollmore2 { position: absolute; left: 50%; top: 90vh; font-size: min(max(0.6rem, 0.8vw), 0.8rem); z-index: 2; margin-left: 2.4em; } .line { position: absolute; display: block; float: left; width: 15em; height: 4px; background: var(--red); } .scroll { position: absolute; right: 10%; top: 50vh; transform: translate(0%, -10em) rotate(90deg); transform-origin: left top; font-size: min(max(0.35rem, 0.55vw), 0.55rem); letter-spacing: clamp(3px, 1vw, 6px); text-transform: uppercase; line-height: 4; z-index: 2; } @media screen and (max-width : 1024px) { .manufacturingSolution { height: 500vh; } .mfs-animation-pin { height: 400vh; } .mfs-solution-mastercam:after, .mfs-solution-mdm:after, .mfs-solution-cimco:after, .mfs-solution-vericut:after { width: 100%; height: 100%; } .scroll { transform: translate(50%, -7.5em) rotate(90deg); } } @media screen and (max-width : 500px) { img.mfs-logo-mastercam, img.mfs-logo-mdm, img.mfs-logo-cimco, img.mfs-logo-vericut { margin: 1em 0; } .static-circle { border: solid 4px #4e6165; } .mfs-solution-bg { display: none; } } /*------------------------------------------------------------------------------------------------------------------------------------------------------ RESPONSIVE -------------------------------------------------------------------------------------------------------------------------------------------------------*/ @media screen and (min-width : 1300px) { .kompetenzzentrum-bild { margin-top: -5rem; } } @media screen and (max-width : 1700px) { /* ///// C0NTAINER AND T_YPO ///// */ /* ///// H3ADER ///// */ /* ///// N@VIGATION ///// */ /* ///// SL1DER ///// */ /* ///// C0NTENT ///// */ } @media screen and (max-width : 1600px) { /* ///// C0NTAINER AND T_YPO ///// */ /* ///// H3ADER ///// */ /* ///// N@VIGATION ///// */ /* ///// SL1DER ///// */ /* ///// C0NTENT ///// */ } @media screen and (max-width : 1500px) { /* ///// C0NTAINER AND T_YPO ///// */ /* ///// H3ADER ///// */ /* ///// N@VIGATION ///// */ /* ///// SL1DER ///// */ /* ///// C0NTENT ///// */ } @media screen and (max-width : 1400px) { /* ///// C0NTAINER AND T_YPO ///// */ /* ///// H3ADER ///// */ /* ///// N@VIGATION ///// */ /* ///// SL1DER ///// */ /* ///// C0NTENT ///// */ } @media screen and (max-width : 1300px) { /* ///// C0NTAINER AND T_YPO ///// */ li#hotline.active { transform: translate(20px, -70px); } li#helpdesk.active { transform: translate(-40px, -40px); } li#grundkurse.active { transform: translate(-80px, -10px); } li#testversion.active { transform: translate(-70px, 20px); } /* ///// H3ADER ///// */ /* ///// N@VIGATION ///// */ /* ///// SL1DER ///// */ /* ///// C0NTENT ///// */ .fact { border: 4px solid var(--red); } } @media screen and (max-width : 1200px) { /* ///// C0NTAINER AND T_YPO ///// */ /* ///// H3ADER ///// */ /* ///// N@VIGATION ///// */ /* ///// SL1DER ///// */ /* ///// C0NTENT ///// */ .inside { column-count: 3; } } @media screen and (max-width : 1100px) { /* ///// C0NTAINER AND T_YPO ///// */ p { line-height: 1.5; } /* ///// H3ADER ///// */ .header_fadein { height: 60px; } /* ///// N@VIGATION ///// */ #navigationwrap_desktop { display: none; } #navigationwrap_mobile { display: block; } .hamburger { display: block; } .menu-container { position: absolute; left: 0; right: 0; height: auto; width: 70%; max-width: 1700px; text-align: center; display: block; overflow-y: hidden; overflow-x: hidden; -webkit-overflow-scrolling: touch; margin: 0 auto; z-index: 1006; top: 120px; } .menu-container nav { position: relative; display: flex; float: left; height: auto; align-items: center; left: 0; width: 100%; } nav ul { display: block; } nav ul > li { float: none; text-transform: none; text-align: left; margin: 1em 0; } nav ul li a { font-size: 1rem; } nav ul li ul { position: fixed; display: block; top: 0; left: auto; width: 85%; height: 100vh; min-height: 0; max-height: 100%; padding: 145px 35px 2em; background: var(--red); -webkit-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.05); -moz-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.05); box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.05); right: -120%; margin-top: 0; z-index: 11; overflow-y: auto; transform: none; visibility: visible; opacity: 1; transition: all 0.7s cubic-bezier(.80, 0, .15, 1); -webkit-transition: all 0.7s cubic-bezier(.80, 0, .15, 1); -moz-transition: all 0.7s cubic-bezier(.80, 0, .15, 1); } nav ul li ul.open { right: 0; } nav ul li ul::before { display: none; } li.submenu::after { transform: translate(0, -50%) rotate(-90deg); width: 12px; height: 12px; } .teamviewer img { display: none; } nav ul li a:hover { color: var(--white); } nav ul li:hover > ul:before { display: none; } .canvas { position: fixed; top: 0; right: 0; width: 90%; height: 100%; background: var(--black); z-index: 10; opacity: 0; visibility: hidden; transition: all 0.7s cubic-bezier(.80, 0, .15, 1); -webkit-transition: all 0.7s cubic-bezier(.80, 0, .15, 1); -moz-transition: all 0.7s cubic-bezier(.80, 0, .15, 1); } .canvas.open { visibility: visible; opacity: 0.4; } .button.goback { position: absolute; display: block; padding: 3px 0 3px 15px; margin-bottom: 0; left: 35px; top: 100px; opacity: 1; width: auto; font-size: 12px; text-transform: none; font-weight: normal; color: var(--white); letter-spacing: 0.5px; border: solid 0px; } .button.goback:after { content: ''; position: absolute; left: -4px; top: 50%; transform: translate(0, -50%) rotate(90deg); background-image: url(/static/images/nav-arrow.svg); background-size: contain; background-position: center; background-repeat: no-repeat; width: 12px; height: 12px; } .button.goback:hover { background: transparent; } /* ///// SL1DER ///// */ /* ///// C0NTENT ///// */ ul.kurse { columns: 1; } .kurse li { padding: 0.25rem 0; } .swiss-map { position: relative; width: 100%; right: auto; margin: 0 auto; } .count { font-size: min(max(3.5rem, 5.5vw), 5.5rem); } .count::before { left: clamp(-3.5rem, -5.5vw, -5.5rem); font-size: min(max(3.5rem, 5.5vw), 5.5rem); } .swiss-map-overlay { background: none; } .kunden { width: 80%; margin-top: -5rem; left: 20%; } .facts { flex-wrap: wrap; } .fact { width: clamp(5.5rem, 18vw, 18rem); height: clamp(5.5rem, 18vw, 18rem); margin-right: clamp(1rem, 2vw, 2rem); margin-bottom: clamp(1rem, 2vw, 2rem); } .fact { border: 2px solid var(--red); } } @media screen and (max-width : 1000px) { /* ///// C0NTAINER AND T_YPO ///// */ /* ///// H3ADER ///// */ .header { height: 80px; } .hamburger { top: 40px; } /* ///// N@VIGATION ///// */ /* ///// SL1DER ///// */ /* ///// C0NTENT ///// */ } @media screen and (max-width : 900px) { /* ///// C0NTAINER AND T_YPO ///// */ /* ///// H3ADER ///// */ /* ///// N@VIGATION ///// */ /* ///// SL1DER ///// */ .slide-inner--info { width: 60%; bottom: 30%; } .slider-buttons { bottom: 28%; } /* ///// C0NTENT ///// */ ul.mission { column-count: 1; } .image-dotted::before { top: -2rem; left: -2rem; } .inside { column-count: 2; } .dienstleistungen-section p { font-size: min(max(0.75rem, 0.85vw), 0.9rem); } .dienstleistungen-section h5 { font-size: min(max(0.9rem, 1.0vw), 1.0rem); } .kompetenzzentrum p { max-width: 90%; } } @media screen and (max-width : 800px) { /* ///// C0NTAINER AND T_YPO ///// */ /* ///// H3ADER ///// */ /* ///// N@VIGATION ///// */ /* ///// SL1DER ///// */ /* ///// C0NTENT ///// */ } @media screen and (max-width : 700px) { /* ///// C0NTAINER AND T_YPO ///// */ /* ///// H3ADER ///// */ /* ///// N@VIGATION ///// */ /* ///// SL1DER ///// */ /* ///// C0NTENT ///// */ .image-dotted { position: relative; float: right; width: calc(100% - 2rem); } .image-dotted::before { top: -2rem; left: -2rem; background: radial-gradient(var(--red), 1px, transparent 1px), radial-gradient(var(--red), 1px, transparent 1px), linear-gradient(transparent 1px, transparent 0) transparent; background-size: 8px 8px; background-position: top left; } .manufacturingSolution h4 { white-space: normal; } } @media screen and (max-width : 650px) { /* ///// C0NTAINER AND T_YPO ///// */ .fab .icon { padding: 3px 9px 3px 30px; } /* ///// H3ADER ///// */ /* ///// N@VIGATION ///// */ /* ///// SL1DER ///// */ /* ///// C0NTENT ///// */ .facts { margin-left: 50%; transform: translate(-50%, 0); justify-content: center; } } @media screen and (max-width : 500px) { /* ///// C0NTAINER AND T_YPO ///// */ #containerP.inside-container { width: 100%; padding-left: 0; padding-right: 0; } #containerP.inside-container h1 { margin-left: 5%; } /* ///// H3ADER ///// */ .header { height: 65px; } .hamburger { top: 33px; } /* ///// N@VIGATION ///// */ /* ///// SL1DER ///// */ .slide-inner--info { width: 80%; } .swiper-pagination { right: -70px; } /* ///// C0NTENT ///// */ .swiper2 { display: block; } .inside-home { column-count: 1; display: none; } img.scroll-icon, .scrollmore1, .scrollmore2 { top: 80vh; } .scroll { right: auto; left: 5%; top: 80vh; } .line { height: 3px; } .termine td { position: relative; float: left; width: 100%; } .termine tr { border-bottom: 1px solid var(--blue); float: left; width: 100%; padding-bottom: 0.5rem; padding-top: 0.5rem; } .termine tr td:first-child { font-weight: bold; } } @media screen and (max-width : 450px) { /* ///// C0NTAINER AND T_YPO ///// */ /* ///// H3ADER ///// */ /* ///// N@VIGATION ///// */ /* ///// SL1DER ///// */ /* ///// C0NTENT ///// */ } @media screen and (max-width : 300px) { /* ///// C0NTAINER AND T_YPO ///// */ /* ///// H3ADER ///// */ /* ///// N@VIGATION ///// */ /* ///// SL1DER ///// */ /* ///// C0NTENT ///// */ } /* ///// DARKMODE ///// */ @media (prefers-color-scheme: dark) { :root { --white: #f1f1f1; --black: #000000; --darkmode: #000000; --red: #e61d2e; --blue: #374448; --darkblue: #21292b; --gray: #212121; } body, .wrapper, footer, #navigationWrap { background: var(--darkmode); color: var(--white); } p, li, h1, h2, h3, h4, h5, a.button, .button, footer p, footer h5, .copyright a, .footer-nav a, .inside-content p, .schulung h5, .schulung b, .bb-gray, .mission b { color: var(--white); } /*img { filter: brightness(.8); }*/ a.logo img, .fab img { filter: brightness(1); } img.dienstleistung-icon, .footer img.logo, img.footer-bg, a.button.pdf::before, #hotline::before, #helpdesk::before, #grundkurse::before, #testversion::before { filter: invert(1) brightness(2); } .kunde img, .kunde.bw img { -webkit-filter: grayscale(100%) invert(1); filter: grayscale(100%) invert(1); } img.scroll-icon { filter: invert(0); } .swiss-map img { filter: brightness(0.8); } .header_fadein { background: var(--darkmode); } .bg-blue, a.button.dark { background: var(--red); border: solid 1px var(--red); } a.button.dark:hover { color: var(--white); } a.button.dark:hover::before { filter: invert(0); } .inside-content { background-color: var(--black); } #navigationwrap_mobile { background-color: var(--gray); } .kurse li { border-bottom: 1px solid var(--blue); } .manufacturingSolution h4 { color: var(--white); } .termine { color: var(--white); } /* .animation-bg { background: var(--black); } img.mfs-x-tr-static, img.mfs-x-br-static, img.mfs-x-bl-static, img.mfs-x-tl-static { filter: brightness(0); } */ .swiss-map-overlay { background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#00000000',GradientType=0 ); z-index: 0; } .overlay-left { background: -moz-linear-gradient(left, rgba(55,68,72,1) 0%, rgba(0,0,0,0) 100%); background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#374448', endColorstr='#00374448',GradientType=1 ); } .fab li a { color: var(--white)!important; } .fab .icon { background: var(--red); } label, input[type=text], input[type=email], textarea, button { color: var(--white); } .fact-zahl, .fact-titel { color: var(--white); } .facts-section, .quote-section { background-image: url('/static/images/quote-bg-darkmode.svg'); } .swiper-zeitstrahl .tab-dot, .zeitstrahl-accordion__title .tab-dot { background-color: var(--black); } .zeitstrahl-accordion__title .tab-dot { border: solid 1px var(--blue); } .swiper-zeitstrahl .tab-dot:before, .zeitstrahl-accordion__item.is-open .tab-dot { background: var(--white); } .swiper-zeitstrahl .tab-dot .arrow:before, .zeitstrahl-accordion .tab-dot .arrow:before { background: var(--white); } .swiper-zeitstrahl .tab-dot .arrow:after, .zeitstrahl-accordion__item.is-open .tab-dot .arrow:before { background: var(--black); } .zeitstrahl-accordion__item:before { background: var(--blue); } .support a { color: var(--red); } .paket-header .name, .paket-header h4 { color: var(--white); } .swiper3 .swiper-pagination-bullet { background-color: var(--white); } .swiper3 .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: var(--red); } .swup-overlay, .swup-opacity { background: var(--black); } .social-icons img { filter: invert(1) brightness(2); } img.referenz { -webkit-filter: grayscale(100%) invert(1); filter: grayscale(100%) invert(1); } @media screen and (max-width : 1100px) { nav ul li ul, nav ul li ul li { background-color: var(--gray); } nav ul li ul li.active a { color: var(--red); } nav ul li ul li a:hover { color: var(--blue); } .canvas.open { visibility: visible; opacity: 0.1; } #navigationwrap_mobile .dot-overlay { filter: invert(1); } } }