/* Theme Name: Divi Child Theme für aDirectory Template: Divi Description: Child Theme auf Basis von Divi, um aDirectory Templates für Verzeichnis, Kategorien und Autorenansichten sicher zu überschreiben und anzupassen. Version: 1.8.5 Zweck: - Konsistente Card-Optik über Listings, Rechtsgebiete und Orte - Orte als moderne Text-Kacheln (ohne Bilder, ohne Overlay) - Rechtsgebiete als Premium-Card-Light passend zu content-listing.php - Mobile: stabile 1 Spalte, saubere Abstände Hinweise: - Dieses Child Theme lädt die Styles des Divi Parent Themes. - Template Overrides für aDirectory liegen z.B. unter: - /divi-child/adirectory/ - /divi-child/adqs_directories/ - Eigene CSS Anpassungen bitte nur in den vorgesehenen Blöcken pflegen, nicht als lose Nachträge unten. So vermeiden wir Seiteneffekte und widersprüchliche Regeln. Changelog: - 1.3.1: - Orte (Block 8) konsolidiert und stabilisiert: - Mobile: groesserer Abstand zwischen Zeilen, keine Ueberlappung - Extra Padding-Bottom im Orte-Content, damit nichts in den Footer rutscht - Desktop: Hover-Lift bekommt z-index und genuegend Luft nach oben - Entfernt: separater Block 8.7 als Anhaengsel (alles sauber im Block 8 integriert) - 1.3.0: - Orte (Block 8) auf reales Markup angepasst: - p (Count) nicht mehr ausgeblendet, sondern als Chip gestylt - Text bleibt auf Desktop sichtbar (keine Overlay-Unsichtbarkeit) - Ausrichtung wieder sauber mittig (Mobile und Desktop) - Radius auf 18px, Hover-Gradient passend zum Branding - Entfernt: widersprüchliche Orte-Experimente aus späteren Blöcken (verhindert Desktop-Textverlust und Mobile-Alignment-Bugs) - Rechtsgebiete (Block 11) beibehalten als Premium-Card-Light - 1.2.0: Listing Card Feinschliff: - Name/Vorname groesser, lange Namen max. 2 Zeilen (Tooltip bleibt) - Admin-Debug klickbar ohne Listing zu oeffnen - Card Hover mit sichtbarem Hintergrund-Farbwechsel - 1.1.9: Orte-Ansicht optisch bereinigt und lesbar gemacht: - Orts-Kacheln ohne Bild - ohne Overlay-Hintergrund - fixe Hoehe - grosse Schrift - Kachel-Grid auf Desktop und Mobile sinnvoll skaliert - Navigations-Buttons (Anwalt suchen - Rechtsgebiete - Orte) verkleinert und Typo angepasst - 1.1.8: Orte-Ansicht (Location) als saubere Text-Kachel-Liste gestaltet - 1.1.7: Mobile Location-Ansicht (Orte) stabilisiert - 1.1.6: Platzhalter-SVG im Listing-Thumbnail korrekt eingepasst - 1.1.5: Mobile Default-Ansicht (?view_type=grid) zuverlässig auf 1 Spalte erzwungen - 1.1.4: view_type Umschalter (list/grid) ausgeblendet - 1.1.3: List View optisch fest auf eine Spalte gesetzt - 1.1.2: Generische Layoutprofile für Kachelgrids ergänzt - 1.1.1: Dynamisches CSS Grid für Taxonomie-Kacheln ergänzt - 1.1.0: Hinweise zu aDirectory Overrides ergänzt - 1.0.0: Initiale Version */ /* ========================================================= * 1) Platzhalter für weitere globale Styles * ======================================================= */ /* Eigene globale CSS Regeln können Sie unterhalb ergänzen. */ /* ========================================================= * 2) aDirectory - Kachelgrids (Basis-Konzept) * ======================================================= */ .advoco-grid { display: grid; gap: var(--advoco-card-gap, 20px); grid-template-columns: repeat(auto-fit, minmax(var(--advoco-card-min, 220px), 1fr)); } .advoco-layout-tight { --advoco-card-min: 180px; --advoco-card-gap: 16px; } .advoco-layout-regular { --advoco-card-min: 220px; --advoco-card-gap: 20px; } .advoco-layout-wide { --advoco-card-min: 260px; --advoco-card-gap: 24px; } /* ========================================================= * 3) aDirectory - Taxonomie-Kacheln (content-taxonomy.php) * ======================================================= */ .advoco-category-section { --advoco-card-min: 220px; --advoco-card-gap: 20px; } .advoco-category-section:not(.qsd-has-slick) .qsd-select-category-grid-item { display: grid; gap: var(--advoco-card-gap, 20px); grid-template-columns: repeat(auto-fit, minmax(var(--advoco-card-min, 220px), 1fr)); align-items: start; } /* aDirectory setzt min-height auf .qsd-tax-grid-single fuer Bild-Kacheln — bei unseren 58px-Text-Kacheln erzeugt das riesige Zeilenabstaende. */ .qsd-tax-grid-single { min-height: 0 !important; height: auto !important; } @media (max-width: 480px) { .advoco-category-section { --advoco-card-min: 180px; --advoco-card-gap: 16px; } } @media (min-width: 1400px) { .advoco-category-section { --advoco-card-min: 260px; } } /* ========================================================= * 5) aDirectory - List View immer einspaltig * ======================================================= */ .qsd-prodcut-grid-list-main.list-view { display: block; } .qsd-prodcut-grid-list-main.list-view .qsd-prodcut-grid-list-item { width: 100%; max-width: 100%; float: none; } /* ========================================================= * 6) aDirectory - view_type Umschalter ausblenden * und Mobile Default-Grid (column-3) auf 1 Spalte erzwingen * ======================================================= */ .qsd-view-type, .qsd-view-type-wrap, .adqs-view-type, .adqs-view-switch, .view-type, .view-switch, .grid-list-switch, .grid-list-toggle { display: none !important; visibility: hidden !important; } @media (max-width: 767px) { .qsd-prodcut-grid-list-main.column-3 { display: block !important; } .qsd-prodcut-grid-list-main.column-3, .qsd-prodcut-grid-list, .qsd-product-grid, .qsd-product-grid, .qsd-grid, .adqs-grid, .qsd-listing-grid, .adqs-listing-grid { flex-wrap: wrap !important; } .qsd-prodcut-grid-list-main.column-3 .qsd-prodcut-grid-list-item, .qsd-prodcut-grid-list-main .qsd-prodcut-grid-list-item, .qsd-prodcut-grid-list-item { width: 100% !important; max-width: 100% !important; float: none !important; flex: 0 0 100% !important; } } /* ========================================================= * 7) aDirectory - Platzhalter-SVG im Listing-Thumbnail korrekt einpassen * ======================================================= */ .qsd-prodcut-grid-list-thumb .adqs-placeholder-link { display: block; } .qsd-prodcut-grid-list-thumb .adqs-placeholder-svg { display: block; width: 100%; height: 100%; } .qsd-prodcut-grid-list-thumb .adqs-placeholder-svg svg { display: block; width: 100%; height: 100%; } /* ========================================================= * 8) aDirectory - Orte (Ort) als moderne Text-Kacheln * --------------------------------------------------------- * Ziel: * - Keine Bild- und Overlay-Optik, sondern klare Text-Kacheln * - Fixe Hoehe, grosse Schrift, gute Klickflaeche * - Hintergrund sauber weiss, Border passend zu #73281D * - Count als Chip, Pfeil-Icon als Akzent * * Stabilitaet: * - Desktop: Hover darf nicht abgeschnitten werden (z-index + Luft nach oben) * - Mobile: kein Ueberlappen (gap/row-gap + Margins neutral) * * Wichtig: * - Reales Markup: * .qsd-select-category-grid-thumb-over > a * .qsd-select-category-grid-thumb-over-txt * p (Count + "Listings") * h2 (Ort) * span.qsd-select-category-grid-thumb-over-icon (Pfeil) * ======================================================= */ /* 8.1) Oberes Navigationsfeld (Anwalt suchen - Rechtsgebiete - Orte) verkleinern */ .qsd-content-area .qsd-search-category-area a, .qsd-content-area .qsd-search-category-area button, .qsd-content-area .qsd-search-category-area .qsd-cat-btn, .qsd-content-area .qsd-search-category-area .qsd-main-btn { padding: 10px 14px !important; font-size: 16px !important; line-height: 1.15 !important; border-radius: 10px !important; } /* Mobile: noch kompakter */ @media (max-width: 767px) { .qsd-content-area .qsd-search-category-area a, .qsd-content-area .qsd-search-category-area button, .qsd-content-area .qsd-search-category-area .qsd-cat-btn, .qsd-content-area .qsd-search-category-area .qsd-main-btn { padding: 9px 12px !important; font-size: 15px !important; } } /* 8.2) Orte-Grid: 4 - 3 - 1 Spalten */ .qsd-select-category .qsd-select-category-grid-item { display: grid !important; gap: 12px !important; grid-template-columns: repeat(4, minmax(0, 1fr)); } /* Tablet: 3 Spalten */ @media (max-width: 1099px) and (min-width: 768px) { .qsd-select-category .qsd-select-category-grid-item { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Mobile: 1 Spalte + mehr Abstand, damit nichts ueberlappt */ @media (max-width: 767px) { .qsd-select-category .qsd-select-category-grid-item { grid-template-columns: 1fr; gap: 16px !important; row-gap: 16px !important; } /* Plugin-Margins neutralisieren, damit die Karten nicht ineinander laufen */ .qsd-select-category .qsd-tax-grid-single, .qsd-select-category .qsd-select-category-grid-thumb-over { margin: 0 !important; } } /* 8.2b) Content-Zone: genug Luft oben und unten (gegen Hover-Clipping und Footer-Overlap) */ .qsd-select-category .qsd-taxt-content-area { overflow: visible !important; padding-top: 10px !important; padding-bottom: 34px !important; } @media (max-width: 767px) { .qsd-select-category .qsd-taxt-content-area { padding-bottom: 46px !important; } } /* 8.3) Kachel-Box: wir stylen den Link als Card */ .qsd-select-category-grid-thumb-over { /* falls das Plugin hier absolute/overlays nutzt */ position: relative !important; } .qsd-select-category-grid-thumb-over > a { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; width: 100% !important; height: 58px !important; padding: 0 12px 0 14px !important; background: #ffffff !important; border: 1px solid rgba(19, 15, 14, 0.18) !important; border-radius: 18px !important; box-shadow: 0 10px 22px rgba(19, 15, 14, 0.09) !important; text-decoration: none !important; color: inherit !important; overflow: hidden !important; position: relative !important; z-index: 1 !important; transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, background 180ms ease !important; } /* 8.4) Hover: klar klickbar, hochwertig (z-index hoch, damit es nicht unter Content verschwindet) */ .qsd-select-category-grid-thumb-over > a:hover { transform: translateY(-2px) !important; z-index: 5 !important; box-shadow: 0 16px 34px rgba(19, 15, 14, 0.12) !important; border-color: rgba(115, 40, 29, 0.65) !important; background: linear-gradient(135deg, rgba(115, 40, 29, 0.06) 0%, rgba(196, 159, 70, 0.06) 40%, rgba(255, 255, 255, 1) 82% ) !important; } /* 8.5) Innenlayout: Name links, Count + Icon rechts (mittig ausgerichtet) */ .qsd-select-category-grid-thumb-over-txt { width: 100% !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; margin: 0 !important; padding: 0 !important; opacity: 1 !important; visibility: visible !important; } /* Ort-Name */ .qsd-select-category-grid-thumb-over-txt h2 { margin: 0 !important; font-size: 18px !important; line-height: 1.1 !important; font-weight: 800 !important; letter-spacing: 0.2px !important; color: #130F0E !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; opacity: 1 !important; visibility: visible !important; } /* Desktop: leicht groesser */ @media (min-width: 768px) { .qsd-select-category-grid-thumb-over-txt h2 { font-size: 19px !important; } } /* Count-Chip: p nicht ausblenden, sondern stylen */ .qsd-select-category-grid-thumb-over-txt p { margin: 0 !important; font-size: 12px !important; line-height: 1 !important; font-weight: 800 !important; color: #73281D !important; background: rgba(115, 40, 29, 0.08) !important; border: 1px solid rgba(115, 40, 29, 0.14) !important; border-radius: 999px !important; padding: 6px 10px !important; white-space: nowrap !important; opacity: 1 !important; visibility: visible !important; } /* Pfeil-Icon: rund, Akzent */ .qsd-select-category-grid-thumb-over-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 30px !important; height: 30px !important; border-radius: 999px !important; background: rgba(196, 159, 70, 0.22) !important; border: 1px solid rgba(196, 159, 70, 0.40) !important; } /* SVG Kontrast */ .qsd-select-category-grid-thumb-over-icon svg path { stroke: #73281D !important; } /* Mobile: Lesbarkeit etwas staerker */ @media (max-width: 767px) { .qsd-select-category-grid-thumb-over-txt h2 { font-size: 18px !important; } } /* ========================================================= * 9) Avvokado - Listing Card Premium Feinschliff (V1.2.2) * ======================================================= */ .qsd-prodcut-grid-list-item.avvokado-card--premium { border-radius: 18px; overflow: hidden; background: #ffffff; border: 1px solid rgba(19, 15, 14, 0.18); box-shadow: 0 10px 22px rgba(19, 15, 14, 0.09); transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, background 180ms ease; } .qsd-prodcut-grid-list-item.avvokado-card--premium:hover { transform: translateY(-3px) scale(1.01); box-shadow: 0 24px 56px rgba(19, 15, 14, 0.18); border-color: rgba(115, 40, 29, 0.60); background: linear-gradient(135deg, rgba(115, 40, 29, 0.16) 0%, rgba(196, 159, 70, 0.12) 42%, rgba(255, 255, 255, 1) 78% ); } .qsd-prodcut-grid-list-item.avvokado-card--premium .qsd-prodcut-grid-list-inner.avvokado-inner { padding-left: 0; padding-right: 0; padding-top: 6px; } .qsd-prodcut-grid-list-item.avvokado-card--premium .avvokado-card-body { padding: 12px 10px 12px; } .qsd-prodcut-grid-list-item.avvokado-card--premium .avvokado-head { min-height: calc(21px * 1.14); padding-bottom: 0; } .qsd-prodcut-grid-list-item.avvokado-card--premium .avvokado-l1 { margin: 0; font-size: 21px; line-height: 1.14; font-weight: 860; letter-spacing: 0.1px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .qsd-prodcut-grid-list-item.avvokado-card--premium .avvokado-link { color: #130F0E; text-decoration: none; display: inline-block; } .qsd-prodcut-grid-list-item.avvokado-card--premium .avvokado-link:hover { color: #73281D; } .qsd-prodcut-grid-list-item.avvokado-card--premium .avvokado-badge { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; padding: 7px 10px; border-radius: 999px; font-size: 12px; line-height: 1; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qsd-prodcut-grid-list-item.avvokado-card--premium .avvokado-badge--ort { background: rgba(115, 40, 29, 0.08); border: 1px solid rgba(115, 40, 29, 0.24); color: #73281D; transition: background 140ms ease, border-color 140ms ease, color 140ms ease; } .qsd-prodcut-grid-list-item.avvokado-card--premium:hover .avvokado-badge--ort { background: rgba(115, 40, 29, 0.14); border-color: rgba(115, 40, 29, 0.45); color: #130F0E; } .qsd-prodcut-grid-list-item.avvokado-card--premium .avvokado-l2 { margin-top: 0; padding-top: 2px; padding-bottom: 5px; display: flex; gap: 8px; align-items: center; min-height: 28px; font-size: 14px; line-height: 1.22; color: rgba(19, 15, 14, 0.78); font-weight: 780; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qsd-prodcut-grid-list-item.avvokado-card--premium .avvokado-org-icon { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: rgba(196, 159, 70, 0.18); border: 1px solid rgba(196, 159, 70, 0.42); color: #73281D; } .qsd-prodcut-grid-list-item.avvokado-card--premium .avvokado-org-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .qsd-prodcut-grid-list-item.avvokado-card--premium .avvokado-orte { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; min-height: 34px; } .qsd-prodcut-grid-list-item.avvokado-card--premium .avvokado-sprachen { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; } .qsd-prodcut-grid-list-item.avvokado-card--premium .avvokado-badge--sprache { display: inline-flex; align-items: center; justify-content: center; padding: 7px 10px; border-radius: 999px; font-size: 12px; line-height: 1; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: rgba(196,159,70,.14); border: 1px solid rgba(196,159,70,.40); color: #73281D; } .qsd-prodcut-grid-list-item.avvokado-card--premium .avvokado-l3 { margin-top: 8px; font-size: 14px; line-height: 1.40; color: rgba(19, 15, 14, 0.86); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(1.40em * 4); } /* ===================================================================== * Avvokado - Listing Card Premium: Rechtsgebiete-Chips sauber (3 Reihen) * Version: 1.0.5 (2026-01-06) * * Kontext * In den Listing-Cards gibt es unten einen Bereich mit Rechtsgebieten. * Dieser Bereich besteht nicht aus Textzeilen, sondern aus "Chips" * (Inline-Elemente mit Padding, Border und abgerundeten Ecken). * * Problem (wie zuletzt sichtbar) * - Es waren nur ca. 2 1/3 Chip-Reihen sichtbar, weil die Hoehenberechnung * vorher auf Textzeilen ausgelegt war. * - Nach der Umstellung auf eine Hoehenberechnung ging der Abstand * zwischen den Chip-Reihen verloren, weil gap/row-gap nicht garantiert * gesetzt war. * - Zusaetzlich fehlte der Abstand zwischen Beschreibung (Textblock) und * den Rechtsgebieten, obwohl in der Card noch Platz war. * * Ziel * - Alle Listing-Boxen sollen gleich hoch bleiben. * - Die Rechtsgebiete sollen genau 3 Reihen voll anzeigen (keine halbe Reihe). * - Der Abstand zwischen Beschreibung und Rechtsgebieten soll sichtbar sein. * - Der Abstand zwischen den Chips (horizontal und vertikal) soll stabil sein. * - Die Hoehe soll weiterhin nachvollziehbar bleiben (calc-Berechnung), * damit Sie beim naechsten Anpassen sofort sehen, wie es gerechnet ist. * * So ist es umgesetzt * 1) Wir stellen sicher, dass der Container der Chips ein flex-wrap Layout hat. * Dadurch koennen die Chips in Reihen umbrechen. * 2) Wir setzen column-gap und row-gap explizit, damit der Abstand nicht von * spaeteren CSS-Regeln oder Plugin-Styles ueberschrieben wird. * 3) Wir geben dem Container einen margin-top, damit zwischen Beschreibung und * Chips ein optischer Abstand entsteht. * 4) Wir begrenzen die Hoehe bewusst auf 3 Chip-Reihen, damit alle Cards gleich * hoch bleiben. Mehr als 3 Reihen werden abgeschnitten (overflow: hidden). * * Berechnung der Hoehe * - Eine Chip-Reihe hat eine angenaehert fixe Hoehe, die sich aus dem Chip-Design * ergibt (Schriftgroesse + Padding oben/unten + Border). * - Zwischen den Reihen liegt row-gap. * - Gesamt: 3 * chip_hoehe + 2 * row_gap * * Feintuning (wenn noch minimal abgeschnitten) * - Erhoehen Sie NUR --avv-chip-hoehe schrittweise: * 28px -> 29px -> 30px * - Oder erhoehen Sie row-gap, wenn Sie mehr Luft zwischen Reihen wollen. * * Changelog * - 1.0.5: * - Ausfuehrliche Kommentare ergaenzt * - Abstand Beschreibung -> Chips via margin-top gesetzt * - row-gap und column-gap explizit gesetzt (stabil gegen Overrides) * - Hoehe per calc nachvollziehbar gehalten * ===================================================================== */ .qsd-prodcut-grid-list-item.avvokado-card--premium .avvokado-l5{ /* Abstand zur Beschreibung oberhalb der Rechtsgebiete */ margin-top: 10px !important; /* Container-Layout: Chips sollen umbrechen und in Reihen stehen */ display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important; align-content: flex-start !important; /* Abstaende zwischen den Chips: - column-gap: Abstand innerhalb einer Reihe - row-gap: Abstand zwischen den Reihen */ column-gap: 8px !important; row-gap: 8px !important; /* Parameter fuer die Hoehenberechnung: - chip_hoehe ist ein praxisnaher Naeherungswert fuer die Chip-Reihe - row_gap muss zu row-gap oben passen, damit die Rechnung stimmt */ --avv-chip-hoehe: 28px; --avv-chip-row-gap: 8px; /* Padding unten damit die unterste Chip-Reihe nicht abgeschnitten wird (Chips haben margin-bottom: 6px das sonst vom overflow:hidden geclippt wuerde) */ padding-bottom: 6px !important; /* Fixe Hoehe fuer exakt 3 volle Chip-Reihen: 3 * chip_hoehe + 2 * row_gap + padding-bottom */ max-height: calc( (var(--avv-chip-hoehe) * 3) + (var(--avv-chip-row-gap) * 2) + 6px ) !important; min-height: calc( (var(--avv-chip-hoehe) * 3) + (var(--avv-chip-row-gap) * 2) + 6px ) !important; /* Alles ueber 3 Reihen wird abgeschnitten, damit die Cards gleich hoch bleiben */ overflow: hidden !important; } /* ========================================================= * 9) Avvokado - Rechtsgebiete Chips (vereinheitlicht Anwalt + Kanzlei) * Version: 1.0.0 (2026-01-10) * * Zweck * - Einheitliche Chip-Optik und identische Hoehe in /anwalt/ und /kanzlei/. * - Chips koennen als oder gerendert werden. * - Divi/Theme ueberschreibt bei oft line-height und padding. Das wird hier stabilisiert. * * Hinweise * - !important wird nur fuer die Geometrie verwendet, um Divi-Overrides zu neutralisieren. * - Farben, Border und Hover-Design bleiben kompatibel zu Ihrem bisherigen Stil. * * Changelog * - Neu: Basis fuer .avvokado-l5 > a.avvokado-chip und > span.avvokado-chip * - Neu: Geometrie-Fixes mit !important (line-height, padding, display, text-decoration) * ======================================================= */ .qsd-prodcut-grid-list-item.avvokado-card--premium .avvokado-l5 > .avvokado-chip, .qsd-prodcut-grid-list-item.avvokado-card--premium .avvokado-l5 > a.avvokado-chip, .qsd-prodcut-grid-list-item.avvokado-card--premium .avvokado-l5 > span.avvokado-chip { /* Geometrie: gegen Divi-Overrides absichern */ display: inline-flex !important; align-items: center !important; line-height: 1 !important; padding: 6px 10px !important; text-decoration: none !important; box-sizing: border-box !important; /* Typografie: ebenfalls fixieren, sonst wirkt es anders als /anwalt/ */ font-family: inherit !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: 0 !important; /* Ihr Chip-Design */ border-radius: 999px; background: rgba(196, 159, 70, 0.14); border: 1px solid rgba(196, 159, 70, 0.40); color: #73281D; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background 140ms ease, border-color 140ms ease, color 140ms ease; } /* Abstand zwischen Chips (wichtig bei , weil Divi teils andere Defaults setzt) */ .qsd-prodcut-grid-list-item.avvokado-card--premium .avvokado-l5 > a.avvokado-chip, .qsd-prodcut-grid-list-item.avvokado-card--premium .avvokado-l5 > span.avvokado-chip { margin: 0 6px 6px 0 !important; } /* Hover-Zustand */ .qsd-prodcut-grid-list-item.avvokado-card--premium .avvokado-l5 > a.avvokado-chip:hover, .qsd-prodcut-grid-list-item.avvokado-card--premium .avvokado-l5 > span.avvokado-chip:hover { background: rgba(115, 40, 29, 0.12); border-color: rgba(115, 40, 29, 0.42); color: #130F0E; } @media (max-width: 767px) { .qsd-prodcut-grid-list-item.avvokado-card--premium .avvokado-card-body { padding: 12px 10px 12px; } .qsd-prodcut-grid-list-item.avvokado-card--premium .avvokado-l1 { font-size: 22px; } .qsd-prodcut-grid-list-item.avvokado-card--premium .avvokado-badge { max-width: 100%; } } @media (max-width: 767px) { .qsd-prodcut-grid-list-main .qsd-prodcut-grid-list-item.avvokado-card--premium { margin-top: 10px; margin-bottom: 14px; } } /* ========================================================= * 10) Avvokado - Listing Thumbnail SVG (344x208) stabil * ======================================================= */ .qsd-prodcut-grid-list-thumb.avvokado-thumb .avvokado-thumb-svg { display: block; width: 100%; height: auto; } /* ========================================================= * 11) Avvokado - Rechtsgebiete: Premium-Card-Light (Taxonomie) * ======================================================= */ .avvokado-tax-card{ border-radius: 18px; overflow: hidden; background: #ffffff; border: 1px solid rgba(19, 15, 14, 0.18); box-shadow: 0 10px 22px rgba(19, 15, 14, 0.09); transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, background 180ms ease; } .avvokado-tax-card:hover{ transform: translateY(-3px) scale(1.01); box-shadow: 0 24px 56px rgba(19, 15, 14, 0.18); border-color: rgba(115, 40, 29, 0.60); background: linear-gradient(135deg, rgba(115, 40, 29, 0.16) 0%, rgba(196, 159, 70, 0.12) 42%, rgba(255, 255, 255, 1) 78% ); } .avvokado-tax-card .avvokado-card-body{ padding: 14px 12px 14px; } .avvokado-tax-card .avvokado-head{ display: flex; gap: 10px; align-items: flex-end; justify-content: space-between; } .avvokado-tax-card .avvokado-l1{ margin: 0; font-size: 19px; line-height: 1.18; font-weight: 860; letter-spacing: 0.1px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 1 1 auto; min-width: 0; } .avvokado-tax-card .avvokado-link{ color: #130F0E; text-decoration: none; display: inline-block; } .avvokado-tax-card:hover .avvokado-link{ color: #73281D; } .avvokado-tax-card .avvokado-badge{ display: inline-flex; align-items: center; justify-content: center; max-width: 54%; padding: 7px 10px; border-radius: 999px; font-size: 12px; line-height: 1; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .avvokado-tax-card .avvokado-badge--ort{ background: rgba(196, 159, 70, 0.16); border: 1px solid rgba(196, 159, 70, 0.42); color: #73281D; transition: background 140ms ease, border-color 140ms ease, color 140ms ease; position: relative; top: -2px; } .avvokado-tax-card:hover .avvokado-badge--ort{ background: rgba(115, 40, 29, 0.14); border-color: rgba(115, 40, 29, 0.45); color: #130F0E; } @media (max-width: 767px){ .avvokado-tax-card .avvokado-card-body{ padding: 14px 12px 14px; } .avvokado-tax-card .avvokado-l1{ font-size: 20px; } .avvokado-tax-card .avvokado-badge{ max-width: 58%; } } /* ========================================================= * 8.6) Orte - Hintergrundbild/Overlay entfernen (nur Orte-Kacheln) * ======================================================= */ .qsd-select-category-grid-thumb, .qsd-select-category-grid-thumb-over{ background: transparent !important; background-image: none !important; } .qsd-select-category-grid-thumb:before, .qsd-select-category-grid-thumb:after, .qsd-select-category-grid-thumb-over:before, .qsd-select-category-grid-thumb-over:after{ content: none !important; display: none !important; background: none !important; background-image: none !important; opacity: 0 !important; } .qsd-select-category-grid-thumb-over > a{ background: #ffffff !important; } /* ========================================================= * 12) Avvokado - Listing Cards auf Location-Seiten identisch wie /anwalt/ * ======================================================= */ /* Hinweis: - Dieser Block ist bewusst breit gescoped (innerhalb .qsd-content-area), damit Location-Archive die gleiche Card-Optik wie /anwalt/ erhalten. - Wenn wir spaeter haerter scopen wollen, machen wir es ueber body Klassen oder Page-ID. */ .qsd-content-area .qsd-prodcut-grid-list-main .qsd-prodcut-grid-list-item{ border-radius: 18px !important; overflow: hidden !important; background: #ffffff !important; border: 1px solid rgba(19, 15, 14, 0.18) !important; box-shadow: 0 10px 22px rgba(19, 15, 14, 0.09) !important; transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, background 180ms ease !important; } .qsd-content-area .qsd-prodcut-grid-list-main .qsd-prodcut-grid-list-item:hover{ transform: translateY(-3px) scale(1.01) !important; box-shadow: 0 24px 56px rgba(19, 15, 14, 0.18) !important; border-color: rgba(115, 40, 29, 0.60) !important; background: linear-gradient(135deg, rgba(115, 40, 29, 0.16) 0%, rgba(196, 159, 70, 0.12) 42%, rgba(255, 255, 255, 1) 78% ) !important; } .qsd-content-area .qsd-prodcut-grid-list-main .qsd-prodcut-grid-list-item .qsd-prodcut-grid-list-inner{ padding-left: 0 !important; padding-right: 0 !important; padding-top: 6px !important; } .qsd-content-area .qsd-prodcut-grid-list-main .qsd-prodcut-grid-list-item .avvokado-card-body, .qsd-content-area .qsd-prodcut-grid-list-main .qsd-prodcut-grid-list-item .qsd-product-grid-article{ padding: 12px 10px 12px !important; } .qsd-content-area .qsd-prodcut-grid-list-main .qsd-prodcut-grid-list-item .qsd-prodcut-grid-list-thumb, .qsd-content-area .qsd-prodcut-grid-list-main .qsd-prodcut-grid-list-item .qsd-prodcut-grid-list-thumb a, .qsd-content-area .qsd-prodcut-grid-list-main .qsd-prodcut-grid-list-item .qsd-prodcut-grid-list-thumb img, .qsd-content-area .qsd-prodcut-grid-list-main .qsd-prodcut-grid-list-item .qsd-prodcut-grid-list-thumb svg{ border-radius: 16px !important; overflow: hidden !important; } @media (max-width: 767px){ .qsd-content-area .qsd-prodcut-grid-list-main .qsd-prodcut-grid-list-item{ margin-top: 10px !important; margin-bottom: 14px !important; } } /* ========================================================= * 13) Avvokado - aDirectory Akzentfarben: Blau -> Braun * --------------------------------------------------------- * Zweck: * - Entfernt blaue Buttons, Links und Icons in aDirectory Bereichen * - Setzt Standardfarbe auf Braun (#73281D) und Akzent Gold (#C49F46) * - Gilt fuer: /anwalt/, /anwalt/ort/, /anwalt/rechtsgebiete/ und Listing-Archive * * Version: 1.0.0 * * Changelog: * - 1.0.0: * - Buttons/Links in aDirectory Bereichen auf Braun umgestellt * - SVG Icons (stroke/fill) passend eingefärbt * - Focus/Outline von Inputs auf Braun gesetzt * ======================================================= */ /* 13.1) Links im aDirectory Bereich */ .qsd-content-area a, .qsd-content-area a:visited{ color: #73281D !important; } .qsd-content-area a:hover{ color: #130F0E !important; } /* 13.2) Hauptbuttons (z.B. Search) */ .qsd-content-area .qsd-main-btn, .qsd-content-area button.qsd-main-btn, .qsd-content-area .qsd-search-category-area a, .qsd-content-area .qsd-search-category-area button{ background: #73281D !important; border-color: rgba(115, 40, 29, 0.60) !important; color: #ffffff !important; } .qsd-content-area .qsd-main-btn:hover, .qsd-content-area button.qsd-main-btn:hover, .qsd-content-area .qsd-search-category-area a:hover, .qsd-content-area .qsd-search-category-area button:hover{ background: #4A3B39 !important; border-color: rgba(196, 159, 70, 0.55) !important; color: #ffffff !important; } /* 13.3) Sekundaere Buttons/Chips (z.B. Kategorien-Chips, Top-Buttons) */ .qsd-content-area .grid-list-inner-top-btn, .qsd-content-area .qsd-catagory-list-btn a{ background: rgba(196, 159, 70, 0.14) !important; border: 1px solid rgba(196, 159, 70, 0.40) !important; color: #73281D !important; } .qsd-content-area .grid-list-inner-top-btn:hover, .qsd-content-area .qsd-catagory-list-btn a:hover{ background: rgba(115, 40, 29, 0.12) !important; border-color: rgba(115, 40, 29, 0.42) !important; color: #130F0E !important; } /* 13.4) SVG Icons: Stroke/Fills auf Braun (gegen blau) */ .qsd-content-area svg path, .qsd-content-area svg circle, .qsd-content-area svg rect{ stroke: #73281D; } /* Manche Icons nutzen fill statt stroke */ .qsd-content-area svg path[fill], .qsd-content-area svg rect[fill], .qsd-content-area svg circle[fill]{ fill: #73281D; } /* 13.5) Favorit/Compare Buttons: Icon-Farbe nicht blau */ .qsd-content-area .qsd-single-group button svg path{ stroke: #73281D !important; } /* Falls ein Gradient-Icon (compare) sichtbar bleiben soll, nicht ueberschreiben */ .qsd-content-area .qsd-add-comp-btn svg defs, .qsd-content-area .qsd-add-comp-btn svg linearGradient{ /* keine Aenderung */ } /* 13.6) Input Focus: blauen Rand entfernen */ .qsd-content-area input:focus, .qsd-content-area select:focus, .qsd-content-area textarea:focus{ outline: none !important; border-color: rgba(115, 40, 29, 0.60) !important; box-shadow: 0 0 0 3px rgba(196, 159, 70, 0.18) !important; } /* ========================================================= * 13.8) Fix Farben: Listing-Text wie vorher, Icons korrekt, Herz/Compare in Gold * --------------------------------------------------------- * Zweck: * - Listing-Cards: Name und Beschreibung wieder schwarz/dunkel wie zuvor * - Keine globalen Link- oder SVG-Farbregeln mehr im aDirectory Bereich * - Favorit (Herz) und Compare: Gold (#C49F46) statt Rot/Gradient/Blau * - View-Switch (Grid/List Icons): Braun/Gold statt Blau * * Wichtige Notiz: * - Dieser Block ist bewusst sehr gezielt gescoped, damit: * - Textfarben in Listings nicht erneut ueberschrieben werden * - Nur UI-Controls (Buttons/Icons) gefaerbt werden * * Version: 1.0.0 * * Changelog: * - 1.0.0: * - Listing-Typo auf schwarz/dunkel zurueckgesetzt * - Herz/Compare Icon-Optik auf Gold umgestellt * - View-Switch Buttons auf Braun/Gold umgestellt * - Keine globalen SVG Overrides mehr notwendig * ======================================================= */ /* --------------------------------------------------------- * A) Listing-Text wieder wie vorher (schwarz/dunkel) * ------------------------------------------------------ */ /* Name-Link (z.B. h3 a.grid-list-inner-txt oder avvokado-link) */ .qsd-prodcut-grid-list-item h3 a, .qsd-prodcut-grid-list-item .avvokado-link, .qsd-prodcut-grid-list-item .grid-list-inner-txt{ color: #130F0E !important; } /* Beschreibung (author-detail, avvokado-l3) */ .qsd-prodcut-grid-list-item .author-detail, .qsd-prodcut-grid-list-item .avvokado-l3{ color: rgba(19, 15, 14, 0.86) !important; } /* Kanzlei-Zeile */ .qsd-prodcut-grid-list-item .avvokado-l2, .qsd-prodcut-grid-list-item .qsd-prodcut-grid-list-inner .qsd-cat-content{ color: rgba(19, 15, 14, 0.78) !important; } /* Hover darf den Text nicht braun faerben */ .qsd-prodcut-grid-list-item h3 a:hover, .qsd-prodcut-grid-list-item .grid-list-inner-txt:hover, .qsd-prodcut-grid-list-item .avvokado-link:hover{ color: #130F0E !important; } /* --------------------------------------------------------- * B) Favorit (Herz) und Compare: Gold statt Rot/Gradient/Blau * ------------------------------------------------------ */ /* Die runden Icon-Buttons oben rechts (Hintergrund) */ .qsd-prodcut-grid-list-item .qsd-top-right-btn-group .qsd-single-group button{ background: rgba(196, 159, 70, 0.18) !important; border: 1px solid rgba(196, 159, 70, 0.45) !important; border-radius: 999px !important; } /* Herz-Icon: Gold */ .qsd-prodcut-grid-list-item .adqs-add-fav-btn button svg path{ fill: #C49F46 !important; stroke: #C49F46 !important; } /* Compare-Icon (hat oft fill url(#gradient) im Plugin): per CSS auf Gold ueberschreiben */ .qsd-prodcut-grid-list-item .qsd-add-comp-btn button svg path{ fill: #C49F46 !important; stroke: #C49F46 !important; } /* Optional: Hover etwas dunkler fuer klares Feedback */ .qsd-prodcut-grid-list-item .qsd-top-right-btn-group .qsd-single-group button:hover{ background: rgba(115, 40, 29, 0.10) !important; border-color: rgba(115, 40, 29, 0.35) !important; } /* --------------------------------------------------------- * C) View-Switch (Grid/List) Buttons: Braun/Gold statt Blau * ------------------------------------------------------ */ /* Wrapper Buttons (die kleinen Icons neben dem Dropdown) */ .qsd-view-type-wrap button, .qsd-view-type button, .adqs-view-type button, .adqs-view-switch button{ background: rgba(196, 159, 70, 0.16) !important; border: 1px solid rgba(196, 159, 70, 0.40) !important; border-radius: 10px !important; } /* Aktiver Button (war blau) */ .qsd-view-type-wrap button.active, .qsd-view-type button.active, .adqs-view-type button.active, .adqs-view-switch button.active{ background: rgba(115, 40, 29, 0.12) !important; border-color: rgba(115, 40, 29, 0.42) !important; } /* Icons in den View-Switch Buttons */ .qsd-view-type-wrap button svg path, .qsd-view-type button svg path, .adqs-view-type button svg path, .adqs-view-switch button svg path{ fill: #73281D !important; stroke: #73281D !important; } /* ========================================================= * 13.9) Fix: Listing-Typo wieder schwarz (Name, Kanzlei, Beschreibung) * --------------------------------------------------------- * Zweck: * - Erzwingt fuer Premium Listing-Cards wieder die vorherige Typo: * - Name schwarz * - Kanzlei dunkelgrau * - Beschreibung dunkelgrau * - Ueberschreibt breite Link-Regeln, die Links braun faerben * * Version: 1.0.0 * * Changelog: * - 1.0.0: * - Sehr spezifische Selektoren fuer Premium-Cards * - Setzt Name/Kanzlei/Beschreibung stabil auf schwarz/dunkelgrau * ======================================================= */ /* Name (Linie 1) */ .qsd-prodcut-grid-list-item.avvokado-card--premium .avvokado-l1, .qsd-prodcut-grid-list-item.avvokado-card--premium .avvokado-l1 a, .qsd-prodcut-grid-list-item.avvokado-card--premium .avvokado-l1 a:visited{ color: #130F0E !important; } /* Kanzlei (Linie 2) */ .qsd-prodcut-grid-list-item.avvokado-card--premium .avvokado-l2, .qsd-prodcut-grid-list-item.avvokado-card--premium .avvokado-l2 a, .qsd-prodcut-grid-list-item.avvokado-card--premium .avvokado-l2 a:visited, .qsd-prodcut-grid-list-item.avvokado-card--premium .avvokado-org-name{ color: rgba(19, 15, 14, 0.78) !important; } /* Beschreibung (Linie 3) */ .qsd-prodcut-grid-list-item.avvokado-card--premium .avvokado-l3{ color: rgba(19, 15, 14, 0.86) !important; } /* Hover soll Text nicht braun machen */ .qsd-prodcut-grid-list-item.avvokado-card--premium .avvokado-l1 a:hover, .qsd-prodcut-grid-list-item.avvokado-card--premium .avvokado-l2 a:hover{ color: #130F0E !important; } /* =================================================================== Avvokado - Single Listing: Header-Actions modernisieren (Views/Share/Claim) Version: 1.0.0 (2026-01-05) Ziel: - Die Action-Leiste oben im Single Listing (Views, Share, Claim) soll moderner aussehen und zum Rest der Seite passen. - Ohne HTML-Aenderungen am Plugin: reines CSS-Upgrade. Design-Prinzipien: - Klare Buttons als "Pills" mit leichtem Shadow - Popover fuer Share als saubere Dropdown-Card - Claim-Button als Primary in Braun, Submit in Gold - Mobile: Umbruch faengt alles ab, Popover bleibt im Viewport Brand-Farben: - Braun: #73281D - Gold: #C49F46 =================================================================== */ :root{ /* Brand */ --avv-brown: #73281D; --avv-gold: #C49F46; /* Neutrals */ --avv-text: #111111; --avv-muted: #6b7280; --avv-border: rgba(17,17,17,.10); /* Surfaces */ --avv-card: rgba(255,255,255,.92); /* Elevation */ --avv-shadow: 0 10px 30px rgba(17,17,17,.10); --avv-shadow-sm: 0 6px 18px rgba(17,17,17,.10); /* Radius */ --avv-radius: 18px; --avv-radius-sm: 12px; } /* --------------------------------------------------------------- 1) Container: Action-Leiste oben (Views, Share, Claim) --------------------------------------------------------------- */ .listing-grid-details-price-btn-item.qsd-meta_wrap{ display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--avv-border); background: var(--avv-card); border-radius: var(--avv-radius); box-shadow: var(--avv-shadow-sm); backdrop-filter: blur(10px); } /* Preis ist bei Ihnen leer - sauber entfernen, damit keine Hoehe verschwendet wird */ .listing-grid-details-price-btn-item .listing-grid-details-price:empty{ display: none; } /* --------------------------------------------------------------- 2) Buttons: einheitliche Pill-Optik --------------------------------------------------------------- */ .listing-grid-details-btn-item{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .listing-grid-details-btn{ display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--avv-border); background: #fff; color: var(--avv-text); padding: 10px 12px; border-radius: 999px; line-height: 1; font-size: 14px; font-weight: 600; text-decoration: none; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; box-shadow: 0 1px 0 rgba(17,17,17,.04); } .listing-grid-details-btn:hover{ transform: translateY(-1px); box-shadow: var(--avv-shadow-sm); border-color: rgba(115,40,29,.25); } .listing-grid-details-btn:focus{ outline: none; } .listing-grid-details-btn:focus-visible{ box-shadow: 0 0 0 4px rgba(196,159,70,.25), var(--avv-shadow-sm); border-color: rgba(196,159,70,.60); } /* Icons im Button: einheitliche Groesse und Brand-Farbe */ .listing-grid-details-btn i.dashicons{ font-size: 18px; width: 18px; height: 18px; color: var(--avv-brown); } /* Views: leichter Badge-Look */ .qsd-meta-view-count{ background: rgba(115,40,29,.06); border-color: rgba(115,40,29,.18); color: var(--avv-text); } /* --------------------------------------------------------------- 3) Share: Dropdown als Popover-Card --------------------------------------------------------------- */ .qsd-socialShare{ position: relative; cursor: pointer; } .qsd-socialShare > img{ width: 18px; height: 18px; opacity: .9; } .qsd-socialShare .qsd-text{ color: var(--avv-text); font-weight: 600; } /* Popover: standardmaessig versteckt, sichtbar bei Hover/Fokus */ .qsd-socialShare-btn{ position: absolute; right: 0; top: calc(100% + 10px); z-index: 9999; min-width: 220px; padding: 10px; border-radius: var(--avv-radius-sm); border: 1px solid var(--avv-border); background: #fff; box-shadow: var(--avv-shadow); display: none; } .qsd-socialShare:hover .qsd-socialShare-btn, .qsd-socialShare:focus-within .qsd-socialShare-btn{ display: block; } /* Links im Popover: sauber klickbar, leichtes Highlight bei Hover */ .qsd-socialShare-btn a{ display: flex; align-items: center; justify-content: space-between; padding: 10px 10px; border-radius: 10px; text-decoration: none; color: var(--avv-text); font-weight: 600; font-size: 14px; border: 1px solid transparent; transition: background .12s ease, border-color .12s ease, transform .12s ease; } .qsd-socialShare-btn a:hover{ background: rgba(115,40,29,.06); border-color: rgba(115,40,29,.18); transform: translateX(1px); } /* --------------------------------------------------------------- 4) Claim: Primary Button + Form Card --------------------------------------------------------------- */ .adqs-claim-listing-btn{ background: var(--avv-brown); color: #fff; border-color: rgba(0,0,0,.06); box-shadow: 0 10px 18px rgba(115,40,29,.20); } .adqs-claim-listing-btn i.dashicons{ color: #fff; } .adqs-claim-listing-btn:hover{ background: #642118; border-color: rgba(0,0,0,.10); } /* Claim-Form als Card */ .adqs-claim-form-wrapper{ margin-top: 12px; border-radius: var(--avv-radius); border: 1px solid var(--avv-border); background: #fff; box-shadow: var(--avv-shadow); padding: 16px; } .adqs-claim-form-wrapper h3{ margin: 0 0 12px 0; font-size: 18px; line-height: 1.25; color: var(--avv-text); } .adqs-claim-form .adqs-form-field{ margin-bottom: 12px; } .adqs-claim-form label{ display: block; margin-bottom: 6px; font-weight: 700; color: var(--avv-text); font-size: 13px; } /* Inputs */ .adqs-claim-form input[type="text"], .adqs-claim-form input[type="tel"], .adqs-claim-form input[type="email"], .adqs-claim-form input[type="file"], .adqs-claim-form textarea, .adqs-claim-form select{ width: 100%; border-radius: 12px; border: 1px solid var(--avv-border); padding: 11px 12px; font-size: 14px; background: #fff; color: var(--avv-text); transition: box-shadow .12s ease, border-color .12s ease; } .adqs-claim-form input:focus, .adqs-claim-form textarea:focus, .adqs-claim-form select:focus{ outline: none; border-color: rgba(196,159,70,.70); box-shadow: 0 0 0 4px rgba(196,159,70,.20); } /* TinyMCE-Wrapper optisch passend machen */ .adqs-claim-form .wp-editor-wrap{ border-radius: 12px; overflow: hidden; border: 1px solid var(--avv-border); } .adqs-claim-desc{ margin: 8px 0 0 0; color: var(--avv-muted); font-size: 12px; } /* Buttons unten im Formular */ .adqs-claim-submit-wrapper{ display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 8px; } .adqs-claim-cancel{ display: inline-flex; align-items: center; justify-content: center; padding: 10px 12px; border-radius: 999px; border: 1px solid var(--avv-border); background: #fff; color: var(--avv-text); text-decoration: none; font-weight: 700; } .adqs-claim-submit{ display: inline-flex; align-items: center; justify-content: center; padding: 10px 14px; border-radius: 999px; border: 0; background: var(--avv-gold); color: #111; font-weight: 800; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; box-shadow: 0 12px 18px rgba(196,159,70,.25); } .adqs-claim-submit:hover{ transform: translateY(-1px); filter: brightness(.98); } .adqs-claim-submit:focus-visible{ box-shadow: 0 0 0 4px rgba(196,159,70,.30), 0 12px 18px rgba(196,159,70,.25); } /* --------------------------------------------------------------- 5) Mobile: Action-Leiste und Share-Popover sicher im Viewport --------------------------------------------------------------- */ @media (max-width: 640px){ .listing-grid-details-price-btn-item.qsd-meta_wrap{ justify-content: flex-start; padding: 10px; } .qsd-socialShare-btn{ right: auto; left: 0; width: min(92vw, 320px); } } /* =================================================================== Avvokado - Single Listing UI Feinschliff Version: 1.0.2 (2026-01-05) Zweck: - Action-Leiste (Views, Share, Claim): Ausrichtung korrigieren, Hover-Farben auf Brand - Share: Hover war blau - wird konsequent auf Braun umgestellt - Kontaktformular: Gruen entfernen, Brand-Farben und moderner Look - Kategorien: Darstellung als Badges (Basis-Design wie Listing-Tags auf Bild 4) Brand-Farben: - Braun: #73281D - Gold: #C49F46 Changelog: - 1.0.2: - Claim-Button Ausrichtung und Innenabstaende korrigiert (Position wie Views/Share) - Share Hover-Styles: Blau entfernt - Braun/Gold Design erzwungen - Kontaktformular: Hintergrund, Rahmen, Buttons und Inputs an Brand angepasst - Kategorien-Widget: Links als Badge-Pills im Stil der Listing-Tags - 1.0.1: - Grundblock fuer Action-Leiste, Popover, Claim-Form hinzugefuegt - Brand-Farben gesetzt =================================================================== */ :root{ --avv-brown: #73281D; --avv-gold: #C49F46; --avv-text: #111111; --avv-muted: #6b7280; --avv-border: rgba(17,17,17,.10); --avv-shadow: 0 10px 30px rgba(17,17,17,.10); --avv-shadow-sm: 0 6px 18px rgba(17,17,17,.10); --avv-radius: 18px; --avv-radius-sm: 12px; } /* --------------------------------------------------------------- 1) Action-Leiste: Ausrichtung, Hover-Text nicht zu dunkel --------------------------------------------------------------- */ /* Container bleibt wie gehabt - hier nur Feintuning */ .listing-grid-details-price-btn-item.qsd-meta_wrap{ align-items: center; } /* Alle Action-Buttons wirklich auf eine Baseline zentrieren */ .listing-grid-details-btn-item, .adqs-claim-listing-btn-wrapper{ display: flex; align-items: center; gap: 10px; } /* Claim Wrapper: keine zufaelligen Margins oder Offsets */ .adqs-claim-listing-btn-wrapper{ margin: 0 !important; padding: 0 !important; } /* Buttons: Hover Hintergrund leicht braun, Text bleibt gut lesbar */ .listing-grid-details-btn:hover{ background: rgba(115,40,29,.06); color: var(--avv-text); border-color: rgba(115,40,29,.22); } /* View Count Badge - Hover konsistent */ .qsd-meta-view-count:hover{ background: rgba(115,40,29,.08); border-color: rgba(115,40,29,.22); } /* Claim Button: exakt gleiche Hoehe wie die anderen Pills */ .adqs-claim-listing-btn{ display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 40px; padding: 10px 14px !important; border-radius: 999px !important; background: var(--avv-brown) !important; color: #ffffff !important; border: 1px solid rgba(0,0,0,.06) !important; line-height: 1 !important; text-decoration: none !important; box-shadow: 0 10px 18px rgba(115,40,29,.20); } .adqs-claim-listing-btn i.dashicons{ color: #ffffff !important; } .adqs-claim-listing-btn:hover{ background: #642118 !important; color: #ffffff !important; } /* --------------------------------------------------------------- 2) Share: Blau entfernen, Hover auf Braun, Popover sauber --------------------------------------------------------------- */ /* Share Button selbst: nie blau, auch nicht visited */ .qsd-socialShare, .qsd-socialShare .qsd-text{ color: var(--avv-text) !important; } /* Falls irgendwo ein Link-Default greift */ .qsd-socialShare a, .qsd-socialShare a:visited{ color: var(--avv-text) !important; } /* Share Dropdown Links: Hover nicht blau, sondern Brand */ .qsd-socialShare-btn a{ color: var(--avv-text) !important; text-decoration: none !important; } .qsd-socialShare-btn a:hover{ background: rgba(115,40,29,.06) !important; border-color: rgba(115,40,29,.18) !important; color: var(--avv-text) !important; } /* --------------------------------------------------------------- 3) Kontaktformular: Gruen entfernen, Brand-Look wie der Rest --------------------------------------------------------------- */ /* Ziel: Der gruene Kasten soll neutral und modern werden */ .qsd-single_listing .qsd-contact-form, .qsd-single_listing .contactform, .qsd-single_listing .adqs-contact-form, .qsd-single_listing .listing-grid-contact, .qsd-single_listing .listing-grid-contact-form, .qsd-single_listing .widget .contact-form, .qsd-single_listing .wpcf7 form{ background: #ffffff !important; border: 1px solid var(--avv-border) !important; border-radius: var(--avv-radius) !important; box-shadow: var(--avv-shadow-sm) !important; padding: 18px !important; } /* Titel im Formular */ .qsd-single_listing .qsd-contact-form h3, .qsd-single_listing .contactform h3, .qsd-single_listing .wpcf7 h3{ color: var(--avv-text) !important; font-weight: 800 !important; } /* Inputs */ .qsd-single_listing .qsd-contact-form input[type="text"], .qsd-single_listing .qsd-contact-form input[type="email"], .qsd-single_listing .qsd-contact-form input[type="tel"], .qsd-single_listing .qsd-contact-form textarea, .qsd-single_listing .contactform input[type="text"], .qsd-single_listing .contactform input[type="email"], .qsd-single_listing .contactform input[type="tel"], .qsd-single_listing .contactform textarea, .qsd-single_listing .wpcf7 input[type="text"], .qsd-single_listing .wpcf7 input[type="email"], .qsd-single_listing .wpcf7 input[type="tel"], .qsd-single_listing .wpcf7 textarea{ width: 100% !important; border-radius: 12px !important; border: 1px solid var(--avv-border) !important; background: #ffffff !important; color: var(--avv-text) !important; padding: 12px 12px !important; box-shadow: none !important; } /* Focus: Gold */ .qsd-single_listing .qsd-contact-form input:focus, .qsd-single_listing .qsd-contact-form textarea:focus, .qsd-single_listing .contactform input:focus, .qsd-single_listing .contactform textarea:focus, .qsd-single_listing .wpcf7 input:focus, .qsd-single_listing .wpcf7 textarea:focus{ outline: none !important; border-color: rgba(196,159,70,.75) !important; box-shadow: 0 0 0 4px rgba(196,159,70,.20) !important; } /* Submit Button: Braun oder Gold - hier Gold, damit es wie CTA wirkt */ .qsd-single_listing .qsd-contact-form button, .qsd-single_listing .qsd-contact-form input[type="submit"], .qsd-single_listing .contactform button, .qsd-single_listing .contactform input[type="submit"], .qsd-single_listing .wpcf7 input[type="submit"]{ width: 100% !important; border: 0 !important; border-radius: 14px !important; background: var(--avv-gold) !important; color: #111111 !important; font-weight: 900 !important; padding: 12px 14px !important; cursor: pointer !important; box-shadow: 0 12px 18px rgba(196,159,70,.25) !important; } .qsd-single_listing .qsd-contact-form button:hover, .qsd-single_listing .qsd-contact-form input[type="submit"]:hover, .qsd-single_listing .contactform button:hover, .qsd-single_listing .contactform input[type="submit"]:hover, .qsd-single_listing .wpcf7 input[type="submit"]:hover{ transform: translateY(-1px); filter: brightness(.98); } /* --------------------------------------------------------------- 3b) Connect-Agent Widget: Brand-Look (aDirectory .connect-agents) --------------------------------------------------------------- */ /* Widget-Wrapper: neutraler Hintergrund, kein grüner aDirectory-Standard */ #adqs_connect_agent-2 .connect-agents { background: #ffffff !important; border: none !important; box-shadow: none !important; padding: 0 !important; } /* Titel "Kontaktformular" (per JS eingefügt) */ .avvokado-connect-title { font-size: 13px !important; font-weight: 700 !important; color: var(--avv-brown) !important; border-bottom: 2px solid var(--avv-gold) !important; padding-bottom: 6px !important; margin-bottom: 14px !important; text-transform: uppercase; letter-spacing: 0.5px; display: block; } /* Inputs */ .connect-agents input[type="text"], .connect-agents input[type="email"], .connect-agents input[type="tel"], .connect-agents textarea { width: 100% !important; border-radius: 10px !important; border: 1px solid var(--avv-border) !important; background: #ffffff !important; color: var(--avv-text) !important; padding: 11px 13px !important; box-shadow: none !important; font-size: 14px !important; } /* Focus: Gold-Ring */ .connect-agents input[type="text"]:focus, .connect-agents input[type="email"]:focus, .connect-agents input[type="tel"]:focus, .connect-agents textarea:focus { outline: none !important; border-color: rgba(196,159,70,.75) !important; box-shadow: 0 0 0 3px rgba(196,159,70,.18) !important; } /* Submit-Button: Gold */ .connect-agents input[type="submit"], .connect-agents button[type="submit"] { width: 100% !important; border: 0 !important; border-radius: 12px !important; background: var(--avv-gold) !important; color: #111111 !important; font-weight: 700 !important; font-size: 14px !important; padding: 12px 16px !important; cursor: pointer !important; box-shadow: 0 6px 16px rgba(196,159,70,.28) !important; transition: filter 140ms ease, transform 140ms ease !important; } .connect-agents input[type="submit"]:hover, .connect-agents button[type="submit"]:hover { filter: brightness(.96) !important; transform: translateY(-1px) !important; } /* --------------------------------------------------------------- 4) Kategorien: als Badges wie in Bild 4 (Listing-Tags) --------------------------------------------------------------- */ /* Das Kategorien-Widget ist je nach Setup unterschiedlich. Wir stylen defensiv: - typische Widgets (.widget_categories, .widget, .adqs-widget) - Links in Listen als Badge-Pills */ .qsd-single_listing .widget_categories ul, .qsd-single_listing .widget ul, .qsd-single_listing .adqs-widget ul{ display: flex; flex-wrap: wrap; gap: 10px; padding-left: 0 !important; margin: 0 !important; list-style: none !important; } /* Einzelne Kategorien als Badge */ .qsd-single_listing .widget_categories ul li, .qsd-single_listing .widget ul li, .qsd-single_listing .adqs-widget ul li{ margin: 0 !important; padding: 0 !important; } /* Badge-Optik */ .qsd-single_listing .widget_categories ul li a, .qsd-single_listing .widget ul li a, .qsd-single_listing .adqs-widget ul li a{ display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(115,40,29,.18); background: rgba(115,40,29,.04); color: var(--avv-brown) !important; font-weight: 800; font-size: 13px; text-decoration: none !important; transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease; } .qsd-single_listing .widget_categories ul li a:hover, .qsd-single_listing .widget ul li a:hover, .qsd-single_listing .adqs-widget ul li a:hover{ background: rgba(115,40,29,.07); border-color: rgba(115,40,29,.26); box-shadow: var(--avv-shadow-sm); transform: translateY(-1px); } /* Wenn das Widget die Anzahl als Text in Klammern im Link hat, bleibt es gleich. Wenn es als kommt, machen wir daraus einen kleinen Chip. */ .qsd-single_listing .widget_categories ul li a .count, .qsd-single_listing .widget ul li a .count, .qsd-single_listing .adqs-widget ul li a .count{ display: inline-flex; align-items: center; justify-content: center; padding: 2px 8px; border-radius: 999px; background: rgba(196,159,70,.20); color: #111111; font-weight: 900; font-size: 12px; } /* Mobile: Badges bleiben gut klickbar */ @media (max-width: 640px){ .qsd-single_listing .widget_categories ul, .qsd-single_listing .widget ul, .qsd-single_listing .adqs-widget ul{ gap: 8px; } .qsd-single_listing .widget_categories ul li a, .qsd-single_listing .widget ul li a, .qsd-single_listing .adqs-widget ul li a{ padding: 9px 12px; font-size: 13px; } } /* =================================================================== Avvokado - Korrekturen UI (Lesbarkeit + Icon-Farben + Hover-Reset) Version: 1.0.3 (2026-01-05) Zweck: - Claim Button: Text wieder lesbar (normal und Hover) - Icons: in der Info-Liste und in Action-Buttons konsequent braun - Action-Buttons: Hover wieder wie vorher (kein ungewollter Hintergrundwechsel) - Keine Layout-Aenderungen, nur Lesbarkeit und Farben Brand-Farben: - Braun: #73281D - Gold: #C49F46 Changelog: - 1.0.3: - Claim Button Textfarbe und Kontrast erzwungen (inklusive Hover/Visited) - Action-Buttons Hover-Hintergrund auf weiss zurueckgesetzt (Design wie vorher) - Dashicons in Kontakt/Info-Sektionen auf Braun gesetzt - Linkfarben in Info-Sektionen stabilisiert (kein Blau) - 1.0.2: - Action-Leiste Feinschliff, Share ohne Blau, Kontaktformular und Kategorien-Badges - 1.0.1: - Basis-Block fuer Action-Leiste, Share-Popover, Claim-Form =================================================================== */ :root{ --avv-brown: #73281D; --avv-gold: #C49F46; --avv-text: #111111; --avv-border: rgba(17,17,17,.10); --avv-shadow-sm: 0 6px 18px rgba(17,17,17,.10); } /* --------------------------------------------------------------- 1) Claim Button: Text lesbar (normal + Hover + visited) --------------------------------------------------------------- */ .adqs-claim-listing-btn, .adqs-claim-listing-btn:visited{ color: #ffffff !important; } .adqs-claim-listing-btn:hover, .adqs-claim-listing-btn:focus, .adqs-claim-listing-btn:active{ color: #ffffff !important; } /* Manche Setups legen Text in ein inneres Element. Defensiv mitziehen. */ .adqs-claim-listing-btn *, .adqs-claim-listing-btn:hover *{ color: #ffffff !important; } /* Icon im Claim Button bleibt weiss */ .adqs-claim-listing-btn i.dashicons{ color: #ffffff !important; } /* --------------------------------------------------------------- 2) Action-Buttons: Hover wieder wie vorher (kein dunkler Text) --------------------------------------------------------------- */ /* Ihr Hinweis: "Design im 1. Abschnitt ist nicht mehr wie vorher" Ursache: Hintergrundwechsel bei Hover. Wir setzen das zurueck. */ .listing-grid-details-btn:hover{ background: #ffffff !important; /* Reset */ color: var(--avv-text) !important; border-color: rgba(17,17,17,.16) !important; box-shadow: var(--avv-shadow-sm) !important; transform: translateY(-1px); } /* View Count Badge: ebenfalls kein dunkler Text */ .qsd-meta-view-count:hover{ color: var(--avv-text) !important; } /* --------------------------------------------------------------- 3) Icons: in Kontakt/Info-Bloecken konsequent braun --------------------------------------------------------------- */ /* aDirectory nutzt in den Info-Zeilen meistens .qsd-has-icon i */ .qsd-single_listing .qsd-has-icon i, .qsd-single_listing .listing-grid-info i.dashicons, .qsd-single_listing .listing-grid-details-btn i.dashicons{ color: var(--avv-brown) !important; } /* --------------------------------------------------------------- 4) Links in Info-Bloecken: kein Blau, passend zum Design --------------------------------------------------------------- */ .qsd-single_listing .listing-grid-info a, .qsd-single_listing .listing-grid-info a:visited{ color: var(--avv-brown) !important; text-decoration: none; } .qsd-single_listing .listing-grid-info a:hover{ color: var(--avv-brown) !important; text-decoration: underline; } /* =================================================================== Avvokado - Korrektur: Claim-Text weiss + Spalten oben buendig Version: 1.0.4 (2026-01-05) Zweck: - Claim Button: Text immer weiss (auch ohne Hover) - Rechte Spalte: Box oben buendig mit linker Spalte (Header-Bereich) Changelog: - 1.0.4: - Claim Button Textfarbe hart auf weiss gesetzt (Normalzustand) - Margin/Offset in rechter Spalte reduziert, damit die obere Kante buendig ist =================================================================== */ :root{ --avv-brown: #73281D; } /* --------------------------------------------------------------- 1) Claim Button: Text IMMER weiss (Normalzustand) --------------------------------------------------------------- */ /* Wichtig: Einige Themes/Plugins ueberschreiben a-Styles im Normalzustand. Darum setzen wir explizit auch :link und :visited. */ .adqs-claim-listing-btn, .adqs-claim-listing-btn:link, .adqs-claim-listing-btn:visited{ color: #ffffff !important; } /* Falls der Text in einem inneren Element steckt */ .adqs-claim-listing-btn span, .adqs-claim-listing-btn strong, .adqs-claim-listing-btn em{ color: #ffffff !important; } /* Icon im Claim Button bleibt ebenfalls weiss */ .adqs-claim-listing-btn i.dashicons{ color: #ffffff !important; } /* --------------------------------------------------------------- 2) Rechte Spalte: Box oben buendig mit linker Spalte --------------------------------------------------------------- */ /* aDirectory/Divi erzeugt je nach Layout oben unterschiedliche Abstaende. Wir entfernen hier nur den "Top-Offset" der rechten Sidebar-Boxen, ohne die gesamte Grid-Struktur umzubauen. Falls Sie mehrere Widgets in der Sidebar haben, wirkt das auf alle. */ .qsd-single_listing .qsd-sidebar, .qsd-single_listing .listing-grid-sidebar, .qsd-single_listing .adqs-sidebar, .qsd-single_listing .qsd-right-sidebar{ margin-top: 0 !important; padding-top: 0 !important; } /* Haeufig ist es das erste Widget/Box, das einen zusaetzlichen Abstand hat */ .qsd-single_listing .qsd-sidebar > :first-child, .qsd-single_listing .listing-grid-sidebar > :first-child, .qsd-single_listing .adqs-sidebar > :first-child, .qsd-single_listing .qsd-right-sidebar > :first-child{ margin-top: 0 !important; } /* Und oft haben einzelne Boxen selbst einen oberen Abstand */ .qsd-single_listing .qsd-sidebar .widget, .qsd-single_listing .listing-grid-sidebar .widget, .qsd-single_listing .adqs-sidebar .widget{ margin-top: 0 !important; } /* ========================================================= * 14) Paginierung: CI-Farben (Braun/Gold statt Blau) * --------------------------------------------------------- * Zweck: * - adqs_post_pagination() gibt