{% load i18n %}
{% load premailer %}

{% premailer "https://herocentral.de" %}
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="de" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <!--[if !mso]><!-->
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <!--<![endif]-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <title>RegioHelden</title>
        <style type="text/css">
            /* -------------------------------------
                    GLOBAL
            ------------------------------------- */

            * {
                margin: 0;
                padding: 0;
                letter-spacing: -0.3px;
            }

            * {
                font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
                /* SYSTEM FONT Stack - every system chooses the best font https://css-tricks.com/snippets/css/system-font-stack/ */
            }

            img {
                max-width: 100%;
            }

            .collapse {
                margin: 0;
                padding: 0;
            }

            body {
                -webkit-font-smoothing: antialiased;
                -webkit-text-size-adjust: none;
                width: 100%!important;
                height: 100%;
                color: #000;
            }

            /* -------------------------------------
                    ELEMENTS
            ------------------------------------- */

            a,
            a:link,
            a:hover,
            a:focus,
            a:active {
                color: #ff5f17;
                text-decoration: underline;
            }

            a:focus,
            a:active,
            a:hover {
                text-decoration: none;
            }

            a.fb {
                background-color: #3B5998!important;
            }

            a.tw {
                background-color: #1daced!important;
            }

            a.gp {
                background-color: #DB4A39!important;
            }

            a.ms {
                background-color: #000!important;
            }

            a.no-link,
            a.no-link:hover,
            a.no-link:active,
            a.no-link:focus {
                color: #000000;
                cursor: default;
                text-decoration: none;
            }

            .callout a {
                font-weight: bold;
                color: #2BA6CB;
            }

            .btn {
                text-decoration: none;
                color: #FFF;
                background-color: #666;
                padding: 10px 16px;
                font-weight: bold;
                margin-right: 10px;
                text-align: center;
                cursor: pointer;
                display: inline-block;
            }

            p.callout {
                padding: 15px;
                background-color: #ECF8FF;
                margin-bottom: 15px;
            }

            .social .soc-btn {
                padding: 3px 7px;
                font-size: 12px;
                margin-bottom: 10px;
                text-decoration: none;
                color: #FFF;
                font-weight: bold;
                display: block;
                text-align: center;
            }

            .sidebar .soc-btn {
                display: block;
                width: 100%;
            }

            table.no-spacing {
                border-spacing: 0;
            }

            .logo-som {
                max-width: 290px !important;
            }

            .logo-rh {
                max-width: 191px !important;
            }

            ul, ol {
                margin: 0;
                padding: 0;
            }

            ul li, ol li {
                margin-bottom:3px;
            }

            ol li {
                list-style: decimal inside;
            }

            ul li {
                list-style: disc inside;
                mso-special-format:bullet;
            }

            ul li.last, ol li.last {
                margin: 0;
            }

            /* -------------------------------------
                    HEADER
            ------------------------------------- */

            table.head-wrap {
                width: 100%;
                border-spacing: 0;
            }

            .header .container,
            .head-inner {
                display: block!important;
                max-width: 600px!important;
                margin: 0 auto!important;
                /* makes it centered */
                clear: both!important;
            }

            .header.container table td.label {
                padding: 15px;
                padding-left: 0px;
            }

            /* -------------------------------------
                    BODY
            ------------------------------------- */

            table.body-wrap {
                width: 100%;
                border-spacing: 0;
            }

            /* -------------------------------------
                    FOOTER
            ------------------------------------- */

            table.footer-wrap {
                width: 100%;
                clear: both!important;
                border-spacing: 0;
            }

            .footer-wrap .container td.content p {
                border-top: 1px solid rgb(215, 215, 215);
                padding-top: 15px;
            }

            .footer-wrap .container td.content p {
                font-size: 10px;
                font-weight: bold;
            }

            /* -------------------------------------
                    TYPOGRAPHY
            ------------------------------------- */

            h1,
            h2,
            h3,
            h4,
            h5,
            h6 {
                font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
                /* SYSTEM FONT Stack - every system chooses the best font https://css-tricks.com/snippets/css/system-font-stack/ */
                line-height: 1.1;
                margin-bottom: 12px;
                color: #ffffff;
                padding: 4px 15px 5px 15px;
                line-height: 26px;
                font-size: 23px;
                font-weight: 700;
                letter-spacing: -0.5px;
            }

            h1 small,
            h2 small,
            h3 small,
            h4 small,
            h5 small,
            h6 small {
                font-size: 15px;
                color: #000000;
                line-height: 0;
                text-transform: none;
            }

            small img {
                height: 15px;
                width: 17px;
                vertical-align: -2px;
                margin-right: 2px;
            }

            h1 {
                text-align: center;
                color: #eb5c20;
            }

            h5 {
                text-align: center;
                color: #ec5b07;
                font-weight: 700;
                font-size: 15px;
                line-height: 1.6;
                margin-top: 30px;
                letter-spacing: -0.1px;
            }

            h6 {
                padding: 0;
            }

            .collapse {
                margin: 0!important;
            }

            p,
            ul,
            ol {
                margin-bottom: 15px;
                font-weight: normal;
                font-size: 15px;
                line-height: 1.6;
            }

            p.lead {
                font-weight: 700;
                letter-spacing: -0.1px;
            }

            p.last {
                margin-bottom: 0px;
            }

            .grey-area {
                background-color: #f6f6f6;
            }

            .data-table {
                background-color: #080d33;
                text-align: left;
            }

            .data-table th {
                color: #ffffff;
            }

            .data-table th,
            .data-table td {
                padding: 5px 15px;
            }

            .data-table td {
                background-color: #ffffff;
                text-align: left;
            }

            .report-table {
                text-align: center;
            }

            .report-table td {
                vertical-align: top;
            }

            hr {
                border: 0;
                border-top: 1px solid #c7c7c7;
            }

            .spacer,
            .spacer tr,
            .spacer td {
                height: 0px;
                color: transparent;
            }

            .spacer td {
                padding-bottom: 12px;
            }

            .spacer-double,
            .spacer-double tr,
            .spacer-double td {
                height: 0px;
                color: transparent;
            }

            .spacer-double td {
                padding-bottom: 24px;
            }

            .spacer p,
            .spacer-double p {
                color: #fff;
                color: transparent;
                margin: 0;
                padding: 0;
            }

            /* -------------------------------------
                    HEADLINES
            ------------------------------------- */

            .product-headline,
            .orange-headline,
            .warning-headline,
            .headline {
                width: 600px;
            }

            .product-icon {
                width: 45px;
                max-height: 10px;
            }

            .orange-icon {
                width: 70px;
                max-height: 10px;
                text-align: right;
            }

            .warning-icon {
                width: 25px;
                max-height: 10px;
            }

            .product-icon-img {
                vertical-align: 8px;
                border-radius: 50%;
            }

            .headline .name,
            .section-headline {
                padding: 4px 0 5px;
                color: #080d33;
                line-height: 26px;
                font-size: 23px;
                letter-spacing: -0.5px;
                font-weight: 700;
            }

            .headline .name {
                padding: 4px 0 5px 0;
            }

            .orange-headline {
                width: 600px;
                background-color: #eb5c20;
            }

            .orange-headline tr {
                background-color: #eb5c20;
            }

            .orange-name {
                padding: 9px 7px 11px 0;
                color: #fff;
            }

            .orange-name .lead {
                line-height: 26px;
                font-size: 23px;
            }

            .warning-name {
                font-size: 15px;
                color: #000000;
                font-weight: 700;
            }

            .callout-box {
                border-top: 2px solid #d1d5d6;
                border-bottom: 2px solid #d1d5d6;
            }

            .callout-icon,
            .callout-name {
                width: 35%;
                text-align: right;
                padding: 24px 12px;
            }

            .callout-name {
                width: 65%;
                min-width: 150px;
                text-align: left;
            }


            /* -------------------------------------
                    SIDEBAR
            ------------------------------------- */

            ul.sidebar {
                background: #ebebeb;
                display: block;
                list-style-type: none;
            }

            ul.sidebar li {
                display: block;
                margin: 0;
            }

            ul.sidebar li a {
                text-decoration: none;
                color: #666;
                padding: 10px 16px;
                margin-right: 10px;
                cursor: pointer;
                border-bottom: 1px solid #777777;
                border-top: 1px solid #FFFFFF;
                display: block;
                margin: 0;
            }

            ul.sidebar li a.last {
                border-bottom-width: 0px;
            }

            ul.sidebar li a h1,
            ul.sidebar li a h2,
            ul.sidebar li a h3,
            ul.sidebar li a h4,
            ul.sidebar li a h5,
            ul.sidebar li a h6,
            ul.sidebar li a p {
                margin-bottom: 0!important;
            }

            /* ---------------------------------------------------
                    RESPONSIVENESS
                    Nuke it from orbit. It's the only way to be sure.
            ------------------------------------------------------ */

            /* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */

            .container {
                display: block!important;
                max-width: 600px!important;
                margin: 0 auto!important;
                /* makes it centered */
                clear: both!important;
            }

            /* This should also be a block element, so that it will fill 100% of the .container */

            .content {
                padding: 0;
                max-width: 600px;
                margin: 0 auto;
                display: block;
            }

            /* Let's make sure tables in the content area are 100% wide */

            .content table {
                width: 100%;
            }

            /* Odds and ends */

            .column {
                width: 300px;
                float: left;
            }

            .column-wrap {
                padding: 0!important;
                margin: 0 auto;
                max-width: 600px!important;
            }

            .column table {
                width: 100%;
            }

            .social .column {
                width: 140px;
                min-width: 140px;
                float: left;
                border-right: 1px solid #e2e2e2;
                padding-right: 0px;
                padding-left: 20px;
                padding-top: 0;
                padding-bottom: 0;
            }

            .social .column.ceo {
                width: 162px;
                min-width: 162px;
            }

            .social .column.last {
                width: 114px;
                min-width: 114px;
                padding-right: 0;
                border-right: 0;
            }

            .social .column p {
                font-size: 10px;
                color: #878787;
            }

            .social .column a {
                color: #878787 !important;
            }

            .footer-wrap {
                font-size: 12px;
                color: #878787;
            }

            .footer-wrap td {
                border-right: 1px solid #e2e2e2;
                padding-right: 22px;
                padding-left: 22px;
            }

            .footer-wrap td.last {
                border-right: 0;
            }

            /* Be sure to place a .clear element after each set of columns, just to be safe */

            .clear {
                display: block;
                clear: both;
            }

            pre {
                overflow: auto;
                white-space: pre-wrap;
            }

            /* ---------------------------------------------------
                    BUTTONS
            ------------------------------------------------------ */

            table.button {
                width: auto;
                margin: 0 0 16px;
            }

            table.button table td {
                text-align: left;
                color: #fefefe;
                background: #ec5b07;
                border: 0px solid #ec5b07
            }

            table.button table td a {
                font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
                /* SYSTEM FONT Stack - every system chooses the best font https://css-tricks.com/snippets/css/system-font-stack/ */
                font-size: 16px;
                font-weight: 700;
                color: #fefefe;
                text-decoration: none;
                display: inline-block;
                padding: 8px 16px;
                border: 0 solid #ec5b07;
                border-radius: 3px
            }

            table.button.radius table td {
                border-radius: 3px;
                border: none
            }

            table.button.rounded table td {
                border-radius: 500px;
                border: none
            }

            table.button.large:active table tr td a,
            table.button.large:hover table tr td a,
            table.button.large table tr td a:visited,
            table.button.small:active table tr td a,
            table.button.small:hover table tr td a,
            table.button.small table tr td a:visited,
            table.button.tiny:active table tr td a,
            table.button.tiny:hover table tr td a,
            table.button.tiny table tr td a:visited,
            table.button:active table tr td a,
            table.button:hover table tr td a,
            table.button table tr td a:visited {
                color: #fefefe
            }

            table.button.tiny table a,
            table.button.tiny table td {
                padding: 4px 8px
            }

            table.button.tiny table a {
                font-size: 10px;
                font-weight: 400
            }

            table.button.small table a,
            table.button.small table td {
                padding: 5px 10px;
                font-size: 12px
            }

            table.button.large table a {
                padding: 10px 20px;
                font-size: 20px
            }

            table.button.expand,table.button.expanded {
                width: 100%!important
            }

            table.button.expanded table,
            table.button.expand table {
                width: 100%
            }

            table.button.expanded table a,
            table.button.expand table a {
                text-align: center;
                width: 100%;
                padding-left: 0;
                padding-right: 0
            }

            table.button.expand center,
            table.button.expanded center {
                min-width: 0
            }

            table.button:active table td,
            table.button:hover table td,
            table.button:visited table td {
                background: #ff824a;
                color: #fefefe
            }

            table.button:active table a,
            table.button:hover table a,
            table.button:visited table a {
                border: 0 solid #ff824a
            }

            table.button.secondary table td {
                background: #777
            }

            table.button.secondary table a,table.button.secondary table td {
                color: #fefefe;
                border: 0 solid #777
            }

            table.button.secondary:hover table td {
                background: #919191;
                color: #fefefe
            }

            table.button.secondary:hover table a {
                border: 0 solid #919191
            }

            table.button.secondary:active table td a,
            table.button.secondary:hover table td a,
            table.button.secondary table td a:visited {
                color: #fefefe
            }

            table.button.success table td {
                background: #3adb76;
                border: 0 solid #3adb76
            }

            table.button.success table a {
                border: 0 solid #3adb76
            }

            table.button.success:hover table td {
                background: #23bf5d
            }

            table.button.success:hover table a {
                border: 0 solid #23bf5d
            }

            table.button.alert table td {
                background: #ec5840;
                border: 0 solid #ec5840
            }

            table.button.alert table a {
                border: 0 solid #ec5840
            }

            table.button.alert:hover table td {
                background: #e23317
            }

            table.button.alert:hover table a {
                border: 0 solid #e23317
            }

            table.button.warning table td {
                background: #ffae00;
                border: 0 solid #ffae00
            }

            table.button.warning table a {
                border: 0 solid #ffae00
            }

            table.button.warning:hover table td {
                background: #cc8b00
            }

            table.button.warning:hover table a {
                border: 0 solid #cc8b00
            }

            table.button.success table a {
                border: 0 solid #3adb76
            }

            table.button.success:hover table td {
                background: #23bf5d
            }

            table.button.success:hover table a {
                border: 0 solid #23bf5d
            }

            table.button.alert table td {
                background: #ec5840;
                border: 0 solid #ec5840
            }

            table.button.alert table a {
                border: 0 solid #ec5840
            }

            table.button.alert:hover table td {
                background: #e23317
            }

            table.button.alert:hover table a {
                border: 0 solid #e23317
            }

            table.button.warning table td {
                background: #ffae00;
                border: 0 solid #ffae00
            }

            table.button.warning table a {
                border: 0 solid #ffae00
            }

            table.button.warning:hover table td {
                background: #cc8b00
            }

            table.button.warning:hover table a {
                border: 0 solid #cc8b00
            }

            /* -------------------------------------------
                    PHONE
                    For clients that support media queries.
                    Nothing fancy.
            -------------------------------------------- */

            @media only screen and (max-width: 550px) {

                a[class="btn"] {
                    display: block!important;
                    margin-bottom: 10px!important;
                    background-image: none!important;
                    margin-right: 0!important;
                }

                div[class="column"] {
                    width: auto!important;
                    float: none!important;
                }

                table.social div[class="column"] {
                    width: auto!important;
                }

                .desktop-only {
                    display: none;
                }

                .logo-img {
                    width: 100%;
                }

                td.logo {
                    text-align: center;
                    width: 100%;
                }

                .social .column,
                .social .column.first,
                .social .column.ceo,
                .social .column.register,
                .social .column.last {
                    min-width: 50% !important;
                    width: 50% !important;
                    padding-top: 10px !important;
                    padding-bottom: 10px !important;
                }

                .social .column.first,
                .social .column.ceo {
                    text-align: right !important;
                    padding-right: 20px !important;
                }

                .social .column.register {
                    border-right: 0 !important;
                }
            }
        </style>

        {% block extra_css %}{% endblock extra_css %}
    </head>

    <body bgcolor="#FFFFFF">
        <table class="body-wrap">
            <tr>
                <td></td>
                <td class="container" bgcolor="#ffffff" width="600">
                    <div class="content">
                        <table class="no-spacing">
                            <tr>
                                <td>
                                    {% block emailbody %}{% endblock %}
                                </td>
                            </tr>
                        </table>
                    </div>
                </td>
                <td></td>
            </tr>
        </table>
    </body>
    </html>

{% endpremailer %}
