<!DOCTYPE html>

<html lang="de">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>BauStoffWechsel - Kreislaufwirtschaft für Baustoffe</title>

    <!-- Tailwind CSS -->

    <script src="https://cdn.tailwindcss.com"></script>

    <script>

        tailwind.config = {

            theme: {

                extend: {

                    colors: {

                        moss: '#2E5A44',

                        terra: '#8B5A36',

                        slateDark: '#343A40',

                        creamBg: '#F8F9FA'

                    }

                }

            }

        }

    </script>

    <!-- Leaflet CSS für die Karte -->

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />

    <style>

        #map { height: 400px; width: 100%; border-radius: 0.75rem; }

    </style>

</head>

<body class="bg-creamBg text-slateDark font-sans antialiased min-h-screen flex flex-col">

    <!-- Header -->

    <header class="bg-white border-b border-gray-200 sticky top-0 z-50">

        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">

            <div class="flex items-center space-x-3">

                <div class="w-10 h-10 bg-moss rounded-lg flex items-center justify-center text-white font-bold text-xl shadow-md">

                    BSW

                </div>

                <div>

                    <h1 class="text-lg font-bold tracking-tight text-slateDark leading-tight">BauStoffWechsel</h1>

                    <span class="text-xs text-terra font-medium">Kreislaufwirtschaft für Aushub & Baustoffe</span>

                </div>

            </div>

            <nav class="hidden md:flex items-center space-x-6 text-sm font-medium">

                <a href="#" class="text-moss font-semibold hover:text-terra transition">Marktplatz</a>

                <a href="#" class="text-gray-600 hover:text-moss transition">Material anbieten</a>

                <a href="#" class="text-gray-600 hover:text-moss transition">Logistik-Partner</a>

                <a href="#" class="text-gray-600 hover:text-moss transition">Über uns</a>

            </nav>

            <div>

                <button class="bg-moss hover:bg-opacity-90 text-white px-4 py-2 rounded-lg text-sm font-medium shadow-sm transition">

                    + Inserat erstellen

                </button>

            </div>

        </div>

    </header>

    <!-- Main Content -->

    <main class="flex-grow max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8">

        <!-- Hero & Filter Bar -->

        <div class="mb-8">

            <h2 class="text-2xl sm:text-3xl font-extrabold text-slateDark mb-2">Überschüssige Baustoffe & Aushub in deiner Nähe</h2>

            <p class="text-gray-600 text-sm sm:text-base">Vermeide Entsorgungskosten. Finde direkt vor Ort wiederverwertbare Materialien oder biete deine an.</p>

        </div>

        <!-- Filter & Search Section -->

        <div class="bg-white p-4 sm:p-6 rounded-xl shadow-sm border border-gray-200 mb-8 grid grid-cols-1 sm:grid-cols-4 gap-4">

            <div>

                <label class="block text-xs font-semibold uppercase text-gray-500 mb-1">Kategorie</label>

                <select class="w-full border border-gray-300 rounded-lg p-2.5 text-sm focus:ring-2 focus:ring-moss focus:outline-none">

                    <option>Alle Kategorien</option>

                    <option>Aushub & Mutterboden</option>

                    <option>Kies, Sand & Schotter</option>

                    <option>Steine & Pflaster</option>

                    <option>Holz & Baustoffe</option>

                </select>

            </div>

            <div>

                <label class="block text-xs font-semibold uppercase text-gray-500 mb-1">Standort / PLZ</label>

                <input type="text" placeholder="z. B. 57392 Schmallenberg" class="w-full border border-gray-300 rounded-lg p-2.5 text-sm focus:ring-2 focus:ring-moss focus:outline-none">

            </div>

            <div>

                <label class="block text-xs font-semibold uppercase text-gray-500 mb-1">Umkreis</label>

                <select class="w-full border border-gray-300 rounded-lg p-2.5 text-sm focus:ring-2 focus:ring-moss focus:outline-none">

                    <option>Bis 10 km</option>

                    <option selected>Bis 25 km</option>

                    <option>Bis 50 km</option>

                </select>

            </div>

            <div class="flex items-end">

                <button class="w-full bg-terra hover:bg-opacity-90 text-white font-medium py-2.5 px-4 rounded-lg text-sm shadow-sm transition">

                    Suchen & Filtern

                </button>

            </div>

        </div>

        <!-- Layout Grid: Map & Listings -->

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">

            <!-- Left 2 Columns: Listings -->

            <div class="lg:col-span-2 space-y-4">

                <div class="flex justify-between items-center">

                    <h3 class="font-bold text-lg text-slateDark">Aktuelle Angebote (3)</h3>

                    <span class="text-xs text-gray-500">Sortiert nach Entfernung</span>

                </div>

                <!-- Inserat 1 -->

                <div class="bg-white rounded-xl p-5 border border-gray-200 shadow-sm hover:shadow-md transition flex flex-col sm:flex-row gap-4">

                    <div class="w-full sm:w-40 h-32 bg-gray-100 rounded-lg flex items-center justify-center text-gray-400 font-medium text-xs">

                        [ Foto: Mutterboden ]

                    </div>

                    <div class="flex-grow flex flex-col justify-between">

                        <div>

                            <div class="flex justify-between items-start">

                                <span class="bg-moss text-white text-xs px-2 py-0.5 rounded font-medium mb-1 inline-block">Privat (C2C)</span>

                                <span class="text-xs text-gray-500">vor 2 Std. • 4.2 km entfernt</span>

                            </div>

                            <h4 class="font-bold text-base text-slateDark mt-1">ca. 12 m³ gesiebter Mutterboden abzugeben</h4>

                            <p class="text-sm text-gray-600 mt-1">Perfekt zum Auffüllen des Gartens. Selbstabholung bevorzugt, LKW-Zufahrt problemlos möglich.</p>

                        </div>

                        <div class="flex items-center justify-between mt-4 pt-3 border-t border-gray-100">

                            <div>

                                <span class="text-xs text-gray-500">Preis:</span>

                                <span class="font-bold text-moss text-sm ml-1">Zu verschenken</span>

                            </div>

                            <button onclick="openModal()" class="bg-gray-100 hover:bg-moss hover:text-white text-slateDark text-xs font-semibold px-3 py-2 rounded-lg transition">

                                Details & Transport anfragen

                            </button>

                        </div>

                    </div>

                </div>

                <!-- Inserat 2 -->

                <div class="bg-white rounded-xl p-5 border border-gray-200 shadow-sm hover:shadow-md transition flex flex-col sm:flex-row gap-4">

                    <div class="w-full sm:w-40 h-32 bg-gray-100 rounded-lg flex items-center justify-center text-gray-400 font-medium text-xs">

                        [ Foto: Schotter ]

                    </div>

                    <div class="flex-grow flex flex-col justify-between">

                        <div>

                            <div class="flex justify-between items-start">

                                <span class="bg-slateDark text-white text-xs px-2 py-0.5 rounded font-medium mb-1 inline-block">Gewerbe (B2C)</span>

                                <span class="text-xs text-gray-500">gestern • 8.5 km entfernt</span>

                            </div>

                            <h4 class="font-bold text-base text-slateDark mt-1">Schottertragschicht 0/32 (Restposten)</h4>

                            <p class="text-sm text-gray-600 mt-1">Übrig geblieben von Baustelle. Ca. 8 Tonnen. Verladung mit Radlader vor Ort.</p>

                        </div>

                        <div class="flex items-center justify-between mt-4 pt-3 border-t border-gray-100">

                            <div>

                                <span class="text-xs text-gray-500">Preis:</span>

                                <span class="font-bold text-slateDark text-sm ml-1">45,00 € / Tonne</span>

                            </div>

                            <button onclick="openModal()" class="bg-gray-100 hover:bg-moss hover:text-white text-slateDark text-xs font-semibold px-3 py-2 rounded-lg transition">

                                Details & Transport anfragen

                            </button>

                        </div>

                    </div>

                </div>

            </div>

            <!-- Right Column: Interactive Map -->

            <div class="lg:col-span-1">

                <div class="bg-white p-4 rounded-xl border border-gray-200 shadow-sm sticky top-24">

                    <h3 class="font-bold text-sm text-slateDark mb-3">Standort-Übersicht</h3>

                    <div id="map"></div>

                    <div class="mt-3 flex items-center justify-between text-xs text-gray-500">

                        <span class="flex items-center"><span class="w-3 h-3 bg-moss rounded-full inline-block mr-1"></span> Privat</span>

                        <span class="flex items-center"><span class="w-3 h-3 bg-slateDark rounded-full inline-block mr-1"></span> Gewerbe</span>

                    </div>

                </div>

            </div>

        </div>

    </main>

    <!-- Transport & Detail Modal (Hidden by Default) -->

    <div id="transportModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50 p-4">

        <div class="bg-white rounded-xl max-w-lg w-full p-6 shadow-xl relative">

            <button onclick="closeModal()" class="absolute top-4 right-4 text-gray-400 hover:text-gray-600 font-bold">✕</button>

            <h3 class="text-xl font-bold text-slateDark mb-1">Inserats-Details & Logistik</h3>

            <p class="text-xs text-terra font-medium mb-4">Inklusive integrierter Transportvermittlung durch Drittanbieter</p>

            <div class="bg-creamBg p-4 rounded-lg mb-4 text-sm space-y-2">

                <div class="flex justify-between"><span class="text-gray-600">Material:</span> <span class="font-semibold text-slateDark">Mutterboden (12 m³)</span></div>

                <div class="flex justify-between"><span class="text-gray-600">Standort:</span> <span class="font-semibold text-slateDark">Schmallenberg (ca. 4.2 km)</span></div>

                <div class="flex justify-between"><span class="text-gray-600">Anbieter:</span> <span class="font-semibold text-slateDark">Privatperson (Verifiziert)</span></div>

            </div>

            <div class="border-t border-gray-200 pt-4 mb-6">

                <h4 class="font-bold text-sm text-slateDark mb-2">🚚 Transport-Option buchen (USP)</h4>

                <p class="text-xs text-gray-600 mb-3">Du hast keinen eigenen Anhänger? Lass dir das Material direkt von unserem regionalen Logistikpartner liefern.</p>

                <div class="border border-moss bg-moss bg-opacity-5 p-3 rounded-lg flex items-center justify-between">

                    <div>

                        <div class="text-xs font-bold text-moss">Regionales Transport-Paket</div>

                        <div class="text-xs text-gray-600">Inkl. LKW mit Liederkran / Kippmulde (ca. 25 km Radius)</div>

                    </div>

                    <div class="text-right">

                        <span class="text-sm font-bold text-slateDark">ca. 120,00 €</span>

                        <div class="text-[10px] text-gray-500">pauschal</div>

                    </div>

                </div>

            </div>

            <div class="flex space-x-3">

                <button onclick="closeModal()" class="flex-1 bg-gray-100 hover:bg-gray-200 text-slateDark font-medium py-2 rounded-lg text-sm transition">Schließen</button>

                <button onclick="alert('Anfrage erfolgreich an Anbieter und Transporteur übermittelt!'); closeModal();" class="flex-1 bg-moss hover:bg-opacity-90 text-white font-medium py-2 rounded-lg text-sm shadow-sm transition">Verbindlich anfragen</button>

            </div>

        </div>

    </div>

    <!-- Footer -->

    <footer class="bg-white border-t border-gray-200 mt-12 py-6 text-center text-xs text-gray-500">

        &copy; 2026 BauStoffWechsel. Alle Rechte vorbehalten. | <a href="#" class="hover:underline">Impressum</a> | <a href="#" class="hover:underline">Datenschutz</a>

    </footer>

    <!-- Leaflet JS -->

    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

    <script>

        // Initialize Map

        const map = L.map('map').setView([51.15, 8.28], 11);

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {

            attribution: '&copy; OpenStreetMap contributors'

        }).addTo(map);

        // Simple Markers

        L.marker([51.16, 8.27]).addTo(map).bindPopup('<b>Mutterboden (Privat)</b><br>4.2 km entfernt');

        L.marker([51.13, 8.30]).addTo(map).bindPopup('<b>Schotter (Gewerbe)</b><br>8.5 km entfernt');

        // Modal Functions

        function openModal() {

            document.getElementById('transportModal').classList.remove('hidden');

            document.getElementById('transportModal').classList.add('flex');

        }

        function closeModal() {

            document.getElementById('transportModal').classList.add('hidden');

            document.getElementById('transportModal').classList.remove('flex');

        }

    </script>

</body>

</html>