<div class="order-detail-table">
    <div class="message--error">
        <div class="message__container--disabled">
            <span class="visually-hidden">Error message</span>
            <div class="message__content">
                <p class="message__text">Es ist leider ein Fehler aufgetreten.</p>
            </div>
            <div class="message__close-button">
                <button class="button-icon--icon-regular -icon-close" type="button" name="close-message" value="yes">
                    <span class="visually-hidden">Schliessen</span>
                </button>
            </div>
        </div>
    </div>

    <div class="table-header">

        <div class="table-header__column--title">

            <h4 class="heading-counter">
                Artikel
                <span class="counter-bubble" data-counter="3"></span>
            </h4>

        </div>

    </div>
    <div class="responsive-table--first-column-mobile-full-height -spacing-large">
        <div class="table-search" data-offset="none">
            <div class="table-search__container">

                <div class="text-field--light text-field-search--light is-initialized" data-disable-text-field-js>
                    <div class="text-field__wrapper text-field-search__wrapper">
                        <input class="text-field__input text-field-search__input" id="order-detail-table-search" type="text" name="order-detail-table-search" required data-responsive-table-search="true" placeholder="Suche" />
                        <label class="visually-hidden" for="order-detail-table-search">Suche</label>
                        <button type="reset" class="text-field-search__reset"></button>
                        <button type="submit" class="text-field-search__search"></button>
                        <div class="text-field-search__loader ">
                            <div class="loading-spinner -vertical -horizontal">
                                <div class="loading-spinner__spinner--small"></div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="responsive-table__container--auto-scrollbar">
            <table class="responsive-table__table" data-responsive-table-filter-context>
                <colgroup>
                    <col style="">
                    <col style="">
                    <col style="72px">
                    <col style="">
                    <col style="">
                    <col style="">
                    <col style="">
                    <col style="">
                    <col style="">
                    <col style="">
                    <col style="90px">
                    <col style="164px">
                    <col style="64px">
                </colgroup>
                <thead>
                    <tr class="responsive-table__tr">
                        <th class="responsive-table__th">
                            <div class="responsive-table__select-all-box">
                                <div class="checkbox--light is-initialized">
                                    <div class="checkbox__wrapper">
                                        <input class="checkbox__input" id="multi-selection-checkbox" type="checkbox" name="&#x23;" />

                                        <label class="checkbox__label has-empty-label" for="multi-selection-checkbox">
                                            <span>
                                            </span>
                                        </label>
                                    </div>

                                </div>
                                <div class="responsive-table__multiselect-dropdown">
                                    <div class="dropdown">
                                        <button type="button" class="dropdown__toggle is-thin" style="max-width: 170px;"> </button>
                                        <div class="dropdown__content">
                                            <div class="responsive-table__batch-operations-dropdown">
                                                <button type="button" class="responsive-table__batch-operations-dropdown-item">
                                                    Auswahl in den Warenkorb kopieren
                                                </button>
                                                <button type="button" class="responsive-table__batch-operations-dropdown-item">
                                                    Auswahl in den Merkliste kopieren
                                                </button>
                                                <button type="button" class="responsive-table__batch-operations-dropdown-item">
                                                    Auswahl stornieren
                                                </button>
                                                <button type="button" class="responsive-table__batch-operations-dropdown-item">
                                                    Auswahl retournieren
                                                </button>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </th>
                        <th class="responsive-table__th is-centered is-index-column">
                            Pos.
                        </th>
                        <th class="responsive-table__th">

                        </th>
                        <th class="responsive-table__th">
                            Artikel
                        </th>
                        <th class="responsive-table__th">
                            Inhalt
                        </th>
                        <th class="responsive-table__th is-centered">
                            Lager
                        </th>
                        <th class="responsive-table__th">
                            UVP
                        </th>
                        <th class="responsive-table__th">
                            Preis
                        </th>
                        <th class="responsive-table__th is-centered">
                            EB
                        </th>
                        <th class="responsive-table__th is-right-aligned">
                            Preis Total
                        </th>
                        <th class="responsive-table__th is-right-aligned">
                            Anzahl
                        </th>
                        <th class="responsive-table__th">
                            Status
                        </th>
                        <th class="responsive-table__th is-hidden-on-desktop">
                            Aktion
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="responsive-table__tr">
                        <td class="responsive-table__td is-left is-select-td">
                            <div class="responsive-table__td-inner-container">
                                <div class="checkbox--light is-initialized is-filled-in">
                                    <div class="checkbox__wrapper">
                                        <input class="checkbox__input" id="multi-select-1" type="checkbox" name="&#x23;" value="1" data-multi-selectable="true" />

                                        <label class="checkbox__label has-empty-label" for="multi-select-1">
                                            <span>
                                            </span>
                                        </label>
                                    </div>

                                </div>
                            </div>

                        </td>
                        <td class="responsive-table__td is-right-aligned is-index-td">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title">Pos.</div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container">
                                        1
                                    </div>

                                </div>
                            </div>
                        </td>
                        <td class="responsive-table__td is-top-aligned">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title"></div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container">
                                        <a href="#" class="image-cell__image-link">
                                            <div class="image ">
                                                <picture>
                                                    <img src="/example-assets/images/responsive-table/thumb.png" class="image__img image-cell__image is-loading" alt="Alt" title="Title" srcset="/example-assets/images/responsive-table/thumb.png 1x, /example-assets/images/responsive-table/thumb.png 2x" onload="this.classList.remove('is-loading')" />
                                                </picture>
                                            </div>

                                        </a>

                                        <div class="image-cell__specials">
                                            <div class="specials">

                                                <div class="specials--medium-horizontally-vertically  ">
                                                    <button type="button" class="specials__toggle" data-info-tooltip-content="Sale" style="background-color: #e30a24;">
                                                        <span class="visually-hidden">Sale</span>
                                                        <span class="image ">
                                                            <picture>
                                                                <img src="/example-assets/images/specials/sale.svg" class="image__img specials__toggle-image is-loading" alt="" onload="this.classList.remove('is-loading')" />
                                                            </picture>
                                                        </span>

                                                    </button>
                                                    <button type="button" class="specials__toggle" data-info-tooltip-content="New" style="background-color: #333333;">
                                                        <span class="visually-hidden">New</span>
                                                        <span class="image ">
                                                            <picture>
                                                                <img src="/example-assets/images/specials/new.svg" class="image__img specials__toggle-image is-loading" alt="" onload="this.classList.remove('is-loading')" />
                                                            </picture>
                                                        </span>

                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </td>
                        <td class="responsive-table__td">
                            <div class="responsive-table__td-inner-container">
                                <h5 class="item-cell__title--with-attributes">
                                    <a href="" class="item-cell__title-link">Bosch Gepäckträgerakku PowerPack 500 Performance Anthrazit</a>
                                </h5>
                                <div class="attributes--small-bold">
                                    <ul class="attributes__list">
                                        <li class="attributes__list-item">
                                            <div class="attributes__name">Art.-Nr.</div>
                                            <div class="attributes__value " title="56.65563">
                                                56.65563
                                            </div>
                                        </li>
                                        <li class="attributes__list-item">
                                            <div class="attributes__name">Gruppe</div>
                                            <div class="attributes__value " title="Bosch eBike">
                                                Bosch eBike
                                            </div>
                                        </li>
                                    </ul>
                                </div>

                                <div class="text-field--light text-field-placeholder--light is-initialized is-filled-in">
                                    <div class="text-field__wrapper text-field-placeholder__wrapper ">
                                        <input class="text-field__input text-field-placeholder__input" id="comment-1" type="text" name="comment-1" value="Für Oscar" disabled placeholder="Kommentar" />
                                        <label class="visually-hidden" for="comment-1">Kommentar
                                        </label>
                                    </div>

                                </div>
                                <div class="item-cell__value-list">
                                    <ul class="value-list">
                                        <li class="value-list__item--info">
                                            <div class="value-list__label">Vorgezogene Recyclinggebühren:</div>
                                            <div class="value-list__price">

                                                <div class="price--extra-small">

                                                    <div class="price__row">
                                                        <div class="price__column--regular-price">
                                                            <div class="price-regular">
                                                                <div class="price-regular__current">
                                                                    <div class="price-regular__current-price-inner">
                                                                        <div class="price-regular__current-currency">CHF</div>
                                                                    </div>
                                                                    <div class="price-regular__current-price-inner">
                                                                        <div class="price-regular__current-value">4.00</div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                            <div class="value-list__tooltip">
                                                <button type="button" class="info-tooltip__toggle--small" data-info-tooltip-content="Für das Recycling.">
                                                    <span class="visually-hidden">Information</span>
                                                </button>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                        </td>
                        <td class="responsive-table__td">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title">Inhalt</div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container">
                                        <div class="wysiwyg-content">
                                            <p>20 Stück</p>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </td>
                        <td class="responsive-table__td is-centered">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title">Lager</div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container">
                                        <div class="stock">
                                            <button type="button" class="stock__toggle--available" data-info-tooltip-content="Verfügbar">
                                                <span class="visually-hidden">Verfügbar</span>
                                            </button>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </td>
                        <td class="responsive-table__td">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title">UVP</div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container--prevent-wrap">

                                        <div class="price--small">

                                            <div class="price__row">
                                                <div class="price__column--regular-price">
                                                    <div class="price-regular">
                                                        <div class="price-regular__current">
                                                            <div class="price-regular__current-price-inner">
                                                                <div class="price-regular__current-currency">CHF</div>
                                                            </div>
                                                            <div class="price-regular__current-price-inner">
                                                                <div class="price-regular__current-value">13.50</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>

                                </div>
                            </div>
                        </td>
                        <td class="responsive-table__td">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title">Preis</div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container--prevent-wrap">

                                        <div class="price--small">

                                            <div class="price__row">
                                                <div class="price__column--regular-price">
                                                    <div class="price-regular">
                                                        <div class="price-regular__current">
                                                            <div class="price-regular__current-price-inner">
                                                                <div class="price-regular__current-currency">CHF</div>
                                                            </div>
                                                            <div class="price-regular__current-price-inner">
                                                                <div class="price-regular__current-value">13.50</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>

                                </div>
                            </div>
                        </td>
                        <td class="responsive-table__td is-centered">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title">EB</div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container">
                                        <div class="checkbox--light is-initialized is-filled-in">
                                            <div class="checkbox__wrapper">
                                                <input class="checkbox__input" id="Artikel-1" type="checkbox" name="Artikel-1" value="1" data-checkbox-readonly="true" disabled />

                                                <label class="checkbox__label has-empty-label" for="Artikel-1">
                                                    <span>
                                                    </span>
                                                </label>
                                            </div>

                                        </div>
                                    </div>

                                </div>
                            </div>
                        </td>
                        <td class="responsive-table__td is-right-aligned">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title">Preis Total</div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container--prevent-wrap">

                                        <div class="price--small">

                                            <div class="price__row">
                                                <div class="price__column--regular-price">
                                                    <div class="price-regular">
                                                        <div class="price-regular__current">
                                                            <div class="price-regular__current-price-inner">
                                                                <div class="price-regular__current-currency">CHF</div>
                                                            </div>
                                                            <div class="price-regular__current-price-inner">
                                                                <div class="price-regular__current-value">67.50</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>

                                </div>
                            </div>
                        </td>
                        <td class="responsive-table__td is-right-aligned">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title">Anzahl</div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container">
                                        <div class="wysiwyg-content">
                                            <b>5</b>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </td>
                        <td class="responsive-table__td">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title">Status</div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container--prevent-wrap">
                                        <div class="status">
                                            <button class="status--amber">In Bearbeitung
                                                <span class="visually-hidden"></span>
                                            </button>
                                            <div class="status__tooltip" data-info-tooltip-content-html="">
                                                <div class="responsive-table -spacing-medium -not-responsive">
                                                    <div class="responsive-table__container--auto-scrollbar">
                                                        <table class="responsive-table__table" data-responsive-table-filter-context>
                                                            <colgroup>
                                                                <col style="">
                                                                <col style="">
                                                            </colgroup>
                                                            <thead>
                                                                <tr class="responsive-table__tr">
                                                                    <th class="responsive-table__th">
                                                                        Status
                                                                    </th>
                                                                    <th class="responsive-table__th is-right-aligned">
                                                                        Anzahl
                                                                    </th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <tr class="responsive-table__tr">
                                                                    <td class="responsive-table__td">
                                                                        <div class="responsive-table__mobile-container">
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__mobile-column-title">Status</div>
                                                                            </div>
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__td-inner-container">
                                                                                    <div class="wysiwyg-content">
                                                                                        <p>Bestellt</p>
                                                                                    </div>
                                                                                </div>

                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                    <td class="responsive-table__td is-right-aligned">
                                                                        <div class="responsive-table__mobile-container">
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__mobile-column-title">Anzahl</div>
                                                                            </div>
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__td-inner-container">
                                                                                    <div class="wysiwyg-content">
                                                                                        <p><strong>11</strong></p>
                                                                                    </div>
                                                                                </div>

                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                                <tr class="responsive-table__tr">
                                                                    <td class="responsive-table__td">
                                                                        <div class="responsive-table__mobile-container">
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__mobile-column-title">Status</div>
                                                                            </div>
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__td-inner-container">
                                                                                    <div class="wysiwyg-content">
                                                                                        <p>Geliefert</p>
                                                                                    </div>
                                                                                </div>

                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                    <td class="responsive-table__td is-right-aligned">
                                                                        <div class="responsive-table__mobile-container">
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__mobile-column-title">Anzahl</div>
                                                                            </div>
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__td-inner-container">
                                                                                    <div class="wysiwyg-content">
                                                                                        <p><strong>2</strong></p>
                                                                                    </div>
                                                                                </div>

                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                                <tr class="responsive-table__tr">
                                                                    <td class="responsive-table__td">
                                                                        <div class="responsive-table__mobile-container">
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__mobile-column-title">Status</div>
                                                                            </div>
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__td-inner-container">
                                                                                    <div class="wysiwyg-content">
                                                                                        <p>Offen</p>
                                                                                    </div>
                                                                                </div>

                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                    <td class="responsive-table__td is-right-aligned">
                                                                        <div class="responsive-table__mobile-container">
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__mobile-column-title">Anzahl</div>
                                                                            </div>
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__td-inner-container">
                                                                                    <div class="wysiwyg-content">
                                                                                        <p><strong>9</strong></p>
                                                                                    </div>
                                                                                </div>

                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                                <tr class="responsive-table__tr">
                                                                    <td class="responsive-table__td">
                                                                        <div class="responsive-table__mobile-container">
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__mobile-column-title">Status</div>
                                                                            </div>
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__td-inner-container">
                                                                                    <div class="wysiwyg-content">
                                                                                        <p>Storniert</p>
                                                                                    </div>
                                                                                </div>

                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                    <td class="responsive-table__td is-right-aligned">
                                                                        <div class="responsive-table__mobile-container">
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__mobile-column-title">Anzahl</div>
                                                                            </div>
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__td-inner-container">
                                                                                    <div class="wysiwyg-content">
                                                                                        <p><strong>1</strong></p>
                                                                                    </div>
                                                                                </div>

                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                                <tr class="responsive-table__tr">
                                                                    <td class="responsive-table__td">
                                                                        <div class="responsive-table__mobile-container">
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__mobile-column-title">Status</div>
                                                                            </div>
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__td-inner-container">
                                                                                    <div class="wysiwyg-content">
                                                                                        <p>Retouniert</p>
                                                                                    </div>
                                                                                </div>

                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                    <td class="responsive-table__td is-right-aligned">
                                                                        <div class="responsive-table__mobile-container">
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__mobile-column-title">Anzahl</div>
                                                                            </div>
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__td-inner-container">
                                                                                    <div class="wysiwyg-content">
                                                                                        <p><strong>3</strong></p>
                                                                                    </div>
                                                                                </div>

                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                                <tr class="responsive-table__tr">
                                                                    <td class="responsive-table__td">
                                                                        <div class="responsive-table__mobile-container">
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__mobile-column-title">Status</div>
                                                                            </div>
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__td-inner-container">
                                                                                    <div class="wysiwyg-content">
                                                                                        <p>In Retourenliste</p>
                                                                                    </div>
                                                                                </div>

                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                    <td class="responsive-table__td is-right-aligned">
                                                                        <div class="responsive-table__mobile-container">
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__mobile-column-title">Anzahl</div>
                                                                            </div>
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__td-inner-container">
                                                                                    <div class="wysiwyg-content">
                                                                                        <p><strong>1</strong></p>
                                                                                    </div>
                                                                                </div>

                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                                <tr class="responsive-table__tr" data-responsive-table-filter-no-match hidden>
                                                                    <td class="responsive-table__td" colspan="2">
                                                                        <div class="wysiwyg-content">
                                                                            <p class="responsive-table__no-match">Keine Ergebnisse gefunden</p>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </td>
                        <td class="responsive-table__td is-right-aligned">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title">Aktion</div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container">
                                        <div class="ellipsis-actions">
                                            <button type="button" class="ellipsis-actions__toggle">
                                                <span class="visually-hidden">More actions</span>
                                            </button>
                                            <div class="info-tooltip__html" data-info-tooltip-content-html>
                                                <ul class="ellipsis-actions__list">
                                                    <li class="ellipsis-actions__list-item">
                                                        <button type="button" class="ellipsis-actions__link">In den Warenkorb kopieren</button>
                                                    </li>
                                                    <li class="ellipsis-actions__list-item">
                                                        <button type="button" class="ellipsis-actions__link">In die Merkliste kopieren</button>
                                                    </li>
                                                    <li class="ellipsis-actions__list-item">
                                                        <button type="button" class="ellipsis-actions__link">Retournieren</button>
                                                    </li>
                                                    <li class="ellipsis-actions__list-item">
                                                        <button type="button" class="ellipsis-actions__link">Retourenliste aufrufen</button>
                                                    </li>
                                                    <li class="ellipsis-actions__list-item">
                                                        <button type="button" class="ellipsis-actions__link">Stornieren</button>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr class="responsive-table__tr">
                        <td class="responsive-table__td is-left is-select-td">
                            <div class="responsive-table__td-inner-container">
                                <div class="checkbox--light is-initialized is-filled-in">
                                    <div class="checkbox__wrapper">
                                        <input class="checkbox__input" id="multi-select-2" type="checkbox" name="&#x23;" value="1" data-multi-selectable="true" />

                                        <label class="checkbox__label has-empty-label" for="multi-select-2">
                                            <span>
                                            </span>
                                        </label>
                                    </div>

                                </div>
                            </div>

                        </td>
                        <td class="responsive-table__td is-right-aligned is-index-td">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title">Pos.</div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container">
                                        2
                                    </div>

                                </div>
                            </div>
                        </td>
                        <td class="responsive-table__td is-top-aligned">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title"></div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container">
                                        <a href="#" class="image-cell__image-link">
                                            <div class="image ">
                                                <picture>
                                                    <img src="/example-assets/images/responsive-table/thumb.png" class="image__img image-cell__image is-loading" alt="Alt" title="Title" srcset="/example-assets/images/responsive-table/thumb.png 1x, /example-assets/images/responsive-table/thumb.png 2x" onload="this.classList.remove('is-loading')" />
                                                </picture>
                                            </div>

                                        </a>

                                        <div class="image-cell__specials">
                                            <div class="specials">

                                                <div class="specials--medium-horizontally-vertically  ">
                                                    <button type="button" class="specials__toggle" data-info-tooltip-content="Sale" style="background-color: #e30a24;">
                                                        <span class="visually-hidden">Sale</span>
                                                        <span class="image ">
                                                            <picture>
                                                                <img src="/example-assets/images/specials/sale.svg" class="image__img specials__toggle-image is-loading" alt="" onload="this.classList.remove('is-loading')" />
                                                            </picture>
                                                        </span>

                                                    </button>
                                                    <button type="button" class="specials__toggle" data-info-tooltip-content="New" style="background-color: #333333;">
                                                        <span class="visually-hidden">New</span>
                                                        <span class="image ">
                                                            <picture>
                                                                <img src="/example-assets/images/specials/new.svg" class="image__img specials__toggle-image is-loading" alt="" onload="this.classList.remove('is-loading')" />
                                                            </picture>
                                                        </span>

                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </td>
                        <td class="responsive-table__td">
                            <div class="responsive-table__td-inner-container">
                                <h5 class="item-cell__title--with-attributes">
                                    <a href="" class="item-cell__title-link">Bosch Gepäckträgerakku PowerPack 500 Performance Anthrazit</a>
                                </h5>
                                <div class="attributes--small-bold">
                                    <ul class="attributes__list">
                                        <li class="attributes__list-item">
                                            <div class="attributes__name">Art.-Nr.</div>
                                            <div class="attributes__value " title="56.65563">
                                                56.65563
                                            </div>
                                        </li>
                                        <li class="attributes__list-item">
                                            <div class="attributes__name">Gruppe</div>
                                            <div class="attributes__value " title="Bosch eBike">
                                                Bosch eBike
                                            </div>
                                        </li>
                                    </ul>
                                </div>

                                <div class="text-field--light text-field-placeholder--light is-initialized is-filled-in">
                                    <div class="text-field__wrapper text-field-placeholder__wrapper ">
                                        <input class="text-field__input text-field-placeholder__input" id="comment-2" type="text" name="comment-2" value="Geschenk" disabled placeholder="Kommentar" />
                                        <label class="visually-hidden" for="comment-2">Kommentar
                                        </label>
                                    </div>

                                </div>
                                <div class="item-cell__value-list">
                                    <ul class="value-list">
                                        <li class="value-list__item--info">
                                            <div class="value-list__label">Vorgezogene Recyclinggebühren:</div>
                                            <div class="value-list__price">

                                                <div class="price--extra-small">

                                                    <div class="price__row">
                                                        <div class="price__column--regular-price">
                                                            <div class="price-regular">
                                                                <div class="price-regular__current">
                                                                    <div class="price-regular__current-price-inner">
                                                                        <div class="price-regular__current-currency">CHF</div>
                                                                    </div>
                                                                    <div class="price-regular__current-price-inner">
                                                                        <div class="price-regular__current-value">4.00</div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                            <div class="value-list__tooltip">
                                                <button type="button" class="info-tooltip__toggle--small" data-info-tooltip-content="Für das Recycling.">
                                                    <span class="visually-hidden">Information</span>
                                                </button>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                        </td>
                        <td class="responsive-table__td">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title">Inhalt</div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container">
                                        <div class="wysiwyg-content">
                                            <p>20 Stück</p>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </td>
                        <td class="responsive-table__td is-centered">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title">Lager</div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container">
                                        <div class="stock">
                                            <button type="button" class="stock__toggle--available" data-info-tooltip-content="Verfügbar">
                                                <span class="visually-hidden">Verfügbar</span>
                                            </button>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </td>
                        <td class="responsive-table__td">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title">UVP</div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container--prevent-wrap">

                                        <div class="price--small">

                                            <div class="price__row">
                                                <div class="price__column--regular-price">
                                                    <div class="price-regular">
                                                        <div class="price-regular__current">
                                                            <div class="price-regular__current-price-inner">
                                                                <div class="price-regular__current-currency">CHF</div>
                                                            </div>
                                                            <div class="price-regular__current-price-inner">
                                                                <div class="price-regular__current-value">13.50</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>

                                </div>
                            </div>
                        </td>
                        <td class="responsive-table__td">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title">Preis</div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container--prevent-wrap">

                                        <div class="price--small">

                                            <div class="price__row">
                                                <div class="price__column--regular-price">
                                                    <div class="price-regular">
                                                        <div class="price-regular__current">
                                                            <div class="price-regular__current-price-inner">
                                                                <div class="price-regular__current-currency">CHF</div>
                                                            </div>
                                                            <div class="price-regular__current-price-inner">
                                                                <div class="price-regular__current-value">13.50</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>

                                </div>
                            </div>
                        </td>
                        <td class="responsive-table__td is-centered">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title">EB</div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container">
                                        <div class="checkbox--light is-initialized is-filled-in">
                                            <div class="checkbox__wrapper">
                                                <input class="checkbox__input" id="Artikel-2" type="checkbox" name="Artikel-2" value="1" data-checkbox-readonly="true" disabled checked />

                                                <label class="checkbox__label has-empty-label" for="Artikel-2">
                                                    <span>
                                                    </span>
                                                </label>
                                            </div>

                                        </div>
                                    </div>

                                </div>
                            </div>
                        </td>
                        <td class="responsive-table__td is-right-aligned">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title">Preis Total</div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container--prevent-wrap">

                                        <div class="price--small">

                                            <div class="price__row">
                                                <div class="price__column--regular-price">
                                                    <div class="price-regular">
                                                        <div class="price-regular__current">
                                                            <div class="price-regular__current-price-inner">
                                                                <div class="price-regular__current-currency">CHF</div>
                                                            </div>
                                                            <div class="price-regular__current-price-inner">
                                                                <div class="price-regular__current-value">67.50</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>

                                </div>
                            </div>
                        </td>
                        <td class="responsive-table__td is-right-aligned">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title">Anzahl</div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container">
                                        <div class="wysiwyg-content">
                                            <b>5</b>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </td>
                        <td class="responsive-table__td">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title">Status</div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container--prevent-wrap">
                                        <div class="status">
                                            <button class="status--violet">Storniert
                                                <span class="visually-hidden"></span>
                                            </button>
                                            <div class="status__tooltip" data-info-tooltip-content-html="">
                                                <div class="responsive-table -spacing-medium -not-responsive">
                                                    <div class="responsive-table__container--auto-scrollbar">
                                                        <table class="responsive-table__table" data-responsive-table-filter-context>
                                                            <colgroup>
                                                                <col style="">
                                                                <col style="">
                                                            </colgroup>
                                                            <thead>
                                                                <tr class="responsive-table__tr">
                                                                    <th class="responsive-table__th">
                                                                        Status
                                                                    </th>
                                                                    <th class="responsive-table__th is-right-aligned">
                                                                        Anzahl
                                                                    </th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <tr class="responsive-table__tr">
                                                                    <td class="responsive-table__td">
                                                                        <div class="responsive-table__mobile-container">
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__mobile-column-title">Status</div>
                                                                            </div>
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__td-inner-container">
                                                                                    <div class="wysiwyg-content">
                                                                                        <p>Bestellt</p>
                                                                                    </div>
                                                                                </div>

                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                    <td class="responsive-table__td is-right-aligned">
                                                                        <div class="responsive-table__mobile-container">
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__mobile-column-title">Anzahl</div>
                                                                            </div>
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__td-inner-container">
                                                                                    <div class="wysiwyg-content">
                                                                                        <p><strong>11</strong></p>
                                                                                    </div>
                                                                                </div>

                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                                <tr class="responsive-table__tr">
                                                                    <td class="responsive-table__td">
                                                                        <div class="responsive-table__mobile-container">
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__mobile-column-title">Status</div>
                                                                            </div>
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__td-inner-container">
                                                                                    <div class="wysiwyg-content">
                                                                                        <p>Geliefert</p>
                                                                                    </div>
                                                                                </div>

                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                    <td class="responsive-table__td is-right-aligned">
                                                                        <div class="responsive-table__mobile-container">
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__mobile-column-title">Anzahl</div>
                                                                            </div>
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__td-inner-container">
                                                                                    <div class="wysiwyg-content">
                                                                                        <p><strong>2</strong></p>
                                                                                    </div>
                                                                                </div>

                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                                <tr class="responsive-table__tr">
                                                                    <td class="responsive-table__td">
                                                                        <div class="responsive-table__mobile-container">
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__mobile-column-title">Status</div>
                                                                            </div>
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__td-inner-container">
                                                                                    <div class="wysiwyg-content">
                                                                                        <p>Offen</p>
                                                                                    </div>
                                                                                </div>

                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                    <td class="responsive-table__td is-right-aligned">
                                                                        <div class="responsive-table__mobile-container">
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__mobile-column-title">Anzahl</div>
                                                                            </div>
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__td-inner-container">
                                                                                    <div class="wysiwyg-content">
                                                                                        <p><strong>9</strong></p>
                                                                                    </div>
                                                                                </div>

                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                                <tr class="responsive-table__tr">
                                                                    <td class="responsive-table__td">
                                                                        <div class="responsive-table__mobile-container">
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__mobile-column-title">Status</div>
                                                                            </div>
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__td-inner-container">
                                                                                    <div class="wysiwyg-content">
                                                                                        <p>Storniert</p>
                                                                                    </div>
                                                                                </div>

                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                    <td class="responsive-table__td is-right-aligned">
                                                                        <div class="responsive-table__mobile-container">
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__mobile-column-title">Anzahl</div>
                                                                            </div>
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__td-inner-container">
                                                                                    <div class="wysiwyg-content">
                                                                                        <p><strong>1</strong></p>
                                                                                    </div>
                                                                                </div>

                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                                <tr class="responsive-table__tr">
                                                                    <td class="responsive-table__td">
                                                                        <div class="responsive-table__mobile-container">
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__mobile-column-title">Status</div>
                                                                            </div>
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__td-inner-container">
                                                                                    <div class="wysiwyg-content">
                                                                                        <p>Retouniert</p>
                                                                                    </div>
                                                                                </div>

                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                    <td class="responsive-table__td is-right-aligned">
                                                                        <div class="responsive-table__mobile-container">
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__mobile-column-title">Anzahl</div>
                                                                            </div>
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__td-inner-container">
                                                                                    <div class="wysiwyg-content">
                                                                                        <p><strong>3</strong></p>
                                                                                    </div>
                                                                                </div>

                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                                <tr class="responsive-table__tr">
                                                                    <td class="responsive-table__td">
                                                                        <div class="responsive-table__mobile-container">
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__mobile-column-title">Status</div>
                                                                            </div>
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__td-inner-container">
                                                                                    <div class="wysiwyg-content">
                                                                                        <p>In Retourenliste</p>
                                                                                    </div>
                                                                                </div>

                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                    <td class="responsive-table__td is-right-aligned">
                                                                        <div class="responsive-table__mobile-container">
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__mobile-column-title">Anzahl</div>
                                                                            </div>
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__td-inner-container">
                                                                                    <div class="wysiwyg-content">
                                                                                        <p><strong>1</strong></p>
                                                                                    </div>
                                                                                </div>

                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                                <tr class="responsive-table__tr" data-responsive-table-filter-no-match hidden>
                                                                    <td class="responsive-table__td" colspan="2">
                                                                        <div class="wysiwyg-content">
                                                                            <p class="responsive-table__no-match">Keine Ergebnisse gefunden</p>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </td>
                        <td class="responsive-table__td is-right-aligned">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title">Aktion</div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container">
                                        <div class="ellipsis-actions">
                                            <button type="button" class="ellipsis-actions__toggle">
                                                <span class="visually-hidden">More actions</span>
                                            </button>
                                            <div class="info-tooltip__html" data-info-tooltip-content-html>
                                                <ul class="ellipsis-actions__list">
                                                    <li class="ellipsis-actions__list-item">
                                                        <button type="button" class="ellipsis-actions__link">In den Warenkorb kopieren</button>
                                                    </li>
                                                    <li class="ellipsis-actions__list-item">
                                                        <button type="button" class="ellipsis-actions__link">In die Merkliste kopieren</button>
                                                    </li>
                                                    <li class="ellipsis-actions__list-item">
                                                        <button type="button" class="ellipsis-actions__link">Retournieren</button>
                                                    </li>
                                                    <li class="ellipsis-actions__list-item">
                                                        <button type="button" class="ellipsis-actions__link">Retourenliste aufrufen</button>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr class="responsive-table__tr">
                        <td class="responsive-table__td is-left is-select-td">
                            <div class="responsive-table__td-inner-container">
                                <div class="checkbox--light is-initialized is-filled-in">
                                    <div class="checkbox__wrapper">
                                        <input class="checkbox__input" id="multi-select-3" type="checkbox" name="&#x23;" value="1" data-multi-selectable="true" />

                                        <label class="checkbox__label has-empty-label" for="multi-select-3">
                                            <span>
                                            </span>
                                        </label>
                                    </div>

                                </div>
                            </div>

                        </td>
                        <td class="responsive-table__td is-right-aligned is-index-td">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title">Pos.</div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container">
                                        3
                                    </div>

                                </div>
                            </div>
                        </td>
                        <td class="responsive-table__td is-top-aligned">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title"></div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container">
                                        <a href="#" class="image-cell__image-link">
                                            <div class="image ">
                                                <picture>
                                                    <img src="/example-assets/images/responsive-table/thumb.png" class="image__img image-cell__image is-loading" alt="Alt" title="Title" srcset="/example-assets/images/responsive-table/thumb.png 1x, /example-assets/images/responsive-table/thumb.png 2x" onload="this.classList.remove('is-loading')" />
                                                </picture>
                                            </div>

                                        </a>

                                        <div class="image-cell__specials">
                                            <div class="specials">

                                                <div class="specials--medium-horizontally-vertically  ">
                                                    <button type="button" class="specials__toggle" data-info-tooltip-content="Sale" style="background-color: #e30a24;">
                                                        <span class="visually-hidden">Sale</span>
                                                        <span class="image ">
                                                            <picture>
                                                                <img src="/example-assets/images/specials/sale.svg" class="image__img specials__toggle-image is-loading" alt="" onload="this.classList.remove('is-loading')" />
                                                            </picture>
                                                        </span>

                                                    </button>
                                                    <button type="button" class="specials__toggle" data-info-tooltip-content="New" style="background-color: #333333;">
                                                        <span class="visually-hidden">New</span>
                                                        <span class="image ">
                                                            <picture>
                                                                <img src="/example-assets/images/specials/new.svg" class="image__img specials__toggle-image is-loading" alt="" onload="this.classList.remove('is-loading')" />
                                                            </picture>
                                                        </span>

                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </td>
                        <td class="responsive-table__td">
                            <div class="responsive-table__td-inner-container">
                                <h5 class="item-cell__title--with-attributes">
                                    <a href="" class="item-cell__title-link">Bosch Gepäckträgerakku PowerPack 500 Performance Anthrazit</a>
                                </h5>
                                <div class="attributes--small-bold">
                                    <ul class="attributes__list">
                                        <li class="attributes__list-item">
                                            <div class="attributes__name">Art.-Nr.</div>
                                            <div class="attributes__value " title="56.65563">
                                                56.65563
                                            </div>
                                        </li>
                                        <li class="attributes__list-item">
                                            <div class="attributes__name">Gruppe</div>
                                            <div class="attributes__value " title="Bosch eBike">
                                                Bosch eBike
                                            </div>
                                        </li>
                                    </ul>
                                </div>

                                <div class="text-field--light text-field-placeholder--light is-initialized">
                                    <div class="text-field__wrapper text-field-placeholder__wrapper ">
                                        <input class="text-field__input text-field-placeholder__input" id="comment-3" type="text" name="comment-3" disabled placeholder="Kommentar" />
                                        <label class="visually-hidden" for="comment-3">Kommentar
                                        </label>
                                    </div>

                                </div>
                                <div class="item-cell__value-list">
                                    <ul class="value-list">
                                        <li class="value-list__item--info">
                                            <div class="value-list__label">Vorgezogene Recyclinggebühren:</div>
                                            <div class="value-list__price">

                                                <div class="price--extra-small">

                                                    <div class="price__row">
                                                        <div class="price__column--regular-price">
                                                            <div class="price-regular">
                                                                <div class="price-regular__current">
                                                                    <div class="price-regular__current-price-inner">
                                                                        <div class="price-regular__current-currency">CHF</div>
                                                                    </div>
                                                                    <div class="price-regular__current-price-inner">
                                                                        <div class="price-regular__current-value">4.00</div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                            <div class="value-list__tooltip">
                                                <button type="button" class="info-tooltip__toggle--small" data-info-tooltip-content="Für das Recycling.">
                                                    <span class="visually-hidden">Information</span>
                                                </button>
                                            </div>
                                        </li>
                                        <li class="value-list__item--info">
                                            <div class="value-list__label">Transportzuschlag Gefahrengut:</div>
                                            <div class="value-list__price">

                                                <div class="price--extra-small">

                                                    <div class="price__row">
                                                        <div class="price__column--regular-price">
                                                            <div class="price-regular">
                                                                <div class="price-regular__current">
                                                                    <div class="price-regular__current-price-inner">
                                                                        <div class="price-regular__current-currency">CHF</div>
                                                                    </div>
                                                                    <div class="price-regular__current-price-inner">
                                                                        <div class="price-regular__current-value">35.00</div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                            <div class="value-list__tooltip">
                                                <button type="button" class="info-tooltip__toggle--small" data-info-tooltip-content="Für das Recycling.">
                                                    <span class="visually-hidden">Information</span>
                                                </button>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                        </td>
                        <td class="responsive-table__td">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title">Inhalt</div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container">
                                        <div class="wysiwyg-content">
                                            <p>20 Stück</p>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </td>
                        <td class="responsive-table__td is-centered">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title">Lager</div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container">
                                        <div class="stock">
                                            <button type="button" class="stock__toggle--available" data-info-tooltip-content="Verfügbar">
                                                <span class="visually-hidden">Verfügbar</span>
                                            </button>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </td>
                        <td class="responsive-table__td">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title">UVP</div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container--prevent-wrap">

                                        <div class="price--small">

                                            <div class="price__row">
                                                <div class="price__column--regular-price">
                                                    <div class="price-regular">
                                                        <div class="price-regular__current">
                                                            <div class="price-regular__current-price-inner">
                                                                <div class="price-regular__current-currency">CHF</div>
                                                            </div>
                                                            <div class="price-regular__current-price-inner">
                                                                <div class="price-regular__current-value">13.50</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>

                                </div>
                            </div>
                        </td>
                        <td class="responsive-table__td">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title">Preis</div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container--prevent-wrap">

                                        <div class="price--small">

                                            <div class="price__row">
                                                <div class="price__column--regular-price">
                                                    <div class="price-regular">
                                                        <div class="price-regular__current">
                                                            <div class="price-regular__current-price-inner">
                                                                <div class="price-regular__current-currency">CHF</div>
                                                            </div>
                                                            <div class="price-regular__current-price-inner">
                                                                <div class="price-regular__current-value">13.50</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>

                                </div>
                            </div>
                        </td>
                        <td class="responsive-table__td is-centered">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title">EB</div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container">
                                        <div class="checkbox--light is-initialized is-filled-in">
                                            <div class="checkbox__wrapper">
                                                <input class="checkbox__input" id="Artikel-3" type="checkbox" name="Artikel-3" value="1" data-checkbox-readonly="true" disabled />

                                                <label class="checkbox__label has-empty-label" for="Artikel-3">
                                                    <span>
                                                    </span>
                                                </label>
                                            </div>

                                        </div>
                                    </div>

                                </div>
                            </div>
                        </td>
                        <td class="responsive-table__td is-right-aligned">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title">Preis Total</div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container--prevent-wrap">

                                        <div class="price--small">

                                            <div class="price__row">
                                                <div class="price__column--regular-price">
                                                    <div class="price-regular">
                                                        <div class="price-regular__current">
                                                            <div class="price-regular__current-price-inner">
                                                                <div class="price-regular__current-currency">CHF</div>
                                                            </div>
                                                            <div class="price-regular__current-price-inner">
                                                                <div class="price-regular__current-value">67.50</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>

                                </div>
                            </div>
                        </td>
                        <td class="responsive-table__td is-right-aligned">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title">Anzahl</div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container">
                                        <div class="wysiwyg-content">
                                            <b>5</b>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </td>
                        <td class="responsive-table__td">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title">Status</div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container--prevent-wrap">
                                        <div class="status">
                                            <button class="status--grey">Offen
                                                <span class="visually-hidden"></span>
                                            </button>
                                            <div class="status__tooltip" data-info-tooltip-content-html="">
                                                <div class="responsive-table -spacing-medium -not-responsive">
                                                    <div class="responsive-table__container--auto-scrollbar">
                                                        <table class="responsive-table__table" data-responsive-table-filter-context>
                                                            <colgroup>
                                                                <col style="">
                                                                <col style="">
                                                            </colgroup>
                                                            <thead>
                                                                <tr class="responsive-table__tr">
                                                                    <th class="responsive-table__th">
                                                                        Status
                                                                    </th>
                                                                    <th class="responsive-table__th is-right-aligned">
                                                                        Anzahl
                                                                    </th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <tr class="responsive-table__tr">
                                                                    <td class="responsive-table__td">
                                                                        <div class="responsive-table__mobile-container">
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__mobile-column-title">Status</div>
                                                                            </div>
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__td-inner-container">
                                                                                    <div class="wysiwyg-content">
                                                                                        <p>Bestellt</p>
                                                                                    </div>
                                                                                </div>

                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                    <td class="responsive-table__td is-right-aligned">
                                                                        <div class="responsive-table__mobile-container">
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__mobile-column-title">Anzahl</div>
                                                                            </div>
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__td-inner-container">
                                                                                    <div class="wysiwyg-content">
                                                                                        <p><strong>11</strong></p>
                                                                                    </div>
                                                                                </div>

                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                                <tr class="responsive-table__tr">
                                                                    <td class="responsive-table__td">
                                                                        <div class="responsive-table__mobile-container">
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__mobile-column-title">Status</div>
                                                                            </div>
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__td-inner-container">
                                                                                    <div class="wysiwyg-content">
                                                                                        <p>Geliefert</p>
                                                                                    </div>
                                                                                </div>

                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                    <td class="responsive-table__td is-right-aligned">
                                                                        <div class="responsive-table__mobile-container">
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__mobile-column-title">Anzahl</div>
                                                                            </div>
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__td-inner-container">
                                                                                    <div class="wysiwyg-content">
                                                                                        <p><strong>2</strong></p>
                                                                                    </div>
                                                                                </div>

                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                                <tr class="responsive-table__tr">
                                                                    <td class="responsive-table__td">
                                                                        <div class="responsive-table__mobile-container">
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__mobile-column-title">Status</div>
                                                                            </div>
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__td-inner-container">
                                                                                    <div class="wysiwyg-content">
                                                                                        <p>Offen</p>
                                                                                    </div>
                                                                                </div>

                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                    <td class="responsive-table__td is-right-aligned">
                                                                        <div class="responsive-table__mobile-container">
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__mobile-column-title">Anzahl</div>
                                                                            </div>
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__td-inner-container">
                                                                                    <div class="wysiwyg-content">
                                                                                        <p><strong>9</strong></p>
                                                                                    </div>
                                                                                </div>

                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                                <tr class="responsive-table__tr">
                                                                    <td class="responsive-table__td">
                                                                        <div class="responsive-table__mobile-container">
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__mobile-column-title">Status</div>
                                                                            </div>
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__td-inner-container">
                                                                                    <div class="wysiwyg-content">
                                                                                        <p>Storniert</p>
                                                                                    </div>
                                                                                </div>

                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                    <td class="responsive-table__td is-right-aligned">
                                                                        <div class="responsive-table__mobile-container">
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__mobile-column-title">Anzahl</div>
                                                                            </div>
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__td-inner-container">
                                                                                    <div class="wysiwyg-content">
                                                                                        <p><strong>1</strong></p>
                                                                                    </div>
                                                                                </div>

                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                                <tr class="responsive-table__tr">
                                                                    <td class="responsive-table__td">
                                                                        <div class="responsive-table__mobile-container">
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__mobile-column-title">Status</div>
                                                                            </div>
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__td-inner-container">
                                                                                    <div class="wysiwyg-content">
                                                                                        <p>Retouniert</p>
                                                                                    </div>
                                                                                </div>

                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                    <td class="responsive-table__td is-right-aligned">
                                                                        <div class="responsive-table__mobile-container">
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__mobile-column-title">Anzahl</div>
                                                                            </div>
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__td-inner-container">
                                                                                    <div class="wysiwyg-content">
                                                                                        <p><strong>3</strong></p>
                                                                                    </div>
                                                                                </div>

                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                                <tr class="responsive-table__tr">
                                                                    <td class="responsive-table__td">
                                                                        <div class="responsive-table__mobile-container">
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__mobile-column-title">Status</div>
                                                                            </div>
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__td-inner-container">
                                                                                    <div class="wysiwyg-content">
                                                                                        <p>In Retourenliste</p>
                                                                                    </div>
                                                                                </div>

                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                    <td class="responsive-table__td is-right-aligned">
                                                                        <div class="responsive-table__mobile-container">
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__mobile-column-title">Anzahl</div>
                                                                            </div>
                                                                            <div class="responsive-table__mobile-column">
                                                                                <div class="responsive-table__td-inner-container">
                                                                                    <div class="wysiwyg-content">
                                                                                        <p><strong>1</strong></p>
                                                                                    </div>
                                                                                </div>

                                                                            </div>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                                <tr class="responsive-table__tr" data-responsive-table-filter-no-match hidden>
                                                                    <td class="responsive-table__td" colspan="2">
                                                                        <div class="wysiwyg-content">
                                                                            <p class="responsive-table__no-match">Keine Ergebnisse gefunden</p>
                                                                        </div>
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </td>
                        <td class="responsive-table__td is-right-aligned">
                            <div class="responsive-table__mobile-container">
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__mobile-column-title">Aktion</div>
                                </div>
                                <div class="responsive-table__mobile-column">
                                    <div class="responsive-table__td-inner-container">
                                        <div class="ellipsis-actions">
                                            <button type="button" class="ellipsis-actions__toggle">
                                                <span class="visually-hidden">More actions</span>
                                            </button>
                                            <div class="info-tooltip__html" data-info-tooltip-content-html>
                                                <ul class="ellipsis-actions__list">
                                                    <li class="ellipsis-actions__list-item">
                                                        <button type="button" class="ellipsis-actions__link">In den Warenkorb kopieren</button>
                                                    </li>
                                                    <li class="ellipsis-actions__list-item">
                                                        <button type="button" class="ellipsis-actions__link">In die Merkliste kopieren</button>
                                                    </li>
                                                    <li class="ellipsis-actions__list-item">
                                                        <button type="button" class="ellipsis-actions__link">Retournieren</button>
                                                    </li>
                                                    <li class="ellipsis-actions__list-item">
                                                        <button type="button" class="ellipsis-actions__link">Retourenliste aufrufen</button>
                                                    </li>
                                                    <li class="ellipsis-actions__list-item">
                                                        <button type="button" class="ellipsis-actions__link">Stornieren</button>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr class="responsive-table__tr">
                        <td class="responsive-table__td footer" colspan="7">
                            <div class="order-detail-table__statement-of-cost">
                                <div class="order-detail-table__back-button--bottom">
                                    <a href="#" class="button-icon--icon-text-large -icon-arrow-left">
                                        Zurück zu Bestellungen
                                    </a>
                                </div>
                                <div class="statement-of-cost">
                                    <ul class="statement-of-cost__list">
                                        <li class="statement-of-cost__list-item">
                                            <div class="statement-of-cost__title-container">
                                                <div class="statement-of-cost__title">Subtotal</div>
                                            </div>
                                            <div class="statement-of-cost__price">

                                                <div class="price--small">

                                                    <div class="price__row">
                                                        <div class="price__column--regular-price">
                                                            <div class="price-regular">
                                                                <div class="price-regular__current">
                                                                    <div class="price-regular__current-price-inner">
                                                                        <div class="price-regular__current-currency">CHF</div>
                                                                    </div>
                                                                    <div class="price-regular__current-price-inner">
                                                                        <div class="price-regular__current-value">202.50</div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                        </li>
                                        <li class="statement-of-cost__list-item">
                                            <div class="statement-of-cost__title-container">
                                                <div class="statement-of-cost__title">Rabatt</div>
                                            </div>
                                            <div class="statement-of-cost__price">

                                                <div class="price--small">

                                                    <div class="price__row">
                                                        <div class="price__column--regular-price">
                                                            <div class="price-regular">
                                                                <div class="price-regular__current">
                                                                    <div class="price-regular__current-price-inner">
                                                                        <div class="price-regular__current-currency">CHF</div>
                                                                    </div>
                                                                    <div class="price-regular__current-price-inner">
                                                                        <div class="price-regular__current-value">20.25</div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                        </li>
                                        <li class="statement-of-cost__list-item">
                                            <div class="statement-of-cost__title-container">
                                                <div class="statement-of-cost__title">Lieferkosten</div>
                                            </div>
                                            <div class="statement-of-cost__price">

                                                <div class="price--small">

                                                    <div class="price__row">
                                                        <div class="price__column--regular-price">
                                                            <div class="price-regular">
                                                                <div class="price-regular__current">
                                                                    <div class="price-regular__current-price-inner">
                                                                        <div class="price-regular__current-currency">CHF</div>
                                                                    </div>
                                                                    <div class="price-regular__current-price-inner">
                                                                        <div class="price-regular__current-value">9.00</div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                        </li>
                                        <li class="statement-of-cost__list-item">
                                            <div class="statement-of-cost__title-container">
                                                <div class="statement-of-cost__title">Vorgezogene Recyclinggebühr</div>
                                                <div class="statement-of-cost__tooltip">
                                                    <button type="button" class="info-tooltip__toggle--small" data-info-tooltip-content="Lorem ipsum dolor sit amet">
                                                        <span class="visually-hidden">Information</span>
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="statement-of-cost__price">

                                                <div class="price--small">

                                                    <div class="price__row">
                                                        <div class="price__column--regular-price">
                                                            <div class="price-regular">
                                                                <div class="price-regular__current">
                                                                    <div class="price-regular__current-price-inner">
                                                                        <div class="price-regular__current-currency">CHF</div>
                                                                    </div>
                                                                    <div class="price-regular__current-price-inner">
                                                                        <div class="price-regular__current-value">4.00</div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                        </li>
                                        <li class="statement-of-cost__list-item">
                                            <div class="statement-of-cost__title-container">
                                                <div class="statement-of-cost__title">Transportzuschlag Gefahrengut</div>
                                                <div class="statement-of-cost__tooltip">
                                                    <button type="button" class="info-tooltip__toggle--small" data-info-tooltip-content="Lorem ipsum dolor sit amet">
                                                        <span class="visually-hidden">Information</span>
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="statement-of-cost__price">

                                                <div class="price--small">

                                                    <div class="price__row">
                                                        <div class="price__column--regular-price">
                                                            <div class="price-regular">
                                                                <div class="price-regular__current">
                                                                    <div class="price-regular__current-price-inner">
                                                                        <div class="price-regular__current-currency">CHF</div>
                                                                    </div>
                                                                    <div class="price-regular__current-price-inner">
                                                                        <div class="price-regular__current-value">35.00</div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                        </li>
                                        <li class="statement-of-cost__list-item">
                                            <div class="statement-of-cost__title-container">
                                                <div class="statement-of-cost__title">MwSt. (7.7%)</div>
                                            </div>
                                            <div class="statement-of-cost__price">

                                                <div class="price--small">

                                                    <div class="price__row">
                                                        <div class="price__column--regular-price">
                                                            <div class="price-regular">
                                                                <div class="price-regular__current">
                                                                    <div class="price-regular__current-price-inner">
                                                                        <div class="price-regular__current-currency">CHF</div>
                                                                    </div>
                                                                    <div class="price-regular__current-price-inner">
                                                                        <div class="price-regular__current-value">17.70</div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                        </li>
                                        <li class="statement-of-cost__list-item--total">
                                            <div class="statement-of-cost__title-container">
                                                <div class="statement-of-cost__title--total">Gesamtsumme inkl. MwSt.</div>
                                            </div>
                                            <div class="statement-of-cost__price">

                                                <div class="price--large">

                                                    <div class="price__row">
                                                        <div class="price__column--regular-price">
                                                            <div class="price-regular">
                                                                <div class="price-regular__current">
                                                                    <div class="price-regular__current-price-inner">
                                                                        <div class="price-regular__current-currency">CHF</div>
                                                                    </div>
                                                                    <div class="price-regular__current-price-inner">
                                                                        <div class="price-regular__current-value">123'456.78</div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                        </td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr class="responsive-table__tr" data-responsive-table-filter-no-match hidden>
                        <td class="responsive-table__td" colspan="13">
                            <div class="wysiwyg-content">
                                <p class="responsive-table__no-match">Keine Ergebnisse gefunden</p>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
{% include '@SharedComponents/modules/b2b-account/components/order-detail-table/order-detail-table.twig' %}
{
  "footer": {
    "colspan": 7
  },
  "backButton": {
    "variant": "icon-text-large",
    "title": "Zurück zu Bestellungen",
    "icon": "arrow-left",
    "type": "a",
    "href": "#"
  },
  "tableHeader": {
    "heading": {
      "level": "4",
      "title": "Artikel",
      "counter": "3"
    }
  },
  "statementOfCost": {
    "list": [
      {
        "title": "Subtotal",
        "price": {
          "variant": "small",
          "labels": {
            "from": "ab",
            "instead": "statt"
          },
          "price": {
            "currency": "CHF",
            "price": "202.50"
          }
        }
      },
      {
        "title": "Rabatt",
        "price": {
          "variant": "small",
          "labels": {
            "from": "ab",
            "instead": "statt"
          },
          "price": {
            "currency": "CHF",
            "price": "20.25"
          }
        }
      },
      {
        "title": "Lieferkosten",
        "price": {
          "variant": "small",
          "labels": {
            "from": "ab",
            "instead": "statt"
          },
          "price": {
            "currency": "CHF",
            "price": "9.00"
          }
        }
      },
      {
        "title": "Vorgezogene Recyclinggebühr",
        "tooltip": {
          "variant": "small",
          "title": "Information",
          "content": "Lorem ipsum dolor sit amet"
        },
        "price": {
          "variant": "small",
          "labels": {
            "from": "ab",
            "instead": "statt"
          },
          "price": {
            "currency": "CHF",
            "price": "4.00"
          }
        }
      },
      {
        "title": "Transportzuschlag Gefahrengut",
        "tooltip": {
          "variant": "small",
          "title": "Information",
          "content": "Lorem ipsum dolor sit amet"
        },
        "price": {
          "variant": "small",
          "labels": {
            "from": "ab",
            "instead": "statt"
          },
          "price": {
            "currency": "CHF",
            "price": "35.00"
          }
        }
      },
      {
        "title": "MwSt. (7.7%)",
        "price": {
          "variant": "small",
          "labels": {
            "from": "ab",
            "instead": "statt"
          },
          "price": {
            "currency": "CHF",
            "price": "17.70"
          }
        }
      },
      {
        "title": "Gesamtsumme inkl. MwSt.",
        "total": "true",
        "price": {
          "variant": "large",
          "labels": {
            "from": "ab",
            "instead": "statt"
          },
          "price": {
            "currency": "CHF",
            "price": "123'456.78"
          }
        }
      }
    ]
  },
  "message": {
    "closeButton": {
      "variant": "icon-regular",
      "title": "Schliessen",
      "icon": "close",
      "type": "button",
      "role": "button",
      "name": "close-message",
      "value": "yes"
    },
    "variant": "error",
    "isHidden": false,
    "labels": {
      "info": "Information message",
      "error": "Error message",
      "warning": "Warning message",
      "success": "Success message"
    },
    "message": "Es ist leider ein Fehler aufgetreten.",
    "container": false
  },
  "table": {
    "multiselectDropdown": {
      "label": " ",
      "toggleMaxWidth": "170px",
      "thinToggleArrow": true
    },
    "noMatchMessage": "Keine Ergebnisse gefunden",
    "autoScrollbar": true,
    "search": {
      "searchField": {
        "variant": "light",
        "id": "order-detail-table-search",
        "name": "order-detail-table-search",
        "label": "Suche",
        "required": true,
        "value": "",
        "disabled": false,
        "error": "",
        "type": "text",
        "autocomplete": "",
        "attributes": {
          "data-responsive-table-search": "true"
        }
      },
      "offset": "none"
    },
    "firstColumnMobileFullHeight": true,
    "moveItemsDropdownContent": [
      {
        "name": "Auswahl in den Warenkorb kopieren"
      },
      {
        "name": "Auswahl in den Merkliste kopieren"
      },
      {
        "name": "Auswahl stornieren"
      },
      {
        "name": "Auswahl retournieren"
      }
    ],
    "columnDefs": [
      {
        "name": "multiSelect",
        "type": "checkbox",
        "path": "modules/shared/components/form-components/checkbox/checkbox",
        "checkbox": {
          "variant": "light",
          "id": "multi-selection-checkbox",
          "name": "#"
        }
      },
      {
        "label": "Pos.",
        "name": "position",
        "thClass": "is-centered is-index-column"
      },
      {
        "name": "image",
        "width": "72px"
      },
      {
        "label": "Artikel",
        "name": "item",
        "customResponsive": true
      },
      {
        "label": "Inhalt",
        "name": "contentQuantity"
      },
      {
        "label": "Lager",
        "name": "stock",
        "thClass": "is-centered"
      },
      {
        "label": "UVP",
        "name": "rrp",
        "preventWrap": true
      },
      {
        "label": "Preis",
        "name": "livePrice",
        "preventWrap": true
      },
      {
        "label": "EB",
        "name": "personalUse",
        "thClass": "is-centered"
      },
      {
        "label": "Preis Total",
        "name": "totalPrice",
        "preventWrap": true,
        "thClass": "is-right-aligned"
      },
      {
        "label": "Anzahl",
        "name": "quantity",
        "thClass": "is-right-aligned",
        "width": "90px"
      },
      {
        "label": "Status",
        "name": "status",
        "preventWrap": true,
        "width": "164px"
      },
      {
        "label": "Aktion",
        "name": "action",
        "width": "64px",
        "thClass": "is-hidden-on-desktop"
      }
    ],
    "rowData": [
      {
        "multiSelect": {
          "type": "template",
          "path": "modules/shared/components/form-components/checkbox/checkbox",
          "tdClass": "is-left is-select-td",
          "data": {
            "id": "multi-select-1",
            "variant": "light",
            "name": "#",
            "required": false,
            "disabled": false,
            "checked": false,
            "value": "1",
            "attributes": {
              "data-multi-selectable": "true"
            }
          }
        },
        "position": {
          "type": "text",
          "data": "1",
          "tdClass": "is-right-aligned is-index-td"
        },
        "image": {
          "type": "template",
          "path": "modules/shared-product/components/cell-components/image-cell/image-cell",
          "tdClass": "is-top-aligned",
          "data": {
            "href": "#",
            "image": {
              "src": "/example-assets/images/responsive-table/thumb.png",
              "src2x": "/example-assets/images/responsive-table/thumb.png",
              "alt": "Alt",
              "title": "Title"
            },
            "specials": {
              "variant": "medium-horizontally-vertically",
              "items": [
                {
                  "value": "Sale",
                  "color": "#e30a24",
                  "icon": "/example-assets/images/specials/sale.svg"
                },
                {
                  "value": "New",
                  "color": "#333333",
                  "icon": "/example-assets/images/specials/new.svg"
                }
              ]
            }
          }
        },
        "item": {
          "type": "template",
          "path": "modules/shared-product/components/cell-components/item-cell/item-cell",
          "data": {
            "heading": {
              "level": "5"
            },
            "title": "Bosch Gepäckträgerakku PowerPack 500 Performance Anthrazit",
            "attributes": {
              "variant": "small-bold",
              "attributes": [
                {
                  "type": "text",
                  "name": "Art.-Nr.",
                  "value": "56.65563"
                },
                {
                  "type": "text",
                  "name": "Gruppe",
                  "value": "Bosch eBike"
                }
              ]
            },
            "textField": {
              "variant": "light",
              "id": "comment-1",
              "name": "comment-1",
              "label": "Kommentar",
              "required": false,
              "value": "Für Oscar",
              "disabled": true,
              "type": "text",
              "autocomplete": "",
              "error": "",
              "helper": ""
            },
            "valueList": {
              "list": [
                {
                  "type": "info",
                  "label": "Vorgezogene Recyclinggebühren",
                  "price": {
                    "variant": "extra-small",
                    "labels": {
                      "from": "ab",
                      "instead": "statt"
                    },
                    "price": {
                      "currency": "CHF",
                      "price": "4.00",
                      "note": ""
                    }
                  },
                  "tooltip": {
                    "variant": "small",
                    "title": "Information",
                    "content": "Für das Recycling."
                  }
                }
              ]
            }
          }
        },
        "contentQuantity": {
          "type": "template",
          "path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
          "data": {
            "content": "<p>20 Stück</p>"
          }
        },
        "stock": {
          "type": "template",
          "path": "modules/shared-product/components/stock/stock",
          "tdClass": "is-centered",
          "data": {
            "status": "available",
            "tooltip": "Verfügbar"
          }
        },
        "status": {
          "type": "template",
          "path": "modules/shared-account/components/status/status",
          "data": {
            "tooltip": true,
            "include": "status--status-with-tooltip.tableContent",
            "variant": "amber",
            "label": "In Bearbeitung"
          }
        },
        "rrp": {
          "type": "template",
          "path": "modules/shared-product/components/price/price",
          "data": {
            "variant": "small",
            "labels": {
              "from": "ab",
              "instead": "statt"
            },
            "price": {
              "currency": "CHF",
              "price": "13.50"
            }
          }
        },
        "livePrice": {
          "type": "template",
          "path": "modules/shared-product/components/price/price",
          "data": {
            "variant": "small",
            "labels": {
              "from": "ab",
              "instead": "statt"
            },
            "price": {
              "currency": "CHF",
              "price": "13.50"
            }
          }
        },
        "totalPrice": {
          "type": "template",
          "path": "modules/shared-product/components/price/price",
          "tdClass": "is-right-aligned",
          "data": {
            "variant": "small",
            "labels": {
              "from": "ab",
              "instead": "statt"
            },
            "price": {
              "currency": "CHF",
              "price": "67.50"
            }
          }
        },
        "personalUse": {
          "type": "template",
          "path": "modules/shared/components/form-components/checkbox/checkbox",
          "tdClass": "is-centered",
          "data": {
            "id": "Artikel-1",
            "name": "Artikel-1",
            "variant": "light",
            "required": false,
            "disabled": true,
            "checked": false,
            "readOnly": true,
            "value": "1"
          }
        },
        "quantity": {
          "type": "template",
          "tdClass": "is-right-aligned",
          "path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
          "data": {
            "content": "<b>5</b>"
          }
        },
        "action": {
          "type": "template",
          "path": "modules/shared/components/ellipsis-actions/ellipsis-actions",
          "tdClass": "is-right-aligned",
          "data": {
            "toggle": "More actions",
            "list": [
              {
                "button": {
                  "title": "In den Warenkorb kopieren"
                }
              },
              {
                "button": {
                  "title": "In die Merkliste kopieren"
                }
              },
              {
                "button": {
                  "title": "Retournieren"
                }
              },
              {
                "button": {
                  "title": "Retourenliste aufrufen"
                }
              },
              {
                "button": {
                  "title": "Stornieren"
                }
              }
            ]
          }
        }
      },
      {
        "multiSelect": {
          "type": "template",
          "path": "modules/shared/components/form-components/checkbox/checkbox",
          "tdClass": "is-left is-select-td",
          "data": {
            "id": "multi-select-2",
            "variant": "light",
            "name": "#",
            "required": false,
            "disabled": false,
            "checked": false,
            "value": "1",
            "attributes": {
              "data-multi-selectable": "true"
            }
          }
        },
        "position": {
          "type": "text",
          "data": "2",
          "tdClass": "is-right-aligned is-index-td"
        },
        "image": {
          "type": "template",
          "path": "modules/shared-product/components/cell-components/image-cell/image-cell",
          "tdClass": "is-top-aligned",
          "data": {
            "href": "#",
            "image": {
              "src": "/example-assets/images/responsive-table/thumb.png",
              "src2x": "/example-assets/images/responsive-table/thumb.png",
              "alt": "Alt",
              "title": "Title"
            },
            "specials": {
              "variant": "medium-horizontally-vertically",
              "items": [
                {
                  "value": "Sale",
                  "color": "#e30a24",
                  "icon": "/example-assets/images/specials/sale.svg"
                },
                {
                  "value": "New",
                  "color": "#333333",
                  "icon": "/example-assets/images/specials/new.svg"
                }
              ]
            }
          }
        },
        "item": {
          "type": "template",
          "path": "modules/shared-product/components/cell-components/item-cell/item-cell",
          "data": {
            "heading": {
              "level": "5"
            },
            "title": "Bosch Gepäckträgerakku PowerPack 500 Performance Anthrazit",
            "attributes": {
              "variant": "small-bold",
              "attributes": [
                {
                  "type": "text",
                  "name": "Art.-Nr.",
                  "value": "56.65563"
                },
                {
                  "type": "text",
                  "name": "Gruppe",
                  "value": "Bosch eBike"
                }
              ]
            },
            "textField": {
              "variant": "light",
              "id": "comment-2",
              "name": "comment-2",
              "label": "Kommentar",
              "required": false,
              "value": "Geschenk",
              "disabled": true,
              "type": "text",
              "autocomplete": "",
              "error": "",
              "helper": ""
            },
            "valueList": {
              "list": [
                {
                  "type": "info",
                  "label": "Vorgezogene Recyclinggebühren",
                  "price": {
                    "variant": "extra-small",
                    "labels": {
                      "from": "ab",
                      "instead": "statt"
                    },
                    "price": {
                      "currency": "CHF",
                      "price": "4.00",
                      "note": ""
                    }
                  },
                  "tooltip": {
                    "variant": "small",
                    "title": "Information",
                    "content": "Für das Recycling."
                  }
                }
              ]
            }
          }
        },
        "contentQuantity": {
          "type": "template",
          "path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
          "data": {
            "content": "<p>20 Stück</p>"
          }
        },
        "stock": {
          "type": "template",
          "path": "modules/shared-product/components/stock/stock",
          "tdClass": "is-centered",
          "data": {
            "status": "available",
            "tooltip": "Verfügbar"
          }
        },
        "status": {
          "type": "template",
          "path": "modules/shared-account/components/status/status",
          "data": {
            "tooltip": true,
            "include": "status--status-with-tooltip.tableContent",
            "variant": "violet",
            "label": "Storniert"
          }
        },
        "rrp": {
          "type": "template",
          "path": "modules/shared-product/components/price/price",
          "data": {
            "variant": "small",
            "labels": {
              "from": "ab",
              "instead": "statt"
            },
            "price": {
              "currency": "CHF",
              "price": "13.50"
            }
          }
        },
        "livePrice": {
          "type": "template",
          "path": "modules/shared-product/components/price/price",
          "data": {
            "variant": "small",
            "labels": {
              "from": "ab",
              "instead": "statt"
            },
            "price": {
              "currency": "CHF",
              "price": "13.50"
            }
          }
        },
        "totalPrice": {
          "type": "template",
          "path": "modules/shared-product/components/price/price",
          "tdClass": "is-right-aligned",
          "data": {
            "variant": "small",
            "labels": {
              "from": "ab",
              "instead": "statt"
            },
            "price": {
              "currency": "CHF",
              "price": "67.50"
            }
          }
        },
        "personalUse": {
          "type": "template",
          "path": "modules/shared/components/form-components/checkbox/checkbox",
          "tdClass": "is-centered",
          "data": {
            "id": "Artikel-2",
            "name": "Artikel-2",
            "variant": "light",
            "required": false,
            "disabled": true,
            "checked": true,
            "readOnly": true,
            "value": "1"
          }
        },
        "quantity": {
          "type": "template",
          "tdClass": "is-right-aligned",
          "path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
          "data": {
            "content": "<b>5</b>"
          }
        },
        "action": {
          "type": "template",
          "path": "modules/shared/components/ellipsis-actions/ellipsis-actions",
          "tdClass": "is-right-aligned",
          "data": {
            "toggle": "More actions",
            "list": [
              {
                "button": {
                  "title": "In den Warenkorb kopieren"
                }
              },
              {
                "button": {
                  "title": "In die Merkliste kopieren"
                }
              },
              {
                "button": {
                  "title": "Retournieren"
                }
              },
              {
                "button": {
                  "title": "Retourenliste aufrufen"
                }
              }
            ]
          }
        }
      },
      {
        "multiSelect": {
          "type": "template",
          "path": "modules/shared/components/form-components/checkbox/checkbox",
          "tdClass": "is-left is-select-td",
          "data": {
            "id": "multi-select-3",
            "variant": "light",
            "name": "#",
            "required": false,
            "disabled": false,
            "checked": false,
            "value": "1",
            "attributes": {
              "data-multi-selectable": "true"
            }
          }
        },
        "position": {
          "type": "text",
          "data": "3",
          "tdClass": "is-right-aligned is-index-td"
        },
        "image": {
          "type": "template",
          "path": "modules/shared-product/components/cell-components/image-cell/image-cell",
          "tdClass": "is-top-aligned",
          "data": {
            "href": "#",
            "image": {
              "src": "/example-assets/images/responsive-table/thumb.png",
              "src2x": "/example-assets/images/responsive-table/thumb.png",
              "alt": "Alt",
              "title": "Title"
            },
            "specials": {
              "variant": "medium-horizontally-vertically",
              "items": [
                {
                  "value": "Sale",
                  "color": "#e30a24",
                  "icon": "/example-assets/images/specials/sale.svg"
                },
                {
                  "value": "New",
                  "color": "#333333",
                  "icon": "/example-assets/images/specials/new.svg"
                }
              ]
            }
          }
        },
        "item": {
          "type": "template",
          "path": "modules/shared-product/components/cell-components/item-cell/item-cell",
          "data": {
            "heading": {
              "level": "5"
            },
            "title": "Bosch Gepäckträgerakku PowerPack 500 Performance Anthrazit",
            "attributes": {
              "variant": "small-bold",
              "attributes": [
                {
                  "type": "text",
                  "name": "Art.-Nr.",
                  "value": "56.65563"
                },
                {
                  "type": "text",
                  "name": "Gruppe",
                  "value": "Bosch eBike"
                }
              ]
            },
            "textField": {
              "variant": "light",
              "id": "comment-3",
              "name": "comment-3",
              "label": "Kommentar",
              "required": false,
              "value": "",
              "disabled": true,
              "type": "text",
              "autocomplete": "",
              "error": "",
              "helper": ""
            },
            "valueList": {
              "list": [
                {
                  "type": "info",
                  "label": "Vorgezogene Recyclinggebühren",
                  "price": {
                    "variant": "extra-small",
                    "labels": {
                      "from": "ab",
                      "instead": "statt"
                    },
                    "price": {
                      "currency": "CHF",
                      "price": "4.00",
                      "note": ""
                    }
                  },
                  "tooltip": {
                    "variant": "small",
                    "title": "Information",
                    "content": "Für das Recycling."
                  }
                },
                {
                  "type": "info",
                  "label": "Transportzuschlag Gefahrengut",
                  "price": {
                    "variant": "extra-small",
                    "labels": {
                      "from": "ab",
                      "instead": "statt"
                    },
                    "price": {
                      "currency": "CHF",
                      "price": "35.00",
                      "note": ""
                    }
                  },
                  "tooltip": {
                    "variant": "small",
                    "title": "Information",
                    "content": "Für das Recycling."
                  }
                }
              ]
            }
          }
        },
        "contentQuantity": {
          "type": "template",
          "path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
          "data": {
            "content": "<p>20 Stück</p>"
          }
        },
        "stock": {
          "type": "template",
          "path": "modules/shared-product/components/stock/stock",
          "tdClass": "is-centered",
          "data": {
            "status": "available",
            "tooltip": "Verfügbar"
          }
        },
        "status": {
          "type": "template",
          "path": "modules/shared-account/components/status/status",
          "data": {
            "tooltip": true,
            "include": "status--status-with-tooltip.tableContent",
            "variant": "grey",
            "label": "Offen"
          }
        },
        "rrp": {
          "type": "template",
          "path": "modules/shared-product/components/price/price",
          "data": {
            "variant": "small",
            "labels": {
              "from": "ab",
              "instead": "statt"
            },
            "price": {
              "currency": "CHF",
              "price": "13.50"
            }
          }
        },
        "livePrice": {
          "type": "template",
          "path": "modules/shared-product/components/price/price",
          "data": {
            "variant": "small",
            "labels": {
              "from": "ab",
              "instead": "statt"
            },
            "price": {
              "currency": "CHF",
              "price": "13.50"
            }
          }
        },
        "totalPrice": {
          "type": "template",
          "path": "modules/shared-product/components/price/price",
          "tdClass": "is-right-aligned",
          "data": {
            "variant": "small",
            "labels": {
              "from": "ab",
              "instead": "statt"
            },
            "price": {
              "currency": "CHF",
              "price": "67.50"
            }
          }
        },
        "personalUse": {
          "type": "template",
          "path": "modules/shared/components/form-components/checkbox/checkbox",
          "tdClass": "is-centered",
          "data": {
            "id": "Artikel-3",
            "name": "Artikel-3",
            "variant": "light",
            "required": false,
            "disabled": true,
            "checked": false,
            "readOnly": true,
            "value": "1"
          }
        },
        "quantity": {
          "type": "template",
          "tdClass": "is-right-aligned",
          "path": "modules/shared/components/wysiwyg-content/wysiwyg-content",
          "data": {
            "content": "<b>5</b>"
          }
        },
        "action": {
          "type": "template",
          "path": "modules/shared/components/ellipsis-actions/ellipsis-actions",
          "tdClass": "is-right-aligned",
          "data": {
            "toggle": "More actions",
            "list": [
              {
                "button": {
                  "title": "In den Warenkorb kopieren"
                }
              },
              {
                "button": {
                  "title": "In die Merkliste kopieren"
                }
              },
              {
                "button": {
                  "title": "Retournieren"
                }
              },
              {
                "button": {
                  "title": "Retourenliste aufrufen"
                }
              },
              {
                "button": {
                  "title": "Stornieren"
                }
              }
            ]
          }
        }
      }
    ]
  }
}
  • Content:
    @import "~shared/base";
    @import "~cando-cx-components-library/components/modules/b2b-account/components/order-detail-table/order-detail-table";
  • URL: /components/raw/order-detail-table/order-detail-table.scss
  • Filesystem Path: src/components/modules/b2b-account/components/order-detail-table/order-detail-table.scss
  • Size: 143 Bytes

the options inside of the actions-tooltip can vary i.e. depending on if they can be cancelled