/* community-rating.css - Community Werte Rating Styles */ /* Modal */ .werte-modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; } .werte-modal.active { display: flex; align-items: center; justify-content: center; } .werte-modal-backdrop { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); } .werte-modal-content { position: relative; background: var(--card); color: var(--text); border-radius: var(--radius-xl); max-width: 800px; max-height: 90vh; max-height: 90dvh; width: 90%; padding: 2rem; overflow-y: auto; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); } /* Sitzt links neben dem X, siehe attachCompactProblemReportButton * (community-rating.js) - .pr-trigger-compact ist von Haus aus statisch * positioniert (fuer Header-Kopfzeilen anderer Overlays gedacht), hier * absolut wie das X selbst. */ .werte-modal-content .pr-trigger-compact { position: absolute; top: 1rem; right: calc(1rem + 44px + 8px); } .werte-modal-close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; font-size: 2rem; cursor: pointer; color: var(--text-muted); line-height: 1; padding: 0; width: 44px; height: 44px; } /* Fund vom 28.09.2026 (Screenshot bei 360 px, waehrend Meldung 186 geprueft * wurde): Schliessen- und Melde-Knopf sitzen absolut oben rechts (top: 1rem, * 44px hoch - reichen also bis 1rem+44px = 60px von der Modal-Kante). Der * Modal-Body beginnt sonst direkt am Content-Padding (2rem = 32px) - der * erste sichtbare Block (Community-Bewertungen-Ueberschrift ODER der * "Noch keine Community-Bewertungen"-Kasten) ragt damit 28 px in die * Knopf-Flaeche hinein. Gemessen: `.werte-modal-close` reichte bis y=89, * der Kasten begann bei y=57 - echte Ueberlappung, kein Fehlalarm. Der * zusaetzliche Abstand raeumt exakt diese Zone frei, unabhaengig davon, ob * der erste Block eine Ueberschrift oder der Leerzustands-Kasten ist. */ /* Dasselbe fuer die Community-Einschaetzung (#einschaetzen-koerper): Ihr Titel lag unter dem Schliessen-Knopf (gemessen 07.10.2026: Knopf 300-344 px, Titel bis 340 px bei 360 px Breite; bei 1280 px ebenso) - beim Live-Gang (Etappe 7) gefunden, als die Ueberdeckungs-Pruefung auf den neuen Dialog umgestellt wurde. */ #werte-modal-body, #einschaetzen-koerper { margin-top: calc(60px - 2rem + var(--space-8)); } /* Rating Container */ /* Sternauswahl: im JS unstyled generiert (reines Emoji-Text), deshalb hier Touch-Zielgröße und Umbruch sicherstellen - sonst quetschen sich 11 Buttons (0 bis 5 in 0.5er-Schritten) bei 360px in eine Zeile. */ /* ── Segmented Control: 3 Tabs (Produkt/Marke/Konzern) statt gestapelter Panels - Workstream D Redesign. role=tablist/tab/tabpanel Pattern. ── */ /* ── 5-Stern-Widget mit Halb-Stern-Klickzonen (0.5er-Schritte) ── */ /* ── 3-Spalten-Breakdown-Grid (Produkt/Marke/Konzern) - gemeinsames Markup aus werte-breakdown-grid.js, hier UND in der aufgeklappten Produktkarte (product-suggestions-breakdown.css) genutzt. ── */ /* Der konkrete Name unter der Ebene (Meldung 128). Bei 360 px ist eine Spalte rund 100 px breit - ein Produktname wie "Bio-Haferdrink Barista Edition ungesuesst" passt dort nicht in eine Zeile und darf die Karte auch nicht aufreissen. Deshalb Umbruch an jeder Stelle und hart bei zwei Zeilen gekappt; der vollstaendige Name steht im title-Attribut. */ /* Bei sehr schmalen Screens reicht das Standard-Padding nicht: 2rem auf jeder Seite ließ bei 360px kaum noch nutzbare Breite für Formularfelder übrig. */ @media (max-width: 480px) { .werte-modal-content { width: 100%; padding: 1.25rem; } /* #werte-modal-body's margin-top oben rechnet mit dem STANDARD-Padding (2rem) - hier ist es nur 1.25rem (20px statt 32px). Ohne diese Zeile ragte der Leerzustands-Kasten bei genau der Breite, in der der Fund gemessen wurde (360 px), weiterhin 4 px in den Schliessen-Knopf hinein (gemessen: Kasten begann bei y=101, Knopf reichte bis y=105). */ #werte-modal-body, #einschaetzen-koerper { margin-top: calc(60px - 1.25rem + var(--space-8)); } } /* Hover-Effekte nur für echte Zeigegeräte: auf Touch bleibt der Hover-Zustand nach dem Tap kleben, bis woanders hingetippt wird. */ @media (hover: hover) and (pointer: fine) { .werte-modal-close:hover { color: var(--text); } } /* ── Tab-Kopf und -Unterzeile (Entwurf NachherBewerten.dc.html) ── Jeder Tab traegt unter dem Namen, wie viele Bewertungen es auf dieser Ebene gibt und ihren Durchschnitt. Ohne diese Zeile sieht man erst nach dem Wechsel, ob dort ueberhaupt schon etwas vorliegt - und genau das leitet die Wahl der Ebene. */ /* Hinweis auf die halben Sterne - ohne ihn ist die Funktion nicht auffindbar, weil zwei Halbflaechen wie ein Stern aussehen. */ /* Der Abruf der Community-Bewertungen ist gescheitert (Fresh-Eyes 15.09.2026). Eigene Klasse statt der geliehenen .werte-source-note: Die steht in product-suggestions-badges.css, das community.html und product.html gar nicht laden - der Satz haette dort ohne jede Regel dagestanden. Genau das hat der shared-module-css-guard gemeldet. community-rating.css laedt jede Seite, auf der community-rating.js laeuft. */ /* Der Hinweis "Noch keine Community-Bewertungen fuer " samt Knopf (community-rating.js, `.werte-score.not-rated`). Gefunden vom Visual-Audit am 22.09.2026 - und zwar ERST, seit die e2e-Datenbank deterministisch gefuellt wird: Der Block erscheint nur, wenn die Seite ueberhaupt eine Marke zeigt, und bis dahin lief jeder Audit gegen eine leere Seite. Gemessen war der Zustand eindeutig: `.js-einschaetzen` 2x im Dokument, und weder fuer den Knopf noch fuer `.werte-score` oder `.not-rated` gab es irgendeine Regel - der Knopf stand also in der Standardoptik des jeweiligen Betriebssystems. min-height nach dem Vorbild von .rating-report-btn oben: 36 px liegt ueber den 24 px, die WCAG 2.5.8 (AA) fuer ein Bedienelement verlangt. */ /* Der Text darf schrumpfen, damit der Knopf bei 360 px in die naechste Zeile rutscht statt ihn aus dem Kasten zu druecken. */ /* Bewusst NUR innerhalb des Leerzustands-Kastens, nicht auf `.js-einschaetzen` allein: Dieselbe Klasse trug frueher auch das Werte-ABZEICHEN der Produktkarte (`