{"id":8168,"date":"2026-03-26T12:41:56","date_gmt":"2026-03-26T11:41:56","guid":{"rendered":"https:\/\/high-group.de\/?page_id=8168"},"modified":"2026-04-02T16:33:26","modified_gmt":"2026-04-02T14:33:26","slug":"80-20-formular","status":"publish","type":"page","link":"https:\/\/high-group.de\/en\/80-20-formular\/","title":{"rendered":"80\/20 Formular"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\n\n\n\n\nhigh.studios \u00b7 Podcast-Paket konfigurieren<\/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=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,800&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&display=swap\" rel=\"stylesheet\">\n<style>\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n:root {\n --red: #BE1522;\n --red-glow: rgba(190,21,34,0.16);\n --bg: #080808;\n --bg2: #111111;\n --bg3: #181818;\n --bg4: #202020;\n --border: rgba(255,255,255,0.08);\n --border2: rgba(255,255,255,0.14);\n --txt: #f0ede8;\n --txt2: rgba(255,255,255,0.55);\n --txt3: rgba(255,255,255,0.28);\n --font-h: 'Bricolage Grotesque', sans-serif;\n --font-b: 'DM Sans', sans-serif;\n --r: 12px;\n --r-lg: 18px;\n}\n\nhtml { scroll-behavior: smooth; }\nbody {\n font-family: var(--font-b);\n background: var(--bg);\n color: var(--txt);\n min-height: 100vh;\n -webkit-font-smoothing: antialiased;\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 48px 20px 80px;\n}\n\n.form-wrap { width: 100%; max-width: 580px; }\n\n\/* \u2500\u2500 HEADER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.form-header { text-align: center; margin-bottom: 40px; }\n.form-logo {\n font-family: var(--font-h);\n font-size: 17px; font-weight: 800;\n letter-spacing: -0.01em;\n color: var(--txt); margin-bottom: 24px;\n display: inline-block;\n}\n.form-logo span { color: var(--red); }\n\n\/* \u2500\u2500 PROGRESS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.progress-track {\n display: flex; align-items: flex-start;\n justify-content: center; gap: 0; margin-bottom: 32px;\n}\n.progress-step {\n display: flex; flex-direction: column;\n align-items: center; gap: 6px; position: relative;\n}\n.progress-step:not(:last-child)::after {\n content: ''; position: absolute;\n left: calc(50% + 18px); top: 13px;\n width: calc(100% + 4px); height: 1px;\n background: var(--border2); transition: background 0.4s;\n}\n.progress-step.done:not(:last-child)::after { background: var(--red); }\n.step-bubble {\n width: 28px; height: 28px; border-radius: 50%;\n border: 1.5px solid var(--border2); background: var(--bg2);\n display: flex; align-items: center; justify-content: center;\n font-size: 11px; font-weight: 500; color: var(--txt3);\n transition: all 0.3s; z-index: 1;\n}\n.progress-step.active .step-bubble { border-color: var(--red); background: var(--red-glow); color: #fff; }\n.progress-step.done .step-bubble { border-color: var(--red); background: var(--red); color: #fff; font-size: 13px; }\n.step-label {\n font-size: 10px; color: var(--txt3);\n letter-spacing: 0.05em; white-space: nowrap;\n transition: color 0.3s;\n}\n.progress-step.active .step-label { color: var(--txt2); }\n.progress-spacer { width: 56px; }\n\n\/* \u2500\u2500 CARD \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.form-card {\n background: var(--bg2); border: 0.5px solid var(--border);\n border-radius: var(--r-lg); padding: 36px 40px 40px;\n position: relative; overflow: hidden;\n}\n.form-card::before {\n content: ''; position: absolute;\n top: -40%; right: -20%; width: 60%; height: 80%;\n background: radial-gradient(ellipse, rgba(190,21,34,0.07) 0%, transparent 70%);\n pointer-events: none;\n}\n\n\/* \u2500\u2500 STEP PANELS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.step-panel { display: none !important; }\n.step-panel.active { display: block !important; animation: fadeUp 0.3s ease; }\n.loader { display: none !important; }\n.loader.active { display: flex !important; }\n@keyframes fadeUp {\n from { opacity: 0; transform: translateY(8px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n.step-eyebrow {\n font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;\n color: var(--red); margin-bottom: 10px; font-weight: 500;\n}\n.step-title {\n font-family: var(--font-h); font-size: 22px; font-weight: 800;\n letter-spacing: -0.02em; color: var(--txt);\n margin-bottom: 6px; line-height: 1.2;\n}\n.step-sub { font-size: 13px; color: var(--txt2); margin-bottom: 28px; line-height: 1.55; }\n\n\/* \u2500\u2500 CHOICE CARDS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.choices { display: flex !important; flex-direction: column !important; gap: 10px; margin-bottom: 28px; }\n.choice-card {\n display: flex !important; align-items: flex-start; gap: 14px;\n padding: 16px 18px; background: var(--bg3);\n border: 1px solid var(--border); border-radius: var(--r);\n cursor: pointer; transition: all 0.18s;\n}\n.choice-card:hover { border-color: var(--border2); background: var(--bg4); }\n.choice-card.selected { border-color: var(--red); background: rgba(190,21,34,0.06); }\n.choice-radio {\n width: 18px; height: 18px; border-radius: 50%;\n border: 1.5px solid var(--border2); background: var(--bg);\n flex-shrink: 0; margin-top: 2px;\n display: flex; align-items: center; justify-content: center;\n transition: all 0.18s;\n}\n.choice-card.selected .choice-radio { border-color: var(--red); background: var(--red); }\n.choice-card.selected .choice-radio::after {\n content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff;\n}\n.choice-title { font-size: 14px; font-weight: 500; color: var(--txt); margin-bottom: 2px; }\n.choice-card.selected .choice-title { color: #fff; }\n.choice-desc { font-size: 12px; color: var(--txt3); line-height: 1.45; }\n.choice-card.selected .choice-desc { color: var(--txt2); }\n.choice-badge {\n margin-left: auto; flex-shrink: 0;\n font-size: 10px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;\n padding: 3px 8px; border-radius: 4px;\n background: rgba(190,21,34,0.15); color: #f07080;\n}\n\n\/* \u2500\u2500 FREQ GRID \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.freq-grid { display: grid !important; grid-template-columns: repeat(3,1fr) !important; gap: 10px; margin-bottom: 28px; }\n.freq-card {\n display: flex; flex-direction: column;\n align-items: center; justify-content: center;\n gap: 4px; padding: 18px 12px;\n background: var(--bg3); border: 1px solid var(--border);\n border-radius: var(--r); cursor: pointer;\n transition: all 0.18s; text-align: center;\n}\n.freq-card:hover { border-color: var(--border2); background: var(--bg4); }\n.freq-card.selected { border-color: var(--red); background: rgba(190,21,34,0.06); }\n.freq-num {\n font-family: var(--font-h); font-size: 24px; font-weight: 800;\n color: var(--txt3); letter-spacing: -0.02em; transition: color 0.18s;\n}\n.freq-card.selected .freq-num { color: #fff; }\n.freq-label { font-size: 11px; color: var(--txt3); transition: color 0.18s; }\n.freq-card.selected .freq-label { color: var(--txt2); }\n\n.retainer-note {\n display: none; margin-bottom: 24px;\n padding: 13px 16px;\n background: rgba(190,21,34,0.07);\n border: 0.5px solid rgba(190,21,34,0.25);\n border-radius: 10px;\n font-size: 12px; color: var(--txt2); line-height: 1.6;\n}\n.retainer-note.show { display: block; }\n.retainer-note strong { color: #f07080; font-weight: 500; }\n\n\/* \u2500\u2500 INPUTS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.field-group { display: flex !important; flex-direction: column !important; gap: 14px; margin-bottom: 20px; }\n.field-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 14px; }\n.field { display: flex !important; flex-direction: column !important; gap: 6px; }\n.field label {\n font-size: 11px; font-weight: 500; color: var(--txt2);\n letter-spacing: 0.05em; text-transform: uppercase;\n}\n\/* Hochspezifisch + !important \u2192 schl\u00e4gt Elementor-Resets *\/\n#hs-podcast-form .field input,\n#hs-podcast-form .field input[type=\"text\"],\n#hs-podcast-form .field input[type=\"email\"],\n#hs-podcast-form .field input[type=\"tel\"],\n.field input,\n.field input[type=\"text\"],\n.field input[type=\"email\"],\n.field input[type=\"tel\"] {\n width: 100% !important;\n padding: 13px 16px !important;\n background: #181818 !important;\n background-color: #181818 !important;\n border: 0.5px solid rgba(255,255,255,0.14) !important;\n border-radius: 12px !important;\n color: #f0ede8 !important;\n font-family: 'DM Sans', sans-serif !important;\n font-size: 14px !important;\n line-height: 1.4 !important;\n outline: none !important;\n box-shadow: none !important;\n -webkit-appearance: none !important;\n appearance: none !important;\n transition: border-color 0.2s, background-color 0.2s !important;\n}\n#hs-podcast-form .field input::placeholder,\n.field input::placeholder { color: rgba(255,255,255,0.28) !important; }\n\n#hs-podcast-form .field input:focus,\n.field input:focus {\n border-color: rgba(190,21,34,0.6) !important;\n background: #202020 !important;\n background-color: #202020 !important;\n box-shadow: none !important;\n outline: none !important;\n}\n#hs-podcast-form .field input.error,\n.field input.error { border-color: rgba(190,21,34,0.9) !important; }\n\n\/* \u2500\u2500 CHECKBOX (DSGVO) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.checkbox-row {\n display: flex; align-items: flex-start; gap: 12px;\n margin-bottom: 24px; cursor: pointer;\n}\n.checkbox-box {\n width: 18px; height: 18px; flex-shrink: 0;\n border: 1.5px solid var(--border2); border-radius: 4px;\n background: var(--bg3); margin-top: 1px;\n display: flex; align-items: center; justify-content: center;\n transition: all 0.18s; cursor: pointer;\n}\n.checkbox-box.checked { background: var(--red); border-color: var(--red); }\n.checkbox-box.checked::after {\n content: '';\n width: 9px; height: 5px;\n border-left: 2px solid #fff; border-bottom: 2px solid #fff;\n transform: rotate(-45deg) translateY(-1px);\n}\n.checkbox-box.error-cb { border-color: rgba(190,21,34,0.9); }\n.checkbox-text {\n font-size: 12px; color: var(--txt3); line-height: 1.55;\n}\n.checkbox-text a { color: var(--txt2); text-decoration: underline; text-underline-offset: 2px; }\n.checkbox-text a:hover { color: var(--txt); }\n\n\/* \u2500\u2500 BUTTONS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.btn-row { display: flex; align-items: center; gap: 12px; }\n.btn-primary {\n flex: 1; padding: 15px 24px; background: var(--red);\n border: none; border-radius: var(--r); color: #fff;\n font-family: var(--font-b); font-size: 14px; font-weight: 500;\n cursor: pointer; transition: all 0.2s;\n display: flex; align-items: center; justify-content: center; gap: 8px;\n box-shadow: 0 4px 20px rgba(190,21,34,0.28);\n}\n.btn-primary:hover { background: #d01825; transform: translateY(-1px); box-shadow: 0 6px 28px rgba(190,21,34,0.42); }\n.btn-primary:disabled { opacity: 0.38; cursor: not-allowed; transform: none; box-shadow: none; }\n.btn-back {\n padding: 15px 18px; background: transparent;\n border: 0.5px solid var(--border2); border-radius: var(--r);\n color: var(--txt2); font-family: var(--font-b); font-size: 14px;\n cursor: pointer; transition: all 0.18s;\n display: flex; align-items: center; gap: 6px;\n}\n.btn-back:hover { border-color: rgba(255,255,255,0.25); color: var(--txt); }\n\n\/* \u2500\u2500 LOADER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.loader {\n display: none; align-items: center; justify-content: center;\n gap: 10px; padding: 48px 0; color: var(--txt2); font-size: 13px;\n}\n.loader.active { display: flex; }\n.spinner {\n width: 20px; height: 20px; border-radius: 50%;\n border: 2px solid rgba(255,255,255,0.1); border-top-color: var(--red);\n animation: spin 0.65s linear infinite;\n}\n@keyframes spin { to { transform: rotate(360deg); } }\n\n\/* \u2500\u2500 SUMMARY BOX \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.summary-box {\n background: var(--bg3); border: 0.5px solid var(--border2);\n border-radius: var(--r); padding: 18px 20px; margin-bottom: 24px;\n}\n.summary-row {\n display: flex; align-items: center; justify-content: space-between;\n padding: 7px 0; border-bottom: 0.5px solid var(--border); font-size: 13px;\n}\n.summary-row:last-child { border-bottom: none; }\n.sk { color: var(--txt2); }\n.sv { color: var(--txt); font-weight: 500; }\n.sv.hl { color: #f07080; }\n\n\/* \u2500\u2500 RECHNER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.rechner-wrap {\n background: var(--bg3); border: 0.5px solid var(--border);\n border-radius: var(--r-lg); padding: 26px;\n}\n.rechner-title { font-family: var(--font-h); font-size: 16px; font-weight: 700; color: var(--txt); margin-bottom: 4px; }\n.rechner-sub { font-size: 12px; color: var(--txt3); margin-bottom: 22px; }\n\n.r-field {\n display: grid; grid-template-columns: 1fr auto;\n align-items: center; gap: 14px;\n padding: 11px 0; border-bottom: 0.5px solid var(--border);\n}\n.r-field:last-of-type { border-bottom: none; }\n.r-label { font-size: 13px; font-weight: 500; color: var(--txt); }\n.r-sub { font-size: 11px; color: var(--txt3); margin-top: 2px; }\n.r-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }\n.r-rate { font-size: 11px; color: var(--txt2); min-width: 78px; text-align: right; font-family: monospace; }\n\n.stepper {\n display: flex; align-items: center;\n background: var(--bg4); border: 0.5px solid var(--border2);\n border-radius: 8px; overflow: hidden;\n}\n.stepper button {\n width: 32px; height: 32px; background: transparent; border: none;\n color: var(--txt2); font-size: 16px; cursor: pointer;\n display: flex; align-items: center; justify-content: center;\n transition: all 0.15s;\n}\n.stepper button:hover { color: var(--txt); background: rgba(255,255,255,0.05); }\n.sv-num {\n min-width: 34px; text-align: center; font-size: 14px;\n font-weight: 500; color: var(--txt); font-family: monospace;\n border-left: 0.5px solid var(--border); border-right: 0.5px solid var(--border);\n height: 32px; display: flex; align-items: center; justify-content: center;\n}\n.r-divider { border: none; border-top: 0.5px solid var(--border); margin: 14px 0; }\n\n.results { display: grid; gap: 10px; margin-top: 18px; }\n.results.c2 { grid-template-columns: 1fr 1fr; }\n.results.c3 { grid-template-columns: repeat(3,1fr); }\n\n.rcard { background: var(--bg4); border: 0.5px solid var(--border); border-radius: 12px; padding: 15px; }\n.rcard.mid { border: 1px solid rgba(224,85,101,0.25); background: rgba(224,85,101,0.03); }\n.rcard.featured { border: 1px solid rgba(190,21,34,0.45); background: rgba(190,21,34,0.05); }\n\n.r-tag {\n display: inline-flex; font-size: 9px; letter-spacing: 0.08em;\n text-transform: uppercase; padding: 2px 7px; border-radius: 4px; margin-bottom: 9px;\n}\n.t-single { background: rgba(255,255,255,0.06); color: var(--txt3); }\n.t-mid { background: rgba(224,85,101,0.15); color: #e05565; }\n.t-main { background: rgba(190,21,34,0.18); color: #f07080; }\n\n.r-lbl { font-size: 11px; color: var(--txt2); margin-bottom: 4px; }\n.r-lbl.mid { color: #e05565; font-weight: 500; }\n.r-lbl.main { color: #f07080; font-weight: 500; }\n.r-price { font-size: 22px; font-weight: 300; letter-spacing: -0.03em; color: var(--txt); line-height: 1; font-family: monospace; }\n.r-price.mid { color: #e05565; }\n.r-price.main { color: #f07080; }\n.r-note { font-size: 10px; color: var(--txt3); margin-top: 7px; line-height: 1.5; }\n.r-note span { color: var(--txt2); }\n\n.wa-btn {\n display: flex; align-items: center; justify-content: center; gap: 8px;\n margin-top: 14px; width: 100%; padding: 13px 20px;\n background: var(--red); border: none; border-radius: var(--r);\n color: #fff; font-family: var(--font-b); font-size: 14px; font-weight: 500;\n cursor: pointer; text-decoration: none; transition: opacity 0.15s;\n}\n.wa-btn:hover { opacity: 0.87; }\n.wa-ico { width: 18px; height: 18px; fill: #fff; flex-shrink: 0; }\n\n.legal-note {\n margin-top: 12px; padding: 11px 15px;\n background: rgba(255,255,255,0.02); border: 0.5px solid var(--border);\n border-radius: 8px; font-size: 11px; color: var(--txt3); line-height: 1.6;\n}\n.legal-note strong { color: var(--txt2); font-weight: 500; }\n\n\/* \u2500\u2500 TRUST STRIP \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.trust-strip {\n display: flex; align-items: center; justify-content: center;\n gap: 18px; margin-top: 26px; flex-wrap: wrap;\n}\n.trust-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--txt3); }\n.tdot { width: 4px; height: 4px; border-radius: 50%; background: var(--red); flex-shrink: 0; }\n\n\/* \u2500\u2500 RESPONSIVE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n@media (max-width: 500px) {\n body { padding: 28px 14px 60px; }\n .form-card { padding: 22px 18px 26px; }\n .field-row { grid-template-columns: 1fr; }\n .results.c2, .results.c3 { grid-template-columns: 1fr; }\n .progress-spacer { width: 28px; }\n .step-label { display: none; }\n}\n<\/style>\n<\/head>\n<body>\n\n<div class=\"form-wrap\" id=\"hs-podcast-form\">\n\n <!-- Logo + Progress -->\n <div class=\"form-header\">\n <div class=\"form-logo\">high<span>.<\/span>studios<\/div>\n\n <div class=\"progress-track\">\n <div class=\"progress-step active\" id=\"prog-1\">\n <div class=\"step-bubble\">1<\/div>\n <span class=\"step-label\">Format<\/span>\n <\/div>\n <div class=\"progress-spacer\"><\/div>\n <div class=\"progress-step\" id=\"prog-2\">\n <div class=\"step-bubble\">2<\/div>\n <span class=\"step-label\">Frequenz<\/span>\n <\/div>\n <div class=\"progress-spacer\"><\/div>\n <div class=\"progress-step\" id=\"prog-3\">\n <div class=\"step-bubble\">3<\/div>\n <span class=\"step-label\">Kontakt<\/span>\n <\/div>\n <div class=\"progress-spacer\"><\/div>\n <div class=\"progress-step\" id=\"prog-4\">\n <div class=\"step-bubble\">4<\/div>\n <span class=\"step-label\">Angebot<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"form-card\">\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n SCHRITT 1 \u00b7 FORMAT\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <div class=\"step-panel active\" id=\"step-1\">\n <div class=\"step-eyebrow\">Schritt 1 von 4<\/div>\n <h2 class=\"step-title\">Was wollt ihr produzieren?<\/h2>\n <p class=\"step-sub\">W\u00e4hlt das Format, das zu eurem Content-Ziel passt.<\/p>\n\n <div class=\"choices\" id=\"choices-format\">\n <div class=\"choice-card\" data-val=\"80-20 Content-System\" onclick=\"pickFormat(this)\">\n <div class=\"choice-radio\"><\/div>\n <div>\n <div class=\"choice-title\">80-20 Content-System<\/div>\n <div class=\"choice-desc\">Ein Drehtag \u2013 Podcast, YouTube, Reels, LinkedIn, Spotify. Alles aus einer Aufnahme.<\/div>\n <\/div>\n <span class=\"choice-badge\">Empfohlen<\/span>\n <\/div>\n <div class=\"choice-card\" data-val=\"Podcast (Audio + Video)\" onclick=\"pickFormat(this)\">\n <div class=\"choice-radio\"><\/div>\n <div>\n <div class=\"choice-title\">Podcast \u2013 Audio + Video<\/div>\n <div class=\"choice-desc\">Professionelle Podcast-Folgen f\u00fcr YouTube, Spotify und Apple Podcasts.<\/div>\n <\/div>\n <\/div>\n <div class=\"choice-card\" data-val=\"Beratung gew\u00fcnscht\" onclick=\"pickFormat(this)\">\n <div class=\"choice-radio\"><\/div>\n <div>\n <div class=\"choice-title\">Noch nicht sicher<\/div>\n <div class=\"choice-desc\">Wir beraten euch kostenlos und finden gemeinsam das richtige Format.<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"btn-row\">\n <button class=\"btn-primary\" id=\"btn1\" onclick=\"goStep(2)\" disabled>\n Weiter\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\n <\/button>\n <\/div>\n <\/div>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n SCHRITT 2 \u00b7 FREQUENZ\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <div class=\"step-panel\" id=\"step-2\">\n <div class=\"step-eyebrow\">Schritt 2 von 4<\/div>\n <h2 class=\"step-title\">Wie oft wollt ihr produzieren?<\/h2>\n <p class=\"step-sub\">Die Frequenz entscheidet, ob ein Retainer f\u00fcr euch Sinn ergibt.<\/p>\n\n <div class=\"freq-grid\" id=\"freq-grid\">\n <div class=\"freq-card\" data-val=\"1\u20132\u00d7 pro Monat\" onclick=\"pickFreq(this)\">\n <div class=\"freq-num\">1\u20132\u00d7<\/div>\n <div class=\"freq-label\">pro Monat<\/div>\n <\/div>\n <div class=\"freq-card\" data-val=\"3\u20134\u00d7 pro Monat\" onclick=\"pickFreq(this)\">\n <div class=\"freq-num\">3\u20134\u00d7<\/div>\n <div class=\"freq-label\">pro Monat<\/div>\n <\/div>\n <div class=\"freq-card\" data-val=\"5\u00d7+ pro Monat\" onclick=\"pickFreq(this)\">\n <div class=\"freq-num\">5\u00d7+<\/div>\n <div class=\"freq-label\">pro Monat<\/div>\n <\/div>\n <\/div>\n\n <div class=\"retainer-note\" id=\"retainer-note\">\n <strong>Retainer empfohlen:<\/strong> Ab 3 Sessions pro Monat lohnt sich ein fester Slot \u2013 bis zu 33 % g\u00fcnstiger als der Listenpreis, mit garantierter Verf\u00fcgbarkeit.\n <\/div>\n\n <div class=\"btn-row\">\n <button class=\"btn-back\" onclick=\"goStep(1)\">\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 12H5M12 19l-7-7 7-7\"\/><\/svg>\n Zur\u00fcck\n <\/button>\n <button class=\"btn-primary\" id=\"btn2\" onclick=\"goStep(3)\" disabled>\n Weiter\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\n <\/button>\n <\/div>\n <\/div>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n SCHRITT 3 \u00b7 KONTAKT + DSGVO\n \u2192 fetch() wird hier ausgel\u00f6st\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <div class=\"step-panel\" id=\"step-3\">\n <div class=\"step-eyebrow\">Schritt 3 von 4<\/div>\n <h2 class=\"step-title\">Wie k\u00f6nnen wir euch erreichen?<\/h2>\n <p class=\"step-sub\">Danach seht ihr euren individuellen Preis direkt im n\u00e4chsten Schritt.<\/p>\n\n <div class=\"field-group\">\n <div class=\"field-row\">\n <div class=\"field\">\n <label>Vorname *<\/label>\n <input type=\"text\" id=\"f-vorname\" placeholder=\"Max\" autocomplete=\"given-name\">\n <\/div>\n <div class=\"field\">\n <label>Nachname *<\/label>\n <input type=\"text\" id=\"f-nachname\" placeholder=\"Mustermann\" autocomplete=\"family-name\">\n <\/div>\n <\/div>\n <div class=\"field\">\n <label>Unternehmen *<\/label>\n <input type=\"text\" id=\"f-firma\" placeholder=\"Mustermann GmbH\" autocomplete=\"organization\">\n <\/div>\n <div class=\"field\">\n <label>E-Mail *<\/label>\n <input type=\"email\" id=\"f-email\" placeholder=\"max@mustermann.de\" autocomplete=\"email\">\n <\/div>\n <div class=\"field\">\n <label>Telefon *<\/label>\n <input type=\"tel\" id=\"f-tel\" placeholder=\"+49 ...\" autocomplete=\"tel\">\n <\/div>\n <\/div>\n\n <!-- DSGVO Checkbox -->\n <div class=\"checkbox-row\" onclick=\"toggleConsent()\">\n <div class=\"checkbox-box\" id=\"consent-box\"><\/div>\n <p class=\"checkbox-text\">\n Ich stimme zu, dass high.media GmbH meine Angaben zur Angebotserstellung und Kontaktaufnahme\n verarbeitet. Details in der\n <a href=\"https:\/\/high-group.de\/privacy-policy\/\" target=\"_blank\" onclick=\"event.stopPropagation()\">Datenschutzerkl\u00e4rung<\/a>.\n Die Einwilligung kann jederzeit widerrufen werden.\n <\/p>\n <\/div>\n\n <div class=\"btn-row\">\n <button class=\"btn-back\" onclick=\"goStep(2)\">\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M19 12H5M12 19l-7-7 7-7\"\/><\/svg>\n Zur\u00fcck\n <\/button>\n <button class=\"btn-primary\" onclick=\"submitLead()\">\n Angebot anzeigen\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\n <\/button>\n <\/div>\n <\/div>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n LOADER\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <div class=\"loader\" id=\"loader\">\n <div class=\"spinner\"><\/div>\n Angebot wird vorbereitet \u2026\n <\/div>\n\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n SCHRITT 4 \u00b7 PREISRECHNER\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n <div class=\"step-panel\" id=\"step-4\">\n <div class=\"step-eyebrow\">Euer individuelles Angebot<\/div>\n <h2 class=\"step-title\">Konfiguriert euren Preis.<\/h2>\n <p class=\"step-sub\">Passt Stunden und Leistungen an \u2013 die Preise aktualisieren sich live.<\/p>\n\n <!-- Zusammenfassung -->\n <div class=\"summary-box\">\n <div class=\"summary-row\"><span class=\"sk\">Name<\/span><span class=\"sv\" id=\"s-name\">\u2013<\/span><\/div>\n <div class=\"summary-row\"><span class=\"sk\">Unternehmen<\/span><span class=\"sv\" id=\"s-firma\">\u2013<\/span><\/div>\n <div class=\"summary-row\"><span class=\"sk\">Format<\/span><span class=\"sv hl\" id=\"s-format\">\u2013<\/span><\/div>\n <div class=\"summary-row\"><span class=\"sk\">Frequenz<\/span><span class=\"sv\" id=\"s-freq\">\u2013<\/span><\/div>\n <\/div>\n\n <!-- Preisrechner -->\n <div class=\"rechner-wrap\">\n <div class=\"rechner-title\">Paket konfigurieren<\/div>\n <div class=\"rechner-sub\">Alle Preise zzgl. MwSt. \u00b7 Stunden frei w\u00e4hlbar<\/div>\n\n <div class=\"r-field\">\n <div>\n <div class=\"r-label\">Aufnahme im Studio<\/div>\n <div class=\"r-sub\">95 \u20ac \/ Std. \u00b7 Mindestbuchung 2 Std.<\/div>\n <\/div>\n <div class=\"r-right\">\n <span class=\"r-rate\" id=\"rr-s\"><\/span>\n <div class=\"stepper\">\n <button onclick=\"rc('s',-1)\">\u2212<\/button>\n <div class=\"sv-num\" id=\"rv-s\">2<\/div>\n <button onclick=\"rc('s',1)\">+<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"r-field\">\n <div>\n <div class=\"r-label\">Operator<\/div>\n <div class=\"r-sub\">Technische Betreuung \u00b7 95 \u20ac \/ Std.<\/div>\n <\/div>\n <div class=\"r-right\">\n <span class=\"r-rate\" id=\"rr-o\"><\/span>\n <div class=\"stepper\">\n <button onclick=\"rc('o',-1)\">\u2212<\/button>\n <div class=\"sv-num\" id=\"rv-o\">0<\/div>\n <button onclick=\"rc('o',1)\">+<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <hr class=\"r-divider\">\n\n <div class=\"r-field\">\n <div>\n <div class=\"r-label\">Podcast-Schnitt<\/div>\n <div class=\"r-sub\">Stunden Post-Produktion<\/div>\n <\/div>\n <div class=\"r-right\">\n <span class=\"r-rate\" id=\"rr-e\"><\/span>\n <div class=\"stepper\">\n <button onclick=\"rc('e',-1)\">\u2212<\/button>\n <div class=\"sv-num\" id=\"rv-e\">0<\/div>\n <button onclick=\"rc('e',1)\">+<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"r-field\">\n <div>\n <div class=\"r-label\">Clips \/ Reels<\/div>\n <div class=\"r-sub\">Kurzformate 9:16 f\u00fcr Social Media<\/div>\n <\/div>\n <div class=\"r-right\">\n <span class=\"r-rate\" id=\"rr-c\"><\/span>\n <div class=\"stepper\">\n <button onclick=\"rc('c',-1)\">\u2212<\/button>\n <div class=\"sv-num\" id=\"rv-c\">0<\/div>\n <button onclick=\"rc('c',1)\">+<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"results\" id=\"results\"><\/div>\n\n <a class=\"wa-btn\" id=\"wa-link\" href=\"#\" target=\"_blank\">\n <svg class=\"wa-ico\" viewBox=\"0 0 24 24\">\n <path d=\"M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z\"\/>\n <path d=\"M12 0C5.373 0 0 5.373 0 12c0 2.127.558 4.126 1.535 5.857L.057 23.273a.75.75 0 0 0 .92.92l5.344-1.466A11.945 11.945 0 0 0 12 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 22c-1.907 0-3.699-.503-5.253-1.383l-.38-.222-3.933 1.08 1.1-3.818-.245-.394A9.956 9.956 0 0 1 2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10z\"\/>\n <\/svg>\n Angebot per WhatsApp besprechen\n <\/a>\n\n <div class=\"legal-note\">\n <strong>Alle Preise zzgl. MwSt.<\/strong> \u00b7 Retainer-Slots sind monatlich fix und verfallen bei Nichtnutzung. Exit-Option beim Jahresretainer nach Monat 3. Individuelle Pakete auf Anfrage.\n <\/div>\n <\/div>\n <\/div>\n\n <\/div><!-- \/.form-card -->\n\n <div class=\"trust-strip\">\n <div class=\"trust-item\"><div class=\"tdot\"><\/div>Erstgespr\u00e4ch kostenlos<\/div>\n <div class=\"trust-item\"><div class=\"tdot\"><\/div>Testaufnahme m\u00f6glich<\/div>\n <div class=\"trust-item\"><div class=\"tdot\"><\/div>Kein Risiko, kein Abo<\/div>\n <\/div>\n\n<\/div><!-- \/.form-wrap -->\n\n<script>\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n KONFIGURATION \u2013 nur diese Werte \u00e4ndern\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\nconst WEBHOOK = 'https:\/\/n8n.artificalia.com\/webhook\/hs-web-leads';\nconst WA_NR = '491726295756';\nconst SOURCE = 'Podcast-LP';\n\n\/* \u2500\u2500\u2500 STATE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\nlet step = 1;\nlet format = null;\nlet freq = null;\nlet consent = false;\nconst rv = { s:2, o:0, e:0, c:0 };\nconst rm = { s:2, o:0, e:0, c:0 };\n\n\/* \u2500\u2500\u2500 PROGRESS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\nfunction setProgress(n) {\n for (let i = 1; i <= 4; i++) {\n const p = document.getElementById('prog-' + i);\n const b = p.querySelector('.step-bubble');\n p.classList.remove('active','done');\n if (i < n) { p.classList.add('done'); b.textContent = '\u2713'; }\n else if (i === n){ p.classList.add('active'); b.textContent = i; }\n else { b.textContent = i; }\n }\n}\n\n\/* \u2500\u2500\u2500 CAPI + PIXEL HELPER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\nconst CAPI_URL = 'https:\/\/n8n.artificalia.com\/webhook\/hs-capi-events';\n\nfunction hsTrack(eventName, extraData) {\n const eventId = Date.now() + '-' + Math.random().toString(36).substr(2,9);\n const data = Object.assign({\n event_name: eventName,\n event_id: eventId,\n page_url: window.location.href,\n user_agent: navigator.userAgent,\n fbp: (document.cookie.match('(^|;)\\\\s*_fbp\\\\s*=\\\\s*([^;]+)') || [,''])[1],\n fbc: (document.cookie.match('(^|;)\\\\s*_fbc\\\\s*=\\\\s*([^;]+)') || [,''])[1],\n }, extraData || {});\n\n \/\/ Browser Pixel (deduplication via event_id)\n if (typeof fbq !== 'undefined') {\n const standardEvents = ['Lead', 'CompleteRegistration', 'InitiateCheckout', 'PageView'];\n if (standardEvents.includes(eventName)) {\n fbq('track', eventName, {}, { eventID: eventId });\n } else {\n fbq('trackCustom', eventName, extraData || {}, { eventID: eventId });\n }\n }\n\n \/\/ CAPI via N8N\n try {\n fetch(CAPI_URL, {\n method: 'POST',\n headers: { 'Content-Type': 'application\/json' },\n body: JSON.stringify(data),\n mode: 'no-cors'\n });\n } catch(e) { console.warn('CAPI:', e); }\n}\n\n\/* \u2500\u2500\u2500 NAVIGATION \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\nfunction goStep(n) {\n document.getElementById('step-' + step).classList.remove('active');\n const next = document.getElementById('step-' + n) || document.getElementById('loader');\n if (next) next.classList.add('active');\n setProgress(n);\n\n \/\/ CAPI Step Events\n if (n === 2) hsTrack('FormStep1', { step: 1, format: format });\n if (n === 3) hsTrack('FormStep2', { step: 2, frequenz: freq });\n\n step = n;\n window.scrollTo({ top: 0, behavior: 'smooth' });\n}\n\n\/* \u2500\u2500\u2500 FORMAT PICKER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\nfunction pickFormat(el) {\n document.querySelectorAll('#choices-format .choice-card').forEach(c => c.classList.remove('selected'));\n el.classList.add('selected');\n format = el.dataset.val;\n\n \/\/ Rechner-Voreinstellung je Format\n const p = {\n '80-20 Content-System': { e:2, c:3 },\n 'Podcast (Audio + Video)':{ e:2, c:0 },\n 'Beratung gew\u00fcnscht': { e:0, c:0 }\n }[format] || { e:0, c:0 };\n rv.e = p.e; rv.c = p.c;\n\n document.getElementById('btn1').disabled = false;\n}\n\n\/* \u2500\u2500\u2500 FREQ PICKER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\nfunction pickFreq(el) {\n document.querySelectorAll('#freq-grid .freq-card').forEach(c => c.classList.remove('selected'));\n el.classList.add('selected');\n freq = el.dataset.val;\n document.getElementById('btn2').disabled = false;\n document.getElementById('retainer-note').classList.toggle('show', freq !== '1\u20132\u00d7 pro Monat');\n}\n\n\/* \u2500\u2500\u2500 CONSENT \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\nfunction toggleConsent() {\n consent = !consent;\n const box = document.getElementById('consent-box');\n box.classList.toggle('checked', consent);\n box.classList.remove('error-cb');\n}\n\n\/* \u2500\u2500\u2500 SUBMIT (am Ende von Schritt 3) \u2500\u2500\u2500\u2500\u2500 *\/\nasync function submitLead() {\n \/\/ Validierung Kontaktfelder\n const ids = ['f-vorname','f-nachname','f-firma','f-email','f-tel'];\n let ok = true;\n ids.forEach(id => {\n const el = document.getElementById(id);\n if (!el.value.trim()) { el.classList.add('error'); ok = false; }\n else el.classList.remove('error');\n });\n\n \/\/ Validierung Checkbox\n if (!consent) {\n document.getElementById('consent-box').classList.add('error-cb');\n ok = false;\n }\n\n if (!ok) return;\n\n \/\/ Werte einsammeln\n const vorname = document.getElementById('f-vorname').value.trim();\n const nachname = document.getElementById('f-nachname').value.trim();\n const firma = document.getElementById('f-firma').value.trim();\n const email = document.getElementById('f-email').value.trim();\n const tel = document.getElementById('f-tel').value.trim();\n\n \/\/ Preise vorberechnen (werden auch im Rechner nochmal live berechnet)\n const { v3, v25, v2, zehn, hasSvc } = calcPrices();\n\n const payload = {\n vorname, nachname, firma, email, telefon: tel,\n format, frequenz: freq,\n studio_stunden: rv.s,\n operator_stunden: rv.o,\n schnitt_stunden: rv.e,\n clips: rv.c,\n preis_liste: fmt(v3),\n preis_6m: hasSvc ? fmt(v25) : '\u2013',\n preis_12m: hasSvc ? fmt(v2) : '\u2013',\n preis_10er: !hasSvc ? fmt(zehn): '\u2013',\n consent_dsgvo: true,\n quelle: SOURCE,\n timestamp: new Date().toISOString()\n };\n\n \/\/ Loader zeigen\n document.getElementById('step-3').classList.remove('active');\n document.getElementById('loader').classList.add('active');\n setProgress(4);\n\n \/\/ CAPI Step 3 \u2013 Kontakt abgesendet\n hsTrack('FormStep3', { step: 3, format: format, frequenz: freq });\n\n \/\/ Webhook feuern (no-cors \u2192 N8N antwortet ohne CORS-Header standardm\u00e4\u00dfig)\n try {\n await fetch(WEBHOOK, {\n method: 'POST',\n headers: { 'Content-Type': 'application\/json' },\n body: JSON.stringify(payload),\n mode: 'no-cors'\n });\n \/\/ CAPI Lead \u2013 erst nach erfolgreichem Webhook\n hsTrack('Lead', {\n step: 4,\n format: format,\n frequenz: freq,\n email: email,\n phone: tel,\n });\n } catch(e) {\n console.warn('Webhook:', e);\n }\n\n \/\/ Loader weg, Rechner bef\u00fcllen & zeigen\n document.getElementById('loader').classList.remove('active');\n document.getElementById('s-name').textContent = vorname + ' ' + nachname;\n document.getElementById('s-firma').textContent = firma;\n document.getElementById('s-format').textContent = format;\n document.getElementById('s-freq').textContent = freq;\n rCalc();\n step = 4;\n document.getElementById('step-4').classList.add('active');\n}\n\n\/* \u2500\u2500\u2500 RECHNER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\nfunction fmt(n) { return n.toLocaleString('de-DE') + ' \u20ac'; }\n\nfunction calcPrices() {\n const cS = rv.s * 95, cO = rv.o * 95;\n const svc = (rv.e * 43) + (rv.c * 43);\n const hasSvc = rv.e > 0 || rv.c > 0;\n return {\n v3: Math.round(cS + cO + svc * 3),\n v25: Math.round(cS + cO + svc * 2.5),\n v2: Math.round(cS + cO + svc * 2),\n zehn: (cS * 10) - 200,\n hasSvc\n };\n}\n\nfunction rCalc() {\n const { v3, v25, v2, zehn, hasSvc } = calcPrices();\n document.getElementById('rr-s').textContent = rv.s + ' Std. = ' + fmt(rv.s * 95);\n document.getElementById('rr-o').textContent = rv.o > 0 ? rv.o + ' Std. = ' + fmt(rv.o * 95) : '0 Std.';\n document.getElementById('rr-e').textContent = rv.e > 0 ? rv.e + ' Std.' : '0 Std.';\n document.getElementById('rr-c').textContent = rv.c > 0 ? rv.c + ' Stk.' : '0 Stk.';\n ['s','o','e','c'].forEach(k => document.getElementById('rv-' + k).textContent = rv[k]);\n\n const el = document.getElementById('results');\n if (!hasSvc) {\n el.className = 'results c2';\n el.innerHTML =\n card('','Einzelbuchung','t-single','','Listenpreis','',fmt(v3),'pro Session \u00b7 keine Mindestlaufzeit') +\n card('featured','10er Karte','t-main','main','10 Sessions','main',fmt(zehn),'<span>\u2212200 \u20ac<\/span> auf 10 Aufnahmen');\n } else {\n el.className = 'results c3';\n el.innerHTML =\n card('','Einzelbuchung','t-single','','Listenpreis','',fmt(v3),'keine Mindestlaufzeit') +\n card('mid','6 Monate','t-mid','mid','Retainer','mid',fmt(v25),'<span>\u221217 %<\/span> \u00b7 fixe Slots') +\n card('featured','12 Monate','t-main','main','Jahresretainer','main',fmt(v2),'<span>\u221233 %<\/span> \u00b7 Exit ab Monat 3');\n }\n\n \/\/ WA-Link mit vollst\u00e4ndigen Daten\n const vorname = document.getElementById('f-vorname').value.trim();\n const nachname = document.getElementById('f-nachname').value.trim();\n const firma = document.getElementById('f-firma').value.trim();\n const lines = [\n 'Hallo! Ich habe \u00fcber das Formular auf high-group.de ein Angebot konfiguriert.',\n '',\n 'Name: ' + vorname + ' ' + nachname,\n 'Unternehmen: ' + firma,\n 'Format: ' + format,\n 'Frequenz: ' + freq,\n '',\n 'Studio: ' + rv.s + 'h' + (rv.o ? ' | Operator: ' + rv.o + 'h' : ''),\n rv.e ? 'Schnitt: ' + rv.e + 'h' : '',\n rv.c ? 'Clips: ' + rv.c + ' Stk.' : '',\n '',\n 'Listenpreis: ' + fmt(v3),\n hasSvc ? 'Retainer 6M: ' + fmt(v25) : '',\n hasSvc ? 'Retainer 12M: ' + fmt(v2) : '10er Karte: ' + fmt(zehn),\n ].filter(Boolean).join('\\n');\n\n document.getElementById('wa-link').href = 'https:\/\/wa.me\/' + WA_NR + '?text=' + encodeURIComponent(lines);\n}\n\nfunction card(cls, tag, tagCls, lblCls, lbl, priceCls, price, note) {\n return '<div class=\"rcard ' + cls + '\">'\n + '<div class=\"r-tag ' + tagCls + '\">' + tag + '<\/div>'\n + '<div class=\"r-lbl ' + lblCls + '\">' + lbl + '<\/div>'\n + '<div class=\"r-price ' + priceCls + '\">' + price + '<\/div>'\n + '<div class=\"r-note\">' + note + '<\/div>'\n + '<\/div>';\n}\n\nfunction rc(k, d) {\n rv[k] = Math.max(rm[k], rv[k] + d);\n rCalc();\n}\n\n\/* \u2500\u2500\u2500 Input-Fehler on-type entfernen \u2500\u2500\u2500\u2500\u2500 *\/\ndocument.querySelectorAll('input').forEach(el =>\n el.addEventListener('input', () => el.classList.remove('error'))\n);\n<\/script>\n<\/body>\n<\/html>\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>\n\t\t","protected":false},"excerpt":{"rendered":"<p>high.studios \u00b7 Podcast-Paket konfigurieren high.studios 1 Format 2 Frequenz 3 Kontakt 4 Angebot Schritt 1 von 4 Was wollt ihr produzieren? W\u00e4hlt das Format, das zu eurem Content-Ziel passt. 80-20 […]<\/p>\n","protected":false},"author":15,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_acf_changed":false,"content-type":"","site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-8168","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>80\/20 Formular - Videoproduktion K\u00f6ln - High. Group<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/high-group.de\/en\/80-20-formular\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"80\/20 Formular - Videoproduktion K\u00f6ln - High. Group\" \/>\n<meta property=\"og:description\" content=\"high.studios \u00b7 Podcast-Paket konfigurieren high.studios 1 Format 2 Frequenz 3 Kontakt 4 Angebot Schritt 1 von 4 Was wollt ihr produzieren? W\u00e4hlt das Format, das zu eurem Content-Ziel passt. 80-20 […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/high-group.de\/en\/80-20-formular\/\" \/>\n<meta property=\"og:site_name\" content=\"Videoproduktion K\u00f6ln - High. Group\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-02T14:33:26+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/high-group.de\\\/80-20-formular\\\/\",\"url\":\"https:\\\/\\\/high-group.de\\\/80-20-formular\\\/\",\"name\":\"80\\\/20 Formular - Videoproduktion K\u00f6ln - High. Group\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/high-group.de\\\/#website\"},\"datePublished\":\"2026-03-26T11:41:56+00:00\",\"dateModified\":\"2026-04-02T14:33:26+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/high-group.de\\\/80-20-formular\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/high-group.de\\\/80-20-formular\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/high-group.de\\\/80-20-formular\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Startseite\",\"item\":\"https:\\\/\\\/high-group.de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"80\\\/20 Formular\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/high-group.de\\\/#website\",\"url\":\"https:\\\/\\\/high-group.de\\\/\",\"name\":\"High Group\",\"description\":\"Hochwertige Videoproduktion f\u00fcr Business, Events, Messen in K\u00f6ln. Videografen aus K\u00f6ln.\",\"publisher\":{\"@id\":\"https:\\\/\\\/high-group.de\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/high-group.de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/high-group.de\\\/#organization\",\"name\":\"High Group\",\"url\":\"https:\\\/\\\/high-group.de\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/high-group.de\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/high-group.de\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/high-media-logo.png\",\"contentUrl\":\"https:\\\/\\\/high-group.de\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/high-media-logo.png\",\"width\":300,\"height\":150,\"caption\":\"High Group\"},\"image\":{\"@id\":\"https:\\\/\\\/high-group.de\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"80\/20 Formular - Videoproduktion K\u00f6ln - High. Group","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/high-group.de\/en\/80-20-formular\/","og_locale":"en_US","og_type":"article","og_title":"80\/20 Formular - Videoproduktion K\u00f6ln - High. Group","og_description":"high.studios \u00b7 Podcast-Paket konfigurieren high.studios 1 Format 2 Frequenz 3 Kontakt 4 Angebot Schritt 1 von 4 Was wollt ihr produzieren? W\u00e4hlt das Format, das zu eurem Content-Ziel passt. 80-20 […]","og_url":"https:\/\/high-group.de\/en\/80-20-formular\/","og_site_name":"Videoproduktion K\u00f6ln - High. Group","article_modified_time":"2026-04-02T14:33:26+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/high-group.de\/80-20-formular\/","url":"https:\/\/high-group.de\/80-20-formular\/","name":"80\/20 Formular - Videoproduktion K\u00f6ln - High. Group","isPartOf":{"@id":"https:\/\/high-group.de\/#website"},"datePublished":"2026-03-26T11:41:56+00:00","dateModified":"2026-04-02T14:33:26+00:00","breadcrumb":{"@id":"https:\/\/high-group.de\/80-20-formular\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/high-group.de\/80-20-formular\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/high-group.de\/80-20-formular\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Startseite","item":"https:\/\/high-group.de\/"},{"@type":"ListItem","position":2,"name":"80\/20 Formular"}]},{"@type":"WebSite","@id":"https:\/\/high-group.de\/#website","url":"https:\/\/high-group.de\/","name":"High Group","description":"High-quality video production for business, events and trade fairs in Cologne. Videographers from Cologne.","publisher":{"@id":"https:\/\/high-group.de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/high-group.de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/high-group.de\/#organization","name":"High Group","url":"https:\/\/high-group.de\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/high-group.de\/#\/schema\/logo\/image\/","url":"https:\/\/high-group.de\/wp-content\/uploads\/2024\/11\/high-media-logo.png","contentUrl":"https:\/\/high-group.de\/wp-content\/uploads\/2024\/11\/high-media-logo.png","width":300,"height":150,"caption":"High Group"},"image":{"@id":"https:\/\/high-group.de\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/high-group.de\/en\/wp-json\/wp\/v2\/pages\/8168","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/high-group.de\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/high-group.de\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/high-group.de\/en\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/high-group.de\/en\/wp-json\/wp\/v2\/comments?post=8168"}],"version-history":[{"count":19,"href":"https:\/\/high-group.de\/en\/wp-json\/wp\/v2\/pages\/8168\/revisions"}],"predecessor-version":[{"id":8406,"href":"https:\/\/high-group.de\/en\/wp-json\/wp\/v2\/pages\/8168\/revisions\/8406"}],"wp:attachment":[{"href":"https:\/\/high-group.de\/en\/wp-json\/wp\/v2\/media?parent=8168"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}