/* Theme Name: Hello Elementor Description: Hello Elementor Child – Seelsorgeeinheit Mittelrheintal. Author: Seelsorgeeinheit Version: 1.0.0 Text Domain: hello-elementor Tags: accessibility-ready, custom-colors, custom-menu Eine zentrale CSS-Datei für alle Subsites: Blog 1 = Dachseite (/) Blog 2 = Pfarrei Au (/kath-au/) Blog 3 = Pfarrei Heerbrugg (/kath-heerbrugg/) Blog 4 = Pfarrei Berneck (/kath-berneck/) Die Brand-Farbe einer Subsite wird automatisch aktiv, weil WordPress am die Klasse "blog-N" setzt. Wir mappen --color-primary etc. dort. */ /* ===================================================================== 1) Brand-Farben & semantische Tokens ===================================================================== */ :root { /* --- Brand-Paletten pro Subsite (für Standort-Switcher Hover etc.) --- */ --color-dach-base: #7E6B59; --color-dach-10: #F0EFEE; --color-dach-30: #7E6B594D; --color-dach-50: #B5B0A8; --color-dach-hover: #5A5145; --color-au-base: #006EB7; --color-au-10: #E5EEF8; --color-au-30: #006EB74D; --color-au-50: #80ABDC; --color-au-hover: #004A9C; --color-berneck-base: #00935E; --color-berneck-10: #E5F6F0; --color-berneck-30: #00935E4D; --color-berneck-50: #80D4B5; --color-berneck-hover: #008F5B; --color-heerbrugg-base: #E94E24; --color-heerbrugg-10: #FFEDE8; --color-heerbrugg-30: #E94E244D; --color-heerbrugg-50: #FDA38B; --color-heerbrugg-hover:#D53C13; /* --- Neutrals --- */ --color-text-primary: #2E2E2E; --color-text-muted: #666666; --color-bg-default: #F4F4F4; --color-white: #FFFFFF; --color-black: #000000; --color-gray-300: #E2E2E2; } /* Primary muss auf body-Ebene gemappt werden, weil Elementor die Variable --e-global-color-primary erst auf .elementor-kit-XX setzt. Auf :root waere sie dort beim Auflosen noch nicht sichtbar -> Fallback wuerde gewinnen. */ body { --color-primary: var(--e-global-color-primary, #7E6B59); --color-primary-10: color-mix(in srgb, var(--color-primary) 10%, #ffffff); --color-primary-30: color-mix(in srgb, var(--color-primary) 30%, #ffffff); --color-primary-50: color-mix(in srgb, var(--color-primary) 50%, #ffffff); --color-primary-hover: color-mix(in srgb, var(--color-primary) 85%, #000000); } /* ===================================================================== 2) Typografie / Basis ===================================================================== */ b, strong { font-weight: 600; } ul { margin-left: -20px; } .se-sidebar-link__label { font-weight: 500; margin: 5px 0; font-size: 18px; } .se-sidebar-link__heading { margin-bottom: 30px!important; } /* Listenpunkte in Primary-Farbe der jeweiligen Subsite */ .elementor-widget-text-editor ul li::marker, .elementor-widget-text-editor ol li::marker, .elementor-widget-theme-post-content ul li::marker, .elementor-widget-theme-post-content ol li::marker { color: var(--color-primary); } .elementor-widget-text-editor ol li::marker, .elementor-widget-theme-post-content ol li::marker { font-weight: 600; } #wpadminbar { z-index: 99999999999!important; } /* ===================================================================== 3) Header / Standort-Switcher ===================================================================== */ .site-header { position: relative; z-index: 99999; } .standort-switcher ul.elementskit-navbar-nav > li > a.ekit-menu-nav-link { display: block !important; width: 154px; padding: 9px 10px 12px 14px !important; transition: .3s ease; border-top: 4px solid transparent !important; text-decoration: none !important; } .standort-switcher .elementor-icon-list-icon { margin-left: -30px; margin-right: -10px; font-size: 21px; } .standort-switcher .elementor-inline-item a { padding-right: 15px; padding-left: 25px; } .elementor-icon-list-text { line-height: 1.2em !important; } /* Seelsorgeeinheit / Dachseite */ .standort-switcher a.ekit-menu-nav-link[href*="seelsorge.kundenwebseite.ch"] { background: var(--color-gray-300) !important; border-top-color: var(--color-dach-base) !important; color: var(--color-black) !important; } .standort-switcher a.ekit-menu-nav-link[href*="seelsorge.kundenwebseite.ch"]:hover { background: var(--color-dach-base) !important; border-top-color: var(--color-dach-hover) !important; color: var(--color-white) !important; } /* Au */ .standort-switcher a.ekit-menu-nav-link[href*="kath-au"] { background: var(--color-gray-300) !important; border-top-color: var(--color-au-base) !important; } .standort-switcher a.ekit-menu-nav-link[href*="kath-au"]:hover { background: var(--color-au-base) !important; border-top-color: var(--color-au-hover) !important; color: var(--color-white) !important; } /* Heerbrugg */ .standort-switcher a.ekit-menu-nav-link[href*="kath-heerbrugg"] { background: var(--color-gray-300) !important; border-top-color: var(--color-heerbrugg-base) !important; } .standort-switcher a.ekit-menu-nav-link[href*="kath-heerbrugg"]:hover { background: var(--color-heerbrugg-base) !important; border-top-color: var(--color-heerbrugg-hover) !important; color: var(--color-white) !important; } /* Berneck */ .standort-switcher a.ekit-menu-nav-link[href*="kath-berneck"] { background: var(--color-gray-300) !important; border-top-color: var(--color-berneck-base) !important; } .standort-switcher a.ekit-menu-nav-link[href*="kath-berneck"]:hover { background: var(--color-berneck-base) !important; border-top-color: var(--color-berneck-hover) !important; color: var(--color-white) !important; } /* Aktiv-Zustand des aktuellen Standorts */ .standort-switcher li.current-menu-item > a.ekit-menu-nav-link, .standort-switcher li.current_page_item > a.ekit-menu-nav-link, .standort-switcher li.current-menu-ancestor > a.ekit-menu-nav-link { color: var(--color-white) !important; } .standort-switcher li.current-menu-item > a.ekit-menu-nav-link[href*="kath-au"], .standort-switcher li.current_page_item > a.ekit-menu-nav-link[href*="kath-au"], .standort-switcher li.current-menu-ancestor > a.ekit-menu-nav-link[href*="kath-au"] { background: var(--color-au-base) !important; border-top-color: var(--color-au-hover) !important; } .standort-switcher li.current-menu-item > a.ekit-menu-nav-link[href*="kath-heerbrugg"], .standort-switcher li.current_page_item > a.ekit-menu-nav-link[href*="kath-heerbrugg"], .standort-switcher li.current-menu-ancestor > a.ekit-menu-nav-link[href*="kath-heerbrugg"] { background: var(--color-heerbrugg-base) !important; border-top-color: var(--color-heerbrugg-hover) !important; } .standort-switcher li.current-menu-item > a.ekit-menu-nav-link[href*="kath-berneck"], .standort-switcher li.current_page_item > a.ekit-menu-nav-link[href*="kath-berneck"], .standort-switcher li.current-menu-ancestor > a.ekit-menu-nav-link[href*="kath-berneck"] { background: var(--color-berneck-base) !important; border-top-color: var(--color-berneck-hover) !important; } /* ===================================================================== 4) Section-Titles (mit farbigem Highlight-Balken) ===================================================================== */ .title { margin: 0 0 50px 0; line-height: 1.2; } .title h1, .title h3 { position: relative; display: inline-block; z-index: 0; } .title h1 { font-size: 36px !important; margin-bottom: 50px; } .title h3 { font-size: 22px !important; margin-bottom: 20px; } .title h1::after, .title h3::after { content: ""; position: absolute; left: -5px; right: -30px; bottom: -10px; height: 22px; background: var(--color-primary-30); z-index: -1; } /* ===================================================================== 5) Event-Date Block ===================================================================== */ .event-date { position: relative; font-size: 22px; font-weight: 600; color: var(--color-text-primary); margin-bottom: 30px; padding-bottom: 10px; } .event-date::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background-color: var(--color-primary); } .event-date::before { content: ""; position: absolute; left: 0; bottom: 0; width: 140px; height: 4px; background-color: var(--color-primary); } /* Wenn Beiträge per Standort-Kategorie eingefärbt werden sollen (z.B. Aktuelles-Übersicht, die alle drei Pfarreien mischt) */ .category-katholische-pfarrei-au-sg .event-date::before, .category-katholische-pfarrei-au-sg .event-date::after { background-color: var(--color-au-base) !important; } .category-katholische-pfarrei-berneck .event-date::before, .category-katholische-pfarrei-berneck .event-date::after { background-color: var(--color-berneck-base) !important; } .category-katholische-pfarrei-heerbrugg .event-date::before, .category-katholische-pfarrei-heerbrugg .event-date::after { background-color: var(--color-heerbrugg-base) !important; } /* ===================================================================== 6) Footer ===================================================================== */ .footer-left-boxed { padding-left: max(20px, calc((100vw - 1280px) / 2)); padding-right: 20px; box-sizing: border-box; } /* ===================================================================== 7) Sidebar-Kontaktperson (Icon-List Adresse oben ausrichten) ===================================================================== */ /* Nur fuer mehrzeilige Items (z.B. Adresse mit Zeilenumbruch) das Icon oben statt zentriert ausrichten. Andere Icon-Lists (fade-list, nav-simple) bleiben unberuehrt und behalten ihre Standard-Zentrierung. */ .elementor-widget-icon-list .elementor-icon-list-item:has(br) { align-items: flex-start; } .elementor-widget-icon-list .elementor-icon-list-item:has(br) .elementor-icon-list-icon { padding-top: 4px; } .elementor-widget-icon-list .elementor-icon-list-item:has(br) .elementor-icon-list-text { line-height: 1.5; } /* ===================================================================== 8) Simple Navigation (Sub-Menüs) ===================================================================== */ .nav-simple .elementor-icon-list-items { display: flex; flex-wrap: wrap; gap: 0; margin: 0 !important; padding: 0; align-items: center; } .nav-simple .elementor-icon-list-item { margin: 0 !important; padding: 0 !important; list-style: none; } .nav-simple .elementor-icon-list-item > a, .nav-simple .elementor-icon-list-item > span, .fade-list .elementor-icon-list-item > a, .fade-list .elementor-icon-list-item > span { text-decoration: none; line-height: 1; color: var(--color-text-primary) !important; background: transparent; transition: background-color .25s ease, color .25s ease; } .nav-simple .elementor-icon-list-text, .fade-list .elementor-icon-list-text { color: var(--color-text-primary) !important; transition: color .25s ease; } /* Hover + aktive States: Text bekommt Subsite-Primary, Hintergrund bleibt transparent. Default (schwarz/text-primary) bleibt unveraendert, nur die Schriftfarbe wechselt beim Hover und auf der aktiven Seite. */ .nav-simple .elementor-icon-list-item:hover > a, .nav-simple .elementor-icon-list-item:hover > span, .nav-simple .elementor-icon-list-item.current-menu-item > a, .nav-simple .elementor-icon-list-item.current-menu-item > span, .nav-simple .elementor-icon-list-item.elementor-item-active > a, .nav-simple .elementor-icon-list-item.elementor-item-active > span, .nav-simple .elementor-icon-list-item.is-active > a, .nav-simple .elementor-icon-list-item.is-active > span, .fade-list .elementor-icon-list-item:hover > a, .fade-list .elementor-icon-list-item:hover > span, .fade-list .elementor-icon-list-item.current-menu-item > a, .fade-list .elementor-icon-list-item.current-menu-item > span, .fade-list .elementor-icon-list-item.elementor-item-active > a, .fade-list .elementor-icon-list-item.elementor-item-active > span, .fade-list .elementor-icon-list-item.is-active > a, .fade-list .elementor-icon-list-item.is-active > span { background: transparent; color: var(--color-primary) !important; } .nav-simple .elementor-icon-list-item:hover .elementor-icon-list-text, .nav-simple .elementor-icon-list-item.current-menu-item .elementor-icon-list-text, .nav-simple .elementor-icon-list-item.elementor-item-active .elementor-icon-list-text, .nav-simple .elementor-icon-list-item.is-active .elementor-icon-list-text, .fade-list .elementor-icon-list-item:hover .elementor-icon-list-text, .fade-list .elementor-icon-list-item.current-menu-item .elementor-icon-list-text, .fade-list .elementor-icon-list-item.elementor-item-active .elementor-icon-list-text, .fade-list .elementor-icon-list-item.is-active .elementor-icon-list-text { color: var(--color-primary) !important; } /* Hoechste Prio: Elementor setzt seine eigene Text-Farbe per Inline-Style aus Widget-Settings. Damit der schwarze Default greift, muessen wir gegen die direkte Selector-Specificity ankaempfen. */ .fade-list.elementor-widget-icon-list .elementor-icon-list-item .elementor-icon-list-text, .fade-list.elementor-widget-icon-list .elementor-icon-list-item a .elementor-icon-list-text { color: var(--color-text-primary) !important; } .fade-list.elementor-widget-icon-list .elementor-icon-list-item:hover .elementor-icon-list-text, .fade-list.elementor-widget-icon-list .elementor-icon-list-item a:hover .elementor-icon-list-text { color: var(--color-primary) !important; } /* ===================================================================== 9) Breadcrumbs ===================================================================== */ #breadcrumbs span { margin: 5px; } #breadcrumbs a { font-size: 18px; font-weight: 300; } .breadcrumb_last { font-weight: 500; } @media (max-width: 480px) { #breadcrumbs span, #breadcrumbs a { margin: 0px!important; font-size: 16px!important; } } /* ===================================================================== 10) Brand-Quote ===================================================================== */ .brand-quote { position: relative; font-size: 1.6rem; line-height: 1.7; font-style: italic; color: var(--color-text-primary); margin: 4rem 0; padding: 2rem 3rem; text-align: left; } .brand-quote::before, .brand-quote::after { content: "“"; position: absolute; font-size: 6rem; line-height: 1; color: var(--color-primary-10); font-family: serif; } .brand-quote::before { top: -20px; left: 0; } .brand-quote::after { content: "”"; bottom: -40px; right: 0; } .brand-quote .quote-author { display: block; margin-top: 1.8rem; font-size: 1rem; font-style: normal; font-weight: 500; color: var(--color-text-muted); } /* ===================================================================== 11) Suche / WPC-Filter ===================================================================== */ .wpc-filters-widget-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; } .wpc-filters-widget-wrapper .wpc-instead-of-posts-found { display: none; } .wpc-filters-widget-wrapper .wpc-filters-section { display: flex; flex-direction: column; min-width: 0; } .wpc-filters-widget-wrapper .wpc-filter-header { height: 36px; display: flex; align-items: flex-end; } .wpc-filters-widget-wrapper .wpc-filter-title, .widget-title.wpc-filter-title { margin: 0; font-size: 22px; font-weight: 500; line-height: 1.15; color: var(--color-primary); } .wpc-filters-widget-wrapper .wpc-filters-widget-select, .wpc-filters-widget-wrapper .wpc-search-field { width: 100%; height: 54px; border-radius: 6px; border: none; background: var(--color-bg-default); color: inherit; outline: none; box-shadow: none; } .wpc-filters-widget-wrapper .wpc-filter-content, .wpc-filters-widget-wrapper .wpc-filter-search-form { margin-top: 10px; } .wpc-filters-widget-wrapper .wpc-filters-widget-select { padding: 0 42px 0 14px; appearance: none; background-image: linear-gradient(45deg, transparent 50%, rgba(0,0,0,.55) 50%), linear-gradient(135deg, rgba(0,0,0,.55) 50%, transparent 50%); background-position: calc(100% - 18px) 22px, calc(100% - 12px) 22px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; } .wpc-filters-widget-wrapper .wpc-search-field-wrapper { position: relative; width: 100%; } .wpc-filters-widget-wrapper .wpc-search-field { padding: 0 48px 0 44px; } .wpc-filters-widget-wrapper .wpc-search-field::placeholder { color: rgba(0,0,0,.45); } .wpc-filters-widget-wrapper .wpc-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; opacity: .55; pointer-events: none; color: var(--color-primary); } .wpc-filters-widget-wrapper .wpc-search-icon::before { content: ""; position: absolute; inset: 0; border: 2px solid currentColor; border-radius: 50%; transform: scale(.75); } .wpc-filters-widget-wrapper .wpc-search-icon::after { content: ""; position: absolute; width: 9px; height: 2px; background: currentColor; right: -2px; bottom: 1px; transform: rotate(45deg); border-radius: 2px; } .wpc-filters-widget-wrapper .wpc-search-clear-icon-wrapper { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); } .wpc-filters-widget-wrapper .wpc-search-clear-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; text-decoration: none; font-size: 20px; line-height: 1; color: inherit; opacity: .55; } .wpc-filters-widget-wrapper .wpc-search-clear-icon:hover { opacity: .85; background: rgba(0,0,0,.06); } .wpc-filters-widget-wrapper .wpc-filters-widget-select:focus, .wpc-filters-widget-wrapper .wpc-search-field:focus { border-color: var(--color-primary-50); } .wpc-filters-widget-wrapper a { text-underline-offset: 2px; } @media (max-width: 767px) { .wpc-filters-widget-wrapper { grid-template-columns: 1fr; gap: 16px; } .wpc-filters-widget-wrapper .wpc-filter-header { height: auto; } } /* ===================================================================== 12) Popups / Modals ===================================================================== */ .dialog-lightbox-widget .dialog-widget-overlay { z-index: 99990 !important; } .dialog-lightbox-widget { z-index: 99995 !important; } .elementor-popup-modal .dialog-widget { position: relative !important; } .elementor-popup-modal .dialog-close-button { position: absolute !important; top: 28px !important; right: 28px !important; z-index: 99999 !important; font-size: 20px; } @media (max-width: 767px) { .elementor-popup-modal .dialog-close-button { top: 18px !important; right: 18px !important; } } .custom-popup-close { font-size: 40px !important; } /* ===================================================================== 13) Tagesprogramm ===================================================================== */ .tagesprogramm { margin-top: 10px; } .tp-row { display: flex; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--color-gray-300); } .tp-time { width: 90px; color: var(--color-text-primary); text-align: left; flex-shrink: 0; margin-top: -4px; } .tp-text { flex: 1; color: var(--color-text-muted); line-height: 1.2; } .elementor-button-icon { font-size: 15px; margin-top: 3px; } /* ===================================================================== 14) Sidebar-Link (Shortcode [se_sidebar_link]) ===================================================================== */ .se-sidebar-link-wrap { margin: 1em 0; } .se-sidebar-link__heading { margin: 0 0 0.5em 0; font-size: 1.1em; font-weight: 600; line-height: 1.2; } /* Liste mit beliebig vielen externen Links (Repeater-Output) */ .se-sidebar-link__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4em; } .se-sidebar-link__list li { margin: 0; padding: 0; } .se-sidebar-link { display: inline-flex; align-items: center; gap: 0.35em; text-decoration: none; color: var(--color-primary); font-weight: 500; border-bottom: 1px solid currentColor; padding-bottom: 2px; } .se-sidebar-link:hover { color: var(--color-primary-hover); } .se-sidebar-link__icon { display: inline-block; width: 0.9em; height: 0.9em; margin-right: 0.1em; vertical-align: -0.1em; line-height: 1; /* Eigenes Link-Icon statt WP-Emoji-Pfeil. SVG wird per CSS-Mask in Link-Farbe (Primary) eingefaerbt. */ background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } /* WP konvertiert das Unicode-Pfeil-Zeichen automatisch zu einem Emoji-Image. Das blenden wir aus, damit nur unser Mask-Icon zu sehen ist. */ .se-sidebar-link__icon img, .se-sidebar-link__icon .emoji { display: none !important; } /* "Links" soll dasselbe Erscheinungsbild bekommen wie "Kontakt" - inline-block-Heading mit Highlight-Balken (.title h3::after). Damit der Link trotzdem auf einer neuen Zeile darunter steht, machen wir den Wrapper zu einer flex-column. */ .se-sidebar-link-wrap .title { display: flex; flex-direction: column; align-items: flex-start; } /* ===================================================================== 15) Forms (Elementor Form HTML-Felder) ===================================================================== */ .elementor-field-type-html { margin-top: 20px; font-weight: 400 !important; } /* ===================================================================== 16) Generic-Link Klasse (im Content) ===================================================================== */ .link span { color: var(--color-primary) !important; border-bottom: 1px solid var(--color-primary) !important; line-height: 10px; } /* ===================================================================== 17) Fotoerinnerungen-Galerien (Shortcode [se_fotoerinnerungen]) ===================================================================== */ .se-fotoerinnerungen { display: flex; flex-direction: column; gap: 3em; } .se-foto-section { margin: 0; } .se-foto-title { margin: 0 0 1em 0; font-size: 1.5em; font-weight: 600; color: var(--color-text-primary); } .se-foto-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); } .se-foto-cols-3 { grid-template-columns: repeat(2, 1fr); } .se-foto-cols-4 { grid-template-columns: repeat(2, 1fr); } .se-foto-cols-5 { grid-template-columns: repeat(3, 1fr); } .se-foto-cols-6 { grid-template-columns: repeat(3, 1fr); } @media (min-width: 600px) { .se-foto-cols-3 { grid-template-columns: repeat(3, 1fr); } .se-foto-cols-4 { grid-template-columns: repeat(3, 1fr); } .se-foto-cols-5 { grid-template-columns: repeat(4, 1fr); } .se-foto-cols-6 { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1024px) { .se-foto-cols-3 { grid-template-columns: repeat(3, 1fr); } .se-foto-cols-4 { grid-template-columns: repeat(4, 1fr); } .se-foto-cols-5 { grid-template-columns: repeat(5, 1fr); } .se-foto-cols-6 { grid-template-columns: repeat(6, 1fr); } } .se-foto-item { display: block; overflow: hidden; border-radius: 4px; aspect-ratio: 1 / 1; background: var(--color-bg-default); transition: transform .25s ease, box-shadow .25s ease; } .se-foto-item:hover { transform: scale(1.02); box-shadow: 0 6px 18px rgba(0, 0, 0, .15); } .se-foto-item img { width: 100%; height: 100%; object-fit: cover; display: block; } /* --- Inhaltsverzeichnis (Anker-Liste oberhalb der Galerien) ---------- */ .se-fotoerinnerungen-toc { margin: 0 0 2.5em 0; padding: 1.25em 1.5em; background: var(--color-bg-default); border-left: 4px solid var(--color-primary); border-radius: 4px; } .se-fotoerinnerungen-toc__heading { margin: 0 0 0.75em 0; font-size: 1.1em; font-weight: 600; color: var(--color-text-primary); } .se-fotoerinnerungen-toc__list { list-style: none; margin: 0; padding: 0; } .se-fotoerinnerungen-toc__item { margin: 0; padding: 0.3em 0; break-inside: avoid; } .se-fotoerinnerungen-toc__link { text-decoration: none; color: inherit; border-bottom: 1px dotted transparent; transition: border-color .15s ease, color .15s ease; } .se-fotoerinnerungen-toc__link:hover, .se-fotoerinnerungen-toc__link:focus { color: var(--color-primary); border-bottom-color: currentColor; } @media (min-width: 600px) { .se-fotoerinnerungen-toc__list { column-count: 2; column-gap: 2em; } } @media (min-width: 1024px) { .se-fotoerinnerungen-toc__list { column-count: 3; } } /* Anker-Sprung-Ziel: Abstand zum oberen Rand, damit der Sticky-Header die Heading nicht uebersteht */ .se-foto-section { scroll-margin-top: 100px; } /* --- Interaktive Toolbar (Jahr-Filter, Album-Sprung, Suche) ---------- */ .se-fotoerinnerungen-toolbar { margin: 0 0 2.5em 0; padding: 1.25em 1.5em; background: var(--color-primary-10); border-radius: 4px; } .se-fotoerinnerungen-toolbar__row { display: flex; flex-wrap: wrap; gap: 1em; align-items: flex-end; } .se-fotoerinnerungen-toolbar__field { display: flex; flex-direction: column; gap: 0.35em; flex: 1 1 180px; min-width: 160px; margin: 0; } .se-fotoerinnerungen-toolbar__field--search { flex: 2 1 240px; } .se-fotoerinnerungen-toolbar__label { font-size: 0.85em; font-weight: 600; color: var(--color-text-primary); letter-spacing: 0.02em; } .se-fotoerinnerungen-toolbar__select, .se-fotoerinnerungen-toolbar__input { width: 100%; padding: 0.55em 0.75em; line-height: 1.3; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 4px; background-color: #fff; color: inherit; transition: border-color .15s ease, box-shadow .15s ease; box-sizing: border-box; } .se-fotoerinnerungen-toolbar__select:focus, .se-fotoerinnerungen-toolbar__input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent); } .se-fotoerinnerungen-toolbar__reset { flex: 0 0 auto; padding: 0.55em 1.1em!important; font-size: 0.8em!important; line-height: 1.3; border: 1px solid var(--color-primary); border-radius: 4px; background-color: transparent; color: var(--color-primary); cursor: pointer; transition: background-color .15s ease, color .15s ease; align-self: flex-end; } .se-fotoerinnerungen-toolbar__reset:hover, .se-fotoerinnerungen-toolbar__reset:focus-visible { background-color: var(--color-primary); color: #fff; outline: none; } .se-fotoerinnerungen-toolbar__empty { margin-top: 1.25em; padding: 1em 1.25em; background-color: rgba(0, 0, 0, 0.04); border-radius: 4px; font-style: italic; color: var(--color-text-primary); } @media (max-width: 600px) { .se-fotoerinnerungen-toolbar { padding: 1em; } .se-fotoerinnerungen-toolbar__row { gap: 0.75em; } .se-fotoerinnerungen-toolbar__field, .se-fotoerinnerungen-toolbar__field--search { flex: 1 1 100%; } .se-fotoerinnerungen-toolbar__reset { width: 100%; } } @media (max-width: 480px) { h1.elementor-heading-title.elementor-size-default { font-size: 22px!important; } h3.elementor-heading-title.elementor-size-default { font-size: 18px!important; } } /* ===================================================================== 16) Sidebar leer -> komplett ausblenden (Inhalt-Spalte unveraendert) --------------------------------------------------------------------- Die Body-Klasse "se-no-sidebar" wird in functions.php gesetzt, sobald auf der Page weder Kontaktpersonen noch Downloads noch Externe Links zugewiesen sind. Wir blenden nur die Sidebar-Spalte aus; die Inhalt-Spalte behaelt ihre 70%-Breite, damit das Layout konsistent zu Pages MIT Sidebar bleibt. Container-ID stammt aus dem Theme-Builder-Template "Inhaltsseite Allgemein" (post 136). ===================================================================== */ body.se-no-sidebar .elementor-element-7747312e { display: none !important; } /* Einzelne Sidebar-Bloecke ausblenden, wenn das entsprechende ACF-Feld leer ist. Vermeidet Luecken zwischen gefuellten Bloecken, wenn z.B. nur Kontakt + Links gepflegt sind, Downloads aber leer. 1cc1396d Kontaktperson-Block 36e3bf8d Downloads-Block 37f9ae3 Externer-Link-Block */ body.se-no-sidebar-kontakt .elementor-element-1cc1396d, body.se-no-sidebar-downloads .elementor-element-36e3bf8d, body.se-no-sidebar-links .elementor-element-37f9ae3 { display: none !important; } /* ===================================================================== 17) Sidebar Loop Grids - Titel nur einmal anzeigen --------------------------------------------------------------------- Die Loop-Item-Templates "Kontaktperson" (133) und "Downloads" (116) enthalten je eine Heading-Widget mit dem Titel ("Kontakt" bzw. "Downloads"). Bei mehreren Personen / Downloads wuerde der Titel somit pro Item erneut erscheinen. Hier blenden wir den Titel ab dem zweiten Loop-Item aus, damit nur EIN Titel ueber der Liste steht. Hinweis: Vor den Loop-Items steht im Loop-Container ein