<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tuningrechner</title>
    <style>
        h1{
          margin-left: 20px;
          font-size: 40px;
          margin-bottom: 1px;
          }
        .linke_überschrift{
          font-size: 20px;
          color: red;
          }
        .mitte_überschrift{
          font-size: 20px;
          color: green;
          }
          .rechte_überschrift{
            font-size: 20px;
          }
          h6{
            margin: 20px 5px 0px 0px;
            font-size: 15px;
            text-align: right;
            }
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #b3d9ff; /* Babyblauer Hintergrund */
            background-image: url('Bilder/NC_Bild2.webp');
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: top;
            padding-top: 80px;
        }
        /* Farbliche Einstellung + Transparenz für alle Innenkästen */
        .container_info_links,
        .container_info_mitte,
        .container_info_rechts,
        .upgrade-box,
        .container_name,
        .Felgen-box,
        .lackierung-box,
        .licht-box,
        .sonstiges-box,
        .Rabatt-Box
        {
          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;
        }

        /* Alternative Stile für deaktivierte Schatten und dunklen Hintergrund */
        .white-mode {
          background-color: rgba(255, 255, 255, 1.0); !important; /* Dunkelgrau */
          box-shadow: 0 0 10px #89CFF0, 0 0 20px #89CFF0, 0 0 30px #89CFF0; !important; /* Kein Schatten */
          color: black; !important;
        }
        /* Innerer Kasten für die Eingabe von Name */
        .container_name{
          border-radius: 20px; /* Runde Ecken */
          padding: 0px 10px 10px 10px;  /* oben, rechts, unten, links */
          margin: 10px 10px 10px 10px;  /* oben, rechts, unten, links */
          display: inline-block; /* Passt die Breite an den Inhalt an */
          width: calc(100% - 40px); /* Verhindert, dass der Kasten zu breit wird */
          }
        /* Hintergrundkasten für die untere Box (den Rest) */
        .container_main {
         display: flex;
         margin: 0px 25px 25px 25px;
         padding: 5px;
         border-radius: 20px;
      }

        /* Hintergrundkasten für die Infobox */
        .container_info{
          display: flex;
          flex-direction: row;
          border-radius: 20px; /* Runde Ecken */
          margin: 0px 25px 0px 25px;  /* oben, rechts, unten, links */
          padding: 25px 25px 5px 25px;  /* oben, rechts, unten, links */
          opacity: 1; /* Voll sichtbar */
        }
        .container_links,
        .container_rechts
        {
          flex: 1; /* Beide Container nehmen gleich viel Platz ein */
          padding: 20px; /* Innenabstand */
        }
        .container_links
        {
          justify-content: space-between;
        }
        .container_rechts,
        {
          justify-content: space-between;
        }
        .upgrade-box{
            border-radius: 20px; /* Runde Ecken */
            padding: 0 10px 10px 10px;  /* oben, rechts, unten, links */
            margin: 10px; /* Abstand außen (oben, rechts, unten, links) */
            display: inline-block; /* Passt die Breite an den Inhalt an */
            width: calc(100% - 40px); /* Verhindert, dass der Kasten zu breit wird */
          }
          .container_dreier{
            display: flex;
            justify-content: space-between;
          }
          .Felgen-box,
          .lackierung-box,
          .licht-box {
              border-radius: 20px; /* Runde Ecken */
              padding: 10px 20px; /* Innenabstand */
              margin: 10px; /* Abstand außen (oben, rechts, unten, links) */
              display: inline-block; /* Passt die Breite an den Inhalt an */
              padding: 0 10px 10px 10px;  /* oben, rechts, unten, links */
              border-radius: 20px; /* Runde Ecken */
            }
            .sonstiges-box
            {
              border-radius: 20px; /* Runde Ecken */
              padding: 0px 10px 10px 10px;  /* oben, rechts, unten, links */
              margin: 10px 10px 10px 10px;  /* oben, rechts, unten, links */
              display: inline-block; /* Passt die Breite an den Inhalt an */
              width: calc(100% - 40px); /* Verhindert, dass der Kasten zu breit wird */
              border-radius: 20px; /* Runde Ecken */
              }
              .column{
                flex: 1; /* Jede Spalte nimmt den gleichen Platz ein */
                padding: 10px; /* Innenabstand */

              }
              .column li {
                list-style-type: none ;
              }
              .hidden{
                display: none; /* Vollständig aus dem Layout entfernt */
              }
              /* InfoBox zum Ausblenden */
            .container_info_links,
            .container_info_mitte,
            .container_info_rechts{
              flex:1;
              margin: 0px 10px 0px 10px;  /* oben, rechts, unten, links */
              padding: 0 10px 3px 10px;  /* oben, rechts, unten, links */
              border-radius: 20px; /* Runde Ecken */
            }
            .container_info_mitte{
              margin: 0px 20px 0px 20px;  /* oben, rechts, unten, links */
            }
              .container_rechts_unten{
                display: flex;
                flex-direction: column;
              }
              .Rabatt-Box{
                  border-radius: 20px; /* Runde Ecken */
                  padding: 0 10px 10px 10px;  /* oben, rechts, unten, links */
                  margin: 10px; /* Abstand außen (oben, rechts, unten, links) */
                  display: inline-block; /* Passt die Breite an den Inhalt an */
                  width: calc(100% - 40px); /* Verhindert, dass der Kasten zu breit wird */
                  border-radius: 20px; /* Runde Ecken */
                }
                .ausgabe-box{
                  width: calc(100% - 10px);
                  display: inline-block;
                }
                /* Nachricht-Styling */
                #sendMessage {
                  display: none;
                  position: fixed;
                  bottom: 20px;
                  right: 20px;
                  background-color: #4CAF50;
                  color: white;
                  padding: 10px 20px;
                  border-radius: 5px;
                  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
                  font-size: 14px;
                  }
                  #copyMessage {
                    display: none;
                    position: fixed;
                    bottom: 20px;
                    right: 20px;
                    background-color: #4CAF50;
                    color: white;
                    padding: 10px 20px;
                    border-radius: 5px;
                    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
                    font-size: 14px;
                    }
                    #copyMessageText {
                      display: none;
                      position: fixed;
                      bottom: 20px;
                      right: 20px;
                      background-color: #4CAF50;
                      color: white;
                      padding: 10px 20px;
                      border-radius: 5px;
                      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
                      font-size: 14px;
                      }
                  #clearMessage {
                    display: none;
                    position: fixed;
                    bottom: 20px;
                    right: 20px;
                    background-color: red;
                    color: white;
                    padding: 10px 20px;
                    border-radius: 5px;
                    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
                    font-size: 14px;
                    }
                    #closeInfoMessage {
                      display: none;
                      position: fixed;
                      bottom: 20px;
                      right: 20px;
                      background-color: black;
                      color: white;
                      padding: 10px 20px;
                      border-radius: 5px;
                      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
                      font-size: 14px;
                      }
                      #changeInfobrightness{
                        display: none;
                        position: fixed;
                        bottom: 20px;
                        right: 20px;
                        background-color: black;
                        color: white;
                        padding: 10px 20px;
                        border-radius: 5px;
                        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
                        font-size: 14px;
                        }
                textarea
                {
                  flex: 1; /* Textarea nimmt den gesamten verbleibenden Platz ein */
                  padding: 5px;
                  font-size: 15px;
                  border: 1px solid #ccc;
                  border-radius: 5px;
                  resize: none ; /* Verhindert manuelles Resizing */
                  overflow: hidden;
                  width: 100%;
                }
        .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; /* Bildhöhe */
            margin-right:40px; /* Abstand zwischen Bild und Links */
        }
        .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;
        }
        button {
              color: rgb(0, 0, 0);
              background-color: #b3d9ff; Optional: dunklerer Button-Hintergrund */
              border: 1px dotted;
              padding: 5px;
              cursor: pointer;
              border-radius: 5px;
          }
          input[type="number"], input[type="checkbox"], select {
              color: #dadad9; /* Weiße Schriftfarbe für Eingabefelder, Checkboxen und Auswahlfelder */
              background-color: rgb(107, 107, 107); /* Grauer Hintergrund für bessere Lesbarkeit */
          }
          input::placeholder{
              color: #dadad9; /* Weiße Schriftfarbe für die 0-100% */
          }
          .info {
              font-size: 0.9em;
              color: black; /* Helle Schriftfarbe für das Informationsfeld */
              margin-top: 5px;
          }
          .footer {
              margin-top: 20px;
          }
          #total {
              font-size: 1.5em; /* Größere Schriftgröße für den Gesamtpreis */
              font-weight: bold; /* Fettdruck für den Gesamtpreis */
              color: green; /* Farbe des Gesamtpreises auf Grün ändern */
          }
          hr {
              border: 1px solid #555; /* Farbe und Dicke des Abstandshalters */
              margin: 20px 0; /* Abstand oberhalb und unterhalb des Strichs */
          }
          button:disabled {
            background-color: #ccc;
            cursor: not-allowed;
          }
          .Vorlagen_Container {
              border-radius: 20px; /* Runde Ecken */
              padding: 10px 20px; /* Innenabstand */
              margin: 10px; /* Abstand außen (oben, rechts, unten, links) */
              display: inline-block; /* Passt die Breite an den Inhalt an */
              padding: 0 10px 10px 10px;  /* oben, rechts, unten, links */
              border-radius: 20px; /* Runde Ecken */
              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;
              width: calc(100% - 40px); /* Verhindert, dass der Kasten zu breit wird */
              color:white;
            }
            .Vorlage_Inhalt{
              color:White;
            }
            #Vorlagen{
              margin: 20px;
              margin-left: 0px;
              margin-bottom: 10px;
              margin-top: 10px;
            }
            #responseOutput {
              display: none;
              position: fixed;
              bottom: 20px;
              right: 20px;
              color: white;
              padding: 10px 20px;
              border-radius: 5px;
              box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
              font-size: 14px;
            }
            /* Flexbox Container für die Dropdowns */
      .dropdown-container {
          display: flex; /* Flexbox aktivieren */
          gap: 20px; /* Abstand zwischen den Dropdowns */
          align-items: center; /* Vertikale Ausrichtung der Dropdowns */
          margin-bottom: 20px; /* Abstand unter den Dropdowns */
      }
      /* Container für das zweite Dropdown und die Fahrzeuginformationen */
      #infoContainer {
          margin-top: 20px;
      }

      .fahrzeugFamilie {
          display: none; /* Diese Familien werden nur angezeigt, wenn die passende Vorlage ausgewählt wurde */
      }



      /* Styling der Fahrzeugdetails */
      #fahrzeugInfo {
          margin-top: 20px;
      }
      .info {
            color:white
        }
      .fahrzeugBehoerde {
            display: none; /* Diese Behoerden werden nur angezeigt, wenn die passende Vorlage ausgewählt wurde */
        }
      .dropdown-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 15px;
      }

      .dropdown-group {
        display: flex;
        flex-direction: column;
        flex: 1;
        margin-right: 10px;
      }

      .dropdown-group:last-child {
        margin-right: 0;
      }
      #FahrzeugImage {
          max-width: 100%;
          max-height: 100%;
          display: none;
          margin: 0 auto; /* Zentriert das Bild innerhalb des Containers */
      }
      #keinBildText {
          display: none;
          color: gray;
          font-size: 1.2em;
          text-align: center; /* Nur dieser Text wird zentriert */
          width: 100%; /* Damit die Zentrierung funktioniert */
      }
  label {
    margin-bottom: 5px;
    font-weight: bold;
  }
    </style>
