@charset "UTF-8"; /*** The new CSS reset - version 1.7.3 (last updated 7.8.2022) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } @font-face { font-family: "Catamaran"; font-style: normal; font-weight: 900; src: local("Catamaran"), url("../fonts/catamaran_v17_20221019-124751/catamaran-v17-latin-900.woff2") format("woff2"); } @font-face { font-family: "Catamaran"; font-style: normal; font-weight: 700; src: local("Catamaran"), url("../fonts/catamaran_v17_20221019-124751/catamaran-v17-latin-700.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: normal; src: local("Inter"), url("../fonts/inter_v12_20221014-134903/inter-v12-latin-regular.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: bold; src: local("Inter"), url("../fonts/inter_v12_20221014-134903/inter-v12-latin-700.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 900; src: local("Inter"), url("../fonts/inter_v12_20221014-134903/inter-v12-latin-900.woff2") format("woff2"); } :root { --color1: #262626; --color12: #ededed; --color13: #000000; --color14: #000000; --color15: white; --color2: #00233E; --color3: #7785AC; --color32: #000000; --color33: #000000; --color34: #000000; --color35: #000000; --color4: #84E296; --color42: #000000; --color43: #000000; --color44: #000000; --color45: #000000; --color5: #C48600; --color52: #000000; --color53: #000000; --color54: #000000; --color55: #000000; --color6: #F0A500; --color62: #000000; --color63: #000000; --color64: #000000; --color65: #000000; --text-color-default: var(--color1); --link-color-default: var(--color6); --content-background-color: var(--color12); --footer-background-color: var(--color15); --btn-background-color: var(--color6); --btn-hover-background-color: var(--color5); --btn-text-color: var(--color15); --animation-function-in: ease-in-out; --animation-function-out: ease-in-out; --animation-function-opacity-in: ease-in-out; --animation-function-opacity-out: ease-in-out; --lh-factor: 1.54; --content-width: 1200px; --header-height: 5rem; --space-sperator: 5px; --font-primary: Inter, sans-serif; --seperator-primary: var(--space-sperator) solid var(--color2); --seperator-secondary: var(--space-sperator) solid var(--color5); --element-shadow: 0px 4px 16px rgba(0, 0, 0, 0.25); } :root { --fluid-min-width: 320; --fluid-max-width: 1200; --fluid-screen: 100vw; --f-0-min: 16.00; --f-0-max: 19.00; --fluid-bp: calc((var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) / (var(--fluid-max-width) - var(--fluid-min-width))); } @media screen and (min-width: 1200px) { :root { --fluid-screen: calc(var(--fluid-max-width) * 1px); } } :root { --fc-025-min: (var(--fc-1-min) * 0.25); --fc-025-max: (var(--fc-1-max) * 0.25); --fc-05-min: (var(--fc-1-min) * 0.5); --fc-05-max: (var(--fc-1-max) * 0.5); --fc-075-min: (var(--fc-1-min) * 0.75); --fc-075-max: (var(--fc-1-max) * 0.75); --fc-1-min: (var(--f-0-min, 21)); --fc-1-max: (var(--f-0-max, 19)); --fc-125-min: (var(--fc-1-min) * 1.25); --fc-125-max: (var(--fc-1-max) * 1.25); --fc-15-min: (var(--fc-1-min) * 1.5); --fc-15-max: (var(--fc-1-max) * 1.5); --fc-175-min: (var(--fc-1-min) * 1.75); --fc-175-max: (var(--fc-1-max) * 1.75); --fc-2-min: (var(--fc-1-min) * 2); --fc-2-max: (var(--fc-1-max) * 2); --fc-3-min: (var(--fc-1-min) * 3); --fc-3-max: (var(--fc-1-max) * 3); --fc-4-min: (var(--fc-1-min) * 4); --fc-4-max: (var(--fc-1-max) * 4); --fc-6-min: (var(--fc-1-min) * 6); --fc-6-max: (var(--fc-1-max) * 6); --fc-8-min: (var(--fc-1-min) * 8); --fc-8-max: (var(--fc-1-max) * 8); --fc-10-min: (var(--fc-1-min) * 10); --fc-10-max: (var(--fc-1-max) * 10); /* T-shirt sizes */ --space-025: calc(((var(--fc-025-min) / 16) * 1rem) + (var(--fc-025-max) - var(--fc-025-min)) * var(--fluid-bp)); --space-05: calc(((var(--fc-05-min) / 16) * 1rem) + (var(--fc-05-max) - var(--fc-05-min)) * var(--fluid-bp)); --space-075: calc(((var(--fc-075-min) / 16) * 1rem) + (var(--fc-075-max) - var(--fc-075-min)) * var(--fluid-bp)); --space-1: calc(((var(--fc-1-min) / 16) * 1rem) + (var(--fc-1-max) - var(--fc-1-min)) * var(--fluid-bp)); --space-125: calc(((var(--fc-125-min) / 16) * 1rem) + (var(--fc-125-max) - var(--fc-125-min)) * var(--fluid-bp)); --space-15: calc(((var(--fc-15-min) / 16) * 1rem) + (var(--fc-15-max) - var(--fc-15-min)) * var(--fluid-bp)); --space-175: calc(((var(--fc-15-min) / 16) * 1rem) + (var(--fc-175-max) - var(--fc-175-min)) * var(--fluid-bp)); --space-2: calc(((var(--fc-2-min) / 16) * 1rem) + (var(--fc-2-max) - var(--fc-2-min)) * var(--fluid-bp)); --space-4: calc(((var(--fc-4-min) / 16) * 1rem) + (var(--fc-4-max) - var(--fc-4-min)) * var(--fluid-bp)); --space-6: calc(((var(--fc-6-min) / 16) * 1rem) + (var(--fc-6-max) - var(--fc-6-min)) * var(--fluid-bp)); --space-8: calc(((var(--fc-8-min) / 16) * 1rem) + (var(--fc-8-max) - var(--fc-8-min)) * var(--fluid-bp)); --space-10: calc(((var(--fc-10-min) / 16) * 1rem) + (var(--fc-10-max) - var(--fc-10-min)) * var(--fluid-bp)); /* One-up pairs */ --space-025-05: calc(((var(--fc-025-min) / 16) * 1rem) + (var(--fc-05-max) - var(--fc-025-min)) * var(--fluid-bp)); --space-075-1: calc(((var(--fc-075-min) / 16) * 1rem) + (var(--fc-1-max) - var(--fc-075-min)) * var(--fluid-bp)); --space-05-075: calc(((var(--fc-05-min) / 16) * 1rem) + (var(--fc-075-max) - var(--fc-05-min)) * var(--fluid-bp)); --space-1-125: calc(((var(--fc-1-min) / 16) * 1rem) + (var(--fc-125-max) - var(--fc-1-min)) * var(--fluid-bp)); --space-125-15: calc(((var(--fc-125-min) / 16) * 1rem) + (var(--fc-15-max) - var(--fc-125-min)) * var(--fluid-bp)); --space-15-175: calc(((var(--fc-15-min) / 16) * 1rem) + (var(--fc-175-max) - var(--fc-15-min)) * var(--fluid-bp)); --space-175-2: calc(((var(--fc-175-min) / 16) * 1rem) + (var(--fc-2-max) - var(--fc-175-min)) * var(--fluid-bp)); --space-2-4: calc(((var(--fc-2-min) / 16) * 1rem) + (var(--fc-4-max) - var(--fc-2-min)) * var(--fluid-bp)); --space-4-6: calc(((var(--fc-4-min) / 16) * 1rem) + (var(--fc-6-max) - var(--fc-4-min)) * var(--fluid-bp)); --space-6-8: calc(((var(--fc-6-min) / 16) * 1rem) + (var(--fc-8-max) - var(--fc-6-min)) * var(--fluid-bp)); --space-8-10: calc(((var(--fc-8-min) / 16) * 1rem) + (var(--fc-10-max) - var(--fc-8-min)) * var(--fluid-bp)); /* Custom pairs */ --space-s-l: calc(((var(--fc-1-min) / 16) * 1rem) + (var(--fc-15-max) - var(--fc-1-min)) * var(--fluid-bp)); } ::selection { background-color: var(--color6); color: #fff; } * { box-sizing: border-box; } html { font-size: var(--space-1); scroll-behavior: smooth; } body { font-family: Inter, sans-serif; line-height: var(--lh-factor); color: var(--text-color-default); } a { color: var(--link-color-default); } h1, h2, h3, h4, h5, h6 { font-family: Catamaran, sans-serif; font-weight: 900; margin-top: var(--space-05); margin-bottom: var(--space-125); line-height: 1; word-wrap: break-word; hyphens: none; } h1 { hyphens: auto; font-size: var(--space-2); } h2 { font-size: var(--space-175); } h3 { font-size: var(--space-125); } h4 { font-size: var(--space-1); } h5 { font-size: var(--space-075); } strong, b { font-weight: bold; } em, i { font-style: italic; } ul { list-style-type: disc; } ol { list-style-type: upper-roman; } ul, ol { padding-left: var(--space-075); } blockquote { padding-left: 4ch; margin-top: var(--space-1); margin-bottom: var(--space-1); } .text-hide { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .btn { background: var(--btn-background-color); color: var(--btn-text-color); box-shadow: var(--element-shadow); border-radius: 10px; display: inline-flex; place-content: center; padding: 0.5rem 3rem 0.35rem; transition: background-color 200ms ease-in-out; display: inline-block; text-decoration: none; } .btn:hover { background: var(--btn-hover-background-color); } .btn > span { color: var(--btn-text-color); } .logo { text-decoration: none; display: block; grid-area: logo; position: relative; } .logoimg { display: block; height: 3rem; width: auto; transition: opacity 400ms cubic-bezier(0.65, 0.05, 0.36, 1); bottom: 0; left: 0; position: absolute; } .logoima.light { opacity: 1; } .logoimg.contrast { opacity: 0; } .not-top.afterHero .logoimg.light { opacity: 0; } .not-top.afterHero .logoimg.contrast { opacity: 1; } .mod_article .tech-icons { display: flex; flex-wrap: wrap; list-style: none; justify-content: space-between; align-items: end; padding: 0; column-gap: var(--space-2); row-gap: var(--space-1); margin: 0; } /* float zeug */ .float_left, .float_right { float: none; margin: 0px; margin-bottom: var(v-2); } .image_container { margin-top: var(--space-05); } @media (min-width: 500px) { .float_left { float: left; margin-right: var(--space-2); margin-bottom: var(--space-2); } .float_right { float: right; margin-left: var(--space-2); margin-bottom: var(--space-2); } } @media (min-width: 722px) { .float_left, .float_right { float: none; } } @media (min-width: 900px) { .float_left { float: left; } .float_right { float: right; } } /* artikel */ @media (min-width: 722px) { .mod_article { margin: 0 auto; } .mod_article .block { hyphens: auto; margin-bottom: calc(var(--space-1) + var(--space-2)); } } .mod_article a { font-weight: bold; } .mod_article ol, .mod_article ul { margin-left: 1ch; overflow: hidden; margin-bottom: var(--space-1); margin-top: var(--space-1); } .mod_article p { margin-bottom: var(--space-075); max-width: 65ch; } .text-image { max-width: 50%; display: block; float: right; clip-path: circle(51% at center 40%); shape-outside: circle(40% at center center); } .text-image img { height: auto; display: block; object-fit: contain; } .ce_gallery ul { list-style-type: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-gap: var(--space-4); margin: 0; } @media (min-width: 722px) { .ce_gallery ul img { border-radius: 10%; } } .ce_gallery .screenshot-gallery-thumb img { height: 100%; width: auto; } .mod_newslist > .block > .more, .mod_article > .block { clear: both; margin-bottom: var(--space-4); } .mod_newslist > .block::after { display: block; content: ""; clear: both; } .mod_newslist h1 a, .mod_newslist h2 a, .mod_newslist h3 a, .mod_newslist h4 a, .mod_newslist h5 a, .mod_newslist h6 a { text-decoration: none; } .caption { font-size: 0.7em; hyphens: auto; } .invisible { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /*! * baguetteBox.js * @author feimosi * @version 1.8.2 * @url https://github.com/feimosi/baguetteBox.js */ #baguetteBox-overlay { display: none; opacity: 0; position: fixed; overflow: hidden; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000000; background-color: #222; background-color: rgba(0, 0, 0, 0.8); -webkit-transition: opacity .5s ease; transition: opacity .5s ease; } #baguetteBox-overlay.visible { opacity: 1; } #baguetteBox-overlay .full-image { display: inline-block; position: relative; width: 100%; height: 100%; text-align: center; } #baguetteBox-overlay .full-image figure { display: inline; margin: 0; height: 100%; } #baguetteBox-overlay .full-image img { display: inline-block; width: auto; height: auto; max-height: 100%; max-width: 100%; vertical-align: middle; -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); } #baguetteBox-overlay .full-image figcaption { display: block; position: absolute; bottom: 0; width: 100%; text-align: center; line-height: 1.8; white-space: normal; color: #ccc; background-color: #000; background-color: rgba(0, 0, 0, 0.6); font-family: sans-serif; } #baguetteBox-overlay .full-image:before { content: ""; display: inline-block; height: 50%; width: 1px; margin-right: -1px; } #baguetteBox-slider { position: absolute; left: 0; top: 0; height: 100%; width: 100%; white-space: nowrap; -webkit-transition: left .4s ease,-webkit-transform .4s ease; transition: left .4s ease,-webkit-transform .4s ease; transition: left .4s ease,transform .4s ease; transition: left .4s ease,transform .4s ease,-webkit-transform .4s ease,-moz-transform .4s ease; } #baguetteBox-slider.bounce-from-right { -webkit-animation: bounceFromRight .4s ease-out; animation: bounceFromRight .4s ease-out; } #baguetteBox-slider.bounce-from-left { -webkit-animation: bounceFromLeft .4s ease-out; animation: bounceFromLeft .4s ease-out; } @-webkit-keyframes bounceFromRight { 0%, 100% { margin-left: 0; } 50% { margin-left: -30px; } } @keyframes bounceFromRight { 0%, 100% { margin-left: 0; } 50% { margin-left: -30px; } } @-webkit-keyframes bounceFromLeft { 0%, 100% { margin-left: 0; } 50% { margin-left: 30px; } } @keyframes bounceFromLeft { 0%, 100% { margin-left: 0; } 50% { margin-left: 30px; } } .baguetteBox-button#next-button, .baguetteBox-button#previous-button { top: 50%; top: calc(50% - 30px); width: 44px; height: 60px; } .baguetteBox-button { position: absolute; cursor: pointer; outline: 0; padding: 0; margin: 0; border: 0; -moz-border-radius: 15%; border-radius: 15%; background-color: #323232; background-color: rgba(50, 50, 50, 0.5); color: #ddd; font: 1.6em sans-serif; -webkit-transition: background-color .4s ease; transition: background-color .4s ease; } .baguetteBox-button:focus, .baguetteBox-button:hover { background-color: rgba(50, 50, 50, 0.9); } .baguetteBox-button#next-button { right: 2%; } .baguetteBox-button#previous-button { left: 2%; } .baguetteBox-button#close-button { top: 20px; right: 2%; right: calc(2% + 6px); width: 30px; height: 30px; } .baguetteBox-button svg { position: absolute; left: 0; top: 0; } .baguetteBox-spinner { width: 40px; height: 40px; display: inline-block; position: absolute; top: 50%; left: 50%; margin-top: -20px; margin-left: -20px; } .baguetteBox-double-bounce1, .baguetteBox-double-bounce2 { width: 100%; height: 100%; -moz-border-radius: 50%; border-radius: 50%; background-color: #fff; opacity: .6; position: absolute; top: 0; left: 0; -webkit-animation: bounce 2s infinite ease-in-out; animation: bounce 2s infinite ease-in-out; } .baguetteBox-double-bounce2 { -webkit-animation-delay: -1s; animation-delay: -1s; } @-webkit-keyframes bounce { 0%, 100% { -webkit-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes bounce { 0%, 100% { -webkit-transform: scale(0); -moz-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } } .mainnav { grid-area: menu; } .nav-trigger { grid-area: nav-trigger; } @media (max-width: 721px) { .nav-trigger { display: flex; align-items: end; } .nav-trigger svg { stroke: #fff; width: auto; height: 3rem; } .afterHero .nav-trigger svg { stroke: var(--text-color-default); } .nav-trigger .feather-x { display: none; } .nav-open .nav-trigger .feather-x { display: block; } .nav-open .nav-trigger .feather-menu { display: none; } @keyframes slide-in { from { transform: translateX(20%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slide-out { from { transform: translateX(0); opacity: 1; } to { transform: translateX(20%); opacity: 0; } } .mainnav { position: fixed; background-color: var(--content-background-color); width: 100%; top: calc( var(--header-height) + var(--space-1)); left: 0; transform: translateX(100%); opacity: 0; min-height: 50vh; box-shadow: var(--element-shadow); transition: transform 500ms cubic-bezier(0.55, 0.06, 0.87, 0.34) 300ms, opacity 500ms cubic-bezier(0.55, 0.06, 0.87, 0.34) 300ms; display: flex; flex-direction: row; align-items: center; } .nav-open .mainnav { transform: translateX(0); opacity: 1; transition: transform 800ms cubic-bezier(0.17, 0.84, 0.44, 1), opacity 800ms cubic-bezier(0.17, 0.84, 0.44, 1) 100ms; } .nav-open .mainnav .level_1 > li { animation-name: slide-in; } body:not(.nav-open) .mainnav .level_1 > li { animation-name: slide-out; } .mainnav ul { list-style: none; padding: 0; } .mainnav a { color: var(--text-color-default); font-weight: bold; font-size: 2rem; transition: color 200ms ease-in-out; } .mainnav a:hover { color: var(--color6); } .mainnav .level_1 { width: 30ch; margin: var(--space-2) auto; display: flex; flex-direction: column; row-gap: var(--space-05); } .mainnav .active a { text-decoration: underline; } .mainnav .level_1 > li { animation-duration: 1600ms; animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(0.17, 0.84, 0.44, 1); animation-fill-mode: both; } .mainnav .level_1 > li:nth-child(1) { animation-delay: calc(300ms + 100ms); } .mainnav .level_1 > li:nth-child(2) { animation-delay: calc(300ms + 200ms); } .mainnav .level_1 > li:nth-child(3) { animation-delay: calc(300ms + 300ms); } .mainnav .level_1 > li:nth-child(4) { animation-delay: calc(300ms + 400ms); } .mainnav .level_1 > li:nth-child(5) { animation-delay: calc(300ms + 500ms); } .mainnav .level_1 > li:nth-child(6) { animation-delay: calc(300ms + 600ms); } .mainnav .level_1 > li:nth-child(7) { animation-delay: calc(300ms + 700ms); } .mainnav .level_1 > li:nth-child(8) { animation-delay: calc(300ms + 800ms); } .mainnav .level_1 > li:nth-child(9) { animation-delay: calc(300ms + 900ms); } .mainnav .level_1 > li:nth-child(10) { animation-delay: calc(300ms + 1000ms); } } @media (min-width: 722px) { .nav-trigger { display: none; } @keyframes line { 0% { background-position-x: -365px; } } .mainnav ul { display: flex; padding: 0; list-style-type: none; column-gap: var(--space-2); line-height: 1; justify-content: center; } .mainnav ul a { --text-color: #ffffff; color: var(--text-color); transition: color 300ms ease-in-out; display: flex; position: relative; /* &::after { position: absolute; content: ""; left: 0; bottom: -0.5rem; width: 100%; height: 0; background-color: hsla(0, 0%, 100%, 0); transition: height 300ms ease-in-out, background-color 300ms ease-in-out 150ms; } &:hover::after { background-color: hsla(0, 0%, 100%, 1); height: 5px; }*/ } .mainnav ul a:hover { color: var(--color6); } .mainnav ul a::after { background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg version='1.1' viewBox='0 0 600 40' xml:space='preserve' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m600 36.944c-18.5 0-149.59-0.05673-187.76 0-91.567-33.35-189.66-25.29-262.24 7.2e-5h-150' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-position: left 100px bottom; background-size: 600px 40px; position: absolute; content: ""; left: 0; height: 40px; width: 100%; bottom: -0.75rem; background-position: left 160px bottom; transition: background-position-x 600ms linear; } .mainnav ul a:hover::after { /* animation: line; animation-duration: 2s; animation-timing-function: linear; */ background-position-x: -465px; } .not-top.afterHero .mainnav ul a { --text-color: var(--text-color-default); } .afterHero .mainnav ul a::after { background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg version='1.1' viewBox='0 0 600 40' xml:space='preserve' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m600 36.944c-18.5 0-149.59-0.05673-187.76 0-91.567-33.35-189.66-25.29-262.24 7.2e-5h-150' fill='none' stroke='%23F0A500' stroke-width='2'/%3E%3C/svg%3E%0A"); } } .ce_hero { height: 100vh; width: 100vw; position: relative; left: 50%; transform: translateX(-50%); background: radial-gradient(35% 38% at 50% 25%, rgba(0, 144, 255, 0.42), rgba(0, 35, 62, 0.42)), linear-gradient(0deg, rgba(0, 35, 62, 0.85), rgba(0, 35, 62, 0.85)), image-set(url("../img/poly-bg.webp") type("image/webp"), url("../img/poly-bg.avif") type("image/avif")); /* background: radial-gradient(35% 38% at 50% 25%, rgba(0, 144, 255, 0.42), rgba(0, 35, 62, 0.42) ), rgba(0, 35, 62, 0.85), //url("../img/poly-bg.webp"); url("../img/poly-bg.avif"); */ min-height: 800px; display: grid; grid-template-rows: 1fr [content-begin img-begin] 1fr [content-end] 1fr [img-end]; grid-template-columns: var(--space-1) [content-begin img-begin] minmax(auto, 450px) [content-end] minmax(45%, 750px) var(--space-1) [img-end]; } @media (min-width: 900px) { .ce_hero { grid-template-columns: 1fr [content-begin] minmax(auto, 450px) [content-end img-begin] minmax(auto, 750px) [img-end] 1fr; } } .ce_hero::before { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url("../img/poly-bg.webp"); z-index: -1; opacity: 0.15; } .ce_hero .hero_container { grid-column: content-begin / content-end; grid-row: content-begin / content-end; justify-self: end; align-self: center; color: #fff; display: grid; grid-row-gap: var(--space-025); } .ce_hero .hero_container h3 { font-weight: 900; font-size: 2rem; line-height: 1.1; } @media (min-width: 900px) { .ce_hero .hero_container h3 { font-size: 3rem; } } .ce_hero .hero_button { background: var(--btn-background-color); color: var(--btn-text-color); box-shadow: var(--element-shadow); border-radius: 10px; display: inline-flex; place-content: center; padding: 0.5rem 3rem 0.35rem; transition: background-color 200ms ease-in-out; margin-top: var(--space-15); justify-self: self-start; } .ce_hero .hero_button:hover { background: var(--btn-hover-background-color); } .ce_hero .hero_button > span { color: var(--btn-text-color); } .ce_hero .heroimg { grid-column: img-begin / img-end; grid-row: img-begin / img-end; align-self: end; justify-self: end; height: 100%; } .ce_hero .heroimg img { height: 100%; width: auto; object-fit: cover; } .ce_references .reference-item { --color-headline-bar: var(--color6); display: grid; grid-auto-flow: dense; grid-gap: var(--space-2); margin-top: var(--space-4); margin-bottom: var(--space-10); grid-template-rows: [top] auto [image-start] auto [image-end] auto [end]; grid-template-columns: [content-start image-start] 1fr [content-end image-end]; } @media (min-width: 722px) { .ce_references .reference-item { grid-template-rows: [top image-start] auto auto auto [image-end end]; grid-template-columns: [content-start] 1fr [content-end image-start] 1fr [image-end]; } } .ce_references .reference-item .reference-headline::before { content: ""; position: absolute; height: var(--space-1); width: clamp(100%, 60vw, 970px); background-color: var(--color-headline-bar); transform: translateY(calc(var(--space-2) * -1)) translateX(var(--space-2)); box-shadow: var(--element-shadow); z-index: 9; } .ce_references .reference-item .reference-headline, .ce_references .reference-item .reference-teaser, .ce_references .reference-item .reference-linkbutton { grid-column: content-start / content-end; justify-self: start; align-self: start; position: relative; } .ce_references .reference-item .reference-preview { grid-column: image-start/image-end; grid-row: image-start / image-end; justify-self: start; align-self: start; height: 100%; width: auto; display: block; border-radius: 10%; overflow: hidden; } @media (min-width: 722px) { .ce_references .reference-item .reference-preview { width: calc(100% + 50%); height: auto; transform-origin: center bottom; transform: rotate(-14.2deg) translateY(calc(var(--space-4) * -1)) translateX(var(--space-8)); } } .ce_references .reference-item .reference-preview img { display: block; width: 100%; height: auto; object-fit: cover; } @media (min-width: 722px) { .ce_references .reference-item .reference-preview img { transform: scale(1.1); transition: transform 600ms cubic-bezier(0.46, 0.03, 0.52, 0.96); } } @media (min-width: 722px) { .ce_references .reference-item .reference-preview img:hover { transform: scale(1); } } .ce_reference { --color-headline-bar: var(--color6); --container-top-gap: var(--space-10); display: grid; grid-auto-flow: dense; grid-gap: var(--space-2); margin-top: var(--space-4); grid-template-rows: [top] auto [image-start] auto [image-end] auto auto [end]; grid-template-columns: [content-start image-start] 1fr [content-end image-end]; } @media (min-width: 722px) { .ce_reference { grid-template-columns: [content-start] 1fr [content-end image-start] 1fr [image-end]; grid-template-rows: [top image-start] auto auto auto [end]; } } .ce_reference .reference-headline::before { content: ""; position: absolute; height: var(--space-1); width: clamp(100%, 60vw, 970px); background-color: var(--color-headline-bar); transform: translateY(calc(var(--space-2) * -1)) translateX(var(--space-2)); box-shadow: var(--element-shadow); z-index: 9; } .ce_reference .reference-headline, .ce_reference .reference-teaser, .ce_reference .reference-linkbutton { grid-column: content-start / content-end; justify-self: start; align-self: start; position: relative; } .ce_reference .reference-preview { grid-column: image-start / image-end; grid-row: image-start / image-end; justify-self: start; align-self: start; height: 100%; width: auto; display: block; border-radius: 10%; overflow: hidden; } @media (min-width: 722px) { .ce_reference .reference-preview { width: calc(100% + 50%); height: auto; transform-origin: center bottom; transform: rotate(-14.2deg) translateY(calc(var(--space-4) * -1)) translateX(var(--space-8)); } } .ce_reference .reference-preview img { display: block; width: 100%; height: auto; object-fit: cover; } @media (min-width: 722px) { .ce_reference .reference-preview img { transform: scale(1.1); transition: transform 600ms cubic-bezier(0.46, 0.03, 0.52, 0.96); } } @media (min-width: 722px) { .ce_reference .reference-preview img:hover { transform: scale(1); } } .ce_references .project_short_infos, .ce_reference .project_short_infos { list-style-type: none; overflow: visible; margin-left: -1.5ch; } .ce_references .project_short_infos li, .ce_reference .project_short_infos li { margin: var(--space-1) 0; font-size: 1.1rem; hyphens: none; position: relative; padding-left: 4ch; } @media (min-width: 1200px) { .ce_references .project_short_infos li, .ce_reference .project_short_infos li { padding-left: 0; } } .ce_references .project_short_infos li::before, .ce_reference .project_short_infos li::before { content: ""; position: absolute; top: 0; background: no-repeat top center; background-image: var(--list-style-image); width: 3ch; height: 100%; background-size: contain; left: 0; } @media (min-width: 1200px) { .ce_references .project_short_infos li::before, .ce_reference .project_short_infos li::before { left: -4ch; } } .reference-site { --content-background-color: var(--color15); } #header { position: fixed; z-index: 10; width: 100%; height: var(--header-height); display: flex; place-content: center; align-items: center; transition: background-color 600ms ease-in-out, backdrop-filter 300ms ease-in-out; background-color: rgba(255, 255, 255, 0); } .not-top #header { backdrop-filter: blur(5px); background-color: rgba(255, 255, 255, 0.2); } #header .inside { height: 100%; display: grid; grid-template-columns: 210px auto min-content; grid-template-areas: "logo menu nav-trigger "; align-items: end; grid-column-gap: var(--space-1); max-width: var(--content-width); width: 100%; padding-bottom: var(--space-075); margin: 0 var(--space-1); } @media (min-width: 1200px) { #header .inside { margin: 0 auto; grid-column-gap: var(--space-2); } } #container { --container-top-gap: var(--space-2); display: flex; flex-direction: column; align-items: center; overflow: hidden; min-height: 100vh; background: var(--content-background-color) url("../img/bl_bg_brand.svg") right bottom 10% no-repeat; } @media (min-width: 722px) { #container { --container-top-gap: var(--space-4); } } #main { max-width: var(--content-width); width: 100%; margin-bottom: var(--space-4); } #main .inside { margin: 0 var(--space-1); } #main .inside > .mod_article > :first-child:not(.ce_hero) { margin-top: calc( var(--header-height) + var(--container-top-gap)); } #main hr { margin-top: 0.5em; margin-bottom: 0.5em; height: 1px; border: 1px solid #ddd; max-width: 65ch; } #footer { display: flex; place-content: center; background-color: var(--footer-background-color); border-top: 4px solid var(--color6); } #footer ul { list-style-type: none; padding-left: 0; } #footer ul a { display: inline-block; line-height: 2; } #footer .inside { max-width: var(--content-width); width: 100%; margin: var(--space-4) var(--space-1) var(--space-6); display: flex; flex-wrap: wrap; column-gap: var(--space-2); font-size: 0.75rem; } #footer .inside .footer-box { max-width: 50vw; } /* Stil, der die Farben der Elemente verblassen lässt */ .tech-icons > * { filter: grayscale(50%); /* Passt die Deckkraft aller direkten Kinder des div-Containers an */ }