www.iu-dualesstudium.de Open in urlscan Pro
2600:9000:223e:9600:f:1ad5:3680:93a1  Public Scan

Submitted URL: http://iu-dualesstudium.de/hochschule/rankings-akkreditierung
Effective URL: https://www.iu-dualesstudium.de/hochschule/rankings-akkreditierung/
Submission: On July 14 via manual from AT — Scanned from DE

Form analysis 2 forms found in the DOM

GET https://www.iu-dualesstudium.de/bachelor/studien-finder/

<form method="GET" action="https://www.iu-dualesstudium.de/bachelor/studien-finder/" class="flex flex-wrap w-full mx-auto">
  <div class="relative flex block w-full border border-black bg-white search-input-wrapper">
    <input data-cy="autocompleteInput" id="mainsearch" type="search" autocomplete="off" name="s"
      class="autocomplete-input cp-search-input placeholder-gray-800 block relative justify-center items-center w-full pl-2 h-12 md:pl-3 pt-2.5 pb-2 border border-black outline-none appearance-none" placeholder="Welchen Studiengang suchst Du?"
      data-t-c="Catalogue Search - Study Programme" data-t-a="click" data-t-l="Suchfeld Header" data-s-c="courses">
    <div class="cp-js-clear mt-auto mb-auto mr-4 w-auto hidden">
      <svg class="cp-js-clear fill-current cursor-pointer w-4 h-4" data-t-c="Catalogue Search - Study Programme" data-t-a="click" data-t-l="Suche löschen Header">
        <use href="#clear"></use>
      </svg>
    </div>
    <button type="submit" class="submit-search cp-search-button transform flex items-center justify-center focus:outline-none bg-cta hover:bg-cta-light active:bg-cta-dark w-14" aria-label="Suchen" data-t-c="Catalogue Search - Study Programme"
      data-t-a="click" data-t-l="Suche ausführen">
      <svg class="w-5 h-5 fill-current text-white" data-t-c="Catalogue Search - Study Programme" data-t-a="click" data-t-l="Suche ausführen">
        <use xlink:href="#search"></use>
      </svg>
    </button>
  </div>
</form>

