@oiz/stzh-components 4.5.0 → 4.6.0-beta2

package/dist/esm/stzh-pi-teaser-layout.entry.js

@@ -3,7 +3,7 @@ import { m as media, a as addMediaChangeListener } from './media-utils-00a0cf24.
 import { h as hasSlot } from './utils-ba72c5a8.js';
 import './string-utils-a9af5463.js';
 
-const stzhPiTeaserLayoutCss = ".sc-stzh-pi-teaser-layout-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-pi-teaser-layout-h,[stzh-hidden].sc-stzh-pi-teaser-layout-h{display:none}.sc-stzh-pi-teaser-layout-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-pi-teaser-layout-h *.sc-stzh-pi-teaser-layout,.sc-stzh-pi-teaser-layout-h *.sc-stzh-pi-teaser-layout::before,.sc-stzh-pi-teaser-layout-h *.sc-stzh-pi-teaser-layout::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-pi-teaser-layout-h .has-focus.sc-stzh-pi-teaser-layout{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-pi-teaser-layout-h .stzh-fylingfocus-focused.sc-stzh-pi-teaser-layout{outline-style:none !important}.sc-stzh-pi-teaser-layout-h .stzh-fylingfocus-focused.sc-stzh-pi-teaser-layout::-moz-focus-inner{border:0 !important}.sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-columns:repeat(12, 1fr);--min-height:112.5rem;--max-height:118.75rem;--gap:1rem;--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n    \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\" \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\"\n    \"t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4\" \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\"\n    \"t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6\";--grid-pi-teaser-layout-rows:0.9fr 0.9fr 0.25fr 0.25fr 0.25fr 0.25fr}@media screen and (min-width: 600px){.sc-stzh-pi-teaser-layout-h{--gap:1.25rem;--min-height:118.75rem;--max-height:118.75rem;--grid-pi-teaser-layout-rows:0.9fr 0.9fr 0.25fr 0.25fr 0.25fr 0.25fr}}@media screen and (min-width: 900px){.sc-stzh-pi-teaser-layout-h{--gap:1.25rem;--min-height:96.875rem;--max-height:103.125rem;--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n      \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\"\n      \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\"\n      \"t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6\";--grid-pi-teaser-layout-rows:0.6fr 0.4fr 0.25fr 0.25fr}[has-side=true].sc-stzh-pi-teaser-layout-h{--min-height:146.875rem;--max-height:146.875rem;--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n      \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\"\n      \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\"\n      \"t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4\"\n      \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\"\n      \"t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6\";--grid-pi-teaser-layout-rows:0.85fr 0.85fr 0.4fr 0.4fr 0.36fr 0.36fr}}@media screen and (min-width: 1260px){.sc-stzh-pi-teaser-layout-h{--gap:1.5rem;--min-height:84.375rem;--max-height:84.375rem;--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n      \"t3 t3 t3 t3 t4 t4 t4 t4 t5 t5 t5 t5\"\n      \"t3 t3 t3 t3 t4 t4 t4 t4 t6 t6 t6 t6\";--grid-pi-teaser-layout-rows:0.7fr 0.3fr 0.3fr}[has-side=true].sc-stzh-pi-teaser-layout-h{--min-height:84.375rem;--max-height:84.375rem;--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n      \"t3 t3 t3 t3 t4 t4 t4 t4 t5 t5 t5 t5\"\n      \"t3 t3 t3 t3 t4 t4 t4 t4 t6 t6 t6 t6\";--grid-pi-teaser-layout-rows:0.7fr 0.3fr 0.3fr}}@media screen and (min-width: 1600px){.sc-stzh-pi-teaser-layout-h{--gap:2rem;--min-height:84.375rem;--max-height:84.375rem;--grid-pi-teaser-layout-rows:0.7fr 0.3fr 0.3fr}[has-side=true].sc-stzh-pi-teaser-layout-h{--min-height:84.375rem;--max-height:84.375rem;--grid-pi-teaser-layout-rows:0.7fr 0.3fr 0.3fr}}.sc-stzh-pi-teaser-layout-h .stzh-pi-teaser-layout-teaser.sc-stzh-pi-teaser-layout{background-color:white}.sc-stzh-pi-teaser-layout-h .stzh-pi-teaser-layout-teaser--1.sc-stzh-pi-teaser-layout{grid-area:t1}.sc-stzh-pi-teaser-layout-h .stzh-pi-teaser-layout-teaser--2.sc-stzh-pi-teaser-layout{grid-area:t2}.sc-stzh-pi-teaser-layout-h .stzh-pi-teaser-layout-teaser--3.sc-stzh-pi-teaser-layout{grid-area:t3}.sc-stzh-pi-teaser-layout-h .stzh-pi-teaser-layout-teaser--4.sc-stzh-pi-teaser-layout{grid-area:t4}.sc-stzh-pi-teaser-layout-h .stzh-pi-teaser-layout-teaser--5.sc-stzh-pi-teaser-layout{grid-area:t5}.sc-stzh-pi-teaser-layout-h .stzh-pi-teaser-layout-teaser--6.sc-stzh-pi-teaser-layout{grid-area:t6}[is-rubrick=true][amount=one].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\";--grid-pi-teaser-layout-rows:1fr;--min-height:34.375rem;--max-height:37.5rem}[is-rubrick=true][amount=two].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n    \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\";--grid-pi-teaser-layout-rows:1fr 1fr;--min-height:68.75rem;--max-height:75rem}[is-rubrick=true][amount=three].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n    \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\"\n    \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\";--grid-pi-teaser-layout-rows:1.1fr 1.1fr 0.6fr;--min-height:84.375rem;--max-height:87.5rem}[is-rubrick=true][amount=four].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n    \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\"\n    \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\"\n    \"t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4\";--grid-pi-teaser-layout-rows:1.1fr 1.1fr 0.55fr 0.55fr;--min-height:103.125rem;--max-height:103.125rem}[is-rubrick=true][amount=four].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n    \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\"\n    \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\"\n    \"t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4\";--grid-pi-teaser-layout-rows:1.1fr 1.1fr 0.55fr 0.55fr;--min-height:103.125rem;--max-height:103.125rem}[is-rubrick=true][amount=five].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n    \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\"\n    \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\"\n    \"t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4\"\n    \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\";--grid-pi-teaser-layout-rows:1fr 1fr 0.55fr 0.55fr 0.3fr;--min-height:112.5rem;--max-height:118.75rem}[is-rubrick=true][amount=six].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n    \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\"\n    \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\"\n    \"t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4\"\n    \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\"\n    \"t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6\";--grid-pi-teaser-layout-rows:1fr 1fr 0.63fr 0.63fr 0.3fr 0.3fr;--min-height:137.5rem;--max-height:143.75rem}@media screen and (min-width: 600px){[is-rubrick=true][amount=three].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-rows:1.2fr 1.2fr 0.42fr;--min-height:84.375rem;--max-height:87.5rem}[is-rubrick=true][amount=four].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-rows:1.2fr 1.2fr 0.42fr 0.42fr;--min-height:100rem;--max-height:106.25rem}[is-rubrick=true][amount=five].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-rows:1fr 1fr 0.42fr 0.42fr 0.26fr;--min-height:112.5rem;--max-height:118.75rem}[is-rubrick=true][amount=six].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-rows:1fr 1fr 0.42fr 0.42fr 0.26fr 0.26fr;--min-height:125rem;--max-height:131.25rem}}@media screen and (min-width: 900px){[is-rubrick=true][amount=one].sc-stzh-pi-teaser-layout-h,[is-rubrick=true][amount=two].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\";--grid-pi-teaser-layout-rows:1fr;--min-height:37.5rem;--max-height:40.625rem}[is-rubrick=true][amount=three].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n      \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\";--grid-pi-teaser-layout-rows:1fr 1fr;--min-height:75rem;--max-height:78.125rem}[is-rubrick=true][amount=three][has-side=true].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-rows:1fr 1fr;--min-height:71.875rem;--max-height:75rem}[is-rubrick=true][amount=four].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n      \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\";--grid-pi-teaser-layout-rows:1fr 1fr;--min-height:75rem;--max-height:78.125rem}[is-rubrick=true][amount=four][has-side=true].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-rows:1fr 1fr;--min-height:71.875rem;--max-height:75rem}[is-rubrick=true][amount=five].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n      \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\"\n      \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\";--grid-pi-teaser-layout-rows:1fr 1fr 0.35fr;--min-height:87.5rem;--max-height:93.75rem}[is-rubrick=true][amount=five][has-side=true].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-rows:1.1fr 1.1fr 0.35fr;--min-height:84.375rem;--max-height:87.5rem}[is-rubrick=true][amount=six].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n      \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\"\n      \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\"\n      \"t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6\";--grid-pi-teaser-layout-rows:1fr 1fr 0.35fr 0.35fr;--min-height:103.125rem;--max-height:106.25rem}[is-rubrick=true][amount=six][has-side=true].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-rows:1.2fr 1.2fr 0.4fr 0.4fr;--min-height:112.5rem;--max-height:112.5rem}}@media screen and (min-width: 1260px){[is-rubrick=true][amount=three][has-side=true].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n      \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\";--grid-pi-teaser-layout-rows:1fr 1fr;--min-height:81.25rem;--max-height:81.25rem}[is-rubrick=true][amount=four].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-template:\"t1 t1 t1 t2 t2 t2 t3 t3 t3 t4 t4 t4\"\n      \"t1 t1 t1 t2 t2 t2 t3 t3 t3 t4 t4 t4\";--grid-pi-teaser-layout-rows:1fr 1fr;--min-height:43.75rem;--max-height:50rem}[is-rubrick=true][amount=four][has-side=true].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n      \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\"\n      \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\";--grid-pi-teaser-layout-rows:1fr 0.5fr 0.5fr;--min-height:81.25rem;--max-height:81.25rem}[is-rubrick=true][amount=five].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-template:\"t1 t1 t1 t2 t2 t2 t3 t3 t3 t4 t4 t4\"\n      \"t1 t1 t1 t2 t2 t2 t3 t3 t3 t5 t5 t5\";--grid-pi-teaser-layout-rows:1fr 1fr;--min-height:43.75rem;--max-height:50rem}[is-rubrick=true][amount=five][has-side=true].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n      \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\"\n      \"t3 t3 t3 t3 t3 t3 t5 t5 t5 t5 t5 t5\";--grid-pi-teaser-layout-rows:1fr 0.45fr 0.45fr;--min-height:81.25rem;--max-height:81.25rem}[is-rubrick=true][amount=six].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-template:\"t1 t1 t1 t2 t2 t2 t3 t3 t3 t5 t5 t5\"\n      \"t1 t1 t1 t2 t2 t2 t4 t4 t4 t6 t6 t6\";--grid-pi-teaser-layout-rows:1fr 1fr;--min-height:43.75rem;--max-height:50rem}[is-rubrick=true][amount=six][has-side=true].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n      \"t3 t3 t3 t3 t3 t3 t5 t5 t5 t5 t5 t5\"\n      \"t4 t4 t4 t4 t4 t4 t6 t6 t6 t6 t6 t6\";--grid-pi-teaser-layout-rows:1fr 0.4fr 0.4fr;--min-height:75rem;--max-height:78.125rem}}[is-rubrick=true].sc-stzh-pi-teaser-layout-h .stzh-pi-teaser-layout-teaser--5--four.sc-stzh-pi-teaser-layout{display:none}[is-rubrick=true].sc-stzh-pi-teaser-layout-h .stzh-pi-teaser-layout-teaser--6--four.sc-stzh-pi-teaser-layout,[is-rubrick=true].sc-stzh-pi-teaser-layout-h .stzh-pi-teaser-layout-teaser--6--five.sc-stzh-pi-teaser-layout{display:none}.stzh-pi-teaser-layout.sc-stzh-pi-teaser-layout{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);width:100%;display:grid;gap:var(--gap);min-height:var(--min-height);max-height:var(--max-height);grid-template-columns:var(--grid-pi-teaser-layout-columns);grid-template-areas:var(--grid-pi-teaser-layout-template);grid-template-rows:var(--grid-pi-teaser-layout-rows)}@media screen and (min-width: 900px){.stzh-pi-teaser-layout.sc-stzh-pi-teaser-layout{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-pi-teaser-layout.sc-stzh-pi-teaser-layout>*.sc-stzh-pi-teaser-layout{min-height:0;overflow:hidden}.stzh-pi-teaser-layout__header-holder.sc-stzh-pi-teaser-layout{margin-bottom:var(--stzh-space-medium)}.stzh-pi-teaser-layout__header.sc-stzh-pi-teaser-layout{font-size:var(--stzh-font-curve-h2-default-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h2-default-text-line-height, var(--stzh-font-deci-text-line-height));letter-spacing:var(--stzh-font-curve-h2-default-text-letter-spacing);font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-style:var(--stzh-font-style-title);color:var(--stzh-heading-color);margin:0;padding-top:var(--stzh-space-medium);padding-bottom:var(--stzh-space-xxsmall)}@media screen and (min-width: 600px){.stzh-pi-teaser-layout__header.sc-stzh-pi-teaser-layout{font-size:var(--stzh-font-curve-h2-small-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h2-small-text-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h2-small-text-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 900px){.stzh-pi-teaser-layout__header.sc-stzh-pi-teaser-layout{font-size:var(--stzh-font-curve-h2-medium-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h2-medium-text-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h2-medium-text-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-pi-teaser-layout__header.sc-stzh-pi-teaser-layout{font-size:var(--stzh-font-curve-h2-ultra-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h2-ultra-text-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h2-ultra-text-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}@media screen and (min-width: 600px){.stzh-pi-teaser-layout__header.sc-stzh-pi-teaser-layout{padding-top:var(--stzh-space-large);padding-bottom:var(--stzh-space-xxsmall)}}@media screen and (min-width: 900px){.stzh-pi-teaser-layout__header.sc-stzh-pi-teaser-layout{padding-top:var(--stzh-space-xlarge);padding-bottom:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.stzh-pi-teaser-layout__header.sc-stzh-pi-teaser-layout{padding-top:var(--stzh-space-xxlarge);padding-bottom:var(--stzh-space-small)}}.stzh-pi-teaser-layout__bottom-slot.sc-stzh-pi-teaser-layout{margin-top:var(--stzh-space-medium);display:grid;justify-content:end}";
+const stzhPiTeaserLayoutCss = ".sc-stzh-pi-teaser-layout-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-pi-teaser-layout-h,[stzh-hidden].sc-stzh-pi-teaser-layout-h{display:none}.sc-stzh-pi-teaser-layout-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-pi-teaser-layout-h *.sc-stzh-pi-teaser-layout,.sc-stzh-pi-teaser-layout-h *.sc-stzh-pi-teaser-layout::before,.sc-stzh-pi-teaser-layout-h *.sc-stzh-pi-teaser-layout::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-pi-teaser-layout-h .has-focus.sc-stzh-pi-teaser-layout{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-pi-teaser-layout-h .stzh-fylingfocus-focused.sc-stzh-pi-teaser-layout{outline-style:none !important}.sc-stzh-pi-teaser-layout-h .stzh-fylingfocus-focused.sc-stzh-pi-teaser-layout::-moz-focus-inner{border:0 !important}.sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-columns:repeat(12, 1fr);--min-height:112.5rem;--max-height:118.75rem;--gap:1rem;--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n    \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\" \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\"\n    \"t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4\" \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\"\n    \"t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6\";--grid-pi-teaser-layout-rows:0.9fr 0.9fr 0.25fr 0.25fr 0.25fr 0.25fr}@media screen and (min-width: 600px){.sc-stzh-pi-teaser-layout-h{--gap:1.25rem;--min-height:118.75rem;--max-height:118.75rem;--grid-pi-teaser-layout-rows:0.9fr 0.9fr 0.25fr 0.25fr 0.25fr 0.25fr}}@media screen and (min-width: 900px){.sc-stzh-pi-teaser-layout-h{--gap:1.25rem;--min-height:96.875rem;--max-height:103.125rem;--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n      \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\"\n      \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\"\n      \"t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6\";--grid-pi-teaser-layout-rows:0.6fr 0.4fr 0.25fr 0.25fr}[has-side=true].sc-stzh-pi-teaser-layout-h{--min-height:146.875rem;--max-height:146.875rem;--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n      \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\"\n      \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\"\n      \"t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4\"\n      \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\"\n      \"t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6\";--grid-pi-teaser-layout-rows:0.85fr 0.85fr 0.4fr 0.4fr 0.36fr 0.36fr}}@media screen and (min-width: 1260px){.sc-stzh-pi-teaser-layout-h{--gap:1.5rem;--min-height:84.375rem;--max-height:84.375rem;--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n      \"t3 t3 t3 t3 t4 t4 t4 t4 t5 t5 t5 t5\"\n      \"t3 t3 t3 t3 t4 t4 t4 t4 t6 t6 t6 t6\";--grid-pi-teaser-layout-rows:0.7fr 0.3fr 0.3fr}[has-side=true].sc-stzh-pi-teaser-layout-h{--min-height:84.375rem;--max-height:84.375rem;--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n      \"t3 t3 t3 t3 t4 t4 t4 t4 t5 t5 t5 t5\"\n      \"t3 t3 t3 t3 t4 t4 t4 t4 t6 t6 t6 t6\";--grid-pi-teaser-layout-rows:0.7fr 0.3fr 0.3fr}}@media screen and (min-width: 1600px){.sc-stzh-pi-teaser-layout-h{--gap:2rem;--min-height:84.375rem;--max-height:84.375rem;--grid-pi-teaser-layout-rows:0.7fr 0.3fr 0.3fr}[has-side=true].sc-stzh-pi-teaser-layout-h{--min-height:84.375rem;--max-height:84.375rem;--grid-pi-teaser-layout-rows:0.7fr 0.3fr 0.3fr}}.sc-stzh-pi-teaser-layout-h .stzh-pi-teaser-layout-teaser.sc-stzh-pi-teaser-layout{background-color:white}.sc-stzh-pi-teaser-layout-h .stzh-pi-teaser-layout-teaser--1.sc-stzh-pi-teaser-layout{grid-area:t1}.sc-stzh-pi-teaser-layout-h .stzh-pi-teaser-layout-teaser--2.sc-stzh-pi-teaser-layout{grid-area:t2}.sc-stzh-pi-teaser-layout-h .stzh-pi-teaser-layout-teaser--3.sc-stzh-pi-teaser-layout{grid-area:t3}.sc-stzh-pi-teaser-layout-h .stzh-pi-teaser-layout-teaser--4.sc-stzh-pi-teaser-layout{grid-area:t4}.sc-stzh-pi-teaser-layout-h .stzh-pi-teaser-layout-teaser--5.sc-stzh-pi-teaser-layout{grid-area:t5}.sc-stzh-pi-teaser-layout-h .stzh-pi-teaser-layout-teaser--6.sc-stzh-pi-teaser-layout{grid-area:t6}[is-rubrick=true][amount=one].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\";--grid-pi-teaser-layout-rows:1fr;--min-height:32.8125rem;--max-height:37.5rem}[is-rubrick=true][amount=two].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n    \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\";--grid-pi-teaser-layout-rows:1fr 1fr;--min-height:65.625rem;--max-height:75rem}[is-rubrick=true][amount=three].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n    \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\"\n    \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\";--grid-pi-teaser-layout-rows:1.1fr 1.1fr 0.3fr;--min-height:75rem;--max-height:87.5rem}[is-rubrick=true][amount=four].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n    \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\"\n    \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\"\n    \"t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4\";--grid-pi-teaser-layout-rows:1fr 1fr 0.3fr 0.3fr;--min-height:87.5rem;--max-height:103.125rem}[is-rubrick=true][amount=five].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n    \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\"\n    \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\"\n    \"t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4\"\n    \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\";--grid-pi-teaser-layout-rows:1fr 1fr 0.3fr 0.3fr 0.3fr;--min-height:100rem;--max-height:118.75rem}[is-rubrick=true][amount=six].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n    \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\"\n    \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\"\n    \"t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4\"\n    \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\"\n    \"t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6\";--grid-pi-teaser-layout-rows:1fr 1fr 0.3fr 0.3fr 0.3fr 0.3fr;--min-height:112.5rem;--max-height:143.75rem}@media screen and (min-width: 600px){[is-rubrick=true][amount=three].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-rows:0.95fr 0.95fr 0.26fr;--min-height:81.25rem;--max-height:87.5rem}[is-rubrick=true][amount=four].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-rows:0.95fr 0.95fr 0.26fr 0.26fr;--min-height:93.75rem;--max-height:106.25rem}[is-rubrick=true][amount=five].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-rows:0.95fr 0.95fr 0.26fr 0.26fr 0.26fr;--min-height:103.125rem;--max-height:118.75rem}[is-rubrick=true][amount=six].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-rows:0.95fr 0.95fr 0.26fr 0.26fr 0.26fr 0.26fr;--min-height:112.5rem;--max-height:131.25rem}}@media screen and (min-width: 900px){[is-rubrick=true][amount=one].sc-stzh-pi-teaser-layout-h,[is-rubrick=true][amount=two].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\";--grid-pi-teaser-layout-rows:1fr;--min-height:37.5rem;--max-height:40.625rem}[is-rubrick=true][amount=three].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n      \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\";--grid-pi-teaser-layout-rows:1fr 1fr;--min-height:75rem;--max-height:78.125rem}[is-rubrick=true][amount=three][has-side=true].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-rows:1fr 1fr;--min-height:71.875rem;--max-height:75rem}[is-rubrick=true][amount=four].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n      \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\";--grid-pi-teaser-layout-rows:1fr 1fr;--min-height:75rem;--max-height:78.125rem}[is-rubrick=true][amount=four][has-side=true].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-rows:1fr 1fr;--min-height:71.875rem;--max-height:75rem}[is-rubrick=true][amount=five].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n      \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\"\n      \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\";--grid-pi-teaser-layout-rows:1fr 1fr 0.35fr;--min-height:87.5rem;--max-height:93.75rem}[is-rubrick=true][amount=five][has-side=true].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-rows:1.1fr 1.1fr 0.35fr;--min-height:84.375rem;--max-height:87.5rem}[is-rubrick=true][amount=six].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n      \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\"\n      \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\"\n      \"t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6\";--grid-pi-teaser-layout-rows:1fr 1fr 0.35fr 0.35fr;--min-height:103.125rem;--max-height:106.25rem}[is-rubrick=true][amount=six][has-side=true].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-rows:1.2fr 1.2fr 0.4fr 0.4fr;--min-height:112.5rem;--max-height:112.5rem}}@media screen and (min-width: 1260px){[is-rubrick=true][amount=three][has-side=true].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n      \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\";--grid-pi-teaser-layout-rows:1fr 1fr;--min-height:81.25rem;--max-height:81.25rem}[is-rubrick=true][amount=four].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-template:\"t1 t1 t1 t2 t2 t2 t3 t3 t3 t4 t4 t4\"\n      \"t1 t1 t1 t2 t2 t2 t3 t3 t3 t4 t4 t4\";--grid-pi-teaser-layout-rows:1fr 1fr;--min-height:35rem;--max-height:43.75rem}[is-rubrick=true][amount=four][has-side=true].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n      \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\"\n      \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\";--grid-pi-teaser-layout-rows:1fr 0.5fr 0.5fr;--min-height:75rem;--max-height:81.25rem}[is-rubrick=true][amount=five].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-template:\"t1 t1 t1 t2 t2 t2 t3 t3 t3 t4 t4 t4\"\n      \"t1 t1 t1 t2 t2 t2 t3 t3 t3 t5 t5 t5\";--grid-pi-teaser-layout-rows:1fr 1fr;--min-height:35rem;--max-height:43.75rem}[is-rubrick=true][amount=five][has-side=true].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n      \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\"\n      \"t3 t3 t3 t3 t3 t3 t5 t5 t5 t5 t5 t5\";--grid-pi-teaser-layout-rows:1fr 0.45fr 0.45fr;--min-height:75rem;--max-height:81.25rem}[is-rubrick=true][amount=six].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-template:\"t1 t1 t1 t2 t2 t2 t3 t3 t3 t5 t5 t5\"\n      \"t1 t1 t1 t2 t2 t2 t4 t4 t4 t6 t6 t6\";--grid-pi-teaser-layout-rows:1fr 1fr;--min-height:35rem;--max-height:43.75rem}[is-rubrick=true][amount=six][has-side=true].sc-stzh-pi-teaser-layout-h{--grid-pi-teaser-layout-template:\"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n      \"t3 t3 t3 t3 t3 t3 t5 t5 t5 t5 t5 t5\"\n      \"t4 t4 t4 t4 t4 t4 t6 t6 t6 t6 t6 t6\";--grid-pi-teaser-layout-rows:1fr 0.4fr 0.4fr;--min-height:75rem;--max-height:78.125rem}}[is-rubrick=true].sc-stzh-pi-teaser-layout-h .stzh-pi-teaser-layout-teaser--5--four.sc-stzh-pi-teaser-layout{display:none}[is-rubrick=true].sc-stzh-pi-teaser-layout-h .stzh-pi-teaser-layout-teaser--6--four.sc-stzh-pi-teaser-layout,[is-rubrick=true].sc-stzh-pi-teaser-layout-h .stzh-pi-teaser-layout-teaser--6--five.sc-stzh-pi-teaser-layout{display:none}.stzh-pi-teaser-layout.sc-stzh-pi-teaser-layout{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);width:100%;display:grid;gap:var(--gap);min-height:var(--min-height);max-height:var(--max-height);grid-template-columns:var(--grid-pi-teaser-layout-columns);grid-template-areas:var(--grid-pi-teaser-layout-template);grid-template-rows:var(--grid-pi-teaser-layout-rows)}@media screen and (min-width: 900px){.stzh-pi-teaser-layout.sc-stzh-pi-teaser-layout{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-pi-teaser-layout.sc-stzh-pi-teaser-layout>*.sc-stzh-pi-teaser-layout{min-height:0;overflow:hidden}.stzh-pi-teaser-layout__header-holder.sc-stzh-pi-teaser-layout{margin-bottom:var(--stzh-space-medium)}.stzh-pi-teaser-layout__header.sc-stzh-pi-teaser-layout{font-size:var(--stzh-font-curve-h2-default-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h2-default-text-line-height, var(--stzh-font-deci-text-line-height));letter-spacing:var(--stzh-font-curve-h2-default-text-letter-spacing);font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-style:var(--stzh-font-style-title);color:var(--stzh-heading-color);margin:0;padding-top:var(--stzh-space-medium);padding-bottom:var(--stzh-space-xxsmall)}@media screen and (min-width: 600px){.stzh-pi-teaser-layout__header.sc-stzh-pi-teaser-layout{font-size:var(--stzh-font-curve-h2-small-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h2-small-text-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h2-small-text-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 900px){.stzh-pi-teaser-layout__header.sc-stzh-pi-teaser-layout{font-size:var(--stzh-font-curve-h2-medium-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h2-medium-text-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h2-medium-text-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-pi-teaser-layout__header.sc-stzh-pi-teaser-layout{font-size:var(--stzh-font-curve-h2-ultra-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h2-ultra-text-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h2-ultra-text-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}@media screen and (min-width: 600px){.stzh-pi-teaser-layout__header.sc-stzh-pi-teaser-layout{padding-top:var(--stzh-space-large);padding-bottom:var(--stzh-space-xxsmall)}}@media screen and (min-width: 900px){.stzh-pi-teaser-layout__header.sc-stzh-pi-teaser-layout{padding-top:var(--stzh-space-xlarge);padding-bottom:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.stzh-pi-teaser-layout__header.sc-stzh-pi-teaser-layout{padding-top:var(--stzh-space-xxlarge);padding-bottom:var(--stzh-space-small)}}.stzh-pi-teaser-layout__bottom-slot.sc-stzh-pi-teaser-layout{margin-top:var(--stzh-space-medium);display:grid;justify-content:end}";
 const StzhPiTeaserLayoutStyle0 = stzhPiTeaserLayoutCss;
 
 var RubrickSize;
