/* Theme Name: Elementor | m-page Author: m-page | Christopher Born Author URI: https://m-page.de Description: Optimiertes Blank-Wordpress Theme für Elementor Version: 1.0.0 */ @font-face {font-display: swap;font-family: 'Ubuntu';font-style: normal;font-weight: 300;src: url('/wp-content/fonts/ubuntu/300.woff2') format('woff2');} @font-face {font-display: swap;font-family: 'Ubuntu';font-style: normal;font-weight: 400;src: url('/wp-content/fonts/ubuntu/400.woff2') format('woff2');} @font-face {font-display: swap;font-family: 'Ubuntu';font-style: normal;font-weight: 500;src: url('/wp-content/fonts/ubuntu/500.woff2') format('woff2');} @font-face {font-display: swap;font-family: 'Ubuntu';font-style: normal;font-weight: 700;src: url('/wp-content/fonts/ubuntu/700.woff2') format('woff2');} /* cyrillic */ @font-face {font-family: 'Ubuntu'; font-style: normal; font-weight: 300; font-display: swap; src: url('/wp-content/fonts/ubuntu/cyrillic-300.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;} @font-face {font-family: 'Ubuntu'; font-style: normal; font-weight: 400; font-display: swap; src: url('/wp-content/fonts/ubuntu/cyrillic-400.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;} @font-face {font-family: 'Ubuntu'; font-style: normal; font-weight: 500; font-display: swap; src: url('/wp-content/fonts/ubuntu/cyrillic-500.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;} @font-face {font-family: 'Ubuntu'; font-style: normal; font-weight: 700; font-display: swap; src: url('/wp-content/fonts/ubuntu/cyrillic-700.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;} /*** INLINE ICONS ***/ :root { --arrico01: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGJhc2VQcm9maWxlPSJ0aW55IiB2aWV3Qm94PSIwIDAgNTUgMTAwIiBvdmVyZmxvdz0idmlzaWJsZSI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBmaWxsPSIjZmZmIiBkPSJNNTMuMzE5IDQ2LjU3Mkw3LjU4MiAxLjMzNEM0LjEyNS0yLjI2My0xLjU3OCAyLjA4Ny45MTYgNi40MkwyNS4yNDIgNTAgLjkxNiA5My41OGMtMi40OTQgNC4zMzMgMy4yMDkgOC42ODMgNi42NjYgNS4wODVMNTMuMzIgNTMuNDI4YzEuODM2LTEuOTEgMS44MzYtNC45NDYtLjAwMS02Ljg1NnoiLz48L3N2Zz4='); --pdfico: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBkPSJNODEuNzczIDk3SDE4LjIyN2MtMy40NDIgMC02LjIzMy0yLjc5MS02LjIzMy02LjIzM1Y5LjIzM0MxMS45OTMgNS43OTEgMTQuNzg0IDMgMTguMjI3IDNoNDcuOTgybDIxLjc5OCAyMS43OTh2NjUuOTY5YzAgMy40NDItMi43OTEgNi4yMzMtNi4yMzQgNi4yMzN6TTYwLjkyIDN2MjQuNDA3YTIuNjggMi42OCAwIDAgMCAyLjY3OSAyLjY3OWgyNC40MDciIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzQ2ZmYzNSIgc3Ryb2tlLXdpZHRoPSI1IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiLz48cGF0aCBkPSJNMzIuNjIzIDUxLjk4OGMtMS40MDgtLjYzOS0zLjE0Ni0uOTYtNS4yMTctLjk2aC04LjQ3OXYyNC40MjVoNS44OTd2LTguNDc5aDIuNTgyYzIuMDcgMCAzLjgwOS0uMzE5IDUuMjE3LS45NTlzMi40NzEtMS41NTkgMy4xOTMtMi43NTcgMS4wODItMi42MTEgMS4wODItNC4yMzljMC0xLjY3NS0uMzYxLTMuMTA2LTEuMDgyLTQuMjkycy0xLjc4NS0yLjA5OC0zLjE5My0yLjczOXptLTIuNDI1IDkuMzM0Yy0uNjc1LjUzNS0xLjYwNS44MDMtMi43OTEuODAzaC0yLjU4MnYtNi4yNDZoMi41ODJjMS4xODYgMCAyLjExNy4yNjggMi43OTEuODAyczEuMDEyIDEuMzE0IDEuMDEyIDIuMzM4YzAgMS4wMDEtLjMzNyAxLjc2OS0xLjAxMiAyLjMwM3ptMjYuMTM1LTguNzkzYy0xLjk1NC0xLTQuMjY5LTEuNTAxLTYuOTQ0LTEuNTAxaC04LjcyM3YyNC40MjVoOC43MjNjMi42NzUgMCA0Ljk5LS41IDYuOTQ0LTEuNTAxczMuNDY2LTIuNDEzIDQuNTM2LTQuMjM5IDEuNjA1LTMuOTgzIDEuNjA1LTYuNDczYzAtMi41MTItLjUzNS00LjY3Ni0xLjYwNS02LjQ5cy0yLjU4MS0zLjIyLTQuNTM2LTQuMjIxem0tLjU1OCAxNC4wNDVjLS4zOTYuODk2LS45MjQgMS42MTEtMS41ODcgMi4xNDZhNi4xMyA2LjEzIDAgMCAxLTIuMzAzIDEuMTUyYy0uODcyLjIzMy0xLjc3NC4zNDktMi43MDQuMzQ5aC0yLjQ0M1Y1Ni4yNjNoMi40NDNjLjkzIDAgMS44MzIuMTE3IDIuNzA0LjM0OXMxLjY0LjYxNyAyLjMwMyAxLjE1MiAxLjE5MiAxLjI1MSAxLjU4NyAyLjE0Ni41OTMgMi4wMDYuNTkzIDMuMzMyLS4xOTggMi40MzctLjU5MyAzLjMzMnptMTYuMTItMTAuNDg1djQuODE1aDguODI4djQuNzQ1aC04LjgyOHY5LjgwNWgtNS42NTNWNTEuMDI5aDE0LjgzdjUuMDZoLTkuMTc3eiIgZmlsbD0iIzAwZmYyMyIvPjwvc3ZnPg=='); } /***********/ html {scroll-behavior: smooth; font-size: var(--fontsize); font-weight: 300; line-height: 1.5 !important;} body {background: #FFF; color: #444; letter-spacing: 0.0px; overflow-x: hidden;} * {margin: 0; padding: 0; list-style-type: none; font-family: 'Ubuntu', Century Gothic,AppleGothic,verdana,tahoma; box-sizing: border-box;} .clear {clear: both;} .tac {text-align: center;} .tar {text-align: right;} .tal {text-align: left;} .dp-b {display: block;} .w100 {width: 100%;} p strong {font-weight: 500;} img {border: 0px; height: auto; hyphens: auto;} @media screen and (max-width : 680px){ .vis_desk {display: none !important;} } @media screen and (min-width : 681px){ .vis_mob {display: none !important;} } .wrap {width: 100%; margin: 0 auto; max-width: calc(var(--maxwidth) + var(--gp1-r) + var(--gp1-r)) !important; padding: 0 var(--gp1-r);} a {text-decoration: none; color: #0075b1; transition: color 0.4s, border 0.4s;} /*#0075b1*/ a:hover {color: #000;} p a {border-bottom: 1px dotted #000;} p a:hover {border-bottom: 1px dotted #00aaf0;} ::selection {color: #FFF; background: #333;} :root {--maxwidth: 1600px;} /*** ELEMENTOR FIXES ***/ .e-con-inner {padding: 0 !important;} html {margin-top: 0 !important;} .erecht h2 {margin-top: var(--gp1-xl1); margin-bottom: var(--gp1-xs2); font-weight: 500;} .erecht h3, .erecht h4, .erecht h5 {margin-top: var(--gp1); margin-bottom: var(--gp1-xs3); font-weight: 500;} .erecht p {margin-bottom: var(--gp1-xs1);} /***********/ /*** FONT SCALES ***/ :root { --fontsize: clamp(12px, calc(1.25vw + 1.5px), 18px); --ratio: 1.4; } .fs-xl4, .fs-xl4 .elementor-heading-title {font-size: calc(var(--fontsize) * (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio)));} .fs-xl3, .fs-xl3 .elementor-heading-title {font-size: calc(var(--fontsize) * (var(--ratio) * var(--ratio) * var(--ratio)));} .fs-xl2, .fs-xl2 .elementor-heading-title {font-size: calc(var(--fontsize) * (var(--ratio) * var(--ratio)));} .fs-xl1, .fs-xl1 .elementor-heading-title {font-size: calc(var(--fontsize) * (var(--ratio)));} .fs1, .fs1 .elementor-heading-title {font-size: var(--fontsize);} .fs-xs1, .fs-xs1 .elementor-heading-title {font-size: calc(var(--fontsize) / (var(--ratio)));} .fs-xs2, .fs-xs2 .elementor-heading-title {font-size: calc(var(--fontsize) / (var(--ratio) * var(--ratio)));} .fs-xs3, .fs-xs3 .elementor-heading-title {font-size: calc(var(--fontsize) / (var(--ratio) * var(--ratio) * var(--ratio)));} .fs-xs4, .fs-xls4 .elementor-heading-title {font-size: calc(var(--fontsize) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio)));} :root { --fs-xl4: calc(var(--fontsize) * (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio))); --fs-xl3: calc(var(--fontsize) * (var(--ratio) * var(--ratio) * var(--ratio))); --fs-xl2: calc(var(--fontsize) * (var(--ratio) * var(--ratio))); --fs-xl1: calc(var(--fontsize) * (var(--ratio))); --fs1: var(--fontsize); --fs-xs1: calc(var(--fontsize) / (var(--ratio))); --fs-xs2: calc(var(--fontsize) / (var(--ratio) * var(--ratio))); --fs-xs3: calc(var(--fontsize) / (var(--ratio) * var(--ratio) * var(--ratio))); --fs-xs4: calc(var(--fontsize) / (var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio))); } /***********/ /*** ABSTÄNDE ***/ :root { --gp1-xl3: 256px; --gp1-xl2: 128px; --gp1-xl1: 64px; --gp1: 32px; --gp1-xs1: 16px; --gp1-xs2: 8px; --gp1-xs3: 4px; --gp1-r-xl3: calc(var(--gp1-r) * 8); --gp1-r-xl2: calc(var(--gp1-r) * 4); --gp1-r-xl1: calc(var(--gp1-r) * 2); --gp1-r: 32px; --gp1-r-xs1: calc(var(--gp1-r) / 2); --gp1-r-xs2: calc(var(--gp1-r) / 4); --gp1-r-xs3: calc(var(--gp1-r) / 8); } @media screen and (max-width : 768px){ :root {--gp1-r: 16px;} } .gaps1, .gaps1 .elementor-widget-container {display: flex; flex-direction: column; gap: var(--gp1-r);} .gaps1-xl1 {display: flex; flex-direction: column; gap: var(--gp1-r-xl1);} .gaps1-xl2 {display: flex; flex-direction: column; gap: var(--gp1-r-xl2);} .gaps1-xl3 {display: flex; flex-direction: column; gap: var(--gp1-r-xl3);} .gaps1-xs1 {display: flex; flex-direction: column; gap: var(--gp1-r-xs1);} .gaps1-xs2 {display: flex; flex-direction: column; gap: var(--gp1-r-xs2);} .gaps1-xs3 {display: flex; flex-direction: column; gap: var(--gp1-r-xs3);} /***********/ /*** TRENNER ***/ .space-xs3 {height: var(--gp1-r-xs3);} .space-xs2 {height: var(--gp1-r-xs2);} .space-xs1 {height: var(--gp1-r-xs1);} .space {height: var(--gp1-r);} .space-xl1 {height: var(--gp1-r-xl1);} .space-xl2 {height: var(--gp1-r-xl2);} .space-xl3 {height: var(--gp1-r-xl3);} /***********/ /*** VERLÄUFE / SCHATTEN ***/ :root { --grd01: linear-gradient(to right, #00AAF0 0%,#46c9fe 100%); --grd02: linear-gradient(to bottom, #ffffff 0%,#e8f8ff 100%); --grd03: linear-gradient(to right, #F6F6F6F2 0%,#fffffff2 25%,#fffffff2 75%,#F6F6F6F2 100%); --grd04: linear-gradient(to right, #3cde90 0%,#47c2d6 100%); --grd05: linear-gradient(-45deg, #0a4a46 0%,#051e33 100%); --grd06: linear-gradient(to right, #222222 0%,#333333 25%,#333333 75%,#222222 100%); --grd07: linear-gradient(to right, #d9f0fb 0%,#effaff 25%,#effaff 75%,#d9f0fb 100%); --grd08: linear-gradient(to right, #FFF 0%,#d7ecff 100%); --grd_g01: linear-gradient(to right, #008FCC 0%,#00AAF0 100%); --grd_g02: linear-gradient(to right, #0099B8 0%,#00B6DA 100%); --grd_g03: linear-gradient(to right, #01A29A 0%,#01C2B9 100%); --grd_g04: linear-gradient(to right, #2BB679 0%,#2FC986 100%); --grd_g05: linear-gradient(to right, #5DA923 0%,#80D73F 100%); --shd01: 0 1px 2px rgba(12,117,160, .05), 0 2px 5px rgba(12,117,160, .015), 0 5px 20px rgba(12,117,160, .015), 0 5px 50px rgba(12,117,160, .07); /*--shd02: 0 1px 2px rgba(0,0,0, .1), 0 2px 5px rgba(0,0,0, .03), 0 5px 20px rgba(0,0,0, .03), 0 5px 50px rgba(0,0,0, .15);*/ --shd02: 0 1px 2px rgba(12,117,160, .1), 0 2px 5px rgba(12,117,160, .03), 0 5px 20px rgba(12,117,160, .03), 0 5px 50px rgba(12,117,160, .15); --shd03: 0 1px 2px rgba(12,117,160, .2), 0 2px 5px rgba(12,117,160, .1), 0 5px 20px rgba(12,117,160, .1), 0 5px 50px rgba(12,117,160, .3); } /***********/ /*** BACKGROUNDS ***/ .bg1 {background: var(--grd07);} /***********/ /*** ÜBERSCHRIFTEN ***/ .elementor-heading-title {line-height: 1.4 !important;} .title1, .title1 .elementor-heading-title {display: block; margin: 0; font-size: var(--fs-xl3); line-height: 1.4 !important; font-weight: 700; hyphens: auto; letter-spacing: 0.5px;} .title2, .title2 .elementor-heading-title {display: block; margin: 0; font-size: var(--fs-xl2); line-height: 1.4 !important; font-weight: 700; hyphens: auto; letter-spacing: 0;} :root { --col2: #00AAF0; /*005E80*/ --col3: #444; --col5: #4cffa8; --col6: #00CC69; } .col1 {color: #000;} .col2 {color: var(--col2);} .col3 {color: var(--col3);} .col4 {color: #FFF;} .col5 {color: var(--col5);} .col6 {color: var(--col6);} .title1 .line2 {display: block; font-size: var(--fs-xl1); font-weight: 400; letter-spacing: 0px;} .title2 .line2 {display: block; font-size: var(--fs1); font-weight: 400; letter-spacing: 0px;} /*Trennlinien*/ .tline {width: 100%; max-width: 384px; display: block; height: var(--gp1-r-xs3);} .tline.col1 {background: linear-gradient(to right, rgba(0,136,206,1) 3%,rgba(0,136,206,0) 3%,rgba(0,136,206,0) 7%,rgba(0,136,206,1) 7%,rgba(0,136,206,1) 50%,rgba(0,136,206,0) 100%);} .tline.col2 {background: linear-gradient(to right, rgba(255,255,255,1) 3%,rgba(255,255,255,0) 3%,rgba(255,255,255,0) 7%,rgba(255,255,255,1) 7%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);} /*Responsive*/ @media screen and (max-width : 768px){ .title1, .title1 .elementor-heading-title {font-size: var(--fs-xl2); letter-spacing: -0.5px;} .title2, .title2 .elementor-heading-title {font-size: var(--fs-xl1); letter-spacing: -0.5px;} .tline {max-width: 150px; height: 2px;} } .linkanker {position: relative; top: -120px; height: 0px;} /***********/ /*** NAVIGATION ***/ /* DESKTOP */ @media screen and (min-width : 1025px){ #nav_space {height: 128px;} :root {--navheight: 100px;} #nav_mobile, #mobile_nav {display: none;} #nav_desk {width: 100%; height: var(--navheight); backdrop-filter: blur(20px); position: fixed; top: 0; left: 0; z-index: 100; background: rgba(255,255,255, 0.85); box-shadow: var(--shd01);} #nav_desk .inner_nav {display: flex; justify-content: space-between; align-items: center; height: var(--navheight);} /*Logo*/ #nav_desk .hlogo {display: block; height: calc(var(--navheight) - var(--gp1));} #nav_desk .hlogo svg {display: block; height: 100%; width: fit-content;} #nav_desk .hlogo .lg_fll01 {fill: #000} #nav_desk .hlogo .lg_fll02 {fill: #00AAF0} /*Beide Menüs*/ .nav_wrap {display: flex; flex-direction: column; gap: 4px; align-self: flex-end;} .nav_wrap .line {width: 100%; height: 1px; background: rgba(0,0,0, 0.2);} /*Oberes*/ .nav_wrap .row1 {display: flex; justify-content: flex-end; gap: var(--gp1);} .nav_wrap .row1 a {font-weight: 300; color: rgba(0,0,0, .85);} .nav_wrap .row1 a:hover {color: #000;} /*Unteres*/ .nav_wrap .row2 {display: flex; gap: var(--gp1); justify-content: flex-end;} .nav_wrap .row2 > li {display: flex; align-items: center; height: 50px; padding-bottom: 5px; transition: box-shadow 0.4s;} .nav_wrap .row2 > li:hover {box-shadow: inset 0 -5px 0 0 #00AAF0;} .nav_wrap .row2 > li > a, .nav_wrap .row2 > li > span {display: flex; align-items: center; gap: 8px; font-weight: 400; color: #333; font-size: calc(var(--fs1) + 2px);} .nav_wrap .row2 > li > a i, .nav_wrap .row2 > li > span i {display: block; width: 7px; height: 7px; background: rgba(0,0,0, .8); clip-path: polygon(0 0, 100% 0, 50% 100%);} .nav_wrap .contact a {padding: 4px 20px; background: #00AAF0; color: #FFF !important; text-transform: uppercase; font-weight: 500; letter-spacing: 1px; clip-path: polygon(0 0, calc(100% - var(--gp1-r-xs2)) 0, 100% var(--gp1-r-xs2), 100% 0, calc(100% - (var(--gp1-r-xs2) + var(--gp1-r-xs3))) 0, 100% calc(var(--gp1-r-xs2) + var(--gp1-r-xs3)), 100% 100%, 0 100%)} .nav_wrap .shop a {padding: 4px 20px; background: #0fca6f; color: #000 !important; text-transform: uppercase; font-weight: 500; letter-spacing: 1px; clip-path: polygon(0 0, calc(100% - var(--gp1-r-xs2)) 0, 100% var(--gp1-r-xs2), 100% 0, calc(100% - (var(--gp1-r-xs2) + var(--gp1-r-xs3))) 0, 100% calc(var(--gp1-r-xs2) + var(--gp1-r-xs3)), 100% 100%, 0 100%)} .nav_wrap .shop:hover {box-shadow: inset 0 -5px 0 0 #0fca6f !important;} /*Submenüs*/ .nav_wrap .row2 .submenu00 {width: fit-content; background: rgba(255,255,255, 0.97); box-shadow: var(--shd01); color: #333; backdrop-filter: blur(10px); position: absolute; top: var(--navheight); z-index: -2; opacity: 0; pointer-events: none; transition: all 0.4s; padding: var(--gp1); transform: translate(-32px, 0);} .nav_wrap .row2 li:hover .submenu00 {opacity: 1; pointer-events: auto;} .nav_wrap .row2 .submenu00 .topspace {width: 100%; height: var(--navheight); border-bottom: 1px solid #00AAF0;} .nav_wrap .row2 .submenu01 {width: 100%; background: var(--grd03); box-shadow: var(--shd01); color: #333; backdrop-filter: blur(10px); position: absolute; top: 0; left: 0; z-index: -2; opacity: 0; pointer-events: none; transition: all 0.4s;} .nav_wrap .row2 li:hover .submenu01 {opacity: 1; pointer-events: auto;} .nav_wrap .row2 .submenu01 .topspace {width: 100%; height: var(--navheight); border-bottom: 1px solid #00AAF0;} /*Liste1*/ .navlist01 {display: flex; flex-direction: column; gap: var(--gp1-r-xs1);} .navlist01 li {padding-left: var(--gp1-r-xs1); position: relative;} .navlist01 li:before {content: ""; display: block; width: 6px; height: 6px; background: #00AAF0; position: absolute; left: 0px; top: calc(50% - 4px);} .navlist01 li a:hover {color: var(--col2);} /*Aufteilung1*/ .navgrid01 {display: grid; gap: var(--gp1-r); grid-template-columns: repeat(3,1fr); margin: var(--gp1-r) 0;} .navgrid01 .ttl {text-align: center; display: flex; justify-content: center; align-items: center;} .navgrid01 .ttl strong {display: block; font-size: var(--fs-xl1); font-weight: 600;} .navgrid01 .ttl span {display: block; font-size: var(--fs1);} .navgrid01 .cat {display: flex; transition: all .4s;} .navgrid01 .icon {display: flex; align-items: center; padding: var(--gp1-r-xs2);} .navgrid01 .icon svg {display: block; width: 40px; height: 40px; transition: all .4s;} .navgrid01 .icon .s1 {fill: none; stroke: #FFF; stroke-width: 2.5px;} .navgrid01 .cat:hover .icon svg {filter: drop-shadow(0 0 40px rgba(255,255,255, .9)) drop-shadow(0 0 10px rgba(255,255,255, .8)) drop-shadow(0 0 5px rgba(255,255,255, .5));} .navgrid01 .txt {flex-grow: 1; padding: var(--gp1-r); display: flex; align-items: center; justify-content: center; background-position: top !important; background-size: 100% 100% !important; transition: all .4s;} .navgrid01 .txt strong {font-size: var(--fs-xl1); color: #469abd; transition: color .4s; font-weight: 400;} .navgrid01 .cat:hover strong {color: #1bb0ee;} .navgrid01 .cat:hover .txt {background-size: 150% 150% !important;} .ng01_1 {box-shadow: 0px 5px 20px -3px #00AAF022} .ng01_1:hover {box-shadow: 0px 5px 30px 0px #00AAF033;} .ng01_1 .icon {background: var(--grd_g01);} .ng01_1 .txt {background: linear-gradient(to bottom, #FFF 0%,#e7f8ff 100%); border: 1px solid #00AAF0;} .ng01_2 {box-shadow: 0px 5px 20px -3px #00B6DA22;} .ng01_2:hover {box-shadow: 0px 5px 30px 0px #00B6DA33;} .ng01_2 .icon {background: var(--grd_g02);} .ng01_2 .txt {background: linear-gradient(to bottom, #FFF 0%,#f1fdff 100%); border: 1px solid #00B6DA;} .ng01_3 {box-shadow: 0px 5px 20px -3px #01C2B922;} .ng01_3:hover {box-shadow: 0px 5px 30px 0px #01C2B933;} .ng01_3 .icon {background: var(--grd_g03);} .ng01_3 .txt {background: linear-gradient(to bottom, #FFF 0%,#e1fffe 100%); border: 1px solid #01C2B9;} .ng01_4 {box-shadow: 0px 5px 20px -3px #2FC98622;} .ng01_4:hover {box-shadow: 0px 5px 30px 0px #2FC98633;} .ng01_4 .icon {background: var(--grd_g04);} .ng01_4 .txt {background: linear-gradient(to bottom, #FFF 0%,#eafff6 100%); border: 1px solid #2FC986;} .ng01_5 {box-shadow: 0px 5px 20px -3px #80D73F22;} .ng01_5:hover {box-shadow: 0px 5px 30px 0px #80D73F33;} .ng01_5 .icon {background: var(--grd_g05);} .ng01_5 .txt {background: linear-gradient(to bottom, #FFF 0%,#f3ffea 100%); border: 1px solid #80D73F;} } /* MOBILE */ @media screen and (max-width : 1024px){ #nav_space {height: 96px;} :root {--navheight: 50px;} #nav_desk {display: none;} #nav_mobile {width: 100%; height: var(--navheight); backdrop-filter: blur(20px); position: fixed; top: 0; left: 0; z-index: 1000; background: rgba(255,255,255, 0.85); box-shadow: var(--shd01);} #nav_mobile .wrap {display: flex; justify-content: space-between; align-items: center; height: var(--navheight);} #nav_mobile .nm_r {display: flex; gap: var(--gp1-r); align-items: center;} /*Logo*/ #nav_mobile .hlogo {display: block; height: calc(var(--navheight) - var(--gp1-xs2));} #nav_mobile .hlogo svg {display: block; height: 100%; width: fit-content;} #nav_mobile .hlogo .lg_fll01 {fill: #000} #nav_mobile .hlogo .lg_fll02 {fill: #00AAF0} /*Hamburger Icon*/ #nav_mobile button {width: 26px; height: 16px; border: none; background: none; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer;} #nav_mobile button > div {width: 100%; height: 2px; background: #333; transition: all .5s; border-radius: 5px;} #nav_mobile button.active > div {transform: rotateY(180deg); background: #00AAF0;} /*Linkliste*/ #mobile_nav {position: fixed; z-index: 990; width: calc(100% - var(--gp1-r-xl1)); padding: var(--gp1); height: calc(100% - var(--navheight)); top: var(--navheight); left: 0; background: rgba(255,255,255, .9); overflow-y: auto; transform: translate(-100%, 0); transition: transform .4s; backdrop-filter: blur(3px);} #mobile_nav.active {transform: translate(0, 0);} /*Hauptnavi*/ #mobile_nav .main_nav {display: flex; flex-direction: column;} #mobile_nav .main_nav li .first {display: flex; justify-content: space-between; align-items: stretch; gap: 16px; border-bottom: 1px solid rgba(0,0,0, 0.1);} #mobile_nav .main_nav li:first-child .first {border-top: 1px solid rgba(0,0,0, 0.1);} #mobile_nav .main_nav .first > a, #mobile_nav .main_nav .first > span {color: #666; font-weight: 400; font-size: var(--fs-xl1); padding: var(--gp1-xs1) 0; display: flex; align-items: center; gap: var(--gp1-r-xs1); width: 100%; overflow: hidden;} #mobile_nav .main_nav .first > a:before, #mobile_nav .main_nav .first > span:before {content:""; width: 4px; height: 4px; display: block; background: #00AAF0;} #mobile_nav .main_nav .first:hover > a {color: var(--col2);} #mobile_nav .main_nav .chev {display: flex; justify-content: center; align-items: center; padding: var(--gp1); cursor: pointer; background: rgba(0,0,0, 0.02);} #mobile_nav .main_nav .chev b {transform: rotate(90deg) scaleX(0.55); display: inline-block; line-height: 0; margin-left: var(--gp1-r-xs2); color: #333; font-size: var(--fs-xl1); pointer-events: none; transition: all .5s;} .main_nav .first.active .chev b {transform: rotate(270deg) scaleX(0.55) !important;} #mobile_nav .main_nav .line {height: 1px; background: #d1d8dd;} /*Ebene 2*/ #mobile_nav .main_nav .second {display: flex; flex-direction: column; display: none;} #mobile_nav .main_nav .second li {border-bottom: 1px solid #DDD; display: flex; align-items: center; gap: var(--gp1-r-xs2);} #mobile_nav .main_nav .second li:last-child {border-bottom: 0;} #mobile_nav .main_nav .second li > a {display: block; color: #333; font-weight: 500; padding: var(--gp1-r) var(--gp1-r); flex-grow: 1;} #mobile_nav .main_nav .second .icon {display: block; width: 32px; height: 32px; margin-left: var(--gp1-r-xs1);} #mobile_nav .main_nav .second .icon .s1 {fill: none; stroke: #FFF; stroke-width: 2.5px;} /*Nebennavi*/ #mobile_nav .sidenav {display: grid; gap: var(--gp1-r); grid-template-columns: repeat(2,1fr);} #mobile_nav .sidenav a {display: block; background: rgba(0,0,0, 0.02); padding: var(--gp1-r-xs1); border-bottom: 1px solid rgba(0,0,0, 0.1); transition: all .4s;} #mobile_nav .sidenav a:hover {background: rgba(0,0,0, 0.03); border-bottom: 1px solid rgba(0,0,0, 0.15);} #nav_darkbg {position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 98; background: rgba(0,0,0, 0.5); opacity: 0; pointer-events: none; transition: opacity .4s; cursor: pointer;} #nav_darkbg.active {opacity: 1; pointer-events: auto;} /*Lösungen*/ .rng01_1 {background: var(--grd_g01); border-bottom: 0 !important; margin-bottom: var(--gp1-r-xs2);} .rng01_1 a {color: #FFF !important;} .rng01_2 {background: var(--grd_g02); border-bottom: 0 !important; margin-bottom: var(--gp1-r-xs2);} .rng01_2 a {color: #FFF !important;} .rng01_3 {background: var(--grd_g03); border-bottom: 0 !important; margin-bottom: var(--gp1-r-xs2);} .rng01_3 a {color: #FFF !important;} .rng01_4 {background: var(--grd_g04); border-bottom: 0 !important; margin-bottom: var(--gp1-r-xs2);} .rng01_4 a {color: #FFF !important;} .rng01_5 {background: var(--grd_g05); border-bottom: 0 !important; margin-bottom: var(--gp1-r-xs2);} .rng01_5 a {color: #FFF !important;} /*Kontakt/Shop*/ #mobile_nav .contact a {display: block; width: 100%; padding: 8px; background: #00AAF0; color: #FFF !important; text-align: center; text-transform: uppercase; font-size: var(--fs-xl1); font-weight: 500; letter-spacing: 1px; clip-path: polygon(0 0, calc(100% - var(--gp1-r-xs1)) 0, 100% var(--gp1-r-xs1), 100% 0, calc(100% - (var(--gp1-r-xs1) + var(--gp1-r-xs2))) 0, 100% calc(var(--gp1-r-xs1) + var(--gp1-r-xs2)), 100% 100%, 0 100%)} #mobile_nav .shop a {display: block; width: 100%; padding: 8px; background: #0fca6f; color: #FFF !important; text-align: center; text-transform: uppercase; font-size: var(--fs-xl1); font-weight: 500; letter-spacing: 1px; clip-path: polygon(0 0, calc(100% - var(--gp1-r-xs1)) 0, 100% var(--gp1-r-xs1), 100% 0, calc(100% - (var(--gp1-r-xs1) + var(--gp1-r-xs2))) 0, 100% calc(var(--gp1-r-xs1) + var(--gp1-r-xs2)), 100% 100%, 0 100%)} } /***********/ /*** HERO ***/ .hero01 {width: 100%; background-repeat: no-repeat !important; background-size: cover !important; position: relative;} .hero01 .end {width: 100%; aspect-ratio: 8/1;} .hero01 .end:before {content:""; width: 100%; aspect-ratio: 8/1; background: #FFF; position: absolute; z-index: 2; left: 0; bottom: -0.5px; clip-path: polygon(0 var(--gp1-r), 70% 100%, 70% 101%, 0 101%);} .hero01 .end:after {content:""; width: 100%; aspect-ratio: 8/1; background: #00AAF0; position: absolute; left: 0; bottom: -0.5px; clip-path: polygon(0 0, 70% 100%, 70% 101%, 0 101%); opacity: .75;} .hero01 .wrap > div {position: relative; height: 430px; display: flex; align-items: center; margin-top: var(--navheight);} .htxt {width: fit-content; max-width: 530px; display: flex; flex-direction: column; gap: var(--gp1-r-xs1); position: relative; z-index: 5;} .htxt .fade {position: absolute; z-index: -1; height: var(--fs-xl1); width: 100%; top: var(--fs-xl1); background: url(/wp-content/uploads/fade.webp); background-size: 500px; filter: blur(20px); animation: hfade_bg 5s linear infinite; opacity: 0;} @keyframes hfade_bg { from {background-position: 0 0;} to {background-position: 500px 0;} } .hero01 .l1 {display: block; text-align: center; font-size: var(--fs-xl3); color: #333; font-weight: 500; white-space: nowrap;} .hero01 .line {width: 60%; height: 3px; margin: auto; background: #FFF; box-shadow: 0 0 20px rgba(0,170,240, 0.7), 0 0 50px rgba(0,170,240, 0.7), 0 0 10px rgba(0,170,240, 0.05);} .hero01 .line:before {content:""; display: block; width: 75%; height: 3px; margin: auto; background: #00AAF0;} .hero01 .l2 {display: block; text-align: center; font-size: var(--fs-xl1); color: #333;} .hero01 .l2 b {font-weight: 700; color: #00AAF0} .hsol_wrap {display: block; position: relative; height: 80px;} .hsol_wrap > div {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);} .hero01 .hsol {padding: 8px 16px; color: #FFF; font-weight: 500; margin: 16px auto; text-transform: uppercase; width: fit-content; display: flex; align-items: center; gap: 8px; position: relative; transform: translate(0, 30px); opacity: 0; backdrop-filter: blur(3px);} .hsolani {animation: hsol 3s 0s;} .hero01 .hsol .bg {background-size: 250% 250% !important; background-position: left; position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; animation: hsolbg 5s infinite; border-radius: 2px;} .hero01 .hsol span, .hero01 .hsol svg {position: relative; z-index: 1; font-size: var(--fs-xl1); letter-spacing: 2px;} .hero01 .hsol svg {display: block; width: 32px;} .hero01 .hsol .s1 {fill: none; stroke: #FFF; stroke-width: 2.5px;} .hsol.fadein {animation: hsol_fadein 0.5s .3s forwards;} .hsol.fadeout {animation: hsol_fadeout 0.5s forwards;} @keyframes hsol_fadein { 0% {transform: translate(0, 30px); opacity: 0;} 100% {transform: translate(0, 0px); opacity: 1;} } @keyframes hsol_fadeout { 0% {transform: translate(0, 0px); opacity: 1;} 100% {transform: translate(0, -30px); opacity: 0;} } .hero01 .hsol[hsol="1"] .bg {background: linear-gradient(to right, #008FCC88 0%,#00AAF088 100%); box-shadow: 0 10px 20px -10px #00AAF088;} .hero01 .hsol[hsol="2"] .bg {background: linear-gradient(to right, #0099B888 0%,#00B6DA88 100%); box-shadow: 0 10px 20px -10px #00B6DA88;} .hero01 .hsol[hsol="3"] .bg {background: linear-gradient(to right, #01A29A88 0%,#01C2B988 100%); box-shadow: 0 10px 20px -10px #01C2B988;} .hero01 .hsol[hsol="4"] .bg {background: linear-gradient(to right, #2BB67988 0%,#2FC98688 100%); box-shadow: 0 10px 20px -10px #2FC98688;} .hero01 .hsol[hsol="5"] .bg {background: linear-gradient(to right, #5DA92388 0%,#80D73F88 100%); box-shadow: 0 10px 20px -10px #80D73F88;} @keyframes hsolbg { 0% {background-position: left;} 50% {background-position: right;} 10% {background-position: left;} } /*Animation*/ @media screen and (min-width : 681px){ .hero01 .line {width: 0; opacity: 0; transition: all 1s;} .hero01.inview .line {width: 100%; opacity: 1;} .hero01 .l1 {transform: translate(0, 100%); clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); opacity: 0; transition: transform 1s 1s, clip-path 1s 1s, opacity 1s 1s;} .hero01.inview .l1 {transform: translate(0, 0); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity: 1;} .hero01 .l2 {transform: translate(0, -100%); clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); transition: transform 1s 1s, clip-path 1s 1s, opacity 1s 1s;} .hero01.inview .l2 {transform: translate(0, 0); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity: 1;} .hero01.inview .htxt .fade {opacity: 1; transition: opacity 2s 2s;} } @media (orientation: portrait) { @media screen and (max-width : 800px){ .hero01 .l1 {font-size: var(--fs-xl2);} .hero01 .l2 {font-size: calc(var(--fs1) + var(--fs-xs3));} } @media screen and (max-width : 680px){ .hsol_wrap, .htxt .fade {display: none;} .htxt {width: 350px;} .hero01 .wrap > div {height: 230px;} } @media screen and (max-width : 580px){ .htxt {width: 330px;} .hero01 .wrap > div {height: 200px;} } @media screen and (max-width : 480px){ .htxt {width: 250px;} .hero01 .wrap > div {height: 170px;} .hero01 .l1 {font-size: var(--fs-xl1);} .hero01 .l2 {font-size: calc(var(--fs1));} } @media screen and (max-width : 380px){ .htxt {width: 200px;} .hero01 .wrap > div {height: 170px;} .hero01 .l1 {font-size: var(--fs-xl1);} .hero01 .l2 {font-size: calc(var(--fs1));} } } @media (orientation: landscape) { @media screen and (max-width : 1280px){ .hero01 .wrap > div {height: 300px;} .htxt {width: fit-content;} } @media screen and (max-width : 800px){ .hsol_wrap, .htxt .fade {display: none;} .hero01 .wrap > div {height: 180px;} .htxt {width: 340px;} } } .hero-intro {position: relative; z-index: 5;} .hero-intro p:nth-of-type(1) {width: 70%;} @media (orientation: portrait) { @media screen and (max-width : 680px){ .hero-intro p:nth-of-type(1) {width: 100%;} } } /***********/ /*** SMALL HERO ***/ .smallhero {width: 100%; padding-top: calc(var(--navheight) + 50px); background-position: top right !important; background-repeat: no-repeat !important; background-size: cover !important; position: relative;} .smallhero > div {position: relative;} @media screen and (max-width : 1024px){ .smallhero > div > div:nth-of-type(1) {aspect-ratio: 6/1;} .smallhero > div > div:nth-of-type(2) {aspect-ratio: 6/1;} } /***********/ /*** HERO BACKGROUNDS ***/ .hbg1 {background: url(/wp-content/uploads/hero01.webp) center no-repeat; background-size: cover !important;} @media screen and (max-width : 1800px){ .hbg1 {background: url(/wp-content/uploads/hero01-2000.webp) left center no-repeat;} } @media (orientation: portrait) { @media screen and (max-width : 1000px){ .hbg1 {background: url(/wp-content/uploads/hero01-1000.webp) left center no-repeat;} } } .smallhero.hbg1 {background: url(/wp-content/uploads/hero01-small.webp) center top no-repeat; background-size: cover !important;} @media screen and (max-width : 1800px){.smallhero.hbg1 { background: url(/wp-content/uploads/hero01-small-1500.webp) center top no-repeat;} } /***********/ /*** BUTTONS ***/ .buttonwrap {display: flex; gap: var(--gp1-r-xs1) var(--gp1-r); flex-wrap: wrap;} .buttonwrap.cnt {justify-content: center;} /*Button1*/ .button1 {display: flex; align-items: center; width: fit-content; position: relative; transition: filter .4s;} .button1 span {display: block; width: calc(100% - (var(--gp1-r) + var(--gp1-r-xs1))); width: fit-content; padding: calc(var(--gp1-r-xs2) + var(--gp1-r-xs3)) var(--gp1-r) calc(var(--gp1-r-xs2) + var(--gp1-r-xs3)) calc(var(--gp1-r) - var(--gp1-r-xs2)); font-weight: 500; letter-spacing: .5px; transition: color .4s;} .button1 .icon {width: calc(var(--gp1-r) + var(--gp1-r-xs1)); clip-path: polygon(0 0, calc(100% - var(--gp1-r-xs1)) 0, 100% 100%, 0 100%); height: 100%; display: flex; justify-content: center; align-items: center;} .button1 .icon:after {content:""; display: block; width: calc(var(--gp1-r-xs2) + var(--gp1-r-xs2)); height: calc(var(--gp1-r-xs2) + var(--gp1-r-xs2)); position: relative; left: calc(var(--gp1-r-xs3) * -1); background-size: contain !important;} .button1 .bg {position: absolute; width: 100%; height: 100%; transition: all .4s; z-index: -1; clip-path: polygon(0 0, calc(100% - var(--gp1-r-xs1)) 0, 100% var(--gp1-r-xs1), 100% 0, calc(100% - (var(--gp1-r-xs1) + var(--gp1-r-xs3))) 0, 100% calc(var(--gp1-r-xs1) + var(--gp1-r-xs3)), 100% 100%, 0 100%)} .button1 svg {filter: drop-shadow(1px 1px 1px rgba(0,0,0, .4)); transition: all .4s;} .button1 a:hover svg, .button1 button:hover svg {filter: drop-shadow(1px 1px 1px rgba(0,0,0, .7));} /*Button2*/ .button2 {display: flex; align-items: center; width: fit-content; position: relative; transition: filter .4s;} .button2 span {display: block; width: calc(100% - (calc(var(--gp1) + var(--gp1-xs2)))); width: fit-content; padding: calc(var(--gp1-xs3) + var(--gp1-xs3)) var(--gp1-xs1) calc(var(--gp1-xs3) + var(--gp1-xs3)) calc(var(--gp1-xs2) - var(--gp1-xs3)); font-size: var(--fs-xs1); font-weight: 500; letter-spacing: .5px; transition: color .4s; white-space: nowrap;} .button2 .icon {width: calc(var(--gp1) + var(--gp1-xs2)); clip-path: polygon(0 0, calc(100% - var(--gp1-xs1)) 0, 100% 100%, 0 100%); height: 100%; display: flex; justify-content: center; align-items: center;} .button2 .icon:after {content:""; display: block; width: calc(var(--gp1-xs2) + var(--gp1-xs2)); height: calc(var(--gp1-xs2) + var(--gp1-xs2)); position: relative; left: calc(var(--gp1-xs3) * -1); background-size: contain !important;} .button2 .bg {position: absolute; width: 100%; height: 100%; transition: all .4s; z-index: -1; clip-path: polygon(0 0, calc(100% - var(--gp1-xs2)) 0, 100% var(--gp1-xs2), 100% 0, calc(100% - (var(--gp1-xs2) + var(--gp1-xs3))) 0, 100% calc(var(--gp1-xs2) + var(--gp1-xs3)), 100% 100%, 0 100%)} .button2 svg {filter: drop-shadow(1px 1px 1px rgba(0,0,0, .4)); transition: all .4s;} .button2 a:hover svg, .button2 button:hover svg {filter: drop-shadow(1px 1px 1px rgba(0,0,0, .7));} .bico-arr01:after {background: var(--arrico01) center no-repeat;} .bico-pdf:after {background: var(--pdfico) center no-repeat;} /*Farbe1*/ .buttoncol1 {border: none; filter: drop-shadow(0px 8px 8px #3ab1e140);} .buttoncol1:hover {filter: drop-shadow(0px 8px 8px #3ab1e180);} .buttoncol1 span {color: #FFF;} .buttoncol1:hover span {color: #FFF;} .buttoncol1 .bg {background: var(--grd01); background-size: 300%; background-position: left;} .buttoncol1 .icon {background: #444;} .buttoncol1:hover .bg {background-position: right;} /*Farbe2*/ .buttoncol2 {border: none; filter: drop-shadow(0px 8px 8px #56bee940);} .buttoncol2:hover {filter: drop-shadow(0px 8px 8px #8fc9e080);} .buttoncol2 span {color: #333;} .buttoncol1:hover span {color: #000;} .buttoncol2 .bg {background: #FFF; background-size: 300%; background-position: left;} .buttoncol2 .icon {background: #222;} .buttoncol2 .icon:after {filter: sepia(90%) saturate(1451%) hue-rotate(138deg) brightness(100%) contrast(107%); transition: all .4s;;} .buttoncol2:hover .bg {background-position: right;} @media screen and (max-width : 680px){ .button1 span {padding: var(--gp1-r-xs1) var(--gp1-r) var(--gp1-r-xs1) calc(var(--gp1-r) - var(--gp1-r-xs2));} } /***********/ /*** LISTEN ***/ .list0 {display: flex; flex-direction: column; gap: var(--gp1-r);} .list0 li {padding-left: var(--gp1-r); position: relative;} .list0 li:before {content: ""; display: block; width: 6px; height: 6px; background: #00AAF0; position: absolute; left: 0px; top: calc(50% - 4px);} /*Liste1*/ .list1 {display: flex; flex-direction: column; gap: var(--gp1-r);} .list1 li {border-left: 4px solid #00AAF0; padding-left: var(--gp1-r); position: relative;} .list1 li:before {content: ""; display: block; width: 4px; height: 8px; background: #00AAF0; position: absolute; left: 0px; top: calc(50% - 4px); clip-path: polygon(0 0, 100% 50%, 0 100%);} /*Icon Liste1*/ .list_icos01 {display: grid; gap: var(--gp1-r);} .list_icos01 li {display: flex; gap: var(--gp1-r); align-items: center;} .list_icos01 .ico {background: #35C4FF55; aspect-ratio: 1/1; padding: 6px; border-radius: 6px;} .list_icos01 .ico > div {background: #35C4FF55; aspect-ratio: 1/1; padding: 6px; border-radius: 3px;} .list_icos01 .ico span {display: flex; justify-content: center; align-items: center; background: #35C4FF55; width: 32px; height: 32px; border-radius: 1px; font-size: var(--fs-xl1); font-weight: 600; color: #FFF; text-shadow: 1px 1px 1px rgba(0,0,0, .1); letter-spacing: -1px;} .cat1 .list_icos01 .ico, .cat1 .list_icos01 .ico > div, .cat1 .list_icos01 .ico span {background: linear-gradient(45deg, #008FCC44 0%,#00AAF044 100%)} .cat2 .list_icos01 .ico, .cat2 .list_icos01 .ico > div, .cat2 .list_icos01 .ico span {background: linear-gradient(45deg, #0099B844 0%,#00B6DA44 100%)} .cat3 .list_icos01 .ico, .cat3 .list_icos01 .ico > div, .cat3 .list_icos01 .ico span {background: linear-gradient(45deg, #01A29A44 0%,#01C2B944 100%)} .cat4 .list_icos01 .ico, .cat4 .list_icos01 .ico > div, .cat4 .list_icos01 .ico span {background: linear-gradient(45deg, #2BB67944 0%,#2FC98644 100%)} .cat5 .list_icos01 .ico, .cat5 .list_icos01 .ico > div, .cat5 .list_icos01 .ico span {background: linear-gradient(45deg, #5DA92344 0%,#7AED2545 100%)} @media screen and (max-width : 1000px){ .list_icos01 .ico span {width: 26px; height: 26px;} } @media screen and (max-width : 800px){ .list_icos01, .list_icos01 li {gap: var(--gp1-xs1);} .list_icos01 .ico, .list_icos01 .ico > div {padding: 4px;} } @media screen and (min-width : 1300px) {.rows2 {grid-template-columns: repeat(2,1fr);}} @media screen and (min-width : 500px) and (max-width : 768px){.rows2 {grid-template-columns: repeat(2,1fr);}} /***********/ /*** UNSER ANGEBOT BOX ***/ :root { --offr_ico: var(--gp1-xl2); } .offer {display: flex; align-items: stretch; background: #FFF; box-shadow: var(--shd02); position: relative;} .offer:before {content:""; width: var(--gp1-r-xl3); height: var(--gp1-r-xl3); background: #00AAF0; position: absolute; z-index: -1; top: -8px; left: -8px; opacity: .7;} .offer:after {content:""; width: var(--gp1-r-xl3); height: var(--gp1-r-xl3); background: #00AAF0; position: absolute; z-index: -1; bottom: -8px; right: -8px; opacity: .7;} .offer .pic {width: 50%; overflow: hidden; position: relative;} .offer .txt {width: 50%;} /*Seite bild*/ .offer .pic img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; user-select: none; position: absolute;} .offer .pic > .ttl {width: 75%; max-width: 400px; padding: var(--gp1-r) calc(var(--gp1-r) + var(--gp1-r-xs1)) var(--gp1-r) var(--gp1-r); text-align: center; background: #FFF; position: absolute; top: 0; left: 0; z-index: 2; font-weight: bold; font-size: var(--fs-xl1); clip-path: polygon(-10px -10px, 101% -10px, calc(100% - var(--gp1-r)) 101%, -10px 101%);} /*Seite Icons*/ .icons {display: flex; flex-direction: column; gap: var(--gp1-r); padding: var(--gp1-r-xl1) 0; position: relative; z-index: 2;} .icons > div {display: flex; align-items: center; gap: var(--gp1-r); margin-left: calc(var(--offr_ico) * -0.5); transform: translate(calc(var(--gp1-r-xl2) * -1), 0); opacity: 0;} .icons .icon {width: var(--offr_ico); height: var(--offr_ico); background: var(--grd02); border-radius: 200px; flex-shrink: 0; box-shadow: var(--shd02); display: flex; justify-content: center; align-items: center;} .icons .icon svg {width: 85%; height: 85%; display: block; stroke-linecap: round;} .icons .icon svg .s1 {stroke: #757e82; stroke-width: 1.5px; fill: none;} .icons .icon svg .s2 {stroke: url(#gradient); stroke-width: 3px; fill: none;} .icons > div:nth-child(1) .s2 {stroke: url(#g1);} .icons > div:nth-child(2) .s2 {stroke: url(#g2);} .icons > div:nth-child(3) .s2 {stroke: url(#g3);} .icons > div:nth-child(4) .s2 {stroke: url(#g4);} .icons > div:nth-child(5) .s2 {stroke: url(#g5);} .icons .cont {display: flex; flex-direction: column; gap: var(--gp1-xs2); padding-right: var(--gp1-r);} .icons .cont p {font-size: var(--fs-xs1);} .icons .ttl {font-size: var(--fs-xl2); display: block;} .icons .more {display: block; color: var(--col2); font-weight: bold; text-transform: uppercase; font-size: var(--fs-xs1);} .icons .more:before {content: "\2771 \2771"; margin-right: 8px; font-weight: 300;} .icons .more:hover {color: #000;} /*Animation*/ .offer.inview .icons > div:nth-of-type(1) {transform: translate(0, 0); opacity: 1; transition: all 1.2s 0s;} .offer.inview .icons > div:nth-of-type(2) {transform: translate(0, 0); opacity: 1; transition: all 1.2s 0.2s;} .offer.inview .icons > div:nth-of-type(3) {transform: translate(0, 0); opacity: 1; transition: all 1.2s 0.4s;} .offer.inview .icons > div:nth-of-type(4) {transform: translate(0, 0); opacity: 1; transition: all 1.2s 0.6s;} .offer.inview .icons > div:nth-of-type(5) {transform: translate(0, 0); opacity: 1; transition: all 1.2s 0.8s;} @media screen and (max-width : 680px){ .icons > div {transform: translate(0, var(--gp1-r-xl1));} .offer.inview .icons > div:nth-of-type(1) {transform: translate(0, 0); opacity: 1; transition: all 1s 0s;} .offer.inview .icons > div:nth-of-type(2) {transform: translate(0, 0); opacity: 1; transition: all 1s 0.2s;} .offer.inview .icons > div:nth-of-type(3) {transform: translate(0, 0); opacity: 1; transition: all 1s 0.4s;} .offer.inview .icons > div:nth-of-type(4) {transform: translate(0, 0); opacity: 1; transition: all 1s 0.6s;} .offer.inview .icons > div:nth-of-type(5) {transform: translate(0, 0); opacity: 1; transition: all 1s 0.8s;} } /*Responsive Einstellungen*/ @media screen and (max-width : 1100px){ :root {--offr_ico: 96px;} .offer .pic > .ttl {width: 60%; padding: var(--gp1-xs1) calc(var(--gp1-xs1) + var(--gp1-r-xs2)) var(--gp1-xs1) var(--gp1-xs1); clip-path: polygon(-10px -10px, 101% -10px, calc(100% - var(--gp1-xs1)) 101%, -10px 101%);} .icons {gap: var(--gp1-r-xl1);} .icons .cont {gap: 0;} } @media screen and (max-width : 680px){ :root {--offr_ico: 80px;} .offer {flex-direction: column;} .offer .pic {width: 100%; height: 100%; position: absolute; top: 0; left: 0;} .offer .pic > .ttl {width: 75%; padding: var(--gp1-r) calc(var(--gp1-r) + var(--gp1-r-xs1)) var(--gp1-r) calc(var(--gp1-r) + var(--gp1-r-xs1)); text-align: center; left: 50%; transform: translate(-50%, 0); clip-path: polygon(-1px -1px, 100% -1px, calc(100% - var(--gp1-r)) 100%, var(--gp1-r) 100%);} .icons {padding: var(--gp1-r); gap: calc(var(--offr_ico) * 0.75);} .icons > div {flex-direction: column; gap: var(--gp1-r); margin: 0; background: #FFF; box-shadow: var(--shd02); padding: 0 var(--gp1-r) var(--gp1-r) var(--gp1-r);} .offer .txt {width: 100%; padding-top: 160px; text-align: center;} .icons .icon {margin-top: calc(var(--offr_ico) * -0.5);} .icons .cont p {font-size: var(--fs1);} .icons .cont {gap: var(--gp1-xs1);} } @media screen and (max-width : 400px){ :root {--offr_ico: 64px;} .icons .ttl {font-size: var(--fs-xl1);} } /***********/ /*** BRANCHEN OVERVIEW SMALL ***/ .industries_overview_s {display: grid; gap: var(--gp1-r); grid-template-columns: repeat(2,1fr);} .industries_overview_s > div {background: linear-gradient(45deg, #ffffff 50%,#e8f8ff 100%); padding: var(--gp1-r) calc(var(--gp1-r-xl1) + var(--gp1-r-xs1)) calc(var(--gp1-r) + 6px) var(--gp1-r); box-shadow: var(--shd01); position: relative; transform-style: preserve-3d; backface-visibility: hidden;} .industries_overview_s * {backface-visibility: hidden;} .industries_overview_s > div:after {content:""; display: block; position: absolute; right: 0px; bottom: 0px; width: calc(100% - var(--gp1-r-xl2)); height: 6px; background: #6ad4ff; clip-path: polygon(6px 0, 100% 0, 100% 100%, 0 100%);} /*Titel + Linie*/ .industries_overview_s .ttl {display: block; font-size: var(--fs-xl1); color: #444; font-weight: 500;} .industries_overview_s .line {width: 100%; max-width: var(--gp1-r-xl2); height: 6px; background: #6ad4ff;} /*Blauer Button rechts*/ .industries_overview_s .bttn {display: flex; justify-content: center; align-items: center; width: calc(var(--gp1-r) + var(--gp1-r-xs2)); aspect-ratio: 1/4; position: absolute; right: 0px; top: 50%; transform: translate(0, -50%); background: linear-gradient(135deg, #46c9fe 0%,#00aaf0 100%); clip-path: polygon(0 var(--gp1-r), 100% 0, 100% 100%, 0 calc(100% - var(--gp1-r)));} .industries_overview_s .bttn:after {content: "\2771"; color: #FFF; font-size: var(--fs-xl1);} /*Animation*/ @media screen and (min-width : 681px){ .industries_overview_s > div {transform: perspective(1500px) rotateX(0deg) translate(0,0); transform: perspective(1500px) rotateX(95deg) translate(0,-0px); backface-visibility: hidden;} .industries_overview_s > div:after {width: 0;} .industries_overview_s .line {max-width: 0; transform: translateZ(60px);} .industries_overview_s .ttl, .industries_overview_s p {transform: translateZ(60px);} .industries_overview_s .bttn {transform: translate(0, -100%); opacity: 0;} .industries_overview_s.inview > div {transform: perspective(1500px) rotateX(0deg) translate(0,0);} .industries_overview_s.inview > div:after {width: calc(100% - var(--gp1-r-xl2));} .industries_overview_s.inview .line {max-width: var(--gp1-r-xl2); transform: translateZ(0px);} .industries_overview_s.inview .ttl, .industries_overview_s.inview p {transform: translateZ(0px);} .industries_overview_s.inview .bttn {transform: translate(0, -50%); opacity: 1;} .industries_overview_s > div:nth-of-type(1) {transition: all 1.0s 0.0s;} .industries_overview_s > div:nth-of-type(1):after {transition: all 1.0s 0.5s;} .industries_overview_s > div:nth-of-type(1) .line {transition: all 1.0s 0.5s;} .industries_overview_s > div:nth-of-type(1) .ttl, .industries_overview_s > div:nth-of-type(1) p {transition: all 1.0s 0.5s;} .industries_overview_s > div:nth-of-type(1) .bttn {transition: all 1.0s 0.5s;} .industries_overview_s > div:nth-of-type(2) {transition: all 1.0s 0.1s;} .industries_overview_s > div:nth-of-type(2):after {transition: all 1.0s 0.6s;} .industries_overview_s > div:nth-of-type(2) .line {transition: all 1.0s 0.6s;} .industries_overview_s > div:nth-of-type(2) .ttl, .industries_overview_s > div:nth-of-type(2) p {transition: all 1.0s 0.6s;} .industries_overview_s > div:nth-of-type(2) .bttn {transition: all 1.0s 0.6s;} .industries_overview_s > div:nth-of-type(3) {transition: all 1.0s 0.2s;} .industries_overview_s > div:nth-of-type(3):after {transition: all 1.0s 0.7s;} .industries_overview_s > div:nth-of-type(3) .line {transition: all 1.0s 0.7s;} .industries_overview_s > div:nth-of-type(3) .ttl, .industries_overview_s > div:nth-of-type(3) p {transition: all 1.0s 0.7s;} .industries_overview_s > div:nth-of-type(3) .bttn {transition: all 1.0s 0.7s;} .industries_overview_s > div:nth-of-type(4) {transition: all 1.0s 0.3s;} .industries_overview_s > div:nth-of-type(4):after {transition: all 1.0s 0.8s;} .industries_overview_s > div:nth-of-type(4) .line {transition: all 1.0s 0.8s;} .industries_overview_s > div:nth-of-type(4) .ttl, .industries_overview_s > div:nth-of-type(4) p {transition: all 1.0s 0.8s;} .industries_overview_s > div:nth-of-type(4) .bttn {transition: all 1.0s 0.8s;} } /*Responsive Einstellungen*/ @media screen and (max-width : 680px){ .industries_overview_s {grid-template-columns: repeat(1,1fr);} } /***********/ /*** UNSER SHOP TEASER ***/ .ourshop {background: #333;} .ourshop .inner {position: relative; padding: var(--gp1-r-xl1) 0; margin: var(--gp1-r-xl1) 0;} .ourshop .inner .pics {display: grid; gap: var(--gp1-r); grid-template-columns: repeat(2,1fr); align-items: stretch; position: absolute; z-index: 1; top: calc(var(--gp1-r-xl1) * -1); left: 0; width: 100%; height: calc(100% + var(--gp1-r-xl2));} .ourshop .inner .pic {overflow: hidden; background: #FFF; box-shadow: 0 0 40px rgba(0, 115, 162, 0.1);} .ourshop .inner .pic img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; user-select: none;} /*Mittelteil*/ .ourshop .center {max-width: calc((var(--maxwidth) / 2) + var(--gp1-r-xl3)); width: calc(100% - var(--gp1-r-xl2)); margin: auto; position: relative; z-index: 2;} .ourshop .center:before {content:""; width: var(--gp1-r-xl2); height: var(--gp1-r-xl2); background: #35C4FF; position: absolute; z-index: -1; top: -10px; left: -10px; opacity: .75;} .ourshop .center:after {content:""; width: var(--gp1-r-xl2); height: var(--gp1-r-xl2); background: #35C4FF; position: absolute; z-index: -1; bottom: -10px; right: -10px; opacity: .75;} .ourshop .center > div {background: #FFF; box-shadow: var(--shd02); display: flex; gap: var(--gp1-r-xs1); padding: var(--gp1-r)} .ourshop .center .img {width: 30%; clip-path: polygon(0 0, calc(100% - var(--gp1-r)) 0, 100% 100%, 0 100%);} .ourshop .center .txt {width: 70%;} .ourshop .center .img img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;} /*Animation*/ .ourshop .center {opacity: 0; transform: translate(0, 50px); transition: all 1s;} .ourshop.inview .center {opacity: 1; transform: translate(0, 0);} /*Responsive Einstellungen*/ @media screen and (max-width : 600px){ .ourshop .center:before {top: -5px; left: -5px;} .ourshop .center:after {bottom: -5px; right: -5px;} .ourshop .center > div {flex-direction: column;} .ourshop .center .img {width: 100%; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--gp1-r)), 0 100%); aspect-ratio: 4/3;} .ourshop .center .txt {width: 100%;} .ourshop .center {width: calc(100% - var(--gp1-r-xl1));} .ourshop .inner {padding: 0;} .ourshop .inner .pics {grid-template-columns: repeat(1,1fr); top: calc(var(--gp1-r) * -1); height: calc(100% + var(--gp1-r-xl1));} .ourshop .inner .pics .pic:nth-of-type(1n + 2) {display: none;} } /***********/ /*** BRANCHEN OVERVIEW ***/ .branchen_overview {display: grid; gap: var(--gp1-r); grid-template-columns: repeat(2,1fr);} /*Card*/ .branchen_overview > div {display: flex; align-items: stretch; background: linear-gradient(45deg, #ffffff 50%,#e8f8ff 100%); box-shadow: var(--shd01); position: relative;} .branchen_overview * {transform-style: preserve-3d; backface-visibility: hidden;} .branchen_overview > div:after {content:""; display: block; position: absolute; right: 0px; bottom: 0px; width: calc(50% - var(--gp1-r-xl1)); height: 6px; background: #6ad4ff; clip-path: polygon(6px 0, 100% 0, 100% 100%, 0 100%);} .branchen_overview > div .pic {width: 30%;} .branchen_overview > div .txt {width: 70%; padding: var(--gp1-r);} .branchen_overview > div .pic img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; user-select: none;} .branchen_overview .buttonwrap {margin: var(--gp1-xs1) 0;} /*Linkanker*/ .linkanker_br {position: relative; top: -120px; height: 0px; transform: perspective(1500px) rotateX(-95deg) translate(0px,-380px);} .inview .linkanker_br {position: relative; top: -150px; height: 0px; transform: perspective(1500px) rotateX(0deg) translate(0px,0px) !important;} @media screen and (max-width : 680px){ .linkanker_br, .inview .linkanker_br {position: relative; top: -90px; height: 0px; transform: perspective(1500px) rotateX(0deg) translate(0px,0px) !important;} } /*Animation*/ @media screen and (min-width : 681px){ .branchen_overview > div {transform: perspective(1500px) rotateX(0deg) translate(0,0); transform: perspective(1500px) rotateX(95deg) translate(0,-0px); backface-visibility: hidden;} .branchen_overview > div .pic img {object-position: 20% 50%;} .branchen_overview > div:after {width: 0;} .branchen_overview > div .txt {transform: translateZ(60px);} .branchen_overview.inview > div {transform: perspective(1500px) rotateX(0deg) translate(0,0);} .branchen_overview.inview > div:after {width: calc(50% - var(--gp1-r-xl1));} .branchen_overview.inview > div .pic img {object-position: 50% 50%;} .branchen_overview.inview > div .txt {transform: translateZ(0px);} .branchen_overview > div:nth-of-type(1) {transition: all 1.0s 0.0s;} .branchen_overview > div:nth-of-type(1):after {transition: all 1.0s 0.5s;} .branchen_overview > div:nth-of-type(1) .pic img {transition: all 1.5s 0.0s;} .branchen_overview > div:nth-of-type(2) {transition: all 1.0s 0.1s;} .branchen_overview > div:nth-of-type(2):after {transition: all 1.0s 0.6s;} .branchen_overview > div:nth-of-type(2) .pic img {transition: all 1.5s 0.1s;} .branchen_overview > div:nth-of-type(3) {transition: all 1.0s 0.3s;} .branchen_overview > div:nth-of-type(3):after {transition: all 1.0s 0.7s;} .branchen_overview > div:nth-of-type(3) .pic img {transition: all 1.5s 0.2s;} .branchen_overview > div:nth-of-type(4) {transition: all 1.0s 0.4s;} .branchen_overview > div:nth-of-type(4):after {transition: all 1.0s 0.8s;} .branchen_overview > div:nth-of-type(4) .pic img {transition: all 1.5s 0.3s;} .branchen_overview > div:nth-of-type(5) {transition: all 1.0s 0.5s;} .branchen_overview > div:nth-of-type(5):after {transition: all 1.0s 0.9s;} .branchen_overview > div:nth-of-type(5) .pic img {transition: all 1.5s 0.4s;} .branchen_overview > div:nth-of-type(6) {transition: all 1.0s 0.6s;} .branchen_overview > div:nth-of-type(6):after {transition: all 1.0s 1.0s;} .branchen_overview > div:nth-of-type(6) .pic img {transition: all 1.5s 0.5s;} .branchen_overview > div:nth-of-type(7) {transition: all 1.0s 0.7s;} .branchen_overview > div:nth-of-type(7):after {transition: all 1.0s 1.1s;} .branchen_overview > div:nth-of-type(7) .pic img {transition: all 1.5s 0.6s;} .branchen_overview > div:nth-of-type(8) {transition: all 1.0s 0.8s;} .branchen_overview > div:nth-of-type(8):after {transition: all 1.0s 1.2s;} .branchen_overview > div:nth-of-type(8) .pic img {transition: all 1.5s 0.7s;} .branchen_overview.inview > div:nth-of-type(1) .txt {transition: all 1.0s 0.5s;} .branchen_overview.inview > div:nth-of-type(2) .txt {transition: all 1.0s 0.6s;} .branchen_overview.inview > div:nth-of-type(3) .txt {transition: all 1.0s 0.7s;} .branchen_overview.inview > div:nth-of-type(4) .txt {transition: all 1.0s 0.8s;} .branchen_overview.inview > div:nth-of-type(5) .txt {transition: all 1.0s 0.9s;} .branchen_overview.inview > div:nth-of-type(6) .txt {transition: all 1.0s 1.0s;} .branchen_overview.inview > div:nth-of-type(7) .txt {transition: all 1.0s 1.1s;} .branchen_overview.inview > div:nth-of-type(8) .txt {transition: all 1.0s 1.2s;} } @media screen and (max-width : 1000px){ .branchen_overview {grid-template-columns: repeat(1,1fr);} } @media screen and (max-width : 480px){ .branchen_overview > div {flex-direction: column;} .branchen_overview > div .pic {width: 100%; aspect-ratio: 21/9;} .branchen_overview > div .txt {width: 100%;} .branchen_overview .buttonwrap {justify-content: center;} .branchen_overview .buttonwrap a {flex-grow: 1;} } /***********/ /*** LÖSUNG PRODUCT OVERVIEW ***/ :root { --pcv_width: 512px; } .product_cat_overview {position: relative;} .product_cat_overview .wrap {position: relative; padding: var(--gp1-r-xl2) 0 !important;} .product_cat_overview .bg_box {position: absolute; width: 100%; height: calc(100% - var(--gp1-r-xl2) - var(--gp1-r-xl2)); left: 0; top: var(--gp1-r-xl2); background: url(/wp-content/uploads/blue-green-line-bg.webp) center no-repeat; background-size: cover; /*box-shadow: var(--shd01);*/} /*Carousel*/ .product_cat_overview .slider {position: absolute; left: var(--gp1-r); top: 0px; width: var(--pcv_width); padding: var(--gp1-r) 0; height: 100%; background: #FFF; box-shadow: var(--shd01); overflow: hidden;} .product_cat_overview .slider .inner {display: flex; flex-direction: column; gap: var(--gp1-r); overflow: hidden; padding: 0 var(--gp1-r); position: relative;} .product_cat_overview .slider:before {content:""; width: 100%; height: var(--gp1-r-xl2); position: absolute; top: 0px; left: 0px; z-index: 10; background: linear-gradient(to bottom, #FFF 20%,#FFF0 100%);} .product_cat_overview .slider:after {content:""; width: 100%; height: var(--gp1-r-xl2); position: absolute; bottom: 0px; left: 0px; z-index: 10; background: linear-gradient(to top, #FFF 20%,#FFF0 100%);} .logo_solutions {position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 15; background: linear-gradient(45deg, #F4FAFF 20%,#F0FDFF 100%); transition: all 1s; opacity: 1; display: flex; justify-content: center; align-items: center;} .logo_solutions > div {display: flex; flex-direction: column; gap: var(--gp1-r); position: relative;} .logo_solutions > div strong {display: block; text-align: center; font-size: var(--fs-xl2); font-weight: 600; color: #444;} .logo_solutions > div .logo {display: block; margin: auto; width: 196px; height: auto;} .logo_solutions .lg_fll01 {fill: #333;} .logo_solutions .lg_fll02 {fill: #00AAF0;} .logo_solutions .bg_circle {fill: none; stroke-width: 2.0px; stroke: #00AAF0; stroke-linecap: round; position: absolute; z-index: -1; width: 300px; top: calc(50% - 150px); left: calc(50% - 150px); transform-origin: center !important; transform-box: fill-box; opacity: 0.2; animation: bg_circle 7s infinite linear;} .logo_solutions .bg_circle2 {fill: none; stroke-width: 3.0px; stroke: #00AAF0; stroke-linecap: round; position: absolute; z-index: -1; width: 210px; top: calc(50% - 105px); left: calc(50% - 105px); transform-origin: center !important; opacity: 0.2; animation: bg_circle 7s infinite linear reverse;} .logo_solutions svg {display: block;} .product_cat_overview .slide {background: #FFF; border: 1px solid #dbeef6; border-radius: 8px; padding: 16px 0 0 0; box-shadow: 0 10px 20px -10px rgba(95,135,155, 0.3);} .product_cat_overview .slide .ttl {color: #FFF; display: block; padding: var(--gp1-r-xs3) var(--gp1-r-xs1); text-transform: uppercase; font-weight: 300; font-size: var(--fs1);} .product_cat_overview .slide .end {width: 100%; height: 16px; background: linear-gradient(to right, #c9fffc 20%,#e3f2ff 100%); border-radius: 0 0 8px 8px; border-top: 1px solid #dbeef6;} .product_cat_overview .slide .pictxt {display: flex; gap: 16px; align-items: center; padding: 16px;} .product_cat_overview .slide .pictxt .pic {width: 96px; height: 96px; position: relative;} .product_cat_overview .slide .pictxt .pic img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; user-select: none;} .product_cat_overview .slide .pictxt .txt {flex-shrink: 1; width: calc(100% - 96px - 16px);} /*Content*/ .product_cat_overview .content {padding-left: calc(var(--pcv_width) + var(--gp1-r));} .product_cat_overview .content .inner {padding: var(--gp1-r-xl1);} /*Überschriften*/ .product_cat_overview .ttl {font-size: var(--fs-xl2); font-weight: 500; color: #FFF; padding: 0 var(--gp1-r-xs1); display: flex; gap: var(--gp1-xs3); align-items: center;} .product_cat_overview.cat1 .ttl {background: var(--grd_g01);} .product_cat_overview.cat2 .ttl {background: var(--grd_g02);} .product_cat_overview.cat3 .ttl {background: var(--grd_g03);} .product_cat_overview.cat4 .ttl {background: var(--grd_g04);} .product_cat_overview.cat5 .ttl {background: var(--grd_g05);} .product_cat_overview .ttl svg {width: 1.2em; height: 1.2em; display: block; stroke: #FFF; stroke-width: 2px; fill: none;} @media screen and (max-width : 1400px){ :root {--pcv_width: 440px;} .product_cat_overview .slide .pictxt .txt {font-size: var(--fs-xs1);} .product_cat_overview .slide .ttl {font-size: var(--fs1);} .product_cat_overview .wrap {padding: var(--gp1-r-xl1) 0 !important;} .product_cat_overview .bg_box {height: calc(100% - var(--gp1-r-xl1) - var(--gp1-r-xl1)); top: var(--gp1-r-xl1);} } @media screen and (max-width : 1000px){ :root {--pcv_width: 360px;} .product_cat_overview .content .inner {padding: var(--gp1-r);} .product_cat_overview .slide .pictxt .pic {width: 64px; height: 64px;} .product_cat_overview .slide .pictxt .txt {width: calc(100% - 64px - 16px);} } @media screen and (max-width : 768px){ :root {--pcv_width: 320px;} .logo_solutions > div .logo {width: 128px;} .logo_solutions .bg_circle {width: 240px; top: calc(50% - 120px); left: calc(50% - 120px);} .logo_solutions .bg_circle2 {width: 150px; top: calc(50% - 75px); left: calc(50% - 75px);} } @media screen and (max-width : 680px){ :root {--pcv_width: 260px;} } @media screen and (max-width : 550px){ :root {--pcv_width: 100%;} .product_cat_overview .slider .inner {flex-direction: row; width: fit-content;} .product_cat_overview .slider {display: block; position: relative !important; left: unset; margin-bottom: var(--gp1-r-xl1);} .product_cat_overview .slider:before {content:""; width: var(--gp1-r-xl1); height: 100%; position: absolute; top: 0px; left: 0px; z-index: 10; background: linear-gradient(to right, #FFF 20%,#FFF0 100%);} .product_cat_overview .slider:after {content:""; width: var(--gp1-r-xl1); height: 100%; position: absolute; top: 0px; right: 0px; left: unset; z-index: 10; background: linear-gradient(to left, #FFF 20%,#FFF0 100%);} .product_cat_overview .slide {width: 80vw;} .product_cat_overview .content {padding-left: unset;} .product_cat_overview .bg_box {width: calc(100% - var(--gp1-r) - var(--gp1-r)); left: var(--gp1-r);} .product_cat_overview .content .inner {padding: var(--gp1-r-xl1);} } @keyframes bg_circle { from {transform: rotate(0deg)} to {transform: rotate(360deg)} } /***********/ /*** BLOG TEASER BOXEN ***/ .blog_teaser {display: grid; gap: var(--gp1-r); grid-template-columns: repeat(3,1fr);} .blog_teaser > div {box-shadow: var(--shd02);} .blog_teaser .img {width: 100%; aspect-ratio: 5/3;} .blog_teaser .img img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; user-select: none;} /***********/ /*** DOPPEL BOX ***/ .dblbox {display: grid; gap: var(--gp1-r-xl1); grid-template-columns: repeat(2,1fr);} .dblbox .pic {position: relative; box-shadow: var(--shd002); background: #FFF;} .dblbox .pic img {object-fit: cover; display: block; width: 100%; height: 100%; position: absolute;} .dblbox .pic:before {content:""; width: var(--gp1-r-xl3); height: var(--gp1-r-xl3); background: #00AAF0; position: absolute; z-index: -1; top: -8px; left: -8px; opacity: .7;} .dblbox .pic:after {content:""; width: var(--gp1-r-xl3); height: var(--gp1-r-xl3); background: #00AAF0; position: absolute; z-index: -1; bottom: -8px; right: -8px; opacity: .7;} .dblbox .txt {padding: var(--gp1-r-xl1) 0;} /*Animation*/ @media screen and (min-width : 681px){ .dblbox.hasani .txt > * {transform: translate(0, 50px); opacity: 0; transition: all 1s;} .dblbox.inview .txt > * {transform: translate(0, 0); opacity: 1;} } @media screen and (max-width : 900px){ .dblbox {grid-template-columns: repeat(1,1fr); gap: var(--gp1-r);} .dblbox .txt {order: 2; padding: 0;} .dblbox .pic {position: relative; aspect-ratio: 21/9; order: 1;} .dblbox .pic img {aspect-ratio: 21/9; object-fit: cover; display: block; width: 100%; height: 100%; position: relative;} .dblbox .o1 {order: 1;} .dblbox .o2 {order: 2;} } /***********/ /*** UNIBOX01 ***/ .unibox01 {aspect-ratio: 16/9; position: relative; display: flex; align-items: flex-end;} .unibox01 > img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; user-select: none; position: absolute; z-index: -1;} .unibox01 img.mobile {display: none;} .unibox01 .desc {width: 100%; background: #00AAF0CC; color: #FFF; display: flex; align-items: center; padding: var(--gp1-r-xl1); gap: var(--gp1-r-xl1); backdrop-filter: blur(10px);} .unibox01 .s {width: 25%;} .unibox01 .l {width: 75%;} .unibox01 .desc .sep {width: 1px; background: #FFF; flex-shrink: 0; align-self: stretch;} .unibox01 .ttl1 {display: block; font-size: var(--fs-xl3);} @media screen and (max-width : 1000px){ .unibox01 {aspect-ratio: 4/3;} .unibox01 .desc {padding: var(--gp1-r); gap: var(--gp1-r);} .unibox01 .ttl1 {font-size: var(--fs-xl2);} } @media (orientation: landscape) { @media screen and (max-width : 1300px){ .unibox01 .desc {gap: var(--gp1-r); padding: var(--gp1-r);} } @media screen and (max-width : 800px){ .unibox01 {aspect-ratio: 21/9;} } } @media (orientation: portrait) { @media screen and (max-width : 480px){ .unibox01 img.desk {display: none;} .unibox01 img.mobile {display: block;} .unibox01 {aspect-ratio: 3/4;} .unibox01 .desc {flex-direction: column; justify-content: center; text-align: center; gap: var(--gp1-r-xs1); padding: var(--gp1-r-xs1);} .unibox01 .desc > div {width: 100%;} .unibox01 .desc .sep {width: 50%; height: 1px; margin: auto;} .unibox01 .ttl1 {text-align: center;} } } /***********/ /*** UNIBOX02 ***/ .unibox02 {display: flex; align-items: stretch; box-shadow: var(--shd01);} .unibox02 .txt {width: 65%; padding: var(--gp1-r-xl1); background: var(--grd02); color: #444;} .unibox02 .pic {width: 35%; position: relative; overflow: hidden;} .unibox02 .pic img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; user-select: none; position: absolute;} /*Animation*/ @media screen and (min-width : 681px){ .unibox02.hasani .txt > * {transform: translate(0, 50px); opacity: 0; transition: all 1s;} .unibox02.inview .txt > * {transform: translate(0, 0); opacity: 1;} } @media screen and (max-width : 680px){ .unibox02 {flex-direction: column;} .unibox02 .txt {width: 100%; order: 2;} .unibox02 .pic {width: 100%; aspect-ratio: 21/9; order: 1;} } /***********/ /*** UNIBOX03 ***/ .unibox03 {display: flex; align-items: stretch; box-shadow: var(--shd01);} .unibox03 .txt {width: 40%; padding: var(--gp1-r-xl1); background: var(--grd02); color: #444;} .unibox03 .pic {width: 60%; position: relative; overflow: hidden;} .unibox03 .pictxt {position: absolute; width: calc(100% - var(--gp1-xl1)); padding: var(--gp1-r); background: rgba(255,255,255, .8); box-shadow: 0 5px 15px rgba(0,0,0, 0.1); backdrop-filter: blur(10px); bottom: var(--gp1); left: var(--gp1); color: #333; text-align: center; font-weight: 400; font-size: var(--fs-xl1);} .unibox03 .pic img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; user-select: none; position: absolute;} /*Animation*/ @media screen and (min-width : 681px){ .unibox03.hasani .txt {opacity: 0; transform: translate(0, 50px); transition: all 1s;} .unibox03.inview .txt {opacity: 1; transform: translate(0, 0);} .unibox03.hasani .pictxt {opacity: 0; transform: translate(0, 10px); transition: all 1s .3s;} .unibox03.inview .pictxt {opacity: 1; transform: translate(0, 0);} } @media screen and (max-width : 1200px){ .unibox03 .txt {padding: var(--gp1-r);} .unibox03 .pictxt {padding: var(--gp1-xs1);} } @media screen and (max-width : 680px){ .unibox03 .title1 br {display: none;} .unibox03 {flex-direction: column;} .unibox03 .txt {width: 100%; order: 2;} .unibox03 .pic {width: 100%; aspect-ratio: 21/9; order: 1;} .unibox03 .pictxt {display: none; width: calc(100% - var(--gp1)); padding: var(--gp1-xs1); bottom: var(--gp1-xs1); left: var(--gp1-xs1); font-size: var(--fs);} } /***********/ /*** UNIBOX04 ***/ .unibox04 .inner {background: linear-gradient(to right, transparent 0%, transparent 65%, #46c9fe 65%, #00aaf0 100%);display: flex; gap: var(--gp1-r-xl1); padding: var(--gp1-r-xl1) var(--gp1-r-xl1) var(--gp1-r-xl1) 0;} .unibox04 .inner > .pic {width: 40%; position: relative; box-shadow: var(--shd01);} .unibox04 .inner > .txt {width: 60%; background: var(--grd02); box-shadow: var(--shd01); color: #333; padding: var(--gp1-r)} .unibox04 .inner > .pic img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; user-select: none; position: absolute;} /*Animation*/ @media screen and (min-width : 681px){ .unibox04.hasani .txt > * {transform: translate(0, 50px); opacity: 0; transition: all 1s;} .unibox04.inview .txt > * {transform: translate(0, 0); opacity: 1;} } @media screen and (max-width : 1200px){ .unibox04 .inner {gap: var(--gp1-r); padding: var(--gp1-r) var(--gp1-r) var(--gp1-r) 0;} } @media screen and (max-width : 680px){ .unibox04 .inner {flex-direction: column;} .unibox04 .inner > .pic {width: 100%; aspect-ratio: 21/9;} .unibox04 .inner > .txt {width: 100%;} } /***********/ /*** UNIBOX05 ***/ :root{--ub05_spc: var(--gp1-r-xl2);} .unibox05 {display: flex; gap: var(--ub05_spc);} .unibox05 .pic {width: 50%; position: relative; display: flex; flex-direction: column; filter: drop-shadow(0 5px 10px rgba(12,117,160, .2));} .unibox05 > .txt {width: 50%;} .unibox05 .pic .p1 {width: calc(100% - var(--ub05_spc)); height: 50%; margin-left: var(--ub05_spc); position: relative;} .unibox05 .pic .p2 {width: calc(100% - var(--ub05_spc)); height: 50%; margin-right: var(--ub05_spc); position: relative;} .unibox05 .pic img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; user-select: none; position: absolute;} .unibox05 .p1 .ico {width: var(--ub05_spc); height: var(--ub05_spc); position: absolute; bottom: 0; right: 0; display: flex; justify-content: center; align-items: center;} .unibox05 .p1 .bg {width: var(--ub05_spc); height: var(--ub05_spc); position: absolute; z-index: 1; top: 0; left: 0; opacity: 0.9;} .unibox05 .p1:before {content:""; width: var(--gp1-r-xl1); aspect-ratio: 1/1; position: absolute; left: calc(var(--ub05_spc) * -1); top: 0px; opacity: .9;} .unibox05 .p1:after {content:""; width: var(--gp1-r-xl1); aspect-ratio: 1/1; position: absolute; left: calc(var(--ub05_spc) * -1); top: calc(var(--gp1-r-xl1) + var(--gp1-r-xl1)); opacity: .5;} .unibox05 .p1 .ico svg {display: block; width: 60%; height: 60%; stroke: #FFF; stroke-width: 2px; fill: none; position: relative; z-index: 2;} .unibox05 .p2 .ttl {width: var(--ub05_spc); height: 100%; background: var(--grd02); position: absolute; bottom: 0; right: calc(var(--ub05_spc) * -1); writing-mode: vertical-lr; display: flex; justify-content: center; align-items: center; font-size: var(--fs-xl2); font-weight: 500; color: var(--col2); padding: var(--gp1-r)} .unibox05 .p2 .ttl span {-webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; transform: rotate(180deg);} .unibox05.cat1 .ico .bg, .unibox05.cat1 .ttl span, .unibox05.cat1 .p1:after, .unibox05.cat1 .p1:before {background: var(--grd_g01);} .unibox05.cat2 .ico .bg, .unibox05.cat2 .ttl span, .unibox05.cat2 .p1:after, .unibox05.cat2 .p1:before {background: var(--grd_g02);} .unibox05.cat3 .ico .bg, .unibox05.cat3 .ttl span, .unibox05.cat3 .p1:after, .unibox05.cat3 .p1:before {background: var(--grd_g03);} .unibox05.cat4 .ico .bg, .unibox05.cat4 .ttl span, .unibox05.cat4 .p1:after, .unibox05.cat4 .p1:before {background: var(--grd_g04);} .unibox05.cat5 .ico .bg, .unibox05.cat5 .ttl span, .unibox05.cat5 .p1:after, .unibox05.cat5 .p1:before {background: var(--grd_g05);} @media screen and (max-width : 1100px){ :root{--ub05_spc: var(--gp1-r-xl1);} .unibox05 .p1:before {width: var(--gp1); left: calc(var(--ub05_spc) * -1);} .unibox05 .p1:after {width: var(--gp1); left: calc(var(--ub05_spc) * -1); top: calc(var(--gp1) + var(--gp1)); opacity: .5;} } @media screen and (max-width : 768px){ :root{--ub05_spc: var(--gp1-r-xl2);} .unibox05 {flex-direction: column;} .unibox05 > .txt {width: 100%; order: 2;} .unibox05 .pic {width: 100%; order: 1;} .unibox05 .pic .p1 {height: auto; aspect-ratio: 21/9;} .unibox05 .pic .p2 {height: 180px;} .unibox05 .p2 .ttl {font-size: var(--fs-xl1);} } /***********/ /*** UNIBOX06 ***/ :root{--ub06_spc: var(--gp1-r-xl1);} .unibox06 {position: relative;} .unibox06 > .bg {position: absolute; z-index: -1; left: 0; top: var(--gp1-r-xl1); width: 100%; height: calc(100% - var(--gp1-r-xl2)); margin: 0; background: var(--grd02); box-shadow: var(--shd01);} .unibox06 .wrap {display: flex; gap: var(--ub06_spc);} .unibox06 .txt {width: 70%; margin: var(--ub06_spc) 0; padding: var(--gp1-r) 0;} .unibox06 .pic {width: 30%; position: relative; display: flex; flex-direction: column; filter: drop-shadow(0 2px 10px rgba(12,117,160, .1));} .unibox06 .pic img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; user-select: none; position: absolute;} .unibox06 .pic:before {content: ""; width: var(--gp1-r-xl2); height: var(--gp1-r-xl2); background: #35C4FF; position: absolute; z-index: -1; top: -10px; left: -10px; opacity: .75;} .unibox06 .pic:after {content: ""; width: var(--gp1-r-xl2); height: var(--gp1-r-xl2); background: #35C4FF; position: absolute; z-index: -1; bottom: -10px; right: -10px; opacity: .75;} .unibox06a .txt, .unibox06a .pic {width: 50%;} .unibox06b .txt {width: 500px;} .unibox06b .pic {width: calc(100% - 500px);} /*Animation*/ @media screen and (min-width : 681px){ .unibox06.hasani .txt {opacity: 0; transform: translate(0, 50px); transition: all 1s;} .unibox06.inview .txt {opacity: 1; transform: translate(0, 0);} } @media screen and (max-width : 1200px){ .unibox06b .txt {width: 50%;} .unibox06b .pic {width: 50%;} } @media screen and (max-width : 680px){ .unibox06 .wrap {flex-direction: column;} .unibox06 .txt {order: 2; width: 100%; padding: 0 var(--gp1-r-xl1) var(--gp1-r-xl1) var(--gp1-r-xl1); margin: 0;} .unibox06 .pic {order: 1; width: calc(100% + var(--gp1-r-xl1)); aspect-ratio: 21/9; margin: var(--gp1-r-xl1) calc(var(--gp1-r) * -1) 0 calc(var(--gp1-r) * -1)} .unibox06 > .bg {left: var(--gp1-r); top: 0; width: calc(100% - var(--gp1-r-xl1)); height: 100%; margin: 0;} .unibox06 .pic:before, .unibox06 .pic:after {display: none} } @media screen and (max-width : 480px){ .unibox06 .wrap {gap: var(--gp1-r);} .unibox06 .txt {padding: 0 var(--gp1-r) var(--gp1-r) var(--gp1-r);} .unibox06 .pic {width: calc(100% + var(--gp1-r-xl1)); margin: var(--gp1-r) calc(var(--gp1-r) * -1) 0 calc(var(--gp1-r) * -1)} } /***********/ /*** UNIBOX07 ***/ .unibox07 {display: flex; gap: var(--gp1-r-xl1);} .unibox07 > .pic {width: 50%; position: relative; box-shadow: var(--shd01);} .unibox07 > .txt {width: 50%; padding: var(--gp1-r-xl1) 0} .unibox07 > .pic img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; user-select: none; position: absolute;} .unibox07 > .pic .desc {position: absolute; width: var(--gp1-r-xl2); padding: var(--gp1-r); color: #444; font-size: calc(var(--fs1)); font-weight: 400; background: var(--grd02); height: 100%; writing-mode: vertical-lr; display: flex; justify-content: center; align-items: center; text-align: center;} .unibox07 > .pic .desc span {transform: rotate(180deg);} .unibox07 > div:first-child .desc {right: 0px;} .unibox07 > div:last-child .desc {left: 0px;} /*Animation*/ @media screen and (min-width : 681px){ .unibox07.hasani > .txt {opacity: 0; transform: translate(0, 50px); transition: all 1s;} .unibox07.inview > .txt {opacity: 1; transform: translate(0, 0);} } @media screen and (max-width : 680px){ .unibox07 {flex-direction: column; gap: var(--gp1-r);} .unibox07 > .pic {width: 100%; aspect-ratio: 21/9; order: 1;} .unibox07 > .txt {width: 100%; padding: 0; order: 2;} .unibox07 > .pic .desc {position: absolute; width: fit-content; max-width: 75%; padding: var(--gp1-r-xs1); height: auto; writing-mode: unset; bottom: 0px;} .unibox07 > div:first-child .desc {text-align: right;} .unibox07 > div:last-child .desc {text-align: left;} } /***********/ /*** UNIBOX08 ***/ .unibox08 {display: flex; gap: var(--gp1-r-xl1);} .unibox08 > .txt {width: calc(50% - var(--gp1-r-xl1) - var(--gp1-r-xl1)); padding: 0;} .unibox08 > .mid {width: var(--gp1-r-xl2); background: #FFF; filter: drop-shadow(0 5px 10px rgba(12,117,160, .1)); display: flex; align-items: center;} .unibox08 > .mid:before {content:""; width: 100%; height: 4px; position: absolute; top: 16px; left: 0; opacity: 0.25;} .unibox08 > .mid:after {content:""; width: 100%; height: 4px; position: absolute; bottom: 16px; left: 0; opacity: 0.25;} .unibox08 > .mid .ico {width: 100%; aspect-ratio: 1/1; display: flex; justify-content: center; align-items: center; position: relative;} .unibox08 > .mid .ico:before {content:""; width: 100%; height: 8px; position: absolute; top: -24px; left: 0; opacity: 0.5;} .unibox08 > .mid .ico:after {content:""; width: 100%; height: 8px; position: absolute; bottom: -24px; left: 0; opacity: 0.5;} .unibox08 > .mid .ico svg {display: block; width: 60%; height: 60%; stroke: #FFF; stroke-width: 2px; fill: none; position: relative; z-index: 2;} .unibox08 > .txt:first-child {text-align: right;} .unibox08.cat1 > .mid .ico, .unibox08.cat1 > .mid .ico:before, .unibox08.cat1 > .mid .ico:after, .unibox08.cat1 > .mid:before, .unibox08.cat1 > .mid:after {background: var(--grd_g01);} .unibox08.cat2 > .mid .ico, .unibox08.cat2 > .mid .ico:before, .unibox08.cat2 > .mid .ico:after, .unibox08.cat2 > .mid:before, .unibox08.cat2 > .mid:after {background: var(--grd_g02);} .unibox08.cat3 > .mid .ico, .unibox08.cat3 > .mid .ico:before, .unibox08.cat3 > .mid .ico:after, .unibox08.cat3 > .mid:before, .unibox08.cat3 > .mid:after {background: var(--grd_g03);} .unibox08.cat4 > .mid .ico, .unibox08.cat4 > .mid .ico:before, .unibox08.cat4 > .mid .ico:after, .unibox08.cat4 > .mid:before, .unibox08.cat4 > .mid:after {background: var(--grd_g04);} .unibox08.cat5 > .mid .ico, .unibox08.cat5 > .mid .ico:before, .unibox08.cat5 > .mid .ico:after, .unibox08.cat5 > .mid:before, .unibox08.cat5 > .mid:after {background: var(--grd_g05);} /*Animation*/ @media screen and (min-width : 681px){ .unibox08.hasani > .txt {opacity: 0; transform: translate(0, 50px); transition: all 1s;} .unibox08.inview > .txt {opacity: 1; transform: translate(0, 0);} } @media screen and (max-width : 680px){ .unibox08 {flex-direction: column; gap: var(--gp1-r);} .unibox08 > .txt {width: 100%; padding: 0; text-align: left !important;} .unibox08 > .mid {width: 100%; height: var(--gp1-r-xl2); justify-content: center;} .unibox08 > .mid:before {width: 4px; height: 100%; top: 0; left: 16px; right: unset;} .unibox08 > .mid:after {width: 4px; height: 100%; bottom: 0; right: 16px; left: unset;} .unibox08 > .mid .ico:before {width: 8px; height: 100%; top: 0; left: -24px; right: unset;} .unibox08 > .mid .ico:after {width: 8px; height: 100%; bottom: 0; right: -24px; left: unset;} .unibox08 > .mid .ico {height: 100%; width: auto;} .unibox08 > div:first-child .desc {text-align: right;} .unibox08 > div:last-child .desc {text-align: left;} } /***********/ /*** PODCAST LISTE ***/ .podcasts {display: grid; gap: var(--gp1-r-xs1); grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); max-width: 100%;} .podcasts li {background: var(--grd02); box-shadow: var(--shd01); background-size: 100% 100%; background-position: top; padding: var(--gp1-r-xs2); transition: all .5s;} .podcasts li:hover {box-shadow: var(--shd02); background-size: 150% 150%;} .podcasts .pic svg {display: block; width: 48px; height: 48px; margin: auto;} .podcasts b {display: block; text-align: center; text-transform: uppercase; font-size: var(--fs-xs1); font-weight: 500; transition: all .5s;} .podcasts li:hover b {color: var(--col2);} @media screen and (max-width : 1000px){ .podcasts {grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));} } /***********/ /*** GREENBOX ***/ .greenbox .inner {display: flex; background: url(/wp-content/uploads/qualitaet-und-umweltschutz.webp) no-repeat; background-position: 0px 0; background-size: 1000px;} .greenbox .ttl {width: 310px;} .greenbox .spc {width: 380px;} .greenbox .txt {width: calc(100% - 310px - 380px); padding-top: 420px;} /*Animation*/ @media screen and (min-width : 681px){ .greenbox.hasani .txt > * {transform: translate(0, 50px); opacity: 0; transition: all 1s;} .greenbox.inview .txt > * {transform: translate(0, 0); opacity: 1;} } @media screen and (max-width : 1200px){ .greenbox .inner {background-size: 700px; background-position: 100px 0;} .greenbox .spc {width: 260px;} .greenbox .txt {width: calc(100% - 310px - 260px); padding-top: 320px;} } @media screen and (max-width : 1000px){ .greenbox .inner {background-size: 500px; background-position: 100px 0; flex-direction: column;} .greenbox .spc {display: none;} .greenbox .txt {width: 100%; padding-top: 210px;} .greenbox .txt p:first-of-type {padding-left: 270px;} } @media screen and (max-width : 768px){ .greenbox .txt {padding-top: 280px;} } @media screen and (max-width : 600px){ .greenbox .txt p:first-of-type {padding-left: 0;} .greenbox .inner {background-position: center 90px; background-size: 300px;} } /***********/ /*** CIRCLE ***/ .circle {background: linear-gradient(to right, #befffb 0%,#cbe7ff 100%);} .circle .inner {display: flex; gap: var(--gp1-r); padding: var(--gp1-r-xl1) 0 var(--gp1-r-xs1) 0;} .circle .inner .left {width: 25%; position: relative;} .circle .inner .right {width: 25%; position: relative;} .circle .inner .center {width: 50%;} .circle .inner .center img {display: block; width: 100%; margin-top: 25%} .circle .i2 {display: none !important;} .circle .last {width: 100%; padding: 0 0 var(--gp1-r-xl1) 0;} /*Cards*/ .circle .last .card {max-width: 400px; margin: auto;} .circle .card {display: flex; flex-direction: column; gap: var(--gp1-r-xs1);} .card1 {position: relative; left: 30%; text-align: right; align-items: flex-end;} .card2 {position: relative; right: 30%;} .card3 {position: absolute; bottom: 15%;} .card4 {text-align: center; align-items: center;} .card5 {position: absolute; bottom: 15%; text-align: right; align-items: flex-end;} /*Überschriften*/ .circle .ttl {font-size: var(--fs-xl2); display: block; width: fit-content; color: #FFF; padding: 0 var(--gp1-r-xs1); display: flex; gap: var(--gp1-xs3); align-items: center;} .circle .ttl1 {background: var(--grd_g01);} .circle .ttl2 {background: var(--grd_g02);} .circle .ttl3 {background: var(--grd_g03);} .circle .ttl4 {background: var(--grd_g04);} .circle .ttl5 {background: var(--grd_g05);} .circle .ttl svg {width: 1.2em; height: 1.2em; display: block; stroke: #FFF; stroke-width: 2px; fill: none;} @media screen and (max-width : 1100px){ .circle .ttl {font-size: var(--fs-xl1);} } @media screen and (max-width : 800px){ .circle .ttl {font-size: var(--fs-xl1);} .card3, .card5 {bottom: 0%;} .circle .card {gap: var(--gp1-r-xs2);} .circle .i1 {display: none !important;} .circle .i2 {display: block !important;} } @media screen and (max-width : 680px){ .card1, .card2 {left: 0; right: 0;} .card3, .card5 {position: relative; margin-top: var(--gp1-r-xl1);} } @media screen and (max-width : 550px){ .circle .inner .left {width: 100%;} .circle .inner .right {width: 100%;} .circle .inner .center {display: none;} .circle .inner {gap: var(--gp1); padding: var(--gp1-r-xl1) 0;} } @media screen and (max-width : 400px){ .circle .inner {flex-wrap: wrap;} .circle .card {display: flex; flex-direction: column; text-align: center; align-items: center; /*background: #FFF; padding: var(--gp1-r); box-shadow: var(--shd01);*/} .circle .ttl svg {stroke-width: 3px;} .circle .ttl {font-size: var(--fs-xl2);} } /***********/ /*** OUR VISION ***/ :root {--ov_border: 48px;} .ourvision .inner {display: flex; background: linear-gradient(to right, #c9fffc 0%,#e3f2ff 100%); background: url(/wp-content/uploads/ourvision_bg1.webp) center no-repeat; background-size: cover !important; gap: var(--gp1-r-xl2); padding: 0 var(--gp1-r-xl2); text-align: center; align-items: center; position: relative;} .ourvision .inner:before {content:""; width: var(--gp1-r-xl3); height: var(--gp1-r-xl3); background: #00AAF0; position: absolute; z-index: -1; top: -8px; left: -8px; opacity: .7;} .ourvision .inner:after {content:""; width: var(--gp1-r-xl3); height: var(--gp1-r-xl3); background: #00AAF0; position: absolute; z-index: -1; bottom: -8px; right: -8px; opacity: .7;} .ourvision .inner .txt {width: 55%; padding: calc(var(--gp1-r-xl2) + var(--gp1-r-xl1)) 0; display: flex; flex-direction: column; gap: var(--gp1-r-xl1);} .ourvision .inner .img {width: 45%; position: relative;} .ourvision .subttl {background: rgba(255,255,255, .6); box-shadow: var(--shd01); font-size: var(--fs-xl1); text-shadow: 0 0 6px rgba(255,255,255, .5); position: relative; padding: var(--gp1-r-xs1); font-weight: 400;} .ourvision .subttl:before {content:""; display: block; width: 100px; height: 2px; position: absolute; left: 0px; top: -1px; background: var(--grd04);} .ourvision .subttl:after {content:""; display: block; width: 100px; height: 2px; position: absolute; bottom: 0px; right: -1px; background: var(--grd04);} .ourvision .inner .img img {display: block; width: 100%; border-radius: var(--ov_border); position: relative; z-index: 3;} .ourvision .inner .img:after {content:""; display: none; width: 100%; height: 100%; background: linear-gradient(45deg, #00aaf0 0%,#2bff98 100%); border-radius: var(--ov_border); opacity: .5; transform: rotate(15deg); position: absolute; z-index: 2; left: 0px; top: 0px;} .ourvision .inner .img:before {content:""; display: none; width: 100%; height: 100%; box-shadow: inset 0 0 0 2px rgba(0,0,0, 0.7); border-radius: var(--ov_border); opacity: .5; transform: rotate(-7.5deg); position: absolute; z-index: 1; left: 0px; top: 0px;} /*Animation*/ .ourvision .inner .txt {transform: translate(0, 50px); opacity: 0; transition: all 1s;} .ourvision .inner .img {opacity: 0; transition: all 2s;} .ourvision .inner .img img {transform: rotateZ(100deg); transition: all 2s;} .ourvision .inner .img:after {transform: rotate(100deg); transition: all 2s;} .ourvision .inner .img:before {transform: rotate(100deg); transition: all 2s;} .ourvision.inview .inner .txt {transform: translate(0, 0); opacity: 1;} .ourvision.inview .inner .img {opacity: 1;} .ourvision.inview .inner .img img {transform: rotateZ(0deg);} .ourvision.inview .inner .img:after {transform: rotate(-120deg);} .ourvision.inview .inner .img:before {transform: rotate(-97.5deg);} @media screen and (max-width : 1500px){ .ourvision .inner {gap: var(--gp1-r-xl1); padding: 0 var(--gp1-r-xl1);} } @media screen and (max-width : 1100px){ .ourvision .inner .txt {padding: var(--gp1-r-xl1) 0;} .ourvision .inner {gap: var(--gp1-r-xl1); padding: 0 var(--gp1-r-xl1);} :root {--ov_border: 32px;} } @media screen and (max-width : 680px){ .ourvision .inner {flex-direction: column; padding: var(--gp1-r-xl2) var(--gp1-r-xl1); background: linear-gradient(to right, #c9fffc 0%,#e3f2ff 100%);} .ourvision .inner .txt {width: 100%; order: 2; padding: 0;} .ourvision .inner .img {width: 75%; order: 1;} } @media screen and (max-width : 380px){ :root {--ov_border: 20px;} } /***********/ /*** SCHULUNGEN ***/ /*Übersicht*/ .training_overview {display: flex; flex-direction: column; gap: var(--gp1-r-xl1);} .training_overview .event {display: flex; gap: var(--gp1-r); align-items: center; justify-content: space-between;} .training_overview .ttl b {font-size: var(--fs-xl2); font-weight: 500;} .training_overview .ttl {width: 40%;} .training_overview .ttl .date {display: flex; align-items: center; gap: var(--gp1-r-xs1)} .training_overview .ttl svg {display: block; width: 22px;} .training_overview .ttl .s1 {fill: none; stroke: #000; stroke-width: 2px;} .training_overview .details {width: 35%; display: grid; gap: var(--gp1-r-xs1); grid-template-columns: repeat(3,1fr);} .training_overview .details > div, .training_overview .details > a {background: var(--grd02); padding: var(--gp1-r-xs1); text-align: center; border-radius: 8px; box-shadow: var(--shd01); width: 100%; overflow: hidden; display: flex; flex-direction: column; gap: var(--gp1-r-xs1);} .training_overview .details svg {width: calc(var(--gp1-r) + var(--gp1-r-xs1)); display: block; margin: auto;} .training_overview .details .s1 {fill: none; stroke: #000; stroke-width: 2px;} .training_overview .details span {color: var(--col2); font-weight: 500; font-size: var(--fs-xs1); hyphens: auto;} .training_overview .bttn {width: 25%; white-space: nowrap;} .training_overview .line {height: 1px; background: rgba(0,0,0, 0.1);} /*.training_overview .line:last-of-type {display: none;}*/ .no_events {font-size: var(--fs-xl1); text-align: center; font-weight: 800; display: flex; flex-direction: column; gap: var(--gp1-r)} .no_events b {display: block; width: var(--gp1-r-xl3); height: 4px; background: #00aaf0; margin: auto;} .no_events .l1 {font-size: var(--fs-xl2); display: block;} .no_events .l2 {font-size: var(--fs1); display: block; font-weight: 400; color: #999;} @media screen and (max-width : 1200px){ .training_overview .event {flex-wrap: wrap;} .training_overview .ttl {width: calc(50% - var(--gp1-r));} .training_overview .details {width: calc(50% - var(--gp1-r));} .training_overview .bttn {width: 100%;} } @media screen and (max-width : 680px){ .training_overview .event {gap: var(--gp1-r-xl1);} .training_overview .ttl {width: 100%; text-align: center;} .training_overview .ttl .date {width: fit-content; margin: auto;} .training_overview .details {width: 100%;} .training_overview .bttn {width: 100%;} } /***********/ /*** KARRIERE ***/ /*Übersicht*/ .jobs_overview {display: flex; flex-direction: column; gap: var(--gp1-r);} .jobs_overview .job {background: #FFF; box-shadow: var(--shd01); display: flex;} .jobs_overview .job .pic {width: calc(100% - 700px); position: relative;} .jobs_overview .job .pic img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; user-select: none; position: absolute;} .jobs_overview .job .txt {width: 700px; background: var(--grd08);} /*Überschrift*/ .jobs_overview .ttl {padding-top: var(--gp1-r); text-align: center; position: relative;} .jobs_overview .ttl h3 {font-size: var(--fs-xl1); hyphens: auto;} .jobs_overview .ttl span {font-size: var(--fs1);} .jobs_overview .ttl .end {width: 100%; height: var(--gp1-r-xl1); position: relative;} .jobs_overview .ttl .end:before {content: ""; width: 100%; height: 100%; background: #FFF; position: absolute; z-index: 2; left: 0; bottom: -0.5px; clip-path: polygon(0 12px, var(--gp1-r-xl3) 100%, 0 100%);} .jobs_overview .ttl .end:after {content: ""; width: 100%; height: 100%; background: #00AAF0; position: absolute; left: 0; bottom: -0.5px; clip-path: polygon(0 0, var(--gp1-r-xl3) 100%, 0 100%); opacity: .75;} /*Details*/ .jobs_overview .details {display: flex; gap: var(--gp1-r-xs1); justify-content: flex-end; margin-bottom: var(--gp1-r);} .jobs_overview .details > div {display: flex; align-items: stretch; filter: drop-shadow(0 2px 4px rgba(12,117,160, 0.1));} .jobs_overview .details > div > .ico {background: #80daff; display: flex; align-items: center; padding: 0 4px; border-radius: 4px 0 0 4px;} .jobs_overview .details > div span {padding: 4px 8px; font-size: var(--fs1); background: #FFF; border-radius: 0 4px 4px 0; hyphens: auto; display: flex; align-items: center;} .jobs_overview .details svg {display: block; width: 20px; height: 20px; fill: none; stroke: #000; stroke-width: 2px;} /*Inhalt*/ .jobs_overview .job .content {padding: var(--gp1-r); background: #FFF;} .jobs_overview .job .bttn {padding: var(--gp1-r) var(--gp1-r) var(--gp1-r) var(--gp1-r); background: #FFF;} @media screen and (max-width : 1000px){ .jobs_overview .job .pic {width: calc(100% - 400px);} .jobs_overview .job .txt {width: 400px;} } @media screen and (max-width : 550px){ .jobs_overview .details {justify-content: center;} .jobs_overview .job {flex-direction: column;} .jobs_overview .job .pic {width: 100%; display: none;} .jobs_overview .job .txt {width: 100%;} } /*DETAIL ANSICHT*/ .job_detail {display: flex; flex-direction: column;} /*Header*/ .job_detail .header {width: 100%; position: relative; padding: var(--gp1-r-xl1); background: var(--grd02);} .job_detail .header img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; user-select: none; position: absolute; top: 0; left: 0; opacity: .7;} .job_detail .header .ttl {position: relative; z-index: 3; padding: var(--gp1-r); background: rgba(255,255,255, .8); box-shadow: 0 5px 15px rgba(0,0,0, 0.1); backdrop-filter: blur(10px); color: #333; text-align: center; font-weight: 400; font-size: var(--fs-xl1); hyphens: auto;} /*Details*/ .job_detail .details {display: flex; gap: var(--gp1-r);} .job_detail .details .txt {width: 70%; background: #FFF; box-shadow: var(--shd01); padding: var(--gp1-r)} .job_detail .details .summary {width: 30%; padding: var(--gp1) 0;} .job_detail .details .summary .job_icons {display: flex; gap: var(--gp1-r); flex-direction: column; margin-bottom: var(--gp1-r);} .job_detail .details .summary .job_icons > div {display: flex; width: 100%; align-items: stretch; filter: drop-shadow(0 2px 4px rgba(0,0,0, 0.1));} .job_detail .details .summary .job_icons > div .ico {background: #80daff; display: flex; align-items: center; padding: 4px 8px; border-radius: 4px 0 0 4px;} .job_detail .details .summary .job_icons > div span {padding: 8px 16px; flex-grow: 1; font-size: var(--fs-xl1); background: #FFF; border-radius: 0 4px 4px 0; display: flex; align-items: center;} .job_detail .details .summary .job_icons svg {display: block; width: 30px; height: 30px; fill: none; stroke: #000; stroke-width: 2px;} .job_detail .details .summary .button1 {white-space: nowrap;} .job_detail .details .box {position: sticky; top: calc(var(--navheight) + var(--gp1-r));} @media screen and (max-width : 1024px){ .job_detail .details {flex-direction: column-reverse; gap: 0;} .job_detail .details .summary .job_icons {flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 16px;} .job_detail .details .summary .job_icons > div {width: fit-content;} .job_detail .details .txt, .job_detail .details .summary {width: 100%;} .job_detail .details .summary .job_icons > div .ico {padding: 2px 4px;} .job_detail .details .summary .job_icons > div span {padding: 4px 8px;font-size: var(--fs1);} } @media screen and (max-width : 680px){ .job_detail .details .summary .job_icons svg {width: 20px; height: 20px;} } /***********/ /*** UNSERE LÖSUNGEN ***/ :root {--or_circle: 400px;} .oursolutions {display: flex; position: relative;} .oursolutions > div {width: 50%;} /*Links*/ .oursolutions .left {background: url(/wp-content/uploads/ourvision_bg1.webp) center no-repeat; background-size: cover; display: flex; align-items: center; position: relative;} .oursolutions .left .inner {width: calc(100% - (var(--or_circle) / 2)); padding: var(--gp1-r-xl1); height: 100%; display: flex; flex-direction: column; justify-content: space-between;} .oursolutions .left .inner > div:nth-of-type(2) {border-left: 4px solid #00AAF0; padding-left: var(--gp1-xs1);} .oursolutions .left .l1 {font-size: var(--fs-xl1); font-weight: 400;} .oursolutions .left .l2 {font-size: var(--fs1);} /*Rechts*/ .oursolutions .right {min-height: 700px; background: url(/wp-content/uploads/unsere-loesungen.webp) center left no-repeat; background-size: auto 600px; display: flex; align-items: center; justify-content: flex-end;} .oursolutions .right .inner {width: calc(100% - (var(--or_circle) / 2) - 85px); padding: var(--gp1-r); display: flex; flex-direction: column; gap: var(--gp1-r);} .oursolutions .right h3 {font-size: var(--fs-xl1);} .oursolutions .right .ttl {display: flex; align-items: center; gap: var(--gp1-r-xs3)} .oursolutions .right svg {display: block; width: var(--fs-xl1); fill: none; stroke: #000; stroke-width: 2px; float: left;} .oursolutions .right .inner p {font-size: var(--fs-xs1);} .oursolutions .right .inner .more {display: block; font-weight: 600; text-align: right; font-size: var(--fs-xs1); text-transform: uppercase; color: var(--col2); margin-top: var(--gp1-r-xs1);} .oursolutions .right .inner .more:hover {color: #444;} /* .oursolutions .ttl1 {background: linear-gradient(to right, #008FCC 0%,#00AAF0 100%); color: #FFF;} .oursolutions .ttl2 {background: linear-gradient(to right, #0099B8 0%,#00B6DA 100%); color: #FFF;} .oursolutions .ttl3 {background: linear-gradient(to right, #01A29A 0%,#01C2B9 100%); color: #FFF;} .oursolutions .ttl4 {background: linear-gradient(to right, #2BB679 0%,#2FC986 100%); color: #FFF;} .oursolutions .ttl5 {background: linear-gradient(to right, #5DA923 0%,#80D73F 100%); color: #FFF;} */ .oursolutions .ttl1 {color: #008FCC;} .oursolutions .ttl2 {color: #0099B8;} .oursolutions .ttl3 {color: #01A29A;} .oursolutions .ttl4 {color: #2BB679;} .oursolutions .ttl5 {color: #5DA923;} /*Mittelteil*/ .oursolutions .center {position: absolute; z-index: 5; width: var(--or_circle); height: var(--or_circle); top: 50%; left: calc(50% - 4px); transform: translate(-50%, -50%); background: var(--grd02); box-shadow: var(--shd01); border-radius: 400px; display: flex; justify-content: center; align-items: center;} .oursolutions .center > div {display: flex; flex-direction: column; gap: var(--gp1-r-xs1);} .oursolutions .center svg {display: block; margin: auto; width: calc(var(--or_circle) * 0.5); height: auto;} .oursolutions .center strong {text-align: center; font-size: var(--fs-xl2); font-weight: 600;} .oursolutions .center .lg_fll01 {fill: #333} .oursolutions .center .lg_fll02 {fill: #00AAF0} .oursolutions .center.mobile {display: none;} /*Animation*/ @media screen and (min-width : 681px){ .oursolutions .right .inner > div {transform: translate(64px, 0); opacity: 0;} .oursolutions .center > div {transform: translate(0, 50px); opacity: 0;} .oursolutions.inview .right .inner > div {transform: translate(0, 0); opacity: 1;} .oursolutions.inview .center > div {transform: translate(0, 0); opacity: 1;} .oursolutions .center > div {transition: all 1s 0s;} .oursolutions .right .inner > div:nth-of-type(1) {transition: all 1s 0.0s;} .oursolutions .right .inner > div:nth-of-type(2) {transition: all 1s 0.15s;} .oursolutions .right .inner > div:nth-of-type(3) {transition: all 1s 0.30s;} .oursolutions .right .inner > div:nth-of-type(4) {transition: all 1s 0.45s;} .oursolutions .right .inner > div:nth-of-type(5) {transition: all 1s 0.60s;} } @media screen and (max-width : 1300px){ :root {--or_circle: 300px;} .oursolutions .right {min-height: 550px; background-size: auto 450px;} .oursolutions .right .inner {width: calc(100% - (var(--or_circle) / 2) - 64px);} .oursolutions .center strong {font-size: var(--fs-xl1);} } @media screen and (max-width : 1000px){ :root {--or_circle: 200px;} .oursolutions .right {min-height: 400px; background-size: auto 310px;} .oursolutions .right .inner {width: calc(100% - (var(--or_circle) / 2) - 48px);} .oursolutions .center strong {font-size: var(--fs1);} .oursolutions .left .inner {padding: var(--gp1-r);} } @media screen and (max-width : 768px){ .oursolutions {flex-direction: column;} .oursolutions > div {width: 100%;} .oursolutions .left .inner {width: 100%; padding-bottom: calc((var(--or_circle) / 2) + var(--gp1-r-xl1)); gap: var(--gp1-r-xl1); text-align: center;} .oursolutions .right {min-height: unset; background: url(/wp-content/uploads/unsere-loesungen-1000.webp) top center no-repeat; background-size: 310px; display: flex; align-items: center; justify-content: flex-end;} .oursolutions .right .inner {width: 100%; padding: 0; padding-top: calc(var(--or_circle) - var(--gp1))} .oursolutions .right .inner > div {background: var(--grd02); padding: var(--gp1-r); box-shadow: var(--shd01);} .oursolutions .center.desk {display: none;} .oursolutions .center.mobile {display: flex; top: unset; bottom: 6px; left: 50%; transform: translate(-50%, 50%);} .oursolutions .left .inner > div:nth-of-type(2) {border-left: 0; padding-left: 0;} } @media screen and (max-width : 380px){ :root {--or_circle: 160px;} .oursolutions .right {background-size: 240px;} } /***********/ /*** KONTAKT SEITE ***/ /*Overview*/ .contact_overview {display: grid; gap: var(--gp1-r); grid-template-columns: repeat(2,1fr);} .contact_overview > div {padding: var(--gp1-r); font-size: var(--fs1); display: flex; justify-content: flex-start; align-items: center; gap: var(--gp1-xs1); background: #FFF; box-shadow: var(--shd01);} .contact_overview > div > div {align-self: stretch; display: flex; align-items: center;} .contact_overview > div > span {display: flex; width: 100%; justify-content: flex-start;} .contact_overview > div > span, .contact_overview > div > span a {color: #000;} .contact_overview svg {display: block; width: var(--gp1-r-xl1); height: var(--gp1-r-xl1);} .contact_overview .s1 {stroke: #00aaf0; stroke-width: 2px; stroke-linejoin: round; stroke-linecap: round; fill: none;} @media screen and (max-width : 1200px){ .contact_overview svg {width: var(--gp1); height: var(--gp1);} } @media screen and (max-width : 680px){ .contact_overview {grid-template-columns: repeat(1,1fr);} } /***********/ /*** VIDEO ***/ /*Wrapper*/ .video_wrapper {width: 100%; max-width: 1400px; margin: auto; position: relative; background: var(--grd06); border-radius: var(--gp1-r); cursor: pointer; box-shadow: var(--shd02);} .video_wrapper video {border-radius: var(--gp1-r); opacity: 0.25; transition: opacity .5s;} .video_wrapper.play video {opacity: 1;} .video_wrapper .playbutton {width: var(--gp1-r-xl3); height: var(--gp1-r-xl3); position: absolute; z-index: 5; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; transition: opacity .5s;} .video_wrapper.play .playbutton {opacity: 0;} .video_wrapper .playbutton .c {width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; animation: playbutton_ani01 8s linear infinite;} .video_wrapper .playbutton .c use {stroke-width: 2px; stroke: #00AAF0; fill: none; stroke-linejoin: round; stroke-linecap: round; opacity: .95; transition: all .5s;} .video_wrapper:hover .playbutton .c use {stroke-width: 0.5px;} .video_wrapper .playbutton .c2 {width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; border-radius: 200px; transform: scale(60%, 60%); background: rgba(255,255,255, .3); transition: all .5s} .video_wrapper:hover .playbutton .c2 {transform: scale(70%, 70%);} .video_wrapper .playbutton .p {width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; transition: all .5s; transform: scale(40%, 40%); filter: drop-shadow(0 0 40px rgba(33,104,133, .4)) drop-shadow(0 0 5px rgba(33,104,133, .4));} .video_wrapper:hover .playbutton .p {transform: scale(35%, 35%);} @keyframes playbutton_ani01 { 0% {transform: rotate(0deg)} 100% {transform: rotate(360deg)} } .video_wrapper .thumb {width: 100%; height: 100%; position: absolute; z-index: 4; top: 0px; left: 0px; border-radius: var(--gp1-r); overflow: hidden; transition: opacity .5s;} .video_wrapper.fired .thumb {opacity: 0;} .video_wrapper .thumb img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; user-select: none; position: absolute;} @media screen and (max-width : 480px){ .video_wrapper .playbutton {width: calc(var(--gp1-xl1) + var(--gp1-xs1)); height: calc(var(--gp1-xl1) + var(--gp1-xs1));} } /***********/ /*** STATISKITEN BOXEN ***/ .stats4box {display: grid; gap: var(--gp1-r); grid-template-columns: repeat(4,1fr);} .stats4box > div {background: var(--grd02); padding: var(--gp1-r); box-shadow: var(--shd01);} .stats4box > div > div {display: block; text-align: center; text-transform: uppercase; font-weight: bold; font-size: var(--fs-xl3); color: var(--col2);} .stats4box > div > div > span {color: #000; font-weight: 400;} .stats4box strong {display: block; text-align: center; text-transform: uppercase; font-weight: bold;} .stats4box svg {display: block; width: var(--gp1-r-xl2); height: var(--gp1-r-xl2); margin: auto;} .stats4box .strokecol01 {stroke: #000; stroke-width: 2.0px; stroke-linejoin: round; stroke-linecap: round; fill: none;} @media screen and (max-width : 1250px){ .stats4box {grid-template-columns: repeat(2,1fr);} } @media screen and (max-width : 680px){ .stats4box {grid-template-columns: repeat(1,1fr);} } /***********/ /*** STANDORTE ***/ :root { --loc_spc: var(--gp1-r); --loc_pic: 35%; --loc_map: calc(100% - var(--loc_pic)); } .locations {display: flex; flex-wrap: wrap; position: relative;} .locations .ttl {width: 100%; display: flex;} .locations .ttl > div:nth-of-type(1) {width: var(--loc_pic);} .locations .ttl > div:nth-of-type(2) {width: var(--loc_map); padding: var(--loc_spc); text-align: center;} .locations .pic {width: var(--loc_pic); background: var(--grd01); padding: var(--loc_spc);} .locations .pic .img {width: calc(var(--loc_pic) - var(--loc_spc) - var(--loc_spc)); height: calc(100% - var(--loc_spc)); position: absolute; bottom: var(--loc_spc);} .locations .pic .img img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; user-select: none; position: absolute;} .locations .map {width: calc(var(--loc_map) - var(--loc_spc));} .locations .map iframe {width: 100%; aspect-ratio: 3/2; border: 0; outline: 0; display: block;} .locations .colbar {width: var(--loc_spc); background: var(--grd01);} @media screen and (max-width : 680px){ .locations .pic, .locations .colbar {display: none;} .locations .map {width: 100%;} .locations .map iframe {width: 100%; aspect-ratio: 1/1;} .locations .ttl > div:nth-of-type(1) {width: 0;} .locations .ttl > div:nth-of-type(2) {width: 100%; text-align: left;} } /***********/ /*** UNSERE LÖSEMITTEL ***/ :root { --loc_spc: var(--gp1-r); --loc_pic: 35%; --loc_map: calc(100% - var(--loc_pic)); } .oursolvents {display: grid; gap: var(--gp1-r); grid-template-columns: repeat(4,1fr);} .oursolvents > div {display: flex; flex-direction: column; background: linear-gradient(45deg, #ffffff 50%,#f0faff 100%); box-shadow: var(--shd01); position: relative; padding-bottom: 6px;} .oursolvents > div:after {content:""; display: block; position: absolute; width: 50%; height: 6px; background: #6ad4ff; bottom: 0; left: 25%; clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 100%, 0 100%);} .oursolvents .ttl {display: block; text-align: center; padding: var(--gp1-r); text-transform: uppercase; font-weight: 600;} .oursolvents .pic {aspect-ratio: 2/1; position: relative;} .oursolvents .pic:before {content: ""; width: 60%; aspect-ratio: 3/1; background: #FFF; position: absolute; z-index: 2; left: 0; bottom: 0px; clip-path: polygon(0 12px, 100% 101%, 0 101%);} .oursolvents .pic:after {content: ""; width: 60%; aspect-ratio: 3/1; background: #00AAF0; position: absolute; left: 0; bottom: 0px; clip-path: polygon(0 0, 100% 101%, 0 101%); opacity: .75;} .oursolvents .pic img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; user-select: none; position: absolute;} .oursolvents .txt {padding: var(--gp1-r); text-align: center; flex-grow: 1; justify-content: space-between;} @media screen and (max-width : 1100px){ .oursolvents {grid-template-columns: repeat(2,1fr);} } @media screen and (max-width : 480px){ .oursolvents {grid-template-columns: repeat(1,1fr);} } /***********/ /*** PDF DOWNLOAD DETAILS ***/ .moredetailspdf {display: flex; align-items: center; margin: auto; width: fit-content; background: url(/wp-content/uploads/textilebg01.webp) center no-repeat; background-size: cover; box-shadow: var(--shd02);} .moredetailspdf .txt {padding: var(--gp1-r-xl1) var(--gp1-r-xl2) var(--gp1-r-xl1) var(--gp1-r-xl1); text-align: center; display: flex; flex-direction: column; align-self: stretch; align-items: center; justify-content: center; gap: var(--gp1-r); background: #00AAF0CC; color: #FFF; clip-path: polygon(0 0, calc(100% - var(--gp1-r-xl1)) 0, 100% 50%, calc(100% - var(--gp1-r-xl1)) 100%, 0 100%); margin: var(--gp1-r-xl1) 0;} .moredetailspdf .txt strong {display: block; font-size: var(--fs-xl2); font-weight: 600;} .moredetailspdf .txt span {display: block; font-size: var(--fs-xl1);} .moredetailspdf .link {width: fit-content; padding: var(--gp1-r-xl2); display: flex; justify-content: center; align-items: center;} .moredetailspdf .link a {display: block;} .moredetailspdf .link a svg {display: block; width: var(--gp1-r-xl2); height: auto;} @media screen and (max-width : 900px){ .moredetailspdf .link {padding: var(--gp1-r-xl1);} } @media screen and (max-width : 600px){ .moredetailspdf .txt {padding: var(--gp1-r) var(--gp1-r-xl1) var(--gp1-r) var(--gp1-r);} } @media screen and (max-width : 480px){ .moredetailspdf .txt {margin: var(--gp1-r) 0; padding: var(--gp1-r); clip-path: polygon(0 0, calc(100% - var(--gp1-r)) 0, 100% 50%, calc(100% - var(--gp1-r)) 100%, 0 100%)} .moredetailspdf .txt strong {font-size: var(--fs-xl1); hyphens: auto;} .moredetailspdf .txt span {font-size: var(--fs1); hyphens: auto;} .moredetailspdf .link {padding: var(--gp1-r); display: flex; justify-content: center; align-items: center;} } /***********/ /*** PDF Übersicht ***/ .pdfs {display: grid; gap: var(--gp1-r); grid-template-columns: repeat(5,1fr);} .pdfs > a {display: flex; flex-direction: column; box-shadow: var(--shd02); position: relative;} .pdfs > a:before {content:""; display: block; position: absolute; z-index: 10; width: 40%; height: 6px; background: #6ad4ff; top: 0; left: 30%; clip-path: polygon(0 0, 0 -2px, 100% -2px, 100% 0, calc(100% - 6px) 100%, 6px 100%);} .pdfs .ttl {display: flex; justify-content: center; align-items: center; text-align: center; height: calc(var(--gp1-r-xl1) + var(--gp1-r)); font-weight: 600; position: relative; z-index: 30; box-shadow: var(--shd01);} .pdfs .ttl > span {max-width: calc(100% - var(--gp1-r)); max-height: calc(100% - var(--gp1-r));} .pdfs .pic {aspect-ratio: 210/250; position: relative; overflow: hidden;} .pdfs .pic:before {content: ""; width: 100%; height: 100%; background: #FFFFFF00; position: absolute; z-index: 2; left: 0; top: 0px; clip-path: polygon(0 0, 100% 0, 0 100%);} .pdfs .pic .bg1:before {content: ""; width: 0%; height: 100%; position: absolute; z-index: 2; left: 0; top: 0; background: #005478; opacity: 0; transition: all .5s;} .pdfs .pic .bg1:after {content: ""; width: 0%; height: 100%; position: absolute; z-index: 2; right: 0; top: 0; background: #005478; opacity: 0; transition: all .5s;} .pdfs > a:hover .pic .bg1:before {width: 50%; opacity: 0.6;} .pdfs > a:hover .pic .bg1:after {width: 50%; opacity: 0.6;} .pdfs .pic .bg2 {width: 100%; height: 100%; position: absolute; z-index: 2; right: -100%; top: 0; background: var(--grd01); opacity: 1; clip-path: polygon(0 -2px, 100% -2px, 100% 0, 100% 100%); transition: all .6s;} .pdfs > a:hover .pic .bg2 {right: 0;} .pdfs .pic:after {content:""; position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; backdrop-filter: blur(0px); transition: all .8s;} .pdfs > a:hover .pic:after {backdrop-filter: blur(5px);} .pdfs .pic .ovrly {position: absolute; z-index: 20; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; gap: var(--gp1-xs2); opacity: 0; transition: all .4s .3s; text-align: center;} .pdfs > a:hover .pic .ovrly {opacity: 1;} .pdfs .pic .ovrly span:before {content:"Anschauen"; text-transform: uppercase; letter-spacing: 2px; font-weight: 600; color: #FFF; text-shadow: 1px 1px 3px rgba(0,0,0, 0.2);} .pdfs.en .pic .ovrly span:before {content:"View";} .pdfs.es .pic .ovrly span:before {content:"Ver";} .pdfs.fr .pic .ovrly span:before {content:"Regarder";} .pdfs.ru .pic .ovrly span:before {content:"Показать";} .pdfs .pic .ovrly i {display: block; width: 0; height: 2px; background: #FFF; margin: auto; transition: all .8s .3s;} .pdfs > a:hover .pic .ovrly i {width: var(--gp1-xl1);} .pdfs .pic img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; user-select: none; position: absolute; transition: transform .6s;} .pdfs > a:hover .pic img {transform: scale(1.05, 1.05);} .oursolvents .txt {padding: var(--gp1-r); text-align: center; flex-grow: 1; justify-content: space-between;} @media screen and (max-width : 1100px){ .pdfs {grid-template-columns: repeat(4,1fr);} } @media screen and (max-width : 800px){ .pdfs {grid-template-columns: repeat(3,1fr);} } @media screen and (max-width : 480px){ .pdfs {grid-template-columns: repeat(2,1fr);} } /***********/ /*** BETRIEBSANWEISUNGEN ***/ .operatinginstructions {display: flex; flex-direction: column; gap: var(--gp1-xs1); width: 100%;} .operatinginstructions > a {display: flex; width: 100%; justify-content: space-between; align-items: center; box-shadow: var(--shd01); background: #FFF;} .operatinginstructions > a span {display: flex; align-items: center; font-size: var(--fs-xl1); padding: var(--gp1-r-xs1); color: var(--col2); font-weight: 500; transition: color .4s;} .operatinginstructions > a:hover span {color: #444; font-weight: 500;} .operatinginstructions > a span:before {content:"\276F"; font-size: var(--fs-xs1); color: #000; margin-right: var(--gp1-xs2);} .operatinginstructions .date {align-self: stretch; padding: var(--gp1-r-xs1) var(--gp1-r-xs1) var(--gp1-r-xs1) var(--gp1-r); background: var(--grd01); display: flex; align-items: center; clip-path: polygon(var(--gp1-r-xs1) 0, 100% 0, 100% 100%, 0 100%); font-weight: 500; color: #FFF;} /***********/ /*** SEITZ VIDEOS ***/ .companyvideos {display: grid; gap: var(--gp1-r-xl1) var(--gp1-r); grid-template-columns: repeat(3,1fr);} .companyvideos .video {display: flex; gap: var(--gp1-r-xs1); flex-direction: column;} .companyvideos .video .thumb {position: relative; box-shadow: var(--shd02); background: #222; overflow: hidden;} .companyvideos .video .thumb img {display: block; width: 100%; opacity: 0.7 !important; transition: all 0.8s;} .companyvideos .video:hover .thumb img {opacity: 1 !important; transform: scale(1.03, 1.03);} .companyvideos .video .playbutton {width: var(--gp1-r-xl2); height: var(--gp1-r-xl2); position: absolute; z-index: 5; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; transition: opacity .8s;} .companyvideos .video:hover .playbutton {opacity: 0.8;} .companyvideos .video .playbutton .c {width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; animation: playbutton_ani01 8s linear infinite;} .companyvideos .video .playbutton .c use {stroke-width: 3px; stroke: #00AAF0; fill: none; stroke-linejoin: round; stroke-linecap: round; opacity: .95; transition: all .8s;} .companyvideos .video:hover .playbutton .c use {stroke-width: 1px;} .companyvideos .video .playbutton .c2 {width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; border-radius: 200px; transform: scale(60%, 60%); background: rgba(255,255,255, .3); transition: all .8s} .companyvideos .video:hover .playbutton .c2 {transform: scale(70%, 70%);} .companyvideos .video .playbutton .p {width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; transition: all .8s; transform: scale(40%, 40%); filter: drop-shadow(0 0 40px rgba(33,104,133, .4)) drop-shadow(0 0 5px rgba(33,104,133, .4));} .companyvideos .video:hover .playbutton .p {transform: scale(35%, 35%);} .companyvideos .video .ttl {font-weight: 600; color: #000;} .companyvideos .video p {display: block; font-size: var(--fs-xs1); color: #444 !important;} .companyvideos .video:hover .buttoncol1 {filter: drop-shadow(0px 8px 8px #3ab1e180);} .companyvideos .video:hover .buttoncol1 span {color: #000;} .companyvideos .video:hover .buttoncol1 .bg {background-position: right;} @media screen and (max-width : 1000px){ .companyvideos {grid-template-columns: repeat(2,1fr);} } @media screen and (max-width : 680px){ .companyvideos {grid-template-columns: repeat(1,1fr);} } /***********/ /*** FOOTER ***/ footer {color: #BBB;} footer .clip {width: 100%; aspect-ratio: 20/1; background: var(--grd06); clip-path: polygon(0 0, 100% 100%, 0 100%); position: relative; margin-bottom: -1px;} footer .inner {background: var(--grd06);} /*Details*/ .foot_details {display: grid; gap: var(--gp1-r); grid-template-columns: repeat(4,1fr); padding: var(--gp1-r) 0;} .foot_details > div {padding: var(--gp1-r) 0;} .foot_details > div:not(:last-child) {border-right: 2px solid #484848;} .flogo {display: block;} .flogo .lg_fll01 {fill: #FFF} .flogo .lg_fll02 {fill: #00AAF0} .flist2 {display: flex; flex-direction: column; gap: 16px;} .flist2 li {display: flex; gap: 16px; align-items: center;} .flist2 li .ico {width: 24px; height: 24px; display: flex; justify-content: center; align-items: center;} .flist2 svg {width: 100%; height: 100%; display: block; stroke-linecap: round; fill: none;} .flist2 svg .s1 {stroke: #00AAF0; stroke-width: 4px;} .flist2 li a {color: #BBB;} .flist2 li:hover a {color: #FFF;} .fttl1 {display: block; text-transform: uppercase; font-size: var(--fs-xl1); color: #FFF; font-weight: 500; margin-bottom: var(--gp1-r-xs1);} .flist1 {display: flex; flex-direction: column; gap: 4px;} .flist1 li {display: flex; align-items: center; gap: 8px;} .flist1 li i {width: 4px; height: 4px; background: #00AAF0;} .flist1 li a {color: #BBB; font-weight: 400;} .flist1 li:hover a {color: #FFF;} footer .ft_socials {display: flex; gap: var(--gp1-xs1);} footer .ft_socials svg {display: block; width: 24px;} footer .ft_socials svg {fill: none; stroke: #00AAF0; stroke-width: 4.5px; stroke-linecap: round;} /*Sonstiges*/ .foot_details .f_awards {display: grid; gap: var(--gp1-r); grid-template-columns: repeat(4,1fr); margin-right: var(--gp1-r); align-items: flex-end; margin-top: var(--gp1-r);} .foot_details .f_awards img {display: block; width: 100%;} .foot_details .f_awards .co2banner {grid-column: span 2; align-self: center;} /*Letzte Reihe*/ .lastrow {border-top: 2px solid #484848; padding: var(--gp1-r) 0; text-align: center; background: rgba(0,0,0, .3);} .lastrow .cr {display: block; font-weight: bold;} .lastrow a {color: #BBB;} .lastrow a:hover {color: #FFF;} /*Responsive Einstellungen*/ @media screen and (max-width : 900px){ .foot_details {grid-template-columns: repeat(2,1fr); gap: var(--gp1)} .foot_details > div:nth-child(2n + 2) {border: 0;} } @media screen and (max-width : 680px){ .foot_details {grid-template-columns: repeat(1,1fr); gap: 0;} .foot_details > div {padding: var(--gp1) 0; border: 0 !important;} .foot_details > div:not(:last-child) {border-bottom: 2px solid #484848 !important; padding: var(--gp1) 0;} .flist2 li .ico {width: 20px; height: 20px;} .flogo {width: 150px;} .foot_details .adz {width: 90px;} } /***********/