<form id="leadForm" wire:submit.prevent="finalize">
  <div class="grid md:grid-cols-4 gap-x-3 gap-y-6 mb-8">
    <div class="md:col-span-2">
      <div wire:id="osGC3TLzyB6sCNqE5GaG">
        <div class="flex items-center mb-3">
          <label class="font-bold" for="osGC3TLzyB6sCNqE5GaG"> Studienort* </label>
        </div>
        <div x-data="AlpineSelect({
                 options: window.Livewire.find('osGC3TLzyB6sCNqE5GaG').entangle('options'),
                 selected:  window.Livewire.find('osGC3TLzyB6sCNqE5GaG').entangle('value'),
                 isValid: window.Livewire.find('osGC3TLzyB6sCNqE5GaG').entangle('showValid'),
                 placeholder: window.Livewire.find('osGC3TLzyB6sCNqE5GaG').entangle('placeholder'),
                 multiple: false,
                 disabled: window.Livewire.find('osGC3TLzyB6sCNqE5GaG').entangle('disabled'),
            })" x-init="init()" @click.away="closeSelect()" @keydown.escape="closeSelect()" @keydown.arrow-down.prevent="increaseIndex()" @keydown.arrow-up.prevent="decreaseIndex()" @keydown.enter="pressedEnter($event)" @keydown.tab="pressedTab()">
          <select wire:model="value" name="studySite" class="hidden">
            <option value="30">Aachen</option>
            <option value="1">Augsburg</option>
            <option value="3">Berlin</option>
            <option value="4">Bielefeld</option>
            <option value="31">Bochum</option>
            <option value="43">Bonn</option>
            <option value="5">Braunschweig</option>
            <option value="6">Bremen</option>
            <option value="48">Chemnitz</option>
            <option value="7">Dortmund</option>
            <option value="8">Dresden</option>
            <option value="9">Duisburg</option>
            <option value="10">Düsseldorf</option>
            <option value="11">Erfurt</option>
            <option value="12">Essen</option>
            <option value="13">Frankfurt</option>
            <option value="14">Freiburg</option>
            <option value="50">Fulda</option>
            <option value="15">Hamburg</option>
            <option value="16">Hannover</option>
            <option value="17">Karlsruhe</option>
            <option value="32">Kassel</option>
            <option value="47">Kiel</option>
            <option value="18">Köln</option>
            <option value="19">Leipzig</option>
            <option value="20">Lübeck</option>
            <option value="44">Magdeburg</option>
            <option value="21">Mainz</option>
            <option value="22">Mannheim</option>
            <option value="33">Mönchengladbach</option>
            <option value="23">München</option>
            <option value="24">Münster</option>
            <option value="25">Nürnberg</option>
            <option value="34">Potsdam</option>
            <option value="35">Ravensburg</option>
            <option value="36">Regensburg</option>
            <option value="37">Rostock</option>
            <option value="38">Saarbrücken</option>
            <option value="49">Schwerin</option>
            <option value="27">Stuttgart</option>
            <option value="46">Trier</option>
            <option value="28">Ulm</option>
            <option value="29">Virtueller Campus</option>
            <option value="39">Wuppertal</option>
            <option value="45">Würzburg</option>
          </select>
          <button type="button"
            class="relative text-left min-h-[3.25rem] w-full border border-black focus-within:outline-none focus:outline-none focus:ring-2 focus-within:ring-2 ring-black bg-white hover:bg-gray-200 focus-within:bg-white focus:bg-white rounded-none cursor-default"
            :class="{'outline-none ring-2 hover:bg-white':open, '!bg-gray-50 !border-gray-200 !ring-0':disabled }" @click.prevent="toggleSelect()" :disabled="disabled" @focus="activateFocus()" @focusout="focusOut()">
            <div class="flex justify-between">
              <div class="flex-grow flex items-center">
                <input type="search" x-model="search" x-ref="search" :disabled="disabled" class="block w-full px-4 focus:outline-none appearance-none bg-transparent placeholder-gray-700" :class="{
                                   'placeholder-gray-700': !selected,
                                   'placeholder-black': selected,
                               }">
                <div class="cursor-pointer absolute left-4" x-show="search === ''">
                  <span x-text="selectedOption ? selectedOption.label : placeholder" :class="{
                                   'text-gray-700': !selected,
                                   'text-black': selected,
                               }" class="text-gray-700">Suche oder wähle Studienort</span>
                  <span x-show="selectedOption ? selectedOption.badge : false" x-text="selectedOption ? selectedOption.badge : ''" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone"
                    style="display: none;"></span>
                </div>
              </div>
              <div class="flex max-h-[3.25rem]">
                <svg class="w-4 text-success mr-4" x-show="isValid" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="display: none;">
                  <path fill="currentColor"
                    d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z">
                  </path>
                </svg>
                <svg x-show="!open" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="fill-current w-4 mr-4">
                  <path fill="currentColor" d="M443.5 162.6l-7.1-7.1c-4.7-4.7-12.3-4.7-17 0L224 351 28.5 155.5c-4.7-4.7-12.3-4.7-17 0l-7.1 7.1c-4.7 4.7-4.7 12.3 0 17l211 211.1c4.7 4.7 12.3 4.7 17 0l211-211.1c4.8-4.7 4.8-12.3.1-17z"></path>
                </svg>
                <svg x-show="open" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="fill-current w-4 mr-4" style="display: none;">
                  <path fill="currentColor"
                    d="M4.465 366.475l7.07 7.071c4.686 4.686 12.284 4.686 16.971 0L224 178.053l195.494 195.493c4.686 4.686 12.284 4.686 16.971 0l7.07-7.071c4.686-4.686 4.686-12.284 0-16.97l-211.05-211.051c-4.686-4.686-12.284-4.686-16.971 0L4.465 349.505c-4.687 4.686-4.687 12.284 0 16.97z">
                  </path>
                </svg>
              </div>
            </div>
            <div class="mt-0.5 w-[calc(100%_+_6px)] bg-white border-black border-3 border-t-0 absolute top-[calc(100%_-_2px)] -left-[3px] z-30" x-show="open" style="display: none;">
              <div x-ref="dropdown" class="max-h-60 overflow-y-auto relative z-30">
                <div x-show="options.length === 0" x-text="emptyOptionsMessage" class="px-4 py-2 text-gray-700" style="display: none;">Keine Ergebnisse</div>
                <template x-for="(option, index) in options" :key="option.value">
                  <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected===option.value,
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; selected!==option.value),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected===option.value)
                                    }" @click.prevent.stop="selectOption(option.value)" @mousemove="hoverOption(index)" :data-index="index">
                    <span x-text="option.label"></span>
                    <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone"></span>
                  </div>
                </template>
                <div class="px-4 py-2 cursor-pointer bg-gray-200 text-black" :class="{
                                    'bg-black text-white':selected===option.value,
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; selected!==option.value),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected===option.value)
                                    }" @click.prevent.stop="selectOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="0">
                  <span x-text="option.label">Aachen</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected===option.value,
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; selected!==option.value),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected===option.value)
                                    }" @click.prevent.stop="selectOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="1">
                  <span x-text="option.label">Augsburg</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected===option.value,
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; selected!==option.value),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected===option.value)
                                    }" @click.prevent.stop="selectOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="2">
                  <span x-text="option.label">Berlin</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected===option.value,
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; selected!==option.value),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected===option.value)
                                    }" @click.prevent.stop="selectOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="3">
                  <span x-text="option.label">Bielefeld</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected===option.value,
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; selected!==option.value),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected===option.value)
                                    }" @click.prevent.stop="selectOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="4">
                  <span x-text="option.label">Bochum</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected===option.value,
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; selected!==option.value),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected===option.value)
                                    }" @click.prevent.stop="selectOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="5">
                  <span x-text="option.label">Bonn</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected===option.value,
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; selected!==option.value),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected===option.value)
                                    }" @click.prevent.stop="selectOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="6">
                  <span x-text="option.label">Braunschweig</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected===option.value,
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; selected!==option.value),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected===option.value)
                                    }" @click.prevent.stop="selectOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="7">
                  <span x-text="option.label">Bremen</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected===option.value,
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; selected!==option.value),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected===option.value)
                                    }" @click.prevent.stop="selectOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="8">
                  <span x-text="option.label">Chemnitz</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected===option.value,
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; selected!==option.value),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected===option.value)
                                    }" @click.prevent.stop="selectOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="9">
                  <span x-text="option.label">Dortmund</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected===option.value,
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; selected!==option.value),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected===option.value)
                                    }" @click.prevent.stop="selectOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="10">
                  <span x-text="option.label">Dresden</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected===option.value,
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; selected!==option.value),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected===option.value)
                                    }" @click.prevent.stop="selectOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="11">
                  <span x-text="option.label">Duisburg</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected===option.value,
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; selected!==option.value),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected===option.value)
                                    }" @click.prevent.stop="selectOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="12">
                  <span x-text="option.label">Düsseldorf</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected===option.value,
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; selected!==option.value),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected===option.value)
                                    }" @click.prevent.stop="selectOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="13">
                  <span x-text="option.label">Erfurt</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected===option.value,
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; selected!==option.value),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected===option.value)
                                    }" @click.prevent.stop="selectOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="14">
                  <span x-text="option.label">Essen</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected===option.value,
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; selected!==option.value),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected===option.value)
                                    }" @click.prevent.stop="selectOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="15">
                  <span x-text="option.label">Frankfurt</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected===option.value,
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; selected!==option.value),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected===option.value)
                                    }" @click.prevent.stop="selectOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="16">
                  <span x-text="option.label">Freiburg</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected===option.value,
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; selected!==option.value),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected===option.value)
                                    }" @click.prevent.stop="selectOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="17">
                  <span x-text="option.label">Fulda</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone">Virtuell</span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected===option.value,
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; selected!==option.value),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected===option.value)
                                    }" @click.prevent.stop="selectOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="18">
                  <span x-text="option.label">Hamburg</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected===option.value,
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; selected!==option.value),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected===option.value)
                                    }" @click.prevent.stop="selectOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="19">
                  <span x-text="option.label">Hannover</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected===option.value,
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; selected!==option.value),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected===option.value)
                                    }" @click.prevent.stop="selectOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="20">
                  <span x-text="option.label">Karlsruhe</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected===option.value,
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; selected!==option.value),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected===option.value)
                                    }" @click.prevent.stop="selectOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="21">
                  <span x-text="option.label">Kassel</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected===option.value,
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; selected!==option.value),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected===option.value)
                                    }" @click.prevent.stop="selectOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="22">
                  <span x-text="option.label">Kiel</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected===option.value,
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; selected!==option.value),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected===option.value)
                                    }" @click.prevent.stop="selectOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="23">
                  <span x-text="option.label">Köln</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected===option.value,
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; selected!==option.value),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected===option.value)
                                    }" @click.prevent.stop="selectOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="24">
                  <span x-text="option.label">Leipzig</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected===option.value,
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; selected!==option.value),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected===option.value)
                                    }" @click.prevent.stop="selectOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="25">
                  <span x-text="option.label">Lübeck</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected===option.value,
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; selected!==option.value),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected===option.value)
                                    }" @click.prevent.stop="selectOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="26">
                  <span x-text="option.label">Magdeburg</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected===option.value,
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; selected!==option.value),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected===option.value)
                                    }" @click.prevent.stop="selectOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="27">
                  <span x-text="option.label">Mainz</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected===option.value,
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; selected!==option.value),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected===option.value)
                                    }" @click.prevent.stop="selectOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="28">
                  <span x-text="option.label">Mannheim</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected===option.value,
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; selected!==option.value),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected===option.value)
                                    }" @click.prevent.stop="selectOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="29">
                  <span x-text="option.label">Mönchengladbach</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected===option.value,
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; selected!==option.value),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected===option.value)
                                    }" @click.prevent.stop="selectOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="30">
                  <span x-text="option.label">München</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected===option.value,
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; selected!==option.value),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected===option.value)
                                    }" @click.prevent.stop="selectOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="31">
                  <span x-text="option.label">Münster</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected===option.value,
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; selected!==option.value),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected===option.value)
                                    }" @click.prevent.stop="selectOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="32">
                  <span x-text="option.label">Nürnberg</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected===option.value,
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; selected!==option.value),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected===option.value)
                                    }" @click.prevent.stop="selectOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="33">
                  <span x-text="option.label">Potsdam</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected===option.value,
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; selected!==option.value),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected===option.value)
                                    }" @click.prevent.stop="selectOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="34">
                  <span x-text="option.label">Ravensburg</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected===option.value,
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; selected!==option.value),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected===option.value)
                                    }" @click.prevent.stop="selectOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="35">
                  <span x-text="option.label">Regensburg</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected===option.value,
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; selected!==option.value),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected===option.value)
                                    }" @click.prevent.stop="selectOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="36">
                  <span x-text="option.label">Rostock</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected===option.value,
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; selected!==option.value),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected===option.value)
                                    }" @click.prevent.stop="selectOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="37">
                  <span x-text="option.label">Saarbrücken</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone">Virtuell</span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected===option.value,
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; selected!==option.value),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected===option.value)
                                    }" @click.prevent.stop="selectOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="38">
                  <span x-text="option.label">Schwerin</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone">Virtuell</span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected===option.value,
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; selected!==option.value),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected===option.value)
                                    }" @click.prevent.stop="selectOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="39">
                  <span x-text="option.label">Stuttgart</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected===option.value,
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; selected!==option.value),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected===option.value)
                                    }" @click.prevent.stop="selectOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="40">
                  <span x-text="option.label">Trier</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone">Virtuell</span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected===option.value,
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; selected!==option.value),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected===option.value)
                                    }" @click.prevent.stop="selectOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="41">
                  <span x-text="option.label">Ulm</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected===option.value,
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; selected!==option.value),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected===option.value)
                                    }" @click.prevent.stop="selectOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="42">
                  <span x-text="option.label">Virtueller Campus</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone">Virtuell</span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected===option.value,
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; selected!==option.value),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected===option.value)
                                    }" @click.prevent.stop="selectOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="43">
                  <span x-text="option.label">Wuppertal</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected===option.value,
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; selected!==option.value),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected===option.value)
                                    }" @click.prevent.stop="selectOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="44">
                  <span x-text="option.label">Würzburg</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
              </div>
            </div>
          </button>
          <style>
            [x-cloak] {
              display: none;
            }
          </style>
          <script>
            function AlpineSelect(config) {
              return {
                data: (config.options !== null && config.options !== undefined) ? config.options : [],
                open: false,
                search: '',
                isValid: (config.isValid !== null && config.isValid !== undefined) ? config.isValid : false,
                options: {},
                emptyOptionsMessage: 'Keine Ergebnisse',
                placeholder: config.placeholder,
                selected: config.selected,
                multiple: config.multiple,
                currentIndex: 0,
                isLoading: false,
                disabled: (config.disabled !== null && config.disabled !== undefined) ? config.disabled : false,
                init: function() {
                  if (this.selected == null) {
                    if (this.multiple) {
                      this.selected = []
                    } else {
                      this.selected = ''
                    }
                  }
                  if (!this.data) this.data = {}
                  this.resetOptions()
                  this.$watch('data', () => {
                    this.resetOptions()
                    this.currentIndex = 0
                  })
                  this.$watch('search', ((searchTerm, oldSearchTerm) => {
                    if (!searchTerm) {
                      this.resetOptions()
                      return
                    }
                    const searchMatch = this.data.find((item) => item.label === searchTerm)
                    if (oldSearchTerm === '' && searchMatch) {
                      this.selected = searchMatch.value
                      this.open = false
                      return
                    }
                    this.open = true
                    this.options = this.data.filter((item) => item.label.toLowerCase().includes(searchTerm.toLowerCase()))
                    this.options.sort((a, b) => {
                      if (a.label.toLowerCase().startsWith(searchTerm.toLowerCase()) && b.label.toLowerCase().startsWith(searchTerm.toLowerCase())) return 0
                      if (a.label.toLowerCase().startsWith(searchTerm.toLowerCase())) return -1
                      return 1
                    })
                    this.currentIndex = 0
                  }))
                },
                resetOptions: function() {
                  this.options = this.data
                  this.validateSelectedOptions()
                },
                validateSelectedOptions: function() {
                  if (this.multiple) {
                    for (const [_, value] of Object.entries(this.selected)) {
                      if (this.data.findIndex((item) => item.value === value) === -1) {
                        this.selected.splice(this.selected.findIndex((item) => item === value), 1)
                      }
                    }
                  } else {
                    if (this.data.findIndex((item) => item.value === this.selected) === -1 && this.selected !== '') {
                      this.selected = ''
                    }
                  }
                },
                activateFocus: function() {
                  if (this.multiple) {
                    return
                  }
                  setTimeout(() => {
                    this.$refs.search.focus()
                  }, 200)
                },
                focusOut: function() {
                  if (this.multiple) {
                    this.closeSelect()
                  }
                },
                closeSelect: function() {
                  this.open = false
                  this.search = ''
                },
                toggleSelect: function() {
                  if (!this.disabled) {
                    if (this.open) return this.closeSelect()
                    this.open = true
                    this.activateFocus()
                  }
                },
                deselectOption: function(index) {
                  if (this.multiple) {
                    this.selected.splice(index, 1)
                  } else {
                    this.selected = ''
                  }
                },
                selectOption: function(value) {
                  if (!this.disabled) {
                    // If multiple push to the array, if not, keep that value and close menu
                    if (this.multiple) {
                      // If it's not already in there
                      if (!this.selected.includes(value)) {
                        this.selected.push(value)
                      }
                    } else {
                      this.selected = value
                      this.closeSelect()
                    }
                  }
                },
                toggleOption: function(value) {
                  if (!this.selected.includes(value)) {
                    this.selectOption(value)
                  } else {
                    this.deselectOption(this.selected.findIndex((item) => item === value))
                  }
                },
                pressedEnter: function(event) {
                  event.preventDefault()
                  if (this.open) {
                    if (this.multiple) {
                      this.toggleOption(this.options[this.currentIndex].value)
                    } else {
                      this.selectOption(this.options[this.currentIndex].value)
                    }
                  } else {
                    this.toggleSelect();
                    if (!this.multiple && this.selected) {
                      this.currentIndex = this.data.findIndex((item) => item.value === this.selected)
                      this.$nextTick(() => {
                        this.scrollToSelectedOption()
                      })
                    }
                  }
                },
                pressedTab: function() {
                  if (this.open && !this.multiple) {
                    if (this.options.length > 0) {
                      this.selectOption(this.options[this.currentIndex].value)
                    } else {
                      this.closeSelect()
                    }
                  }
                },
                hoverOption: function(index) {
                  this.currentIndex = index
                },
                increaseIndex: function() {
                  if (this.currentIndex === this.options.length - 1) {
                    this.currentIndex = 0
                  } else {
                    this.currentIndex++
                  }
                  if (!this.open && !this.disabled && !this.multiple) {
                    this.selectOption(this.options[this.currentIndex].value)
                  }
                  this.scrollToSelectedOption()
                },
                decreaseIndex: function() {
                  if (this.currentIndex === 0) {
                    this.currentIndex = this.options.length - 1
                  } else {
                    this.currentIndex--
                  }
                  if (!this.open && !this.disabled && !this.multiple) {
                    this.selectOption(this.options[this.currentIndex].value)
                  }
                  this.scrollToSelectedOption()
                },
                scrollToSelectedOption: function() {
                  if (this.options.length === 0) {
                    return
                  }
                  const dropdown = this.$refs.dropdown
                  const hoverOption = dropdown.querySelector('[data-index="' + this.currentIndex + '"]')
                  const dropdownHeight = dropdown.offsetHeight
                  const dropdownScrollTop = dropdown.scrollTop
                  const hoverOptionHeight = hoverOption.offsetHeight
                  const hoverOptionOffsetTop = hoverOption.offsetTop
                  if (dropdownHeight + dropdownScrollTop <= hoverOptionOffsetTop) {
                    dropdown.scrollTop = hoverOptionOffsetTop - dropdownHeight + hoverOptionHeight
                  } else if (dropdownScrollTop > hoverOptionOffsetTop) {
                    dropdown.scrollTop = hoverOptionOffsetTop
                  }
                },
                get selectedOption() {
                  if (!this.selected) {
                    return
                  }
                  return this.data.find((item) => item.value === this.selected)
                },
              }
            }
          </script>
        </div>
      </div>
    </div>
    <div class="md:col-span-2">
      <div wire:id="La97JlNv1isTAEIaZj1H">
        <div class="flex items-center mb-3">
          <label class="font-bold" for="La97JlNv1isTAEIaZj1H"> Studiengang* </label>
        </div>
        <div x-data="AlpineSelect({
                 options: window.Livewire.find('La97JlNv1isTAEIaZj1H').entangle('options'),
                 selected:  window.Livewire.find('La97JlNv1isTAEIaZj1H').entangle('value'),
                 isValid: window.Livewire.find('La97JlNv1isTAEIaZj1H').entangle('showValid'),
                 placeholder: window.Livewire.find('La97JlNv1isTAEIaZj1H').entangle('placeholder'),
                 multiple: true,
                 disabled: window.Livewire.find('La97JlNv1isTAEIaZj1H').entangle('disabled'),
            })" x-init="init()" @click.away="closeSelect()" @keydown.escape="closeSelect()" @keydown.arrow-down.prevent="increaseIndex()" @keydown.arrow-up.prevent="decreaseIndex()" @keydown.enter="pressedEnter($event)" @keydown.tab="pressedTab()">
          <select wire:model="value" name="studyProgram" multiple="" class="hidden">
            <option value="39">Agrarmanagement B. Sc.</option>
            <option value="2">Architektur B.A.</option>
            <option value="7">Bauingenieurwesen B. Eng.</option>
            <option value="18">BWL - Accounting &amp; Controlling B.A.</option>
            <option value="19">BWL - Steuerberatung B.A.</option>
            <option value="21">Culinary Management B.A.</option>
            <option value="38">Digital Engineering B. Eng.</option>
            <option value="40">E-Commerce B.A.</option>
            <option value="30">Elektrotechnik B. Eng.</option>
            <option value="3">Gesundheitsmanagement B.A.</option>
            <option value="22">Immobilien­wirtschaft B.A.</option>
            <option value="34">Informatik B. Sc.</option>
            <option value="23">Kindheitspädagogik B.A.</option>
            <option value="24">Kommunikation &amp; PR B.A.</option>
            <option value="25">Logistikmanagement B.A.</option>
            <option value="4">Marketingmanagement B.A.</option>
            <option value="43">Maschinenbau B. Eng.</option>
            <option value="42">Mechatronik B. Eng.</option>
            <option value="6">Mediendesign B.A.</option>
            <option value="41">Online Marketing B.A.</option>
            <option value="26">Personalmanagement B.A.</option>
            <option value="1">Soziale Arbeit B.A.</option>
            <option value="5">Tourismusmanagement B.A.</option>
            <option value="27">Wirtschaftsinformatik B. Sc.</option>
            <option value="45">Wirtschaftsingenieurwesen Management B. Eng.</option>
            <option value="33">Wirtschaftsingenieurwesen Maschinenbau B. Eng.</option>
          </select>
          <button type="button"
            class="relative text-left min-h-[3.25rem] w-full border border-black focus-within:outline-none focus:outline-none focus:ring-2 focus-within:ring-2 ring-black bg-white hover:bg-gray-200 focus-within:bg-white focus:bg-white rounded-none cursor-default"
            :class="{'outline-none ring-2 hover:bg-white':open, '!bg-gray-50 !border-gray-200 !ring-0':disabled }" @click.prevent="toggleSelect()" :disabled="disabled" @focus="activateFocus()" @focusout="focusOut()">
            <div class="flex justify-between">
              <div class="flex-grow flex items-center">
                <span class="mx-4 text-gray-700" x-show="selected &amp;&amp; selected.length === 0" x-text="placeholder">Wähle Deinen Studiengang</span>
                <div x-show="selected.length > 0" style="display: none;">
                  <div class="flex flex-wrap px-3 py-1">
                    <template x-for="(key, index) in selected" :key="index" class="hidden">
                      <div class="bg-black text-white truncate flex justify-between items-center m-1 px-4 py-1">
                        <span class="truncate break-words whitespace-normal" x-text="(data.find((item) => item.value === key) ? data.find((item) => item.value === key).label : '')"></span>
                        <svg focusable="false" class="ml-2.5 h-4 w-3 shrink-0" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" x-show="!disabled" :class="{'cursor-pointer':!disabled}" @deselect.window="deselectOption(index)"
                          @click.prevent.stop="deselectOption(index)">
                          <path fill="currentColor"
                            d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z">
                          </path>
                        </svg>
                      </div>
                    </template>
                  </div>
                </div>
              </div>
              <div class="flex max-h-[3.25rem]">
                <svg class="w-4 text-success mr-4" x-show="isValid" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="display: none;">
                  <path fill="currentColor"
                    d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z">
                  </path>
                </svg>
                <svg x-show="!open" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="fill-current w-4 mr-4">
                  <path fill="currentColor" d="M443.5 162.6l-7.1-7.1c-4.7-4.7-12.3-4.7-17 0L224 351 28.5 155.5c-4.7-4.7-12.3-4.7-17 0l-7.1 7.1c-4.7 4.7-4.7 12.3 0 17l211 211.1c4.7 4.7 12.3 4.7 17 0l211-211.1c4.8-4.7 4.8-12.3.1-17z"></path>
                </svg>
                <svg x-show="open" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="fill-current w-4 mr-4" style="display: none;">
                  <path fill="currentColor"
                    d="M4.465 366.475l7.07 7.071c4.686 4.686 12.284 4.686 16.971 0L224 178.053l195.494 195.493c4.686 4.686 12.284 4.686 16.971 0l7.07-7.071c4.686-4.686 4.686-12.284 0-16.97l-211.05-211.051c-4.686-4.686-12.284-4.686-16.971 0L4.465 349.505c-4.687 4.686-4.687 12.284 0 16.97z">
                  </path>
                </svg>
              </div>
            </div>
            <div class="mt-0.5 w-[calc(100%_+_6px)] bg-white border-black border-3 border-t-0 absolute top-[calc(100%_-_2px)] -left-[3px] z-30" x-show="open" style="display: none;">
              <div x-ref="dropdown" class="max-h-60 overflow-y-auto relative z-30">
                <div x-show="options.length === 0" x-text="emptyOptionsMessage" class="px-4 py-2 text-gray-700" style="display: none;">Keine Ergebnisse</div>
                <template x-for="(option, index) in options" :key="option.value">
                  <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected.includes(option.value),
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; !selected.includes(option.value)),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected.includes(option.value))
                                    }" @click.prevent.stop="toggleOption(option.value)" @mousemove="hoverOption(index)" :data-index="index">
                    <span x-text="option.label"></span>
                    <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone"></span>
                  </div>
                </template>
                <div class="px-4 py-2 cursor-pointer bg-gray-200 text-black" :class="{
                                    'bg-black text-white':selected.includes(option.value),
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; !selected.includes(option.value)),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected.includes(option.value))
                                    }" @click.prevent.stop="toggleOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="0">
                  <span x-text="option.label">Agrarmanagement B. Sc.</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected.includes(option.value),
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; !selected.includes(option.value)),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected.includes(option.value))
                                    }" @click.prevent.stop="toggleOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="1">
                  <span x-text="option.label">Architektur B.A.</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected.includes(option.value),
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; !selected.includes(option.value)),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected.includes(option.value))
                                    }" @click.prevent.stop="toggleOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="2">
                  <span x-text="option.label">Bauingenieurwesen B. Eng.</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected.includes(option.value),
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; !selected.includes(option.value)),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected.includes(option.value))
                                    }" @click.prevent.stop="toggleOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="3">
                  <span x-text="option.label">BWL - Accounting &amp; Controlling B.A.</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected.includes(option.value),
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; !selected.includes(option.value)),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected.includes(option.value))
                                    }" @click.prevent.stop="toggleOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="4">
                  <span x-text="option.label">BWL - Steuerberatung B.A.</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected.includes(option.value),
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; !selected.includes(option.value)),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected.includes(option.value))
                                    }" @click.prevent.stop="toggleOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="5">
                  <span x-text="option.label">Culinary Management B.A.</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected.includes(option.value),
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; !selected.includes(option.value)),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected.includes(option.value))
                                    }" @click.prevent.stop="toggleOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="6">
                  <span x-text="option.label">Digital Engineering B. Eng.</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected.includes(option.value),
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; !selected.includes(option.value)),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected.includes(option.value))
                                    }" @click.prevent.stop="toggleOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="7">
                  <span x-text="option.label">E-Commerce B.A.</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected.includes(option.value),
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; !selected.includes(option.value)),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected.includes(option.value))
                                    }" @click.prevent.stop="toggleOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="8">
                  <span x-text="option.label">Elektrotechnik B. Eng.</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected.includes(option.value),
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; !selected.includes(option.value)),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected.includes(option.value))
                                    }" @click.prevent.stop="toggleOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="9">
                  <span x-text="option.label">Gesundheitsmanagement B.A.</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected.includes(option.value),
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; !selected.includes(option.value)),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected.includes(option.value))
                                    }" @click.prevent.stop="toggleOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="10">
                  <span x-text="option.label">Immobilien­wirtschaft B.A.</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected.includes(option.value),
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; !selected.includes(option.value)),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected.includes(option.value))
                                    }" @click.prevent.stop="toggleOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="11">
                  <span x-text="option.label">Informatik B. Sc.</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected.includes(option.value),
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; !selected.includes(option.value)),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected.includes(option.value))
                                    }" @click.prevent.stop="toggleOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="12">
                  <span x-text="option.label">Kindheitspädagogik B.A.</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected.includes(option.value),
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; !selected.includes(option.value)),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected.includes(option.value))
                                    }" @click.prevent.stop="toggleOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="13">
                  <span x-text="option.label">Kommunikation &amp; PR B.A.</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected.includes(option.value),
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; !selected.includes(option.value)),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected.includes(option.value))
                                    }" @click.prevent.stop="toggleOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="14">
                  <span x-text="option.label">Logistikmanagement B.A.</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected.includes(option.value),
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; !selected.includes(option.value)),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected.includes(option.value))
                                    }" @click.prevent.stop="toggleOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="15">
                  <span x-text="option.label">Marketingmanagement B.A.</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected.includes(option.value),
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; !selected.includes(option.value)),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected.includes(option.value))
                                    }" @click.prevent.stop="toggleOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="16">
                  <span x-text="option.label">Maschinenbau B. Eng.</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected.includes(option.value),
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; !selected.includes(option.value)),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected.includes(option.value))
                                    }" @click.prevent.stop="toggleOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="17">
                  <span x-text="option.label">Mechatronik B. Eng.</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected.includes(option.value),
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; !selected.includes(option.value)),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected.includes(option.value))
                                    }" @click.prevent.stop="toggleOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="18">
                  <span x-text="option.label">Mediendesign B.A.</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected.includes(option.value),
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; !selected.includes(option.value)),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected.includes(option.value))
                                    }" @click.prevent.stop="toggleOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="19">
                  <span x-text="option.label">Online Marketing B.A.</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected.includes(option.value),
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; !selected.includes(option.value)),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected.includes(option.value))
                                    }" @click.prevent.stop="toggleOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="20">
                  <span x-text="option.label">Personalmanagement B.A.</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected.includes(option.value),
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; !selected.includes(option.value)),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected.includes(option.value))
                                    }" @click.prevent.stop="toggleOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="21">
                  <span x-text="option.label">Soziale Arbeit B.A.</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected.includes(option.value),
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; !selected.includes(option.value)),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected.includes(option.value))
                                    }" @click.prevent.stop="toggleOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="22">
                  <span x-text="option.label">Tourismusmanagement B.A.</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected.includes(option.value),
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; !selected.includes(option.value)),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected.includes(option.value))
                                    }" @click.prevent.stop="toggleOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="23">
                  <span x-text="option.label">Wirtschaftsinformatik B. Sc.</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected.includes(option.value),
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; !selected.includes(option.value)),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected.includes(option.value))
                                    }" @click.prevent.stop="toggleOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="24">
                  <span x-text="option.label">Wirtschaftsingenieurwesen Management B. Eng.</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
                <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected.includes(option.value),
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; !selected.includes(option.value)),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected.includes(option.value))
                                    }" @click.prevent.stop="toggleOption(option.value)" @mousemove="hoverOption(index)" :data-index="index" data-index="25">
                  <span x-text="option.label">Wirtschaftsingenieurwesen Maschinenbau B. Eng.</span>
                  <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone" style="display: none;"></span>
                </div>
              </div>
            </div>
          </button>
        </div>
      </div>
    </div>
    <div class="md:col-span-2">
      <div wire:id="TqYMdTUvOmQpyclvIn0A">
        <div class="flex items-center mb-3">
          <label class="font-bold" for="TqYMdTUvOmQpyclvIn0A"> Studienstart* </label>
        </div>
        <div x-data="AlpineSelect({
                 options: window.Livewire.find('TqYMdTUvOmQpyclvIn0A').entangle('options'),
                 selected:  window.Livewire.find('TqYMdTUvOmQpyclvIn0A').entangle('value'),
                 isValid: window.Livewire.find('TqYMdTUvOmQpyclvIn0A').entangle('showValid'),
                 placeholder: window.Livewire.find('TqYMdTUvOmQpyclvIn0A').entangle('placeholder'),
                 multiple: false,
                 disabled: window.Livewire.find('TqYMdTUvOmQpyclvIn0A').entangle('disabled'),
            })" x-init="init()" @click.away="closeSelect()" @keydown.escape="closeSelect()" @keydown.arrow-down.prevent="increaseIndex()" @keydown.arrow-up.prevent="decreaseIndex()" @keydown.enter="pressedEnter($event)" @keydown.tab="pressedTab()">
          <select wire:model="value" name="studyStartDate" disabled="" class="hidden">
          </select>
          <button type="button"
            class="relative text-left min-h-[3.25rem] w-full border border-black focus-within:outline-none focus:outline-none focus:ring-2 focus-within:ring-2 ring-black bg-white hover:bg-gray-200 focus-within:bg-white focus:bg-white rounded-none cursor-default !bg-gray-50 !border-gray-200 !ring-0"
            :class="{'outline-none ring-2 hover:bg-white':open, '!bg-gray-50 !border-gray-200 !ring-0':disabled }" @click.prevent="toggleSelect()" :disabled="disabled" @focus="activateFocus()" @focusout="focusOut()" disabled="disabled">
            <div class="flex justify-between">
              <div class="flex-grow flex items-center">
                <input type="search" x-model="search" x-ref="search" :disabled="disabled" class="block w-full px-4 focus:outline-none appearance-none bg-transparent placeholder-gray-700" :class="{
                                   'placeholder-gray-700': !selected,
                                   'placeholder-black': selected,
                               }" disabled="disabled">
                <div class="cursor-pointer absolute left-4" x-show="search === ''">
                  <span x-text="selectedOption ? selectedOption.label : placeholder" :class="{
                                   'text-gray-700': !selected,
                                   'text-black': selected,
                               }" class="text-gray-700">Gewünschter Studienstart</span>
                  <span x-show="selectedOption ? selectedOption.badge : false" x-text="selectedOption ? selectedOption.badge : ''" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone"
                    style="display: none;"></span>
                </div>
              </div>
              <div class="flex max-h-[3.25rem]">
                <svg class="w-4 text-success mr-4" x-show="isValid" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="display: none;">
                  <path fill="currentColor"
                    d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z">
                  </path>
                </svg>
                <svg x-show="!open" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="fill-current w-4 mr-4">
                  <path fill="currentColor" d="M443.5 162.6l-7.1-7.1c-4.7-4.7-12.3-4.7-17 0L224 351 28.5 155.5c-4.7-4.7-12.3-4.7-17 0l-7.1 7.1c-4.7 4.7-4.7 12.3 0 17l211 211.1c4.7 4.7 12.3 4.7 17 0l211-211.1c4.8-4.7 4.8-12.3.1-17z"></path>
                </svg>
                <svg x-show="open" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="fill-current w-4 mr-4" style="display: none;">
                  <path fill="currentColor"
                    d="M4.465 366.475l7.07 7.071c4.686 4.686 12.284 4.686 16.971 0L224 178.053l195.494 195.493c4.686 4.686 12.284 4.686 16.971 0l7.07-7.071c4.686-4.686 4.686-12.284 0-16.97l-211.05-211.051c-4.686-4.686-12.284-4.686-16.971 0L4.465 349.505c-4.687 4.686-4.687 12.284 0 16.97z">
                  </path>
                </svg>
              </div>
            </div>
            <div class="mt-0.5 w-[calc(100%_+_6px)] bg-white border-black border-3 border-t-0 absolute top-[calc(100%_-_2px)] -left-[3px] z-30" x-show="open" style="display: none;">
              <div x-ref="dropdown" class="max-h-60 overflow-y-auto relative z-30">
                <div x-show="options.length === 0" x-text="emptyOptionsMessage" class="px-4 py-2 text-gray-700">Keine Ergebnisse</div>
                <template x-for="(option, index) in options" :key="option.value">
                  <div class="px-4 py-2 cursor-pointer" :class="{
                                    'bg-black text-white':selected===option.value,
                                    'bg-gray-200 text-black': (currentIndex === index &amp;&amp; selected!==option.value),
                                    '!bg-gray-800 !text-white': (currentIndex === index &amp;&amp; selected===option.value)
                                    }" @click.prevent.stop="selectOption(option.value)" @mousemove="hoverOption(index)" :data-index="index">
                    <span x-text="option.label"></span>
                    <span x-show="option.badge" x-text="option.badge" class="bg-gray-700 whitespace-nowrap text-white px-1 ml-1 uppercase leading-5 text-sm font-bold box-decoration-clone"></span>
                  </div>
                </template>
              </div>
            </div>
          </button>
        </div>
      </div>
    </div>
    <div class="md:col-span-2">
      <div wire:id="SeGa2QzRq4NIzTGOsYVh">
        <div class="flex items-center mb-3">
          <label class="font-bold" for="SeGa2QzRq4NIzTGOsYVh"> E-Mail* </label>
        </div>
        <div class="relative">
          <input wire:model.debounce.500ms="value" name="email" id="SeGa2QzRq4NIzTGOsYVh" placeholder="max.mustermann@domain.com"
            class="relative h-[3.25rem] w-full border border-black disabled:text-gray-700 disabled:border-gray-200 disabled:bg-gray-50 focus:outline-none focus:ring-2 ring-black bg-white hover:bg-gray-200 focus:bg-white placeholder-gray-700 rounded-none pl-4 pr-12"
            type="email">
        </div>
      </div>
    </div>
  </div>
  <div>
  </div>
  <div class="mb-4 flex md:flex-row flex-col-reverse">
    <p class="text leading-6 grow">Ich habe die <a target="_blank" href="/datenschutz/" class="font-bold underline hover:no-underline hover:text-gray-700 inline-flex items-baseline">
                        Datenschutzerklärung
                        <svg xmlns="http://www.w3.org/2000/svg" class="mx-1 w-3 h-3" viewBox="0 0 512 512">
                            <path d="M440,256H424a8,8,0,0,0-8,8V464a16,16,0,0,1-16,16H48a16,16,0,0,1-16-16V112A16,16,0,0,1,48,96H248a8,8,0,0,0,8-8V72a8,8,0,0,0-8-8H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V264A8,8,0,0,0,440,256ZM480,0h-.06L383.78.17c-28.45,0-42.66,34.54-22.58,54.62l35.28,35.28-265,265a12,12,0,0,0,0,17l8.49,8.49a12,12,0,0,0,17,0l265-265,35.28,35.27c20,20,54.57,6,54.62-22.57L512,32.05A32,32,0,0,0,480,0Zm-.17,128.17-96-96L480,32Z"></path>
                        </svg>
                    </a>, sowie die Informationen zum Widerrufsrecht und zu den Verantwortlichen zur Kenntnis genommen. </p>
    <a class="flex justify-center items-center font-bold uppercase underline hover:no-underline w-full md:w-auto mb-8 md:mb-0 cursor-pointer" wire:click.prefetch="expandForm" data-t-c="Infomaterial Form" data-t-a="click" data-t-l="Mehr anzeigen">
                        <svg class="h-4 w-4 mr-2" data-t-c="Infomaterial Form" data-t-a="click" data-t-l="Mehr anzeigen">
                            <use href="#chevron-down"></use>
                        </svg>
                        Mehr anzeigen
                    </a>
  </div>
  <div class="flex">
    <div wire:id="6hZGpTL72vRttuAyBUHb">
      <label class="relative flex items-start select-none cursor-pointer" for="6hZGpTL72vRttuAyBUHb">
        <div class="flex items-center h-6">
          <input
            class="appearance-none h-6 w-6 bg-no-repeat bg-center bg-[length:70%_70%] bg-white checked:bg-black rounded-none border border-black text-black ring-black disabled:border-gray-400 disabled:text-gray-400 disabled:bg-gray-50 checked:disabled:bg-gray-500 hover:bg-gray-200 focus:outline-none checked:hover:bg-gray-700 focus:shadow-none focus:border-black focus:ring-2
                    bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA0NDggNTEyJz48L3N2Zz4=')]
                    checked:bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA0NDggNTEyJz48cGF0aCBmaWxsPSd3aGl0ZScgZD0nTTQxMy41MDUgOTEuOTUxTDEzMy40OSAzNzEuOTY2bC05OC45OTUtOTguOTk1Yy00LjY4Ni00LjY4Ni0xMi4yODQtNC42ODYtMTYuOTcxIDBMNi4yMTEgMjg0LjI4NGMtNC42ODYgNC42ODYtNC42ODYgMTIuMjg0IDAgMTYuOTcxbDExOC43OTQgMTE4Ljc5NGM0LjY4NiA0LjY4NiAxMi4yODQgNC42ODYgMTYuOTcxIDBsMjk5LjgxMy0yOTkuODEzYzQuNjg2LTQuNjg2IDQuNjg2LTEyLjI4NCAwLTE2Ljk3MWwtMTEuMzE0LTExLjMxNGMtNC42ODYtNC42ODYtMTIuMjg0LTQuNjg2LTE2Ljk3IDB6Jz48L3BhdGg+PC9zdmc+')]"
            id="6hZGpTL72vRttuAyBUHb" name="optIn" type="checkbox" wire:model="value">
        </div>
        <span class="ml-4 leading-6">Ich willige ein, dass ich per E-Mail Informationen zum Studium und Veranstaltungen erhalten werde.</span>
        <span x-data="{ tooltip: false }" x-on:mouseover="tooltip = true" x-on:mouseleave="tooltip = false" class="ml-2 cursor-pointer hidden md:inline-block mt-1">
          <svg class="w-4 h-4" viewBox="0 0 60 60" role="img" xmlns="http://www.w3.org/2000/svg">
            <path fill="currentColor"
              d="M24.375 26.25C24.375 25.2145 25.2145 24.375 26.25 24.375H28.125C29.1196 24.375 30.0734 24.7701 30.7766 25.4734C31.4799 26.1766 31.875 27.1304 31.875 28.125V37.5C31.875 37.9973 32.0725 38.4742 32.4242 38.8258C32.7758 39.1775 33.2527 39.375 33.75 39.375H35.625C36.6605 39.375 37.5 40.2145 37.5 41.25C37.5 42.2855 36.6605 43.125 35.625 43.125H33.75C32.2582 43.125 30.8274 42.5324 29.7725 41.4775C28.7176 40.4226 28.125 38.9918 28.125 37.5V28.125H26.25C25.2145 28.125 24.375 27.2855 24.375 26.25Z">
            </path>
            <path fill="currentColor"
              d="M27.5 15.474C27.9625 15.165 28.5062 15 29.0625 15C29.8084 15 30.5238 15.2963 31.0512 15.8238C31.5787 16.3512 31.875 17.0666 31.875 17.8125C31.875 18.3688 31.71 18.9125 31.401 19.375C31.092 19.8376 30.6527 20.198 30.1388 20.4109C29.6249 20.6238 29.0594 20.6795 28.5138 20.571C27.9682 20.4624 27.4671 20.1946 27.0738 19.8012C26.6804 19.4079 26.4126 18.9068 26.304 18.3612C26.1955 17.8156 26.2512 17.2501 26.4641 16.7362C26.677 16.2223 27.0374 15.783 27.5 15.474ZM29.4213 18.6786C29.4777 18.6553 29.532 18.6263 29.5833 18.592C29.6862 18.5233 29.7739 18.4352 29.842 18.3333C29.876 18.2825 29.905 18.2283 29.9286 18.1713C29.976 18.057 30 17.935 30 17.8125C30 17.7514 29.994 17.6901 29.982 17.6296C29.9458 17.4478 29.8565 17.2807 29.7254 17.1496C29.5943 17.0185 29.4273 16.9292 29.2454 16.893C29.1849 16.881 29.1236 16.875 29.0625 16.875C28.94 16.875 28.818 16.899 28.7037 16.9464C28.6467 16.97 28.5925 16.999 28.5417 17.033C28.4398 17.1011 28.3517 17.1888 28.283 17.2917C28.2487 17.343 28.2198 17.3973 28.1964 17.4537C28.1495 17.5669 28.125 17.6888 28.125 17.8125C28.125 17.8744 28.1311 17.9356 28.143 17.9954C28.1789 18.1759 28.2675 18.3433 28.3996 18.4754C28.5317 18.6075 28.6991 18.6961 28.8796 18.732C28.9394 18.7439 29.0006 18.75 29.0625 18.75C29.1862 18.75 29.3081 18.7255 29.4213 18.6786Z">
            </path>
            <path fill="currentColor"
              d="M30 3.75C15.5025 3.75 3.75 15.5025 3.75 30C3.75 44.4975 15.5025 56.25 30 56.25C44.4975 56.25 56.25 44.4975 56.25 30C56.25 15.5025 44.4975 3.75 30 3.75ZM0 30C0 13.4315 13.4315 0 30 0C46.5685 0 60 13.4315 60 30C60 46.5685 46.5685 60 30 60C13.4315 60 0 46.5685 0 30Z">
            </path>
          </svg>
          <div x-show="tooltip" class="text-black absolute bg-gray-200 shadow-xl p-4 transform -translate-y-10 translate-x-6 z-10 w-full max-w-sm lg:max-w-md" style="display: none;"> Es fehlt nur noch ein weiterer Schritt: Bestätige Deine E-Mail
            Adresse über die E-Mail, die wir an Dich senden. Sollte sie nicht nach wenigen Minuten da sein, schaue bitte auch in Deinem Spam-Ordner nach. </div>
        </span>
      </label>
    </div>
  </div>
  <button
    class="text-center py-3.25 px-5.25 leading-5 font-bold uppercase inline-flex items-center justify-center active:ring focus:ring ring-offset-0 ring-black focus:outline-none cursor-pointer disabled:cursor-default border-3 active:border-cta-dark hover:border-cta-light disabled:border-cta-lighter border-cta w-full sm:w-auto mt-8"
    type="submit"> Jetzt Studienbroschüre anfordern </button>
  <p class="text-xs mt-2.5 text-center sm:text-left">*Pflichtfeld, bitte vollständig ausfüllen</p>
