<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Startseite</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%; /* Positionierung relativ zur Mitte des Dropdown-Knopfes */
            transform: translateX(-50%); /* Zentriert das Menü */
            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;
        }
        .container_gesamt{
          color:white;
          display: flex;
          margin-bottom: 15px;
        }
        .container_innen_links {
          flex: 1;
          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;
          border-radius: 15px;
          margin: 50px 15px 0px 15px ; /* Abstand außen (oben, rechts, unten, links) */
          padding: 15px;
          position: relative; /* Ermöglicht die Verwendung von absolut positionierten Inhalten */
          z-index: 1;
        }
        .oeffnungszeiten {
            width: 100%; /* Nimmt die gesamte Breite des Containers ein */
            height: 76%;
            border-collapse: collapse; /* Entfernt doppelte Linien zwischen Zellen */
            margin-top: 15px;
            color: white;
            font-size: 18px; /* Vergrößert den Text */
            text-align: center;
            position: relative; /* Ermöglicht die Verwendung von absolut positionierten Inhalten */
            z-index: 1;

        }

        .oeffnungszeiten th,
        .oeffnungszeiten td {
            padding: 15px; /* Vergrößert den Innenabstand */
        }

        .oeffnungszeiten th {
            font-weight: bold;
            text-transform: uppercase;
        }

        .oeffnungszeiten tbody tr:nth-child(even) {
        }

        .oeffnungszeiten tbody tr:nth-child(odd) {
        }
        .info-text {
          margin: 20px 0px 20px 0px ; /* Abstand außen (oben, rechts, unten, links) */
          font-size: 16px; /* Textgröße */
          font-style: italic; /* Kursivschrift */
          color: #89CFF0; /* Akzentfarbe */
          text-align: center; /* Zentriert den Text */
          background-color: rgba(0, 0, 0, 0.5); /* Leichter Hintergrund für bessere Lesbarkeit */
          padding: 10px; /* Innenabstand */
          border-radius: 10px; /* Abgerundete Ecken */
          box-shadow: 0 0 10px #89CFF0; /* Leuchtender Rand */
        }
        .container_innen_links::before {
          content: ''; /* Pseudoelement benötigt Inhalt */
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-image: url('Bilder/NC_Uhrzeit_Symbol.webp'); /* Pfad zu deinem Bild */
          background-size: 80%;
          background-repeat: no-repeat;
          background-position: center;
          opacity: 0.2; /* Transparenz des Bildes */
          z-index: 0; /* Hintergrundebene */
          border-radius: 15px; /* Gleiche Abrundung wie Container */
        }

        .container_innen_links h1 {
          position: relative; /* Damit der Text über dem Bild bleibt */
          z-index: 1;
          text-align: center;
        }
        .container_innen_mitte{
          flex: 1;
          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;
          border-radius: 15px;
          margin: 300px 15px 300px 15px ; /* Abstand außen (oben, rechts, unten, links) */
          padding: 15px;
        }
        .container_innen_rechts {
          flex: 1;
          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;
          border-radius: 15px;
          margin: 50px 15px 0px 15px ; /* Abstand außen (oben, rechts, unten, links) */
          padding: 15px;
          position: relative; /* Ermöglicht die Verwendung von absolut positionierten Inhalten */
          width: 100%; /* Nimmt die gesamte Breite des Containers ein */
          height: 86%;
          color: white;
          font-size: 18px; /* Vergrößert den Text */
          text-align: center
          z-index: 1;
        }

        .container_innen_rechts::before {
          content: ''; /* Pseudoelement benötigt Inhalt */
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-image: url('Bilder/NC_Dollar_Symbol.webp'); /* Pfad zu deinem Bild */
          background-size: 80%;
          background-repeat: no-repeat;
          background-position: center;
          opacity: 0.2; /* Transparenz des Bildes */
          z-index: 0; /* Hintergrundebene */
          border-radius: 15px; /* Gleiche Abrundung wie Container */
        }

        .container_innen_rechts h1 {
          position: relative; /* Damit der Text über dem Bild bleibt */
          z-index: 1;
          text-align: center;
        }
        .preise {
            width: 100%; /* Nimmt die gesamte Breite des Containers ein */
            height: 35%;
            border-collapse: collapse; /* Entfernt doppelte Linien zwischen Zellen */
            margin-top: 15px;
            margin-bottom: 15px;
            color: white;
            font-size: 18px; /* Vergrößert den Text */
            text-align: center;
            position: relative; /* Damit der Text über dem Bild bleibt */
            z-index: 1;
        }

        .preise th,
        .preise td {
          padding: 8px;
          margin: 0px;
        }

        .preise th {
            font-weight: bold;
            text-transform: uppercase;
        }

        .preise tbody tr:nth-child(even) {
        }


        .preise tbody tr:nth-child(odd) {
        }
        h6{
          margin: 0px 5px 0px 0px;
          font-size: 15px;
          text-align: right;
          }
          .Überschrift_mitte_mittig{
            text-align: center;
          }
          .Fußnote {
            margin: 20px 0px 20px 0px ; /* Abstand außen (oben, rechts, unten, links) */
            font-size: 16px; /* Textgröße */
            font-style: italic; /* Kursivschrift */
            color: #89CFF0; /* Akzentfarbe */
            text-align: center; /* Zentriert den Text */
            background-color: rgba(0, 0, 0, 0.5); /* Leichter Hintergrund für bessere Lesbarkeit */
            padding: 5px; /* Innenabstand */
            border-radius: 10px; /* Abgerundete Ecken */
            box-shadow: 0 0 10px #89CFF0; /* Leuchtender Rand */
          }
    </style>
