/* ARBEITSSCHIRM — Modelle (5 echte Modelle, gestaffelt nach Klasse) */ (function () { const { Badge, SectionHeading } = window.ABIndustrieServiceDesignSystem_89df89; const { Icon } = window.ABIcons; const FLYER = 'https://www.ab-industrie.de/mediafiles/Sonstiges/Flyer%202025%20NEU.pdf'; // Premiumklasse — die Oberklasse (bis zu 36 Streben). const PREMIUM = [ { id: 'worker', name: 'WORKER', badge: 'Bestseller', tone: 'accent', flamm: false, flyer: FLYER, benefit: 'Der meistverkaufte Arbeitsschirm: leicht, schnell gesetzt, baustellenrobust — der Allrounder für Monteur- und Serviceteams am Arbeitspunkt.', variants: { label: '5 Ausführungen', swatches: [{ n: 'Rot', c: '#B11E2A' }, { n: 'Olive', c: '#6E7042' }, { n: 'Teal', c: '#1C6E6E' }, { n: 'Fußball', design: 'football' }, { n: 'Baseball', design: 'baseball' }] }, specs: [ ['Durchmesser', 'Ø 2,5 m'], ['Gestänge', 'Stahl-Grundstange'], ['Streben', '36 Streben'], ['Windstabil', 'bis 100 km/h'], ], }, { id: 'pipeliner', name: 'PIPELINER', badge: 'Für die Naht', tone: 'ink', flamm: true, flyer: FLYER, benefit: 'Schweißen, Trennen, Schleifen: die schwer entflammbare Bespannung steckt Funkenflug weg — beide Größen flammhemmend.', variants: { label: '2 Ausführungen', swatches: [{ n: 'Schwarz · Ø 2,5 m', c: '#1a1a1a' }, { n: 'Blau · Pipeliner Heavy Ø 3,0 m', c: '#1F4E8C' }] }, specs: [ ['Durchmesser', 'Ø 2,5 · 3,0 m'], ['Gestänge', 'Stahl-Grundstange'], ['Streben', '36 Streben'], ['Windstabil', 'bis 100 km/h'], ], }, { id: 'heavy', name: 'HEAVY', badge: 'Maximale Fläche', tone: 'ink', flamm: false, flyer: FLYER, benefit: 'Ø 3,0 m über Mehrpersonen-Teams und große Werkstücke. Stahl-Grundstange mit Verlängerungsrohr — schwer entflammbar als Pipeliner Heavy.', variants: { label: '3 Farben', swatches: [{ n: 'Grau', c: '#6B6B6B' }, { n: 'Khaki', c: '#9A8B5E' }, { n: 'Orange', c: '#E8702A' }] }, specs: [ ['Durchmesser', 'Ø 3,0 m'], ['Gestänge', 'Stahl-Grundstange'], ['Streben', '36 Streben'], ['Windstabil', 'bis 65 km/h'], ], }, ]; // Verstärkt & Sonderform — darunter angesiedelt. const WEITERE = [ { id: 'verstaerkt', name: 'Verstärkte Ausführung', badge: 'Deutsche Fertigung', tone: 'steel', flamm: true, benefit: 'Aluminium-Vierkantprofile mit belastbaren Glasfiber-Strebenenden — spürbar robuster, schwer entflammbar, deutsche Fertigung. Rund in Ø 2,5 und 3,0 m.', endhuelsen: true, specs: [ ['Form', 'Rund · Ø 2,5 · 3,0 m'], ['Profile', 'Aluminium-Vierkant'], ['Strebenenden', 'Glasfiber, belastbar'], ['Fertigung', 'Deutschland'], ], }, { id: 'rechteck', name: 'Rechteckschirm', badge: 'Eckig & lang', tone: 'steel', flamm: true, benefit: 'Rechteckige Fläche für lange Werkstücke und eckige Aufstellpunkte. Einstiegsausführung mit Paragonstreben, schwer entflammbar — auf Wunsch mit Firmenlogo.', endhuelsen: true, endhuelsenTip: 'Bei der Rechteckform besonders sinnvoll: Die Last auf die Strebenenden ist ungleichmäßiger als beim runden Schirm — die Hülsen entlasten genau die kritischen Stellen.', specs: [ ['Maße', '3,0×2,0 · 2,5×2,5 m'], ['Form', 'Rechteckig'], ['Streben', 'Paragonstreben'], ['Extra', 'Logo auf Wunsch'], ], }, ]; function BespannungChip({ on }) { const base = { display: 'inline-flex', alignItems: 'center', gap: 6, padding: '5px 11px', borderRadius: 'var(--radius-pill)', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 11, letterSpacing: '0.06em', textTransform: 'uppercase' }; if (on) { return ( Schwer entflammbar ); } return ( Wetterfest · UV-stabil ); } // Design-Ausführungen als kleine SVG-Symbole (Lucide hat keine passenden). const DESIGNS = { football: ( ), baseball: ( ), }; function Variants({ v }) { return (
{v.label} {v.swatches && ( s.n).join(', ')} style={{ display: 'inline-flex', gap: 5 }}> {v.swatches.map((s) => ( {s.design ? DESIGNS[s.design] : null} ))} )} {v.extra && + {v.extra.join(' · ')}} {v.sizes && {v.sizes.join(' · ')}}
); } function Endhuelsen({ tip }) { const OPTS = [ { name: 'Ohne Endhülsen', tag: 'Standard', brand: false, note: 'Strebenenden direkt in den Gewebelaschen — wirtschaftlich für gelegentlichen Einsatz oder als Reservegerät.' }, { name: 'Mit Endhülsen', tag: 'Premium', brand: true, note: 'Metallhülse an jeder Strebe verstärkt die Kraftübertragung — die Bespannung hält länger, der Schirm bleibt in Form.' }, ]; return (
Mit oder ohne Endhülsen
{OPTS.map((o) => (
{o.name} {o.tag}

{o.note}

))}
{tip && (

{tip}

)}
); } function ModellCard({ m, rail }) { const [h, setH] = React.useState(false); const scrollAngebot = (e) => { e.preventDefault(); const el = document.querySelector('#angebot'); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 60, behavior: 'smooth' }); }; const ctaStyle = { marginTop: 'auto', paddingTop: 'var(--space-4)', display: 'inline-flex', alignItems: 'center', gap: 7, fontFamily: 'var(--font-display)', fontSize: 'var(--fs-sm)', fontWeight: 700, letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--brand)', textDecoration: 'none' }; const arrow = ; return (
setH(true)} onMouseLeave={() => setH(false)} style={{ display: 'flex', flexDirection: 'column', background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderTop: rail ? '4px solid ' + rail : '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', overflow: 'hidden', boxShadow: h ? 'var(--shadow-lg)' : 'var(--shadow-sm)', transform: h ? 'translateY(-4px)' : 'none', transition: 'transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out)' }}>
{m.badge}