</form>

Text Content

Wir respektieren deine Privatsphäre Diese Website verwendet die
Live-Chat-Software Bold360. Um Dir ein optimales Chat-Erlebnis zu bieten, musst
Du zuvor dem Bold360-Cookie auf deinem Gerät zustimmen. Deine Daten werden
sicher verarbeitet und ausschließlich zum Zwecke Deiner Supportanfrage
verwendet. Mehr Informationen findest Du in unserer Datenschutzerklärung.
Akzeptieren & Chatten Ablehnen & nicht Chatten Cookie-Einstellungen

 * Bachelor
   
    * Studiengänge
      
       * Agrarmanagement Neu
       * Architektur
       * BWL - Accounting & Controlling
       * BWL - Steuerberatung
       * Bauingenieurwesen
       * Culinary Management
       * Digital Engineering Neu
      
       * E-Commerce Neu
       * Elektrotechnik
       * Gesundheitsmanagement
       * Immobilien­wirtschaft
       * Informatik
       * Kindheitspädagogik
       * Kommunikation & PR
      
       * Logistikmanagement
       * Marketingmanagement
       * Maschinenbau Neu
       * Mechatronik Neu
       * Mediendesign
       * Online Marketing Neu
       * Personalmanagement
      
       * Soziale Arbeit
       * Tourismusmanagement
       * Wirtschaftsinformatik
       * Wirtschaftsingenieurwesen Management NEU
       * Wirtschaftsingenieurwesen Maschinenbau
   
    * Duales Studienmodell
    * Virtueller Campus Virtuell

 * Praxispartner
   
    * Praxispartner finden
    * Praxispartner werden

 * Studienorte
   
    * Campus-Finder
      
       * Aachen
       * Augsburg
       * Berlin
       * Bielefeld
       * Bochum
       * Bonn NEU
       * Braunschweig
       * Bremen
       * Chemnitz NEU
       * Dortmund
       * Dresden
       * Duisburg
       * Düsseldorf
      
       * Erfurt
       * Essen
       * Frankfurt
       * Freiburg
       * Fulda Virtuell
       * Hamburg
       * Hannover
       * Karlsruhe
       * Kassel
       * Kiel Neu
       * Köln
       * Leipzig
       * Lübeck
      
       * Magdeburg Neu
       * Mainz
       * Mannheim
       * Mönchengladbach
       * München
       * Münster
       * Nürnberg
       * Potsdam NEU
       * Ravensburg
       * Regensburg
       * Rostock NEU
       * Saarbrücken Virtuell
       * Schwerin Virtuell
      
       * Stuttgart
       * Trier Virtuell
       * Ulm
       * Virtueller Campus Virtuell
       * Wuppertal
       * Würzburg Neu

 * Dein Studium
   
    * Was ist ein duales Studium?
      
       * Vorteile
       * Kosten
       * Bewerbungsablauf
       * Zulassung
      
       * Studienalltag
       * Erfahrungsberichte
       * Häufig gestellte Fragen (FAQ)
   
    * Die Hochschule
      
      * Veranstaltungen am Campus
      * Unser Team
      * Akkreditierung & Qualität
      * Jobs
    * News, Blog & Podcast

 * Kontakt
   
    * Studienberatung & Kontakt
    * Studienbroschüre anfordern
    * Veranstaltungen am Campus
    * Veranstaltungen Online


