/* Theme Name: Shuttle Pro Child Template: shuttle-pro Text Domain: shuttle-pro-child Version: 1.0.0 Description: Child-Theme von Shuttle Pro fuer update-sichere Layout-, CSS- und Template-Anpassungen der Queller Gemeinschaft. Pflege: MJG. Author: Mario J. Gaida (MJG) License: GNU General Public License v2 or later */ /* MJG: Eigene CSS-Anpassungen ab hier einfuegen. Diese Datei wird NACH der Parent-CSS geladen (siehe functions.php), daher gewinnen gleich spezifische Regeln, die hier stehen. */ /* ========================================================================= MJG 2026-08-19: Startseiten-Kaesten (#section-home) vereinheitlichen. Problem: Die 4 Boxen (article.one_fourth) stehen per float nebeneinander; Floats erzeugen ungleiche Hoehen, und die blauen "Weiterlesen"-Buttons sitzen dadurch auf unterschiedlicher Hoehe. Loesung: Container auf Flexbox (align-items:stretch => alle Boxen gleich hoch); Boxinhalt als Flex-Spalte; Button per margin-top:auto ans Boxende schieben. Breiten/Abstaende (23.05% + Theme-Margins) bleiben erhalten; wrap sorgt fuer die responsive Stapelung auf Mobilgeraeten. ========================================================================= */ /* Container als Flex-Zeile; alle Boxen werden gleich hoch. */ #section-home #section-home-inner { display: flex; flex-wrap: wrap; align-items: stretch; } /* Das Float-Clear-Div wird in der Flexbox nicht mehr gebraucht. */ #section-home #section-home-inner > .clearboth { display: none; } /* Float aufheben; die Box selbst als Flexcontainer, damit ihr Innenteil die volle Boxhoehe erhaelt. */ #section-home .one_fourth { float: none; display: flex; } /* Innenteil (Bild + Textblock) fuellt Breite und Hoehe der Box, vertikal gestapelt. */ #section-home .services-builder { flex: 1 1 auto; display: flex; flex-direction: column; } /* Der Textbereich dehnt sich, damit der darunter liegende Button nach unten wandert. */ #section-home .iconmain { display: flex; flex-direction: column; flex: 1 1 auto; } /* Blauen Button buendig ans Boxende setzen (ueberschreibt das Theme-margin-top:-15px). */ #section-home .iconmain .iconurl { margin-top: auto; margin-bottom: 0; } /* ========================================================================= MJG 2026-08-24: Startseite (Seite 18) — einheitliche Link-Buttons. Nachbau des blauen Box-Button-Stils (Vorbild: .services-builder.style1 .iconurl a im Parent-Theme, Hintergrund #13aff0), damit reine Text-Links ("Veranstaltung uebermitteln", "Naehere Infos gibts hier.", "Kalender anzeigen", Reisen-Info, Brief-Link) ueberall gleich als Button erscheinen. Der grosse WPBakery-CTA "Mitglied werden" (#5472D2) bleibt bewusst unveraendert. ========================================================================= */ /* Basis-Button: Klasse .qg-btn (wird im Seiteninhalt an die gesetzt) PLUS der vom Events-Calendar gerenderte "Kalender anzeigen"-Link (view-more). !important, weil die Tribe-common-Klassen (anchor-thin) eigene Farb-/ Unterstreichungs-Regeln mitbringen. */ .qg-btn, .qg-home-cols .tribe-events-widget-events-list__view-more-link { display: inline-block; color: #fff !important; background: #13aff0 !important; padding: 8px 15px !important; border-radius: 4px; text-decoration: none !important; line-height: 1.4; border: 0; transition: box-shadow .2s ease; } .qg-btn:hover, .qg-btn:focus, .qg-home-cols .tribe-events-widget-events-list__view-more-link:hover, .qg-home-cols .tribe-events-widget-events-list__view-more-link:focus { color: #fff !important; /* dezenter Abdunkel-Effekt wie beim Box-Button im Parent-Theme */ box-shadow: inset 0 0 0 30px rgba(0,0,0,0.10); } /* Etwas Luft ueber dem "Kalender anzeigen"-Button in der Termine-Spalte. */ .qg-home-cols .tribe-events-widget-events-list__view-more { margin-top: 12px; } /* ========================================================================= MJG 2026-08-24: Einheitliche Spalten-Ueberschriften im 4-Spalten-Bereich. Greift die

