<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Autohaus</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #b3d9ff;
            background-image: url('Bilder/NC_Bild2.webp');
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: top;
            padding-top: 100px;
        }
        .navbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: rgba(0, 0, 0, 0.8);
            padding: 10px;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1000;
        }
        .navbar img {
            height: 80px;
            margin-right: 40px;
        }
        .menu {
            display: flex;
            padding: 10px;
        }
        .menu > a, .dropdown > a {
            display: inline-block;
            padding: 0px 15px;
            text-decoration: none;
            color: #fff;
            background-color: #000;
            height: 40px;
            line-height: 40px;
            border: 2px solid #89CFF0;
            border-radius: 5px;
            margin: 0 5px;
            transition: all 0.3s ease-in-out;
            box-shadow: 0 0 10px #89CFF0, 0 0 20px #89CFF0, 0 0 30px #89CFF0;
        }
        .menu > a:hover {
            background-color: #89CFF0;
            color: #000;
            box-shadow: 0 0 20px #89CFF0, 0 0 30px #89CFF0, 0 0 40px #89CFF0;
        }
        .dropdown {
            position: relative;
        }
        .submenu {
            display: none;
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            list-style-type: none;
            padding: 10px;
            margin: 0;
            background-color: rgba(0, 0, 0, 0.8);
            border-radius: 5px;
            z-index: 1000;
            min-width: 150px;
        }
        .submenu > li {
            padding: 5px 0;
        }
        .submenu > li > a {
            text-decoration: none;
            color: #fff;
            padding: 10px;
            background-color: #000;
            border: 2px solid #89CFF0;
            border-radius: 5px;
            box-shadow: 0 0 10px #89CFF0, 0 0 20px #89CFF0;
            transition: all 0.3s ease-in-out;
            display: block;
        }
        .submenu > li > a:hover {
            background-color: #89CFF0;
            color: #000;
            box-shadow: 0 0 20px #89CFF0, 0 0 30px #89CFF0, 0 0 40px #89CFF0;
        }
        .dropdown:hover .submenu {
            display: block;
        }
        h6 {
            margin: 0px 5px 0px 0px;
            font-size: 15px;
            text-align: right;
        }
        .Gutscheine {
            background-color: rgba(0, 0, 0, 0.8);
            transition: all 0.3s ease-in-out;
            box-shadow: 0 0 10px #89CFF0, 0 0 20px #89CFF0, 0 0 30px #89CFF0;
            margin: 15px auto;
            border-radius: 15px;
            padding: 15px;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            display: table;
            color: White;
        }
        button {
            color: rgb(0, 0, 0);
            background-color: #b3d9ff;
            border: 1px dotted;
            padding: 5px;
            cursor: pointer;
            border-radius: 5px;
        }
        button:hover {
            background-color: white;
            color: black;
        }
        img {
            max-width: 100%;
            height: auto;
            border-radius: 5px;
        }
        .p{
            color:white;
        }
        .Autohaus_tabelle {
            border-radius: 20px;
            padding: 10px 10px 10px 10px;
            margin: 20px;
            background-color: rgba(0,0, 0, 0.9);
            transition: all 0.3s ease-in-out;
            box-shadow: 0 0 10px #89CFF0, 0 0 20px #89CFF0, 0 0 30px #89CFF0;
            color: white;
            text-align: center;
        }
        .search-box {
            margin: 20px auto;
            text-align: center;
            max-width: 400px;
        }
        input[type="text"] {
            padding: 10px;
            width: 80%;
            border-radius: 5px;
            border: 1px solid #ccc;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <!-- Navigationssystem -->
    <div class="navbar">
        <img src="Bilder/Narco_Customs_Logo.webp" style="border-radius: 5px;" alt="Bild kann nicht geladen werden">
        <div class="menu">
            <a href="Startseite.html">Startseite</a>
            <div class="dropdown">
                <a href="">Tools</a>
                <ul class="submenu">
                    <li><a href="Tuningrechner.html">Tuningrechner</a></li>
                    <li><a href="Gutscheine_Mitarbeiter.html">Gutscheinsystem</a></li>
                    <li><a href="">Autohaus</a></li>
                    <li><a href="Abschlepprechner.html">Abschlepprechner</a></li>
                </ul>
            </div>
            <div class="dropdown">
                <a href="">Werkstattordnung</a>
                <ul class="submenu">
                    <li><a href="Organigramm.html">Organigramm</a></li>
                    <li><a href="Regeln.html">Regeln</a></li>
                    <li><a href="Sanktionen.html">Sanktionen</a></li>
                    <li><a href="">TBC</a></li>
                </ul>
            </div>
            <div class="dropdown">
                <a href="">Ausbildung</a>
                <ul class="submenu">
                    <li><a href="Arbeitskleidung.html">Arbeitskleidung</a></li>
                    <li><a href="Emotes.html">Emotes</a></li>
                    <li><a href="Kundenablauf.html">Kundenablauf</a></li>
                    <li><a href="">TBC</a></li>
                </ul>
            </div>
            <a href="Kontakt.html">Kontakt</a>
        </div>
    </div>

    <h6>© 2025 | Alfred Lange</h6>
<!-- *************************Ende Navigationssystem*********************************************** -->
<div class="Autohaus_tabelle">
  <!-- Suchfeld -->
  <h1>Fahrzeug eingeben:</h1>
  <div class="search-box">
      <input type="text" id="searchInput" onkeyup="searchVehicles()" placeholder="Fahrzeug suchen...">
  </div>
  <table>
<tr>
  <td><p class="vehicle">Club:</p><img src="Bilder/Autohaus/Club.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
  <td><p class="vehicle">Blista:</p><img src="Bilder/Autohaus/Blista.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
  <td><p class="vehicle">Asbo:</p><img src="Bilder/Autohaus/Asbo.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
  <td><p class="vehicle">Panto:</p><img src="Bilder/Autohaus/Panto.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
  <td><p class="vehicle">Dilettante:</p><img src="Bilder/Autohaus/Dilettante.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
</tr>
<tr>
  <td><p class="vehicle">Rhapsody:</p><img src="Bilder/Autohaus/Rhapsody.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
  <td><p class="vehicle">Kanjo:</p><img src="Bilder/Autohaus/Kanjo.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
  <td><p class="vehicle">Weevil:</p><img src="Bilder/Autohaus/Weevil.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
  <td><p class="vehicle">Brioso:</p><img src="Bilder/Autohaus/Brioso.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
  <td><p class="vehicle">Issi:</p><img src="Bilder/Autohaus/Issi.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
</tr>

<tr>
  <td><p class="vehicle">Tornado:</p><img src="Bilder/Autohaus/Tornado.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
  <td><p class="vehicle">Cogcabrio:</p><img src="Bilder/Autohaus/Cogcabrio.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
  <td><p class="vehicle">Exemplar:</p><img src="Bilder/Autohaus/Exemplar.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
  <td><p class="vehicle">Sentinel:</p><img src="Bilder/Autohaus/Sentinel.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
  <td><p class="vehicle">F620:</p><img src="Bilder/Autohaus/F620.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
</tr>
<tr>
  <td><p class="vehicle">Jackal:</p><img src="Bilder/Autohaus/Jackal.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
  <td><p class="vehicle">Felon:</p><img src="Bilder/Autohaus/Felon.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
  <td><p class="vehicle">Oracle:</p><img src="Bilder/Autohaus/Oracle.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
  <td><p class="vehicle">Windsor:</p><img src="Bilder/Autohaus/Windsor.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
  <td><p class="vehicle">Cruiser:</p><img src="Bilder/Autohaus/Cruiser.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
</tr>
<tr>
  <td><p class="vehicle">Fixter:</p><img src="Bilder/Autohaus/Fixter.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
  <td><p class="vehicle">Scorcher:</p><img src="Bilder/Autohaus/Scorcher.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
  <td><p class="vehicle">Tribike:</p><img src="Bilder/Autohaus/Tribike.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
  <td><p class="vehicle">Tribike Long:</p><img src="Bilder/Autohaus/Tribike_Long.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
  <td><p class="vehicle">BMX:</p><img src="Bilder/Autohaus/BMX.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
</tr>
<tr>
  <td><p class="vehicle">Youga:</p><img src="Bilder/Autohaus/Youga.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
  <td><p class="vehicle">Burrito:</p><img src="Bilder/Autohaus/Burrito.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
  <td><p class="vehicle">Burrito Speed:</p><img src="Bilder/Autohaus/Burrito_Speed.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
  <td><p class="vehicle">Guardian:</p><img src="Bilder/Autohaus/Guardian.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
  <td><p class="vehicle">Mule:</p><img src="Bilder/Autohaus/Mule.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
</tr>
<tr>
  <td><p class="vehicle">Gargoyle:</p><img src="Bilder/Autohaus/Gargoyle.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
  <td><p class="vehicle">Double:</p><img src="Bilder/Autohaus/Double.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
  <td><p class="vehicle">Akuma:</p><img src="Bilder/Autohaus/Akuma.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
  <td><p class="vehicle">CarbonRS:</p><img src="Bilder/Autohaus/CarbonRS.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
  <td><p class="vehicle">Avarus:</p><img src="Bilder/Autohaus/Avarus.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
</tr>
<tr>
  <td><p class="vehicle">Manchez:</p><img src="Bilder/Autohaus/Manchez.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
  <td><p class="vehicle">Bati:</p><img src="Bilder/Autohaus/Bati.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
  <td><p class="vehicle">Daemon:</p><img src="Bilder/Autohaus/Daemon.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
  <td><p class="vehicle">Lectro:</p><img src="Bilder/Autohaus/Lectro.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
  <td><p class="vehicle">Chimera:</p><img src="Bilder/Autohaus/Chimera.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
</tr>
<tr>
  <td><p class="vehicle">Defiler:</p><img src="Bilder/Autohaus/Defiler.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
  <td><p class="vehicle">Yosemite:</p><img src="Bilder/Autohaus/Yosemite.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
  <td><p class="vehicle">Chino:</p><img src="Bilder/Autohaus/Chino.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
  <td><p class="vehicle">Virgo:</p><img src="Bilder/Autohaus/Virgo.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
  <td><p class="vehicle">Dominator:</p><img src="Bilder/Autohaus/Dominator.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
</tr>
<tr>
  <td><p class="vehicle">Tulip:</p><img src="Bilder/Autohaus/Tulip.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
  <td><p class="vehicle">Hellfire:</p><img src="Bilder/Autohaus/Hellfire.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
  <td><p class="vehicle">InjectionBF:</p><img src="Bilder/Autohaus/InjectionBF.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
  <td><p class="vehicle">Bifta:</p><img src="Bilder/Autohaus/Bifta.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
  <td><p class="vehicle">Brawler:</p><img src="Bilder/Autohaus/Brawler.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
</tr>
<tr>
  <td><p class="vehicle">Kamacho:</p><img src="Bilder/Autohaus/Kamacho.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
  <td><p class="vehicle">Sandking:</p><img src="Bilder/Autohaus/Sandking.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
  <td><p class="vehicle">Emperor:</p><img src="Bilder/Autohaus/Emperor.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
  <td><p class="vehicle">Ingot:</p><img src="Bilder/Autohaus/Ingot.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
  <td><p class="vehicle">Primo:</p><img src="Bilder/Autohaus/Primo.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
</tr>
<tr>
  <td><p class="vehicle">Fugitive:</p><img src="Bilder/Autohaus/Fugitive.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
  <td><p class="vehicle">Asea:</p><img src="Bilder/Autohaus/Asea.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
  <td><p class="vehicle">Superd:</p><img src="Bilder/Autohaus/Superd.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
  <td><p class="vehicle">Buffalo:</p><img src="Bilder/Autohaus/Buffalo.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
  <td><p class="vehicle">Comet:</p><img src="Bilder/Autohaus/Comet.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
</tr>
<tr>
  <td><p class="vehicle">Komoda:</p><img src="Bilder/Autohaus/Komoda.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
  <td><p class="vehicle">Feltzer:</p><img src="Bilder/Autohaus/Feltzer.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
  <td><p class="vehicle">SchafterV3:</p><img src="Bilder/Autohaus/SchafterV3.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
  <td><p class="vehicle">Torero:</p><img src="Bilder/Autohaus/Torero.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
  <td><p class="vehicle">Cheetah:</p><img src="Bilder/Autohaus/Cheetah.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
</tr>
<tr>
  <td><p class="vehicle">Ztype:</p><img src="Bilder/Autohaus/Ztype.webp"style="border-radius: 5px;" alt="Bild kann nicht geladen werden"></td>
</tr>
</table>
    </div>
</body>

<script>
    function searchVehicles() {
        var input, filter, pElements, pText, i;
        input = document.getElementById("searchInput");
        filter = input.value.toUpperCase(); // Der eingegebene Suchtext wird in Großbuchstaben umgewandelt
        pElements = document.querySelectorAll(".vehicle"); // Alle "p"-Elemente mit der Klasse "vehicle" auswählen

        // Über jedes "p"-Element iterieren
        for (i = 0; i < pElements.length; i++) {
            pText = pElements[i].textContent || pElements[i].innerText; // Den Text jedes "p"-Tags holen

            // Wenn der Text des "p"-Tags mit der Suche übereinstimmt, es anzeigen, ansonsten ausblenden
            if (pText.toUpperCase().indexOf(filter) > -1) {
                pElements[i].parentElement.style.display = ""; // Zeige das Elternelement (z.B. das "td"-Tag) an
            } else {
                pElements[i].parentElement.style.display = "none"; // Blende das Elternelement (z.B. das "td"-Tag) aus
            }
        }
    }
</script>