</head>
<body onload="storeInitialValues()">
  <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="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>
      <div class="container_info">
        <div class="container_info_links">
      <h3 class="linke_überschrift">Wichtige Infos:</h3>
      <p>
        - Ist nur der Turbo als Tuning auswählbar, so darf dieser nicht eingebaut werden!<br>
        - Einige E-Autos haben kein Getriebe!<br>
        - 15 Minuten vor der Sonnenwende keine Autos mehr tunen!<br>
        - Unter Extras fällt alles, was in dem Tuningrechner nicht separat beschrieben ist. (Spoiler, Heckstoßstange, Frontstoßstange, usw...)
      </p>
      </div>
      <div class="container_info_mitte">
      <h3 class="mitte_überschrift">Kostenlos:</h3>
      <p>
        - Innenraumfarbe + Dashboard<br>
        - Lacktypen (Matt, Chrom, etc...)<br>
        - Reifenqualm + Felgenfarbe<br>
      </p>
      </div>
      <div class="container_info_rechts">
      <h3 class="rechte_überschrift">Support:</h3>
      <p>
        Bei technischen Problemen<br>
        oder Verbesserungsvorschlägen<br>
        melden Sie sich bitte bei <br>
        Alfred Lange: <br>
        - E-Mail Verteiler: donluxa<br>
        - Tel.Nr: (6)9222248<br>
      </p>
      </div>
      </div>
    </div>
  </div>
