/* brand.css — FondPaws / BounceBack. * Wird als ERSTES Stylesheet im geladen (vor dem Parser-Schnitt, siehe * Kit-Regel carousel-boot). Definiert die Hausschrift der Vorlage auf UNSERE * Datei um: der Familienname bleibt, damit kein einziges Theme-Stylesheet * angefasst werden muss — die Buchstaben werden trotzdem unsere. */ @font-face { font-family: "FunnelDisplay"; src: url("jost-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; } @font-face { font-family: "FunnelSans"; src: url("jost-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; } @font-face { font-family: "Assistant"; src: url("jost-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; } :root { --bb-amber-500: #B4472B; --bb-ink-900: #241F1C; --bb-ink-700: #3A322D; --bb-ink-500: #6B5F57; --bb-paper: #FBF6EF; --bb-line: #E8DCCB; --font-body-family: "Jost", "FunnelSans", system-ui, sans-serif; --font-heading-family: "Jost", "FunnelDisplay", system-ui, sans-serif; } /* Zahlen und Preise wirken in einer Grotesk schnell beliebig. Tabellenziffern * halten die Preiskarten in einer Flucht — der Unterschied ist klein und genau * deshalb der, an dem "billig" oder "gebaut" entschieden wird. */ .re-sub-widget__variant-card, .price, [class*="price"] { font-variant-numeric: tabular-nums; } /* Der Fokus-Ring der Vorlage war ihr Blau. Ein sichtbarer Fokus ist Pflicht, * also bekommt er unsere Farbe statt zu verschwinden. */ :focus-visible { outline: 2px solid #B4472B; outline-offset: 2px; } /* =================================================================== * PRE-LANDER-EIGENE REPARATUREN, gemessen 04.08.2026 an * https://klon-test.srv1214478.hstgr.cloud/weight/ (393/430/768/1440). * Alles darueber ist der gemeinsame Marken-Kern mit der PDP — Zeile fuer * Zeile identisch. Alles darunter gilt NUR hier. * =================================================================== */ /* 1 · DER WERBEHINWEIS WAR UNSICHTBAR — wichtigster Befund dieser Seite. * Gemessen:

/ "THIS IS AN ADVERTORIAL AND NOT AN ACTUAL NEWS * ARTICLE." trugen rgb(36,31,28) auf rgb(36,31,28) — Kontrast 1:1. * Im Markup ist die Absicht richtig: die Box traegt * `style="background-color: #241F1C"`, der Wrapper darin inline * `style="color: #FBF6EF"`. Verloren geht sie an `marke.css:154` * (`h1 ~ [class*="text-[16px]"] { color: var(--m-ink) !important }`): * eine Inline-Farbe OHNE !important verliert gegen eine Regel MIT. * `marke.css:147` deckt die Terrakotta-Flaeche mit genau diesem Muster * bereits ab (`[style*="background-color: #B4472B"] * { color:#fff }`) — * fuer die Ink-Flaeche fehlte das Gegenstueck. * Spezifitaet: `[style*=…] [class*="text-"]` = (0,2,0) und schlaegt damit * marke.css (0,1,1); ueber die Quellreihenfolge allein wuerde brand.css * verlieren, weil es ZUERST laedt. * Warum das mehr als Kosmetik ist: eine Werbekennzeichnung, die niemand * lesen kann, ist keine. Bei US-Traffic ist das FTC-Gebiet, nicht Design. * * ERSTE FASSUNG GRIFF NUR DEN WRAPPER — nachgemessen mit * CSS.getMatchedStylesForNode: der Wrapper wurde hell, das

darin blieb * dunkel. Grund ist keine Spezifitaetsfrage, sondern eine Rangfrage: das

* wird von `p, li, td, dd, [class*="description"] … { color: var(--m-ink) * !important }` DIREKT getroffen, und ein direkt gesetzter Wert schlaegt jeden * geerbten — egal wie spezifisch der Vorfahr ist. Die Regel muss die * Textknoten also selbst treffen. * `:not([class*="bg-"]):not([style*="background"])` nimmt aus, was eine EIGENE * Flaeche mitbringt (Knoepfe, Badges) — sonst bekaeme ein heller Knopf auf der * dunklen Box helle Schrift und waere seinerseits unlesbar. Genau dieses * Muster benutzt marke.css:226 bereits fuer die Terrakotta-Flaeche. */ [style*="background-color: #241F1C"] :is(p,strong,em,span,li,a,h1,h2,h3,h4,h5):not([class*="bg-"]):not([style*="background"]), [style*="background-color: #241f1c"] :is(p,strong,em,span,li,a,h1,h2,h3,h4,h5):not([class*="bg-"]):not([style*="background"]), [style*="background-color: #241F1C"] [class*="text-"], [style*="background-color: #241f1c"] [class*="text-"] { color: var(--bb-paper) !important; } /* 2 · UEBERLAUF BEI 768 px. Gemessen: scrollWidth 779. * Taeter `a.new-button--secondary.!text-[24px]` in `div.w-full.md:w-fit`: * Knopf x=555 Breite 225 (fit-content: 24px Schrift + 2x32px Polster) * Eltern Breite 205 (grid-cols-3, gap-8 -> (728-64)/3, minus Polster) * `w-fit` fragt nicht, wie viel Platz da ist — fit-content ueberschreibt die * Spalte, 555 + 225 = 780. Ein Deckel loest das ohne die Schrift anzutasten; * `white-space` ist `normal`, der Text darf also umbrechen. * NICHT verwechselt mit dem 768er-Fall der PDP: dort war `md:min-w-[500px]` * die Ursache — diese Klasse kommt hier 0x vor (nachgezaehlt). Gleiche * Bauform, andere Wurzel; deshalb auch ein anderer Fix. */ .md\:w-fit { max-width: 100% !important; } /* 3 · MARKEN-DESIGN DER PDP, aber NUR was hier wirklich vorkommt. * Nachgezaehlt im index.html dieser Seite: * #menu-drawer 23 · .country-selector 10 · .scroll-trigger 6 * .md\:min-w-\[500px\] 0 · .tabs-heading 0 · .dropdown-heading 0 * Die drei mit 0 Treffern wurden BEWUSST NICHT uebernommen: eine Regel ohne * Element ist ein totes Versprechen, das beim naechsten Umbau ueberrascht. * Ebenfalls NICHT uebernommen: der Header-Rand-Block der PDP * (@361-767px, negative Raender). Gemessen: `header-drawer`, * `.header__icon--cart` und `summary.header__icon--menu` haben auf DIESER * Seite auf allen vier Breiten Breite 0 — es gibt keinen Ueberhang zu * korrigieren. Der Block waere reine Zierde. */ #menu-drawer, #menu-drawer a, #menu-drawer span, #menu-drawer summary, #menu-drawer .menu-drawer__menu-item, #menu-drawer .menu-drawer__account, .country-selector span.country, .country-selector a, .country-selector .disclosure__link { color: var(--bb-paper) !important; } #menu-drawer input, #menu-drawer input::placeholder, #menu-drawer .field__label { color: var(--bb-ink-900) !important; } /* Wie in der PDP: das Theme staffelt Einblendungen ueber * `calc(var(--animation-order) * …)` und setzt die Variable je Element als * style-Attribut. Wo sie fehlt, ist die calc() ungueltig und die Zeile tot. * Ein Grundwert macht sie gueltig; Elemente mit eigenem Wert behalten ihre * Staffelung, weil ein style-Attribut jede Regel schlaegt. */ .scroll-trigger { --animation-order: 0; }