/*! HPN Formel-Zuwachs
    Gehoert zu sections/hpn-formel-zuwachs.liquid.

    Gleiche Formsprache wie assets/hpn-formel-vergleich.css, damit die beiden
    Sektionen auf derselben Seite als ein Paar lesbar sind: getoente
    Sektionsflaeche #F1F2F4, weisse Kacheln mit Haarrand und Schatten,
    Radius 15 auf dem Desktop und 10 mobil, Zeilenhoehe 1.6. Formsprache aus dem Wissensbereich,
    gemessen in assets/wissen-tokens.css und assets/wissen-sektionen.css.

    DER VERLAUF IST DAS ARGUMENT, NICHT DER SCHMUCK. Nur die Kacheln, deren
    Vorher-Wert 0 ist, bekommen --hpn-lack und weisse Schrift. Laut Bauauftrag
    sind genau das die beiden Gruppen, fuer die es vorher gar kein Enzym gab.
    Der Verlauf folgt dem Button-Regler im Theme-Editor, siehe
    snippets/css-variables.liquid. Terrakotta kommt hier bewusst nicht vor,
    Ansage Sami 08.09.2026.
*//*! 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, die dunklen Kacheln und die Haken hier nur die enge
    Abhebung plus die beiden Innenkanten. 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: theme.css legt an JEDE .section ein absolut positioniertes
   ::before mit dem Section-Hintergrund. Ohne diese zwei Zeilen malt es ueber
   den gesamten Inhalt. Ausfuehrlich beschrieben in
   assets/hpn-volldeklaration.css. */.hpn-fz{position:relative;z-index:1;--fz-linie: rgb(var(--color-foreground)/ .1);--fz-still: rgb(var(--color-foreground)/ .62);--fz-weich: rgb(var(--color-foreground)/ .8);--fz-punkt: rgb(var(--color-foreground)/ .22);--fz-kachel-radius: 10px;--fz-kachel-rand: 1px solid rgb(var(--color-foreground)/ .08);--fz-kachel-tiefe: 0 1px 2px rgb(var(--color-shadow)/ .04), 0 10px 28px rgb(var(--color-shadow)/ .12);--fz-lack: var(--hpn-flaeche-hoch, linear-gradient(180deg, #344F61 0%, #1A2831 55%, #000000 100%));--fz-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);--fz-kachel-flaeche: rgb(var(--color-foreground)/ .04)}.hpn-fz--getoent{--fz-kachel-flaeche: #fff}@media screen and (min-width:750px){.hpn-fz{--fz-kachel-radius: 15px}}.hpn-fz__titel{margin:0}.hpn-fz__unter{margin:var(--sp-3) 0 0;max-width:60ch;color:var(--fz-weich);line-height:1.6}/*! Raster. Mobil eine Spalte, ab 750px so viele wie eingestellt. */.hpn-fz__raster{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-4);margin:var(--sp-10) 0 0;padding:0;list-style:none}@media screen and (min-width:750px){.hpn-fz__raster{grid-template-columns:repeat(var(--fz-spalten, 3),minmax(0,1fr))}}.hpn-fz__kachel{padding:var(--sp-6);border:var(--fz-kachel-rand);border-radius:var(--fz-kachel-radius);background-color:var(--fz-kachel-flaeche);box-shadow:var(--fz-kachel-tiefe)}.hpn-fz__gruppe{display:block;color:var(--fz-still);line-height:1.5}.hpn-fz__zaehler{display:flex;align-items:baseline;gap:var(--sp-2d5);margin-top:var(--sp-4d5);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}.hpn-fz__vorher,.hpn-fz__jetzt{font-size:var(--text-2xl);font-weight:var(--font-semibold);line-height:1.15;letter-spacing:-.02em}.hpn-fz__vorher,.hpn-fz__pfeil{color:var(--fz-punkt)}/*! Punktreihe. Rein visuell, im Markup mit aria-hidden. */.hpn-fz__punkte{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-4)}.hpn-fz__punkt{display:inline-block;width:13px;height:13px;border-radius:50%;background-color:var(--fz-punkt)}.hpn-fz__punkt--neu{background-color:rgb(var(--color-foreground))}/*! Die komplett neuen Gruppen. Nur hier der Button-Verlauf. */.hpn-fz__kachel--neu{color:var(--hpn-text);border-color:#ffffff24;background-color:var(--hpn-ton);background-image:var(--fz-lack);box-shadow:var(--fz-lack-tiefe)}.hpn-fz__kachel--neu .hpn-fz__gruppe,.hpn-fz__kachel--neu .hpn-fz__vorher,.hpn-fz__kachel--neu .hpn-fz__pfeil{color:#ffffff9e}.hpn-fz__kachel--neu .hpn-fz__jetzt{color:var(--hpn-text)}.hpn-fz__kachel--neu .hpn-fz__punkt,.hpn-fz__kachel--neu .hpn-fz__punkt--neu{background-color:var(--hpn-text)}/*! Legende */.hpn-fz__legende{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-6);margin:var(--sp-5) 0 0;color:var(--fz-still)}.hpn-fz__leg{display:inline-flex;align-items:center;gap:var(--sp-2)}.hpn-fz__leg .hpn-fz__punkt{width:12px;height:12px}.hpn-fz__marke{display:inline-block;width:12px;height:12px;border-radius:4px;background-color:var(--hpn-ton);background-image:var(--fz-lack);box-shadow:0 1px 2px #060b1466,inset 0 1px 1px #fff3}.hpn-fz__nachtext{max-width:68ch;margin:var(--sp-8) 0 0;color:var(--fz-weich)}.hpn-fz__nachtext p{margin:0 0 var(--sp-3);line-height:1.6}.hpn-fz__nachtext p:last-child{margin-bottom:0}.hpn-fz__nachtext strong{color:rgb(var(--color-foreground));font-weight:var(--font-semibold)}
/*# sourceMappingURL=/cdn/shop/t/227/assets/hpn-formel-zuwachs.css.map */