/* Theme Name: Enfold Child Description: A Child Theme for the Enfold Wordpress Theme. If you plan to do a lot of file modifications we recommend to use this Theme instead of the original Theme. Updating wil be much easier then. Version: 1.0 Author: Kriesi Author URI: http://www.kriesi.at Template: enfold */ /*Add your own styles here:*/ /* Header background gradient */ #top #header, #top #header_main, #top #header_meta, #top .header_bg{ background: linear-gradient(to bottom, #ffffff 0%, #008CCF 100%) !important; } #top #header.av_header_transparency, #top #header.av_header_transparency #header_main, #top #header.av_header_transparency #header_meta, #top .av_header_transparency .header_bg{ background: linear-gradient(to bottom, #ffffff 0%, #008CCF 100%) !important; opacity: 0.95 !important; } /* More space above logo without clipping it */ #top #header_main{ padding-top: 14px !important; } /* Remove gray strip / line between navigation and page content */ #top #header_main, #top #header_main_alternate{ border-bottom: none !important; box-shadow: none !important; } /* * Sticky offset: Enfold uses 168px for large + bottom nav, but extra #header_main * padding-top makes the visible header shorter than that offset → gray gap below nav. * Slightly *smaller* padding pulls content up under the fixed header edge. */ .html_header_top.html_header_sticky.html_large.html_bottom_nav_header #top #main{ padding-top: 148px !important; } /* * Hero fullwidth slider: Enfold can add a Ken Burns scale (e.g. 1.2 → 1.03) via * post-specific CSS. That crops the image—especially the top on wide screens. */ #top #full_slider_1 .avia-slideshow-slide img, #top #full_slider_1 .avia-slideshow-slide.next-active-slide img, html.html_entry_id_126 #top .avia-fullwidth-slider.avia-builder-el-0 .avia-slideshow-slide img, html.html_entry_id_126 #top .avia-fullwidth-slider.avia-builder-el-0 .avia-slideshow-slide.next-active-slide img{ transform: none !important; animation: none !important; } /* Main menu link colors: loaded last via enfold_child_main_nav_colors_inline() in functions.php (Enfold merge + dynamic CSS otherwise overrides style.css). */ /* Team photos: name background should span full image width */ #top .av-team-member .team-member-name, #top .av-team-member .av-team-member-name, #top .team-member .team-member-name, #top .team-member .av-team-member-name{ display: block !important; width: 100% !important; box-sizing: border-box !important; } #top .av-team-member .team-member-name a, #top .av-team-member .av-team-member-name a, #top .team-member .team-member-name a, #top .team-member .av-team-member-name a{ display: block !important; width: 100% !important; } #top .av-team-member .team-member-name span, #top .av-team-member .av-team-member-name span, #top .team-member .team-member-name span, #top .team-member .av-team-member-name span, #top .av-team-member .team-member-name strong, #top .av-team-member .av-team-member-name strong, #top .team-member .team-member-name strong, #top .team-member .av-team-member-name strong{ display: block !important; width: 100% !important; box-sizing: border-box !important; } /* * TLP Team & Enfold: no titles/names on image hover (overlay captions stay off). * Team cards still show the name below the photo when not hovered. */ #top .rt-team-container .single-team-area:hover h3, #top .rt-elementor-container .single-team-area:hover h3{ display: none !important; } #top .av-overlay-on-hover .avia-image-container-inner:hover .av-image-caption-overlay, #top .av-overlay-on-hover .avia-image-container-inner:hover .av-caption-image-overlay-bg{ opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } #top .avia_desktop .av-caption-on-hover .av-masonry-item-with-image.av-masonry-entry:hover .av-inner-masonry-content{ opacity: 0 !important; visibility: hidden !important; } #top .avia_desktop.avia_transform3d .av-caption-on-hover .av-masonry-entry.av-masonry-item-with-image:hover .av-inner-masonry-content{ transform: rotateX(120deg) !important; opacity: 0 !important; visibility: hidden !important; } /* MusikerInnen page (TLP Team): force full-width blue name bar on every photo */ body.page-id-685 .rt-team-container .layout12 .single-team-area h3, body.page-id-685 .rt-team-container .isotope6 .single-team-area h3{ padding: 0 !important; background: #008dcf !important; position: relative; top: 14px; } body.page-id-685 .rt-team-container .layout12 .single-team-area:hover h3, body.page-id-685 .rt-team-container .isotope6 .single-team-area:hover h3{ padding: 0 !important; background: transparent !important; } body.page-id-685 .rt-team-container .layout12 .single-team-area:hover h3 .team-name, body.page-id-685 .rt-team-container .isotope6 .single-team-area:hover h3 .team-name{ background: transparent !important; } body.page-id-685 .rt-team-container .layout12 .single-team-area h3 .team-name, body.page-id-685 .rt-team-container .isotope6 .single-team-area h3 .team-name{ display: block !important; width: 100% !important; box-sizing: border-box !important; padding-top: 1px !important; padding-bottom: 1px !important; padding-left: 10px !important; padding-right: 10px !important; background: #008dcf !important; } /* * MusikerInnen: bars flush to the photo edge. * - Plugin: .tlp-overlay-inner { padding: 15px } (often under .rt-elementor-container only). * - Plugin grid: .rt-container has horizontal padding 15px — pull bars out with negative margins. */ html body.page-id-685 #top .layout12 .single-team-area .tlp-overlay-inner, html body.page-id-685 #top .isotope-el-6 .single-team-area .tlp-overlay-inner, html body.page-id-685 #top .rt-elementor-container .layout12 .single-team-area .tlp-overlay-inner, html body.page-id-685 #top .rt-elementor-container .isotope-el-6 .single-team-area .tlp-overlay-inner, html body.page-id-685 #top #wrap_all .layout12 .single-team-area .tlp-overlay-inner, html body.page-id-685 #top #wrap_all .isotope-el-6 .single-team-area .tlp-overlay-inner{ padding-left: 0 !important; padding-right: 0 !important; } html body.page-id-685 #top .isotope6 .single-team-area .tlp-overlay{ padding-left: 0 !important; padding-right: 0 !important; } /* Pull bars out of remaining 15px horizontal inset (layout12 / isotope6 variants) */ html body.page-id-685 #top .layout12 .single-team-area .tlp-inner > h3, html body.page-id-685 #top .isotope-el-6 .single-team-area .tlp-inner > h3, html body.page-id-685 #top .rt-elementor-container .layout12 .single-team-area .tlp-inner > h3, html body.page-id-685 #top .rt-elementor-container .isotope-el-6 .single-team-area .tlp-inner > h3, html body.page-id-685 #top .layout12 .single-team-area .tlp-inner > .tlp-position, html body.page-id-685 #top .isotope-el-6 .single-team-area .tlp-inner > .tlp-position, html body.page-id-685 #top .rt-elementor-container .layout12 .single-team-area .tlp-inner > .tlp-position, html body.page-id-685 #top .rt-elementor-container .isotope-el-6 .single-team-area .tlp-inner > .tlp-position, html body.page-id-685 #top .isotope6 .single-team-area .tlp-overlay > h3, html body.page-id-685 #top .isotope6 .single-team-area .tlp-overlay > .tlp-position{ margin-left: -15px !important; margin-right: -15px !important; width: calc(100% + 30px) !important; max-width: none !important; box-sizing: border-box !important; } /* Hover overlay content: keep side inset so text does not touch the image edge */ html body.page-id-685 #top #wrap_all .layout12 .single-team-area .tlp-inner .short-bio, html body.page-id-685 #top #wrap_all .layout12 .single-team-area .tlp-inner .social-icons, html body.page-id-685 #top #wrap_all .layout12 .single-team-area .tlp-inner .readmore-btn, html body.page-id-685 #top #wrap_all .layout12 .single-team-area .tlp-inner .tlp-btn-wrapper, html body.page-id-685 #top #wrap_all .isotope6 .single-team-area .short-bio, html body.page-id-685 #top #wrap_all .isotope6 .single-team-area .social-icons, html body.page-id-685 #top #wrap_all .isotope6 .single-team-area .readmore-btn, html body.page-id-685 #top #wrap_all .isotope6 .single-team-area .tlp-btn-wrapper, html body.page-id-685 #top #wrap_all .isotope-el-6 .single-team-area .tlp-inner .short-bio, html body.page-id-685 #top #wrap_all .isotope-el-6 .single-team-area .tlp-inner .social-icons, html body.page-id-685 #top #wrap_all .isotope-el-6 .single-team-area .tlp-inner .readmore-btn, html body.page-id-685 #top #wrap_all .isotope-el-6 .single-team-area .tlp-inner .tlp-btn-wrapper{ padding-left: 15px; padding-right: 15px; box-sizing: border-box; } /* MusikerInnen cards: add space between blue name bar and gray designation */ body.page-id-685 .rt-team-container .layout12 .single-team-area .tlp-position, body.page-id-685 .rt-team-container .isotope6 .single-team-area .tlp-position, html body.page-id-685 #top .rt-elementor-container .layout12 .single-team-area .tlp-position, html body.page-id-685 #top .rt-elementor-container .isotope6 .single-team-area .tlp-position{ margin-top: 14px !important; position: relative; top: 14px; line-height: 1.45 !important; box-sizing: border-box !important; } /* Gray bar on the wrapper so it spans edge-to-edge (span stays text-only; avoids inline-block gaps) */ html body.page-id-685 #top .layout12 .single-team-area .tlp-position, html body.page-id-685 #top .isotope6 .single-team-area .tlp-position, html body.page-id-685 #top .rt-elementor-container .layout12 .single-team-area .tlp-position, html body.page-id-685 #top .rt-elementor-container .isotope6 .single-team-area .tlp-position, html body.page-id-685 #top .rt-team-container .layout12 .single-team-area .tlp-position, html body.page-id-685 #top .rt-team-container .isotope6 .single-team-area .tlp-position{ padding: 8px 10px !important; text-align: center !important; background: #313131 !important; } html body.page-id-685 #top .layout12 .single-team-area .tlp-position span, html body.page-id-685 #top .isotope6 .single-team-area .tlp-position span, html body.page-id-685 #top .rt-elementor-container .layout12 .single-team-area .tlp-position span, html body.page-id-685 #top .rt-elementor-container .isotope6 .single-team-area .tlp-position span, html body.page-id-685 #top .rt-team-container .layout12 .single-team-area .tlp-position span, html body.page-id-685 #top .rt-team-container .isotope6 .single-team-area .tlp-position span{ display: block !important; width: 100% !important; box-sizing: border-box !important; margin: 0 !important; padding: 0 !important; background: transparent !important; line-height: 1.45 !important; } html body.page-id-685 #top .layout12 .single-team-area .tlp-position span a, html body.page-id-685 #top .isotope6 .single-team-area .tlp-position span a, html body.page-id-685 #top .rt-elementor-container .layout12 .single-team-area .tlp-position span a, html body.page-id-685 #top .rt-elementor-container .isotope6 .single-team-area .tlp-position span a, html body.page-id-685 #top .rt-team-container .layout12 .single-team-area .tlp-position span a, html body.page-id-685 #top .rt-team-container .isotope6 .single-team-area .tlp-position span a{ line-height: 1.45 !important; display: block !important; width: 100% !important; box-sizing: border-box !important; padding: 0 !important; } /* More space between name/designation and short-bio, only on hover */ #top .rt-team-container .layout12 .single-team-area:hover .short-bio, #top .rt-team-container .isotope6 .single-team-area:hover .short-bio, #top .rt-elementor-container .layout12 .single-team-area:hover .short-bio, #top .rt-elementor-container .isotope6 .single-team-area:hover .short-bio, #top .rt-elementor-container .isotope-el-6 .single-team-area:hover .short-bio{ margin-top: 56px !important; } /* MusikerInnen filters: white border + white text */ body.page-id-685 .rt-layout-filter-container .rt-filter-wrap .rt-filter-item-wrap, body.page-id-685 .rt-filter-item-wrap.rt-filter-button-wrap span.rt-filter-button-item{ border-color: #ffffff !important; color: #ffffff !important; } /* No outer frame around the full department filter group */ body.page-id-685 .rt-layout-filter-container .rt-filter-wrap .rt-filter-item-wrap.rt-tax-filter.rt-filter-button-wrap{ border: none !important; } /* Center the department category buttons */ body.page-id-685 .rt-layout-filter-container, body.page-id-685 .rt-layout-filter-container .rt-filter-wrap, body.page-id-685 .rt-layout-filter-container .rt-filter-wrap .rt-filter-item-wrap.rt-tax-filter.rt-filter-button-wrap{ text-align: center !important; } body.page-id-685 .rt-filter-item-wrap.rt-filter-button-wrap span.rt-filter-button-item:hover, body.page-id-685 .rt-filter-item-wrap.rt-filter-button-wrap span.rt-filter-button-item.selected{ color: #ffffff !important; border-color: #ffffff !important; background: #008CCF !important; } /* Strong overrides for plugin-generated filter styles */ html body.page-id-685 #top #wrap_all .rt-team-container .rt-filter-item-wrap.rt-filter-button-wrap span.rt-filter-button-item, html body.page-id-685 #top #wrap_all .rt-team-container .rt-filter-item-wrap.rt-filter-button-wrap span.term-button-item.rt-filter-button-item, html body.page-id-685 #top #wrap_all .rt-team-container .ttp-isotope-buttons.button-group button{ color: #ffffff !important; border: 1px solid #ffffff !important; } html body.page-id-685 #top #wrap_all .rt-team-container .rt-filter-item-wrap.rt-filter-button-wrap span.rt-filter-button-item:hover, html body.page-id-685 #top #wrap_all .rt-team-container .rt-filter-item-wrap.rt-filter-button-wrap span.rt-filter-button-item.selected, html body.page-id-685 #top #wrap_all .rt-team-container .ttp-isotope-buttons.button-group button:hover, html body.page-id-685 #top #wrap_all .rt-team-container .ttp-isotope-buttons.button-group button.selected{ color: #ffffff !important; border-color: #ffffff !important; background: #008CCF !important; } /* Footer socket: copyright linksbündig, Vereinsintern rechts */ #socket .container{ display: flex; align-items: center; } #socket .copyright{ display: flex; align-items: center; justify-content: space-between; width: 100%; font-size: 13px; text-align: left; } #socket .copyright .socket-copyright-left{ flex: 1 1 auto; min-width: 0; text-align: left; } #socket .copyright .socket-right-link{ flex: 0 0 auto; float: none; margin-left: 20px; text-align: right; } #socket .copyright .socket-right-link a{ display: inline-block; border: 1px solid #ffffff; padding: 2px 10px; color: #ffffff !important; text-decoration: none; font-size: 16px; transition: all 0.2s ease; } #socket .copyright .socket-right-link a:hover{ background: rgba(255, 255, 255, 0.15); border-color: #ffffff; } /* Footer width */ #footer .container, #socket .container{ max-width: 1200px !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; } /* Footer page contact section: outer area must span full width */ #footer-page .container_wrap.fullsize{ width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } /* Center the color-section content block */ #footer-page .container, #footer-page .container_wrap.fullsize .container{ max-width: 1200px !important; margin-left: auto !important; margin-right: auto !important; } /* Footer color-section gradient: #008dcf -> white -> #008dcf */ #top #wrap_all #footer-page, #top #wrap_all #footer-page .container_wrap, #top #wrap_all #footer-page .container_wrap.fullsize{ background-color: #008dcf !important; background-image: linear-gradient(to right, #008dcf 0%, #ffffff 50%, #008dcf 100%) !important; background-repeat: no-repeat !important; background-size: 100% 100% !important; } #top #wrap_all #footer-page .container, #top #wrap_all #footer-page .template-page, #top #wrap_all #footer-page .post-entry, #top #wrap_all #footer-page .entry-content-wrapper{ background: transparent !important; } /* Footer links: subtle hover effect */ #footer-page a{ transition: color 0.2s ease, opacity 0.2s ease, text-decoration-color 0.2s ease; } #footer-page a:hover, #footer-page a:focus{ color: #ffffff !important; opacity: 0.9; text-decoration-color: #ffffff; } /* Vereinsgeschichte (page 323): highlighted words in bold black */ body.page-id-323 #top #main .entry-content-wrapper span[style*="color"], body.page-id-323 #top #main .entry-content-wrapper font[color], body.page-id-323 #top #main .entry-content-wrapper mark, body.page-id-323 #top #main .avia_textblock span[style*="color"], body.page-id-323 #top #main .avia_textblock a, body.page-id-323 #top #main .avia_textblock a *, body.page-id-323 #top #main .avia_textblock strong{ color: #000000 !important; font-weight: 700 !important; opacity: 1 !important; } /* Responsive socket layout */ @media only screen and (max-width: 767px){ #socket .container{ display: block; } #socket .copyright{ flex-direction: column; align-items: stretch; width: 100%; text-align: left; line-height: 1.5; } #socket .copyright .socket-copyright-left{ text-align: left; } #socket .copyright .socket-right-link{ display: block; align-self: stretch; float: none; margin: 10px 0 0; text-align: left; } #socket .copyright .socket-right-link a{ display: inline-flex; align-items: center; gap: 6px; max-width: 100%; font-size: 14px; line-height: 1.3; padding: 6px 10px; white-space: normal; } } /* Aktuelles (masonry): larger post title text */ #top .av-masonry-entry .av-masonry-entry-title{ font-size: 26px !important; line-height: 1.2 !important; } @media only screen and (max-width: 989px){ #top .av-masonry-entry .av-masonry-entry-title{ font-size: 22px !important; } } @media only screen and (max-width: 767px){ #top .av-masonry-entry .av-masonry-entry-title{ font-size: 18px !important; } } /* Brandblau #008CCF: Enfold-Variablen (greift auch wenn dynamisches CSS neu erzeugt wird) */ :root{ --enfold-socket-color-bg: #008CCF; --enfold-socket-color-bg2: #008CCF; --enfold-socket-color-secondary: #008CCF; --enfold-socket-color-meta: #008CCF; --enfold-socket-color-border: #008CCF; --enfold-footer-color-bg: #008CCF; --enfold-footer-color-bg2: #008CCF; --enfold-footer-color-meta: #008CCF; --enfold-footer-color-border: #008CCF; --enfold-alternate-color-primary: #008CCF; --enfold-alternate-color-secondary: #008CCF; --enfold-main-color-bg: #008CCF; --enfold-main-color-primary: #008CCF; --enfold-main-color-secondary: #008CCF; --enfold-header-color-secondary: #008CCF; --enfold-header-color-heading: #008CCF; } /* * Probelokal hero gallery: disable Enfold enlarge zoom * to prevent top cropping on wide screens. */ body.page-id-482 #top .av-horizontal-gallery.av-horizontal-gallery-enlarge-effect .av-horizontal-gallery-wrap.av-active-gal-item{ transform: none !important; } /* * Homepage Probelokal hero: prevent top crop on large screens. * Enfold uses fixed background sections here; pin image to top and disable fixed attachment. */ html.html_entry_id_126 #top #av_section_7, html.html_entry_id_126 #top #av_section_8{ background-position: 50% 0% !important; background-attachment: fixed !important; } /* Large screens: keep fixed background but show full image (no crop) */ @media only screen and (min-width: 1200px){ html.html_entry_id_126 #top #av_section_7, html.html_entry_id_126 #top #av_section_8{ background-size: contain !important; background-repeat: no-repeat !important; } } /* Homepage Probelokal (#av_section_7): links turn white on hover (matches light copy on image) */ html.html_entry_id_126 #top #av_section_7 a:not(.avia-button){ transition: color 0.2s ease, text-decoration-color 0.2s ease; } html.html_entry_id_126 #top #av_section_7 a:not(.avia-button):hover, html.html_entry_id_126 #top #av_section_7 a:not(.avia-button):focus{ color: #ffffff !important; text-decoration-color: #ffffff; } /* Homepage „Melde dich“-Zelle (Gradient): verlinkte Telefonnummern (tel:) bei Hover weiß */ html.html_entry_id_126 #top .flex_cell.av-34bb2-0d29f4788802696776c9e204eb98af18 a[href^="tel:"]{ transition: color 0.2s ease, text-decoration-color 0.2s ease; } html.html_entry_id_126 #top .flex_cell.av-34bb2-0d29f4788802696776c9e204eb98af18 a[href^="tel:"]:hover, html.html_entry_id_126 #top .flex_cell.av-34bb2-0d29f4788802696776c9e204eb98af18 a[href^="tel:"]:focus{ color: #ffffff !important; text-decoration-color: #ffffff; } /* * Chronik (DearFlip): gray viewer stage always fits the visible viewport (code block / avia_codeblock). * max-height lets the plugin’s resize logic pick up the constrained size (see dflip.js CSS override path). */ body.chronik-flipbook-page #top #main ._df_book, body.page-slug-chronik #top #main ._df_book{ max-width: 100%; box-sizing: border-box; max-height: calc(100svh - 10.5rem); max-height: calc(100dvh - 10.5rem); } body.chronik-flipbook-page #top #main ._df_book .df-container, body.page-slug-chronik #top #main ._df_book .df-container{ max-height: 100%; } @media only screen and (max-width: 989px){ body.chronik-flipbook-page #top #main ._df_book, body.page-slug-chronik #top #main ._df_book{ max-height: calc(100svh - 9rem); max-height: calc(100dvh - 9rem); } }