Files
hofmann-wintergarten-website/index.html

508 lines
26 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hofmann Wintergarten</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Cookie Banner -->
<div id="cookie-banner" class="cookie-banner hidden">
<div class="cookie-content">
<p>Diese Website verwendet Cookies, um Ihnen die bestmögliche Erfahrung zu bieten. Dazu gehört auch das Laden von externen Inhalten wie dem 3D-Viewer.</p>
<div class="cookie-buttons">
<button id="accept-cookies" class="btn btn-primary">Akzeptieren</button>
<button id="decline-cookies" class="btn btn-secondary">Ablehnen</button>
</div>
</div>
</div>
<!-- Floating Navigation -->
<nav class="navbar" id="navbar">
<div class="nav-container">
<a href="#home" class="logo-link">
<img src="assets/Hofmann logo.png" alt="Hofmann Wintergarten" class="logo-img">
</a>
<div class="nav-highlight" id="nav-highlight"></div>
<ul class="nav-links">
<li data-section="ueber-uns"><a href="#ueber-uns">Über uns</a></li>
<li data-section="leistungen"><a href="#leistungen">Leistungen</a></li>
<li data-section="referenzen"><a href="#referenzen">Referenzen</a></li>
<li data-section="showroom"><a href="#showroom">Showroom</a></li>
<li data-section="partner"><a href="#partner">Partner</a></li>
<li data-section="aktuelles"><a href="#aktuelles">Aktuelles</a></li>
<li data-section="kontakt"><a href="#kontakt">Kontakt</a></li>
</ul>
<button class="mobile-menu-toggle" id="mobile-menu-toggle">
<span></span>
<span></span>
<span></span>
</button>
</div>
</nav>
<!-- Mobile Menu -->
<div class="mobile-menu" id="mobile-menu">
<ul>
<li><a href="#ueber-uns">Über uns</a></li>
<li><a href="#leistungen">Leistungen</a></li>
<li><a href="#referenzen">Referenzen</a></li>
<li><a href="#showroom">Showroom</a></li>
<li><a href="#partner">Partner</a></li>
<li><a href="#aktuelles">Aktuelles</a></li>
<li><a href="#kontakt">Kontakt</a></li>
</ul>
</div>
<!-- Segment 1: Home / Image Carousel -->
<section id="home" class="segment segment-hero">
<div class="carousel" id="hero-carousel">
<div class="carousel-slide active">
<img src="assets/1 Kopf/Kopfbild - Kontakt-clean.png" alt="Kontakt">
<div class="carousel-text">
<h2 class="carousel-title">KONTAKT</h2>
<p class="carousel-content">Rufen Sie uns an unter<br>09221 / 701855</p>
</div>
</div>
<div class="carousel-slide">
<img src="assets/1 Kopf/Kopfbild - Partner-clean.png" alt="Partner">
<div class="carousel-text">
<h2 class="carousel-title">PARTNER</h2>
<p class="carousel-content">für Wintergärten,<br>Terrassenüberdachungen<br>und Markisen</p>
</div>
</div>
<div class="carousel-slide">
<img src="assets/1 Kopf/Kopfbild - Wohlfühloase-clean.png" alt="Wohlfühloase">
<div class="carousel-text">
<h2 class="carousel-title">WOHLFÜHLOASE</h2>
<p class="carousel-content">Ihr FACHMANN für die sonnigen Momente</p>
</div>
</div>
<div class="carousel-indicators">
<span class="indicator active" data-slide="0"></span>
<span class="indicator" data-slide="1"></span>
<span class="indicator" data-slide="2"></span>
</div>
</div>
</section>
<div class="segment-separator"></div>
<!-- Segment 2: Über uns -->
<section id="ueber-uns" class="segment segment-text">
<div class="container">
<h2 class="section-header">Über uns</h2>
<div class="text-content">
<p>Die Firma Hofmann ist Ihr kompetenter Partner für Wintergärten, Terrassenüberdachungen und Sonnenschutzsysteme. Seit über 30 Jahren stehen wir für Qualität, Innovation und Kundenzufriedenheit.</p>
<p>Unser erfahrenes Team berät Sie umfassend und realisiert Ihre Wünsche mit höchster Präzision. Wir verwenden ausschließlich hochwertige Materialien und modernste Technologien, um Ihnen ein Produkt zu bieten, das überzeugt.</p>
<p>Von der ersten Beratung bis zur finalen Montage begleiten wir Sie auf dem Weg zu Ihrem Traum-Wintergarten. Vertrauen Sie auf unsere Expertise und lassen Sie sich von unseren Referenzprojekten inspirieren.</p>
<p>Wir freuen uns darauf, auch Ihr Projekt erfolgreich umzusetzen!</p>
</div>
</div>
</section>
<div class="segment-separator"></div>
<!-- Segment 3: Leistungen - Carousel with arrows -->
<section id="leistungen" class="segment segment-leistungen">
<div class="container">
<h2 class="section-header">Leistungen</h2>
<div class="leistungen-carousel-wrapper">
<button class="carousel-arrow carousel-prev" id="leistungen-prev">&#10094;</button>
<div class="leistungen-carousel">
<div class="leistungen-track" id="leistungen-track">
<!-- Markisen first with markilux logo -->
<div class="leistung-slide active">
<div class="leistung-image">
<img src="assets/2 Leistungen/Markisen.jpg" alt="Markisen">
</div>
<div class="leistung-content">
<div class="leistung-logo">
<img src="assets/4 Partner/Partner Logos/Markilux.png" alt="Markilux">
</div>
<h3>Markisen</h3>
<p>Flexible Beschattung für Terrasse und Balkon. Unsere Markisen bieten optimalen Sonnenschutz bei Bedarf.</p>
</div>
</div>
<div class="leistung-slide">
<div class="leistung-image">
<img src="assets/2 Leistungen/Balkonverglasungen.JPG" alt="Balkonverglasungen">
</div>
<div class="leistung-content">
<h3>Balkonverglasungen</h3>
<p>Genießen Sie Ihren Balkon das ganze Jahr über. Unsere Balkonverglasungen schützen vor Wind, Wetter und Lärm.</p>
</div>
</div>
<div class="leistung-slide">
<div class="leistung-image">
<img src="assets/2 Leistungen/Faltanlagen.jpg" alt="Faltanlagen">
</div>
<div class="leistung-content">
<h3>Faltanlagen</h3>
<p>Flexible Glaslösungen für Terrasse und Balkon. Unsere Faltanlagen verbinden Indoor-Komfort mit Outdoor-Feeling.</p>
</div>
</div>
<div class="leistung-slide">
<div class="leistung-image">
<img src="assets/2 Leistungen/Haustüren.jpg" alt="Haustüren">
</div>
<div class="leistung-content">
<h3>Haustüren</h3>
<p>Der erste Eindruck zählt. Unsere hochwertigen Haustüren kombinieren Sicherheit, Wärmedämmung und ansprechendes Design.</p>
</div>
</div>
<div class="leistung-slide">
<div class="leistung-image">
<img src="assets/2 Leistungen/Haustürüberdachungen.jpg" alt="Haustürüberdachungen">
</div>
<div class="leistung-content">
<h3>Haustürüberdachungen</h3>
<p>Schutz vor Regen und Schnee beim Eingang. Unsere Überdachungen bieten praktischen Wetterschutz mit ästhetischem Wert.</p>
</div>
</div>
<div class="leistung-slide">
<div class="leistung-image">
<img src="assets/2 Leistungen/Insektenschutz.jpg" alt="Insektenschutz">
</div>
<div class="leistung-content">
<h3>Insektenschutz</h3>
<p>Genießen Sie frische Luft ohne ungebetene Gäste. Unsere Insektenschutzsysteme sind unauffällig und effektiv.</p>
</div>
</div>
<div class="leistung-slide">
<div class="leistung-image">
<img src="assets/2 Leistungen/Terassenüberdachungen.jpg" alt="Terassenüberdachungen">
</div>
<div class="leistung-content">
<h3>Terassenüberdachungen</h3>
<p>Ihre Terrasse als Wohnraum im Freien. Unsere Überdachungen schaffen geschützte Außenbereiche für jedes Wetter.</p>
</div>
</div>
<div class="leistung-slide">
<div class="leistung-image">
<img src="assets/2 Leistungen/Wintergärten.jpg" alt="Wintergärten">
</div>
<div class="leistung-content">
<h3>Wintergärten</h3>
<p>Maßgeschneiderte Wintergärten für Ihr Zuhause. Lichtdurchflutete Räume zum Wohlfühlen das ganze Jahr über.</p>
</div>
</div>
</div>
</div>
<button class="carousel-arrow carousel-next" id="leistungen-next">&#10095;</button>
</div>
<div class="leistungen-indicators" id="leistungen-indicators">
<span class="indicator active" data-slide="0"></span>
<span class="indicator" data-slide="1"></span>
<span class="indicator" data-slide="2"></span>
<span class="indicator" data-slide="3"></span>
<span class="indicator" data-slide="4"></span>
<span class="indicator" data-slide="5"></span>
<span class="indicator" data-slide="6"></span>
<span class="indicator" data-slide="7"></span>
</div>
</div>
</section>
<div class="segment-separator"></div>
<!-- Segment 4: Referenzen -->
segment-3d
<section id="referenzen" class="segment segment-slideshow">
<div class="container">
<h2 class="section-header">Referenzen</h2>
</div>
<div class="slideshow-wrapper">
<div class="fullscreen-slideshow" id="referenzen-slideshow">
<div class="slideshow-slide active">
<img src="assets/3 Referenzen/Faltanlage.jpg" alt="Faltanlage">
</div>
<div class="slideshow-slide">
<img src="assets/3 Referenzen/Glashaus in Döhlau.jpg" alt="Glashaus in Döhlau">
</div>
<div class="slideshow-slide">
<img src="assets/3 Referenzen/Glashaus in Fassoldshof.jpg" alt="Glashaus in Fassoldshof">
</div>
<div class="slideshow-slide">
<img src="assets/3 Referenzen/Glashaus in Mainroth.jpg" alt="Glashaus in Mainroth">
</div>
<div class="slideshow-slide">
<img src="assets/3 Referenzen/Glashaus in Marktschorgast.jpg" alt="Glashaus in Marktschorgast">
</div>
<div class="slideshow-slide">
<img src="assets/3 Referenzen/Glashaus in Neustadt.jpg" alt="Glashaus in Neustadt">
</div>
<div class="slideshow-slide">
<img src="assets/3 Referenzen/Glashaus in Tröstau.JPG" alt="Glashaus in Tröstau">
</div>
<div class="slideshow-slide">
<img src="assets/3 Referenzen/Haustür in Schmeilsdorf.jpg" alt="Haustür in Schmeilsdorf">
</div>
<div class="slideshow-slide">
<img src="assets/3 Referenzen/Haustürüberdachung Neuenmarkt.jpg" alt="Haustürüberdachung Neuenmarkt">
</div>
<div class="slideshow-slide">
<img src="assets/3 Referenzen/Markise 1.jpg" alt="Markise">
</div>
<div class="slideshow-slide">
<img src="assets/3 Referenzen/Markise in Kulmbach.jpg" alt="Markise in Kulmbach">
</div>
<div class="slideshow-slide">
<img src="assets/3 Referenzen/Pergola Markise (2).jpg" alt="Pergola Markise">
</div>
<div class="slideshow-slide">
<img src="assets/3 Referenzen/Pergola Markise.jpg" alt="Pergola Markise">
</div>
<div class="slideshow-slide">
<img src="assets/3 Referenzen/Terassenüberdachung in Harsdorf.jpg" alt="Terassenüberdachung in Harsdorf">
</div>
<div class="slideshow-slide">
<img src="assets/3 Referenzen/Terassenüberdachungen in Heinersreuth.jpg" alt="Terassenüberdachungen in Heinersreuth">
</div>
<div class="slideshow-slide">
<img src="assets/3 Referenzen/Wintergarten in Eckersdorf.jpg" alt="Wintergarten in Eckersdorf">
</div>
<div class="slideshow-slide">
<img src="assets/3 Referenzen/Wintergarten in Kulmbach (1).jpg" alt="Wintergarten in Kulmbach">
</div>
<div class="slideshow-slide">
<img src="assets/3 Referenzen/Wintergarten in Kulmbach.jpg" alt="Wintergarten in Kulmbach">
</div>
<div class="slideshow-slide">
<img src="assets/3 Referenzen/Wintergarten in Neudrossenfeld.jpg" alt="Wintergarten in Neudrossenfeld">
</div>
<div class="slideshow-indicators">
<span class="indicator active" data-slide="0"></span>
<span class="indicator" data-slide="1"></span>
<span class="indicator" data-slide="2"></span>
<span class="indicator" data-slide="3"></span>
<span class="indicator" data-slide="4"></span>
<span class="indicator" data-slide="5"></span>
<span class="indicator" data-slide="6"></span>
<span class="indicator" data-slide="7"></span>
<span class="indicator" data-slide="8"></span>
<span class="indicator" data-slide="9"></span>
<span class="indicator" data-slide="10"></span>
<span class="indicator" data-slide="11"></span>
<span class="indicator" data-slide="12"></span>
<span class="indicator" data-slide="13"></span>
<span class="indicator" data-slide="14"></span>
<span class="indicator" data-slide="15"></span>
<span class="indicator" data-slide="16"></span>
<span class="indicator" data-slide="17"></span>
<span class="indicator" data-slide="18"></span>
</div>
</div>
</div>
</section>
<div class="segment-separator"></div>
<!-- Segment 5: Showroom (3D Viewer) -->
<section id="showroom" class="segment segment-3d">
<div class="container">
<h2 class="section-header">Showroom</h2>
</div>
<div class="slideshow-wrapper">
<div class="viewer-container" id="viewer-container">
<div id="cookie-notice" class="cookie-notice hidden">
<p>Um den 3D-Viewer zu nutzen, müssen Sie Cookies akzeptieren.</p>
<button id="reopen-cookie-banner" class="btn btn-primary">Cookie-Einstellungen öffnen</button>
</div>
<iframe id="viewer-iframe" src="" border="0"></iframe>
</div>
</div>
</section>
<div class="segment-separator"></div>
<!-- Segment 6: Partner -->
<section id="partner" class="segment segment-partner">
<div class="container">
<h2 class="section-header">Partner</h2>
<div class="partner-grid">
<div class="partner-item">
<a href="https://solarlux.com" target="_blank" rel="noopener">
<img src="assets/4 Partner/Partner Logos/Solarlux.jpg" alt="Solarlux">
<span>Solarlux</span>
</a>
</div>
<div class="partner-item">
<a href="https://markilux.com" target="_blank" rel="noopener">
<img src="assets/4 Partner/Partner Logos/Markilux.png" alt="Markilux">
<span>Markilux</span>
</a>
</div>
<div class="partner-item">
<a href="https://elsner-elektronik.de" target="_blank" rel="noopener">
<img src="assets/4 Partner/Partner Logos/Elsner.png" alt="Elsner">
<span>Elsner</span>
</a>
</div>
<div class="partner-item">
<a href="https://albohn.de" target="_blank" rel="noopener">
<img src="assets/4 Partner/Partner Logos/albohn tebau links.jpg" alt="Albohn">
<span>Albohn</span>
</a>
</div>
<div class="partner-item">
<a href="https://reflexa.de" target="_blank" rel="noopener">
<img src="assets/4 Partner/Partner Logos/Reflexa.jpg" alt="Reflexa">
<span>Reflexa</span>
</a>
</div>
<div class="partner-item">
<a href="https://alulux.de" target="_blank" rel="noopener">
<img src="assets/4 Partner/Partner Logos/Alulux.png" alt="Alulux">
<span>Alulux</span>
</a>
</div>
<div class="partner-item">
<a href="https://ts-alu.de" target="_blank" rel="noopener">
<img src="assets/4 Partner/Partner Logos/TS Alumium (1).jpg" alt="TS Alu">
<span>TS Alu</span>
</a>
</div>
<div class="partner-item">
<a href="https://rmf-vordach.de" target="_blank" rel="noopener">
<img src="assets/4 Partner/Partner Logos/RMF.png" alt="RMF">
<span>RMF</span>
</a>
</div>
<div class="partner-item">
<a href="https://rudolph-insektenschutz.de" target="_blank" rel="noopener">
<img src="assets/4 Partner/Partner Logos/Rudolph.jpg" alt="Rudolph">
<span>Rudolph</span>
</a>
</div>
<div class="partner-item">
<a href="https://therma.de" target="_blank" rel="noopener">
<img src="assets/4 Partner/Partner Logos/Therma.jpg" alt="Therma">
<span>Therma</span>
</a>
</div>
<div class="partner-item">
<a href="https://schoeninger-glas.de" target="_blank" rel="noopener">
<img src="assets/4 Partner/Partner Logos/Schoeninger.png" alt="Schöninger Glas">
<span>Schöninger Glas</span>
</a>
</div>
<div class="partner-item">
<div class="partner-no-link">
<img src="assets/4 Partner/Partner Logos/Solan.jpg" alt="Solan">
<span>Solan</span>
</div>
</div>
</div>
</div>
</section>
<div class="segment-separator"></div>
<!-- Segment 7: Aktuelles -->
<section id="aktuelles" class="segment segment-news">
<div class="container">
<h2 class="section-header">Aktuelles</h2>
<div class="news-content">
<article class="news-item">
<h3>Tag der offenen Tür</h3>
<p class="news-date">15. März 2024</p>
<p>Wir laden Sie herzlich ein zu unserem Tag der offenen Tür am Samstag, den 15. März 2024 von 10:00 bis 16:00 Uhr. Lassen Sie sich von unseren neuesten Projekten inspirieren und nutzen Sie die Gelegenheit für ein persönliches Gespräch mit unserem Team.</p>
<p>Erleben Sie hautnah die Qualität unserer Wintergärten und lassen Sie sich unverbindlich beraten. Für das leibliche Wohl ist selbstverständlich gesorgt.</p>
</article>
</div>
</div>
</section>
<div class="segment-separator"></div>
<!-- Segment 8: Kontakt -->
<section id="kontakt" class="segment segment-contact">
<div class="container">
<h2 class="section-header">Kontakt</h2>
<div class="contact-wrapper">
<div class="contact-info">
<h3>Hofmann Wintergartentechnik</h3>
<h3>Inhaber: Harry Hofmann</h3>
<address>
<p>Maingasse 10</p>
<p>95326 Kulmbach - Melkendorf</p>
<p>Tel: <a href="tel:00499221701855">+49 (0)9221 / 70 18 55</a></p>
<p>Fax: +49 (0)9221 / 70 18 57</p>
<p>E-Mail: <a href="mailto:info@wintergarten-hofmann.de">info@wintergarten-hofmann.de</a></p>
</address>
</div>
<div class="contact-form-wrapper">
<h3>Schreiben Sie uns</h3>
<form id="contact-form" class="contact-form">
<div class="form-group">
<label for="name">Name *</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">E-Mail *</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="phone">Telefon</label>
<input type="tel" id="phone" name="phone">
</div>
<div class="form-group">
<label for="subject">Betreff *</label>
<input type="text" id="subject" name="subject" required>
</div>
<div class="form-group">
<label for="message">Nachricht *</label>
<textarea id="message" name="message" rows="5" required></textarea>
</div>
<div class="form-group">
<label class="checkbox-label">
<input type="checkbox" name="privacy" required>
<span>Ich habe die <a href="datenschutz.html">Datenschutzerklärung</a> gelesen und stimme der Verarbeitung meiner Daten zu. *</span>
</label>
</div>
<button type="submit" class="btn btn-primary">Nachricht senden</button>
</form>
<div id="form-success" class="form-message success hidden">
<p>Vielen Dank für Ihre Nachricht! Wir werden uns umgehend bei Ihnen melden.</p>
</div>
<div id="form-error" class="form-message error hidden">
<p>Es ist ein Fehler aufgetreten. Bitte versuchen Sie es später erneut.</p>
</div>
</div>
</div>
<!-- Footer integrated into Kontakt segment -->
<div class="footer-content">
<div class="footer-nav">
<a href="#ueber-uns">Über uns</a>
<a href="#leistungen">Leistungen</a>
<a href="#referenzen">Referenzen</a>
<a href="#showroom">Showroom</a>
<a href="#partner">Partner</a>
<a href="#aktuelles">Aktuelles</a>
<a href="#kontakt">Kontakt</a>
<a href="datenschutz.html">Datenschutz</a>
<a href="impressum.html">Impressum</a>
</div>
<div class="footer-bottom">
<p>&copy; 2026 Hofmann Wintergartentechnik. Alle Rechte vorbehalten.</p>
</div>
</div>
</div>
</section>
<script src="script.js"></script>
</body>
</html>