</div>
</div>
      <div class="container_main">
        <div class="container_links">
         <div class="container_name">
          <h2>Eingabe von Name, Dienstnummer und Kennzeichen:</h2>
          <form>
              <!-- Eingabefelder -->
              <label for="name">Name:</label>
              <input type="text" id="name" placeholder="Name eingeben" oninput="updateTextarea();" />

              <label for="dienstnummer">Dienstnummer:</label>
              <input type="text" id="dienstnummer" placeholder="Dienstnummer eingeben" oninput="updateTextarea();" />

              <label for="Kennzeichen">Kennzeichen:</label>
              <input type="text" id="kennzeichen" placeholder="Kennzeichen eingeben" oninput="updateTextarea();" />
          </form>
        </div>
        <div class="upgrade-box">
        <h2>Upgrades:</h2>
        <p>
            <input type="checkbox" id="Fulltune" value="333000" onchange="toggleFulltune(); updateTextarea()">Fulltune (Beinhaltet Motor, Bremsen, Getriebe auf der höchsten Stufe und einen Turbolader)<br>
        </p>
        <p>
            <input type="checkbox" id="Turbo" value="90000" onchange="calculate();updateTextarea()">Turbo: 90.000,-<br>
        </p>
        <p> - Motor:
            <select id="Motor" onchange="calculate()">
                <option value="0"></option>
                <option value="15000">Default: 15.000,-</option>
                <option value="24000">Level 1: 24.000,-</option>
                <option value="60000">Level 2: 60.000,-</option>
                <option value="75000">Level 3: 75.000,-</option>
                <option value="120000">Level 4: 120.000,-</option>
            </select>

          Bremsen:
            <select id="Bremse" onchange="calculate()">
                <option value="0"></option>
                <option value="7500">Default: 7.500,-</option>
                <option value="15000">Level 1: 15.000,-</option>
                <option value="27000">Level 2: 27.000,-</option>
                <option value="54000">Level 3: 54.000,-</option>
            </select>

          Getriebe:
            <select id="Getriebe" onchange="calculate()">
                <option value="0"></option>
                <option value="16000">Default: 16.000,-</option>
                <option value="33000">Level 1: 33.000,-</option>
                <option value="48000">Level 2: 48.000,-</option>
                <option value="69000">Level 3: 69.000,-</option>
                <option value="90000">Level 4: 90.000,-</option>
            </select>
        </p>
        <p> - Federung:
            <select id="Federung" onchange="calculate()" style="margin-right: 40px;">
                <option value="0"></option>
                <option value="8000">Default: 8.000,-</option>
                <option value="16000">Level 1: 16.000,-</option>
                <option value="28500">Level 2: 28.500,-</option>
                <option value="45000">Level 3: 45.000,-</option>
                <option value="66000">Level 4: 66.000,-</option>
            </select>

            Panzerung:
            <select id="Panzerung" onchange="calculate()">
                <option value="0"></option>
                <option value="60000">Default: 60.000,-</option>
                <option value="150000">Level 1: 150.000,-</option>
                <option value="180000">Level 2: 180.000,-</option>
                <option value="195000">Level 3: 195.000,-</option>
                <option value="275000">Level 4: 275.000,-</option>
                <option value="300000">Level 5: 300.000,-</option>
            </select>
        </p>
      </div>
      <div class="container_dreier">
      <div class="Felgen-box">
        <h2>Felgen:</h2>
        <p>
            <input type="checkbox" id="Felgen" value="20000" onchange="calculate()"> Felgen: 20.000,-<br>
            <input type="checkbox" id="Felgenhighend" value="45000" onchange="calculate()"> Highend Felgen: 45.000,-<br>
        </p>
      </div>
      <div class="lackierung-box">
        <h2>Lackierung:</h2>
        <p>
            <input type="checkbox" id="Primärfarbe" value="20000" onchange="calculate()"> Primärfarbefarbe: 20.000,-<br>
            <input type="checkbox" id="Sekundärfarbe" value="10000" onchange="calculate()"> Sekundärfarbefarbe: 10.000,-<br>
            <input type="checkbox" id="Perlglanz" value="3000" onchange="calculate()"> Perlglanz: 3.000,-<br>
        </p>
        </div>
        <div class="licht-box">
        <h2>Licht:</h2>
        <p>
            <input type="checkbox" id="Xenon" value="3000" onchange="calculate()"> Xenon: 3.000,-<br>
            <input type="checkbox" id="Neon" value="10000" onchange="calculate()"> Neon (Unterboden): 10.000,-<br>
        </p>
        </div>
        </div>

        <!-- Container für Dropdowns -->
        <div class="Vorlagen_Container">
          <h2>Vorlagenkatalog:</h2>

          <!-- Erste Zeile: Familie und Behörde -->
          <div class="dropdown-row">
            <div class="dropdown-group">
              <label for="Familie">Familie wählen:</label>
              <select id="Familie" onchange="showFamilienfahrzeugs();updateTextarea();disableOtherDropdown('Familie')">
                <option value="">Bitte wählen</option>
                <option value="PeekyBlinders">Peeky Blinders</option>
                <option value="NobodyClub">Nobody Club</option>
                <option value="BBG">BBG</option>
                <option value="BlackoutCrew">Blackout Crew</option>
                <option value="Aztecas">Aztecas</option>
                <option value="BlackAces">Black Aces</option>
              </select>
            </div>

            <div class="dropdown-group">
              <label for="Behoerde">Behörde wählen:</label>
              <select id="Behoerde" onchange="showBehoerdenfahrzeugs();updateTextarea();disableOtherDropdown('Behoerde')">
                <option value="">Bitte wählen</option>
                <option value="UnitedStatesMarshal">United States Marshal</option>
                <option value="PaletoMedicalDepartment">Paleto Medical Department</option>
                <option value="n.A">1</option>
              </select>
            </div>
          </div>

          <!-- Zweite Zeile: Behördenfahrzeug und Familienfahrzeug -->
          <div class="dropdown-row">
            <div class="dropdown-group" id="FamilienfahrzeugGroup" style="display: none;">
              <label for="Familienfahrzeug">Familienfahrzeug wählen:</label>
              <select id="Familienfahrzeug" onchange="showFamilienfahrzeugInfo();updateTextarea()">
                <option value="">Bitte wählen</option>
              </select>
            </div>

            <div class="dropdown-group" id="BehoerdenfahrzeugGroup" style="display: none;">
              <label for="Behoerdenfahrzeug">Behördenfahrzeug wählen:</label>
              <select id="Behoerdenfahrzeug" onchange="showBehoerdenfahrzeugInfo();updateTextarea()">
                <option value="">Bitte wählen</option>
              </select>
            </div>
          </div>

          <!-- Familienfahrzeug Info -->
          <div id="FamilienfahrzeugInfo" style="display: flex; align-items: center; justify-content: space-between;">
              <!-- Linker Bereich: Fahrzeuginformationen -->
              <p id="infoText" style="flex: 1;"></p>

              <!-- Rechter Bereich: Bild oder "Kein Bild verfügbar" -->
              <div style="flex: 1; display: flex; justify-content: center; align-items: center;">
                  <img id="FahrzeugImage" style="max-width: 100%; height: auto; display: none;"/>
                  <div id="keinBildText" style="display: none; color: gray; text-align: center;">Kein Bild verfügbar</div>
              </div>
          </div>

          <!-- Behördenfahrzeug Info -->
          <div id="BehoerdenfahrzeugInfo" style="display: flex; align-items: center; justify-content: space-between;">
              <!-- Linker Bereich: Fahrzeuginformationen -->
              <p id="infoTextbehoerde" style="flex: 1;"></p>

              <!-- Rechter Bereich: Bild oder "Kein Bild verfügbar" -->
              <div style="flex: 1; display: flex; justify-content: center; align-items: center;">
                  <img id="BehoerdenFahrzeugImage" style="max-width: 100%; height: auto; display: none;"/>
                  <div id="keinBehoerdenBildText" style="display: none; color: gray; text-align: center;">Kein Bild verfügbar</div>
              </div>
          </div>
        </div>

      </div>
        <div class="container_rechts">
        <div class="sonstiges-box">
        <h2>Sonstiges:</h2>
        <p>
            <input type="checkbox" id="Hupe" value="5000" onchange="calculate()"> Hupe: 5.000,-<br>
            <input type="checkbox" id="Sticker" value="20000" onchange="calculate()"> Sticker: 20.000,-<br>
            <input type="checkbox" id="Scheiben" value="6000" onchange="calculate()"> Scheibentönung: 6.000,-<br>

        Extras:
            <input type="number" id="Extras" min="0" onchange="calculate()">
            <button onclick="deleteExtras()">Löschen</button>
        </p>
        </div>
          <!-- <hr> Abstandshalter hinzugefügt -->
        <div class="container_rechts_unten">
        <div class="Rabatt-Box">
        <h2>Rechnung:</h2>
        <div class="Rabatt_Eingabe">
        <p><h3 class="Eingabe_Liste_Überschrift"> Rabatt Gesamt:</h3></p>
        <p> Kunde:
            <select id="Rabattliste_gesamt" onchange="calculate()">
                <option value="0"></option>
                <option value="10">Gutschein 10%</option>
                <option value="50">Autohaus 50%</option>
                <option value="50">Sherrif Department 50%</option>
                <option value="60">US-Army 60%</option>
                <option value="50">Department of Justice 50%</option>
                <option value="50">Federal Investigation Bureau 50%</option>
                <option value="50">Police Department 50%</option>
                <option value="50">Ranger Department 50%</option>
                <option value="50">Paleto Medical Department 50%</option>
                <option value="50">United States Marshal Service 50%</option>
            </select>
            oder Manuell:
                <input type="number" id="Rabatt" min="0" max="100"style="width: 70px;" placeholder="0 - 100%  " required onchange="calculate()">
                <button onclick="deleteRabatt()">Löschen</button>
        </p>
        <p><h3 class="Eingabe_Liste_Überschrift"> Rabatt Panzerung:</h3></p>
        <p> Kunde:
            <select id="Rabattliste_panzerung" onchange="calculate()">
                <option value="0"></option>
                <option value="80">Sherrif Department 80% (01 - 03)</option>
                <option value="80">US-Army 80%</option>
                <option value="80">Federal Investigation Bureau 80%</option>
                <option value="80">Ranger Department 80% (01 - 03)</option>
            </select>
            oder Manuell:
              <input type="number" id="RabattPanzerung" min="0"  max="100"style="width: 70px;" placeholder="0 - 100%  " required  onchange="calculate()">
              <button onclick="deleteRabattPanzerung()">Löschen</button>
        </p>
        </div>
        <div class="footer">
            <p id="total">Gesamtpreis: 0$</p>
            <button id ="copyPrice" onclick="copyPrice()">Preis kopieren</button>
            <div id="copyMessage">Preis wurde kopiert</div>
            <p id="RabattDetails"></p> <!-- Hier wird die Rabattbeschreibung angezeigt -->
        </div>
        <div id="test" class="ausgabe-box">
          <textarea id="textToCopy" readonly>Keine Änderungen vorgenommen.</textarea>
          <button id="Abschicken" onclick="sendText()" disabled>Abschicken</button>
          <button onclick="copyText()">Alles kopieren</button>
          <div id="copyMessageText">Text wurde kopiert!</div>
          <p id="message"></p>
          <!-- Hier wird die Antwort oder Fehlermeldung angezeigt -->
          <div id="responseOutput" hidden></div>
          <button onclick="resetInputs()">Alle Eingaben löschen</button>
          <div id="clearMessage">
            Alle Eingaben wurden gelöscht!
          </div>
          <button id="info_ausblenden">Infos ausblenden</button>
          <div id="closeInfoMessage">
            Infos wurden ein-/ausgeblendet.
          </div>
          <button id="info_whitemode">Whitemode</button>
          <div id="changeInfobrightness">
            Whitemode/Darkmode aktiviert.
          </div>
        </div>
    </div>
  </div>
    </div>
    </div>

    <script>

    let isLockTimeOver = true;

        function formatPrice(price) {
            return price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".") + "" + (price % 1 === 0 ? "" : price.toFixed(2).split(".")[1]) + "$";
          }
        function calculate() {
          let total = 0;
          let RabattDetails = ""; // Variable für Rabattdetails

          // Überprüfen der Checkboxen und Berechnung des Gesamtkosten
          const checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');
          checkboxes.forEach(checkbox => {
            total += parseInt(checkbox.value);
          });
          // Berechnung der ausgewählten Optionen
          const Motor = document.getElementById("Fulltune").checked ? 0 : (parseInt(document.getElementById("Motor").value) || 0);
          const Bremse = document.getElementById("Fulltune").checked ? 0 : (parseInt(document.getElementById("Bremse").value) || 0);
          const Getriebe = document.getElementById("Fulltune").checked ? 0 : (parseInt(document.getElementById("Getriebe").value) || 0);
          const Federung = parseInt(document.getElementById("Federung").value) || 0;
          const Panzerung = parseInt(document.getElementById("Panzerung").value) || 0;

          total += Motor + Bremse + Getriebe + Federung + Panzerung;

          // Berechnung der Extras
          const Extras = parseInt(document.getElementById("Extras").value) || 0;
          total += Extras * 7500;
//***********************Entweder oder Auswahl bei der Rabatt********************************
          if(0 == (parseInt(document.getElementById("Rabattliste_gesamt").value) || 0))
          {
            if(0 == (parseInt(document.getElementById("Rabatt").value) || 0))
            {
              //Nichts passiert
              Rabattliste_gesamt.disabled = false;
              document.getElementById("Rabatt").disabled = false;
              Rabatt = 0;
            }
            else{
              Rabatt = parseInt(document.getElementById("Rabatt").value) || 0;
              Rabattliste_gesamt.disabled = true;
            }
          }
          else{
            Rabatt = parseInt(document.getElementById("Rabattliste_gesamt").value) || 0;
            document.getElementById("Rabatt").disabled = true;
          }
//***********************Entweder oder Auswahl bei der Rabattpanzerung********************************
  if(0 == (parseInt(document.getElementById("Rabattliste_panzerung").value) || 0))
          {
            if(0 == (parseInt(document.getElementById("RabattPanzerung").value) || 0))
            {
              //Nichts passiert
              Rabattliste_panzerung.disabled = false;
              document.getElementById("RabattPanzerung").disabled = false;
              RabattPanzerung = 0;
            }
            else{
              RabattPanzerung = parseInt(document.getElementById("RabattPanzerung").value) || 0;
              Rabattliste_panzerung.disabled = true;
            }
          }
          else{
            RabattPanzerung = parseInt(document.getElementById("Rabattliste_panzerung").value) || 0;
            document.getElementById("RabattPanzerung").disabled = true;
          }

        //  if(0 == (parseInt(document.getElementById("Rabattliste_panzerung").value) || 0)){
        //    RabattPanzerung = parseInt(document.getElementById("RabattPanzerung").value) || 0;
        //  }
        //  else{
        //    RabattPanzerung = parseInt(document.getElementById("Rabattliste_panzerung").value) || 0;
        //  }
//****************************************************************************************************************************
          let Rabatt_abzug = 0;
          let Rabatt_abzug_normal = 0;

          if (RabattPanzerung > 0) {
            Rabatt_abzug_normal =(total - Panzerung) * Rabatt / 100;
            total -= (total - Panzerung) * Rabatt / 100;
            RabattDetails += `Rabatt auf Gesamtpreis: ${Rabatt}% (${Rabatt_abzug_normal}$)<br>`;
          } else {
            Rabatt_abzug_normal = (total * Rabatt) / 100;
            total -= (total * Rabatt) / 100;
            if (Rabatt > 0) {
                RabattDetails += `Rabatt auf Gesamtpreis: ${Rabatt}% (${Rabatt_abzug_normal}$)<br>`;
              }
            }

      if (RabattPanzerung > 0) {
              Rabatt_abzug = Panzerung * RabattPanzerung / 100;
              const RabattierterPanzerung = Panzerung - (Panzerung * RabattPanzerung / 100);
              total -= (Panzerung - RabattierterPanzerung);
              RabattDetails += `Rabatt auf Panzerung: ${RabattPanzerung}% (${Rabatt_abzug}$)<br>`;
            }
            Rabatt_abzug = Rabatt_abzug + Rabatt_abzug_normal;
            document.getElementById("total").innerText = "Gesamtpreis:" + formatPrice(total);
            document.getElementById("RabattDetails").innerHTML = RabattDetails;
            updateTextarea(Rabatt_abzug);
            return total;
          }

        function toggleFulltune() {
            const FulltuneChecked = document.getElementById("Fulltune").checked;

            // Felder zurücksetzen, wenn Fulltune aktiviert wird
            if (FulltuneChecked) {
                document.getElementById("Motor").value = "0";
                document.getElementById("Bremse").value = "0";
                document.getElementById("Getriebe").value = "0";
                document.getElementById("Turbo").checked = false; // Turbo zurücksetzen
                calculate(); // Neuberechnung
            }

            // Aktivieren/Deaktivieren der Felder für Motor, Bremsen, Getriebe und Turbo
            document.getElementById("Motor").disabled = FulltuneChecked;
            document.getElementById("Bremse").disabled = FulltuneChecked;
            document.getElementById("Getriebe").disabled = FulltuneChecked;
            document.getElementById("Turbo").disabled = FulltuneChecked;

            calculate(); // Neuberechnung nach Aktivierung/Deaktivierung
        }

        function deleteExtras() {
            document.getElementById("Extras").value = '';
            calculate();
        }

        function deleteRabatt() {
            document.getElementById("Rabatt").value = '';
            document.getElementById("Rabattliste_gesamt").value = '0';
            calculate();
        }

        function deleteRabattPanzerung() {
            document.getElementById("RabattPanzerung").value = '';
            document.getElementById("Rabattliste_panzerung").value = '0';
            calculate();
        }

            // Funktion zum Zurücksetzen aller Eingaben
        function resetInputs() {
            // Nachricht anzeigen
            const message = document.getElementById("clearMessage");
            message.style.display = "block";

            // Nachricht nach 5 Sekunden ausblenden
            setTimeout(() => {
              message.style.display = "none";
            }, 2000);
            // Alle Checkboxen zurücksetzen
            const checkboxes = document.querySelectorAll('input[type="checkbox"]');
            checkboxes.forEach(checkbox => {
                checkbox.checked = false;
            });

            // Alle Auswahlfelder zurücksetzen
            const selects = document.querySelectorAll('select');
            selects.forEach(select => {
                select.value = "0";
            });

            // Alle Eingabefelder zurücksetzen
            document.getElementById("kennzeichen").value = '';
            document.getElementById("Extras").value = '';
            document.getElementById("Rabatt").value = '';
            document.getElementById("RabattPanzerung").value = '';
            document.getElementById("RabattPanzerung").disabled = false;
            document.getElementById("Rabatt").disabled = false;
            // Gesamtpreis zurücksetzen
            document.getElementById("total").innerText = "Gesamtpreis: 0$";
            document.getElementById("RabattDetails").innerHTML = ""; // Rabattdetails zurücksetzen


            // Alle Felder für Motor, Bremsen, Getriebe und Turbo zurücksetzen und aktivieren
            resetFulltune();
            resetDropdowns();
            showFamilienfahrzeugs();
            showBehoerdenfahrzeugs();
            updateTextarea();
        }
