Files
molzi3d-next/backup/content/pages/tools-filament-rechner.html
Klaus Molzberger 35b4ddde00 feat: molzi3d.de v1.0.0 — Komplettes Redesign mit Next.js 16
- WordPress durch Next.js 16 + Tailwind CSS v4 + Framer Motion ersetzt
- 44 Guides + 15 Seiten aus WordPress migriert (HTML -> Markdown)
- Emerald Design-System mit Light/Dark Mode Toggle
- Sidebar-First Navigation (Dokumentations-Stil)
- Difficulty-Badges, Lesezeit, verwandte Guides
- Statischer Export fuer Plesk-Hosting
- WordPress-DB Backup gesichert (6.2 MB)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-29 01:37:57 +01:00

9 lines
14 KiB
HTML

---
title: "Filament-Rechner"
slug: "tools-filament-rechner"
type: page
excerpt: ""
---
<!-- wp:html -->\n<style>\n\n@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Exo+2:wght@300;400;500;600;700&display=swap');\n\n:root {\n --bg: #07090F;\n --s1: #0B0E1A;\n --s2: #101525;\n --bd: #1A2140;\n --txt: #DCE4F5;\n --muted: #5A6A90;\n --acc: #00AE42;\n --acc2: #FF6B35;\n --acc-dim: rgba(0,174,66,0.1);\n --f-hud: 'Orbitron', monospace;\n --f-body: 'Exo 2', sans-serif;\n}\n\n\n/* wrapper removed */\n/* wrapper child reset removed */\n/* wrapper a reset removed */\n\n/* Scanline overlay */\n/* wrapper scanline removed */\n\n/* Grid bg */\n.v2-grid-bg {\n position:absolute; inset:0; pointer-events:none;\n background:\n repeating-linear-gradient(90deg, rgba(0,174,66,0.025) 0, transparent 1px, transparent 60px, rgba(0,174,66,0.025) 60px),\n repeating-linear-gradient(0deg, rgba(0,174,66,0.015) 0, transparent 1px, transparent 60px, rgba(0,174,66,0.015) 60px);\n}\n\n/* NAV */\n.v2-nav {\n position:fixed; top:0; left:0; right:0; z-index:1000;\n background:rgba(7,9,15,0.92); backdrop-filter:blur(16px);\n border-bottom:1px solid var(--bd);\n display:flex; align-items:center; justify-content:space-between;\n padding:0 clamp(1rem,4vw,2.5rem); height:52px;\n}\n.v2-nav-logo {\n font-family:var(--f-hud); font-size:1rem; font-weight:700;\n letter-spacing:0.12em; color:var(--txt);\n}\n.v2-nav-logo span { color:var(--acc); }\n.v2-nav-tag {\n font-family:var(--f-hud); font-size:0.5rem; font-weight:400;\n letter-spacing:0.15em; color:var(--acc); display:block;\n margin-top:1px; opacity:0.7;\n}\n.v2-nav-links { display:flex; gap:0; list-style:none; }\n.v2-nav-links li a {\n display:block; padding:0 0.8rem;\n font-family:var(--f-hud); font-size:0.55rem; font-weight:400;\n letter-spacing:0.1em; text-transform:uppercase; color:var(--muted);\n line-height:52px; transition:color 0.15s;\n}\n.v2-nav-links li a:hover { color:var(--acc); cursor:pointer; }\n.v2-nav-cta {\n font-family:var(--f-hud); font-size:0.55rem; font-weight:700;\n letter-spacing:0.12em; text-transform:uppercase;\n background:var(--acc); color:#000;\n padding:0.4rem 0.9rem;\n clip-path:polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);\n transition:opacity 0.15s; cursor:pointer;\n}\n.v2-nav-cta:hover { opacity:0.85; }\n@media(max-width:860px){ .v2-nav-links { display:none; } }\n\n/* BUTTONS */\n.v2-btn {\n font-family:var(--f-hud); font-size:0.6rem; font-weight:700;\n letter-spacing:0.14em; text-transform:uppercase; cursor:pointer;\n display:inline-block; transition:opacity 0.15s; white-space:nowrap;\n clip-path:polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);\n padding:0.7rem 1.8rem;\n}\n.v2-btn-prim { background:var(--acc); color:#000; }\n.v2-btn-prim:hover { opacity:0.85; }\n.v2-btn-sec {\n border:1px solid var(--bd); color:var(--muted); background:transparent;\n clip-path:polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);\n}\n.v2-btn-sec:hover { border-color:var(--acc); color:var(--acc); }\n\n/* HUD LABELS */\n.v2-label {\n font-family:var(--f-hud); font-size:0.55rem; font-weight:700;\n letter-spacing:0.18em; text-transform:uppercase; color:var(--acc);\n display:inline-flex; align-items:center; gap:0.5rem;\n}\n.v2-label::before { content:'['; opacity:0.6; }\n.v2-label::after { content:']'; opacity:0.6; }\n\n/* SECTION DIVIDER */\n.v2-div {\n height:1px; background:var(--bd);\n position:relative; margin:0;\n}\n.v2-div::after {\n content:''; position:absolute; left:0; top:-1px;\n width:60px; height:1px; background:var(--acc);\n}\n\n/* FOOTER */\n.v2-footer {\n display:grid; grid-template-columns:1fr 1fr; align-items:center;\n padding:1.5rem clamp(1rem,4vw,2.5rem); border-top:1px solid var(--bd);\n}\n.v2-footer-brand {\n font-family:var(--f-hud); font-size:0.85rem; letter-spacing:0.08em;\n color:var(--muted);\n}\n.v2-footer-brand span { color:var(--acc); }\n.v2-footer-links {\n display:flex; gap:1.5rem; justify-content:flex-end; list-style:none;\n}\n.v2-footer-links li a {\n font-family:var(--f-hud); font-size:0.5rem; font-weight:400;\n letter-spacing:0.1em; text-transform:uppercase; color:var(--muted);\n transition:color 0.15s;\n}\n.v2-footer-links li a:hover { color:var(--acc); }\n@media(max-width:600px){\n .v2-footer { grid-template-columns:1fr; gap:1rem; }\n .v2-footer-links { justify-content:flex-start; }\n}\n\n/* CANVAS */\n#v2-canvas {\n position:absolute; inset:0; width:100%; height:100%;\n pointer-events:none; opacity:0.4;\n}\n@media(prefers-reduced-motion:reduce){\n #v2-canvas { display:none; }\n .v2-ticker-inner { animation:none !important; }\n}\n\n.v2-wrap { padding-top:52px; }\n.v2-ph {\n position:relative; overflow:hidden;\n padding:calc(52px + 4rem) clamp(1rem,6vw,4rem) 3rem;\n border-bottom:1px solid var(--bd);\n}\n/* ph-content standardized */\n.v2-ph h1{font-family:var(--f-hud);font-size:clamp(2rem,5vw,3.5rem);font-weight:900;letter-spacing:0.04em;line-height:0.95;color:var(--txt);margin:0.5rem 0;}\n.v2-ph p{color:var(--muted);font-weight:300;font-size:0.95rem;max-width:560px;margin-top:0.75rem;}\n.v2-content-area { max-width:860px; margin:0 auto; padding:clamp(2rem,4vw,3rem) clamp(1.5rem,4vw,2.5rem); }\n.v2-calc-box {\n background:var(--s1); border:1px solid var(--bd);\n padding:2.5rem; position:relative; overflow:hidden;\n}\n.v2-calc-box::before {\n content:''; position:absolute; top:0; left:0; right:0; height:2px;\n background:linear-gradient(90deg, var(--acc), transparent);\n}\n.v2-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1.5rem; }\n.v2-field { display:flex; flex-direction:column; gap:0.5rem; }\n.v2-field label {\n font-family:var(--f-hud); font-size:0.5rem; font-weight:700;\n letter-spacing:0.14em; text-transform:uppercase; color:var(--muted);\n}\n.v2-field input {\n background:var(--s2); border:1px solid var(--bd);\n padding:0.85rem 1rem; color:var(--txt);\n font-family:var(--f-hud); font-size:0.9rem;\n outline:none; transition:border-color 0.2s;\n clip-path:polygon(4px 0%, 100% 0%, calc(100% - 4px) 100%, 0% 100%);\n}\n.v2-field input:focus { border-color:var(--acc); }\n.v2-field input::placeholder { color:var(--muted); font-size:0.8rem; }\n.v2-calc-btn {\n width:100%; padding:1rem;\n background:var(--acc); color:#000;\n font-family:var(--f-hud); font-size:0.65rem; font-weight:700;\n letter-spacing:0.16em; text-transform:uppercase; cursor:pointer; border:none;\n clip-path:polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);\n transition:opacity 0.15s; margin-bottom:1.5rem;\n}\n.v2-calc-btn:hover { opacity:0.85; }\n.v2-result {\n background:var(--acc-dim); border:1px solid rgba(0,174,66,0.2);\n padding:1.8rem; display:none;\n}\n.v2-result-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }\n.v2-result-item .v2-result-lbl {\n font-family:var(--f-hud); font-size:0.5rem; font-weight:700;\n letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); margin-bottom:0.4rem;\n}\n.v2-result-item .v2-result-val {\n font-family:var(--f-hud); font-size:2rem; font-weight:900; color:var(--acc);\n}\n.v2-result-item .v2-result-val.blue { color:#58a6ff; }\n.v2-result-total {\n grid-column:1/-1; padding-top:1.2rem; border-top:1px solid var(--bd);\n margin-top:0.5rem;\n}\n.v2-result-total .v2-result-lbl { color:var(--muted); }\n.v2-result-total .v2-result-val { font-size:2.4rem; color:var(--acc); }\n.v2-sec-heading {\n font-family:var(--f-hud); font-size:clamp(1.2rem,2.5vw,1.8rem);\n font-weight:700; letter-spacing:0.04em; color:var(--txt);\n margin:2.5rem 0 1.5rem;\n}\n.v2-price-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1px; background:var(--bd); }\n.v2-pcard {\n background:var(--bg); padding:1.2rem; position:relative; overflow:hidden;\n transition:background 0.15s;\n}\n.v2-pcard::before {\n content:''; position:absolute; top:0; left:0; right:0; height:2px;\n background:var(--acc); transform:scaleX(0); transform-origin:left; transition:transform 0.25s;\n}\n.v2-pcard:hover { background:var(--s1); }\n.v2-pcard:hover::before { transform:scaleX(1); }\n.v2-pcard-tag {\n font-family:var(--f-hud); font-size:0.48rem; font-weight:700;\n letter-spacing:0.12em; text-transform:uppercase;\n padding:0.18rem 0.55rem; display:inline-block; margin-bottom:0.6rem;\n clip-path:polygon(4px 0%, 100% 0%, calc(100% - 4px) 100%, 0% 100%);\n}\n.v2-pcard h3 { font-family:var(--f-hud); font-size:1.2rem; font-weight:900; color:var(--acc); margin-bottom:0.4rem; }\n.v2-pcard p { font-size:0.78rem; font-weight:300; color:var(--muted); line-height:1.55; }\n@media(max-width:600px){\n .v2-form-grid { grid-template-columns:1fr; }\n .v2-result-grid { grid-template-columns:1fr; }\n .v2-price-grid { grid-template-columns:1fr 1fr; }\n /* v2-ph 80px removed */\n .v2-content-area { padding:1.5rem 1rem; }\n}\n\n</style>\n\n\n<nav class="v2-nav">\n <a href="/" style="display:flex;flex-direction:column;line-height:1;">\n <span class="v2-nav-logo">M0LZI<span>_</span>3D</span>\n <span class="v2-nav-tag">[SYS_BOOT v2.0]</span>\n </a>\n <ul class="v2-nav-links">\n <li><a href="/wissen/">[WISSEN]</a></li>\n <li><a href="/tools-filament-rechner/">[RECHNER]</a></li>\n <li><a href="/resources/">[TOOLS]</a></li>\n <li><a href="/models/">[MODELLE]</a></li>\n <li><a href="/news/">[NEWS]</a></li>\n <li><a href="/showcase/">[SHOWCASE]</a></li>\n <li><a href="/faq/">[FAQ]</a></li>\n </ul>\n <a href="https://chat.whatsapp.com/BxdLHR5JvuXKqLYLLHRmjX" class="v2-nav-cta">JOIN_NETWORK &rarr;</a>\n<button class="v2-hamburger" onclick="this.classList.toggle('open');document.getElementById('v2mm').classList.toggle('open')" aria-label="Menu">\n <span></span><span></span><span></span>\n </button>\n</nav>\n\n<div class="v2-mobile-menu" id="v2mm">\n <a href="/wissen/">[WISSEN]</a>\n <a href="/tools-filament-rechner/">[RECHNER]</a>\n <a href="/resources/">[TOOLS]</a>\n <a href="/models/">[MODELLE]</a>\n <a href="/news/">[NEWS]</a>\n <a href="/showcase/">[SHOWCASE]</a>\n <a href="/faq/">[FAQ]</a>\n <a href="https://chat.whatsapp.com/BxdLHR5JvuXKqLYLLHRmjX" class="v2-mobile-cta">JOIN_NETWORK &rarr;</a>\n</div>\n\n<div class="v2-ph">\n <div class="v2-grid-bg"></div>\n <div style="position:relative;">\n <span class="v2-label">TOOL_MODULE</span>\n <h1>FILAMENT_RECHNER</h1>\n <p>Druckkosten sekundenschnell kalkulieren &mdash; Filament, Strom, Gesamtkosten.</p>\n </div>\n</div>\n<div class="v2-content-area">\n <div class="v2-calc-box">\n <span class="v2-label" style="margin-bottom:1.2rem;display:inline-flex;">KALKULATION</span>\n <div class="v2-form-grid">\n <div class="v2-field"><label>GEWICHT (g)</label><input id="fc-w" type="number" placeholder="z.B. 50" min="0" step="0.1"></div>\n <div class="v2-field"><label>PREIS PRO KG (&euro;)</label><input id="fc-p" type="number" placeholder="z.B. 22" min="0" step="0.01"></div>\n <div class="v2-field"><label>DRUCKZEIT (h) &mdash; OPTIONAL</label><input id="fc-h" type="number" placeholder="z.B. 3.5" min="0" step="0.1"></div>\n <div class="v2-field"><label>STROM &euro;/KWH &mdash; OPTIONAL</label><input id="fc-k" type="number" placeholder="z.B. 0.32" min="0" step="0.01"></div>\n </div>\n <button class="v2-calc-btn" onclick="fcCalc()">[ BERECHNEN_STARTEN ]</button>\n <div id="fc-r" class="v2-result">\n <div class="v2-result-grid">\n <div class="v2-result-item"><div class="v2-result-lbl">[FILAMENT_KOSTEN]</div><div id="fc-rv1" class="v2-result-val">&mdash;</div></div>\n <div class="v2-result-item"><div class="v2-result-lbl">[STROM_KOSTEN]</div><div id="fc-rv2" class="v2-result-val blue">&mdash;</div></div>\n <div class="v2-result-total"><div class="v2-result-lbl">[GESAMT_KOSTEN]</div><div id="fc-rv3" class="v2-result-val">&mdash;</div></div>\n </div>\n </div>\n </div>\n\n <h2 class="v2-sec-heading">// FILAMENT_RICHTWERTE_2026</h2>\n <div class="v2-price-grid">\n <div class="v2-pcard"><span class="v2-pcard-tag tag-e">PLA</span><h3>15&ndash;25 &euro;/kg</h3><p>Einfachstes Material. Bambu, Prusament, eSUN, Polymaker.</p></div>\n <div class="v2-pcard"><span class="v2-pcard-tag tag-s">PETG</span><h3>18&ndash;28 &euro;/kg</h3><p>Robust, feuchtigkeitsresistent. Etwas Stringing bei falschen Settings.</p></div>\n <div class="v2-pcard"><span class="v2-pcard-tag tag-m">TPU</span><h3>22&ndash;38 &euro;/kg</h3><p>Flexibel, langlebig. Direct-Drive Drucker empfohlen.</p></div>\n <div class="v2-pcard"><span class="v2-pcard-tag tag-f">ASA / ABS</span><h3>20&ndash;32 &euro;/kg</h3><p>UV-stabil, hitzefest. Enclosure notwendig.</p></div>\n <div class="v2-pcard"><span class="v2-pcard-tag tag-e">PLA-CF</span><h3>28&ndash;45 &euro;/kg</h3><p>Carbon-verst&auml;rkt, steif und leicht. Geh&auml;rtete D&uuml;se n&ouml;tig.</p></div>\n <div class="v2-pcard"><span class="v2-pcard-tag tag-m">NYLON PA</span><h3>35&ndash;60 &euro;/kg</h3><p>Sehr z&auml;h, geringe Feuchtigkeitstoleranz.</p></div>\n </div>\n</div>\n\n<script>\nfunction fcCalc(){\n var w=parseFloat(document.getElementById('fc-w').value)||0,\n p=parseFloat(document.getElementById('fc-p').value)||0,\n h=parseFloat(document.getElementById('fc-h').value)||0,\n k=parseFloat(document.getElementById('fc-k').value)||0,\n r=document.getElementById('fc-r');\n if(!w||!p){alert('[ERROR] Bitte Gewicht und Preis eingeben.');return;}\n var fc=(w/1000)*p,ec=(h&&k)?(h*0.2*k):0,total=fc+ec;\n document.getElementById('fc-rv1').textContent=fc.toFixed(2)+' €';\n document.getElementById('fc-rv2').textContent=ec>0?ec.toFixed(2)+' €':'[N/A]';\n document.getElementById('fc-rv3').textContent=total.toFixed(2)+' €';\n r.style.display='block';\n}\ndocument.addEventListener('keydown',function(e){if(e.key==='Enter')fcCalc();});\n</script>\n\n<footer class="v2-footer">\n <div class="v2-footer-brand">M0LZI<span>_</span>3D &copy; 2026</div>\n <ul class="v2-footer-links">\n <li><a href="https://chat.whatsapp.com/BxdLHR5JvuXKqLYLLHRmjX">WHATSAPP</a></li>\n <li><a href="/impressum/">IMPRESSUM</a></li>\n <li><a href="/datenschutz/">DATENSCHUTZ</a></li>\n </ul>\n</footer>\n\n<!-- /wp:html -->