/* Theme Name: higher5 Description: Child theme for Divi theme Author: A Vista Studios Author URI: https://a-vista-studios.de Template: Divi Version: 1.0.0 Text Domain: Divi */ @import url("../Divi/style.css"); /*-------------------------------------------------------*/ /*----- SCHRIFTEN -----*/ /*-------------------------------------------------------*/ /* roboto-300 - latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 300; src: url('fonts/roboto-v20-latin-300.eot'); /* IE9 Compat Modes */ src: local('Roboto Light'), local('Roboto-Light'), url('fonts/roboto-v20-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/roboto-v20-latin-300.woff2') format('woff2'), /* Super Modern Browsers */ url('fonts/roboto-v20-latin-300.woff') format('woff'), /* Modern Browsers */ url('fonts/roboto-v20-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */ url('fonts/roboto-v20-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */ } /* roboto-300italic - latin */ @font-face { font-family: 'Roboto'; font-style: italic; font-weight: 300; src: url('fonts/roboto-v20-latin-300italic.eot'); /* IE9 Compat Modes */ src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url('fonts/roboto-v20-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/roboto-v20-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */ url('fonts/roboto-v20-latin-300italic.woff') format('woff'), /* Modern Browsers */ url('fonts/roboto-v20-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('fonts/roboto-v20-latin-300italic.svg#Roboto') format('svg'); /* Legacy iOS */ } /* roboto-regular - latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: url('fonts/roboto-v20-latin-regular.eot'); /* IE9 Compat Modes */ src: local('Roboto'), local('Roboto-Regular'), url('fonts/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/roboto-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('fonts/roboto-v20-latin-regular.woff') format('woff'), /* Modern Browsers */ url('fonts/roboto-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('fonts/roboto-v20-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */ } /* roboto-italic - latin */ @font-face { font-family: 'Roboto'; font-style: italic; font-weight: 400; src: url('fonts/roboto-v20-latin-italic.eot'); /* IE9 Compat Modes */ src: local('Roboto Italic'), local('Roboto-Italic'), url('fonts/roboto-v20-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/roboto-v20-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */ url('fonts/roboto-v20-latin-italic.woff') format('woff'), /* Modern Browsers */ url('fonts/roboto-v20-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('fonts/roboto-v20-latin-italic.svg#Roboto') format('svg'); /* Legacy iOS */ } /* roboto-500 - latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; src: url('fonts/roboto-v20-latin-500.eot'); /* IE9 Compat Modes */ src: local('Roboto Medium'), local('Roboto-Medium'), url('fonts/roboto-v20-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/roboto-v20-latin-500.woff2') format('woff2'), /* Super Modern Browsers */ url('fonts/roboto-v20-latin-500.woff') format('woff'), /* Modern Browsers */ url('fonts/roboto-v20-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */ url('fonts/roboto-v20-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */ } /* roboto-500italic - latin */ @font-face { font-family: 'Roboto'; font-style: italic; font-weight: 500; src: url('fonts/roboto-v20-latin-500italic.eot'); /* IE9 Compat Modes */ src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'), url('fonts/roboto-v20-latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/roboto-v20-latin-500italic.woff2') format('woff2'), /* Super Modern Browsers */ url('fonts/roboto-v20-latin-500italic.woff') format('woff'), /* Modern Browsers */ url('fonts/roboto-v20-latin-500italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('fonts/roboto-v20-latin-500italic.svg#Roboto') format('svg'); /* Legacy iOS */ } /* roboto-700 - latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; src: url('fonts/roboto-v20-latin-700.eot'); /* IE9 Compat Modes */ src: local('Roboto Bold'), local('Roboto-Bold'), url('fonts/roboto-v20-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/roboto-v20-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('fonts/roboto-v20-latin-700.woff') format('woff'), /* Modern Browsers */ url('fonts/roboto-v20-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('fonts/roboto-v20-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */ } /* roboto-700italic - latin */ @font-face { font-family: 'Roboto'; font-style: italic; font-weight: 700; src: url('fonts/roboto-v20-latin-700italic.eot'); /* IE9 Compat Modes */ src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url('fonts/roboto-v20-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/roboto-v20-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */ url('fonts/roboto-v20-latin-700italic.woff') format('woff'), /* Modern Browsers */ url('fonts/roboto-v20-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('fonts/roboto-v20-latin-700italic.svg#Roboto') format('svg'); /* Legacy iOS */ } /*Cookie-Consent-Tool*/ .cli-privacy-overview h4, #cookie-law-info-bar h5.cli_messagebar_head { font-size: 110%!important; font-weight: 500!important; } /* /* Eigene Font Awsome-Icons - https://divi-magazine.com/how-to-replace-the-blurb-icon-with-font-awesome/ Kommentar von Cesar Garcia*/ /* content: "\f5dc"; funktionierte nicht */ /*—- Custom FontAwesome Icons for Blurbs —-*/ /* .avs-fa-paw .et-pb-icon::after { content: "\f5dc"; font-family: "Font Awesome 5 Free"!important; font-size: 60px!important; } */ /* Daher über DIVI > INTEGRATION > HEAD Font Awesome über Referenzierung eingebunden und ohne Kreise gearbeitet: */ /* https://fontawesome.com/start */ .avs-fa { text-align: center; margin-top: 0.25em; font-size: 6em; color: #006b00; } /*-------------------------------------------------------*/ /*----- END SCHRIFTEN -----*/ /*-------------------------------------------------------*/ /*-------------------------------------------------------*/ /*----- INTRO HIGHER5 -----*/ /*-------------------------------------------------------*/ #intro-higher5 figure:nth-of-type(1) { animation-delay: 5s; animation-duration: 6s; opacity: 0; z-index: 102; animation-name: avsupsize-from-bottom; -webkit-animation-name: avsupsize-from-bottom; animation-fill-mode: forwards;/*stoppt animation bei letztem Bild statt wieder bis zum ersten Bild zu wechseln*/ -webkit-animation-fill-mode: forwards; } #intro-higher5-2 figure:nth-of-type(1) { animation-delay: 8s; animation-duration: 2.5s; opacity: 0; z-index: -9999; animation-name: avsupsize-from-center; -webkit-animation-name: avsupsize-from-center; animation-fill-mode: forwards;/*stoppt animation bei letztem Bild statt wieder bis zum ersten Bild zu wechseln*/ -webkit-animation-fill-mode: forwards; } /*UPSIZE Animation FROM BOTTOM - LOGO Higher5*/ @-moz-keyframes avsupsize-from-bottom { /*AVS: scale(sx,sy) > wenn Start bei 0,0 und Ende bei 1,1: gleichmäßige Vergrößerung vom Zentrum aus > wenn Start bei 1,0 und Ende bei 1,1: x-Achse volle Breite des Bildes und nur die Höhe wird skaliert */ 0% {opacity: 0; -moz-transform: scale(1,1); transform-origin: bottom;} 100% {opacity: 1; -moz-transform: scale(1.25,1.25); transform-origin: bottom;} } @-webkit-keyframes avsupsize-from-bottom { 0% {opacity: 0; -webkit-transform: scale(1,1); transform-origin: bottom;} 100% {opacity: 1; -webkit-transform: scale(1.25,1.25); transform-origin: bottom;} } @-o-keyframes avsupsize-from-bottom { 0% {opacity: 0; -o-transform: scale(1,1); transform-origin: bottom;} 100% {opacity: 1; -o-transform: scale(1.25,1.25); transform-origin: bottom;} } @keyframes avsupsize-from-bottom { 0% {opacity: 1; transform: scale(1,1); transform-origin: bottom;} 100% {opacity: 1; transform: scale(1.25,1.25); transform-origin: bottom;} /*transform-origin ---> | left | center | right | top | bottom ]*/ } /*UPSIZE Animation FROM CENTER - Circle Higher5*/ @-moz-keyframes avsupsize-from-center { /*AVS: scale(sx,sy) > wenn Start bei 0,0 und Ende bei 1,1: gleichmäßige Vergrößerung vom Zentrum aus > wenn Start bei 1,0 und Ende bei 1,1: x-Achse volle Breite des Bildes und nur die Höhe wird skaliert */ 0% {opacity: 0; -moz-transform: scale(0,0); transform-origin: center;} 100% {opacity: 0.4; -moz-transform: scale(2.75,2.75); transform-origin: center;} } @-webkit-keyframes avsupsize-from-center { 0% {opacity: 0; -webkit-transform: scale(0,0); transform-origin: center;} 100% {opacity: 0.4; -webkit-transform: scale(2.75,2.75); transform-origin: center;} } @-o-keyframes avsupsize-from-center { 0% {opacity: 0; -o-transform: scale(0,0); transform-origin: center;} 100% {opacity: 0.4; -o-transform: scale(2.75,2.75); transform-origin: center;} } @keyframes avsupsize-from-center { 0% {opacity: 0; transform: scale(0,0); transform-origin: center;} 100% {opacity: 0.4; transform: scale(2.75,2.75); transform-origin: center;} /*transform-origin ---> | left | center | right | top | bottom ]*/ } .avs-dare-to-rise.medium { font-size: 7vw; font-size: 6vw; color: #6e0652!important; } .avs-dare-to-rise.large { font-size: 14vw; font-size: 13vw; /* background: -webkit-linear-gradient(#043c40,#01868b); background-image:linear-gradient(90deg,#01868b,#043c40); */ -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-fill-color: #b7df15; } @media screen and (max-width: 1200px) { .avs-dare-to-rise.medium { font-size: 10vw; } .avs-dare-to-rise.large { font-size: 18vw; } } @media screen and (max-width: 560px) { .avs-dare-to-rise.medium { font-size: 5em; } .avs-dare-to-rise.large { font-size: 8em; } } .slide-fwd-center { -webkit-animation: slide-fwd-center 3s cubic-bezier(0.190, 1.000, 0.220, 1.000) 1s both; animation: slide-fwd-center 3s cubic-bezier(0.190, 1.000, 0.220, 1.000) 1s both; } /* ---------------------------------------------- * Generated by Animista on 2025-6-23 13:15:15 * Licensed under FreeBSD License. * See http://animista.net/license for more info. * w: http://animista.net, t: @cssanimista * ---------------------------------------------- */ /** * ---------------------------------------- * animation slide-fwd-center * ---------------------------------------- */ @-webkit-keyframes slide-fwd-center { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } 100% { -webkit-transform: translateZ(160px); transform: translateZ(160px); } } @keyframes slide-fwd-center { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } 100% { -webkit-transform: translateZ(160px); transform: translateZ(160px); } } /*-------------------------------------------------------*/ /*----- END INTRO HIGHER5 -----*/ /*-------------------------------------------------------*/ /*-------------------------------------------------------*/ /*----- ALLGEMEINE AUSZEICHNUNGEN -----*/ /*-------------------------------------------------------*/ /* -------------------------------------------------------------*/ /* Auf dem iPhone (aber nicht Safari Mac oder Windows Firefox, IE, Chrome,... ist ein horizontales Scrollen möglich. Unterbinden:*/ #page-container { position:relative; overflow-x:hidden; } body { font-weight: normal; letter-spacing: 0px; color: #000!important; font-family: 'Roboto'!important; font-weight: 500; } body .et_pb_text .et_pb_text_inner p, body .et_pb_text .et_pb_text_inner ul, body .et_pb_text .et_pb_text_inner ol { font-size: 1.2em; } body .et_pb_blurb_content { font-size: 1.1em; } @media screen and (max-width: 580px) { body .et_pb_text .et_pb_text_inner p, body .et_pb_text .et_pb_text_inner ul, body .et_pb_text .et_pb_text_inner ol { font-size: 1em; } body .et_pb_blurb_content { font-size: 1em; } } strong, b { font-weight: 600 !important; } #et-main-area p a, .et_pb_blurb_container a { font-weight: 600 !important; } #et-main-area p a:hover, .et_pb_blurb_container a:hover { text-decoration: underline !important; color: #9e047f !important; } .txt-link-color, .txt-link-color .et_pb_text_inner { color: #9e047f; } h1, h2, h3, h4, h5, h6 { font-family: 'Roboto'!important; font-weight: 300!important; color: #2e3e4d!important; } h1 { color: #2e3e4d!important; font-size: 300%!important; line-height: 120%!important; margin: 0!important; margin-bottom: 0!important; padding: 0!important; padding-bottom: 0.5em!important; } /*ALT'/ h1.header { font-size: 400%; font-weight: 300!important; } h1.header span { font-size: 95%; font-weight: 500!important; } .header-content h1.et_pb_module_header { font-size: 300%!important; } /*END ALT*/ h2 { font-size: 220%!important; font-weight: 300!important; line-height: 120%!important; margin: 0!important; margin-top: 0!important; padding: 0!important; margin-bottom: 0.5em!important; } h2.header { font-size: 150%!important; font-weight: 300!important; } h2.cta-header { font-size: 150%!important; font-weight: 400!important; } /*-------------------------------------------------------*/ /*----- HEADER-BLOCK -----*/ /*-------------------------------------------------------*/ /*HEADER-BILDANIMATION VON GRAU ZU FARBE*/ /*https://stackoverflow.com/questions/38342339/css-transition-image-from-black-white-to-color*/ /* VORLAGE @keyframes toColor { 0% { -webkit-filter: grayscale(100%); filter: grayscale(100%); } 25% { -webkit-filter: grayscale(75%); filter: grayscale(75%); } 50% { -webkit-filter: grayscale(50%); filter: grayscale(50%); } 75% { -webkit-filter: grayscale(25%); filter: grayscale(25%); } 100% { -webkit-filter: grayscale(0%); filter: grayscale(0%); } } */ @keyframes toColor { 0% { -webkit-filter: grayscale(100%); filter: grayscale(100%); } 25% { -webkit-filter: grayscale(100%); filter: grayscale(100%); } 50% { -webkit-filter: grayscale(100%); filter: grayscale(100%); } 65% { -webkit-filter: grayscale(50%); filter: grayscale(50%); } 80% { -webkit-filter: grayscale(25%); filter: grayscale(25%); } 100% { -webkit-filter: grayscale(0%); filter: grayscale(0%); } } .avs-coloration { animation: toColor 7s; } /*END HEADER-BILDANIMATION VON GRAU ZU FARBE*/ .avs-keyvisual-header h1 { color: #fff!important; font-size: 350%!important; line-height: 100%!important; padding-bottom: 1em!important; } .avs-keyvisual-header-subtext { color: #fff!important; font-size: 170%!important; line-height: 130%!important; } .avs-keyvisual-header-subtext p { padding-bottom: 0.25em!important; } @media screen and (min-width: 2000px) { .avs-keyvisual-header.large h1 { font-size: 450%!important; } .avs-keyvisual-header.medium h1 { font-size: 420%!important; } .avs-keyvisual-header.small h1 { font-size: 380%!important; } .avs-keyvisual-header-subtext.large { font-size: 210%!important; } .avs-keyvisual-header-subtext.medium { font-size: 190%!important; } .avs-keyvisual-header-subtext.small { font-size: 180%!important; } } @media screen and (max-width: 980px) { .avs-keyvisual-header.large h1, .avs-keyvisual-header.medium h1, .avs-keyvisual-header.small h1{ font-size: 320%!important; } .avs-keyvisual-header-subtext.large, .avs-keyvisual-header-subtext.medium, .avs-keyvisual-header-subtext.small { font-size: 130%!important; } .avs-keyvisual-header-subtext p { padding-bottom: 1em!important; } } @media screen and (max-width: 600px) { .avs-keyvisual-header.large h1, .avs-keyvisual-header.medium h1, .avs-keyvisual-header.small h1{ font-size: 290%!important; } .avs-keyvisual-header-subtext.large, .avs-keyvisual-header-subtext.medium, .avs-keyvisual-header-subtext.small { font-size: 130%!important; } } /*CTA BTN-Header*/ @media screen and (max-width: 1320px) { a.btn-cta-header { font-size: 100%!important; /*margin-left: -2em !important;*/ } } @media screen and (max-width: 740px) { a.btn-cta-header { font-size: 0.85em !important; /*margin-left: -5em !important;*/ /*display: none !important;*/ text-align: center !important; } } .content-header-main .et_pb_text_inner h2 { font-size: 240%!important; font-weight: 400!important; } .content-header-main .et_pb_text_inner h2 span { font-size: 140%!important; font-weight: 300!important; line-height: 110%!important; color: #5f6973!important; } @media screen and (max-width: 1200px) { .avs-infobox h2 { font-size: 180%!important; } } /*-------------------------------------------------------*/ /*----- END HEADER-BLOCK -----*/ /*-------------------------------------------------------*/ h3 { font-size: 180%!important; margin: 1em 0 0 0!important; padding: 0 0 0.5em 0!important; line-height: 130%!important; } .h3-footer-headerimage { width: 100%; background: rgba(0,0,0,0.3); margin: 0!important; margin-top:-60px!important; padding: 0!important; z-index: 10000!important; } .avs-h4-infobox-box-numbers h2 { margin-top: 1em!important; padding: 0px; } .avs-h4-infobox-box-numbers h4 { font-size: 3.5em!important; font-weight: 500!important; color: #5f6973!important; margin: 0px!important; margin-bottom: -0.60em!important; padding: 0px; } /*-------------------------------------------------------*/ /*----- H3 Footer Headerimage -----*/ /*-------------------------------------------------------*/ /*avs: mit DIVI Update von 11.2019 wurde das CORE styles.css so geändert, dass die Headerbilder ÜBER der H3-Textleiste liegen. Dadurch wird die H3-Textleiste kurz eingeblendet und verschwindet dann wieder > daher hier explizit z-index für H3-Textleiste und Headerbilder definiert:*/ .et_pb_module.et_pb_fullwidth_code { z-index: 1!important; } .h3-footer-headerimage h3 { font-size: 130%!important; color: #fff!important; margin: 0!important; padding: 5px 0 5px 20px!important; text-transform: uppercase!important; letter-spacing: 1px; } @media screen and (max-width: 600px) { .h3-footer-headerimage { background: rgba(0,0,0,0.4); margin-top:-54px!important; } .h3-footer-headerimage h3 { font-size: 95%!important; text-align: center!important; padding: 5px 0 5px 5px!important; } } /*-------------------------------------------------------*/ /*----- END H3 Footer Headerimage -----*/ /*-------------------------------------------------------*/ h4 { font-size: 130%!important; font-weight: 500!important; color: #2e3e4d!important; line-height: 150%; margin: 0.75em 0; } /*Slide-In - Slider rechter Rand*/ h4.et_pb_module_header { font-size: 110%!important; } /*END Slide-In - Slider rechter Rand*/ h5 { font-size: 120%; font-weight: 500!important; color: #2e3e4d!important; line-height: 140%; margin: 0.75em 0; } .avs-callout-dark .et_pb_text_inner h3 { font-weight: 300!important; color: #5f6973!important; } .avs-callout-light .et_pb_text_inner h3 { font-weight: 500!important; line-height: 100%!important; text-transform: uppercase; color: #98a2ac!important; } .avs-callout-dark.large .et_pb_text_inner h3 { font-size: 600%!important; line-height: 100% !important; } .avs-callout-light.large .et_pb_text_inner h3 { font-size: 1000%!important; } .avs-callout-dark.medium .et_pb_text_inner h3 { font-size: 500%!important; line-height: 90% !important; } .avs-callout-light.medium .et_pb_text_inner h3 { font-size: 800%!important; } .avs-callout-dark.small .et_pb_text_inner h3 { font-size: 400%!important; line-height: 90% !important; } .avs-callout-light.small .et_pb_text_inner h3 { font-size: 600%!important; } .avs-callout-dark.x-small .et_pb_text_inner h3 { font-size: 300%!important; line-height: 90% !important; } .avs-callout-light.x-small .et_pb_text_inner h3 { font-size: 400%!important; } @media screen and (max-width: 980px) { h1 { font-size: 220%!important; line-height: 120%!important; } .header-content h1.et_pb_module_header { font-size: 200%!important; line-height: 120%!important; } h2 { font-size: 170%!important; line-height: 110%!important; } /*Slide-In - Slider rechter Rand*/ h4.et_pb_module_header { font-size: 90%!important; } /*END Slide-In - Slider rechter Rand*/ } /*Suchergebnisseite: Font ändern:*/ h2.entry-title { color: #333!important; font-size: 25px!important; margin-bottom: 0.5em!important; } h2.entry-title a { text-decoration: none!important; line-height: 130%!important; } #left-area .et_pb_post { max-width: 80%!important; padding-bottom: 25px!important; border-bottom: 1px solid #8cc04b!important; } .h-partner { color: #333!important; font-size: 180%!important; } .h-partner span { color: #333!important; } /*-------------------------------------------------------------*/ /*Zitatblöcke - Zeichen: https://www.toptal.com/designers/htmlarrows/symbols/*/ blockquote { border: 0px !important; font-style: italic; } blockquote > p { display: inline-block !important; } blockquote > p:before { content: "\275D"; font-size: 4em; color: #8c98a5; padding-right: 0.4em; position: relative; top: 0 !important; } blockquote > p:after { content: "\275E"; font-size: 4em; color: #8c98a5; padding-left: 1.25em; float: right !important; bottom: 0 !important; } /*-------------------------------------------------------------*/ /*Tumbnails Bildquellennachweise*/ dl.bildquellennachweis.inline dd { display: inline; margin: 0; padding-left: 20px; } dl.bildquellennachweis.inline dd:after{ display: block; content: ''; border-top: 1px dotted #666; padding-bottom: 1.00em; } dl.bildquellennachweis.inline dt{ display: inline-block; min-width: 180px; padding-left: 20px; } @media screen and (max-width: 750px) { #bildquellennachweise h3 { padding-left: 20px; font-size: 120%; } dl.bildquellennachweis.inline dt { padding-left: 20px; display: block; } dl.bildquellennachweis.inline dd { display: block; padding-left: 20px; font-size: 80%; } } /*END Tumbnails Bildquellennachweise*/ /*-------------------------------------------------------*/ /*----- END - ALLGEMEINE AUSZEICHNUNGEN -----*/ /*-------------------------------------------------------*/ /*------------------------------------------------*/ /*---IMAGES---*/ /*------------------------------------------------*/ .circular img { border-radius: 50%; } /*------------------------------------------------*/ /*---END IMAGES---*/ /*------------------------------------------------*/ /*-------------------------------------------------------*/ /*----- HEADER -----*/ /*-------------------------------------------------------*/ #main-header { position: relative; z-index: 99999; top: 0; border-top: 0px solid #000!important; width: 100%; background-color: #fff; /*AVS: statt hartem Verschwinden des BG dieses ausfaden:*/ -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; } /*Breite des Headers (d.h. des Menüs) vergroessern, bei einer bestimmten Maximalbreite des Browsers, damit die Menüelemente nicht zweizeilig werden*/ @media screen and (min-width: 981px) and (max-width: 1250px) { #main-header .container, #top-header .container { width: 100%; max-width: 100%; padding-right: 10px; padding-left: 10px; } } @media screen and (max-width: 980px) { .et_pb_menu__logo-wrap .et_pb_menu__logo { min-width: 220px!important; width: auto!important; } } /* @media screen and (max-width: 1050px) { .logo_container img { max-height: 70px!important; } } */ /*END Breite des Headers (d.h. des Menüs) vergroessern */ @media screen and (max-width: 980px) { .header-content .et_pb_fullwidth_header_subhead { font-size: 130%!important; line-height: 180%!important; } .page-id-11 .et_pb_fullwidth_header .et_pb_fullwidth_header_scroll { bottom: 1em!important; } } /*-------------------------------------------------------*/ /*----- END HEADER -----*/ /*-------------------------------------------------------*/ /*-------------------------------------------------------*/ /*----- Hauptnavigation -----*/ /*-------------------------------------------------------*/ /*-------------------------------------------------------*/ /*----- Navigation verkleinern bei Scrolldown -----*/ /*-------------------------------------------------------*/ /*Shrink Menu für Menus, die mit Theme Builder erstellt werden*/ /*https://www.peeayecreative.com/how-to-shrink-the-divi-header-menu-when-scrolling/*/ /*Set the transition for the spacing shrinking action*/ .avs-menu-header .et_pb_row { -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; } .avs-fixed-header .et_pb_row { padding: 0px 0; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; width: 50% !important; } /*Set the transition for the logo shrinking action*/ .avs-menu-header .et_pb_menu__logo img { -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; } /*change the logo size when the header shrinks*/ .avs-fixed-header .et_pb_menu__logo img { max-width: 80%; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; } /*Set the transition for the font size shrinking action*/ .avs-menu-header .et_pb_menu ul li a { -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; } /*change the menu font size when the header shrinks*/ .avs-fixed-header .et_pb_menu ul li a { font-size: 0.9em !important; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; } /*-------------------------------------------------------*/ /*----- END Navigation verkleinern bei Scrolldown -----*/ /*-------------------------------------------------------*/ /*Primary Menu with contact data - phone, etc.*/ .et_pb_blurb_description p a:hover { color: #a27530 !important; } .avs-primary-header-contact-phone .et_pb_blurb_content { text-align: right !important; float: right !important; } /*END Primary Menu with contact data - phone, etc.*/ .et_pb_menu__menu nav.et-menu-nav a { text-decoration: none; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; /*avs:*/ font-weight: 500; padding-left: 0.25em!important; padding-right: 0.25em!important; text-transform: uppercase; font-size: 110%!important; width: 100%!important; } .et_pb_menu__menu nav.et-menu-nav ul li.current-menu-item a { color: #2e3d4d!important; } .et_pb_menu__menu nav.et-menu-nav > ul > li > a:hover { opacity: 1; font-weight: 500; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; color: #224a75!important; } /*-------------------------------------------------------*/ /*----- Underline Active Main Menu -----*/ /*-------------------------------------------------------*/ /*https://www.elegantthemes.com/blog/divi-resources/beautiful-css-hover-effects-you-can-add-to-your-divi-menus made suitable for individual CSS wrapping*/ .et_pb_menu__menu nav.et-menu-nav .current-menu-item a::before, .et_pb_menu__menu nav.et-menu-nav .current_page_item a::before, .et_pb_menu__menu nav.et-menu-nav .current-menu-parent a::before { content: ""; position: absolute; z-index: 2; left: 0; right: 0; } .et_pb_menu__menu nav.et-menu-nav > ul > li.menu-item-has-children > a { color: #2e3d4d !important; } .et_pb_menu__menu nav.et-menu-nav > ul > li.current_page_item > a, .et_pb_menu__menu nav.et-menu-nav > ul > li.current-menu-parent > a { color: #a27530 !important; } .et_pb_menu__menu nav.et-menu-nav > ul > li > a:before { content: ""; position: absolute; z-index: -2; left: 0; right: 100%; bottom: 0%; margin-bottom: -5px; background: #2e3d4d; /*** COLOR OF THE LINE ***/ background: #a27530; /*** COLOR OF THE LINE ***/ height: 4px; /*** THICKNESS OF THE LINE ***/ -webkit-transition-property: right; transition-property: right; -webkit-transition-duration: 0.6s; transition-duration: 0.6s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .et_pb_menu__menu nav.et-menu-nav li a { opacity: 0.75 !important; } .et_pb_menu__menu nav.et-menu-nav li a:hover { opacity: 1 !important; color: #a27530 !important; } .et_pb_menu__menu nav.et-menu-nav li a:hover:before { right: 0; } .et_pb_menu__menu nav.et-menu-nav li li a:before { bottom: 10%; } /*-------------------------------------------------------*/ /*----- END Underline Active Main Menu -----*/ /*-------------------------------------------------------*/ /* DISABLE Dropdown Arrows */ .et_pb_menu__menu nav.et-menu-nav .menu-item-has-children > a:first-child:after, #top-menu .menu-item-has-children > a:first-child:after, #et-secondary-nav .menu-item-has-children > a:first-child:after { position: absolute; top: 0; right: 0; font-family: "ETmodules"; font-size: 0px; /*avs*/ /*font-weight: 800;*/ content: "3"; } /*-------------------------------------------------------*/ /*----- ANZEIGEEINSTELLUNGEN FÜR SUBMENUE-BLOCK -----*/ /*-------------------------------------------------------*/ .et_pb_menu__menu nav.et-menu-nav > ul > li.menu-item-has-children > ul { /*margin-top: 6px !important;*/ border-top: 10px solid rgba(255,255,255, 0.2) !important; } /* Dropdown Animations */ .et_pb_menu__menu nav.et-menu-nav ul li.menu-item-has-children:hover > ul.sub-menu { /*Einblendegeschwindigkeit Submenue - Standard: 0.2s*/ -webkit-transition: all 1.2s ease-in-out; -moz-transition: all 1.2s ease-in-out; transition: all 1.2s ease-in-out; } /*AVS: statt hartem Verschwinden des Submenues dieses ausfaden:*/ .et_pb_menu__menu nav.et-menu-nav ul li.menu-item-has-children > ul.sub-menu { /*Einblendegeschwindigkeit Submenue - Standard: 0.2s*/ -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; } .et_pb_menu__menu nav.et-menu-nav ul li.menu-item-has-children > ul.sub-menu li a { color: #cc0000 !important; } /*AVS: PROBLEM: beim Mobile-Menu wird per JavaScript er Text des Submenus zunaechst unsichtbar gesetzt und bei Ausklappen dann sichtbar. Da das Menu fuer Mega-Menu und normales Submenu aber gleich gewrapped wird im HTML-Code, ist es dann auch nicht sichbar. Allerdings nur in Spezialfaellen wie Suchergebnisseite OHNE Suchtreffer oder Page-Not-Found-Seite LOESUNG ist jedoch nicht hier im individuellen CSS zu finden (hat stundenlanges Suchen und Probieren gekostet), sondern im Divi-Theme-Builder muss geändert werden, denn die dortigen Einstellungen sind "staerker", da wohl das CSS weiter unten im HTML integriert wird. Eingestellt werden muss unter: ### Divi Theme Builder (Theme Suchergebnisse, 404 Seite, etc.) > Global Header > Menüleiste > Design > Dropdown-Menü-Links ### und dort eine Hintergrundfarbe sowie eine SCHRIFTFARBE UND HOVER-Farbe für das Drop-Down-Menu festlegen! */ /* .et_pb_menu__menu nav.et-menu-nav ul#menu-main-menue li.first-level ul.sub-menu li.second-level a { color: #cc0000 !important; opacity: 1; display: block !important; visibility: visible !important; z-index: 9999 !important; } */ /* Sub-Menu des letzten Hauptmenupunktes nach links ausrichten, damit auf kleineren Screens voll sichtbar - aber nur, wenn kein Mobile Menue angezeigt wird, d.h. Breite groesser als 980px */ @media (min-width: 981px){ .et_pb_menu__menu nav.et-menu-nav ul li:last-child:hover > ul { margin-left: -150px!important; } #main-header { /*border-bottom: 1px solid #a5a5a5;*/ -webkit-box-shadow: 0px 8px 11px 0px rgba(138,138,138,1); -moz-box-shadow: 0px 8px 11px 0px rgba(138,138,138,1); box-shadow: 0px 8px 11px 0px rgba(0,0,0,0.2); } #top-menu { padding-top: 10px; } nav.et-menu-nav li a, #top-menu li a { color: #5c5c5c!important; margin-left: 0!important; margin-right: 0!important; padding-left: 0!important; padding-right: 0!important; } } /*-------------------------------------------------------*/ /*----- END ANZEIGEEINSTELLUNGEN FÜR SUBMENUE-BLOCK -----*/ /*-------------------------------------------------------*/ /*-------------------------------------------------------*/ /*----- END Hauptnavigation -----*/ /*-------------------------------------------------------*/ /*-------------------------------------------------------*/ /*----- Sub-Menu -----*/ /*-------------------------------------------------------*/ @media screen and (min-width: 980px) { /*-------------------------------------------------------*/ /*----- SUB-MENU - 1st LEVEL -----*/ /*-------------------------------------------------------*/ /*avs: overwrite defautl width of 240px*/ .nav li ul, .nav li li ul, ul.sub-menu li { margin-top: 1px; width: 300px; } .nav li li a { width: 100%!important; } /*avs: END overwrite defautl width of 240px*/ .nav li ul { border-top: 1px solid #444a51!important; } .et_pb_menu__menu nav.et-menu-nav li ul.sub-menu li:first-child { margin-top: 0px !important; } .et_pb_menu__menu nav.et-menu-nav li ul.sub-menu { margin-top: 0px!important; padding-top: 0px!important; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,e3e2e2+100 */ background: #ffffff!important; /* Old browsers */ background: -moz-linear-gradient(top, #ffffff 0%, #e3e2e2 100%)!important; /* FF3.6-15 */ background: -webkit-linear-gradient(top, #ffffff 0%,#e3e2e2 100%)!important; /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #ffffff 0%,#e3e2e2 100%)!important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e3e2e2',GradientType=0 )!important; /* IE6-9 */ -webkit-box-shadow: 0px 8px 11px 0px rgba(138,138,138,1); -moz-box-shadow: 0px 8px 11px 0px rgba(138,138,138,1); box-shadow: 0px 8px 11px 0px rgba(138,138,138,1); } ul.sub-menu li:first-child { border-top: 1px solid #9e9e9e; } ul.sub-menu li { border-bottom: 1px solid #9e9e9e; font-size: 120%!important; margin-top: -1px; } ul.sub-menu > li:hover { background: #2e3d4d; /* #AVS-MENU-THEMEBUILDER Blauer BG geht, aber das gibt Probleme mit dem Divi-Theme-Builder, da dort für die Suchergebnisseite und 404-Seite die Farben in Divi definiert werden müssen. Die werden von DIVI per !important ganz unten in den Quellcode reingehauen und überschreiben daher das, was man hier festlegt. Daher müssen Meta-Menü und Normales Sub-Menu bei Rollover entweder BEIDE einen blauen Hintergrund und weiße Schrift haben. Oder aber eben BEIDE einen hellen Hintergrund und farbige Schrift. Aber es ist nicht möglich, das eine so und das andere anders zu gestalten Zusätzliche Anpassungen suche: #AVS-MENU-THEMEBUILDER*/ background: transparent; opacity: 1; } /*avs: verhindert den ca. 0.3 Standard-Cover von DIVI:*/ ul.sub-menu > li > a:hover, ul.sub-menu > li.current-menu-item > a:hover { opacity: 1; color:#fff !important; /*#AVS-MENU-THEMEBUILDER - Farbe muss auch im Theme-Builder definiert werden*/ color: #a27530 !important; background: transparent; } .et_pb_menu__menu nav.et-menu-nav > ul > li > ul.sub-menu > li.current-menu-item.current_page_item > a { color: #a27530 !important; font-weight: 500; } /*avs: Sub-Menu Item mit active Color bei Rollover wieder mit weißer Schrift anzeigen:*/ .et_pb_menu__menu nav.et-menu-nav ul li ul.sub-menu li.current-menu-item.current_page_item > a:hover { color: #fff !important; /*#AVS-MENU-THEMEBUILDER - Farbe muss auch im Theme-Builder definiert werden*/ color: #a27530 !important; font-weight: 400; } ul.sub-menu li a, ul.sub-menu li a:link, ul.sub-menu li a:active { font-size: 90%!important; } .et_pb_menu__menu nav.et-menu-nav > ul > li.menu-item-has-children > ul.sub-menu > li > a { color: #2e3d4d !important; opacity: 1; } .et_pb_menu__menu nav.et-menu-nav > ul > li.menu-item-has-children > ul > li > a:hover { color:#fff !important; /*#AVS-MENU-THEMEBUILDER - Farbe muss auch im Theme-Builder definiert werden*/ color: #a27530 !important; -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; } /*AVS: statt hartem Verschwinden des Submenues dieses ausfaden:*/ .et_pb_menu__menu nav.et-menu-nav > ul > li.menu-item-has-children > ul.sub-menu > li { /*Einblendegeschwindigkeit Submenue - Standard: 0.2s*/ -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; } /*-------------------------------------------------------*/ /*----- END SUB-MENU - 1st LEVEL -----*/ /*-------------------------------------------------------*/ /*-------------------------------------------------------*/ /*----- MEGA-MENU - 1st LEVEL -----*/ /*-------------------------------------------------------*/ .et_pb_menu__menu nav.et-menu-nav li.mega-menu ul.sub-menu li:hover { background: transparent!important; } .et_pb_menu__menu nav.et-menu-nav li.mega-menu ul.sub-menu { margin-top: 6px!important; padding-top: 28px !important; margin-right: 0!important; border: 0!important; border-top: 1px solid #444a51!important; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,e3e2e2+100 */ background: #ffffff!important; /* Old browsers */ background: -moz-linear-gradient(top, #ffffff 0%, #e3e2e2 100%)!important; /* FF3.6-15 */ background: -webkit-linear-gradient(top, #ffffff 0%,#e3e2e2 100%)!important; /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #ffffff 0%,#e3e2e2 100%)!important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e3e2e2',GradientType=0 )!important; /* IE6-9 */ -webkit-box-shadow: 0px 8px 11px 0px rgba(138,138,138,1); -moz-box-shadow: 0px 8px 11px 0px rgba(138,138,138,1); box-shadow: 0px 8px 11px 0px rgba(138,138,138,1); } .et_pb_menu__menu nav.et-menu-nav li.mega-menu ul.sub-menu li { border: 0!important; } .et_pb_menu__menu nav.et-menu-nav li.mega-menu ul.sub-menu li:first-child { border-top: 0!important; } /*.et_pb_menu__menu nav.et-menu-nav li.mega-menu ul.subm-menu li a:first-child,*/ .et_pb_menu__menu nav.et-menu-nav li.mega-menu > ul > li > a:first-child { padding-top: 0 !important; border-bottom: 1px solid rgba(0, 0, 0, 0.2)!important; } .et_pb_menu__menu nav.et-menu-nav > li.mega-menu > ul.sub-menu > li:hover { background: rgba(255,255,255,0.8); background: transparent; } .et_pb_menu__menu nav.et-menu-nav li.mega-menu ul.sub-menu li a { color: #2e3d4d!important; font-weight: 500!important; margin-top: 10px!important; margin-left: 10px !important; } .et_pb_menu__menu nav.et-menu-nav li.mega-menu ul.sub-menu li a:hover, .et_pb_pagebuilder_layout .et_pb_menu__menu nav.et-menu-nav li.mega-menu ul.sub-menu li a:hover { color: #a27530!important; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; transition: all 0.8s; } /*This will change the active submenu item colour of Mega-Menu*/ .et_pb_menu__menu nav.et-menu-nav li.mega-menu ul.sub-menu li.current-menu-item a, .et_pb_menu__menu nav.et-menu-nav li.mega-menu ul.sub-menu li.current-menu-item.current_page_item a:hover { color: #a27530!important; font-weight: 600!important; } /*Dreispaltiges Mega-Menu - https://www.divithemeexamples.com/divi-mega-menu-6-columns/*/ /*https://www.markhendriksen.com/how-to-create-a-divi-mega-menu/*/ .et_pb_menu__menu nav.et-menu-nav li.mega-menu > ul > li { width: 33.33%; /*width: 25%;*/ margin: 0; } .et_pb_menu__menu nav.et-menu-nav li.mega-menu > ul > li:nth-of-type(5n) { clear: none; } .et_pb_menu__menu nav.et-menu-nav li.mega-menu > ul > li:nth-of-type(3n) { /*2021-11-30: war vorher (2n), da wurde aber letzte Reihe falsch umgebrochen!*/ clear: none; } .et_pb_menu__menu nav.et-menu-nav li.mega-menu ul.sub-menu li:last-child { border-top: 0; } /*-------------------------------------------------------*/ /*----- END MEGA-MENU - 1st LEVEL -----*/ /*-------------------------------------------------------*/ } /*-------------------------------------------------------*/ /*----- END Sub-Menu -----*/ /*-------------------------------------------------------*/ /*-------------------------------------------------------*/ /*----- MOBILE MENU -------------------------------------*/ /*-------------------------------------------------------*/ /** Beim Mobile-Menu zunaechst die Untermenuepunkte ausblenden und der Benutzer kann sie dann ausklappen: https://www.elegantthemes.com/blog/community/divi-mobile-menu-hack-collapsing-nested-sub-menu-items Es muss entsprechendes CSS und JavaScript vorhanden sein. Dieses wird unter DIVI > THEME-OPTIONS > INTEGRATION > "Code im unteren Bereich Ihrer Beitraege..." eingefuegt. Das funktionierte aber nicht. Daher Eintrag vorgenommen unter "Code dem Ihres Blogs hinzfuegen" Um die Standard-Symbole für Ausklappen (+) und Einklappen (x) zu aendern, muss das Icon ersetzt werden. Eine Uebersicht: https://www.elegantthemes.com/blog/resources/elegant-icon-font DER TRICK: Hier steht für das + "L", VERWENDET werden muss jedoch "\4c". Analog laesst sich das Plus-Zeichen in einen Pfeil-nach-unten-mit-Kreis aendern, indem verwendet wird: "\3b". */ /*ACHTUNG: wird das Menü mit dem DIVI THEME BUILDER erstellt, so weicht die Vorgehensweise ab - siehe: https://www.elegantthemes.com/blog/divi-resources/how-to-create-a-mobile-collapsing-nested-menu-with-divis-theme-builder WICHTIG: JavaScript muss stehen in: THEME-OPTIONS > INTEGRATION > CODE DEM HINZUFÜGEN Aber entgegen der Aussage in der Anleitung darf man das CSS dort nicht eintragen, sonst wird beim Menü erst gar kein Text angezeigt. Das CSS muss hier (nachfolgend) integriert werden! Auch danach sind die Navigationspunkte nicht sichtbar. Diese werden erst durch den alten (zusätzlichen) CSS-Code "aktiviert": */ .et_mobile_menu .first-level > a { background-color: transparent; position: relative; } .et_mobile_menu .first-level > a:after { font-family: 'ETmodules'; content: '\3b'; font-weight: bold; position: absolute; font-size: 16px; top: 13px; right: 10px; right: 3.5em; } .et_mobile_menu .first-level > .icon-switch:after{ /*https://www.markhendriksen.com/full-list-of-all-divi-icon-codes/*/ font-family: 'ETmodules'; content: '\51'; font-size: 16px; font-weight: bold; } .second-level { display: none; } .reveal-items { display: block; } /* .et_mobile_menu { margin-top: 20px; width: 230%; margin-left: -65%; } */ /*-------------------------------------------------------*/ /*----- ZUSÄTZLICHER CSS-CODE -------------------------------------*/ /*-------------------------------------------------------*/ /* Mobile Menu Standard-Code, modfied*/ .et_mobile_menu { margin-top: 15px !important;/*avs change*/ margin-left: -25px !important;/*avs change*/ display: none; visibility: visible; position: absolute; z-index: 9999; left: 0; width: 100%; padding: 5%; border-top: 1px solid #6b7177!important; /*avs change*/ } .et_mobile_menu li a { display: block; padding: 10px 5%; font-weight: 400 !important; border-bottom: 1px solid rgba(0, 0, 0, 0.03); border-bottom: 1px solid rgba(0, 0, 0, 0.25); /*avs change*/ color: #666; /*overflow: auto!important; */ } .et_mobile_menu > li > a:hover { background: transparent !important; opacity: 1 !important; font-weight: 500 !important; } .et_mobile_menu .current-menu-item > a { color: #a27530 !important; /*avs Farbe muss auch im Divi-Template definiert werden, sonst greift das nicht*/ font-weight: 600 !important; } .et_mobile_menu .menu-item-has-children > a, .et_mobile_menu .menu-item-has-children > a:hover { background-color: rgba(0, 0, 0, 0.03); background: transparent !important; font-weight: 400!important; opacity: 1; } .et_mobile_menu .menu-item-has-children > a:hover { font-weight: 500 !important; } .et_mobile_menu li.first-level.current-menu-parent.menu-item-has-children > a { font-weight: 500 !important; font-weight: 600 !important; color: #a27530 !important; } .et_mobile_menu li.first-level.menu-item-has-children ul.sub-menu li.second-level a:hover, .et_mobile_menu li.first-level.current-menu-parent.menu-item-has-children ul.sub-menu li.second-level a:hover { background: transparent !important; opacity: 1 !important; } .et_mobile_menu li.first-level.menu-item-has-children ul.sub-menu li.second-level a, .et_mobile_menu li.first-level.current-menu-parent.menu-item-has-children ul.sub-menu li.second-level a { font-weight: 400!important; } .et_mobile_menu li.first-level.current-menu-parent.menu-item-has-children ul.sub-menu li.second-level.current-menu-item a { font-weight:500!important; color: #a27530 !important; } .et_mobile_menu li .menu-item-has-children > a { background-color: transparent; } /* END Mobile Menu Standard-Code, modfied*/ .et_mobile_menu { margin-left: -30px; width: calc( 100% + 60px); padding: 5%; /*avs: overwrite*/ margin-left: -2.74%; width: 105.5%; background: #f0f0f0; border-bottom: 10px double #d0d0d0!important; border-bottom: 3px solid #6b7177!important; } .mobile_nav .mobile_menu_bar { margin-right: 10px!important; } /*Bei geöffnetem Mobile Menu ein X statt des Hamburger-Icons*/ .mobile_nav.opened .mobile_menu_bar:before { content: "\4d"; } /** App Style header and Drop Down Menu - https://divi.space/divi-tutorials/a-better-mobile-menu-style-for-divi/**/ @media (max-width: 980px) { /** App Style header and Drop Down Menu - https://divi.space/divi-tutorials/a-better-mobile-menu-style-for-divi/**/ .container .logo_container { margin-left:15px; } ul.sub-menu { background: #f0f0f0!important; } .container.et_menu_container { width: calc( 100% - 60px); width: 100%; } } /*-------------------------------------------------------*/ /*----- END MOBILE MENU -------------------------------------*/ /*-------------------------------------------------------*/ /*-------------------------------------------------------*/ /*----- CONTENT -----*/ /*-------------------------------------------------------*/ #main-content { min-height: 500px; color: #333!important; font-size: 110%; font-family: 'Roboto'!important; font-weight: 400; line-height: 180%; } /*Bild-Titel nicht ausgeben im Frontend: https://divimundo.com/en/blog/how-to-hide-the-divi-image-title-on-hover-the-easy-way/ (leicht modifiziert von AVS)*/ .et_pb_image_wrap img { /*display: none !important;*/ pointer-events:none !important; } /*Listen*/ #main-content ul li, #main-content ol li { padding-bottom: 1em; line-height: 180%; margin-left: 0.75em; } /*Spezielle Listen*/ .et_pb_text.avs-list-checkmark ul, .et_pb_module.avs-list-checkmark ul, .et_pb_text.avs-list-checkmark.negative ul, .et_pb_module.avs-list-checkmark.negative ul { margin-left: 2em; } .et_pb_text.avs-list-checkmark ul li, .et_pb_module.avs-list-checkmark ul li, .et_pb_text.avs-list-checkmark.negative ul li, .et_pb_module.avs-list-checkmark.negative ul li { list-style-type: none; text-indent: -1.15em; } /*Listen mit Haeckchen: https://www.divi-community.fr/en/tutoriels-divi/comment-remplacer-puces-listes-par-icones-dans-divi/*/ /*https://stierdev.com/divi-icons-css-codes/*/ .et_pb_text.avs-list-checkmark ul li::before, .et_pb_module.avs-list-checkmark ul li::before, .et_pb_text.avs-list-checkmark.negative ul li::before, .et_pb_module.avs-list-checkmark.negative ul li::before{ font-family: 'ETmodules'; content: "\52"; font-size: 150%; color: #005d79; float: left; margin-left: -1em; margin-right: 1.5em; } .et_pb_text.avs-list-checkmark.negative ul li::before, .et_pb_module.avs-list-checkmark.negative ul li::before { font-family: 'ETmodules'; content: "\e02e"; font-size: 150%; color: #cc0000; } /*Unter-Liste*/ .et_pb_text.avs-list-checkmark ul li ul li:first-child, .et_pb_module.avs-list-checkmark ul li ul li:first-child, .et_pb_text.avs-list-checkmark.negative ul li ul li:first-child, .et_pb_module.avs-list-checkmark.negative ul li ul li:first-child { padding-top: 1.5em; } .et_pb_text.avs-list-checkmark ul li ul li, .et_pb_module.avs-list-checkmark ul li ul li, .et_pb_text.avs-list-checkmark.negative ul li ul li, .et_pb_module.avs-list-checkmark.negative ul li ul li { font-size: 80%; } @media (max-width: 480px) { .et_pb_text.avs-list-checkmark ul li ul li, .et_pb_module.avs-list-checkmark ul li ul li, .et_pb_text.avs-list-checkmark.negative ul li ul li, .et_pb_module.avs-list-checkmark.negative ul li ul li { font-size: 94%; } } .et_pb_text.avs-list-checkmark.white ul li::before, .et_pb_module.avs-list-checkmark.white ul li::before, .et_pb_text.avs-list-checkmark.white.negative ul li::before, .et_pb_module.avs-list-checkmark.white.negative ul li::before { color: #fff; } /*END LISTEN*/ /*-------------------------------------------------------*/ /*----- BUTTONS -----*/ /*-------------------------------------------------------*/ a.et_pb_button, a.et_pb_button:hover { font-weight: 400! important; text-decoration: none !important; } /*-------------------------------------------------------*/ /*----- END BUTTONS -----*/ /*-------------------------------------------------------*/ /*-------------------------------------------------------*/ /*----- INFOBOXEN -----*/ /*-------------------------------------------------------*/ .avs-infobox h5 { font-size: 120%!important; font-weight: 400!important; color: #2e3e4d!important; line-height: 140%; margin: 0.75em 0 0.5em 0!important; } .avs-btn-box .et_pb_button_2_wrapper { text-align: center!important; } .avs-btn-box a.et_pb_button_2 { font-size: 95%!important; } /*Expand-Button - https://www.elegantthemes.com/blog/divi-resources/2-ways-to-create-custom-show-more-toggles-in-divi*/ .et-show-more-content { display:none; } .et-fb .et-show-more-content { display:block; } .et-show-more-toggle { cursor:pointer; } /*END Expand-Button*/ .avs-infobox .et_pb_button_999 { border-radius: 20x !important; border: 0 !important; border: 1px solid rgba(255,255,255,0.8) !important; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#acb8c5+0,5e7287+60,2e3d4d+100 */ /*background: linear-gradient(to bottom, rgba(172,184,197,1) 0%,rgba(94,114,135,1) 60%,rgba(46,61,77,1) 100%); */ /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#7db9e8+0,2e3d4d+100&0+0,1+100 */ background: -moz-linear-gradient(top, rgba(125,185,232,0) 0%, rgba(46,61,77,1) 100%); /* FF3.6-15 */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,185,232,0)), color-stop(100%,rgba(46,61,77,1))); /* Chrome4-9,Safari4-5 */ background: -webkit-linear-gradient(top, rgba(125,185,232,0) 0%,rgba(46,61,77,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: -o-linear-gradient(top, rgba(125,185,232,0) 0%,rgba(46,61,77,1) 100%); /* Opera 11.10-11.50 */ background: -ms-linear-gradient(top, rgba(125,185,232,0) 0%,rgba(46,61,77,1) 100%); /* IE10 preview */ background: linear-gradient(to bottom, rgba(125,185,232,0) 0%,rgba(46,61,77,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007db9e8', endColorstr='#2e3d4d',GradientType=0 ); /* IE6-9 */ margin-top: 1em; margin-bottom: 3em; display: inline-block; opacity: 0.85; } .avs-infobox .et_pb_button_999:hover, .avs-infobox a.et_pb_button.et_pb_button_999:hover { opacity: 1; color: #fff !important; text-decoration: none !important; border: 1px solid rgba(255,255,255,0.5) !important; border-right: 2px solid rgba(255,255,255,0.5) !important; border-bottom: 2px solid rgba(255,255,255,0.5) !important; } .et_pb_button_999, .et_pb_button_999::after { transition: all 700ms ease 0ms; } .avs-infobox a.et_pb_button_999, .avs-infobox a.et_pb_button_999:link, .avs-infobox a.et_pb_button_999:active, .avs-infobox a.et_pb_button_999:visited, .avs-infobox a.et_pb_button_999:hover { color: #fff !important; } .avs-infobox a.et_pb_button_999 span { color: #fff; font-weight: 400 !important; opacity: 1; padding: 25px 0px 25px 0px !important; } .avs-infobox .seperator-line { width: 100% !important; min-width: 100% !important; border-top: 1px solid rgba(255,255,255,0.8); } /*-------------------------------------------------------*/ /*----- END INFOBOXEN -----*/ /*-------------------------------------------------------*/ /*-------------------------------------------------------*/ /*----- SIDEBAR -----*/ /*-------------------------------------------------------*/ /*Sidebar: diese erscheint nur auf der Suchergebnisseite. Dort stört sie allerdings. https://www.elegantthemes.com/blog/divi-resources/how-to-remove-sidebars-from-divi */ /*** Take out the divider line between content and sidebar ***/ #main-content .container:before {background: none;} .txt-header-block { margin-bottom: 3em; } .content-block-frame { border: 1px solid #b3b3b3; border-radius: 15px; padding-left: 0.5em; width: 95%; } .content-block-frame .et_pb_column { padding: 1.5em;; } .content-block-spacer { margin-bottom: 2em; } .txt-center .et_pb_text_inner { text-align: center; } /*avs: alles außer der Suchbox unsichtbar setzen:*/ #recent-comments-2, #archives-2, #categories-2, #meta-2 { display: none; } /*-------------------------------------------------------*/ /*----- END SIDEBAR -----*/ /*-------------------------------------------------------*/ /*Hoehe Container-Elemente*/ .et_pb_row { padding-top: 1em!important; padding-bottom: 1em!important; } @media (max-width: 480px) { /*Randabstand der Startseiten-Boxen verringern*/ .page-id-11 .et_pb_container .et_pb_slide_description { margin-left: 0!important; margin-right: 0!important; padding-left: 0!important; padding-right: 0!important; } /*4spaltig zu 2 spaltig*/ /* ".two_on_mob" make 4 col rows not collapse to one on mobile --- https://optimusdivi.com/css-snippet-collapse-divi-page-builder-four-column-rows-into-two-columns-on-mobile/ */ /*Dazu muss für den Container die Class .two_on_mob integriert werden*/ .et_pb_section .et_pb_row_4col.two_on_mob>.et_pb_column.et_pb_column_1_4 { width: 47.25%!important; margin-right: 5.5% !important; } .et_pb_section .et_pb_row_4col.two_on_mob>.et_pb_column.et_pb_column_1_4:nth-of-type(even) { width: 47.25%!important; margin-right: 0 !important; } .et_pb_image_wrap { margin-bottom: 0!important; padding-bottom: 0!important; } } /*Buttons in Infobox am unteren Rand positionieren:*/ /* .btn-align-bottom { margin: 0; position: absolute; left: 50%; -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); bottom: 1em; margin-top: 3em; } .et_pb_button.btn-align-bottom.btn-medium { width: 60%; } .et_pb_button.btn-align-bottom.btn-large { width: 80%; } */ /*----- Modules -----*/ /*Tabellen*/ /*Responsive Tables https://www.elegantthemes.com/blog/resources/responsive-tables-in-wordpress*/ /* Table Styles DIVI-Vorlage */ .entry-content table, body.et-pb-preview #main-content .container table { width: 100%; margin: 0 0 15px 0; border: 1px solid #bdbdbd; text-align: left; } .entry-content tr th, .entry-content thead th, body.et-pb-preview #main-content .container tr th, body.et-pb-preview #main-content .container thead th { padding: 9px 12px; color: #000!important; font-weight: bold; } .entry-content tr td, body.et-pb-preview #main-content .container tr td { padding: 6px 12px; color: #000!important; border-top: 1px solid #bdbdbd; } /* END Table Styles DIVI-Vorlage */ /* Table Styles AVS */ table { font-size: 90%!important; } table.responsive.kosmetik { max-width: 540px; } table th { background-color: #f1f1f1; border-top: 2px solid #666; border-bottom: 1px solid #9e047f; font-size: 95%!important; line-height: 120%!important; } th.right { text-align: right!important; } table th:first-child { width: 30%!important; } table th span.small { font-weight: normal; font-size: 85%; text-align: center!important; } table td { line-height: 140%!important; } td.right { text-align: right!important; } table tr:hover { background: #f1f1f1; } table td:first-child { border-right: 1px solid #bdbdbd; } /*Tabelle responsive ab x Pixel Breite*/ @media only screen and (max-width: 860px) { table.responsive { margin-bottom: 0; overflow: hidden; overflow-x: scroll; display: block; white-space: nowrap; } table.responsive.kosmetik { width: 100%; } } /*END Tabellen*/ /*-------------------------------------------------------*/ /*----- END CONTENT -----*/ /*-------------------------------------------------------*/ /*-------------------------------------------------------*/ /*----- FOOTER -----*/ /*-------------------------------------------------------*/ footer .et_pb_text_inner p, footer .et_pb_text_inner ul, footer .et_pb_text_inner ol { font-size: 1em !important; } footer .et_pb_text_inner a, footer .et_pb_text_inner a:link, footer .et_pb_text_inner a:hover, footer .et_pb_text_inner a:active, footer .et_pb_text_inner a:visited { color: #fff!important; } footer a:link { font-weight: 400 !important; color: #fff !important; } footer a:hover { text-decoration: underline !important; color: #fff !important; } #main-footer .avs-footer-landing a, #main-footer .avs-footer-landing span a, #main-footer .avs-footer-landing a:link, #main-footer .avs-footer-landing span a:link { font-weight: 300!important; color: rgba(239,239,239,0.40)!important; } #main-footer .avs-footer-landing > a:hover, #main-footer .avs-footer-landing > span a:hover{ text-decoration: underline !important; color: rgba(239,239,239,0.60)!important; } /*-------------------------------------------------------*/ /*----- END FOOTER -----*/ /*-------------------------------------------------------*/ /*-------------------------------------------------------*/ /*----- PARALLAX -----*/ /*-------------------------------------------------------*/ .topic-box-3col-1, .topic-box-3col-2, .topic-box-3col-3 { margin-top: 60px; margin-bottom: 60px; margin-right: 50px!important; border-radius: 25px!important; -moz-border-radius: 25px!important; -webkit-border-radius: 25px!important; color: #222!important; font-family: 'Roboto'!important; font-weight: 500; } .topic-box-3col-1 .et_pb_text_inner, .topic-box-3col-2 .et_pb_text_inner, .topic-box-3col-3 .et_pb_text_inner { color: #fff!important; } .topic-box-3col-1 h2, .topic-box-3col-2 h2, .topic-box-3col-3 h2 { color: #fff!important; font-family: 'Roboto'!important; font-weight: 500; } .topic-box-3col-1 h3, .topic-box-3col-2 h3, .topic-box-3col-3 h3 { color: #fff!important; font-family: 'Roboto'!important; font-weight: 500; } .avs-bg-parallax-fullsize-3cols { width: 100% !important; padding-left: 50px!important; padding-right: 50px!important; } @media screen and (min-width: 1920px) { .avs-bg-parallax-fullsize-3cols { width: 1920px !important; } .avs-bg-parallax-fullsize-2cols-below-3cols { width: 1220px !important; padding-left: 0 !important; padding-right: 0 !important; } } @media screen and (max-width: 1250px) { .avs-bg-parallax-fullsize-3cols { width: 100% !important; padding-left: 30px!important; padding-right: 30px!important; } .topic-box-3col-1, .topic-box-3col-2, .topic-box-3col-3 { margin-right: 20px; } } @media screen and (max-width: 980px) { .topic-box-3col-1, .topic-box-3col-2, .topic-box-3col-3 { margin-left: 0px; } } @media screen and (min-width: 981px) { .topic-box-3col-1, .topic-box-3col-2, .topic-box-3col-3 { opacity: 0.7; -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; } } @media screen and (min-width: 781px) { .topic-box-3col-1, .topic-box-3col-2, .topic-box-3col-3 { -webkit-animation: slide-bottom 1s cubic-bezier(0.470, 0.000, 0.745, 0.715) forwards; animation: slide-bottom 1s cubic-bezier(0.470, 0.000, 0.745, 0.715) forwards; } .topic-box-3col-1:hover, .topic-box-3col-2:hover, .topic-box-3col-3:hover { /* -webkit-animation: slide-top 1s cubic-bezier(0.470, 0.000, 0.745, 0.715) forwards; animation: slide-top 1s cubic-bezier(0.470, 0.000, 0.745, 0.715) forwards; */ opacity: 1.0; -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; } } @media screen and (max-width: 780px) { .avs-bg-parallax-fullsize-3cols { width: 100% !important; padding-left: 10px!important; padding-right: 10px!important; } /*unterhalb von 480px Breite (= Smartphone) Abstände zwischen den Boxen erzwingen*/ .avs-bg-parallax-fullsize-3cols.et_pb_equal_columns.et_pb_gutters1 .et_pb_column { margin-top: 25px!important; margin-bottom: 25px!important; } } /*-------------------------------------------------------*/ /*----- END PARALLAX -----*/ /*-------------------------------------------------------*/ /*-------------------------------------------------------*/ /*----- MODULE: PORTFOLIO -----*/ /*-------------------------------------------------------*/ .avs-box-portfolio h3 { font-size: 300%!important; } .avs-portfolio-3cols .avs-box-portfolio h3 { font-size: 300%!important; margin-top: -30px!important; background: rgba(0,0,0,0.35); } @media all and (max-width: 2000px) { .avs-portfolio-3cols .avs-box-portfolio h3 { font-size: 240%!important; } } @media all and (max-width: 1650px) { .avs-box-portfolio h3 { font-size: 250%!important; } .avs-portfolio-3cols .avs-box-portfolio h3 { font-size: 200%!important; } } @media all and (max-width: 1600px) { .avs-portfolio-3cols .avs-box-portfolio h3 { margin-top: -15px!important; font-size: 180%!important; } .avs-portfolio-3cols .avs-box-portfolio h3 { font-size: 160%!important; } } @media all and (max-width: 1480px) { .avs-box-portfolio h3 { font-size: 220%!important; } } @media all and (max-width: 1250px) { .avs-box-portfolio h3 { font-size: 200%!important; } } @media all and (max-width: 1100px) { .avs-box-portfolio h33 { font-size: 180%!important; } .avs-portfolio-3cols .avs-box-portfolio h3 { font-size: 140%!important; } } @media all and (max-width: 980px) { .avs-box-portfolio h3, .avs-portfolio-3cols .avs-box-portfolio h3 { font-size: 220%!important; margin-top: 20px!important; } .avs-portfolio-3cols .et_pb_module, .avs-portfolio-3cols .et_pb_module img { text-align: center; vertical-align: center; } } /*Überschriftstext optimieren - Monitorbilder sind nur noch 600px breit, daher ragt grauer Hintergrundbalken des Überschriftstext über die Ränder des BG-Bildes:*/ @media all and (max-width: 980px) { .avs-portfolio-3cols .avs-box-portfolio h3 { margin-left: 50px !important; margin-right: 50px !important; } } @media all and (max-width: 900px) { .avs-portfolio-3cols .avs-box-portfolio h3 { margin-left: 0px !important; margin-right: 0px !important; } } @media all and (max-width: 480px) { .avs-box-portfolio h3, .avs-portfolio-3cols .avs-box-portfolio h3 { font-size: 150%!important; margin-top: 20px!important; } } @media all and (min-width: 981px) { /*avs:*/ .avs-box-portfolio { opacity: 0.6; -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; } .avs-box-portfolio:hover { opacity: 1.0; -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; } /*https://www.elegantthemes.com/blog/divi-resources/how-to-design-custom-image-overlays-in-divi*/ .et-fb-root-ancestor .et-overlay-item { opacity: 1; /*shows hidden overlay items when using the visual Divi Builder*/ } .et-overlay-item { opacity: 0; /*hides overlay items by default*/ margin-bottom: 0px; } .et-overlay-item, .et-overlay-image { transition: all 400ms !important; /*sets transition speed of all overlay items*/ } .et-overlay-container:hover .et-overlay-item { opacity: 1; /*reveals hidden overlay items on hover*/ } .et-overlay-container:hover .et-overlay-image { /*add new styles here to change image on hover*/ } .et-overlay-container:hover .et-overlay-image.et-scale { transform: scale(1.2); /*adjust scale of image here*/ } .et-overlay-container:hover .et-overlay-image.et-rotate { transform: scale(1.4) rotateZ(10deg)!important; /*adjust rotation of image and scale needed for rotation here*/ } .et-overlay-container:hover .et-overlay-item.move-up { margin-bottom: 15% !important; /*adjust how far you want the overlay item to move up*/ } .et-overlay-container:hover .et-overlay-item.move-down { margin-top: 10%; /*adjust how far you want the overlay item to move down*/ } } /*-------------------------------------------------------*/ /*----- END MODULE: PORTFOLIO -----*/ /*-------------------------------------------------------*/ /*-------------------------------------------------------*/ /*----- MODULE: SEARCH -----*/ /*-------------------------------------------------------*/ /*-------------------------------------------------------*/ /*----- SUCHFUNKTION IM MENU -----*/ /*-------------------------------------------------------*/ .et_pb_menu__search-container .et_pb_menu__search-input { max-width: 500px; } @media only screen and (max-width: 980px) { .et_pb_menu__search-container { } .et_pb_menu__search-container .et_pb_menu__search-input { max-width: 420px; } } @media only screen and (max-width: 800px) { .et_pb_menu__search-container .et_pb_menu__search-input { margin-left: -120px !important; max-width: 290px; } } @media only screen and (max-width: 600px) { .et_pb_menu__search-container .et_pb_menu__search-input { margin-left: -50px !important; max-width: 260px; } } @media only screen and (max-width: 570px) { .et_pb_menu__search-container .et_pb_menu__search-input { max-width: 180px; } } @media only screen and (max-width: 500px) { .et_pb_menu__search-container .et_pb_menu__search-input { max-width: 120px; } } /*-------------------------------------------------------*/ /*----- END SUCHFUNKTION IM MENU -----*/ /*-------------------------------------------------------*/ /*-------------------------------------------------------*/ /*----- FORMATIERUNGEN AUF SUCHERGEBNISSEITE -----*/ /*-------------------------------------------------------*/ .avs-h1-suchergebnisseite h1 { font-size: 240% !important; font-weight: 300!important; } h2.not-found-title { font-size: 180% !important; font-weight: 400 !important; color: #2e3d4d !important; margin-top: 1.5em !important; } article.et_pb_post.clearfix { border-bottom: 1px solid #79838e !important; } /*-------------------------------------------------------*/ /*----- END FORMATIERUNGEN AUF SUCHERGEBNISSEITE -----*/ /*-------------------------------------------------------*/ /*-------------------------------------------------------*/ /*----- END MODULE: SEARCH -----*/ /*-------------------------------------------------------*/ /*-----------------------------------------------------------*/ /*----- MODULE: BUTTON für Ein-/Ausklappen von Content -----*/ /* WRAPPING in DIVI erfolgt dann übrer [expand]Ich bin der versteckte Text[/expand] https://divimastermind.com/erstellen-einer-expand-taste/*/ /*-----------------------------------------------------------*/ /* Taste ausklappen */ .hide { display: none; } .degrade { transition:background-color 1300ms ease 0ms,border 1300ms ease 0ms; } .degrade.close > *:after { content:""; position:absolute; top:0; display:block; width:100%; height:calc(100% - 32px); } .exp-wrappper span { margin: 0 auto; margin-top: 2em; } /* Style hier Deine Taste */ .button { display:block; max-width:150px; cursor:pointer; padding:4px; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; text-align:center; color:#fff; margin-top:20px; transition: background-color 300ms ease 0ms,border 300ms ease 0ms; } .button:hover { box-shadow:1px 1px 10px 0px rgba(0,0,0,0.3); } /* Hintergrundfarbe Deiner Taste */ .background-taste { background:#2da1db; background: #8d046b; -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; } /* style hier die Hover Farbe Deiner Taste */ .background-taste:hover { /* background:#000; color: #2da1db; border: solid 1px #2da1db; */ background: #600048; -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; } /*-----------------------------------------------------------*/ /*----- END MODULE: BUTTON für Ein-/Ausklappen von Content -----*/ /*-----------------------------------------------------------*/ /*-----------------------------------------------------------*/ /*----- MODUL - MAX MEGA-MENU -----*/ /*-----------------------------------------------------------*/ /*Max MegaMenu - Bildausrichtung*/ ul.mega-sub-menu li.mega-second-level { } ul.mega-sub-menu li.mega-menu-item img { position: relative!important; /* vertical-align: bottom!important; display: table-cell!important; bottom: 0!important; */ top: 100%!important; top: -webkit-calc(100% - 4px)!important; top: -moz-calc(100% - 4px)!important; top: calc(100% - 4px)!important; } /*Max MegaMenu - individueller Menünkt-Abstand*/ /*BRANCHEN*/ #mega-menu-987497719-0 ul { min-height: 300px!important; } #mega-menu-987497719-0 ul.mega-sub-menu li.mega-second-level a { line-height: 80% !important; } /*-----------------------------------------------------------*/ /*----- END MODUL - MAX MEGA-MENU -----*/ /*-----------------------------------------------------------*/ /*-------------------------------------------------------*/ /*----- MODULE: KONTAKT -----*/ /*-------------------------------------------------------*/ /* Contact Form 7 Styles https://www.elegantthemes.com/blog/tips-tricks/how-to-customize-the-style-of-contact-form-7-to-match-your-website ---------------------------------*/ /*SEITE KONTAKT*/ /*Box mit eigener Klasse:*/ .contact-outer { margin-top: -16px; } .et_pb_section.et_pb_section_0.et_section_regular { max-width: 100%; } .contact-outer, .contact-outer h2, .contact-outer h3 { color: #fff!important; } .contact-address .et_pb_main_blurb_image, .contact-address .et_pb_blurb_description, .contact-address-follow .et_pb_main_blurb_image, .contact-address-follow .et_pb_blurb_description { padding: 15px 0 15px 15px; } .contact-address .et_pb_blurb_content, .contact-address-follow .et_pb_blurb_content { max-width: 400px!important; background: rgba(0,0,0,0.4)!important; -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; } .contact-address .et_pb_blurb_content:hover, .contact-address-follow .et_pb_blurb_content:hover { background: rgba(0,0,0,0.7)!important; -webkit-transition: all 1.3s; -moz-transition: all 1.3s; transition: all 1.3s; } .contact-address .et_pb_blurb_description, .contact-address-follow .et_pb_blurb_description{ padding-left: 2em; } /*Integration des Hintergrundbildes ueber DIVI laesst sich nicht fuer Tablet + Smartphone gesondert optimieren - daher Integration ueber eigenes CSS*/ /*et_pb_column_0 = Popup Kontaktformular et_pb_column_2 = normales Kontaktformular:*/ /* .contact-outer .et_pb_column.et_pb_column_1_2.et_pb_column_0, .contact-outer .et_pb_column.et_pb_column_1_2.et_pb_column_2 { background-image: url("/wp-content/uploads/redaktion/images/kontaktformular/img-content-popup-contact-form.png"); background-position: bottom center; background-size: cover; background-repeat: no-repeat; } */ /*et_pb_column_1 = Popup Kontaktformular et_pb_column_3 = normales Kontaktformular*/ .contact-outer .et_pb_column.et_pb_column_1_2.et_pb_column_1 .et_pb_module, .contact-outer .et_pb_column.et_pb_column_1_2.et_pb_column_3 .et_pb_module { max-width: 680px!important; } @media screen and (max-width: 1830px) { .contact-outer .et_pb_column.et_pb_column_1_2.et_pb_column_1 .et_pb_module { max-width: 500px!important; } } @media screen and (min-width: 980px) { .contact-outer .et_pb_column.et_pb_column_1_2.et_pb_column_1 { /*min-height: 1000px;*/ margin:0!important; padding-top: 26px!important; } .contact-address { position: relative; top: 36px; } .contact-address-follow { position: relative; margin-top: 30px; top: 36px; } } @media screen and (max-width: 1900px) { /* .contact-outer .et_pb_column.et_pb_column_1_2.et_pb_column_0 { background-image: url("/wp-content/uploads/redaktion/images/kontaktformular/img-content-popup-contact-form.png"); background-size: auto; min-height: 700px; } */ .wpcf7 input, .wpcf7-textarea { width: 100%!important; } .contact-address { position: relative; top: 40px; } .contact-address-follow { position: relative; margin-top: 15px; top: 40px; } } @media screen and (max-width: 979px) { /* .contact-outer .et_pb_column.et_pb_column_1_2.et_pb_column_0, .contact-outer .et_pb_column.et_pb_column_1_2.et_pb_column_2 { background-image: url("/wp-content/uploads/redaktion/images/kontaktformular/img-content-popup-contact-form.png"); background-size: auto; min-height: 700px; } */ .wpcf7 input, .wpcf7-textarea { width: 100%!important; } .contact-address { position: relative; top: 40px; } .contact-address-follow { position: relative; margin-top: 15px; top: 40px; } } @media screen and (max-width: 480px) { .contact-address { position: relative; margin-top: 25px; } .contact-address-follow { position: relative; margin-top: 25px; } .contact-address .et_pb_blurb_content, .contact-address-follow .et_pb_blurb_content { max-width: 310px!important; margin-left: -20px; } .contact-address .et_pb_blurb_description, .contact-address-follow .et_pb_blurb_description { padding-left: 0.5em; } .wpcf7 input, .wpcf7-textarea { width: 100%!important; } } /*CONTACT FORM 7*/ .wpcf7-response-output.wpcf7-display-none.wpcf7-validation-errors { display: none!important; } .wpcf7 { background-color: transparent; } .wpcf7-form { /* margin-left: 25px; margin-right: 25px; margin-top: 25px; */ } .wpcf7 ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #e1e5e6; opacity: 1; /* Firefox */ font-weight: 300!important; } .wpcf7 :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #e1e5e6; font-weight: 300!important; } .wpcf7 ::-ms-input-placeholder { /* Microsoft Edge */ color: #e1e5e6; font-weight: 300!important; } .wpcf7 input, .wpcf7-textarea { font-size: 90%; letter-spacing: 1px; width: 85%; border: 0; padding: 1em; background: rgba(255,255,255,0.3); color: #f2f2f2!important; font-weight: 300!important; -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; } .wpcf7 input:hover, .wpcf7-textarea:hover { background: rgba(255,255,255,0.15); color: #fff!important; -webkit-transition: all 1.3s; -moz-transition: all 1.3s; transition: all 1.3s; } .wpcf7 input .wpcf7-form-control.wpcf7-text { color: #fff!important; } .wpcf7-textarea { height: 100px!important; font-family: 'Roboto'; font-weight: 300!important; resize: none; } .wpcf7-text { width: 85%; } input[type=submit] { background: rgba(0,0,0,0.7); font-family: 'Roboto'!important; font-weight: 600!important; font-size: 110%!important; cursor: pointer; } span.wpcf7-form-control-wrap.your-dsgvo { font-weight: 700!important; } .wpcf7-checkbox { width: 100%; } .wpcf7-checkbox label input { text-align: left; opacity: 0; color: black !important; opacity: 1; margin: auto; height: 15px; width: 20px; margin-top: -15px; margin-left: -20px; } input[type="checkbox"]{ width: 15px!important; max-width: none; margin: 0; padding: 0; margin-left: 5px; } /* https://www.philowen.co/blog/custom-styles-for-contact-form-7-checkboxes/ custom checkbox styling for contact form 7 checkbox */ span.wpcf7-list-item { display: inline-block; margin: 0; } .wpcf7 .wpcf7-list-item { display: block; margin-bottom: 10px; } .wpcf7-checkbox label { position: relative; top: 0; cursor: pointer; } .wpcf7-checkbox input[type=checkbox] { /*position: relative;*/ position: absolute; visibility: hidden; width: 20px; height: 20px; top: 0; left: 0; } .wpcf7-checkbox input[type=checkbox] + span { /*border: 2px solid red; */ } .wpcf7-checkbox input[type=checkbox] + span:before { display: block; position: absolute; content: ''; border-radius: 0; height: 26px; width: 26px; top: 10px; left: 0px; border: 1px solid #fff; background: rgba(0,0,0,0.15); } .wpcf7-checkbox input[type=checkbox] + span:after { display: block; position: absolute; content: "\2713"; height: 20px; width: 20px; top: 13px; left: 0; visibility: hidden; padding-top: 1px; padding-left: 3px; font-size: 21px; font-weight: 700; text-align: center; line-height: 20px; } .wpcf7-checkbox input[type=checkbox]:checked + span:before { background: transparent; } .wpcf7-checkbox input[type=checkbox]:checked + span:after { visibility: visible; } .wpcf7-list-item-label { margin-left: 40px; display: block; } /*END*/ /*AVS: Fehlermeldung in roter Farbe ist aber hier \wp-content\plugins\contact-form-7-styles\styles.css zu finden, Farbe war als #f00 angegeben nicht als #f00000, daher schwer zu finden:*/ span.wpcf7-not-valid-tip { color: #75c1e7; font-size: 1.0em; font-weight: normal; display: block; padding: 5px; margin-top: 5px; max-width: 500px; background: rgba(0,0,0,0.2); } /*-------------------------------------------------------*/ /*----- END MODULE: KONTAKT -----*/ /*-------------------------------------------------------*/ /*-------------------------------------------------------*/ /*----- MODULE: KONTAKT-POPUP -----*/ /*-------------------------------------------------------*/ /*-------------------------------------------------------*/ /*----- END MODULE: KONTAKT-POPUP -----*/ /*-------------------------------------------------------*/