//Fulltune auf Anfangswerte zurücksetzen
        function resetFulltune() {
            document.getElementById("Fulltune").checked = false;
            document.getElementById("Motor").disabled = false;
            document.getElementById("Bremse").disabled = false;
            document.getElementById("Getriebe").disabled = false;
            document.getElementById("Turbo").disabled = false;
        }

        // Aktualisiere die Textarea und prüfe Debugging
        function updateTextarea(Rabatt_abzug) {

          // Werte der Eingabefelder abrufen
          const name = document.getElementById("name").value.trim();
          const dienstnummer = document.getElementById("dienstnummer").value.trim();
          const kennzeichen = document.getElementById("kennzeichen").value.trim();
          const total = document.getElementById("total").innerHTML;
          const rabatt_absolut = Rabatt_abzug ?? 0;
          // Bestehendes Textfeld in einem anderen Container ansteuern
          const textToCopy = document.getElementById("textToCopy");
          const changedValues = getChangedValues(); //Hole die geänderten Werte
          const now = new Date();
          const date = now.toLocaleDateString(); // Formatiertes Datum
          const time = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); //Formatierte Uhrzeit
          // Enable or disable the "Abschicken" button
          const abschickenButton = document.getElementById("Abschicken");
          let nameText = "Kein Name,keine Dienstnummer oder kein Kennzeichen"
          // Überprüfen, ob beide Felder ausgefüllt sind
          if (name !== "" && dienstnummer !== "" && kennzeichen !== "") {
            nameText = `Tuning:\nName: ${name}, Dienstnummer: ${dienstnummer}\nKennzeichen: ${kennzeichen}\nGeänderte Werte:\n${changedValues.join("\n")}\n${total} Rabatt Absolut:${rabatt_absolut}$\n${date} ${time}Uhr`;
            }

              // Textfeld aktualisieren
              textToCopy.value = nameText

              textToCopy.style.height = "auto"; // Setzt die Höhe zurück
              textToCopy.style.height = `${textToCopy.scrollHeight}px`; // Passt die Höhe an den Inhalt an
            }
