npm - @postnord/pn-marketweb-components - Versions diffs - 2.0.96 → 2.0.97 - Mend

@postnord/pn-marketweb-components 2.0.96 → 2.0.97

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (49) hide show

package/collection/components/data-visualization/pn-stats-info/pn-stats-info.css ADDED Viewed

@@ -0,0 +1,86 @@
+pn-stats-info {
+  width: 100%;
+}
+pn-stats-info .pn-stats-info__container {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  padding-top: 2rem;
+}
+@media screen and (min-width: 768px) {
+  pn-stats-info .pn-stats-info__container {
+    padding-top: 6rem;
+  }
+}
+@media screen and (min-width: 1200px) {
+  pn-stats-info .pn-stats-info__container {
+    padding-top: 8rem;
+  }
+}
+pn-stats-info .pn-stats-info__container__content {
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+  width: 100%;
+  background-color: #0D234B;
+  background-repeat: no-repeat;
+  background-position: bottom left;
+  background-size: 50%;
+  background-blend-mode: overlay;
+  padding-bottom: 2rem;
+}
+@media screen and (min-width: 768px) {
+  pn-stats-info .pn-stats-info__container__content {
+    max-width: 540px;
+    background-position: -999px -999px;
+    background-size: 0;
+    padding-bottom: 4rem;
+    padding-right: 4rem;
+  }
+}
+@media screen and (min-width: 1200px) {
+  pn-stats-info .pn-stats-info__container__content {
+    max-width: 100%;
+    padding-bottom: 6rem;
+    padding-right: 6rem;
+  }
+}
+pn-stats-info .pn-stats-info__container__content__heading {
+  color: #F06365;
+  margin-bottom: 2.4rem;
+  align-self: center;
+  font-size: 3rem;
+  line-height: 110%;
+}
+@media screen and (min-width: 1200px) {
+  pn-stats-info .pn-stats-info__container__content__heading {
+    font-weight: 700;
+    font-size: 5.6rem;
+  }
+}
+pn-stats-info .pn-stats-info__container__content__data {
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  min-height: 20rem;
+}
+pn-stats-info .pn-stats-info__container__map {
+  display: none;
+}
+@media screen and (min-width: 768px) {
+  pn-stats-info .pn-stats-info__container__map {
+    display: block;
+    max-width: 460px;
+    width: 100%;
+    background-color: #0D234B;
+    background-repeat: no-repeat;
+    background-position: bottom center;
+    background-size: 55%;
+  }
+}
+@media screen and (min-width: 1200px) {
+  pn-stats-info .pn-stats-info__container__map {
+    background-size: contain;
+  }
+}

package/collection/components/data-visualization/pn-stats-info/pn-stats-info.js ADDED Viewed

@@ -0,0 +1,89 @@
+import { Component, h, Host, Prop, } from '@stencil/core';
+const mockArray = [
+  { preamble: 'Million parcels', data: 226, unit: null },
+  { preamble: 'weighted parcel delivery quality', data: 94.5, unit: '%' },
+  { preamble: 'billion letters and other mail items', data: 1.5, unit: '' },
+  { preamble: 'carbon dioxide emissions since 2009', data: -44, unit: '%' },
+];
+export class PnStatsInfo {
+  constructor() {
+    this.heading = 'Heading';
+    this.dataArray = mockArray;
+    this.backgroundUrl = null;
+  }
+  render() {
+    return (h(Host, null,
+      h("div", { class: "pn-stats-info__container" },
+        h("div", { class: "pn-stats-info__container__map", style: { backgroundImage: `url(${this.backgroundUrl})` } }),
+        h("div", { class: "pn-stats-info__container__content", style: { backgroundImage: `url(${this.backgroundUrl})` } },
+          h("h3", { class: "pn-stats-info__container__content__heading" }, this.heading),
+          h("div", { class: "pn-stats-info__container__content__data" }, this.dataArray.map(stats => {
+            return h("pn-stats-info-data", { data: stats.data, unit: stats.unit, preamble: stats.preamble });
+          }))))));
+  }
+  static get is() { return "pn-stats-info"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-stats-info.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-stats-info.css"]
+  }; }
+  static get properties() { return {
+    "heading": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "heading",
+      "reflect": false,
+      "defaultValue": "'Heading'"
+    },
+    "dataArray": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "PnStatsInfoDataProps[]",
+        "resolved": "PnStatsInfoDataProps[]",
+        "references": {
+          "PnStatsInfoDataProps": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "mockArray"
+    },
+    "backgroundUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "background-url",
+      "reflect": false,
+      "defaultValue": "null"
+    }
+  }; }
+}

package/collection/components/data-visualization/pn-stats-info/pn-stats-info.stories.js ADDED Viewed

@@ -0,0 +1,26 @@
+import readme from './readme.md';
+export default {
+  title: 'Data Visualization/Stats Info',
+  parameters: {
+    notes: readme,
+    layout: 'fullscreen',
+  },
+};
+const PrimaryTemplate = ({ ...args }) => {
+  return `
+  <div style="background-color:#0D234B;">
+    <div style="width:100%; max-width:1200px; margin:0 auto">
+        <pn-stats-info heading="${args.heading}" background-url="${args.backgroundUrl}">
+        </pn-stats-info>
+    </div>
+    </div>
+    `;
+};
+export const Primary = PrimaryTemplate.bind({});
+Primary.args = {
+  heading: 'Postnord in figures 2022',
+  backgroundUrl: 'https://com-integration.postnord.com/siteassets/map.png?width=1410&height=793&mode=crop&quality=80',
+};

package/collection/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader.css CHANGED Viewed

@@ -212,8 +212,15 @@ pn-marketweb-siteheader pn-nav-dropdown:not(.hydrated) .nav-dropdown-content-con
   margin: 1.6rem;
 }
+header[data-header-theme=dotcom] > pn-marketweb-siteheader pn-button a {
+  text-decoration: none;
+}
+header[data-header-theme=dotcom] > pn-marketweb-siteheader pn-button a:hover {
+  text-decoration: none;
+}
 header[data-header-theme=dotcom] > pn-marketweb-siteheader > header {
   background-color: #0D234B;
+  box-shadow: none;
 }
 header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .siteheader-row:not(:last-child) {
   border-bottom: 0.1rem solid #0D234B;
@@ -239,15 +246,15 @@ header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .siteheader-
 header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .siteheader-logocontainer svg.siteheader-logo > path {
   fill: #FFFFFF;
 }
-header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .siteheader-topright * {
-  color: #FFFFFF;
-}
 header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .siteheader-topright .siteheader-logindialog svg > path {
   fill: #FFFFFF;
 }
 header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .siteheader-topright pn-language-selector pn-icon svg > path {
   fill: #FFFFFF;
 }
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .siteheader-topright button {
+  color: #FFFFFF;
+}
 header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .siteheader-topright button:hover {
   background-color: #005D92;
 }
@@ -267,58 +274,88 @@ header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .siteheader-
   }
 }
 header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .siteheader-menu .mainnav-toggle button {
-  background-color: transparent;
+  background-color: #005D92;
 }
 header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .siteheader-menu .first-level_icon svg > path {
   fill: #FFFFFF;
 }
 header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .siteheader-search form pn-search-field input {
-  background-color: #0D234B;
-  color: #FFFFFF;
+  background-color: #FFFFFF;
+  color: #0D234B;
   border: 0.1rem solid #FFFFFF;
 }
 header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .siteheader-search form pn-search-field input:hover {
   border-color: #FFFFFF;
 }
 header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .siteheader-search form pn-search-field input::placeholder {
-  color: #FFFFFF;
+  color: #0D234B;
 }
