(function () { var root = document.getElementById("gx-produktfinder"); if (!root) { return; } if (root.getAttribute("data-gx-ready") === "1") { return; } root.setAttribute("data-gx-ready", "1"); /* ========================================= GRUNDFUNKTIONEN ========================================= */ function createElement(tag, css, text) { var element = document.createElement(tag); if (css) { element.style.cssText = css; } if (typeof text !== "undefined" && text !== null) { element.textContent = text; } return element; } function append(parent, child) { if (parent && child) { parent.appendChild(child); } return child; } function clear(element) { while (element.firstChild) { element.removeChild(element.firstChild); } } function track(eventName, data) { window.dataLayer = window.dataLayer || []; var eventData = data || {}; eventData.event = eventName; window.dataLayer.push(eventData); } /* ========================================= PRODUKTDATEN ========================================= */ var products = [ { id: "eflow", name: "Mobilemaster eFlow3.16", badge: "Kompakt & leicht", url: "/e-klapprad/eflow3-16-mobilemaster-e-faltrad-16-zoll-mit-patentierter-falttechnik-nur-15-kg_181601016_9917/", description: "Sehr kompaktes 16-Zoll E-Faltrad für Pendeln, kurze Wege und Reisen.", facts: [ "ca. 15 kg inklusive Akku", "ca. 40–50 km Reichweite", "sehr kompaktes Faltmaß", "kein klassisches Schalten notwendig" ], bosch: false, midMotor: false, speed45: false, scores: { usage_commute: 45, usage_camper: 25, usage_everyday: 30, carry_often: 45, carry_sometimes: 30, range_short: 45, motor_flexible: 20, shift_simple: 45, shift_flexible: 20, priority_light: 45, priority_compact: 50, priority_value: 25 } }, { id: "light", name: "Mobilemaster LIGHT V16 / V18", badge: "Leicht & vielseitig", url: "/e-klapprad/light-ab-15-kg/", description: "Leichte E-Falträder für Wohnmobil, Auto, Bahn, Alltag und Urlaub.", facts: [ "V16 ca. 16 kg + 2,4 kg Akku", "V18 ca. 18 kg + 2,4 kg Akku", "ca. 80 km Reichweite", "Shimano Nexus 3-Gang" ], bosch: false, midMotor: false, speed45: false, scores: { usage_commute: 32, usage_camper: 48, usage_everyday: 35, carry_often: 48, carry_sometimes: 38, range_short: 25, range_medium: 40, motor_flexible: 20, shift_classic: 25, shift_flexible: 20, priority_light: 50, priority_compact: 40, priority_value: 22 } }, { id: "lightbosch", name: "Mobilemaster LIGHT E8 SX55", badge: "Leicht + Bosch", url: "/e8-light-sx55_1900000833_9516/", description: "Für Kunden, die geringeres Gewicht mit einem hochwertigen Bosch Mittelmotor kombinieren möchten.", facts: [ "ca. 19 kg + 2,7 kg Akku", "ca. 140 km Reichweite", "Shimano Nexus 8-Gang", "optional Gates CDX Riemen" ], bosch: true, midMotor: true, speed45: false, scores: { usage_commute: 28, usage_camper: 45, usage_everyday: 42, usage_longtour: 28, usage_hills: 24, carry_often: 18, carry_sometimes: 35, carry_no: 22, range_medium: 25, range_long: 45, motor_bosch: 50, motor_mid: 38, motor_flexible: 15, shift_classic: 35, shift_flexible: 20, priority_light: 34, priority_compact: 25, priority_range: 32, priority_premium: 28, priority_maintenance: 28 } }, { id: "touring", name: "Mobilemaster Touring 7G", badge: "Preis-Leistung", url: "/e-klapprad/touring-fuer-mittelstrecke/", description: "Bewährter Allrounder für Alltag und regelmäßige Touren.", facts: [ "ca. 21 kg + 3,9 kg Akku", "562 Wh Samsung Akku", "ca. 100 km Reichweite", "Shimano 7-Gang Kettenschaltung" ], bosch: false, midMotor: false, speed45: false, scores: { usage_commute: 22, usage_camper: 15, usage_everyday: 45, usage_longtour: 32, carry_sometimes: 15, carry_no: 38, range_medium: 48, range_long: 20, motor_flexible: 25, shift_classic: 45, shift_flexible: 20, priority_value: 50, priority_range: 22 } }, { id: "touringplus", name: "Touring Plus / Voyager 9G", badge: "Touren-Allrounder", url: "/e-klapprad/touring-fuer-langstrecke-ueberland/", description: "Touring-Plattform mit Shimano Sora 9-Gang für längere Strecken.", facts: [ "ca. 21 kg + 3,9 kg Akku", "562 Wh Samsung Akku", "ca. 100 km Reichweite", "Shimano Sora 9-Gang" ], bosch: false, midMotor: false, speed45: false, scores: { usage_commute: 18, usage_everyday: 38, usage_longtour: 45, carry_sometimes: 12, carry_no: 42, range_medium: 48, range_long: 24, motor_flexible: 25, shift_classic: 48, shift_flexible: 20, priority_value: 42, priority_range: 26 } }, { id: "offroadgt", name: "Mobilemaster Offroad GT Bosch", badge: "Bosch Allrounder", url: "/e-klapprad/offroad-gt-bosch/", description: "Hochwertige Bosch E-Falträder für Alltag, Touren, Wohnmobil und anspruchsvollere Strecken.", facts: [ "Bosch Active Line Plus", "Bosch Performance Line", "Bosch Performance Line CX", "teilweise Bosch Smart System" ], bosch: true, midMotor: true, speed45: false, scores: { usage_commute: 25, usage_camper: 26, usage_everyday: 45, usage_longtour: 45, usage_hills: 42, carry_sometimes: 12, carry_no: 45, range_medium: 30, range_long: 32, motor_bosch: 50, motor_mid: 42, motor_flexible: 20, shift_classic: 35, shift_stepless: 25, shift_automatic: 28, shift_premium: 32, shift_flexible: 30, priority_range: 25, priority_premium: 38, priority_maintenance: 30 } }, { id: "cx", name: "Mobilemaster CX", badge: "High-End", url: "/e-klapprad/mobilemaster-cx/", description: "High-End E-Falträder mit Bosch Performance Line CX und hochwertigen Premium-Schaltungen.", facts: [ "Bosch Performance Line CX", "Rohloff E-14 verfügbar", "Enviolo & AutomatiQ verfügbar", "Shimano Di2 Varianten verfügbar" ], bosch: true, midMotor: true, speed45: false, scores: { usage_everyday: 35, usage_longtour: 55, usage_hills: 55, carry_sometimes: 10, carry_no: 50, range_medium: 25, range_long: 35, motor_bosch: 55, motor_mid: 45, motor_flexible: 20, shift_classic: 25, shift_stepless: 55, shift_automatic: 60, shift_premium: 60, shift_flexible: 38, priority_range: 28, priority_premium: 60, priority_maintenance: 45 } }, { id: "suv", name: "Mobilemaster Offroad SUV", badge: "Maximale Reichweite", url: "/e-klapprad/offroad-suv/", description: "Bafang Mittelmotor und optionaler Doppelakku für besonders lange Strecken.", facts: [ "Bafang Mittelmotor", "optional Doppelakku", "bis ca. 280 km Reichweite" ], bosch: false, midMotor: true, speed45: false, scores: { usage_everyday: 28, usage_longtour: 55, usage_hills: 35, carry_no: 45, range_medium: 20, range_long: 48, range_max: 70, motor_mid: 45, motor_flexible: 25, shift_classic: 25, shift_flexible: 20, priority_range: 70, priority_premium: 25 } }, { id: "bafang", name: "Mobilemaster Bafang Mittelmotor", badge: "Mittelmotor-Alternative", url: "/elektrofahrrad/premium-germanxia-mobilmaster-cm-8g-nabenschaltung-mit-drehmomentsensor_182008101_3050/", description: "E-Klapprad mit Bafang Mittelmotor und Drehmomentsensor.", facts: [ "Bafang Mittelmotor", "Drehmomentsensor", "Nabenschaltung" ], bosch: false, midMotor: true, speed45: false, scores: { usage_everyday: 38, usage_longtour: 22, usage_hills: 28, carry_no: 30, range_medium: 25, motor_mid: 45, motor_flexible: 25, shift_classic: 35, shift_flexible: 20, priority_value: 28 } }, { id: "speed", name: "Mobilemaster Falt-S-Pedelec 45 km/h", badge: "Bis 45 km/h", url: "/e-klapprad/bosch-faltbares-s-pedelec-45-km-h/", description: "Faltbares S-Pedelec für Kunden, die ausdrücklich Unterstützung bis 45 km/h wünschen.", facts: [ "Unterstützung bis 45 km/h", "Bosch Performance Line Speed", "Premium-Konfigurationen verfügbar" ], bosch: true, midMotor: true, speed45: true, scores: { usage_speed45: 200, usage_commute: 30, usage_longtour: 35, carry_no: 35, motor_bosch: 55, motor_mid: 45, shift_premium: 45, priority_premium: 45 } } ]; /* ========================================= FRAGEN ========================================= */ var questions = [ { id: "usage", title: "Wofür möchten Sie Ihr E-Faltrad hauptsächlich nutzen?", subtitle: "Wählen Sie den wichtigsten Einsatzzweck.", options: [ { value: "commute", title: "Pendeln & ÖPNV", text: "Arbeitsweg, Bahn und kurze Wege" }, { value: "camper", title: "Wohnmobil & Urlaub", text: "Kompakt im Camper oder Auto verstauen" }, { value: "everyday", title: "Alltag & Stadt", text: "Regelmäßige Fahrten und Einkäufe" }, { value: "longtour", title: "Lange Touren", text: "Viele Kilometer und längere Ausfahrten" }, { value: "hills", title: "Berge & Steigungen", text: "Leistungsstarker Antrieb ist wichtig" }, { value: "speed45", title: "Bis 45 km/h", text: "Ich suche ausdrücklich ein S-Pedelec" } ] }, { id: "carry", title: "Müssen Sie das E-Faltrad regelmäßig tragen oder anheben?", subtitle: "Zum Beispiel für Bahn, Treppen, Kofferraum oder Wohnmobil.", options: [ { value: "often", title: "Ja, regelmäßig", text: "Geringes Gewicht ist sehr wichtig" }, { value: "sometimes", title: "Manchmal", text: "Zum Beispiel für Auto oder Wohnmobil" }, { value: "no", title: "Eher nicht", text: "Gewicht ist für mich zweitrangig" } ] }, { id: "range", title: "Welche Reichweite benötigen Sie typischerweise?", subtitle: "Die tatsächliche Reichweite hängt von Fahrweise und Bedingungen ab.", options: [ { value: "short", title: "Bis ca. 50 km", text: "Vor allem kurze Strecken" }, { value: "medium", title: "Ca. 50–100 km", text: "Alltag und normale Touren" }, { value: "long", title: "100 km und mehr", text: "Längere Touren" }, { value: "max", title: "Maximale Reichweite", text: "So weit wie möglich fahren" } ] }, { id: "motor", title: "Wie wichtig ist Ihnen ein Mittelmotor?", subtitle: "Sie können Bosch ausdrücklich bevorzugen oder offen bleiben.", options: [ { value: "bosch", title: "Bosch Mittelmotor", text: "Ich möchte ausdrücklich einen Bosch-Antrieb" }, { value: "mid", title: "Mittelmotor ist wichtig", text: "Bosch oder Bafang kommen infrage" }, { value: "flexible", title: "Ich bin offen", text: "Der Einsatzzweck ist wichtiger als der Motor" } ] }, { id: "shift", title: "Wie möchten Sie schalten?", subtitle: "Wir übersetzen Ihre Auswahl in passende Technik.", options: [ { value: "simple", title: "Möglichst einfach", text: "Wenig Bedienaufwand" }, { value: "classic", title: "Klassisch", text: "Ich schalte meine Gänge selbst" }, { value: "stepless", title: "Stufenlos", text: "Keine festen Gangstufen" }, { value: "automatic", title: "Vollautomatisch", text: "Das Fahrrad soll möglichst viel übernehmen" }, { value: "premium", title: "Premium-Schaltung", text: "Hochwertige Technik und große Bandbreite" }, { value: "flexible", title: "Weiß ich noch nicht", text: "Bitte passend zum Einsatz empfehlen" } ] }, { id: "priority", title: "Was ist Ihnen am wichtigsten?", subtitle: "Damit bestimmen wir die endgültige Empfehlung.", options: [ { value: "light", title: "Möglichst leicht", text: "Einfach tragen und verstauen" }, { value: "compact", title: "Möglichst kompakt", text: "Kleines Faltmaß und einfache Mitnahme" }, { value: "range", title: "Große Reichweite", text: "Viele Kilometer ohne Nachladen" }, { value: "value", title: "Preis-Leistung", text: "Viel Fahrrad fürs Geld" }, { value: "premium", title: "Premium-Komponenten", text: "Fahrgefühl und Ausstattung stehen im Vordergrund" }, { value: "maintenance", title: "Wartungsarm & komfortabel", text: "Komfortable Technik für häufige Nutzung" } ] } ]; var answers = {}; var step = -1; /* ========================================= HAUPTCONTAINER ========================================= */ root.style.cssText = "max-width:1100px;" + "margin:35px auto;" + "padding:0 15px;" + "box-sizing:border-box;" + "font-family:Arial,Helvetica,sans-serif;"; var card = append( root, createElement( "div", "background:#ffffff;" + "border:1px solid #dfe5eb;" + "border-radius:14px;" + "box-shadow:0 4px 18px rgba(25,45,65,0.07);" + "overflow:hidden;" ) ); var header = append( card, createElement( "div", "padding:28px 28px 22px;" + "text-align:center;" + "border-bottom:1px solid #e8edf2;" ) ); append( header, createElement( "div", "color:#075eae;" + "font-size:12px;" + "font-weight:700;" + "letter-spacing:0.08em;" + "text-transform:uppercase;" + "margin-bottom:7px;", "GermanXia E-Faltrad-Beratung" ) ); append( header, createElement( "div", "color:#252a30;" + "font-size:28px;" + "line-height:1.2;" + "font-weight:700;" + "margin-bottom:9px;", "Welches E-Faltrad passt zu Ihnen?" ) ); append( header, createElement( "div", "max-width:680px;" + "margin:0 auto;" + "color:#65717d;" + "font-size:15px;" + "line-height:1.55;", "Beantworten Sie 6 kurze Fragen. Wir vergleichen Ihre Anforderungen mit unseren Mobilemaster-Modellen." ) ); var progressArea = append( card, createElement( "div", "padding:20px 28px 0;" ) ); var progressBackground = append( progressArea, createElement( "div", "height:6px;" + "background:#e8edf2;" + "border-radius:10px;" + "overflow:hidden;" ) ); var progressBar = append( progressBackground, createElement( "div", "width:0%;" + "height:100%;" + "background:#075eae;" + "border-radius:10px;" + "transition:width .25s ease;" ) ); var progressText = append( progressArea, createElement( "div", "margin-top:7px;" + "text-align:right;" + "color:#7a848e;" + "font-size:12px;", "Start" ) ); var content = append( card, createElement( "div", "padding:24px 28px 30px;" ) ); /* ========================================= STARTSEITE ========================================= */ function renderStart() { clear(content); progressBar.style.width = "0%"; progressText.textContent = "Start"; var center = append( content, createElement( "div", "text-align:center;padding:8px 0;" ) ); var benefits = append( center, createElement( "div", "display:grid;" + "grid-template-columns:repeat(auto-fit,minmax(170px,1fr));" + "gap:10px;" + "max-width:760px;" + "margin:0 auto 24px;" ) ); addBenefit( benefits, "6 kurze Fragen", "In etwa 60 Sekunden" ); addBenefit( benefits, "Ohne Anmeldung", "Ergebnis sofort sehen" ); addBenefit( benefits, "Persönliche Auswahl", "Passend zu Ihrem Einsatz" ); var startButton = append( center, createElement( "button", "border:0;" + "border-radius:7px;" + "background:#075eae;" + "color:#ffffff;" + "padding:14px 30px;" + "font-size:15px;" + "font-weight:700;" + "cursor:pointer;" + "min-width:220px;", "Produktfinder starten" ) ); startButton.type = "button"; startButton.addEventListener( "click", function () { answers = {}; step = 0; track( "gx_product_finder_start" ); renderQuestion(); } ); } function addBenefit(parent, title, text) { var box = append( parent, createElement( "div", "padding:14px;" + "background:#f7f9fb;" + "border:1px solid #e3e8ed;" + "border-radius:8px;" ) ); append( box, createElement( "div", "font-weight:700;" + "color:#252a30;" + "font-size:14px;", title ) ); append( box, createElement( "div", "margin-top:3px;" + "color:#76818c;" + "font-size:12px;", text ) ); } /* ========================================= FRAGEN ========================================= */ function renderQuestion() { clear(content); var question = questions[step]; var percentage = ((step + 1) / questions.length) * 100; progressBar.style.width = percentage + "%"; progressText.textContent = "Frage " + (step + 1) + " von " + questions.length; var wrapper = append( content, createElement( "div", "max-width:850px;margin:0 auto;" ) ); var questionHeader = append( wrapper, createElement( "div", "text-align:center;margin-bottom:22px;" ) ); append( questionHeader, createElement( "div", "font-size:22px;" + "font-weight:700;" + "color:#252a30;" + "line-height:1.3;", question.title ) ); append( questionHeader, createElement( "div", "margin-top:7px;" + "color:#6e7984;" + "font-size:14px;" + "line-height:1.45;", question.subtitle ) ); var grid = append( wrapper, createElement( "div", "display:grid;" + "grid-template-columns:repeat(auto-fit,minmax(220px,1fr));" + "gap:11px;" ) ); question.options.forEach( function (option) { var selected = answers[question.id] === option.value; var optionButton = append( grid, createElement( "button", "text-align:left;" + "padding:16px;" + "border-radius:9px;" + "border:" + (selected ? "2px solid #075eae;" : "1px solid #dce3e9;") + "background:" + (selected ? "#eef5fc;" : "#ffffff;") + "cursor:pointer;" + "min-height:92px;" ) ); optionButton.type = "button"; append( optionButton, createElement( "span", "display:block;" + "font-size:15px;" + "font-weight:700;" + "color:#252a30;" + "margin-bottom:5px;", option.title ) ); append( optionButton, createElement( "span", "display:block;" + "font-size:12.5px;" + "line-height:1.4;" + "font-weight:400;" + "color:#73808b;", option.text ) ); optionButton.addEventListener( "click", function () { answers[question.id] = option.value; track( "gx_product_finder_answer", { question: question.id, answer: option.value } ); if ( step < questions.length - 1 ) { step = step + 1; renderQuestion(); } else { renderResults(); } } ); } ); if (step > 0) { var backArea = append( wrapper, createElement( "div", "margin-top:22px;" ) ); var backButton = append( backArea, createElement( "button", "background:#ffffff;" + "border:1px solid #cfd7df;" + "color:#46515b;" + "border-radius:6px;" + "padding:10px 18px;" + "font-size:13px;" + "font-weight:600;" + "cursor:pointer;", "← Zurück" ) ); backButton.type = "button"; backButton.addEventListener( "click", function () { step = step - 1; renderQuestion(); } ); } } /* ========================================= SCORING ========================================= */ function getProductScore(product) { var score = 0; Object.keys(answers).forEach( function (answerKey) { var scoreKey = answerKey + "_" + answers[answerKey]; if ( product.scores && typeof product.scores[scoreKey] !== "undefined" ) { score += product.scores[scoreKey]; } } ); if ( answers.motor === "bosch" ) { if (product.bosch) { score += 50; } else { score -= 150; } } if ( answers.motor === "mid" ) { if (product.midMotor) { score += 35; } else { score -= 40; } } if ( answers.usage === "speed45" ) { if (product.speed45) { score += 300; } else { score -= 300; } } return score; } /* ========================================= PRODUKTSPEZIFISCHE EINORDNUNG ========================================= */ function getRecommendationText(product) { if (product.id === "cx") { if ( answers.shift === "automatic" ) { return "Besonders passend ist eine CX-Konfiguration mit Enviolo AutomatiQ oder einer automatischen Shimano Di2 Schaltung."; } if ( answers.shift === "stepless" ) { return "Besonders passend ist eine CX-Konfiguration mit Enviolo 380 % stufenloser Nabenschaltung."; } if ( answers.shift === "premium" ) { return "Für maximale Bandbreite und Premium-Technik ist besonders die Rohloff E-14 interessant."; } return "Die CX-Serie bietet Bosch Performance Line CX mit Rohloff, Enviolo, AutomatiQ und Shimano Di2."; } if ( product.id === "offroadgt" ) { if ( answers.usage === "hills" ) { return "Für Steigungen empfehlen wir innerhalb der Offroad GT Serie besonders eine Performance Line CX Variante."; } return "Je nach Fahrprofil stehen Active Line Plus, Performance Line und Performance Line CX zur Verfügung."; } if ( product.id === "light" ) { if ( answers.carry === "often" ) { return "Wenn jedes Kilogramm zählt, würden wir innerhalb der LIGHT-Serie zuerst das V16 betrachten."; } return "V16 und V18 eignen sich besonders für Wohnmobil, Auto, Urlaub, Alltag und Bahn."; } if ( product.id === "lightbosch" ) { if ( answers.priority === "maintenance" ) { return "Für einen besonders wartungsarmen Antrieb ist die optionale Gates-CDX-Ausführung interessant."; } return "Eine starke Wahl, wenn geringeres Gewicht und Bosch Mittelmotor zusammenkommen sollen."; } if ( product.id === "suv" ) { return "Für maximale Reichweite ist besonders die Doppelakku-Konfiguration des Offroad SUV interessant."; } if ( product.id === "eflow" ) { return "Besonders sinnvoll für Pendeln, kurze Strecken und möglichst kompaktes Verstauen."; } if ( product.id === "touringplus" ) { return "Für längere Alltags- und Tourenstrecken bietet die 9-Gang-Version mehr Schaltbandbreite."; } if ( product.id === "touring" ) { return "Ein bewährter Allrounder, wenn Preis-Leistung und Alltagstauglichkeit im Vordergrund stehen."; } if ( product.id === "speed" ) { return "Wenn Unterstützung bis 45 km/h ausdrücklich gewünscht ist, ist die S-Pedelec-Serie die passende Fahrzeugklasse."; } return "Diese Modellfamilie passt gut zu Ihren angegebenen Anforderungen."; } /* ========================================= ERGEBNIS ========================================= */ function renderResults() { clear(content); progressBar.style.width = "100%"; progressText.textContent = "Ihre Empfehlung"; var ranked = products .map( function (product) { return { product: product, score: getProductScore( product ) }; } ) .sort( function (a, b) { return ( b.score - a.score ); } ); if ( answers.motor === "bosch" ) { ranked = ranked.filter( function (entry) { return ( entry.product.bosch ); } ); } if ( answers.usage === "speed45" ) { ranked = ranked.filter( function (entry) { return ( entry.product.speed45 ); } ); } var results = ranked.slice(0, 3); var wrapper = append( content, createElement( "div", "max-width:900px;margin:0 auto;" ) ); var titleArea = append( wrapper, createElement( "div", "text-align:center;" + "margin-bottom:24px;" ) ); append( titleArea, createElement( "div", "color:#075eae;" + "font-size:12px;" + "font-weight:700;" + "text-transform:uppercase;" + "letter-spacing:.07em;" + "margin-bottom:6px;", "Ihre persönliche Auswahl" ) ); append( titleArea, createElement( "div", "font-size:25px;" + "font-weight:700;" + "color:#252a30;" + "line-height:1.25;", "Diese E-Falträder passen zu Ihren Anforderungen" ) ); results.forEach( function (entry, index) { renderProductCard( wrapper, entry.product, index ); } ); renderAdviceBox( wrapper, results ); var restartArea = append( wrapper, createElement( "div", "text-align:center;" + "margin-top:18px;" ) ); var restart = append( restartArea, createElement( "button", "background:none;" + "border:0;" + "color:#075eae;" + "font-size:13px;" + "font-weight:600;" + "cursor:pointer;" + "text-decoration:underline;", "Finder neu starten" ) ); restart.type = "button"; restart.addEventListener( "click", function () { answers = {}; step = -1; renderStart(); root.scrollIntoView( { behavior: "smooth", block: "start" } ); } ); track( "gx_product_finder_complete", { usage: answers.usage, carry: answers.carry, range: answers.range, motor: answers.motor, shift: answers.shift, priority: answers.priority, recommendation: results.length ? results[0].product.id : "" } ); root.scrollIntoView( { behavior: "smooth", block: "start" } ); } function renderProductCard( parent, product, index ) { var cardCss = "margin-bottom:14px;" + "padding:19px;" + "border-radius:11px;" + "background:" + (index === 0 ? "#f8fbfe;" : "#ffffff;") + "border:" + (index === 0 ? "2px solid #075eae;" : "1px solid #dce3e9;"); var productCard = append( parent, createElement( "div", cardCss ) ); var label = "Weitere passende Option"; if (index === 0) { label = "Unsere Empfehlung"; } if (index === 1) { label = "Sehr gute Alternative"; } append( productCard, createElement( "div", "color:#075eae;" + "font-size:11px;" + "font-weight:700;" + "text-transform:uppercase;" + "letter-spacing:.06em;" + "margin-bottom:5px;", label ) ); append( productCard, createElement( "div", "font-size:20px;" + "font-weight:700;" + "color:#252a30;", product.name ) ); append( productCard, createElement( "span", "display:inline-block;" + "margin-top:6px;" + "padding:5px 9px;" + "background:#eaf3fb;" + "border-radius:20px;" + "color:#075eae;" + "font-size:11px;" + "font-weight:700;", product.badge ) ); append( productCard, createElement( "div", "margin-top:12px;" + "color:#5f6a74;" + "font-size:14px;" + "line-height:1.5;", product.description ) ); var factsGrid = append( productCard, createElement( "div", "display:grid;" + "grid-template-columns:repeat(auto-fit,minmax(170px,1fr));" + "gap:7px;" + "margin-top:14px;" ) ); product.facts.forEach( function (fact) { var factLine = append( factsGrid, createElement( "div", "font-size:12.5px;" + "line-height:1.4;" + "color:#4f5a64;" ) ); append( factLine, createElement( "span", "color:#075eae;" + "font-weight:700;", "✓ " ) ); append( factLine, document.createTextNode( fact ) ); } ); var recommendationBox = append( productCard, createElement( "div", "margin-top:14px;" + "padding:11px 13px;" + "background:#f5f7f9;" + "border-radius:7px;" + "font-size:13px;" + "line-height:1.45;" + "color:#4e5963;" ) ); append( recommendationBox, createElement( "strong", "color:#252a30;", "Unsere Einordnung: " ) ); append( recommendationBox, document.createTextNode( getRecommendationText( product ) ) ); var link = append( productCard, createElement( "a", "display:inline-block;" + "margin-top:15px;" + "padding:11px 18px;" + "background:#075eae;" + "border-radius:6px;" + "color:#ffffff;" + "font-size:13px;" + "font-weight:700;" + "text-decoration:none;", "Modelle ansehen" ) ); link.href = product.url; link.addEventListener( "click", function () { track( "gx_product_finder_result_click", { product: product.id } ); } ); } function renderAdviceBox( parent, results ) { var adviceBox = append( parent, createElement( "div", "margin-top:22px;" + "padding:20px;" + "background:#f4f7f9;" + "border-radius:10px;" + "text-align:center;" ) ); append( adviceBox, createElement( "div", "font-size:18px;" + "font-weight:700;" + "color:#252a30;" + "margin-bottom:5px;", "Noch unsicher?" ) ); append( adviceBox, createElement( "div", "font-size:13.5px;" + "line-height:1.45;" + "color:#64707b;" + "margin-bottom:13px;", "Unsere Beratung hilft Ihnen bei Motor, Schaltung, Reichweite und Modellwahl." ) ); var adviceLink = append( adviceBox, createElement( "a", "display:inline-block;" + "padding:12px 20px;" + "background:#075eae;" + "border-radius:6px;" + "color:#ffffff;" + "font-size:13px;" + "font-weight:700;" + "text-decoration:none;", "Persönlich beraten lassen" ) ); adviceLink.href = "/service/online-beratung/"; adviceLink.addEventListener( "click", function () { track( "gx_product_finder_advice_click", { recommendation: results.length ? results[0].product.id : "" } ); } ); } renderStart(); })();