Anmeldung \u2013 KRAFTWERK Fitness<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Anton&family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n<style>\n :root{\n --ink:#101014;\n --ink-2:#1a1a20;\n --chalk:#F4F2EC;\n --paper:#FFFFFF;\n --orange:#FF4A1C;\n --orange-deep:#E03A10;\n --steel:#6B6B74;\n --line:#E4E1D8;\n --line-dark:#2c2c33;\n --radius:14px;\n }\n\n *{box-sizing:border-box;margin:0;padding:0}\n\n html{-webkit-text-size-adjust:100%}\n\n body{\n font-family:'Inter',system-ui,sans-serif;\n color:var(--ink);\n background:var(--chalk);\n line-height:1.5;\n -webkit-font-smoothing:antialiased;\n }\n\n .layout{\n display:grid;\n grid-template-columns:minmax(320px,420px) 1fr;\n min-height:100vh;\n }\n\n \/* ---------- Brand panel ---------- *\/\n .brand{\n background:var(--ink);\n color:var(--chalk);\n padding:48px 44px;\n display:flex;\n flex-direction:column;\n justify-content:space-between;\n position:sticky;\n top:0;\n height:100vh;\n overflow:hidden;\n }\n .brand::after{\n content:\"\";\n position:absolute;\n right:-120px;\n bottom:-120px;\n width:340px;height:340px;\n border:40px solid var(--orange);\n border-radius:50%;\n opacity:.16;\n pointer-events:none;\n }\n\n .logo{\n font-family:'Anton',sans-serif;\n font-size:26px;\n letter-spacing:.04em;\n text-transform:uppercase;\n display:flex;\n align-items:center;\n gap:10px;\n }\n .logo .mark{\n width:14px;height:26px;\n background:var(--orange);\n display:inline-block;\n transform:skewX(-12deg);\n }\n\n .brand-hero{position:relative;z-index:1}\n .eyebrow{\n font-size:12px;\n font-weight:600;\n letter-spacing:.22em;\n text-transform:uppercase;\n color:var(--orange);\n margin-bottom:18px;\n }\n .brand-hero h1{\n font-family:'Anton',sans-serif;\n font-size:clamp(40px,5vw,60px);\n line-height:.92;\n text-transform:uppercase;\n letter-spacing:.005em;\n }\n .brand-hero h1 em{\n font-style:normal;\n color:var(--orange);\n }\n .brand-hero p{\n margin-top:20px;\n color:#b7b6bd;\n font-size:15px;\n max-width:30ch;\n }\n\n .brand-points{\n list-style:none;\n position:relative;z-index:1;\n display:flex;\n flex-direction:column;\n gap:14px;\n }\n .brand-points li{\n display:flex;\n align-items:center;\n gap:12px;\n font-size:14px;\n color:#d4d3d9;\n }\n .brand-points span{\n width:22px;height:22px;\n flex:0 0 22px;\n border:1.5px solid var(--orange);\n color:var(--orange);\n border-radius:50%;\n display:grid;place-items:center;\n font-size:12px;font-weight:700;\n }\n\n \/* ---------- Form panel ---------- *\/\n .form-panel{\n padding:56px clamp(24px,6vw,88px);\n max-width:920px;\n }\n\n .form-head h2{\n font-family:'Anton',sans-serif;\n font-size:34px;\n text-transform:uppercase;\n letter-spacing:.01em;\n }\n .form-head p{\n color:var(--steel);\n margin-top:8px;\n font-size:15px;\n }\n\n form{margin-top:40px}\n\n .section-label{\n display:flex;\n align-items:baseline;\n gap:12px;\n margin-bottom:18px;\n }\n .section-label .num{\n font-family:'Anton',sans-serif;\n color:var(--orange);\n font-size:18px;\n }\n .section-label h3{\n font-size:13px;\n font-weight:700;\n letter-spacing:.14em;\n text-transform:uppercase;\n }\n .section-label .rule{\n flex:1;\n height:1px;\n background:var(--line);\n }\n\n .grid{\n display:grid;\n grid-template-columns:1fr 1fr;\n gap:18px 20px;\n }\n .field{display:flex;flex-direction:column}\n .field.full{grid-column:1 \/ -1}\n\n label{\n font-size:13px;\n font-weight:600;\n margin-bottom:7px;\n }\n label .opt{color:var(--steel);font-weight:400}\n\n input,select{\n font-family:inherit;\n font-size:15px;\n padding:13px 14px;\n border:1.5px solid var(--line);\n border-radius:10px;\n background:var(--paper);\n color:var(--ink);\n transition:border-color .15s, box-shadow .15s;\n }\n input::placeholder{color:#b4b2aa}\n input:focus,select:focus{\n outline:none;\n border-color:var(--orange);\n box-shadow:0 0 0 3px rgba(255,74,28,.16);\n }\n\n \/* ---------- Plan cards (signature) ---------- *\/\n .plans{margin-top:40px}\n .plan-grid{\n display:grid;\n grid-template-columns:repeat(4,1fr);\n gap:14px;\n }\n .plan{\n position:relative;\n border:1.5px solid var(--line);\n border-radius:var(--radius);\n background:var(--paper);\n padding:20px 18px 18px;\n cursor:pointer;\n transition:border-color .15s, transform .15s, box-shadow .15s;\n }\n .plan:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(16,16,20,.08)}\n .plan input{position:absolute;opacity:0;pointer-events:none}\n\n .plan .tag{\n position:absolute;\n top:-10px;right:14px;\n background:var(--orange);\n color:#fff;\n font-size:10px;\n font-weight:700;\n letter-spacing:.1em;\n text-transform:uppercase;\n padding:4px 9px;\n border-radius:20px;\n }\n\n .plan h4{\n font-family:'Anton',sans-serif;\n font-size:18px;\n text-transform:uppercase;\n letter-spacing:.02em;\n }\n .plan .desc{\n font-size:12.5px;\n color:var(--steel);\n margin:4px 0 16px;\n min-height:34px;\n }\n .plan .price{\n font-family:'Anton',sans-serif;\n font-size:30px;\n line-height:1;\n }\n .plan .price small{\n font-family:'Inter',sans-serif;\n font-size:12px;\n font-weight:500;\n color:var(--steel);\n margin-left:3px;\n }\n\n \/* Einsatz \/ commitment meter *\/\n .meter{\n display:flex;\n gap:4px;\n margin-top:16px;\n }\n .meter span{\n height:5px;\n flex:1;\n border-radius:3px;\n background:var(--line);\n }\n .plan[data-load=\"1\"] .meter span:nth-child(-n+1),\n .plan[data-load=\"2\"] .meter span:nth-child(-n+2),\n .plan[data-load=\"3\"] .meter span:nth-child(-n+3),\n .plan[data-load=\"4\"] .meter span:nth-child(-n+4){\n background:var(--orange);\n }\n .meter-label{\n font-size:10px;\n letter-spacing:.12em;\n text-transform:uppercase;\n color:var(--steel);\n margin-top:8px;\n }\n\n .plan input:checked ~ .check-state{display:block}\n .plan:has(input:checked){\n border-color:var(--ink);\n box-shadow:0 0 0 2px var(--ink);\n }\n .plan .picked{\n position:absolute;\n top:14px;left:18px;\n width:18px;height:18px;\n border:2px solid var(--line);\n border-radius:50%;\n transition:.15s;\n }\n .plan:has(input:checked) .picked{\n border-color:var(--ink);\n background:var(--ink);\n box-shadow:inset 0 0 0 3px var(--paper);\n }\n .plan h4,.plan .desc,.plan .price{padding-left:30px}\n\n \/* ---------- consent + submit ---------- *\/\n .consent{\n display:flex;\n gap:12px;\n align-items:flex-start;\n margin-top:34px;\n font-size:13.5px;\n color:#3a3a40;\n }\n .consent input{\n width:18px;height:18px;\n margin-top:2px;\n accent-color:var(--orange);\n flex:0 0 18px;\n padding:0;\n border-radius:4px;\n }\n .consent a{color:var(--ink);text-decoration:underline}\n\n .actions{\n margin-top:30px;\n display:flex;\n align-items:center;\n gap:20px;\n flex-wrap:wrap;\n }\n .btn{\n font-family:'Anton',sans-serif;\n font-size:18px;\n letter-spacing:.04em;\n text-transform:uppercase;\n background:var(--orange);\n color:#fff;\n border:none;\n padding:16px 38px;\n border-radius:10px;\n cursor:pointer;\n transition:background .15s, transform .1s;\n }\n .btn:hover{background:var(--orange-deep)}\n .btn:active{transform:translateY(1px)}\n .actions .note{font-size:13px;color:var(--steel)}\n\n .success{\n display:none;\n margin-top:24px;\n padding:16px 18px;\n border:1.5px solid var(--orange);\n border-left-width:6px;\n border-radius:10px;\n background:#fff;\n font-size:14px;\n }\n .success strong{display:block;font-size:15px;margin-bottom:2px}\n\n \/* ---------- responsive ---------- *\/\n @media (max-width:980px){\n .layout{grid-template-columns:1fr}\n .brand{\n position:static;\n height:auto;\n flex-direction:column;\n gap:32px;\n padding:36px 28px;\n }\n .brand::after{width:220px;height:220px;right:-80px;bottom:-80px}\n .form-panel{padding:40px 28px 64px}\n .plan-grid{grid-template-columns:1fr 1fr}\n }\n @media (max-width:560px){\n .grid{grid-template-columns:1fr}\n .plan-grid{grid-template-columns:1fr}\n .form-head h2{font-size:28px}\n }\n\n @media (prefers-reduced-motion:reduce){\n *{transition:none !important}\n .plan:hover{transform:none}\n }\n<\/style>\n<\/head>\n<body>\n<div class=\"layout\">\n\n \n <aside class=\"brand\">\n <div class=\"logo\"><span class=\"mark\"><\/span>Kraftwerk<\/div>\n\n <div class=\"brand-hero\">\n <p class=\"eyebrow\">Mitglied werden<\/p>\n <h1>Jeder<br>Anfang<br>ist ein <em>Satz.<\/em><\/h1>\n <p>Trag dich ein, w\u00e4hl deinen Einsatz und steh beim n\u00e4chsten Training auf der Matte.<\/p>\n <\/div>\n\n <ul class=\"brand-points\">\n <li><span>1<\/span> Eintragen \u2013 dauert keine zwei Minuten<\/li>\n <li><span>2<\/span> Tarif w\u00e4hlen, vom Probetraining bis zum Jahr<\/li>\n <li><span>3<\/span> Loslegen \u2013 Zugang kommt per E-Mail<\/li>\n <\/ul>\n <\/aside>\n\n \n <main class=\"form-panel\">\n <div class=\"form-head\">\n <h2>Anmeldung<\/h2>\n <p>Sch\u00f6n, dass du dabei bist. F\u00fcll deine Daten aus und such dir den passenden Tarif.<\/p>\n <\/div>\n\n <form id=\"signupForm\" novalidate>\n\n \n <div class=\"section-label\">\n <span class=\"num\">01<\/span>\n <h3>Deine Daten<\/h3>\n <span class=\"rule\"><\/span>\n <\/div>\n\n <div class=\"grid\">\n <div class=\"field\">\n <label for=\"vorname\">Vorname<\/label>\n <input id=\"vorname\" name=\"vorname\" type=\"text\" placeholder=\"Max\" required>\n <\/div>\n <div class=\"field\">\n <label for=\"nachname\">Nachname<\/label>\n <input id=\"nachname\" name=\"nachname\" type=\"text\" placeholder=\"Mustermann\" required>\n <\/div>\n <div class=\"field\">\n <label for=\"email\">E-Mail<\/label>\n <input id=\"email\" name=\"email\" type=\"email\" placeholder=\"max@beispiel.at\" required>\n <\/div>\n <div class=\"field\">\n <label for=\"telefon\">Telefon<\/label>\n <input id=\"telefon\" name=\"telefon\" type=\"tel\" placeholder=\"+43 660 1234567\">\n <\/div>\n <div class=\"field\">\n <label for=\"geburtsdatum\">Geburtsdatum<\/label>\n <input id=\"geburtsdatum\" name=\"geburtsdatum\" type=\"date\" required>\n <\/div>\n <div class=\"field\">\n <label for=\"geschlecht\">Geschlecht <span class=\"opt\">(optional)<\/span><\/label>\n <select id=\"geschlecht\" name=\"geschlecht\">\n <option value=\"\">Keine Angabe<\/option>\n <option>Weiblich<\/option>\n <option>M\u00e4nnlich<\/option>\n <option>Divers<\/option>\n <\/select>\n <\/div>\n <div class=\"field full\">\n <label for=\"adresse\">Adresse<\/label>\n <input id=\"adresse\" name=\"adresse\" type=\"text\" placeholder=\"Stra\u00dfe, Hausnummer, PLZ, Ort\">\n <\/div>\n <div class=\"field\">\n <label for=\"passwort\">Passwort<\/label>\n <input id=\"passwort\" name=\"passwort\" type=\"password\" placeholder=\"Mind. 8 Zeichen\" required>\n <\/div>\n <div class=\"field\">\n <label for=\"passwort2\">Passwort best\u00e4tigen<\/label>\n <input id=\"passwort2\" name=\"passwort2\" type=\"password\" placeholder=\"Wiederholen\" required>\n <\/div>\n <\/div>\n\n \n <div class=\"plans\">\n <div class=\"section-label\">\n <span class=\"num\">02<\/span>\n <h3>Dein Einsatz<\/h3>\n <span class=\"rule\"><\/span>\n <\/div>\n\n <div class=\"plan-grid\">\n\n <label class=\"plan\" data-load=\"1\">\n <input type=\"radio\" name=\"tarif\" value=\"gratis\" required>\n <span class=\"picked\" aria-hidden=\"true\"><\/span>\n <h4>Gratistraining<\/h4>\n <p class=\"desc\">Einmalig reinschnuppern, ganz unverbindlich.<\/p>\n <div class=\"price\">\u20ac0<small>einmalig<\/small><\/div>\n <div class=\"meter\"><span><\/span><span><\/span><span><\/span><span><\/span><\/div>\n <div class=\"meter-label\">Probe<\/div>\n <\/label>\n\n <label class=\"plan\" data-load=\"2\">\n <input type=\"radio\" name=\"tarif\" value=\"block10\">\n <span class=\"picked\" aria-hidden=\"true\"><\/span>\n <h4>10er Block<\/h4>\n <p class=\"desc\">Zehn Einheiten, flexibel einl\u00f6sbar.<\/p>\n <div class=\"price\">\u20ac129<small>\/ 10 Einheiten<\/small><\/div>\n <div class=\"meter\"><span><\/span><span><\/span><span><\/span><span><\/span><\/div>\n <div class=\"meter-label\">Flexibel<\/div>\n <\/label>\n\n <label class=\"plan\" data-load=\"3\">\n <input type=\"radio\" name=\"tarif\" value=\"monat\">\n <span class=\"picked\" aria-hidden=\"true\"><\/span>\n <h4>Monatskarte<\/h4>\n <p class=\"desc\">Unbegrenzt trainieren, monatlich k\u00fcndbar.<\/p>\n <div class=\"price\">\u20ac49<small>\/ Monat<\/small><\/div>\n <div class=\"meter\"><span><\/span><span><\/span><span><\/span><span><\/span><\/div>\n <div class=\"meter-label\">Regelm\u00e4\u00dfig<\/div>\n <\/label>\n\n <label class=\"plan\" data-load=\"4\">\n <input type=\"radio\" name=\"tarif\" value=\"jahr\">\n <span class=\"tag\">Bester Wert<\/span>\n <span class=\"picked\" aria-hidden=\"true\"><\/span>\n <h4>Jahreskarte<\/h4>\n <p class=\"desc\">Zw\u00f6lf Monate, zwei davon gehen aufs Haus.<\/p>\n <div class=\"price\">\u20ac490<small>\/ Jahr<\/small><\/div>\n <div class=\"meter\"><span><\/span><span><\/span><span><\/span><span><\/span><\/div>\n <div class=\"meter-label\">All-in<\/div>\n <\/label>\n\n <\/div>\n <\/div>\n\n \n <label class=\"consent\">\n <input type=\"checkbox\" name=\"agb\" required>\n <span>Ich akzeptiere die <a href=\"#\">AGB<\/a> und die <a href=\"#\">Datenschutzerkl\u00e4rung<\/a> und bin damit einverstanden, dass meine Daten zur Vertragsabwicklung verarbeitet werden.<\/span>\n <\/label>\n\n <div class=\"actions\">\n <button type=\"submit\" class=\"btn\">Jetzt anmelden<\/button>\n <span class=\"note\">Du gehst noch keinen kostenpflichtigen Vertrag ein, bevor du am Empfang best\u00e4tigst.<\/span>\n <\/div>\n\n <div class=\"success\" id=\"success\" role=\"status\">\n <strong>Anmeldung eingegangen.<\/strong>\n <span id=\"successText\">Wir schicken dir die n\u00e4chsten Schritte per E-Mail.<\/span>\n <\/div>\n\n <\/form>\n <\/main>\n<\/div>\n\n<script>\n const form = document.getElementById('signupForm');\n const success = document.getElementById('success');\n const successText = document.getElementById('successText');\n\n const tarifNamen = {\n gratis: 'Gratistraining',\n block10: '10er Block',\n monat: 'Monatskarte',\n jahr: 'Jahreskarte'\n };\n\n form.addEventListener('submit', function (e) {\n e.preventDefault();\n\n const pw = form.passwort.value;\n const pw2 = form.passwort2.value;\n if (pw !== pw2) {\n form.passwort2.setCustomValidity('Die Passw\u00f6rter stimmen nicht \u00fcberein.');\n form.passwort2.reportValidity();\n return;\n }\n form.passwort2.setCustomValidity('');\n\n if (!form.checkValidity()) {\n form.reportValidity();\n return;\n }\n\n const tarif = form.tarif.value;\n const vorname = form.vorname.value.trim();\n successText.textContent =\n `${vorname ? vorname + ', deine' : 'Deine'} Anmeldung f\u00fcr \u201e${tarifNamen[tarif]}\" ist da \u2013 wir schicken dir die n\u00e4chsten Schritte an ${form.email.value}.`;\n success.style.display = 'block';\n success.scrollIntoView({ behavior: 'smooth', block: 'center' });\n });\n\n \/\/ reset custom validity while typing\n form.passwort2.addEventListener('input', () => form.passwort2.setCustomValidity(''));\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Anmeldung \u2013 KRAFTWERK Fitness Kraftwerk Mitglied werden JederAnfangist ein Satz. Trag dich ein, w\u00e4hl deinen Einsatz und steh beim n\u00e4chsten Training auf der Matte. 1 Eintragen \u2013 dauert keine zwei Minuten 2 Tarif w\u00e4hlen, vom Probetraining bis zum Jahr 3 Loslegen \u2013 Zugang kommt per E-Mail Anmeldung Sch\u00f6n, dass du dabei bist. F\u00fcll deine Daten […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-55","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/eager-sutherland.185-178-193-218.plesk.page\/index.php?rest_route=\/wp\/v2\/pages\/55","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eager-sutherland.185-178-193-218.plesk.page\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/eager-sutherland.185-178-193-218.plesk.page\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/eager-sutherland.185-178-193-218.plesk.page\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eager-sutherland.185-178-193-218.plesk.page\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=55"}],"version-history":[{"count":8,"href":"https:\/\/eager-sutherland.185-178-193-218.plesk.page\/index.php?rest_route=\/wp\/v2\/pages\/55\/revisions"}],"predecessor-version":[{"id":65,"href":"https:\/\/eager-sutherland.185-178-193-218.plesk.page\/index.php?rest_route=\/wp\/v2\/pages\/55\/revisions\/65"}],"wp:attachment":[{"href":"https:\/\/eager-sutherland.185-178-193-218.plesk.page\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=55"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n\n\nAnmeldung \u2013 KRAFTWERK Fitness<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Anton&family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n<style>\n :root{\n --ink:#101014;\n --ink-2:#1a1a20;\n --chalk:#F4F2EC;\n --paper:#FFFFFF;\n --orange:#FF4A1C;\n --orange-deep:#E03A10;\n --steel:#6B6B74;\n --line:#E4E1D8;\n --line-dark:#2c2c33;\n --radius:14px;\n }\n\n *{box-sizing:border-box;margin:0;padding:0}\n\n html{-webkit-text-size-adjust:100%}\n\n body{\n font-family:'Inter',system-ui,sans-serif;\n color:var(--ink);\n background:var(--chalk);\n line-height:1.5;\n -webkit-font-smoothing:antialiased;\n }\n\n .layout{\n display:grid;\n grid-template-columns:minmax(320px,420px) 1fr;\n min-height:100vh;\n }\n\n \/* ---------- Brand panel ---------- *\/\n .brand{\n background:var(--ink);\n color:var(--chalk);\n padding:48px 44px;\n display:flex;\n flex-direction:column;\n justify-content:space-between;\n position:sticky;\n top:0;\n height:100vh;\n overflow:hidden;\n }\n .brand::after{\n content:\"\";\n position:absolute;\n right:-120px;\n bottom:-120px;\n width:340px;height:340px;\n border:40px solid var(--orange);\n border-radius:50%;\n opacity:.16;\n pointer-events:none;\n }\n\n .logo{\n font-family:'Anton',sans-serif;\n font-size:26px;\n letter-spacing:.04em;\n text-transform:uppercase;\n display:flex;\n align-items:center;\n gap:10px;\n }\n .logo .mark{\n width:14px;height:26px;\n background:var(--orange);\n display:inline-block;\n transform:skewX(-12deg);\n }\n\n .brand-hero{position:relative;z-index:1}\n .eyebrow{\n font-size:12px;\n font-weight:600;\n letter-spacing:.22em;\n text-transform:uppercase;\n color:var(--orange);\n margin-bottom:18px;\n }\n .brand-hero h1{\n font-family:'Anton',sans-serif;\n font-size:clamp(40px,5vw,60px);\n line-height:.92;\n text-transform:uppercase;\n letter-spacing:.005em;\n }\n .brand-hero h1 em{\n font-style:normal;\n color:var(--orange);\n }\n .brand-hero p{\n margin-top:20px;\n color:#b7b6bd;\n font-size:15px;\n max-width:30ch;\n }\n\n .brand-points{\n list-style:none;\n position:relative;z-index:1;\n display:flex;\n flex-direction:column;\n gap:14px;\n }\n .brand-points li{\n display:flex;\n align-items:center;\n gap:12px;\n font-size:14px;\n color:#d4d3d9;\n }\n .brand-points span{\n width:22px;height:22px;\n flex:0 0 22px;\n border:1.5px solid var(--orange);\n color:var(--orange);\n border-radius:50%;\n display:grid;place-items:center;\n font-size:12px;font-weight:700;\n }\n\n \/* ---------- Form panel ---------- *\/\n .form-panel{\n padding:56px clamp(24px,6vw,88px);\n max-width:920px;\n }\n\n .form-head h2{\n font-family:'Anton',sans-serif;\n font-size:34px;\n text-transform:uppercase;\n letter-spacing:.01em;\n }\n .form-head p{\n color:var(--steel);\n margin-top:8px;\n font-size:15px;\n }\n\n form{margin-top:40px}\n\n .section-label{\n display:flex;\n align-items:baseline;\n gap:12px;\n margin-bottom:18px;\n }\n .section-label .num{\n font-family:'Anton',sans-serif;\n color:var(--orange);\n font-size:18px;\n }\n .section-label h3{\n font-size:13px;\n font-weight:700;\n letter-spacing:.14em;\n text-transform:uppercase;\n }\n .section-label .rule{\n flex:1;\n height:1px;\n background:var(--line);\n }\n\n .grid{\n display:grid;\n grid-template-columns:1fr 1fr;\n gap:18px 20px;\n }\n .field{display:flex;flex-direction:column}\n .field.full{grid-column:1 \/ -1}\n\n label{\n font-size:13px;\n font-weight:600;\n margin-bottom:7px;\n }\n label .opt{color:var(--steel);font-weight:400}\n\n input,select{\n font-family:inherit;\n font-size:15px;\n padding:13px 14px;\n border:1.5px solid var(--line);\n border-radius:10px;\n background:var(--paper);\n color:var(--ink);\n transition:border-color .15s, box-shadow .15s;\n }\n input::placeholder{color:#b4b2aa}\n input:focus,select:focus{\n outline:none;\n border-color:var(--orange);\n box-shadow:0 0 0 3px rgba(255,74,28,.16);\n }\n\n \/* ---------- Plan cards (signature) ---------- *\/\n .plans{margin-top:40px}\n .plan-grid{\n display:grid;\n grid-template-columns:repeat(4,1fr);\n gap:14px;\n }\n .plan{\n position:relative;\n border:1.5px solid var(--line);\n border-radius:var(--radius);\n background:var(--paper);\n padding:20px 18px 18px;\n cursor:pointer;\n transition:border-color .15s, transform .15s, box-shadow .15s;\n }\n .plan:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(16,16,20,.08)}\n .plan input{position:absolute;opacity:0;pointer-events:none}\n\n .plan .tag{\n position:absolute;\n top:-10px;right:14px;\n background:var(--orange);\n color:#fff;\n font-size:10px;\n font-weight:700;\n letter-spacing:.1em;\n text-transform:uppercase;\n padding:4px 9px;\n border-radius:20px;\n }\n\n .plan h4{\n font-family:'Anton',sans-serif;\n font-size:18px;\n text-transform:uppercase;\n letter-spacing:.02em;\n }\n .plan .desc{\n font-size:12.5px;\n color:var(--steel);\n margin:4px 0 16px;\n min-height:34px;\n }\n .plan .price{\n font-family:'Anton',sans-serif;\n font-size:30px;\n line-height:1;\n }\n .plan .price small{\n font-family:'Inter',sans-serif;\n font-size:12px;\n font-weight:500;\n color:var(--steel);\n margin-left:3px;\n }\n\n \/* Einsatz \/ commitment meter *\/\n .meter{\n display:flex;\n gap:4px;\n margin-top:16px;\n }\n .meter span{\n height:5px;\n flex:1;\n border-radius:3px;\n background:var(--line);\n }\n .plan[data-load=\"1\"] .meter span:nth-child(-n+1),\n .plan[data-load=\"2\"] .meter span:nth-child(-n+2),\n .plan[data-load=\"3\"] .meter span:nth-child(-n+3),\n .plan[data-load=\"4\"] .meter span:nth-child(-n+4){\n background:var(--orange);\n }\n .meter-label{\n font-size:10px;\n letter-spacing:.12em;\n text-transform:uppercase;\n color:var(--steel);\n margin-top:8px;\n }\n\n .plan input:checked ~ .check-state{display:block}\n .plan:has(input:checked){\n border-color:var(--ink);\n box-shadow:0 0 0 2px var(--ink);\n }\n .plan .picked{\n position:absolute;\n top:14px;left:18px;\n width:18px;height:18px;\n border:2px solid var(--line);\n border-radius:50%;\n transition:.15s;\n }\n .plan:has(input:checked) .picked{\n border-color:var(--ink);\n background:var(--ink);\n box-shadow:inset 0 0 0 3px var(--paper);\n }\n .plan h4,.plan .desc,.plan .price{padding-left:30px}\n\n \/* ---------- consent + submit ---------- *\/\n .consent{\n display:flex;\n gap:12px;\n align-items:flex-start;\n margin-top:34px;\n font-size:13.5px;\n color:#3a3a40;\n }\n .consent input{\n width:18px;height:18px;\n margin-top:2px;\n accent-color:var(--orange);\n flex:0 0 18px;\n padding:0;\n border-radius:4px;\n }\n .consent a{color:var(--ink);text-decoration:underline}\n\n .actions{\n margin-top:30px;\n display:flex;\n align-items:center;\n gap:20px;\n flex-wrap:wrap;\n }\n .btn{\n font-family:'Anton',sans-serif;\n font-size:18px;\n letter-spacing:.04em;\n text-transform:uppercase;\n background:var(--orange);\n color:#fff;\n border:none;\n padding:16px 38px;\n border-radius:10px;\n cursor:pointer;\n transition:background .15s, transform .1s;\n }\n .btn:hover{background:var(--orange-deep)}\n .btn:active{transform:translateY(1px)}\n .actions .note{font-size:13px;color:var(--steel)}\n\n .success{\n display:none;\n margin-top:24px;\n padding:16px 18px;\n border:1.5px solid var(--orange);\n border-left-width:6px;\n border-radius:10px;\n background:#fff;\n font-size:14px;\n }\n .success strong{display:block;font-size:15px;margin-bottom:2px}\n\n \/* ---------- responsive ---------- *\/\n @media (max-width:980px){\n .layout{grid-template-columns:1fr}\n .brand{\n position:static;\n height:auto;\n flex-direction:column;\n gap:32px;\n padding:36px 28px;\n }\n .brand::after{width:220px;height:220px;right:-80px;bottom:-80px}\n .form-panel{padding:40px 28px 64px}\n .plan-grid{grid-template-columns:1fr 1fr}\n }\n @media (max-width:560px){\n .grid{grid-template-columns:1fr}\n .plan-grid{grid-template-columns:1fr}\n .form-head h2{font-size:28px}\n }\n\n @media (prefers-reduced-motion:reduce){\n *{transition:none !important}\n .plan:hover{transform:none}\n }\n<\/style>\n<\/head>\n<body>\n<div class=\"layout\">\n\n \n <aside class=\"brand\">\n <div class=\"logo\"><span class=\"mark\"><\/span>Kraftwerk<\/div>\n\n <div class=\"brand-hero\">\n <p class=\"eyebrow\">Mitglied werden<\/p>\n <h1>Jeder<br>Anfang<br>ist ein <em>Satz.<\/em><\/h1>\n <p>Trag dich ein, w\u00e4hl deinen Einsatz und steh beim n\u00e4chsten Training auf der Matte.<\/p>\n <\/div>\n\n <ul class=\"brand-points\">\n <li><span>1<\/span> Eintragen \u2013 dauert keine zwei Minuten<\/li>\n <li><span>2<\/span> Tarif w\u00e4hlen, vom Probetraining bis zum Jahr<\/li>\n <li><span>3<\/span> Loslegen \u2013 Zugang kommt per E-Mail<\/li>\n <\/ul>\n <\/aside>\n\n \n <main class=\"form-panel\">\n <div class=\"form-head\">\n <h2>Anmeldung<\/h2>\n <p>Sch\u00f6n, dass du dabei bist. F\u00fcll deine Daten aus und such dir den passenden Tarif.<\/p>\n <\/div>\n\n <form id=\"signupForm\" novalidate>\n\n \n <div class=\"section-label\">\n <span class=\"num\">01<\/span>\n <h3>Deine Daten<\/h3>\n <span class=\"rule\"><\/span>\n <\/div>\n\n <div class=\"grid\">\n <div class=\"field\">\n <label for=\"vorname\">Vorname<\/label>\n <input id=\"vorname\" name=\"vorname\" type=\"text\" placeholder=\"Max\" required>\n <\/div>\n <div class=\"field\">\n <label for=\"nachname\">Nachname<\/label>\n <input id=\"nachname\" name=\"nachname\" type=\"text\" placeholder=\"Mustermann\" required>\n <\/div>\n <div class=\"field\">\n <label for=\"email\">E-Mail<\/label>\n <input id=\"email\" name=\"email\" type=\"email\" placeholder=\"max@beispiel.at\" required>\n <\/div>\n <div class=\"field\">\n <label for=\"telefon\">Telefon<\/label>\n <input id=\"telefon\" name=\"telefon\" type=\"tel\" placeholder=\"+43 660 1234567\">\n <\/div>\n <div class=\"field\">\n <label for=\"geburtsdatum\">Geburtsdatum<\/label>\n <input id=\"geburtsdatum\" name=\"geburtsdatum\" type=\"date\" required>\n <\/div>\n <div class=\"field\">\n <label for=\"geschlecht\">Geschlecht <span class=\"opt\">(optional)<\/span><\/label>\n <select id=\"geschlecht\" name=\"geschlecht\">\n <option value=\"\">Keine Angabe<\/option>\n <option>Weiblich<\/option>\n <option>M\u00e4nnlich<\/option>\n <option>Divers<\/option>\n <\/select>\n <\/div>\n <div class=\"field full\">\n <label for=\"adresse\">Adresse<\/label>\n <input id=\"adresse\" name=\"adresse\" type=\"text\" placeholder=\"Stra\u00dfe, Hausnummer, PLZ, Ort\">\n <\/div>\n <div class=\"field\">\n <label for=\"passwort\">Passwort<\/label>\n <input id=\"passwort\" name=\"passwort\" type=\"password\" placeholder=\"Mind. 8 Zeichen\" required>\n <\/div>\n <div class=\"field\">\n <label for=\"passwort2\">Passwort best\u00e4tigen<\/label>\n <input id=\"passwort2\" name=\"passwort2\" type=\"password\" placeholder=\"Wiederholen\" required>\n <\/div>\n <\/div>\n\n \n <div class=\"plans\">\n <div class=\"section-label\">\n <span class=\"num\">02<\/span>\n <h3>Dein Einsatz<\/h3>\n <span class=\"rule\"><\/span>\n <\/div>\n\n <div class=\"plan-grid\">\n\n <label class=\"plan\" data-load=\"1\">\n <input type=\"radio\" name=\"tarif\" value=\"gratis\" required>\n <span class=\"picked\" aria-hidden=\"true\"><\/span>\n <h4>Gratistraining<\/h4>\n <p class=\"desc\">Einmalig reinschnuppern, ganz unverbindlich.<\/p>\n <div class=\"price\">\u20ac0<small>einmalig<\/small><\/div>\n <div class=\"meter\"><span><\/span><span><\/span><span><\/span><span><\/span><\/div>\n <div class=\"meter-label\">Probe<\/div>\n <\/label>\n\n <label class=\"plan\" data-load=\"2\">\n <input type=\"radio\" name=\"tarif\" value=\"block10\">\n <span class=\"picked\" aria-hidden=\"true\"><\/span>\n <h4>10er Block<\/h4>\n <p class=\"desc\">Zehn Einheiten, flexibel einl\u00f6sbar.<\/p>\n <div class=\"price\">\u20ac129<small>\/ 10 Einheiten<\/small><\/div>\n <div class=\"meter\"><span><\/span><span><\/span><span><\/span><span><\/span><\/div>\n <div class=\"meter-label\">Flexibel<\/div>\n <\/label>\n\n <label class=\"plan\" data-load=\"3\">\n <input type=\"radio\" name=\"tarif\" value=\"monat\">\n <span class=\"picked\" aria-hidden=\"true\"><\/span>\n <h4>Monatskarte<\/h4>\n <p class=\"desc\">Unbegrenzt trainieren, monatlich k\u00fcndbar.<\/p>\n <div class=\"price\">\u20ac49<small>\/ Monat<\/small><\/div>\n <div class=\"meter\"><span><\/span><span><\/span><span><\/span><span><\/span><\/div>\n <div class=\"meter-label\">Regelm\u00e4\u00dfig<\/div>\n <\/label>\n\n <label class=\"plan\" data-load=\"4\">\n <input type=\"radio\" name=\"tarif\" value=\"jahr\">\n <span class=\"tag\">Bester Wert<\/span>\n <span class=\"picked\" aria-hidden=\"true\"><\/span>\n <h4>Jahreskarte<\/h4>\n <p class=\"desc\">Zw\u00f6lf Monate, zwei davon gehen aufs Haus.<\/p>\n <div class=\"price\">\u20ac490<small>\/ Jahr<\/small><\/div>\n <div class=\"meter\"><span><\/span><span><\/span><span><\/span><span><\/span><\/div>\n <div class=\"meter-label\">All-in<\/div>\n <\/label>\n\n <\/div>\n <\/div>\n\n \n <label class=\"consent\">\n <input type=\"checkbox\" name=\"agb\" required>\n <span>Ich akzeptiere die <a href=\"#\">AGB<\/a> und die <a href=\"#\">Datenschutzerkl\u00e4rung<\/a> und bin damit einverstanden, dass meine Daten zur Vertragsabwicklung verarbeitet werden.<\/span>\n <\/label>\n\n <div class=\"actions\">\n <button type=\"submit\" class=\"btn\">Jetzt anmelden<\/button>\n <span class=\"note\">Du gehst noch keinen kostenpflichtigen Vertrag ein, bevor du am Empfang best\u00e4tigst.<\/span>\n <\/div>\n\n <div class=\"success\" id=\"success\" role=\"status\">\n <strong>Anmeldung eingegangen.<\/strong>\n <span id=\"successText\">Wir schicken dir die n\u00e4chsten Schritte per E-Mail.<\/span>\n <\/div>\n\n <\/form>\n <\/main>\n<\/div>\n\n<script>\n const form = document.getElementById('signupForm');\n const success = document.getElementById('success');\n const successText = document.getElementById('successText');\n\n const tarifNamen = {\n gratis: 'Gratistraining',\n block10: '10er Block',\n monat: 'Monatskarte',\n jahr: 'Jahreskarte'\n };\n\n form.addEventListener('submit', function (e) {\n e.preventDefault();\n\n const pw = form.passwort.value;\n const pw2 = form.passwort2.value;\n if (pw !== pw2) {\n form.passwort2.setCustomValidity('Die Passw\u00f6rter stimmen nicht \u00fcberein.');\n form.passwort2.reportValidity();\n return;\n }\n form.passwort2.setCustomValidity('');\n\n if (!form.checkValidity()) {\n form.reportValidity();\n return;\n }\n\n const tarif = form.tarif.value;\n const vorname = form.vorname.value.trim();\n successText.textContent =\n `${vorname ? vorname + ', deine' : 'Deine'} Anmeldung f\u00fcr \u201e${tarifNamen[tarif]}\" ist da \u2013 wir schicken dir die n\u00e4chsten Schritte an ${form.email.value}.`;\n success.style.display = 'block';\n success.scrollIntoView({ behavior: 'smooth', block: 'center' });\n });\n\n \/\/ reset custom validity while typing\n form.passwort2.addEventListener('input', () => form.passwort2.setCustomValidity(''));\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Anmeldung \u2013 KRAFTWERK Fitness Kraftwerk Mitglied werden JederAnfangist ein Satz. Trag dich ein, w\u00e4hl deinen Einsatz und steh beim n\u00e4chsten Training auf der Matte. 1 Eintragen \u2013 dauert keine zwei Minuten 2 Tarif w\u00e4hlen, vom Probetraining bis zum Jahr 3 Loslegen \u2013 Zugang kommt per E-Mail Anmeldung Sch\u00f6n, dass du dabei bist. F\u00fcll deine Daten […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-55","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/eager-sutherland.185-178-193-218.plesk.page\/index.php?rest_route=\/wp\/v2\/pages\/55","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eager-sutherland.185-178-193-218.plesk.page\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/eager-sutherland.185-178-193-218.plesk.page\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/eager-sutherland.185-178-193-218.plesk.page\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eager-sutherland.185-178-193-218.plesk.page\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=55"}],"version-history":[{"count":8,"href":"https:\/\/eager-sutherland.185-178-193-218.plesk.page\/index.php?rest_route=\/wp\/v2\/pages\/55\/revisions"}],"predecessor-version":[{"id":65,"href":"https:\/\/eager-sutherland.185-178-193-218.plesk.page\/index.php?rest_route=\/wp\/v2\/pages\/55\/revisions\/65"}],"wp:attachment":[{"href":"https:\/\/eager-sutherland.185-178-193-218.plesk.page\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=55"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}