https://www.ottobock.com/_next/static/chunks/2594.93e1498b5be811dd.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[2594],{82594:(e,a,t)=>{t.r(a),t.d(a,{app_steps:()=>n});var i=t(63141),r=function(){return(r=Object.assign||function(e){for(var a,t=1,i=arguments.length;t<i;t++)for(var r in a=arguments[t])Object.prototype.hasOwnProperty.call(a,r)&&(e[r]=a[r]);return e}).apply(this,arguments)},l={i18n:{}},n=function(){function e(e){(0,i.r)(this,e),this.TextSlotsCounter=0,this.isMediaSlotFilled=!1}return e.prototype.componentWillRender=function(){this.isMediaSlotFilled=null!==this.el.querySelector('[slot="media"]'),this.i18n=r(r({},l.i18n),this.i18n),this.textElements=Array.from(this.el.querySelectorAll('[slot="text"]')),this.TextSlotsCounter=this.textElements.length},e.prototype.componentDidRender=function(){var e=this;this.el.shadowRoot.addEventListener("slotchange",function(){e.isMediaSlotFilled=null!==e.el.querySelector('[slot="media"]')},{passive:!0})},e.prototype.render=function(){var e=this;return(0,i.h)(i.H,null,(0,i.h)("div",{class:"app-steps"},(0,i.h)("div",{class:"app-steps__wrapper-headlines"},(0,i.h)("div",{class:"top-line"},(0,i.h)("slot",{name:"topline"})),(0,i.h)("h3",null,(0,i.h)("slot",{name:"headline"}))),(0,i.h)("div",{class:"app-steps__content-wrapper"},this.isMediaSlotFilled&&(0,i.h)("div",{class:"app-steps__image-wrapper"},(0,i.h)("slot",{name:"media"})),(0,i.h)("div",{class:this.isMediaSlotFilled?"app-steps__listAndButtonWrapper":"app-steps__listAndButtonWrapper noImage"},(0,i.h)("div",{class:"app-steps__listwrapper rt stack"},(0,i.h)("ol",{class:this.isMediaSlotFilled?"":"app-steps__listwrapper-flex-row items-"+this.TextSlotsCounter},this.textElements.map(function(a,t){return(0,i.h)("li",{style:{width:e.isMediaSlotFilled?"":100/e.TextSlotsCounter+"%"},key:t},a.innerHTML)}))),(0,i.h)("div",{class:this.isMediaSlotFilled?"app-steps__buttonwrapper":"app-steps__buttonwrapper-right"},(0,i.h)("slot",{name:"button"}))))),(0,i.h)("div",{style:{display:"none"}},(0,i.h)("slot",{name:"text"}),(0,i.h)("slot",{name:"media"})))},Object.defineProperty(e.prototype,"el",{get:function(){return(0,i.g)(this)},enumerable:!1,configurable:!0}),e}();n.style="@charset \"UTF-8\";/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */*,::before,::after{-webkit-box-sizing:border-box;box-sizing:border-box}html{-moz-tab-size:4;-o-tab-size:4;tab-size:4}html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}body{font-family:system-ui,\n		-apple-system, \n		'Segoe UI',\n		Roboto,\n		Helvetica,\n		Arial,\n		sans-serif,\n		'Apple Color Emoji',\n		'Segoe UI Emoji'}hr{height:0;color:inherit;}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,\n		SFMono-Regular,\n		Consolas,\n		'Liberation Mono',\n		Menlo,\n		monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}table{text-indent:0;border-color:inherit;}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,select{text-transform:none}button,[type='button'],[type='reset'],[type='submit']{-webkit-appearance:button}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type='search']{-webkit-appearance:textfield;outline-offset:-2px;}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}summary{display:list-item}body{-webkit-user-select:auto;background-color:var(--color-bg-body);color:var(--color-text-base);font-family:var(--font-family-text);font-size:var(--font-size-medium);overflow-x:hidden;overflow-y:auto}@media (max-width: 47.49875rem){body{font-size:var(--font-size-small)}}.page-breadcrumb{padding-block:var(--space-small);padding-inline:var(--space-xxx-large)}@media (max-width: 47.49875rem){.page-breadcrumb{padding-block:var(--space-x-small);padding-inline:var(--space-large)}}body.noscroll{--scrollbar-placeholder-width:0.6875rem;overflow:hidden;margin-right:var(--scrollbar-placeholder-width) !important}.stack>*+*{-webkit-margin-before:var(--stack-space, 1em);margin-block-start:var(--stack-space, 1em)}.visually-hidden{position:absolute !important;width:0.0625rem !important;height:0.0625rem !important;padding:0 !important;margin:-0.0625rem !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.text-left{text-align:start}.text-center{text-align:center}.text-right{text-align:end}.sr-only{position:absolute;inset-inline-start:-625rem;inset-block-start:auto;width:0.0625rem;height:0.0625rem;overflow:hidden}@media (max-width: 47.49875rem){.mobile-hidden{display:none !important}}@media (min-width: 47.5rem){.desktop-hidden{display:none !important}}.h1,h1,.h2,h2,.h3,h3,.h4,h4,.h5,h5{--stack-space:var(--space-xx-large);font-family:var(--font-family-text);font-weight:var(--font-weight-bold);margin:0}.h1,h1{font-size:var(--font-size-xxxx-large);line-height:var(--line-height-x-small)}@media (max-width: 47.49875rem){.h1,h1{font-size:2rem;line-height:var(--line-height-medium)}}.h2,h2{font-size:var(--font-size-xxx-large);line-height:var(--line-height-small)}@media (max-width: 47.49875rem){.h2,h2{font-size:1.75rem;line-height:var(--line-height-medium)}}.h3,h3{font-size:var(--font-size-xx-large);line-height:var(--line-height-small)}@media (max-width: 47.49875rem){.h3,h3{font-size:1.5rem;line-height:var(--line-height-large)}}.h4,h4{font-size:var(--font-size-x-large);line-height:var(--line-height-medium)}@media (max-width: 47.49875rem){.h4,h4{font-size:var(--font-size-large);line-height:var(--line-height-large)}}.h5,h5{font-size:var(--font-size-large);line-height:var(--line-height-large)}@media (max-width: 47.49875rem){.h5,h5{font-size:var(--font-size-large);line-height:var(--line-height-large)}}q{font-size:var(--font-size-x-large);font-family:var(--font-family-special);font-style:italic}@media (max-width: 47.49875rem){q{font-size:var(--font-size-large)}}p{margin:0;line-height:var(--line-height-large)}p.large{font-size:1.375rem}@media (max-width: 47.49875rem){p.large{font-size:var(--font-size-large)}}p.small{font-size:var(--font-size-small)}@media (max-width: 47.49875rem){p.small{font-size:var(--font-size-x-small)}}p.x-small{font-size:var(--font-size-x-small)}@media (max-width: 47.49875rem){p.x-small{font-size:var(--font-size-xx-small)}}div.large{font-size:1.375rem}@media (max-width: 47.49875rem){div.large{font-size:var(--font-size-large)}}div.small{font-size:var(--font-size-small)}@media (max-width: 47.49875rem){div.small{font-size:var(--font-size-x-small)}}div.x-small{font-size:var(--font-size-x-small)}@media (max-width: 47.49875rem){div.x-small{font-size:var(--font-size-xx-small)}}.top-line-wrapper{display:-ms-flexbox;display:flex;grid-gap:var(--space-small)}.top-line,.label{font-size:var(--font-size-small);font-weight:var(--font-weight-bold)}.top-line{line-height:var(--line-height-xx-small);display:inline-block}.product-card-top-line{-ms-flex-align:center;align-items:center}.product-card-top-line .link--tertiary{font-size:var(--font-size-small)}.sub-top-line{font-weight:var(--font-weight-normal);font-size:var(--font-size-xx-small)}.label{line-height:var(--line-height-xx-large)}a{display:inline;color:var(--color-text-base);text-decoration:underline;cursor:pointer}a:focus,a:hover{color:var(--color-brand-primary)}b,strong{font-weight:var(--font-weight-bold)}.clickable{cursor:pointer}.word-break{word-break:break-word}.theme-v1 .h1,.theme-v1 h1,.theme-v1 .h2,.theme-v1 h2,.theme-v1 .h3,.theme-v1 h3,.theme-v1 .h4,.theme-v1 h4,.theme-v1 .h5,.theme-v1 h5{font-family:var(--font-family-special);font-weight:var(--font-weight-normal)}.theme-v1 .top-line,.theme-v1 .label{font-size:var(--font-size-xx-small);letter-spacing:0.0625rem;text-transform:uppercase}.rt{--stack-space:var(--space-medium);--color-quotation-mark:var(--color-brand-primary);--quotation-mark-display:block}.rt ol,.rt ul{line-height:var(--line-height-x-large);margin:0;padding-block:0.3125rem;padding-inline:0;list-style:none}@media (min-width: 47.5rem){.rt ol,.rt ul{line-height:var(--line-height-xx-large)}}.rt li{position:relative}.rt li::before{position:absolute;color:var(--color-brand-primary)}.rt li+li{-webkit-margin-before:calc(var(--space-xx-large) / 2);margin-block-start:calc(var(--space-xx-large) / 2)}.rt li ol,.rt li ul{-webkit-margin-before:calc(var(--space-xx-large) / 2);margin-block-start:calc(var(--space-xx-large) / 2)}.rt ol{counter-reset:item}.rt ol>li{-webkit-padding-start:calc(var(--space-xx-large) + var(--space-medium));padding-inline-start:calc(var(--space-xx-large) + var(--space-medium));}.rt ol>li::before{font-weight:var(--font-weight-bold);content:counters(item, \".\");counter-increment:item;inset-inline-start:0;border:0.125rem solid var(--color-brand-primary);border-radius:var(--radius-circle);height:var(--font-size-xx-large);width:var(--font-size-xx-large);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-transform:translateY(-0.25rem);transform:translateY(-0.25rem)}.rt ol>li>ol>li{-webkit-padding-start:calc(var(--space-x-large) + var(--space-small));padding-inline-start:calc(var(--space-x-large) + var(--space-small))}.rt ol>li>ol>li::before{content:counters(item, \".\") \". \";border:none;letter-spacing:0.0625rem}.rt ul li{-webkit-padding-start:var(--space-large);padding-inline-start:var(--space-large)}.rt ul li::before{content:\"\";width:0.625rem;height:0.625rem;border-radius:var(--radius-circle);display:inline-block;background-color:currentColor;inset-inline-start:0.4375rem;inset-block-start:0.4375rem}@media (min-width: 47.5rem){.rt ul li::before{inset-block-start:0.5625rem}}.rt q,.rt blockquote{display:block;font-size:var(--font-size-x-large);line-height:var(--line-height-medium);font-family:var(--font-family-special);-webkit-padding-before:var(--space-x-large);padding-block-start:var(--space-x-large);position:relative}@media (max-width: 81.24875rem){.rt q,.rt blockquote{font-size:var(--font-size-large);line-height:var(--line-height-large)}}.rt q::before,.rt blockquote::before{content:\"“\";position:absolute;inset-inline-start:-0.1875rem;inset-block-start:-0.75rem;color:var(--color-quotation-mark);font-size:var(--font-size-xxxx-large);display:var(--quotation-mark-display);pointer-events:none}.rt q::after,.rt blockquote::after{visibility:hidden;position:absolute;width:0;height:0}.rt q cite,.rt blockquote cite{display:block;font-style:normal;font-size:var(--font-size-small);line-height:var(--line-height-x-large);-webkit-margin-before:var(--space-medium);margin-block-start:var(--space-medium);font-family:var(--font-family-text)}@media (max-width: 81.24875rem){.rt q cite,.rt blockquote cite{font-size:var(--font-size-x-small);line-height:var(--line-height-large)}}.rt p{line-height:var(--line-height-xx-large)}@media (max-width: 47.49875rem){.rt p{line-height:var(--line-height-x-large)}}.rt p.large{line-height:var(--line-height-large)}@media (max-width: 47.49875rem){.rt p.large{line-height:var(--line-height-large)}}.rt p.small{line-height:var(--line-height-x-large)}@media (max-width: 47.49875rem){.rt p.small{line-height:var(--line-height-large)}}.rt p.x-small{line-height:var(--line-height-x-large)}@media (max-width: 47.49875rem){.rt p.x-small{line-height:var(--line-height-large)}}.rt .h1,.rt h1,.rt .h2,.rt h2,.rt .h3,.rt h3,.rt .h4,.rt h4{-webkit-margin-after:var(--space-large);margin-block-end:var(--space-large)}@media (max-width: 47.49875rem){.rt .h1,.rt h1,.rt .h2,.rt h2,.rt .h3,.rt h3,.rt .h4,.rt h4{-webkit-margin-after:var(--space-medium);margin-block-end:var(--space-medium)}}.rt .h5,.rt h5{-webkit-margin-after:var(--space-medium);margin-block-end:var(--space-medium)}img.image{height:auto;vertical-align:middle}figure{margin:0}figcaption{-webkit-margin-before:var(--space-x-small);margin-block-start:var(--space-x-small);font-size:var(--font-size-x-small);color:var(--color-neutral-grey-3);line-height:var(--line-height-large)}.app-steps{background:var(-color-colored-grey-1);border:0.0625rem solid #d6d6d6;padding:var(--space-medium);margin-block:var(--space-x-large);margin-inline:var(--space-small)}@media (min-width: 47.5rem){.app-steps{margin-block:var(--space-x-large);margin-inline:calc(3 * var(--space-x-large));padding-block:calc(2 * var(--space-xx-large));padding-inline:var(--space-xxx-large)}}@media (min-width: 47.5rem){.app-steps__wrapper-headlines{margin:auto;-webkit-margin-after:var(--space-medium);margin-block-end:var(--space-medium)}}.app-steps__wrapper-headlines div{-webkit-margin-after:var(--space-medium);margin-block-end:var(--space-medium);-webkit-margin-before:var(--space-x-small);margin-block-start:var(--space-x-small)}.app-steps__wrapper-headlines h3{-webkit-margin-after:var(--space-large);margin-block-end:var(--space-large)}.app-steps__content-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}@media (min-width: 47.5rem){.app-steps__content-wrapper{-ms-flex-direction:row;flex-direction:row}}.app-steps__image-wrapper{width:100%}@media (min-width: 47.5rem){.app-steps__image-wrapper{width:50%}}.app-steps__listAndButtonWrapper{-webkit-margin-before:var(--space-large);margin-block-start:var(--space-large);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.app-steps__listAndButtonWrapper.noImage{width:100%;-webkit-margin-start:0;margin-inline-start:0;-webkit-margin-before:0;margin-block-start:0}@media (min-width: 47.5rem){.app-steps__listAndButtonWrapper.noImage{-webkit-margin-before:calc(var(--space-xx-large) * 2 - var(--space-medium));margin-block-start:calc(var(--space-xx-large) * 2 - var(--space-medium))}}@media (min-width: 47.5rem){.app-steps__listAndButtonWrapper.noImage .app-steps__listwrapper{margin:0}}@media (min-width: 47.5rem){.app-steps__listAndButtonWrapper{-webkit-margin-start:var(--space-large);margin-inline-start:var(--space-large);-webkit-margin-before:0;margin-block-start:0}}.app-steps__listwrapper{width:100%}@media (min-width: 47.5rem){.app-steps__listwrapper{-webkit-margin-before:var(--space-xx-small);margin-block-start:var(--space-xx-small);-webkit-margin-start:var(--space-large);margin-inline-start:var(--space-large)}}.app-steps__listwrapper li+li{-webkit-margin-before:var(--space-x-large);margin-block-start:var(--space-x-large)}@media (min-width: 47.5rem){.app-steps__listwrapper li{-webkit-padding-start:calc( var(--font-size-xxx-large) + var(--font-size-x-large) ) !important;padding-inline-start:calc( var(--font-size-xxx-large) + var(--font-size-x-large) ) !important;min-block-size:calc(var(--font-size-xxx-large) + var(--font-size-x-small))}}@media (min-width: 47.5rem){.app-steps__listwrapper li::before{inset-block-start:0;height:calc(var(--font-size-xxx-large) + var(--font-size-x-small)) !important;width:calc(var(--font-size-xxx-large) + var(--font-size-x-small)) !important;font-size:var(--font-size-x-large);-webkit-transform:none !important;transform:none !important}}.app-steps__listwrapper-flex-row{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--space-medium);-ms-flex-align:start;align-items:flex-start}@media (min-width: 47.5rem){.app-steps__listwrapper-flex-row.items-2 li{width:50%}}@media (min-width: 47.5rem){.app-steps__listwrapper-flex-row.items-3 li{width:33%}}@media (min-width: 47.5rem){.app-steps__listwrapper-flex-row{-ms-flex-direction:row;flex-direction:row;-webkit-margin-before:0;margin-block-start:0;-webkit-margin-start:var(--space-large);margin-inline-start:var(--space-large)}}@media (min-width: 47.5rem) and (min-width: 47.5rem){.app-steps__listwrapper-flex-row li{-webkit-padding-before:calc(var(--font-size-xxxx-large) + var(--space-medium));padding-block-start:calc(var(--font-size-xxxx-large) + var(--space-medium));-webkit-padding-start:0 !important;padding-inline-start:0 !important}}@media (min-width: 47.5rem){.app-steps__listwrapper-flex-row li+li{-webkit-margin-before:0;margin-block-start:0}}@media (min-width: 47.5rem){.app-steps__listwrapper-flex-row li::before{in

