Feature-Update: Premium-Kontaktseite mit dynamischem QR-Code integriert
This commit is contained in:
Felix
+262
-325
@@ -3,377 +3,314 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Gebrüder Brabetz GmbH - Meisterhafter Garten- & Landschaftsbau nach VOB</title>
|
<title>Gebrüder Brabetz GmbH - Kontakt & Bauleitung</title>
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||||
<style>
|
<style>
|
||||||
.font-luxury { font-family: 'Cinzel', serif; }
|
.font-luxury { font-family: 'Cinzel', serif; }
|
||||||
.font-sans { font-family: 'Plus Jakarta Sans', sans-serif; }
|
.font-sans { font-family: 'Plus Jakarta Sans', sans-serif; }
|
||||||
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
|
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
|
||||||
.faq-active .faq-answer { max-height: 300px; }
|
.faq-active .faq-answer { max-height: 500px; }
|
||||||
.faq-active .faq-icon { transform: rotate(180deg); }
|
.faq-active .faq-icon { transform: rotate(180deg); }
|
||||||
|
.subpage { display: none; }
|
||||||
|
.subpage.active { display: block; animation: fadeIn 0.4s ease-out forwards; }
|
||||||
|
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body class="bg-stone-50 text-stone-900 font-sans antialiased selection:bg-emerald-800 selection:text-white">
|
<body class="bg-stone-900 text-stone-100 font-sans antialiased selection:bg-amber-600 selection:text-stone-950">
|
||||||
|
|
||||||
<nav class="fixed w-full bg-stone-50/95 backdrop-blur-md z-50 shadow-sm border-b border-stone-200/60">
|
<div id="main-page" class="bg-stone-50 text-stone-900 min-h-screen">
|
||||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-24 flex items-center justify-between">
|
<nav class="fixed w-full bg-stone-50/90 backdrop-blur-md z-50 shadow-sm border-b border-stone-200/60">
|
||||||
<a href="#" class="flex items-center gap-4 group">
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-24 flex items-center justify-between">
|
||||||
<div class="w-12 h-12 bg-emerald-900 rounded-xl flex items-center justify-center text-amber-400 text-xl shadow-md group-hover:scale-105 transition-transform">
|
<a href="#" onclick="switchPage('main-page')" class="flex items-center gap-4 group">
|
||||||
<i class="fa-solid fa-compass-drafting"></i>
|
<div class="w-12 h-12 bg-emerald-900 rounded-xl flex items-center justify-center text-amber-400 text-xl shadow-md group-hover:scale-105 transition-transform">
|
||||||
|
<i class="fa-solid fa-compass-drafting"></i>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<span class="text-xl font-luxury font-bold text-emerald-950 tracking-wider">Gebrüder Brabetz</span>
|
||||||
|
<span class="text-[10px] font-bold text-amber-700 uppercase tracking-[0.25em] -mt-1">Garten- & Landschaftsbau GmbH</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<div class="hidden lg:flex items-center gap-8 text-sm font-semibold text-stone-800 tracking-wide">
|
||||||
|
<a href="#standards" class="hover:text-emerald-800 transition">Das Regelwerk</a>
|
||||||
|
<a href="#services" class="hover:text-emerald-800 transition">Kompetenzen</a>
|
||||||
|
<a href="#projects" class="hover:text-emerald-800 transition">Masse & Beweise</a>
|
||||||
|
<a href="#faq" class="hover:text-emerald-800 transition">Klartext</a>
|
||||||
|
<button onclick="switchPage('page-contact')" class="bg-emerald-900 hover:bg-emerald-800 text-white px-6 py-3 rounded-xl transition shadow-lg text-xs uppercase tracking-wider">Projekt zünden</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col">
|
|
||||||
<span class="text-xl font-luxury font-bold text-emerald-950 tracking-wider">Gebrüder Brabetz</span>
|
|
||||||
<span class="text-[10px] font-bold text-amber-700 uppercase tracking-[0.25em] -mt-1">Garten- & Landschaftsbau GmbH</span>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<div class="hidden lg:flex items-center gap-8 text-sm font-semibold text-stone-800 tracking-wide">
|
|
||||||
<a href="#standards" class="hover:text-emerald-800 transition">VOB-Standards</a>
|
|
||||||
<a href="#services" class="hover:text-emerald-800 transition">Leistungsbereiche</a>
|
|
||||||
<a href="#projects" class="hover:text-emerald-800 transition">Referenzprojekte</a>
|
|
||||||
<a href="#faq" class="hover:text-emerald-800 transition">FAQ</a>
|
|
||||||
<a href="#contact" class="bg-emerald-900 hover:bg-emerald-800 text-white px-6 py-3 rounded-xl transition shadow-lg shadow-emerald-950/20 text-xs uppercase tracking-wider">Leistungsanfrage</a>
|
|
||||||
</div>
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
<button id="menu-btn" class="lg:hidden text-stone-800 focus:outline-none text-2xl">
|
<header class="relative min-h-screen flex items-center justify-center pt-24 overflow-hidden bg-emerald-950">
|
||||||
<i class="fa-solid fa-bars-staggered"></i>
|
<img src="https://images.unsplash.com/photo-1512917774080-9991f1c4c750?auto=format&fit=crop&w=1920&q=80" alt="Exklusive Außenanlage" class="absolute inset-0 w-full h-full object-cover opacity-30 scale-105">
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-b from-emerald-950/40 via-emerald-950/70 to-stone-50"></div>
|
||||||
|
<div class="relative max-w-5xl mx-auto px-6 text-center z-10">
|
||||||
|
<span class="text-xs font-bold tracking-[0.3em] text-amber-400 uppercase bg-emerald-900/60 px-5 py-2 rounded-full border border-amber-500/30 backdrop-blur-md">Null Pfusch. Maximale Gewährleistung.</span>
|
||||||
|
<h1 class="mt-8 text-4xl sm:text-6xl lg:text-7xl font-luxury font-bold tracking-wide text-white leading-[1.15]">
|
||||||
|
Wer billig baut, baut dreimal.<br>
|
||||||
|
<span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-300 to-amber-300">Wir bauen für Generationen.</span>
|
||||||
|
</h1>
|
||||||
|
<p class="mt-8 text-lg sm:text-xl text-stone-200 max-w-3xl mx-auto font-light leading-relaxed">
|
||||||
|
Wir überlassen im Rheingau-Taunus-Kreis nichts dem Zufall. Die Gebrüder Brabetz GmbH steht für kompromisslose bautechnische Präzision, exzellente Facharbeiter-Struktur und messbare VOB-Transparenz.
|
||||||
|
</p>
|
||||||
|
<div class="mt-12 flex flex-wrap justify-center gap-4">
|
||||||
|
<a href="#projects" class="px-8 py-4 bg-white/10 hover:bg-white/20 text-white font-semibold rounded-xl border border-white/20 transition-all backdrop-blur-md text-sm uppercase tracking-wider">Fallstudien ansehen</a>
|
||||||
|
<button onclick="switchPage('page-contact')" class="px-8 py-4 bg-amber-600 hover:bg-amber-500 text-emerald-950 font-bold rounded-xl shadow-lg text-sm uppercase tracking-wider transition-all">Direkt zur Bauleitung</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section id="standards" class="py-28 bg-white border-b border-stone-200">
|
||||||
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="max-w-3xl mb-12">
|
||||||
|
<span class="text-xs font-bold tracking-widest text-amber-700 uppercase">Keine Ausreden</span>
|
||||||
|
<h2 class="text-3xl sm:text-4xl font-luxury font-bold text-emerald-950 mt-2">Warum wir nach DIN und VOB abrechnen</h2>
|
||||||
|
</div>
|
||||||
|
<p class="text-stone-600 leading-relaxed max-w-4xl">
|
||||||
|
Viele Betriebe „schätzen“ pauschal aus dem Bauch heraus. Wir hassen Intransparenz. Jedes Bauvorhaben wird zentimetergenau erfasst, nach **VOB/C** aufgemessen und nach den anerkannten Regeln der Technik ausgeführt. Sie bezahlen exakt das Volumen, das unsere Facharbeiter fehlerfrei verbaut haben.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="projects" class="py-28 bg-emerald-950 text-white">
|
||||||
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="mb-16">
|
||||||
|
<span class="text-xs font-bold tracking-widest text-amber-400 uppercase">Ausgeführte Großprojekte</span>
|
||||||
|
<h2 class="text-3xl sm:text-5xl font-luxury font-bold mt-2">Harte Fakten statt schöner Renderings</h2>
|
||||||
|
<div class="w-12 h-1 bg-amber-500 mt-4"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||||
|
<div class="bg-stone-900/60 border border-emerald-800 rounded-3xl overflow-hidden shadow-xl flex flex-col justify-between">
|
||||||
|
<img src="https://images.unsplash.com/photo-1604014237800-1c9102c219da?auto=format&fit=crop&w=800&q=80" alt="Mauerbau" class="w-full h-56 object-cover">
|
||||||
|
<div class="p-8 space-y-4 flex-grow flex flex-col justify-between">
|
||||||
|
<div>
|
||||||
|
<span class="text-xs font-mono text-emerald-400 uppercase tracking-wider">Fallstudie I // Massenaufmaß</span>
|
||||||
|
<h3 class="text-2xl font-luxury font-bold mt-1 text-white">Monumentale Hangterrassierung</h3>
|
||||||
|
<p class="text-stone-300 text-sm mt-2 leading-relaxed">Bau einer zweihäuptigen Muschelkalk-Trockenmauer gegen enormen Erddruck. Statische Meisterleistung nach DIN 18300.</p>
|
||||||
|
</div>
|
||||||
|
<button onclick="switchPage('page-mauer')" class="w-full text-center px-6 py-4 bg-amber-600 hover:bg-amber-500 text-emerald-950 font-bold rounded-xl text-xs uppercase tracking-wider transition-all mt-6">
|
||||||
|
<i class="fa-solid fa-arrow-up-right-from-square mr-2"></i> Technische Detailseite öffnen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-stone-900/60 border border-emerald-800 rounded-3xl overflow-hidden shadow-xl flex flex-col justify-between">
|
||||||
|
<img src="https://images.unsplash.com/photo-1547005327-ef75a6961556?auto=format&fit=crop&w=800&q=80" alt="Gewerbebau" class="w-full h-56 object-cover">
|
||||||
|
<div class="p-8 space-y-4 flex-grow flex flex-col justify-between">
|
||||||
|
<div>
|
||||||
|
<span class="text-xs font-mono text-emerald-400 uppercase tracking-wider">Fallstudie II // Ablauf & Taktung</span>
|
||||||
|
<h3 class="text-2xl font-luxury font-bold mt-1 text-white">Großflächen-Wegebau & Rigolensystem</h3>
|
||||||
|
<p class="text-stone-300 text-sm mt-2 leading-relaxed">650 m² Pflasterdecke für extreme Achslasten (Ev2 ≥ 45 MPa) inklusive sensorgesteuerer Entwässerung.</p>
|
||||||
|
</div>
|
||||||
|
<button onclick="switchPage('page-gewerbe')" class="w-full text-center px-6 py-4 bg-amber-600 hover:bg-amber-500 text-emerald-950 font-bold rounded-xl text-xs uppercase tracking-wider transition-all mt-6">
|
||||||
|
<i class="fa-solid fa-arrow-up-right-from-square mr-2"></i> Technische Detailseite öffnen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="faq" class="py-28 max-w-4xl mx-auto px-6">
|
||||||
|
<div class="text-center mb-16">
|
||||||
|
<h2 class="text-3xl font-luxury font-bold text-emerald-950">Klartext im Vorfeld</h2>
|
||||||
|
<div class="w-12 h-1 bg-amber-600 mx-auto mt-4"></div>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div class="bg-white border border-stone-200 rounded-2xl p-6 cursor-pointer" onclick="toggleFaq(this)">
|
||||||
|
<div class="flex justify-between items-center select-none">
|
||||||
|
<h3 class="font-bold text-emerald-950 text-base sm:text-lg">Was unterscheidet euch von günstigen Kolonnen?</h3>
|
||||||
|
<i class="fa-solid fa-chevron-down faq-icon text-stone-400 transition-transform"></i>
|
||||||
|
</div>
|
||||||
|
<div class="faq-answer mt-3 text-stone-600 text-sm leading-relaxed">
|
||||||
|
Ganz einfach: Gewährleistung und Substanz. Wenn Billigbetriebe fertig sind, wächst der Rasen drei Monate schön – und im ersten Winter sacken die Pflastersteine ab, weil am Unterbau gespart wurde. Wir verdichten Tragschichten mit Prüfprotokoll und betonieren Fundamente präzise aus. Bei uns altert die Anlage in Würde, statt zu verfallen.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer class="bg-stone-900 py-12 text-stone-400 border-t border-stone-950 text-sm text-center">
|
||||||
|
<p class="font-luxury text-white">Gebrüder Brabetz GmbH © 2026 // Rheingau-Taunus-Kreis</p>
|
||||||
|
<button onclick="switchPage('page-contact')" class="text-amber-400 hover:underline mt-2 block mx-auto text-xs font-mono">Direktlink zur Bauleitung & QR-Code</button>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div id="page-mauer" class="subpage min-h-screen bg-stone-950 text-white pt-12 pb-24 px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="max-w-6xl mx-auto space-y-12">
|
||||||
|
<button onclick="switchPage('main-page')" class="text-stone-400 hover:text-white transition font-semibold text-sm flex items-center gap-2 bg-stone-900 px-4 py-2 rounded-xl border border-stone-800">
|
||||||
|
<i class="fa-solid fa-arrow-left"></i> Zurück zur Hauptseite
|
||||||
</button>
|
</button>
|
||||||
</div>
|
<div class="border-b border-stone-800 pb-6">
|
||||||
|
<span class="text-xs text-amber-400 font-mono uppercase tracking-widest">PROJEKT-ANALYSE // ID: RT-2025-09</span>
|
||||||
<div id="mobile-menu" class="hidden lg:hidden bg-stone-50 border-b border-stone-200 px-6 py-6 space-y-4 shadow-xl">
|
<h1 class="text-4xl sm:text-6xl font-luxury font-bold mt-2 text-white">Die Festung im Rheingau</h1>
|
||||||
<a href="#standards" class="block font-medium text-stone-800 hover:text-emerald-800">VOB-Standards</a>
|
</div>
|
||||||
<a href="#services" class="block font-medium text-stone-800 hover:text-emerald-800">Leistungsbereiche</a>
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||||
<a href="#projects" class="block font-medium text-stone-800 hover:text-emerald-800">Referenzprojekte</a>
|
<div class="bg-stone-900 border border-stone-800 p-6 rounded-3xl shadow-xl"><div class="relative w-full h-[280px] flex justify-center"><canvas id="subChartMassen"></canvas></div></div>
|
||||||
<a href="#faq" class="block font-medium text-stone-800 hover:text-emerald-800">FAQ</a>
|
<div class="bg-stone-900 border border-stone-800 p-6 rounded-3xl shadow-xl"><div class="relative w-full h-[280px] flex justify-center"><canvas id="subChartBoden"></canvas></div></div>
|
||||||
<a href="#contact" class="block text-center bg-emerald-900 text-white px-4 py-3 rounded-xl font-semibold text-sm">Leistungsanfrage</a>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<header class="relative min-h-screen flex items-center justify-center pt-24 overflow-hidden bg-emerald-950">
|
|
||||||
<img src="https://images.unsplash.com/photo-1512917774080-9991f1c4c750?auto=format&fit=crop&w=1920&q=80" alt="Exklusive Außenanlage Rheingau bei Nacht" class="absolute inset-0 w-full h-full object-cover opacity-35 scale-105">
|
|
||||||
<div class="absolute inset-0 bg-gradient-to-b from-emerald-950/40 via-emerald-950/70 to-stone-50"></div>
|
|
||||||
|
|
||||||
<div class="relative max-w-5xl mx-auto px-6 text-center z-10">
|
|
||||||
<span class="text-xs font-bold tracking-[0.3em] text-amber-400 uppercase bg-emerald-900/60 px-5 py-2 rounded-full border border-amber-500/30 backdrop-blur-md">Meisterbetrieb & VOB-Fachbetrieb</span>
|
|
||||||
<h1 class="mt-8 text-4xl sm:text-6xl lg:text-7xl font-luxury font-bold tracking-wide text-white leading-[1.15]">
|
|
||||||
Architektur im Grünen.<br>
|
|
||||||
<span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-300 to-amber-300">Normgerechte Perfektion.</span>
|
|
||||||
</h1>
|
|
||||||
<p class="mt-8 text-lg sm:text-xl text-stone-200 max-w-3xl mx-auto font-light leading-relaxed">
|
|
||||||
Klassischer Garten- und Landschaftsbau im Rheingau-Taunus-Kreis. Wir realisieren anspruchsvolle Außenanlagen für private und öffentliche Auftraggeber – strikt nach den anerkannten Regeln der Technik und VOB/B.
|
|
||||||
</p>
|
|
||||||
<div class="mt-12 flex flex-wrap justify-center gap-5">
|
|
||||||
<a href="#contact" class="px-8 py-4 bg-amber-600 hover:bg-amber-500 text-emerald-950 font-bold rounded-xl shadow-lg shadow-amber-600/20 transition-all transform hover:-translate-y-0.5 text-sm uppercase tracking-wider">Beratungstermin vereinbaren</a>
|
|
||||||
<a href="#projects" class="px-8 py-4 bg-white/10 hover:bg-white/20 text-white font-semibold rounded-xl border border-white/20 transition-all backdrop-blur-md text-sm uppercase tracking-wider">Leistungsverzeichnis einsehen</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</div>
|
||||||
|
|
||||||
<section id="standards" class="py-28 bg-white border-b border-stone-200/80">
|
|
||||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
<div id="page-gewerbe" class="subpage min-h-screen bg-stone-950 text-white pt-12 pb-24 px-4 sm:px-6 lg:px-8">
|
||||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
|
<div class="max-w-6xl mx-auto space-y-12">
|
||||||
<div class="lg:col-span-5">
|
<button onclick="switchPage('main-page')" class="text-stone-400 hover:text-white transition font-semibold text-sm flex items-center gap-2 bg-stone-900 px-4 py-2 rounded-xl border border-stone-800">
|
||||||
<span class="text-xs font-bold tracking-widest text-amber-700 uppercase">Rechtssicherheit & Qualität</span>
|
<i class="fa-solid fa-arrow-left"></i> Zurück zur Hauptseite
|
||||||
<h2 class="mt-3 text-3xl sm:text-4xl font-luxury font-bold text-emerald-950 tracking-wide">Bauausführung nach strengem Regelwerk</h2>
|
</button>
|
||||||
<div class="mt-4 w-12 h-1 bg-amber-600"></div>
|
<div class="border-b border-stone-800 pb-6">
|
||||||
<p class="mt-6 text-stone-600 leading-relaxed">
|
<span class="text-xs text-amber-400 font-mono uppercase tracking-widest">PROJEKT-ANALYSE // ID: RT-2026-03</span>
|
||||||
Als meistergeführter Fachbetrieb garantieren wir absolute Transparenz. Jedes Projekt der **Gebrüder Brabetz GmbH** wird auf Basis klarer Leistungsverzeichnisse strukturiert, nach **VOB/C** abregenrechnet und nach den geltenden DIN-Normen des Landschaftsbaues ausgeführt.
|
<h1 class="text-4xl sm:text-6xl font-luxury font-bold mt-2 text-white">Das Logistik-Plateau</h1>
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="lg:col-span-7 grid grid-cols-1 sm:grid-cols-2 gap-6">
|
|
||||||
<div class="p-6 bg-stone-50 rounded-2xl border border-stone-100">
|
|
||||||
<div class="text-emerald-800 text-xl font-bold mb-2">DIN 18320</div>
|
|
||||||
<p class="text-xs font-bold text-stone-500 uppercase tracking-wider mb-2">Landschaftsbauarbeiten</p>
|
|
||||||
<p class="text-stone-600 text-sm">Garantierte Einhaltung aller Vorgaben für Bodenbearbeitung, Pflanzarbeiten und Vegetationsflächen.</p>
|
|
||||||
</div>
|
|
||||||
<div class="p-6 bg-stone-50 rounded-2xl border border-stone-100">
|
|
||||||
<div class="text-emerald-800 text-xl font-bold mb-2">VOB/B & VOB/C</div>
|
|
||||||
<p class="text-xs font-bold text-stone-500 uppercase tracking-wider mb-2">Vertrag & Abrechnung</p>
|
|
||||||
<p class="text-stone-600 text-sm">Prüffähige Aufmaße, transparente Abschlagsrechnungen und rechtssichere Gewährleistung nach § 13 VOB/B.</p>
|
|
||||||
</div>
|
|
||||||
<div class="p-6 bg-stone-50 rounded-2xl border border-stone-100">
|
|
||||||
<div class="text-emerald-800 text-xl font-bold mb-2">DIN 18915</div>
|
|
||||||
<p class="text-xs font-bold text-stone-500 uppercase tracking-wider mb-2">Bodenarbeiten</p>
|
|
||||||
<p class="text-stone-600 text-sm">Fachgerechter Schutz, Lösen, Transportieren und Einbauen von Oberboden ohne schädliche Verdichtungen.</p>
|
|
||||||
</div>
|
|
||||||
<div class="p-6 bg-stone-50 rounded-2xl border border-stone-100">
|
|
||||||
<div class="text-emerald-800 text-xl font-bold mb-2">DIN 18531</div>
|
|
||||||
<p class="text-xs font-bold text-stone-500 uppercase tracking-wider mb-2">Abdichtung von Dächern/Balkonen</p>
|
|
||||||
<p class="text-stone-600 text-sm">Fachgerechter Aufbau und normkonforme Entwässerung bei anspruchsvollen Dach- und Terrassenbegrünungen.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="bg-stone-900 border border-stone-800 p-6 rounded-3xl shadow-xl"><div class="relative w-full h-[320px]"><canvas id="subChartGantt"></canvas></div></div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</div>
|
||||||
|
|
||||||
<section id="services" class="py-28 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
||||||
<div class="text-center max-w-3xl mx-auto mb-20">
|
|
||||||
<h2 class="text-sm font-bold tracking-widest text-amber-700 uppercase">Gewerkstruktur</h2>
|
|
||||||
<p class="mt-4 text-3xl sm:text-5xl font-luxury font-bold text-emerald-950 tracking-wide">Unsere Kernkompetenzen</p>
|
|
||||||
<div class="mt-4 w-16 h-1 bg-amber-600 mx-auto"></div>
|
|
||||||
</div>
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
||||||
<div class="bg-white rounded-3xl border border-stone-200/60 p-8 shadow-xl shadow-stone-200/40 transition hover:shadow-emerald-950/5 group flex flex-col justify-between">
|
|
||||||
<div>
|
|
||||||
<div class="w-14 h-14 bg-emerald-50 text-emerald-800 rounded-xl flex items-center justify-center text-xl mb-6 group-hover:bg-emerald-900 group-hover:text-white transition-all">
|
|
||||||
<i class="fa-solid fa-layer-group"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-bold text-emerald-950 mb-3">Erdbau & Großpflasterung</h3>
|
|
||||||
<p class="text-stone-600 text-sm leading-relaxed mb-4">Unterbauten für Schwerlastverkehr, Tragschichtherstellung nach ZTV Wegebau und präzise Pflasterarbeiten in Natur- und Betonstein.</p>
|
|
||||||
</div>
|
|
||||||
<span class="text-[10px] font-bold text-stone-400 uppercase tracking-widest block pt-4 border-t border-stone-100">Abrechnung nach DIN 18318</span>
|
|
||||||
</div>
|
|
||||||
<div class="bg-white rounded-3xl border border-stone-200/60 p-8 shadow-xl shadow-stone-200/40 transition hover:shadow-emerald-950/5 group flex flex-col justify-between">
|
|
||||||
<div>
|
|
||||||
<div class="w-14 h-14 bg-emerald-50 text-emerald-800 rounded-xl flex items-center justify-center text-xl mb-6 group-hover:bg-emerald-900 group-hover:text-white transition-all">
|
|
||||||
<i class="fa-solid fa-tree"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-bold text-emerald-950 mb-3">Ingenieurbiologie & Pflanzung</h3>
|
|
||||||
<p class="text-stone-600 text-sm leading-relaxed mb-4">Fachgerechte Gehölz- und Großbaumpflanzungen nach DIN 18916 unter Berücksichtigung von Standortfaktoren und Bodenschluss.</p>
|
|
||||||
</div>
|
|
||||||
<span class="text-[10px] font-bold text-stone-400 uppercase tracking-widest block pt-4 border-t border-stone-100">Ausführung nach DIN 18916</span>
|
|
||||||
</div>
|
|
||||||
<div class="bg-white rounded-3xl border border-stone-200/60 p-8 shadow-xl shadow-stone-200/40 transition hover:shadow-emerald-950/5 group flex flex-col justify-between">
|
|
||||||
<div>
|
|
||||||
<div class="w-14 h-14 bg-emerald-50 text-emerald-800 rounded-xl flex items-center justify-center text-xl mb-6 group-hover:bg-emerald-900 group-hover:text-white transition-all">
|
|
||||||
<i class="fa-solid fa-droplet"></i>
|
|
||||||
</div>
|
|
||||||
<h3 class="text-xl font-bold text-emerald-950 mb-3">Smarte Be- & Entwässerung</h3>
|
|
||||||
<p class="text-stone-600 text-sm leading-relaxed mb-4">Automatisierte Unterflur-Bewässerungssysteme mit sensorbasierter Steuerung, gekoppelt an eure eigene, ausfallsichere GreenStack-Infrastruktur.</p>
|
|
||||||
</div>
|
|
||||||
<span class="text-[10px] font-bold text-stone-400 uppercase tracking-widest block pt-4 border-t border-stone-100">Zertifizierte IoT-Steuerung</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="projects" class="py-28 bg-emerald-950 text-white overflow-hidden">
|
<div id="page-contact" class="subpage min-h-screen bg-stone-950 text-white pt-12 pb-24 px-4 sm:px-6 lg:px-8">
|
||||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
<div class="max-w-6xl mx-auto space-y-12">
|
||||||
<div class="max-w-3xl mb-16">
|
<button onclick="switchPage('main-page')" class="text-stone-400 hover:text-white transition font-semibold text-sm flex items-center gap-2 bg-stone-900 px-4 py-2 rounded-xl border border-stone-800">
|
||||||
<span class="text-xs font-bold tracking-[0.2em] text-amber-400 uppercase">Dokumentierte Bauvorhaben</span>
|
<i class="fa-solid fa-arrow-left"></i> Zurück zur Hauptseite
|
||||||
<h2 class="mt-3 text-3xl sm:text-5xl font-luxury font-bold tracking-wide">Referenzen & Bautagebuch</h2>
|
</button>
|
||||||
<div class="mt-4 w-12 h-1 bg-amber-500"></div>
|
|
||||||
|
<div class="border-b border-stone-800 pb-6">
|
||||||
|
<span class="text-xs text-amber-400 font-mono uppercase tracking-widest">Bauleitung & Vergabe // Direkter Draht</span>
|
||||||
|
<h1 class="text-4xl sm:text-6xl font-luxury font-bold mt-2 text-white">Projekt zünden.</h1>
|
||||||
|
<p class="text-stone-400 mt-4 max-w-2xl text-base">Unsere Kapazitäten für anspruchsvolle Außenanlagen im aktuellen Quartal sind streng limitiert. Wer zuerst kommt, baut zuerst. Reichen Sie Ihre Pläne ein.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="space-y-16">
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
|
||||||
<div class="bg-emerald-900/40 border border-emerald-800 rounded-3xl p-8 lg:p-12 grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
|
<div class="lg:col-span-7 bg-stone-900 border border-stone-800 p-8 rounded-3xl shadow-xl">
|
||||||
<div class="lg:col-span-5 relative aspect-[4/3] rounded-2xl overflow-hidden shadow-xl">
|
<form onsubmit="handleFormSubmit(event)" class="space-y-4">
|
||||||
<img src="https://images.unsplash.com/photo-1604014237800-1c9102c219da?auto=format&fit=crop&w=800&q=80" alt="Massiver Naturstein-Mauerbau im Rheingau" class="w-full h-full object-cover">
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||||
</div>
|
<div>
|
||||||
<div class="lg:col-span-7 space-y-4">
|
<label class="block text-[10px] font-mono text-stone-400 uppercase mb-1">Auftraggeber / Firma *</label>
|
||||||
<div class="flex flex-wrap items-center gap-3">
|
<input type="text" required class="w-full bg-stone-950 border border-stone-800 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:border-amber-500">
|
||||||
<span class="text-[10px] font-bold uppercase bg-amber-500/20 text-amber-300 border border-amber-500/30 px-3 py-1 rounded-md">Privatobjekt Rheingau</span>
|
</div>
|
||||||
<span class="text-[10px] font-mono text-emerald-300">VOB/C konform</span>
|
<div>
|
||||||
|
<label class="block text-[10px] font-mono text-stone-400 uppercase mb-1">Direkte E-Mail *</label>
|
||||||
|
<input type="email" required class="w-full bg-stone-950 border border-stone-800 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:border-amber-500">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<h3 class="text-2xl font-luxury font-bold tracking-wide text-white">Hangterrassierung mit Schichtmauerwerk</h3>
|
<div>
|
||||||
|
<label class="block text-[10px] font-mono text-stone-400 uppercase mb-1">Gewerk / Projektart</label>
|
||||||
<div class="bg-emerald-950/50 rounded-xl p-5 border border-emerald-800/60 font-mono text-xs text-stone-300 space-y-2">
|
<select class="w-full bg-stone-950 border border-stone-800 rounded-xl px-4 py-3 text-sm text-stone-300 focus:outline-none focus:border-amber-500">
|
||||||
<div class="font-bold border-b border-emerald-800 pb-1 text-amber-400 uppercase tracking-wider">Auszug aus dem Leistungsverzeichnis (LV)</div>
|
<option>Ausschreibung nach VOB (Kommunal/Gewerblich)</option>
|
||||||
<div><strong class="text-white">Pos 01.02:</strong> 140 m³ Erdaushub inkl. Entsorgung und Deponierung nach DIN 18915.</div>
|
<option>Exklusive Neuanlage (Privatgarten Premium)</option>
|
||||||
<div><strong class="text-white">Pos 03.11:</strong> 45 lfm Muschelkalk-Trockenmauerwerk, zweihäuptig, Fundamentierung nach ZTV-ING.</div>
|
<option>Naturstein- & Ingenieurbau (Schwerlast/Statik)</option>
|
||||||
<div><strong class="text-white">Abrechnung:</strong> Nach tatsächlich genommenem, prüffähigem Aufmaß.</div>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div>
|
||||||
</div>
|
<label class="block text-[10px] font-mono text-stone-400 uppercase mb-1">Harte Projektdaten (m², geplante Massen, Wünsche)</label>
|
||||||
|
<textarea rows="4" placeholder="Keine Romane. Nur Zahlen, Maße und Fakten..." class="w-full bg-stone-950 border border-stone-800 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:border-amber-500"></textarea>
|
||||||
<div class="bg-emerald-900/40 border border-emerald-800 rounded-3xl p-8 lg:p-12 grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
|
|
||||||
<div class="lg:col-span-5 lg:order-last relative aspect-[4/3] rounded-2xl overflow-hidden shadow-xl">
|
|
||||||
<img src="https://images.unsplash.com/photo-1547005327-ef75a6961556?auto=format&fit=crop&w=800&q=80" alt="Repräsentative Hofauffahrt und Großbaumpflanzung" class="w-full h-full object-cover">
|
|
||||||
</div>
|
|
||||||
<div class="lg:col-span-7 space-y-4">
|
|
||||||
<div class="flex flex-wrap items-center gap-3">
|
|
||||||
<span class="text-[10px] font-bold uppercase bg-amber-500/20 text-amber-300 border border-amber-500/30 px-3 py-1 rounded-md">Repräsentative Gewerbe-Außenanlage</span>
|
|
||||||
<span class="text-[10px] font-mono text-emerald-300">DIN 18320</span>
|
|
||||||
</div>
|
</div>
|
||||||
<h3 class="text-2xl font-luxury font-bold tracking-wide text-white">Wegebau, Großbaumpflanzung & Rigolenversickerung</h3>
|
<button type="submit" class="w-full py-4 bg-emerald-800 hover:bg-emerald-700 text-white font-bold rounded-xl text-xs uppercase tracking-widest transition shadow-lg">Daten zur technischen Prüfung einreichen</button>
|
||||||
|
</form>
|
||||||
|
<div id="form-success-sub" class="hidden mt-4 p-4 bg-emerald-950/60 border border-emerald-800 rounded-xl text-emerald-300 text-sm text-center font-medium font-mono">
|
||||||
|
✔ Datensatz erfolgreich auf lokalem Docker-Node (brabetz-node) verbucht. Die Bauleitung initiiert die Prüfung.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="bg-emerald-950/50 rounded-xl p-5 border border-emerald-800/60 font-mono text-xs text-stone-300 space-y-2">
|
<div class="lg:col-span-5 space-y-6">
|
||||||
<div class="font-bold border-b border-emerald-800 pb-1 text-amber-400 uppercase tracking-wider">Auszug aus dem Leistungsverzeichnis (LV)</div>
|
<div class="bg-stone-900 border border-stone-800 p-6 rounded-3xl shadow-xl flex flex-col items-center text-center">
|
||||||
<div><strong class="text-white">Pos 02.04:</strong> 650 m² Großformat-Betonsteinpflaster mit niveaugleicher Tragschichtherstellung Ev2 ≥ 45 MPa.</div>
|
<div class="badge bg-emerald-500/10 text-emerald-400 border border-emerald-500/30 px-3 py-1 rounded-md text-[10px] uppercase font-mono mb-4">Digitale Visitenkarte</div>
|
||||||
<div><strong class="text-white">Pos 05.01:</strong> Pflanzung von 6 Stk. Solitärbäumen (Carpinus betulus) inkl. Dreibockverpfählung nach DIN 18916.</div>
|
|
||||||
<div><strong class="text-white">Abnahme:</strong> Förmliche Bauabnahme nach § 12 VOB/B erfolgt.</div>
|
<div class="p-4 bg-white rounded-2xl shadow-inner border border-stone-700">
|
||||||
|
<img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&color=064e3b&data=https://galabau.brabros.de" alt="QR Code Gebrüder Brabetz" class="w-48 h-48">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<p class="text-xs text-stone-400 font-mono mt-4 leading-relaxed px-4">
|
||||||
|
<strong>Direkt-Scan fürs Smartphone:</strong> Kamera draufhalten, Link öffnen und die Bauleitung fehlerfrei ohne Tippfehler im System hinterlegen.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-stone-900 border border-stone-800 p-6 rounded-3xl shadow-xl font-mono text-xs text-stone-400 space-y-4">
|
||||||
|
<div class="text-amber-400 font-bold uppercase border-b border-stone-800 pb-2">Die Zentrale</div>
|
||||||
|
<p><i class="fa-solid fa-phone text-amber-500 mr-2"></i> <strong>Telefon:</strong> 06124 / 4654</p>
|
||||||
|
<p><i class="fa-solid fa-envelope text-amber-500 mr-2"></i> <strong>E-Mail:</strong> info@gebrueder-brabetz.de</p>
|
||||||
|
<p><i class="fa-solid fa-user-group text-emerald-500 mr-2"></i> <strong>Leitung:</strong> Caspar, Jakob & Felix Brabetz</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</div>
|
||||||
|
|
||||||
<section id="gallery" class="py-28 bg-stone-100 border-t border-stone-200">
|
|
||||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
||||||
<div class="text-center max-w-3xl mx-auto mb-20">
|
|
||||||
<h2 class="text-sm font-bold tracking-widest text-amber-700 uppercase">Impressionen</h2>
|
|
||||||
<p class="mt-4 text-3xl font-luxury text-emerald-950 tracking-wide">Präzision im Detail</p>
|
|
||||||
<div class="mt-4 w-12 h-1 bg-amber-600 mx-auto"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
||||||
<div class="relative overflow-hidden rounded-2xl group aspect-[4/3] shadow-md border border-stone-200 bg-white">
|
|
||||||
<img src="https://images.unsplash.com/photo-1503387762-592deb58ef4e?auto=format&fit=crop&w=600&q=80" alt="Gartenarchitektur und Detailplanung" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
|
|
||||||
<div class="absolute inset-0 bg-gradient-to-t from-emerald-950/90 via-emerald-950/20 to-transparent p-5 flex flex-col justify-end opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
|
||||||
<p class="text-sm font-bold text-amber-400">1. Vorplanung</p>
|
|
||||||
<p class="text-xs text-stone-200">Präzise Werks- und Detailplanung</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="relative overflow-hidden rounded-2xl group aspect-[4/3] shadow-md border border-stone-200 bg-white">
|
|
||||||
<img src="https://images.unsplash.com/photo-1589939705384-5185137a7f0f?auto=format&fit=crop&w=600&q=80" alt="Exakter Natursteinschnitt Baustelle" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
|
|
||||||
<div class="absolute inset-0 bg-gradient-to-t from-emerald-950/90 via-emerald-950/20 to-transparent p-5 flex flex-col justify-end opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
|
||||||
<p class="text-sm font-bold text-amber-400">2. Hardscape</p>
|
|
||||||
<p class="text-xs text-stone-200">Handwerkliche Steinkunst vor Ort</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="relative overflow-hidden rounded-2xl group aspect-[4/3] shadow-md border border-stone-200 bg-white">
|
|
||||||
<img src="https://images.unsplash.com/photo-1513694203232-719a280e022f?auto=format&fit=crop&w=600&q=80" alt="Edle fertige Lounge-Ecke im Garten" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
|
|
||||||
<div class="absolute inset-0 bg-gradient-to-t from-emerald-950/90 via-emerald-950/20 to-transparent p-5 flex flex-col justify-end opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
|
||||||
<p class="text-sm font-bold text-amber-400">3. Fertigstellung</p>
|
|
||||||
<p class="text-xs text-stone-200">Schlüsselfertige Wohlfühloasen</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="relative overflow-hidden rounded-2xl group aspect-[4/3] shadow-md border border-stone-200 bg-white">
|
|
||||||
<img src="https://images.unsplash.com/photo-1563514227147-6d2ff665a6a0?auto=format&fit=crop&w=600&q=80" alt="Lush green garden landscape" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
|
|
||||||
<div class="absolute inset-0 bg-gradient-to-t from-emerald-950/90 via-emerald-950/20 to-transparent p-5 flex flex-col justify-end opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
|
||||||
<p class="text-sm font-bold text-amber-400">4. Vegetation</p>
|
|
||||||
<p class="text-xs text-stone-200">Sattes Grün nach DIN 18320</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="faq" class="py-28 max-w-4xl mx-auto px-6">
|
|
||||||
<div class="text-center mb-16">
|
|
||||||
<h2 class="text-sm font-bold tracking-widest text-amber-700 uppercase">Häufige Fragen</h2>
|
|
||||||
<p class="mt-4 text-3xl sm:text-4xl font-luxury text-emerald-950 tracking-tight">Klarheit vor Baubeginn</p>
|
|
||||||
<div class="mt-4 w-12 h-1 bg-amber-600 mx-auto"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="space-y-4">
|
|
||||||
<div class="bg-white border border-stone-200 rounded-2xl p-6 transition-all duration-300 cursor-pointer" onclick="toggleFaq(this)">
|
|
||||||
<div class="flex justify-between items-center select-none">
|
|
||||||
<h3 class="font-bold text-emerald-950 text-base sm:text-lg">Warum ist eine Ausführung nach VOB für mich von Vorteil?</h3>
|
|
||||||
<i class="fa-solid fa-chevron-down faq-icon text-stone-400 transition-transform duration-300"></i>
|
|
||||||
</div>
|
|
||||||
<div class="faq-answer mt-3 text-stone-600 text-sm leading-relaxed">
|
|
||||||
Die VOB (Vergabe- und Vertragsordnung für Bauleistungen) regelt die Rechte und Pflichten zwischen Bauherr und Betrieb absolut fair und transparent. Sie schützt Sie vor versteckten Kosten, sichert Ihnen eine Abrechnung nach tatsächlich verbauten Mengen (Aufmaß) und garantiert eine klare Gewährleistungsregelung nach § 13 VOB/B.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-white border border-stone-200 rounded-2xl p-6 transition-all duration-300 cursor-pointer" onclick="toggleFaq(this)">
|
|
||||||
<div class="flex justify-between items-center select-none">
|
|
||||||
<h3 class="font-bold text-emerald-950 text-base sm:text-lg">Wie läuft die Abrechnung und das Aufmaß ab?</h3>
|
|
||||||
<i class="fa-solid fa-chevron-down faq-icon text-stone-400 transition-transform duration-300"></i>
|
|
||||||
</div>
|
|
||||||
<div class="faq-answer mt-3 text-stone-600 text-sm leading-relaxed">
|
|
||||||
Wir rechnen strikt nach den Berechnungsregeln der VOB/C ab. Vor Ort nehmen wir ein gemeinsames, prüffähiges Aufmaß aller erbrachten Leistungen (z. B. Quadratmeter Pflasterfläche oder Kubikmeter Bodenaushub). Sie zahlen exakt das, was geliefert und fachgerecht verbaut wurde.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="contact" class="py-24 bg-stone-100 border-t border-stone-200/80">
|
|
||||||
<div class="max-w-5xl mx-auto px-6 grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
|
||||||
<div>
|
|
||||||
<h2 class="text-4xl font-luxury font-bold text-emerald-950 leading-tight">Planungssicherheit für Ihr Projekt.</h2>
|
|
||||||
<p class="mt-4 text-stone-600 text-base">Reichen Sie uns Ihre Ausschreibungsunterlagen oder Ihre private Anfrage ein. Wir prüfen Ihr Vorhaben bautechnisch und erstellen ein normkonformes, transparentes Angebot.</p>
|
|
||||||
|
|
||||||
<div class="mt-8 space-y-4 font-mono text-sm">
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<div class="w-10 h-10 bg-white rounded-xl shadow-sm flex items-center justify-center text-emerald-800 border border-stone-200/60"><i class="fa-solid fa-phone"></i></div>
|
|
||||||
<a href="tel:061244654" class="font-bold text-emerald-950">06124 / 4654</a>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<div class="w-10 h-10 bg-white rounded-xl shadow-sm flex items-center justify-center text-emerald-800 border border-stone-200/60"><i class="fa-solid fa-envelope"></i></div>
|
|
||||||
<a href="mailto:info@gebrueder-brabetz.de" class="text-stone-700">info@gebrueder-brabetz.de</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bg-white p-8 rounded-3xl shadow-xl border border-stone-200/60">
|
|
||||||
<form onsubmit="handleFormSubmit(event)" class="space-y-4">
|
|
||||||
<div>
|
|
||||||
<label class="block text-[10px] font-bold uppercase tracking-wider text-stone-500 mb-1">Name / Institution *</label>
|
|
||||||
<input type="text" required class="w-full bg-stone-50 border border-stone-200 rounded-xl px-4 py-3 text-stone-900 focus:outline-none focus:border-emerald-700 transition text-sm">
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label class="block text-[10px] font-bold uppercase tracking-wider text-stone-500 mb-1">E-Mail Adresse *</label>
|
|
||||||
<input type="email" required class="w-full bg-stone-50 border border-stone-200 rounded-xl px-4 py-3 text-stone-900 focus:outline-none focus:border-emerald-700 transition text-sm">
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label class="block text-[10px] font-bold uppercase tracking-wider text-stone-500 mb-1">Leistungsbereich</label>
|
|
||||||
<select class="w-full bg-stone-50 border border-stone-200 rounded-xl px-4 py-3 text-stone-900 focus:outline-none focus:border-emerald-700 transition text-sm">
|
|
||||||
<option>Ausschreibung nach VOB (Öffentlich/Gewerblich)</option>
|
|
||||||
<option>Neuanlage / Privatgarten</option>
|
|
||||||
<option>Naturstein- & Hangbau</option>
|
|
||||||
<option>Smarte Bewässerungssysteme (IoT)</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label class="block text-[10px] font-bold uppercase tracking-wider text-stone-500 mb-1">Kurzbeschreibung des Bauvorhabens</label>
|
|
||||||
<textarea rows="3" placeholder="Ggf. m²-Angaben oder DIN-relevante Wünsche angeben..." class="w-full bg-stone-50 border border-stone-200 rounded-xl px-4 py-3 text-stone-900 focus:outline-none focus:border-emerald-700 transition text-sm"></textarea>
|
|
||||||
</div>
|
|
||||||
<button type="submit" class="w-full py-4 bg-emerald-900 hover:bg-emerald-800 text-white font-bold rounded-xl transition shadow-lg text-xs uppercase tracking-widest">Anfrage an die Bauleitung senden</button>
|
|
||||||
</form>
|
|
||||||
<div id="form-success" class="hidden mt-4 p-4 bg-emerald-50 border border-emerald-200 rounded-xl text-emerald-900 text-sm text-center font-medium">
|
|
||||||
🎉 Anfrage erfolgreich auf unserem sicheren Docker-Node verbucht. Die Bauleitung meldet sich umgehend.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<footer class="bg-stone-900 py-16 text-stone-400 border-t border-stone-950">
|
|
||||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid grid-cols-1 md:grid-cols-3 gap-12 text-sm">
|
|
||||||
<div>
|
|
||||||
<h4 class="font-semibold text-white mb-4 text-base tracking-wide">Betriebssitz</h4>
|
|
||||||
<p class="font-medium text-stone-200 text-base mb-1 font-luxury">Gebrüder Brabetz GmbH</p>
|
|
||||||
<p>Rheingau-Taunus-Kreis</p>
|
|
||||||
<p class="mt-3"><i class="fa-solid fa-phone text-amber-500 mr-2"></i> 06124 / 4654</p>
|
|
||||||
<p><i class="fa-solid fa-envelope text-amber-500 mr-2"></i> info@gebrueder-brabetz.de</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h4 class="font-semibold text-white mb-4 text-base tracking-wide">Rechtliches & Impressum</h4>
|
|
||||||
<p><strong>Geschäftsführung:</strong> Caspar Brabetz, Jakob Brabetz, Felix Brabetz</p>
|
|
||||||
<p><strong>Sitz der Gesellschaft:</strong> Rheingau-Taunus-Kreis</p>
|
|
||||||
<p><strong>Registereintrag:</strong> Amtsgericht Bad Schwalbach (i. Gr.)</p>
|
|
||||||
<p class="mt-3 text-xs text-stone-500 leading-relaxed">Verantwortlich für den Inhalt nach § 5 TMG: Caspar Brabetz, Jakob Brabetz, Felix Brabetz.</p>
|
|
||||||
</div>
|
|
||||||
<div class="text-right flex flex-col items-end justify-between">
|
|
||||||
<div class="flex items-center gap-3 mb-4">
|
|
||||||
<i class="fa-solid fa-compass-drafting text-amber-400 text-2xl"></i>
|
|
||||||
<span class="text-xl font-luxury font-bold text-white tracking-wider">Gebrüder Brabetz</span>
|
|
||||||
</div>
|
|
||||||
<div class="text-xs text-stone-500 font-mono">
|
|
||||||
<p>© 2026. Alle Rechte vorbehalten.</p>
|
|
||||||
<p class="mt-1">Hosted on local Docker Stack (brabetz-node)</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
const menuBtn = document.getElementById('menu-btn');
|
// SPA Page-Switcher Framework
|
||||||
const mobileMenu = document.getElementById('mobile-menu');
|
function switchPage(pageId) {
|
||||||
menuBtn.addEventListener('click', () => {
|
document.getElementById('main-page').classList.add('hidden');
|
||||||
mobileMenu.classList.toggle('hidden');
|
document.getElementById('page-mauer').classList.add('hidden');
|
||||||
});
|
document.getElementById('page-gewerbe').classList.add('hidden');
|
||||||
|
document.getElementById('page-contact').classList.add('hidden');
|
||||||
|
|
||||||
document.querySelectorAll('#mobile-menu a').forEach(link => {
|
const target = document.getElementById(pageId);
|
||||||
link.addEventListener('click', () => mobileMenu.classList.add('hidden'));
|
target.classList.remove('hidden');
|
||||||
});
|
target.classList.add('active');
|
||||||
|
|
||||||
function toggleFaq(element) {
|
// Charts verzögert zünden
|
||||||
element.classList.toggle('faq-active');
|
if(pageId === 'page-mauer') setTimeout(triggerMauerCharts, 50);
|
||||||
|
if(pageId === 'page-gewerbe') setTimeout(triggerGewerbeCharts, 50);
|
||||||
|
|
||||||
|
window.scrollTo(0, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// FAQ Toggle
|
||||||
|
function toggleFaq(element) { element.classList.toggle('faq-active'); }
|
||||||
|
|
||||||
|
// Formular Absendung (SPA Sub)
|
||||||
function handleFormSubmit(event) {
|
function handleFormSubmit(event) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
const successDiv = document.getElementById('form-success');
|
const successDiv = document.getElementById('form-success-sub');
|
||||||
successDiv.classList.remove('hidden');
|
successDiv.classList.remove('hidden');
|
||||||
event.target.reset();
|
event.target.reset();
|
||||||
setTimeout(() => successDiv.classList.add('hidden'), 7000);
|
setTimeout(() => successDiv.classList.add('hidden'), 7000);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// --- CHARTS ENGINE ---
|
||||||
|
let initializedCharts = {};
|
||||||
|
function triggerMauerCharts() {
|
||||||
|
if (initializedCharts['mauer']) return;
|
||||||
|
new Chart(document.getElementById('subChartMassen').getContext('2d'), {
|
||||||
|
type: 'pie',
|
||||||
|
data: {
|
||||||
|
labels: ['Erdaushub (m³)', 'Muschelkalk-Quader (t)', 'Filterschotter (m³)', 'Oberboden (m³)'],
|
||||||
|
datasets: [{ data: [140, 65, 38, 25], backgroundColor: ['#b45309', '#78716c', '#475569', '#15803d'], borderWidth: 0 }]
|
||||||
|
},
|
||||||
|
options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { labels: { color: '#d6d3d1' } } } }
|
||||||
|
});
|
||||||
|
new Chart(document.getElementById('subChartBoden').getContext('2d'), {
|
||||||
|
type: 'bar',
|
||||||
|
data: {
|
||||||
|
labels: ['Ist-Profil Baugrube'],
|
||||||
|
datasets: [
|
||||||
|
{ label: 'Mutterboden reaktiviert (20cm)', data: [20], backgroundColor: '#166534' },
|
||||||
|
{ label: 'Filterschicht / Drainage (40cm)', data: [40], backgroundColor: '#a16207' },
|
||||||
|
{ label: 'Baugrund stabilisiert (Klasse 4)', data: [80], backgroundColor: '#44403c' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
options: { responsive: true, maintainAspectRatio: false, scales: { x: { stacked: true, ticks: { color: '#d6d3d1' } }, y: { stacked: true, ticks: { color: '#d6d3d1' } } }, plugins: { legend: { labels: { color: '#d6d3d1' } } } }
|
||||||
|
});
|
||||||
|
initializedCharts['mauer'] = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function triggerGewerbeCharts() {
|
||||||
|
if (initializedCharts['gewerbe']) return;
|
||||||
|
new Chart(document.getElementById('subChartGantt').getContext('2d'), {
|
||||||
|
type: 'bar',
|
||||||
|
data: {
|
||||||
|
labels: ['1. Erdbau & Rigolenbettung', '2. Tragschichtherstellung', '3. Betonsteinpflasterdecke', '4. Großbaumpflanzung (DIN)'],
|
||||||
|
datasets: [{ data: [[1, 3], [2.5, 5], [4, 7], [6.5, 8]], backgroundColor: '#047857', borderRadius: 6 }]
|
||||||
|
},
|
||||||
|
options: { indexAxis: 'y', responsive: true, maintainAspectRatio: false, scales: { x: { min: 1, max: 9, ticks: { color: '#d6d3d1', callback: v => 'Woche ' + v } }, y: { ticks: { color: '#d6d3d1' } } }, plugins: { legend: { display: false } } }
|
||||||
|
});
|
||||||
|
initializedCharts['gewerbe'] = true;
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user