@@ -56,7 +56,7 @@ const StzhPiTeaserLayout = class {
         this.mediaChangeHandler();
         /**
           The Hero variant has 6 teaser items list requirement, if there is more the list will be cut if less an error will be shown.
-          The rubrick is either 4, 5 or 6 elements big if there is more the list will be cut to 6 if there is less we show an empty div for every empty element.
+          The rubrick is either 1,2,3,4,5 or 6 elements big if there is more the list will be cut to 6 if there is less we show an empty div for every empty element.
         **/
         this.contentList = this.contentList.slice(0, 6);
         if (this.variant == "rubrick" && this.contentList.length < 4) {
@@ -90,11 +90,14 @@ const StzhPiTeaserLayout = class {
                     case 2:
                         return big ? "L" : this.isMedium ? sideSize : this.isSmall ? "L" : "M";
                     case 3:
+                        if (rubrickSize == RubrickSize.xsmall) {
+                            return big ? "L" : this.isMedium ? sideSize : this.isSmall ? "S" : "XS";
+                        }
                         if (rubrickSize == RubrickSize.small) {
                             return big ? "L" : this.isMedium ? sideSize : this.isSmall ? "S" : "XS";
                         }
                         if (rubrickSize == RubrickSize.medium) {
-                            return big ? "L" : this.isMedium ? sideSize : this.isSmall ? "L" : "M";
+                            return big ? "L" : this.isMedium ? sideSize : this.isSmall ? "S" : "XS";
                         }
                         if (rubrickSize == RubrickSize.large) {
                             return big ? "M" : this.isMedium ? sideSize : this.isSmall ? "S" : "XS";
@@ -149,7 +152,10 @@ const StzhPiTeaserLayout = class {
                             return big ? lead : this.isMedium ? lead : this.isSmall ? lead : null;
                         }
                         if (rubrickSize == RubrickSize.large) {
-                            return this.isUltra ? null : this.isLarge ? null : this.isMedium ? lead : null;
+                            if (this.hasSide) {
+                                return this.isUltra ? null : this.isLarge ? null : this.isMedium ? lead : null;
+                            }
+                            return this.isUltra ? lead : this.isLarge ? lead : this.isMedium ? lead : null;
                         }
                         return big ? lead : this.isMedium ? lead : null;
                     case 4:
@@ -157,22 +163,34 @@ const StzhPiTeaserLayout = class {
                             return big ? lead : this.isMedium ? lead : this.isSmall ? lead : null;
                         }
                         if (rubrickSize == RubrickSize.medium) {
-                            return this.isUltra ? null : this.isLarge ? null : this.isMedium ? lead : null;
+                            if (this.hasSide) {
+                                return this.isUltra ? null : this.isLarge ? null : this.isMedium ? lead : null;
+                            }
+                            return this.isUltra ? lead : this.isLarge ? lead : this.isMedium ? lead : null;
                         }
                         if (rubrickSize == RubrickSize.large) {
-                            return this.isUltra ? null : this.isLarge ? null : this.isMedium ? lead : null;
+                            if (this.hasSide) {
+                                return this.isUltra ? null : this.isLarge ? null : this.isMedium ? lead : null;
+                            }
+                            return this.isUltra ? lead : this.isLarge ? lead : this.isMedium ? lead : null;
                         }
                         return big ? lead : this.isMedium ? lead : null;
                     case 5:
                         if (noImage) {
                             return big ? lead : this.isMedium ? lead : null;
                         }
-                        return null;
+                        if (this.hasSide) {
+                            return null;
+                        }
+                        return big ? lead : this.isMedium ? null : null;
                     case 6:
                         if (noImage) {
                             return big ? lead : this.isMedium ? lead : null;
                         }
-                        return null;
+                        if (this.hasSide) {
+                            return null;
+                        }
+                        return big ? lead : this.isMedium ? null : null;
                 }
             }
             else {
@@ -211,34 +229,43 @@ const StzhPiTeaserLayout = class {
                     case 3:
                         if (rubrickSize == RubrickSize.medium) {
                             if (this.hasSide) {
-                                return big ? "top" : this.isMedium ? "top" : this.isSmall ? "right" : "top";
+                                return big ? "top" : this.isMedium ? "top" : this.isSmall ? null : null;
                             }
                         }
+                        if (rubrickSize == RubrickSize.large) {
+                            if (this.hasSide) {
+                                return big ? "right" : this.isMedium ? "top" : this.isSmall ? null : null;
+                            }
+                            return big ? null : this.isMedium ? "top" : this.isSmall ? null : null;
+                        }
+                        return big ? "top" : this.isMedium ? "top" : this.isSmall ? null : null;
                     case 4:
                         if (rubrickSize == RubrickSize.medium) {
                             if (this.hasSide) {
-                                return big ? "right" : this.isMedium ? "top" : this.isSmall ? "right" : "top";
+                                return big ? "right" : this.isMedium ? "top" : this.isSmall ? null : null;
                             }
+                            return big ? null : this.isMedium ? "top" : this.isSmall ? null : null;
                         }
                         if (rubrickSize == RubrickSize.large) {
                             if (this.hasSide) {
-                                return big ? "right" : this.isMedium ? "top" : this.isSmall ? "right" : "top";
+                                return big ? "right" : this.isMedium ? "top" : this.isSmall ? null : null;
                             }
+                            return big ? null : this.isMedium ? "top" : this.isSmall ? null : null;
                         }
-                        return big ? "top" : this.isMedium ? "top" : this.isSmall ? "right" : "top";
+                        return big ? "top" : this.isMedium ? "top" : this.isSmall ? null : null;
                     case 5:
-                        if (rubrickSize == RubrickSize.medium) {
+                        if (rubrickSize == RubrickSize.medium || rubrickSize == RubrickSize.large) {
                             if (this.hasSide) {
                                 return big ? "right" : this.isMedium ? "right" : null;
                             }
-                            return big ? "top" : this.isMedium ? "right" : null;
+                            return big ? null : this.isMedium ? "right" : null;
                         }
                     case 6:
                         if (rubrickSize == RubrickSize.large) {
                             if (this.hasSide) {
                                 return big ? "right" : this.isMedium ? "right" : null;
                             }
-                            return big ? "top" : this.isMedium ? "right" : null;
+                            return big ? null : this.isMedium ? "right" : null;
                         }
                 }
             }
@@ -269,7 +296,7 @@ const StzhPiTeaserLayout = class {
             [`stzh-pi-teaser-layout-teaser--${index + 1}--${rubrickSize}`]: true,
             [`stzh-pi-teaser-layout-teaser--${index + 1}--${rubrickSize}--${this.hasSide ? "side" : "no-side"}`]: true,
         });
-        return (h(Host, { "is-rubrick": isRubrick ? "true" : "false", amount: rubrickSize, "has-side": this.hasSide ? "true" : "false" }, hasHeading && (h("div", { class: "stzh-pi-teaser-layout__header-holder" }, h(Heading, { class: "stzh-pi-teaser-layout__header", level: this.headingLevel }, this.heading))), h("div", { class: classes }, ...this.contentList.map((teaser, index) => teaser.type == "empty-teaser" ? (h("div", { class: teaserClasses(index) })) : (h("stzh-pi-teaser", { key: index, href: teaser.href, dateline: teaser.dateline, heading: teaser.heading, date: teaser.date, imageSrc: teaser.imageSrc, contentSize: contentSizeBehavior(index + 1), lead: leadBehavior(teaser.lead, index + 1, teaser.imageSrc), imagePosition: imageBehavior(teaser.imageSrc, index + 1), isHero: !isRubrick, class: teaserClasses(index) })))), bottomSlotUsed && (h("div", { class: "stzh-pi-teaser-layout__bottom-slot" }, h("slot", { name: "bottom" })))));
+        return (h(Host, { "is-rubrick": isRubrick ? "true" : "false", amount: rubrickSize, "has-side": this.hasSide ? "true" : "false" }, hasHeading && (h("div", { class: "stzh-pi-teaser-layout__header-holder" }, h(Heading, { class: "stzh-pi-teaser-layout__header", level: this.headingLevel }, this.heading))), h("div", { class: classes }, ...this.contentList.map((teaser, index) => teaser.type == "empty-teaser" ? (h("div", { class: teaserClasses(index) })) : (h("stzh-pi-teaser-layout-item", { key: index, href: teaser.href, dateline: teaser.dateline, heading: teaser.heading, date: teaser.date, imageSrc: teaser.imageSrc, contentSize: contentSizeBehavior(index + 1), lead: leadBehavior(teaser.lead, index + 1, teaser.imageSrc), imagePosition: imageBehavior(teaser.imageSrc, index + 1), class: teaserClasses(index) })))), bottomSlotUsed && (h("div", { class: "stzh-pi-teaser-layout__bottom-slot" }, h("slot", { name: "bottom" })))));
     }
     get element() { return getElement(this); }
 };

package/dist/esm/stzh-pi-teaser-layout.entry.js.map

