{"id":8735,"date":"2026-04-26T13:53:35","date_gmt":"2026-04-26T11:53:35","guid":{"rendered":"https:\/\/high-group.de\/?page_id=8735"},"modified":"2026-04-28T15:18:18","modified_gmt":"2026-04-28T13:18:18","slug":"80-20","status":"publish","type":"page","link":"https:\/\/high-group.de\/en\/80-20\/","title":{"rendered":"80\/20"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"8735\" class=\"elementor elementor-8735\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d22b0d6 e-con-full e-flex e-con e-parent\" data-id=\"d22b0d6\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0f4639d elementor-widget elementor-widget-html\" data-id=\"0f4639d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- \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\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  HIGH. B2B LEADS \u00b7 HERO MIT VIDEO (Standalone, Premium Apple-Style)\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\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  Eigenes Widget \u00b7 Eigene rote BG \u00b7 Video als Hero-Element\n  Eyebrow-Fix: bleibt auf 1 Zeile auf allen Viewports\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\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<style>\n  #hs-hero, #hs-hero *,\n  #hs-hero *::before, #hs-hero *::after {\n    box-sizing: border-box;\n    margin: 0; padding: 0;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  #hs-hero {\n    width: 100%;\n    position: relative;\n    overflow: hidden;\n    isolation: isolate;\n    font-family: 'DM Sans', system-ui, sans-serif !important;\n    color: #ffffff;\n    background:\n      radial-gradient(ellipse at 18% 10%, rgba(255,160,150,0.42), transparent 55%),\n      radial-gradient(ellipse at 82% 8%, rgba(255,255,255,0.18), transparent 55%),\n      radial-gradient(ellipse at 50% 110%, rgba(0,0,0,0.4), transparent 60%),\n      #a8121f;\n  }\n  #hs-hero::before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    background-image:\n      linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),\n      linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);\n    background-size: 80px 80px;\n    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);\n    mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);\n    pointer-events: none;\n    z-index: 0;\n  }\n  #hs-hero > * { position: relative; z-index: 1; }\n  #hs-hero .inner {\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 56px 32px 72px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    text-align: center;\n    gap: 0;\n  }\n  \/* Logo *\/\n  #hs-hero .logo {\n    font-family: 'Bricolage Grotesque', sans-serif !important;\n    font-weight: 800 !important;\n    font-size: 22px !important;\n    letter-spacing: -0.025em;\n    color: #ffffff !important;\n    line-height: 1 !important;\n    opacity: 0;\n    animation: hh-rise .55s 0s ease-out forwards;\n  }\n  \/* Eyebrow *\/\n  #hs-hero .eyebrow {\n    margin-top: 36px;\n    display: inline-flex;\n    align-items: center;\n    gap: 9px;\n    height: 28px;\n    padding: 0 14px;\n    border: 1px solid rgba(255,255,255,0.22);\n    border-radius: 999px;\n    background: rgba(0,0,0,0.34);\n    backdrop-filter: blur(14px) saturate(150%);\n    -webkit-backdrop-filter: blur(14px) saturate(150%);\n    box-shadow: 0 4px 20px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.12);\n    white-space: nowrap;\n    max-width: 100%;\n    opacity: 0;\n    animation: hh-rise .55s .12s ease-out forwards;\n  }\n  #hs-hero .eyebrow .pip {\n    width: 5px; height: 5px;\n    border-radius: 50%;\n    background: #ffffff;\n    flex-shrink: 0;\n    box-shadow: 0 0 10px rgba(255,255,255,0.7);\n    animation: hh-pulse 2.4s ease-in-out infinite;\n  }\n  @keyframes hh-pulse {\n    0%, 100% { opacity: 1; transform: scale(1); }\n    50%      { opacity: 0.5; transform: scale(0.6); }\n  }\n  #hs-hero .eyebrow span {\n    font-size: 10.5px !important;\n    font-weight: 600 !important;\n    letter-spacing: 0.2em !important;\n    text-transform: uppercase !important;\n    color: #ffffff !important;\n    line-height: 1 !important;\n    white-space: nowrap;\n  }\n  \/* Headline *\/\n  #hs-hero h1 {\n    margin-top: 22px;\n    font-family: 'Bricolage Grotesque', sans-serif !important;\n    font-weight: 800 !important;\n    font-size: clamp(34px, 5.4vw, 68px) !important;\n    line-height: 1.04 !important;\n    letter-spacing: -0.04em !important;\n    color: #ffffff !important;\n    max-width: 1080px;\n    text-shadow: 0 4px 32px rgba(0,0,0,0.25);\n    opacity: 0;\n    transform: translateY(16px);\n    animation: hh-rise .8s .22s ease-out forwards;\n  }\n  #hs-hero h1 .accent {\n    font-style: italic;\n    font-weight: 700 !important;\n    position: relative;\n    display: inline-block;\n  }\n  #hs-hero h1 .accent::after {\n    content: \"\";\n    position: absolute;\n    left: 4%; right: 4%;\n    bottom: 0.06em;\n    height: 0.07em;\n    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.95) 20%, rgba(255,255,255,0.95) 80%, transparent);\n    transform: scaleX(0);\n    transform-origin: left;\n    animation: hh-underline 1s 0.95s cubic-bezier(0.65, 0, 0.35, 1) forwards;\n  }\n  @keyframes hh-underline { to { transform: scaleX(1); } }\n  \/* Subheadline *\/\n  #hs-hero .subhead {\n    margin-top: 18px;\n    font-size: clamp(15px, 1.25vw, 19px) !important;\n    font-weight: 500 !important;\n    line-height: 1.5 !important;\n    color: rgba(255,255,255,0.86) !important;\n    max-width: 740px;\n    opacity: 0;\n    animation: hh-rise .65s .35s ease-out forwards;\n  }\n  #hs-hero .subhead strong {\n    font-weight: 700 !important;\n    color: #ffffff !important;\n  }\n  \/* CTA *\/\n  #hs-hero .cta {\n    margin-top: 32px;\n    display: inline-flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 3px;\n    height: 64px;\n    padding: 0 36px;\n    background: linear-gradient(180deg, #161616, #0a0a0a);\n    color: #ffffff !important;\n    border-radius: 14px;\n    border: 1px solid rgba(255,255,255,0.1);\n    text-decoration: none !important;\n    cursor: pointer;\n    transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;\n    box-shadow:\n      0 14px 44px rgba(0,0,0,0.55),\n      0 1px 0 rgba(255,255,255,0.08) inset,\n      0 -1px 0 rgba(0,0,0,0.4) inset;\n    position: relative;\n    overflow: hidden;\n    opacity: 0;\n    animation: hh-rise .65s .48s ease-out forwards;\n  }\n  #hs-hero .cta::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.22) 50%, transparent 70%);\n    transform: translateX(-110%);\n    transition: transform .6s ease;\n    pointer-events: none;\n  }\n  #hs-hero .cta:hover {\n    transform: translateY(-2px);\n    background: linear-gradient(180deg, #1f1f1f, #141414);\n    border-color: rgba(255,255,255,0.22);\n  }\n  #hs-hero .cta:hover::after { transform: translateX(110%); }\n  #hs-hero .cta-main {\n    display: inline-flex;\n    align-items: center;\n    gap: 10px;\n    font-size: 16px !important;\n    font-weight: 700 !important;\n    line-height: 1.1 !important;\n    letter-spacing: -0.005em !important;\n    color: #ffffff !important;\n  }\n  #hs-hero .cta-main svg {\n    width: 14px; height: 14px;\n    transition: transform .25s ease;\n    stroke: currentColor; fill: none;\n    stroke-width: 2.4;\n    stroke-linecap: round; stroke-linejoin: round;\n  }\n  #hs-hero .cta:hover .cta-main svg { transform: translateY(3px); }\n  #hs-hero .cta-sub {\n    font-size: 11px !important;\n    font-weight: 500 !important;\n    color: rgba(255,255,255,0.5) !important;\n    letter-spacing: 0.01em !important;\n    line-height: 1.1 !important;\n  }\n  \/* Trust *\/\n  #hs-hero .trust {\n    margin-top: 24px;\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n    gap: 8px;\n    opacity: 0;\n    animation: hh-rise .6s .6s ease-out forwards;\n  }\n  #hs-hero .pill {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    height: 32px;\n    padding: 0 14px;\n    border: 1px solid rgba(255,255,255,0.18);\n    border-radius: 999px;\n    background: rgba(0,0,0,0.28);\n    backdrop-filter: blur(10px);\n    -webkit-backdrop-filter: blur(10px);\n    transition: background .2s ease, border-color .2s ease, transform .2s ease;\n  }\n  #hs-hero .pill:hover {\n    background: rgba(0,0,0,0.42);\n    border-color: rgba(255,255,255,0.36);\n    transform: translateY(-1px);\n  }\n  #hs-hero .pill .icon-wrap {\n    display: flex; align-items: center; justify-content: center;\n    width: 18px; height: 18px;\n    border-radius: 50%;\n    background: rgba(255,255,255,0.1);\n    border: 1px solid rgba(255,255,255,0.2);\n  }\n  #hs-hero .pill .icon-wrap svg {\n    width: 11px; height: 11px;\n    stroke: #ffffff; fill: none;\n    stroke-width: 2.4;\n    stroke-linecap: round; stroke-linejoin: round;\n  }\n  #hs-hero .pill .label {\n    font-size: 11.5px !important;\n    font-weight: 700 !important;\n    color: #ffffff !important;\n    line-height: 1 !important;\n    white-space: nowrap;\n  }\n  \/* Video Section *\/\n  #hs-hero .video-block {\n    margin-top: 56px;\n    width: 100%;\n    max-width: 1040px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 16px;\n    opacity: 0;\n    animation: hh-video-in .8s .75s cubic-bezier(0.22, 1, 0.36, 1) forwards;\n  }\n  @keyframes hh-video-in {\n    from { opacity: 0; transform: translateY(24px) scale(0.98); }\n    to   { opacity: 1; transform: translateY(0) scale(1); }\n  }\n  #hs-hero .video-eyebrow {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 11px !important;\n    font-weight: 700 !important;\n    letter-spacing: 0.22em !important;\n    text-transform: uppercase !important;\n    color: rgba(255,255,255,0.6) !important;\n    line-height: 1 !important;\n  }\n  #hs-hero .video-eyebrow .dot {\n    width: 5px; height: 5px;\n    border-radius: 50%;\n    background: rgba(255,255,255,0.6);\n  }\n  #hs-hero .video-frame {\n    position: relative;\n    width: 100%;\n    padding-top: 56.25%;\n    border-radius: 20px;\n    overflow: hidden;\n    background: #000;\n    box-shadow:\n      0 36px 90px rgba(0,0,0,0.55),\n      0 0 0 1px rgba(255,255,255,0.16) inset,\n      0 0 80px rgba(255,255,255,0.06);\n    transition: transform .4s ease, box-shadow .4s ease;\n  }\n  #hs-hero .video-frame::before {\n    content: \"\";\n    position: absolute;\n    top: 0; left: 0; right: 0;\n    height: 1px;\n    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);\n    z-index: 2;\n    pointer-events: none;\n  }\n  #hs-hero .video-frame:hover {\n    transform: translateY(-3px);\n    box-shadow:\n      0 44px 110px rgba(0,0,0,0.65),\n      0 0 0 1px rgba(255,255,255,0.24) inset,\n      0 0 100px rgba(255,255,255,0.1);\n  }\n  #hs-hero .video-frame iframe {\n    position: absolute;\n    top: 0; left: 0;\n    width: 100%; height: 100%;\n    border: 0;\n  }\n  #hs-hero .video-caption {\n    font-size: 12px !important;\n    font-weight: 600 !important;\n    color: rgba(255,255,255,0.55) !important;\n    letter-spacing: 0.06em !important;\n    text-transform: uppercase;\n    line-height: 1.4 !important;\n    text-align: center;\n    margin: 0 !important;\n  }\n  @keyframes hh-rise {\n    to { opacity: 1; transform: translateY(0); }\n  }\n  @media (prefers-reduced-motion: reduce) {\n    #hs-hero *, #hs-hero *::before, #hs-hero *::after {\n      animation: none !important;\n      transition: none !important;\n    }\n    #hs-hero [class] { opacity: 1 !important; transform: none !important; }\n    #hs-hero h1 .accent::after { transform: scaleX(1) !important; }\n  }\n  @media (max-width: 1023px) {\n    #hs-hero .inner { padding: 44px 24px 56px; }\n    #hs-hero .eyebrow { margin-top: 28px; }\n    #hs-hero h1 { margin-top: 18px; }\n    #hs-hero .subhead { margin-top: 14px; }\n    #hs-hero .cta { margin-top: 26px; }\n    #hs-hero .trust { margin-top: 20px; }\n    #hs-hero .video-block { margin-top: 44px; }\n    #hs-hero .video-frame { border-radius: 16px; }\n  }\n  @media (max-width: 640px) {\n    #hs-hero .inner { padding: 36px 18px 48px; }\n    #hs-hero .logo { font-size: 19px !important; }\n    #hs-hero .eyebrow {\n      margin-top: 24px;\n      height: 24px;\n      padding: 0 11px;\n      gap: 7px;\n    }\n    #hs-hero .eyebrow span {\n      font-size: 9px !important;\n      letter-spacing: 0.14em !important;\n    }\n    #hs-hero h1 { margin-top: 16px; font-size: clamp(28px, 8.5vw, 40px) !important; }\n    #hs-hero .subhead { margin-top: 12px; font-size: 14.5px !important; }\n    #hs-hero .cta { margin-top: 24px; height: 56px; padding: 0 26px; }\n    #hs-hero .cta-main { font-size: 14.5px !important; }\n    #hs-hero .cta-sub { font-size: 10.5px !important; }\n    #hs-hero .trust { margin-top: 18px; gap: 6px; }\n    #hs-hero .pill { height: 28px; padding: 0 11px; gap: 6px; }\n    #hs-hero .pill .icon-wrap { width: 16px; height: 16px; }\n    #hs-hero .pill .icon-wrap svg { width: 10px; height: 10px; }\n    #hs-hero .pill .label { font-size: 10.5px !important; }\n    #hs-hero .video-block { margin-top: 36px; gap: 12px; }\n    #hs-hero .video-eyebrow { font-size: 10px !important; letter-spacing: 0.18em !important; }\n    #hs-hero .video-frame { border-radius: 14px; }\n    #hs-hero .video-caption { font-size: 11px !important; letter-spacing: 0.05em !important; }\n  }\n  @media (max-width: 380px) {\n    #hs-hero .eyebrow {\n      height: 22px;\n      padding: 0 9px;\n      gap: 6px;\n    }\n    #hs-hero .eyebrow span {\n      font-size: 8.5px !important;\n      letter-spacing: 0.12em !important;\n    }\n  }\n<\/style>\n<section id=\"hs-hero\" aria-label=\"Hero\">\n  <div class=\"inner\">\n    <div class=\"logo\">high<span class=\"logo-dot\">.<\/span>studios<\/div>\n    <div class=\"eyebrow\">\n      <span class=\"pip\" aria-hidden=\"true\"><\/span>\n      <span>F\u00fcr CEOs, Founder &amp; Personal Brands<\/span>\n    <\/div>\n    <h1>Das <span class=\"accent\">80-20 System<\/span><br>f\u00fcr mehr Sichtbarkeit und Umsatz<\/h1>\n    <p class=\"subhead\">\n      Ein Drehtag in den high.studios K\u00f6ln = <strong>Content auf allen relevanten Plattformen<\/strong>. Ohne Mitarbeiter, Fixkosten oder Koordinationschaos.\n    <\/p>\n    <a href=\"#hs-form\" class=\"cta\" id=\"hs-cta-button\">\n      <span class=\"cta-main\">\n        Jetzt Paket konfigurieren\n        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n          <path d=\"M12 5v14M6 13l6 6 6-6\"\/>\n        <\/svg>\n      <\/span>\n      <span class=\"cta-sub\">Keine versteckten Kosten \u00b7 Kein Verkaufsdruck<\/span>\n    <\/a>\n    <div class=\"trust\">\n      <div class=\"pill\">\n        <span class=\"icon-wrap\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M9 12l2 2 4-4\"\/><circle cx=\"12\" cy=\"12\" r=\"9\"\/><\/svg><\/span>\n        <span class=\"label\">150+ Brands<\/span>\n      <\/div>\n      <div class=\"pill\">\n        <span class=\"icon-wrap\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/><path d=\"M3 9h18M9 21V9\"\/><\/svg><\/span>\n        <span class=\"label\">1.000 m\u00b2 Produktion<\/span>\n      <\/div>\n      <div class=\"pill\">\n        <span class=\"icon-wrap\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M3 7l9-4 9 4-9 4z\"\/><path d=\"M3 12l9 4 9-4\"\/><\/svg><\/span>\n        <span class=\"label\">3 Studios<\/span>\n      <\/div>\n      <div class=\"pill\">\n        <span class=\"icon-wrap\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"9\"\/><path d=\"M12 7v5l3 2\"\/><\/svg><\/span>\n        <span class=\"label\">8+ Jahre<\/span>\n      <\/div>\n    <\/div>\n    <div class=\"video-block\">\n      <p class=\"video-eyebrow\">\n        <span class=\"dot\"><\/span>\n        Sieh es dir an \u00b7 03:50 Min\n      <\/p>\n      <div class=\"video-frame\">\n        <iframe\n          src=\"https:\/\/player.vimeo.com\/video\/1182976630?h=5fd3193ca3&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479\"\n          frameborder=\"0\"\n          allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share\"\n          referrerpolicy=\"strict-origin-when-cross-origin\"\n          title=\"80\/20 System \u2014 erkl\u00e4rt von Philipp Kaul, GF high.media GmbH\"><\/iframe>\n      <\/div>\n      <p class=\"video-caption\">Erkl\u00e4rt von Philipp Kaul \u00b7 Gr\u00fcnder high.media GmbH<\/p>\n    <\/div>\n  <\/div>\n<\/section>\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\n(function() {\n  if (window.__hsHeroReady) return;\n  window.__hsHeroReady = true;\n  var btn = document.getElementById('hs-cta-button');\n  if (btn) {\n    btn.addEventListener('click', function(e) {\n      var target = document.querySelector('#hs-form');\n      if (target) {\n        e.preventDefault();\n        target.scrollIntoView({ behavior: 'smooth', block: 'start' });\n      }\n    });\n  }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8838e6a e-con-full e-flex e-con e-parent\" data-id=\"8838e6a\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-07f91cd elementor-widget elementor-widget-html\" data-id=\"07f91cd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- \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\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  HIGH. B2B LEADS \u00b7 ANIMATION (Standalone Section, Dark Premium)\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\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  Eigenes Widget \u00b7 Eigene BG \u00b7 Apple-Keynote-Vibes\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\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<style>\n  #hs-anim, #hs-anim *,\n  #hs-anim *::before, #hs-anim *::after {\n    box-sizing: border-box;\n    margin: 0; padding: 0;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  #hs-anim {\n    width: 100%;\n    position: relative;\n    overflow: hidden;\n    isolation: isolate;\n    font-family: 'DM Sans', system-ui, sans-serif !important;\n    color: #ffffff;\n    background:\n      radial-gradient(ellipse at 15% 20%, rgba(168,18,31,0.18), transparent 50%),\n      radial-gradient(ellipse at 85% 80%, rgba(168,18,31,0.14), transparent 50%),\n      #0a0a0a;\n  }\n  #hs-anim::before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    background-image:\n      linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),\n      linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);\n    background-size: 80px 80px;\n    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);\n    mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);\n    pointer-events: none;\n    z-index: 0;\n  }\n  #hs-anim::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.6) 100%);\n    pointer-events: none;\n    z-index: 1;\n  }\n  #hs-anim > * { position: relative; z-index: 2; }\n\n  #hs-anim .inner {\n    max-width: 1280px;\n    margin: 0 auto;\n    padding: 96px 32px;\n  }\n\n  \/* Header *\/\n  #hs-anim .head {\n    text-align: center;\n    margin-bottom: 52px;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 14px;\n  }\n  #hs-anim .eyebrow {\n    display: inline-flex;\n    align-items: center;\n    gap: 9px;\n    height: 28px;\n    padding: 0 14px;\n    border: 1px solid rgba(168,18,31,0.4);\n    border-radius: 999px;\n    background: rgba(168,18,31,0.1);\n    backdrop-filter: blur(10px);\n    -webkit-backdrop-filter: blur(10px);\n  }\n  #hs-anim .eyebrow .pip {\n    width: 5px; height: 5px;\n    border-radius: 50%;\n    background: #ff3949;\n    box-shadow: 0 0 10px rgba(255,57,73,0.7);\n    animation: ha-pulse 2.4s ease-in-out infinite;\n  }\n  @keyframes ha-pulse {\n    0%, 100% { opacity: 1; transform: scale(1); }\n    50%      { opacity: 0.5; transform: scale(0.6); }\n  }\n  #hs-anim .eyebrow span {\n    font-size: 10.5px !important;\n    font-weight: 600 !important;\n    letter-spacing: 0.2em !important;\n    text-transform: uppercase !important;\n    color: #ff7a85 !important;\n    line-height: 1 !important;\n  }\n  #hs-anim h2 {\n    font-family: 'Bricolage Grotesque', sans-serif !important;\n    font-weight: 800 !important;\n    font-size: clamp(28px, 3.6vw, 48px) !important;\n    line-height: 1.08 !important;\n    letter-spacing: -0.035em !important;\n    color: #ffffff !important;\n    margin: 0 !important;\n    max-width: 800px;\n    text-shadow: 0 4px 32px rgba(0,0,0,0.5);\n  }\n  #hs-anim h2 .accent {\n    font-style: italic;\n    font-weight: 700 !important;\n    color: #ff5060 !important;\n  }\n  #hs-anim .subhead {\n    font-size: 14.5px !important;\n    line-height: 1.5 !important;\n    color: rgba(255,255,255,0.55) !important;\n    max-width: 540px;\n    margin: 0 !important;\n  }\n\n  \/* Flow Grid *\/\n  #hs-anim .flow {\n    display: grid;\n    grid-template-columns: 1fr 36px 1fr 36px 1fr 36px 1fr;\n    align-items: stretch;\n    max-width: 1240px;\n    margin: 0 auto;\n  }\n\n  #hs-anim .stage {\n    position: relative;\n    padding: 24px 22px 26px;\n    border: 1px solid rgba(255,255,255,0.1);\n    border-radius: 18px;\n    background:\n      linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01) 60%),\n      rgba(255,255,255,0.02);\n    backdrop-filter: blur(20px) saturate(160%);\n    -webkit-backdrop-filter: blur(20px) saturate(160%);\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    box-shadow:\n      0 18px 50px rgba(0,0,0,0.6),\n      inset 0 1px 0 rgba(255,255,255,0.08),\n      0 0 0 1px rgba(168,18,31,0.05);\n    overflow: hidden;\n    text-align: left;\n    opacity: 0;\n    transform: translateY(20px) scale(0.96);\n    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;\n  }\n  #hs-anim .stage::before {\n    content: \"\";\n    position: absolute;\n    top: 0; left: 0; right: 0;\n    height: 1px;\n    background: linear-gradient(90deg, transparent, rgba(168,18,31,0.5), transparent);\n  }\n  #hs-anim .stage:hover {\n    transform: translateY(-4px);\n    border-color: rgba(168,18,31,0.4);\n    box-shadow:\n      0 28px 64px rgba(0,0,0,0.7),\n      0 0 32px rgba(168,18,31,0.18),\n      inset 0 1px 0 rgba(255,255,255,0.12);\n  }\n  #hs-anim .stage-1 { animation: ha-stage-in .65s .15s cubic-bezier(0.22, 1, 0.36, 1) forwards; }\n  #hs-anim .stage-2 { animation: ha-stage-in .65s .4s cubic-bezier(0.22, 1, 0.36, 1) forwards; }\n  #hs-anim .stage-3 { animation: ha-stage-in .65s .65s cubic-bezier(0.22, 1, 0.36, 1) forwards; }\n  #hs-anim .stage-4 { animation: ha-stage-in .65s .9s cubic-bezier(0.22, 1, 0.36, 1) forwards; }\n  @keyframes ha-stage-in { to { opacity: 1; transform: translateY(0) scale(1); } }\n\n  #hs-anim .step-head {\n    display: flex; align-items: center; gap: 10px;\n    margin-bottom: 6px;\n  }\n  #hs-anim .step-idx {\n    font-family: 'Bricolage Grotesque', sans-serif !important;\n    font-weight: 800 !important;\n    font-size: 13px !important;\n    color: rgba(255,255,255,0.32) !important;\n    line-height: 1 !important;\n  }\n  #hs-anim .step-label {\n    font-size: 9.5px !important;\n    font-weight: 700 !important;\n    letter-spacing: 0.22em !important;\n    text-transform: uppercase !important;\n    color: rgba(255,255,255,0.85) !important;\n    line-height: 1 !important;\n  }\n  #hs-anim .step-divider {\n    flex: 1;\n    height: 1px;\n    background: linear-gradient(90deg, rgba(255,255,255,0.16), transparent);\n  }\n\n  \/* Stage 1 \u00b7 Input *\/\n  #hs-anim .input-icon {\n    width: 60px; height: 60px;\n    border-radius: 14px;\n    background: linear-gradient(135deg, rgba(168,18,31,0.32), rgba(168,18,31,0.1));\n    border: 1px solid rgba(168,18,31,0.4);\n    display: flex; align-items: center; justify-content: center;\n    box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 8px 18px rgba(168,18,31,0.32);\n    margin-top: 4px;\n  }\n  #hs-anim .input-icon svg {\n    width: 28px; height: 28px;\n    stroke: #ffffff; fill: none;\n    stroke-width: 1.8;\n    stroke-linecap: round; stroke-linejoin: round;\n  }\n  #hs-anim .input-num {\n    font-family: 'Bricolage Grotesque', sans-serif !important;\n    font-weight: 800 !important;\n    font-size: 48px !important;\n    line-height: 0.9 !important;\n    letter-spacing: -0.05em !important;\n    color: #ffffff !important;\n    margin-top: 6px;\n  }\n  #hs-anim .input-num .unit { font-size: 0.45em; font-weight: 700; opacity: 0.7; }\n  #hs-anim .input-sub {\n    font-size: 13px !important;\n    font-weight: 600 !important;\n    color: rgba(255,255,255,0.7) !important;\n    line-height: 1.4 !important;\n    margin-top: auto;\n  }\n\n  \/* Stage 2 \u00b7 Output *\/\n  #hs-anim .out-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: auto 0; }\n  #hs-anim .out-block { display: flex; flex-direction: column; gap: 6px; }\n  #hs-anim .out-num {\n    font-family: 'Bricolage Grotesque', sans-serif !important;\n    font-weight: 800 !important;\n    font-size: 34px !important;\n    line-height: 1 !important;\n    letter-spacing: -0.045em !important;\n    color: #ffffff !important;\n  }\n  #hs-anim .out-lbl {\n    font-size: 10px !important;\n    font-weight: 700 !important;\n    letter-spacing: 0.12em !important;\n    text-transform: uppercase !important;\n    color: rgba(255,255,255,0.55) !important;\n    line-height: 1 !important;\n  }\n  #hs-anim .pod-stack {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    grid-template-rows: 1fr 1fr;\n    gap: 3px;\n    margin-top: 6px;\n  }\n  #hs-anim .pod-stack span {\n    height: 9px;\n    border-radius: 2px;\n    background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.5));\n    box-shadow: 0 1px 4px rgba(168,18,31,0.25), 0 0 8px rgba(255,255,255,0.1);\n    opacity: 0;\n    transform: scaleY(0.3);\n    transform-origin: bottom;\n    animation: ha-pod-in .35s cubic-bezier(0.22, 1.6, 0.36, 1) forwards;\n  }\n  #hs-anim .pod-stack span:nth-child(1) { animation-delay: .55s; }\n  #hs-anim .pod-stack span:nth-child(2) { animation-delay: .6s; }\n  #hs-anim .pod-stack span:nth-child(3) { animation-delay: .65s; }\n  #hs-anim .pod-stack span:nth-child(4) { animation-delay: .7s; }\n  #hs-anim .pod-stack span:nth-child(5) { animation-delay: .75s; }\n  #hs-anim .pod-stack span:nth-child(6) { animation-delay: .8s; }\n  #hs-anim .pod-stack span:nth-child(7) { animation-delay: .85s; }\n  #hs-anim .pod-stack span:nth-child(8) { animation-delay: .9s; }\n  @keyframes ha-pod-in { to { opacity: 1; transform: scaleY(1); } }\n  #hs-anim .clip-grid {\n    display: grid;\n    grid-template-columns: repeat(10, 1fr);\n    gap: 2px;\n    margin-top: 6px;\n  }\n  #hs-anim .clip-grid span {\n    aspect-ratio: 1;\n    border-radius: 1.5px;\n    background: rgba(255,255,255,0.5);\n    box-shadow: 0 0 4px rgba(255,255,255,0.15);\n    opacity: 0;\n    transform: scale(0.5);\n    animation: ha-clip-in .25s cubic-bezier(0.34, 1.5, 0.64, 1) forwards;\n    animation-delay: calc(0.6s + var(--i, 0) * 0.018s);\n  }\n  @keyframes ha-clip-in { to { opacity: 1; transform: scale(1); } }\n\n  \/* Stage 3 \u00b7 Distribution *\/\n  #hs-anim .dist-grid {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 8px;\n    margin: auto 0;\n  }\n  #hs-anim .platform {\n    display: flex; align-items: center; justify-content: center;\n    aspect-ratio: 1;\n    border-radius: 11px;\n    background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));\n    border: 1px solid rgba(255,255,255,0.14);\n    color: #ffffff;\n    transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;\n    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);\n    opacity: 0;\n    transform: scale(0.6) rotate(-8deg);\n    animation: ha-plat-in .4s cubic-bezier(0.34, 1.5, 0.64, 1) forwards;\n  }\n  #hs-anim .platform:nth-child(1) { animation-delay: .85s; }\n  #hs-anim .platform:nth-child(2) { animation-delay: .92s; }\n  #hs-anim .platform:nth-child(3) { animation-delay: .99s; }\n  #hs-anim .platform:nth-child(4) { animation-delay: 1.06s; }\n  #hs-anim .platform:nth-child(5) { animation-delay: 1.13s; }\n  #hs-anim .platform:nth-child(6) { animation-delay: 1.2s; }\n  @keyframes ha-plat-in { to { opacity: 1; transform: scale(1) rotate(0); } }\n  #hs-anim .platform:hover {\n    transform: translateY(-2px) scale(1.05);\n    background: linear-gradient(180deg, rgba(168,18,31,0.32), rgba(168,18,31,0.08));\n    border-color: rgba(168,18,31,0.5);\n    box-shadow: 0 8px 20px rgba(168,18,31,0.32), inset 0 1px 0 rgba(255,255,255,0.12);\n  }\n  #hs-anim .platform svg { width: 22px; height: 22px; fill: currentColor; }\n  #hs-anim .dist-foot {\n    display: flex; align-items: center; justify-content: center;\n    padding-top: 10px;\n    border-top: 1px solid rgba(255,255,255,0.08);\n    margin-top: 4px;\n  }\n  #hs-anim .dist-badge {\n    display: inline-flex; align-items: center;\n    height: 19px;\n    padding: 0 10px;\n    background: rgba(168,18,31,0.12);\n    border: 1px solid rgba(168,18,31,0.32);\n    border-radius: 999px;\n    font-size: 9.5px !important;\n    font-weight: 700 !important;\n    letter-spacing: 0.08em !important;\n    color: #ff7a85 !important;\n    line-height: 1 !important;\n    text-transform: uppercase;\n  }\n\n  \/* Stage 4 \u00b7 Result (white climax) *\/\n  #hs-anim .stage-4 {\n    background: linear-gradient(180deg, #ffffff, #fafafa) !important;\n    border-color: rgba(255,255,255,0.95) !important;\n    box-shadow:\n      0 24px 64px rgba(0,0,0,0.6),\n      0 0 80px rgba(255,255,255,0.18),\n      inset 0 1px 0 rgba(255,255,255,0.7) !important;\n  }\n  #hs-anim .stage-4::before {\n    background: linear-gradient(90deg, transparent, rgba(168,18,31,0.65), transparent) !important;\n  }\n  #hs-anim .stage-4 .step-idx { color: rgba(168,18,31,0.4) !important; }\n  #hs-anim .stage-4 .step-label { color: #a8121f !important; }\n  #hs-anim .stage-4 .step-divider {\n    background: linear-gradient(90deg, rgba(168,18,31,0.32), transparent) !important;\n  }\n  #hs-anim .result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: auto 0; }\n  #hs-anim .result-chip {\n    display: flex; align-items: center; gap: 8px;\n    padding: 9px 11px;\n    background: linear-gradient(135deg, #a8121f, #c11929);\n    border-radius: 9px;\n    color: #ffffff !important;\n    box-shadow: 0 6px 16px rgba(168,18,31,0.42);\n    opacity: 0;\n    transform: translateY(8px);\n    animation: ha-res-in .35s cubic-bezier(0.34, 1.3, 0.64, 1) forwards;\n  }\n  #hs-anim .result-chip:nth-child(1) { animation-delay: 1.15s; }\n  #hs-anim .result-chip:nth-child(2) { animation-delay: 1.25s; }\n  #hs-anim .result-chip:nth-child(3) { animation-delay: 1.35s; }\n  #hs-anim .result-chip:nth-child(4) { animation-delay: 1.45s; }\n  @keyframes ha-res-in { to { opacity: 1; transform: translateY(0); } }\n  #hs-anim .result-chip svg {\n    width: 13px; height: 13px;\n    flex-shrink: 0;\n    stroke: currentColor; fill: none;\n    stroke-width: 2.4;\n    stroke-linecap: round; stroke-linejoin: round;\n  }\n  #hs-anim .result-chip span {\n    font-size: 11px !important;\n    font-weight: 700 !important;\n    line-height: 1.1 !important;\n    color: #ffffff !important;\n  }\n\n  \/* Connectors *\/\n  #hs-anim .conn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: rgba(255,255,255,0.45);\n    position: relative;\n  }\n  #hs-anim .conn svg { width: 32px; height: 14px; overflow: visible; }\n  #hs-anim .conn path {\n    stroke: currentColor; fill: none;\n    stroke-width: 2;\n    stroke-linecap: round; stroke-linejoin: round;\n    filter: drop-shadow(0 0 6px rgba(168,18,31,0.4));\n    stroke-dasharray: 36;\n    stroke-dashoffset: 36;\n  }\n  #hs-anim .conn-1 path { animation: ha-draw .4s .4s ease-out forwards; }\n  #hs-anim .conn-2 path { animation: ha-draw .4s .65s ease-out forwards; }\n  #hs-anim .conn-3 path { animation: ha-draw .4s .9s ease-out forwards; }\n  @keyframes ha-draw { to { stroke-dashoffset: 0; } }\n  #hs-anim .conn .pulse {\n    position: absolute;\n    top: 50%; left: 0;\n    width: 16px; height: 6px;\n    background: linear-gradient(90deg, transparent, #ff5060, transparent);\n    border-radius: 3px;\n    filter: blur(2px) drop-shadow(0 0 8px #ff5060);\n    transform: translateY(-50%);\n    opacity: 0;\n  }\n  #hs-anim .conn-1 .pulse { animation: ha-conn-pulse 2.6s 1.7s ease-in-out infinite; }\n  #hs-anim .conn-2 .pulse { animation: ha-conn-pulse 2.6s 2.0s ease-in-out infinite; }\n  #hs-anim .conn-3 .pulse { animation: ha-conn-pulse 2.6s 2.3s ease-in-out infinite; }\n  @keyframes ha-conn-pulse {\n    0%, 15%   { opacity: 0; left: -8%; }\n    25%       { opacity: 1; }\n    75%       { opacity: 1; }\n    85%, 100% { opacity: 0; left: 100%; }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    #hs-anim *, #hs-anim *::before, #hs-anim *::after {\n      animation: none !important;\n      transition: none !important;\n    }\n    #hs-anim [class] { opacity: 1 !important; transform: none !important; }\n    #hs-anim .conn path { stroke-dashoffset: 0 !important; }\n  }\n\n  @media (max-width: 1023px) {\n    #hs-anim .inner { padding: 72px 24px; }\n    #hs-anim .head { margin-bottom: 40px; }\n    #hs-anim .flow {\n      grid-template-columns: 1fr;\n      gap: 18px;\n      max-width: 520px;\n    }\n    #hs-anim .conn { transform: rotate(90deg); height: 32px; }\n  }\n  @media (max-width: 640px) {\n    #hs-anim .inner { padding: 56px 18px; }\n    #hs-anim h2 { font-size: 26px !important; }\n    #hs-anim .subhead { font-size: 13.5px !important; }\n    #hs-anim .stage { padding: 18px 16px; border-radius: 16px; }\n    #hs-anim .input-icon { width: 50px; height: 50px; }\n    #hs-anim .input-icon svg { width: 24px; height: 24px; }\n    #hs-anim .input-num { font-size: 38px !important; }\n    #hs-anim .out-num { font-size: 28px !important; }\n    #hs-anim .platform svg { width: 18px; height: 18px; }\n    #hs-anim .result-chip span { font-size: 10.5px !important; }\n  }\n<\/style>\n\n<section id=\"hs-anim\" aria-label=\"So funktioniert das System\">\n  <div class=\"inner\">\n\n    <div class=\"head\">\n      <div class=\"eyebrow\">\n        <span class=\"pip\" aria-hidden=\"true\"><\/span>\n        <span>So funktioniert es<\/span>\n      <\/div>\n      <h2>Vom <span class=\"accent\">Drehtag<\/span> zur Omnipr\u00e4senz.<\/h2>\n      <p class=\"subhead\">In 4 Schritten von 4 Stunden Aufnahme zu 30 Tagen Content auf allen Plattformen.<\/p>\n    <\/div>\n\n    <div class=\"flow\">\n\n      <article class=\"stage stage-1\">\n        <div class=\"step-head\">\n          <span class=\"step-idx\">01<\/span>\n          <span class=\"step-label\">Dein Input<\/span>\n          <span class=\"step-divider\"><\/span>\n        <\/div>\n        <div class=\"input-icon\">\n          <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n            <rect x=\"2\" y=\"6\" width=\"14\" height=\"12\" rx=\"2\"\/>\n            <path d=\"M16 10l5-3v10l-5-3z\"\/>\n          <\/svg>\n        <\/div>\n        <span class=\"input-num\">04<span class=\"unit\">h<\/span><\/span>\n        <span class=\"input-sub\">Drehtag in den high.studios K\u00f6ln-Ehrenfeld<\/span>\n      <\/article>\n\n      <div class=\"conn conn-1\" aria-hidden=\"true\">\n        <svg viewBox=\"0 0 32 14\"><path d=\"M2 7 L26 7 M22 3 L26 7 L22 11\"\/><\/svg>\n        <span class=\"pulse\"><\/span>\n      <\/div>\n\n      <article class=\"stage stage-2\">\n        <div class=\"step-head\">\n          <span class=\"step-idx\">02<\/span>\n          <span class=\"step-label\">Output<\/span>\n          <span class=\"step-divider\"><\/span>\n        <\/div>\n        <div class=\"out-row\">\n          <div class=\"out-block\">\n            <span class=\"out-num\">08<\/span>\n            <span class=\"out-lbl\">Podcasts<\/span>\n            <div class=\"pod-stack\" aria-hidden=\"true\">\n              <span><\/span><span><\/span><span><\/span><span><\/span>\n              <span><\/span><span><\/span><span><\/span><span><\/span>\n            <\/div>\n          <\/div>\n          <div class=\"out-block\">\n            <span class=\"out-num\">30<\/span>\n            <span class=\"out-lbl\">Short-Clips<\/span>\n            <div class=\"clip-grid\" aria-hidden=\"true\">\n              <span style=\"--i:0\"><\/span><span style=\"--i:1\"><\/span><span style=\"--i:2\"><\/span><span style=\"--i:3\"><\/span><span style=\"--i:4\"><\/span>\n              <span style=\"--i:5\"><\/span><span style=\"--i:6\"><\/span><span style=\"--i:7\"><\/span><span style=\"--i:8\"><\/span><span style=\"--i:9\"><\/span>\n              <span style=\"--i:10\"><\/span><span style=\"--i:11\"><\/span><span style=\"--i:12\"><\/span><span style=\"--i:13\"><\/span><span style=\"--i:14\"><\/span>\n              <span style=\"--i:15\"><\/span><span style=\"--i:16\"><\/span><span style=\"--i:17\"><\/span><span style=\"--i:18\"><\/span><span style=\"--i:19\"><\/span>\n              <span style=\"--i:20\"><\/span><span style=\"--i:21\"><\/span><span style=\"--i:22\"><\/span><span style=\"--i:23\"><\/span><span style=\"--i:24\"><\/span>\n              <span style=\"--i:25\"><\/span><span style=\"--i:26\"><\/span><span style=\"--i:27\"><\/span><span style=\"--i:28\"><\/span><span style=\"--i:29\"><\/span>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/article>\n\n      <div class=\"conn conn-2\" aria-hidden=\"true\">\n        <svg viewBox=\"0 0 32 14\"><path d=\"M2 7 L26 7 M22 3 L26 7 L22 11\"\/><\/svg>\n        <span class=\"pulse\"><\/span>\n      <\/div>\n\n      <article class=\"stage stage-3\">\n        <div class=\"step-head\">\n          <span class=\"step-idx\">03<\/span>\n          <span class=\"step-label\">Distribution<\/span>\n          <span class=\"step-divider\"><\/span>\n        <\/div>\n        <div class=\"dist-grid\">\n          <span class=\"platform\" title=\"YouTube\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M23 7.2s-.2-1.6-.9-2.3c-.9-.9-1.9-.9-2.3-1C16.6 3.6 12 3.6 12 3.6s-4.6 0-7.8.3c-.4.1-1.4.1-2.3 1C1.2 5.6 1 7.2 1 7.2S.8 9.1.8 11v1.8c0 1.9.2 3.8.2 3.8s.2 1.6.9 2.3c.9.9 2.1.9 2.6 1C7 20.2 12 20.4 12 20.4s4.6 0 7.8-.3c.4-.1 1.4-.1 2.3-1 .7-.7.9-2.3.9-2.3s.2-1.9.2-3.8V11c0-1.9-.2-3.8-.2-3.8zM9.6 14.8V8l6.5 3.4-6.5 3.4z\"\/><\/svg><\/span>\n          <span class=\"platform\" title=\"Spotify\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm4.6 14.4c-.2.3-.6.4-.9.2-2.5-1.5-5.6-1.9-9.3-1-.4.1-.7-.1-.8-.5-.1-.4.1-.7.5-.8 4-.9 7.5-.5 10.3 1.2.3.2.4.6.2.9zm1.2-2.7c-.2.4-.7.5-1.1.3-2.8-1.7-7.1-2.2-10.5-1.2-.4.1-.9-.1-1-.5-.1-.4.1-.9.5-1 3.8-1.2 8.6-.6 11.8 1.4.3.2.4.7.3 1zm.1-2.8c-3.4-2-9-2.2-12.2-1.2-.5.2-1.1-.1-1.2-.6-.2-.5.1-1.1.6-1.2 3.7-1.1 9.9-.9 13.8 1.4.5.3.6.9.3 1.4-.3.4-.9.5-1.3.2z\"\/><\/svg><\/span>\n          <span class=\"platform\" title=\"Apple Podcasts\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 2C6.5 2 2 6.5 2 12c0 4.4 2.9 8.2 6.9 9.5l.3-2.1C6.1 18.4 4 15.5 4 12c0-4.4 3.6-8 8-8s8 3.6 8 8c0 3.5-2.1 6.4-5.2 7.4l.3 2.1c4-1.3 6.9-5.1 6.9-9.5 0-5.5-4.5-10-10-10zm0 5c-1.7 0-3 1.3-3 3 0 1.3.8 2.4 2 2.8L10 22h4l-1-9.2c1.2-.4 2-1.5 2-2.8 0-1.7-1.3-3-3-3z\"\/><\/svg><\/span>\n          <span class=\"platform\" title=\"LinkedIn\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM8.3 17H5.7V9.7h2.6V17zM7 8.5c-.9 0-1.5-.7-1.5-1.5S6.1 5.5 7 5.5s1.5.7 1.5 1.5S7.9 8.5 7 8.5zM18.3 17h-2.6v-3.9c0-1-.4-1.6-1.3-1.6-.7 0-1.1.5-1.3 1-.1.2-.1.4-.1.7V17h-2.6V9.7H13v1.1c.3-.5 1-1.3 2.4-1.3 1.7 0 3 1.1 3 3.5V17z\"\/><\/svg><\/span>\n          <span class=\"platform\" title=\"Instagram\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 2.2c3.2 0 3.6 0 4.8.1 1.2.1 1.8.3 2.2.4.6.2 1 .5 1.4.9.4.4.7.8.9 1.4.2.4.4 1 .4 2.2.1 1.2.1 1.6.1 4.8s0 3.6-.1 4.8c-.1 1.2-.3 1.8-.4 2.2-.2.6-.5 1-.9 1.4-.4.4-.8.7-1.4.9-.4.2-1 .4-2.2.4-1.2.1-1.6.1-4.8.1s-3.6 0-4.8-.1c-1.2-.1-1.8-.3-2.2-.4-.6-.2-1-.5-1.4-.9-.4-.4-.7-.8-.9-1.4-.2-.4-.4-1-.4-2.2-.1-1.2-.1-1.6-.1-4.8s0-3.6.1-4.8c.1-1.2.3-1.8.4-2.2.2-.6.5-1 .9-1.4.4-.4.8-.7 1.4-.9.4-.2 1-.4 2.2-.4 1.2-.1 1.6-.1 4.8-.1zM12 0C8.7 0 8.3 0 7.1.1 5.9.2 5 .4 4.3.7c-.8.3-1.5.7-2.2 1.4C1.4 2.8 1 3.5.7 4.3.4 5 .2 5.9.1 7.1 0 8.3 0 8.7 0 12s0 3.7.1 4.9c.1 1.2.3 2.1.6 2.8.3.8.7 1.5 1.4 2.2.7.7 1.4 1.1 2.2 1.4.7.3 1.6.5 2.8.6 1.2.1 1.6.1 4.9.1s3.7 0 4.9-.1c1.2-.1 2.1-.3 2.8-.6.8-.3 1.5-.7 2.2-1.4.7-.7 1.1-1.4 1.4-2.2.3-.7.5-1.6.6-2.8.1-1.2.1-1.6.1-4.9s0-3.7-.1-4.9c-.1-1.2-.3-2.1-.6-2.8-.3-.8-.7-1.5-1.4-2.2-.7-.7-1.4-1.1-2.2-1.4-.7-.3-1.6-.5-2.8-.6C15.7 0 15.3 0 12 0zm0 5.8c-3.4 0-6.2 2.8-6.2 6.2s2.8 6.2 6.2 6.2 6.2-2.8 6.2-6.2-2.8-6.2-6.2-6.2zm0 10.2c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4zM18.4 4.2c-.8 0-1.4.6-1.4 1.4s.6 1.4 1.4 1.4 1.4-.6 1.4-1.4-.6-1.4-1.4-1.4z\"\/><\/svg><\/span>\n          <span class=\"platform\" title=\"TikTok\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M19.6 6.8c-1.5 0-2.8-.7-3.7-1.7-.7-.8-1.1-1.8-1.1-2.9V2h-3.3v13.4c0 1.5-1.2 2.7-2.7 2.7s-2.7-1.2-2.7-2.7 1.2-2.7 2.7-2.7c.3 0 .6 0 .9.1V9.4c-.3 0-.6-.1-.9-.1-3.3 0-6 2.7-6 6s2.7 6 6 6 6-2.7 6-6V9.6c1.3.9 2.9 1.5 4.7 1.5V7.8c0-.4 0-.7-.1-1z\"\/><\/svg><\/span>\n        <\/div>\n        <div class=\"dist-foot\">\n          <span class=\"dist-badge\">30 Tage Omnipr\u00e4senz<\/span>\n        <\/div>\n      <\/article>\n\n      <div class=\"conn conn-3\" aria-hidden=\"true\">\n        <svg viewBox=\"0 0 32 14\"><path d=\"M2 7 L26 7 M22 3 L26 7 L22 11\"\/><\/svg>\n        <span class=\"pulse\"><\/span>\n      <\/div>\n\n      <article class=\"stage stage-4\">\n        <div class=\"step-head\">\n          <span class=\"step-idx\">04<\/span>\n          <span class=\"step-label\">Dein Resultat<\/span>\n          <span class=\"step-divider\"><\/span>\n        <\/div>\n        <div class=\"result-grid\">\n          <div class=\"result-chip\">\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M3 17l6-6 4 4 8-8\"\/><path d=\"M14 7h7v7\"\/><\/svg>\n            <span>Mehr Leads<\/span>\n          <\/div>\n          <div class=\"result-chip\">\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M9 12l2 2 4-4\"\/><circle cx=\"12\" cy=\"12\" r=\"9\"\/><\/svg>\n            <span>Abschl\u00fcsse<\/span>\n          <\/div>\n          <div class=\"result-chip\">\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M18 7a8 8 0 100 10\"\/><path d=\"M3 11h11M3 15h11\"\/><\/svg>\n            <span>Mehr Umsatz<\/span>\n          <\/div>\n          <div class=\"result-chip\">\n            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"2\"\/><path d=\"M16.2 7.8a6 6 0 010 8.4M7.8 7.8a6 6 0 000 8.4\"\/><\/svg>\n            <span>Omnipr\u00e4senz<\/span>\n          <\/div>\n        <\/div>\n      <\/article>\n\n    <\/div>\n  <\/div>\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7fe7cde e-con-full e-flex e-con e-parent\" data-id=\"7fe7cde\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5b64ac8 elementor-widget elementor-widget-html\" data-id=\"5b64ac8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- \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\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  HIGH. B2B LEADS \u00b7 FORMULAR \u00b7 v3 mit Full Tracking\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\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  3 Steps \u00b7 Progress-Bar \u00b7 Auto-Advance bei Auswahl (kein Weiter-Button)\n  Webhook (CRM):       https:\/\/n8n.artificalia.com\/webhook\/hs-lead-capture\n  Tracking (DataLayer): GTM picks up form_step_1\/2\/3 + form_submit\n  Redirect:             \/80-20-danke\n\n  CONTAINER CSS (Elementor Container Custom CSS):\n    selector {\n      background: #f5f0e8;\n      position: relative;\n      overflow: hidden;\n      scroll-margin-top: 80px;\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\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<style>\n  #hs-form, #hs-form *,\n  #hs-form *::before, #hs-form *::after {\n    box-sizing: border-box;\n    margin: 0; padding: 0;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  #hs-form {\n    width: 100%;\n    position: relative;\n    font-family: 'DM Sans', system-ui, sans-serif !important;\n    color: #0a0a0a;\n    isolation: isolate;\n  }\n  \/* Soft warm glow *\/\n  #hs-form::before {\n    content: \"\";\n    position: absolute;\n    top: -10%;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 90%;\n    max-width: 1100px;\n    height: 70%;\n    background: radial-gradient(ellipse at center, rgba(168,18,31,0.06), transparent 70%);\n    filter: blur(80px);\n    pointer-events: none;\n    z-index: 0;\n  }\n  #hs-form .inner {\n    position: relative;\n    z-index: 2;\n    max-width: 720px;\n    margin: 0 auto;\n    padding: 96px 24px 96px;\n  }\n  \/* Header *\/\n  #hs-form .head {\n    text-align: center;\n    margin-bottom: 36px;\n  }\n  #hs-form .eyebrow {\n    display: inline-flex;\n    align-items: center;\n    gap: 10px;\n    height: 28px;\n    padding: 0 14px;\n    border: 1px solid rgba(168,18,31,0.22);\n    border-radius: 999px;\n    background: rgba(168,18,31,0.04);\n    margin-bottom: 22px;\n  }\n  #hs-form .eyebrow .pip {\n    width: 5px; height: 5px;\n    border-radius: 50%;\n    background: #a8121f;\n    box-shadow: 0 0 10px rgba(168,18,31,0.5);\n    animation: hsf-pulse 2.4s ease-in-out infinite;\n  }\n  @keyframes hsf-pulse {\n    0%, 100% { opacity: 1; transform: scale(1); }\n    50%      { opacity: 0.45; transform: scale(0.6); }\n  }\n  #hs-form .eyebrow span {\n    font-size: 10.5px !important;\n    font-weight: 600 !important;\n    letter-spacing: 0.2em !important;\n    text-transform: uppercase !important;\n    color: #a8121f !important;\n    line-height: 1 !important;\n  }\n  #hs-form h2 {\n    font-family: 'Bricolage Grotesque', sans-serif !important;\n    font-weight: 800 !important;\n    font-size: clamp(28px, 4vw, 44px) !important;\n    line-height: 1.06 !important;\n    letter-spacing: -0.035em !important;\n    color: #0a0a0a !important;\n    margin: 0 0 14px 0 !important;\n  }\n  #hs-form h2 .accent {\n    color: #a8121f !important;\n    font-style: italic;\n    font-weight: 700 !important;\n  }\n  #hs-form .subhead {\n    font-size: clamp(14.5px, 1.05vw, 16px) !important;\n    line-height: 1.5 !important;\n    color: rgba(0,0,0,0.6) !important;\n    max-width: 540px;\n    margin: 0 auto !important;\n  }\n  \/* Card *\/\n  #hs-form .card {\n    background: #ffffff;\n    border: 1px solid rgba(0,0,0,0.06);\n    border-radius: 24px;\n    padding: 28px 32px 32px;\n    box-shadow:\n      0 1px 2px rgba(0,0,0,0.04),\n      0 24px 60px -16px rgba(0,0,0,0.12);\n    position: relative;\n    overflow: hidden;\n  }\n  #hs-form .card::before {\n    content: \"\";\n    position: absolute;\n    top: 0; left: 0; right: 0;\n    height: 2px;\n    background: linear-gradient(90deg, transparent, rgba(168,18,31,0.6), transparent);\n  }\n  \/* Progress *\/\n  #hs-form .progress {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 28px;\n    gap: 12px;\n  }\n  #hs-form .progress-track {\n    flex: 1;\n    height: 5px;\n    background: rgba(0,0,0,0.05);\n    border-radius: 999px;\n    overflow: hidden;\n  }\n  #hs-form .progress-fill {\n    height: 100%;\n    background: linear-gradient(90deg, #a8121f, #c11929);\n    border-radius: 999px;\n    width: 33.3%;\n    transition: width .45s cubic-bezier(0.65, 0, 0.35, 1);\n    box-shadow: 0 0 12px rgba(168,18,31,0.3);\n  }\n  #hs-form .progress-text {\n    font-size: 11px !important;\n    font-weight: 700 !important;\n    letter-spacing: 0.12em !important;\n    text-transform: uppercase !important;\n    color: rgba(0,0,0,0.55) !important;\n    white-space: nowrap;\n    line-height: 1 !important;\n  }\n  #hs-form .progress-text .current { color: #a8121f !important; }\n  \/* Step container *\/\n  #hs-form .steps {\n    position: relative;\n    min-height: 320px;\n  }\n  #hs-form .step {\n    position: absolute;\n    inset: 0;\n    opacity: 0;\n    transform: translateX(20px);\n    pointer-events: none;\n    transition: opacity .35s ease, transform .35s ease;\n  }\n  #hs-form .step.active {\n    opacity: 1;\n    transform: translateX(0);\n    position: relative;\n    pointer-events: auto;\n  }\n  #hs-form .step.exit-left {\n    opacity: 0;\n    transform: translateX(-20px);\n  }\n  #hs-form .question {\n    font-family: 'Bricolage Grotesque', sans-serif !important;\n    font-weight: 800 !important;\n    font-size: clamp(20px, 2vw, 26px) !important;\n    line-height: 1.2 !important;\n    letter-spacing: -0.025em !important;\n    color: #0a0a0a !important;\n    margin: 0 0 6px 0 !important;\n  }\n  #hs-form .hint {\n    font-size: 13.5px !important;\n    color: rgba(0,0,0,0.55) !important;\n    margin: 0 0 24px 0 !important;\n    line-height: 1.4 !important;\n  }\n  \/* Option Cards *\/\n  #hs-form .options {\n    display: grid;\n    gap: 10px;\n  }\n  #hs-form .options.cols-2 { grid-template-columns: 1fr 1fr; }\n  #hs-form .opt {\n    display: block;\n    cursor: pointer;\n    position: relative;\n  }\n  #hs-form .opt input {\n    position: absolute;\n    opacity: 0;\n    pointer-events: none;\n  }\n  #hs-form .opt-card {\n    padding: 18px 20px;\n    background: rgba(0,0,0,0.02);\n    border: 1.5px solid rgba(0,0,0,0.08);\n    border-radius: 14px;\n    transition: all .2s ease;\n    display: flex;\n    align-items: center;\n    gap: 14px;\n    min-height: 64px;\n  }\n  #hs-form .opt-icon {\n    flex-shrink: 0;\n    width: 36px; height: 36px;\n    border-radius: 9px;\n    background: rgba(168,18,31,0.08);\n    border: 1px solid rgba(168,18,31,0.18);\n    color: #a8121f;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: all .2s ease;\n  }\n  #hs-form .opt-icon svg {\n    width: 18px; height: 18px;\n    stroke: currentColor; fill: none;\n    stroke-width: 2.2;\n    stroke-linecap: round; stroke-linejoin: round;\n  }\n  #hs-form .opt-text { flex: 1; min-width: 0; text-align: left; }\n  #hs-form .opt-title {\n    font-family: 'Bricolage Grotesque', sans-serif !important;\n    font-size: 15px !important;\n    font-weight: 700 !important;\n    color: #0a0a0a !important;\n    letter-spacing: -0.01em !important;\n    line-height: 1.2 !important;\n    margin-bottom: 2px;\n  }\n  #hs-form .opt-sub {\n    font-size: 12.5px !important;\n    color: rgba(0,0,0,0.55) !important;\n    font-weight: 500 !important;\n    line-height: 1.3 !important;\n  }\n  #hs-form .opt-check {\n    flex-shrink: 0;\n    width: 22px; height: 22px;\n    border-radius: 50%;\n    border: 1.5px solid rgba(0,0,0,0.18);\n    background: #ffffff;\n    transition: all .2s ease;\n    position: relative;\n  }\n  #hs-form .opt-check::after {\n    content: \"\";\n    position: absolute;\n    top: 4px; left: 7px;\n    width: 5px; height: 9px;\n    border: solid #ffffff;\n    border-width: 0 2px 2px 0;\n    transform: rotate(45deg) scale(0);\n    transition: transform .15s ease;\n  }\n  #hs-form .opt:hover .opt-card {\n    border-color: rgba(168,18,31,0.32);\n    background: rgba(168,18,31,0.02);\n    transform: translateY(-1px);\n  }\n  #hs-form .opt input:checked + .opt-card {\n    border-color: #a8121f;\n    background: rgba(168,18,31,0.04);\n    box-shadow: 0 0 0 3px rgba(168,18,31,0.08);\n  }\n  #hs-form .opt input:checked + .opt-card .opt-icon {\n    background: #a8121f;\n    color: #ffffff;\n    border-color: #a8121f;\n  }\n  #hs-form .opt input:checked + .opt-card .opt-check {\n    background: #a8121f;\n    border-color: #a8121f;\n  }\n  #hs-form .opt input:checked + .opt-card .opt-check::after {\n    transform: rotate(45deg) scale(1);\n  }\n  \/* Disqualify-Message *\/\n  #hs-form .disqualify {\n    margin-top: 18px;\n    padding: 16px 18px;\n    background: rgba(168,18,31,0.05);\n    border: 1px solid rgba(168,18,31,0.2);\n    border-radius: 12px;\n    display: none;\n    text-align: left;\n  }\n  #hs-form .disqualify.is-visible { display: block; }\n  #hs-form .disqualify-title {\n    font-family: 'Bricolage Grotesque', sans-serif !important;\n    font-size: 15px !important;\n    font-weight: 700 !important;\n    color: #a8121f !important;\n    margin: 0 0 4px 0 !important;\n    line-height: 1.3 !important;\n  }\n  #hs-form .disqualify-text {\n    font-size: 13px !important;\n    color: rgba(0,0,0,0.65) !important;\n    line-height: 1.5 !important;\n    margin: 0 !important;\n  }\n  \/* Step 3 Fields *\/\n  #hs-form .fields {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n    margin-bottom: 22px;\n  }\n  #hs-form .field {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n  }\n  #hs-form .field label {\n    font-size: 11.5px !important;\n    font-weight: 700 !important;\n    letter-spacing: 0.04em !important;\n    color: rgba(0,0,0,0.7) !important;\n    text-transform: none !important;\n  }\n  #hs-form .field label .req {\n    color: #a8121f !important;\n    margin-left: 2px;\n  }\n  #hs-form .field input {\n    width: 100%;\n    padding: 14px 16px;\n    background: rgba(0,0,0,0.03);\n    border: 1.5px solid rgba(0,0,0,0.08);\n    border-radius: 10px;\n    font-family: 'DM Sans', sans-serif !important;\n    font-size: 15px !important;\n    font-weight: 500 !important;\n    color: #0a0a0a !important;\n    transition: all .2s ease;\n  }\n  #hs-form .field input::placeholder {\n    color: rgba(0,0,0,0.3) !important;\n    font-weight: 400 !important;\n  }\n  #hs-form .field input:focus {\n    outline: none;\n    border-color: #a8121f;\n    background: #ffffff;\n    box-shadow: 0 0 0 3px rgba(168,18,31,0.08);\n  }\n  #hs-form .field.error input {\n    border-color: #a8121f;\n    background: rgba(168,18,31,0.03);\n  }\n  #hs-form .field-err {\n    font-size: 11.5px !important;\n    color: #a8121f !important;\n    font-weight: 600 !important;\n    line-height: 1.3 !important;\n    display: none;\n  }\n  #hs-form .field.error .field-err { display: block; }\n  \/* Consent *\/\n  #hs-form .consent {\n    margin-bottom: 20px;\n  }\n  #hs-form .check {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    cursor: pointer;\n    position: relative;\n  }\n  #hs-form .check input {\n    position: absolute;\n    opacity: 0;\n    pointer-events: none;\n  }\n  #hs-form .check-box {\n    width: 20px; height: 20px;\n    border: 1.5px solid rgba(0,0,0,0.22);\n    border-radius: 5px;\n    background: #ffffff;\n    flex-shrink: 0;\n    position: relative;\n    transition: all .2s ease;\n    margin-top: 1px;\n  }\n  #hs-form .check-box::after {\n    content: \"\";\n    position: absolute;\n    top: 2px; left: 6px;\n    width: 5px; height: 10px;\n    border: solid #ffffff;\n    border-width: 0 2px 2px 0;\n    transform: rotate(45deg) scale(0);\n    transition: transform .15s ease;\n  }\n  #hs-form .check input:checked ~ .check-box {\n    background: #a8121f;\n    border-color: #a8121f;\n  }\n  #hs-form .check input:checked ~ .check-box::after {\n    transform: rotate(45deg) scale(1);\n  }\n  #hs-form .check-text {\n    font-size: 13px !important;\n    line-height: 1.5 !important;\n    color: rgba(0,0,0,0.7) !important;\n    font-weight: 400 !important;\n  }\n  #hs-form .check-text a {\n    color: #0a0a0a !important;\n    text-decoration: underline !important;\n    text-underline-offset: 2px;\n  }\n  #hs-form .check.error .check-box {\n    border-color: #a8121f;\n    background: rgba(168,18,31,0.03);\n  }\n  \/* Submit *\/\n  #hs-form .submit {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 12px;\n    width: 100%;\n    height: 60px;\n    padding: 0 28px;\n    background: linear-gradient(180deg, #a8121f, #8e0d18);\n    color: #ffffff !important;\n    font-family: 'DM Sans', sans-serif !important;\n    font-size: 15.5px !important;\n    font-weight: 700 !important;\n    letter-spacing: -0.005em !important;\n    border-radius: 12px;\n    border: none;\n    cursor: pointer;\n    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;\n    box-shadow:\n      0 12px 32px rgba(168,18,31,0.42),\n      inset 0 1px 0 rgba(255,255,255,0.15);\n    line-height: 1.1 !important;\n    position: relative;\n    overflow: hidden;\n  }\n  #hs-form .submit::after {\n    content: \"\";\n    position: absolute; inset: 0;\n    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.22) 50%, transparent 70%);\n    transform: translateX(-110%);\n    transition: transform .55s ease;\n    pointer-events: none;\n  }\n  #hs-form .submit:hover:not(:disabled) {\n    transform: translateY(-2px);\n    background: linear-gradient(180deg, #c11929, #a8121f);\n    box-shadow:\n      0 18px 44px rgba(168,18,31,0.5),\n      inset 0 1px 0 rgba(255,255,255,0.2);\n  }\n  #hs-form .submit:hover:not(:disabled)::after { transform: translateX(110%); }\n  #hs-form .submit:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n  #hs-form .submit svg {\n    width: 16px; height: 16px;\n    transition: transform .2s ease;\n    stroke: currentColor; fill: none;\n    stroke-width: 2.4;\n    stroke-linecap: round; stroke-linejoin: round;\n  }\n  #hs-form .submit:hover:not(:disabled) svg { transform: translateX(3px); }\n  #hs-form .submit.is-loading .submit-text,\n  #hs-form .submit.is-loading svg { visibility: hidden; }\n  #hs-form .submit .spinner {\n    display: none;\n    position: absolute;\n    width: 22px; height: 22px;\n    border: 2.5px solid rgba(255,255,255,0.25);\n    border-top-color: #ffffff;\n    border-radius: 50%;\n    animation: hsf-spin .8s linear infinite;\n  }\n  #hs-form .submit.is-loading .spinner { display: block; }\n  @keyframes hsf-spin { to { transform: rotate(360deg); } }\n  #hs-form .form-error {\n    display: none;\n    margin-bottom: 14px;\n    padding: 12px 14px;\n    background: rgba(168,18,31,0.06);\n    border: 1px solid rgba(168,18,31,0.22);\n    border-radius: 10px;\n    color: #a8121f !important;\n    font-size: 13px !important;\n    font-weight: 500 !important;\n    text-align: center;\n  }\n  #hs-form .form-error.is-visible { display: block; }\n  \/* Trust *\/\n  #hs-form .trust {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n    align-items: center;\n    gap: 8px 22px;\n    margin-top: 24px;\n    font-size: 12px !important;\n    color: rgba(0,0,0,0.5) !important;\n  }\n  #hs-form .trust span {\n    display: inline-flex;\n    align-items: center;\n    gap: 7px;\n    font-weight: 500 !important;\n    white-space: nowrap;\n    color: rgba(0,0,0,0.55) !important;\n  }\n  #hs-form .trust span:not(:first-child)::before {\n    content: \"\";\n    width: 3px; height: 3px;\n    border-radius: 50%;\n    background: rgba(0,0,0,0.3);\n    flex-shrink: 0;\n  }\n  @media (max-width: 640px) {\n    #hs-form .inner { padding: 64px 16px 72px; }\n    #hs-form .head { margin-bottom: 28px; }\n    #hs-form h2 { font-size: 26px !important; }\n    #hs-form .subhead { font-size: 14px !important; }\n    #hs-form .card { padding: 22px 20px 26px; border-radius: 18px; }\n    #hs-form .progress { margin-bottom: 22px; }\n    #hs-form .options.cols-2 { grid-template-columns: 1fr; }\n    #hs-form .opt-card { padding: 16px 16px; min-height: 56px; gap: 12px; }\n    #hs-form .opt-icon { width: 32px; height: 32px; }\n    #hs-form .opt-icon svg { width: 16px; height: 16px; }\n    #hs-form .opt-title { font-size: 14.5px !important; }\n    #hs-form .opt-sub { font-size: 12px !important; }\n    #hs-form .question { font-size: 19px !important; }\n    #hs-form .hint { font-size: 13px !important; margin-bottom: 20px !important; }\n    #hs-form .submit { height: 54px; font-size: 14.5px !important; }\n  }\n<\/style>\n<section id=\"hs-form\" aria-label=\"Formular\">\n  <div class=\"inner\">\n    <div class=\"head\">\n      <div class=\"eyebrow\">\n        <span class=\"pip\" aria-hidden=\"true\"><\/span>\n        <span>Dein erster Schritt<\/span>\n      <\/div>\n      <h2>Lass uns deine <span class=\"accent\">individuelle L\u00f6sung<\/span> finden.<\/h2>\n      <p class=\"subhead\">3 Fragen. 60 Sekunden. Philipp meldet sich pers\u00f6nlich innerhalb von 24 Stunden.<\/p>\n    <\/div>\n    <div class=\"card\">\n      <div class=\"progress\">\n        <div class=\"progress-track\">\n          <div class=\"progress-fill\" id=\"hsf-fill\"><\/div>\n        <\/div>\n        <span class=\"progress-text\">Schritt <span class=\"current\" id=\"hsf-current\">1<\/span> \/ 3<\/span>\n      <\/div>\n      <form id=\"hsf-form\" novalidate>\n        <div class=\"steps\" id=\"hsf-steps\">\n          <!-- \u2500\u2500\u2500 STEP 1 \u00b7 Qualifier \u2500\u2500\u2500 -->\n          <div class=\"step active\" data-step=\"1\">\n            <h3 class=\"question\">Bist du selbstst\u00e4ndig?<\/h3>\n            <p class=\"hint\">Unternehmer \u00b7 Gewerbetreibender \u00b7 Freiberufler \u00b7 Founder.<\/p>\n            <div class=\"options cols-2\" role=\"radiogroup\">\n              <label class=\"opt\">\n                <input type=\"radio\" name=\"selbststaendig\" value=\"ja\" \/>\n                <div class=\"opt-card\">\n                  <div class=\"opt-icon\">\n                    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M9 12l2 2 4-4\"\/><circle cx=\"12\" cy=\"12\" r=\"9\"\/><\/svg>\n                  <\/div>\n                  <div class=\"opt-text\">\n                    <div class=\"opt-title\">Ja<\/div>\n                    <div class=\"opt-sub\">Ich f\u00fchre ein Unternehmen<\/div>\n                  <\/div>\n                  <span class=\"opt-check\"><\/span>\n                <\/div>\n              <\/label>\n              <label class=\"opt\">\n                <input type=\"radio\" name=\"selbststaendig\" value=\"nein\" \/>\n                <div class=\"opt-card\">\n                  <div class=\"opt-icon\">\n                    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"9\"\/><path d=\"M8 12h8\"\/><\/svg>\n                  <\/div>\n                  <div class=\"opt-text\">\n                    <div class=\"opt-title\">Nein<\/div>\n                    <div class=\"opt-sub\">Aktuell angestellt<\/div>\n                  <\/div>\n                  <span class=\"opt-check\"><\/span>\n                <\/div>\n              <\/label>\n            <\/div>\n            <div class=\"disqualify\" id=\"hsf-disqualify\">\n              <p class=\"disqualify-title\">Schade \u2014 aktuell arbeiten wir nur mit Selbstst\u00e4ndigen.<\/p>\n              <p class=\"disqualify-text\">Das 80-20 System ist auf B2B-Founder, Unternehmer und Personal Brands ausgelegt. Wenn sich das \u00e4ndert, schreib uns gerne.<\/p>\n            <\/div>\n          <\/div>\n          <!-- \u2500\u2500\u2500 STEP 2 \u00b7 Engagement \u2500\u2500\u2500 -->\n          <div class=\"step\" data-step=\"2\">\n            <h3 class=\"question\">Was ist dein wichtigstes Ziel?<\/h3>\n            <p class=\"hint\">Hilft uns, das Setup f\u00fcr dich richtig zuzuschneiden.<\/p>\n            <div class=\"options\" role=\"radiogroup\">\n              <label class=\"opt\">\n                <input type=\"radio\" name=\"ziel\" value=\"leads\" \/>\n                <div class=\"opt-card\">\n                  <div class=\"opt-icon\">\n                    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M3 17l6-6 4 4 8-8\"\/><path d=\"M14 7h7v7\"\/><\/svg>\n                  <\/div>\n                  <div class=\"opt-text\">\n                    <div class=\"opt-title\">Mehr qualifizierte Leads<\/div>\n                    <div class=\"opt-sub\">Inbound-Anfragen, die schon vorgew\u00e4rmt sind<\/div>\n                  <\/div>\n                  <span class=\"opt-check\"><\/span>\n                <\/div>\n              <\/label>\n              <label class=\"opt\">\n                <input type=\"radio\" name=\"ziel\" value=\"autoritaet\" \/>\n                <div class=\"opt-card\">\n                  <div class=\"opt-icon\">\n                    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 2l3 7h7l-5.5 4 2 8L12 17l-6.5 4 2-8L2 9h7z\"\/><\/svg>\n                  <\/div>\n                  <div class=\"opt-text\">\n                    <div class=\"opt-title\">Kategorie-Autorit\u00e4t<\/div>\n                    <div class=\"opt-sub\">Als Experte in meinem Markt wahrgenommen werden<\/div>\n                  <\/div>\n                  <span class=\"opt-check\"><\/span>\n                <\/div>\n              <\/label>\n              <label class=\"opt\">\n                <input type=\"radio\" name=\"ziel\" value=\"umsatz\" \/>\n                <div class=\"opt-card\">\n                  <div class=\"opt-icon\">\n                    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M18 7a8 8 0 100 10\"\/><path d=\"M3 11h11M3 15h11\"\/><\/svg>\n                  <\/div>\n                  <div class=\"opt-text\">\n                    <div class=\"opt-title\">Mehr Umsatz<\/div>\n                    <div class=\"opt-sub\">Bestehende Pipeline mit Content beschleunigen<\/div>\n                  <\/div>\n                  <span class=\"opt-check\"><\/span>\n                <\/div>\n              <\/label>\n              <label class=\"opt\">\n                <input type=\"radio\" name=\"ziel\" value=\"recruiting\" \/>\n                <div class=\"opt-card\">\n                  <div class=\"opt-icon\">\n                    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><circle cx=\"9\" cy=\"8\" r=\"4\"\/><path d=\"M3 21v-1a6 6 0 0112 0v1\"\/><path d=\"M16 11h6M19 8v6\"\/><\/svg>\n                  <\/div>\n                  <div class=\"opt-text\">\n                    <div class=\"opt-title\">Recruiting & Employer Branding<\/div>\n                    <div class=\"opt-sub\">Top-Talente anziehen \u00fcber sichtbare Kultur<\/div>\n                  <\/div>\n                  <span class=\"opt-check\"><\/span>\n                <\/div>\n              <\/label>\n            <\/div>\n          <\/div>\n          <!-- \u2500\u2500\u2500 STEP 3 \u00b7 Kontakt \u2500\u2500\u2500 -->\n          <div class=\"step\" data-step=\"3\">\n            <h3 class=\"question\">Fast geschafft. Wo erreichen wir dich?<\/h3>\n            <p class=\"hint\">Antwort innerhalb von 24 Stunden \u2014 kein Verkaufsdruck.<\/p>\n            <div class=\"fields\">\n              <div class=\"field\" data-field=\"first_name\">\n                <label for=\"hsf-first\">Vorname <span class=\"req\">*<\/span><\/label>\n                <input type=\"text\" id=\"hsf-first\" name=\"first_name\" autocomplete=\"given-name\" placeholder=\"Max\" \/>\n                <span class=\"field-err\">Bitte gib deinen Vornamen ein.<\/span>\n              <\/div>\n              <div class=\"field\" data-field=\"email\">\n                <label for=\"hsf-email\">E-Mail-Adresse <span class=\"req\">*<\/span><\/label>\n                <input type=\"email\" id=\"hsf-email\" name=\"email\" autocomplete=\"email\" placeholder=\"max@unternehmen.de\" \/>\n                <span class=\"field-err\">Bitte gib eine g\u00fcltige E-Mail-Adresse ein.<\/span>\n              <\/div>\n              <div class=\"field\" data-field=\"phone\">\n                <label for=\"hsf-phone\">Handynummer <span class=\"req\">*<\/span><\/label>\n                <input type=\"tel\" id=\"hsf-phone\" name=\"phone\" autocomplete=\"tel\" placeholder=\"+49 ...\" \/>\n                <span class=\"field-err\">Bitte gib eine g\u00fcltige Handynummer ein.<\/span>\n              <\/div>\n            <\/div>\n            <div class=\"consent\">\n              <label class=\"check\" data-field=\"privacy\">\n                <input type=\"checkbox\" name=\"privacy\" \/>\n                <span class=\"check-box\" aria-hidden=\"true\"><\/span>\n                <span class=\"check-text\">\n                  Ich akzeptiere die <a href=\"\/datenschutz\" target=\"_blank\" rel=\"noopener\">Datenschutzerkl\u00e4rung<\/a> und bin damit einverstanden, dass Philipp sich innerhalb von 24h telefonisch oder per WhatsApp meldet. <span class=\"req\">*<\/span>\n                <\/span>\n              <\/label>\n            <\/div>\n            <div class=\"form-error\" id=\"hsf-error\">\n              Da ist etwas schiefgelaufen. Bitte versuch es nochmal oder schreib uns direkt.\n            <\/div>\n            <button type=\"submit\" class=\"submit\" id=\"hsf-submit\">\n              <span class=\"submit-text\">Anfrage senden<\/span>\n              <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path d=\"M5 12h14M13 6l6 6-6 6\"\/>\n              <\/svg>\n              <span class=\"spinner\" aria-hidden=\"true\"><\/span>\n            <\/button>\n          <\/div>\n        <\/div>\n      <\/form>\n    <\/div>\n    <div class=\"trust\">\n      <span>Antwort in 24h<\/span>\n      <span>Kein Verkaufsdruck<\/span>\n      <span>DSGVO-konform<\/span>\n    <\/div>\n  <\/div>\n<\/section>\n<script>\n(function() {\n  if (window.__hsFormReady) return;\n  window.__hsFormReady = true;\n\n  \/\/ \u2500\u2500 KONFIGURATION \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\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  var WEBHOOK  = 'https:\/\/n8n.artificalia.com\/webhook\/lead-website';\n  var REDIRECT = '\/80-20-danke';\n  var FORM_ID  = '80-20-leads';\n  var LP_SLUG  = '80-20';\n  \/\/ \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\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\n  var scope        = document.getElementById('hs-form');\n  if (!scope) return;\n  var form         = document.getElementById('hsf-form');\n  var stepsEl      = document.getElementById('hsf-steps');\n  var fillEl       = document.getElementById('hsf-fill');\n  var currentEl    = document.getElementById('hsf-current');\n  var disqualifyEl = document.getElementById('hsf-disqualify');\n  var submitBtn    = document.getElementById('hsf-submit');\n  var errBox       = document.getElementById('hsf-error');\n\n  var state = {\n    step: 1,\n    total: 3,\n    firedSteps: {},\n    data: {\n      selbststaendig: null,\n      ziel: null,\n      first_name: '',\n      email: '',\n      phone: '',\n      privacy: false\n    }\n  };\n\n  \/\/ \u2500\u2500 TRACKING HELPERS \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\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  function newEventId() {\n    return 'evt_' + Date.now() + '_' + Math.random().toString(36).slice(2, 11);\n  }\n\n  function pushEvent(eventName, extraData) {\n    var eid = newEventId();\n    window.eventId = eid; \/\/ Browser-Tags lesen window.eventId f\u00fcr Dedup\n    window.dataLayer = window.dataLayer || [];\n    var basePayload = {\n      event: eventName,\n      event_id: eid,\n      event_source_url: location.href,\n      form_id: FORM_ID,\n      lp_slug: LP_SLUG,\n      currency: 'EUR'\n    };\n    if (extraData) {\n      for (var k in extraData) {\n        if (Object.prototype.hasOwnProperty.call(extraData, k)) {\n          basePayload[k] = extraData[k];\n        }\n      }\n    }\n    window.dataLayer.push(basePayload);\n    return eid;\n  }\n\n  function fireStep(n, value) {\n    if (state.firedSteps[n]) return;\n    state.firedSteps[n] = true;\n    pushEvent('form_step_' + n, { value: value });\n  }\n\n  \/\/ \u2500\u2500 STEP 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\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  function showStep(n) {\n    var steps = stepsEl.querySelectorAll('.step');\n    steps.forEach(function(el) {\n      var s = parseInt(el.getAttribute('data-step'), 10);\n      el.classList.remove('active', 'exit-left');\n      if (s === n) el.classList.add('active');\n      else if (s < n) el.classList.add('exit-left');\n    });\n    state.step = n;\n    fillEl.style.width = (n \/ state.total * 100) + '%';\n    currentEl.textContent = n;\n\n    \/\/ Tracking pro Step (1\u00d7 pro Pageview)\n    if (n === 2) fireStep(2, 10);\n    if (n === 3) fireStep(3, 15);\n  }\n\n  \/\/ \u2500\u2500 STEP 1 \u00b7 Qualifier (Auto-Advance + Tracking) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  scope.querySelectorAll('input[name=\"selbststaendig\"]').forEach(function(input) {\n    input.addEventListener('change', function() {\n      state.data.selbststaendig = input.value;\n\n      \/\/ form_step_1 feuert bei JEDER ersten Auswahl auf Step 1 (auch \"Nein\")\n      fireStep(1, 5);\n\n      if (input.value === 'nein') {\n        disqualifyEl.classList.add('is-visible');\n        return;\n      }\n      disqualifyEl.classList.remove('is-visible');\n      setTimeout(function() { showStep(2); }, 350);\n    });\n  });\n\n  \/\/ \u2500\u2500 STEP 2 \u00b7 Engagement (Auto-Advance) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  scope.querySelectorAll('input[name=\"ziel\"]').forEach(function(input) {\n    input.addEventListener('change', function() {\n      state.data.ziel = input.value;\n      setTimeout(function() { showStep(3); }, 350);\n    });\n  });\n\n  \/\/ \u2500\u2500 STEP 3 \u00b7 Validation \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\u2500\u2500\u2500\u2500\u2500\u2500\n  function isEmail(v) {\n    return \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]{2,}$\/.test((v || '').trim());\n  }\n  function isPhone(v) {\n    var digits = (v || '').replace(\/[^\\d]\/g, '');\n    return digits.length >= 6;\n  }\n  function clearErr(f) {\n    var el = scope.querySelector('[data-field=\"' + f + '\"]');\n    if (el) el.classList.remove('error');\n  }\n  function setErr(f) {\n    var el = scope.querySelector('[data-field=\"' + f + '\"]');\n    if (el) el.classList.add('error');\n  }\n  ['first_name', 'email', 'phone'].forEach(function(f) {\n    var input = scope.querySelector('input[name=\"' + f + '\"]');\n    if (input) input.addEventListener('input', function() { clearErr(f); });\n  });\n  scope.querySelector('input[name=\"privacy\"]').addEventListener('change', function() {\n    clearErr('privacy');\n  });\n\n  \/\/ \u2500\u2500 SUBMIT \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\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n  form.addEventListener('submit', function(e) {\n    e.preventDefault();\n    errBox.classList.remove('is-visible');\n\n    if (state.data.selbststaendig !== 'ja') {\n      showStep(1);\n      return;\n    }\n\n    var data = {\n      first_name: scope.querySelector('input[name=\"first_name\"]').value.trim(),\n      email:      scope.querySelector('input[name=\"email\"]').value.trim(),\n      phone:      scope.querySelector('input[name=\"phone\"]').value.trim(),\n      privacy:    scope.querySelector('input[name=\"privacy\"]').checked\n    };\n\n    var hasErr = false;\n    if (data.first_name.length < 2) { setErr('first_name'); hasErr = true; }\n    if (!isEmail(data.email))       { setErr('email');      hasErr = true; }\n    if (!isPhone(data.phone))       { setErr('phone');      hasErr = true; }\n    if (!data.privacy)              { setErr('privacy');    hasErr = true; }\n    if (hasErr) return;\n\n    submitBtn.classList.add('is-loading');\n    submitBtn.disabled = true;\n\n    \/\/ \u2500\u2500 form_submit Event mit User-Daten (f\u00fcr CAPI-Hashing) \u2500\u2500\n    var submitEventId = pushEvent('form_submit', {\n      value: 50,\n      user: {\n        email:      data.email,\n        phone:      data.phone,\n        first_name: data.first_name,\n        last_name:  ''\n      }\n    });\n\n    \/\/ \u2500\u2500 User-Daten f\u00fcr Danke-Seite persistieren \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n    try {\n      sessionStorage.setItem('hs_lead_email',     data.email);\n      sessionStorage.setItem('hs_lead_phone',     data.phone);\n      sessionStorage.setItem('hs_lead_name',      data.first_name);\n      sessionStorage.setItem('hs_lead_form_id',   FORM_ID);\n      sessionStorage.setItem('hs_lead_event_id', submitEventId);\n    } catch (e) { \/* private mode *\/ }\n\n    \/\/ \u2500\u2500 CRM-Webhook (parallel, fire-and-forget) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n    var payload = {\n      first_name:     data.first_name,\n      email:          data.email,\n      phone:          data.phone,\n      selbststaendig: state.data.selbststaendig,\n      ziel:           state.data.ziel,\n      privacy:        data.privacy,\n      source:         '80-20-lp',\n      event_id:       submitEventId,\n      form_id:        FORM_ID,\n      lp_slug:        LP_SLUG,\n      timestamp:      new Date().toISOString(),\n      page_url:       location.href,\n      user_agent:     navigator.userAgent\n    };\n    try {\n      fetch(WEBHOOK, {\n        method: 'POST',\n        headers: { 'Content-Type': 'application\/json' },\n        body: JSON.stringify(payload),\n        mode: 'no-cors',\n        keepalive: true\n      });\n    } catch (e) {\n      console.warn('[hsf]', e);\n    }\n\n    \/\/ \u2500\u2500 Redirect (gibt Pixels Zeit zum Feuern) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n    setTimeout(function() {\n      window.location.href = REDIRECT;\n    }, 700);\n  });\n})();\n<\/script>\t\t\t\t<\/div>\n\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 F\u00fcr CEOs, Founder &amp; Personal Brands Das 80-20 Systemf\u00fcr mehr Sichtbarkeit und Umsatz Ein Drehtag in den high.studios K\u00f6ln = Content auf allen relevanten Plattformen. Ohne Mitarbeiter, Fixkosten oder [&hellip;]<\/p>\n","protected":false},"author":15,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","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-8735","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>80\/20 - 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\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"80\/20 - Videoproduktion K\u00f6ln - High. Group\" \/>\n<meta property=\"og:description\" content=\"high.studios F\u00fcr CEOs, Founder &amp; Personal Brands Das 80-20 Systemf\u00fcr mehr Sichtbarkeit und Umsatz Ein Drehtag in den high.studios K\u00f6ln = Content auf allen relevanten Plattformen. Ohne Mitarbeiter, Fixkosten oder [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/high-group.de\/en\/80-20\/\" \/>\n<meta property=\"og:site_name\" content=\"Videoproduktion K\u00f6ln - High. Group\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-28T13:18:18+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\\\/\",\"url\":\"https:\\\/\\\/high-group.de\\\/80-20\\\/\",\"name\":\"80\\\/20 - Videoproduktion K\u00f6ln - High. Group\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/high-group.de\\\/#website\"},\"datePublished\":\"2026-04-26T11:53:35+00:00\",\"dateModified\":\"2026-04-28T13:18:18+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/high-group.de\\\/80-20\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/high-group.de\\\/80-20\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/high-group.de\\\/80-20\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Startseite\",\"item\":\"https:\\\/\\\/high-group.de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"80\\\/20\"}]},{\"@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 - 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\/","og_locale":"en_US","og_type":"article","og_title":"80\/20 - Videoproduktion K\u00f6ln - High. Group","og_description":"high.studios F\u00fcr CEOs, Founder &amp; Personal Brands Das 80-20 Systemf\u00fcr mehr Sichtbarkeit und Umsatz Ein Drehtag in den high.studios K\u00f6ln = Content auf allen relevanten Plattformen. Ohne Mitarbeiter, Fixkosten oder [&hellip;]","og_url":"https:\/\/high-group.de\/en\/80-20\/","og_site_name":"Videoproduktion K\u00f6ln - High. Group","article_modified_time":"2026-04-28T13:18:18+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\/","url":"https:\/\/high-group.de\/80-20\/","name":"80\/20 - Videoproduktion K\u00f6ln - High. Group","isPartOf":{"@id":"https:\/\/high-group.de\/#website"},"datePublished":"2026-04-26T11:53:35+00:00","dateModified":"2026-04-28T13:18:18+00:00","breadcrumb":{"@id":"https:\/\/high-group.de\/80-20\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/high-group.de\/80-20\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/high-group.de\/80-20\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Startseite","item":"https:\/\/high-group.de\/"},{"@type":"ListItem","position":2,"name":"80\/20"}]},{"@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\/8735","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=8735"}],"version-history":[{"count":56,"href":"https:\/\/high-group.de\/en\/wp-json\/wp\/v2\/pages\/8735\/revisions"}],"predecessor-version":[{"id":8833,"href":"https:\/\/high-group.de\/en\/wp-json\/wp\/v2\/pages\/8735\/revisions\/8833"}],"wp:attachment":[{"href":"https:\/\/high-group.de\/en\/wp-json\/wp\/v2\/media?parent=8735"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}