New Responsive design

app/Domains/Event/Views/Partials/SignUpForm/steps/StepAge.vue

@@ -9,7 +9,7 @@ const emit = defineEmits(['next'])
         <h3 style="margin: 0 0 6px 0; color: #111827;">Wer nimmt teil?</h3>
         <p style="margin: 0 0 24px 0; color: #6b7280; font-size: 0.95rem;">Bitte wähle deine Altersgruppe aus.</p>
 
-        <div style="display: flex; gap: 20px; flex-wrap: wrap;">
+        <div class="age-card-row">
 
             <!-- Kind / Jugendliche:r -->
             <div class="age-card" @click="emit('next', 2)">
@@ -40,9 +40,15 @@ const emit = defineEmits(['next'])
 </template>
 
 <style scoped>
+.age-card-row {
+    display: flex;
+    gap: 20px;
+    flex-wrap: wrap;
+}
+
 .age-card {
-    flex: 1;
-    min-width: 220px;
+    flex: 1 1 280px;
+    min-width: 0;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -62,13 +68,14 @@ const emit = defineEmits(['next'])
 
 .age-card__badge {
     position: relative;
-    width: 350px;
-    height: 200px;
+    width: 100%;
+    max-width: 350px;
+    aspect-ratio: 350 / 200;
     margin-bottom: 16px;
 }
 .age-card__img {
-    width: 350px;
-    height: 200px;
+    width: 100%;
+    height: 100%;
     object-fit: contain;
 }
 .age-card__badge-fallback {
@@ -100,4 +107,43 @@ const emit = defineEmits(['next'])
     font-size: 0.85rem;
     font-weight: 600;
 }
+
+/* ─── Smartphone ─── */
+@media (max-width: 639px) {
+    .age-card-row {
+        flex-direction: column;
+        gap: 12px;
+    }
+
+    .age-card {
+        flex: 1 1 100%;
+        padding: 18px 14px;
+        flex-direction: row;
+        text-align: left;
+        align-items: center;
+        gap: 14px;
+    }
+
+    .age-card__badge {
+        flex: 0 0 90px;
+        width: 90px;
+        max-width: 90px;
+        aspect-ratio: 1;
+        margin-bottom: 0;
+    }
+
+    .age-card__body {
+        flex: 1;
+        align-items: flex-start;
+        text-align: left;
+    }
+
+    .age-card__title {
+        font-size: 1rem;
+    }
+
+    .age-card__desc {
+        font-size: 0.85rem;
+    }
+}
 </style>

app/Domains/Event/Views/Partials/SignUpForm/steps/StepPersonalData.vue

@@ -116,8 +116,10 @@ const next = () => {
             <tr>
                 <td>PLZ, Ort:</td>
                 <td>
-                    <input maxlength="5" type="text" v-model="props.formData.plz" style="width: 100px; margin-right: 8px;" />
-                    <input type="text" v-model="props.formData.ort" style="width: calc(100% - 110px);" />
+                    <div class="plz-ort-row">
+                        <input maxlength="5" type="text" v-model="props.formData.plz" class="plz-input" placeholder="PLZ" />
+                        <input type="text" v-model="props.formData.ort" class="ort-input" placeholder="Ort" />
+                    </div>
                     <ErrorText :message="errors.plz" />
                     <ErrorText :message="errors.ort" />
                 </td>
@@ -132,3 +134,28 @@ const next = () => {
         </table>
     </div>
 </template>
+
+<style scoped>
+.plz-ort-row {
+    display: flex;
+    gap: 8px;
+    width: 100%;
+}
+
+.plz-input {
+    flex: 0 0 100px;
+    width: 100px;
+}
+
+.ort-input {
+    flex: 1;
+    min-width: 0;
+}
+
+@media (max-width: 639px) {
+    .plz-input {
+        flex: 0 0 80px;
+        width: 80px;
+    }
+}
+</style>