Premium Design- & Bild-Upgrade, VOB-Standards und Traefik-Netzwerk-Fix
This commit is contained in:
Felix
+12
-16
@@ -1,25 +1,21 @@
|
||||
networks:
|
||||
traefik_proxy:
|
||||
external: true
|
||||
|
||||
services:
|
||||
galabau-site:
|
||||
brabetz-homepage:
|
||||
image: nginx:alpine
|
||||
container_name: brabetz-homepage
|
||||
restart: unless-stopped
|
||||
read_only: true
|
||||
tmpfs:
|
||||
- /var/cache/nginx
|
||||
- /var/run
|
||||
restart: always
|
||||
volumes:
|
||||
- ./src:/usr/share/nginx/html:ro
|
||||
networks:
|
||||
- traefik_proxy
|
||||
labels:
|
||||
- "traefik.enable=true"
|
||||
# Erreichbar unter galabau.deine-domain.de
|
||||
- "traefik.http.routers.brabetz_site.rule=Host(`galabau.${DOMAIN}`)"
|
||||
- "traefik.http.routers.brabetz_site.entrypoints=websecure"
|
||||
- "traefik.http.routers.brabetz_site.tls.certresolver=myresolver"
|
||||
- "traefik.http.services.brabetz_site.loadbalancer.server.port=80"
|
||||
- "traefik.docker.network=traefik_proxy"
|
||||
# Hauptrouter für alle drei Domains
|
||||
- "traefik.http.routers.brabetz-home.rule=Host(`galabau.brabros.de`) || Host(`gebrueder-brabetz.de`) || Host(`www.gebrueder-brabetz.de`)"
|
||||
- "traefik.http.routers.brabetz-home.entrypoints=websecure"
|
||||
- "traefik.http.routers.brabetz-home.tls=true"
|
||||
- "traefik.http.routers.brabetz-home.tls.certresolver=myresolver"
|
||||
- "traefik.http.services.brabetz-home.loadbalancer.server.port=80"
|
||||
|
||||
networks:
|
||||
traefik_proxy:
|
||||
external: true
|
||||
|
||||
+219
-154
@@ -3,161 +3,240 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Gebrüder Brabetz - Meisterhafter Garten- & Landschaftsbau</title>
|
||||
<title>Gebrüder Brabetz GmbH - Meisterhafter Garten- & Landschaftsbau nach VOB</title>
|
||||
<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="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Merriweather:wght@400;700&display=swap" rel="stylesheet">
|
||||
<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">
|
||||
<style>
|
||||
.font-serif { font-family: 'Merriweather', serif; }
|
||||
.font-sans { font-family: 'DM Sans', sans-serif; }
|
||||
.font-luxury { font-family: 'Cinzel', 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-active .faq-answer { max-height: 200px; }
|
||||
.faq-active .faq-answer { max-height: 300px; }
|
||||
.faq-active .faq-icon { transform: rotate(180deg); }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-stone-50 text-stone-900 font-sans antialiased selection:bg-emerald-100 selection:text-emerald-900">
|
||||
<body class="bg-stone-50 text-stone-900 font-sans antialiased selection:bg-emerald-800 selection:text-white">
|
||||
|
||||
<nav class="fixed w-full bg-stone-50/95 backdrop-blur-sm z-50 shadow-sm border-b border-stone-100">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-20 flex items-center justify-between">
|
||||
<a href="#" class="flex items-center gap-3 group">
|
||||
<i class="fa-solid fa-seedling text-emerald-700 text-3xl group-hover:scale-110 transition-transform"></i>
|
||||
<nav class="fixed w-full bg-stone-50/95 backdrop-blur-md z-50 shadow-sm border-b border-stone-200/60">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-24 flex items-center justify-between">
|
||||
<a href="#" class="flex items-center gap-4 group">
|
||||
<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-2xl font-serif font-bold text-emerald-900 tracking-tight">Gebrüder Brabetz</span>
|
||||
<span class="text-xs font-medium text-stone-600 uppercase tracking-widest -mt-1">Garten- & Landschaftsbau</span>
|
||||
<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 md:flex items-center gap-8 text-sm font-medium text-stone-700">
|
||||
<a href="#services" class="hover:text-emerald-700 transition">Leistungen</a>
|
||||
<a href="#gallery" class="hover:text-emerald-700 transition">Referenzen</a>
|
||||
<a href="#about" class="hover:text-emerald-700 transition">Über uns</a>
|
||||
<a href="#faq" class="hover:text-emerald-700 transition">FAQ</a>
|
||||
<a href="#contact" class="bg-emerald-700 hover:bg-emerald-600 text-white px-5 py-2.5 rounded-full transition shadow-md shadow-emerald-700/10">Angebot einholen</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>
|
||||
|
||||
<button id="menu-btn" class="md:hidden text-stone-700 focus:outline-none text-2xl">
|
||||
<i class="fa-solid fa-bars"></i>
|
||||
<button id="menu-btn" class="lg:hidden text-stone-800 focus:outline-none text-2xl">
|
||||
<i class="fa-solid fa-bars-staggered"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="mobile-menu" class="hidden md:hidden bg-stone-50 border-b border-stone-200 px-4 pt-2 pb-6 space-y-3 shadow-lg">
|
||||
<a href="#services" class="block text-stone-700 font-medium hover:text-emerald-700 py-2">Leistungen</a>
|
||||
<a href="#gallery" class="block text-stone-700 font-medium hover:text-emerald-700 py-2">Referenzen</a>
|
||||
<a href="#about" class="block text-stone-700 font-medium hover:text-emerald-700 py-2">Über uns</a>
|
||||
<a href="#faq" class="block text-stone-700 font-medium hover:text-emerald-700 py-2">FAQ</a>
|
||||
<a href="#contact" class="block text-center bg-emerald-700 text-white px-4 py-2.5 rounded-xl font-medium">Angebot einholen</a>
|
||||
<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">
|
||||
<a href="#standards" class="block font-medium text-stone-800 hover:text-emerald-800">VOB-Standards</a>
|
||||
<a href="#services" class="block font-medium text-stone-800 hover:text-emerald-800">Leistungsbereiche</a>
|
||||
<a href="#projects" class="block font-medium text-stone-800 hover:text-emerald-800">Referenzprojekte</a>
|
||||
<a href="#faq" class="block font-medium text-stone-800 hover:text-emerald-800">FAQ</a>
|
||||
<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-[95vh] flex items-center justify-center pt-20 overflow-hidden bg-emerald-950">
|
||||
<img src="https://images.unsplash.com/photo-1558904541-efa8c3a30fc9?auto=format&fit=crop&w=1920&q=80" alt="Moderner Garten" class="absolute inset-0 w-full h-full object-cover opacity-55">
|
||||
<div class="absolute inset-0 bg-gradient-to-b from-emerald-950/20 via-emerald-950/50 to-stone-50"></div>
|
||||
<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-sm font-bold tracking-widest text-emerald-300 uppercase bg-emerald-900/40 px-4 py-1.5 rounded-full border border-emerald-800/50 backdrop-blur-sm">Natur & Handwerk im Rheingau-Taunus</span>
|
||||
<h1 class="mt-8 text-5xl sm:text-7xl font-serif font-bold tracking-tight text-white leading-tight">
|
||||
Wir erwecken Ihren<br>
|
||||
<span class="text-emerald-400">Traumgarten</span> zum Leben.
|
||||
<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-xl text-stone-200 max-w-2xl mx-auto leading-relaxed">
|
||||
Meisterhafter Gartenbau kombiniert mit innovativer 3D-Planung. Wir gestalten Wohlfühloasen, die Generationen überdauern.
|
||||
<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-emerald-600 hover:bg-emerald-500 text-white font-semibold rounded-xl shadow-lg shadow-emerald-600/20 transition-all transform hover:-translate-y-0.5 text-lg">Kostenloses Erstgespräch</a>
|
||||
<a href="#services" class="px-8 py-4 bg-white/10 hover:bg-white/20 text-white font-medium rounded-xl border border-white/20 transition-all backdrop-blur-sm">Unsere Leistungen</a>
|
||||
<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>
|
||||
</header>
|
||||
|
||||
<section class="relative z-10 -mt-16 max-w-6xl mx-auto px-4">
|
||||
<div class="bg-white rounded-3xl shadow-xl border border-stone-100 p-8 grid grid-cols-2 md:grid-cols-4 gap-6 text-center">
|
||||
<div>
|
||||
<p class="text-3xl font-serif font-bold text-emerald-900">25+</p>
|
||||
<p class="text-xs text-stone-500 uppercase tracking-wider font-medium mt-1">Jahre Erfahrung</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-3xl font-serif font-bold text-emerald-900">400+</p>
|
||||
<p class="text-xs text-stone-500 uppercase tracking-wider font-medium mt-1">Projekte vollendet</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-3xl font-serif font-bold text-emerald-900">3 Brüder</p>
|
||||
<p class="text-xs text-stone-500 uppercase tracking-wider font-medium mt-1">Ein Wort & Versprechen</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-3xl font-serif font-bold text-emerald-900">100%</p>
|
||||
<p class="text-xs text-stone-500 uppercase tracking-wider font-medium mt-1">Smarte Datensouveränität</p>
|
||||
<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 class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
|
||||
<div class="lg:col-span-5">
|
||||
<span class="text-xs font-bold tracking-widest text-amber-700 uppercase">Rechtssicherheit & Qualität</span>
|
||||
<h2 class="mt-3 text-3xl sm:text-4xl font-luxury font-bold text-emerald-950 tracking-wide">Bauausführung nach strengem Regelwerk</h2>
|
||||
<div class="mt-4 w-12 h-1 bg-amber-600"></div>
|
||||
<p class="mt-6 text-stone-600 leading-relaxed">
|
||||
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.
|
||||
</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>
|
||||
</section>
|
||||
|
||||
<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-600 uppercase">Unser Handwerk</h2>
|
||||
<p class="mt-4 text-4xl font-serif font-bold text-emerald-900 sm:text-5xl tracking-tight">Vom Entwurf bis zur Vollendung</p>
|
||||
<div class="mt-6 w-20 h-1 bg-amber-600 mx-auto"></div>
|
||||
<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-10">
|
||||
<div class="bg-white p-10 rounded-3xl border border-stone-100 shadow-xl shadow-stone-500/5 transition hover:shadow-emerald-900/5 group">
|
||||
<div class="w-16 h-16 bg-emerald-50 rounded-2xl flex items-center justify-center text-emerald-700 text-2xl mb-8 group-hover:bg-emerald-700 group-hover:text-white transition-all">
|
||||
<i class="fa-solid fa-compass-drafting"></i>
|
||||
<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>
|
||||
<h3 class="text-2xl font-semibold text-emerald-950 mb-4">Planung & Design</h3>
|
||||
<p class="text-stone-600 text-base leading-relaxed">Individuelle 3D-Gartenarchitektur, die Ihre Wünsche exakt visualisiert, Höhenunterschiede ausgleicht und Schattenverläufe simuliert.</p>
|
||||
<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 p-10 rounded-3xl border border-stone-100 shadow-xl shadow-stone-500/5 transition hover:shadow-emerald-900/5 group">
|
||||
<div class="w-16 h-16 bg-emerald-50 rounded-2xl flex items-center justify-center text-emerald-700 text-2xl mb-8 group-hover:bg-emerald-700 group-hover:text-white transition-all">
|
||||
<i class="fa-solid fa-mountain-sun"></i>
|
||||
<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>
|
||||
<h3 class="text-2xl font-semibold text-emerald-950 mb-4">Hardscape & Bau</h3>
|
||||
<p class="text-stone-600 text-base leading-relaxed">Terrassenbau, langlebige Natursteinmauern, Pflasterarbeiten, Zaunbau und meisterhafte Steinkunst präzise ausgeführt.</p>
|
||||
<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 p-10 rounded-3xl border border-stone-100 shadow-xl shadow-stone-500/5 transition hover:shadow-emerald-900/5 group">
|
||||
<div class="w-16 h-16 bg-emerald-50 rounded-2xl flex items-center justify-center text-emerald-700 text-2xl mb-8 group-hover:bg-emerald-700 group-hover:text-white transition-all">
|
||||
<i class="fa-solid fa-faucet-drip"></i>
|
||||
<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>
|
||||
<h3 class="text-2xl font-semibold text-emerald-950 mb-4">Smart Garden (IoT)</h3>
|
||||
<p class="text-stone-600 text-base leading-relaxed">Automatisierte Bewässerungsanlagen, integrierte Bodenfeuchtesensoren und atmosphärische Lichtsteuerung – gehostet auf dem GreenStack.</p>
|
||||
<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="gallery" class="py-28 bg-stone-950 text-stone-200">
|
||||
<section id="projects" class="py-28 bg-emerald-950 text-white overflow-hidden">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-3xl mb-16">
|
||||
<span class="text-xs font-bold tracking-[0.2em] text-amber-400 uppercase">Dokumentierte Bauvorhaben</span>
|
||||
<h2 class="mt-3 text-3xl sm:text-5xl font-luxury font-bold tracking-wide">Referenzen & Bautagebuch</h2>
|
||||
<div class="mt-4 w-12 h-1 bg-amber-500"></div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-16">
|
||||
<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 relative aspect-[4/3] rounded-2xl overflow-hidden shadow-xl">
|
||||
<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>
|
||||
<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">Privatobjekt Rheingau</span>
|
||||
<span class="text-[10px] font-mono text-emerald-300">VOB/C konform</span>
|
||||
</div>
|
||||
<h3 class="text-2xl font-luxury font-bold tracking-wide text-white">Hangterrassierung mit Schichtmauerwerk</h3>
|
||||
|
||||
<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="font-bold border-b border-emerald-800 pb-1 text-amber-400 uppercase tracking-wider">Auszug aus dem Leistungsverzeichnis (LV)</div>
|
||||
<div><strong class="text-white">Pos 01.02:</strong> 140 m³ Erdaushub inkl. Entsorgung und Deponierung nach DIN 18915.</div>
|
||||
<div><strong class="text-white">Pos 03.11:</strong> 45 lfm Muschelkalk-Trockenmauerwerk, zweihäuptig, Fundamentierung nach ZTV-ING.</div>
|
||||
<div><strong class="text-white">Abrechnung:</strong> Nach tatsächlich genommenem, prüffähigem Aufmaß.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<h3 class="text-2xl font-luxury font-bold tracking-wide text-white">Wegebau, Großbaumpflanzung & Rigolenversickerung</h3>
|
||||
|
||||
<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="font-bold border-b border-emerald-800 pb-1 text-amber-400 uppercase tracking-wider">Auszug aus dem Leistungsverzeichnis (LV)</div>
|
||||
<div><strong class="text-white">Pos 02.04:</strong> 650 m² Großformat-Betonsteinpflaster mit niveaugleicher Tragschichtherstellung Ev2 ≥ 45 MPa.</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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-emerald-400 uppercase">Referenzen</h2>
|
||||
<p class="mt-4 text-4xl font-serif font-bold text-white sm:text-5xl tracking-tight">Meisterwerke aus unserer Hand</p>
|
||||
<div class="mt-6 w-20 h-1 bg-amber-500 mx-auto"></div>
|
||||
<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-lg">
|
||||
<img src="https://images.unsplash.com/photo-1585320806297-9794b3e4eeae?auto=format&fit=crop&w=600&q=80" alt="Gartenplanung" 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-black/80 via-black/20 to-transparent p-6 flex flex-col justify-end">
|
||||
<p class="text-sm font-bold text-emerald-300">Designphase</p>
|
||||
<p class="text-xs text-stone-400">Präzise 3D-Visualisierung</p>
|
||||
<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-lg">
|
||||
<img src="https://images.unsplash.com/photo-1592417817098-8f3d6eb19675?auto=format&fit=crop&w=600&q=80" alt="Steinarbeiten" 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-black/80 via-black/20 to-transparent p-6 flex flex-col justify-end">
|
||||
<p class="text-sm font-bold text-emerald-300">Umsetzung</p>
|
||||
<p class="text-xs text-stone-400">Natursteinpflasterung</p>
|
||||
<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-lg">
|
||||
<img src="https://images.unsplash.com/photo-1560568082-c15188aa6510?auto=format&fit=crop&w=600&q=80" alt="Moderner 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-black/80 via-black/20 to-transparent p-6 flex flex-col justify-end">
|
||||
<p class="text-sm font-bold text-emerald-300">Vollendung</p>
|
||||
<p class="text-xs text-stone-400">Wellness-Oase im Grünen</p>
|
||||
<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-lg">
|
||||
<img src="https://images.unsplash.com/photo-1558904541-efa8c3a30fc9?auto=format&fit=crop&w=600&q=80" alt="Smart Garden" 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-black/80 via-black/20 to-transparent p-6 flex flex-col justify-end">
|
||||
<p class="text-sm font-bold text-emerald-300">GreenStack IoT</p>
|
||||
<p class="text-xs text-stone-400">Smarte Bewässerungssteuerung</p>
|
||||
<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>
|
||||
@@ -166,56 +245,48 @@
|
||||
|
||||
<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-600 uppercase">Häufige Fragen</h2>
|
||||
<p class="mt-4 text-4xl font-serif font-bold text-emerald-900 tracking-tight">Klarheit von Anfang an</p>
|
||||
<div class="mt-4 w-16 h-1 bg-amber-600 mx-auto"></div>
|
||||
<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-semibold text-lg text-emerald-950">Wie läuft ein Projekt bei den Gebrüdern Brabetz ab?</h3>
|
||||
<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">
|
||||
Alles beginnt mit einem kostenlosen Erstgespräch bei Ihnen vor Ort im Rheingau-Taunus-Kreis. Danach erstellen wir eine präzise 3D-Planung. Erst wenn Sie zu 100 % zufrieden sind, rücken wir mit unserem Maschinenpark zur meisterhaften Umsetzung an.
|
||||
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-semibold text-lg text-emerald-950">Was verbirgt sich hinter dem "GreenStack IoT"?</h3>
|
||||
<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 überlassen Ihre Gartendaten nicht fremden US-Cloud-Konzernen. Die digitale Steuerung Ihrer Bewässerung und Beleuchtung läuft über einen gesicherten, selbstgehosteten Docker-Stack direkt auf unserer eigenen Server-Infrastruktur. Das bedeutet absolute Datensouveränität und Ausfallsicherheit für Sie.
|
||||
</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-semibold text-lg text-emerald-950">Übernehmen Sie auch kleinere Pflaster- oder Pflegearbeiten?</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">
|
||||
Ja, absolut! Wir realisieren exklusive Großprojekte ebenso leidenschaftlich wie kleinere Anpassungen, Zaunbau, Terrassenerweiterungen oder den fachgerechten Baumschnitt bei Ihnen im Garten.
|
||||
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">
|
||||
<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-serif font-bold text-emerald-900 leading-tight">Lass uns gemeinsam Großes erschaffen.</h2>
|
||||
<p class="mt-4 text-stone-600 text-lg">Sende uns eine unverbindliche Anfrage. Wir melden uns innerhalb von 24 Stunden bei dir, um einen gemeinsamen Vor-Ort-Termin zu vereinbaren.</p>
|
||||
<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">
|
||||
<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 flex items-center justify-center text-emerald-700"><i class="fa-solid fa-phone"></i></div>
|
||||
<a href="tel:061244654" class="font-bold text-lg text-emerald-950 hover:text-emerald-700 transition">06124 / 4654</a>
|
||||
<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 flex items-center justify-center text-emerald-700"><i class="fa-solid fa-envelope"></i></div>
|
||||
<a href="mailto:info@gebrueder-brabetz.de" class="font-medium text-stone-700 hover:text-emerald-700 transition">info@gebrueder-brabetz.de</a>
|
||||
<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>
|
||||
@@ -223,30 +294,30 @@
|
||||
<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-xs font-semibold uppercase tracking-wider text-stone-500 mb-1">Name *</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-600 transition text-sm">
|
||||
<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-xs font-semibold 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-600 transition text-sm">
|
||||
<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-xs font-semibold uppercase tracking-wider text-stone-500 mb-1">Projektart</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-600 transition text-sm">
|
||||
<option>Komplette Neugestaltung</option>
|
||||
<option>Terrassen- & Steinarbeiten</option>
|
||||
<option>Smart Garden & Bewässerung</option>
|
||||
<option>Gartenpflege & Holzarbeiten</option>
|
||||
<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-xs font-semibold uppercase tracking-wider text-stone-500 mb-1">Deine Nachricht</label>
|
||||
<textarea rows="3" placeholder="Beschreibe kurz dein Vorhaben..." 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-600 transition text-sm"></textarea>
|
||||
<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-700 hover:bg-emerald-600 text-white font-semibold rounded-xl transition shadow-lg shadow-emerald-700/10 text-sm tracking-wide uppercase">Anfrage absenden</button>
|
||||
<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-800 text-sm text-center font-medium">
|
||||
🎉 Danke! Deine Anfrage ist sicher auf unserem Server gelandet. Wir melden uns!
|
||||
<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>
|
||||
@@ -255,59 +326,53 @@
|
||||
<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">Kontakt</h4>
|
||||
<p class="font-medium text-stone-200 text-base mb-1">Gebrüder Brabetz GmbH</p>
|
||||
<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-emerald-400 mr-2"></i> 06124 / 4654</p>
|
||||
<p><i class="fa-solid fa-envelope text-emerald-400 mr-2"></i> info@gebrueder-brabetz.de</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">Impressum</h4>
|
||||
<p><strong>Vertreten durch die Gebrüder:</strong> Caspar Brabetz, Jakob Brabetz, Felix Brabetz</p>
|
||||
<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-2 mb-4">
|
||||
<i class="fa-solid fa-seedling text-emerald-400 text-xl"></i>
|
||||
<span class="text-lg font-serif font-bold text-white tracking-tight">Gebrüder Brabetz</span>
|
||||
<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">
|
||||
<div class="text-xs text-stone-500 font-mono">
|
||||
<p>© 2026. Alle Rechte vorbehalten.</p>
|
||||
<p class="mt-1">Hosted safely on our own Docker Stack (brabetz-node)</p>
|
||||
<p class="mt-1">Hosted on local Docker Stack (brabetz-node)</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// Mobile Menu Toggle
|
||||
const menuBtn = document.getElementById('menu-btn');
|
||||
const mobileMenu = document.getElementById('mobile-menu');
|
||||
menuBtn.addEventListener('click', () => {
|
||||
mobileMenu.classList.toggle('hidden');
|
||||
});
|
||||
|
||||
// Schließen des mobilen Menüs bei Klick auf Link
|
||||
document.querySelectorAll('#mobile-menu a').forEach(link => {
|
||||
link.addEventListener('click', () => mobileMenu.classList.add('hidden'));
|
||||
});
|
||||
|
||||
// FAQ Akkordeon Toggle
|
||||
function toggleFaq(element) {
|
||||
element.classList.toggle('faq-active');
|
||||
}
|
||||
|
||||
// Formular Absendungs-Simulation
|
||||
function handleFormSubmit(event) {
|
||||
event.preventDefault();
|
||||
const successDiv = document.getElementById('form-success');
|
||||
successDiv.classList.remove('hidden');
|
||||
event.target.reset();
|
||||
setTimeout(() => {
|
||||
successDiv.classList.add('hidden');
|
||||
}, 6000);
|
||||
setTimeout(() => successDiv.classList.add('hidden'), 7000);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user