/*! HPN Vergleich
    Gehört zu sections/hpn-vergleich.liquid.

    Löst die Vergleichs-Bilder auf den Produktseiten ab. Stil und Maße sind
    absichtlich identisch mit hpn-volldeklaration.css, damit beide Sections
    auf einer Seite wie ein Bauteil wirken und nicht wie zwei Baustellen:

      Linien       1px rgb(var(--color-border))
      Zellen       14px, Kopf 12px
      Radius       var(--buttons-radius), wie die Fakten-Pillen
      Stille Farbe rgb(var(--color-foreground) / 0.62)

    Zwei Icon-Farben, beide aus dem Shop und nicht erfunden:
      Haken   rgb(var(--color-success-text)), im Shop #4d7c0f
      Kreuz   #C25E17, das Terrakotta der Volldeklaration
    Icon-Kontrast gegen Weiß nachgerechnet: 4.99 und 4.28. Nötig sind 3.0
    für Bedienelemente, beide liegen darüber. Bewusst KEIN Signalrot: das
    alte Bild hatte ein rotes Kreuz, und Rot gehört bei HPN nicht in die
    Fläche.
*//*! PFLICHT, nicht kosmetisch: der Inhalt muss positioniert sein.
   theme.css legt an JEDE .section ein ::before mit position:absolute und
   inset:0. Weil es positioniert ist, malt es über allem, was es nicht ist.
   Ohne diese zwei Zeilen rendert die Section komplett weiß. Dieselbe Falle
   wie bei hpn-volldeklaration, siehe dort den langen Kommentar. */.hpn-vgl{position:relative;z-index:1;--vgl-still: rgb(var(--color-foreground)/ .62);--vgl-linie: rgb(var(--color-border));--vgl-flaeche: rgb(var(--color-placeholder));--vgl-ja: rgb(var(--color-success-text));--vgl-nein: #c25e17}.hpn-vgl__unter{margin:var(--sp-3) 0 0;max-width:60ch;color:rgb(var(--color-foreground)/ .8)}/*! PFLICHT: das globale Tabellen-CSS neutralisieren.
   theme.css ab Zeile 4035 gibt JEDER Tabelle im Shop einen 1px-Ring per
   box-shadow, einen Radius, --text-lg als Schriftgröße, eine sehr große
   Polsterung, einen grauen Kopfhintergrund und eine Linie über jeder Zeile.
   Ohne diesen Block sieht die Tabelle aus wie ein Fremdkörper. Genau das
   ist am 17.08. bei der Volldeklaration passiert, deshalb steht es hier
   von Anfang an drin. */.hpn-vgl__tabelle{width:100%;margin-top:var(--sp-7d5);border-collapse:collapse;box-shadow:none;border-radius:0;overflow:visible;table-layout:fixed}.hpn-vgl__tabelle th,.hpn-vgl__tabelle td{padding:var(--sp-3d5) var(--sp-2);border:0;font-size:var(--text-sm);text-align:center;vertical-align:middle}.hpn-vgl__tabelle tbody tr,.hpn-vgl__tabelle tfoot tr:first-child{border-block-start:0}/*! Erste Spalte trägt das Merkmal, steht links und nimmt den Rest der
   Breite. Die drei Wertspalten sind gleich breit, damit die Icons eine
   Spur bilden. */.hpn-vgl__tabelle th:first-child,.hpn-vgl__tabelle td:first-child{width:auto;padding-left:0;text-align:left;font-weight:var(--font-normal);color:rgb(var(--color-foreground))}.hpn-vgl__tabelle th:not(:first-child),.hpn-vgl__tabelle td:not(:first-child){width:22%}/*! Kopfzeile. Der Strich hängt an der ZEILE und nicht an den Zellen, sonst
   reißt ihn jeder Spaltenabstand auf. Gelernt an der Volldeklaration. */.hpn-vgl__tabelle thead tr{border-bottom:1px solid var(--vgl-linie)}.hpn-vgl__tabelle thead th{padding-top:0;padding-bottom:var(--sp-3d5);border-bottom:0;background-color:transparent;color:var(--vgl-still);font-size:var(--text-xs);font-weight:var(--font-medium)}.hpn-vgl__tabelle tbody tr{border-bottom:1px solid var(--vgl-linie)}.hpn-vgl__tabelle tbody tr:last-child{border-bottom:0}/*! Die eigene Spalte. Leicht getönt statt umrahmt, damit sie sich abhebt,
   ohne einen zweiten Kasten in die Section zu setzen. */.hpn-vgl__spalte-eigen{background:var(--vgl-flaeche)}.hpn-vgl__tabelle thead th.hpn-vgl__spalte-eigen{background:transparent}.hpn-vgl__tabelle tbody tr:first-child .hpn-vgl__spalte-eigen{border-start-start-radius:var(--buttons-radius);border-start-end-radius:var(--buttons-radius)}.hpn-vgl__tabelle tbody tr:last-child .hpn-vgl__spalte-eigen{border-end-start-radius:var(--buttons-radius);border-end-end-radius:var(--buttons-radius)}/*! Der Name des eigenen Produkts als Pille, Bauform der Fakten-Pillen:
   gleiche Polsterung, gleicher Radius, gleiche Lichtkante. Das alte Bild
   hatte hier ein Hellblau, das sonst nirgends im Shop vorkommt. */.hpn-vgl__pille{display:inline-block;padding:var(--sp-1d5) var(--sp-3);border-radius:var(--buttons-radius);background-color:var(--hpn-ton);background-image:var(--hpn-lack);box-shadow:inset 0 1px #ffffff1a;color:var(--hpn-text);font-size:var(--text-xs);font-weight:var(--font-medium);white-space:nowrap}/*! Die zwei Icons. Strichstärke und Größe sind aufeinander abgestimmt, das
   Kreuz wirkt bei gleicher Stärke sonst schwerer als der Haken. */.hpn-vgl__ja,.hpn-vgl__nein{display:block;width:var(--sp-5);height:var(--sp-5);margin:0 auto}.hpn-vgl__ja{color:var(--vgl-ja)}.hpn-vgl__nein{color:var(--vgl-nein);opacity:.55}.hpn-vgl__fuss{margin:var(--sp-4d5) 0 0;max-width:80ch;color:var(--vgl-still);font-size:var(--text-sm)}/*! Mobil. Die Tabelle bleibt eine Tabelle, nur enger: bei drei Häkchen-
   Spalten und kurzen Merkmalen passt das auch auf 390 Pixeln, anders als
   bei der Volldeklaration mit ihren langen Stoffnamen und Zahlen. */@media screen and (max-width:760px){.hpn-vgl__tabelle{margin-top:var(--sp-6)}.hpn-vgl__tabelle th,.hpn-vgl__tabelle td{padding:var(--sp-3) var(--sp-1)}/*! Die eigene Spalte bekommt mobil mehr Breite als die beiden anderen.
   Dort steht ein Produktname in einer Pille, in den Nachbarspalten nur
   ein Kategoriewort. Bei gleicher Breite trennte "Omega-D3-K2" mitten im
   Wort zu "Ome-ga-D3-K2". */.hpn-vgl__tabelle th:not(:first-child),.hpn-vgl__tabelle td:not(:first-child){width:17.5%}.hpn-vgl__tabelle th.hpn-vgl__spalte-eigen,.hpn-vgl__tabelle td.hpn-vgl__spalte-eigen{width:25%}.hpn-vgl__tabelle thead th{font-size:11px;line-height:1.2;-webkit-hyphens:auto;hyphens:auto}/*! Der Produktname wird nicht automatisch getrennt. Umbrechen darf er,
   aber nur an seinen eigenen Bindestrichen. */.hpn-vgl__pille{padding:var(--sp-1) var(--sp-2);white-space:normal;-webkit-hyphens:manual;hyphens:manual}.hpn-vgl__ja,.hpn-vgl__nein{width:var(--sp-4d5);height:var(--sp-4d5)}}
/*# sourceMappingURL=/cdn/shop/t/182/assets/hpn-vergleich.css.map */