/*! HPN Formel-Vergleich Gehoert zu sections/hpn-formel-vergleich.liquid. Formsprache aus dem Wissensbereich uebernommen, Ansage Sami 08.09.2026 ("vom styling wie der wissensbereich"). Gemessen in assets/wissen-tokens.css und assets/wissen-sektionen.css, hier auf die Token gemappt, die auf der Produktseite tatsaechlich anliegen: Wissensbereich wird hier zu --hpn-box-verlauf var(--hpn-lack), der Button-Verlauf aus css-variables.liquid. Er folgt dem Theme-Editor-Regler, der eingefrorene Wissens-Verlauf tut das nicht. wissen-sektion--getoent --color-background 241 242 244, gesetzt in #F1F2F4 der Section, gemalt von .section::before Karten Flaeche plus Haarrand plus Schatten, nie eine gezogene Linie als einziges Mittel --rounded-card-390/1440 10px / 15px als feste Werte. Die 10px / 15px wissen-tokens.css laedt NUR ueber layout/wissen.liquid, auf der PDP gibt es diese Variablen nicht. Nicht in ein var() mit Fallback packen, das taeuscht eine Verbindung vor, die es nicht gibt. Zeilenhoehe Fliesstext 1.6 uebernommen KEIN kraeftiger Rahmen um die Karten. Die Abgrenzung laeuft ueber Flaeche, Haarrand und Schatten, nicht ueber eine gezogene Linie. *//*! DIE TIEFEN-GRAMMATIK DES THEMES, hier angewandt statt neu erfunden. Gemessen am 2026-09-08 in assets/theme.css ("primary button depth", Zeile 3256, und die Fakten-Pillen ab Zeile 16350) sowie in assets/wissen-start.css Zeile 330. Korrektur zu meiner ersten Fassung: ich hatte den Wissensbereich als flach beschrieben. Er ist es nicht, die Tiefe steckt nur nicht in den Tokens, sondern in den Bauteilen. helle Karte border 1px rgb(18 29 53 / .08) 0 1px 2px rgb(18 29 53 / .04), 0 10px 28px rgb(18 29 53 / .12) dunkle Flaeche Verlauf var(--hpn-lack) auf var(--hpn-ton) aussen 0 1px 2px rgba(6,11,20,.4) innen inset 0 1px 2px rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.4) Primaerbutton zusaetzlich die weite Abhebung 0 10px 24px rgba(6,11,20,.32) Die weite Abhebung bleibt laut Kommentar in theme.css dem Button vorbehalten: sie laesst eine Flaeche klickbar aussehen. Deshalb tragen die Fussleiste und die dunklen Kacheln hier nur die enge Abhebung plus die beiden Innenkanten, nicht die weite. Ansage Sami 08.09.2026, das Ganze sah zu flach aus. *//*! WARUM HIER NICHT var(--hpn-lack) STEHT, sondern ein eigener Verlauf. --hpn-lack wird in snippets/css-variables.liquid so abgeleitet: --color-base-button-gradient: {% if settings.color_button_gradient != blank %} {{ settings.color_button_gradient }}{% else %}{{ settings.color_button_background }}{% endif %}; --hpn-lack: var(--color-base-button-gradient); Ist der Verlaufsregler im Theme-Editor leer, steht dort eine FARBE statt eines Verlaufs. background-image mit einer Farbe ist ungueltiges CSS: die Bildschicht faellt ersatzlos weg und uebrig bleibt background-color, also genau derselbe Ton, einfarbig. Kein Verlauf, nicht einmal ein schwacher. Genau das ist am 08.09.2026 passiert. Im Live-Theme war der Regler gefuellt, im Entwurfs-Theme nicht, und die Kacheln standen dort einfarbig. Aufgefallen ist es Sami in den DevTools: "dort ueberlagert die andere Farbe, HPN Ton". Die Buttons faellt das nicht auf, weil sie die Kurzform background: benutzen, die eine Farbe klaglos annimmt. FAQ-Karte, Footer und der ganze Wissensbereich sind nicht betroffen, weil sie --hpn-flaeche-hoch bzw. --hpn-box-verlauf nehmen, und beide sind fest verdrahtet. Der Kommentar in css-variables.liquid sagt genau deshalb, dass --hpn-flaeche-hoch dem Regler bewusst NICHT folgt. Deshalb hier derselbe Weg: --hpn-flaeche-hoch als Quelle, mit dem Verlauf als Notnagel, falls das Snippet einmal fehlt. Nicht auf --hpn-lack zurueckbauen, ohne diesen Absatz gelesen zu haben. *//*! PFLICHT, nicht kosmetisch: der Inhalt muss positioniert sein. theme.css legt an JEDE .section ein ::before mit position:absolute, inset:0 und dem Hintergrund der Section. Weil es positioniert ist, malt es ueber allem, was es nicht ist, also ueber jedem normalen Text. Ohne die zwei Zeilen hier waere die ganze Section eine leere graue Flaeche. Dieselbe Falle steht in assets/hpn-volldeklaration.css beschrieben. */.hpn-fv{position:relative;z-index:1;--fv-linie: rgb(var(--color-foreground)/ .1);--fv-still: rgb(var(--color-foreground)/ .62);--fv-weich: rgb(var(--color-foreground)/ .8);--fv-karte-radius: 10px;--fv-fuss-radius: 8px;--fv-karte-rand: 1px solid rgb(var(--color-foreground)/ .08);--fv-karte-tiefe: 0 1px 2px rgb(var(--color-shadow)/ .04), 0 10px 28px rgb(var(--color-shadow)/ .12);--fv-lack: var(--hpn-flaeche-hoch, linear-gradient(180deg, #344F61 0%, #1A2831 55%, #000000 100%));--fv-lack-tiefe: 0 1px 2px rgba(6, 11, 20, .4), inset 0 1px 2px rgba(255, 255, 255, .2), inset 0 -1px 0 rgba(0, 0, 0, .4);--fv-karte-flaeche: rgb(var(--color-foreground)/ .04)}.hpn-fv--getoent{--fv-karte-flaeche: #fff}@media screen and (min-width:750px){.hpn-fv{--fv-karte-radius: 15px;--fv-fuss-radius: 12px}}.hpn-fv__titel{margin:0}.hpn-fv__unter{margin:var(--sp-3) 0 0;max-width:60ch;color:var(--fv-weich);line-height:1.6}/*! Spalten. Mobil untereinander, ab 750px nebeneinander. BEWUSST NICHT auf gleiche Hoehe gestreckt (align-items: start statt stretch). Die abgeloeste Formel hat fuenf Zeilen, die aktuelle sechzehn. Gestreckt stuende unter den fuenf Zeilen eine halbe Karte Leere, und Leere liest sich als Mangel. Genau das soll die Section nicht tun, siehe der Beschluss vom 08.09.2026 im Kopf der Section-Datei. Kurz ist hier neutral, leer waere es nicht. */.hpn-fv__spalten{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-4);margin-top:var(--sp-10)}@media screen and (min-width:750px){.hpn-fv__spalten{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-6);align-items:start}}.hpn-fv__karte{display:flex;flex-direction:column;padding:var(--sp-6);border:var(--fv-karte-rand);border-radius:var(--fv-karte-radius);background-color:var(--fv-karte-flaeche);box-shadow:var(--fv-karte-tiefe)}@media screen and (min-width:750px){.hpn-fv__karte{padding:var(--sp-8)}}.hpn-fv__karte-titel{margin:0;font-size:var(--text-h4)}.hpn-fv__karte-unter{margin:var(--sp-2) 0 0;color:var(--fv-still);line-height:1.6}/*! Liste. Zwei Bauformen aus einer Vorlage: mit Werten eine dl, ohne Werte eine ul. Beide sehen gleich aus, damit die neutrale linke Spalte nicht wie eine andere Sorte Liste wirkt. */.hpn-fv__liste{margin:var(--sp-6) 0 0;padding:0;list-style:none}.hpn-fv__zeile{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);padding-block:var(--sp-3)}.hpn-fv__zeile+.hpn-fv__zeile{border-block-start:1px solid var(--fv-linie)}.hpn-fv__name{margin:0;line-height:1.5}.hpn-fv__wert{margin:0;text-align:right;line-height:1.5;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}/*! Fussbalken. Der Abstandhalter davor druckt ihn an den unteren Rand, auch wenn die Spalte kuerzer ist als die andere. */.hpn-fv__fuss{margin:auto 0 0;padding:var(--sp-3d5) var(--sp-5);border-radius:var(--fv-fuss-radius);line-height:1.5}/*! Nur die aktuelle Formel bekommt den Button-Verlauf. --hpn-lack folgt dem Button-Regler im Theme-Editor, --hpn-text ist die dazu passende Schriftfarbe. Beide kommen aus snippets/css-variables.liquid und liegen auf jeder Seite an, auch ausserhalb des Wissensbereichs. */.hpn-fv__karte--jetzt .hpn-fv__fuss{margin-top:var(--sp-6);color:var(--hpn-text);background-color:var(--hpn-ton);background-image:var(--fv-lack);box-shadow:var(--fv-lack-tiefe)}/*! Die abgeloeste Formel traegt normalerweise gar keinen Fussbalken. Falls doch einer gesetzt wird, bleibt er still: keine Farbe, kein Verlauf. Beschluss Sami 08.09.2026, sie soll nicht schlechtgemacht werden. */.hpn-fv__karte--vorher .hpn-fv__fuss{margin-top:var(--sp-6);color:var(--fv-still);background-color:rgb(var(--color-foreground)/ .06)} /*# sourceMappingURL=/cdn/shop/t/227/assets/hpn-formel-vergleich.css.map */