<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
    xmlns="http://www.w3.org/1999/xhtml"
    lang="en"
    xml:lang="en"
>
    <head>
        <meta
            http-equiv="Content-Type"
            content="text/html; charset=utf-8"
        />
        <meta
            name="viewport"
            content="width=device-width"
        />

        <style type="text/css">
            @media only screen {
                html {
                    background: #fff;
                    min-height: 100%;
                }
            }

            body,
            table,
            tr,
            td,
            th,
            div,
            h1,
            p,
            img {
                margin: 0;
                margin: 0;
                padding: 0;
            }

            body {
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                min-width: 100%;
                -ms-text-size-adjust: 100%;
                -webkit-text-size-adjust: 100%;
                width: 100%;
            }

            table {
                border-collapse: collapse;
                border-spacing: 0;
                width: 100%;
            }

            td,
            th {
                border-collapse: collapse;
            }

            h1,
            p,
            a,
            span,
            img {
                color: #f3eed9;
                font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
                    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
                font-size: 14px;
                font-weight: 400;
                -moz-hyphens: auto;
                -webkit-hyphens: auto;
                hyphens: auto;
                line-height: 1.57143;
                word-wrap: break-word;
            }

            h1 {
                font-size: 28px;
                font-weight: 500;
                line-height: 1.21429;
            }

            h1:not(:last-child),
            p:not(:last-child) {
                margin: 0 0 32px;
                margin: 0 0 32px;
            }

            a {
                color: #d1e7e0;
                display: inline-block;
                text-decoration: none;
            }

            strong {
                font-weight: 600;
            }

            img {
                border: none;
                display: block;
                outline: 0;
                text-align: center;
                max-width: 100%;
                max-height: 100%;
            }

            hr {
                border: none;
                border-bottom: 1px solid #eceaea;
            }

            .preheader {
                display: none;
                font-size: 1px;
                line-height: 1px;
                max-height: 0;
                max-width: 0;
                mso-hide: all;
                opacity: 0;
                overflow: hidden;
                visibility: hidden;
            }

            .body {
                background: #0d0c0c;
                height: 100%;
            }

            .body > tr > td {
                text-align: center;
            }

            .container,
            .column {
                margin: 0 auto;
                margin: 0 auto;
                width: 544px;
            }

            .column td,
            .column th {
                text-align: left;
                vertical-align: top;
            }

            .column--md-9 {
                width: 75%;
            }

            .column--md-3 {
                width: 25%;
            }

            .expander {
                padding: 0 !important;
                visibility: hidden;
                width: 0;
            }

            .spacer--16 td {
                font-size: 16px;
                height: 16px;
                line-height: 16px;
            }

            .spacer--24 td {
                font-size: 24px;
                height: 24px;
                line-height: 24px;
            }

            .spacer--32 td {
                font-size: 32px;
                height: 32px;
                line-height: 32px;
            }

            .spacer--40 td {
                font-size: 40px;
                height: 40px;
                line-height: 40px;
            }

            .delimiter th {
                vertical-align: middle;
            }

            .delimiter__image,
            .delimiter__image-block {
                width: 48px;
            }

            .logo td {
                padding: 24px 0;
            }

            .logo a {
                color: #f3eed9;
                display: block;
                text-align: center;
            }

            .logo img {
                color: #f3eed9;
                text-decoration: none;
                margin: 0 auto;
            }

            .logo span {
                color: #f3eed9;
                font-size: 36px;
                font-weight: 600;
            }

            .store p {
                margin: 0;
                margin: 0;
            }

            .store a {
                color: #d1e7e0;
                font-size: 12px;
            }

            .store-button a {
                border: 1px solid #d1e7e0;
                border-radius: 4px;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                color: #d1e7e0;
                padding: 3px 15px;
                text-align: center;
                white-space: nowrap;
                width: 100%;
            }

            @media only screen and (max-width: 599px) {
                img {
                    height: auto !important;
                    width: auto !important;
                }

                .container {
                    width: 100% !important;
                }

                .column {
                    -moz-box-sizing: border-box;
                    -webkit-box-sizing: border-box;
                    box-sizing: border-box;
                    height: auto !important;
                    padding-left: 15px !important;
                    padding-right: 15px !important;
                }

                .column--xs-12 {
                    display: inline-block !important;
                    width: 100% !important;
                }

                .delimiter__image {
                    width: 48px !important;
                }

                .store th {
                    padding-bottom: 16px !important;
                }

                .store p {
                    text-align: center !important;
                }

                .store-button a {
                    margin-left: auto !important;
                    margin-right: auto !important;
                }
            }
        </style>
    </head>

    <body>
        <span class="preheader"></span>

        <table class="body">
            <tr>
                <td>
                    <table class="spacer spacer--16">
                        <tr>
                            <td>&nbsp;</td>
                        </tr>
                    </table>

                    <table class="container">
                        <tr>
                            <td>
                                <table class="row">
                                    <tr>
                                        <th class="column">
                                            <table class="logo">
                                                <tr>
                                                    <th>
                                                        <a
                                                            href="{{store.frontendBase}}"
                                                            target="_blank"
                                                        >
                                                            <img
                                                                src="{{store.logo}}"
                                                                alt="BinKrassDuFass"
                                                            />
                                                        </a>
                                                    </th>

                                                    <th class="expander"></th>
                                                </tr>
                                            </table>
                                        </th>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>

                    <table class="spacer spacer--40">
                        <tr>
                            <td>&nbsp;</td>
                        </tr>
                    </table>

                    <table class="container">
                        <tr>
                            <td>
                                <table class="row">
                                    <tr>
                                        <th class="column">
                                            <table>
                                                <tr>
                                                    <th>
                                                        <h1>Deine Widerrufsanfrage wurde zurückgezogen.</h1>

                                                        <p>
                                                            Hallo, deine Widerrufsanfrage wurde erfolgreich
                                                            zurückgezogen.
                                                        </p>
                                                    </th>

                                                    <th class="expander"></th>
                                                </tr>
                                            </table>
                                        </th>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>

                    <table class="spacer spacer--40">
                        <tr>
                            <td>&nbsp;</td>
                        </tr>
                    </table>

                    <table class="container">
                        <tr>
                            <td>
                                <table class="row">
                                    <tr>
                                        <th class="column">
                                            <table>
                                                <tr>
                                                    <th>
                                                        <table class="delimiter">
                                                            <tr>
                                                                <th>
                                                                    <hr />
                                                                </th>

                                                                <th>
                                                                    <hr />
                                                                </th>
                                                            </tr>
                                                        </table>
                                                    </th>

                                                    <th class="expander"></th>
                                                </tr>
                                            </table>
                                        </th>
                                    </tr>
                                </table>

                                <table class="spacer spacer--24">
                                    <tr>
                                        <td>&nbsp;</td>
                                    </tr>
                                </table>

                                <table class="row">
                                    <tr>
                                        <th class="column column--md-9 column--xs-12">
                                            <table class="store">
                                                <tr>
                                                    <th>
                                                        <p>
                                                            <strong>BinKrassDuFass</strong>
                                                        </p>

                                                        <p>
                                                            <a
                                                                href="{{store.frontendBase}}"
                                                                target="_blank"
                                                                >{{store.frontendBase}}</a
                                                            >
                                                        </p>
                                                    </th>

                                                    <th class="expander"></th>
                                                </tr>
                                            </table>
                                        </th>

                                        <th class="column column--md-3 column--xs-12">
                                            <table class="store-button">
                                                <tr>
                                                    <th>
                                                        <a href="{{store.frontendBase}}">
                                                            <strong>Shoppen</strong>
                                                        </a>
                                                    </th>

                                                    <th class="expander"></th>
                                                </tr>
                                            </table>
                                        </th>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>

                    <table class="spacer spacer--16">
                        <tr>
                            <td>&nbsp;</td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>

        <!-- prevent Gmail on iOS font size manipulation -->
        <div style="display: none; white-space: nowrap; font: 15px courier; line-height: 0"></div>
    </body>
</html>
