/*! HPN Faktenbox Gehört zu snippets/hpn-faktenbox.liquid, eingebaut als Block "Faktenbox" in sections/main-product.liquid. Zeigt die Kernzahlen einer Tagesportion oben in der Buy Box, damit der Grund für den Kauf vor dem Preis steht und nicht erst in der Volldeklaration weiter unten. QUELLE DER WAHRHEIT IST DIE PAPER-DATEI, nicht dieses Stylesheet und nicht mein Urteil: Datei "Webseite Analyse 25.07.26" Artboard "HPN Button-Lack — Diagnose & Varianten" Frame "Buy-Box" > "Karte 1x", 356 Pixel breit Alle Maße, Schriftgrößen, Laufweiten und Farben unten sind dort per MCP ausgelesen, nicht geschätzt und nicht aus einem Screenshot abgemalt. ───────────────────────────────────────────────────────────────────────── WAS AUS TOKEN KOMMT UND WAS NICHT, mit Begründung je Zeile. Diese Liste ist die Antwort auf die Frage, ob hier Variablen-Salat entsteht. Aus Token, weil das Theme den Wert führt und er mitwandern soll: Kopfleiste --hpn-ton, --hpn-lack, --hpn-text. Der Verlauf im Entwurf IST der Buttonverlauf des Theme, dieselben drei Stopps #1B2B4D, #16233F, #121D35. Textfarben --color-foreground für alles in voller Stärke, im Shop #121D35, genau der Wert im Entwurf. Kopf rechts --color-base-button-text bei 0.62, im Entwurf #FFFFFF9E. Fläche --color-background. Linie --color-border. Das Theme definiert es als --color-foreground / 0.1, das ergibt rgb(18 29 53 / 0.1), genau der Wert im Entwurf. Schatten --color-shadow. Die Theme-Einstellung color_shadow ist #0D1626, genau die Schattenfarbe im Entwurf. Nur die zwei Deckungsgrade und die Streuung stehen als Zahl da, dazu unten mehr. Abstände --sp-*. Die Wurzel-Schriftgröße wird im Theme nicht verstellt, also ist 1rem gleich 16px und die Token treffen die Entwurfswerte exakt: --sp-4 = 16px, --sp-5d5 = 22px, --sp-4d5 = 18px, --sp-3d5 = 14px, --sp-3 = 12px, --sp-2 = 8px, --sp-1d5 = 6px, --sp-1 = 4px, --sp-0d5 = 2px. Schnitte --font-bold, --font-medium, --font-normal. NICHT aus Token, jeweils weil es kein passendes gibt: Schriftgrößen 54, 22, 19, 12, 11, 10, 9.5, 8.5px. Die --text-Token hängen am Regler "Schriftgröße Fließtext" und haben eine Untergrenze von 11px. Die Karte ist ein typografisch abgestimmtes Bauteil, 54 zu 22 zu 11 zu 12 sind gesetzte Verhältnisse. Über Token gerechnet würden sie sich verschieben. Zeilenhöhen 47, 26, 20, 16, 14, 13, 12px, aus dem Entwurf. 11px und 3px Polsterung der Kopf- und Fußzeile und der Abstand von Zahl zu Einheit. Dafür gibt es keinen --sp-Wert, die Skala geht in 2er-Schritten. Radius 8px Das Theme kennt --buttons-radius mit 6px (Einstellung round-slight, gilt auch für die Fakten-Pillen unter der Karte) und --card-radius mit clamp(10px, 1.053vw, 20px) (Einstellung round). Der Entwurf liegt mit 8px dazwischen. --card-radius bewusst nicht: der wächst mit der Fensterbreite, und eine Karte in einer festen Spalte soll das nicht. Streuung und Das Theme führt für Schatten nur Versatz und Deckung als Deckung des Token (--card-shadow-*), keine Streuung. Der Entwurf Schattens braucht zwei Lagen mit 2px und 28px Streuung, das lässt sich damit nicht ausdrücken. Nebenbei: card_shadow_opacity steht im Shop auf 0, die Theme-Karten haben also gar keinen Schatten, deshalb muss dieser hier explizit sein. Drei Grautöne #3A465C, #5A6B7D, #4E6478. Nachgerechnet sind das KEINE Deckungsgrade von #121D35 auf Weiß, sie liegen in Grün und Blau um 3 bis 14 Stufen höher, also blauer. Gesetzte Werte aus dem Entwurf. Wer die Textfarbe des Shops ändert, muss diese drei bewusst nachziehen. Kontraste gegen Weiß: 9.5, 5.5 und 6.1 zu 1. ───────────────────────────────────────────────────────────────────────── ZUM SCHATTEN, weil ich das schon einmal falsch behauptet habe: in assets/theme.css steht bei den Fakten-Pillen der Satz, die weite Abhebung 0 10px 24px bleibe dem Button vorbehalten. Der gilt weiter und er gilt für die Pillen: kleine Flächen tragen sie nicht, und eine Pille ist nicht klickbar. Ich hatte ihn auf diese Karte übertragen, und dafür war er nie gedacht. Der Entwurf trägt den Schatten, und die Karte ist keine Pille. Die Werte sind auch andere: der Button liegt bei 0.4 und 0.32 Deckung auf dunklem Grund, diese Karte bei 0.05 und 0.11 auf Weiß. */.hpn-faktenbox{--fb-schatten-eng: rgb(var(--color-shadow)/ .05);--fb-schatten-weit: rgb(var(--color-shadow)/ .11);--fb-grau-name: #3a465c;--fb-grau-text: #5a6b7d;--fb-grau-label: #4e6478;border-radius:8px;background:rgb(var(--color-background));box-shadow:0 1px 2px var(--fb-schatten-eng),0 10px 28px var(--fb-schatten-weit);overflow:hidden}/*! Kopfleiste. Trägt die Bezugsmenge, also auf welche Portion sich alle Zahlen darunter beziehen. */.hpn-faktenbox__kopf{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3);align-items:center;justify-content:space-between;padding:11px var(--sp-4);background-color:var(--hpn-ton);background-image:var(--hpn-lack);color:var(--hpn-text);font-size:10px;font-weight:var(--font-medium);line-height:13px;letter-spacing:.18em;text-transform:uppercase}.hpn-faktenbox__kopf-rechts{color:rgb(var(--color-base-button-text)/ .62)}/*! Der Hero ist ZENTRIERT. Das ist der Entwurf, und es ist die Stelle, an der ich mich am weitesten davon entfernt hatte: ich hatte die ganze Karte linksbündig gesetzt, mit dem Argument, die Buy Box daneben sei linksbündig. Der Entwurf setzt die große Zahl bewusst mittig, und die Karte hat als eigene Fläche mit eigener Kante das Recht auf ihre eigene Achse. */.hpn-faktenbox__hero{display:flex;flex-direction:column;align-items:center;margin:0;padding:var(--sp-5d5) var(--sp-4) var(--sp-4);text-align:center}/*! Zahl und Einheit auf einer Grundlinie, 3px Abstand aus dem Entwurf. Der Abstand steht als gap und nicht als Leerzeichen, weil beide Teile in verschiedenen Größen laufen. Umbrechen können sie nicht, es ist flex. */.hpn-faktenbox__hero-wert{display:flex;align-items:baseline;gap:3px;font-size:54px;font-weight:var(--font-bold);line-height:47px;letter-spacing:-.045em;color:rgb(var(--color-foreground));font-variant-numeric:tabular-nums}.hpn-faktenbox__hero-wert .hpn-faktenbox__einheit{font-size:22px;font-weight:var(--font-medium);line-height:26px;letter-spacing:-.02em}.hpn-faktenbox__hero-name{margin-top:var(--sp-2);font-size:11px;font-weight:var(--font-medium);line-height:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--fb-grau-name)}.hpn-faktenbox__hero-zusatz{margin-top:var(--sp-1d5);font-size:12px;font-weight:var(--font-normal);line-height:16px;color:var(--fb-grau-text)}/*! Die Wertereihe. Der Entwurf hat drei feste Spalten von 108px in einer 356px breiten Karte, das füllt die 324px Innenbreite genau aus. Hier stehen stattdessen gleiche Bruchteile (1fr). Grund: die Buy Box ist nicht immer 356px breit, auf dem Desktop wird sie über 500px. Feste 108px würden dort rechts ein Loch lassen. Bei 356px ist 1fr rechnerisch genau 108px, also identisch mit dem Entwurf, und darüber wächst die Spur gleichmäßig mit. Die Spaltenzahl schreibt das Snippet in --hpn-fb-spalten: zwei Werte zweispaltig, drei dreispaltig, vier ergeben zwei mal zwei. list-style und margin stehen hier bewusst NICHT: theme.css setzt für menu, ol, ul bereits list-style: none, margin: 0 und padding: 0. Nur die Polsterung wird überschrieben. */.hpn-faktenbox__werte{display:grid;grid-template-columns:repeat(var(--hpn-fb-spalten, 3),1fr);gap:var(--sp-3d5) 0;padding:0 var(--sp-4) var(--sp-4d5)}.hpn-faktenbox__wert{display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);text-align:center}.hpn-faktenbox__wert-zahl{display:flex;align-items:baseline;gap:var(--sp-0d5);font-size:19px;font-weight:var(--font-medium);line-height:20px;letter-spacing:-.025em;color:rgb(var(--color-foreground));font-variant-numeric:tabular-nums}/*! Die Einheit der Reihe ist im Entwurf nicht nur kleiner, sondern auch grauer als ihre Zahl. Im Hero sind Zahl und Einheit gleich dunkel. */.hpn-faktenbox__wert-zahl .hpn-faktenbox__einheit{font-size:10px;font-weight:var(--font-medium);line-height:13px;letter-spacing:0;color:var(--fb-grau-text)}.hpn-faktenbox__wert-name{font-size:9.5px;font-weight:var(--font-medium);line-height:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--fb-grau-label)}.hpn-faktenbox__wert-zusatz{font-size:9.5px;font-weight:var(--font-normal);line-height:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--fb-grau-text)}/*! Fußzeile. Die Linie liegt im Entwurf innen, also mit 16px Rand links und rechts, nicht über die ganze Kartenbreite. Deshalb margin statt padding. */.hpn-faktenbox__fuss{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3);align-items:baseline;justify-content:space-between;margin:0 var(--sp-4);padding:11px 0 var(--sp-3d5);border-top:1px solid rgb(var(--color-border));font-size:8.5px;font-weight:var(--font-medium);line-height:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--fb-grau-label)}/*! Die rechte Angabe ist die Aussage, nicht eine zweite Fußnote, und steht im Entwurf deshalb in voller Textfarbe statt im Grau der linken. Im echten Buy-Box-Maß passen die zwei Angaben nicht immer nebeneinander, dann stapeln sie linksbündig statt die Zeile zu kippen. */.hpn-faktenbox__fuss-rechts{color:rgb(var(--color-foreground))}/*! Das ® im Entwurf läuft in der Textgröße mit, hier wird es hochgestellt, sonst drückt es die Zeile auseinander. WICHTIG, hier lag ein echter Fehler: theme.css hebt sup NICHT über vertical-align, sondern über position: relative und inset-block-start: -0.5em. Ich hatte zusätzlich ein vertical-align gesetzt, und dann heben beide Mechanismen gleichzeitig. Deshalb schwebte das Zeichen neben dem Wort statt daran. Richtig ist, den bestehenden Wert zu korrigieren, nicht einen zweiten daneben zu stellen. letter-spacing 0 und der negative Rand fangen die Laufweite der Zeile ab, sonst liest sich "EPAX®" als "EPAX ®". */.hpn-faktenbox sup{inset-block-start:-.3em;font-size:.72em;letter-spacing:0;margin-left:-.06em} /*# sourceMappingURL=/cdn/shop/t/212/assets/hpn-faktenbox.css.map */