//*********Füge Debugging hinzu, um Anfangswerte zu speichern für Textbox**************************
  function storeInitialValues() {
      initialValues = {
          checkboxes: Array.from(document.querySelectorAll('input[type="checkbox"]')).reduce((acc, checkbox) => {
              acc[checkbox.id] = checkbox.checked;
              return acc;
          }, {}),
          selects: Array.from(document.querySelectorAll('select')).reduce((acc, select) => {
              acc[select.id] = select.value;
              return acc;
          }, {}),
          inputs: {
              Extras: document.getElementById("Extras").value || '',
              Rabatt: document.getElementById("Rabatt").value|| '',
              RabattPanzerung: document.getElementById("RabattPanzerung").value || '',
          }
      };
      console.log('Initial values stored:', initialValues); // Debugging
  }
  //*********Debuggen um geänderte Werte für Textbox zu bekommen**************************
  function getChangedValues() {
      const changedValues = [];
      document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
          if (checkbox.checked !== initialValues.checkboxes[checkbox.id]) {
              changedValues.push(`${checkbox.id}: ${checkbox.checked ? checkbox.value + "$" : "Deaktiviert"}`);
          }
      });
      document.querySelectorAll('select').forEach(select => {
          if (select.value !== initialValues.selects[select.id]) {
              changedValues.push(`${select.id}: ${select.options[select.selectedIndex].text}`);
          }
      });
      const inputs = ["Extras", "Rabatt", "RabattPanzerung"];
      inputs.forEach(inputId => {
          const input = document.getElementById(inputId);
          if (input.value !== initialValues.inputs[inputId]) {
              changedValues.push(`${inputId}: ${input.value}`);
          }
      });

      console.log('Changed values detected:', changedValues); // Debugging
      return changedValues;
  }
  //*****************************Infobox Knopf Änderung Inhalt (aus-/einblenden)**************************
  document.getElementById('info_ausblenden').addEventListener('click', function () {
      // Nachricht anzeigen
      const message = document.getElementById("closeInfoMessage");
      message.style.display = "block";

      // Nachricht nach 5 Sekunden ausblenden
      setTimeout(() => {
        message.style.display = "none";
      }, 2000);

    const container = document.querySelector('.container_info'); // Container mit Klasse ".container_info" auswählen
    if (container.classList.contains('hidden')) {
      container.classList.remove('hidden'); // Entferne die Klasse "hidden", um den Container wieder sichtbar zu machen
      this.textContent = 'Infos ausblenden'; // Ändere den Button-Text zurück
    } else {
      container.classList.add('hidden'); // Füge die Klasse "hidden" hinzu, um den Container zu verstecken
      this.textContent = 'Infos anzeigen'; // Ändere den Button-Text
    }
  });

  //*****************************Whitemode Knopf Änderung Inhalt (Whitemode/Darkmode)**************************
  document.getElementById('info_whitemode').addEventListener('click', function () {
      // Nachricht anzeigen
      const message = document.getElementById("changeInfobrightness");
      message.style.display = "block";

      // Nachricht nach 5 Sekunden ausblenden
      setTimeout(() => {
        message.style.display = "none";
      }, 2000);

    //const container = document.querySelector('.container_info'); // Container mit Klasse ".container_info" auswählen
    if (container.classList.contains('white-mode')) {
      container.classList.remove('white-mode'); // Entferne die Klasse "white-mode", um den Container wieder dunkler zu machen
      this.textContent = 'Whitemode'; // Ändere den Button-Text zurück
    } else {
      container.classList.add('white-mode'); // Füge die Klasse "white-mode" hinzu, um den Container wieder heller zu machen
      this.textContent = 'Darkmode'; // Ändere den Button-Text
    }
  });
//************************Kopieren des Gesamtpreises für IC***********************************
  function copyPrice() {
    const total = calculate(); // Gesamtpreis abrufen
    navigator.clipboard.writeText(total.toString())
    .then(() => {
      // Nachricht anzeigen
      const message = document.getElementById("copyMessage");
      message.style.display = "block";

      // Nachricht nach 5 Sekunden wieder ausblenden
      setTimeout(() => {
        message.style.display = "none";
      }, 2000);
    })
    .catch(err => {
      console.error("Kopieren fehlgeschlagen: ", err);
    });
  }

  //*****************************Rechnung verschicken Meldung**************************
  async function sendText() {
               // Nachricht anzeigen

               const message = document.getElementById("");
               message.style.display = "block";

               // Nachricht nach 5 Sekunden wieder ausblenden
               setTimeout(() => {
                 message.style.display = "none";
               }, 50000);
         }


//*****************************Whitemode aktivieren**************************
   document.getElementById("info_whitemode").addEventListener("click", function () {
      const elements = document.querySelectorAll(
        ".container_info_links, .container_info_mitte, .container_info_rechts, .upgrade-box, .container_name, .Felgen-box, .lackierung-box, .licht-box, .sonstiges-box, .Rabatt-Box"
      );

      elements.forEach(element => {
        element.classList.toggle("white-mode");
      });
    });
    //************************Abschicken des ausgefüllten Tuningrechners***************************
document.getElementById('Abschicken').addEventListener('click', async () => {
      const webhookUrl = 'https://discord.com/api/webhooks/1324366828998361138/ZaAztDtLZp7346a4Xjudb06YuS_5czNpVwSruGEilae5Bbq7uSsbSHJkcNTLMgxO7iGR'; // Deine Webhook-URL
      const textContent = document.getElementById('textToCopy').value; // Text aus der Textarea
      const responseOutput = document.getElementById('responseOutput'); // Ausgabe-Element
      const messageTimeOutput = document.getElementById('message'); // Ausgabe-Element
      const submitButton = document.getElementById('Abschicken'); // Der Abschicken-Button

      // Leere das Ausgabe-Element vor dem neuen Request
      responseOutput.textContent = '';
      responseOutput.style.display = 'none';

      // Standard-Sperre von 1 Millisekunde (für Tests) 12000ms sind 1
      const standardLockTime = 120000;

      // Knopf sofort sperren
      submitButton.disabled = true;
      isLockTimeOver = false;

      let lockTime = standardLockTime;  // Standard-Sperrzeit festlegen
      const currentTime = new Date();
      const unlockTime = new Date(currentTime.getTime() + lockTime); // Zeitpunkt, an dem der Button entsperrt wird
      const formatted2minTime = unlockTime.toLocaleString('de-DE');   // Freigabezeitpunkt
      try {
        const response = await fetch(webhookUrl, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            content: textContent,
            username: 'Tuningrechner-Bot', // Optional: Bot-Name
          })
        });

        if (response.ok) {
          responseOutput.textContent = 'Nachricht erfolgreich gesendet!';
          messageTimeOutput.textContent= `Bitte warte bis ${formatted2minTime}Uhr`;
          responseOutput.style.backgroundColor = 'green';
        } else {
          const errorText = await response.text();
          if (response.status === 429) {
          // Discord Rate Limit Handling
          const retryAfter = parseInt(response.headers.get('Retry-After')) || 0; // Retry-After Zeit auslesen (in Sekunden)
          lockTime = Math.max(retryAfter * 1000 + standardLockTime); // Sicherstellen, dass mindestens standardLockTime genutzt wird

          const currentTimeRateLimit = new Date();
          const unlockTimeRateLimit = new Date(currentTimeRateLimit.getTime() + lockTime); // Zeitpunkt, an dem der Button entsperrt wird
          // Formatiere das Datum und die Zeit
          const formattedUnlockTime = unlockTimeRateLimit.toLocaleString('de-DE');   // Freigabezeitpunkt

          responseOutput.textContent = `Rate Limit erreicht. Bitte warte ${lockTime / 1000} Sekunden.`;
          messageTimeOutput.textContent = `Der Button wird am ${formattedUnlockTime} wieder verfügbar sein.`;
          responseOutput.style.backgroundColor = 'orange';
        }
         else {
            switch (response.status) {
              case 400:
                responseOutput.textContent = 'Fehler 400: Ungültige Anfrage - Überprüfe das JSON-Format oder die Daten.';
                break;
              case 401:
                responseOutput.textContent = 'Fehler 401: Nicht autorisiert - Webhook-URL ist ungültig oder abgelaufen.';
                break;
              case 403:
                responseOutput.textContent = 'Fehler 403: Zugriff verweigert - Webhook hat keine Berechtigungen für diesen Channel.';
                break;
              case 404:
                responseOutput.textContent = 'Fehler 404: Webhook nicht gefunden - Überprüfe die Webhook-URL.';
                break;
              case 500:
                responseOutput.textContent = 'Fehler 500: Interner Serverfehler - Problem auf Discord-Seite.';
                break;
              default:
                responseOutput.textContent = `Unerwarteter Fehler ${response.status}: ${errorText}`;
            }
            responseOutput.style.backgroundColor = 'red';
          }
          console.error('Fehler:', response.status, errorText);
        }
      } catch (error) {
        responseOutput.textContent = 'Netzwerkfehler: ' + error.message;
        responseOutput.style.backgroundColor = 'red';
        console.error('Fehler beim Senden der Anfrage:', error);
      } finally {
        // Nachricht einblenden
        responseOutput.style.display = 'block';

        // Nachricht nach 5 Sekunden ausblenden
        setTimeout(() => {
          responseOutput.style.display = 'none';
        }, 10000);

        // Knopf nach der Rate Limit-Sperrzeit entsperren
        console.log('Entsperre den Button nach', lockTime, 'ms');
        setTimeout(() => {
          isLockTimeOver = true; // Sperrzeit beendet
          console.log('Sperrzeit abgelaufen, Button kann wieder aktiviert werden.');
          updateButtonState(); // Prüfen, ob der Button aktiviert werden kann
          messageTimeOutput.textContent = ``;
        }, lockTime);
      }
    });
function updateButtonState() {
  const name = document.getElementById("name").value.trim();
  const dienstnummer = document.getElementById("dienstnummer").value.trim();
  const kennzeichen = document.getElementById("kennzeichen").value.trim();
  const abschickenButton = document.getElementById("Abschicken");

  // Button aktivieren, wenn alle Felder ausgefüllt sind und die Sperrzeit abgelaufen ist
  abschickenButton.disabled = !(name && dienstnummer && kennzeichen) || !isLockTimeOver;
}