aus den Textspalten UND den Widget-Titel .widgettitle (Spalte "Aktuelles") ab, damit alle 4 Ueberschriften identisch aussehen: gleiche Groesse/Gewicht, linksbuendig, mit blauem Akzent-Unterstrich. Die Spaltenzeile erhaelt via WPBakery el_class="qg-home-cols" ihre Klasse. ========================================================================= */ .qg-home-cols h2, .qg-home-cols .widgettitle { font-size: 20px; font-weight: 700; text-align: left; margin: 0 0 15px; padding-bottom: 8px; border-bottom: 2px solid #13aff0; color: #333; text-transform: none; } /* ========================================================================= MJG 2026-08-24: "Reisen mit Uwe Jauer" als eigene Box UNTER den 4 Spalten (Zeile mit el_class="qg-reisen-box"). Zentrierte, dezent abgesetzte Box. ========================================================================= */ .qg-reisen-box { margin: 10px 0 0; padding: 22px 20px; border: 1px solid #e6e6e6; border-radius: 6px; background: #fafafa; text-align: center; } .qg-reisen-box h2 { font-size: 20px; font-weight: 700; margin: 0 0 15px; color: #333; } .qg-reisen-box .vc_single_image-wrapper { margin-bottom: 15px; } /* ========================================================================= MJG 2026-08-24: Spenden-Button (PayPal) moderner gestalten. Ersetzt das alte, pixelige btn_donate_LG.gif durch einen sauberen Pill-Button im PayPal-Look (Gold #ffc439 auf PayPal-Blau #003087) mit Herz-Icon. Das
/POST an paypal.com/donate mit hosted_button_id bleibt erhalten (siehe Seiteninhalt), die Spende funktioniert unveraendert. ========================================================================= */ .qg-paypal-form { text-align: center; margin: 6px 0 0; } .qg-paypal-btn { display: inline-flex; align-items: center; gap: 10px; background: #ffc439; color: #003087; font-size: 17px; font-weight: 700; line-height: 1; /* MJG: Theme-Grossschreibung aufheben, damit die Marke "PayPal" korrekt steht. */ text-transform: none; border: 0; padding: 13px 30px; border-radius: 40px; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.15); transition: background .2s ease, box-shadow .2s ease, transform .05s ease; } .qg-paypal-btn:hover { background: #f5bb2e; box-shadow: 0 5px 14px rgba(0,0,0,0.22); } .qg-paypal-btn:focus { outline: 3px solid rgba(0,48,135,0.35); outline-offset: 2px; } .qg-paypal-btn:active { transform: translateY(1px); } .qg-paypal-btn svg { width: 20px; height: 20px; flex: 0 0 auto; } /* ========================================================================= MJG 2026-08-24: Blaue "Box" um den Seitentitel im #intro-Banner entfernen. Das Parent-Theme legt hinter den Titel- eine halbtransparente weisse Flaeche (#intro .page-title > span { background: rgba(255,255,255,0.05) }), die im blauen Banner als hellblauer Kasten erscheint — aber nur auf Seiten, deren Titel in ein gewrappt ist (Events-/Archiv-Seiten haben keins, daher "bei einigen, nicht bei allen"). Wir machen den Hintergrund transparent; das Padding bleibt fuer gleichmaessige Abstaende erhalten. */ #intro .page-title > span { background: transparent; } /* ========================================================================= MJG 2026-08-26: Einheitliche Link-Optik in den 4 Startseiten-Spalten. Ausgangslage waren drei verschiedene Hover-Stile: - Termine (Tribe-Event-Titel): schwarz+bold, Hover = Unterstrich (kommt aus der "tribe-common"-CSS von The Events Calendar). - Aktuelles (widget_recent_entries): dunkel, Hover = blau (kommt aus der Theme-Widget-CSS). - Normale Links (z. B. "Baustellen in Quelle"): blau, Hover = schwarz (Theme-Basis: a{color:#13aff0} / a:hover{color:inherit}). Ziel/Entscheidung: alle Links durchgehend im Marken-Blau #13aff0, beim Hover nur ein Unterstrich (Farbe bleibt konstant). Deckt sich mit der Button-Farbe (.qg-btn) und der Theme-Basis-Linkfarbe. Nur auf die Spaltenzeile .qg-home-cols begrenzt -> Rest der Seite bleibt unangetastet. Die als Buttons gestylten Links (.qg-btn und der Tribe- "Kalender anzeigen"-View-More-Link) sind ausgenommen bzw. durch ihr eigenes !important geschuetzt und bleiben Buttons. ========================================================================= */ /* Normale Textlinks + "Aktuelles"-Widgetliste: konstant blau, Hover = Unterstrich. :not(.qg-btn) haelt die buttonisierten Links heraus; die hoehere Spezifitaet dieses Selektors gewinnt zudem sauber gegen die Theme-Widget-Regel. */ .qg-home-cols a:not(.qg-btn) { color: #13aff0; } .qg-home-cols a:not(.qg-btn):hover, .qg-home-cols a:not(.qg-btn):focus { color: #13aff0; text-decoration: underline; } /* Tribe-Event-Titel ("Termine"): bringen eigene Farb-/Unterstreichungs-Regeln (tribe-common-anchor-thin) mit -> hier ist !important noetig. Bold bleibt erhalten (die Titel sind h3.tribe-common-h7 -> Ueberschrift). */ .qg-home-cols .tribe-events-widget-events-list__event-title-link { color: #13aff0 !important; /* MJG 2026-08-26: gleiche Schriftgroesse UND Gewicht wie die "Aktuelles"- Meldungen (16px statt Tribes 18px, Gewicht 300 statt bold 700) — die Titel sollen sich optisch nicht mehr von den Aktuelles-Zeilen abheben. */ font-size: 16px !important; font-weight: 300 !important; } .qg-home-cols .tribe-events-widget-events-list__event-title-link:hover, .qg-home-cols .tribe-events-widget-events-list__event-title-link:focus { color: #13aff0 !important; text-decoration: underline !important; } /* ========================================================================= MJG 2026-08-26: Schriftart der Tribe-Elemente an den uebrigen Spalten- Inhalt angleichen. Messung (computed styles) ergab: "Aktuelles"-Meldungen und die .qg-btn- Buttons rendern in Arial (16px/300), waehrend The-Events-Calendar seine Elemente (Event-Titel + "Kalender anzeigen"-Link) in seinem eigenen Helvetica-Neue-Stack rendert. Tribe zieht die Schrift aus der CSS-Variable --tec-font-family-sans-serif; wir ueberschreiben sie NUR im Spaltenbereich mit einem konkreten Arial-Wert (der inherit-Trick ist bei Custom- Properties unzuverlaessig). Dadurch erben Event-Titel, Datumsangaben und der "Kalender anzeigen"-Button dieselbe Schrift wie der restliche Inhalt. ========================================================================= */ .qg-home-cols .tribe-common { --tec-font-family-base: Arial, sans-serif; --tec-font-family-sans-serif: Arial, sans-serif; } /* MJG 2026-08-26: Gleiche Strichstaerke wie der Rest der Seite. The Events Calendar setzt auf .tribe-common "-webkit-font-smoothing: antialiased" (und auf den Titeln "text-rendering:optimizeLegibility"). Auf dem Mac rendert Text damit DUENNER als der uebrige Seiteninhalt, der das Standard-"auto" (Subpixel-Glaettung) nutzt — obwohl das Font-Gewicht identisch (300) ist. Wir setzen Container UND alle Kinder zurueck auf auto, damit Event-Titel & "Kalender anzeigen" exakt so kraeftig wirken wie die "Aktuelles"-Links. (Betrifft v. a. macOS/WebKit-Rendering.) */ .qg-home-cols .tribe-common, .qg-home-cols .tribe-common * { -webkit-font-smoothing: auto !important; -moz-osx-font-smoothing: auto !important; text-rendering: auto !important; } /* "Kalender anzeigen" zusaetzlich in Groesse/Gewicht an die anderen Buttons (.qg-btn = 16px/300) angleichen. Tribe rendert den View-More-Link mit 14px/400 -> daher hier explizit ueberschreiben (!important gegen die tribe-common-Regeln). Die Schriftfamilie kommt bereits ueber die Variable oben, Box-Stil/Farbe aus dem gemeinsamen .qg-btn-Block weiter oben. */ .qg-home-cols .tribe-events-widget-events-list__view-more-link { font-size: 16px !important; font-weight: 300 !important; } /* ========================================================================= MJG 2026-08-26: Fusszeile (#sub-footer) vereinheitlichen (gilt seitenweit). 1) Schriftgroesse von 14px auf 16px anheben, damit die Angaben so gross sind wie der normale Seitentext (Body = 16px). 2) Footer-Links wie ueberall sonst: Marken-Blau #13aff0 (bleibt), beim Hover Unterstrich statt des bisherigen Grau-Umschlags (#999). Parent-Regeln: "#sub-footer, #sub-footer a { font-size:14px }" und "#sub-footer a:hover { color:#999 }" — hier gleich spezifisch ueber- schrieben (Child laedt spaeter -> gewinnt bei gleicher Spezifitaet). */ #sub-footer, #sub-footer a { font-size: 16px; } #sub-footer a:hover, #sub-footer a:focus { color: #13aff0; text-decoration: underline; } /* ========================================================================= MJG 2026-08-26: Einheitliche Body-/Fliesstext-Schrift = Arial (seitenweit). Ausgangslage (per DevTools-Messung belegt): das Theme nutzt eigentlich Montserrat (Ueberschriften + oberes Menue) + Source Sans Pro (Body/Footer), ABER die Theme-Option "shuttle_font_bodystandard" ist auf 'arial' gesetzt und biegt NUR den Inhaltsbereich (#content) auf Arial um -> Inhalt, Footer und Menue liefen in drei verschiedenen Schriften. Entscheidung: durchgehend Arial fuer allen Fliesstext. Da die Theme-Option in der DB liegt (wird per Git NICHT deployt), loesen wir es per CSS -> auf lokal und qg-test identisch. Wir ueberschreiben die Theme-Regel (style.css Z.174: "body, input, select, textarea { font-family: Source Sans Pro }") mit gleicher Spezifitaet; das Child laedt spaeter und gewinnt. Der Footer erbt die Body-Schrift, wird also automatisch Arial. NICHT betroffen: Ueberschriften (h1-h6) und das Menue -> die haben eigene, spezifischere Montserrat-Regeln und bleiben bewusst Montserrat. ========================================================================= */ body, button, input, select, textarea { font-family: Arial, sans-serif; } /* ========================================================================= MJG 2026-08-26: Oberes Menue ebenfalls in Arial (statt Montserrat). Das Menue erbt seine Schrift von "#site-header { font-family: Montserrat, Helvetica, Arial }" (Parent style.css ~Z.800). Wir setzen die Schrift direkt auf die Menue-Links (Haupt- + Sticky-Header, inkl. Sub-Menue) auf Arial; Groesse (13px) und Gewicht (600) bleiben unveraendert (kommen aus der Parent-Regel #header .header-links > ul > li a). Nur die Menue-Links ueberschreiben, nicht der ganze Header (Logo/uebrige Kopf-Elemente bleiben unberuehrt). Spezifitaet (1,1,1) schlaegt die geerbte #site-header-Regel. */ #header .header-links a, #header-sticky .header-links a { font-family: Arial, sans-serif; } /* MJG 2026-08-26: Menue-Schriftgroesse an den Body (16px) angleichen (vorher 13px). Die 13px kommen aus dem DYNAMISCHEN Inline-CSS der Theme- Optionen (Typografie), das NACH diesem Stylesheet geladen wird — bei gleicher Spezifitaet gewinnt es also. Deshalb hier !important. Abgedeckt: Haupt-, Sticky- und Responsive-/Mobil-Menue (Top-Level-Links) SOWIE die Dropdown-Sub-Menues. Die Schriftfamilie (Arial) kommt fuer alle Menue-Links bereits aus der .header-links-Regel oben. */ #header #header-core .menu > li > a, #header-responsive li a, #header-sticky #header-sticky-core .menu > li > a, #header-sticky-responsive li a, #header #header-core .sub-menu a, #header-sticky #header-sticky-core .sub-menu a { font-size: 16px !important; } /* ========================================================================= MJG 2026-08-26: Seitenweite Vereinheitlichung (Ergebnis Seiten-Audit). Bringt die Unterseiten auf den Startseiten-Standard. Drei Teile: (A) Content-Links ueberall blau + Hover-Unterstrich, (B) Event-/Tribe-Inhalte in Arial (statt Helvetica Neue) + normales Font-Smoothing, (C) Einzelseite "Pan Groove" mit 20px-Fliesstext auf 16px. ========================================================================= */ /* (A) Content-Links seitenweit: Marken-Blau #13aff0 + Hover = Unterstrich. Gilt fuer ALLE Links im Inhaltsbereich #content — also auch die bisher grauen Archiv-/Blog-Titel-Links (z. B. h2.blog-title a) und die dunklen Tribe-Event-Links. Ausgenommen sind als Buttons gestylte Links (.qg-btn, alle Klassen mit "btn"/"button", .themebutton) — die behalten ihre Optik (und ihr eigenes !important schuetzt sie zusaetzlich). Menue (#header) und Footer (#sub-footer) liegen ausserhalb #content und sind daher nicht betroffen (Footer hat bereits seine eigene Regel). */ #content a:not(.qg-btn):not([class*="btn"]):not([class*="button"]):not(.themebutton) { color: #13aff0; } #content a:not(.qg-btn):not([class*="btn"]):not([class*="button"]):not(.themebutton):hover, #content a:not(.qg-btn):not([class*="btn"]):not([class*="button"]):not(.themebutton):focus { color: #13aff0; text-decoration: underline; } /* (B) Event-/Tribe-Inhalte (The Events Calendar) seitenweit in Arial. Wie auf der Startseite fuer das Termine-Widget: Tribe rendert seine Texte in Helvetica Neue (via CSS-Variable) + "-webkit-font-smoothing:antialiased" (laesst Text auf dem Mac duenner wirken). Wir setzen die Schrift auf Arial und das Smoothing/Rendering auf auto. Gilt fuer Veranstaltungsuebersicht, Einzel-Event-Seiten und ueberall eingebettete Termine-Widgets. Schriftgroessen belassen wir bei Tribes Skala (blanke 16px wuerde das Tribe-Layout sprengen). */ /* Tribe definiert die Schrift-Variablen auf :root, und die EINZEL-Event-Seiten liegen in #tribe-events-content (nicht .tribe-common). Wir setzen die Variablen daher auf #content (gemeinsamer Vorfahr aller Event-Inhalte: Uebersicht, Einzel-Event, Widget) — plus .tribe-common/.tribe-events zur Sicherheit. Nur Tribe liest diese --tec-Variablen, andere Elemente bleiben unberuehrt. */ #content, .tribe-common, .tribe-events { --tec-font-family-base: Arial, sans-serif; --tec-font-family-sans-serif: Arial, sans-serif; } /* Font-Smoothing/Rendering fuer alle Tribe-Container (v2 .tribe-common, v1 .tribe-events und der Einzel-Event-Wrapper #tribe-events-content). */ .tribe-common, .tribe-common *, .tribe-events, .tribe-events *, #tribe-events-content, #tribe-events-content * { -webkit-font-smoothing: auto !important; -moz-osx-font-smoothing: auto !important; text-rendering: auto !important; } /* (C) Einzelseite "Pan Groove Steel Orchestra": ein Absatz war auf die Gutenberg-Preset-Groesse "Medium" (.has-medium-font-size = 20px, mit !important) gesetzt. Nur auf DIESER Seite auf 16px normalisieren (!important, um das Preset-!important zu schlagen). */ body.page-id-2722 #content .has-medium-font-size, body.page-id-2722 #content p { font-size: 16px !important; }