/* Theme Name: My Listing Child Theme URI: http://mylisting.27collective.net/my-city/ Description: MyListing Child Theme Author: 27collective Author URI: https://27collective.net/ Template: my-listing Version: 1.1 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: one-column, two-columns, three-columns, left-sidebar, right-sidebar, grid-layout, custom-menu, custom-logo, featured-images, footer-widgets, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready Text Domain: my-listing-child */ /* ============================================================ THB-ANPASSUNG #001 — Button-Farben (08.07.2026, thb_programmierer) Grund: MyListing-Button-Optionen wirken global auf alle .button-2; hier gezielt NUR die 2 Buttons (Header "Eintrag anlegen" + Hero-Suche). Werte: Text #707C68, Hintergrund #C5D9B6. Register/Doku: DOKU/thb-anpassungen-register.md ============================================================ */ .header-button a.button-2, .header-button a.button-2:hover, .header-button a.button-2:focus, .header-button a.button-2 i, button.button-2.search, button.button-2.search:hover, button.button-2.search:focus, button.button-2.search i { color: #707C68 !important; } .header-button a.button-2, .header-button a.button-2:hover, .header-button a.button-2:focus, button.button-2.search, button.button-2.search:hover, button.button-2.search:focus { background-color: #C5D9B6 !important; } /* ============================================================ THB-ANPASSUNG #002 — Karussell-Punkte (Pagination-Dots) optisch 25% kleiner (08.07.2026, thb_programmierer). Betrifft die Dots unter den Listing-Feed-Karussells (z.B. "Tiny House Verein finden"). Trick: nur der SICHTBARE Punkt (span) wird skaliert -> das anklickbare .owl-dot behaelt seine 12x12-Box, die Klick-/Trefferflaeche bleibt gleich. Register/Doku: DOKU/thb-anpassungen-register.md ============================================================ */ .listing-feed-carousel.c27-owl-nav .owl-dots span { transform: scale(0.75); } /* ============================================================ THB-ANPASSUNG #003 — Vereine-Karussell: Pagination-Punkte (Dots) AUSBLENDEN (08.07.2026, thb_programmierer). EDDY will stattdessen 2 Buttons drunter (Weg zur Vereinsseite); die Dots sahen darunter komisch aus + waren in Elementor nicht deaktivierbar. Scope: erkennt das Vereine-Karussell am Inhalt (:has(.type-vereine)) statt an einer seiten-spezifischen Elementor-ID -> greift auf Staging-Home UND Live (startseite-2607), andere Karussell-Navigationen bleiben unberuehrt. Register/Doku: DOKU/thb-anpassungen-register.md ============================================================ */ .listing-feed-carousel:has(.type-vereine) .owl-dots { display: none !important; } /* ========================================================================== THB-ANPASSUNG #004: Kopfbereich lesbar halten, Verlauf unten und rechts (Snippet S-20) Referenz-Fassung: PROJEKTE/_ALLGEMEIN/SNIPPETS/S-20-header-verlauf.css Aenderungen dort zuerst. Dies ist die Kopie, nicht hier bearbeiten. ========================================================================== */ @media (min-width: 768px) { /* Der Verlauf braucht einen Bezugsrahmen. Das Theme setzt ihn meist schon — hier zur Sicherheit, falls eine Plattform davon abweicht. */ body.single-listing .profile-cover-image { position: relative; } /* ---- unten: Titel und Slogan ---- */ body.single-listing .profile-cover-image::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: linear-gradient(to top, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)); z-index: 2; pointer-events: none; } /* ---- rechts: der Termin ---- Schmaler und schwaecher als unten: Dort steht eine Ueberschrift, hier nur eine Zeile. Die beiden Verlaeufe ueberlagern sich in der unteren rechten Ecke — deshalb bleibt dieser bei .45 statt .6, sonst wird die Ecke zu dunkel. */ body.single-listing .profile-cover-image::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 38%; background: linear-gradient(to left, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0)); z-index: 2; pointer-events: none; } /* ---- der Inhalt gehoert ueber die Verlaeufe ---- 🛑 HIER STEHT KEIN `position` — und das ist der ganze Punkt. Bis zum 19.08.2026 stand hier `position: relative` auf fuenf Selektoren. Das Theme positioniert `.listing-main-info` aber ABSOLUT an den unteren Bildrand. Ein eigenes `relative` hebt das auf: Der gesamte Kopfinhalt — Titel, Termin, Preis, Schaltflaeche — faellt an den Anfang des Covers und landet oben IM MENUE. Fuenf Tage lang unbemerkt, weil nach jeder Aenderung nur die gerade angefasste Stelle geprueft wurde und nie die Seite als Ganzes. `z-index` genuegt: Ein absolut positioniertes Element ist bereits positioniert, der z-index wirkt also. Und die Kinder (Titel, Termin, Preis, Schaltflaeche) steigen mit ihrem Elternteil mit — sie brauchen weder eigenen z-index noch eigene Positionierung. ⚠️ Wer hier je wieder `position` ergaenzen will: erst messen, ob das Zielelement schon positioniert ist (`getComputedStyle(el).position`). Ein `relative` auf ein `absolute` ist kein Zusatz, sondern ein Rueckbau. */ body.single-listing .profile-cover-image .listing-main-info { z-index: 3; } } /* ============================================================ THB-ANPASSUNG #005 — Detailseite: Quick-Action-Buttons eckiger (08.07.2026, thb_programmierer). Die Quick Actions (z.B. "Website", "E-Mail senden", "teilen") hatten eine starke Pillen-Rundung (border-radius 50px) -> auf 5px angeglichen, wie die anderen Buttons. Register/Doku: DOKU/thb-anpassungen-register.md ============================================================ */ .quick-listing-actions > ul > li > a { border-radius: 5px !important; } /* ============================================================ THB-ANPASSUNG #006 — Detailseite: oberer "Website"-CTA-Button an Startseiten-Header-Button angleichen (08.07.2026, thb_programmierer). Der CTA-Button (.lmb-calltoaction) hat schon Flaeche #C5D9B6 (var --accent) + radius 5px; angepasst: Textfarbe weiss -> #707C68, Schriftgroesse 14->13px (wie Header-Button), Hoehe 48px -> 44px (war zu hoch). Register/Doku: DOKU/thb-anpassungen-register.md ============================================================ */ .lmb-calltoaction > a { background: #C5D9B6 !important; color: #707C68 !important; font-size: 13px !important; height: 44px !important; } .lmb-calltoaction > a:hover, .lmb-calltoaction > a:focus, .lmb-calltoaction > a > i, .lmb-calltoaction > a > span { color: #707C68 !important; } /* ============================================================ THB-ANPASSUNG #014 - Vorschaukarten-Hoehe mobil (15.07.2026, migriert aus Theme-Options) Feste Kartenhoehe auf Handy/Tablet (<=1200px). Zuvor in options_custom_css. ============================================================ */ @media(max-width: 1200px){ .lf-item, .lf-small-height .lf-item { height: 330px !important; } } /* ============================================================ THB-ANPASSUNG #016 — Vereins-Detailseite: lange Schwerpunkt-/Zielgruppen- Begriffe sauber umbrechen (2-zeilig) statt mit "…" abschneiden. (16.07.2026) ============================================================ */ #c27-single-listing .block-type-terms .listing-details > ul > li { white-space: normal; overflow: visible; } #c27-single-listing .block-type-terms .listing-details .category-name { white-space: normal; overflow: visible; text-overflow: clip; font-size: 13px; } /* ================================================================== THB-ANPASSUNG #017 (Snippet S-05) — Scrollbalken unter die Buttons Referenz: PROJEKTE/_ALLGEMEIN/SNIPPETS/ | eingespielt 22.08.2026 ================================================================== */ /* -------------------------------------------------------------------------- S-05 — Scrollbalken der Button-Leiste liegt UNTER den Buttons -------------------------------------------------------------------------- EDDY 02.08.2026: "Man kann die Buttons auf dem Smartphone nach rechts scrollen, und dieser Scrollbalken darunter überdeckt den unteren Teil der Buttons. Da müsste man ein bisschen Abstand reinkriegen, dass der Balken eher unten drunter ist und es optisch zusammenpasst." Ursache: Das Theme setzt .quick-listing-actions > ul auf overflow-x:auto. Der Scrollbalken wird INNERHALB dieses Kastens gezeichnet — und weil die Buttons bis an den unteren Rand reichen, legt er sich ueber sie. Loesung: Platz unter den Buttons schaffen, damit der Balken dort landet. Zusaetzlich ein schmaler, zurueckhaltender Balken statt des System-Standards. Auf breiten Bildschirmen umbricht die Leiste ohnehin (flex-wrap) und scrollt gar nicht — dort aendert sich nichts Sichtbares. -------------------------------------------------------------------------- */ #c27-single-listing .quick-listing-actions > ul { padding-bottom: 12px; scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.2) transparent; } #c27-single-listing .quick-listing-actions > ul::-webkit-scrollbar { height: 4px; } #c27-single-listing .quick-listing-actions > ul::-webkit-scrollbar-track { background: transparent; } #c27-single-listing .quick-listing-actions > ul::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); border-radius: 4px; } /* === THB-ANPASSUNG #018: Kopf-Buttons auf dem Desktop flacher (42 auf 36,75 px) (Snippet S-31) === */ /* -------------------------------------------------------------------------- S-31: Kopf-Buttons der Detailseite auf dem Desktop flacher -------------------------------------------------------------------------- EDDY 22.08.2026, zuerst: "Diese Buttons auf Desktop in der Hoehe um 25 Prozent reduzieren. Mobil passt es, mobil sollen sie so bleiben." Nach dem Ansehen auf Staging, am selben Tag: "Jetzt sind sie zu flach von der Hoehe. Vorher waren sie zu hoch. Jetzt braeuchten wir so einen Mittelwert." Deshalb steht hier die MITTE zwischen beiden, nicht die urspruengliche Rechnung. Gemeint ist die Button-Leiste im Kopfbereich (Direktnachricht senden, zur Webseite, E-Mail senden, anrufen, teilen, merken), also S-07 und S-05. NICHT gemeint ist der farbige Haupt-Button daneben (.lmb-calltoaction), der bleibt bei seinen 48 px. WORAUS DIE HOEHE ENTSTEHT (gemessen 22.08.2026 an allen fuenf Plattformen, berechnete Browser-Werte, Desktop 1440 und Handy 390) 42 px = padding 10 + Zeilenhoehe 20 + padding 10 + Rahmen 1 + 1 Ueberall identisch, box-sizing ist border-box. Es gibt KEINE `height`-Regel. 🛑 Ein `height: 31.5px` waere deshalb der falsche Griff: Der Inhalt braucht seine 20 px, die Polsterung 20 weitere, und der Kasten wuerde entweder ueberlaufen oder den Text quetschen. Reduziert wird, was die Hoehe MACHT. DIE RECHNUNG zu hoch Theme-Stand 42 px zu flach erster Versuch, minus 25 % 31,5 px Mitte (42 + 31,5) / 2 36,75 px Polster (36,75 - 20 - 2) / 2 7,375 px je Seite Das sind 12,5 Prozent weniger als der Theme-Stand. Bruchteile von Pixeln sind hier richtig, der Browser rechnet in Subpixeln. 🛑 DIE ZAHL IST EIN URTEIL, KEINE MESSUNG. Sie kommt aus zwei angesehenen Zustaenden, nicht aus einer Regel. Wer sie spaeter aendern will, aendert sie HIER und rollt neu aus, statt sie auf einer Plattform zu ueberschreiben. Links und rechts bleiben die 15 px des Themes stehen. Es geht um die Hoehe, nicht um die Breite, deshalb nur `padding-top` und `padding-bottom` und nicht die Kurzform `padding`. WARUM 769 UND NICHT 768 S-11 fasst "mobil" als `max-width: 768px`. Bei genau 768 px gaelten sonst beide Regeln, und der Desktop-Wert wuerde dort greifen, wo das Theme noch mobil denkt. 768 ist der zweithaeufigste Umbruchpunkt im Theme-CSS, kein selbst erfundener Wert. BEWUSST OHNE !important: Die Theme-Regel `.quick-listing-actions > ul > li > a` wiegt (0 IDs, 1 Klasse, 3 Elemente), diese hier wiegt gleich viel und wird spaeter geladen. Innerhalb einer Media-Query bleibt das so. -------------------------------------------------------------------------- */ @media only screen and (min-width: 769px) { .quick-listing-actions > ul > li > a { padding-top: 7.375px; padding-bottom: 7.375px; } }