/* ============================================================ MMHP Fremdbeleg AUTO BILD — Gegenüberstellung (ADR-055) ============================================================ Autarke, wrapper-NEUTRALE Komponente. Wird von scripts/assemble-dist.mjs in jede Seite eingebunden, die den Marker traegt (aktuell 8 Seiten: Mitnehmer-LP, Loesungsfinder, Umruestungs-LP, Blog-Longread, je DE + EN). WARUM EIGENE DATEI STATT CSS IN DEN SEITEN: Der Beleg sitzt auf VIER unterschiedlichen CSS-Basen — `.mmhp-lp-mitnehmer`, `.mmhp-lp-lf`, `.mmhp-lp-umruestung`, `.mmhp-blog-tdi`. Die alte Fassung lag deshalb 8x dupliziert in den Seiten. Bei 7 Zeilen faellt das nicht auf, bei ~60 laeuft es garantiert auseinander — genau die Fehlerklasse, gegen die ADR-055 gebaut wurde (ein Text, acht Stellen, sieben stimmen und eine nicht). Deshalb haengt hier NICHTS am Host-Wrapper: eigener Scope, eigenes Layout (nicht `.wrap`), Token mit Fallback. Vorbild: mmhp-tool-embed.css (ADR-029), aus demselben Grund entstanden. 🔴 WARUM JEDER SELEKTOR DOPPELT GEWICHTET IST (`.mmhp-beleg .x` bzw. `.mmhp-beleg.mmhp-beleg`): Die Host-Seiten setzen einen Reset `.mmhp-lp-xxx *{margin:0; padding:0}`. Der hat Spezifitaet 0,1,0 — exakt so viel wie ein einfacher Klassenselektor. Bei Gleichstand gewinnt die spaeter geladene Regel, und diese Reihenfolge ist nicht garantiert. GEMESSEN am 06.08.2026: Mit einfachen Klassen war das Innenmass `padding: 0px` statt 48px — der Beleg klebte am Seitenrand, auf dem Handy ohne jeden Abstand. Mit 0,2,0 gewinnt die Komponente immer. Kein `!important` noetig. **Beim Ergaenzen neuer Regeln die Doppelung mitnehmen, sonst frisst der Reset sie still.** KEIN JAVASCRIPT. Bewusst: Der Blickfang kommt vom hellen Blatt, nicht von Bewegung. Eine Einblende-Animation waere ein Bauteil mehr, das den Inhalt verstecken kann, wenn sie nicht feuert. ============================================================ 🔴 RECHTSGRENZEN — beim Aendern NICHT aufweichen (ADR-055, Klaerung mit Markus 06.08.2026): 1. KEIN ROT im gesamten Abschnitt. Weder Rahmen noch Flaeche noch Schrift. Rot ist AUTO BILDs Farbwelt; ausgerechnet am Kasten mit ihrem Namen liest das niemand als Zufall. Zweitens ist Rot auf diesen Seiten laengst mit "kaputt / Schaden" belegt (rotes X in Detail A der Mitnehmer-LP). Markus hat einen roten Rahmen ausdruecklich vorgeschlagen — die Absage ist begruendet und einvernehmlich. 2. KEIN Zeitschriften- oder Titelblatt-Look. Kein Heft, kein Cover, keine nachgebaute Artikelseite, keine Spalten- oder Kolumnentitel-Anmutung. Sobald der Kasten mit ihrem Namen wie ein Heft aussieht, liest man "so sieht AUTO BILD aus" — und genau diese Zuordnung ist der Vorwurf. Das helle Blatt ist der bewusst gewaehlte Ersatz: Papier gehoert niemandem, ein Titelblatt schon. 3. KEIN Logo, kein Screenshot, kein Vorschaubild von AUTO BILD. Nur der Name als Text, in Lexend, in MMHP-Farben. ============================================================ */ .mmhp-beleg.mmhp-beleg{ /* 06.08.2026 von 84 auf 64 px reduziert. Zusammen mit dem Abstand des Kauf-Knopfs darunter ergaben 84 px eine 204-px-Luecke — Markus' Befund „viel Abstand, sieht ungleichmaessig aus". Der Beleg gehoert mit Kennzahlen-Leiste und Kauf-Knopf zu EINER Gruppe (Zahlen → Beweis → Handlung); grosse Abstaende sollen erst NACH dieser Gruppe kommen. */ padding:clamp(36px,4.6vw,64px) 0; font-family:var(--f,'Lexend',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif); } /* Eigenes Layout statt .wrap — die Komponente muss auf allen vier Basen gleich sitzen, auch wenn eine davon `.wrap` anders definiert. */ .mmhp-beleg .mmhp-beleg-innen{ max-width:1120px;margin:0 auto; padding-left:clamp(20px,4vw,48px); padding-right:clamp(20px,4vw,48px); } /* AUSNAHME fuer die beiden Blog-Longreads: Dort steht der Beleg NICHT als eigener Abschnitt in voller Buehnenbreite, sondern mitten im Artikel — der umgebende Container liefert Breite und Seitenabstand bereits. Ohne diese Regel bekaeme der Beleg das Innenmass ein zweites Mal und stuende sichtbar schmaler als der Text darueber und darunter. Die Klasse sitzt an der Huelle IN der Seite (`
`), weil nur die Seite weiss, in welchem Container sie steht. */ .beleg--imfluss .mmhp-beleg.mmhp-beleg{padding:clamp(28px,4vw,44px) 0} .beleg--imfluss .mmhp-beleg .mmhp-beleg-innen{ max-width:none;padding-left:0;padding-right:0; } .mmhp-beleg .mmhp-beleg-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:clamp(14px,1.8vw,24px); align-items:stretch; } .mmhp-beleg .mmhp-beleg-marke{ display:block; font-size:10px;font-weight:500;letter-spacing:.2em; text-transform:uppercase;color:var(--tx3,rgba(255,255,255,.55)); } /* ------------------------------------------------------------ LINKS — unsere Seite. Dunkel, gruene CI-Kante, eigenes Logo. Der Text ist bewusst eine TECHNISCHE FESTSTELLUNG und kein Verkaufssatz: Neben der fremden Marke soll eine Diagnose stehen, kein Angebot. Das ist die rechtlich ruhigere Aufstellung — nicht nur eine Stilfrage. ------------------------------------------------------------ */ .mmhp-beleg .mmhp-beleg-wir{ display:flex;flex-direction:column; padding:clamp(22px,2.8vw,34px); border:1px solid rgba(199,255,63,.22); border-left:2px solid var(--green,#c7ff3f); background:rgba(199,255,63,.028); } .mmhp-beleg .mmhp-beleg-wir-text{ margin:16px 0 0; font-weight:600;font-size:clamp(17px,1.9vw,23px);line-height:1.4; letter-spacing:-.015em;color:var(--tx,#f0f0f0); } .mmhp-beleg .mmhp-beleg-wir-sub{ margin:14px 0 0;font-size:14px;line-height:1.65; color:var(--tx3,rgba(255,255,255,.55)); } /* Logo sitzt unten — die kuerzere Spalte fuellt ihre Hoehe damit sinnvoll */ .mmhp-beleg .mmhp-beleg-logo{margin-top:auto;padding-top:28px} .mmhp-beleg .mmhp-beleg-logo img{width:112px;height:auto;display:block;max-width:100%} .mmhp-beleg .mmhp-beleg-logo-lbl{ margin-top:12px;font-size:9.5px;font-weight:600;letter-spacing:.2em; text-transform:uppercase;color:var(--tx3,rgba(255,255,255,.55)); } /* ------------------------------------------------------------ RECHTS — die fremde Quelle als aufliegendes helles Blatt. MATERIAL statt Medium: wirkt wie ein fremdes Dokument auf der dunklen Seite, ohne ein bestimmtes Heft darzustellen. ------------------------------------------------------------ */ .mmhp-beleg .mmhp-beleg-quelle{ padding:clamp(22px,2.8vw,34px); background:#f2f1ee; border:1px solid rgba(0,0,0,.2); box-shadow:0 16px 38px rgba(0,0,0,.5); } .mmhp-beleg .mmhp-beleg-quelle .mmhp-beleg-marke{color:rgba(0,0,0,.52)} .mmhp-beleg .mmhp-beleg-name{ margin:14px 0 0; font-weight:700;font-size:clamp(30px,5.2vw,68px);line-height:.96; letter-spacing:.005em;color:#121211;white-space:nowrap; } .mmhp-beleg .mmhp-beleg-zitat{ margin:20px 0 0; font-weight:600;font-size:clamp(18px,2.1vw,26px);line-height:1.38; letter-spacing:-.018em;color:#121211; } .mmhp-beleg .mmhp-beleg-vor{ margin:18px 0 0;font-size:15px;line-height:1.7;color:rgba(0,0,0,.74); } .mmhp-beleg .mmhp-beleg-vor strong{color:#121211;font-weight:600} /* ⚠️ Das bringt eine eigene Textfarbe mit. Ohne diese Regeln ist das ZITAT auf dem hellen Blatt UNSICHTBAR — weiss auf Papier. Beim Bau des Mockups genau so passiert; die Messung am Absatz meldete "schwarz, alles gut", weil der sichtbare Text im Kind-Element steckt. Wer hier Farben aendert, muss diesen Selektor mitnehmen und am SICHTBAREN Textknoten gegenmessen, nicht am Elternabsatz. */ .mmhp-beleg .mmhp-beleg-quelle q{ quotes:"\201E" "\201C";font-style:normal;color:#121211; } /* Fundstelle als Messprotokoll — die Pruefbarkeit steht hier, nicht als Behauptung ("geprueft") im Kopf. */ .mmhp-beleg .mmhp-beleg-prot{ display:grid;grid-template-columns:1.55fr 1fr;gap:1px; margin:26px 0 0; background:rgba(0,0,0,.18);border:1px solid rgba(0,0,0,.18); } .mmhp-beleg .mmhp-beleg-prot > div{background:rgba(255,255,255,.62);padding:13px 15px} .mmhp-beleg .mmhp-beleg-prot dt{ font-size:9.5px;font-weight:600;letter-spacing:.2em; text-transform:uppercase;color:rgba(0,0,0,.52); } .mmhp-beleg .mmhp-beleg-prot dd{ margin:7px 0 0;font-size:12.5px;line-height:1.5;color:rgba(0,0,0,.78); } .mmhp-beleg .mmhp-beleg-prot a{ color:#121211;text-decoration:underline; text-decoration-color:rgba(0,0,0,.45);text-underline-offset:3px; transition:text-decoration-color .18s ease,color .18s ease; } .mmhp-beleg .mmhp-beleg-prot a:hover{color:#000;text-decoration-color:#121211} /* Der Fundstellen-Link ist das einzige Bedienelement des Abschnitts. Der Browser-Standardring ist auf hellem Grund schwach — wer mit der Tastatur navigiert, muss ihn finden. */ .mmhp-beleg .mmhp-beleg-prot a:focus-visible{outline:2px solid #121211;outline-offset:3px} /* Tabellenziffern, wo Zahlen nebeneinander stehen */ .mmhp-beleg .num{font-variant-numeric:tabular-nums} /* ------------------------------------------------------------ HANDY ------------------------------------------------------------ */ @media (max-width:760px){ .mmhp-beleg .mmhp-beleg-grid{grid-template-columns:1fr} .mmhp-beleg .mmhp-beleg-name{white-space:normal;font-size:clamp(28px,9vw,44px)} .mmhp-beleg .mmhp-beleg-prot{grid-template-columns:1fr} .mmhp-beleg .mmhp-beleg-logo{padding-top:22px} }