/* ============================================================================ HOMES & FLOORS — TRUST-LEISTE AUF DEM TELEFON Entwurf "Trust Strip Mobile.dc.html", aus der Quelle gelesen. 2026-08-31, v1.11.66 ---------------------------------------------------------------------------- DIES ERSETZT MEINE ERSTE FASSUNG aus 1.11.64. Die stand auf navy Grund, blendete die Unterzeile ganz aus und setzte die Sterne UEBER den Titel. Der Entwurf lag danach vor und sagt etwas anderes -- keine Abwandlung, sondern eine andere Anordnung: Grund Verlauf #ffffff -> #fafbfc, unten 1px #e6e9ee Polster 13px 10px, Gitter max 430px, drei gleiche Spalten Feld Spalte, mittig, Abstand 5px, Polster 2px 8px, Trenner links (nicht vor dem ersten) Symbol 26px KREIS, Ring 1px und Schatten, darin 13px Grafik Titel 11,5px/600, Sperrung 0,2px, darin der Wert in Gruen Sterne 8,5px, Sperrung 1,4px -- UNTER dem Titel Unterzeile 8,5px, Sperrung 1px, Grossbuchstaben -- NUR im dritten Feld NUR AUF DEM TELEFON. Der Entwurf heisst "Trust Strip Mobile"; auf dem Desktop bleibt die Leiste navy, wie sie 1.11.50/51 beschlossen wurde. Das ist eine bewusste Trennung und keine Unachtsamkeit: unter 768px steht die Leiste direkt unter einem dunklen Hero, und ein heller Streifen setzt dort eine Zaesur, die auf dem breiten Schirm nicht gebraucht wird. ZWEI ABWEICHUNGEN VOM ENTWURF, beide wegen Kontrast auf hellem Grund: 1. GRUEN. Der Entwurf nimmt #16a34a fuer Wert und Sterne. Gegen Weiss sind das rund 3,4:1 -- unter den 4,5:1 aus WCAG 1.4.3, und es geht hier um eine Bewertungszahl, also um Inhalt und nicht um Zierrat. Benutzt wird --hfh-success #15803D, rund 5,9:1. Auf dem dunklen Grund der Tab-Leiste war die Rechnung umgekehrt, dort steht --hfh-champagne-deep. 2. GRAU DER UNTERZEILE. Der Entwurf nimmt #8a93a0, rund 3,2:1. Bei 8,5px Grossbuchstaben ist das zu wenig. Hier steht #55606e, rund 5,9:1. DIE ZAHLEN kommen unveraendert aus hf_seo_trust_ratings() und hf_seo_owner_orders(). Der Entwurf zeigt 4.8 und 4.9; belegt sind 4.6 und 4.9. Uebernommen wird die Anordnung, nicht die Zahl. ========================================================================== */ @media (max-width:767px){ /* --- Die Leiste -------------------------------------------------------- */ /* Gegen .hfv2-page .hfv2-htrust (0-3-0) aus hf-design-system.css hilft nur ein spezifischerer Selektor -- html davor macht 0-3-1. Kein !important; die Datei bleibt dadurch rueckbaubar: loeschen, und navy ist zurueck. */ html .hfv2-page .hfv2-htrust{ background:linear-gradient(180deg,#ffffff 0%,#fafbfc 100%); border-bottom:1px solid #e6e9ee; box-shadow:inset 0 1px 0 rgba(255,255,255,.8); padding:13px 10px; color:#122B4C; } html .hfv2-page .hfv2-htrust .hfv2-wrap{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; max-width:430px; margin:0 auto; align-items:stretch; } /* --- Ein Feld ---------------------------------------------------------- */ html .hfv2-page .hfv2-htrust .hfv2-hti{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:5px; padding:2px 8px; min-width:0; color:#122B4C; border-left:1px solid #eef0f3; text-decoration:none; } html .hfv2-page .hfv2-htrust .hfv2-hti:first-child{border-left:0} /* --- Das Symbol im Kreis ----------------------------------------------- */ html .hfv2-page .hfv2-htrust .hfv2-hti__ic{ width:26px;height:26px; flex:0 0 26px; display:flex;align-items:center;justify-content:center; margin:0; background:#ffffff; border:0; border-radius:50%; box-shadow:0 0 0 1px rgba(15,30,51,.07),0 3px 8px rgba(15,30,51,.10); overflow:hidden; } html .hfv2-page .hfv2-htrust .hfv2-hti__ic svg, html .hfv2-page .hfv2-htrust .hfv2-hti__ic img{ width:13px;height:13px; display:block; } /* Das dritte Feld traegt im Entwurf einen gruenen Hauch hinter dem Schild, die beiden Plattformzeichen stehen auf Weiss. */ html .hfv2-page .hfv2-htrust .hfv2-hti--orders .hfv2-hti__ic{ background:rgba(21,128,61,.12); } html .hfv2-page .hfv2-htrust .hfv2-hti--orders .hfv2-hti__ic svg{ stroke:#15803D;fill:none; } /* --- Titel, Wert, Sterne ----------------------------------------------- */ html .hfv2-page .hfv2-htrust .hfv2-hti > span:last-child{ display:flex; flex-direction:column; align-items:center; gap:5px; min-width:0; } /* Im Markup stehen Titeltext, Sterne und Wert als Geschwister IM . Der Entwurf will "Titel Wert" auf einer Zeile und die Sterne darunter -- also muss der Wert vor die Sterne und die Sterne auf eine volle Zeile. `order` schiebt sie im Flexfluss, ohne die Markup-Reihenfolge anzufassen: ein Screenreader liest weiter Name, Sterne, Wert. */ html .hfv2-page .hfv2-htrust .hfv2-hti b{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; column-gap:4px;row-gap:5px; font-size:11.5px; font-weight:600; letter-spacing:.2px; line-height:1.2; color:#122B4C; } html .hfv2-page .hfv2-htrust .hfv2-hti__sc{ order:1; font-size:11.5px; font-weight:600; color:#15803D; /* s. Kopf: nicht #16a34a, Kontrast */ } html .hfv2-page .hfv2-htrust .hfv2-hti__st{ order:2; flex:0 0 100%; display:flex; justify-content:center; font-size:8.5px; letter-spacing:1.4px; line-height:1; color:#15803D; } /* Der Bestand faerbt leere Sterne blass. Auf hellem Grund braucht das einen eigenen Wert, sonst verschwinden sie ganz. */ html .hfv2-page .hfv2-htrust .hfv2-hti__s{color:#15803D} html .hfv2-page .hfv2-htrust .hfv2-hti__s:not(.on){color:rgba(21,128,61,.28)} /* --- Die Unterzeile ----------------------------------------------------- */ /* Der Entwurf zeigt sie NUR im dritten Feld; bei den beiden Bewertungen stehen dort die Sterne. Ausgeblendet, nicht entfernt -- der Text bleibt im Markup und wird weiter vorgelesen. */ html .hfv2-page .hfv2-htrust .hfv2-hti small{ display:none; } /* SPERRUNG .4px STATT DER 1px DES ENTWURFS -- gemessen, nicht geschaetzt. Der Entwurf ist 430px breit, dort ist eine Spalte 143px. Auf einem 375er Geraet sind es 118px, nach Abzug der Polster bleiben 102px. Im Browser nachgemessen, was "Trusted UK supplier" bei 8,5px braucht: Sperrung 1,0px -> 110px bricht um Sperrung 0,8px -> 106px bricht um Sperrung 0,6px -> 102px auf Kante Sperrung 0,4px -> 98px passt Auf 8,5px ist der Unterschied kaum zu sehen, der Umbruch dagegen sofort. white-space:nowrap steht bewusst NICHT dabei: auf einem noch schmaleren Geraet ist eine zweite Zeile besser als abgeschnittener Text. Nebenbei: mein erster Messwert war falsch. getClientRects().length liefert bei einem Block-Element 1, auch wenn der Text darin umbricht -- verlaesslich war erst der Breitenvergleich. */ html .hfv2-page .hfv2-htrust .hfv2-hti--orders small{ display:block; font-size:8.5px; letter-spacing:.4px; line-height:1.25; text-transform:uppercase; color:#55606e; /* s. Kopf: nicht #8a93a0, Kontrast */ margin:0; } }