</head>
<!-- *************************Navigationssystem*********************************************** -->
<body>
    <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</a>
            <a href="Hausordnung.html">Hausordnung</a>
            <a href="Bewerbung.html">Bewerbung</a>
            <a href="Rueckruf.html">Rückruf</a>
            <a href="Kontakt.html">Kontakt</a>
        </div>
    </div>
  <h6>© 2025 | Alfred Lange</h6>
<!-- *************************Ende Navigationssystem*********************************************** -->
    <div class="container_gesamt">
      <div class="container_innen_links">
        <h1>Öffnungszeiten:</h1>
        <table class="oeffnungszeiten">
        <thead>
            <tr>
                <th>Tag</th>
                <th>Uhrzeit</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Montag:</td>
                <td>14:00 - 16:00 Uhr + 17:30 - 22:00 Uhr</td>
            </tr>
            <tr>
                <td>Dienstag:</td>
                <td>14:00 - 16:00 Uhr + 17:30 - 22:00 Uhr</td>
            </tr>
            <tr>
                <td>Mittwoch:</td>
                <td>14:00 - 16:00 Uhr + 17:30 - 22:00 Uhr</td>
            </tr>
            <tr>
                <td>Donnerstag:</td>
                <td>14:00 - 16:00 Uhr + 17:30 - 22:00 Uhr</td>
            </tr>
            <tr>
                <td>Freitag:</td>
                <td>14:00 - 16:00 Uhr + 17:30 - 22:00 Uhr</td>
            </tr>
            <tr>
                <td>Samstag:</td>
                <td>17:30 - 22:00 Uhr</td>
            </tr>
            <tr>
                <td>Sonntag:</td>
                <td>14:00 - 16:00 Uhr + 17:30 - 22:00 Uhr</td>
            </tr>
        </tbody>
    </table>
    <p class="info-text">
       Info: Je nach Verfügbarkeit der Mitarbeiter kann es hier zu abweichenden Öffnungszeiten führen.
   </p>
      </div>
      <div class="container_innen_mitte">
        <div class="Überschrift_mitte_mittig">
        <h1>Nächstes Event:</h1>
        <p>Aktuell ist noch kein Event geplant.<br> Bitte haben Sie Verständnis <br> Ihr Narco Customs Team</p>
        </div>
      </div>
      <div class="container_innen_rechts">
        <h1>Preise:</h1>
        <h2>Leistung:</h2>
 <table class="preise">
     <tbody>
         <tr>
             <td>Motor:<sup>1</sup></td>
             <td>120.000$</td>
         </tr>
         <tr>
             <td>Bremsen:<sup>1</sup></td>
             <td>54.000$</td>
         </tr>
         <tr>
             <td>Getriebe:<sup>1</sup</td>
             <td>69.000$</td>
         </tr>
         <tr>
             <td>Turbo:</td>
             <td>90.000$</td>
         </tr>
     </tbody>
 </table>

 <h2>Modifikation:</h2>
 <table class="preise">
     <tbody>
         <tr>
             <td>Panzerung:<sup>1</sup</td>
             <td>300.000$</td>
         </tr>
         <tr>
             <td>Lackierung:</td>
             <td>Ab 20.000$</td>
         </tr>
         <tr>
             <td>Felgen:</td>
             <td>Ab 20.000$</td>
         </tr>
         <tr>
             <td>Neon:</td>
             <td>10.000$</td>
         </tr>
         <tr>
             <td>Scheiben:</td>
             <td>6.000$</td>
         </tr>
         <tr>
             <td>Anbauteil:</td>
             <td>je 7.500$</td>
         </tr>
         <tr>
             <td>Xenon:</td>
             <td>3.000$</td>
         </tr>
     </tbody>
 </table>
 <p class="Fußnote"> <sup>1</sup> Es handelt sich hierbei um die höchstmögliche Stufe des jeweiligen Bauteils.</p>
  </div>
      </div>
    </div>
</body>
</html>
