Materialberater – Stanz- & Stanzbiegeteile | Alfred Kron GmbH

/* ── 1. GLOBALE VARIABLEN & BASICS (Aus deinem Code) ── */ :root { --kron-blue-dark: #0d2d5e; --kron-blue: #1a4d8f; --kron-blue-mid: #2563b0; --kron-blue-light: #dbeafe; --kron-bg: #f0f5fc; --kron-white: #ffffff; --kron-text: #0f1e35; --kron-muted: #3d5a7a; --kron-border: #c3d4e8; --ff-display: 'Barlow Condensed', sans-serif; --ff-body: 'Source Sans 3', sans-serif; } /* Typography & Basics */ h2, h3 { font-family: var(--ff-display); color: var(--kron-blue-dark); line-height: 1.1; } h2 { font-size: clamp(1.4rem, 3.5vw, 2rem); font-weight: 700; } h3 { font-size: 1.2rem; font-weight: 700; } .section-label { font-size: .7rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--kron-blue); margin-bottom: .4rem; } /* Buttons (Aus deiner Vorlage) */ .btn-kron-blue { background: var(--kron-blue); color: #fff; border: none; border-radius: 3px; font-family: var(--ff-display); font-weight: 700; font-size: .95rem; letter-spacing: .04em; padding: 8px 20px; transition: background .15s; } .btn-kron-blue:hover:not(:disabled) { background: var(--kron-blue-mid); color: #fff; } .btn-kron-blue:disabled { background: var(--kron-border); color: var(--kron-muted); cursor: not-allowed; } .btn-kron-outline-blue { background: transparent; color: var(--kron-blue); border: 1.5px solid var(--kron-blue); border-radius: 3px; font-family: var(--ff-display); font-weight: 700; font-size: .92rem; letter-spacing: .04em; padding: 8px 18px; transition: background .15s, color .15s; } .btn-kron-outline-blue:hover { background: var(--kron-blue); color: #fff; } /* ── 2. SPEZIFISCHE STYLES FÜR DEN MATERIALBERATER ── */ /* Progress Steps (Fortschrittsleiste) */ .steps-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3rem; position: relative; } .step-node { display: flex; flex-direction: column; align-items: center; z-index: 2; background: var(--kron-bg); padding: 0 10px; } .step-circle { width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 2px solid var(--kron-border); color: var(--kron-muted); display: flex; align-items: center; justify-content: center; font-weight: 700; font-family: var(--ff-display); transition: all 0.25s ease; } .step-circle.active { border-color: var(--kron-blue); background: var(--kron-blue); color: #fff; } .step-circle.done { border-color: var(--kron-blue-dark); background: var(--kron-blue-dark); color: #fff; } .step-label { font-size: 0.75rem; font-weight: 600; color: var(--kron-muted); margin-top: 6px; text-transform: uppercase; letter-spacing: 0.05em; } .step-label.active { color: var(--kron-blue); } .step-label.done { color: var(--kron-blue-dark); } .step-connector { flex-grow: 1; height: 2px; background: var(--kron-border); margin: 0 -15px; transform: translateY(-13px); z-index: 1; transition: background 0.25s ease; } .step-connector.done { background: var(--kron-blue-dark); } /* Option Cards (Karten in Schritt 1-3) */ .option-card { background: var(--kron-white); border: 2px solid var(--kron-border); border-radius: 4px; padding: 20px; cursor: pointer; position: relative; height: 100%; transition: border-color .15s, box-shadow .15s; } .option-card:hover { border-color: var(--kron-blue); box-shadow: 0 4px 12px rgba(13,45,94,.06); } .option-card.selected { border-color: var(--kron-blue-dark); background: var(--kron-blue-light); } .oc-icon { font-size: 1.5rem; color: var(--kron-blue); margin-bottom: 10px; } .oc-title { font-family: var(--ff-display); font-weight: 700; font-size: 1.15rem; color: var(--kron-blue-dark); margin-bottom: 6px; } .oc-desc { font-size: 0.82rem; color: var(--kron-muted); margin: 0; line-height: 1.4; } .oc-check { display: none; position: absolute; top: 15px; right: 15px; font-size: 0.8rem; font-weight: 700; } .option-card.selected .oc-check { display: block; } /* Result Cards (Schritt 4: Empfehlungen) */ .result-card { background: var(--kron-white); border: 1px solid var(--kron-border); border-top: 4px solid var(--kron-blue); border-radius: 4px; padding: 24px; position: relative; height: 100%; } .result-card.top-pick { border-top-color: var(--kron-blue-dark); box-shadow: 0 8px 24px rgba(13,45,94,.08); } .result-badge { position: absolute; top: -12px; right: 15px; font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; padding: 3px 10px; border-radius: 99px; } .badge-top { background: var(--kron-blue-dark); color: #fff; } .badge-alt { background: var(--kron-blue-light); color: var(--kron-blue-dark); } .badge-opt { background: var(--kron-bg); color: var(--kron-muted); } .summary-pill { background: var(--kron-white); border: 1px solid var(--kron-border); border-radius: 99px; padding: 4px 12px; font-size: 0.78rem; font-weight: 600; color: var(--kron-muted); } .mat-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.1); } .mat-name { font-family: var(--ff-display); font-weight: 700; font-size: 1.15rem; color: var(--kron-blue-dark); } .mat-norm { font-size: 0.72rem; color: var(--kron-muted); } /* Match Bar / Progress indicator in results */ .match-bar-wrap { margin: 15px 0; } .match-bar-label { display: flex; justify-content: space-between; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; color: var(--kron-muted); margin-bottom: 4px; } .match-bar-bg { height: 6px; background: var(--kron-bg); border-radius: 99px; overflow: hidden; } .match-bar-fill { height: 100%; background: var(--kron-blue); border-radius: 99px; transition: width 0.8s cubic-bezier(0.1, 0.8, 0.25, 1); } /* Pros / Cons inside result cards */ .pros-cons-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 15px 0; padding-top: 15px; border-top: 1px dashed var(--kron-border); } .pros-cons-title { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; } .pros-cons-title.pros { color: #1a6b3c; } .pros-cons-title.cons { color: #9a6a08; } .pros-cons-item { font-size: 0.78rem; line-height: 1.35; margin-bottom: 4px; display: flex; align-items: flex-start; gap: 6px; } .pros-cons-item .bi { font-size: 0.85rem; } .pros-cons-item .bi-check-circle-fill { color: #1a6b3c; } .pros-cons-item .bi-circle { color: var(--kron-border); } .coating-box { background: var(--kron-bg); border-radius: 4px; padding: 10px 12px; font-size: 0.75rem; line-height: 1.4; color: var(--kron-text); } /* Responsive Settings */ @media (max-width: 575px) { .steps-bar { flex-direction: column; gap: 15px; align-items: flex-start; } .step-connector { display: none; } .step-node { flex-direction: row; gap: 10px; padding: 0; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } Finden Sie in 3 Schritten den optimalen Werkstoff für Ihr Bauteil – mit Übereinstimmungs-Score, Vor-/Nachteilen und direkter Anfragemöglichkeit. 1 Branche 2 Umgebung 3 Funktion 4 Empfehlung Schritt 1 von 3 In welcher Branche wird das Bauteil eingesetzt? Wählen Sie die Zielanwendung Ihres Stanz- oder Stanzbiegeteils. Weiter Schritt 2 von 3 Welchen Umgebungsbedingungen ist das Bauteil ausgesetzt? Die Einsatzumgebung ist entscheidend für die Korrosions- und Temperaturbeständigkeit. Zurück Weiter Schritt 3 von 3 Welche Hauptfunktion hat das Bauteil? Die mechanische oder elektrische Funktion bestimmt die Werkstoffeigenschaften. Zurück Empfehlung anzeigen Ihre Werkstoffempfehlung Optimale Materialien für Ihr Bauteil Vergleichsübersicht Materialvergleich auf einen Blick Werkstoff W.-Nr. Gruppe Norm Stärke Korrosion Leitf. Federkraft Kosten Zurück Neu starten // ═══════════════════════════════════════════════════════════ // DATA // ═══════════════════════════════════════════════════════════ const BRANCHEN = [ { id: "automotive", icon: "bi-car-front-fill", label: "Automotive", desc: "Karosserie, Fahrwerk, Interieur, Motor & Elektrik" }, { id: "elektro", icon: "bi-lightning-charge-fill",label: "Elektro & Elektronik", desc: "Kontakte, Federn, Leiterplatten, Busbars, EMV" }, { id: "maschinenbau", icon: "bi-gear-fill", label: "Maschinenbau", desc: "Montage, Verbindung, Führung, Strukturteile" }, { id: "medizin", icon: "bi-heart-pulse-fill", label: "Medizintechnik", desc: "Hygienische Präzisionsbauteile, Clips, Federn" }, { id: "haushalte", icon: "bi-lightbulb-fill", label: "Haushalt & Leuchten", desc: "Haltebügel, Federn, Befestigungen, Clips" }, { id: "moebel", icon: "bi-house-fill", label: "Möbel & Beschläge", desc: "Schubladensysteme, Scharnierbeschläge, Verbinder" }, ]; const UMGEBUNGEN = [ { id: "feucht", icon: "bi-droplet-fill", label: "Feucht / Nass", desc: "Wasser, Kondensat, Schweiß, Kühlmittel" }, { id: "chemisch", icon: "bi-flask-fill", label: "Chemisch belastet", desc: "Säuren, Laugen, Öle, Kraftstoffe, Pharmaka" }, { id: "hochtemp", icon: "bi-thermometer-high", label: "Hohe Temperaturen", desc: "Über 150 °C – Motorraum, Industrie, Öfen" }, { id: "leitfaehig", icon: "bi-plug-fill", label: "Elektrisch leitfähig", desc: "Stromleitung, Kontaktfedern, Busbars" }, { id: "standard", icon: "bi-building-fill", label: "Standardumgebung", desc: "Innenraum, trocken, Raumtemperatur" }, ]; const FUNKTIONEN = [ { id: "feder", icon: "bi-arrows-collapse", label: "Federnde Funktion", desc: "Rückstellkraft, Energiespeicher, Clips, Klemmen" }, { id: "halte", icon: "bi-link-45deg", label: "Halte- & Befestigung", desc: "Fixieren, Montieren, Verbinden von Baugruppen" }, { id: "kontakt", icon: "bi-plug-fill", label: "Elektrischer Kontakt", desc: "Leitfähigkeit, Kontaktdruck, Signalübertragung" }, { id: "struktur", icon: "bi-grid-3x3-gap-fill", label: "Strukturbauteil", desc: "Steifigkeit, Formstabilität, Lastaufnahme" }, { id: "dicht", icon: "bi-shield-fill-check", label: "Dicht- / Abschirmfunktion", desc: "EMV-Schirmung, Dichtlippen, Verschlüsse" }, ]; // Material database const MATERIALS = { // ── Stahl- & Federwerkstoffe ─────────────────────────── "DC01": { name: "Bandstahl DC01", wknr: "1.0330", norm: "EN 10139", staerke: "0,5 – 3,0 mm", gruppe: "Stahl", swatch: "#6b6b6b", vorteile: ["Sehr wirtschaftlich", "Gut umformbar & tiefziehfähig", "Hohe Verfügbarkeit", "Ideal für Massenteile"], hinweise: ["Kein Korrosionsschutz", "Oberflächenschutz zwingend erforderlich", "Keine Federeigenschaften"], beschichtung: "Verzinken (galvanisch / Feuerverzinken), Vernickeln, Lackieren, Pulverbeschichten", table: { korrosion: "⚪ Keine", leitf: "— Nein", feder: "✗ Keine", kosten: "€ Sehr günstig" }, ideal: ["automotive","maschinenbau","haushalte","moebel"], scores: { automotive:28, maschinenbau:32, haushalte:25, moebel:28, elektro:8, medizin:5, feucht:0, chemisch:0, hochtemp:12, leitfaehig:3, standard:35, feder:2, halte:35, kontakt:3, struktur:35, dicht:12 } }, "C75S": { name: "Federbandstahl C75S", wknr: "1.1248", norm: "EN 10132-4", staerke: "0,3 – 2,0 mm", gruppe: "Stahl", swatch: "#3a3a3a", vorteile: ["Exzellente Federkraft & Rückstellkraft", "Härtbar Inhouse bei Kron", "Sehr hohe Zugfestigkeit", "Wirtschaftlich in Großserien"], hinweise: ["Nicht korrosionsbeständig", "Oberflächenschutz notwendig", "Empfindlicher bei scharfen Biegekanten"], beschichtung: "Verzinken, Vernickeln, Delta Seal, Delta Tone, Phosphatieren", table: { korrosion: "⚪ Gering", leitf: "— Nein", feder: "★★★ Sehr hoch", kosten: "€ Günstig" }, ideal: ["automotive","maschinenbau","haushalte","moebel"], scores: { automotive:30, maschinenbau:30, haushalte:28, moebel:22, elektro:12, medizin:5, feucht:0, chemisch:0, hochtemp:15, leitfaehig:5, standard:32, feder:40, halte:25, kontakt:5, struktur:28, dicht:15 } }, "1.4310": { name: "Federbandstahl nichtrostend 1.4310", wknr: "1.4310", norm: "EN 10270-3 / X10CrNi18-8", staerke: "0,1 – 1,5 mm", gruppe: "Edelstahl", swatch: "#8b9ea8", vorteile: ["Korrosionsbeständig – kein Oberflächenschutz nötig", "Gute Federeigenschaften", "Hygienisch & lebensmittelgeeignet", "Auch als PT-Band erhältlich"], hinweise: ["Höherer Materialpreis als C75S", "Härteres Umformen", "Eingeschränkte elektrische Leitfähigkeit"], beschichtung: "Keine erforderlich – Passivieren oder Elektropolieren möglich", table: { korrosion: "★★★ Hoch", leitf: "— Nein", feder: "★★ Mittel", kosten: "€€ Mittel" }, ideal: ["medizin","haushalte","elektro","maschinenbau"], scores: { automotive:18, maschinenbau:22, haushalte:28, moebel:18, elektro:22, medizin:38, feucht:38, chemisch:32, hochtemp:26, leitfaehig:10, standard:15, feder:28, halte:20, kontakt:10, struktur:22, dicht:32 } }, "1.4301": { name: "Edelstahl 1.4301 (V2A)", wknr: "1.4301", norm: "EN 10139", staerke: "0,3 – 3,0 mm", gruppe: "Edelstahl", swatch: "#9eb3bb", vorteile: ["Hohe Korrosionsbeständigkeit", "Lebensmittel- & medizingeeignet", "Hohe Formstabilität", "Gut schweißbar"], hinweise: ["Keine Federeigenschaften", "Teurer als DC01 / C75S", "Schlechtere Umformbarkeit"], beschichtung: "Elektropolieren, Passivieren, Beizen – kein weiterer Schutz erforderlich", table: { korrosion: "★★★ Hoch", leitf: "— Nein", feder: "★ Gering", kosten: "€€ Mittel" }, ideal: ["medizin","maschinenbau","haushalte"], scores: { automotive:15, maschinenbau:28, haushalte:24, moebel:22, elektro:10, medizin:38, feucht:36, chemisch:34, hochtemp:30, leitfaehig:5, standard:15, feder:6, halte:30, kontakt:5, struktur:35, dicht:30 } }, // ── NE-Metalle ───────────────────────────────────────── "CuETP": { name: "Kupferband Cu-ETP", wknr: "2.0060", norm: "EN 1652", staerke: "0,1 – 2,0 mm", gruppe: "Kupfer", swatch: "#c0522a", vorteile: ["Höchste elektrische Leitfähigkeit (≥ 58 MS/m)", "Sehr gut lötbar & schweißbar", "Ideal für Busbars & Stromschienen", "Gut umformbar"], hinweise: ["Geringe mechanische Festigkeit", "Keine Federeigenschaften", "Empfindlich gegenüber Säuren"], beschichtung: "Verzinnen (Lötbarkeit), Versilbern, Vergolden – partiell möglich", table: { korrosion: "★ Gering", leitf: "★★★ Maximal", feder: "✗ Keine", kosten: "€€ Mittel" }, ideal: ["elektro","automotive"], scores: { automotive:18, maschinenbau:8, haushalte:10, moebel:3, elektro:45, medizin:10, feucht:8, chemisch:5, hochtemp:8, leitfaehig:48, standard:15, feder:3, halte:8, kontakt:48, struktur:5, dicht:5 } }, "CuSn6": { name: "Federbronze CuSn6", wknr: "2.1020", norm: "EN 1654", staerke: "0,1 – 1,0 mm", gruppe: "Kupfer", swatch: "#b87333", vorteile: ["Hohe Leitfähigkeit + gute Federkraft", "Sehr gut lötbar", "Galvanisch beschichtbar", "Dauerfest bei Lastwechseln"], hinweise: ["Höherer Materialpreis", "Geringere Festigkeit als Federstahl", "Weicher als 1.4310"], beschichtung: "Vergolden, Versilbern, Verzinnen – für höchste Kontaktzuverlässigkeit, partiell beschichtet möglich", table: { korrosion: "★★ Mittel", leitf: "★★★ Hoch", feder: "★★ Mittel", kosten: "€€€ Hoch" }, ideal: ["elektro","automotive"], scores: { automotive:14, maschinenbau:8, haushalte:10, moebel:5, elektro:42, medizin:14, feucht:12, chemisch:8, hochtemp:6, leitfaehig:44, standard:15, feder:26, halte:10, kontakt:45, struktur:8, dicht:12 } }, "Neusilber": { name: "Neusilber (CuNiZn)", wknr: "2.0740", norm: "EN 1654", staerke: "0,1 – 1,5 mm", gruppe: "Kupfer", swatch: "#c8c0b0", vorteile: ["Silberartiges Erscheinungsbild", "Gute Korrosionsbeständigkeit", "Mittlere Federkraft", "Gut galvanisch veredelbar"], hinweise: ["Geringe elektrische Leitfähigkeit", "Nickelallergen (Kennzeichnungspflicht)", "Höherer Preis"], beschichtung: "Versilbern, Vergolden, Vernickeln (Untergrund) – dekorativ einsetzbar", table: { korrosion: "★★ Mittel", leitf: "★ Gering", feder: "★★ Mittel", kosten: "€€€ Hoch" }, ideal: ["haushalte","moebel","elektro"], scores: { automotive:8, maschinenbau:10, haushalte:28, moebel:30, elektro:18, medizin:8, feucht:18, chemisch:12, hochtemp:8, leitfaehig:8, standard:22, feder:18, halte:15, kontakt:10, struktur:10, dicht:12 } }, "Tombak": { name: "Tombak (CuZn15)", wknr: "2.0240", norm: "EN 1654", staerke: "0,1 – 1,5 mm", gruppe: "Kupfer", swatch: "#d4a84b", vorteile: ["Sehr gute Kaltumformbarkeit", "Gute Leitfähigkeit", "Dekorative Goldfarbe", "Nickelfrei"], hinweise: ["Geringere Festigkeit als Federbronze", "Oxidiert an Luft", "Eingeschränkte Federwirkung"], beschichtung: "Vergolden, Versilbern, Verzinnen – auch partiell beschichtet lieferbar", table: { korrosion: "★ Gering", leitf: "★★ Mittel", feder: "★ Gering", kosten: "€€ Mittel" }, ideal: ["elektro","haushalte","moebel"], scores: { automotive:8, maschinenbau:8, haushalte:22, moebel:25, elektro:28, medizin:8, feucht:8, chemisch:5, hochtemp:5, leitfaehig:28, standard:18, feder:10, halte:12, kontakt:28, struktur:8, dicht:8 } }, "CuZn37": { name: "Messing CuZn37", wknr: "2.0321", norm: "EN 1652", staerke: "0,2 – 3,0 mm", gruppe: "Kupfer", swatch: "#d4b44a", vorteile: ["Sehr gut zerspanbar & umformbar", "Mittlere Leitfähigkeit", "Gut lötbar", "Wirtschaftlich"], hinweise: ["Keine Federeigenschaften", "Spannungsrisskorrosion möglich", "Nicht für aggressive Medien"], beschichtung: "Vernickeln, Verzinnen, Vergolden – dekorative und funktionale Oberflächen möglich", table: { korrosion: "★ Gering", leitf: "★★ Mittel", feder: "✗ Keine", kosten: "€€ Mittel" }, ideal: ["elektro","maschinenbau","haushalte","moebel"], scores: { automotive:12, maschinenbau:22, haushalte:22, moebel:25, elektro:25, medizin:5, feucht:5, chemisch:5, hochtemp:8, leitfaehig:25, standard:28, feder:3, halte:22, kontakt:25, struktur:15, dicht:8 } }, "Al1050A": { name: "Aluminiumband EN AW-1050A", wknr: "3.0255", norm: "EN 485", staerke: "0,3 – 3,0 mm", gruppe: "Aluminium", swatch: "#d0d0d0", vorteile: ["Sehr leicht (Gewichtseinsparung bis 65 %)", "Gute elektrische Leitfähigkeit", "Korrosionsbeständig", "Gut umformbar"], hinweise: ["Geringe mechanische Festigkeit", "Keine Federeigenschaften", "Eingeschränkte Schweißeignung"], beschichtung: "Eloxieren, Pulverbeschichten, Chromatieren (RoHS-konform)", table: { korrosion: "★★ Mittel", leitf: "★★ Mittel", feder: "✗ Keine", kosten: "€ Günstig" }, ideal: ["automotive","elektro","maschinenbau"], scores: { automotive:28, maschinenbau:22, haushalte:15, moebel:15, elektro:22, medizin:8, feucht:22, chemisch:10, hochtemp:8, leitfaehig:22, standard:24, feder:3, halte:22, kontakt:18, struktur:28, dicht:10 } } }; // ═══════════════════════════════════════════════════════════ // STATE // ═══════════════════════════════════════════════════════════ let state = { branche: null, umgebung: null, funktion: null, step: 1 }; // ═══════════════════════════════════════════════════════════ // INIT // ═══════════════════════════════════════════════════════════ document.addEventListener('DOMContentLoaded', () => { renderGrid('brancheGrid', BRANCHEN, 'branche', 'btn1Next'); renderGrid('umgebungGrid', UMGEBUNGEN, 'umgebung', 'btn2Next'); renderGrid('funktionGrid', FUNKTIONEN, 'funktion', 'btn3Next'); }); function renderGrid(gridId, items, stateKey, btnId) { const grid = document.getElementById(gridId); grid.innerHTML = items.map((item, i) => ` ${item.label} ${item.desc} Ausgewählt `).join(''); } function selectOption(stateKey, value, gridId, btnId) { // Deselect all in this grid document.querySelectorAll(`#${gridId} .option-card`).forEach(c => c.classList.remove('selected')); // Select clicked document.getElementById(`${gridId}_${value}`).classList.add('selected'); // Save state state[stateKey] = value; // Enable next button document.getElementById(btnId).disabled = false; } // ═══════════════════════════════════════════════════════════ // NAVIGATION // ═══════════════════════════════════════════════════════════ function goTo(step) { // Hide all panels document.querySelectorAll('.step-panel').forEach(p => p.classList.add('d-none')); document.getElementById('step' + step).classList.remove('d-none'); state.step = step; updateProgress(step); window.scrollTo({ top: 0, behavior: 'smooth' }); } function updateProgress(step) { for (let i = 1; i <= 4; i++) { const circle = document.getElementById('sc' + i); const label = document.getElementById('sl' + i); circle.classList.remove('active','done'); label.classList.remove('active','done'); if (i '; label.classList.add('done'); } else if (i === step){ circle.classList.add('active'); circle.innerHTML = i; label.classList.add('active'); } else { circle.innerHTML = i; } if (i { const s = mat.scores; const score = (s[state.branche] || 0) + (s[state.umgebung] || 0) + (s[state.funktion] || 0); return { key, score }; }).sort((a, b) => b.score - a.score); } // ═══════════════════════════════════════════════════════════ // RESULT // ═══════════════════════════════════════════════════════════ function showResult() { const ranked = scoreAll(); const maxScore = ranked[0].score; // Summary pills const labels = { branche: BRANCHEN.find(x => x.id === state.branche), umgebung: UMGEBUNGEN.find(x => x.id === state.umgebung), funktion: FUNKTIONEN.find(x => x.id === state.funktion), }; document.getElementById('summaryPills').innerHTML = ` ${labels.branche.label.replace(/&/g,'&')} ${labels.umgebung.label.replace(/&/g,'&')} ${labels.funktion.label.replace(/&/g,'&')} `; // Result cards (top 3) const badges = [ { cls: 'badge-top', txt: 'Empfohlen' }, { cls: 'badge-alt', txt: 'Alternative' }, { cls: 'badge-opt', txt: 'Option' }, ]; const gruppeColors = { 'Stahl': { bg: '#e8ecf2', color: '#0d2d5e' }, 'Edelstahl': { bg: '#dbeafe', color: '#1a4d8f' }, 'Kupfer': { bg: '#fef3e2', color: '#8b4513' }, 'Aluminium': { bg: '#f0f0f0', color: '#444' }, }; document.getElementById('resultGrid').innerHTML = ranked.slice(0, 3).map(({ key, score }, i) => { const mat = MATERIALS[key]; const pct = Math.round((score / maxScore) * 100); const gc = gruppeColors[mat.gruppe] || { bg: '#eee', color: '#333' }; return ` ${badges[i].txt} ${mat.name} W.-Nr. ${mat.wknr} · ${mat.staerke} ${mat.gruppe} Übereinstimmung ${pct}% Vorteile ${mat.vorteile.map(v => `${v}`).join('')} Hinweise ${mat.hinweise.map(h => `${h}`).join('')} Norm: ${mat.norm} Beschichtung: ${mat.beschichtung} `; }).join(''); // Comparison table – all 10 materials, grouped, ranked by score // Group order for display const groupOrder = ['Stahl', 'Edelstahl', 'Kupfer', 'Aluminium']; const byGroup = {}; ranked.forEach(({ key, score }) => { const g = MATERIALS[key].gruppe; if (!byGroup[g]) byGroup[g] = []; byGroup[g].push({ key, score }); }); let tableHTML = ''; groupOrder.forEach(gruppe => { if (!byGroup[gruppe]) return; const gc = gruppeColors[gruppe] || { bg: '#eee', color: '#333' }; // group header row tableHTML += ` ${gruppe} `; byGroup[gruppe].forEach(({ key, score }, idx) => { const mat = MATERIALS[key]; const t = mat.table; const pct = Math.round((score / maxScore) * 100); const isTop = idx === 0 && gruppe === MATERIALS[ranked[0].key].gruppe && ranked[0].key === key; tableHTML += ` ${mat.name} ${mat.wknr} ${mat.gruppe} ${mat.norm} ${mat.staerke} ${t.korrosion} ${t.leitf} ${t.feder} ${t.kosten} `; }); }); document.getElementById('compareBody').innerHTML = tableHTML; goTo(4); // Animate bars after render setTimeout(() => { document.querySelectorAll('.match-bar-fill').forEach(bar => { bar.style.width = bar.dataset.target + '%'; }); }, 200); } // ═══════════════════════════════════════════════════════════ // RESET // ═══════════════════════════════════════════════════════════ function resetTool() { state = { branche: null, umgebung: null, funktion: null, step: 1 }; document.querySelectorAll('.option-card').forEach(c => c.classList.remove('selected')); ['btn1Next','btn2Next','btn3Next'].forEach(id => document.getElementById(id).disabled = true); goTo(1); }

Stanz- & Umformtechnik

Verbindungs-, Feder- & Befestigungstechnik

Elektrotechnik, E-Mobility & Hybridlösungen

Engineering & Technik

Technologie & Fertigung

Veredelung

Logistik & Standards

In welcher Branche wird das Bauteil eingesetzt?

Welchen Umgebungsbedingungen ist das Bauteil ausgesetzt?

Welche Hauptfunktion hat das Bauteil?

Optimale Materialien für Ihr Bauteil

Materialvergleich auf einen Blick

Zeichnung vorhanden? Jetzt kostenloses Angebot anfragen.