New Responsive design

app/Domains/Event/Views/Partials/Overview.vue

@@ -79,12 +79,37 @@
 </script>
 
 <template>
+    <div class="smartphone-actions">
+        <a :href="'/event/details/' + props.data.event.identifier + '/pdf/first-aid-list'">
+            <input type="button" value="Erste-Hilfe-Liste (PDF)" />
+        </a><br/>
+
+        <a :href="'/event/details/' + props.data.event.identifier + '/csv/participant-list'">
+            <input type="button" value="Teili-Liste (CSV)" />
+        </a><br/>
+
+        <a :href="'/event/details/' + props.data.event.identifier + '/pdf/kitchen-list'">
+            <input type="button" value="Küchenübersicht (PDF)" />
+        </a><br/>
+
+        <a :href="'/event/details/' + props.data.event.identifier + '/pdf/amount-list'">
+            <input type="button" value="Beitragsliste (PDF)" />
+        </a><br/>
+
+        <a :href="'/event/details/' + props.data.event.identifier + '/pdf/drinking-list'">
+            <input type="button" value="Getränkeliste (PDF)" />
+        </a><br/>
+
+        <a :href="'/event/details/' + props.data.event.identifier + '/pdf/photo-permission-list'">
+            <input type="button" value="Foto-Erlaubnis (PDF)" />
+        </a><br/>
+    </div>
+
+
     <ParticipationFees v-if="displayData === 'participationFees'" :event="dynamicProps.event"  @close="showMain" />
     <CommonSettings v-else-if="displayData === 'commonSettings'" :event="dynamicProps.event"  @close="showMain" />
     <EventManagement v-else-if="displayData === 'eventManagement'" :event="dynamicProps.event"  @close="showMain" />
 
-
-
     <div class="event-flexbox" v-else>
         <div class="event-flexbox-row top">
             <div class="left"><ParticipationSummary v-if="dynamicProps.event" :event="dynamicProps.event" /></div>
@@ -118,6 +143,8 @@
             </div>
         </div>
 
+
+
         <div>
             <table>
                 <tr>
@@ -241,4 +268,22 @@
     margin-bottom: 10px;
 }
 
+.smartphone-actions {
+    display: none;
+}
+
+/* ─── Smartphone ─── */
+@media (max-width: 639px) {
+    .smartphone-actions {
+        display: block;
+        width: 100%;
+        text-align: center;
+    }
+
+    .event-flexbox {
+        display: none;
+    }
+}
+
+
 </style>