{"id":30623,"date":"2026-08-03T19:21:03","date_gmt":"2026-08-03T17:21:03","guid":{"rendered":"https:\/\/www.mgv-imhausen.de\/?page_id=30623"},"modified":"2026-08-04T13:54:16","modified_gmt":"2026-08-04T11:54:16","slug":"30623-2","status":"publish","type":"page","link":"https:\/\/www.mgv-imhausen.de\/?page_id=30623","title":{"rendered":""},"content":{"rendered":"\n<style>\n  #mgv-backesfest-order,\n  #mgv-backesfest-order * {\n    box-sizing: border-box;\n  }\n\n  #mgv-backesfest-order {\n    --mgv-bg: #fffdf8;\n    --mgv-surface: #ffffff;\n    --mgv-text: #25231f;\n    --mgv-muted: #686158;\n    --mgv-border: #dfd8ce;\n    --mgv-primary: #7a3326;\n    --mgv-primary-dark: #61271d;\n    --mgv-accent: #f3e8d7;\n    --mgv-focus: #bd6a35;\n    width: min(100%, 860px);\n    margin: 0 auto;\n    color: var(--mgv-text);\n    font-family: inherit;\n    line-height: 1.55;\n  }\n\n  #mgv-backesfest-order .mgv-card {\n    overflow: hidden;\n    border: 1px solid var(--mgv-border);\n    border-radius: 18px;\n    background: var(--mgv-surface);\n    box-shadow: 0 14px 38px rgba(52, 40, 29, 0.08);\n  }\n\n  #mgv-backesfest-order .mgv-header {\n    padding: clamp(24px, 5vw, 44px);\n    background: linear-gradient(135deg, #f8efe2 0%, #fffaf2 100%);\n    border-bottom: 1px solid var(--mgv-border);\n  }\n\n  #mgv-backesfest-order .mgv-kicker {\n    margin: 0 0 6px;\n    color: var(--mgv-primary);\n    font-size: 0.82rem;\n    font-weight: 750;\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n  }\n\n  #mgv-backesfest-order h2 {\n    margin: 0 0 14px;\n    color: var(--mgv-text);\n    font-size: clamp(1.75rem, 4vw, 2.55rem);\n    line-height: 1.14;\n  }\n\n  #mgv-backesfest-order .mgv-intro {\n    max-width: 68ch;\n    margin: 0;\n    color: var(--mgv-muted);\n    font-size: 1.03rem;\n  }\n\n  #mgv-backesfest-order .mgv-facts {\n    display: grid;\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n    gap: 10px;\n    margin-top: 24px;\n  }\n\n  #mgv-backesfest-order .mgv-fact {\n    min-height: 90px;\n    padding: 14px 16px;\n    border: 1px solid rgba(122, 51, 38, 0.14);\n    border-radius: 12px;\n    background: rgba(255, 255, 255, 0.7);\n  }\n\n  #mgv-backesfest-order .mgv-fact-label {\n    display: block;\n    margin-bottom: 3px;\n    color: var(--mgv-muted);\n    font-size: 0.78rem;\n    font-weight: 700;\n    letter-spacing: 0.04em;\n    text-transform: uppercase;\n  }\n\n  #mgv-backesfest-order .mgv-fact-value {\n    display: block;\n    font-weight: 700;\n  }\n\n  #mgv-backesfest-order .mgv-callout {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 18px;\n    margin-top: 18px;\n    padding: 14px 16px;\n    border-radius: 12px;\n    background: var(--mgv-primary);\n    color: #ffffff;\n  }\n\n  #mgv-backesfest-order .mgv-callout p {\n    margin: 0;\n  }\n\n  #mgv-backesfest-order .mgv-call-button {\n    flex: 0 0 auto;\n    padding: 10px 15px;\n    border: 1px solid rgba(255, 255, 255, 0.5);\n    border-radius: 999px;\n    color: #ffffff;\n    font-weight: 750;\n    text-decoration: none;\n    white-space: nowrap;\n  }\n\n  #mgv-backesfest-order .mgv-call-button:hover,\n  #mgv-backesfest-order .mgv-call-button:focus-visible {\n    background: #ffffff;\n    color: var(--mgv-primary);\n  }\n\n  #mgv-backesfest-order .mgv-form {\n    padding: clamp(24px, 5vw, 44px);\n  }\n\n  #mgv-backesfest-order .mgv-section-title {\n    margin: 0 0 8px;\n    font-size: 1.25rem;\n    line-height: 1.3;\n  }\n\n  #mgv-backesfest-order .mgv-section-note {\n    margin: 0 0 20px;\n    color: var(--mgv-muted);\n    font-size: 0.94rem;\n  }\n\n  #mgv-backesfest-order .mgv-field {\n    margin-bottom: 28px;\n  }\n\n  #mgv-backesfest-order .mgv-contact-fields {\n    display: grid;\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    gap: 18px 20px;\n    margin-bottom: 28px;\n  }\n\n  #mgv-backesfest-order .mgv-contact-fields .mgv-field {\n    margin-bottom: 0;\n  }\n\n  #mgv-backesfest-order .mgv-field-address {\n    grid-column: 1 \/ -1;\n  }\n\n  #mgv-backesfest-order label {\n    display: block;\n    margin-bottom: 7px;\n    font-weight: 750;\n  }\n\n  #mgv-backesfest-order .mgv-required {\n    color: var(--mgv-primary);\n  }\n\n  #mgv-backesfest-order input[type=\"text\"] {\n    width: 100%;\n    max-width: 520px;\n    min-height: 48px;\n    padding: 10px 13px;\n    border: 1px solid var(--mgv-border);\n    border-radius: 10px;\n    background: #ffffff;\n    color: var(--mgv-text);\n    font: inherit;\n  }\n\n  #mgv-backesfest-order .mgv-contact-fields input[type=\"text\"] {\n    max-width: none;\n  }\n\n  #mgv-backesfest-order .mgv-field-hint {\n    display: block;\n    margin-top: 6px;\n    color: var(--mgv-muted);\n    font-size: 0.8rem;\n  }\n\n  #mgv-backesfest-order input:focus-visible,\n  #mgv-backesfest-order button:focus-visible,\n  #mgv-backesfest-order a:focus-visible {\n    outline: 3px solid color-mix(in srgb, var(--mgv-focus) 38%, transparent);\n    outline-offset: 2px;\n  }\n\n  #mgv-backesfest-order .mgv-products {\n    display: grid;\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    gap: 16px;\n    margin-bottom: 28px;\n  }\n\n  #mgv-backesfest-order .mgv-product {\n    display: flex;\n    flex-direction: column;\n    min-height: 210px;\n    padding: 20px;\n    border: 1px solid var(--mgv-border);\n    border-radius: 14px;\n    background: var(--mgv-bg);\n  }\n\n  #mgv-backesfest-order .mgv-product h3 {\n    margin: 0 0 5px;\n    font-size: 1.18rem;\n  }\n\n  #mgv-backesfest-order .mgv-product-details {\n    margin: 0 0 18px;\n    color: var(--mgv-muted);\n    font-size: 0.91rem;\n  }\n\n  #mgv-backesfest-order .mgv-stepper {\n    display: grid;\n    grid-template-columns: 44px minmax(60px, 1fr) 44px;\n    align-items: stretch;\n    gap: 8px;\n    width: 100%;\n    max-width: 220px;\n    margin-top: auto;\n  }\n\n  #mgv-backesfest-order .mgv-stepper button {\n    min-width: 44px;\n    min-height: 44px;\n    padding: 0;\n    border: 1px solid var(--mgv-border);\n    border-radius: 9px;\n    background: #ffffff;\n    color: var(--mgv-primary);\n    font: inherit;\n    font-size: 1.35rem;\n    font-weight: 700;\n    cursor: pointer;\n  }\n\n  #mgv-backesfest-order .mgv-stepper button:hover {\n    border-color: var(--mgv-primary);\n    background: var(--mgv-accent);\n  }\n\n  #mgv-backesfest-order .mgv-stepper input {\n    width: 100%;\n    min-width: 0;\n    min-height: 44px;\n    padding: 5px;\n    border: 1px solid var(--mgv-border);\n    border-radius: 9px;\n    background: #ffffff;\n    color: var(--mgv-text);\n    font: inherit;\n    font-weight: 750;\n    text-align: center;\n    appearance: textfield;\n    -moz-appearance: textfield;\n  }\n\n  #mgv-backesfest-order .mgv-stepper input::-webkit-inner-spin-button,\n  #mgv-backesfest-order .mgv-stepper input::-webkit-outer-spin-button {\n    margin: 0;\n    appearance: none;\n    -webkit-appearance: none;\n  }\n\n  #mgv-backesfest-order .mgv-preview {\n    margin-top: 8px;\n    padding: 18px;\n    border: 1px solid var(--mgv-border);\n    border-radius: 12px;\n    background: #f8f6f2;\n  }\n\n  #mgv-backesfest-order .mgv-preview-title {\n    margin: 0 0 8px;\n    font-size: 0.83rem;\n    font-weight: 750;\n    letter-spacing: 0.04em;\n    text-transform: uppercase;\n  }\n\n  #mgv-backesfest-order .mgv-preview pre {\n    margin: 0;\n    overflow: visible;\n    background: transparent;\n    color: var(--mgv-text);\n    font: inherit;\n    font-size: 0.93rem;\n    line-height: 1.55;\n    white-space: pre-wrap;\n  }\n\n  #mgv-backesfest-order .mgv-status {\n    min-height: 24px;\n    margin: 12px 0;\n    color: var(--mgv-muted);\n    font-size: 0.9rem;\n  }\n\n  #mgv-backesfest-order .mgv-status[data-state=\"error\"] {\n    color: #9c2f20;\n    font-weight: 700;\n  }\n\n  #mgv-backesfest-order .mgv-status[data-state=\"success\"] {\n    color: #286438;\n    font-weight: 700;\n  }\n\n  #mgv-backesfest-order .mgv-confirmation {\n    display: flex;\n    gap: 12px;\n    align-items: flex-start;\n    margin: 18px 0 4px;\n    padding: 14px 16px;\n    border: 1px solid var(--mgv-border);\n    border-radius: 10px;\n    background: #fffaf2;\n  }\n\n  #mgv-backesfest-order .mgv-confirmation input {\n    flex: 0 0 auto;\n    width: 20px;\n    height: 20px;\n    margin: 2px 0 0;\n    accent-color: var(--mgv-primary);\n    cursor: pointer;\n  }\n\n  #mgv-backesfest-order .mgv-confirmation label {\n    margin: 0;\n    font-size: 0.9rem;\n    font-weight: 650;\n    cursor: pointer;\n  }\n\n  #mgv-backesfest-order .mgv-confirmation a {\n    color: var(--mgv-primary-dark);\n    font-weight: 750;\n    text-decoration: underline;\n    text-underline-offset: 2px;\n  }\n\n  #mgv-backesfest-order .mgv-actions {\n    display: grid;\n    grid-template-columns: repeat(4, minmax(0, 1fr));\n    gap: 10px;\n  }\n\n  #mgv-backesfest-order .mgv-action {\n    min-height: 48px;\n    padding: 11px 12px;\n    border: 1px solid transparent;\n    border-radius: 10px;\n    color: #ffffff;\n    font: inherit;\n    font-weight: 750;\n    cursor: pointer;\n  }\n\n  #mgv-backesfest-order .mgv-action-email {\n    background: #4d5966;\n  }\n\n  #mgv-backesfest-order .mgv-action-whatsapp {\n    background: #167c46;\n  }\n\n  #mgv-backesfest-order .mgv-action-sms {\n    background: #2867a8;\n  }\n\n  #mgv-backesfest-order .mgv-action-copy {\n    border-color: var(--mgv-border);\n    background: #ffffff;\n    color: var(--mgv-text);\n  }\n\n  #mgv-backesfest-order .mgv-action:hover:not(:disabled) {\n    filter: brightness(0.9);\n  }\n\n  #mgv-backesfest-order .mgv-action:disabled {\n    cursor: not-allowed;\n    opacity: 0.42;\n  }\n\n  #mgv-backesfest-order .mgv-footnote {\n    margin: 14px 0 0;\n    color: var(--mgv-muted);\n    font-size: 0.8rem;\n  }\n\n  #mgv-backesfest-order .mgv-privacy {\n    margin-top: 20px;\n    padding: 14px 16px;\n    border-left: 4px solid var(--mgv-primary);\n    border-radius: 0 9px 9px 0;\n    background: var(--mgv-accent);\n    color: var(--mgv-muted);\n    font-size: 0.82rem;\n  }\n\n  #mgv-backesfest-order .mgv-privacy p {\n    margin: 0;\n  }\n\n  #mgv-backesfest-order .mgv-privacy strong {\n    color: var(--mgv-text);\n  }\n\n  #mgv-backesfest-order .mgv-privacy a {\n    color: var(--mgv-primary-dark);\n    font-weight: 750;\n    text-decoration: underline;\n    text-underline-offset: 2px;\n  }\n\n  @media (max-width: 700px) {\n    #mgv-backesfest-order .mgv-facts,\n    #mgv-backesfest-order .mgv-products,\n    #mgv-backesfest-order .mgv-actions {\n      grid-template-columns: 1fr;\n    }\n\n    #mgv-backesfest-order .mgv-contact-fields {\n      grid-template-columns: 1fr;\n    }\n\n    #mgv-backesfest-order .mgv-field-address {\n      grid-column: auto;\n    }\n\n    #mgv-backesfest-order .mgv-product {\n      min-height: 0;\n    }\n\n    #mgv-backesfest-order .mgv-callout {\n      align-items: flex-start;\n      flex-direction: column;\n    }\n\n    #mgv-backesfest-order .mgv-call-button {\n      width: 100%;\n      text-align: center;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    #mgv-backesfest-order * {\n      scroll-behavior: auto !important;\n    }\n  }\n<\/style>\n\n<section id=\"mgv-backesfest-order\" aria-labelledby=\"mgv-order-heading\">\n  <div class=\"mgv-card\">\n    <header class=\"mgv-header\">\n      <p class=\"mgv-kicker\">MGV Imhausen<\/p>\n      <h2 id=\"mgv-order-heading\">Brotvorbestellung zum Backesfest<\/h2>\n      <p class=\"mgv-intro\">\n        Damit wir die ben\u00f6tigte Brotmenge besser planen k\u00f6nnen, k\u00f6nnt ihr hier\n        Kartoffelbrot und Bauernbrot vorbestellen. W\u00e4hlt die gew\u00fcnschte Menge\n        aus und sendet die vorbereitete Nachricht anschlie\u00dfend per E-Mail oder\n        WhatsApp.\n      <\/p>\n\n      <div class=\"mgv-facts\" aria-label=\"Informationen zur Vorbestellung\">\n        <div class=\"mgv-fact\">\n          <span class=\"mgv-fact-label\">Backesfest<\/span>\n          <span class=\"mgv-fact-value\">Sonntag, 20.09.2026<\/span>\n        <\/div>\n        <div class=\"mgv-fact\">\n          <span class=\"mgv-fact-label\">Abholung<\/span>\n          <span class=\"mgv-fact-value\">Ab 11:00 Uhr<\/span>\n        <\/div>\n        <div class=\"mgv-fact\">\n          <span class=\"mgv-fact-label\">Vorbestellung bis<\/span>\n          <span class=\"mgv-fact-value\">Dienstag, 15.09.2026<\/span>\n        <\/div>\n      <\/div>\n\n      <div class=\"mgv-callout\">\n        <p>Ihr m\u00f6chtet lieber anrufen? Vorbestellungen nehmen wir auch telefonisch entgegen.<\/p>\n        <a class=\"mgv-call-button\" id=\"mgv-call-link\" href=\"#\">+491722729095<\/a>\n      <\/div>\n    <\/header>\n\n    <form class=\"mgv-form\" id=\"mgv-order-form\" novalidate>\n      <div class=\"mgv-contact-fields\">\n        <div class=\"mgv-field\">\n          <label for=\"mgv-name\">\n            Name <span class=\"mgv-required\" aria-hidden=\"true\">*<\/span>\n          <\/label>\n          <input\n            type=\"text\"\n            id=\"mgv-name\"\n            name=\"name\"\n            autocomplete=\"name\"\n            maxlength=\"100\"\n            required\n            aria-required=\"true\"\n          >\n        <\/div>\n\n        <div class=\"mgv-field\">\n          <label for=\"mgv-customer-contact\">\n            E-Mail-Adresse oder Telefonnummer\n            <span class=\"mgv-required\" aria-hidden=\"true\">*<\/span>\n          <\/label>\n          <input\n            type=\"text\"\n            id=\"mgv-customer-contact\"\n            name=\"kontakt\"\n            maxlength=\"150\"\n            required\n            aria-required=\"true\"\n            aria-describedby=\"mgv-contact-hint\"\n          >\n          <small class=\"mgv-field-hint\" id=\"mgv-contact-hint\">\n            F\u00fcr eventuelle R\u00fcckfragen zur Vorbestellung.\n          <\/small>\n        <\/div>\n\n        <div class=\"mgv-field mgv-field-address\">\n          <label for=\"mgv-address\">Adresse <span class=\"mgv-optional\">(optional)<\/span><\/label>\n          <input\n            type=\"text\"\n            id=\"mgv-address\"\n            name=\"adresse\"\n            autocomplete=\"street-address\"\n            maxlength=\"200\"\n            placeholder=\"Stra\u00dfe, Hausnummer, Ort\"\n          >\n        <\/div>\n      <\/div>\n\n      <h3 class=\"mgv-section-title\">Gew\u00fcnschte Brote<\/h3>\n      <p class=\"mgv-section-note\">\n        Beide Brote wiegen ungef\u00e4hr 600&nbsp;g. Der Preis betr\u00e4gt 0,60&nbsp;\u20ac je\n        100&nbsp;g. Jedes Brot wird beim Backesfest gewogen und nach dem tats\u00e4chlichen\n        Gewicht berechnet; bei 600&nbsp;g sind das ungef\u00e4hr 3,60&nbsp;\u20ac.\n      <\/p>\n\n      <div class=\"mgv-products\">\n        <article class=\"mgv-product\">\n          <h3>Kartoffelbrot<\/h3>\n          <p class=\"mgv-product-details\">ca. 600&nbsp;g \u00b7 0,60&nbsp;\u20ac je 100&nbsp;g<\/p>\n          <div class=\"mgv-stepper\" data-product=\"Kartoffelbrot\">\n            <button type=\"button\" data-change=\"-1\" aria-label=\"Ein Kartoffelbrot weniger\">\u2212<\/button>\n            <input\n              type=\"number\"\n              id=\"mgv-potato-quantity\"\n              name=\"kartoffelbrot\"\n              value=\"0\"\n              min=\"0\"\n              max=\"20\"\n              step=\"1\"\n              inputmode=\"numeric\"\n              aria-label=\"Anzahl Kartoffelbrote\"\n            >\n            <button type=\"button\" data-change=\"1\" aria-label=\"Ein Kartoffelbrot mehr\">+<\/button>\n          <\/div>\n        <\/article>\n\n        <article class=\"mgv-product\">\n          <h3>Bauernbrot<\/h3>\n          <p class=\"mgv-product-details\">ca. 600&nbsp;g \u00b7 0,60&nbsp;\u20ac je 100&nbsp;g<\/p>\n          <div class=\"mgv-stepper\" data-product=\"Bauernbrot\">\n            <button type=\"button\" data-change=\"-1\" aria-label=\"Ein Bauernbrot weniger\">\u2212<\/button>\n            <input\n              type=\"number\"\n              id=\"mgv-farmhouse-quantity\"\n              name=\"bauernbrot\"\n              value=\"0\"\n              min=\"0\"\n              max=\"20\"\n              step=\"1\"\n              inputmode=\"numeric\"\n              aria-label=\"Anzahl Bauernbrote\"\n            >\n            <button type=\"button\" data-change=\"1\" aria-label=\"Ein Bauernbrot mehr\">+<\/button>\n          <\/div>\n        <\/article>\n      <\/div>\n\n      <div class=\"mgv-preview\" aria-labelledby=\"mgv-preview-heading\">\n        <p class=\"mgv-preview-title\" id=\"mgv-preview-heading\">Vorschau der Nachricht<\/p>\n        <pre id=\"mgv-message-preview\">Bitte zuerst Namen und Kontakt eintragen sowie mindestens ein Brot ausw\u00e4hlen.<\/pre>\n      <\/div>\n\n      <!-- BEST\u00c4TIGUNG: Links bei Bedarf an eure WordPress-Adressen anpassen. -->\n      <div class=\"mgv-confirmation\">\n        <input\n          type=\"checkbox\"\n          id=\"mgv-confirmation\"\n          name=\"bestaetigung\"\n          required\n          aria-required=\"true\"\n        >\n        <label for=\"mgv-confirmation\">\n          Ich best\u00e4tige, dass ich die Hinweise zur Vorbestellung sowie die\n          AGB und die Datenschutzerkl\u00e4rung gelesen habe. <span class=\"mgv-required\" aria-hidden=\"true\">*<\/span>\n        <\/label>\n      <\/div>\n\n      <p class=\"mgv-status\" id=\"mgv-status\" role=\"status\" aria-live=\"polite\">\n        Bitte Namen und Kontakt eintragen, mindestens ein Brot ausw\u00e4hlen und die Hinweise best\u00e4tigen.\n      <\/p>\n\n      <div class=\"mgv-actions\" aria-label=\"Bestellweg ausw\u00e4hlen\">\n        <button type=\"button\" class=\"mgv-action mgv-action-email\" data-channel=\"email\" disabled>\n          Per E-Mail\n        <\/button>\n        <button type=\"button\" class=\"mgv-action mgv-action-whatsapp\" data-channel=\"whatsapp\" disabled>\n          Per WhatsApp\n        <\/button>\n        <button type=\"button\" class=\"mgv-action mgv-action-copy\" data-channel=\"copy\" disabled>\n          Text kopieren\n        <\/button>\n      <\/div>\n\n      <p class=\"mgv-footnote\">\n        Die Nachricht wird nicht automatisch an den MGV Imhausen verschickt. Sie\n        kann vor dem Senden in der gew\u00e4hlten App noch einmal gepr\u00fcft und ge\u00e4ndert\n        werden.\n      <\/p>\n\n      <!-- DATENSCHUTZHINWEIS: Link bei Bedarf an eure WordPress-Adresse anpassen. -->\n      <div class=\"mgv-privacy\">\n        <p>\n          <strong>Datenschutzhinweis:<\/strong> Die auf dieser Seite eingegebenen\n          Angaben werden nicht auf unserer Website gespeichert. Erst wenn ein\n          Versandweg ausgew\u00e4hlt wird, werden Name, Kontaktangabe, Vorbestellung\n          und eine gegebenenfalls eingetragene Adresse an die entsprechende\n          Anwendung \u00fcbergeben. Beim \u00d6ffnen von WhatsApp wird der vorbereitete\n          Nachrichtentext an WhatsApp \u00fcbermittelt. Wir verwenden die erhaltenen\n          Angaben ausschlie\u00dflich zur Organisation der\n          Brotvorbestellungen f\u00fcr das Backesfest. Weitere Informationen findet ihr\n          in unserer Datenschutzerkl\u00e4rung.\n        <\/p>\n      <\/div>\n    <\/form>\n  <\/div>\n<\/section>\n\n<script>\n  (() => {\n    \"use strict\";\n\n    \/* ================================================================\n       KONTAKTDATEN \u2013 DIESE DREI WERTE ERSETZEN\n       phoneLink bitte mit +49 und ohne Leerzeichen eintragen.\n       Beispiel: +491701234567\n       ================================================================ *\/\n    const contact = {\n      email: \"brot@mgv-imhausen.de\",\n      phoneDisplay: \"0172\/2729095\",\n      phoneLink: \"+491722729095\"\n    };\n\n    const root = document.getElementById(\"mgv-backesfest-order\");\n    if (!root) return;\n\n    const form = root.querySelector(\"#mgv-order-form\");\n    const nameInput = root.querySelector(\"#mgv-name\");\n    const customerContactInput = root.querySelector(\"#mgv-customer-contact\");\n    const addressInput = root.querySelector(\"#mgv-address\");\n    const quantityInputs = Array.from(root.querySelectorAll('.mgv-stepper input[type=\"number\"]'));\n    const confirmationInput = root.querySelector(\"#mgv-confirmation\");\n    const actionButtons = Array.from(root.querySelectorAll(\".mgv-action\"));\n    const preview = root.querySelector(\"#mgv-message-preview\");\n    const status = root.querySelector(\"#mgv-status\");\n    const callLink = root.querySelector(\"#mgv-call-link\");\n\n    const cleanPhone = (value) => value.replace(\/[^+\\d]\/g, \"\");\n    const whatsAppPhone = (value) => value.replace(\/\\D\/g, \"\");\n    const isConfigured = (value) => value && !value.includes(\"EINTRAGEN\");\n\n    function isValidCustomerContact(value) {\n      const contactValue = value.trim();\n      const emailPattern = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\n      const phoneCharactersPattern = \/^\\+?[\\d\\s().\/-]+$\/;\n      const digitCount = (contactValue.match(\/\\d\/g) || []).length;\n\n      return emailPattern.test(contactValue) ||\n        (phoneCharactersPattern.test(contactValue) && digitCount >= 6);\n    }\n\n    \/\/ Der Baustein \u00fcbermittelt niemals Formulardaten an WordPress. Dadurch\n    \/\/ kann auch ein Druck auf die Eingabetaste keine GET-Anfrage ausl\u00f6sen.\n    form.addEventListener(\"submit\", (event) => event.preventDefault());\n\n    if (isConfigured(contact.phoneDisplay) && isConfigured(contact.phoneLink)) {\n      callLink.textContent = contact.phoneDisplay;\n      callLink.href = `tel:${cleanPhone(contact.phoneLink)}`;\n    } else {\n      callLink.textContent = \"Telefonnummer folgt\";\n      callLink.removeAttribute(\"href\");\n      callLink.setAttribute(\"aria-disabled\", \"true\");\n    }\n\n    function normalizeQuantity(input) {\n      const min = Number(input.min) || 0;\n      const max = Number(input.max) || 20;\n      let value = Number.parseInt(input.value, 10);\n\n      if (!Number.isFinite(value)) value = min;\n      value = Math.max(min, Math.min(max, value));\n      input.value = String(value);\n      return value;\n    }\n\n    function selectedProducts() {\n      return quantityInputs\n        .map((input) => ({\n          name: input.closest(\".mgv-stepper\").dataset.product,\n          quantity: normalizeQuantity(input)\n        }))\n        .filter((product) => product.quantity > 0);\n    }\n\n    function buildMessage() {\n      const customerName = nameInput.value.trim();\n      const customerContact = customerContactInput.value.trim();\n      const customerAddress = addressInput.value.trim();\n      const products = selectedProducts();\n      const productLines = products.map(\n        (product) => `${product.quantity} \u00d7 ${product.name} (je ca. 600 g)`\n      );\n      const customerLines = [\n        `Name: ${customerName}`,\n        `Kontakt: ${customerContact}`\n      ];\n\n      if (customerAddress) {\n        customerLines.push(`Adresse: ${customerAddress}`);\n      }\n\n      return [\n        \"Hallo,\",\n        \"\",\n        \"ich m\u00f6chte f\u00fcr das Backesfest des MGV Imhausen am Sonntag, 20.09.2026, folgende Brote vorbestellen:\",\n        \"\",\n        ...productLines,\n        \"\",\n        ...customerLines,\n        \"Abholung: Sonntag, 20.09.2026, ab 11:00 Uhr\",\n        \"Preis: 0,60 \u20ac je 100 g; die Brote werden vor Ort gewogen.\",\n        \"\",\n        \"Vielen Dank!\"\n      ].join(\"\\n\");\n    }\n\n    function currentState() {\n      const hasName = nameInput.value.trim().length > 0;\n      const hasContact = customerContactInput.value.trim().length > 0;\n      const hasValidContact = isValidCustomerContact(customerContactInput.value);\n      const hasProducts = selectedProducts().length > 0;\n      const hasConfirmation = confirmationInput.checked;\n      return {\n        hasName,\n        hasContact,\n        hasValidContact,\n        hasProducts,\n        hasConfirmation,\n        valid: hasName && hasValidContact && hasProducts && hasConfirmation\n      };\n    }\n\n    function updateInterface() {\n      const state = currentState();\n      actionButtons.forEach((button) => {\n        button.disabled = !state.valid;\n      });\n      customerContactInput.setAttribute(\n        \"aria-invalid\",\n        state.hasContact && !state.hasValidContact ? \"true\" : \"false\"\n      );\n\n      if (state.hasName && state.hasValidContact && state.hasProducts) {\n        preview.textContent = buildMessage();\n      }\n\n      if (state.valid) {\n        status.textContent = \"Bitte jetzt den gew\u00fcnschten Bestellweg ausw\u00e4hlen.\";\n        status.dataset.state = \"success\";\n      } else if (!state.hasName && !state.hasContact && !state.hasProducts) {\n        preview.textContent = \"Bitte zuerst Namen und Kontakt eintragen sowie mindestens ein Brot ausw\u00e4hlen.\";\n        status.textContent = \"Bitte Namen und Kontakt eintragen, mindestens ein Brot ausw\u00e4hlen und die Hinweise best\u00e4tigen.\";\n        status.dataset.state = \"\";\n      } else if (!state.hasName) {\n        preview.textContent = \"Bitte noch den Namen eintragen.\";\n        status.textContent = \"Der Name ist ein Pflichtfeld.\";\n        status.dataset.state = \"error\";\n      } else if (!state.hasContact) {\n        preview.textContent = \"Bitte noch eine E-Mail-Adresse oder Telefonnummer eintragen.\";\n        status.textContent = \"Eine E-Mail-Adresse oder Telefonnummer ist erforderlich.\";\n        status.dataset.state = \"error\";\n      } else if (!state.hasValidContact) {\n        preview.textContent = \"Bitte die Kontaktangabe \u00fcberpr\u00fcfen.\";\n        status.textContent = \"Bitte eine g\u00fcltige E-Mail-Adresse oder Telefonnummer eintragen.\";\n        status.dataset.state = \"error\";\n      } else if (!state.hasProducts) {\n        preview.textContent = \"Bitte mindestens ein Kartoffelbrot oder Bauernbrot ausw\u00e4hlen.\";\n        status.textContent = \"Die Gesamtmenge muss mindestens ein Brot betragen.\";\n        status.dataset.state = \"error\";\n      } else {\n        status.textContent = \"Bitte noch die Hinweise zu AGB und Datenschutz best\u00e4tigen.\";\n        status.dataset.state = \"error\";\n      }\n    }\n\n    root.querySelectorAll(\".mgv-stepper button\").forEach((button) => {\n      button.addEventListener(\"click\", () => {\n        const input = button.parentElement.querySelector('input[type=\"number\"]');\n        const change = Number(button.dataset.change);\n        input.value = String(normalizeQuantity(input) + change);\n        normalizeQuantity(input);\n        updateInterface();\n      });\n    });\n\n    nameInput.addEventListener(\"input\", updateInterface);\n    customerContactInput.addEventListener(\"input\", updateInterface);\n    customerContactInput.addEventListener(\"blur\", updateInterface);\n    addressInput.addEventListener(\"input\", updateInterface);\n    confirmationInput.addEventListener(\"change\", updateInterface);\n    quantityInputs.forEach((input) => {\n      input.addEventListener(\"input\", updateInterface);\n      input.addEventListener(\"change\", updateInterface);\n      input.addEventListener(\"blur\", updateInterface);\n    });\n\n    function showConfigurationError(channel) {\n      status.textContent = `F\u00fcr ${channel} m\u00fcssen zuerst die Kontaktdaten im Code eingetragen werden.`;\n      status.dataset.state = \"error\";\n    }\n\n    function copyMessage(message) {\n      if (navigator.clipboard && window.isSecureContext) {\n        return navigator.clipboard.writeText(message);\n      }\n\n      return new Promise((resolve, reject) => {\n        const textArea = document.createElement(\"textarea\");\n        textArea.value = message;\n        textArea.setAttribute(\"readonly\", \"\");\n        textArea.style.position = \"fixed\";\n        textArea.style.opacity = \"0\";\n        document.body.appendChild(textArea);\n        textArea.select();\n\n        try {\n          document.execCommand(\"copy\") ? resolve() : reject(new Error(\"Kopieren fehlgeschlagen\"));\n        } catch (error) {\n          reject(error);\n        } finally {\n          textArea.remove();\n        }\n      });\n    }\n\n    actionButtons.forEach((button) => {\n      button.addEventListener(\"click\", async () => {\n        const state = currentState();\n        if (!state.valid) {\n          updateInterface();\n          if (!state.hasName) {\n            nameInput.focus();\n          } else if (!state.hasValidContact) {\n            customerContactInput.focus();\n          } else if (!state.hasProducts) {\n            quantityInputs[0].focus();\n          } else {\n            confirmationInput.focus();\n          }\n          return;\n        }\n\n        const channel = button.dataset.channel;\n        const message = buildMessage();\n        const encodedMessage = encodeURIComponent(message);\n        const subject = encodeURIComponent(\"Brotvorbestellung zum Backesfest 2026\");\n\n        if (channel === \"email\") {\n          if (!isConfigured(contact.email)) {\n            showConfigurationError(\"E-Mail\");\n            return;\n          }\n          window.location.href = `mailto:${contact.email}?subject=${subject}&body=${encodedMessage}`;\n          return;\n        }\n\n        if (channel === \"whatsapp\") {\n          if (!isConfigured(contact.phoneLink)) {\n            showConfigurationError(\"WhatsApp\");\n            return;\n          }\n          window.open(\n            `https:\/\/wa.me\/${whatsAppPhone(contact.phoneLink)}?text=${encodedMessage}`,\n            \"_blank\",\n            \"noopener,noreferrer\"\n          );\n          return;\n        }\n\n        if (channel === \"copy\") {\n          try {\n            await copyMessage(message);\n            status.textContent = \"Der Bestelltext wurde kopiert.\";\n            status.dataset.state = \"success\";\n          } catch (error) {\n            status.textContent = \"Der Text konnte nicht automatisch kopiert werden. Bitte den Text aus der Vorschau markieren.\";\n            status.dataset.state = \"error\";\n          }\n        }\n      });\n    });\n\n    updateInterface();\n  })();\n<\/script>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>MGV Imhausen Brotvorbestellung zum Backesfest Damit wir die ben\u00f6tigte Brotmenge besser planen k\u00f6nnen, k\u00f6nnt ihr hier Kartoffelbrot und Bauernbrot vorbestellen. W\u00e4hlt die gew\u00fcnschte Menge aus und sendet die vorbereitete Nachricht anschlie\u00dfend per E-Mail oder WhatsApp. Backesfest Sonntag, 20.09.2026 Abholung Ab 11:00 Uhr Vorbestellung bis Dienstag, 15.09.2026 Ihr m\u00f6chtet lieber anrufen? Vorbestellungen nehmen wir auch telefonisch [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-c.php","meta":{"ngg_post_thumbnail":0,"footnotes":""},"class_list":["post-30623","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.mgv-imhausen.de\/index.php?rest_route=\/wp\/v2\/pages\/30623","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mgv-imhausen.de\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.mgv-imhausen.de\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.mgv-imhausen.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mgv-imhausen.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=30623"}],"version-history":[{"count":6,"href":"https:\/\/www.mgv-imhausen.de\/index.php?rest_route=\/wp\/v2\/pages\/30623\/revisions"}],"predecessor-version":[{"id":30633,"href":"https:\/\/www.mgv-imhausen.de\/index.php?rest_route=\/wp\/v2\/pages\/30623\/revisions\/30633"}],"wp:attachment":[{"href":"https:\/\/www.mgv-imhausen.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=30623"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}