<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bürk-Kauffmann Historie</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif; background: #fafafa; color: #1a1a1a; overflow-x: hidden; line-height: 1.6; } .slideshow-container { position: relative; max-width: 1400px; margin: 0 auto; background: #ffffff; border-radius: 0; overflow: hidden; min-height: 100vh; } .slides-wrapper { display: flex; width: 1600%; transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); min-height: 100vh; } .slide { flex: 0 0 6.25%; padding: 8rem 6rem; text-align: left; min-height: 100vh; position: relative; background: #ffffff; display: flex; flex-direction: column; justify-content: center; } .slide-content-wrapper { max-width: 900px; margin: 0 auto; width: 100%; } .slide-meta { display: flex; align-items: center; gap: 2rem; margin-bottom: 3rem; opacity: 0.7; } .slide-number { font-size: 0.85rem; font-weight: 500; color: #dc2626; text-transform: uppercase; letter-spacing: 2px; } .slide-divider { width: 60px; height: 1px; background: #dc2626; } .slide-year { font-size: 7rem; font-weight: 200; color: #dc2626; line-height: 0.9; margin-bottom: 2rem; letter-spacing: -2px; } .slide-title { font-size: 2.5rem; color: #1a1a1a; margin-bottom: 3rem; font-weight: 300; line-height: 1.2; letter-spacing: -0.5px; } .slide-description { font-size: 1.1rem; line-height: 1.8; color: #4a4a4a; font-weight: 300; max-width: 700px; } .highlight { color: #dc2626; font-weight: 400; } .navigation { position: fixed; bottom: 4rem; left: 50%; transform: translateX(-50%); display: flex; gap: 1rem; align-items: center; z-index: 100; } .nav-btn { background: #1a1a1a; color: white; border: none; padding: 1rem 2rem; border-radius: 50px; cursor: pointer; font-size: 0.9rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-weight: 400; letter-spacing: 0.5px; } .nav-btn:hover { background: #dc2626; transform: translateY(-2px); } .nav-btn:disabled { background: #e5e5e5; color: #9ca3af; cursor: not-allowed; transform: none; } .dots-container { display: flex; gap: 12px; margin: 0 2rem; } .dot { width: 8px; height: 8px; border-radius: 50%; background: #e5e5e5; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .dot.active { background: #dc2626; transform: scale(1.5); } .progress-indicator { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: #f5f5f5; z-index: 100; } .progress-bar { height: 100%; background: #dc2626; transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); width: 0; } .slide-counter { position: fixed; top: 3rem; right: 4rem; color: #9ca3af; font-size: 0.9rem; font-weight: 300; z-index: 100; letter-spacing: 1px; } .autoplay-control { position: fixed; top: 3rem; left: 4rem; z-index: 100; } .autoplay-btn { background: transparent; border: 1px solid #e5e5e5; color: #4a4a4a; padding: 0.75rem 1.5rem; border-radius: 50px; cursor: pointer; font-size: 0.85rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-weight: 400; letter-spacing: 0.5px; } .autoplay-btn:hover { border-color: #dc2626; color: #dc2626; } .milestone-slide { background: linear-gradient(135deg, #fefefe 0%, #f9f9f9 100%); } .intro-slide { background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%); color: #ffffff; } .intro-slide .slide-year { color: #ffffff; } .intro-slide .slide-title { color: #ffffff; } .intro-slide .slide-description { color: #d1d5db; } .intro-slide .highlight { color: #dc2626; } @media screen and (max-width: 768px) { .slides-wrapper { width: 1600%; } .slide { flex: 0 0 6.25%; padding: 4rem 2rem; text-align: center; } .slide-year { font-size: 4rem; } .slide-title { font-size: 1.8rem; } .slide-description { font-size: 1rem; } .navigation { bottom: 2rem; flex-direction: column; gap: 1rem; } .dots-container { order: -1; margin: 0; } .slide-counter { top: 2rem; right: 2rem; } .autoplay-control { top: 2rem; left: 2rem; } .slide-meta { justify-content: center; } } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 3rem; margin: 4rem 0; } .stat-item { text-align: center; } .stat-number { font-size: 3rem; font-weight: 200; color: #dc2626; display: block; margin-bottom: 0.5rem; } .stat-label { font-size: 0.9rem; color: #6b7280; font-weight: 300; text-transform: uppercase; letter-spacing: 1px; } .slide-visual { position: absolute; right: 6rem; top: 50%; transform: translateY(-50%); opacity: 0.03; font-size: 20rem; font-weight: 900; color: #dc2626; z-index: 1; pointer-events: none; } .slide-content-wrapper { position: relative; z-index: 2; } .timeline-indicator { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, transparent 0%, #dc2626 50%, transparent 100%); opacity: 0.3; } </style> </head> <body> <div class="progress-indicator"> <div class="progress-bar" id="progressBar"></div> </div> <div class="slideshow-container"> <div class="slide-counter" id="slideCounter">01 / 16</div> <div class="autoplay-control"> <button class="autoplay-btn" id="autoplayBtn">Pause</button> </div> <div class="slides-wrapper" id="slidesWrapper"> <!-- Slide 1: Intro --> <div class="slide active intro-slide"> <div class="timeline-indicator"></div> <div class="slide-content-wrapper"> <div class="slide-meta"> <div class="slide-number">Willkommen</div> <div class="slide-divider"></div> </div> <div class="slide-year">125+</div> <div class="slide-title">Jahre Tradition & Innovation</div> <div class="slide-description"> Entdecken Sie die beeindruckende Geschichte der <span class="highlight">Bürk-Kauffmann GmbH</span> – von der Gründung 1897 bis heute. Eine Reise durch mehr als ein Jahrhundert voller Innovationen, Herausforderungen und Erfolge. <div class="stats-grid"> <div class="stat-item"> <span class="stat-number">1897</span> <div class="stat-label">Gründungsjahr</div> </div> <div class="stat-item"> <span class="stat-number">100+</span> <div class="stat-label">Mitarbeiter</div> </div> <div class="stat-item"> <span class="stat-number">40</span> <div class="stat-label">Tankstellen</div> </div> <div class="stat-item"> <span class="stat-number">4</span> <div class="stat-label">Generationen</div> </div> </div> </div> </div> </div> <!-- Slide 2: 1897 --> <div class="slide milestone-slide"> <div class="timeline-indicator"></div> <div class="slide-visual">1897</div> <div class="slide-content-wrapper"> <div class="slide-meta"> <div class="slide-number">Die Anfänge</div> <div class="slide-divider"></div> </div> <div class="slide-year">1897</div> <div class="slide-title">Firmengründung in Schwenningen</div> <div class="slide-description"> Das Unternehmen wurde durch den <span class="highlight">Kolonialwarengroßhändler Johannes Kauffmann</span> in Schwenningen am Neckar gegründet. Erste Geschäftsverbindungen zur D.A.P.G (Deutsch-amerikanische-Petroleum-Gesellschaft) wurden geknüpft, um den Bezirk und die Fabriken im näheren Umkreis mit <span class="highlight">Erdöl (Petroleum)</span> und Reinigungsbenzinen zu versorgen.<br><br> Die Anlieferung erfolgte in Kesselwagen, die am Bahnhof Schwenningen in Fässer und Kannen abgefüllt wurden. </div> </div> </div> <!-- Slide 3: 1900 --> <div class="slide"> <div class="timeline-indicator"></div> <div class="slide-visual">1900</div> <div class="slide-content-wrapper"> <div class="slide-meta"> <div class="slide-number">Neue Ära</div> <div class="slide-divider"></div> </div> <div class="slide-year">1900</div> <div class="slide-title">Zeitalter der Motorisierung</div> <div class="slide-description"> Das <span class="highlight">Zeitalter der Motorisierung</span> wurde eingeläutet und mit ihm der einhergehende Bedarf nach Motorenbenzin. Dies markierte den Beginn einer neuen Ära für das Unternehmen und die gesamte Branche. </div> </div> </div> <!-- Slide 4: 1922 --> <div class="slide milestone-slide"> <div class="timeline-indicator"></div> <div class="slide-visual">1922</div> <div class="slide-content-wrapper"> <div class="slide-meta"> <div class="slide-number">Generationswechsel</div> <div class="slide-divider"></div> </div> <div class="slide-year">1922</div> <div class="slide-title">Übernahme durch Familie Bürk</div> <div class="slide-description"> Der Firmengründer <span class="highlight">Johannes Kauffmann</span> starb mit nur 51 Jahren. Seine Tochter <span class="highlight">Mathilde geb. Kauffmann</span> übernahm zusammen mit ihrem Ehemann <span class="highlight">Erhard Bürk</span> die Firma, die durch Krieg und Inflation sehr darniederlag.<br><br> 1926 baute die damalige Standard-Oil die <span class="highlight">erste Straßentankstelle</span> in Schwenningen. </div> </div> </div> <!-- Slide 5: 1929 --> <div class="slide"> <div class="timeline-indicator"></div> <div class="slide-visual">1929</div> <div class="slide-content-wrapper"> <div class="slide-meta"> <div class="slide-number">Modernisierung</div> <div class="slide-divider"></div> </div> <div class="slide-year">1929</div> <div class="slide-title">Erste ESSO-Station</div> <div class="slide-description"> Im Zuge der rasch fortschreitenden Motorisierung wurde die <span class="highlight">erste ESSO-Station</span> im hiesigen Raum gebaut. Sie konnte mit Bedienungsraum, Lager, Toilette sowie zwei Fahrbahnen und Überdachung glänzen und wurde 1936 erneuert. </div> </div> </div> <!-- Slide 6: 1945-1948 --> <div class="slide"> <div class="timeline-indicator"></div> <div class="slide-visual">1945</div> <div class="slide-content-wrapper"> <div class="slide-meta"> <div class="slide-number">Wiederaufbau</div> <div class="slide-divider"></div> </div> <div class="slide-year">1945-48</div> <div class="slide-title">Nach dem Krieg</div> <div class="slide-description"> Nach dem Ende des 2. Weltkrieges lag das Unternehmen komplett am Boden. Mehrere <span class="highlight">Bombenvolltreffer</span> hatten das Tanklager in den letzten Kriegstagen komplett zerstört.<br><br> 1948 wurde das bombengeschädigte Lager in der Güterstraße <span class="highlight">neu aufgebaut</span> und in Betrieb genommen. Seit Anfang der 50er Jahre wird Heizöl mit Tankwagen ausgefahren. </div> </div> </div> <!-- Slide 7: 1952 --> <div class="slide milestone-slide"> <div class="timeline-indicator"></div> <div class="slide-visual">1952</div> <div class="slide-content-wrapper"> <div class="slide-meta"> <div class="slide-number">3. Generation</div> <div class="slide-divider"></div> </div> <div class="slide-year">1952</div> <div class="slide-title">Walter Bürk steigt ein</div> <div class="slide-description"> <span class="highlight">Walter Bürk</span> trat nach Abitur und kaufmännischer Ausbildung in die Fußstapfen seines Vaters Erhard Bürk und führte das Unternehmen zusammen mit seinem Vater fort. 1969 übernahm er in der <span class="highlight">3. Generation</span> die Eigenverantwortung für den väterlichen Betrieb. </div> </div> </div> <!-- Slide 8: 1975 --> <div class="slide"> <div class="timeline-indicator"></div> <div class="slide-visual">1975</div> <div class="slide-content-wrapper"> <div class="slide-meta"> <div class="slide-number">Expansion</div> <div class="slide-divider"></div> </div> <div class="slide-year">1975</div> <div class="slide-title">Neues Tanklager</div> <div class="slide-description"> Das ESSO-Tanklager wurde in die <span class="highlight">Neuffenstraße</span> im damals noch ganz neuen Industriegebiet verlegt. Eine Belieferung per Schiene wurde eingerichtet, was die Effizienz und Kapazität erheblich steigerte. </div> </div> </div> <!-- Slide 9: 1986 --> <div class="slide milestone-slide"> <div class="timeline-indicator"></div> <div class="slide-visual">1986</div> <div class="slide-content-wrapper"> <div class="slide-meta"> <div class="slide-number">Durchbruch</div> <div class="slide-divider"></div> </div> <div class="slide-year">1986</div> <div class="slide-title">Größter Mineralölhändler</div> <div class="slide-description"> Bürk-Kauffmann war einer der <span class="highlight">größten Mineralölhändler in Deutschland</span>. Der Jahresumschlag betrug über <span class="highlight">100 Millionen Liter Heizöl</span> und über <span class="highlight">54 Millionen Liter Diesel</span> – ein beeindruckender Meilenstein in der Firmengeschichte. </div> </div> </div> <!-- Slide 10: 1990 --> <div class="slide milestone-slide"> <div class="timeline-indicator"></div> <div class="slide-visual">1990</div> <div class="slide-content-wrapper"> <div class="slide-meta"> <div class="slide-number">4. Generation</div> <div class="slide-divider"></div> </div> <div class="slide-year">1990</div> <div class="slide-title">Johann Bucher steigt ein</div> <div class="slide-description"> Der Großhandelsfachwirt <span class="highlight">Johann Bucher</span>, Schwiegersohn von Walter Bürk, trat in das Unternehmen ein. Im selben Jahr wurde das <span class="highlight">Verwaltungsgebäude</span> in der Neuffenstraße direkt neben dem ESSO-Lager errichtet. </div> </div> </div> <!-- Slide 11: 2000 --> <div class="slide"> <div class="timeline-indicator"></div> <div class="slide-visual">2000</div> <div class="slide-content-wrapper"> <div class="slide-meta"> <div class="slide-number">Jahrtausendwende</div> <div class="slide-divider"></div> </div> <div class="slide-year">2000</div> <div class="slide-title">Energie-Dienstleister</div> <div class="slide-description"> Mit der Jahrtausendwende entwickelte sich Bürk-Kauffmann weiter vom einstigen Heizölhändler zum <span class="highlight">Energie- und Schmierstofflieferanten</span>. Neben Heizöl und Diesel konnte den Kunden nun auch <span class="highlight">Strom und Erdgas</span> angeboten werden.<br><br> Eröffnung der ersten <span class="highlight">LKW-Waschanlage</span> in der Region. </div> </div> </div> <!-- Slide 12: 2001-2007 --> <div class="slide"> <div class="timeline-indicator"></div> <div class="slide-visual">2001</div> <div class="slide-content-wrapper"> <div class="slide-meta"> <div class="slide-number">Spezialisierung</div> <div class="slide-divider"></div> </div> <div class="slide-year">2001-07</div> <div class="slide-title">Schmierstoff-Kompetenz</div> <div class="slide-description"> 2001 wurde eine neue große <span class="highlight">Lagerhalle für Schmierstoffe</span> in Betrieb genommen. In einem speziellen Hochregallager können mehr als <span class="highlight">600 verschiedene Schmierstoffe</span> gelagert werden.<br><br> 2005 wurde Bürk-Kauffmann zum <span class="highlight">offiziellen strategischen Vertriebspartner der ExxonMobil</span> im Bereich Schmierstoffe ernannt. </div> </div> </div> <!-- Slide 13: 2008 --> <div class="slide milestone-slide"> <div class="timeline-indicator"></div> <div class="slide-visual">2008</div> <div class="slide-content-wrapper"> <div class="slide-meta"> <div class="slide-number">Qualität & Zukunft</div> <div class="slide-divider"></div> </div> <div class="slide-year">2008</div> <div class="slide-title">Zertifizierung & 5. Generation</div> <div class="slide-description"> Das Unternehmen zertifizierte sich nach <span class="highlight">ISO 9001 und ISO 14001</span>. <span class="highlight">Dominik Bucher</span>, der Urenkel des Firmengründers, trat nach seiner Ausbildung zum Groß- und Außenhandelskaufmann und seinem Studium zum Automobilen Betriebswirt in die Geschäftsführung ein. </div> </div> </div> <!-- Slide 14: 2011-2018 --> <div class="slide"> <div class="timeline-indicator"></div> <div class="slide-visual">2018</div> <div class="slide-content-wrapper"> <div class="slide-meta"> <div class="slide-number">Wachstum</div> <div class="slide-divider"></div> </div> <div class="slide-year">2011-18</div> <div class="slide-title">Akquisitionen & Jubiläum</div> <div class="slide-description"> Mehrere Unternehmen wurden in die Firmengruppe integriert: <span class="highlight">Gaiser GmbH</span> (2011), <span class="highlight">Heim in Schramberg-Sulgen</span> (2013) und <span class="highlight">Sitzler in Horb-Nordstetten</span> (2014).<br><br> 2018 feierte das Unternehmen sein <span class="highlight">120-jähriges Bestehen</span> und eröffnete die erste Shop-Tankstelle. </div> </div> </div> <!-- Slide 15: Heute --> <div class="slide milestone-slide"> <div class="timeline-indicator"></div> <div class="slide-visual">2025</div> <div class="slide-content-wrapper"> <div class="slide-meta"> <div class="slide-number">Gegenwart</div> <div class="slide-divider"></div> </div> <div class="slide-year">Heute</div> <div class="slide-title">Modernes Energieunternehmen</div> <div class="slide-description"> Die Bürk-Kauffmann GmbH umfasst heute über <span class="highlight">100 Mitarbeiter</span> in den einzelnen Sparten. Das Unternehmen ist <span class="highlight">klimaneutral gestellt</span> und verfügt über einen der modernsten Fuhrparks in der Region.<br><br> Mit <span class="highlight">40 eigenen Tankstellen</span> stärken wir das Tankpool24 Netzwerk flächendeckend. </div> </div> </div> <!-- Slide 16: Ausblick --> <div class="slide intro-slide"> <div class="timeline-indicator"></div> <div class="slide-content-wrapper"> <div class="slide-meta"> <div class="slide-number">Ausblick</div> <div class="slide-divider"></div> </div> <div class="slide-year">Zukunft</div> <div class="slide-title">Tradition trifft Innovation</div> <div class="slide-description"> Mit über <span class="highlight">125 Jahren Erfahrung</span> blicken wir optimistisch in die Zukunft. Als traditionsreiches Familienunternehmen in der 5. Generation verbinden wir bewährte Werte mit innovativen Lösungen für die Energiewelt von morgen.<br><br> <span class="highlight">Beständigkeit, Zuverlässigkeit und Partnerschaft</span> – darauf können unsere Kunden auch in Zukunft vertrauen. </div> </div> </div> <div class="navigation"> <button class="nav-btn" id="prevBtn">← Zurück</button> <div class="dots-container" id="dotsContainer"></div> <button class="nav-btn" id="nextBtn">Weiter →</button> </div> </div> <script> let currentSlide = 0; let autoplayInterval; let isAutoplay = true; const slides = document.querySelectorAll('.slide'); const totalSlides = slides.length; function init() { createDots(); showSlide(0); updateCounter(); updateProgressBar(); startAutoplay(); } function showSlide(n) { if (n >= totalSlides) currentSlide = 0; if (n < 0) currentSlide = totalSlides - 1; const slidesWrapper = document.getElementById('slidesWrapper'); const translateX = -currentSlide * (100 / totalSlides); slidesWrapper.style.transform = `translateX(${translateX}%)`; updateDots(); updateCounter(); updateProgressBar(); } function nextSlide() { currentSlide++; showSlide(currentSlide); } function prevSlide() { currentSlide--; showSlide(currentSlide); } function goToSlide(n) { currentSlide = n; showSlide(currentSlide); } function createDots() { const dotsContainer = document.getElementById('dotsContainer'); for (let i = 0; i < totalSlides; i++) { const dot = document.createElement('span'); dot.className = 'dot'; dot.addEventListener('click', () => goToSlide(i)); dotsContainer.appendChild(dot); } } function updateDots() { const dots = document.querySelectorAll('.dot'); dots.forEach((dot, index) => { dot.classList.toggle('active', index === currentSlide); }); } function updateCounter() { document.getElementById('slideCounter').textContent = `${String(currentSlide + 1).padStart(2, '0')} / ${String(totalSlides).padStart(2, '0')}`; } function updateProgressBar() { const progress = ((currentSlide + 1) / totalSlides) * 100; document.getElementById('progressBar').style.width = progress + '%'; } function startAutoplay() { if (isAutoplay) { autoplayInterval = setInterval(nextSlide, 6000); } } function stopAutoplay() { clearInterval(autoplayInterval); } function toggleAutoplay() { const btn = document.getElementById('autoplayBtn'); if (isAutoplay) { stopAutoplay(); isAutoplay = false; btn.textContent = 'Play'; } else { startAutoplay(); isAutoplay = true; btn.textContent = 'Pause'; } } // Event listeners document.getElementById('nextBtn').addEventListener('click', () => { nextSlide(); stopAutoplay(); isAutoplay = false; document.getElementById('autoplayBtn').textContent = 'Play'; }); document.getElementById('prevBtn').addEventListener('click', () => { prevSlide(); stopAutoplay(); isAutoplay = false; document.getElementById('autoplayBtn').textContent = 'Play'; }); document.getElementById('autoplayBtn').addEventListener('click', toggleAutoplay); document.addEventListener('keydown', (e) => { if (e.key === 'ArrowLeft') prevSlide(); if (e.key === 'ArrowRight') nextSlide(); if (e.key === ' ') { e.preventDefault(); toggleAutoplay(); } }); document.querySelector('.slideshow-container').addEventListener('mouseenter', () => { if (isAutoplay) stopAutoplay(); }); document.querySelector('.slideshow-container').addEventListener('mouseleave', () => { if (isAutoplay) startAutoplay(); }); init(); </script> </body> </html>