/* Theme Name: UserMindTheme Description: Schreibe hier eine kurze Beschreibung über dein Child-Theme Author: usermind Author URL: https://www.user-mind.de/ Template: hello-elementor Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: UserMindTheme */ /* Schreibe hier dein eigenes persönliches Stylesheet */ p,h1,h2,h3,h4,h5,h6 { -moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } b, strong { font-weight: 500!important; } .elementor-field-subgroup:not(.elementor-subgroup-inline) .elementor-field-option { margin: 7px 0 10px 4px; } label { padding-left: 6px; vertical-align: baseline!important; } /* ================================================================= * 1.0 - HEADER * ----------------------------------------------------------------- * Frueher: "Hide on scroll down" -- #stickyheaders wurde per Klasse * .headerup mit transform: translateY(-140px) aus dem Viewport * geschoben (Klasse kam aus js/script.js). Entfernt, damit der * Elementor-Sticky-Header dauerhaft sichtbar bleibt. * ================================================================= */ /* Menuepunkte sollen bei Hover/Focus nicht nach oben "huepfen". Elementor-Pointer-Animation "Float" (transform: translateY(-8px)) wird hier abgeschaltet. Sauberer waere es im Widget selbst: Stil -> Menuepunkte -> Zeiger -> Animation = Keine. */ .e--animation-float .elementor-item:focus, .e--animation-float .elementor-item:hover { transform: none !important; } /* Menuepunkt "Startseite" ab 1024px ausblenden -- auf grossen Screens fuehrt das Logo dorthin, im Burger-Menue darunter bleibt er als Einstieg stehen. Angesprochen ueber die von WordPress vergebene Post-ID-Klasse: Sie haengt am Menue-Eintrag, nicht an der Position, und ueberlebt damit ein Umsortieren der Navigation. Wird der Eintrag geloescht und neu angelegt, aendert sich die Nummer. */ @media screen and (min-width: 1024px) { .menu-item-6911 { display: none !important; } } /* ================================================================= * 2.0 - HERO-SEKTIONEN (Hauptseiten) * ================================================================= */ @media screen and (max-width: 1024px) { /*.hero-bg-img::before {*/ /* border: 4px solid green;*/ /* background-image: linear-gradient(90deg, #C00004A6 70%, #FFFFFF00 90%) !important;*/ /*}*/ } @media screen and (max-width: 767px) { /*.hero-bg-img::before {*/ /* background-image: linear-gradient(90deg, #C00004A6 80%, #FFFFFF00 100%) !important;*/ /*}*/ } /* ================================================================= * 3.0 - SEITEN-LAYOUT (allgemein) * ================================================================= */ .page-content > .elementor > .e-con, .elementor-location-single > .elementor-element{ padding-left: 32px !important; padding-right: 32px !important; } @media screen and (max-width: 1024px) { .page-content > .elementor > .e-con, .elementor-location-single > .elementor-element{ padding-left: 16px !important; padding-right: 16px !important; } } @media screen and (max-width: 767px) { .page-content > .elementor > .e-con, .elementor-location-single > .elementor-element{ padding-left: 8px !important; padding-right: 8px !important; } } /* Ausnahme Tablet: Die Boxen-Reihe unter dem Header braucht mehr Luft zum Rand als die generischen 16px, damit die Karten nicht am Viewport kleben. */ @media screen and (min-width: 768px) and (max-width: 1024px) { .page-content > .elementor > .e-con.header-boxes, .elementor-location-single > .elementor-element.header-boxes { padding-left: 32px !important; padding-right: 32px !important; } } @media screen and (min-width: 768px) and (max-width: 1024px) { .page-content > .elementor > .e-con.padding-small-1 { padding-left: 40px !important; padding-right: 40px !important; } } @media screen and (min-width: 1025px) { .page-content > .elementor > .e-con.padding-small-1 { padding-left: 64px !important; padding-right: 64px !important; } } @media screen and (min-width: 768px) and (max-width: 1024px) { .page-content > .elementor > .e-con.padding-small-2 { padding-left: 128px !important; padding-right: 128px !important; } } @media screen and (min-width: 1025px) { .page-content > .elementor > .e-con.padding-small-2 { padding-left: 192px !important; padding-right: 192px !important; } } /* ================================================================= * 4.0 - ELEMENTOR WIDGETS * ================================================================= */ .elementor-counter-title { text-align: center; } /* ================================================================= * 5.0 - SPENDEN: ABGESCHLOSSENES PROJEKT * Ersetzt auf der Einzelseite das Spendenformular (Ziel erreicht). * ================================================================= */ .brksp-projekt-abgeschlossen { padding: 32px; text-align: center; } .brksp-projekt-abgeschlossen__titel { margin: 0 0 12px; font-size: 24px; font-weight: 700; color: #e30613; } .brksp-projekt-abgeschlossen__text { margin: 0 0 24px; } /* Nachbau des Elementor-Buttons "Jetzt spenden & Gutes Tun" (elementor-button, elementor-size-sm, elementor-animation-grow) -- fest im CSS statt an die Elementor-Klassen zu haengen, weil dieser Button per PHP injiziert wird und nicht als echtes Elementor-Widget im Seiteninhalt steht. */ .brksp-projekt-abgeschlossen__link, .brksp-projekt-abgeschlossen__link:visited { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 16px 20px; color: #fff !important; background: #e60005; font-weight: 700; line-height: 22.4px; text-decoration: none; border-radius: 50px; transition: transform .3s; } .brksp-projekt-abgeschlossen__link:hover, .brksp-projekt-abgeschlossen__link:focus { color: #fff !important; transform: scale(1.1); } .brksp-projekt-abgeschlossen__link-text { color: #fff !important; } .brksp-projekt-abgeschlossen__link-icon { display: flex; align-items: center; width: 24px; height: 24px; flex-shrink: 0; } .brksp-projekt-abgeschlossen__link-icon svg { display: block; width: 24px; height: 24px; } /* Spendenformular (Gravity Forms, Formular-ID 1): Abstand nach dem E-Mail-Feld, damit es nicht zu eng am naechsten Feld klebt. */ #field_1_46 { padding-bottom: 32px; } /* Spendenformular (Gravity Forms, Formular-ID 1): Abstand nach dem PLZ-Feld (Spendenbescheinigung), damit es nicht zu eng am naechsten Feld klebt. */ #field_1_26 { padding-bottom: 24px; } /* Spendenformular (Gravity Forms, Formular-ID 1): Newsletter-Consent-Feld sitzt ohne eigenen Abstand direkt am Feld darueber -- Consent-Felder bringen im GF-Theme kein Standard-Feld-Padding mit. */ #field_1_47 { padding-top: 24px; } /* Spendenformular (Gravity Forms, Formular-ID 1): PayPal-Hinweistext (HTML-Feld) braucht Abstand zum Feld darueber. */ #field_1_49 { padding-top: 24px; } /* ================================================================= * 6.0 - MOBILE OPTIMIERUNGEN * Sammelstelle für alle mobilspezifischen Anpassungen. * Breakpoints wie im restlichen Theme: * Tablet = max-width: 1024px * Smartphone = max-width: 767px * ================================================================= */ /* ----------------------------------------------------------------- * 6.1 - HEADER (mobil) * ----------------------------------------------------------------- */ /* Grenzbereich: kleine Desktops / grosse Tablets im Querformat */ @media screen and (min-width: 1025px) and (max-width: 1200px) { .elementor-element-7b17068 { display: none !important; } } /* Grenzbereich: kleine Desktops */ @media screen and (min-width: 1025px) and (max-width: 1100px) { .elementor-element-fa6e0b3 .elementor-icon-list-icon { display: none !important; } .elementor-element-b253bc8 { padding-left: 12px !important; padding-right: 12px !important; } } @media screen and (max-width: 1024px) { /* Tablet */ } @media screen and (max-width: 767px) { /* Smartphone */ } /* Sehr schmale Smartphones */ @media screen and (max-width: 434px) { .elementor-element-5864f79 .elementor-icon-list-icon svg { margin-left: 0 !important; } } /* ----------------------------------------------------------------- * 6.2 - BODY / INHALT (mobil) * ----------------------------------------------------------------- */ @media screen and (max-width: 1024px) { /* Tablet */ } @media screen and (max-width: 767px) { /* --- Fördermitgliedschaft: Beitragskarten (Förderer / Pate / Held) --- */ .fo-headline .elementor-heading-title { font-size: 16px !important; /* Style-Kit liefert 28px */ line-height: 1.1 !important; } } /* Schmale Smartphones: Überschrift auf feste Höhe, Text darin vertikal mittig. Damit starten Betrag und Icon auf allen drei Kacheln auf gleicher Höhe, auch wenn eine Bezeichnung umbricht. */ @media screen and (max-width: 499px) { .fo-headline .elementor-widget-container { display: flex !important; align-items: center !important; justify-content: center !important; height: 50px !important; } } /* ----------------------------------------------------------------- * 6.2.1 - Fördermitgliedschaft: Betragsanzeige (mobil) * Basis-Styles siehe Abschnitt 7.0. * ----------------------------------------------------------------- */ @media screen and (max-width: 767px) { .foerderer-preis__wert { font-size: 32px !important; line-height: 1.1 !important; } } /* ----------------------------------------------------------------- * 6.2.2 - .grid-plus: einspaltig auf sehr schmalen Screens * ----------------------------------------------------------------- */ @media screen and (max-width: 550px) { .grid-plus, .grid-plus > .e-con-inner { grid-template-columns: 1fr !important; } } /* ----------------------------------------------------------------- * 6.2.3 - Projekt-Slider: Navigationspfeile unter den Slider * Basis-Styles siehe Abschnitt 11.0. Dort steht auch die zweite mobile * Anpassung des Sliders (Auslauf rechts nur auf Desktop) -- sie muss * hinter ihrer Basisregel stehen und kann deshalb nicht hierher. * * Auf Desktop stehen die Pfeile seitlich neben den Karten (eingestellt im * Widget unter Style -> Navigation). Ab Tablet abwaerts ist dort kein Platz * mehr -- die beiden Buttons liegen sonst ueber den Karten. Deshalb wandern * sie unterhalb des Sliders in eine rechtsbuendige Leiste. * * Die Leiste bleibt bewusst im Textfluss statt absolut positioniert: so * waechst der Slider automatisch um ihre Hoehe und es braucht kein * zusaetzliches padding-bottom, das bei geaenderter Pfeilgroesse * nachgezogen werden muesste. * * !important ist noetig, weil das Unlimited-Elements-Addon die * Pfeil-Positionierung ueber die Widget-ID (#uc_…) ins Seiten-CSS * schreibt und damit jede Klassenregel von hier schlaegt. * ----------------------------------------------------------------- */ @media screen and (max-width: 1024px) { .brksp-projekt-slider .owl-nav { position: static !important; display: flex !important; justify-content: flex-end; gap: 8px; margin-top: 12px; } /* inset/transform zuruecksetzen: das Addon setzt je nach gewaehlter "Nav Arrow Position" top/left und teils ein translate. */ .brksp-projekt-slider .owl-nav .owl-prev, .brksp-projekt-slider .owl-nav .owl-next { position: static !important; inset: auto !important; margin: 0 !important; transform: none !important; } } /* ----------------------------------------------------------------- * 6.2.4 - Fördermitgliedschaft: Beitragskarten als Zeile (mobil) * Basis-Styles siehe Abschnitt 7.0, Betragsgroesse siehe 6.2.1. * * Desktop: drei Karten nebeneinander, Inhalt je Karte untereinander. * Mobil: die drei Karten untereinander, dafuer der Karteninhalt in eine * Zeile -- Icon links, Bezeichnung und Betrag in der Mitte, CTA rechts. * * Die Karte hat zwei Zwischencontainer (Kopf mit Icon/Titel/Betrag, Body * mit Beschreibung und Button), die dem Zeilenlayout im Weg stehen. Statt * sie einzeln zu positionieren, loest "display: contents" sie auf: ihre * Kinder werden damit selbst zu Rastszellen der Karte, ohne dass am Markup * etwas geaendert werden muss. Nebeneffekt und hier erwuenscht: die * Trennlinie am Kopf-Container (border-bottom) faellt mit weg. * * Der Breakpoint ist bewusst 767px und nicht einer unserer eigenen: Der * Beschreibungstext samt Vorteilsliste traegt "elementor-hidden-mobile" * und verschwindet exakt an Elementors Mobile-Grenze. Das Zeilenlayout * setzt darauf auf -- waere der Text noch da, gaebe es eine fuenfte Zelle * ohne Platz. Wird die Grenze in Elementor verschoben, muss dieser Wert * mitwandern. * * Spaltenbreiten: Spalte 1 richtet sich nach dem Icon (64px), Spalte 3 * nach dem Button, ist aber auf 40% gedeckelt -- sonst zieht der lange * Buttontext ("Jetzt Förderer:in werden") als max-content die Spalte auf * ueber 200px und die Mitte fiele auf schmalen Screens auf wenige Pixel * zusammen. minmax(0,1fr) in der Mitte erlaubt das Schrumpfen unter die * Inhaltsbreite (Grid-Zellen haben sonst min-width:auto). * ----------------------------------------------------------------- */ @media screen and (max-width: 767px) { /* Die drei Karten untereinander. Elementor steuert die Spalten des Grid-Containers ueber die Custom Property, deshalb beide Wege. */ .elementor-element.elementor-element-7781e80 { --e-con-grid-template-columns: 1fr; grid-template-columns: 1fr !important; } /* gap als Kurzform und mit !important: Elementor setzt am Container "gap: var(--row-gap) var(--column-gap)" und laedt sein Post-CSS nach dem Theme-Stylesheet. Einzeln gesetzte column-gap/row-gap werden von dieser Kurzform wieder ueberschrieben. */ .foerderer-card { display: grid !important; grid-template-columns: auto minmax(0, 1fr) minmax(0, 40%); align-items: center; gap: 8px !important; } /* Kopf- und Body-Container aufloesen (siehe Kommentar oben). */ .foerderer-card > .e-con { display: contents !important; } .foerderer-card .elementor-widget-icon { grid-column: 1; grid-row: 1 / span 2; } .foerderer-card .fo-headline { grid-column: 2; grid-row: 1; } .foerderer-card .foerderer-betrag { grid-column: 2; grid-row: 2; } /* Der CTA spannt beide Zeilen und steht darin mittig. align-self statt sich auf das align-items der Karte zu verlassen: Elementor setzt an jedem Widget "align-self: var(--align-self)" und wuerde die Vorgabe des Rasters sonst je nach Ladereihenfolge des Post-CSS kippen. */ .foerderer-card .forderer-beitrag-button { grid-column: 3; grid-row: 1 / span 2; align-self: center !important; } /* Mittelspalte linksbuendig -- zentriert ergibt neben dem Icon ein unruhiges Bild. !important, weil Elementor die Ausrichtung der Ueberschrift je Widget als ID-Selektor ins Post-CSS schreibt. */ .foerderer-card .fo-headline .elementor-heading-title, .foerderer-card .foerderer-preis { text-align: left !important; } /* Schmalerer Innenabstand, damit im Button mehr Text pro Zeile passt. */ .foerderer-card .forderer-beitrag-button .elementor-button { padding-left: 12px !important; padding-right: 12px !important; } } /* ----------------------------------------------------------------- * 6.2.5 - Ehrenamt: Testimonial-Fussbereich nebeneinander (mobil) * * Im Fuss der Testimonial-Karte stehen Bild und Name/Taetigkeit als zwei * Spalten. Auf Desktop hat die Bildspalte 37% Breite, ab Elementors * Mobil-Grenze (767px) setzt Elementor verschachtelten Containern aber * automatisch "--width: 100%". Zusammen mit dem flex-wrap:wrap des * Fussbereichs brechen die beiden Spalten dadurch zwangslaeufig * untereinander -- die eingestellten 37% sind mobil wirkungslos. * * Hier also beides zuruecknehmen: kein Umbruch, und eine eigene Breite * fuer die Bildspalte. 32% statt der 37% vom Desktop, weil der Text * ("Kaufmaennische Angestellte, Mitglied in der …") auf 375px sonst in * sehr viele Zeilen faellt. * * ANGESPROCHEN UEBER DIE KLASSE "ea-testimonial-fuss", die am Fuss-Container * jeder Testimonial-Karte gesetzt sein muss (Erweitert -> CSS-Klassen). * Bewusst nicht ueber die Container-IDs: Die Karten kommen nicht aus einem * Loop-Template, sondern sind einzeln gebaut -- jede hat eigene IDs * (288b5b5 / 88e9573 / 9a12064 …), eine ID-Regel muesste bei jedem neuen * Testimonial nachgezogen werden. * * Die beiden Spalten werden ueber ihre Reihenfolge getroffen: erstes Kind * ist die Bildspalte, zweites die mit Name und Taetigkeit. * ----------------------------------------------------------------- */ @media screen and (max-width: 767px) { .ea-testimonial-fuss { flex-wrap: nowrap !important; align-items: center; } /* Bildspalte: feste Breite, schrumpft nicht */ .ea-testimonial-fuss > .e-con:first-child { --width: 36%; width: 36% !important; flex: 0 0 auto !important; } /* Das Bild selbst steht im Widget auf 30% Breite. Das war fuer die volle Kartenbreite gedacht (30% von 590px = 177px) und ergibt in der schmalen Spalte nur noch rund 25px. Hier fuellt es seine Spalte. */ .ea-testimonial-fuss > .e-con:first-child img { width: 100% !important; max-width: 100% !important; height: auto !important; } /* Textspalte: nimmt den Rest. min-width:0 hebt das flex-typische min-width:auto auf, sonst kann die Spalte nicht unter die Breite ihres laengsten Wortes schrumpfen und schiebt das Bild zusammen. */ .ea-testimonial-fuss > .e-con:last-child { --width: auto; width: auto !important; flex: 1 1 auto !important; min-width: 0; } } /* ----------------------------------------------------------------- * 6.2.6 - Ehrenamt: Berufskarten einspaltig (sehr schmale Screens) * * Die Kacheln (Sanitaeter:in, Rettungsschwimmer:in, ...) stecken in zwei * Zeilen-Containern (.elementor-element-01c0abe mit 2, .elementor-element- * 6125d42 mit 3 Karten), die per Default flex-direction:row nebeneinander * anordnen. Auf flex-direction:column umgestellt stapeln sich die Karten * stattdessen einspaltig. Die Karten selbst behalten dabei ihre feste * Desktop-Breite (263px, per Flex-Aufteilung der Zeile) -- width:100% * zieht sie stattdessen auf volle Zeilenbreite, min-height sichert die * Kartenhoehe ab (Desktop-Wert kommt aus einer festen Hoehe im Widget, * die je nach Textlaenge/Umbruch mobil sonst kleiner ausfallen kann). * * Breakpoint 550px wie bei .grid-plus (Abschnitt 6.2.2) -- an dieser * Stelle beginnt auch hier der Umbruch auf zwei zu enge Spalten. * ----------------------------------------------------------------- */ @media screen and (max-width: 550px) { .elementor-element-01c0abe, .elementor-element-6125d42 { flex-direction: column !important; } .elementor-element-01c0abe > .e-con, .elementor-element-6125d42 > .e-con { width: 100% !important; min-height: 250px !important; } .elementor-element-01c0abe > a, .elementor-element-6125d42 > a { padding: 16px !important; background-position: center top !important; } /* Rettungsschwimmer:in und Hausnotruf-Einsatzfahrer:in: Bildausschnitt passt bei "center top" nicht (wichtiges Motiv sitzt mittig), bleiben deshalb bei center center. */ a.elementor-element-5f9ce43, a.elementor-element-bc8f733 { background-position: center center !important; } } /* ----------------------------------------------------------------- * 6.3 - FOOTER (mobil) * ----------------------------------------------------------------- */ @media screen and (max-width: 1024px) { /* Tablet */ } @media screen and (max-width: 767px) { /* Footer-Grid: Elementors Einstellung "Zeilen: 3" erzeugt grid-template-rows: repeat(3, 1fr) — dadurch sind alle Zeilen so hoch wie die hoechste (die Linkliste). Die Logo-Zeile soll sich stattdessen nach ihrem eigenen Inhalt richten. */ .elementor-element-3cf217c > .e-con-inner { grid-template-rows: min-content auto auto !important; } } /* ================================================================= * 7.0 - FÖRDERMITGLIEDSCHAFT: BEITRAGSKARTEN * Ersetzt die frueheren Inline-Styles im HTML-Widget der drei Kacheln * (Förderer / Pate / Held). Mobile Groesse siehe Abschnitt 6.2.1. * * ACHTUNG Markup: Das Turnus-JS (brk-foerdermitgliedschaft) laeuft vom * span.betrag zwei Ebenen nach oben und ersetzt dort den Textknoten * "/ Monat". Die Verschachtelung * .foerderer-preis > .foerderer-preis__wert > span.betrag + Textknoten * muss deshalb erhalten bleiben. * ================================================================= */ /* Abstand zwischen Kopfbereich (Icon/Bezeichnung/Betrag) und Button-Bereich. Elementor steht am Container auf 24px, hier auf 8px gezogen. !important, weil Elementor den Gap je Container als ID-Selektor ins Post-CSS schreibt und damit jede Klassenregel von hier schlaegt. Bewusst erst ab 768px: darunter ordnet Abschnitt 6.2.4 den Karteninhalt als Zeile an und bringt eigene Abstaende mit. Da dieser Abschnitt in der Datei hinter 6.2.4 steht, wuerde eine unbegrenzte Regel die mobilen Werte ueberschreiben -- Media Queries erhoehen die Spezifitaet nicht, bei Gleichstand gewinnt die spaetere Regel. */ @media screen and (min-width: 768px) { .foerderer-card { gap: 8px !important; } } .foerderer-preis { text-align: center; } .foerderer-preis__wert { color: #E60005; font-weight: 800; font-size: 52px; line-height: 52px; } /* ================================================================= * 8.0 - ELEMENTOR-BREITEN-KORREKTUREN * ================================================================= */ /* Seite 2164, Element 4cd4c577: In Elementor auf 80% Breite gesetzt. Das passt auf Desktop, unterhalb davon soll das Element die volle Breite nutzen. !important, weil Elementors Post-CSS (.elementor-2164 .elementor-element.elementor-element-4cd4c577) dieselbe Spezifitaet hat und nach dem Theme-Stylesheet geladen wird. */ @media screen and (max-width: 1024px) { .elementor-2164 .elementor-element.elementor-element-4cd4c577 { width: 100% !important; max-width: 100% !important; } } /* ================================================================= * 9.0 - ELEMENTOR TABS (n-tabs) * Voraussetzung: Im Widget muss der Umbruchpunkt ("Breakpoint") auf * "Keiner" stehen, sonst baut Elementor das Widget unterhalb des * Breakpoints selbst zum Akkordeon um (Klasse .e-n-tabs-mobile). * * Die Titel bekommen von Elementor 35px Innenabstand links/rechts. * Damit drei Titel auch auf schmalen Viewports nebeneinander bleiben, * wird der Abstand stufenweise reduziert und die Titel teilen sich die * Breite gleichmaessig (flex: 1 1 0 + min-width: 0, sonst verhindert die * Mindestbreite des laengsten Wortes das Schrumpfen). * !important, weil Elementors Post-CSS deutlich spezifischer ist. * ================================================================= */ @media screen and (max-width: 1024px) { .e-n-tabs-heading { flex-wrap: nowrap !important; } .e-n-tabs-heading > .e-n-tab-title { flex: 1 1 0 !important; min-width: 0 !important; padding-left: 16px !important; padding-right: 16px !important; } .e-n-tabs-heading > .e-n-tab-title .e-n-tab-title-text { font-size: 15px; text-align: center; justify-content: center; } } @media screen and (max-width: 767px) { .e-n-tabs-heading { gap: 6px !important; } .e-n-tabs-heading > .e-n-tab-title { padding-left: 10px !important; padding-right: 10px !important; border-radius: 18px !important; } .e-n-tabs-heading > .e-n-tab-title .e-n-tab-title-text { font-size: 13px; line-height: 1.25; /* Lange Titel ("Die Testamentsvollstreckung") sonst breiter als das Drittel, das der Titel zur Verfuegung hat. */ overflow-wrap: anywhere; } } /* ================================================================= * 10.0 - HILFSKLASSE .bg-img-blur * Weichzeichnet das Hintergrundbild eines Elementor-Containers zur * unteren Kante hin, damit Text darauf lesbar bleibt. Die oberen * 60 % bleiben unveraendert scharf, ueber die unteren 40 % nimmt die * Unschaerfe zur Unterkante hin zu. * * Anwendung: Klasse "bg-img-blur" im Elementor am Container mit dem * Hintergrundbild eintragen (Erweitert -> CSS-Klassen). * * Feinjustierung per CSS-Variablen direkt am Element: * --bg-blur-strength : Staerke der Unschaerfe am unteren Rand * --bg-blur-start : ab welcher Hoehe der Verlauf beginnt * * ACHTUNG: Bewusst nur ::after -- Elementor belegt bei Containern * ::before fuer das Hintergrund-Overlay (.e-con:before). * ================================================================= */ .bg-img-blur { --bg-blur-strength: 26px; --bg-blur-start: 60%; position: relative; isolation: isolate; } .bg-img-blur::after { content: ""; position: absolute; top: var(--bg-blur-start); right: 0; bottom: 0; left: 0; z-index: 0; pointer-events: none; /* Die Blur-Ebene bekommt die unteren Ecken des Containers selbst mit. Ein "overflow: hidden" am Container reicht nicht: Chrome beschneidet backdrop-filter nicht zuverlaessig am border-radius des Elternelements -- die Ecken wuerden wieder eckig wirken. Die oberen Ecken bleiben eckig, sie liegen im ausmaskierten, unsichtbaren Bereich. */ border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; /* backdrop-filter zeichnet alles weich, was hinter der Ebene liegt -- also das Hintergrundbild des Containers selbst. */ -webkit-backdrop-filter: blur(var(--bg-blur-strength)); backdrop-filter: blur(var(--bg-blur-strength)); /* Maske blendet die Blur-Ebene nach oben aus. Mehrere Stopps statt eines linearen Verlaufs, damit der Uebergang von scharf zu unscharf nicht als harte Kante wahrgenommen wird. */ --bg-blur-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 10%, rgba(0, 0, 0, 0.9) 90%, rgba(0, 0, 0, 1) 100%); -webkit-mask-image: var(--bg-blur-mask); mask-image: var(--bg-blur-mask); } /* Inhalte ueber der Blur-Ebene halten. Das Elementor-Overlay ist ausgenommen, damit es weiterhin direkt auf dem Bild liegt. */ .bg-img-blur > *:not(.elementor-background-overlay) { position: relative; z-index: 1; } /* ----------------------------------------------------------------- * 10.1 - HILFSKLASSE .bg-img-blur-x (seitlicher Verlauf) * Gleiches Prinzip wie .bg-img-blur, nur laeuft der Verlauf zur Seite * statt nach unten -- die Trennkante steht also senkrecht. * Typischer Fall: Text auf einer Haelfte des Hintergrundbildes. * * Anwendung (Elementor -> Erweitert -> CSS-Klassen): * bg-img-blur-x -> weich zur LINKEN Kante hin * bg-img-blur-x--rechts -> weich zur RECHTEN Kante hin * (die zweite Klasse zusaetzlich zur ersten setzen) * * Feinjustierung wie beim Original per CSS-Variablen am Element: * --bg-blur-strength : Staerke der Unschaerfe an der Kante * --bg-blur-start : ab welcher Breite der Verlauf beginnt * ----------------------------------------------------------------- */ .bg-img-blur-x { --bg-blur-strength: 26px; --bg-blur-start: 60%; position: relative; isolation: isolate; } .bg-img-blur-x::after { content: ""; position: absolute; top: 0; left: 0; bottom: 0; /* Verlauf startet bei --bg-blur-start und laeuft nach links aus. */ right: var(--bg-blur-start); z-index: 0; pointer-events: none; /* Nur die linken Ecken erben die Rundung -- die rechten liegen im ausmaskierten, unsichtbaren Bereich. Grund fuers Erben siehe Kommentar bei .bg-img-blur (Chrome beschneidet backdrop-filter nicht am border-radius des Elternelements). */ border-top-left-radius: inherit; border-bottom-left-radius: inherit; -webkit-backdrop-filter: blur(var(--bg-blur-strength)); backdrop-filter: blur(var(--bg-blur-strength)); --bg-blur-mask: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 10%, rgba(0, 0, 0, 0.9) 90%, rgba(0, 0, 0, 1) 100%); -webkit-mask-image: var(--bg-blur-mask); mask-image: var(--bg-blur-mask); } /* Spiegelverkehrt: Unschaerfe zur rechten Kante. */ .bg-img-blur-x.bg-img-blur-x--rechts::after { right: 0; left: var(--bg-blur-start); border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: inherit; border-bottom-right-radius: inherit; --bg-blur-mask: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 10%, rgba(0, 0, 0, 0.9) 90%, rgba(0, 0, 0, 1) 100%); } .bg-img-blur-x > *:not(.elementor-background-overlay) { position: relative; z-index: 1; } /* ================================================================= * 11.0 - PROJEKT-SLIDER (Spenden-Uebersichtsseite) * Der Slider ist ein Unlimited-Elements-Widget (ue_listing_carousel, * Owl-Carousel-basiert) -- NICHT das native Elementor Loop Carousel. * Die Sichtbarkeits-Umschaltung Slider/Grid steckt in * class-brksp-shortcode-filter-bar.php get_css() und haengt an der * Widget-Klasse "brksp-projekt-slider". * * Die Projektkarten selbst tragen (von WordPress' get_post_class()) die * Klasse .brksp_projekt -- damit lassen sie sich innerhalb des UE-Carousels * eindeutig treffen, ohne den Ehrenamt-Slider mitzunehmen. * ================================================================= */ /* Karten auf volle Slide-Hoehe ziehen, damit alle Karten einer Reihe gleich hoch sind. Owl gibt den Items sonst nur ihre Inhaltshoehe, wodurch unterschiedlich lange Texte zu unterschiedlich hohen Karten fuehren. Die Kette ist noetig, weil height:100% nur wirkt, wenn JEDER Wrapper darueber ebenfalls eine Hoehe hat: owl-stage (flex) -> owl-item -> ue-carousel-item -> .elementor -> .e-con Bewusst ueber ".ue-carousel-item > .elementor" statt ueber .brksp_projekt: so greift es fuer internes UND externes Loop-Item-Template gleichermassen, unabhaengig von den per get_post_class() erzeugten Klassen. */ .brksp-projekt-slider .owl-stage { display: flex; } .brksp-projekt-slider .owl-item, .brksp-projekt-slider .ue-carousel-item, .brksp-projekt-slider .ue-carousel-item > .elementor, .brksp-projekt-slider .ue-carousel-item > .elementor > .e-con { height: 100%; } /* Dieselbe Kette fuer die Breite -- ohne das bleibt die Karte schmaler als ihr Slide, sobald das Slide breiter wird als der Karteninhalt. Grund: Das Addon setzt .owl-item auf display:flex, .ue-carousel-item ist damit ein Flex-Item. Ohne flex-grow bekommt es seine Inhaltsbreite, nicht die volle. Gemessen auf der Uebersichtsseite: bei einer Karte pro Ansicht blieb sie ab ca. 500px Fensterbreite bei 493px stehen, waehrend das Slide auf 624px mitwuchs. Bei zwei oder drei Karten faellt es nicht auf, weil der Platz dort ohnehin schmaler ist als der Inhalt. min-width:0 hebt das flex-typische min-width:auto auf, damit die Karte auf sehr schmalen Screens weiterhin schrumpfen darf statt ueberzulaufen. */ .brksp-projekt-slider .ue-carousel-item { flex: 1 1 auto; min-width: 0; } /* Luft unterhalb der Karten: Owl schneidet die Buehne per overflow ab, sonst wird der Karten-Schatten an der Unterkante gekappt. * * Weicher Auslauf rechts: Das angeschnittene Item am rechten Rand (kommt aus * der Widget-Option "Stage Padding") soll nicht hart abgeschnitten wirken, * sondern ausblenden. Umgesetzt per mask-image -- ein Farbverlauf-Overlay * (::after mit background) scheidet aus, weil es die Hintergrundfarbe der * Sektion kennen muesste und ueber Bildern/Verlaeufen sichtbar bliebe. Die * Maske dagegen macht die Pixel wirklich transparent, egal was dahinter liegt. * * --brk-fade steuert die Breite des Auslaufs. Faustregel: etwa so breit wie * der Stage-Padding-Wert im Widget plus ~20px, damit der Verlauf ueber dem * angeschnittenen Item liegt und nicht schon in die letzte volle Karte laeuft. * Der Wert laesst sich pro Slider ueberschreiben (auch in einer Media-Query, * falls Stage Padding auf Tablet/Mobil kleiner steht). * * Nur rechts maskiert: links steht der Slider im Grid-Raster der Seite, dort * ist die Kante gewollt. Fuer beidseitigen Auslauf zusaetzlich * transparent 0, #000 var(--brk-fade), * an den Anfang des Verlaufs setzen. * * Nur Desktop: ab Tablet abwaerts wird die Maske wieder abgeschaltet * (Abschnitt 6.2.3). Dort ist pro Ansicht kaum mehr als eine Karte zu sehen, * ein 90px breiter Auslauf wuerde also in die aktive Karte laufen statt in * ein angeschnittenes Nachbar-Item. */ .brksp-projekt-slider .owl-stage-outer { padding-bottom: 8px; --brk-fade: 90px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--brk-fade)), transparent 100%); mask-image: linear-gradient(to right, #000 calc(100% - var(--brk-fade)), transparent 100%); } /* Unter 980px ohne Auslauf. Der Grenzwert richtet sich nicht nach den * Theme-Breakpoints, sondern danach, ab wann das Widget mehr als eine Karte * pro Ansicht zeigt: erst dann gibt es ueberhaupt ein angeschnittenes * Nachbar-Item, ueber dem der Auslauf liegen kann. Darunter wuerde er in * die aktive Karte laufen. Wird die Anzahl sichtbarer Karten im Widget * geaendert, gehoert dieser Wert mitgezogen. * * Die Regel steht bewusst hier und nicht bei den uebrigen mobilen * Slider-Anpassungen in Abschnitt 6.2.3: Selektor und damit Spezifitaet * sind identisch zur Regel darueber, und eine Media-Query erhoeht die * Spezifitaet nicht. Aus Abschnitt 6 heraus -- also weiter oben in der * Datei -- wuerde sie von der Maske ueberschrieben. Alternative waere * !important; die Reihenfolge ist die ehrlichere Loesung. */ @media screen and (max-width: 979px) { .brksp-projekt-slider .owl-stage-outer { -webkit-mask-image: none; mask-image: none; } } /* ----------------------------------------------------------------- * 11.1 - PUNKTE-NAVIGATION AUS * * Sauberer waere die Widget-Option "Show Dots" = No (dann entsteht das * Markup erst gar nicht und Owl spart sich die Dot-Berechnung) -- diese * Regel deckt den Fall ab, dass die Option an bleibt, und schadet nicht, * wenn sie aus ist. * * Hier stand bis 04.08.2026 zusaetzlich ein Block, der die Pfeile aus dem * absolut positionierten Zustand geholt und als Leiste unten rechts gesetzt * hat (Optik wie beim Ehrenamt-Slider). Wieder entfernt -- die Pfeile sollen * seitlich neben den Karten stehen. Damit gelten wieder die Addon-eigenen * Werte, einstellbar im Widget unter Style -> Navigation ("Nav Arrow * Position" = top, "Nav Arrow Spacing" = Abstand von links, Groesse, Radius * und Farben). Kein CSS noetig; das Addon setzt diese Regeln ueber die * Widget-ID (#uc_xxx) und schlaegt damit ohnehin jeden Selektor von hier. * * Das gilt nur noch fuer Desktop: ab Tablet abwaerts stehen die Pfeile als * Leiste unterhalb des Sliders -- siehe Abschnitt 6.2.3. */ .brksp-projekt-slider .owl-carousel .owl-dots { display: none; } /* ================================================================= * 12.0 - HILFSKLASSE .brk-btn-blau * Blauer Verlauf-Button, Optik der Filter-Bar (Ort / Themenbereich / * Sortierung) fuer beliebige Elementor-Buttons. * * Im Widget unter Erweitert -> CSS-Klassen "brk-btn-blau" eintragen. * Die Klasse landet dort am Widget-Wrapper, nicht am Button selbst -- * deshalb greifen beide Selektoren unten (Wrapper UND Element), damit * es auch funktioniert, wenn die Klasse mal direkt am Link sitzt. * * Quelle der Werte: class-brksp-shortcode-filter-bar.php -> get_css(), * Regel .brksp-filter-bar .brksp-dropdown__toggle. Bei Aenderungen dort * bitte hier mitziehen. Der Verlauf laeuft bewusst ueber dieselbe * Kit-Variable inkl. Fallback, damit eine zentrale Anpassung beide * Stellen erreicht. * * Bewusst NICHT gesetzt: Hoehe, Innenabstand und Schriftgroesse. Die * bleiben in Elementor einstellbar, damit ein Hero-Button groesser sein * kann als die 48px der Filterleiste. Statt der dortigen 36px steht der * Eckenradius auf 999px -- bei den Filter-Buttons sieht das identisch * aus (36px werden bei 48px Hoehe ohnehin zur vollen Pille gerundet), * bleibt aber auch bei einem hoeheren Button eine Pille. * * !important ist noetig, weil Elementor die Button-Farben je Widget als * ID-Selektor ins Post-CSS schreibt und damit jede Klassenregel schlaegt * -- dasselbe Problem ist im Filter-Bar-CSS dokumentiert. * ================================================================= */ .brk-btn-blau .elementor-button, .elementor-button.brk-btn-blau { background: var(--Verlauf-hellblau-dunkelblau, linear-gradient(192deg, #002D55 30.68%, #00315D 59.77%, #0063BB 91.34%)) !important; border: none !important; border-radius: 999px !important; box-shadow: rgba(18, 25, 97, 0.08) 0 1px 4px 0; color: #fff !important; font-weight: 700; transition: box-shadow 0.2s, transform 0.3s; } /* Elementor faerbt Text und Icon teils ueber eigene Regeln -- hier nachziehen, sonst bleibt z. B. ein SVG-Pfeil in der Kit-Farbe. */ .brk-btn-blau .elementor-button .elementor-button-text, .brk-btn-blau .elementor-button .elementor-button-icon, .brk-btn-blau .elementor-button .elementor-button-icon svg, .elementor-button.brk-btn-blau .elementor-button-text, .elementor-button.brk-btn-blau .elementor-button-icon svg { color: #fff !important; fill: currentColor; } .brk-btn-blau .elementor-button:hover, .brk-btn-blau .elementor-button:focus, .brk-btn-blau .elementor-button:active, .elementor-button.brk-btn-blau:hover, .elementor-button.brk-btn-blau:focus, .elementor-button.brk-btn-blau:active { background: var(--Verlauf-hellblau-dunkelblau, linear-gradient(192deg, #002D55 30.68%, #00315D 59.77%, #0063BB 91.34%)) !important; border: none !important; border-radius: 999px !important; box-shadow: 0 0 0 3px rgba(0, 99, 187, 0.4) !important; color: #fff !important; } /* ================================================================= * 13.0 - GRAVITY FORMS: SUBMIT-BUTTON (ALLE FORMULARE) * Einheitlicher CTA-Look fuer den Absenden-Button in jedem GF-Formular * (Spenden, Foerdermitgliedschaft, Kontakt) -- Optik des Elementor- * Standardbuttons, siehe 5.0 .brksp-projekt-abgeschlossen__link fuer * denselben Referenzwert (#e60005, Pille, Scale-Hover). * * Der Ehrenamt-Finder (.brkea-finder-form) hat in brkea-finder.css eine * eigene, hoeher spezifische !important-Regel und bleibt davon unberuehrt. * * !important noetig, weil Gravity Forms die Buttons ueber das eigene * "gform-theme-button"-Framework nachtraeglich stylt. * ================================================================= */ .gform_wrapper .gform_button { padding: 16px 20px !important; background: #e60005 !important; border: none !important; border-radius: 50px !important; color: #fff !important; font-weight: 700 !important; transition: transform .3s; } .gform_wrapper .gform_button:hover, .gform_wrapper .gform_button:focus { background: #e60005 !important; color: #fff !important; transform: scale(1.1); } /* Lade-Spinner beim Absenden (.gform-loader): GF (Orbital-Theme, scripts- theme.min.js) fuegt ihn als KIND-Element in den Button ein () und setzt ihn per "Framework"-Theme-CSS auf position:absolute + inset:0 + margin:auto -- das zentriert ihn zwar aus dem Textfluss genommen, aber ueber der Buttonmitte statt daneben. position:relative haette den Spinner stattdessen wieder in den Textfluss gebracht und den Button beim Erscheinen breiter werden lassen. Stattdessen bleibt er absolut positioniert (kein Platzbedarf im Button), wird aber ueber left:100%/margin-left rechts NEBEN den Button geschoben. Der Button braucht dafuer selbst einen Positionierungskontext (position:relative). Farben (border-*-color) faerben den Spinner BRK-rot statt Schwarz/Weiss -- gleiches Prinzip wie beim Ehrenamt-Finder-Spinner in brkea-finder.css. !important, weil GF's eigene Regeln dieselbe Spezifitaet mit Praesenz ueberschreiben muessen. Betrifft jedes GF-Formular mit diesem Theme. ACHTUNG: GF dreht den Spinner selbst per Animation ueber die Eigenschaft "transform" (rotate). Eigene !important-Regeln auf "transform" stehen in der CSS-Kaskade ueber Animationen und wuerden die Rotation jeden Frame ueberschreiben -- die Vertikal-Zentrierung laeuft deshalb bewusst ueber einen negativen margin-block-start statt ueber transform:translateY(). */ .gform_wrapper .gform_button { position: relative !important; } .gform_wrapper .gform-loader { position: absolute !important; inset: auto !important; top: 50% !important; left: 100% !important; margin: -14px 0 0 12px !important; border-block-end-color: #e60005 !important; border-inline-start-color: #e60005 !important; border-block-start-color: rgba(230, 0, 5, .18) !important; border-inline-end-color: rgba(230, 0, 5, .18) !important; }