1set-block-start:0;height:calc(var(--font-size-xxx-large) + var(--font-size-x-small)) !important;width:calc(var(--font-size-xxx-large) + var(--font-size-x-small)) !important;font-size:var(--font-size-x-large)}}@media (min-width: 47.5rem){.app-steps__listwrapper-flex-row li::after{content:\"\";position:absolute;inset-block-start:calc((var(--font-size-xxxx-large) / 2));inset-inline-start:calc(var(--font-size-xxxx-large) + var(--space-medium));inset-inline-end:var(--space-medium);height:0.0625rem;background-color:var(--color-neutral-grey-2)}}.app-steps__buttonwrapper{-webkit-margin-before:var(--space-large);margin-block-start:var(--space-large)}@media (min-width: 47.5rem){.app-steps__buttonwrapper{-webkit-margin-start:var(--space-large);margin-inline-start:var(--space-large);-webkit-margin-before:var(--space-xx-large);margin-block-start:var(--space-xx-large)}}.app-steps__buttonwrapper-right{-webkit-margin-before:var(--space-large);margin-block-start:var(--space-large);-webkit-margin-after:var(--space-xx-large);margin-block-end:var(--space-xx-large)}@media (min-width: 47.5rem){.app-steps__buttonwrapper-right{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;-webkit-margin-after:calc(var(--space-xx-large) * 2);margin-block-end:calc(var(--space-xx-large) * 2);-webkit-margin-before:var(--space-xx-large);margin-block-start:var(--space-xx-large)}}.app-steps li{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}"}}]);