// Event-Listener für die Eingabefelder hinzufügen
document.getElementById("name").addEventListener("input", updateButtonState);
document.getElementById("dienstnummer").addEventListener("input", updateButtonState);
document.getElementById("kennzeichen").addEventListener("input", updateButtonState);

    //******************Alles kopieren an Text**************************************
    function copyText() {
       const textArea = document.getElementById("textToCopy");
       textArea.select();
       textArea.setSelectionRange(0, 99999); // Für mobile Geräte

       navigator.clipboard.writeText(textArea.value)
         .then(() => {
           // Nachricht anzeigen
           const message = document.getElementById("copyMessageText");
           message.style.display = "block";

           // Nachricht nach 5 Sekunden wieder ausblenden
           setTimeout(() => {
             message.style.display = "none";
           }, 2000);
         })
         .catch(err => {
           console.error("Kopieren fehlgeschlagen: ", err);
         });
     }

     // Fahrzeug-Daten
         const FamilienfahrzeugsData = {
             "PeekyBlinders": [
                  { id: 1, name: "Schyster", info: "<b><i>Codewort: Garisson</i></b> <br>Primärfarbe: Spalte 20 + Zeile 1 <br> Sekundärfarbe: Spalte 20 + Zeile 1 <br> Primärlacktyp: Matt <br> Sekundärlacktyp: Matt <br> Perlglanz: Spalte 4 + Zeile 6 <br> Felgenfarbe: Schwarz <br> Scheiben: Schwarz/Dunkel <br> Unterbodenlicht: Spalte 1 + Zeile 12 <br> Schweinwerfer: Weiß <br> Kennzeichen: Schwarz/Gelb" , img:""  },
                  { id: 2, name: "Oracle", info: "<b><i>Codewort: Garisson</i></b> <br> <b><i>Rabatt: 50% Autohaus </i></b> <br> Primärfarbe: Spalte 20 + Zeile 1 <br> Sekundärfarbe: Spalte 22 + Zeile 1 <br> Primärlacktyp: Matt <br> Sekundärlacktyp: Matt <br> Perlglanz: Spalte 4 + Zeile 6 <br> Felgenfarbe: Schwarz <br> Scheiben: Schwarz/Dunkel <br> Unterbodenlicht: Spalte 1 + Zeile 12 <br> Schweinwerfer: Weiß <br> Kennzeichen: Schwarz/Gelb" , img:"" }
             ],
             "NobodyClub": [
                 { id: 1, name: "Sultan Classic (Sultan2)", info: "<b><i>Codewort: Getriebesand</i></b> <br> Leistung: Fulltune <br>Federung:Max <br> Panzerung: Max <br> Primärfarbe: nicht ändern <br> Sekundärfarbe: nicht ändern <br> Perlglanz: Spalte 16 + Zeile 9 <br> Spoiler: Karin Extreme - Flügel <br> Felgenfarbe: Spalte 1 + Zeile 8 <br> Fenster: Pures Schwarz <br> Sticker: Straßenflitzer <br> Xenon: Weiß <br> Unterboden: Weiß ", img:""  },
                 { id: 2, name: "Drafter", info: "<b><i>Codewort: Getriebesand</i></b> <br> Leistung: Fulltune <br> Panzerung: Max <br> Primärfarbe: nicht ändern <br> Sekundärfarbe: nicht ändern <br> Perlglanz: Spalte 16 + Zeile 9 <br> Felgenfarbe: Spalte 1 + Zeile 8 <br> Fenster: Pures Schwarz <br> Xenon: Rot <br> Unterboden: Rot ", img:""  }
             ],
             "BBG": [
                 { id: 1, name: "VSTR", info: "<b><i>Codewort: Spezi</i></b> <br> Leistung: Fulltune <br>Panzerung: Max <br> Primärfarbe: Spalte 22 + Zeile 1 <br> Sekundärfarbe: Spalte 22 + Zeile 1 <br> Perlglanz: Spalte 16 + Zeile 7<br> Felgenfarbe: Spalte 16 + Zeile 7 <br> Xenon: Weiß <br>  Unterboden: Spalte 1 + Zeile 1 <br>Sticker: GEO <br> Fenster: Pures Schwarz", img:""  },
                 { id: 2, name: "Drafter", info: "<b><i>Codewort: Spezi</i></b> <br> Leistung: Fulltune <br>Panzerung: Max <br> Primärfarbe: Spalte 22 + Zeile 1 <br> Sekundärfarbe: Spalte 22 + Zeile 1 <br> Perlglanz: Spalte 16 + Zeile 7<br> Felgenfarbe: Spalte 16 + Zeile 7 <br> Xenon: Hot Pink <br>  Unterboden: Spalte 19 + Zeile 10 <br>Sticker: Redwood Racing <br> Fenster: Pures Schwarz", img:""  },
                 { id: 3, name: "Sultan Classic Freezy", info: "<b><i>Codewort: Spezi</i></b> <br> Leistung: Fulltune <br>Panzerung: Max <br> Primärfarbe: Spalte 22 + Zeile 1 <br> Sekundärfarbe: Spalte 22 + Zeile 1 <br> Perlglanz: Spalte 16 + Zeile 7<br> Felgenfarbe: Spalte 16 + Zeile 7 <br> Xenon: Hot Pink <br>  Unterboden: Spalte 19 + Zeile 10 <br>Sticker: Redwood Racing <br> Fenster: Pures Schwarz", img:""  },
                 { id: 4, name: "Sultan Classic Nackenklatscher", info: "<b><i>Codewort: Spezi</i></b> <br> Leistung: Fulltune <br>Panzerung: Max <br> Primärfarbe: Spalte 22 + Zeile 1 <br> Sekundärfarbe: Spalte 22 + Zeile 1 <br> Perlglanz: Spalte 16 + Zeile 7<br> Felgenfarbe: Spalte 16 + Zeile 7 <br> Xenon: Minzgrün <br> Unterboden: Spalte 10 + Zeile 12 <br>Sticker: Klassischer Streifen <br> Fenster: Pures Schwarz", img:""  }
             ],
             "Aztecas": [
                  { id: 1, name: "Chino", info: "<b><i>Codewort: Gänsehoden</i></b> <br> <b><i>Rabatt: 50% Autohaus </i></b> <br> Primärfarbe: Spalte 12 + Zeile 16 <br> Primärlacktyp: Pearl <br> Sekundärlacktyp: Pearl <br> Perlglanz: Spalte 13 + Zeile 9 <br> Felgenfarbe: Spalte 1 + Zeile 1 <br> Scheiben: Pures Schwarz <br> Unterbodenlicht: Spalte 12 + Zeile 16 <br> Schweinwerfer: Minzgrün <br> Vordere Stoßstange: Tuning-Frontspoiler <br> Hintere Stoßstange: Wheelie Bar <br> Auspuff: Doppelrohr-Auspuff <br> Rechter Fender: Bordsteintaster", img:""  }
             ],
             "BlackoutCrew": [
                 { id: 1, name: "Drafter", info: "<b><i>Codewort: Kawasaki</i></b> <br> Leistung: Fulltune <br> Perlglanz: Spalte 13 + Zeile 3 <br> Spoiler: Mittlerer Spoiler <br> Vordere Stoßstange: Rennsplitter <br> Seitenschweller: Sport-Seitenverkleidungen <br> Hood: Lufteinlass <br> Dashboardfarbe: Spalte 16 + Zeile 7 <br> Innenfarbe: Spalte 16 + Zeile 7 <br> Kennzeichen: North Yankton <br> Xenon: Rot <br> Sticker: Obey-Streifen <br> Fenster Pures Schwarz", img:""  },
                 { id: 2, name: "Schafter", info: "<b><i>Codewort: Kawasaki</i></b> <br> Leistung: Fulltune <br> Perlglanz: Spalte 13 + Zeile 3 <br> Spoiler: Spoilerlippe <br> Vordere Stoßstange: Carbon-Frontsplitter <br> Hintere Stoßstange: Carbon-Heckdiffusor <br> Seitenschweller: Tuning-Seitenverkleidungen <br> Hood: Mit Einlass <br> Dashboardfarbe: Spalte 13 + Zeile 10 <br> Innenfarbe: Spalte 16 + Zeile 7 <br> Kennzeichen: North Yankton <br> Xenon: Rot <br> Fenster Pures Schwarz", img:""  }
             ],
             "BlackAces": [
                 { id: 1, name: "VSTR", info: "<b><i>Codewort: Pik 91</i></b> <br> Leistung: Fulltune <br> Primärfarbe: Spalte 22 + Zeile 1 <br> Sekundärfarbe: Spalte 22 + Zeile 1 <br> Lacktyp: Metallic <br> Xenon: Schwarzlicht <br> Unterbodenlicht: Spalte 16 + Zeile 19 <br> Fenster: Pures Schwarz <br> Kennzeichen: Schwarz/gelb <br> Hood: Hochleistung <br> Felgenfarbe: keine Farbe, kein Carbon", img:""  },
                 { id: 2, name: "Drafter", info: "<b><i>Codewort: Pik 91</i></b> <br> Leistung: Fulltune <br> Primärfarbe: Spalte 22 + Zeile 1 <br> Sekundärfarbe: Spalte 22 + Zeile 1 <br> Lacktyp: Metallic  <br> Xenon: Schwarzlicht <br> Unterbodenlicht: Spalte 16 + Zeile 19 <br> Fenster: Pures Schwarz <br> Kennzeichen: Schwarz/gelb <br> Hood: Rennmotorhaube <br> Spoiler: GT-Spoiler <br> Felgenfarbe: keine Farbe, kein Carbon", img:""  },
                 { id: 3, name: "Jugular", info: "<b><i>Codewort: Pik 91</i></b> <br> Leistung: Fulltune <br>  Primärfarbe: Spalte 22 + Zeile 1 <br> Sekundärfarbe: Spalte 22 + Zeile 1 <br> Lacktyp: Metallic  <br> Xenon: Schwarzlicht <br> Unterbodenlicht: Spalte 16 + Zeile 19 <br> Fenster: Pures Schwarz <br> Kennzeichen: Schwarz/gelb <br> Hood: Lackierte Drift-Einlässe <br> Spoiler: Niedriger Flügel <br> Felgenfarbe: keine Farbe, kein Carbon", img:""  },
                 { id: 4, name: "BF400", info: "<b><i>Codewort: Pik 91</i></b> <br> Leistung: Fulltune <br>  Primärfarbe: Spalte 22 + Zeile 1 <br> Sekundärfarbe: Spalte 22 + Zeile 1 <br> Lacktyp: Metallic  <br> Xenon: Schwarzlicht <br> Unterbodenlicht: Spalte 16 + Zeile 19 <br> Fenster: Pures Schwarz <br> Kennzeichen: Schwarz/gelb <br> Felgenfarbe: keine Farbe, kein Carbon", img:""  }
             ]
         };

         // Funktion, um Fahrzeuge je nach Familie anzuzeigen
         function showFamilienfahrzeugs() {
             const Familie = document.getElementById("Familie").value;
             const FamilienfahrzeugGroup = document.getElementById("FamilienfahrzeugGroup");
             const FamilienfahrzeugSelect = document.getElementById("Familienfahrzeug");
             const FamilienfahrzeugLabel = document.getElementById("FamilienfahrzeugLabel");

             // Reset der Fahrzeug-Infos und Auswahl
             document.getElementById("FamilienfahrzeugInfo").style.display = "none";
             const infoText = document.getElementById("infoText");
             infoText.innerHTML = ""; // Lösche den Info-Text

             if (Familie) {
                 FamilienfahrzeugGroup.style.display = "block"; // Zeige die gesamte Gruppe
                 FamilienfahrzeugSelect.innerHTML = "<option value=''>Bitte wählen</option>"; // Reset der Fahrzeugliste

                 // Fahrzeuge für die ausgewählte Familie hinzufügen
                 const Familienfahrzeugs = FamilienfahrzeugsData[Familie];
                 Familienfahrzeugs.forEach(Familienfahrzeug => {
                     const option = document.createElement("option");
                     option.value = Familienfahrzeug.id;
                     option.textContent = Familienfahrzeug.name;
                     FamilienfahrzeugSelect.appendChild(option);
                 });
             } else {
                 FamilienfahrzeugGroup.style.display = "none"; // Verstecke die Gruppe
             }
         }

         // Funktion, um Fahrzeuginfo anzuzeigen
         function showFamilienfahrzeugInfo() {
             const Familie = document.getElementById("Familie").value;
             const FamilienfahrzeugId = document.getElementById("Familienfahrzeug").value;
             const infoText = document.getElementById("infoText");
             const FamilienfahrzeugInfo = document.getElementById("FamilienfahrzeugInfo");
             const FahrzeugImage = document.getElementById("FahrzeugImage");
             const keinBildText = document.getElementById("keinBildText");

             // Wenn ein Fahrzeug ausgewählt wurde
             if (FamilienfahrzeugId) {
                 const Familienfahrzeug = FamilienfahrzeugsData[Familie].find(v => v.id == FamilienfahrzeugId);

                 // Aktualisiere den Info-Text
                 infoText.innerHTML = Familienfahrzeug.info;

                 // Zeige das Info-Div (mit Text und Bild)
                 FamilienfahrzeugInfo.style.display = "flex";  // Flexbox-Layout wird angezeigt

                 // Wenn ein Bild existiert
                 if (Familienfahrzeug.img) {
                     FahrzeugImage.src = Familienfahrzeug.img;  // Bild setzen
                     FahrzeugImage.style.display = "block";     // Bild anzeigen
                     keinBildText.style.display = "none";      // "Kein Bild verfügbar"-Text ausblenden
                 } else {
                     // Wenn kein Bild existiert
                     FahrzeugImage.style.display = "none";      // Bild ausblenden
                     keinBildText.style.display = "block";     // "Kein Bild verfügbar"-Text anzeigen
                 }
             } else {
                 // Wenn kein Fahrzeug ausgewählt ist, verstecke das Info-Div, das Bild und den Text
                 FamilienfahrzeugInfo.style.display = "none";  // Info-Div ausblenden
                 FahrzeugImage.style.display = "none";         // Bild ausblenden
                 keinBildText.style.display = "none";          // Kein Bild Text ausblenden
             }
         }
         // Fahrzeug-Daten für Behoerden
     const BehoerdenfahrzeugsData = {
        "UnitedStatesMarshal": [
             { id: 1, name: "Police Mesa", info: "Leistung: Wenn gewünscht Fulltune <br> Primärfarbe: Spalte 22 + Zeile 1 <br> Sekundärfarbe: Spalte 22 + Zeile 1 <br> Reifen: Nicht verändern!<br> Scheiben: Pures Schwarz <br> Xenon: Weiß oder Normal <br> Kennzeichen: Schwarz/Gelb <br> Extras: Alles erlaubt was dienstbezogen ist." , img:"" },
             { id: 2, name: "Roadrunner 2 (Gepanzert)", info: "Leistung: Nicht möglich! <br> Primärfarbe: Spalte 22 + Zeile 1 <br> Sekundärfarbe: Spalte 22 + Zeile 1 <br> Reifen: Nicht verändern!<br> Scheiben: Pures Schwarz <br> Xenon: Weiß oder Normal <br> Kennzeichen: Schwarz/Gelb <br> Extras: Alles erlaubt was dienstbezogen ist.", img:""  },
             { id: 3, name: "USM Sprinter", info: "Leistung: Wenn gewünscht Fulltune <br> Primärfarbe: Spalte 22 + Zeile 1 <br> Sekundärfarbe: Spalte 22 + Zeile 1 <br> Reifen: Nicht verändern!<br> Scheiben: Pures Schwarz <br> Xenon: Weiß oder Normal <br> Kennzeichen: Schwarz/Gelb <br> Extras: Alles erlaubt was dienstbezogen ist.", img:""  },
             { id: 4, name: "Insurgent", info: "Leistung: Wenn gewünscht Fulltune <br> Primärfarbe: Spalte 22 + Zeile 1 <br> Sekundärfarbe: Spalte 22 + Zeile 1 <br> Reifen: Nicht verändern!<br> Scheiben: Pures Schwarz <br> Xenon: Weiß oder Normal <br> Kennzeichen: Schwarz/Gelb <br> Extras: Alles erlaubt was dienstbezogen ist.", img:""  },
             { id: 5, name: "USM Humvee", info: "Leistung: Wenn gewünscht Fulltune <br> Primärfarbe: Spalte 22 + Zeile 1 <br> Sekundärfarbe: Spalte 22 + Zeile 1 <br> Reifen: Nicht verändern!<br> Scheiben: Pures Schwarz <br> Xenon: Weiß oder Normal <br> Kennzeichen: Schwarz/Gelb <br> Extras: Alles erlaubt was dienstbezogen ist.", img:""  },
             { id: 6, name: "USM Gauntlet", info: "Leistung: Wenn gewünscht Fulltune <br> Primärfarbe: Spalte X + Zeile X <br> Sekundärfarbe: Spalte X + Zeile X <br> Reifen: Nicht verändern!<br> Scheiben: Pures Schwarz <br> Xenon: Weiß oder Normal <br> Kennzeichen: Schwarz/Gelb <br> Sticker:??? <br> Extras: Alles erlaubt was dienstbezogen ist. <br> Keine Heckspoiler, keine anderen Auspuffrohre, etc.", img:""  },
             { id: 7, name: "Washington", info: "Leistung: Wenn gewünscht Fulltune <br> Primärfarbe: Spalte 22 + Zeile 1 <br> Sekundärfarbe: Spalte 22 + Zeile 1 <br> Reifen: Nicht verändern!<br> Scheiben: Pures Schwarz <br> Xenon: Weiß oder Normal <br> Kennzeichen: Schwarz/Gelb <br> Sticker: ??? <br> Extras: Alles erlaubt was dienstbezogen ist.", img:""  },
             { id: 8, name: "Scout", info: "Leistung: Wenn gewünscht Fulltune <br> Primärfarbe: Spalte 22 + Zeile 1 <br> Sekundärfarbe: Spalte 22 + Zeile 1 <br> Reifen: Nicht verändern!<br> Felgen: SUV/Sunrise <br> Felgenfarbe: Spalte 1 + Zeile 1<br> Scheiben: Pures Schwarz <br> Xenon: Weiß oder Normal <br> Kennzeichen: Schwarz/Gelb  <br> Sticker: ??? <br> Extras: Alles erlaubt was dienstbezogen ist.", img:""  },
             { id: 9, name: "Coach", info: "Leistung: Wenn gewünscht Fulltune <br> Primärfarbe: Spalte 22 + Zeile 1 <br> Sekundärfarbe: Spalte 22 + Zeile 1 <br> Reifen: Nicht verändern!<br> Scheiben: Pures Schwarz <br> Xenon: Weiß oder Normal <br> Kennzeichen: Schwarz/Gelb <br> Extras: Alles erlaubt was dienstbezogen ist.", img:""  },
             { id:10, name: "Rumpo", info: "Leistung: Wenn gewünscht Fulltune <br> Primärfarbe: Spalte 22 + Zeile 1 <br> Sekundärfarbe: Spalte 22 + Zeile 1 <br> Reifen: Nicht verändern!<br> Scheiben: Pures Schwarz <br> Xenon: Weiß oder Normal <br> Kennzeichen: Schwarz/Gelb <br> Sticker: ??? <br> Extras: Alles erlaubt was dienstbezogen ist.", img:""  },
             { id:11, name: "Stainer", info: "Leistung: Wenn gewünscht Fulltune <br> Primärfarbe: Spalte 22 + Zeile 1 <br> Sekundärfarbe: Spalte 22 + Zeile 1 <br> Reifen: Nicht verändern!<br> Scheiben: Pures Schwarz <br> Xenon: Weiß oder Normal <br> Kennzeichen: Schwarz/Gelb <br> Sticker: ??? <br> Extras: Alles erlaubt was dienstbezogen ist.", img:""  },
             { id:12, name: "Buffalo", info: "Leistung: Wenn gewünscht Fulltune <br> Primärfarbe: Spalte 22 + Zeile 1 <br> Sekundärfarbe: Spalte 22 + Zeile 1 <br> Reifen: Nicht verändern!<br> Scheiben: Pures Schwarz <br> Xenon: Weiß oder Normal <br> Kennzeichen: Schwarz/Gelb <br> Sticker: ??? <br> Extras: Alles erlaubt was dienstbezogen ist.", img:""  },
             { id:13, name: "Merrit", info: "Leistung: Wenn gewünscht Fulltune <br> Primärfarbe: Spalte 22 + Zeile 1 <br> Sekundärfarbe: Spalte 22 + Zeile 1 <br> Reifen: Nicht verändern!<br> Felgen: SUV/Sunrise <br> Felgenfarbe: Spalte 1 + Zeile 1<br> Scheiben: Pures Schwarz <br> Xenon: Weiß oder Normal <br> Kennzeichen: Schwarz/Gelb <br> Extras: Alles erlaubt was dienstbezogen ist.", img:""  },
           ],
        "PaletoMedicalDepartment": [
            { id: 1, name: "Paleto Sandstorm", info: "Leistung: Fulltune <br> Felgen: Nicht verändern! <br> Kennzeichen: frei wählbar <br> Dienstnummer: frei wählbar <br> Xenon: Nicht verändern! <br> Scheiben: Default oder Light Smoke <br>Extra 1: Frei wählbar <br>Extra 2: Pflicht!", img:"Bilder/PaletoMedicalDepartment/Paleto_Sandstorm.webp"  , img:"Bilder/PaletoMedicalDepartment/Paleto_Sandstorm.webp" },
            { id: 2, name: "Paleto Buffalo", info: "Leistung: Fulltune <br> Primärlackty: Metallic <br> Felgen: Nicht verändern! <br> Kennzeichen: frei wählbar <br> Dienstnummer: frei wählbar <br> Xenon: Nicht verändern! <br> Scheiben: Default oder Light Smoke <br> Extra 1: frei wählbar <br> Interior Color: Schwarz, Weiß, oder Spalte 13 + Zeile 9"   , img:"Bilder/PaletoMedicalDepartment/Paleto_Buffalo.webp"  },
            { id: 3, name: "Maverick PMD", info: "Scheibentönung: Default oder Light Smoke" , img:"Bilder/PaletoMedicalDepartment/Maverick_PMD.webp" },
            { id: 4, name: "Medicopter PMD", info: "Sticker: 3",img:"Bilder/PaletoMedicalDepartment/Medicopter_PMD.webp" }
        ],
        "3": [
            { id: 1, name: "n.A", info: "n.A" },
            { id: 2, name: "n.A", info: "n.A" }
        ]
     };

    // Funktion, um Fahrzeuge je nach Behörde anzuzeigen
    function showBehoerdenfahrzeugs() {
        const Behoerde = document.getElementById("Behoerde").value;
        const BehoerdenfahrzeugSelect = document.getElementById("Behoerdenfahrzeug");
        const BehoerdenfahrzeugGroup = document.getElementById("BehoerdenfahrzeugGroup");

        // Reset der Fahrzeug-Infos und Auswahl
        const infoText = document.getElementById("infoTextbehoerde");
        document.getElementById("BehoerdenfahrzeugInfo").style.display = "none";
        infoText.innerHTML = ""; // Lösche den Info-Text

        if (Behoerde) {
            // Gruppe anzeigen und Dropdown befüllen
            BehoerdenfahrzeugGroup.style.display = "block";
            BehoerdenfahrzeugSelect.innerHTML = "<option value=''>Bitte wählen</option>";

            // Fahrzeuge für die ausgewählte Behörde hinzufügen
            const Behoerdenfahrzeugs = BehoerdenfahrzeugsData[Behoerde];
            if (Behoerdenfahrzeugs) {
                Behoerdenfahrzeugs.forEach(Behoerdenfahrzeug => {
                    const option = document.createElement("option");
                    option.value = Behoerdenfahrzeug.id;
                    option.textContent = Behoerdenfahrzeug.name;
                    BehoerdenfahrzeugSelect.appendChild(option);
                });
            }
        } else {
            // Gruppe und Auswahl ausblenden
            BehoerdenfahrzeugGroup.style.display = "none";
        }
    }

    // Funktion, um Fahrzeuginfo anzuzeigen
    function showBehoerdenfahrzeugInfo() {
        const Behoerde = document.getElementById("Behoerde").value;
        const BehoerdenfahrzeugId = document.getElementById("Behoerdenfahrzeug").value;
        const infoText = document.getElementById("infoTextbehoerde");
        const BehoerdenfahrzeugInfo = document.getElementById("BehoerdenfahrzeugInfo");
        const FahrzeugImage = document.getElementById("BehoerdenFahrzeugImage");
        const keinBildText = document.getElementById("keinBehoerdenBildText");

        if (BehoerdenfahrzeugId) {
            const Behoerdenfahrzeug = BehoerdenfahrzeugsData[Behoerde].find(v => v.id == BehoerdenfahrzeugId);

            infoText.innerHTML = Behoerdenfahrzeug.info;
            BehoerdenfahrzeugInfo.style.display = "flex";

            if (Behoerdenfahrzeug.img) {
                FahrzeugImage.src = Behoerdenfahrzeug.img;
                FahrzeugImage.style.display = "block";
                keinBildText.style.display = "none";
            } else {
                FahrzeugImage.style.display = "none";
                keinBildText.style.display = "block";
            }
        } else {
            BehoerdenfahrzeugInfo.style.display = "none";
            FahrzeugImage.style.display = "none";
            keinBildText.style.display = "none";
        }
    }
//Nur ein Dropdownmenü auswählbar machen, sodass nicht beide gleichzeitig ausgeben
function disableOtherDropdown(selectedDropdown) {
    const familieDropdown = document.getElementById("Familie");
    const behoerdeDropdown = document.getElementById("Behoerde");

    if (selectedDropdown === "Familie") {
        if (familieDropdown.value) {
            behoerdeDropdown.disabled = true; // Behörde-Dropdown deaktivieren
        } else {
            behoerdeDropdown.disabled = false; // Behörde-Dropdown aktivieren, wenn keine Familie ausgewählt ist
        }
    } else if (selectedDropdown === "Behoerde") {
        if (behoerdeDropdown.value) {
            familieDropdown.disabled = true; // Familie-Dropdown deaktivieren
        } else {
            familieDropdown.disabled = false; // Familie-Dropdown aktivieren, wenn keine Behörde ausgewählt ist
        }
    }
}

//Dropdowns wieder zurücksetzen
function resetDropdowns() {
    const familieDropdown = document.getElementById("Familie");
    const behoerdeDropdown = document.getElementById("Behoerde");

    // Dropdowns zurücksetzen
    familieDropdown.value = "";
    behoerdeDropdown.value = "";

    // Beide Dropdowns aktivieren
    familieDropdown.disabled = false;
    behoerdeDropdown.disabled = false;
}
    </script>
</body>
</html>