-header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .mainnav {
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header nav.mainnav {
   background-color: #0D234B;
 }
-header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .mainnav a {
-  color: #FFFFFF;
+@media screen and (min-width: 48em) {
+  header[data-header-theme=dotcom] > pn-marketweb-siteheader > header nav.mainnav {
+    top: 6.4em;
+  }
 }
-header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .mainnav pn-mainnav-level[data-level="1"] pn-mainnav-list > pn-mainnav-link a,
-header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .mainnav pn-mainnav-level[data-level="1"] pn-mainnav-list > pn-mainnav-link button {
-  background-color: #0D234B;
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header nav.mainnav a {
   color: #FFFFFF;
-  border-bottom: 0.1rem solid rgba(0, 93, 146, 0.5);
 }
-header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .mainnav pn-mainnav-level:not([data-level="1"]) {
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header nav.mainnav pn-mainnav-level [slot=top].siteheader-menu-top pn-marketweb-siteheader-search {
+  padding-bottom: 0.5rem;
   background-color: #0D234B;
 }
-header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .mainnav pn-mainnav-level:not([data-level="1"]) pn-mainnav-list {
-  color: #FFFFFF;
-}
-header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .mainnav pn-mainnav-level:not([data-level="1"]) pn-mainnav-list a:hover {
-  background-color: #00A0D6;
-}
-header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .mainnav pn-mainnav-level [slot=top].siteheader-menu-top pn-marketweb-siteheader-search {
-  background-color: #0D234B;
-}
-header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .mainnav pn-mainnav-level [slot=top].siteheader-menu-top pn-marketweb-siteheader-search .button-container {
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header nav.mainnav pn-mainnav-level [slot=top].siteheader-menu-top pn-marketweb-siteheader-search .button-container {
   border-top: 1px solid #FFFFFF;
   border-bottom: 1px solid #FFFFFF;
-  border-right: 1px solid white;
+  border-right: 1px solid #FFFFFF;
   border-top-right-radius: 50%;
   border-bottom-right-radius: 50%;
 }
-header[data-header-theme=dotcom] > pn-marketweb-siteheader > header .mainnav pn-mainnav-level [slot=top].siteheader-menu-top pn-marketweb-siteheader-search .button-container button.clear {
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header nav.mainnav pn-mainnav-level [slot=top].siteheader-menu-top pn-marketweb-siteheader-search .button-container button.clear {
   border: 2px solid #FFFFFF;
   border-radius: 50%;
   padding: 0.5rem;
 }
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header nav.mainnav pn-mainnav-level .mainnav-level-header .secondlevel-backbtn pn-icon svg > path {
+  fill: #FFFFFF;
+}
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header nav.mainnav pn-mainnav-level pn-mainnav-list > pn-mainnav-link button,
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header nav.mainnav pn-mainnav-level pn-mainnav-list > pn-mainnav-link a {
+  background-color: #0D234B;
+  border-bottom: 0.1rem solid rgba(0, 93, 146, 0.5);
+}
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header nav.mainnav pn-mainnav-level pn-mainnav-list > pn-mainnav-link button:hover,
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header nav.mainnav pn-mainnav-level pn-mainnav-list > pn-mainnav-link a:hover {
+  text-decoration: none;
+}
+@media screen and (min-width: 1024px) {
+  header[data-header-theme=dotcom] > pn-marketweb-siteheader > header nav.mainnav pn-mainnav-level pn-mainnav-list > pn-mainnav-link button,
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header nav.mainnav pn-mainnav-level pn-mainnav-list > pn-mainnav-link a {
+    border-bottom: none;
+  }
+}
+@media screen and (max-width: 1023px) {
+  header[data-header-theme=dotcom] > pn-marketweb-siteheader > header nav.mainnav pn-mainnav-level[data-level="1"] pn-mainnav-list > pn-mainnav-link:first-child {
+    border-top: 0.1rem solid rgba(0, 93, 146, 0.5);
+  }
+}
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header nav.mainnav pn-mainnav-level[data-level="1"] pn-mainnav-list > pn-mainnav-link a, header[data-header-theme=dotcom] > pn-marketweb-siteheader > header nav.mainnav pn-mainnav-level[data-level="1"] pn-mainnav-list > pn-mainnav-link button {
+  color: #FFFFFF;
+}
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header nav.mainnav pn-mainnav-level[data-level="1"] pn-mainnav-list > pn-mainnav-link a:focus, header[data-header-theme=dotcom] > pn-marketweb-siteheader > header nav.mainnav pn-mainnav-level[data-level="1"] pn-mainnav-list > pn-mainnav-link button:focus {
+  outline: none;
+}
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header nav.mainnav pn-mainnav-level:not([data-level="1"]) {
+  background-color: #0D234B;
+}
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header nav.mainnav pn-mainnav-level:not([data-level="1"]) pn-mainnav-list {
+  color: #FFFFFF;
+}
+header[data-header-theme=dotcom] > pn-marketweb-siteheader > header nav.mainnav pn-mainnav-level:not([data-level="1"]) pn-mainnav-list pn-mainnav-link > a:hover {
+  background-color: #00A0D6;
+  text-decoration: none;
+}
 header[data-header-theme=dotcom] > pn-marketweb-siteheader > header [data-level="1"] pn-mainnav-link pn-icon.first-level_arrow svg > path {
   fill: #FFFFFF;
 }

package/collection/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader.stories.js CHANGED Viewed

@@ -453,8 +453,8 @@ const DotComSiteHeaderTemplate = ({ ...args }) => {
     user-fullname="${args.name}"
     user-loggedin="${args.loggedin}"
     >
-      <pn-button slot="toprightend" small="true">Get started</pn-button>
-      <pn-button slot="menu-footer-cta" small="true">Get started</pn-button>
+      <pn-button slot="toprightend" href="http:www.google.se" small="true">Get started</pn-button>
+      <pn-button slot="menu-footer-cta" href="http:www.google.se" small="true">Get started</pn-button>
     </pn-marketweb-siteheader>
   </header>`;
 };

package/custom-elements/index.d.ts CHANGED Viewed

@@ -320,6 +320,18 @@ export const PnSiteSelectorItem: {
   new (): PnSiteSelectorItem;
 };
+interface PnStatsInfo extends Components.PnStatsInfo, HTMLElement {}
+export const PnStatsInfo: {
+  prototype: PnStatsInfo;
+  new (): PnStatsInfo;
+};
+interface PnStatsInfoData extends Components.PnStatsInfoData, HTMLElement {}
+export const PnStatsInfoData: {
+  prototype: PnStatsInfoData;
+  new (): PnStatsInfoData;
+};
 interface PnTeaserCard extends Components.PnTeaserCard, HTMLElement {}
 export const PnTeaserCard: {
   prototype: PnTeaserCard;

package/custom-elements/index.js CHANGED Viewed

@@ -4435,7 +4435,7 @@ const translations$5 = {
   }
 };
-const pnMarketwebSiteheaderCss = "body[data-siteheader-menuopen=true]{max-height:100vh;overflow:hidden}@media screen and (min-width: 60em){body[data-siteheader-menuopen=true]{max-height:initial;overflow:initial}}pn-marketweb-siteheader{display:block;background:#FFFFFF}pn-marketweb-siteheader header{position:relative;z-index:1000;display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;-webkit-box-shadow:0 0.06rem 0.18rem rgba(0, 0, 0, 0.1), 0 0.32rem 0.72rem rgba(0, 0, 0, 0.13);box-shadow:0 0.06rem 0.18rem rgba(0, 0, 0, 0.1), 0 0.32rem 0.72rem rgba(0, 0, 0, 0.13);-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:justify;justify-content:space-between}@media screen and (min-width: 48em){pn-marketweb-siteheader header{-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:initial;justify-content:initial}}pn-marketweb-siteheader .siteheader-row{display:-ms-flexbox;display:flex;-ms-flex-flow:row;flex-flow:row;-ms-flex-align:center;align-items:center;width:100%;padding:0 1.6rem;min-height:2em}pn-marketweb-siteheader .siteheader-row:not(:last-child){border-bottom:0.1rem solid #F3F2F2}@media screen and (min-width: 48em){pn-marketweb-siteheader .siteheader-row{-ms-flex-pack:justify;justify-content:space-between;min-height:3.2em}}pn-marketweb-siteheader .siteheader-topright{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}pn-marketweb-siteheader .siteheader-logocontainer{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;position:relative;min-height:3em;background:#FFFFFF;z-index:1}@media screen and (min-width: 48em){pn-marketweb-siteheader .siteheader-logocontainer{position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}}pn-marketweb-siteheader .siteheader-logolink{height:100%;max-height:6.4rem;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}pn-marketweb-siteheader .siteheader-logolink:hover,pn-marketweb-siteheader .siteheader-logolink:focus,pn-marketweb-siteheader .siteheader-logolink:active{-webkit-box-shadow:none;box-shadow:none}pn-marketweb-siteheader .siteheader-row>pn-marketweb-siteheader-search{display:none}@media screen and (min-width: 48em){pn-marketweb-siteheader .siteheader-row>pn-marketweb-siteheader-search{display:block;max-width:30rem;min-width:23.3rem;width:100%}}pn-marketweb-siteheader pn-spinner{display:none}pn-marketweb-siteheader pn-nav-dropdown:not(.hydrated) .nav-dropdown-content-container{display:none}.siteheader-topleft pn-site-selector{padding:1rem 0;display:none}@media screen and (min-width: 48em){.siteheader-topleft pn-site-selector{display:block}}@media screen and (min-width: 60em){.siteheader-topleft pn-site-selector{margin-left:1.3rem}}.siteheader-topleft pn-site-selector .pn-nav-dropdown-label,.siteheader-topleft pn-site-selector:is(a){font-size:0}.siteheader-topleft pn-site-selector .pn-nav-dropdown-label pn-icon,.siteheader-topleft pn-site-selector:is(a) pn-icon{font-size:initial;margin-left:0}@media screen and (min-width: 60em){.siteheader-topleft pn-site-selector .pn-nav-dropdown-label,.siteheader-topleft pn-site-selector:is(a){font-size:initial}.siteheader-topleft pn-site-selector .pn-nav-dropdown-label pn-icon,.siteheader-topleft pn-site-selector:is(a) pn-icon{margin-left:0.4em}}@media screen and (min-width: 60em){.siteheader-topright{margin-right:1.6rem}}.siteheader-topright>pn-language-selector,.siteheader-topright>pn-marketweb-siteheader-login,.siteheader-topright>a{padding:1rem 0;display:none;-ms-flex-item-align:center;align-self:center}@media screen and (min-width: 48em){.siteheader-topright>pn-language-selector,.siteheader-topright>pn-marketweb-siteheader-login,.siteheader-topright>a{display:block;margin-left:1rem}}@media screen and (min-width: 60em){.siteheader-topright>pn-language-selector,.siteheader-topright>pn-marketweb-siteheader-login,.siteheader-topright>a{margin-left:1.6rem}}.siteheader-topright>pn-language-selector .pn-nav-dropdown-label,.siteheader-topright>pn-language-selector:is(a),.siteheader-topright>pn-marketweb-siteheader-login .pn-nav-dropdown-label,.siteheader-topright>pn-marketweb-siteheader-login:is(a),.siteheader-topright>a .pn-nav-dropdown-label,.siteheader-topright>a:is(a){font-size:0}.siteheader-topright>pn-language-selector .pn-nav-dropdown-label pn-icon,.siteheader-topright>pn-language-selector:is(a) pn-icon,.siteheader-topright>pn-marketweb-siteheader-login .pn-nav-dropdown-label pn-icon,.siteheader-topright>pn-marketweb-siteheader-login:is(a) pn-icon,.siteheader-topright>a .pn-nav-dropdown-label pn-icon,.siteheader-topright>a:is(a) pn-icon{font-size:initial;margin-left:0}@media screen and (min-width: 60em){.siteheader-topright>pn-language-selector .pn-nav-dropdown-label,.siteheader-topright>pn-language-selector:is(a),.siteheader-topright>pn-marketweb-siteheader-login .pn-nav-dropdown-label,.siteheader-topright>pn-marketweb-siteheader-login:is(a),.siteheader-topright>a .pn-nav-dropdown-label,.siteheader-topright>a:is(a){font-size:initial}.siteheader-topright>pn-language-selector .pn-nav-dropdown-label pn-icon,.siteheader-topright>pn-language-selector:is(a) pn-icon,.siteheader-topright>pn-marketweb-siteheader-login .pn-nav-dropdown-label pn-icon,.siteheader-topright>pn-marketweb-siteheader-login:is(a) pn-icon,.siteheader-topright>a .pn-nav-dropdown-label pn-icon,.siteheader-topright>a:is(a) pn-icon{margin-left:0.4em}}.siteheader-menu{max-width:100%;width:100%;overflow:visible;overflow-x:clip}@media screen and (min-width: 60em){.siteheader-menu{margin-top:auto;overflow:visible}}.siteheader-menu pn-mainnav-link a[target]::after{content:none}.siteheader-menu pn-marketweb-siteheader-search{padding:0.3rem 1.6rem;width:100%}.siteheader-menu [slot=top] pn-search-field{width:100%}.siteheader-menu-footer{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}.siteheader-menu-footer>*{margin:1.6rem}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header{background-color:#0D234B}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-row:not(:last-child){border-bottom:0.1rem solid #0D234B}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-topleft pn-site-selector .pn-nav-dropdown-label{color:#FFFFFF}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-topleft pn-site-selector .pn-nav-dropdown-label pn-icon svg>path{fill:#FFFFFF}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-topleft button.pn-nav-dropdown-label:hover{background-color:#005D92}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-topleft button.pn-nav-dropdown-label:active{background-color:#00A0D6}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-topleft button.pn-nav-dropdown-label:focus{background-color:#00A0D6}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-logocontainer{background-color:#0D234B}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-logocontainer svg.siteheader-logo>path{fill:#FFFFFF}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-topright *{color:#FFFFFF}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-topright .siteheader-logindialog svg>path{fill:#FFFFFF}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-topright pn-language-selector pn-icon svg>path{fill:#FFFFFF}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-topright button:hover{background-color:#005D92}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-topright button:active{background-color:#00A0D6}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-topright button:focus{background-color:#00A0D6}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-topright [slot=toprightend]{-ms-flex-item-align:center;align-self:center;margin-left:1rem}@media screen and (max-width: 48em){header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-topright [slot=toprightend]{display:none}}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-menu .mainnav-toggle button{background-color:transparent}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-menu .first-level_icon svg>path{fill:#FFFFFF}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-search form pn-search-field input{background-color:#0D234B;color:#FFFFFF;border:0.1rem solid #FFFFFF}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-search form pn-search-field input:hover{border-color:#FFFFFF}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-search form pn-search-field input::-webkit-input-placeholder{color:#FFFFFF}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-search form pn-search-field input::-moz-placeholder{color:#FFFFFF}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-search form pn-search-field input:-ms-input-placeholder{color:#FFFFFF}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-search form pn-search-field input::-ms-input-placeholder{color:#FFFFFF}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-search form pn-search-field input::placeholder{color:#FFFFFF}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .mainnav{background-color:#0D234B}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .mainnav a{color:#FFFFFF}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .mainnav pn-mainnav-level[data-level=\"1\"] pn-mainnav-list>pn-mainnav-link a,header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .mainnav pn-mainnav-level[data-level=\"1\"] pn-mainnav-list>pn-mainnav-link button{background-color:#0D234B;color:#FFFFFF;border-bottom:0.1rem solid rgba(0, 93, 146, 0.5)}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .mainnav pn-mainnav-level:not([data-level=\"1\"]){background-color:#0D234B}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .mainnav pn-mainnav-level:not([data-level=\"1\"]) pn-mainnav-list{color:#FFFFFF}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .mainnav pn-mainnav-level:not([data-level=\"1\"]) pn-mainnav-list a:hover{background-color:#00A0D6}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .mainnav pn-mainnav-level [slot=top].siteheader-menu-top pn-marketweb-siteheader-search{background-color:#0D234B}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .mainnav pn-mainnav-level [slot=top].siteheader-menu-top pn-marketweb-siteheader-search .button-container{border-top:1px solid #FFFFFF;border-bottom:1px solid #FFFFFF;border-right:1px solid white;border-top-right-radius:50%;border-bottom-right-radius:50%}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .mainnav pn-mainnav-level [slot=top].siteheader-menu-top pn-marketweb-siteheader-search .button-container button.clear{border:2px solid #FFFFFF;border-radius:50%;padding:0.5rem}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header [data-level=\"1\"] pn-mainnav-link pn-icon.first-level_arrow svg>path{fill:#FFFFFF}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-menu-footer button{color:#FFFFFF}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-menu-footer button:hover{background-color:#005D92}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-menu-footer button:active{background-color:#00A0D6}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-menu-footer button:focus{background-color:#00A0D6}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-menu-footer button svg>path{fill:#FFFFFF}@media screen and (min-width: 48em){header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-menu-footer [slot=menu-footer-cta]{display:none}}";
+const pnMarketwebSiteheaderCss = "body[data-siteheader-menuopen=true]{max-height:100vh;overflow:hidden}@media screen and (min-width: 60em){body[data-siteheader-menuopen=true]{max-height:initial;overflow:initial}}pn-marketweb-siteheader{display:block;background:#FFFFFF}pn-marketweb-siteheader header{position:relative;z-index:1000;display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;-webkit-box-shadow:0 0.06rem 0.18rem rgba(0, 0, 0, 0.1), 0 0.32rem 0.72rem rgba(0, 0, 0, 0.13);box-shadow:0 0.06rem 0.18rem rgba(0, 0, 0, 0.1), 0 0.32rem 0.72rem rgba(0, 0, 0, 0.13);-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:justify;justify-content:space-between}@media screen and (min-width: 48em){pn-marketweb-siteheader header{-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:initial;justify-content:initial}}pn-marketweb-siteheader .siteheader-row{display:-ms-flexbox;display:flex;-ms-flex-flow:row;flex-flow:row;-ms-flex-align:center;align-items:center;width:100%;padding:0 1.6rem;min-height:2em}pn-marketweb-siteheader .siteheader-row:not(:last-child){border-bottom:0.1rem solid #F3F2F2}@media screen and (min-width: 48em){pn-marketweb-siteheader .siteheader-row{-ms-flex-pack:justify;justify-content:space-between;min-height:3.2em}}pn-marketweb-siteheader .siteheader-topright{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}pn-marketweb-siteheader .siteheader-logocontainer{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;position:relative;min-height:3em;background:#FFFFFF;z-index:1}@media screen and (min-width: 48em){pn-marketweb-siteheader .siteheader-logocontainer{position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}}pn-marketweb-siteheader .siteheader-logolink{height:100%;max-height:6.4rem;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}pn-marketweb-siteheader .siteheader-logolink:hover,pn-marketweb-siteheader .siteheader-logolink:focus,pn-marketweb-siteheader .siteheader-logolink:active{-webkit-box-shadow:none;box-shadow:none}pn-marketweb-siteheader .siteheader-row>pn-marketweb-siteheader-search{display:none}@media screen and (min-width: 48em){pn-marketweb-siteheader .siteheader-row>pn-marketweb-siteheader-search{display:block;max-width:30rem;min-width:23.3rem;width:100%}}pn-marketweb-siteheader pn-spinner{display:none}pn-marketweb-siteheader pn-nav-dropdown:not(.hydrated) .nav-dropdown-content-container{display:none}.siteheader-topleft pn-site-selector{padding:1rem 0;display:none}@media screen and (min-width: 48em){.siteheader-topleft pn-site-selector{display:block}}@media screen and (min-width: 60em){.siteheader-topleft pn-site-selector{margin-left:1.3rem}}.siteheader-topleft pn-site-selector .pn-nav-dropdown-label,.siteheader-topleft pn-site-selector:is(a){font-size:0}.siteheader-topleft pn-site-selector .pn-nav-dropdown-label pn-icon,.siteheader-topleft pn-site-selector:is(a) pn-icon{font-size:initial;margin-left:0}@media screen and (min-width: 60em){.siteheader-topleft pn-site-selector .pn-nav-dropdown-label,.siteheader-topleft pn-site-selector:is(a){font-size:initial}.siteheader-topleft pn-site-selector .pn-nav-dropdown-label pn-icon,.siteheader-topleft pn-site-selector:is(a) pn-icon{margin-left:0.4em}}@media screen and (min-width: 60em){.siteheader-topright{margin-right:1.6rem}}.siteheader-topright>pn-language-selector,.siteheader-topright>pn-marketweb-siteheader-login,.siteheader-topright>a{padding:1rem 0;display:none;-ms-flex-item-align:center;align-self:center}@media screen and (min-width: 48em){.siteheader-topright>pn-language-selector,.siteheader-topright>pn-marketweb-siteheader-login,.siteheader-topright>a{display:block;margin-left:1rem}}@media screen and (min-width: 60em){.siteheader-topright>pn-language-selector,.siteheader-topright>pn-marketweb-siteheader-login,.siteheader-topright>a{margin-left:1.6rem}}.siteheader-topright>pn-language-selector .pn-nav-dropdown-label,.siteheader-topright>pn-language-selector:is(a),.siteheader-topright>pn-marketweb-siteheader-login .pn-nav-dropdown-label,.siteheader-topright>pn-marketweb-siteheader-login:is(a),.siteheader-topright>a .pn-nav-dropdown-label,.siteheader-topright>a:is(a){font-size:0}.siteheader-topright>pn-language-selector .pn-nav-dropdown-label pn-icon,.siteheader-topright>pn-language-selector:is(a) pn-icon,.siteheader-topright>pn-marketweb-siteheader-login .pn-nav-dropdown-label pn-icon,.siteheader-topright>pn-marketweb-siteheader-login:is(a) pn-icon,.siteheader-topright>a .pn-nav-dropdown-label pn-icon,.siteheader-topright>a:is(a) pn-icon{font-size:initial;margin-left:0}@media screen and (min-width: 60em){.siteheader-topright>pn-language-selector .pn-nav-dropdown-label,.siteheader-topright>pn-language-selector:is(a),.siteheader-topright>pn-marketweb-siteheader-login .pn-nav-dropdown-label,.siteheader-topright>pn-marketweb-siteheader-login:is(a),.siteheader-topright>a .pn-nav-dropdown-label,.siteheader-topright>a:is(a){font-size:initial}.siteheader-topright>pn-language-selector .pn-nav-dropdown-label pn-icon,.siteheader-topright>pn-language-selector:is(a) pn-icon,.siteheader-topright>pn-marketweb-siteheader-login .pn-nav-dropdown-label pn-icon,.siteheader-topright>pn-marketweb-siteheader-login:is(a) pn-icon,.siteheader-topright>a .pn-nav-dropdown-label pn-icon,.siteheader-topright>a:is(a) pn-icon{margin-left:0.4em}}.siteheader-menu{max-width:100%;width:100%;overflow:visible;overflow-x:clip}@media screen and (min-width: 60em){.siteheader-menu{margin-top:auto;overflow:visible}}.siteheader-menu pn-mainnav-link a[target]::after{content:none}.siteheader-menu pn-marketweb-siteheader-search{padding:0.3rem 1.6rem;width:100%}.siteheader-menu [slot=top] pn-search-field{width:100%}.siteheader-menu-footer{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}.siteheader-menu-footer>*{margin:1.6rem}header[data-header-theme=dotcom]>pn-marketweb-siteheader pn-button a{text-decoration:none}header[data-header-theme=dotcom]>pn-marketweb-siteheader pn-button a:hover{text-decoration:none}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header{background-color:#0D234B;-webkit-box-shadow:none;box-shadow:none}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-row:not(:last-child){border-bottom:0.1rem solid #0D234B}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-topleft pn-site-selector .pn-nav-dropdown-label{color:#FFFFFF}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-topleft pn-site-selector .pn-nav-dropdown-label pn-icon svg>path{fill:#FFFFFF}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-topleft button.pn-nav-dropdown-label:hover{background-color:#005D92}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-topleft button.pn-nav-dropdown-label:active{background-color:#00A0D6}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-topleft button.pn-nav-dropdown-label:focus{background-color:#00A0D6}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-logocontainer{background-color:#0D234B}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-logocontainer svg.siteheader-logo>path{fill:#FFFFFF}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-topright .siteheader-logindialog svg>path{fill:#FFFFFF}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-topright pn-language-selector pn-icon svg>path{fill:#FFFFFF}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-topright button{color:#FFFFFF}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-topright button:hover{background-color:#005D92}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-topright button:active{background-color:#00A0D6}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-topright button:focus{background-color:#00A0D6}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-topright [slot=toprightend]{-ms-flex-item-align:center;align-self:center;margin-left:1rem}@media screen and (max-width: 48em){header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-topright [slot=toprightend]{display:none}}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-menu .mainnav-toggle button{background-color:#005D92}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-menu .first-level_icon svg>path{fill:#FFFFFF}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-search form pn-search-field input{background-color:#FFFFFF;color:#0D234B;border:0.1rem solid #FFFFFF}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-search form pn-search-field input:hover{border-color:#FFFFFF}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-search form pn-search-field input::-webkit-input-placeholder{color:#0D234B}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-search form pn-search-field input::-moz-placeholder{color:#0D234B}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-search form pn-search-field input:-ms-input-placeholder{color:#0D234B}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-search form pn-search-field input::-ms-input-placeholder{color:#0D234B}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-search form pn-search-field input::placeholder{color:#0D234B}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header nav.mainnav{background-color:#0D234B}@media screen and (min-width: 48em){header[data-header-theme=dotcom]>pn-marketweb-siteheader>header nav.mainnav{top:6.4em}}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header nav.mainnav a{color:#FFFFFF}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header nav.mainnav pn-mainnav-level [slot=top].siteheader-menu-top pn-marketweb-siteheader-search{padding-bottom:0.5rem;background-color:#0D234B}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header nav.mainnav pn-mainnav-level [slot=top].siteheader-menu-top pn-marketweb-siteheader-search .button-container{border-top:1px solid #FFFFFF;border-bottom:1px solid #FFFFFF;border-right:1px solid #FFFFFF;border-top-right-radius:50%;border-bottom-right-radius:50%}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header nav.mainnav pn-mainnav-level [slot=top].siteheader-menu-top pn-marketweb-siteheader-search .button-container button.clear{border:2px solid #FFFFFF;border-radius:50%;padding:0.5rem}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header nav.mainnav pn-mainnav-level .mainnav-level-header .secondlevel-backbtn pn-icon svg>path{fill:#FFFFFF}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header nav.mainnav pn-mainnav-level pn-mainnav-list>pn-mainnav-link button,header[data-header-theme=dotcom]>pn-marketweb-siteheader>header nav.mainnav pn-mainnav-level pn-mainnav-list>pn-mainnav-link a{background-color:#0D234B;border-bottom:0.1rem solid rgba(0, 93, 146, 0.5)}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header nav.mainnav pn-mainnav-level pn-mainnav-list>pn-mainnav-link button:hover,header[data-header-theme=dotcom]>pn-marketweb-siteheader>header nav.mainnav pn-mainnav-level pn-mainnav-list>pn-mainnav-link a:hover{text-decoration:none}@media screen and (min-width: 1024px){header[data-header-theme=dotcom]>pn-marketweb-siteheader>header nav.mainnav pn-mainnav-level pn-mainnav-list>pn-mainnav-link button,header[data-header-theme=dotcom]>pn-marketweb-siteheader>header nav.mainnav pn-mainnav-level pn-mainnav-list>pn-mainnav-link a{border-bottom:none}}@media screen and (max-width: 1023px){header[data-header-theme=dotcom]>pn-marketweb-siteheader>header nav.mainnav pn-mainnav-level[data-level=\"1\"] pn-mainnav-list>pn-mainnav-link:first-child{border-top:0.1rem solid rgba(0, 93, 146, 0.5)}}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header nav.mainnav pn-mainnav-level[data-level=\"1\"] pn-mainnav-list>pn-mainnav-link a,header[data-header-theme=dotcom]>pn-marketweb-siteheader>header nav.mainnav pn-mainnav-level[data-level=\"1\"] pn-mainnav-list>pn-mainnav-link button{color:#FFFFFF}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header nav.mainnav pn-mainnav-level[data-level=\"1\"] pn-mainnav-list>pn-mainnav-link a:focus,header[data-header-theme=dotcom]>pn-marketweb-siteheader>header nav.mainnav pn-mainnav-level[data-level=\"1\"] pn-mainnav-list>pn-mainnav-link button:focus{outline:none}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header nav.mainnav pn-mainnav-level:not([data-level=\"1\"]){background-color:#0D234B}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header nav.mainnav pn-mainnav-level:not([data-level=\"1\"]) pn-mainnav-list{color:#FFFFFF}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header nav.mainnav pn-mainnav-level:not([data-level=\"1\"]) pn-mainnav-list pn-mainnav-link>a:hover{background-color:#00A0D6;text-decoration:none}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header [data-level=\"1\"] pn-mainnav-link pn-icon.first-level_arrow svg>path{fill:#FFFFFF}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-menu-footer button{color:#FFFFFF}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-menu-footer button:hover{background-color:#005D92}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-menu-footer button:active{background-color:#00A0D6}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-menu-footer button:focus{background-color:#00A0D6}header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-menu-footer button svg>path{fill:#FFFFFF}@media screen and (min-width: 48em){header[data-header-theme=dotcom]>pn-marketweb-siteheader>header .siteheader-menu-footer [slot=menu-footer-cta]{display:none}}";
 let PnMarketwebSiteheader$1 = class extends HTMLElement {
   constructor() {
@@ -6678,7 +6678,47 @@ let PnSiteSelectorItem$1 = class extends HTMLElement {
   static get style() { return pnSiteSelectorItemCss; }
 };
-const pnTeaserCardCss = "pn-teaser-card{width:100%;height:100%;display:-ms-flexbox;display:flex}pn-teaser-card:hover{cursor:pointer}pn-teaser-card:hover .pn-teaser-card__container__image__container [slot=illustration] picture>img{-webkit-transform:scale(1.02);transform:scale(1.02);-webkit-filter:brightness(0.85);filter:brightness(0.85)}pn-teaser-card .pn-teaser-card__container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:start;justify-content:flex-start;border-radius:2.4rem}pn-teaser-card .pn-teaser-card__container__image__container{width:100%;position:relative}pn-teaser-card .pn-teaser-card__container__image__container>[slot=illustration]{-webkit-clip-path:ellipse(100% 90% at 50% 0%);clip-path:ellipse(100% 90% at 50% 0%);height:100%;overflow:hidden;border-top-left-radius:2.4rem;border-top-right-radius:2.4rem}pn-teaser-card .pn-teaser-card__container__image__container>[slot=illustration]>picture>img{width:100%;height:auto;-webkit-transition:0.4s ease-in-out;transition:0.4s ease-in-out;-webkit-transform:scale(1);transform:scale(1);aspect-ratio:16/9}pn-teaser-card .pn-teaser-card__container__content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;-ms-flex:1 1 100%;flex:1 1 100%;gap:32px;padding:2.4rem 2.4rem;padding-top:0}pn-teaser-card .pn-teaser-card__container__content__text__container>h1{font-weight:700;font-size:2.4rem;line-height:2.64rem}pn-teaser-card .pn-teaser-card__container__content__text__container>p{padding-top:1.6rem;font-weight:400;font-size:1.6rem;line-height:2.24rem}pn-teaser-card .pn-teaser-card__container__content__text__container__label{display:block;margin-bottom:1.6rem;font-weight:400;font-size:1.2rem;line-height:140%}pn-teaser-card .pn-teaser-card__container__content__cta>pn-button{-ms-flex-item-align:end;align-self:flex-end;width:100%}pn-teaser-card .pn-teaser-card__container__content__cta>pn-button a:hover{text-decoration:none}@media screen and (min-width: 768px){pn-teaser-card .pn-teaser-card__container__content__cta>pn-button{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}}pn-teaser-card[data-card-color=coral]>.pn-teaser-card__container{background-color:#FDEFEE}pn-teaser-card[data-card-color=green]>.pn-teaser-card__container{background-color:#DCF6E7}@media screen and (min-width: 1200px){.halfwidth pn-teaser-card .pn-teaser-card__container__content{padding:0 5.6rem 5.6rem}.halfwidth pn-teaser-card .pn-teaser-card__container__content__text__container>h1{font-weight:700;font-size:3.2rem;line-height:3.52rem}.halfwidth pn-teaser-card .pn-teaser-card__container__content__text__container>p{font-weight:400;font-size:2rem;line-height:2.8rem}}@media screen and (min-width: 768px){.fullwidth pn-teaser-card{min-height:350px}.fullwidth pn-teaser-card .pn-teaser-card__container{-ms-flex-direction:row;flex-direction:row}.fullwidth pn-teaser-card .pn-teaser-card__container__content{-ms-flex-item-align:center;align-self:center;gap:2.4rem;padding:3.2rem 3.2rem 3.2rem 2.4rem}.fullwidth pn-teaser-card .pn-teaser-card__container__image__container>[slot=illustration]{border-top-left-radius:2.4rem;border-bottom-left-radius:2.4rem;-webkit-clip-path:ellipse(100% 100% at 0% 50%);clip-path:ellipse(100% 100% at 0% 50%)}.fullwidth pn-teaser-card .pn-teaser-card__container__image__container>[slot=illustration]>picture>img{height:100%;-o-object-fit:cover;object-fit:cover}}@media screen and (min-width: 1200px){.fullwidth pn-teaser-card{min-height:520px}.fullwidth pn-teaser-card .pn-teaser-card__container__content{padding:4rem 4rem 4rem 3.2rem}.fullwidth pn-teaser-card .pn-teaser-card__container__content__text__container>h1{font-weight:700;font-size:4.8rem;line-height:5.28rem}.fullwidth pn-teaser-card .pn-teaser-card__container__content__text__container>p{font-size:2rem;line-height:2.8rem}}@media screen and (min-width: 768px){.fullwidth pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.fullwidth pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container__content{padding:3.2rem 2.4rem 3.2rem 3.2rem}.fullwidth pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container__image__container>[slot=illustration]{border-bottom-right-radius:2.4rem;-webkit-clip-path:ellipse(100% 100% at 100% 50%);clip-path:ellipse(100% 100% at 100% 50%)}}@media screen and (min-width: 1200px){.fullwidth pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container__content{padding:4rem 3.2rem 4rem 4rem}}";
+const pnStatsInfoCss = "pn-stats-info{width:100%}pn-stats-info .pn-stats-info__container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center;padding-top:2rem}@media screen and (min-width: 768px){pn-stats-info .pn-stats-info__container{padding-top:6rem}}@media screen and (min-width: 1200px){pn-stats-info .pn-stats-info__container{padding-top:8rem}}pn-stats-info .pn-stats-info__container__content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;padding:1rem;width:100%;background-color:#0D234B;background-repeat:no-repeat;background-position:bottom left;background-size:50%;background-blend-mode:overlay;padding-bottom:2rem}@media screen and (min-width: 768px){pn-stats-info .pn-stats-info__container__content{max-width:540px;background-position:-999px -999px;background-size:0;padding-bottom:4rem;padding-right:4rem}}@media screen and (min-width: 1200px){pn-stats-info .pn-stats-info__container__content{max-width:100%;padding-bottom:6rem;padding-right:6rem}}pn-stats-info .pn-stats-info__container__content__heading{color:#F06365;margin-bottom:2.4rem;-ms-flex-item-align:center;align-self:center;font-size:3rem;line-height:110%}@media screen and (min-width: 1200px){pn-stats-info .pn-stats-info__container__content__heading{font-weight:700;font-size:5.6rem}}pn-stats-info .pn-stats-info__container__content__data{height:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;min-height:20rem}pn-stats-info .pn-stats-info__container__map{display:none}@media screen and (min-width: 768px){pn-stats-info .pn-stats-info__container__map{display:block;max-width:460px;width:100%;background-color:#0D234B;background-repeat:no-repeat;background-position:bottom center;background-size:55%}}@media screen and (min-width: 1200px){pn-stats-info .pn-stats-info__container__map{background-size:contain}}";
+const mockArray = [
+  { preamble: 'Million parcels', data: 226, unit: null },
+  { preamble: 'weighted parcel delivery quality', data: 94.5, unit: '%' },
+  { preamble: 'billion letters and other mail items', data: 1.5, unit: '' },
+  { preamble: 'carbon dioxide emissions since 2009', data: -44, unit: '%' },
+];
+let PnStatsInfo$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.heading = 'Heading';
+    this.dataArray = mockArray;
+    this.backgroundUrl = null;
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "pn-stats-info__container" }, h("div", { class: "pn-stats-info__container__map", style: { backgroundImage: `url(${this.backgroundUrl})` } }), h("div", { class: "pn-stats-info__container__content", style: { backgroundImage: `url(${this.backgroundUrl})` } }, h("h3", { class: "pn-stats-info__container__content__heading" }, this.heading), h("div", { class: "pn-stats-info__container__content__data" }, this.dataArray.map(stats => {
+      return h("pn-stats-info-data", { data: stats.data, unit: stats.unit, preamble: stats.preamble });
+    }))))));
+  }
+  static get style() { return pnStatsInfoCss; }
+};
+const pnStatsInfoDataCss = "pn-stats-info-data{width:50%;}pn-stats-info-data .pn-stats-info-data__container{width:100%;background-color:transparent;color:#F06365;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;padding:2rem}pn-stats-info-data .pn-stats-info-data__container__content{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center}pn-stats-info-data .pn-stats-info-data__container__content__data{font-weight:700;font-size:3rem;line-height:110%}@media screen and (min-width: 1200px){pn-stats-info-data .pn-stats-info-data__container__content__data{font-size:6.8rem}}pn-stats-info-data .pn-stats-info-data__container__content__unit{font-weight:700;font-size:3rem;line-height:110%}@media screen and (min-width: 1200px){pn-stats-info-data .pn-stats-info-data__container__content__unit{font-size:6.8rem}}pn-stats-info-data .pn-stats-info-data__container__content__preamble{text-align:center;font-weight:400;font-size:1.4rem;line-height:110%;color:#FFFFFF}";
+let PnStatsInfoData$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.data = 0;
+    this.unit = '%';
+    this.preamble = 'carbon bla bla bla';
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "pn-stats-info-data__container" }, h("div", { class: "pn-stats-info-data__container__content" }, h("div", { class: "pn-stats-info-data__container__content__data" }, this.data), h("div", { class: "pn-stats-info-data__container__content__unit" }, this.unit)), h("div", { class: "pn-stats-info-data__container__content__preamble" }, this.preamble))));
+  }
+  static get style() { return pnStatsInfoDataCss; }
+};
+const pnTeaserCardCss = "pn-teaser-card{width:100%;height:100%;display:-ms-flexbox;display:flex;}pn-teaser-card .pn-teaser-card__container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:start;justify-content:flex-start;border-radius:2.4rem}pn-teaser-card .pn-teaser-card__container__image__container{width:100%;position:relative}pn-teaser-card .pn-teaser-card__container__image__container>[slot=illustration]{-webkit-clip-path:ellipse(100% 90% at 50% 0%);clip-path:ellipse(100% 90% at 50% 0%);height:100%;overflow:hidden;border-top-left-radius:2.4rem;border-top-right-radius:2.4rem}pn-teaser-card .pn-teaser-card__container__image__container>[slot=illustration]>picture>img{width:100%;height:auto;-webkit-transition:0.4s ease-in-out;transition:0.4s ease-in-out;-webkit-transform:scale(1);transform:scale(1);aspect-ratio:16/9}pn-teaser-card .pn-teaser-card__container__content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;-ms-flex:1 1 100%;flex:1 1 100%;gap:32px;padding:2.4rem 2.4rem;padding-top:0}pn-teaser-card .pn-teaser-card__container__content__text__container>h1{font-weight:700;font-size:2.4rem;line-height:2.64rem}pn-teaser-card .pn-teaser-card__container__content__text__container>p{padding-top:1.6rem;font-weight:400;font-size:1.6rem;line-height:2.24rem}pn-teaser-card .pn-teaser-card__container__content__text__container__label{display:block;margin-bottom:1.6rem;font-weight:400;font-size:1.2rem;line-height:140%}pn-teaser-card .pn-teaser-card__container__content__cta>pn-button{-ms-flex-item-align:end;align-self:flex-end;width:100%}pn-teaser-card .pn-teaser-card__container__content__cta>pn-button a:hover{text-decoration:none}pn-teaser-card .pn-teaser-card__container__content__cta>pn-button>button>.pn-button-bg,pn-teaser-card .pn-teaser-card__container__content__cta>pn-button>a>.pn-button-bg{-webkit-transition:0.4s ease-in-out;transition:0.4s ease-in-out}@media screen and (min-width: 768px){pn-teaser-card .pn-teaser-card__container__content__cta>pn-button{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}}pn-teaser-card[data-card-color=coral]>.pn-teaser-card__container{background-color:#FDEFEE}pn-teaser-card[data-card-color=green]>.pn-teaser-card__container{background-color:#DCF6E7}@media screen and (min-width: 1200px){.halfwidth pn-teaser-card .pn-teaser-card__container__content{padding:0 5.6rem 5.6rem}.halfwidth pn-teaser-card .pn-teaser-card__container__content__text__container>h1{font-weight:700;font-size:3.2rem;line-height:3.52rem}.halfwidth pn-teaser-card .pn-teaser-card__container__content__text__container>p{font-weight:400;font-size:2rem;line-height:2.8rem}}@media screen and (min-width: 768px){.fullwidth pn-teaser-card{min-height:350px}.fullwidth pn-teaser-card .pn-teaser-card__container{-ms-flex-direction:row;flex-direction:row}.fullwidth pn-teaser-card .pn-teaser-card__container__content{-ms-flex-item-align:center;align-self:center;gap:2.4rem;padding:3.2rem 3.2rem 3.2rem 2.4rem}.fullwidth pn-teaser-card .pn-teaser-card__container__image__container>[slot=illustration]{border-top-left-radius:2.4rem;border-bottom-left-radius:2.4rem;-webkit-clip-path:ellipse(100% 100% at 0% 50%);clip-path:ellipse(100% 100% at 0% 50%)}.fullwidth pn-teaser-card .pn-teaser-card__container__image__container>[slot=illustration]>picture>img{height:100%;-o-object-fit:cover;object-fit:cover}}@media screen and (min-width: 1200px){.fullwidth pn-teaser-card{min-height:520px}.fullwidth pn-teaser-card .pn-teaser-card__container__content{padding:4rem 4rem 4rem 3.2rem}.fullwidth pn-teaser-card .pn-teaser-card__container__content__text__container>h1{font-weight:700;font-size:4.8rem;line-height:5.28rem}.fullwidth pn-teaser-card .pn-teaser-card__container__content__text__container>p{font-size:2rem;line-height:2.8rem}}@media screen and (min-width: 768px){.fullwidth pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.fullwidth pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container__content{padding:3.2rem 2.4rem 3.2rem 3.2rem}.fullwidth pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container__image__container>[slot=illustration]{border-bottom-right-radius:2.4rem;-webkit-clip-path:ellipse(100% 100% at 100% 50%);clip-path:ellipse(100% 100% at 100% 50%)}}@media screen and (min-width: 1200px){.fullwidth pn-teaser-card[data-card-alignment=right] .pn-teaser-card__container__content{padding:4rem 3.2rem 4rem 4rem}}pn-teaser-card.teaser-card--hover-effect:hover{cursor:pointer}pn-teaser-card.teaser-card--hover-effect:hover .pn-teaser-card__container__image__container [slot=illustration] picture>img{-webkit-transform:scale(1.02);transform:scale(1.02);-webkit-filter:brightness(0.85);filter:brightness(0.85)}pn-teaser-card.teaser-card--hover-effect:hover pn-button button .pn-button-bg,pn-teaser-card.teaser-card--hover-effect:hover pn-button a .pn-button-bg{background-color:#0D234B}";
 let PnTeaserCard$1 = class extends HTMLElement {
   constructor() {
@@ -6686,9 +6726,9 @@ let PnTeaserCard$1 = class extends HTMLElement {
     this.__registerHost();
     var _a;
     //props
-    this.text = 'some short text describing whatever';
-    this.heading = 'some heading';
-    this.label = '';
+    this.text = null;
+    this.heading = null;
+    this.label = null;
     this.dataCardColor = 'coral';
     this.dataCardAlignment = 'left';
     this.labelToCapitals = (_a = this.label) === null || _a === void 0 ? void 0 : _a.toUpperCase();
@@ -6772,6 +6812,8 @@ const PnSiteFooter = /*@__PURE__*/proxyCustomElement(PnSiteFooter$1, [4,"pn-site
 const PnSiteFooterCol = /*@__PURE__*/proxyCustomElement(PnSiteFooterCol$1, [4,"pn-site-footer-col",{"theme":[513]}]);
 const PnSiteSelector = /*@__PURE__*/proxyCustomElement(PnSiteSelector$1, [4,"pn-site-selector",{"buttontext":[1537],"heading":[1537],"language":[1537],"i18n":[32]}]);
 const PnSiteSelectorItem = /*@__PURE__*/proxyCustomElement(PnSiteSelectorItem$1, [0,"pn-site-selector-item",{"url":[1],"heading":[1],"description":[1],"newwindow":[4]}]);
+const PnStatsInfo = /*@__PURE__*/proxyCustomElement(PnStatsInfo$1, [0,"pn-stats-info",{"heading":[1],"dataArray":[16],"backgroundUrl":[1,"background-url"]}]);
+const PnStatsInfoData = /*@__PURE__*/proxyCustomElement(PnStatsInfoData$1, [0,"pn-stats-info-data",{"data":[2],"unit":[1],"preamble":[1]}]);
 const PnTeaserCard = /*@__PURE__*/proxyCustomElement(PnTeaserCard$1, [4,"pn-teaser-card",{"text":[1],"heading":[1],"label":[1],"dataCardColor":[513,"data-card-color"],"dataCardAlignment":[513,"data-card-alignment"]}]);
 const PnTitletag = /*@__PURE__*/proxyCustomElement(PnTiletag, [4,"pn-titletag",{"icon":[1],"color":[1537]}]);
 const defineCustomElements = (opts) => {
@@ -6830,6 +6872,8 @@ const defineCustomElements = (opts) => {
   PnSiteFooterCol,
   PnSiteSelector,
   PnSiteSelectorItem,
+  PnStatsInfo,
+  PnStatsInfoData,
   PnTeaserCard,
   PnTitletag
     ].forEach(cmp => {
@@ -6840,4 +6884,4 @@ const defineCustomElements = (opts) => {
   }
 };
-export { PnBonusProgressbar, PnBonusProgressbarLevel, PnChoiceButton, PnCustomernumberSelector, PnCustomernumberSelectorOption, PnFilterCheckbox, PnFindPrice, PnFindPriceResult, PnFindServiceAndPrice, PnFindServiceAndPriceResult, PnLanguageSelector, PnLanguageSelectorOption, PnMainnav, PnMainnavLevel, PnMainnavLink, PnMainnavList, PnMarketwebInput, PnMarketwebSearch, PnMarketwebSitefooter, PnMarketwebSiteheader, PnMarketwebSiteheaderLogin, PnMarketwebSiteheaderLoginLinklist, PnMarketwebSiteheaderLoginLinks, PnMarketwebSiteheaderLoginProfileselection, PnMarketwebSiteheaderSearch, PnPexPricefinder, PnProductCard, PnProductCardInfo, PnProductCardPrice, PnProductPricelist, PnProductPricelistResult, PnProductTile, PnProductTileInfo, PnProductTilePrice, PnProfileModal, PnProfileModalCustomernumber, PnProfileModalProfile, PnProfileModalType, PnProfileSelector, PnProfileSelectorOption, PnProxioPricegroup, PnProxioProductcard, PnProxioProductcardDescription, PnProxioProductcardInformation, PnProxioProductcardPricelink, PnSidenav, PnSidenavLevel, PnSidenavLink, PnSidenavTogglebutton, PnSiteFooter, PnSiteFooterCol, PnSiteSelector, PnSiteSelectorItem, PnTeaserCard, PnTitletag, defineCustomElements };
+export { PnBonusProgressbar, PnBonusProgressbarLevel, PnChoiceButton, PnCustomernumberSelector, PnCustomernumberSelectorOption, PnFilterCheckbox, PnFindPrice, PnFindPriceResult, PnFindServiceAndPrice, PnFindServiceAndPriceResult, PnLanguageSelector, PnLanguageSelectorOption, PnMainnav, PnMainnavLevel, PnMainnavLink, PnMainnavList, PnMarketwebInput, PnMarketwebSearch, PnMarketwebSitefooter, PnMarketwebSiteheader, PnMarketwebSiteheaderLogin, PnMarketwebSiteheaderLoginLinklist, PnMarketwebSiteheaderLoginLinks, PnMarketwebSiteheaderLoginProfileselection, PnMarketwebSiteheaderSearch, PnPexPricefinder, PnProductCard, PnProductCardInfo, PnProductCardPrice, PnProductPricelist, PnProductPricelistResult, PnProductTile, PnProductTileInfo, PnProductTilePrice, PnProfileModal, PnProfileModalCustomernumber, PnProfileModalProfile, PnProfileModalType, PnProfileSelector, PnProfileSelectorOption, PnProxioPricegroup, PnProxioProductcard, PnProxioProductcardDescription, PnProxioProductcardInformation, PnProxioProductcardPricelink, PnSidenav, PnSidenavLevel, PnSidenavLink, PnSidenavTogglebutton, PnSiteFooter, PnSiteFooterCol, PnSiteSelector, PnSiteSelectorItem, PnStatsInfo, PnStatsInfoData, PnTeaserCard, PnTitletag, defineCustomElements };