From 84bfea0be9e05c40f3ab548dcd33d7bf5805a57c Mon Sep 17 00:00:00 2001
From: ma0068 <ma0068@technikum-wien.at>
Date: Fri, 24 Oct 2025 11:18:19 +0200
Subject: [PATCH] make Prestudent.js and Details.js responsive

---
 .../Studentenverwaltung/Details/Details.js    | 127 +++++++------
 .../Studentenverwaltung/Details/Prestudent.js | 167 +++++++++---------
 2 files changed, 147 insertions(+), 147 deletions(-)

diff --git a/public/js/components/Stv/Studentenverwaltung/Details/Details.js b/public/js/components/Stv/Studentenverwaltung/Details/Details.js
index 5bb673d1a..8be6c96c8 100644
--- a/public/js/components/Stv/Studentenverwaltung/Details/Details.js
+++ b/public/js/components/Stv/Studentenverwaltung/Details/Details.js
@@ -171,10 +171,10 @@ export default {
 		<fieldset class="overflow-hidden">
 			<legend>Person</legend>
 			<template v-if="data">
-				<div class="row mb-3">
+				<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 g-3 mb-3">
 					<form-input
 						v-if="!config.hiddenFields.includes('person_id')"
-						container-class="col-4 stv-details-details-person_id"
+						container-class="col stv-details-details-person_id"
 						:label="$p.t('person', 'person_id')"
 						type="text"
 						v-model="data.person_id"
@@ -182,7 +182,7 @@ export default {
 						readonly
 						>
 					</form-input>
-					<div v-if="showZugangscode && !config.hiddenFields.includes('zugangscode')" class="col-4 stv-details-details-zugangscode">
+					<div v-if="showZugangscode && !config.hiddenFields.includes('zugangscode')" class="col stv-details-details-zugangscode">
 						<label>{{$p.t('global', 'zugangscode')}}</label>
 						<div class="align-self-center">
 							<span class="form-text">
@@ -192,7 +192,7 @@ export default {
 					</div>
 					<form-input
 						v-if="showBpk && !config.hiddenFields.includes('bpk')"
-						container-class="col-4 stv-details-details-bpk"
+						container-class="col stv-details-details-bpk"
 						:label="$p.t('person', 'bpk')"
 						type="text"
 						v-model="data.bpk"
@@ -200,11 +200,21 @@ export default {
 						maxlength="28"
  						>
 					</form-input>
+					<form-input
+						v-if="!config.hiddenFields.includes('ersatzkennzeichen')"
+						container-class="col stv-details-details-ersatzkennzeichen"
+						:label="$p.t('person', 'ersatzkennzeichen')"
+						type="text"
+						v-model="data.ersatzkennzeichen"
+						name="ersatzkennzeichen"
+						maxlength="10"
+ 						>
+					</form-input>
 				</div>
-				<div class="row mb-3">
+				<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 g-3 mb-3">
 					<form-input
 						v-if="!config.hiddenFields.includes('anrede')"
-						container-class="col-4 stv-details-details-anrede"
+						container-class="col stv-details-details-anrede"
 						:label="$p.t('person', 'anrede')"
 						type="text"
 						v-model="data.anrede"
@@ -214,7 +224,7 @@ export default {
 					</form-input>
 					<form-input
 						v-if="!config.hiddenFields.includes('titelpre')"
-						container-class="col-4 stv-details-details-titelpre"
+						container-class="col stv-details-details-titelpre"
 						:label="$p.t('person', 'titelpre')"
 						type="text"
 						v-model="data.titelpre"
@@ -224,7 +234,7 @@ export default {
 					</form-input>
 					<form-input
 						v-if="!config.hiddenFields.includes('titelpost')"
-						container-class="col-4 stv-details-details-titelpost"
+						container-class="col stv-details-details-titelpost"
 						:label="$p.t('person', 'titelpost')"
 						type="text"
 						v-model="data.titelpost"
@@ -233,10 +243,10 @@ export default {
  						>
 					</form-input>
 				</div>
-				<div class="row mb-3">
+				<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 g-3 mb-3">
 					<form-input
 						v-if="!config.hiddenFields.includes('nachname')"
-						container-class="col-4 stv-details-details-nachname"
+						container-class="col stv-details-details-nachname"
 						:label="$p.t('person', 'nachname')"
 						type="text"
 						v-model="data.nachname"
@@ -246,7 +256,7 @@ export default {
 					</form-input>
 					<form-input
 						v-if="!config.hiddenFields.includes('vorname')"
-						container-class="col-4 stv-details-details-vorname"
+						container-class="col stv-details-details-vorname"
 						:label="$p.t('person', 'vorname')"
 						type="text"
 						v-model="data.vorname"
@@ -256,7 +266,7 @@ export default {
 					</form-input>
 					<form-input
 						v-if="!config.hiddenFields.includes('vornamen')"
-						container-class="col-4 stv-details-details-vornamen"
+						container-class="col stv-details-details-vornamen"
 						:label="$p.t('person', 'vornamen')"
 						type="text"
 						v-model="data.vornamen"
@@ -264,11 +274,9 @@ export default {
 						maxlength="128"
  						>
 					</form-input>
-				</div>
-				<div class="row mb-3">
 					<form-input
 						v-if="!config.hiddenFields.includes('wahlname')"
-						container-class="col-4 stv-details-details-wahlname"
+						container-class="col stv-details-details-wahlname"
 						:label="$p.t('person', 'wahlname')"
 						type="text"
 						v-model="data.wahlname"
@@ -276,11 +284,12 @@ export default {
 						maxlength="128"
  						>
 					</form-input>
+
 				</div>
-				<div class="row mb-3">
+				<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 g-3 mb-3">
 					<form-input
 						v-if="!config.hiddenFields.includes('gebdatum')"
-						container-class="col-4 stv-details-details-gebdatum"
+						container-class="col stv-details-details-gebdatum"
 						:label="$p.t('person', 'geburtsdatum')"
 						type="DatePicker"
 						v-model="data.gebdatum"
@@ -297,7 +306,7 @@ export default {
 					</form-input>
 					<form-input
 						v-if="!config.hiddenFields.includes('gebort')"
-						container-class="col-4 stv-details-details-gebort"
+						container-class="col stv-details-details-gebort"
 						:label="$p.t('person', 'geburtsort')"
 						type="text"
 						v-model="data.gebort"
@@ -307,7 +316,7 @@ export default {
 					</form-input>
 					<form-input
 						v-if="!config.hiddenFields.includes('geburtsnation')"
-						container-class="col-4 stv-details-details-geburtsnation"
+						container-class="col stv-details-details-geburtsnation"
 						:label="$p.t('person', 'geburtsnation')"
 						type="select"
 						v-model="data.geburtsnation"
@@ -316,23 +325,9 @@ export default {
 						<option value="">-- {{$p.t('fehlermonitoring', 'keineAuswahl')}} --</option>
 						<option v-for="nation in lists.nations" :key="nation.nation_code" :value="nation.nation_code" :disabled="nation.sperre">{{nation.kurztext}}</option>
 					</form-input>
-				</div>
-				<div class="row mb-3">
-					<form-input
-						v-if="!config.hiddenFields.includes('ersatzkennzeichen')"
-						container-class="col-4 stv-details-details-ersatzkennzeichen"
-						:label="$p.t('person', 'ersatzkennzeichen')"
-						type="text"
-						v-model="data.ersatzkennzeichen"
-						name="ersatzkennzeichen"
-						maxlength="10"
- 						>
-					</form-input>
-				</div>
-				<div class="row mb-3">
 					<form-input
 						v-if="!config.hiddenFields.includes('staatsbuergerschaft')"
-						container-class="col-4 stv-details-details-staatsbuergerschaft"
+						container-class="col stv-details-details-staatsbuergerschaft"
 						:label="$p.t('person', 'staatsbuergerschaft')"
 						type="select"
 						v-model="data.staatsbuergerschaft"
@@ -341,9 +336,12 @@ export default {
 						<option value="">-- {{$p.t('fehlermonitoring', 'keineAuswahl')}} --</option>
 						<option v-for="nation in lists.nations" :key="nation.nation_code" :value="nation.nation_code" :disabled="nation.sperre">{{nation.kurztext}}</option>
 					</form-input>
+				</div>
+				<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 g-3 mb-3">
+
 					<form-input
 						v-if="!config.hiddenFields.includes('matr_nr')"
-						container-class="col-4 stv-details-details-matr_nr"
+						container-class="col stv-details-details-matr_nr"
 						:label="$p.t('person', 'matrikelnummer')"
 						type="text"
 						v-model="data.matr_nr"
@@ -353,7 +351,7 @@ export default {
 					</form-input>
 					<form-input
 						v-if="!config.hiddenFields.includes('sprache')"
-						container-class="col-4 stv-details-details-sprache"
+						container-class="col stv-details-details-sprache"
 						:label="$p.t('person', 'sprache')"
 						type="select"
 						v-model="data.sprache"
@@ -361,11 +359,9 @@ export default {
  						>
 						<option v-for="sprache in lists.sprachen" :key="sprache.sprache" :value="sprache.sprache">{{sprache.sprache}}</option>
 					</form-input>
-				</div>
-				<div class="row mb-3">
 					<form-input
 						v-if="!config.hiddenFields.includes('geschlecht')"
-						container-class="col-4 stv-details-details-geschlecht"
+						container-class="col stv-details-details-geschlecht"
 						:label="$p.t('person', 'geschlecht')"
 						type="select"
 						v-model="data.geschlecht"
@@ -375,7 +371,7 @@ export default {
 					</form-input>
 					<form-input
 						v-if="!config.hiddenFields.includes('familienstand')"
-						container-class="col-4 stv-details-details-familienstand"
+						container-class="col stv-details-details-familienstand"
 						:label="$p.t('person', 'familienstand')"
 						type="select"
 						v-model="data.familienstand"
@@ -384,10 +380,10 @@ export default {
 						<option v-for="(bezeichnung, key) in familienstaende" :key="key" :value="key">{{bezeichnung}}</option>
 					</form-input>
 				</div>
-				<div class="row mb-3">
+				<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 g-3 mb-3">
 					<form-input
 						v-if="!config.hiddenFields.includes('foto')"
-						container-class="col-4 stv-details-details-foto"
+						container-class="col stv-details-details-foto"
 						:label="$p.t('person', 'foto')"
 						type="UploadImage"
 						v-model="data.foto"
@@ -397,7 +393,7 @@ export default {
 					</form-input>
 					<form-input
 						v-if="!config.hiddenFields.includes('anmerkung')"
-						container-class="col-4 stv-details-details-anmerkung"
+						container-class="col stv-details-details-anmerkung"
 						:label="$p.t('global', 'anmerkung')"
 						type="textarea"
 						v-model="data.anmerkung"
@@ -407,7 +403,7 @@ export default {
 					</form-input>
 					<form-input
 						v-if="!config.hiddenFields.includes('homepage')"
-						container-class="col-4 stv-details-details-homepage"
+						container-class="col stv-details-details-homepage"
 						:label="$p.t('person', 'homepage')"
 						type="text"
 						v-model="data.homepage"
@@ -433,10 +429,10 @@ export default {
 		<fieldset v-if="data?.student_uid" class="overflow-hidden">
 			<legend>{{$p.t('person', 'studentIn')}}</legend>
 			<template v-if="data">
-				<div class="row mb-3">
+				<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 g-3 mb-3">
 					<form-input
 						v-if="!config.hiddenFields.includes('student_uid')"
-						container-class="col-4 stv-details-details-student_uid"
+						container-class="col stv-details-details-student_uid"
 						:label="$p.t('person', 'uid')"
 						type="text"
 						v-model="data.student_uid"
@@ -446,7 +442,7 @@ export default {
 					</form-input>
 					<form-input
 						v-if="!config.hiddenFields.includes('matrikelnr')"
-						container-class="col-4 stv-details-details-matrikelnr"
+						container-class="col stv-details-details-matrikelnr"
 						:label="$p.t('person', 'personenkennzeichen')"
 						type="text"
 						v-model="data.matrikelnr"
@@ -454,22 +450,31 @@ export default {
 						readonly
 						>
 					</form-input>
-					<div class="col-4 pt-4 d-flex align-items-center">
+					<template class="col-4 pt-4 d-flex align-items-center">
 						<form-input
 							v-if="!config.hiddenFields.includes('aktiv')"
-							container-class="form-check stv-details-details-aktiv"
+							container-class="col form-check stv-details-details-aktiv"
 							:label="$p.t('person', 'aktiv')"
 							type="checkbox"
 							v-model="data.aktiv"
 							name="aktiv"
 							>
 						</form-input>
-					</div>
+					</template>
+					<form-input
+						v-if="!config.hiddenFields.includes('alias')"
+						:label="$p.t('person', 'alias')"
+						type="text"
+						v-model="data.alias"
+						name="alias"
+						:disabled="aliasNotAllowed"
+						>
+					</form-input>
 				</div>
-				<div class="row mb-3">
+				<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 g-3 mb-3">
 					<form-input
 						v-if="!config.hiddenFields.includes('semester')"
-						container-class="col-4 stv-details-details-semester"
+						container-class="col stv-details-details-semester"
 						:label="$p.t('lehre', 'semester')"
 						type="text"
 						v-model="data.semester"
@@ -479,7 +484,7 @@ export default {
 					</form-input>
 					<form-input
 						v-if="!config.hiddenFields.includes('verband')"
-						container-class="col-4 stv-details-details-verband"
+						container-class="col stv-details-details-verband"
 						:label="$p.t('lehre', 'verband')"
 						type="text"
 						v-model="data.verband"
@@ -489,7 +494,7 @@ export default {
 					</form-input>
 					<form-input
 						v-if="!config.hiddenFields.includes('gruppe')"
-						container-class="col-4 stv-details-details-gruppe"
+						container-class="col stv-details-details-gruppe"
 						:label="$p.t('lehre', 'gruppe')"
 						type="text"
 						v-model="data.gruppe"
@@ -498,19 +503,7 @@ export default {
 						>
 					</form-input>
 				</div>
-				<div class="row mb-3">
-					<form-input
-						v-if="!config.hiddenFields.includes('alias')"
-						container-class="col-4 stv-details-details-alias"
-						:label="$p.t('person', 'alias')"
-						type="text"
-						v-model="data.alias"
-						name="alias"
-						:disabled="aliasNotAllowed"
-						>
-					</form-input>
-				</div>
-			</template>
+			</template>	
 			<div v-else>
 				{{$p.t('ui', 'dropdownLoading')}}...
 			</div>
diff --git a/public/js/components/Stv/Studentenverwaltung/Details/Prestudent.js b/public/js/components/Stv/Studentenverwaltung/Details/Prestudent.js
index dc645dadc..ce43622cf 100644
--- a/public/js/components/Stv/Studentenverwaltung/Details/Prestudent.js
+++ b/public/js/components/Stv/Studentenverwaltung/Details/Prestudent.js
@@ -237,10 +237,10 @@ export default {
 			</div>
 			<fieldset class="overflow-hidden">
 				<legend>{{$p.t('lehre', 'title_zgv')}} {{modelValue.nachname}} {{modelValue.vorname}}</legend>
-				<div class="row mb-3">
+				<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 g-3 mb-3">
 					<form-input
 					v-if="!config.hiddenFields.includes('prestudent_id')"
-						container-class="col-3 stv-details-prestudent-prestudent_id"
+						container-class="col stv-details-prestudent-prestudent_id"
 						:label="$p.t('ui', 'prestudent_id')"
 						type="text"
 						v-model="data.prestudent_id"
@@ -250,7 +250,7 @@ export default {
 					</form-input>
 					<form-input
 						v-if="!config.hiddenFields.includes('person_id')"
-						container-class="col-3 stv-details-prestudent-person_id"
+						container-class="col stv-details-prestudent-person_id"
 						:label="$p.t('person', 'person_id')"
 						type="text"
 						v-model="data.person_id"
@@ -259,10 +259,10 @@ export default {
 						>
 					</form-input>
 				</div>
-				<div class="row mb-3">
+				<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 g-3 mb-3">
 					<form-input
 						v-if="!config.hiddenFields.includes('zgv_code')"
-						container-class="col-3 stv-details-prestudent-zgv_code"
+						container-class="col stv-details-prestudent-zgv_code"
 						label="ZGV"
 						type="autocomplete"
 						v-model="selectedZgv"
@@ -286,7 +286,7 @@ export default {
 					</form-input>
 					<form-input
 						v-if="!config.hiddenFields.includes('zgvOrt')"
-						container-class="col-3 stv-details-prestudent-zgvOrt"
+						container-class="col stv-details-prestudent-zgvOrt"
 						:label="$p.t('infocenter', 'zgvOrt')"
 						type="text"
 						v-model="data.zgvort"
@@ -295,7 +295,7 @@ export default {
 					</form-input>	
 					<form-input
 						v-if="!config.hiddenFields.includes('zgvDatum')"
-						container-class="col-3 stv-details-prestudent-zgvDatum"
+						container-class="col stv-details-prestudent-zgvDatum"
 						:label="$p.t('infocenter', 'zgvDatum')"
 						type="DatePicker"
 						v-model="data.zgvdatum"
@@ -311,7 +311,7 @@ export default {
 					</form-input>
 					<form-input
 						v-if="!config.hiddenFields.includes('zgvNation')"
-						container-class="col-3 stv-details-prestudent-zgvNation"
+						container-class="col stv-details-prestudent-zgvNation"
 						:label="$p.t('infocenter', 'zgvNation')"
 						type="select"
 						v-model="data.zgvnation"
@@ -322,10 +322,10 @@ export default {
 						<option v-for="nation in lists.nations" :key="nation.nation_code" :value="nation.nation_code" :disabled="nation.sperre">{{nation.kurztext}}</option>
 					</form-input>
 				</div>
-				<div class="row mb-3">
+				<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 g-3 mb-3">
 					<form-input
 						v-if="!config.hiddenFields.includes('zgvmas_code')"
-						container-class="col-3 stv-details-prestudent-zgvmas_code"
+						container-class="col stv-details-prestudent-zgvmas_code"
 						:label="$p.t('lehre', 'zgvMaster')"
 						type="autocomplete"
 						v-model="selectedMasterZgv"
@@ -349,7 +349,7 @@ export default {
 					</form-input>
 					<form-input
 						v-if="!config.hiddenFields.includes('zgvmaort')"
-						container-class="col-3 stv-details-prestudent-zgvmaort"
+						container-class="col stv-details-prestudent-zgvmaort"
 						:label="$p.t('lehre', 'zgvMasterOrt')"
 						type="text"
 						v-model="data.zgvmaort"
@@ -358,7 +358,7 @@ export default {
 					</form-input>
 					<form-input
 						v-if="!config.hiddenFields.includes('zgvmadatum')"
-						container-class="col-3 stv-details-prestudent-zgvmadatum"
+						container-class="col stv-details-prestudent-zgvmadatum"
 						:label="$p.t('lehre', 'zgvMasterDatum')"
 						type="DatePicker"
 						v-model="data.zgvmadatum"
@@ -374,7 +374,7 @@ export default {
 					</form-input>
 					<form-input
 						v-if="!config.hiddenFields.includes('zgvmanation')"
-						container-class="col-3 stv-details-prestudent-zgvmanation"
+						container-class="col stv-details-prestudent-zgvmanation"
 						:label="$p.t('lehre', 'zgvMasterNation')"
 						type="select"
 						v-model="data.zgvmanation"
@@ -386,10 +386,10 @@ export default {
 					</form-input>
 				</div>
 				<!--ZGV Doktor-->
-				<div class="row mb-3">
+				<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 g-3 mb-3">
 					<form-input
 						v-if="!config.hiddenFields.includes('zgvdoktor_code')"
-						container-class="col-3 stv-details-prestudent-zgvdoktor_code"
+						container-class="col stv-details-prestudent-zgvdoktor_code"
 						:label="$p.t('lehre', 'zgvDoktor')"
 						type="autocomplete"
 						v-model="selectedDoktorZgv"
@@ -413,7 +413,7 @@ export default {
 					</form-input>
 					<form-input
 						v-if="!config.hiddenFields.includes('zgvdoktorort')"
-						container-class="col-3 stv-details-prestudent-zgvdoktorort"
+						container-class="col stv-details-prestudent-zgvdoktorort"
 						:label="$p.t('lehre', 'zgvDoktorOrt')"
 						type="text"
 						v-model="data.zgvdoktorort"
@@ -422,7 +422,7 @@ export default {
 					</form-input>
 					<form-input
 						v-if="!config.hiddenFields.includes('zgvdoktordatum')"
-						container-class="col-3 stv-details-prestudent-zgvdoktordatum"
+						container-class="col stv-details-prestudent-zgvdoktordatum"
 						:label="$p.t('lehre', 'zgvDoktorDatum')"
 						type="DatePicker"
 						v-model="data.zgvdoktordatum"
@@ -438,7 +438,7 @@ export default {
 					</form-input>
 					<form-input
 						v-if="!config.hiddenFields.includes('zgvdoktornation')"
-						container-class="col-3 stv-details-prestudent-zgvdoktornation"
+						container-class="col stv-details-prestudent-zgvdoktornation"
 						:label="$p.t('lehre', 'zgvDoktorNation')"
 						type="select"
 						v-model="data.zgvdoktornation"
@@ -450,8 +450,8 @@ export default {
 					</form-input>
 				</div>
 																
-				<div class="row mb-3">
-					<div class="col-3 pt-4 d-flex align-items-center">
+				<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 g-3 mb-3">
+					<template class="col pt-4 d-flex align-items-center">
 						<form-input
 							v-if="!config.hiddenFields.includes('zgv_erfuellt')"
 							container-class="form-check stv-details-prestudent-zgv_erfuellt"
@@ -461,8 +461,8 @@ export default {
 							name="zgv_erfuellt"
 							>
 						</form-input>
-					</div>
-					<div class="col-3 pt-4 d-flex align-items-center">
+					</template>
+					<template class="col pt-4 d-flex align-items-center">
 						<form-input
 							v-if="!config.hiddenFields.includes('zgvmas_erfuellt')"
 							container-class="form-check stv-details-prestudent-zgvmas_erfuellt"
@@ -472,8 +472,8 @@ export default {
 							name="zgvmas_erfuellt"
 							>
 						</form-input>
-					</div>
-					<div class="col-3 pt-4 d-flex align-items-center">
+					</template>
+					<template class="col pt-4 d-flex align-items-center">
 						<form-input
 							v-if="!config.hiddenFields.includes('zgvdoktor_erfuellt')"
 							container-class="form-check stv-details-prestudent-zgvdoktor_erfuellt"
@@ -483,15 +483,15 @@ export default {
 							name="zgvdoktor_erfuellt"
 							>
 						</form-input>
-					</div>
+					</template>
 				</div>
 			</fieldset>
 			<fieldset class="overflow-hidden">
 				<legend>PrestudentIn</legend>
-				<div class="row mb-3">
+				<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-3 g-3 mb-3">
 					<form-input
 						v-if="!config.hiddenFields.includes('aufmerksamdurch_kurzbz')"
-						container-class="col-4 stv-details-prestudent-aufmerksamdurch_kurzbz"
+						container-class="col stv-details-prestudent-aufmerksamdurch_kurzbz"
 						:label="$p.t('person', 'aufmerksamDurch')"
 						type="select"
 						v-model="data.aufmerksamdurch_kurzbz"
@@ -501,7 +501,7 @@ export default {
 					</form-input>
 					<form-input
 						v-if="!config.hiddenFields.includes('berufstaetigkeit_code')"
-						container-class="col-4 stv-details-prestudent-berufstaetigkeit_code"
+						container-class="col stv-details-prestudent-berufstaetigkeit_code"
 						:label="$p.t('person', 'berufstaetigkeit')"
 						type="select"
 						v-model="data.berufstaetigkeit_code"
@@ -512,7 +512,7 @@ export default {
 					</form-input>
 					<form-input
 						v-if="!config.hiddenFields.includes('ausbildungcode')"
-						container-class="col-4 stv-details-prestudent-ausbildungcode"
+						container-class="col stv-details-prestudent-ausbildungcode"
 						:label="$p.t('person', 'ausbildung')"
 						type="select"
 						v-model="data.ausbildungcode"
@@ -523,10 +523,10 @@ export default {
 					</form-input>
 				</div>
 				
-				<div class="row mb-3">
+				<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-3 g-3 mb-3">
 					<form-input
 						v-if="!config.hiddenFields.includes('aufnahmeschluessel')"
-						container-class="col-4 stv-details-prestudent-aufnahmeschluessel"
+						container-class="col stv-details-prestudent-aufnahmeschluessel"
 						label="Aufnahmeschlüssel"
 						type="text"
 						v-model="data.aufnahmeschluessel"
@@ -535,7 +535,7 @@ export default {
 						>
 					</form-input>
 					
-					<div class="col-4 pt-4 d-flex align-items-center">
+					<template class="col pt-4 d-flex align-items-center">
 						<form-input
 							v-if="!config.hiddenFields.includes('facheinschlaegigBerufstaetig')"
 							container-class="form-check stv-details-prestudent-facheinschlaegigBerufstaetig"
@@ -545,11 +545,11 @@ export default {
 							name="facheinschlberuf"
 							>
 						</form-input>
-					</div>
+					</template>
 					
 					<form-input
 						v-if="!config.hiddenFields.includes('standort_code')"
-						container-class="col-4 stv-details-prestudent-standort_code"
+						container-class="col stv-details-prestudent-standort_code"
 						:label="$p.t('person', 'bisstandort')"
 						type="select"
 						v-model="data.standort_code"
@@ -559,10 +559,10 @@ export default {
 					</form-input>		 
 				</div>
 								
-				<div class="row mb-3">
+				<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-3 g-3 mb-3">
 					<form-input
 						v-if="!config.hiddenFields.includes('studiengang_kz')"
-						container-class="col-4 stv-details-prestudent-studiengang_kz"
+						container-class="col stv-details-prestudent-studiengang_kz"
 						:label="$p.t('lehre', 'studiengang')"
 						type="select"
 						v-model="data.studiengang_kz"
@@ -573,7 +573,7 @@ export default {
 					</form-input>
 					<form-input
 						v-if="!config.hiddenFields.includes('gsstudientyp_kurzbz')"
-						container-class="col-4 stv-details-prestudent-gsstudientyp_kurzbz"
+						container-class="col stv-details-prestudent-gsstudientyp_kurzbz"
 						:label="$p.t('lehre', 'studientyp')"
 						type="select"
 						v-model="data.gsstudientyp_kurzbz"
@@ -583,59 +583,66 @@ export default {
 					</form-input>
 				</div>
 				
-				<div class="row mb-3">
+				<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-3 g-3 mb-3">
 					<form-input
 						v-if="!config.hiddenFields.includes('anmerkung')"
-						container-class="col-4 stv-details-prestudent-anmerkung"
+						container-class="col stv-details-prestudent-anmerkung"
 						:label="$p.t('global', 'anmerkung')"
 						type="text"
 						v-model="data.anmerkung"
 						name="anmerkung"
 						>
 					</form-input>
-					<div class="col-2 pt-4 d-flex align-items-center">
-						<form-input
-							v-if="!config.hiddenFields.includes('bismelden')"
-							container-class="form-check stv-details-prestudent-bismelden"
-							:label="$p.t('person', 'bismelden')"
-							type="checkbox"
-							v-model="data.bismelden"
-							name="bismelden"
-							>
-						</form-input>
-					</div>
-					<div class="col-2 pt-4 d-flex align-items-center">
-						<form-input
-							v-if="!config.hiddenFields.includes('dual')"
-							container-class="form-check stv-details-prestudent-dual"
-							:label="$p.t('lehre', 'dual')"
-							type="checkbox"
-							v-model="data.dual"
-							name="dual"
-							>
-						</form-input>
+					<div class="col">
+						<div class="row g-3 align-items-center mb-3">
+							<template class="col-12 col-md-6 pt-4 d-flex align-items-center">
+								<form-input
+									v-if="!config.hiddenFields.includes('bismelden')"
+									container-class="col form-check stv-details-prestudent-bismelden"
+									:label="$p.t('person', 'bismelden')"
+									type="checkbox"
+									v-model="data.bismelden"
+									name="bismelden"
+									>
+								</form-input>
+							</template>
+							<template class="col-12 col-md-6 pt-4 d-flex align-items-center">
+								<form-input
+									v-if="!config.hiddenFields.includes('dual')"
+									container-class="col form-check stv-details-prestudent-dual"
+									:label="$p.t('lehre', 'dual')"
+									type="checkbox"
+									v-model="data.dual"
+									name="dual"
+									>
+								</form-input>
+							</template>
+						</div>
 					</div>
 					
-					<form-input
-						container-class="col-3"
-						:label="$p.t('lehre', 'foerderrelevant')"
-						type="select"
-						v-model="data.foerderrelevant"
-						name="foerderrelevant"
-						>
-						<option v-for="entry in listFoerderrelevant" :value="entry.value">{{entry.text}}</option>
-					</form-input>
-					
-					<form-input
-						v-if="!config.hiddenFields.includes('priorisierung')"
-						container-class="col-1"
-						:label="$p.t('lehre', 'prioritaet')"
-						type="text"
-						v-model="data.priorisierung"
-						name="priorisierung"
-						:disabled="!hasPrestudentPermission"
-						>
-					</form-input>
+					<div class="col">
+						<div class="row g-3 align-items-center">
+							<form-input
+								container-class="col-12 col-md-6"
+								:label="$p.t('lehre', 'foerderrelevant')"
+								type="select"
+								v-model="data.foerderrelevant"
+								name="foerderrelevant"
+								>
+								<option v-for="entry in listFoerderrelevant" :value="entry.value">{{entry.text}}</option>
+							</form-input>
+							<form-input
+								v-if="!config.hiddenFields.includes('priorisierung')"
+								container-class="col-12 col-md-6"
+								:label="$p.t('lehre', 'prioritaet')"
+								type="text"
+								v-model="data.priorisierung"
+								name="priorisierung"
+								:disabled="!hasPrestudentPermission"
+								>
+							</form-input>
+						</div>
+					</div>
 				</div>
 				<core-udf
 					v-if="!config.hideUDFs"