/* WM CSS BUNDLE START */ /* Quelle: dynamic-styles.css */ /* Schriftarten */ /* Header */ .headertext-vorschau-background{ background-color: #000000; background-size: cover; background-attachment: fixed;} .vorschau.navi .ebene-1{ background-color: #000000; background-size: cover; } .vorschau.navi .ul.ebene-1 .li.children a:after{ right: calc( 30px ); width: 5px; ?>; height: 5px; ?>; } .vorschau.navi .ul.ebene-1 .li.children.aktiv a:after{ background-color: #ffffff;} /* Ebene 1 */ .vorschau.navi .ebene-1 .li, #primary-navigation>div>ul>li{ } .vorschau.navi .ebene-1 .li a, #primary-navigation>div>ul>li>a{ font-size: 75px; padding-left: 30px; padding-right: 30px; text-transform: uppercase; position: relative; } #primary-navigation>div>ul>li.menu-item-has-children.current-menu-item>a:after{ background-color: #ffffff; } .vorschau.navi .ebene-1 .li.children a:after, #primary-navigation>div>ul>li.menu-item-has-children>a:after{ right: calc( 30px ); width: 5px; ?>; height: 5px; ?>; } /*Dropdownpfeil*/ .vorschau.navi .ebene-1 .li.aktiv a, #primary-navigation>div>ul>li.active>a, #primary-navigation>div>ul>li.current-menu-item>a{ color: #ffffff; } #primary-navigation > div > ul > li.menu-item-has-children.active > a::after, #primary-navigation>div>ul>li.menu-item-has-children.current-menu-item>a:after{ background-color: #ffffff;} @media (hover: hover) { .vorschau.navi .ul.ebene-1 .li a:hover, #primary-navigation>div>ul>li>a:hover{ color: #ffffff;; } #primary-navigation>div>ul>li.menu-item-has-children>a:hover:after{ background-color: #ffffff; } .vorschau.navi .ul.ebene-1 .li.children a:hover:after{ background-color: #ffffff; } } /* Ebene 2 */ .vorschau.navi .ebene-2 .li a, #primary-navigation>div>ul>li>ul>li>a{ padding-left: 30px; padding-right: 30px; } .vorschau.navi .ebene-2 .li.aktiv a, #primary-navigation>div>ul>li>ul>li.current-menu-item>a{ } .vorschau.navi .ebene-2 .li.children a:after{ width: 5px; height: 5px; right: 30px;} .vorschau.navi .ebene-2 .li.children.aktiv a:after{ } .vorschau.navi .ebene-2 .li, #primary-navigation>div>ul>li>ul>li{ } @media (min-width: 1200px){ #primary-navigation>div>ul>li>ul{ } #primary-navigation>div>ul>li>ul>li.menu-item-has-children>a:after{ width: 5px; height: 5px; right: 30px; } #primary-navigation>div>ul>li>ul>li.menu-item-has-children.current-menu-item>a:after{ } } @media (hover: hover) { .vorschau.navi .ebene-2 .li a:hover, #primary-navigation>div>ul>li>ul>li>a:hover{ } .vorschau.navi .ebene-2 .li.children a:hover:after{ } #primary-navigation .sub-menu li.menu-item-has-children:hover>a:after{ } } /* Navigation Ebene 3*/ /* Ebene 3 */ .vorschau.navi .ebene-3 .li, #primary-navigation>div>ul>li>ul>li>ul>li{ } .vorschau.navi .ebene-3 .li a, #primary-navigation>div>ul>li>ul>li>ul>li>a{ padding-left: 30px; padding-right: 30px;} .vorschau.navi .ebene-3 .li.aktiv a, #primary-navigation>div>ul>li>ul>li>ul>li.current-menu-item>a{ } @media (min-width: 1200px){ #primary-navigation>div>ul>li>ul>li>ul{ } } @media (hover: hover) { .vorschau.navi .ebene-3 .li a:hover, #primary-navigation>div>ul>li>ul>li>ul>li>a:hover{ } } /* Navigation Toggle*/ @media (max-width: 1200px){ /*Toggle Menü*/ .toggle-menu .toggle-icon{ } .toggle-menu .toggle-icon{ } /* Toggle Ebene 1 */ #primary-navigation>div>ul>li{ } #primary-navigation > div > ul > li.menu-item-has-children > .toggle-subemenu { } #primary-navigation > div > ul > li.menu-item-has-children > .toggle-subemenu:after { } #primary-navigation > div > ul > li.current-menu-item > .toggle-subemenu{ } #primary-navigation > div > ul > li.current-menu-item > .toggle-subemenu:after{ background-color: #ffffff; } /* Toggle Ebene 2 */ #primary-navigation > div > ul > li > ul > li.menu-item-has-children > .toggle-subemenu{ } #primary-navigation > div > ul > li > ul > li.menu-item-has-children > .toggle-subemenu:after{ } #primary-navigation > div > ul > li > ul > li.current-menu-item > .toggle-subemenu{ } #primary-navigation > div > ul > li > ul > li.current-menu-item > .toggle-subemenu:after{ } } /* Body */ .acf-block-preview, #content{ background-color: #1b161e; background-size: cover; background-attachment: fixed;} /* Headertext */ /* Headertext Variablen */ .vorschau-headertext, #headertext{ } .headertext-and-social-media-buttons{ } .vorschau-headertext a, #headertext a{ text-decoration: none; } /* Tablet */ .vorschau-headertext .tablet{ } @media (max-width: 1024px){ #headertext{ } } /* Handy */ .vorschau-headertext .handy{ } @media (max-width: 768px){ #headertext{ } } /* Header Icons */ /* Header Icons */ .facebook svg{ fill: #475993;} .facebook strong{ background-color: #FFFFFF;} .instagram svg{ fill: #c3266b;} .instagram strong{ background-color: #FFFFFF;} .twitter svg{ fill: #76a9ea; } .twitter strong{ background-color: #FFFFFF; } .youtube svg{ fill: #f61c0d;} .youtube strong{ background-color: #FFFFFF; } .vimeo svg{ fill: #69b4e5; } .vimeo strong{ background-color: #FFFFFF; } .pinterest svg{ fill: #9f1121; } .pinterest strong{ background-color: #FFFFFF; } .shop svg{ fill: #4aa43c; } .shop strong{ background-color: #FFFFFF; } #logo{ width: 50px; } #logomobil { } /* Überschriften */ /* ======================================== H1 - VORSCHAU HINTERGRUND ======================================== */ .vorschau.h1 { background-color: #1b161e; } /* ======================================== H1 - GRUNDDESIGN ======================================== */ .content h1, #poststuff .vorschau h1, .editor-styles-wrapper .section-content h1, .section-content h1 { text-transform: uppercase; color: #ffffff; font-size: 40px; line-height: 1.2; letter-spacing: 2px; } /* ======================================== H1 - DESKTOP BIS 1200px ======================================== */ @media (max-width: 1200px) { .content h1, .editor-styles-wrapper .section-content h1, .section-content h1 { font-size: 40px; } } /* ======================================== H1 - LAPTOP VORSCHAU ======================================== */ #poststuff .vorschau .laptop h1 { font-size: 40px; } /* ======================================== H1 - LAPTOP BIS 1024px ======================================== */ @media (max-width: 1024px) { .content h1, .editor-styles-wrapper .section-content h1, .section-content h1 { font-size: 40px; } } /* ======================================== H1 - TABLET VORSCHAU ======================================== */ #poststuff .vorschau .tablet h1 { font-size: 35px; } /* ======================================== H1 - TABLET BIS 768px ======================================== */ @media (max-width: 768px) { .content h1, .editor-styles-wrapper .section-content h1, .section-content h1 { font-size: 35px; } } /* ======================================== H1 - HANDY VORSCHAU ======================================== */ #poststuff .vorschau .handy h1 { font-size: 25px; } /* ======================================== H1 - HANDY BIS 480px ======================================== */ @media (max-width: 480px) { .content h1, .editor-styles-wrapper .section-content h1, .section-content h1 { font-size: 25px; } } /* ======================================== H2 - VORSCHAU HINTERGRUND ======================================== */ .vorschau.h2 { background-color: #1b161e; } /* ======================================== H2 - GRUNDDESIGN ======================================== */ .content h2, #poststuff .vorschau h2, .editor-styles-wrapper .section-content h2, .section-content h2 { color: #ffffff; font-size: 25px; line-height: 1.2; letter-spacing: 3px; } /* ======================================== H2 - DESKTOP BIS 1200px ======================================== */ @media (max-width: 1200px) { .content h2, .editor-styles-wrapper .section-content h2, .section-content h2 { font-size: 25px; } } /* ======================================== H2 - LAPTOP VORSCHAU ======================================== */ #poststuff .vorschau .laptop h2 { font-size: 23px; } /* ======================================== H2 - LAPTOP BIS 1024px ======================================== */ @media (max-width: 1024px) { .content h2, .editor-styles-wrapper .section-content h2, .section-content h2 { font-size: 23px; } } /* ======================================== H2 - TABLET VORSCHAU ======================================== */ #poststuff .vorschau .tablet h2 { font-size: 21px; } /* ======================================== H2 - TABLET BIS 768px ======================================== */ @media (max-width: 768px) { .content h2, .editor-styles-wrapper .section-content h2, .section-content h2 { font-size: 21px; } } /* ======================================== H2 - HANDY VORSCHAU ======================================== */ #poststuff .vorschau .handy h2 { font-size: 19px; } /* ======================================== H2 - HANDY BIS 480px ======================================== */ @media (max-width: 480px) { .content h2, .editor-styles-wrapper .section-content h2, .section-content h2 { font-size: 19px; } } /* ======================================== H3 - VORSCHAU HINTERGRUND ======================================== */ .vorschau.h3 { background-color: #1b161e; } /* ======================================== H3 - GRUNDDESIGN ======================================== */ .content h3, #poststuff .vorschau h3, .editor-styles-wrapper .section-content h3, .section-content h3 { color: #ffffff; font-size: 16px; line-height: 1.3; letter-spacing: 2px; } /* ======================================== H3 - DESKTOP BIS 1200px ======================================== */ @media (max-width: 1200px) { .content h3, .editor-styles-wrapper .section-content h3, .section-content h3 { font-size: 16px; } } /* ======================================== H3 - LAPTOP VORSCHAU ======================================== */ #poststuff .vorschau .laptop h3 { font-size: 16px; } /* ======================================== H3 - LAPTOP BIS 1024px ======================================== */ @media (max-width: 1024px) { .content h3, .editor-styles-wrapper .section-content h3, .section-content h3 { font-size: 16px; } } /* ======================================== H3 - TABLET VORSCHAU ======================================== */ #poststuff .vorschau .tablet h3 { font-size: 16px; } /* ======================================== H3 - TABLET BIS 768px ======================================== */ @media (max-width: 768px) { .content h3, .editor-styles-wrapper .section-content h3, .section-content h3 { font-size: 16px; } } /* ======================================== H3 - HANDY VORSCHAU ======================================== */ #poststuff .vorschau .handy h3 { font-size: 16px; } /* ======================================== H3 - HANDY BIS 480px ======================================== */ @media (max-width: 480px) { .content h3, .editor-styles-wrapper .section-content h3, .section-content h3 { font-size: 16px; } } /* ======================================== H4 - VORSCHAU HINTERGRUND ======================================== */ .vorschau.h4 { background-color: #1b161e; } /* ======================================== H4 - GRUNDDESIGN ======================================== */ .content h4, #poststuff .vorschau h4, .editor-styles-wrapper .section-content h4, .section-content h4 { letter-spacing: 2px; } /* ======================================== H4 - DESKTOP BIS 1200px ======================================== */ @media (max-width: 1200px) { .content h4, .editor-styles-wrapper .section-content h4, .section-content h4 { } } /* ======================================== H4 - LAPTOP VORSCHAU ======================================== */ #poststuff .vorschau .laptop h4 { } /* ======================================== H4 - LAPTOP BIS 1024px ======================================== */ @media (max-width: 1024px) { .content h4, .editor-styles-wrapper .section-content h4, .section-content h4 { } } /* ======================================== H4 - TABLET VORSCHAU ======================================== */ #poststuff .vorschau .tablet h4 { } /* ======================================== H4 - TABLET BIS 768px ======================================== */ @media (max-width: 768px) { .content h4, .editor-styles-wrapper .section-content h4, .section-content h4 { } } /* ======================================== H4 - HANDY VORSCHAU ======================================== */ #poststuff .vorschau .handy h4 { } /* ======================================== H4 - HANDY BIS 480px ======================================== */ @media (max-width: 480px) { .content h4, .editor-styles-wrapper .section-content h4, .section-content h4 { } } /* ======================================== H5 - VORSCHAU HINTERGRUND ======================================== */ .vorschau.h5 { background-color: #1b161e; } /* ======================================== H5 - GRUNDDESIGN ======================================== */ .content h5, #poststuff .vorschau h5, .editor-styles-wrapper .section-content h5, .section-content h5 { letter-spacing: 2px; } /* ======================================== H5 - DESKTOP BIS 1200px ======================================== */ @media (max-width: 1200px) { .content h5, .editor-styles-wrapper .section-content h5, .section-content h5 { } } /* ======================================== H5 - LAPTOP VORSCHAU ======================================== */ #poststuff .vorschau .laptop h5 { } /* ======================================== H5 - LAPTOP BIS 1024px ======================================== */ @media (max-width: 1024px) { .content h5, .editor-styles-wrapper .section-content h5, .section-content h5 { } } /* ======================================== H5 - TABLET VORSCHAU ======================================== */ #poststuff .vorschau .tablet h5 { } /* ======================================== H5 - TABLET BIS 768px ======================================== */ @media (max-width: 768px) { .content h5, .editor-styles-wrapper .section-content h5, .section-content h5 { } } /* ======================================== H5 - HANDY VORSCHAU ======================================== */ #poststuff .vorschau .handy h5 { } /* ======================================== H5 - HANDY BIS 480px ======================================== */ @media (max-width: 480px) { .content h5, .editor-styles-wrapper .section-content h5, .section-content h5 { } } /* ======================================== H6 - VORSCHAU HINTERGRUND ======================================== */ .vorschau.h6 { background-color: #1b161e; } /* ======================================== H6 - GRUNDDESIGN ======================================== */ .content h6, #poststuff .vorschau h6, .editor-styles-wrapper .section-content h6, .section-content h6 { letter-spacing: 3px; } /* ======================================== H6 - DESKTOP BIS 1200px ======================================== */ @media (max-width: 1200px) { .content h6, .editor-styles-wrapper .section-content h6, .section-content h6 { } } /* ======================================== H6 - LAPTOP VORSCHAU ======================================== */ #poststuff .vorschau .laptop h6 { } /* ======================================== H6 - LAPTOP BIS 1024px ======================================== */ @media (max-width: 1024px) { .content h6, .editor-styles-wrapper .section-content h6, .section-content h6 { } } /* ======================================== H6 - TABLET VORSCHAU ======================================== */ #poststuff .vorschau .tablet h6 { } /* ======================================== H6 - TABLET BIS 768px ======================================== */ @media (max-width: 768px) { .content h6, .editor-styles-wrapper .section-content h6, .section-content h6 { } } /* ======================================== H6 - HANDY VORSCHAU ======================================== */ #poststuff .vorschau .handy h6 { } /* ======================================== H6 - HANDY BIS 480px ======================================== */ @media (max-width: 480px) { .content h6, .editor-styles-wrapper .section-content h6, .section-content h6 { } } /* Text */ /* Text Variablen */ /* Text CSS*/ .section-content input[type="text"], .section-content input[type="email"], .section-content input[type="tel"], .section-content textarea{ font-size: 16px; } .vorschau-li, .vorschau.vorschautext, #editor .editor-styles-wrapper, #editor .text, .section-content, .acf-text{ font-size: 16px; line-height: 1.7; color: #999999; } .vorschau.vorschautext a, #editor .editor-styles-wrapper a, .section-content a, .acf-text a{ color: ; } /* Text Tablet */ .vorschautext .laptop{ font-size: 16px; } @media (max-width: 1024px){ #editor .editor-styles-wrapper, .section-content, .acf-text{ font-size: 16px; } } /* Text Tablet */ .vorschautext .tablet{ font-size: 16px; } @media (max-width: 768px){ #editor .editor-styles-wrapper, .section-content, .acf-text{ font-size: 16px; } } /* Text Handy */ .vorschautext .handy{ font-size: 16px; } @media (max-width: 480px){ #editor .editor-styles-wrapper, .section-content, .acf-text{ font-size: 16px; } } /* OL */ .text ol li, .editor-styles-wrapper .text ol li, .vorschau-ol ol li{ margin-bottom: px; } /* Laptop ol li*/ .vorschau-ol .laptop ol li{ margin-bottom: calc( px * 0.75); } @media (max-width: 1024px){ .section-content ol li{ margin-bottom: calc( px * 0.75); } } /* Tablet ol li*/ .vorschau-ol .tablet ol li{ margin-bottom: calc( px * 0.6); } @media (max-width: 768px){ .section-content ol li{ margin-bottom: calc( px * 0.6); } } /* Handy ol li*/ .vorschau-ol .handy ol li{ margin-bottom: calc( px * 0.5); } @media (max-width: 480px){ .section-content ol li{ margin-bottom: calc( px * 0.5); } } /* UL */ /* UL Variablen */ .text ul li, .editor-styles-wrapper .text ul li, .vorschau-li ul li{ padding-left: calc( 15px + 10px); position: relative; } .text ul li:before, .vorschau ul li:before{ -webkit-mask: url(https://wolpermedia.de/wp-content/themes/jackalope/fa-layout/fa-css/../fa-images/listing-arrow-1.svg) no-repeat 50% 50%; mask: url(https://wolpermedia.de/wp-content/themes/jackalope/fa-layout/fa-css/../fa-images/listing-arrow-1.svg) no-repeat 50% 50%; width: 15px; height: 15px; content: ""; display: inline-block; -webkit-mask-size: cover; mask-size: cover; position: absolute; left: 0px; } /* Aufzählung li Tablet */ .vorschau-li .tablet ul li{ padding-left: calc( 15px + 10px); margin-bottom: calc( px * 0.75); } .vorschau .tablet ul li:before{ width: 15px; height: 15px;} @media (max-width: 1024px){ .section-content ul li, .acf-field .acf-label ul li{ padding-left: calc( 15px + 10px); margin-bottom: calc( px * 0.75); } .flexible-text ul li:before, .section-content ul li:before, .acf-field .acf-label ul li:before{ width: 15px; height: 15px; } } /* Aufzählung li Handy */ .vorschau-li .handy ul li{ padding-left: calc( 15px + 10px); margin-bottom: calc( px * 0.5); } .vorschau .handy ul li:before{ width: 15px; height: 15px;} @media (max-width: 768px){ .section-content ul li, .acf-field .acf-label ul li{ padding-left: calc( 15px + 10px); margin-bottom: calc( px * 0.5); } .section-content ul li:before, .acf-field .acf-label ul li:before{ width: 15px; height: 15px; } } /* Blockquote */ .section-content blockquote, .vorschau blockquote{ margin-bottom: calc(px * 1); } .vorschau .tablet blockquote{ margin-bottom: calc(px * 0.75); } @media (max-width: 1024px){ .section-content blockquote, .acf-field .acf-label blockquote{ margin-bottom: calc(px * 0.75); } } .vorschau .handy blockquote{ margin-bottom: calc(px * 0.5); } @media (max-width: 768px){ .section-content blockquote, .acf-field .acf-label blockquote{ margin-bottom: calc(px * 0.5); } } /* Button */ .button-vorschau, .section-content .button-submit, .section-content .buttondiv{ } .vorschau .button-fa, .section-content .button-fa{ } .vorschau .button-fa-content, .vorschau .button-fa input[type="submit"], .section-content input[type="submit"], .section-content .button-fa-content{ font-size: 18px; padding: calc( 15px * 1 ); ; } .vorschau .button-fa:hover input[type="submit"], .vorschau .button-fa:hover .button-fa-content, .section-content .button-fa:hover input[type="submit"], .section-content .button-fa:hover .button-fa-content{ ; } .vorschau .button-fa:hover, .section-content .button-fa:hover{ } /* Button Tablet */ .vorschau .tablet .button-fa input[type="submit"], .vorschau .tablet .button-fa-content { font-size: 16px; padding: calc( 15px * 1 ); } @media (max-width: 1024px){ .section-content .button-fa input[type="submit"], .section-content .button-fa-content{ font-size: 16px; padding: calc( 15px * 1 ); } } /* Button Handy */ .vorschau .handy .button-fa input[type="submit"], .vorschau .handy .button-fa-content { padding: calc( 15px * 1 ); } @media (max-width: 768px){ .section-content .button-fa input[type="submit"], .section-content .button-fa-content{ padding: calc( 15px * 1 ); } } /* Call To Action */ #show-call-to-action-box-button{ } #show-call-to-action-box-button strong{ } /* Kontaktformular */ .wpcf7 label{ } .vorschau.wpcf7 .tablet label{ } .vorschau.wpcf7 .handy label{ } /* Eingabefeld */ .acf-field .wpcf7 input[type="text"], .acf-field .wpcf7 input[type="email"], .acf-field .wpcf7 input[type="tel"], .acf-field .wpcf7 textarea, .wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 textarea{ border-radius: 1px; box-shadow: px px px ; } .wpcf7 input[type="checkbox"]{ border-radius: 1px; } .wpcf7 input[type="text"]::placeholder, .wpcf7 input[type="email"]::placeholder, .wpcf7 input[type="tel"]::placeholder, .wpcf7 textarea::placeholder{ opacity: 0.6; } /* Tablet Eingabefeld */ .vorschau.wpcf7 .laptop input[type="text"], .vorschau.wpcf7 .laptop input[type="email"], .vorschau.wpcf7 .laptop input[type="tel"], .vorschau.wpcf7 .laptop textarea{ } @media (max-width: 1024px){ .wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 textarea{ } } /* Tablet Eingabefeld */ .vorschau.wpcf7 .tablet input[type="text"], .vorschau.wpcf7 .tablet input[type="email"], .vorschau.wpcf7 .tablet input[type="tel"], .vorschau.wpcf7 .tablet textarea{ } @media (max-width: 768px){ .wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 textarea{ } } /* Handy Eingabefeld */ .vorschau.wpcf7 .handy input[type="text"], .vorschau.wpcf7 .handy input[type="email"], .vorschau.wpcf7 .handy input[type="tel"], .vorschau.wpcf7 .handy textarea{ } @media (max-width: 480px){ .wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 textarea{ } } .wpcf7 .wpcf7-acceptance{ } .wpcf7 .wpcf7-acceptance label, .wpcf7 .wpcf7-acceptance label a{ } /*---------VORSCHAU ---------------*/ .vorschau.wpcf7 .laptop .wpcf7-acceptance label, .vorschau.wpcf7 .laptop .wpcf7-acceptance label a{ } /* Tablet Rechtlicher Hinweis */ .vorschau.wpcf7 .tablet .wpcf7-acceptance label, .vorschau.wpcf7 .tablet .wpcf7-acceptance label a{ } .vorschau.wpcf7 .handy .wpcf7-acceptance label, .vorschau.wpcf7 .handy .wpcf7-acceptance label a{ } @media (max-width: 1024px){ .wpcf7 .wpcf7-acceptance label, .wpcf7 .wpcf7-acceptance label a{ } } @media (max-width: 768px){ .wpcf7 .wpcf7-acceptance label, .wpcf7 .wpcf7-acceptance label a{ } } @media (max-width: 480px){ .wpcf7 .wpcf7-acceptance label, .wpcf7 .wpcf7-acceptance label a{ } } .vorschau.wpcf7 .buttondiv, .section-content .wpcf7 .buttondiv{ } .vorschau.wpcf7 .button-fa, .section-content .wpcf7 .button-fa{ } .vorschau.wpcf7 .button-fa:hover, .section-content .wpcf7 .button-fa:hover{ } .vorschau.wpcf7 .button-fa input[type="submit"], .section-content .wpcf7 input[type="submit"]{ ; } /* Button Laptop */ .vorschau.wpcf7 .laptop .button-fa input[type="submit"] { } @media (max-width: 1024px){ .section-content .wpcf7 .button-fa input[type="submit"]{ } } /* Button Tablet */ .vorschau.wpcf7 .tablet .button-fa input[type="submit"] { } @media (max-width: 768px){ .section-content .wpcf7 .button-fa input[type="submit"]{ } } /* Button Handy */ .vorschau.wpcf7 .handy .button-fa input[type="submit"] { } @media (max-width: 480px){ .section-content .wpcf7 .button-fa input[type="submit"]{ } } /* Footer */ /* Footer Variablen */ .vorschaufooter, #colophon{ background-color: #111111; background-size: cover; line-height: 1.2; } .vorschaufooter a, #colophon a{ color: #ffffff;} .vorschaufooter .tablet{ } @media (max-width: 1024px){ #colophon{ } } .vorschaufooter .handy{ } @media (max-width: 768px){ #colophon{ } } /* Vorschau */ /*----------- V O R S C H A U --------------*/ .button-vorschau, .vorschau-li, .vorschau-ol, .vorschau.ueberschriften, .vorschautext, .blockquote-vorschau{ background-color: #1b161e; background-size: cover; background-attachment: fixed; } .blockquote-vorschau{ } .vorschau.wpcf7{ } .vorschau.vorschautext{ background: #383838; } .vorschau-li{ } .vorschau-ol{ } .button-vorschau{ } .vorschau.h1{ background: #0a0a0a } .vorschau.h2{ background: #0a0a0a } .vorschau.h3{ } .vorschau.h4{ } .vorschau.h5{ } .vorschau.h6{ } /* Quelle: navigation.css */ .primary-navigation-wrapper{ position: fixed; left: 100px; top: 0px; width: calc(100% - 330px); display: flex; flex-wrap: wrap; justify-content: center; left: 90px; } #headnavigation{ height: 100px; } header#masthead #primary-navigation>div>ul>li>a{ font-family: Poppins; } header#masthead #primary-navigation .sub-menu a{ font-family: Poppins; font-weight: 400; } header#masthead #primary-navigation .sub-menu{ max-width: 300px; } header#masthead { padding: 0px; z-index: 2000; width: 100%; top: 0px; height: 70px; } header#masthead{ padding: 0px; } header#masthead .masthead-scroll-background{ width: 100%; height: 100%; bottom: 100%; position: absolute; transition: all 0.3s; top: 0px; } header#masthead.sticky .masthead-scroll-background{ bottom: 0; } header#masthead.fixed { position: fixed; background: none; } header#masthead.sticky{ min-height: 80px; } header#masthead #primary-navigation>div>ul>li>a { color: #fff; line-height: 100%; letter-spacing: 1px; color: #fff; display: block; color: rgba(0,0,0,0); font-size: 15px; letter-spacing: 2px; color: #fff; } #primary-navigation{ display: flex; flex-wrap: wrap; justify-content: flex-end; } .cta-button{ background: linear-gradient(45deg, rgba(207,7,126,1) 0%,rgba(240,126,35,1) 100%); padding: 11px 25px 14px 25px; width: 100%; width: 200px; line-height: 100%; color: #fff; border-radius: 9999px; color: #fff; display: block; text-align: left; font-size: 14px; letter-spacing: 1px; position: absolute; right: 30px; top: 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; font-family: Poppins; font-weight: 400; } .cta-button .button-arrow-right-icon{ display: block; width: 20px; height: 20px; mask-image: url(https://wolpermedia.de/wp-content/themes/jackalope/fa-layout/fa-css/../fa-images/right-arrow.svg); -webkit-mask-image: url(https://wolpermedia.de/wp-content/themes/jackalope/fa-layout/fa-css/../fa-images/right-arrow.svg); mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-position: center center; -webkit-mask-position: center center; mask-size: contain; -webkit-mask-size: contain; background-color: #fff; display: flex; flex-wrap: wrap; position: absolute; right: 25px; } #menu-mainmenu{ display: flex; flex-wrap: wrap; } header#masthead #primary-navigation>div>ul>li .sub-menu li a{ color: #ccc; font-size: 14px; line-height: 130%; } header#masthead #primary-navigation>div>ul>li.menu-item-has-children>a{ display: flex; } @media (min-width: 1201px){ header#masthead #primary-navigation>div>ul>li.menu-item-has-children>a{ padding-right: 45px; } header#masthead #primary-navigation>div>ul>li.menu-item-has-children>a .menu-title{ position: relative; } header#masthead #primary-navigation>div>ul>li.menu-item-has-children>a .menu-title:after { content: ""; background: #fff; display: inline-block; width: 15px; height: 15px; margin-left: 10px; mask: url(https://wolpermedia.de/wp-content/themes/jackalope/fa-layout/fa-css/../fa-images/next.svg); mask-size: contain; mask-position: center center; transform: rotate(90deg); top: 2px; position: relative; position: absolute; } header#masthead #primary-navigation>div>ul>li:hover .sub-menu{ display: block; position: absolute; } header#masthead #primary-navigation>div>ul>li:hover .sub-menu .sub-menu{ display: none !important; } #primary-navigation ul li a:hover{ color: #FF6700; text-shadow: none; animation-duration: 0.5s; animation-name: hoverLetter; -webkit-text-stroke: 0px; color: #FF6700; } #primary-navigation ul li a:hover { color: #D82A64; text-shadow: none; color: rgba(0,0,0,0); } #primary-navigation ul li li a:hover { color: #fff; } .cta-button, .cta-button .button-arrow-right-icon, .cta-button .text{ transition: all 0.5s; } .cta-button:hover .text{ order: 2; position: relative; margin-left: 0px; } .cta-button:hover .button-arrow-right-icon{ right: 170px; } .cta-button:hover .text{ margin-left: 30px; } header#masthead #primary-navigation>div>ul>li .sub-menu{ background: #111; } header#masthead #primary-navigation>div>ul>li>a:after{ content: ""; width: 0%; height: 2px; display: block; position: absolute; bottom: 15px; left: 30px; transition: all 0.3s; } header#masthead #primary-navigation>div>ul>li>a:hover:after{ width: calc( 100% - 60px); } header#masthead #primary-navigation>div>ul>li.current-menu-item>a:after{ width: calc( 100% - 60px); } } @media (max-width: 1200px){ header#masthead #primary-navigation>div>ul>li{ padding-top: 30px; padding-bottom: 30px; } header#masthead #primary-navigation>div>ul>li.menu-item-has-children{ padding-top: 33px; padding-bottom: 33px; } #primary-navigation .toggle-subemenu{ top: 0px !important; } #primary-navigation ul li{ align-items: center; } header#masthead #primary-navigation .sub-menu li a{ padding-top: 10px; padding-bottom: 10px; } header#masthead #primary-navigation li a{ padding-top: 0px; padding-bottom: 0px; } header#masthead #primary-navigation>div>ul>li.menu-item-has-children>a{ width: calc(100% - 30px); } #primary-navigation > div > ul > li.current-menu-item > .toggle-subemenu{ top: 0px; } header#masthead #primary-navigation>div>ul>li>a{ width: 100%; text-align: left; } #primary-navigation .toggle-subemenu{ top: 30px; } header#masthead #primary-navigation>div>ul>li>a{ font-size: 20px !important; } #logo{ width: 70px; } #primary-navigation, #menu-mainmenu{ display: block; } .cta-button{ right: 100px; font-size: 14px; padding: 11px 25px 12px 25px; } /*--- Navigation ---*/ #additional-top-menu{ display: flex; flex-wrap: wrap; align-items: center; line-height: 100%; border-bottom-right-radius: 10px; border-top-left-radius: 10px; padding-top: 20px; justify-content: center; } #additional-top-menu ul li a{ font-weight: normal; display: block; line-height: 100%; font-size: 14px; padding-left: 15px; padding-right: 15px; color: #fff; letter-spacing: 0px; text-transform: uppercase; letter-spacing: 4px; } #additional-top-menu ul li:last-child a{ border-right: none; } #additional-top-menu ul li a{ border-right: 1px solid #fff; } .toggle-menu { right: 30px; top: 26px; width: 40px; height: 25px; position: absolute; cursor: pointer; transition: 0.5s; } .toggle-menu .stroke-1, .toggle-menu .stroke-2, .toggle-menu .stroke-3 { height: 3px; width: 100%; background-color: #fff; position: absolute; transition: 0.5s; border-radius: 9999px; } .toggle-menu .stroke-1 { top: 0px; } .toggle-menu .stroke-2 { top: 50%; transform: translateY(-50%); width: 80%; } .toggle-menu:hover .stroke-2{ width: 100%; } .toggle-menu .stroke-3 { bottom: 0px; } .close{ color: #fff; border-radius: 9999px; line-height: 100%; width: 40px; height: 40px; text-align: center; text-shadow: 3px 3px rgba(0,0,0,1); margin: auto auto; cursor: pointer; position: fixed; margin-bottom: 20px; right: 30px; top: 25px; display: none; z-index: 1; } .close:after{ content: ""; display: block; height: 90%; width: 90%; position: absolute; background-color: #fff; -webkit-mask-image: url(https://wolpermedia.de/wp-content/themes/jackalope/fa-layout/fa-css/../fa-images/close-nav.svg); mask-image: url(https://wolpermedia.de/wp-content/themes/jackalope/fa-layout/fa-css/../fa-images/close-nav.svg); -webkit-mask-size: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); } @keyframes rotateClose{ from { transform: rotate(0deg);} to { transform: rotate(270deg);} } .close.rotate{ animation-name: rotateClose; animation-duration: 1s; } .close .close-content{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-indent: -9999px; } .primary-navigation-wrapper{ position: fixed; width: 100%; height: 100vh; left: 0px; top: 0px; padding: 40px 20px; overflow: scroll; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ display: flex; flex-wrap: wrap; justify-content: center; background-size: cover; display: none; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#cf077e+0,f07e23+100 */ background: linear-gradient(45deg, rgba(207,7,126,1) 0%,rgba(240,126,35,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ } .primary-navigation-wrapper::-webkit-scrollbar{ display: none; } @keyframes sliderUpPrimary{ from { top: 80px; } to { top: 0px; } } @keyframes slideLeft{ from { right: -50px; } to { right: 0px; } } .primary-navigation-wrapper .primary-navigation-content{ align-self: center; z-index: 1; } .primary-navigation-wrapper .slideUp{ position: relative; animation-name: sliderUpPrimary; animation-duration: 1s; } #primary-navigation{ width: 680px; } #primary-navigation ul li{ margin-top: 0px; margin-bottom: 0px; text-align: center; position: relative; display: flex; flex-wrap: wrap; border-bottom: 2px solid #fff; } #primary-navigation ul li li{ border-bottom: none; } #primary-navigation ul li a { color: #fff; line-height: 100%; font-size: 20px; letter-spacing: 1px; color: #fff; display: block; color: rgba(0,0,0,0); letter-spacing: 2px; color: #fff; text-shadow: none; color: rgba(0,0,0,0); padding-left: 0px !important; } #primary-navigation ul li li{ margin-bottom: 10px; margin-top: 10px; } #primary-navigation ul li.current-menu-item a{ } #primary-navigation li.menu-item-has-children a{ flex-grow: 2; text-align: left; } #phone-head{ position: absolute; right: 100px; top: 0px; height: 80px; color: #fff; display: flex; flex-wrap: wrap; align-items: center; line-height: 100%; font-size: 20px; letter-spacing: 1px; padding-top: 5px; } #phone-head a{ color: #fff; display: flex; font-size: 16px; line-height: 100%; align-items: center; } #phone-head a:after{ content: ""; width: 40px; height: 40px; display: block; background: #fff; -webkit-mask-image:url(https://wolpermedia.de/wp-content/themes/jackalope/fa-layout/fa-css/images/phone-3.svg); mask-image: url(https://wolpermedia.de/wp-content/themes/jackalope/fa-layout/fa-css/images/phone-3.svg); -webkit-mask-position: center center; mask-position: center center; -webkit-mask-size: contain; mask-size: contain; margin-left: 10px; } #primary-navigation ul li .sub-menu{ width: 100%; display: none; padding-top: 20px; padding-bottom: 10px; } .toggle-subemenu.active + .sub-menu{ display: flex !important; flex-wrap: wrap !important; } #primary-navigation ul li{ width: 100%; } #primary-navigation>div>ul>li>ul>li>a{ font-size: 16px !important; color: #fff !important; } #primary-navigation ul li .sub-menu li:last-child a:after{ content: ""; } @keyframes hoverLettersub{ 0% { letter-spacing: 5px; } 50% { letter-spacing: 3px; } 100% { letter-spacing: 4px; } } #primary-navigation ul li .sub-menu li:last-child{ margin-bottom: 0px; } #primary-navigation .toggle-subemenu{ position: relative; width: 30px; height: 30px; cursor: pointer; } @keyframes togglelinerotate{ from{height: 100%;} to{height: 0;} } @keyframes fillline1{ from{height: 0%;} to{height: 100%;} } @keyframes fillline2{ from{width: 0%;} to{width: 100%;} } #primary-navigation .toggle-subemenu .line1{ position: absolute; top: 50%; left: 50%; background: #fff; width: 2px; height: 90%; transform: translate(-50%, -50%); position: relative; } #primary-navigation .toggle-subemenu.active .line1{ animation: togglelinerotate 0.3s; animation-fill-mode: forwards; } #primary-navigation .toggle-subemenu .line2{ position: absolute; top: 50%; left: 50%; background: #fff; height: 2px; width: 90%; transform: translate(-50%, -50%); } #primary-navigation .toggle-subemenu.active{ transform: rotate(-180deg); } .primary-navigation-call{ color: #fff; text-align: center; margin-top: 40px; letter-spacing: 5px; text-transform: uppercase; } .primary-navigation-call a{ color: #fff; } .primary-navigation-call a:hover{ color: #FF6700; } #top{ background: #222; font-size: 14px; padding-top: 5px; padding-bottom: 5px; text-align: center; } #top li{ display: inline-block; padding-right: 10px; padding-left: 10px; border-right: 1px solid #fff; line-height: 100%; } #top li:last-child{ border-right: none; } #top a{ color: #fff; display: inline-block; line-height: 100%; letter-spacing: 2px; text-transform: uppercase; } } @media(max-width: 768px){ .primary-navigation-wrapper .primary-navigation-content{ width: calc(100% - 40px); } #primary-navigation{ width: 100%; } #primary-navigation>div>ul>li>a{ font-size: 50px; } .toggle-subemenu.active + .sub-menu{ display: block !important; } #primary-navigation ul li .sub-menu a:after{ content: ""; } } @media(max-width: 480px){ #primary-navigation .toggle-subemenu{ margin-left: 0px; } .nav-logo, #logo{ padding-left: 5px; width: 60px; } #primary-navigation ul li li a{ letter-spacing: 1px !important; } .primary-navigation-call{ font-size: 14px; letter-spacing: 1px; } .primary-navigation-wrapper{ padding-top: 55px; } } @media(max-width: 420px){ .primary-navigation-wrapper{ padding-left: 10px; padding-right: 10px; } #primary-navigation .toggle-subemenu{ width: 20px; height: 20px; } } @media(max-width: 350px){ #primary-navigation ul li a{ padding-top: 18px; padding-bottom: 18px; } } /* Quelle: basic-style.css */ /* Theme Name: Flex Theme URI: Author: Vanessa Gerner Version: 1.0 */ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; transition: all 0.3; } html, body { height: 100%; padding: 0px; margin: 0px; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f6f6f6+73,f7f7f7+100 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f7f7f7', GradientType=1); /* IE6-9 fallback on horizontal gradient */ line-height: 130%; } a { color: #EBEBEB; } body { padding: 0; margin: 0; background-size: 100% auto; } .screen-reader-text{ display: none; } #content { overflow-x: hidden; overflow: hidden; } section { position: relative; top: 0px; } .section-content { position: relative; z-index: 1; padding-left: 60px; padding-right: 60px; } .ueberschrift-box h1, .ueberschrift-box h2, .ueberschrift-box h3, .ueberschrift-box h4, .ueberschrift-box h5, .ueberschrift-box h6 { margin-bottom: 0px; margin-top: 0px; z-index: 1; } h1, h2, h3, h4, h5, h6 { font-weight: normal; padding: 0px; margin-bottom: 20px; margin-top: 0px; display: block; line-height: 100%; } blockquote { margin: 0px; } .titel { display: block; } .produkttitel { display: block; } a { text-decoration: none; color: #0A4782; } p:last-child { margin-bottom: 0px; } .embed-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } hr { border: none; margin: 0px; padding: 0px; } p { margin-top: 0; padding-top: 0px; } ul { margin-bottom: 0; } ul li { list-style: none; } .float-right { float: right !important; } html { padding: 0; margin: 0; } ul, ul li { margin: 0; padding: 0; } .image { position: relative; } img { width: 100%; height: auto; display: block; } #socialmedia-box { display: flex; flex-wrap: wrap; top: 13px; } #socialmedia-box .item { width: 28px; height: 28px; margin-left: 5px; margin-right: 5px; position: relative; } #socialmedia-box svg{ display: block; width: 100%; height: 100%; overflow: hidden; } #headertext { top: 13px; line-height: 100%; overflow: hidden; height: 25px; display: flex; flex-wrap:wrap; flex-direction: column; justify-content: center; } /* Logo Right */ #logomobil{ display: none; } .parallax-window { background: transparent; } .header-logo-right #headertext { text-align: left; } .header-logo-right .headertext-and-social-media-buttons{ left: 0px; } .header-logo-right .headertext-and-social-media-buttons{ flex-direction: row-reverse; justify-content: flex-end; } .header-logo-right #socialmedia-box{ margin-right: 10px; } .header-logo-left #headertext { text-align: right; } .header-logo-left #socialmedia-box{ margin-left: 10px; } .header-logo-middle #headertext { text-align: center; } .header-logo-left .headertext-content{ display: block; } .header-logo-right .headertext-content{ display: block; } .header-logo-middle .headertext-content{ display: block; padding-right: 20px; } .text-content{ display: block; width: 100%; } @media (min-width: 1200px) { /* Logo left */ .header-logo-left #logo, .header-logo-right #logo { height: 100%; display: block; position: absolute; padding: 10px; } .header-logo-left #logo{ left: 20px; } .header-logo-left #logo img, .header-logo-right #logo img { width: 100%; height: 100%; position: absolute; object-fit: contain; object-position: left center; top: 50%; transform: translateY(-50%); left: 0px; padding: 10px 0px; } .header-logo-left #socialmedia-box { right: 0px; } .header-logo-left .headertext-and-social-media-buttons{ right: 20px; } .header-logo-right .headertext-and-social-media-buttons{ left: 20px; } /* Logo Right */ .header-logo-right #logo { left: auto; right: 20px; } .header-logo-right #logo img { object-position: right; } .header-logo-right #logo { right: 20px; } .header-logo-right #logo img { object-position: right; } .header-logo-right #primary-navigation { left: 0px; } .header-logo-right #headertext { text-align: left; } /* Logo Middle */ #masthead.header-logo-middle { height: auto; } #masthead.header-logo-middle .header-content { height: auto; display: flex; flex-direction: column; } .header-logo-middle #logo { display: block; position: relative; margin: auto auto; margin-bottom: 20px; margin-top: 10px; } .header-logo-middle #logo img { display: block; width: 100%; position: relative; } .header-logo-middle #socialmedia-box { left: 0px; right: 0px; justify-content: center; position: relative; top: 0; margin-bottom: 5px; order: -1; margin-top: 20px; } .header-logo-middle #headertext { display: block; margin: auto auto; width: 100%; position: relative; } .header-logo-middle #primary-navigation { max-width: 100%; width: 100%; left: 0px; position: relative; } .header-logo-middle #primary-navigation .menu-mainmenu-container { display: block; } .header-logo-middle #primary-navigation ul { justify-content: center; } } /*Text Align*/ .left { text-align: left; } .center { text-align: center; } .right { text-align: right; } .more-white { text-align: center; display: block; } .flex-wrap { display: flex; flex-wrap: wrap; } .shadow-line { border: none; height: 20px; width: 90%; height: 50px; margin-top: 80px; border-bottom: 1px solid #1f1209; box-shadow: 0 20px 20px -20px #333; } .columns1 { width: 100%; } .columns2 { width: 50%; } .columns3 { width: 33.33%; } .columns4 { width: 25%; } .columns5 { width: 20%; } .columns6 { width: 16.66%; } .titlecontent{ margin: auto auto; position: relative; } .content { margin: auto auto; position: relative; } .cfullwidth { margin-left: -60px; margin-right: -60px; } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); } .grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); } .grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); } .grid-7 { display: grid; grid-template-columns: repeat(7, 1fr); } .grid-8 { display: grid; grid-template-columns: repeat(8, 1fr); } .grid-9 { display: grid; grid-template-columns: repeat(9, 1fr); } .grid-10 { display: grid; grid-template-columns: repeat(10, 1fr); } .grid-11 { display: grid; grid-template-columns: repeat(11, 1fr); } .grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); } hr { border: none; margin-top: 0; margin-bottom: 0; clear: both; } .spacer5 { height: 5px; } .spacer10 { height: 10px; } .spacer15 { height: 15px; } .spacer20 { height: 20px; } .spacer25 { height: 25px; } .spacer30 { height: 30px; } .spacer35 { height: 35px; } .spacer40 { height: 40px; } .spacer45 { height: 45px; } .spacer50 { height: 50px; } .spacer55 { height: 55px; } .spacer60 { height: 60px; } .spacer65 { height: 65px; } .spacer70 { height: 70px; } .spacer75 { height: 75px; } .spacer80 { height: 80px; } .spacer85 { height: 85px; } .spacer90 { height: 90px; } .spacer100 { height: 100px; } .spacer110 { height: 110px; } .spacer120 { height: 120px; } .spacer130 { height: 130px; } .spacer140 { height: 140px; } .spacer150 { height: 150px; } .spacer160 { height: 160px; } .spacer170 { height: 170px; } .spacer180 { height: 180px; } .spacer190 { height: 190px; } .spacer200 { height: 200px; } .spacer210 { height: 210px; } .spacer220 { height: 220px; } .spacer230 { height: 230px; } .spacer240 { height: 240px; } .spacer250 { height: 250px; } .spacer300 { height: 300px; } .spacer350 { height: 350px; } .spacer400 { height: 400px; } .spacer450 { height: 450px; } .spacer500 { height: 500px; } .spacer550 { height: 550px; } .spacer600 { height: 600px; } .spacer650 { height: 650px; } .spacer700 { height: 700px; } .spacer750 { height: 700px; } .spacer800 { height: 800px; } /*---- TABELLE ------*/ .table { display: table; } .tr { display: table-row; } .td { display: table-cell;} /*HEADER*/ #masthead { position: relative; z-index: 2000; height: 130px; } #masthead:after { content: ""; display: block; width: 100%; position: absolute; bottom: 0px; transform: translateY(100%); background-repeat: repeat-x; } #masthead .header-content { height: 130px; position: relative; margin: auto auto; } .headertext-and-social-media-buttons{ display: flex; flex-wrap: wrap; align-items: center; position: absolute; right: 0px; top: 0px; } #primary-navigation li a { display: block; padding: 28px 20px 28px 20px; letter-spacing: 1px; line-height: 100%; } #primary-navigation li li { position: relative; } /*Submenü*/ #primary-navigation .sub-menu { display: none; } #primary-navigation .sub-menu li:first-child{ border-top: none; } #primary-navigation .sub-menu .sub-menu li:first-child { border-top: none; } #primary-navigation .sub-menu .sub-menu li { border-right: none; } video { width: 100%; display: block; } /*Galerie*/ .gallery > br { display: none; } .gallery dl { margin: 0; } .gallery { display: grid; grid-gap: 25px; } .gallery-columns-1 { grid-template-columns: repeat(1, 1fr); } .gallery-columns-2 { grid-template-columns: repeat(2, 1fr); } .gallery-columns-3 { grid-template-columns: repeat(3, 1fr); } .gallery-columns-4 { grid-template-columns: repeat(4, 1fr); } .gallery-columns-5 { grid-template-columns: repeat(5, 1fr); } .gallery-columns-6 { grid-template-columns: repeat(6, 1fr); } .gallery-item img { width: 100%; height: auto; display: block; float: left; transition: all 0.3s; } /*FORMULAR*/ .editor-styles-wrapper ol, ol { list-style: decimal inside none; padding-left: 0px; } .gradient { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; display: block; background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 48%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.3) 100%); background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 48%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.3) 100%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 48%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.3) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#4d000000', GradientType=0); } .acf-label .button-fa, .buttondiv .button-fa{ display: block; height: auto; text-align: center; position: relative; display: block; overflow: hidden; width: 100%; } .buttondiv .button-fa-content, .buttondiv input[type="submit"]{ z-index: 1; position: relative; display: block; text-align: center; } .buttondiv{ width: 100%; } .button-submit, .buttondivsubmit { display: flex; flex-wrap: wrap; } .button-direction-left .buttondivsubmit { justify-content: flex-start; } .button-direction-center .buttondivsubmit { justify-content: center; } .button-direction-right .buttondivsubmit { justify-content: flex-end; } #menu-footer { display: flex; flex-wrap: wrap; justify-content: center; } .padding5 { padding: 5px; } .padding10 { padding: 10px; } .padding15 { padding: 15px; } .padding20 { padding: 20px; } .padding25 { padding: 25px; } .padding30 { padding: 30px; } .padding35 { padding: 35px; } .padding40 { padding: 40px; } .padding45 { padding: 45px; } .padding50 { padding: 50px; } .padding55 { padding: 55px; } .padding60 { padding: 60px; } .padding65 { padding: 65px; } .padding70 { padding: 70px; } .padding75 { padding: 75px; } .padding80 { padding: 80px; } .padding85 { padding: 85px; } .padding90 { padding: 90px; } .padding90 { padding: 95px; } .padding100 { padding: 100px; } .gridgap5 { grid-gap: 5px; } .gridgap10 { grid-gap: 10px; } .gridgap15 { grid-gap: 15px; } .gridgap20 { grid-gap: 20px; } .gridgap25 { grid-gap: 25px; } .gridgap30 { grid-gap: 30px; } .gridgap35 { grid-gap: 35px; } .gridgap40 { grid-gap: 40px; } .gridgap45 { grid-gap: 45px; } .gridgap50 { grid-gap: 50px; } .gridgap55 { grid-gap: 55px; } .gridgap60 { grid-gap: 60px; } .gridgap65 { grid-gap: 65px; } .gridgap70 { grid-gap: 70px; } .gridgap75 { grid-gap: 75px; } .gridgap80 { grid-gap: 80px; } .gridgap85 { grid-gap: 85px; } .gridgap90 { grid-gap: 90px; } .gridgap95 { grid-gap: 95px; } .gridgap100 { grid-gap: 100px; } .height5 { height: 5px; } .height10 { height: 10px; } .height20 { height: 20px; } .height30 { height: 30px; } .height40 { height: 40px; } .height50 { height: 50px; } .height60 { height: 60px; } .height70 { height: 70px; } .height80 { height: 80px; } .height90 { height: 90px; } .height100 { height: 100px; } .height110 { height: 110px; } .height120 { height: 120px; } .height130 { height: 130px; } .height140 { height: 140px; } .height150 { height: 150px; } .height160 { height: 160px; } .height170 { height: 170px; } .height180 { height: 180px; } .height190 { height: 190px; } .height200 { height: 200px; } .height210 { height: 210px; } .height220 { height: 220px; } .height230 { height: 230px; } .height240 { height: 240px; } .height250 { height: 250px; } .height300 { height: 300px; } p:last-child { margin-bottom: 0px; } .grid { display: grid } .grid1 { grid-template-columns: 100%; } .grid2 { grid-template-columns: 50% 50%; } .grid3 { grid-template-columns: 33.33% 33.33% 33.33%; } .grid4 { grid-template-columns: 25% 25% 25% 25%; } .grid5 { grid-template-columns: 20% 20% 20% 20% 20%; } .spalten-box .titel { display: block; } .flexibler-inhalt-box .text, .spalten-box .text{ width: 100%; } .spalten-box .text-content{ width: 100%; } .box-title, .box-subtitle, .spalten-subtitel, .spalten-titel{ display: block; } .background-shadow { position: absolute; top: 0px; height: 100%; } /* Youtube Video */ .youtube-video { position: relative; padding-bottom: 56.25%; overflow: hidden; max-width: 100%; height: auto; } .youtube-video iframe, .youtube-video object, .youtube-video embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .imagecover { align-items: stretch !important; } .imagecover .image { position: relative; } .imagecover .image img { position: absolute; width: 100%; height: 100%; object-fit: cover; } .facebook strong, .instagram strong, .twitter strong, .youtube strong, .vimeo strong, .pinterest strong, .email strong, .shop strong { display: block; font-weight: normal; text-indent: -9999px; position: absolute; width: 23px; top: 1px; left: 1px; height: 23px; border-radius: 9999px; } .facebook svg, .instagram svg, .twitter svg, .youtube svg, .vimeo svg, .pinterest svg, .email svg, .shop svg { width: 25px; height: 25px; overflow: hidden; border-radius: 9999px; position: relative; z-index: 1; } #colophon { line-height: 1.0; position: relative; z-index: 100; } #colophon .content { padding-top: 20px; padding-bottom: 20px; } #colophon ul li { padding-right: 20px; padding-left: 20px; padding-right: 20px; display: block; } #colophon ul li:last-child { border-right: none; } #signature { font-size: 10px; padding-top: 10px; padding-bottom: 10px; letter-spacing: 1px; background: #000; color: #fff; line-height: 100%; } .galerie-box .section-content ul li:before, .acf-field .acf-label .galerie-box ul li:before { display: none; } .item-content { position: relative; } /* .item-content:before, .section-content .content:before { content: ""; display: block; width: 100%; position: absolute; left: 50%; transform: translate(-50%, -100%); top: 0px; z-index: 1; } .item-content:after, .section-content .content:after { content: ""; display: block; width: 100%; position: absolute; left: 50%; transform: translate(-50%, 100%); bottom: 0px; z-index: 1; }*/ .swiper-button-prev, .swiper-button-next { border-radius: 5px; } .buttondiv { display: flex; flex-wrap: wrap; } .buttondiv a { margin-bottom: 12px; } .buttondiv a:last-child { margin-bottom: 0; } .buttondiv.left { justify-content: flex-start; } .buttondiv.center { justify-content: center; } .buttondiv.right { justify-content: flex-end; } .section-content .galerie ul li { padding-left: 0px; } .swiper-container-initialized { overflow: hidden; } .swiper-slide { height: auto !important; } #call-to-action-box a{ margin-bottom: 5px; } #call-to-action-box{ display: none; } #email-button strong, #phone-button strong, #whatsapp-button strong{ } #show-call-to-action-box-button{ width: 50px; height: 50px; text-indent: -9999px; background: #dda741; border-radius: 9999px; border: 2px solid rgba(255,255,255,0.8); display: flex; justify-content: center; align-items: center; cursor: pointer; box-shadow: 0 0 10px rgba(0,0,0,0.3); } #call-to-action-box{ background: rgba(0,0,0,0.95); padding: 5px; border-radius: 9999px; } #show-call-to-action-box-button strong{ width: 50%; height: 50%; display: block; background-color: #fff; -webkit-mask: url("https://wolpermedia.de/wp-content/themes/jackalope/fa-layout/fa-css/../fa-images/acf-icon-more-contact.svg") no-repeat 100% 100%; mask: url("https://wolpermedia.de/wp-content/themes/jackalope/fa-layout/fa-css/../fa-images/acf-icon-more-contact.svg") no-repeat 100% 100%; -webkit-mask-size:100% 100%; mask-size: 100% 100%; } .footer-more-box{ position: fixed; right: 10px; bottom: 10px; z-index: 1000; } #email-button, #phone-button, #whatsapp-button{ display: block; position: relative; width: 40px; height: 40px; } #email-button svg, #phone-button svg, #whatsapp-button svg { position: absolute; z-index: 2; width: 40%; height: 40%; left: 50%; top: 50%; transform: translate(-50%, -50%); fill: #fff; } #email-button strong, #phone-button strong, #whatsapp-button strong { text-indent: -9999px; display: block; position: absolute; width: calc(100% - 2px); height: calc(100% - 2px); z-index: 1; top: 1px; left: 1px; border-radius: 9999px; } a#scrollup { display: none; background: rgba(0, 0, 0, 0.8); width: 45px; height: 45px; text-align: center; border-radius: 9999px; transition: background-color .3s; z-index: 1000; border: 2px solid rgba(255,255,255,0.7); cursor: pointer; } a#scrollup.show{ display: flex; justify-content: center; align-items: center; margin-top: 5px; } a#scrollup strong{ width: 50%; height: 50%; display: block; background-color: #fff; -webkit-mask: url("https://wolpermedia.de/wp-content/themes/jackalope/fa-layout/fa-css/../fa-images/acf-icon-scrollup.svg") no-repeat 100% 100%; mask: url("https://wolpermedia.de/wp-content/themes/jackalope/fa-layout/fa-css/../fa-images/acf-icon-scrollup.svg") no-repeat 100% 100%; -webkit-mask-size:100% 100%; mask-size: 100% 100%; } @media only screen and (max-device-width: 1366px) { .parallax { background-attachment: scroll; } } .backgroundvideo{ position: absolute; width: 100%; height: 100%; object-fit: cover; left: 0px; top: 0px; } #primary-navigation ul ul li a{ border-right: none; } #primary-navigation ul ul li:last-child a{ border-bottom: none; } #primary-navigation ul ul ul li a{ border-right: none; } #primary-navigation ul ul ul li:last-child a{ border-bottom: none; } #primary-navigation>div>ul>li:last-child{ border-right: none; } .flexibleheight{ position: relative; } .flexibleheight{ position: relative; } .flexibleheight img{ position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center center; top: 0px; left: 0px; } .spaltenbild{ width: 100%; } .box-read-more-text{ display: none; } /* Kontaktformualr */ .wpcf7 label{ display: block; } .wpcf7 input{ font-size: auto; font-family: auto; } .wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 input[type="file"], .wpcf7 textarea { width: 100%; border: none; font-weight: normal; -webkit-appearance: none; } .wpcf7 input[type=submit]{ position: relative; z-index: 1; width: 100%; border: none; -webkit-appearance: none; background: none; } .wpcf7 input[type="submit"]:disabled{ opacity: 0.5; } .wpcf7-form-control-wrap { display: block; } .wpcf7-validation-errors, div.wpcf7-acceptance-missing { background: #f7e700; color: #333; } .wpcf7-mail-sent-ng, div.wpcf7-aborted { background: #ff0000; color: #333; } .wpcf7 .wpcf7-acceptance { display: block; margin-bottom: 15px; padding: 12px 17px 12px 12px; } .wpcf7 .wpcf7-acceptance p { margin-bottom: 0px; margin-top: 0px; } .wpcf7 .wpcf7-acceptance label { display: flex; flex-wrap: wrap; } .wpcf7 .wpcf7-acceptance input[type="checkbox"] { display: block; width: 13px; height: 13px; margin: 0px; margin-right: 10px; } .wpcf7 .wpcf7-acceptance label span { width: calc(100% - 23px); } div.wpcf7-response-output { margin-top: 0px; } div.wpcf7-response-output { margin: 0px; } .wpcf7-acceptance .wpcf7-list-item-label { display: block; margin-bottom: 10px; width: calc(100% - 30px); } span.wpcf7-list-item { margin: 0px; } .ajax-loader { position: absolute; } .flexible-content-aufzahlung .flexible-text{ padding-left: 20px; } .flexible-content-image-left-right.fp-left .flexible-text{ padding-left: 35px; } .flexible-content-image-left-right.fp-right .flexible-text{ padding-right: 35px; } .flexible-content-image-left-right.fp-right{ flex-direction: row-reverse; } .flexible-flex-wrap{ display: flex; flex-wrap: wrap; } .flexible-content-image .flexibleimage{ margin: auto auto; } .flexible-content-aufzahlung .item-aufzahlung{ padding: 15px; } .flexible-content-gallery div{ display: flex; flex-wrap: wrap; } .flexible-content-gallery { margin-left: -10px; margin-right: -10px; } .flexible-content-gallery .image{ padding: 10px; } .flexible-content-gallery a{ display: block; width: 100%; } .flexible-content-gallery img{ display: block; width: 100%; } .preis{ width: 100%; display: block; text-align: right; } @media all and (-ms-high-contrast:none) { .swiper-button-prev, .swiper-button-next { position: absolute; top: 50%; width: 27px; height: 44px; margin-top: -22px; z-index: 10; cursor: pointer; background-size: 27px 44px; background-position: center; background-repeat: no-repeat; } .swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled { opacity: 0.35; cursor: auto; pointer-events: none; } .swiper-button-prev, .swiper-container-rtl .swiper-button-next { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E"); left: 10px; right: auto; } .swiper-button-next, .swiper-container-rtl .swiper-button-prev { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E"); right: 10px; left: auto; } .swiper-button-prev.swiper-button-white, .swiper-container-rtl .swiper-button-next.swiper-button-white { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); } .swiper-button-next.swiper-button-white, .swiper-container-rtl .swiper-button-prev.swiper-button-white { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); } .swiper-button-prev.swiper-button-black, .swiper-container-rtl .swiper-button-next.swiper-button-black { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E"); } .swiper-button-next.swiper-button-black, .swiper-container-rtl .swiper-button-prev.swiper-button-black { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E"); } .spalten-box .swiper-button-lock { display: none; } } @keyframes slidefrontendbutton{ from { left: -130px; } to { left: 0px; } } .frontend-buttons{ position: fixed; left: 0px; max-width: 200px; z-index: 20000; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.3); padding: 10px; top: 50%; border-bottom-right-radius: 5px; left: -130px; } .frontend-buttons.active{ animation-name: slidefrontendbutton; animation-duration: 0.5s; animation-fill-mode: forwards; } .frontend-buttons.active .show-hide-frontend-buttons:after{ transform: rotate(-180deg); } .show-hide-frontend-buttons{ position: absolute; right: -20px; width: 20px; height: 40px; background: #fff; top: 0px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; cursor: pointer; background-color: #fff; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,f1f1f1+50,e1e1e1+94,f6f6f6+100 */ background: rgb(255,255,255); /* Old browsers */ background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(241,241,241,1) 50%, rgba(225,225,225,1) 94%, rgba(246,246,246,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 94%,rgba(246,246,246,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 94%,rgba(246,246,246,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=1 ); /* IE6-9 */ } .show-hide-frontend-buttons:after{ content: ""; position: absolute; width: 100%; height: 100%; background: url(https://wolpermedia.de/wp-content/themes/jackalope/fa-layout/fa-css/../fa-images/arrow-right.svg) no-repeat center center; background-size: 12px auto; } .frontend-buttons .plus{ width: 18px; height: 18px; padding-top: 2px; padding-left: 1px; border: 2px solid #333; line-height: 90%; display: inline-block; border-radius: 9999px; margin-right: 7px; text-align: center; } .post-edit-link { display: block; padding: 10px; color: #000; font-size: 12px; border-radius: 5px; line-height: 100%; margin-top: 5px; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f78e0e+48,ff670f+52 */ background: rgb(247,142,14); /* Old browsers */ background: -moz-linear-gradient(top, rgba(247,142,14,1) 48%, rgba(255,103,15,1) 52%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(247,142,14,1) 48%,rgba(255,103,15,1) 52%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(247,142,14,1) 48%,rgba(255,103,15,1) 52%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f78e0e', endColorstr='#ff670f',GradientType=0 ); /* IE6-9 */ text-align: center; max-width: 200px; } .add-product-button{ color: #000; padding: 10px 15px 10px 10px; border-radius: 5px; font-size: 12px; line-height: 100%; font-weight: normal; cursor: pointer; z-index: 1000; margin-top: 5px; line-height: 100%; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#9dd53a+0,a1d54f+50,80c217+51,7cbc0a+100;Green+Gloss+%231 */ background: rgb(157,213,58); /* Old browsers */ background: -moz-linear-gradient(top, rgba(157,213,58,1) 0%, rgba(161,213,79,1) 50%, rgba(128,194,23,1) 51%, rgba(124,188,10,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); /* IE6-9 */ text-shadow: 1px 1px rgba(255,255,255,0.4); font-weight: bold; letter-spacing: 1px; width: 120px; } .add-product-button strong{ font-weight: normal; } .block-edit-buttons{ display: flex; flex-wrap: wrap; align-items: flex-start; margin-top: 8px; margin-bottom: 8px; position: relative; z-index: 1000; } .block-edit-buttons .edit-button, .block-edit-buttons .delete-button{ padding: 10px; border: none; cursor: pointer; font-size: 12px; line-height: 100%; text-align: center; display:block; text-shadow: 1px 1px rgba(255,255,255,0.3); color: #000; letter-spacing: 1px; border-radius: 3px; position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } .block-edit-buttons .edit-button{ /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#9dd53a+0,a1d54f+50,80c217+51,7cbc0a+100;Green+Gloss+%231 */ background: rgb(157,213,58); /* Old browsers */ background: -moz-linear-gradient(top, rgba(157,213,58,1) 0%, rgba(161,213,79,1) 50%, rgba(128,194,23,1) 51%, rgba(124,188,10,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); /* IE6-9 */ margin-right: 5px; } .block-edit-buttons .delete-button{ /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ff8e84+46,ff6251+59,ff6251+59 */ background: rgb(255,142,132); /* Old browsers */ background: -moz-linear-gradient(top, rgba(255,142,132,1) 46%, rgba(255,98,81,1) 59%, rgba(255,98,81,1) 59%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(255,142,132,1) 46%,rgba(255,98,81,1) 59%,rgba(255,98,81,1) 59%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(255,142,132,1) 46%,rgba(255,98,81,1) 59%,rgba(255,98,81,1) 59%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8e84', endColorstr='#ff6251',GradientType=0 ); /* IE6-9 */ } .block-edit-buttons .edit-button strong, .block-edit-buttons .delete-button strong{ font-weight: normal; background-color: #000; display: block; width: 50%; height: 50%; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } .block-edit-buttons .edit-button strong{ -webkit-mask-image: url(https://wolpermedia.de/wp-content/themes/jackalope/fa-layout/fa-css/fa-layout/fa-images/edit.svg); mask-image: url(https://wolpermedia.de/wp-content/themes/jackalope/fa-layout/fa-css/fa-layout/fa-images/edit.svg); } .block-edit-buttons .delete-button strong{ -webkit-mask-image: url(https://wolpermedia.de/wp-content/themes/jackalope/fa-layout/fa-css/fa-layout/fa-images/delete.svg); mask-image: url(https://wolpermedia.de/wp-content/themes/jackalope/fa-layout/fa-css/fa-layout/fa-images/delete.svg); } .acf-form-container-news, .acf-form-container{ background: rgba(0,0,0,0.8); position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; display: none; z-index: 10000; } .acf-form-container-content{ max-width: 900px; width: 100%; margin: auto auto; position: fixed; position: fixed; left: 50%; top: 50%; height: calc(100vh - 60px); transform: translate(-50%, -50%); } .acf-form-container-content-inner{ box-shadow: 0 0 20px rgba(0,0,0,1), 0 0 10px rgba(0,0,0,1); background: #fff; border: 1px solid #ccc; overflow: scroll; height: calc(100% - 50px); padding: 30px; } .close-button, .close-acf-form-button{ background: #D6004A; border: 2px solid #fff; border-radius: 5px; color: #fff; padding: 15px 10px 12px 10px; text-align: center; margin-bottom: 10px; cursor: pointer; width: 40px; height: 40px; font-weight: normal; margin-bottom: 20px; font-size: 40px; border-radius: 100px; position: relative; } .close-button strong, .close-acf-form-button strong{ font-weight: normal; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; line-height: 100%; -webkit-mask: url("https://wolpermedia.de/wp-content/themes/jackalope/fa-layout/fa-css/../fa-images/nav-toggle-close.svg") no-repeat center center; mask: url("https://wolpermedia.de/wp-content/themes/jackalope/fa-layout/fa-css/../fa-images/nav-toggle-close.svg") no-repeat center center; -webkit-mask-size:50% 50%; mask-size: 50% 50%; background: #fff; z-index: -9999px; } .acf-form-container-content-header{ color: #fff; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .acf-form-container input[type="submit"]{ width: 100%; background: green; padding: 20px; border: none; color: #fff; border-radius: 4px; cursor: pointer; } .page-numbers{ display: inline-block; } /* Quelle: galerie-box.css */ .galerie-box a{ display: block; width: 100%; } .galerie-box img{ display: block; width: 100%; } /* Quelle: gridgalerie-box.css */ .gridgalerie-box .image-wrapper{ display: grid; grid-template-columns: repeat(5, 1fr); } .gridgalerie-box .image-wrapper .image{ position: relative; margin-bottom: 0px; border-radius: 10px; overflow: hidden; } .gridgalerie-box .image-wrapper .image img{ position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; top: 0px; transition: all 0.3s; } .gridgalerie-box .image-wrapper .image:hover img{ transform: scale(1.1); } .gridgalerie-box .image-wrapper .image:nth-child(1){ grid-column: 1 / 3; grid-row: 1 / 3; padding-top: 100%; } .gridgalerie-box .image-wrapper .image:nth-child(2){ grid-column: 3 / 4; grid-row: 1 / 2; } .gridgalerie-box .image-wrapper .image:nth-child(3){ grid-column: 4 / 6; } .gridgalerie-box .image-wrapper .image:nth-child(4){ grid-column: 3 / 5; grid-row: 2 / 3; } .gridgalerie-box .image-wrapper .image:nth-child(5){ grid-column: 5 / 6; grid-row: 2 / 3; } .gridgalerie-box a{ display: block; } .galerie-box .section-content ul li{ margin-bottom: 0px; } @media (max-width: 1200px){ .gridgalerie-box .image-wrapper{ display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); } .gridgalerie-box .image-wrapper .image:nth-child(1){ grid-column: 1 / 2; grid-row: 1 / 2; padding-top: 65%; } .gridgalerie-box .image-wrapper .image:nth-child(2){ grid-column: 2 / 3; grid-row: 1 / 2; } .gridgalerie-box .image-wrapper .image:nth-child(3){ grid-column: 1 / 3; grid-row: 2 / 3; } .gridgalerie-box .image-wrapper .image:nth-child(4){ grid-column: 1 / 2; grid-row: 3 / 4; } .gridgalerie-box .image-wrapper .image:nth-child(5){ grid-column: 2 / 3; grid-row: 3 / 4; } .gridgalerie-box a{ display: block; } } @media (max-width: 600px){ .gridgalerie-box .image-wrapper .image:nth-child(1){ padding-top: 100%; } } /* Quelle: footer.css */ #colophon{ background: #272227 !important; color: #fff; font-family: Poppins; font-weight: 400; } #colophon h4{ font-size: 20px; text-transform: uppercase; margin-bottom: 30px; } #colophon .content{ width: 100%; display: flex; flex-wrap: wrap; padding-left: 60px; padding-right: 60px; } #colophon .footer-logo-nav{ width: calc(100% - 700px); margin-bottom: 40px; } #colophon .width100{ width: 100%; } #colophon .footer-logo img{ width: 240px; } #colophon .footer-newsletter-menu{ width: calc(100% - 500px); } #colophon .footer-newsletter{ width: 700px; color: #fff; } #colophon .footer-newsletter input[type="email"]{ width: 100%; padding: 15px 20px; background: none; border: 1px solid #ddd; font-size: 20px; color: #ddd; border-radius: 0; border-right: none; } #colophon #menu-footer{ justify-content: left; } #colophon .footer-newsletter input[type="submit"]{ border: 1px solid #ddd; background: none; color: #ddd; padding: 15px 20px; font-size: 20px; border-radius: 0; } #colophon .footer-newsletter .footer-newsletter-header{ font-family: Poppins; font-weight: 800; font-size: 30px; letter-spacing: 1px; margin-bottom: 8px; margin-bottom: 15px; } #colophon .footer-newsletter-forms{ display: flex; } #colophon .footer-nav-menu{ font-size: 20px; } #colophon .footer-nav-menu li{ margin-bottom: 20px; width: 100%; } #colophon .footer-nav-menu{ columns: 1; max-width: 600px; } #colophon .footer-nav-menu a{ color: #fff; line-height: 130%; } #colophon ul li{ padding-left: 0px; padding-right: 0px; } #colophon .cta-footer-text{ font-family: Poppins; font-weight: 800; font-size: 30px; color: #fff; line-height: 120%; text-transform: uppercase; } .footer-wrapper{ display: flex; flex-wrap: wrap; gap: 100px; width: 100%; } #colophon .footer-title{ font-weight: 400; margin-bottom: 25px; display: block; text-transform: uppercase; font-size: 14px; } #colophon .footer-opening th{ font-weight: 400; text-align: left; padding-right: 15px; padding-bottom: 10px; } #colophon #leistungen-footer-navigation{ width: 200px; } #colophon .btn-primary:hover{ color: #000; } #colophon #leistungen-footer-navigation li{ margin-bottom: 30px; } #colophon #leistungen-footer-navigation li:last-child{ margin-bottom: 0px; } #colophon #leistungen-footer-navigation li a{ display: block; display: flex; border-bottom: 1px solid #fff; padding-top: 0px; padding-bottom: 10px; } #colophon #leistungen-footer-navigation li a:hover{ color: #E04350; border-bottom: 1px solid #E04350; } #colophon #leistungen-footer-navigation .menu-item-wrapper{ display: block; width: 100%; } #colophon #leistungen-footer-navigation .menu-content{ display: flex; flex-wrap: wrap; align-items: center; gap: 20px; width: 100%; justify-content: space-between; } #colophon #leistungen-footer-navigation li a .menu-content::after { content: "→"; font-size: 18px; } #colophon #leistungen-footer-navigation li a img{ width: 30px; } #colophon .footer-opening-text tr td:first-child{ padding-right: 20px; font-family: Poppins; font-weight: 800; text-transform: uppercase; } #colophon .footer-contact tr td:first-child{ padding-top: 2px; } #colophon .footer-contact tr td:last-child{ padding-left: 20px; } #colophon .footer-contact tr td{ padding-bottom: 10px; } #colophon .footer-opening-text, #colophon .footer-contact{ line-height: 150%; } #colophon .icon{ text-indent: -9999px; width: 20px; height: 20px; display: block; background: #fff; mask-repeat: no-repeat; mask-size: contain; } #colophon .icon.icon-email{ mask-image: url(https://wolpermedia.de/wp-content/themes/jackalope/fa-layout/fa-css/../fa-images/footer-icon-mail.svg) ; } #colophon .icon.icon-phone{ mask-image: url(https://wolpermedia.de/wp-content/themes/jackalope/fa-layout/fa-css/../fa-images/footer-icon-phone.svg) ; } #colophon .icon.icon-adress{ mask-image: url(https://wolpermedia.de/wp-content/themes/jackalope/fa-layout/fa-css/../fa-images/footer-icon-adress.svg) ; } #footer-navigation{ padding-top: 50px; } #footer-navigation #menu-law{ justify-content: flex-start !important; } #colophon .footer-links{ flex-grow: 2; } #footer-navigation #menu-law li:first-child a { font-size: 14px; } @media(max-width: 1500px){ #colophon .content{ padding-left: 40px; padding-right: 40px; } } @media(max-width: 1400px){ .footer-wrapper{ gap: 70px; } } @media(max-width: 1200px){ #colophon .cta-footer-text, #colophon .footer-cta{ text-align: center; } #colophon #leistungen-footer-navigation{ width: 100%; } #colophon .footer-wrapper{ gap: 60px; } #colophon .footer-cta{ width: 100%; padding: 40px; border-radius: 8px; border: 3px solid #fff; } #colophon .footer-cta br{ display: none; } #colophon .content{ padding-left: 30px; padding-right: 30px; } } @media(max-width: 1024px){ #colophon .footer-cta br:first-child{ display: block; } } @media(max-width: 768px){ #colophon .content{ padding-left: 20px; padding-right: 20px; } #colophon .cta-footer-text{ font-size: 25px; } #colophon .footer-links{ width: 100% } } @media(max-width: 480px){ #colophon .cta-footer-text{ font-size: 23px; } #colophon .footer-cta br{ display: block; } #colophon .footer-cta{ padding: 30px 20px; } .footer-cta .btn-primary{ font-size: 15px; } #colophon .content{ padding-left: 15px; padding-right: 15px; } } /* Quelle: testimonialcta-box.css */ /* ======================================== Testimonials + CTA ======================================== */ .testimonials-cta{ background: #333; background: linear-gradient(45deg, rgba(207,7,126,1) 0%,rgba(240,126,35,1) 100%); } .testimonials-cta .container { margin: 0 auto; padding: 0 24px; } /* ======================================== /* ======================================== Layout ======================================== */ .testimonials-wrapper { display: flex; flex-wrap: wrap; } /* ======================================== Left Side ======================================== */ .section-label { display: inline-block; margin-bottom: 28px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #fff; } /* ======================================== Grid ======================================== */ .testimonials-left-inner{ max-width: 960px; margin-left: auto; } /* ======================================== Card ======================================== */ .testimonial-card { border-radius: 14px; padding: 28px; transition: all 0.3s ease; /* Permalink - use to edit and share this gradient. Permalink - Zum Bearbeiten und Teilen dieses Verlaufs verwenden: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.05+0,0+100;Neutral+Density */ background: linear-gradient(to bottom, rgba(225,225,225) 0%,rgba(255,255,255) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ box-shadow: 0 0 10px rgba(0,0,0,0.1); border: 2px solid #fff; height: 100%; } .testimonial-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,0.06); } .testimonial-stars { color: #ED9B04; font-size: 18px; margin-bottom: 16px; } .testimonial-quote { font-size: 17px; line-height: 1.7; color: #222; margin-bottom: 24px; } /* ======================================== Author ======================================== */ .testimonial-author { display: flex; align-items: center; gap: 14px; } .testimonial-author img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; } .testimonial-author strong { display: block; font-size: 16px; color: #111; } .testimonial-author span { font-size: 14px; color: #777; } /* ======================================== CTA ======================================== */ .swiper-nav-wrapper{ width: 90px; position: absolute; top: 0px; right: 0px; } .swiper-nav-wrapper{ height: 40px; } .testimonials-right { display: flex; align-items: center; padding-right: 0px; padding-left: 40px; width: 480px; } .testimonials-left{ position: relative; padding-right: 0px; width: calc(100% - 480px); } .cta-box h2 { font-size: 52px; line-height: 1.1; font-weight: 700; margin-bottom: 24px; color: #fff; } .cta-box p { font-size: 18px; line-height: 1.7; margin-bottom: 36px; color: rgba(255,255,255,0.9); } /* ======================================== Button ======================================== */ /* ======================================== Responsive ======================================== */ @media (max-width: 1400px) { .testimonial-grid{ display: block; } .testimonials-left{ } .testimonials-wrapper{ margin: auto auto; max-width: 1200px; } } @media (max-width: 1200px) { .testimonials-right{ width: 380px; } .testimonials-right h2{ font-size: 25px !important; } .testimonials-left{ width: calc(100% - 400px); } } @media (max-width: 920px) { .testimonials-right{ padding-left: 0px; width: 100%; } .testimonials-left{ width: 100%; margin-bottom: 50px; } .cta-box{ padding: 30px; width: 100%; border: 3px solid #fff; border-radius: 8px; } .cta-box p{ margin-bottom: 20px; } } @media (max-width: 768px) { .testimonial-grid { grid-template-columns: 1fr; } .testimonial-card { padding: 24px; } .cta-box h2 { font-size: 38px; } .cta-box p { font-size: 16px; } .btn-primary { width: 100%; justify-content: center; } } @media (max-width: 480px) { .cta-box{ padding: 20px; } } /* Quelle: blog-posts-recent.css */ .blog-posts-recent{ max-width: 1800px; margin: auto auto; } .blog-posts-recent h2{ font-size: 24px !important; } .blog-posts-recent h3{ font-size: 20px !important; font-family: Poppins; font-weight: 400; line-height: 120%; letter-spacing: 0px !important; text-transform: none !important; } .blog-posts-recent article:first-child h3{ max-width: 500px; } .blog-posts-recent article{ background: #282328; border-radius: 8px; position: relative; display: flex; align-items: flex-end; overflow: hidden; } .blog-posts-recent article .image img{ transition: transform 0.45s ease; will-change: transform; transition: transform 0.5s cubic-bezier(.22,.61,.36,1); } .blog-posts-recent article:hover .image img{ transform: scale(1.08); } .blog-posts-recent article a{ display: flex; flex-wrap: wrap; color: #999; width: 100%; padding-top: 100px; } .blog-posts-recent .image{ display: block; width: 100%; height: 100%; position: absolute; border-radius: 4px; overflow: hidden; left: 0px; top: 0px; } .blog-posts-recent .image img{ display: block; width: 100%; position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center center; left: 0px; top: 0px; } .blog-posts-recent .text{ display: block; position: relative; z-index: 10; width: 100%; padding: 20px; padding-top: 60px; height: 100%; /* Permalink - use to edit and share this gradient. Permalink - Zum Bearbeiten und Teilen dieses Verlaufs verwenden: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+1,0.7+48,0.85+100 */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(0,0,0,0.7) 48%,rgba(0,0,0,0.85) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ } .blog-posts-recent .date{ background: rgba(0,0,0,0.8); line-height: 100%; padding: 10px; border-radius: 5px; position: absolute; top: 10px; left: 10px; z-index: 10; color: #fff; font-weight: 800; display: block; } .blog-posts-recent .month{ display: block; text-transform: uppercase; font-size: 24px; margin-bottom: 5px; } .blog-posts-recent .year{ display: block; line-height: 100%; font-size: 19px; font-weight: 400; } .blogposts-recent-wrapper{ display: grid; grid-template-columns: 50% 1fr 1fr; gap: 40px; } .blogposts-recent-wrapper article:nth-child(1){ grid-row: 1 / 3; grid-columns: 1 / 2; } .blogposts-recent-wrapper article:nth-child(2){ grid-row: 1 / 2; grid-columns: 2 / 3; } .blogposts-recent-wrapper article:nth-child(3){ grid-row: 2 / 3; grid-columns: 3 / 4; } .blogposts-recent-wrapper article:nth-child(4){ grid-row: 1 / 2; grid-columns: 2 / 3; } .blogposts-recent-wrapper article:nth-child(5){ grid-row: 2 / 3; grid-columns: 3 / 4; } @media(max-width: 1500px){ .blogposts-recent-wrapper{ display: grid; grid-template-columns: 50% 1fr; gap: 40px; } .blogposts-recent-wrapper article:nth-child(1){ grid-columns: 1 / 2; grid-row: 1 / 3; } .blogposts-recent-wrapper article:nth-child(2){ grid-columns: 2 / 3; grid-row: 1 / 2; } .blogposts-recent-wrapper article:nth-child(3){ grid-columns: 2 / 3; grid-row: 2 / 3; } .blogposts-recent-wrapper article:nth-child(4){ grid-columns: 1 / 2; grid-row: 3 / 4; } .blogposts-recent-wrapper article:nth-child(5){ grid-columns: 2 / 3; grid-row: 3 / 4; } } @media(max-width: 1200px){ .blog-posts-recent h3{ font-size: 18px !important; } } @media(max-width: 1024px){ .blogposts-recent-wrapper{ gap: 20px; grid-template-columns: auto; } .blogposts-recent-wrapper{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .blogposts-recent-wrapper article:nth-child(1){ grid-column: 1 / -1; /* gesamte Breite */ grid-row: 1; } .blogposts-recent-wrapper article:nth-child(2){ grid-column: 1; grid-row: 2; } .blogposts-recent-wrapper article:nth-child(3){ grid-column: 2; grid-row: 2; } } @media(max-width: 768px){ .blog-posts-recent h2 { font-size: 18px !important; } .blog-posts-recent h3{ font-size: 16px !important; margin-bottom: 15px; } } @media(max-width: 600px){ .blogposts-recent-wrapper{ display: block; } .blogposts-recent-wrapper article{ margin-bottom: 20px; } .blog-posts-recent article:first-child h3, .blog-posts-recent h3{ max-width: 300px; } .blog-posts-recent .btn-primary{ width: auto; } } @media(max-width: 480px){ .blog-posts-recent h2 { font-size: 16px !important; } .blog-posts-recent h3{ font-size: 16px !important; margin-bottom: 10px; } } /* Quelle: single.css */ .single-blog-post .entry-header{ display: flex; flex-wrap: wrap; border-radius: 8px; } .single-blog-post .image{ display: block; width: 100%; padding-top: 30%; position: relative; border-radius: 4px; overflow: hidden; } .single-blog-post .image img{ display: block; width: 100%; position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center center; left: 0px; top: 0px; } .single-blog-post .content h1{ display: block; width: calc(100%); font-size: 25px; text-transform: none; font-weight: 400; letter-spacing: 0px; line-height: 134%; margin-bottom: 0px; } .single-blog-post .content h2{ font-size: 20px; font-weight: 400; color: #1B161E; padding-top: 25px; } .single-blog-post .content h2, .single-blog-post .content h3, .single-blog-post .content h4, .single-blog-post .content h5, .single-blog-post .content h6{ color: #df4350; } .single-blog-post .content h2{ font-size: 20px; } .single-blog-post .content h3{ font-size: 18px; } .single-blog-post time{ background: rgba(0,0,0,0.8); line-height: 100%; padding: 10px; border-radius: 5px; position: absolute; top: 10px; left: 10px; z-index: 10; color: #fff; font-weight: 800; display: block; } .single-blog-post time .month{ display: block; text-transform: uppercase; font-size: 24px; margin-bottom: 5px; } .single-blog-post time .year{ display: block; line-height: 100%; font-size: 19px; font-weight: 400; } .single-blog-post .entry-content{ color: #efefef; } .single-blog-post .entry-content a{ color: #fff; } .single-blog-post .entry-content a:hover{ color: #E24B4A; } .single-blog-post .entry-content a::after { content: " →"; font-size: 18px; } .single-blog-post article{ width: calc(100% - 400px); } .single-blog-post article .entry-content{ padding: 40px; background: rgba(255,255,255,0.95); border-radius: 10px; color: #3E4554; } .blog-column-right{ width: 400px; padding-left: 40px; } .single-blog-post article .entry-content ul { list-style: none; padding: 0; margin-bottom: 10px; } .single-blog-post article .entry-content ul li { padding: 2px 0 2px 30px; position: relative; } .single-blog-post article .entry-content ul li::before { content: "→"; position: absolute; left: 0; top: -5px; color: #df4350; font-weight: bold; font-size: 20px; } .single-blog-post article .entry-content p{ margin-bottom: 7px; } .single-blog-post .blog-column-right article .image{ margin-bottom: 20px; } .single-blog-post .blog-column-right article{ width: 100%; margin-bottom: 20px; } .single-blog-post .content .blog-column-right h3{ color: #fff; font-size: 16px; margin-bottom: 10px; } @media(max-width: 1200px){ .blog-column-right{ width: 300px; } .single-blog-post article{ width: calc(100% - 300px); } } @media(max-width: 1024px){ .single-blog-post .content h1{ font-size: 20px; } .single-blog-post article .entry-content{ padding: 30px; } .single-blog-post article{ width: 100%; } .blog-column-right{ width: 100%; padding-left: 0px; margin-top: 20px; } } @media(max-width: 920px){ .single-blog-post .content h1{ padding-left: 30px; padding-top: 30px; padding-bottom: 30px; padding-right: 10px; } } @media(max-width: 768px){ .single-blog-post h2 { font-size: 18px !important; } } @media(max-width: 650px){ .single-blog-post .content h1{ padding-top: 30px; padding-bottom: 30px; width: 100%; padding-left: 0px; padding-right: 0px; } .single-blog-post .image{ width: 100%; padding-top: 50%; } .single-blog-post .text{ padding-bottom: 10px; } } @media(max-width: 480px){ .single-blog-post .entry-header{ padding: 15px; } .single-blog-post .content h1{ font-size: 18px; } } /* Quelle: heroheader-style.css */ .hero{ position: relative; } .heroheader-box .section-content{ position: relative; z-index: 100; } .hero-image{ position: absolute; width: 80%; height: 100%; right: 0px; top: 0px; z-index: 0; object-fit: cover; object-position: center center; } .heroheader-box:before{ content: ""; display: block; position: absolute; width: 50%; height: 100%; top: 0px; left: 0px; /* Permalink - use to edit and share this gradient. Permalink - Zum Bearbeiten und Teilen dieses Verlaufs verwenden: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.88+0,0.7+43,0.7+43,0+100 */ background: linear-gradient(to right, rgba(0,0,0,0.95) 0%,rgba(0,0,0,0.95) 60%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ z-index: 10; } .heroheader-box video.hero-video{ position: absolute; width: 80%; height: 100%; right: 0px; object-fit: cover; object-position: center; } .hero-content{ position: relative; max-width: 1600px; margin: auto auto; } .hero-text{ max-width: 600px; padding-bottom: 150px; padding-top: 100px; position: relative; padding-right: 40px; } .hero-content ul li img{ width: 30px; } .hero-links{ display: flex; flex-wrap: wrap; align-items: flex-start; margin-bottom: 40px; gap: 10px; } .hero-links li{ width: calc(33.33% - 10px); } .hero-links a{ display: flex; flex-wrap: wrap; background: linear-gradient(45deg, rgba(255,255, 255,0.1) 0%,rgba(255,255,255,0.1) 100%); padding: 15px; border-radius: 4px; font-size: 14px; color: #222; border-radius: 8px; background: linear-gradient(45deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 100%); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); transition: all 0.3s; } .hero-links a:hover{ background: linear-gradient(45deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%); } .hero-links a span{ width: calc(100% - 30px); display: block; hyphens: auto; padding-left: 15px; text-transform: uppercase; line-height: 120%; } .section-content h1.hero-title{ font-family: Poppins; font-weight: 400; margin-bottom: 10px !important; font-size: 25px; letter-spacing: 0px; line-height: 130%; display: block; margin-bottom: 10px !important; color: #fff; text-transform: inherit; } .section-content h1.hero-title .marked{ position: relative; display: inline-block; color: transparent; background: linear-gradient(90deg, #ffffff 0%, #ffffff 40%, #8b5cf6 60%, #22d3ee 100%); background-size: 200% auto; background-clip: text; -webkit-background-clip: text; opacity: 0; transform: translateY(20px); filter: blur(8px); animation: marked-reveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards, marked-gradient 4s ease-in-out 0.9s infinite alternate; background: linear-gradient(45deg, rgba(207, 7, 126, 1) 0%, rgba(240, 126, 35, 1) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; } .section-content h2.hero-subtitle{ font-family: Poppins; font-weight: 800; font-size: 45px; letter-spacing: 0px; line-height: 130%; display: block; text-transform: uppercase !important; margin-bottom: 40px; color: #fff; text-transform: inherit; margin-bottom: 30px; } .section-content h2.hero-subtitle:after{ content: ""; width: 50px; height: 2px; background: #fff; display: block; margin-top: 20px; } .hero-fulltext{ font-family: Poppins; font-weight: 400; font-size: 17px; letter-spacing: 1px; line-height: 170%; margin-bottom: 25px; display: block; color: #ccc; } .cta-button-hero:hover{ background: #D72467; color: #fff; } .cta-button-hero:hover .icon-arrow{ background: #fff; } .cta-button-hero .icon-arrow{ display: block; width: 20px; height: 20px; mask: url(https://wolpermedia.de/wp-content/themes/jackalope/fa-layout/fa-css/images/right-arrow.svg); mask-size: contain; background: #E04251; } @media(max-width: 1300px){ .hero-content .btn-primary{ width: 100%; margin-bottom: 10px; } .hero-text{ width: 420px; padding-right: 20px; } .section-content h2.hero-subtitle { font-size: 35px; } .section-content h1.hero-title { font-size: 23px; } .hero-fulltext { font-size: 16px; } } @media(max-width: 1200px){ .hero-image{ width: 100%; left: 400px; } } @media(max-width: 1024px){ .section-content h1.hero-title { font-size: 22px; } .section-content ul.hero-links li{ margin-left: 0px; padding-left: 0px !important; } .section-content h2.hero-subtitle{ font-size: 30px; margin-bottom: 25px; } .hero-subtitle{ margin-bottom: 20px; } .hero-links a{ padding: 7px 8px 7px 8px; display: flex; flex-wrap: wrap; align-items: center; } .hero-content ul li img{ width: 25px; } .hero-links{ margin-bottom: 25px; } .hero-links a br{ display: none; } ul.hero-links li{ padding-left: 0px; width: 100%; } .hero-text{ max-width: 400px; padding-top: 60px; padding-bottom: 120px; padding-right: 30px; } .hero-subtitle{ font-size: 28px; } .hero-image{ left: 280px; } .hero-text:before{ width: 100px; right: -100px; } } @media(max-width: 700px){ .heroheader-box video.hero-video{ left: 0px; width: 100%; height: 400px; transform: scale(1.6); margin-top: -20px; } .hero-fulltext{ text-align: center; } .heroheader-box:before { content: ""; display: block; position: absolute; width: 100%; height: 80%; top: auto; bottom: 0px; left: 0px; z-index: 10; background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.95) 70%, rgba(0, 0, 0, 0) 100%); } .heroheader-box .section-content{ padding-left: 0px; padding-right: 0px; } .heroheader-box .hero-text{ padding-left: 20px; padding-right: 20px; max-width: 550px; margin: auto auto; } .section-content h2.hero-subtitle:after{ margin-left: auto; margin-right: auto; margin-bottom: 20px; } .hero{ padding-left: 0px; padding-right: 0px; } .section-content h1.hero-title, .hero-subtitle{ text-align: center; } .section-content h1.hero-title{ font-size: 22px; margin-bottom: 20px !important; } .section-content h2.hero-subtitle{ max-width: 400px; margin: auto auto; } .hero-subtitle{ margin-bottom: 30px; font-size: 50px; } .hero-content ul li img{ margin: auto auto; margin-bottom: 8px; } .hero-links a span{ padding-left: 0px; width: 100%; text-align: center; } .cta-button-hero{ margin: auto auto; } .hero-text{ max-width: 100%; padding-right: 0px; margin-top: -100px; padding-top: 30px; } ul.hero-links li{ width: calc(33.33% - 10px); } .hero-links a{ display: block; } .hero-links a br{ display: block; } .hero-links a{ padding-top: 15px; } .hero-text{ width: 100%; } .hero-content ul li img{ width: 35px; } .hero-subtitle{ font-size: 40px; } .hero-image{ position: absolute; left: 0px; height: auto; } .heroheader-box .hero-text{ padding-top: 280px; padding-bottom: 100px; } .hero-image video, .hero-image img{ object-fit: contain; position: absolute; top: 0px; left: 0px; } .section-content h1.hero-title{ max-width: 400px; margin: auto auto; } } @media(max-width: 650px){ .hero-image{ min-height: 480px; } .section-content h1.hero-title{ margin: auto auto; margin-bottom: 15px !important; } .hero-subtitle { font-size: 35px; } .hero-links{ max-width: 550px; margin: auto auto; margin-bottom: 40px; } } @media(max-width: 500px){ .section-content h1.hero-title{ max-width: 300px; } } @media(max-width: 480px){ .section-content h1.hero-title{ font-size: 16px; } .hero-text { margin-top: -150px; } .hero-subtitle { font-size: 26px; } } /* Quelle: ablauf-box.css */ /* CSS Document */ .ablauf-wrapper{ display: flex; flex-wrap: wrap; } .ablauf-nav-wrapper{ width: 360px; } .ablauf-nav-wrapper:before{ content: ""; display: block; position: absolute; left: 30px; width: 1px; top: 15px; height: calc(100% - 50px); background: #fff; } .ablauf-nav-wrapper .item .text{ line-height: 120%; } .ablauf-box .ablauf_image{ width: 300px; height: 500px; border-radius: 9999px; position: relative; } .ablauf-box .text-wrapper{ width: 600px; padding-left: 60px; display: flex; flex-wrap: wrap; } .ablauf-box .ablauf_image img{ position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; border-radius: 15px; } .ablauf-box .item{ position: relative; padding: 0px; border-radius: 15px; margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 30px; align-items: center; padding: 5px; cursor: pointer; } .ablauf-box .item.active{ color: #fff; } .ablauf-box .item .nummer{ display: flex !important; flex-wrap: wrap; justify-content: center; align-items: center; width: 50px; height: 50px; background: linear-gradient(45deg, rgba(207, 7, 126, 1) 0%, rgba(240, 126, 35, 1) 100%); border-radius: 10px; color: #fff; font-weight: 400; font-size: 20px; line-height: 100%; border-radius: 9999px; border: 2px solid #E1474D; background: #1B161E; } .ablauf-box .item .nummer span{ display: block; align-items: center; } .ablauf-box .item.active .nummer{ background: linear-gradient(45deg, rgba(207, 7, 126, 1) 0%, rgba(240, 126, 35, 1) 100%); border: 2px solid #000; box-shadow: 0 0 0px 4px #E1474D; color: #fff; } .ablauf-box .item h3{ margin-bottom: 0px !important; } .ablauf-box .more-text-inner{ display: flex; flex-wrap: wrap; } .ablauf-box .phase:before{ display: inline-block; content: ""; height: 2px; width: 80px; background: #E24A4B; position: relative; top: -3px; margin-right: 10px; } .ablauf-box .phase{ text-transform: uppercase; letter-spacing: 3px; margin-bottom: 30px; display: block; color: #E24A4B; } .ablauf-box .content h3{ font-size: 26px; } .ablauf-box .usp-list{ display: block; } .ablauf-box .usp-item{ display: flex; align-items: center; color: #fff; gap: 20px; margin-bottom: 20px; } .ablauf-box .usp-item:last-child{ flex-grow: 2; } .ablauf-box .usp-item__icon{ width: 40px; height: 40px; padding: 10px; background: rgba(210,82,91,0.15); border-radius: 9999px; } .ablauf-box .usp-item__text{ } .ablauf-box .cta-bar{ background: linear-gradient(45deg, rgba(207, 7, 126, 1) 0%, rgba(240, 126, 35, 1) 100%); color: #fff; padding: 30px 40px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 1); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); } @media(max-width: 1400px){ .ablauf-nav-wrapper .item .text{ display: none; } .ablauf-nav-wrapper{ width: 80px; } .ablauf-box .text-wrapper{ width: calc(100% - 80px); } } @media(max-width: 1200px){ .ablauf-box .text-wrapper{ padding-left: 40px; } } @media(max-width: 920px){ .ablauf-box .usp-item__icon{ width: 40px; height: 40px; } .ablauf-nav-wrapper .item .text{ font-size: 15px; display: none; } .ablauf-box .text-wrapper{ padding-left: 0px; } .ablauf-box .item{ gap: 20px; } .ablauf-nav-wrapper { width: 220px; } .ablauf-box .item .nummer{ width: 40px; height: 40px; } .ablauf-box .item .nummer{ font-size: 18px; } .ablauf-nav-wrapper:before{ left: 24px; } .ablauf-box .item{ margin-bottom: 10px; } .ablauf-box .text-wrapper{ width: calc(100% - 220px); } .ablauf-nav-wrapper{ width: 50px; } .ablauf-box .text-wrapper{ width: calc(100% - 50px); padding-left: 40px; } } @media(max-width: 768px){ .ablauf-box .usp-list{ display: block; } .ablauf-box .usp-item{ margin-bottom: 10px; } } @media(max-width: 480px){ .ablauf-box .text-wrapper{ padding-left: 20px; } .ablauf-box .content h3{ font-size: 24px; } .ablauf-box .usp-list{ gap: 20px; } } /* Quelle: bildundtext-box.css */ /* CSS Document */ .bildundtext-box .image{ width: 50%; overflow: hidden; border-radius: 15px; width: calc(50% - 40px); position: relative; } .bildundtext-box .image img{ display: block; height: 100%; width: 100%; object-fit: cover; position: absolute; top: 0px; } .bildundtext-box .bildundtext-wrapper{ display: flex; flex-wrap: wrap; gap: 80px; } .bildundtext-box .text-wrapper{ width: calc(50% - 40px); padding-top: 100px; padding-bottom: 100px; } .bildundtext-box .content h2{ font-size: 16px; } .bildundtext-box .content h3{ font-size: 30px; } @media(max-width: 1400px){ .bildundtext-box .bildundtext-wrapper{ gap: 60px; } .bildundtext-box .text-wrapper, .bildundtext-box .image{ width: calc(50% - 30px); } .bildundtext-box .text-wrapper{ padding-top: 80px; padding-bottom: 80px; } } @media(max-width: 1200px){ .bildundtext-box .content h3{ font-size: 30px; } .bildundtext-box .text-wrapper{ padding-top: 40px; padding-bottom: 40px; } .bildundtext-box .text-wrapper{ width: 400px; } .bildundtext-box .image{ width: calc(100% - 460px); } } @media(max-width: 950px){ .bildundtext-box .text-wrapper, .bildundtext-box .image{ width: 100%; } .bildundtext-box .image{ padding-top: 40%; } .bildundtext-box .bildundtext-wrapper{ gap: 0px; } .bildundtext-box .text-wrapper{ padding-top: 40px; padding-bottom: 0px; } .bildundtext-box .bildundtext-wrapper{ margin: auto auto; } } @media(max-width: 480px){ .bildundtext-box .content h3{ font-size: 25px; } } /* Quelle: blog.css */ .blog .date{ background: rgba(0,0,0,0.8); line-height: 100%; padding: 10px; border-radius: 5px; position: absolute; top: 10px; left: 10px; z-index: 10; color: #fff; font-weight: 800; display: block; } .blog .month{ display: block; text-transform: uppercase; font-size: 24px; margin-bottom: 5px; } .blog .year{ display: block; line-height: 100%; font-size: 19px; font-weight: 400; } .blog article .image{ width: 700px; display: block; position: relative; padding-top: 20%; border-radius: 10px; overflow: hidden; } .blog article .image img{ border-radius: 10px; position: absolute; height: 100%; width: 100%; object-fit: cover; object-position: center center; top: 0px; left: 0px; } .blog article{ background: rgba(255,255,255,0.95); padding: 20px; margin-bottom: 20px; border-radius: 20px; display: flex; border-radius: 15px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); background-size: ; } .blog article h2{ font-size: 20px; color: #df4350; } .blog article a{ display: flex; } .blog article .text{ width: calc(100% - 700px); color: #3E4554; padding: 40px 20px 40px 40px; } @media(max-width: 1400px){ .blog article .image{ width: 400px; } .blog article .text{ width: calc(100% - 400px); } } @media(max-width: 1024px){ } @media(max-width: 920px){ .blog article a{ display: block; } .blog article .image{ width: 100%; } .blog article .image{ padding-top: 33%; } } /* Quelle: graph.css */ .project-success { --background: #0d0c17; --card-background: rgba(255, 255, 255, 0.035); --card-background-strong: rgba(255, 255, 255, 0.055); --border: rgba(255, 255, 255, 0.14); --text: #f7f5fb; --text-muted: #a9a5b3; --pink: #ef2d7a; --orange: #ff7900; position: relative; overflow: hidden; color: var(--text); border-radius: 34px; } .project-success *, .project-success *::before, .project-success *::after { box-sizing: border-box; } .project-success__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(520px, 1.15fr); gap: clamp(35px, 5vw, 70px); align-items: start; } .project-success__eyebrow { position: relative; display: inline-block; margin-bottom: 38px; color: var(--pink); font-size: 18px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; } .project-success__eyebrow::after { position: absolute; top: calc(100% + 17px); left: 0; width: 88px; height: 3px; content: ""; background: linear-gradient(90deg, var(--pink), var(--orange), transparent); border-radius: 10px; } .project-success h2 { margin: 0; font-size: clamp(36px, 4vw, 56px); font-weight: 700; line-height: 1.18; letter-spacing: -0.045em; } .project-success h2 span { color: transparent; background: linear-gradient(90deg, var(--pink), #f34480 45%, var(--orange)); background-clip: text; -webkit-background-clip: text; } .project-success__lead { max-width: 680px; margin: 18px 0 28px; color: #c1bdc8; font-size: 18px; line-height: 1.75; } .project-success__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .stat-card { position: relative; min-height: 205px; padding: 26px 24px 20px; overflow: hidden; background: linear-gradient( 145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025) ); border: 1px solid var(--border); border-radius: 20px; transition: transform 0.3s ease, border-color 0.3s ease; } .stat-card:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.25); } .stat-card__head { display: flex; gap: 20px; align-items: center; } .stat-card__icon { display: grid; flex: 0 0 70px; width: 70px; height: 70px; place-items: center; border-radius: 50%; } .stat-card--pink .stat-card__icon { background: linear-gradient(145deg, #ee1e67, #f34463); } .stat-card--orange .stat-card__icon { background: linear-gradient(145deg, #ff6900, #ff9600); } .stat-card__icon svg { width: 36px; height: 36px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .stat-card__head strong { display: block; font-size: clamp(28px, 3vw, 40px); line-height: 1; letter-spacing: -0.04em; } .stat-card__head strong small { color: #b3afba; font-size: 0.55em; font-weight: 400; } .stat-card__head span, .stat-card__bottom span { display: block; margin-top: 8px; color: var(--text-muted); font-size: 16px; } .stat-card__bottom { display: flex; gap: 15px; align-items: flex-end; justify-content: space-between; margin-top: 24px; } .stat-card__bottom b { font-size: 20px; white-space: nowrap; } .stat-card--pink .stat-card__bottom b { color: var(--pink); } .stat-card--orange .stat-card__bottom b { color: var(--orange); } .sparkline { width: 135px; height: 72px; overflow: visible; } .sparkline__line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .stat-card--pink .sparkline__line { stroke: var(--pink); } .stat-card--orange .sparkline__line { stroke: var(--orange); } .sparkline__area { opacity: 0; transition: opacity 0.8s ease 0.5s; } /* Rechte Seite */ .project-success__result { position: relative; } .project-success__customer { position: absolute; top: 0; right: 0; display: flex; gap: 16px; align-items: center; min-width: 255px; padding: 12px 22px 12px 14px; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.035) ); border: 1px solid var(--border); border-radius: 100px; } .customer-icon { display: grid; width: 58px; height: 58px; place-items: center; background: linear-gradient(135deg, var(--pink), #ff4e5a); border-radius: 50%; box-shadow: 0 0 35px rgba(239, 45, 122, 0.25); } .customer-icon svg { width: 32px; height: 32px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; } .project-success__customer strong, .project-success__customer span { display: block; } .project-success__customer strong { font-size: 18px; } .project-success__customer span { margin-top: 2px; color: var(--text-muted); font-size: 16px; } .main-chart { padding: 30px 34px 26px; background: linear-gradient( 145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025) ); border: 1px solid var(--border); border-radius: 22px; } .main-chart__heading strong, .main-chart__heading span { display: block; } .main-chart__heading strong { font-size: 21px; } .main-chart__heading span { margin-top: 4px; color: var(--text-muted); font-size: 16px; } .main-chart__canvas { display: grid; grid-template-columns: 45px minmax(0, 1fr); gap: 10px; margin-top: 32px; } .main-chart__y-axis { display: flex; flex-direction: column; justify-content: space-between; height: 300px; padding-bottom: 1px; color: #aaa6b1; font-size: 14px; text-align: right; } .main-chart__graphic { position: relative; height: 340px; } .main-chart__graphic > svg { position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: 300px; overflow: visible; } .main-chart__grid { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 300px; } .main-chart__grid i { display: block; width: 100%; border-top: 1px dashed rgba(255, 255, 255, 0.1); } .main-chart__line { fill: none; stroke: #f13070; stroke-width: 5; stroke-linecap: round; } .main-chart__previous { fill: none; stroke: rgba(194, 190, 201, 0.35); stroke-width: 5; stroke-linecap: round; } .main-chart__dots { opacity: 0; fill: #f33d70; transition: opacity 0.5s ease 1.25s; } .main-chart__badge, .main-chart__before { position: absolute; z-index: 4; opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease, transform 0.5s ease; } .main-chart__badge { top: -25px; right: -15px; padding: 8px 12px; background: linear-gradient(90deg, var(--pink), var(--orange)); border-radius: 7px 7px 7px 0; font-weight: 600; } .main-chart__before { right: -5px; bottom: 55px; padding: 7px 12px; color: #ddd9e1; background: rgba(118, 115, 126, 0.65); border-radius: 7px 7px 0; } .main-chart__months { position: absolute; right: 0; bottom: 5px; left: 0; display: flex; justify-content: space-between; padding: 0 22px; color: #aaa6b1; font-size: 14px; } .main-chart__details { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 12px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.08); } .main-chart__details > div { display: flex; flex-direction: column; align-items: center; padding: 0 15px; text-align: center; } .main-chart__details > div + div { border-left: 1px solid rgba(255, 255, 255, 0.13); } .main-chart__details b { margin-bottom: 10px; color: var(--pink); font-size: 38px; font-weight: 400; line-height: 1; } .main-chart__details > div:nth-child(even) b { color: var(--orange); } .main-chart__details strong { font-size: 22px; } .main-chart__details span { margin-top: 5px; color: var(--text-muted); font-size: 14px; } /* Zitat */ .project-success__quote { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; padding: 22px 32px; background: linear-gradient( 145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025) ); border: 1px solid var(--border); border-radius: 20px; } .quote-text { display: flex; gap: 26px; align-items: center; } .quote-mark { color: var(--pink); font-family: Georgia, serif; font-size: 96px; font-weight: 700; line-height: 0.7; } .quote-text p { margin: 0; color: #c0bcc6; font-size: 16px; line-height: 1.65; } .quote-customer { display: flex; gap: 20px; align-items: center; min-width: 360px; padding-left: 38px; border-left: 1px solid rgba(255, 255, 255, 0.15); } .quote-customer__icon { display: grid; width: 74px; height: 74px; place-items: center; background: linear-gradient(135deg, var(--pink), #ff5a3c); border-radius: 50%; font-size: 48px; line-height: 1; } .quote-customer strong, .quote-customer span { display: block; } .quote-customer strong { font-size: 19px; } .quote-customer span { margin-top: 5px; color: var(--text-muted); } /* Animationszustände */ .js-chart-line { stroke-dasharray: var(--path-length); stroke-dashoffset: var(--path-length); } .project-success.is-visible .js-chart-line { animation: draw-chart 1.5s cubic-bezier(0.45, 0, 0.25, 1) forwards; } .project-success.is-visible .main-chart__previous { animation-delay: 0.1s; } .project-success.is-visible .main-chart__line { animation-delay: 0.25s; } .project-success.is-visible .sparkline__area { opacity: 1; } .project-success.is-visible .main-chart__dots { opacity: 1; } .project-success.is-visible .main-chart__badge, .project-success.is-visible .main-chart__before { opacity: 1; transform: translateY(0); transition-delay: 1.25s; } @keyframes draw-chart { to { stroke-dashoffset: 0; } } /* Responsive */ @media (max-width: 1150px) { .project-success__top { grid-template-columns: 1fr; } } @media (max-width: 700px) { .project-success { border-radius: 22px; } .project-success__stats { grid-template-columns: 1fr; } .project-success__customer { left: 0; right: auto; } .main-chart { padding: 24px 15px 20px; } .main-chart__canvas { grid-template-columns: 35px minmax(0, 1fr); } .main-chart__details { grid-template-columns: repeat(2, 1fr); gap: 25px 0; } .main-chart__details > div:nth-child(3) { border-left: 0; } .project-success__quote { flex-direction: column; align-items: stretch; gap: 25px; } .quote-customer { min-width: 0; padding-top: 22px; padding-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.15); border-left: 0; } .quote-mark { font-size: 70px; } .sparkline { width: 115px; } } /* Quelle: googlemaps-box.css */ .googlemaps-box .awmp-map, .googlemaps-box .awmp_map_wrapper, .googlemaps-box iframe{ height: 50vh; display: block; position: relative; } /* Quelle: leistungskacheln-box.css */ .leistungskacheln-box .kachel-wrapper{ gap: 20px; } .leistungskacheln-box .kachel { background: linear-gradient(to bottom, rgba(40, 35, 40, 1) 0%, rgba(16, 16, 16, 1) 100%); border-radius: 8px; width: calc(16.66% - 17px); hyphens: auto; } .leistungskacheln-box .kachel .text{ color: #999999; } .leistungskacheln-box .content h3{ font-size: 18px; font-weight: 400; } @media(max-width: 1200px){ .leistungskacheln-box .kachel { background: linear-gradient(to bottom, rgba(40, 35, 40, 1) 0%, rgba(16, 16, 16, 1) 100%); border-radius: 8px; width: calc(50% - 20px); } } @media(max-width: 1024px){ .leistungskacheln-box .kachel-wrapper{ gap: calc( 40px * 0.7); } .leistungskacheln-box .kachel { background: linear-gradient(to bottom, rgba(40, 35, 40, 1) 0%, rgba(16, 16, 16, 1) 100%); border-radius: 8px; width: calc(50% - 20px * 0.7); } .leistungskacheln-box .kachel.padding40{ padding: 30px; } .leistungskacheln-box .kachel { width: 100%; } } @media(max-width: 480px){ .leistungskacheln-box .kachel { width: 100%; } .leistungskacheln-box .kachel.padding40{ padding: 20px; } } /* Quelle: spalten-mit-icon-box.css */ .spalten-mit-icon-box .content{ padding: 5px 20px 5px 20px; } .spalten-mit-icon-box .item-content{ display: flex; flex-wrap: wrap; align-items: flex-start; padding: 20px; } .spalten-mit-icon-box .image{ width: 60px; } .spalten-mit-icon-box .text{ width: calc(100% - 60px); padding-left: 40px; } .spalten-mit-icon-box h3.spalten-titel{ font-family: Cairo Light; font-size: 30px; font-weight: normal; color: #fff; hyphens: auto; line-height: 80%; } .spalten-mit-icon-box h4.spalten-subtitel{ font-family: Cyber Brush; text-transform: none; line-height: 140%; } @media(max-width: 1200px){ .spalten-mit-icon-box .image { width: 45px; } .spalten-mit-icon-box .text{ padding-left: 25px; } } /* Quelle: websitereferenzen-box.css */ .websitereferenzen-box .section-content{ padding-left: 100px; padding-right: 100px; } .websitereferenzen-box .content{ display: flex; flex-wrap: wrap; } .websitereferenzen-box .item { width: 100%; border-radius: 10px; overflow: hidden; } .websitereferenzen-box .image{ width: 60%; padding-top: 40%; position: relative; } .websitereferenzen-box .image img{ position: absolute; width: 100%; height: 100%; object-fit: cover; left: 0px; top: 0px; } .websitereferenzen-box .text{ width: 40%; color: #000; background: #fff; padding: 70px; background: linear-gradient(90deg, rgba(207,7,126,1) 0%,rgba(240,126,35,1) 100%); background: #fff; display: flex; flex-wrap: wrap; align-items: center; } .websitereferenzen-box .text strong.spalten-titel{ font-weight: normal; font-size: 30px; color: #000; margin-bottom: 10px; font-family: Title; line-height: 120%; text-transform: uppercase; margin-bottom: 20px; text-transform: uppercase; } .websitereferenzen-box .text .spalten-subtitel{ font-family: "Text Font"; font-size: 25px; margin-bottom: 40px; color: #000; line-height: 130%; } .websitereferenzen-box .item-content { display: flex; flex-wrap: wrap; } .websitereferenzen-box .buttondiv a{ border: 2px solid #000; padding: 10px 30px; display: block; border-radius: 9999px; color: #000; font-weight: normal; letter-spacing: 2px; text-align: left; position: relative; line-height: 100%; height: 60px; display: flex; flex-wrap: wrap; align-items: center; width: 280px; text-transform: uppercase; font-size: 20px; transition: all 0.5s; } .websitereferenzen-box .buttondiv a span{ display: block; text-align: left; width: 100%; transition: all 0.5s; } .websitereferenzen-box .buttondiv a:hover span{ padding-left: 50px; } .websitereferenzen-box .buttondiv a span:after{ content: ""; display: block; width: 30px; height: 30px; background-image: url(https://wolpermedia.de/wp-content/themes/jackalope/fa-layout/fa-css/../images/right-arrow.svg); background-repeat: no-repeat; background-size: contain; position: absolute; right: 0px; top: -4px; transition: all 0.5s; } .websitereferenzen-box .buttondiv a:hover span:after{ right: calc(100% - 30px); } .websitereferenzen-box .swiper-button-wrapper{ position: relative; width: 100px; height: 40px; border: 2px solid red; } .websitereferenzen-box .swiper-button-prev{ left: -80px; } .websitereferenzen-box .swiper-button-next{ right: -80px; } @media(max-width: 1400px){ .websitereferenzen-box .swiper-button-prev, .websitereferenzen-box .swiper-button-next{ width: 50px; height: 50px; } .websitereferenzen-box .text{ padding: 40px; } .websitereferenzen-box .text strong.spalten-titel{ font-size: 50px; } .websitereferenzen-box .text .spalten-subtitel{ font-size: 20px; } .websitereferenzen-box .image, .websitereferenzen-box .text{ width: 50%; } .websitereferenzen-box .buttondiv a{ font-size: 18px; height: 50px; } .websitereferenzen-box .swiper-button-prev{ left: -60px; } .websitereferenzen-box .swiper-button-next{ right: -60px; } .websitereferenzen-box .text, .websitereferenzen-box .image{ width: 100%; } .websitereferenzen-box .image{ padding-top: 75%; } .websitereferenzen-box .text{ padding: 40px; } } @media(max-width: 1200px){ .websitereferenzen-box .text strong.spalten-titel{ font-size: 40px; } .websitereferenzen-box .text .spalten-subtitel{ font-size: 16px; letter-spacing: 3px; } .websitereferenzen-box .text{ padding: 30px; } .websitereferenzen-box .buttondiv a{ font-size: 16px; height: 46px; width: 100%; } .websitereferenzen-box .text .spalten-subtitel{ margin-bottom: 20px; } .websitereferenzen-box .buttondiv a span:after{ top: -6px; } } @media(max-width: 1024px){ .websitereferenzen-box .section-content{ padding-left: 75px; padding-right: 75px; } .websitereferenzen-box .text strong.spalten-titel{ letter-spacing: 2px; } } @media(max-width: 920px){ .videomitmaske-box .section-content{ padding-left: 30px; padding-right: 30px; padding-top: 50px; padding-bottom: 50px; } } @media(max-width: 768px){ .videomitmaske-box .section-content{ padding-left: 20px; padding-right: 20px; padding-top: 30px; padding-bottom: 30px; } } @media(max-width: 750px){ .websitereferenzen-box .section-content{ padding-left: 60px; padding-right: 60px; } .websitereferenzen-box .swiper-button-prev, .websitereferenzen-box .swiper-button-next{ width: 45px; height: 45px; } .websitereferenzen-box .swiper-button-prev, .websitereferenzen-box .swiper-button-next{ right: -50px; } .websitereferenzen-box .swiper-button-prev{ left: -50px; } } @media(max-width: 550px){ .websitereferenzen-box{ padding-bottom: 50px; } .websitereferenzen-box .section-content{ padding-left: 30px; padding-right: 30px; } .websitereferenzen-box .swiper-button-prev, .websitereferenzen-box .swiper-button-next{ top: calc(100% + 38px); } .websitereferenzen-box .swiper-button-prev, .websitereferenzen-box .swiper-button-next{ right: 0; } .websitereferenzen-box .swiper-button-prev{ left: 0; } } /* Quelle: textundleistungsblocks-box.css */ /* Seite Leistungen */ .textundleistungsblocks-box h2.spalten-titel{ font-size: 90px; line-height: 75%; font-weight: 400; letter-spacing: 2px; word-break: auto-phrase; /* experimental */ -webkit-text-stroke-width: 1px; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .textundleistungsblocks-box h3.spalten-subtitel{ font-size: 26px; margin-bottom: 40px; } .textundleistungsblocks-box .item{ line-height: 180%; color: #fff; height: 650px; width: 100%; display: block; position: relative; overflow: visible; } .textundleistungsblocks-box a{ cursor: url(https://wolpermedia.de/wp-content/themes/jackalope/fa-layout/fa-css/../images/icon-more.svg), auto; } .textundleistungsblocks-box a.button-fa .link-title{ visibility: hidden; } .textundleistungsblocks-box .arrow-wrapper{ display: flex; align-items: center; height: 30px; } .textundleistungsblocks-box .arrow-line{ width: 50px; height: 3px; display: block; border-radius: 999px; transition: all 0.3s; } .textundleistungsblocks-box .item a:hover .arrow-line{ width: 80px; } .textundleistungsblocks-box .arrow{ width: 40px; height: 40px; mask-image: url(https://wolpermedia.de/wp-content/themes/jackalope/fa-layout/fa-css/../images/simple-arrow.svg); -webkit-mask-image: url(https://wolpermedia.de/wp-content/themes/jackalope/fa-layout/fa-css/../images/simple-arrow.svg); mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-position: center center; -webkit-mask-position: center center; mask-size: contain; -webkit-mask-size: contain; display: block; position: relative; left: -24px; } .textundleistungsblocks-box .item .text-image-wrapper{ max-width: 1500px; width: 100%; margin: auto auto; display: flex; flex-wrap: wrap; align-items: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; padding-left: 40px; padding-right: 40px; } .textundleistungsblocks-box .item .image{ width: calc(100% - 700px); height: 800px; position: relative; } .textundleistungsblocks-box .item a img{ transition: all 0.2s; } .textundleistungsblocks-box .item a:hover img{ transform: scale(1.05); } .textundleistungsblocks-box .image img{ width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; object-fit: contain; } .textundleistungsblocks-box .item .text{ width: 700px; hyphens: auto; padding: 70px; border-radius: 5px; } /* Odd */ .textundleistungsblocks-box .item:nth-child(odd){ background: linear-gradient(45deg, rgba(207, 7, 126, 1) 0%, rgba(240, 126, 35, 1) 100%); } .textundleistungsblocks-box .item h2.spalten-titel{ -webkit-text-stroke-color: #000; color: #000; } .textundleistungsblocks-box .item h2.spalten-titel .marked{ -webkit-text-fill-color: #000; } .textundleistungsblocks-box .item h3.spalten-subtitel{ color: #000; } .textundleistungsblocks-box .item .text{ background: #fff; } /* Even */ .textundleistungsblocks-box .item:nth-child(even) .text-image-wrapper{ flex-direction: row-reverse; } .textundleistungsblocks-box .item .arrow-line, .textundleistungsblocks-box .item .arrow{ background: #000; } @media(max-width: 1500px){ .textundleistungsblocks-box .item{ height: 560px; } .textundleistungsblocks-box .item .text-image-wrapper{ max-width: 1200px; } .textundleistungsblocks-box .item .image{ width: calc(100% - 500px); height: 650px; } .textundleistungsblocks-box .item .text{ padding: 45px; } .textundleistungsblocks-box h2.spalten-titel{ font-size: calc(110px * 0.7); } .textundleistungsblocks-box .item .text{ width: 500px; } .textundleistungsblocks-box h3.spalten-subtitel{ font-size: 23px; margin-bottom: 30px; } .textundleistungsblocks-box .arrow-wrapper{ height: 20px; } .textundleistungsblocks-box .arrow{ height: 35px; } } @media(max-width: 1200px){ .textundleistungsblocks-box .item .text-image-wrapper{ padding-left: 0px; padding-right: 0px; justify-content: center; } .textundleistungsblocks-box .item{ height: 440px; } .textundleistungsblocks-box .item .text-image-wrapper{ max-width: 1000px; } .textundleistungsblocks-box .item .image{ width: 480px; height: 520px; } .textundleistungsblocks-box .item .text{ padding: 40px; width: 420px; } .textundleistungsblocks-box h2.spalten-titel{ font-size: 65px; margin-bottom: 10px; } .textundleistungsblocks-box h3.spalten-subtitel{ font-size: 20px; line-height: 130%; margin-bottom: 25px; } .textundleistungsblocks-box .arrow-wrapper{ height: 20px; } .textundleistungsblocks-box .arrow{ height: 35px; } } @media(max-width: 1024px){ .textundleistungsblocks-box h2.spalten-titel{ font-size: 75px; } .textundleistungsblocks-box .item:nth-child(even) h2.spalten-titel .marked, .textundleistungsblocks-box .item:nth-child(odd) h2.spalten-titel .marked{ display: block; } .textundleistungsblocks-box h3.spalten-subtitel{ font-size: 18px; } .textundleistungsblocks-box .item .text{ padding: 35px; width: 350px; } .textundleistungsblocks-box .item .image{ width: 470px; } } @media(max-width: 950px){ .textundleistungsblocks-box .item .image{ height: inherit; width: 50%; } .textundleistungsblocks-box .item .image a{ display: block; width: 100%; padding-top: 100%; } .textundleistungsblocks-box .item h2.spalten-titel{ font-size: 65px; } .textundleistungsblocks-box .item:nth-child(even) h2.spalten-titel .marked, .textundleistungsblocks-box .item:nth-child(odd) h2.spalten-titel .marked{ display: block; } .textundleistungsblocks-box .item .text{ width: 50%; } .textundleistungsblocks-box .item .text-image-wrapper{ padding-left: 40px; padding-right: 40px; position: relative; transform: none; left: inherit; } .textundleistungsblocks-box .item{ height: inherit; padding-bottom: 50px; padding-top: 50px; } .textundleistungsblocks-box .item .text{ position: relative; z-index: 10; } .textundleistungsblocks-box .arrow{ height: 25px; } .textundleistungsblocks-box .arrow-line{ height: 2px; } } @media(max-width: 650px){ .textundleistungsblocks-box .item .text-image-wrapper{ padding-left: 25px; padding-right: 25px; } .textundleistungsblocks-box .item .text{ margin-top: -70px; width: calc(100% - 60px); } .textundleistungsblocks-box .item .image{ width: 100%; } .textundleistungsblocks-box .item .image a{ width: 100%; padding-top: 60%; border-radius: 10px; /* Permalink - use to edit and share this gradient. Permalink - Zum Bearbeiten und Teilen dieses Verlaufs verwenden: https://colorzilla.com/gradient-editor/#7d7e7d+0,0e0e0e+100;Black+3D */ background: radial-gradient(ellipse at center, #7d7e7d 0%,#0e0e0e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ border: 2px solid #fff; } .textundleistungsblocks-box .item .image img{ padding: 20px; } .textundleistungsblocks-box .item:nth-child(even) h2.spalten-titel .marked, .textundleistungsblocks-box .item:nth-child(odd) h2.spalten-titel .marked{ display: inline; } } /* Quelle: must-haves-box.css */ .must-have-wrapper{ display: flex; flex-wrap: wrap; gap: 20px; } .must-have-box .item-content{ position: relative; display: flex; flex-wrap: wrap; justify-content: center; } .must-have-box .item:nth-child(even) .item-content{ flex-direction: row-reverse; } .must-have-box .item{ width: 100%; } .must-have-box .item-content .image{ width: calc(100%); padding-top: 50%; border-top-right-radius: 10px; border-top-left-radius: 10px; overflow: hidden; } .must-have-box .item-content .image img{ display: block; height: 120%; width: 100%; object-fit: cover; object-position: center center; position: absolute; top: 0px; left: 0px; } .must-have-box .item-content .text{ color: #999999; width: calc(100%); position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 60px; } .must-have-box .item-content .text-content{ width: calc(100% - 310px); } .must-have-box h3.spalten-titel{ margin-bottom: 20px; hyphens: auto; font-size: 18px; font-weight: 400; margin-top: 15px; } .must-have-box h4.spalten-subtitel{ text-transform: uppercase; font-size: 22px; line-height: 120%; } .must-have-box .number{ display: flex; flex-wrap: wrap; font-size: 50px; z-index: 10; background: transparent; line-height: 100%; width: auto; display: inline; font-weight: 600; padding-right: 20px; display: flex; width: 160px; } .must-have-box .number span{ display: block; text-align: left; width: 80px; border-right: 1px solid #fff; background: linear-gradient(to right, #D21276, #ED722C); -webkit-background-clip: text; -webkit-text-fill-color: transparent; padding-top: 5px; } .must-have-box .number img{ width: 45px; height: 45px; object-fit: contain; display: block; margin-left: 15px; margin-top: 5px; } .must-have-box .text{ position: relative; background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); padding: 20px 30px; border-radius: 15px; } .must-have-box .vorschautext{ display: none; background: none; margin-bottom: 0px; } .must-have-box .text-detail{ display: none; } .must-have-box .more{ width: 25px; height: 25px; text-indent: -9999px; position: relative; top: 15px; } .must-have-box .image{ display: none; } .must-have-box .line_1{ display: block; position: absolute; width: 100%; height: 2px; background: #fff; top: calc(50% - 1px); } .must-have-box .item{ cursor: pointer; } .must-have-box .item .line_2{ display: block; position: absolute; height: 100%; width: 2px; background: #fff; left: calc(50% - 1px); transition: all 1s; } .must-have-box .item.active .line_2{ transform: rotate(90deg); } @media(max-width: 1200px){ .must-have-box .item-content .text{ gap: 40px; } .must-have-box .item-content .text-content{ width: calc(100% - 250px); } .must-have-box .number{ width: 145px; } .must-have-box .number span{ font-size: 40px; padding-top: 0px; } .must-have-box .number img { width: 40px; height: 40px; } .must-have-box .number span { width: 70px; } .must-have-box h3.spalten-titel{ margin-top: 10px; margin-bottom: 10px; } } @media(max-width: 1024px){ .must-have-box .text{ padding: 10px 20px; } .must-have-box .item-content .text{ gap: 20px; } .must-have-box .number { width: 135px; } .must-have-box .number span{ font-size: 35px; width: 60px; } .must-have-box h3.spalten-titel{ font-size: 16px; } .must-have-box .more{ width: 20px; height: 20px; } .must-have-box .item-content .text-content{ width: calc(100% - 195px); } .must-have-box .more{ top: 10px; } .must-have-box .number img { width: 35px; height: 35px; } } @media(max-width: 650px){ .must-have-box .item-content .text-content{ width: 100%; } .must-have-box .more{ top: 0px; } .must-have-box .item-content .text { gap: 10px; } .must-have-box .text{ padding: 20px; } .must-have-box .more{ margin-left: auto; position: absolute; top: 30px; right: 20px; } } /* Quelle: faq.css */ .faq-box .item{ cursor: url(https://wolpermedia.de/wp-content/themes/flexawesomebygalano/images/handcursor.svg), auto; background: #efefef; } .faq-box .spalten-titel{ padding-right: 60px; } .faq-box .box-more-text{ width: 20px; height: 20px; margin-right: 0px; right: 0px; position: absolute; top: 3px; } .faq-box .box-more-text .line1, .faq-box .box-more-text .line2{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .faq-box .box-more-text .line1{ width: 100%; height: 2px; background: #fff; } .faq-box .box-more-text .line2{ width: 2px; height: 100%; background: #fff; transition: all 1s; } @keyframes boxmorerotate{ from { transform: translate(-50%, -50%) rotate(0deg) } to { transform: translate(-50%, -50%) rotate(90deg) } } .faq-box .box-more-text.active .line2{ transform: translate(-50%, -50%) rotate(90deg); animation-name: boxmorerotate; animation-duration: 1s; } .faq-box .content{ display: flex; flex-wrap: wrap; max-width: 1400px; position: relative; } .faq-box .flex-wrap{ width: 100%; gap: 20px; } .faq-box .item{ width: calc(50% - 10px); padding: 20px; border-radius: 10px; background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); } .faq-box .item:last-child{ border-bottom: 1px solid #555; } .faq-box .title-wrapper{ width: 100%; left: 0px; } .faq-box h2.box-title .titel_part_1{ background:linear-gradient( 45deg, rgba(207, 7, 126, 1) 0%, rgba(240, 126, 35, 1) 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; position: sticky; bottom: 0; left: 0; font-family: Poppins; font-weight: 800; hyphens: auto; width: 50%; } .faq-box h2.box-title .titel_part_1 br{ display: none; } .faq-box h3.spalten-titel{ font-family: Poppins; font-weight: 400; margin-bottom: 0px; line-height: 140%; hyphens: auto; letter-spacing: 0px; } .faq-box .content h3.spalten-titel{ text-transform: none; font-size: 16px; } .faq-box h4.spalten-subtitel{ font-family: Poppins; font-weight: 400; color: #ddd; margin-bottom: 0px; margin-top: 10px; line-height: 140%; } .faq-box .box-read-more-text{ margin-top: 20px; display: none; } .faq-box h2 .titel_part_2{ display: block; background: #fff; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .faq-box .titel{ line-height: 120%; } .faq-box .spalten-titel{ letter-spacing: 2px; } .faq-box .text-detail{ color: #999999; } .faq-box .item.active{ width: 100%; } @media(max-width: 1500px){ .faq-box h2.box-title{ text-align: left; } .faq-box .flex-wrap, .faq-box .title-wrapper{ width: 100%; } .faq-box .title-wrapper{ padding-right: 0px; } } @media(max-width: 1200px){ .faq-box .content h3.spalten-titel { font-size: 16px; } } @media(max-width: 1024px){ .faq-box .item{ padding-top: 15px; padding-bottom: 15px; } .faq-box .titel{ margin-top: 0px; text-align: left; } .faq-box .titel br{ display: none; } .faq-box .title-wrapper{ padding-right: 0px; } .faq-box .spalten-titel{ padding-right: 45px; } .faq-box .box-more-text{ width: 20px; height: 20px; top: 3px; } .faq-box .flex-wrap, .faq-box .title-wrapper{ width: 100%; } .faq-box h2 .titel_part_2{ display: inline-block; margin-left: 5px; } } @media(max-width: 768px){ .faq-box .content h3.spalten-titel{ font-size: 16px; } } @media(max-width: 650px){ .faq-box .flex-wrap{ gap: 10px; } .faq-box .box-more-text { top: 0px; } .faq-box .box-read-more-text{ margin-top: 10px; } .faq-box .content h3.spalten-titel, .faq-box .item .text-detail{ font-size: 14px; } .faq-box .item{ width: calc(50% - 5px); } .faq-box .spalten-titel{ padding-right: 30px } .faq-box .box-more-text{ position: relative; margin-bottom: 10px; } .faq-box .spalten-titel{ padding-right: 0px; } } @media(max-width: 480px){ .faq-box .item { padding-left: 10px; padding-right: 10px; } } /* Quelle: vorteile-box.css */ /* Quelle: header-box.css */ .header-box { position: relative; overflow: hidden; isolation: isolate; /* Permalink - use to edit and share this gradient. Permalink - Zum Bearbeiten und Teilen dieses Verlaufs verwenden: https://colorzilla.com/gradient-editor/#322938+1,1b161e+79 */ background: radial-gradient(ellipse at center, #322938 1%,#1b161e 79%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ } .header-box::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient( 110deg, rgba(216, 38, 139, 0.16) 0%, rgba(133, 61, 190, 0.13) 42%, rgba(48, 105, 210, 0.15) 100% ); } /*Gitter*/ .header-box::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: linear-gradient( rgba(255, 255, 255, 0.04) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px ); background-size: 25px 25px; -webkit-mask-image: linear-gradient( to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.35) ); mask-image: linear-gradient( to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.35) ); } .header-box .section-content, .header-box .text-outer-wrapper, .header-box .content, .header-box .image-wrapper { background: transparent; } .header-box .slider { width: 100%; overflow: hidden; } .header-box .slides { position: absolute; top: 0px; width: 100%; height: 100%; } .header-box .slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(40px) scale(1.03); transition: opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1); pointer-events: none; } .header-box .slide.active { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .header-box .number.first{ color: #fff; font-size: 18px; font-family: Poppins; font-weight: 600; text-align: center; } .header-box .number.last{ color: #fff; font-size: 18px; font-family: Poppins; font-weight: 600; text-align: center; } /* Pfeile */ .header-box .arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:20; width:54px; height:54px; border:none; border-radius:50%; background:rgba(0,0,0,.35); backdrop-filter:blur(8px); color:#fff; cursor:pointer; transition:.3s; } .header-box .arrow:hover{ background:rgba(0,0,0,.6); transform:translateY(-50%) scale(1.08); } .header-box .prev{left:30px;} .header-box .next{right:30px;} /* Thumbnails */ .header-box .thumbnails{ height: 200px; width: 20px; margin-left: auto; position: absolute; right: 0px; top: 120px; z-index: 100; } .header-box .thumb { width: 5px; margin-top: 4px; margin-bottom: 4px; cursor: pointer; transition: .3s; height: 50px; width: 100%; position: relative; } .header-box .thumb.active{ opacity:1; transform:scale(1); border-color:#fff; } .header-box .thumb:after { content: ""; display: block; height: 100%; width: 3px; background: #fff; margin: auto auto; } .header-box .thumb.active:after { background: linear-gradient(45deg, rgba(207, 7, 126, 1) 0%, rgba(240, 126, 35, 1) 100%); } .header-box .section-content{ width: 100%; } .header-box .section-content .content .title-wrapper h1{ font-size: 16px; font-weight: normal; margin-bottom: 20px; line-height: 120%; color: #fff; color: #E24A4B; letter-spacing: 1px; } .header-box .section-content .content .title-wrapper h2{ font-size: 55px; font-weight: 600; color: #fff !important; line-height: 120%; margin-bottom: 0px; } .header-box .section-content .content .title-wrapper h2 .marked{ color: red; } .header-box { padding-top: 70px; display: flex; flex-wrap: wrap; align-items: center; overflow: hidden; position: relative; } .header-box .bg_image{ width: 100%; height: 100%; position: absolute; } .header-box .bg_image img{ width: 100%; height: 100%; position: absolute; object-fit: cover; } .header-box h1{ margin-bottom: 10px; } .header-box h2{ margin-bottom: 10px; color: #ddd !important; } .header-box .section-content .content{ height: 100%; display: flex; flex-wrap: wrap; align-items: stretch; padding-top: 80px; padding-bottom: 130px; } .header-box .text{ color: #fff; font-size: 18px; } .header-box .usp-wrapper{ padding: 20px 40px; border-radius: 15px; background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); width: calc(100% - 50px); margin-top: 50px; display: flex; gap: 80px; } .header-box .usp-item{ display: flex; gap: 20px; align-items: center; } .header-box .usp-item:last-child{ flex-grow: 2; } .header-box .usp-icon{ width: 55px; height: 55px; background: rgba(255, 255, 255, 0.3); border-radius: 9999px; padding: 15px; } .header-box .usp-icon img{ display: block; width: 100%; height: 100%; object-fit: contain; } .header-box .usp-title{ color: #fff; font-size: 20px; } #editor .editor-styles-wrapper .header-box h2, .header-box .section-content h2{ font-size: 20px; line-height: 160%; } .header-box .content{ max-width: 1600px; margin: auto auto; display: flex; flex-wrap: wrap; align-items: center; position: relative; } .header-box .text-wrapper{ width: 650px; display: flex; flex-wrap: wrap; align-items: center; padding-right: 60px; min-height: 500px; } .header-box .image-wrapper{ position: relative; width: calc(100% - 700px); border-radius: 20px; overflow: visible; z-index: 1; } /* Neon Glow Layer */ .header-box .image-wrapper::before{ content: ""; position: absolute; inset: -3px; border-radius: 24px; opacity: 0.8; z-index: -1; } .header-box .image-wrapper img{ display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 20px; position: relative; z-index: 2; position: absolute; top: 0px; } .header-box .content h2{ font-family: Poppins; font-weight: 400; text-transform: none; } .header-box .content { border-radius: 12px; } .header-box .image-wrapper img{ border: 1px solid rgba(255,255,255,0.2); box-shadow: 0 0 20px rgba(0,0,0,0.3); } .header-box h2 .marked { position: relative; display: inline-block; color: transparent; background: linear-gradient( 90deg, #ffffff 0%, #ffffff 40%, #8b5cf6 60%, #22d3ee 100% ); background-size: 200% auto; background-clip: text; -webkit-background-clip: text; opacity: 0; transform: translateY(20px); filter: blur(8px); animation: marked-reveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards, marked-gradient 4s ease-in-out 0.9s infinite alternate; background: linear-gradient( 45deg, rgba(207, 7, 126, 1) 0%, rgba(240, 126, 35, 1) 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; } @keyframes marked-reveal { to { opacity: 1; transform: translateY(0); filter: blur(0); } } @keyframes marked-gradient { from { background-position: 0% center; } to { background-position: 100% center; } } @keyframes marked-line { to { transform: scaleX(1); } } /* Barrierefreiheit */ @media (prefers-reduced-motion: reduce) { .header-box h2 .marked, .header-box h2 .marked::after { animation: none; opacity: 1; transform: none; filter: none; } } /* Barrierefreiheit */ @media (prefers-reduced-motion: reduce) { .header-box h2 .marked, .header-box h2 .marked::after { animation: none; opacity: 1; transform: none; filter: none; } } @media(max-width: 1700px){ .header-box .usp-wrapper{ gap: 60px; } } @media(max-width: 1600px){ .header-box .usp-wrapper{ gap: 60px; } .header-box .usp-icon{ width: 50px; height: 50px; } .header-box .usp-title{ font-size: 18px; } .header-box .usp-text{ font-size: 14px; } } @media(max-width: 1500px){ .header-box{ min-height: auto; } .header-box .section-content .content .title-wrapper h2{ font-size: 45px; } .header-box .text-wrapper{ padding-right: 30px; width: 550px; } .header-box .image-wrapper{ width: calc(100% - 600px); } .header-box .thumbnails{ right: 0px; } .header-box .section-content .content{ padding-top: 90px; padding-bottom: 100px; } .header-box .thumbnails{ top: 90px; } .header-box .section-content .content{ padding-top: 60px; } } @media(max-width: 1400px){ .header-box .usp-wrapper{ gap: 40px; padding-left: 20px; padding-right: 20px; } .header-box .usp-icon{ margin: auto auto; margin-bottom: 10px; } .header-box .usp-item{ display: block; text-align: center; } .header-box .usp-item, .header-box .usp-item:last-child{ flex-grow: 1; } .header-box .section-content .content{ padding-top: 50px; } } @media(max-width: 1300px){ .header-box .image_front{ width: 100%; } } @media(max-width: 1200px){ .header-box .text-wrapper{ width: 400px; } .header-box .image-wrapper{ width: calc(100% - 450px); } .header-box .section-content .content .title-wrapper h2{ font-size: 30px; } .header-box .button-wrapper{ display: flex; flex-wrap: wrap; gap: 10px; width: 100%; } .header-box .button-wrapper a{ display: flex; flex-wrap: wrap; width: 100%; margin-right: 0px; justify-content: space-between; } } @media(max-width: 1024px){ .header-box{ align-items: flex-end; } .header-box .btn-primary{ width: 100%; text-align: center; display: inline-block; } .header-box .btn-primary::after{ margin-left: 10px; } .header-box .text-wrapper{ width: 400px; } } @media(max-width: 950px){ .header-box .usp-icon{ width: 35px; height: 35px; padding: 10px; } .header-box .usp-wrapper{ width: 250px; order: 2; display: block; } .header-box .usp-item{ display: flex; text-align: left; margin-bottom: 10px; align-items: flex-start; } .header-box .usp-icon{ margin: inherit; } .header-box .section-content .content{ padding-top: 60px; padding-bottom: 50px; } .header-box .slider{ padding-top: 50px; } .header-box .thumbnails{ right: 0px; top: 60px; } .header-box{ padding-top: 0px; } .header-box .text-wrapper{ padding-left: 40px; order: 3; min-height: inherit; border-radius: 8px; padding-right: 0px; position: relative; z-index: 10; margin-top: 40px; width: calc(100% - 250px); } .header-box .image-wrapper{ width: 100%; order: 1; } .header-box .section-content .content .title-wrapper h1{ font-size: 16px; } .header-box .slider{ display: flex; flex-wrap: wrap; } .header-box .slides{ width: calc(100% - 40px); height: 500px; min-height: 300px; height: 350px; order: 1; position: relative; } .text-outer-wrapper{ order: 2; } .header-box .text{ font-size: 16px; } } @media(max-width: 700px){ .header-box .text-wrapper{ width: 100%; padding-left: 0px; } .header-box .usp-wrapper{ width: 100%; display: flex; flex-wrap: wrap; gap: 10px; } .header-box .usp-item{ width: calc(50% - 20px); } } @media(max-width: 550px){ .usp-text-wrapper{ width: calc(100% - 60px); hyphens: auto; } .header-box .usp-wrapper{ order: 3; } .header-box .text-wrapper{ order: 2; } } /* Quelle: leistungenmenu-box.css */ #menu-leistungen{ display: flex; flex-wrap: wrap; justify-content: center; grid-gap: 20px; } #menu-leistungen li{ width: calc(20% - 20px); } #menu-leistungen li a{ display: block; border-radius: 5px; color: #fff; font-family: Poppins; font-weight: 800; font-size: 25px; letter-spacing: 2px; line-height: 110%; position: relative; transition: all 0.3s; text-transform: uppercase; /*background: linear-gradient(to bottom, rgba(30, 25, 30, 1) 0%, rgba(5, 5, 5, 1) 100%);*/ overflow: hidden; min-height: 450px; } #menu-leistungen li.current-menu-item a{ background: linear-gradient(45deg, rgba(207, 7, 126, 1) 0%, rgba(240, 126, 35, 1) 100%); } #menu-leistungen li a span.marked{ display: block; width: 100%; } #menu-leistungen li .menu-title{ padding-top: 40px; display: block; } #menu-leistungen li .menu-title:before{ content: ""; display: block; width: calc(100% + 50px); position: absolute; top: 0px; left: 0px; height: 3px; background: #fff; } #menu-leistungen li .menu-arrow{ content: ""; display: block; width: 30px; height: 30px; -webkit-mask-image: url(https://wolpermedia.de/wp-content/themes/jackalope/fa-layout/fa-css/../images/right-arrow.svg); mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-position: center center; -webkit-mask-position: center center; mask-size: contain; -webkit-mask-size: contain; background: #fff; transition: all 0.3s; margin-top: 30px; } .leistungsmenu-box.untereinander .menu-content{ width: 400px; } .leistungsmenu-box.untereinander .menu-item-wrapper{ display: flex; align-items: flex-end; } .leistungsmenu-box.untereinander #menu-leistungen{ max-width: 1600px; margin: auto auto; display: flex; flex-wrap: wrap; gap: 80px; } .leistungsmenu-box.untereinander #menu-leistungen li{ width: calc(100%); position: relative; } .leistungsmenu-box.untereinander #menu-leistungen li .icon{ width: 50px; margin-bottom: 20px; display: none; } .leistungsmenu-box.untereinander #menu-leistungen li .menu-image{ position: absolute; right: 0; top: 0; height: 100%; width: calc(100% - 400px); object-fit: cover; object-position: center center; border-radius: 8px; overflow: hidden; } .leistungsmenu-box.untereinander #menu-leistungen li:nth-child(even) .menu-image{ right: inherit; left: 0px; } .leistungsmenu-box.untereinander li a .menu-image img{ width: 100%; height: 100%; object-fit: cover; position: absolute; object-position: center center; top: 0px; left: 0px; transition: all 0.5s; } .leistungsmenu-box.untereinander li a:hover .menu-image img{ transform: scale(1.05); } .leistungsmenu-box.untereinander #menu-leistungen li .menu-beschreibung{ display: block; font-family: Poppins; font-weight: 400; font-size: 16px; text-transform: none; display: block; line-height: 180%; letter-spacing: 0px; padding-top: 30px; color: #eee; padding-right: 40px; hyphens: auto; } .leistungsmenu-box.untereinander #menu-leistungen li .menu-content{ display: flex; flex-wrap: wrap; align-items: center; position: relative; z-index: 10; /* Permalink - use to edit and share this gradient. Permalink - Zum Bearbeiten und Teilen dieses Verlaufs verwenden: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.65+0,0+100;Neutral+Density */ /*background: linear-gradient(to right, rgba(0,0,0,0.95) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ height: 100%; border-radius: 8px; } .leistungsmenu-box.untereinander #menu-leistungen li:nth-child(even) a{ justify-content: flex-end; } .leistungsmenu-box.untereinander #menu-leistungen li a{ display: flex; padding: 0px; align-items: flex-end; font-size: 55px; text-shadow: 0 0 20px rgba(0,0,0,0.8); } #menu-leistungen li:nth-child(even) .menu-title:before{ left: inherit; right: 0px; } #menu-leistungen li:nth-child(even) .menu-title{ padding-left: 40px; } .leistungsmenu-box.untereinander #menu-leistungen li:nth-child(even) .menu-beschreibung{ padding-right: auto; padding-left: 40px; } @media(max-width: 1400px){ #menu-leistungen li a{ font-size: 40px; padding: 17px; padding-bottom: 50px; } #menu-leistungen li a:after{ margin-top: 10px; bottom: 10px; } #menu-leistungen li{ width: calc(33.33% - 20px); } #menu-leistungen li:first-child{ width: calc(66.66% - 20px); } } @media(max-width: 1024px){ .menu-leistungen-container li{ padding-left: 0px !important; } .leistungsmenu-box.untereinander #menu-leistungen li a { font-size: 35px; } .leistungsmenu-box.untereinander .menu-content{ width: 300px; } .leistungsmenu-box.untereinander #menu-leistungen li .menu-image{ width: calc(100% - 300px); } } @media(max-width: 650px){ .leistungsmenu-box.untereinander #menu-leistungen li a{ display: block; } .leistungsmenu-box.untereinander #leistungen-navigation{ max-width: 480px; margin: auto auto; } .leistungsmenu-box.untereinander #menu-leistungen li .menu-content{ width: 100%; } .leistungsmenu-box.untereinander #menu-leistungen .menu-item-wrapper{ width: 100%; } .leistungsmenu-box.untereinander #menu-leistungen .menu-title-description{ width: 100%; } .leistungsmenu-box.untereinander #menu-leistungen li .menu-image{ display: block; width: 100%; height: 300px; object-fit: cover; } .leistungsmenu-box.untereinander #menu-leistungen{ gap: 40px; } #menu-leistungen li .menu-title{ padding-top: 20px; } .leistungsmenu-box.untereinander #menu-leistungen li .menu-beschreibung{ margin-top: 0px; padding-top: 20px; } #menu-leistungen li .menu-beschreibung:after{ margin-top: 20px; } .leistungsmenu-box.untereinander #menu-leistungen li .menu-image{ position: relative; } .leistungsmenu-box.untereinander .menu-item-wrapper{ display: block; } .leistungsmenu-box.untereinander .menu-title-description{ padding: 20px; } #menu-leistungen li:nth-child(even) .menu-title:before, #menu-leistungen li .menu-title:before{ width: 3px; height: 100%; left: 20px; top: -30px; right: inherit; } #menu-leistungen li .menu-title{ padding-left: 40px; } .leistungsmenu-box.untereinander #menu-leistungen li:nth-child(even) .menu-beschreibung, #menu-leistungen li:nth-child(even) .menu-title, .leistungsmenu-box.untereinander #menu-leistungen li .menu-beschreibung, #menu-leistungen li .menu-title{ padding-right: 0px; padding-left: 40px; } } @media(max-width: 600px){ #menu-leistungen li:first-child{ width: calc(100% - 20px); } #menu-leistungen li{ width: calc(50% - 20px); } #menu-leistungen li a:after{ } } @media(max-width: 480px){ #menu-leistungen li a:after{ left: 15px; } #menu-leistungen li a:hover:after{ bottom: calc(100% - 38px); } #menu-leistungen li a{ font-size: 33px; } #menu-leistungen li a:after{ margin-top: 5px; } #menu-leistungen li a:after{ content: ""; display: block; width: 20px; height: 20px; -webkit-mask-image: url(https://wolpermedia.de/wp-content/themes/jackalope/fa-layout/fa-css/../images/right-arrow.svg); } #menu-leistungen li a:hover{ padding-left: 50px; } #menu-leistungen{ padding-left: 10px; padding-right: 10px; padding-top: 30px; } } @media(max-width: 420px){ .cta-button{ display: none; } } /* Quelle: calltoaction-box.css */ .calltoaction-box{ position: relative; overflow: hidden; isolation: isolate; /* Permalink - use to edit and share this gradient. Permalink - Zum Bearbeiten und Teilen dieses Verlaufs verwenden: https://colorzilla.com/gradient-editor/#322938+1,1b161e+79 */ background: radial-gradient(ellipse at center, #322938 1%,#1b161e 79%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ } .calltoaction-box::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; } .calltoaction-box h2 .marked { position: relative; display: inline-block; color: transparent; background: linear-gradient(90deg, #ffffff 0%, #ffffff 40%, #8b5cf6 60%, #22d3ee 100%); background-size: 200% auto; background-clip: text; -webkit-background-clip: text; /* opacity: 0; */ /* transform: translateY(20px); */ /* filter: blur(8px); */ animation: marked-reveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards, marked-gradient 4s ease-in-out 0.9s infinite alternate; background: linear-gradient(45deg, rgba(207, 7, 126, 1) 0%, rgba(240, 126, 35, 1) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; } /*Gitter*/ .calltoaction-box ul.cta-usp{ display: flex; flex-wrap: wrap; justify-content: center; } .calltoaction-box ul.cta-usp li{ display: flex; flex-wrap: wrap; align-items: center; gap: 20px; border-right: 1px solid rgba(255,255,255,0.2); padding-left: 40px; padding-right: 40px; } .calltoaction-box ul.cta-usp li:last-child{ border-right: none; } .calltoaction-box .usp-icon{ width: 50px; height: 50px; background: rgba(255, 255, 255, 0.3); border-radius: 9999px; padding: 10px; } .calltoaction-box .usp-icon img{ display: block; width: 100%; } .calltoaction-box .usp-title{ color: #fff; font-weight: 600; } .calltoaction-box .usp-text-wrapper span{ display: block; } .calltoaction-box .cta-footer{ max-width: 1040px; margin: auto auto; } .calltoaction-box .cta-footer .cta-image-text{ display: block; width: 320px; aspect-ratio: 1 / 1; } .calltoaction-box .cta-footer{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; } .calltoaction-box .stars-text-wrapper{ background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); padding: 20px 30px; border-radius: 15px; display: flex; flex-wrap: wrap; width: calc(100% - 340px); margin-right: 20px; } .calltoaction-box .stars{ display: flex; flex-wrap: wrap; margin-right: 20px; } .calltoaction-box .stars img{ width: 22px; display: block; margin-right: 8px; aspect-ratio: 1 / 1; } /*Gitter*/ .calltoaction-box::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: linear-gradient( rgba(255, 255, 255, 0.04) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px ); background-size: 25px 25px; -webkit-mask-image: linear-gradient( to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.35) ); mask-image: linear-gradient( to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.35) ); } .calltoaction-box .content h2{ font-size: 45px; hyphens: auto; font-weight: 600; text-align: center; line-height: 130%; } .calltoaction-box marked{ position: relative; } .calltoaction-box .call-to-action-text{ max-width: 1000px; margin: auto auto; } .calltoaction-box marked:after{ content: ""; display: inline-block; height: 6px; width: 100%; background: #fff; position: absolute; bottom: 0px; left: 0px; -webkit-mask: url("https://wolpermedia.de/wp-content/themes/jackalope/fa-layout/fa-css/../images/underscore.png") no-repeat; -webkit-mask-size: 100% 100%; mask: url("https://wolpermedia.de/wp-content/themes/jackalope/fa-layout/fa-css/../images/underscore.png") no-repeat; mask-size: 100% 100%; } .calltoaction-box .text{ color: #fff; font-size: 22px; margin: auto auto; text-align: center; } .calltoaction-box a.call-to-action-button:hover{ padding-left: 80px; padding-right: 30px; } .calltoaction-box .button-wrapper{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } .calltoaction-box a:hover span:after{ right: calc(100% - 50px); } @media(max-width: 1500px){ .calltoaction-box .call-to-action-text-wrapper{ padding: 60px; } } @media(max-width: 1400px){ .calltoaction-box h2{ font-size: 40px; } .calltoaction-box .text{ font-size: 18px; } .call-to-action-text .spacer50{ height: 30px; } } @media(max-width: 1300px){ .calltoaction-box .content h2{ font-size: 36px; } .calltoaction-box .usp-title{ font-size: 14px; } .calltoaction-box .usp-text-wrapper span{ font-size: 14px; } .calltoaction-box .usp-icon{ width: 40px; height: 40px; } .calltoaction-box ul.cta-usp li{ padding-left: 20px; padding-right: 20px; } .calltoaction-box .spacer60{ height: 40px; } .calltoaction-box .usp-icon{ padding: 5px; } } @media(max-width: 1200px){ .calltoaction-box .call-to-action-text-wrapper{ padding: 40px; } } @media(max-width: 1024px){ .calltoaction-box .stars-text-wrapper{ margin-right: 0px; width: 100%; margin-top: 5px; justify-content: center; } .calltoaction-box .cta-footer{ display: block; } .calltoaction-box .cta-footer .cta-image-text{ margin: auto auto; position: relative; z-index: 1; margin-top: 20px; } } @media(max-width: 980px){ .calltoaction-box ul.cta-usp li { margin-bottom: 20px; } .calltoaction-box ul.cta-usp li:last-child { margin-bottom: 0px; } } @media(max-width: 650px){ .calltoaction-box .stars{ width: 150px; margin-bottom: 10px !important; margin: auto auto; } .calltoaction-box .stars-text-wrapper{ display: block; margin-bottom: 10px; margin: auto auto; margin-top: 10px; text-align: center; } } @media(max-width: 600px){ .calltoaction-box .content h2 { font-size: 30px; } .calltoaction-box .usp-text-wrapper span.usp-text{ display: none; } .calltoaction-box .usp-icon{ width: 40px; height: 40px; display: block; margin: auto auto; margin-bottom: 10px; } .calltoaction-box .usp-text-wrapper span{ text-align: center; } .calltoaction-box .usp-text-wrapper span{ display: block; width: 100px; margin: auto auto; } .calltoaction-box ul.cta-usp li{ width: 33.33%; display: block; padding-left: 10px; padding-right: 10px; } } /* Quelle: produkte-box.css */ .produkte-box .preis{ text-align: right; } /* Quelle: responsive.css */ /* CSS Document */ @media (min-width: 1201px){ .hide-big_desktop{ display: none !important; } .cwbd-1_3{ width: 33.33%; } .cwbd-2_3{ width: 66.66%; } .cwbd-20{ width: 20%; } .cwbd-25{ width: 25%; } .cwbd-40{ width: 40%; } .cwbd-50{ width: 50%; } .cwbd-60{ width: 60%; } .cwbd-75{ width: 75%; } .cwbd-80{ width: 80%; } .cwbd-100{ width: 100%; } .coldesk-1{ width: 100%; } .coldesk-2{ width: 50%; } .coldesk-3{ width: 33.33%; } .coldesk-4{ width: 25%; } .coldesk-5{ width: 20%; } .coldesk-6{ width: 16.66%; } } @media(max-width: 1200px) and (min-width: 1025px){ .hide-desktop{ display: none !important; } .cwd-1_3{ width: 33.33%; } .cwd-2_3{ width: 66.66%; } .cwd-20{ width: 20%; } .cwd-25{ width: 25%; } .cwd-40{ width: 40%; } .cwd-50{ width: 50%; } .cwd-60{ width: 60%; } .cwd-75{ width: 75%; } .cwd-80{ width: 80%; } .cwd-100{ width: 100%; } .coldesk-1{ width: 100%; } .coldesk-2{ width: 50%; } .coldesk-3{ width: 33.33%; } .coldesk-4{ width: 25%; } .coldesk-5{ width: 20%; } .coldesk-6{ width: 16.66%; } } @media(max-width: 1024px) and (min-width: 768px){ .cwl-1_3{ width: 33.33%; } .cwl-2_3{ width: 66.66%; } .cwl-20{ width: 20%; } .cwl-25{ width: 25%; } .cwl-40{ width: 40%; } .cwl-50{ width: 50%; } .cwl-60{ width: 60%; } .cwl-75{ width: 75%; } .cwl-80{ width: 80%; } .cwl-100{ width: 100%; } .coldesk-1{ width: 100%; } .coldesk-2{ width: 50%; } .coldesk-3{ width: 33.33%; } .coldesk-4{ width: 25%; } .coldesk-5{ width: 20%; } .coldesk-6{ width: 16.66%; } } @media(max-width: 768px) and (min-width: 480px){ .hide-tablet{ display: none !important; } .cwt-1_3{ width: 33.33%; } .cwt-2_3{ width: 66.66%; } .cwt-1_3{ width: 33.33%; } .cwt-20{ width: 20%; } .cwt-25{ width: 25%; } .cwt-40{ width: 40%; } .cwt-50{ width: 50%; } .cwt-60{ width: 60%; } .cwt-75{ width: 75%; } .cwt-80{ width: 80%; } .cwt-100{ width: 100%; } .coltab-1{ width: 100%; } .coltab-2{ width: 50%; } .coltab-3{ width: 33.33%; } .coltab-4{ width: 25%; } .coltab-5{ width: 20%; } .coltab-6{ width: 16.66%; } } @media (max-width: 480px){ .text-mit-bild-box .break_on_handy .under-text-handy .text, .text-mit-bild-box .break_on_handy .above-text-handy .text{ width: 100% !important; } .text-mit-bild-box .break_on_handy .under-text-handy .image, .text-mit-bild-box .break_on_tablet .above-text-handy .image{ width: 100% !important; position: relative; padding-top: 0px !important; } .text-mit-bild-box .break_on_handy .under-text-handy .image img, .text-mit-bild-box .break_on_handy .above-text-handy .image img{ position: relative; padding-top: 0px !important; } .text-mit-bild-box .break_on_handy .image { width: 100% !important; } .text-mit-bild-box .break_on_handy .text { width: 100% !important; } .break_on_laptop .image{ position: relative; padding-top: 0px !important; } .break_on_handy .imagecover .image img{ position: relative; padding-top: 0px !important; } .hide-handy{ display: none !important; } .cwh-1_3{ width: 33.33%; } .cwh-2_3{ width: 66.66%; } .cwh-20{ width: 20%; } .cwh-25{ width: 25%; } .cwh-40{ width: 40%; } .cwh-50{ width: 50%; } .cwh-60{ width: 60%; } .cwh-75{ width: 75%; } .cwh-80{ width: 80%; } .cwh-100{ width: 100%; } .colhan-1{ width: 100%; } .colhan-2{ width: 50%; } .colhan-3{ width: 33.33%; } .colhan-4{ width: 25%; } .colhan-5{ width: 20%; } .colhan-6{ width: 16.66%; } .ch300 { max-width: 300px; } .ch350 { max-width: 350px; } .ch400 { max-width: 400px; } .ch500 { max-width: 500px; } .ch600 { max-width: 600px; } .ch700 { max-width: 700px; } .ch800 { max-width: 800px; } .ch900 { max-width: 900px; } .ch950 { max-width: 950px; } .ch1000 { max-width: 1000px; } .ch1100 { max-width: 1100px; } .ch1200 { max-width: 1200px; } .ch1300 { max-width: 1300px; } .ch1400 { max-width: 1400px; } .ch1500 { max-width: 1500px; } .ch1600 { max-width: 1600px; } .ch1700 { max-width: 1700px; } .ch1800 { max-width: 1800px; } .ch1900 { max-width: 1900px; } .ch2000 { max-width: 2000px; } } @media (max-width: 1024px){ .cl300 { max-width: 300px; } .cl350 { max-width: 350px; } .cl400 { max-width: 400px; } .cl500 { max-width: 500px; } .cl600 { max-width: 600px; } .cl700 { max-width: 700px; } .cl800 { max-width: 800px; } .cl900 { max-width: 900px; } .cl950 { max-width: 950px; } .cl1000 { max-width: 1000px; } .cl1100 { max-width: 1100px; } .cl1200 { max-width: 1200px; } .cl1300 { max-width: 1300px; } .cl1400 { max-width: 1400px; } .cl1500 { max-width: 1500px; } .cl1600 { max-width: 1600px; } .cl1700 { max-width: 1700px; } .cl1800 { max-width: 1800px; } .cl1900 { max-width: 1900px; } .cl2000 { max-width: 2000px; } .text-mit-bild-box .above-text-tablet .image{ order: 1; } .text-mit-bild-box .above-text-tablet .text{ order: 2; } .text-mit-bild-box .under-text-tablet .image{ order: 2; } .text-mit-bild-box .under-text-tablet .text{ order: 1; } .imagecover.break_on_laptop img{ top: 0px; } .text-mit-bild-box .break_on_laptop .under-text-handy .text, .text-mit-bild-box .break_on_laptop .above-text-handy .text{ width: 100% !important; } .text-mit-bild-box .break_on_laptop .under-text-handy .image, .text-mit-bild-box .break_on_laptop .above-text-handy .image{ width: 100% !important; position: relative; } .text-mit-bild-box .break_on_laptop .under-text-handy .image img, .text-mit-bild-box .break_on_laptop .above-text-handy .image img{ position: relative; } .text-mit-bild-box .break_on_laptop .image { width: 100% !important; } .text-mit-bild-box .break_on_laptop .text { width: 100% !important; } .break_on_laptop .imagecover .image img{ position: relative; } .text-mit-bild-box .under-text-tablet .text, .text-mit-bild-box .above-text-tablet .text{ width: 100% !important; } .text-mit-bild-box .under-text-tablet .image, .text-mit-bild-box .above-text-tablet .image{ width: 100% !important; position: relative; } .text-mit-bild-box .under-text-tablet .image img, .text-mit-bild-box .above-text-tablet .image img{ position: relative; } section{ position: relative; } .gridgalerie-box ul{ grid-auto-rows: minmax(25vh, auto) } .spacer5 { height: calc(5px * 1); } .spacer10 { height: calc(10px * 0.75); } .spacer15 { height: calc(15px * 0.75); } .spacer20 { height: calc(20px * 0.75); } .spacer25 { height: calc(25px * 0.75); } .spacer30 { height: calc(30px * 0.75); } .spacer35 { height: calc(35px * 0.75); } .spacer40 { height: calc(40px * 0.75); } .spacer45 { height: calc(45px * 0.75); } .spacer50 { height: calc(50px * 0.75); } .spacer55 { height: calc(55px * 0.75); } .spacer60 { height: calc(60px * 0.75); } .spacer65 { height: calc(65px * 0.75); } .spacer70 { height: calc(70px * 0.75); } .spacer75 { height: calc(75px * 0.75); } .spacer80 { height: calc(80px * 0.75); } .spacer85 { height: calc(85px * 0.75); } .spacer90 { height: calc(90px * 0.75); } .spacer100 { height: calc(100px * 0.75); } .spacer110 { height: calc(110px * 0.75); } .spacer120 { height: calc(120px * 0.75); } .spacer130 { height: calc(130px * 0.75); } .spacer140 { height: calc(140px * 0.75); } .spacer150 { height: calc(150px * 0.75); } .spacer160 { height: calc(160px * 0.75); } .spacer170 { height: calc(170px * 0.75); } .spacer180 { height: calc(180px * 0.75); } .spacer190 { height: calc(190px * 0.75); } .spacer200 { height: calc(200px * 0.75); } .spacer210 { height: calc(210px * 0.75); } .spacer220 { height: calc(220px * 0.75); } .spacer230 { height: calc(230px * 0.75); } .spacer240 { height: calc(240px * 0.75); } .spacer250 { height: calc(250px * 0.75); } .spacer300 { height: calc(300px * 0.75); } .spacer350 { height: calc(350px * 0.75); } .spacer400 { height: calc(400px * 0.75); } .spacer450 { height: calc(450px * 0.75); } .spacer500 { height: calc(500px * 0.75); } .spacer550 { height: calc(550px * 0.75); } .spacer600 { height: calc(600px * 0.75); } .spacer650 { height: calc(650px * 0.75); } .spacer700 { height: calc(700px * 0.75); } .spacer750 { height: calc(750px * 0.75); } .spacer800 { height: calc(800px * 0.75); } .height5{ height: calc(5px * 0.75); } .height10{ height: calc(10px * 0.75); } .height20{ height: calc(20px * 0.75); } .height30{ height: calc(30px * 0.75); } .height40{ height: calc(40px * 0.75); } .height50{ height: calc(50px * 0.75); } .height60{ height: calc(60px * 0.75); } .height70{ height: calc(70px * 0.75); } .height80{ height: calc(80px * 0.75); } .height90{ height: calc(90px * 0.75); } .height100{ height: calc(100px * 0.75); } .height110{ height: calc(110px * 0.75); } .height120{ height: calc(120px * 0.75); } .height130{ height: calc(130px * 0.75); } .height140{ height: calc(140px * 0.75); } .height150{ height: calc(150px * 0.75); } .height160{ height: calc(160px * 0.75); } .height170{ height: calc(170px * 0.75); } .height180{ height: calc(180px * 0.75); } .height190{ height: calc(190px * 0.75); } .height200{ height: calc(200px * 0.75); } .height210{ height: calc(210px * 0.75); } .height220{ height: calc(220px * 0.75); } .height230{ height: calc(230px * 0.75); } .height240{ height: calc(240px * 0.75); } .height250{ height: calc(250px * 0.75); } } @media (min-width: 1024px) { .hide-desktop{ display: none; } } @media (min-width: 1200px) { .bd300 { max-width: 300px; } .cbd400 { max-width: 400px; } .bd500 { max-width: 500px; } .bd600 { max-width: 600px; } .bd700 { max-width: 700px; } .bd800 { max-width: 800px; } .bd900 { max-width: 900px; } .bd950 { max-width: 950px; } .bd1000 { max-width: 1000px; } .bd1100 { max-width: 1100px; } .bd1200 { max-width: 1200px; } .bd1300 { max-width: 1300px; } .bd1400 { max-width: 1400px; } .bd1500 { max-width: 1500px; } .bd1600 { max-width: 1600px; } .bd1700 { max-width: 1700px; } .bd1800 { max-width: 1800px; } .bd1900 { max-width: 1900px; } .bd2000 { max-width: 2000px; } } @media screen and (max-width: 1200px) and (min-width: 1024px) { .c300 { max-width: 300px; } .c400 { max-width: 400px; } .c500 { max-width: 500px; } .c600 { max-width: 600px; } .c700 { max-width: 700px; } .c800 { max-width: 800px; } .c900 { max-width: 900px; } .c950 { max-width: 950px; } .c1000 { max-width: 1000px; } .c1100 { max-width: 1100px; } .c1200 { max-width: 1200px; } .c1300 { max-width: 1300px; } .c1400 { max-width: 1400px; } .c1500 { max-width: 1500px; } .c1600 { max-width: 1600px; } .c1700 { max-width: 1700px; } .c1800 { max-width: 1800px; } .c1900 { max-width: 1900px; } .c2000 { max-width: 2000px; } } @media screen and (max-width: 1024px) and (min-width: 768px) { .hide-tablet{ display: none; } .spacer5 { height: calc(5px * 1); } .spacer10 { height: calc(10px * 0.6); } .spacer15 { height: calc(15px * 0.6); } .spacer20 { height: calc(20px * 0.6); } .spacer25 { height: calc(25px * 0.6); } .spacer30 { height: calc(30px * 0.6); } .spacer35 { height: calc(35px * 0.6); } .spacer40 { height: calc(40px * 0.6); } .spacer45 { height: calc(45px * 0.6); } .spacer50 { height: calc(50px * 0.6); } .spacer55 { height: calc(55px * 0.6); } .spacer60 { height: calc(60px * 0.6); } .spacer65 { height: calc(65px * 0.6); } .spacer70 { height: calc(70px * 0.6); } .spacer75 { height: calc(75px * 0.6); } .spacer80 { height: calc(80px * 0.6); } .spacer85 { height: calc(85px * 0.6); } .spacer90 { height: calc(90px * 0.6); } .spacer100 { height: calc(100px * 0.6); } .spacer110 { height: calc(110px * 0.6); } .spacer120 { height: calc(120px * 0.6); } .spacer130 { height: calc(130px * 0.6); } .spacer140 { height: calc(140px * 0.6); } .spacer150 { height: calc(150px * 0.6); } .spacer160 { height: calc(160px * 0.6); } .spacer170 { height: calc(170px * 0.6); } .spacer180 { height: calc(180px * 0.6); } .spacer190 { height: calc(190px * 0.6); } .spacer200 { height: calc(200px * 0.6); } .spacer210 { height: calc(210px * 0.6); } .spacer220 { height: calc(220px * 0.6); } .spacer230 { height: calc(230px * 0.6); } .spacer240 { height: calc(240px * 0.6); } .spacer250 { height: calc(250px * 0.6); } .spacer300 { height: calc(300px * 0.6); } .spacer350 { height: calc(350px * 0.6); } .spacer400 { height: calc(400px * 0.6); } .spacer450 { height: calc(450px * 0.6); } .spacer500 { height: calc(500px * 0.6); } .spacer550 { height: calc(550px * 0.6); } .spacer600 { height: calc(600px * 0.6); } .spacer650 { height: calc(650px * 0.6); } .spacer700 { height: calc(700px * 0.6); } .spacer750 { height: calc(750px * 0.6); } .spacer800 { height: calc(800px * 0.6); } .height5{ height: calc(5px * 0.6); } .height10{ height: calc(10px * 0.6); } .height20{ height: calc(20px * 0.6); } .height30{ height: calc(30px * 0.6); } .height40{ height: calc(40px * 0.6); } .height50{ height: calc(50px * 0.6); } .height60{ height: calc(60px * 0.6); } .height70{ height: calc(70px * 0.6); } .height80{ height: calc(80px * 0.6); } .height90{ height: calc(90px * 0.6); } .height100{ height: calc(100px * 0.6); } .height110{ height: calc(110px * 0.6); } .height120{ height: calc(120px * 0.6); } .height130{ height: calc(130px * 0.6); } .height140{ height: calc(140px * 0.6); } .height150{ height: calc(150px * 0.6); } .height160{ height: calc(160px * 0.6); } .height170{ height: calc(170px * 0.6); } .height180{ height: calc(180px * 0.6); } .height190{ height: calc(190px * 0.6); } .height200{ height: calc(200px * 0.6); } .height210{ height: calc(210px * 0.6); } .height220{ height: calc(220px * 0.6); } .height230{ height: calc(230px * 0.6); } .height240{ height: calc(240px * 0.6); } .height250{ height: calc(250px * 0.6); } } @media screen and (max-width: 768px) { .imagecover.break_on_tablet img{ top: 0px; } .text-mit-bild-box .break_on_tablet .under-text-handy .text, .text-mit-bild-box .break_on_tablet .above-text-handy .text{ width: 100% !important; } .text-mit-bild-box .break_on_tablet .under-text-handy .image, .text-mit-bild-box .break_on_tablet .above-text-handy .image{ width: 100% !important; position: relative; } .text-mit-bild-box .break_on_tablet .under-text-handy .image img, .text-mit-bild-box .break_on_tablet .above-text-handy .image img{ position: relative; top: 0px; } .text-mit-bild-box .break_on_tablet .image { width: 100% !important; } .text-mit-bild-box .break_on_tablet .text { width: 100% !important; } .hide-handy{ display: none; } .section-content{ padding-left: 50px; padding-right: 50px; } .cfullwidth{ margin-left: -50px; margin-right: -50px; } .ct300 { max-width: 300px; } .ct350 { max-width: 350px; } .ct400 { max-width: 400px; } .ct500 { max-width: 500px; } .ct600 { max-width: 600px; } .ct700 { max-width: 700px; } .ct800 { max-width: 800px; } .ct900 { max-width: 900px; } .ct950 { max-width: 950px; } .ct1000 { max-width: 1000px; } .ct1100 { max-width: 1100px; } .ct1200 { max-width: 1200px; } .ct1300 { max-width: 1300px; } .ct1400 { max-width: 1400px; } .ct1500 { max-width: 1500px; } .ct1600 { max-width: 1600px; } .ct1700 { max-width: 1700px; } .ct1800 { max-width: 1800px; } .ct1900 { max-width: 1900px; } .ct2000 { max-width: 2000px; } } @media screen and (max-width: 600px) { .section-content{ padding-left: 40px; padding-right: 40px; } } @media (max-width: 480px){ .spacer5 { height: calc(5px * 1); } .spacer10 { height: calc(10px * 0.5); } .spacer15 { height: calc(15px * 0.5); } .spacer20 { height: calc(20px * 0.5); } .spacer25 { height: calc(25px * 0.5); } .spacer30 { height: calc(30px * 0.5); } .spacer35 { height: calc(35px * 0.5); } .spacer40 { height: calc(40px * 0.5); } .spacer45 { height: calc(45px * 0.5); } .spacer50 { height: calc(50px * 0.5); } .spacer55 { height: calc(55px * 0.5); } .spacer60 { height: calc(60px * 0.5); } .spacer65 { height: calc(65px * 0.5); } .spacer70 { height: calc(70px * 0.5); } .spacer75 { height: calc(75px * 0.5); } .spacer80 { height: calc(80px * 0.5); } .spacer85 { height: calc(85px * 0.5); } .spacer90 { height: calc(90px * 0.5); } .spacer100 { height: calc(100px * 0.5); } .spacer110 { height: calc(110px * 0.5); } .spacer120 { height: calc(120px * 0.5); } .spacer130 { height: calc(130px * 0.5); } .spacer140 { height: calc(140px * 0.5); } .spacer150 { height: calc(150px * 0.5); } .spacer160 { height: calc(160px * 0.5); } .spacer170 { height: calc(170px * 0.5); } .spacer180 { height: calc(180px * 0.5); } .spacer190 { height: calc(190px * 0.5); } .spacer200 { height: calc(200px * 0.5); } .spacer210 { height: calc(210px * 0.5); } .spacer220 { height: calc(220px * 0.5); } .spacer230 { height: calc(230px * 0.5); } .spacer240 { height: calc(240px * 0.5); } .spacer250 { height: calc(250px * 0.5); } .spacer300 { height: calc(300px * 0.5); } .spacer350 { height: calc(350px * 0.5); } .spacer400 { height: calc(400px * 0.5); } .spacer450 { height: calc(450px * 0.5); } .spacer500 { height: calc(500px * 0.5); } .spacer550 { height: calc(550px * 0.5); } .spacer600 { height: calc(600px * 0.5); } .spacer650 { height: calc(650px * 0.5); } .spacer700 { height: calc(700px * 0.5); } .spacer750 { height: calc(750px * 0.5); } .spacer800 { height: calc(800px * 0.5); } .height5{ height: calc(5px * 0.5); } .height10{ height: calc(10px * 0.5); } .height20{ height: calc(20px * 0.5); } .height30{ height: calc(30px * 0.5); } .height40{ height: calc(40px * 0.5); } .height50{ height: calc(50px * 0.5); } .height60{ height: calc(60px * 0.5); } .height70{ height: calc(70px * 0.5); } .height80{ height: calc(80px * 0.5); } .height90{ height: calc(90px * 0.5); } .height100{ height: calc(100px * 0.5); } .height110{ height: calc(110px * 0.5); } .height120{ height: calc(120px * 0.5); } .height130{ height: calc(130px * 0.5); } .height140{ height: calc(140px * 0.5); } .height150{ height: calc(150px * 0.5); } .height160{ height: calc(160px * 0.5); } .height170{ height: calc(170px * 0.5); } .height180{ height: calc(180px * 0.5); } .height190{ height: calc(190px * 0.5); } .height200{ height: calc(200px * 0.5); } .height210{ height: calc(210px * 0.5); } .height220{ height: calc(220px * 0.5); } .height230{ height: calc(230px * 0.5); } .height240{ height: calc(240px * 0.5); } .height250{ height: calc(250px * 0.5); } .text-mit-bild-box .above-text-handy .image{ order: 1; } .text-mit-bild-box .above-text-handy .text{ order: 2; } .text-mit-bild-box .under-text-handy .image{ order: 2; } .text-mit-bild-box .under-text-handy .text{ order: 1; } .text-mit-bild-box .under-text-handy .text, .text-mit-bild-box .above-text-handy .text{ width: 100% !important; } .text-mit-bild-box .under-text-handy .image, .text-mit-bild-box .above-text-handy .image{ width: 100% !important; position: relative; } .text-mit-bild-box .under-text-handy .image img, .text-mit-bild-box .above-text-handy .image img{ position: relative; } .text-mit-bild-box .image { width: 100% !important; } .text-mit-bild-box .text { width: 100% !important; } .imagecover .image img{ position: relative; } #logo{ width: 80px; } .section-content{ padding-left: 20px; padding-right: 20px; } .cfullwidth{ margin-left: -20px; margin-right: -20px; } } @media (max-width: 1500px){ .section-content{ padding-left: 40px; padding-right: 40px; } .cfullwidth { margin-left: -40px; margin-right: -40px; } } @media (max-width: 1200px){ .section-content{ padding-left: 30px; padding-right: 30px; } .cfullwidth { margin-left: -30px; margin-right: -30px; } } @media (max-width: 768px){ .section-content{ padding-left: 20px; padding-right: 20px; } .cfullwidth { margin-left: -20px; margin-right: -20px; } } @media (max-width: 480px){ .section-content{ padding-left: 10px; padding-right: 10px; } .cfullwidth { margin-left: -10px; margin-right: -10px; } } /* Quelle: extratext-box.css */ .seo-content-section { padding: 100px 24px; } .extracontenttext-wrapper{ display: grid; grid-template-columns: 1fr 380px; gap: 70px; margin: 0 auto; align-items: start; } .seo-content-eyebrow, .seo-content-card-label { display: inline-block; margin-bottom: 18px; font-size: 13px; font-weight: 700; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; } .seo-content-highlight { position: relative; margin: 46px 0; padding: 0px 20px; border-left: 4px solid currentColor; font-size: 16px; font-weight: 600; line-height: 1.5; } .extracontenttext-sidebar { position: sticky; top: 130px; padding: 40px; border-radius: 10px; background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); color: #ffffff; border-radius: 24px; } .extracontenttext-card { } .extracontenttext-card h3 { margin: 0 0 28px; font-size: 30px; line-height: 1.2; } .extracontenttext-card ul { display: grid; gap: 17px; margin: 0; padding: 0; list-style: none; } .extracontenttext-card li { position: relative; padding-left: 30px; font-size: 16px; line-height: 1.5; hyphens: auto; } .extracontenttext-card li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 700; } .seo-content-services { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } .seo-content-services span { padding: 10px 15px; border: 1px solid #d9d9d9; border-radius: 999px; background: #ffffff; font-size: 14px; font-weight: 600; } .seo-content-cta { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 60px; padding: 32px; background: #ffffff; border-radius: 20px; } .seo-content-cta div { display: grid; gap: 5px; } .seo-content-cta strong { font-size: 21px; } .seo-content-cta span { font-size: 15px; line-height: 1.5; } .seo-content-button { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-height: 52px; padding: 14px 24px; background: #111111; color: #ffffff; border-radius: 999px; text-decoration: none; font-weight: 700; transition: transform 0.2s ease, opacity 0.2s ease; } .seo-content-button:hover { transform: translateY(-2px); opacity: 0.88; } @media (max-width: 1024px) { } @media (max-width: 950px) { .extracontenttext-wrapper{ grid-template-columns: 1fr; gap: 0px; } } @media (max-width: 600px) { .extracontenttext-card { padding: 30px 24px; border-radius: 18px; } } /* Quelle: storytelling-box.css */ /* ======================================== STORY WRAPPER / SCROLLSTRECKE ======================================== */ .wm-story { position: relative; height: 300vh; background: #0d0a0f; color: #fff; } /* ======================================== SICHTBARER STORY-BEREICH ======================================== */ .wm-story__sticky { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; overflow: hidden; display: flex; align-items: center; background: #0d0a0f; } /* während der Story fixieren */ .wm-story__sticky.is-fixed { position: fixed; top: 0; left: 0; width: 100%; z-index: 20; } /* am Ende der Story */ .wm-story__sticky.is-bottom { position: absolute; top: auto; bottom: 0; } /* ======================================== INHALT ======================================== */ .wm-story__inner { position: relative; width: 100%; height: 100%; max-width: 1500px; margin: 0 auto; padding: 0 6vw; } /* ======================================== STORY ITEMS ======================================== */ .wm-story__item { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 6vw; opacity: 0; visibility: hidden; transform: translateY(50px); filter: blur(8px); pointer-events: none; transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1), filter .6s ease; } .wm-story__item.is-active { opacity: 1; visibility: visible; transform: translateY(0); filter: blur(0); } /* ======================================== TEXT ======================================== */ .wm-story__text { width: 100%; max-width: 1250px; font-family: "Poppins", sans-serif; font-size: clamp(45px, 5.3vw, 100px); line-height: 1.08; font-weight: 400; letter-spacing: -0.04em; } .wm-story__text strong { color: #eacda3; font-weight: 600; } .wm-story__text .story-small { display: inline-block; margin-top: 25px; font-size: clamp(18px, 1.5vw, 26px); line-height: 1.4; letter-spacing: 0; color: rgba(255,255,255,.65); } /* ======================================== PROGRESS ======================================== */ .wm-story__progress { position: absolute; left: 6vw; right: 6vw; bottom: 40px; height: 2px; background: rgba(255,255,255,.15); } .wm-story__progress-bar { width: 0; height: 100%; background: #fff; } /* ======================================== MOBILE ======================================== */ @media (max-width: 768px) { .wm-story { height: 300vh; } .wm-story__inner { padding-left: 25px; padding-right: 25px; } .wm-story__item { padding-left: 25px; padding-right: 25px; } .wm-story__text { font-size: clamp(38px, 11vw, 65px); line-height: 1.05; } .wm-story__progress { left: 25px; right: 25px; bottom: 25px; } } /* Quelle: swiper-bundle.min.css */ /** * Swiper 12.1.4 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2026 Vladimir Kharlampidi * * Released under the MIT License * * Released on: April 29, 2026 */ :root{--swiper-theme-color:#007aff}:host{display:block;margin-left:auto;margin-right:auto;position:relative;z-index:1}.swiper{display:block;list-style:none;margin-left:auto;margin-right:auto;overflow:hidden;padding:0;position:relative;z-index:1}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{box-sizing:initial;display:flex;height:100%;position:relative;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);width:100%;z-index:1}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translateZ(0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{display:block;flex-shrink:0;height:100%;position:relative;transition-property:transform;width:100%}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{backface-visibility:hidden;transform:translateZ(0)}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px;.swiper-cube-shadow,.swiper-slide{transform-style:preserve-3d}}.swiper-css-mode{>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none}}>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}&.swiper-horizontal{>.swiper-wrapper{scroll-snap-type:x mandatory}>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-slides-offset-before);scroll-margin-inline-start:var(--swiper-slides-offset-before)}>.swiper-wrapper>.swiper-slide:last-child{margin-inline-end:var(--swiper-slides-offset-after)}}&.swiper-vertical{>.swiper-wrapper{scroll-snap-type:y mandatory}>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-slides-offset-before);scroll-margin-block-start:var(--swiper-slides-offset-before)}>.swiper-wrapper>.swiper-slide:last-child{margin-block-end:var(--swiper-slides-offset-after)}}&.swiper-free-mode{>.swiper-wrapper{scroll-snap-type:none}>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}}&.swiper-centered{>.swiper-wrapper:before{content:"";flex-shrink:0;order:9999}>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}}&.swiper-centered.swiper-horizontal{>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}>.swiper-wrapper:before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}}&.swiper-centered.swiper-vertical{>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}>.swiper-wrapper:before{height:var(--swiper-centered-offset-after);min-width:1px;width:100%}}}.swiper-3d{.swiper-slide-shadow,.swiper-slide-shadow-bottom,.swiper-slide-shadow-left,.swiper-slide-shadow-right,.swiper-slide-shadow-top{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:10}.swiper-slide-shadow{background:#00000026}.swiper-slide-shadow-left{background-image:linear-gradient(270deg,#00000080,#0000)}.swiper-slide-shadow-right{background-image:linear-gradient(90deg,#00000080,#0000)}.swiper-slide-shadow-top{background-image:linear-gradient(0deg,#00000080,#0000)}.swiper-slide-shadow-bottom{background-image:linear-gradient(180deg,#00000080,#0000)}}.swiper-lazy-preloader{border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top:4px solid #0000;box-sizing:border-box;height:42px;left:50%;margin-left:-21px;margin-top:-21px;position:absolute;top:50%;transform-origin:50%;width:42px;z-index:10}.swiper-watch-progress .swiper-slide-visible,.swiper:not(.swiper-watch-progress){.swiper-lazy-preloader{animation:swiper-preloader-spin 1s linear infinite}}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode{.swiper-wrapper:after{content:"";left:0;pointer-events:none;position:absolute;top:0}}.swiper-virtual.swiper-css-mode.swiper-horizontal{.swiper-wrapper:after{height:1px;width:var(--swiper-virtual-size)}}.swiper-virtual.swiper-css-mode.swiper-vertical{.swiper-wrapper:after{height:var(--swiper-virtual-size);width:1px}}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{align-items:center;color:var(--swiper-navigation-color,var(--swiper-theme-color));cursor:pointer;display:flex;height:var(--swiper-navigation-size);justify-content:center;position:absolute;width:var(--swiper-navigation-size);z-index:10;&.swiper-button-disabled{cursor:auto;opacity:.35;pointer-events:none}&.swiper-button-hidden{cursor:auto;opacity:0;pointer-events:none}.swiper-navigation-disabled &{display:none!important}::slotted(svg),svg{height:100%;object-fit:contain;transform-origin:center;width:100%;fill:currentColor;pointer-events:none}}.swiper-button-lock{display:none}.swiper-button-next,.swiper-button-prev{margin-top:calc(0px - var(--swiper-navigation-size)/2);top:var(--swiper-navigation-top-offset,50%)}.swiper-button-prev{left:var(--swiper-navigation-sides-offset,4px);right:auto;.swiper-navigation-icon,::slotted(.swiper-navigation-icon){transform:rotate(180deg)}}.swiper-button-next{left:auto;right:var(--swiper-navigation-sides-offset,4px)}.swiper-horizontal{.swiper-button-next,.swiper-button-prev,~.swiper-button-next,~.swiper-button-prev{margin-left:0;margin-top:calc(0px - var(--swiper-navigation-size)/2);top:var(--swiper-navigation-top-offset,50%)}&.swiper-rtl .swiper-button-next,&.swiper-rtl~.swiper-button-next,&~.swiper-button-prev,.swiper-button-prev{left:var(--swiper-navigation-sides-offset,4px);right:auto}&.swiper-rtl .swiper-button-prev,&.swiper-rtl~.swiper-button-prev,&~.swiper-button-next,.swiper-button-next{left:auto;right:var(--swiper-navigation-sides-offset,4px)}&.swiper-rtl .swiper-button-next,&.swiper-rtl~.swiper-button-next,&~.swiper-button-prev,.swiper-button-prev{.swiper-navigation-icon,::slotted(.swiper-navigation-icon){transform:rotate(180deg)}}&.swiper-rtl .swiper-button-prev,&.swiper-rtl~.swiper-button-prev{.swiper-navigation-icon,::slotted(.swiper-navigation-icon){transform:rotate(0deg)}}}.swiper-vertical{.swiper-button-next,.swiper-button-prev,~.swiper-button-next,~.swiper-button-prev{left:var(--swiper-navigation-top-offset,50%);margin-left:calc(0px - var(--swiper-navigation-size)/2);margin-top:0;right:auto}.swiper-button-prev,~.swiper-button-prev{bottom:auto;top:var(--swiper-navigation-sides-offset,4px);.swiper-navigation-icon,::slotted(.swiper-navigation-icon){transform:rotate(-90deg)}}.swiper-button-next,~.swiper-button-next{bottom:var(--swiper-navigation-sides-offset,4px);top:auto;.swiper-navigation-icon,::slotted(.swiper-navigation-icon){transform:rotate(90deg)}}}.swiper-pagination{position:absolute;text-align:center;transform:translateZ(0);transition:opacity .3s;z-index:10;&.swiper-pagination-hidden{opacity:0}&.swiper-pagination-disabled,.swiper-pagination-disabled>&{display:none!important}}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:var(--swiper-pagination-bottom,8px);left:0;top:var(--swiper-pagination-top,auto);width:100%}.swiper-pagination-bullets-dynamic{font-size:0;overflow:hidden;.swiper-pagination-bullet{position:relative;transform:scale(.33)}.swiper-pagination-bullet-active,.swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullet-active-next-next{transform:scale(.33)}}.swiper-pagination-bullet{background:var(--swiper-pagination-bullet-inactive-color,#000);border-radius:var(--swiper-pagination-bullet-border-radius,50%);display:inline-block;height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));opacity:var(--swiper-pagination-bullet-inactive-opacity,.2);width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));button&{appearance:none;border:none;box-shadow:none;margin:0;padding:0}.swiper-pagination-clickable &{cursor:pointer}&:only-child{display:none!important}}.swiper-pagination-bullet-active{background:var(--swiper-pagination-color,var(--swiper-theme-color));opacity:var(--swiper-pagination-bullet-opacity,1)}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{left:var(--swiper-pagination-left,auto);right:var(--swiper-pagination-right,8px);top:50%;transform:translate3d(0,-50%,0);.swiper-pagination-bullet{display:block;margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0}&.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px;.swiper-pagination-bullet{display:inline-block;transition:transform .2s,top .2s}}}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-horizontal.swiper-pagination-bullets{.swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}&.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap;.swiper-pagination-bullet{transition:transform .2s,left .2s}}}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:transform .2s,right .2s}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color,inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color,#00000040);position:absolute;.swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));height:100%;left:0;position:absolute;top:0;transform:scale(0);transform-origin:left top;width:100%}.swiper-rtl & .swiper-pagination-progressbar-fill{transform-origin:right top}&.swiper-pagination-horizontal,&.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-horizontal>&,.swiper-vertical>&.swiper-pagination-progressbar-opposite{height:var(--swiper-pagination-progressbar-size,4px);left:0;top:0;width:100%}&.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,&.swiper-pagination-vertical,.swiper-horizontal>&.swiper-pagination-progressbar-opposite,.swiper-vertical>&{height:100%;left:0;top:0;width:var(--swiper-pagination-progressbar-size,4px)}}.swiper-pagination-lock{display:none}.swiper-scrollbar{background:var(--swiper-scrollbar-bg-color,#0000001a);border-radius:var(--swiper-scrollbar-border-radius,10px);position:relative;touch-action:none;&.swiper-scrollbar-disabled,.swiper-scrollbar-disabled>&{display:none!important}&.swiper-scrollbar-horizontal,.swiper-horizontal>&{bottom:var(--swiper-scrollbar-bottom,4px);height:var(--swiper-scrollbar-size,4px);left:var(--swiper-scrollbar-sides-offset,1%);position:absolute;top:var(--swiper-scrollbar-top,auto);width:calc(100% - var(--swiper-scrollbar-sides-offset, 1%)*2);z-index:50}&.swiper-scrollbar-vertical,.swiper-vertical>&{height:calc(100% - var(--swiper-scrollbar-sides-offset, 1%)*2);left:var(--swiper-scrollbar-left,auto);position:absolute;right:var(--swiper-scrollbar-right,4px);top:var(--swiper-scrollbar-sides-offset,1%);width:var(--swiper-scrollbar-size,4px);z-index:50}}.swiper-scrollbar-drag{background:var(--swiper-scrollbar-drag-bg-color,#00000080);border-radius:var(--swiper-scrollbar-border-radius,10px);height:100%;left:0;position:relative;top:0;width:100%}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{align-items:center;display:flex;height:100%;justify-content:center;text-align:center;width:100%;>canvas,>img,>svg{max-height:100%;max-width:100%;object-fit:contain}}.swiper-slide-zoomed{cursor:move;touch-action:none}.swiper .swiper-notification{left:0;opacity:0;pointer-events:none;position:absolute;top:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{margin:0 auto;transition-timing-function:ease-out}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-direction:column;flex-wrap:wrap}.swiper-fade{&.swiper-free-mode{.swiper-slide{transition-timing-function:ease-out}}.swiper-slide{pointer-events:none;transition-property:opacity;.swiper-slide{pointer-events:none}}.swiper-slide-active{pointer-events:auto;& .swiper-slide-active{pointer-events:auto}}}.swiper.swiper-cube{overflow:visible}.swiper-cube{.swiper-slide{backface-visibility:hidden;height:100%;pointer-events:none;transform-origin:0 0;visibility:hidden;width:100%;z-index:1;.swiper-slide{pointer-events:none}}&.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-slide-active{&,& .swiper-slide-active{pointer-events:auto}}.swiper-slide-active,.swiper-slide-next,.swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube-shadow{bottom:0;height:100%;left:0;opacity:.6;position:absolute;width:100%;z-index:0;&:before{background:#000;bottom:0;content:"";filter:blur(50px);left:0;position:absolute;right:0;top:0}}}.swiper-cube{.swiper-slide-next+.swiper-slide{pointer-events:auto;visibility:visible}}.swiper-cube{.swiper-slide-shadow-cube.swiper-slide-shadow-bottom,.swiper-slide-shadow-cube.swiper-slide-shadow-left,.swiper-slide-shadow-cube.swiper-slide-shadow-right,.swiper-slide-shadow-cube.swiper-slide-shadow-top{backface-visibility:hidden;z-index:0}}.swiper.swiper-flip{overflow:visible}.swiper-flip{.swiper-slide{backface-visibility:hidden;pointer-events:none;z-index:1;.swiper-slide{pointer-events:none}}.swiper-slide-active{&,& .swiper-slide-active{pointer-events:auto}}}.swiper-flip{.swiper-slide-shadow-flip.swiper-slide-shadow-bottom,.swiper-slide-shadow-flip.swiper-slide-shadow-left,.swiper-slide-shadow-flip.swiper-slide-shadow-right,.swiper-slide-shadow-flip.swiper-slide-shadow-top{backface-visibility:hidden;z-index:0}}.swiper-creative{.swiper-slide{backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}}.swiper.swiper-cards{overflow:visible}.swiper-cards{.swiper-slide{backface-visibility:hidden;overflow:hidden;transform-origin:center bottom}} /* WM CSS BUNDLE END */ @font-face { font-family: "Poppins"; src: url("fonts/Poppins-SemiBold.woff2"); font-weight: 600; font-display: swap; } @font-face { font-family: "Poppins"; src: url("fonts/Poppins-Regular.woff2"); font-weight: 400; font-display: swap; } body { font-family: "Poppins", system-ui, sans-serif; font-weight: 400; } hr{ width: 100%; } h1{ font-weight: 600; letter-spacing: 1px !important; } h2, h3, h4, h5, h6{ font-weight: 400; letter-spacing: 1px !important; } *:hover{ transition: all 0.5s; } hr.spacermasthead{ height: 70px; } #masthead { height: 80px; width: 100%; position: fixed !important; top: 0 !important; left: 0; z-index: 99999; /* Permalink - use to edit and share this gradient. Permalink - Zum Bearbeiten und Teilen dieses Verlaufs verwenden: https://colorzilla.com/gradient-editor/#1b161e+46,1b161e+100&0.95+0,0.6+74,0+100 */ background: linear-gradient(to bottom, rgba(27,22,30,0.99) 0%,rgba(27,22,30,0.90) 46%,rgba(27,22,30,0.7) 74%,rgba(27,22,30,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ transform: translateY(0); opacity: 1; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease; } #masthead.masthead-hidden { transform: translateY(-110%); opacity: 0; background: linear-gradient( 45deg, rgba(14, 11, 16, 0.8) 0%, rgba(14, 11, 16, 0.8) 100% ); border-bottom: 1px solid rgba(255,255,255,0.05); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } #masthead.sticky{ position: absolute; top: 0px; left: 0px; } a{ cursor: url(https://wolpermedia.de/wp-content/themes/flexawesomebygalano/images/handcursor.svg), auto; } #page, #main, #primary { overflow: visible; !important /* Standard, aber explizit hier */ } .nav-logo{ width: 78px; display: block; padding-top: 10px; padding-left: 20px; position: relative; z-index: 1; background: #fff; height: 50px; position: fixed; left: 0px; top: 0px; -webkit-mask-image: url(https://wolpermedia.de/wp-content/uploads/2023/11/wolpermedia-wolpi.svg); mask-image: url(https://wolpermedia.de/wp-content/uploads/2023/11/wolpermedia-wolpi.svg); -webkit-mask-size: contain; mask-size:contain; -webkit-mask-position: right bottom; mask-position: right bottom; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; top: 10px; display: none; } #masthead #logo{ width: 75px; display: block; padding-top: 10px; padding-left: 20px; position: relative; } #logo img{ display: block; width: 100%; } h1.wp-block-post-title{ color: #000 !important; } h1.hyphens, h2.hyphens, h3.hyphens, h4.hyphens, h5.hyphens, h6.hyphens{ hyphens: auto; } .padding60{ padding: 60px; } .leistungcarousel .box{ overflow: hidden; } .movecontainer{ margin-top: -130px; } .nav-bgvideo{ position: absolute; width: 100%; height: 100%; top: 0px; object-fit: cover; opacity: 0.7; -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ filter: grayscale(100%); mix-blend-mode: multiply; } .swiper-button-prev, .swiper-button-next{ width: 40px; height: 40px; } .swiper-button-next, .swiper-container-rtl .swiper-button-prev{ background: url(images/arrow-slider-next.svg) no-repeat; } .swiper-button-prev, .swiper-container-rtl .swiper-button-next{ background: url(images/arrow-slider.svg) no-repeat; } .swiper-button-prev:after, .swiper-button-next:after{ text-indent: -9999px; background: red; } .header-logo-left #logo, .header-logo-right #logo{ background: #fff; margin: auto auto; margin-top: -7px; } .header-logo-left #logo img, .header-logo-right #logo img{ padding-left: 10px; padding-right: 10px; } .header-logo-left #logo, .header-logo-right #logo{ height: 110px !important; } @keyframes scroll { 0% { transform: translateX(0px); } 100% { transform: translateX(calc(-355px * 10)); } } @keyframes scroll2 { 0% { transform: translateX(0px); } 100% { transform: translateX(calc(-255px * 5)); } } .agency-facts .section-content{ position: relative; z-index: 10; } .agency-texts .image { border-radius: 8px; overflow: hidden; } .container-box .section-content{ padding-left: 0px; padding-right: 0px; } .container-box{ padding-left: 60px; padding-right: 60px; } .container-box .container-box-content{ max-width: 1600px; margin: auto auto; } .container-box .cfullwidth{ margin-left: 0px; margin-right: 0px; } .btn-primary.btn-cta{ background: linear-gradient(45deg, rgba(207,7,126,1) 0%,rgba(240,126,35,1) 100%); border: none; transition: transform .25s ease, box-shadow .25s ease; } .btn-primary.btn-cta:hover{ color: #fff; background: linear-gradient(45deg, rgba(207,7,126,1) 0%,rgba(240,126,35,1) 100%); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .18); } .btn-primary.btn-cta-white{ background: #fff; color: #000; } .btn-primary.btn-cta:hover{ border: none; } .btn-primary{ border: 1px solid #fff; padding: 14px 30px; font-size: 16px; color: #fff; border-radius: 9999px; background: transparent; font-family: Poppins; font-weight: 400; line-height: 120%; letter-spacing: 0.5px; margin-right: 10px; } .btn-primary:hover{ background: #fff; color: #000; border: 1px solid #fff; } .btn-primary::after { content: "→"; } .btn-primary.arrow-down::after { content: "↓"; font-size: 18px; } .btn-small{ font-size: 16px; color: #fff; padding: 0px; border-radius: 9999px; background: transparent; font-family: Poppins; font-weight: 400; line-height: 120%; letter-spacing: 0.5px; text-align: left; } .btn-vorteile{ font-size: 16px; color: #fff; padding: 0px; border-radius: 9999px; background: transparent; font-family: Poppins; font-weight: 400; line-height: 120%; letter-spacing: 0.5px; text-align: left; } .vorteile-box .image { width: 65px; margin-left: 0px !important; background: rgba(210,82,91,0.15); padding: 12px; border-radius: 9999px; margin-bottom: 30px !important; mix-blend-mode: screen; } .vorteile-box{ hyphens: auto; } .vorteile-box article{ height: 100%; } .vorteile-box .item article .box{ border-radius: 8px; } .card-link{ display:block; height:100%; color:inherit; text-decoration:none; } .card-link article{ height:100%; } .card-link .arrow{ color: #fff; font-size: 25px; } .card-link:hover { transform: translateY(-6px); border-color: rgba(255,255,255,0.12); box-shadow: 0 12px 40px rgba(0,0,0,0.45), 0 0 40px rgba(255,90,130,0.08); background: linear-gradient( 45deg, rgba(63,45,53,0.2) 0%, rgba(63,45,53,0.2) 100% ); } .whiteglas{ background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); } .multi-button-wrapper .basic-button{ border: 1px solid #fff; color: #fff; background: Transparent; } .multi-button-wrapper{ gap: 10px; justify-content: flex-start !important; line-height: 110%; } .multi-button-wrapper .basic-button{ border: 1px solid #fff; color: #fff; } .multi-button-wrapper .basic-button:hover{ background: #fff; color: #000; } .multi-button-wrapper .cta-button-pink{ border: 2px solid #D72467; color: #D72467; } .multi-button-wrapper .cta-button-pink:hover{ color: #fff; background: #D72467; } .btn-primary { display: inline-flex; align-items: center; gap: 12px; padding: 18px 30px; border-radius: 12px; background: #fff; color: #fff; text-decoration: none; font-weight: 600; transition: all 0.3s ease; background: Transparent; border-radius: 999px; } .btn-primary.small { padding: 10px 20px; } .btn-primary:hover { transform: translateY(-2px); background: #f5f5f5; } .btn-primary::after { content: "→"; font-size: 18px; } .padding40{ padding: 40px; } .padding40{ padding: 20px; } @media screen and (max-width: 768px) { #colophon .footer-newsletter .footer-newsletter-header{ max-width: 300px; margin: auto auto; font-size: 35px; } .slide-track { width: calc(80px * 20); } .slide-track2 { width: calc(80px * 15); } .slide { width: 80px; } @keyframes scroll { 0% { transform: translateX(0px); } 100% { transform: translateX(calc(-80px * 10)); } } @keyframes scroll2 { 0% { transform: translateX(0px); } 100% { transform: translateX(calc(-80px * 5)); } } } #socialmedia-box{ justify-content: center; } .text-mit-bild-box .spaltennummer{ display: flex; flex-wrap: wrap; } .text-mit-bild-box .nummer{ font-size: 74px; line-height: 100%; width: 65px; margin-top: -26px; color: #F0C526; } .text-mit-bild-box .spaltennummer .textcontainer{ width: calc(100% - 65px); } .home-agency-text .item{ /* Permalink - use to edit and share this gradient. Permalink - Zum Bearbeiten und Teilen dieses Verlaufs verwenden: https://colorzilla.com/gradient-editor/#111111+0,111111+100&0.99+0,0.9+100 */ background: linear-gradient(to bottom, rgba(17,17,17,0.99) 0%,rgba(17,17,17,0.9) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ max-width: 800px; margin: auto auto; } .leistungen-home .spaltenbild{ width: 90px; position: absolute; right: 40px; top: -30px; } .leistungen-home h2.spalten-titel{ padding-right: calc(100px * 1.0); } .home-agentur .backgroundvideo { position: absolute; width: 800px; height: auto; object-fit: contain; right: 0; } .home-agentur .item-content, .home-agentur .item-content .text{ width: 650px; } .home-agentur .flexible-content-aufzahlung.flexible-flex-wrap{ padding: 10px; background: #fff; border-radius: 10px; } .nummer{ display: block !important; } .nummer[data-aos^="fade"][data-aos^="fade"] { opacity: 1.0 !important; } .borderradius .item-content{ border-radius: 8px; } .carousel-box .flexibleheight img{ object-fit: contain !important; } .progress-bar-wrapper { position: fixed; top: 0; z-index: 10000; width: 100%; } .progress-container { width: 100%; height: 4px; } .progress-bar { height: 4px; background: #04AA6D; width: 0%; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00b9ed+1,f0c526+77 */ background: #00b9ed; /* Old browsers */ background: -moz-linear-gradient(45deg, #00b9ed 1%, #f0c526 77%); /* FF3.6-15 */ background: -webkit-linear-gradient(45deg, #00b9ed 1%,#f0c526 77%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(45deg, #00b9ed 1%,#f0c526 77%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b9ed', endColorstr='#f0c526',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } .kompass-parallex{ position: absolute; left: -900px; top: -100%; width: 800px; opacity: 0.5; } .diver-parallex{ position: absolute; right: -550px; top: -20%; width: 550px; opacity: 0.5; transform: rotate(90deg); } .reviews-box .spaltenbild{ width: 250px; height: 250px; margin-top: -220px !important; position: relative; z-index: 5; margin-left: 0px !important; } .reviews-box .spaltenbild img{ border-radius: 9999px; display: block; height: 100%; width: 100%; object-fit: cover; border: 8px solid rgba(255,255,255,0.6); box-shadow: 0 0 10px rgba(0,0,0,0.3); } .reviews-box .text{ position: relative; margin-top: 100px; } .reviews-box .text:before{ content: ""; position: absolute; width: 157px; height: 157px; top: -57px; background: url(images/quotation-mark.svg) no-repeat center center; background-size: contain; left: 350px; } /* .reviews-box .text:after{ content: ""; position: absolute; width: 80px; height: 80px; bottom: -50px; right: 80px; background: url(images/talking-bubble.svg) no-repeat right bottom; z-index: 3; }*/ .reviews-box .item{ padding-bottom: 100px !important; } .reviews-box .text{ border-radius: 8px; } .reviews-box .item-content{ padding-top: 20px; } .reviews-box .spalten-titel{ /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f2b826+0,f0c526+100 */ background: rgb(242,184,38); /* Old browsers */ background: -moz-linear-gradient(left, rgba(242,184,38,1) 0%, rgba(240,197,38,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(242,184,38,1) 0%,rgba(240,197,38,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(242,184,38,1) 0%,rgba(240,197,38,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2b826', endColorstr='#f0c526',GradientType=1 ); /* IE6-9 */ margin-top: -40px; z-index: 2; color: #033557 !important; padding: 15px 60px 10px 70px; width: calc(100% - 350px + 15px); margin-left: -60px; position: relative; } .reviews-box .spalten-titel:after{ content: ""; width: 50px; height: 100%; position: absolute; right: -49px; background: url(images/date-arrow-right.svg) no-repeat ; background-size: 100% 100%; top: 0px; } /* .reviews-box .spalten-titel:before{ content: ""; width: 10px; height: 10px; position: absolute; left: 0px; bottom: -10px; background: url(images/date-arrow-left-small.svg) no-repeat; }*/ .reviews-box .text-content{ position: relative; z-index: 10; } .reviews-box .swiper-arrows{ position: absolute; right: 0px; top: 60px; width: 100px; height: 45px; } .reviews-box .arrow-divider{ height: 30px; width: 1px; background: #fff; position: absolute; left: 50%; transform: translateX(-50%); top: 7px; } .reviews-box .swiper-button-prev:after, .swiper-button-next:after{ font-size: 23px; } .reviews-box .swiper-button-prev, .reviews-box .swiper-button-next{ transition: all 0.3s; top: 0px; margin-top: 0px; } .reviews-box .swiper-button-prev:hover, .reviews-box .swiper-button-next:hover{ } .reviews-box .firmenlogo{ width: 240px; height: 80px; background: #052435; padding: 15px 30px; /*position: absolute;*/ z-index: 5; left: 50%; /* transform: translateX(-50%); */ /* top: 280px; */ border-radius: 5px; opacity: 0.95; margin-top: 10px; } .reviews-box .firmenlogo img{ display: block; width: 100%; height: 100%; object-fit: contain; } .header-logo-left #logo{ left: 0px; } .projekte-box .spalten-titel{ font-family: Poppins; margin-bottom: 22px; width: 100%; text-align: left !important; right: 0px; bottom: 0px; line-height: 130%; color: #fff; font-size: 18px; text-shadow: 0 0 10px rgba(0,0,0,0.3); /* background: linear-gradient(to bottom, rgba(40, 35, 40, 1) 0%, rgba(16, 16, 16, 1) 100%); */ } .projekte-box .text-content{ border-radius: 8px; background: linear-gradient(45deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); padding: 30px 30px 25px 30px; } .projekte-box .section-content .content{ padding-left: 0px !important; padding-right: 0px !important; } .projekte-box .box{ border-radius: 1em; } .projekte-box .text{ color: #000; width: 100%; z-index: 10; bottom: 0px; } .projekte-box .item .spaltenbild img{ transform: scale(1.0); } .projekte-box .item .spaltenbild img, .projekte-box .item .spaltenbild, .projekte-box .item{ transition: all 0.5s; overflow: hidden; } .projekte-box .item:hover .spaltenbild img{ transform: scale(1.1); } .projekte-box .spalten-titel h4{ margin-bottom: 0px !important; } .projekte-box h4.spalten-titel a, .projekte-box h4.spalten-titel{ margin-bottom: 0px !important; } .projekte-box .spalten-titel:before { content: ""; position: absolute; top: -2px; left: -2px; width: 0; height: 0; background: transparent; border: 2px solid transparent; } .projekte-box .arrow{ color: #fff; line-height: 100%; font-size: 25px; } .projekte-box ul { list-style: none; padding-left: 0; margin-bottom: 20px; } .projekte-box ul li { position: relative; color: #999999; font-size: 14px; padding-bottom: 10px; line-height: 120%; } .featuredprojekte .spalten-titel{ font-weight: 600; } .featuredprojekte .projekte-swiper { width: 100%; height: 80vh; overflow: hidden; } .featuredprojekte .swiper-wrapper { width: 100%; height: 100%; } .featuredprojekte .swiper-slide { width: 100% !important; height: 100%; } .featuredprojekte .swiper-slide .item { display: block; width: 100%; height: 100%; } .featuredprojekte .swiper-slide .item-content { position: relative; width: 100% !important; max-width: none !important; height: 100%; margin: 0 !important; overflow: hidden; } .featuredprojekte .swiper-slide .image { position: absolute; inset: 0; width: 100% !important; max-width: none !important; height: 100% !important; } .featuredprojekte .spalten-titel{ color: #000; } .featuredprojekte.projekte-box .spalten-titel{ color: #000 !important; text-shadow: none !important; } .featuredprojekte.projekte-box .text-content{ background: linear-gradient(45deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.8) 100%); } .featuredprojekte .swiper-slide .image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; } .featuredprojekte .swiper-slide .text { position: absolute; z-index: 2; left: 3vw; bottom: 3vw; width: 420px; max-width: calc(100% - 10vw); } .featuredprojekte .swiper-button-prev, .featuredprojekte .swiper-button-next { margin: 0; color: #111; display: flex; align-items: center; justify-content: center; z-index: 20; } .featuredprojekte .swiper-arrows-wrapper{ position: absolute; right: 40px; bottom: 30px; display: block; z-index: 1; } .featuredprojekte .swiper-button-next{ margin-left: 5px !important; } .featuredprojekte .swiper-button-prev{ left: 0px !important; } .featuredprojekte .swiper-button-prev, .featuredprojekte .swiper-button-next{ position: relative; background: rgba(255,255,255,0.6); border: 2px solid #fff; display: inline-block; width: 45px; height: 45px; border-radius: 9999px; margin-top: 0px !important; margin-bottom: 0px !important; } .featuredprojekte .swiper-button-prev:before, .featuredprojekte .swiper-button-next:before{ top: 3px; font-size: 22px; position: absolute; } .featuredprojekte .swiper-button-prev:before{ content: "➞"; left: 10px; transform: rotate(180deg); } .featuredprojekte .swiper-button-next:before{ content: "➞"; left: 10px; } .featuredprojekte .swiper-button-prev:hover, .featuredprojekte .swiper-button-next:hover{ background: #fff; transform: scale(1.05); } .featuredprojekte .spaltenbild{ padding-top: 0px !important; } .featuredprojekte li.project-todo{ color: #0E0B10; font-size: 15px; } .featuredprojekte li.project-todo:before{ content: "✔"; display: inline-block; mask: none; } .featuredprojekte.projekte-box .arrow{ color: #000; } .featuredprojekte.projekte-box .spalten-titel:after{ background: linear-gradient(to right, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0.05) 100%); } @keyframes borderanimate { 0% { width: 0; height: 0; border-top-color: black; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; } 50% { width: 100%; height: 0; border-top-color: black; border-right-color: black; border-bottom-color: transparent; border-left-color: transparent; } 100% { width: 100%; height: 100%; border-top-color: black; border-right-color: black; border-bottom-color: transparent; border-left-color: transparent; } } .projekte-box .spalten-titel:after { content: ""; display: block; height: 2px; width: 50px; /* Permalink - use to edit and share this gradient. Permalink - Zum Bearbeiten und Teilen dieses Verlaufs verwenden: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0+100;White+to+Transparent */ background: linear-gradient(to right, rgba(255,255,255,0.4) 0%,rgba(255,255,255,0.05) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ margin-top: 10px; } @keyframes borderanimate2 { 0% { width: 0; height: 0; border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: black; } 50% { width: 0; height: 100%; border-top-color: transparent; border-right-color: transparent; border-bottom-color: black; border-left-color: black; } 100% { width: 100%; height: 100%; border-top-color: transparent; border-right-color: transparent; border-bottom-color: black; border-left-color: black; } } @keyframes zoomtext { 0% { transform: scale(0.6); } 100% { transform: scale(1); } } h1{ /* background: -webkit-linear-gradient(#C42D6C, #ED842D); -webkit-background-clip: text; -webkit-text-fill-color: transparent;*/ } h1{ } h1 .anim:nth-child(odd){ position: relative; top: -30px; opacity: 0; animation: slideinposition 0.2s linear forwards; } h1 .anim:nth-child(even){ position: relative; top: 30px; opacity: 0; animation: slideinposition 0.2s linear forwards; } @keyframes slideinposition { to { top: 0px; opacity: 1; } } .icon-on-the-left .item .item-content{ display: flex; flex-wrap: wrap; align-items: flex-start; } .icon-on-the-left .text { width: calc(100% - 90px); padding-left: 40px; } .icon-on-the-left .spaltenbild{ margin-top: 0px !important; } .svgdrawing path{ stroke-dasharray: 500; stroke-dashoffset: 500; } .svgdrawing.active path{ animation: draw 5s linear forwards; } @keyframes draw { to { stroke-dashoffset: 0; } } .gradienttitel h1, .gradienttitel h2, .gradienttitel h3, .gradienttitel h4, .gradienttitel h5, .gradienttitel h6{ } /* @keyframes textclip { to { background-position: left center; } } @keyframes scaler { to { transform: scale(1); } }*/ .kontaktformular-box .wpcf7-not-valid-tip{ font-weight: 400; } .contactform-help textarea, .contactform-help input[type="text"], .contactform-help input[type="tel"], .contactform-help input[type="email"]{ border-width: 2px; border-style: solid; border-image: linear-gradient(to right, #EC8C39, #F53270) 1; padding-top: 15px; padding-bottom: 15px; padding-left: 65px; position: relative; } form .width50, form .width100{ margin-right: 20px; margin-left: 20px; margin-bottom: 40px; } form .width50{ width: calc(50% - 50px); } form .width100{ width: calc(100% - 50px); } .contactform-help span[data-name="your-company"], .contactform-help span[data-name="your-phone"], .contactform-help span[data-name="your-name"], .contactform-help span[data-name="your-email"], .contactform-help span[data-name="your-message"]{ position: relative; } .contactform-help span[data-name="your-company"]:before, .contactform-help span[data-name="your-name"]:before, .contactform-help span[data-name="your-phone"]:before, .contactform-help span[data-name="your-email"]:before, .contactform-help span[data-name="your-message"]:before{ content: ""; position: absolute; width: 35px; height: 35px; background: red; top: 20px; z-index: 1; left: 20px; } .contactform-help strong{ font-size: 15px; letter-spacing: 2px; text-transform: uppercase; color: #D24B56; } .contactform-help span[data-name="your-company"]:before{ -webkit-mask:url(images/icon-company.svg); mask: url(images/icon-company.svg); mask-position: center center; background: linear-gradient(to bottom, rgba(234,150,50,1) 0%,rgba(247,38,120,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ } .contactform-help span[data-name="your-phone"]:before{ -webkit-mask:url(images/icon-telephone.svg); mask: url(images/icon-telephone.svg); mask-position: center center; background: linear-gradient(to bottom, rgba(234,150,50,1) 0%,rgba(247,38,120,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ } .contactform-help span[data-name="your-name"]:before{ -webkit-mask:url(images/icon-name.svg); mask: url(images/icon-name.svg); mask-position: center center; background: linear-gradient(to bottom, rgba(234,150,50,1) 0%,rgba(247,38,120,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ } .contactform-help span[data-name="your-email"]:before{ -webkit-mask:url(images/icon-mail.svg); mask: url(images/icon-mail.svg); mask-position: center center; background: linear-gradient(to bottom, rgba(234,150,50,1) 0%,rgba(247,38,120,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ } .contactform-help span[data-name="your-message"]:before{ -webkit-mask:url(images/icon-message.svg); mask: url(images/icon-message.svg); mask-position: center center; background: linear-gradient(to bottom, rgba(234,150,50,1) 0%,rgba(247,38,120,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ } .contactform-help h2{ display: flex; justify-content: center; } .contactform-help h2 .titel{ color: #fff; overflow: hidden; /* Ensures the content is not revealed until the animation */ border-right: .05em solid orange; /* The typwriter cursor */ white-space: nowrap; /* Keeps the content on a single line */ margin: 0 auto; /* Gives that scrolling effect as the typing happens */ letter-spacing: .05em; /* Adjust as needed */ animation: typing 8s steps(20, end) infinite, blink-caret .5s step-end infinite; width: 900px; } /* The typing effect */ @keyframes typing { 0% { width: 0 } 30% { width: 900px } 60% { width: 900px } 100% { width: 0 } } /* The typewriter cursor effect */ @keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: orange } } .marquee .contItem { display:inline-block; vertical-align:top; padding:20px; white-space:normal; } .marquee .contItem img{ object-fit:contain; } .progress-bar-wrapper { position: fixed; top: 0; z-index: 10000; width: 100%; } .progress-container { width: 100%; height: 4px; } .progress-bar { height: 4px; background: #04AA6D; width: 0%; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00b9ed+1,f0c526+77 */ background: #00b9ed; /* Old browsers */ background: -moz-linear-gradient(45deg, #00b9ed 1%, #f0c526 77%); /* FF3.6-15 */ background: -webkit-linear-gradient(45deg, #00b9ed 1%,#f0c526 77%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(45deg, #00b9ed 1%,#f0c526 77%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b9ed', endColorstr='#f0c526',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } .referenzbilder{ overflow: hidden; } .referenzbilder.vollbild ul{ margin-left: -10px; margin-right: -10px; } .referenzbilder li{ display: block; padding: 10px !important; } .referenzbilder a{ width: 100%; height: 100%; display: block; overflow: hidden; } .referenzbilder img{ width: 100%; display: block; } .referenzbilder a{ overflow: hidden; } .referenzbilder a:hover img{ transform: scale(1.1); } .referenzbilder .image-custom-height img, .referenzbilder .image-custom-height video{ position: absolute; width: 100%; height: 100%; object-fit: cover; } .projekte-box img{ height: 100%; object-fit: cover; } .projekte-box .item-content a{ overflow: hidden; display: block; } .projekte-box .spaltenbild { padding-top: 75%; position: relative; border-top-right-radius: 8px; border-top-left-radius: 8px; overflow: hidden; } .projekte-box .item-content{ overflow: hidden; } .projekte-box .spaltenbild img{ position: absolute; top: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; } .hintergrundbilderextra { position: absolute; } .projektheader{ margin-bottom: 50px; } .projektheader_content{ display: flex; flex-wrap: wrap; } .projektheader_titel, .projektheader_description{ color: #fff; } .projektheader_titel{ text-align: right; padding-right: 15px; display: flex; flex-wrap: wrap; justify-content: flex-end; } .projektheader_titel h1{ font-size: 48px; text-align: right; max-width: 600px; letter-spacing: 3px; line-height: 105%; margin-bottom: 5px; display: block; width: 100%; } .projektheader_description{ padding-left: 15px; line-height: 165%; } .projektheader_description_inner{ max-width: 500px; } .projektheader_content{ display: flex; flex-wrap: wrap; justify-content: center; } .projektheader_content .width50{ width: 50%; } .single .section-content{ padding-left: 30px; padding-right: 30px; } .single .single-referenzbilder-nav .spaltenbild { padding-top: 60%; } .single .single-referenzbilder-nav .item-content, .single .single-referenzbilder-nav .spaltenbild { height: 100%; } .single .single-referenzbilder-nav .section-content{ padding-left: 0px; padding-right: 0px; padding-top: 20px; } .single-referenzbilder-nav .item{ width: 25%; padding-left: 20px; padding-right: 20px; padding-bottom: 40px; } .single-referenzbilder-nav .flex-wrap{ margin-left: -20px; margin-right: -20px; } .single-referenzbilder-nav .text { left: 0px; top: 0px; position: absolute; width: 100%; height: 100%; display: flex; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b9157e+0,f29024+100 */ background: linear-gradient(to right, rgba(185,21,126,0.95) 0%,rgba(242,144,36,0.95) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ align-items: center; justify-content: center; display: none; } .single-referenzbilder-nav .text strong{ font-family: Poppins !important; font-weight: 800; text-align: center; color: #ffffff; font-size: 20px; line-height: 1.1; } .single-referenzbilder-nav .item{ border-radius: 1em; overflow: hidden; } .single-referenzbilder-nav img{ position: absolute; top: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; border-radius: 8px; } .single-referenzbilder-nav .box:hover .text{ display: block; } .single-referenzbilder-nav .text .text-content { position: absolute; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .single-referenzbilder-nav .text .text-content strong{ max-width: 400px; padding-left: 20px; padding: 25px 20px; right: 0px; bottom: 0px; position: relative; font-size: 30px; max-width: calc(100% - 60px); letter-spacing: 1px; } .single-referenzbilder-nav strong:before { content: ""; position: absolute; top: -2px; left: -2px; width: 0; height: 0; background: transparent; border: 2px solid transparent; } .single-referenzbilder-nav strong:before { animation: borderanimate 0.5s linear forwards; } .single-referenzbilder-nav strong:after { content: ""; position: absolute; top: -2px; left: -2px; width: 0; height: 0; background: transparent; border: 2px solid transparent; } .single-referenzbilder-nav strong:after { animation: borderanimate2 0.5s linear forwards; } .single-projekte .content{ max-width: 1400px; margin: auto auto; } .single-projekte .item-content a{ overflow: hidden; display: block; } .single-projekte .item-content{ overflow: hidden; border-radius: 8px; } .single-header-wrapper{ position: relative; } .single-header-wrapper:before{ content: ""; position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; z-index: 1; background: linear-gradient(135deg, rgba(195,42,112,1) 0%,rgba(238,135,43,1) 100%); transform: none !important; } .sh-title, .sh-image{ width: 50%; } .sh-title{ padding-right: 50px; } .sh-title h1{ display: block; width: 100%; } .sh-title h2{ font-size: 25px !important; display: block; width: 100%; } .sh-image{ width: 50%; padding-top: 50%; border-radius: 8px; position: absolute; right: 0px; overflow: hidden; } .sh-image img{ width: 100%; height: 100%; position: absolute; top: 0px; object-fit: contain; } .sh-button{ background: #fff; display: block; padding: 10px 25px; border-radius: 9999px; color: #000; } .hintergrundbilderextra.rellax.top-left{ top: 0; left: 0; } .hintergrundbilderextra.rellax.top-center{ top: 0; left: 50%; transform: translateX(-50%); } .hintergrundbilderextra.rellax.top-right { top: 0; right: 0; } .hintergrundbilderextra.rellax.center-left{ top: 50%; transform: translateY(-50%); left: 0; } .hintergrundbilderextra.rellax.center-center{ top: 50%; left: 50%; transform: translate(-50%, -50%); } .hintergrundbilderextra.rellax.center-right{ top: 50%; right: 0px; transform: translateY(-50%); } .hintergrundbilderextra.rellax.bottom-left{ bottom: 0; left: 0px; } .hintergrundbilderextra.rellax.bottom-center{ bottom: 0; left: 50%; top: 50% } .hintergrundbilderextra.rellax.bottom-right{ bottom: 0; right: 0px; } .projekttitleinfo{ font-size: 22px; letter-spacing: 10px; text-transform: uppercase; margin-bottom: 5px; line-height: 160%; width: 100%; text-align: right; margin-bottom: 20px; position: relative; top: -6px; } .single-referenzbilder-nav h2{ font-size: 30px; } .single-referenzbilder-nav .text .text-content strong{ font-size: 18px; } .spalten-links-box a{ transition: all 0.5s; } @keyframes arrowSlide{ from { left: 0;} to { left: 12px; } } .spalten-links-box a:hover .arrow-wrapper .arrow{ animation-name: arrowSlide; animation-duration: 0.3s; animation-fill-mode: forwards; } .spalten-links-box .arrow-wrapper{ width: 50px; height: 50px; display: block; position: relative; transition: all 0.5s; } .spalten-links-box .arrow-wrapper .circle{ display: block; width: 35px; height: 35px; border-radius: 9999px; border: 1px solid #D2525B; align-self: flex-end; position: relative; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .spalten-links-box .arrow-wrapper .arrow{ mask-image: url(images/right-arrow.svg); -webkit-mask-image: url(images/right-arrow.svg); mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-position: center center; -webkit-mask-position: center center; mask-size: contain; -webkit-mask-size: contain; background: #D2525B; position: absolute; display: block; width: 25px; height: 25px; top: 50%; transform: translateY(-50%); transition: all 0.5s; } .spalten-links-box.icon-on-the-left .text{ padding-left: 30px; } .spalten-links-box.icon-on-the-left .text{ width: calc(100% - 120px) } .spalten-links-box.icon-on-the-left .item .item-content{ align-items: center; } .hide{ display: none; } .item-aufzahlung.flexible-flex-wrap.coldesk-1.coltab-1.colhan-1{ padding-left: 0px; padding-right: 0px; } .project-edge-top:before{ content: ""; width: 100%; height: 40px; background: red; position: absolute; top: -39px; } .glowflare{ overflow: hidden; position: relative; background: radial-gradient(circle at 3% 55%, rgba(255, 45, 130, 0.45), transparent 22%), radial-gradient(circle at 78% 24%, rgba(190, 45, 255, 0.45), transparent 9%), radial-gradient(circle at 96% 88%, rgba(120, 50, 255, 0.35), transparent 18%), radial-gradient(circle at 48% 100%, rgba(255, 190, 40, 0.35), transparent 11%), radial-gradient(circle at 52% 82%, rgba(0, 180, 255, 0.45), transparent 24%), linear-gradient(135deg, #210020 0%, #07122f 45%, #020817 100%); background-blend-mode: screen, screen, screen, screen, screen, normal; background-size: 140% 140%, 180% 180%, 160% 160%, 150% 150%, 170% 170%, 100% 100%; animation: auroraAnimation 8s ease-in-out infinite alternate; } /* AURORA ANIMATION */ @keyframes auroraAnimation { 0% { background-position: 0% 50%, 100% 20%, 100% 100%, 50% 100%, 50% 80%, 0% 0%; } 25% { background-position: 10% 40%, 85% 15%, 90% 90%, 60% 95%, 45% 70%, 0% 0%; } 50% { background-position: 20% 60%, 70% 30%, 80% 100%, 40% 85%, 60% 90%, 0% 0%; } 75% { background-position: 5% 70%, 95% 20%, 100% 80%, 55% 100%, 40% 95%, 0% 0%; } 100% { background-position: 0% 50%, 100% 20%, 100% 100%, 50% 100%, 50% 80%, 0% 0%; } } @media(max-width: 1200px){ .container-box, .section-content{ padding-left: 30px; padding-right: 30px; } .dienstleistungbox h3{ text-align: center; } .dienstleistungbox{ text-align: center; } .dienstleistungbox .item{ max-width: 800px; margin: auto auto; } .icon-on-the-left .text{ width: 100%; padding-left: 0px; } .icon-on-the-left .text{ padding-top: 20px; } .single-referenzbilder-nav .item{ width: 50%; } } #footer-navigation{ width: 100%; margin-top: 20px; } #footer-navigation #menu-law{ display: flex; flex-wrap: wrap; justify-content: center; } #footer-navigation #menu-law a{ display: block; padding-left: 10px; padding-right: 10px; } #footer-navigation #menu-law li:first-child a{ padding-left: 0px; } #footer-navigation #menu-law li:last-child a{ padding-right: 0px; } .data-policy h2, .imprint h2{ font-size: 22px; letter-spacing: 1px; hyphens: auto; color: #DB5E49; } .data-policy h3, .imprint h3{ font-size: 18px; letter-spacing: 1px; hyphens: auto; color: #DB5E49; } .overflowhidden{ overflow: hidden; } .aboutbox .item{ position: relative; } .aboutbox .item:after{ content: ""; background: url(images/line.svg) no-repeat; background-size: contain; width: 10px; height: 55px; position: absolute; right: 0px; bottom: 20px; left: 50%; transform: translateX(-50%); } .aboutbox .spalten-box .item{ padding-bottom: 45px !important; } .aboutbox.spalten-box .item{ padding-bottom: 80px !important; } /* Hide scrollbar for Chrome, Safari and Opera */ textarea::-webkit-scrollbar { display: none; } /* Hide scrollbar for IE, Edge and Firefox */ textarea { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ resize: none; } @keyframes slidetextarea{ from { height: 84px;} to { height: 300px; } } .close.rotate{ animation-name: rotateClose; animation-duration: 1s; } .kontaktformular-box input[type="text"], .kontaktformular-box input[type="email"], .kontaktformular-box input[type="tel"], .kontaktformular-box textarea{ transition: all 0.8s; } .kontaktformular-box input[type="text"]:focus, .kontaktformular-box input[type="email"]:focus, .kontaktformular-box input[type="tel"]:focus{ border-top-right-radius: 5px; border-top-left-radius: 5px; outline: none; } .kontaktformular-box textarea:focus{ animation-name: slidetextarea; animation-duration: 1s; animation-fill-mode: forwards; outline: none; } .contactform-help span[data-name="your-message"]:before{ } .kontaktformular-box#kontaktformular-block_c5fa4e316d9be666a847583b753893d1 textarea{ -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .kontaktformular-box#kontaktformular-block_c5fa4e316d9be666a847583b753893d1 textarea::-webkit-scrollbar { display: none; } .kontaktformular-box .flex-wrap{ margin-left: -20px; margin-right: -20px; } .kontaktformular-box input[type="submit"]{ cursor: pointer; } .kontaktformular-box .wpcf7 .wpcf7-acceptance input[type="checkbox"]{ width: 20px; height: 20px; border: none; } .kontaktformular-box .wpcf7 .wpcf7-acceptance .wpcf7-list-item{ width: 100%; display: block; } .kontaktformular-box .wpcf7 .wpcf7-acceptance label{ display: flex; flex-wrap: wrap; width: 100%; } .kontaktformular-box .wpcf7 .wpcf7-acceptance .wpcf7-list-item-label{ width: calc(100% - 30px); display: block; } .kontaktformular-box .wpcf7-not-valid-tip{ font-size: 15px; color: #F62D73; padding-top: 5px; } .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output{ font-size: 16px; } .kontaktformular-box .wpcf7-acceptance{ border-radius: 5px; margin-bottom: 40px; } .kontaktformular-box .wpcf7-acceptance .wpcf7-list-item-label{ margin-bottom: 0px; padding-left: 10px; } .kontaktformular-box form .width100{ margin-bottom: 30px; } .kontaktformular-box .wpcf7-acceptance{ border: none !important; background: #000; padding: 20px; margin: auto auto; } .kontaktformular-box .button-fa{ position: relative; max-width: 200px; margin: auto auto; } .kontaktformular-box .button-fa input[type="submit"]{ display: flex; align-items: center; letter-spacing: 2px; transition: all 0.5s; padding-left: 30px; padding-right: 80px; color: #000; letter-spacing: 2px; line-height: 100%; border-radius: 9999px; background: linear-gradient(45deg, rgba(207,7,126,1) 0%,rgba(240,126,35,1) 100%); background: url(images/right-arrow.svg) no-repeat #fff; background-size: 30px auto; background-position: right 25px center; transition: all 0.3s; margin-top: 20px; } .kontaktformular-box .button-fa input[type="submit"]:hover{ background-position: right 140px center; padding-left: 80px; } .exzellenteswebdesign .text-content{ max-width: 600px; } .gridgalerie-box.custommockupgrid .image-wrapper{ grid-auto-rows: minmax(50vh, auto) } .contactform-help textarea, .contactform-help input[type="text"], .contactform-help input[type="email"]{ border-width: 3px; border-style: solid; border-image: linear-gradient(to right, #EC8C39, #F53270) 1; padding-top: 15px; padding-bottom: 15px; padding-left: 70px; position: relative; border-radius: 5px; } form .width50, form .width100{ margin-right: 20px; margin-left: 20px; margin-bottom: 40px; } form .width50{ width: calc(50% - 50px); } form .width100{ width: calc(100% - 50px); } #angebotanfordern span[data-name="your-name"], #angebotanfordern span[data-name="your-email"], #angebotanfordern span[data-name="your-message"]{ position: relative; } #angebotanfordern span[data-name="your-name"]:before, #angebotanfordern span[data-name="your-email"]:before, #angebotanfordern span[data-name="your-message"]:before{ content: ""; position: absolute; width: 45px; height: 45px; background: red; top: 15px; z-index: 1; left: 20px; } #angebotanfordern span[data-name="your-name"]:before{ -webkit-mask:url(images/icon-name.svg); mask: url(images/icon-name.svg); mask-position: center center; background: linear-gradient(to bottom, rgba(234,150,50,1) 0%,rgba(247,38,120,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ } #angebotanfordern span[data-name="your-email"]:before{ -webkit-mask:url(images/icon-mail.svg); mask: url(images/icon-mail.svg); mask-position: center center; background: linear-gradient(to bottom, rgba(234,150,50,1) 0%,rgba(247,38,120,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ } #angebotanfordern span[data-name="your-message"]:before{ -webkit-mask:url(images/icon-message.svg); mask: url(images/icon-message.svg); mask-position: center center; background: linear-gradient(to bottom, rgba(234,150,50,1) 0%,rgba(247,38,120,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ } .contactinfobox .titel{ font-size: 100px; line-height: 90%; font-family: Poppins; font-weight: 800; } .minspacer, .minspacer80{ height: 80px; } .aboutbox .item:last-child:after{ content: ""; display: none; } .leistungcarousel .content{ padding-left: 50px; padding-right: 50px; } .leistungcarousel .text-detail h2{ font-size: 100px; font-size: 5vw; } .seeyousoonbox .item .item-content{ border-radius: 8px; } .seeyousoonbox h2{ font-size: 12vw !important; text-shadow: #000 0px 0px 1px; -webkit-font-smoothing: antialiased; } .swiper-container-bewertung, .swiper { overflow: hidden; } .cards { height: 100%; overflow: auto; justify-content: center; align-items: center; height: 200%; } .card { display: flex; justify-content: center; align-items: center; border-radius: 8px; background: #fff; height: 200px; width: 300px; margin: 20px; transform: translateY(var(--translateY)); will-change: transform; } .blur1px{ filter: blur(1px); } h2.h2stroke{ -webkit-text-fill-color: transparent; /* Will override color (regardless of order) */ -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #fff; letter-spacing: 5px; } .dienstleistungbox { border-bottom: 1px solid #000; } .projektnavigation{ padding-left: 15px; display: flex; flex-wrap: wrap; } .projektnavigation .nav-links{ display: flex; flex-wrap: wrap; } .projektnavigation .arrow-left, .projektnavigation .arrow-right{ background: #fff; padding: 10px 10px; line-height: 100%; display: block; transition: all 0.3s; /* Permalink - use to edit and share this gradient. Permalink - Zum Bearbeiten und Teilen dieses Verlaufs verwenden: https://colorzilla.com/gradient-editor/#bf2374+0,f08d26+100 */ } .projektnavigation a .arrow-left , .projektnavigation a .arrow-right { color: #000; } .projektnavigation .arrow-right{ margin-right: 4px; } .projektnavigation a:hover .arrow-left, .projektnavigation a:hover .arrow-right{ background: none; box-shadow: inset 0 0 0 2px #fff; color: #fff; } .linebetween .section-content:before{ content: ""; display: block; position: absolute; width: 1px; height: 100%; background: #333; left: 50%; } .linebetween .section-content .image { opacity: 1 !important; } .h1title{ z-index: 50; position: relative; } .h1title h1{ max-width: 550px; } .marked-colored{ background: linear-gradient(90deg, #D21274, #ED732B); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .box-title .marked{ -webkit-text-stroke-width: 0; -webkit-text-fill-color: #000; } .archive h1{ font-size: 110px; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #fff; -webkit-text-fill-color: transparent; text-align: center; } .exzellenteswebdesign{ z-index: 10; position: relative; } .spaltenbild svg{ width: 100%; height: auto; } .single-leistungen h1{ display: block; text-align: left; font-size: 60px; margin-bottom: 30px; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #fff; color: transparent; font-family: Poppins; font-weight: 800; letter-spacing: 3px; line-height: 80% !important; text-align: left; } .servicedescription_header{ display: flex; flex-wrap: wrap; position: relative; } .servicedescription_header .servicedescription_image{ position: relative; } .servicedescription_header img{ position: absolute; left: 0px; top: 0px; width: 60%; height: 100%; object-fit: cover; border-radius: 8px; } .servicedescription_header .servicedescription_text{ padding-top: 120px; padding-bottom: 120px; padding-left: 50%; z-index: 1; } .servicedescription_text_content{ background: #000; padding: 10%; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#c32a70+0,ee872b+100 */ background: linear-gradient(135deg, rgba(195,42,112,1) 0%,rgba(238,135,43,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ border-radius: 8px; } .servicedescription_text h1{ font-size: 50px; line-height: 90%; } .servicedescription_text h2{ font-size: 30px; } .servicedescription_text a{ background: #fff; padding: 20px 30px; font-family: Poppins; font-weight: 800; display: block; color: #000; border-radius: 9999px; letter-spacing: 1px; line-height: 100%; text-align: center; } .single #angebotanfordern{ /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#c32a70+0,ee872b+100 */ background: linear-gradient(135deg, rgba(195,42,112,1) 0%,rgba(238,135,43,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ } .single-leistungen-nav ul{ display: grid; grid-gap: 15px; grid-template-columns: repeat(4, 1fr); } .single-leistungen-nav ul li{ display: flex; flex-wrap: wrap; border: 3px solid #fff; transition: all 0.3s; border-radius: 5px; width: 100%; } .single-leistungen-nav ul li strong{ width: calc(100% - 180px); display: block; transition: all 0.3s; position: relative; left: 0px; display: flex; align-items: flex-end; line-height: 130%; color: #fff; bottom: 0px; width: 100%; z-index: 1; font-size: 17px; padding: 6px 20px 8px 20px; letter-spacing: 1px; } .single-leistungen-nav ul li a{ display: flex; flex-wrap: wrap; align-items: center; border-radius: 3px; color: #333; font-size: 20px; position: relative; border-radius: 8px; width: 100%; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+1,000000+100&0+0,1+100 */ overflow: hidden; } .single-leistungen-nav ul li strong span{ display: block; } .single-leistungen #angebotanfordern input[type="text"], .single-leistungen #angebotanfordern input[type="email"]{ padding: 17px 40px 17px 80px; background: none; border-bottom: 3px solid #fff; } .single-leistungen #angebotanfordern textarea{ border-radius: 8px; padding: 20px 40px; min-height: 130px; } .single-leistungen #angebotanfordern form .width50, .single-leistungen #angebotanfordern form .width100{ margin-bottom: 20px; } .single-leistungen .basic_columns_box li{ width: 33.33%; } .leistungen_header{ background: linear-gradient(135deg, #c02474 1%, #f08c26 100%); padding-top: 80px; padding-bottom: 200px; } .leistungen_header h1{ font-size: 150px; color: #ffffff; } .leistungen_header h2{ color: #ffffff; font-size: 40px; line-height: 1.0; margin-bottom: 40px; } .leistungen_images_wrapper{ background: #111; } .leistungen_images_wrapper ul{ display: flex; flex-wrap: wrap; margin-left: -30px; margin-right: -30px; } .leistungen_images_wrapper .item{ width: calc(33.33% - 40px); position: relative; margin-left: 20px; margin-right: 20px; } .leistungen_images_wrapper .item a{ display: block; width: 100%; padding-top: 100%; overflow: hidden; border-radius: 5px; } .leistungen_images_wrapper .item img{ position: absolute; width: 100%; height: 100%; object-fit: cover; top: 0px; left: 0px; border-radius: 5px; } .flex_block_columns{ display: flex; flex-wrap: wrap; } .flex_block_columns h2, .flex_block_columns h3, .flex_block_columns h4, .flex_block_columns h5, .flex_block_columns h6{ font-family: Poppins; font-weight: 800; font-size: 35px; } .flex_block_columns{ margin-left: -20px; margin-right: -20px; } .flex_block_columns li{ padding-left: 20px; padding-right: 20px; } .flex_block_columns.columns_1 li{ width: 100%; } .flex_block_columns.columns_2 li{ width: 50%; } .flex_block_columns.columns_3 li{ width: 33.33%; } .flex_block_columns.columns_4 li{ width: 25%; } .flex_block_columns.columns_5 li{ width: 20%; } .flex_block_columns.columns_6 li{ width: 12.5%; } #breadcrumbs{ font-size: 12px; margin-bottom: 20px; } #breadcrumbs a{ color: #fff; } .archive-leistungen-nav ul{ display: flex; flex-wrap: wrap; margin-left: -20px; margin-right: -20px; } .archive-leistungen-nav li{ width: 33.33%; border-radius: 8px; overflow: hidden; padding: 20px; } .archive-leistungen-nav li a{ border-radius: 8px; display: block; border-radius: 8px; overflow: hidden; padding-top: 100%; position: relative; } .archive-leistungen-nav li a strong { position: absolute; bottom: 0px; left: 0px; padding: 60px 20px 20px 20px; color: #fff; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ width: 100%; transition: all 0.3s; font-size: 18px !important; } .archive-leistungen-nav li a:hover strong { padding: 60px 20px 40px 20px; } .archive-leistungen-nav li a img { position: absolute; width: 100%; height: 100%; object-fit: cover; top: 0px; transition: all 0.3s; } .archive-leistungen-nav li a:hover img{ transform: scale(1.1); } .title-line-bg{ color: #fff; position: absolute; font-size: 600px; bottom: 0px; left: 0px; top: 0px; text-transform: uppercase; line-height: 100%; color: transparent; /* Schrift transparent */ -webkit-text-stroke: 2px rgba(255,255,255,0.04); /* Weiße Kontur */ white-space: nowrap; overflow: hidden; } .title-line-bg br{ display: none; } .btn-black{ color: #1B161E; border: 1px solid #1B161E; } .btn-black:hover{ color: #fff; background: #1B161E; border: 1px solid #1B161E; } .dl_wrapper .dl_item{ border-bottom: 1px solid rgba(255,255,255,0.4); padding-bottom: 20px; padding-top: 20px; } .dl_wrapper .dl_item h3{ line-height: 100%; margin-bottom: 0px; } .leistungen img{ border-radius: 8px; } .textundblocks-box .tub_blocks_text{ width: 35%; padding-right: 30px; } .textundblocks-box .tub_blocks_wrapper{ width: 65%; } .textundblocks-box .tub_blocks_wrapper .item-content{ border-radius: 10px !important; } .textundblocks-box .tub_blocks_wrapper .item{ border-radius: 20px; /* Permalink - use to edit and share this gradient. Permalink - Zum Bearbeiten und Teilen dieses Verlaufs verwenden: https://colorzilla.com/gradient-editor/#111111+0,000000+100 */ width: calc(50% - 20px); } .textundblocks-box .tub_blocks_wrapper .item .image{ max-width: 40px; margin-bottom: 20px; } .textundblocks-box .tub_blocks_wrapper .item .spalten-titel{ font-size: 20px; font-family: Poppins; font-weight: 800; text-transform: uppercase; letter-spacing: 3px; } .textundblocks-box .tub_blocks_wrapper .item .text{ display: block; width: 100%; } .textundblocks-box .tub_blocks_wrapper .item{ font-size: 20px; } .textundblocks-box .tub_blocks_text .titlecontent{ font-size: 100px; font-family: Poppins; font-weight: 800; line-height: 95%; font-weight: 400; letter-spacing: 2px; padding-right: 20px; } .textundblocks-box .tub_blocks_wrapper{ grid-gap: 40px; } .textundblocks-box .tub_blocks_wrapper .item .item-content{ padding: 40px; } .textundblocks-box .tub_blocks_wrapper .item p{ margin-bottom: 0px; } .textundblocks-box .tub_blocks_wrapper a{ color: #fff; transition: all 0.3s; font-size: 18px; display: block; width: 100%; transition: all 0.5s; } .textundblocks-box .tub_blocks_wrapper a .text-detail::after { content: "→"; font-size: 18px; display: block; transition: all 0.5s; } .textundblocks-box .tub_blocks_wrapper a, .textundblocks-box .tub_blocks_wrapper a .item-content{ transition: all 0.5s; display: block; width: 100%; height: 100%; } .textundblocks-box .tub_blocks_wrapper .item-content{ background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); } .textundblocks-box .tub_blocks_wrapper a:hover .item-content{ background: linear-gradient(45deg, rgba(207,7,126,1) 0%,rgba(240,126,35,1) 100%); } .textundblocks-box .tub_blocks_wrapper a:hover::after{ margin-left: 10px; } .textundblocks-box .tub_blocks_text .box-title { color: #fff; } #more-leistungen{ background: #111; } .brlbs-cmpnt-dialog-entrance-description{ height: 200px !important; overflow-y: scroll; } .button_all_projects{ width: 300px; height: 300px; display: block; border-radius: 9999px; margin: auto auto; /* Permalink - use to edit and share this gradient. Permalink - Zum Bearbeiten und Teilen dieses Verlaufs verwenden: https://colorzilla.com/gradient-editor/#1e5799+0,7db9e8+100 */ background: linear-gradient(135deg, #EC8C39 0%,#F53270 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ position: relative; transform: scale(0.9); transition: transform 0.12s linear; will-change: transform; } .button_all_projects strong{ position: absolute; display: block; font-family: Poppins; font-weight: 800; text-transform: uppercase; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #fff; -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: rgba(255,255,255,0); font-size: 60px; line-height: 90%; text-align: center; top: 50%; left: 50%; letter-spacing: 3px; transform: translate(-50%, -55%); } .button_all_projects:hover{ color: #fff; background: transparent; border: 3px solid #EF704A; } .button_all_projects:hover strong{ -webkit-text-fill-color: #fff; } .button_all_projects svg{ width: 80%; height: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -55%); fill: none !important; stroke-width: 3 !important; stroke: #fff !important; display: none; } .button_all_projects:hover svg{ display: block; } .videomitmaske-box .video-content{ width: 100%; position: relative; } .videomitmaske-box .video-content{ overflow: hidden; position: absolute; width: 100%; height: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: auto; -webkit-mask-position: center center; mask-position: center center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } .videomitmaske-box .video-content video{ position: absolute; width: 100%; height: 100%; object-fit: cover; } .icon-on-the-left.spalten-links-box { display: none; } .divider-in-the-middle .section-content{ position: relative; } .divider-in-the-middle .section-content:before{ content: ""; position: absolute; display: block; width: 3px; height: 100%; background: #000; left: 50%; } .divider-in-the-middle video{ opacity: 0.5; } .box-more-text{ position: relative; } .agency-facts.spalten-mit-icon-box .spalten-titel{ font-family: Poppins; font-weight: 400; } .agency-facts.spalten-mit-icon-box .spaltenbild { padding: 12px; border-radius: 9999px; } .agency-facts.spalten-mit-icon-box .spaltenbild:after{ content: ""; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background: rgba(255,255,255,0.3); mix-blend-mode: overlay; border-radius: 9999px; } .spalten-box .item.swiper-slide .spaltenbild{ margin-bottom: 0px; } .wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 input[type="file"], .wpcf7 textarea, .kontaktformular-box .button-fa input[type="submit"]{ font-family: Poppins; font-weight: 400; font-size: 16px; } .wpcf7-spinner{ position: absolute; } .page-id-4513 #content{ overflow: inherit; } .page-id-4513 section{ top: 0px; } .home-leistungen{ position: sticky; top: 0px; } .home-leistungen .flexible-content-aufzahlung .item-aufzahlung{ border-top: 1px solid #666; padding-top: 25px; padding-bottom: 25px; line-height: 120%; } .home-leistungen .flexible-content-aufzahlung .item-aufzahlung:last-child{ border-bottom: 1px solid #666; } .home-leistungen .flexible-content-image img{ width: 550px; height: auto; border-radius: 8px; position: relative; z-index: 1; } .home-leistungen .item{ position: relative; } .home-leistungen .flex-wrap{ align-items: center; } .home-leistungen .item:last-child:after{ content: ""; position: absolute; width: 60%; height: 300px; border-top: 5px solid #D2525B; border-left: 5px solid #D2525B; border-bottom: 5px solid #D2525B; top: 50%; right: -10px; transform: translateY(-50%); border-top-left-radius: 20px; border-bottom-left-radius: 20px; } .text-content .spalten-titel span.marked{ color: #fff !important; -webkit-text-fill-color: #fff; } .logo-carousell .flexibleheight img{ object-fit: contain; } .logo-carousell .content { padding-left: 50px; padding-right: 50px; } .swiper-title{ padding-right: 100px; } @media(max-width: 1500px){ .container-box{ padding-left: 40px; padding-right: 40px; } .leistungen-home h2.spalten-titel{ padding-right: calc(100px * 0.9); } .leistungen-home .spaltenbild{ position: absolute; right: calc(40px * 0.9); top: calc(-30px * 0.9); width: calc(90px * 0.9); } .flexibler-inhalt-box#flexibler-inhalt-block_b527fcf90689ab7c193cb7f8d9558668.home-agentur strong.spalten-subtitel{ font-size: 60px !important; } .flexibler-inhalt-box#flexibler-inhalt-block_b527fcf90689ab7c193cb7f8d9558668.home-agentur{ background-size: 900px !important; } .flexibler-inhalt-box#flexibler-inhalt-block_3d3d90c6b185c794b221545f8bb3e073.home-agentur strong.spalten-subtitel{ font-size: 50px; } .home-agentur .item-content, .home-agentur .item-content .text{ width: 560px; } } @media(max-width: 1400px){ .single-leistungen h1 span{ font-size: 100px; } .textundblocks-box .tub_blocks_text{ width: 100%; padding-right: 0px; } .textundblocks-box .tub_blocks_text .titlecontent{ text-align: center; font-size: 120px; padding-right: 0px; margin-bottom: 50px; } .textundblocks-box .tub_blocks_wrapper{ width: 100%; margin: auto auto; } .contactinfobox .titel{ font-size: 80px; } .contactinfobox .titel br{ display: none; } } @media(max-width: 1300px){ .flex_block_columns.columns_3 li{ width: 50%; } .flexibler-inhalt-box#flexibler-inhalt-block_b527fcf90689ab7c193cb7f8d9558668.home-agentur strong.spalten-subtitel{ font-size: 45px !important; } .home-agentur .item-content, .home-agentur .item-content .text{ width: 450px; } } @media(max-width: 1200px){ .leistungen-home h2.spalten-titel{ padding-right: calc(100px * 0.8); } .leistungen-home .spaltenbild{ position: absolute; right: calc(40px * 0.8); top: calc(-30px * 0.8); width: calc(90px * 0.8); } .home-leistungen .item:first-child{ padding-bottom: 0px !important; } .home-leistungen .item:last-child, .home-leistungen .item:last-child:after, .home-leistungen .flexible-content-image{ display: none; } .seeyousoonbox .content{ max-width: 750px; } } @media(max-width: 1100px){ .kontaktformular-box .button-fa input[type="submit"]{ font-size: 18px; padding-left: 20px; padding-right: 50px; } #colophon .footer-newsletter{ width: 100% } .footer-logo img{ width: 100px; } .footer-logo-nav{ margin: auto auto; margin-top: -20px; } .footer-logo-nav{ display: none; } #colophon .content{ padding-top: 0px; } .footer-newsletter-header{ text-align: center; } } @media(max-width: 1024px){ .leistungen-home h2.spalten-titel{ padding-right: calc(100px * 0.7); } .leistungen-home .spaltenbild{ position: absolute; right: calc(40px * 0.7); top: calc(-30px * 0.7); width: calc(90px * 0.7); } .container-box, .section-content{ padding-left: 30px; padding-right: 30px; } .single-leistungen h1{ font-size: 50px; max-width: 600px; } .single-leistungen-nav ul{ grid-gap: 17px; } .single-leistungen-nav ul li:nth-child(2) img, .single-leistungen-nav ul li:nth-child(3) img, .single-leistungen-nav ul li:nth-child(4) img{ width: 130px; height: 130px; } .single-leistungen-nav ul li:nth-child(2) strong, .single-leistungen-nav ul li:nth-child(3) strong, .single-leistungen-nav ul li:nth-child(4) strong{ font-size: 17px; padding-top: 10px; padding-bottom: 10px; width: calc(100% - 130px); } .single-leistungen-nav ul li:nth-child(1) strong{ font-size: 17px; padding-top: 10px; padding-bottom: 10px; } .section-content .single-leistungen-nav ul li:nth-child(1), .section-content .single-leistungen-nav ul li:nth-child(2), .section-content .single-leistungen-nav ul li:nth-child(3), .section-content .single-leistungen-nav ul li:nth-child(4){ padding-left: 0px; } .single-leistungen-nav ul li:nth-child(1){ grid-row: 1 / 3; } .single-leistungen-nav ul li:nth-child(2){ grid-row: 1 / 2; } .single-leistungen-nav ul li:nth-child(3){ grid-row: 2 / 3; } .single-leistungen-nav ul li:nth-child(4){ grid-column: 1 / 3; grid-row: 3 / 4; } .single-referenzbilder-nav .flex-wrap{ margin-left: -10px; margin-right: -10px; } .single-referenzbilder-nav .item{ padding-left: 10px; padding-right: 10px; padding-bottom: 20px; } .h1title{ margin-bottom: -15px !important; } .aboutbox .item:after{ content: ""; background: #fff; width: 1px; height: 60px; position: absolute; right: 0px; bottom: 25px; left: 50%; } .projektheader_titel h1{ font-size: 35px; letter-spacing: 3px; } .projekttitleinfo{ font-size: 18px; } .projektheader_description{ font-size: 18px; } .textundblocks-box .tub_blocks_wrapper .item .item-content{ padding: 30px; } } @media(max-width: 1000px){ .contactinfobox .titel{ font-size: 60px; } } @media(max-width: 920px){ form .width50, form .width100{ width: 100%; margin-bottom: 30px; } .contactform-help span[data-name="your-phone"]:before, .contactform-help span[data-name="your-company"]:before, .contactform-help span[data-name="your-name"]:before, .contactform-help span[data-name="your-email"]:before, .contactform-help span[data-name="your-message"]:before{ width: 35px; height: 35px; } .contactform-help h2 .titel{ -webkit-text-stroke-width: 0.5px; } .contactform-help textarea, .contactform-help input[type="tel"], .contactform-help input[type="text"], .contactform-help input[type="email"]{ padding-top: 10px; padding-bottom: 10px; } form .width50, form .width100{ margin-bottom: 20px; } .servicedescription_header img{ width: 100% !important; display: block !important; } .servicedescription_header .servicedescription_text{ padding-top: 0px; padding-left: 0px; } .single-leistungen-nav ul li:nth-child(1) strong{ font-size: 15px; } .single-leistungen-nav ul li:nth-child(2) strong, .single-leistungen-nav ul li:nth-child(3) strong, .single-leistungen-nav ul li:nth-child(4) strong{ padding: 10px 15px; width: calc(100% - 100px); font-size: 15px; } .single-leistungen-nav ul li:nth-child(2):hover img, .single-leistungen-nav ul li:nth-child(3):hover img, .single-leistungen-nav ul li:nth-child(4):hover img{ width: 80px; } } @media(max-width: 768px){ .featuredprojekte .swiper-arrows-wrapper{ top: 20px; right: 20px; bottom: auto; } .text-mit-bild-box#text-mit-bild-block_d17ab2e40b95defcdfd9d40591d689b6 .break_on_tablet .image{ padding-top: 0px !important; } .text-mit-bild-box#text-mit-bild-block_d17ab2e40b95defcdfd9d40591d689b6 .text { padding-bottom: 0px !important; } .agency-texts.text-mit-bild-box { text-align: center; } .textundblocks-box .tub_blocks_wrapper .item .spalten-titel{ font-size: 18px; } .textundblocks-box .tub_blocks_wrapper a{ font-size: 16px; } .agency-texts{ } .leistungen-home h2.spalten-titel{ padding-right: calc(100px * 0.6); } .leistungen-home .spaltenbild{ right: calc(40px * 0.6); top: calc(-30px * 0.6); width: calc(90px * 0.6); } .single .section-content, .container-box, .section-content{ padding-left: 20px; padding-right: 20px; } .swiper-button-prev{ left: 0px; } .swiper-button-next{ right: 0px; } .single-leistungen-nav ul li:nth-child(2) img, .single-leistungen-nav ul li:nth-child(3) img, .single-leistungen-nav ul li:nth-child(4) img{ width: 100px; height: 100px; } .flex_block_columns.columns_2 li, .flex_block_columns.columns_3 li, .flex_block_columns.columns_4 li, .flex_block_columns.columns_5 li, .flex_block_columns.columns_6 li{ width: 100%; } .h1title{ text-align: center; max-width: 400px; margin: auto auto; margin-bottom: 0px; padding-bottom: 50px; } .exzellenteswebdesign { padding-top: 40px; } .dienstleistungbox .section-content{ max-width: 500px; margin: auto auto; } .dienstleistungbox .section-content h3, .dienstleistungbox .section-content .text{ text-align: center; } .contactform-help span[data-name="your-company"]:before, .contactform-help span[data-name="your-phone"]:before, .contactform-help span[data-name="your-name"]:before, .contactform-help span[data-name="your-email"]:before, .contactform-help span[data-name="your-message"]:before{ width: 30px; height: 30px; } .contactform-help span[data-name="your-phone"]:before, .contactform-help span[data-name="your-company"]:before, .contactform-help span[data-name="your-name"]:before, .contactform-help span[data-name="your-email"]:before, .contactform-help span[data-name="your-message"]:before{ top: 15px; left: 20px; } .contactform-help textarea, .contactform-help input[type="text"], .contactform-help input[type="tel"], .contactform-help input[type="email"]{ padding-left: 70px; } .kontaktformular-box form .width100{ margin-bottom: 0px; } .exzellenteswebdesign .text-content{ max-width: 500px; margin: auto auto; text-align: center; } .projektheader_titel h1{ font-size: 35px; } .marquee .contItem{ padding: 15px; } .textundblocks-box .tub_blocks_wrapper .item .item-content{ padding: 20px; } } @media(max-width: 720px){ .contactinfobox .titel br{ display: block; } .contactinfobox .titel{ font-size: 100px; } } @media(max-width: 700px){ .projektheader_titel h1{ font-size: 30px; } .projektheader_description{ max-width: 250px; } } @media(max-width: 650px){ .textundblocks-box .tub_blocks_wrapper .item{ width: calc(100%); } .textundblocks-box .tub_blocks_wrapper .item .item-content{ display: flex; flex-wrap: wrap; } .textundblocks-box .tub_blocks_wrapper .item .text{ width: calc(100% - 40px); padding-left: 40px; } } @media(max-width: 600px){ .projektheader_content{ display: flex; flex-wrap: wrap; flex-direction: column; } .projektheader_content .projektnavigation{ order: 2; margin-top: 30px; } .single-leistungen-nav ul li:nth-child(1) a{ padding-top: 70%; } .single-leistungen-nav ul{ display: block; } .single-leistungen-nav ul li{ margin-bottom: 10px; } .single-referenzbilder-nav .text .text-content strong{ padding: 10px 10px; max-width: calc(100% - 30px) } .single .single-referenzbilder-nav .spaltenbild{ padding-top: 100%; } .projekttitleinfo{ text-align: center; } .projektheader_description{ text-align: center; } .projektheader_titel h1{ text-align: center !important; padding-right: 0px !important; } .projektheader_titel{ padding-right: 0px; } .projektnavigation{ padding-left: 0px; justify-content: center; margin-bottom: 10px; } #colophon .footer-newsletter-forms{ display: block; } #colophon .footer-newsletter input[type="email"]{ border-right: 1px solid #fff; border-bottom: none; } #colophon .footer-newsletter input[type="submit"]{ width: 100%; } .projektheader_content .width50{ width: 100%; max-width: none; } .projektheader_description{ max-width: none; padding-left: 0px; } .projektheader_titel h1{ text-align: left; margin-bottom: 20px; } } @media(max-width: 550px){ .multi-button-wrapper a{ width: 100%; } } @media(max-width: 480px){ .projekte-box .text-content{ padding: 18px; } .projekte-box ul{ margin-bottom: 10px; } .container-box, .single .section-content{ padding-left: 15px; padding-right: 15px; } .leistungen-home h2.spalten-titel{ padding-right: calc(100px * 0.5); } .leistungen-home .spaltenbild{ position: absolute; right: calc(40px * 0.5); top: calc(-30px * 0.5); width: calc(90px * 0.5); } .section-content{ padding-left: 15px; padding-right: 15px; } .contactinfobox .titel{ font-size: 100px; } .textundblocks-box .tub_blocks_text .titlecontent{ margin-bottom: 20px; } form .width50, form .width100{ margin-bottom: 10px; } .wpcf7-form-control-wrap{ margin-bottom: 10px; } .single-referenzbilder-nav .text .text-content strong{ hyphens: auto; } .gridgalerie-box .image-wrapper .image:first-child{ padding-top: 150%; } .gridgalerie-box .image-wrapper .image:nth-child(4){ padding-top: 50%; } .galerie-box.bunnyimage .spaltenbild{ padding-top: 100% !important; } .marquee .contItem{ padding: 10px; } } @media(max-width: 450px){ .contactinfobox .titel{ font-size: 75px; } } img { aspect-ratio: 1 / 1; }