Dein Bewerbungsportal!
Du hast Dich für ein duales Studium beworben? Durchlaufe im Portal alle weiteren
Schritte, um Dein Studium starten zu können. Zum Login
Bitte beachte: Eine Bewerbung ist notwendig, damit Du Dich ins Bewerbungsportal
einloggen kannst.
Zur Onlinebewerbung

Zur Onlinebewerbung Studienbroschüre anfordern



AKKREDITIERUNG & QUALITÄT

Ist die IU Internationale Hochschule staatlich anerkannt? Welche Auszeichnungen
hat die Hochschule erhalten? Erfahre alles über unsere Akkreditierung und
unseren Qualitätsanspruch.


Duales Studium
Akkreditierung Qualität



BILDUNG AUF TOP-NIVEAU

Die IU Internationale Hochschule unterstützt Dich mit innovativen
Studienangeboten bei der Realisierung Deiner beruflichen und persönlichen Ziele.
Dabei spielt die Qualitätssicherung eine genauso wichtige Rolle wie
Zertifizierungen von externen Anbietern und die Akkreditierung als staatlich
anerkannte Hochschule.

Weitere Informationen zur Institutionellen Reakkreditierung der IU findest Du
hier.


 * Staatlich anerkannte Hochschule
   
   Die IU Internationale Hochschule ist eine private, staatlich anerkannte
   Hochschule. Das bedeutet, dass unsere Abschlüsse gleichwertig zu staatlichen
   Hochschulen und Universitäten sind. Dies spiegelt sich auch in der hohen
   Qualität sowohl der Studienangebote als auch der Lehre. Wir achten darauf,
   Inhalte stets auf neuste Standards anzupassen.

 * Institutionell akkreditiert
   
   Eine institutionelle Akkreditierung findet bei Privathochschulen, die eine
   Akkreditierung beantragen, durch den Wissenschaftsrat statt. Unsere
   Hochschule wurde vom Wissenschaftsrat für fünf Jahre reakkreditiert. Seit
   2001 führt der Wissenschaftsrat im Auftrag der Länder die Institutionelle
   Akkreditierung nichtstaatlicher Hochschulen durch. Das Verfahren der
   Qualitätssicherung klärt, ob die Leistungen einer nichtstaatlichen Hochschule
   in Forschung und Lehre anerkannten wissenschaftlichen Maßstäben entsprechen.

 * Systemakkreditierte Hochschule
   
   Dank der freiwilligen Systemakkreditierung kann die IU ihre Studiengänge auf
   Basis der internen Qualitätsprüfung von Studium und Lehre akkreditieren.
   Außerdem erhalten wir das Recht, das Siegel des Akkreditierungsrates für
   geprüfte Studiengänge auch selbst zu verleihen. Die IU ist für die
   Höchstdauer ohne Auflagen systemakkreditiert.