@@ -1 +1 @@
-{"file":"stzh-pi-teaser-layout.entry.js","mappings":"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","names":[],"sources":["src/components/CMS/stzh-pi-teaser-layout/stzh-pi-teaser-layout.scss?tag=stzh-pi-teaser-layout&encapsulation=scoped","src/components/CMS/stzh-pi-teaser-layout/stzh-pi-teaser-layout.tsx"],"sourcesContent":[":host {\n  --grid-pi-teaser-layout-columns: repeat(12, 1fr);\n  --min-height: 1800px;\n  --max-height: 1900px;\n  --gap: 16px;\n\n  // Default mobile layout\n  --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n    \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\" \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\"\n    \"t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4\" \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\"\n    \"t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6\";\n  --grid-pi-teaser-layout-rows: 0.9fr 0.9fr 0.25fr 0.25fr 0.25fr 0.25fr;\n\n  // Small mobile layout\n  @include mq($from: small) {\n    --gap: 20px;\n    --min-height: 1900px;\n    --max-height: 1900px;\n    --grid-pi-teaser-layout-rows: 0.9fr 0.9fr 0.25fr 0.25fr 0.25fr 0.25fr;\n  }\n\n  // Medium mobile layout\n  @include mq($from: medium) {\n    --gap: 20px;\n    --min-height: 1550px;\n    --max-height: 1650px;\n    --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n      \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\"\n      \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\"\n      \"t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6\";\n    --grid-pi-teaser-layout-rows: 0.6fr 0.4fr 0.25fr 0.25fr;\n\n    &[has-side=\"true\"] {\n      --min-height: 2350px;\n      --max-height: 2350px;\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n        \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\"\n        \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\"\n        \"t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4\"\n        \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\"\n        \"t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6\";\n      --grid-pi-teaser-layout-rows: 0.85fr 0.85fr 0.4fr 0.4fr 0.36fr 0.36fr;\n    }\n  }\n\n  // Large mobile layout\n  @include mq($from: large) {\n    --gap: 24px;\n    --min-height: 1350px;\n    --max-height: 1350px;\n    --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n      \"t3 t3 t3 t3 t4 t4 t4 t4 t5 t5 t5 t5\"\n      \"t3 t3 t3 t3 t4 t4 t4 t4 t6 t6 t6 t6\";\n    --grid-pi-teaser-layout-rows: 0.7fr 0.3fr 0.3fr;\n\n    &[has-side=\"true\"] {\n      --min-height: 1350px;\n      --max-height: 1350px;\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n        \"t3 t3 t3 t3 t4 t4 t4 t4 t5 t5 t5 t5\"\n        \"t3 t3 t3 t3 t4 t4 t4 t4 t6 t6 t6 t6\";\n      --grid-pi-teaser-layout-rows: 0.7fr 0.3fr 0.3fr;\n    }\n  }\n\n  // Ultra mobile layout\n  @include mq($from: ultra) {\n    --gap: 32px;\n    --min-height: 1350px;\n    --max-height: 1350px;\n    --grid-pi-teaser-layout-rows: 0.7fr 0.3fr 0.3fr;\n\n    &[has-side=\"true\"] {\n      --min-height: 1350px;\n      --max-height: 1350px;\n      --grid-pi-teaser-layout-rows: 0.7fr 0.3fr 0.3fr;\n    }\n  }\n\n  .stzh-pi-teaser-layout-teaser {\n    background-color: white;\n\n    &--1 {\n      grid-area: t1;\n    }\n\n    &--2 {\n      grid-area: t2;\n    }\n\n    &--3 {\n      grid-area: t3;\n    }\n\n    &--4 {\n      grid-area: t4;\n    }\n\n    &--5 {\n      grid-area: t5;\n    }\n\n    &--6 {\n      grid-area: t6;\n    }\n  }\n\n  // Rubrick layouts\n  &[is-rubrick=\"true\"] {\n    // Mobile rubrick layouts\n    &[amount=\"one\"] {\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\";\n      --grid-pi-teaser-layout-rows: 1fr;\n      --min-height: 550px;\n      --max-height: 600px;\n    }\n\n    &[amount=\"two\"] {\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n        \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\";\n      --grid-pi-teaser-layout-rows: 1fr 1fr;\n      --min-height: 1100px;\n      --max-height: 1200px;\n    }\n\n    &[amount=\"three\"] {\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n        \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\"\n        \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\";\n      --grid-pi-teaser-layout-rows: 1.1fr 1.1fr 0.6fr;\n      --min-height: 1350px;\n      --max-height: 1400px;\n    }\n\n    &[amount=\"four\"] {\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n        \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\"\n        \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\"\n        \"t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4\";\n      --grid-pi-teaser-layout-rows: 1.1fr 1.1fr 0.55fr 0.55fr;\n      --min-height: 1650px;\n      --max-height: 1650px;\n    }\n\n    &[amount=\"four\"] {\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n        \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\"\n        \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\"\n        \"t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4\";\n      --grid-pi-teaser-layout-rows: 1.1fr 1.1fr 0.55fr 0.55fr;\n      --min-height: 1650px;\n      --max-height: 1650px;\n    }\n\n    &[amount=\"five\"] {\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n        \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\"\n        \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\"\n        \"t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4\"\n        \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\";\n      --grid-pi-teaser-layout-rows: 1fr 1fr 0.55fr 0.55fr 0.3fr;\n      --min-height: 1800px;\n      --max-height: 1900px;\n    }\n\n    &[amount=\"six\"] {\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n        \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\"\n        \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\"\n        \"t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4\"\n        \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\"\n        \"t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6\";\n      --grid-pi-teaser-layout-rows: 1fr 1fr 0.63fr 0.63fr 0.3fr 0.3fr;\n      --min-height: 2200px;\n      --max-height: 2300px;\n    }\n\n    // Small breakpoint rubrick layouts\n    @include mq($from: small) {\n      &[amount=\"three\"] {\n        --grid-pi-teaser-layout-rows: 1.2fr 1.2fr 0.42fr;\n        --min-height: 1350px;\n        --max-height: 1400px;\n      }\n\n      &[amount=\"four\"] {\n        --grid-pi-teaser-layout-rows: 1.2fr 1.2fr 0.42fr 0.42fr;\n        --min-height: 1600px;\n        --max-height: 1700px;\n      }\n\n      &[amount=\"five\"] {\n        --grid-pi-teaser-layout-rows: 1fr 1fr 0.42fr 0.42fr 0.26fr;\n        --min-height: 1800px;\n        --max-height: 1900px;\n      }\n\n      &[amount=\"six\"] {\n        --grid-pi-teaser-layout-rows: 1fr 1fr 0.42fr 0.42fr 0.26fr 0.26fr;\n        --min-height: 2000px;\n        --max-height: 2100px;\n      }\n    }\n\n    // Medium breakpoint rubrick layouts\n    @include mq($from: medium) {\n      &[amount=\"one\"],\n      &[amount=\"two\"] {\n        --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\";\n        --grid-pi-teaser-layout-rows: 1fr;\n        --min-height: 600px;\n        --max-height: 650px;\n      }\n\n      &[amount=\"three\"] {\n        --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n          \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\";\n        --grid-pi-teaser-layout-rows: 1fr 1fr;\n        --min-height: 1200px;\n        --max-height: 1250px;\n\n        &[has-side=\"true\"] {\n          --grid-pi-teaser-layout-rows: 1fr 1fr;\n          --min-height: 1150px;\n          --max-height: 1200px;\n        }\n      }\n\n      &[amount=\"four\"] {\n        --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n          \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\";\n        --grid-pi-teaser-layout-rows: 1fr 1fr;\n        --min-height: 1200px;\n        --max-height: 1250px;\n\n        &[has-side=\"true\"] {\n          --grid-pi-teaser-layout-rows: 1fr 1fr;\n          --min-height: 1150px;\n          --max-height: 1200px;\n        }\n      }\n\n      &[amount=\"five\"] {\n        --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n          \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\"\n          \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\";\n        --grid-pi-teaser-layout-rows: 1fr 1fr 0.35fr;\n        --min-height: 1400px;\n        --max-height: 1500px;\n\n        &[has-side=\"true\"] {\n          --grid-pi-teaser-layout-rows: 1.1fr 1.1fr 0.35fr;\n          --min-height: 1350px;\n          --max-height: 1400px;\n        }\n      }\n\n      &[amount=\"six\"] {\n        --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n          \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\"\n          \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\"\n          \"t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6\";\n        --grid-pi-teaser-layout-rows: 1fr 1fr 0.35fr 0.35fr;\n        --min-height: 1650px;\n        --max-height: 1700px;\n\n        &[has-side=\"true\"] {\n          --grid-pi-teaser-layout-rows: 1.2fr 1.2fr 0.4fr 0.4fr;\n          --min-height: 1800px;\n          --max-height: 1800px;\n        }\n      }\n    }\n\n    // Large breakpoint rubrick layouts\n    @include mq($from: large) {\n      &[amount=\"three\"] {\n        &[has-side=\"true\"] {\n          --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n            \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\";\n          --grid-pi-teaser-layout-rows: 1fr 1fr;\n          --min-height: 1300px;\n          --max-height: 1300px;\n        }\n      }\n\n      &[amount=\"four\"] {\n        --grid-pi-teaser-layout-template: \"t1 t1 t1 t2 t2 t2 t3 t3 t3 t4 t4 t4\"\n          \"t1 t1 t1 t2 t2 t2 t3 t3 t3 t4 t4 t4\";\n        --grid-pi-teaser-layout-rows: 1fr 1fr;\n        --min-height: 700px;\n        --max-height: 800px;\n\n        &[has-side=\"true\"] {\n          --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n            \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\"\n            \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\";\n          --grid-pi-teaser-layout-rows: 1fr 0.5fr 0.5fr;\n          --min-height: 1300px;\n          --max-height: 1300px;\n        }\n      }\n\n      &[amount=\"five\"] {\n        --grid-pi-teaser-layout-template: \"t1 t1 t1 t2 t2 t2 t3 t3 t3 t4 t4 t4\"\n          \"t1 t1 t1 t2 t2 t2 t3 t3 t3 t5 t5 t5\";\n        --grid-pi-teaser-layout-rows: 1fr 1fr;\n        --min-height: 700px;\n        --max-height: 800px;\n\n        &[has-side=\"true\"] {\n          --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n            \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\"\n            \"t3 t3 t3 t3 t3 t3 t5 t5 t5 t5 t5 t5\";\n          --grid-pi-teaser-layout-rows: 1fr 0.45fr 0.45fr;\n          --min-height: 1300px;\n          --max-height: 1300px;\n        }\n      }\n\n      &[amount=\"six\"] {\n        --grid-pi-teaser-layout-template: \"t1 t1 t1 t2 t2 t2 t3 t3 t3 t5 t5 t5\"\n          \"t1 t1 t1 t2 t2 t2 t4 t4 t4 t6 t6 t6\";\n        --grid-pi-teaser-layout-rows: 1fr 1fr;\n        --min-height: 700px;\n        --max-height: 800px;\n\n        &[has-side=\"true\"] {\n          --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n            \"t3 t3 t3 t3 t3 t3 t5 t5 t5 t5 t5 t5\"\n            \"t4 t4 t4 t4 t4 t4 t6 t6 t6 t6 t6 t6\";\n          --grid-pi-teaser-layout-rows: 1fr 0.4fr 0.4fr;\n          --min-height: 1200px;\n          --max-height: 1250px;\n        }\n      }\n    }\n\n    // Hide elements that shouldn't be displayed\n    .stzh-pi-teaser-layout-teaser {\n      &--5 {\n        &--four {\n          display: none;\n        }\n      }\n\n      &--6 {\n        &--four,\n        &--five {\n          display: none;\n        }\n      }\n    }\n  }\n}\n\n.stzh-pi-teaser-layout {\n  @include fontCurve(\"p1\");\n  width: 100%;\n  display: grid;\n  gap: var(--gap);\n  min-height: var(--min-height);\n  max-height: var(--max-height);\n  grid-template-columns: var(--grid-pi-teaser-layout-columns);\n  grid-template-areas: var(--grid-pi-teaser-layout-template);\n  grid-template-rows: var(--grid-pi-teaser-layout-rows);\n\n  & > * {\n    /* Prevents content from expanding grid items */\n    min-height: 0;\n    overflow: hidden;\n  }\n\n  &__header-holder {\n    margin-bottom: space(\"medium\");\n  }\n\n  &__header {\n    @include fontCurve(\"h2\");\n    @include font(\"title\");\n    color: var(--stzh-heading-color);\n\n    margin: 0;\n    padding-top: space(\"medium\");\n    padding-bottom: space(\"xxsmall\");\n\n    @include mq($from: small) {\n      padding-top: space(\"large\");\n      padding-bottom: space(\"xxsmall\");\n    }\n\n    @include mq($from: medium) {\n      padding-top: space(\"xlarge\");\n      padding-bottom: space(\"xsmall\");\n    }\n\n    @include mq($from: large) {\n      padding-top: space(\"xxlarge\");\n      padding-bottom: space(\"small\");\n    }\n  }\n\n  &__bottom-slot {\n    margin-top: space(\"medium\");\n    display: grid;\n    justify-content: end;\n  }\n}\n","import { Component, h, Element, Host, Prop, State } from \"@stencil/core\";\nimport { addMediaChangeListener, media } from \"../../../utils/media-utils\";\nimport { hasSlot } from \"../../../utils/utils\";\nimport { EmptyTeaser, PiTeaser } from \"../../..\";\n\nexport enum RubrickSize {\n  xxxsmall = \"one\",\n  xxsmall = \"two\",\n  xsmall = \"three\",\n  small = \"four\",\n  medium = \"five\",\n  large = \"six\",\n}\n\nconst getRubrickSize = (length: number): RubrickSize => {\n  switch (length) {\n    case 1:\n      return RubrickSize.xxxsmall;\n    case 2:\n      return RubrickSize.xxsmall;\n    case 3:\n      return RubrickSize.xsmall;\n    case 4:\n      return RubrickSize.small;\n    case 5:\n      return RubrickSize.medium;\n    case 6:\n      return RubrickSize.large;\n    default:\n      return null;\n  }\n};\n\n@Component({\n  tag: \"stzh-pi-teaser-layout\",\n  styleUrl: \"stzh-pi-teaser-layout.scss\",\n  scoped: true,\n})\nexport class StzhPiTeaserLayout {\n  /**\n    Variant specifies which grid is being shown\n  **/\n  @Prop() variant: \"hero\" | \"rubrick\" = \"hero\";\n\n  /**\n    Aside changes the grid behavior when the layout is presented beside other content aside like menu\n  **/\n  @Prop() hasSide: boolean = false;\n\n  /**  Heading for the section **/\n  @Prop() heading: string = \"\";\n\n  /** Heading level, for accessibility, no visual impact */\n  @Prop({ reflect: true }) headingLevel: \"1\" | \"2\" | \"3\" = \"3\";\n\n  /**\n    The Hero variant has 6 teaser items list requirement, if there is more the list will be cut if less an error will be shown.\n    The rubrick is either 4, 5 or 6 elements big if there is more the list will be cut to 6 if there is less we show an empty div for every empty element.\n  **/\n  @Prop() contentList: PiTeaser[] | EmptyTeaser[] = [];\n\n  /** Break points for displays */\n  @State() isSmall: boolean;\n  @State() isMedium: boolean;\n  @State() isLarge: boolean;\n  @State() isUltra: boolean;\n\n  @Element() element: HTMLStzhPiPagetitleElement;\n\n  componentDidLoad() {\n    this.mediaChangeHandler();\n    /**\n      The Hero variant has 6 teaser items list requirement, if there is more the list will be cut if less an error will be shown.\n      The rubrick is either 4, 5 or 6 elements big if there is more the list will be cut to 6 if there is less we show an empty div for every empty element.\n    **/\n    this.contentList = this.contentList.slice(0, 6);\n\n    if (this.variant == \"rubrick\" && this.contentList.length < 4) {\n      // Always make sure you have at least 4 elements\n      if ((this.isLarge || this.isUltra) && !this.hasSide) {\n        const paddingNeeded = Math.max(0, 4 - this.contentList.length);\n        this.contentList = [...this.contentList, ...Array(paddingNeeded).fill({ type: \"empty-teaser\" })];\n      }\n    }\n  }\n\n  private mediaChangeHandler = () => {\n    this.isSmall = media(\"small\").matches;\n    this.isMedium = media(\"medium\").matches;\n    this.isLarge = media(\"large\").matches;\n    this.isUltra = media(\"ultra\").matches;\n  };\n\n  connectedCallback() {\n    addMediaChangeListener(this.mediaChangeHandler);\n  }\n\n  render() {\n    const isRubrick = this.variant == \"rubrick\";\n    const rubrickSize: RubrickSize = getRubrickSize(this.contentList.length);\n    const Heading = `h${this.headingLevel}`;\n    const classes = {\n      \"stzh-pi-teaser-layout\": true,\n      \"stzh-pi-teaser-layout--rubrick\": isRubrick,\n      \"stzh-pi-teaser-layout--has-side\": this.hasSide,\n    };\n    const hasHeading = !!this.heading;\n    const bottomSlotUsed = hasSlot(this.element, \"bottom\");\n\n    const contentSizeBehavior = (index: number): \"XS\" | \"S\" | \"M\" | \"L\" | \"XL\" => {\n      const big = this.isUltra || this.isLarge;\n      const sideSize = this.hasSide ? \"M\" : \"L\";\n\n      if (isRubrick) {\n        switch (index) {\n          case 1:\n          case 2:\n            return big ? \"L\" : this.isMedium ? sideSize : this.isSmall ? \"L\" : \"M\";\n          case 3:\n            if (rubrickSize == RubrickSize.small) {\n              return big ? \"L\" : this.isMedium ? sideSize : this.isSmall ? \"S\" : \"XS\";\n            }\n            if (rubrickSize == RubrickSize.medium) {\n              return big ? \"L\" : this.isMedium ? sideSize : this.isSmall ? \"L\" : \"M\";\n            }\n            if (rubrickSize == RubrickSize.large) {\n              return big ? \"M\" : this.isMedium ? sideSize : this.isSmall ? \"S\" : \"XS\";\n            }\n          case 4:\n            if (rubrickSize == RubrickSize.small) {\n              return big ? \"L\" : this.isMedium ? sideSize : this.isSmall ? \"S\" : \"XS\";\n            }\n            if (rubrickSize == RubrickSize.medium) {\n              return big ? \"M\" : this.isMedium ? sideSize : this.isSmall ? \"S\" : \"XS\";\n            }\n            if (rubrickSize == RubrickSize.large) {\n              return big ? \"M\" : this.isMedium ? sideSize : this.isSmall ? \"S\" : \"XS\";\n            }\n          case 5:\n            if (rubrickSize == RubrickSize.medium) {\n              return big ? \"M\" : this.isMedium ? \"M\" : this.isSmall ? \"S\" : \"XS\";\n            }\n            if (rubrickSize == RubrickSize.large) {\n              return big ? \"M\" : this.isMedium ? \"M\" : this.isSmall ? \"S\" : \"XS\";\n            }\n          case 6:\n            if (rubrickSize == RubrickSize.large) {\n              return big ? \"M\" : this.isMedium ? \"M\" : this.isSmall ? \"S\" : \"XS\";\n            }\n        }\n      } else {\n        switch (index) {\n          case 1:\n          case 2:\n            return big ? \"XL\" : this.isMedium ? \"L\" : this.isSmall ? \"L\" : \"M\";\n          case 3:\n          case 4:\n            return big ? \"L\" : this.isMedium ? \"M\" : this.isSmall ? \"S\" : \"XS\";\n          case 5:\n          case 6:\n            return big ? \"M\" : this.isMedium ? \"M\" : this.isSmall ? \"S\" : \"XS\";\n        }\n      }\n    };\n\n    const leadBehavior = (lead: string | null, index: number, imageSrc: string | null): string | null => {\n      const big = this.isUltra || this.isLarge;\n      const noImage = imageSrc == null || imageSrc == undefined;\n\n      if (isRubrick) {\n        switch (index) {\n          case 1:\n          case 2:\n            return lead;\n          case 3:\n            if (noImage) {\n              return big ? lead : this.isMedium ? lead : this.isSmall ? lead : null;\n            }\n            if (rubrickSize == RubrickSize.large) {\n              return this.isUltra ? null : this.isLarge ? null : this.isMedium ? lead : null;\n            }\n            return big ? lead : this.isMedium ? lead : null;\n          case 4:\n            if (noImage) {\n              return big ? lead : this.isMedium ? lead : this.isSmall ? lead : null;\n            }\n            if (rubrickSize == RubrickSize.medium) {\n              return this.isUltra ? null : this.isLarge ? null : this.isMedium ? lead : null;\n            }\n            if (rubrickSize == RubrickSize.large) {\n              return this.isUltra ? null : this.isLarge ? null : this.isMedium ? lead : null;\n            }\n            return big ? lead : this.isMedium ? lead : null;\n          case 5:\n            if (noImage) {\n              return big ? lead : this.isMedium ? lead : null;\n            }\n            return null;\n          case 6:\n            if (noImage) {\n              return big ? lead : this.isMedium ? lead : null;\n            }\n            return null;\n        }\n      } else {\n        switch (index) {\n          case 1:\n          case 2:\n            return lead;\n          case 3:\n          case 4:\n            if (noImage) {\n              return lead;\n            }\n            if (this.hasSide) {\n              return big ? lead : this.isMedium ? lead : null;\n            }\n            return big ? lead : this.isMedium ? null : null;\n          case 5:\n          case 6:\n            return big ? lead : this.isMedium ? lead : null;\n        }\n      }\n      return lead;\n    };\n\n    const imageBehavior = (imageSrc: string | null, index: number): \"top\" | \"right\" | null => {\n      // Image has higher priority than lead\n      const big = this.isUltra || this.isLarge;\n      const noImage = imageSrc == null || imageSrc == undefined;\n\n      if (noImage) {\n        return null;\n      }\n\n      if (isRubrick) {\n        switch (index) {\n          case 1:\n          case 2:\n            return \"top\";\n          case 3:\n            if (rubrickSize == RubrickSize.medium) {\n              if (this.hasSide) {\n                return big ? \"top\" : this.isMedium ? \"top\" : this.isSmall ? \"right\" : \"top\";\n              }\n            }\n          case 4:\n            if (rubrickSize == RubrickSize.medium) {\n              if (this.hasSide) {\n                return big ? \"right\" : this.isMedium ? \"top\" : this.isSmall ? \"right\" : \"top\";\n              }\n            }\n            if (rubrickSize == RubrickSize.large) {\n              if (this.hasSide) {\n                return big ? \"right\" : this.isMedium ? \"top\" : this.isSmall ? \"right\" : \"top\";\n              }\n            }\n            return big ? \"top\" : this.isMedium ? \"top\" : this.isSmall ? \"right\" : \"top\";\n          case 5:\n            if (rubrickSize == RubrickSize.medium) {\n              if (this.hasSide) {\n                return big ? \"right\" : this.isMedium ? \"right\" : null;\n              }\n              return big ? \"top\" : this.isMedium ? \"right\" : null;\n            }\n\n          case 6:\n            if (rubrickSize == RubrickSize.large) {\n              if (this.hasSide) {\n                return big ? \"right\" : this.isMedium ? \"right\" : null;\n              }\n              return big ? \"top\" : this.isMedium ? \"right\" : null;\n            }\n        }\n      } else {\n        switch (index) {\n          case 1:\n          case 2:\n            return \"top\";\n          case 3:\n          case 4:\n            if (this.hasSide) {\n              return big ? \"top\" : this.isMedium ? \"right\" : this.isSmall ? \"right\" : \"top\";\n            }\n            return big ? \"top\" : this.isMedium ? \"top\" : this.isSmall ? null : null;\n          case 5:\n          case 6:\n            return big ? null : this.isMedium ? null : this.isSmall ? null : null;\n        }\n      }\n    };\n\n    if (!isRubrick && this.contentList.length < 6) {\n      return <div>At least add 6 elements for hero</div>;\n    }\n\n    const teaserClasses = (index: number) => ({\n      \"stzh-pi-teaser-layout-teaser\": true,\n      [`stzh-pi-teaser-layout-teaser--${index + 1}`]: true,\n      [`stzh-pi-teaser-layout-teaser--${index + 1}--${this.hasSide ? \"side\" : \"no-side\"}`]: true,\n      [`stzh-pi-teaser-layout-teaser--${index + 1}--${rubrickSize}`]: true,\n      [`stzh-pi-teaser-layout-teaser--${index + 1}--${rubrickSize}--${this.hasSide ? \"side\" : \"no-side\"}`]: true,\n    });\n\n    return (\n      <Host is-rubrick={isRubrick ? \"true\" : \"false\"} amount={rubrickSize} has-side={this.hasSide ? \"true\" : \"false\"}>\n        {hasHeading && (\n          <div class=\"stzh-pi-teaser-layout__header-holder\">\n            <Heading class=\"stzh-pi-teaser-layout__header\" level={this.headingLevel}>\n              {this.heading}\n            </Heading>\n          </div>\n        )}\n        <div class={classes}>\n          {...this.contentList.map((teaser: PiTeaser | EmptyTeaser, index) =>\n            teaser.type == \"empty-teaser\" ? (\n              <div class={teaserClasses(index)} />\n            ) : (\n              <stzh-pi-teaser\n                key={index}\n                href={teaser.href}\n                dateline={teaser.dateline}\n                heading={teaser.heading}\n                date={teaser.date}\n                imageSrc={teaser.imageSrc}\n                contentSize={contentSizeBehavior(index + 1)}\n                lead={leadBehavior(teaser.lead, index + 1, teaser.imageSrc)}\n                imagePosition={imageBehavior(teaser.imageSrc, index + 1)}\n                isHero={!isRubrick}\n                class={teaserClasses(index)}\n              />\n            ),\n          )}\n        </div>\n        {bottomSlotUsed && (\n          <div class=\"stzh-pi-teaser-layout__bottom-slot\">\n            <slot name=\"bottom\" />\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-pi-teaser-layout.entry.js","mappings":";;;;;AAAA,MAAM,qBAAqB,GAAG,63dAA63d,CAAC;AAC55d,iCAAe,qBAAqB;;ACIpC,IAAY,WAOX;AAPD,WAAY,WAAW;IACrB,+BAAgB,CAAA;IAChB,8BAAe,CAAA;IACf,+BAAgB,CAAA;IAChB,6BAAc,CAAA;IACd,8BAAe,CAAA;IACf,4BAAa,CAAA;AACf,CAAC,EAPW,WAAW,KAAX,WAAW,QAOtB;AAED,MAAM,cAAc,GAAG,CAAC,MAAc;IACpC,QAAQ,MAAM;QACZ,KAAK,CAAC;YACJ,OAAO,WAAW,CAAC,QAAQ,CAAC;QAC9B,KAAK,CAAC;YACJ,OAAO,WAAW,CAAC,OAAO,CAAC;QAC7B,KAAK,CAAC;YACJ,OAAO,WAAW,CAAC,MAAM,CAAC;QAC5B,KAAK,CAAC;YACJ,OAAO,WAAW,CAAC,KAAK,CAAC;QAC3B,KAAK,CAAC;YACJ,OAAO,WAAW,CAAC,MAAM,CAAC;QAC5B,KAAK,CAAC;YACJ,OAAO,WAAW,CAAC,KAAK,CAAC;QAC3B;YACE,OAAO,IAAI,CAAC;KACf;AACH,CAAC,CAAC;MASW,kBAAkB;;;QAgDrB,uBAAkB,GAAG;YAC3B,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC;YACtC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC;YACxC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC;YACtC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC;SACvC,CAAC;uBAjDoC,MAAM;uBAKjB,KAAK;uBAGN,EAAE;4BAG6B,GAAG;2BAMV,EAAE;;;;;;IAUpD,gBAAgB;QACd,IAAI,CAAC,kBAAkB,EAAE,CAAC;;;;;QAK1B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QAEhD,IAAI,IAAI,CAAC,OAAO,IAAI,SAAS,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE;;YAE5D,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,KAAK,CAAC,IAAI,CAAC,OAAO,EAAE;gBACnD,MAAM,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;gBAC/D,IAAI,CAAC,WAAW,GAAG,CAAC,GAAG,IAAI,CAAC,WAAW,EAAE,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,cAAc,EAAE,CAAC,CAAC,CAAC;aAClG;SACF;KACF;IASD,iBAAiB;QACf,sBAAsB,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;KACjD;IAED,MAAM;QACJ,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,IAAI,SAAS,CAAC;QAC5C,MAAM,WAAW,GAAgB,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;QACzE,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;QACxC,MAAM,OAAO,GAAG;YACd,uBAAuB,EAAE,IAAI;YAC7B,gCAAgC,EAAE,SAAS;YAC3C,iCAAiC,EAAE,IAAI,CAAC,OAAO;SAChD,CAAC;QACF,MAAM,UAAU,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC;QAClC,MAAM,cAAc,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;QAEvD,MAAM,mBAAmB,GAAG,CAAC,KAAa;YACxC,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC;YACzC,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,GAAG,GAAG,GAAG,GAAG,CAAC;YAE1C,IAAI,SAAS,EAAE;gBACb,QAAQ,KAAK;oBACX,KAAK,CAAC,CAAC;oBACP,KAAK,CAAC;wBACJ,OAAO,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC,QAAQ,GAAG,QAAQ,GAAG,IAAI,CAAC,OAAO,GAAG,GAAG,GAAG,GAAG,CAAC;oBACzE,KAAK,CAAC;wBACJ,IAAI,WAAW,IAAI,WAAW,CAAC,MAAM,EAAE;4BACrC,OAAO,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC,QAAQ,GAAG,QAAQ,GAAG,IAAI,CAAC,OAAO,GAAG,GAAG,GAAG,IAAI,CAAC;yBACzE;wBACD,IAAI,WAAW,IAAI,WAAW,CAAC,KAAK,EAAE;4BACpC,OAAO,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC,QAAQ,GAAG,QAAQ,GAAG,IAAI,CAAC,OAAO,GAAG,GAAG,GAAG,IAAI,CAAC;yBACzE;wBACD,IAAI,WAAW,IAAI,WAAW,CAAC,MAAM,EAAE;4BACrC,OAAO,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC,QAAQ,GAAG,QAAQ,GAAG,IAAI,CAAC,OAAO,GAAG,GAAG,GAAG,IAAI,CAAC;yBACzE;wBACD,IAAI,WAAW,IAAI,WAAW,CAAC,KAAK,EAAE;4BACpC,OAAO,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC,QAAQ,GAAG,QAAQ,GAAG,IAAI,CAAC,OAAO,GAAG,GAAG,GAAG,IAAI,CAAC;yBACzE;oBACH,KAAK,CAAC;wBACJ,IAAI,WAAW,IAAI,WAAW,CAAC,KAAK,EAAE;4BACpC,OAAO,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC,QAAQ,GAAG,QAAQ,GAAG,IAAI,CAAC,OAAO,GAAG,GAAG,GAAG,IAAI,CAAC;yBACzE;wBACD,IAAI,WAAW,IAAI,WAAW,CAAC,MAAM,EAAE;4BACrC,OAAO,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC,QAAQ,GAAG,QAAQ,GAAG,IAAI,CAAC,OAAO,GAAG,GAAG,GAAG,IAAI,CAAC;yBACzE;wBACD,IAAI,WAAW,IAAI,WAAW,CAAC,KAAK,EAAE;4BACpC,OAAO,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC,QAAQ,GAAG,QAAQ,GAAG,IAAI,CAAC,OAAO,GAAG,GAAG,GAAG,IAAI,CAAC;yBACzE;oBACH,KAAK,CAAC;wBACJ,IAAI,WAAW,IAAI,WAAW,CAAC,MAAM,EAAE;4BACrC,OAAO,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC,QAAQ,GAAG,GAAG,GAAG,IAAI,CAAC,OAAO,GAAG,GAAG,GAAG,IAAI,CAAC;yBACpE;wBACD,IAAI,WAAW,IAAI,WAAW,CAAC,KAAK,EAAE;4BACpC,OAAO,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC,QAAQ,GAAG,GAAG,GAAG,IAAI,CAAC,OAAO,GAAG,GAAG,GAAG,IAAI,CAAC;yBACpE;oBACH,KAAK,CAAC;wBACJ,IAAI,WAAW,IAAI,WAAW,CAAC,KAAK,EAAE;4BACpC,OAAO,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC,QAAQ,GAAG,GAAG,GAAG,IAAI,CAAC,OAAO,GAAG,GAAG,GAAG,IAAI,CAAC;yBACpE;iBACJ;aACF;iBAAM;gBACL,QAAQ,KAAK;oBACX,KAAK,CAAC,CAAC;oBACP,KAAK,CAAC;wBACJ,OAAO,GAAG,GAAG,IAAI,GAAG,IAAI,CAAC,QAAQ,GAAG,GAAG,GAAG,IAAI,CAAC,OAAO,GAAG,GAAG,GAAG,GAAG,CAAC;oBACrE,KAAK,CAAC,CAAC;oBACP,KAAK,CAAC;wBACJ,OAAO,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC,QAAQ,GAAG,GAAG,GAAG,IAAI,CAAC,OAAO,GAAG,GAAG,GAAG,IAAI,CAAC;oBACrE,KAAK,CAAC,CAAC;oBACP,KAAK,CAAC;wBACJ,OAAO,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC,QAAQ,GAAG,GAAG,GAAG,IAAI,CAAC,OAAO,GAAG,GAAG,GAAG,IAAI,CAAC;iBACtE;aACF;SACF,CAAC;QAEF,MAAM,YAAY,GAAG,CAAC,IAAmB,EAAE,KAAa,EAAE,QAAuB;YAC/E,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC;YACzC,MAAM,OAAO,GAAG,QAAQ,IAAI,IAAI,IAAI,QAAQ,IAAI,SAAS,CAAC;YAE1D,IAAI,SAAS,EAAE;gBACb,QAAQ,KAAK;oBACX,KAAK,CAAC,CAAC;oBACP,KAAK,CAAC;wBACJ,OAAO,IAAI,CAAC;oBACd,KAAK,CAAC;wBACJ,IAAI,OAAO,EAAE;4BACX,OAAO,GAAG,GAAG,IAAI,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC;yBACvE;wBACD,IAAI,WAAW,IAAI,WAAW,CAAC,KAAK,EAAE;4BACpC,IAAI,IAAI,CAAC,OAAO,EAAE;gCAChB,OAAO,IAAI,CAAC,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC;6BAChF;4BACD,OAAO,IAAI,CAAC,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC;yBAChF;wBACD,OAAO,GAAG,GAAG,IAAI,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC;oBAClD,KAAK,CAAC;wBACJ,IAAI,OAAO,EAAE;4BACX,OAAO,GAAG,GAAG,IAAI,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC;yBACvE;wBACD,IAAI,WAAW,IAAI,WAAW,CAAC,MAAM,EAAE;4BACrC,IAAI,IAAI,CAAC,OAAO,EAAE;gCAChB,OAAO,IAAI,CAAC,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC;6BAChF;4BACD,OAAO,IAAI,CAAC,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC;yBAChF;wBACD,IAAI,WAAW,IAAI,WAAW,CAAC,KAAK,EAAE;4BACpC,IAAI,IAAI,CAAC,OAAO,EAAE;gCAChB,OAAO,IAAI,CAAC,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC;6BAChF;4BACD,OAAO,IAAI,CAAC,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC;yBAChF;wBACD,OAAO,GAAG,GAAG,IAAI,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC;oBAClD,KAAK,CAAC;wBACJ,IAAI,OAAO,EAAE;4BACX,OAAO,GAAG,GAAG,IAAI,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC;yBACjD;wBACD,IAAI,IAAI,CAAC,OAAO,EAAE;4BAChB,OAAO,IAAI,CAAC;yBACb;wBACD,OAAO,GAAG,GAAG,IAAI,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC;oBAClD,KAAK,CAAC;wBACJ,IAAI,OAAO,EAAE;4BACX,OAAO,GAAG,GAAG,IAAI,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC;yBACjD;wBACD,IAAI,IAAI,CAAC,OAAO,EAAE;4BAChB,OAAO,IAAI,CAAC;yBACb;wBACD,OAAO,GAAG,GAAG,IAAI,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC;iBACnD;aACF;iBAAM;gBACL,QAAQ,KAAK;oBACX,KAAK,CAAC,CAAC;oBACP,KAAK,CAAC;wBACJ,OAAO,IAAI,CAAC;oBACd,KAAK,CAAC,CAAC;oBACP,KAAK,CAAC;wBACJ,IAAI,OAAO,EAAE;4BACX,OAAO,IAAI,CAAC;yBACb;wBACD,IAAI,IAAI,CAAC,OAAO,EAAE;4BAChB,OAAO,GAAG,GAAG,IAAI,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC;yBACjD;wBACD,OAAO,GAAG,GAAG,IAAI,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC;oBAClD,KAAK,CAAC,CAAC;oBACP,KAAK,CAAC;wBACJ,OAAO,GAAG,GAAG,IAAI,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC;iBACnD;aACF;YACD,OAAO,IAAI,CAAC;SACb,CAAC;QAEF,MAAM,aAAa,GAAG,CAAC,QAAuB,EAAE,KAAa;;YAE3D,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC;YACzC,MAAM,OAAO,GAAG,QAAQ,IAAI,IAAI,IAAI,QAAQ,IAAI,SAAS,CAAC;YAE1D,IAAI,OAAO,EAAE;gBACX,OAAO,IAAI,CAAC;aACb;YAED,IAAI,SAAS,EAAE;gBACb,QAAQ,KAAK;oBACX,KAAK,CAAC,CAAC;oBACP,KAAK,CAAC;wBACJ,OAAO,KAAK,CAAC;oBACf,KAAK,CAAC;wBACJ,IAAI,WAAW,IAAI,WAAW,CAAC,MAAM,EAAE;4BACrC,IAAI,IAAI,CAAC,OAAO,EAAE;gCAChB,OAAO,GAAG,GAAG,KAAK,GAAG,IAAI,CAAC,QAAQ,GAAG,KAAK,GAAG,IAAI,CAAC,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC;6BACzE;yBACF;wBAED,IAAI,WAAW,IAAI,WAAW,CAAC,KAAK,EAAE;4BACpC,IAAI,IAAI,CAAC,OAAO,EAAE;gCAChB,OAAO,GAAG,GAAG,OAAO,GAAG,IAAI,CAAC,QAAQ,GAAG,KAAK,GAAG,IAAI,CAAC,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC;6BAC3E;4BACD,OAAO,GAAG,GAAG,IAAI,GAAG,IAAI,CAAC,QAAQ,GAAG,KAAK,GAAG,IAAI,CAAC,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC;yBACxE;wBAED,OAAO,GAAG,GAAG,KAAK,GAAG,IAAI,CAAC,QAAQ,GAAG,KAAK,GAAG,IAAI,CAAC,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC;oBAC1E,KAAK,CAAC;wBACJ,IAAI,WAAW,IAAI,WAAW,CAAC,MAAM,EAAE;4BACrC,IAAI,IAAI,CAAC,OAAO,EAAE;gCAChB,OAAO,GAAG,GAAG,OAAO,GAAG,IAAI,CAAC,QAAQ,GAAG,KAAK,GAAG,IAAI,CAAC,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC;6BAC3E;4BACD,OAAO,GAAG,GAAG,IAAI,GAAG,IAAI,CAAC,QAAQ,GAAG,KAAK,GAAG,IAAI,CAAC,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC;yBACxE;wBAED,IAAI,WAAW,IAAI,WAAW,CAAC,KAAK,EAAE;4BACpC,IAAI,IAAI,CAAC,OAAO,EAAE;gCAChB,OAAO,GAAG,GAAG,OAAO,GAAG,IAAI,CAAC,QAAQ,GAAG,KAAK,GAAG,IAAI,CAAC,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC;6BAC3E;4BACD,OAAO,GAAG,GAAG,IAAI,GAAG,IAAI,CAAC,QAAQ,GAAG,KAAK,GAAG,IAAI,CAAC,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC;yBACxE;wBAED,OAAO,GAAG,GAAG,KAAK,GAAG,IAAI,CAAC,QAAQ,GAAG,KAAK,GAAG,IAAI,CAAC,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC;oBAC1E,KAAK,CAAC;wBACJ,IAAI,WAAW,IAAI,WAAW,CAAC,MAAM,IAAI,WAAW,IAAI,WAAW,CAAC,KAAK,EAAE;4BACzE,IAAI,IAAI,CAAC,OAAO,EAAE;gCAChB,OAAO,GAAG,GAAG,OAAO,GAAG,IAAI,CAAC,QAAQ,GAAG,OAAO,GAAG,IAAI,CAAC;6BACvD;4BACD,OAAO,GAAG,GAAG,IAAI,GAAG,IAAI,CAAC,QAAQ,GAAG,OAAO,GAAG,IAAI,CAAC;yBACpD;oBAEH,KAAK,CAAC;wBACJ,IAAI,WAAW,IAAI,WAAW,CAAC,KAAK,EAAE;4BACpC,IAAI,IAAI,CAAC,OAAO,EAAE;gCAChB,OAAO,GAAG,GAAG,OAAO,GAAG,IAAI,CAAC,QAAQ,GAAG,OAAO,GAAG,IAAI,CAAC;6BACvD;4BACD,OAAO,GAAG,GAAG,IAAI,GAAG,IAAI,CAAC,QAAQ,GAAG,OAAO,GAAG,IAAI,CAAC;yBACpD;iBACJ;aACF;iBAAM;gBACL,QAAQ,KAAK;oBACX,KAAK,CAAC,CAAC;oBACP,KAAK,CAAC;wBACJ,OAAO,KAAK,CAAC;oBACf,KAAK,CAAC,CAAC;oBACP,KAAK,CAAC;wBACJ,IAAI,IAAI,CAAC,OAAO,EAAE;4BAChB,OAAO,GAAG,GAAG,KAAK,GAAG,IAAI,CAAC,QAAQ,GAAG,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,OAAO,GAAG,KAAK,CAAC;yBAC/E;wBACD,OAAO,GAAG,GAAG,KAAK,GAAG,IAAI,CAAC,QAAQ,GAAG,KAAK,GAAG,IAAI,CAAC,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC;oBAC1E,KAAK,CAAC,CAAC;oBACP,KAAK,CAAC;wBACJ,OAAO,GAAG,GAAG,IAAI,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC;iBACzE;aACF;SACF,CAAC;QAEF,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE;YAC7C,OAAO,kDAA2C,CAAC;SACpD;QAED,MAAM,aAAa,GAAG,CAAC,KAAa,MAAM;YACxC,8BAA8B,EAAE,IAAI;YACpC,CAAC,iCAAiC,KAAK,GAAG,CAAC,EAAE,GAAG,IAAI;YACpD,CAAC,iCAAiC,KAAK,GAAG,CAAC,KAAK,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,SAAS,EAAE,GAAG,IAAI;YAC1F,CAAC,iCAAiC,KAAK,GAAG,CAAC,KAAK,WAAW,EAAE,GAAG,IAAI;YACpE,CAAC,iCAAiC,KAAK,GAAG,CAAC,KAAK,WAAW,KAAK,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,SAAS,EAAE,GAAG,IAAI;SAC3G,CAAC,CAAC;QAEH,QACE,EAAC,IAAI,kBAAa,SAAS,GAAG,MAAM,GAAG,OAAO,EAAE,MAAM,EAAE,WAAW,cAAY,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,IAC3G,UAAU,KACT,WAAK,KAAK,EAAC,sCAAsC,IAC/C,EAAC,OAAO,IAAC,KAAK,EAAC,+BAA+B,EAAC,KAAK,EAAE,IAAI,CAAC,YAAY,IACpE,IAAI,CAAC,OAAO,CACL,CACN,CACP,EACD,WAAK,KAAK,EAAE,OAAO,OACb,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,MAA8B,EAAE,KAAK,KAC7D,MAAM,CAAC,IAAI,IAAI,cAAc,IAC3B,WAAK,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,GAAI,KAEpC,kCACE,GAAG,EAAE,KAAK,EACV,IAAI,EAAE,MAAM,CAAC,IAAI,EACjB,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,OAAO,EAAE,MAAM,CAAC,OAAO,EACvB,IAAI,EAAE,MAAM,CAAC,IAAI,EACjB,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,WAAW,EAAE,mBAAmB,CAAC,KAAK,GAAG,CAAC,CAAC,EAC3C,IAAI,EAAE,YAAY,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,GAAG,CAAC,EAAE,MAAM,CAAC,QAAQ,CAAC,EAC3D,aAAa,EAAE,aAAa,CAAC,MAAM,CAAC,QAAQ,EAAE,KAAK,GAAG,CAAC,CAAC,EACxD,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,GAC3B,CACH,CACF,CACG,EACL,cAAc,KACb,WAAK,KAAK,EAAC,oCAAoC,IAC7C,YAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACP,CACI,EACP;KACH;;;;;;;","names":[],"sources":["src/components/CMS/stzh-pi-teaser-layout/stzh-pi-teaser-layout.scss?tag=stzh-pi-teaser-layout&encapsulation=scoped","src/components/CMS/stzh-pi-teaser-layout/stzh-pi-teaser-layout.tsx"],"sourcesContent":[":host {\n  --grid-pi-teaser-layout-columns: repeat(12, 1fr);\n  --min-height: 1800px;\n  --max-height: 1900px;\n  --gap: 16px;\n\n  // Default mobile layout\n  --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n    \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\" \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\"\n    \"t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4\" \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\"\n    \"t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6\";\n  --grid-pi-teaser-layout-rows: 0.9fr 0.9fr 0.25fr 0.25fr 0.25fr 0.25fr;\n\n  // Small mobile layout\n  @include mq($from: small) {\n    --gap: 20px;\n    --min-height: 1900px;\n    --max-height: 1900px;\n    --grid-pi-teaser-layout-rows: 0.9fr 0.9fr 0.25fr 0.25fr 0.25fr 0.25fr;\n  }\n\n  // Medium mobile layout\n  @include mq($from: medium) {\n    --gap: 20px;\n    --min-height: 1550px;\n    --max-height: 1650px;\n    --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n      \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\"\n      \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\"\n      \"t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6\";\n    --grid-pi-teaser-layout-rows: 0.6fr 0.4fr 0.25fr 0.25fr;\n\n    &[has-side=\"true\"] {\n      --min-height: 2350px;\n      --max-height: 2350px;\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n        \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\"\n        \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\"\n        \"t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4\"\n        \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\"\n        \"t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6\";\n      --grid-pi-teaser-layout-rows: 0.85fr 0.85fr 0.4fr 0.4fr 0.36fr 0.36fr;\n    }\n  }\n\n  // Large mobile layout\n  @include mq($from: large) {\n    --gap: 24px;\n    --min-height: 1350px;\n    --max-height: 1350px;\n    --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n      \"t3 t3 t3 t3 t4 t4 t4 t4 t5 t5 t5 t5\"\n      \"t3 t3 t3 t3 t4 t4 t4 t4 t6 t6 t6 t6\";\n    --grid-pi-teaser-layout-rows: 0.7fr 0.3fr 0.3fr;\n\n    &[has-side=\"true\"] {\n      --min-height: 1350px;\n      --max-height: 1350px;\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n        \"t3 t3 t3 t3 t4 t4 t4 t4 t5 t5 t5 t5\"\n        \"t3 t3 t3 t3 t4 t4 t4 t4 t6 t6 t6 t6\";\n      --grid-pi-teaser-layout-rows: 0.7fr 0.3fr 0.3fr;\n    }\n  }\n\n  // Ultra mobile layout\n  @include mq($from: ultra) {\n    --gap: 32px;\n    --min-height: 1350px;\n    --max-height: 1350px;\n    --grid-pi-teaser-layout-rows: 0.7fr 0.3fr 0.3fr;\n\n    &[has-side=\"true\"] {\n      --min-height: 1350px;\n      --max-height: 1350px;\n      --grid-pi-teaser-layout-rows: 0.7fr 0.3fr 0.3fr;\n    }\n  }\n\n  .stzh-pi-teaser-layout-teaser {\n    background-color: white;\n\n    &--1 {\n      grid-area: t1;\n    }\n\n    &--2 {\n      grid-area: t2;\n    }\n\n    &--3 {\n      grid-area: t3;\n    }\n\n    &--4 {\n      grid-area: t4;\n    }\n\n    &--5 {\n      grid-area: t5;\n    }\n\n    &--6 {\n      grid-area: t6;\n    }\n  }\n\n  // Rubrick layouts\n  &[is-rubrick=\"true\"] {\n    // Mobile rubrick layouts\n    &[amount=\"one\"] {\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\";\n      --grid-pi-teaser-layout-rows: 1fr;\n      --min-height: 525px;\n      --max-height: 600px;\n    }\n\n    &[amount=\"two\"] {\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n        \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\";\n      --grid-pi-teaser-layout-rows: 1fr 1fr;\n      --min-height: 1050px;\n      --max-height: 1200px;\n    }\n\n    &[amount=\"three\"] {\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n        \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\"\n        \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\";\n      --grid-pi-teaser-layout-rows: 1.1fr 1.1fr 0.3fr;\n      --min-height: 1200px;\n      --max-height: 1400px;\n    }\n\n    &[amount=\"four\"] {\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n        \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\"\n        \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\"\n        \"t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4\";\n      --grid-pi-teaser-layout-rows: 1fr 1fr 0.3fr 0.3fr;\n      --min-height: 1400px;\n      --max-height: 1650px;\n    }\n\n    &[amount=\"five\"] {\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n        \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\"\n        \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\"\n        \"t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4\"\n        \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\";\n      --grid-pi-teaser-layout-rows: 1fr 1fr 0.3fr 0.3fr 0.3fr;\n      --min-height: 1600px;\n      --max-height: 1900px;\n    }\n\n    &[amount=\"six\"] {\n      --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1 t1\"\n        \"t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2 t2\"\n        \"t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3 t3\"\n        \"t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4 t4\"\n        \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\"\n        \"t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6\";\n      --grid-pi-teaser-layout-rows: 1fr 1fr 0.3fr 0.3fr 0.3fr 0.3fr;\n      --min-height: 1800px;\n      --max-height: 2300px;\n    }\n\n    // Small breakpoint rubrick layouts\n    @include mq($from: small) {\n      &[amount=\"three\"] {\n        --grid-pi-teaser-layout-rows: 0.95fr 0.95fr 0.26fr;\n        --min-height: 1300px;\n        --max-height: 1400px;\n      }\n\n      &[amount=\"four\"] {\n        --grid-pi-teaser-layout-rows: 0.95fr 0.95fr 0.26fr 0.26fr;\n        --min-height: 1500px;\n        --max-height: 1700px;\n      }\n\n      &[amount=\"five\"] {\n        --grid-pi-teaser-layout-rows: 0.95fr 0.95fr 0.26fr 0.26fr 0.26fr;\n        --min-height: 1650px;\n        --max-height: 1900px;\n      }\n\n      &[amount=\"six\"] {\n        --grid-pi-teaser-layout-rows: 0.95fr 0.95fr 0.26fr 0.26fr 0.26fr 0.26fr;\n        --min-height: 1800px;\n        --max-height: 2100px;\n      }\n    }\n\n    // Medium breakpoint rubrick layouts\n    @include mq($from: medium) {\n      &[amount=\"one\"],\n      &[amount=\"two\"] {\n        --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\";\n        --grid-pi-teaser-layout-rows: 1fr;\n        --min-height: 600px;\n        --max-height: 650px;\n      }\n\n      &[amount=\"three\"] {\n        --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n          \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\";\n        --grid-pi-teaser-layout-rows: 1fr 1fr;\n        --min-height: 1200px;\n        --max-height: 1250px;\n\n        &[has-side=\"true\"] {\n          --grid-pi-teaser-layout-rows: 1fr 1fr;\n          --min-height: 1150px;\n          --max-height: 1200px;\n        }\n      }\n\n      &[amount=\"four\"] {\n        --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n          \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\";\n        --grid-pi-teaser-layout-rows: 1fr 1fr;\n        --min-height: 1200px;\n        --max-height: 1250px;\n\n        &[has-side=\"true\"] {\n          --grid-pi-teaser-layout-rows: 1fr 1fr;\n          --min-height: 1150px;\n          --max-height: 1200px;\n        }\n      }\n\n      &[amount=\"five\"] {\n        --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n          \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\"\n          \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\";\n        --grid-pi-teaser-layout-rows: 1fr 1fr 0.35fr;\n        --min-height: 1400px;\n        --max-height: 1500px;\n\n        &[has-side=\"true\"] {\n          --grid-pi-teaser-layout-rows: 1.1fr 1.1fr 0.35fr;\n          --min-height: 1350px;\n          --max-height: 1400px;\n        }\n      }\n\n      &[amount=\"six\"] {\n        --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n          \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\"\n          \"t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5 t5\"\n          \"t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6 t6\";\n        --grid-pi-teaser-layout-rows: 1fr 1fr 0.35fr 0.35fr;\n        --min-height: 1650px;\n        --max-height: 1700px;\n\n        &[has-side=\"true\"] {\n          --grid-pi-teaser-layout-rows: 1.2fr 1.2fr 0.4fr 0.4fr;\n          --min-height: 1800px;\n          --max-height: 1800px;\n        }\n      }\n    }\n\n    // Large breakpoint rubrick layouts\n    @include mq($from: large) {\n      &[amount=\"three\"] {\n        &[has-side=\"true\"] {\n          --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n            \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\";\n          --grid-pi-teaser-layout-rows: 1fr 1fr;\n          --min-height: 1300px;\n          --max-height: 1300px;\n        }\n      }\n\n      &[amount=\"four\"] {\n        --grid-pi-teaser-layout-template: \"t1 t1 t1 t2 t2 t2 t3 t3 t3 t4 t4 t4\"\n          \"t1 t1 t1 t2 t2 t2 t3 t3 t3 t4 t4 t4\";\n        --grid-pi-teaser-layout-rows: 1fr 1fr;\n        --min-height: 560px;\n        --max-height: 700px;\n\n        &[has-side=\"true\"] {\n          --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n            \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\"\n            \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\";\n          --grid-pi-teaser-layout-rows: 1fr 0.5fr 0.5fr;\n          --min-height: 1200px;\n          --max-height: 1300px;\n        }\n      }\n\n      &[amount=\"five\"] {\n        --grid-pi-teaser-layout-template: \"t1 t1 t1 t2 t2 t2 t3 t3 t3 t4 t4 t4\"\n          \"t1 t1 t1 t2 t2 t2 t3 t3 t3 t5 t5 t5\";\n        --grid-pi-teaser-layout-rows: 1fr 1fr;\n        --min-height: 560px;\n        --max-height: 700px;\n\n        &[has-side=\"true\"] {\n          --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n            \"t3 t3 t3 t3 t3 t3 t4 t4 t4 t4 t4 t4\"\n            \"t3 t3 t3 t3 t3 t3 t5 t5 t5 t5 t5 t5\";\n          --grid-pi-teaser-layout-rows: 1fr 0.45fr 0.45fr;\n          --min-height: 1200px;\n          --max-height: 1300px;\n        }\n      }\n\n      &[amount=\"six\"] {\n        --grid-pi-teaser-layout-template: \"t1 t1 t1 t2 t2 t2 t3 t3 t3 t5 t5 t5\"\n          \"t1 t1 t1 t2 t2 t2 t4 t4 t4 t6 t6 t6\";\n        --grid-pi-teaser-layout-rows: 1fr 1fr;\n        --min-height: 560px;\n        --max-height: 700px;\n\n        &[has-side=\"true\"] {\n          --grid-pi-teaser-layout-template: \"t1 t1 t1 t1 t1 t1 t2 t2 t2 t2 t2 t2\"\n            \"t3 t3 t3 t3 t3 t3 t5 t5 t5 t5 t5 t5\"\n            \"t4 t4 t4 t4 t4 t4 t6 t6 t6 t6 t6 t6\";\n          --grid-pi-teaser-layout-rows: 1fr 0.4fr 0.4fr;\n          --min-height: 1200px;\n          --max-height: 1250px;\n        }\n      }\n    }\n\n    // Hide elements that shouldn't be displayed\n    .stzh-pi-teaser-layout-teaser {\n      &--5 {\n        &--four {\n          display: none;\n        }\n      }\n\n      &--6 {\n        &--four,\n        &--five {\n          display: none;\n        }\n      }\n    }\n  }\n}\n\n.stzh-pi-teaser-layout {\n  @include fontCurve(\"p1\");\n  width: 100%;\n  display: grid;\n  gap: var(--gap);\n  min-height: var(--min-height);\n  max-height: var(--max-height);\n  grid-template-columns: var(--grid-pi-teaser-layout-columns);\n  grid-template-areas: var(--grid-pi-teaser-layout-template);\n  grid-template-rows: var(--grid-pi-teaser-layout-rows);\n\n  & > * {\n    /* Prevents content from expanding grid items */\n    min-height: 0;\n    overflow: hidden;\n  }\n\n  &__header-holder {\n    margin-bottom: space(\"medium\");\n  }\n\n  &__header {\n    @include fontCurve(\"h2\");\n    @include font(\"title\");\n    color: var(--stzh-heading-color);\n\n    margin: 0;\n    padding-top: space(\"medium\");\n    padding-bottom: space(\"xxsmall\");\n\n    @include mq($from: small) {\n      padding-top: space(\"large\");\n      padding-bottom: space(\"xxsmall\");\n    }\n\n    @include mq($from: medium) {\n      padding-top: space(\"xlarge\");\n      padding-bottom: space(\"xsmall\");\n    }\n\n    @include mq($from: large) {\n      padding-top: space(\"xxlarge\");\n      padding-bottom: space(\"small\");\n    }\n  }\n\n  &__bottom-slot {\n    margin-top: space(\"medium\");\n    display: grid;\n    justify-content: end;\n  }\n}\n","import { Component, h, Element, Host, Prop, State } from \"@stencil/core\";\nimport { addMediaChangeListener, media } from \"../../../utils/media-utils\";\nimport { hasSlot } from \"../../../utils/utils\";\nimport { EmptyTeaser, PiTeaser } from \"../../..\";\n\nexport enum RubrickSize {\n  xxxsmall = \"one\",\n  xxsmall = \"two\",\n  xsmall = \"three\",\n  small = \"four\",\n  medium = \"five\",\n  large = \"six\",\n}\n\nconst getRubrickSize = (length: number): RubrickSize => {\n  switch (length) {\n    case 1:\n      return RubrickSize.xxxsmall;\n    case 2:\n      return RubrickSize.xxsmall;\n    case 3:\n      return RubrickSize.xsmall;\n    case 4:\n      return RubrickSize.small;\n    case 5:\n      return RubrickSize.medium;\n    case 6:\n      return RubrickSize.large;\n    default:\n      return null;\n  }\n};\n/**\n * @slot bottom - Slot for bottom content - like buttons to load more data\n */\n@Component({\n  tag: \"stzh-pi-teaser-layout\",\n  styleUrl: \"stzh-pi-teaser-layout.scss\",\n  scoped: true,\n})\nexport class StzhPiTeaserLayout {\n  /**\n    Variant specifies which grid is being shown\n  **/\n  @Prop() variant: \"hero\" | \"rubrick\" = \"hero\";\n\n  /**\n    Aside changes the grid behavior when the layout is presented beside other content aside like menu\n  **/\n  @Prop() hasSide: boolean = false;\n\n  /**  Heading for the section **/\n  @Prop() heading: string = \"\";\n\n  /** Heading level, for accessibility, no visual impact */\n  @Prop({ reflect: true }) headingLevel: \"1\" | \"2\" | \"3\" = \"3\";\n\n  /**\n    The Hero variant has 6 teaser items list requirement, if there is more the list will be cut if less an error will be shown.\n    The rubrick is either 1,2,3,4,5 or 6 elements big if there is more the list will be cut to 6 if there is less we show an empty div for every empty element.\n  **/\n  @Prop() contentList: PiTeaser[] | EmptyTeaser[] = [];\n\n  /** Break points for displays */\n  @State() isSmall: boolean;\n  @State() isMedium: boolean;\n  @State() isLarge: boolean;\n  @State() isUltra: boolean;\n\n  @Element() element: HTMLStzhPiPagetitleElement;\n\n  componentDidLoad() {\n    this.mediaChangeHandler();\n    /**\n      The Hero variant has 6 teaser items list requirement, if there is more the list will be cut if less an error will be shown.\n      The rubrick is either 1,2,3,4,5 or 6 elements big if there is more the list will be cut to 6 if there is less we show an empty div for every empty element.\n    **/\n    this.contentList = this.contentList.slice(0, 6);\n\n    if (this.variant == \"rubrick\" && this.contentList.length < 4) {\n      // Always make sure you have at least 4 elements\n      if ((this.isLarge || this.isUltra) && !this.hasSide) {\n        const paddingNeeded = Math.max(0, 4 - this.contentList.length);\n        this.contentList = [...this.contentList, ...Array(paddingNeeded).fill({ type: \"empty-teaser\" })];\n      }\n    }\n  }\n\n  private mediaChangeHandler = () => {\n    this.isSmall = media(\"small\").matches;\n    this.isMedium = media(\"medium\").matches;\n    this.isLarge = media(\"large\").matches;\n    this.isUltra = media(\"ultra\").matches;\n  };\n\n  connectedCallback() {\n    addMediaChangeListener(this.mediaChangeHandler);\n  }\n\n  render() {\n    const isRubrick = this.variant == \"rubrick\";\n    const rubrickSize: RubrickSize = getRubrickSize(this.contentList.length);\n    const Heading = `h${this.headingLevel}`;\n    const classes = {\n      \"stzh-pi-teaser-layout\": true,\n      \"stzh-pi-teaser-layout--rubrick\": isRubrick,\n      \"stzh-pi-teaser-layout--has-side\": this.hasSide,\n    };\n    const hasHeading = !!this.heading;\n    const bottomSlotUsed = hasSlot(this.element, \"bottom\");\n\n    const contentSizeBehavior = (index: number): \"XS\" | \"S\" | \"M\" | \"L\" | \"XL\" => {\n      const big = this.isUltra || this.isLarge;\n      const sideSize = this.hasSide ? \"M\" : \"L\";\n\n      if (isRubrick) {\n        switch (index) {\n          case 1:\n          case 2:\n            return big ? \"L\" : this.isMedium ? sideSize : this.isSmall ? \"L\" : \"M\";\n          case 3:\n            if (rubrickSize == RubrickSize.xsmall) {\n              return big ? \"L\" : this.isMedium ? sideSize : this.isSmall ? \"S\" : \"XS\";\n            }\n            if (rubrickSize == RubrickSize.small) {\n              return big ? \"L\" : this.isMedium ? sideSize : this.isSmall ? \"S\" : \"XS\";\n            }\n            if (rubrickSize == RubrickSize.medium) {\n              return big ? \"L\" : this.isMedium ? sideSize : this.isSmall ? \"S\" : \"XS\";\n            }\n            if (rubrickSize == RubrickSize.large) {\n              return big ? \"M\" : this.isMedium ? sideSize : this.isSmall ? \"S\" : \"XS\";\n            }\n          case 4:\n            if (rubrickSize == RubrickSize.small) {\n              return big ? \"L\" : this.isMedium ? sideSize : this.isSmall ? \"S\" : \"XS\";\n            }\n            if (rubrickSize == RubrickSize.medium) {\n              return big ? \"M\" : this.isMedium ? sideSize : this.isSmall ? \"S\" : \"XS\";\n            }\n            if (rubrickSize == RubrickSize.large) {\n              return big ? \"M\" : this.isMedium ? sideSize : this.isSmall ? \"S\" : \"XS\";\n            }\n          case 5:\n            if (rubrickSize == RubrickSize.medium) {\n              return big ? \"M\" : this.isMedium ? \"M\" : this.isSmall ? \"S\" : \"XS\";\n            }\n            if (rubrickSize == RubrickSize.large) {\n              return big ? \"M\" : this.isMedium ? \"M\" : this.isSmall ? \"S\" : \"XS\";\n            }\n          case 6:\n            if (rubrickSize == RubrickSize.large) {\n              return big ? \"M\" : this.isMedium ? \"M\" : this.isSmall ? \"S\" : \"XS\";\n            }\n        }\n      } else {\n        switch (index) {\n          case 1:\n          case 2:\n            return big ? \"XL\" : this.isMedium ? \"L\" : this.isSmall ? \"L\" : \"M\";\n          case 3:\n          case 4:\n            return big ? \"L\" : this.isMedium ? \"M\" : this.isSmall ? \"S\" : \"XS\";\n          case 5:\n          case 6:\n            return big ? \"M\" : this.isMedium ? \"M\" : this.isSmall ? \"S\" : \"XS\";\n        }\n      }\n    };\n\n    const leadBehavior = (lead: string | null, index: number, imageSrc: string | null): string | null => {\n      const big = this.isUltra || this.isLarge;\n      const noImage = imageSrc == null || imageSrc == undefined;\n\n      if (isRubrick) {\n        switch (index) {\n          case 1:\n          case 2:\n            return lead;\n          case 3:\n            if (noImage) {\n              return big ? lead : this.isMedium ? lead : this.isSmall ? lead : null;\n            }\n            if (rubrickSize == RubrickSize.large) {\n              if (this.hasSide) {\n                return this.isUltra ? null : this.isLarge ? null : this.isMedium ? lead : null;\n              }\n              return this.isUltra ? lead : this.isLarge ? lead : this.isMedium ? lead : null;\n            }\n            return big ? lead : this.isMedium ? lead : null;\n          case 4:\n            if (noImage) {\n              return big ? lead : this.isMedium ? lead : this.isSmall ? lead : null;\n            }\n            if (rubrickSize == RubrickSize.medium) {\n              if (this.hasSide) {\n                return this.isUltra ? null : this.isLarge ? null : this.isMedium ? lead : null;\n              }\n              return this.isUltra ? lead : this.isLarge ? lead : this.isMedium ? lead : null;\n            }\n            if (rubrickSize == RubrickSize.large) {\n              if (this.hasSide) {\n                return this.isUltra ? null : this.isLarge ? null : this.isMedium ? lead : null;\n              }\n              return this.isUltra ? lead : this.isLarge ? lead : this.isMedium ? lead : null;\n            }\n            return big ? lead : this.isMedium ? lead : null;\n          case 5:\n            if (noImage) {\n              return big ? lead : this.isMedium ? lead : null;\n            }\n            if (this.hasSide) {\n              return null;\n            }\n            return big ? lead : this.isMedium ? null : null;\n          case 6:\n            if (noImage) {\n              return big ? lead : this.isMedium ? lead : null;\n            }\n            if (this.hasSide) {\n              return null;\n            }\n            return big ? lead : this.isMedium ? null : null;\n        }\n      } else {\n        switch (index) {\n          case 1:\n          case 2:\n            return lead;\n          case 3:\n          case 4:\n            if (noImage) {\n              return lead;\n            }\n            if (this.hasSide) {\n              return big ? lead : this.isMedium ? lead : null;\n            }\n            return big ? lead : this.isMedium ? null : null;\n          case 5:\n          case 6:\n            return big ? lead : this.isMedium ? lead : null;\n        }\n      }\n      return lead;\n    };\n\n    const imageBehavior = (imageSrc: string | null, index: number): \"top\" | \"right\" | null => {\n      // Image has higher priority than lead\n      const big = this.isUltra || this.isLarge;\n      const noImage = imageSrc == null || imageSrc == undefined;\n\n      if (noImage) {\n        return null;\n      }\n\n      if (isRubrick) {\n        switch (index) {\n          case 1:\n          case 2:\n            return \"top\";\n          case 3:\n            if (rubrickSize == RubrickSize.medium) {\n              if (this.hasSide) {\n                return big ? \"top\" : this.isMedium ? \"top\" : this.isSmall ? null : null;\n              }\n            }\n\n            if (rubrickSize == RubrickSize.large) {\n              if (this.hasSide) {\n                return big ? \"right\" : this.isMedium ? \"top\" : this.isSmall ? null : null;\n              }\n              return big ? null : this.isMedium ? \"top\" : this.isSmall ? null : null;\n            }\n\n            return big ? \"top\" : this.isMedium ? \"top\" : this.isSmall ? null : null;\n          case 4:\n            if (rubrickSize == RubrickSize.medium) {\n              if (this.hasSide) {\n                return big ? \"right\" : this.isMedium ? \"top\" : this.isSmall ? null : null;\n              }\n              return big ? null : this.isMedium ? \"top\" : this.isSmall ? null : null;\n            }\n\n            if (rubrickSize == RubrickSize.large) {\n              if (this.hasSide) {\n                return big ? \"right\" : this.isMedium ? \"top\" : this.isSmall ? null : null;\n              }\n              return big ? null : this.isMedium ? \"top\" : this.isSmall ? null : null;\n            }\n\n            return big ? \"top\" : this.isMedium ? \"top\" : this.isSmall ? null : null;\n          case 5:\n            if (rubrickSize == RubrickSize.medium || rubrickSize == RubrickSize.large) {\n              if (this.hasSide) {\n                return big ? \"right\" : this.isMedium ? \"right\" : null;\n              }\n              return big ? null : this.isMedium ? \"right\" : null;\n            }\n\n          case 6:\n            if (rubrickSize == RubrickSize.large) {\n              if (this.hasSide) {\n                return big ? \"right\" : this.isMedium ? \"right\" : null;\n              }\n              return big ? null : this.isMedium ? \"right\" : null;\n            }\n        }\n      } else {\n        switch (index) {\n          case 1:\n          case 2:\n            return \"top\";\n          case 3:\n          case 4:\n            if (this.hasSide) {\n              return big ? \"top\" : this.isMedium ? \"right\" : this.isSmall ? \"right\" : \"top\";\n            }\n            return big ? \"top\" : this.isMedium ? \"top\" : this.isSmall ? null : null;\n          case 5:\n          case 6:\n            return big ? null : this.isMedium ? null : this.isSmall ? null : null;\n        }\n      }\n    };\n\n    if (!isRubrick && this.contentList.length < 6) {\n      return <div>At least add 6 elements for hero</div>;\n    }\n\n    const teaserClasses = (index: number) => ({\n      \"stzh-pi-teaser-layout-teaser\": true,\n      [`stzh-pi-teaser-layout-teaser--${index + 1}`]: true,\n      [`stzh-pi-teaser-layout-teaser--${index + 1}--${this.hasSide ? \"side\" : \"no-side\"}`]: true,\n      [`stzh-pi-teaser-layout-teaser--${index + 1}--${rubrickSize}`]: true,\n      [`stzh-pi-teaser-layout-teaser--${index + 1}--${rubrickSize}--${this.hasSide ? \"side\" : \"no-side\"}`]: true,\n    });\n\n    return (\n      <Host is-rubrick={isRubrick ? \"true\" : \"false\"} amount={rubrickSize} has-side={this.hasSide ? \"true\" : \"false\"}>\n        {hasHeading && (\n          <div class=\"stzh-pi-teaser-layout__header-holder\">\n            <Heading class=\"stzh-pi-teaser-layout__header\" level={this.headingLevel}>\n              {this.heading}\n            </Heading>\n          </div>\n        )}\n        <div class={classes}>\n          {...this.contentList.map((teaser: PiTeaser | EmptyTeaser, index) =>\n            teaser.type == \"empty-teaser\" ? (\n              <div class={teaserClasses(index)} />\n            ) : (\n              <stzh-pi-teaser-layout-item\n                key={index}\n                href={teaser.href}\n                dateline={teaser.dateline}\n                heading={teaser.heading}\n                date={teaser.date}\n                imageSrc={teaser.imageSrc}\n                contentSize={contentSizeBehavior(index + 1)}\n                lead={leadBehavior(teaser.lead, index + 1, teaser.imageSrc)}\n                imagePosition={imageBehavior(teaser.imageSrc, index + 1)}\n                class={teaserClasses(index)}\n              />\n            ),\n          )}\n        </div>\n        {bottomSlotUsed && (\n          <div class=\"stzh-pi-teaser-layout__bottom-slot\">\n            <slot name=\"bottom\" />\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/stzh-pi-teaser.entry.js

@@ -1,6 +1,8 @@
 import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-d8813b10.js';
+import { h as hasSlot } from './utils-ba72c5a8.js';
+import './string-utils-a9af5463.js';
 
-const stzhPiTeaserCss = "@charset \"UTF-8\";\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.sc-stzh-pi-teaser-h {\n  font-family: var(--stzh-font-family-medium);\n  font-weight: var(--stzh-font-weight-medium);\n  font-style: var(--stzh-font-style-medium);\n  color: var(--stzh-base-color);\n  box-sizing: border-box;\n  display: block;\n  \n}\n[hidden].sc-stzh-pi-teaser-h, [stzh-hidden].sc-stzh-pi-teaser-h {\n  display: none;\n}\n.sc-stzh-pi-teaser-h::selection {\n  color: var(--stzh-selection-color);\n  background-color: var(--stzh-selection-background-color);\n}\n.sc-stzh-pi-teaser-h *.sc-stzh-pi-teaser, .sc-stzh-pi-teaser-h *.sc-stzh-pi-teaser::before, .sc-stzh-pi-teaser-h *.sc-stzh-pi-teaser::after {\n  box-sizing: border-box;\n  text-underline-offset: var(--stzh-link-text-underline-offset);\n  text-decoration-thickness: var(--stzh-link-text-decoration-thickness);\n  -webkit-text-decoration-skip-ink: var(--stzh-link-text-decoration-skip-ink);\n          text-decoration-skip-ink: var(--stzh-link-text-decoration-skip-ink);\n}\n.sc-stzh-pi-teaser-h .has-focus.sc-stzh-pi-teaser {\n  outline: var(--stzh-flyingfocus-color) solid 0.125rem;\n  outline-offset: 0.125rem;\n}\n.sc-stzh-pi-teaser-h .stzh-fylingfocus-focused.sc-stzh-pi-teaser {\n  outline-style: none !important;\n}\n.sc-stzh-pi-teaser-h .stzh-fylingfocus-focused.sc-stzh-pi-teaser::-moz-focus-inner {\n  border: 0 !important;\n}\n\n\n.sc-stzh-pi-teaser-h {\n  --image-background-color: var(\n    --stzh-pi-teaser-image-background-color,\n    var(--stzh-color-coolgrey10)\n  );\n  display: flex;\n  inline-size: 100%;\n  block-size: 100%;\n  container-type: size;\n}\n[image-position=top].sc-stzh-pi-teaser-h {\n  --grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);\n}\n@media screen and (max-width: 899px) {\n  [image-position=top].sc-stzh-pi-teaser-h {\n    --grid-template-areas: var(\n      --stzh-pi-teaser-grid-template-areas,\n      \"image image image image \" \"text text text text \"\n    );\n  }\n}\n@media screen and (min-width: 900px) {\n  [image-position=top].sc-stzh-pi-teaser-h {\n    --grid-template-areas: var(\n      --stzh-pi-teaser-grid-template-areas,\n      \"image image image image image image image image\"\n        \"text text text text text text text text\"\n    );\n  }\n}\n@media screen and (min-width: 1260px) {\n  [image-position=top].sc-stzh-pi-teaser-h {\n    --grid-template-areas: var(\n      --stzh-pi-teaser-grid-template-areas,\n      \"image image image image image image image image image image image image\"\n        \"text text text text text text text text text text text text\"\n    );\n  }\n}\n[image-position=right].sc-stzh-pi-teaser-h {\n  --grid-template-no-rows: 1fr;\n}\n@media screen and (max-width: 899px) {\n  [image-position=right].sc-stzh-pi-teaser-h {\n    --grid-template-areas: var(\n      --stzh-pi-teaser-grid-template-areas,\n      \"text text image image\"\n    );\n  }\n}\n@media screen and (min-width: 900px) {\n  [image-position=right].sc-stzh-pi-teaser-h {\n    --grid-template-areas: var(\n      --stzh-pi-teaser-grid-template-areas,\n      \"text text text text text image image image\"\n    );\n  }\n}\n@media screen and (min-width: 1260px) {\n  [image-position=right].sc-stzh-pi-teaser-h {\n    --grid-template-areas: var(\n      --stzh-pi-teaser-grid-template-areas,\n      \"text text text text text text image image image image image image\"\n    );\n  }\n}\n.sc-stzh-pi-teaser-h:not([has-image]) {\n  --grid-template-no-rows: 1fr;\n}\n@media screen and (max-width: 899px) {\n  .sc-stzh-pi-teaser-h:not([has-image]) {\n    --grid-template-areas-no-image: \"text text text text\";\n  }\n}\n@media screen and (min-width: 900px) {\n  .sc-stzh-pi-teaser-h:not([has-image]) {\n    --grid-template-areas-no-image: \"text text text text text text text text\";\n  }\n}\n@media screen and (min-width: 1260px) {\n  .sc-stzh-pi-teaser-h:not([has-image]) {\n    --grid-template-areas-no-image: \"text text text text text text text text text text text text\";\n  }\n}\n.sc-stzh-pi-teaser-h:not([has-lead]) .stzh-pi-teaser__lead.sc-stzh-pi-teaser {\n  display: none;\n}\n[content-size=XL].sc-stzh-pi-teaser-h .stzh-pi-teaser__title.sc-stzh-pi-teaser {\n  font-size: var(--stzh-font-mega-font-size);\n  line-height: var(--stzh-font-mega-text-line-height);\n  letter-spacing: var(--stzh-font-mega-text-letter-spacing);\n}\n[content-size=L].sc-stzh-pi-teaser-h .stzh-pi-teaser__title.sc-stzh-pi-teaser {\n  font-size: var(--stzh-font-hecto-font-size);\n  line-height: var(--stzh-font-hecto-text-line-height);\n  letter-spacing: var(--stzh-font-hecto-text-letter-spacing);\n}\n[content-size=M].sc-stzh-pi-teaser-h .stzh-pi-teaser__title.sc-stzh-pi-teaser {\n  font-size: var(--stzh-font-deca-font-size);\n  line-height: var(--stzh-font-deca-text-line-height);\n  letter-spacing: var(--stzh-font-deca-text-letter-spacing);\n}\n[content-size=S].sc-stzh-pi-teaser-h .stzh-pi-teaser__title.sc-stzh-pi-teaser {\n  font-size: var(--stzh-font-deci-font-size);\n  line-height: var(--stzh-font-deci-text-line-height);\n  letter-spacing: var(--stzh-font-curve---text-letter-spacing);\n}\n[content-size=XS].sc-stzh-pi-teaser-h .stzh-pi-teaser__title.sc-stzh-pi-teaser {\n  font-size: var(--stzh-font-centi-font-size);\n  line-height: var(--stzh-font-centi-text-line-height);\n  letter-spacing: var(--stzh-font-curve---text-letter-spacing);\n}\n[content-size=S].sc-stzh-pi-teaser-h:not([has-image]) .stzh-pi-teaser__title.sc-stzh-pi-teaser {\n  -webkit-line-clamp: 2;\n}\n@container (max-height: 235px) {\n  .sc-stzh-pi-teaser-h[image-position=top] .stzh-pi-teaser {\n    --grid-template-rows: 40cqh 60cqh;\n  }\n  .sc-stzh-pi-teaser-h[image-position=top] .stzh-pi-teaser__lead {\n    --lead-lines: 1;\n  }\n  .sc-stzh-pi-teaser-h:not([has-image]) .stzh-pi-teaser__lead {\n    --lead-lines: 1;\n  }\n}\n@container (min-height: 236px) and (max-height:349px) {\n  .sc-stzh-pi-teaser-h[image-position=top] .stzh-pi-teaser {\n    --grid-template-rows: 47cqh 53cqh;\n  }\n  .sc-stzh-pi-teaser-h[image-position=top] .stzh-pi-teaser__lead {\n    --lead-lines: 2;\n  }\n  .sc-stzh-pi-teaser-h:not([has-image]) .stzh-pi-teaser__lead {\n    --lead-lines: 2;\n  }\n}\n@container (min-height: 350px) and (max-height:599px) {\n  .sc-stzh-pi-teaser-h[image-position=top] .stzh-pi-teaser {\n    --grid-template-rows: 55cqh 45cqh;\n  }\n  .sc-stzh-pi-teaser-h[image-position=top] .stzh-pi-teaser__lead {\n    --lead-lines: 3;\n  }\n}\n@container (min-height: 600px) and (max-height: 799px) {\n  .sc-stzh-pi-teaser-h[image-position=top] .stzh-pi-teaser {\n    --grid-template-rows: 55cqh 45cqh;\n  }\n}\n@container (min-height: 800px) {\n  .sc-stzh-pi-teaser-h[image-position=top] .stzh-pi-teaser {\n    --grid-template-rows: 40cqh 60cqh;\n  }\n}\n\n.stzh-pi-teaser.sc-stzh-pi-teaser {\n  column-gap: var(--stzh-grid-gutter);\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  display: grid;\n  height: 100%;\n  width: 100%;\n  grid-template-rows: var(--grid-template-no-rows, var(--grid-template-rows));\n  grid-template-areas: var(--grid-template-areas-no-image, var(--grid-template-areas));\n  background-color: var(--stzh-color-grey10);\n}\n@media screen and (min-width: 600px) {\n  .stzh-pi-teaser.sc-stzh-pi-teaser {\n    column-gap: var(--stzh-grid-gutter-small);\n  }\n}\n@media screen and (min-width: 900px) {\n  .stzh-pi-teaser.sc-stzh-pi-teaser {\n    column-gap: var(--stzh-grid-gutter-medium);\n  }\n}\n@media screen and (min-width: 1260px) {\n  .stzh-pi-teaser.sc-stzh-pi-teaser {\n    column-gap: var(--stzh-grid-gutter-large);\n  }\n}\n@media screen and (min-width: 1600px) {\n  .stzh-pi-teaser.sc-stzh-pi-teaser {\n    column-gap: var(--stzh-grid-gutter-ultra);\n  }\n}\n@media screen and (min-width: 900px) {\n  .stzh-pi-teaser.sc-stzh-pi-teaser {\n    grid-template-columns: repeat(8, minmax(0, 1fr));\n  }\n}\n@media screen and (min-width: 1260px) {\n  .stzh-pi-teaser.sc-stzh-pi-teaser {\n    grid-template-columns: repeat(12, minmax(0, 1fr));\n  }\n}\n.stzh-pi-teaser__text.sc-stzh-pi-teaser {\n  display: grid;\n  grid-template-rows: auto auto minmax(0, 1fr) auto;\n  height: 100%;\n  min-height: 0;\n  align-content: start;\n}\n.stzh-pi-teaser__wrapper.sc-stzh-pi-teaser {\n  grid-area: text;\n  overflow: hidden;\n  padding: var(--stzh-space-medium);\n  height: 100%;\n  min-height: 0;\n}\n.stzh-pi-teaser__image.sc-stzh-pi-teaser {\n  overflow: hidden;\n  grid-area: image;\n}\n.stzh-pi-teaser__image.sc-stzh-pi-teaser > img.sc-stzh-pi-teaser {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n.stzh-pi-teaser__dateline.sc-stzh-pi-teaser {\n  font-family: var(--stzh-font-family-title);\n  font-weight: var(--stzh-font-weight-title);\n  font-style: var(--stzh-font-style-title);\n  font-size: var(--stzh-font-milli-font-size);\n  line-height: var(--stzh-font-milli-text-line-height);\n  letter-spacing: var(--stzh-font-curve---text-letter-spacing);\n  color: var(--stzh-color-coolgrey70);\n  margin: 0;\n  align-self: start;\n}\n.stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser {\n  padding-top: var(--stzh-space-xsmall);\n  padding-bottom: var(--stzh-space-xxsmall);\n}\n@media screen and (min-width: 600px) {\n  .stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser {\n    padding-top: var(--stzh-space-small);\n  }\n}\n@media screen and (min-width: 900px) {\n  .stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser {\n    padding-top: var(--stzh-space-medium);\n  }\n}\n@media screen and (min-width: 1260px) {\n  .stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser {\n    padding-top: var(--stzh-space-xlarge);\n  }\n}\n@media screen and (min-width: 900px) {\n  .stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser {\n    padding-bottom: var(--stzh-space-xsmall);\n  }\n}\n@media screen and (min-width: 1260px) {\n  .stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser {\n    padding-bottom: var(--stzh-space-small);\n  }\n}\n.stzh-pi-teaser__title.sc-stzh-pi-teaser {\n  font-family: var(--stzh-font-family-title);\n  font-weight: var(--stzh-font-weight-title);\n  font-style: var(--stzh-font-style-title);\n  overflow-wrap: break-word;\n  word-wrap: break-word;\n  word-break: break-word;\n  hyphens: auto;\n  color: var(--stzh-color-black);\n  margin: 0;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  \n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  \n  align-self: start;\n}\n.stzh-pi-teaser__title-link.sc-stzh-pi-teaser {\n  display: block;\n  font-family: inherit;\n  appearance: none;\n  background-color: transparent;\n  border: none;\n  color: var(--stzh-color-black);\n  -webkit-text-decoration-line: none;\n          text-decoration-line: none;\n  transition: color var(--stzh-base-transition-animation-speed);\n  border-radius: var(--stzh-button-border-radius);\n  cursor: pointer;\n}\n.stzh-pi-teaser__lead-wrapper.sc-stzh-pi-teaser {\n  padding-bottom: var(--stzh-space-xsmall);\n}\n@media screen and (min-width: 600px) {\n  .stzh-pi-teaser__lead-wrapper.sc-stzh-pi-teaser {\n    padding-bottom: var(--stzh-space-small);\n  }\n}\n@media screen and (min-width: 900px) {\n  .stzh-pi-teaser__lead-wrapper.sc-stzh-pi-teaser {\n    padding-bottom: var(--stzh-space-medium);\n  }\n}\n@media screen and (min-width: 1260px) {\n  .stzh-pi-teaser__lead-wrapper.sc-stzh-pi-teaser {\n    padding-bottom: var(--stzh-space-xlarge);\n  }\n}\n.stzh-pi-teaser__lead.sc-stzh-pi-teaser {\n  margin-top: 0;\n  color: var(--stzh-color-coolgrey70);\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: var(--lead-lines, 3);\n  line-clamp: var(--lead-lines, 3);\n  overflow: hidden;\n  \n  align-self: start;\n}\n@media screen and (max-width: 899px) {\n  .stzh-pi-teaser__lead.sc-stzh-pi-teaser {\n    font-size: var(--stzh-font-milli-font-size);\n    line-height: var(--stzh-font-milli-text-line-height);\n    letter-spacing: var(--stzh-font-curve---text-letter-spacing);\n  }\n}\n@media screen and (min-width: 900px) {\n  .stzh-pi-teaser__lead.sc-stzh-pi-teaser {\n    font-size: var(--stzh-font-centi-font-size);\n    line-height: var(--stzh-font-centi-text-line-height);\n    letter-spacing: var(--stzh-font-curve---text-letter-spacing);\n  }\n}\n.stzh-pi-teaser__date.sc-stzh-pi-teaser {\n  font-size: var(--stzh-font-micro-font-size);\n  line-height: var(--stzh-font-micro-text-line-height);\n  color: var(--stzh-color-coolgrey70);\n  margin: 0;\n  align-self: end;\n}";
+const stzhPiTeaserCss = ".sc-stzh-pi-teaser-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-pi-teaser-h,[stzh-hidden].sc-stzh-pi-teaser-h{display:none}.sc-stzh-pi-teaser-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-pi-teaser-h *.sc-stzh-pi-teaser,.sc-stzh-pi-teaser-h *.sc-stzh-pi-teaser::before,.sc-stzh-pi-teaser-h *.sc-stzh-pi-teaser::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-pi-teaser-h .has-focus.sc-stzh-pi-teaser{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-pi-teaser-h .stzh-fylingfocus-focused.sc-stzh-pi-teaser{outline-style:none !important}.sc-stzh-pi-teaser-h .stzh-fylingfocus-focused.sc-stzh-pi-teaser::-moz-focus-inner{border:0 !important}.sc-stzh-pi-teaser-h{--image-background-color:var(\n    --stzh-pi-teaser-image-background-color,\n    var(--stzh-color-primary30)\n  );display:flex;flex-direction:column}.stzh-pi-teaser.sc-stzh-pi-teaser{position:relative;flex-grow:1;display:flex;flex-direction:column;background-color:var(--stzh-color-white)}.stzh-pi-teaser__wrapper.sc-stzh-pi-teaser{display:flex;flex-grow:1;padding-right:var(--stzh-space-medium);padding-left:var(--stzh-space-medium);padding-top:var(--stzh-space-medium);padding-bottom:var(--stzh-space-medium);flex-direction:column;align-items:flex-start}@media screen and (min-width: 900px){.stzh-pi-teaser__wrapper.sc-stzh-pi-teaser{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-teaser__wrapper.sc-stzh-pi-teaser{padding-left:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-teaser__wrapper.sc-stzh-pi-teaser{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 600px){.stzh-pi-teaser__wrapper.sc-stzh-pi-teaser{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-teaser__wrapper.sc-stzh-pi-teaser{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-pi-teaser__wrapper.sc-stzh-pi-teaser{padding-bottom:var(--stzh-space-xxlarge)}}.stzh-pi-teaser__image.sc-stzh-pi-teaser{width:100%;display:none}.stzh-pi-teaser__dateline.sc-stzh-pi-teaser{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-style:var(--stzh-font-style-title);font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);color:var(--stzh-color-coolgrey70);margin:0 0 var(--stzh-space-small)}@media screen and (min-width: 900px){.stzh-pi-teaser__dateline.sc-stzh-pi-teaser{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-pi-teaser__title.sc-stzh-pi-teaser{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-style:var(--stzh-font-style-title);font-size:var(--stzh-font-curve-teaser-default-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-teaser-default-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-teaser-default-text-letter-spacing);overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;hyphens:auto;color:var(--stzh-color-black);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}@media screen and (min-width: 1260px){.stzh-pi-teaser__title.sc-stzh-pi-teaser{font-size:var(--stzh-font-curve-teaser-large-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-teaser-large-text-line-height, var(--stzh-font-deci-text-line-height));letter-spacing:var(--stzh-font-curve-teaser-large-text-letter-spacing)}}.stzh-pi-teaser__title-link.sc-stzh-pi-teaser{display:block;font-family:inherit;padding:0;appearance:none;background-color:transparent;border:none;color:var(--stzh-color-black);-webkit-text-decoration-line:none;text-decoration-line:none;transition:color var(--stzh-base-transition-animation-speed);border-radius:var(--stzh-button-border-radius);cursor:pointer}.stzh-pi-teaser__title-link.sc-stzh-pi-teaser::after{content:\"\";display:block;position:absolute;top:0;left:0;width:100%;height:100%}.stzh-pi-teaser__title-link.sc-stzh-pi-teaser::after{z-index:1}.stzh-pi-teaser__lead.sc-stzh-pi-teaser{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);margin-top:0;margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 600px){.stzh-pi-teaser__lead.sc-stzh-pi-teaser{margin-bottom:var(--stzh-space-small)}}@media screen and (min-width: 900px){.stzh-pi-teaser__lead.sc-stzh-pi-teaser{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-pi-teaser__lead.sc-stzh-pi-teaser{margin-bottom:var(--stzh-space-xlarge)}}.stzh-pi-teaser__date.sc-stzh-pi-teaser{color:var(--stzh-color-coolgrey70);margin:0;text-align:right;width:100%}.stzh-pi-teaser--has-image.sc-stzh-pi-teaser .stzh-pi-teaser__image.sc-stzh-pi-teaser{display:block}.stzh-pi-teaser--has-image.sc-stzh-pi-teaser .stzh-pi-teaser__lead.sc-stzh-pi-teaser{margin-top:var(--stzh-space-xxsmall)}@media screen and (min-width: 900px){.stzh-pi-teaser--has-image.sc-stzh-pi-teaser .stzh-pi-teaser__lead.sc-stzh-pi-teaser{margin-top:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.stzh-pi-teaser--has-image.sc-stzh-pi-teaser .stzh-pi-teaser__lead.sc-stzh-pi-teaser{margin-top:var(--stzh-space-small)}}.stzh-pi-teaser__title-ratio.sc-stzh-pi-teaser{--background-color:var(--image-background-color)}.stzh-pi-teaser__title-ratio.sc-stzh-pi-teaser .stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser{display:flex;flex-direction:column;padding-top:var(--stzh-space-medium);padding-right:var(--stzh-space-medium);padding-bottom:var(--stzh-space-medium);padding-left:var(--stzh-space-medium)}@media screen and (min-width: 900px){.stzh-pi-teaser__title-ratio.sc-stzh-pi-teaser .stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-teaser__title-ratio.sc-stzh-pi-teaser .stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-teaser__title-ratio.sc-stzh-pi-teaser .stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-pi-teaser__title-ratio.sc-stzh-pi-teaser .stzh-pi-teaser__title-wrapper.sc-stzh-pi-teaser{padding-left:var(--stzh-space-large)}}.stzh-pi-teaser__title-ratio.sc-stzh-pi-teaser .stzh-pi-teaser__dateline.sc-stzh-pi-teaser{margin-bottom:var(--stzh-space-xxsmall)}";
 const StzhPiTeaserStyle0 = stzhPiTeaserCss;
 
 const StzhPiTeaser = class {
@@ -19,26 +21,10 @@ const StzhPiTeaser = class {
         this.analyticsId = undefined;
         this.dateline = "";
         this.heading = "";
-        this.imageSrc = undefined;
         this.headingLevel = "3";
         this.lead = "";
         this.date = "";
-        this.contentSize = "M";
-        this.imagePosition = undefined;
-        this.isHero = undefined;
     }
-    // private truncateLead(text: string, max: number): string {
-    //   console.log(max);
-    //   if (!text) return "";
-    //   if (text.length <= max) return text;
-    //   let cut = text.slice(0, max);
-    //   const backtracked = cut.replace(/\s+\S*$/, "");
-    //   if (backtracked.length >= Math.floor(max * 0.6)) {
-    //     cut = backtracked;
-    //   }
-    //   cut = cut.replace(/[\s.,;:!?\-–—]+$/, "");
-    //   return cut + "…";
-    // }
     componentDidRender() {
         requestAnimationFrame(() => {
             var _a, _b;
@@ -51,20 +37,18 @@ const StzhPiTeaser = class {
     renderHeading() {
         const Heading = `h${this.headingLevel}`;
         const TitleLink = this.href ? "a" : "button";
-        return (h("div", { class: "stzh-pi-teaser__title-wrapper" }, h(Heading, { class: "stzh-pi-teaser__title" }, h(TitleLink, { ref: el => (this.titleLinkElement = el), class: "stzh-pi-teaser__title-link", href: this.href, target: this.target, onClick: this.handleCardClick }, h("div", { ref: el => (this.headingTextElement = el) }, this.heading)))));
+        return (h("div", { class: "stzh-pi-teaser__title-wrapper" }, this.dateline && h("p", { class: "stzh-pi-teaser__dateline" }, this.dateline), h(Heading, { class: "stzh-pi-teaser__title" }, h(TitleLink, { ref: el => (this.titleLinkElement = el), class: "stzh-pi-teaser__title-link", href: this.href, target: this.target, onClick: this.handleCardClick }, h("div", { ref: el => (this.headingTextElement = el) }, this.heading ? this.heading : h("slot", { name: "heading" }))))));
     }
     render() {
-        const hasLead = !!this.lead;
-        const hasImage = !!this.imageSrc && !!this.imagePosition;
-        const displayLead = this.lead;
-        // ? this.truncateLead(this.lead, this.contentSize == "XL" || this.contentSize == "L" ? 260 : 160)
-        // : "";
+        const hasLead = !!this.lead || hasSlot(this.element, "lead");
+        const hasImageSlot = hasSlot(this.element, "image");
+        const shouldRenderTitleRatio = !hasImageSlot;
         const classes = {
             "stzh-pi-teaser": true,
             "stzh-pi-teaser--has-lead": hasLead,
-            "stzh-pi-teaser--has-image": hasImage,
+            "stzh-pi-teaser--has-image": hasImageSlot,
         };
-        return (h(Host, { key: 'd9c3d58e879188890dd07823bb996f2de93651a2', "has-lead": hasLead, "has-image": hasImage, "image-position": this.imagePosition, "content-size": this.contentSize }, h("article", { key: '47791c89f8cbe92744e387bf4cb8eba93c067ed4', class: classes, "aria-label": this.heading, role: "listitem" }, hasImage && (h("div", { key: 'aa88aa3f4552a95cac98acdc505faf510d4fdde6', class: "stzh-pi-teaser__image" }, h("img", { key: '786a92cef49dcb7a37f472be30ea4d55710f204e', src: this.imageSrc, alt: "Example image" }))), h("div", { key: '0c49e95677fd68a72be31554fb4998a9b86ba08a', class: "stzh-pi-teaser__wrapper" }, h("div", { key: '324a03003b28d579fb46c7e047433b99e5ee453e', class: "stzh-pi-teaser__text" }, this.dateline && h("p", { key: 'e49a94c945e5d3e1e5a3d9efac84ef8550f8d310', class: "stzh-pi-teaser__dateline" }, this.dateline), this.renderHeading(), h("div", { key: '0623aadddea2c2e163abeb7b4495f475cf12f331', class: "stzh-pi-teaser__lead-wrapper" }, h("div", { key: 'a7ab6f1d9a5a785f758815a7599ba7f1534dd2d3', class: "stzh-pi-teaser__lead" }, displayLead)), this.date && h("div", { key: '79f7849f4585f3f60c918e9379c28efbcc5d026a', class: "stzh-pi-teaser__date" }, this.date))))));
+        return (h(Host, { key: 'a70c8996daeb2c0083462ca59fe804c4e85b9b38', "has-lead": hasLead }, h("article", { key: '609aaef998f024efe25cb4a8a927edfdfd849903', class: classes, "aria-label": this.heading, role: "listitem" }, h("div", { key: '561364097a5782bcfcb787879ad2e9f3f8008228', class: "stzh-pi-teaser__image" }, h("stzh-ratio", { key: '1a26623c55eac86f1614ecdd2d3fc9fb5251522c', ratio: "2:1" }, h("slot", { key: '41749baf95c3683971cf74d69f769136b222e3dd', name: "image" }))), shouldRenderTitleRatio && (h("stzh-ratio", { key: '6edba9e3e9a365f3b7ef439b6f38138321e167aa', class: "stzh-pi-teaser__title-ratio", ratio: "2:1" }, this.renderHeading())), h("div", { key: '113133924dac251e51c3962fe35562cdb2303a6f', class: "stzh-pi-teaser__wrapper" }, !shouldRenderTitleRatio && this.renderHeading(), h("div", { key: '7ea6d341b3c5f68f6c51e0d0d7f1c7a3831133aa', class: "stzh-pi-teaser__lead" }, this.lead ? this.lead : h("slot", { name: "lead" })), this.date && h("div", { key: 'e0508125c1ed1e8eb34494976e725645b5d1a269', class: "stzh-pi-teaser__date" }, this.date)))));
     }
     get element() { return getElement(this); }
 };

package/dist/esm/stzh-pi-teaser.entry.js.map

@@ -1 +1 @@
-{"file":"stzh-pi-teaser.entry.js","mappings":";;AAAA,MAAM,eAAe,GAAG,inYAAinY,CAAC;AAC1oY,2BAAe,eAAe;;MCajB,YAAY;;;;QAgDf,oBAAe,GAAG,CAAC,aAAyB;YAClD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;gBAClB,SAAS,EAAE,gBAAgB;gBAC3B,aAAa;gBACb,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB,CAAC,CAAC;SACJ,CAAC;;;;wBAvCyB,EAAE;uBAGH,EAAE;;4BAMkB,GAAG;oBAG1B,EAAE;oBAGF,EAAE;2BAG4B,GAAG;;;;;;;;;;;;;;;;IAoCxD,kBAAkB;QAChB,qBAAqB,CAAC;;YACpB,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,KAAI,MAAA,IAAI,CAAC,kBAAkB,0CAAE,SAAS,CAAA,CAAC;YAExE,IAAI,QAAQ,EAAE;gBACZ,MAAA,IAAI,CAAC,gBAAgB,0CAAE,YAAY,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;aAC9D;SACF,CAAC,CAAC;KACJ;IAED,aAAa;QACX,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;QACxC,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,QAAQ,CAAC;QAC7C,QACE,WAAK,KAAK,EAAC,+BAA+B,IACxC,EAAC,OAAO,IAAC,KAAK,EAAC,uBAAuB,IACpC,EAAC,SAAS,IACR,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,gBAAgB,GAAG,EAA2C,CAAC,EAChF,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,eAAe,IAE7B,WAAK,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,kBAAkB,GAAG,EAAoB,CAAC,IAAG,IAAI,CAAC,OAAO,CAAO,CAC5E,CACJ,CACN,EACN;KACH;IAED,MAAM;QACJ,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;QAC5B,MAAM,QAAQ,GAAG,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC;QACzD,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC;;;QAI9B,MAAM,OAAO,GAAG;YACd,gBAAgB,EAAE,IAAI;YACtB,0BAA0B,EAAE,OAAO;YACnC,2BAA2B,EAAE,QAAQ;SACtC,CAAC;QAEF,QACE,EAAC,IAAI,iEAAW,OAAO,eAAa,QAAQ,oBAAkB,IAAI,CAAC,aAAa,kBAAgB,IAAI,CAAC,WAAW,IAC9G,gEAAS,KAAK,EAAE,OAAO,gBAAc,IAAI,CAAC,OAAO,EAAE,IAAI,EAAC,UAAU,IAC/D,QAAQ,KACP,4DAAK,KAAK,EAAC,uBAAuB,IAChC,4DAAK,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAC,eAAe,GAAG,CAC3C,CACP,EAED,4DAAK,KAAK,EAAC,yBAAyB,IAClC,4DAAK,KAAK,EAAE,sBAAsB,IAC/B,IAAI,CAAC,QAAQ,IAAI,0DAAG,KAAK,EAAC,0BAA0B,IAAE,IAAI,CAAC,QAAQ,CAAK,EACxE,IAAI,CAAC,aAAa,EAAE,EACrB,4DAAK,KAAK,EAAC,8BAA8B,IACvC,4DAAK,KAAK,EAAC,sBAAsB,IAAE,WAAW,CAAO,CACjD,EACL,IAAI,CAAC,IAAI,IAAI,4DAAK,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,IAAI,CAAO,CAC7D,CACF,CACE,CACL,EACP;KACH;;;;;;;","names":[],"sources":["src/components/CMS/stzh-pi-teaser/stzh-pi-teaser.scss?tag=stzh-pi-teaser&encapsulation=scoped","src/components/CMS/stzh-pi-teaser/stzh-pi-teaser.tsx"],"sourcesContent":["/**\n   * @prop --stzh-pi-teaser-image-background-color: Background color if no image is present\n */\n\n:host {\n  --image-background-color: var(\n    --stzh-pi-teaser-image-background-color,\n    #{$colorCoolgrey10}\n  );\n  display: flex;\n  inline-size: 100%;\n  block-size: 100%;\n  container-type: size;\n\n  //Grid depending on image Position\n  &[image-position=\"top\"] {\n    --grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);\n\n    @include mq($to: medium) {\n      --grid-template-areas: var(\n        --stzh-pi-teaser-grid-template-areas,\n        \"image image image image \" \"text text text text \"\n      );\n    }\n\n    @include mq($from: medium) {\n      --grid-template-areas: var(\n        --stzh-pi-teaser-grid-template-areas,\n        \"image image image image image image image image\"\n          \"text text text text text text text text\"\n      );\n    }\n\n    @include mq($from: large) {\n      --grid-template-areas: var(\n        --stzh-pi-teaser-grid-template-areas,\n        \"image image image image image image image image image image image image\"\n          \"text text text text text text text text text text text text\"\n      );\n    }\n  }\n\n  &[image-position=\"right\"] {\n    --grid-template-no-rows: 1fr;\n\n    @include mq($to: medium) {\n      --grid-template-areas: var(\n        --stzh-pi-teaser-grid-template-areas,\n        \"text text image image\"\n      );\n    }\n\n    @include mq($from: medium) {\n      --grid-template-areas: var(\n        --stzh-pi-teaser-grid-template-areas,\n        \"text text text text text image image image\"\n      );\n    }\n\n    @include mq($from: large) {\n      --grid-template-areas: var(\n        --stzh-pi-teaser-grid-template-areas,\n        \"text text text text text text image image image image image image\"\n      );\n    }\n  }\n\n  //Grid when no image\n  &:not([has-image]) {\n    --grid-template-no-rows: 1fr;\n\n    @include mq($to: medium) {\n      --grid-template-areas-no-image: \"text text text text\";\n    }\n\n    @include mq($from: medium) {\n      --grid-template-areas-no-image: \"text text text text text text text text\";\n    }\n\n    @include mq($from: large) {\n      --grid-template-areas-no-image: \"text text text text text text text text text text text text\";\n    }\n  }\n\n  //grid when no lead\n  &:not([has-lead]) {\n    .stzh-pi-teaser__lead {\n      display: none;\n    }\n  }\n\n  //Font sizes for all the teaser sizes\n  &[content-size=\"XL\"] .stzh-pi-teaser__title {\n    @include fontSize(\"mega\");\n  }\n\n  &[content-size=\"L\"] .stzh-pi-teaser__title {\n    @include fontSize(\"hecto\");\n  }\n\n  &[content-size=\"M\"] .stzh-pi-teaser__title {\n    @include fontSize(\"deca\");\n  }\n\n  &[content-size=\"S\"] .stzh-pi-teaser__title {\n    @include fontSize(\"deci\");\n  }\n\n  &[content-size=\"XS\"] .stzh-pi-teaser__title {\n    @include fontSize(\"centi\");\n  }\n\n  &[content-size=\"S\"]:not([has-image]) .stzh-pi-teaser__title {\n    -webkit-line-clamp: 2;\n  }\n\n  @container (max-height: 235px) {\n    &[image-position=\"top\"] .stzh-pi-teaser {\n      --grid-template-rows: 40cqh 60cqh;\n\n      &__lead {\n        --lead-lines: 1;\n      }\n    }\n\n    &:not([has-image]) .stzh-pi-teaser {\n      &__lead {\n        --lead-lines: 1;\n      }\n    }\n  }\n\n  @container (min-height: 236px) and (max-height:349px) {\n    &[image-position=\"top\"] .stzh-pi-teaser {\n      --grid-template-rows: 47cqh 53cqh;\n\n      &__lead {\n        --lead-lines: 2;\n      }\n    }\n\n    &:not([has-image]) .stzh-pi-teaser {\n      &__lead {\n        --lead-lines: 2;\n      }\n    }\n  }\n\n  @container (min-height: 350px) and (max-height:599px) {\n    &[image-position=\"top\"] .stzh-pi-teaser {\n      --grid-template-rows: 55cqh 45cqh;\n\n      &__lead {\n        --lead-lines: 3;\n      }\n    }\n\n    &:not([has-image]) .stzh-pi-teaser {\n      &__lead {\n        // --lead-lines: 4;\n      }\n    }\n  }\n\n  @container (min-height: 600px) and (max-height: 799px) {\n    &[image-position=\"top\"] .stzh-pi-teaser {\n      --grid-template-rows: 55cqh 45cqh;\n\n      &__lead {\n        // --lead-lines: 4;\n      }\n    }\n\n    &:not([has-image]) .stzh-pi-teaser {\n      &__lead {\n        // --lead-lines: 4;\n      }\n    }\n  }\n\n  @container (min-height: 800px) {\n    &[image-position=\"top\"] .stzh-pi-teaser {\n      --grid-template-rows: 40cqh 60cqh;\n\n      &__lead {\n        // --lead-lines: 6;\n      }\n    }\n\n    &:not([has-image]) .stzh-pi-teaser {\n      &__lead {\n        // --lead-lines: 6;\n      }\n    }\n  }\n}\n\n.stzh-pi-teaser {\n  @include grid;\n  display: grid;\n  height: 100%;\n  width: 100%;\n\n  grid-template-rows: var(--grid-template-no-rows, var(--grid-template-rows));\n  grid-template-areas: var(\n    --grid-template-areas-no-image,\n    var(--grid-template-areas)\n  );\n  background-color: var(--stzh-color-grey10);\n\n  &__text {\n    display: grid;\n    grid-template-rows: auto auto minmax(0, 1fr) auto; // dateline, title, lead & date\n    height: 100%;\n    min-height: 0;\n    align-content: start;\n  }\n\n  &__wrapper {\n    grid-area: text;\n    overflow: hidden;\n    padding: space(\"medium\");\n    height: 100%;\n    min-height: 0;\n  }\n\n  &__image {\n    overflow: hidden;\n    grid-area: image;\n\n    & > img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n    }\n  }\n\n  &__dateline {\n    @include font(\"title\");\n    @include fontSize(\"milli\");\n    color: var(--stzh-color-coolgrey70);\n    margin: 0;\n    align-self: start;\n  }\n\n  &__title-wrapper {\n    @include spaceCurve(\"padding-top\", \"small\");\n    @include spaceCurve(\"padding-bottom\", \"tiny\");\n  }\n\n  &__title {\n    @include font(\"title\");\n    @include wordWrap;\n    color: var(--stzh-color-black);\n    margin: 0;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    /* Limit the text to 3 lines */\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    /* Adds \"...\" at the end if truncated */\n    //line-height: 1.0 !important;\n    align-self: start;\n  }\n\n  &__title-link {\n    display: block;\n    font-family: inherit;\n    appearance: none;\n    background-color: transparent;\n    border: none;\n    color: var(--stzh-color-black);\n    text-decoration-line: none;\n    transition: color $baseTransitionAnimationSpeed;\n    border-radius: $buttonBorderRadius;\n    cursor: pointer;\n\n    // &::after {\n    //   content: \"\";\n    //   display: block;\n    //   position: absolute;\n    //   top: 0;\n    //   left: 0;\n    //   width: 100%;\n    //   height: 100%;\n    // }\n\n    // &::after {\n    //   z-index: 1;\n    // }\n  }\n\n  &__lead-wrapper {\n    @include spaceCurve(\"padding-bottom\", \"small\");\n  }\n\n  &__lead {\n    @include mq($to: medium) {\n      @include fontSize(\"milli\");\n    }\n\n    @include mq($from: medium) {\n      @include fontSize(\"centi\");\n    }\n\n    margin-top: 0;\n\n    color: var(--stzh-color-coolgrey70);\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: var(--lead-lines, 3);\n    line-clamp: var(--lead-lines, 3);\n    overflow: hidden;\n    /* don’t use text-overflow with multi-line clamp */\n    align-self: start;\n  }\n\n  &__date {\n    @include fontSize(\"micro\");\n    color: var(--stzh-color-coolgrey70);\n    margin: 0;\n    align-self: end;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop } from \"@stencil/core\";\n\nimport { StzhPiTeaserClickEvent } from \"../../../index\";\n\n/**\n * @slot heading - Heading text (alternative for heading property)\n * @slot lead - Lead text (alternative for lead property)\n * @slot image - Image (rendered within ratio 2:1, hence the different slot name to prevent naming collision)\n */\n@Component({\n  tag: \"stzh-pi-teaser\",\n  styleUrl: \"stzh-pi-teaser.scss\",\n  scoped: true,\n})\nexport class StzhPiTeaser {\n  /** Href of card */\n  @Prop({ reflect: true }) href: string;\n\n  /** target if the button is used as link (if href used)  */\n  @Prop() target: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link elements.\n   * Default value will be taken from `heading` prop/slot.\n   */\n  @Prop() analyticsId: string;\n\n  /** Dateline */\n  @Prop() dateline: string = \"\";\n\n  /** Heading (alternative for heading slot) */\n  @Prop() heading: string = \"\";\n\n  /** Image source link */\n  @Prop() imageSrc: string | null;\n\n  /** Heading level */\n  @Prop() headingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n  /** Lead text (alternative for lead slot) */\n  @Prop() lead: string = \"\";\n\n  /** Date */\n  @Prop() date: string = \"\";\n\n  /**Which size of teaser it is */\n  @Prop() contentSize: \"XS\" | \"S\" | \"M\" | \"L\" | \"XL\" = \"M\";\n\n  /**Whether image is on top or on the right*/\n  @Prop() imagePosition: \"top\" | \"right\" | null;\n\n  @Prop() isHero: boolean;\n\n  @Element() element: HTMLStzhListElement;\n\n  /** Click event (if href is used) */\n  @Event() stzhClick: EventEmitter<StzhPiTeaserClickEvent>;\n\n  private titleLinkElement: HTMLAnchorElement | HTMLButtonElement;\n  private headingTextElement: HTMLDivElement;\n\n  private handleCardClick = (originalEvent: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-pi-teaser\",\n      originalEvent,\n      href: this.href,\n    });\n  };\n\n  // private truncateLead(text: string, max: number): string {\n  //   console.log(max);\n  //   if (!text) return \"\";\n  //   if (text.length <= max) return text;\n\n  //   let cut = text.slice(0, max);\n  //   const backtracked = cut.replace(/\\s+\\S*$/, \"\");\n  //   if (backtracked.length >= Math.floor(max * 0.6)) {\n  //     cut = backtracked;\n  //   }\n  //   cut = cut.replace(/[\\s.,;:!?\\-–—]+$/, \"\");\n  //   return cut + \"…\";\n  // }\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      const objectId = this.analyticsId || this.headingTextElement?.innerText;\n\n      if (objectId) {\n        this.titleLinkElement?.setAttribute(\"s-object-id\", objectId);\n      }\n    });\n  }\n\n  renderHeading(): DocumentFragment {\n    const Heading = `h${this.headingLevel}`;\n    const TitleLink = this.href ? \"a\" : \"button\";\n    return (\n      <div class=\"stzh-pi-teaser__title-wrapper\">\n        <Heading class=\"stzh-pi-teaser__title\">\n          <TitleLink\n            ref={el => (this.titleLinkElement = el as HTMLAnchorElement | HTMLButtonElement)}\n            class=\"stzh-pi-teaser__title-link\"\n            href={this.href}\n            target={this.target}\n            onClick={this.handleCardClick}\n          >\n            <div ref={el => (this.headingTextElement = el as HTMLDivElement)}>{this.heading}</div>\n          </TitleLink>\n        </Heading>\n      </div>\n    );\n  }\n\n  render() {\n    const hasLead = !!this.lead;\n    const hasImage = !!this.imageSrc && !!this.imagePosition;\n    const displayLead = this.lead;\n    // ? this.truncateLead(this.lead, this.contentSize == \"XL\" || this.contentSize == \"L\" ? 260 : 160)\n    // : \"\";\n\n    const classes = {\n      \"stzh-pi-teaser\": true,\n      \"stzh-pi-teaser--has-lead\": hasLead,\n      \"stzh-pi-teaser--has-image\": hasImage,\n    };\n\n    return (\n      <Host has-lead={hasLead} has-image={hasImage} image-position={this.imagePosition} content-size={this.contentSize}>\n        <article class={classes} aria-label={this.heading} role=\"listitem\">\n          {hasImage && (\n            <div class=\"stzh-pi-teaser__image\">\n              <img src={this.imageSrc} alt=\"Example image\" />\n            </div>\n          )}\n\n          <div class=\"stzh-pi-teaser__wrapper\">\n            <div class={\"stzh-pi-teaser__text\"}>\n              {this.dateline && <p class=\"stzh-pi-teaser__dateline\">{this.dateline}</p>}\n              {this.renderHeading()}\n              <div class=\"stzh-pi-teaser__lead-wrapper\">\n                <div class=\"stzh-pi-teaser__lead\">{displayLead}</div>\n              </div>\n              {this.date && <div class=\"stzh-pi-teaser__date\">{this.date}</div>}\n            </div>\n          </div>\n        </article>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-pi-teaser.entry.js","mappings":"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","names":[],"sources":["src/components/CMS/stzh-pi-teaser/stzh-pi-teaser.scss?tag=stzh-pi-teaser&encapsulation=scoped","src/components/CMS/stzh-pi-teaser/stzh-pi-teaser.tsx"],"sourcesContent":["/**\n   * @prop --stzh-pi-teaser-image-background-color: Background color if no image is present\n */\n\n:host {\n  --image-background-color: var(\n    --stzh-pi-teaser-image-background-color,\n    #{$colorPrimary30}\n  );\n\n  display: flex;\n  flex-direction: column;\n}\n\n.stzh-pi-teaser {\n  position: relative;\n  flex-grow: 1;\n  display: flex;\n  flex-direction: column;\n  background-color: var(--stzh-color-white);\n\n  &__wrapper {\n    display: flex;\n    flex-grow: 1;\n    @include spaceCurve(\"padding-right\", \"intermediary\");\n    @include spaceCurve(\"padding-left\", \"intermediary\");\n    @include spaceCurve(\"padding-top\", \"intermediary\");\n    @include spaceCurve(\"padding-bottom\", \"regular\");\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  &__image {\n    width: 100%;\n    display: none;\n  }\n\n  &__dateline {\n    @include font(\"title\");\n    @include fontCurve(\"p1\");\n    color: var(--stzh-color-coolgrey70);\n    margin: 0 0 var(--stzh-space-small);\n  }\n\n  &__title {\n    @include font(\"title\");\n    @include fontCurve(\"teaser\");\n    @include wordWrap;\n\n    color: var(--stzh-color-black);\n    margin: 0;\n\n    display: -webkit-box;\n    -webkit-line-clamp: 3; /* Limit the text to 3 lines */\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    text-overflow: ellipsis; /* Adds \"...\" at the end if truncated */\n    //line-height: 1.0 !important;\n  }\n\n  &__title-link {\n    display: block;\n    font-family: inherit;\n    padding: 0;\n    appearance: none;\n    background-color: transparent;\n    border: none;\n    color: var(--stzh-color-black);\n    text-decoration-line: none;\n    transition: color $baseTransitionAnimationSpeed;\n    border-radius: $buttonBorderRadius;\n    cursor: pointer;\n\n    &::after {\n      content: \"\";\n      display: block;\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n    }\n\n    &::after {\n      z-index: 1;\n    }\n  }\n\n  &__lead {\n    @include fontSize(\"milli\");\n    margin-top: 0;\n    @include spaceCurve(\"margin-bottom\", \"small\");\n  }\n\n  &__date {\n    color: var(--stzh-color-coolgrey70);\n    margin: 0;\n    text-align: right;\n    width: 100%;\n  }\n\n  /* Has image */\n  &--has-image &__image {\n    display: block;\n  }\n\n  &--has-image &__lead {\n    @include spaceCurve(\"margin-top\", \"tiny\");\n  }\n\n  /* Title ratio styling (no image) */\n  &__title-ratio {\n    --background-color: var(--image-background-color);\n  }\n\n  &__title-ratio &__title-wrapper {\n    display: flex;\n    flex-direction: column;\n    @include spaceCurve(\"padding-top\", \"intermediary\");\n    @include spaceCurve(\"padding-right\", \"intermediary\");\n    @include spaceCurve(\"padding-bottom\", \"intermediary\");\n    @include spaceCurve(\"padding-left\", \"intermediary\");\n  }\n\n  &__title-ratio &__dateline {\n    margin-bottom: var(--stzh-space-xxsmall);\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop } from \"@stencil/core\";\n\nimport { StzhPiTeaserClickEvent } from \"../../../index\";\nimport { hasSlot } from \"../../../utils/utils\";\n\n/**\n * @slot heading - Heading text (alternative for heading property)\n * @slot lead - Lead text (alternative for lead property)\n * @slot image - Image (rendered within ratio 2:1, hence the different slot name to prevent naming collision)\n */\n@Component({\n  tag: \"stzh-pi-teaser\",\n  styleUrl: \"stzh-pi-teaser.scss\",\n  scoped: true,\n})\nexport class StzhPiTeaser {\n  /** Href of card */\n  @Prop({ reflect: true }) href: string;\n\n  /** target if the button is used as link (if href used)  */\n  @Prop() target: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link elements.\n   * Default value will be taken from `heading` prop/slot.\n   */\n  @Prop() analyticsId: string;\n\n  /** Dateline */\n  @Prop() dateline: string = \"\";\n\n  /** Heading (alternative for heading slot) */\n  @Prop() heading: string = \"\";\n\n  /** Heading level */\n  @Prop() headingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n  /** Lead text (alternative for lead slot) */\n  @Prop() lead: string = \"\";\n\n  /** Date */\n  @Prop() date: string = \"\";\n\n  @Element() element: HTMLStzhListElement;\n\n  /** Click event (if href is used) */\n  @Event() stzhClick: EventEmitter<StzhPiTeaserClickEvent>;\n\n  private titleLinkElement: HTMLAnchorElement | HTMLButtonElement;\n  private headingTextElement: HTMLDivElement;\n\n  private handleCardClick = (originalEvent: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-pi-teaser\",\n      originalEvent,\n      href: this.href,\n    });\n  };\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      const objectId = this.analyticsId || this.headingTextElement?.innerText;\n\n      if (objectId) {\n        this.titleLinkElement?.setAttribute(\"s-object-id\", objectId);\n      }\n    });\n  }\n\n  renderHeading(): DocumentFragment {\n    const Heading = `h${this.headingLevel}`;\n    const TitleLink = this.href ? \"a\" : \"button\";\n    return (\n      <div class=\"stzh-pi-teaser__title-wrapper\">\n        {this.dateline && <p class=\"stzh-pi-teaser__dateline\">{this.dateline}</p>}\n        <Heading class=\"stzh-pi-teaser__title\">\n          <TitleLink\n            ref={el => (this.titleLinkElement = el as HTMLAnchorElement | HTMLButtonElement)}\n            class=\"stzh-pi-teaser__title-link\"\n            href={this.href}\n            target={this.target}\n            onClick={this.handleCardClick}\n          >\n            <div ref={el => (this.headingTextElement = el as HTMLDivElement)}>\n              {this.heading ? this.heading : <slot name=\"heading\"></slot>}\n            </div>\n          </TitleLink>\n        </Heading>\n      </div>\n    );\n  }\n\n  render() {\n    const hasLead = !!this.lead || hasSlot(this.element, \"lead\");\n    const hasImageSlot = hasSlot(this.element, \"image\");\n    const shouldRenderTitleRatio = !hasImageSlot;\n\n    const classes = {\n      \"stzh-pi-teaser\": true,\n      \"stzh-pi-teaser--has-lead\": hasLead,\n      \"stzh-pi-teaser--has-image\": hasImageSlot,\n    };\n\n    return (\n      <Host has-lead={hasLead}>\n        <article class={classes} aria-label={this.heading} role=\"listitem\">\n          <div class=\"stzh-pi-teaser__image\">\n            <stzh-ratio ratio=\"2:1\">\n              <slot name={\"image\"}></slot>\n            </stzh-ratio>\n          </div>\n          {shouldRenderTitleRatio && (\n            <stzh-ratio class=\"stzh-pi-teaser__title-ratio\" ratio={\"2:1\"}>\n              {this.renderHeading()}\n            </stzh-ratio>\n          )}\n          <div class=\"stzh-pi-teaser__wrapper\">\n            {!shouldRenderTitleRatio && this.renderHeading()}\n            <div class=\"stzh-pi-teaser__lead\">{this.lead ? this.lead : <slot name=\"lead\"></slot>}</div>\n            {this.date && <div class=\"stzh-pi-teaser__date\">{this.date}</div>}\n          </div>\n        </article>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/stzh-poicard.entry.js

@@ -34,7 +34,7 @@ const StzhPoicard = class {
         const classes = {
             "stzh-poicard": true,
         };
-        return (h(Host, { key: 'fd756d25f714586291f6257e067cdcb3a71d9962' }, h("a", { key: '680220b5958f56db3453c7e6700e3897d4c1d127', class: classes, href: this._item.url, target: "_blank" }, h("div", { key: '8fe3116fe188503fd750d2fcc895cc4a03fd461a', class: "stzh-poicard__content" }, h("div", { key: 'dcc00fe19a6f5426888b0ca8a87eb9a8011d1783', class: "stzh-poicard__content-head" }, h("stzh-heading", { key: '6c17f47680bab5f9091bcd2a2a42ae03e84272c9' }, this._item.title)), h("div", { key: 'dbf7996c15c0d651018479d2a4cd436c110220a8', class: "stzh-poicard__content-body" }, this._item.distance && (h("div", { key: 'bab8ab3fccdf82457e4383d263015e3e25bf0742', class: "stzh-poicard__content-with-icon" }, h("stzh-icon", { key: 'b146c076f1c6aa520a6c0eaf6a606a785deba4ab', name: "pin" }), h("stzh-text", { key: '0e41396cf91bff05276fe9da042a5ec97d9676f5' }, this._item.distance))), this._item.temp && (h("div", { key: '2741d9d23e1ccd37e9862ce27d305dbe3b51de5c', class: "stzh-poicard__content-with-icon" }, h("stzh-icon", { key: 'ba125601a25778d381883e447efffcc3ce8e6ad2', name: "thermometer" }), h("stzh-text", { key: '29ed34c8dd36617a94dc0b9abf0d433be4471b3d' }, this._item.temp))), (this._item.statusMessageContent || this._item.statusMessage) && (h("div", { key: '58ce3646878980ba7dc7a4286472c641f2415238', class: "stzh-poicard__content-with-badge" }, this._item.statusMessage && h("stzh-text", { key: '25bb8733b1641ba78b1b3088b9e1387f615692bd', size: "milli" }, this._item.statusMessage), this._item.statusMessageContent && (h("stzh-chip", { key: 'cab5f3bd34c3db3385bb9352af35c53ca61eb412', variant: "tag", size: "small", inverted: true, icon: "", type: this._item.success ? "default" : "error", label: this._item.statusMessageContent })))))))));
+        return (h(Host, { key: '5e22e3edd9a5f53f212b24b9322384a860c0a10c' }, h("a", { key: 'f4df00d9dd0c9cc69a9c4392d589cf0bda1dffb2', class: classes, href: this._item.url, target: "_blank" }, h("div", { key: 'b0ccedb5f59c1cf6c95404c5f24896fbc8760a17', class: "stzh-poicard__content" }, h("div", { key: '5b0669e4ec18d010c9273269d061ff21d00ac1f5', class: "stzh-poicard__content-head" }, h("stzh-heading", { key: '01c998690195acad9a2ebc74709580916a16b7ae' }, this._item.title)), h("div", { key: 'd738c83014e40a372a8f4fcaec31f5a7ebca4c31', class: "stzh-poicard__content-body" }, this._item.distance && (h("div", { key: '2e7f8bbd107b14cd3a4ec619bef0e9e7074894be', class: "stzh-poicard__content-with-icon" }, h("stzh-icon", { key: 'c76f980a8e646895d676c9315327c275022fca2d', name: "pin" }), h("stzh-text", { key: '681dc3751ceaa78c7c92472d78aab67cbcb920b9' }, this._item.distance))), this._item.temp && (h("div", { key: '405b370c59f0817ad9c275661ce3c915381804e7', class: "stzh-poicard__content-with-icon" }, h("stzh-icon", { key: 'e5406e5d365ad4ceeec3d596084c57aca7e3272c', name: "thermometer" }), h("stzh-text", { key: '78cbcc97a6c6c5e7ffcee163ecce12a05b0ccde2' }, this._item.temp))), (this._item.statusMessageContent || this._item.statusMessage) && (h("div", { key: '299ee1359498476745aeea101181c23b2730d472', class: "stzh-poicard__content-with-badge" }, this._item.statusMessage && h("stzh-text", { key: 'b4260538c72566bccfd33cb2a4fed59dd9ff4697', size: "milli" }, this._item.statusMessage), this._item.statusMessageContent && (h("stzh-chip", { key: '286452c1d25334a84649a259ff5d3fddd8ed88ef', variant: "tag", size: "small", inverted: true, icon: "", type: this._item.success ? "default" : "error", label: this._item.statusMessageContent })))))))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {