@bojantest/ui 0.1.3 → 0.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -15,7 +15,7 @@ This installs **both** packages:
|
|
|
15
15
|
|
|
16
16
|
## CSS
|
|
17
17
|
|
|
18
|
-
Includes self-hosted **Barlow Condensed** (headings) and **Source Sans 3** (body) in `dist/fonts/`.
|
|
18
|
+
Includes self-hosted **Barlow Condensed** (headings) and **Source Sans 3** (body) in `dist/fonts/`, plus CSS-linked icons in `dist/img/_icn/`. Markup images (`<img src="...">`) are not bundled — copy from your Storybook/HTML examples or host them in your project.
|
|
19
19
|
|
|
20
20
|
```html
|
|
21
21
|
<link rel="stylesheet" href="node_modules/@bojantest/ui/dist/index.css">
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path id="Rectangle 17 (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M0 0H10V3.13774H3.13774V10H0V0Z" fill="var(--fill-0, #0E204B)"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="29" height="47" viewBox="0 0 29 47" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.10492 23.3533L23.2994 7.06359L21.9482 5.77153L5.5486 23.3533L21.9482 40.9349L23.2994 39.643L8.10492 23.3533Z" fill="#0E204B" stroke="#0E204B" stroke-width="8"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="32" height="46" viewBox="0 0 32 46" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M22.8353 22.9999L6.00307 39.2408L7.49985 40.529L25.6671 22.9999L7.49985 5.47084L6.00307 6.75889L22.8353 22.9999Z" fill="#0E204B" stroke="#0E204B" stroke-width="8"/>
|
|
3
|
+
</svg>
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--clr-black: #000000;--clr-white: #ffffff;--clr-white-alpha-0: rgb(255 255 255 / 0);--clr-white-alpha-50: rgb(255 255 255 / 0.05);--clr-white-alpha-100: rgb(255 255 255 / 0.1);--clr-white-alpha-200: rgb(255 255 255 / 0.2);--clr-white-alpha-300: rgb(255 255 255 / 0.3);--clr-white-alpha-400: rgb(255 255 255 / 0.4);--clr-white-alpha-500: rgb(255 255 255 / 0.5);--clr-white-alpha-600: rgb(255 255 255 / 0.6);--clr-white-alpha-700: rgb(255 255 255 / 0.7);--clr-white-alpha-800: rgb(255 255 255 / 0.8);--clr-white-alpha-900: rgb(255 255 255 / 0.9);--clr-grey-50: #f6f6f6;--clr-grey-100: #f1f1f1;--clr-grey-200: #e3e3e3;--clr-grey-300: #d4d4d4;--clr-grey-400: #c6c6c6;--clr-grey-500: #b8b8b8;--clr-grey-600: #939393;--clr-grey-700: #6e6e6e;--clr-grey-800: #4a4a4a;--clr-grey-900: #252525;--clr-red-50: #ffe6e6;--clr-red-100: #ffcccc;--clr-red-200: #ff9999;--clr-red-300: #ff6666;--clr-red-400: #ff3333;--clr-red-500: #ff0000;--clr-red-600: #cc0000;--clr-red-700: #990000;--clr-red-800: #660000;--clr-red-900: #330000;--clr-green-50: #e6ffe6;--clr-green-100: #ccffcc;--clr-green-200: #99ff99;--clr-green-300: #66ff66;--clr-green-400: #33ff33;--clr-green-500: #00ff00;--clr-green-600: #00cc00;--clr-green-700: #009900;--clr-green-800: #006600;--clr-green-900: #003300;--clr-blue-50: #ebf7ff;--clr-blue-100: #85ceff;--clr-blue-200: #47b6ff;--clr-blue-300: #1fa5ff;--clr-blue-400: #0087e0;--clr-blue-500: #006eb7;--clr-blue-600: #00568f;--clr-blue-700: #003d66;--clr-blue-800: #0e204b;--clr-blue-900: #001629;--clr-light-blue-50: #eef6fc;--clr-light-blue-100: #dcedf9;--clr-light-blue-200: #b9dcf3;--clr-light-blue-300: #a8d3f0;--clr-light-blue-400: #86c2ea;--clr-light-blue-500: #65b2e4;--clr-light-blue-600: #52a7e0;--clr-light-blue-700: #2f96da;--clr-light-blue-800: #2280bf;--clr-light-blue-900: #185d8b;--clr-vegan-green-50: #e5f1ea;--clr-vegan-green-100: #cce3d6;--clr-vegan-green-200: #99c8ac;--clr-vegan-green-300: #66ac83;--clr-vegan-green-400: #339159;--clr-vegan-green-500: #007530;--clr-vegan-green-600: #005e26;--clr-vegan-green-700: #00461d;--clr-vegan-green-800: #002f13;--clr-vegan-green-900: #00170a;--clr-vegan-turquoise: #68baa7;--clr-vegan-pink: #d93784;--clr-vegan-purple: #5f3d8a;--clr-vegan-orange: #df5426;--clr-vegan-red: #dc3756;--clr-vegan-lila: #ad217a;--font-family-heading: 'Barlow Condensed', 'Arial Narrow', sans-serif;--font-family-heading-bold: 'Barlow Condensed Bold', 'Barlow Condensed', 'Arial Narrow', sans-serif;--font-family-body: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;--font-family-body-highlight: 'Source Sans 3 Bold', 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;--font-weight-regular: 400;--font-weight-bold: 700;--letter-spacing-0: 0;--font-family-h2: var(--font-family-heading);--font-size-h1: clamp(3.125rem, 3.75vw + 1.625rem, 5rem);--line-height-h1: 1.2;--font-size-h2: clamp(2.813rem, 2.5vw + 1.813rem, 4.063rem);--line-height-h2: 1.2;--font-size-h3: clamp(2.188rem, 1.25vw + 1.688rem, 2.813rem);--line-height-h3: 1.2;--font-size-h4: clamp(1.5rem, 1vw + 1.1rem, 2rem);--line-height-h4: 1.1666666667;--font-size-h5: 1.125rem;--line-height-h5: 1.2222222222;--font-size-body-lg: 1.125rem;--line-height-body-lg: 1.3888888889;--paragraph-spacing-lg: 1.375rem;--font-size-body-md: 1rem;--line-height-body-md: 1.375;--paragraph-spacing-md: 1.25rem;--font-size-body-sm: 0.875rem;--line-height-body-sm: 1.4285714286;--paragraph-spacing-sm: 1.125rem;--font-size-body-cta: 1rem;--line-height-body-cta: 1.375;--font-size-body-tag: 1rem;--line-height-body-tag: 1;--radius-pill: 2.5rem;--shadow-sm: 0 0.25rem 0.5rem rgb(0 0 0 / 0.1);--container-max-width: 90rem;--container-padding-inline: 1.5rem;--grid-gutter: 1rem;--grid-columns: 12;--z-header: 100;--z-skip-link: 200}@media(width > 768px){:root{--font-family-h2: var(--font-family-heading-bold);--line-height-h4: 1.1875}}@font-face{font-family:"Barlow Condensed";src:url("./fonts/barlow-condensed-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:"Barlow Condensed Bold";src:url("./fonts/barlow-condensed-700.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:"Source Sans 3";src:url("./fonts/source-sans-3-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:"Source Sans 3 Bold";src:url("./fonts/source-sans-3-700.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}*,*::before,*::after{box-sizing:border-box}*{margin:0}img,picture,video,canvas,svg{display:block;max-inline-size:100%}input,button,textarea,select,optgroup{font:inherit;color:inherit}textarea{resize:vertical;resize:block}:where(ul,ol)[role=list]{list-style:none;padding:0}:focus-visible{outline:2px solid currentcolor;outline-offset:2px}:focus:not(:focus-visible){outline:none}[hidden]{display:none !important}@media(prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;text-wrap:balance}p{overflow-wrap:break-word;text-wrap:pretty}.h1{font-family:var(--font-family-heading);font-size:var(--font-size-h1);font-weight:var(--font-weight-regular);line-height:var(--line-height-h1);letter-spacing:var(--letter-spacing-0);text-transform:uppercase}.h2{font-family:var(--font-family-h2);font-size:var(--font-size-h2);font-weight:var(--font-weight-regular);line-height:var(--line-height-h2);letter-spacing:var(--letter-spacing-0);text-transform:uppercase}.h3{font-family:var(--font-family-heading);font-size:var(--font-size-h3);font-weight:var(--font-weight-regular);line-height:var(--line-height-h3);letter-spacing:var(--letter-spacing-0);text-transform:uppercase}.h4{font-family:var(--font-family-heading);font-size:var(--font-size-h4);font-weight:var(--font-weight-regular);line-height:var(--line-height-h4);letter-spacing:var(--letter-spacing-0);text-transform:uppercase}.h5{font-family:var(--font-family-heading);font-size:var(--font-size-h5);font-weight:var(--font-weight-regular);line-height:var(--line-height-h5);letter-spacing:var(--letter-spacing-0);text-transform:uppercase}.body-lg{font-family:var(--font-family-body);font-size:var(--font-size-body-lg);font-weight:var(--font-weight-regular);line-height:var(--line-height-body-lg);letter-spacing:var(--letter-spacing-0)}.body-lg-highlight{font-family:var(--font-family-body-highlight);font-size:var(--font-size-body-lg);font-weight:var(--font-weight-bold);line-height:var(--line-height-body-lg);letter-spacing:var(--letter-spacing-0)}.body-lg-textlink{font-family:var(--font-family-body);font-size:var(--font-size-body-lg);font-weight:var(--font-weight-regular);line-height:var(--line-height-body-lg);letter-spacing:var(--letter-spacing-0);text-decoration:underline}.body-md{font-family:var(--font-family-body);font-size:var(--font-size-body-md);font-weight:var(--font-weight-regular);line-height:var(--line-height-body-md);letter-spacing:var(--letter-spacing-0)}.body-md-highlight{font-family:var(--font-family-body-highlight);font-size:var(--font-size-body-md);font-weight:var(--font-weight-bold);line-height:var(--line-height-body-md);letter-spacing:var(--letter-spacing-0)}.body-md-textlink{font-family:var(--font-family-body);font-size:var(--font-size-body-md);font-weight:var(--font-weight-regular);line-height:var(--line-height-body-md);letter-spacing:var(--letter-spacing-0);text-decoration:underline}.body-sm{font-family:var(--font-family-body);font-size:var(--font-size-body-sm);font-weight:var(--font-weight-regular);line-height:var(--line-height-body-sm);letter-spacing:var(--letter-spacing-0)}.body-sm-highlight{font-family:var(--font-family-body-highlight);font-size:var(--font-size-body-sm);font-weight:var(--font-weight-bold);line-height:var(--line-height-body-sm);letter-spacing:var(--letter-spacing-0)}.body-sm-textlink{font-family:var(--font-family-body);font-size:var(--font-size-body-sm);font-weight:var(--font-weight-regular);line-height:var(--line-height-body-sm);letter-spacing:var(--letter-spacing-0);text-decoration:underline}.body-cta-text{font-family:var(--font-family-heading);font-size:var(--font-size-body-cta);font-weight:var(--font-weight-regular);line-height:var(--line-height-body-cta);letter-spacing:var(--letter-spacing-0);text-transform:uppercase}.body-cta-textlink{font-family:var(--font-family-heading);font-size:var(--font-size-body-cta);font-weight:var(--font-weight-regular);line-height:var(--line-height-body-cta);letter-spacing:var(--letter-spacing-0);text-transform:uppercase;text-decoration:underline}.body-tag-text{font-family:var(--font-family-heading);font-size:var(--font-size-body-tag);font-weight:var(--font-weight-regular);line-height:var(--line-height-body-tag);letter-spacing:var(--letter-spacing-0);text-transform:uppercase}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.skip-link{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.skip-link:focus-visible{position:fixed;inset-block-start:0;inset-inline-start:0;z-index:var(--z-skip-link);inline-size:auto;block-size:auto;margin:0;padding-block:1rem;padding-inline:1.5rem;overflow:visible;clip-path:none;white-space:nowrap;background-color:var(--clr-blue-800);color:var(--clr-white);text-decoration:none;box-shadow:var(--shadow-sm)}html{-webkit-text-size-adjust:100%;tab-size:4;hanging-punctuation:first last}body{min-height:100dvh;font-family:var(--font-family-body);font-size:var(--font-size-body-md);font-weight:var(--font-weight-regular);line-height:var(--line-height-body-md);-webkit-font-smoothing:antialiased}ul{list-style-type:none;margin:0;padding:0}button{border:none;background-color:rgba(0,0,0,0);padding:0;appearance:none;cursor:pointer}.container{inline-size:100%;max-inline-size:var(--container-max-width);margin-inline:auto;padding-inline:var(--container-padding-inline)}.button{display:flex;justify-content:center;align-items:flex-end;flex-direction:row;gap:.625rem;min-inline-size:2.5rem;min-block-size:2.875rem;padding-block:.625rem;padding-inline:1.25rem;border:none;cursor:pointer;text-decoration:none;color:var(--clr-blue-800);transition:background-color var(--duration-default, 200ms) var(--ease-default, ease-out),color var(--duration-default, 200ms) var(--ease-default, ease-out),border-color var(--duration-default, 200ms) var(--ease-default, ease-out),box-shadow var(--duration-default, 200ms) var(--ease-default, ease-out),opacity var(--duration-default, 200ms) var(--ease-default, ease-out)}.button:disabled,.button[aria-disabled=true]{cursor:not-allowed}@media(prefers-reduced-motion: reduce){.button{transition:none}}.button--outline{background-color:var(--clr-white-alpha-0);border:3px solid var(--clr-blue-800);border-radius:var(--radius-pill);color:var(--clr-blue-800)}.button--outline:hover:not(:disabled,[aria-disabled=true]){border-color:var(--clr-blue-500);color:var(--clr-blue-500);box-shadow:var(--shadow-sm)}.button--outline:active:not(:disabled,[aria-disabled=true]){background-color:var(--clr-blue-100);border-color:var(--clr-blue-800);color:var(--clr-blue-800);box-shadow:none}.button--outline:focus-visible{outline:none;background-color:var(--clr-white-alpha-0);border-color:var(--clr-blue-100);color:var(--clr-blue-800);box-shadow:none}.button--outline:disabled,.button--outline[aria-disabled=true]{background-color:var(--clr-blue-50);border-color:var(--clr-light-blue-200);color:var(--clr-light-blue-200);box-shadow:none}.button--link{background-color:rgba(0,0,0,0);border-radius:0;color:var(--clr-blue-800)}.button--link:hover:not(:disabled,[aria-disabled=true]){color:var(--clr-blue-500)}.button--link:active:not(:disabled,[aria-disabled=true]){color:var(--clr-light-blue-500)}.button--link:focus-visible{outline:none;color:var(--clr-blue-800)}.button--link:disabled,.button--link[aria-disabled=true]{color:var(--clr-light-blue-100)}.button--inverted.button--outline{background-color:var(--clr-white-alpha-0);border-color:var(--clr-white);color:var(--clr-white)}.button--inverted.button--outline:hover:not(:disabled,[aria-disabled=true]){background-color:var(--clr-light-blue-300);border-color:var(--clr-white);color:var(--clr-white);box-shadow:none}.button--inverted.button--outline:active:not(:disabled,[aria-disabled=true]){background-color:var(--clr-blue-100);border-color:var(--clr-white);color:var(--clr-white);box-shadow:none}.button--inverted.button--outline:focus-visible{background-color:var(--clr-white-alpha-0);border-color:var(--clr-blue-100);color:var(--clr-white);box-shadow:none}.button--inverted.button--outline:disabled,.button--inverted.button--outline[aria-disabled=true]{background-color:var(--clr-white-alpha-50);border-color:var(--clr-white-alpha-200);color:var(--clr-white-alpha-200);box-shadow:none}.button--inverted.button--link{color:var(--clr-white)}.button--inverted.button--link:hover:not(:disabled,[aria-disabled=true]){color:var(--clr-light-blue-300)}.button--inverted.button--link:active:not(:disabled,[aria-disabled=true]){color:var(--clr-blue-100)}.button--inverted.button--link:focus-visible{color:var(--clr-white)}.button--inverted.button--link:disabled,.button--inverted.button--link[aria-disabled=true]{color:var(--clr-white-alpha-200)}.button__icon{flex-shrink:0;inline-size:1.625rem;block-size:1.625rem;background-color:currentColor;mask-image:url("../img/_icn/chevron-right.svg");mask-repeat:no-repeat;mask-position:center;mask-size:.625rem .625rem;-webkit-mask-image:url("../img/_icn/chevron-right.svg");-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:.625rem .625rem}@supports(interpolate-size: allow-keywords){:root{interpolate-size:allow-keywords}.accordion__item[open]::details-content{block-size:auto}}.product-accordion{padding-block:3.125rem;background-color:var(--clr-grey-50)}.accordion{display:flex;justify-content:flex-start;align-items:stretch;flex-direction:column}.accordion__item{border-block-start:1px solid var(--clr-blue-800);padding-block-start:var(--paragraph-spacing-md);padding-block-end:var(--paragraph-spacing-md)}.accordion__item::details-content{block-size:0;overflow:clip;transition:block-size var(--duration-default, 200ms) var(--ease-default, ease-out),content-visibility var(--duration-default, 200ms) allow-discrete}.accordion__item[open]::details-content{block-size:auto}.accordion__item:last-child{border-block-end:1px solid var(--clr-blue-800)}.accordion__item:has(>.accordion__summary:focus-visible){position:relative;z-index:1}.accordion__summary{display:grid;grid-template-columns:1fr auto;gap:.625rem;align-items:center;color:var(--clr-blue-800);cursor:pointer;list-style:none;transition:color var(--duration-default, 200ms) var(--ease-default, ease-out),background-color var(--duration-default, 200ms) var(--ease-default, ease-out)}.accordion__summary::-webkit-details-marker,.accordion__summary::marker{display:none}.accordion__summary:hover,.accordion__summary:focus-visible{color:var(--clr-blue-800);background-color:var(--clr-grey-50)}.accordion__summary:focus-visible{outline:2px solid var(--color-focus, currentcolor);outline-offset:var(--focus-offset, 3px);border-radius:var(--radius-focus, 2px)}.accordion__question{margin:0;color:inherit}.accordion__icon{display:flex;justify-content:center;align-items:center;flex-direction:row;flex-shrink:0;inline-size:1.1875rem;block-size:1.1875rem}.accordion__icon-image{inline-size:1.1875rem;block-size:1.1875rem;max-inline-size:none}.accordion__icon-image--minus{display:none}.accordion__item[open] .accordion__icon-image--plus{display:none}.accordion__item[open] .accordion__icon-image--minus{display:block}.accordion__content{padding-block-start:var(--paragraph-spacing-md);color:var(--clr-blue-800)}.accordion__content :first-child{margin-block-start:0}.accordion__content :last-child{margin-block-end:0}@media(prefers-reduced-motion: reduce){.accordion__item,.accordion__item::details-content,.accordion__summary{transition:none}}.social-share{padding-block:3.125rem}.social-share__inner{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:1.25rem}.social-share__title{max-inline-size:22.4375rem;color:var(--clr-blue-800);text-align:center}.social-share__list{display:flex;justify-content:center;align-items:center;flex-direction:row;gap:2.5rem}.social-share__item{flex-shrink:0}.social-share__link{line-height:0}.social-share__link:focus-visible{outline:2px solid var(--color-focus, currentcolor);outline-offset:var(--focus-offset, 3px);border-radius:var(--radius-focus, 2px)}.social-share__link{transition:opacity var(--duration-default, 200ms) var(--ease-default, ease-out)}.social-share__link:hover{opacity:.85}@media(prefers-reduced-motion: reduce){.social-share__link{transition:none}}.share-widget{position:fixed;inset-inline-end:0;top:50%;z-index:var(--z-header);inline-size:4.875rem;overflow:hidden;transform:translateY(-50%)}.share-widget--open,.share-widget--closing{inline-size:var(--share-widget-open-width, 4.875rem)}.share-widget__bar{position:absolute;inset-inline-end:0;top:0;display:flex;justify-content:flex-start;align-items:stretch;flex-direction:row;inline-size:max-content;border-start-start-radius:.5rem;border-end-start-radius:.5rem;box-shadow:0 .5rem .5rem rgba(0,0,0,.1);background-color:var(--clr-white);transform:translateX(var(--share-widget-translate-closed, 0));transition:transform var(--duration-default, 200ms) var(--ease-default, ease-out)}@media(prefers-reduced-motion: reduce){.share-widget__bar{transition:none}}.share-widget--open .share-widget__bar{box-shadow:0 .5rem 1rem rgba(0,0,0,.1);transform:translateX(0)}.share-widget__panel{display:flex;justify-content:center;align-items:center;flex-direction:row;flex-shrink:0;padding-inline:1.25rem;background-color:var(--clr-white);pointer-events:none}.share-widget--open .share-widget__panel{pointer-events:auto}.share-widget__list{display:flex;justify-content:center;align-items:center;flex-direction:row;gap:2.5rem;padding:0;margin:0;list-style:none}.share-widget__item{flex-shrink:0}.share-widget__link{line-height:0}.share-widget__link:focus-visible{outline:2px solid var(--color-focus, currentcolor);outline-offset:var(--focus-offset, 3px);border-radius:var(--radius-focus, 2px)}.share-widget__link{transition:opacity var(--duration-default, 200ms) var(--ease-default, ease-out)}.share-widget__link:hover{opacity:.85}@media(prefers-reduced-motion: reduce){.share-widget__link{transition:none}}.share-widget__toggle{display:flex;justify-content:center;align-items:center;flex-direction:column;flex-shrink:0;gap:.625rem;padding:1.25rem;border:0;background-color:var(--clr-white);color:var(--clr-blue-800);cursor:pointer}.share-widget__toggle:focus-visible{outline:2px solid var(--color-focus, currentcolor);outline-offset:var(--focus-offset, 3px);border-radius:var(--radius-focus, 2px)}.share-widget--open .share-widget__toggle{background-color:var(--clr-blue-800);color:var(--clr-white)}.share-widget--open .share-widget__toggle-icon{filter:brightness(0) invert(1)}.share-widget__label{font-size:.75rem;line-height:1.3333333333}.image-text-teaser{padding-block:3.125rem}.image-text-teaser__inner{display:flex;justify-content:flex-start;align-items:flex-start;flex-direction:column;gap:1.375rem}@media(width > 768px){.image-text-teaser__inner{flex-direction:row;align-items:flex-start;gap:2.875rem}}@media(width > 768px){.image-text-teaser--image-right .image-text-teaser__inner{flex-direction:row-reverse}}.image-text-teaser__media{flex-shrink:0;inline-size:100%;max-inline-size:20.9375rem;margin-inline:auto;overflow:hidden;border-start-start-radius:.125rem;border-start-end-radius:.125rem;background-color:var(--clr-grey-400)}@media(width > 768px){.image-text-teaser__media{flex:1 1 0;min-inline-size:0;max-inline-size:none;margin-inline:0}}.image-text-teaser__media img{inline-size:100%;max-inline-size:100%;block-size:auto;object-fit:cover}.image-text-teaser__content{display:flex;justify-content:flex-start;align-items:flex-start;flex-direction:column;gap:1.125rem;inline-size:100%}@media(width > 768px){.image-text-teaser__content{flex:1 1 0;min-inline-size:0;gap:1.25rem}}.image-text-teaser__content :is(h1,h2,h3,h4,h5,h6,p){color:var(--clr-blue-800)}.teaser-fullscreen{padding-block:3.125rem;padding-inline:.625rem;background-color:var(--clr-grey-50)}@media(width > 768px){.teaser-fullscreen{padding-block:0;padding-inline:0;background-color:rgba(0,0,0,0)}}.teaser-fullscreen__slider-row{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:1.875rem}@media(width > 768px){.teaser-fullscreen__slider-row{gap:0}}.teaser-fullscreen__slider{display:flex;flex-direction:column;inline-size:100%}.teaser-fullscreen__slider .swiper-wrapper{order:1}.teaser-fullscreen__slider.swiper-fade .swiper-slide:not(.swiper-slide-active){pointer-events:none}.teaser-fullscreen__nav{order:2;position:static;display:flex;justify-content:center;gap:1.25rem;margin-block-start:1.875rem}@media(width > 768px){.teaser-fullscreen__nav{justify-content:flex-start;max-inline-size:32.0625rem;margin-block-start:2rem;padding-inline-start:calc(50% + 6.65625rem)}}.teaser-fullscreen__nav .swiper-button-prev,.teaser-fullscreen__nav .swiper-button-next{position:static;margin:0;inset:auto;transform:none;inline-size:2.5rem;block-size:2.5rem;background:rgba(0,0,0,0);border:0;padding:0}.teaser-fullscreen__nav .swiper-button-prev:focus-visible,.teaser-fullscreen__nav .swiper-button-next:focus-visible{outline:2px solid var(--clr-blue-800);outline-offset:2px}.teaser-fullscreen__nav .swiper-button-prev::after,.teaser-fullscreen__nav .swiper-button-next::after{content:"";display:block;inline-size:2.5rem;block-size:2.5rem;background-position:center;background-repeat:no-repeat;background-size:contain}.teaser-fullscreen__nav .swiper-button-prev::after{background-image:url("../img/_icn/how-to-arrow-left.svg")}.teaser-fullscreen__nav .swiper-button-next::after{background-image:url("../img/_icn/how-to-arrow-right.svg")}.teaser-fullscreen__slide{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:0;inline-size:100%;max-inline-size:22.1875rem}@media(width > 768px){.teaser-fullscreen__slide{flex-direction:row;align-items:flex-end;justify-content:center;gap:0;max-inline-size:90rem}}.teaser-fullscreen__media{inline-size:100%;margin-block-end:-1.875rem;overflow:hidden;background-color:var(--clr-grey-400);aspect-ratio:355/262}@media(width > 768px){.teaser-fullscreen__media{flex-shrink:0;inline-size:44.625rem;block-size:33.125rem;margin-block-end:0;margin-inline-end:-5.5rem;aspect-ratio:auto}}.teaser-fullscreen__media img{display:block;inline-size:100%;block-size:100%;object-fit:cover}.teaser-fullscreen__panel{position:relative;inline-size:20.9375rem;margin-inline:auto;padding-block:1.875rem 1.25rem;padding-inline:1.25rem;background-color:var(--clr-blue-500);z-index:1}@media(width > 768px){.teaser-fullscreen__panel{flex-shrink:0;inline-size:38.3125rem;margin-inline:0;padding-block:2.5rem 1.25rem}}.teaser-fullscreen__panel :is(h1,h2,h3,h4,h5,h6,p){color:var(--clr-white)}.teaser-fullscreen__content{display:flex;justify-content:flex-start;align-items:flex-start;flex-direction:column;gap:1.25rem}.teaser-fullscreen__tag{display:flex;justify-content:center;align-items:center;flex-direction:row;position:absolute;inset-block-start:-1.25rem;inset-inline-start:1.25rem;transform:rotate(-2deg)}.teaser-fullscreen__tag-brush{flex-shrink:0;display:block}.teaser-fullscreen__tag-label{background-color:var(--clr-light-blue-500);color:var(--clr-white);padding-block:.625rem;white-space:nowrap}.tipps{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:1.125rem;inline-size:100%;max-inline-size:20.9375rem;margin-inline:auto;padding-block:1.875rem;padding-inline:.625rem;background-color:var(--clr-blue-500);text-align:center}@media(width > 768px){.tipps{max-inline-size:25.625rem}}.tipps__header{display:grid;grid-template-columns:auto auto;gap:.625rem;align-items:center;align-self:center;max-inline-size:100%;padding-inline:1.5rem;text-align:start}.tipps__icon{line-height:0}.tipps :is(h1,h2,h3,h4,h5,h6,p){color:var(--clr-white)}.how-to{padding-block:3.125rem;background-color:var(--clr-grey-50)}@media(width > 768px){.how-to{padding-block:0;background-color:rgba(0,0,0,0)}}.how-to__inner{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:1.375rem}.how-to__title{text-align:center;color:var(--clr-blue-800)}.how-to__slider-row{position:relative;inline-size:100%}@media(width > 768px){.how-to__slider-row{padding-inline:5rem}}.how-to__slider{inline-size:100%}.how-to__slider .swiper-slide{display:flex;block-size:auto;align-self:stretch;justify-content:center}.how-to__slider .swiper-button-prev,.how-to__slider .swiper-button-next{display:none;margin:0;opacity:1;background:var(--clr-white);inline-size:5rem;block-size:5rem;border-radius:0;padding-inline:1.125rem;padding-block:1.25rem}@media(width > 768px){.how-to__slider .swiper-button-prev,.how-to__slider .swiper-button-next{display:flex;align-items:center;justify-content:center}}.how-to__slider .swiper-button-prev:focus-visible,.how-to__slider .swiper-button-next:focus-visible{outline:2px solid var(--clr-blue-800);outline-offset:2px}.how-to__slider .swiper-button-prev svg,.how-to__slider .swiper-button-next svg{display:none}.how-to__slider .swiper-button-prev::after,.how-to__slider .swiper-button-next::after{content:"";display:block;inline-size:2.5rem;block-size:2.5rem;background-position:center;background-repeat:no-repeat;background-size:contain}@media(width > 768px){.how-to__slider .swiper-button-prev{inset-inline-start:0;inset-block-start:50%;margin-inline-start:-5rem;transform:translateY(-50%)}}.how-to__slider .swiper-button-prev::after{background-image:url("../img/_icn/how-to-arrow-left.svg")}@media(width > 768px){.how-to__slider .swiper-button-next{inset-inline-end:0;inset-block-start:50%;margin-inline-end:-5rem;transform:translateY(-50%)}}.how-to__slider .swiper-button-next::after{background-image:url("../img/_icn/how-to-arrow-right.svg")}.how-to__slider .swiper-pagination{position:static;margin-block-start:1.375rem}.how-to__slider .swiper-pagination-bullet{inline-size:.625rem;block-size:.625rem;margin:0 .3125rem;opacity:1;background:rgba(0,0,0,0);border:1px solid var(--clr-blue-800)}.how-to__slider .swiper-pagination-bullet-active{inline-size:.9375rem;block-size:.9375rem;background:var(--clr-blue-800);border-color:var(--clr-blue-800)}.how-to__step{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:1.125rem;padding:.625rem;text-align:center;max-inline-size:20.1875rem}.how-to__visual{position:relative;inline-size:12.5rem;block-size:12.5rem;line-height:0}.how-to__brush{position:absolute;inset:0}.how-to__icon{position:absolute;inset-inline-start:50%;inset-block-start:50%;transform:translate(-50%, -50%)}.how-to__step :is(h1,h2,h3,h4,h5,h6,p){color:var(--clr-blue-800)}.how-to__step .body-lg{max-inline-size:18.9375rem}.recipe-slider{padding-block:3.125rem;background-color:var(--clr-grey-50)}@media(width > 768px){.recipe-slider{padding-block:3.75rem}}.recipe-slider__inner{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:1.125rem}.recipe-slider__intro{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:1.125rem;max-inline-size:20.9375rem;text-align:center}@media(width > 768px){.recipe-slider__intro{max-inline-size:56.25rem}}.recipe-slider__intro :is(h1,h2,h3,h4,h5,h6,p){color:var(--clr-blue-800)}.recipe-slider__tag{display:flex;justify-content:center;align-items:center;flex-direction:row;flex-shrink:0;transform:rotate(-2deg)}.recipe-slider__tag-brush{flex-shrink:0;display:block}.recipe-slider__tag-label{background-color:var(--clr-light-blue-500);color:var(--clr-white);padding-block:.625rem;white-space:nowrap}.recipe-slider__intro .body-lg{max-inline-size:20.9375rem}@media(width > 768px){.recipe-slider__intro .body-lg{max-inline-size:39.375rem}}.recipe-slider__slider-row{position:relative;inline-size:100%}@media(width > 768px){.recipe-slider__slider-row{padding-inline:5rem}}.recipe-slider__slider{inline-size:100%}.recipe-slider__slider .swiper-slide{display:flex;block-size:auto;align-self:stretch;justify-content:center}.recipe-slider__slider .swiper-button-prev,.recipe-slider__slider .swiper-button-next{display:none;margin:0;opacity:1;background:var(--clr-white);inline-size:5rem;block-size:5rem;border-radius:0;padding-inline:1.125rem;padding-block:1.25rem}@media(width > 768px){.recipe-slider__slider .swiper-button-prev,.recipe-slider__slider .swiper-button-next{display:flex;align-items:center;justify-content:center}}.recipe-slider__slider .swiper-button-prev:focus-visible,.recipe-slider__slider .swiper-button-next:focus-visible{outline:2px solid var(--clr-blue-800);outline-offset:2px}.recipe-slider__slider .swiper-button-prev svg,.recipe-slider__slider .swiper-button-next svg{display:none}.recipe-slider__slider .swiper-button-prev::after,.recipe-slider__slider .swiper-button-next::after{content:"";display:block;inline-size:2.5rem;block-size:2.5rem;background-position:center;background-repeat:no-repeat;background-size:contain}@media(width > 768px){.recipe-slider__slider .swiper-button-prev{inset-inline-start:0;inset-block-start:50%;margin-inline-start:-5rem;transform:translateY(-50%)}}.recipe-slider__slider .swiper-button-prev::after{background-image:url("../img/_icn/how-to-arrow-left.svg")}@media(width > 768px){.recipe-slider__slider .swiper-button-next{inset-inline-end:0;inset-block-start:50%;margin-inline-end:-5rem;transform:translateY(-50%)}}.recipe-slider__slider .swiper-button-next::after{background-image:url("../img/_icn/how-to-arrow-right.svg")}.recipe-slider__slider .swiper-pagination{position:static;margin-block-start:1.125rem}.recipe-slider__slider .swiper-pagination-bullet{inline-size:.625rem;block-size:.625rem;margin:0 .3125rem;opacity:1;background:rgba(0,0,0,0);border:1px solid var(--clr-blue-800)}.recipe-slider__slider .swiper-pagination-bullet-active{inline-size:.9375rem;block-size:.9375rem;background:var(--clr-blue-800);border-color:var(--clr-blue-800)}.recipe-slider__card{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:1.25rem;inline-size:100%;padding-block-end:1.5625rem;background-color:var(--clr-white)}.recipe-slider__media{position:relative;inline-size:100%;line-height:0}.recipe-slider__media-img{display:block;inline-size:100%;block-size:auto;object-fit:cover;aspect-ratio:294/193}.recipe-slider__badge{position:absolute;inset-block-start:-0.625rem;inset-inline-start:.625rem;line-height:0}.recipe-slider__card :is(h1,h2,h3,h4,h5,h6){color:var(--clr-blue-800);text-align:center}.recipe-slider__meta{display:flex;justify-content:center;align-items:center;flex-direction:row;justify-content:space-between;gap:.3125rem;inline-size:100%;margin:0;padding:0;list-style:none}.recipe-slider__meta-item{display:flex;justify-content:center;align-items:center;flex-direction:row;gap:.3125rem;color:var(--clr-blue-800)}.recipe-slider__meta-icon{flex-shrink:0;display:block}.news-teasers{padding-block:3.125rem;background-color:var(--clr-grey-50)}@media(width > 768px){.news-teasers{padding-block:0;background-color:rgba(0,0,0,0)}}.news-teasers__layout{display:flex;justify-content:flex-start;align-items:stretch;flex-direction:column;gap:1.875rem}@media(width > 768px){.news-teasers__layout{flex-direction:row;align-items:flex-start;gap:2rem}}.news-teasers__intro{display:flex;justify-content:flex-start;align-items:flex-start;flex-direction:column;gap:1.5rem;padding-inline:1.25rem}@media(width > 768px){.news-teasers__intro{flex:0 0 27.5rem;max-inline-size:27.5rem;padding-inline:0}}.news-teasers__intro :is(h1,h2,h3,h4,h5,h6,p){color:var(--clr-blue-800)}.news-teasers__meta{display:flex;justify-content:flex-start;align-items:center;flex-direction:row;justify-content:space-between;inline-size:100%;gap:.625rem}.news-teasers__tag{display:flex;justify-content:center;align-items:center;flex-direction:row;flex-shrink:0;transform:rotate(-2deg)}.news-teasers__tag-brush{flex-shrink:0;display:block}.news-teasers__tag-label{background-color:var(--clr-light-blue-500);color:var(--clr-white);padding-block:.625rem;white-space:nowrap}.news-teasers__filter{display:flex;justify-content:center;align-items:center;flex-direction:row;gap:.625rem;flex-shrink:0}.news-teasers__filter-select{appearance:none;margin:0;padding-block:.875rem;padding-inline:0;border:0;border-radius:7rem;background-color:rgba(0,0,0,0);font-family:var(--font-family-heading);font-size:var(--font-size-body-cta);font-weight:var(--font-weight-regular);line-height:var(--line-height-body-cta);letter-spacing:var(--letter-spacing-0);color:var(--clr-blue-800);text-decoration:underline;text-underline-offset:.15em;cursor:pointer}.news-teasers__filter-select:focus-visible{outline:2px solid var(--clr-blue-800);outline-offset:2px}.news-teasers__filter-icon{flex-shrink:0;transform:rotate(90deg)}.news-teasers__slider-col{inline-size:100%;min-inline-size:0}.news-teasers__slider-row{position:relative;inline-size:100%}.news-teasers__slide-pool{display:none}.news-teasers__slider{inline-size:100%}.news-teasers__slider .swiper-slide{display:flex;block-size:auto;align-self:stretch;justify-content:flex-start}.news-teasers__slider .swiper-pagination{position:static;margin-block-start:1.875rem}.news-teasers__slider .swiper-pagination-bullet{inline-size:.625rem;block-size:.625rem;margin:0 .3125rem;opacity:1;background:rgba(0,0,0,0);border:1px solid var(--clr-blue-800)}.news-teasers__slider .swiper-pagination-bullet-active{inline-size:.9375rem;block-size:.9375rem;background:var(--clr-blue-800);border-color:var(--clr-blue-800)}.news-teasers__card{display:flex;flex-direction:column;inline-size:100%;max-inline-size:20.9375rem;box-shadow:0 .5rem .5rem rgba(0,0,0,.1)}@media(width > 768px){.news-teasers__card{max-inline-size:38.125rem}}.news-teasers__media{position:relative;z-index:2;overflow:hidden;background-color:var(--clr-grey-400);aspect-ratio:335/200}@media(width > 768px){.news-teasers__media{aspect-ratio:auto;block-size:22.0625rem}}.news-teasers__media img{inline-size:100%;max-inline-size:100%;block-size:100%;object-fit:cover}.news-teasers__body{position:relative;z-index:1;background-color:var(--clr-white);display:flex;justify-content:flex-start;align-items:flex-start;flex-direction:column;gap:1.125rem;padding-block:1.875rem 1.25rem;padding-inline:1.25rem}@media(width > 768px){.news-teasers__body{gap:1.125rem;padding-block:1.875rem 1.25rem;padding-inline:1.875rem}}.news-teasers__body :is(h1,h2,h3,h4,h5,h6){color:var(--clr-blue-800)}.news-teasers__card-tag{display:flex;justify-content:center;align-items:center;flex-direction:row;position:absolute;inset-block-start:0;inset-inline-start:1.25rem;transform:translateY(-50%) rotate(-2deg);z-index:3}.ingredient-calculator-section{padding-block:3.125rem}.ingredient-calculator{inline-size:100%;max-inline-size:25.625rem;margin-inline:auto;filter:drop-shadow(0 0.25rem 0.125rem rgba(0, 0, 0, 0.25))}.ingredient-calculator__header{display:grid;grid-template-columns:auto auto;gap:1.25rem;align-items:center;justify-content:center;padding-block:.875rem;padding-inline-end:1.25rem;background-color:var(--clr-blue-500)}.ingredient-calculator__header-icon{line-height:0}.ingredient-calculator__header-title{color:var(--clr-white)}.ingredient-calculator__body{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:2.5rem;padding-block:1.25rem 1.875rem;padding-inline:1.5625rem;background-color:var(--clr-white);box-shadow:var(--shadow-sm)}.ingredient-calculator__portions{display:flex;justify-content:center;align-items:center;flex-direction:row;gap:1.25rem}.ingredient-calculator__stepper{display:flex;justify-content:center;align-items:center;flex-direction:row;gap:1.375rem;padding-block:.25rem;padding-inline:.3125rem;border:2px solid var(--clr-blue-500)}.ingredient-calculator__stepper-btn{display:flex;justify-content:center;align-items:center;flex-direction:row;flex-shrink:0;padding:0;border:0;background:rgba(0,0,0,0);line-height:0;cursor:pointer}.ingredient-calculator__stepper-btn:focus-visible{outline:2px solid var(--clr-blue-800);outline-offset:2px}.ingredient-calculator__stepper-btn:disabled{cursor:not-allowed;opacity:.4}.ingredient-calculator__portions-value{min-inline-size:.875rem;text-align:center;color:var(--clr-blue-800)}.ingredient-calculator__portions-label{color:var(--clr-blue-800)}.ingredient-calculator__list{display:flex;justify-content:flex-start;align-items:flex-start;flex-direction:column;gap:.625rem;inline-size:100%;margin:0;padding:0;list-style:none}.ingredient-calculator__item{color:var(--clr-blue-800)}.ingredient-calculator__item--highlight{display:flex;justify-content:space-between;align-items:center;flex-direction:row;gap:1.25rem;padding-inline-end:.625rem}.ingredient-calculator__item-label{flex:1 1 auto;min-inline-size:0}.ingredient-calculator__item-icon{flex-shrink:0;line-height:0}.teaser-grid{padding-block:3.125rem}.teaser-grid__intro{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:1.25rem;margin-block-end:1.25rem;text-align:center}.teaser-grid__intro :is(h1,h2,h3,h4,h5,h6,p){color:var(--clr-blue-800)}.teaser-grid__grid{display:grid;gap:1.25rem;grid-template-columns:minmax(0, 1fr)}@media(width > 1024px){.teaser-grid__grid{grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);align-items:start}}@media(width > 1024px){.teaser-grid__item--featured{grid-column:1}}.teaser-grid__aside{display:flex;justify-content:flex-start;align-items:stretch;flex-direction:column;gap:1.25rem}@media(width > 1024px){.teaser-grid__aside{grid-column:2;gap:.875rem}}.teaser-grid__card{display:grid;overflow:hidden;text-decoration:none;color:inherit;box-shadow:0 .5rem .5rem rgba(0,0,0,.1)}.teaser-grid__card:focus-visible{outline:2px solid var(--clr-blue-800);outline-offset:2px}.teaser-grid__item--featured .teaser-grid__card{grid-template-columns:minmax(0, 1fr);grid-template-rows:auto auto}.teaser-grid__item:not(.teaser-grid__item--featured) .teaser-grid__card{grid-template-columns:minmax(0, 1fr) 13.5rem;grid-template-rows:minmax(0, 1fr);block-size:7.75rem}@media(width > 1024px){.teaser-grid__item:not(.teaser-grid__item--featured) .teaser-grid__card{grid-template-columns:14.25rem minmax(0, 1fr);block-size:11.875rem}}.teaser-grid__media{overflow:hidden;background-color:var(--clr-grey-400);min-inline-size:0;min-block-size:0}.teaser-grid__media img{display:block;inline-size:100%;block-size:100%;object-fit:cover}.teaser-grid__item--featured .teaser-grid__media{grid-row:1;aspect-ratio:335/260}@media(width > 1024px){.teaser-grid__item--featured .teaser-grid__media{aspect-ratio:auto;block-size:37.375rem}}.teaser-grid__item:not(.teaser-grid__item--featured) .teaser-grid__media{grid-column:1;grid-row:1}.teaser-grid__item:not(.teaser-grid__item--featured) .teaser-grid__body{grid-column:2;grid-row:1}.teaser-grid__body{position:relative;background-color:var(--clr-white);display:flex;justify-content:flex-start;align-items:flex-start;flex-direction:column;justify-content:center;min-inline-size:0;min-block-size:0}.teaser-grid__body :is(h1,h2,h3,h4,h5,h6){color:var(--clr-blue-800)}.teaser-grid__item--featured .teaser-grid__body{grid-row:2}.teaser-grid__item--featured .teaser-grid__body{gap:.8125rem;padding-block:1.875rem 1.25rem;padding-inline:1.25rem}@media(width > 1024px){.teaser-grid__item--featured .teaser-grid__body{gap:1.25rem;margin-block-start:-3.875rem;margin-inline:auto;max-inline-size:35.625rem;padding-block:1.875rem;padding-inline:1.25rem 1.875rem;z-index:1}}.teaser-grid__item:not(.teaser-grid__item--featured) .teaser-grid__body{gap:.875rem;padding-block:.625rem;padding-inline:.875rem}@media(width > 1024px){.teaser-grid__item:not(.teaser-grid__item--featured) .teaser-grid__body{gap:1.25rem;padding-inline:1.25rem}}.teaser-grid__tag{display:flex;justify-content:center;align-items:center;flex-direction:row;flex-shrink:0;transform:rotate(-2deg)}.teaser-grid__item--featured .teaser-grid__tag{position:absolute;inset-block-start:-1.875rem;inset-inline-start:1.25rem}.teaser-grid__tag-brush{flex-shrink:0;display:block}.teaser-grid__tag-label{background-color:var(--clr-light-blue-500);color:var(--clr-white);padding-block:.625rem;white-space:nowrap}
|
|
1
|
+
:root{--clr-black: #000000;--clr-white: #ffffff;--clr-white-alpha-0: rgb(255 255 255 / 0);--clr-white-alpha-50: rgb(255 255 255 / 0.05);--clr-white-alpha-100: rgb(255 255 255 / 0.1);--clr-white-alpha-200: rgb(255 255 255 / 0.2);--clr-white-alpha-300: rgb(255 255 255 / 0.3);--clr-white-alpha-400: rgb(255 255 255 / 0.4);--clr-white-alpha-500: rgb(255 255 255 / 0.5);--clr-white-alpha-600: rgb(255 255 255 / 0.6);--clr-white-alpha-700: rgb(255 255 255 / 0.7);--clr-white-alpha-800: rgb(255 255 255 / 0.8);--clr-white-alpha-900: rgb(255 255 255 / 0.9);--clr-grey-50: #f6f6f6;--clr-grey-100: #f1f1f1;--clr-grey-200: #e3e3e3;--clr-grey-300: #d4d4d4;--clr-grey-400: #c6c6c6;--clr-grey-500: #b8b8b8;--clr-grey-600: #939393;--clr-grey-700: #6e6e6e;--clr-grey-800: #4a4a4a;--clr-grey-900: #252525;--clr-red-50: #ffe6e6;--clr-red-100: #ffcccc;--clr-red-200: #ff9999;--clr-red-300: #ff6666;--clr-red-400: #ff3333;--clr-red-500: #ff0000;--clr-red-600: #cc0000;--clr-red-700: #990000;--clr-red-800: #660000;--clr-red-900: #330000;--clr-green-50: #e6ffe6;--clr-green-100: #ccffcc;--clr-green-200: #99ff99;--clr-green-300: #66ff66;--clr-green-400: #33ff33;--clr-green-500: #00ff00;--clr-green-600: #00cc00;--clr-green-700: #009900;--clr-green-800: #006600;--clr-green-900: #003300;--clr-blue-50: #ebf7ff;--clr-blue-100: #85ceff;--clr-blue-200: #47b6ff;--clr-blue-300: #1fa5ff;--clr-blue-400: #0087e0;--clr-blue-500: #006eb7;--clr-blue-600: #00568f;--clr-blue-700: #003d66;--clr-blue-800: #0e204b;--clr-blue-900: #001629;--clr-light-blue-50: #eef6fc;--clr-light-blue-100: #dcedf9;--clr-light-blue-200: #b9dcf3;--clr-light-blue-300: #a8d3f0;--clr-light-blue-400: #86c2ea;--clr-light-blue-500: #65b2e4;--clr-light-blue-600: #52a7e0;--clr-light-blue-700: #2f96da;--clr-light-blue-800: #2280bf;--clr-light-blue-900: #185d8b;--clr-vegan-green-50: #e5f1ea;--clr-vegan-green-100: #cce3d6;--clr-vegan-green-200: #99c8ac;--clr-vegan-green-300: #66ac83;--clr-vegan-green-400: #339159;--clr-vegan-green-500: #007530;--clr-vegan-green-600: #005e26;--clr-vegan-green-700: #00461d;--clr-vegan-green-800: #002f13;--clr-vegan-green-900: #00170a;--clr-vegan-turquoise: #68baa7;--clr-vegan-pink: #d93784;--clr-vegan-purple: #5f3d8a;--clr-vegan-orange: #df5426;--clr-vegan-red: #dc3756;--clr-vegan-lila: #ad217a;--font-family-heading: 'Barlow Condensed', 'Arial Narrow', sans-serif;--font-family-heading-bold: 'Barlow Condensed Bold', 'Barlow Condensed', 'Arial Narrow', sans-serif;--font-family-body: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;--font-family-body-highlight: 'Source Sans 3 Bold', 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;--font-weight-regular: 400;--font-weight-bold: 700;--letter-spacing-0: 0;--font-family-h2: var(--font-family-heading);--font-size-h1: clamp(3.125rem, 3.75vw + 1.625rem, 5rem);--line-height-h1: 1.2;--font-size-h2: clamp(2.813rem, 2.5vw + 1.813rem, 4.063rem);--line-height-h2: 1.2;--font-size-h3: clamp(2.188rem, 1.25vw + 1.688rem, 2.813rem);--line-height-h3: 1.2;--font-size-h4: clamp(1.5rem, 1vw + 1.1rem, 2rem);--line-height-h4: 1.1666666667;--font-size-h5: 1.125rem;--line-height-h5: 1.2222222222;--font-size-body-lg: 1.125rem;--line-height-body-lg: 1.3888888889;--paragraph-spacing-lg: 1.375rem;--font-size-body-md: 1rem;--line-height-body-md: 1.375;--paragraph-spacing-md: 1.25rem;--font-size-body-sm: 0.875rem;--line-height-body-sm: 1.4285714286;--paragraph-spacing-sm: 1.125rem;--font-size-body-cta: 1rem;--line-height-body-cta: 1.375;--font-size-body-tag: 1rem;--line-height-body-tag: 1;--radius-pill: 2.5rem;--shadow-sm: 0 0.25rem 0.5rem rgb(0 0 0 / 0.1);--container-max-width: 90rem;--container-padding-inline: 1.5rem;--grid-gutter: 1rem;--grid-columns: 12;--z-header: 100;--z-skip-link: 200}@media(width > 768px){:root{--font-family-h2: var(--font-family-heading-bold);--line-height-h4: 1.1875}}@font-face{font-family:"Barlow Condensed";src:url("./fonts/barlow-condensed-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:"Barlow Condensed Bold";src:url("./fonts/barlow-condensed-700.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:"Source Sans 3";src:url("./fonts/source-sans-3-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:"Source Sans 3 Bold";src:url("./fonts/source-sans-3-700.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}*,*::before,*::after{box-sizing:border-box}*{margin:0}img,picture,video,canvas,svg{display:block;max-inline-size:100%}input,button,textarea,select,optgroup{font:inherit;color:inherit}textarea{resize:vertical;resize:block}:where(ul,ol)[role=list]{list-style:none;padding:0}:focus-visible{outline:2px solid currentcolor;outline-offset:2px}:focus:not(:focus-visible){outline:none}[hidden]{display:none !important}@media(prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;text-wrap:balance}p{overflow-wrap:break-word;text-wrap:pretty}.h1{font-family:var(--font-family-heading);font-size:var(--font-size-h1);font-weight:var(--font-weight-regular);line-height:var(--line-height-h1);letter-spacing:var(--letter-spacing-0);text-transform:uppercase}.h2{font-family:var(--font-family-h2);font-size:var(--font-size-h2);font-weight:var(--font-weight-regular);line-height:var(--line-height-h2);letter-spacing:var(--letter-spacing-0);text-transform:uppercase}.h3{font-family:var(--font-family-heading);font-size:var(--font-size-h3);font-weight:var(--font-weight-regular);line-height:var(--line-height-h3);letter-spacing:var(--letter-spacing-0);text-transform:uppercase}.h4{font-family:var(--font-family-heading);font-size:var(--font-size-h4);font-weight:var(--font-weight-regular);line-height:var(--line-height-h4);letter-spacing:var(--letter-spacing-0);text-transform:uppercase}.h5{font-family:var(--font-family-heading);font-size:var(--font-size-h5);font-weight:var(--font-weight-regular);line-height:var(--line-height-h5);letter-spacing:var(--letter-spacing-0);text-transform:uppercase}.body-lg{font-family:var(--font-family-body);font-size:var(--font-size-body-lg);font-weight:var(--font-weight-regular);line-height:var(--line-height-body-lg);letter-spacing:var(--letter-spacing-0)}.body-lg-highlight{font-family:var(--font-family-body-highlight);font-size:var(--font-size-body-lg);font-weight:var(--font-weight-bold);line-height:var(--line-height-body-lg);letter-spacing:var(--letter-spacing-0)}.body-lg-textlink{font-family:var(--font-family-body);font-size:var(--font-size-body-lg);font-weight:var(--font-weight-regular);line-height:var(--line-height-body-lg);letter-spacing:var(--letter-spacing-0);text-decoration:underline}.body-md{font-family:var(--font-family-body);font-size:var(--font-size-body-md);font-weight:var(--font-weight-regular);line-height:var(--line-height-body-md);letter-spacing:var(--letter-spacing-0)}.body-md-highlight{font-family:var(--font-family-body-highlight);font-size:var(--font-size-body-md);font-weight:var(--font-weight-bold);line-height:var(--line-height-body-md);letter-spacing:var(--letter-spacing-0)}.body-md-textlink{font-family:var(--font-family-body);font-size:var(--font-size-body-md);font-weight:var(--font-weight-regular);line-height:var(--line-height-body-md);letter-spacing:var(--letter-spacing-0);text-decoration:underline}.body-sm{font-family:var(--font-family-body);font-size:var(--font-size-body-sm);font-weight:var(--font-weight-regular);line-height:var(--line-height-body-sm);letter-spacing:var(--letter-spacing-0)}.body-sm-highlight{font-family:var(--font-family-body-highlight);font-size:var(--font-size-body-sm);font-weight:var(--font-weight-bold);line-height:var(--line-height-body-sm);letter-spacing:var(--letter-spacing-0)}.body-sm-textlink{font-family:var(--font-family-body);font-size:var(--font-size-body-sm);font-weight:var(--font-weight-regular);line-height:var(--line-height-body-sm);letter-spacing:var(--letter-spacing-0);text-decoration:underline}.body-cta-text{font-family:var(--font-family-heading);font-size:var(--font-size-body-cta);font-weight:var(--font-weight-regular);line-height:var(--line-height-body-cta);letter-spacing:var(--letter-spacing-0);text-transform:uppercase}.body-cta-textlink{font-family:var(--font-family-heading);font-size:var(--font-size-body-cta);font-weight:var(--font-weight-regular);line-height:var(--line-height-body-cta);letter-spacing:var(--letter-spacing-0);text-transform:uppercase;text-decoration:underline}.body-tag-text{font-family:var(--font-family-heading);font-size:var(--font-size-body-tag);font-weight:var(--font-weight-regular);line-height:var(--line-height-body-tag);letter-spacing:var(--letter-spacing-0);text-transform:uppercase}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.skip-link{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.skip-link:focus-visible{position:fixed;inset-block-start:0;inset-inline-start:0;z-index:var(--z-skip-link);inline-size:auto;block-size:auto;margin:0;padding-block:1rem;padding-inline:1.5rem;overflow:visible;clip-path:none;white-space:nowrap;background-color:var(--clr-blue-800);color:var(--clr-white);text-decoration:none;box-shadow:var(--shadow-sm)}html{-webkit-text-size-adjust:100%;tab-size:4;hanging-punctuation:first last}body{min-height:100dvh;font-family:var(--font-family-body);font-size:var(--font-size-body-md);font-weight:var(--font-weight-regular);line-height:var(--line-height-body-md);-webkit-font-smoothing:antialiased}ul{list-style-type:none;margin:0;padding:0}button{border:none;background-color:rgba(0,0,0,0);padding:0;appearance:none;cursor:pointer}.container{inline-size:100%;max-inline-size:var(--container-max-width);margin-inline:auto;padding-inline:var(--container-padding-inline)}.button{display:flex;justify-content:center;align-items:flex-end;flex-direction:row;gap:.625rem;min-inline-size:2.5rem;min-block-size:2.875rem;padding-block:.625rem;padding-inline:1.25rem;border:none;cursor:pointer;text-decoration:none;color:var(--clr-blue-800);transition:background-color var(--duration-default, 200ms) var(--ease-default, ease-out),color var(--duration-default, 200ms) var(--ease-default, ease-out),border-color var(--duration-default, 200ms) var(--ease-default, ease-out),box-shadow var(--duration-default, 200ms) var(--ease-default, ease-out),opacity var(--duration-default, 200ms) var(--ease-default, ease-out)}.button:disabled,.button[aria-disabled=true]{cursor:not-allowed}@media(prefers-reduced-motion: reduce){.button{transition:none}}.button--outline{background-color:var(--clr-white-alpha-0);border:3px solid var(--clr-blue-800);border-radius:var(--radius-pill);color:var(--clr-blue-800)}.button--outline:hover:not(:disabled,[aria-disabled=true]){border-color:var(--clr-blue-500);color:var(--clr-blue-500);box-shadow:var(--shadow-sm)}.button--outline:active:not(:disabled,[aria-disabled=true]){background-color:var(--clr-blue-100);border-color:var(--clr-blue-800);color:var(--clr-blue-800);box-shadow:none}.button--outline:focus-visible{outline:none;background-color:var(--clr-white-alpha-0);border-color:var(--clr-blue-100);color:var(--clr-blue-800);box-shadow:none}.button--outline:disabled,.button--outline[aria-disabled=true]{background-color:var(--clr-blue-50);border-color:var(--clr-light-blue-200);color:var(--clr-light-blue-200);box-shadow:none}.button--link{background-color:rgba(0,0,0,0);border-radius:0;color:var(--clr-blue-800)}.button--link:hover:not(:disabled,[aria-disabled=true]){color:var(--clr-blue-500)}.button--link:active:not(:disabled,[aria-disabled=true]){color:var(--clr-light-blue-500)}.button--link:focus-visible{outline:none;color:var(--clr-blue-800)}.button--link:disabled,.button--link[aria-disabled=true]{color:var(--clr-light-blue-100)}.button--inverted.button--outline{background-color:var(--clr-white-alpha-0);border-color:var(--clr-white);color:var(--clr-white)}.button--inverted.button--outline:hover:not(:disabled,[aria-disabled=true]){background-color:var(--clr-light-blue-300);border-color:var(--clr-white);color:var(--clr-white);box-shadow:none}.button--inverted.button--outline:active:not(:disabled,[aria-disabled=true]){background-color:var(--clr-blue-100);border-color:var(--clr-white);color:var(--clr-white);box-shadow:none}.button--inverted.button--outline:focus-visible{background-color:var(--clr-white-alpha-0);border-color:var(--clr-blue-100);color:var(--clr-white);box-shadow:none}.button--inverted.button--outline:disabled,.button--inverted.button--outline[aria-disabled=true]{background-color:var(--clr-white-alpha-50);border-color:var(--clr-white-alpha-200);color:var(--clr-white-alpha-200);box-shadow:none}.button--inverted.button--link{color:var(--clr-white)}.button--inverted.button--link:hover:not(:disabled,[aria-disabled=true]){color:var(--clr-light-blue-300)}.button--inverted.button--link:active:not(:disabled,[aria-disabled=true]){color:var(--clr-blue-100)}.button--inverted.button--link:focus-visible{color:var(--clr-white)}.button--inverted.button--link:disabled,.button--inverted.button--link[aria-disabled=true]{color:var(--clr-white-alpha-200)}.button__icon{flex-shrink:0;inline-size:1.625rem;block-size:1.625rem;background-color:currentColor;mask-image:url("./img/_icn/chevron-right.svg");mask-repeat:no-repeat;mask-position:center;mask-size:.625rem .625rem;-webkit-mask-image:url("./img/_icn/chevron-right.svg");-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:.625rem .625rem}@supports(interpolate-size: allow-keywords){:root{interpolate-size:allow-keywords}.accordion__item[open]::details-content{block-size:auto}}.product-accordion{padding-block:3.125rem;background-color:var(--clr-grey-50)}.accordion{display:flex;justify-content:flex-start;align-items:stretch;flex-direction:column}.accordion__item{border-block-start:1px solid var(--clr-blue-800);padding-block-start:var(--paragraph-spacing-md);padding-block-end:var(--paragraph-spacing-md)}.accordion__item::details-content{block-size:0;overflow:clip;transition:block-size var(--duration-default, 200ms) var(--ease-default, ease-out),content-visibility var(--duration-default, 200ms) allow-discrete}.accordion__item[open]::details-content{block-size:auto}.accordion__item:last-child{border-block-end:1px solid var(--clr-blue-800)}.accordion__item:has(>.accordion__summary:focus-visible){position:relative;z-index:1}.accordion__summary{display:grid;grid-template-columns:1fr auto;gap:.625rem;align-items:center;color:var(--clr-blue-800);cursor:pointer;list-style:none;transition:color var(--duration-default, 200ms) var(--ease-default, ease-out),background-color var(--duration-default, 200ms) var(--ease-default, ease-out)}.accordion__summary::-webkit-details-marker,.accordion__summary::marker{display:none}.accordion__summary:hover,.accordion__summary:focus-visible{color:var(--clr-blue-800);background-color:var(--clr-grey-50)}.accordion__summary:focus-visible{outline:2px solid var(--color-focus, currentcolor);outline-offset:var(--focus-offset, 3px);border-radius:var(--radius-focus, 2px)}.accordion__question{margin:0;color:inherit}.accordion__icon{display:flex;justify-content:center;align-items:center;flex-direction:row;flex-shrink:0;inline-size:1.1875rem;block-size:1.1875rem}.accordion__icon-image{inline-size:1.1875rem;block-size:1.1875rem;max-inline-size:none}.accordion__icon-image--minus{display:none}.accordion__item[open] .accordion__icon-image--plus{display:none}.accordion__item[open] .accordion__icon-image--minus{display:block}.accordion__content{padding-block-start:var(--paragraph-spacing-md);color:var(--clr-blue-800)}.accordion__content :first-child{margin-block-start:0}.accordion__content :last-child{margin-block-end:0}@media(prefers-reduced-motion: reduce){.accordion__item,.accordion__item::details-content,.accordion__summary{transition:none}}.social-share{padding-block:3.125rem}.social-share__inner{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:1.25rem}.social-share__title{max-inline-size:22.4375rem;color:var(--clr-blue-800);text-align:center}.social-share__list{display:flex;justify-content:center;align-items:center;flex-direction:row;gap:2.5rem}.social-share__item{flex-shrink:0}.social-share__link{line-height:0}.social-share__link:focus-visible{outline:2px solid var(--color-focus, currentcolor);outline-offset:var(--focus-offset, 3px);border-radius:var(--radius-focus, 2px)}.social-share__link{transition:opacity var(--duration-default, 200ms) var(--ease-default, ease-out)}.social-share__link:hover{opacity:.85}@media(prefers-reduced-motion: reduce){.social-share__link{transition:none}}.share-widget{position:fixed;inset-inline-end:0;top:50%;z-index:var(--z-header);inline-size:4.875rem;overflow:hidden;transform:translateY(-50%)}.share-widget--open,.share-widget--closing{inline-size:var(--share-widget-open-width, 4.875rem)}.share-widget__bar{position:absolute;inset-inline-end:0;top:0;display:flex;justify-content:flex-start;align-items:stretch;flex-direction:row;inline-size:max-content;border-start-start-radius:.5rem;border-end-start-radius:.5rem;box-shadow:0 .5rem .5rem rgba(0,0,0,.1);background-color:var(--clr-white);transform:translateX(var(--share-widget-translate-closed, 0));transition:transform var(--duration-default, 200ms) var(--ease-default, ease-out)}@media(prefers-reduced-motion: reduce){.share-widget__bar{transition:none}}.share-widget--open .share-widget__bar{box-shadow:0 .5rem 1rem rgba(0,0,0,.1);transform:translateX(0)}.share-widget__panel{display:flex;justify-content:center;align-items:center;flex-direction:row;flex-shrink:0;padding-inline:1.25rem;background-color:var(--clr-white);pointer-events:none}.share-widget--open .share-widget__panel{pointer-events:auto}.share-widget__list{display:flex;justify-content:center;align-items:center;flex-direction:row;gap:2.5rem;padding:0;margin:0;list-style:none}.share-widget__item{flex-shrink:0}.share-widget__link{line-height:0}.share-widget__link:focus-visible{outline:2px solid var(--color-focus, currentcolor);outline-offset:var(--focus-offset, 3px);border-radius:var(--radius-focus, 2px)}.share-widget__link{transition:opacity var(--duration-default, 200ms) var(--ease-default, ease-out)}.share-widget__link:hover{opacity:.85}@media(prefers-reduced-motion: reduce){.share-widget__link{transition:none}}.share-widget__toggle{display:flex;justify-content:center;align-items:center;flex-direction:column;flex-shrink:0;gap:.625rem;padding:1.25rem;border:0;background-color:var(--clr-white);color:var(--clr-blue-800);cursor:pointer}.share-widget__toggle:focus-visible{outline:2px solid var(--color-focus, currentcolor);outline-offset:var(--focus-offset, 3px);border-radius:var(--radius-focus, 2px)}.share-widget--open .share-widget__toggle{background-color:var(--clr-blue-800);color:var(--clr-white)}.share-widget--open .share-widget__toggle-icon{filter:brightness(0) invert(1)}.share-widget__label{font-size:.75rem;line-height:1.3333333333}.image-text-teaser{padding-block:3.125rem}.image-text-teaser__inner{display:flex;justify-content:flex-start;align-items:flex-start;flex-direction:column;gap:1.375rem}@media(width > 768px){.image-text-teaser__inner{flex-direction:row;align-items:flex-start;gap:2.875rem}}@media(width > 768px){.image-text-teaser--image-right .image-text-teaser__inner{flex-direction:row-reverse}}.image-text-teaser__media{flex-shrink:0;inline-size:100%;max-inline-size:20.9375rem;margin-inline:auto;overflow:hidden;border-start-start-radius:.125rem;border-start-end-radius:.125rem;background-color:var(--clr-grey-400)}@media(width > 768px){.image-text-teaser__media{flex:1 1 0;min-inline-size:0;max-inline-size:none;margin-inline:0}}.image-text-teaser__media img{inline-size:100%;max-inline-size:100%;block-size:auto;object-fit:cover}.image-text-teaser__content{display:flex;justify-content:flex-start;align-items:flex-start;flex-direction:column;gap:1.125rem;inline-size:100%}@media(width > 768px){.image-text-teaser__content{flex:1 1 0;min-inline-size:0;gap:1.25rem}}.image-text-teaser__content :is(h1,h2,h3,h4,h5,h6,p){color:var(--clr-blue-800)}.teaser-fullscreen{padding-block:3.125rem;padding-inline:.625rem;background-color:var(--clr-grey-50)}@media(width > 768px){.teaser-fullscreen{padding-block:0;padding-inline:0;background-color:rgba(0,0,0,0)}}.teaser-fullscreen__slider-row{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:1.875rem}@media(width > 768px){.teaser-fullscreen__slider-row{gap:0}}.teaser-fullscreen__slider{display:flex;flex-direction:column;inline-size:100%}.teaser-fullscreen__slider .swiper-wrapper{order:1}.teaser-fullscreen__slider.swiper-fade .swiper-slide:not(.swiper-slide-active){pointer-events:none}.teaser-fullscreen__nav{order:2;position:static;display:flex;justify-content:center;gap:1.25rem;margin-block-start:1.875rem}@media(width > 768px){.teaser-fullscreen__nav{justify-content:flex-start;max-inline-size:32.0625rem;margin-block-start:2rem;padding-inline-start:calc(50% + 6.65625rem)}}.teaser-fullscreen__nav .swiper-button-prev,.teaser-fullscreen__nav .swiper-button-next{position:static;margin:0;inset:auto;transform:none;inline-size:2.5rem;block-size:2.5rem;background:rgba(0,0,0,0);border:0;padding:0}.teaser-fullscreen__nav .swiper-button-prev:focus-visible,.teaser-fullscreen__nav .swiper-button-next:focus-visible{outline:2px solid var(--clr-blue-800);outline-offset:2px}.teaser-fullscreen__nav .swiper-button-prev::after,.teaser-fullscreen__nav .swiper-button-next::after{content:"";display:block;inline-size:2.5rem;block-size:2.5rem;background-position:center;background-repeat:no-repeat;background-size:contain}.teaser-fullscreen__nav .swiper-button-prev::after{background-image:url("./img/_icn/how-to-arrow-left.svg")}.teaser-fullscreen__nav .swiper-button-next::after{background-image:url("./img/_icn/how-to-arrow-right.svg")}.teaser-fullscreen__slide{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:0;inline-size:100%;max-inline-size:22.1875rem}@media(width > 768px){.teaser-fullscreen__slide{flex-direction:row;align-items:flex-end;justify-content:center;gap:0;max-inline-size:90rem}}.teaser-fullscreen__media{inline-size:100%;margin-block-end:-1.875rem;overflow:hidden;background-color:var(--clr-grey-400);aspect-ratio:355/262}@media(width > 768px){.teaser-fullscreen__media{flex-shrink:0;inline-size:44.625rem;block-size:33.125rem;margin-block-end:0;margin-inline-end:-5.5rem;aspect-ratio:auto}}.teaser-fullscreen__media img{display:block;inline-size:100%;block-size:100%;object-fit:cover}.teaser-fullscreen__panel{position:relative;inline-size:20.9375rem;margin-inline:auto;padding-block:1.875rem 1.25rem;padding-inline:1.25rem;background-color:var(--clr-blue-500);z-index:1}@media(width > 768px){.teaser-fullscreen__panel{flex-shrink:0;inline-size:38.3125rem;margin-inline:0;padding-block:2.5rem 1.25rem}}.teaser-fullscreen__panel :is(h1,h2,h3,h4,h5,h6,p){color:var(--clr-white)}.teaser-fullscreen__content{display:flex;justify-content:flex-start;align-items:flex-start;flex-direction:column;gap:1.25rem}.teaser-fullscreen__tag{display:flex;justify-content:center;align-items:center;flex-direction:row;position:absolute;inset-block-start:-1.25rem;inset-inline-start:1.25rem;transform:rotate(-2deg)}.teaser-fullscreen__tag-brush{flex-shrink:0;display:block}.teaser-fullscreen__tag-label{background-color:var(--clr-light-blue-500);color:var(--clr-white);padding-block:.625rem;white-space:nowrap}.tipps{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:1.125rem;inline-size:100%;max-inline-size:20.9375rem;margin-inline:auto;padding-block:1.875rem;padding-inline:.625rem;background-color:var(--clr-blue-500);text-align:center}@media(width > 768px){.tipps{max-inline-size:25.625rem}}.tipps__header{display:grid;grid-template-columns:auto auto;gap:.625rem;align-items:center;align-self:center;max-inline-size:100%;padding-inline:1.5rem;text-align:start}.tipps__icon{line-height:0}.tipps :is(h1,h2,h3,h4,h5,h6,p){color:var(--clr-white)}.how-to{padding-block:3.125rem;background-color:var(--clr-grey-50)}@media(width > 768px){.how-to{padding-block:0;background-color:rgba(0,0,0,0)}}.how-to__inner{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:1.375rem}.how-to__title{text-align:center;color:var(--clr-blue-800)}.how-to__slider-row{position:relative;inline-size:100%}@media(width > 768px){.how-to__slider-row{padding-inline:5rem}}.how-to__slider{inline-size:100%}.how-to__slider .swiper-slide{display:flex;block-size:auto;align-self:stretch;justify-content:center}.how-to__slider .swiper-button-prev,.how-to__slider .swiper-button-next{display:none;margin:0;opacity:1;background:var(--clr-white);inline-size:5rem;block-size:5rem;border-radius:0;padding-inline:1.125rem;padding-block:1.25rem}@media(width > 768px){.how-to__slider .swiper-button-prev,.how-to__slider .swiper-button-next{display:flex;align-items:center;justify-content:center}}.how-to__slider .swiper-button-prev:focus-visible,.how-to__slider .swiper-button-next:focus-visible{outline:2px solid var(--clr-blue-800);outline-offset:2px}.how-to__slider .swiper-button-prev svg,.how-to__slider .swiper-button-next svg{display:none}.how-to__slider .swiper-button-prev::after,.how-to__slider .swiper-button-next::after{content:"";display:block;inline-size:2.5rem;block-size:2.5rem;background-position:center;background-repeat:no-repeat;background-size:contain}@media(width > 768px){.how-to__slider .swiper-button-prev{inset-inline-start:0;inset-block-start:50%;margin-inline-start:-5rem;transform:translateY(-50%)}}.how-to__slider .swiper-button-prev::after{background-image:url("./img/_icn/how-to-arrow-left.svg")}@media(width > 768px){.how-to__slider .swiper-button-next{inset-inline-end:0;inset-block-start:50%;margin-inline-end:-5rem;transform:translateY(-50%)}}.how-to__slider .swiper-button-next::after{background-image:url("./img/_icn/how-to-arrow-right.svg")}.how-to__slider .swiper-pagination{position:static;margin-block-start:1.375rem}.how-to__slider .swiper-pagination-bullet{inline-size:.625rem;block-size:.625rem;margin:0 .3125rem;opacity:1;background:rgba(0,0,0,0);border:1px solid var(--clr-blue-800)}.how-to__slider .swiper-pagination-bullet-active{inline-size:.9375rem;block-size:.9375rem;background:var(--clr-blue-800);border-color:var(--clr-blue-800)}.how-to__step{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:1.125rem;padding:.625rem;text-align:center;max-inline-size:20.1875rem}.how-to__visual{position:relative;inline-size:12.5rem;block-size:12.5rem;line-height:0}.how-to__brush{position:absolute;inset:0}.how-to__icon{position:absolute;inset-inline-start:50%;inset-block-start:50%;transform:translate(-50%, -50%)}.how-to__step :is(h1,h2,h3,h4,h5,h6,p){color:var(--clr-blue-800)}.how-to__step .body-lg{max-inline-size:18.9375rem}.recipe-slider{padding-block:3.125rem;background-color:var(--clr-grey-50)}@media(width > 768px){.recipe-slider{padding-block:3.75rem}}.recipe-slider__inner{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:1.125rem}.recipe-slider__intro{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:1.125rem;max-inline-size:20.9375rem;text-align:center}@media(width > 768px){.recipe-slider__intro{max-inline-size:56.25rem}}.recipe-slider__intro :is(h1,h2,h3,h4,h5,h6,p){color:var(--clr-blue-800)}.recipe-slider__tag{display:flex;justify-content:center;align-items:center;flex-direction:row;flex-shrink:0;transform:rotate(-2deg)}.recipe-slider__tag-brush{flex-shrink:0;display:block}.recipe-slider__tag-label{background-color:var(--clr-light-blue-500);color:var(--clr-white);padding-block:.625rem;white-space:nowrap}.recipe-slider__intro .body-lg{max-inline-size:20.9375rem}@media(width > 768px){.recipe-slider__intro .body-lg{max-inline-size:39.375rem}}.recipe-slider__slider-row{position:relative;inline-size:100%}@media(width > 768px){.recipe-slider__slider-row{padding-inline:5rem}}.recipe-slider__slider{inline-size:100%}.recipe-slider__slider .swiper-slide{display:flex;block-size:auto;align-self:stretch;justify-content:center}.recipe-slider__slider .swiper-button-prev,.recipe-slider__slider .swiper-button-next{display:none;margin:0;opacity:1;background:var(--clr-white);inline-size:5rem;block-size:5rem;border-radius:0;padding-inline:1.125rem;padding-block:1.25rem}@media(width > 768px){.recipe-slider__slider .swiper-button-prev,.recipe-slider__slider .swiper-button-next{display:flex;align-items:center;justify-content:center}}.recipe-slider__slider .swiper-button-prev:focus-visible,.recipe-slider__slider .swiper-button-next:focus-visible{outline:2px solid var(--clr-blue-800);outline-offset:2px}.recipe-slider__slider .swiper-button-prev svg,.recipe-slider__slider .swiper-button-next svg{display:none}.recipe-slider__slider .swiper-button-prev::after,.recipe-slider__slider .swiper-button-next::after{content:"";display:block;inline-size:2.5rem;block-size:2.5rem;background-position:center;background-repeat:no-repeat;background-size:contain}@media(width > 768px){.recipe-slider__slider .swiper-button-prev{inset-inline-start:0;inset-block-start:50%;margin-inline-start:-5rem;transform:translateY(-50%)}}.recipe-slider__slider .swiper-button-prev::after{background-image:url("./img/_icn/how-to-arrow-left.svg")}@media(width > 768px){.recipe-slider__slider .swiper-button-next{inset-inline-end:0;inset-block-start:50%;margin-inline-end:-5rem;transform:translateY(-50%)}}.recipe-slider__slider .swiper-button-next::after{background-image:url("./img/_icn/how-to-arrow-right.svg")}.recipe-slider__slider .swiper-pagination{position:static;margin-block-start:1.125rem}.recipe-slider__slider .swiper-pagination-bullet{inline-size:.625rem;block-size:.625rem;margin:0 .3125rem;opacity:1;background:rgba(0,0,0,0);border:1px solid var(--clr-blue-800)}.recipe-slider__slider .swiper-pagination-bullet-active{inline-size:.9375rem;block-size:.9375rem;background:var(--clr-blue-800);border-color:var(--clr-blue-800)}.recipe-slider__card{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:1.25rem;inline-size:100%;padding-block-end:1.5625rem;background-color:var(--clr-white)}.recipe-slider__media{position:relative;inline-size:100%;line-height:0}.recipe-slider__media-img{display:block;inline-size:100%;block-size:auto;object-fit:cover;aspect-ratio:294/193}.recipe-slider__badge{position:absolute;inset-block-start:-0.625rem;inset-inline-start:.625rem;line-height:0}.recipe-slider__card :is(h1,h2,h3,h4,h5,h6){color:var(--clr-blue-800);text-align:center}.recipe-slider__meta{display:flex;justify-content:center;align-items:center;flex-direction:row;justify-content:space-between;gap:.3125rem;inline-size:100%;margin:0;padding:0;list-style:none}.recipe-slider__meta-item{display:flex;justify-content:center;align-items:center;flex-direction:row;gap:.3125rem;color:var(--clr-blue-800)}.recipe-slider__meta-icon{flex-shrink:0;display:block}.news-teasers{padding-block:3.125rem;background-color:var(--clr-grey-50)}@media(width > 768px){.news-teasers{padding-block:0;background-color:rgba(0,0,0,0)}}.news-teasers__layout{display:flex;justify-content:flex-start;align-items:stretch;flex-direction:column;gap:1.875rem}@media(width > 768px){.news-teasers__layout{flex-direction:row;align-items:flex-start;gap:2rem}}.news-teasers__intro{display:flex;justify-content:flex-start;align-items:flex-start;flex-direction:column;gap:1.5rem;padding-inline:1.25rem}@media(width > 768px){.news-teasers__intro{flex:0 0 27.5rem;max-inline-size:27.5rem;padding-inline:0}}.news-teasers__intro :is(h1,h2,h3,h4,h5,h6,p){color:var(--clr-blue-800)}.news-teasers__meta{display:flex;justify-content:flex-start;align-items:center;flex-direction:row;justify-content:space-between;inline-size:100%;gap:.625rem}.news-teasers__tag{display:flex;justify-content:center;align-items:center;flex-direction:row;flex-shrink:0;transform:rotate(-2deg)}.news-teasers__tag-brush{flex-shrink:0;display:block}.news-teasers__tag-label{background-color:var(--clr-light-blue-500);color:var(--clr-white);padding-block:.625rem;white-space:nowrap}.news-teasers__filter{display:flex;justify-content:center;align-items:center;flex-direction:row;gap:.625rem;flex-shrink:0}.news-teasers__filter-select{appearance:none;margin:0;padding-block:.875rem;padding-inline:0;border:0;border-radius:7rem;background-color:rgba(0,0,0,0);font-family:var(--font-family-heading);font-size:var(--font-size-body-cta);font-weight:var(--font-weight-regular);line-height:var(--line-height-body-cta);letter-spacing:var(--letter-spacing-0);color:var(--clr-blue-800);text-decoration:underline;text-underline-offset:.15em;cursor:pointer}.news-teasers__filter-select:focus-visible{outline:2px solid var(--clr-blue-800);outline-offset:2px}.news-teasers__filter-icon{flex-shrink:0;transform:rotate(90deg)}.news-teasers__slider-col{inline-size:100%;min-inline-size:0}.news-teasers__slider-row{position:relative;inline-size:100%}.news-teasers__slide-pool{display:none}.news-teasers__slider{inline-size:100%}.news-teasers__slider .swiper-slide{display:flex;block-size:auto;align-self:stretch;justify-content:flex-start}.news-teasers__slider .swiper-pagination{position:static;margin-block-start:1.875rem}.news-teasers__slider .swiper-pagination-bullet{inline-size:.625rem;block-size:.625rem;margin:0 .3125rem;opacity:1;background:rgba(0,0,0,0);border:1px solid var(--clr-blue-800)}.news-teasers__slider .swiper-pagination-bullet-active{inline-size:.9375rem;block-size:.9375rem;background:var(--clr-blue-800);border-color:var(--clr-blue-800)}.news-teasers__card{display:flex;flex-direction:column;inline-size:100%;max-inline-size:20.9375rem;box-shadow:0 .5rem .5rem rgba(0,0,0,.1)}@media(width > 768px){.news-teasers__card{max-inline-size:38.125rem}}.news-teasers__media{position:relative;z-index:2;overflow:hidden;background-color:var(--clr-grey-400);aspect-ratio:335/200}@media(width > 768px){.news-teasers__media{aspect-ratio:auto;block-size:22.0625rem}}.news-teasers__media img{inline-size:100%;max-inline-size:100%;block-size:100%;object-fit:cover}.news-teasers__body{position:relative;z-index:1;background-color:var(--clr-white);display:flex;justify-content:flex-start;align-items:flex-start;flex-direction:column;gap:1.125rem;padding-block:1.875rem 1.25rem;padding-inline:1.25rem}@media(width > 768px){.news-teasers__body{gap:1.125rem;padding-block:1.875rem 1.25rem;padding-inline:1.875rem}}.news-teasers__body :is(h1,h2,h3,h4,h5,h6){color:var(--clr-blue-800)}.news-teasers__card-tag{display:flex;justify-content:center;align-items:center;flex-direction:row;position:absolute;inset-block-start:0;inset-inline-start:1.25rem;transform:translateY(-50%) rotate(-2deg);z-index:3}.ingredient-calculator-section{padding-block:3.125rem}.ingredient-calculator{inline-size:100%;max-inline-size:25.625rem;margin-inline:auto;filter:drop-shadow(0 0.25rem 0.125rem rgba(0, 0, 0, 0.25))}.ingredient-calculator__header{display:grid;grid-template-columns:auto auto;gap:1.25rem;align-items:center;justify-content:center;padding-block:.875rem;padding-inline-end:1.25rem;background-color:var(--clr-blue-500)}.ingredient-calculator__header-icon{line-height:0}.ingredient-calculator__header-title{color:var(--clr-white)}.ingredient-calculator__body{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:2.5rem;padding-block:1.25rem 1.875rem;padding-inline:1.5625rem;background-color:var(--clr-white);box-shadow:var(--shadow-sm)}.ingredient-calculator__portions{display:flex;justify-content:center;align-items:center;flex-direction:row;gap:1.25rem}.ingredient-calculator__stepper{display:flex;justify-content:center;align-items:center;flex-direction:row;gap:1.375rem;padding-block:.25rem;padding-inline:.3125rem;border:2px solid var(--clr-blue-500)}.ingredient-calculator__stepper-btn{display:flex;justify-content:center;align-items:center;flex-direction:row;flex-shrink:0;padding:0;border:0;background:rgba(0,0,0,0);line-height:0;cursor:pointer}.ingredient-calculator__stepper-btn:focus-visible{outline:2px solid var(--clr-blue-800);outline-offset:2px}.ingredient-calculator__stepper-btn:disabled{cursor:not-allowed;opacity:.4}.ingredient-calculator__portions-value{min-inline-size:.875rem;text-align:center;color:var(--clr-blue-800)}.ingredient-calculator__portions-label{color:var(--clr-blue-800)}.ingredient-calculator__list{display:flex;justify-content:flex-start;align-items:flex-start;flex-direction:column;gap:.625rem;inline-size:100%;margin:0;padding:0;list-style:none}.ingredient-calculator__item{color:var(--clr-blue-800)}.ingredient-calculator__item--highlight{display:flex;justify-content:space-between;align-items:center;flex-direction:row;gap:1.25rem;padding-inline-end:.625rem}.ingredient-calculator__item-label{flex:1 1 auto;min-inline-size:0}.ingredient-calculator__item-icon{flex-shrink:0;line-height:0}.teaser-grid{padding-block:3.125rem}.teaser-grid__intro{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:1.25rem;margin-block-end:1.25rem;text-align:center}.teaser-grid__intro :is(h1,h2,h3,h4,h5,h6,p){color:var(--clr-blue-800)}.teaser-grid__grid{display:grid;gap:1.25rem;grid-template-columns:minmax(0, 1fr)}@media(width > 1024px){.teaser-grid__grid{grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);align-items:start}}@media(width > 1024px){.teaser-grid__item--featured{grid-column:1}}.teaser-grid__aside{display:flex;justify-content:flex-start;align-items:stretch;flex-direction:column;gap:1.25rem}@media(width > 1024px){.teaser-grid__aside{grid-column:2;gap:.875rem}}.teaser-grid__card{display:grid;overflow:hidden;text-decoration:none;color:inherit;box-shadow:0 .5rem .5rem rgba(0,0,0,.1)}.teaser-grid__card:focus-visible{outline:2px solid var(--clr-blue-800);outline-offset:2px}.teaser-grid__item--featured .teaser-grid__card{grid-template-columns:minmax(0, 1fr);grid-template-rows:auto auto}.teaser-grid__item:not(.teaser-grid__item--featured) .teaser-grid__card{grid-template-columns:minmax(0, 1fr) 13.5rem;grid-template-rows:minmax(0, 1fr);block-size:7.75rem}@media(width > 1024px){.teaser-grid__item:not(.teaser-grid__item--featured) .teaser-grid__card{grid-template-columns:14.25rem minmax(0, 1fr);block-size:11.875rem}}.teaser-grid__media{overflow:hidden;background-color:var(--clr-grey-400);min-inline-size:0;min-block-size:0}.teaser-grid__media img{display:block;inline-size:100%;block-size:100%;object-fit:cover}.teaser-grid__item--featured .teaser-grid__media{grid-row:1;aspect-ratio:335/260}@media(width > 1024px){.teaser-grid__item--featured .teaser-grid__media{aspect-ratio:auto;block-size:37.375rem}}.teaser-grid__item:not(.teaser-grid__item--featured) .teaser-grid__media{grid-column:1;grid-row:1}.teaser-grid__item:not(.teaser-grid__item--featured) .teaser-grid__body{grid-column:2;grid-row:1}.teaser-grid__body{position:relative;background-color:var(--clr-white);display:flex;justify-content:flex-start;align-items:flex-start;flex-direction:column;justify-content:center;min-inline-size:0;min-block-size:0}.teaser-grid__body :is(h1,h2,h3,h4,h5,h6){color:var(--clr-blue-800)}.teaser-grid__item--featured .teaser-grid__body{grid-row:2}.teaser-grid__item--featured .teaser-grid__body{gap:.8125rem;padding-block:1.875rem 1.25rem;padding-inline:1.25rem}@media(width > 1024px){.teaser-grid__item--featured .teaser-grid__body{gap:1.25rem;margin-block-start:-3.875rem;margin-inline:auto;max-inline-size:35.625rem;padding-block:1.875rem;padding-inline:1.25rem 1.875rem;z-index:1}}.teaser-grid__item:not(.teaser-grid__item--featured) .teaser-grid__body{gap:.875rem;padding-block:.625rem;padding-inline:.875rem}@media(width > 1024px){.teaser-grid__item:not(.teaser-grid__item--featured) .teaser-grid__body{gap:1.25rem;padding-inline:1.25rem}}.teaser-grid__tag{display:flex;justify-content:center;align-items:center;flex-direction:row;flex-shrink:0;transform:rotate(-2deg)}.teaser-grid__item--featured .teaser-grid__tag{position:absolute;inset-block-start:-1.875rem;inset-inline-start:1.25rem}.teaser-grid__tag-brush{flex-shrink:0;display:block}.teaser-grid__tag-label{background-color:var(--clr-light-blue-500);color:var(--clr-white);padding-block:.625rem;white-space:nowrap}
|