BEI UNS KANNST DU AUSGEZEICHNET STUDIEREN


DAS IU QUALITÄTSMANAGEMENT

Unser Qualitätsmanagementsystem soll die Qualität der angebotenen Leistungen
sichern und zum Erreichen der festgelegten Entwicklungsziele beitragen. Im
Qualitätsmanagementsystem unserer Hochschule sind alle Mitarbeitenden
eingebunden – von der Hochschulleitung über die Hochschulverwaltung bis zu den
Lehrenden und den Hochschulgremien.

Digital Readiness Siegel

Wie gut sind Dozierende virtuell erreichbar? Steht der Lernstoff auch online zur
Verfügung? Auf der Studierendenplattform StudyCheck haben 36.300 Studierende die
Digitalisierung ihrer Hochschule bewertet. Das Ergebnis: Die IU liegt im Digital
Readiness Ranking ganz weit vorne.


Beliebteste Hochscule auf StudyCheck

Nicht nur externe Instanzen, auch unsere eigenen Studierenden geben uns
Bestnoten: Von über 1.700 unserer Studierenden, die uns auf der
Studierendenplattform StudyCheck bewertet haben, empfehlen uns 97% weiter. Damit
ist die IU Duales Studium die beliebteste von 502 Hochschulen auf StudyCheck.


Bestwertungen im CHE Ranking

Im aktuellen CHE Ranking erhält die IU Internationale Hochschule im Fach BWL
(Präsenzstudium) sowie im Fach Soziale Arbeit (duales Studium) Erstplatzierungen
in je sechs von 25 Kategorien. Damit erhält sie unter allen deutschen
Hochschulen die meisten Bestwertungen über alle geprüften Bereiche hinweg.


DtGV Service Award

Die IU Internationale Hochschule (IU) konnte 2022 beim Service-Award der
Deutschen Gesellschaft für Verbraucherstudien von sich überzeugen. So punktete
sie als einziger Bildungsanbieter in der Kategorie Kundendienst. Das spiegelt
die Haltung der IU gegenüber ihrer Studierenden wider. Sie und ihre Bedürfnisse
stehen konsequent im Mittelpunkt. Knapp 500 Unternehmenstests flossen in den
Service-Award ein.




ERFAHRE MEHR ÜBER UNSERE HOCHSCHULE

Das sagen unsere Absolvierenden

Ein duales Studium an unserer Hochschule bietet beste Voraussetzungen für eine
erfolgreiche Karriere. Das beweisen auch die Erfahrungsberichte unserer
Absolvierenden. Hier erzählen sie, wie sie von ihrem Studium profitiert haben.