{m.name}

{m.benefit}

{m.variants && }
{m.specs.map(([k, v], i) => { const line = i ? '1px solid var(--border-subtle)' : 'none'; return (
{k}
{v}
); })}
{m.endhuelsen && } {m.flyer ? ( Flyer ansehen (PDF) {arrow} ) : ( Anfragen {arrow} )}
); } function TierLabel({ icon, title, note, mt }) { return (
{title}
{note}
); } // Foto-Mosaik rechts neben der Überschrift — 3 Kacheln, je versetzt // crossfadend. Die Bilder werden aus images/mosaik/ entdeckt (01.jpg, // 02.jpg, …) — du kannst jederzeit beliebig viele hinzufügen. function MosaicTile({ srcs, delay, interval }) { const [i, setI] = React.useState(0); const [hovered, setHovered] = React.useState(false); const hoverRef = React.useRef(false); React.useEffect(() => { setI(0); const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; if (reduce || srcs.length <= 1) return; let id; const start = setTimeout(() => { id = setInterval(() => { if (!hoverRef.current) setI((n) => (n + 1) % srcs.length); }, interval); }, delay); return () => { clearTimeout(start); if (id) clearInterval(id); }; }, [srcs.length, delay, interval]); const advance = () => setI((n) => (n + 1) % srcs.length); return (
{ hoverRef.current = true; setHovered(true); }} onMouseLeave={() => { hoverRef.current = false; setHovered(false); }} style={{ position: 'relative', borderRadius: 'var(--radius-md)', overflow: 'hidden', boxShadow: 'var(--shadow-md)', background: 'var(--ink-900)' }}> {srcs.length === 0 && ( images/mosaik/ )} {srcs.map((src, idx) => ( Baustellenschirm im Einsatz ))} {srcs.length > 1 && ( )}
); } function PhotoMosaic() { // Entdeckt fortlaufend nummerierte Bilder in images/mosaik/ (01.jpg, 02.jpg …), // akzeptiert auch unpadded (1.jpg). Stoppt bei der ersten Lücke. const [imgs, setImgs] = React.useState(null); React.useEffect(() => { let cancelled = false; const pad = (n) => String(n).padStart(2, '0'); const probeOne = (n) => new Promise((res) => { const cands = ['images/mosaik/' + pad(n) + '.jpg', 'images/mosaik/' + n + '.jpg']; const tryC = (k) => { if (k >= cands.length) return res(null); const im = new Image(); im.onload = () => res(cands[k]); im.onerror = () => tryC(k + 1); im.src = cands[k]; }; tryC(0); }); const found = []; const step = (n) => { if (n > 60) { if (!cancelled) setImgs(found); return; } probeOne(n).then((path) => { if (path) { found.push(path); step(n + 1); } else if (!cancelled) setImgs(found); }); }; step(1); return () => { cancelled = true; }; }, []); const list = imgs || []; const tiles = [[], [], []]; list.forEach((src, idx) => { tiles[idx % 3].push(src); }); return (
{tiles.map((srcs, ti) => )}
); } function Modelle() { const ref = React.useRef(null); // Höhenausgleich der Beschreibungs-Blöcke je Raster — hält Name/Beschreibung/ // Farben/Tabelle bei JEDER Breite auf gleicher Höhe (responsiv). React.useLayoutEffect(() => { const root = ref.current; if (!root) return; const ROWS = ['.ab-mcard-chip', '.ab-mcard-benefit', '.ab-mcard-variants']; const equalize = () => { root.querySelectorAll('.ab-modell-grid, .ab-modell-grid2').forEach((grid) => { ROWS.forEach((sel) => { const els = grid.querySelectorAll(sel); els.forEach((el) => { el.style.minHeight = ''; }); let max = 0; els.forEach((el) => { if (el.offsetHeight > max) max = el.offsetHeight; }); els.forEach((el) => { el.style.minHeight = max + 'px'; }); }); }); }; equalize(); let ro = null; if (window.ResizeObserver) { ro = new ResizeObserver(equalize); ro.observe(root); } window.addEventListener('resize', equalize); return () => { if (ro) ro.disconnect(); window.removeEventListener('resize', equalize); }; }, []); return (
Die Premiumklasse — Worker, Heavy und die beiden Pipeliner. Schwere Bauart für die härtesten Einsätze: 36 Streben gibt's nur hier, das macht sie windstabil — rund 12 kg in Ø 2,5 m, 15,5 kg in Ø 3,0 m. Wo Funken fliegen, hält die schwer entflammbare Bespannung dagegen. Gebaut, um zu bleiben.} />
{PREMIUM.map((m) => )}
{WEITERE.map((m) => )}
); } window.ABArbeit = Object.assign(window.ABArbeit || {}, { Modelle }); })();