index.html

---
layout: default
---

<div class="container-fluid h-100">
    <div class="row h-100">
        <!-- Left side -->
        <div id="left-side" class="col-lg-12 col-xl-6 background-primary pattern">
            <div class="container d-flex flex-column h-100 py-5 px-2 px-lg-5 overflow-auto">
                <div class="row mb-4 mb-lg-5">
                    <div class="col-12">
                        <div class="navbar navbar-expand-xl justify-content-between align-items-center">
                            <div>
                                <a href="{{ site.url }}{{ site.baseurl | replace:'/','' }}">
                                    <img src="{{ site.baseurl_root }}/assets/images/wahlbrief.svg" alt="Mehr Demokratie logo" width="200px">
                                </a>
                            </div>

                            <div class="d-flex d-lg-none align-items-center justify-content-between">
                                <div class="dropdown">
                                    <button class="dropdown-toggle top-item" type="button" id="dropdownMenu3"
                                        data-bs-toggle="dropdown" aria-expanded="false">
                                        <i class="fas fa-globe me-1"></i>
                                        {% for lang in site.languages %}
                                        {% assign lang_short = site.data[lang].l10n.lang_short %}
                                        {% if lang == site.lang %}
                                        {{ lang_short }}
                                        {% endif %}
                                        {% endfor %}
                                    </button>
                                    <ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
                                        {% for lang in site.languages %}
                                        {% assign lang_name = site.data[lang].l10n.lang_name %}
                                        {% if lang == site.default_lang %}
                                        <li><a class="dropdown-item" href="{{ page.url }}">{{ lang_name }}</a></li>
                                        {% else %}
                                        <li><a class="dropdown-item" href="/{{ lang }}{{ page.url }}">{{ lang_name
                                                }}</a></li>
                                        {% endif %}
                                        {% endfor %}
                                    </ul>
                                </div>
                            </div>

                            <div class="d-lg-block d-none">
                                <div class="dropdown">
                                    <button class="dropdown-toggle" type="button" id="dropdownMenu" data-bs-toggle="dropdown"
                                        aria-expanded="false">
                                        <i class="fas fa-globe me-1"></i>
                                        {% for lang in site.languages %}
                                        {% assign lang_name = site.data[lang].l10n.lang_name %}
                                        {% if lang == site.lang %}
                                        {{ lang_name }}
                                        {% endif %}
                                        {% endfor %}
                                    </button>
                                    <ul class="dropdown-menu" aria-labelledby="dropdownMenu">
                                        {% for lang in site.languages %}
                                        {% assign lang_name = site.data[lang].l10n.lang_name %}
                                        {% if lang == site.default_lang %}
                                        <li><a class="dropdown-item" href="{{ page.url | replace:'index.html','' }}">{{ lang_name }}</a></li>
                                        {% else %}
                                        <li><a class="dropdown-item" href="/{{ lang }}{{ page.url | replace:'index.html','' }}">{{ lang_name
                                                }}</a></li>
                                        {% endif %}
                                        {% endfor %}
                                    </ul>
                                </div>
                            </div>

                            <div class="d-lg-none">
                                <button class="navbar-toggler" onclick="openNav()"><img
                                        src="{{ site.baseurl_root }}/assets/images/burger.svg"></button>
                                {% include nav-mobile.html %}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">

                    <!-- Intro section -->
                    <div id="intro" class="col-12">
                        <h1>{% t left.title %}</h1>
                        <p class="subtitle">{% t left.subtitle %}</p>
                    </div>

                    <!-- Big letter preview -->
                    <div id="bigletter" class="col-12 letter p-5">
                        <h4 class="fw-bold mb-4">{% t left.preview %}</h4>
                        <p>{% t right.letter.title %}</p>
                        <p class="mb-0">
                            {% t right.letter.name %}: <span class="fw-bold" id="name"></span><br />
                            {% t right.letter.surname %}: <span class="fw-bold" id="surname"></span><br />
                            {% t right.letter.birthday %}:
                            <span class="fw-bold" id="birthdate"></span><span class="fw-bold"
                                id="birthmonth"></span><span class="fw-bold" id="birthyear"></span><br />
                            {% t right.letter.address %}:<br />
                            <span class="fw-bold" id="street"></span><br data-br="street" style="display: none;" />
                            <span class="fw-bold" id="zip"></span>
                            <span class="fw-bold" id="city"></span><br data-br="zip" style="display: none;" /><br />
                        </p>

                        <p id="ogaddress">{% t right.letter.sendtomine %}</p>

                        <p class="mb-0" id="newaddress">{% t right.letter.sendalternative %}<br />

                            <span class="fw-bold" id="newname"></span>
                            <span class="fw-bold" id="newsurname"></span>
                            <br data-br="newsurname" style="display: none;" />
                            <span class="fw-bold" id="address"></span><br data-br="address" style="display: none;" />
                            <span class="fw-bold" id="newstreet"></span><br data-br="newstreet"
                                style="display: none;" />
                            <span class="fw-bold" id="newzip"></span>
                            <span class="fw-bold" id="newcity"></span><br data-br="newzip"
                                style="display: none;" /><br />

                        </p>

                        <p class="mb-0">{% t right.letter.regards %}<br />
                            <span class="fw-bold" id="id-name"></span>
                            <span class="fw-bold" id="id-surname"></span>
                            <span id="id-newname"></span>
                            <span id="id-newsurname"></span>
                            <span id="id-street"></span>
                            <span id="id-newstreet"></span>
                            <span id="id-address"></span>
                            <span id="id-zip"></span>
                            <span id="id-newzip"></span>
                            <span id="id-city"></span>
                            <span id="id-newcity"></span>
                        </p>
                    </div>

                    <!-- Mobile view step 2 -->
                    <div id="address-mobile">
                        <div class="d-flex mb-3 justify-content-between align-items-center">
                            <button class="btn back-small" onclick="backtofirstpage();">{% t right.back %}</button>
                            <h4 class="fw-bold">2/3</h4>
                        </div>
                        <h2>{% t right.residence %}</h2>
                        <p>{% t right.optional %}</p>
                        <div class="background-white p-4">
                            <h4 id="muniname" class="fw-bold mb-0"></h4>
                            <p id="muniemail" class="mb-0 me-1 d-inline-block"></p>
                            <button class="btn copy p-0 d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top"
                                title="{% t right.message.copied %}" data-clipboard-target="#muniemail">
                                <i class="far fa-copy"></i>
                            </button>
                        </div>
                    </div>

                    <!-- CTA/Share outro -->
                    <div id="outro" class="col-12 outro mb-5">
                        <h1>{% t left.share %}</h1>
                        <p class="mb-4">{% t left.description %}</p>

                        <a class="copy" data-clipboard-text="{% t right.sharing.copy %}" href="#"
                            onclick="event.preventDefault();" data-bs-placement="top" data-bs-toggle="tooltip"
                            title="{% t right.message.sharecopy %}"><i class="far fa-copy"></i></a>
                        <a
                            href="mailto:?subject={% t right.sharing.email.subject %}&amp;body={% t right.sharing.email.body %}"><i
                                class="fas fa-envelope"></i></a>
                        <a href="https://facebook.com/sharer/sharer.php?u={{ site.url }}" target="_blank"
                            rel="noreferrer nopener"><i class="fa-brands fa-facebook"></i></a>
                        <a href="https://x.com/intent/tweet/?text={% t right.sharing.twitter %}" target="_blank"
                            rel="noreferrer nopener"><i class="fa-brands fa-x-twitter"></i></a>
                        <a href="https://bsky.app/intent/compose?text={% t right.sharing.bluesky %}" target="_blank"
                            rel="noreferrer nopener"><i class="fa-brands fa-bluesky"></i></a>
                        <a href="https://www.linkedin.com/sharing/share-offsite/?url={{ site.url }}" target="_blank"
                            rel="noreferrer nopener"><i class="fa-brands fa-linkedin-in"></i></a>
                        <a href="https://t.me/share/url?text={% t right.sharing.telegram %}&amp;url={{ site.url }}"
                            target="_blank" rel="noreferrer nopener"><i class="fa-solid fa-paper-plane"></i></a>
                        <a href="https://wa.me/?text={% t right.sharing.whatsapp %}" target="_blank"
                            rel="noreferrer nopener"><i class="fa-brands fa-whatsapp"></i></a>

                        <h3 class="mt-5 mb-3">{% t left.donateTitle %}</h3>
                        <a class="donate" href="{{ site.baseurl }}/donate.html">{% t left.donateButton %}</a>
                    </div>

                    <!-- Mobile view step 3 -->
                    <div id="preview-mobile">
                        <div class="d-flex mb-3 justify-content-between align-items-center">
                            <button class="btn back-small" onclick="backtosecondpage();">{% t right.back %}</button>
                            <h4 class="fw-bold">3/3</h4>
                        </div>
                        <h2>{% t right.preview-letter %}</h2>
                        <p>{% t right.preview-description %}</p>
                    </div>

                    <div class="d-block d-lg-none mt-5 scrollIndicator">
                        <div class="container">
                            <div class="text-center">
                                <a href="#right-side" alt="Scroll down"><i class="fas fa-2x fa-chevron-down"></i></a>
                            </div>
                        </div>
                    </div>

                </div>

                <div class="row mt-auto d-none d-lg-block">
                    <div class="col-12">
                        {% include nav.html %}
                        {% include footer.html %}
                    </div>
                </div>
            </div>
        </div>
        <!-- Right side -->
        <div id="right-side" class="col-lg-12 col-xl-6 offset-xl-6 offset-0">
            <div class="container d-flex flex-column h-100 py-3 py-lg-5 px-2 px-lg-5">
                <div class="row">
                    <!-- Necessary nav for toggling steps from 1 to 3, hidden because we control them via JS -->
                    <nav class="d-none">
                        <div class="nav-collapse">
                            <ul class="nav nav-pills" id="pills-tab" role="tablist">

                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="step-1-tab" data-bs-toggle="pill"
                                        data-bs-target="#step-1" type="button" role="tab" aria-controls="step-1"
                                        aria-selected="true">Step 1</button>
                                </li>

                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="step-2-tab" data-bs-toggle="pill"
                                        data-bs-target="#step-2" type="button" role="tab" aria-controls="step-2"
                                        aria-selected="true">Step 2</button>
                                </li>

                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="step-3-tab" data-bs-toggle="pill"
                                        data-bs-target="#step-3" type="button" role="tab" aria-controls="step-3"
                                        aria-selected="true">Step 3</button>
                                </li>

                            </ul>
                        </div>
                    </nav>

                    <div class="tab-content" id="pills-tabContent">

                        <!-- Step 1 -->
                        <div class="tab-pane fade show active" id="step-1" role="tabpanel" aria-labelledby="step-1-tab">
                            <div class="col-12">
                                <h4 class="fw-bold">1/3</h4>
                                <h2>{% t right.zip %}</h2>
                                <p>{% t right.description %}</p>
                            </div>
                            <div class="col-xl-8 col-12">
                                <div class="input-group form-floating autocomplete mb-0 mb-lg-2">
                                    <input id="zipcode" type="text" name="zipcode" autocomplete="off"
                                        inputmode="numeric"
                                        onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))"
                                        class="form-control mb-3 mb-lg-0" minlength="9" maxlength="120"
                                        placeholder="{% t right.placeholder %}" aria-label="{% t right.placeholder %}"
                                        aria-describedby="{% t right.placeholder %}">
                                    <label for="zipcode">{% t right.placeholder %}</label>

                                    <div class="input-group-append d-none d-xxl-inline-block">
                                        <button onclick="secondpage();" class="btn btn-new"><i
                                                class="fas fa-search me-2"></i>{% t
                                            right.button
                                            %}</button>
                                    </div>
                                </div>

                                <div class="autocomplete-items mb-3" id="autocomplete-list">
                                </div>

                                <button id="next-click" onclick="secondpage();"
                                    class="btn btn-new d-block w-100 d-xxl-none"><i class="fas fa-search me-2"></i>{% t
                                    right.button
                                    %}</button>

                                <p>{% t right.tos %}</p>
                            </div>
                            <p class="mb-0 mt-4 d-block d-lg-none">
                                <small>
                                    {% t left.copyright %} {{ 'now' | date: "%Y" }}
                                </small>
                                <br />
                                <small>
                                    {% t left.built %}
                                </small>
                            </p>
                        </div>

                        <!-- Step 2 -->
                        <div class="tab-pane fade" id="step-2" role="tabpanel" aria-labelledby="step-2-tab">
                            <div class="col-12">
                                <div id="address-desktop">
                                    <button class="btn back-small mb-4 d-none d-lg-block"
                                        onclick="backtofirstpage();">{% t right.back %}</button>
                                    <h4 class="fw-bold">2/3</h4>
                                    <h2>{% t right.residence %}</h2>
                                    <p>{% t right.optional %}</p>
                                    <div class="background-gray-100 p-4">
                                        <h4 id="munname" class="fw-bold mb-0"></h4>
                                        <p id="munemail" class="mb-0 me-1 d-inline-block"></p>
                                        <button class="btn copy p-0 d-inline-block" data-bs-placement="top"
                                            data-bs-toggle="tooltip" title="{% t right.message.copied %}"
                                            data-clipboard-target="#munemail">
                                            <i class="far fa-copy"></i>
                                        </button>
                                    </div>
                                </div>
                                <form name="main" class="mt-4">
                                    <div class="row">
                                        <div class="col-12 col-lg-6 mb-3 mb-lg-0">
                                            <div class="form-floating">
                                                <input type="text" class="form-control" id="form-name"
                                                    pattern="^[a-zA-Z-,.\säöüÄÖÜß]{2,}$" maxlength="60"
                                                    placeholder="{% t right.firstname %}"
                                                    aria-label="{% t right.firstname %}"
                                                    aria-describedby="{% t right.firstname %}">
                                                <label for="form-name">{% t right.firstname %}</label>
                                            </div>
                                        </div>
                                        <div class="col-12 col-lg-6">
                                            <div class="form-floating">
                                                <input type="text" class="form-control" id="form-surname"
                                                    pattern="^[a-zA-Z-,.\säöüÄÖÜß]{2,}$" maxlength="60"
                                                    placeholder="{% t right.lastname %}"
                                                    aria-label="{% t right.lastname %}"
                                                    aria-describedby="{% t right.lastname %}">
                                                <label for="form-surname">{% t right.lastname %}</label>
                                            </div>
                                        </div>
                                    </div>
                                    <fieldset class="mt-3 px-3">
                                        <legend>{% t right.birthday %}</legend>
                                        <div class="row my-2">
                                            <div class="col-4 col-lg-4">
                                                <div class="form-floating">
                                                    <input type="text" class="form-control" id="form-day"
                                                        onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))"
                                                        pattern="(0[1-9]|[12]\d|3[01])" inputmode="numeric"
                                                        minlength="1" maxlength="2" placeholder="{% t right.day %}"
                                                        aria-label="{% t right.day %}"
                                                        aria-describedby="{% t right.day %}">
                                                    <label for="form-day">{% t right.day %}</label>
                                                </div>
                                            </div>
                                            <div class="col-4 col-lg-4">
                                                <div class="form-floating">
                                                    <input type="text" class="form-control" id="form-month"
                                                        onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))"
                                                        pattern="(0[1-9]|1[012])" inputmode="numeric" minlength="1"
                                                        maxlength="2" placeholder="{% t right.month %}"
                                                        aria-label="{% t right.month %}"
                                                        aria-describedby="{% t right.month %}">
                                                    <label for="form-month">{% t right.month %}</label>
                                                </div>
                                            </div>
                                            <div class="col-4 col-lg-4">
                                                <div class="form-floating">
                                                    <input type="text" class="form-control" id="form-year"
                                                        onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))"
                                                        pattern="^((200[0-7])|(19[0-9]{2})|(189[0-9]))$"
                                                        inputmode="numeric" minlength="4" maxlength="4"
                                                        placeholder="{% t right.year %}" aria-label="{% t right.year %}"
                                                        aria-describedby="{% t right.year %}">
                                                    <label for="form-year">{% t right.year %}</label>
                                                </div>
                                            </div>
                                        </div>
                                    </fieldset>
                                    <div class="row mt-3">
                                        <div class="col-12 col-lg-12 mb-0">
                                            <div class="form-floating">
                                                <input type="text" class="form-control" id="form-street"
                                                    pattern="^[a-zA-Z0-9-,.\säöüÄÖÜß\/]{2,}$" maxlength="60"
                                                    placeholder="{% t right.shipping.street %}"
                                                    aria-label="{% t right.shipping.street %}"
                                                    aria-describedby="{% t right.shipping.street %}">
                                                <label for="form-street">{% t right.shipping.street %}</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mt-3">
                                        <div class="col-12 col-lg-3 mb-3 mb-lg-0">
                                            <div class="form-floating">
                                                <input type="text" class="form-control"
                                                    onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))"
                                                    id="form-zip" inputmode="numeric" minlength="5" maxlength="5"
                                                    pattern="[0-9]{5}" placeholder="{% t right.shipping.zipcode %}"
                                                    aria-label="{% t right.shipping.zipcode %}"
                                                    aria-describedby="{% t right.shipping.zipcode %}">
                                                <label for="form-zip">{% t right.shipping.zipcode %}</label>
                                            </div>
                                        </div>
                                        <div class="col-12 col-lg-9">
                                            <div class="form-floating">
                                                <input type="text" class="form-control" id="form-city"
                                                    pattern="^[a-zA-Z-,.\säöüÄÖÜß()\/]{2,}$" maxlength="60"
                                                    placeholder="{% t right.shipping.city %}"
                                                    aria-label="{% t right.shipping.city %}"
                                                    aria-describedby="{% t right.shipping.city %}">
                                                <label for="form-city">{% t right.shipping.city %}</label>
                                            </div>
                                        </div>
                                    </div>
                                </form>

                                <div class="row mt-3">

                                    <form method="post" name="subscribeform" id="subscribeform"
                                        enctype="multipart/form-data">

                                        <div class="col-12">
                                            <div class="form-floating">
                                                <input type="email" name="email" class="form-control" id="email"
                                                    pattern="(?![_.-])((?![_.-][_.-])[a-z\d_.-]){0,63}[a-z\d]@((?!-)((?!--)[a-z\d-]){0,63}[a-z\d]\.){1,2}([a-z]{2,14}\.)?[a-z]{2,14}"
                                                    placeholder="{% t right.email %}" aria-label="{% t right.email %}"
                                                    aria-describedby="{% t right.email %}">
                                                <label for="email">{% t right.email %}</label>
                                            </div>

                                            <input type=hidden name="htmlemail" value="1">
                                            <input type="hidden" name="list[{% t listid %}]" value="signup" />
                                            <input type="hidden" name="subscribe" value="subscribe" />
                                        </div>

                                        <div id="result"></div>
                                    </form>

                                    <!-- AJAX newsletter subscription -->
                                    <script>
                                        function checkform() {
                                            re = /^\w+([.-]?\w+)@\w+([.-]?\w+)(.\w{2,3})+$/;
                                            if (!re.test(document.querySelector("#email").value)) {
                                                const result = document.querySelector("#result");
                                                const emailfield = document.querySelector("#email");
                                                const emailcb1 = document.querySelector("#emailupdates");
                                                const emailcb2 = document.querySelector("#emailupdatesMobile");

                                                result.innerHTML = "<div class='error mt-3'><i class='fas fa-times-circle me-2'></i>{% t right.invalidemail %}</div>";
                                                emailfield.value = "";
                                                emailcb1.checked = false;
                                                emailcb2.checked = false;
                                                emailfield.focus();
                                                return false;
                                            }
                                            return true;
                                        }

                                        function submitForm() {
                                            successMessage =
                                                "<div class='success mt-3'><i class='fas fa-check-circle me-2'></i>{% t right.successfulregistration %}</div>";
                                            const result = document.querySelector("#result");
                                            const emailfield = document.querySelector("#email");
                                            const emailcb1 = document.querySelector("#emailupdates");
                                            const emailcb2 = document.querySelector("#emailupdatesMobile");

                                            // Clear previous messages
                                            result.innerHTML = "";

                                            const data = new URLSearchParams(new FormData(document.querySelector("#subscribeform"))).toString();
                                            fetch("https://list.wahlbrief.de/?p=asubscribe&id={% t listsub %}", {
                                                method: "POST",
                                                mode: "cors",
                                                headers: {
                                                    "Content-Type": "application/x-www-form-urlencoded",
                                                },
                                                body: data,
                                            }).then(res => {
                                                if (res.ok) {
                                                    return res.text();
                                                } else {
                                                    throw new Error("Server response was not OK");
                                                    // result.innerHTML = "<div class='error mt-3'><i class='fas fa-times-circle me-2'></i>{% t right.noprocess %}</div>";
                                                    // emailfield.value = "";
                                                    // emailfield.focus();
                                                    // emailcb1.checked = false;
                                                    // emailcb2.checked = false;
                                                }
                                            }).then(text => {
                                                result.innerHTML = successMessage;
                                            }).catch(e => {
                                                console.error(e);
                                                console.error("Failed to send data.");
                                                result.innerHTML = "<div class='error mt-3'><i class='fas fa-times-circle me-2'></i>{% t right.noprocess %}</div>";
                                                emailfield.value = "";
                                                emailcb1.checked = false;
                                                emailcb2.checked = false;
                                            })
                                        }
                                    </script>
                                    <!-- AJAX newsletter subscription -->
                                </div>

                                <form>
                                    <div class="form-check mt-2 d-none d-lg-flex align-items-center">
                                        <input class="form-check-input me-2" type="checkbox"
                                            onchange="if (this.checked) { 
                                                if (checkform()) submitForm(); 
                                            } else { 
                                                document.querySelector('#result').innerHTML = ''; 
                                            } return false;" value=""
                                            id="emailupdates">
                                        <label class="form-check-label" for="emailupdates">
                                            {% t right.email-updates %}
                                        </label>
                                    </div>

                                    <div
                                        class="d-flex justify-content-between align-items-center d-block d-lg-none mt-2">
                                        <p class="mb-0">{% t right.email-updates %}</p>
                                        <div>
                                            <input class="tgl tgl-light" id="emailupdatesMobile" type="checkbox"
                                                value="" onchange="if (this.checked) { 
                                                    if (checkform()) submitForm(); 
                                                } else { 
                                                    document.querySelector('#result').innerHTML = ''; 
                                                } return false;" />
                                            <label class="tgl-btn" for="emailupdatesMobile"></label>
                                        </div>
                                    </div>

                                    <div class="background-gray-100 py-3 px-3 my-3">
                                        <div class="d-flex align-items-center justify-content-lg-start">
                                            <i class="fas fa-info-circle color-secondary me-2"></i>
                                            <p class="mb-0">{% t right.arrival %} <strong id="arrival-date">03.02. - 14.02.</strong>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="form-check d-none d-lg-block">
                                        <input class="form-check-input" type="radio" name="flexRadioDefault"
                                            id="sameaddress" value="normal" checked>
                                        <label class="form-check-label" for="sameaddress">
                                            {% t right.same-address %}
                                        </label>
                                    </div>
                                    <div class="form-check d-none d-lg-block">
                                        <input class="form-check-input" type="radio" name="flexRadioDefault"
                                            id="differentaddress" value="different">
                                        <label class="form-check-label" for="differentaddress">
                                            {% t right.different-address %}
                                        </label>
                                    </div>
                                    <div class="d-flex justify-content-between align-items-center d-block d-lg-none">
                                        <p class="mb-0">{% t right.checkbox-address %}</p>
                                        <div>
                                            <input class="tgl tgl-light" id="cb1" type="checkbox" />
                                            <label class="tgl-btn" for="cb1"></label>
                                        </div>
                                    </div>
                                    <div class="col-10 d-block d-lg-none">
                                        <p class="small text-muted">{% t right.checkbox-description %}</p>
                                    </div>
                                </form>
                                <form id="newform" class="mt-3">
                                    <h3 class="mb-3">{% t right.shipping.address %}</h3>
                                    <div class="row">
                                        <div class="col-12 col-lg-6 mb-3 mb-lg-0">
                                            <div class="form-floating">
                                                <input type="text" class="form-control" id="form-newname"
                                                    pattern="^[a-zA-Z-,.\säöüÄÖÜß]{2,}$" maxlength="60"
                                                    placeholder="{% t right.shipping.name %}"
                                                    aria-label="{% t right.shipping.name %}"
                                                    aria-describedby="{% t right.shipping.name %}">
                                                <label for="form-newname">{% t right.shipping.name %}</label>
                                            </div>
                                        </div>
                                        <div class="col-12 col-lg-6">
                                            <div class="form-floating">
                                                <input type="text" class="form-control" id="form-newsurname"
                                                    pattern="^[a-zA-Z-,.\säöüÄÖÜß\/]{2,}$" maxlength="60"
                                                    placeholder="{% t right.shipping.surname %}"
                                                    aria-label="{% t right.shipping.surname %}"
                                                    aria-describedby="{% t right.shipping.surname %}">
                                                <label for="form-newsurname">{% t right.shipping.surname %}</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mt-3">
                                        <div class="col-12 col-lg-12 mb-0">
                                            <div class="form-floating">
                                                <input type="text" class="form-control" id="form-address"
                                                    pattern="^[a-zA-Z0-9-,.\säöüÄÖÜß\/]{2,}$" maxlength="60"
                                                    placeholder="{% t right.shipping.adresszusatz %}"
                                                    aria-label="{% t right.shipping.adresszusatz %}"
                                                    aria-describedby="{% t right.shipping.adresszusatz %}">
                                                <label for="form-address">{% t right.shipping.adresszusatz %}</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mt-3">
                                        <div class="col-12 col-lg-12 mb-0">
                                            <div class="form-floating">
                                                <input type="text" class="form-control" id="form-newstreet"
                                                    pattern="^[a-zA-Z0-9-,.\säöüÄÖÜß\/]{2,}$" maxlength="60"
                                                    placeholder="{% t right.shipping.street %}"
                                                    aria-label="{% t right.shipping.street %}"
                                                    aria-describedby="{% t right.shipping.street %}">
                                                <label for="form-newstreet">{% t right.shipping.street %}</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mt-3">
                                        <div class="col-12 col-lg-3 mb-3 mb-lg-0">
                                            <div class="form-floating">
                                                <input type="text"
                                                    onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))"
                                                    oninput="this.value=this.value.slice(0,this.maxLength)"
                                                    inputmode="numeric" class="form-control" id="form-newzip"
                                                    minlength="5" maxlength="5" pattern="[0-9]{5}"
                                                    placeholder="{% t right.shipping.zipcode %}"
                                                    aria-label="{% t right.shipping.zipcode %}"
                                                    aria-describedby="{% t right.shipping.zipcode %}">
                                                <label for="form-newzip">{% t right.shipping.zipcode %}</label>
                                            </div>
                                        </div>
                                        <div class="col-12 col-lg-9">
                                            <div class="form-floating">
                                                <input type="text" class="form-control" id="form-newcity"
                                                    pattern="^[a-zA-Z-,.\säöüÄÖÜß()\/]{2,}$" maxlength="60"
                                                    placeholder="{% t right.shipping.city %}"
                                                    aria-label="{% t right.shipping.city %}"
                                                    aria-describedby="{% t right.shipping.city %}">
                                                <label for="form-newcity">{% t right.shipping.city %}</label>
                                            </div>
                                        </div>
                                    </div>
                                </form>

                                <div class="row mt-4">
                                    <div class="col-12 d-flex justify-content-end">
                                        <button class="btn btn-preview" onclick="thirdpage();"><i
                                                class="fas fa-eye me-2"></i>{%
                                            t right.preview
                                            %}</button>
                                    </div>
                                </div>
                                <p class="mb-0 mt-4 d-block d-lg-none">
                                    <small>
                                        {% t left.copyright %} {{ 'now' | date: "%Y" }}
                                    </small>
                                    <br />
                                    <small>
                                        {% t left.built %}
                                    </small>
                                </p>
                            </div>
                        </div>

                        <!-- Step 3 -->
                        <div class="tab-pane fade" id="step-3" role="tabpanel" aria-labelledby="step-3-tab">
                            <div class="col-12">
                                <div id="preview">
                                    <button class="btn back-small mb-4" onclick="backtosecondpage();">{% t right.back
                                        %}</button>
                                    <h4 class="fw-bold">3/3</h4>
                                    <h2>{% t right.preview-letter %}</h2>
                                    <p>{% t right.preview-description %}</p>
                                    <p id="subject">{% t right.subject %}</p>
                                </div>

                                <div class="background-gray-100 p-4 mb-3">
                                    <h4 id="final-munname" class="fw-bold mb-0"></h4>
                                    <p id="final-munemail" class="mb-0 me-1 d-inline-block"></p>
                                    <button class="btn copy p-0 d-inline-block" data-bs-toggle="tooltip"
                                        data-bs-placement="top" title="{% t right.message.copied %}"
                                        data-clipboard-target="#final-munemail">
                                        <i class="far fa-copy"></i>
                                    </button>
                                </div>

                                <div id="final-letter" class="final-letter py-3 px-4">

                                    <p id="instructions" aria-hidden="true">
                                        {% t right.instructions.title %}<br /><br />
                                        <span>{% t right.instructions.first %} <span
                                                id="instruction-email"></span></span><br />
                                        <span>{% t right.instructions.second %} {% t right.subject %}</span><br />
                                        <span>{% t right.instructions.third %}</span><br /><br />
                                        -----------
                                    </p>

                                    <div id="letter-content">

                                        <p>{% t right.letter.title %}</p>

                                        <p class="mb-0">
                                            {% t right.letter.name %}: <span class="fw-bold"
                                                id="final-name"></span><br />
                                            {% t right.letter.surname %}: <span class="fw-bold"
                                                id="final-surname"></span><br />

                                            {% t right.letter.birthday %}: <span class="fw-bold"
                                                id="final-birthdate"></span><span class="fw-bold"
                                                id="final-birthmonth"></span><span class="fw-bold"
                                                id="final-birthyear"></span><br />
                                            {% t right.letter.address %}:<br />
                                            <span class="fw-bold" id="final-id-street"></span><br data-br="street"
                                                style="display: none;" />
                                            <span class="fw-bold" id="final-id-zip"></span>
                                            <span class="fw-bold" id="final-id-city"></span><br data-br="zip"
                                                style="display: none;" /><br />
                                        </p>

                                        <p id="finalogaddress">{% t right.letter.sendtomine %}</p>

                                        <p class="mb-0" id="finalnewaddress">{% t right.letter.sendalternative
                                            %}<br />

                                            <span class="fw-bold" id="final-newname"></span>
                                            <span class="fw-bold" id="final-newsurname"></span><br data-br="newsurname"
                                                style="display: none;" />
                                            <span class="fw-bold" id="final-address"></span><br data-br="address"
                                                style="display: none;" />
                                            <span class="fw-bold" id="final-newstreet"></span><br data-br="street"
                                                style="display: none;" />
                                            <span class="fw-bold" id="final-newzip"></span>
                                            <span class="fw-bold" id="final-newcity"></span><br data-br="newzip"
                                                style="display: none;" /><br />
                                            <span class="fw-bold ms-2" id="final-street"></span>
                                            <span class="fw-bold ms-2" id="final-zip"></span>
                                            <span class="fw-bold ms-2" id="final-city"></span>
                                        </p>

                                        <p class="mb-0">{% t right.letter.regards %}<br />
                                            <span class="fw-bold me-1" id="final-id-name"></span>
                                            <span class="fw-bold" id="final-id-surname"></span>
                                            <span id="final-id-street"></span>
                                            <span id="final-id-zip"></span>
                                            <span id="final-id-city"></span>
                                            <span id="final-id-newname"></span>
                                            <span id="final-id-newsurname"></span>
                                            <span id="final-id-address"></span>
                                            <span id="final-id-newstreet"></span>
                                            <span id="final-id-newzip"></span>
                                            <span id="final-id-newcity"></span>
                                        </p>

                                    </div>

                                </div>

                                <p class="mb-0 mt-4" id="final-message">
                                    <i class='fas fa-info-circle me-2'></i>
                                    {% t right.message.intro %}
                                </p>

                                <span id="translation-sent" class="d-none">{% t right.message.sent %}</span>
                                <span id="translation-copied" class="d-none">{% t right.message.success %}</span>

                                <div class="row py-4 justify-content-center align-items-center">
                                    <div class="col-12 col-lg-6 mb-3 mb-lg-0">
                                        <a id="send-email" href="#" class="btn-send">
                                            <i class="fas fa-paper-plane me-2"></i>{% t right.send %}
                                        </a>
                                    </div>
                                    <div class="col-12 col-lg-6">
                                        <button id="copy-text" class="btn-copy" data-clipboard-target="#final-letter">
                                            <i class="fas fa-clone me-2"></i>{% t right.copy %}
                                        </button>
                                    </div>
                                </div>

                                <div id="outro-bottom" class="col-12 col-xl-8 my-4 p-4 outro">
                                    <h1 class="mb-3">{% t left.share %}</h1>
                                    <p class="mb-4">{% t left.description %}</p>
                                    <div>
                                        <a class="copy" data-clipboard-text="{% t right.sharing.copy %}" href="#"
                                            onclick="event.preventDefault();" data-bs-placement="bottom"
                                            data-bs-toggle="tooltip" title="{% t right.message.sharecopy %}"><i
                                                class="far fa-copy"></i></a>
                                        <a
                                            href="mailto:?subject={% t right.sharing.email.subject %}&amp;body={% t right.sharing.email.body %}"><i
                                                class="fas fa-envelope"></i></a>
                                        <a href="https://facebook.com/sharer/sharer.php?u={{ site.url }}"
                                            target="_blank" rel="noreferrer nopener"><i class="fa-brands fa-facebook"></i></a>
                                        <a href="https://x.com/intent/tweet/?text={% t right.sharing.twitter %}"
                                            target="_blank" rel="noreferrer nopener"><i class="fab fa-brands fa-x-twitter"></i></a>
                                        <a href="https://bsky.app/intent/compose?text={% t right.sharing.bluesky %}" target="_blank"
                                            rel="noreferrer nopener"><i class="fa-brands fa-bluesky"></i></a>
                                        <a href="https://www.linkedin.com/sharing/share-offsite/?url={{ site.url }}"
                                            target="_blank" rel="noreferrer nopener"><i class="fa-brands fa-linkedin-in"></i></a>
                                        <a href="https://t.me/share/url?text={% t right.sharing.telegram %}&amp;url={{ site.url }}"
                                            target="_blank" rel="noreferrer nopener"><i class="fa-solid fa-paper-plane"></i></a>
                                        <a href="https://wa.me/?text={% t right.sharing.whatsapp %}" target="_blank"
                                            rel="noreferrer nopener"><i class="fa-brands fa-whatsapp"></i></a>

                                        <h3 class="mt-5 mb-3">{% t left.donateTitle %}</h3>
                                        <a class="donate" href="{{ site.baseurl }}/donate.html">{% t left.donateButton %}</a>
                                    </div>
                                </div>
                                <p class="mb-0 mt-4 d-block d-lg-none">
                                    <small>
                                        {% t left.copyright %} {{ 'now' | date: "%Y" }}
                                    </small>
                                    <br />
                                    <small>
                                        {% t left.built %}
                                    </small>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>