Zu den Erfahrungsberichten
Klimaneutralität

Als Deutschlands größte Hochschule betrachten wir den Klimaschutz als unsere
gesellschaftliche Verantwortung. Darum wird bei uns bereits seit 2020
klimaneutral gelernt, gelehrt und gearbeitet.


Mehr zur Klimaneutralität


HOL DIR DEINE KOSTENLOSE STUDIENBROSCHÜRE

Studienort*
Aachen Augsburg Berlin Bielefeld Bochum Bonn Braunschweig Bremen Chemnitz
Dortmund Dresden Duisburg Düsseldorf Erfurt Essen Frankfurt Freiburg Fulda
Hamburg Hannover Karlsruhe Kassel Kiel Köln Leipzig Lübeck Magdeburg Mainz
Mannheim Mönchengladbach München Münster Nürnberg Potsdam Ravensburg Regensburg
Rostock Saarbrücken Schwerin Stuttgart Trier Ulm Virtueller Campus Wuppertal
Würzburg
Suche oder wähle Studienort

Keine Ergebnisse

Aachen
Augsburg
Berlin
Bielefeld
Bochum
Bonn
Braunschweig
Bremen
Chemnitz
Dortmund
Dresden
Duisburg
Düsseldorf
Erfurt
Essen
Frankfurt
Freiburg
Fulda Virtuell
Hamburg
Hannover
Karlsruhe
Kassel
Kiel
Köln
Leipzig
Lübeck
Magdeburg
Mainz
Mannheim
Mönchengladbach
München
Münster
Nürnberg
Potsdam
Ravensburg
Regensburg
Rostock
Saarbrücken Virtuell
Schwerin Virtuell
Stuttgart
Trier Virtuell
Ulm
Virtueller Campus Virtuell
Wuppertal
Würzburg
Studiengang*
Agrarmanagement B. Sc. Architektur B.A. Bauingenieurwesen B. Eng. BWL -
Accounting & Controlling B.A. BWL - Steuerberatung B.A. Culinary Management B.A.
Digital Engineering B. Eng. E-Commerce B.A. Elektrotechnik B. Eng.
Gesundheitsmanagement B.A. Immobilien­wirtschaft B.A. Informatik B. Sc.
Kindheitspädagogik B.A. Kommunikation & PR B.A. Logistikmanagement B.A.
Marketingmanagement B.A. Maschinenbau B. Eng. Mechatronik B. Eng. Mediendesign
B.A. Online Marketing B.A. Personalmanagement B.A. Soziale Arbeit B.A.
Tourismusmanagement B.A. Wirtschaftsinformatik B. Sc. Wirtschaftsingenieurwesen
Management B. Eng. Wirtschaftsingenieurwesen Maschinenbau B. Eng.
Wähle Deinen Studiengang


