/*! HPN Nutzen-Punkte im Kaufbereich
    Gehoert zum Block "HPN Nutzen-Punkte" in sections/main-product.liquid.

    Formsprache aus dem Wissensbereich, wie bei hpn-formel-vergleich.css:
    keine Flaeche, kein Rahmen, kein Schatten. Die Zeilen trennt eine Haarlinie
    in Marine bei 10 Prozent, das ist --color-border des Themes. Zeilenhoehe
    1.6 wie im Wissensbereich.

    BEWUSST OHNE KASTEN. Der Kaufbereich traegt darunter schon die Faktenzeile
    (90 Kapseln, 90 Portionen, 100 Prozent Vegan) als eigene Flaeche. Ein
    zweiter Kasten daneben macht die Spalte unruhig. Ausgewaehlt von Sami am
    08.09.2026 aus zwei Figma-Fassungen, die ruhige hat gewonnen.

    NACHGESCHAERFT am selben Tag: der nackte Haken war zu still, der
    Kaufbereich sah nach Textdokument aus. Der Haken sitzt jetzt in einer
    runden Marke im Button-Verlauf, mit denselben Kanten wie die Fakten-Pillen
    darunter. Damit hat die Spalte einen Farbanker und die beiden Bauteile
    sprechen dieselbe Sprache. Der Kasten bleibt trotzdem weg.

      Marke   Verlauf var(--hpn-lack) auf var(--hpn-ton), Kreis
              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)
    Dieselben Werte wie .hpn-fakten .product-icon-box in assets/theme.css,
    dort ab Zeile 16350 hergeleitet. Nicht selbst gemischt.

    Der Haken kommt aus snippets/icon-guarantee.liquid, Icon-Name 'check',
    dort am selben Tag ergaenzt.
*//*! 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.
*/.hpn-hp{margin:var(--sp-5) 0 0;padding:0;list-style:none}.hpn-hp__zeile{display:flex;align-items:flex-start;gap:var(--sp-3);padding-block:var(--sp-3d5)}.hpn-hp__zeile+.hpn-hp__zeile{border-block-start:1px solid rgb(var(--color-border))}/*! Die Marke sitzt auf der ersten Textzeile, nicht mittig zur ganzen Zeile.
   Bei zweizeiligen Punkten rutscht sie sonst nach unten weg. Der Wert ist die
   halbe Differenz zwischen Zeilenhoehe und Markenhoehe. */.hpn-hp__marke{flex:0 0 auto;display:grid;place-items:center;width:22px;height:22px;margin-block-start:2px;border-radius:50%;color:var(--hpn-text);background-color:var(--hpn-ton);background-image:var(--hpn-flaeche-hoch, linear-gradient(180deg, #344F61 0%, #1A2831 55%, #000000 100%));box-shadow:0 1px 2px #060b1466,inset 0 1px 2px #fff3,inset 0 -1px #0006}.hpn-hp__haken{display:block}.hpn-hp__text{line-height:1.6}/*! Die Faktenzeile folgt direkt darunter und bringt ihren eigenen Abstand
   mit. Ohne die Regel stehen Liste und Pillen zu eng aufeinander. */.hpn-hp+.hpn-fakten{margin-top:var(--sp-5)}
/*# sourceMappingURL=/cdn/shop/t/227/assets/hpn-hero-punkte.css.map */