{"id":4172,"date":"2026-05-08T23:40:28","date_gmt":"2026-05-08T21:40:28","guid":{"rendered":"https:\/\/mihalca.de\/?page_id=4172"},"modified":"2026-05-09T15:09:16","modified_gmt":"2026-05-09T13:09:16","slug":"tool","status":"publish","type":"page","link":"https:\/\/mihalca.de\/pl\/tool\/","title":{"rendered":"Tool"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"4172\" class=\"elementor elementor-4172\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f3c7fba elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile e-flex e-con-boxed e-con e-parent\" data-id=\"f3c7fba\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9ea67cc elementor-widget elementor-widget-html\" data-id=\"9ea67cc\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"booking-calculator\">\n    <h3>\u00dcbernachtungs-Rechner<\/h3>\n    \n    <div class=\"input-group\">\n        <label for=\"checkin\">Anreise:<\/label>\n        <input type=\"date\" id=\"checkin\" onchange=\"calculateNights()\">\n    <\/div>\n\n    <div class=\"input-group\">\n        <label for=\"checkout\">Abreise:<\/label>\n        <input type=\"date\" id=\"checkout\" onchange=\"calculateNights()\">\n    <\/div>\n\n    <div class=\"result-area\">\n        <p>Anzahl \u00dcbernachtungen: <span id=\"night-count\">0<\/span><\/p>\n    <\/div>\n<\/div>\n\n<style>\n    \/* Styling f\u00fcr das Tool - kannst du nach Belieben anpassen *\/\n    .booking-calculator {\n        background: #f9f9f9;\n        padding: 20px;\n        border-radius: 8px;\n        border: 1px solid #ddd;\n        max-width: 300px;\n        font-family: sans-serif;\n    }\n    .input-group {\n        margin-bottom: 15px;\n    }\n    .input-group label {\n        display: block;\n        margin-bottom: 5px;\n        font-weight: bold;\n    }\n    .input-group input {\n        width: 100%;\n        padding: 8px;\n        border: 1px solid #ccc;\n        border-radius: 4px;\n    }\n    .result-area {\n        margin-top: 20px;\n        padding-top: 10px;\n        border-top: 2px solid #0073aa; \/* WordPress Blau *\/\n        font-size: 1.1em;\n        font-weight: bold;\n    }\n    #night-count {\n        color: #0073aa;\n    }\n<\/style>\n\n<script>\n    function calculateNights() {\n        const checkinInput = document.getElementById('checkin').value;\n        const checkoutInput = document.getElementById('checkout').value;\n        const resultSpan = document.getElementById('night-count');\n\n        if (checkinInput && checkoutInput) {\n            const checkinDate = new Date(checkinInput);\n            const checkoutDate = new Date(checkoutInput);\n\n            \/\/ Zeitdifferenz in Millisekunden\n            const diffInMs = checkoutDate - checkinDate;\n\n            \/\/ Umrechnung in Tage\n            \/\/ 1 Tag = 24h * 60min * 60sek * 1000ms\n            const diffInDays = diffInMs \/ (1000 * 60 * 60 * 24);\n\n            if (diffInDays > 0) {\n                resultSpan.innerText = diffInDays;\n            } else if (diffInDays <= 0) {\n                resultSpan.innerText = \"Abreise muss nach Anreise liegen\";\n            } else {\n                resultSpan.innerText = \"0\";\n            }\n        } else {\n            resultSpan.innerText = \"0\";\n        }\n    }\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ee7ae7c e-flex e-con-boxed e-con e-parent\" data-id=\"ee7ae7c\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-04f5eb6 elementor-widget elementor-widget-html\" data-id=\"04f5eb6\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"booking-card\">\n    <div class=\"card-header\">\n        <h3>Buchungskalkulator<\/h3>\n        <p>Einfach N\u00e4chte & Preis berechnen<\/p>\n    <\/div>\n\n    <div class=\"card-body\">\n        <div class=\"input-grid\">\n            <div class=\"input-field\">\n                <label for=\"checkin\">Anreise<\/label>\n                <input type=\"date\" id=\"checkin\" oninput=\"prepareCheckout()\">\n            <\/div>\n            <div class=\"input-field\">\n                <label for=\"checkout\">Abreise<\/label>\n                <input type=\"date\" id=\"checkout\">\n            <\/div>\n            <div class=\"input-field\">\n                <label for=\"persons\">Personen<\/label>\n                <input type=\"number\" id=\"persons\" value=\"1\" min=\"1\">\n            <\/div>\n            <div class=\"input-field\">\n                <label for=\"pricePerNight\">Preis \/ Nacht (\u20ac)<\/label>\n                <input type=\"number\" id=\"pricePerNight\" placeholder=\"z.B. 100\">\n            <\/div>\n        <\/div>\n\n        <button type=\"button\" class=\"calc-button\" onclick=\"calculateBooking()\">\n            Jetzt berechnen\n        <\/button>\n\n        <div id=\"result-box\" class=\"result-box\">\n            <div class=\"res-row\">\n                <span>Dauer:<\/span>\n                <span id=\"res-nights\">-<\/span>\n            <\/div>\n            <div class=\"res-row\">\n                <span>Preis p.P. \/ Nacht:<\/span>\n                <span id=\"res-per-person\">-<\/span>\n            <\/div>\n            <div class=\"res-total\">\n                <span>Gesamtpreis:<\/span>\n                <span id=\"res-total\">-<\/span>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<style>\n    .booking-card {\n        background: #ffffff;\n        border-radius: 15px;\n        border: 1px solid #dee2e6;\n        box-shadow: 0 8px 30px rgba(0,0,0,0.1);\n        max-width: 420px;\n        margin: 20px auto;\n        font-family: sans-serif;\n    }\n    .card-header {\n        background: #f8f9fa;\n        padding: 20px;\n        border-bottom: 1px solid #dee2e6;\n        border-radius: 15px 15px 0 0;\n        text-align: center;\n    }\n    .card-header h3 { margin: 0; color: #212529; font-size: 1.3rem; }\n    .card-header p { margin: 5px 0 0; color: #6c757d; font-size: 0.85rem; }\n    .card-body { padding: 25px; }\n    .input-grid {\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n        gap: 15px;\n        margin-bottom: 20px;\n    }\n    .input-field label {\n        display: block;\n        font-size: 0.75rem;\n        font-weight: bold;\n        margin-bottom: 5px;\n        color: #495057;\n        text-transform: uppercase;\n    }\n    .input-field input {\n        width: 100%;\n        padding: 10px;\n        border: 1px solid #ced4da;\n        border-radius: 8px;\n        box-sizing: border-box;\n    }\n    .calc-button {\n        width: 100%;\n        background: #007bff;\n        color: white;\n        border: none;\n        padding: 15px;\n        border-radius: 8px;\n        font-weight: bold;\n        cursor: pointer;\n        font-size: 1rem;\n        transition: 0.3s;\n    }\n    .calc-button:hover { background: #0056b3; }\n    .result-box {\n        margin-top: 25px;\n        padding: 15px;\n        background: #e7f1ff;\n        border-radius: 10px;\n        display: none;\n    }\n    .res-row { display: flex; justify-content: space-between; margin-bottom: 5px; font-size: 0.9rem; }\n    .res-total {\n        display: flex;\n        justify-content: space-between;\n        margin-top: 10px;\n        padding-top: 10px;\n        border-top: 1px solid #b8daff;\n        font-size: 1.2rem;\n        font-weight: 800;\n        color: #0056b3;\n    }\n<\/style>\n\n<script>\n    function prepareCheckout() {\n        const checkinDate = document.getElementById('checkin').value;\n        const checkoutInput = document.getElementById('checkout');\n        if (checkinDate) {\n            \/\/ Verhindert, dass man vor der Anreise abreist\n            checkoutInput.min = checkinDate;\n            \/\/ Fokus setzen\n            checkoutInput.focus();\n        }\n    }\n\n    function calculateBooking() {\n        const inVal = document.getElementById('checkin').value;\n        const outVal = document.getElementById('checkout').value;\n        const pers = parseInt(document.getElementById('persons').value) || 1;\n        const price = parseFloat(document.getElementById('pricePerNight').value) || 0;\n\n        if (!inVal || !outVal) {\n            alert(\"Bitte w\u00e4hle beide Daten aus.\");\n            return;\n        }\n\n        const d1 = new Date(inVal);\n        const d2 = new Date(outVal);\n        \n        \/\/ Millisekunden Differenz zu Tagen\n        const diffTime = d2.getTime() - d1.getTime();\n        const nights = Math.ceil(diffTime \/ (1000 * 60 * 60 * 24));\n\n        if (nights <= 0) {\n            alert(\"Die Abreise muss nach der Anreise liegen.\");\n            return;\n        }\n\n        const total = nights * price * pers;\n        const perPerson = price; \/\/ Pro Nacht pro Person\n\n        \/\/ Anzeige\n        document.getElementById('res-nights').textContent = nights + (nights === 1 ? ' Nacht' : ' N\u00e4chte');\n        document.getElementById('res-per-person').textContent = perPerson.toLocaleString('de-DE', {minimumFractionDigits: 2}) + ' \u20ac';\n        document.getElementById('res-total').textContent = total.toLocaleString('de-DE', {minimumFractionDigits: 2}) + ' \u20ac';\n        \n        document.getElementById('result-box').style.display = 'block';\n    }\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>\u00dcbernachtungs-Rechner Anreise: Abreise: Anzahl \u00dcbernachtungen: 0 Buchungskalkulator Einfach N\u00e4chte &#038; Preis berechnen Anreise Abreise Personen Preis \/ Nacht (\u20ac) Jetzt berechnen Dauer: &#8211; Preis p.P. \/ Nacht: &#8211; Gesamtpreis: &#8211;<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-4172","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/mihalca.de\/pl\/wp-json\/wp\/v2\/pages\/4172","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mihalca.de\/pl\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mihalca.de\/pl\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mihalca.de\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mihalca.de\/pl\/wp-json\/wp\/v2\/comments?post=4172"}],"version-history":[{"count":25,"href":"https:\/\/mihalca.de\/pl\/wp-json\/wp\/v2\/pages\/4172\/revisions"}],"predecessor-version":[{"id":4197,"href":"https:\/\/mihalca.de\/pl\/wp-json\/wp\/v2\/pages\/4172\/revisions\/4197"}],"wp:attachment":[{"href":"https:\/\/mihalca.de\/pl\/wp-json\/wp\/v2\/media?parent=4172"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}