Keine Ergebnisse

Agrarmanagement B. Sc.
Architektur B.A.
Bauingenieurwesen B. Eng.
BWL - Accounting & Controlling B.A.
BWL - Steuerberatung B.A.
Culinary Management B.A.
Digital Engineering B. Eng.
E-Commerce B.A.
Elektrotechnik B. Eng.
Gesundheitsmanagement B.A.
Immobilien­wirtschaft B.A.
Informatik B. Sc.
Kindheitspädagogik B.A.
Kommunikation & PR B.A.
Logistikmanagement B.A.
Marketingmanagement B.A.
Maschinenbau B. Eng.
Mechatronik B. Eng.
Mediendesign B.A.
Online Marketing B.A.
Personalmanagement B.A.
Soziale Arbeit B.A.
Tourismusmanagement B.A.
Wirtschaftsinformatik B. Sc.
Wirtschaftsingenieurwesen Management B. Eng.
Wirtschaftsingenieurwesen Maschinenbau B. Eng.
Studienstart*
Gewünschter Studienstart

Keine Ergebnisse

E-Mail*



Ich habe die Datenschutzerklärung , sowie die Informationen zum Widerrufsrecht
und zu den Verantwortlichen zur Kenntnis genommen.

Mehr anzeigen

Ich willige ein, dass ich per E-Mail Informationen zum Studium und
Veranstaltungen erhalten werde.
Es fehlt nur noch ein weiterer Schritt: Bestätige Deine E-Mail Adresse über die
E-Mail, die wir an Dich senden. Sollte sie nicht nach wenigen Minuten da sein,
schaue bitte auch in Deinem Spam-Ordner nach.
Jetzt Studienbroschüre anfordern

*Pflichtfeld, bitte vollständig ausfüllen


Upps... da ist wohl etwas schiefgelaufen.

Leider konnte Dein Formular nicht übertragen werden. Bitte versuche es erneut.
STUDIENANGEBOT
 * Studiengänge
 * Studienorte
 * Duales Studienmodell
 * Virtueller Campus
 * Praxispartner finden

DEIN STUDIUM
 * Vorteile
 * Kosten
 * Bewerbungsablauf
 * FAQ
 * Bring a Friend

KONTAKT
 * Unser Team
 * Karriere
 * Unsere Veranstaltungen
 * Studienbroschüre anfordern
 * Kontakt für Unternehmen

LOGIN
 * Bewerbungsportal
 * CARE Community
 * MyCampus
 * Webmailer

Datenschutz
Impressum
Affiliate Programm
Cookie-Einstellungen
Instagram TikTok Facebook Youtube Twitter

Copyright © 2022 IU Internationale Hochschule - Alle Rechte vorbehalten

 * Chatten
 * E-Mail schreiben
 * Anrufen: +49 800 600 1616 7
 * WhatsApp Schicken

myStudium

Du wechselst zum Studienmodell myStudium
Bitte beachte, dass Du dafür das duale Studium auf unserer Website verlässt und
zum Studienmodell myStudium kommst.

Zurück zum dualen Studium Weiter ins myStudium
Wir respektieren deine privatsphäre
Diese Website verwendet Cookies und andere Technologien (zusammen „Cookies“).
Die IU Internationale Hochschule nutzt neben technisch notwendigen Cookies
(sogenannte „essentielle Cookies“), um die Website anzeigen zu können, auch
solche, die von Dritten zu Marketing-Zwecken (sog. „Marketing-Cookies“) und zur
Nutzungs-Analyse (sog. „statistische Cookies“) genutzt werden. Du kannst das
Setzen von Cookies entsprechend der folgenden Einstellungen steuern.

Alle Cookies zulassen

MIT TECHNISCHEN COOKIES FORTFAHREN

Cookie-Einstellungen


Datenschutz Impressum


Akzeptieren